/* ─── TOKENS ─── */
/* Гамма Синергии: красный #ED131C, чёрный #1C1C1C, белый #FFFFFF */
:root {
  --bg:#F5F5F5; --surface:#FFFFFF; --surface-2:#F0F0F0; --border:#E3E3E3;
  --fg:#1C1C1C; --fg-muted:#5C5C5C; --fg-dim:#707070;
  --accent:#ED131C; --accent-hover:#C90F17; --accent-soft:#FDE8E9; --accent-ink:#C20E16; --on-accent:#FFFFFF;
  --lav:#ED131C; --on-lav:#FFFFFF;
  --side:#1C1C1C; --side-2:#2A2A2A; --side-3:#3A3A3A; --side-fg:#FFFFFF; --side-muted:#A6A6A6; --side-text:#E3E3E3; --side-accent:#FF5A60;
  /* Категории: серая метка + приглушённая точка (--c-* — цвет точки, не текста). Цветом выделено только «Срочно» */
  --c-project:#1C1C1C;  --b-project:#F0F0F0;
  --c-contact:#5E7A94;  --b-contact:#F0F0F0;
  --c-remind:#AD7A22;   --b-remind:#F0F0F0;
  --c-urgent:#C20E16;   --b-urgent:#FDE8E9;
  --c-personal:#5B8A68; --b-personal:#F0F0F0;
  /* Заливка второстепенных кнопок: видна и на фоне страницы, и на белых карточках */
  --btn-2:#E8E8E8; --btn-2-hover:#DCDCDC;
  --ok:#2FA87A;
  --shade:0,0,0;
  --radius:16px; --radius-lg:22px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#121212; --surface:#1C1C1C; --surface-2:#262626; --border:#333333;
    --fg:#F2F2F2; --fg-muted:#ABABAB; --fg-dim:#8F8F8F;
    --accent:#ED131C; --accent-hover:#FF2E37; --accent-soft:rgba(237,19,28,.18); --accent-ink:#FF6B70;
    --side:#0A0A0A; --side-2:#1C1C1C; --side-3:#2E2E2E;
    --c-project:#F2F2F2;  --b-project:#262626;
    --c-contact:#8DA9C4;  --b-contact:#262626;
    --c-remind:#D6A65A;   --b-remind:#262626;
    --c-urgent:#FF6B70;   --b-urgent:rgba(237,19,28,.18);
    --c-personal:#86B593; --b-personal:#262626;
    --btn-2:#2C2C2C; --btn-2-hover:#383838;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg:#121212; --surface:#1C1C1C; --surface-2:#262626; --border:#333333;
  --fg:#F2F2F2; --fg-muted:#ABABAB; --fg-dim:#8F8F8F;
  --accent:#ED131C; --accent-hover:#FF2E37; --accent-soft:rgba(237,19,28,.18); --accent-ink:#FF6B70;
  --side:#0A0A0A; --side-2:#1C1C1C; --side-3:#2E2E2E;
  --c-project:#F2F2F2;  --b-project:#262626;
  --c-contact:#8DA9C4;  --b-contact:#262626;
  --c-remind:#D6A65A;   --b-remind:#262626;
  --c-urgent:#FF6B70;   --b-urgent:rgba(237,19,28,.18);
  --c-personal:#86B593; --b-personal:#262626;
  --btn-2:#2C2C2C; --btn-2-hover:#383838;
  color-scheme: dark;
}

