@layer compatibility {




/* Base resets are provided by styles.css + redesign.css.
   This file only wires Tailwind and small global tweaks. */

html {
  scroll-behavior: smooth;
  --app-safe-top: var(--tg-content-safe-area-inset-top, env(safe-area-inset-top, 0px));
  --app-safe-bottom: var(--tg-content-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[data-platform="tg"] body {
  overscroll-behavior: none;
  min-height: var(--tg-viewport-stable-height, 100dvh);
}

html[data-platform="tg"] .navbar {
  margin-top: calc(8px + var(--app-safe-top));
}

html[data-platform="tg"] .app {
  min-height: var(--tg-viewport-stable-height, 100dvh);
  padding-bottom: calc(112px + var(--app-safe-bottom));
}

html[data-platform="tg"] .bottom-nav {
  bottom: calc(8px + var(--app-safe-bottom));
  width: calc(100% - 20px);
  max-width: 430px;
}

html[data-platform="tg"] .sheet {
  padding-bottom: calc(22px + var(--app-safe-bottom));
  max-height: calc(var(--tg-current-height, 100dvh) - var(--app-safe-top));
}

.tg-launch {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: calc(24px + var(--app-safe-top)) 24px calc(24px + var(--app-safe-bottom));
  color: var(--white, #fff);
  background:
    radial-gradient(circle at 50% 36%, rgba(99, 102, 241, .28), transparent 32%),
    linear-gradient(160deg, #090b1e, #11152f 58%, #090b1e);
}

.tg-launch-mark {
  width: 72px;
  height: 72px;
  border-radius: 24px;
  background: linear-gradient(145deg, #8b8cff, #5458ec);
  box-shadow: 0 24px 64px rgba(84, 88, 236, .38), inset 0 1px rgba(255, 255, 255, .38);
  transform: rotate(12deg);
}

.tg-launch-mark::after {
  content: "C";
  display: grid;
  place-items: center;
  height: 100%;
  color: #fff;
  font: 800 34px/1 Inter, sans-serif;
  transform: rotate(-12deg);
}

.tg-launch-name { font-size: 21px; font-weight: 800; letter-spacing: -.03em; }
.tg-launch-error { max-width: 300px; color: rgba(255,255,255,.7); text-align: center; line-height: 1.45; }
.tg-launch-loader {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255,255,255,.14);
  border-top-color: #8b8cff;
  border-radius: 50%;
  animation: tg-spin .8s linear infinite;
}
@keyframes tg-spin { to { transform: rotate(360deg); } }

.transfer-screen { padding-top: 12px; }
.transfer-hero {
  display: flex;
  gap: 15px;
  align-items: center;
  margin: 8px 0 20px;
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(94, 99, 245, .22), rgba(48, 211, 169, .08));
  border: 1px solid rgba(139, 140, 255, .25);
}
.transfer-glyph {
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  color: white;
  font-size: 28px;
  background: linear-gradient(145deg, #8b8cff, #5458ec);
  box-shadow: 0 14px 30px rgba(84, 88, 236, .3);
}
.transfer-eyebrow { color: #8b8cff; font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.transfer-hero h1 { margin: 4px 0 3px; font-size: 23px; line-height: 1.05; letter-spacing: -.04em; }
.transfer-hero p { margin: 0; color: var(--dim); font-size: 12px; }
.transfer-card {
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: 25px;
  background: linear-gradient(155deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  box-shadow: 0 24px 60px rgba(0,0,0,.24);
}
.transfer-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; margin-top: 8px; }
.transfer-search { border: 0; border-radius: 14px; padding: 0 15px; color: white; font-weight: 700; background: rgba(139,140,255,.22); }
.transfer-target { display: flex; align-items: center; gap: 11px; margin-top: 13px; padding: 12px; border-radius: 17px; background: rgba(45,212,160,.09); border: 1px solid rgba(45,212,160,.2); }
.transfer-target > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.transfer-target small { color: var(--dim); margin-top: 2px; }
.transfer-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; color: #fff; font-weight: 800; background: linear-gradient(145deg, #5458ec, #393caa); }
.transfer-ok { color: #2dd4a0; font-size: 20px; }
.transfer-amount-label { display: block; margin-top: 22px; }
.transfer-amount { display: flex; align-items: baseline; gap: 8px; margin-top: 3px; border-bottom: 1px solid var(--hairline); }
.transfer-amount input { min-width: 0; width: 100%; padding: 8px 0 10px; border: 0; outline: 0; color: white; background: transparent; font: 700 40px/1.1 "JetBrains Mono", monospace; letter-spacing: -.06em; }
.transfer-amount span { color: #8b8cff; font-size: 13px; font-weight: 800; }
.transfer-available { margin-top: 9px; color: var(--dim); font-size: 12px; }
.transfer-error { margin-top: 13px; padding: 10px 12px; border-radius: 12px; color: #ff8b9a; background: rgba(255,77,103,.1); font-size: 13px; }
.transfer-submit { width: 100%; margin-top: 19px; }

* {
  -webkit-tap-highlight-color: transparent;
}

/* Login screen always fills the viewport, opaque, and flex-centered
   (overrides redesign.css .screen.active `display:block `). */
#loginScreen.active {
  display: flex ;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: var(--bg);
}

/* Dev badges (kept subtle, same design language) */
.header .header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mock-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: var(--amb);
  background: var(--amb-bg, rgba(245, 166, 35, 0.12));
  border: 1px solid var(--amb-b, rgba(245, 166, 35, 0.25));
  padding: 3px 8px;
  border-radius: 999px;
}

.header-balance {
  font-size: 12px;
  font-weight: 700;
  color: var(--w70);
  font-family: var(--mono, "JetBrains Mono", monospace);
}


#loginScreen { display: none; }
#loginScreen.active { display: flex; }

        * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent }
    :root {
    --bg:#03111F;
    --bg1:#0b0b12;
    --bg2:#101018;
    --bg3:#16161f;
    --bg4:#1c1c28;
    
    /* Основные акцентные цвета */
    --bl4:#5b93f8;
    --bl5:#18DDE0;
    --bl6:#1f57e9;
    --bl7:#1843d6;
    
    --blg1:rgba(53,116,244,.06);
    --blg2:rgba(53,116,244,.10);
    --blg3:rgba(53,116,244,.15);
    --blb:rgba(53,116,244,.18);
    --blbs:rgba(53,116,244,.30);
    
    --w:#fff;
    --w92:rgba(255,255,255,.92);
    --w70:rgba(255,255,255,.70);
    --w50:rgba(255,255,255,.50);
    --w30:rgba(255,255,255,.30);
    --w15:rgba(255,255,255,.15);
    --w08:rgba(255,255,255,.08);
    --w05:rgba(255,255,255,.05);
    --w03:rgba(255,255,255,.03);
    
    --grn:#2dd4a0;
    --grn-bg:rgba(45,212,160,.08);
    --grn-b:rgba(45,212,160,.15);
    --red:#f0506e;
    --red-bg:rgba(240,80,110,.08);
    --red-b:rgba(240,80,110,.12);
    --amb:#f5a623;
    --amb-bg:rgba(245,166,35,.08);
    --amb-b:rgba(245,166,35,.12);
    
    --font:'Inter',-apple-system,sans-serif;
    --mono:'JetBrains Mono',monospace;
    --ease:cubic-bezier(.4,0,.2,1);
    --spring:cubic-bezier(.34,1.56,.64,1);
    
    /* Новые акцентные переменные для удобства */
    --accent:#3574f4;
    --accent-g1:var(--blg1);
    --accent-g2:var(--blg2);
    --accent-g3:var(--blg3);
    --accent-border:var(--blb);
    --accent-strong:var(--blbs);
}

/* =========================================
   ТЕМАТИЧЕСКИЕ ПАЛИТРЫ
========================================= */

/* ТЕМА: СВЕТЛАЯ */
:root[data-theme="light"] {
    --bg:#f5f5f7;
    --bg1:#ffffff;
    --bg2:#ffffff;
    --bg3:#f0f0f3;
    --bg4:#e8e8ed;
    
    --w:#000000;
    --w92:rgba(0,0,0,.92);
    --w70:rgba(0,0,0,.70);
    --w50:rgba(0,0,0,.50);
    --w30:rgba(0,0,0,.40);
    --w15:rgba(0,0,0,.15);
    --w08:rgba(0,0,0,.08);
    --w05:rgba(0,0,0,.05);
    --w03:rgba(0,0,0,.03);
    
    --bl4:#0055ff;
    --bl5:#0044ee;
    --bl6:#0033cc;
    --bl7:#0022aa;
    
    --blg1:rgba(0,85,255,.09);
    --blg2:rgba(0,85,255,.14);
    --blg3:rgba(0,85,255,.20);
    --blb:rgba(0,85,255,.25);
    --blbs:rgba(0,85,255,.35);
    
    --accent:#0055ff;
    --accent-g1:var(--blg1);
    --accent-g2:var(--blg2);
    --accent-g3:var(--blg3);
    --accent-border:var(--blb);
    --accent-strong:var(--blbs);
}

/* ТЕМА: РОЗОВЫЙ НЕОН */
:root[data-theme="neon"] {
    --bg:#09000d;
    --bg1:#110018;
    --bg2:#180022;
    --bg3:#220030;
    --bg4:#2d0040;
    
    --bl4:#ff007f;
    --bl5:#ff1493;
    --bl6:#d10068;
    --bl7:#a30052;
    
    --blg1:rgba(255,20,147,.12);
    --blg2:rgba(255,20,147,.18);
    --blg3:rgba(255,20,147,.25);
    --blb:rgba(255,20,147,.35);
    --blbs:rgba(255,20,147,.50);
    
    --grn:#00f0ff;
    --grn-bg:rgba(0,240,255,.12);
    --grn-b:rgba(0,240,255,.25);
    
    --accent:#ff1493;
    --accent-g1:var(--blg1);
    --accent-g2:var(--blg2);
    --accent-g3:var(--blg3);
    --accent-border:var(--blb);
    --accent-strong:var(--blbs);
}

/* ТЕМА: CYBERPUNK (киберпанк — неоновый кибер-стиль) */
:root[data-theme="cyberpunk"] {
    --bg: #0c0022;
    --bg1: #14002f;
    --bg2: #1f0044;
    --bg3: #2a0066;
    --bg4: #3d0088;
    
    --bl4: #00f0ff;     /* основной неоновый циан */
    --bl5: #ff00aa;     /* неоновый маджента */
    --bl6: #00ff9f;
    --bl7: #ff00cc;
    
    --blg1: rgba(0,240,255,.15);
    --blg2: rgba(255,0,170,.18);
    --blg3: rgba(0,240,255,.25);
    --blb: rgba(0,240,255,.35);
    --blbs: rgba(255,0,170,.45);
    
    --accent: #00f0ff;
    --accent-g1: var(--blg1);
    --accent-g2: var(--blg2);
    --accent-g3: var(--blg3);
    --accent-border: var(--blb);
    --accent-strong: var(--blbs);
    
    --grn: #00ff9f;
    --grn-bg: rgba(0,255,159,.12);
    --grn-b: rgba(0,255,159,.25);
}

/* ТЕМА: ОСТРЫЕ КОЗЫРЬКИ (тёмный винтажный гангстерский стиль) */
:root[data-theme="peaky"] {
    --bg: #1c140f;
    --bg1: #251d18;
    --bg2: #2e261f;
    --bg3: #3a3229;
    --bg4: #4a4035;
    
    --bl4: #d4af77;     /* золото Пикки Блиндерс */
    --bl5: #c9a36a;
    --bl6: #b38f5c;
    --bl7: #9e7a4f;
    
    --blg1: rgba(212,175,119,.12);
    --blg2: rgba(212,175,119,.18);
    --blg3: rgba(212,175,119,.25);
    --blb: rgba(212,175,119,.35);
    --blbs: rgba(212,175,119,.45);
    
    --accent: #d4af77;
    --accent-g1: var(--blg1);
    --accent-g2: var(--blg2);
    --accent-g3: var(--blg3);
    --accent-border: var(--blb);
    --accent-strong: var(--blbs);
    
    --grn: #8b9e6e;     /* оливковый оттенок */
}

/* ТЕМА: МАМКИН ТЕМЩИК (исправленная читаемость) */
:root[data-theme="mamkin"] {
    --bg: #fff5f8;
    --bg1: #fffafc;
    --bg2: #fff5f8;
    --bg3: #ffeef4;
    --bg4: #ffe4ed;
    
    --bl4: #ff4d94;
    --bl5: #ff6ba8;
    --bl6: #ff2e7f;
    --bl7: #e81e6e;
    
    --blg1: rgba(255,77,148,.12);
    --blg2: rgba(255,77,148,.18);
    --blg3: rgba(255,77,148,.25);
    --blb: rgba(255,77,148,.30);
    --blbs: rgba(255,77,148,.40);
    
    --accent: #ff4d94;
    --accent-g1: var(--blg1);
    --accent-g2: var(--blg2);
    --accent-g3: var(--blg3);
    --accent-border: var(--blb);
    --accent-strong: var(--blbs);
    
    /* Тёмный текст для светлого фона */
    --w: #2c1f2e;
    --w92: rgba(44,31,46,.95);
    --w70: rgba(44,31,46,.80);
    --w50: rgba(44,31,46,.65);
    --w30: rgba(44,31,46,.45);
    --w15: rgba(44,31,46,.25);
    --w08: rgba(44,31,46,.12);
    --w05: rgba(44,31,46,.08);
}

/* === ИСПРАВЛЕНИЕ ЧИТАЕМОСТИ ДЛЯ МАМКИН ТЕМЩИК === */
:root[data-theme="mamkin"] .header,
:root[data-theme="mamkin"] .tab-bar {
    background: rgba(255,245,248,.92) ;   /* нежно-розовый полупрозрачный */
    border-color: rgba(255,77,148,.18) ;
    backdrop-filter: blur(24px) saturate(180%);
}

:root[data-theme="mamkin"] .logo-text {
    color: #2c1f2e ;                      /* очень тёмный для контраста */
}

:root[data-theme="mamkin"] .tab-item {
    color: #6b4a5e ;                      /* тёмно-розовый для неактивных вкладок */
}

:root[data-theme="mamkin"] .tab-item.active {
    color: #ff4d94 ;                      /* яркий акцент для активной вкладки */
}

:root[data-theme="mamkin"] .tab-item.active::before {
    background: #ff4d94 ;
}

/* Улучшаем контраст иконок и текстов */
:root[data-theme="mamkin"] .balance-label-text,
:root[data-theme="mamkin"] .qr-desc,
:root[data-theme="mamkin"] .section-title,
:root[data-theme="mamkin"] .quick-label,
:root[data-theme="mamkin"] .tx-time {
    color: #6b4a5e ;
}

/* ТЕМА: ZOV (строгая милитари-зелёная) */
:root[data-theme="zov"] {
    --bg: #0f1a0f;
    --bg1: #162316;
    --bg2: #1f2c1f;
    --bg3: #2a382a;
    --bg4: #364536;
    
    --bl4: #4a7043;     /* армейский зелёный */
    --bl5: #5e8a55;
    --bl6: #3f5f38;
    --bl7: #2e4729;
    
    --blg1: rgba(74,112,67,.15);
    --blg2: rgba(74,112,67,.20);
    --blg3: rgba(74,112,67,.28);
    --blb: rgba(74,112,67,.40);
    --blbs: rgba(74,112,67,.55);
    
    --accent: #4a7043;
    --accent-g1: var(--blg1);
    --accent-g2: var(--blg2);
    --accent-g3: var(--blg3);
    --accent-border: var(--blb);
    --accent-strong: var(--blbs);
    
    --grn: #7cb16b;
}

        body {
    font-family:var(--font);
    background:var(--bg);
    color:var(--w92);
    min-height:100dvh;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    overscroll-behavior:none;
}

        .ambient {
    position:fixed;
    top:-80px;
    left:50%;
    transform:translateX(-50%);
    width:500px;
    height:260px;
    background:radial-gradient(ellipse,var(--accent-g1) 0%,transparent 70%);
    pointer-events:none;
    z-index:0;
}
        .app{position:relative;z-index:1;max-width:420px;margin:0 auto;padding-bottom:100px}
        .header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:10px 20px;background:rgba(6,6,10,.88);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid var(--w05)}
        :root[data-theme="light"] .header,
:root[data-theme="light"] .tab-bar {
    background: rgba(245,245,247,.88) ;
    border-color: rgba(0,0,0,.08) ;
}

:root[data-theme="neon"] .header,
:root[data-theme="neon"] .tab-bar {
    background: rgba(9,0,13,.88) ;
}

        .header-left{display:flex;align-items:center;gap:10px}.logo-mark{width:34px;height:34px}.logo-mark svg{width:34px;height:34px}
        .logo-text{font-size:17px;font-weight:800;letter-spacing:-.5px;color:var(--w)}.logo-text span{background:linear-gradient(135deg,var(--bl4),var(--bl6));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
        .icon-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:10px;color:var(--w30);cursor:pointer;transition:all 160ms}
        .icon-btn:active{background:var(--bg3);color:var(--w50);transform:scale(.92)}
        .icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}
        .balance-card {
    margin:16px 20px 0;
    padding:28px 24px 24px;
    background:linear-gradient(135deg,var(--accent-g1),var(--accent-g2) 40%,var(--accent-g3));
    border:1px solid var(--accent-border);
    border-radius:24px;
    position:relative;
    overflow:hidden;
}

.balance-card::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--accent-strong),transparent);
}

.balance-card::after {
    content:'';
    position:absolute;
    top:-60px;
    right:-60px;
    width:200px;
    height:200px;
    background:radial-gradient(circle,var(--accent-g1),transparent 65%);
    pointer-events:none;
}
.info-box {
    background:var(--accent-g1);
    border:1px solid var(--accent-border);
}
        .balance-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;position:relative;z-index:1}
        .balance-label{display:flex;align-items:center;gap:7px}
        .balance-label svg{width:14px;height:14px;fill:none;stroke:var(--bl4);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}
        .pulse-dot{width:8px;height:8px;background:var(--grn);border-radius:50%;position:relative}
        .pulse-dot::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:1.5px solid var(--grn);opacity:0;animation:ping 2s ease-out infinite}
        @keyframes ping{0%{transform:scale(.8);opacity:.5}100%{transform:scale(2.2);opacity:0}}
        .balance-label-text{font-size:12px;font-weight:600;color:var(--w30);text-transform:uppercase;letter-spacing:1.2px}
        .balance-amount{position:relative;z-index:1;margin-bottom:6px}.balance-row{display:flex;align-items:baseline;gap:2px}
        .bal-curr{font-size:28px;font-weight:600;color:var(--w30);margin-right:2px}
        .bal-int{font-family:var(--mono);font-size:48px;font-weight:700;color:var(--w);letter-spacing:-3px;line-height:1}
        .bal-dec{font-family:var(--mono);font-size:28px;font-weight:600;color:var(--w30);letter-spacing:-1px}
        .balance-sub{font-size:13px;font-weight:500;color:var(--w30);margin-bottom:20px;position:relative;z-index:1;display:flex;align-items:center;gap:5px}
        .balance-sub svg{width:13px;height:13px;fill:none;stroke:var(--w15);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}
        .balance-hold{font-size:12px;color:var(--amb);font-weight:600;margin-bottom:16px;position:relative;z-index:1;display:flex;align-items:center;gap:5px}
        .twin-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative;z-index:1}
        .twin-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border:none;border-radius:16px;font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;transition:all 180ms;letter-spacing:-.2px}
        .twin-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}
        .twin-btn:active{transform:scale(.97)}
        .twin-btn-primary {
    background:linear-gradient(135deg,var(--bl5),var(--bl7));
    color:#fff;
    box-shadow:0 4px 20px var(--accent-strong),inset 0 1px 0 rgba(255,255,255,.12);
}
        .twin-btn-secondary{background:var(--w05);border:1px solid var(--w08);color:var(--w70)}.twin-btn-secondary:active{background:var(--w08)}
        .qr-banner{margin:16px 20px 0;padding:20px;background:var(--bg2);border:1px solid var(--w05);border-radius:20px;display:flex;align-items:center;gap:16px;cursor:pointer;transition:all 180ms;position:relative;overflow:hidden}
        .qr-banner:active{transform:scale(.98);background:var(--bg3)}
        .qr-banner::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--w08),transparent)}
        .qr-icon-box {
            background: transparent;
            box-shadow: none;
        }
        .qr-icon-box svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}
        .qr-icon-box::after{content:'';position:absolute;inset:-3px;border-radius:19px;border:1.5px solid rgba(53,116,244,.25);animation:qrP 2.5s ease-in-out infinite}
        @keyframes qrP{0%,100%{opacity:.3;transform:scale(1)}50%{opacity:0;transform:scale(1.12)}}
        .qr-content{flex:1;min-width:0}.qr-title{font-size:16px;font-weight:700;color:var(--w);margin-bottom:4px;letter-spacing:-.3px;display:flex;align-items:center;gap:6px}
        .qr-title svg{width:14px;height:14px;fill:none;stroke:var(--bl4);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}
        .qr-desc{font-size:13px;color:var(--w30);font-weight:500;display:flex;align-items:center;gap:5px}
        .qr-desc svg{width:13px;height:13px;fill:none;stroke:var(--w15);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8;flex-shrink:0}
        .qr-arrow svg{width:20px;height:20px;fill:none;stroke:var(--w15);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}
        .quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 20px 0}
        .quick-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px 14px;background:var(--bg2);border:1px solid var(--w05);border-radius:16px;cursor:pointer;transition:all 180ms;text-align: center}
        .quick-item:active{transform:scale(.96);background:var(--bg3)}
        .quick-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center}
        .quick-icon svg{width:18px;height:18px;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}
        .quick-icon-blue {
    background:var(--accent-g1);
    border:1px solid var(--accent-border);
}

