/* ============================================================
   GPTrade Hero — styles.css (v0.2.0 / Phase 1.5)
   Палитра под референс forex.purple: тёмно-фиолетовый фон,
   фиолетовый accent, оранжевая "+" пополнения, жёлтый цинник.
   Префикс классов: .gpth-
   ============================================================ */

:root {
    --bg-base:        #1A1535;
    --bg-panel:       #251E45;
    --bg-surface:     #2D2552;
    --bg-elevated:    #3A2F66;

    --accent:         #7C4DFF;
    --accent-2:       #9B6BFF;
    --accent-glow:    rgba(124, 77, 255, 0.45);
    --ai:             #B89AFF;

    --orange:         #FF8C42;
    --orange-2:       #FFA755;
    --orange-glow:    rgba(255, 140, 66, 0.45);
    --yellow:         #FFB627;

    --up:             #00C896;
    --up-glow:        rgba(0, 200, 150, 0.35);
    --down:           #FF4B4B;
    --down-glow:      rgba(255, 75, 75, 0.35);
    --warn:           #FFB627;

    --text:           #FFFFFF;
    --text-2:         #E2D9F5;
    --text-muted:     #9B92B5;
    --text-dim:       #6E658B;

    --border:         rgba(255, 255, 255, 0.06);
    --border-strong:  rgba(255, 255, 255, 0.12);

    --radius-card:    14px;
    --radius-btn:     12px;
    --radius-pill:    999px;

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

    --topbar-h:       56px;
    --infobar-h:      54px;

    --shadow-card:    0 4px 24px rgba(0, 0, 0, 0.25);
    --shadow-glow:    0 0 24px var(--accent-glow);
}

/* ============================================================ RESET / BASE */
*, *::before, *::after { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0;
    background: var(--bg-base);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
}
body { user-select: none; -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
input, textarea { font-family: inherit; color: inherit; }
svg.gpth-icon {
    width: 22px; height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* Глобальное мягкое сияние сверху */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 30% at 50% 0%, rgba(124, 77, 255, 0.16), transparent 70%),
        radial-gradient(ellipse 50% 30% at 50% 100%, rgba(155, 107, 255, 0.06), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ============================================================ SPLASH */
.gpth-splash {
    position: fixed; inset: 0;
    background: var(--bg-base);
    z-index: 1000;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 16px;
    padding: 24px;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.gpth-splash[hidden] { opacity: 0; visibility: hidden; pointer-events: none; }
.gpth-splash__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.gpth-splash__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    opacity: 0.45;
}
.gpth-splash__orb--1 { width: 280px; height: 280px; background: var(--accent); top: 10%; left: -60px; animation: orb-float 8s ease-in-out infinite; }
.gpth-splash__orb--2 { width: 320px; height: 320px; background: var(--accent-2); bottom: 5%; right: -80px; animation: orb-float 10s ease-in-out infinite reverse; }
.gpth-splash__orb--3 { width: 200px; height: 200px; background: var(--ai); top: 50%; left: 30%; animation: orb-float 12s ease-in-out infinite; }
@keyframes orb-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -20px) scale(1.1); }
}
.gpth-splash__logo-wrap {
    position: relative;
    width: 96px; height: 96px;
}
.gpth-splash__logo-ring {
    position: absolute;
    inset: -10px;
    border-radius: 28px;
    border: 1.5px solid var(--accent);
    opacity: 0;
    pointer-events: none;
    animation: gpth-logo-ring 2.4s ease-out infinite;
}
.gpth-splash__logo-ring--2 { animation-delay: 0.8s; }
.gpth-splash__logo-ring--3 { animation-delay: 1.6s; }
@keyframes gpth-logo-ring {
    0% { transform: scale(0.92); opacity: 0.65; }
    100% { transform: scale(1.55); opacity: 0; }
}
.gpth-splash__logo {
    position: relative;
    width: 100%; height: 100%;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 0 60px var(--accent-glow), 0 16px 40px rgba(0, 0, 0, 0.45);
    animation: gpth-logo-float 2.5s ease-in-out infinite;
}
.gpth-splash__logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gpth-splash__logo-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 38%,
        rgba(255, 255, 255, 0.32) 48%,
        rgba(255, 255, 255, 0.1) 52%,
        transparent 62%
    );
    background-size: 220% 100%;
    animation: gpth-logo-shine 3.2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes gpth-logo-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-5px) scale(1.04); }
}
@keyframes gpth-logo-shine {
    0%, 18% { background-position: 130% 0; }
    55% { background-position: -30% 0; }
    100% { background-position: -30% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .gpth-splash__logo-ring,
    .gpth-splash__logo,
    .gpth-splash__logo-shine { animation: none; }
}
.gpth-splash__brand {
    position: relative;
    font-size: 28px; font-weight: 900;
    letter-spacing: -0.5px;
    background: linear-gradient(90deg, #fff, var(--ai));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-top: 8px;
}
.gpth-splash__tagline { position: relative; color: var(--text-muted); font-size: 14px; }
.gpth-splash__progress {
    position: relative;
    width: 240px; height: 4px;
    background: var(--bg-surface);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 16px;
}
.gpth-splash__progress-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--ai));
    border-radius: 2px;
    transition: width 0.4s ease;
    box-shadow: 0 0 12px var(--accent-glow);
}
.gpth-splash__checks {
    position: relative;
    display: flex; flex-direction: column;
    gap: 8px; margin-top: 12px;
    font-size: 13px; color: var(--text-muted);
}
.gpth-splash__check { display: flex; align-items: center; gap: 8px; opacity: 0.45; transition: opacity 0.3s, color 0.3s; }
.gpth-splash__check--done { opacity: 1; color: var(--text-2); }
.gpth-splash__check-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--text-muted);
    transition: background 0.3s, box-shadow 0.3s;
}
.gpth-splash__check--done .gpth-splash__check-dot {
    background: var(--up);
    box-shadow: 0 0 10px var(--up-glow);
}

