@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';

/* /Components/Pages/OpenOrders.razor.rz.scp.css */
/* =============================================
   TRADING TERMINAL – SCOPED STYLES
   ============================================= */

/* ── Root tokens ── */
:root[b-pwrj1kt2bb] {
    --term-bg:            #080c14;
    --term-surface:       #0d1321;
    --term-panel:         #101828;
    --term-panel-alt:     #121a2e;
    --term-border:        #1a2744;
    --term-border-glow:   #2563eb55;
    --term-text:          #e2e8f8;
    --term-text-dim:      #94a3b8;
    --term-muted:         #4b5a72;

    /* brand accent – electric blue */
    --term-accent:        #3b82f6;
    --term-accent-bright: #60a5fa;
    --term-accent-glow:   rgba(59,130,246,.25);

    /* profit green */
    --term-green:         #10b981;
    --term-green-bright:  #34d399;
    --term-green-glow:    rgba(16,185,129,.22);
    --term-green-dim:     rgba(16,185,129,.07);

    /* loss red */
    --term-red:           #f43f5e;
    --term-red-bright:    #fb7185;
    --term-red-glow:      rgba(244,63,94,.22);
    --term-red-dim:       rgba(244,63,94,.07);

    /* warning yellow / gold */
    --term-yellow:        #f59e0b;
    --term-yellow-bright: #fbbf24;
    --term-yellow-glow:   rgba(245,158,11,.22);

    /* info cyan */
    --term-cyan:          #06b6d4;
    --term-cyan-bright:   #22d3ee;
    --term-cyan-glow:     rgba(6,182,212,.22);

    /* purple */
    --term-purple:        #8b5cf6;
    --term-purple-bright: #a78bfa;
    --term-purple-glow:   rgba(139,92,246,.22);
}

/* ── Terminal wrapper ── */
.terminal-page[b-pwrj1kt2bb] {
    background: var(--term-bg);
    background-image:
        radial-gradient(ellipse 80% 40% at 50% -10%, rgba(59,130,246,.08) 0%, transparent 70%),
        radial-gradient(ellipse 40% 30% at 90% 80%,  rgba(16,185,129,.05) 0%, transparent 60%);
    min-height: 100vh;
    padding: 0 0 2.5rem;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    color: var(--term-text);
}

/* ── Page header ── */
.terminal-header[b-pwrj1kt2bb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .8rem 1.5rem;
    background: linear-gradient(90deg, #0d1321 0%, #0f1d35 50%, #0d1321 100%);
    border-bottom: 1px solid var(--term-border);
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}

/* subtle scanline shimmer across top */
.terminal-header[b-pwrj1kt2bb]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(59,130,246,.04) 0%,
        transparent 60%);
    pointer-events: none;
}

.terminal-header .brand[b-pwrj1kt2bb] {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--term-accent-bright);
    text-shadow: 0 0 18px rgba(96,165,250,.6), 0 0 40px rgba(34,211,238,.25);
}

.terminal-header .brand .dot[b-pwrj1kt2bb] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--term-green-bright);
    box-shadow: 0 0 8px var(--term-green-bright), 0 0 16px var(--term-green);
    animation: pulse-live-b-pwrj1kt2bb 1.4s ease-in-out infinite;
    flex-shrink: 0;
}

.terminal-header .live-badge[b-pwrj1kt2bb] {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--term-green-bright);
    border: 1px solid var(--term-green);
    border-radius: 3px;
    padding: 2px 7px;
    text-transform: uppercase;
    background: var(--term-green-dim);
    box-shadow: 0 0 8px var(--term-green-glow);
    -webkit-text-fill-color: var(--term-green-bright);
}

.terminal-header .ts[b-pwrj1kt2bb] {
    font-size: .72rem;
    color: var(--term-muted);
    font-family: 'Courier New', monospace;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--term-border);
    border-radius: 4px;
    padding: .2rem .6rem;
}

@keyframes pulse-live-b-pwrj1kt2bb {
    0%, 100% { opacity: 1;  box-shadow: 0 0 8px var(--term-green-bright), 0 0 16px var(--term-green); }
    50%       { opacity: .5; box-shadow: 0 0 3px var(--term-green); }
}

/* ── Stats bar ── */
.stats-bar[b-pwrj1kt2bb] {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    padding: 0 1rem .85rem;
}

.stat-pill[b-pwrj1kt2bb] {
    flex: 1 1 150px;
    background: linear-gradient(135deg, var(--term-panel) 0%, var(--term-panel-alt) 100%);
    border: 1px solid var(--term-border);
    border-radius: 10px;
    padding: .8rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    transition: transform .2s, border-color .2s, box-shadow .2s;
    position: relative;
    overflow: hidden;
    cursor: default;
}

/* subtle shine layer */
.stat-pill[b-pwrj1kt2bb]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.025) 0%, transparent 60%);
    pointer-events: none;
    border-radius: 10px;
}

/* left accent stripe */
.stat-pill[b-pwrj1kt2bb]::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px; height: 100%;
    border-radius: 10px 0 0 10px;
}

.stat-pill.green[b-pwrj1kt2bb]::before  { background: linear-gradient(180deg, var(--term-green-bright), var(--term-green)); }
.stat-pill.yellow[b-pwrj1kt2bb]::before { background: linear-gradient(180deg, var(--term-yellow-bright), var(--term-yellow)); }
.stat-pill.blue[b-pwrj1kt2bb]::before   { background: linear-gradient(180deg, var(--term-accent-bright), var(--term-accent)); }
.stat-pill.cyan[b-pwrj1kt2bb]::before   { background: linear-gradient(180deg, var(--term-cyan-bright), var(--term-cyan)); }
.stat-pill.purple[b-pwrj1kt2bb]::before { background: linear-gradient(180deg, var(--term-purple-bright), var(--term-purple)); }

/* distinct tinted backgrounds per pill type */
.stat-pill.green[b-pwrj1kt2bb]  { background: linear-gradient(135deg, rgba(16,185,129,.14) 0%, var(--term-panel-alt) 100%); border-color: rgba(16,185,129,.25); }
.stat-pill.yellow[b-pwrj1kt2bb] { background: linear-gradient(135deg, rgba(245,158,11,.14) 0%, var(--term-panel-alt) 100%); border-color: rgba(245,158,11,.25); }
.stat-pill.blue[b-pwrj1kt2bb]   { background: linear-gradient(135deg, rgba(59,130,246,.14) 0%, var(--term-panel-alt) 100%); border-color: rgba(59,130,246,.25); }
.stat-pill.cyan[b-pwrj1kt2bb]   { background: linear-gradient(135deg, rgba(6,182,212,.14) 0%,  var(--term-panel-alt) 100%); border-color: rgba(6,182,212,.25); }
.stat-pill.purple[b-pwrj1kt2bb] { background: linear-gradient(135deg, rgba(139,92,246,.14) 0%, var(--term-panel-alt) 100%); border-color: rgba(139,92,246,.25); }