*,*::before,*::after{box-sizing:border-box;margin:0}
html,body{min-height:100%}
html{scrollbar-gutter:stable}
body{background:var(--bg);color:var(--fg);font-family:'Onest',system-ui,sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
textarea.one-line{display:block;resize:none;overflow:hidden;white-space:pre;overflow-wrap:normal}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg{flex-shrink:0}

/* ─── LAYOUT ─── */
.app{display:flex;min-height:100vh}
.sidebar{
  width:248px;flex-shrink:0;background:var(--side);color:var(--side-fg);
  padding:28px 16px 24px;display:flex;flex-direction:column;gap:32px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.main{flex:1;min-width:0;padding:40px clamp(16px,4vw,56px) 64px}
.main-inner{max-width:1120px;margin:0 auto;display:flex;flex-direction:column;gap:28px}

/* ─── SIDEBAR ─── */
.side-brand{display:flex;align-items:center;gap:12px;padding:0 8px}
/* Знак Университета «Синергия»: белая рамка со стрелкой на красной плашке (скругление 9/48 задано в SVG) */
.brand-icon{width:36px;height:36px;flex:none;border-radius:11px;background:var(--lav);display:grid;place-items:center;color:var(--on-lav)}
.brand-name{font-family:'Unbounded','Onest',sans-serif;font-size:16px;font-weight:600;letter-spacing:-.02em}
.brand-name span{font-family:'Onest',sans-serif;font-size:11px;font-weight:700;color:var(--side-accent);letter-spacing:.08em;margin-left:4px}
.tabs-nav{display:flex;flex-direction:column;gap:4px}
.tab-btn{
  display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:12px;
  background:transparent;border:0;color:var(--side-muted);font-size:14px;font-weight:600;text-align:left;
  transition:background .15s,color .15s;
}
.tab-btn .tab-label{flex:1}
.tab-btn .tl-short{display:none}
.tab-btn:hover{background:var(--side-2);color:var(--side-fg)}
.tab-btn.active{background:var(--side-3);color:#fff}
.tab-count{font-size:12px;font-variant-numeric:tabular-nums;opacity:.8}
.side-projects,#side-projects{display:flex;flex-direction:column;gap:2px}
.side-title{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--side-muted);padding:0 12px 6px}
.side-proj{display:flex;align-items:center;gap:12px;width:100%;min-height:40px;padding:0 12px;border-radius:10px;background:transparent;border:0;color:var(--side-text);font-size:14px;text-align:left}
.side-proj:hover{background:var(--side-2)}
.side-proj[aria-pressed="true"]{background:var(--side-3);color:#fff}
.side-proj.none .dot{border:1.5px dashed var(--side-muted)}
.side-proj .dot{width:9px;height:9px;border-radius:3px}
.side-proj .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-proj .cnt{font-size:12px;color:var(--side-muted);font-variant-numeric:tabular-nums}
.side-empty{font-size:13px;color:var(--side-muted);padding:0 12px}
.side-spacer{flex:1}
.side-foot{display:flex;flex-direction:column;gap:12px;padding:0 4px}
.sync-indicator{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;height:28px;padding:0 12px;border-radius:999px;background:var(--side-2);font-size:12px;color:var(--side-muted)}
.sync-dot{width:7px;height:7px;border-radius:50%;background:var(--side-muted)}
.sync-dot.ok{background:#6EE7A8}
.sync-dot.err{background:#F08A90}
.sync-dot.loading{background:#F5B470;animation:pulse .8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.side-actions{display:flex;gap:8px}
.btn-icon{width:44px;height:44px;border-radius:12px;border:1px solid var(--side-3);background:var(--side-2);color:var(--side-fg);display:grid;place-items:center;transition:background .15s}
.btn-icon:hover{background:var(--side-3)}
.btn-logout{flex:1;height:44px;border-radius:12px;border:1px solid var(--side-3);background:var(--side-2);color:var(--side-fg);font-size:13px;font-weight:600;transition:background .15s,color .15s}
.btn-logout:hover{background:#4A1A1C;color:#FFD4D6}
/* Аватар (js/avatar.js) */
.btn-avatar{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:4px 10px 4px 4px;border-radius:14px;border:1px solid var(--side-3);background:var(--side-2);color:var(--side-fg);text-align:left;transition:background .15s}
.btn-avatar:hover{background:var(--side-3)}
.btn-avatar[hidden]{display:none}
.av{position:relative;display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--accent);color:var(--on-accent)}
.av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.av-letter{font-family:'Unbounded','Onest',sans-serif;font-size:17px;font-weight:600;line-height:1}
.av-who{display:flex;flex-direction:column;min-width:0;gap:2px}
.av-name{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av-sub{font-size:12px;color:var(--side-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar-menu .av-sub{color:var(--fg-muted)}
.av-head{display:flex;align-items:center;gap:12px;padding:6px 6px 12px}
.av-big{width:64px;height:64px}
.av-big .av-letter{font-size:24px}
.av-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:4px 4px 10px}
.av-opt{position:relative;display:grid;place-items:center;aspect-ratio:1;min-height:44px;padding:0;border:0;border-radius:50%;background:transparent}
.av-opt .av{width:100%;height:100%;box-shadow:0 0 0 2px var(--surface),0 0 0 2px var(--border)}
.av-opt[aria-pressed="true"] .av{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.av-opt:hover .av{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--border)}
.av-opt[aria-pressed="true"]:hover .av{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.av-tick{position:absolute;right:-2px;bottom:-2px;display:none;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--on-accent);border:2px solid var(--surface)}
.av-tick svg{width:10px;height:10px}
.av-opt[aria-pressed="true"] .av-tick{display:grid}
.av-upload{width:100%}
.av-upload:disabled{opacity:.6}
.av-logout{display:none;width:100%;margin-top:6px}
.avatar-menu.sheet .av-logout{display:flex}
.avatar-menu .av-who{flex:1}
.av-name-row{display:flex;align-items:center;gap:4px;min-width:0}
.av-name-edit{display:grid;place-items:center;flex:none;width:44px;height:44px;border:0;border-radius:10px;background:transparent;color:var(--fg-muted)}
.av-name-edit:hover{background:var(--surface-2);color:var(--fg)}
.av-name-input{width:100%;min-height:44px;line-height:24px;padding:9px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);color:var(--fg);font:inherit;font-size:15px;font-weight:600;resize:none;overflow:hidden}
.av-name-input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
.av-name-btns{display:flex;gap:6px;margin:6px 0 2px}
.av-name-btns button{min-height:44px;padding:0 12px;border-radius:10px;border:0;font-size:13px;font-weight:600}
.av-name-save{background:var(--accent);color:var(--on-accent)}
.av-name-cancel{background:var(--surface-2);color:var(--fg)}
.av-tz{display:flex;align-items:center;gap:12px;min-height:56px;padding:4px 12px 10px;font-size:14px;font-weight:500}
.av-tz small{display:block;margin-top:2px;font-size:12px;font-weight:400;color:var(--fg-muted)}
.av-morning{min-height:56px}
.av-switch{position:relative;flex-shrink:0;width:40px;height:24px;border-radius:12px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border);transition:background .2s}
.av-switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--fg-muted);transition:transform .2s,background .2s}
.av-morning[aria-checked="true"] .av-switch{background:var(--accent);box-shadow:none}
.av-morning[aria-checked="true"] .av-switch::after{transform:translateX(16px);background:#fff}
.av-morning-time{display:flex;align-items:center;gap:6px;padding:0 12px 8px 60px;font-size:13px;color:var(--fg-muted)}
.av-morning-time>span:first-child{flex:1}
.av-morning-val{min-width:48px;text-align:center;font-size:15px;font-weight:600;color:var(--fg);font-variant-numeric:tabular-nums}
.av-step{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:var(--surface-2);color:var(--fg)}
.av-step:hover:not(:disabled),.av-step:focus-visible{background:var(--accent-soft);color:var(--accent-ink);outline:none}
.av-step:disabled{opacity:.35}
@media (prefers-reduced-motion: reduce){.av-switch,.av-switch::after{transition:none}}
.av-msg{margin:6px 8px 4px;font-size:13px;color:var(--accent-ink)}

/* ─── PAGE HEAD ─── */
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.head-date{display:flex;flex-direction:column;gap:6px}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted)}
.h1{font-family:'Unbounded','Onest',sans-serif;font-size:clamp(30px,4vw,44px);line-height:1.05;font-weight:600;letter-spacing:-.03em}
.h1 span{color:var(--fg-dim)}
.progress-card{flex:0 1 320px;display:flex;flex-direction:column;gap:10px;padding:16px 18px;background:var(--surface);border:1px solid var(--border);border-radius:18px}
.progress-label{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:600;color:var(--fg-muted)}
.progress-label strong{font-size:15px;color:var(--fg);font-variant-numeric:tabular-nums}
.progress-bar{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.progress-fill{height:100%;border-radius:999px;background:var(--accent);transition:width .4s cubic-bezier(.4,0,.2,1)}

/* Маскот Иван: поза и фраза зависят от задач на сегодня, рядом серия дней подряд */
.mascot-card{flex:0 1 400px;flex-direction:row;align-items:center;gap:14px;padding:12px 18px 14px 12px}
.mascot-img{flex:none;width:84px;height:116px;object-fit:contain;object-position:bottom;filter:drop-shadow(0 6px 10px rgba(var(--shade),.12))}
.mascot-img.pop{animation:mascot-pop .45s cubic-bezier(.3,1.6,.5,1)}
.mascot-fig{position:relative;flex:none;display:block}
.mascot-fig .mascot-img{display:block}
/* Кадр ролика квадратный, с запасом под машущую лапу: шире места под образ, по низу совпадает с ним */
.mascot-wave{position:absolute;left:50%;bottom:0;width:116px;height:116px;margin-left:-58px;object-fit:contain;object-position:bottom;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(var(--shade),.12))}
.mascot-fig.waving .mascot-img{visibility:hidden}
@keyframes mascot-pop{0%{transform:scale(.85) translateY(6px)}100%{transform:none}}
.mascot-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.mascot-say{font-size:14px;font-weight:600;line-height:1.35;color:var(--fg)}
.streak{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;height:28px;padding:0 10px;border-radius:999px;background:var(--surface-2);color:var(--fg-muted);font-size:12px;font-weight:600}
.streak strong{font-size:14px;color:var(--fg);font-variant-numeric:tabular-nums}
.streak.on{background:var(--accent-soft);color:var(--accent-ink)}
.streak.on strong{color:var(--accent-ink)}
@media (prefers-reduced-motion: reduce){.mascot-img.pop{animation:none}}

.tab-panel{display:block}
.tab-panel[hidden]{display:none!important}

/* ─── QUICK ADD ─── */
.quick-add{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:8px 8px 16px;display:flex;flex-direction:column;gap:14px;transition:border-color .2s,box-shadow .2s}
.quick-add:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.quick-add-row{display:flex;gap:8px;align-items:center}
.quick-input{flex:1;min-width:0;height:56px;padding:16px;line-height:24px;border:0;outline:none;background:transparent;font-size:18px;font-weight:500}
.quick-input::placeholder{color:var(--fg-dim)}
.qa-preview{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:0 8px}
.qa-preview[hidden]{display:none}
.qa-preview-k{font-size:12px;font-weight:600;color:var(--fg-muted)}
.qa-preview .chip{color:var(--accent-ink);background:var(--accent-soft)}
.btn-add{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 20px;border:0;border-radius:14px;background:var(--accent);color:var(--on-accent);font-size:14px;font-weight:600;white-space:nowrap;transition:background .15s,transform .1s}
.qa-more{display:none;flex-shrink:0;width:44px;height:44px;border:0;border-radius:12px;background:var(--surface-2);color:var(--fg-muted);place-items:center;transition:background .15s,color .15s}
.qa-more:hover{color:var(--fg)}
.qa-more[aria-expanded="true"]{background:var(--fg);color:var(--bg)}
.btn-add::before{content:"+";font-size:20px;font-weight:500;line-height:1}
.btn-add:hover{background:var(--accent-hover)}
.btn-add:active{transform:scale(.97)}
.btn-add:disabled{opacity:.6;cursor:not-allowed}
.add-options{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:0 12px}
.tags-row{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 auto}
/* Кнопки с заливкой: второстепенные — серые, выбранные — чёрные (в тёмной теме белые), главные — красные */
.tag-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:999px;border:0;background:var(--btn-2);color:var(--fg-muted);font-size:13px;font-weight:600;transition:background .15s,color .15s,transform .1s}
.tag-btn::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tag-color)}
.tag-btn:hover{background:var(--btn-2-hover);color:var(--fg)}
.tag-btn:active{transform:scale(.97)}
.tag-btn.active{background:var(--fg);color:var(--bg)}
.tag-btn.active.cat-project::before{background:var(--bg)}
.extra-row{display:flex;flex-wrap:wrap;gap:8px}
.field-pill{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:12px;background:var(--surface-2);font-size:13px;color:var(--fg-muted)}

