/* ============================================================
   ДВЕ ТЕМЫ — концепт §07 «Дневная схема», §08 «Вечерняя схема».
   Ночная — база: фокус, статус, глубина. Дневная — минеральный
   свет: ясность, спокойствие, пространство. Тёплый белый вместо
   чистого, чтобы интерфейс не выглядел медицинским.
   Компоненты не знают о теме: они читают только смысловые токены.
   ============================================================ */

:root,
[data-theme="night"]{
  color-scheme:dark;
  --bg:#0A0714;
  --ground:#000000;
  --bg-deep:#0A0714;
  --bg-grad:linear-gradient(170deg,#000 0%,#0A0714 55%,#150C34 100%);
  --grad-hero:linear-gradient(160deg,#000000 0%,#0A0714 55%,#241552 100%);
  --surface:rgba(255,255,255,.03);
  --surface-2:rgba(255,255,255,.06);
  --surface-hi:rgba(20,14,40,.86);
  --surface-solid:#100A22;
  --line:#241C3D;
  --line-2:rgba(255,255,255,.22);
  --text:#FFFFFF;
  --text-dim:#A6A1B8;
  --accent:#8E74FF;
  --accent-strong:#5B3FE0;
  --accent-deep:#2A1A6B;
  --accent-bg:#170F35;
  --accent-ink:#FFFFFF;
  --mint:#5FE3C0;
  --glow-c:rgba(124,92,255,.45);
  --glow-soft-c:rgba(124,92,255,.22);
  --shade-1:rgba(0,0,0,.35);
  --shade-2:rgba(0,0,0,.5);
  --shade-3:rgba(0,0,0,.6);
  --card-grad:linear-gradient(150deg,#0B0818,#1A1040);
  --wash:var(--wash);
  --wash-soft:rgba(42,26,107,.28);
  --memcard-grad:linear-gradient(150deg,#0B0818,#150E31 55%,#2A1A6B);
  --ok:#3ECF8E;
  --warn:#F5A623;
  --bad:#FF5C6C;
}

[data-theme="day"]{
  color-scheme:light;
  --bg:#F2F0EB;
  --ground:#FAF9F7;
  --bg-deep:#EFEBE3;
  --bg-grad:linear-gradient(170deg,#F7F5F2 0%,#F2F0EB 55%,#EEEAF6 100%);
  --grad-hero:linear-gradient(160deg,#FFFFFF 0%,#F6F4F0 55%,#E7E0F8 100%);
  --surface:rgba(255,255,255,.78);
  --surface-2:#FFFFFF;
  --surface-hi:rgba(255,255,255,.9);
  --surface-solid:#FFFFFF;
  --line:#E7E3DC;
  --line-2:rgba(26,22,38,.16);
  --text:#1A1626;
  --text-dim:#635C72;
  --accent:#5B3FE0;
  --accent-strong:#4A31C4;
  --accent-deep:#CFC4F5;
  --accent-bg:#EDE8FB;
  --accent-ink:#FFFFFF;
  --mint:#2FA98A;
  --glow-c:rgba(91,63,224,.20);
  --glow-soft-c:rgba(91,63,224,.10);
  --shade-1:rgba(40,30,80,.06);
  --shade-2:rgba(40,30,80,.10);
  --shade-3:rgba(40,30,80,.14);
  --card-grad:linear-gradient(150deg,#FFFFFF,#F1EDFC);
  --wash:rgba(91,63,224,.10);
  --wash-soft:rgba(91,63,224,.06);
  --memcard-grad:linear-gradient(150deg,#141024,#221646 55%,#3B2585);
  --ok:#1E9E6A;
  --warn:#B5760C;
  --bad:#D63B4C;
}

/* Плавная смена схемы. Пользователь видит переход, а не мигание. */
html.theme-anim,
html.theme-anim body,
html.theme-anim *:not(svg):not(path){
  transition:background-color .28s ease, color .28s ease, border-color .28s ease;
}

/* WELLEX mini app — палитра логотипа, ТЗ №2 раздел 9 */

:root{
  --font-display:"Space Grotesk",Inter,system-ui,sans-serif;
  --font:Inter,system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --r-lg:20px; --r-md:14px; --r-sm:10px; --r-pill:999px;
}
*,*::before,*::after{ box-sizing:border-box; }

/* Атрибут hidden должен побеждать любые display из классов.
   Без этого скрытые экраны продолжают занимать место и уводят
   рабочую область на экран вниз. */
[hidden]{ display:none !important; }

html,body{ margin:0; }
body{
  background:var(--bg-grad);
  background-attachment:fixed;
  color:var(--text); font-family:var(--font); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  min-height:100svh;
}
img{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; cursor:pointer; }
input{ font:inherit; }
h1,h2,h3,p{ margin:0; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }

[data-logo] svg{ width:100%; height:auto; color:var(--text); }

.eyebrow{
  font-size:11px; text-transform:uppercase; letter-spacing:.18em; color:var(--text-dim);
  margin-bottom:10px;
}
h1{ font-family:var(--font-display); font-size:clamp(26px,7vw,34px); line-height:1.1; font-weight:700; letter-spacing:-.02em; }
h2{ font-family:var(--font-display); font-size:clamp(22px,6vw,28px); line-height:1.15; font-weight:700; letter-spacing:-.02em; }
h3{ font-family:var(--font-display); font-size:20px; font-weight:700; letter-spacing:-.01em; }
.sub{ color:var(--text-dim); margin-top:10px; }
.hint{ color:var(--text-dim); font-size:13px; margin-top:14px; line-height:1.5; }

/* ---------- кнопки ---------- */
.btn{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:52px; padding:0 24px; margin-top:18px;
  border-radius:999px; border:1px solid transparent; font-weight:600; font-size:16px;
  text-decoration:none; transition:transform .3s var(--ease), box-shadow .3s, background .3s;
}
.btn--primary{ background:var(--accent-strong); color:var(--accent-ink); box-shadow:0 0 50px rgba(91,63,224,.4); }
.btn--primary:active{ transform:scale(.98); }
.btn--ghost{ background:transparent; border-color:var(--line-2); }
.btn--ghost:active{ background:rgba(91,63,224,.15); }

/* ---------- загрузка ---------- */
.boot{
  position:fixed; inset:0; display:grid; place-content:center; justify-items:center; gap:16px;
  text-align:center; padding:32px; z-index:50; background:var(--bg-grad);
}
/* Заставка — первое, что видит человек, и она должна выглядеть как
   продолжение приложения, а не как страница, которая ещё грузится.
   Поэтому знак крупный, без рамок и без мигания: пульсация прозрачностью
   читается как «что-то сломалось», а не как загрузка. */
.boot__mark{
  width:min(38vw,132px);
  filter:drop-shadow(0 0 40px var(--glow-c));
  animation:bootIn .7s var(--ease) both;
}
.boot__word{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(13px,3.6vw,16px); letter-spacing:.30em; text-indent:.30em;
  color:var(--text); animation:bootIn .7s .1s var(--ease) both;
}
.boot p{
  color:var(--text-dim); font-size:13.5px;
  animation:bootIn .7s .2s var(--ease) both;
}
/* Тонкая полоса вместо мигания: она показывает, что процесс идёт,
   и не отвлекает от знака. */
.boot__bar{
  width:112px; height:2px; border-radius:2px; overflow:hidden;
  background:var(--line); animation:bootIn .7s .25s var(--ease) both;
}
.boot__bar i{
  display:block; height:100%; width:40%; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  animation:bootSlide 1.4s ease-in-out infinite;
}
@keyframes bootIn{ from{ opacity:0; transform:translateY(10px) } }
@keyframes bootSlide{ 0%{ transform:translateX(-120%) } 100%{ transform:translateX(320%) } }

/* ---------- экраны ---------- */
/* Колонка ограничена по ширине: на десктопе экран не должен растягиваться
   во всю ширину монитора — кнопка на 1800px выглядит поломкой. */
.screen{
  min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  padding:32px 22px calc(32px + var(--safe-b));
}
.screen > *{ width:100%; max-width:420px; }
.step{ animation:in .45s var(--ease); width:100%; max-width:420px; }
@keyframes in{ from{ opacity:0; transform:translateY(14px) } }
.mark{ width:72px; margin-bottom:26px; filter:drop-shadow(0 0 26px rgba(124,92,255,.55)); }

/* Онбординг — по центру колонки. Списки внутри остаются слева:
   перечисления читаются хуже, если их центрировать. */
.screen .step{ text-align:center; }
.screen .step .mark{ margin-inline:auto; }
.screen .step .sub,
.screen .step .hint{ margin-inline:auto; max-width:34ch; }
.screen .step .prio--static div,
.screen .step .compass__row{ text-align:left; }
.screen .step .scale__legend{ text-align:left; }

/* шкала оценки */
.scale{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:28px; }
.scale button{
  aspect-ratio:1; border-radius:16px; background:var(--surface);
  border:1px solid var(--line); font-family:var(--font-display); font-size:20px; font-weight:700;
  transition:all .25s var(--ease);
}
.scale button:active,.scale button.on{
  background:var(--accent-strong); border-color:var(--accent);
  box-shadow:0 0 34px rgba(124,92,255,.5); transform:translateY(-3px);
}
.scale__legend{ display:flex; justify-content:space-between; margin-top:10px; font-size:12px; color:var(--text-dim); }

.dots{ display:flex; gap:7px; justify-content:center; margin-top:34px; }
.dots i{ width:7px; height:7px; border-radius:50%; background:var(--line); transition:all .3s; }
.dots i.on{ background:var(--accent); box-shadow:0 0 12px var(--accent); }
.dots i.done{ background:var(--accent-deep); }

/* Life Compass */
.compass{ display:grid; gap:12px; margin:24px 0 6px; }
.compass__row{ display:grid; gap:6px; }
.compass__row span{ display:flex; justify-content:space-between; font-size:13px; color:var(--text-dim); }
.compass__bar{ height:6px; border-radius:4px; background:var(--line); overflow:hidden; }
.compass__bar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--accent-deep),var(--accent));
  transition:width .8s var(--ease);
}

/* ---------- приложение ---------- */
.app{ padding:18px 18px calc(96px + var(--safe-b)); max-width:640px; margin-inline:auto; }

.top{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.top__who{ display:flex; align-items:center; gap:11px; margin-right:auto; min-width:0; }
.top__who img{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); }
.top__who b{ display:block; font-size:15px; }
.top__who span{ font-size:12px; color:var(--accent); letter-spacing:.04em; }
.top__streak{
  display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); font-size:14px; flex:none;
}
.top__streak i{ font-style:normal; }

.xpbar{
  position:relative; height:28px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); overflow:hidden; margin-bottom:26px;
}
.xpbar i{
  position:absolute; inset:0; width:0;
  background:linear-gradient(90deg,var(--accent-deep),var(--accent-strong));
  transition:width .9s var(--ease);
}
.xpbar span{
  position:relative; display:grid; place-items:center; height:100%;
  font-size:12px; letter-spacing:.08em; font-weight:600;
}

.tab{ animation:in .35s var(--ease); }

/* приоритеты дня */
.prio{ display:grid; gap:10px; margin-top:4px; }
.prio__item{
  display:flex; align-items:flex-start; gap:14px; width:100%; text-align:left;
  padding:18px; border-radius:18px; border:1px solid var(--line);
  background:var(--surface); transition:all .3s var(--ease);
}
.prio__box{
  width:24px; height:24px; border-radius:8px; border:1.5px solid var(--line); flex:none; margin-top:1px;
  display:grid; place-items:center; transition:all .3s var(--ease);
}
.prio__item.done{ background:rgba(91,63,224,.14); border-color:var(--accent-deep); }
.prio__item.done .prio__box{ background:var(--accent-strong); border-color:var(--accent); }
.prio__item.done .prio__box::after{ content:"✓"; font-size:14px; font-weight:700; }
.prio__item.done .prio__txt i{ text-decoration:line-through; opacity:.55; }
.prio__txt{ display:grid; gap:3px; min-width:0; }
.prio__txt b{ font-family:var(--font-display); font-size:13px; letter-spacing:.14em; color:var(--accent); }
.prio__txt i{ font-style:normal; font-size:15px; }

.prio--static div{
  display:grid; gap:3px; padding:16px 18px; border-radius:16px;
  border:1px solid var(--line); background:var(--surface); margin-bottom:10px;
}
.prio--static b{ font-family:var(--font-display); font-size:12px; letter-spacing:.14em; color:var(--accent); }
.prio--static span{ font-size:15px; }

.card{
  margin-top:22px; padding:20px; border-radius:20px;
  border:1px solid var(--line); background:var(--surface);
}
.card--challenge{ background:var(--card-grad); }

.chal{ display:grid; grid-template-columns:repeat(10,1fr); gap:5px; margin:14px 0 4px; }
.chal i{ aspect-ratio:1; border-radius:4px; background:var(--line); }
.chal i.on{ background:var(--accent-strong); box-shadow:0 0 8px rgba(124,92,255,.6); }

/* команда */
.invite{ margin-top:22px; }
.invite__bar{ height:10px; border-radius:6px; background:var(--line); overflow:hidden; }
.invite__bar i{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,var(--accent-deep),var(--accent));
  box-shadow:0 0 16px rgba(124,92,255,.7); transition:width .8s var(--ease);
}
.invite__num{ margin-top:12px; font-family:var(--font-display); font-size:26px; font-weight:700; }
.invite__num b{ color:var(--accent); }

.linkbox{ display:flex; gap:8px; margin-top:20px; }
.linkbox input{
  flex:1; min-width:0; padding:14px 16px; border-radius:14px;
  border:1px solid var(--line); background:var(--surface); color:var(--text); font-size:13px;
}
.linkbox .btn{ width:auto; margin:0; min-height:48px; padding:0 18px; font-size:14px; flex:none; }

/* профиль */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:20px; }
.stats div{
  padding:16px 8px; border-radius:16px; border:1px solid var(--line);
  background:var(--surface); text-align:center;
}
.stats b{ display:block; font-family:var(--font-display); font-size:22px; font-weight:700; }
.stats span{ font-size:11px; color:var(--text-dim); letter-spacing:.06em; }

.memcard{
  margin-top:14px; aspect-ratio:1.586; border-radius:18px; padding:20px;
  background:var(--memcard-grad);
  border:1px solid var(--line); display:grid; grid-template-rows:1fr auto;
  box-shadow:0 0 50px rgba(91,63,224,.2);
}
.memcard__mark{ width:56px; }
.memcard__meta span{ font-size:10px; letter-spacing:.24em; color:var(--text-dim); display:block; }
.memcard__meta b{ font-family:var(--font-display); font-size:18px; letter-spacing:.06em; }

.badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.badges span{
  padding:8px 14px; border-radius:999px; border:1px solid var(--accent-deep);
  background:rgba(91,63,224,.14); font-size:13px;
}
.badges__empty{ border-color:var(--line) !important; background:none !important; color:var(--text-dim); }

/* нижняя навигация */
.tabs{
  position:fixed; left:50%; transform:translateX(-50%); bottom:calc(14px + var(--safe-b));
  display:flex; gap:4px; padding:5px; border-radius:999px; z-index:20;
  background:var(--surface-hi); backdrop-filter:blur(18px); border:1px solid var(--line);
  box-shadow:0 12px 40px var(--shade-3);
}
.tabs button{
  border:0; background:none; padding:12px 20px; border-radius:999px;
  min-height:44px; font-size:14px; color:var(--text-dim); transition:all .3s var(--ease);
}
.tabs button.on{ background:var(--accent-strong); color:var(--accent-ink); }

.toast{
  position:fixed; left:50%; bottom:calc(84px + var(--safe-b)); transform:translate(-50%,20px);
  background:var(--accent-strong); color:var(--accent-ink); padding:12px 22px; border-radius:999px;
  font-size:14px; font-weight:600; z-index:60; opacity:0;
  transition:opacity .3s, transform .3s var(--ease);
  box-shadow:0 10px 34px var(--shade-2);
}
.toast.on{ opacity:1; transform:translate(-50%,0); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ============================================================
   ХАБ РАЗДЕЛОВ — концепция приложения Wellex Club
   Телефон: две страницы по шесть плиток со свайпом.
   Широкий экран: те же разделы одной сеткой разного размера.
   ============================================================ */

.hub{
  max-width:1180px; margin-inline:auto;
  padding:14px 18px calc(40px + var(--safe-b));
  animation:in .4s var(--ease);
}

.hub__top{
  display:flex; align-items:center; gap:10px;
  padding:6px 0 18px;
}
.hub__mark{ width:26px; flex:none; }
.hub__title{
  font-family:var(--font-display); font-size:15px; font-weight:700;
  letter-spacing:.22em; margin-right:auto;
}
.hub__more{
  display:flex; align-items:center; gap:3px; flex:none;
  width:44px; height:44px; justify-content:center;
  border:0; background:none; border-radius:50%;
  transition:background .25s var(--ease);
}
.hub__more:active{ background:var(--surface-2); }
.hub__more i{ width:4px; height:4px; border-radius:50%; background:var(--text); }

.hub__who{ display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.hub__who img{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); }
.hub__whoTxt{ margin-right:auto; min-width:0; }
.hub__whoTxt b{ display:block; font-size:15px; }
.hub__whoTxt span{ font-size:12px; color:var(--accent); letter-spacing:.04em; }
.hub__streak{
  display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); font-size:14px; flex:none;
}
.hub__streak i{ font-style:normal; }

/* страницы со свайпом */
.pages{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  margin-inline:-18px; padding-inline:18px; gap:18px;
}
.pages::-webkit-scrollbar{ display:none; }
.page{ flex:0 0 100%; scroll-snap-align:center; }

.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }

