/* ================================================================
   TRADEPARTNER — WOW REDESIGN
   Dark Financial Premium · Glassmorphism · Neon Glow · Micro-FX
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── ЦВЕТОВЫЕ ТОКЕНЫ ─────────────────────────────────────────── */
:root {
    --bg:           #080c14;
    --bg2:          #0d1120;
    --surface:      rgba(255,255,255,.07);
    --surface2:     rgba(255,255,255,.11);
    --glass:        rgba(15,20,35,.72);
    --glass2:       rgba(20,28,50,.85);
    --text:         #f0f4ff;
    --text2:        rgba(240,244,255,.7);
    --muted:        rgba(240,244,255,.38);
    --border:       rgba(255,255,255,.08);
    --border2:      rgba(255,255,255,.14);

    /* Акценты */
    --accent:       #6c8fff;
    --accent2:      #4f6ef7;
    --accent-glow:  rgba(108,143,255,.35);
    --accent-soft:  rgba(108,143,255,.12);
    --accent-press: #3d5ce6;

    /* Торговые */
    --up:           #00e5a0;
    --up-glow:      rgba(0,229,160,.3);
    --up-soft:      rgba(0,229,160,.12);
    --down:         #ff4b6e;
    --down-glow:    rgba(255,75,110,.3);
    --down-soft:    rgba(255,75,110,.12);

    /* Золото — для VIP / топ */
    --gold:         #f5c842;
    --gold-soft:    rgba(245,200,66,.12);

    color-scheme: dark;

    --radius:    18px;
    --radius-sm: 12px;
    --radius-xs: 8px;
    --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out:  cubic-bezier(.16, 1, .3, 1);
    --ease-pop:  cubic-bezier(.34, 1.56, .64, 1);

    --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* Светлая тема — сохраняем читаемость, меняем только токены */
:root[data-theme="light"] {
    --bg:          #f0f3fb;
    --bg2:         #e6ebf8;
    --surface:     rgba(255,255,255,.75);
    --surface2:    rgba(255,255,255,.9);
    --glass:       rgba(240,243,251,.82);
    --glass2:      rgba(230,235,248,.92);
    --text:        #0d1220;
    --text2:       rgba(13,18,32,.65);
    --muted:       rgba(13,18,32,.4);
    --border:      rgba(13,18,32,.07);
    --border2:     rgba(13,18,32,.12);
    --accent:      #3d5ce6;
    --accent2:     #2a47cc;
    --accent-glow: rgba(61,92,230,.2);
    --accent-soft: rgba(61,92,230,.1);
    --accent-press:#1f34b8;
    --up:          #00b87a;
    --up-glow:     rgba(0,184,122,.2);
    --up-soft:     rgba(0,184,122,.1);
    --down:        #e83558;
    --down-glow:   rgba(232,53,88,.2);
    --down-soft:   rgba(232,53,88,.1);
    --gold:        #d4a017;
    --gold-soft:   rgba(212,160,23,.1);
    color-scheme: light;
}
/* Light theme solid sheet/card backgrounds */
:root[data-theme="light"] .sheet { background: #eef1fa; }
:root[data-theme="light"] .status-card { background: #eef1fa; }
:root[data-theme="light"] #asset-sheet .sheet-search { background: #eef1fa; }
:root[data-theme="light"] .search-input { background: rgba(255,255,255,.8); border-color: rgba(13,18,32,.12); color: #0d1220; }
:root[data-theme="light"] .cat-chip { background: rgba(255,255,255,.7); border-color: rgba(13,18,32,.12); color: rgba(13,18,32,.55); }
:root[data-theme="light"] .chip { background: rgba(255,255,255,.7); border-color: rgba(13,18,32,.12); color: rgba(13,18,32,.7); }
:root[data-theme="light"] .asset-row { background: rgba(255,255,255,.55); border-color: rgba(13,18,32,.08); }
:root[data-theme="light"] .mover-cell { background: rgba(255,255,255,.65); border-color: rgba(13,18,32,.08); }
:root[data-theme="light"] .expiry-btn { background: rgba(255,255,255,.7); border-color: rgba(13,18,32,.1); color: rgba(13,18,32,.5); }

/* ── СБРОС И БАЗА ────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    margin: 0; padding: 0;
}
html, body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}
body {
    font-family: var(--font);
    background: #080c14; /* solid fallback */
    background: var(--bg);
    color: #f0f4ff; /* solid fallback */
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Animated background — звёздное небо на тёмной теме */
:root:not([data-theme="light"]) body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 60% at 50% -20%, rgba(108,143,255,.12) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(0,229,160,.06) 0%, transparent 60%),
        radial-gradient(ellipse 50% 35% at 10% 90%, rgba(255,75,110,.05) 0%, transparent 60%);
}
body > * { position: relative; z-index: 1; }

.hidden { display: none !important; }

/* ── ЭКРАНЫ ──────────────────────────────────────────────────── */
.screen {
    height: 100dvh;
    height: var(--app-h, 100dvh);
    max-width: 460px;
    margin: 0 auto;
    padding: 16px 20px calc(20px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.screen:not(.hidden) {
    animation: screenIn .45s var(--ease-out) both;
}
@keyframes screenIn {
    from { opacity: 0; transform: translateY(14px) scale(.99); }
    to   { opacity: 1; transform: none; }
}
.screen-head {
    padding: 36px 4px 10px;
    text-align: center;
}
.title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

/* ── ВЫБОР ЯЗЫКА ─────────────────────────────────────────────── */
.search-wrap { position: relative; margin: 8px 0 14px; }
.search-ico {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    color: var(--muted);
    pointer-events: none;
}
.search-input {
    width: 100%;
    padding: 13px 14px 13px 44px;
    font-family: var(--font);
    font-size: 16px;
    color: var(--text);
    /* Solid dark bg so it looks correct even without backdrop-filter support */
    background: rgba(255,255,255,.07);
    border: 1.5px solid rgba(255,255,255,.1);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: border-color .2s, box-shadow .2s;
}
.search-input::placeholder { color: var(--muted); }
.search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
[dir="rtl"] .search-ico { left: auto; right: 14px; }
[dir="rtl"] .search-input { padding: 13px 44px 13px 14px; }

.lang-list {
    flex: 1; min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: 4px;
    scrollbar-width: none;
}
.lang-list::-webkit-scrollbar { display: none; }

.lang-item {
    display: flex; align-items: center; gap: 14px;
    width: 100%; padding: 13px 14px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: var(--text);
    font-family: var(--font); font-size: 16px;
    text-align: start; cursor: pointer;
    transition: background .15s, border-color .15s;
}
.lang-item .flag { font-size: 24px; line-height: 1; }
.lang-item .lang-name { flex: 1; font-weight: 600; }
.lang-item .check { color: var(--accent); font-weight: 700; opacity: 0; }
.lang-item:active { background: var(--surface); }
.lang-item.selected { background: var(--accent-soft); border-color: rgba(108,143,255,.3); }
.lang-item.selected .check { opacity: 1; }
.lang-empty { text-align: center; color: var(--muted); padding: 28px 0; font-size: 15px; }

/* ── WELCOME ─────────────────────────────────────────────────── */
.welcome-body {
    flex: 1; min-height: 0;
    overflow-y: auto;
    display: flex; flex-direction: column;
    justify-content: flex-end; align-items: flex-start;
    text-align: start; padding: 0 2px;
}
.welcome-art-wrap {
    width: 100%; position: relative;
    display: flex; justify-content: center; align-items: center;
    flex: 0 0 auto;
    min-height: clamp(96px, 16vh, 180px);
    margin-bottom: clamp(12px, 2.6vh, 28px);
}
.wa-aura {
    position: absolute; top: 50%; left: 50%;
    border-radius: 50%; opacity: 0;
    filter: blur(34px); pointer-events: none;
    will-change: transform, opacity;
}
.wa-aura-1 { width: 250px; height: 250px; margin: -125px 0 0 -125px; background: radial-gradient(circle, var(--accent) 0%, transparent 66%); }
.wa-aura-2 { width: 210px; height: 210px; margin: -105px 0 0 -105px; background: radial-gradient(circle, var(--up) 0%, transparent 62%); }
#welcome-art.played .wa-aura-1 { animation: auraFade1 1.1s ease .15s both, auraDrift1 12s ease-in-out 1.1s infinite; }
#welcome-art.played .wa-aura-2 { animation: auraFade2 1.1s ease .3s both, auraDrift2 14s ease-in-out 1.2s infinite; }
@keyframes auraFade1 { from { opacity: 0; } to { opacity: .25; } }
@keyframes auraFade2 { from { opacity: 0; } to { opacity: .18; } }
@keyframes auraDrift1 { 0%,100% { transform: translate(-16px,-9px) scale(1); } 50% { transform: translate(15px,11px) scale(1.16); } }
@keyframes auraDrift2 { 0%,100% { transform: translate(14px,10px) scale(1.06); } 50% { transform: translate(-15px,-11px) scale(.9); } }
.wa-halo {
    position: absolute; top: 50%; left: 50%;
    width: 120px; height: 120px; margin: -60px 0 0 -60px;
    border-radius: 50%;
    border: 1.5px solid var(--accent);
    opacity: 0; pointer-events: none;
    will-change: transform, opacity;
}
#welcome-art.played .wa-halo   { animation: haloPulse 1.6s var(--ease) .3s both; }
#welcome-art.played .wa-halo-2 { animation: haloPulse 1.6s var(--ease) .55s both; }
@keyframes haloPulse { 0% { transform: scale(.5); opacity: 0; } 25% { opacity: .5; } 100% { transform: scale(2.2); opacity: 0; } }
.wa-logo-img {
    position: relative; z-index: 1;
    width: 116px; height: 116px; object-fit: contain;
    opacity: 0; filter: drop-shadow(0 10px 30px var(--accent-glow));
    will-change: transform, opacity;
}
#welcome-art.played .wa-logo-img { animation: logoIn .95s var(--ease-pop) .1s both, logoFloat 5.5s ease-in-out 1.3s infinite; }
@keyframes logoIn { from { opacity: 0; transform: scale(.5) rotate(-8deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes logoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) {
    .wa-aura, .wa-halo { display: none; }
    #welcome-art.played .wa-logo-img { animation: logoIn .5s ease both; }
}
.welcome-title {
    font-family: var(--font);
    font-size: clamp(28px, 8.6vw, 38px);
    line-height: 1.06; font-weight: 800;
    letter-spacing: -0.04em; margin: 0 0 14px;
    background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.welcome-desc {
    font-size: 16px; line-height: 1.6;
    color: var(--text2); margin: 0; max-width: 340px;
}
.welcome-points {
    list-style: none; margin: 20px 0 0; padding: 0; width: 100%;
}
.welcome-points li {
    position: relative; padding-inline-start: 20px;
    font-size: 14.5px; line-height: 1.45; color: var(--text2);
}
.welcome-points li + li { margin-top: 11px; }
.welcome-points li::before {
    content: ""; position: absolute;
    inset-inline-start: 0; top: .55em;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent); opacity: .8;
    box-shadow: 0 0 6px var(--accent-glow);
}
.welcome-copy { margin-bottom: 14px; }
.welcome-fine { margin: 12px 0 0; font-size: 12px; color: var(--muted); text-align: center; }
.welcome-title  { animation: welcRise .85s var(--ease-out) .5s both; }
.welcome-desc   { animation: welcRise .85s var(--ease-out) .68s both; }
.welcome-points { animation: welcRise .85s var(--ease-out) .84s both; }
@keyframes welcRise {
    from { opacity: 0; transform: translateY(18px); filter: blur(8px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}
@media (max-height: 655px) {
    .welcome-title  { margin-bottom: 10px; }
    .welcome-desc   { font-size: 15px; }
    .welcome-points { margin-top: 14px; }
    .welcome-points li { font-size: 13.5px; }
    .welcome-points li + li { margin-top: 8px; }
}

/* ── ПОЧЕМУ: экран 3 ─────────────────────────────────────────── */
.why-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 2px 0; }
.why-title {
    font-size: clamp(26px, 7vw, 32px); font-weight: 800;
    letter-spacing: -0.04em; line-height: 1.1; margin: 0 0 22px;
    background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.why-item { margin-bottom: 20px; }
.why-h { font-size: 15.5px; font-weight: 700; line-height: 1.35; margin-bottom: 5px; }
.why-p { font-size: 14.5px; line-height: 1.55; color: var(--text2); }
.why-note {
    padding: 14px 16px; border-radius: 14px;
    background: var(--accent-soft); border: 1px solid rgba(108,143,255,.2);
    font-size: 14px; line-height: 1.45; color: var(--text2);
}
.why-title { animation: welcRise .7s var(--ease-out) .05s both; }
.why-item  { animation: welcRise .7s var(--ease-out) .14s both; }
.why-item + .why-item { animation-delay: .22s; }
.why-item + .why-item + .why-item { animation-delay: .3s; }
.why-note  { animation: welcRise .7s var(--ease-out) .38s both; }

/* ── КНОПКИ ──────────────────────────────────────────────────── */
.footer-btn {
    position: relative; margin-top: auto;
    padding-top: 16px; background: transparent; flex-shrink: 0;
}
.footer-btn::before {
    content: ""; position: absolute;
    left: 0; right: 0; top: -32px; height: 32px;
    background: linear-gradient(to top, var(--bg), transparent);
    pointer-events: none;
}
.screen:not(.hidden) .footer-btn {
    animation: footerUp .45s var(--ease-out) both;
}
@keyframes footerUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}

.btn {
    display: block; width: 100%;
    padding: 16px 18px; border: none;
    border-radius: var(--radius);
    font-family: var(--font); font-size: 16px; font-weight: 700;
    text-align: center; text-decoration: none; cursor: pointer;
    transition: transform .14s var(--ease), box-shadow .14s, opacity .2s;
    -webkit-user-select: none; user-select: none;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: .38; pointer-events: none; }

.btn-primary {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
    color: #fff;
    box-shadow: 0 4px 20px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.15);
    letter-spacing: .01em;
}
.btn-primary:active {
    box-shadow: 0 2px 8px var(--accent-glow);
}
.btn-dark { background: var(--text); color: var(--bg); }
.btn-ghost {
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border2); backdrop-filter: blur(8px);
    margin-top: 8px;
}
.btn-ghost:active { background: var(--surface2); }
.btn-lg { height: 56px; font-size: 16.5px; }

/* ── ТОПБАР / ГЛОБУС ─────────────────────────────────────────── */
.app-topbar {
    display: flex; justify-content: flex-end; align-items: center;
    flex-shrink: 0; height: 34px; margin-bottom: 6px;
}
#screen-welcome { position: relative; }
#screen-welcome .app-topbar {
    position: absolute; top: 16px; inset-inline-end: 20px;
    height: auto; margin: 0; z-index: 5;
}
.lang-fab {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 12px 0 10px;
    border-radius: 999px;
    border: 1px solid var(--border2);
    background: var(--surface); backdrop-filter: blur(16px);
    color: var(--text);
    font-family: var(--font); font-size: 13px; font-weight: 700;
    cursor: pointer; transition: background .15s, border-color .15s;
}
.lang-fab svg { width: 17px; height: 17px; color: var(--accent); }
.lang-fab:active { background: var(--accent-soft); border-color: var(--accent); }

/* ── ЛОГОТИП ─────────────────────────────────────────────────── */
.logo-img { width: 56px; height: 56px; object-fit: contain; display: block; margin: 0 auto 10px; }
.logo-img--lg { width: 92px; height: 92px; margin: 0 auto 8px; }

/* ── TABBAR ──────────────────────────────────────────────────── */
.tabbar {
    position: relative; display: flex;
    margin-top: 10px; padding: 5px;
    border-radius: 22px;
    border: 1px solid var(--border2);
    background: var(--glass);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    flex-shrink: 0;
    box-shadow: 0 4px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
}
.tabbar-btn {
    position: relative; z-index: 1; flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 4px; border: none; background: transparent;
    color: var(--muted); font-family: var(--font);
    font-size: 11px; font-weight: 600; cursor: pointer;
    transition: color .25s var(--ease);
}
.tabbar-btn svg { width: 22px; height: 22px; transition: transform .2s var(--ease-pop); }
.tabbar-btn:active svg { transform: scale(.88); }
.tabbar-btn.active { color: var(--accent); }
.tabbar-pill {
    position: absolute; top: 5px; bottom: 5px; left: 0; width: 0;
    border-radius: 17px;
    background: var(--accent-soft);
    border: 1px solid rgba(108,143,255,.2);
    transition: transform .35s var(--ease), width .35s var(--ease);
    z-index: 0;
}

/* ── ГЛАВНЫЙ ЭКРАН (панели) ──────────────────────────────────── */
.tab-panels { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.tab-panel { display: none; height: 100%; flex-direction: column; }
.tab-panel.active { display: flex; }
.panel-scroll {
    flex: 1; min-height: 0; overflow-y: auto;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding: 0 0 28px; scrollbar-width: none;
}
.panel-scroll::-webkit-scrollbar { display: none; }

.app-title {
    font-size: 24px; font-weight: 800;
    letter-spacing: -0.04em; margin: 0 0 4px;
    background: linear-gradient(90deg, var(--text) 60%, var(--text2));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── HUB ─────────────────────────────────────────────────────── */
.hub-lead { color: var(--text2); font-size: 14.5px; margin: -2px 0 18px; }

.section-head {
    display: flex; align-items: center; justify-content: space-between;
    margin: 18px 0 10px;
}
.section-link {
    background: none; border: none; color: var(--accent);
    font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer;
    padding: 4px 8px; border-radius: 8px;
    transition: background .15s;
}
.section-link:active { background: var(--accent-soft); }

/* Карточка «сигнал дня» */
.hub-hero {
    display: block; width: 100%; text-align: start; cursor: pointer;
    border: none; border-radius: 22px; padding: 20px; margin-bottom: 14px;
    color: #fff; font-family: var(--font);
    background: linear-gradient(135deg, #2a3f8f 0%, #1a2870 50%, #0e1c5c 100%);
    box-shadow: 0 8px 40px rgba(108,143,255,.25), inset 0 1px 0 rgba(255,255,255,.15);
    transition: transform .14s var(--ease), box-shadow .14s;
    position: relative; overflow: hidden;
}
.hub-hero::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 70% 80% at 80% 20%, rgba(108,143,255,.3) 0%, transparent 60%);
    pointer-events: none;
}
.hub-hero:active { transform: scale(.99); box-shadow: 0 4px 20px rgba(108,143,255,.2); }
.hub-hero-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.hub-hero .avatar { border: 2px solid rgba(255,255,255,.35); }
.hub-hero-meta { flex: 1; min-width: 0; }
.hub-hero-name { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.hub-hero-sub { font-size: 13px; opacity: .75; margin-top: 2px; }
.hub-hero-cta {
    text-align: center; font-weight: 700; font-size: 15px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 14px; padding: 13px;
    backdrop-filter: blur(8px);
}

/* Список рейтинга */
.hub-list { display: flex; flex-direction: column; gap: 8px; }
.hub-row {
    display: flex; align-items: center; gap: 12px; width: 100%;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 16px; padding: 13px 14px;
    font-family: var(--font); color: var(--text);
    text-align: start; cursor: pointer;
    backdrop-filter: blur(8px);
    transition: transform .12s var(--ease), border-color .2s, background .2s;
}
.hub-row:active { transform: scale(.985); background: var(--surface2); }
.hub-row.top {
    border-color: rgba(245,200,66,.35);
    background: linear-gradient(135deg, rgba(245,200,66,.08), rgba(245,200,66,.03));
    box-shadow: 0 0 0 1px rgba(245,200,66,.15) inset;
}
.hub-row-rank {
    flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--accent-soft); color: var(--accent);
    font-size: 11px; font-weight: 800;
}
.hub-row.top .hub-row-rank { background: var(--gold-soft); color: var(--gold); }
.hub-row-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hub-row-name { font-weight: 700; font-size: 15px; }
.hub-row-sub { font-size: 12px; color: var(--muted); }
.hub-row-go {
    flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--accent);
    background: var(--accent-soft); border-radius: 999px; padding: 5px 12px;
}
.hub-next {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 12px; font-size: 12px; color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.hub-next .dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--up);
    box-shadow: 0 0 6px var(--up-glow);
    animation: hubdot 2s ease-in-out infinite;
}
@keyframes hubdot { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.hub-guide {
    display: flex; flex-direction: column; gap: 10px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 16px; padding: 15px 16px; margin-bottom: 18px;
    backdrop-filter: blur(8px);
}
.hub-step { display: flex; align-items: center; gap: 12px; }
.hub-step-n {
    flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent);
    font-size: 12px; font-weight: 800; display: grid; place-items: center;
    box-shadow: 0 0 8px var(--accent-glow);
}
.hub-step-t { font-size: 14px; font-weight: 500; color: var(--text2); }

.hub-actions { display: flex; gap: 8px; margin-top: 20px; }
.hub-action {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    padding: 14px 6px; color: var(--text);
    font-family: var(--font); font-size: 12px; font-weight: 600; cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background .15s, border-color .15s, transform .12s;
}
.hub-action:active { background: var(--accent-soft); border-color: rgba(108,143,255,.3); transform: scale(.97); }
.hub-action-ic { font-size: 22px; line-height: 1; }

/* CTA баннер */
.cta-banner {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 15px 16px; border: none; border-radius: 16px;
    background: linear-gradient(135deg, var(--accent-soft), rgba(108,143,255,.06));
    border: 1px solid rgba(108,143,255,.2);
    font-family: var(--font); color: var(--text);
    text-align: start; cursor: pointer; margin-bottom: 16px;
    transition: border-color .2s, transform .12s;
}
.cta-banner:active { transform: scale(.99); border-color: rgba(108,143,255,.4); }
.cta-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cta-title { font-size: 15px; font-weight: 700; }
.cta-sub { font-size: 13px; color: var(--text2); }
.cta-arrow { color: var(--accent); font-size: 18px; font-weight: 700; }

/* ── АВАТАРЫ ─────────────────────────────────────────────────── */
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 12px;
    font-size: 13px; font-weight: 800; flex-shrink: 0;
    letter-spacing: -0.02em;
}

/* ── SPARKLINE ────────────────────────────────────────────────── */
.spark { display: block; }

/* ── СЕГМЕНТИРОВАННЫЙ ПЕРЕКЛЮЧАТЕЛЬ ─────────────────────────── */
.seg2 {
    display: flex; gap: 4px; padding: 4px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; margin-bottom: 14px;
    backdrop-filter: blur(8px);
}
.seg2-btn {
    flex: 1; padding: 9px; border: none; background: none; border-radius: 10px;
    color: var(--muted); font-family: var(--font); font-size: 14px; font-weight: 700;
    cursor: pointer; transition: all .2s var(--ease);
}
.seg2-btn.active { background: var(--accent-soft); color: var(--accent); }

/* ── MOVER GRID ──────────────────────────────────────────────── */
.mover-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 6px; }
.mover-cell {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    border: 1px solid rgba(255,255,255,.09);
    background: rgba(255,255,255,.05);
    color: var(--text); cursor: pointer;
    padding: 10px 6px 10px;
    border-radius: 14px;
    transition: background .18s, border-color .18s, transform .12s;
}
.mover-cell:active { transform: scale(.95); background: rgba(255,255,255,.09); }
.mover-ticker { font-size: 12px; font-weight: 700; }
.mover-chg { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── ДОСТУП: модальный экран ─────────────────────────────────── */
.acc-head { display: flex; align-items: center; gap: 12px; margin: 6px 0 18px; }
.acc-mark {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 14px;
    background: var(--accent-soft); display: block; position: relative;
    box-shadow: 0 0 16px var(--accent-glow);
}
.acc-mark::after {
    content: ""; position: absolute; inset: 11px;
    background: var(--accent);
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}
.acc-title {
    font-size: clamp(22px, 6.4vw, 27px);
    font-weight: 800; line-height: 1.12;
    letter-spacing: -0.03em; margin: 0;
}
.acc-back {
    margin: 0 0 18px; padding: 14px 15px;
    border-radius: 15px; background: var(--accent-soft);
    border: 1px solid rgba(108,143,255,.2);
}
.acc-back-t { margin: 0 0 11px; font-size: 14.5px; line-height: 1.4; }
.acc-back-row { display: flex; gap: 8px; align-items: stretch; }
.acc-back-row .btn {
    flex: 1; min-height: 44px; height: auto;
    padding: 9px 10px; font-size: 14px; line-height: 1.25;
    margin-top: 0; background: var(--surface2);
    display: inline-flex; align-items: center; justify-content: center;
    text-align: center; white-space: normal;
}
.acc-facts { list-style: none; margin: 0 0 18px; padding: 0; }
.acc-facts li {
    position: relative; padding-inline-start: 26px;
    font-size: 14.5px; line-height: 1.45; color: var(--text2);
}
.acc-facts li + li { margin-top: 12px; }
.acc-facts li::before {
    content: ""; position: absolute; inset-inline-start: 0; top: .3em;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--accent-soft); border: 1px solid rgba(108,143,255,.2);
}
.acc-facts li::after {
    content: ""; position: absolute; inset-inline-start: 5px; top: .58em;
    width: 6px; height: 3px; border-inline-start: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}
.acc-facts li.warn::before { background: var(--down-soft); border-color: rgba(255,75,110,.2); }
.acc-facts li.warn::after {
    inset-inline-start: 7px; top: .38em;
    width: 2px; height: 9px; border: 0; border-radius: 1px; transform: none;
    background: linear-gradient(var(--down) 0 5.5px, transparent 5.5px 7px, var(--down) 7px 9px);
}
.acc-links {
    display: flex; align-items: center; justify-content: center;
    gap: 8px; margin-top: 14px; flex-wrap: wrap;
}
.acc-link {
    background: none; border: 0; padding: 7px 10px; cursor: pointer;
    font-family: var(--font); font-size: 13.5px; color: var(--muted);
    text-decoration: none; border-radius: 9px;
}
.acc-link:active { background: var(--surface); }
.acc-link-support { color: var(--accent); font-weight: 600; }
.acc-link-support::after { content: " ↗"; font-weight: 400; }
.existing-box {
    margin-top: 10px; padding: 13px 15px;
    border-radius: 14px; background: var(--surface); border: 1px solid var(--border);
}
.existing-text { font-size: 13px; line-height: 1.5; color: var(--muted); white-space: pre-line; }

/* ── ПОДСКАЗКА БЕСПЛАТНОГО СИГНАЛА ─────────────────────────── */
.free-hint {
    display: flex; align-items: center; gap: 9px;
    margin: 14px 0 12px; padding: 12px 14px;
    border-radius: 13px;
    background: var(--gold-soft); border: 1px solid rgba(245,200,66,.3);
    color: var(--text); font-size: 13px; font-weight: 600; line-height: 1.35;
}
.free-hint-ic { font-size: 18px; flex-shrink: 0; }
.signal-note.demo {
    background: var(--accent-soft); border: 1px solid rgba(108,143,255,.25);
    border-radius: 13px; padding: 12px 14px; color: var(--text); font-weight: 600;
}

/* ── BOOT SCREEN ─────────────────────────────────────────────── */
.boot {
    position: fixed; inset: 0; z-index: 200;
    display: grid; place-items: center;
    background: var(--bg);
    transition: opacity .2s ease;
}
.boot.gone { opacity: 0; pointer-events: none; }
.boot-logo {
    width: 76px; height: 76px; object-fit: contain;
    filter: drop-shadow(0 0 20px var(--accent-glow));
    animation: bootpulse 1.4s ease-in-out infinite;
}
@keyframes bootpulse { 0%,100% { opacity: .45; transform: scale(.97); } 50% { opacity: 1; transform: scale(1); } }

/* ── ПАНЕЛЬ ДЕТАЛЬНОГО ЭКРАНА ────────────────────────────────── */
.detail {
    position: fixed; inset: 0; z-index: 90;
    background: var(--bg2); display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform .32s var(--ease);
}
.detail.hidden { display: none; }
.detail.open { transform: none; }
.detail-bar {
    padding: calc(14px + env(safe-area-inset-top)) 16px 4px;
    display: flex; align-items: center; gap: 10px;
}
.detail-back {
    width: 40px; height: 40px; border: none; border-radius: 50%;
    background: var(--surface); backdrop-filter: blur(8px);
    color: var(--text); font-size: 24px; line-height: 1; cursor: pointer;
    border: 1px solid var(--border);
    transition: background .15s;
}
.detail-back:active { background: var(--surface2); }
.detail-scroll {
    flex: 1; overflow-y: auto; scrollbar-width: none;
    width: 100%; max-width: 460px; margin: 0 auto;
    padding: 8px 22px calc(28px + env(safe-area-inset-bottom));
}
.detail-scroll::-webkit-scrollbar { display: none; }
.detail-id { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.detail-name { font-size: 18px; font-weight: 700; }
.detail-ticker { font-size: 14px; color: var(--muted); margin-top: 2px; }
.detail-price {
    font-size: 36px; font-weight: 800; letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(90deg, var(--text) 60%, var(--text2));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.detail-change { display: flex; align-items: center; gap: 10px; margin: 8px 0 20px; flex-wrap: wrap; }
.d-abs { font-weight: 700; font-variant-numeric: tabular-nums; }
.d-abs.up, .d-badge.up { color: var(--up); }
.d-abs.down, .d-badge.down { color: var(--down); }
.d-badge {
    padding: 3px 9px; border-radius: 8px;
    font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.d-badge.up   { background: var(--up-soft); box-shadow: 0 0 10px var(--up-glow); }
.d-badge.down { background: var(--down-soft); box-shadow: 0 0 10px var(--down-glow); }
.d-period { color: var(--muted); font-size: 14px; }
.detail-chart { height: 210px; }
.detail-chart canvas { width: 100%; height: 100%; display: block; }
.detail-dates { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; margin: 8px 2px 18px; }
.range-seg { display: flex; gap: 6px; margin-bottom: 22px; }
.range-btn {
    flex: 1; padding: 9px; border-radius: 11px;
    border: 1px solid var(--border); background: var(--surface); color: var(--muted);
    font-family: var(--font); font-weight: 700; font-size: 13px; cursor: pointer;
    transition: all .2s var(--ease);
}
.range-btn.active { background: var(--accent-soft); border-color: rgba(108,143,255,.3); color: var(--accent); }

/* ── MARKETS: список ─────────────────────────────────────────── */
.inst-list { display: flex; flex-direction: column; gap: 8px; }
.inst-row {
    display: flex; align-items: center; gap: 12px; width: 100%;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 12px 14px;
    color: var(--text); text-align: start; cursor: pointer;
    backdrop-filter: blur(8px);
    transition: border-color .2s, background .2s, transform .12s;
}
.inst-row:active { transform: scale(.985); background: var(--surface2); }
.inst-row.active { border-color: rgba(108,143,255,.35); }
.inst-sym { font-weight: 700; font-size: 15px; min-width: 76px; }
.inst-spark { flex: 1; height: 32px; min-width: 0; }
.inst-right { text-align: end; min-width: 86px; }
.inst-price { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.inst-chg { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.inst-chg.up   { color: var(--up); }
.inst-chg.down { color: var(--down); }

/* ── TRADE ────────────────────────────────────────────────────── */
.trade-top {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 16px; padding: 14px 16px; margin-bottom: 18px;
    backdrop-filter: blur(8px);
}
.trade-sym { font-size: 15px; font-weight: 700; margin-right: 8px; }
.trade-price { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--up); }
.trade-clock { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); }
.trade-clock .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 6px var(--up-glow); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.8); } }

.field { margin-bottom: 14px; }
.field-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }

.dir-row { display: flex; gap: 8px; margin-bottom: 14px; }
.dir-btn {
    flex: 1; padding: 12px; border-radius: 14px;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text); font-family: var(--font); font-size: 13px; font-weight: 700;
    cursor: pointer; text-align: center;
    transition: all .2s var(--ease), transform .12s;
}
.dir-btn:active { transform: scale(.97); }
.dir-up.active   { color: var(--up);   border-color: rgba(0,229,160,.35);   background: var(--up-soft);   box-shadow: 0 0 16px var(--up-glow); }
.dir-down.active { color: var(--down); border-color: rgba(255,75,110,.35);  background: var(--down-soft); box-shadow: 0 0 16px var(--down-glow); }

/* ── INFO / FAQ ──────────────────────────────────────────────── */
.faq { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.faq details {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 2px 16px;
    backdrop-filter: blur(8px);
    transition: border-color .2s;
}
.faq details[open] { border-color: var(--border2); }
.faq summary {
    list-style: none; cursor: pointer;
    padding: 15px 0; font-weight: 600; font-size: 15px;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 22px; font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq p { margin: 0 0 15px; color: var(--text2); line-height: 1.55; font-size: 15px; }
.faq-head { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 20px 0 10px; }
.faq details > p { white-space: pre-line; }

/* ── MODALS / BOTTOM SHEET ───────────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 100; }
.modal.hidden { display: none; }
.modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(4px);
    opacity: 0; transition: opacity .3s var(--ease);
}
.modal.open .modal-backdrop { opacity: 1; }
.sheet {
    position: absolute; left: 0; right: 0; bottom: 0;
    max-width: 460px; margin: 0 auto;
    /* Solid dark background — works even if backdrop-filter is unsupported */
    background: #0c1122;
    border: 1px solid rgba(255,255,255,.12);
    border-bottom: none;
    border-radius: 26px 26px 0 0;
    padding: 10px 22px calc(28px + env(safe-area-inset-bottom));
    transform: translateY(100%); transition: transform .38s var(--ease);
    max-height: 92dvh; overflow-y: auto;
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    box-shadow: 0 -8px 60px rgba(0,0,0,.55), 0 -1px 0 rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.08);
}
.modal.open .sheet { transform: none; }
.sheet-grip {
    width: 42px; height: 4px; border-radius: 2px;
    background: var(--border2); margin: 6px auto 18px; cursor: pointer;
}
.sheet h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 8px; }

