/* План и Факт. Liquid Glass: три колонки на широком экране, одна колонка с нижней панелью вкладок на узком. */
:root{
  --base:#e9f0fa; --blob-a:#9cc6ff; --blob-b:#c7b8ff; --blob-c:#ffffff;
  --ink:#16203a; --muted:#5d6a88; --faint:#7d88a3;
  --accent:#2f6bff; --accent-2:#4fc3ff; --accent-soft:rgba(47,107,255,.13); --accent-ink:#fff;
  --good:#1f9d5c; --good-soft:rgba(37,167,99,.14); --warn:#b86e0c; --bad:#d4504a; --lav:#8b7cf0;
  --g1:rgba(255,255,255,.42); --g2:rgba(255,255,255,.58); --g3:rgba(255,255,255,.3);
  --edge:rgba(255,255,255,.72); --hi:rgba(255,255,255,.88); --line:rgba(70,90,140,.1);
  --sh-1:0 24px 60px -18px rgba(60,85,150,.28); --sh-2:0 8px 22px -10px rgba(60,85,150,.22);
  --tg1:#2f6bff; --tg2:#52c8ff;
  --p-buh:#8b6cf5; --p-par:#3b82e8; --p-mar:#f08a3e; --p-vee:#1fae92; --p-rec:#d6528a; --p-akv:#3fb0d4; --p-rem:#8f98b0; --p-kar:#b4803f; --p-none:#aab2c5;
  --r-xl:32px; --r-l:22px; --r-m:16px; --r-s:12px; --t:.18s;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --base:#0c1222; --blob-a:#1d4fae; --blob-b:#4a2f9c; --blob-c:#16365f;
  --ink:#eaf0ff; --muted:#9eabc9; --faint:#7e8aa8;
  --accent:#7ea2ff; --accent-2:#6ad4ff; --accent-soft:rgba(126,162,255,.18); --accent-ink:#0b1226;
  --good:#5bd691; --good-soft:rgba(91,214,145,.16); --warn:#efb24f; --bad:#f08780; --lav:#a99cff;
  --g1:rgba(255,255,255,.07); --g2:rgba(255,255,255,.1); --g3:rgba(255,255,255,.05);
  --edge:rgba(255,255,255,.14); --hi:rgba(255,255,255,.2); --line:rgba(255,255,255,.08);
  --sh-1:0 24px 60px -18px rgba(0,0,0,.6); --sh-2:0 8px 22px -10px rgba(0,0,0,.5);
  --tg1:#6f95ff; --tg2:#6ad4ff;
  --p-buh:#a996ff; --p-par:#78aaf5; --p-mar:#f5a566; --p-vee:#4fd1b6; --p-rec:#ec8cb2; --p-akv:#74cbe6; --p-rem:#a9b0c4; --p-kar:#d9a766; --p-none:#6f7a94;color-scheme:dark}}
:root[data-theme="dark"]{
  --base:#0c1222; --blob-a:#1d4fae; --blob-b:#4a2f9c; --blob-c:#16365f;
  --ink:#eaf0ff; --muted:#9eabc9; --faint:#7e8aa8;
  --accent:#7ea2ff; --accent-2:#6ad4ff; --accent-soft:rgba(126,162,255,.18); --accent-ink:#0b1226;
  --good:#5bd691; --good-soft:rgba(91,214,145,.16); --warn:#efb24f; --bad:#f08780; --lav:#a99cff;
  --g1:rgba(255,255,255,.07); --g2:rgba(255,255,255,.1); --g3:rgba(255,255,255,.05);
  --edge:rgba(255,255,255,.14); --hi:rgba(255,255,255,.2); --line:rgba(255,255,255,.08);
  --sh-1:0 24px 60px -18px rgba(0,0,0,.6); --sh-2:0 8px 22px -10px rgba(0,0,0,.5);
  --tg1:#6f95ff; --tg2:#6ad4ff;
  --p-buh:#a996ff; --p-par:#78aaf5; --p-mar:#f5a566; --p-vee:#4fd1b6; --p-rec:#ec8cb2; --p-akv:#74cbe6; --p-rem:#a9b0c4; --p-kar:#d9a766; --p-none:#6f7a94;color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:14px;line-height:1.42;color:var(--ink);background:var(--base);min-height:100vh;min-height:100dvh;position:relative;overflow-x:hidden;
  padding-top:max(18px,env(safe-area-inset-top,0px));padding-bottom:calc(40px + env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:-10%;z-index:0;pointer-events:none;
  background:radial-gradient(38% 42% at 12% 14%,var(--blob-a),transparent 70%),radial-gradient(34% 40% at 88% 12%,var(--blob-b),transparent 70%),
    radial-gradient(40% 44% at 70% 92%,var(--blob-a),transparent 72%),radial-gradient(30% 34% at 22% 88%,var(--blob-b),transparent 72%);
  filter:blur(46px);opacity:.75}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,var(--blob-c) 48%,transparent 62%);opacity:.28}
