/* ═══════════════════════════════════════════
   HASHBACK & HASHPAY — SHARED STYLESHEET
   Brand: Green #00b300 + Blue #4154f1
═══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap');

:root {
    /* ── Primary green ── */
    --primary: #41aa28;
    --primary-d: #41aa28;
    --primary-l: #41aa28;

    /* ── Blue accent ── */
    --blue: #4154f1;
    --blue-d: #2d3ecf;
    --blue-l: #6b7fff;
    --blue-glow: rgba(65, 84, 241, .35);
    --blue-soft: rgba(65, 84, 241, .1);
    --blue-border: rgba(65, 84, 241, .25);

    /* ── Gradients ── */
    --grad-primary: linear-gradient(135deg, #00b300 0%, #4154f1 100%);
    --grad-soft: linear-gradient(135deg, rgba(0, 179, 0, .12) 0%, rgba(65, 84, 241, .12) 100%);
    --grad-glow: linear-gradient(135deg, rgba(0, 179, 0, .06) 0%, rgba(65, 84, 241, .08) 100%);

    /* ── Backgrounds (blue-shifted darks) ── */
    --dark: #090b12;
    --dark2: #0f1118;
    --dark3: #161a28;
    --card-bg: #111520;

    /* ── Borders ── */
    --border: rgba(65, 84, 241, .16);
    --border-g: rgba(0, 179, 0, .18);

    /* ── Text ── */
    --text-muted: #7a85b0;
    --text-body: #c2c8e8;
    --white: #f0f2ff;
    --grad:       linear-gradient(135deg,#00b300 0%,#4154f1 100%);
    --sidebar-w:  240px;
    --topbar-h:   58px;
    --amber:      #febc2e;
    --red:        #e06c75;
    --purple:     #c792ea;
}

/* ── Light mode variable overrides ── */
[data-theme="light"] {
    --dark:      #f0f2f8;
    --dark2:     #e4e8f2;
    --dark3:     #d8dded;
    --card-bg:   #ffffff;

    --border:    rgba(65, 84, 241, .18);
    --border-g:  rgba(0, 179, 0, .2);

    --text-muted: #5a6382;
    --text-body:  #1e2340;
    --white:      #0d1026;

    --blue-soft:   rgba(65, 84, 241, .08);
    --blue-border: rgba(65, 84, 241, .22);
    --blue-glow:   rgba(65, 84, 241, .2);
}

/* Navbar / topbar light surface */
[data-theme="light"] .navbar {
    background: rgba(240, 242, 248, .95);
    border-bottom-color: rgba(65, 84, 241, .14);
}
[data-theme="light"] .nav-drawer,
[data-theme="light"] .dash-sidebar,
[data-theme="light"] .dash-topbar {
    background: #ffffff;
    border-color: rgba(65, 84, 241, .12);
}
[data-theme="light"] .nav-link          { color: #1e2340; }
[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link.active   { color: var(--blue); }
[data-theme="light"] .dropdown-menu     { background: #ffffff; border-color: rgba(65,84,241,.14); }
[data-theme="light"] .dropdown-item     { color: #1e2340; }
[data-theme="light"] .dropdown-item:hover { background: var(--dark3); }
[data-theme="light"] .btn-user-dropdown { background: var(--dark3); border-color: var(--border); color: #1e2340; }
[data-theme="light"] .drawer-link       { color: #1e2340; }
[data-theme="light"] .drawer-link:hover { background: var(--dark3); color: var(--blue); }
[data-theme="light"] .drawer-user-section { background: var(--dark3); }

/* Cards & surfaces */
[data-theme="light"] .chart-card,
[data-theme="light"] .stat-card,
[data-theme="light"] .pl-card,
[data-theme="light"] .tx-card,
[data-theme="light"] .hb-card,
[data-theme="light"] .insight-card { background: #ffffff; border-color: rgba(65,84,241,.14); }
[data-theme="light"] .stat-card.green  { background: rgba(65,170,40,.06); }
[data-theme="light"] .stat-card.blue   { background: rgba(65,84,241,.06); }
[data-theme="light"] .stat-card.amber  { background: rgba(254,188,46,.06); }
[data-theme="light"] .stat-card.purple { background: rgba(201,139,255,.06); }

/* Tables */
[data-theme="light"] .dash-table thead th { background: var(--dark3); color: var(--text-muted); }
[data-theme="light"] .dash-table tbody tr:hover { background: var(--dark2); }

/* Scrollbar */
[data-theme="light"] ::-webkit-scrollbar-track { background: var(--dark3); }

/* Theme toggle button */
.theme-toggle {
    background: none;
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: .35rem .65rem;
    color: var(--text-muted);
    cursor: pointer;
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: .35rem;
    transition: all .2s;
    line-height: 1;
}
.theme-toggle:hover { border-color: var(--blue-l); color: var(--blue-l); }
.theme-toggle .icon-dark  { display: inline; }
.theme-toggle .icon-light { display: none; }
[data-theme="light"] .theme-toggle .icon-dark  { display: none; }
[data-theme="light"] .theme-toggle .icon-light { display: inline; }

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Outfit', sans-serif;
    background: var(--dark);
    color: var(--text-body);
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--dark2);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--blue-d), var(--primary-d));
    border-radius: 3px;
}

/* ══════════════════════════════════════════
   UTILITY
══════════════════════════════════════════ */
.text-green {
    color: var(--primary) !important;
}

.text-blue {
    color: var(--blue-l) !important;
}

.text-muted-g {
    color: var(--text-muted) !important;
}

.font-mono {
    font-family: 'Space Mono', monospace;
}

.section-title {
    font-size: clamp(1.6rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--white);
    letter-spacing: -.5px;
}

.section-sub {
    color: var(--text-muted);
    font-size: 1.05rem;
    max-width: 600px;
}

.highlight {
    color: var(--primary);
}

.highlight-blue {
    color: var(--blue-l);
}

.highlight-grad {
    background: var(--grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.label-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(65, 84, 241, .1);
    border: 1px solid var(--blue-border);
    color: var(--blue-l);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 14px;
    border-radius: 100px;
    margin-bottom: 1rem;
}

.label-pill.green {
    background: rgba(0, 179, 0, .1);
    border-color: var(--border-g);
    color: var(--primary);
}

.grid-bg {
    background-image:
            radial-gradient(ellipse 70% 50% at 50% 0%, rgba(65, 84, 241, .07) 0%, transparent 60%),
            radial-gradient(rgba(65, 84, 241, .04) 1px, transparent 1px);
    background-size: 100% 100%, 28px 28px;
}

.section-dark {
    background: var(--dark2);
}

.section-darker {
    background: var(--dark3);
}

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn-primary-g {
    background: var(--primary);
    color: #000;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    padding: .7rem 1.6rem;
    font-size: 1rem;
    transition: all .25s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
}

.btn-primary-g:hover {
    background: var(--primary-l);
    box-shadow: 0 0 24px rgba(0, 230, 0, .35);
    transform: translateY(-1px);
    color: #000;
}

.btn-outline-g {
    background: transparent;
    color: var(--text-body);
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .7rem 1.6rem;
    font-size: 1rem;
    transition: all .25s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
}

.btn-outline-g:hover {
    border-color: var(--blue);
    color: var(--blue-l);
    box-shadow: 0 0 16px rgba(65, 84, 241, .2);
    transform: translateY(-1px);
}

.btn-blue {
    background: var(--blue);
    color: #fff;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    padding: .7rem 1.6rem;
    font-size: 1rem;
    transition: all .25s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(65, 84, 241, .3);
}

.btn-blue:hover {
    background: var(--blue-l);
    box-shadow: 0 0 24px var(--blue-glow);
    transform: translateY(-1px);
    color: #fff;
}

.btn-grad {
    background: var(--grad-primary);
    color: #fff;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    padding: .7rem 1.6rem;
    font-size: 1rem;
    transition: all .3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(65, 84, 241, .25);
}

.btn-grad:hover {
    filter: brightness(1.12);
    box-shadow: 0 6px 28px rgba(65, 84, 241, .4);
    transform: translateY(-2px);
    color: #fff;
}

/* ══════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════ */
.navbar {
    background: rgba(9, 11, 18, .93);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    padding: .75rem 0;
    position: sticky;
    top: 0;
    z-index: 1050;
}

.navbar-brand {
    font-size: 1.45rem;
    font-weight: 900;
    color: var(--white) !important;
    letter-spacing: -.5px;
    text-decoration: none;
}

.navbar-brand span {
    color: var(--blue-l);
}

.nav-link {
    color: var(--text-body) !important;
    font-weight: 500;
    font-size: .92rem;
    transition: color .2s;
    padding: .4rem .75rem !important;
}

.nav-link:hover {
    color: var(--primary-d) !important;
}

.nav-link.active {
    color: var(--primary) !important;
}

.btn-nav-register {
    background: var(--bs-success);
    color: #fff !important;
    font-weight: 700;
    border-radius: 8px;
    padding: .4rem 1.1rem !important;
    transition: background .2s, box-shadow .2s;
    box-shadow: 0 2px 12px rgba(65, 170, 40, 0.3);
}

.btn-nav-register:hover {
    background: var(--ins-green);
    color: #fff;
}

.btn-nav-login {
    border: 1px solid var(--blue-border);
    color: var(--text-body) !important;
    font-weight: 600;
    border-radius: 8px;
    padding: .4rem 1.1rem !important;
    transition: border-color .2s, color .2s;
}

.btn-nav-login:hover {
    border-color: var(--blue);
    color: var(--blue-l) !important;
}

.navbar-toggler {
    border: 1px solid var(--border);
    background: none;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    padding: 0;
}

.navbar-toggler:hover {
    background: var(--blue-soft);
    border-color: var(--blue);
}

.navbar-toggler i {
    font-size: 1.2rem;
    color: var(--blue-l);
    transition: transform .3s;
}

.navbar-toggler.open i {
    transform: rotate(90deg);
}

/* ══════════════════════════════════════════
   LEFT DRAWER
══════════════════════════════════════════ */
.nav-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0, 0, 0, .65);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .3s;
}

.nav-drawer-overlay.show {
    display: block;
}

.nav-drawer-overlay.visible {
    opacity: 1;
}

.nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(300px, 85vw);
    z-index: 1050;
    background: var(--dark2);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 8px 0 48px rgba(65, 84, 241, .15), 4px 0 20px rgba(0, 0, 0, .6);
}

.nav-drawer.open {
    transform: translateX(0);
}

.nav-drawer::before {
    content: '';
    height: 3px;
    background: var(--grad-primary);
    display: block;
    flex-shrink: 0;
}

.nav-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.nav-drawer-brand {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--white);
    text-decoration: none;
    letter-spacing: -.3px;
}

.nav-drawer-brand span {
    color: var(--blue-l);
}

.nav-drawer-close {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all .2s;
}

.nav-drawer-close:hover {
    border-color: var(--blue);
    color: var(--blue-l);
}

.nav-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 0;
}

.nav-drawer-body::-webkit-scrollbar {
    width: 3px;
}

.nav-drawer-body::-webkit-scrollbar-thumb {
    background: var(--blue-d);
}

.drawer-section-label {
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--blue);
    opacity: .75;
    padding: .75rem 1.25rem .25rem;
}

.drawer-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: .7rem 1.25rem;
    color: var(--text-body);
    text-decoration: none;
    font-weight: 500;
    font-size: .95rem;
    border-left: 2px solid transparent;
    transition: all .18s;
}

.drawer-link i {
    font-size: .95rem;
    color: var(--text-muted);
    width: 18px;
    text-align: center;
    transition: color .18s;
}

.drawer-link:hover {
    color: var(--blue-l);
    background: var(--blue-soft);
    border-left-color: var(--blue);
}

.drawer-link:hover i {
    color: var(--blue-l);
}

.drawer-link.active {
    color: var(--primary);
    border-left-color: var(--primary);
    background: rgba(0, 179, 0, .07);
}

.drawer-link.active i {
    color: var(--primary);
}

.drawer-link.drawer-sub {
    padding-left: 2.8rem;
    font-size: .88rem;
    color: var(--text-muted);
}

.drawer-divider {
    border-color: var(--border);
    margin: .5rem 1.25rem;
}

.nav-drawer-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.drawer-btn-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--blue-border);
    border-radius: 10px;
    padding: .6rem 1rem;
    color: var(--text-body);
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    transition: border-color .2s, color .2s;
}

.drawer-btn-login:hover {
    border-color: var(--blue);
    color: var(--blue-l);
}

.drawer-btn-register {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--blue);
    border: none;
    border-radius: 10px;
    padding: .65rem 1rem;
    color: #fff;
    font-weight: 700;
    font-size: .92rem;
    text-decoration: none;
    transition: background .2s, box-shadow .2s;
    box-shadow: 0 2px 16px rgba(65, 84, 241, .3);
}

.drawer-btn-register:hover {
    background: var(--blue-l);
    box-shadow: 0 0 20px var(--blue-glow);
    color: #fff;
}

.drawer-live {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    color: var(--text-muted);
    padding: .5rem 1.25rem;
}

.drawer-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    animation: pulse 1.5s infinite;
}

/* ══════════════════════════════════════════
   PAGE HERO BANNER (inner pages)
══════════════════════════════════════════ */
.page-hero {
    background:
            radial-gradient(ellipse 80% 60% at 70% 40%, rgba(65, 84, 241, .09) 0%, transparent 60%),
            radial-gradient(ellipse 50% 40% at 20% 80%, rgba(0, 179, 0, .05) 0%, transparent 60%),
            var(--dark2);
    border-bottom: 1px solid var(--border);
    padding: 3.5rem 0 2.5rem;
}

.page-hero-eyebrow {
    font-family: 'Space Mono', monospace;
    font-size: .75rem;
    color: var(--blue-l);
    letter-spacing: .15em;
    text-transform: uppercase;
    margin-bottom: .5rem;
}

.page-hero h1 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 900;
    color: var(--white);
    letter-spacing: -1px;
    line-height: 1.1;
}

.page-hero p {
    color: var(--text-muted);
    font-size: 1.05rem;
    max-width: 520px;
    line-height: 1.65;
    margin-top: .75rem;
}

/* ══════════════════════════════════════════
   CARDS
══════════════════════════════════════════ */
.feature-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.5rem;
    transition: border-color .25s, transform .25s, box-shadow .25s;
}

.feature-card:hover {
    border-color: var(--blue);
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(65, 84, 241, .1), 0 0 0 1px rgba(65, 84, 241, .08);
}

.feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--blue-soft);
    border: 1px solid var(--blue-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--blue-l);
}

.feature-icon.green {
    background: rgba(0, 179, 0, .1);
    border-color: var(--border-g);
    color: var(--primary);
}

.feature-card h5 {
    color: var(--white);
    font-weight: 700;
    font-size: 1rem;
}

.feature-card p {
    color: var(--text-muted);
    font-size: .9rem;
    margin: 0;
}

/* ── CHECKLIST ── */
.checklist {
    list-style: none;
    padding: 0;
}

.checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--text-body);
    margin-bottom: .65rem;
    font-size: .97rem;
}

.checklist li::before {
    content: '✓';
    color: var(--primary);
    font-weight: 700;
    margin-top: 1px;
    flex-shrink: 0;
}

/* ── STEP CARDS ── */
.step-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.5rem 1.25rem;
    height: 100%;
    transition: border-color .2s;
}

.step-card:hover {
    border-color: var(--blue);
}

.step-number {
    font-family: 'Space Mono', monospace;
    font-size: .75rem;
    font-weight: 700;
    color: var(--blue-l);
    background: var(--blue-soft);
    border: 1px solid var(--blue-border);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.step-card h5 {
    color: var(--white);
    font-weight: 700;
    font-size: 1rem;
}

.step-card p {
    color: var(--text-muted);
    font-size: .88rem;
    margin: 0;
}

/* ══════════════════════════════════════════
   TAB SWITCHER
══════════════════════════════════════════ */
.tab-switcher {
    display: inline-flex;
    background: var(--dark3);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    margin-bottom: 2rem;
}

.tab-switcher button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-weight: 600;
    font-size: .9rem;
    padding: .45rem 1.2rem;
    border-radius: 9px;
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
}

.tab-switcher button.active {
    background: var(--blue);
    color: #fff;
    box-shadow: 0 2px 12px rgba(65, 84, 241, .35);
}

.about-panel {
    display: none;
}

.about-panel.active {
    display: block;
}

/* ══════════════════════════════════════════
   STATS BAR
══════════════════════════════════════════ */
.stats-bar {
    background: var(--dark3);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

.stats-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--grad-primary);
    opacity: .5;
}

.stat-block {
    text-align: center;
    padding: 1.5rem .5rem;
}

.stat-number {
    font-family: 'Space Mono', monospace;
    font-size: 2rem;
    font-weight: 700;
    background: var(--primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label {
    color: var(--text-muted);
    font-size: .85rem;
}

/* ── LIVE BADGE ── */
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 179, 0, .08);
    border: 1px solid rgba(0, 179, 0, .25);
    color: var(--primary);
    font-size: .78rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 100px;
}

.live-badge.blue {
    background: var(--blue-soft);
    border-color: var(--blue-border);
    color: var(--blue-l);
}

.live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    animation: pulse 1.5s ease-in-out infinite;
}

.live-dot.blue {
    background: var(--blue-l);
    animation-name: pulse-blue;
}

/* ══════════════════════════════════════════
   PRICING
══════════════════════════════════════════ */
.pricing-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 2rem 1.5rem;
    position: relative;
    height: 100%;
    transition: border-color .25s, transform .25s, box-shadow .25s;
}

.pricing-card:hover {
    border-color: var(--blue);
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(65, 84, 241, .1);
}

.pricing-card.featured {
    border-color: var(--primary);
    box-shadow: 0 0 40px rgba(0, 179, 0, .12);
}

.featured-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--grad-primary);
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 14px;
    border-radius: 100px;
    white-space: nowrap;
}

.pricing-name {
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-muted);
    margin-bottom: .25rem;
}

.pricing-rate {
    font-family: 'Space Mono', monospace;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1;
}

.pricing-rate span {
    font-size: 1rem;
    color: var(--text-muted);
}

.pricing-meta {
    color: var(--text-muted);
    font-size: .88rem;
}

.pricing-divider {
    border-color: rgba(65, 84, 241, .12);
    margin: 1.25rem 0;
}

.pricing-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-body);
    font-size: .9rem;
    margin-bottom: .5rem;
}

.pricing-feature i {
    color: var(--primary);
    font-size: .9rem;
}

.hashpay-plan-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.75rem 1.5rem;
    height: 100%;
    transition: border-color .25s, transform .25s, box-shadow .25s;
}

.hashpay-plan-card:hover {
    border-color: var(--blue);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(65, 84, 241, .1);
}

.plan-price {
    font-family: 'Space Mono', monospace;
    font-size: 2rem;
    font-weight: 700;
    color: var(--blue-l);
}

.plan-duration {
    color: var(--text-muted);
    font-size: .85rem;
}

.savings-badge {
    background: var(--blue-soft);
    color: var(--blue-l);
    font-size: .75rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 100px;
    border: 1px solid var(--blue-border);
}

/* ══════════════════════════════════════════
   FAQ
══════════════════════════════════════════ */
.faq-item {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: .75rem;
    overflow: hidden;
    transition: border-color .2s;
}

.faq-item:hover {
    border-color: var(--blue-border);
}

.faq-item.open {
    border-color: var(--blue);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 1.25rem;
    cursor: pointer;
    color: var(--white);
    font-weight: 600;
    font-size: .97rem;
    gap: 1rem;
}

.faq-icon {
    color: var(--blue-l);
    font-size: 1.1rem;
    transition: transform .25s;
    flex-shrink: 0;
}

.faq-item.open .faq-icon {
    transform: rotate(45deg);
    color: var(--primary);
}

.faq-answer {
    display: none;
    padding: 0 1.25rem 1.1rem;
    color: var(--text-muted);
    font-size: .92rem;
    line-height: 1.65;
}

.faq-item.open .faq-answer {
    display: block;
}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
footer {
    background: var(--dark2);
    border-top: 1px solid var(--border);
    padding: 3.5rem 0 1.5rem;
    position: relative;
    overflow: hidden;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--grad-primary);
    opacity: .6;
}

.footer-brand {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--white);
}

.footer-brand span {
    color: var(--blue-l);
}

.footer-tagline {
    color: var(--text-muted);
    font-size: .88rem;
    margin-top: .4rem;
}

.footer-heading {
    color: var(--white);
    font-weight: 700;
    font-size: .92rem;
    margin-bottom: 1rem;
    letter-spacing: .04em;
}

.footer-link {
    display: block;
    color: var(--text-muted);
    text-decoration: none;
    font-size: .88rem;
    margin-bottom: .5rem;
    transition: color .2s;
}

.footer-link:hover {
    color: var(--blue-l);
}

