/* ==========================================================================
   Treno Portal v4 — "glass" design system (Client Portal v4 design).
   Loaded by layouts/app.blade.php for normal web visits ONLY — never inside
   the mobile-app WebView (session is_app_embed), which keeps its own theme
   (layouts/partials/app-embed-*.blade.php). So nothing here needs embed guards.

   Sections:
     1. Fonts            — GIP, and 'DM Sans' aliased to GIP (the old views
                           name 'DM Sans' ~1000 times; it was never loaded).
     2. Tokens
     3. Page background + legacy shell resets
     4. Shell            — desktop pill header, mobile header, bottom nav,
                           "more" sheet, popovers (account / language / tools)
     5. Components       — tv-card, tv-btn, tv-seg, tv-chip, tv-input, …
     6. Layout-owned popups (logout, alerts, payment wait, kyc overlay)
   ========================================================================== */

/* 1. Fonts ---------------------------------------------------------------- */
@font-face { font-family: 'GIP'; src: url('../fonts/GIP-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'GIP'; src: url('../fonts/GIP-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'GIP'; src: url('../fonts/GIP-SemiBold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'GIP'; src: url('../fonts/GIP-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'GIP'; src: url('../fonts/GIP-ExtraBold.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/GIP-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/GIP-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/GIP-SemiBold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/GIP-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/GIP-ExtraBold.otf') format('opentype'); font-weight: 800 900; font-style: normal; font-display: swap; }

/* 2. Tokens --------------------------------------------------------------- */
:root {
    --tv-ink: #0C1A20;
    --tv-ink-2: #1B2C31;
    --tv-ink-3: #33474A;
    --tv-muted: #46595D;
    --tv-muted-2: #6B7E82;
    --tv-muted-3: #7C8F92;
    --tv-faint: #93A1AA;
    --tv-teal: #046B60;
    --tv-teal-dark: #035E55;
    --tv-teal-2: #00C4B4;
    --tv-cyan: #00FFEC;
    --tv-cyan-2: #00D9C9;
    --tv-mint: #D7FFF9;
    --tv-on-cyan: #052B27;
    --tv-danger: #B4442E;
    --tv-danger-bg: rgba(180, 68, 46, 0.1);
    --tv-warn: #8A5A12;
    --tv-warn-bg: rgba(183, 121, 31, 0.12);
    --tv-line: rgba(12, 26, 32, 0.06);
    --tv-line-2: rgba(12, 26, 32, 0.1);

    --tv-glass: rgba(255, 255, 255, 0.55);
    --tv-glass-strong: rgba(255, 255, 255, 0.75);
    --tv-glass-border: rgba(255, 255, 255, 0.8);
    --tv-glass-border-strong: rgba(255, 255, 255, 0.95);
    --tv-tile: rgba(255, 255, 255, 0.6);
    --tv-tint: rgba(0, 217, 201, 0.1);
    --tv-tint-2: rgba(0, 217, 201, 0.14);
    --tv-blur: blur(24px) saturate(160%);
    --tv-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 24px 60px -36px rgba(4, 60, 56, 0.5);
    --tv-shadow-sm: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 18px 40px -30px rgba(4, 60, 56, 0.5);
    --tv-shadow-pop: 0 24px 50px -20px rgba(4, 60, 56, 0.45);
    --tv-glow: 0 12px 24px -12px rgba(0, 214, 200, 1), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    --tv-ring: 0 0 0 4px rgba(0, 255, 236, 0.2);

    --tv-r-xl: 28px;
    --tv-r-lg: 24px;
    --tv-r-md: 18px;
    --tv-r-sm: 14px;

    --tv-font: 'GIP', 'GIP Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --tv-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --tv-hero-tint: radial-gradient(120% 100% at 100% 0%, rgba(0, 255, 236, 0.45) 0%, rgba(0, 255, 236, 0) 60%);
    --tv-shell-max: 1280px;
}

/* 3. Background + legacy shell resets ------------------------------------ */
html {
    background: #EEF6F5;
}

body {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--tv-ink);
    font-family: var(--tv-font) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

/* Fixed mint backdrop from the design (a layer, so iOS Safari — which
   ignores background-attachment:fixed — still gets a non-scrolling sky). */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(55% 45% at 8% 0%, rgba(0, 255, 236, 0.55) 0%, rgba(0, 255, 236, 0) 70%),
        radial-gradient(45% 40% at 100% 18%, rgba(4, 107, 96, 0.22) 0%, rgba(4, 107, 96, 0) 70%),
        radial-gradient(60% 55% at 65% 105%, rgba(120, 255, 240, 0.55) 0%, rgba(120, 255, 240, 0) 70%),
        #EEF6F5;
}

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

/* style5.css sets `input, select, button { width:100%; padding:12px;
   margin-top:10px; … }` on EVERY button/input; the v4 components opt out. */
.tv-nav-item, .tv-icon-btn, .tv-avatar, .tv-deposit-btn, .tv-pop-link, .tv-bn-item,
.tv-bn-plus, .tv-more-link, .tv-btn, .tv-seg-item, .tv-link, .tv-input, .tv-pop .ib-seg button,
.tv-more .ib-seg button {
    margin: 0;
}

.tv-nav-item, .tv-seg-item, .tv-btn, .tv-link, .tv-deposit-btn {
    width: auto;
}

.tv-btn--block, .tv-pop-link, .tv-more-link, .tv-bn-item {
    width: 100%;
}

/* The old fixed topbar + left sidebar are replaced by the tv shell. */
body .layout {
    padding-top: 0 !important;
    padding-left: 0 !important;
    min-height: 0;
}

body .page-content {
    max-width: var(--tv-shell-max) !important;
    margin: 0 auto !important;
    padding: 20px 28px 64px !important;
    box-sizing: border-box;
}

.page-title {
    font-size: clamp(24px, 2.6vw, 32px) !important;
    line-height: 1.12;
    font-weight: 600 !important;
    letter-spacing: -0.03em !important;
    color: var(--tv-ink);
}

.page-sub {
    font-size: 13.5px !important;
    color: var(--tv-muted) !important;
}

/* 4. Shell ---------------------------------------------------------------- */
.tv-shell {
    position: sticky;
    top: 0;
    z-index: 1000;
    max-width: var(--tv-shell-max);
    margin: 0 auto;
    padding: 14px 28px 0;
    box-sizing: border-box;
    pointer-events: none;
}

.tv-shell > * {
    pointer-events: auto;
}

/* Desktop header */
.tv-topbar {
    height: 62px;
    box-sizing: border-box;
    padding: 0 8px 0 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 40px -28px rgba(4, 60, 56, 0.45);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.tv-logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0;
    background: transparent;
    border: 0;
}

.tv-logo img {
    display: block;
    height: 24px;
    width: auto;
}

.tv-nav {
    flex: 0 1 auto;
    min-width: 0;
    display: flex;
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(0, 217, 201, 0.1);
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.tv-nav::-webkit-scrollbar { display: none; }

.tv-nav-item {
    position: relative;
    flex: 0 0 auto;
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--tv-muted) !important;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.tv-nav-item:hover {
    color: var(--tv-ink) !important;
    background: rgba(255, 255, 255, 0.55);
}

.tv-nav-item.is-active {
    background: #FFFFFF;
    color: var(--tv-ink) !important;
    box-shadow: 0 4px 12px -6px rgba(12, 26, 32, 0.3);
}

.tv-nav-item .tv-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tv-cyan-2);
}