.quick-icon-blue svg { stroke:var(--bl4); }
        .quick-icon-amber{background:var(--amb-bg);border:1px solid var(--amb-b)}.quick-icon-amber svg{stroke:var(--amb)}
        .quick-icon-green{background:var(--grn-bg);border:1px solid var(--grn-b)}.quick-icon-green svg{stroke:var(--grn)}
        .quick-label{font-size:11px;font-weight:600;color:var(--w30);text-align: center}
        .section{margin:24px 20px 0}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
        .section-title{font-size:13px;font-weight:700;color:var(--w30);text-transform:uppercase;letter-spacing:.8px;display:flex;align-items:center;gap:6px}
        .section-title svg{width:15px;height:15px;fill:none;stroke:var(--w15);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}
        .section-action{font-size:12px;font-weight:600;color:var(--bl4);cursor:pointer;background:none;border:none;font-family:var(--font);padding:4px 10px;border-radius:6px;transition:background 150ms;display:flex;align-items:center;gap:4px}
        .section-action svg{width:12px;height:12px;fill:none;stroke:var(--bl4);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}
        .section-action:active{background:var(--blg1)}
        .card{background:var(--bg2);border:1px solid var(--w05);border-radius:20px;overflow:hidden;position:relative}
        .card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--w08),transparent)}
        .tx-row{display:flex;align-items:center;gap:12px;padding:14px 16px;transition:background 150ms}
        .tx-row:not(:last-child){border-bottom:1px solid var(--w03)}
        .tx-dot{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px}
        .tx-dot-pay{background:var(--blg2);border:1px solid var(--blb)}.tx-dot-topup{background:var(--grn-bg);border:1px solid var(--grn-b)}
        .tx-dot-withdrawal{background:var(--red-bg);border:1px solid var(--red-b)}.tx-dot-check{background:var(--amb-bg);border:1px solid var(--amb-b)}
        .tx-info{flex:1;min-width:0}.tx-name{font-size:14px;font-weight:600;color:var(--w92);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .tx-time{font-size:12px;color:var(--w15);font-weight:500}
        .tx-end{text-align:right;flex-shrink:0}.tx-val{font-family:var(--mono);font-size:14px;font-weight:600;margin-bottom:2px}
        .tx-val-plus{color:var(--grn)}.tx-val-minus{color:var(--w70)}
        .tx-sub{font-size:11px;color:var(--w15);font-weight:500}
        .empty-state{text-align:center;padding:40px 20px}.empty-state-text{font-size:13px;color:var(--w15)}
                .shop-card{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;background:linear-gradient(135deg,rgba(91,147,248,.08),rgba(122,92,255,.06));border:1px solid var(--w05);border-radius:14px;margin:10px;position:relative;overflow:hidden}
        .shop-card:not(:last-child){margin-bottom:0}
                .shop-card-icon{width:42px;height:42px;border-radius:12px;background:transparent;border:1px solid rgba(255,255,255,.10);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:20px;box-shadow:inset 0 0 10px rgba(255,255,255,.04)}

        .shop-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
        .shop-card-title{font-size:14px;font-weight:700;color:var(--w92)}
        .shop-card-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.45px;color:#cde2ff;background:rgba(53,116,244,.16);border:1px solid rgba(53,116,244,.35);padding:4px 7px;border-radius:999px;white-space:nowrap}
        .shop-card-desc{font-size:12px;color:var(--w30);line-height:1.45;margin-bottom:8px}
        .shop-card-chances{font-size:11px;color:var(--w50);margin-bottom:10px;line-height:1.35}
        .shop-card-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
        .shop-card-price{font-family:var(--mono);font-size:13px;color:var(--amb)}
        .shop-open-btn{border:none;border-radius:10px;padding:8px 12px;background:linear-gradient(135deg,var(--bl5),var(--bl7));color:#fff;font-family:var(--font);font-size:12px;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(53,116,244,.26)}
        .mini-lootbox{width:36px;height:36px;perspective:240px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--glow) 55%, transparent));}
        .mini-cube{position:relative;width:22px;height:22px;transform-style:preserve-3d;animation:miniSpin 4.2s linear infinite}
        .mini-cube .face{position:absolute;inset:0;background:var(--box);border:1px solid rgba(255,255,255,.25)}
        .mini-cube .front{transform:translateZ(11px)}
        .mini-cube .back{transform:rotateY(180deg) translateZ(11px)}
        .mini-cube .left{transform:rotateY(-90deg) translateZ(11px)}
        .mini-cube .right{transform:rotateY(90deg) translateZ(11px)}
        .mini-cube .top{transform:rotateX(90deg) translateZ(11px)}
        .mini-cube .bottom{transform:rotateX(-90deg) translateZ(11px)}
        .mini-ribbon{position:absolute;background:var(--ribbon);box-shadow:0 0 8px rgba(255,222,130,.35)}
        .mini-ribbon-v{width:4px;height:22px;left:9px;top:0;transform:translateZ(12px)}
        .mini-ribbon-h{height:4px;width:22px;left:0;top:9px;transform:translateZ(12px)}
        @keyframes miniSpin{0%{transform:rotateX(-18deg) rotateY(0deg)}100%{transform:rotateX(-18deg) rotateY(360deg)}}



        .tab-bar{position:fixed;bottom:0;left:0;width:100%;background:rgba(6,6,10,.92);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-top:1px solid var(--w05);padding-bottom:env(safe-area-inset-bottom,0);z-index:100}
        .tab-bar-inner{max-width:420px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);height:60px}
        .tab-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:none;background:none;font-family:var(--font);color:var(--w15);cursor:pointer;transition:color 200ms;position:relative}
        .tab-item.active{color:var(--bl4)}.tab-item.active::before{content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:24px;height:2px;background:var(--bl4);border-radius:0 0 2px 2px}
        .tab-item svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}
        .tab-item-text{font-size:10px;font-weight:600}
        .tab-qr{display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;padding:0}
        .tab-qr-inner,
.btn-blue {
    background:linear-gradient(135deg,var(--bl5),var(--bl7));
    box-shadow:0 4px 24px var(--accent-strong),inset 0 1px 0 rgba(255,255,255,.12);
}
        .tab-qr-inner:active{transform:scale(.88)}.tab-qr-inner svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}
        .screen{display:none}.screen.active{display:block;animation:fadeUp 280ms var(--ease)}
        @keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
        .toast {
    position: fixed;
    top: 20px;              /* чуть выше, чтобы не перекрывалось шапкой */
    left: 50%;
    transform: translateX(-50%) translateY(-100px); /* выше, чем было */
    background: var(--bg3);
    border: 1px solid var(--w08);
    border-radius: 14px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10000;         /* выше всех модалок, оверлеев и шторок */
    transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1), visibility 200ms;
    visibility: hidden;     /* скрыт по умолчанию */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    max-width: calc(100vw - 40px);
    pointer-events: none;   /* чтобы не мешать нажатиям под ним */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    visibility: visible;
    pointer-events: auto;   /* восстанавливаем только когда виден */
}
        .toast-icon{font-size:16px;flex-shrink:0}.toast span{font-size:13px;font-weight:600;color:var(--w92)}
        .confetti-container{position:fixed;inset:0;pointer-events:none;z-index:500;overflow:hidden}
        .confetti-piece{position:absolute;border-radius:1px;animation:cF 1.3s var(--ease) forwards}
        @keyframes cF{0%{transform:translateY(-10px) rotate(0) scale(1);opacity:1}100%{transform:translateY(100vh) rotate(600deg) scale(.4);opacity:0}}
        .overlay-full{display:none;position:fixed;inset:0;background:rgba(6,6,10,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:300;align-items:center;justify-content:center;flex-direction:column;gap:20px}
        .overlay-full.active{display:flex;animation:fi 200ms ease}@keyframes fi{from{opacity:0}to{opacity:1}}
        .proc-ring{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;font-size:28px}
        .proc-ring-spin{background:var(--blg3);border:1px solid var(--blb)}.proc-ring-spin::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2.5px solid transparent;border-top-color:var(--bl4);animation:sp .8s linear infinite}
        @keyframes sp{to{transform:rotate(360deg)}}
        .proc-ring-ok{background:var(--grn-bg);border:2px solid var(--grn-b);animation:pI 400ms var(--spring)}
        .proc-ring-err{background:var(--red-bg);border:2px solid var(--red-b);animation:pI 400ms var(--spring)}
        @keyframes pI{0%{transform:scale(0)}100%{transform:scale(1)}}
        .proc-title{font-size:20px;font-weight:800;letter-spacing:-.5px}.proc-desc{font-size:14px;color:var(--w30);font-weight:500;text-align:center;max-width:280px;line-height:1.5}
        .loading-dots{display:flex;gap:5px;justify-content:center}.loading-dots span{width:5px;height:5px;background:var(--bl4);border-radius:50%;animation:dP 1.2s ease-in-out infinite}
        .loading-dots span:nth-child(2){animation-delay:.15s}.loading-dots span:nth-child(3){animation-delay:.3s}
        @keyframes dP{0%,80%,100%{opacity:.2;transform:scale(.7)}40%{opacity:1;transform:scale(1)}}
        /* SHEET */
        .sheet-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:250;align-items:flex-end;justify-content:center}
        .sheet-overlay.active{display:flex;animation:fi 200ms ease}
        .sheet{width:100%;max-width:420px;background:var(--bg1);border-radius:24px 24px 0 0;border:1px solid var(--w08);border-bottom:none;animation:sU 380ms cubic-bezier(.32,.72,0,1);max-height:94vh;overflow-y:auto;overscroll-behavior:contain}
        @keyframes sU{from{transform:translateY(100%)}to{transform:translateY(0)}}
        .sheet-handle{width:32px;height:3px;background:var(--w08);border-radius:2px;margin:10px auto 0}.sheet-body{padding:20px 20px 36px}
        .pay-center{text-align:center}.pay-icon{font-size:48px;margin-bottom:12px}
        .pay-title{font-size:18px;font-weight:700;color:var(--w92);letter-spacing:-.3px;margin-bottom:4px}
        .pay-subtitle{font-size:13px;color:var(--w30);margin-bottom:20px}
        .pay-amount-section{padding:24px 0;margin:0 0 20px;border-top:1px solid var(--w05);border-bottom:1px solid var(--w05);text-align:center}
        .pay-amount-label{font-size:10px;font-weight:700;color:var(--w08);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:8px}
        .pay-amount-big{font-family:var(--mono);font-size:44px;font-weight:700;color:var(--w);letter-spacing:-3px;line-height:1;margin-bottom:8px}
        .pay-amount-crypto{font-size:14px;color:var(--w30);font-weight:500}.pay-amount-crypto em{font-style:normal;color:var(--bl4);font-weight:700}
        .pay-details{background:var(--bg3);border:1px solid var(--w05);border-radius:12px;overflow:hidden;margin-bottom:20px}
        .pay-detail-row{display:flex;justify-content:space-between;align-items:center;padding:11px 14px}
        .pay-detail-row:not(:last-child){border-bottom:1px solid var(--w03)}
        .pay-detail-key{font-size:13px;color:var(--w30);font-weight:500}.pay-detail-val{font-size:13px;color:var(--w92);font-weight:600;font-family:var(--mono)}
        .pay-detail-val-grn{color:var(--grn)}.pay-detail-val-red{color:var(--red)}
        .btn-primary{width:100%;padding:15px 24px;border:none;border-radius:14px;font-family:var(--font);font-size:15px;font-weight:700;color:#fff;cursor:pointer;transition:all 200ms;letter-spacing:-.2px;position:relative;overflow:hidden}
        .btn-primary:active{transform:scale(.98);filter:brightness(.9)}.btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none;filter:none}
        .btn-primary-inner{display:flex;align-items:center;justify-content:center;gap:8px}
        .btn-blue{background:linear-gradient(135deg,var(--bl5),var(--bl7));box-shadow:0 4px 16px rgba(53,116,244,.2),inset 0 1px 0 rgba(255,255,255,.1)}
        .btn-green{background:linear-gradient(135deg,var(--grn),#16a085);box-shadow:0 4px 16px rgba(45,212,160,.2),inset 0 1px 0 rgba(255,255,255,.1)}
        .btn-red{background:linear-gradient(135deg,var(--red),#c0392b);box-shadow:0 4px 16px rgba(240,80,110,.2),inset 0 1px 0 rgba(255,255,255,.1)}
        .btn-ghost{width:100%;padding:13px;background:none;border:1px solid var(--w08);border-radius:12px;font-family:var(--font);font-size:14px;font-weight:600;color:var(--w30);cursor:pointer;margin-top:8px;transition:all 150ms;display:flex;align-items:center;justify-content:center;gap:6px}
        .btn-ghost:active{background:var(--bg3)}
        /* FORM */
        .form-group{margin-bottom:16px}
        .form-label{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--w15);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}
        .form-input{width:100%;padding:13px 14px;background:var(--bg3);border:1.5px solid var(--w08);border-radius:12px;color:var(--w92);font-family:var(--mono);font-size:18px;font-weight:600;outline:none;transition:all 200ms}
        .form-input:focus{border-color:var(--blbs);box-shadow:0 0 0 3px var(--blg1)}
        .form-input::placeholder{color:var(--w15);font-family:var(--font);font-weight:500;font-size:14px}
        .form-hint{font-size:12px;color:var(--w15);margin-top:6px;display:flex;align-items:center;gap:4px}
        .form-hint-red{color:var(--red)}
        .info-box{display:flex;gap:12px;padding:14px 16px;background:var(--blg1);border:1px solid var(--blb);border-radius:12px;margin-bottom:20px}
        .info-box-text{font-size:13px;color:var(--w50);line-height:1.55}.info-box-text strong{color:var(--bl4);font-weight:700}
        .info-box-icon{font-size:18px;flex-shrink:0}
        /* PROFILE */
        .profile-section{padding:32px 20px 0;text-align:center}
        .profile-avatar{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--bl5),var(--bl7));display:flex;align-items:center;justify-content:center;margin:0 auto 14px;position:relative}
        .profile-avatar::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--blb)}
        .profile-avatar-text{font-size:32px;font-weight:800;color:#fff}
        .profile-name{font-size:22px;font-weight:800;color:var(--w);letter-spacing:-.5px;margin-bottom:4px}
        .profile-handle{font-size:14px;font-weight:500;color:var(--bl4);margin-bottom:20px}
        .profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 20px 20px}
        .profile-stat{padding:14px 8px;background:var(--bg2);border:1px solid var(--w05);border-radius:14px;text-align:center}
        .profile-stat-val{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--w92);margin-bottom:2px}
        .profile-stat-label{font-size:10px;font-weight:600;color:var(--w15);text-transform:uppercase;letter-spacing:.5px}
        .profile-info{margin:0 20px;background:var(--bg2);border:1px solid var(--w05);border-radius:20px;overflow:hidden;position:relative}
        .profile-info::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--w08),transparent)}
        .profile-info-row{display:flex;align-items:center;gap:12px;padding:14px 16px}
        .profile-info-row:not(:last-child){border-bottom:1px solid var(--w03)}
        .profile-info-key{font-size:13px;color:var(--w30);font-weight:500;flex:1}
        .profile-info-val{font-size:13px;color:var(--w92);font-weight:600;font-family:var(--mono)}
        .profile-menu{margin:20px}.profile-menu-item{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--bg2);border:1px solid var(--w05);border-radius:14px;margin-bottom:8px;cursor:pointer;transition:all 180ms}
        .profile-menu-item:active{background:var(--bg3);transform:scale(.98)}
        .pm-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px}
        .pm-icon-blue{background:var(--blg1);border:1px solid var(--blb)}.pm-icon-red{background:var(--red-bg);border:1px solid var(--red-b)}.pm-icon-grn{background:var(--grn-bg);border:1px solid var(--grn-b)}.pm-icon-amb{background:var(--amb-bg);border:1px solid var(--amb-b)}
        .pm-body{flex:1}.pm-name{font-size:14px;font-weight:600;color:var(--w92)}.pm-desc{font-size:12px;color:var(--w15);margin-top:1px}
        .pm-arrow{color:var(--w08);font-size:16px}
        .profile-ver{text-align:center;font-size:11px;color:var(--w08);padding:8px 0}
        @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms;transition-duration:.01ms}}

        /* STATS SCREEN */
        .stats-period-btns{display:flex;gap:8px;margin:16px 20px 0}
        .stats-period-btn{padding:10px 14px;background:var(--bg2);border:1px solid var(--w05);border-radius:12px;font-family:var(--font);font-size:13px;font-weight:600;color:var(--w30);cursor:pointer;transition:all 150ms;flex:1}
        .stats-period-btn.active{background:var(--blg2);border-color:var(--blb);color:var(--bl4)}
        .stats-period-btn:active{transform:scale(.97)}
        .stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:16px 20px}
        .stats-card{padding:16px;background:var(--bg2);border:1px solid var(--w05);border-radius:16px;text-align:center}
        .stats-card-label{font-size:11px;font-weight:600;color:var(--w15);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
        .stats-card-value{font-family:var(--mono);font-size:20px;font-weight:700}
        .stats-card-value.green{color:var(--grn)}
        .stats-card-value.red{color:var(--red)}
        .stats-card-value.blue{color:var(--bl4)}
        .stats-card-sub{font-size:11px;color:var(--w30);margin-top:2px}
        .chart-container{height:200px;position:relative;margin-top:8px}
        .pie-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;justify-content:center}
        .pie-legend-item{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:var(--w50)}
        .pie-legend-dot{width:8px;height:8px;border-radius:50%}

        /* HISTORY FILTERS */
        .filters-row{display:flex;gap:6px;margin:16px 20px 0;overflow-x:auto;padding-bottom:4px}
        .filters-row::-webkit-scrollbar{display:none}
        .filter-chip{padding:8px 12px;background:var(--bg2);border:1px solid var(--w05);border-radius:10px;font-family:var(--font);font-size:12px;font-weight:600;color:var(--w30);cursor:pointer;white-space:nowrap;transition:all 150ms}
        .filter-chip:active,.filter-chip.active{background:var(--blg2);border-color:var(--blb);color:var(--bl4)}
        .filter-params{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 20px}
        .filter-params input{width:100%;padding:10px 12px;background:var(--bg3);border:1.5px solid var(--w08);border-radius:10px;color:var(--w92);font-family:var(--font);font-size:13px;outline:none}
        .filter-params input:focus{border-color:var(--blbs)}
        .filter-params input::placeholder{color:var(--w15)}
        .filter-params label{font-size:10px;font-weight:700;color:var(--w15);text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px;display:block}
        .filter-actions{display:flex;gap:8px;margin:0 20px 16px}
        .filter-actions button{flex:1;padding:12px;border-radius:12px;font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;transition:all 150ms}
        .filter-apply{background:linear-gradient(135deg,var(--bl5),var(--bl7));border:none;color:#fff}
        .filter-clear{background:none;border:1px solid var(--w08);color:var(--w30)}
        .filter-apply:active{filter:brightness(.9)}
        .filter-clear:active{background:var(--bg2)}

        /* REFERRAL SCREEN */
        .ref-link-card {
    background:linear-gradient(135deg,var(--accent-g1),var(--accent-g2) 40%,var(--accent-g3));
    border:1px solid var(--accent-border);
}
        .ref-link-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(53,116,244,.35),transparent)}
        .ref-link-card::after {
    background:radial-gradient(circle,var(--accent-g1),transparent 65%);
}
        .ref-link-label{font-size:11px;font-weight:700;color:var(--w15);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;position:relative;z-index:1}
        .ref-link-box{display:flex;align-items:center;gap:8px;padding:12px;background:var(--bg3);border:1px solid var(--w08);border-radius:12px;margin-bottom:10px;position:relative;z-index:1}
        .ref-link-text{flex:1;font-family:var(--mono);font-size:12px;color:var(--w92);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .ref-copy-btn{padding:8px 14px;background:linear-gradient(135deg,var(--bl5),var(--bl7));border:none;border-radius:8px;font-family:var(--font);font-size:12px;font-weight:700;color:#fff;cursor:pointer}
        .ref-copy-btn:active{transform:scale(.95)}
        .ref-share-hint{font-size:12px;color:var(--w30);text-align:center;position:relative;z-index:1}
        .ref-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 20px}
        .ref-level-card{padding:16px 8px;background:var(--bg2);border:1px solid var(--w05);border-radius:16px;text-align:center}
        .ref-level-num{font-size:10px;font-weight:700;color:var(--w08);text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px}
        .ref-level-count{font-family:var(--mono);font-size:26px;font-weight:700;color:var(--w92)}
        .ref-level-label{font-size:11px;font-weight:600;color:var(--w15);margin-top:2px}
        .ref-earnings{margin:0 20px 16px;padding:20px;background:var(--bg2);border:1px solid var(--w05);border-radius:20px;position:relative}
        .ref-earnings::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--w08),transparent)}
        .ref-earnings-title{font-size:12px;font-weight:700;color:var(--w30);text-transform:uppercase;letter-spacing:.8px;margin-bottom:14px}
        .ref-earnings-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0}
        .ref-earnings-row:not(:last-child){border-bottom:1px solid var(--w03)}
        .ref-earnings-label{font-size:13px;color:var(--w50)}
        .ref-earnings-value{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--grn)}
        .ref-rates{margin:0 20px 16px;padding:16px;background:var(--blg1);border:1px solid var(--blb);border-radius:14px}
        .ref-rates-title{font-size:11px;font-weight:700;color:var(--bl4);text-transform:uppercase;letter-spacing:.8px;margin-bottom:12px}
        .ref-rate-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0}
        .ref-rate-level{font-size:13px;color:var(--w70)}
        .ref-rate-value{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--w92)}
.quick-item.disabled {
  opacity: 0.5;
  pointer-events: none;      /* отключает любые клики */
  cursor: default;
  filter: grayscale(0.1);
}

/* Переключатели (switch) */
.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--w08);
    transition: .3s;
    border-radius: 9999px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: var(--w);
    transition: .3s;
    border-radius: 50%;
}
input:checked + .slider { background: var(--bl4); }
input:checked + .slider:before { transform: translateX(22px); }

/* Модальное окно (не sheets) */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-overlay.active { display: flex; }

.chat-modal {
    width: 100%;
    max-width: 450px;
    height: 80vh;
    background: var(--bg2);
    border: 1px solid var(--blb);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalFadeIn 0.2s ease-out;
}

.lootbox-modal {
    width: 100%;
    max-width: 420px;
    height: 78vh;
    background: var(--bg2);
    border: 1px solid var(--blb);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.lootbox-frame {
    width: 100%;
    flex: 1;
    border: none;
    background: #0a0a14;
}


@keyframes modalFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.modal-header {
    padding: 16px;
    background: var(--bg3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--blb);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px; /* Уменьшили общий отступ контейнера */
    display: flex;
    flex-direction: column;
    gap: 10px;      /* Уменьшили расстояние между сообщениями */
}

.msg {
    width: fit-content;       /* Облачко строго по размеру текста */
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.4;
    
    /* Исправление выхода текста за пределы */
    overflow-wrap: anywhere;  /* Перенос даже очень длинных ссылок/слов */
    word-break: break-word;
}
.msg.user {
    align-self: flex-end;
    background: var(--bl6);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.msg.support {
    align-self: flex-start;
    background: var(--bg4);
    color: var(--w92);
    border-bottom-left-radius: 4px;
}

.chat-input-area {
    padding: 12px;
    background: var(--bg3);
    display: flex;
    gap: 8px;
    border-top: 1px solid var(--blb);
}

#chatInput {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--blb);
    border-radius: 10px;
    padding: 10px 14px;
    color: var(--w);
    outline: none;
}

#sendMessageBtn {
    background: var(--bl5);
    border: none;
    border-radius: 10px;
    width: 42px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn_install {
  width: 100%;
  padding: 15px 24px;
  border: none;
  border-radius: 14px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, var(--bl5), var(--bl7));
  box-shadow: 0 4px 16px rgba(53,116,244,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
  transition: all 200ms;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn_install:active {
  transform: scale(0.98);
  filter: brightness(0.9);
}

#camVideo {
  width: 100%;
  max-width: 420px;
  border-radius: 16px;
}

.camera-scanner {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 2500;
  overflow: hidden;
}

.scanner-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Зеркалирование убрано – естественный вид */
}

