/* ============ tokens ============ */
:root{
  --w1:#5b6cff; --w2:#9b5cf6; --w3:#f2643f; --w4:#f4849a; --w5:#2ea8f5;

  --bg:#0c0e15;
  --bg-2:#11141d;
  --panel:rgba(255,255,255,.038);
  --panel-2:rgba(255,255,255,.055);
  --line:rgba(255,255,255,.085);
  --line-strong:rgba(255,255,255,.16);
  --txt:#eef1f8;
  --txt-2:#a3abbf;
  --txt-3:#8b93ab;
  --shadow:0 24px 60px -28px rgba(0,0,0,.85);
  --radius:18px;
  --day-w:34px;
  --col-name:250px;
  --col-goal:52px;
  --col-num:66px;
  --col-pct:54px;
  --col-bar:140px;
  --ease:cubic-bezier(.22,1,.36,1);
}
:root[data-theme="light"]{
  --bg:#f4f5fa;
  --bg-2:#ffffff;
  --panel:rgba(15,20,40,.028);
  --panel-2:rgba(15,20,40,.05);
  --line:rgba(15,20,40,.09);
  --line-strong:rgba(15,20,40,.18);
  --txt:#161a25;
  --txt-2:#5a6377;
  --txt-3:#68707f;
  --shadow:0 24px 50px -30px rgba(20,25,50,.45);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  background:var(--bg);
  color:var(--txt);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;          /* не hidden: hidden ломает sticky-шапку в Safari */
}
button,input{font-family:inherit;color:inherit}
body{-webkit-tap-highlight-color:transparent}
h1,h2,p{margin:0}

/* В режиме веб-приложения строка состояния и домашний индикатор перекрывают
   края экрана: env() может вернуть 0, поэтому берём максимум с базовым отступом. */
@media (display-mode:standalone){
  .topbar{padding-top:max(16px, calc(12px + env(safe-area-inset-top)))}
  .wrap{padding-bottom:max(28px, calc(20px + env(safe-area-inset-bottom)))}
  .toast-host{padding-bottom:max(28px, calc(16px + env(safe-area-inset-bottom)))}
}

/* subtle depth, no floating blobs */
.aurora{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.55}
.aurora span{position:absolute;display:block;border-radius:50%;filter:blur(120px)}
.aurora span:nth-child(1){width:640px;height:640px;left:-180px;top:-260px;background:radial-gradient(circle,color-mix(in srgb,var(--w1) 40%,transparent),transparent 65%)}
.aurora span:nth-child(2){width:520px;height:520px;right:-160px;top:-180px;background:radial-gradient(circle,color-mix(in srgb,var(--w3) 26%,transparent),transparent 65%)}
.aurora span:nth-child(3){width:760px;height:420px;left:35%;bottom:-320px;background:radial-gradient(circle,color-mix(in srgb,var(--w5) 22%,transparent),transparent 65%)}
:root[data-theme="light"] .aurora{opacity:.35}

#fx{position:fixed;inset:0;pointer-events:none;z-index:60;display:none}

/* ============ topbar ============ */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  padding:max(16px,calc(16px + env(safe-area-inset-top))) max(28px,env(safe-area-inset-right)) 16px max(28px,env(safe-area-inset-left));
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:13px;margin-right:auto}
.logo{
  width:40px;height:40px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--w1),var(--w2) 45%,var(--w3));
  color:#fff;font-weight:800;font-size:19px;
  box-shadow:0 10px 24px -10px var(--w2);
}
.brand h1{font-size:16px;font-weight:750;letter-spacing:-.02em}
.brand p{font-size:11.5px;color:var(--txt-3);margin-top:2px}

.month-nav{display:flex;align-items:center;gap:8px}
.month-label{min-width:132px;text-align:center;line-height:1.15}
.month-label span{display:block;font-weight:700;font-size:14.5px;text-transform:capitalize}
.month-label small{color:var(--txt-3);font-size:11px;font-variant-numeric:tabular-nums}

.tools{display:flex;align-items:center;gap:8px}