.tv-nav-item svg.tv-caret {
    width: 13px;
    height: 13px;
    opacity: .6;
    transition: transform .2s ease;
}

.tv-nav-item[aria-expanded="true"] svg.tv-caret { transform: rotate(180deg); }

.tv-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tv-pop-wrap { position: relative; }

.tv-icon-btn {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.6);
    color: var(--tv-ink-3) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none !important;
    transition: background .15s ease;
}

.tv-icon-btn:hover,
.tv-icon-btn.is-active { background: #FFFFFF; }

.tv-icon-btn svg { width: 17px; height: 17px; }

.tv-deposit-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: var(--tv-cyan);
    color: var(--tv-on-cyan) !important;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    text-decoration: none !important;
    box-shadow: 0 10px 22px -10px rgba(0, 214, 200, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: filter .15s ease;
}

.tv-deposit-btn:hover { filter: brightness(1.04); }
.tv-deposit-btn .tv-plus { font-size: 17px; font-weight: 400; line-height: 1; }

.tv-avatar {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #B5FFF8 0%, #00E5D4 100%);
    color: var(--tv-teal-dark);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 18px -10px rgba(0, 170, 160, 0.9);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
}

/* Glass popovers (account menu, language list, tools menu) */
.tv-pop {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1100;
    min-width: 220px;
    padding: 10px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
    backdrop-filter: blur(28px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: var(--tv-shadow-pop);
    display: none;
    flex-direction: column;
    gap: 2px;
}

.tv-pop.open,
.tv-pop.show { display: flex; }
.tv-pop--left { left: 0; right: auto; }

.tv-pop-title {
    padding: 6px 10px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tv-teal);
}

.tv-pop-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 10px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tv-ink) !important;
    text-decoration: none !important;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.tv-pop-link:hover { background: rgba(0, 217, 201, 0.1); }