/* ============================================================ APP LAYOUT */
.gpth-app {
    position: relative;
    z-index: 1;
    display: flex; flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* ============================================================ TOP BAR */
.gpth-topbar {
    position: relative;
    height: var(--topbar-h);
    background: var(--bg-base);
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 12px;
    flex-shrink: 0;
    z-index: 10;
}
.gpth-topbar__menu,
.gpth-topbar__avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--bg-panel);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-2);
    transition: background 0.15s, transform 0.1s;
    flex-shrink: 0;
}
.gpth-topbar__menu:active,
.gpth-topbar__avatar:active { background: var(--bg-surface); transform: scale(0.94); }
.gpth-topbar__avatar {
    background: linear-gradient(135deg, #C8B6FF, #9B6BFF);
    color: #2D2552;
}
.gpth-topbar__balance {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
}
.gpth-topbar__balance-amount {
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.3px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.gpth-topbar__balance-plus {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--orange), var(--orange-2));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 14px var(--orange-glow), 0 2px 6px rgba(0,0,0,0.3);
    transition: transform 0.1s;
}
.gpth-topbar__balance-plus:active { transform: scale(0.92); }
.gpth-topbar__balance-plus .gpth-icon { width: 16px; height: 16px; stroke-width: 3; }
.gpth-topbar__balance--flash-up { animation: balance-flash-up 0.6s ease; }
.gpth-topbar__balance--flash-down { animation: balance-flash-down 0.6s ease; }
@keyframes balance-flash-up {
    0% { transform: scale(1); color: var(--text); }
    40% { transform: scale(1.1); color: var(--up); text-shadow: 0 0 16px var(--up-glow); }
    100% { transform: scale(1); }
}
@keyframes balance-flash-down {
    0% { transform: scale(1); color: var(--text); }
    40% { transform: scale(0.95); color: var(--down); text-shadow: 0 0 16px var(--down-glow); }
    100% { transform: scale(1); }
}

/* ============================================================ INFO BAR */
.gpth-infobar {
    height: var(--infobar-h);
    background: var(--bg-panel);
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 6px 14px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    z-index: 9;
}
.gpth-infobar__item {
    flex: 1;
    background: var(--bg-surface);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    text-align: left;
    color: var(--text-2);
    transition: background 0.15s;
    min-width: 0;
}
.gpth-infobar__item:active { background: var(--bg-elevated); }
.gpth-infobar__icon {
    width: 18px; height: 18px;
    color: var(--accent-2);
    flex-shrink: 0;
}
.gpth-infobar__text {
    min-width: 0;
    overflow: hidden;
}
.gpth-infobar__title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--text-2);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gpth-infobar__sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================ SCREENS WRAPPER */
.gpth-screens {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0;
}
.gpth-screen {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-base);
    min-height: 0;
}
.gpth-screen[hidden] { display: none; }
.gpth-screen--overlay {
    z-index: 20;
}
.gpth-screen__scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px;
    padding-bottom: 32px;
}

.gpth-overlay-header {
    height: 56px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    background: var(--bg-base);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.gpth-overlay-header__back {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--bg-panel);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-2);
}
.gpth-overlay-header__back:active { background: var(--bg-surface); }
.gpth-overlay-header__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

/* ============================================================ DRAWER */
.gpth-drawer {
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    visibility: hidden;
}
.gpth-drawer--open {
    pointer-events: auto;
    visibility: visible;
}
.gpth-drawer__overlay {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.gpth-drawer--open .gpth-drawer__overlay { opacity: 1; }
.gpth-drawer__panel {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 78%;
    max-width: 320px;
    background: var(--bg-panel);
    border-right: 1px solid var(--border-strong);
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.4);
}
.gpth-drawer--open .gpth-drawer__panel { transform: translateX(0); }
.gpth-drawer__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 18px 18px;
    background: linear-gradient(135deg, rgba(124,77,255,0.20), rgba(155,107,255,0.06));
    border-bottom: 1px solid var(--border);
}
.gpth-drawer__avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #C8B6FF, #9B6BFF);
    color: #2D2552;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.gpth-drawer__user-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
}
.gpth-drawer__user-balance {
    font-size: 13px;
    color: var(--accent-2);
    margin-top: 2px;
    font-weight: 600;
}
.gpth-drawer__list {
    list-style: none;
    margin: 0;
    padding: 12px 0;
    flex: 1;
    overflow-y: auto;
}
.gpth-drawer__item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    color: var(--text-2);
    font-weight: 600;
    font-size: 15px;
    text-align: left;
    transition: background 0.15s;
}
.gpth-drawer__item:active,
.gpth-drawer__item--active { background: var(--bg-surface); }
.gpth-drawer__item--accent {
    color: var(--accent-2);
}
.gpth-drawer__item--accent .gpth-icon {
    color: var(--accent-2);
}
.gpth-drawer__foot {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 11px;
}