.footer-bottom {
    border-top: 1px solid var(--border);
    padding-top: 1.25rem;
    margin-top: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.footer-bottom p {
    margin: 0;
    font-size: .83rem;
    color: var(--text-muted);
}

/* ══════════════════════════════════════════
   MODALS
══════════════════════════════════════════ */
.modal-content {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 18px;
    color: var(--text-body);
    overflow: hidden;
}

.modal-content::before {
    content: '';
    display: block;
    height: 3px;
    background: var(--grad-primary);
}

.modal-header {
    border-bottom: 1px solid var(--border);
}

.modal-title {
    color: var(--white);
    font-weight: 700;
}

.btn-close {
    filter: invert(.6) sepia(1) saturate(2) hue-rotate(190deg);
}

.form-control,
.form-select {
    background: var(--dark3);
    border: 1px solid var(--border);
    color: var(--text-body) !important;
    border-radius: 10px;
}

.form-control:focus,
.form-select:focus {
    background: var(--dark3);
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(65, 84, 241, .15);
}

.form-control::placeholder {
    color: var(--text-muted) !important;
}

.form-select option {
    background: var(--dark3);
}

.form-label {
    color: var(--text-body);
    font-weight: 500;
    font-size: .9rem;
}

.dropdown-menu {
    background: var(--dark3);
    border: 1px solid var(--border);
}

.dropdown-item {
    color: var(--text-body);
    transition: background .15s;
}

.dropdown-item:hover {
    background: var(--blue-soft);
    color: var(--blue-l);
}

/* ══════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════ */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.fade-up {
    animation: fadeUp .6s ease both;
}

.delay-1 {
    animation-delay: .1s;
}

.delay-2 {
    animation-delay: .2s;
}

.delay-3 {
    animation-delay: .3s;
}

.delay-4 {
    animation-delay: .4s;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-12px)
    }
}

.float {
    animation: float 4s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(0, 179, 0, .45)
    }

    50% {
        box-shadow: 0 0 0 6px rgba(0, 179, 0, 0)
    }
}

@keyframes pulse-blue {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(65, 84, 241, .45)
    }

    50% {
        box-shadow: 0 0 0 6px rgba(65, 84, 241, 0)
    }
}

@keyframes blink {

    0%,
    50% {
        opacity: 1
    }

    51%,
    100% {
        opacity: 0
    }
}

/* ══════════════════════════════════════════
   TERMINAL MOCKUP
══════════════════════════════════════════ */
.hero-mockup {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(65, 84, 241, .08);
}

.mockup-bar {
    background: var(--dark3);
    padding: .7rem 1rem;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid var(--border);
}

.mockup-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.mockup-dot.r {
    background: #ff5f57;
}

.mockup-dot.y {
    background: #febc2e;
}

.mockup-dot.g {
    background: #28c840;
}

.mockup-title {
    font-size: .78rem;
    color: var(--text-muted);
    margin-left: auto;
    font-family: monospace;
}

.mockup-body {
    padding: 1.25rem;
    font-family: 'Space Mono', monospace;
    font-size: .82rem;
    line-height: 1.8;
}

.mockup-body .comment {
    color: #4a5278;
    font-style: italic;
}

.mockup-body .key {
    color: var(--blue-l);
}

.mockup-body .val {
    color: var(--primary);
}

.mockup-body .str {
    color: #f9d56e;
}

.mockup-body .num {
    color: #e06c75;
}

.mockup-body .cursor {
    display: inline-block;
    width: 8px;
    height: 14px;
    background: var(--blue-l);
    animation: blink 1s infinite;
    vertical-align: middle;
}

/* ══════════════════════════════════════════
   DECODE DEMO
══════════════════════════════════════════ */
.decode-demo {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 2rem;
    max-width: 620px;
    margin: 0 auto;
    box-shadow: 0 8px 32px rgba(65, 84, 241, .08);
}

.decode-input {
    background: var(--dark3);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-body);
    font-family: 'Space Mono', monospace;
    font-size: .85rem;
    padding: .8rem 1rem;
    width: 100%;
    transition: border-color .2s;
    outline: none;
}

.decode-input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(65, 84, 241, .12);
}

.decode-input::placeholder {
    color: var(--text-muted);
}

.decode-result {
    background: rgba(65, 84, 241, .06);
    border: 1px solid var(--blue-border);
    border-radius: 10px;
    padding: 1rem;
    font-family: 'Space Mono', monospace;
    font-size: .85rem;
    color: var(--blue-l);
    margin-top: .75rem;
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.decode-result.success {
    background: rgba(0, 179, 0, .06);
    border-color: rgba(0, 179, 0, .2);
    color: var(--primary);
}

/* ══════════════════════════════════════════
   HERO CAROUSEL
══════════════════════════════════════════ */
.hero {
    min-height: 92vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero-eyebrow {
    font-family: 'Space Mono', monospace;
    font-size: .75rem;
    color: var(--blue-l);
    letter-spacing: .15em;
    text-transform: uppercase;
    margin-bottom: .5rem;
}

.hero-title {
    font-size: clamp(2rem, 5.5vw, 3.8rem);
    font-weight: 900;
    color: var(--white);
    line-height: 1.08;
    letter-spacing: -1.5px;
}

.hero-title .highlight {
    color: var(--primary);
}

.hero-title .highlight-b {
    color: var(--blue-l);
}

.hero-subtitle {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 520px;
    line-height: 1.65;
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 2rem;
}

.hero-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    color: var(--text-muted);
}

.hero-stat i {
    color: var(--blue-l);
    font-size: 1rem;
}

.hero-stat strong {
    color: var(--white);
}

#heroCarousel .carousel-item {
    transition: opacity .75s ease;
}

#heroCarousel .carousel-item .hero {
    min-height: 92vh;
}

/* Slide backgrounds */
.hashpay-slide {
    background:
            radial-gradient(ellipse 80% 60% at 65% 40%, rgba(65, 84, 241, .1) 0%, transparent 65%),
            radial-gradient(ellipse 50% 40% at 20% 70%, rgba(0, 179, 0, .05) 0%, transparent 60%),
            radial-gradient(rgba(65, 84, 241, .03) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 28px 28px;
}

.hashback-slide {
    background:
            radial-gradient(ellipse 70% 60% at 30% 40%, rgba(0, 179, 0, .06) 0%, transparent 65%),
            radial-gradient(ellipse 50% 40% at 80% 70%, rgba(65, 84, 241, .08) 0%, transparent 60%),
            radial-gradient(rgba(65, 84, 241, .025) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 28px 28px;
}

/* Product switcher pills */
.hero-product-labels {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    z-index: 20;
    display: flex;
    gap: 6px;
}

.hero-prod-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(9, 11, 18, .75);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-family: 'Outfit', sans-serif;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 5px 14px;
    border-radius: 100px;
    cursor: pointer;
    transition: all .2s;
}

.hero-prod-btn.active {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
    box-shadow: 0 2px 12px var(--blue-glow);
}

.hero-prod-btn:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

/* Dot indicators */
.hero-carousel-indicators {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    gap: 8px;
}

.hero-carousel-indicators button {
    width: 28px;
    height: 4px;
    border-radius: 2px;
    background: rgba(65, 84, 241, .2);
    border: none;
    padding: 0;
    transition: all .3s;
    cursor: pointer;
}

.hero-carousel-indicators button.active {
    width: 48px;
    background: var(--blue);
    box-shadow: 0 0 10px var(--blue-glow);
}

/* Arrow controls */
.hero-carousel-ctrl {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(9, 11, 18, .7);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s;
}

.hero-carousel-ctrl:hover {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
    box-shadow: 0 0 16px var(--blue-glow);
}

.hero-carousel-ctrl.prev {
    left: 1rem;
}

.hero-carousel-ctrl.next {
    right: 1rem;
}

/* Progress bar */
.carousel-progress {
    height: 2px;
    background: var(--dark3);
    overflow: hidden;
}

.carousel-progress-bar {
    height: 100%;
    background: var(--grad-primary);
    width: 0%;
    transition: width 7s linear;
    box-shadow: 0 0 8px rgba(65, 84, 241, .5);
}

/* ══════════════════════════════════════════
   SIMULATOR
══════════════════════════════════════════ */
.sim-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 2rem;
}

.sim-result-box {
    background: var(--dark3);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
    font-family: 'Space Mono', monospace;
    font-size: .8rem;
    line-height: 1.75;
    min-height: 180px;
    color: var(--text-body);
    overflow-x: auto;
}

.sim-result-box .r-key {
    color: var(--blue-l);
}

.sim-result-box .r-val {
    color: var(--primary);
}

.sim-result-box .r-str {
    color: #f9d56e;
}

.sim-result-box .r-num {
    color: #e06c75;
}

.sim-result-box .r-hash {
    color: #c792ea;
}

.sim-result-box .r-muted {
    color: var(--text-muted);
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width:991px) {
    #heroCarousel .carousel-item .hero {
        min-height: auto;
    }

    .hero-product-labels {
        top: .75rem;
        right: .75rem;
    }

    .hero-carousel-ctrl {
        display: none;
    }

    .hero-prod-btn {
        font-size: .72rem;
        padding: 4px 10px;
    }
}

@media (max-width:767px) {
    .hero {
        min-height: auto;
        padding: 4rem 0 3rem;
    }

    .hero-title {
        letter-spacing: -.5px;
    }

    .tab-switcher {
        flex-wrap: wrap;
    }
}
/* ═══════════════════════════════
        TOP BAR
     ═══════════════════════════════ */
 .topbar {
     position:fixed; top:0; left:0; right:0; z-index:900;
     height:var(--topbar-h);
     background:rgba(9,11,18,.96);
     backdrop-filter:blur(20px);
     border-bottom:1px solid var(--border);
     display:flex; align-items:center;
     padding:0 1.25rem; gap:.85rem;
 }
.topbar-brand {
    font-size:1.15rem; font-weight:900;
    color:var(--white); text-decoration:none; letter-spacing:-.3px;
    white-space:nowrap;
}
.topbar-brand span{color:var(--blue-l);}
.topbar-divider{width:1px;height:22px;background:var(--border);flex-shrink:0;}

