/* Отмечено — общий стиль. Темы: светлая / тёмная / авто (data-theme на <html>).
   Гамма «Синяя» (14.10, под значок 1D): светлая — холодная серо-голубая, тёмная — глубокая тёмно-синяя;
   кнопка микрофона — градиент как у значка (#1F3C72 → #2A9DF4). Контраст текста проверен (не ниже прежней тёплой).
   Минимализм: без рамок вокруг списков, крупно только доска; цвет — у каждой доски свой
   (--bw работа, --bm встречи, --bp личное, --bo своя, --ba все доски), текущий — в --bc / --bcb.
   Цвета досок — набор «Спокойная», прошёл проверку различимости (в т.ч. при дальтонизме) на этих фонах — менять только с проверкой. */
:root{--bg:#D9DEE6;--sd:#CDD4DE;--s:#E8ECF2;--ink:#1C2533;--mu:#556274;--ln:#C3CBD7;--hov:#CBD3DE;--ac:#246CB3;--act:#fff;--acb:#CFE0F3;
--rd:#B42318;--rdb:#F0D4D1;--am:#975400;--amb:#EEE0C4;--gr:#3F6B1E;--grb:#D9E5CF;--ck:#8C97A6;--sh:0 1px 2px rgba(28,37,51,.06),0 6px 18px rgba(28,37,51,.06);--fab:rgba(36,108,179,.35);
--bw:#4da9dc;--bwb:#CDE3F1;--bm:#8d3a2f;--bmb:#E6D0CD;--bp:#87ad5e;--bpb:#DCE7CF;--bo:#5a4a92;--bob:#D8D3E8;--ba:#556274;--bab:#CFD6E0}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0F141C;--sd:#131A24;--s:#18202C;--ink:#E8EDF5;--mu:#93A0B3;--ln:#243041;--hov:#1C2634;--ac:#4A9BEA;--act:#0F141C;--acb:#16304D;--rd:#FF8A80;--rdb:#3A1C1E;--am:#F0B45A;--amb:#3A2E14;--gr:#9CC46B;--grb:#1F2E18;--ck:#4B5768;--sh:none;--fab:rgba(74,155,234,.3);
--bw:#439fd2;--bwb:#13293A;--bm:#a04c40;--bmb:#33201C;--bp:#7ea354;--bpb:#1F2A16;--bo:#6a5ba5;--bob:#241F36;--ba:#93A0B3;--bab:#1F2836}}
:root[data-theme=dark]{--bg:#0F141C;--sd:#131A24;--s:#18202C;--ink:#E8EDF5;--mu:#93A0B3;--ln:#243041;--hov:#1C2634;--ac:#4A9BEA;--act:#0F141C;--acb:#16304D;--rd:#FF8A80;--rdb:#3A1C1E;--am:#F0B45A;--amb:#3A2E14;--gr:#9CC46B;--grb:#1F2E18;--ck:#4B5768;--sh:none;--fab:rgba(74,155,234,.3);
--bw:#439fd2;--bwb:#13293A;--bm:#a04c40;--bmb:#33201C;--bp:#7ea354;--bpb:#1F2A16;--bo:#6a5ba5;--bob:#241F36;--ba:#93A0B3;--bab:#1F2836}
/* цвет доски: на body (текущая) и на отдельных элементах (.b-work и т.д.) */
body,.b-work{--bc:var(--bw);--bcb:var(--bwb)}
[data-board=meet],.b-meet{--bc:var(--bm);--bcb:var(--bmb)}
[data-board=personal],.b-personal{--bc:var(--bp);--bcb:var(--bpb)}
[data-board=other],.b-other{--bc:var(--bo);--bcb:var(--bob)}
[data-board=all],.b-all{--bc:var(--ba);--bcb:var(--bab)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{color-scheme:light dark}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.4 Onest,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--ac);text-decoration:none}
h1{margin:0;font-size:30px;font-weight:700;letter-spacing:-.02em}
.mu{color:var(--mu);font-size:13px}
.card{background:var(--s);border:1px solid var(--ln);border-radius:18px;box-shadow:var(--sh);overflow:hidden}
.btn{min-height:44px;border-radius:12px;padding:0 18px;font-weight:600;font-size:15px;border:1px solid var(--ln);background:transparent}
.btn.p{background:var(--ac);color:var(--act);border:0}
.icon-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--ln);background:var(--s);display:inline-flex;align-items:center;justify-content:center;flex:none}
.icon-btn svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---- каркас приложения ---- */
.app{display:flex;min-height:100vh;min-height:100dvh;overflow-x:clip}   /* свайп вправо: въезжающая доска не выходит за край — иначе телефон подстраивал страницу и нижняя панель дёргалась */
.side{display:none}
.main{flex:1;min-width:0;padding:max(20px,env(safe-area-inset-top)) 16px 120px;max-width:1100px;margin:0 auto;width:100%}
.head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.head .mu{font-size:12px}
.head h1::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--bc);margin-right:12px;vertical-align:.2em}
/* строка ввода задачи текстом */
.quick{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:4px 4px 4px 14px;border:1px solid var(--ln);border-radius:14px;background:var(--s);transition:border-color .15s}
.quick:focus-within{border-color:var(--bc);box-shadow:0 0 0 3px var(--bcb)}
/* слева — режим строки: «+» добавить / лупа поиск (нажатие переключает) */
.qmode{border:0;background:none;padding:6px;margin-left:-6px;border-radius:8px;display:flex;flex:none}
.qmode:hover{background:var(--hov)}
.qmode svg,.qbtn svg{width:18px;height:18px;stroke:var(--mu);fill:none;stroke-width:2;stroke-linecap:round}
.qmode .i-find,.quick.search .qmode .i-add{display:none}
.quick.search .qmode .i-find{display:block;stroke:var(--bc)}
.qbtn{width:36px;height:36px;border-radius:10px;border:0;background:none;display:flex;align-items:center;justify-content:center;flex:none}
.qbtn:hover{background:var(--hov)}
.quick.search{border-color:var(--bc)}
/* результаты поиска */
.dsum{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 18px;font-size:14px;color:var(--mu)}
.dsum b{font-size:20px;font-weight:700;color:var(--ink);margin-right:4px}
/* дашборд выполненного */
.dash{background:color-mix(in srgb,var(--bc) 5%,transparent);border-radius:14px;padding:14px 16px 12px;margin:0 0 22px}
.dhead{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--mu);margin-bottom:10px}
.seg2{display:flex;gap:2px;background:var(--hov);border-radius:9px;padding:2px}
.seg2 button{border:0;background:none;border-radius:7px;padding:4px 10px;font-size:13px;color:var(--mu);font-weight:500}
.seg2 button.on{background:var(--s);color:var(--ink);font-weight:600}
.chart{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);height:120px;padding-top:22px;border-bottom:1px solid var(--ln)}
.col{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;outline:none;border-radius:6px 6px 0 0;cursor:default}
.col:hover,.col:focus-visible{background:color-mix(in srgb,var(--bc) 8%,transparent)}
.col .bar{width:min(22px,64%);background:color-mix(in srgb,var(--bc) 55%,transparent);border-radius:4px 4px 0 0}
.col.now .bar,.col:hover .bar{background:var(--bc)}
.col .vl{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:3px}
/* подсказка: наведение мышкой или касание (фокус) по всей полосе, а не только по столбику */
.col:hover::after,.col:focus::after{content:attr(data-tip);position:absolute;bottom:calc(100% - 14px);left:50%;transform:translateX(-50%);white-space:nowrap;
  background:var(--ink);color:var(--bg);font-size:13px;font-weight:500;padding:5px 9px;border-radius:8px;z-index:3;pointer-events:none}