.scanner-overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.scanner-top-cover,
.scanner-bottom-cover {
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.scanner-top-cover {
  height: 20%;
}

.scanner-bottom-cover {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 30px;
  background: rgba(0, 0, 0, 0.6);
}

.scanner-middle {
  display: flex;
  align-items: center;
  width: 100%;
  height: 250px; /* под размер рамки */
}

.scanner-left-cover,
.scanner-right-cover {
  flex: 1;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.scanner-frame {
  width: 250px;
  height: 250px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.35); /* затемнение вне рамки */
}

.scanner-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--bl4), transparent);
  animation: scannerMove 2.5s ease-in-out infinite;
}

@keyframes scannerMove {
  0% { top: 0; }
  50% { top: calc(100% - 2px); }
  100% { top: 0; }
}

.scanner-hint {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  pointer-events: auto;
}

.scanner-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
  backdrop-filter: blur(10px);
}
.scanner-close:active {
  background: rgba(0, 0, 0, 0.7);
}

.info-modal {
  max-width: 360px;
  width: 90%;
  background: var(--bg2);
  border: 1px solid var(--blb);
  border-radius: 20px;
  animation: modalFadeIn 0.2s ease-out;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.info-modal-body {
  padding: 20px;
  color: var(--w92);
  font-size: 14px;
  line-height: 1.6;
}

.info-modal-body p {
  margin-bottom: 12px;
}

.info-modal-body strong {
  color: var(--bl4);
}

.info-modal-buttons {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#infoModal {
  z-index: 10000 ;
}

.scanner-controls {
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 10;
}
.scanner-torch-btn {
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    width: 56px;
    height: 56px;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: white;
}
.scanner-torch-btn:active {
    transform: scale(0.9);
    background: rgba(0,0,0,0.8);
}
.scanner-bounding-box {
    position: absolute;
    border: 2px solid #5b93f8;
    box-shadow: 0 0 0 2000px rgba(0,0,0,0.4);
    border-radius: 8px;
    z-index: 5;
    pointer-events: none;
    transition: all 0.1s linear;
}
.camera-error-panel {
    position: absolute;
    bottom: 20%;
    left: 20px;
    right: 20px;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 20px;
    text-align: center;
    z-index: 15;
    border: 1px solid rgba(255,255,255,0.2);
}
.error-icon { font-size: 48px; margin-bottom: 12px; }
.error-title { font-size: 18px; font-weight: 800; margin-bottom: 8px; color: #f0506e; }
.error-text { font-size: 14px; color: rgba(255,255,255,0.7); margin-bottom: 20px; }
.error-close-btn {
    background: #3574f4;
    border: none;
    border-radius: 40px;
    padding: 12px 20px;
    font-weight: bold;
    color: white;
    width: 100%;
}

.form-hint-green {
    color: var(--grn);
}

/* =====================================================================
   Fluxa — flow-first fintech design system
   Fonts: Inter (UI) + JetBrains Mono (labels/amounts)
   ===================================================================== */

:root {
  --iris: #18dde0;
  --cyan: #55f4b0;
  --void: #03111f;
  --void-2: #061827;
  --ink: #141414;
  --white: #ffffff;
  --hairline: rgba(57, 210, 222, 0.19);
  --dim: #94a9b8;
  --lavender: #e1ecff;
  --mint: #e6fff7;
  --green: #16c784;
  --red: #f6465d;
  --amber: #f5a623;
  --glow1: rgba(16, 70, 233, 0.35);
  --glow2: rgba(0, 54, 255, 0.22);
  --bg-top: #03111f;
  --bg-mid: #061827;
  --bg-bottom: #071d2a;
  --card-a: #091d2d;
  --card-b: #051624;
  --card-c: #0b2434;
  --bc-tex: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 16px);
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --mono: var(--font-mono);

  --container-max: 430px;
  --radius-lg: 20px;
  --radius-xl: 24px;

  /* ---- legacy aliases so inline styles / tailwind utilities keep working ---- */
  --accent: var(--iris);
  --accent-hover: color-mix(in srgb, var(--iris) 88%, #fff);
  --surface: var(--card-a);
  --border: var(--hairline);
  --text: var(--white);
  --text-secondary: var(--dim);
  --success: var(--green);
  --danger: var(--red);
  --warning: var(--amber);
  --bg: var(--bg-top);
  --bg1: var(--bg-top);
  --bg2: var(--card-a);
  --bg3: var(--card-c);
  --bl4: var(--iris);
  --bl5: var(--iris);
  --bl4-soft: color-mix(in srgb, var(--iris) 22%, transparent);
  --w92: var(--white);
  --w70: rgba(255, 255, 255, 0.72);
  --w50: rgba(255, 255, 255, 0.5);
  --w30: rgba(255, 255, 255, 0.3);
  --w15: rgba(255, 255, 255, 0.15);
  --w08: rgba(255, 255, 255, 0.08);
  --w05: rgba(255, 255, 255, 0.05);
  --w03: rgba(255, 255, 255, 0.03);
  --grn: var(--green);
  --grn-bg: rgba(22, 199, 132, 0.16);
  --red-bg: rgba(246, 70, 93, 0.16);
  --amb: var(--amber);
  --amb-bg: rgba(245, 166, 35, 0.16);
  --red: #f6465d;
  --shadow-soft: 0 14px 34px -18px rgba(0, 0, 0, 0.55);
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

html,
body {
  height: 100%;
}

body {
  font-family: var(--font-ui);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  color: var(--white);
  background:
    radial-gradient(120% 70% at 50% -10%, var(--glow1), transparent 55%),
    radial-gradient(120% 90% at 50% 115%, var(--glow2), transparent 55%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 55%, var(--bg-bottom) 100%);
  background-attachment: fixed;
  transition: background 0.4s;
}

/* ------------------------------------------------------------------
   ambient animated background (render <AmbientBackground/> in Shell)
   stars twinkle + shooting stars + drifting glow blobs + parallax
   ------------------------------------------------------------------ */
.ambient {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  transform: none;
  background: transparent;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(130% 100% at 50% 40%, rgba(5, 6, 27, 0) 55%, rgba(5, 6, 27, 0.3) 100%);
}

.ambient-shift {
  position: absolute;
  inset: -50px;
  will-change: transform;
}

.aurora {
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(38% 32% at 26% 30%, color-mix(in srgb, var(--glow1) 52%, transparent), transparent 70%),
    radial-gradient(42% 36% at 74% 68%, color-mix(in srgb, var(--glow2) 48%, transparent), transparent 70%),
    radial-gradient(30% 26% at 60% 18%, color-mix(in srgb, var(--cyan) 30%, transparent), transparent 72%);
  opacity: 0.5;
  filter: blur(30px);
  animation: auroraDrift 26s ease-in-out infinite alternate;
}

@keyframes auroraDrift {
  0% { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1); }
  100% { transform: translate3d(3%, 2%, 0) rotate(4deg) scale(1.08); }
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  will-change: transform;
}

.blob-1 {
  width: 560px;
  height: 560px;
  top: -120px;
  left: -80px;
  background: radial-gradient(circle, var(--glow1), transparent 70%);
  opacity: 0.65;
  animation: blobDrift1 19s ease-in-out infinite;
}

.blob-2 {
  width: 620px;
  height: 620px;
  bottom: -160px;
  right: -120px;
  background: radial-gradient(circle, var(--glow2), transparent 70%);
  opacity: 0.55;
  animation: blobDrift2 23s ease-in-out infinite;
}

.blob-3 {
  width: 480px;
  height: 480px;
  top: 30%;
  left: 38%;
  background: radial-gradient(circle, color-mix(in srgb, var(--cyan) 28%, transparent), transparent 70%);
  opacity: 0.35;
  animation: blobDrift3 27s ease-in-out infinite;
}

@keyframes blobDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, 80px) scale(1.16); }
}

@keyframes blobDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-80px, -50px) scale(1.12); }
}

@keyframes blobDrift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-46px, 34px) scale(1.1); }
  66% { transform: translate(40px, -42px) scale(0.92); }
}

.star {
  position: absolute;
  background: var(--white);
  border-radius: 50%;
  animation: twinkle 3s ease-in-out infinite;
}

.shoot {
  position: absolute;
  width: 150px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), transparent);
  opacity: 0;
  transform: rotate(-45deg);
  animation: shootAnim 9s ease-in infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.28; }
  50% { opacity: 1; }
}

@keyframes shootAnim {
  0% { transform: translate(0, 0) rotate(-45deg); opacity: 0; }
  3% { opacity: 1; }
  9% { transform: translate(-230px, 230px) rotate(-45deg); opacity: 0; }
  100% { transform: translate(-230px, 230px) rotate(-45deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient .star,
  .ambient .shoot,
  .ambient .blob,
  .ambient .aurora {
    animation: none ;
  }
}

/* floating "login minimized" pill */
.ambient-pill {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12000;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: min(420px, calc(100% - 24px));
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: rgba(5, 6, 27, 0.82);
  backdrop-filter: blur(10px);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.7);
  animation: screenIn 0.28s ease;
}

.ambient-pill .amp-sub {
  color: var(--dim);
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes starTwinkle {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

/* inline svg icon (emoji replacement) */
.aic {
  display: inline-block;
  vertical-align: -0.15em;
  flex: none;
}

.ic-ok {
  color: var(--grn, #2dd4a0);
}

/* bot info numbered steps */
.bot-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  line-height: 1.4;
}

.bot-step-num {
  flex: none;
  display: inline-flex;
  color: var(--bl4);
}

/* ===================== APP SHELL ===================== */

.app {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 18px 150px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* screens */
.screen {
  display: none;
}

.screen.active,
.screen.on {
  display: block;
  animation: screenIn 0.28s ease;
}

.screen.active.hslide,
.screen.on.hslide {
  animation: screenSlide 0.3s ease;
}

@keyframes screenIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes screenSlide {
  from { opacity: 0; transform: translateX(32px); }
  to { opacity: 1; transform: none; }
}

/* ===================== NAVBAR (top pill) ===================== */

.navbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 18px auto 6px;
  max-width: var(--container-max);
  width: calc(100% - 24px);
  padding: 8px 8px 8px 16px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(5, 6, 27, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: var(--white);
  text-decoration: none;
}

.brand-mark {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--iris);
  position: relative;
  flex: none;
}

.brand-mark::before {
  content: "";
  position: absolute;
  inset: 6px;
  background: var(--white);
  border-radius: 2px;
}

.brand-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.brand-name span {
  color: var(--iris);
}

.nav-live {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.87);
}

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--iris);
  box-shadow: 0 0 10px var(--iris);
  animation: pulse 2.2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--iris) 50%, transparent); }
  70% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--iris) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--iris) 0%, transparent); }
}

.mock-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  padding: 5px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--amber) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
  color: #fff;
}

.header-balance {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.9);
}

/* ===================== GREETING ===================== */

.greet {
  padding: 18px 4px 0;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dim);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 6px 14px;
}

/* ===================== BALANCE CARD ===================== */

.card-wrap {
  margin-top: 26px;
}

#balance-card {
  --r: 20px;
  position: relative;
  width: 100%;
  aspect-ratio: 1.85 / 1;
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: var(--r);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  overflow: hidden;
  background: linear-gradient(135deg, var(--card-a) 0%, var(--card-b) 55%, var(--card-c) 100%);
  box-shadow:
    color-mix(in srgb, var(--iris) 30%, transparent) 0 20px 60px -20px,
    rgba(5, 6, 27, 0.6) 0 0 0 1px inset;
  transition: background 0.4s;
}

#balance-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    var(--bc-tex, none),
    radial-gradient(120% 100% at 100% -10%, color-mix(in srgb, var(--iris) 55%, transparent), transparent 55%),
    radial-gradient(120% 120% at -10% 115%, color-mix(in srgb, var(--cyan) 26%, transparent), transparent 55%);
  transition: background 0.4s;
}

#balance-card .bc-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(38px);
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: transform;
  z-index: 0;
}

#balance-card .bc-glow1 {
  width: 180px;
  height: 180px;
  top: -44px;
  right: -44px;
  background: radial-gradient(circle, color-mix(in srgb, var(--iris) 62%, transparent), transparent 70%);
  animation: glowA 9s ease-in-out infinite;
}

#balance-card .bc-glow2 {
  width: 200px;
  height: 200px;
  bottom: -54px;
  left: -54px;
  background: radial-gradient(circle, color-mix(in srgb, var(--cyan) 46%, transparent), transparent 70%);
  animation: glowB 11s ease-in-out infinite;
}

#balance-card .bc-art {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

#balance-card .bc-art1 {
  width: 240px;
  height: 240px;
  right: -80px;
  top: -80px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--iris) 30%, transparent);
  box-shadow:
    0 0 0 26px color-mix(in srgb, var(--iris) 9%, transparent),
    0 0 0 52px color-mix(in srgb, var(--iris) 6%, transparent),
    0 0 0 78px color-mix(in srgb, var(--iris) 4%, transparent);
}

#balance-card .bc-art2 {
  width: 190px;
  height: 190px;
  left: -70px;
  bottom: -90px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--cyan) 26%, transparent);
  box-shadow: 0 0 0 30px color-mix(in srgb, var(--cyan) 7%, transparent);
}

@keyframes glowA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-48px, 44px) scale(1.28); }
}

@keyframes glowB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(54px, -36px) scale(1.22); }
}

#balance-card > * {
  position: relative;
  z-index: 1;
}

.balance-card {
  /* for non-canvas usage of the old component */
}

.bc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bc-issuer {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.bc-issuer-mark {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--iris);
  flex: none;
}

.bc-network {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: #fff;
  background: color-mix(in srgb, var(--iris) 24%, transparent);
  border: 1px solid color-mix(in srgb, var(--iris) 45%, transparent);
  border-radius: 999px;
  padding: 5px 10px;
}

.bc-balance {
  display: flex;
  align-items: baseline;
  gap: 11px;
}

.bc-mid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bc-amount {
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  display: inline-block;
}

.bc-currency {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--dim);
  text-transform: uppercase;
}

.bc-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dim);
  margin-top: 2px;
  text-align: left;
}

.bc-toggle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 6px;
  align-self: center;
  transition: opacity 0.15s;
  user-select: none;
}

.bc-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.bc-nick {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.42em;
  margin-right: -0.42em;
  color: #fff;
  text-transform: uppercase;
}

.bc-nick .at {
  color: var(--cyan);
  opacity: 0.9;
}

.bc-chip {
  width: 34px;
  height: 25px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(140deg, var(--iris), var(--cyan));
}

/* ===================== ACTIONS ===================== */

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 22px;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity 0.15s, transform 0.05s;
  user-select: none;
  color: #fff;
  font-family: var(--font-ui);
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--iris);
  box-shadow:
    rgba(255, 255, 255, 0.18) 0 1px 2px -0.5px inset,
    rgba(0, 0, 0, 0.2) 0 8px 20px -6px;
}

.btn-primary:hover { opacity: 0.92; }

.btn-ghost {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--hairline);
  color: #fff;
}

.btn-ghost:hover { background: rgba(255, 255, 255, 0.06); }

.btn-block { width: 100%; }

/* legacy twin buttons → styled as the two big action buttons */
.twin-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.twin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}

.twin-btn-primary {
  background: var(--iris);
  color: #fff;
  box-shadow: rgba(255, 255, 255, 0.18) 0 1px 2px -0.5px inset, rgba(0, 0, 0, 0.2) 0 8px 20px -6px;
}

.twin-btn-secondary {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--hairline);
  color: #fff;
}

/* ===================== QR BANNER ===================== */

.qr-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 16px 18px;
  background: rgba(5, 6, 27, 0.6);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  cursor: pointer;
  color: var(--white);
}

.qr-icon-box {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  background: var(--lavender);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--iris);
}

.qr-icon-box svg, .qr-content svg, .qr-arrow svg {
  width: 22px;
  height: 22px;
}

.qr-content {
  flex: 1;
}

.qr-title {
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
}

.qr-desc {
  font-size: 12px;
  color: var(--dim);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.qr-arrow {
  color: var(--dim);
}

/* ===================== SECTIONS / MENU ===================== */

.sec {
  margin-top: 30px;
}

.sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.sec-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sec-title svg {
  width: 20px;
  height: 20px;
}

.sec-more {
  font-size: 12px;
  color: var(--cyan);
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-ui);
}

/* legacy section wrapper → same as sec */
.section {
  margin-top: 26px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.section-action {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.03);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
}

.section-action svg {
  width: 16px;
  height: 16px;
}

/* menu grid */
.menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.menu-item {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 18px;
  grid-template-rows: auto auto;
  column-gap: 13px;
  align-items: center;
  min-height: 68px;
  background: rgba(255, 255, 255, 0.045);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 11px 14px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
  color: var(--white);
  text-decoration: none;
  width: 100%;
  text-align: left;
  font: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.menu-item::after {
  content: "›";
  grid-column: 3;
  grid-row: 1 / 3;
  justify-self: end;
  color: var(--dim);
  font-size: 25px;
  font-weight: 300;
  line-height: 1;
}

.menu-item:hover {
  border-color: var(--iris);
  transform: translateY(-1px);
}

.menu-item:active {
  transform: translateY(1px);
}

.menu-ic {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--lavender);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--iris);
  margin-bottom: 0;
}

.menu-ic svg {
  width: 20px;
  height: 20px;
}

.menu-name {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-size: 14px;
  font-weight: 600;
}

.menu-desc {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
}

.menu-desc {
  font-size: 11px;
  color: var(--dim);
  margin-top: 3px;
  line-height: 1.35;
}

/* ===================== ROWS ===================== */

.row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.15s;
  color: var(--white);
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.row + .row {
  margin-top: 10px;
}

.row:hover {
  border-color: var(--iris);
}

.row:active {
  transform: scale(0.985);
}

.row-ic {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: var(--lavender);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--iris);
}

.row-ic svg {
  width: 20px;
  height: 20px;
}

.row-body {
  flex: 1;
  min-width: 0;
}

.row-title {
  font-size: 14px;
  font-weight: 600;
}

.row-sub {
  font-size: 11px;
  color: var(--dim);
  margin-top: 2px;
}

.row-right {
  color: var(--dim);
  flex: none;
}

.row-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--iris) 18%, transparent);
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--iris) 35%, transparent);
}

/* legacy card list (tx-rows grouped in a card) */
.card {
  background: rgba(255, 255, 255, 0.045);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 4px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ===================== TRANSACTIONS ===================== */

.tx {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--hairline);
}

.tx:last-child {
  border-bottom: none;
}

.tx-dot {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tx-dot svg {
  width: 16px;
  height: 16px;
}

.tx-in {
  background: rgba(22, 199, 132, 0.16);
  color: var(--green);
}

.tx-out {
  background: rgba(246, 70, 93, 0.16);
  color: var(--red);
}

.tx-body {
  flex: 1;
}

.tx-title {
  font-size: 13px;
  font-weight: 600;
}

.tx-sub {
  font-size: 11px;
  color: var(--dim);
  margin-top: 2px;
}

.tx-amt {
  font-size: 13px;
  font-weight: 600;
}

.tx-amt.in {
  color: var(--green);
}

.tx-amt.out {
  color: var(--red);
}

/* legacy history rows */
.tx-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--hairline);
  color: var(--white);
}

.tx-row:last-child {
  border-bottom: none;
}

.tx-dot-topup {
  background: rgba(22, 199, 132, 0.16);
  color: var(--green);
}

.tx-dot-pay,
.tx-dot-withdrawal {
  background: rgba(246, 70, 93, 0.16);
  color: var(--red);
}

.tx-info {
  flex: 1;
  min-width: 0;
}

.tx-name {
  font-size: 13px;
  font-weight: 600;
}

.tx-time {
  font-size: 11px;
  color: var(--dim);
  margin-top: 2px;
}

.tx-comment {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.tx-end {
  flex: none;
  text-align: right;
}

.tx-val {
  font-size: 13px;
  font-weight: 600;
}

.tx-val-plus,
.tx-val.in {
  color: var(--green);
}

.tx-val-minus,
.tx-val.out {
  color: var(--red);
}

/* ===================== SUB-HEADER (back) ===================== */

.sub-hdr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0 6px;
}

.back-btn {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  cursor: pointer;
  flex: none;
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.back-btn svg {
  width: 18px;
  height: 18px;
}

.sub-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ===================== PANELS / FIELDS ===================== */

.panel {
  background: rgba(255, 255, 255, 0.045);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 18px;
  margin-top: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.panel-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
}

.panel-value {
  font-size: 26px;
  font-weight: 600;
  margin-top: 6px;
  letter-spacing: -0.01em;
}

.field {
  margin-top: 14px;
}

.field > label,
.form-label {
  display: block;
  font-size: 12px;
  color: var(--dim);
  margin-bottom: 8px;
}

.input,
.form-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.04);
  color: var(--white);
  font-size: 15px;
  font-family: var(--font-ui);
  outline: none;
}

.input:focus,
.form-input:focus {
  border-color: var(--iris);
}

.form-input::placeholder {
  color: var(--w30);
}

.form-group {
  margin-top: 14px;
}

.form-hint {
  font-size: 11px;
  color: var(--dim);
  margin-top: 6px;
}

.form-hint-red {
  color: var(--red);
}

/* chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.chip {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.03);
  color: var(--dim);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
  font-family: var(--font-ui);
}

.chip:hover {
  border-color: var(--iris);
}

.chip.on {
  background: var(--iris);
  border-color: var(--iris);
  color: #fff;
}

/* legacy filter chips */
.filters-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px;
  scrollbar-width: none;
}

.filters-row::-webkit-scrollbar {
  display: none;
}

.filter-chip {
  flex: none;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.03);
  color: var(--dim);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font-ui);
}

.filter-chip.active {
  background: var(--iris);
  border-color: var(--iris);
  color: #fff;
}

.filter-params,
.filter-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.filter-apply,
.filter-clear {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.04);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
}

.filter-apply {
  background: var(--iris);
  border-color: var(--iris);
}

/* ===================== STATS ===================== */

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 22px;
}

.stat {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 14px;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.stat-num {
  font-size: 18px;
  font-weight: 600;
}

.stat-lbl {
  font-size: 10px;
  color: var(--dim);
  margin-top: 4px;
  letter-spacing: 0.04em;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}

.stats-card {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.stats-card-label {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--dim);
}

.stats-card-value {
  font-size: 20px;
  font-weight: 600;
  margin-top: 6px;
}

.stats-period-btns {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}

.chart-container {
  margin-top: 14px;
  width: 100%;
}

.pie-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.pie-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--w70);
}

.pie-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