.sync{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;
  border:1px solid var(--line);border-radius:11px;background:var(--panel);
  font-size:11.5px;font-weight:650;color:var(--txt-2);white-space:nowrap;
}
.sync i{width:7px;height:7px;border-radius:50%;background:#22c55e;flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,#22c55e 22%,transparent)}
.sync[data-mode="wait"] i{background:#f59e0b;box-shadow:0 0 0 3px color-mix(in srgb,#f59e0b 22%,transparent);animation:pulse 1.1s infinite}
.sync[data-mode="off"] i{background:#ef4444;box-shadow:0 0 0 3px color-mix(in srgb,#ef4444 22%,transparent)}
@keyframes pulse{50%{opacity:.3}}

.icon-btn,.ghost-btn,.primary-btn{
  border:1px solid var(--line);background:var(--panel);
  border-radius:11px;cursor:pointer;font-weight:600;font-size:12.5px;
  transition:.18s var(--ease);
}
.icon-btn{width:34px;height:34px;display:grid;place-items:center;font-size:16px;line-height:1}
.ghost-btn{height:34px;padding:0 13px}
.icon-btn:hover,.ghost-btn:hover{background:var(--panel-2);border-color:var(--line-strong);transform:translateY(-1px)}
.ghost-btn.danger{color:#ff7a7a;border-color:rgba(255,122,122,.3)}
.ghost-btn.danger:hover{background:rgba(255,122,122,.12)}
.primary-btn{
  height:34px;padding:0 16px;border:0;color:#fff;
  background:linear-gradient(135deg,var(--w1),var(--w2));
  box-shadow:0 10px 22px -12px var(--w2);
}
.primary-btn:hover{transform:translateY(-1px);box-shadow:0 14px 26px -12px var(--w2)}
button:active{transform:translateY(0) scale(.98)}
:focus-visible{outline:2px solid var(--w1);outline-offset:2px}

/* ============ layout ============ */
.wrap{position:relative;z-index:1;max-width:1720px;margin:0 auto;
  padding:24px max(28px,env(safe-area-inset-right)) max(60px,calc(24px + env(safe-area-inset-bottom))) max(28px,env(safe-area-inset-left))}

.cards{display:grid;grid-template-columns:1.35fr repeat(4,1fr);gap:14px;margin-bottom:18px}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow);backdrop-filter:blur(14px);
}
.label{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);font-weight:700}

.hero{display:flex;align-items:center;gap:20px}
.hero-ring{position:relative;width:118px;height:118px;flex:none}
.hero-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:var(--panel-2);stroke-width:9}
.ring-fg{
  fill:none;stroke:url(#ringGrad);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:326.7;stroke-dashoffset:326.7;
  transition:stroke-dashoffset .8s var(--ease);
}
.hero-num{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:23px;font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums;
}
.hero-num i{font-size:12px;font-style:normal;color:var(--txt-3);margin-left:1px;align-self:center}
.hero-meta strong{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;margin:6px 0 4px;font-variant-numeric:tabular-nums}
.hero-meta p{font-size:12px;color:var(--txt-3)}

.kpi{display:flex;align-items:center;gap:14px}
.kpi-ico{font-size:24px;filter:saturate(1.1)}
.kpi strong{display:block;font-size:24px;font-weight:800;letter-spacing:-.03em;margin:5px 0 2px;font-variant-numeric:tabular-nums}
.kpi small{font-size:11px;color:var(--txt-3)}

/* ============ board ============ */
.board-shell{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);backdrop-filter:blur(14px);
  overflow:clip;                      /* clip, а не hidden: не создаёт скролл-контейнер */
}
.board-scroll{overflow:auto;overscroll-behavior:none}
.board{
  --cols:31;
  display:grid;
  grid-template-columns:
    var(--col-name) var(--col-goal)
    repeat(var(--cols), var(--day-w))
    var(--col-num) var(--col-num) var(--col-pct) var(--col-bar);
  min-width:max-content;
  align-items:stretch;
}
.board > *{display:flex;align-items:center;min-width:0}

/* Закрепление задаём через потомка .board — специфичность 0-2-0,
   чтобы одиночные правила вроде .dnum{position:relative} его не перебивали. */