.col:first-child:hover::after,.col:first-child:focus::after{left:0;transform:none}
.col:last-child:hover::after,.col:last-child:focus::after{left:auto;right:0;transform:none}
.xrow{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin-top:5px}
.xrow span{text-align:center;font-size:12px;color:var(--mu);font-variant-numeric:tabular-nums}
.xrow span.now{color:var(--ink);font-weight:600}
.hbars{display:flex;flex-direction:column;gap:8px}
.hb{display:grid;grid-template-columns:minmax(80px,140px) 1fr 28px;align-items:center;gap:10px;font-size:14px}
.hl{display:flex;align-items:center;gap:7px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl i{width:8px;height:8px;border-radius:50%;background:var(--bc);flex:none}
.ht{height:10px;border-radius:0 4px 4px 0;background:var(--hov);overflow:hidden}
.ht span{display:block;height:100%;background:color-mix(in srgb,var(--ba) 70%,transparent);border-radius:0 4px 4px 0;min-width:0}
.hb b{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.sempty{padding:14px 4px;font-size:14px;color:var(--mu)}
.done-t .l{color:var(--mu);text-decoration:line-through}
.ck.ckd{background:var(--ck);border-color:var(--ck);cursor:default}
.btn.sm{min-height:32px;padding:0 12px;font-size:13px;font-weight:500;border-radius:9px;background:var(--hov);border-color:transparent;flex:none}
.quick input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:15px;color:var(--ink);padding:9px 0;outline:none}
.quick input::placeholder{color:var(--ck)}
.quick input:disabled{opacity:.5}
.qsend{width:36px;height:36px;border-radius:10px;border:0;background:var(--bc);display:flex;align-items:center;justify-content:center;flex:none}
.qsend svg{width:18px;height:18px;stroke:var(--s);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#result{position:relative}
.rclose{position:absolute;top:6px;right:8px;border:0;background:none;color:var(--mu);font-size:20px;line-height:1;padding:4px 8px}
.chips{display:flex;gap:6px;margin:0 0 20px;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{border:1.5px solid transparent;border-radius:8px;padding:5px 10px;font-size:13px;font-weight:500;background:var(--hov);color:var(--mu);white-space:nowrap;flex:none}
.chip.rd{background:var(--rdb);color:var(--rd)}.chip.am{background:var(--amb);color:var(--am)}
.chip.on{border-color:currentColor}
.chip b{font-weight:700;color:inherit;font-size:15px}
.chip:not(.rd):not(.am) b{color:var(--ink)}

/* ---- списки: без карточек, задачи разделены тонкими линиями ---- */
/* у всех списков — мягкая подложка цвета доски (у «Главного» чуть заметнее) */
#list .card{background:color-mix(in srgb,var(--bc) 5%,transparent);border:0;border-radius:14px;box-shadow:none;overflow:visible;padding:2px 0}
#list .card .t{border-color:color-mix(in srgb,var(--bc) 11%,transparent)}
.grp{margin:0 0 22px}
.gh{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:15px;font-weight:600;color:var(--mu)}
.gh span{font-size:15px;font-weight:700;color:var(--ink);background:var(--hov);border-radius:10px;padding:1px 9px;min-width:26px;text-align:center;font-variant-numeric:tabular-nums}
.gh i{width:8px;height:8px;border-radius:50%;background:var(--bc);display:inline-block}
.gh.rd i{background:var(--rd)}.gh.am i{background:var(--am)}.gh.mu i{background:var(--ck)}
.gh.rd{color:var(--rd)}.gh.am{color:var(--am)}
/* «Главное» — мягкая подложка цвета доски и номера 1, 2, 3 */
.top .gh{color:var(--ink)}
#list .top .card{background:color-mix(in srgb,var(--bc) 9%,transparent)}
#list .top .card .t{border-color:color-mix(in srgb,var(--bc) 15%,transparent)}
/* чек-лист под задачей: крупные строки, чтобы удобно отмечать пальцем в магазине */
.items{display:flex;flex-direction:column;padding:0 12px 8px 44px}
.irow{display:flex;align-items:center}
.irow .item{flex:1}
.idel{border:0;background:none;color:var(--ck);font-size:18px;line-height:1;padding:6px 10px}
.idel:hover{color:var(--rd)}
.item{display:flex;align-items:center;gap:10px;border:0;background:none;padding:7px 0;min-height:36px;font-size:14px;text-align:left;color:var(--ink)}
.item i{width:18px;height:18px;border-radius:6px;border:1.5px solid var(--ck);flex:none;position:relative}
.item:hover i{border-color:var(--bc)}
.item.done i{background:var(--bc);border-color:var(--bc)}
.item.done i::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--s);border-width:0 2px 2px 0;transform:rotate(45deg)}
.item.done span{text-decoration:line-through;color:var(--mu)}
.additem{font:inherit;font-size:14px;margin:4px 0 2px;padding:8px 10px;border-radius:10px;border:1px dashed var(--ln);background:none;color:var(--ink)}
.additem:focus{outline:none;border-style:solid;border-color:var(--bc)}
/* «Все доски»: колонки досок в один ряд */
.kanban{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px 14px;padding:0 16px 4px;scrollbar-width:none}
.kanban::-webkit-scrollbar{display:none}
.kcol{flex:0 0 86%;scroll-snap-align:start;min-width:0}
.kh{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;padding:0 6px 8px;margin-bottom:4px;box-shadow:inset 0 -2px 0 var(--bc)}
.kh i{width:8px;height:8px;border-radius:50%;background:var(--bc)}
.kh b{flex:1;font-weight:inherit}
.kh span{font-size:15px;font-weight:700;color:var(--ink);background:var(--hov);border-radius:10px;padding:1px 9px;min-width:26px;text-align:center;font-variant-numeric:tabular-nums}
/* колонки — с той же мягкой подложкой цвета доски, что и «Главное» */
.kcol .card:empty{display:none}
.taken{font-size:12px;color:var(--ck);padding:4px 0 2px 28px}
.kempty{padding:14px 8px;font-size:13px;color:var(--ck)}
.ttl small .rd{color:var(--rd)}.ttl small .am{color:var(--am)}
.later{border:0;background:none;color:var(--mu);font-size:13px;font-weight:500;padding:6px 12px}
.later:hover{color:var(--bc)}
.rank{width:22px;height:22px;border-radius:50%;background:color-mix(in srgb,var(--bc) 30%,transparent);color:var(--ink);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.t{border-top:1px solid var(--ln)}
.t:first-child{border-top:0}
.row{display:flex;align-items:center;gap:12px;padding:0 12px;min-height:48px}
.ck{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--ck);background:none;flex:none;padding:0;position:relative}
.ck::after{content:"";position:absolute;inset:-12px}
.ck:hover{border-color:var(--bc);background:var(--bcb)}
.ttl{flex:1;min-width:0;padding:7px 0;cursor:pointer;font-size:15px;font-weight:500}
.ttl .l{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ttl small{display:block;font-size:12px;color:var(--mu);font-weight:400}
.meta{font-size:13px;font-weight:500;color:var(--mu);white-space:nowrap;max-width:34%;overflow:hidden;text-overflow:ellipsis}
.meta.rd{color:var(--rd)}.meta.am{color:var(--am)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--am);flex:none}
.acts{display:none;gap:6px;padding:0 12px 12px 44px;flex-wrap:wrap}
.t.open .acts{display:flex}
.acts .btn{min-height:36px;padding:0 12px;font-size:13px;font-weight:500;border-radius:10px;background:var(--hov);border-color:transparent}
.warn{margin:0 12px 8px 44px;color:var(--am);background:var(--amb);border-radius:8px;padding:5px 9px;font-size:13px}
.edit{display:none;flex-direction:column;gap:8px;padding:0 12px 14px 44px}
.t.editing .edit{display:flex}.t.editing .acts{display:none}
.edit input[type=text],.edit input[type=datetime-local],.edit input[type=date]{font:inherit;padding:10px 12px;border-radius:10px;border:1px solid var(--ln);background:var(--bg);color:var(--ink);width:100%}
.edit label{font-size:13px;color:var(--mu);display:flex;gap:8px;align-items:center}
.empty{padding:18px 16px;color:var(--mu)}
.why{margin:0 12px 8px 44px;font-size:13px;color:var(--mu)}
.dnote{margin:-4px 0 8px;font-size:12px}
.row{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.t.ph{opacity:.35}
.t.ghost{position:fixed;z-index:30;background:var(--s);border:1px solid var(--ac);border-radius:12px;box-shadow:0 10px 28px rgba(16,24,40,.22);pointer-events:none;transform:scale(1.02)}
.t.ghost .acts,.t.ghost .why,.t.ghost .warn{display:none}
/* ---- калибровка и меню «Ещё» ---- */
.calib,.sheet-bg{position:fixed;inset:0;z-index:25;background:rgba(10,14,20,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.calib-box{width:100%;max-width:480px;max-height:100%;overflow:auto;padding:18px 20px 20px}
.calib h2{font-size:21px;margin:14px 0 4px;letter-spacing:-.01em}
.calib p{margin:0 0 14px;font-size:14px}
.calib-top{display:flex;justify-content:space-between;align-items:center}
.link{background:none;border:0;color:var(--ac);font-weight:600;font-size:14px;padding:6px 0}
.dots{display:flex;gap:6px;margin-top:10px}.dots i{flex:1;height:4px;border-radius:2px;background:var(--ln)}.dots i.on{background:var(--ac)}
.calib-nav{display:flex;justify-content:space-between;margin-top:18px}
.inp{font:inherit;width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--ln);background:var(--bg);color:var(--ink)}
.opts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.opt{border:1px solid var(--ln);background:transparent;border-radius:999px;padding:7px 14px;font-size:14px}
.opt.big{flex:1;min-width:70px;min-height:48px;border-radius:12px;font-size:16px;font-weight:600}
.opt.on{background:var(--acb);border-color:var(--ac);color:var(--ink)}
.num{width:24px;height:24px;border-radius:50%;background:var(--acb);color:var(--ac);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.grip{color:var(--ck);letter-spacing:-2px;cursor:grab}
.ren2{border:0;background:none;color:var(--mu);font-size:16px;padding:8px 6px;flex:none}
.aedit{display:flex;flex-direction:column;gap:8px;padding:12px 14px;background:var(--bg)}
.aedit textarea{resize:vertical;font-size:14px}
.aedit-btns{display:flex;gap:8px}.aedit-btns .btn{min-height:40px}
.addarea{width:100%;margin-top:10px;border-style:dashed;color:var(--ac)}
.own{display:flex;align-items:center;gap:10px;margin-top:10px;padding:6px 6px 6px 14px;border:1px solid var(--ln);border-radius:12px;font-size:14px;color:var(--mu)}
.own span{flex:none}.own .inp{flex:1;min-width:0;padding:8px 10px}
.own.on{border-color:var(--ac);background:var(--acb);color:var(--ink)}
.sheet-bg{align-items:flex-end;padding:0}
.sheet{background:var(--s);width:100%;max-width:520px;border-radius:18px 18px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px}
.sheet .btn{width:100%;display:flex;align-items:center;justify-content:center;color:var(--ink)}
/* ---- доски ---- */
/* телефон: доски — вкладки с подчёркиванием цветом доски */
.boards{display:flex;gap:20px;margin:-4px 0 14px;border-bottom:1px solid var(--ln);overflow-x:auto;scrollbar-width:none}
.boards::-webkit-scrollbar{display:none}
.boards button{flex:none;border:0;background:none;padding:8px 0 9px;font-size:14px;color:var(--mu);font-weight:500;white-space:nowrap}
.boards button.on{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--bc)}
.btag{font-size:12px;color:var(--ac);font-weight:600}
.edit select{font:inherit;font-size:14px;padding:6px 10px;border-radius:8px;border:1px solid var(--ln);background:var(--bg);color:var(--ink)}
body.dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}

#result{padding:12px 16px;margin-bottom:18px;box-shadow:none;border-radius:14px;background:var(--hov);border:0}
.said{font-size:17px;margin:4px 0 8px}
.rt{padding:6px 0;border-top:1px solid var(--ln)}
.pick{display:block;width:100%;text-align:left;background:var(--acb);border:0;border-radius:10px;padding:10px 12px;margin:6px 0}

/* ---- нижняя панель (телефон) ---- */
.tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:flex-start;justify-content:space-around;background:var(--s);border-top:1px solid var(--ln);padding:6px 8px calc(14px + env(safe-area-inset-bottom));z-index:5}
.tabbar a,.tabbar .tab{width:68px;text-align:center;font-size:11px;padding:4px 0 2px;color:var(--mu);font-weight:500;background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:3px}
.tabbar .tab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabbar .on{color:var(--bc);font-weight:600}
.fab{width:56px;height:56px;border-radius:50%;border:0;background:linear-gradient(135deg,#1F3C72,#2A9DF4);color:#fff;box-shadow:0 6px 16px var(--fab);margin-top:-26px;display:flex;align-items:center;justify-content:center;flex:none}
.fab svg,.sidemic svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round}
.fab.rec,.sidemic.rec{background:var(--rd);box-shadow:0 0 0 calc(6px + var(--lvl,0) * 16px) var(--rdb);transition:box-shadow .08s linear}   /* кольцо — в такт громкости голоса (--lvl из JS) */
.fab:disabled,.sidemic:disabled{opacity:.6}
.hint{position:fixed;left:0;right:0;bottom:calc(78px + env(safe-area-inset-bottom));text-align:center;font-size:12px;color:var(--mu);pointer-events:none;z-index:4}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom));background:var(--ink);color:var(--bg);border-radius:12px;padding:10px 14px;display:flex;gap:14px;align-items:center;font-size:14px;z-index:40;max-width:92vw}
.toast button{background:none;border:0;color:var(--ac);font-weight:700;padding:4px}
[hidden]{display:none!important}