/* ============================================================ TRADE: PAIR BAR */
.gpth-trade__pairbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-base);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.gpth-pair-select {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    padding: 6px 10px 6px 8px;
    flex-shrink: 0;
}
.gpth-pair-select__flag {
    position: relative;
    width: 22px; height: 16px;
    flex-shrink: 0;
}
.gpth-pair-select__flag svg {
    position: absolute;
    width: 16px; height: 12px;
    border-radius: 2px;
    overflow: hidden;
}
.gpth-pair-select__flag svg:first-child { top: 0; left: 0; }
.gpth-pair-select__flag svg:last-child  { bottom: 0; right: 0; }
.gpth-pair-select__symbol {
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
}
.gpth-pair-select__chev { width: 14px; height: 14px; color: var(--text-muted); }

.gpth-trade__price-block {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 8px;
    justify-content: flex-end;
    overflow: hidden;
    padding-left: 4px;
}
.gpth-trade__price {
    font-weight: 800;
    font-size: 20px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.gpth-trade__change {
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}

.gpth-trade__school-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 18px var(--accent-glow), 0 4px 10px rgba(0,0,0,0.3);
    flex-shrink: 0;
    transition: transform 0.1s;
    position: relative;
}
.gpth-trade__school-btn:active { transform: scale(0.94); }
.gpth-trade__school-btn .gpth-icon { width: 22px; height: 22px; }
.gpth-trade__school-btn::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    opacity: 0.35;
    z-index: -1;
    animation: school-pulse 2s ease-in-out infinite;
}
@keyframes school-pulse {
    0%, 100% { transform: scale(1); opacity: 0.35; }
    50% { transform: scale(1.18); opacity: 0; }
}