/* плитка */
.tile{
  position:relative; overflow:hidden;
  display:grid; align-content:space-between; gap:14px;
  min-height:132px; padding:16px;
  border-radius:var(--r-lg, 20px); border:1px solid var(--line);
  background:var(--surface);
  text-align:left; color:var(--text);
  transition:transform .32s var(--ease), border-color .32s, background .32s, box-shadow .32s;
}
.tile::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(120% 90% at 20% 0%, rgba(124,92,255,.22), transparent 60%);
  opacity:0; transition:opacity .35s var(--ease);
}
.tile:active{ transform:scale(.965); border-color:var(--accent-deep); }
.tile:active::after{ opacity:1; }
.tile.is-going{
  transform:scale(1.06); border-color:var(--accent);
  box-shadow:0 0 60px rgba(124,92,255,.45);
}
.tile.is-going::after{ opacity:1; }

.tile__ico{ width:30px; height:30px; flex:none; }
.tile__ico svg{
  width:100%; height:100%; fill:none; stroke:var(--accent);
  stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .35s;
}
.tile:active .tile__ico svg,
.tile.is-going .tile__ico svg{ stroke:var(--text); }

.tile__name{
  font-family:var(--font-display); font-weight:700;
  font-size:15px; line-height:1.15; letter-spacing:.01em;
  text-transform:uppercase;
}
.tile__soon{
  position:absolute; top:14px; right:14px;
  width:7px; height:7px; border-radius:50%;
  background:var(--line); border:1px solid var(--line-2);
}

.pagedots{ display:flex; gap:7px; justify-content:center; margin-top:20px; }
.pagedots i{
  width:7px; height:7px; border-radius:50%; background:var(--line);
  transition:all .3s var(--ease);
}
.pagedots i.on{ background:var(--accent); box-shadow:0 0 12px var(--accent); width:20px; border-radius:4px; }

/* ---------- экран раздела: «проваливаемся» глубже ---------- */
.sheet{
  position:fixed; inset:0; z-index:40; overflow-y:auto;
  background:var(--bg-grad);
  /* Лист раздела лежит поверх всего экрана, включая строку состояния,
     поэтому безопасная зона нужна и ему: без неё кнопка «назад»
     уезжала под часы. */
  padding:calc(var(--safe-t) + 14px) 18px calc(40px + var(--safe-b));
  animation:sheetIn .42s var(--ease);
}
@keyframes sheetIn{
  from{ opacity:0; transform:translateY(26px) scale(.97); }
}
.sheet.is-leaving{ animation:sheetOut .3s var(--ease) forwards; }
@keyframes sheetOut{
  to{ opacity:0; transform:translateY(20px) scale(.98); }
}

