/* Sut Team — Telegram Mini App · DC2 дизайны (Claude Design экспортынан, пиксель-дәл)
   Палитра: қою жасыл-қара фон + қызғылт сары акцент (#FF8B4D) + Nunito қаріпі.
   МАҢЫЗДЫ: ескі класс/айнымалы атаулары САҚТАЛҒАН (балама қабат) — app.js-тің барлық
   экраны бірден жаңа түске көшеді, құрылымы өзгертілгендері дизайнға дәл сәйкес. */

/* =========================================================================
   0. ҚАРІП — Nunito (өз серверде, variable: 400-900 бір файлда)
   ========================================================================= */
@font-face{ font-family:'Nunito'; font-style:normal; font-weight:400 900; font-display:swap;
  src:url("assets/fonts/nunito-cyr-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:'Nunito'; font-style:normal; font-weight:400 900; font-display:swap;
  src:url("assets/fonts/nunito-cyr.woff2") format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face{ font-family:'Nunito'; font-style:normal; font-weight:400 900; font-display:swap;
  src:url("assets/fonts/nunito-lat-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:'Nunito'; font-style:normal; font-weight:400 900; font-display:swap;
  src:url("assets/fonts/nunito-lat.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; }

/* =========================================================================
   1. ТОКЕНДЕР — dark (басты) + light · ДИЗАЙН ПАЛИТРАСЫ (th-dark/th-light дәл көшірме)
   ========================================================================= */
:root{ --ts:1; }
:root,
[data-theme="dark"]{
  /* — дизайнның өз токендері — */
  --bg:#040A06;
  --bg-grad:radial-gradient(130% 90% at 85% -10%,#0E2015 0%,#040A06 58%);
  --sheet:#10160F; --pop:#FFFFFF;
  --barstripe:repeating-linear-gradient(135deg,rgba(255,255,255,.16) 0 2px,rgba(255,255,255,.05) 2px 6px);
  --card:linear-gradient(155deg,rgba(255,255,255,.085),rgba(255,255,255,.028) 60%,rgba(255,255,255,.05));
  --card2:rgba(255,255,255,.1); --stroke:rgba(255,255,255,.09);
  --text:#FFFFFF; --muted:rgba(255,255,255,.72); --faint:rgba(255,255,255,.5);
  --navbg:rgba(8,13,9,.94);
  --accent:#FF8B4D; --on-accent:#2A1206;
  /* Иесінің талабымен ЕШҚАШАН жасыл болмайтын екі жер:
     астыңғы жолақ пен адам аватары. Басты бетте акцент жасыл болса да
     бұлар осы айнымалыны алады, сондықтан қызғылт сары қалады. */
  --orange:#FF8B4D; --orange-ink:#2A1206;
  --chip-on:#FFFFFF; --chip-on-fg:#0A0F0C;
  --blue:#01A0E4; --green:#00D399; --red:#FF5C5C;
  --green-bg:rgba(0,211,153,.12); --accent-bg:rgba(255,139,77,.14);
  --red-bg:rgba(255,92,92,.14); --blue-bg:rgba(1,160,228,.14);
  /* — ЕСКІ атаулардың баламасы (app.js-тің барлық экраны үшін) — */
  --surface:#10160F; --surface-2:rgba(255,255,255,.07); --surface-3:rgba(255,255,255,.12);
  --border:rgba(255,255,255,.09); --border-soft:rgba(255,255,255,.06);
  --text-muted:rgba(255,255,255,.72); --text-dim:rgba(255,255,255,.5);
  --primary:#FF8B4D; --primary-hover:#FFA470; --primary-ink:#2A1206;
  --success:#00D399; --warning:#E3B341; --danger:#FF5C5C;
  --host:#111312;
  color-scheme:dark;
}
[data-theme="light"]{
  --bg:#F3F5F2;
  --bg-grad:radial-gradient(130% 90% at 85% -10%,#FBF3EC 0%,#F3F5F2 58%);
  --sheet:#FFFFFF; --pop:#FFFFFF;
  --barstripe:repeating-linear-gradient(135deg,rgba(10,15,12,.15) 0 2px,rgba(10,15,12,.04) 2px 6px);
  --card:linear-gradient(155deg,#FFFFFF,#FAFBFA);
  --card2:#E8ECE7; --stroke:rgba(10,15,12,.09);
  --text:#0A0F0C; --muted:rgba(10,15,12,.66); --faint:rgba(10,15,12,.46);
  --navbg:rgba(255,255,255,.95);
  --accent:#F97A38; --on-accent:#2A1206;
  --orange:#F97A38; --orange-ink:#2A1206;
  --chip-on:#0A0F0C; --chip-on-fg:#FFFFFF;
  --blue:#0189C4; --green:#00A87A; --red:#E04848;
  --green-bg:rgba(0,168,122,.12); --accent-bg:rgba(249,122,56,.14);
  --red-bg:rgba(224,72,72,.12); --blue-bg:rgba(1,137,196,.12);
  --surface:#FFFFFF; --surface-2:#EDEFEC; --surface-3:#E8ECE7;
  --border:rgba(10,15,12,.09); --border-soft:rgba(10,15,12,.06);
  --text-muted:rgba(10,15,12,.66); --text-dim:rgba(10,15,12,.46);
  --primary:#F97A38; --primary-hover:#FF8B4D; --primary-ink:#FFFFFF;
  --success:#00A87A; --warning:#C79320; --danger:#E04848;
  --host:#E9EBE8;
  color-scheme:light;
}

/* =========================================================================
   2. БАЗА / RESET
   ========================================================================= */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; overflow:hidden; }
body{
  font-family:'Nunito', system-ui, sans-serif; font-weight:500; letter-spacing:.1px;
  background:var(--host); color:var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
}
input,button,textarea,select{ font-family:inherit; }
a{ color:var(--accent); text-decoration:none; }
::-webkit-scrollbar{ width:0; height:0; }
.tg-app ::-webkit-scrollbar{ width:0; height:0; }
.noscroll::-webkit-scrollbar{ display:none; }

/* =========================================================================
   3. ҚАБЫҚ (телефон контейнері)
   ========================================================================= */
.tg-host{
  min-height:100dvh; display:flex; justify-content:center; align-items:flex-start; padding:0;
  background:var(--host);
}
.tg-app{
  position:relative; width:100%; max-width:430px; height:var(--app-h,100dvh); max-height:932px;
  display:flex; flex-direction:column; background:var(--bg-grad); color:var(--text);
  overflow:hidden; box-shadow:0 0 80px rgba(0,0,0,.5);
}
/* ⚠️ НАҒЫЗ ТЕЛЕФОНДА қосымша экранды ТОЛЫҚ алады (2026-08-16 түзетілді).
   Жоғарыдағы `max-height:932px` пен сұр фон — тек КОМПЬЮТЕРДЕН қарағанда
   «телефон рамкасын» көрсету үшін керек. Ал ұзын телефонда (мыс. iPhone 16
   Pro Max = 956 нүкте) сол шек астыңғы жағында СҰР ЖОЛАҚ қалдыратын —
   иесі байқады. Енді енсіз экранда шек те, көлеңке де, бөтен фон да жоқ. */
@media (max-width:700px){
  /* ⚠️ `html,body` да боялуы МІНДЕТТІ (2026-08-16, екінші талпыныс).
     Себебі: Safari төменгі жолақ аймағында (адрес-жолақ жиналған жер +
     home-индикатор, ~45 нүкте) біздің div-терді емес, БЕТТІҢ ӨЗ ФОНЫН
     (html/body) көрсетеді. Ол ашық темада --host (сұр) болатын — сол сұр
     жолақ болып көрініп тұрды. Бірінші түзету тек .tg-host-ты бояған —
     жеткіліксіз болды (иесі «өзгермеді» деді, өлшем: 69 = 24 + 45 нүкте). */
  html, body{ background:var(--bg); }
  .tg-host{ background:var(--bg); }
  /* ⚠️ ЖОҒАРҒЫ ҚАУІПСІЗ ШЕТ — CSS-те, ӘМБЕБАП (2026-08-16, үшінші түзету).
     Бұрын мұны JS-те «Telegram-сыз болса ғана» деп қосатынмын. Ал Telegram
     толық экран режимінде де мазмұн сағаттың астына кіреді — сонда ішкі
     беттердің «←» түймесі БАСЫЛМАЙДЫ (иесі ревизия бетінде байқады):
     телефонның жоғарғы жолағында басу ЖҮЙЕГЕ кетеді, бетке жетпейді.
     Шешім: env() мәнін ӘРДАЙЫМ қолданамыз — ол шынымен керек болғанда ғана
     нөлден үлкен. Telegram өз тақырыбын берсе — мән 0, ештеңе өзгермейді.
     `.fs-overlay` (inset:0) осы padding-тың ІШІНЕ орналасады, сондықтан
     толық экранды беттердің тақырыбы да автоматты түрде қауіпсіз аймақта. */
  .tg-app{ max-height:none; box-shadow:none; padding-top:env(safe-area-inset-top,0px); }
  /* ⚠️ Толық экранды қабат ӨЗ шетін ҚОЙЫП алуы керек (өлшеумен дәлелденді).
     Себебі: `position:absolute; inset:0` элементі ата-элементтің ІШКІ шетін
     емес, ЖИЕК шетін бойлайды — яғни жоғарыдағы бос орынды ЖАУЫП кетеді.
     Сол себепті ревизия/қабылдау беттерінің «←» түймесі телефон сағатының
     астында қалып, БАСЫЛМАЙТЫН еді (иесі 2026-08-16 байқады). */
  .fs-overlay, .sheet-back{ padding-top:env(safe-area-inset-top,0px); }
}
/* Дизайндағы фондық жарқылдар (қызғылт сары + жасыл дақ) */
.tg-app::before{
  content:""; position:absolute; top:-18%; left:-12%; width:72%; height:58%; border-radius:50%;
  background:radial-gradient(circle,rgba(255,139,77,.11) 0%,transparent 65%);
  z-index:0; pointer-events:none; animation:bgDrift1 20s ease-in-out infinite;
}
.tg-app::after{
  content:""; position:absolute; bottom:-14%; right:-16%; width:64%; height:48%; border-radius:50%;
  background:radial-gradient(circle,rgba(0,211,153,.07) 0%,transparent 65%);
  z-index:0; pointer-events:none; animation:bgDrift2 26s ease-in-out infinite;
}
[data-theme="light"] .tg-app::before{ background:radial-gradient(circle,rgba(249,122,56,.10) 0%,transparent 65%); }
[data-theme="light"] .tg-app::after{ background:radial-gradient(circle,rgba(0,168,122,.07) 0%,transparent 65%); }
#beams{ display:none; }

.tg-header{
  flex:none; z-index:30; display:flex; align-items:center; gap:9px;
  padding:10px 18px 10px; position:relative;
  background:transparent;
}
.tg-header::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:14px;
  background:linear-gradient(180deg, var(--bg), transparent); pointer-events:none; opacity:.75;
}
.tg-header[hidden], .tg-nav[hidden]{ display:none !important; }

/* ⚠️ 2026-08-17: шеті −18px еді, ал оны ұстап тұрған контейнер (.tg-scroll,
   толық экран беттері) 16px padding береді. Сондықтан «Артқа» жолағы екі
   жағынан 2 нүктеден АСЫП тұратын да, бет жанжаққа сәл жылжитын (иесі байқаған).
   Өлшеп тексерілді: 343 орында 345 нүкте. Енді контейнермен ДӘЛ теңестірілді. */
.backbar{ position:sticky; top:-12px; z-index:25; background:var(--bg);
  margin:-12px -16px 12px; padding:12px 16px 8px; }
.backbar::after{ content:""; position:absolute; left:0; right:0; top:100%; height:12px;
  background:linear-gradient(180deg, var(--bg), transparent); pointer-events:none; }
.tg-scroll{
  position:relative; z-index:1; flex:1; overflow-y:auto; display:flex; flex-direction:column;
  padding:10px 16px 16px; scrollbar-width:none;
  /* ⚠️ КӨЛДЕНЕҢ ЖЫЛЖУДЫ ТЫЯМЫЗ (2026-08-16, иесі: «жан-жаққа жылжып кетіп жатыр»).
     Себебі: `overflow-y:auto` қойылып, x осі «visible» қалған. Ондай жағдайда
     браузер x-ті де `auto` қылады — бір ұзын сөз (мыс. «НФ-00005886») шықса,
     БҮКІЛ бет солға-оңға сырғанайтын. */
  overflow-x:hidden;
}
.tg-scroll > *{ flex-shrink:0; }
/* Ұзын сөз/код жолды ЖАРЫП жіберіп, ені өспесін (жоғарыдағы себептің ТҮБІРІ).
   Тек мәтін элементтеріне қатысты — кесте/сурет өз ережесімен қала береді. */
.tg-scroll, .fs-overlay, .sheet{ overflow-wrap:anywhere; }
/* Икемді жолдағы бала элемент өз мазмұнынан кішірейе алсын (әйтпесе ұзын мәтін
   контейнерді керіп, көлденең жылжу қайта пайда болады). */
.tg-scroll *, .fs-overlay *{ min-width:0; }

/* Төменгі мәзір — дизайндағыдай: белсенді таб = қызғылт сары дөңгелек белгіше */
.tg-nav{
  flex:none; z-index:30; display:flex; padding:8px 12px calc(9px + env(safe-area-inset-bottom));
  background:var(--navbg); backdrop-filter:blur(18px);
  border-top:1px solid var(--stroke);
}
.tg-nav button{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; border:none; background:none;
  cursor:pointer; padding:5px 4px; color:var(--faint); transition:color .2s;
  font-family:inherit; font-weight:700;
}
.tg-nav button .nic{
  width:40px; height:28px; border-radius:999px; display:grid; place-items:center;
  background:transparent; color:var(--faint); transition:background .25s,color .25s;
}
.tg-nav button.active{ color:var(--text); }
.tg-nav button.active .nic{ background:var(--orange,var(--accent)); color:var(--orange-ink,var(--on-accent)); animation:tabPop .45s cubic-bezier(.34,1.56,.64,1); }
.tg-navpop{ animation:tabPop .45s cubic-bezier(.34,1.56,.64,1); }

/* Header батырмалары (тема/қоңырау/онлайн) */
.hbtn{
  border:1px solid var(--stroke); background:var(--card2); cursor:pointer; color:var(--muted);
  height:34px; min-width:34px; width:34px; border-radius:999px; display:grid; place-items:center; flex:none;
  padding:0; transition:filter .18s, background-color .18s, border-color .18s;
}
.hbtn.wide{ width:auto; max-width:150px; padding:0 11px; }
@media (hover:hover){ .hbtn:hover{ filter:brightness(1.12); } }

/* =========================================================================
   4. ТИПОГРАФИЯ / КӨМЕКШІ
   ========================================================================= */
.muted{ color:var(--muted); } .dim{ color:var(--faint); } .center{ text-align:center; }
.mt{ margin-top:14px; }
.eyebrow{ font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--faint); text-transform:uppercase; }
.section-title{ font-size:22px; font-weight:900; letter-spacing:-.01em; margin:2px 0 16px; }
h1{ font-family:inherit; }

/* =========================================================================
   5. БАТЫРМА — дизайн: толық дөңгелек (pill), қызғылт сары
   ========================================================================= */
/* ⚠️ `.tg-app .btn` деп жазылған (жай `.btn` емес). Себебі: төменде
   `.tg-app button{ transition: … }` деген ортақ ереже бар, оның салмағы
   (specificity) жоғары болғандықтан ол `.btn`-нің серпінді анимациясын
   БАСЫП тастайтын — түйме басқанда жауабы баяу (.3с) көрінетін.
   Енді салмағы теңелді де, түйме Apple-дегідей ЛЕЗДЕ серпіледі. */
.tg-app .btn, .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; border:none; cursor:pointer;
  /* Apple ережесі: саусақ тиетін жер кемі 44px болсын — әйтпесе тимей қалады */
  min-height:46px; padding:13px 22px; border-radius:999px;
  font-family:inherit; font-size:14px; font-weight:800; line-height:1;
  background:var(--accent); color:var(--on-accent); position:relative; overflow:hidden;
  box-shadow:0 10px 26px -8px rgba(255,139,77,.45);
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  user-select:none; -webkit-user-select:none;
  transition:transform .17s cubic-bezier(.34,1.56,.64,1), filter .18s ease, box-shadow .24s ease, background-color .18s, color .18s, border-color .18s, opacity .18s;
}
.tg-app .btn:active, .btn:active{ transform:scale(.95); }
@media (hover:hover){ .btn:hover{ background:var(--primary-hover); } }
/* Пернетақтамен жүргенде түйме қайда тұрғаны КӨРІНСІН (тінтуірмен басқанда шықпайды) */
.btn:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }
.tg-app .btn.block, .btn.block{ width:100%; }
/* ⚠️ ӘР ТҮРГЕ ДЕ `.tg-app` ЖАЗЫЛҒАН — әйтпесе бәрі негізгі түске боялып кетеді.
   Себебі: жоғарыдағы `.tg-app .btn` ережесінің «салмағы» жай `.btn-2`-ден
   АУЫР (екі белгі бір белгіден күшті). Сондықтан қызыл түйме де жасыл
   болып шығып тұрған — қауіпті әрекет қалыпты түйме сияқты көрінген.
   (2026-08-21 табылды, FIXES.md-ке жазылды.) */
.tg-app .btn-2, .btn-2{ background:var(--card2); color:var(--text); border:1px solid var(--stroke); box-shadow:none; font-weight:700; }
.tg-app .btn-ghost, .btn-ghost{ background:transparent; color:var(--muted); box-shadow:none; font-weight:700; }
.tg-app .btn-green, .btn-green{ background:var(--green); color:#06241a; box-shadow:none; }
/* Қызыл түйменің ЕКІ аты да жүреді: мини-апта .btn-red, панельде .btn-danger.
   Екеуін де жазып қойдық — код көшірілгенде түйме түссіз қалып қоймасын. */
.tg-app .btn-red, .tg-app .btn-danger,
.btn-red, .btn-danger{ background:var(--red); color:#fff; box-shadow:none; }
/* Кіші түйме (панельдегі .btn-sm-пен бір ат) — саусаққа әлі де ыңғайлы */
.tg-app .btn-sm, .btn-sm{ min-height:36px; padding:8px 14px; font-size:12.5px; }
/* ⚠️ ЕКІ жазылу да керек: `disabled` атрибуты ЖӘНЕ JS-тен қойылған қасиет.
   Бұрын тек біреуі болатын — өшірілген түйме тірідей көрініп тұратын. */
.tg-app .btn[disabled], .tg-app .btn:disabled,
.btn[disabled], .btn:disabled{ opacity:.5; cursor:default; box-shadow:none; }
.tg-app .btn[disabled]:active, .tg-app .btn:disabled:active,
.btn[disabled]:active, .btn:disabled:active{ transform:none; }
.spin{ width:15px; height:15px; border:2.5px solid currentColor; border-top-color:transparent; border-radius:50%;
  animation:tg-spin .7s linear infinite; display:inline-block; }

/* =========================================================================
   6. КАРТА — дизайн: шыны-градиент бет
   ========================================================================= */
.card{ background:var(--card); border:1px solid var(--stroke); border-radius:20px; padding:16px; }

/* =========================================================================
   7. ЧИП / ПИЛЮЛЯ — белсендісі АҚ (дизайндағыдай)
   ========================================================================= */
.chip{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800; padding:7px 14px; border-radius:999px; }
.chip .dot{ width:8px; height:8px; border-radius:50%; background:currentColor; }
.chip.ok{ background:var(--green-bg); color:var(--green); }
.chip.warn{ background:rgba(227,179,65,.14); color:var(--warning); }
.chip.bad{ background:var(--red-bg); color:var(--red); }
.chip.acc{ background:var(--accent-bg); color:var(--accent); }
.chip.on{ background:var(--chip-on); color:var(--chip-on-fg); }
.pill{ display:inline-flex; align-items:center; font-size:12px; font-weight:800; padding:5px 12px; border-radius:999px;
  background:var(--card2); color:var(--muted); border:none; }
.pill.green{ background:var(--green-bg); color:var(--green); }
.pill.yellow{ background:rgba(227,179,65,.14); color:var(--warning); }
.pill.red{ background:var(--red-bg); color:var(--red); }
.pill.acc{ background:var(--accent-bg); color:var(--accent); }

/* =========================================================================
   8. АВАТАР
   ========================================================================= */
.avatar{ border-radius:14px; display:grid; place-items:center; color:#fff; font-weight:800; flex:none; user-select:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }
.avatar.round{ border-radius:50%; }

/* =========================================================================
   9. ЖҰЛДЫЗ
   ========================================================================= */
.stars{ color:var(--accent); letter-spacing:2px; font-size:14px; line-height:1; }

/* =========================================================================
   10. ФОРМА
   ========================================================================= */
.field{ margin-bottom:13px; }
.field label{ display:block; font-size:13px; font-weight:700; color:var(--muted); margin-bottom:7px; }
.field input,.field select,.field textarea{
  width:100%; background:var(--card2); border:1px solid var(--stroke); border-radius:14px;
  color:var(--text); font-family:inherit; font-size:14.5px; font-weight:600; padding:14px 15px; outline:none;
  transition:border-color .18s, box-shadow .18s;
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg); }
.field textarea{ resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:var(--faint); }
.checkbox{ display:flex; align-items:center; gap:9px; font-size:14px; cursor:pointer; color:var(--muted); }

/* =========================================================================
   11. МЕНЮ-ЭЛЕМЕНТ
   ========================================================================= */
.menu-item{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer; background:var(--card);
  border:1px solid var(--stroke); border-radius:18px; padding:14px 15px; color:var(--text); position:relative; overflow:hidden;
  transition:transform .12s; font-family:inherit; }
.menu-item:active{ transform:scale(.98); }
.menu-ic{ width:40px; height:40px; border-radius:14px; display:grid; place-items:center; flex:none; }

.item{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; border-bottom:1px solid var(--border-soft); }
.item:last-child{ border-bottom:none; }
.item .it-title{ font-size:14.5px; font-weight:700; } .item .it-sub{ font-size:12px; color:var(--faint); margin-top:2px; }
.card-title{ font-size:15px; font-weight:800; margin-bottom:12px; }
.lb-row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--border-soft); }
.lb-row:last-child{ border-bottom:none; }
.lb-name{ flex:1; font-weight:700; font-size:14px; min-width:0; }
.lb-score{ font-weight:900; }
.name{ font-size:16px; font-weight:800; }

/* =========================================================================
   12. ПРОГРЕСС / РИНГ / БАР
   ========================================================================= */
.tg-ring{ transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1); }
.tg-bar{ transform-origin:bottom; }
.tg-trendline{ stroke-dasharray:1000; stroke-dashoffset:1000; }
.growbar{ transform-origin:bottom; animation:growUp .8s cubic-bezier(.2,.8,.2,1) both; }
.fillbar{ transform-origin:left; animation:fillIn .8s cubic-bezier(.2,.8,.2,1) both; }

/* =========================================================================
   13. BOTTOM-SHEET / OVERLAY
   ========================================================================= */
.sheet-back{
  position:absolute; inset:0; z-index:55; background:rgba(0,0,0,.55); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .28s ease; display:flex; align-items:flex-end;
}
.sheet-back.show{ opacity:1; }
.sheet{
  width:100%; background:var(--sheet); border-radius:26px 26px 0 0; border-top:1px solid var(--stroke);
  box-shadow:0 -24px 60px -16px rgba(0,0,0,.6); padding:8px 18px calc(20px + env(safe-area-inset-bottom));
  transform:translateY(100%); transition:transform .5s cubic-bezier(.32,.72,0,1); max-height:86vh; overflow-y:auto;
}
.sheet-back.show .sheet{ transform:translateY(0); }
.sheet .handle{ width:38px; height:4px; border-radius:99px; background:var(--card2); margin:6px auto 14px; }

.fs-overlay{
  position:absolute; inset:0; z-index:60; background:var(--bg-grad); display:flex; flex-direction:column;
  transform:translateX(28px); opacity:0; transition:transform .42s cubic-bezier(.32,.72,0,1), opacity .38s;
}
.fs-overlay.show{ transform:translateX(0); opacity:1; }

/* =========================================================================
   14. TOAST
   ========================================================================= */
.toast{
  position:absolute; left:50%; transform:translateX(-50%) translateY(14px) scale(.92); bottom:96px; z-index:70;
  display:flex; align-items:center; gap:10px; background:var(--green); color:#06241a; padding:13px 20px; border-radius:999px;
  font-size:14px; font-weight:800; box-shadow:0 16px 40px -8px rgba(0,0,0,.5); opacity:0;
  transition:opacity .38s, transform .45s cubic-bezier(.32,.72,0,1); pointer-events:none; max-width:340px;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
.toast.bad{ background:var(--red); color:#fff; }
/* Кезек жолағы көрініп тұрса — көпіршік жоғарырақ (екеуі бірінің үстіне бірі шықпасын) */
body.has-sync .toast{ bottom:158px; }

/* =========================================================================
   15. SPLASH / ЖҮКТЕЛУ
   ========================================================================= */
.splash{ flex:1; min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; padding:30px; }
.splash .ic{ width:72px; height:72px; border-radius:24px; background:linear-gradient(145deg,var(--accent),#e46a2e);
  display:grid; place-items:center; box-shadow:0 16px 40px -10px rgba(255,139,77,.5); }
.skel{ background:linear-gradient(90deg,var(--surface-2),var(--surface-3),var(--surface-2)); background-size:300px 100%;
  animation:tg-shimmer 1.3s infinite linear; border-radius:12px; }

#offlineBar{ position:fixed; left:50%; bottom:calc(var(--nav-h,72px) + 12px); transform:translate(-50%,140%);
  z-index:80; max-width:calc(100% - 28px); padding:9px 16px; border-radius:999px; font-size:13px; font-weight:800;
  color:#3a2a08; background:linear-gradient(180deg,#f2c14e,#e0a92f); box-shadow:0 10px 26px -8px rgba(0,0,0,.5);
  white-space:nowrap; opacity:0; transition:transform .32s cubic-bezier(.2,.9,.3,1.1), opacity .32s; pointer-events:none; }
#offlineBar.show{ transform:translate(-50%,0); opacity:1; }
/* Кезек жолағы: ішінде «Қазір жіберу» түймесі бар → БАСУҒА болатын болуы керек
   (ескі жолақ pointer-events:none еді — түйме басылмай қалар еді). */
#offlineBar.sync-bar{ display:flex; align-items:center; gap:10px; pointer-events:auto; padding:8px 8px 8px 16px; }
#offlineBar.sync-bar.bad{ color:#fff; background:linear-gradient(180deg,#E5544B,#C93A31); }   /* НАҒЫЗ сәтсіздік */
#offlineBar.sync-bar.good{ color:#04241A; background:linear-gradient(180deg,#4CE2AE,#00BC85); } /* бәрі кетті */
#offlineBar .sync-go{ border:none; cursor:pointer; font-family:inherit; font-size:12px; font-weight:800;
  padding:7px 13px; border-radius:999px; background:rgba(0,0,0,.20); color:inherit; white-space:nowrap; }
#offlineBar .sync-go:active{ transform:scale(.96); }

/* Карточкадағы кішкентай белгі: ⏳ кезекте · ⚠️ жіберілмеді */
.pill-queued,.pill-failed{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  font-size:calc(12px * var(--ts,1)); font-weight:800; padding:6px 11px; border-radius:999px; }
.pill-queued{ background:var(--card2); color:var(--muted); }
.pill-failed{ background:var(--red-bg); color:var(--red); }

/* =========================================================================
   16. КОНФЕТТИ
   ========================================================================= */
.confetti{ position:absolute; z-index:65; width:9px; height:9px; border-radius:2px; pointer-events:none; will-change:transform,opacity; }

/* =========================================================================
   17. KEYFRAMES (дизайннан + ескі атаулар)
   ========================================================================= */
@keyframes tg-spin{ to{ transform:rotate(360deg); } }
@keyframes tg-pulse{ 0%{ box-shadow:0 0 0 0 rgba(0,211,153,.55);} 70%{ box-shadow:0 0 0 22px rgba(0,211,153,0);} 100%{ box-shadow:0 0 0 0 rgba(0,211,153,0);} }
@keyframes tg-float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
@keyframes tg-floatcard{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-5px);} }
@keyframes tg-typing{ 0%,60%,100%{ transform:translateY(0); opacity:.4;} 30%{ transform:translateY(-5px); opacity:1;} }
@keyframes tg-draw{ to{ stroke-dashoffset:0; } }
@keyframes tg-shimmer{ 0%{ background-position:-300px 0;} 100%{ background-position:300px 0;} }
@keyframes tg-rip{ to{ transform:scale(2.6); opacity:0; } }
.tg-ripple{ position:absolute; border-radius:50%; transform:scale(0); background:rgba(255,255,255,.4); pointer-events:none; animation:tg-rip .6s ease-out; }
.pulse{ animation:tg-pulse 2.4s infinite; }
.floatcard{ animation:cardBreath 6s ease-in-out infinite; }

/* — дизайнның өз анимациялары — */
@keyframes bgDrift1{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(26px,34px);} }
@keyframes bgDrift2{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(-30px,-24px);} }
@keyframes fabFloat{ 0%,100%{ transform:translate3d(0,0,0);} 50%{ transform:translate3d(0,-7px,0);} }
@keyframes cardBreath{ 0%,100%{ transform:translate3d(0,0,0);} 50%{ transform:translate3d(0,-5px,0);} }
@keyframes rise{ from{ opacity:0; transform:translateY(16px) scale(.98);} to{ opacity:1; transform:none;} }
@keyframes pageIn{ from{ opacity:0; transform:translateX(28px);} to{ opacity:1; transform:none;} }
@keyframes popIn{ from{ opacity:0; transform:scale(.86);} to{ opacity:1; transform:scale(1);} }
@keyframes tabPop{ 0%{ transform:scale(.82);} 55%{ transform:scale(1.14);} 100%{ transform:scale(1);} }
@keyframes ringDraw{ to{ stroke-dashoffset:0; } }
@keyframes growUp{ from{ transform:scaleY(0);} }
@keyframes fillIn{ from{ transform:scaleX(0);} }
@keyframes sheen{ from{ transform:translateX(-160%) skewX(-18deg);} to{ transform:translateX(260%) skewX(-18deg);} }
@keyframes livePulse{ 0%,100%{ opacity:1;} 50%{ opacity:.35;} }
@keyframes shimmer{ from{ background-position:-360px 0;} to{ background-position:360px 0;} }
@keyframes radioPop{ 0%{ transform:scale(.7);} 55%{ transform:scale(1.18);} 100%{ transform:scale(1);} }
@keyframes roadDash{ from{ background-position:0 0;} to{ background-position:-44px 0;} }
@keyframes truckDrive{ 0%{ left:-92px;} 100%{ left:calc(100% - 114px);} }
@keyframes truckIn{ 0%,74%{ transform:scale(1); opacity:1;} 100%{ transform:scale(.42); opacity:0;} }
@keyframes truckBob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-1.5px);} }
@keyframes ringIn{ from{ stroke-dashoffset:226.2;} }