/* ─── СВОИ ПОЛЯ ВЫБОРА (вместо системных select / date / time) ─── */
.ui-native{display:none!important}
.ui-pill{border:0;max-width:100%;min-width:0;transition:background .15s,box-shadow .15s}
.ui-pill:hover{background:color-mix(in srgb,var(--accent) 10%,var(--surface-2))}
.ui-pill[aria-expanded="true"]{box-shadow:inset 0 0 0 2px var(--accent)}
.ui-pill .pill-v{display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:150px;font-weight:600;color:var(--fg);font-variant-numeric:tabular-nums}
.ui-pill .pill-v span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ui-pill.empty .pill-v{color:var(--fg-dim);font-weight:500}
.ui-pill .pill-chev{display:inline-grid;color:var(--fg-dim);transform:rotate(90deg);transition:transform .15s}
.ui-pill[aria-expanded="true"] .pill-chev{transform:rotate(-90deg)}
.opt-dot{width:8px;height:8px;border-radius:50%;flex:none}
.ui-backdrop{position:fixed;inset:0;z-index:199;background:rgba(var(--shade),.35)}
.ui-pop{position:fixed;z-index:200;background:var(--surface);color:var(--fg);border:1px solid var(--border);border-radius:18px;box-shadow:0 18px 50px rgba(var(--shade),.2);padding:8px;overflow:auto;overscroll-behavior:contain}
.ui-pop.sheet{left:0!important;right:0;bottom:0;top:auto!important;width:auto!important;max-height:80vh!important;border-radius:22px 22px 0 0;padding:12px 12px calc(16px + env(safe-area-inset-bottom,0px))}
.ui-pop-title{display:none;padding:4px 8px 10px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-muted)}
.ui-pop.sheet .ui-pop-title{display:block}
.ui-list{display:flex;flex-direction:column;gap:2px}
.ui-opt{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:12px;background:transparent;color:var(--fg);font-size:14px;font-weight:500;text-align:left}
.ui-opt .opt-text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ui-opt .opt-check{display:none;color:var(--accent-ink)}
.ui-opt:hover,.ui-opt:focus-visible{background:var(--surface-2);outline:none}
.ui-opt[aria-selected="true"]{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.ui-opt[aria-selected="true"] .opt-check{display:inline-grid}
/* Время: быстрые варианты и две колонки, часы и минуты */
.tp-quick{display:flex;flex-wrap:wrap;gap:6px;padding:4px 4px 10px}
.tp-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 4px}
.tp-col{display:flex;flex-direction:column;gap:2px;max-height:220px;overflow-y:auto;padding:2px;scrollbar-width:thin}
.tp-col-h{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim);padding:0 6px 4px}
.tp-col .ui-opt{justify-content:center;min-height:40px;font-variant-numeric:tabular-nums}
.pop-foot{display:flex;flex-wrap:wrap;gap:6px;padding:10px 4px 2px;border-top:1px solid var(--border);margin-top:8px}
.pop-chip{height:40px;padding:0 12px;border-radius:10px;border:0;background:var(--btn-2);color:var(--fg);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;transition:background .13s,transform .1s}
.pop-chip:hover{background:var(--btn-2-hover)}
.pop-chip:active{transform:scale(.97)}
.pop-chip.on{background:var(--fg);color:var(--bg)}
.pop-chip.clear{color:var(--c-urgent);margin-left:auto}
.pop-chip.done{margin-left:auto;background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pop-chip.clear + .pop-chip.done{margin-left:0}

/* ─── МЕСЯЦ (общая сетка: календарь на главной и выбор даты) ─── */
.mc-head{display:flex;align-items:center;gap:6px}
.mc-title{flex:1;min-width:0;font-size:15px;font-weight:600}
.mc-title span{color:var(--fg-dim);font-weight:500}
.mc-nav{width:40px;height:40px;border-radius:12px;border:0;background:transparent;color:var(--fg);display:grid;place-items:center;transition:background .15s}
.mc-nav:hover{background:var(--surface-2)}
.mc-nav.prev svg{transform:rotate(180deg)}
.mc-dows,.mc-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.mc-dows span{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-dim);text-align:center;padding:6px 0 4px}
.mc-weeks{display:flex;flex-direction:column;gap:2px}
.mc-day{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:44px;min-width:0;border:0;border-radius:12px;background:transparent;color:var(--fg);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;transition:background .12s,box-shadow .12s}
.mc-day:hover{background:var(--surface-2)}
.mc-day.other{color:var(--fg-dim);font-weight:500}
.mc-day.weekend:not(.other){color:var(--fg-muted)}
.mc-day.today{background:var(--accent-soft);color:var(--accent-ink)}
.mc-day.sel{background:var(--accent);color:var(--on-accent)}
.mc-dots{display:flex;gap:2px;height:5px}
.mc-dots i{width:5px;height:5px;border-radius:50%;background:var(--dot,var(--accent))}
.mc-day.sel .mc-dots i{background:var(--on-accent)}
.mc-day.drop-over{box-shadow:inset 0 0 0 2px var(--accent);background:var(--accent-soft)}
.month-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 14px 12px;display:flex;flex-direction:column;gap:8px}
.month-card .mc-title{padding-left:6px}
.mc-toggle{display:none;height:40px;padding:0 12px;border-radius:12px;border:0;background:var(--surface-2);color:var(--fg-muted);font-size:13px;font-weight:600}
.mc-hint{font-size:12px;color:var(--fg-dim);padding:2px 6px 0}
.dp{width:100%}
.dp .mc-head{padding:2px 0 4px}
.dp .mc-title{padding-left:8px}
/* Фильтр списка по выбранному дню */
.day-filter{display:flex;align-items:center;gap:12px;padding:12px 8px 12px 16px;border-radius:var(--radius);background:var(--accent-soft);color:var(--accent-ink)}
.day-filter .df-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.day-filter .df-text small{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.day-filter .df-text b{font-size:17px;font-weight:700;color:var(--fg)}
.day-filter .btn-sm{background:var(--surface)}
.day-filter .btn-sm:hover{background:var(--btn-2)}
.day-filter .df-text b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.df-dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;vertical-align:1px}
/* Группы ленты; группа с датой — цель перетаскивания */
.feed-group{display:flex;flex-direction:column;gap:8px;border-radius:var(--radius);transition:background .15s,box-shadow .15s}
.feed-group + .feed-group{margin-top:12px}
.feed-group.empty{display:none}
body.dragging-task .feed-group[data-drop]{display:flex;padding:8px;margin:4px -8px 0;box-shadow:inset 0 0 0 1.5px var(--border)}
.feed-group.drop-over{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent) !important}
/* Своя группа не цель: перенос ищет цель через elementFromPoint, а он пропускает pointer-events:none.
   Иначе задача из «Позже», брошенная в «Позже», переехала бы на первый день группы */
body.dragging-task .feed-group:has(.task-item.dragging){pointer-events:none;box-shadow:none}
.feed-hint{margin-top:-4px;font-size:13px;color:var(--fg-muted)}
.feed-drop-hint{display:grid;place-items:center;min-height:44px;border:1.5px dashed var(--border);border-radius:12px;font-size:13px;color:var(--fg-muted)}
.section-head.inbox{color:var(--fg-muted)}
.task-text mark,.task-note-preview mark{background:color-mix(in srgb,var(--c-remind) 28%,transparent);color:inherit;border-radius:3px;padding:0 1px}
/* Перетаскивание задачи на день календаря */
/* Перетаскивание задач на день (drag.js): мышью сразу, пальцем после долгого нажатия */
@media (pointer:fine){.task-item:not(.done),.cal-ev[data-id]{cursor:grab}}
@media (pointer:coarse){
  .task-item:not(.done),.cal-ev[data-id]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  .task-item textarea,.task-item input{-webkit-user-select:text;user-select:text}
}
.task-item.drag-hold{transform:scale(.97);transition:transform .35s ease,border-color .15s,opacity .2s;border-color:var(--accent)}
.task-item.dragging,.cal-ev.dragging{opacity:.4}
body.dragging-task{-webkit-user-select:none;user-select:none}
body.dragging-task,body.dragging-task *{cursor:grabbing !important}
body.dragging-task .cal-card{box-shadow:0 0 0 2px var(--accent)}
:where([data-drop]).drop-over{box-shadow:inset 0 0 0 2px var(--accent)}
.drag-ghost{position:fixed;left:0;top:0;z-index:60;pointer-events:none;max-width:min(280px,80vw);padding:10px 14px;border-radius:14px;background:var(--side);color:var(--side-fg);font-size:14px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 12px 32px rgba(var(--shade),.3);border-left:4px solid var(--accent);rotate:-2deg}
.drag-ghost.touch{font-size:15px;padding:12px 16px}
.cal-nav-btn.drag-flip{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.drop-landed{animation:drop-landed .9s ease}
@keyframes drop-landed{0%{background:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}100%{box-shadow:inset 0 0 0 2px transparent}}
@media (prefers-reduced-motion: reduce){.drop-landed{animation:none}.task-item.drag-hold{transition:none}}
/* Уведомление «Перенесено на … · Отменить» */
.move-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:50;display:flex;align-items:center;gap:6px;max-width:calc(100vw - 32px);padding:4px 4px 4px 18px;border-radius:16px;border:1px solid var(--side-3);background:var(--side);color:var(--side-fg);font-size:14px;font-weight:500;box-shadow:0 12px 32px rgba(var(--shade),.3);opacity:0;visibility:hidden;transform:translate(-50%,12px);transition:opacity .2s,transform .2s,visibility .2s}
.move-toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
.move-toast .mt-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.move-toast .mt-undo{flex:none;min-height:44px;padding:0 14px;border:0;border-radius:12px;background:transparent;color:var(--side-accent);font-weight:700}
.move-toast .mt-undo:hover{background:var(--side-2)}
@media (max-width: 860px){.move-toast{bottom:calc(98px + env(safe-area-inset-bottom,0px))}}
body.dragging-task .month-card,body.dragging-task .week-card{box-shadow:0 0 0 2px var(--accent)}
.week-day.drop-over,.week-day[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--lav)}
.cal-day.drop-over{box-shadow:inset 0 0 0 2px var(--accent);background:var(--accent-soft)}