/* ============================================================ TRADE: CHART */
.gpth-trade__chart-wrap {
    position: relative;
    flex: 1;
    min-height: 200px;
    background: var(--bg-base);
    overflow: hidden;
}
.gpth-chart-loader {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 14, 26, 0.88);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}
.gpth-chart-loader--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.gpth-chart-loader__box {
    text-align: center;
    padding: 24px 28px;
    max-width: 280px;
}
.gpth-chart-loader__spinner {
    width: 44px;
    height: 44px;
    margin: 0 auto 16px;
    border-radius: 50%;
    border: 3px solid rgba(124, 77, 255, 0.2);
    border-top-color: var(--accent-2);
    border-right-color: rgba(139, 92, 246, 0.6);
    animation: gpth-chart-spin 0.85s linear infinite;
    box-shadow: 0 0 20px var(--accent-glow);
}
@keyframes gpth-chart-spin {
    to { transform: rotate(360deg); }
}
.gpth-chart-loader__text {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 6px;
}
.gpth-chart-loader__sub {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}
.gpth-trade__chart-wrap--loading .gpth-trade__chart {
    opacity: 0.35;
}
.gpth-trade__chart {
    display: block;
    width: 100%;
    height: 100%;
    transition: opacity 0.35s ease;
}
.gpth-trade__chart-overlay {
    position: absolute; inset: 0;
    pointer-events: none;
}
.gpth-trade__chart-tools {
    position: absolute;
    top: 12px; left: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
}
.gpth-trade__chart-tool {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(124, 77, 255, 0.20);
    border: 1px solid rgba(124, 77, 255, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--ai);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.gpth-trade__chart-tool:active { background: rgba(124, 77, 255, 0.40); }
.gpth-trade__chart-tool .gpth-icon { width: 16px; height: 16px; }

.gpth-trade__realdata {
    position: absolute;
    bottom: 10px;
    left: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 7px 9px;
    background: var(--bg-panel);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 500;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.gpth-trade__realdata .gpth-icon { width: 14px; height: 14px; color: var(--accent-2); }
.gpth-trade__realdata--live {
    border-color: rgba(0, 200, 150, 0.35);
    color: var(--up);
}
.gpth-trade__realdata--sim {
    border-color: rgba(245, 158, 11, 0.35);
    color: var(--warn);
}

/* ============================================================ TRADE: ORDER PANEL (СТОП) */
.gpth-trade__order {
    background: var(--bg-panel);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}
.gpth-trade__order--active {
    max-height: 80px;
}
.gpth-trade__order-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    animation: order-slide-in 0.45s cubic-bezier(0.34, 1.26, 0.64, 1);
}
@keyframes order-slide-in {
    from { transform: translateY(-30%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.gpth-trade__order-dir {
    width: 36px; height: 36px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.gpth-trade__order-dir--up { background: linear-gradient(135deg, #00E0A8, #00A07A); box-shadow: 0 4px 12px var(--up-glow); }
.gpth-trade__order-dir--down { background: linear-gradient(135deg, #FF5C5C, #C92525); box-shadow: 0 4px 12px var(--down-glow); }
.gpth-trade__order-pair {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex-shrink: 0;
}
.gpth-trade__order-pair-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
}
.gpth-trade__order-pair-time {
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.gpth-trade__order-countdown {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255, 182, 39, 0.18);
    color: var(--yellow);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
}
.gpth-trade__order-countdown::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--yellow);
    animation: pulse-dot 1.0s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.7); }
}
.gpth-trade__order-profit {
    flex: 1;
    text-align: center;
    font-weight: 800;
    font-size: 20px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    transition: color 0.25s ease, transform 0.25s ease;
}
.gpth-trade__order-profit--up { color: var(--up); transform: scale(1.05); }
.gpth-trade__order-profit--down { color: var(--down); }
.gpth-trade__order-stop {
    padding: 12px 22px;
    background: linear-gradient(180deg, #fff 0%, #E8E4F5 100%);
    color: #1A1535;
    font-weight: 800;
    font-size: 14px;
    border-radius: var(--radius-btn);
    letter-spacing: 0.5px;
    box-shadow: 0 4px 18px rgba(255,255,255,0.30), inset 0 1px 0 rgba(255,255,255,0.6);
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
    flex-shrink: 0;
}
.gpth-trade__order-stop:hover { box-shadow: 0 6px 24px rgba(255,255,255,0.40); }
.gpth-trade__order-stop:active { transform: scale(0.93); }

/* ============================================================ TRADE: MAIN CTA (DOWN / AUTO / UP) */
.gpth-trade__cta {
    display: grid;
    grid-template-columns: 1fr 1.35fr 1fr;
    gap: 8px;
    padding: 12px 14px 10px;
    background: var(--bg-panel);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.gpth-cta {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 6px;
    border-radius: 16px;
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.6px;
    font-size: 14px;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s ease,
                filter 0.25s ease;
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
}
.gpth-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -1;
    background: inherit;
    filter: blur(14px);
    opacity: 0.55;
    transform: scale(0.85);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.gpth-cta:hover { transform: translateY(-2px); filter: brightness(1.08); }
.gpth-cta:hover::before { opacity: 0.85; transform: scale(1); }
.gpth-cta:active { transform: scale(0.94); transition-duration: 0.1s; }
.gpth-cta__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gpth-cta:active .gpth-cta__icon { transform: scale(1.15); }
.gpth-cta__icon .gpth-icon { width: 20px; height: 20px; stroke-width: 2.5; }
.gpth-cta__label { line-height: 1; }
.gpth-cta__sub {
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.5px;
    opacity: 0.85;
    text-transform: uppercase;
    margin-top: 1px;
}

.gpth-cta--up {
    background: linear-gradient(135deg, #00E0A8 0%, #00A07A 100%);
    box-shadow: 0 6px 20px rgba(0, 200, 150, 0.40), inset 0 1px 0 rgba(255,255,255,0.20);
}
.gpth-cta--down {
    background: linear-gradient(135deg, #FF5C5C 0%, #C92525 100%);
    box-shadow: 0 6px 20px rgba(255, 75, 75, 0.40), inset 0 1px 0 rgba(255,255,255,0.20);
}
.gpth-cta--auto {
    background: linear-gradient(135deg, #B89AFF 0%, #6F4FB3 100%);
    box-shadow: 0 6px 22px rgba(124, 77, 255, 0.50), inset 0 1px 0 rgba(255,255,255,0.25);
}
.gpth-cta--auto::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -10%;
    width: 60%;
    height: 200%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-25deg);
    animation: shine-sweep 3.2s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}
@keyframes shine-sweep {
    0%, 60%, 100% { transform: translateX(-180%) skewX(-25deg); }
    80% { transform: translateX(220%) skewX(-25deg); }
}

/* Ripple effect (общий для CTA и кнопок-пресетов) */
.gpth-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transform: scale(0);
    animation: ripple-anim 0.6s ease-out;
    pointer-events: none;
    z-index: 2;
}
@keyframes ripple-anim {
    to { transform: scale(4); opacity: 0; }
}

/* ============================================================ BOTTOM SHEET (Trade Config) */
.gpth-bsheet {
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    visibility: hidden;
}
.gpth-bsheet--open {
    pointer-events: auto;
    visibility: visible;
}
.gpth-bsheet__overlay {
    position: absolute; inset: 0;
    background: rgba(8, 6, 22, 0.65);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.gpth-bsheet--open .gpth-bsheet__overlay { opacity: 1; }
.gpth-bsheet__panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, #2D2552 0%, #1E1840 100%);
    border-top: 1px solid rgba(124, 77, 255, 0.30);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55);
    padding: 8px 18px 22px;
    transform: translateY(100%);
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 92vh;
    overflow-y: auto;
}
.gpth-bsheet--open .gpth-bsheet__panel { transform: translateY(0); }
.gpth-bsheet__handle {
    width: 42px; height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    margin: 6px auto 14px;
}
.gpth-bsheet__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.gpth-bsheet__title-block { flex: 1; min-width: 0; }
.gpth-bsheet__direction {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.gpth-bsheet__direction-icon {
    width: 28px; height: 28px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
}
.gpth-bsheet__direction-icon .gpth-icon { width: 18px; height: 18px; stroke-width: 2.5; }
.gpth-bsheet__sub {
    color: var(--text-muted);
    font-size: 13px;
    margin-top: 4px;
}
.gpth-bsheet__close {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s, color 0.2s;
}
.gpth-bsheet__close:active { background: rgba(255, 255, 255, 0.16); color: #fff; }
.gpth-bsheet__close .gpth-icon { width: 18px; height: 18px; }

.gpth-bsheet__body { padding: 0 0 6px; }
.gpth-bsheet__section { margin-bottom: 20px; }
.gpth-bsheet__section--hidden { display: none; }
.gpth-bsheet__section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.gpth-bsheet__amount {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 8px;
    margin-bottom: 10px;
}
.gpth-bsheet__amount-btn {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(124, 77, 255, 0.20);
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.18s;
}
.gpth-bsheet__amount-btn:active {
    transform: scale(0.88);
    background: var(--accent);
}
.gpth-bsheet__amount-value {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.3px;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.gpth-bsheet__presets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.gpth-bsheet__preset {
    padding: 9px 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    color: var(--text-2);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: all 0.18s ease;
}
.gpth-bsheet__preset:active {
    transform: scale(0.95);
}
.gpth-bsheet__preset--active {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px var(--accent-glow);
}
.gpth-bsheet__preset--disabled {
    opacity: 0.35;
    pointer-events: none;
}

.gpth-bsheet__duration {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.gpth-bsheet__duration-btn {
    padding: 12px 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    color: var(--text-2);
    text-align: center;
    transition: all 0.2s ease;
}
.gpth-bsheet__duration-btn:active { transform: scale(0.96); }
.gpth-bsheet__duration-btn--active {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 16px var(--accent-glow);
    transform: translateY(-2px);
}
.gpth-bsheet__duration-time {
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}
.gpth-bsheet__duration-payout {
    font-size: 11px;
    margin-top: 4px;
    opacity: 0.8;
}

.gpth-bsheet__forecast {
    background: rgba(124, 77, 255, 0.08);
    border: 1px solid rgba(124, 77, 255, 0.25);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.gpth-bsheet__forecast-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--text-2);
}
.gpth-bsheet__forecast-row strong {
    font-size: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.gpth-bsheet__footer { padding-bottom: env(safe-area-inset-bottom); }
.gpth-bsheet__confirm {
    width: 100%;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.5px;
    box-shadow: 0 8px 24px var(--accent-glow);
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s;
    position: relative;
    overflow: hidden;
}
.gpth-bsheet__confirm:hover { filter: brightness(1.1); }
.gpth-bsheet__confirm:active { transform: scale(0.97); }
.gpth-bsheet__confirm--up { background: linear-gradient(135deg, #00E0A8, #00A07A); box-shadow: 0 8px 24px var(--up-glow); }
.gpth-bsheet__confirm--down { background: linear-gradient(135deg, #FF5C5C, #C92525); box-shadow: 0 8px 24px var(--down-glow); }
.gpth-bsheet__confirm--disabled {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    box-shadow: none;
    pointer-events: none;
}

/* ============================================================ PAIR TABS (внизу) */
.gpth-pair-tabs {
    display: flex;
    gap: 4px;
    padding: 6px 8px;
    background: var(--bg-base);
    border-top: 1px solid var(--border);
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    flex-shrink: 0;
}
.gpth-pair-tabs::-webkit-scrollbar { display: none; }
.gpth-pair-tab {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 6px 10px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-2);
    font-size: 12px;
    min-width: 110px;
    position: relative;
    transition: all 0.15s;
}
.gpth-pair-tab--active {
    background: linear-gradient(135deg, rgba(124,77,255,0.20), rgba(155,107,255,0.10));
    border-color: rgba(124,77,255,0.45);
    color: var(--text);
}
.gpth-pair-tab--active::before {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 30%;
    height: 2px;
    background: var(--yellow);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(255, 182, 39, 0.6);
}
.gpth-pair-tab__flag {
    position: relative;
    width: 18px; height: 14px;
    flex-shrink: 0;
}
.gpth-pair-tab__flag svg {
    position: absolute;
    width: 14px; height: 10px;
    border-radius: 2px;
    overflow: hidden;
}
.gpth-pair-tab__flag svg:first-child { top: 0; left: 0; }
.gpth-pair-tab__flag svg:last-child  { bottom: 0; right: 0; }
.gpth-pair-tab__info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}
.gpth-pair-tab__symbol {
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gpth-pair-tab__sub {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
}
.gpth-pair-tab__add {
    flex-shrink: 0;
    width: 44px;
    min-width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 140, 66, 0.25), rgba(255, 140, 66, 0.08));
    border: 1px solid rgba(255, 140, 66, 0.45);
    color: #FF8C42;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s, background 0.15s;
}
.gpth-pair-tab__add .gpth-icon { width: 20px; height: 20px; stroke-width: 2.5; }
.gpth-pair-tab__add:active {
    transform: scale(0.94);
    background: rgba(255, 140, 66, 0.35);
}

/* ============================================================ QUIZ */
.gpth-screen--quiz {
    background: var(--bg-base);
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.gpth-screen--quiz .gpth-overlay-header { flex-shrink: 0; }
.gpth-quiz {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.gpth-quiz__chat {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.gpth-quiz__dock {
    background: var(--bg-panel);
    border-top: 1px solid var(--border);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 50vh;
    overflow-y: auto;
}

.gpth-chat-msg {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 100%;
    animation: gpth-chat-in 0.28s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}
@keyframes gpth-chat-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.gpth-chat-msg--user {
    flex-direction: row-reverse;
    align-self: flex-end;
}
.gpth-chat-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 2px 8px var(--accent-glow);
}
.gpth-chat-avatar .gpth-icon { width: 18px; height: 18px; }
.gpth-chat-bubble {
    max-width: calc(100% - 44px);
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.45;
}
.gpth-chat-bubble--ai {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
}
.gpth-chat-bubble--user {
    background: linear-gradient(135deg, rgba(124,77,255,0.35), rgba(124,77,255,0.15));
    border: 1px solid rgba(124,77,255,0.4);
    border-bottom-right-radius: 4px;
    color: var(--text);
}
.gpth-chat-bubble--win {
    border-color: rgba(0, 200, 150, 0.45);
    background: rgba(0, 200, 150, 0.12);
}
.gpth-chat-bubble--loss {
    border-color: rgba(255, 75, 75, 0.4);
    background: rgba(255, 75, 75, 0.1);
}
.gpth-chat-bubble--dots {
    display: flex; gap: 5px; padding: 14px 18px;
}
.gpth-chat-bubble--dots span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ai);
    animation: gpth-dot 0.9s ease-in-out infinite;
}
.gpth-chat-bubble--dots span:nth-child(2) { animation-delay: 0.15s; }
.gpth-chat-bubble--dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes gpth-dot {
    0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
    40% { opacity: 1; transform: scale(1); }
}
.gpth-chat-name {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--ai);
    margin-bottom: 4px;
}
.gpth-chat-text { word-break: break-word; }

.gpth-quiz-chips {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gpth-quiz-chip {
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border-radius: var(--radius-btn);
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    color: var(--text);
    font-size: 14px;
    line-height: 1.35;
    transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.gpth-quiz-chip:active:not(:disabled) {
    transform: scale(0.98);
    border-color: var(--accent);
    background: rgba(124, 77, 255, 0.18);
}
.gpth-quiz-chip:disabled { opacity: 0.5; }

.gpth-quiz-btn {
    width: 100%;
    padding: 14px;
    border-radius: var(--radius-btn);
    font-weight: 700;
    font-size: 15px;
    border: none;
    transition: transform 0.12s, opacity 0.15s;
}
.gpth-quiz-btn:active { transform: scale(0.98); }
.gpth-quiz-btn--primary {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    box-shadow: 0 4px 16px var(--accent-glow);
}
.gpth-quiz-btn--ghost {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-2);
}

.gpth-settings-disclaimer {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.28);
    margin-bottom: 12px;
}
.gpth-settings-disclaimer__title {
    font-weight: 700;
    font-size: 13px;
    color: var(--warn);
    margin-bottom: 6px;
}
.gpth-settings-disclaimer__text {
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-2);
}

/* ============================================================ NEWS */
.gpth-news-meta {
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-muted);
    margin-bottom: 12px;
    padding: 0 2px;
}
.gpth-news-loading {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-muted);
}
.gpth-news-card {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 14px 16px;
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.15s, transform 0.12s;
}
.gpth-news-card:active {
    transform: scale(0.99);
    border-color: rgba(124, 77, 255, 0.45);
}
.gpth-news-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.gpth-news-card__source {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--accent-2);
    background: rgba(124, 77, 255, 0.15);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}
.gpth-news-card__time {
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.gpth-news-card__title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 4px;
}
.gpth-news-card__summary {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted);
    margin: 0;
}

/* ============================================================ COMMON COMPONENTS */
.gpth-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin: 20px 0 10px;
}
.gpth-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 14px;
}

/* ============================================================ HOME COMPONENTS */
.gpth-balance-card {
    background: linear-gradient(135deg, rgba(124,77,255,0.20), rgba(155,107,255,0.08));
    border: 1px solid rgba(124,77,255,0.30);
    text-align: center;
    padding: 20px;
    margin-bottom: 12px;
}
.gpth-balance-card__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.gpth-balance-card__amount {
    font-size: 36px;
    font-weight: 900;
    margin: 8px 0;
    background: linear-gradient(90deg, #fff, var(--ai));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.gpth-balance-card__hint { font-size: 12px; color: var(--text-muted); }

.gpth-quiz-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding: 14px 16px;
    width: 100%;
    background: linear-gradient(135deg, rgba(184,154,255,0.18), rgba(124,77,255,0.08));
    border: 1px solid rgba(184,154,255,0.35);
    margin-bottom: 12px;
    color: var(--text);
    transition: transform 0.15s;
}
.gpth-quiz-cta:active { transform: scale(0.98); }
.gpth-quiz-cta--locked { opacity: 0.55; background: var(--bg-panel); border-color: var(--border); }
.gpth-quiz-cta__icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    box-shadow: 0 4px 12px var(--accent-glow);
    flex-shrink: 0;
}
.gpth-quiz-cta__title { font-weight: 700; font-size: 14px; }
.gpth-quiz-cta__sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.gpth-top-asset {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 14px 16px;
    text-align: left;
    color: var(--text);
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    transition: transform 0.1s, border-color 0.15s;
}
.gpth-top-asset:active { transform: scale(0.99); border-color: var(--accent); }
.gpth-top-asset__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.gpth-top-asset__symbol { font-weight: 800; font-size: 15px; }
.gpth-top-asset__type {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--bg-surface);
    border: 1px solid var(--border);
}
.gpth-top-asset__name { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.gpth-top-asset__row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.gpth-top-asset__price { font-weight: 800; font-size: 22px; font-variant-numeric: tabular-nums; }
.gpth-top-asset__change { font-weight: 700; font-size: 13px; }
.gpth-top-asset__chart { margin: 0 -2px -4px; }

.gpth-open-order {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
}
.gpth-open-order__dir {
    width: 36px; height: 36px;
    border-radius: 12px;
    background: var(--bg-surface);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.gpth-open-order__body { flex: 1; }
.gpth-open-order__pair { font-weight: 700; font-size: 14px; }
.gpth-open-order__sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ============================================================ MARKETS */
.gpth-search {
    position: relative;
    margin-bottom: 12px;
}
.gpth-search__icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}
.gpth-search__input {
    width: 100%;
    height: 44px;
    padding: 0 16px 0 44px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    color: var(--text);
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s;
}
.gpth-search__input:focus { border-color: var(--accent); }

.gpth-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin-bottom: 12px;
    padding-bottom: 4px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.gpth-tabs::-webkit-scrollbar { display: none; }
.gpth-tabs__btn {
    flex-shrink: 0;
    padding: 8px 16px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s;
}
.gpth-tabs__btn--active {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px var(--accent-glow);
}

.gpth-market-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-bottom: 8px;
    padding: 12px 14px;
    text-align: left;
    color: var(--text);
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    transition: transform 0.1s, border-color 0.15s;
}
.gpth-market-row:active { transform: scale(0.99); border-color: var(--accent); }
.gpth-market-row__main { flex: 1; min-width: 0; }
.gpth-market-row__symbol { font-weight: 800; font-size: 15px; }
.gpth-market-row__name {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gpth-market-row__chart { flex-shrink: 0; opacity: 0.9; }
.gpth-market-row__side { text-align: right; flex-shrink: 0; min-width: 88px; }
.gpth-market-row__price { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.gpth-market-row__change { font-size: 12px; font-weight: 700; margin-top: 2px; }

/* ============================================================ ACCOUNT */
.gpth-account-profile {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 16px;
}
.gpth-account-profile__avatar {
    width: 56px; height: 56px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    box-shadow: 0 4px 16px var(--accent-glow);
    flex-shrink: 0;
}
.gpth-account-profile__avatar svg { width: 26px; height: 26px; }
.gpth-account-profile__body { flex: 1; min-width: 0; }
.gpth-account-profile__rank {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.gpth-account-profile__name { font-size: 20px; font-weight: 800; margin-top: 2px; }
.gpth-account-profile__progress-wrap { margin-top: 10px; }
.gpth-account-profile__progress {
    height: 6px;
    background: var(--bg-surface);
    border-radius: 999px;
    overflow: hidden;
}
.gpth-account-profile__progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--ai));
    border-radius: 999px;
    transition: width 0.4s;
}
.gpth-account-profile__progress-label { font-size: 11px; color: var(--text-muted); margin-top: 5px; }

.gpth-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.gpth-stat { padding: 14px; text-align: left; }
.gpth-stat__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); }
.gpth-stat__value { font-size: 20px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }

.gpth-history-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
}
.gpth-history-row__icon {
    width: 36px; height: 36px;
    border-radius: 12px;
    background: var(--bg-surface);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.gpth-history-row__body { flex: 1; min-width: 0; }
.gpth-history-row__pair { font-weight: 700; font-size: 14px; }
.gpth-history-row__sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.gpth-history-row__profit { text-align: right; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.gpth-history-row__profit-tag {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
    font-weight: 600;
}

/* ============================================================ SETTINGS */
.gpth-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding: 14px 16px;
}
.gpth-settings-row__title { font-weight: 600; font-size: 14px; }
.gpth-toggle {
    position: relative;
    width: 48px; height: 28px;
    border-radius: 999px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    transition: background 0.2s;
    flex-shrink: 0;
}
.gpth-toggle--on { background: var(--accent); border-color: var(--accent); }
.gpth-toggle__knob {
    position: absolute;
    top: 3px; left: 3px;
    width: 20px; height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.gpth-toggle--on .gpth-toggle__knob { transform: translateX(20px); }
.gpth-btn-text {
    background: none;
    color: var(--accent-2);
    font-weight: 600;
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 8px;
}
.gpth-btn-text--danger { color: var(--down); }

/* ============================================================ PLACEHOLDER */
.gpth-placeholder {
    background: var(--bg-panel);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-card);
    padding: 24px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 10px;
}
.gpth-placeholder--muted { background: transparent; border-color: var(--border); }
.gpth-placeholder--small { padding: 14px; font-size: 12px; }

/* ============================================================ FX LAYER */
.gpth-fx-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 500;
    overflow: hidden;
}
.gpth-fx-coin {
    position: absolute;
    font-size: 13px;
    font-weight: 800;
    padding: 5px 11px;
    border-radius: var(--radius-pill);
    transform: translate(-50%, -50%);
    animation: coin-fly 1.2s cubic-bezier(0.34, 1.26, 0.64, 1) forwards;
    will-change: transform, opacity;
    pointer-events: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.gpth-fx-coin--up   { color: #fff; background: linear-gradient(135deg, #00E0A8, #00A07A); box-shadow: 0 0 22px var(--up-glow), 0 2px 6px rgba(0,0,0,0.25); }
.gpth-fx-coin--down { color: #fff; background: linear-gradient(135deg, #FF5C5C, #C92525); box-shadow: 0 0 22px var(--down-glow), 0 2px 6px rgba(0,0,0,0.25); }
@keyframes coin-fly {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.45) rotate(-8deg); }
    18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.2) rotate(2deg); }
    35%  { transform: translate(-50%, -50%) scale(1) rotate(0); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.55) rotate(0); }
}