/* legacy section titles/actions */
.section-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-title svg {
  width: 20px;
  height: 20px;
  stroke: var(--cyan);
}

/* stats page */
.stats-period-btn {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.03);
  color: var(--dim);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-ui);
  transition: all 0.15s;
}

.stats-period-btn.active,
.stats-period-btn:hover {
  background: var(--iris);
  border-color: var(--iris);
  color: #fff;
}

.stats-card-value.red { color: var(--red); }
.stats-card-value.green { color: var(--green); }
.stats-card-value.blue { color: var(--cyan); }

.chart-container {
  margin-top: 14px;
  width: 100%;
  height: 190px;
  position: relative;
}

.chart-container:has(canvas) {
  height: 190px;
}

/* history filters extra inputs */
.filter-params input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.04);
  color: var(--white);
  font-size: 14px;
  font-family: var(--font-ui);
}

.filter-params input:focus {
  border-color: var(--iris);
}

.filter-params > div {
  flex: 1;
  min-width: 130px;
}

.filter-params label {
  display: block;
  font-size: 11px;
  color: var(--dim);
  margin-bottom: 6px;
}

.filter-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.filter-clear,
.filter-apply {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.04);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
}

/* ===================== FORMS / TOGGLES ===================== */

.switch {
  position: relative;
  width: 46px;
  height: 27px;
  border-radius: 999px;
  cursor: pointer;
  flex: none;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}

.switch .slider {
  position: absolute;
  inset: 0;
  height: 100%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid var(--hairline);
  transition: background 0.2s;
}

.switch .slider::before {
  display: none;
}

.switch .slider::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}

.switch input:checked + .slider {
  background: var(--iris);
}

.switch input:checked + .slider::after {
  transform: translateX(19px);
}

.slider {
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  outline: none;
}

.slider::-webkit-slider-thumb {
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--iris);
  border: 3px solid #fff;
  cursor: pointer;
}

/* ===================== PROFILE ===================== */

.profile-section {
  margin-top: 20px;
}

.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--iris), var(--cyan));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  font-weight: 600;
}

.profile-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.profile-avatar-text {
  letter-spacing: 0.02em;
}

.profile-name {
  font-size: 20px;
  font-weight: 700;
  margin-top: 14px;
}

.profile-handle {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--dim);
  margin-top: 4px;
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 18px;
}

.profile-stat {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 10px 6px;
  text-align: center;
}

.profile-stat-val {
  font-size: 15px;
  font-weight: 600;
}

.profile-stat-label {
  font-size: 9px;
  color: var(--dim);
  margin-top: 3px;
  letter-spacing: 0.03em;
}

.profile-info,
.profile-menu {
  margin-top: 16px;
}

.profile-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 4px;
  border-bottom: 1px solid var(--hairline);
}

.profile-info-row:last-child {
  border-bottom: none;
}

.profile-info-key {
  font-size: 13px;
  color: var(--dim);
}

.profile-info-val {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  cursor: pointer;
  margin-top: 10px;
  color: var(--white);
  text-decoration: none;
  transition: border-color 0.15s;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.profile-menu-item:hover {
  border-color: var(--iris);
}

.pm-icon {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.pm-icon-blue {
  background: var(--lavender);
  color: var(--iris);
}

.pm-icon-green {
  background: var(--mint);
  color: var(--green);
}

.pm-icon-red {
  background: rgba(246, 70, 93, 0.16);
  color: var(--red);
}

.pm-icon-amb {
  background: var(--amb-bg);
  color: var(--amber);
}

.pm-icon-grn {
  background: var(--grn-bg);
  color: var(--green);
}

.pm-body {
  flex: 1;
  min-width: 0;
}

.pm-name {
  font-size: 14px;
  font-weight: 600;
}

.pm-desc {
  font-size: 11px;
  color: var(--dim);
  margin-top: 2px;
}

.pm-arrow {
  color: var(--dim);
  font-size: 18px;
}

.profile-ver {
  margin-top: 24px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dim);
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-ver::before,
.profile-ver::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

/* ===================== REFERRAL ===================== */

.ref-link-card {
  margin-top: 18px;
}

.ref-link-label {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--dim);
}

.ref-link-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: rgba(0, 0, 0, 0.25);
}

.ref-link-text {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--lavender);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-copy-btn {
  flex: none;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--iris);
  border: none;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
}

.ref-copy-btn:active {
  opacity: 0.85;
}

.ref-share-hint {
  font-size: 11px;
  color: var(--dim);
  margin-top: 10px;
}

.ref-levels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 8px;
}

.ref-level-card {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 14px;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.ref-level-num {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
}

.ref-level-label {
  font-size: 10px;
  color: var(--dim);
  margin-top: 3px;
}

.ref-level-count {
  font-size: 11px;
  color: var(--cyan);
  margin-top: 6px;
}

.ref-earnings {
  margin-top: 14px;
}

.ref-earnings-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
}

.ref-earnings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}

.ref-earnings-row:last-child {
  border-bottom: none;
}

.ref-earnings-label {
  font-size: 13px;
  color: var(--dim);
}

.ref-earnings-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
}

.ref-rates {
  margin-top: 14px;
}

.ref-rates-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
}

.ref-rate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}

.ref-rate-row:last-child {
  border-bottom: none;
}

.ref-rate-level {
  font-size: 13px;
}

.ref-rate-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--cyan);
}

/* ===================== THEME ROWS ===================== */

.theme-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.15s;
  margin-bottom: 10px;
  color: var(--white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.theme-row:hover,
.theme-row.sel {
  border-color: var(--iris);
}

.swatch {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.theme-name {
  font-size: 14px;
  font-weight: 600;
  flex: 1;
}

.theme-check {
  font-family: var(--font-mono);
  font-size: 11px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--iris);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.theme-row.sel .theme-check {
  display: flex;
}

/* ===================== BOTTOM NAV ===================== */

.bottom-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  width: min(430px, calc(100% - 24px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(5, 6, 27, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: rgba(0, 0, 0, 0.45) 0 14px 34px -14px;
  z-index: 50;
}

.bn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--dim);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  transition: color 0.15s;
  text-decoration: none;
  font-family: var(--font-ui);
  background: none;
}

.bn-item.on {
  color: var(--white);
}

.bn-item svg {
  width: 21px;
  height: 21px;
}

.bn-center {
  flex: 1;
  display: flex;
  justify-content: center;
}

.bn-qr {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--iris);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 4px solid #0a0d29;
  transform: translateY(-14px);
  cursor: pointer;
  box-shadow:
    rgba(255, 255, 255, 0.18) 0 1px 2px -0.5px inset,
    color-mix(in srgb, var(--iris) 55%, transparent) 0 12px 28px -10px;
  transition: opacity 0.15s;
}

.bn-qr:hover {
  opacity: 0.92;
}

.bn-qr svg {
  width: 24px;
  height: 24px;
}

/* ===================== SHEETS / OVERLAYS ===================== */

.sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: none;
  align-items: flex-end;
  justify-content: center;
}

.sheet-overlay.active {
  display: flex;
}

.sheet {
  width: 100%;
  max-width: 430px;
  background: linear-gradient(180deg, var(--card-a) 0%, var(--bg-top) 120%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px 24px 0 0;
  padding: 8px 20px 30px;
  max-height: 92dvh;
  overflow-y: auto;
  animation: sheetUp 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

@keyframes sheetUp {
  from { transform: translateY(60px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.sheet-handle {
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  margin: 6px auto 14px;
}

.sheet-body {
  display: flex;
  flex-direction: column;
}

/* pay center */
.pay-center {
  text-align: center;
  padding: 14px 0 4px;
}

.pay-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 18px;
  background: var(--lavender);
  color: var(--iris);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}

.pay-title {
  font-size: 17px;
  font-weight: 600;
}

.pay-subtitle {
  font-size: 12px;
  color: var(--dim);
  margin-top: 3px;
}

.pay-amount-section {
  margin-top: 16px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 16px;
  text-align: center;
}

.pay-amount-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
}

.pay-amount-big {
  font-size: 36px;
  font-weight: 600;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.pay-amount-crypto {
  font-size: 12px;
  color: var(--dim);
  margin-top: 8px;
  font-family: var(--font-mono);
}

.pay-amount-crypto em {
  font-style: normal;
  color: var(--cyan);
}

.pay-details {
  margin-top: 16px;
}

.pay-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline);
}

.pay-detail-row:last-child {
  border-bottom: none;
}

.pay-detail-key {
  font-size: 13px;
  color: var(--dim);
}

.pay-detail-val {
  font-size: 13px;
  font-weight: 600;
}

.pay-detail-val-grn {
  color: var(--green);
}

.pay-detail-val-red {
  color: var(--red);
}

/* method rows (selectable) */
.method {
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  margin-top: 10px;
}

.method:active {
  transform: scale(0.985);
}

.method.sel {
  border-color: var(--iris);
}

.method-check {
  display: none;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--iris) 18%, transparent);
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--iris) 35%, transparent);
}

.method.sel .method-check {
  display: inline-block;
}

/* ===================== GLOBAL OVERLAYS ===================== */

.overlay-full {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(5, 6, 27, 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 24px;
  animation: screenIn 0.25s ease;
}

/* processing overlay */
.proc-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--iris);
  animation: spin 0.8s linear infinite;
}

.proc-ring-ok {
  border-color: var(--green);
  background: var(--grn-bg);
}

.proc-ring-err {
  border-color: var(--red);
  background: var(--red-bg);
}

.proc-title {
  font-size: 17px;
  font-weight: 600;
  margin-top: 20px;
  text-align: center;
}