.tv-pop-link.is-active { background: var(--tv-mint); color: var(--tv-teal) !important; }
.tv-pop-link .tv-ext { margin-left: auto; opacity: .45; }

.tv-pop-sep { height: 1px; margin: 6px 4px; background: var(--tv-line-2); border: 0; }

.tv-pop-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 10px;
}

.tv-pop-user .tv-avatar { flex: 0 0 38px; width: 38px; height: 38px; font-size: 12px; cursor: default; }
.tv-pop-user-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tv-pop-user-text b { display: block; font-size: 13.5px; font-weight: 700; color: var(--tv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.tv-pop-user-text small { display: block; font-size: 11.5px; color: var(--tv-muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }

/* Treno Assist floats above the shell/bottom nav (1000/1050) but BELOW every
   page modal (popups use 9999+), so it never covers an open popup. */
.tma-root { z-index: 1060 !important; }

/* While the mobile "more" sheet is open, the floating Treno Assist would sit on top of it. */
body.tv-more-open .tma-root { opacity: 0; visibility: hidden; transition: opacity .15s ease; }

/* IB / client view switch inside the account popover (ids kept for JS) */
.tv-pop .ib-seg {
    display: flex;
    gap: 2px;
    margin: 0 4px 4px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(0, 217, 201, 0.1);
}

.tv-pop .ib-seg button {
    flex: 1;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--tv-muted);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.tv-pop .ib-seg button.active {
    background: var(--tv-cyan);
    color: var(--tv-on-cyan);
    box-shadow: none;
}

/* Language list (legacy #langPopup toggled via .show) */
#langPopup.tv-pop {
    right: 28px;
    width: 220px;
    max-height: min(70vh, 520px);
    overflow-y: auto;
}

#langPopup.tv-pop a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 0 10px;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tv-ink);
    text-decoration: none;
}

#langPopup.tv-pop a:hover { background: rgba(0, 217, 201, 0.1); }
#langPopup.tv-pop a.is-active { background: var(--tv-mint); color: var(--tv-teal); }
#langPopup.tv-pop .fi { border-radius: 3px; flex: 0 0 auto; }

/* Section sub-tabs rendered by the layout (IB / promos / profile pages) */
.tv-subnav {
    display: flex;
    justify-content: flex-start;
    margin: 4px 0 18px;
}

.tv-subnav .tv-seg { max-width: 100%; }

/* Mobile header */
.tv-mtop { display: none; }

/* Bottom nav + more sheet (mobile only) */
.tv-bottomnav,
.tv-more,
.tv-more-backdrop { display: none; }

@media (max-width: 1180px) {
    .tv-deposit-btn .tv-deposit-label { display: none; }
    .tv-deposit-btn { width: 42px; padding: 0; justify-content: center; }
    .tv-nav-item { padding: 0 12px; }
}

@media (max-width: 1023px) {
    .tv-topbar { display: none; }

    .tv-shell {
        position: relative;
        top: 0;
        padding: 14px 14px 0;
    }

    body .page-content {
        padding: 14px 14px 118px !important;
    }

    .tv-mtop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 4px 2px;
    }

    .tv-mtop .tv-logo img { height: 22px; }

    .tv-mtop .tv-actions { gap: 8px; }

    .tv-mtop .tv-icon-btn,
    .tv-mtop .tv-avatar {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .tv-mtop .tv-icon-btn {
        border: 1px solid rgba(255, 255, 255, 0.8);
        background: rgba(255, 255, 255, 0.55);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
    }

    .tv-bottomnav {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        z-index: 1050;
        height: 70px;
        box-sizing: border-box;
        padding: 0 8px;
        border-radius: 26px;
        background: rgba(255, 255, 255, 0.62);
        -webkit-backdrop-filter: blur(24px) saturate(170%);
        backdrop-filter: blur(24px) saturate(170%);
        border: 1px solid rgba(255, 255, 255, 0.85);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 20px 44px -18px rgba(4, 60, 56, 0.45);
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: center;
    }

    .tv-bn-item {
        position: relative;
        height: 56px;
        min-width: 0;
        padding: 0 2px;
        border: 0;
        background: transparent;
        font-family: inherit;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        color: var(--tv-muted-3) !important;
        cursor: pointer;
        text-decoration: none !important;
    }

    .tv-bn-item svg { width: 20px; height: 20px; flex: 0 0 auto; }

    .tv-bn-item span {
        max-width: 100%;
        font-size: 10.5px;
        font-weight: 600;
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tv-bn-item.is-active { color: var(--tv-teal) !important; }

    .tv-bn-item .tv-dot {
        position: absolute;
        top: 8px;
        right: calc(50% - 15px);
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--tv-cyan-2);
        box-shadow: 0 0 0 2px #fff;
    }

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

    .tv-bn-plus {
        width: 58px;
        height: 58px;
        margin-top: -26px;
        border: 4px solid rgba(255, 255, 255, 0.9);
        border-radius: 50%;
        background: var(--tv-cyan);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 14px 26px -10px rgba(0, 214, 200, 1);
        box-sizing: border-box;
        text-decoration: none !important;
    }

    .tv-more-backdrop.open {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(6, 22, 24, 0.28);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
    }

    .tv-more.open {
        display: flex;
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(96px + env(safe-area-inset-bottom, 0px));
        z-index: 1045;
        max-height: calc(100vh - 130px);
        overflow-y: auto;
        padding: 16px;
        border-radius: 26px;
        background: rgba(255, 255, 255, 0.82);
        -webkit-backdrop-filter: blur(28px) saturate(170%);
        backdrop-filter: blur(28px) saturate(170%);
        border: 1px solid rgba(255, 255, 255, 0.9);
        box-shadow: 0 24px 50px -20px rgba(4, 60, 56, 0.5);
        flex-direction: column;
        gap: 12px;
        box-sizing: border-box;
    }

    .tv-more-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .tv-more-title {
        padding: 0 4px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--tv-teal);
    }

    .tv-more-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .tv-more-link {
        min-height: 48px;
        padding: 8px 14px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.95);
        background: rgba(255, 255, 255, 0.7);
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.25;
        color: var(--tv-ink) !important;
        text-align: left;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none !important;
        box-sizing: border-box;
    }

    .tv-more-link.is-active { background: var(--tv-mint); }
    .tv-more-link .tv-ext { margin-left: auto; opacity: .45; flex: 0 0 auto; }
    .tv-more-link.is-danger { color: var(--tv-danger) !important; }

    .tv-more .ib-seg {
        display: flex;
        gap: 2px;
        padding: 3px;
        border-radius: 999px;
        background: rgba(0, 217, 201, 0.1);
    }

    .tv-more .ib-seg button {
        flex: 1;
        height: 36px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--tv-muted);
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
    }

    .tv-more .ib-seg button.active { background: var(--tv-cyan); color: var(--tv-on-cyan); }

    #langPopup.tv-pop { position: fixed; top: 74px; right: 14px; }
    .tv-mtop .tv-pop { top: calc(100% + 8px); }
}