.board > .c-name{position:sticky;left:0;z-index:3}
.board > .c-sub{position:sticky;left:var(--col-name);z-index:3}
.board > .sum-bar {position:sticky;right:0;z-index:3}
.board > .sum-pct {position:sticky;right:var(--col-bar);z-index:3}
.board > .sum-left{position:sticky;right:calc(var(--col-bar) + var(--col-pct));z-index:3}
.board > .sum-done{position:sticky;right:calc(var(--col-bar) + var(--col-pct) + var(--col-num));z-index:3}
.sum-done,.sum-left,.sum-pct,.sum-bar{background-color:var(--bg-2)}
.sum-done{border-left:1px solid var(--line)}
:root[data-theme="dark"] .sum-done,
:root[data-theme="dark"] .sum-left,
:root[data-theme="dark"] .sum-pct,
:root[data-theme="dark"] .sum-bar{background-color:#141826}
.hab:hover .sum-done,.hab:hover .sum-left,
.hab:hover .sum-pct,.hab:hover .sum-bar{background-color:color-mix(in srgb,var(--bg-2) 92%,var(--w1))}

/* шапка таблицы закреплена сверху внутри области прокрутки */
.board > .hcell{position:sticky;top:0;z-index:4;background-color:var(--bg-2)}
/* Пока список помещается по высоте, липкость шапке не нужна: две сотни
   закреплённых ячеек в одной строке заметно тормозят прокрутку в Safari. */
.board-shell:not(.vscroll) .board > .dayhead.hcell{position:static}
:root[data-theme="dark"] .board > .hcell{background-color:#141826}
.board > .hcell.c-name,.board > .hcell.c-sub,
.board > .hcell.sum-done,.board > .hcell.sum-left,
.board > .hcell.sum-pct,.board > .hcell.sum-bar{z-index:6}

/* полоса месяцев */
.mrow{height:30px;align-items:center;padding-left:2px}
.month{
  border-left:1px solid var(--line-strong);
}
/* подписи месяца и недели не уезжают за край, пока их отрезок в кадре */
.month > span{
  display:inline-block;
  position:sticky;left:calc(var(--col-name) + var(--col-goal) + 10px);
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt-2);white-space:nowrap;padding-left:8px;
}
.c-name{
  padding:0 14px;gap:10px;
  background-color:var(--bg-2);
}
.c-sub{
  background-color:var(--bg-2);
  border-right:1px solid var(--line);
}
.sub-edge{border-right:1px solid var(--line)}
:root[data-theme="dark"] .c-name,
:root[data-theme="dark"] .c-sub{background-color:#141826}
.c-num{justify-content:center;font-variant-numeric:tabular-nums}
.rowline{border-bottom:1px solid var(--line)}

/* week band */
.wk{
  white-space:nowrap;
  height:36px;align-items:flex-end;padding:0 0 6px 2px;
  font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.wk > span{display:inline-block}
@media (max-width:560px){
  .wk > span{position:sticky;left:calc(var(--col-name) + var(--col-goal) + 10px)}
}
.wk[data-w="1"]{color:var(--w1)} .wk[data-w="2"]{color:var(--w2)}
.wk[data-w="3"]{color:var(--w3)} .wk[data-w="4"]{color:var(--w4)} .wk[data-w="5"]{color:var(--w5)}

/* chart */
.chart-cell{height:120px;align-items:flex-end;justify-content:center;padding:0 3px}
.bar{
  width:100%;max-width:22px;border-radius:5px 5px 2px 2px;min-height:3px;
  transition:height .55s var(--ease),opacity .3s;
  opacity:.92;
}
.chart-cell:hover .bar{opacity:1;filter:brightness(1.15)}
.chart-side{height:120px;flex-direction:column;align-items:flex-start;justify-content:center;padding-left:14px;gap:2px}
.chart-side .big{font-size:13px;font-weight:700;color:var(--txt-2)}

/* day numbers */
.dnum{
  height:30px;justify-content:center;font-size:11.5px;font-weight:700;color:var(--txt-2);
  font-variant-numeric:tabular-nums;position:relative;
}
.dnum.weekend{color:var(--txt-3)}
.dnum.today{color:var(--txt)}
.dnum.today::after{
  content:"";position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--w3);
}

/* stat rows */
.srow{height:26px}
.c-name.srow{justify-content:flex-end;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--txt-3);padding-right:14px}
.svalue{justify-content:center;font-size:11.5px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--txt-2)}
.svalue.muted{color:var(--txt-3);font-weight:500}
.svalue.zero{opacity:.35}