/* ─── FILTERS ─── */
.feed-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.search-box{position:relative;display:flex;align-items:center;flex:0 1 260px;min-width:180px;height:40px;border-radius:12px;background:var(--btn-2);color:var(--fg-muted);transition:flex-basis .2s}
.search-box:focus-within{box-shadow:0 0 0 2px var(--accent)}
.search-box > svg{position:absolute;left:12px;pointer-events:none}
.search-input{flex:1;min-width:0;height:40px;padding:9px 40px 9px 38px;border:0;background:transparent;color:var(--fg);font:inherit;font-size:14px;line-height:22px;resize:none;overflow:hidden;white-space:nowrap;outline:none}
.search-input::placeholder{color:var(--fg-muted)}
.search-clear{position:absolute;right:2px;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:var(--fg-muted)}
.search-clear:hover{color:var(--fg)}
.search-clear[hidden]{display:none}
.feed-tools .filter-row{flex:1 1 auto;min-width:0}
.filter-row{display:flex;flex-wrap:wrap;gap:6px}
.filter-chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 8px 0 14px;border-radius:12px;border:0;background:var(--btn-2);color:var(--fg-muted);font-size:13px;font-weight:600;transition:background .15s,color .15s,transform .1s}
.filter-chip:hover{background:var(--btn-2-hover);color:var(--fg)}
.filter-chip:active{transform:scale(.97)}
/* Красный оставлен для главного действия, выбранный фильтр — чёрный (в тёмной теме белый) */
.filter-chip.active{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.filter-count{min-width:24px;height:24px;padding:0 6px;border-radius:8px;display:grid;place-items:center;font-size:12px;font-variant-numeric:tabular-nums;background:var(--surface);color:var(--fg-muted)}
.filter-chip.active .filter-count{background:color-mix(in srgb,var(--bg) 20%,transparent);color:var(--bg)}

/* ─── TASKS LAYOUT ─── */
.tasks-layout{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start}
.tasks-col{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;gap:10px}
.tasks-aside{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:16px}
.section-head{display:flex;align-items:center;gap:10px;font-family:'Unbounded','Onest',sans-serif;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fg);padding:18px 0 2px}
.section-head:first-child{padding-top:0}
.section-head.overdue{color:var(--c-urgent)}
.section-head .cnt{font-size:12px;font-weight:600;letter-spacing:0;color:var(--fg-muted);font-variant-numeric:tabular-nums}
.tasks-empty{text-align:center;padding:48px 16px;color:var(--fg-muted);background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius)}
.tasks-empty .empty-title{font-family:'Unbounded','Onest',sans-serif;font-size:18px;font-weight:600;color:var(--fg);margin-bottom:6px}
.tasks-empty p{font-size:14px}
.empty-ivan{display:block;width:88px;height:120px;object-fit:contain;object-position:bottom;margin:0 auto 12px}
.link-card{position:relative;text-align:left;padding:32px 28px}
.link-card .empty-title{padding-right:48px}
.link-close{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;border-radius:12px;background:none;color:var(--fg-muted);display:grid;place-items:center;cursor:pointer;transition:color .15s,background .15s}
.link-close:hover{color:var(--fg);background:var(--surface-2)}
.link-manual a{color:var(--accent-ink);font-weight:600}
/* Напоминание после крестика: задачи и уведомления — только с привязанным Telegram */
.link-nudge{display:flex;align-items:center;gap:14px;padding:14px 16px;margin-bottom:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);font-size:14px;color:var(--fg-muted)}
.link-nudge svg{flex:none;color:#229ED9}
.link-nudge b{display:block;color:var(--fg);font-weight:600}
.link-nudge .nudge-text{flex:1;min-width:0}
.link-nudge .btn-sm{flex:none;background:var(--accent);color:var(--on-accent)}
.link-nudge .btn-sm:hover{background:var(--accent-hover)}
.link-card .auth-error{margin-top:12px}
.link-row{display:flex;gap:10px;margin-top:14px}
.link-row .auth-input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.12em;font-weight:600}
.link-row .auth-btn{width:auto;flex:none;padding:0 22px;margin-top:0;height:52px}
.link-card .auth-tg{margin-top:14px}
.link-manual{margin-top:14px;font-size:14px;color:var(--fg-muted)}
.link-manual summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--accent-ink)}
.link-manual p{margin-top:4px}

