/* ═══════════════════════════════════════════════════════════════
   КАРКАС
   ═══════════════════════════════════════════════════════════════ */
.app{display:grid;grid-template-columns:76px 1fr;height:100vh;height:100dvh;transition:grid-template-columns .4s var(--e)}
.nav{background:var(--surface);border-right:.5px solid var(--hair);display:flex;flex-direction:column;
  align-items:center;padding:14px 0 14px;gap:4px;position:relative;z-index:50}
.nav .logo{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;transition:transform .3s var(--e-spring)}
.nav .logo:hover{transform:translateY(-1px) scale(1.06)}
img.mm{display:block;object-fit:contain}
.nav .logo img.mm{width:32px;height:32px}
.nb{position:relative;width:60px;padding:9px 2px 7px;border:0;background:transparent;border-radius:14px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--ink-3);
  transition:background .25s var(--e),color .25s var(--e),transform .18s var(--e)}
.nb svg{stroke:currentColor;transition:transform .3s var(--e-spring)}
.nb small{font-size:9.5px;font-weight:600;letter-spacing:-.01em;line-height:1}
.nb:hover{background:var(--fill);color:var(--ink-2)}
.nb:hover svg{transform:translateY(-1px)}
.nb:active{transform:scale(.94)}
.nb[aria-current="true"]{background:var(--acc-a12);color:var(--acc);box-shadow:inset 0 0 0 .5px var(--acc-a12)}
.nb[aria-current="true"]::before{content:"";position:absolute;left:-8px;top:14px;bottom:14px;width:3px;border-radius:3px;
  background:var(--acc);animation:fade .3s var(--e-out) both}
.nav .sp{flex:1}
.nav .me{width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(160deg,var(--acc-2),var(--acc));color:var(--on-acc);
  display:flex;align-items:center;justify-content:center;font:700 11px/1 var(--ui);box-shadow:0 1px 3px rgba(0,0,0,.2);
  transition:transform .25s var(--e-spring)}
.nav .me:hover{transform:scale(1.08)}

.main{display:flex;flex-direction:column;min-width:0;height:100vh;height:100dvh;position:relative}
.top{position:relative;z-index:40;background:var(--surface);border-bottom:.5px solid var(--hair)}
.top-in{padding:11px 20px;display:flex;align-items:center;gap:10px}
.top-in>div:first-child{min-width:0}
.top h1{margin:0;font-size:16px;font-weight:700;letter-spacing:-.02em;line-height:1.2;white-space:nowrap}
.top .sub{font-size:12px;color:var(--ink-3);margin-top:2px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who{flex:0 0 auto;white-space:nowrap}
.top .grow{flex:1}

/* кнопка-таблетка */
.pill{font:600 12.5px/1 var(--ui);letter-spacing:-.01em;padding:9px 13px;border-radius:10px;
  border:.5px solid var(--hair-2);background:var(--surface);color:var(--ink-2);cursor:pointer;
  display:flex;align-items:center;gap:7px;box-shadow:var(--sh-1);white-space:nowrap;
  transition:transform .18s var(--e-spring),background .2s var(--e),color .2s var(--e),box-shadow .25s var(--e),border-color .2s var(--e)}
.pill:hover{background:var(--raise);color:var(--ink);box-shadow:var(--sh-pop);transform:translateY(-1px)}
.pill:active{transform:scale(.96)}
.pill svg{stroke:currentColor;transition:transform .4s var(--e)}
.pill[aria-pressed="true"]{background:var(--acc);border-color:transparent;color:var(--on-acc);box-shadow:0 2px 8px var(--acc-a40)}
.pill.ai{border-color:transparent;color:#fff;background:linear-gradient(120deg,var(--ai) 0%,var(--ai-2) 100%);
  box-shadow:0 2px 10px -2px var(--ai-a30)}
.pill.ai:hover{filter:brightness(1.06);box-shadow:0 6px 18px -6px var(--ai-a30)}
.pill.ai kbd{font:600 10px/1 var(--ui);padding:3px 5px;border-radius:5px;background:rgba(255,255,255,.22);letter-spacing:.02em}
body.drawer-on .pill.ai{opacity:.55;pointer-events:none}
body.drawer-on #hero{display:none}
@media(min-width:761px){#aiOpen{display:none}}

/* пользователь и меню */
.who{display:flex;align-items:center;gap:8px;background:transparent;border:0;cursor:pointer;color:var(--ink);
  padding:6px 8px;border-radius:10px;text-align:right;transition:background .2s var(--e)}
.who:hover{background:var(--fill)}
.who svg{stroke:var(--ink-3);transition:transform .3s var(--e)}
.who[aria-expanded="true"] svg{transform:rotate(180deg)}
.who-n{font-size:12.5px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.who-r{font-size:10.5px;color:var(--ink-3);line-height:1.25}
.menu{position:absolute;top:58px;right:20px;z-index:80;width:256px;background:var(--surface);
  border:.5px solid var(--hair);border-radius:16px;padding:12px;box-shadow:var(--sh-float);
  animation:pop .25s var(--e-out) both;transform-origin:top right}
.menu-h{font:700 10px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:2px 2px 9px}
.menu-s{height:.5px;background:var(--hair);margin:11px -12px}
.menu-i{display:block;width:100%;text-align:left;border:0;background:transparent;cursor:pointer;
  font:600 13px/1 var(--ui);color:var(--ink);padding:10px 10px;border-radius:10px;transition:background .18s var(--e)}
.menu-i:hover{background:var(--fill)}
.menu-i[aria-pressed="true"]{background:var(--acc-a12);color:var(--acc)}
.menu .ths{justify-content:space-between}
.ths{display:flex;gap:5px;padding:3px;background:var(--fill);border-radius:11px}
.th{width:26px;height:26px;border-radius:8px;border:0;cursor:pointer;padding:0;position:relative;
  transition:transform .2s var(--e-spring),box-shadow .22s var(--e)}
.th:hover{transform:translateY(-1px) scale(1.08)}
.th:active{transform:scale(.92)}
.th[aria-pressed="true"]{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--acc)}
.th-light{background:linear-gradient(140deg,#FFFFFF 48%,#11415D 48%)}
.th-night{background:linear-gradient(140deg,#1D242D 48%,#4C9BD1 48%)}
.th-violet{background:linear-gradient(140deg,#1B1230 48%,#9B6BFF 48%)}
.th-crimson{background:linear-gradient(140deg,#1D1717 48%,#FD2D2A 48%)}

/* сегмент-контрол */
.seg{position:relative;display:flex;background:var(--fill);border-radius:9px;padding:2px;isolation:isolate}
.seg .ind{position:absolute;top:2px;left:0;height:calc(100% - 4px);border-radius:7px;background:var(--raise);
  box-shadow:0 1px 3px rgba(0,0,0,.10),0 0 0 .5px rgba(0,0,0,.04);z-index:-1;
  transition:transform .38s var(--e-spring),width .34s var(--e)}
.seg button{position:relative;font:600 12.5px/1 var(--ui);letter-spacing:-.01em;padding:7px 13px;
  background:transparent;color:var(--ink-2);border:0;cursor:pointer;border-radius:7px;
  transition:color .2s var(--e),transform .16s var(--e)}
.seg button:active{transform:scale(.96)}
.seg button[aria-pressed="true"]{color:var(--ink)}