/* label colours match the pill accent */
.stat-pill.green  .stat-label[b-pwrj1kt2bb] { color: rgba(52,211,153,.7); }
.stat-pill.yellow .stat-label[b-pwrj1kt2bb] { color: rgba(251,191,36,.7); }
.stat-pill.blue   .stat-label[b-pwrj1kt2bb] { color: rgba(96,165,250,.7); }
.stat-pill.cyan   .stat-label[b-pwrj1kt2bb] { color: rgba(34,211,238,.7); }
.stat-pill.purple .stat-label[b-pwrj1kt2bb] { color: rgba(167,139,250,.7); }

.stat-pill:hover[b-pwrj1kt2bb] {
    transform: translateY(-2px);
    border-color: var(--term-border-glow);
}
.stat-pill.green:hover[b-pwrj1kt2bb]  { box-shadow: 0 4px 20px var(--term-green-glow),  0 0 0 1px rgba(16,185,129,.2); }
.stat-pill.yellow:hover[b-pwrj1kt2bb] { box-shadow: 0 4px 20px var(--term-yellow-glow), 0 0 0 1px rgba(245,158,11,.2); }
.stat-pill.blue:hover[b-pwrj1kt2bb]   { box-shadow: 0 4px 20px var(--term-accent-glow), 0 0 0 1px rgba(59,130,246,.2); }
.stat-pill.cyan:hover[b-pwrj1kt2bb]   { box-shadow: 0 4px 20px var(--term-cyan-glow),   0 0 0 1px rgba(6,182,212,.2); }
.stat-pill.purple:hover[b-pwrj1kt2bb] { box-shadow: 0 4px 20px var(--term-purple-glow), 0 0 0 1px rgba(139,92,246,.2); }

.stat-pill .stat-label[b-pwrj1kt2bb] {
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--term-muted);
}

.stat-pill .stat-value[b-pwrj1kt2bb] {
    font-size: 1.12rem;
    font-weight: 800;
    font-family: 'Courier New', monospace;
    letter-spacing: .02em;
    text-shadow: 0 0 20px currentColor;
}

.stat-pill.green  .stat-value[b-pwrj1kt2bb] { color: var(--term-green-bright); }
.stat-pill.yellow .stat-value[b-pwrj1kt2bb] { color: var(--term-yellow-bright); }
.stat-pill.blue   .stat-value[b-pwrj1kt2bb] { color: var(--term-accent-bright); }
.stat-pill.cyan   .stat-value[b-pwrj1kt2bb] { color: var(--term-cyan-bright); }
.stat-pill.purple .stat-value[b-pwrj1kt2bb] { color: var(--term-purple-bright); }

/* ── Panel / card ── */
.term-card[b-pwrj1kt2bb] {
    background: linear-gradient(160deg, var(--term-panel) 0%, var(--term-panel-alt) 100%);
    border: 1px solid var(--term-border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .25s, box-shadow .25s;
    position: relative;
}

/* top edge highlight */
.term-card[b-pwrj1kt2bb]::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(59,130,246,.4) 40%,
        rgba(6,182,212,.3) 70%,
        transparent 100%);
    pointer-events: none;
}

.term-card:hover[b-pwrj1kt2bb] {
    border-color: rgba(59,130,246,.3);
    box-shadow: 0 0 30px rgba(59,130,246,.07), 0 8px 30px rgba(0,0,0,.4);
}

.term-card-header[b-pwrj1kt2bb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem 1.1rem;
    background: linear-gradient(90deg, rgba(13,19,33,.9) 0%, rgba(15,24,45,.9) 100%);
    border-bottom: 1px solid var(--term-border);
    backdrop-filter: blur(4px);
}

.term-card-header .card-title[b-pwrj1kt2bb] {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--term-text-dim);
    margin: 0;
}

.term-card-header .card-badge[b-pwrj1kt2bb] {
    font-size: .58rem;
    border-radius: 4px;
    padding: 2px 8px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.badge-green[b-pwrj1kt2bb]  {
    background: var(--term-green-dim);
    color: var(--term-green-bright);
    border: 1px solid rgba(16,185,129,.35);
    box-shadow: 0 0 8px var(--term-green-glow);
}
.badge-blue[b-pwrj1kt2bb]   {
    background: rgba(59,130,246,.1);
    color: var(--term-accent-bright);
    border: 1px solid rgba(59,130,246,.35);
    box-shadow: 0 0 8px var(--term-accent-glow);
}
.badge-yellow[b-pwrj1kt2bb] {
    background: rgba(245,158,11,.1);
    color: var(--term-yellow-bright);
    border: 1px solid rgba(245,158,11,.35);
    box-shadow: 0 0 8px var(--term-yellow-glow);
}

/* ── Market tabs ── */
.market-tabs[b-pwrj1kt2bb] {
    display: flex;
    gap: .3rem;
    padding: .65rem 1rem .5rem;
    border-bottom: 1px solid var(--term-border);
    background: linear-gradient(90deg, rgba(13,19,33,.95) 0%, rgba(15,24,45,.95) 100%);
}

.market-tab[b-pwrj1kt2bb] {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .32rem .9rem;
    border-radius: 5px;
    color: var(--term-muted);
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    transition: all .18s;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.market-tab:hover[b-pwrj1kt2bb] {
    color: var(--term-text);
    background: rgba(255,255,255,.04);
    border-color: var(--term-border);
}

.market-tab.active[b-pwrj1kt2bb] {
    background: linear-gradient(135deg, rgba(59,130,246,.18), rgba(6,182,212,.1));
    color: var(--term-accent-bright);
    border-color: rgba(59,130,246,.45);
    box-shadow: 0 0 10px rgba(59,130,246,.15), inset 0 1px 0 rgba(255,255,255,.05);
}

/* ── Position list ── */
.position-list[b-pwrj1kt2bb] {
    list-style: none;
    margin: 0;
    padding: .5rem .85rem;
    overflow-y: auto;
    max-height: 280px;
}

.position-list[b-pwrj1kt2bb]::-webkit-scrollbar { width: 3px; }
.position-list[b-pwrj1kt2bb]::-webkit-scrollbar-track { background: transparent; }
.position-list[b-pwrj1kt2bb]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--term-accent), var(--term-cyan));
    border-radius: 4px;
}

.position-row[b-pwrj1kt2bb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5rem .4rem;
    border-bottom: 1px solid rgba(26,39,68,.6);
    transition: background .15s, padding-left .15s;
    border-radius: 5px;
}

.position-row:last-child[b-pwrj1kt2bb] { border-bottom: none; }

.position-row:hover[b-pwrj1kt2bb] {
    background: rgba(59,130,246,.06);
    padding-left: .75rem;
}