/* Product switcher in topbar */
.topbar-prod-switch{
    display:flex; gap:3px;
    background:var(--dark3); border:1px solid var(--border);
    border-radius:9px; padding:3px;
}
.topbar-prod-btn{
    background:transparent; border:none;
    color:var(--text-muted); font-family:'Outfit',sans-serif;
    font-size:.8rem; font-weight:600;
    padding:.3rem .85rem; border-radius:7px;
    cursor:pointer; transition:all .2s;
    display:flex; align-items:center; gap:5px;
}
.topbar-prod-btn i{font-size:.8rem;}
.topbar-prod-btn.active{background:var(--blue);color:#fff;box-shadow:0 2px 10px var(--blue-glow);}
.topbar-prod-btn.active.green{background:var(--primary);color:#000;box-shadow:0 2px 10px rgba(0,179,0,.35);}

.topbar-right{
    margin-left:auto; display:flex; align-items:center; gap:.6rem;
}
.topbar-date{
    font-family:'Space Mono',monospace; font-size:.72rem;
    color:var(--text-muted); white-space:nowrap;
}
.topbar-avatar{
    width:34px; height:34px; border-radius:50%;
    background:var(--grad);
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:.82rem; color:#fff; cursor:pointer;
    border:2px solid var(--border); flex-shrink:0;
}
.topbar-logout{
    background:none; border:1px solid var(--border); color:var(--text-muted);
    border-radius:8px; width:34px; height:34px;
    display:flex; align-items:center; justify-content:center;
    font-size:.95rem; cursor:pointer; transition:all .2s; text-decoration:none;
}
.topbar-logout:hover{border-color:var(--red);color:var(--red);}

.sidebar-toggle{
    background:none; border:1px solid var(--border); color:var(--blue-l);
    border-radius:8px; width:34px; height:34px; cursor:pointer;
    display:none; align-items:center; justify-content:center;
    font-size:1.1rem; transition:all .2s; flex-shrink:0;
}
.sidebar-toggle:hover{background:var(--blue-soft);}

/* ═══════════════════════════════
   SIDEBAR
═══════════════════════════════ */
.sidebar {
    position:fixed; top:var(--topbar-h); left:0; bottom:0;
    width:var(--sidebar-w);
    background:var(--dark2); border-right:1px solid var(--border);
    display:flex; flex-direction:column;
    overflow-y:auto; z-index:800;
    transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.sidebar::-webkit-scrollbar{width:3px;}
.sidebar.hidden{transform:translateX(-100%);}

.sidebar-overlay{
    display:none; position:fixed; inset:0; z-index:750;
    background:rgba(0,0,0,.55); backdrop-filter:blur(4px);
}
.sidebar-overlay.show{display:block;}

/* Gradient accent bar at top */
.sidebar::before{
    content:''; height:2px; background:var(--grad);
    display:block; flex-shrink:0;
}

.sidebar-user {
    padding:1rem 1.1rem;
    border-bottom:1px solid var(--border);
}
.sidebar-user-name{
    font-weight:700; font-size:.92rem; color:var(--white);
}
.sidebar-user-email{
    font-size:.75rem; color:var(--text-muted); margin-top:1px;
}
.sidebar-badge{
    display:inline-flex; align-items:center; gap:4px;
    font-size:.65rem; font-weight:700; padding:2px 8px; border-radius:100px;
    margin-top:.35rem;
}
.sidebar-badge.both   {background:var(--grad);color:#fff;}
.sidebar-badge.hb     {background:rgba(0,179,0,.15);border:1px solid var(--border-g);color:var(--primary);}
.sidebar-badge.hp     {background:var(--blue-soft);border:1px solid var(--blue-border);color:var(--blue-l);}

.sidebar-nav{flex:1;padding:.75rem 0;}
.sidebar-section-label{
    font-size:.62rem; font-weight:800; text-transform:uppercase;
    letter-spacing:.12em; color:var(--blue); opacity:.6;
    padding:.6rem 1.1rem .2rem;
}
.sidebar-link{
    display:flex; align-items:center; gap:9px;
    padding:.52rem 1.1rem;
    color:var(--text-muted); text-decoration:none;
    font-size:.86rem; font-weight:500;
    border-left:2px solid transparent;
    transition:all .18s; cursor:pointer;
}
.sidebar-link i{font-size:.86rem;width:16px;text-align:center;flex-shrink:0;}
.sidebar-link:hover{color:var(--blue-l);background:var(--blue-soft);border-left-color:var(--blue);}
.sidebar-link.active{color:var(--primary);background:rgba(0,179,0,.07);}
.sidebar-link.active i{color:var(--primary);}
.sidebar-link.hidden-link{display:none;}
.sidebar-divider{border-color:var(--border);margin:.4rem 1.1rem;}
.sidebar-collapsible-group{display:flex;flex-direction:column;}
.sidebar-parent-link{display:flex;align-items:center;gap:9px;cursor:pointer;}
.sidebar-parent-link .sidebar-chevron{margin-left:auto;flex-shrink:0;}
.sidebar-sub-menu{background:rgba(0,0,0,.08);}
.sidebar-sub-link{padding-left:2.4rem !important;font-size:.82rem !important;border-left:2px solid transparent;}

.sidebar-bottom{
    padding:.75rem 1.1rem 1rem;
    border-top:1px solid var(--border);
}

/* ═══════════════════════════════
   MAIN LAYOUT
═══════════════════════════════ */
.dash-main{
    margin-left:var(--sidebar-w);
    margin-top:var(--topbar-h);
    padding:1.75rem 1.75rem 3rem;
    min-height:calc(100vh - var(--topbar-h));
}

/* ── PAGE HEADER ── */
.page-header{
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:1rem; margin-bottom:1.75rem;
}
.page-title{
    font-size:1.35rem; font-weight:900; color:var(--white);
    letter-spacing:-.4px; margin:0;
}
.page-title span{color:var(--blue-l);}
.page-title span.green{color:var(--primary);}
.page-subtitle{font-size:.85rem;color:var(--text-muted);margin-top:.2rem;}

.header-actions{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;}
.btn-sm-action{
    display:inline-flex; align-items:center; gap:5px;
    border:1px solid var(--border); border-radius:8px;
    background:transparent; color:var(--text-muted);
    font-family:'Outfit',sans-serif; font-size:.82rem; font-weight:600;
    padding:.32rem .85rem; cursor:pointer; transition:all .2s;
}
.btn-sm-action:hover{border-color:var(--blue);color:var(--blue-l);}
.btn-sm-action.primary{background:var(--blue);border-color:var(--blue);color:#fff;}
.btn-sm-action.primary:hover{background:var(--blue-l);}
.btn-sm-action.green{background:var(--primary);border-color:var(--primary);color:#000;}
.btn-sm-action.green:hover{background:var(--primary-l);}

/* ── PERIOD TABS ── */
.period-tabs{
    display:inline-flex; background:var(--dark3); border:1px solid var(--border);
    border-radius:8px; padding:3px; gap:2px;
}
.period-tab{
    background:transparent; border:none; color:var(--text-muted);
    font-family:'Outfit',sans-serif; font-size:.78rem; font-weight:600;
    padding:.28rem .75rem; border-radius:6px; cursor:pointer; transition:all .18s;
}
.period-tab.active{background:var(--blue);color:#fff;box-shadow:0 2px 8px var(--blue-glow);}

/* ── STAT CARDS ── */
.stat-card{
    background:var(--card-bg); border:1px solid var(--border);
    border-radius:14px; padding:1.25rem 1.35rem;
    position:relative; overflow:hidden;
    transition:border-color .2s, transform .2s, box-shadow .2s;
    height:100%;
}
.stat-card:hover{
    border-color:var(--blue); transform:translateY(-2px);
    box-shadow:0 12px 32px rgba(65,84,241,.1);
}
.stat-card::after{
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:var(--grad); opacity:.5;
}
.stat-card.green::after{background:linear-gradient(90deg,var(--primary),transparent);}
.stat-card.blue::after {background:linear-gradient(90deg,var(--blue),transparent);}
.stat-card.amber::after{background:linear-gradient(90deg,var(--amber),transparent);}
.stat-card.red::after  {background:linear-gradient(90deg,var(--red),transparent);}
.stat-card.purple::after{background:linear-gradient(90deg,var(--purple),transparent);}

.stat-label{
    font-size:.75rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.08em; color:var(--text-muted); margin-bottom:.5rem;
    display:flex; align-items:center; gap:6px;
}
.stat-label i{font-size:.8rem;}
.stat-value{
    font-family:'Space Mono',monospace; font-size:1.7rem; font-weight:700;
    color:var(--white); line-height:1; margin-bottom:.35rem;
}
.stat-value.sm{font-size:1.35rem;}
.stat-change{
    display:inline-flex; align-items:center; gap:4px;
    font-size:.75rem; font-weight:600; padding:2px 8px; border-radius:100px;
}
.stat-change.up  {background:rgba(0,179,0,.12);color:var(--primary);}
.stat-change.down{background:rgba(224,108,117,.12);color:var(--red);}
.stat-change.flat{background:rgba(122,133,176,.1);color:var(--text-muted);}
.stat-since{font-size:.72rem;color:var(--text-muted);margin-left:.4rem;}
.stat-icon-wrap{
    position:absolute; top:1.1rem; right:1.1rem;
    width:38px; height:38px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.1rem;
}

/* ── CHART CARD ── */
.chart-card{
    background:var(--card-bg); border:1px solid var(--border);
    border-radius:14px; overflow:hidden;
    transition:border-color .2s;
}
.chart-card:hover{border-color:var(--blue-border);}
.chart-card-header{
    padding:.9rem 1.25rem;
    border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:.5rem;
}
.chart-card-title{
    font-size:.92rem; font-weight:700; color:var(--white);
    display:flex; align-items:center; gap:7px;
}
.chart-card-title i{color:var(--blue-l);font-size:.9rem;}
.chart-card-body{padding:1rem 1.25rem;}
.chart-box{width:100%;}

/* ── TABLE ── */
.dash-table{width:100%;border-collapse:collapse;font-size:.85rem;}
.dash-table th{
    background:var(--dark3); color:var(--text-muted);
    font-size:.7rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.07em; padding:.55rem 1rem; text-align:left;
    border-bottom:1px solid var(--border);
}
.dash-table td{
    padding:.65rem 1rem; border-bottom:1px solid rgba(65,84,241,.07);
    color:var(--text-body); vertical-align:middle;
}
.dash-table tr:last-child td{border-bottom:none;}
.dash-table tr:hover td{background:rgba(65,84,241,.04);}

/* ── BADGES ── */
.badge-status{
    display:inline-flex; align-items:center; gap:4px;
    font-size:.7rem; font-weight:700; padding:2px 9px; border-radius:100px;
}
.badge-status.success{background:rgba(0,179,0,.12);color:var(--primary);border:1px solid rgba(0,179,0,.2);}
.badge-status.pending{background:rgba(254,188,46,.1);color:var(--amber);border:1px solid rgba(254,188,46,.2);}
.badge-status.failed {background:rgba(224,108,117,.1);color:var(--red);border:1px solid rgba(224,108,117,.2);}

/* ── CREDIT PROGRESS BAR ── */
.credit-bar-wrap{
    background:var(--dark3); border-radius:100px; height:8px;
    overflow:hidden; margin:.5rem 0;
}
.credit-bar{
    height:100%; border-radius:100px;
    background:linear-gradient(90deg,var(--primary),var(--blue-l));
    transition:width .6s cubic-bezier(.4,0,.2,1);
}

/* ── INSIGHT CARDS ── */
.insight-card{
    background:var(--dark3); border:1px solid var(--border);
    border-radius:12px; padding:1rem 1.1rem;
    display:flex; align-items:flex-start; gap:.85rem;
}
.insight-icon{
    width:36px; height:36px; border-radius:9px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:.95rem;
}
.insight-icon.blue  {background:var(--blue-soft);color:var(--blue-l);}
.insight-icon.green {background:rgba(0,179,0,.1);color:var(--primary);}
.insight-icon.amber {background:rgba(254,188,46,.1);color:var(--amber);}
.insight-icon.red   {background:rgba(224,108,117,.1);color:var(--red);}
.insight-title{font-size:.83rem;font-weight:700;color:var(--white);margin-bottom:.2rem;}
.insight-text {font-size:.78rem;color:var(--text-muted);line-height:1.55;}

/* ── ACCOUNT CHIP ── */
.account-chip{
    display:flex; align-items:center; gap:.75rem;
    background:var(--dark3); border:1px solid var(--border);
    border-radius:12px; padding:.75rem 1rem;
    transition:border-color .2s;
}
.account-chip:hover{border-color:var(--blue-border);}
.account-chip-icon{
    width:38px; height:38px; border-radius:10px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.account-chip-label{font-size:.72rem;color:var(--text-muted);font-weight:600;}
.account-chip-value{font-size:.92rem;font-weight:700;color:var(--white);}
.account-chip-status{
    margin-left:auto; font-size:.68rem; font-weight:700;
    padding:2px 8px; border-radius:100px;
}
.account-chip-status.active{background:rgba(0,179,0,.12);color:var(--primary);}

/* ── WALLET BALANCE BIG ── */
.wallet-big{
    background:linear-gradient(135deg,rgba(65,84,241,.12) 0%,rgba(0,179,0,.06) 100%);
    border:1px solid var(--blue-border);
    border-radius:16px; padding:1.75rem;
    position:relative; overflow:hidden;
}
.wallet-big::before{
    content:''; position:absolute; top:0;left:0;right:0; height:3px;
    background:var(--grad);
}
.wallet-big-label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);}
.wallet-big-amount{
    font-family:'Space Mono',monospace; font-size:2.4rem; font-weight:700;
    color:var(--white); line-height:1.1; margin:.35rem 0;
}
.wallet-big-currency{font-size:1.2rem;color:var(--blue-l);}

/* ── LIVE BADGE ── */
.live-badge{
    display:inline-flex; align-items:center; gap:5px;
    background:rgba(0,179,0,.08); border:1px solid rgba(0,179,0,.2);
    color:var(--primary); font-size:.72rem; font-weight:600;
    padding:3px 10px; border-radius:100px;
}
.live-dot{
    width:6px; height:6px; border-radius:50%; background:var(--primary);
    animation:pulse 1.5s ease-in-out infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(0,179,0,.5)}50%{box-shadow:0 0 0 5px rgba(0,179,0,0)}}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}

/* ── SECTION DIVIDER ── */
.section-gap{margin-top:1.75rem;}

/* ── EMPTY SECTION ── */
.empty-state{
    text-align:center; padding:3rem 1rem;
    color:var(--text-muted); font-size:.88rem;
}
.empty-state i{font-size:2.5rem;color:var(--border);display:block;margin-bottom:.75rem;}

/* ── PRODUCT PANELS ── */
.product-panel{display:none;}
.product-panel.active{display:block;}

/* ── RESPONSIVE ── */
@media(max-width:991px){
    .dash-main{margin-left:0;padding:1.25rem 1rem 2.5rem;}
    .sidebar-toggle{display:flex;}
    .sidebar{box-shadow:4px 0 24px rgba(0,0,0,.5);}
    .topbar-date{display:none;}
}
@media(max-width:575px){
    .stat-value{font-size:1.35rem;}
    .topbar-prod-switch{gap:2px;}
    .topbar-prod-btn{padding:.28rem .6rem;font-size:.75rem;}
}
/* Sidebar Section Labels */
.sidebar-section-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    padding: 0.75rem 1rem 0.5rem;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
}

.sidebar-section-label:first-child {
    margin-top: 0;
}

.sidebar-section-label i {
    font-size: 0.85rem;
}

/* Sidebar Links */
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    margin: 0.125rem 0.5rem;
    border-radius: 10px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.sidebar-link i {
    font-size: 1.1rem;
    width: 1.5rem;
}

.sidebar-link:hover {
    background: rgba(65, 84, 241, 0.08);
    color: var(--white);
}

.sidebar-link.active {
    background: linear-gradient(135deg, rgba(65, 84, 241, 0.15), rgba(0, 179, 0, 0.08));
    color: var(--white);
}

/* Sidebar Badge */
.sidebar-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-top: 0.5rem;
    background: rgba(65, 84, 241, 0.1);
    color: var(--blue-l);
}

.sidebar-badge.hp {
    background: rgba(65, 84, 241, 0.15);
    color: var(--blue-l);
}

.sidebar-badge.hb {
    background: rgba(0, 179, 0, 0.15);
    color: var(--primary);
}

.sidebar-badge.both {
    background: linear-gradient(135deg, rgba(65, 84, 241, 0.15), rgba(0, 179, 0, 0.1));
    color: var(--white);
}

/* Sidebar Divider */
.sidebar-divider {
    margin: 0.75rem 1rem;
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
}

/* Wallet collapsible sub-menu */
.sidebar-sub-link {
    padding-left: 2.5rem !important;
    font-size: 0.82rem !important;
    margin: 0.1rem 0.5rem !important;
}
.sidebar-parent-link { cursor: pointer; }
.sidebar-parent-link .sidebar-chevron { margin-left: auto; flex-shrink: 0; font-size: 0.7rem; }
/* ═══════════════════════════════════════════════════
   KYC ALERT STYLES
═══════════════════════════════════════════════════ */
/* Responsive fixes for sm devices */
@media (max-width: 576px) {
    .kyc-alert {
        padding: 1rem;
        border-radius: 10px;
        margin-bottom: 1.25rem;
    }

    .kyc-alert-content {
        flex-wrap: wrap;
        gap: 0.85rem;
    }

    .kyc-alert-icon {
        width: 38px;
        height: 38px;
        font-size: 1.15rem;
    }

    .kyc-alert-text h4 {
        font-size: 0.9rem;
    }

    .kyc-alert-text p {
        font-size: 0.78rem;
    }

    .kyc-btn {
        width: 100%;
        justify-content: center;
        padding: 0.65rem 1rem;
        font-size: 0.82rem;
        border-radius: 8px;
    }
}
.kyc-alert {
    background: linear-gradient(135deg, rgba(254, 188, 46, 0.12), rgba(65, 84, 241, 0.08));
    border: 1px solid var(--amber);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

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

.kyc-alert:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.kyc-alert-content {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex: 1;
}

.kyc-alert-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(254, 188, 46, 0.2), rgba(254, 188, 46, 0.05));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--amber);
    flex-shrink: 0;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(254, 188, 46, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(254, 188, 46, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(254, 188, 46, 0);
    }
}

.kyc-alert-text {
    flex: 1;
}

.kyc-alert-text h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kyc-alert-text h4 i {
    color: var(--amber);
    font-size: 1rem;
}

.kyc-alert-text p {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.kyc-btn {
    background: linear-gradient(135deg, var(--amber), #ffaa2b);
    color: #000;
    border: none;
    padding: 0.6rem 1.25rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(254, 188, 46, 0.2);
}

.kyc-btn i {
    font-size: 1rem;
}

.kyc-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(254, 188, 46, 0.3);
    background: linear-gradient(135deg, #ffaa2b, var(--amber));
}

.kyc-btn:active {
    transform: translateY(0);
}

/* KYC Alert Variations */
.kyc-alert.warning {
    border-left-color: var(--amber);
    background: linear-gradient(135deg, rgba(254, 188, 46, 0.12), rgba(65, 84, 241, 0.08));
}

.kyc-alert.warning .kyc-alert-icon {
    color: var(--amber);
}

.kyc-alert.error {
    border-left-color: var(--red);
    background: linear-gradient(135deg, rgba(224, 108, 117, 0.12), rgba(65, 84, 241, 0.08));
}

.kyc-alert.error .kyc-alert-icon {
    color: var(--red);
}

.kyc-alert.error .kyc-btn {
    background: linear-gradient(135deg, var(--red), #e06c75);
    box-shadow: 0 2px 8px rgba(224, 108, 117, 0.2);
}

.kyc-alert.success {
    border-left-color: var(--primary);
    background: linear-gradient(135deg, rgba(0, 179, 0, 0.12), rgba(65, 84, 241, 0.08));
}

.kyc-alert.success .kyc-alert-icon {
    color: var(--primary);
}

.kyc-alert.success .kyc-btn {
    background: linear-gradient(135deg, var(--primary), #00cc00);
    box-shadow: 0 2px 8px rgba(0, 179, 0, 0.2);
}

/* ═══════════════════════════════════════════════════
   EMPTY DASHBOARD OVERLAY
═══════════════════════════════════════════════════ */

.dashboard-blur {
    filter: blur(5px);
    pointer-events: none;
    user-select: none;
    transition: filter 0.3s ease;
    position: relative;
}

.empty-dashboard-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(17, 21, 32, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: 24px;
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(8px);
    }
}

.empty-state-card {
    background: linear-gradient(135deg, var(--card-bg), rgba(22, 26, 40, 0.95));
    border: 1px solid var(--border-g);
    border-radius: 24px;
    padding: 2.5rem;
    text-align: center;
    max-width: 500px;
    width: 90%;
    margin: 0 auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.5s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.empty-state-icon {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, rgba(65, 84, 241, 0.15), rgba(0, 179, 0, 0.1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.75rem;
    font-size: 3rem;
    color: var(--primary);
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.empty-state-title {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    background: linear-gradient(135deg, var(--white), var(--blue-l));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.empty-state-text {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 2rem;
}

.btn-primary-gradient {
    background: linear-gradient(135deg, var(--primary), var(--blue-l));
    border: none;
    padding: 0.85rem 2rem;
    border-radius: 12px;
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 4px 12px rgba(65, 84, 241, 0.3);
}

.btn-primary-gradient i {
    font-size: 1.1rem;
}

.btn-primary-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(65, 84, 241, 0.4);
    background: linear-gradient(135deg, var(--blue-l), var(--primary));
}

.btn-primary-gradient:active {
    transform: translateY(0);
}

/* ═══════════════════════════════════════════════════
   KYC MODAL STYLES
═══════════════════════════════════════════════════ */

.kyc-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

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

.kyc-modal-content {
    background: linear-gradient(135deg, var(--card-bg), #13182a);
    border: 1px solid var(--border-g);
    border-radius: 28px;
    max-width: 650px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 2rem;
    animation: slideUp 0.4s ease;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.kyc-modal-content::-webkit-scrollbar {
    width: 6px;
}

.kyc-modal-content::-webkit-scrollbar-track {
    background: var(--dark3);
    border-radius: 3px;
}

.kyc-modal-content::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 3px;
}

.kyc-modal-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--white), var(--blue-l));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* KYC Document Items */
.kyc-doc-item {
    background: rgba(22, 26, 40, 0.6);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s ease;
}

.kyc-doc-item:hover {
    border-color: var(--border-g);
    transform: translateX(4px);
    background: rgba(22, 26, 40, 0.8);
}

.kyc-doc-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(65, 84, 241, 0.15), rgba(0, 179, 0, 0.1));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: var(--primary);
    flex-shrink: 0;
}

.kyc-doc-info {
    flex: 1;
}

.kyc-doc-name {
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.35rem;
    font-size: 0.95rem;
}

.kyc-doc-status {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kyc-doc-status.completed {
    color: var(--primary);
}

.kyc-doc-status.completed::before {
    content: '✓';
    display: inline-block;
    width: 16px;
    height: 16px;
    background: var(--primary);
    border-radius: 50%;
    color: #000;
    font-size: 10px;
    text-align: center;
    line-height: 16px;
}

.btn-upload {
    background: linear-gradient(135deg, var(--primary), var(--blue-l));
    color: white;
    border: none;
    padding: 0.6rem 1.25rem;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.btn-upload:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(65, 84, 241, 0.3);
}

.btn-upload:active {
    transform: translateY(0);
}

/* Modal Actions */
.kyc-modal-actions {
    margin-top: 1.5rem;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════
   INSIGHT CARDS (For empty state)
═══════════════════════════════════════════════════ */

.insight-card {
    background: rgba(22, 26, 40, 0.6);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: all 0.2s ease;
}

.insight-card:hover {
    border-color: var(--border-g);
    transform: translateX(4px);
}

.insight-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.insight-icon.green {
    background: rgba(0, 179, 0, 0.1);
    color: var(--primary);
}

.insight-icon.blue {
    background: rgba(65, 84, 241, 0.1);
    color: var(--blue-l);
}

.insight-icon.amber {
    background: rgba(254, 188, 46, 0.1);
    color: var(--amber);
}

.insight-icon.purple {
    background: rgba(201, 139, 255, 0.1);
    color: var(--purple);
}

.insight-title {
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.25rem;
    font-size: 0.85rem;
}

.insight-text {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE STYLES
═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .kyc-alert {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem;
    }

    .kyc-alert-content {
        width: 100%;
    }

    .kyc-btn {
        width: 100%;
        justify-content: center;
    }

    .empty-state-card {
        padding: 1.5rem;
        margin: 1rem;
    }

    .empty-state-title {
        font-size: 1.25rem;
    }

    .empty-state-icon {
        width: 70px;
        height: 70px;
        font-size: 2rem;
    }

    .kyc-modal-content {
        padding: 1.5rem;
        width: 95%;
    }

    .kyc-doc-item {
        flex-direction: column;
        text-align: center;
    }

    .btn-upload {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .kyc-alert-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    .kyc-alert-text h4 {
        font-size: 0.9rem;
    }

    .kyc-alert-text p {
        font-size: 0.75rem;
    }

    .empty-state-card {
        padding: 1.25rem;
    }

    .btn-primary-gradient {
        padding: 0.7rem 1.5rem;
        font-size: 0.85rem;
    }
}
/* Add Account Modal Styles */
.modal-content {
    background: linear-gradient(135deg, var(--card-bg), #13182a);
    border: 1px solid var(--border-g);
    border-radius: 20px;
    overflow: hidden;
}

.modal-header {
    border-bottom: 1px solid var(--border);
    padding: 1.25rem 1.5rem;
    background: rgba(0, 0, 0, 0.2);
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-body {
    padding: 2rem;
}

/* Step Indicator */
.step-indicator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding: 0 1rem;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
}

.step-number {
    width: 36px;
    height: 36px;
    background: var(--dark3);
    border: 2px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.step.active .step-number {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    box-shadow: 0 0 0 4px rgba(0, 179, 0, 0.2);
}

.step.completed .step-number {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.step.completed .step-number::before {
    content: '✓';
    font-size: 1rem;
}

.step-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.step.active .step-label {
    color: var(--primary);
}

.step-line {
    flex: 1;
    height: 2px;
    background: var(--border);
    margin: 0 0.5rem;
    position: relative;
    top: -12px;
}

/* Form Steps */
.form-step {
    display: none;
    animation: fadeInStep 0.4s ease;
}

.form-step.active {
    display: block;
}

@keyframes fadeInStep {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Form Elements */
.form-label {
    font-weight: 600;
    color: var(--white);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-control, .form-select {
    background: var(--dark3);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--white);
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.form-control:focus, .form-select:focus {
    background: var(--dark3);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 179, 0, 0.1);
    color: var(--white);
}

.form-control::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

.form-text {
    font-size: 0.7rem;
    margin-top: 0.25rem;
}

/* Verification Section */
.verification-section {
    text-align: center;
    padding: 1rem;
}

.verification-info {
    margin-bottom: 2rem;
}

.verification-info i {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.verification-info h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.verification-info p {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.verification-details {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.verification-detail-item {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}

.verification-detail-item:last-child {
    border-bottom: none;
}

.verification-detail-label {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.verification-detail-value {
    color: var(--white);
    font-weight: 600;
    font-family: monospace;
}

.validation-result {
    margin-top: 1rem;
    padding: 0.75rem;
    border-radius: 10px;
    font-size: 0.85rem;
    display: none;
}

.validation-result.show {
    display: block;
}

.validation-result.alert-success {
    background: rgba(0, 179, 0, 0.1);
    border: 1px solid var(--primary);
    color: var(--primary);
}

.validation-result.alert-danger {
    background: rgba(224, 108, 117, 0.1);
    border: 1px solid var(--red);
    color: var(--red);
}

.validation-result.alert-info {
    background: rgba(65, 84, 241, 0.1);
    border: 1px solid var(--blue-l);
    color: var(--blue-l);
}

/* Connect Section */
.connect-section {
    padding: 2rem 1rem;
}

.connect-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(0, 179, 0, 0.1), rgba(65, 84, 241, 0.05));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.connect-icon i {
    font-size: 2.5rem;
    color: var(--primary);
}

.review-details {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 2rem;
    text-align: left;
}

.review-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
}

.review-label {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.review-value {
    color: var(--white);
    font-weight: 600;
}

/* Modal Navigation */
.modal-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary));
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(65, 84, 241, 0.3);
}

.btn-success {
    background: linear-gradient(135deg, var(--primary), #00cc00);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
}

.btn-success:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 179, 0, 0.3);
}

.btn-success:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-outline-secondary {
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
}

.btn-outline-secondary:hover {
    background: var(--border);
    color: var(--white);
}

/* Loading Spinner */
.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 0.6s linear infinite;
    margin-right: 8px;
}

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

/* Responsive */
@media (max-width: 768px) {
    .modal-body {
        padding: 1.5rem;
    }

    .step-label {
        display: none;
    }

    .step-number {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    .verification-detail-item {
        flex-direction: column;
        gap: 0.25rem;
    }

    .review-item {
        flex-direction: column;
        gap: 0.25rem;
    }

    .modal-navigation {
        flex-direction: column;
        gap: 0.75rem;
    }

    .modal-navigation button {
        width: 100%;
    }
}

     /* Account Filter Styles */
 .filter-bar {
     display: flex;
     gap: 12px;
     align-items: center;
     flex-wrap: wrap;
     margin-bottom: 20px;
 }

.filter-select {
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    min-width: 180px;
}

.filter-select:focus {
    outline: none;
    border-color: var(--primary);
}

.search-box {
    flex: 1;
    min-width: 250px;
    position: relative;
}

.search-box input {
    width: 100%;
    padding: 8px 16px 8px 40px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.search-box i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

/* Account Card Styles */
.account-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.account-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.account-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.account-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(65,84,241,0.1);
    border-radius: 20px;
    font-size: 0.75rem;
    color: var(--primary);
}

.account-status {
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot.active {
    background: #10b981;
    box-shadow: 0 0 8px rgba(16,185,129,0.4);
}

.status-dot.pending {
    background: #f59e0b;
}

.status-dot.inactive {
    background: #6b7280;
}

.account-id-section {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

.account-id-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.account-id-value {
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
    letter-spacing: 1px;
}

.copy-btn {
    margin-left: auto;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.copy-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.copy-btn.copied {
    background: #10b981;
    border-color: #10b981;
    color: white;
}

.account-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.detail-value {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
}

.account-actions {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.btn-action {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.8rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-action.primary {
    background: var(--primary);
    color: white;
}

.btn-action.secondary {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.btn-action.secondary:hover {
    background: var(--bg-tertiary);
}

.btn-action.danger {
    background: transparent;
    border: 1px solid #ef4444;
    color: #ef4444;
}

.btn-action.danger:hover {
    background: #ef4444;
    color: white;
}

.btn-action.warning       { background: #f59e0b; color: #fff; }
.btn-action.warning:hover { background: #d97706; }

/* ── Compact action button (grid view) ── */
.btn-action-sm { padding: 4px 10px; font-size: 0.7rem; }

/* ── View-toggle active state ── */
#gridViewBtn.active,
#listViewBtn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ── Icon-only button ── */
.btn-icon {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 4px 7px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-icon:hover { background: var(--bg-tertiary); color: var(--primary); }

/* ── Account grid cards ── */
.account-grid-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    height: 100%;
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}
.account-grid-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}
.grid-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.grid-card-title {
    font-size: .95rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.grid-card-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
    flex: 1;
}
.grid-detail {
    font-size: .78rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 5px;
}
.grid-detail i { color: var(--primary); font-size: .85rem; }
.grid-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 4px;
}
.grid-card-actions { display: flex; gap: 4px; }

/* ── Status badges ── */
.status-badge {
    font-size: .68rem;
    padding: 2px 7px;
    border-radius: 20px;
    font-weight: 500;
}
.status-badge.active  { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.status-badge.pending { background: rgba(245, 158, 11, 0.1);  color: #f59e0b; }

/* ── Filter bar child constraints ── */
.filter-bar .filter-select { flex: 1 1 130px; min-width: 0; }
.filter-bar .search-box    { flex: 1 1 180px; min-width: 0; }
.filter-bar .btn-action    { flex-shrink: 0; }
.filter-select-auto        { width: auto; }

/* ── Account card overflow guard ── */
.account-card { min-width: 0; overflow: hidden; }
.account-actions { flex-wrap: wrap; }

/* ── STK analytics ── */
.stk-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
@media (max-width: 900px) { .stk-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stk-kpi-grid { grid-template-columns: 1fr 1fr; } }

.stk-kpi-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px 14px;
    position: relative;
    overflow: hidden;
    transition: border-color .2s, transform .2s;
}
.stk-kpi-card:hover { border-color: var(--kpi-accent, var(--blue)); transform: translateY(-2px); }
.stk-kpi-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--kpi-accent, var(--blue));
}
.stk-kpi-card::after {
    content: ''; position: absolute; top: 0; right: 0;
    width: 70px; height: 70px;
    background: radial-gradient(circle at top right, var(--kpi-accent, var(--blue)), transparent 65%);
    opacity: .07; pointer-events: none;
}
.stk-kpi-icon {
    font-size: 1rem; margin-bottom: 6px;
    color: var(--kpi-accent, var(--blue)); opacity: .85;
}
.stk-kpi-label {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .9px;
    color: var(--text-muted); margin-bottom: 4px; font-family: 'Space Mono', monospace;
}
.stk-kpi-value {
    font-size: 1.55rem; font-weight: 800; color: var(--kpi-accent, var(--white));
    line-height: 1; font-family: 'Space Mono', monospace; letter-spacing: -1px;
    margin-bottom: 4px;
}
.stk-kpi-sub {
    font-size: .7rem; color: var(--text-muted);
    font-family: 'Space Mono', monospace;
}

.stk-chart-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 14px;
}
@media (max-width: 900px) { .stk-chart-grid { grid-template-columns: 1fr; } }

/* ── Utility: text colours ── */
.text-accent         { color: var(--primary); }
.text-success-accent { color: #10b981; }

/* ── Utility: size helpers ── */
.account-id-sm        { font-size: 0.85rem; }
.badge-xs             { font-size: 0.65rem; }
.status-text-sm       { font-size: 0.8rem; }

/* ── Account card list-view layout helpers ── */
.account-card-title-wrap { display: flex; align-items: center; gap: 12px; }
.account-name-heading    { margin: 0; font-size: 1.1rem; }

/* ── Form hint (muted helper text) ── */
.form-hint { color: rgba(255, 255, 255, 0.55); font-size: 0.875em; }

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-state i {
    font-size: 4rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.empty-state h4 {
    margin-bottom: 10px;
    color: var(--text-primary);
}

.empty-state p {
    color: var(--text-muted);
    margin-bottom: 20px;
}

.toast-notification {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);

    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 9999;
    animation: slideIn 0.3s ease;
}

.toast-notification.success {
    border: 1px solid #41aa28;
}

.toast-notification.error {
    border: 1px solid #ef4444;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Account Limits Bar */
.limits-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

.limit-item {
    flex: 1;
}

.limit-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.limit-progress {
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
}

.limit-progress-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.limit-progress-fill.warning {
    background: #f59e0b;
}

.limit-progress-fill.danger {
    background: #ef4444;
}

/* ==========================================
   ACTIVATION MODAL STYLES
   ========================================== */

.activation-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-bottom: 30px;
    padding: 0 20px;
}

.activation-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.activation-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: calc(100% + 15px);
    top: 15px;
    width: 30px;
    height: 2px;
    background: var(--border);
}

.activation-step.active {
    opacity: 1;
}

.activation-step.completed {
    opacity: 1;
}

.activation-step.completed .step-number {
    background: #10b981;
    border-color: #10b981;
    color: white;
}

.activation-step .step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    transition: all 0.3s ease;
}

.activation-step.active .step-number {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.activation-step .step-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.activation-step.active .step-label {
    color: var(--primary);
    font-weight: 600;
}

/* Account Summary */
.account-summary {
    background: var(--bg-tertiary);
    border-radius: 10px;
    padding: 16px;
}

.summary-item {
    display: flex;
    align-items: center;
    padding: 4px 0;
}

.summary-label {
    width: 100px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.summary-value {
    font-weight: 500;
    color: var(--text-primary);
}

/* Plan Cards */
.plan-card {
    background: var(--bg-secondary);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 100%;
}

.plan-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.plan-card.selected {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(65,84,241,0.05), rgba(65,84,241,0.02));
}

.plan-card .plan-name {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.plan-card .plan-price {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 4px;
}

.plan-card .plan-price small {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-muted);
}

.plan-card .plan-duration {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.plan-card .plan-savings {
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 20px;
    display: inline-block;
}

.plan-savings.saving {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.plan-savings.best-value {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.plan-badge {
    margin-top: 8px;
    font-size: 0.7rem;
}

.plan-badge .badge {
    padding: 4px 8px;
}

/* Payment Summary */
.payment-summary {
    margin-bottom: 24px;
}

.summary-card {
    background: var(--bg-tertiary);
    border-radius: 10px;
    padding: 16px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

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

.summary-row.total {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--primary);
    padding-top: 12px;
    margin-top: 4px;
    border-top: 2px solid var(--border);
}

/* Payment Form */
.payment-form .input-group-text {
    background: var(--bg-tertiary);
    border-color: var(--border);
    color: var(--text-secondary);
}

.payment-form .form-control {
    background: var(--bg-secondary);
    border-color: var(--border);
    color: var(--text-primary);
    padding: 12px 16px;
}

.payment-form .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(65,84,241,0.1);
}

/* Processing States */
.processing-state,
.success-state,
.error-state {
    text-align: center;
    padding: 40px 20px;
}

.processing-icon,
.success-icon,
.error-icon {
    margin-bottom: 20px;
}

.processing-icon .spinner-border {
    width: 48px;
    height: 48px;
}

.success-icon i {
    font-size: 48px;
    color: #10b981;
}

.error-icon i {
    font-size: 48px;
    color: #ef4444;
}

.processing-timer {
    margin-top: 20px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.success-details {
    background: var(--bg-tertiary);
    border-radius: 10px;
    padding: 16px;
    margin-top: 20px;
    text-align: left;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
}

/* Mobile Responsive */
@media (max-width: 575.98px) {
    .activation-steps {
        gap: 20px;
        padding: 0 10px;
    }

    .activation-step:not(:last-child)::after {
        width: 15px;
        left: calc(100% + 8px);
    }

    .activation-step .step-number {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    .activation-step .step-label {
        font-size: 0.7rem;
    }

    .plan-card {
        padding: 16px 12px;
    }

    .plan-card .plan-name {
        font-size: 1rem;
    }

    .plan-card .plan-price {
        font-size: 1.5rem;
    }

    .processing-state,
    .success-state,
    .error-state {
        padding: 20px 10px;
    }
}

/* ═══════════════════════════════════════════════════════════
   PORTAL — COMPREHENSIVE MOBILE RESPONSIVE
   Consistent theme & improved UX on small devices
═══════════════════════════════════════════════════════════ */

/* ── Tablet (< 768px) — chart heights, row gutter ── */
@media (max-width: 767px) {
    .dash-main {
        padding: 1rem 1rem 3rem;
    }

    .chart-card-body .chart-box {
        height: 220px !important;
    }

    /* Stack chart columns on tablet */
    .row > [class*="col-lg-"] {
        margin-bottom: 0;
    }
}

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

    /* ── Layout ── */
    .dash-main {
        padding: 0.875rem 0.75rem 5rem;
    }

    /* ── Topbar ── */
    .topbar {
        padding: 0 0.75rem;
        gap: 0.4rem;
    }
    .topbar-divider { display: none; }
    .topbar-brand { display: none; }
    .topbar-prod-switch { flex-shrink: 0; }
    .topbar-prod-btn i { display: none; }
    .topbar-prod-btn {
        padding: 0.22rem 0.5rem;
        font-size: 0.7rem;
    }
    .topbar-avatar {
        width: 30px;
        height: 30px;
        font-size: 0.72rem;
    }
    .topbar-logout {
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
    }

    /* ── Page Header ── */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
        margin-bottom: 1rem;
    }
    .page-title {
        font-size: 1.08rem;
        letter-spacing: -0.2px;
    }
    .page-subtitle {
        font-size: 0.74rem;
        margin-top: 0.1rem;
    }
    .header-actions {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
        gap: 0.4rem;
        padding-bottom: 2px;
    }
    .header-actions::-webkit-scrollbar { display: none; }

    /* ── Period Tabs ── */
    .period-tabs { flex-shrink: 0; }
    .period-tab {
        padding: 0.2rem 0.5rem;
        font-size: 0.68rem;
    }

    /* ── Stat Cards — 2 columns enforced via Bootstrap col-6 ── */
    .stat-card {
        padding: 0.85rem 0.9rem;
        border-radius: 12px;
    }
    .stat-value {
        font-size: 1.2rem;
        margin-bottom: 0.25rem;
    }
    .stat-value.sm { font-size: 1.05rem; }
    .stat-label {
        font-size: 0.65rem;
        margin-bottom: 0.3rem;
        padding-right: 1.75rem; /* avoid icon overlap */
    }
    .stat-icon-wrap {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
        top: 0.7rem;
        right: 0.7rem;
        border-radius: 8px;
    }
    .stat-change {
        font-size: 0.68rem;
        padding: 1px 6px;
    }
    .stat-since { font-size: 0.62rem; }

    /* ── Row gutter ── */
    .row.g-3 {
        --bs-gutter-x: 0.6rem;
        --bs-gutter-y: 0.6rem;
    }
    .mb-4 { margin-bottom: 0.875rem !important; }

    /* ── Buttons ── */
    .btn-sm-action {
        font-size: 0.74rem;
        padding: 0.26rem 0.65rem;
        white-space: nowrap;
        flex-shrink: 0;
        border-radius: 7px;
    }
    .btn-sm-action i { font-size: 0.72rem; }

    /* ── Chart Cards ── */
    .chart-card-header {
        padding: 0.7rem 0.9rem;
        gap: 0.35rem;
    }
    .chart-card-title { font-size: 0.8rem; }
    .chart-card-body { padding: 0.75rem 0.9rem; }
    .chart-card-body .chart-box {
        height: 190px !important;
    }

    /* ── Tables ── */
    .dash-table {
        font-size: 0.76rem;
        min-width: 480px;
    }
    .dash-table th {
        font-size: 0.62rem;
        padding: 0.42rem 0.65rem;
        white-space: nowrap;
    }
    .dash-table td {
        padding: 0.48rem 0.65rem;
        white-space: nowrap;
    }
    .badge-status {
        font-size: 0.64rem;
        padding: 2px 7px;
    }

    /* ── Wallet ── */
    .wallet-big {
        padding: 1.1rem 1.1rem;
        border-radius: 12px;
    }
    .wallet-big-amount { font-size: 1.7rem; }
    .wallet-big-currency { font-size: 0.95rem; }
    .wallet-big-label { font-size: 0.68rem; }

    /* ── Insight Cards ── */
    .insight-card {
        padding: 0.7rem 0.85rem;
        gap: 0.55rem;
        border-radius: 10px;
    }
    .insight-icon {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
        border-radius: 8px;
        flex-shrink: 0;
    }
    .insight-title {
        font-size: 0.76rem;
        margin-bottom: 0.15rem;
    }
    .insight-text {
        font-size: 0.69rem;
        line-height: 1.4;
    }

    /* ── Account Chips ── */
    .account-chip {
        padding: 0.6rem 0.75rem;
        gap: 0.5rem;
        border-radius: 10px;
    }
    .account-chip-icon {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
        border-radius: 8px;
    }
    .account-chip-label { font-size: 0.65rem; }
    .account-chip-value { font-size: 0.82rem; }

    /* ── Account Cards (accounts page) ── */
    .account-card {
        padding: 12px;
        border-radius: 10px;
    }
    .account-details {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .account-actions {
        flex-wrap: wrap;
        gap: 6px;
    }
    .btn-action {
        font-size: 0.74rem;
        padding: 5px 10px;
    }

    /* ── Filter Bar (accounts page) ── */
    .filter-bar { gap: 8px; }
    .filter-select {
        min-width: 110px;
        font-size: 0.8rem;
        padding: 6px 10px;
    }
    .search-box { min-width: 130px; }
    .search-box input {
        padding: 6px 10px 6px 32px;
        font-size: 0.8rem;
    }

    /* ── KYC Alert ── */
    .kyc-alert {
        padding: 0.85rem 0.9rem;
        border-radius: 10px;
        margin-bottom: 1rem;
        gap: 0.75rem;
    }
    .kyc-alert-icon {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }
    .kyc-alert-text h4 { font-size: 0.88rem; }
    .kyc-alert-text p { font-size: 0.76rem; }

    /* ── KYC Steps (kyc-verification page) ── */
    .kyc-steps {
        overflow-x: auto;
        scrollbar-width: none;
        justify-content: flex-start;
        padding-bottom: 0.5rem;
    }
    .kyc-steps::-webkit-scrollbar { display: none; }

    /* ── Empty State ── */
    .empty-state-card {
        padding: 1.5rem 1rem;
        border-radius: 16px;
    }
    .empty-state-icon {
        width: 65px;
        height: 65px;
        font-size: 1.85rem;
        margin-bottom: 1rem;
    }
    .empty-state-title { font-size: 1.25rem; }
    .empty-state-text {
        font-size: 0.85rem;
        margin-bottom: 1.5rem;
    }
    .btn-primary-gradient {
        padding: 0.7rem 1.5rem;
        font-size: 0.88rem;
        width: 100%;
        justify-content: center;
    }

    /* ── Credit Bar ── */
    .credit-bar-wrap { margin: 0.3rem 0; }

    /* ── Sidebar touch scroll ── */
    .sidebar { -webkit-overflow-scrolling: touch; }

    /* ── Section gap ── */
    .section-gap { margin-top: 1.25rem; }

    /* ── Grid Cards (accounts page) ── */
    .grid-card-title { font-size: .85rem; }
    .grid-card-footer .btn-action { padding: 3px 7px; font-size: .65rem; }
    .account-id-section { flex-wrap: wrap; }
}

/* ── Table scroll wrapper ── */
.table-scroll { overflow-x: auto; }

/* ── Top-Up History table cells ── */
.topup-date    { font-size: .82rem; color: var(--text-muted); }
.topup-amount  { font-weight: 700; color: var(--white); }
.topup-credits { color: var(--primary); font-weight: 600; }
.topup-rate    { font-size: .8rem; }
.topup-balance { font-family: monospace; font-size: .82rem; color: var(--blue-l); }

/* ═══════════════════════════════════════════════════════════
   CREDITS PAGE (HashBack)
═══════════════════════════════════════════════════════════ */

/* ── Balance card ── */
.credits-balance-card {
    background: linear-gradient(135deg, rgba(0,179,0,.08), rgba(65,84,241,.05));
    border: 1px solid var(--border-g);
    border-radius: 16px;
    padding: 1.75rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}
.credits-accent-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--blue-l));
}
.credits-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-muted);
}
.credits-big-num {
    font-family: 'Space Mono', monospace;
    font-size: 3rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1.1;
    margin: .25rem 0;
}
.credits-value-hint { font-size: .83rem; color: var(--text-muted); }
.credits-used-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: .6rem;
}

/* ── Credit usage bar ── */
.credit-bar-wrap {
    height: 12px;
    background: var(--dark3);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: .4rem;
}
.credit-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--blue-l));
    border-radius: 6px;
}
.credit-bar-summary {
    display: flex;
    justify-content: space-between;
    font-size: .75rem;
    color: var(--text-muted);
}

/* ── Mini stat boxes ── */
.credit-mini-stat {
    background: var(--dark3);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: .7rem;
    text-align: center;
}
.credit-mini-val {
    font-family: 'Space Mono', monospace;
    font-size: 1.1rem;
    font-weight: 700;
}
.credit-mini-lbl { font-size: .7rem; color: var(--text-muted); }

/* ── Text colour helpers ── */
.text-blue-l { color: var(--blue-l); }

/* ── Section heading label ── */
.section-label {
    font-size: .88rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: .85rem;
}

/* ── Rate plan cards ── */
.plan-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.25rem;
    transition: all 0.2s;
    cursor: pointer;
    position: relative;
}
.plan-card:hover {
    border-color: var(--border-g);
    transform: translateY(-2px);
}
.active-plan { border: 2px solid var(--primary); }
.plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: #000;
    font-size: .65rem;
    font-weight: 800;
    padding: 2px 12px;
    border-radius: 100px;
    white-space: nowrap;
}
.plan-rate-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-muted);
}
.plan-price-display {
    font-family: 'Space Mono', monospace;
    font-size: 2rem;
    font-weight: 700;
    color: var(--white);
    margin: .3rem 0;
}
.plan-price-unit { font-size: .9rem; color: var(--text-muted); }
.plan-desc { font-size: .8rem; color: var(--text-muted); margin-bottom: 1rem; }
.btn-sm-padded { padding: .55rem; }

/* ── Credits mobile overrides ── */
@media (max-width: 575px) {
    .credits-big-num { font-size: 2rem; }
    .plan-card       { padding: 1rem .75rem; }
    .plan-price-display { font-size: 1.5rem; }
}

/* ── Extra small (≤ 400px) — further compress ── */
@media (max-width: 399px) {
    .topbar-prod-btn { padding: 0.2rem 0.4rem; font-size: 0.65rem; }
    .page-title { font-size: 0.95rem; }
    .stat-value { font-size: 1.05rem; }
    .stat-value.sm { font-size: 0.92rem; }
    .wallet-big-amount { font-size: 1.45rem; }
    .dash-main { padding: 0.75rem 0.625rem 5rem; }
}

/* ══════════════════════════════════════════════════════════════════
   Wallet Transactions page
   ══════════════════════════════════════════════════════════════════ */

/* ── Period filter bar ── */
.filter-strip { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .6rem 0; margin-bottom: 1rem; }
.period-pills { display: flex; gap: .4rem; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
.period-pills::-webkit-scrollbar { display: none; }
.period-pill { padding: .28rem .75rem; border-radius: 100px; font-size: .78rem; font-weight: 600; border: 1px solid var(--border); background: var(--dark2); color: var(--text-muted); cursor: pointer; transition: all .18s; flex-shrink: 0; }
.period-pill.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.period-pill:hover:not(.active) { border-color: var(--primary); color: var(--blue-l); }
.custom-range { display: flex; gap: .4rem; align-items: center; flex-wrap: nowrap; }
.custom-range input[type=date] { background: var(--dark2); border: 1px solid var(--border); color: #fff; border-radius: 8px; padding: .25rem .5rem; font-size: .76rem; max-width: 130px; }
.custom-range input[type=date]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .6; }

/* ── Wallet summary cards ── */
.tx-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin-bottom: 1.1rem; }
.tx-sum-card { background: var(--dark2); border: 1px solid var(--border); border-radius: 12px; padding: .85rem 1rem; display: flex; flex-direction: column; gap: .2rem; }
.tx-sum-label { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.tx-sum-value { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.tx-sum-sub { font-size: .7rem; color: var(--text-muted); }
.sum-in { color: var(--primary); }
.sum-out { color: #ef4444; }
.sum-net-pos { color: #22c55e; }
.sum-net-neg { color: #ef4444; }

/* ── Transaction type badges ── */
.tx-type-in { display: inline-flex; align-items: center; gap: .25rem; background: rgba(65,84,241,.12); color: var(--blue-l); border: 1px solid rgba(65,84,241,.2); border-radius: 100px; padding: 2px 8px; font-size: .72rem; font-weight: 700; }
.tx-type-out { display: inline-flex; align-items: center; gap: .25rem; background: rgba(239,68,68,.1); color: #f87171; border: 1px solid rgba(239,68,68,.2); border-radius: 100px; padding: 2px 8px; font-size: .72rem; font-weight: 700; }

/* ── Charts ── */
.chart-wrap { height: 230px; }
.insights-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.1rem; }

/* ── Section tabs (scrollable inline) ── */
.section-tabs { display: flex; gap: 0; overflow-x: auto; white-space: nowrap; border-bottom: 1px solid var(--border); margin-bottom: 1.1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.section-tabs::-webkit-scrollbar { display: none; }
.section-tab { padding: .45rem 1rem; font-size: .82rem; font-weight: 600; color: var(--text-muted); background: none; border: none; border-bottom: 2.5px solid transparent; cursor: pointer; transition: all .18s; flex-shrink: 0; margin-bottom: -1px; white-space: nowrap; }
.section-tab.active { color: #fff; border-bottom-color: var(--primary); }
.section-tab:hover:not(.active) { color: var(--blue-l); }

/* ── Table controls & search ── */
.table-controls { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; padding: .65rem 0 .5rem; }
.tbl-search { background: var(--dark2); border: 1px solid var(--border); color: #fff; border-radius: 8px; padding: .28rem .65rem; font-size: .8rem; flex: 1; min-width: 140px; max-width: 260px; }
.tbl-search::placeholder { color: var(--text-muted); }
.tbl-search:focus { outline: none; border-color: var(--primary); }
/* compact variant scoped to table-controls, overrides the global .filter-select */
.table-controls .filter-select { background: var(--dark2); color: #fff; padding: .28rem .55rem; font-size: .78rem; min-width: unset; }

/* ── Pagination ── */
.pagination-bar { display: flex; align-items: center; justify-content: space-between; padding: .6rem 0 .2rem; flex-wrap: wrap; gap: .5rem; }
.pagination-info { font-size: .76rem; color: var(--text-muted); }
.pagination-btns { display: flex; gap: .3rem; }
.pg-btn { padding: .25rem .6rem; font-size: .76rem; border-radius: 6px; border: 1px solid var(--border); background: var(--dark2); color: var(--text-muted); cursor: pointer; transition: all .15s; }
.pg-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--blue-l); }
.pg-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pg-btn:disabled { opacity: .35; cursor: not-allowed; }

/* ── Mobile card view ── */
.tx-card { background: var(--dark2); border: 1px solid var(--border); border-radius: 10px; padding: .7rem .85rem; margin-bottom: .5rem; display: flex; flex-direction: column; gap: .3rem; }
.tx-card-top { display: flex; justify-content: space-between; align-items: center; }
.tx-card-name { font-size: .86rem; font-weight: 600; color: #fff; }
.tx-card-amount { font-size: .95rem; font-weight: 800; }
.tx-card-meta { display: flex; justify-content: space-between; align-items: center; }
.tx-card-ref { font-family: monospace; font-size: .72rem; color: var(--text-muted); }
.tx-card-date { font-size: .72rem; color: var(--text-muted); }

@media (max-width: 640px) {
    .insights-grid { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
    .tx-table-wrap { display: none; }
    .tx-card-list { display: block; }
    .section-tab { padding: .38rem .75rem; font-size: .76rem; }
    .period-pill { padding: .22rem .6rem; font-size: .72rem; }
    .custom-range input[type=date] { max-width: 110px; font-size: .72rem; }
}
@media (min-width: 577px) {
    .tx-table-wrap { display: block; }
    .tx-card-list { display: none; }
}
/* ═══════════════════════════════════════════════════════════════
   Page-level styles (consolidated)
   ══════════════════════════════════════════════════════════════ */

/* ── Mobile transaction cards (collections, overview) ── */
.tx-card-list{display:none;flex-direction:column;gap:.65rem}
.tx-card{background:var(--dark3);border:1px solid var(--border);border-radius:13px;padding:.85rem 1rem;transition:border-color .2s}
.tx-card:hover{border-color:rgba(65,84,241,.3)}
.tx-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;margin-bottom:.5rem}
.tx-card-amount{font-size:1.15rem;font-weight:800;color:#fff}
.tx-card-date{font-size:.7rem;color:var(--text-muted);text-align:right;line-height:1.4}
.tx-card-ref{font-family:monospace;font-size:.72rem;color:var(--blue-l);background:rgba(65,84,241,.08);border:1px solid rgba(65,84,241,.13);border-radius:6px;padding:.25rem .55rem;display:inline-block;margin-bottom:.55rem;letter-spacing:.02em}
.tx-card-meta{display:flex;flex-wrap:wrap;gap:.35rem .8rem;font-size:.76rem;color:var(--text-muted)}
.tx-card-meta span{display:flex;align-items:center;gap:.3rem}
.tx-card-meta i{font-size:.78rem}
.tx-card-meta .phone{font-family:monospace;color:var(--text-body)}
.tx-source-pill{display:inline-flex;align-items:center;gap:.3rem;font-size:.68rem;font-weight:600;padding:.15rem .55rem;border-radius:100px;border:1px solid var(--border);background:var(--dark2);color:var(--text-muted)}
.tx-source-pill.link{border-color:rgba(65,84,241,.25);color:var(--blue-l);background:rgba(65,84,241,.08)}
.tx-source-pill.till{border-color:rgba(254,188,46,.25);color:var(--amber);background:rgba(254,188,46,.07)}
.tx-source-pill.paybill{border-color:rgba(65,170,40,.25);color:var(--primary);background:rgba(65,170,40,.07)}
.tx-source-pill.qr_code{border-color:rgba(147,112,219,.3);color:#b39ddb;background:rgba(147,112,219,.08)}
@media(max-width:991.98px){
    .tx-card-list{display:flex}
    .tx-table-wrap{display:none}
}

/* ── Mobile request cards (hashback overview & usage) ── */
.hb-card-list{display:none;flex-direction:column;gap:.6rem}
.hb-card{background:var(--dark3);border:1px solid var(--border);border-radius:13px;padding:.85rem 1rem;transition:border-color .2s}
.hb-card:hover{border-color:rgba(65,84,241,.3)}
.hb-card-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.55rem}
.hb-card-time{font-size:.72rem;color:var(--text-muted)}
.hb-card-hash{font-family:monospace;font-size:.74rem;color:var(--white);background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:6px;padding:.28rem .6rem;margin-bottom:.5rem;word-break:break-all}
.hb-card-meta{display:flex;align-items:center;gap:.6rem;font-size:.74rem;color:var(--text-muted)}
.hb-card-meta i{font-size:.76rem}
@media(max-width:991.98px){
    .hb-card-list{display:flex}
    .hb-table-wrap{display:none}
}

/* ── Mobile payment link cards ── */
.pl-card-list{display:none;flex-direction:column;gap:.75rem}
.pl-card{background:var(--dark3);border:1px solid var(--border);border-radius:14px;padding:1rem 1.1rem;transition:border-color .2s}
.pl-card:hover{border-color:rgba(65,84,241,.35)}
.pl-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;margin-bottom:.6rem}
.pl-card-title{font-weight:700;color:#fff;font-size:.95rem;line-height:1.3;flex:1;word-break:break-word}
.pl-card-meta{display:flex;flex-wrap:wrap;gap:.45rem .75rem;margin-bottom:.7rem;font-size:.76rem;color:var(--text-muted)}
.pl-card-meta span{display:flex;align-items:center;gap:.3rem}
.pl-card-meta i{font-size:.8rem}
.pl-card-url{font-family:monospace;font-size:.7rem;color:var(--blue-l);word-break:break-all;background:rgba(65,84,241,.07);border:1px solid rgba(65,84,241,.12);border-radius:7px;padding:.35rem .6rem;margin-bottom:.7rem;display:flex;align-items:center;justify-content:space-between;gap:.4rem}
.pl-card-url-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.pl-card-short{font-family:monospace;font-size:.7rem;color:var(--primary);background:rgba(65,170,40,.07);border:1px solid rgba(65,170,40,.15);border-radius:7px;padding:.3rem .6rem;margin-bottom:.7rem;display:flex;align-items:center;justify-content:space-between;gap:.4rem}
.pl-card-short-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.pl-card-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;margin-bottom:.8rem}
.pl-card-stat{background:var(--dark2);border-radius:8px;padding:.4rem .5rem;text-align:center}
.pl-card-stat-val{font-size:.88rem;font-weight:700;color:#fff;line-height:1.2}
.pl-card-stat-val.green{color:var(--primary)}
.pl-card-stat-val.blue{color:var(--blue-l)}
.pl-card-stat-label{font-size:.64rem;color:var(--text-muted);margin-top:.1rem}
.pl-card-actions{display:flex;gap:.4rem;flex-wrap:wrap}
.pl-card-actions .btn-icon{flex:1;display:flex;align-items:center;justify-content:center;gap:.3rem;font-size:.74rem;padding:.38rem .5rem;min-width:0}
.pl-card-actions .btn-icon span{display:none}
@media(min-width:400px){.pl-card-actions .btn-icon span{display:inline}}
@media(max-width:991.98px){
    .pl-card-list{display:flex}
    .pl-table-wrap{display:none}
}

/* ── Payment links – tabs, stat, funnel, form, modal ── */
.pl-stat-icon{font-size:1.5rem;margin-bottom:.45rem;line-height:1}
.pl-stat-icon i{font-size:1.5rem}
.pl-tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--border);margin-bottom:1.25rem}
.pl-tab{background:none;border:none;border-bottom:2px solid transparent;padding:.55rem 1rem;font-size:.83rem;font-weight:600;color:var(--text-muted);cursor:pointer;transition:.15s;margin-bottom:-1px;display:flex;align-items:center;gap:.4rem}
.pl-tab:hover{color:var(--blue-l)}
.pl-tab.active{color:var(--blue-l);border-bottom-color:var(--blue-l)}
.pl-pane{display:none}
.pl-pane.active{display:block}
.link-url{font-family:monospace;font-size:.73rem;color:var(--blue-l);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;display:inline-block;vertical-align:middle}
.badge-channel{font-size:.68rem;background:var(--dark3);border:1px solid var(--border);border-radius:100px;padding:2px 8px;color:var(--text-muted)}
.btn-icon{background:none;border:1px solid var(--border);border-radius:6px;padding:4px 8px;color:var(--text-muted);cursor:pointer;transition:.15s;font-size:.78rem}
.btn-icon:hover{border-color:var(--blue-l);color:var(--blue-l)}
.btn-icon.danger:hover{border-color:#f87171;color:#f87171}
.btn-icon.green:hover{border-color:var(--primary);color:var(--primary)}
.modal-dark .modal-content{background:#13172b;border:1px solid rgba(65,84,241,.2);border-radius:16px}
.modal-dark .modal-header{border-bottom:1px solid rgba(65,84,241,.12)}
.modal-dark .modal-footer{border-top:1px solid rgba(65,84,241,.12)}
.form-label-s{font-size:.78rem;color:#9aa0b8;margin-bottom:.3rem}
.form-ctrl-dark{background:#0d0f1a;border:1.5px solid rgba(65,84,241,.2);color:#fff;border-radius:8px;padding:.5rem .85rem;font-size:.88rem;width:100%;transition:border-color .2s}
.form-ctrl-dark:focus{outline:none;border-color:#4154f1;background:#0d0f1a}
.form-ctrl-dark::placeholder{color:#3a3f5a}
.qr-branded-wrap{display:flex;flex-direction:column;align-items:center;gap:1rem}
.qr-canvas-box{background:#fff;border-radius:12px;padding:4px;line-height:0;box-shadow:0 4px 24px rgba(0,0,0,.3)}
.qr-link-display{font-family:monospace;font-size:.72rem;color:var(--blue-l);word-break:break-all;text-align:center;max-width:260px}
.empty-state{text-align:center;padding:3rem 1rem;color:var(--text-muted)}
.empty-state .icon{font-size:2.5rem;margin-bottom:.75rem}
.stat-card{background:var(--dark3);border:1px solid var(--border);border-radius:12px;padding:1rem 1.25rem}
.stat-label{font-size:.73rem;color:var(--text-muted);margin-bottom:.3rem}
.stat-value{font-size:1.5rem;font-weight:800;color:#fff}
.stat-value.green{color:var(--primary)}
.stat-value.blue{color:var(--blue-l)}
.stat-value.amber{color:var(--amber)}
.funnel-step{margin-bottom:1rem}
.funnel-step-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.35rem;gap:.5rem}
.funnel-step-label{display:flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:600;color:var(--text-body)}
.funnel-step-label .step-num{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:800;flex-shrink:0}
.funnel-step-count{font-size:.8rem;color:var(--text-muted)}
.funnel-bar-wrap{height:9px;background:var(--dark3);border-radius:100px;overflow:hidden;border:1px solid var(--border)}
.funnel-bar{height:100%;border-radius:100px;transition:width .6s ease}
.funnel-connector{display:flex;align-items:center;gap:.5rem;margin:.2rem 0 .6rem 10px;font-size:.72rem}
.funnel-connector-line{width:1px;height:18px;background:var(--border);margin:0 9px}
.conv-badge{padding:1px 7px;border-radius:100px;font-weight:700;font-size:.7rem}
.conv-badge.good{background:rgba(65,170,40,.12);color:var(--primary);border:1px solid var(--border-g)}
.conv-badge.mid{background:rgba(254,188,46,.1);color:var(--amber);border:1px solid rgba(254,188,46,.2)}
.conv-badge.low{background:rgba(248,113,113,.1);color:#f87171;border:1px solid rgba(248,113,113,.2)}
.dropoff-badge{color:var(--text-muted);font-size:.7rem}

/* ── Wallet hero ── */
.wallet-hero{background:linear-gradient(135deg,rgba(65,84,241,.18) 0%,rgba(0,179,0,.12) 100%);border:1px solid rgba(65,84,241,.2);border-radius:16px;padding:1.5rem 2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.wallet-hero-bal{font-size:2.4rem;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1}
.wallet-hero-currency{font-size:1rem;font-weight:600;color:var(--text-muted);margin-right:.3rem}
.wallet-hero-label{font-size:.78rem;color:var(--text-muted);margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.05em}
.wallet-hero-actions{display:flex;gap:.75rem;flex-wrap:wrap}
.wallet-id-badge{display:inline-flex;align-items:center;gap:.4rem;background:var(--dark3);border:1px solid var(--border);border-radius:100px;padding:.25rem .75rem;font-size:.72rem;color:var(--text-muted);margin-top:.6rem;cursor:pointer}
.wallet-id-badge:hover{border-color:var(--blue-l)}

/* ── Pin input ── */
.pin-boxes{display:flex;gap:.5rem;justify-content:center;margin:1rem 0}
.pin-box{width:44px;height:52px;background:var(--dark3);border:1.5px solid var(--border);border-radius:8px;text-align:center;font-size:1.4rem;color:#fff;outline:none;transition:border-color .2s}
.pin-box:focus{border-color:var(--blue-l)}

/* ── Nominated number chips ── */
.nom-chip{display:flex;align-items:center;gap:.75rem;background:var(--dark3);border:1px solid var(--border);border-radius:10px;padding:.6rem 1rem;margin-bottom:.5rem}
.nom-chip.primary{border-color:rgba(0,179,0,.4);background:rgba(0,179,0,.06)}
.nom-phone{font-family:monospace;font-size:.9rem;color:#fff;font-weight:600}
.nom-label{font-size:.75rem;color:var(--text-muted)}
.nom-badge-primary{font-size:.65rem;padding:2px 7px;background:rgba(0,179,0,.15);color:var(--primary);border-radius:100px;border:1px solid rgba(0,179,0,.3)}
.nom-info-alert{background:rgba(0,179,0,.05);border:1px solid rgba(0,179,0,.18);border-radius:10px;padding:.85rem 1rem;margin-bottom:1rem;font-size:.8rem;color:var(--text-muted)}
.nom-info-alert strong{color:var(--primary)}

/* ── Recipient cards (wallet) ── */
.rec-card{background:var(--dark3);border:1px solid var(--border);border-radius:10px;padding:.85rem 1rem;display:flex;align-items:center;gap:.85rem}
.rec-avatar{width:36px;height:36px;border-radius:50%;background:rgba(65,84,241,.18);display:flex;align-items:center;justify-content:center;color:var(--blue-l);font-weight:700;font-size:.9rem;flex-shrink:0}
.rec-name{font-weight:600;font-size:.88rem;color:#fff}
.rec-phone{font-family:monospace;font-size:.78rem;color:var(--text-muted)}
.rec-type-badge{font-size:.65rem;padding:2px 6px;border-radius:100px;border:1px solid}
.rec-type-c2b{color:#10b981;border-color:rgba(16,185,129,.3);background:rgba(16,185,129,.08)}
.rec-type-b2b{color:#f59e0b;border-color:rgba(245,158,11,.3);background:rgba(245,158,11,.08)}

/* ── Recipient cards (disbursements — includes transition + b2b avatar) ── */
.rec-card-disburse{display:flex;align-items:center;gap:.65rem;background:var(--dark3);border:1px solid var(--border);border-radius:10px;padding:.6rem .85rem;transition:border-color .18s}
.rec-card-disburse:hover{border-color:rgba(65,84,241,.35)}
.rec-avatar.b2b{background:rgba(245,158,11,.12);color:var(--amber)}

/* ── Disbursement builder ── */
.disburse-row{display:flex;align-items:center;gap:.5rem;background:var(--dark2);border:1px solid var(--border);border-radius:8px;padding:.5rem .75rem;margin-bottom:.4rem}
.disburse-row-name{flex:1;font-size:.85rem;color:#fff}
.disburse-row-phone{font-size:.75rem;color:var(--text-muted);font-family:monospace;min-width:120px}
.disburse-row-meta{font-size:.72rem;color:var(--text-muted);font-family:monospace;min-width:100px}

/* ── Credential display ── */
.cred-box{background:var(--dark3);border:1.5px solid rgba(65,84,241,.3);border-radius:10px;padding:1rem 1.25rem;font-family:monospace;font-size:.82rem;color:var(--blue-l);word-break:break-all;position:relative}
.cred-reveal-overlay{position:absolute;inset:0;background:rgba(10,12,22,.85);border-radius:10px;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.cred-display{background:var(--dark2);border:1.5px solid var(--border);border-radius:10px;padding:.75rem 1rem;font-family:monospace;font-size:.82rem;color:var(--blue-l);word-break:break-all;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.cred-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Tx type badges ── */
.tx-credit{color:var(--primary);font-weight:700}
.tx-debit{color:var(--red);font-weight:700}

/* ── Settings sections ── */
.settings-section{background:var(--dark3);border:1px solid var(--border);border-radius:12px;padding:1.25rem 1.5rem;margin-bottom:1rem}
.settings-section-title{font-size:.9rem;font-weight:700;color:#fff;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}

/* ── OTP & verify inputs ── */
.otp-verify-box{background:rgba(65,84,241,.07);border:1px solid rgba(65,84,241,.2);border-radius:10px;padding:.9rem 1rem;margin-bottom:.85rem}
.otp-big-input{width:100%;max-width:210px;text-align:center;letter-spacing:.35em;font-size:1.25rem;font-weight:700;background:var(--dark2);border:1.5px solid var(--border);border-radius:8px;color:#fff;padding:.45rem .6rem}
.otp-big-input:focus{border-color:var(--blue-l);outline:none}
.otp-gate{background:rgba(65,84,241,.06);border:1px solid rgba(65,84,241,.2);border-radius:10px;padding:.9rem 1rem;margin-bottom:.75rem}

/* ── Dark Bootstrap 5.3 table override (full — wallet-pricing version) ── */
.table{
    --bs-table-bg:          transparent;
    --bs-table-color:       #c2c8e8;
    --bs-table-border-color:rgba(65,84,241,.12);
    --bs-table-striped-bg:  transparent;
    --bs-table-hover-bg:    rgba(65,84,241,.06);
    --bs-table-accent-bg:   transparent;
    --bs-table-bg-state:    transparent;
    --bs-table-bg-type:     transparent;
    color:#c2c8e8;
    background:transparent;
}
.table > :not(caption) > * > *{background-color:transparent!important;box-shadow:none!important;color:inherit;border-bottom-color:rgba(65,84,241,.12)!important}
.table thead > * > *{background-color:var(--dark2)!important;color:var(--text-muted)!important;font-size:.78rem;font-weight:600;border-color:rgba(65,84,241,.15)!important}
.table tbody tr:nth-child(even) > *{background-color:rgba(65,84,241,.04)!important}
.table tbody td{color:var(--text-muted);font-size:.82rem}
.table tbody td:first-child{color:#c2c8e8;font-weight:500}
.cmp-our > *{background-color:rgba(65,84,241,.1)!important}

/* ── Profile rows (settings) ── */
.profile-row{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:.6rem 0;border-bottom:1px solid rgba(255,255,255,.05)}
.profile-row:last-child{border-bottom:none}
.profile-label{font-size:.75rem;color:var(--text-muted);min-width:130px;flex-shrink:0}
.profile-value{font-size:.82rem;color:#fff;font-weight:500;word-break:break-all}

/* ── KYC status badges ── */
.kyc-badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:100px;text-transform:uppercase;letter-spacing:.04em}
.kyc-verified{background:rgba(0,179,0,.12);color:var(--primary);border:1px solid rgba(0,179,0,.3)}
.kyc-pending{background:rgba(245,158,11,.1);color:var(--amber);border:1px solid rgba(245,158,11,.3)}
.kyc-rejected{background:rgba(239,68,68,.1);color:#f87171;border:1px solid rgba(239,68,68,.3)}
.kyc-not_started,.kyc-expired{background:rgba(255,255,255,.06);color:var(--text-muted);border:1px solid var(--border)}

/* ── Toggle switches ── */
.toggle-wrap{display:flex;align-items:center;justify-content:space-between;padding:.85rem 0;border-bottom:1px solid rgba(255,255,255,.05)}
.toggle-wrap:last-child{border-bottom:none}
.toggle-info{flex:1}
.toggle-title{font-size:.85rem;font-weight:600;color:#fff}
.toggle-desc{font-size:.75rem;color:var(--text-muted);margin-top:.15rem}
.toggle-switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:rgba(255,255,255,.12);border-radius:24px;cursor:pointer;transition:.25s}
.toggle-slider:before{content:'';position:absolute;width:18px;height:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.25s}
.toggle-switch input:checked + .toggle-slider{background:var(--primary)}
.toggle-switch input:checked + .toggle-slider:before{transform:translateX(20px)}

/* ── Notification rows ── */
.notif-row{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.05)}
.notif-row:last-child{border-bottom:none}
.notif-label{font-size:.83rem;color:#fff;display:flex;align-items:center;gap:.4rem}
.notif-sub{font-size:.72rem;color:var(--text-muted);margin-top:.1rem}

/* ── Alerts (settings) ── */
.warn-alert{background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.2);border-radius:10px;padding:.8rem 1rem;margin-bottom:.85rem;font-size:.8rem;color:#f87171}
.info-alert-blue{background:rgba(65,84,241,.06);border:1px solid rgba(65,84,241,.2);border-radius:8px;padding:.7rem 1rem;font-size:.78rem;color:var(--text-muted)}
.api-reveal-box{background:var(--dark2);border:2px solid rgba(0,179,0,.3);border-radius:10px;padding:1rem 1.25rem;font-family:monospace;font-size:.78rem;color:var(--primary);word-break:break-all;margin-bottom:.75rem;display:none}

/* ── Disbursements – label pills, verify, status badges, filter ── */
.label-pill{display:inline-flex;align-items:center;gap:4px;background:rgba(65,84,241,.1);border:1px solid rgba(65,84,241,.22);color:var(--blue-l);border-radius:100px;padding:2px 9px;font-size:.72rem;font-weight:600;cursor:pointer;transition:all .15s;user-select:none}
.label-pill:hover,.label-pill.active{background:var(--blue-soft);border-color:var(--blue);color:#fff}
.label-pill.active{background:rgba(65,84,241,.3)}
.verify-result{border-radius:8px;padding:.6rem .85rem;font-size:.82rem;margin-top:.5rem}
.verify-ok{background:rgba(0,179,0,.07);border:1px solid rgba(0,179,0,.2);color:var(--primary)}
.verify-fail{background:rgba(220,53,69,.07);border:1px solid rgba(220,53,69,.25);color:#ff6b6b}
.status-badge-p{background:rgba(245,158,11,.15);color:var(--amber);border:1px solid rgba(245,158,11,.25);border-radius:100px;padding:1px 8px;font-size:.7rem;font-weight:700}
.status-badge-s{background:rgba(0,179,0,.12);color:var(--primary);border:1px solid rgba(0,179,0,.2);border-radius:100px;padding:1px 8px;font-size:.7rem;font-weight:700}
.status-badge-f{background:rgba(220,53,69,.1);color:#ff6b6b;border:1px solid rgba(220,53,69,.2);border-radius:100px;padding:1px 8px;font-size:.7rem;font-weight:700}
.filter-bar{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;padding:.5rem 0}

/* ── Wallet pricing cards & comparison ── */
.pricing-card{background:var(--dark3);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.pricing-card-head{padding:1.25rem 1.5rem 1rem;border-bottom:1px solid var(--border)}
.pricing-card-title{font-size:1rem;font-weight:700;color:#fff;margin-bottom:.25rem}
.pricing-card-sub{font-size:.78rem;color:var(--text-muted)}
.pricing-card-body{padding:1.25rem 1.5rem}
.calc-box{background:var(--dark2);border:1px solid rgba(65,84,241,.2);border-radius:10px;padding:.85rem 1rem;font-size:.85rem}
.calc-row{display:flex;justify-content:space-between;margin-bottom:.35rem}
.calc-divider{border-top:1px solid rgba(65,84,241,.12);padding-top:.35rem;margin-top:.35rem}
.cmp-our{background:rgba(65,84,241,.07)!important}
.cmp-winner td:last-child,.cmp-winner th:last-child{color:var(--primary)!important;font-weight:700}
.badge-best{display:inline-block;font-size:.6rem;padding:1px 6px;background:rgba(0,179,0,.15);color:var(--primary);border-radius:100px;border:1px solid rgba(0,179,0,.3);margin-left:.35rem;vertical-align:middle}
.badge-mid{display:inline-block;font-size:.6rem;padding:1px 6px;background:rgba(245,158,11,.1);color:var(--amber);border-radius:100px;border:1px solid rgba(245,158,11,.25);margin-left:.35rem;vertical-align:middle}
.badge-high{display:inline-block;font-size:.6rem;padding:1px 6px;background:rgba(239,68,68,.1);color:var(--red);border-radius:100px;border:1px solid rgba(239,68,68,.2);margin-left:.35rem;vertical-align:middle}

/* ── Analytics grid & stat tiles ── */
.analytics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem}
@media(max-width:768px){.analytics-grid{grid-template-columns:1fr}}
.stat-tile{background:var(--dark2);border:1px solid var(--border);border-radius:12px;padding:1.1rem 1.25rem;display:flex;flex-direction:column;gap:.3rem}
.stat-tile-label{font-size:.75rem;color:var(--text-muted);display:flex;align-items:center;gap:.4rem}
.stat-tile-value{font-size:1.55rem;font-weight:700;color:var(--white)}
.stat-tile-sub{font-size:.75rem;display:flex;align-items:center;gap:.3rem}
.stat-tile-sub.up{color:var(--primary)}
.stat-tile-sub.down{color:#f87171}
.stat-tile-sub.neutral{color:var(--text-muted)}
.source-pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.source-pill{display:flex;align-items:center;gap:.5rem;background:var(--dark3);border:1px solid var(--border);border-radius:8px;padding:.45rem .8rem;flex:1;min-width:120px}
.source-pill-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.source-pill-name{font-size:.73rem;color:var(--text-muted)}
.source-pill-val{font-size:.82rem;font-weight:700;color:var(--white);margin-left:auto}
.dash-table{width:100%;border-collapse:collapse;font-size:.8rem}
.dash-table th{color:var(--text-muted);font-weight:500;padding:.5rem .6rem;border-bottom:1px solid var(--border);text-align:left}
.dash-table td{padding:.55rem .6rem;border-bottom:1px solid var(--border);color:var(--text-body);vertical-align:middle}
.dash-table tr:last-child td{border-bottom:none}
.badge-src{font-size:.7rem;padding:2px 8px;border-radius:100px;background:var(--dark3);border:1px solid var(--border);white-space:nowrap}

/* ── KYC verification flow ── */
.kyc-steps{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:2.25rem}
.kyc-step{display:flex;flex-direction:column;align-items:center;gap:7px}
.kyc-step-circle{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;border:2px solid var(--border);background:var(--dark3);color:var(--text-muted);transition:all .3s}
.kyc-step.active .kyc-step-circle{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 0 18px var(--blue-glow)}
.kyc-step.done .kyc-step-circle{background:rgba(65,170,40,.15);border-color:var(--primary);color:var(--primary)}
.kyc-step-label{font-size:.72rem;color:var(--text-muted);font-weight:600;white-space:nowrap;letter-spacing:.04em;text-transform:uppercase}
.kyc-step.active .kyc-step-label{color:var(--blue-l)}
.kyc-step.done .kyc-step-label{color:var(--primary)}
.kyc-step-line{flex:1;height:1px;background:var(--border);min-width:60px;max-width:100px;margin-bottom:24px;transition:background .3s}
.kyc-step-line.done{background:var(--primary)}
.kyc-card{background:var(--card-bg);border:1px solid var(--border);border-radius:16px;padding:2rem 2rem 1.75rem;max-width:540px;margin:0 auto}
.kyc-card h3{font-size:1.15rem;font-weight:800;color:var(--white);margin-bottom:.3rem;letter-spacing:-.3px}
.kyc-card .card-sub{color:var(--text-muted);font-size:.85rem;margin-bottom:1.5rem}
.form-hint{font-size:.76rem;color:var(--text-muted);margin-top:4px}
.pay-summary{background:var(--dark3);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:1.25rem}
.pay-summary-row{display:flex;justify-content:space-between;font-size:.875rem;padding:5px 0}
.pay-summary-row .k{color:var(--text-muted)}
.pay-summary-row .v{font-weight:600;color:var(--text-body);font-family:'Space Mono',monospace;font-size:.83rem}
.pay-summary-divider{border:none;border-top:1px solid var(--border);margin:8px 0}
.pay-summary-row.total .k{font-weight:700;color:var(--white)}
.pay-summary-row.total .v{font-size:.97rem;font-weight:800;color:var(--primary);font-family:'Outfit',sans-serif}
.btn-kyc-primary{width:100%;padding:.72rem 1.5rem;background:var(--blue);color:#fff;border:none;border-radius:10px;font-family:'Outfit',sans-serif;font-weight:700;font-size:.92rem;cursor:pointer;transition:background .2s,box-shadow .2s,transform .1s;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 18px var(--blue-glow)}
.btn-kyc-primary:hover{background:var(--blue-l);box-shadow:0 6px 24px var(--blue-glow)}
.btn-kyc-primary:active{transform:scale(.98)}
.btn-kyc-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn-kyc-primary.green{background:var(--primary);box-shadow:0 4px 18px rgba(65,170,40,.3);color:#000}
.btn-kyc-primary.green:hover{filter:brightness(1.1);box-shadow:0 6px 24px rgba(65,170,40,.4)}
.btn-kyc-primary.danger{background:var(--red);box-shadow:0 4px 18px rgba(224,108,117,.3)}
.btn-kyc-secondary{width:100%;padding:.65rem 1.5rem;background:transparent;color:var(--text-muted);border:1px solid var(--border);border-radius:10px;font-family:'Outfit',sans-serif;font-weight:600;font-size:.875rem;cursor:pointer;margin-top:.6rem;transition:border-color .2s,color .2s}
.btn-kyc-secondary:hover{border-color:var(--blue-border);color:var(--blue-l)}
.waiting-card{text-align:center;padding:2.5rem 2rem}
.waiting-icon{width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 1.25rem;animation:pulse-glow 2s infinite}
.waiting-icon.blue{background:var(--blue-soft);color:var(--blue-l);box-shadow:0 0 0 0 var(--blue-glow)}
.waiting-icon.green{background:rgba(65,170,40,.1);color:var(--primary)}
@keyframes pulse-glow{0%,100%{box-shadow:0 0 0 0 rgba(65,84,241,.4)}50%{box-shadow:0 0 0 16px rgba(65,84,241,0)}}
.timer-badge{display:inline-flex;align-items:center;gap:6px;background:var(--dark3);border:1px solid var(--border);border-radius:20px;padding:5px 14px;font-size:.82rem;color:var(--text-muted);font-weight:600;margin-top:.75rem;font-family:'Space Mono',monospace}
.result-icon{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 1.25rem}
.result-icon.success{background:rgba(65,170,40,.1);color:var(--primary);border:1px solid var(--border-g)}
.result-icon.fail{background:rgba(224,108,117,.1);color:var(--red);border:1px solid rgba(224,108,117,.25)}
.verified-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);font-size:.875rem}
.verified-row:last-child{border-bottom:none}
.verified-row .rk{color:var(--text-muted)}
.verified-row .rv{font-weight:600;color:var(--white);font-family:'Space Mono',monospace;font-size:.82rem;text-align:right}

/* ── Info boxes (KYC) ── */
.info-box{background:rgba(65,84,241,.08);border:1px solid var(--blue-border);border-radius:10px;padding:12px 15px;margin-bottom:1.25rem;font-size:.84rem;color:var(--blue-l);display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.info-box i{margin-top:1px;flex-shrink:0}
.info-box.warn{background:rgba(254,188,46,.08);border-color:rgba(254,188,46,.25);color:var(--amber)}
.info-box.danger{background:rgba(224,108,117,.08);border-color:rgba(224,108,117,.25);color:var(--red)}
.info-box.success{background:rgba(65,170,40,.08);border-color:var(--border-g);color:var(--primary)}

/* ── WooCommerce plugin page ── */
.woo-hero{background:linear-gradient(135deg,var(--dark2) 0%,#0d2a14 100%);border:1px solid var(--border);border-radius:16px;padding:2.5rem;margin-bottom:1.5rem;position:relative;overflow:hidden}
.woo-hero::before{content:'';position:absolute;top:-60px;right:-60px;width:260px;height:260px;background:rgba(0,179,0,.07);border-radius:50%}
.woo-hero::after{content:'';position:absolute;bottom:-40px;left:-40px;width:180px;height:180px;background:rgba(0,179,0,.05);border-radius:50%}
.feature-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:10px;background:rgba(0,179,0,.06);border:1px solid rgba(0,179,0,.12);margin-bottom:.5rem;font-size:.88rem;color:var(--white);font-weight:500}
.feature-item i{color:var(--primary);font-size:1rem;flex-shrink:0}
.step-row{display:flex;gap:1rem;margin-bottom:1.25rem}
.step-num{width:36px;height:36px;background:var(--primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;flex-shrink:0}
.step-body h6{font-size:.9rem;font-weight:700;color:#fff;margin-bottom:.2rem}
.step-body p{font-size:.8rem;color:var(--text-muted);margin:0}
.req-item{display:flex;align-items:center;gap:.6rem;padding:.65rem .9rem;background:var(--dark3);border:1px solid var(--border);border-radius:9px;font-size:.83rem;color:var(--white)}
.req-item i{font-size:.95rem;flex-shrink:0}
.dl-card{background:var(--dark2);border:1px solid var(--border);border-radius:14px;overflow:hidden;position:sticky;top:76px}
.dl-card-header{background:linear-gradient(135deg,#15803d,#22c55e);padding:1.5rem;text-align:center}
.dl-card-body{padding:1.25rem}
.dl-stat{display:flex;justify-content:space-between;align-items:center;padding:.45rem 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:.82rem}
.dl-stat:last-of-type{border-bottom:none}
.dl-stat-label{color:var(--text-muted)}
.dl-stat-val{color:#fff;font-weight:600}
.btn-dl-main{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.85rem;background:var(--primary);color:#fff;border:none;border-radius:10px;font-size:.95rem;font-weight:700;cursor:pointer;transition:opacity .2s,transform .2s;text-decoration:none;margin-bottom:.75rem}
.btn-dl-main:hover{opacity:.88;transform:translateY(-1px);color:#fff}

/* ── Product selection page ── */
.ps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.1rem;margin-bottom:1.5rem}
.ps-card{background:var(--dark3);border:2px solid var(--border);border-radius:14px;padding:1.6rem 1.4rem 1.4rem;cursor:pointer;transition:border-color .2s,transform .15s,box-shadow .2s;position:relative;user-select:none}
.ps-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,.35)}
.ps-card.selected{border-color:var(--primary);background:rgba(0,179,0,.05)}
.ps-card.selected .ps-check{opacity:1;transform:scale(1)}
.ps-card.disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.ps-check{position:absolute;top:.85rem;right:.85rem;width:22px;height:22px;background:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.5);transition:opacity .2s,transform .2s}
.ps-check i{color:#fff;font-size:.65rem}
.ps-icon-wrap{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:1rem}
.ps-icon-hp{background:rgba(34,197,94,.12);color:#4ade80}
.ps-icon-hb{background:rgba(59,130,246,.12);color:#60a5fa}
.ps-icon-both{background:rgba(168,85,247,.12);color:#c084fc}
.ps-icon-soon{background:var(--dark2);color:var(--text-muted)}
.ps-badge{display:inline-block;font-size:.6rem;font-weight:700;padding:2px 8px;border-radius:100px;margin-bottom:.6rem;letter-spacing:.04em;text-transform:uppercase}
.badge-pay{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.3);color:#4ade80}
.badge-back{background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.3);color:#60a5fa}
.badge-both{background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.3);color:#c084fc}
.badge-soon{background:var(--dark2);border:1px solid var(--border);color:var(--text-muted)}
.ps-card-title{font-size:1rem;font-weight:700;color:var(--white);margin-bottom:.3rem}
.ps-card-desc{font-size:.76rem;color:var(--text-muted);line-height:1.6}
.ps-btn{background:var(--primary);color:#fff;border:none;font-weight:700;font-size:.9rem;padding:.7rem 2.2rem;border-radius:9px;cursor:pointer;transition:opacity .15s;min-width:160px}
.ps-btn:disabled{opacity:.4;cursor:not-allowed}
.ps-btn:not(:disabled):hover{opacity:.85}
.ps-msg{margin-top:.8rem;font-size:.82rem;min-height:20px}
.ps-msg.err{color:var(--red)}
.ps-msg.ok{color:#4ade80}

/* ── C2B Simulator (playground) ── */
.sim-layout{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
@media(max-width:991px){.sim-layout{grid-template-columns:1fr}}
.sim-card{background:var(--card-bg);border:1px solid var(--border);border-radius:18px;padding:2rem}
.sim-card h4{color:var(--white);font-weight:800;font-size:1.1rem;margin-bottom:1.5rem;display:flex;align-items:center;gap:.6rem}
.sim-card h4 i{color:var(--primary)}
.sim-result-box{background:var(--dark3);border:1px solid var(--border);border-radius:12px;padding:1.25rem;font-family:'Space Mono',monospace;font-size:.8rem;line-height:1.8;min-height:280px;color:var(--text-body);overflow-x:auto;white-space:pre-wrap;word-break:break-all}
.r-comment{color:#496a49;font-style:italic}
.r-key{color:#7ec8e3}
.r-str{color:#f9d56e}
.r-num{color:#e06c75}
.r-green{color:var(--primary)}
.r-hash{color:#c792ea}
.r-muted{color:var(--text-muted)}
.sim-status-bar{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem;background:var(--dark3);border:1px solid var(--border);border-radius:10px;margin-bottom:1rem;font-size:.82rem}
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px}
.status-dot.idle{background:var(--text-muted)}
.status-dot.sending{background:#febc2e;animation:pulse 1s infinite}
.status-dot.success{background:var(--primary)}
.status-dot.error{background:#e06c75}
.history-item{display:flex;align-items:center;gap:.75rem;padding:.6rem .9rem;background:var(--dark3);border:1px solid var(--border);border-radius:8px;margin-bottom:.5rem;font-size:.82rem;cursor:pointer;transition:border-color .2s}
.history-item:hover{border-color:rgba(0,179,0,.35)}
.history-item .h-status{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.history-item .h-time{color:var(--text-muted);font-family:monospace;margin-left:auto}
.txn-type-btn{flex:1;padding:.6rem;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text-muted);font-weight:600;font-size:.88rem;cursor:pointer;transition:all .2s;font-family:inherit}
.txn-type-btn.active{background:rgba(0,179,0,.15);border-color:var(--primary);color:var(--primary)}
.disclaimer-box{background:rgba(254,188,46,.05);border:1px solid rgba(254,188,46,.25);border-radius:12px;padding:1rem 1.25rem;display:flex;gap:.75rem;align-items:flex-start;margin-bottom:1.5rem}
.disclaimer-box i{color:#febc2e;font-size:1.1rem;flex-shrink:0;margin-top:2px}
.disclaimer-box strong{color:#f0cc7a}
.disclaimer-box p{color:var(--text-muted);font-size:.84rem;margin:0;line-height:1.6}
.privacy-strip{display:flex;align-items:center;gap:.5rem;background:rgba(65,84,241,.05);border:1px solid rgba(65,84,241,.15);border-radius:8px;padding:.55rem 1rem;font-size:.78rem;color:var(--text-muted);margin-top:.75rem}
.privacy-strip i{color:var(--blue-l)}
.http-badge{display:inline-flex;align-items:center;font-family:'Space Mono',monospace;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:5px;margin-left:.5rem}
.http-2xx{background:rgba(0,179,0,.15);color:var(--primary);border:1px solid rgba(0,179,0,.3)}
.http-4xx{background:rgba(254,188,46,.12);color:#f0cc7a;border:1px solid rgba(254,188,46,.25)}
.http-5xx{background:rgba(224,108,117,.12);color:#e06c75;border:1px solid rgba(224,108,117,.25)}
.http-err{background:rgba(224,108,117,.12);color:#e06c75;border:1px solid rgba(224,108,117,.25)}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Decode page ── */
.credit-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(0,179,0,.08);border:1px solid rgba(0,179,0,.22);color:var(--primary);border-radius:100px;font-size:.78rem;font-weight:700;padding:4px 12px}
.login-cta-box{background:linear-gradient(135deg,rgba(65,84,241,.07),rgba(0,179,0,.05));border:1px solid rgba(65,84,241,.2);border-radius:14px;padding:1.5rem;text-align:center;margin-top:.5rem}
.login-cta-box h6{color:var(--white);font-weight:800;margin-bottom:.4rem}
.login-cta-box p{color:var(--text-muted);font-size:.85rem;margin-bottom:1rem}
.decode-result.success{border-color:rgba(0,179,0,.35);background:rgba(0,179,0,.05)}
.decode-result.error{border-color:rgba(224,108,117,.3);background:rgba(224,108,117,.05)}
.decode-result.loading{border-color:rgba(65,84,241,.25)}
.msisdn-value{font-family:'Space Mono',monospace;font-size:1.35rem;font-weight:700;color:var(--primary);letter-spacing:.05em}
.cost-note{font-size:.75rem;color:var(--text-muted);margin-top:.5rem;text-align:center}
.topup-inline{display:inline-flex;align-items:center;gap:5px;background:rgba(0,179,0,.1);border:1px solid rgba(0,179,0,.25);color:var(--primary);border-radius:7px;padding:4px 12px;font-size:.8rem;font-weight:700;text-decoration:none;transition:background .2s}
.topup-inline:hover{background:rgba(0,179,0,.2);color:var(--primary)}

/* ── Navbar user dropdown & mobile drawer ── */
.btn-user-dropdown{background:var(--dark3);border:1px solid var(--border);border-radius:40px;padding:.5rem 1rem;color:var(--white);font-weight:500;font-size:.9rem;display:flex;align-items:center;gap:.5rem;transition:all .2s ease;cursor:pointer}
.btn-user-dropdown:hover{background:var(--dark2);border-color:var(--blue)}
.btn-user-dropdown i{font-size:1.1rem;color:var(--blue-l)}
.btn-user-dropdown::after{display:inline-block;margin-left:.5rem;content:"▼";font-size:.7rem;color:var(--text-muted)}
.dropdown-header{padding:.75rem 1rem;background:var(--dark3);border-radius:8px;margin-bottom:.5rem}
.dropdown-header strong{display:block;color:var(--white);font-size:.9rem;margin-bottom:.25rem}
.dropdown-header small{color:var(--text-muted);font-size:.75rem}
.dropdown-menu{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.3);padding:.5rem;min-width:240px}
.dropdown-item{color:var(--text-body);padding:.6rem 1rem;border-radius:8px;transition:all .2s ease}
.dropdown-item:hover{background:var(--dark3);color:var(--white)}
.dropdown-item i{width:1.2rem;color:var(--blue-l)}
.dropdown-divider{border-top-color:var(--border);margin:.5rem 0}
.drawer-user-section{display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--dark3);border-radius:12px;margin-bottom:1rem}
.drawer-user-avatar{width:48px;height:48px;border-radius:50%;background:var(--dark2);display:flex;align-items:center;justify-content:center;border:2px solid var(--blue)}
.drawer-user-avatar i{font-size:1.5rem;color:var(--blue-l)}
.drawer-user-info{flex:1}
.drawer-user-info strong{display:block;color:var(--white);font-size:1rem;margin-bottom:.25rem}
.drawer-user-info small{color:var(--text-muted);font-size:.75rem}
.drawer-btn-logout{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;background:rgba(224,108,117,.1);border:1px solid rgba(224,108,117,.3);color:#e06c75;padding:.75rem;border-radius:10px;text-decoration:none;font-weight:600;transition:all .2s ease}
.drawer-btn-logout:hover{background:rgba(224,108,117,.2);color:#e06c75}

/* ── 404 error page ── */
.error-page{min-height:100vh;display:flex;flex-direction:column}
.error-body{flex:1;display:flex;align-items:center;justify-content:center;padding:3rem 1rem;position:relative;overflow:hidden}
.error-body::before{content:'';position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(65,84,241,.08) 0%,transparent 70%);top:-100px;left:-150px;pointer-events:none}
.error-body::after{content:'';position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(0,179,0,.06) 0%,transparent 70%);bottom:-80px;right:-100px;pointer-events:none}
.error-code{font-family:'Space Mono',monospace;font-size:clamp(7rem,20vw,14rem);font-weight:700;line-height:1;position:relative;display:inline-block;letter-spacing:-4px;user-select:none}
.error-code-inner{background:linear-gradient(135deg,#4154f1 0%,#00b300 60%,#6b7fff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative;z-index:2}
.error-code-ghost{position:absolute;inset:0;font-family:'Space Mono',monospace;font-size:clamp(7rem,20vw,14rem);font-weight:700;line-height:1;letter-spacing:-4px;color:transparent;-webkit-text-stroke:1px rgba(65,84,241,.15);transform:translate(6px,6px);z-index:1}
.error-code:hover .error-code-inner{animation:glitch .4s ease both}
@keyframes glitch{0%{transform:translate(0)}20%{transform:translate(-3px,2px);filter:hue-rotate(30deg)}40%{transform:translate(3px,-2px);filter:hue-rotate(-20deg)}60%{transform:translate(-2px,1px)}80%{transform:translate(2px,-1px)}100%{transform:translate(0);filter:none}}
.error-terminal{background:var(--card-bg);border:1px solid var(--border);border-radius:16px;overflow:hidden;max-width:480px;width:100%;box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(65,84,241,.08)}
.error-terminal-bar{background:var(--dark3);padding:.6rem 1rem;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--border)}
.error-terminal-bar .dot{width:10px;height:10px;border-radius:50%}
.error-terminal-bar .dot.r{background:#ff5f57}
.error-terminal-bar .dot.y{background:#febc2e}
.error-terminal-bar .dot.g{background:#28c840}
.error-terminal-title{margin-left:auto;font-family:'Space Mono',monospace;font-size:.72rem;color:var(--text-muted)}
.error-terminal-body{padding:1.25rem 1.25rem 1.5rem;font-family:'Space Mono',monospace;font-size:.8rem;line-height:1.9}
.t-prompt{color:var(--blue-l)}
.t-cmd{color:var(--text-body)}
.t-err{color:#e06c75}
.t-muted{color:var(--text-muted)}
.t-green{color:var(--primary)}
.t-cursor{display:inline-block;width:8px;height:14px;background:var(--blue-l);animation:blink 1s infinite;vertical-align:middle;margin-left:2px}
.suggestion-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem;margin-top:1.5rem}
.suggestion-link{display:flex;align-items:center;gap:10px;padding:.75rem 1rem;background:var(--card-bg);border:1px solid var(--border);border-radius:12px;color:var(--text-body);text-decoration:none;font-size:.88rem;font-weight:500;transition:all .2s}
.suggestion-link i{width:32px;height:32px;border-radius:8px;background:var(--blue-soft);border:1px solid var(--blue-border);display:flex;align-items:center;justify-content:center;font-size:.9rem;color:var(--blue-l);flex-shrink:0}
.suggestion-link:hover{border-color:var(--blue);color:var(--blue-l);transform:translateY(-2px);box-shadow:0 8px 24px rgba(65,84,241,.1)}
.suggestion-link:hover i{background:var(--blue);color:#fff}
.status-strip{display:inline-flex;align-items:center;gap:8px;background:rgba(0,179,0,.07);border:1px solid rgba(0,179,0,.2);border-radius:100px;padding:4px 14px;font-size:.78rem;color:var(--primary);font-weight:600;margin-bottom:1rem}
.dot-grid{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(65,84,241,.05) 1px,transparent 1px);background-size:28px 28px}
.error-content{position:relative;z-index:1}
@media(max-width:576px){.suggestion-grid{grid-template-columns:1fr 1fr}}

/* ── Email verification page ── */
.verify-page{min-height:100vh;display:flex;flex-direction:column;background:var(--dark);position:relative;overflow:hidden}
.blob-1{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(65,84,241,.09) 0%,transparent 65%);top:-200px;right:-150px;pointer-events:none}
.blob-2{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(0,179,0,.06) 0%,transparent 65%);bottom:-100px;left:-100px;pointer-events:none}
.bg-dots{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(65,84,241,.04) 1px,transparent 1px);background-size:28px 28px}
.verify-body{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem 1rem;position:relative;z-index:1}
.verify-card{background:var(--card-bg);border:1px solid var(--border);border-radius:22px;width:100%;max-width:480px;overflow:hidden;box-shadow:0 28px 90px rgba(0,0,0,.55),0 0 0 1px rgba(65,84,241,.07);position:relative}
.verify-card::before{content:'';display:block;height:3px;background:var(--grad-primary)}
.verify-state{display:none;padding:2.5rem 2rem 2rem;text-align:center}
.verify-state.active{display:block;animation:fadeIn .5s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.state-icon{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 1.5rem}
.state-icon.loading{background:var(--blue-soft);border:2px solid var(--blue-border);color:var(--blue-l)}
.state-icon.success{background:rgba(0,179,0,.1);border:2px solid rgba(0,179,0,.3);color:var(--primary);animation:popIn .55s cubic-bezier(.34,1.56,.64,1) both}
.state-icon.error{background:rgba(224,108,117,.1);border:2px solid rgba(224,108,117,.3);color:#e06c75;animation:popIn .55s cubic-bezier(.34,1.56,.64,1) both}
.state-icon.expired{background:rgba(254,188,46,.08);border:2px solid rgba(254,188,46,.25);color:#febc2e;animation:popIn .55s cubic-bezier(.34,1.56,.64,1) both}
@keyframes popIn{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.ring-spinner{width:44px;height:44px;border-radius:50%;border:3px solid rgba(65,84,241,.2);border-top-color:var(--blue-l);animation:spin .8s linear infinite}
.state-title{font-size:1.4rem;font-weight:900;color:var(--white);letter-spacing:-.4px;margin-bottom:.5rem}
.state-sub{font-size:.93rem;color:var(--text-muted);line-height:1.65;margin-bottom:1.5rem}
.state-sub strong{color:var(--white)}
.loading-dots{display:flex;justify-content:center;gap:6px;margin-bottom:1.5rem}
.loading-dots span{width:7px;height:7px;border-radius:50%;background:var(--blue-l);animation:dotBounce 1.2s ease-in-out infinite;opacity:.3}
.loading-dots span:nth-child(1){animation-delay:0s}
.loading-dots span:nth-child(2){animation-delay:.2s}
.loading-dots span:nth-child(3){animation-delay:.4s}
@keyframes dotBounce{0%,80%,100%{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1.2)}}
.info-box.green{background:rgba(0,179,0,.06);border:1px solid rgba(0,179,0,.2);color:var(--text-body)}
.info-box.blue{background:var(--blue-soft);border:1px solid var(--blue-border);color:var(--text-body)}
.info-box.red{background:rgba(224,108,117,.06);border:1px solid rgba(224,108,117,.2);color:var(--text-body)}
.info-box.amber{background:rgba(254,188,46,.06);border:1px solid rgba(254,188,46,.2);color:var(--text-body)}
.info-box i{margin-right:6px}
.info-box strong{color:var(--white)}
.feature-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:1.5rem}
.chip{display:inline-flex;align-items:center;gap:5px;background:var(--dark3);border:1px solid var(--border);border-radius:100px;padding:4px 12px;font-size:.78rem;color:var(--text-muted);font-weight:500}
.chip i{color:var(--primary);font-size:.78rem}
.btn-verify{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:.97rem;border:none;border-radius:10px;padding:.75rem 1.5rem;cursor:pointer;transition:all .25s;font-family:inherit;text-decoration:none;margin-bottom:.6rem}
.btn-verify.blue{background:var(--blue);color:#fff;box-shadow:0 4px 20px rgba(65,84,241,.3)}
.btn-verify.blue:hover{background:var(--blue-l);box-shadow:0 6px 28px rgba(65,84,241,.45);transform:translateY(-1px);color:#fff}
.btn-verify.green{background:var(--primary);color:#000;box-shadow:0 4px 20px rgba(0,179,0,.25)}
.btn-verify.green:hover{background:var(--primary-l);box-shadow:0 6px 28px rgba(0,230,0,.35);transform:translateY(-1px);color:#000}
.btn-verify.outline{background:transparent;color:var(--text-muted);border:1px solid var(--border);box-shadow:none}
.btn-verify.outline:hover{border-color:var(--blue);color:var(--blue-l);transform:translateY(-1px)}
.btn-verify:disabled{opacity:.6;cursor:not-allowed;transform:none}
.resend-row{font-size:.83rem;color:var(--text-muted);margin-top:.5rem}
.resend-btn{background:none;border:none;color:var(--blue-l);font-weight:600;cursor:pointer;font-size:.83rem;font-family:inherit;padding:0;transition:opacity .2s}
.resend-btn:disabled{opacity:.4;cursor:not-allowed;color:var(--text-muted)}
.divider{display:flex;align-items:center;gap:.75rem;margin:.85rem 0;color:var(--text-muted);font-size:.78rem}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border)}
.token-box{background:var(--dark3);border:1px solid var(--border);border-radius:10px;padding:.65rem 1rem;font-family:'Courier New',monospace;font-size:.75rem;color:var(--text-muted);word-break:break-all;text-align:left;margin-bottom:1.25rem;display:flex;align-items:center;gap:8px}
.token-box span{flex:1}
.verify-footer{border-top:1px solid var(--border);padding:1rem 2rem 1.4rem;text-align:center;font-size:.82rem;color:var(--text-muted)}
.verify-footer a{color:var(--blue-l);text-decoration:none;font-weight:600}
.verify-footer a:hover{text-decoration:underline}
.page-foot{background:var(--dark2);border-top:1px solid var(--border);padding:1rem 1.5rem;text-align:center;font-size:.78rem;color:var(--text-muted);position:relative;z-index:1}
.page-foot a{color:var(--blue-l);text-decoration:none}
.countdown-ring{position:relative;width:56px;height:56px;margin:0 auto 1rem}
.countdown-ring svg{transform:rotate(-90deg)}
.countdown-ring .track{fill:none;stroke:var(--dark3);stroke-width:3}
.countdown-ring .prog{fill:none;stroke:#febc2e;stroke-width:3;stroke-linecap:round;stroke-dasharray:138;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear}
.countdown-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Courier New',monospace;font-size:.9rem;font-weight:700;color:#febc2e}
.navbar-custom{position:relative;z-index:10;background:rgba(9,11,18,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:.65rem 1.5rem;display:flex;align-items:center;justify-content:space-between}
.logo-link{font-size:1.15rem;font-weight:900;color:var(--white);text-decoration:none;letter-spacing:-.3px}
.nav-buttons{display:flex;align-items:center;gap:.6rem}
.support-btn{display:inline-flex;align-items:center;gap:5px;background:rgba(0,179,0,.1);border:1px solid rgba(0,179,0,.25);color:var(--primary);text-decoration:none;font-size:.8rem;font-weight:700;padding:.28rem .85rem;border-radius:8px;transition:background .2s}
.support-btn:hover{background:rgba(0,179,0,.2)}
.home-btn{display:inline-flex;align-items:center;gap:5px;color:var(--text-muted);text-decoration:none;font-size:.83rem;font-weight:600;border:1px solid var(--border);padding:.28rem .85rem;border-radius:8px;transition:all .2s}
.home-btn:hover{border-color:var(--blue);color:var(--blue-l)}
@media(max-width:480px){.verify-state{padding:2rem 1.25rem 1.5rem}.verify-footer{padding:1rem 1.25rem 1.25rem}}
@media(max-width:768px){.nav-buttons{display:none}}

/* ── Terms & Conditions page ── */
.reading-progress{position:fixed;top:0;right:0;width:3px;height:0%;background:var(--grad-primary);z-index:2000;transition:height .1s;border-radius:0 0 3px 0}
.toc-sidebar{position:sticky;top:80px;max-height:calc(100vh - 100px);overflow-y:auto;padding-right:.5rem}
.toc-sidebar::-webkit-scrollbar{width:3px}
.toc-sidebar::-webkit-scrollbar-thumb{background:var(--blue-d);border-radius:3px}
.toc-title{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--blue);opacity:.75;margin-bottom:.6rem;padding-left:.75rem}
.toc-link{display:flex;align-items:flex-start;gap:7px;padding:.32rem .75rem;border-left:2px solid transparent;color:var(--text-muted);text-decoration:none;font-size:.79rem;font-weight:500;line-height:1.35;transition:all .18s;border-radius:0 6px 6px 0}
.toc-link .toc-num{font-family:'Space Mono',monospace;font-size:.67rem;color:var(--blue-border);flex-shrink:0;margin-top:1px;min-width:20px}
.toc-link:hover{color:var(--blue-l);border-left-color:var(--blue);background:var(--blue-soft)}
.toc-link.active{color:var(--primary);border-left-color:var(--primary);background:rgba(0,179,0,.07)}
.toc-link.active .toc-num{color:var(--primary)}
.term-section{scroll-margin-top:90px;margin-bottom:2.25rem;padding-bottom:2.25rem;border-bottom:1px solid var(--border)}
.term-section:last-child{border-bottom:none}
.term-number{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--blue-soft);border:1px solid var(--blue-border);font-family:'Space Mono',monospace;font-size:.68rem;font-weight:700;color:var(--blue-l);flex-shrink:0;margin-right:.75rem}
.term-heading{display:flex;align-items:center;margin-bottom:.9rem}
.term-heading h2{font-size:1rem;font-weight:800;color:var(--white);margin:0;letter-spacing:-.2px}
.term-body{color:var(--text-muted);font-size:.93rem;line-height:1.8;padding-left:2.9rem}
.term-body p{margin-bottom:.65rem}
.term-body p:last-child{margin-bottom:0}
.term-list{list-style:none;padding:0;margin:.4rem 0 0}
.term-list li{display:flex;gap:10px;margin-bottom:.55rem;color:var(--text-muted);font-size:.91rem;line-height:1.7}
.term-list li .sub-label{font-family:'Space Mono',monospace;font-size:.72rem;font-weight:700;color:var(--blue-l);flex-shrink:0;min-width:22px;padding-top:2px}
.term-bullets{list-style:none;padding:0;margin:.5rem 0}
.term-bullets li{display:flex;gap:8px;align-items:flex-start;margin-bottom:.4rem;font-size:.91rem;color:var(--text-muted);line-height:1.65}
.term-bullets li::before{content:'→';color:var(--blue-l);font-size:.8rem;margin-top:2px;flex-shrink:0}
.term-bullets.green li::before{color:var(--primary)}
.term-callout{background:rgba(65,84,241,.06);border:1px solid var(--blue-border);border-left:3px solid var(--blue);border-radius:0 10px 10px 0;padding:.8rem 1rem;margin:.65rem 0;font-size:.88rem;color:var(--text-body);line-height:1.65}
.term-callout.warn{background:rgba(254,188,46,.05);border-color:rgba(254,188,46,.25);border-left-color:#febc2e}
.term-callout.danger{background:rgba(224,108,117,.05);border-color:rgba(224,108,117,.25);border-left-color:#e06c75}
.term-callout.success{background:rgba(0,179,0,.05);border-color:rgba(0,179,0,.2);border-left-color:var(--primary)}
.term-callout.info{background:rgba(65,84,241,.06);border-color:var(--blue-border);border-left-color:var(--blue)}
.term-callout strong{color:var(--white)}
.last-updated{display:inline-flex;align-items:center;gap:6px;background:var(--blue-soft);border:1px solid var(--blue-border);color:var(--blue-l);font-family:'Space Mono',monospace;font-size:.73rem;font-weight:600;padding:4px 12px;border-radius:100px}
.toc-mobile-toggle{display:none;align-items:center;gap:8px;background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:.6rem 1rem;color:var(--text-body);font-weight:600;font-size:.88rem;cursor:pointer;margin-bottom:1.5rem;width:100%;transition:border-color .2s;font-family:inherit}
.toc-mobile-toggle:hover{border-color:var(--blue);color:var(--blue-l)}
.toc-mobile{display:none;margin-bottom:1.5rem}
.toc-mobile.open{display:block}
@media(max-width:991px){.toc-mobile-toggle{display:flex}.terms-content{max-width:100%}}
@media(max-width:767px){.term-body{padding-left:1.25rem}}

/* ── Services page ── */
.services-hero{background:radial-gradient(ellipse 90% 70% at 60% 20%,rgba(65,84,241,.11) 0%,transparent 55%),radial-gradient(ellipse 50% 60% at 10% 90%,rgba(0,179,0,.07) 0%,transparent 55%),var(--dark2);border-bottom:1px solid var(--border);padding:5rem 0 3.5rem}
.services-hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(65,84,241,.1);border:1px solid var(--blue-border);color:var(--blue-l);font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:5px 16px;border-radius:100px;margin-bottom:1.25rem}
.services-hero h1{font-size:clamp(2.2rem,5.5vw,3.8rem);font-weight:900;color:var(--white);letter-spacing:-1.5px;line-height:1.08}
.services-hero p{color:var(--text-muted);font-size:1.1rem;max-width:560px;line-height:1.7;margin-top:1rem}
.hero-trust-bar{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:2rem}
.hero-trust-item{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--text-muted)}
.hero-trust-item i{color:var(--primary);font-size:1rem}
.category-pill{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 12px;border-radius:100px;margin-bottom:.75rem}
.category-pill.blue{background:rgba(65,84,241,.12);border:1px solid var(--blue-border);color:var(--blue-l)}
.category-pill.green{background:rgba(0,179,0,.1);border:1px solid var(--border-g);color:var(--primary)}
.category-pill.amber{background:rgba(254,188,46,.1);border:1px solid rgba(254,188,46,.25);color:var(--amber)}
.service-card{background:var(--card-bg);border:1px solid var(--border);border-radius:16px;padding:1.75rem;height:100%;transition:border-color .25s,transform .25s,box-shadow .25s;position:relative;overflow:hidden}
.service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad-primary);opacity:0;transition:opacity .3s}
.service-card:hover{border-color:rgba(65,84,241,.35);transform:translateY(-5px);box-shadow:0 20px 60px rgba(65,84,241,.1),0 0 0 1px rgba(65,84,241,.08)}
.service-card:hover::before{opacity:1}
.service-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:1.1rem}
.service-icon.blue{background:rgba(65,84,241,.12);border:1px solid var(--blue-border);color:var(--blue-l)}
.service-icon.green{background:rgba(0,179,0,.1);border:1px solid var(--border-g);color:var(--primary)}
.service-icon.amber{background:rgba(254,188,46,.1);border:1px solid rgba(254,188,46,.25);color:var(--amber)}
.service-card h4{color:var(--white);font-size:1.05rem;font-weight:700;margin-bottom:.5rem}
.service-card p{color:var(--text-muted);font-size:.9rem;line-height:1.65;margin-bottom:1rem}
.service-tags{display:flex;flex-wrap:wrap;gap:6px}
.service-tag{background:var(--dark3);border:1px solid var(--border);color:var(--text-muted);font-size:.72rem;font-weight:600;padding:2px 10px;border-radius:100px}
.deep-dive{padding:5rem 0}
.deep-dive-icon{width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:1.7rem;margin-bottom:1.5rem}
.deep-dive-icon.blue{background:rgba(65,84,241,.12);border:1px solid var(--blue-border);color:var(--blue-l);box-shadow:0 0 32px rgba(65,84,241,.15)}
.deep-dive-icon.green{background:rgba(0,179,0,.1);border:1px solid var(--border-g);color:var(--primary);box-shadow:0 0 32px rgba(0,179,0,.12)}
.deep-dive-icon.amber{background:rgba(254,188,46,.1);border:1px solid rgba(254,188,46,.25);color:var(--amber);box-shadow:0 0 32px rgba(254,188,46,.1)}
.deep-dive h2{font-size:clamp(1.5rem,3.5vw,2.1rem);font-weight:800;color:var(--white);letter-spacing:-.5px;line-height:1.2}
.deep-dive p.lead{color:var(--text-muted);font-size:1rem;line-height:1.7;max-width:500px}
.deep-detail-card{background:var(--dark3);border:1px solid var(--border);border-radius:12px;padding:1.25rem 1.5rem;display:flex;align-items:flex-start;gap:1rem;transition:border-color .2s}
.deep-detail-card:hover{border-color:rgba(65,84,241,.35)}
.deep-detail-card i{font-size:1.2rem;flex-shrink:0;margin-top:2px}
.deep-detail-card h6{color:var(--white);font-weight:700;font-size:.95rem;margin-bottom:.2rem}
.deep-detail-card p{color:var(--text-muted);font-size:.85rem;margin:0;line-height:1.55}
.process-step{display:flex;gap:1.25rem;align-items:flex-start}
.process-num{width:40px;height:40px;border-radius:10px;background:var(--blue-soft);border:1px solid var(--blue-border);color:var(--blue-l);font-weight:800;font-size:.9rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'Space Mono',monospace}
.process-step h6{color:var(--white);font-weight:700;margin-bottom:.2rem}
.process-step p{color:var(--text-muted);font-size:.88rem;margin:0;line-height:1.55}
.why-stat{text-align:center;padding:2rem 1rem;border-right:1px solid var(--border)}
.why-stat:last-child{border-right:none}
.why-stat .num{font-size:clamp(2rem,4vw,3rem);font-weight:900;color:var(--white);letter-spacing:-1px;font-family:'Space Mono',monospace;line-height:1}
.why-stat .num span{color:var(--primary)}
.why-stat .lbl{color:var(--text-muted);font-size:.88rem;margin-top:.4rem}
.services-cta{background:radial-gradient(ellipse 80% 60% at 50% 100%,rgba(65,84,241,.1) 0%,transparent 60%),radial-gradient(ellipse 60% 50% at 50% 0%,rgba(0,179,0,.06) 0%,transparent 60%),var(--dark3);border-top:1px solid var(--border);padding:5rem 0}
.cta-input-group{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;margin-top:2rem}
@media(max-width:768px){.why-stat{border-right:none;border-bottom:1px solid var(--border);padding:1.5rem}.why-stat:last-child{border-bottom:none}.services-hero{padding:3.5rem 0 2.5rem}}

/* ── Documentation page (standalone layout) ── */
.doc-topnav{position:fixed;top:0;left:0;right:0;z-index:200;height:60px;background:rgba(9,11,18,.94);backdrop-filter:blur(18px);border-bottom:1px solid rgba(65,84,241,.16);display:flex;align-items:center;gap:14px;padding:0 24px}
.doc-nav-logo{display:flex;align-items:center;gap:10px;white-space:nowrap}
.doc-nav-logo img{height:36px;width:auto}
.doc-nav-tag{background:rgba(65,84,241,.12);border:1px solid rgba(65,84,241,.25);color:#4154f1;font-family:'Space Mono',monospace;font-size:.6rem;padding:2px 9px;border-radius:100px;font-weight:700;letter-spacing:.04em}
.doc-nav-search{flex:1;max-width:340px;margin:0 auto;display:flex;align-items:center;gap:8px;background:#161a28;border:1px solid rgba(65,84,241,.16);border-radius:8px;padding:0 12px;height:36px;transition:border-color .2s}
.doc-nav-search:focus-within{border-color:#4154f1}
.doc-nav-search i{color:#4a5270;font-size:.8rem}
.doc-nav-search input{flex:1;background:none;border:none;outline:none;color:#c2c8e8;font-size:.83rem;font-family:'Outfit',sans-serif}
.doc-nav-search input::placeholder{color:#4a5270}
.doc-nav-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.doc-btn-wa{display:inline-flex;align-items:center;gap:6px;background:rgba(65,170,40,.1);border:1px solid rgba(65,170,40,.22);color:#41aa28;font-size:.78rem;font-weight:600;padding:7px 15px;border-radius:8px;transition:background .2s}
.doc-btn-wa:hover{background:rgba(65,170,40,.18)}
.doc-btn-back{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(65,84,241,.16);color:#7a85b0;font-size:.78rem;font-weight:500;padding:7px 13px;border-radius:8px;transition:border-color .2s}
.doc-btn-back:hover{border-color:rgba(255,255,255,.13);color:#f0f2ff}
.doc-menu-btn{display:none;border:1px solid rgba(65,84,241,.16);color:#7a85b0;border-radius:7px;width:36px;height:36px;align-items:center;justify-content:center;font-size:.9rem}
.doc-layout{display:grid;grid-template-columns:25% 50% 25%;min-height:100vh;padding-top:60px}
.doc-sidebar{position:sticky;top:60px;height:calc(100vh - 60px);overflow-y:auto;background:#0f1118;border-right:1px solid rgba(65,84,241,.16);padding:24px 0 48px}
.doc-sb-section{margin-bottom:8px}
.doc-sb-section-label{font-family:'Space Mono',monospace;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#4a5270;padding:16px 22px 7px}
.doc-sb-item,.doc-sb-sub-item{display:flex;align-items:center;gap:11px;padding:10px 22px;font-size:.87rem;color:#7a85b0;border-left:3px solid transparent;transition:all .15s;cursor:pointer;line-height:1.4}
.doc-sb-item i,.doc-sb-sub-item i{font-size:.82rem;width:16px;text-align:center;flex-shrink:0}
.doc-sb-item:hover,.doc-sb-sub-item:hover{color:#f0f2ff;background:rgba(65,84,241,.06);border-left-color:rgba(255,255,255,.13)}
.doc-sb-item.active,.doc-sb-sub-item.active{color:#f0f2ff;border-left-color:#41aa28;background:rgba(65,170,40,.07);font-weight:600}
.doc-sb-item.active i,.doc-sb-sub-item.active i{color:#41aa28}
.doc-sb-divider{height:1px;background:rgba(65,84,241,.16);margin:10px 22px}
.doc-sb-api-group{margin-bottom:4px}
.doc-sb-api-group-header{display:flex;align-items:center;gap:10px;padding:11px 22px;font-size:.85rem;font-weight:700;color:#c2c8e8;cursor:pointer;transition:background .15s}
.doc-sb-api-group-header:hover{background:rgba(65,84,241,.06)}
.doc-sb-api-group-header i{font-size:.82rem;width:16px;text-align:center;flex-shrink:0}
.doc-sb-sub-item{padding-left:38px;font-size:.83rem}
.doc-group-badge{font-family:'Space Mono',monospace;font-size:.57rem;padding:2px 8px;border-radius:100px;margin-left:auto;background:rgba(65,84,241,.12);color:#4154f1;border:1px solid rgba(65,84,241,.2)}
.doc-method-pill-sm{font-family:'Space Mono',monospace;font-size:.55rem;font-weight:700;padding:2px 6px;border-radius:4px;background:rgba(65,170,40,.1);color:#41aa28;border:1px solid rgba(65,170,40,.15);flex-shrink:0}
.doc-sb-wa-card{margin:20px 16px 0;background:rgba(65,170,40,.06);border:1px solid rgba(65,170,40,.15);border-radius:10px;padding:14px 16px;display:flex;align-items:center;gap:12px;color:#41aa28}
.doc-sb-wa-card-text{font-size:.85rem;font-weight:600}
.doc-sb-wa-card-sub{font-size:.75rem;color:#7a85b0}
.doc-sb-wa-card i{font-size:1.3rem;flex-shrink:0}
.doc-content{padding:44px 52px 90px;border-right:1px solid rgba(65,84,241,.16);min-width:0}
.doc-right-panel{position:sticky;top:60px;height:calc(100vh - 60px);overflow-y:auto;background:#0f1118;padding:28px 18px}
.doc-section{padding-bottom:64px;border-bottom:1px solid rgba(65,84,241,.16);margin-bottom:64px;scroll-margin-top:84px}
.doc-hero{margin-bottom:48px}
.doc-hero h1{font-family:'Outfit',sans-serif;font-size:2.3rem;font-weight:800;color:#f0f2ff;line-height:1.15}
.doc-hero h1 span{color:#41aa28}
.doc-hero > p{font-size:.95rem;color:#7a85b0;line-height:1.75;margin-top:14px;max-width:600px}
.doc-section-head{font-family:'Outfit',sans-serif;font-size:1.45rem;font-weight:700;color:#f0f2ff;margin-bottom:10px;display:flex;align-items:center;gap:10px}
.doc-section-head i{color:#4154f1;font-size:1.1rem}
.doc-section-sub{font-size:.9rem;color:#7a85b0;line-height:1.75;margin-bottom:22px}
.doc-section-head-sm{font-size:.9rem;font-weight:700;color:#c2c8e8;margin:20px 0 10px}
.doc-api-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:40px}
.doc-api-nav-card{background:#161a28;border:1px solid rgba(65,84,241,.16);border-radius:10px;padding:18px;cursor:pointer;display:flex;gap:14px;align-items:flex-start;transition:.2s}
.doc-api-nav-card:hover{border-color:#4154f1;background:#1a1f30}
.doc-anc-icon{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.doc-anc-icon.green{background:rgba(65,170,40,.12);color:#41aa28;border:1px solid rgba(65,170,40,.18)}
.doc-anc-icon.blue{background:rgba(65,84,241,.12);color:#4154f1;border:1px solid rgba(65,84,241,.2)}
.doc-anc-icon.orange{background:rgba(254,188,46,.1);color:#febc2e;border:1px solid rgba(254,188,46,.2)}
.doc-anc-icon.purple{background:rgba(199,146,234,.1);color:#c792ea;border:1px solid rgba(199,146,234,.2)}
.doc-anc-info h4{font-size:.88rem;font-weight:700;color:#f0f2ff;margin-bottom:4px}
.doc-anc-info p{font-size:.78rem;color:#7a85b0;line-height:1.5}
.doc-endpoint-block{margin-bottom:32px}
.doc-endpoint-label{font-size:.78rem;font-weight:700;color:#4a5270;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;font-family:'Space Mono',monospace}
.doc-method-row{display:flex;align-items:center;gap:10px;background:#111520;border:1px solid rgba(65,84,241,.16);border-radius:8px;padding:11px 16px;margin-bottom:16px;flex-wrap:wrap}
.doc-method-badge{font-family:'Space Mono',monospace;font-size:.68rem;font-weight:700;padding:4px 11px;border-radius:5px;background:rgba(65,170,40,.12);color:#41aa28;border:1px solid rgba(65,170,40,.2)}
.doc-method-url{font-family:'Space Mono',monospace;font-size:.78rem;color:#7dd3fc;word-break:break-all;flex:1}
.doc-copy-btn-sm{border:1px solid rgba(65,84,241,.16);color:#4a5270;border-radius:5px;padding:3px 8px;font-size:.7rem;display:flex;align-items:center;gap:4px;transition:.15s}
.doc-copy-btn-sm:hover{border-color:#4154f1;color:#4154f1}
.doc-param-table{width:100%;border-collapse:collapse;font-size:.83rem;background:#161a28;border-radius:10px;overflow:hidden;margin-bottom:18px}
.doc-param-table th{background:#111520;color:#4a5270;font-size:.68rem;font-weight:700;padding:10px 16px;text-align:left;text-transform:uppercase;letter-spacing:.06em}
.doc-param-table td{padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.04)}
.doc-bt{font-family:'Space Mono',monospace;font-size:.68rem;padding:2px 8px;border-radius:4px}
.doc-bt-str{background:rgba(65,84,241,.1);color:#4154f1}
.doc-bt-req{background:rgba(224,108,117,.1);color:#e06c75}
.doc-bt-opt{background:rgba(254,188,46,.1);color:#febc2e}
.doc-code-block{background:#090b12;border:1px solid rgba(65,84,241,.16);border-radius:10px;margin:12px 0 20px}
.doc-code-header{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:#161a28;border-bottom:1px solid rgba(65,84,241,.16)}
.doc-code-lang-tag{display:flex;align-items:center;gap:7px;font-size:.72rem;color:#4a5270;font-family:'Space Mono',monospace}
.doc-code-lang-tag i{font-size:.75rem}
.doc-pre{padding:18px;overflow-x:auto;font-family:'Space Mono',monospace;font-size:.77rem;color:#7a85b0;white-space:pre;line-height:1.65}
.doc-copy-code-btn{border:1px solid rgba(65,84,241,.16);color:#4a5270;border-radius:5px;padding:3px 10px;font-size:.7rem;display:flex;align-items:center;gap:5px;transition:.15s}
.doc-copy-code-btn:hover{border-color:#4154f1;color:#4154f1}
.doc-tabs{display:flex;background:#161a28;border:1px solid rgba(65,84,241,.16);border-bottom:none;border-radius:10px 10px 0 0;overflow:hidden}
.doc-tab-btn{padding:9px 16px;font-family:'Space Mono',monospace;font-size:.68rem;font-weight:600;color:#4a5270;border-right:1px solid rgba(65,84,241,.16);transition:.15s}
.doc-tab-btn:hover{color:#c2c8e8;background:rgba(255,255,255,.03)}
.doc-tab-btn.active{color:#4154f1;background:#090b12}
.doc-tabs-body{background:#090b12;border:1px solid rgba(65,84,241,.16);border-top:none;border-radius:0 0 10px 10px}
.doc-tab-pane{display:none}
.doc-tab-pane.active{display:block}
.doc-callout{display:flex;align-items:flex-start;gap:10px;padding:14px 18px;border-radius:10px;margin-bottom:18px;font-size:.87rem;line-height:1.6}
.doc-callout i{margin-top:2px;flex-shrink:0;font-size:.9rem}
.doc-callout.info{background:rgba(65,84,241,.07);border:1px solid rgba(65,84,241,.2);color:#c2c8e8}
.doc-callout.info i{color:#4154f1}
.doc-callout.warn{background:rgba(254,188,46,.07);border:1px solid rgba(254,188,46,.2);color:#c2c8e8}
.doc-callout.warn i{color:#febc2e}
.doc-callout.success{background:rgba(65,170,40,.07);border:1px solid rgba(65,170,40,.2);color:#c2c8e8}
.doc-callout.success i{color:#41aa28}
.doc-hero-eyebrow{display:flex;align-items:center;gap:8px;font-size:.78rem;color:#41aa28;font-weight:600;margin-bottom:14px;font-family:'Space Mono',monospace}
.doc-live-ping{width:8px;height:8px;border-radius:50%;background:#41aa28;display:inline-block;box-shadow:0 0 0 3px rgba(65,170,40,.25);animation:ping 2s infinite}
@keyframes ping{0%,100%{box-shadow:0 0 0 3px rgba(65,170,40,.25)}50%{box-shadow:0 0 0 6px rgba(65,170,40,.08)}}
.doc-hero-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.doc-hbadge{display:inline-flex;align-items:center;gap:6px;background:#161a28;border:1px solid rgba(65,84,241,.16);color:#7a85b0;font-size:.77rem;padding:5px 12px;border-radius:100px}
.doc-hbadge i{font-size:.75rem;color:#4154f1}
.doc-rp-label{font-family:'Space Mono',monospace;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#4a5270;margin-bottom:10px;display:flex;align-items:center;gap:7px}
.doc-rp-label i{font-size:.75rem;color:#4154f1}
.doc-rp-card{background:#161a28;border:1px solid rgba(65,84,241,.16);border-radius:8px;margin-bottom:8px;overflow:hidden}
.doc-rp-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid rgba(65,84,241,.16)}
.doc-rp-title{font-size:.75rem;color:#7a85b0;font-weight:600}
.doc-rp-copy{font-size:.67rem;color:#4154f1;font-family:'Space Mono',monospace;border:1px solid rgba(65,84,241,.25);border-radius:4px;padding:2px 8px;transition:.15s}
.doc-rp-copy:hover{background:rgba(65,84,241,.12)}
.doc-rp-pre{padding:8px 12px;font-family:'Space Mono',monospace;font-size:.73rem;color:#7a85b0}
.doc-support-card{background:linear-gradient(135deg,rgba(65,170,40,.06),rgba(65,84,241,.06));border:1px solid rgba(65,84,241,.16);border-radius:14px;padding:36px;text-align:center}
.doc-support-card h3{font-family:'Outfit',sans-serif;font-size:1.3rem;font-weight:700;color:#f0f2ff;margin-bottom:10px}
.doc-support-card p{font-size:.9rem;color:#7a85b0;line-height:1.7}
.doc-btn-wa-lg{background:#41aa28;color:#000;font-weight:700;padding:11px 26px;border-radius:10px;display:inline-flex;align-items:center;gap:9px;margin-top:22px;font-size:.9rem;transition:opacity .2s}
.doc-btn-wa-lg:hover{opacity:.88}
.doc-sidebar-overlay{display:none;position:fixed;inset:0;z-index:140;background:rgba(0,0,0,.6)}
.doc-sidebar-overlay.show{display:block}
@media(max-width:1200px){.doc-layout{grid-template-columns:280px 1fr}.doc-right-panel{display:none}.doc-content{border-right:none}}
@media(max-width:900px){.doc-layout{grid-template-columns:1fr}.doc-sidebar{position:fixed;left:0;top:60px;width:280px;z-index:150;transform:translateX(-100%);transition:.3s}.doc-sidebar.open{transform:translateX(0)}.doc-content{padding:30px 22px 60px}.doc-menu-btn{display:flex}.doc-api-grid{grid-template-columns:1fr}}
@media(max-width:600px){.doc-hero h1{font-size:1.8rem}.doc-nav-search{display:none}.doc-content{padding:24px 16px 60px}}