/* weekly progress */
.wkbar{
  height:52px;flex-direction:column;align-items:stretch;justify-content:center;
  gap:4px;padding:0 4px 0 2px;
}
.c-name.wkbar-label{height:auto;align-self:stretch}   /* строка недель выше .srow — тянем фон на всю высоту */
.wkcount{
  text-align:center;font-size:10.5px;font-weight:750;color:var(--txt-2);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.wkbar-inner{
  position:relative;width:100%;height:20px;border-radius:7px;
  background:var(--panel-2);overflow:hidden;
}
.wkbar-fill{
  position:absolute;inset:0 auto 0 0;width:0;border-radius:7px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  color:#fff;font-size:10px;font-weight:800;font-variant-numeric:tabular-nums;
  transition:width .7s var(--ease);
}
.wkbar-out{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:750;color:var(--txt-3);font-variant-numeric:tabular-nums;
}

/* head row */
.hrow{height:46px;border-bottom:1px solid var(--line-strong);border-top:1px solid var(--line)}
.dayhead{
  flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font-variant-numeric:tabular-nums;
}
.dayhead .wd{font-size:9px;font-weight:700;letter-spacing:.04em;color:var(--txt-3);text-transform:uppercase}
.dayhead .dd{font-size:12.5px;font-weight:750;color:var(--txt-2)}
.dayhead.weekend .dd{color:var(--txt-3)}
.dayhead.today .dd{color:var(--txt)}
.dayhead[data-w="1"] .dd{color:var(--w1)} .dayhead[data-w="2"] .dd{color:var(--w2)}
.dayhead[data-w="3"] .dd{color:var(--w3)} .dayhead[data-w="4"] .dd{color:var(--w4)} .dayhead[data-w="5"] .dd{color:var(--w5)}
.weekend-col{background:color-mix(in srgb,var(--txt-3) 4%,transparent)}
.chart-cell.weekend-col{background:color-mix(in srgb,var(--txt-3) 2.5%,transparent)}
.dayhead.hl .dd{color:var(--txt)}
.hrow,.hrow > *{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:var(--txt-3)}
.hrow .c-num{color:var(--txt-2);font-size:11.5px;letter-spacing:0}
.hrow .c-num[data-w="1"]{color:var(--w1)} .hrow .c-num[data-w="2"]{color:var(--w2)}
.hrow .c-num[data-w="3"]{color:var(--w3)} .hrow .c-num[data-w="4"]{color:var(--w4)} .hrow .c-num[data-w="5"]{color:var(--w5)}
.hrow .c-center{justify-content:center;text-align:center;line-height:1.1}

/* habit rows */
.hab{height:38px;transition:background .15s}
.hab:hover{background:var(--panel)}
.hab:hover .c-name,
.hab:hover .c-sub{background-color:color-mix(in srgb,var(--bg-2) 92%,var(--w1))}
.hab .c-name{font-weight:600;font-size:13px;cursor:pointer}
.hab .emo{font-size:15px;width:20px;text-align:center;flex:none}
.hab .nmwrap{
  flex:1 1 auto;min-width:0;                 /* ширина от боковой панели, а не от длины названия */
  display:flex;flex-direction:column;justify-content:center;gap:3px;
}
.hab .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nmline{display:flex;align-items:baseline;gap:8px;min-width:0}
.nmline .nm{flex:1 1 auto}
.mini{display:none;align-items:center;gap:4px;width:100%}
.mini-in{flex:1 1 auto;height:5px;border-radius:99px;background:var(--panel-2);overflow:hidden}
.mini-fill{height:100%;width:0;border-radius:99px;transition:width .5s var(--ease);
  background:linear-gradient(90deg,var(--w1),var(--w2))}
.hab.complete .mini-fill{background:linear-gradient(90deg,#22c55e,#84cc16)}
.mini-txt{
  display:none;                                          /* в веб-версии счёт есть в правой сводке */
  flex:none;width:42px;text-align:right;                 /* ровно под «999/999», без лишних полей */
  font-size:9.5px;font-weight:700;color:var(--txt-3);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.bico{font-size:13px;line-height:1}
.hab .streak{
  margin-left:auto;font-size:10.5px;font-weight:700;color:var(--w3);flex:none;
  opacity:.9;font-variant-numeric:tabular-nums;
}
.hab .acts{position:absolute;right:10px;display:flex;gap:3px;opacity:0;transition:.15s;padding-left:10px;background:inherit}
.hab:hover .acts{opacity:1}
.acts button{
  width:20px;height:20px;border-radius:6px;border:1px solid var(--line);
  background:var(--panel-2);cursor:pointer;font-size:10px;display:grid;place-items:center;color:var(--txt-2);
}
.acts button:hover{color:var(--txt);border-color:var(--line-strong)}
.goal{justify-content:center;font-size:12px;font-weight:700;color:var(--txt-2);font-variant-numeric:tabular-nums}

/* checkbox cell */
.cell{justify-content:center;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.box{
  width:20px;height:20px;border-radius:6px;border:1.8px solid currentColor;
  opacity:.5;position:relative;transition:.16s var(--ease);
}
.cell:hover .box{opacity:.9;transform:scale(1.14)}
.cell.on .box{opacity:1;background:currentColor;box-shadow:0 4px 10px -4px currentColor}
.box::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid var(--bg-2);border-width:0 2.2px 2.2px 0;transform:rotate(45deg) scale(0);
  transition:transform .2s var(--ease);
}
:root[data-theme="dark"] .box::after{border-color:#0f1220}
.cell.on .box::after{transform:rotate(45deg) scale(1)}
.cell.future .box{opacity:.22}
.cell[data-w="1"]{color:var(--w1)} .cell[data-w="2"]{color:var(--w2)}
.cell[data-w="3"]{color:var(--w3)} .cell[data-w="4"]{color:var(--w4)} .cell[data-w="5"]{color:var(--w5)}
.col-today{background:color-mix(in srgb,var(--w3) 9%,transparent)}
.cell.hl .box{opacity:.8}
.cell.hl.on .box{opacity:1}
.dnum.hl,.c-num.hl{color:var(--txt)}
.chart-cell.hl .bar{filter:brightness(1.2)}

/* right summary */
.done,.left,.pct{justify-content:center;font-size:12.5px;font-weight:750;font-variant-numeric:tabular-nums}
.left{color:var(--txt-3);font-weight:600}
.pct{color:var(--txt-2)}
.pbar{padding:0 16px 0 6px}
.pbar-in{width:100%;height:8px;border-radius:99px;background:var(--panel-2);overflow:hidden}
.pbar-fill{height:100%;border-radius:99px;width:0;transition:width .7s var(--ease);background:linear-gradient(90deg,var(--w1),var(--w2))}
.hab.complete .pbar-fill{background:linear-gradient(90deg,#22c55e,#84cc16)}
.hab.complete .pct{color:#7ee08a}

.empty{
  grid-column:1/-1;padding:56px 24px;
  flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
}
.empty-ico{font-size:26px;color:var(--w2);margin-bottom:6px}
.empty-title{font-size:15px;font-weight:700;color:var(--txt)}
.empty-sub{font-size:12.5px;color:var(--txt-3);margin-bottom:14px}
.hint{margin-top:14px;text-align:center;color:var(--txt-3);font-size:11.5px}
kbd{
  border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:10.5px;
  background:var(--panel-2);font-family:inherit;
}

/* ============ вход ============ */
.auth-back{
  position:fixed;inset:0;height:100dvh;z-index:100;
  display:grid;place-items:center;background:var(--bg);
  padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right))
          max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
}
.auth-card{
  width:min(380px,100%);max-height:100%;overflow:auto;
  background:var(--bg-2);border:1px solid var(--line);border-radius:20px;
  padding:28px 24px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;
}
.auth-logo{
  width:46px;height:46px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--w1),var(--w2) 45%,var(--w3));
  color:#fff;font-weight:800;font-size:22px;margin-bottom:16px;
  box-shadow:0 12px 26px -12px var(--w2);
}
.auth-card h1{font-size:19px;font-weight:750;letter-spacing:-.02em}
.auth-sub{font-size:12.5px;color:var(--txt-3);margin:6px 0 20px;line-height:1.5}
.auth-card label{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);
  font-weight:700;margin-bottom:7px;
}
.auth-card input{
  height:44px;padding:0 13px;margin-bottom:14px;border-radius:11px;
  border:1px solid var(--line);background:var(--panel);font-size:16px;transition:.15s;
}
.auth-card input:focus{border-color:var(--w1);background:var(--panel-2);outline:none}
.auth-error{
  margin:0 0 12px;padding:9px 12px;border-radius:10px;font-size:12.5px;line-height:1.45;
  color:#ffb4b4;background:rgba(244,63,94,.13);border:1px solid rgba(244,63,94,.3);
}
.auth-submit{height:44px;margin-top:4px;font-size:14px}
.auth-submit[disabled]{opacity:.6;cursor:default}
.link-btn{
  margin-top:14px;background:none;border:0;cursor:pointer;
  font-size:12.5px;font-weight:650;color:var(--txt-2);text-decoration:underline;
  text-underline-offset:3px;padding:4px;
}
.link-btn:hover{color:var(--txt)}
.auth-note{margin-top:14px;font-size:11.5px;color:var(--txt-3);line-height:1.5}

/* ============ modal ============ */
.modal-back{
  position:fixed;inset:0;height:100dvh;z-index:70;display:grid;place-items:center;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right))
          max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  background:rgba(6,8,14,.6);backdrop-filter:blur(6px);animation:fade .18s ease;
}
.confirm-back{z-index:90}
.confirm{width:min(400px,92vw)}
.confirm-text{font-size:14px;line-height:1.5;margin:0}
.danger-solid{background:linear-gradient(135deg,#f43f5e,#e11d48);box-shadow:0 10px 22px -12px #e11d48}

.modal{
  width:min(440px,92vw);max-height:min(88vh,720px);overflow:auto;background:var(--bg-2);border:1px solid var(--line);
  border-radius:20px;padding:24px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7);
  animation:pop .24s var(--ease);
}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}}
.modal h2{font-size:17px;font-weight:750;margin-bottom:18px;letter-spacing:-.02em}
.field{margin-bottom:16px}
.field label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);font-weight:700;margin-bottom:7px}
.field input{
  width:100%;height:40px;padding:0 13px;border-radius:11px;
  border:1px solid var(--line);background:var(--panel);font-size:13.5px;transition:.15s;
}
.field input:focus{border-color:var(--w1);background:var(--panel-2);outline:none}
.order-row{display:flex;align-items:center;gap:8px}
.order-row .ghost-btn{height:34px}
.order-row .ghost-btn:disabled{opacity:.4;cursor:default;transform:none}
.order-pos{margin-left:auto;font-size:11.5px;color:var(--txt-3);font-variant-numeric:tabular-nums}