/* Статус-модалка */
.status-card {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -46%) scale(.96);
    width: calc(100% - 40px); max-width: 380px;
    background: #0c1122; border: 1px solid rgba(255,255,255,.12);
    border-radius: 26px;
    padding: 30px 24px calc(22px + env(safe-area-inset-bottom));
    text-align: center;
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    box-shadow: 0 24px 80px rgba(0,0,0,.6);
    opacity: 0; transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.modal.open .status-card { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.status-emoji { font-size: 54px; line-height: 1; margin-bottom: 14px; }
.status-title { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 8px; }
.status-text { color: var(--text2); line-height: 1.5; font-size: 15px; margin: 0 0 20px; }
.status-steps { display: flex; flex-direction: column; gap: 10px; text-align: start; margin: 0 0 22px; }
.status-step {
    display: flex; align-items: center; gap: 11px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 12px 14px;
    font-size: 15px; font-weight: 500; color: var(--text2);
}
.status-step-ic { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.status-step.done .status-step-ic { background: var(--up); color: #000; box-shadow: 0 0 10px var(--up-glow); }
.status-step.todo { color: var(--muted); }
.status-step.todo .status-step-ic { background: transparent; border: 1.5px solid var(--border2); color: var(--muted); }
.status-card .btn { width: 100%; }
.status-card .link-btn { margin-top: 12px; }

/* ── СИГНАЛ: заголовок ───────────────────────────────────────── */
.sheet-title {
    text-align: center; font-size: 12px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.sheet-title .ai-badge {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 3px 10px; border-radius: 8px;
    background: var(--accent-soft); color: var(--accent);
    font-size: 11px; font-weight: 800; letter-spacing: .02em; text-transform: none;
    border: 1px solid rgba(108,143,255,.2);
    box-shadow: 0 0 12px var(--accent-glow);
}
.signal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.signal-asset { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.signal-sub { font-size: 13px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* Карточка направления сигнала */
.signal-dir {
    display: flex; align-items: center; justify-content: center;
    gap: 16px; padding: 22px; border-radius: 20px; margin-bottom: 16px;
    position: relative; overflow: hidden;
}
.signal-dir::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 70% 100% at 10% 50%, rgba(255,255,255,.04) 0%, transparent 70%);
    pointer-events: none;
}
.signal-dir.up {
    color: var(--up);
    background: linear-gradient(135deg, rgba(0,229,160,.12), rgba(0,229,160,.05));
    border: 1px solid rgba(0,229,160,.25);
    box-shadow: 0 4px 30px rgba(0,229,160,.12), inset 0 1px 0 rgba(0,229,160,.12);
}
.signal-dir.down {
    color: var(--down);
    background: linear-gradient(135deg, rgba(255,75,110,.12), rgba(255,75,110,.05));
    border: 1px solid rgba(255,75,110,.25);
    box-shadow: 0 4px 30px rgba(255,75,110,.12), inset 0 1px 0 rgba(255,75,110,.12);
}
.signal-dir-badge {
    width: 58px; height: 58px; border-radius: 50%;
    background: currentColor;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; box-shadow: 0 0 24px currentColor;
}
.signal-dir.up   .signal-dir-badge { box-shadow: 0 0 28px var(--up-glow); }
.signal-dir.down .signal-dir-badge { box-shadow: 0 0 28px var(--down-glow); }
.signal-dir-badge svg { width: 30px; height: 30px; color: #000; }
.signal-dir-text { display: flex; flex-direction: column; }
.signal-dir-label { font-size: 28px; font-weight: 900; letter-spacing: -0.02em; text-transform: uppercase; }
.signal-dir-hint { font-size: 13px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.signal-timer {
    text-align: center; font-size: 15px; font-weight: 600;
    color: var(--muted); margin-bottom: 16px; font-variant-numeric: tabular-nums;
}
.signal-timer.expired { color: var(--down); }

/* «Почему такой сигнал» */
.sig-why {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 13px 15px; margin-bottom: 12px;
    backdrop-filter: blur(8px);
}
.sig-why-head {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--muted); margin-bottom: 8px;
}
.sig-why-item { font-size: 14px; color: var(--text2); line-height: 1.6; }

/* Шаг 1: подготовка */
.setup-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 18px 0 10px; }
#signal-setup .signal-head { margin-bottom: 4px; }
#signal-setup #sig-expiry { margin-bottom: 2px; }
#signal-reveal { margin-top: 20px; }
.sig-entry { text-align: center; margin: -4px 0 16px; }
.sig-entry-label { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sig-entry.live .sig-entry-label { color: var(--muted); }
.sig-entry.expired .sig-entry-label { color: var(--down); }

/* ── SUPPORT (чат) ────────────────────────────────────────────── */
#support-screen { display: flex; flex-direction: column; }
#support-screen .detail-bar { display: flex; align-items: center; gap: 10px; }
.support-human {
    margin-inline-start: auto; padding: 6px 14px;
    border: 1px solid var(--border2); border-radius: 999px;
    background: var(--surface); backdrop-filter: blur(8px);
    color: var(--text); font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer;
}
.support-card {
    display: flex; align-items: center; gap: 12px; width: 100%;
    background: var(--accent-soft); border: 1px solid rgba(108,143,255,.2);
    border-radius: 16px; padding: 14px 16px; margin: 0 0 12px;
    text-align: start; cursor: pointer; font-family: var(--font); color: var(--text);
    transition: border-color .2s, transform .12s;
}
.support-card:active { transform: scale(.99); border-color: rgba(108,143,255,.4); }
.support-card-ic { font-size: 24px; }
.support-card-text { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.support-card-title { font-size: 16px; font-weight: 700; }
.support-card-sub { font-size: 13px; color: var(--text2); margin-top: 2px; }
.support-card .cta-arrow { color: var(--accent); font-size: 18px; }
.support-messages {
    flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.msg {
    max-width: 84%; padding: 11px 14px; border-radius: 18px;
    font-size: 15px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word;
}
.msg.user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.msg.bot {
    align-self: flex-start; background: var(--surface2); color: var(--text);
    border: 1px solid var(--border); border-bottom-left-radius: 5px;
}
.msg.typing { display: flex; gap: 5px; align-items: center; padding: 14px; }
.msg.typing .tdot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: typingdot 1.2s infinite ease-in-out; }
.msg.typing .tdot:nth-child(2) { animation-delay: .18s; }
.msg.typing .tdot:nth-child(3) { animation-delay: .36s; }
@keyframes typingdot { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.support-input-row {
    display: flex; gap: 8px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
    background: var(--glass);
    backdrop-filter: blur(12px);
}
.support-input {
    flex: 1; padding: 12px 14px; font-size: 16px; font-family: var(--font);
    border: 1px solid var(--border2); border-radius: 14px;
    background: var(--surface); color: var(--text);
    transition: border-color .2s;
}
.support-input:focus { outline: none; border-color: var(--accent); }
.support-send {
    width: 46px; height: 46px; flex-shrink: 0; border: none;
    border-radius: 14px; background: linear-gradient(135deg, var(--accent), var(--accent2));
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 14px var(--accent-glow); transition: transform .12s;
}
.support-send svg { width: 20px; height: 20px; }
.support-send:active { transform: scale(.93); }

/* ── ACCESS STEPS ────────────────────────────────────────────── */
.fsteps { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 18px; }
.fstep {
    display: flex; align-items: center; gap: 12px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 13px 14px;
    font-size: 15px; font-weight: 500; color: var(--muted);
    backdrop-filter: blur(8px);
    transition: border-color .25s, color .25s;
}
.fstep-ic {
    flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center; font-size: 13px; font-weight: 700;
    background: transparent; border: 1.5px solid var(--border2); color: var(--muted);
}
.fstep.active { color: var(--text); border-color: rgba(108,143,255,.35); }
.fstep.active .fstep-ic { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 12px var(--accent-glow); }
.fstep.done .fstep-ic { background: var(--up); border-color: var(--up); color: #000; box-shadow: 0 0 10px var(--up-glow); }
.fstep.checking { color: var(--text); border-color: rgba(108,143,255,.35); }
.fstep.checking .fstep-ic { border-color: var(--accent); color: var(--accent); animation: fstep-pulse 1.2s ease-in-out infinite; }
@keyframes fstep-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.fstep-t { line-height: 1.4; }
#register-link, #deposit-btn { margin-bottom: 2px; }
.reg-done {
    background: var(--up-soft); border: 1px solid rgba(0,229,160,.25);
    border-radius: 16px; padding: 16px; margin-bottom: 16px;
    box-shadow: 0 4px 20px rgba(0,229,160,.1);
}
.reg-done-title { font-size: 17px; font-weight: 800; color: var(--up); margin-bottom: 4px; }
.reg-done-sub { font-size: 15px; line-height: 1.5; color: var(--text2); }
.access-steps2 { display: flex; flex-direction: column; gap: 12px; margin-bottom: 10px; }
.astep { display: flex; align-items: center; gap: 12px; }
.astep-num {
    width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent);
    font-weight: 800; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 8px var(--accent-glow);
}
.astep-btn { flex: 1; }
.access-note { text-align: center; color: var(--muted); font-size: 13px; line-height: 1.45; margin: 8px 0 0; }
.link-btn {
    display: block; width: 100%; text-align: center;
    background: none; border: none; color: var(--accent);
    font-family: var(--font); font-size: 14px; font-weight: 700;
    padding: 14px 0 2px; cursor: pointer;
}
.have-account-box { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--border); }
.have-account-note { font-size: 13px; color: var(--muted); line-height: 1.45; margin: 0 0 12px; }

/* ── LOADING SIGNAL ──────────────────────────────────────────── */
.signal-loading {
    display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 36px 0 28px;
}
.signal-ai { position: relative; width: 70px; height: 70px; display: grid; place-items: center; }
.signal-ai-glow {
    position: absolute; width: 90px; height: 90px; border-radius: 50%;
    background: radial-gradient(circle, var(--accent), transparent 70%);
    filter: blur(12px);
    animation: aiGlow 1.3s ease-in-out infinite;
}
.signal-ai-logo {
    position: relative; width: 56px; height: 56px; object-fit: contain;
    animation: aiSpin 1.8s linear infinite;
    filter: drop-shadow(0 0 12px var(--accent-glow));
}
@keyframes aiSpin { to { transform: rotate(360deg); } }
@keyframes aiGlow { 0%,100% { transform: scale(1); opacity: .22; } 50% { transform: scale(1.32); opacity: .45; } }
.signal-loading-text {
    font-size: 15px; font-weight: 700; color: var(--text2);
    min-height: 20px; text-align: center; letter-spacing: .01em;
}
.signal-progress { width: 100%; height: 5px; border-radius: 3px; background: var(--surface2); overflow: hidden; }
.signal-progress-fill {
    height: 100%; width: 0; border-radius: 3px;
    background: linear-gradient(90deg, var(--accent2), var(--accent));
    box-shadow: 0 0 10px var(--accent-glow);
    transition: width .4s var(--ease);
}

/* ── NEW ACCESS FLOW ─────────────────────────────────────────── */
.np-steps { display: flex; gap: 6px; margin: 2px 0 18px; }
.np-steps i { flex: 1; height: 3px; border-radius: 2px; background: var(--border2); }
.np-steps i.on { background: linear-gradient(90deg, var(--accent2), var(--accent)); box-shadow: 0 0 6px var(--accent-glow); }
.np-done {
    display: flex; align-items: center; gap: 7px;
    margin: 0 0 10px; font-size: 13.5px; font-weight: 600; color: var(--up);
}
.np-done::before {
    content: "✓"; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
    background: var(--up-soft); display: flex; align-items: center; justify-content: center;
    font-size: 11px; box-shadow: 0 0 8px var(--up-glow);
}
.np-stepno { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 4px; }
.np-title { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; margin: 0 0 10px; }
.np-lede { font-size: 14px; line-height: 1.6; color: var(--text2); margin: 0 0 20px; }
.np-promo {
    background: var(--gold-soft); border: 1px solid rgba(245,200,66,.3);
    border-radius: 14px; padding: 14px 16px; margin: 0 0 20px;
}
.np-promo-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.np-promo-ttl { font-size: 14px; font-weight: 700; color: var(--gold); }
.np-promo-code {
    background: var(--gold); border: none; border-radius: 9px; padding: 5px 13px;
    color: #000; font-family: var(--font); font-size: 14px; font-weight: 800;
    cursor: pointer; letter-spacing: .04em;
    box-shadow: 0 0 12px rgba(245,200,66,.4);
}
.np-promo-p { font-size: 12.5px; color: rgba(245,200,66,.7); margin: 8px 0 0; line-height: 1.4; }
.np-main { margin-bottom: 12px; }
.np-plain { text-align: center; }
.np-plain a { color: var(--muted); font-size: 14px; text-decoration: none; }
.np-rows { margin-bottom: 12px; }
.np-row {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 0; border-bottom: 1px solid var(--border);
    font-size: 15px; font-weight: 500;
}
.np-row:last-child { border-bottom: none; }
.np-row-ic { font-size: 20px; flex-shrink: 0; width: 26px; }
.np-row-text { display: flex; flex-direction: column; gap: 3px; }
.np-row-title { font-weight: 700; }
.np-row-sub { font-size: 13px; color: var(--muted); line-height: 1.4; }
.np-help {
    display: block; width: 100%; background: none; border: none; cursor: pointer;
    font-family: var(--font); font-size: 13px; color: var(--muted);
    padding: 10px 0 2px; text-align: center;
}
.np-hd { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.np-bk {
    background: var(--surface); border: 1px solid var(--border); color: var(--text);
    border-radius: 50%; width: 38px; height: 38px; font-size: 22px; cursor: pointer;
    display: grid; place-items: center; flex-shrink: 0; transition: background .15s;
}
.np-bk:active { background: var(--surface2); }
.np-check { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 0; }
.np-id {
    width: 100%; scroll-margin-block: 28px; padding: 13px 14px; border-radius: 14px;
    border: 1px solid var(--border2); background: var(--surface); color: var(--text);
    font: inherit; font-variant-numeric: tabular-nums; letter-spacing: .02em;
    transition: border-color .2s, box-shadow .2s;
}
.np-id:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.np-check .btn { width: 100%; }
.np-id-msg { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45; font-weight: 500; color: var(--muted); background: var(--surface); }
.np-id-msg.ok { color: var(--up); background: var(--up-soft); border: 1px solid rgba(0,229,160,.2); }
.np-id-msg.bad { color: var(--down); background: var(--down-soft); border: 1px solid rgba(255,75,110,.2); }
.np-why { margin: 0 0 11px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.np-gd { padding-inline-start: 18px; color: var(--text2); font-size: 14px; line-height: 1.6; }
.np-gd li + li { margin-top: 8px; }
.np-sup { display: block; text-align: center; color: var(--accent); font-size: 14px; text-decoration: none; padding: 14px 0 2px; }
.np-guide { margin-top: 16px; }

/* ── MARKETS ─────────────────────────────────────────────────── */
.mkt-banner {
    display: flex; align-items: center; gap: 10px; padding: 11px 14px;
    border-radius: 14px; border: 1px solid var(--border); background: var(--surface);
    font-size: 13px; line-height: 1.4; margin-bottom: 14px;
    backdrop-filter: blur(8px);
}
.mkt-banner .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mkt-banner.open .dot { background: var(--up); box-shadow: 0 0 6px var(--up-glow); animation: pulse 1.8s infinite; }
.mkt-banner.closed .dot { background: var(--down); }
.mkt-banner .muted { color: var(--muted); }
.cat-chips {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 14px; padding-bottom: 2px;
}
.cat-chips::-webkit-scrollbar { display: none; }
.cat-chip {
    flex: 0 0 auto; padding: 8px 18px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.06);
    color: rgba(240,244,255,.55); font-family: var(--font); font-size: 13.5px; font-weight: 600;
    white-space: nowrap; cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.cat-chip.active {
    background: rgba(108,143,255,.18);
    border-color: rgba(108,143,255,.4);
    color: var(--accent);
    box-shadow: 0 0 14px rgba(108,143,255,.2);
}
.otc-badge {
    display: inline-block; font-size: 10px; font-weight: 700; color: var(--accent);
    background: var(--accent-soft); padding: 2px 6px; border-radius: 6px;
    margin-left: 8px; vertical-align: middle;
}
.payout { font-weight: 700; font-size: 15px; color: var(--up); font-variant-numeric: tabular-nums; }
.payout.na { color: var(--muted); font-weight: 600; }
.detail-payout-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 10px 0 4px; }
.d-payout { font-size: 17px; font-weight: 800; color: var(--up); }
.d-payout.na { color: var(--muted); }
.d-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.d-status .sdot { width: 8px; height: 8px; border-radius: 50%; }
.d-status.open { color: var(--up); }
.d-status.open .sdot { background: var(--up); box-shadow: 0 0 6px var(--up-glow); }
.d-status.closed { color: var(--muted); }
.d-status.closed .sdot { background: var(--down); }
.detail-bar-title { font-size: 17px; font-weight: 700; margin-inline-start: 4px; }
#full-market { margin-bottom: 14px; }
#asset-list-screen .search-wrap { margin-top: 0; }
#full-list { margin-top: 4px; }

/* ── ASSET SELECT ────────────────────────────────────────────── */
.asset-select {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 14px 16px;
    border: 1px solid var(--border); border-radius: 14px;
    background: var(--surface); color: var(--text);
    font-family: var(--font); cursor: pointer;
    backdrop-filter: blur(8px);
    transition: border-color .2s, box-shadow .2s;
}
.asset-select:active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.asset-select-left { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; }
.asset-select-caret { color: var(--muted); font-size: 12px; }

/* ── EXPIRY BTNS ─────────────────────────────────────────────── */
.expiry-row { display: grid; gap: 8px; }
.expiry-btn {
    padding: 13px 4px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px;
    background: rgba(255,255,255,.06); color: rgba(240,244,255,.5);
    font-family: var(--font); font-size: 14px; font-weight: 700; cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background .2s, color .2s, border-color .2s, transform .14s, box-shadow .2s;
}
.expiry-btn:active { transform: scale(.95); }
.expiry-btn.active {
    background: var(--accent-soft); border-color: rgba(108,143,255,.35); color: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow);
}

/* ── ASSET SHEET SEARCH ──────────────────────────────────────── */
#asset-sheet .sheet-search {
    position: sticky; top: 0; z-index: 2;
    background: #0c1122; backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    margin: 0 0 12px; padding-top: 2px;
}
#asset-sheet .field-label { margin-top: 6px; }
#asset-sheet #asset-popular { margin-bottom: 12px; }

/* ── SIGNAL NOTE ─────────────────────────────────────────────── */
.signal-note { font-size: 13px; line-height: 1.5; color: var(--muted); text-align: center; margin: 6px 0 14px; }

/* ── MODEL SELECT ────────────────────────────────────────────── */
.model-badge { color: var(--accent); }
.model-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.model-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 14px 16px; border-radius: 14px;
    background: var(--surface); border: 1px solid var(--border);
    font-family: var(--font); color: var(--text); font-size: 16px; cursor: pointer;
    text-align: left; backdrop-filter: blur(8px);
    transition: border-color .15s, background .15s;
}
.model-item.selected { border-color: rgba(108,143,255,.4); background: var(--accent-soft); box-shadow: 0 0 12px var(--accent-glow); }
.model-item.locked { opacity: .55; }
.model-name { font-weight: 700; }
.model-check { color: var(--accent); font-weight: 800; }
.model-lock { font-size: 13px; color: var(--muted); white-space: nowrap; }
.model-info { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.model-info .model-name { font-size: 16px; font-weight: 700; }
.model-req { font-size: 12px; color: var(--muted); font-weight: 400; }
.model-factors { display: flex; flex-wrap: wrap; gap: 5px 6px; margin: 5px 0 3px; }
.model-factor {
    font-size: 11px; line-height: 1.55; padding: 2px 9px; border-radius: 999px;
    color: var(--accent); background: var(--accent-soft); white-space: nowrap;
    border: 1px solid rgba(108,143,255,.15);
}
.model-factor.off { color: var(--muted); background: transparent; border: 1px solid var(--border); }
.model-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.model-price { font-size: 12px; color: var(--muted); white-space: nowrap; }
.model-upgrade { margin-top: 14px; padding: 14px 16px; background: var(--accent-soft); border-radius: 14px; border: 1px solid rgba(108,143,255,.15); }
.model-upgrade-text { font-size: 14px; line-height: 1.5; color: var(--text2); margin: 0 0 12px; }
.model-upgrade .btn { width: 100%; }

/* ── RISK CARD ───────────────────────────────────────────────── */
.risk-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; backdrop-filter: blur(8px); }
.risk-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.risk-list li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.45; color: var(--text2); }
.risk-list li::before { content: "•"; position: absolute; left: 4px; color: var(--accent); font-weight: 800; }
.risk-note { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ── TSIG (trade signal card) ────────────────────────────────── */
.tsig {
    display: block; width: 100%; text-align: start; margin-top: 16px; padding: 14px 16px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
    cursor: pointer; font-family: var(--font); color: var(--text);
    backdrop-filter: blur(8px);
    transition: border-color .2s, opacity .3s, transform .14s;
}
.tsig:active { transform: scale(.985); border-color: rgba(108,143,255,.3); }
.tsig.expired { opacity: .5; }
.tsig-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tsig-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tsig-timer { font-size: 13px; font-weight: 700; color: var(--accent); }
.tsig.expired .tsig-timer { color: var(--muted); }
.tsig-main { display: flex; align-items: center; gap: 12px; }
.tsig-info { flex: 1 1 auto; min-width: 0; }
.tsig-sym { font-size: 16px; font-weight: 700; }
.tsig-meta { font-size: 13px; color: var(--muted); margin-top: 2px; }
.tsig-dir { display: flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; font-weight: 700; font-size: 15px; }
.tsig-dir.up { background: var(--up-soft); color: var(--up); box-shadow: 0 0 12px var(--up-glow); }
.tsig-dir.down { background: var(--down-soft); color: var(--down); box-shadow: 0 0 12px var(--down-glow); }
@keyframes tsig-gone {
    from { opacity: .5; transform: none; }
    35%  { opacity: 0; transform: translateY(-6px) scale(.97); }
    to   { opacity: 0; transform: translateY(-6px) scale(.97); height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
}
.tsig.tsig-gone { animation: tsig-gone .55s var(--ease) forwards; overflow: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .tsig.tsig-gone { animation-duration: .01s; } }
.tsig-badge { font-size: 13px; line-height: 1; }

/* ── LANG/INVITE CARDS ───────────────────────────────────────── */
.invite-card { padding: 16px; margin: 0 0 12px; border-radius: 18px; background: var(--accent-soft); border: 1px solid rgba(108,143,255,.15); }
.invite-top { display: flex; align-items: flex-start; gap: 12px; }
.invite-ic { font-size: 26px; line-height: 1; }
.invite-text { flex: 1; min-width: 0; }
.invite-title { font-size: 16px; font-weight: 700; }
.invite-sub { font-size: 13.5px; line-height: 1.45; color: var(--text2); margin-top: 3px; }
.invite-stats { margin: 13px 0 12px; padding: 9px 12px; border-radius: 11px; background: var(--bg); font-size: 13.5px; }
.invite-card .btn-primary { margin-top: 0; }
.invite-card .link-btn { margin-top: 8px; width: 100%; }
.lang-card { margin-top: 22px; }

/* ── DEMO CHART ──────────────────────────────────────────────── */
:root { --ease-draw: cubic-bezier(.25, .1, .35, 1); --ease-pop: cubic-bezier(.34, 1.56, .64, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); }
.demo {
    border-radius: 18px; margin: 12px 0 16px;
    background: var(--surface); border: 1px solid var(--border);
    padding: 14px 14px 0; overflow: hidden;
    backdrop-filter: blur(8px);
    opacity: 0; transform: translateY(8px) scale(.99);
    max-height: 0; padding-top: 0; padding-bottom: 0;
    transition: opacity .42s var(--ease-out), transform .42s var(--ease-out),
                max-height .52s var(--ease-out), padding .42s var(--ease-out),
                border-color .42s ease, box-shadow .6s ease;
}
#signal-result .demo.shown { opacity: 1; transform: none; max-height: 520px; padding-top: 15px; padding-bottom: 15px; border-color: var(--border2); }
@media (prefers-reduced-motion: reduce) { #signal-result .demo { transition: none; } }
.demo-head { display: flex; align-items: center; justify-content: space-between; }
.demo-eyebrow {
    font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); border: 1px solid var(--border2); border-radius: 5px; padding: 2px 6px;
}
.demo-again { background: none; border: 0; cursor: pointer; font-size: 17px; line-height: 1; color: var(--muted); padding: 2px 0 2px 8px; transition: transform .2s; }
.demo-again:hover { transform: rotate(180deg); }
.demo-title { font-size: 19px; font-weight: 700; margin: 9px 0 14px; letter-spacing: -.01em; }
.demo-row { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; }
.demo-row .avatar { width: 26px; height: 26px; font-size: 9px; }
.demo-pair { font-size: 14.5px; font-weight: 700; }
.demo-tag { font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 2px 7px; border-radius: 6px; }
.demo-tag.up { background: var(--up-soft); color: var(--up); }
.demo-tag.down { background: var(--down-soft); color: var(--down); }
.demo-exp { font-size: 12.5px; color: var(--muted); margin-inline-start: auto; }
.demo-chart { position: relative; height: 118px; margin: 0 0 12px; }
.demo-chart svg { width: 100%; height: 100%; display: block; }
.demo-candle { opacity: 0; transform: scaleY(.35); transform-box: fill-box; transform-origin: center; transition: opacity .2s ease, transform .28s var(--ease-out); }
.demo-candle.on { opacity: 1; transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) { .demo-candle { transition: opacity .2s ease; transform: none; } }
.demo-candle.up rect { fill: var(--up); }
.demo-candle.up line { stroke: var(--up); }
.demo-candle.dn rect { fill: var(--down); }
.demo-candle.dn line { stroke: var(--down); }
.demo-candle line { stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.demo-entry { stroke: var(--border2); stroke-width: 1; stroke-dasharray: 3 4; }
.demo-expiry { stroke: var(--up); stroke-width: 1.5; stroke-dasharray: 2 4; opacity: 0; transition: opacity .3s ease; }
.demo.done .demo-expiry { opacity: .55; }
.demo-clock { position: absolute; top: 0; inset-inline-end: 0; font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.demo-won { position: absolute; top: 0; inset-inline-start: 0; font-size: 12px; font-weight: 700; color: var(--up); opacity: 0; transform: translateY(-4px); transition: opacity .3s ease, transform .3s ease; }
.demo-won::before { content: "✓ "; }
.demo.done .demo-won { opacity: 1; transform: none; }
#signal-result .demo.done { box-shadow: 0 0 0 1px rgba(0,229,160,.3), 0 8px 30px rgba(0,229,160,.12); }
.demo-calc b { transition: transform .34s var(--ease-pop); }
.demo.done .demo-calc b { transform: scale(1.06); }
.demo.settled .demo-calc b { transform: none; }
#signal-result .demo.settled { box-shadow: none; }
.demo.done .demo-clock { opacity: .35; }
.demo-pin { position: absolute; transform: translate(-50%, -50%); font-size: 10.5px; font-weight: 700; letter-spacing: .02em; padding: 2px 6px; border-radius: 6px; white-space: nowrap; opacity: 0; transition: opacity .3s ease; }
.demo-pin.in { background: var(--surface2); color: var(--muted); border: 1px solid var(--border2); transform: translate(-8%, -50%) scale(.8); transition: opacity .25s ease, transform .4s var(--ease-pop); }
.demo.shown .demo-pin.in { transform: translate(-8%, -50%) scale(1); }
.demo-pin.out { background: var(--up); color: #000; box-shadow: 0 2px 10px var(--up-glow); transform: translate(-92%, -50%) scale(.7); transition: opacity .22s ease, transform .42s var(--ease-pop); }
.demo.done .demo-pin.out { transform: translate(-92%, -50%) scale(1); }
.demo.shown .demo-pin.in { opacity: 1; }
.demo.done .demo-pin.out { opacity: 1; }
.demo-next { margin: 10px 0 0; font-size: 13.5px; line-height: 1.45; font-weight: 500; color: var(--text2); opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); transition-delay: .25s; }
.demo.done .demo-next { opacity: 1; transform: none; }
.demo-calc { display: flex; border: 1px solid var(--border); border-radius: 11px; overflow: hidden; margin: 0 0 11px; }
.demo-calc div { flex: 1; padding: 9px 10px; text-align: center; }
.demo-calc div + div { border-inline-start: 1px solid var(--border); }
.demo-calc em { display: block; font-style: normal; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.demo-calc b { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.demo-calc b.up { color: var(--up); }
.demo-note { margin: 0 0 12px; font-size: 12px; line-height: 1.45; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .demo-fill, .demo-won { transition: none; } }

/* ── SCROLLBARS ──────────────────────────────────────────────── */
.sheet, .panel-scroll, .asset-list, .support-messages, .lang-list, .model-list { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }
.sheet::-webkit-scrollbar, .panel-scroll::-webkit-scrollbar, .asset-list::-webkit-scrollbar, .support-messages::-webkit-scrollbar, .lang-list::-webkit-scrollbar, .model-list::-webkit-scrollbar { width: 4px; }
.sheet::-webkit-scrollbar-thumb, .panel-scroll::-webkit-scrollbar-thumb, .asset-list::-webkit-scrollbar-thumb, .support-messages::-webkit-scrollbar-thumb, .lang-list::-webkit-scrollbar-thumb, .model-list::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }

/* ── HUB RANK ────────────────────────────────────────────────── */
.hub-rank-sub { color: var(--muted); font-size: 13px; margin: -6px 2px 12px; }

/* ── DETAIL SIGNAL BTN ───────────────────────────────────────── */
.detail-signal { margin: 4px 0 12px; }

/* ── SHEET CATS ──────────────────────────────────────────────── */
.sheet-cats { padding-bottom: 4px; }

/* ================================================================
   LIVE TRADING CHART — PocketOption style
   ================================================================ */
.live-chart-wrap {
    position: relative; margin: 14px 0 16px;
    border-radius: 20px; overflow: hidden;
    background: #050a14;
    border: 1px solid rgba(108,143,255,.15);
    box-shadow:
        0 6px 40px rgba(0,0,0,.5),
        0 0 0 1px rgba(255,255,255,.04) inset,
        0 1px 0 rgba(255,255,255,.08) inset;
}
.lc-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px 8px;
    background: rgba(255,255,255,.03);
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.lc-pair { font-size: 13px; font-weight: 800; color: rgba(255,255,255,.8); letter-spacing: .05em; }
.lc-price-live { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: #fff; letter-spacing: .02em; transition: color .2s; }
.lc-price-live.up   { color: var(--up); text-shadow: 0 0 10px var(--up-glow); }
.lc-price-live.down { color: var(--down); text-shadow: 0 0 10px var(--down-glow); }
.lc-svg { display: block; width: 100%; height: 120px; }
.lc-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px var(--accent-glow)); }
.lc-area { fill: url(#lcAreaGrad); opacity: .5; }
.lc-dot { fill: var(--accent); filter: drop-shadow(0 0 5px var(--accent-glow)); }
.lc-hline { stroke: rgba(108,143,255,.25); stroke-width: 1; stroke-dasharray: 3 5; }
.lc-price-bubble { fill: var(--accent); rx: 4; }
.lc-price-bubble-text { fill: #fff; font-size: 9px; font-weight: 800; font-family: monospace; font-variant-numeric: tabular-nums; dominant-baseline: middle; }
.lc-grid line { stroke: rgba(255,255,255,.04); stroke-width: 1; }
.lc-controls { padding: 10px 12px 14px; background: rgba(255,255,255,.02); border-top: 1px solid rgba(255,255,255,.05); }
.lc-fields { display: flex; gap: 8px; margin-bottom: 10px; }
.lc-field { flex: 1; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 8px 10px; }
.lc-field-label { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.35); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 3px; }
.lc-field-val { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.9); }
.lc-payout { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding: 0 2px; font-size: 11.5px; color: rgba(255,255,255,.38); }
.lc-payout-pct { font-size: 13px; font-weight: 800; color: var(--up); text-shadow: 0 0 8px var(--up-glow); }
.lc-btns { display: flex; gap: 8px; }
.lc-btn {
    flex: 1; height: 48px; border: none; border-radius: 14px;
    font-family: var(--font); font-size: 14px; font-weight: 800; letter-spacing: .05em;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px;
    transition: transform .12s var(--ease), filter .12s; position: relative; overflow: hidden;
}
.lc-btn::after { content: ""; position: absolute; inset: 0; border-radius: 14px; background: radial-gradient(circle at center, rgba(255,255,255,.25) 0%, transparent 70%); opacity: 0; transition: opacity .3s; }
.lc-btn:active { transform: scale(.95); }
.lc-btn:active::after { opacity: 1; }
.lc-btn svg { width: 14px; height: 14px; }
.lc-btn-buy  { background: linear-gradient(135deg, #00e5a0 0%, #00b87a 100%); color: #000; box-shadow: 0 4px 18px rgba(0,229,160,.4); }
.lc-btn-sell { background: linear-gradient(135deg, #ff4b6e 0%, #cc2d52 100%); color: #fff; box-shadow: 0 4px 18px rgba(255,75,110,.4); }
.lc-timer-bar { height: 3px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; margin-bottom: 10px; }
.lc-timer-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--up)); box-shadow: 0 0 6px var(--accent-glow); transition: width .9s linear; }

/* ── INVITES ─────────────────────────────────────────────────── */
/* (карточки уже описаны выше) */

/* ── ASSET PRICE / TICKER ────────────────────────────────────── */
.asset-price { font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.asset-ticker { font-size: 12px; color: var(--muted); }

/* ── POPULAR CHIPS (asset sheet) ────────────────────────────── */
.chip {
    display: inline-flex; align-items: center;
    padding: 7px 16px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.07);
    color: var(--text2);
    font-family: var(--font); font-size: 13px; font-weight: 600;
    white-space: nowrap; cursor: pointer;
    transition: background .18s, color .18s, border-color .18s, transform .1s;
}
.chip:active { transform: scale(.94); background: rgba(255,255,255,.12); }

/* ── ASSET LIST ROWS ─────────────────────────────────────────── */
.asset-row {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    color: var(--text); font-family: var(--font); cursor: pointer;
    text-align: left;
    transition: background .15s, border-color .15s, transform .1s;
    margin-bottom: 4px;
}
.asset-row:active { transform: scale(.98); background: rgba(255,255,255,.08); }
.asset-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.asset-name { font-size: 15px; font-weight: 700; color: var(--text); }
.asset-right { display: flex; align-items: center; gap: 8px; }
.asset-chg { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.asset-chg.up { color: var(--up); }
.asset-chg.down { color: var(--down); }

/* ── REDUCED MOTION ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .wa-aura, .wa-halo { display: none; }
    #welcome-art.played .wa-logo-img { animation: logoIn .5s ease both; }
    .tabbar-pill { transition: none; }
    .lc-timer-fill { transition: none; }
}