.sheet__top{ display:flex; align-items:center; padding-bottom:14px; }
.sheet__back{
  display:flex; align-items:center; gap:10px; min-height:44px;
  border:0; background:none; color:var(--text-dim); font-size:15px;
  padding:0 8px 0 0; transition:color .25s;
}
.sheet__back:active{ color:var(--text); }
.sheet__back span{ font-size:20px; line-height:1; }
.sheet__back em{ font-style:normal; }

.sheet__head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:18px; }
.sheet__ico{ width:40px; height:40px; flex:none; }
.sheet__ico svg{ width:100%; height:100%; fill:none; stroke:var(--accent);
  stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.sheet__head h2{ margin:0 0 6px; }
.sheet__head p{ color:var(--text-dim); font-size:15px; margin:0; }

.willbe{ display:grid; gap:8px; margin-top:14px; }
.willbe li{
  display:flex; align-items:center; gap:12px; list-style:none;
  padding:14px 16px; border-radius:var(--r-md, 14px);
  border:1px solid var(--line); background:var(--surface);
  font-size:15px;
}
.willbe li::before{
  content:""; width:18px; height:1px; flex:none;
  background:var(--accent-strong); box-shadow:0 0 10px var(--accent-strong);
}
.soonbadge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:999px; margin-bottom:16px;
  border:1px solid var(--accent-deep); background:rgba(91,63,224,.14);
  font-size:13px; color:var(--accent);
}

/* ---------- широкий экран: одна сетка вместо свайпа ---------- */
@media (min-width:760px){
  .pages{
    display:grid; grid-template-columns:1fr; overflow:visible;
    margin-inline:0; padding-inline:0; gap:0;
  }
  .page{ flex:none; }
  .page + .page{ margin-top:12px; }
  .grid{ grid-template-columns:repeat(6,1fr); gap:12px; }

  /* разный размер: первая плитка страницы крупнее — так сетка перестаёт
     выглядеть шестью одинаковыми квадратами */
  .grid > .tile:nth-child(1){ grid-column:span 3; grid-row:span 2; min-height:280px; }
  .grid > .tile:nth-child(2){ grid-column:span 3; min-height:134px; }
  .grid > .tile:nth-child(3){ grid-column:span 3; min-height:134px; }
  .grid > .tile:nth-child(4),
  .grid > .tile:nth-child(5),
  .grid > .tile:nth-child(6){ grid-column:span 2; min-height:150px; }

  .grid > .tile:nth-child(1) .tile__name{ font-size:22px; }
  .grid > .tile:nth-child(1) .tile__ico{ width:40px; height:40px; }

  .pagedots{ display:none; }

  .sheet{
    inset:auto 0 0 0; top:0; max-width:760px; margin-inline:auto;
    border-inline:1px solid var(--line);
  }
}

@media (hover:hover){
  .tile:hover{ border-color:var(--accent-deep); background:var(--surface-2); transform:translateY(-3px); }
  .tile:hover::after{ opacity:1; }
  .tile:hover .tile__ico svg{ stroke:var(--text); }
}

/* ---------- экран выбора способа входа ---------- */
.tgw{ display:flex; justify-content:center; margin-top:18px; min-height:48px; }
.or{
  display:flex; align-items:center; gap:14px;
  margin:22px 0 4px; color:var(--text-dim); font-size:12px;
  text-transform:uppercase; letter-spacing:.16em;
}
.or::before,.or::after{ content:""; flex:1; height:1px; background:var(--line); }

/* ---------- экран входа: карточка по центру, фирменные кнопки ---------- */
.screen--auth{ justify-content:center; align-items:center; }

.authcard{
  width:min(100%,392px); text-align:center;
  padding:32px 26px calc(32px + var(--safe-b));
  border-radius:26px; border:1px solid var(--line);
  background:var(--card-grad);
  box-shadow:0 30px 90px var(--shade-3), 0 0 80px rgba(91,63,224,.12);
  animation:in .5s var(--ease);
}
.authcard__mark{
  width:64px; margin:0 auto 22px;
  filter:drop-shadow(0 0 26px rgba(124,92,255,.55));
}
.authcard h1{ font-size:clamp(22px,6vw,26px); }
.authcard .sub{ margin:10px 0 26px; font-size:15px; }
.authcard .hint{ text-align:center; }

/* кнопка входа: логотип слева, надпись по центру */
.authbtn{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:100%; min-height:54px; margin-top:12px; padding:0 20px 0 56px;
  border-radius:16px; border:1px solid transparent; cursor:pointer;
  font-size:16px; font-weight:600; text-decoration:none;
  transition:transform .25s var(--ease), box-shadow .25s, filter .25s, background .25s;
}
.authbtn svg{ position:absolute; left:18px; width:22px; height:22px; }
.authbtn:active{ transform:scale(.985); }

/* Telegram — их фирменный синий, он узнаётся мгновенно */
.authbtn--tg{
  background:#229ED9; color:var(--accent-ink);
  box-shadow:0 10px 34px rgba(34,158,217,.32);
}
.authbtn--tg:hover{ background:#2AA9E4; box-shadow:0 12px 40px rgba(34,158,217,.45); }

/* Google — по их правилам: белая плашка, тёмный текст, цветная G */
.authbtn--google{
  background:var(--surface-solid); color:var(--text);
  box-shadow:0 10px 30px var(--shade-1);
}
.authbtn--google:hover{ filter:brightness(.97); box-shadow:0 12px 36px var(--shade-2); }

.authlink{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; color:var(--accent); font-size:15px; font-weight:600;
  text-decoration:none; transition:gap .25s var(--ease), color .25s;
}
.authlink i{ font-style:normal; transition:transform .25s var(--ease); }
.authlink:hover{ color:var(--text); }
.authlink:hover i{ transform:translateX(3px); }

.authcard .or{ margin:22px 0 6px; }
.err{ color:#FF5C6C; font-size:13px; margin-top:12px; }
.tgw{ display:flex; justify-content:center; margin-top:14px; }

/* ============================================================
   §17 НИЖНЯЯ ПАНЕЛЬ — пять элементов
   ============================================================ */
.hub{ padding-bottom:calc(104px + var(--safe-b)); }

.bottombar{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(14px + var(--safe-b)); z-index:30;
  /* Пять равных колонок вместо потока: элементы панели разной ширины,
     и при потоке средний из пяти не попадал в центр — «плюс» стоял на
     13 пикселей правее сферы. Равные колонки ставят его ровно. */
  display:grid; grid-template-columns:repeat(5,1fr);
  align-items:center; justify-items:center; gap:0; padding:6px;
  /* Доли 1fr делят поровну только заданную ширину. У закреплённой
     панели ширина по содержимому, поэтому колонки подстраивались под
     длину подписей и средняя уезжала из центра. Задаём ширину явно. */
  width:min(92vw, 340px);
  border-radius:999px; border:1px solid var(--line);
  background:var(--surface-hi); backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 14px 44px var(--shade-3);
  max-width:calc(100vw - 28px);
}
.bb{
  position:relative;
  display:grid; place-items:center; gap:3px;
  width:100%; height:52px; padding:6px 4px;
  border:0; background:none; border-radius:999px;
  color:var(--text-dim); font-size:10px; letter-spacing:.02em;
  transition:color .25s var(--ease), background .25s;
}
.bb svg{ width:22px; height:22px; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.bb.on{ color:var(--text); }
.bb span{ white-space:nowrap; }
.bb.on::after{
  content:""; position:absolute; left:50%; bottom:3px; transform:translateX(-50%);
  width:16px; height:2px; border-radius:2px; background:var(--accent);
  box-shadow:0 0 10px var(--accent);
}
.bb:active{ background:var(--surface-2); }

/* «Создать» — акцентная, она главная по замыслу */
.bb--accent{
  background:var(--accent-strong); color:var(--accent-ink); width:52px; justify-self:center;
  box-shadow:0 0 26px rgba(91,63,224,.55);
}
.bb--accent:active{ background:var(--accent); transform:scale(.94); }
.bb--accent.on::after{ display:none; }

/* аватар — круглый, по §16 постоянно на экране */
.bb--round{ min-width:48px; width:48px; padding:4px; }
.bb--round .bbav{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); background:var(--surface-2);
  display:grid; place-items:center; overflow:hidden;
  transition:border-color .25s, box-shadow .25s;
}
.bb--round.on .bbav{ border-color:var(--accent); box-shadow:0 0 18px rgba(124,92,255,.6); }
.bb--round .bbav img{ width:100%; height:100%; object-fit:cover; }
.bb--round .bbav svg{ width:22px; height:22px; }

@media (min-width:760px){
  .bb{ min-width:78px; font-size:11px; }
}

/* ============================================================
   СПИСКИ: «Мой мир», «Создать», расширенное меню
   ============================================================ */
.rows{ display:grid; gap:8px; margin-top:6px; }
.row{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:15px 16px; border-radius:var(--r-md,14px);
  border:1px solid var(--line); background:var(--surface);
  color:var(--text); font-size:15px;
  transition:transform .25s var(--ease), border-color .25s, background .25s;
}
.row__ico{ width:24px; height:24px; flex:none; }
.row__ico svg{ width:100%; height:100%; fill:none; stroke:var(--accent);
  stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.row__txt{ flex:1; min-width:0; }
.row__go{ color:var(--text-dim); font-size:16px; flex:none; transition:transform .25s var(--ease); }
.row:active{ transform:scale(.985); border-color:var(--accent-deep); background:rgba(91,63,224,.1); }
.row .dotsoon{ width:6px; height:6px; border-radius:50%; background:var(--line); flex:none; }
@media (hover:hover){
  .row:hover{ border-color:var(--accent-deep); background:var(--surface-2); }
  .row:hover .row__go{ transform:translateX(3px); }
}
@media (min-width:760px){
  .rows{ grid-template-columns:1fr 1fr; }
}

/* сетка «Создать»: действия, а не список */
.creategrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px; }
.createbtn{
  display:grid; gap:10px; align-content:start;
  padding:18px 16px; min-height:106px;
  border-radius:var(--r-lg,20px); border:1px solid var(--line);
  background:var(--surface); color:var(--text); text-align:left;
  transition:transform .25s var(--ease), border-color .25s, background .25s;
}
.createbtn svg{ width:26px; height:26px; fill:none; stroke:var(--accent);
  stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.createbtn b{ font-family:var(--font-display); font-size:15px; font-weight:700; }
.createbtn:active{ transform:scale(.97); border-color:var(--accent); background:rgba(91,63,224,.14); }
@media (min-width:760px){ .creategrid{ grid-template-columns:repeat(3,1fr); } }

/* ============================================================
   §25 ВЫБОР РОЛИ
   ============================================================ */
.roles{ display:grid; gap:10px; margin-top:22px; }
.rolebtn{
  display:grid; gap:6px; text-align:left; padding:18px;
  border-radius:var(--r-lg,20px); border:1px solid var(--line);
  background:var(--surface); color:var(--text);
  transition:transform .25s var(--ease), border-color .25s, background .25s;
}
.rolebtn b{ font-family:var(--font-display); font-size:17px; font-weight:700; }
.rolebtn span{ color:var(--text-dim); font-size:13px; line-height:1.45; }
.rolebtn:active,.rolebtn.on{
  border-color:var(--accent); background:rgba(91,63,224,.16);
  box-shadow:0 0 34px rgba(124,92,255,.28);
}

/* ============================================================
   §1–2 ИИ-АВАТАР
   ============================================================ */
.avatarbox{ text-align:center; padding:10px 0 4px; }
.avatarbox__circle{
  width:120px; height:120px; margin:0 auto 20px; border-radius:50%;
  border:1px solid var(--accent-deep); overflow:hidden;
  background:radial-gradient(circle at 50% 30%, rgba(124,92,255,.4), rgba(10,7,20,.9));
  display:grid; place-items:center;
  box-shadow:0 0 60px rgba(124,92,255,.35);
  animation:breathe 4s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.04) } }
.avatarbox__circle img{ width:100%; height:100%; object-fit:cover; }
.avatarbox__circle svg{ width:52px; height:52px; fill:none; stroke:var(--accent-ink); stroke-width:1.2; }
.bubble{
  display:inline-block; max-width:34ch; text-align:left;
  padding:14px 18px; border-radius:18px 18px 18px 6px;
  border:1px solid var(--line); background:var(--surface);
  font-size:15px; line-height:1.5;
}

/* ---------- формы в приложении ---------- */
.form{ display:grid; gap:12px; margin:14px 0 4px; }
.form label{ display:grid; gap:6px; font-size:12px; color:var(--text-dim); }
.form input,.form textarea{
  width:100%; padding:13px 15px; border-radius:14px;
  border:1px solid var(--line); background:var(--surface);
  color:var(--text); font:inherit; font-size:15px;
}
.form textarea{ resize:vertical; min-height:96px; }
.form .chk{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text); min-height:44px; }
.form .chk input{ width:auto; }
textarea{ width:100%; padding:13px 15px; border-radius:14px; border:1px solid var(--line);
  background:var(--surface); color:var(--text); font:inherit; font-size:15px; resize:vertical; }