button,input,textarea,select{font:inherit;color:inherit}
body,.glass,.card,.chip,.btn,.inp,.seg{transition:background-color .35s ease,border-color .35s ease,color .25s ease,box-shadow .25s ease}
button{cursor:pointer;border:0;background:none;padding:0;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.boot{position:relative;z-index:1;color:var(--muted);text-align:center;margin-top:30vh}
.shell{position:relative;z-index:1;max-width:1360px;margin:0 auto;display:flex;flex-direction:column;gap:16px}

.glass{background:var(--g1);border:1px solid var(--edge);box-shadow:var(--sh-1),inset 0 1px 0 var(--hi);backdrop-filter:blur(28px) saturate(1.7);-webkit-backdrop-filter:blur(28px) saturate(1.7)}
.card{background:var(--g2);border:1px solid var(--edge);border-radius:var(--r-l);box-shadow:var(--sh-2),inset 0 1px 0 var(--hi);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);padding:16px 18px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:color-mix(in srgb,var(--base) 80%,white)}.card{background:color-mix(in srgb,var(--base) 90%,white)}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.col{animation:rise .26s cubic-bezier(.2,.7,.2,1) both}
.inbox{animation:rise .26s cubic-bezier(.2,.7,.2,1) both}
/* новые элементы появляются, существующие при обновлении не мигают */
.enter{animation:rise .3s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0ms)}
.leaving{transition:opacity .2s ease,transform .22s ease,max-height .26s ease .04s,margin .26s ease .04s,padding .26s ease .04s;opacity:0;transform:translateX(14px) scale(.98);max-height:0!important;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;overflow:hidden;pointer-events:none}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
.chk.popit{animation:pop .34s cubic-bezier(.3,1.6,.5,1)}
@keyframes shimmer{to{background-position:-200% 0}}
.skel-wrap{position:relative;z-index:1;max-width:1360px;margin:30px auto 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.skel{height:min(70vh,560px);border-radius:var(--r-xl);background:linear-gradient(100deg,var(--g3) 30%,var(--g2) 50%,var(--g3) 70%);background-size:200% 100%;animation:shimmer 1.4s linear infinite;border:1px solid var(--edge)}
@media (max-width:1079px){.skel:nth-child(n+2){display:none}}

/* верхняя панель */
.bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:0 2px}
.brand{font-weight:650;font-size:15px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;margin-right:auto}
.brand i{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--tg1),var(--tg2));box-shadow:0 0 12px var(--tg2)}
.seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:3px;border-radius:999px;background:var(--g3);border:1px solid var(--edge)}
.seg button{padding:7px 15px;border-radius:999px;font-weight:600;font-size:13px;color:var(--muted);transition:background var(--t),color var(--t),box-shadow var(--t);min-height:32px}
.seg button:hover{color:var(--ink)}
.seg button[aria-selected="true"]{background:var(--g2);color:var(--ink);box-shadow:var(--sh-2),inset 0 1px 0 var(--hi)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 16px;min-height:40px;border-radius:999px;font-weight:600;background:var(--g2);border:1px solid var(--edge);box-shadow:var(--sh-2),inset 0 1px 0 var(--hi);transition:transform var(--t),box-shadow var(--t)}
.btn:hover{box-shadow:0 0 0 4px var(--accent-soft),var(--sh-2)}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(135deg,var(--tg1),var(--tg2));color:var(--accent-ink);border-color:transparent}
.btn.danger{color:var(--bad)}
.btn[disabled]{opacity:.5;pointer-events:none}
.more{position:relative}
.more summary{list-style:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:var(--g2);border:1px solid var(--edge);box-shadow:var(--sh-2),inset 0 1px 0 var(--hi)}
.more summary::-webkit-details-marker{display:none}
.more .gear{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.more[open] .pop{animation:dlgIn .2s cubic-bezier(.2,.8,.2,1)}
.more .pop{position:absolute;right:0;top:48px;z-index:30;display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--r-l);width:max-content;max-width:calc(100vw - 32px);background:var(--g2)}
.fab{display:none}
.net{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--faint)}
.net i{width:8px;height:8px;border-radius:50%;background:var(--good)}
.net.off{color:var(--warn)}.net.off i{background:var(--warn)}
.banner:not([hidden]){animation:rise .25s ease-out}
.banner{padding:10px 16px;border-radius:var(--r-m);background:color-mix(in srgb,var(--warn) 16%,transparent);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);font-size:13px}

/* колонки */
.cols{display:grid;grid-template-columns:minmax(300px,1fr) minmax(360px,1.2fr) minmax(300px,1fr);gap:20px;align-items:start}
.col{border-radius:var(--r-xl);padding:26px 22px;display:flex;flex-direction:column;gap:18px;min-width:0}
.col.center{padding-block:30px}
.sub{color:var(--muted);font-size:12.5px}
h1{font-size:28px;line-height:1.12;font-weight:650;letter-spacing:-.025em;margin:0;text-wrap:balance}
h2{font-size:17px;font-weight:600;letter-spacing:-.01em;margin:0}
.lbl{font-size:13px;font-weight:600;color:var(--muted);margin:0 0 10px}
.rowf{display:flex;align-items:center;gap:10px}
.spacer{flex:1}
.num{font-variant-numeric:tabular-nums}
.dot{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent)}
.empty{color:var(--muted);text-align:center;padding:22px 8px}