/* ---- компьютер ---- */
@media (min-width:900px){
 .side{display:flex;flex-direction:column;gap:2px;width:236px;flex:none;background:var(--sd);border-right:1px solid var(--ln);padding:26px 14px;position:sticky;top:0;height:100vh}
 .brand{font-size:16px;font-weight:700;margin:0 10px 18px}
 .side a.nav{display:block;padding:8px 10px;border-radius:10px;font-size:14px;color:var(--mu);font-weight:500}
 .side a.nav:hover{background:var(--hov)}
 .side a.nav.on{background:var(--hov);color:var(--ink);font-weight:600}
 .side-h{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ck);margin:14px 10px 4px}
 .bnav{position:relative;border-radius:10px}
 .bnav:hover{background:var(--hov)}
 .bnav .nav{width:100%;display:flex;align-items:center;gap:10px;text-align:left;border:0;background:none;padding:8px 10px;border-radius:10px;font-size:14px;color:var(--mu);font-weight:500}
 .bnav .nav i{width:8px;height:8px;border-radius:50%;background:var(--bc);flex:none}
 .bnav .nav b{flex:1;font-weight:inherit}
 .bnav .nav span{min-width:20px;text-align:right;font-size:14px;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
 .bnav.on{background:var(--bcb)}.bnav.on .nav{color:var(--ink);font-weight:600}.bnav.on .nav span{color:var(--ink)}
 /* ✎ появляется на месте счётчика при наведении и не сдвигает числа */
 .bnav .ren{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:0;background:var(--hov);border-radius:8px;color:var(--mu);padding:4px 8px;font-size:14px;opacity:0}
 .bnav.on .ren{background:var(--bcb)}
 .bnav:hover .ren,.bnav .ren:focus-visible{opacity:1}
 .bnav .ren:hover{color:var(--ink)}
 .side .bottom{margin-top:auto;display:flex;flex-direction:column;gap:12px}
 .seg{display:flex;gap:2px;background:var(--s);border:1px solid var(--ln);border-radius:12px;padding:3px;font-size:13px}
 .seg button{flex:1;border:0;background:none;padding:8px 0;border-radius:8px;color:var(--mu)}
 .seg button.on{background:var(--hov);color:var(--ink);font-weight:600}
 .sidemic{min-height:48px;border-radius:14px;border:0;background:linear-gradient(135deg,#1F3C72,#2A9DF4);color:#fff;font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px}
 .sidemic svg{width:22px;height:22px}
 .user{font-size:13px;color:var(--mu);display:flex;justify-content:space-between;align-items:center;padding:0 4px}
 .user button{background:none;border:0;color:var(--ac);font-size:13px}
 .main{padding:36px 48px 60px;max-width:980px}
 [data-board=all] .main{max-width:1280px}
 /* колонки не уже 250px: если не помещаются — листаются вбок, а не сжимают названия */
 .kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:20px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--ck) transparent;margin:0 0 14px;padding:0 0 6px}
 [data-board=all] .main{max-width:1400px}
 h1{font-size:34px}
 #list .card .t:hover{background:color-mix(in srgb,var(--bc) 7%,transparent)}
 #list .card .t{border-radius:10px}
 .head .mu{font-size:13px}
 .tabbar,.hint,.mobile-only{display:none!important}
 .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;align-items:start}
 .toast{bottom:32px}
 .acts{display:flex;opacity:0;max-height:0;padding-bottom:0;overflow:hidden;transition:max-height .2s ease,opacity .15s ease,padding-bottom .2s ease}
 .t:hover .acts,.t.open .acts{opacity:1;max-height:160px;padding-bottom:12px}
  /* ПК: кнопки при наведении раздвигают строку плавно и с короткой задержкой — когда просто ведёте мышь по списку, строки не «прыгают» */
 .t:hover .acts{transition-delay:.15s}
 .chip{font-size:13px;padding:6px 12px}
}
@media (max-width:899px){.desktop-only{display:none!important}}