/* ─── TASK ITEM ─── */
.task-item{display:grid;grid-template-columns:44px minmax(0,1fr) auto;column-gap:6px;row-gap:8px;align-items:start;padding:8px 8px 14px 4px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);transition:border-color .15s,opacity .2s;margin-bottom:0}
.task-item:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}
.task-item.done{opacity:.6}
.task-item.done .task-text{text-decoration:line-through;color:var(--fg-muted)}
.task-check{width:44px;height:44px;flex-shrink:0;border:0;background:transparent;display:grid;place-items:center;padding:0}
.task-check .box{width:22px;height:22px;border-radius:8px;border:1.5px solid var(--fg-dim);display:grid;place-items:center;transition:background .15s,border-color .15s;color:#fff}
.task-check:hover .box{border-color:var(--accent)}
.task-check .box svg{display:none}
.task-item.done .task-check .box{background:var(--accent);border-color:var(--accent)}
.task-item.done .task-check .box svg{display:block}
/* Тело карточки раскрыто в сетку: метки и форма занимают ширину под кнопками, а не узкую колонку */
.task-body{display:contents}
.task-check{grid-column:1;grid-row:1}
.task-text{grid-column:2;grid-row:1;padding-top:11px;font-size:15px;font-weight:500;line-height:1.4;word-break:break-word}
.task-actions{grid-column:3;grid-row:1}
.task-note-preview,.task-footer,.note-row,.subtasks,.task-files{grid-column:2 / 4;margin-right:4px}
/* Подтверждение начинается под галочкой: «Да, выполнена» — первая кнопка слева */
.done-confirm{grid-column:1 / 4;margin:0 4px 0 4px}
.done-confirm{display:none;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 12px 8px 8px;border-radius:12px;background:var(--accent-soft);font-size:13px;font-weight:600;color:var(--accent-ink)}
.done-confirm span{flex:1 1 auto;min-width:0}
.task-item.confirming .done-confirm{display:flex}
.task-item.confirming .task-check .box{border-color:var(--accent)}
.task-note-preview{font-size:13px;line-height:1.45;color:var(--fg-muted);word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.task-note-preview.expanded{display:block}
.task-footer{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.task-footer:empty{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.task-tag{color:var(--fg-muted);background:var(--tag-bg)}
.task-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tag-color)}
.task-tag.cat-urgent{color:var(--c-urgent)}
.task-due-tag.today{color:var(--fg);background:var(--btn-2)}
.task-due-tag.overdue{color:var(--c-urgent);background:var(--b-urgent)}
/* «Срочно» и «Просрочено» отличаются не только цветом: знак «!» рядом с текстом */
.task-tag.cat-urgent::before,.task-due-tag.overdue::before,.section-head.overdue::before{
  content:"!";display:grid;place-items:center;width:14px;height:14px;border-radius:50%;
  background:var(--c-urgent);color:var(--surface);font-family:'Onest',sans-serif;font-size:10px;font-weight:800;line-height:1}
.section-head.overdue::before{width:16px;height:16px;font-size:11px}
.task-due-tag.future{color:var(--fg-muted);background:var(--surface-2)}
.task-recur-tag{color:var(--fg-muted);background:var(--surface-2)}
.task-proj-tag{color:var(--fg-muted);background:var(--surface);border:1px solid var(--border)}
.task-proj-tag .dot{width:7px;height:7px;border-radius:50%}
.task-actions{display:flex;flex-shrink:0;opacity:.55;transition:opacity .15s}
.task-item:hover .task-actions,.task-item:focus-within .task-actions{opacity:1}
.task-actions button{width:40px;height:40px;border:0;border-radius:12px;background:transparent;color:var(--fg-muted);display:grid;place-items:center;transition:background .12s,color .12s}
.task-actions button:hover{background:var(--surface-2);color:var(--fg)}
.task-actions .btn-delete:hover{color:var(--c-urgent);background:var(--b-urgent)}
/* Подзадачи в карточке */
.subtasks{list-style:none;margin:-4px 4px 0 0;padding:0;display:flex;flex-direction:column}
.sub-item{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 8px 0 0;border:0;border-radius:10px;background:transparent;color:var(--fg);font-size:14px;line-height:1.35;text-align:left}
.sub-item:hover{background:var(--surface-2)}
.sub-item .box{width:18px;height:18px;flex-shrink:0;border-radius:6px;border:1.5px solid var(--fg-dim);display:grid;place-items:center;color:#fff;transition:background .15s,border-color .15s}
.sub-item .box svg{display:none;width:11px;height:11px}
.sub-item.done .box{background:var(--accent);border-color:var(--accent)}
.sub-item.done .box svg{display:block}
.sub-item.done .sub-text{text-decoration:line-through;color:var(--fg-muted)}
.sub-text{min-width:0;padding:8px 0;word-break:break-word}
.task-sub-tag{gap:5px;color:var(--fg-muted);background:var(--surface-2)}
.task-sub-tag.all{color:var(--c-personal);background:var(--b-personal)}
/* Подзадачи в форме правки */
.sub-edit{display:flex;flex-direction:column;gap:6px}
.sub-edit-title{font-size:12px;font-weight:600;color:var(--fg-muted)}
.sub-edit-list{display:flex;flex-direction:column;gap:6px}
.sub-edit-list:empty{display:none}
.sub-row{display:flex;gap:6px;align-items:center}
.sub-in,.sub-new{flex:1;min-width:0;height:44px;padding:11px 12px;line-height:20px;border-radius:12px;border:1px solid var(--border);background:var(--surface-2);font-size:14px;outline:none;transition:border-color .15s}
.sub-new{border-style:dashed}
.sub-in:focus,.sub-new:focus{border-color:var(--accent);border-style:solid}
.sub-new::placeholder{color:var(--fg-dim)}
.sub-btn{flex:none;width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--fg-muted);display:grid;place-items:center}
.sub-btn:hover{background:var(--surface-2);color:var(--fg)}
/* Файлы задачи: в карточке — плашки (нажатие скачивает), в форме правки — строки с кнопкой «Убрать» */
.task-files{display:flex;flex-wrap:wrap;gap:6px}
.task-files:empty{display:none}
.file-chip,.file-row{display:inline-flex;align-items:center;gap:7px;min-width:0;max-width:100%;border:1px solid var(--border);background:var(--surface-2);color:var(--fg);font-size:13px;text-align:left}
.file-chip{min-height:36px;padding:0 12px 0 10px;border-radius:12px}
.file-row{flex:1;height:44px;padding:0 12px;border-radius:12px}
.file-chip:hover,.file-row:hover{border-color:var(--fg-dim)}
.file-chip svg,.file-row svg{flex:none;color:var(--fg-muted)}
.file-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-size{flex:none;color:var(--fg-muted);font-size:12px}
.file-edit{display:flex;flex-direction:column;gap:6px}
.file-hint{font-weight:500;color:var(--fg-dim)}
.file-edit-list{display:flex;flex-direction:column;gap:6px}
.file-edit-list:empty{display:none}
.file-rm.arm{width:auto;padding:0 12px;color:var(--c-urgent);background:var(--b-urgent);font-size:13px;font-weight:600}
.file-add{display:flex;align-items:center;justify-content:center;gap:8px;height:44px;border:1px dashed var(--border);border-radius:12px;background:transparent;color:var(--fg-muted);font-size:14px;font-weight:600}
.file-add:hover{border-color:var(--accent);color:var(--fg)}
.file-add:disabled{opacity:.6;cursor:progress}
.file-add[hidden]{display:none}
.file-status{font-size:12px;color:var(--fg-muted)}
.file-status:empty{display:none}
.note-row{display:none;padding-top:10px;border-top:1px solid var(--border);margin-top:2px}
.note-row.open{display:flex;flex-direction:column;gap:10px}
.edit-text{width:100%;height:44px;padding:11px 12px;line-height:20px;border-radius:12px;border:1px solid var(--border);background:var(--surface-2);font-size:15px;font-weight:500;outline:none;transition:border-color .15s}
.edit-text:focus{border-color:var(--accent)}
.note-input{width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:10px 12px;font-size:14px;resize:vertical;outline:none;line-height:1.5;min-height:72px;transition:border-color .15s}
.note-input::placeholder{color:var(--fg-dim)}
.note-input:focus{border-color:var(--accent)}
.note-save-row{display:flex;justify-content:flex-end;gap:8px}
.btn-sm{height:44px;padding:0 16px;border-radius:12px;border:0;background:var(--btn-2);color:var(--fg);font-size:13px;font-weight:600;transition:background .13s,color .13s,transform .1s}
.btn-sm:hover{background:var(--btn-2-hover)}
.btn-sm:active{transform:scale(.97)}
.btn-sm.primary{background:var(--accent);color:var(--on-accent)}
.btn-sm.primary:hover{background:var(--accent-hover)}
.done-section{margin-top:12px}
.done-toggle{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 4px;border:0;background:transparent;color:var(--fg-muted);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;transition:color .15s}
.done-toggle:hover{color:var(--fg)}
.done-arrow{transition:transform .2s;display:inline-grid}
.done-toggle.open .done-arrow{transform:rotate(90deg)}
#done-list{display:flex;flex-direction:column;gap:8px}

/* ─── WEEK CARD ─── */
.week-card{background:var(--side);color:var(--side-fg);border-radius:var(--radius-lg);padding:20px;display:flex;flex-direction:column;gap:16px}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.card-head h2{font-size:15px;font-weight:600}
.link-btn{border:0;background:transparent;color:var(--side-accent);font-size:13px;font-weight:600;min-height:32px;padding:0}
.week-strip{display:flex;flex-direction:column;gap:6px}
.week-day{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px 8px 8px;border-radius:14px;border:0;background:var(--side-2);color:var(--side-fg);text-align:left;width:100%}
.week-day:hover{background:var(--side-3)}
.week-day .wd-date{flex:none;width:44px;display:flex;flex-direction:column;align-items:center;line-height:1.15}
.week-day .dow{font-size:11px;font-weight:600;opacity:.75;text-transform:uppercase;letter-spacing:.04em}
.week-day .num{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.week-day .wd-list{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.35}
.week-day .wd-task{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.week-day .wd-task b{font-weight:700;font-variant-numeric:tabular-nums;margin-right:6px;opacity:.8}
.week-day .wd-empty{opacity:.5}
.week-day .wd-more{font-size:12px;opacity:.7}
.week-day.today{background:var(--side-3);box-shadow:inset 3px 0 0 var(--accent)}
.week-day.today .num,.week-day.today .dow{color:var(--side-accent);opacity:1}

/* ─── CALENDAR ─── */
.cal-layout{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start}
.cal-main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:20px}
.cal-nav{display:flex;align-items:center;gap:10px}
.cal-nav h2{flex:1}
.cal-nav .h1{font-size:clamp(22px,2.6vw,28px);letter-spacing:-.02em}
.cal-nav-btn,.cal-today-btn{height:44px;border-radius:12px;border:0;background:var(--btn-2);color:var(--fg);display:grid;place-items:center;transition:background .15s,transform .1s}
.cal-nav-btn{width:44px}
.cal-today-btn{padding:0 16px;font-size:13px;font-weight:600}
.cal-nav-btn:hover,.cal-today-btn:hover{background:var(--btn-2-hover)}
.cal-nav-btn:active,.cal-today-btn:active{transform:scale(.96)}
.cal-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal-dow{padding:8px 10px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-muted)}
.cal-day{display:flex;flex-direction:column;align-items:stretch;gap:4px;min-height:108px;padding:8px;border-radius:14px;border:0;background:transparent;text-align:left;min-width:0;transition:background .15s}
.cal-day:hover{background:var(--surface-2)}
.cal-day .num{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;padding:2px 4px}
.cal-day.other-month .num{color:var(--fg-dim)}
.cal-day.today{background:var(--accent-soft)}
.cal-day.today .num{color:var(--accent-ink);font-weight:700}
.cal-day.selected{box-shadow:inset 0 0 0 2px var(--accent)}
.cal-ev{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:3px 7px;border-radius:7px;font-size:11px;font-weight:600;background:var(--surface-2);color:var(--fg)}
.cal-day.today .cal-ev{background:var(--accent);color:#fff}
.cal-ev.overdue{background:var(--b-urgent);color:var(--c-urgent)}
.cal-more{font-size:11px;font-weight:600;color:var(--fg-muted);padding:0 4px}
.cal-dots{display:none;gap:3px;justify-content:center}
.cal-dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}
.cal-dot.overdue-dot{background:var(--c-urgent)}
.cal-side{flex:1 1 300px;min-width:0}
.day-panel{background:var(--side);color:var(--side-fg);border-radius:var(--radius-lg);padding:22px;display:flex;flex-direction:column;gap:16px}
.day-panel .eyebrow{color:var(--side-muted);font-size:12px}
.day-title{font-family:'Unbounded','Onest',sans-serif;font-size:26px;font-weight:600;letter-spacing:-.02em}
.day-panel .task-item{background:var(--side-2);border-color:var(--side-3);color:var(--side-fg)}
.day-panel .task-item .task-check .box{border-color:var(--side-muted)}
.day-panel .chip.task-due-tag.future,.day-panel .task-recur-tag,.day-panel .task-proj-tag{background:var(--side-3);color:var(--side-fg);border-color:var(--side-3)}
.day-panel .task-actions button{color:var(--side-muted)}
.day-panel .sub-item{color:var(--side-fg)}
.day-panel .sub-item:hover{background:var(--side-3)}
.day-panel .task-sub-tag{background:var(--side-3);color:var(--side-fg)}
.day-panel .file-chip,.day-panel .file-row{background:var(--side-3);border-color:var(--side-3);color:var(--side-fg)}
.day-panel .file-chip svg,.day-panel .file-size{color:var(--side-muted)}
.day-panel .task-actions button:hover{background:var(--side-3);color:#fff}
.day-panel .section-head{color:var(--side-muted)}
.day-list{display:flex;flex-direction:column;gap:8px}
.cal-no-tasks{font-size:14px;color:var(--side-muted);padding:8px 0}
.btn-add-for-day{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;border:0;border-radius:14px;background:var(--lav);color:var(--on-lav);font-size:14px;font-weight:600}
.btn-add-for-day:hover{filter:brightness(1.05)}

/* ─── PROJECTS ─── */
.proj-add-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;margin-bottom:20px}
.proj-form-title{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:14px}
.proj-form-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.proj-name-input{flex:1;min-width:180px;height:48px;padding:13px 14px;line-height:20px;border-radius:14px;border:1px solid var(--border);background:var(--surface-2);font-size:15px;outline:none;transition:border-color .15s}
.proj-name-input::placeholder{color:var(--fg-dim)}
.proj-name-input:focus{border-color:var(--accent)}
.btn-proj-add{height:48px;padding:0 20px;border:0;border-radius:14px;background:var(--accent);color:var(--on-accent);font-size:14px;font-weight:600;white-space:nowrap;transition:background .15s}
.btn-proj-add:hover{background:var(--accent-hover)}
.color-picker{display:flex;gap:4px;flex-wrap:wrap}
.color-swatch{width:32px;height:32px;border-radius:50%;border:3px solid var(--surface);box-shadow:0 0 0 1px var(--border);padding:0;transition:transform .1s,box-shadow .15s}
.color-swatch:hover{transform:scale(1.1)}
.color-swatch.selected{box-shadow:0 0 0 2px var(--fg)}
#projects-list{display:flex;flex-direction:column;gap:10px}
.proj-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.proj-card-header{display:flex;align-items:center;gap:12px;padding:8px 8px 8px 18px;min-height:60px;cursor:pointer;transition:background .15s}
.proj-card-header:hover{background:var(--surface-2)}
.proj-dot{width:12px;height:12px;border-radius:4px;flex-shrink:0}
.proj-name{flex:1;font-size:15px;font-weight:600;min-width:0}
.proj-count{font-size:13px;color:var(--fg-muted);font-variant-numeric:tabular-nums}
.proj-chevron{color:var(--fg-muted);transition:transform .2s;display:grid;place-items:center;width:28px}
.proj-card.open .proj-chevron{transform:rotate(90deg)}
.proj-card-body{display:none;border-top:1px solid var(--border);padding:12px;flex-direction:column;gap:8px}
.proj-card.open .proj-card-body{display:flex}
.proj-empty{font-size:14px;color:var(--fg-muted);padding:8px;text-align:center}
.btn-proj-del{width:40px;height:40px;border:0;border-radius:12px;background:transparent;color:var(--fg-muted);display:grid;place-items:center;transition:color .12s,background .12s}
.btn-proj-del:hover{color:var(--c-urgent);background:var(--b-urgent)}
.btn-proj-edit{width:40px;height:40px;border:0;border-radius:12px;background:transparent;color:var(--fg-muted);display:grid;place-items:center;transition:color .12s,background .12s}
.btn-proj-edit:hover{color:var(--accent-ink);background:var(--accent-soft)}
.proj-name-edit{flex:1;min-width:0;height:40px;padding:9px 12px;line-height:20px;border-radius:10px;border:1px solid var(--accent);background:var(--surface);font-size:15px;font-weight:600;outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
.proj-unassigned{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.proj-section-label{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-muted);padding:4px 0}

/* ─── CATEGORY COLORS ─── */
.cat-project  {--tag-color:var(--c-project); --tag-bg:var(--b-project)}
.cat-contact  {--tag-color:var(--c-contact); --tag-bg:var(--b-contact)}
.cat-personal {--tag-color:var(--c-personal);--tag-bg:var(--b-personal)}
.cat-urgent   {--tag-color:var(--c-urgent);  --tag-bg:var(--b-urgent)}
.cat-remind   {--tag-color:var(--c-remind);  --tag-bg:var(--b-remind)}

/* ─── AUTH ─── */
/* Пока не вошли, приложение под экраном входа не рисуется: во встроенном браузере Telegram
   на iPhone оно просвечивало над окном входа и прокручивалось под ним. */
body.auth-locked .app{display:none}
.auth-overlay{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;gap:16px;padding:16px;overflow-y:auto;overscroll-behavior:contain}
.auth-hero{flex:1 1 480px;align-self:flex-start;min-height:100%;background:var(--side);color:var(--side-fg);border-radius:28px;padding:clamp(28px,4vw,52px);display:flex;flex-direction:column;justify-content:space-between;gap:36px}
/* Блок приветствия — по центру тёмной панели (по горизонтали и вертикали) */
.auth-hero-body{margin:auto;width:100%;max-width:800px}
/* Наклон Ивана: --tx/--ty от -1 до 1 ставит auth.js по положению курсора (на телефоне и без курсора — 0) */
.auth-hero-head{display:flex;align-items:flex-end;gap:24px;perspective:900px;--tx:0;--ty:0}
.auth-hero h1{font-family:'Unbounded','Onest',sans-serif;font-size:clamp(30px,min(3.6vw,6.2vh),56px);line-height:1.08;font-weight:600;letter-spacing:-.035em}
.auth-hero h1 span{color:var(--side-accent)}
.auth-lead{margin-top:16px;font-size:19px;line-height:1.5;color:var(--side-text);max-width:620px}
/* Иван: покачивается вверх-вниз, наклоняется за курсором, под ним тень на «полу» и красное свечение сзади */
.auth-ivan-3d{position:relative;flex:none;width:136px;height:190px;transform:rotateY(calc(var(--tx) * 16deg)) rotateX(calc(var(--ty) * -10deg));transition:transform .35s ease-out}
.auth-ivan-3d::before{content:'';position:absolute;left:50%;top:44%;width:190px;height:190px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(237,19,28,.42),rgba(237,19,28,0) 68%);pointer-events:none}
.auth-ivan-3d::after{content:'';position:absolute;left:50%;bottom:-8px;width:112px;height:16px;margin-left:-56px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.75),rgba(0,0,0,0) 70%);animation:ivanShadow 3.6s ease-in-out infinite}
/* Кадр ролика квадратный и с запасом под машущую лапу — картинка шире места под неё */
.auth-ivan{position:absolute;left:50%;bottom:0;display:block;width:206px;height:206px;margin-left:-103px;object-fit:contain;object-position:bottom center;
  filter:drop-shadow(calc(var(--tx) * -6px) 4px 0 rgba(0,0,0,.35)) drop-shadow(0 18px 22px rgba(0,0,0,.55));animation:ivanFloat 3.6s ease-in-out infinite}