.prog{display:flex;align-items:center;gap:20px}
.ring{position:relative;width:116px;height:116px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.ring .c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring b{font-size:24px;font-weight:650;letter-spacing:-.02em}
.arc{transition:stroke-dasharray .6s cubic-bezier(.3,.7,.2,1)}
.legend{flex:1;display:flex;flex-direction:column;gap:9px;min-width:0}
.legend div{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted)}
.legend b{margin-left:auto;padding-left:8px;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.legend div{min-width:0}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 10px;min-height:34px;border-radius:999px;background:var(--g3);border:1px solid var(--edge);font-size:12.5px;font-weight:550;transition:opacity var(--t),background var(--t),transform var(--t)}
.chip:hover{background:var(--g2)}.chip:active{transform:scale(.97)}.chip[aria-pressed="false"]{opacity:.42}
.head{display:flex;align-items:center;gap:8px}
.round{width:40px;height:40px;border-radius:50%;background:var(--g2);border:1px solid var(--edge);display:grid;place-items:center;font-size:19px;line-height:1;box-shadow:var(--sh-2),inset 0 1px 0 var(--hi);transition:transform var(--t),box-shadow var(--t)}
.round:hover{box-shadow:0 0 0 4px var(--accent-soft),var(--sh-2)}.round:active{transform:scale(.94)}
.daynav{display:flex;align-items:center;gap:6px}
.daynav .round{width:34px;height:34px;font-size:16px}

.list{display:flex;flex-direction:column;gap:3px;padding:8px}
.task{display:grid;grid-template-columns:26px 1fr auto;gap:1px 12px;align-items:center;padding:11px 12px;border-radius:var(--r-m);transition:background var(--t);cursor:pointer}
.task:hover{background:var(--g3)}
.task.sel{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
.task[data-s="doing"]{background:var(--accent-soft)}
.task[data-s="done"]{background:linear-gradient(90deg,var(--good-soft),transparent 70%)}
.chk{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--faint);display:grid;place-items:center;grid-row:1/3;transition:background var(--t),border-color var(--t),box-shadow var(--t),transform var(--t)}
.chk:hover{box-shadow:0 0 0 4px var(--accent-soft)}.chk:active{transform:scale(.9)}
.chk[data-s="done"]{background:var(--good);border-color:var(--good)}
.chk[data-s="doing"]{border-color:var(--accent);background:radial-gradient(circle,var(--accent) 0 3px,transparent 4px)}
.chk svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.chk:not([data-s="done"]) svg{display:none}
.t-name{font-weight:560;font-size:14px;min-width:0;overflow-wrap:anywhere}
.task[data-s="done"] .t-name{color:var(--muted);font-weight:500}
.t-name small{margin-left:8px;color:var(--faint);font-weight:500;font-size:11.5px}
.t-meta{grid-column:2;display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums}
.t-meta .over{color:var(--warn);font-weight:600}
.t-act{grid-row:1/3;grid-column:3;display:flex;gap:6px;align-items:center}
.mini-b{width:34px;height:34px;border-radius:50%;background:var(--g2);border:1px solid var(--edge);color:var(--accent);display:grid;place-items:center;transition:transform var(--t),background var(--t),box-shadow var(--t)}
.mini-b:hover{background:var(--accent-soft);box-shadow:0 0 0 4px var(--accent-soft)}.mini-b:active{transform:scale(.92)}
.mini-b svg{width:13px;height:13px;fill:currentColor}
.mini-b.edit{color:var(--muted)}
.mini-b.edit svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;width:15px;height:15px}
.link{color:var(--accent);font-weight:600;text-align:left}