/* Toast уведомления (открытие, win, loss) */
.gpth-fx-toast {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px 12px 14px;
    border-radius: 14px;
    background: rgba(45, 37, 82, 0.95);
    border: 1px solid var(--border-strong);
    color: var(--text);
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: toast-in 0.4s cubic-bezier(0.34, 1.26, 0.64, 1), toast-out 0.4s ease 2.0s forwards;
    pointer-events: none;
    max-width: calc(100% - 32px);
}
.gpth-fx-toast--win {
    background: linear-gradient(135deg, rgba(0, 200, 150, 0.95), rgba(0, 160, 122, 0.95));
    border-color: rgba(0, 200, 150, 0.6);
    box-shadow: 0 8px 32px var(--up-glow);
}
.gpth-fx-toast--loss {
    background: linear-gradient(135deg, rgba(255, 75, 75, 0.95), rgba(201, 37, 37, 0.95));
    border-color: rgba(255, 75, 75, 0.6);
    box-shadow: 0 8px 32px var(--down-glow);
}
.gpth-fx-toast--info {
    background: linear-gradient(135deg, rgba(124, 77, 255, 0.95), rgba(155, 107, 255, 0.95));
    border-color: rgba(124, 77, 255, 0.6);
    box-shadow: 0 8px 32px var(--accent-glow);
}
.gpth-fx-toast__icon {
    width: 26px; height: 26px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.20);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.gpth-fx-toast__icon .gpth-icon { width: 16px; height: 16px; }