@media (max-width: 380px) {
    .tv-bn-item span { font-size: 9.5px; }
    .tv-bottomnav { left: 8px; right: 8px; padding: 0 4px; }
}

/* 5. Components ----------------------------------------------------------- */
.tv-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.tv-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    padding: 6px 4px 0;
}

.tv-head > div:first-child { min-width: 0; }

.tv-h1 {
    margin: 0;
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--tv-ink);
}

.tv-sub {
    margin: 6px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--tv-muted);
}

.tv-h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--tv-ink);
}

.tv-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tv-teal);
}

.tv-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
}

.tv-card {
    box-sizing: border-box;
    min-width: 0;
    padding: 22px;
    border-radius: var(--tv-r-xl);
    background: var(--tv-glass);
    -webkit-backdrop-filter: var(--tv-blur);
    backdrop-filter: var(--tv-blur);
    border: 1px solid var(--tv-glass-border);
    box-shadow: var(--tv-shadow);
    color: var(--tv-ink);
}

.tv-card--hero {
    background: var(--tv-hero-tint), rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.85);
}

.tv-card--flush { padding: 8px 22px 10px; }

.tv-tile {
    box-sizing: border-box;
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--tv-tile);
    border: 1px solid rgba(255, 255, 255, 0.9);
}

.tv-icon-tile {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: var(--tv-mint);
    color: var(--tv-teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tv-icon-tile svg { width: 18px; height: 18px; }

.tv-list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--tv-line);
}

.tv-btn {
    height: 46px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--tv-cyan);
    color: var(--tv-on-cyan) !important;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none !important;
    box-shadow: var(--tv-glow);
    transition: filter .15s ease, background .15s ease;
    box-sizing: border-box;
}