.proc-desc {
  font-size: 12px;
  color: var(--dim);
  margin-top: 6px;
  text-align: center;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* success check */
.t-success-check {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  animation: qrpPop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.t-success-check svg {
  width: 32px;
  height: 32px;
}

@keyframes qrpPop {
  from { transform: scale(0.25); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* shimmer / stagger helpers */
.t-shimmer {
  animation: starTwinkle 2.4s ease-in-out infinite alternate;
}

.t-stagger,
.t-stagger-line {
  animation: screenIn 0.35s ease both;
}

.t-stagger-line--1 { animation-delay: 0.04s; }
.t-stagger-line--2 { animation-delay: 0.09s; }
.t-panel-slide {
  animation: sheetUp 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}

/* toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  z-index: 400;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(5, 6, 27, 0.9);
  border: 1px solid var(--hairline);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: rgba(0, 0, 0, 0.45) 0 14px 34px -14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  animation: sheetUp 0.25s ease-out;
  max-width: calc(100% - 32px);
}

.toast-icon {
  font-size: 16px;
}

/* loading dots */
.loading-dots {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.loading-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--iris);
  animation: ld 1.1s ease-in-out infinite;
}

.loading-dots i:nth-child(2) { animation-delay: 0.13s; }
.loading-dots i:nth-child(3) { animation-delay: 0.26s; }

@keyframes ld {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

/* confetti */
.confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 500;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  animation: cfall linear forwards;
}

@keyframes cfall {
  to {
    transform: translateY(105vh) rotate(720deg);
    opacity: 0.4;
  }
}

/* empty state */
.empty-state {
  padding: 26px 10px;
  text-align: center;
}

.empty-state-text {
  font-size: 13px;
  color: var(--dim);
}

/* info box */
.info-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin: 12px 0;
}

.info-box-icon {
  font-size: 16px;
  flex: none;
}

.info-box-text {
  font-size: 12px;
  color: var(--w70);
  line-height: 1.45;
}

/* proc badges / misc legacy */
.btn-blue { background: var(--iris); color: #fff; }
.btn-green { background: var(--green); color: #fff; }
.btn-red { background: var(--red); color: #fff; }
.btn-primary-inner { display: inline-flex; align-items: center; gap: 8px; }

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 var(--grn-bg);
  animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.tab-bar {
  display: none;
}

.tab-bar-inner {
  display: none;
}

.is-shown { display: block; }
.visible { display: block ; }

/* =====================================================================
   CAMERA SCANNER (ind.html-style glass overlay)
   ===================================================================== */

.camera-scanner {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  background: #000;
}

.camera-scanner.active {
  display: flex;
}

.scanner-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scanner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.scanner-top-cover {
  flex: 1.6;
  background: rgba(5, 6, 27, 0.82);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.scanner-middle {
  display: flex;
  align-items: center;
}

.scanner-left-cover,
.scanner-right-cover {
  flex: 1;
  height: 260px;
  background: rgba(5, 6, 27, 0.82);
}

.scanner-frame {
  width: 240px;
  height: 260px;
  position: relative;
  border-radius: 18px;
  border: 1.5px solid var(--iris);
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--iris) 9%, transparent),
    0 0 34px color-mix(in srgb, var(--iris) 45%, transparent),
    inset 0 0 30px rgba(0, 0, 0, 0.3);
}

.scanner-line {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 12px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--iris), transparent);
  filter: drop-shadow(0 0 6px var(--iris));
  animation: scanline 2s linear infinite;
}

@keyframes scanline {
  0% { transform: translateY(0); opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translateY(232px); opacity: 0; }
}

.scanner-bottom-cover {
  flex: 1.8;
  background: rgba(5, 6, 27, 0.82);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 26px;
}

.scanner-hint {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.scanner-controls {
  position: absolute;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 130;
}

.scanner-torch-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.scanner-close {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 130;
}

.camera-error-panel {
  position: absolute;
  inset: 0;
  z-index: 130;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(5, 6, 27, 0.94);
  padding: 24px;
  text-align: center;
  display: none;
}

.camera-error-panel.active {
  display: flex;
}

.error-icon {
  font-size: 40px;
  margin-bottom: 14px;
}

.error-title {
  font-size: 17px;
  font-weight: 600;
}

.error-text {
  font-size: 13px;
  color: var(--dim);
  margin: 8px 0 18px;
  line-height: 1.45;
}

.error-close-btn {
  padding: 13px 22px;
  border-radius: 999px;
  border: none;
  background: var(--iris);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  margin: 4px;
}

/* legacy scanner ids kept */
#screenScan {
  padding: 0 ;
}

/* ===================== P2P / misc (guarded) ===================== */
.p2p-tabs { display: flex; gap: 6px; margin: 10px 0 14px; flex-wrap: wrap; }
.p2p-tab {
  flex: 1;
  min-width: 70px;
  padding: 10px 8px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.03);
  color: var(--dim);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  font-family: var(--font-ui);
}
.p2p-tab.on { background: var(--iris); border-color: var(--iris); color: #fff; }
.qr-methods { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.qr-method {
  padding: 14px 8px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.03);
  color: var(--dim);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  font-family: var(--font-ui);
}
.qr-method.qr-active { background: var(--iris); border-color: var(--iris); color: #fff; }

/* Fluxa flow UI — non-breaking visual layer */

/* Fluxa palette: deep navy surfaces, restrained glass, and a moving mint accent. */
:root {
  --fluxa-bg: #03111f;
  --fluxa-bg-alt: #061827;
  --fluxa-surface: #091d2d;
  --fluxa-surface-raised: #0b2434;
  --fluxa-border: #163b4b;
  --fluxa-border-active: rgba(24, 221, 224, .55);
  --fluxa-text: #f2f7fa;
  --fluxa-text-secondary: #94a9b8;
  --fluxa-text-muted: #637e91;
  --fluxa-cyan: #18dde0;
  --fluxa-green: #55f4b0;
  --fluxa-mint: #a2ffd0;
  --fluxa-gradient-primary: linear-gradient(110deg, #9bffb7 0%, #36f2cb 48%, #15dde0 100%);
  --fluxa-radius-sm: 12px;
  --fluxa-radius-md: 18px;
  --fluxa-radius-lg: 24px;
  --fluxa-radius-xl: 30px;
  --fluxa-transition: 160ms ease;
  --bg: #03111f;
  --bg1: #061827;
  --bg2: #091d2d;
  --bg3: #0b2434;
  --bl5: #18dde0;
  --bl7: #55f4b0;
  --iris: #18dde0;
  --cyan: #55f4b0;
  --w92: #f2f7fa;
  --w70: #94a9b8;
  --w50: #637e91;
  --w08: rgba(57, 210, 222, .19);
  --hairline: rgba(57, 210, 222, .19);
}

body {
  background:
    radial-gradient(ellipse at 8% 12%, rgba(24, 221, 224, .09), transparent 34%),
    radial-gradient(ellipse at 92% 82%, rgba(85, 244, 176, .07), transparent 32%),
    linear-gradient(155deg, #03111f 0%, #061827 100%);
}

.navbar, .header {
  background: rgba(6, 24, 39, .78) ;
  border-color: rgba(57, 210, 222, .22) ;
}

.card, .balance-card, .transfer-card, .menu-item, .qr-banner,
.profile-info, .profile-menu, .stats-card, .shop-card, .ref-link-card {
  background: linear-gradient(145deg, rgba(12, 39, 56, .95), rgba(5, 22, 36, .97)) ;
  border-color: rgba(57, 210, 222, .19) ;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 14px 34px rgba(0,0,0,.16) ;
}

.btn-primary, .btn-blue, .twin-btn-primary, .filter-apply, .shop-open-btn {
  color: #03202a ;
  background: linear-gradient(110deg, #9bffb7 0%, #36f2cb 48%, #15dde0 100%) ;
  border-color: transparent ;
  box-shadow: 0 0 22px rgba(40, 235, 210, .17) ;
}

.brand-name span, .brand-name, .logo-text { color: #f2f7fa; }
.brand-name span { color: #55f4b0; }
.transfer-hero { background: linear-gradient(135deg, rgba(24,221,224,.18), rgba(85,244,176,.07)); border-color: rgba(24,221,224,.28); }

/* Primary Fluxa wallet composition */
.navbar {
  margin-top: 16px ;
  padding: 12px 12px 12px 16px ;
  border-radius: 20px ;
  box-shadow: 0 12px 38px rgba(0, 0, 0, .2), inset 0 1px rgba(255,255,255,.035) ;
}
.brand-mark {
  width: 30px ;
  height: 30px ;
  border-radius: 10px ;
  background: linear-gradient(135deg, #a2ffd0, #18dde0) ;
  box-shadow: 0 0 22px rgba(24,221,224,.24) ;
  transform: rotate(-8deg);
}
.brand-mark::before { background: #03202a ; inset: 8px ; border-radius: 4px ; }
.brand-name { font-size: 17px ; font-weight: 800 ; letter-spacing: -.035em ; }
.nav-live { color: #a2ffd0 ; border-color: rgba(85,244,176,.25) ; background: rgba(85,244,176,.07) ; }
.screen { padding-top: 18px ; }
#screenHome .balance-card, #screenHome #balance-card {
  min-height: 222px;
  border-radius: 28px ;
  overflow: hidden;
  background:
    radial-gradient(300px 180px at 95% 10%, rgba(24,221,224,.22), transparent 68%),
    linear-gradient(145deg, #0c2b3c 0%, #071a2b 58%, #051522 100%) ;
}
#screenHome .balance-card::after, #screenHome #balance-card::after {
  content: "";
  position: absolute;
  right: -12%; top: 34%; width: 76%; height: 90px;
  border-top: 1px solid rgba(162,255,208,.5);
  border-radius: 50%; transform: rotate(-14deg);
  box-shadow: 0 -10px 30px rgba(24,221,224,.16);
  pointer-events: none;
}
.section-title, .sec-title { color: #f2f7fa ; font-weight: 750 ; letter-spacing: -.015em; }
.quick-item, .menu-item { transition: transform var(--fluxa-transition), border-color var(--fluxa-transition), background var(--fluxa-transition) ; }
.quick-item:hover, .menu-item:hover { transform: translateY(-2px); border-color: var(--fluxa-border-active) ; }
.bottom-nav, .tab-bar-inner { background: rgba(5,22,36,.88) ; border-color: rgba(57,210,222,.2) ; }
.tab-item.active, .tab-item.active .tab-item-text { color: #55f4b0 ; }
.form-input, .form-select, textarea { background: rgba(3,17,31,.68) ; border-color: rgba(57,210,222,.24) ; }
.form-input:focus, .form-select:focus, textarea:focus { border-color: rgba(24,221,224,.75) ; box-shadow: 0 0 0 3px rgba(24,221,224,.1) ; }
.btn-ghost { background: rgba(9,29,45,.72) ; border-color: rgba(57,210,222,.22) ; }

.theme-row {
  margin: 9px 0 ;
  padding: 13px 14px ;
  border: 1px solid rgba(57,210,222,.16) ;
  border-radius: 18px ;
  background: linear-gradient(145deg, rgba(12,39,56,.9), rgba(5,22,36,.92)) ;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease ;
}
.theme-row:hover, .theme-row.sel {
  border-color: rgba(24,221,224,.65) ;
  box-shadow: 0 0 0 3px rgba(24,221,224,.08), 0 12px 28px rgba(0,0,0,.18) ;
  transform: translateY(-1px);
}
.theme-row .swatch { width: 48px ; height: 48px ; border-radius: 15px ; box-shadow: inset 0 1px rgba(255,255,255,.18), 0 8px 18px rgba(0,0,0,.2); }
.theme-name { color: #f2f7fa ; font-weight: 700 ; }
.theme-check { color: #55f4b0 ; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms ;
    animation-iteration-count: 1 ;
    transition-duration: .01ms ;
    scroll-behavior: auto ;
  }
}

/* Fluxa final authority layer: this intentionally lives at EOF. */
:root {
  --fluxa-page-width: 760px;
  --fluxa-page-gutter: clamp(16px, 4vw, 28px);
}
html, body { min-width: 320px; background: #03111f ; }
body { background-image: linear-gradient(rgba(24,221,224,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(24,221,224,.025) 1px,transparent 1px),radial-gradient(circle at 15% 0%,rgba(24,221,224,.1),transparent 32%),linear-gradient(145deg,#03111f,#061827) ; background-size:44px 44px,44px 44px,auto,auto ; }
.ambient { opacity:.12 ; pointer-events:none ; }
.navbar { width:min(calc(100% - 32px),var(--fluxa-page-width)) ; margin:16px auto 0 ; }
.app { width:min(100%,var(--fluxa-page-width)) ; max-width:var(--fluxa-page-width) ; padding:0 var(--fluxa-page-gutter) 132px ; }
.screen.active { display:block ; min-height:0; padding:24px 0 ; animation:none ; }
.screen>.section,.screen>.sec,.screen>.card,.screen>.service-page,.screen>.transfer-card,.screen>.transfer-hero { margin-left:0 ; margin-right:0 ; }
.card,.balance-card,.transfer-card,.profile-info,.profile-menu,.stats-card,.shop-card,.ref-link-card,.ref-earnings,.ref-rates,.filters-row,.filter-params,.qr-banner,.menu-item,.service-card,.service-list-section,.profile-section { border:1px solid rgba(137,224,226,.16) ; border-radius:22px ; background:rgba(7,28,44,.86) ; box-shadow:0 18px 45px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.035) ; }
#screenHome { display:grid ; gap:18px; }
#screenHome .card-wrap { margin:0 ; }
#screenHome #balance-card,#screenHome .balance-card { min-height:238px ; padding:24px ; border-radius:28px ; background:linear-gradient(140deg,#0b3042,#071b2b 65%,#061421) ; box-shadow:0 22px 60px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.06) ; }
#screenHome .actions { display:grid ; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px ; }
#screenHome .actions .btn { min-height:50px; border-radius:15px ; }
#screenHome .qr-banner { min-height:84px; padding:16px ; }
#screenHome .menu { display:grid ; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px ; }
#screenHome .menu-item { min-height:108px; padding:16px ; text-align:left; }
#screenHome .menu-ic { margin-bottom:14px; }
.sec-head,.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px ; }
.sec-title,.section-title { font-size:17px ; font-weight:800 ; color:#f2f7fa ; }
.sec-more,.section-action { color:#55f4b0 ; font-size:12px; }
.bottom-nav { width:min(calc(100% - 32px),520px) ; left:50% ; transform:translateX(-50%) ; bottom:14px ; padding:6px ; border-radius:22px ; background:rgba(5,22,36,.94) ; border:1px solid rgba(137,224,226,.18) ; box-shadow:0 16px 45px rgba(0,0,0,.35) ; }
.bn-item { min-height:52px ; border-radius:16px ; }
.bn-item.on { color:#55f4b0 ; background:rgba(85,244,176,.08) ; }
.bn-center { margin-top:-22px ; }
.bn-qr { width:58px ; height:58px ; border:5px solid #03111f ; background:linear-gradient(135deg,#9bffb7,#15dde0) ; color:#03202a ; box-shadow:0 8px 24px rgba(24,221,224,.32) ; }
.transfer-hero { padding:22px ; margin:0 0 14px ; }
.transfer-hero h1 { font-size:29px ; }
.transfer-card { padding:22px ; }
.form-input,.form-select,textarea { min-height:48px; border-radius:14px ; background:#041522 ; }
.btn-primary,.btn-blue { min-height:50px; border-radius:15px ; }
@media (max-width:520px) { .navbar { width:calc(100% - 24px) ; } .app { padding-inline:14px ; } #screenHome .menu-item { min-height:98px; } }

/* Fluxa v2 — final layout normalization. Keep this block last so legacy theme
   rules cannot reintroduce overlapping cards, decorative artifacts or jumps. */
:root {
  --fluxa-page-width: 760px;
  --fluxa-page-gutter: clamp(16px, 4vw, 28px);
}

html, body {
  min-width: 320px;
  background: #03111f ;
}

body {
  background-image:
    linear-gradient(rgba(24, 221, 224, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 221, 224, .025) 1px, transparent 1px),
    radial-gradient(circle at 15% 0%, rgba(24, 221, 224, .1), transparent 32%),
    linear-gradient(145deg, #03111f 0%, #061827 100%) ;
  background-size: 44px 44px, 44px 44px, auto, auto ;
}

.ambient { opacity: .16 ; pointer-events: none ; }
.navbar { width: min(calc(100% - 32px), var(--fluxa-page-width)) ; margin: 16px auto 0 ; }
.app { width: min(100%, var(--fluxa-page-width)) ; max-width: var(--fluxa-page-width) ; padding: 0 var(--fluxa-page-gutter) 132px ; }
.screen.active { display: block ; min-height: 0; padding: 24px 0 24px ; animation: none ; }

.screen > .section,
.screen > .sec,
.screen > .card,
.screen > .service-page,
.screen > .transfer-card,
.screen > .transfer-hero { margin-left: 0 ; margin-right: 0 ; }

.card, .balance-card, .transfer-card, .profile-info, .profile-menu,
.stats-card, .shop-card, .ref-link-card, .ref-earnings, .ref-rates,
.filters-row, .filter-params, .qr-banner, .menu-item, .service-card,
.service-list-section, .profile-section {
  border: 1px solid rgba(137, 224, 226, .16) ;
  border-radius: 22px ;
  background: rgba(7, 28, 44, .86) ;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .18), inset 0 1px rgba(255,255,255,.035) ;
}

#screenHome { display: grid ; gap: 18px; }
#screenHome .card-wrap { margin: 0 ; }
#screenHome #balance-card,
#screenHome .balance-card {
  min-height: 238px ;
  padding: 24px ;
  border-radius: 28px ;
  background: linear-gradient(140deg, #0b3042, #071b2b 65%, #061421) ;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .28), inset 0 1px rgba(255,255,255,.06) ;
}
#screenHome #balance-card::after { opacity: .42; }
#screenHome .actions { display: grid ; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px ; }
#screenHome .actions .btn { min-height: 50px; border-radius: 15px ; }
#screenHome .qr-banner { min-height: 84px; padding: 16px ; }
#screenHome .menu { display: grid ; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px ; }
#screenHome .menu-item { min-height: 108px; padding: 16px ; text-align: left; }
#screenHome .menu-ic { margin-bottom: 14px; }
#screenHome .sec { margin-top: 0 ; }

.sec-head, .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px ; }
.sec-title, .section-title { font-size: 17px ; font-weight: 800 ; color: #f2f7fa ; }
.sec-more, .section-action { color: #55f4b0 ; font-size: 12px; }

.bottom-nav { width: min(calc(100% - 32px), 520px) ; left: 50% ; transform: translateX(-50%) ; bottom: 14px ; padding: 6px ; border-radius: 22px ; background: rgba(5, 22, 36, .94) ; border: 1px solid rgba(137, 224, 226, .18) ; box-shadow: 0 16px 45px rgba(0,0,0,.35) ; }
.bn-item { min-height: 52px ; border-radius: 16px ; }
.bn-item.on { color: #55f4b0 ; background: rgba(85,244,176,.08) ; }
.bn-center { margin-top: -22px ; }
.bn-qr { width: 58px ; height: 58px ; border: 5px solid #03111f ; background: linear-gradient(135deg,#9bffb7,#15dde0) ; color: #03202a ; box-shadow: 0 8px 24px rgba(24,221,224,.32) ; }

.transfer-hero { padding: 22px ; margin: 0 0 14px ; }
.transfer-hero h1 { font-size: 29px ; }
.transfer-card { padding: 22px ; }
.form-input, .form-select, textarea { min-height: 48px; border-radius: 14px ; background: #041522 ; }
.btn-primary, .btn-blue { min-height: 50px; border-radius: 15px ; }

.theme-row { min-height: 74px; }
.theme-row .theme-name { font-size: 14px ; }

@media (max-width: 520px) {
  .navbar { width: calc(100% - 24px) ; }
  .app { padding-inline: 14px ; }
  #screenHome .menu-item { min-height: 98px; }
}

@media (min-width: 900px) {
  #screenHome { grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); align-items: start; }
  #screenHome .card-wrap, #screenHome .qr-banner, #screenHome .menu, #screenHome .sec:last-child { grid-column: 1; }
  #screenHome .sec:first-of-type { grid-column: 2; grid-row: 1 / span 3; }
  #screenHome .menu { grid-template-columns: 1fr 1fr; }
}

:root {
  --container-max: 1120px;
  --gutter: 18px;
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.28);
  --shadow-card: 0 10px 28px rgba(0, 0, 0, 0.22);
  --bg-glass: color-mix(in srgb, var(--bg1) 86%, transparent);
}

html,
body {
  background:
    radial-gradient(1200px 480px at 50% -120px, color-mix(in srgb, var(--bl5) 18%, transparent), transparent 58%),
    linear-gradient(180deg, var(--bg), var(--bg1));
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  color: var(--w92);
  line-height: 1.35;
  min-height: 100dvh;
  font-variant-ligatures: none;
}

button,
input,
textarea,
select {
  font: inherit;
  letter-spacing: inherit;
}

input,
textarea,
select {
  -webkit-appearance: none;
  appearance: none;
}

/* Cross-platform visual normalization (iOS == Android) */
:root {
  --ui-blur: 24px;
  --ui-sat: 1.3;
}

.header,
.tab-bar-inner,
.sheet-overlay,
.modal-overlay,
#cameraScanner .scanner-hint,
#cameraScanner .scanner-close,
#cameraScanner .scanner-torch-btn {
  -webkit-backdrop-filter: blur(var(--ui-blur)) saturate(var(--ui-sat));
  backdrop-filter: blur(var(--ui-blur)) saturate(var(--ui-sat));
}

[data-platform="android"] {
  --ui-blur: 20px;
  --ui-sat: 1.2;
}

[data-platform="android"] .tab-item-text,
[data-platform="android"] .quick-label,
[data-platform="android"] .pm-name,
[data-platform="android"] .section-title,
[data-platform="android"] .btn-primary-inner {
  letter-spacing: 0.01em;
}

[data-platform="android"] .tab-bar {
  padding-bottom: max(env(safe-area-inset-bottom), 10px);
}

[data-platform="android"] .header,
[data-platform="android"] .tab-bar-inner,
[data-platform="android"] .sheet,
[data-platform="android"] .modal-content {
  border-color: color-mix(in srgb, var(--w08) 90%, transparent) ;
}

[data-platform="android"] .screen {
  padding-bottom: 124px ;
}

[data-platform="android"] .sheet {
  max-height: 92dvh;
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .header,
  .tab-bar-inner,
  .sheet-overlay,
  .modal-overlay,
  #cameraScanner .scanner-hint,
  #cameraScanner .scanner-close,
  #cameraScanner .scanner-torch-btn {
    -webkit-backdrop-filter: none ;
    backdrop-filter: none ;
  }
}

.ambient {
  opacity: 0.35 ;
  filter: blur(30px) saturate(1.15);
}

.app {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: clamp(12px, 2vw, 22px);
}

.header {
  position: sticky;
  top: 0;
  z-index: 70;
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg2) 82%, transparent);
  border: 1px solid var(--w08);
  backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: var(--shadow-soft);
}

.logo-mark svg {
  filter: drop-shadow(0 8px 18px color-mix(in srgb, var(--bl5) 28%, transparent));
}

.logo-text {
  font-size: clamp(20px, 2.2vw, 26px) ;
  letter-spacing: -0.02em;
}

.screen {
  padding: 14px 2px 120px ;
}

.balance-card,
.card,
.ref-link-card,
.ref-earnings,
.ref-rates,
.profile-info,
.profile-menu,
.stats-card,
.filters-row,
.filter-params,
.shop-card,
.chat-modal,
.info-modal,
.lootbox-modal {
  border-radius: var(--radius-xl) ;
  border: 1px solid var(--w08) ;
  background: color-mix(in srgb, var(--bg2) 88%, transparent) ;
  box-shadow: var(--shadow-card) ;
}

.balance-card {
  padding: clamp(18px, 2.5vw, 28px) ;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--bg2) 86%, transparent), color-mix(in srgb, var(--bg3) 90%, transparent)),
    radial-gradient(460px 210px at 92% -10%, color-mix(in srgb, var(--bl5) 26%, transparent), transparent 60%) ;
}

.balance-label-text {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bal-int {
  font-size: clamp(34px, 5vw, 56px) ;
  letter-spacing: -0.03em;
}

.bal-dec,
.bal-curr {
  font-size: clamp(20px, 2.6vw, 30px) ;
}

.twin-btns {
  gap: 12px ;
}

.twin-btn,
.btn-primary,
.btn-ghost,
.filter-apply,
.filter-clear,
.section-action,
.ref-copy-btn,
.shop-open-btn {
  min-height: 46px;
  border-radius: 14px ;
  font-weight: 700 ;
  letter-spacing: 0.01em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.twin-btn:active,
.btn-primary:active,
.btn-ghost:active,
.quick-item:active,
.profile-menu-item:active {
  transform: translateY(1px) scale(0.99);
}

.btn-primary,
.twin-btn-primary,
.filter-apply,
.shop-open-btn {
  background: linear-gradient(140deg, var(--bl5), var(--bl7)) ;
  border: 1px solid color-mix(in srgb, var(--bl5) 70%, #ffffff 6%) ;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--bl5) 34%, transparent);
}

.btn-ghost,
.twin-btn-secondary,
.filter-clear,
.section-action {
  background: color-mix(in srgb, var(--bg3) 90%, transparent) ;
  border: 1px solid var(--w08) ;
}

.qr-banner {
  border-radius: var(--radius-xl) ;
  border: 1px solid color-mix(in srgb, var(--bl5) 40%, transparent) ;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--bg2) 90%, transparent), color-mix(in srgb, var(--bg4) 90%, transparent)),
    radial-gradient(360px 160px at 100% 0, color-mix(in srgb, var(--bl5) 22%, transparent), transparent 64%) ;
}

.quick-grid {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) ;
  gap: 12px ;
}

.quick-item,
.stats-card,
.ref-level-card,
.profile-stat {
  border-radius: var(--radius-lg) ;
  border: 1px solid var(--w08) ;
  background: color-mix(in srgb, var(--bg3) 84%, transparent) ;
}

.quick-icon,
.pm-icon,
.profile-avatar {
  border-radius: 14px ;
}

.section {
  margin-top: 14px ;
}

.section-title {
  font-size: clamp(16px, 2.2vw, 20px) ;
  letter-spacing: -0.01em;
}

.tx-row,
.shop-card,
.profile-menu-item {
  border-radius: 16px ;
  border: 1px solid var(--w08);
  background: color-mix(in srgb, var(--bg3) 84%, transparent);
  margin-bottom: 8px;
}

.tx-dot,
.pie-legend-dot {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--bl5) 20%, transparent);
}

.filter-chip,
.stats-period-btn {
  border-radius: 999px ;
  border: 1px solid var(--w08) ;
  background: color-mix(in srgb, var(--bg3) 82%, transparent) ;
}

.filter-chip.active,
.stats-period-btn.active {
  background: linear-gradient(130deg, var(--bl5), var(--bl7)) ;
  color: #fff ;
  border-color: transparent ;
}

.filter-params input,
.form-input,
#chatInput {
  border-radius: 12px ;
  border: 1px solid var(--w08) ;
  background: color-mix(in srgb, var(--bg1) 82%, transparent) ;
}

.tab-bar {
  background: transparent ;
  border: 0 ;
  padding-bottom: max(env(safe-area-inset-bottom), 10px);
}

.tab-bar-inner {
  max-width: 520px;
  margin: 0 auto;
  border-radius: 24px;
  border: 1px solid var(--w08);
  background: color-mix(in srgb, var(--bg2) 82%, transparent);
  backdrop-filter: blur(24px) saturate(1.3);
  box-shadow: var(--shadow-soft);
}

.tab-bar-inner {
  display: flex ;
  justify-content: space-around;
  align-items: center;
  gap: 6px;
  padding: 8px 6px;
}

.tab-item {
  flex: 1;
  min-height: 54px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--w50) ;
  transition: all 0.22s var(--ease-premium, ease);
}

.tab-item .tab-icon-wrap {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-item .tab-icon-wrap svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
}

.tab-item .tab-item-text {
  font-size: 10px ;
  font-weight: 700;
  opacity: 0.75;
}

.tab-item.active {
  color: var(--w92) ;
  background: color-mix(in srgb, var(--bg3) 70%, transparent);
}

.tab-item.active .tab-item-text {
  opacity: 1;
}

.tab-item.active::before {
  content: none ;
  display: none ;
}

.tab-item-scan {
  color: var(--w70) ;
}

.tab-item-scan:active {
  transform: scale(0.96);
}

.sheet-overlay,
.modal-overlay {
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, #000 50%, transparent) ;
}

.sheet,
.modal-content {
  border-top-left-radius: 28px ;
  border-top-right-radius: 28px ;
  border: 1px solid var(--w08) ;
  background: color-mix(in srgb, var(--bg2) 96%, transparent) ;
}

.sheet-handle {
  width: 46px ;
}

#loginScreen .pay-title {
  font-size: clamp(28px, 5vw, 46px) ;
  letter-spacing: -0.03em;
}

#loginScreen .pay-subtitle {
  max-width: 560px;
  margin-inline: auto;
}

#loginScreen .form-input,
#loginScreen .btn-primary,
#loginScreen .btn-ghost,
#loginScreen .btn_install {
  max-width: 440px ;
  margin-inline: auto;
}

.camera-scanner .scanner-frame {
  border-radius: 22px;
  border-width: 2px;
}

.toast {
  border-radius: 14px ;
  border: 1px solid var(--w08);
  background: color-mix(in srgb, var(--bg2) 90%, transparent) ;
}

@media (min-width: 920px) {
  .screen {
    padding-top: 22px ;
  }

  #screenHome .quick-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) ;
  }

  .stats-grid,
  .ref-levels,
  .profile-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr)) ;
    gap: 12px;
  }

  .filter-params {
    grid-template-columns: repeat(4, minmax(0, 1fr)) ;
  }
}

/* ===== Stage 2: Screen-level radical redesign (non-breaking) ===== */

/* HOME */
#screenHome {
  display: grid;
  gap: 14px;
}

#screenHome .balance-card {
  margin-bottom: 0 ;
}

#screenHome .qr-banner {
  margin-top: 0 ;
  padding: 18px ;
}

#screenHome .qr-title {
  font-size: clamp(18px, 2.5vw, 24px) ;
  font-weight: 800 ;
  letter-spacing: -0.02em;
}

#screenHome .qr-desc {
  font-size: 13px ;
  opacity: 0.9;
}

#screenHome .quick-item {
  min-height: 110px;
  justify-content: center;
  text-align: center;
  padding: 14px 10px ;
}

#screenHome .quick-label {
  margin-top: 8px;
  font-size: 12px ;
  font-weight: 700;
}

#screenHome #txListHome {
  padding: 8px ;
}

/* HISTORY */
#screenHistory {
  display: grid;
  gap: 12px;
}

#screenHistory .filters-row {
  padding: 10px ;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

#screenHistory .filters-row::-webkit-scrollbar {
  display: none;
}

#screenHistory .filter-chip {
  white-space: nowrap;
  padding-inline: 14px ;
  font-size: 12px ;
  font-weight: 700 ;
}

#screenHistory .filter-params {
  padding: 14px ;
  gap: 10px ;
}

#screenHistory .filter-params label {
  font-size: 11px ;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--w50) ;
}

#screenHistory .filter-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#screenHistory #txListAll {
  padding: 8px ;
}

#screenHistory #historyCount {
  background: color-mix(in srgb, var(--bg3) 84%, transparent);
  border: 1px solid var(--w08);
  border-radius: 999px;
  padding: 5px 10px;
}

/* PROFILE */
#screenProfile {
  display: grid;
  gap: 12px;
}

#screenProfile .profile-section {
  border-radius: var(--radius-xl);
  border: 1px solid var(--w08);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--bg2) 90%, transparent), color-mix(in srgb, var(--bg3) 92%, transparent)),
    radial-gradient(300px 140px at 0 -20%, color-mix(in srgb, var(--bl5) 18%, transparent), transparent 64%);
  box-shadow: var(--shadow-card);
  padding: 20px 16px;
}

#screenProfile .profile-avatar {
  width: 74px ;
  height: 74px ;
  margin-bottom: 12px ;
  border: 1px solid color-mix(in srgb, var(--bl5) 46%, transparent);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--bl5) 28%, transparent);
  overflow: hidden;
}

/* Круглый "ореол" из базовых стилей — убираем, аватар должен быть
   ровным скруглённым квадратом без круга внутри/вокруг. */
#screenProfile .profile-avatar::after {
  content: none ;
  display: none ;
}

.profile-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

#screenProfile .profile-name {
  font-size: clamp(24px, 3.5vw, 34px) ;
  font-weight: 800 ;
  letter-spacing: -0.03em;
}

#screenProfile .profile-handle {
  font-size: 14px ;
  color: var(--w70) ;
}

#screenProfile .profile-stats {
  gap: 10px ;
}

#screenProfile .profile-stat {
  padding: 14px 10px ;
  text-align: center;
}

#screenProfile .profile-stat-val {
  font-size: clamp(20px, 2.2vw, 26px) ;
  font-weight: 800 ;
}

#screenProfile .profile-stat-label {
  font-size: 11px ;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

#screenProfile .profile-info {
  padding: 8px ;
}

#screenProfile .profile-info-row {
  padding: 12px 10px ;
  border-bottom: 1px dashed var(--w08);
}

#screenProfile .profile-info-row:last-child {
  border-bottom: 0;
}

#screenProfile .profile-menu {
  padding: 8px ;
}

#screenProfile .profile-menu-item {
  margin-bottom: 8px;
  padding: 12px ;
}

#screenProfile .pm-name {
  font-weight: 750 ;
}

#screenProfile .pm-desc {
  color: var(--w70) ;
}

/* SETTINGS */
#screenSettings {
  display: grid;
  gap: 10px;
}

#screenSettings .profile-menu {
  margin: 10px 0 0 ;
  padding: 10px ;
}

#screenSettings .profile-menu-item {
  padding: 14px 12px ;
  border-radius: 16px ;
}

#screenSettings .pm-name {
  font-size: 15px ;
  font-weight: 760 ;
}

#screenSettings .pm-desc {
  font-size: 12px ;
  color: var(--w70) ;
  max-width: 90%;
}

#screenSettings .switch {
  transform: scale(1.05);
}

#screenSettings .slider {
  box-shadow: inset 0 0 0 1px var(--w08);
}

/* Global readability for operation lists */
.tx-name {
  font-weight: 700 ;
  letter-spacing: -0.01em;
}

.tx-time,
.tx-sub {
  color: var(--w70) ;
}

.tx-val {
  font-weight: 800 ;
  letter-spacing: -0.01em;
}

@media (min-width: 920px) {
  #screenHome {
    grid-template-columns: 1.2fr 1fr;
    align-items: start;
  }

  #screenHome .balance-card,
  #screenHome .section,
  #screenHome .quick-grid,
  #screenHome .qr-banner {
    grid-column: 1;
  }

  #screenHome .section:last-child {
    grid-column: 2;
    grid-row: 1 / span 4;
    margin-top: 0 ;
  }

  #screenProfile {
    grid-template-columns: 1fr 1.2fr;
    align-items: start;
  }

  #screenProfile .profile-section,
  #screenProfile .profile-stats,
  #screenProfile .profile-info {
    grid-column: 1;
  }

  #screenProfile .profile-menu,
  #screenProfile .profile-ver {
    grid-column: 2;
  }

  #screenHistory .filter-actions {
    grid-template-columns: 180px 180px;
    justify-content: end;
  }

  #screenSettings .profile-menu {
    max-width: 900px;
    margin-inline: auto ;
  }
}

/* ===== Stage 3: Premium polish for sheets/modals/scanner/chat ===== */

.sheet-overlay {
  align-items: flex-end;
}

.sheet {
  width: min(100%, 560px) ;
  margin: 0 auto;
  border-top-left-radius: 30px ;
  border-top-right-radius: 30px ;
  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.22), 0 18px 42px rgba(0, 0, 0, 0.32) ;
}

.sheet-body {
  padding: 8px 18px 20px ;
}

.sheet .pay-center {
  margin-bottom: 16px ;
}