/* profit = buy (long) → green tint; loss = sell (short) → red tint */
.position-row.profit[b-pwrj1kt2bb] {
    background: linear-gradient(90deg, rgba(16,185,129,.07) 0%, transparent 80%);
    border-bottom-color: rgba(16,185,129,.15);
}
.position-row.profit:hover[b-pwrj1kt2bb] {
    background: linear-gradient(90deg, rgba(16,185,129,.13) 0%, transparent 80%);
    padding-left: .75rem;
}
.position-row.profit .pos-symbol[b-pwrj1kt2bb] { color: var(--term-green-bright); }

.position-row.loss[b-pwrj1kt2bb] {
    background: linear-gradient(90deg, rgba(244,63,94,.07) 0%, transparent 80%);
    border-bottom-color: rgba(244,63,94,.15);
}
.position-row.loss:hover[b-pwrj1kt2bb] {
    background: linear-gradient(90deg, rgba(244,63,94,.13) 0%, transparent 80%);
    padding-left: .75rem;
}
.position-row.loss .pos-symbol[b-pwrj1kt2bb] { color: var(--term-red-bright); }

.pos-symbol[b-pwrj1kt2bb] {
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .05em;
    color: var(--term-text);
    min-width: 80px;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-price[b-pwrj1kt2bb] {
    font-size: .73rem;
    font-family: 'Courier New', monospace;
    color: var(--term-text-dim);
}

.pos-change[b-pwrj1kt2bb] {
    font-size: .72rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    min-width: 64px;
    text-align: right;
    border-radius: 3px;
    padding: 1px 5px;
}

.pos-change.up[b-pwrj1kt2bb] {
    color: var(--term-green-bright);
    background: var(--term-green-dim);
    text-shadow: 0 0 8px var(--term-green);
}
.pos-change.down[b-pwrj1kt2bb] {
    color: var(--term-red-bright);
    background: var(--term-red-dim);
    text-shadow: 0 0 8px var(--term-red);
}

/* ── Bear / Bull table ── */
.bb-grid[b-pwrj1kt2bb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.bb-side[b-pwrj1kt2bb] {
    overflow-y: auto;
    max-height: 380px;
}

.bb-side[b-pwrj1kt2bb]::-webkit-scrollbar { width: 3px; }
.bb-side[b-pwrj1kt2bb]::-webkit-scrollbar-thumb {
    border-radius: 3px;
}
.bb-side:first-child[b-pwrj1kt2bb]::-webkit-scrollbar-thumb { background: var(--term-green); }
.bb-side:last-child[b-pwrj1kt2bb]::-webkit-scrollbar-thumb  { background: var(--term-red); }

.bb-side + .bb-side[b-pwrj1kt2bb] { border-left: 1px solid var(--term-border); }

.bb-header[b-pwrj1kt2bb] {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .85rem;
    border-bottom: 1px solid var(--term-border);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    z-index: 1;
}

.bb-header.bull[b-pwrj1kt2bb] {
    color: var(--term-green-bright);
    background: linear-gradient(90deg, rgba(16,185,129,.12) 0%, rgba(13,19,33,.95) 100%);
    text-shadow: 0 0 12px var(--term-green);
    border-bottom-color: rgba(16,185,129,.2);
}

.bb-header.bear[b-pwrj1kt2bb] {
    color: var(--term-red-bright);
    background: linear-gradient(90deg, rgba(244,63,94,.12) 0%, rgba(13,19,33,.95) 100%);
    text-shadow: 0 0 12px var(--term-red);
    border-bottom-color: rgba(244,63,94,.2);
}

.bb-row[b-pwrj1kt2bb] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .5rem;
    padding: .44rem .85rem;
    border-bottom: 1px solid rgba(26,39,68,.5);
    font-size: .72rem;
    font-family: 'Courier New', monospace;
    transition: background .15s;
}

.bb-row:hover[b-pwrj1kt2bb] { background: rgba(255,255,255,.03); }

.bb-row.bull-row[b-pwrj1kt2bb] {
    background: linear-gradient(90deg, rgba(16,185,129,.05) 0%, transparent 80%);
}
.bb-row.bull-row:hover[b-pwrj1kt2bb] {
    background: linear-gradient(90deg, rgba(16,185,129,.1) 0%, rgba(16,185,129,.02) 100%);
}

.bb-row.bear-row[b-pwrj1kt2bb] {
    background: linear-gradient(90deg, rgba(244,63,94,.05) 0%, transparent 80%);
}
.bb-row.bear-row:hover[b-pwrj1kt2bb] {
    background: linear-gradient(90deg, rgba(244,63,94,.1) 0%, rgba(244,63,94,.02) 100%);
}

.bb-row .sym[b-pwrj1kt2bb]  { color: var(--term-text); font-weight: 700; letter-spacing: .03em; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bb-row .qty[b-pwrj1kt2bb]  { color: var(--term-text-dim); text-align: right; white-space: nowrap; }
.bb-row .total[b-pwrj1kt2bb] { text-align: right; font-weight: 600; white-space: nowrap; }

.bb-col-header[b-pwrj1kt2bb] { border-bottom: 1px solid var(--term-border); margin-bottom: .2rem; padding-bottom: .3rem; }
.bb-col-header .sym[b-pwrj1kt2bb],
.bb-col-header .qty[b-pwrj1kt2bb],
.bb-col-header .total[b-pwrj1kt2bb] { color: var(--term-text-dim); font-weight: 500; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }

.bull-row .total[b-pwrj1kt2bb] { color: var(--term-green-bright); text-shadow: 0 0 8px var(--term-green-glow); }
.bear-row .total[b-pwrj1kt2bb] { color: var(--term-red-bright);   text-shadow: 0 0 8px var(--term-red-glow); }

/* ── Closed orders table ── */
.orders-table-wrap[b-pwrj1kt2bb] {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 320px;
    padding: 0 .6rem .6rem;
}

.orders-table-wrap[b-pwrj1kt2bb]::-webkit-scrollbar { height: 3px; width: 3px; }
.orders-table-wrap[b-pwrj1kt2bb]::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, var(--term-accent), var(--term-cyan));
    border-radius: 4px;
}

.term-table[b-pwrj1kt2bb] {
    width: 100%;
    border-collapse: collapse;
    font-size: .73rem;
}

.term-table thead tr[b-pwrj1kt2bb] {
    position: sticky;
    top: 0;
    background: linear-gradient(90deg, var(--term-surface) 0%, var(--term-panel-alt) 100%);
    z-index: 1;
}

.term-table th[b-pwrj1kt2bb] {
    padding: .5rem .7rem;
    color: var(--term-muted);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: left;
    border-bottom: 1px solid var(--term-border);
    white-space: nowrap;
}

.term-table td[b-pwrj1kt2bb] {
    padding: .44rem .7rem;
    border-bottom: 1px solid rgba(26,39,68,.5);
    color: var(--term-text);
    font-family: 'Courier New', monospace;
    white-space: nowrap;
}

.term-table tbody tr[b-pwrj1kt2bb] { transition: background .14s; }

.term-table tbody tr:hover[b-pwrj1kt2bb] {
    background: linear-gradient(90deg, rgba(59,130,246,.06) 0%, transparent 100%);
}