.tv-btn:hover { filter: brightness(1.04); }
.tv-btn:disabled, .tv-btn.is-disabled { background: rgba(0, 255, 236, 0.2); color: #5E8F8A !important; box-shadow: none; cursor: not-allowed; filter: none; }
.tv-btn--block { width: 100%; }
.tv-btn--sm { height: 36px; padding: 0 14px; font-size: 12.5px; }

.tv-btn--ghost {
    height: 44px;
    padding: 0 18px;
    border: 1px solid var(--tv-glass-border-strong);
    background: rgba(255, 255, 255, 0.7);
    color: var(--tv-ink) !important;
    font-weight: 600;
    font-size: 13px;
    box-shadow: none;
}

.tv-btn--ghost:hover { background: #FFFFFF; filter: none; }

.tv-btn--outline {
    height: 40px;
    padding: 0 18px;
    border: 1px solid rgba(0, 217, 201, 0.55);
    background: #FFFFFF;
    color: var(--tv-teal) !important;
    font-weight: 600;
    font-size: 13px;
    box-shadow: none;
}

.tv-btn--outline:hover { background: var(--tv-mint); filter: none; }

.tv-link {
    border: 0;
    background: transparent;
    padding: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--tv-teal) !important;
    cursor: pointer;
    text-decoration: none !important;
}

.tv-link:hover { color: var(--tv-ink) !important; }

.tv-seg {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-sizing: border-box;
}

.tv-seg::-webkit-scrollbar { display: none; }
.tv-seg--tint { background: rgba(0, 217, 201, 0.1); border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

.tv-seg-item {
    flex: 0 0 auto;
    height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--tv-muted) !important;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease;
}

.tv-seg-item:hover { color: var(--tv-ink) !important; }
.tv-seg-item.is-active,
.tv-seg-item.active { background: var(--tv-cyan); color: var(--tv-on-cyan) !important; }
.tv-seg--sm .tv-seg-item { height: 30px; padding: 0 12px; font-size: 12px; }

.tv-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--tv-mint);
    color: var(--tv-teal);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.tv-chip--cyan { background: var(--tv-cyan); color: var(--tv-on-cyan); }
.tv-chip--glass { background: rgba(255, 255, 255, 0.75); color: var(--tv-ink-3); letter-spacing: 0; font-weight: 600; }
.tv-chip--warn { background: var(--tv-warn-bg); color: var(--tv-warn); }
.tv-chip--danger { background: var(--tv-danger-bg); color: var(--tv-danger); }
.tv-chip .tv-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tv-teal-2); }

.tv-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--tv-muted);
}

.tv-input {
    width: 100%;
    height: 50px;
    padding: 0 14px;
    border-radius: var(--tv-r-sm);
    border: 1px solid var(--tv-glass-border-strong);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: inset 0 1px 3px rgba(4, 60, 56, 0.08);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--tv-ink);
    box-sizing: border-box;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.tv-input:focus { border-color: var(--tv-cyan-2); box-shadow: var(--tv-ring); }

.tv-empty {
    padding: 36px 16px;
    border-radius: 22px;
    border: 1.5px dashed rgba(4, 107, 96, 0.22);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    color: var(--tv-muted);
    font-size: 14px;
}

.tv-mono { font-family: var(--tv-mono); }
.tv-num { font-variant-numeric: tabular-nums; }

/* 6. Layout-owned popups -------------------------------------------------- */
.custom-modal {
    background: rgba(6, 22, 24, 0.32) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
}

.custom-modal-content {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 26px !important;
    box-shadow: var(--tv-shadow-pop) !important;
    color: var(--tv-ink);
}

.cancel-btn,
.logout-btn {
    height: 46px;
    padding: 0 18px !important;
    border-radius: 999px !important;
    font-family: inherit !important;
    font-size: 13.5px !important;
}

.cancel-btn { background: rgba(255, 255, 255, 0.8) !important; border: 1px solid rgba(12, 26, 32, 0.08) !important; color: var(--tv-ink) !important; font-weight: 600; }
.logout-btn { background: var(--tv-cyan) !important; color: var(--tv-on-cyan) !important; font-weight: 700 !important; box-shadow: var(--tv-glow); }

.popup-bg {
    background: rgba(6, 22, 24, 0.36) !important;
}

.popup-box {
    border-radius: 26px !important;
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: var(--tv-shadow-pop) !important;
}

.top-alert {
    border-radius: 18px !important;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: var(--tv-shadow-pop) !important;
}

.kyc-overlay {
    background: rgba(6, 22, 24, 0.36) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.kyc-reject-card,
.kyc-popup-card {
    border-radius: 26px !important;
}

/* Bootstrap focus color nudged to the brand cyan */
.form-control:focus {
    border-color: var(--tv-cyan-2) !important;
    box-shadow: var(--tv-ring) !important;
}