.sheet .pay-icon {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 30px ;
  margin: 0 auto 12px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--bg3) 92%, transparent), color-mix(in srgb, var(--bg4) 90%, transparent)),
    radial-gradient(110px 70px at 100% 0, color-mix(in srgb, var(--bl5) 22%, transparent), transparent 68%);
  border: 1px solid var(--w08);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--bl5) 22%, transparent);
}

.sheet .pay-title {
  font-size: clamp(22px, 3vw, 30px) ;
  font-weight: 820 ;
  letter-spacing: -0.02em;
}

.sheet .pay-subtitle {
  color: var(--w70) ;
  font-size: 13px ;
  max-width: 460px;
  margin-inline: auto;
}

.sheet .pay-amount-section,
.sheet .pay-details,
.sheet .info-box,
.sheet #depositAmountSection,
.sheet #depositMethodSelect,
.sheet #withdrawDetails {
  border-radius: 16px ;
  border: 1px solid var(--w08);
  background: color-mix(in srgb, var(--bg3) 86%, transparent) ;
  padding: 12px ;
}

.sheet .pay-detail-row {
  padding: 8px 0;
}

.sheet .pay-detail-row + .pay-detail-row {
  border-top: 1px dashed var(--w08);
}

#paySheet #payAmountRub {
  font-size: clamp(30px, 4.5vw, 46px) ;
  letter-spacing: -0.03em;
  font-weight: 850 ;
}

#paySheet #payAmountUsdt {
  font-size: 18px ;
}

#depositSheet #depositAmount,
#withdrawSheet #withdrawAmount,
#linkPaymentSheet #linkUrl,
#calcSheet #calcRub,
#calcSheet #calcUsdt {
  font-size: 20px ;
  font-weight: 700 ;
}

#photoPaymentSheet .btn-primary,
#linkPaymentSheet .btn-primary,
#calcSheet .btn-primary,
#depositSheet .btn-primary,
#withdrawSheet .btn-primary,
#paySheet .btn-primary {
  margin-top: 8px;
}

#cameraScanner {
  background:
    radial-gradient(900px 360px at 50% -120px, color-mix(in srgb, var(--bl5) 14%, transparent), transparent 60%),
    #000 ;
}

#cameraScanner .scanner-overlay {
  backdrop-filter: blur(1.5px);
}

#cameraScanner .scanner-frame {
  width: min(78vw, 360px) ;
  height: min(78vw, 360px) ;
  border: 2px solid color-mix(in srgb, var(--bl5) 72%, #fff 10%) ;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 60px color-mix(in srgb, var(--bl5) 26%, transparent);
}

#cameraScanner .scanner-line {
  opacity: 0.95;
  box-shadow: 0 0 20px color-mix(in srgb, var(--bl5) 60%, transparent);
}

#cameraScanner .scanner-hint {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.35);
  padding: 10px 14px;
  backdrop-filter: blur(6px);
}

#cameraScanner .scanner-close,
#cameraScanner .scanner-torch-btn {
  border-radius: 12px ;
  border: 1px solid rgba(255, 255, 255, 0.22) ;
  background: rgba(0, 0, 0, 0.4) ;
  backdrop-filter: blur(8px);
}

#cameraErrorPanel {
  border-radius: 18px ;
  border: 1px solid rgba(255, 255, 255, 0.2) ;
  background: rgba(12, 12, 16, 0.88) ;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}

#modalChat {
  align-items: center;
}

#modalChat .chat-modal {
  width: min(100%, 560px) ;
  max-height: min(82vh, 760px);
  margin: 0 auto;
  border-radius: 24px ;
  overflow: hidden;
}

#modalChat .modal-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--bg2) 92%, transparent);
  border-bottom: 1px solid var(--w08);
  padding: 14px 16px ;
}

#modalChat .modal-title {
  font-size: 18px ;
  letter-spacing: -0.01em;
}

#modalChat .chat-messages {
  padding: 12px ;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg2) 86%, transparent), color-mix(in srgb, var(--bg1) 94%, transparent));
}

#modalChat .msg {
  border-radius: 14px ;
  border: 1px solid var(--w08);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
}

#modalChat .msg.user {
  background: linear-gradient(140deg, var(--bl5), var(--bl7)) ;
  border-color: color-mix(in srgb, var(--bl5) 70%, transparent);
}

#modalChat .msg.support {
  background: color-mix(in srgb, var(--bg3) 92%, transparent) ;
}

#modalChat .chat-input-area {
  border-top: 1px solid var(--w08);
  padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg2) 92%, transparent);
}

#modalChat #chatInput {
  min-height: 44px;
  border-radius: 12px ;
}

#modalChat #sendMessageBtn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--bl5) 68%, transparent);
  background: linear-gradient(140deg, var(--bl5), var(--bl7));
  box-shadow: 0 10px 18px color-mix(in srgb, var(--bl5) 34%, transparent);
}

#infoModal .info-modal,
#lootboxModal .lootbox-modal {
  width: min(94vw, 560px);
  margin: auto;
  border-radius: 24px ;
  border: 1px solid var(--w08) ;
}

#infoModal .modal-header,
#lootboxModal .modal-header {
  border-bottom: 1px solid var(--w08);
  padding: 14px 16px ;
}

#infoModal .info-modal-body {
  padding: 12px 16px 16px ;
}

#lootboxModal .lootbox-frame {
  border-radius: 14px;
  border: 1px solid var(--w08);
  background: color-mix(in srgb, var(--bg1) 90%, transparent);
}

@media (min-width: 920px) {
  .sheet-overlay {
    align-items: center;
    padding: 20px;
  }

  .sheet {
    border-radius: 26px ;
  }

  #modalChat {
    align-items: center;
    padding: 20px;
  }

  #modalChat .chat-modal {
    border-radius: 24px ;
    max-height: 78vh;
  }
}

/* ===== Stage 4: Premium micro-interactions (non-breaking) ===== */

:root {
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes uiFloatIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes uiPulseRing {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--bl5) 34%, transparent);
  }
  100% {
    box-shadow: 0 0 0 16px transparent;
  }
}

@keyframes uiShimmer {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}

@keyframes uiSuccessPop {
  0% {
    transform: scale(0.88);
    opacity: 0;
  }
  70% {
    transform: scale(1.04);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes uiErrorShake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-4px);
  }
  40% {
    transform: translateX(4px);
  }
  60% {
    transform: translateX(-2px);
  }
  80% {
    transform: translateX(2px);
  }
}

@keyframes uiGlow {
  0%,
  100% {
    filter: drop-shadow(0 0 0 transparent);
  }
  50% {
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--bl5) 35%, transparent));
  }
}

.balance-card,
.qr-banner,
.quick-item,
.tx-row,
.profile-menu-item,
.sheet,
.modal-content {
  animation: uiFloatIn 0.35s var(--ease-premium);
}

@media (hover: hover) and (pointer: fine) {
  .quick-item,
  .profile-menu-item,
  .tx-row,
  .shop-card,
  .filter-chip,
  .stats-period-btn,
  .twin-btn,
  .btn-primary,
  .btn-ghost,
  .tab-item {
    transition: transform 0.22s var(--ease-premium), box-shadow 0.22s var(--ease-premium), border-color 0.22s ease, background 0.22s ease;
  }

  .quick-item:hover,
  .profile-menu-item:hover,
  .tx-row:hover,
  .shop-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--bl5) 40%, var(--w08));
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.24);
  }

  .twin-btn:hover,
  .btn-primary:hover,
  .btn-ghost:hover,
  .filter-chip:hover,
  .stats-period-btn:hover,
  .tab-item:hover {
    transform: translateY(-1px);
  }

  .tab-qr .tab-qr-inner:hover {
    animation: uiGlow 1.5s ease-in-out infinite;
  }
}

.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.twin-btn:focus-visible,
.form-input:focus-visible,
.filter-chip:focus-visible,
.stats-period-btn:focus-visible,
.tab-item:focus-visible,
#chatInput:focus-visible {
  outline: 0;
  border-color: color-mix(in srgb, var(--bl5) 60%, var(--w08)) ;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bl5) 26%, transparent) ;
}

.btn-primary:active,
.btn-ghost:active,
.twin-btn:active,
.filter-chip:active,
.stats-period-btn:active {
  transform: translateY(1px) scale(0.985);
}

.btn-primary[disabled],
.btn-red[disabled],
button[aria-busy="true"] {
  cursor: wait;
  opacity: 0.8;
  filter: saturate(0.88);
}

button[aria-busy="true"]::after,
.btn-primary[disabled]::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  animation: spin 0.7s linear infinite;
  vertical-align: -2px;
}

.empty-state,
.chat-notice {
  position: relative;
  overflow: hidden;
}

.empty-state::before,
.chat-notice::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, color-mix(in srgb, var(--w08) 70%, transparent) 50%, transparent 80%);
  animation: uiShimmer 1.6s ease-in-out infinite;
  pointer-events: none;
}

#processingOverlay .proc-ring {
  animation: spin 0.9s linear infinite, uiPulseRing 1.8s ease-out infinite;
}

#successOverlay .proc-ring,
#successOverlay .proc-title,
#successOverlay .proc-desc {
  animation: uiSuccessPop 0.35s var(--ease-premium);
}

#errorOverlay .proc-ring,
#errorOverlay .proc-title,
#errorOverlay .proc-desc {
  animation: uiErrorShake 0.34s ease-out;
}

#successOverlay .proc-ring-ok {
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--grn) 22%, transparent);
}

#errorOverlay .proc-ring-err {
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--red) 20%, transparent);
}

.toast {
  transform-origin: center bottom;
}

.toast.show,
.toast[style*="display: flex"],
.toast[style*="display:flex"] {
  animation: uiFloatIn 0.25s var(--ease-premium);
}

.loading-dots span {
  animation-timing-function: var(--ease-premium) ;
}

/* ===== Stage 5: Final performance polish ===== */

/* Reduce rendering cost for hidden/non-active content */
.screen {
  content-visibility: auto;
  contain-intrinsic-size: 900px;
}

/* Improve paint containment on expensive blocks */
.balance-card,
.qr-banner,
.card,
.tx-row,
.quick-item,
.profile-menu-item,
.sheet,
.modal-content,
.tab-bar-inner {
  contain: layout paint;
}

/* Backdrop-filter fallback for browsers/devices with weaker support */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .header,
  .tab-bar-inner,
  .sheet-overlay,
  .modal-overlay,
  #cameraScanner .scanner-hint,
  #cameraScanner .scanner-close,
  #cameraScanner .scanner-torch-btn {
    backdrop-filter: none ;
    -webkit-backdrop-filter: none ;
  }

  .header,
  .tab-bar-inner,
  .sheet,
  .modal-content {
    background: color-mix(in srgb, var(--bg2) 96%, transparent) ;
  }
}

/* Mobile + slow update channels: reduce visual heavy effects */
@media (max-width: 820px), (update: slow) {
  html,
  body {
    background: linear-gradient(180deg, var(--bg), var(--bg1));
  }

  .ambient {
    opacity: 0.2 ;
    filter: blur(16px) saturate(1.02);
  }

  .header,
  .tab-bar-inner {
    backdrop-filter: blur(14px) saturate(1.08);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  }

  .sheet,
  .modal-content,
  .balance-card,
  .card,
  .tx-row,
  .quick-item,
  .profile-menu-item,
  .shop-card {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) ;
  }

  .sheet .pay-icon,
  .tab-qr .tab-qr-inner,
  #cameraScanner .scanner-frame,
  #cameraScanner .scanner-line {
    box-shadow: none ;
  }

  .empty-state::before,
  .chat-notice::before {
    animation-duration: 2.4s;
    opacity: 0.7;
  }

  .balance-card,
  .qr-banner,
  .quick-item,
  .tx-row,
  .profile-menu-item,
  .sheet,
  .modal-content {
    animation-duration: 0.24s;
  }
}

/* Very small devices: simplify effects further */
@media (max-width: 420px) {
  .header,
  .tab-bar-inner,
  .sheet,
  .modal-content,
  .balance-card,
  .card {
    border-radius: 16px ;
  }

  .sheet,
  .modal-content,
  .tx-row,
  .quick-item,
  .profile-menu-item {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14) ;
  }

  .sheet .pay-icon {
    width: 58px;
    height: 58px;
    font-size: 26px ;
  }
}

/* Critical compatibility fix: preserve tab/screen navigation logic */
.screen:not(.active) {
  display: none ;
}

.screen.active {
  display: block ;
}

#screenHome.active,
#screenHistory.active,
#screenProfile.active,
#screenSettings.active {
  display: grid ;
}

/* ===== Emergency cross-device consistency patch (iPhone baseline) ===== */
html,
body {
  width: 100%;
  overflow-x: hidden;
}

.app {
  width: 100%;
  max-width: 420px ;
  margin: 0 auto ;
  padding-inline: 0 ;
  padding-bottom: 104px ;
}

.header,
.tab-bar-inner {
  max-width: 420px ;
  margin-left: auto ;
  margin-right: auto ;
}

.screen {
  display: none ;
  padding: 0 0 122px ;
}

.screen.active,
#screenHome.active,
#screenHistory.active,
#screenProfile.active,
#screenSettings.active {
  display: block ;
}

.section,
.filters-row,
.filter-params,
.filter-actions,
.profile-menu,
.profile-info,
.profile-stats,
.ref-link-card,
.ref-earnings,
.ref-rates,
.stats-grid {
  margin-left: 16px ;
  margin-right: 16px ;
}

.card,
.balance-card,
.qr-banner,
.profile-section,
.profile-menu,
.profile-info,
.ref-link-card,
.ref-earnings,
.ref-rates,
.filters-row,
.filter-params {
  border-radius: 18px ;
}

/* History section stabilization */
#screenHistory .filters-row {
  display: flex ;
  gap: 8px ;
  margin-top: 14px ;
  padding: 2px 2px 6px ;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

#screenHistory .filter-chip {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 8px 12px ;
  font-size: 12px ;
  line-height: 1;
}

#screenHistory .filter-params {
  display: grid ;
  grid-template-columns: 1fr 1fr ;
  gap: 10px ;
  padding: 12px ;
}

#screenHistory .filter-params > div {
  min-width: 0;
}

#screenHistory .filter-params input {
  width: 100%;
  min-height: 40px;
}

#screenHistory .filter-actions {
  display: flex ;
  gap: 10px ;
  margin-top: 0 ;
  margin-bottom: 12px ;
}

#screenHistory .filter-actions button {
  flex: 1;
  min-height: 42px;
}

#screenHistory .section {
  margin-top: 8px ;
}

/* Bottom tab unified look */
.tab-bar {
  padding-bottom: max(env(safe-area-inset-bottom), 8px) ;
}

.tab-bar-inner {
  height: 62px ;
  border-radius: 20px ;
  display: grid ;
  grid-template-columns: repeat(3, 1fr) ;
  gap: 4px;
  padding: 6px ;
}

.tab-item {
  min-height: 50px ;
  gap: 4px ;
}

.tab-item .tab-item-text {
  font-size: 10px ;
}

/* Keep iPhone-like proportions on desktop/tablet */
@media (min-width: 768px) {
  .app,
  .header,
  .tab-bar-inner {
    max-width: 420px ;
  }

  #screenHistory .filter-params {
    grid-template-columns: 1fr 1fr ;
  }
}

/* Android should match iOS metrics */
[data-platform="android"] .app,
[data-platform="android"] .header,
[data-platform="android"] .tab-bar-inner {
  max-width: 420px ;
}

[data-platform="android"] .screen {
  padding-bottom: 122px ;
}

[data-platform="android"] .filter-chip,
[data-platform="android"] .tab-item-text,
[data-platform="android"] .section-title,
[data-platform="android"] .quick-label,
[data-platform="android"] .pm-name {
  letter-spacing: 0 ;
}

/* Scroll recovery (Telegram WebView / Android / iOS) */
html,
body {
  height: auto ;
  min-height: 100%;
  overflow-y: auto ;
  overflow-x: hidden ;
  -webkit-overflow-scrolling: touch;
}

body {
  overscroll-behavior-y: auto ;
  touch-action: pan-y;
}

.app {
  position: relative ;
  overflow: visible ;
}

.screen {
  content-visibility: visible ;
  contain-intrinsic-size: auto ;
}

.screen.active {
  overflow: visible ;
}

/* ensure fixed bottom bar doesn't eat page scrolling gestures */
.tab-bar {
  pointer-events: none;
}

.tab-bar-inner,
.tab-bar .tab-item,
.tab-bar .tab-item-scan,
.tab-bar button {
  pointer-events: auto;
}

/* Spacing + sticky header recovery */
.header {
  position: sticky ;
  top: 0 ;
  z-index: 120 ;
}

/* global vertical rhythm to prevent blocks from sticking together */
.screen.active > * + * {
  margin-top: 12px;
}

/* keep native section rhythm */
.screen.active .section + .section {
  margin-top: 14px ;
}

/* Home screen explicit gaps */
#screenHome .balance-card {
  margin-bottom: 14px ;
}

#screenHome .qr-banner {
  margin-top: 0 ;
  margin-bottom: 12px ;
}

#screenHome .quick-grid {
  margin-top: 0 ;
}

/* History controls spacing */
#screenHistory .filters-row {
  margin-bottom: 8px ;
}

#screenHistory .filter-params {
  margin-top: 0 ;
  margin-bottom: 10px ;
}

#screenHistory .filter-actions {
  margin-top: 0 ;
  margin-bottom: 12px ;
}

/* Profile spacing */
#screenProfile .profile-section {
  margin-bottom: 10px ;
}

#screenProfile .profile-stats,
#screenProfile .profile-info,
#screenProfile .profile-menu {
  margin-top: 0 ;
}

/* Login screen must remain flex (fix for auth layout) */
#loginScreen {
  display: none ;
  padding: 20px ;
  align-items: center ;
  justify-content: center ;
  flex-direction: column ;
  gap: 20px ;
}

#loginScreen.active {
  display: flex ;
}

#loginScreen .pay-center {
  width: min(100%, 560px);
}

#loginScreen > .form-group,
#loginScreen > .btn-primary,
#loginScreen > .btn-ghost,
#loginScreen > #installContainer,
#loginScreen > #loginError {
  width: min(100%, 440px);
}

/* TRC20 topup polish (transitions.dev inspired: panel-reveal + texts-reveal) */
#depositSheet {
  --panel-open-dur: 400ms;
  --panel-close-dur: 350ms;
  --panel-translate-y: 24px;
  --panel-blur: 2px;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --stagger-dur: 600ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

#depositSheet .t-panel-slide {
  transform: translateY(var(--panel-translate-y));
  opacity: 0;
  filter: blur(var(--panel-blur));
  pointer-events: none;
  transition:
    transform var(--panel-close-dur) var(--panel-ease),
    opacity var(--panel-close-dur) var(--panel-ease),
    filter var(--panel-close-dur) var(--panel-ease);
  will-change: transform, opacity, filter;
}

#depositSheet .t-panel-slide[style*="display: block"],
#depositSheet .t-panel-slide[style*="display:flex"] {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transition:
    transform var(--panel-open-dur) var(--panel-ease),
    opacity var(--panel-open-dur) var(--panel-ease),
    filter var(--panel-open-dur) var(--panel-ease);
}

#depositSheet .t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:
    opacity var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}

#depositSheet .t-stagger-line--2 {
  transition-delay: var(--stagger-stagger);
}

#depositSheet.active .t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

#depositSheet #trc20ActiveRequest {
  border-color: color-mix(in srgb, var(--bl5) 40%, var(--w08)) ;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--bl5) 16%, transparent);
}

#depositSheet #trc20ExpectedAmount {
  font-size: 15px;
  font-weight: 800;
  color: color-mix(in srgb, var(--grn) 80%, #fff);
}

#depositSheet #trc20RequestsList .pay-detail-row {
  gap: 10px;
}

#depositSheet #trc20RequestsList .pay-detail-key {
  line-height: 1.4;
}

/* transitions.dev foundation across the full web app */
:root {
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --digit-dur: 500ms;
  --digit-distance: 8px;
  --digit-stagger: 70ms;
  --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
  --badge-slide-dur: 260ms;
  --badge-pop-dur: 500ms;
  --badge-pop-close-dur: 180ms;
  --badge-fade-dur: 400ms;
  --badge-fade-close-dur: 180ms;
  --badge-blur: 2px;
  --badge-offset-x: -8.2px;
  --badge-offset-y: 12.4px;
  --badge-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --badge-pop-ease: cubic-bezier(0.34, 1.36, 0.64, 1);
  --badge-close-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --text-swap-dur: 150ms;
  --text-swap-translate-y: 4px;
  --text-swap-blur: 2px;
  --text-swap-ease: ease-in-out;
  --dropdown-open-dur: 250ms;
  --dropdown-close-dur: 150ms;
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --panel-open-dur: 400ms;
  --panel-close-dur: 350ms;
  --panel-translate-y: 100px;
  --panel-blur: 2px;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-slide-dur: 200ms;
  --page-fade-dur: 200ms;
  --page-slide-distance: 8px;
  --page-blur: 3px;
  --page-stagger: 0ms;
  --page-exit-enabled: 1;
  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --icon-swap-dur: 200ms;
  --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: ease-in-out;
  --check-opacity-dur: 550ms;
  --check-rotate-dur: 550ms;
  --check-rotate-from: 80deg;
  --check-bob-dur: 450ms;
  --check-y-amount: 40px;
  --check-blur-dur: 500ms;
  --check-blur-from: 10px;
  --check-path-dur: 550ms;
  --check-path-delay: 80ms;
  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
  --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
  --avatar-lift: -4px;
  --avatar-dur: 320ms;
  --avatar-scale: 1.05;
  --avatar-falloff: 0.45;
  --avatar-ease-in: cubic-bezier(0.22, 1, 0.36, 1);
  --avatar-ease-out: cubic-bezier(0.34, 3.85, 0.64, 1);
  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --revert-hold: 3000ms;
  --revert-dur: 280ms;
  --clear-dur: 1000ms;
  --clear-out-dur: 400ms;
  --clear-in-dur: 400ms;
  --clear-out-fly: 12px;
  --clear-in-fly: 12px;
  --clear-out-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --clear-in-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --clear-blur: 2px;
  --glow-delay: 50ms;
  --glow-peak-at: 0.15;
  --glow-opacity: 0.42;
  --glow-spread: 1.5;
  --pulse-dur: 1000ms;
  --pulse-count: 1;
  --pulse-min: 0.5;
  --reveal-dur: 400ms;
  --reveal-blur: 2px;
  --reveal-ease: ease-in-out;
  --shimmer-dur: 2000ms;
  --shimmer-base: #7c7c7c;
  --shimmer-highlight: #0d0d0d;
  --shimmer-band: 400%;
  --shimmer-ease: linear;
  --tabs-dur: 200ms;
  --tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tabs-text-muted: rgba(15, 15, 15, 0.6);
  --tabs-text-active: #0f0f0f;
  --tabs-bar-bg: #eeeeee;
  --tabs-pill-bg: #ffffff;
  --tt-in-dur: 150ms;
  --tt-out-dur: 50ms;
  --tt-scale: 0.98;
  --tt-delay: 80ms;
  --tt-in-ease: ease-out;
  --tt-out-ease: ease-out;
  --tt-bg: #ffffff;
  --tt-fg: #2f2f2f;
  --stagger-dur: 600ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Modal open / close */
.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-open-dur) var(--modal-ease),
    opacity var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-close-dur) var(--modal-ease),
    opacity var(--modal-close-dur) var(--modal-ease);
}