/* Универсал батырма қозғалысы (дизайндағыдай серіппелі) */
.tg-app button{ letter-spacing:.1px; transition:transform .3s cubic-bezier(.2,.8,.2,1), filter .18s ease, box-shadow .24s ease, background-color .25s, color .25s, border-color .25s; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.tg-app button:active{ transform:scale(.96); filter:brightness(1.07); }
@media (hover:hover){ .tg-app button:hover{ filter:brightness(1.05); } }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .tg-app button:active{ transform:none; }
}

/* — DC2 толық көшіру: қосымша keyframes (агент NOTES-терінен) — */
@keyframes bannerIn{ from{ opacity:0; transform:translateY(-84px) scale(.96);} to{ opacity:1; transform:none;} }
@keyframes bannerOut{ to{ opacity:0; transform:translateY(-84px) scale(.96);} }
@keyframes fadeIn{ from{ opacity:0;} to{ opacity:1;} }
@keyframes micPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,92,92,.45);} 50%{ box-shadow:0 0 0 12px rgba(255,92,92,0);} }
@keyframes softPulse{ 0%,100%{ opacity:.35; transform:scale(.85);} 50%{ opacity:1; transform:scale(1);} }
@keyframes riseY{ from{ transform:translateY(12px);} to{ transform:none;} }
@keyframes waveExp{ from{ transform:scale(0); opacity:.85;} 70%{ opacity:.3;} to{ transform:scale(34); opacity:0;} }
@keyframes zoomIn{ from{ opacity:0; transform:scale(.94) translateY(12px);} to{ opacity:1; transform:none;} }
@keyframes pulse{ 0%,100%{ opacity:.35; transform:scale(.85);} 50%{ opacity:1; transform:scale(1);} }