.term-table .cell-green[b-pwrj1kt2bb] {
    color: var(--term-green-bright);
    font-weight: 600;
    text-shadow: 0 0 10px var(--term-green-glow);
}
.term-table .cell-red[b-pwrj1kt2bb] {
    color: var(--term-red-bright);
    font-weight: 600;
    text-shadow: 0 0 10px var(--term-red-glow);
}
.term-table .cell-blue[b-pwrj1kt2bb]  { color: var(--term-accent-bright); font-weight: 600; }
.term-table .cell-muted[b-pwrj1kt2bb] { color: var(--term-text-dim); }

/* side pill */
.side-pill[b-pwrj1kt2bb] {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .09em;
    padding: 2px 7px;
    border-radius: 3px;
    text-transform: uppercase;
}

.side-pill.buy[b-pwrj1kt2bb] {
    background: var(--term-green-dim);
    color: var(--term-green-bright);
    border: 1px solid rgba(16,185,129,.4);
    box-shadow: 0 0 6px var(--term-green-glow);
}
.side-pill.sell[b-pwrj1kt2bb] {
    background: var(--term-red-dim);
    color: var(--term-red-bright);
    border: 1px solid rgba(244,63,94,.4);
    box-shadow: 0 0 6px var(--term-red-glow);
}
.side-pill.crypto[b-pwrj1kt2bb] {
    background: rgba(139,92,246,.1);
    color: var(--term-purple-bright);
    border: 1px solid rgba(139,92,246,.4);
    box-shadow: 0 0 6px var(--term-purple-glow);
}
.side-pill.forex[b-pwrj1kt2bb] {
    background: rgba(6,182,212,.1);
    color: var(--term-cyan-bright);
    border: 1px solid rgba(6,182,212,.4);
    box-shadow: 0 0 6px var(--term-cyan-glow);
}
.side-pill.stock[b-pwrj1kt2bb] {
    background: rgba(245,158,11,.1);
    color: var(--term-yellow-bright);
    border: 1px solid rgba(245,158,11,.4);
    box-shadow: 0 0 6px var(--term-yellow-glow);
}

/* ── Full-width row helpers ── */
.full-row[b-pwrj1kt2bb] {
    padding: 0 1rem;
    margin-top: .85rem;
}

/* ── Empty state ── */
.empty-state[b-pwrj1kt2bb] {
    padding: 2.2rem;
    text-align: center;
    color: var(--term-muted);
    font-size: .72rem;
    letter-spacing: .08em;
    font-style: italic;
}

/* ── Market type icon dot ── */
.mtype-dot[b-pwrj1kt2bb] {
    width: 6px; height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.mtype-dot.crypto[b-pwrj1kt2bb] { background: var(--term-purple-bright); box-shadow: 0 0 4px var(--term-purple); }
.mtype-dot.forex[b-pwrj1kt2bb]  { background: var(--term-cyan-bright);   box-shadow: 0 0 4px var(--term-cyan); }
.mtype-dot.stock[b-pwrj1kt2bb]  { background: var(--term-yellow-bright); box-shadow: 0 0 4px var(--term-yellow); }

/* ── Converter widget wrapper ── */
.converter-wrap[b-pwrj1kt2bb] {
    padding: .75rem;
}

/* ── Grid layout ── */
.terminal-grid[b-pwrj1kt2bb] {
    display: grid;
    grid-template-columns: 1fr 320px;
    grid-template-rows: auto auto;
    gap: .8rem;
    padding: 0 1rem;
}

/* Named grid placement – desktop */
.grid-chart[b-pwrj1kt2bb]  { grid-column: 1; grid-row: 1; }
.grid-orders[b-pwrj1kt2bb] { grid-column: 2; grid-row: 1 / span 2; }
.grid-book[b-pwrj1kt2bb]   { grid-column: 1; grid-row: 2; }

/* ═══════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════ */

/* ── Tablet  ≤ 1100px ── */
@media (max-width: 1100px) {

    .terminal-grid[b-pwrj1kt2bb] {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    /* reset all named placements to natural flow */
    .grid-chart[b-pwrj1kt2bb],
    .grid-orders[b-pwrj1kt2bb],
    .grid-book[b-pwrj1kt2bb] {
        grid-column: 1;
        grid-row: auto;
    }

    /* orders panel: let it grow naturally instead of spanning */
    .grid-orders[b-pwrj1kt2bb] { grid-row: auto; }

    /* bb-grid stays side-by-side on tablet */
    .bb-side[b-pwrj1kt2bb] { max-height: 260px; }

    /* position list slightly shorter */
    .position-list[b-pwrj1kt2bb] { max-height: 220px; }

    /* stat pills: 2-up on tablet */
    .stat-pill[b-pwrj1kt2bb] { flex: 1 1 calc(50% - .6rem); }
}

/* ── Mobile  ≤ 768px ── */
@media (max-width: 768px) {

    /* header: stack brand + timestamp */
    .terminal-header[b-pwrj1kt2bb] {
        flex-direction: column;
        align-items: flex-start;
        gap: .4rem;
        padding: .7rem 1rem;
    }

    .terminal-header .ts[b-pwrj1kt2bb] { font-size: .65rem; }

    /* stat pills: 2-up on phone */
    .stats-bar[b-pwrj1kt2bb] { padding: 0 .75rem .75rem; gap: .5rem; }
    .stat-pill[b-pwrj1kt2bb]  { flex: 1 1 calc(50% - .5rem); padding: .65rem .9rem; }
    .stat-pill .stat-value[b-pwrj1kt2bb] { font-size: .95rem; }

    /* grid padding */
    .terminal-grid[b-pwrj1kt2bb] { padding: 0 .75rem; gap: .6rem; }
    .full-row[b-pwrj1kt2bb]      { padding: 0 .75rem; }

    /* market tabs: wrap if needed */
    .market-tabs[b-pwrj1kt2bb] { flex-wrap: wrap; gap: .25rem; padding: .5rem .75rem .4rem; }
    .market-tab[b-pwrj1kt2bb]  { padding: .28rem .7rem; font-size: .62rem; }

    /* position list */
    .position-list[b-pwrj1kt2bb] { max-height: 200px; padding: .4rem .6rem; }
    .pos-symbol[b-pwrj1kt2bb]    { min-width: 75px; font-size: .7rem; }
    .pos-price[b-pwrj1kt2bb]     { font-size: .68rem; }
    .pos-change[b-pwrj1kt2bb]    { min-width: 54px; font-size: .67rem; }

    /* bull/bear grid: stack vertically on small phones */
    .bb-grid[b-pwrj1kt2bb] { grid-template-columns: 1fr; }
    .bb-side + .bb-side[b-pwrj1kt2bb] {
        border-left: none;
        border-top: 1px solid var(--term-border);
    }
    .bb-side[b-pwrj1kt2bb] { max-height: 200px; }

    /* table: allow horizontal scroll, shrink text */
    .term-table[b-pwrj1kt2bb] { font-size: .67rem; }
    .term-table th[b-pwrj1kt2bb],
    .term-table td[b-pwrj1kt2bb] { padding: .38rem .5rem; }

    /* card headers */
    .term-card-header[b-pwrj1kt2bb] { padding: .55rem .85rem; }
    .term-card-header .card-title[b-pwrj1kt2bb] { font-size: .62rem; }
}

/* ── Small mobile  ≤ 480px ── */
@media (max-width: 480px) {

    /* header: brand text wraps */
    .terminal-header .brand[b-pwrj1kt2bb] {
        font-size: .82rem;
        flex-wrap: wrap;
        gap: .4rem;
    }

    /* stat pills: full-width single column */
    .stat-pill[b-pwrj1kt2bb] { flex: 1 1 100%; }

    /* tighter grid */
    .terminal-grid[b-pwrj1kt2bb] { padding: 0 .5rem; gap: .5rem; }
    .full-row[b-pwrj1kt2bb]      { padding: 0 .5rem; margin-top: .6rem; }

    /* bb rows compact */
    .bb-row[b-pwrj1kt2bb] { padding: .38rem .6rem; font-size: .67rem; gap: .35rem; }
    .bb-header[b-pwrj1kt2bb] { padding: .4rem .6rem; font-size: .58rem; }

    /* converter widget needs room */
    .converter-wrap[b-pwrj1kt2bb] { padding: .5rem; }

    /* card header badge hide on very small screens */
    .term-card-header .card-badge[b-pwrj1kt2bb] { display: none; }
}
/* /Components/Pages/Subscribe.razor.rz.scp.css */
/* ============================================================
   Subscribe Page — Scoped Styles
   ============================================================ */

/* ---------- Hero Banner ---------- */
.subscribe-hero[b-hrpkcs7uyl] {
    position: relative;
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
    border-radius: 1.25rem;
    padding: 3.5rem 2rem;
    margin-bottom: 2.5rem;
    overflow: hidden;
    color: #fff;
    text-align: center;
}

.subscribe-hero[b-hrpkcs7uyl]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 40%, rgba(99,179,237,.18) 0%, transparent 65%),
                radial-gradient(ellipse at 20% 80%, rgba(129,230,217,.12) 0%, transparent 55%);
    pointer-events: none;
}

