/* Хулиано — мини-ап. Система стилей по макету Figma (aTJWXPcWuLMFdWIk4SZCFB, страница design).

   🔴 ГЛАВНОЕ ОТЛИЧИЕ ОТ ч.75: раскладка строится ПОТОКОМ И ФЛЕКСОМ. Числа (цвета, кегли,
   отступы, скругления, обводки) взяты из макета, но КООРДИНАТ здесь нет вовсе — иначе
   длинный текст, третье устройство или чужая ширина окна разваливают экран.

   🔴 Обводка в Figma рисуется ВНУТРЬ и перекрывает отступ, в CSS прибавляется к размеру:
   отступ CSS = отступ макета − толщина обводки. Поэтому padding везде уменьшен на border.

   Размеры окна берём у Telegram (viewportStableHeight и безопасные зоны), а не 375×812. */

/* ═══ шрифты макета (лежат рядом, свои, без чужих CDN) ═══ */
@font-face { font-family:'Google Sans'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('fonts/gs-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Google Sans'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('fonts/gs-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family:'Google Sans'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('fonts/gs-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,
    U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Google Sans'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('fonts/gs-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,
    U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('fonts/mn-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('fonts/mn-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('fonts/mn-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:400 800; font-display:swap;
  src:url('fonts/mn-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Theater'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/Theater-Bold.woff2') format('woff2'); }

:root {
  /* цвета макета */
  /* снято со ВСЕХ актуальных экранов макета, а не с одного кадра */
  --bg:#FFD217;              /* фон экрана */
  --ink:#1F1A18;             /* текст и обводки — основной тёмный */
  --ink2:#1F1A18;
  --line:#1F1A18;            /* обводка карточек: 2px #1F1A18 (186 узлов) */
  --muted:#716A68;           /* приглушённый текст */
  --faint:#A8A3A2;           /* слабый текст */
  --dim:rgba(31,26,24,.40);  /* подписи внутри карточек */
  --accent:#DF4418;          /* оранжевый акцент */
  --blue:#63A0BD;            /* голубой акцент */
  --blue-deep:#45829F;
  --white:#FAF4F2;           /* 🔴 карточки в макете СВЕТЛЫЕ #FAF4F2, а не белые */
  --paper:#FAF4F2;
  --ok:#2E7D32; --bad:#C62828;

  /* Manrope — основной шрифт макета; Google Sans — заголовки разделов, кнопки и вкладки;
     Theater — крупные числа */
  --f:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-ui:'Google Sans','Manrope',system-ui,-apple-system,sans-serif;
  --f-num:'Theater','Google Sans',system-ui,sans-serif;

  --pad:16px;                 /* боковое поле экрана */
  --r-pill:1000px; --r-card:16px; --r-box:12px; --r-tab:11px; --r-sm:8px;

  /* размеры окна: значения ставит JS из Telegram, фолбэки — на случай обычного браузера */
  --vh:100dvh;                /* стабильная высота видимой части */
  --sa-top:0px; --sa-bottom:0px;   /* безопасные зоны устройства + панели Telegram */
  --tabs-h:66px;
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; padding:0; }
body {
  background:var(--bg); color:var(--ink); font-family:var(--f);
  font-size:13px; line-height:17.76px; letter-spacing:0;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;                       /* горизонтальной прокрутки быть не должно */
  min-height:var(--vh);
  -webkit-text-size-adjust:100%;           /* Safari не масштабирует текст сам */
}
img,svg { display:block; max-width:100%; }
button { font:inherit; color:inherit; background:none; border:0; padding:0; }

/* ═══ каркас ═══ */
.app {
  position:relative; min-height:var(--vh);
  display:flex; flex-direction:column;
  padding-top:var(--sa-top);
  /* снизу оставляем место под фиксированную панель вкладок */
  padding-bottom:calc(var(--tabs-h) + 8px + 12px + var(--sa-bottom));
}
.screen { flex:1; display:flex; flex-direction:column; min-width:0; }
.screen[hidden] { display:none; }
.grow { flex:1 1 auto; min-height:12px; }   /* растяжка: прижимает низ к панели вкладок */

/* ═══ шапка: логотип + плашка баланса (Frame 78, поток строкой, отступы 14/16) ═══ */
.hdr {
  position:relative; z-index:3; flex:none;
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:14px var(--pad);
}
.hdr .logo { height:24px; width:auto; flex:none; }
.hdr .back {
  display:flex; align-items:center; gap:6px; height:26px; padding:4px 11px 4px 9px;
  border:1px solid var(--line); border-radius:var(--r-pill); background:var(--white);
  font-weight:500; cursor:pointer; flex:none;
}
.hdr .back svg { width:14px; height:14px; }

/* плашка баланса (92×65: колонкой, gap 6, отступы 6, обводка 2, r12) */
.balance {
  flex:none; min-width:92px; max-width:46%;
  display:flex; flex-direction:column; align-items:stretch; gap:6px;
  padding:4px; background:var(--paper); border:2px solid var(--line);
  border-radius:var(--r-box); cursor:pointer;
}
.balance .sum {
  font-family:var(--f-ui); padding:2px 4px 0; color:var(--ink);
  font-weight:600; font-size:17px; line-height:21px; letter-spacing:-.17px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.balance .go {
  display:flex; align-items:center; justify-content:center; gap:2px;
  min-height:22px; padding:3px 7px 3px 4px;
  background:var(--blue); border:1px solid var(--line); border-radius:var(--r-pill);
  color:var(--paper);
}
.balance .go svg { width:12px; height:12px; flex:none; }
.balance .go span { font-family:var(--f-ui); font-weight:600; font-size:10px; line-height:12.5px;
  letter-spacing:-.1px; color:var(--paper); }

/* ═══ типографика ═══ */
.h1 { font-family:var(--f-ui); font-weight:700; font-size:20px; line-height:25px;
  letter-spacing:-.2px; color:var(--ink); margin:0; }
.h2 { font-weight:700; font-size:17px; line-height:23.2px; color:var(--ink); margin:0; }
.t-num { font-family:var(--f-num); font-weight:700; font-size:52px; line-height:57px; letter-spacing:-1.04px; }

/* ═══ полоса содержимого ═══ */
.wrap { padding:0 var(--pad); display:flex; flex-direction:column; }
.gap8 { gap:8px; } .gap12 { gap:12px; } .gap16 { gap:16px; }

/* ═══ карточка ═══ */
.card {
  background:var(--white); border:2px solid var(--line); border-radius:var(--r-card);
  padding:14px; display:flex; flex-direction:column; gap:12px; min-width:0;
}
.card.tight { padding:10px; }

/* ═══ карточка-герой (Frame 61: колонкой, gap 12, отступы 20/8/8/8, обводка 2, r16) ═══ */
.hero-wrap { position:relative; padding:0 var(--pad); margin-top:92px; flex:none; }
.hero-mascot {
  position:absolute; left:calc(50% - 18px); bottom:calc(100% - 40px);
  transform:translateX(-50%);
  width:236px; max-width:74%; height:auto; pointer-events:none; z-index:0;
}
.hero {
  position:relative; z-index:1;
  background:var(--paper); border:2px solid var(--line); border-radius:var(--r-card);
  padding:18px 6px 6px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.hero .pill-top {
  position:absolute; top:-15px; left:50%; transform:translateX(-50%);
  max-width:calc(100% - 24px); z-index:2;
}
.hero .days { display:flex; flex-direction:column; align-items:center; text-align:center; width:100%; }
/* в макете подпись поднята на −6 относительно числа: у Theater крупные внутренние поля.
   Тот же вид даёт плотный межстрочный интервал — и коробки не залезают друг на друга,
   что важно, когда число переносится на две строки («1763 дня») */
.hero .days .n { color:var(--ink); line-height:1; overflow-wrap:anywhere; }
.hero .days .u { font-family:var(--f-ui); color:var(--accent); text-align:center;
  font-size:13px; line-height:16.3px; letter-spacing:-.13px; }
.hero .facts { display:flex; gap:6px; width:100%; flex-wrap:wrap; }
.hero .fact {
  flex:1 1 140px; min-width:0;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:32px; padding:7px 9px;
  background:transparent; border:1px solid var(--line); border-radius:var(--r-sm);
}
.hero .fact .k { font-family:var(--f-ui); color:var(--dim); flex:none;
  font-size:13px; line-height:16.3px; letter-spacing:-.13px; }
.hero .fact .v { font-family:var(--f-ui); color:var(--ink); font-weight:500; text-align:right;
  font-size:13px; line-height:16.3px; letter-spacing:-.13px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ═══ пилюля-статус (26 высотой, обводка 2, r1000) ═══ */
.pill {
  display:inline-flex; align-items:center; gap:6px;
  min-height:26px; padding:3px 8px; border-radius:var(--r-pill);
  background:var(--paper); border:2px solid var(--line);
  color:var(--ink); font-family:var(--f-ui); font-weight:500; white-space:nowrap;
  font-size:13px; line-height:16.3px; letter-spacing:-.13px;
  overflow:hidden; text-overflow:ellipsis;
}
.pill i { width:7px; height:7px; border-radius:50%; background:var(--blue); flex:none; }
.pill.paused i { background:var(--accent); }
.pill.ghost { background:transparent; border:1px solid rgba(31,26,24,.75); color:rgba(31,26,24,.75);
  padding:4px 9px; font-weight:500; }

/* ═══ кнопка-пилюля (48 высотой, обводка 2, r1000) ═══ */
.btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:12px 18px;
  background:var(--accent); border:2px solid var(--line); border-radius:var(--r-pill);
  color:var(--paper); font-family:var(--f-ui); font-weight:600; font-size:15px;
  line-height:18.8px; letter-spacing:-.15px;
  text-align:center; cursor:pointer; user-select:none;
  width:auto; align-self:stretch;   /* с width:100% плюс внешний отступ кнопка вылезала за край */
}
.btn.white { background:var(--paper); color:var(--ink); }
.btn.danger { background:var(--bad); color:var(--white); }
.btn.blue  { background:var(--blue);  color:var(--white); }
.btn.small { min-height:36px; padding:8px 14px; font-size:13px; line-height:16px; }
.btn[disabled],.btn.off { opacity:.55; pointer-events:none; }
.btn:active { transform:translateY(1px); }

/* круглая кнопка-стрелка (36×26, r1000) */
.arrow {
  display:flex; align-items:center; justify-content:center; flex:none;
  width:36px; min-height:26px; background:var(--blue);
  border:1px solid var(--line); border-radius:var(--r-pill); cursor:pointer;
}
.arrow svg { width:16px; height:16px; }

/* ═══ заголовок раздела со счётчиком и стрелкой ═══ */
.sec-head { display:flex; align-items:center; gap:8px; min-width:0; flex-wrap:wrap; }
.sec-head .pill { flex:none; }
.sec-head .h1 { min-width:0; overflow-wrap:anywhere; }
.sec-head .arrow { margin-left:auto; }

/* ═══ строка списка (устройства, документы, разделы профиля) ═══ */
.row {
  display:flex; align-items:center; gap:12px; min-width:0;
  padding:12px 14px; background:var(--white);
  border:2px solid var(--line); border-radius:var(--r-box); cursor:pointer;
}
.row .grow-col { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.row .rt { font-weight:500; font-size:15px; line-height:19px; letter-spacing:-.15px;
  overflow-wrap:anywhere; }
.row .rd { color:var(--muted); overflow-wrap:anywhere; }
.row .chev { width:16px; height:16px; flex:none; }

/* ═══ ряд профиля по макету (Frame 83: 343×58, обводка 2px, скругление 16, поле 16) ═══
   Одна строка без пояснения + шеврон в голубом кружке. Обводка в Figma рисуется ВНУТРЬ,
   в CSS прибавляется → поле 16−2=14. */
.row.plain { padding:14px; gap:12px; }
.row.plain .rt { flex:1; min-width:0; font-family:var(--f); font-weight:600;
  font-size:15px; line-height:20px; letter-spacing:0; overflow-wrap:anywhere; }

/* кружок с шевроном (Frame 67: 26×26, обводка 1px, r=1000) */
.go-round { flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:var(--r-pill); border:1px solid var(--line);
  background:var(--blue); color:var(--white); }
.go-round.yellow { background:var(--bg); color:var(--ink); }

/* ═══ плашка баланса (макет Frame 82: 343×72, #63A0BD, обводка 2px, r=16) ═══ */
.bal-bar {
  display:flex; align-items:center; gap:12px; min-width:0;
  padding:12px 14px; background:var(--blue);
  border:2px solid var(--line); border-radius:var(--r-card);
}
.bal-bar .grow-col { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.bal-k { font-weight:500; font-size:13px; line-height:18px; color:rgba(250,244,242,.75); }
.bal-v { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-weight:600; font-size:17px; line-height:23px; color:var(--white); }
.bal-pill { flex:none; padding:3px 8px; border-radius:var(--r-pill);
  background:rgba(250,244,242,.12); font-weight:500; font-size:13px; line-height:18px; }
/* кнопка «+» (Frame 66: 40×40, #DF4418, обводка 2px, r=11) */
.bal-add { flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:11px; border:2px solid var(--line);
  background:var(--accent); color:var(--white); cursor:pointer; }
.bal-add svg { width:16px; height:16px; }

/* ═══ рефералы: шапка-герой (макет referal 106:2259) ═══
   Заголовок крупным Theater прямо на жёлтом фоне, маскот справа, описание под заголовком.
   Ширина текста ограничена, чтобы не заезжать под маскота. */
/* 🔴 Маскот в макете уходит ЗА правый край экрана. Чтобы он не тянул страницу вбок,
   блок расширен на поля и обрезает его ровно по краю окна. */
.ref-hero { position:relative; min-height:150px; overflow:hidden;
  margin:0 calc(var(--pad) * -1); padding:4px var(--pad) 0; }
.ref-mascot { position:absolute; right:-10px; top:-14px; width:200px; height:200px;
  object-fit:contain; pointer-events:none; }
.ref-t { position:relative; z-index:1; max-width:62%;
  font-family:var(--f-num); font-weight:700; font-size:26px; line-height:29px;
  letter-spacing:-.6px; color:var(--ink); overflow-wrap:anywhere; }
.ref-d { position:relative; z-index:1; max-width:56%; margin-top:8px;
  font-weight:500; font-size:13px; line-height:18px; color:var(--ink); overflow-wrap:anywhere; }

/* ссылка с квадратной кнопкой (макет Frame 343×50, кнопка 40×40 r=11) */
.link-row { display:flex; align-items:center; gap:10px; min-width:0;
  padding:4px 4px 4px 14px; background:var(--white);
  border:2px solid var(--line); border-radius:var(--r-card); cursor:pointer; }
/* 🔴 Ссылку НЕ обрезаем многоточием: в макете стоит короткая заглушка, а настоящая длиннее.
   Пусть переносится — юзер должен видеть её целиком, даже если рядом есть копирование. */
.link-row span { flex:1; min-width:0; font-weight:500; font-size:13px; line-height:18px;
  overflow-wrap:anywhere; }
.sq-act { flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:11px; border:2px solid var(--line);
  background:var(--accent); color:var(--white); cursor:pointer; }
.sq-act svg { width:16px; height:16px; }

/* статистика одной карточкой два на два (макет Frame 343×126) */
.stat-card { display:grid; grid-template-columns:1fr 1fr; gap:12px 12px; padding:14px; }
.stat-card .sc { min-width:0; display:flex; flex-direction:column; gap:0; }
.stat-card .sc .k { font-weight:500; font-size:13px; line-height:18px; color:var(--faint);
  overflow-wrap:anywhere; }
.stat-card .sc .v { font-weight:600; font-size:17px; line-height:23px; color:var(--ink);
  overflow-wrap:anywhere; }

/* плашка режима заработка (макет Frame 343×73, #63A0BD, кружок жёлтый) */
.mode-bar { display:flex; align-items:center; gap:12px; min-width:0;
  padding:14px; background:var(--blue);
  border:2px solid var(--line); border-radius:var(--r-card); cursor:pointer; }
.mode-bar .grow-col { flex:1; min-width:0; display:flex; flex-direction:column; gap:0; }
.mode-bar .k { font-weight:500; font-size:13px; line-height:18px; color:rgba(250,244,242,.75); }
.mode-bar .v { font-weight:600; font-size:17px; line-height:23px; color:var(--white); }

/* ═══ две плитки профиля (макет Frame 52: 343×100, зазор 2, плитка 170×100, поле 14) ═══
   🔴 Имена НЕ `.tile`/`.tiles` — они уже заняты выбором способа пополнения, и их правила
   стоят ниже по файлу, то есть перебивали бы эти. */
.p-tiles { display:flex; gap:2px; min-width:0; }
.p-tile {
  position:relative; overflow:hidden; flex:1 1 0; min-width:0; height:100px;
  padding:12px; background:var(--white);
  border:2px solid var(--line); border-radius:var(--r-card); cursor:pointer;
}
.p-tile.accent { background:var(--accent); }
.p-tile-t { position:relative; z-index:1; display:block; max-width:calc(100% - 30px);
  font-weight:600; font-size:15px; line-height:20px; color:var(--ink); overflow-wrap:anywhere; }
.p-tile.accent .p-tile-t { color:var(--white); }
.p-tile .go-round { position:absolute; right:12px; bottom:12px; z-index:1; }
/* картинка-украшение вылезает за края плитки — так же, как в макете */
.p-tile-img { position:absolute; right:-10px; bottom:-30px; width:118px; height:118px;
  object-fit:contain; pointer-events:none; }

/* ═══ лента операций ═══ */
.tx { display:flex; align-items:center; gap:12px; padding:11px 0;
  border-bottom:1px solid rgba(10,8,8,.10); min-width:0; }
.tx:last-child { border-bottom:0; }
.tx .c { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.tx .n { font-weight:500; font-size:15px; line-height:19px; letter-spacing:-.15px;
  overflow-wrap:anywhere; }
.tx .s { color:var(--muted); }
.tx .v { flex:none; font-weight:600; font-size:15px; line-height:19px; white-space:nowrap; }
.tx .v.plus { color:var(--ok); } .tx .v.minus { color:var(--ink); }

/* ═══ переключатель (Пополнить / Вывести; Себе / Другу) ═══ */
.seg { display:flex; gap:6px; }
.seg .s {
  flex:1 1 0; min-width:0; text-align:center;
  padding:10px 12px; min-height:40px;
  display:flex; align-items:center; justify-content:center;
  background:var(--white); border:2px solid var(--line); border-radius:var(--r-pill);
  font-weight:600; font-size:13px; line-height:16px; cursor:pointer; overflow-wrap:anywhere;
}
.seg .s.on { background:var(--blue); color:var(--white); }

/* ═══ плитки выбора (способ оплаты, сумма) ═══ */
.tiles { display:flex; flex-wrap:wrap; gap:8px; }
.tiles .tile {
  flex:1 1 calc(33.333% - 6px); min-width:88px;
  display:flex; align-items:center; justify-content:center; gap:6px;
  min-height:44px; padding:10px;
  background:var(--white); border:2px solid var(--line); border-radius:var(--r-box);
  font-weight:600; font-size:14px; cursor:pointer; text-align:center; overflow-wrap:anywhere;
}
.tiles .tile.on { background:var(--blue); color:var(--white); }
.tiles.half .tile { flex:1 1 calc(50% - 4px); }

/* ═══ поле ввода ═══ */
.field {
  display:flex; align-items:center; gap:8px; min-width:0;
  padding:12px 14px; background:var(--white);
  border:2px solid var(--line); border-radius:var(--r-box);
}
.field input {
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font:500 17px/21px var(--f); letter-spacing:-.17px; color:var(--ink);
}
.field input::placeholder { color:var(--faint); font-weight:400; }
.field .suffix { flex:none; color:var(--muted); font-weight:500; }

/* ═══ панель вкладок (Frame 67 макета: 66 высотой, отступы 5, промежуток 5, обводка 2, r16)
   🔴 Числа взяты с 17 экранов из 18: панель #FAF4F2, активная вкладка ЖЁЛТАЯ #FFD217,
   обводка #1F1A18. Голубая активная есть только на одном раннем варианте главной —
   раньше я по ошибке взял именно её.
   🔴 Отступ 5 при скруглении панели 16 и вкладки 11 даёт совпадение углов: 16−5=11.
   Из-за меньшего отступа в углах активной вкладки проступали светлые уголки. */
.tabbar {
  position:fixed; z-index:20;
  left:8px; right:8px; bottom:calc(8px + var(--sa-bottom));
  min-height:var(--tabs-h);
  display:flex; gap:5px; padding:3px;          /* 3 + обводка 2 = 5 из макета */
  background:var(--paper); border:2px solid var(--ink2); border-radius:var(--r-card);
}
.tabbar .nav {
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:7px 0;                                /* 9 из макета минус 2 обводки */
  border:2px solid transparent; border-radius:var(--r-tab);
  cursor:pointer; color:var(--muted);
}
.tabbar .nav svg { width:20px; height:20px; flex:none; }
.tabbar .nav .i-on { display:none; }
.tabbar .nav span {
  font-size:11px; line-height:14px; letter-spacing:-.11px; color:var(--muted);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tabbar .nav.on { background:var(--bg); border-color:var(--ink2); color:var(--ink2); }
.tabbar .nav.on span { color:var(--ink2); }
.tabbar .nav.on .i-off { display:none; }
.tabbar .nav.on .i-on { display:block; }

/* ═══ экран и его поле ═══ */
#screen { flex:1; display:flex; flex-direction:column; min-width:0; }
/* без общего gap: вертикальные расстояния задаёт каждый блок сам — так они совпадают
   с макетом, где между шапкой и карточкой 92, а внутри разделов 16 */
#screen .pad { flex:1; display:flex; flex-direction:column; min-width:0; }
.sheet-layer:empty { display:none; }

/* ═══ модалка (имена как в коде: .modal-backdrop/.modal/.modal-title/…) ═══ */
.modal-backdrop { position:fixed; inset:0; z-index:40; background:rgba(31,16,16,.55); }
.modal {
  position:fixed; z-index:41; left:16px; right:16px;
  top:50%; transform:translateY(-50%);
  max-width:420px; margin:0 auto; max-height:calc(var(--vh) - 48px); overflow-y:auto;
  background:var(--paper); border:2px solid var(--line); border-radius:var(--r-card);
  padding:18px 16px; display:flex; flex-direction:column; gap:14px;
}
.modal.bottom { top:auto; bottom:calc(16px + var(--sa-bottom)); transform:none; }
.modal-title { font-weight:700; font-size:20px; line-height:25px; letter-spacing:-.2px;
  overflow-wrap:anywhere; }
.modal-text { color:var(--muted); overflow-wrap:anywhere; }
.modal-btns { display:flex; gap:8px; flex-wrap:wrap; }
.modal-btns .btn { flex:1 1 130px; }
.qr-box { display:flex; align-items:center; justify-content:center; padding:12px;
  background:var(--white); border:2px solid var(--line); border-radius:var(--r-box); }
.qr-box svg,.qr-box canvas,.qr-box img { width:100%; height:auto; max-width:240px; }
.gift-pop-head { display:flex; gap:12px; align-items:flex-start; }
.gift-pop-ic { flex:none; width:40px; height:40px; border-radius:var(--r-box);
  background:var(--accent); border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center; }

/* ═══ всплывающее сообщение (код кладёт .toast в слой) ═══ */
.toast {
  position:fixed; left:50%; z-index:60;
  bottom:calc(var(--tabs-h) + 20px + var(--sa-bottom));
  transform:translateX(-50%);
  max-width:calc(100% - 32px); padding:10px 14px; border-radius:var(--r-pill);
  background:var(--ink2); color:var(--paper); font-weight:500; text-align:center;
  overflow-wrap:anywhere;
}

/* ═══ подсказки и состояния ═══ */
.note {
  padding:12px 14px; border-radius:var(--r-box);
  background:var(--white); border:2px solid var(--line);
  display:flex; flex-direction:column; gap:6px;
}
.note.warn { background:#FFF3D6; }
.note.danger { background:#FFE3DB; }
.note .nt { font-weight:600; font-size:15px; line-height:19px; letter-spacing:-.15px; }
.note .nd { color:var(--muted); }

/* ═══ загрузка ═══ */
.loading { flex:1; display:flex; align-items:center; justify-content:center; padding:40px 16px;
  color:var(--muted); text-align:center; }

/* мелкие экраны: ужимаем крупные числа, чтобы не выпирали */
@media (max-height:640px) {
  .hero-wrap { margin-top:70px; }
  .hero-mascot { width:190px; }
  .t-num { font-size:44px; line-height:48px; }
}
@media (max-width:340px) {
  .t-num { font-size:44px; line-height:48px; }
  .dev { min-width:96px; font-size:15px; }
}

/* ═══ Вход в браузерный кабинет (когда открыли не из Telegram) ═══
   Отдельный экран: он подменяет собой весь каркас, поэтому у него свои имена классов.
   🔴 Его легко забыть: стенд ходит с подставным Telegram и до этого пути не доходит.
   Поймано прогоном ЖИВОГО прода 03.08.2026 — экран был без стилей. */
.login-wrap {
  min-height:var(--vh); display:flex; flex-direction:column; align-items:center;
  gap:14px; padding:calc(24px + var(--sa-top)) var(--pad) calc(24px + var(--sa-bottom));
}
.stub-mascot { width:200px; max-width:52%; height:auto; }
.stub-title { font-weight:700; font-size:20px; line-height:25px; letter-spacing:-.2px; text-align:center; }
.login-card {
  width:100%; max-width:420px; display:flex; flex-direction:column; gap:10px;
  padding:16px; background:var(--white); border:2px solid var(--line); border-radius:var(--r-card);
}
.login-card .btn { text-decoration:none; }
.login-card .ld { color:var(--muted); overflow-wrap:anywhere; }
.login-input {
  width:100%; padding:12px 14px; border:2px solid var(--line); border-radius:var(--r-box);
  background:var(--paper); font:500 17px/21px var(--f); letter-spacing:-.17px; color:var(--ink);
  outline:0; -webkit-appearance:none;
}
.login-input::placeholder { color:var(--faint); font-weight:400; }
.login-err {
  padding:10px 12px; border-radius:var(--r-box); background:#FFE3DB;
  border:1px solid var(--bad); color:var(--bad); font-weight:500; overflow-wrap:anywhere;
}
.login-qr { display:flex; justify-content:center; padding:12px; background:var(--white);
  border:2px solid var(--line); border-radius:var(--r-box); }
.login-qr svg { width:100%; max-width:220px; height:auto; }
.login-dots { display:inline-block; min-width:14px; }
.login-foot { color:var(--muted); text-align:center; margin-top:auto; overflow-wrap:anywhere; }

/* ═══ шаги «1-2-3» (подключение, пополнение) ═══ */
.steps { display:flex; flex-direction:column; gap:14px; }
.step { display:flex; gap:10px; align-items:flex-start; min-width:0; }
.step .n {
  flex:none; width:26px; height:26px; border-radius:var(--r-pill);
  background:var(--accent); color:var(--white); border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-weight:600; font-size:13px;
}
.step .c { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.step .st { font-weight:600; font-size:15px; line-height:19px; letter-spacing:-.15px;
  overflow-wrap:anywhere; }
.step .sd { color:var(--muted); overflow-wrap:anywhere; }

/* ═══ строка «ключ — значение» (профиль, итог оплаты) ═══ */
.kv { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 0; border-bottom:1px solid rgba(10,8,8,.10); min-width:0; }
.kv:last-child { border-bottom:0; }
.kv .k { color:var(--muted); flex:none; }
.kv .v { font-weight:500; display:flex; align-items:center; gap:6px;
  min-width:0; overflow-wrap:anywhere; text-align:right; justify-content:flex-end; }
.kv.total { font-weight:600; border-bottom:0; border-top:1px solid rgba(10,8,8,.14); padding-top:10px; }
/* карточка профиля: в макете строки ID/Email идут БЕЗ разделителей, зазор 10 (Frame 20).
   В чеке пополнения разделители нужны и остаются. */
.kv-flat .kv { border-bottom:0; padding:5px 0; }
.kv .v.plus { color:var(--ok); } .kv .v.faint { color:var(--faint); }

/* ═══ аватар ═══ */
/* аватарка (макет Frame 90: 60×60, скругление 8, обводка 2px, внутри фото).
   Фото приходит с нашего сервера; если его нет — остаётся буква. */
.ava { position:relative; flex:none; width:60px; height:60px; overflow:hidden;
  background:var(--bg); border:2px solid var(--line); border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:22px; color:var(--ink); }
.ava img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ava.sm { width:44px; height:44px; font-size:17px; }

/* строки «ключ — значение» в карточке профиля (макет: подпись #A8A3A2, значение Manrope 600 15) */
.kv .k { color:var(--faint); }
.kv .v { font-weight:600; font-size:15px; line-height:20.5px; }
.ic-round { flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:var(--r-pill); border:1px solid var(--line);
  background:var(--accent); color:var(--paper); cursor:pointer; }
.ic-round.blue { background:var(--blue); }
.ic-round svg { width:12px; height:12px; }

/* ═══ мелкая кнопка-действие в строке ═══ */
.act-sm { flex:none; display:inline-flex; align-items:center; justify-content:center;
  min-height:30px; padding:5px 12px; border-radius:var(--r-pill);
  background:var(--blue); color:var(--white); border:2px solid var(--line);
  font-weight:600; font-size:13px; cursor:pointer; white-space:nowrap; }
.act-sm.ghost { background:var(--white); color:var(--ink); }

/* ═══ разделитель-подпись ═══ */
.hint { color:var(--muted); text-align:center; overflow-wrap:anywhere; }
.danger-act { padding:12px; text-align:center; color:var(--bad); font-weight:500;
  cursor:pointer; overflow-wrap:anywhere; }
.muted-act { padding:12px; text-align:center; color:var(--muted); font-weight:500;
  cursor:pointer; overflow-wrap:anywhere; }

/* карточка-список: строки вплотную, разделители внутри строк */
.card.rows { gap:0; }
/* колонка одинаковых строк */
.rows { display:flex; flex-direction:column; gap:8px; min-width:0; }

/* ═══ профиль ═══ */
.prof { display:flex; align-items:center; gap:12px; min-width:0; }
.prof .nm { font-weight:700; font-size:21px; line-height:28.7px; overflow-wrap:anywhere; }
.prof .un { font-weight:500; font-size:13px; line-height:17.8px; color:var(--dim);
  overflow-wrap:anywhere; }
.row-money { flex-direction:row; align-items:center; justify-content:space-between; gap:12px; }
.money { font-weight:700; font-size:20px; line-height:25px; overflow-wrap:anywhere; }
.money span { font-weight:400; font-size:13px; color:var(--muted); }

/* ═══ текст документа ═══ */
.legal { max-height:none; }
.legal h1,.legal h2,.legal h3 { font-size:15px; line-height:19px; margin:12px 0 6px; }
.legal p,.legal li { color:var(--ink); font-size:13px; line-height:18px; overflow-wrap:anywhere; }
.legal ul,.legal ol { padding-left:18px; margin:6px 0; }

/* ═══ код блогера ═══ */
.clip-code { display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px; background:var(--paper); border:2px dashed var(--line); border-radius:var(--r-box);
  font-weight:700; font-size:17px; letter-spacing:.4px; cursor:pointer; overflow-wrap:anywhere; }

/* ═══ плитка суммы (пресет) ═══ */
.preset { flex:1 1 calc(50% - 4px); min-width:132px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-height:64px; padding:9px 8px; text-align:center;
  background:var(--white); border:2px solid var(--line); border-radius:var(--r-box); cursor:pointer; }
.preset.on { background:var(--blue); color:var(--white); }
.preset .pop { font-size:10px; line-height:13px; font-weight:600; color:var(--accent);
  text-transform:uppercase; letter-spacing:.2px; }
.preset.on .pop { color:var(--white); }
.preset .amt { font-weight:700; font-size:17px; line-height:21px; }
.preset .bon { font-size:11px; line-height:14px; font-weight:500; color:var(--muted); }
.preset .bon.none { color:var(--faint); }
.preset.on .bon, .preset.on .bon.none { color:rgba(255,255,255,.85); }

/* ═══ сообщение об ошибке в форме ═══ */
.err { padding:9px 12px; border-radius:var(--r-box); background:#FFE3DB;
  border:1px solid var(--bad); color:var(--bad); font-weight:500; overflow-wrap:anywhere; }
.act-sm.danger { color:var(--bad); border-color:var(--bad); background:var(--white); }

/* ═══ блок приглашения на главной (макет Frame 16: голубая карточка с картинкой) ═══ */
.invite-home {
  position:relative; overflow:hidden;
  background:var(--blue); border:2px solid var(--line); border-radius:var(--r-card);
  padding:14px; min-height:108px; display:flex; flex-direction:column; cursor:pointer;
}
.invite-home .big {
  font-family:var(--f-num); font-weight:700; font-size:40px; line-height:44px;
  letter-spacing:-.8px; color:var(--paper);
}
.invite-home .sub {
  font-family:var(--f-ui); font-weight:500; font-size:13px; line-height:16.3px;
  letter-spacing:-.13px; color:var(--paper); max-width:58%; overflow-wrap:anywhere;
}
.invite-home img {
  position:absolute; right:-8px; bottom:-6px; width:215px; max-width:58%;
  height:auto; pointer-events:none;
}

/* ═══ ссылка на канал (макет Frame 71: светлая пилюля, голубой текст) ═══ */
.tg-link {
  display:flex; align-items:center; justify-content:center; gap:12px;
  min-height:51px; padding:14px 16px;
  background:var(--paper); border:2px solid var(--line); border-radius:100px;
  color:var(--blue); font-family:var(--f-ui); font-weight:600; font-size:15px;
  line-height:18.8px; letter-spacing:-.15px; cursor:pointer; width:auto; align-self:stretch;
}
.tg-link svg { width:19px; height:16px; flex:none; }

/* ═══ раскрывающийся блок в карточке (привязка почты) ═══ */
.mini-form { display:flex; flex-direction:column; gap:8px; padding:10px 0 2px; min-width:0; }
.mf-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mf-t { font-weight:600; font-size:15px; line-height:20.5px; }
.mf-d { color:var(--muted); overflow-wrap:anywhere; }
.mf-alt { align-self:flex-start; padding:4px 0; color:var(--blue);
  font-weight:600; font-size:13px; line-height:17.8px; cursor:pointer; text-align:left; }