.goal-presets{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.goal-presets button{
  height:28px;padding:0 11px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel);font-size:12px;font-weight:650;cursor:pointer;transition:.15s var(--ease);
}
.goal-presets button:hover{background:var(--panel-2);border-color:var(--line-strong);transform:translateY(-1px)}
.goal-hint{margin-top:8px;font-size:11.5px;color:var(--txt-3);line-height:1.45}

.emoji-head{display:flex;gap:8px;margin-bottom:10px}
.emoji-input{width:52px!important;flex:none;text-align:center;font-size:19px!important}
.emoji-search{flex:1}
.emoji-row{
  max-height:212px;overflow-y:auto;padding-right:6px;
  border:1px solid var(--line);border-radius:12px;background:var(--bg-2);padding:10px 10px 12px;
}
.emoji-cat{
  font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--txt-3);
  font-weight:700;margin:10px 0 7px;position:sticky;top:-10px;
  background:var(--bg-2);padding:4px 0;
}
.emoji-cat:first-child{margin-top:0}
.emoji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:5px}
.emoji-row button{
  aspect-ratio:1;border-radius:10px;border:1px solid transparent;
  background:var(--panel-2);font-size:17px;cursor:pointer;transition:.13s var(--ease);
}
.emoji-row button:hover{transform:translateY(-2px) scale(1.08);border-color:var(--line-strong)}
.emoji-row button.sel{border-color:var(--w1);background:color-mix(in srgb,var(--w1) 22%,transparent)}
.modal-actions{display:flex;gap:8px;align-items:center;margin-top:22px}
.spacer{flex:1}