/* — Анимация-аудит түзетулері (дизайн эталонына дәлдеу) — */
@keyframes doorPulse{ 0%,100%{ opacity:.85;} 50%{ opacity:1;} }
@keyframes logoIn{ from{ opacity:0; transform:translateY(10px) scale(.9);} to{ opacity:.95; transform:none;} }
@keyframes logoFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }
@keyframes scanLine{ 0%,100%{ transform:translateY(-17px); opacity:0;} 20%,80%{ opacity:1;} 50%{ transform:translateY(17px);} }
@keyframes snowFall{ 0%{ transform:translateY(-20px) translateX(0); opacity:0;} 12%{ opacity:.85;} 100%{ transform:translateY(880px) translateX(var(--sx)); opacity:0;} }
@keyframes waveBar{ 0%,100%{ transform:scaleY(.3);} 50%{ transform:scaleY(1);} }


/* =========================================================================
   ЖАСЫЛ ТҮС — ТЕК БАСТЫ БЕТТЕ (иесі, 2026-08-17)
   Белгіні app.js қояды: басты бет салынғанда <body data-home>.
   Басқа бетке өткенде белгі өшеді де, түс өздігінен қызғылт сарыға оралады.
   ⚠️ Астыңғы жолақ пен аватар бұл жерде де қызғылт сары — олар --orange алады.
   ========================================================================= */