/* Tabs sliding */
.tab-bar-inner.t-tabs {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 48px;
  background: color-mix(in srgb, var(--tabs-bar-bg) 20%, var(--bg2));
}
.tab-bar-inner .t-tab {
  position: relative;
  appearance: none;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--tabs-text-muted) 100%, var(--w70));
  border-radius: 48px;
  z-index: 1;
  transition: color var(--tabs-dur) var(--tabs-ease);
}
.tab-bar-inner .t-tab[aria-selected="true"],
.tab-bar-inner .t-tab.active {
  color: color-mix(in srgb, var(--tabs-text-active) 100%, var(--w92));
}
.t-tabs-pill {
  position: absolute;
  top: 3px;
  left: 0;
  height: calc(100% - 6px);
  width: 0;
  background: color-mix(in srgb, var(--tabs-pill-bg) 30%, var(--bg3));
  border-radius: 48px;
  transform: translateX(0);
  transition:
    transform var(--tabs-dur) var(--tabs-ease),
    width var(--tabs-dur) var(--tabs-ease);
  will-change: transform, width;
  z-index: 0;
  pointer-events: none;
}

/* Page side-by-side (adapted for existing .screen switching) */
.screen.is-entering {
  animation: t-page-enter var(--page-slide-dur) var(--page-slide-ease);
}
@keyframes t-page-enter {
  from {
    opacity: 0;
    transform: translateX(var(--page-slide-distance));
    filter: blur(var(--page-blur));
  }
  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

/* Skeleton loader and reveal */
.t-skel { position: relative; }
.t-skel-skeleton,
.t-skel-content {
  position: absolute;
  inset: 0;
}
.t-skel-skeleton {
  z-index: 1;
  opacity: 1;
  filter: blur(0);
  transition:
    opacity var(--reveal-dur) var(--reveal-ease),
    filter var(--reveal-dur) var(--reveal-ease);
}
.t-skel-content {
  z-index: 2;
  opacity: 0;
  filter: blur(var(--reveal-blur));
  transition:
    opacity var(--reveal-dur) var(--reveal-ease),
    filter var(--reveal-dur) var(--reveal-ease);
}
.t-skel.is-revealed .t-skel-skeleton {
  opacity: 0;
  filter: blur(var(--reveal-blur));
}
.t-skel.is-revealed .t-skel-content {
  opacity: 1;
  filter: blur(0);
}
.t-skel.is-resetting .t-skel-skeleton,
.t-skel.is-resetting .t-skel-content {
  transition: none ;
}
.t-skel-skeleton.is-pulsing > * {
  animation: t-skel-pulse var(--pulse-dur) ease-in-out var(--pulse-count);
}
@keyframes t-skel-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: var(--pulse-min); }
}

/* Shimmer text */
.t-shimmer {
  position: relative;
  display: inline-block;
  color: var(--shimmer-base);
}
.t-shimmer::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    transparent 40%,
    var(--shimmer-highlight) 50%,
    transparent 60%,
    transparent 100%
  );
  background-size: var(--shimmer-band) 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: t-shimmer var(--shimmer-dur) var(--shimmer-ease) infinite;
}
@keyframes t-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}

/* Error state shake */
.t-input {
  transition: border-color 150ms ease-out;
  will-change: transform;
}
.t-input.is-error {
  transition: border-color var(--revert-dur, 280ms) ease-out;
}
.t-input-wrap .form-hint.form-hint-red {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--revert-dur, 280ms) ease-out;
}
.t-input.is-shaking {
  animation: t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear;
}
@keyframes t-input-shake {
  0% { transform: translateX(0); animation-timing-function: var(--shake-ease); }
  28.57% { transform: translateX(var(--shake-distance)); animation-timing-function: var(--shake-ease); }
  57.14% { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--shake-ease); }
  78.57% { transform: translateX(var(--shake-overshoot)); animation-timing-function: var(--shake-ease); }
  100% { transform: translateX(0); }
}

/* Icon swap */
.t-icon-swap {
  position: relative;
  display: inline-grid;
}
.t-icon-swap .t-icon {
  grid-area: 1 / 1;
  transition:
    opacity var(--icon-swap-dur) var(--icon-swap-ease),
    filter var(--icon-swap-dur) var(--icon-swap-ease),
    transform var(--icon-swap-dur) var(--icon-swap-ease);
  will-change: opacity, filter, transform;
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="a"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="b"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] {
  opacity: 0;
  filter: blur(var(--icon-swap-blur));
  transform: scale(var(--icon-swap-start-scale));
}

/* Notification badge */
@keyframes t-badge-slide-in {
  from { transform: translate(var(--badge-offset-x), var(--badge-offset-y)); }
  to { transform: translate(0, 0); }
}
.t-badge {
  position: absolute;
  top: -6px;
  right: -10px;
  pointer-events: none;
  will-change: transform;
}
.t-badge[data-open="true"] {
  animation: t-badge-slide-in var(--badge-slide-dur) var(--badge-slide-ease);
}
.t-badge-dot {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(140deg, #ff4d71, #ff2d55);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  transform-origin: center;
  transform: scale(1);
  opacity: 1;
  filter: blur(0);
  box-shadow: 0 6px 14px rgba(255, 45, 85, 0.35);
  transition:
    transform var(--badge-pop-dur) var(--badge-pop-ease),
    opacity var(--badge-fade-dur) var(--badge-pop-ease),
    filter var(--badge-pop-dur) var(--badge-pop-ease);
}
.t-badge[data-open="false"] .t-badge-dot {
  transform: scale(0);
  opacity: 0;
  filter: blur(var(--badge-blur));
  transition:
    transform var(--badge-pop-close-dur) var(--badge-close-ease),
    opacity var(--badge-fade-close-dur) var(--badge-close-ease),
    filter var(--badge-pop-close-dur) var(--badge-close-ease);
}

/* Success check */
.t-success-check {
  display: inline-block;
  transform-origin: center;
  opacity: 0;
  color: #fff;
  will-change: transform, opacity, filter;
}
.t-success-check svg { display: block; overflow: visible; }
.t-success-check svg path {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
}
.t-success-check[data-state="in"] {
  animation:
    t-check-fade var(--check-opacity-dur) var(--check-ease-opacity) forwards,
    t-check-rotate var(--check-rotate-dur) var(--check-ease-rotate) forwards,
    t-check-blur var(--check-blur-dur) var(--check-ease-out) forwards,
    t-check-bob var(--check-bob-dur) var(--check-ease-bob) forwards;
}
.t-success-check[data-state="in"] svg path {
  animation: t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay, 0ms) forwards;
}
@keyframes t-check-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-check-rotate { from { transform: rotate(var(--check-rotate-from)); } to { transform: rotate(0deg); } }
@keyframes t-check-blur { from { filter: blur(var(--check-blur-from)); } to { filter: blur(0); } }
@keyframes t-check-bob { from { translate: 0 var(--check-y-amount); } to { translate: 0 0; } }
@keyframes t-check-draw { to { stroke-dashoffset: 0; } }

/* Chat send button integration */
#modalChat #sendMessageBtn[disabled] {
  opacity: 0.88;
  cursor: wait;
}
#modalChat #sendMessageBtn .t-icon-swap {
  width: 20px;
  height: 20px;
}
#modalChat #sendMessageBtn .t-icon,
#modalChat #sendMessageBtn .t-icon svg {
  width: 20px;
  height: 20px;
}

/* Universal reduce-motion safety */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none ;
    transition: none ;
    scroll-behavior: auto ;
  }

  #depositSheet .t-panel-slide,
  #depositSheet .t-stagger-line {
    transition: none ;
  }
}

/* =====================================================================
   Fluxa — themes (html[data-theme] overrides)
   base design tokens live in design.css :root ("Iris" default)
   ===================================================================== */

html[data-theme="iris"] {
  --iris: #6d5ef6;
  --cyan: #4e9bff;
  --glow1: rgba(109, 94, 246, 0.34);
  --glow2: rgba(78, 155, 255, 0.18);
  --bg-top: #0a0618;
  --bg-mid: #150a38;
  --bg-bottom: #190e47;
  --card-a: #150a38;
  --card-b: #0a0618;
  --card-c: #2a1a6b;
  --bc-tex: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 16px);
}

html[data-theme="green"] {
  --iris: #16c784;
  --cyan: #0abf7a;
  --glow1: rgba(22, 199, 132, 0.3);
  --glow2: rgba(10, 191, 122, 0.16);
  --bg-top: #03150d;
  --bg-mid: #062b1b;
  --bg-bottom: #0a2214;
  --card-a: #06251a;
  --card-b: #03150d;
  --card-c: #0f5c3a;
  --bc-tex: radial-gradient(circle, rgba(255, 255, 255, 0.09) 1px, transparent 1.6px) 0 0 / 17px 17px;
}

html[data-theme="cyber"] {
  --iris: #00e5ff;
  --cyan: #ff3df5;
  --glow1: rgba(0, 229, 255, 0.32);
  --glow2: rgba(255, 61, 245, 0.18);
  --bg-top: #04040f;
  --bg-mid: #0a0a28;
  --bg-bottom: #17042b;
  --card-a: #0c0c34;
  --card-b: #04040f;
  --card-c: #2b1a68;
  --bc-tex:
    linear-gradient(rgba(0, 229, 255, 0.06) 1px, transparent 1px) 0 0 / 26px 26px,
    linear-gradient(90deg, rgba(255, 61, 245, 0.05) 1px, transparent 1px) 0 0 / 26px 26px;
}

html[data-theme="pink"] {
  --iris: #ff3d81;
  --cyan: #ff8fb8;
  --glow1: rgba(255, 61, 129, 0.32);
  --glow2: rgba(255, 143, 184, 0.18);
  --bg-top: #1b0614;
  --bg-mid: #32091f;
  --bg-bottom: #200817;
  --card-a: #350d24;
  --card-b: #1b0614;
  --card-c: #571542;
  --bc-tex: radial-gradient(circle, rgba(255, 143, 184, 0.15) 1px, transparent 1.6px) 0 0 / 20px 20px;
}

html[data-theme="ocean"] {
  --iris: #22d3ee;
  --cyan: #3aa6ff;
  --glow1: rgba(34, 211, 238, 0.3);
  --glow2: rgba(58, 166, 255, 0.16);
  --bg-top: #031c22;
  --bg-mid: #04333b;
  --bg-bottom: #05242c;
  --card-a: #053442;
  --card-b: #031c22;
  --card-c: #0d5365;
  --bc-tex: repeating-linear-gradient(0deg, transparent 0 11px, rgba(58, 166, 255, 0.07) 11px 13px);
}

html[data-theme="coin"] {
  --iris: #f0b95c;
  --cyan: #ffd24a;
  --glow1: rgba(240, 185, 92, 0.28);
  --glow2: rgba(255, 210, 74, 0.14);
  --bg-top: #15100a;
  --bg-mid: #241a0e;
  --bg-bottom: #1a130a;
  --card-a: #2b2009;
  --card-b: #171106;
  --card-c: #4a3410;
  --bc-tex: repeating-linear-gradient(115deg, rgba(255, 210, 74, 0.06) 0 3px, transparent 3px 10px);
}