[hidden]{display:none!important}
.toast-host{
  display:none;                          /* пустой слой во весь экран мешал бы прокрутке */
  position:fixed;left:0;right:0;top:0;height:100dvh;z-index:80;
  align-items:flex-end;justify-content:center;
  padding:0 max(12px,env(safe-area-inset-right)) max(28px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  pointer-events:none;
}
.toast-host.on{display:flex}
.toast{
  pointer-events:auto;
  max-width:100%;padding:11px 18px;border-radius:12px;background:var(--bg-2);
  border:1px solid var(--line-strong);box-shadow:var(--shadow);
  font-size:12.5px;font-weight:600;animation:pop .2s var(--ease);
}

/* планшет и телефон: пальцу нужны цели покрупнее, hover не работает */
/* Плавность на любом сенсорном экране, включая iPad с трекпадом:
   размытия пересчитываются на каждом кадре прокрутки и заметно её тормозят. */
@media (any-pointer:coarse){
  .aurora{display:none}
  .topbar,.card,.board-shell{backdrop-filter:none}
  .topbar{
    background:var(--bg);                /* без размытия полупрозрачность только мешает */
    transform:translateZ(0);             /* отдельный слой: композитор двигает шапку сам,
                                            вместо перерисовки на каждом кадре прокрутки */
    will-change:transform;
    contain:layout paint;
  }
  /* большие мягкие тени пересчитываются при каждой прокрутке — на сенсорных экранах
     обходимся рамкой, разница в виде минимальная, в плавности заметная */
  .card,.board-shell{box-shadow:none}
  .hab{transition:none}


  .board-scroll{-webkit-overflow-scrolling:touch}
  .cell{touch-action:pan-x pan-y}
  .cell:hover .box{transform:none;opacity:.5}
  .cell.on:hover .box{opacity:1}
  .hab:hover{background:none}
  /* Ячейки за пределами экрана браузер может не отрисовывать вовсе.
     Размеры колонок и строк фиксированные, поэтому подсказка точная
     и раскладка не прыгает. */
  .cell{content-visibility:auto;contain-intrinsic-size:var(--day-w) 56px}
  .dayhead{content-visibility:auto;contain-intrinsic-size:var(--day-w) 44px}
  .svalue{content-visibility:auto;contain-intrinsic-size:var(--day-w) 26px}
  .chart-cell{content-visibility:auto;contain-intrinsic-size:var(--day-w) 120px}
  .cell,.dayhead,.chart-cell,.svalue{contain:layout paint}
}

@media (pointer:coarse){
  :root{--day-w:40px;--col-name:212px}
  .box{width:24px;height:24px;border-radius:7px}
  .box::after{left:7px;top:3px;width:6px;height:12px;border-width:0 2.6px 2.6px 0}
  .hab{height:46px}
  .hrow{height:44px}
  .hab .acts{opacity:1}
  .acts button{width:28px;height:28px;font-size:12px}
  .cell:hover .box{transform:none}
  .hint{display:none}
}

@media (max-width:1400px){
  :root{--col-name:210px;--col-bar:104px;--col-num:58px}
}
@media (max-width:1180px){
  :root{--col-name:180px;--col-bar:72px;--col-num:52px;--col-pct:46px;--col-goal:44px}
  .cards{grid-template-columns:1fr 1fr 1fr}
  .hero{grid-column:span 3}
}
/* ======== Компактная таблица: всё уже 1024 px ========
   Колонка «Дней» и сводка справа занимают около 590 px — на узком экране
   после них почти не остаётся места под дни. Ячейки не убираем через
   display:none (это сдвинуло бы всю сетку) — схлопываем колонки в ноль
   и прячем содержимое, а прогресс показываем под названием привычки. */
@media (max-width:1023px), (any-pointer:coarse) and (max-width:1600px){
  :root{--col-goal:0px;--col-num:0px;--col-pct:0px;--col-bar:0px}
  .c-sub,.sum-done,.sum-left,.sum-pct,.sum-bar{
    padding:0;border:0;overflow:hidden;white-space:nowrap;
  }
  /* нулевая ширина — закреплять нечего, а каждый липкий элемент стоит кадров */
  .board > .c-sub,
  .board > .sum-done,.board > .sum-left,
  .board > .sum-pct,.board > .sum-bar{position:static}
  .board > .c-name{border-right:1px solid var(--line)}
  .chart-side{padding-left:12px}
  .mini{display:flex}
  .mini-txt{display:block}
}

/* Планшет и узкое окно: таблица компактная, шапка и карточки — как в вебе.
   Верхняя граница 1600 px с запасом покрывает все iPad: 12.9" — 1024/1366,
   13" (M4) — 1032/1376; большие сенсорные мониторы под правило не попадают. */
@media (min-width:561px) and (max-width:1023px),
       (any-pointer:coarse) and (min-width:561px) and (max-width:1600px){
  :root{--day-w:42px;--col-name:236px}
  .hrow{height:42px}
  .hab{height:52px}
  .c-name.hab{padding:0 14px;gap:11px}
  .hab .nm{font-size:13.5px}
  .mini-txt{font-size:11px}
}

/* Пальцу нужны цели покрупнее — и кнопки строки убираем: без наведения
   они закрывают название, а карточка и так открывается тапом по строке.
   any-pointer, а не pointer: у iPad с трекпадом основной указатель точный. */
@media (any-pointer:coarse) and (max-width:1600px){
  :root{--day-w:46px}
  .hrow{height:44px}
  .hab{height:56px}
  .hab .acts{display:none}
  .box{width:26px;height:26px}
  .box::after{left:8px;top:4px;width:6px;height:12px}
}

/* ================= iPhone, портретная ориентация ================= */
@media (max-width:560px){
  :root{
    --day-w:42px;
    --col-name:172px;   /* хватает на иконку, название и полноразмерную полоску */
    --col-goal:0px;
    --col-num:0px;
    --col-pct:0px;
    --col-bar:0px;
    --radius:16px;
  }

  .wrap{padding:12px max(10px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
  .topbar{gap:10px;row-gap:8px;
    padding:max(10px,calc(10px + env(safe-area-inset-top))) max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left))}
  .brand{gap:10px;margin-right:0;flex:1 1 auto}
  .brand h1{font-size:14.5px}
  .brand p{display:none}
  .logo{width:34px;height:34px;border-radius:11px;font-size:17px}
  .btxt{display:none}
  .sync b{display:none}
  .sync{padding:0 10px;gap:0}
  .month-nav{order:3;width:100%;justify-content:center;gap:6px}
  .month-label{min-width:110px}
  .tools{order:2;gap:6px}
  .ghost-btn,.icon-btn,.primary-btn{height:32px}
  .ghost-btn{padding:0 10px}
  .primary-btn{padding:0 12px}

  /* карточки метрик — компактная лента */
  .cards{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(146px,1fr);
    gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 -10px 4px;padding:0 10px 14px;   /* нижний отступ — место для полоски прокрутки */
    scroll-padding-inline:10px;               /* привязка не съедает боковой отступ */
    scrollbar-width:thin;
  }
  .cards::-webkit-scrollbar{height:4px}
  .cards::-webkit-scrollbar-track{background:transparent;margin-inline:10px}
  .cards::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
  .board-scroll{padding-bottom:10px}
  .card{padding:12px 14px;scroll-snap-align:start}
  .hero{grid-column:auto;min-width:210px;gap:12px}
  .hero-ring{width:74px;height:74px}
  .hero-num{font-size:16px}
  .hero-num i{font-size:9px}
  .hero-meta strong{font-size:19px;margin:4px 0 2px}
  .hero-meta p{display:none}
  .kpi{gap:10px}
  .kpi-ico{font-size:19px}
  .kpi strong{font-size:19px;margin:3px 0 1px}
  .kpi small{font-size:10px}
  .label{font-size:9.5px;letter-spacing:.1em}

  /* на телефоне не хватает высоты — прячем две вспомогательные строки */
  .srow-goal,.srow-empty{display:none}
  .chart-side .big{display:none}
  .chart-cell{height:64px}
  .mrow{height:26px}
  .wk{height:26px;font-size:10px}
  .wkbar{height:44px}
  .c-name.hab{padding:0 10px;gap:9px}
  .hab .nm{font-size:13px}
  .hab .streak{font-size:10px;margin-left:4px}
  .mini-txt{width:40px;font-size:9px}

  /* окна снизу, как в приложениях iOS */
  .modal-back{place-items:end center;padding:0}
  .modal{
    width:100%;max-width:none;
    max-height:92vh;max-height:88dvh;          /* dvh — с учётом панелей Safari */
    border-radius:22px 22px 0 0;padding:20px 16px max(20px,env(safe-area-inset-bottom));
    animation:sheet .26s var(--ease);
  }
  .confirm{border-radius:22px 22px 0 0}
  @keyframes sheet{from{transform:translateY(100%)}}
  .emoji-row{max-height:200px}
  .field input{height:44px;font-size:16px}    /* 16px — иначе iOS зумит поле */
  .goal-presets button{height:32px;padding:0 13px}
  .modal-actions{margin-top:18px}
  .toast{width:100%;text-align:center}
  .hint{display:none}
}

@media (max-width:720px){
  .wrap{padding:16px 12px 48px}
  .topbar{padding:12px 14px;gap:12px}
  .brand p{display:none}
  .cards{grid-template-columns:1fr 1fr}
  .hero{grid-column:span 2}
  .tools .ghost-btn{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}