@keyframes toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(0.9); }
    to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes toast-out {
    from { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    to { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(0.95); }
}

/* Confetti для win */
.gpth-fx-confetti {
    position: absolute;
    width: 8px; height: 12px;
    transform-origin: center;
    animation: confetti-fall 1.8s cubic-bezier(0.4, 0.2, 0.6, 1) forwards;
    pointer-events: none;
}
@keyframes confetti-fall {
    0%   { opacity: 0; transform: translateY(-30px) rotate(0); }
    10%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(80vh) rotate(720deg); }
}

/* ============================================================ TOOLTIP / POPUP */
.gpth-tooltip {
    position: fixed;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-card);
    padding: 12px 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    z-index: 600;
    max-width: 260px;
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.5;
    animation: tooltip-in 0.2s ease-out;
}
@keyframes tooltip-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================ HAPTIC: tap visual feedback */
.gpth-tappable {
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gpth-tappable:active { transform: scale(0.97); }

/* ============================================================ BALANCE PULSE при изменении */
@keyframes balance-pulse-green {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 200, 150, 0); }
    30% { box-shadow: 0 0 0 8px rgba(0, 200, 150, 0.4); }
    60% { box-shadow: 0 0 0 16px rgba(0, 200, 150, 0); }
}
@keyframes balance-pulse-red {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 75, 75, 0); }
    30% { box-shadow: 0 0 0 8px rgba(255, 75, 75, 0.4); }
    60% { box-shadow: 0 0 0 16px rgba(255, 75, 75, 0); }
}
.gpth-topbar__balance--pulse-up { animation: balance-pulse-green 0.7s ease-out; border-radius: 24px; }
.gpth-topbar__balance--pulse-down { animation: balance-pulse-red 0.7s ease-out; border-radius: 24px; }

/* ============================================================ DRAWER ITEM smooth hover */
.gpth-drawer__item {
    transition: background 0.2s ease, padding-left 0.2s ease;
}
.gpth-drawer__item:hover { padding-left: 24px; }

/* ============================================================ INFOBAR hover */
.gpth-infobar__item { transition: background 0.2s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1); }
.gpth-infobar__item:hover { transform: translateY(-1px); }

/* ============================================================ CURRENCY PICKER */
.gpth-currency-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.gpth-currency-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 12px;
    border-radius: 14px;
    border: 2px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.gpth-currency-btn:active { transform: scale(0.97); }
.gpth-currency-btn--active {
    border-color: var(--accent);
    background: rgba(184, 154, 255, 0.12);
    box-shadow: 0 0 0 1px rgba(184, 154, 255, 0.25);
}
.gpth-currency-btn__symbol {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}
.gpth-currency-btn__code {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.gpth-currency-btn__name {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.3;
}
.gpth-currency-preview {
    margin-top: 10px;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* ============================================================ UTIL */
.gpth-up { color: var(--up); }
.gpth-down { color: var(--down); }
.gpth-muted { color: var(--text-muted); }
[hidden] { display: none !important; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}