/* центр: таймер */
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.badge{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:var(--g3);border:1px solid var(--edge);font-size:12.5px;font-weight:550}
.badge{transition:background-color .25s,color .25s}
.badge.st{color:var(--accent);background:var(--accent-soft);border-color:transparent}
.badge.st[data-k="pause"]{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)}
.badge.st[data-k="done"]{color:var(--good);background:var(--good-soft)}
.badge.st[data-k="idle"]{color:var(--muted);background:var(--g3)}
.timer{position:relative;width:min(300px,100%);aspect-ratio:1;margin:2px auto}
.timer svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.timer .glow{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--tg2) 65%,transparent))}
.timer .arc{transition:stroke-dasharray 1s linear}
.timer .c{position:absolute;inset:11%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--g2);border:1px solid var(--edge);box-shadow:inset 0 1px 0 var(--hi),var(--sh-2)}
.timer b{font-size:clamp(40px,6vw,54px);font-weight:600;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1}
.timer.pulse{animation:pulse .26s ease-out}
@keyframes pulse{50%{transform:scale(1.025)}}
.ctrl{display:flex;justify-content:center;align-items:center;gap:16px}
.cb{width:58px;height:58px;border-radius:50%;background:var(--g2);border:1px solid var(--edge);display:grid;place-items:center;box-shadow:var(--sh-2),inset 0 1px 0 var(--hi);transition:transform var(--t),box-shadow var(--t)}
.cb:hover{box-shadow:0 0 0 5px var(--accent-soft),0 0 22px color-mix(in srgb,var(--tg2) 40%,transparent),var(--sh-2)}
.cb:active{transform:scale(.93)}.cb.big{width:72px;height:72px;color:var(--accent)}
.cb svg{width:22px;height:22px;fill:currentColor}.cb.txt{font-weight:650;font-size:13px;color:var(--muted)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mini{display:flex;flex-direction:column;gap:2px;padding:12px 16px}
.mini span{color:var(--muted);font-size:12px}
.mini b{font-size:19px;font-weight:620;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.note{width:100%;border:0;background:none;resize:none;outline:0;min-height:56px}
.note::placeholder{color:var(--faint)}

/* статистика */
.tabs{display:grid;grid-template-columns:repeat(3,1fr)}
.kpi span{color:var(--muted);font-size:12px}
.kpi b{display:block;font-size:22px;font-weight:620;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.donut{display:flex;align-items:center;gap:16px}
.bars{display:flex;align-items:flex-end;gap:10px;height:118px;padding-top:6px}
.bars .col2{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;height:100%}
.bars .pair{display:flex;align-items:flex-end;gap:3px;flex:1;width:100%;justify-content:center}
.bars i{display:block;width:9px;border-radius:6px 6px 3px 3px;transition:height .45s cubic-bezier(.3,.7,.2,1)}
.bars .p{background:color-mix(in srgb,var(--lav) 28%,transparent)}
.bars .f{background:linear-gradient(180deg,var(--tg2),var(--tg1))}
.bars .col2.today .f{background:linear-gradient(180deg,#7be0ab,var(--good))}
.bars span{font-size:11px;color:var(--faint)}
.key{display:flex;gap:14px;font-size:11px;color:var(--faint);margin-top:6px}
.key i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.acc{display:flex;flex-direction:column;gap:12px}
.acc div{display:grid;grid-template-columns:1fr auto;gap:5px 10px;font-size:13px;color:var(--muted)}
.acc b{font-weight:600}
.acc .tr{grid-column:1/3;height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.acc .tr i{display:block;height:100%;border-radius:3px;transition:width .45s}

/* входящие */
.inbox{border-radius:var(--r-xl);padding:26px 22px;display:flex;flex-direction:column;gap:16px;max-width:760px;width:100%;margin:0 auto}
.notes{display:flex;flex-direction:column;gap:10px}
.note-c{display:flex;flex-direction:column;gap:8px}
.note-c p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.note-c .meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;color:var(--faint);font-size:12px}
.tag{padding:2px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:600}
.note-c .acts{display:flex;gap:8px;flex-wrap:wrap}
.btn.sm{min-height:34px;padding:6px 13px;font-size:13px}

/* поля и диалоги */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:12px;font-weight:600;color:var(--muted)}
.inp{width:100%;padding:11px 14px;min-height:44px;border-radius:var(--r-m);border:1px solid var(--edge);background:var(--g2);outline:0;font-size:16px}
.inp:focus{box-shadow:0 0 0 3px var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
textarea.inp{resize:vertical;min-height:84px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quickrow{display:flex;gap:8px}
.quickrow .inp{flex:1}
dialog{border:1px solid var(--edge);border-radius:var(--r-xl);padding:0;color:var(--ink);background:color-mix(in srgb,var(--base) 70%,transparent);backdrop-filter:blur(30px) saturate(1.7);-webkit-backdrop-filter:blur(30px) saturate(1.7);box-shadow:var(--sh-1);width:min(520px,calc(100vw - 24px));max-height:calc(100dvh - 24px)}
dialog::backdrop{background:rgba(10,20,50,.35);backdrop-filter:blur(3px)}
dialog[open]{animation:dlgIn .24s cubic-bezier(.2,.8,.2,1)}
dialog[open]::backdrop{animation:fade .24s ease-out}
dialog.closing{animation:dlgOut .17s ease-in forwards}
dialog.closing::backdrop{animation:fadeOut .17s ease-in forwards}
@keyframes dlgIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes dlgOut{to{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes fade{from{opacity:0}}
@keyframes fadeOut{to{opacity:0}}
.dlg{display:flex;flex-direction:column;gap:14px;padding:22px}
.dlg .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.hintline{font-size:12px;color:var(--warn)}
.toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(86px + env(safe-area-inset-bottom,0px));z-index:50;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(420px,calc(100vw - 24px))}
.toast{padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--base);font-weight:600;font-size:13px;box-shadow:var(--sh-1);animation:rise .2s ease-out}
.toast.err{background:var(--bad);color:#fff}
.toast.out{animation:toastOut .22s ease-in forwards}
@keyframes toastOut{to{opacity:0;transform:translateY(8px) scale(.96)}}

/* вход */
.login{max-width:360px;margin:14vh auto 0;display:flex;flex-direction:column;gap:14px;padding:30px 26px;border-radius:var(--r-xl);position:relative;z-index:1}

.shell[data-view="inbox"] .cols{display:none}
.shell:not([data-view="inbox"]) .inbox-wrap{display:none}

/* нижняя панель вкладок на узком экране */
.tabbar{display:none}
@media (max-width:1079px){
  .cols{grid-template-columns:minmax(0,640px);justify-content:center}
  .shell[data-view="day"] .col:not([data-v="day"]),.shell[data-view="now"] .col:not([data-v="now"]),.shell[data-view="stat"] .col:not([data-v="stat"]){display:none}
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;position:fixed;left:50%;transform:translateX(-50%);bottom:max(10px,env(safe-area-inset-bottom,0px));width:min(440px,calc(100vw - 24px));padding:5px;border-radius:999px;z-index:20;
    background:var(--g1);border:1px solid var(--edge);box-shadow:var(--sh-1),inset 0 1px 0 var(--hi);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6)}
  .tabbar button{padding:11px 0;min-height:44px;border-radius:999px;font-weight:600;font-size:13px;color:var(--muted);transition:background var(--t),color var(--t);position:relative}
  .tabbar button[aria-current="true"]{background:var(--g2);color:var(--accent);box-shadow:var(--sh-2),inset 0 1px 0 var(--hi)}
  .tabbar .badgec{position:absolute;top:4px;right:calc(50% - 26px);background:var(--accent);color:var(--accent-ink);border-radius:999px;font-size:10px;padding:0 5px;min-width:16px;line-height:16px}
  .bar .seg.modes,.bar .btn.add{display:none}
  .bar .brand{margin-right:0}.bar .net{margin-left:auto}
  .bar form{order:5;flex:1 1 100%!important;min-width:0!important}
  .fab{display:grid;place-items:center;position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(76px + env(safe-area-inset-bottom,0px));width:56px;height:56px;border-radius:50%;z-index:21;font-size:28px;line-height:1;color:var(--accent-ink);
    background:linear-gradient(135deg,var(--tg1),var(--tg2));box-shadow:0 10px 26px -8px var(--tg1),inset 0 1px 0 rgba(255,255,255,.5);transition:transform var(--t)}
  .fab:active{transform:scale(.93)}
  .toasts{bottom:calc(150px + env(safe-area-inset-bottom,0px))}
  body{padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:520px){.col,.inbox{padding:20px 14px;border-radius:28px}.prog{gap:14px}.grid2{grid-template-columns:1fr 1fr}.bar{gap:8px}h1{font-size:25px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---- шапка дня: дата и часы ---- */
.hero{display:flex;flex-direction:column;gap:10px;padding:18px 20px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,var(--g2)),var(--g2))}
.hero .when{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;padding:4px 12px;border-radius:999px;background:linear-gradient(135deg,var(--tg1),var(--tg2));color:var(--accent-ink);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.hero.other .pill{background:color-mix(in srgb,var(--lav) 24%,transparent);color:var(--lav);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lav) 45%,transparent)}
.dateline{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.dateline b{font-size:clamp(22px,2.4vw,28px);font-weight:650;letter-spacing:-.02em;text-transform:capitalize;text-wrap:balance}
.clockrow{display:flex;align-items:baseline;gap:12px}
.nowlbl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.clock{font-size:clamp(40px,4.4vw,56px);font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.clock small{font-size:.4em;color:var(--faint);letter-spacing:0;margin-left:5px;font-weight:500}
.clock .colon{animation:blink 2s ease-in-out infinite;margin:0 1px}
@keyframes blink{50%{opacity:.3}}
.hero.other .clock{font-size:30px;color:var(--muted)}
.dayseg{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dayseg .seg{flex:1;min-width:0}
.dayseg .seg button{padding-inline:10px;min-width:0}
.dayseg .round{width:36px;height:36px;font-size:17px;flex:none}
.cal-ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.datepick{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.dayseg{position:relative}

/* ---- шкала занятости дня ---- */
.slots{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:var(--r-m);background:var(--g3);border:1px solid var(--line)}
.slot-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.slot-legend{display:flex;gap:12px;font-size:11.5px;color:var(--muted)}
.slot-legend span{display:inline-flex;align-items:center;gap:5px}
.lg{width:10px;height:10px;border-radius:3px;display:inline-block}
.lg.free{background:color-mix(in srgb,var(--good) 55%,transparent)}
.lg.busy{background:color-mix(in srgb,var(--bad) 70%,transparent)}
.lg.mine{background:var(--accent)}
.sbar{position:relative;height:36px;border-radius:12px;overflow:hidden;cursor:crosshair;background:linear-gradient(90deg,color-mix(in srgb,var(--good) 30%,transparent),color-mix(in srgb,var(--good) 20%,transparent));border:1px solid color-mix(in srgb,var(--good) 45%,transparent)}
.sb-busy{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--bad) 66%,transparent);box-shadow:inset 1px 0 0 color-mix(in srgb,var(--bad) 90%,transparent),inset -1px 0 0 color-mix(in srgb,var(--bad) 90%,transparent)}
.sb-done{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--bad) 36%,transparent) 0 6px,transparent 6px 12px);box-shadow:none}
.sb-new{position:absolute;top:4px;bottom:4px;border-radius:8px;background:color-mix(in srgb,var(--accent) 50%,transparent);outline:2px solid var(--accent);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 55%,transparent);transition:left .18s ease,width .18s ease;pointer-events:none}
.sb-new.bad{outline-color:var(--bad);background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--bad) 55%,transparent) 0 5px,color-mix(in srgb,var(--accent) 35%,transparent) 5px 10px);box-shadow:0 0 14px color-mix(in srgb,var(--bad) 55%,transparent)}
.sb-now{position:absolute;top:0;bottom:0;width:2px;background:var(--ink);opacity:.75;pointer-events:none}
.sticks{position:relative;height:14px}
.sticks span{position:absolute;transform:translateX(-50%);font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.slot-status{font-size:13px;font-weight:600;display:flex;gap:10px;flex-wrap:wrap;align-items:center;min-height:20px}
.slot-status.idle{color:var(--muted);font-weight:500}
.slot-status.free{color:var(--good)}
.slot-status.busy{color:var(--bad)}
.gaps{display:flex;gap:6px;flex-wrap:wrap}
.gap-chip{padding:6px 12px;border-radius:999px;min-height:32px;border:1px solid color-mix(in srgb,var(--good) 55%,transparent);background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good);font-size:12.5px;font-weight:650;font-variant-numeric:tabular-nums;transition:transform var(--t),background var(--t)}
.gap-chip:hover{background:color-mix(in srgb,var(--good) 26%,transparent)}
.gap-chip:active{transform:scale(.96)}