.inline2{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.inline2 .btn{ width:auto; flex:1; min-width:140px; margin-top:0; }

/* ---------- слоты подключений ---------- */
.slots{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px; }
@media (min-width:760px){ .slots{ grid-template-columns:repeat(3,1fr); } }
.slot{
  display:grid; gap:7px; align-content:start; text-align:left;
  padding:16px; min-height:112px;
  border-radius:var(--r-md,14px); border:1px solid var(--line);
  background:var(--surface); color:var(--text);
  transition:transform .25s var(--ease), border-color .25s, background .25s;
}
.slot:active{ transform:scale(.975); }
.slot__top{ display:flex; align-items:center; gap:8px; }
.slot__top b{ font-family:var(--font-display); font-size:15px; font-weight:700; flex:1; }
.slot__dot{ width:8px; height:8px; border-radius:50%; background:var(--line); flex:none; }
.slot__what{ color:var(--text-dim); font-size:13px; line-height:1.4; }
.slot__state{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); }
.slot--ready .slot__dot{ background:var(--accent); box-shadow:0 0 10px var(--accent); }
.slot--ready{ border-color:var(--accent-deep); }
.slot--on .slot__dot{ background:#3ECF8E; box-shadow:0 0 10px #3ECF8E; }
.slot--on{ border-color:rgba(62,207,142,.45); background:rgba(62,207,142,.08); }
.slot--on .slot__state{ color:#3ECF8E; }
@media (hover:hover){ .slot:hover{ border-color:var(--accent); background:var(--surface-2); } }

/* Переключатель схем. Иконка показывает текущую схему, подпись — куда
   переключит; поэтому кнопка понятна и без цвета. */
.themesw{
  display:grid; place-items:center; flex:none;
  width:40px; height:40px; padding:0;
  border-radius:var(--r-pill,999px); border:1px solid var(--line);
  background:var(--surface); color:var(--text-dim);
  transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.themesw:hover{ color:var(--accent); border-color:var(--accent-deep); }
.themesw:active{ transform:scale(.94); }
.themesw__ico{ display:block; width:19px; height:19px; }
.themesw svg{
  width:100%; height:100%; fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}


/* ============================================================
   ГЛАВНЫЙ ЭКРАН — шесть зон и AI-сфера.
   Одна разметка на обе схемы: цвет и свечение приходят из токенов,
   поэтому дневной и вечерний варианты не расходятся по вёрстке.
   ============================================================ */

.home{
  max-width:520px; margin-inline:auto;
  padding:10px 20px calc(34px + var(--safe-b));
  animation:in .4s var(--ease);
}

.home__top{ display:flex; align-items:center; gap:8px; min-height:44px; }
.home__top .home__sp{ margin-right:auto; }

/* Шапка бренда. На макете знак крупный и стоит отдельно от сетки —
   это первый экран приложения, а не служебная панель. */
.home__brand{
  display:grid; justify-items:center; gap:14px;
  padding:14px 0 30px;
}
.home__brand [data-logo]{ width:min(46vw,168px); }
.home__brand [data-logo] svg{
  color:var(--text);
  filter:drop-shadow(0 0 30px var(--glow-c));
}
.home__word{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(15px,4.4vw,20px); letter-spacing:.30em;
  text-indent:.30em;               /* компенсируем разрядку справа */
  color:var(--text);
}

.zones{ display:grid; grid-template-columns:1fr 1fr; gap:13px; }

.zone{
  position:relative; overflow:hidden;
  display:grid; justify-items:center; align-content:center; gap:16px;
  min-height:152px; padding:20px 12px;
  border-radius:18px; border:1px solid var(--line);
  background:var(--surface); color:var(--text);
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.zone::after{                       /* подсветка при нажатии */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%, var(--glow-soft-c), transparent 65%);
  opacity:0; transition:opacity .3s var(--ease);
}
.zone:active{ transform:scale(.965); border-color:var(--accent); }
.zone:active::after{ opacity:1; }
.zone.is-going{
  transform:scale(1.05); border-color:var(--accent);
  box-shadow:0 0 46px var(--glow-c);
}
.zone.is-going::after{ opacity:1; }

.zone__ico{ width:58px; height:58px; }
.zone__ico svg{ width:100%; height:100%; fill:none; }
/* Обводка берётся из общего градиента: фиолетовый сверху, мятный снизу.
   Одна заливка на все иконки — набор не рассыпается на разные оттенки. */
.zone__ico svg :not(.ico-spark):not(.ico-ring){
  stroke:url(#wlxIco); stroke-width:1.35;
  stroke-linecap:round; stroke-linejoin:round;
}
.zone__ico .ico-ring{ stroke:var(--line-2); stroke-width:1; }
.zone__ico .ico-spark{
  stroke:var(--mint); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 5px var(--mint));
}
.zone__ico .ico-spark[d*="z"]{ fill:var(--mint); }

.zone__name{
  font-size:13px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; text-align:center; line-height:1.2;
}

/* ---------- AI-сфера ----------
   Единственный круглый элемент на экране: AI не равен разделу,
   он работает поверх них, поэтому и форма другая. */
.orbwrap{ display:grid; place-items:center; padding-top:26px; }
.orb{
  position:relative; width:104px; height:104px; padding:0;
  border-radius:50%; border:1px solid var(--accent);
  background:
    radial-gradient(60% 55% at 34% 28%, rgba(255,255,255,.55), transparent 60%),
    /* Центр темнее краёв: подпись стоит ровно в центре, и светлый
       центр делал её нечитаемой. Блик остаётся сверху слева. */
    radial-gradient(100% 100% at 50% 50%, var(--accent-strong) 0%, var(--accent-deep) 72%, #120B2E 100%);
  box-shadow:0 0 0 7px var(--glow-soft-c), 0 0 54px var(--glow-c);
  display:grid; place-items:center;
  transition:transform .3s var(--ease), box-shadow .3s;
}
.orb:active{ transform:scale(.94); }
.orb__mesh{
  position:absolute; inset:0; border-radius:50%; overflow:hidden;
  opacity:.5; pointer-events:none;
}
.orb__mesh svg{ width:100%; height:100%; }
.orb__mesh path{ fill:none; stroke:rgba(255,255,255,.55); stroke-width:.6; }
.orb b{
  position:relative; font-family:var(--font-display); font-weight:700;
  font-size:23px; letter-spacing:.08em; color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
}
/* В дневной схеме сфера светлее: на тёплом белом насыщенный фиолетовый
   круг выглядел бы кляксой. */
[data-theme="day"] .orb{
  border-color:#fff;
  box-shadow:0 0 0 7px #fff, 0 6px 26px var(--shade-2), 0 0 40px var(--glow-c);
  background:
    radial-gradient(60% 55% at 34% 28%, rgba(255,255,255,.8), transparent 62%),
    radial-gradient(100% 100% at 50% 50%, #B9A6FF 0%, #8E74F2 62%, #6B4FE6 100%);
}

/* Широкий экран: шесть зон в один ряд, лишняя высота ни к чему. */
@media (min-width:720px){
  .home{ max-width:940px; }
  .zones{ grid-template-columns:repeat(3,1fr); gap:16px; }
  .zone{ min-height:172px; }
}

/* ============================================================
   СЕГОДНЯ — концепт §09.
   Экран отвечает на один вопрос: что делать сейчас. Поэтому
   кольцо, три действия, ближайшее событие и один CTA — и всё.
   ============================================================ */

.today{
  max-width:520px; margin-inline:auto;
  padding:10px 20px calc(40px + var(--safe-b));
  animation:in .4s var(--ease);
}
.today__top{ display:flex; align-items:center; gap:8px; min-height:44px; }
.today__top .sheet__back{ margin-right:auto; }

.score{ display:grid; justify-items:center; padding:14px 0 4px; }
.score__ring{ position:relative; width:min(64vw,236px); aspect-ratio:1; }
.score__ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.score__track{ fill:none; stroke:var(--line); stroke-width:11; }
.score__fill{
  fill:none; stroke:var(--accent); stroke-width:11; stroke-linecap:round;
  stroke-dasharray:540.4; stroke-dashoffset:540.4;
  transition:stroke-dashoffset 1.1s var(--ease), stroke .4s;
  filter:drop-shadow(0 0 12px var(--glow-c));
}
/* Оценка выше 75 подсвечивается мятным: цвет — не единственный
   носитель статуса, рядом всегда стоит словесная подпись. */
.score__fill.is-high{ stroke:var(--mint); filter:drop-shadow(0 0 12px var(--mint)); }

.score__mid{
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:6px;
}
.score__mid b{
  font-family:var(--font-display); font-weight:700; line-height:1;
  font-size:clamp(46px,15vw,62px); letter-spacing:-.03em;
}
.score__heart{ display:block; width:19px; height:19px; color:var(--text-dim); }
.score__heart svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; }

.score__label{
  margin-top:18px; font-family:var(--font-display); font-size:19px;
  font-weight:700; letter-spacing:.01em; text-align:center;
}
.score__why{
  margin-top:7px; color:var(--text-dim); font-size:14px;
  text-align:center; max-width:34ch;
}

.today__block{ margin-top:32px; }
.today__h{
  font-family:var(--font-display); font-size:13px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim);
  margin-bottom:12px;
}

/* ближайшее событие */
.nextev{
  display:grid; gap:5px; width:100%; text-align:left;
  padding:18px; border-radius:var(--r-lg); border:1px solid var(--line);
  background:var(--card-grad); color:var(--text);
  transition:transform .3s var(--ease), border-color .3s;
}
.nextev:active{ transform:scale(.98); border-color:var(--accent); }
.nextev__when{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.nextev__what{ font-family:var(--font-display); font-size:17px; font-weight:700; }
.nextev__where{ font-size:14px; color:var(--text-dim); }

/* четыре показателя браслета */
.band4{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.band4 figure{
  margin:0; display:grid; gap:9px;
  padding:15px 16px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--surface);
}
.band4 figcaption{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim);
}
.band4 b{ font-family:var(--font-display); font-size:22px; font-weight:700; letter-spacing:-.01em; color:var(--text); }
.band4 b i{ font-style:normal; font-size:12px; font-weight:500; color:var(--text-dim); letter-spacing:.04em; margin-left:3px; }
/* Обрезаем график по карточке. С overflow:visible линия рисовалась
   за пределами ячейки и раздвигала страницу вбок на 320px —
   прокрутка появлялась на всём экране «Сегодня». */
.band4 figure{ overflow:hidden; }
.band4 svg{ width:100%; height:38px; overflow:hidden; }
.band4 .spark{ fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.band4 .spark--mint{ stroke:var(--mint); }
.band4 .bars rect{ fill:var(--accent); opacity:.85; }
.band4 .bars rect.hi{ fill:var(--mint); opacity:1; }

@media (min-width:720px){
  .today{ max-width:660px; }
  .band4{ grid-template-columns:repeat(4,1fr); }
}

/* ---------- правки после проверки на телефоне ---------- */

/* Нижняя панель зафиксирована поверх содержимого, поэтому каждый
   экран обязан оставить под неё место. Без этого главная кнопка
   экрана уезжает под панель и до неё нельзя дотянуться. */
/* Панель не просто высокая — она ещё и приподнята над краем экрана,
   и у неё есть внешнее свечение. Считать надо всё три слагаемых:
   высоту, отступ снизу и запас под свечение сферы. Раньше я учитывал
   только высоту, и на телефоне сфера уезжала под панель. */
:root{
  --bar-h:66px;          /* высота самой панели */
  --bar-gap:14px;        /* насколько она поднята над краем */
  --bar-space:calc(var(--bar-h) + var(--bar-gap) + var(--safe-b));
}
.home,
.today,
.hub{ padding-bottom:calc(var(--bar-space) + 34px); }

/* У сферы есть кольцо свечения на 7px наружу — оно тоже не должно
   попадать под панель. */
.orbwrap{ padding-bottom:10px; }

/* Палец не попадает по цели меньше 44px. */
.themesw{ width:44px; height:44px; }
.sheet__back{ min-height:46px; }

/* Текст на цветной заливке не должен зависеть от схемы: фон здесь
   всегда фиолетовый, значит и подпись всегда светлая. */
.scale button:active,
.scale button.on{ color:var(--accent-ink); }
.prio__item.done .prio__box::after{ color:var(--accent-ink); }
.bb--accent{ color:var(--accent-ink); }

/* ============================================================
   КОМПАС · КЛУБНАЯ КАРТА · СОЗДАТЬ — по макетам
   ============================================================ */

/* ---------- радиальный баланс ----------
   Пять дуг вокруг общего балла. Кольцо показывает соотношение
   сторон, а не рейтинг: сразу видно, какая проседает. */
.ring{ position:relative; width:min(78vw,300px); aspect-ratio:1; margin:6px auto 0; }
.ring svg{ width:100%; height:100%; overflow:visible; }
.ring__track{ fill:none; stroke:var(--line); stroke-width:9; stroke-linecap:round; }
.ring__fill{ fill:none; stroke-width:9; stroke-linecap:round; filter:drop-shadow(0 0 7px var(--glow-c)); }
/* Пять оттенков одной гаммы: сектора различимы, но набор не пёстрый. */
.ring__fill--0{ stroke:#8E74F2; }
.ring__fill--1{ stroke:#6E86F5; }
.ring__fill--2{ stroke:#5FC7D8; }
.ring__fill--3{ stroke:var(--mint); }
.ring__fill--4{ stroke:#B9A6FF; }
.ring__dot{ fill:var(--text-dim); }

.ring__mid{ position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:3px; }
.ring__mid span{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim); }
.ring__mid b{ font-family:var(--font-display); font-size:clamp(38px,12vw,52px); font-weight:700; line-height:1; letter-spacing:-.03em; }
.ring__mid i{ font-style:normal; font-size:12px; color:var(--text-dim); text-align:center; max-width:11ch; line-height:1.25; }

.ringlist{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.ringlist li{ display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:12px 15px; background:var(--surface-solid); }
.ringlist b{ font-weight:500; font-size:15px; }
.ringlist span{ font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--accent); }

/* ---------- клубная карта ----------
   Карта остаётся тёмной в обеих схемах: это предмет со статусом,
   а не элемент интерфейса, и на светлом фоне она должна читаться
   как вещь, которую достают из кармана. */
.memcard{
  position:relative; overflow:hidden;
  margin-top:6px; aspect-ratio:1.586; padding:20px;
  border-radius:18px; border:1px solid var(--accent-deep);
  background:var(--memcard-grad);
  display:grid; grid-template-rows:auto 1fr;
  box-shadow:0 18px 50px var(--shade-2);
  color:#fff;
}
.memcard__mark{
  position:absolute; right:-38px; bottom:-30px; width:190px;
  opacity:.07; pointer-events:none;
}
.memcard__mark svg{ color:#fff; }
.memcard__head{ display:grid; gap:2px; position:relative; }
.memcard__head span{ font-size:11px; letter-spacing:.28em; color:rgba(255,255,255,.6); }
.memcard__head b{ font-family:var(--font-display); font-size:23px; font-weight:700; letter-spacing:.04em; color:#B9A6FF; }
.memcard__body{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; position:relative; }
.memcard__who b{ display:block; font-family:var(--font-display); font-size:16px; letter-spacing:.05em; }
.memcard__who span{ font-size:11px; letter-spacing:.14em; color:rgba(255,255,255,.55); }
.memcard__qr{ flex:none; width:86px; height:86px; border-radius:8px; background:#fff; padding:5px; }

.levelbox{ margin-top:20px; padding:18px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--surface); }
.levelbox__cols{ display:flex; gap:18px; }
.levelbox__cols div{ flex:1; min-width:0; }
.levelbox__cols span{ display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); margin-bottom:5px; }
.levelbox__cols b{ font-family:var(--font-display); font-size:21px; font-weight:700; letter-spacing:-.01em; }
.levelbox__bar{ height:7px; border-radius:5px; background:var(--line); overflow:hidden; margin-top:16px; }
.levelbox__bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--accent-strong),var(--mint)); transition:width .9s var(--ease); }

.perks{ margin-top:18px; display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.perk{ display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:15px 16px; border:0; background:var(--surface-solid); color:var(--text);
  min-height:64px; transition:background .25s var(--ease); }
.perk:active{ background:var(--surface-2); }
.perk__txt{ flex:1; min-width:0; display:grid; gap:3px; }
.perk__txt b{ font-size:13px; letter-spacing:.12em; text-transform:uppercase; }
.perk__txt i{ font-style:normal; font-size:13px; color:var(--text-dim); line-height:1.4; }
.perk__go{ flex:none; color:var(--accent); font-size:17px; }

/* ---------- создать ---------- */
.orb--plus{ width:118px; height:118px; }
.orb--plus b{ font-size:42px; font-weight:300; line-height:1; }

.creategrid{ display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:26px; }
.createbtn{
  display:grid; justify-items:center; gap:12px; min-height:124px; padding:18px 12px;
  border-radius:var(--r-lg); border:1px solid var(--line);
  background:var(--surface); color:var(--text);
  transition:transform .28s var(--ease), border-color .28s;
}
.createbtn:active{ transform:scale(.965); border-color:var(--accent); }
.createbtn svg{ width:28px; height:28px; fill:none; stroke:var(--accent); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.createbtn b{ font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; text-align:center; line-height:1.25; }

.aidraft{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  margin-top:16px; padding:17px; min-height:72px;
  border-radius:var(--r-lg); border:1px solid var(--accent-deep);
  background:var(--card-grad); color:var(--text);
  transition:transform .28s var(--ease), border-color .28s;
}
.aidraft:active{ transform:scale(.985); border-color:var(--accent); }
.aidraft__spark{ flex:none; font-size:19px; color:var(--accent); }
.aidraft__txt{ flex:1; min-width:0; display:grid; gap:4px; }
.aidraft__txt b{ font-family:var(--font-display); font-size:16px; font-weight:700; }
.aidraft__txt i{ font-style:normal; font-size:13px; color:var(--text-dim); line-height:1.45; }
.aidraft__tag{
  flex:none; padding:5px 11px; border-radius:999px;
  border:1px solid var(--accent-deep); background:var(--accent-bg);
  font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--accent);
}

@media (min-width:640px){
  .creategrid{ grid-template-columns:repeat(3,1fr); }
}

/* Фиолетовый по тёмно-фиолетовому давал 4.2:1 — на 11px этого мало.
   В ночной схеме берём лавандовый: 8.6:1 и та же принадлежность к гамме. */
[data-theme="night"] .aidraft__tag{ color:#B9A6FF; }

/* ---------- хаб 3×4 по макету ---------- */

.hub__top{ display:flex; align-items:center; gap:8px; }
.hub__top .sheet__back{ margin-right:auto; }

/* Горизонтальный замок: знак и слово в строку, как на макете. */
.hub__lockup{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(10px,3vw,18px);
  padding:18px 0 8px;
}
.hub__lockup .hub__mark{ width:clamp(38px,11vw,54px); flex:none; }
.hub__lockup .hub__mark svg{ color:var(--text); filter:drop-shadow(0 0 22px var(--glow-c)); }
.hub__word{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(17px,5vw,26px); letter-spacing:.26em;
  text-indent:.26em;              /* гасим разрядку у последней буквы */
  color:var(--text);
}

/* Название схемы. Точка перед словом повторяет метку с макета. */
.hub__scheme{
  display:flex; align-items:center; justify-content:center; gap:9px;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--text-dim); margin-bottom:24px;
}
.hub__scheme::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 10px var(--glow-c);
}
.hub__scheme.is-day::before{ background:#D8C9A8; box-shadow:none; }

/* Плитки в сетке 3×4: подпись под иконкой, обе по центру. */
.grid .tile{
  justify-items:center; align-content:center; gap:14px;
  min-height:118px; padding:16px 8px; text-align:center;
}
.grid .tile__name{ text-align:center; font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.grid .tile__ico{ width:34px; height:34px; }

.hub__foot{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-top:26px; padding-top:20px; border-top:1px solid var(--line);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-dim); flex-wrap:wrap;
}
.hub__foot i{ font-style:normal; color:var(--accent); font-size:8px; }

@media (min-width:720px){
  .grid{ grid-template-columns:repeat(4,1fr); gap:16px; }
  .grid .tile{ min-height:140px; }
}

/* ---------- Consent Center ----------
   Каждая строка объясняет две вещи: что именно берём и зачем. Без
   второго переключатель превращается в юридическую формальность,
   и человек жмёт «нет» просто на всякий случай. */
.cons{
  display:flex; align-items:flex-start; gap:14px;
  padding:17px 0; border-bottom:1px solid var(--line);
}
.cons__txt{ flex:1; min-width:0; display:grid; gap:5px; }
.cons__txt b{ font-size:15px; font-weight:600; }
.cons__txt i{ font-style:normal; font-size:13.5px; color:var(--text-dim); line-height:1.45; }
.cons__txt em{ font-style:normal; font-size:13px; color:var(--accent); line-height:1.45; }
.cons__new{ margin:-8px 0 0; font-size:12px; color:var(--warn); }

/* Переключатель: 44px по высоте вместе с полем, чтобы попадать пальцем. */
.tog{
  flex:none; position:relative; width:52px; height:44px; padding:0;
  border:0; background:none;
}
.tog::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:52px; height:30px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface-2);
  transition:background .25s var(--ease), border-color .25s;
}
.tog span{
  position:absolute; left:4px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border-radius:50%;
  background:var(--text-dim);
  transition:transform .25s var(--ease), background .25s;
}
.tog.is-on::before{ background:var(--accent-strong); border-color:var(--accent); }
.tog.is-on span{ transform:translateY(-50%) translateX(22px); background:#fff; }

/* ---------- выбор режима ---------- */
.roles{ display:grid; gap:11px; margin-top:22px; }
.role{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:17px; min-height:76px;
  border-radius:var(--r-lg); border:1px solid var(--line);
  background:var(--surface); color:var(--text);
  transition:border-color .25s var(--ease), background .25s, transform .25s var(--ease);
}
.role:active{ transform:scale(.985); }
.role.is-on{ border-color:var(--accent); background:var(--accent-bg); }
.role__ico{ flex:none; width:28px; height:28px; }
.role__ico svg{ width:100%; height:100%; fill:none; stroke:var(--accent);
  stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.role__txt{ flex:1; min-width:0; display:grid; gap:4px; }
.role__txt b{ font-size:15px; font-weight:600; }
.role__txt i{ font-style:normal; font-size:13px; color:var(--text-dim); line-height:1.4; }
/* Галочка, а не только цвет: статус не должен держаться на одном оттенке. */
.role__mark{
  flex:none; width:22px; height:22px; border-radius:50%;
  border:1.5px solid var(--line); display:grid; place-items:center;
}
.role.is-on .role__mark{ border-color:var(--accent); background:var(--accent-strong); }
.role.is-on .role__mark::after{ content:"✓"; font-size:12px; font-weight:700; color:var(--accent-ink); }

/* ============================================================
   СТУДИЯ ПАРТНЁРА
   ============================================================ */

/* Вкладки лентой: пять названий в строку на телефон не влезают,
   а перенос в две строки съедает верх экрана. */
.stutabs{
  display:flex; gap:6px; margin:22px -20px 0; padding:0 20px 4px;
  overflow-x:auto; scrollbar-width:none;
}
.stutabs::-webkit-scrollbar{ display:none; }
.stutab{
  flex:none; min-height:40px; padding:0 15px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--surface); color:var(--text-dim);
  font-size:13px; font-weight:600; white-space:nowrap;
  transition:all .22s var(--ease);
}
.stutab.on{ border-color:var(--accent); background:var(--accent-bg); color:var(--accent); }

.stu__h{ font-family:var(--font-display); font-size:20px; font-weight:700; margin-top:24px; }

.cards{ display:grid; gap:10px; }
.qcard{
  display:grid; gap:4px; width:100%; text-align:left;
  padding:15px 16px; min-height:72px;
  border-radius:var(--r-lg); border:1px solid var(--line);
  background:var(--surface); color:var(--text);
  transition:transform .25s var(--ease), border-color .25s;
}
.qcard:active{ transform:scale(.98); border-color:var(--accent); }
.qcard b{ font-size:15px; font-weight:600; }
.qcard i{ font-style:normal; font-size:13px; color:var(--text-dim); line-height:1.4; }

.chips{ display:flex; flex-wrap:wrap; gap:7px; }
.chips .chip{
  min-height:40px; padding:0 14px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--surface); color:var(--text-dim);
  font-size:13px; font-weight:600; transition:all .22s var(--ease);
}
.chips .chip.on{ border-color:var(--accent); background:var(--accent-bg); color:var(--accent); }

.fld{ display:grid; gap:6px; margin-bottom:12px; }
.fld span{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); }
.fld input{
  width:100%; min-height:48px; padding:0 15px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--surface); color:var(--text);
  font:inherit;
}
.fld input:focus{ outline:none; border-color:var(--accent); }

.stu__subj{ font-size:14px; color:var(--text-dim); margin-bottom:10px; }
.stu__subj b{ color:var(--text); }
.stu__text{
  margin:0; padding:16px 17px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--surface-solid);
  font-family:inherit; font-size:15px; line-height:1.6; color:var(--text);
  white-space:pre-wrap; word-wrap:break-word;
}

/* Итог проверки прямо под текстом: решение об отправке принимается
   здесь же, а не на отдельном экране, куда никто не пойдёт. */
.cmpbar{
  display:grid; gap:4px; margin-top:12px;
  padding:13px 15px; border-radius:var(--r-md); border:1px solid var(--line);
}
.cmpbar b{ font-size:13.5px; }
.cmpbar span{ font-size:12.5px; color:var(--text-dim); line-height:1.5; }
.cmpbar--ok{   border-color:var(--ok);   background:var(--surface); }
.cmpbar--ok b{ color:var(--ok); }
.cmpbar--warn{ border-color:var(--warn); background:var(--surface); }
.cmpbar--warn b{ color:var(--warn); }
.cmpbar--stop{ border-color:var(--bad);  background:var(--surface); }
.cmpbar--stop b{ color:var(--bad); }

/* ---------- шаги онбординга: роль, цель, город ---------- */
.picks{ display:grid; gap:10px; margin-top:24px; }
.picks--row{ grid-auto-flow:column; justify-content:center; gap:8px; margin-top:18px; }

.pick{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  padding:15px 16px; min-height:70px;
  border-radius:var(--r-lg); border:1px solid var(--line);
  background:var(--surface); color:var(--text);
  transition:transform .25s var(--ease), border-color .25s, background .25s;
}
.pick:active{ transform:scale(.98); border-color:var(--accent); background:var(--accent-bg); }
.pick__ico{ flex:none; width:26px; height:26px; }
.pick__ico svg{ width:100%; height:100%; fill:none; stroke:var(--accent);
  stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.pick__txt{ flex:1; min-width:0; display:grid; gap:3px; }
.pick__txt b{ font-size:15px; font-weight:600; }
.pick__txt i{ font-style:normal; font-size:13px; color:var(--text-dim); line-height:1.4; }

/* Выбор языка — короткие кнопки в ряд, им карточка ни к чему. */
.pick--sm{
  min-height:46px; width:auto; padding:0 20px; justify-content:center;
  font-weight:700; font-size:14px; letter-spacing:.06em;
}
.pick--sm.on{ border-color:var(--accent); background:var(--accent-bg); color:var(--accent); }

/* Пропуск не должен выглядеть кнопкой: это выход, а не действие. */
.linkish{
  display:block; width:100%; margin-top:14px; padding:12px;
  min-height:44px; border:0; background:none;
  color:var(--text-dim); font-size:14px; text-decoration:underline;
}

/* Иконка серии дней вместо эмодзи: одинаково выглядит везде и живёт
   в общей гамме, а не в палитре системного шрифта. */
.ico-flame{ display:block; width:17px; height:17px; }
.ico-flame svg{ width:100%; height:100%; fill:none; stroke:var(--warn);
  stroke-width:1.5; stroke-linejoin:round; }

/* Заголовок только для скринридера: на экране его роль выполняет
   сама сетка, но без него страница остаётся без структуры. */
.vh{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
/* Ссылка пропуска: не видна, пока не получит фокус с клавиатуры. */
.skip{
  position:fixed; top:10px; left:10px; z-index:100;
  transform:translateY(-200%);
  background:var(--accent-strong); color:var(--accent-ink);
  padding:12px 20px; border-radius:var(--r-pill); font-size:14px; font-weight:600;
  text-decoration:none; transition:transform .25s var(--ease);
}
.skip:focus{ transform:translateY(0); }

/* ============================================================
   ДЛИННЫЕ ОДНОСЛОВНЫЕ ПОДПИСИ В УЗКИХ ПЛИТКАХ
   «Матчмейкинг» в колонке 105px не помещается и переносить его
   не по чему: плитка с overflow:hidden просто срезала слово по
   краям. Разрешаем перенос внутри слова и убираем часть разрядки
   на узких экранах — разрядка съедает до 12% ширины строки.
   ============================================================ */
.tile__name,
.zone__name,
.createbtn b{
  overflow-wrap:anywhere;
  hyphens:auto;
  max-width:100%;
}

@media (max-width:420px){
  .grid .tile__name{ letter-spacing:.06em; }
  .createbtn b{ letter-spacing:.06em; }
}

/* ============================================================
   ДЛИННЫЕ ИМЕНА И ГОРОДА
   Имя в 40 символов разворачивало шапку на пять строк и уводило
   содержимое вниз. Обрезаем в одну строку многоточием: полное имя
   человек и так знает, а шапка должна оставаться шапкой.
   ============================================================ */
.hub__whoTxt b,
.top__who b,
.memcard__who b{
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hub__whoTxt, .top__who{ min-width:0; }

/* В подписи уровня то же самое: она служебная и переносами не живёт. */
.hub__whoTxt span,
.top__who span{
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ============================================================
   ТЕЛЕФОН В ГОРИЗОНТАЛЬНОЙ ОРИЕНТАЦИИ
   Высота 375, кольцо 236 — оно занимало 65% экрана, и первый
   экран превращался в одно кольцо. Ширины при этом вдвое больше
   нужного. Раскладываем в две колонки и меряем кольцо по высоте,
   а не по ширине.
   ============================================================ */
@media (orientation:landscape) and (max-height:520px){
  .today{ max-width:none; padding-inline:clamp(20px,5vw,56px); }

  .score{
    display:grid; grid-template-columns:auto 1fr;
    align-items:center; gap:clamp(20px,4vw,44px);
    text-align:left; justify-items:start;
  }
  .score__ring{ width:min(42vh,190px); }
  .score__label{ margin-top:0; text-align:left; }
  .score__why{ text-align:left; margin-inline:0; }
  /* Подпись и пояснение встают справа от кольца, а не под ним. */
  .score__label, .score__why{ grid-column:2; }
  .score__ring{ grid-row:1 / span 2; }

  /* Три действия и показатели тела — в две колонки: по высоте
     их всё равно не выстроить, а ширины хватает с запасом. */
  .today__block{ margin-top:24px; }
  .prio{ grid-template-columns:1fr 1fr; }
  .band4{ grid-template-columns:repeat(4,1fr); }

  /* Онбординг и вход тоже не должны растягивать колонку в высоту. */
  .screen{ padding-block:22px; }
  .picks{ grid-template-columns:1fr 1fr; }
}

/* Заблокированный на время запроса элемент должен это показывать,
   иначе человек жмёт снова, думая, что промахнулся. */
.tog:disabled, .btn:disabled{ opacity:.55; pointer-events:none; }

/* ---------- редактирование профиля ---------- */
.pphoto{ display:flex; align-items:center; gap:16px; margin-top:22px; }
.pphoto__img{
  flex:none; width:84px; height:84px; border-radius:50%; overflow:hidden;
  border:1px solid var(--line); background:var(--surface);
  display:grid; place-items:center;
}
.pphoto__img img{ width:100%; height:100%; object-fit:cover; }
.pphoto__img svg{ width:38px; height:38px; fill:none; stroke:var(--text-dim);
  stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.pphoto__act{ flex:1; min-width:0; display:grid; gap:6px; }
.pphoto__act .btn{ margin:0; width:auto; justify-self:start; min-height:44px; padding:0 18px; }
.pphoto__act .hint{ margin:0; }

.fld textarea{
  width:100%; padding:13px 15px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--surface); color:var(--text);
  font:inherit; line-height:1.5; resize:vertical;
}
.fld textarea:focus{ outline:none; border-color:var(--accent); }
/* Сообщение об ошибке стоит над кнопкой: человек читает его до того,
   как нажмёт «Сохранить» ещё раз. */
.err{ margin:14px 0 0; font-size:13.5px; color:var(--bad); line-height:1.5; }

/* На iPhone строка состояния лежит поверх страницы, и верхняя панель
   уезжала под часы и значки связи. Отступ считаем от безопасной зоны,
   а не подбираем на глаз: у моделей она разной высоты. */
.home,
.today,
.hub{ padding-top:calc(var(--safe-t) + 10px); }

.home__top,
.today__top,
.hub__top{ position:relative; z-index:2; }

/* Онбординг и экран входа тоже начинаются от самого верха. */
.screen{ padding-top:calc(var(--safe-t) + 32px); }

/* ---------- поддержка ----------
   Адрес показываем крупно и отдельно от кнопки: внутри Telegram
   mailto: часто не открывается, и копирование становится основным
   способом, а не запасным. */
.support{ display:grid; gap:14px; }
.support__mail{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border-radius:16px;
  border:1px solid var(--line); background:var(--surface);
}
.support__mail span{
  font-weight:600; font-size:15px; color:var(--text);
  overflow-wrap:anywhere;
}
.support__mail .btn{ flex:none; }

/* ============================================================
   ПЛАНИРОВЩИК ДНЯ — Cos.pdf
   ============================================================ */

/* Поля планировщика оформляем сами: .fld выше — это сетка «подпись +
   поле», а здесь поле стоит одиноко, без подписи над ним. */
.fld--flat{
  display:block; width:100%; min-height:48px; padding:0 15px; margin:0;
  border-radius:var(--r-md); border:1px solid var(--line);
  background:var(--surface); color:var(--text); font:inherit;
}
.fld--flat:focus{ outline:none; border-color:var(--accent); }
.fld--sel{
  min-height:48px; padding:0 12px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--surface); color:var(--text);
  font:inherit; font-size:14px;
}
.fld--area{
  display:block; width:100%; padding:11px 14px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--surface); color:var(--text);
  font:inherit; font-size:15px; line-height:1.5; resize:vertical;
}
.fld--area:focus{ outline:none; border-color:var(--accent); }

/* ---------- утро ---------- */
.mood{ display:flex; gap:6px; margin-bottom:12px; }
.mood__b{
  flex:1 1 0; min-width:0; display:grid; gap:5px; justify-items:center;
  padding:11px 3px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--surface);
  color:var(--text-dim); transition:all .22s var(--ease);
}
.mood__b svg{
  width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.mood__n{ font-size:11px; line-height:1.2; text-align:center; overflow-wrap:anywhere; }
.mood__b.is-on{ border-color:var(--accent); background:var(--accent-bg); color:var(--accent); }

/* ---------- список дел ---------- */
.plan{ display:grid; gap:8px; }
.plan__lvl{
  margin:20px 0 9px; font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim);
}
.plan__none{ font-size:14px; color:var(--text-dim); margin:0; }

/* Пустое главное дело — это вопрос, а не пустота: человек, который
   видит вопрос, отвечает на него, а пустой блок пролистывает. */
.plan__empty{
  width:100%; min-height:64px; padding:16px;
  border-radius:var(--r-md); border:1px dashed var(--line-2);
  background:transparent; color:var(--text-dim);
  font-size:15px; font-weight:600; text-align:left;
}
.plan__empty:hover{ border-color:var(--accent); color:var(--accent); }

.ptask{
  display:flex; align-items:flex-start; gap:11px;
  padding:13px 13px 13px 12px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--surface);
}
/* Главное дело — карточка, а не строка. Пока оно выглядит как строка
   среди строк, оно ею и остаётся, и весь смысл уровня теряется. */
.ptask--big{
  padding:18px 16px; border-color:var(--accent);
  background:var(--accent-bg);
}
.ptask--big .ptask__title{ font-size:17px; font-weight:700; line-height:1.35; }

/* Галочка нарисована маленькой намеренно, но нажимается большой:
   зону расширяем псевдоэлементом ровно на половину отступа до
   соседей, чтобы зоны стыковались, а не отбирали друг у друга. */
.ptask__box{
  position:relative; flex:none; width:24px; height:24px; margin-top:1px;
  border-radius:8px; border:1.5px solid var(--line-2); background:transparent;
  transition:all .2s var(--ease);
}
.ptask__box::before{
  content:""; position:absolute; inset:-11px -5px -11px -12px;
}
.ptask__box::after{
  content:""; display:block; width:100%; height:100%;
  background:no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E");
  opacity:0; transition:opacity .2s var(--ease);
}
.ptask.is-done .ptask__box{ background:var(--accent); border-color:var(--accent); }
.ptask.is-done .ptask__box::after{ opacity:1; }
.ptask.is-done .ptask__title{ color:var(--text-dim); text-decoration:line-through; }

.ptask__body{ flex:1 1 auto; min-width:0; display:grid; gap:4px; }
.ptask__title{ font-size:15px; font-weight:600; line-height:1.4; overflow-wrap:anywhere; }
.ptask__meta{ display:flex; flex-wrap:wrap; gap:8px; font-size:12px; color:var(--text-dim); }
.ptask__proj{ color:var(--accent); }
.ptask__moved{ color:var(--warn, #C9862B); }
.ptask__pom{ font-variant-numeric:tabular-nums; }

.ptask__acts{ flex:none; display:flex; gap:2px; }
/* Кнопки действий: 42px по ширине и 44 по высоте после расширения.
   Удаление стоит с краю, а не между «фокусом» и «переносом», — чтобы
   промах не стирал задачу. */
.ptask__act{
  position:relative; width:42px; height:40px; display:grid; place-items:center;
  border-radius:10px; background:transparent; color:var(--text-dim);
}
.ptask__act::before{ content:""; position:absolute; inset:-2px 0; }
.ptask__act svg{
  width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.ptask__act:hover{ background:var(--surface-2); color:var(--text); }

.plan__add{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.plan__add .fld--flat{ flex:1 1 100%; }
.plan__add .fld--sel{ flex:1 1 0; min-width:96px; }
.plan__add .btn{ flex:none; }

.plan__tools{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:14px; flex-wrap:wrap;
}
.chip--act{
  min-height:44px; padding:0 16px; border-radius:var(--r-pill);
  border:1px solid var(--accent); background:var(--accent-bg);
  color:var(--accent); font-size:14px; font-weight:600;
}
.plan__focus{ font-size:13px; color:var(--text-dim); font-variant-numeric:tabular-nums; }

/* ---------- вечер ---------- */
.even{ display:grid; gap:13px; margin-bottom:13px; }
.even__q{ display:grid; gap:6px; }
.even__q span{ font-size:13px; color:var(--text-dim); line-height:1.4; }

/* ---------- помодоро ---------- */
.pom__task{ font-size:16px; font-weight:600; margin:0 0 14px; line-height:1.4; }
.pom__modes{ display:flex; gap:7px; margin-bottom:18px; }
.pom__modes .chip{
  flex:1 1 0; min-height:44px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--surface);
  color:var(--text-dim); font-size:14px; font-weight:600;
}
.pom__modes .chip.is-on{ border-color:var(--accent); background:var(--accent-bg); color:var(--accent); }
.pom__clock{
  font-family:var(--font-display, inherit);
  font-size:clamp(48px,16vw,72px); font-weight:700; line-height:1;
  text-align:center; margin:8px 0 20px; font-variant-numeric:tabular-nums;
  color:var(--text);
}
.pom__row{ display:flex; gap:9px; margin-bottom:14px; }
.pom__row .btn{ flex:1 1 0; }

/* ---------- неделя привычек ----------
   Сетка, а не список: смысл именно в том, чтобы одним взглядом
   увидеть, где ряд обрывается. Список этого не показывает. */
.wk{ display:grid; gap:6px; margin-bottom:20px; }
.wk__row{ display:grid; grid-template-columns:1fr repeat(7, minmax(0, 26px)); gap:4px; align-items:center; }
.wk__row--head{ margin-bottom:2px; }
.wk__d{
  font-size:10px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-dim); text-align:center;
}
.wk__d.is-today{ color:var(--accent); font-weight:700; }
.wk__name{
  display:grid; gap:1px; min-width:0; padding-right:6px;
  font-size:13px; font-weight:600; line-height:1.25; overflow-wrap:anywhere;
}
.wk__name i{ font-style:normal; font-size:11px; font-weight:500; color:var(--text-dim); }
.wk__c{
  position:relative; width:100%; aspect-ratio:1; min-height:26px; border-radius:8px;
  border:1px solid var(--line); background:var(--surface);
  transition:all .18s var(--ease);
}
/* Клетка нарисована мелкой, но нажимается по всей высоте строки:
   промахнуться по календарю привычек особенно обидно. */
.wk__c::before{ content:""; position:absolute; inset:-7px -2px; }
.wk__c.is-on{ border-color:var(--accent); background:var(--accent); }
.wk__c.is-on::after{
  content:""; position:absolute; inset:0;
  background:no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E");
}
.wk__c.is-future{ opacity:.35; }
.wk__load{ min-height:80px; color:var(--text-dim); }

.wk__sum{ display:grid; gap:9px; margin-bottom:20px; }
.wk__s{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding-bottom:9px; border-bottom:1px solid var(--line);
}
.wk__s span{ font-size:13px; color:var(--text-dim); }
.wk__s b{ font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; }
.wk__stuck{
  display:grid; gap:3px; padding:13px 14px; border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--surface);
}
.wk__stuck span{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); }
.wk__stuck b{ font-size:15px; line-height:1.35; overflow-wrap:anywhere; }
.wk__stuck i{ font-style:normal; font-size:12px; color:var(--warn, #C9862B); }

/* ---------- цели и проекты ---------- */
.goal{
  padding:16px; margin-bottom:12px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--surface);
}
.goal__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.goal__area{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); font-weight:700;
}
.goal__close{
  min-height:32px; padding:0 10px; border-radius:var(--r-pill);
  background:transparent; color:var(--text-dim); font-size:12px;
}
.goal__close:hover{ color:var(--text); background:var(--surface-2); }
.goal__t{ display:block; font-size:17px; font-weight:700; line-height:1.3; overflow-wrap:anywhere; }
.goal__why{ margin:6px 0 0; font-size:13px; color:var(--text-dim); line-height:1.5; }
.goal__bar{
  height:6px; margin:13px 0 5px; border-radius:99px;
  background:var(--surface-2); overflow:hidden;
}
.goal__bar i{ display:block; height:100%; background:var(--accent); border-radius:99px; }
.goal__pc{ font-size:12px; color:var(--text-dim); font-variant-numeric:tabular-nums; }
.goal__projs{ margin-top:13px; display:grid; gap:7px; }
.proj{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:10px 12px; border-radius:var(--r-md); background:var(--surface-2);
  font-size:14px;
}
.proj i{ font-style:normal; font-size:12px; color:var(--text-dim); white-space:nowrap; }
.goal__new{ margin-top:18px; display:grid; gap:8px; }

/* ---------- мои эксперты ---------- */
.exp{
  --exp-accent:var(--accent);
  padding:16px; margin-bottom:12px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--surface);
  border-left:3px solid var(--exp-accent);
}
.exp__top{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.exp__ava{
  flex:none; width:46px; height:46px; border-radius:50%; overflow:hidden;
  display:grid; place-items:center;
  background:var(--exp-accent); color:#fff;
  font-size:18px; font-weight:700;
}
.exp__ava img{ width:100%; height:100%; object-fit:cover; }
.exp__who{ min-width:0; display:grid; gap:2px; }
.exp__who b{ font-size:16px; font-weight:700; line-height:1.25; overflow-wrap:anywhere; }
.exp__who span{ font-size:13px; color:var(--text-dim); }
.exp__wait{ margin:0 0 10px; font-size:14px; color:var(--text-dim); }
.exp__meet{ display:block; font-size:13px; color:var(--text-dim); margin-bottom:12px; }
.exp__meet b{ color:var(--text); }
.exp__meet--no{ opacity:.75; }
.exp__scope{ display:grid; gap:8px; margin-bottom:12px; }
.exp__scope > span{
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim);
}
.exp__scope .hint{ margin:0; }
.exp__space{
  display:inline-block; font-size:14px; font-weight:600;
  color:var(--exp-accent); margin-bottom:10px;
}
.exp__end{ display:block; font-size:13px; color:var(--text-dim); }
.exp__end:hover{ color:var(--text); }