body[data-home]{
  --accent:#20D89F; --on-accent:#032A1F;
  --accent-bg:rgba(32,216,159,.14);
  --primary:#20D89F; --primary-hover:#4DE9B6; --primary-ink:#032A1F;
}
[data-theme="light"] body[data-home]{
  --accent:#14B384; --on-accent:#032A1F;
  --accent-bg:rgba(20,179,132,.14);
  --primary:#14B384; --primary-hover:#20D89F; --primary-ink:#032A1F;
}

/* ⚠️ ЖАСЫЛ ТЕК БАСТЫ БЕТТЕ (иесі 2026-08-18).
   Мәселе: Ревизия мен Қабылдау экрандары басты беттің ҮСТІНЕН ашылады
   (`openFullscreen`) да, `render()` арқылы жүрмейді — сондықтан
   `<body data-home>` белгісі сақталып, жасыл түс соларға да «сіңіп»
   кететін. Терезеше (sheet) де солай.
   Шешім: түсті ЭЛЕМЕНТКЕ байлаймыз — толық экран мен терезешенің ішінде
   акцент әрдайым бұрынғы қызғылт сары. Басты беттің ӨЗІ жасыл қалады. */
.fs-overlay, .sheet-back{
  --accent:#FF8B4D; --on-accent:#2A1206;
  --accent-bg:rgba(255,139,77,.14);
  --primary:#FF8B4D; --primary-hover:#FFA470; --primary-ink:#2A1206;
}
[data-theme="light"] .fs-overlay, [data-theme="light"] .sheet-back{
  --accent:#F97A38; --on-accent:#2A1206;
  --accent-bg:rgba(249,122,56,.14);
  --primary:#F97A38; --primary-hover:#FF8B4D; --primary-ink:#2A1206;
}