.hero-badge[b-hrpkcs7uyl] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50px;
    padding: .35rem 1rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
    backdrop-filter: blur(6px);
}

.hero-badge i[b-hrpkcs7uyl] {
    color: #fbbf24;
}

.subscribe-hero h1[b-hrpkcs7uyl] {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -.5px;
    margin-bottom: .75rem;
    line-height: 1.15;
}

.hero-gradient-text[b-hrpkcs7uyl] {
    background: linear-gradient(90deg, #63b3ed, #81e6d9, #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.subscribe-hero p[b-hrpkcs7uyl] {
    font-size: 1.05rem;
    color: rgba(255,255,255,.78);
    max-width: 560px;
    margin: 0 auto 1.8rem;
    line-height: 1.7;
}

.hero-stats[b-hrpkcs7uyl] {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.hero-stat-item[b-hrpkcs7uyl] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-stat-value[b-hrpkcs7uyl] {
    font-size: 1.6rem;
    font-weight: 800;
    color: #fbbf24;
    line-height: 1;
}

.hero-stat-label[b-hrpkcs7uyl] {
    font-size: .72rem;
    color: rgba(255,255,255,.6);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-top: .2rem;
}

/* Floating orbs */
.hero-orb[b-hrpkcs7uyl] {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: floatOrb-b-hrpkcs7uyl 8s ease-in-out infinite;
}

.hero-orb-1[b-hrpkcs7uyl] {
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(99,179,237,.25) 0%, transparent 70%);
    top: -40px; right: 8%;
    animation-delay: 0s;
}

.hero-orb-2[b-hrpkcs7uyl] {
    width: 120px; height: 120px;
    background: radial-gradient(circle, rgba(251,191,36,.18) 0%, transparent 70%);
    bottom: -20px; left: 12%;
    animation-delay: -3s;
}

@keyframes floatOrb-b-hrpkcs7uyl {
    0%, 100% { transform: translateY(0) scale(1); }
    50%       { transform: translateY(-18px) scale(1.06); }
}

/* ---------- Section Header ---------- */
.section-header[b-hrpkcs7uyl] {
    text-align: center;
    margin-bottom: 2rem;
}

.section-header h4[b-hrpkcs7uyl] {
    font-weight: 700;
    font-size: 1.3rem;
    color: #1e293b;
    margin-bottom: .35rem;
}

.section-header p[b-hrpkcs7uyl] {
    color: #64748b;
    font-size: .9rem;
}

/* ---------- Plan Cards ---------- */
.plan-card-wrapper[b-hrpkcs7uyl] {
    perspective: 1000px;
}

.plan-card[b-hrpkcs7uyl] {
    border: none;
    border-radius: 1.1rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.07);
    transition: transform .35s cubic-bezier(.34,1.56,.64,1),
                box-shadow .35s ease;
    background: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    animation: cardEntrance-b-hrpkcs7uyl .6s ease both;
}

.plan-card:hover[b-hrpkcs7uyl] {
    transform: translateY(-10px) scale(1.015);
    box-shadow: 0 20px 50px rgba(0,0,0,.13);
}

@keyframes cardEntrance-b-hrpkcs7uyl {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Staggered entrance delays */
.plan-card-wrapper:nth-child(1) .plan-card[b-hrpkcs7uyl] { animation-delay: .1s; }
.plan-card-wrapper:nth-child(2) .plan-card[b-hrpkcs7uyl] { animation-delay: .22s; }
.plan-card-wrapper:nth-child(3) .plan-card[b-hrpkcs7uyl] { animation-delay: .34s; }
.plan-card-wrapper:nth-child(4) .plan-card[b-hrpkcs7uyl] { animation-delay: .46s; }
.plan-card-wrapper:nth-child(5) .plan-card[b-hrpkcs7uyl] { animation-delay: .58s; }
.plan-card-wrapper:nth-child(6) .plan-card[b-hrpkcs7uyl] { animation-delay: .70s; }

/* Popular badge */
.plan-card.is-featured[b-hrpkcs7uyl] {
    border: 2px solid #3b82f6;
    box-shadow: 0 8px 32px rgba(59,130,246,.18);
}

.plan-card.is-featured:hover[b-hrpkcs7uyl] {
    box-shadow: 0 20px 50px rgba(59,130,246,.22);
}

.popular-badge[b-hrpkcs7uyl] {
    position: absolute;
    top: 14px;
    right: 14px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff;
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .28rem .75rem;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: .3rem;
    z-index: 2;
}

/* Image container */
.plan-card-img-wrap[b-hrpkcs7uyl] {
    position: relative;
    overflow: hidden;
    height: 175px;
}

.plan-card-img-wrap img[b-hrpkcs7uyl] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.plan-card:hover .plan-card-img-wrap img[b-hrpkcs7uyl] {
    transform: scale(1.08);
}

.plan-img-overlay[b-hrpkcs7uyl] {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(15,32,39,.65) 100%);
}