/* ---- лента дня ---- */
.tl{position:relative;border-radius:var(--r-xl);padding:18px 22px 20px;display:flex;flex-direction:column;gap:12px;animation:rise .26s cubic-bezier(.2,.7,.2,1) both}
.tl-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lg.done{background:color-mix(in srgb,var(--muted) 45%,transparent)}
.tl-scroll{overflow-x:auto;overflow-y:hidden;border-radius:var(--r-m);scrollbar-width:thin;padding-bottom:2px}
.tl-track{position:relative;cursor:crosshair;border-radius:var(--r-m);background:linear-gradient(180deg,color-mix(in srgb,var(--good) 13%,transparent),color-mix(in srgb,var(--good) 6%,transparent));border:1px solid color-mix(in srgb,var(--good) 30%,transparent);overflow:hidden}
.tl-line{position:absolute;top:26px;bottom:0;width:1px;background:var(--line);pointer-events:none}
.tl-h{position:absolute;top:7px;transform:translateX(-50%);font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums;pointer-events:none}
.tl-hint{position:absolute;inset:34px 0 0;display:grid;place-items:center;color:var(--muted);font-size:13px;pointer-events:none}
.tl-b{position:absolute;height:48px;min-width:8px;border-radius:12px;padding:6px 9px;text-align:left;overflow:hidden;display:flex;flex-direction:column;gap:1px;cursor:pointer;color:var(--ink);
  background:color-mix(in srgb,var(--c) 24%,var(--g2));border:1px solid color-mix(in srgb,var(--c) 48%,transparent);box-shadow:inset 3px 0 0 var(--c),var(--sh-2);
  transition:transform .15s ease,box-shadow .2s ease,opacity .25s ease,outline-color .2s}