/* напоминания: план дня, итоги, «скоро срок», «пришёл ли ответ» — на подложке акцентного цвета */
#notes{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
#notes:empty{display:none}
.note{position:relative;padding:12px 40px 12px 16px;border-radius:14px;background:var(--acb)}
.note .nt{font-weight:700;font-size:15px;margin-bottom:2px}
.note .mu{font-size:14px}
.nrow{display:flex;justify-content:space-between;align-items:center;gap:6px 10px;padding:8px 0;border-top:1px solid color-mix(in srgb,var(--ac) 20%,transparent);flex-wrap:wrap}
.note .nrow:first-of-type{margin-top:8px}
.nbtns{display:flex;gap:6px;flex-wrap:wrap}
.note>.nbtns{margin-top:10px}
.note .btn.sm{background:var(--s)}

/* «Напомнить…» в раскрытой задаче и «Напомнить позже» в карточке */
.remind{margin:0 12px 12px 44px;display:flex;flex-direction:column;gap:8px}
.remind .rown{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.remind input[type=datetime-local]{min-height:32px;border:1px solid var(--ln);border-radius:9px;background:var(--s);color:var(--ink);padding:0 8px;font-size:14px}
.note>.nbtns+.nbtns{margin-top:6px}
.btn.sm.on{background:var(--ac);color:var(--act)}
.acts .btn.on{background:var(--ac);color:var(--act)}

/* свайп между досками: короткий сдвиг в сторону жеста */
@keyframes swl{from{transform:translateX(28px);opacity:.4}to{transform:none;opacity:1}}
@keyframes swr{from{transform:translateX(-28px);opacity:.4}to{transform:none;opacity:1}}
.main.swl{animation:swl .2s ease-out}.main.swr{animation:swr .2s ease-out}
/* «■ Остановить» — крупно, во всю ширину карточки, пока звучит ответ */
.speakstop{display:flex;width:100%;justify-content:center;margin-top:12px;min-height:48px;font-size:16px}
@media (prefers-reduced-motion:reduce){.main.swl,.main.swr{animation:none}}

/* удаление аккаунта: красным — только сама опасная кнопка и пункт меню */
.nav.danger,.btn.danger{color:var(--rd)}
.delbox h2{margin-top:4px}
.delbox .dl{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--mu);margin:4px 0 12px}
.delbox input[type=password]{min-height:44px;border:1px solid var(--ln);border-radius:12px;background:var(--bg);color:var(--ink);padding:0 12px;font-size:16px}
.delbox .dchk{display:flex;gap:10px;align-items:center;font-size:15px;color:var(--ink)}
.delbox .dchk input{width:20px;height:20px;accent-color:var(--rd);flex:none}
.delbox .derr{margin-top:12px;color:var(--rd);background:var(--rdb);border-radius:10px;padding:8px 12px;font-size:14px}
.btn.del{background:var(--rd);color:var(--bg);border:0}
.btn.del:disabled{opacity:.4;cursor:not-allowed}
/* «Удалить аккаунт» — в самом низу, отделено линией, мелко и неярко: на него не попасть случайно */
.delacc{display:block;width:100%;margin-top:22px;padding:14px 0 2px;border:0;border-top:1px solid var(--ln);background:none;color:var(--mu);font-size:13px;text-align:center}
.delacc:hover,.delacc:focus-visible{color:var(--rd);text-decoration:underline}
.sheet .delacc{margin-top:26px}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* настройка: готовые сферы по профессии и слова сферы «таблетками» */
.sugg-h{margin:16px 0 6px;font-size:14px;font-weight:600;color:var(--ink)}
.sugg{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px dashed var(--ln);border-radius:12px;margin-bottom:6px}
.sugg .ttl{padding:0}.sugg small{display:block;font-size:13px;color:var(--mu)}
.wchips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}
.wchip{border:1px solid var(--ln);background:var(--hov);color:var(--ink);border-radius:999px;padding:5px 10px;font-size:14px}
.wchip b{color:var(--mu);font-weight:600;margin-left:2px}
.wchip:hover b,.wchip:focus-visible b{color:var(--rd)}
.calib .opts .opt[data-prof]{font-size:15px;padding:9px 14px}
.wadd{display:flex;gap:6px;align-items:center}.wadd .inp{flex:1;min-width:0;margin:0}