/* Card body */
.plan-card-body[b-hrpkcs7uyl] {
    padding: 1.4rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.plan-name[b-hrpkcs7uyl] {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: .15rem;
}

.plan-min-invest[b-hrpkcs7uyl] {
    font-size: .78rem;
    color: #64748b;
    margin-bottom: .9rem;
}

/* Return range pill */
.return-range-bar[b-hrpkcs7uyl] {
    background: linear-gradient(90deg, #dcfce7, #bbf7d0);
    border-radius: 50px;
    padding: .45rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    font-size: .82rem;
    font-weight: 600;
    color: #15803d;
}

.return-range-bar i[b-hrpkcs7uyl] {
    color: #22c55e;
}

/* Description */
.plan-description[b-hrpkcs7uyl] {
    font-size: .84rem;
    color: #64748b;
    line-height: 1.65;
    flex: 1;
    margin-bottom: 1rem;
}

/* Subscriber avatars */
.subscriber-strip[b-hrpkcs7uyl] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.1rem;
}

.sub-avatar[b-hrpkcs7uyl] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #fff;
    object-fit: cover;
    margin-left: -8px;
    transition: transform .2s;
}

.sub-avatar:first-child[b-hrpkcs7uyl] { margin-left: 0; }

.subscriber-strip:hover .sub-avatar[b-hrpkcs7uyl] {
    transform: translateY(-3px);
}

.sub-count-badge[b-hrpkcs7uyl] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #3b82f6);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    margin-left: -8px;
}

.subscriber-label[b-hrpkcs7uyl] {
    font-size: .75rem;
    color: #94a3b8;
    margin-left: .25rem;
}