.tl-b:hover{transform:translateY(-2px);box-shadow:inset 3px 0 0 var(--c),0 10px 22px -10px color-mix(in srgb,var(--c) 70%,transparent)}
.tl-b:active{transform:scale(.98)}
.tl-fill{position:absolute;left:0;top:0;bottom:0;background:color-mix(in srgb,var(--c) 40%,transparent);transition:width 1s linear;pointer-events:none}
.tl-t{position:relative;font-size:12.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-m{position:relative;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-b[data-s="done"]{opacity:.6}
.tl-b[data-s="doing"]{outline:2px solid var(--accent);outline-offset:0;box-shadow:inset 3px 0 0 var(--c),0 0 0 4px var(--accent-soft),0 0 20px color-mix(in srgb,var(--accent) 45%,transparent)}
.tl-b[data-s="paused"]{border-style:dashed}
.tl-b.over{border-color:var(--warn)}
.tl-b.sel{outline:2px solid var(--ink);outline-offset:2px}
.tl-now{position:absolute;top:0;bottom:0;width:2px;background:var(--bad);z-index:3;pointer-events:none;transform:translateX(-1px);box-shadow:0 0 10px color-mix(in srgb,var(--bad) 60%,transparent)}
.tl-now span{position:absolute;top:2px;left:50%;transform:translateX(-50%);background:var(--bad);color:#fff;font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.tl-ghost{position:absolute;top:0;bottom:0;width:1px;background:var(--accent);opacity:.7;z-index:2;pointer-events:none}
.tl-ghost span{position:absolute;bottom:3px;left:6px;font-size:11px;font-weight:650;color:var(--accent);background:var(--g2);padding:1px 6px;border-radius:6px;font-variant-numeric:tabular-nums}
.tl-untimed{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip.on{box-shadow:0 0 0 2px var(--accent)}
.tl-detail{display:flex;flex-direction:column;gap:12px;padding:16px 18px;border-radius:var(--r-l);background:var(--g2);border:1px solid var(--edge);box-shadow:var(--sh-2),inset 0 1px 0 var(--hi);animation:rise .24s cubic-bezier(.2,.7,.2,1) both}
.tl-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.tl-f span{display:block;font-size:11.5px;color:var(--muted)}
.tl-f b{font-weight:620;font-variant-numeric:tabular-nums}
.tl-desc{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--muted)}
.tl-acts{display:flex;gap:8px;flex-wrap:wrap}
.shell[data-view="inbox"] .tl{display:none}
@media (max-width:1079px){.shell[data-view="now"] .tl,.shell[data-view="stat"] .tl{display:none}}
@media (max-width:520px){.tl{padding:16px 14px;border-radius:28px}}

.runbanner{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;border-radius:var(--r-m);background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);text-align:left;font-size:13px;transition:background var(--t),transform var(--t)}
.runbanner:hover{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.runbanner:active{transform:scale(.99)}
.runbanner .rb-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.runbanner .rb-t b{color:var(--ink)}
.runbanner .num{font-variant-numeric:tabular-nums;color:var(--accent)}

.tl-h.first{transform:translateX(4px)}
.tl-h.last{transform:translateX(calc(-100% - 4px))}
.dateline b{text-transform:none;display:inline-block}
.dateline b::first-letter{text-transform:uppercase}
.dayseg .seg button{white-space:nowrap}
@media (max-width:520px){
  .dayseg .seg{order:3;flex:1 1 100%}
  .dayseg{justify-content:flex-start}
  .dayseg .round:nth-of-type(3){margin-right:auto}
}
.dayseg .seg button[aria-selected="true"]{background:linear-gradient(135deg,var(--tg1),var(--tg2));color:var(--accent-ink);box-shadow:0 4px 14px -6px var(--tg1)}

.tl-item{position:absolute;display:flex;align-items:flex-start;gap:6px;height:48px;z-index:1}
.tl-b.tiny{position:relative;flex:none;padding:0;border-radius:8px;box-shadow:inset 3px 0 0 var(--c)}
.tl-lbl{display:flex;flex-direction:column;gap:1px;max-width:150px;min-width:0;padding:4px 2px;text-align:left;cursor:pointer;color:var(--ink);transition:transform .15s}
.tl-lbl:hover{transform:translateX(2px)}
.tl-lbl b{font-size:12.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-lbl span{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.tl-lbl.sel b{text-decoration:underline;text-underline-offset:3px}
.tl-tip{position:absolute;z-index:8;display:flex;flex-direction:column;gap:2px;max-width:280px;padding:8px 12px;border-radius:12px;pointer-events:none;
  background:var(--ink);color:var(--base);font-size:12px;box-shadow:var(--sh-1);animation:rise .14s ease-out both}
.tl-tip b{font-size:13px;font-weight:650;overflow-wrap:anywhere}
.tl-tip span{opacity:.82;font-variant-numeric:tabular-nums}

.tl-b.compact{padding:4px 7px}
.tl-t.wrap{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.12;font-size:12px;overflow:hidden;overflow-wrap:anywhere}
.tl-b.compact .tl-m{font-size:10.5px}

/* переключатель дня всегда отдельной строкой: подписи не наезжают друг на друга при любой ширине колонки */
.dayseg .seg{order:3;flex:1 1 100%}
.dayseg .seg button{flex:1;padding-inline:6px}

/* ---- верхняя шапка: дата, подпись дня, часы, переход между днями ---- */
.hero2{border-radius:var(--r-xl);padding:18px 26px;animation:rise .26s cubic-bezier(.2,.7,.2,1) both;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 9%,var(--g1)),var(--g1))}
.hero-in{display:grid;grid-template-columns:minmax(0,1.6fr) auto minmax(330px,1fr);grid-template-areas:"pill clock nav" "date clock nav";gap:6px 36px;align-items:center}
.hero-pill{grid-area:pill;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hero-dateline{grid-area:date}
.hero-clock{grid-area:clock;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.hero-in .dayseg{grid-area:nav;flex-wrap:nowrap;justify-content:flex-end}
.hero-in .dayseg .seg{order:0;flex:1 1 auto}
.hero-in .clock{font-size:clamp(44px,4.6vw,60px)}
.hero-in.other .pill{background:color-mix(in srgb,var(--lav) 24%,transparent);color:var(--lav);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lav) 45%,transparent)}
.hero-in.other .clock{font-size:34px;color:var(--muted)}
.hero-in .dateline b{font-size:clamp(24px,2.8vw,34px)}
.shell[data-view="inbox"] .hero2{display:none}
@media (max-width:1079px){
  .hero-in{grid-template-columns:1fr auto;grid-template-areas:"pill clock" "date date" "nav nav";gap:8px 14px}
  .hero-in .clock{font-size:38px}
  .hero-in.other .clock{font-size:26px}
  .hero-clock{align-items:flex-end}
  .hero-in .dayseg{justify-content:flex-start}
}
@media (max-width:520px){
  .hero2{padding:14px 16px;border-radius:28px}
  .hero-in:not(.other) .nowlbl{display:none}
  .hero-in .dateline b{font-size:23px}
  .hero-in .dayseg{gap:6px}
  .hero-in .dayseg .round{width:34px;height:34px}
  .hero-in .dayseg .seg button{padding-inline:3px;font-size:12.5px}
}

/* ---- вертикальная лента на телефоне ---- */
.tlv-scroll{max-height:min(52vh,420px);overflow-y:auto;overflow-x:hidden;border-radius:var(--r-m);overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.tlv-track{position:relative;border-radius:var(--r-m);background:linear-gradient(180deg,color-mix(in srgb,var(--good) 13%,transparent),color-mix(in srgb,var(--good) 6%,transparent));border:1px solid color-mix(in srgb,var(--good) 30%,transparent);cursor:pointer}
.tlv-line{position:absolute;left:52px;right:0;height:1px;background:var(--line);pointer-events:none}
.tlv-h{position:absolute;left:8px;transform:translateY(-50%);font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums;pointer-events:none}
.tl-b.v{height:auto;left:calc(56px + (100% - 62px) * var(--col) / var(--cols));width:calc((100% - 62px) / var(--cols) - 4px);min-width:0;flex-direction:column;justify-content:center;padding:4px 9px}
.tl-b.v:not(.tall){flex-direction:row;align-items:center;justify-content:space-between;gap:8px}
.tl-b.v .tl-fill{left:0;right:0;top:0;bottom:auto;width:auto}
.tl-b.v .tl-t{flex:1;min-width:0}
.tl-b.v.tall .tl-t{font-size:13.5px}
.tlv-now{top:0;bottom:auto;left:50px;right:0;width:auto;height:2px;transform:none}
.tlv-now span{left:-48px;top:-9px;transform:none}

/* ---- микрофон ---- */
.btn.mic{width:44px;min-width:44px;padding:0;position:relative}
.mic-ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn.mic.rec{background:var(--bad);color:#fff;border-color:transparent;width:auto;padding:0 14px;gap:8px;animation:recpulse 1.3s ease-in-out infinite}
.btn.mic.rec::after{content:attr(data-t);font-weight:700;font-variant-numeric:tabular-nums;font-size:13px}
.btn.mic.busy{opacity:.6;pointer-events:none}
@keyframes recpulse{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--bad) 22%,transparent)}}
.voice-hint{padding:10px 14px;border-radius:var(--r-m);background:var(--accent-soft);color:var(--ink);font-size:13px;overflow-wrap:anywhere}

/* ---- микрофон у полей ---- */
.mic-wrap{position:relative;display:flex;flex-direction:column}
.mic-wrap>.inp,.mic-wrap>textarea{padding-right:48px}
.mic-mini{position:absolute;right:8px;bottom:8px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--accent);background:var(--g2);border:1px solid var(--edge);box-shadow:var(--sh-2);transition:transform var(--t),background var(--t)}
.mic-mini:hover{background:var(--accent-soft)}.mic-mini:active{transform:scale(.92)}
.mic-mini.rec{background:var(--bad);color:#fff;border-color:transparent;animation:recpulse 1.3s ease-in-out infinite}
.mic-mini.busy{opacity:.55;pointer-events:none}
.chk-row{display:flex;align-items:center;gap:10px;font-size:13px;cursor:pointer}
.chk-row input{width:18px;height:18px;accent-color:var(--accent)}

/* ---- журнал ---- */
.shell:not([data-view="journal"]) .journal-wrap{display:none}
.shell[data-view="journal"] .cols,.shell[data-view="journal"] .tl,.shell[data-view="journal"] .hero2{display:none}
.jr-day{display:flex;flex-direction:column;gap:10px}
.jr-dh{font-weight:650;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:4px 2px}
.tl-logs{display:flex;flex-direction:column;gap:8px}
.tl-log{padding:10px 12px;border-radius:var(--r-m);background:var(--g3);border:1px solid var(--line)}
.tl-log p{margin:4px 0;white-space:pre-wrap;overflow-wrap:anywhere}
.tl-log-h{display:flex;gap:8px;font-size:11.5px;color:var(--muted)}
@media (max-width:1079px){
  .tabbar{grid-template-columns:repeat(5,1fr)}
  .tabbar button{font-size:11.5px;padding-inline:2px}
  .tabbar .badgec{right:calc(50% - 22px)}
}