/* custom theme → consumes --custom-* set by ThemeProvider on <html> */
html[data-theme="custom"] {
  --iris: var(--custom-accent, #512bd4);
  --cyan: color-mix(in srgb, var(--custom-accent, #512bd4) 70%, #ffffff);
  --glow1: color-mix(in srgb, var(--custom-accent, #512bd4) 34%, transparent);
  --glow2: color-mix(in srgb, var(--custom-accent, #512bd4) 18%, transparent);
  --bg-top: var(--custom-bg, #0a0b1e);
  --bg-mid: var(--custom-bg-mid, #141440);
  --bg-bottom: color-mix(in srgb, var(--custom-bg-mid, #141440) 62%, var(--custom-accent, #512bd4) 38%);
  --card-a: color-mix(in srgb, var(--custom-bg, #0a0b1e) 58%, var(--custom-accent, #512bd4) 42%);
  --card-b: var(--custom-bg, #0a0b1e);
  --card-c: color-mix(in srgb, var(--custom-bg-mid, #141440) 70%, var(--custom-accent, #512bd4) 30%);
  --text: var(--custom-text, #ffffff);
  --text-secondary: var(--custom-text-secondary, #9aa0ae);
  --dim: var(--custom-text-secondary, #9aa0ae);
  --lavender: color-mix(in srgb, var(--custom-accent, #512bd4) 15%, #ffffff);
  --w70: color-mix(in srgb, var(--text, #ffffff) 72%, transparent);
  --w50: color-mix(in srgb, var(--text, #ffffff) 50%, transparent);
  --w30: color-mix(in srgb, var(--text, #ffffff) 30%, transparent);
  --w15: color-mix(in srgb, var(--text, #ffffff) 15%, transparent);
  --w08: color-mix(in srgb, var(--text, #ffffff) 8%, transparent);
  --w05: color-mix(in srgb, var(--text, #ffffff) 5%, transparent);
  --w03: color-mix(in srgb, var(--text, #ffffff) 3%, transparent);
}

/* smooth cross-theme transitions */
html,
body,
.app,
#balance-card,
.bn-bg-color,
.menu-item,
.profile-stat,
.stats-card,
.panel,
.card,
.row,
.menu-item,
.theme-row,
.sheet-overlay .sheet {
  transition: background 0.4s;
}

/* Telegram Mini App shell. Functional safe-area rules only. Visual system lives in fluxa-telegram.css. */
html[data-tg-app="1"] {
  --tg-shell: color-mix(in srgb, var(--bg-top) 94%, #080a18);
  --tg-surface: color-mix(in srgb, var(--card-a) 82%, transparent);
  --tg-line: rgba(255, 255, 255, 0.085);
  background: var(--tg-shell);
}

html[data-tg-app="1"],
html[data-tg-app="1"] body {
  min-height: var(--tg-viewport-stable-height, 100dvh);
  overflow-x: hidden;
  overscroll-behavior-y: none;
  background: var(--tg-shell);
}

html[data-tg-app="1"] body {
  width: 100%;
  -webkit-user-select: none;
  user-select: none;
}

html[data-tg-app="1"] input,
html[data-tg-app="1"] textarea {
  -webkit-user-select: text;
  user-select: text;
}

html[data-tg-app="1"] .ambient { display: none; }

html[data-tg-app="1"] .navbar {
  position: sticky;
  top: 0;
  z-index: 70;
  width: 100%;
  max-width: none;
  min-height: calc(54px + var(--app-safe-top) + var(--tg-ui-inset-top, 0px));
  margin: 0;
  padding: calc(9px + var(--app-safe-top) + var(--tg-ui-inset-top, 0px)) 15px 9px;
  border: 0;
  border-bottom: 1px solid var(--tg-line);
  border-radius: 0;
  background: color-mix(in srgb, var(--tg-shell) 86%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  backdrop-filter: blur(22px) saturate(1.25);
}

html[data-tg-app="1"] .brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--iris) 38%, transparent);
}

html[data-tg-app="1"] .brand-name {
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -.025em;
}

html[data-tg-app="1"] .nav-live {
  padding: 7px 10px;
  border-color: var(--tg-line);
  background: rgba(255,255,255,.045);
  letter-spacing: .04em;
}

html[data-tg-app="1"] .app {
  width: 100%;
  max-width: none;
  min-height: var(--tg-app-height, var(--tg-viewport-stable-height, 100dvh));
  margin: 0;
  padding: 6px 14px calc(104px + var(--app-safe-bottom));
}

/* Android Telegram WebView: keep compositing cheap and avoid chrome overlap. */
html[data-tg-app="1"][data-platform-os="android"] .ambient {
  display: block;
  opacity: .72;
}

html[data-tg-app="1"][data-platform-os="android"] .sheet-overlay,
html[data-tg-app="1"][data-platform-os="android"] .processing-overlay {
  -webkit-backdrop-filter: none ;
  backdrop-filter: none ;
}

html[data-tg-app="1"][data-platform-os="android"] .navbar,
html[data-tg-app="1"][data-platform-os="android"] .bottom-nav {
  background: color-mix(in srgb, var(--tg-shell) 90%, transparent) ;
  -webkit-backdrop-filter: blur(8px) saturate(1.08) ;
  backdrop-filter: blur(8px) saturate(1.08) ;
}

html[data-tg-app="1"][data-platform-os="android"] .navbar {
  min-height: calc(64px + var(--app-safe-top));
  padding-top: calc(19px + var(--app-safe-top));
}

html[data-tg-app="1"][data-platform-os="android"] .service-card {
  -webkit-backdrop-filter: blur(6px) ;
  backdrop-filter: blur(6px) ;
}

html[data-tg-app="1"][data-platform-os="android"] .ambient-shift {
  inset: -20px;
  will-change: auto;
}

html[data-tg-app="1"][data-platform-os="android"] .aurora {
  filter: none;
  opacity: .32;
  animation-duration: 42s;
}

html[data-tg-app="1"][data-platform-os="android"] .blob-1 {
  width: 320px;
  height: 320px;
  filter: blur(28px);
  opacity: .32;
  animation-duration: 36s;
}

html[data-tg-app="1"][data-platform-os="android"] .blob-2,
html[data-tg-app="1"][data-platform-os="android"] .blob-3,
html[data-tg-app="1"][data-platform-os="android"] .shoot,
html[data-tg-app="1"][data-platform-os="android"] .card-glow,
html[data-tg-app="1"][data-platform-os="android"] .nav-live-dot {
  display: none ;
}

html[data-tg-app="1"][data-platform-os="android"] .star {
  animation-duration: 7s ;
}

html[data-tg-app="1"][data-platform-os="android"] .star:nth-of-type(n + 21) {
  display: none;
}

html[data-tg-app="1"] .screen.active,
html[data-tg-app="1"] .screen.on {
  animation: tg-screen-in .2s ease-out;
}

@keyframes tg-screen-in {
  from { opacity: .3; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}

html[data-tg-app="1"] .greet {
  display: none;
}

html[data-tg-app="1"] .card-wrap {
  margin-top: 18px;
}

html[data-tg-app="1"] #balance-card {
  min-height: 196px;
  aspect-ratio: auto;
  padding: 20px;
  border-radius: 26px;
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 22px 52px color-mix(in srgb, var(--iris) 26%, transparent);
}

html[data-tg-app="1"] #balance-card .bc-amount {
  font-size: clamp(34px, 10vw, 46px);
}

html[data-tg-app="1"] .actions {
  gap: 9px;
  margin-top: 10px;
}

html[data-tg-app="1"] .actions .btn {
  min-height: 48px;
  border-radius: 16px;
  font-size: 13px;
}

html[data-tg-app="1"] .qr-banner {
  min-height: 70px;
  margin-top: 12px;
  padding: 13px 14px;
  border-radius: 20px;
  border-color: var(--tg-line);
  background: linear-gradient(110deg, color-mix(in srgb, var(--iris) 18%, var(--tg-surface)), var(--tg-surface));
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

html[data-tg-app="1"] .qr-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 15px;
}

html[data-tg-app="1"] .sec {
  margin-top: 22px;
}

html[data-tg-app="1"] .sec-head {
  margin-bottom: 10px;
  padding-inline: 2px;
}

html[data-tg-app="1"] .sec-title {
  font-size: 16px;
}

html[data-tg-app="1"] .menu {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

html[data-tg-app="1"] .menu-item {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  min-width: 0;
  min-height: 66px;
  padding: 10px 13px;
  border-color: var(--tg-line);
  border-radius: 18px;
  background: var(--tg-surface);
  box-shadow: inset 0 1px rgba(255,255,255,.055);
}

html[data-tg-app="1"] .menu-item::after {
  content: "›";
  grid-column: 3;
  grid-row: 1 / 3;
  justify-self: end;
  color: var(--dim);
  font-size: 25px;
  font-weight: 300;
  line-height: 1;
}

html[data-tg-app="1"] .menu-item:hover {
  border-color: var(--tg-line);
  transform: none;
}

html[data-tg-app="1"] .menu-item:active {
  opacity: .72;
  transform: scale(.97);
}

html[data-tg-app="1"] .menu-ic {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 42px;
  height: 42px;
  margin: 0;
  border-radius: 14px;
}

html[data-tg-app="1"] .menu-name {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  overflow: hidden;
  font-size: 14px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-tg-app="1"] .menu-desc {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin-top: 1px;
  overflow: hidden;
  color: var(--dim);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-tg-app="1"] .bottom-nav {
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: none;
  min-height: calc(72px + var(--app-safe-bottom) + var(--tg-ui-inset-bottom, 0px));
  padding: 8px 10px calc(7px + var(--app-safe-bottom) + var(--tg-ui-inset-bottom, 0px));
  transform: none;
  border: 0;
  border-top: 1px solid var(--tg-line);
  border-radius: 22px 22px 0 0;
  background: color-mix(in srgb, var(--tg-shell) 90%, transparent);
  box-shadow: 0 -16px 42px rgba(0,0,0,.22);
  -webkit-backdrop-filter: blur(24px) saturate(1.25);
  backdrop-filter: blur(24px) saturate(1.25);
}

html[data-tg-app="1"] .bn-item {
  gap: 3px;
  padding: 5px 2px;
  font-size: 9px;
}

html[data-tg-app="1"] .bn-qr {
  width: 52px;
  height: 52px;
  transform: translateY(-13px);
  border-color: var(--tg-shell);
}

html[data-tg-app="1"] .sheet-overlay {
  padding-top: var(--app-safe-top);
  background: rgba(0,0,0,.48);
}

html[data-tg-app="1"] .sheet {
  width: 100%;
  max-width: 480px;
  max-height: calc(var(--tg-viewport-stable-height, 100dvh) - var(--app-safe-top) - 8px);
  padding: 8px 17px calc(20px + var(--app-safe-bottom));
  border-inline: 0;
  border-bottom: 0;
  border-radius: 27px 27px 0 0;
}

html[data-tg-app="1"] #loginScreen,
html[data-tg-app="1"] .tg-launch {
  min-height: var(--tg-app-height, var(--tg-viewport-stable-height, 100dvh));
  padding-top: calc(24px + var(--app-safe-top) + var(--tg-ui-inset-top, 0px));
  padding-bottom: calc(24px + var(--app-safe-bottom) + var(--tg-ui-inset-bottom, 0px));
}

html[data-tg-app="1"] .transfer-screen {
  padding-top: 10px;
}

@media (max-width: 350px) {
  html[data-tg-app="1"] .brand-name { font-size: 13px; }
}

.service-page { padding-top: 14px; }
.service-hero { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding: 17px; border: 1px solid var(--tg-line, var(--hairline)); border-radius: 24px; background: linear-gradient(135deg, color-mix(in srgb, var(--iris) 18%, transparent), rgba(255,255,255,.035)); }
.service-hero-icon { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 17px; color: #fff; background: linear-gradient(145deg, #8b8cff, #5458ec); font: 800 23px/1 var(--font-ui); box-shadow: 0 14px 30px rgba(84,88,236,.28); }
.service-hero small { color: var(--iris); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.service-hero h1 { margin: 3px 0; font-size: 23px; line-height: 1.05; letter-spacing: -.035em; }
.service-hero p { margin: 0; color: var(--dim); font-size: 12px; }
.service-card, .service-list-section { margin-bottom: 14px; padding: 16px; border: 1px solid var(--tg-line, var(--hairline)); border-radius: 22px; background: rgba(255,255,255,.045); backdrop-filter: blur(16px); }
.service-list-section h2 { margin: 0 0 11px; font-size: 16px; }
.service-balance { margin-bottom: 13px; color: var(--dim); font-size: 12px; }
.service-balance b { float: right; color: var(--white); }
.check-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) 100px; gap: 9px; margin-bottom: 12px; }
.check-form-grid label > span { display: block; margin-bottom: 6px; color: var(--dim); font-size: 11px; }
.service-error { margin-top: 11px; padding: 10px 12px; border-radius: 12px; color: #ff8b9a; background: rgba(255,77,103,.1); font-size: 12px; }
.service-empty { padding: 20px 5px; color: var(--dim); text-align: center; }
.service-list-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 11px; align-items: center; min-height: 60px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.service-list-row:last-child { border-bottom: 0; }
.service-list-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: var(--iris); background: var(--lavender); font-weight: 800; }
.service-list-row > div:nth-child(2) { display: flex; min-width: 0; flex-direction: column; }
.service-list-row small { margin-top: 3px; overflow: hidden; color: var(--dim); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.service-list-row > strong { color: var(--iris); font-size: 12px; }
.service-row-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.service-row-actions button, .esim-package > button { padding: 7px 9px; border: 0; border-radius: 10px; color: #fff; background: rgba(139,140,255,.18); font-size: 10px; }
.service-row-actions button.danger { color: #ff8b9a; background: rgba(255,77,103,.1); }
@media (max-width: 360px) { .check-form-grid { grid-template-columns: 1fr; } .service-row-actions { grid-column: 2 / 4; flex-direction: row; justify-content: flex-end; } }

/* Final Fluxa composition layer. Loaded after every legacy stylesheet. */
:root{--fluxa-page-width:760px;--fluxa-page-gutter:clamp(16px,4vw,28px)}
html,body{min-width:320px;background:#03111f}
body{background-image:linear-gradient(rgba(24,221,224,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(24,221,224,.025) 1px,transparent 1px),radial-gradient(circle at 15% 0%,rgba(24,221,224,.1),transparent 32%),linear-gradient(145deg,#03111f,#061827);background-size:44px 44px,44px 44px,auto,auto}
.ambient{opacity:.12;pointer-events:none}
.navbar{width:min(calc(100% - 32px),var(--fluxa-page-width));margin:16px auto 0}
.app{width:min(100%,var(--fluxa-page-width));max-width:var(--fluxa-page-width);padding:0 var(--fluxa-page-gutter) 132px}
.screen.active{display:block;min-height:0;padding:24px 0;animation:none}
.screen>.section,.screen>.sec,.screen>.card,.screen>.service-page,.screen>.transfer-card,.screen>.transfer-hero{margin-left:0;margin-right:0}
.card,.balance-card,.transfer-card,.profile-info,.profile-menu,.stats-card,.shop-card,.ref-link-card,.ref-earnings,.ref-rates,.filters-row,.filter-params,.qr-banner,.menu-item,.service-card,.service-list-section,.profile-section{border:1px solid rgba(137,224,226,.16);border-radius:22px;background:rgba(7,28,44,.86);box-shadow:0 18px 45px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.035)}
#screenHome{display:grid;gap:18px}
#screenHome .card-wrap{margin:0}
#screenHome #balance-card,#screenHome .balance-card{min-height:238px;padding:24px;border-radius:28px;background:linear-gradient(140deg,#0b3042,#071b2b 65%,#061421);box-shadow:0 22px 60px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.06)}
#screenHome .actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
#screenHome .actions .btn{min-height:50px;border-radius:15px}
#screenHome .qr-banner{min-height:84px;padding:16px}
#screenHome .menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#screenHome .menu-item{min-height:108px;padding:16px;text-align:left}
#screenHome .menu-ic{margin-bottom:14px}
.sec-head,.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sec-title,.section-title{font-size:17px;font-weight:800;color:#f2f7fa}
.sec-more,.section-action{color:#55f4b0;font-size:12px}
.bottom-nav{width:min(calc(100% - 32px),520px);left:50%;transform:translateX(-50%);bottom:14px;padding:6px;border-radius:22px;background:rgba(5,22,36,.94);border:1px solid rgba(137,224,226,.18);box-shadow:0 16px 45px rgba(0,0,0,.35)}
.bn-item{min-height:52px;border-radius:16px}.bn-item.on{color:#55f4b0;background:rgba(85,244,176,.08)}.bn-center{margin-top:-22px}.bn-qr{width:58px;height:58px;border:5px solid #03111f;background:linear-gradient(135deg,#9bffb7,#15dde0);color:#03202a;box-shadow:0 8px 24px rgba(24,221,224,.32)}
.transfer-hero{padding:22px;margin:0 0 14px}.transfer-hero h1{font-size:29px}.transfer-card{padding:22px}.form-input,.form-select,textarea{min-height:48px;border-radius:14px;background:#041522}.btn-primary,.btn-blue{min-height:50px;border-radius:15px}
@media(max-width:520px){.navbar{width:calc(100% - 24px)}.app{padding-inline:14px}#screenHome .menu-item{min-height:98px}}
.sec .panel{overflow:hidden;padding:0}.sec .tx-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:9px;align-items:center;min-height:58px;padding:9px 12px;border-bottom:1px solid rgba(137,224,226,.16)}.sec .tx-dot{width:34px;height:34px;display:grid;place-items:center;border-radius:11px}.sec .tx-info{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:7px;align-items:center}.sec .tx-name{min-width:0;margin:0;overflow:hidden;font-size:12px;font-weight:750;text-overflow:ellipsis;white-space:nowrap}.sec .tx-time{min-width:0;margin:0;overflow:hidden;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.sec .tx-info .tx-time:not(:first-of-type){display:none}.sec .tx-end{min-width:82px;text-align:right}.sec .tx-val{overflow:hidden;font-size:12px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.sec .tx-sub{margin-top:2px;color:#94a9b8;font-size:9px;white-space:nowrap}.sec .filter-chip{min-height:22px;margin-top:3px;padding:3px 6px;font-size:9px}
/* Service menu uses the same readable ledger-row language as recent activity. */
.sec .menu{display:flex;flex-direction:column;gap:6px;margin:0}
.sec .menu-item{display:grid;grid-template-columns:36px minmax(0,1fr) 14px;grid-template-rows:1fr 1fr;column-gap:10px;width:100%;min-height:60px;height:60px;padding:8px 11px;text-align:left;box-sizing:border-box}
.sec .menu-item::after{content:"›";grid-column:3;grid-row:1/3;display:grid;place-items:center;color:#94a9b8;font-size:21px;font-weight:300;line-height:1}
.sec .menu-ic{grid-column:1;grid-row:1/3;width:36px;height:36px;margin:0;display:grid;place-items:center;border-radius:11px}
.sec .menu-name{grid-column:2;grid-row:1;align-self:end;min-width:0;margin:0;overflow:hidden;font-size:13px;line-height:1.1;text-overflow:ellipsis;white-space:nowrap}
.sec .menu-desc{grid-column:2;grid-row:2;align-self:start;min-width:0;margin:2px 0 0;overflow:hidden;color:#94a9b8;font-size:10px;line-height:1.1;text-overflow:ellipsis;white-space:nowrap}
/* One full-width service row. This selector deliberately overrides every
   legacy two-column menu rule. */
#screenHome .sec .menu,
.sec .menu { display:flex; flex-direction:column; width:100%; grid-template-columns:none; }
#screenHome .sec .menu > .menu-item,
.sec .menu > .menu-item { flex:0 0 60px; width:100%; max-width:none; min-width:0; box-sizing:border-box; }

/* Clean Telegram-first Fluxa UI. No decorative legacy layers are used here. */
html[data-tg-app="1"] {
  --tg-bg: #03111f;
  --tg-surface: #091d2d;
  --tg-surface-2: #0b2434;
  --tg-border: rgba(137,224,226,.16);
  --tg-text: #f2f7fa;
  --tg-muted: #94a9b8;
  --tg-mint: #55f4b0;
  --tg-cyan: #18dde0;
  background: var(--tg-bg) ;
}
html[data-tg-app="1"], html[data-tg-app="1"] body { background: #03111f ; color: var(--tg-text); }
html[data-tg-app="1"] body { font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
html[data-tg-app="1"] .navbar { position: sticky; top: 0; z-index: 100; min-height: calc(58px + var(--app-safe-top)); padding: calc(10px + var(--app-safe-top)) 16px 10px; border: 0; border-bottom: 1px solid var(--tg-border); border-radius: 0; background: rgba(3,17,31,.9); backdrop-filter: blur(16px); }
/* Telegram owns the top chrome. Keep the app header below it instead of
   letting a second sticky bar sit under the close/back controls. */
html[data-tg-app="1"] .navbar {
  position: relative;
  top: auto;
  margin-top: calc(46px + var(--app-safe-top)) ;
  box-sizing: border-box;
  min-height: 0 ;
  height: auto ;
  padding: 7px 12px ;
  border: 1px solid var(--tg-border);
  border-radius: 18px;
}
html[data-tg-app="1"] .navbar > * { min-height: 0 ; }
html[data-tg-app="1"] .navbar .brand,
html[data-tg-app="1"] .navbar .nav-live { height: 28px ; min-height: 28px ; }
html[data-tg-app="1"] .brand-mark { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg,#a2ffd0,#18dde0); box-shadow: 0 0 20px rgba(24,221,224,.22); }
html[data-tg-app="1"] .brand-mark::before { inset: 7px; background: #03202a; border-radius: 3px; }
html[data-tg-app="1"] .brand-name { color: var(--tg-text); font-size: 17px; font-weight: 800; letter-spacing: -.04em; }
html[data-tg-app="1"] .nav-live { min-height: 28px; box-sizing: border-box; padding: 5px 8px; color: var(--tg-mint); border: 1px solid var(--tg-border); background: rgba(85,244,176,.06); font-size: 9px; }
html[data-tg-app="1"] .app { width: 100%; max-width: 760px; min-height: var(--tg-viewport-stable-height,100dvh); margin: 0 auto; padding: 0 16px calc(110px + var(--app-safe-bottom)); }
html[data-tg-app="1"] .screen.active { display: block; padding: 20px 0 22px ; animation: none ; }
html[data-tg-app="1"] .screen > * { margin-left: 0 ; margin-right: 0 ; }
html[data-tg-app="1"] .card, html[data-tg-app="1"] .balance-card, html[data-tg-app="1"] .transfer-card, html[data-tg-app="1"] .profile-info, html[data-tg-app="1"] .profile-menu, html[data-tg-app="1"] .stats-card, html[data-tg-app="1"] .shop-card, html[data-tg-app="1"] .qr-banner, html[data-tg-app="1"] .menu-item, html[data-tg-app="1"] .filters-row, html[data-tg-app="1"] .filter-params, html[data-tg-app="1"] .service-list-section { border: 1px solid var(--tg-border) ; border-radius: 20px ; background: var(--tg-surface) ; box-shadow: 0 12px 30px rgba(0,0,0,.18) ; }
html[data-tg-app="1"] #screenHome { display: grid ; gap: 14px; }
html[data-tg-app="1"] #screenHome #balance-card { min-height: 208px; padding: 21px; border-radius: 24px; background: linear-gradient(140deg,#0b3042,#071b2b 64%,#061421) ; }
html[data-tg-app="1"] #screenHome .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
html[data-tg-app="1"] #screenHome .actions .btn { min-height: 48px; border-radius: 14px; }
html[data-tg-app="1"] #screenHome .qr-banner { min-height: 76px; padding: 14px; }
html[data-tg-app="1"] #screenHome .menu { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
html[data-tg-app="1"] #screenHome .menu-item { display: block; min-height: 96px; padding: 14px; text-align: left; }
html[data-tg-app="1"] #screenHome .menu-ic { margin-bottom: 11px; }
html[data-tg-app="1"] .sec {
  display: block ;
  visibility: visible ;
  opacity: 1 ;
  position: relative ;
  z-index: 1 ;
  margin: 0 ;
  padding: 0 ;
}
html[data-tg-app="1"] .sec-head {
  display: flex ;
  min-height: 32px;
  margin: 2px 2px 8px ;
  padding: 0 ;
}
html[data-tg-app="1"] #screenHome > .sec,
html[data-tg-app="1"] #screenHome > section.sec { display: block ; visibility: visible ; }
html[data-tg-app="1"] .sec-title {
  font-size: 15px ;
  letter-spacing: -.01em;
}
html[data-tg-app="1"] .sec-more {
  padding: 6px 9px;
  border: 1px solid rgba(85,244,176,.2);
  border-radius: 9px;
  background: rgba(85,244,176,.06);
  font-size: 11px;
}
html[data-tg-app="1"] .menu {
  display: flex ;
  flex-direction: column;
  gap: 6px ;
  margin: 0 ;
}
html[data-tg-app="1"] .menu-item {
  display: grid ;
  grid-template-columns: 38px minmax(0, 1fr) 16px;
  grid-template-rows: 1fr 1fr;
  column-gap: 11px;
  align-items: center;
  min-height: 62px ;
  height: 62px ;
  padding: 9px 12px ;
  text-align: left;
  box-shadow: none ;
}
html[data-tg-app="1"] .menu-item:active { transform: scale(.98); }
html[data-tg-app="1"] .menu-ic {
  display: grid;
  grid-column: 1;
  grid-row: 1 / 3;
  width: 38px;
  height: 38px;
  place-items: center;
  margin: 0 ;
  border-radius: 11px;
  color: var(--tg-cyan);
  background: rgba(24,221,224,.1);
}
html[data-tg-app="1"] .menu-item::after { content: "›"; grid-column: 3; grid-row: 1 / 3; color: var(--tg-muted); font-size: 22px; font-weight: 300; line-height: 1; }
html[data-tg-app="1"] .menu-name { grid-column: 2; grid-row: 1; align-self: end; margin: 0; overflow: hidden; font-size: 13px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
html[data-tg-app="1"] .menu-desc { grid-column: 2; grid-row: 2; align-self: start; margin: 2px 0 0; overflow: hidden; color: var(--tg-muted); font-size: 10px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
html[data-tg-app="1"] .sec .panel { overflow: hidden; padding: 0 ; }
html[data-tg-app="1"] .sec .tx-row { display: grid ; grid-template-columns: 34px minmax(0,1fr) auto; gap: 9px ; align-items: center; min-height: 58px; padding: 9px 12px ; border-bottom: 1px solid var(--tg-border); }
html[data-tg-app="1"] .sec .tx-dot { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; }
html[data-tg-app="1"] .sec .tx-info { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 7px; align-items: center; }
html[data-tg-app="1"] .sec .tx-info { display:flex; align-items:center; gap:7px; white-space:nowrap; overflow-x:auto; scrollbar-width:none; }
html[data-tg-app="1"] .sec .tx-info::-webkit-scrollbar { display:none; }
html[data-tg-app="1"] .sec .tx-name { flex:0 0 auto; min-width:max-content; margin:0; overflow:visible; color:var(--tg-text); font-size:12px; font-weight:750; white-space:nowrap; }
html[data-tg-app="1"] .sec .tx-time { flex:0 0 auto; min-width:max-content; margin:0; overflow:visible; color:var(--tg-muted); font-size:10px; white-space:nowrap; }
html[data-tg-app="1"] .sec .tx-time::before { content:"·"; margin-right:7px; color:var(--tg-cyan); }
html[data-tg-app="1"] .sec .tx-info .tx-time:not(:first-of-type) { display:none; }
html[data-tg-app="1"] .sec .tx-end { min-width: 82px; text-align: right; }
html[data-tg-app="1"] .sec .tx-val { overflow: hidden; font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
html[data-tg-app="1"] .sec .tx-sub { margin-top: 2px; color: var(--tg-muted); font-size: 9px; white-space: nowrap; }
html[data-tg-app="1"] .sec .filter-chip { min-height: 22px; margin-top: 3px ; padding: 3px 6px; font-size: 9px; }
/* Services section: rows, not tiles. Text stays on one line and never
   changes the height of the surrounding Telegram viewport. */
html[data-tg-app="1"] .sec .menu {
  display: flex ;
  flex-direction: column ;
  gap: 6px ;
  margin: 0 ;
}
html[data-tg-app="1"] .sec .menu-item {
  display: grid ;
  grid-template-columns: 36px minmax(0,1fr) 14px ;
  grid-template-rows: 1fr 1fr ;
  column-gap: 10px ;
  width: 100% ;
  min-height: 60px ;
  height: 60px ;
  padding: 8px 11px ;
  text-align: left ;
}
html[data-tg-app="1"] .sec .menu-item::after {
  content: "›" ;
  grid-column: 3 ;
  grid-row: 1 / 3 ;
  display: grid ;
  place-items: center ;
  color: var(--tg-muted) ;
  font-size: 21px ;
}
html[data-tg-app="1"] .sec .menu-ic {
  grid-column: 1 ;
  grid-row: 1 / 3 ;
  width: 36px ;
  height: 36px ;
  margin: 0 ;
}
html[data-tg-app="1"] .sec .menu-name {
  grid-column: 2 ;
  grid-row: 1 ;
  align-self: end ;
  min-width: 0 ;
  margin: 0 ;
  overflow: hidden ;
  font-size: 13px ;
  line-height: 1.1 ;
  text-overflow: ellipsis ;
  white-space: nowrap ;
}
html[data-tg-app="1"] .sec .menu-desc {
  grid-column: 2 ;
  grid-row: 2 ;
  align-self: start ;
  min-width: 0 ;
  margin: 2px 0 0 ;
  overflow: hidden ;
  color: var(--tg-muted) ;
  font-size: 10px ;
  line-height: 1.1 ;
  text-overflow: ellipsis ;
  white-space: nowrap ;
}
html[data-tg-app="1"] #screenHome .sec .menu,
html[data-tg-app="1"] .sec .menu { display:flex; flex-direction:column; width:100%; grid-template-columns:none; }
html[data-tg-app="1"] #screenHome .sec .menu > .menu-item,
html[data-tg-app="1"] .sec .menu > .menu-item { flex:0 0 60px; width:100%; max-width:none; min-width:0; }
html[data-tg-app="1"] .panel { border-color: var(--tg-border) ; border-radius: 18px ; background: var(--tg-surface) ; }
html[data-tg-app="1"] .sec-head, html[data-tg-app="1"] .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
html[data-tg-app="1"] .sec-title, html[data-tg-app="1"] .section-title { color: var(--tg-text); font-size: 16px; font-weight: 800; }
html[data-tg-app="1"] .sec-more, html[data-tg-app="1"] .section-action { color: var(--tg-mint); }
html[data-tg-app="1"] .bottom-nav { position: fixed; left: 50%; bottom: var(--app-safe-bottom); z-index: 120; width: min(calc(100% - 24px), 520px); transform: translateX(-50%); padding: 6px; border: 1px solid var(--tg-border); border-radius: 22px; background: rgba(5,22,36,.95); box-shadow: 0 16px 40px rgba(0,0,0,.35); }
html[data-tg-app="1"] .bn-item { min-height: 50px; border-radius: 15px; color: var(--tg-muted); }
html[data-tg-app="1"] .bn-item.on { color: var(--tg-mint); background: rgba(85,244,176,.08); }
html[data-tg-app="1"] .bn-center { margin-top: -21px; }
html[data-tg-app="1"] .bn-qr { width: 56px; height: 56px; border: 5px solid #03111f; background: linear-gradient(135deg,#9bffb7,#15dde0); color: #03202a; box-shadow: 0 7px 22px rgba(24,221,224,.3); }
html[data-tg-app="1"] .form-input, html[data-tg-app="1"] .form-select, html[data-tg-app="1"] textarea { min-height: 46px; border: 1px solid var(--tg-border) ; border-radius: 13px; background: #041522 ; }
html[data-tg-app="1"] .btn-primary, html[data-tg-app="1"] .btn-blue { min-height: 48px; border-radius: 14px; background: linear-gradient(110deg,#9bffb7,#36f2cb 48%,#15dde0) ; color: #03202a; }
html[data-tg-app="1"] .actions { display:grid ; grid-template-columns:repeat(2,minmax(0,1fr)) ; gap:8px ; align-items:stretch ; }
html[data-tg-app="1"] .actions > .btn,
html[data-tg-app="1"] .actions > button { width:100% ; min-width:0 ; min-height:50px ; height:50px ; margin:0 ; padding:0 10px ; border-radius:14px ; font-size:13px ; line-height:1 ; white-space:nowrap ; }
html[data-tg-app="1"] .actions > .btn svg { width:16px; height:16px; flex:none; }
html[data-tg-app="1"] .twin-btns { display:grid ; grid-template-columns:repeat(2,minmax(0,1fr)) ; gap:8px ; }
html[data-tg-app="1"] .twin-btns > *, html[data-tg-app="1"] .twin-btn { width:100% ; min-width:0 ; min-height:48px ; height:48px ; margin:0 ; padding:0 10px ; border-radius:14px ; }
html[data-tg-app="1"] .btn, html[data-tg-app="1"] .btn-primary, html[data-tg-app="1"] .btn-ghost, html[data-tg-app="1"] .btn-blue, html[data-tg-app="1"] .btn-green, html[data-tg-app="1"] .btn-red { box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; }
html[data-tg-app="1"] .menu-item, html[data-tg-app="1"] .quick-item { box-sizing:border-box; min-width:0; }
html[data-tg-app="1"] button, html[data-tg-app="1"] a { -webkit-tap-highlight-color:transparent; }
html[data-tg-app="1"] .sheet-overlay { background: rgba(0,0,0,.58); }
html[data-tg-app="1"] .sheet { border: 1px solid var(--tg-border); border-bottom: 0; border-radius: 24px 24px 0 0; background: #071a2a; }
@media (max-width: 390px) { html[data-tg-app="1"] .menu-item { min-height: 58px ; height: 58px ; } }

}