/* CTA button */
.btn-plan-select[b-hrpkcs7uyl] {
    background: linear-gradient(135deg, #1e3a8a, #3b82f6);
    border: none;
    color: #fff;
    border-radius: .6rem;
    padding: .65rem 1.4rem;
    font-weight: 700;
    font-size: .9rem;
    transition: all .25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
}

.btn-plan-select:hover[b-hrpkcs7uyl] {
    background: linear-gradient(135deg, #1e40af, #2563eb);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59,130,246,.35);
}

.btn-plan-select i[b-hrpkcs7uyl] {
    transition: transform .25s ease;
}

.btn-plan-select:hover i[b-hrpkcs7uyl] {
    transform: translateX(4px);
}

/* ---------- Skeleton / Loading ---------- */
.skeleton-card[b-hrpkcs7uyl] {
    border-radius: 1.1rem;
    overflow: hidden;
    background: #f1f5f9;
    animation: skeletonPulse-b-hrpkcs7uyl 1.4s ease-in-out infinite;
}

@keyframes skeletonPulse-b-hrpkcs7uyl {
    0%, 100% { opacity: 1; }
    50%       { opacity: .55; }
}

.skeleton-img[b-hrpkcs7uyl] {
    height: 175px;
    background: #e2e8f0;
}

.skeleton-body[b-hrpkcs7uyl] {
    padding: 1.4rem;
}

.skeleton-line[b-hrpkcs7uyl] {
    height: 12px;
    border-radius: 6px;
    background: #e2e8f0;
    margin-bottom: .75rem;
}

.skeleton-line.short[b-hrpkcs7uyl] { width: 55%; }
.skeleton-line.medium[b-hrpkcs7uyl] { width: 75%; }
.skeleton-line.full[b-hrpkcs7uyl] { width: 100%; }
.skeleton-btn[b-hrpkcs7uyl] {
    height: 40px;
    border-radius: .6rem;
    background: #e2e8f0;
    margin-top: .5rem;
}

/* ---------- Empty State ---------- */
.empty-state[b-hrpkcs7uyl] {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-state-icon[b-hrpkcs7uyl] {
    font-size: 3.5rem;
    color: #cbd5e1;
    margin-bottom: 1rem;
}

.empty-state h5[b-hrpkcs7uyl] {
    font-weight: 700;
    color: #1e293b;
    margin-bottom: .5rem;
}

.empty-state p[b-hrpkcs7uyl] {
    color: #64748b;
    font-size: .9rem;
}

/* ============================================================
   MODAL — Premium Fintech Redesign
   ============================================================ */

/* ── Shell ── */
.subscribe-modal .modal-content[b-hrpkcs7uyl] {
    border: none;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 40px 100px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.06);
    background: #fff;
    /* Prevent the content from growing taller than the viewport */
    max-height: calc(100dvh - 3.5rem);
    display: flex;
    flex-direction: column;
}

/* Ensure the modal dialog itself is capped — Bootstrap's .modal-dialog-scrollable
   relies on the dialog having a height limit so the .modal-body can overflow-y  */
.subscribe-modal .modal-dialog[b-hrpkcs7uyl] {
    max-height: calc(100dvh - 3.5rem);
}

/* ── Sidebar accent header ── */
.modal-header-premium[b-hrpkcs7uyl] {
    position: relative;
    background: linear-gradient(135deg, #0b1929 0%, #0f2d4a 45%, #1a4568 100%);
    color: #fff;
    padding: 0;
    border: none;
    overflow: hidden;
    min-height: 130px;
    display: flex;
    align-items: stretch;
}

/* Decorative mesh behind header */
.modal-header-premium[b-hrpkcs7uyl]::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 85% 20%, rgba(99,179,237,.22) 0%, transparent 55%),
        radial-gradient(ellipse at 15% 90%, rgba(56,189,248,.14) 0%, transparent 50%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

/* Left gold accent bar */
.modal-header-premium[b-hrpkcs7uyl]::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #fbbf24, #f59e0b, #d97706);
    border-radius: 0 2px 2px 0;
}

.modal-header-inner[b-hrpkcs7uyl] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.5rem 1.75rem 1.5rem 2rem;
    gap: 1rem;
}

.modal-bot-icon[b-hrpkcs7uyl] {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
    border: 1px solid rgba(255,255,255,.15);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: #93c5fd;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
}

.modal-header-text[b-hrpkcs7uyl] {
    flex: 1;
}

.modal-header-text .modal-title[b-hrpkcs7uyl] {
    font-weight: 800;
    font-size: 1.18rem;
    letter-spacing: -.2px;
    color: #fff;
    margin-bottom: .15rem;
}

.modal-header-text .modal-subtitle[b-hrpkcs7uyl] {
    font-size: .77rem;
    color: rgba(255,255,255,.5);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.modal-header-text .modal-subtitle i[b-hrpkcs7uyl] {
    color: #4ade80;
    font-size: .65rem;
}

.modal-header-premium .btn-close[b-hrpkcs7uyl] {
    filter: invert(1) grayscale(1) brightness(2);
    opacity: .5;
    transition: opacity .2s;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: .25rem;
}

.modal-header-premium .btn-close:hover[b-hrpkcs7uyl] {
    opacity: 1;
}

/* ── Plan summary ribbon ── */
.plan-summary-ribbon[b-hrpkcs7uyl] {
    background: linear-gradient(90deg, #f0f9ff, #e0f2fe);
    border-bottom: 1px solid #bae6fd;
    padding: .7rem 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
}

.plan-summary-chip[b-hrpkcs7uyl] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .75rem;
    font-weight: 600;
    color: #0369a1;
    background: rgba(3,105,161,.08);
    border: 1px solid rgba(3,105,161,.15);
    padding: .25rem .7rem;
    border-radius: 50px;
}

.plan-summary-chip i[b-hrpkcs7uyl] {
    font-size: .65rem;
    color: #0ea5e9;
}

/* ── Step tracker ── */
.modal-step-track[b-hrpkcs7uyl] {
    display: flex;
    align-items: center;
    padding: 1rem 2rem .8rem;
    background: #fafbfc;
    border-bottom: 1px solid #f1f5f9;
    gap: 0;
}

.mst-item[b-hrpkcs7uyl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    min-width: 64px;
}

.mst-dot[b-hrpkcs7uyl] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: .78rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #e2e8f0;
    background: #fff;
    color: #cbd5e1;
    transition: all .4s cubic-bezier(.34,1.56,.64,1);
    position: relative;
}

.mst-dot.is-active[b-hrpkcs7uyl] {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    border-color: #3b82f6;
    color: #fff;
    box-shadow: 0 0 0 5px rgba(59,130,246,.15), 0 4px 12px rgba(59,130,246,.3);
    animation: mstPulse-b-hrpkcs7uyl 2s ease-in-out infinite;
}

@keyframes mstPulse-b-hrpkcs7uyl {
    0%, 100% { box-shadow: 0 0 0 5px rgba(59,130,246,.15), 0 4px 12px rgba(59,130,246,.3); }
    50%       { box-shadow: 0 0 0 8px rgba(59,130,246,.08), 0 4px 12px rgba(59,130,246,.3); }
}

.mst-dot.is-done[b-hrpkcs7uyl] {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    border-color: #22c55e;
    color: #fff;
    box-shadow: 0 4px 10px rgba(34,197,94,.25);
}

.mst-label[b-hrpkcs7uyl] {
    font-size: .66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #cbd5e1;
    white-space: nowrap;
}

.mst-label.is-active[b-hrpkcs7uyl] { color: #3b82f6; }
.mst-label.is-done[b-hrpkcs7uyl]   { color: #16a34a; }

.mst-line[b-hrpkcs7uyl] {
    flex: 1;
    height: 2px;
    background: #e2e8f0;
    margin: 0 .35rem .9rem;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.mst-line[b-hrpkcs7uyl]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s ease;
}

.mst-line.is-done[b-hrpkcs7uyl]::after {
    transform: scaleX(1);
}

/* ── Modal body ── */
/* Needs both .modal-body (Bootstrap scrollable hook) and .modal-body-premium (our styles) */
.modal-body-premium[b-hrpkcs7uyl] {
    padding: 1.75rem 1.75rem 1.25rem;
    background: #fff;
    overflow-y: auto;            /* allow content to scroll inside the container   */
    overscroll-behavior: contain; /* prevent scroll bleed to the page behind         */
    -webkit-overflow-scrolling: touch; /* smooth momentum scroll on iOS              */
}

/* ── Notice banner ── */
.modal-notice[b-hrpkcs7uyl] {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    background: linear-gradient(135deg, #fffbeb 0%, #fef9ec 100%);
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: .85rem;
    padding: .9rem 1.1rem;
    margin-bottom: 1.5rem;
}

.modal-notice-icon[b-hrpkcs7uyl] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(245,158,11,.12);
    border: 1px solid rgba(245,158,11,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d97706;
    font-size: .88rem;
    flex-shrink: 0;
    margin-top: .05rem;
}

.modal-notice-text strong[b-hrpkcs7uyl] {
    font-size: .82rem;
    color: #92400e;
    display: block;
    margin-bottom: .2rem;
}

.modal-notice-text p[b-hrpkcs7uyl] {
    font-size: .78rem;
    color: #a16207;
    line-height: 1.6;
    margin: 0;
}

/* ── Form field groups ── */
.field-group[b-hrpkcs7uyl] {
    margin-bottom: 1.1rem;
}

.field-label[b-hrpkcs7uyl] {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .8rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: .45rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.field-label .field-icon[b-hrpkcs7uyl] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .62rem;
    color: #2563eb;
    flex-shrink: 0;
}

/* ::deep makes Blazor CSS isolation generate [b-xxxx] .class instead of .class[b-xxxx],
   allowing the rule to match <input> elements rendered by child components like InputText */
[b-hrpkcs7uyl] .modal-form-control {
    border-radius: .65rem;
    border: 1.5px solid #e2e8f0;
    font-size: .87rem;
    padding: .6rem .9rem;
    background: #fafbfc;
    color: #1e293b;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    width: 100%;
    min-width: 0;
    display: block;
    box-sizing: border-box;
}

/* Ensure input-group containers take full width */
.field-group .input-group[b-hrpkcs7uyl] {
    width: 100%;
    display: flex;
    align-items: stretch;
}

[b-hrpkcs7uyl] .field-group .input-group .modal-form-control {
    flex: 1;
    min-width: 0;
}

[b-hrpkcs7uyl] .modal-form-control:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3.5px rgba(59,130,246,.12);
    background: #fff;
    outline: none;
}

[b-hrpkcs7uyl] .modal-form-control.font-mono {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: .78rem;
    letter-spacing: .03em;
    background: #f8fafc;
}

/* Wallet address: full-width input with overlaid copy button */
.wallet-address-control[b-hrpkcs7uyl] {
    position: relative;
    width: 100%;
}

[b-hrpkcs7uyl] .wallet-address-control .modal-form-control {
    width: 100%;
    padding-right: 3rem;
    box-sizing: border-box;
}

.btn-copy-overlay[b-hrpkcs7uyl] {
    position: absolute;
    top: 50%;
    right: .35rem;
    transform: translateY(-50%);
    border-radius: .5rem;
    border: 1.5px solid #e2e8f0;
    background: #f1f5f9;
    height: calc(100% - .7rem);
    min-height: 2rem;
    padding: 0 .7rem;
    z-index: 2;
}

/* ── Section divider ── */
.modal-section-divider[b-hrpkcs7uyl] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.4rem 0 1.1rem;
}

.modal-section-divider[b-hrpkcs7uyl]::before,
.modal-section-divider[b-hrpkcs7uyl]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #f1f5f9;
}

.modal-section-title[b-hrpkcs7uyl] {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #94a3b8;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.modal-section-title i[b-hrpkcs7uyl] {
    color: #60a5fa;
}

/* ── Payment panel ── */
.payment-panel[b-hrpkcs7uyl] {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 1rem;
    overflow: hidden;
}

.payment-panel-header[b-hrpkcs7uyl] {
    background: linear-gradient(90deg, #0f172a, #1e3a5f);
    color: #fff;
    padding: .7rem 1.1rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.payment-panel-header i[b-hrpkcs7uyl] {
    color: #60a5fa;
    font-size: .85rem;
}

.live-dot[b-hrpkcs7uyl] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 2px rgba(74,222,128,.3);
    animation: livePulse-b-hrpkcs7uyl 1.4s ease-in-out infinite;
    margin-left: auto;
}

@keyframes livePulse-b-hrpkcs7uyl {
    0%, 100% { box-shadow: 0 0 0 2px rgba(74,222,128,.3); }
    50%       { box-shadow: 0 0 0 5px rgba(74,222,128,.1); }
}

.payment-panel-body[b-hrpkcs7uyl] {
    padding: 1.1rem;
}

/* ── QR code glass card ── */
.qr-glass-card[b-hrpkcs7uyl] {
    background: linear-gradient(135deg, #fff, #f0f9ff);
    border: 1.5px dashed #93c5fd;
    border-radius: .85rem;
    padding: 1.25rem .85rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
    transition: border-color .3s, box-shadow .3s;
    position: relative;
    overflow: hidden;
}

.qr-glass-card[b-hrpkcs7uyl]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(59,130,246,.07) 0%, transparent 65%);
    pointer-events: none;
}

.qr-glass-card:hover[b-hrpkcs7uyl] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59,130,246,.07);
}

