/* Экран «Календарь» мини-аппки (docs/33 §4). Цвета — из темы Telegram (--tg-theme-*), запасные — ниже. */
:root{
  --bg:var(--tg-theme-bg-color,#ffffff);
  --bg2:var(--tg-theme-secondary-bg-color,#f1f2f6);
  --text:var(--tg-theme-text-color,#0f1419);
  --hint:var(--tg-theme-hint-color,#707579);
  --link:var(--tg-theme-link-color,#2481cc);
  --accent:var(--tg-theme-button-color,#3390ec);
  --accent-text:var(--tg-theme-button-text-color,#ffffff);
  --sep:var(--tg-theme-section-separator-color,#e3e6ea);
  --danger:var(--tg-theme-destructive-text-color,#e5383b);
  --card:var(--tg-theme-section-bg-color,#ffffff);
  --ev:#e8f1fd; --ev-line:#3390ec; --ev-text:#0f3c66;
  --ev2:#eaf7ee; --ev2-line:#2fa05a; --ev2-text:#14532d;
  --ev3:#fdf1e3; --ev3-line:#e08a1e; --ev3-text:#6b3a07;
  --free:rgba(47,160,90,.07); --free-line:rgba(47,160,90,.45);
  --now:#e5383b;
  --shadow:0 10px 30px -12px rgba(15,20,25,.28);
  --r:12px; --hour:56px;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15px; color:var(--text); background:var(--bg2);
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
}
:root[data-theme=dark]{
  --bg:var(--tg-theme-bg-color,#17212b); --bg2:var(--tg-theme-secondary-bg-color,#0e1621);
  --text:var(--tg-theme-text-color,#f5f5f5); --hint:var(--tg-theme-hint-color,#7d8b99);
  --link:var(--tg-theme-link-color,#6ab3f3); --accent:var(--tg-theme-button-color,#5288c1);
  --sep:var(--tg-theme-section-separator-color,#22303d); --card:var(--tg-theme-section-bg-color,#17212b);
  --ev:#1f3550; --ev-line:#5aa6ef; --ev-text:#d7e9fb;
  --ev2:#1d3a2a; --ev2-line:#4cc27a; --ev2-text:#d3f2de;
  --ev3:#3d2e1a; --ev3-line:#f0a446; --ev3-text:#fbe6c9;
  --free:rgba(76,194,122,.08); --free-line:rgba(76,194,122,.4);
  --shadow:0 12px 30px -10px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg2)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.grow{flex:1}
.hint{color:var(--hint);font-size:13px;line-height:1.45;margin:0}

/* ---------- раскладка ---------- */
.app{min-height:100vh;display:flex;flex-direction:column}
.side{display:none}
.main{flex:1;display:flex;flex-direction:column;background:var(--bg);min-width:0}
.top{position:sticky;top:0;z-index:5;background:var(--bg);padding:8px 12px 0;border-bottom:1px solid var(--sep)}
.top-row{display:flex;align-items:center;gap:2px;min-height:44px}
.icon-btn{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-size:26px;line-height:1;color:var(--link)}
.icon-btn:hover{background:var(--bg2)}
.title-btn{font-size:19px;font-weight:700;padding:6px 6px;border-radius:8px;white-space:nowrap;letter-spacing:-.01em}
.title-btn:first-letter{text-transform:uppercase}
.gear{color:var(--hint)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);background:var(--bg2);border-radius:10px;padding:2px;margin:4px 0 8px}
.seg button{height:32px;border-radius:8px;font-size:14px;font-weight:500;color:var(--hint)}
.seg button[aria-selected=true]{background:var(--card);color:var(--text);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.12)}
:root[data-theme=dark] .seg button[aria-selected=true]{background:#2b3a4a}

/* полоса недели */
.strip{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:0 0 8px}
.strip button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 0 6px;border-radius:12px}
.strip .wd{font-size:12px;color:var(--hint);text-transform:lowercase}
.strip .dn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:16px;font-weight:500}
.strip .we .wd{color:var(--danger);opacity:.8}
.strip .today .dn{color:var(--accent);font-weight:700}
.strip .sel .dn{background:var(--accent);color:var(--accent-text);font-weight:700}
.dots{display:flex;gap:3px;height:5px}
.dots i{width:5px;height:5px;border-radius:50%;background:var(--hint);opacity:.7}
.dots i.c1{background:var(--ev-line);opacity:1}.dots i.c2{background:var(--ev2-line);opacity:1}.dots i.c3{background:var(--ev3-line);opacity:1}

.view{flex:1;min-height:0}
.empty{padding:28px 20px;text-align:center;color:var(--hint);font-size:14px}

/* ---------- день: шкала ---------- */
.day-head{display:flex;align-items:baseline;gap:8px;padding:12px 16px 6px}
.day-head h3{margin:0;font-size:17px;font-weight:700}
.day-head h3:first-letter{text-transform:uppercase}
.day-head .cnt{color:var(--hint);font-size:13px}
.allday{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 8px}
.chip{max-width:100%;display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;background:var(--ev3);color:var(--ev3-text);
  font-size:13px;font-weight:600;border-left:3px solid var(--ev3-line);text-align:left}
.chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.timeline{position:relative;margin:0 12px 0 0;padding:10px 0 80px}
.hours{position:relative}
.hour{height:var(--hour);display:flex;border-top:1px solid var(--sep)}
.hour:first-child{border-top-color:transparent}
.hour b{width:52px;flex:none;font-size:11px;font-weight:500;color:var(--hint);text-align:right;padding-right:8px;transform:translateY(-8px);background:var(--bg);height:16px;line-height:16px}
.lane{position:absolute;top:10px;bottom:0;left:56px;right:0}
.free{position:absolute;left:0;right:0;background:var(--free);border-left:2px dashed var(--free-line);border-radius:6px;
  display:flex;align-items:flex-start;padding:4px 8px;font-size:11px;color:var(--ev2-line);font-weight:600;pointer-events:none}
.ev{position:absolute;border-radius:8px;padding:4px 8px;overflow:hidden;text-align:left;background:var(--ev);color:var(--ev-text);
  border-left:3px solid var(--ev-line);font-size:13px;line-height:1.3;display:flex;flex-direction:column;gap:1px;min-height:22px}
.ev.c2{background:var(--ev2);color:var(--ev2-text);border-left-color:var(--ev2-line)}
.ev.c3{background:var(--ev3);color:var(--ev3-text);border-left-color:var(--ev3-line)}
.ev:hover{filter:brightness(.97)}
.ev.stack,.ev.short.stack{box-shadow:0 0 0 1px var(--bg);align-items:flex-start;padding-top:3px}
.ev .t{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev .m{font-size:12px;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev.short{flex-direction:row;align-items:center;gap:6px;padding-top:2px;padding-bottom:2px}
.ev.short .m{flex:none}
.now-line{position:absolute;left:-6px;right:0;height:2px;background:var(--now);z-index:2;pointer-events:none}
.now-line::before{content:"";position:absolute;left:-4px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--now)}

/* ---------- список (неделя на 390, день месяца) ---------- */
.list{padding:4px 0 90px}
.dgroup{padding:10px 16px 4px}
.dgroup h4{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--hint);text-transform:uppercase;letter-spacing:.03em}
.dgroup.today h4{color:var(--accent)}
.row{width:100%;display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:start;padding:9px 10px;border-radius:10px;text-align:left;
  background:var(--card);border:1px solid var(--sep);margin-bottom:6px}
.row:hover{border-color:var(--accent)}
.row .tm{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;padding-top:1px}
.row .tm small{display:block;font-size:12px;font-weight:400;color:var(--hint)}
.row .bd{display:block;min-width:0;border-left:3px solid var(--ev-line);padding-left:10px}
.row.c2 .bd{border-left-color:var(--ev2-line)}.row.c3 .bd{border-left-color:var(--ev3-line)}
.row .tt{display:block;font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .mm{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:2px;font-size:12px;color:var(--hint)}
.row .mm span{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.free-row{font-size:13px;color:var(--ev2-line);padding:2px 2px 8px;font-weight:500}
.none-row{font-size:13px;color:var(--hint);padding:2px 2px 8px}

/* ---------- неделя: сетка 7 колонок (≥ 768) ---------- */
.wgrid{display:none}
.wgrid-head{display:grid;grid-template-columns:56px repeat(7,minmax(0,1fr));border-bottom:1px solid var(--sep);position:sticky;top:0;background:var(--bg);z-index:3}
.wgrid-head div{padding:8px 6px;text-align:center;font-size:12px;color:var(--hint)}
.wgrid-head b{display:block;font-size:20px;font-weight:600;color:var(--text);margin-top:2px}
.wgrid-head .today b{color:var(--accent)}
.wgrid-head .ad{display:flex;flex-direction:column;gap:3px;margin-top:6px;min-height:0}
.wgrid-head .ad .chip{font-size:12px;padding:3px 6px}
.wgrid-body{position:relative}
.wgrid-body.timeline{margin:0}
.wgrid-cols{position:absolute;top:10px;bottom:0;left:56px;right:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.wgrid-cols>div{position:relative;border-left:1px solid var(--sep)}
.wgrid-cols>div.today{background:color-mix(in srgb,var(--accent) 5%,transparent)}

/* ---------- месяц ---------- */
.mgrid{display:grid;grid-template-columns:repeat(7,1fr);padding:4px 8px 8px}
.mgrid .wdh{font-size:12px;color:var(--hint);text-align:center;padding:6px 0;text-transform:lowercase}
.mcell{aspect-ratio:1/1.05;display:flex;flex-direction:column;align-items:center;gap:3px;padding-top:6px;border-radius:12px;min-width:0}
.mcell .n{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;font-size:16px}
.mcell.out{opacity:.38}
.mcell.today .n{color:var(--accent);font-weight:700}
.mcell.sel .n{background:var(--accent);color:var(--accent-text);font-weight:700}
.mcell.we .n{color:var(--danger)}
.mcell.sel.we .n{color:var(--accent-text)}
.mcell .chips{display:none}
.month-day{border-top:1px solid var(--sep)}

/* ---------- кнопки ---------- */
.ask-wrap{position:sticky;bottom:0;padding:10px 84px 14px 16px;background:linear-gradient(to top,var(--bg) 70%,transparent);z-index:4}
.btn-ask{width:100%;height:44px;border-radius:12px;border:1px solid var(--sep);background:var(--card);color:var(--link);font-weight:600;font-size:15px}
.fab{position:fixed;right:18px;bottom:max(16px,env(safe-area-inset-bottom));width:56px;height:56px;border-radius:50%;background:var(--accent);
  color:var(--accent-text);display:grid;place-items:center;box-shadow:var(--shadow);z-index:20}
.fab:active{transform:scale(.96)}
.btn{height:44px;padding:0 16px;border-radius:12px;background:var(--accent);color:var(--accent-text);font-weight:600}
.btn-ghost{width:100%;height:40px;border-radius:10px;border:1px solid var(--sep);color:var(--link);font-weight:600;font-size:14px;margin-top:10px}
.btn-danger{width:100%;height:44px;border-radius:12px;background:var(--bg2);color:var(--danger);font-weight:600}

/* ---------- нижний лист ---------- */
.sheet-back{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:30;animation:fade .15s ease-out}
.sheet{position:fixed;left:0;right:0;bottom:0;max-height:92vh;background:var(--bg2);border-radius:16px 16px 0 0;z-index:31;
  display:flex;flex-direction:column;animation:up .2s ease-out;box-shadow:var(--shadow)}
.sheet-grip{width:36px;height:5px;border-radius:3px;background:var(--sep);margin:6px auto 0}
.sheet-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:4px 12px 8px}
.sheet-head h2{margin:0;font-size:16px;font-weight:600;text-align:center;white-space:nowrap}
.link-btn{color:var(--link);font-size:15px;padding:8px 4px;justify-self:start}
.link-btn.strong{font-weight:600;justify-self:end}
.link-btn:disabled{opacity:.4}
.sheet-body{overflow:auto;padding:0 12px max(18px,env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
.group{background:var(--card);border-radius:var(--r);margin-bottom:12px;overflow:hidden}
.group-h{font-size:13px;color:var(--hint);text-transform:uppercase;letter-spacing:.03em;margin:14px 4px 6px}
.field{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 14px;border-top:1px solid var(--sep)}
.field:first-child{border-top:0}
.field>label,.field>.lbl{flex:none;min-width:96px;font-size:15px}
.field input,.field select,.field textarea{flex:1;min-width:0;height:44px;border:0;background:transparent;font:inherit;color:var(--text);text-align:right;appearance:none;-webkit-appearance:none}
.field select{text-align:right;text-align-last:right;color:var(--link);cursor:pointer}
.field input[type=text],.field textarea{text-align:left}
.field textarea{height:auto;min-height:64px;padding:12px 0;resize:vertical;line-height:1.4}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none}
.field:focus-within{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.field input::placeholder,.field textarea::placeholder{color:var(--hint)}
.field input[type=date],.field input[type=time]{color:var(--link);color-scheme:light}
:root[data-theme=dark] .field input[type=date],:root[data-theme=dark] .field input[type=time]{color-scheme:dark}
.title-in{font-size:17px!important;font-weight:600}
.switch{position:relative;width:51px;height:31px;flex:none;margin-left:auto}
.switch input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;z-index:1;height:31px}
.switch span{position:absolute;inset:0;border-radius:16px;background:var(--sep);transition:background .15s}
.switch span::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:transform .15s}
.switch input:checked+span{background:#34c759}
.switch input:checked+span::after{transform:translateX(20px)}
.days{display:flex;gap:6px;padding:10px 14px;border-top:1px solid var(--sep);flex-wrap:wrap}
.days button{width:38px;height:34px;border-radius:9px;background:var(--bg2);font-size:13px;font-weight:600;color:var(--hint)}
.days button[aria-pressed=true]{background:var(--accent);color:var(--accent-text)}
.sub{font-size:12px;color:var(--hint);padding:0 14px 10px;margin-top:-4px}
.err{color:var(--danger);font-size:13px;padding:0 4px 10px;min-height:0}
.scope{display:flex;flex-direction:column;gap:8px;padding:6px 0 4px}
.scope button{height:46px;border-radius:12px;background:var(--card);font-weight:600;color:var(--link)}
.linkbox{display:flex;gap:8px;align-items:center;padding:12px 14px;border-top:1px solid var(--sep)}
.linkbox code{flex:1;min-width:0;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--hint);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.steps{margin:0;padding:10px 14px 12px 32px;border-top:1px solid var(--sep);font-size:13px;line-height:1.5;color:var(--hint)}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:40;background:rgba(20,26,32,.92);color:#fff;font-size:14px;
  padding:10px 14px;border-radius:12px;display:flex;gap:14px;align-items:center;max-width:calc(100vw - 32px);animation:fade .15s ease-out}
.toast button{color:#7cc4ff;font-weight:600}

@keyframes up{from{transform:translateY(30px);opacity:.6}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- планшет и десктоп ---------- */
@media (min-width:768px){
  .week-list{display:none}
  .wgrid{display:block}
  .mcell{aspect-ratio:auto;min-height:96px;align-items:stretch;padding:6px;border-radius:0;border-top:1px solid var(--sep);gap:4px}
  .mcell .n{width:28px;height:28px;font-size:14px}
  .mcell .dots{display:none}
  .mcell .chips{display:flex;flex-direction:column;gap:2px;min-width:0}
  .mcell .chips span{text-align:left;font-size:12px;padding:1px 6px;border-radius:5px;background:var(--ev);color:var(--ev-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mcell .chips span.c2{background:var(--ev2);color:var(--ev2-text)}.mcell .chips span.c3{background:var(--ev3);color:var(--ev3-text)}
  .mcell .chips em{font-size:11px;color:var(--hint);font-style:normal;padding-left:6px}
  .sheet{left:50%;right:auto;bottom:auto;top:50%;width:480px;max-height:86vh;transform:translate(-50%,-50%);border-radius:16px;animation:fade .15s ease-out}
  .sheet-grip{display:none}
  .sheet-head{padding-top:12px}
}
@media (min-width:1024px){
  :root{--hour:52px}
  body{background:var(--bg2)}
  .app{flex-direction:row;max-width:1360px;margin:0 auto;padding:24px;gap:20px;align-items:flex-start}
  .side{display:flex;flex-direction:column;gap:16px;width:296px;flex:none;position:sticky;top:24px}
  .side-month,.side-block{background:var(--bg);border-radius:16px;padding:14px}
  .side-h{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--hint);text-transform:uppercase;letter-spacing:.04em}
  .side-month .mm-head{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:15px;margin-bottom:6px}
  .side-month .mm-head span:first-letter{text-transform:uppercase}
  .side-month .mg{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
  .side-month .mg i{font-style:normal;font-size:11px;color:var(--hint);padding:4px 0}
  .side-month .mg button{height:32px;border-radius:50%;font-size:13px;position:relative}
  .side-month .mg button.out{opacity:.35}
  .side-month .mg button.today{color:var(--accent);font-weight:700}
  .side-month .mg button.sel{background:var(--accent);color:var(--accent-text);font-weight:700}
  .side-month .mg button.has::after{content:"";position:absolute;left:50%;bottom:3px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--ev-line)}
  .side-month .mg button.sel.has::after{background:var(--accent-text)}
  .upcoming{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
  .upcoming button{width:100%;display:grid;grid-template-columns:64px 1fr;gap:8px;text-align:left;padding:7px 6px;border-radius:8px;font-size:13px}
  .upcoming button:hover{background:var(--bg2)}
  .upcoming .ud{color:var(--hint);font-variant-numeric:tabular-nums}
  .upcoming .ut{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .main{border-radius:16px;overflow:hidden;min-height:calc(100vh - 48px);box-shadow:0 1px 2px rgba(0,0,0,.04)}
  .top{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:16px;padding:12px 16px}
  .top-row{grid-column:1}
  .seg{grid-column:2;grid-row:1;width:300px;margin:0}
  .strip{grid-column:1/3;grid-row:2;padding-top:8px}
  .main.v-week .strip,.main.v-month .strip{display:none}
  .ask-wrap{padding:12px 16px 16px;background:var(--bg);border-top:1px solid var(--sep);position:static}
  .btn-ask{width:auto;padding:0 18px}
  .fab{right:max(32px,calc((100vw - 1360px)/2 + 40px));bottom:32px}
  .timeline{max-height:calc(100vh - 262px);min-height:420px;overflow-y:auto;padding-bottom:16px;margin-right:0}
  .wgrid-body.timeline{max-height:calc(100vh - 290px)}
  .main.v-day .timeline{max-height:calc(100vh - 340px)}
  .day-wide{display:grid;grid-template-columns:minmax(0,1fr) 320px}
  .day-wide .timeline{padding-right:12px}
  .day-wide .agenda{border-left:1px solid var(--sep);padding:12px 16px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}