/* ---------- пространство специалиста ---------- */
.space{ --exp-accent:var(--accent); display:grid; gap:14px; }
.space__top{ display:flex; align-items:center; gap:13px; }
.space__top .exp__ava{ width:58px; height:58px; font-size:22px; }
.space__tag{ margin:0; font-size:16px; font-weight:600; line-height:1.4; }
.space__about{ margin:0; font-size:14px; color:var(--text-dim); line-height:1.6; }
.space .btn--primary{ background:var(--exp-accent); border-color:var(--exp-accent); }
.space__all{ font-size:14px; color:var(--text-dim); }
.space__all:hover{ color:var(--text); }

/* Шапка пространства на экране входа: человек пришёл к конкретному
   специалисту и должен увидеть его раньше, чем кнопки входа. */
.authspace{
  --exp-accent:var(--accent);
  display:grid; justify-items:center; gap:6px;
  padding:18px 16px; margin-bottom:20px;
  border-radius:var(--r-lg); border:1px solid var(--line);
  background:var(--surface); border-top:3px solid var(--exp-accent);
}
.authspace__ava{
  width:56px; height:56px; border-radius:50%; overflow:hidden;
  display:grid; place-items:center; margin-bottom:4px;
  background:var(--exp-accent); color:#fff; font-size:21px; font-weight:700;
}
.authspace__ava img{ width:100%; height:100%; object-fit:cover; }
.authspace b{ font-size:17px; font-weight:700; line-height:1.3; text-align:center; }
.authspace > span{ font-size:13px; color:var(--text-dim); text-align:center; }
.authspace p{
  margin:6px 0 0; font-size:13px; color:var(--text-dim);
  line-height:1.5; text-align:center;
}