.qr-glass-card img[b-hrpkcs7uyl] {
    border-radius: .6rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    max-width: 155px;
    width: 100%;
    position: relative;
    z-index: 1;
}

.qr-scan-label[b-hrpkcs7uyl] {
    font-size: .72rem;
    color: #64748b;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .35rem;
    position: relative;
    z-index: 1;
}

.qr-scan-label i[b-hrpkcs7uyl] {
    color: #3b82f6;
}

.secure-badge-pill[b-hrpkcs7uyl] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: linear-gradient(90deg, #dcfce7, #bbf7d0);
    border: 1px solid #86efac;
    color: #15803d;
    font-size: .68rem;
    font-weight: 700;
    padding: .25rem .7rem;
    border-radius: 50px;
    letter-spacing: .04em;
    position: relative;
    z-index: 1;
}

/* ── Copy button ── */
.btn-copy[b-hrpkcs7uyl] {
    background: #f1f5f9;
    border: 1.5px solid #e2e8f0;
    color: #64748b;
    border-radius: 0 .65rem .65rem 0;
    padding: .6rem .85rem;
    font-size: .82rem;
    transition: all .2s ease;
    flex-shrink: 0;
}

.btn-copy:hover[b-hrpkcs7uyl] {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

/* ── Status panels ── */
.status-panel[b-hrpkcs7uyl] {
    border-radius: 1rem;
    border: 1.5px solid #e2e8f0;
    overflow: hidden;
    animation: fadeSlideIn-b-hrpkcs7uyl .35s ease;
}

@keyframes fadeSlideIn-b-hrpkcs7uyl {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.status-panel-inner[b-hrpkcs7uyl] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
}

.status-panel-icon[b-hrpkcs7uyl] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.status-panel-icon.is-info[b-hrpkcs7uyl] {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #2563eb;
}

.status-panel-icon.is-success[b-hrpkcs7uyl] {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #16a34a;
}

.status-panel-icon.is-error[b-hrpkcs7uyl] {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #dc2626;
}

.status-panel-title[b-hrpkcs7uyl] {
    font-size: .88rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: .2rem;
    line-height: 1.3;
}

.status-panel-msg[b-hrpkcs7uyl] {
    font-size: .8rem;
    color: #64748b;
    line-height: 1.6;
}

.status-panel-actions[b-hrpkcs7uyl] {
    padding: 0 1.25rem 1rem;
    display: flex;
    gap: .6rem;
}

/* Spinner animation */
.spin-loader[b-hrpkcs7uyl] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid #e0eaff;
    border-top-color: #3b82f6;
    animation: spinIt-b-hrpkcs7uyl 1s linear infinite;
    flex-shrink: 0;
}

@keyframes spinIt-b-hrpkcs7uyl {
    to { transform: rotate(360deg); }
}

/* ── Modal footer / CTA ── */
.modal-footer-premium[b-hrpkcs7uyl] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    padding: 1rem 1.75rem 1.4rem;
    background: #fafbfc;
    border-top: 1px solid #f1f5f9;
}

.btn-modal-cancel[b-hrpkcs7uyl] {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    color: #64748b;
    border-radius: .65rem;
    padding: .62rem 1.3rem;
    font-weight: 600;
    font-size: .86rem;
    transition: all .2s ease;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.btn-modal-cancel:hover[b-hrpkcs7uyl] {
    border-color: #cbd5e1;
    color: #334155;
    background: #f8fafc;
}

/* Shimmer CTA */
.btn-modal-submit[b-hrpkcs7uyl] {
    position: relative;
    background: linear-gradient(135deg, #1d4ed8, #3b82f6, #2563eb);
    background-size: 200% 100%;
    border: none;
    color: #fff;
    border-radius: .65rem;
    padding: .65rem 1.6rem;
    font-weight: 700;
    font-size: .9rem;
    transition: all .3s ease;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    overflow: hidden;
    letter-spacing: .01em;
}

.btn-modal-submit[b-hrpkcs7uyl]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    transition: left .45s ease;
}

.btn-modal-submit:hover[b-hrpkcs7uyl]::before {
    left: 100%;
}

.btn-modal-submit:hover[b-hrpkcs7uyl] {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(37,99,235,.38);
    background-position: right;
}

.btn-modal-submit:active[b-hrpkcs7uyl] {
    transform: translateY(0);
}

/* Responsive tweaks */
@media (max-width: 576px) {
    .subscribe-hero[b-hrpkcs7uyl] {
        padding: 2.2rem 1.25rem;
    }

    .hero-stats[b-hrpkcs7uyl] {
        gap: 1.5rem;
    }

    .modal-step-track[b-hrpkcs7uyl] {
        display: none;
    }

    .plan-summary-ribbon[b-hrpkcs7uyl] {
        padding: .6rem 1.1rem;
    }

    .modal-header-inner[b-hrpkcs7uyl] {
        padding: 1.25rem 1.1rem 1.25rem 1.4rem;
    }

    .modal-body-premium[b-hrpkcs7uyl] {
        padding: 1.25rem 1.1rem 1rem;
    }

    .modal-footer-premium[b-hrpkcs7uyl] {
        padding: .85rem 1.1rem 1.1rem;
    }

    /* On mobile give the modal a bit more vertical room */
    .subscribe-modal .modal-content[b-hrpkcs7uyl],
    .subscribe-modal .modal-dialog[b-hrpkcs7uyl] {
        max-height: calc(100dvh - 1rem);
    }
}