@keyframes ivanFloat{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-12px) rotate(1.5deg)}}
@keyframes ivanShadow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.78);opacity:.55}}
@media (prefers-reduced-motion: reduce){.auth-ivan,.auth-ivan-3d::after{animation:none}.auth-ivan-3d{transition:none}}
.auth-points{list-style:none;padding:0;display:flex;flex-direction:column;gap:16px;max-width:680px;margin-top:36px}
.auth-points li{display:flex;gap:16px;align-items:center;font-size:17px;line-height:1.45;color:var(--side-text)}
.auth-points .tick{flex-shrink:0;width:34px;height:34px;border-radius:11px;background:var(--side-3);display:grid;place-items:center;color:var(--side-accent)}
.auth-copy{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;font-size:13px;color:var(--side-muted)}
.auth-copy a{color:var(--side-text);text-decoration:underline;text-underline-offset:3px;padding:12px 0}
.auth-copy a:hover{color:var(--side-fg)}

/* «Как это работает»: сообщение боту → карточка задачи на сайте → напоминание. Цикл 8 с. */
.how{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;margin-top:36px;max-width:800px}
.how-panel{border-radius:20px;padding:16px;min-height:200px;display:flex;flex-direction:column;gap:10px}
.how-tg{background:var(--side-2);border:1px solid var(--side-3)}
.how-site{background:#FFFFFF;color:#1C1C1C}
.how-head{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--side-muted);padding-bottom:8px;border-bottom:1px solid var(--side-3)}
.how-head-site{color:#5C5C5C;border-color:#E3E3E3}
.how-ava{width:28px;height:28px;border-radius:50%;background:#229ED9;color:#FFFFFF;display:grid;place-items:center}
.how-dot{width:10px;height:10px;border-radius:3px;background:#ED131C}
.how-msg{max-width:92%;padding:10px 13px;border-radius:16px;font-size:15px;line-height:1.35}
.how-msg-me{align-self:flex-end;background:#2B5278;color:#FFFFFF;border-bottom-right-radius:4px;animation:howMe 8s ease infinite}
.how-msg-bot{align-self:flex-start;display:flex;align-items:center;gap:6px;background:var(--side-3);color:var(--side-text);border-bottom-left-radius:4px;animation:howBot 8s ease infinite}
.how-msg-bot svg{color:#6FD8A8}
.how-arrow{color:var(--side-muted);animation:howArrow 8s ease infinite}
.how-card{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:12px;border:1px solid #E3E3E3;background:#FFFFFF;animation:howCard 8s ease infinite}
.how-check{flex:none;width:20px;height:20px;border-radius:6px;border:2px solid #B45309;margin-top:1px}
.how-card-body{min-width:0;display:flex;flex-direction:column;gap:6px}
.how-card-text{font-size:15px;font-weight:600;line-height:1.3}
.how-chips{display:flex;flex-wrap:wrap;gap:4px}
.how-chip{font-size:13px;font-weight:600;padding:3px 8px;border-radius:7px;background:#F0F0F0;color:#1C1C1C;animation:howChip 8s ease infinite}
.how-chip-remind{background:#FDF1DF;color:#B45309;animation-name:howChip2}
.how-bell{align-self:flex-start;display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:#C20E16;background:#FDE8E9;padding:6px 10px;border-radius:9px;animation:howBell 8s ease infinite}
@keyframes howMe   {0%,4%{opacity:0;transform:translateY(8px) scale(.94)} 10%,88%{opacity:1;transform:none} 96%,100%{opacity:0}}
@keyframes howBot  {0%,18%{opacity:0;transform:translateY(8px)} 24%,88%{opacity:1;transform:none} 96%,100%{opacity:0}}
@keyframes howArrow{0%,26%{color:var(--side-muted);transform:none} 31%{color:var(--side-accent);transform:translateX(5px)} 38%,100%{color:var(--side-muted);transform:none}}
@keyframes howCard {0%,32%{opacity:0;transform:translateX(-14px) scale(.96)} 40%{opacity:1;transform:none;box-shadow:0 0 0 3px rgba(237,19,28,.35)} 56%,88%{opacity:1;box-shadow:0 0 0 0 rgba(237,19,28,0)} 96%,100%{opacity:0}}
@keyframes howChip {0%,44%{opacity:0;transform:scale(.7)} 50%,88%{opacity:1;transform:none} 96%,100%{opacity:0}}
@keyframes howChip2{0%,52%{opacity:0;transform:scale(.7)} 58%,88%{opacity:1;transform:none} 96%,100%{opacity:0}}
@keyframes howBell {0%,62%{opacity:0;transform:translateY(6px)} 68%{opacity:1;transform:none} 71%{transform:rotate(-4deg)} 74%{transform:rotate(4deg)} 77%,88%{opacity:1;transform:none} 96%,100%{opacity:0}}
@media (max-width: 1100px) {
  .how{grid-template-columns:minmax(0,1fr)}
  .how-arrow{justify-self:center;transform:rotate(90deg)}
  .how-arrow{animation:none}
  .how-panel{min-height:0}
}
.auth-side{flex:1 1 420px;display:grid;place-items:center;padding:32px 8px}
.auth-card{width:100%;max-width:400px}
.auth-logo{display:none;align-items:center;gap:12px;margin-bottom:28px}
.auth-title{font-family:'Unbounded','Onest',sans-serif;font-size:28px;font-weight:600;letter-spacing:-.03em;margin-bottom:8px}
.auth-sub{font-size:15px;color:var(--fg-muted);margin-bottom:28px;line-height:1.5}
.auth-field{margin-bottom:16px;display:flex;flex-direction:column;gap:8px}
.auth-label{font-size:13px;font-weight:600;color:var(--fg)}
.auth-label small{font-weight:400;color:var(--fg-muted);font-size:12px}
.auth-input{width:100%;height:52px;padding:0 16px;border-radius:14px;border:1px solid var(--border);background:var(--surface);font-size:15px;outline:none;transition:border-color .15s,box-shadow .15s}
.auth-input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.auth-input::placeholder{color:var(--fg-dim)}
.auth-btn{width:100%;height:54px;border:0;border-radius:14px;background:var(--accent);color:var(--on-accent);font-size:15px;font-weight:600;margin-top:8px;transition:background .15s}
.auth-btn:hover{background:var(--accent-hover)}
.auth-btn:disabled{opacity:.6;cursor:not-allowed}
.auth-switch{text-align:center;margin-top:16px;font-size:14px;color:var(--fg-muted)}
.auth-switch button{background:none;border:0;color:var(--accent-ink);font-weight:600;padding:4px 2px;text-decoration:underline;text-underline-offset:3px}
.auth-forgot{display:flex;justify-content:flex-end;margin:-8px 0 4px}
.auth-forgot button{background:none;border:0;color:var(--fg-muted);font-size:14px;font-weight:600;min-height:44px;padding:0 2px;text-decoration:underline;text-underline-offset:3px}
.auth-forgot button:hover{color:var(--accent-ink)}
.auth-tg{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:54px;border:0;border-radius:14px;background:var(--btn-2);color:var(--fg);font-size:15px;font-weight:600;transition:background .15s,transform .1s}
.auth-tg:hover{background:var(--btn-2-hover)}
.auth-tg:active,.auth-btn:active{transform:scale(.98)}
.auth-tg svg{color:#229ED9;flex-shrink:0}
.auth-or{display:flex;align-items:center;gap:12px;margin:20px 0;font-size:13px;color:var(--fg-muted)}
.auth-or::before,.auth-or::after{content:'';flex:1;height:1px;background:var(--border)}
.auth-tg:disabled{opacity:.6;cursor:not-allowed}
.auth-error{background:var(--b-urgent);border:1px solid var(--c-urgent);border-radius:12px;padding:10px 14px;font-size:14px;color:var(--c-urgent);margin-bottom:16px;display:none}
.auth-error.visible{display:block}
/* Кнопка «показать пароль» внутри поля (ставит js/auth.js) */
.auth-pass{position:relative}
/* Свой «глаз» уже есть — встроенный в Edge и старый IE прячем, иначе их два */
.auth-pass input::-ms-reveal,.auth-pass input::-ms-clear{display:none}
.auth-pass .auth-input{padding-right:56px}
.auth-eye{position:absolute;top:4px;right:4px;width:44px;height:44px;border:0;border-radius:10px;background:none;color:var(--fg-muted);display:grid;place-items:center;transition:color .15s,background .15s}
.auth-eye:hover,.auth-eye[aria-pressed="true"]{color:var(--accent-ink);background:var(--accent-soft)}
/* Ссылка на пользовательское соглашение */
.auth-legal{margin-top:14px;text-align:center;font-size:13px;line-height:1.5;color:var(--fg-muted)}
.auth-legal a{color:var(--accent-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.auth-docs{display:flex;flex-wrap:wrap;justify-content:center;gap:0 14px;margin-top:4px}
.auth-docs a{display:inline-flex;align-items:center;min-height:44px;font-size:13px;font-weight:600;color:var(--fg-muted);text-decoration:underline;text-underline-offset:3px}
.auth-docs a:hover{color:var(--accent-ink)}
/* Галочки согласий в регистрации: квадрат 22px, вся строка — цель нажатия ≥44px */
.auth-consents{border:0;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:4px}
.auth-check{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--surface);font-size:14px;line-height:1.45;color:var(--fg);cursor:pointer}
.auth-check input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--accent);cursor:pointer}
.auth-check a{color:var(--accent-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.auth-check:has(input[aria-invalid="true"]){border-color:var(--c-urgent);background:var(--b-urgent)}/* Короткое УТП над формой — только на телефоне, где .auth-hero скрыт */
.auth-pitch{display:none;align-items:center;gap:14px;background:var(--side);color:var(--side-fg);border-radius:18px;padding:12px 16px 12px 10px;margin-bottom:24px}
/* Иван с лампочкой: в idea.webp лампочка отделена от пальца прозрачной щелью (левый верхний угол,
   до 21.5% ширины и 28.7% высоты картинки 209×300). Нижняя копия картинки показывает всё, кроме этого угла,
   верхняя — только его. Лампочка плавно ходит вверх-вниз и светится, Иван чуть покачивается. */
.auth-pitch-ivan{position:relative;flex:none;width:64px;height:64px;transform-origin:50% 100%;animation:ivanSway 2.8s ease-in-out infinite}
.auth-pitch-ivan img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain}
/* Свечение за лампочкой */
@keyframes ivanSway{0%,100%{transform:rotate(0)} 50%{transform:rotate(-2deg)}}
@media (prefers-reduced-motion: reduce) {
  .auth-pitch-ivan{animation:none}
}
.auth-pitch-title{font-family:'Unbounded','Onest',sans-serif;font-size:15px;font-weight:600;line-height:1.25;letter-spacing:-.02em}
.auth-pitch-text{margin-top:4px;font-size:13px;line-height:1.45;color:var(--side-text)}
@media (max-width: 860px) {
  .auth-pitch{display:flex}
  .auth-logo{margin-bottom:16px}
}

/* Заставка с Иваном (js/onboarding.js): один раз за вкладку, клики не перехватывает */
.splash{position:fixed;inset:0;z-index:300;background:var(--side);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;pointer-events:none;animation:splashOut 1.4s ease forwards}
.splash-stage{position:relative;width:120px;height:166px}
.splash-ivan{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom;opacity:0;transform-origin:50% 100%}
.splash-ivan.p1{animation:ivanP1 1.4s ease-out forwards}
.splash-ivan.p2{animation:ivanP2 1.4s ease-out forwards}
.splash-ivan.p3{animation:ivanP3 1.4s ease-out forwards}
.splash-shadow{position:absolute;left:50%;bottom:-8px;width:84px;height:12px;margin-left:-42px;border-radius:50%;background:rgba(0,0,0,.45);animation:ivanShadow 1.4s ease-out forwards}
.splash-name{font-family:'Unbounded','Onest',sans-serif;font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--side-fg);opacity:0;animation:splashName 1.4s ease forwards}
.splash-name span{font-family:'Onest',sans-serif;font-size:12px;font-weight:700;color:var(--side-accent);letter-spacing:.08em;margin-left:4px}
@keyframes splashOut {0%{opacity:0} 6%,80%{opacity:1} 100%{opacity:0;visibility:hidden}}
@keyframes ivanP1 {0%{opacity:0;transform:translateY(40px) scale(.7)} 14%{opacity:1;transform:translateY(-16px) scale(1.04)} 22%,30%{opacity:1;transform:none} 34%,100%{opacity:0}}
@keyframes ivanP2 {0%,30%{opacity:0;transform:none} 34%{opacity:1;transform:translateY(-20px)} 44%,56%{opacity:1;transform:none} 60%,100%{opacity:0}}
@keyframes ivanP3 {0%,56%{opacity:0;transform:none} 60%{opacity:1;transform:translateY(-24px) scale(1.06)} 70%{transform:scale(.97,1.03)} 76%,100%{opacity:1;transform:none}}
@keyframes ivanShadow {0%{transform:scale(.4);opacity:0} 14%{transform:scale(.7)} 22%,30%{transform:none;opacity:1} 34%{transform:scale(.75)} 44%,56%{transform:none} 60%{transform:scale(.7)} 76%,100%{transform:none;opacity:1}}
@keyframes splashName {0%,18%{opacity:0;transform:translateY(8px)} 30%,100%{opacity:1;transform:none}}

/* Окно «Спасибо за регистрацию» */
.welcome-backdrop{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:16px;overflow-y:auto;animation:welcomeFade .2s ease}
.welcome{width:100%;max-width:440px;background:var(--surface);color:var(--fg);border-radius:22px;padding:28px 24px 24px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.35);animation:welcomeIn .3s cubic-bezier(.2,.9,.3,1.2)}
.welcome-ivan{display:block;width:96px;height:132px;object-fit:contain;margin:-8px auto 8px}
.welcome-title{font-family:'Unbounded','Onest',sans-serif;font-size:22px;font-weight:600;letter-spacing:-.03em;margin-bottom:10px}
.welcome-text{font-size:15px;line-height:1.5;color:var(--fg-muted)}
.welcome-note{margin-top:14px;font-size:14px;line-height:1.5;text-align:left;background:var(--surface-2);border-radius:14px;padding:12px 14px}
.welcome-steps{list-style:none;padding:0;margin-top:16px;display:flex;flex-direction:column;gap:10px;text-align:left}
.welcome-steps li{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.45}
.welcome-steps span{flex:none;width:26px;height:26px;border-radius:8px;background:var(--accent-soft);color:var(--accent-ink);font-weight:700;font-size:13px;display:grid;place-items:center}
.welcome-ok{margin-top:20px}
/* Окно согласий после входа: поверх всплывающих полей, почти непрозрачное — планер под ним не читается */
.consent-gate{z-index:210;background:rgba(0,0,0,.82)}
.consent-gate .welcome{text-align:left}
.consent-gate .welcome-ivan,.consent-gate .welcome-title,.consent-gate .welcome-text{text-align:center}
.gate-checks{margin:18px 0 6px}
.consent-gate .auth-error{margin:14px 0 0}
.gate-logout{display:block;width:100%;min-height:44px;margin-top:8px;border:0;background:transparent;color:var(--fg-muted);font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.gate-logout:hover{color:var(--fg)}
@keyframes welcomeFade{from{opacity:0}}
@keyframes welcomeIn{from{opacity:0;transform:translateY(16px) scale(.96)}}

@media (prefers-reduced-motion: reduce) {
  .how *,.how-arrow,.welcome-backdrop,.welcome{animation:none !important}
  .splash{display:none}
}

/* ─── MOBILE ─── */
@media (max-width: 860px) {
  .app{flex-direction:column}
  .sidebar{
    width:auto;height:auto;position:sticky;top:0;z-index:20;flex-direction:row;align-items:center;gap:8px;
    padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;overflow:visible;
  }
  /* Встроенный браузер Telegram на iPhone прилепляет шапку ниже своей прозрачной панели с адресом,
     и список прокручивается под этой панелью. Тёмная полоса над шапкой закрывает его. */
  .sidebar::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:240px;background:var(--side);pointer-events:none}
  .brand-icon{width:32px;height:32px}
  .side-brand{padding:0;flex:1}
  .side-projects,.side-spacer{display:none}
  .side-foot{flex-direction:row;align-items:center;gap:8px;padding:0}
  .sync-indicator{width:28px;padding:0;justify-content:center;align-self:center}
  .sync-indicator #sync-label{display:none}
  .btn-logout{flex:none;padding:0 12px}
  .btn-avatar{order:5;width:44px;min-height:44px;padding:0;border:0;background:transparent;border-radius:50%}
  .btn-avatar .av-who{display:none}
  .btn-avatar .av{width:40px;height:40px}
  /* В шапке телефона мало места: «Выйти» переезжает в окно аватара */
  .btn-avatar:not([hidden]) ~ .side-actions .btn-logout{display:none}
  .tabs-nav{
    position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:30;
    flex-direction:row;gap:4px;padding:6px;background:var(--side);border-radius:22px;box-shadow:0 10px 30px rgba(var(--shade),.25);
  }
  .tab-btn{flex:1;flex-direction:column;justify-content:center;gap:3px;min-height:56px;font-size:11px;border-radius:16px;padding:0 4px}
  .tab-btn .tab-label{flex:none}
  .tab-btn.active{background:var(--side-fg);color:var(--side)}
  .tab-count{display:none}
  /* Подложка под нижней панелью: список уходит под неё плавно, без обрезанных карточек */
  .app::after{content:'';position:fixed;left:0;right:0;bottom:0;z-index:15;height:calc(96px + env(safe-area-inset-bottom,0px));background:linear-gradient(to bottom,transparent,var(--bg) 60%);pointer-events:none}
  .main{padding:20px 16px calc(110px + env(safe-area-inset-bottom,0px))}
  .main-inner{gap:20px}
  .progress-card{flex:1 1 100%}
  /* Компактный Иван: одна строка с фразой, серией и прогрессом */
  .mascot-card{padding:8px 14px 12px 6px;gap:8px}
  .mascot-img{width:52px;height:72px}
  .mascot-wave{width:72px;height:72px;margin-left:-36px}
  .mascot-body{gap:6px}
  .mascot-say{font-size:13px}
  .streak{height:24px;font-size:11px}
  .mascot-body .progress-label{font-size:12px}
  /* Форма: сначала только поле, параметры — по кнопке */
  .qa-more{display:grid}
  .quick-add{padding:6px 6px 6px}
  .quick-add.open{padding-bottom:14px}
  .quick-add:not(.open) .add-options{display:none}
  .quick-input{font-size:16px;height:48px;padding:12px 10px;line-height:22px}
  .btn-add{height:44px;padding:0 14px}
  .filter-row{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
  .filter-row::-webkit-scrollbar{display:none}
  .filter-chip{flex-shrink:0}
  .tab-btn .tl-full{display:none}
  .tab-btn .tl-short{display:inline}
  /* Поиск свёрнут в лупу слева от фильтров; пока в нём ищут — на всю ширину, фильтры строкой ниже */
  .feed-tools{flex-wrap:nowrap;gap:6px}
  .feed-tools .filter-row{margin:0 -16px 0 0;padding:0 16px 0 0}
  .search-box{flex:0 0 44px;min-width:44px;height:40px}
  .search-input{padding:9px 0 9px 44px;font-size:16px}
  .search-input::placeholder{color:transparent}
  .feed-tools.searching{flex-wrap:wrap}
  .feed-tools.searching .search-box{flex:1 1 100%}
  .feed-tools.searching .search-input{padding-right:40px}
  .feed-tools.searching .search-input::placeholder{color:var(--fg-muted)}
  .feed-tools.searching .filter-row{flex:1 1 100%;margin:0 -16px;padding:0 16px}
  .task-actions{opacity:1}
  /* На телефоне месяц стоит над списком и по умолчанию свёрнут до одной недели */
  .tasks-layout{gap:20px}
  .tasks-aside{display:contents}
  .month-card{order:-1;flex:1 1 100%;min-width:0}
  .mc-toggle{display:inline-flex;align-items:center;gap:6px}
  .month-card:not(.expanded) .mc-week:not(.cur){display:none}
  .mc-hint{display:none}
  .week-card{flex:1 1 100%;min-width:0}
  .cal-day{min-height:52px;align-items:center;padding:6px 2px}
  .cal-ev,.cal-more{display:none}
  .cal-dots{display:flex}
  .cal-dow{text-align:center;padding:6px 0}
  .auth-hero{display:none}
  .auth-logo{display:flex}
  .auth-overlay{padding:16px}
}

/* ─── BACKUP MENU ─── */
.backup-opt{min-height:56px;gap:12px}
.backup-opt .opt-text{white-space:normal}
.backup-opt small{display:block;margin-top:2px;font-size:12px;font-weight:400;color:var(--fg-muted)}
.backup-ico{display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;border-radius:10px;background:var(--surface-2);color:var(--fg)}