/* ---------- анимации (короткие; «уменьшить движение» в системе — отключаются все) ---------- */
/* 1. «Выполнено»: кружок заливается, галочка прорисовывается, строка сжимается и уходит */
.ck.ticking{background:var(--bc);border-color:var(--bc)}
.ck svg{position:absolute;inset:2px;width:auto;height:auto;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22;animation:tick .24s ease-out forwards}
@keyframes tick{to{stroke-dashoffset:0}}
#list .t.leaving{height:0!important;opacity:0;overflow:hidden;border-color:transparent;transition:height .22s ease,opacity .18s ease}
/* 3. новая задача: короткая подсветка, видно, куда встала */
#list .t.fresh{animation:fresh 1.6s ease-out}
@keyframes fresh{0%{background:color-mix(in srgb,var(--ac) 30%,transparent);transform:translateY(-3px)}20%{transform:none}100%{background:transparent}}
/* 4. «Распознаю…»: бегущие точки и вращающееся кольцо вокруг кнопки микрофона */
.dots{display:inline-flex;gap:3px;margin-left:3px;vertical-align:middle}
.dots i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.25;animation:dot 1s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{30%{opacity:1;transform:translateY(-2px)}60%{opacity:.25;transform:none}}
.fab,.sidemic{position:relative}
.fab.busy::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid transparent;border-top-color:#2A9DF4;border-right-color:#2A9DF4;animation:spin .8s linear infinite}
.fab.busy:disabled{opacity:.85}
@keyframes spin{to{transform:rotate(360deg)}}
/* 6. карточки напоминаний, «Распознано» и подсказки внизу — мягко появляются */
.note.enter,#result.enter{animation:slideDown .28s ease-out}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}}
.toast.in{animation:toastIn .22s ease-out}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
/* 7. цифра в счётчике изменилась — чуть «подпрыгивает» */
.chip b.bump{display:inline-block;animation:bump .3s ease-out}
@keyframes bump{40%{transform:scale(1.3)}}
/* раскрытие задачи: меню (кнопки, «почему здесь», поля) выезжает вниз и так же плавно сворачивается */
.t.opening :is(.why,.acts,.remind,.additem,.idel){animation:openPart .22s ease-out;overflow:hidden}
.t.closing :is(.why,.acts,.remind,.additem,.idel){animation:closePart .17s ease-in forwards;overflow:hidden}
@keyframes openPart{from{opacity:0;max-height:0;transform:translateY(-4px)}to{opacity:1;max-height:420px;transform:none}}
@keyframes closePart{from{opacity:1;max-height:420px}to{opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0}}
/* ПК: ряд кнопок уже плавно показан наведением — при раскрытии и сворачивании нажатием его не анимируем повторно */
@media (min-width:900px){.t.opening .acts,.t.closing .acts{animation:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* свайп между досками: браузер двигает список вверх-вниз, только если жест НАЧАЛСЯ вертикально —
   начатый вбок жест не прокручивает список (Safari понимает только pan-y, остальные — ещё и масштаб) */
.main{touch-action:pan-y;touch-action:pan-y pinch-zoom}
.kanban,.chips,.boards{touch-action:pan-x pan-y}

/* задачи помещаются на экран — страница не должна ездить: высота — видимая (100dvh, без места под адресной
   строкой), а «пружина» iPhone и подтягивание для обновления на Android отключены */
html,body{overscroll-behavior-y:none}

/* «Недели»: 12 подписей «29.09» на телефоне не помещаются — подписываем каждую третью и текущую,
   остальные скрыты (место под ними сохраняется), точная неделя — в подсказке столбика */
@media (max-width:700px){.xrow.weeks span:not(:nth-child(3n)):not(.now){visibility:hidden}}
.xrow span{white-space:nowrap}