html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 0;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ── Sidebar Layout ──────────────────────────────────────────────────────── */

/* Fixed top bar */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    z-index: 1040;
    background: rgba(7,9,26,0.96) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(99,102,241,0.12);
    box-shadow: 0 1px 24px rgba(0,0,0,0.60), 0 0 40px rgba(99,102,241,0.05);
}

.topbar-brand {
    font-size: 1rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: #10b981 !important;
    text-shadow: 0 0 18px rgba(16,185,129,0.35);
    font-weight: 700;
}
.topbar-logo-icon {
    height: 30px;
    width: auto;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

/* ── Brand wordmark ("TRADE COPIER STATION") ────────────────────────────────
   Shared across the topbar and the auth pages — colors match the source logo. */
.brand-wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35em;
    white-space: nowrap;
}
.brand-trade,
.brand-copier,
.brand-station {
    text-shadow: none;
}
.brand-trade { color: #ffffff; }
.brand-copier {
    background: linear-gradient(180deg, #6ec9f5 0%, #2f6fe0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.brand-station { color: #c7ccd1; }

/* Topbar wallet glass badges */
.topbar-wallet-glass {
    background: rgba(16,185,129,0.10);
    border: 1px solid rgba(16,185,129,0.22);
    color: #10b981 !important;
    text-shadow: 0 0 8px rgba(16,185,129,0.40);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    border-radius: 6px;
    padding: 0.25rem 0.55rem;
    display: inline-block;
}

.topbar-debt-glass {
    background: rgba(239,68,68,0.12);
    border: 1px solid rgba(239,68,68,0.28);
    color: #f87171 !important;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 6px;
    padding: 0.25rem 0.55rem;
    display: inline-block;
    text-decoration: none;
}

/* Dark glass profile dropdown */
.topbar-dropdown .dropdown-menu {
    background: rgba(7,9,26,0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.60), 0 0 24px rgba(99,102,241,0.06);
    padding: 0.3rem;
    min-width: 180px;
}
.topbar-dropdown .dropdown-item {
    color: #cbd5e1;
    font-size: 0.875rem;
    border-radius: 8px;
    padding: 0.45rem 0.75rem;
    transition: background 0.15s, color 0.15s;
}
.topbar-dropdown .dropdown-item:hover,
.topbar-dropdown .dropdown-item:focus {
    background: rgba(255,255,255,0.07);
    color: #f1f5f9;
}
.topbar-dropdown .dropdown-item.text-danger { color: #f87171 !important; }
.topbar-dropdown .dropdown-item.text-danger:hover { background: rgba(239,68,68,0.10); color: #f87171 !important; }
.topbar-dropdown .dropdown-divider { border-color: rgba(255,255,255,0.08); margin: 0.2rem 0.5rem; }
.topbar-dropdown .dropdown-item-text { color: rgba(148,163,184,0.65); font-size: 0.8rem; padding: 0.35rem 0.75rem; }

/* Page body sits below the topbar */
.page-body {
    padding-top: 56px;
    min-height: 100vh;
    display: flex;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.sidebar {
    position: fixed;
    top: 56px;
    left: 0;
    width: 240px;
    height: calc(100vh - 56px);
    z-index: 1035;
    overflow: hidden;
    flex-shrink: 0;
    transition: transform 0.25s ease;
    background: linear-gradient(90deg, #07091a 0%, #0d1228 50%, #07091a 100%) !important;
    border-right: 1px solid rgba(99,102,241,0.10);
    box-shadow: 2px 0 24px rgba(0,0,0,0.55), 0 0 30px rgba(99,102,241,0.04);
}

/* Sidebar section label */
.sidebar-section-label {
    color: rgba(148,163,184,0.40);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.9rem 0.75rem 0.25rem;
    display: block;
}

/* Content area */
.main-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.main-content > main { flex: 1; }

.has-sidebar .main-content {
    margin-left: 240px;
}

/* ── Sidebar nav links ───────────────────────────────────────────────────── */

.sidebar .sidebar-link {
    color: rgba(203,213,225,0.60);
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    background: transparent;
    border: none;
    line-height: 1.4;
    transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.sidebar .sidebar-link:hover {
    color: #f1f5f9;
    background-color: rgba(255,255,255,0.06);
}

.sidebar .sidebar-link.active {
    color: #10b981;
    background-color: rgba(16,185,129,0.08);
    box-shadow: 0 0 14px rgba(16,185,129,0.12);
    text-shadow: 0 0 8px rgba(16,185,129,0.40);
}

/* Rotate caret when the accordion is open */
.sidebar .sidebar-link[aria-expanded="true"] .sidebar-caret {
    transform: rotate(180deg);
}

.sidebar-caret {
    flex-shrink: 0;
    opacity: 0.5;
    transition: transform 0.2s ease;
}

/* Nav icon */
.sidebar-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.75;
}
.sidebar .sidebar-link.active .sidebar-icon { opacity: 1; }

/* Sub-links (My Accounts children) */
.sidebar .sidebar-sublink {
    color: rgba(148,163,184,0.55);
    border-radius: 8px;
    padding: 0.38rem 0.75rem;
    font-size: 0.82rem;
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sidebar .sidebar-sublink:hover {
    color: #e2e8f0;
    background-color: rgba(255,255,255,0.05);
}

.sidebar .sidebar-sublink.active {
    color: #10b981;
    font-weight: 600;
    text-shadow: 0 0 8px rgba(16,185,129,0.40);
}

/* Sidebar footer divider */
.sidebar-footer {
    border-top: 1px solid rgba(16,185,129,0.08);
    background: rgba(0,0,0,0.20);
}

.btn-sidebar-profile {
    background: rgba(16,185,129,0.07);
    border: 1px solid rgba(16,185,129,0.18);
    color: #10b981;
    font-size: 0.8rem;
    border-radius: 10px;
    transition: all 0.2s ease;
}
.btn-sidebar-profile:hover {
    background: rgba(16,185,129,0.14);
    border-color: rgba(16,185,129,0.35);
    color: #10b981;
    box-shadow: 0 0 14px rgba(16,185,129,0.20);
}

/* Layout of the profile card is theme-neutral so dark and light stay in step;
   only the colours are re-stated per theme. The avatar carries width/height="20"
   as HTML attributes, which CSS overrides. */
.btn-sidebar-profile {
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 12px;
    text-align: left;
}
.btn-sidebar-profile img {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    object-fit: cover;
}
.sidebar-profile-name {
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1.3;
    color: #e2e8f0;
}
.sidebar-profile-role {
    font-size: 0.6875rem;
    line-height: 1.3;
    color: #94a3b8;
}

/* ── Profile avatar picker ────────────────────────────────────────────────── */

.avatar-option {
    opacity: 0.55;
    transition: opacity 0.15s ease, box-shadow 0.15s ease;
}

.avatar-option:hover {
    opacity: 0.85;
}

.avatar-option.avatar-selected {
    opacity: 1;
    box-shadow: 0 0 0 3px #0e9bff, 0 0 16px rgba(14,155,255,0.45);
}

/* ── Topbar wallet badge (legacy kept for fallback) ──────────────────────── */

.topbar-wallet {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Hamburger toggle */
.sidebar-toggle-btn {
    opacity: 0.75;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

.sidebar-toggle-btn:hover { opacity: 1; }

/* Desktop has nothing for it to do: the sidebar is always in view and the
   .sidebar-open class it toggles is only honoured below 992px. Hide it rather
   than leave a control on screen that does nothing when clicked. */
@media (min-width: 992px) {
    .sidebar-toggle-btn { display: none; }
}

/* ── Mobile: sidebar hidden off-canvas ───────────────────────────────────── */

@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.sidebar-open {
        transform: translateX(0);
        box-shadow: 4px 0 32px rgba(0,0,0,0.60), 0 0 24px rgba(16,185,129,0.06);
    }

    .has-sidebar .main-content {
        margin-left: 0;
    }
}

/* =============================================================================
   GLASSMORPHISM DASHBOARD THEME
   ============================================================================= */

/* Dark gradient page background */
.dashboard-page {
    background: linear-gradient(135deg, #07091a 0%, #0d1228 35%, #080e1e 70%, #07091a 100%);
    min-height: calc(100vh - 56px);
    position: relative;
    overflow-x: hidden;
}

.dashboard-page::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at 15% 20%, rgba(99,102,241,0.18) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(16,185,129,0.08) 0%, transparent 45%),
        radial-gradient(ellipse at 78% 8%,  rgba(139,92,246,0.12) 0%, transparent 40%),
        radial-gradient(ellipse at 45% 85%, rgba(59,130,246,0.07) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.dashboard-page > * { position: relative; z-index: 1; }

/* ── Glass Card Base ───────────────────────────────────────────────────────── */
.glass-card {
    --bs-card-bg: transparent;
    --bs-card-cap-bg: transparent;
    --bs-card-border-color: transparent;
    background: rgba(255,255,255,0.07) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.08);
    color: #e2e8f0;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.glass-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,0.18) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.12);
}

/* Glow variants */
.glass-glow-green        { box-shadow: 0 6px 28px rgba(0,0,0,.36), 0 0 18px rgba(16,185,129,.14),  inset 0 1px 0 rgba(255,255,255,.08); }
.glass-glow-green:hover  { box-shadow: 0 14px 44px rgba(0,0,0,.44), 0 0 32px rgba(16,185,129,.26), inset 0 1px 0 rgba(255,255,255,.12); }
.glass-glow-blue         { box-shadow: 0 6px 28px rgba(0,0,0,.36), 0 0 18px rgba(59,130,246,.17),  inset 0 1px 0 rgba(255,255,255,.08); }
.glass-glow-blue:hover   { box-shadow: 0 14px 44px rgba(0,0,0,.44), 0 0 32px rgba(59,130,246,.30), inset 0 1px 0 rgba(255,255,255,.12); }
.glass-glow-purple       { box-shadow: 0 6px 28px rgba(0,0,0,.36), 0 0 18px rgba(139,92,246,.17),  inset 0 1px 0 rgba(255,255,255,.08); }
.glass-glow-purple:hover { box-shadow: 0 14px 44px rgba(0,0,0,.44), 0 0 32px rgba(139,92,246,.30), inset 0 1px 0 rgba(255,255,255,.12); }
.glass-glow-amber        { box-shadow: 0 6px 28px rgba(0,0,0,.36), 0 0 18px rgba(245,158,11,.17),  inset 0 1px 0 rgba(255,255,255,.08); }
.glass-glow-amber:hover  { box-shadow: 0 14px 44px rgba(0,0,0,.44), 0 0 32px rgba(245,158,11,.30), inset 0 1px 0 rgba(255,255,255,.12); }
.glass-glow-red          { box-shadow: 0 6px 28px rgba(0,0,0,.36), 0 0 18px rgba(239,68,68,.17),   inset 0 1px 0 rgba(255,255,255,.08); }
.glass-glow-red:hover    { box-shadow: 0 14px 44px rgba(0,0,0,.44), 0 0 32px rgba(239,68,68,.30),  inset 0 1px 0 rgba(255,255,255,.12); }

/* ── Glass Card Header ────────────────────────────────────────────────────── */
.glass-card-header {
    background: rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px 16px 0 0;
    padding: 0.875rem 1.25rem;
    color: #f1f5f9;
}

/* ── Metric text helpers ──────────────────────────────────────────────────── */
.metric-label {
    color: rgba(148,163,184,0.85);
    font-size: 0.68rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 600;
}

.metric-value { color: #f1f5f9; }
.metric-sub   { color: rgba(148,163,184,0.70); font-size: 0.75rem; }

/* Glow text */
.text-glow-green  { color: #10b981 !important; text-shadow: 0 0 14px rgba(16,185,129,.45); }
.text-glow-red    { color: #f87171 !important; text-shadow: 0 0 14px rgba(248,113,113,.40); }
.text-glow-blue   { color: #60a5fa !important; text-shadow: 0 0 14px rgba(96,165,250,.35); }
.text-glow-amber  { color: #fbbf24 !important; text-shadow: 0 0 14px rgba(251,191,36,.38); }
.text-glow-white  { color: #f1f5f9 !important; text-shadow: none; }

/* ── Glass Table ──────────────────────────────────────────────────────────── */
.glass-table {
    color: #cbd5e1;
    --bs-table-bg: transparent;
    --bs-table-hover-bg: rgba(255,255,255,0.035);
    --bs-table-border-color: rgba(255,255,255,0.065);
}
.glass-table thead th {
    color: rgba(148,163,184,.75);
    border-bottom: 1px solid rgba(255,255,255,.09) !important;
    font-size: 0.66rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-weight: 700;
    background: rgba(255,255,255,.04) !important;
    white-space: nowrap;
    padding-top: .65rem;
    padding-bottom: .65rem;
}
/* Sorting arrows tint */
.glass-table thead .dt-orderable-asc .dt-column-order::before,
.glass-table thead .dt-orderable-desc .dt-column-order::after { opacity: .35; }
.glass-table thead .dt-ordering-asc .dt-column-order::before,
.glass-table thead .dt-ordering-desc .dt-column-order::after { opacity: .90; color: #60a5fa; }
.glass-table td,
.glass-table th { border-color: rgba(255,255,255,.055); vertical-align: middle; }
.glass-table tbody tr { transition: background .14s; }
.glass-table tbody tr:hover td { background: rgba(96,165,250,0.04) !important; }

/* ── Glass List ───────────────────────────────────────────────────────────── */
.glass-list .list-group-item {
    background: transparent;
    border-color: rgba(255,255,255,0.07);
    color: #cbd5e1;
    transition: background 0.15s;
}
.glass-list .list-group-item:hover { background: rgba(255,255,255,0.04); }
.glass-list .list-group-item.glass-unread { background: rgba(99,102,241,0.10); }

/* ── Mini stat box ────────────────────────────────────────────────────────── */
.glass-stat-box {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 11px;
    padding: 0.45rem 0.6rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.08);
    transition: border-color .18s, box-shadow .18s;
}
.glass-stat-box:hover {
    border-color: rgba(255,255,255,0.16);
    box-shadow: 0 4px 14px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.10);
}

/* ── Glass strip (open positions) ────────────────────────────────────────── */
.glass-strip {
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0,0,0,.35), 0 0 22px rgba(59,130,246,.12);
}

/* ── Glass VR divider ────────────────────────────────────────────────────── */
.glass-vr { width: 1px; background: rgba(255,255,255,0.12); min-height: 40px; }

/* ── Glass alert ─────────────────────────────────────────────────────────── */
.glass-alert-warn {
    background: rgba(245,158,11,0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(245,158,11,0.30);
    border-radius: 14px;
    color: #fde68a;
    box-shadow: 0 4px 20px rgba(245,158,11,.18);
}
.glass-alert-warn .alert-link { color: #fbbf24; font-weight: 600; }
.glass-alert-warn .btn-close  { filter: invert(1) brightness(.8); }

/* ── Glow buttons ────────────────────────────────────────────────────────── */
.btn-glow-primary,
.btn-glow-blue {
    color: #60a5fa;
    border: 1px solid rgba(96,165,250,.40);
    background: rgba(59,130,246,.08);
    font-size: .8rem;
    transition: all .2s ease;
}
.btn-glow-primary:hover,
.btn-glow-blue:hover {
    color: #93c5fd;
    border-color: rgba(96,165,250,.70);
    background: rgba(59,130,246,.15);
    box-shadow: 0 0 16px rgba(59,130,246,.35);
}

/* ── Badge glass variants ────────────────────────────────────────────────── */
.badge-glass-green { background: rgba(16,185,129,.12); color: #10b981; border: 1px solid rgba(16,185,129,.28); text-shadow: 0 0 8px rgba(16,185,129,.40); }
.badge-glass-red   { background: rgba(239,68,68,.20);  color: #f87171; border: 1px solid rgba(248,113,113,.30); }
.badge-glass-grey  { background: rgba(148,163,184,.15); color: #94a3b8; border: 1px solid rgba(148,163,184,.25); }
.badge-glass-amber { background: rgba(245,158,11,.20); color: #fbbf24; border: 1px solid rgba(251,191,36,.30); }
.badge-glass-blue  { background: rgba(59,130,246,.18);  color: #60a5fa; border: 1px solid rgba(96,165,250,.30); }
.badge-glass-buy   { background: rgba(16,185,129,.12); color: #10b981; text-shadow: 0 0 8px rgba(16,185,129,.40); }
.badge-glass-sell  { background: rgba(239,68,68,.20);  color: #f87171; }

/* ── Glass progress bar ──────────────────────────────────────────────────── */
.glass-progress { background: rgba(255,255,255,.10); height: 4px; border-radius: 2px; overflow: hidden; display: flex; }
.glass-progress .progress-bar { border-radius: 2px; }

/* ── Chart inner box ─────────────────────────────────────────────────────── */
/* legacy fallback kept for any other usage */
.glass-chart-box {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
}

/* ── Performance card header ──────────────────────────────────────────────── */
.perf-card-header {
    background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(255,255,255,0.04) 100%);
    border-bottom: 1px solid rgba(59,130,246,0.14);
    border-radius: 16px 16px 0 0;
    padding: 1rem 1.25rem;
    position: relative;
    z-index: 1;
}
.perf-header-icon {
    width: 40px; height: 40px;
    background: rgba(59,130,246,0.15);
    border: 1px solid rgba(59,130,246,0.30);
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    color: #60a5fa; font-size: 1.1rem; flex-shrink: 0;
    box-shadow: 0 0 20px rgba(59,130,246,0.25), inset 0 1px 0 rgba(59,130,246,0.18);
}
.perf-header-title { color: #f1f5f9; font-size: .95rem; font-weight: 700; line-height: 1.3; }
.perf-header-sub   { color: rgba(148,163,184,0.58); font-size: .67rem; letter-spacing: .03em; margin-top: 2px; }
.perf-select-label { color: rgba(148,163,184,0.65); font-size: .78rem; font-weight: 500; }
.perf-select {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(59,130,246,0.26) !important;
    color: #e2e8f0 !important;
    border-radius: 9px !important;
    font-size: .82rem !important;
    box-shadow: 0 0 10px rgba(59,130,246,0.08);
    transition: border-color .18s, box-shadow .18s;
}
.perf-select:focus {
    border-color: rgba(59,130,246,0.55) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.14) !important;
    outline: none;
}

/* ── Master account card header ──────────────────────────────────────────────── */
.master-card-header {
    background: linear-gradient(135deg, rgba(245,158,11,0.08) 0%, rgba(255,255,255,0.04) 100%);
    border-bottom: 1px solid rgba(245,158,11,0.14);
    border-radius: 16px 16px 0 0;
    padding: 1rem 1.25rem;
    position: relative;
    z-index: 1;
}
.master-card-icon {
    width: 44px; height: 44px;
    background: rgba(245,158,11,0.14);
    border: 1px solid rgba(245,158,11,0.30);
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    color: #fbbf24; font-size: 1.1rem; flex-shrink: 0;
    box-shadow: 0 0 20px rgba(245,158,11,0.24), inset 0 1px 0 rgba(245,158,11,0.18);
}
.master-card-title { color: #f1f5f9; font-size: .95rem; font-weight: 700; letter-spacing: -.01em; }
.master-card-sub   { color: rgba(148,163,184,0.60); font-size: .68rem; margin-top: 1px; letter-spacing: .03em; }
.master-card-viewall-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(245,158,11,0.10);
    border: 1px solid rgba(245,158,11,0.24);
    color: #fbbf24; font-size: .75rem; font-weight: 600;
    padding: 6px 14px; border-radius: 10px;
    text-decoration: none;
    transition: background .18s, box-shadow .18s, color .18s;
    white-space: nowrap;
}
.master-card-viewall-btn:hover {
    background: rgba(245,158,11,0.18);
    box-shadow: 0 0 14px rgba(245,158,11,0.22);
    color: #fde68a;
}

/* ── Master performance chart header (amber variant of perf-card-header) ─────── */
.master-perf-header {
    background: linear-gradient(135deg, rgba(245,158,11,0.08) 0%, rgba(255,255,255,0.04) 100%);
    border-bottom: 1px solid rgba(245,158,11,0.14);
    border-radius: 16px 16px 0 0;
    padding: 1rem 1.25rem;
    position: relative;
    z-index: 1;
}
.master-perf-icon {
    width: 40px; height: 40px;
    background: rgba(245,158,11,0.14);
    border: 1px solid rgba(245,158,11,0.30);
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    color: #fbbf24; font-size: 1.1rem; flex-shrink: 0;
    box-shadow: 0 0 20px rgba(245,158,11,0.24), inset 0 1px 0 rgba(245,158,11,0.18);
}
.master-perf-title { color: #f1f5f9; font-size: .95rem; font-weight: 700; line-height: 1.3; }
.master-perf-sub   { color: rgba(148,163,184,0.58); font-size: .67rem; letter-spacing: .03em; margin-top: 2px; }
/* Amber-tinted select for master charts */
.master-select {
    border-color: rgba(245,158,11,0.28) !important;
    box-shadow: 0 0 10px rgba(245,158,11,0.08) !important;
}
.master-select:focus {
    border-color: rgba(245,158,11,0.55) !important;
    box-shadow: 0 0 0 3px rgba(245,158,11,0.14) !important;
}

/* ── Chart boxes ──────────────────────────────────────────────────────────── */
.chart-box {
    border-radius: 14px;
    padding: 1rem 1.1rem 1.1rem;
    position: relative;
    overflow: hidden;
    transition: border-color .22s ease, box-shadow .22s ease;
    height: 100%;
}
.chart-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    border-radius: 14px 14px 0 0;
    opacity: 0.65;
}
/* green — Daily PnL */
.chart-box-green {
    background: linear-gradient(145deg, rgba(16,185,129,0.06) 0%, rgba(255,255,255,0.03) 100%);
    border: 1px solid rgba(16,185,129,0.16);
}
.chart-box-green::before { background: linear-gradient(90deg, transparent, rgba(16,185,129,0.85), transparent); }
.chart-box-green:hover { border-color: rgba(16,185,129,0.32); box-shadow: 0 0 28px rgba(16,185,129,0.09); }
/* indigo — Win Rate */
.chart-box-indigo {
    background: linear-gradient(145deg, rgba(99,102,241,0.06) 0%, rgba(255,255,255,0.03) 100%);
    border: 1px solid rgba(99,102,241,0.16);
}
.chart-box-indigo::before { background: linear-gradient(90deg, transparent, rgba(99,102,241,0.85), transparent); }
.chart-box-indigo:hover { border-color: rgba(99,102,241,0.32); box-shadow: 0 0 28px rgba(99,102,241,0.09); }
/* purple — Win/Loss */
.chart-box-purple {
    background: linear-gradient(145deg, rgba(139,92,246,0.06) 0%, rgba(255,255,255,0.03) 100%);
    border: 1px solid rgba(139,92,246,0.16);
}
.chart-box-purple::before { background: linear-gradient(90deg, transparent, rgba(139,92,246,0.85), transparent); }
.chart-box-purple:hover { border-color: rgba(139,92,246,0.32); box-shadow: 0 0 28px rgba(139,92,246,0.09); }

/* amber — Master Daily PnL */
.chart-box-amber {
    background: linear-gradient(145deg, rgba(245,158,11,0.07) 0%, rgba(255,255,255,0.03) 100%);
    border: 1px solid rgba(245,158,11,0.18);
}
.chart-box-amber::before { background: linear-gradient(90deg, transparent, rgba(245,158,11,0.85), transparent); }
.chart-box-amber:hover { border-color: rgba(245,158,11,0.34); box-shadow: 0 0 28px rgba(245,158,11,0.10); }

/* Chart box header */
.chart-box-header {
    display: flex; align-items: center; gap: .65rem;
    margin-bottom: .9rem;
}
.chart-box-icon {
    width: 32px; height: 32px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; flex-shrink: 0;
}
.chart-icon-green  { background: rgba(16,185,129,0.14); border: 1px solid rgba(16,185,129,0.28); color: #10b981; box-shadow: 0 0 12px rgba(16,185,129,0.18); }
.chart-icon-indigo { background: rgba(99,102,241,0.14); border: 1px solid rgba(99,102,241,0.28); color: #818cf8; box-shadow: 0 0 12px rgba(99,102,241,0.18); }
.chart-icon-purple { background: rgba(139,92,246,0.14); border: 1px solid rgba(139,92,246,0.28); color: #a78bfa; box-shadow: 0 0 12px rgba(139,92,246,0.18); }
.chart-icon-amber  { background: rgba(245,158,11,0.14);  border: 1px solid rgba(245,158,11,0.28);  color: #fbbf24; box-shadow: 0 0 12px rgba(245,158,11,0.18); }
.chart-box-title { color: #f1f5f9; font-size: .83rem; font-weight: 700; line-height: 1.3; }
.chart-box-sub   { color: rgba(148,163,184,0.50); font-size: .62rem; letter-spacing: .02em; margin-top: 2px; }
.chart-canvas    { max-height: 220px; }

/* ── Welcome icon circle ─────────────────────────────────────────────────── */
.glass-welcome-icon {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, rgba(99,102,241,.30), rgba(139,92,246,.20));
    border: 1px solid rgba(139,92,246,.35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 2rem;
    box-shadow: 0 0 32px rgba(99,102,241,.35);
}

/* ── Dashboard header text ───────────────────────────────────────────────── */
.dashboard-heading  { color: #f1f5f9; }
.dashboard-subtitle { color: rgba(148,163,184,.80); font-size: .85rem; }
.dashboard-date-badge {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 8px;
    color: rgba(148,163,184,.80);
    font-size: .75rem;
    padding: .3rem .7rem;
    white-space: nowrap;
}

/* ── Glass select ────────────────────────────────────────────────────────── */
.glass-select {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: #e2e8f0 !important;
    border-radius: 8px;
}
.glass-select option { background: #0d1228; color: #e2e8f0; }

/* ── Main background when hosting a dashboard-page ──────────────────────── */
main:has(> .dashboard-page) {
    background: linear-gradient(135deg, #07091a 0%, #0d1228 35%, #080e1e 70%, #07091a 100%) !important;
    padding: 0 !important;
}
[data-theme="light"] main:has(> .dashboard-page) {
    background: transparent !important;
}

/* ── Glass icon box (card/row icon containers) ───────────────────────────── */
.glass-icon-box {
    width: 40px; height: 40px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ── Green glow action button ────────────────────────────────────────────── */
.btn-glow-green {
    color: #10b981;
    border: 1px solid rgba(16,185,129,0.35);
    background: rgba(16,185,129,0.08);
    font-size: .8rem;
    transition: all .2s ease;
}
.btn-glow-green:hover {
    color: #10b981;
    border-color: rgba(16,185,129,0.65);
    background: rgba(16,185,129,0.14);
    box-shadow: 0 0 18px rgba(16,185,129,0.30);
    text-shadow: 0 0 8px rgba(16,185,129,0.40);
}
.btn-glow-green:disabled, .btn-glow-green.disabled {
    color: #10b981;
    border-color: rgba(16,185,129,0.35);
    background: rgba(16,185,129,0.08);
    opacity: 1;
}

/* ── Glass toggle button (sort bars, filter pills) ───────────────────────── */
.btn-glass {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(148,163,184,0.75);
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.3rem 0.75rem;
    transition: all 0.18s;
}
.btn-glass:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.18);
    color: #e2e8f0;
}
.btn-glass.active {
    background: rgba(16,185,129,0.10);
    border-color: rgba(16,185,129,0.35);
    color: #10b981;
    text-shadow: 0 0 8px rgba(16,185,129,0.40);
    box-shadow: 0 0 12px rgba(16,185,129,0.12);
}

/* ── Glass modal ─────────────────────────────────────────────────────────── */
.glass-modal .modal-content {
    background: rgba(8,11,28,0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.65), 0 0 40px rgba(139,92,246,0.08);
    color: #e2e8f0;
}
.glass-modal .modal-header {
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    border-radius: 16px 16px 0 0;
    padding: 1rem 1.25rem;
}
.glass-modal .modal-body  { padding: 1.25rem; }
.glass-modal .modal-footer {
    border-top: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    border-radius: 0 0 16px 16px;
}
.glass-modal .modal-title { color: #f1f5f9; font-weight: 600; }
.glass-modal .btn-close   { filter: invert(1) brightness(0.8); }

/* ── Amber glow action button ────────────────────────────────────────────── */
.btn-glow-amber {
    color: #fbbf24;
    border: 1px solid rgba(251,191,36,0.35);
    background: rgba(251,191,36,0.08);
    font-size: .8rem;
    transition: all .2s ease;
}
.btn-glow-amber:hover {
    color: #fbbf24;
    border-color: rgba(251,191,36,0.65);
    background: rgba(251,191,36,0.14);
    box-shadow: 0 0 18px rgba(251,191,36,0.30);
    text-shadow: 0 0 8px rgba(251,191,36,0.40);
}

/* ── Glass nav tabs ──────────────────────────────────────────────────────── */
.glass-tabs {
    border-bottom: 1px solid rgba(255,255,255,0.10);
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 2px;
}
.glass-tabs .nav-link {
    color: rgba(148,163,184,0.75);
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    font-size: 0.82rem;
    padding: 0.45rem 0.9rem;
    white-space: nowrap;
    transition: all 0.15s;
}
.glass-tabs .nav-link:hover {
    color: #e2e8f0;
    border-color: rgba(255,255,255,0.10) rgba(255,255,255,0.10) transparent;
    background: rgba(255,255,255,0.05);
}
.glass-tabs .nav-link.active {
    color: #f1f5f9;
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.12) rgba(255,255,255,0.12) transparent;
    font-weight: 600;
}
.glass-tab-content {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.10);
    border-top: none;
    border-radius: 0 0 14px 14px;
}

/* ── Glass input (text, number, date, password) ──────────────────────────── */
.glass-input {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: #e2e8f0 !important;
    border-radius: 8px;
}
.glass-input option {
    background: #1e2535;
    color: #e2e8f0;
}
.glass-input:focus {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(16,185,129,0.40) !important;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.10) !important;
    color: #f1f5f9 !important;
    outline: none;
}
.glass-input::placeholder              { color: rgba(148,163,184,0.45); }
.glass-input::-webkit-calendar-picker-indicator { filter: invert(1) brightness(0.7); }
.glass-input[readonly]                 { opacity: 0.78; cursor: default; }
.glass-input.is-invalid                { border-color: rgba(239,68,68,0.60) !important; }

/* ── DataTables — dark theme inside .dashboard-page ─────────────────────── */

/* Controls row container */
.dashboard-page .dt-layout-row {
    display: flex; align-items: center;
    flex-wrap: wrap; gap: .55rem;
    margin-bottom: .55rem;
}
.dashboard-page .dt-layout-row:last-child { margin-bottom: 0; margin-top: .65rem; }

/* Glassmorphism top-controls strip — first row only */
.dashboard-page .dt-layout-row:first-child {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: .5rem .85rem;
}
/* also cover the legacy DT1 wrapper */
.dashboard-page .dataTables_wrapper .top {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: .5rem .85rem;
    margin-bottom: .65rem;
}

/* All DT inputs + selects — target every possible class DT may assign */
.dashboard-page .dt-input,
.dashboard-page .dt-search input,
.dashboard-page .dt-length select,
.dashboard-page .dataTables_filter input,
.dashboard-page .dataTables_length select {
    background-color: rgba(255,255,255,0.07) !important;
    background:       rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    color: #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: .8rem !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: border-color .18s, box-shadow .18s, background .18s !important;
}
.dashboard-page .dt-input:focus,
.dashboard-page .dt-search input:focus,
.dashboard-page .dt-length select:focus,
.dashboard-page .dataTables_filter input:focus,
.dashboard-page .dataTables_length select:focus {
    border-color: rgba(96,165,250,0.45) !important;
    box-shadow: 0 0 0 3px rgba(96,165,250,0.10) !important;
    background-color: rgba(255,255,255,0.11) !important;
    background:       rgba(255,255,255,0.11) !important;
    outline: none !important;
}
/* Placeholder colour */
.dashboard-page .dt-search input::placeholder { color: rgba(148,163,184,0.45) !important; }

/* Labels */
.dashboard-page .dt-info,
.dashboard-page .dt-length label,
.dashboard-page .dt-search label,
.dashboard-page .dataTables_info,
.dashboard-page .dataTables_filter label,
.dashboard-page .dataTables_length label {
    color: rgba(148,163,184,0.62) !important;
    font-size: .78rem !important;
    white-space: nowrap;
}

/* Select arrow tint */
.dashboard-page .dt-length select option,
.dashboard-page .dataTables_length select option {
    background: #0d1228; color: #e2e8f0;
}

/* Pagination */
.dashboard-page .dt-paging .page-link,
.dashboard-page .dataTables_paginate .page-link {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.09);
    color: rgba(148,163,184,0.72);
    font-size: .8rem;
    border-radius: 8px !important;
    min-width: 32px; text-align: center;
    transition: all .18s;
}
.dashboard-page .dt-paging .page-link:hover,
.dashboard-page .dataTables_paginate .page-link:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(96,165,250,0.30);
    color: #c7d2fe;
    box-shadow: 0 0 10px rgba(96,165,250,0.10);
}
.dashboard-page .dt-paging .page-item.active .page-link,
.dashboard-page .dataTables_paginate .page-item.active .page-link {
    background: rgba(96,165,250,0.18) !important;
    border-color: rgba(96,165,250,0.45) !important;
    color: #93c5fd !important;
    box-shadow: 0 0 12px rgba(96,165,250,0.18);
    font-weight: 700;
}
.dashboard-page .dt-paging .page-item.disabled .page-link,
.dashboard-page .dataTables_paginate .page-item.disabled .page-link {
    background: transparent !important;
    border-color: rgba(255,255,255,0.05) !important;
    color: rgba(148,163,184,0.22) !important;
    box-shadow: none;
}

/* Processing overlay */
.dashboard-page .dt-processing {
    background: rgba(7,9,26,0.85) !important;
    color: rgba(148,163,184,0.80) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 10px; font-size: .82rem;
    backdrop-filter: blur(8px);
}

/* =============================================================================
   DARK THEME — scoped defaults for elements whose color was previously inline
   ============================================================================= */

.sidebar-toggle-btn       { color: rgba(14,155,255,0.70); }
.sidebar-toggle-btn:hover { color: rgba(14,155,255,1); }

.topbar-admin-btn {
    color: #f87171;
    border: 1px solid rgba(248,113,113,.35);
    background: rgba(239,68,68,.08);
    font-size: .78rem;
    transition: all .2s;
}
.topbar-admin-btn:hover {
    color: #fca5a5;
    border-color: rgba(248,113,113,.60);
    background: rgba(239,68,68,.14);
    box-shadow: 0 0 14px rgba(239,68,68,.20);
}

.topbar-avatar-ring {
    width: 34px; height: 34px;
    overflow: hidden;
    box-shadow: 0 0 0 2px rgba(14,155,255,0.22);
    transition: box-shadow .2s;
}
.topbar-avatar-ring:hover { box-shadow: 0 0 0 2px rgba(14,155,255,0.55); }

/* Theme toggle button */
.topbar-theme-btn {
    color: rgba(14,155,255,0.75);
    border: 1px solid rgba(14,155,255,0.20);
    background: rgba(14,155,255,0.06);
    padding: .25rem .55rem;
    border-radius: 8px;
    font-size: .9rem;
    line-height: 1;
    transition: all .2s;
    display: flex;
    align-items: center;
}
.topbar-theme-btn:hover {
    color: #0e9bff;
    border-color: rgba(14,155,255,0.45);
    background: rgba(14,155,255,0.12);
    box-shadow: 0 0 12px rgba(14,155,255,0.22);
}

/* ── Notification bell — default (dark theme) ────────────────────────────── */
.topbar-notif-btn {
    color: rgba(255,255,255,0.80);
    transition: color .15s;
}
.topbar-notif-btn:hover { color: #ffffff; }

/* =============================================================================
   DARK THEME (default) — text-contrast fix
   The app sets data-theme but NOT Bootstrap's data-bs-theme, so Bootstrap keeps
   its light-mode value for .text-muted / .text-secondary (~near-black), which is
   unreadable on the dark glass cards (as seen on the TelegramCopier pages, which
   lean on .text-muted). Restore a readable muted tone on dark, mirroring the
   light-theme block below.
   ============================================================================= */
[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-body-secondary { color: #94a3b8 !important; }  /* slate-400 */
[data-theme="dark"] .text-secondary      { color: #cbd5e1 !important; }  /* slate-300 */

/* .form-text resolves to the same near-black --bs-secondary-color, so every
   field hint in the app was invisible on the dark glass modals and cards.
   These hints carry real instructions (the broker server name format, what the
   broker password is used for), so they sit a touch brighter than .text-muted
   rather than being left as decoration. */
[data-theme="dark"] .form-text           { color: #9aa8bd !important; }

/* Same story for validation text: Bootstrap's default #dc3545 is a mid-dark red
   that sits at roughly 3.5:1 on the dark cards. The trade-history date filters
   used to carry this as an inline style on the message itself, which meant the
   colour could not follow the theme — it lives here instead so light can
   override it. */
[data-theme="dark"] .invalid-feedback,
[data-theme="dark"] .field-validation-error { color: #f87171 !important; }  /* red-400 */

/* =============================================================================
   LIGHT THEME  — Modern Glassmorphism
   Applied when <html data-theme="light">
   ============================================================================= */

[data-theme="light"] { color-scheme: light; }

/* ── Notification bell ────────────────────────────────────────────────────── */
[data-theme="light"] .topbar-notif-btn       { color: #4f46e5; }
[data-theme="light"] .topbar-notif-btn:hover { color: #3730a3; }

/* ── Global text color overrides ─────────────────────────────────────────── */
/* Bootstrap's text-muted resolves to ~#6c757d which is too light on pale bg  */
[data-theme="light"] .text-muted         { color: #475569 !important; }
[data-theme="light"] .text-secondary     { color: #374151 !important; }
[data-theme="light"] small, [data-theme="light"] .small { color: inherit; }
/* Ensure body copy is fully dark */
[data-theme="light"] p,
[data-theme="light"] span,
[data-theme="light"] li,
[data-theme="light"] td,
[data-theme="light"] th,
[data-theme="light"] dd,
[data-theme="light"] dt  { color: #1e293b; }
[data-theme="light"] h1,[data-theme="light"] h2,
[data-theme="light"] h3,[data-theme="light"] h4,
[data-theme="light"] h5,[data-theme="light"] h6 { color: #0f172a; }
/* Keep colored helpers working */
[data-theme="light"] .text-success { color: #15803d !important; }
[data-theme="light"] .text-danger  { color: #dc2626 !important; }
[data-theme="light"] .text-primary { color: #4f46e5 !important; }
[data-theme="light"] .text-warning { color: #b45309 !important; }

/* ── Body / Page shell ────────────────────────────────────────────────────── */
[data-theme="light"] body {
    background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 30%, #eff6ff 65%, #f0fdf4 100%);
    background-attachment: fixed;
    color: #0f172a;
    overflow-x: hidden;
}
[data-theme="light"] .page-body {
    background: transparent;
}
[data-theme="light"] .main-content > main {
    background: transparent;
}

/* ── Topbar ───────────────────────────────────────────────────────────────── */
[data-theme="light"] .topbar {
    background: rgba(255,255,255,0.75) !important;
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border-bottom: 1px solid rgba(99,102,241,0.15);
    box-shadow: 0 1px 24px rgba(99,102,241,0.10), 0 1px 4px rgba(0,0,0,0.06);
}
[data-theme="light"] .topbar-brand {
    color: #4f46e5 !important;
    text-shadow: 0 0 20px rgba(99,102,241,0.30);
}
[data-theme="light"] .sidebar-toggle-btn       { color: #6366f1 !important; }
[data-theme="light"] .sidebar-toggle-btn:hover { color: #4338ca !important; }

[data-theme="light"] .topbar-wallet-glass {
    background: rgba(99,102,241,0.10);
    border: 1px solid rgba(99,102,241,0.28);
    color: #4f46e5 !important;
    text-shadow: 0 0 10px rgba(99,102,241,0.25);
    box-shadow: 0 0 10px rgba(99,102,241,0.12);
}
[data-theme="light"] .topbar-debt-glass {
    background: rgba(220,38,38,0.09);
    border: 1px solid rgba(220,38,38,0.25);
    color: #dc2626 !important;
    box-shadow: 0 0 8px rgba(220,38,38,0.10);
}
[data-theme="light"] .topbar-admin-btn {
    color: #dc2626 !important;
    border-color: rgba(220,38,38,0.30) !important;
    background: rgba(239,68,68,0.08) !important;
    box-shadow: 0 0 10px rgba(220,38,38,0.10) !important;
}
[data-theme="light"] .topbar-admin-btn:hover {
    background: rgba(239,68,68,0.14) !important;
    border-color: rgba(220,38,38,0.55) !important;
    box-shadow: 0 0 16px rgba(220,38,38,0.20) !important;
}
[data-theme="light"] .topbar-avatar-ring { box-shadow: 0 0 0 2px rgba(99,102,241,0.40), 0 0 12px rgba(99,102,241,0.18); }
[data-theme="light"] .topbar-avatar-ring:hover { box-shadow: 0 0 0 2px rgba(99,102,241,0.70), 0 0 18px rgba(99,102,241,0.30); }

[data-theme="light"] .topbar-dropdown .dropdown-menu {
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid rgba(99,102,241,0.18);
    box-shadow: 0 8px 32px rgba(99,102,241,0.15), 0 2px 8px rgba(0,0,0,0.08);
}
[data-theme="light"] .topbar-dropdown .dropdown-item            { color: #334155; }
[data-theme="light"] .topbar-dropdown .dropdown-item:hover,
[data-theme="light"] .topbar-dropdown .dropdown-item:focus      { background: rgba(99,102,241,0.08); color: #3730a3; }
[data-theme="light"] .topbar-dropdown .dropdown-item.text-danger { color: #dc2626 !important; }
[data-theme="light"] .topbar-dropdown .dropdown-item.text-danger:hover { background: rgba(220,38,38,0.08); }
[data-theme="light"] .topbar-dropdown .dropdown-divider          { border-color: rgba(99,102,241,0.12); }
[data-theme="light"] .topbar-dropdown .dropdown-item-text        { color: #94a3b8; }

[data-theme="light"] .topbar-theme-btn {
    color: #4f46e5;
    border-color: rgba(99,102,241,0.30);
    background: rgba(99,102,241,0.08);
    box-shadow: 0 0 8px rgba(99,102,241,0.12);
}
[data-theme="light"] .topbar-theme-btn:hover {
    color: #4338ca;
    border-color: rgba(99,102,241,0.60);
    background: rgba(99,102,241,0.14);
    box-shadow: 0 0 18px rgba(99,102,241,0.28);
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
[data-theme="light"] .sidebar {
    background: rgba(255,255,255,0.72) !important;
    backdrop-filter: blur(24px) saturate(1.6);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    border-right: 1px solid rgba(99,102,241,0.15);
    box-shadow: 2px 0 24px rgba(99,102,241,0.10), 2px 0 8px rgba(0,0,0,0.04);
}
[data-theme="light"] .sidebar-section-label              { color: #94a3b8; }
[data-theme="light"] .sidebar .sidebar-link              { color: #64748b; }
[data-theme="light"] .sidebar .sidebar-link:hover        { color: #3730a3; background: rgba(99,102,241,0.08); box-shadow: none; text-shadow: none; }
[data-theme="light"] .sidebar .sidebar-link.active       { color: #4f46e5; background: rgba(99,102,241,0.12); box-shadow: 0 0 16px rgba(99,102,241,0.18); text-shadow: 0 0 12px rgba(99,102,241,0.25); }
[data-theme="light"] .sidebar .sidebar-link.active .sidebar-icon { color: #6366f1; }
[data-theme="light"] .sidebar .sidebar-sublink           { color: #94a3b8; }
[data-theme="light"] .sidebar .sidebar-sublink:hover     { color: #334155; background: rgba(99,102,241,0.06); }
[data-theme="light"] .sidebar .sidebar-sublink.active    { color: #4f46e5; text-shadow: 0 0 8px rgba(99,102,241,0.25); }
[data-theme="light"] .sidebar-footer                     { border-top-color: rgba(99,102,241,0.12); background: rgba(248,250,252,0.60); }
[data-theme="light"] .sidebar .sidebar-caret             { color: #94a3b8; }
[data-theme="light"] .btn-sidebar-profile {
    background: rgba(99,102,241,0.10);
    border-color: rgba(99,102,241,0.28);
    color: #4f46e5;
    box-shadow: 0 0 12px rgba(99,102,241,0.14);
}
[data-theme="light"] .btn-sidebar-profile:hover {
    background: rgba(99,102,241,0.16);
    border-color: rgba(99,102,241,0.50);
    color: #4338ca;
    box-shadow: 0 0 20px rgba(99,102,241,0.25);
}

/* ── Dashboard page background ────────────────────────────────────────────── */
/* NOTE: the appended FUNDEDNEXT theme block sets `.dashboard-page { background: ...dark... !important }`.
   These light overrides MUST also use !important (higher specificity alone is not enough to beat
   an !important declaration) so the opaque dark page gradient does not show through behind the
   translucent cards on every client page. */
[data-theme="light"] main:has(> .dashboard-page),
[data-theme="light"] .dashboard-page {
    background: transparent !important;
    min-height: calc(100vh - 56px);
}
[data-theme="light"] .dashboard-page::before { display: none !important; }
[data-theme="light"] .dashboard-page::after  { display: none !important; }
[data-theme="light"] .dashboard-heading      { color: #0f172a; }
[data-theme="light"] .dashboard-subtitle     { color: #475569; }
[data-theme="light"] .dashboard-date-badge {
    background: rgba(255,255,255,0.70);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(99,102,241,0.18);
    color: #475569;
    box-shadow: 0 2px 8px rgba(99,102,241,0.08);
}

/* ── Glass card → frosted glass card ─────────────────────────────────────── */
[data-theme="light"] .glass-card {
    background: rgba(255,255,255,0.72) !important;
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid rgba(199,210,254,0.70) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 24px rgba(99,102,241,0.10), 0 1px 4px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.90) !important;
    color: #0f172a;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
[data-theme="light"] .glass-card:hover {
    transform: translateY(-3px);
    border-color: rgba(129,140,248,0.55) !important;
    box-shadow: 0 12px 40px rgba(99,102,241,0.16), 0 4px 12px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.95) !important;
}
/* Nested glass-card inside glass-card gets a tinted inset look */
[data-theme="light"] .glass-card .glass-card {
    background: rgba(238,242,255,0.60) !important;
    border: 1px solid rgba(165,180,252,0.45) !important;
    box-shadow: 0 2px 10px rgba(99,102,241,0.08), inset 0 1px 0 rgba(255,255,255,0.80) !important;
}

/* Glow variants — actual soft pastel glows */
[data-theme="light"] .glass-glow-green        { border-color: rgba(14,155,255,0.35) !important; box-shadow: 0 4px 24px rgba(0,119,204,0.15), 0 0 18px rgba(0,119,204,0.10), inset 0 1px 0 rgba(255,255,255,0.90) !important; }
[data-theme="light"] .glass-glow-green:hover  { border-color: rgba(14,155,255,0.55) !important; box-shadow: 0 12px 40px rgba(0,119,204,0.22), 0 0 30px rgba(0,119,204,0.18), inset 0 1px 0 rgba(255,255,255,0.95) !important; }
[data-theme="light"] .glass-glow-blue         { border-color: rgba(59,130,246,0.35) !important; box-shadow: 0 4px 24px rgba(37,99,235,0.15), 0 0 18px rgba(37,99,235,0.10), inset 0 1px 0 rgba(255,255,255,0.90) !important; }
[data-theme="light"] .glass-glow-blue:hover   { border-color: rgba(59,130,246,0.55) !important; box-shadow: 0 12px 40px rgba(37,99,235,0.22), 0 0 30px rgba(37,99,235,0.18), inset 0 1px 0 rgba(255,255,255,0.95) !important; }
[data-theme="light"] .glass-glow-purple       { border-color: rgba(139,92,246,0.35) !important; box-shadow: 0 4px 24px rgba(99,102,241,0.16), 0 0 18px rgba(99,102,241,0.12), inset 0 1px 0 rgba(255,255,255,0.90) !important; }
[data-theme="light"] .glass-glow-purple:hover { border-color: rgba(139,92,246,0.55) !important; box-shadow: 0 12px 40px rgba(99,102,241,0.24), 0 0 30px rgba(99,102,241,0.18), inset 0 1px 0 rgba(255,255,255,0.95) !important; }
[data-theme="light"] .glass-glow-amber        { border-color: rgba(245,158,11,0.35) !important; box-shadow: 0 4px 24px rgba(217,119,6,0.15), 0 0 18px rgba(217,119,6,0.10), inset 0 1px 0 rgba(255,255,255,0.90) !important; }
[data-theme="light"] .glass-glow-amber:hover  { border-color: rgba(245,158,11,0.55) !important; box-shadow: 0 12px 40px rgba(217,119,6,0.22), 0 0 30px rgba(217,119,6,0.18), inset 0 1px 0 rgba(255,255,255,0.95) !important; }
[data-theme="light"] .glass-glow-red          { border-color: rgba(239,68,68,0.35) !important; box-shadow: 0 4px 24px rgba(220,38,38,0.15), 0 0 18px rgba(220,38,38,0.10), inset 0 1px 0 rgba(255,255,255,0.90) !important; }
[data-theme="light"] .glass-glow-red:hover    { border-color: rgba(239,68,68,0.55) !important; box-shadow: 0 12px 40px rgba(220,38,38,0.22), 0 0 30px rgba(220,38,38,0.18), inset 0 1px 0 rgba(255,255,255,0.95) !important; }

/* ── Glass card header ────────────────────────────────────────────────────── */
[data-theme="light"] .glass-card-header {
    background: rgba(224,231,255,0.60);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(165,180,252,0.55);
    border-radius: 16px 16px 0 0;
    color: #0f172a;
}

/* ── Metric text ──────────────────────────────────────────────────────────── */
[data-theme="light"] .metric-label { color: #475569; font-weight: 600; }
[data-theme="light"] .metric-value { color: #0f172a; }
[data-theme="light"] .metric-sub   { color: #475569; }

/* ── Glow text → vibrant colored text with soft glow ─────────────────────── */
[data-theme="light"] .text-glow-green  { color: #15803d !important; text-shadow: 0 0 14px rgba(22,163,74,0.30); }
[data-theme="light"] .text-glow-red    { color: #dc2626 !important; text-shadow: 0 0 14px rgba(220,38,38,0.25); }
[data-theme="light"] .text-glow-blue   { color: #2563eb !important; text-shadow: 0 0 14px rgba(37,99,235,0.25); }
[data-theme="light"] .text-glow-amber  { color: #d97706 !important; text-shadow: 0 0 14px rgba(217,119,6,0.28); }
[data-theme="light"] .text-glow-white  { color: #0f172a !important; text-shadow: none; }

/* ── Glass table ──────────────────────────────────────────────────────────── */
[data-theme="light"] .glass-table {
    color: #334155;
    --bs-table-bg: transparent;
    --bs-table-hover-bg: rgba(99,102,241,0.045);
    --bs-table-border-color: rgba(99,102,241,0.07);
}
[data-theme="light"] .glass-table thead th {
    color: #4f46e5;
    background: rgba(99,102,241,0.07) !important;
    border-bottom-color: rgba(99,102,241,0.14) !important;
}
[data-theme="light"] .glass-table thead .dt-ordering-asc .dt-column-order::before,
[data-theme="light"] .glass-table thead .dt-ordering-desc .dt-column-order::after { color: #4f46e5; opacity: 1; }
[data-theme="light"] .glass-table td,
[data-theme="light"] .glass-table th { border-color: rgba(99,102,241,0.065); }
[data-theme="light"] .glass-table tbody tr:hover td { background: rgba(99,102,241,0.04) !important; }

/* ── Glass list group ─────────────────────────────────────────────────────── */
[data-theme="light"] .glass-list .list-group-item          { background: rgba(255,255,255,0.60); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-color: rgba(99,102,241,0.12); color: #334155; }
[data-theme="light"] .glass-list .list-group-item:hover    { background: rgba(99,102,241,0.06); }
[data-theme="light"] .glass-list .list-group-item.glass-unread { background: rgba(99,102,241,0.10); border-color: rgba(99,102,241,0.25); }

/* ── Glass stat box ───────────────────────────────────────────────────────── */
[data-theme="light"] .glass-stat-box {
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(99,102,241,0.15);
    box-shadow: 0 2px 10px rgba(99,102,241,0.08);
}

/* ── Glass strip ──────────────────────────────────────────────────────────── */
[data-theme="light"] .glass-strip {
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid rgba(99,102,241,0.18);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(99,102,241,0.12), 0 1px 4px rgba(0,0,0,0.05);
}

/* ── Glass VR / progress ──────────────────────────────────────────────────── */
[data-theme="light"] .glass-vr      { background: rgba(99,102,241,0.18); }
[data-theme="light"] .glass-progress { background: rgba(99,102,241,0.12); }

/* ── Glass chart box (legacy) ─────────────────────────────────────────────── */
[data-theme="light"] .glass-chart-box {
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(99,102,241,0.12);
}
/* ── Performance chart card (light) ──────────────────────────────────────── */
[data-theme="light"] .perf-card-header {
    background: linear-gradient(135deg, rgba(37,99,235,0.06) 0%, rgba(255,255,255,0.75) 100%);
    border-bottom-color: rgba(37,99,235,0.12);
}
[data-theme="light"] .perf-header-icon { background: rgba(37,99,235,0.10); border-color: rgba(37,99,235,0.22); color: #1d4ed8; box-shadow: 0 0 14px rgba(37,99,235,0.12); }
[data-theme="light"] .perf-header-title { color: #0f172a; }
[data-theme="light"] .perf-header-sub   { color: #64748b; }
[data-theme="light"] .perf-select-label { color: #475569; }
[data-theme="light"] .perf-select { background: rgba(255,255,255,0.85) !important; border-color: rgba(37,99,235,0.22) !important; color: #0f172a !important; }
[data-theme="light"] .chart-box-green  { background: linear-gradient(145deg, rgba(0,119,204,0.05) 0%, rgba(255,255,255,0.75) 100%); border-color: rgba(0,119,204,0.18); }
[data-theme="light"] .chart-box-green:hover  { border-color: rgba(0,119,204,0.32); box-shadow: 0 0 24px rgba(0,119,204,0.08); }
[data-theme="light"] .chart-box-indigo { background: linear-gradient(145deg, rgba(99,102,241,0.05) 0%, rgba(255,255,255,0.75) 100%); border-color: rgba(99,102,241,0.18); }
[data-theme="light"] .chart-box-indigo:hover { border-color: rgba(99,102,241,0.32); box-shadow: 0 0 24px rgba(99,102,241,0.08); }
[data-theme="light"] .chart-box-purple { background: linear-gradient(145deg, rgba(99,102,241,0.05) 0%, rgba(255,255,255,0.75) 100%); border-color: rgba(139,92,246,0.18); }
[data-theme="light"] .chart-box-purple:hover { border-color: rgba(139,92,246,0.32); box-shadow: 0 0 24px rgba(139,92,246,0.08); }
[data-theme="light"] .chart-box-title { color: #0f172a; }
[data-theme="light"] .chart-box-sub   { color: #64748b; }
[data-theme="light"] .chart-icon-green  { background: rgba(22,163,74,0.10); border-color: rgba(22,163,74,0.22); color: #15803d; }
[data-theme="light"] .chart-icon-indigo { background: rgba(99,102,241,0.10); border-color: rgba(99,102,241,0.22); color: #4f46e5; }
[data-theme="light"] .chart-icon-purple { background: rgba(139,92,246,0.10); border-color: rgba(139,92,246,0.22); color: #7c3aed; }
[data-theme="light"] .chart-box-amber { background: linear-gradient(145deg, rgba(217,119,6,0.05) 0%, rgba(255,255,255,0.75) 100%); border-color: rgba(217,119,6,0.18); }
[data-theme="light"] .chart-box-amber:hover { border-color: rgba(217,119,6,0.32); box-shadow: 0 0 24px rgba(217,119,6,0.08); }
[data-theme="light"] .chart-icon-amber  { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.22); color: #b45309; }

/* Master card header & master performance header */
[data-theme="light"] .master-card-header { background: linear-gradient(135deg, rgba(245,158,11,0.06) 0%, rgba(255,255,255,0.75) 100%); border-bottom-color: rgba(245,158,11,0.12); }
[data-theme="light"] .master-card-icon { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.24); color: #d97706; box-shadow: none; }
[data-theme="light"] .master-card-title { color: #0f172a; }
[data-theme="light"] .master-card-sub   { color: rgba(71,85,105,0.65); }
[data-theme="light"] .master-card-viewall-btn { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.20); color: #b45309; }
[data-theme="light"] .master-card-viewall-btn:hover { background: rgba(245,158,11,0.14); color: #92400e; }
[data-theme="light"] .master-perf-header { background: linear-gradient(135deg, rgba(245,158,11,0.06) 0%, rgba(255,255,255,0.75) 100%); border-bottom-color: rgba(245,158,11,0.12); }
[data-theme="light"] .master-perf-icon { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.24); color: #d97706; box-shadow: none; }
[data-theme="light"] .master-perf-title { color: #0f172a; }
[data-theme="light"] .master-perf-sub   { color: rgba(71,85,105,0.60); }
[data-theme="light"] .master-select { border-color: rgba(217,119,6,0.24) !important; }

/* Indigo welcome card accent */
[data-theme="light"] .glass-card-accent-indigo { border-color: rgba(99,102,241,0.22) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.08), 0 0 28px rgba(99,102,241,0.10) !important; }

/* ── Glass welcome icon ───────────────────────────────────────────────────── */
[data-theme="light"] .glass-welcome-icon {
    background: linear-gradient(135deg, rgba(99,102,241,0.16), rgba(139,92,246,0.12));
    border: 1px solid rgba(99,102,241,0.28);
    box-shadow: 0 0 30px rgba(99,102,241,0.22), 0 0 60px rgba(99,102,241,0.08);
}

/* ── Glass icon box ───────────────────────────────────────────────────────── */
[data-theme="light"] .glass-icon-box {
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(99,102,241,0.18);
    box-shadow: 0 2px 8px rgba(99,102,241,0.10);
}

/* ── Glass modal ──────────────────────────────────────────────────────────── */
[data-theme="light"] .glass-modal .modal-content {
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(24px) saturate(1.6);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    border: 1px solid rgba(99,102,241,0.20);
    box-shadow: 0 20px 60px rgba(99,102,241,0.18), 0 4px 16px rgba(0,0,0,0.08);
    color: #0f172a;
}
[data-theme="light"] .glass-modal .modal-header  { background: rgba(99,102,241,0.05); border-bottom-color: rgba(99,102,241,0.12); border-radius: 16px 16px 0 0; }
[data-theme="light"] .glass-modal .modal-footer  { background: rgba(99,102,241,0.04); border-top-color: rgba(99,102,241,0.12); border-radius: 0 0 16px 16px; }
[data-theme="light"] .glass-modal .modal-title   { color: #0f172a; }
[data-theme="light"] .glass-modal .btn-close     { filter: none; }

/* ── TempData alerts (theme-aware) ───────────────────────────────────────── */
.tempdata-alert {
    border-radius: 12px;
    font-size: 0.88rem;
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
/* Dark theme (default) */
.tempdata-alert-success {
    background: rgba(16,185,129,0.10);
    border: 1px solid rgba(16,185,129,0.28);
    color: #86efac;
    box-shadow: 0 4px 20px rgba(16,185,129,0.10);
}
.tempdata-alert-success .btn-close { filter: invert(1) brightness(.8); }

.tempdata-alert-error {
    background: rgba(239,68,68,0.10);
    border: 1px solid rgba(239,68,68,0.28);
    color: #fca5a5;
    box-shadow: 0 4px 20px rgba(239,68,68,0.10);
}
.tempdata-alert-error .btn-close { filter: invert(1) brightness(.8); }

.tempdata-alert-info {
    background: rgba(59,130,246,0.10);
    border: 1px solid rgba(59,130,246,0.28);
    color: #bfdbfe;
    box-shadow: 0 4px 20px rgba(59,130,246,0.10);
}
.tempdata-alert-info .btn-close { filter: invert(1) brightness(.8); }

/* Light theme overrides */
[data-theme="light"] .tempdata-alert-success {
    background: rgba(220,252,231,0.90);
    border-color: rgba(22,163,74,0.40);
    color: #14532d;
    box-shadow: 0 4px 16px rgba(22,163,74,0.12);
}
[data-theme="light"] .tempdata-alert-success .btn-close { filter: none; }

[data-theme="light"] .tempdata-alert-error {
    background: rgba(254,226,226,0.90);
    border-color: rgba(220,38,38,0.40);
    color: #7f1d1d;
    box-shadow: 0 4px 16px rgba(220,38,38,0.12);
}
[data-theme="light"] .tempdata-alert-error .btn-close { filter: none; }

[data-theme="light"] .tempdata-alert-info {
    background: rgba(219,234,254,0.90);
    border-color: rgba(37,99,235,0.40);
    color: #1e3a8a;
    box-shadow: 0 4px 16px rgba(37,99,235,0.12);
}
[data-theme="light"] .tempdata-alert-info .btn-close { filter: none; }

/* ── Glass alert ──────────────────────────────────────────────────────────── */
[data-theme="light"] .glass-alert-warn {
    background: rgba(254,243,199,0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(245,158,11,0.35);
    color: #92400e;
    box-shadow: 0 4px 20px rgba(245,158,11,0.16);
}
[data-theme="light"] .glass-alert-warn .alert-link { color: #b45309; }
[data-theme="light"] .glass-alert-warn .btn-close  { filter: none; }

/* ── Private master share link box ──────────────────────────────────────── */
.share-link-box {
    border-color: rgba(251,191,36,0.28) !important;
    background: rgba(245,158,11,0.06) !important;
}
.share-link-icon-box  { background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.28); }
.share-link-icon      { color: #fbbf24; }
.share-link-title     { color: #fde68a; }
.share-link-input     { background: rgba(255,255,255,0.05); border-color: rgba(251,191,36,0.22); color: #cbd5e1; }
.share-link-copy-btn  { background: rgba(251,191,36,0.14); border: 1px solid rgba(251,191,36,0.30); color: #fde68a; }
.share-link-hint      { color: rgba(148,163,184,0.70); }

[data-theme="light"] .share-link-box {
    border-color: rgba(180,83,9,0.35) !important;
    background: rgba(254,243,199,0.65) !important;
}
[data-theme="light"] .share-link-icon-box  { background: rgba(251,191,36,0.18); border-color: rgba(180,83,9,0.30); }
[data-theme="light"] .share-link-icon      { color: #b45309; }
[data-theme="light"] .share-link-title     { color: #92400e; }
[data-theme="light"] .share-link-input     { background: rgba(255,255,255,0.80) !important; border-color: rgba(180,83,9,0.35) !important; color: #1e293b !important; }
[data-theme="light"] .share-link-copy-btn  { background: rgba(180,83,9,0.12); border: 1px solid rgba(180,83,9,0.35); color: #92400e; }
[data-theme="light"] .share-link-hint      { color: #64748b; }

/* ── Glass tabs ───────────────────────────────────────────────────────────── */
[data-theme="light"] .glass-tabs                              { border-bottom-color: rgba(99,102,241,0.18); }
[data-theme="light"] .glass-tabs .nav-link                   { color: #64748b; }
[data-theme="light"] .glass-tabs .nav-link:hover             { color: #3730a3; border-color: rgba(99,102,241,0.18) rgba(99,102,241,0.18) transparent; background: rgba(99,102,241,0.06); }
[data-theme="light"] .glass-tabs .nav-link.active            { color: #4f46e5; background: rgba(99,102,241,0.10); border-color: rgba(99,102,241,0.25) rgba(99,102,241,0.25) transparent; font-weight: 600; box-shadow: 0 -2px 12px rgba(99,102,241,0.12); }
[data-theme="light"] .glass-tab-content                      { background: rgba(255,255,255,0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: rgba(99,102,241,0.14); }

/* ── Glass inputs & selects ───────────────────────────────────────────────── */
[data-theme="light"] .glass-input {
    background: rgba(255,255,255,0.75) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(99,102,241,0.22) !important;
    color: #0f172a !important;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(99,102,241,0.07), inset 0 1px 0 rgba(255,255,255,0.90);
}
[data-theme="light"] .glass-input option {
    background: #ffffff;
    color: #0f172a;
}
[data-theme="light"] .glass-input:focus {
    background: rgba(255,255,255,0.90) !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.18), 0 2px 8px rgba(99,102,241,0.12) !important;
    color: #0f172a !important;
}
[data-theme="light"] .glass-input::placeholder                              { color: #94a3b8; }
[data-theme="light"] .glass-input::-webkit-calendar-picker-indicator       { filter: none; }
[data-theme="light"] .glass-input[readonly]                                 { background: rgba(248,250,252,0.80) !important; }
[data-theme="light"] .glass-input.is-invalid                               { border-color: rgba(220,38,38,0.55) !important; }

[data-theme="light"] .glass-select {
    background: rgba(255,255,255,0.75) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(99,102,241,0.22) !important;
    color: #0f172a !important;
    box-shadow: 0 2px 8px rgba(99,102,241,0.07);
}
[data-theme="light"] .glass-select option            { background: #ffffff; color: #0f172a; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
[data-theme="light"] .btn-glow-primary,
[data-theme="light"] .btn-glow-blue {
    color: #4f46e5;
    border-color: rgba(99,102,241,0.40);
    background: rgba(99,102,241,0.09);
    box-shadow: 0 0 8px rgba(99,102,241,0.14);
}
[data-theme="light"] .btn-glow-primary:hover,
[data-theme="light"] .btn-glow-blue:hover {
    color: #4338ca;
    border-color: rgba(99,102,241,0.70);
    background: rgba(99,102,241,0.15);
    box-shadow: 0 0 20px rgba(99,102,241,0.30);
}
[data-theme="light"] .btn-glow-green {
    color: #0063b0;
    border-color: rgba(0,119,204,0.40);
    background: rgba(0,119,204,0.09);
    box-shadow: 0 0 8px rgba(0,119,204,0.12);
}
[data-theme="light"] .btn-glow-green:hover {
    color: #004f8f;
    border-color: rgba(0,119,204,0.70);
    background: rgba(0,119,204,0.15);
    box-shadow: 0 0 20px rgba(0,119,204,0.25);
    text-shadow: none;
}
[data-theme="light"] .btn-glow-amber {
    color: #b45309;
    border-color: rgba(180,83,9,0.40);
    background: rgba(245,158,11,0.09);
    box-shadow: 0 0 8px rgba(217,119,6,0.12);
}
[data-theme="light"] .btn-glow-amber:hover {
    color: #92400e;
    border-color: rgba(180,83,9,0.70);
    background: rgba(245,158,11,0.15);
    box-shadow: 0 0 20px rgba(217,119,6,0.25);
    text-shadow: none;
}

[data-theme="light"] .btn-glass {
    background: rgba(255,255,255,0.70);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: rgba(99,102,241,0.20);
    color: #64748b;
    box-shadow: 0 2px 6px rgba(99,102,241,0.08);
}
[data-theme="light"] .btn-glass:hover {
    background: rgba(255,255,255,0.85);
    border-color: rgba(99,102,241,0.40);
    color: #334155;
    box-shadow: 0 4px 12px rgba(99,102,241,0.14);
}
[data-theme="light"] .btn-glass.active {
    background: rgba(99,102,241,0.12);
    border-color: rgba(99,102,241,0.45);
    color: #4f46e5;
    text-shadow: none;
    box-shadow: 0 0 14px rgba(99,102,241,0.20);
}

/* ── Badge glass variants ─────────────────────────────────────────────────── */
[data-theme="light"] .badge-glass-green { background: rgba(22,163,74,0.12); color: #15803d; border: 1px solid rgba(22,163,74,0.30); text-shadow: 0 0 8px rgba(22,163,74,0.22); box-shadow: 0 0 8px rgba(22,163,74,0.12); }
[data-theme="light"] .badge-glass-red   { background: rgba(220,38,38,0.10); color: #dc2626; border: 1px solid rgba(220,38,38,0.28); box-shadow: 0 0 8px rgba(220,38,38,0.10); }
[data-theme="light"] .badge-glass-grey  { background: rgba(100,116,139,0.10); color: #475569; border: 1px solid rgba(100,116,139,0.22); }
[data-theme="light"] .badge-glass-amber { background: rgba(217,119,6,0.10); color: #b45309; border: 1px solid rgba(217,119,6,0.28); box-shadow: 0 0 8px rgba(217,119,6,0.10); }
[data-theme="light"] .badge-glass-blue  { background: rgba(37,99,235,0.10); color: #1d4ed8; border: 1px solid rgba(37,99,235,0.25); box-shadow: 0 0 8px rgba(37,99,235,0.10); }
[data-theme="light"] .badge-glass-buy   { background: rgba(22,163,74,0.12); color: #15803d; text-shadow: 0 0 8px rgba(22,163,74,0.22); }
[data-theme="light"] .badge-glass-sell  { background: rgba(220,38,38,0.10); color: #dc2626; }

/* ── DataTables — light mode inside .dashboard-page ──────────────────────── */
[data-theme="light"] .dashboard-page .dt-layout-row:first-child,
[data-theme="light"] .dashboard-page .dataTables_wrapper .top {
    background: rgba(248,250,252,0.80);
    border-color: rgba(0,0,0,0.07);
}
[data-theme="light"] .dashboard-page .dt-input,
[data-theme="light"] .dashboard-page .dt-search input,
[data-theme="light"] .dashboard-page .dt-length select,
[data-theme="light"] .dashboard-page .dataTables_filter input,
[data-theme="light"] .dashboard-page .dataTables_length select {
    background-color: rgba(255,255,255,0.92) !important;
    background:       rgba(255,255,255,0.92) !important;
    border: 1px solid rgba(99,102,241,0.22) !important;
    color: #334155 !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 4px rgba(99,102,241,0.08) !important;
}
[data-theme="light"] .dashboard-page .dt-input:focus,
[data-theme="light"] .dashboard-page .dt-search input:focus,
[data-theme="light"] .dashboard-page .dt-length select:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.14) !important;
    background-color: #fff !important;
    background: #fff !important;
}
[data-theme="light"] .dashboard-page .dt-search input::placeholder { color: rgba(100,116,139,0.55) !important; }
[data-theme="light"] .dashboard-page .dt-length select option { background: #fff; color: #0f172a; }
[data-theme="light"] .dashboard-page .dt-info,
[data-theme="light"] .dashboard-page .dt-length label,
[data-theme="light"] .dashboard-page .dt-search label,
[data-theme="light"] .dashboard-page .dataTables_info,
[data-theme="light"] .dashboard-page .dataTables_filter label,
[data-theme="light"] .dashboard-page .dataTables_length label { color: #64748b !important; font-size: .78rem !important; }
[data-theme="light"] .dashboard-page .dt-paging .page-link,
[data-theme="light"] .dashboard-page .dataTables_paginate .page-link {
    background: rgba(255,255,255,0.80);
    border-color: rgba(99,102,241,0.18);
    color: #64748b; font-size: .8rem;
    border-radius: 8px !important;
    box-shadow: 0 1px 4px rgba(99,102,241,0.07);
    transition: all .18s;
}
[data-theme="light"] .dashboard-page .dt-paging .page-link:hover,
[data-theme="light"] .dashboard-page .dataTables_paginate .page-link:hover {
    background: rgba(99,102,241,0.08);
    border-color: rgba(99,102,241,0.35); color: #4f46e5;
    box-shadow: 0 2px 10px rgba(99,102,241,0.14);
}
[data-theme="light"] .dashboard-page .dt-paging .page-item.active .page-link,
[data-theme="light"] .dashboard-page .dataTables_paginate .page-item.active .page-link {
    background: rgba(79,70,229,0.90) !important;
    border-color: #4f46e5 !important; color: #fff !important;
    box-shadow: 0 0 14px rgba(99,102,241,0.32) !important; font-weight: 700;
}
[data-theme="light"] .dashboard-page .dt-paging .page-item.disabled .page-link,
[data-theme="light"] .dashboard-page .dataTables_paginate .page-item.disabled .page-link {
    background: rgba(248,250,252,0.70) !important;
    border-color: rgba(99,102,241,0.08) !important; color: #cbd5e1 !important;
    box-shadow: none !important;
}
[data-theme="light"] .dashboard-page .dt-processing {
    background: rgba(255,255,255,0.95) !important;
    color: #475569 !important; border-color: rgba(99,102,241,0.18) !important;
}

/* =============================================================================
   LIGHT THEME — Hardcoded dark-color inline style overrides
   Many Razor views use inline style="color:#f1f5f9" etc. (dark-theme values).
   These CSS attribute selectors override them in light theme.
   ============================================================================= */

[data-theme="light"] [style*="color:#f1f5f9"]          { color: #0f172a !important; }
[data-theme="light"] [style*="color:#e2e8f0"]          { color: #1e293b !important; }
[data-theme="light"] [style*="color:#cbd5e1"]          { color: #334155 !important; }
[data-theme="light"] [style*="color:#949494"]          { color: #475569 !important; }
[data-theme="light"] [style*="color:#94a3b8"]          { color: #475569 !important; }
[data-theme="light"] [style*="color:rgba(148,163,184"] { color: #475569 !important; }
[data-theme="light"] [style*="color:rgba(203,213,225"] { color: #334155 !important; }

/* ── Glass modal form inputs (overrides inline <style> block in views) ─────── */
[data-theme="light"] .glass-modal .form-control,
[data-theme="light"] .glass-modal .form-select {
    background: rgba(255,255,255,0.85) !important;
    border: 1px solid rgba(99,102,241,0.22) !important;
    color: #0f172a !important;
    border-radius: 8px;
}
[data-theme="light"] .glass-modal .form-control::placeholder { color: #94a3b8 !important; }
[data-theme="light"] .glass-modal .form-control:focus,
[data-theme="light"] .glass-modal .form-select:focus {
    background: rgba(255,255,255,0.95) !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.15) !important;
    color: #0f172a !important;
}
[data-theme="light"] .glass-modal .form-label { color: #374151 !important; }

/* ── MyDetails page tab nav + DataTable inputs (overrides inline <style>) ─── */
[data-theme="light"] #masterTabs .nav-link,
[data-theme="light"] #copierTabs .nav-link {
    color: #64748b !important;
    border-bottom-color: transparent !important;
    text-shadow: none !important;
}
[data-theme="light"] #masterTabs .nav-link:hover,
[data-theme="light"] #copierTabs .nav-link:hover {
    color: #3730a3 !important;
    border-bottom-color: rgba(99,102,241,0.35) !important;
}
[data-theme="light"] #masterTabs .nav-link.active,
[data-theme="light"] #copierTabs .nav-link.active {
    color: #4f46e5 !important;
    border-bottom-color: #4f46e5 !important;
    text-shadow: 0 0 10px rgba(99,102,241,0.25) !important;
}

/* DataTable search/length inputs inside detail pages */
[data-theme="light"] [id$="_wrapper"] .dt-search input,
[data-theme="light"] [id$="_wrapper"] .dt-length select {
    background: rgba(255,255,255,0.85) !important;
    border: 1px solid rgba(99,102,241,0.22) !important;
    color: #334155 !important;
    border-radius: 8px;
}

/* DataTable pagination/info overrides (from inline <style> blocks) */
[data-theme="light"] .dt-info               { color: #64748b !important; }
[data-theme="light"] .page-link             { background: rgba(255,255,255,0.80) !important; border-color: rgba(99,102,241,0.18) !important; color: #64748b !important; }
[data-theme="light"] .page-link:hover       { background: rgba(99,102,241,0.08) !important; border-color: rgba(99,102,241,0.35) !important; color: #4f46e5 !important; }
[data-theme="light"] .page-item.active .page-link  { background: rgba(79,70,229,0.90) !important; border-color: #4f46e5 !important; color: #ffffff !important; }
[data-theme="light"] .page-item.disabled .page-link { background: rgba(248,250,252,0.70) !important; color: #94a3b8 !important; }
[data-theme="light"] .dataTables_processing { background: rgba(255,255,255,0.92) !important; color: #334155 !important; border-radius: 8px; }
/* -- Red glow action button ------------------------------------------------ */
.btn-glow-red {
    color: #f87171;
    border: 1px solid rgba(239,68,68,0.35);
    background: rgba(239,68,68,0.08);
    font-size: .8rem;
    transition: all .2s ease;
}
.btn-glow-red:hover {
    color: #fca5a5;
    border-color: rgba(239,68,68,0.65);
    background: rgba(239,68,68,0.14);
    box-shadow: 0 0 18px rgba(239,68,68,0.30);
    text-shadow: 0 0 8px rgba(239,68,68,0.40);
}
.btn-glow-red:disabled, .btn-glow-red.disabled {
    color: #f87171;
    border-color: rgba(239,68,68,0.25);
    background: rgba(239,68,68,0.05);
    opacity: 0.55;
    pointer-events: none;
}

[data-theme="light"] .btn-glow-red {
    color: #dc2626;
    border-color: rgba(220,38,38,0.35);
    background: rgba(220,38,38,0.07);
}
[data-theme="light"] .btn-glow-red:hover {
    color: #b91c1c;
    border-color: rgba(220,38,38,0.65);
    background: rgba(220,38,38,0.13);
    box-shadow: 0 0 18px rgba(220,38,38,0.25);
    text-shadow: none;
}
[data-theme="light"] .btn-glow-red:disabled { color: #dc2626; opacity: 0.45; }

/* -- Glass input-group addon ----------------------------------------------- */
.glass-input-addon {
    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: rgba(148,163,184,0.85) !important;
    border-right: none !important;
}
[data-theme="light"] .glass-input-addon {
    background: rgba(255,255,255,0.70) !important;
    border: 1px solid rgba(99,102,241,0.20) !important;
    color: #475569 !important;
    border-right: none !important;
}

/* =============================================================================
   DASHBOARD REDESIGN — Modern Fintech Components
   ============================================================================= */

/* ── Live indicator ──────────────────────────────────────────────────────────── */
.live-dot-wrap {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: .25rem .6rem;
    background: rgba(14,155,255,0.07);
    border: 1px solid rgba(14,155,255,0.18);
    border-radius: 20px;
}
.live-dot {
    width: 7px;
    height: 7px;
    background: #0e9bff;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(14,155,255,0.70);
    animation: livePulse 2s ease-in-out infinite;
    flex-shrink: 0;
}
.live-label {
    font-size: .72rem;
    font-weight: 600;
    color: #0e9bff;
    text-shadow: 0 0 8px rgba(14,155,255,0.40);
    letter-spacing: .04em;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(14,155,255,0.70); }
    50%       { opacity: .5; box-shadow: 0 0 12px rgba(14,155,255,0.30); }
}

/* ── Metric cards ────────────────────────────────────────────────────────────── */
.metric-card {
    --bs-card-bg: transparent;
    background: rgba(255,255,255,0.05) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 20px !important;
    box-shadow: 0 4px 32px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.08);
    color: #e2e8f0;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    position: relative;
    overflow: hidden;
}
/* always-on top accent shimmer — full brightness on hover */
.metric-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    border-radius: 20px 20px 0 0;
    opacity: 0.35;
    transition: opacity 0.22s ease;
}
/* decorative glow orb in top-right corner */
.metric-card::after {
    content: '';
    position: absolute;
    top: -24px; right: -24px;
    width: 130px; height: 130px;
    border-radius: 50%;
    opacity: 0.07;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.metric-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.12);
}
.metric-card:hover::before { opacity: 1; }
.metric-card:hover::after  { opacity: 0.14; transform: scale(1.1); }

/* Accent colours */
.metric-accent-green::before { background: linear-gradient(90deg, transparent, rgba(16,185,129,0.95), transparent); }
.metric-accent-green::after  { background: radial-gradient(circle, #10b981, transparent 70%); }
.metric-accent-green { border: 1px solid rgba(16,185,129,0.20) !important; background: linear-gradient(145deg, rgba(16,185,129,0.08) 0%, rgba(255,255,255,0.04) 100%) !important; }
.metric-accent-green:hover { border-color: rgba(16,185,129,0.42) !important; box-shadow: 0 16px 48px rgba(0,0,0,0.50), 0 0 0 1px rgba(16,185,129,0.12), inset 0 1px 0 rgba(255,255,255,0.12) !important; }

.metric-accent-blue::before { background: linear-gradient(90deg, transparent, rgba(59,130,246,0.95), transparent); }
.metric-accent-blue::after  { background: radial-gradient(circle, #3b82f6, transparent 70%); }
.metric-accent-blue { border: 1px solid rgba(59,130,246,0.20) !important; background: linear-gradient(145deg, rgba(59,130,246,0.08) 0%, rgba(255,255,255,0.04) 100%) !important; }
.metric-accent-blue:hover { border-color: rgba(59,130,246,0.42) !important; box-shadow: 0 16px 48px rgba(0,0,0,0.50), 0 0 0 1px rgba(59,130,246,0.12), inset 0 1px 0 rgba(255,255,255,0.12) !important; }

.metric-accent-purple::before { background: linear-gradient(90deg, transparent, rgba(139,92,246,0.95), transparent); }
.metric-accent-purple::after  { background: radial-gradient(circle, #8b5cf6, transparent 70%); }
.metric-accent-purple { border: 1px solid rgba(139,92,246,0.20) !important; background: linear-gradient(145deg, rgba(139,92,246,0.08) 0%, rgba(255,255,255,0.04) 100%) !important; }
.metric-accent-purple:hover { border-color: rgba(139,92,246,0.42) !important; box-shadow: 0 16px 48px rgba(0,0,0,0.50), 0 0 0 1px rgba(139,92,246,0.12), inset 0 1px 0 rgba(255,255,255,0.12) !important; }

.metric-accent-amber::before { background: linear-gradient(90deg, transparent, rgba(245,158,11,0.95), transparent); }
.metric-accent-amber::after  { background: radial-gradient(circle, #f59e0b, transparent 70%); }
.metric-accent-amber { border: 1px solid rgba(245,158,11,0.20) !important; background: linear-gradient(145deg, rgba(245,158,11,0.08) 0%, rgba(255,255,255,0.04) 100%) !important; }
.metric-accent-amber:hover { border-color: rgba(245,158,11,0.42) !important; box-shadow: 0 16px 48px rgba(0,0,0,0.50), 0 0 0 1px rgba(245,158,11,0.12), inset 0 1px 0 rgba(255,255,255,0.12) !important; }

.metric-accent-red::before { background: linear-gradient(90deg, transparent, rgba(239,68,68,0.95), transparent); }
.metric-accent-red::after  { background: radial-gradient(circle, #ef4444, transparent 70%); }
.metric-accent-red { border: 1px solid rgba(239,68,68,0.20) !important; background: linear-gradient(145deg, rgba(239,68,68,0.08) 0%, rgba(255,255,255,0.04) 100%) !important; }
.metric-accent-red:hover { border-color: rgba(239,68,68,0.42) !important; box-shadow: 0 16px 48px rgba(0,0,0,0.50), 0 0 0 1px rgba(239,68,68,0.12), inset 0 1px 0 rgba(255,255,255,0.12) !important; }

/* ── Metric icon boxes ───────────────────────────────────────────────────────── */
.metric-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.metric-card:hover .metric-icon-box { transform: scale(1.12); }

.metric-icon-green  { background: rgba(16,185,129,0.15);  border: 1px solid rgba(16,185,129,0.30);  color: #10b981; box-shadow: 0 0 20px rgba(16,185,129,0.25), inset 0 1px 0 rgba(16,185,129,0.20); }
.metric-icon-blue   { background: rgba(59,130,246,0.15);  border: 1px solid rgba(59,130,246,0.30);  color: #60a5fa; box-shadow: 0 0 20px rgba(59,130,246,0.25), inset 0 1px 0 rgba(59,130,246,0.20); }
.metric-icon-purple { background: rgba(139,92,246,0.15);  border: 1px solid rgba(139,92,246,0.30);  color: #a78bfa; box-shadow: 0 0 20px rgba(139,92,246,0.25), inset 0 1px 0 rgba(139,92,246,0.20); }
.metric-icon-amber  { background: rgba(245,158,11,0.15);  border: 1px solid rgba(245,158,11,0.30);  color: #fbbf24; box-shadow: 0 0 20px rgba(245,158,11,0.25), inset 0 1px 0 rgba(245,158,11,0.20); }
.metric-icon-red    { background: rgba(239,68,68,0.15);   border: 1px solid rgba(239,68,68,0.30);   color: #f87171; box-shadow: 0 0 20px rgba(239,68,68,0.25), inset 0 1px 0 rgba(239,68,68,0.20); }

/* ── Large metric value ──────────────────────────────────────────────────────── */
.metric-value-lg {
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.03em;
}

/* ── Trend indicators ────────────────────────────────────────────────────────── */
.metric-trend-up {
    font-size: .7rem;
    font-weight: 600;
    color: #10b981;
    background: rgba(16,185,129,0.10);
    border: 1px solid rgba(16,185,129,0.20);
    border-radius: 20px;
    padding: .15rem .5rem;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.metric-trend-down {
    font-size: .7rem;
    font-weight: 600;
    color: #f87171;
    background: rgba(239,68,68,0.10);
    border: 1px solid rgba(239,68,68,0.20);
    border-radius: 20px;
    padding: .15rem .5rem;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* ── Win rate bar ────────────────────────────────────────────────────────────── */
.win-rate-bar {
    height: 5px;
    background: rgba(255,255,255,0.10);
    border-radius: 3px;
    overflow: hidden;
}
.win-rate-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #34d399, rgba(16,185,129,0.55));
    border-radius: 3px;
    box-shadow: 0 0 8px rgba(16,185,129,0.50);
    transition: width 0.6s ease;
}

/* ── Positions strip ─────────────────────────────────────────────────────────── */
.positions-strip {
    background: linear-gradient(135deg, rgba(59,130,246,0.07) 0%, rgba(255,255,255,0.04) 60%, rgba(99,102,241,0.05) 100%);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(59,130,246,0.22);
    border-radius: 18px;
    padding: 1rem 1.5rem;
    box-shadow: 0 4px 36px rgba(0,0,0,.42), 0 0 40px rgba(59,130,246,.12);
    position: relative;
    overflow: hidden;
}
/* top shimmer line */
.positions-strip::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(96,165,250,0.70) 35%, rgba(139,92,246,0.60) 65%, transparent 100%);
}
/* ambient glow blob */
.positions-strip::after {
    content: '';
    position: absolute;
    top: -40px; left: -40px;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59,130,246,0.12), transparent 70%);
    pointer-events: none;
}
/* profit/loss tint variants */
.positions-strip.strip-profit {
    border-color: rgba(16,185,129,0.22);
    box-shadow: 0 4px 36px rgba(0,0,0,.42), 0 0 40px rgba(16,185,129,.10);
}
.positions-strip.strip-profit::before {
    background: linear-gradient(90deg, transparent 0%, rgba(16,185,129,0.65) 35%, rgba(52,211,153,0.55) 65%, transparent 100%);
}
.positions-strip.strip-profit::after {
    background: radial-gradient(circle, rgba(16,185,129,0.10), transparent 70%);
}
.positions-strip.strip-loss {
    border-color: rgba(239,68,68,0.22);
    box-shadow: 0 4px 36px rgba(0,0,0,.42), 0 0 40px rgba(239,68,68,.10);
}
.positions-strip.strip-loss::before {
    background: linear-gradient(90deg, transparent 0%, rgba(239,68,68,0.60) 35%, rgba(248,113,113,0.50) 65%, transparent 100%);
}
.positions-strip.strip-loss::after {
    background: radial-gradient(circle, rgba(239,68,68,0.10), transparent 70%);
}

/* layout row: icon | stats grid | CTA button */
.positions-strip-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.positions-stats-grid {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    flex: 1 1 auto;
}
.positions-strip-cta { margin-left: auto; }

/* icon */
.positions-icon-wrap {
    width: 46px;
    height: 46px;
    background: rgba(59,130,246,0.15);
    border: 1px solid rgba(59,130,246,0.32);
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
    font-size: 1.15rem;
    flex-shrink: 0;
    box-shadow: 0 0 22px rgba(59,130,246,0.28), inset 0 1px 0 rgba(59,130,246,0.20);
}

/* stat label / value */
.positions-stat { display: flex; flex-direction: column; gap: 2px; }
.positions-stat-label {
    color: rgba(148,163,184,0.75);
    font-size: 0.63rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    font-weight: 700;
}
.positions-stat-value {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.03em;
}

/* divider */
.positions-divider {
    width: 1px;
    min-height: 36px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.18), transparent);
    border-radius: 1px;
    flex-shrink: 0;
}

/* ── Floating PnL pulse ──────────────────────────────────────────────────────── */
.floating-pnl-pulse {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
    font-weight: 700;
    padding: .28rem .7rem .28rem .55rem;
    border-radius: 20px;
    letter-spacing: 0.03em;
    animation: floatPulse 2s ease-in-out infinite;
}
.pulse-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    animation: dotPing 2s ease-in-out infinite;
}
.pulse-green {
    color: #10b981;
    background: rgba(16,185,129,0.12);
    border: 1px solid rgba(16,185,129,0.30);
    box-shadow: 0 0 14px rgba(16,185,129,0.20);
}
.pulse-green .pulse-dot {
    background: #10b981;
    box-shadow: 0 0 6px rgba(16,185,129,0.80);
}
.pulse-red {
    color: #f87171;
    background: rgba(239,68,68,0.12);
    border: 1px solid rgba(239,68,68,0.30);
    box-shadow: 0 0 14px rgba(239,68,68,0.20);
}
.pulse-red .pulse-dot {
    background: #f87171;
    box-shadow: 0 0 6px rgba(239,68,68,0.80);
}
@keyframes floatPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .65; }
}
@keyframes dotPing {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.5); opacity: .6; }
}

/* ── Positions strip — mobile ────────────────────────────────────────────── */
@media (max-width: 576px) {
    .positions-strip { padding: 1rem 1.1rem; }
    .positions-strip-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
    }
    .positions-icon-wrap { align-self: flex-start; }
    .positions-stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.9rem 1rem;
        width: 100%;
    }
    .positions-divider { display: none; }
    .positions-stat-value { font-size: 1.15rem; }
    .positions-strip-cta { margin-left: 0; width: 100%; }
    .positions-monitor-btn { width: 100%; justify-content: center; }
}

/* Trade Monitor button */
.positions-monitor-btn {
    color: #93c5fd;
    border: 1px solid rgba(96,165,250,0.35);
    background: rgba(59,130,246,0.10);
    font-size: .82rem;
    font-weight: 600;
    padding: .45rem 1rem;
    border-radius: 10px;
    transition: all .22s ease;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.positions-monitor-btn:hover {
    color: #bfdbfe;
    border-color: rgba(96,165,250,0.65);
    background: rgba(59,130,246,0.18);
    box-shadow: 0 0 20px rgba(59,130,246,0.30);
    transform: translateY(-1px);
}

/* ── Card header icon boxes ──────────────────────────────────────────────────── */
.card-header-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    flex-shrink: 0;
}
.card-header-icon-blue   { background: rgba(59,130,246,0.15);  color: #60a5fa;  border: 1px solid rgba(59,130,246,0.22); }
.card-header-icon-green  { background: rgba(16,185,129,0.12);     color: #10b981;  border: 1px solid rgba(16,185,129,0.20); }
.card-header-icon-amber  { background: rgba(245,158,11,0.15);  color: #fbbf24;  border: 1px solid rgba(245,158,11,0.22); }
.card-header-icon-purple { background: rgba(139,92,246,0.15);  color: #a78bfa;  border: 1px solid rgba(139,92,246,0.22); }

/* ── Account avatars ─────────────────────────────────────────────────────────── */
.account-avatar {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.account-avatar-master {
    background: linear-gradient(135deg, rgba(245,158,11,0.28), rgba(251,191,36,0.16));
    border: 1px solid rgba(245,158,11,0.30);
    color: #fbbf24;
}

/* ── Indigo accent (welcome card) ────────────────────────────────────────────── */
.glass-card-accent-indigo {
    border-color: rgba(99,102,241,0.20) !important;
    box-shadow: 0 8px 36px rgba(0,0,0,0.42), 0 0 36px rgba(99,102,241,0.12), inset 0 1px 0 rgba(255,255,255,0.08) !important;
    position: relative;
    overflow: hidden;
}
.glass-card-accent-indigo::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(99,102,241,0.85), rgba(139,92,246,0.70), transparent);
    border-radius: 16px 16px 0 0;
    z-index: 1;
}

/* ── Subscriptions card ──────────────────────────────────────────────────────── */
.glass-card-accent-blue {
    border-color: rgba(59,130,246,0.18) !important;
    box-shadow: 0 8px 36px rgba(0,0,0,0.42), 0 0 32px rgba(59,130,246,0.10), inset 0 1px 0 rgba(255,255,255,0.08) !important;
    position: relative;
    overflow: hidden;
}
.glass-card-accent-blue::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(59,130,246,0.85), rgba(99,102,241,0.75), transparent);
    border-radius: 16px 16px 0 0;
    z-index: 1;
}

.subs-card-header {
    background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(255,255,255,0.04) 100%);
    border-bottom: 1px solid rgba(59,130,246,0.14);
    border-radius: 16px 16px 0 0;
    padding: 1rem 1.25rem;
    color: #f1f5f9;
    position: relative;
    z-index: 1;
}

.subs-header-icon {
    width: 36px; height: 36px;
    background: rgba(59,130,246,0.15);
    border: 1px solid rgba(59,130,246,0.32);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #60a5fa; font-size: 1rem;
    box-shadow: 0 0 16px rgba(59,130,246,0.22), inset 0 1px 0 rgba(59,130,246,0.18);
    flex-shrink: 0;
}

.subs-viewall-btn {
    color: #93c5fd;
    border: 1px solid rgba(96,165,250,0.32);
    background: rgba(59,130,246,0.08);
    font-size: .78rem;
    font-weight: 600;
    padding: .35rem .85rem;
    border-radius: 8px;
    transition: all .2s ease;
    white-space: nowrap;
    text-decoration: none;
}
.subs-viewall-btn:hover {
    color: #bfdbfe;
    border-color: rgba(96,165,250,0.60);
    background: rgba(59,130,246,0.15);
    box-shadow: 0 0 16px rgba(59,130,246,0.28);
}

/* Table */
.subs-table {
    color: #cbd5e1;
    --bs-table-bg: transparent;
    --bs-table-border-color: rgba(59,130,246,0.07);
    border-collapse: separate;
    border-spacing: 0;
}
.subs-table thead th {
    color: rgba(148,163,184,.75);
    border-bottom: 1px solid rgba(59,130,246,0.12) !important;
    font-size: 0.62rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 700;
    padding: .65rem 1rem;
    background: rgba(59,130,246,0.04) !important;
    white-space: nowrap;
}
.subs-table td { border-color: rgba(255,255,255,0.05); vertical-align: middle; padding: .85rem 1rem; }
.subs-row { transition: background 0.18s ease; position: relative; }
.subs-row:hover { background: rgba(59,130,246,0.06) !important; }
.subs-row:hover td:first-child { box-shadow: inset 3px 0 0 rgba(59,130,246,0.60); }

/* Master avatar in table */
.subs-master-avatar {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 800;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(245,158,11,0.30), rgba(251,191,36,0.15));
    border: 1px solid rgba(245,158,11,0.35);
    color: #fbbf24;
    box-shadow: 0 0 14px rgba(245,158,11,0.18), inset 0 1px 0 rgba(245,158,11,0.20);
}

.subs-master-name { color: #f1f5f9; font-size: .88rem; line-height: 1.3; }
.subs-copier-name { color: #94a3b8; font-size: .82rem; font-weight: 500; }
.subs-master-sub  { color: rgba(148,163,184,.55); font-size: .65rem; margin-top: 2px; }

/* Fee */
.subs-fee-value {
    color: #10b981;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.02em;
    text-shadow: 0 0 12px rgba(16,185,129,.40);
}

/* Perf % badge */
.subs-perf-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(59,130,246,0.14);
    border: 1px solid rgba(59,130,246,0.30);
    color: #60a5fa;
    font-size: .75rem;
    font-weight: 700;
    padding: .22rem .65rem;
    border-radius: 20px;
    letter-spacing: .02em;
    box-shadow: 0 0 10px rgba(59,130,246,0.15);
}

/* Progress bar */
.subs-progress {
    height: 5px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
}
.subs-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width .4s ease;
}
.subs-bar-ok      { background: linear-gradient(90deg, #10b981, #34d399); box-shadow: 0 0 6px rgba(16,185,129,.45); }
.subs-bar-warn    { background: linear-gradient(90deg, #f59e0b, #fbbf24); box-shadow: 0 0 6px rgba(245,158,11,.45); }
.subs-bar-danger  { background: linear-gradient(90deg, #ef4444, #f87171); box-shadow: 0 0 6px rgba(239,68,68,.45); }

/* Auto-renew badge */
.subs-renew-badge {
    display: inline-flex; align-items: center; gap: 3px;
    background: rgba(16,185,129,0.10);
    border: 1px solid rgba(16,185,129,0.25);
    color: #10b981;
    font-size: .6rem;
    font-weight: 700;
    padding: .1rem .35rem;
    border-radius: 10px;
    white-space: nowrap;
}

/* Manage button */
.subs-manage-btn {
    color: #93c5fd;
    border: 1px solid rgba(96,165,250,0.30);
    background: rgba(59,130,246,0.08);
    font-size: .75rem;
    font-weight: 600;
    padding: .35rem .75rem;
    border-radius: 8px;
    transition: all .2s ease;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex; align-items: center;
}
.subs-manage-btn:hover {
    color: #bfdbfe;
    border-color: rgba(96,165,250,0.60);
    background: rgba(59,130,246,0.16);
    box-shadow: 0 0 14px rgba(59,130,246,0.28);
    transform: translateX(1px);
}

/* ── Symbol chip ─────────────────────────────────────────────────────────────── */
.symbol-chip {
    display: inline-block;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 6px;
    padding: .1rem .45rem;
    font-size: .78rem;
    font-weight: 600;
    color: #e2e8f0;
    letter-spacing: .02em;
}

/* ── Trade type badges (legacy) ──────────────────────────────────────────────── */
.trade-type-badge {
    display: inline-flex;
    align-items: center;
    font-size: .72rem;
    font-weight: 600;
    padding: .18rem .5rem;
    border-radius: 6px;
}
.trade-buy  { background: rgba(16,185,129,0.10);   color: #10b981; border: 1px solid rgba(16,185,129,0.20);   text-shadow: 0 0 8px rgba(16,185,129,0.40); }
.trade-sell { background: rgba(239,68,68,0.12); color: #f87171; border: 1px solid rgba(239,68,68,0.22); }

/* ── Recent Closed Trades card ───────────────────────────────────────────────── */
.glass-card-accent-green {
    border-color: rgba(16,185,129,0.18) !important;
    box-shadow: 0 8px 36px rgba(0,0,0,0.42), 0 0 32px rgba(16,185,129,0.09), inset 0 1px 0 rgba(255,255,255,0.08) !important;
    position: relative;
    overflow: hidden;
}
.glass-card-accent-green::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(16,185,129,0.85), rgba(52,211,153,0.70), transparent);
    border-radius: 16px 16px 0 0;
    z-index: 1;
}

.trades-card-header {
    background: linear-gradient(135deg, rgba(14,155,255,0.07) 0%, rgba(255,255,255,0.04) 100%);
    border-bottom: 1px solid rgba(14,155,255,0.13);
    border-radius: 16px 16px 0 0;
    padding: 1rem 1.25rem;
    position: relative; z-index: 1;
}
.trades-header-icon {
    width: 38px; height: 38px;
    background: rgba(14,155,255,0.14);
    border: 1px solid rgba(14,155,255,0.30);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #0e9bff; font-size: 1rem; flex-shrink: 0;
    box-shadow: 0 0 18px rgba(14,155,255,0.24), inset 0 1px 0 rgba(14,155,255,0.18);
}
.trades-header-title { color: #f1f5f9; font-size: .95rem; font-weight: 700; line-height: 1.3; }
.trades-header-sub   { color: rgba(148,163,184,0.55); font-size: .67rem; letter-spacing: .03em; margin-top: 2px; }

.trades-monitor-btn {
    color: #7fe0f5;
    border: 1px solid rgba(14,155,255,0.30);
    background: rgba(14,155,255,0.08);
    font-size: .78rem; font-weight: 600;
    padding: .38rem .85rem;
    border-radius: 8px;
    transition: all .2s ease;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex; align-items: center;
}
.trades-monitor-btn:hover {
    color: #a7f3d0;
    border-color: rgba(14,155,255,0.55);
    background: rgba(14,155,255,0.15);
    box-shadow: 0 0 18px rgba(14,155,255,0.25);
}

/* Table */
.trades-table {
    color: #cbd5e1;
    --bs-table-bg: transparent;
    --bs-table-border-color: rgba(255,255,255,0.05);
}
.trades-table thead th {
    color: rgba(148,163,184,.72);
    border-bottom: 1px solid rgba(14,155,255,0.12) !important;
    font-size: 0.61rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 700;
    padding: .6rem 1rem;
    background: rgba(14,155,255,0.04) !important;
    white-space: nowrap;
}
.trades-table td { border-color: rgba(255,255,255,0.04); vertical-align: middle; padding: .72rem 1rem; }

/* Row hover with profit/loss left accent */
.trades-row { transition: background .16s ease; position: relative; }
.trades-row:hover { background: rgba(255,255,255,0.03) !important; }
.trades-row-win:hover  { background: rgba(16,185,129,0.05) !important; }
.trades-row-win:hover td:first-child  { box-shadow: inset 3px 0 0 rgba(16,185,129,0.55); }
.trades-row-loss:hover { background: rgba(239,68,68,0.05) !important; }
.trades-row-loss:hover td:first-child { box-shadow: inset 3px 0 0 rgba(239,68,68,0.50); }

/* Master avatar */
.trades-master-avatar {
    width: 32px; height: 32px;
    border-radius: 9px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .80rem; font-weight: 800;
    background: linear-gradient(135deg, rgba(245,158,11,0.28), rgba(251,191,36,0.14));
    border: 1px solid rgba(245,158,11,0.32);
    color: #fbbf24;
    box-shadow: 0 0 12px rgba(245,158,11,0.16), inset 0 1px 0 rgba(245,158,11,0.18);
}
.trades-master-name { color: #f1f5f9; font-size: .85rem; font-weight: 600; line-height: 1.3; }
.trades-copier-name { color: #94a3b8; font-size: .82rem; font-weight: 500; }
.trades-master-sub  { color: rgba(148,163,184,0.48); font-size: .63rem; margin-top: 1px; }

/* Symbol chip */
.trades-symbol-chip {
    display: inline-flex; align-items: center;
    background: rgba(59,130,246,0.10);
    border: 1px solid rgba(59,130,246,0.22);
    border-radius: 7px;
    padding: .22rem .6rem;
    font-size: .78rem; font-weight: 700;
    color: #93c5fd;
    letter-spacing: .04em;
    box-shadow: 0 0 8px rgba(59,130,246,0.12);
}

/* Direction badge */
.trades-direction-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .72rem; font-weight: 700;
    padding: .24rem .6rem;
    border-radius: 20px;
    letter-spacing: .04em;
    white-space: nowrap;
}
.trades-dir-buy  {
    background: rgba(16,185,129,0.12);
    border: 1px solid rgba(16,185,129,0.28);
    color: #10b981;
    box-shadow: 0 0 10px rgba(16,185,129,0.16);
    text-shadow: 0 0 8px rgba(16,185,129,0.35);
}
.trades-dir-sell {
    background: rgba(248,113,113,0.12);
    border: 1px solid rgba(248,113,113,0.28);
    color: #f87171;
    box-shadow: 0 0 10px rgba(248,113,113,0.14);
}

/* Date / time */
.trades-date { color: #cbd5e1; font-size: .80rem; font-weight: 500; line-height: 1.3; }
.trades-time { color: rgba(148,163,184,0.55); font-size: .65rem; }

/* P&L value */
.trades-pnl-value {
    font-size: 1rem; font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
}
.trades-pnl-win  { color: #10b981; text-shadow: 0 0 14px rgba(16,185,129,0.45); }
.trades-pnl-loss { color: #f87171; text-shadow: 0 0 14px rgba(248,113,113,0.40); }

/* ── Transaction icon wraps ──────────────────────────────────────────────────── */
/* legacy icon wrap kept for other views */
.tx-icon-wrap {
    width: 32px; height: 32px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; flex-shrink: 0;
}
.tx-credit { background: rgba(16,185,129,0.11);  border: 1px solid rgba(16,185,129,0.20);  color: #10b981; }
.tx-debit  { background: rgba(239,68,68,0.11);   border: 1px solid rgba(239,68,68,0.20);   color: #f87171; }

/* ── Recent Transactions card ────────────────────────────────────────────────── */
.glass-card-accent-purple {
    border-color: rgba(139,92,246,0.18) !important;
    box-shadow: 0 8px 36px rgba(0,0,0,0.42), 0 0 32px rgba(139,92,246,0.09), inset 0 1px 0 rgba(255,255,255,0.08) !important;
    position: relative; overflow: hidden;
}
.glass-card-accent-purple::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(139,92,246,0.85), rgba(167,139,250,0.70), transparent);
    border-radius: 16px 16px 0 0; z-index: 1;
}

.tx-card-header {
    background: linear-gradient(135deg, rgba(139,92,246,0.08) 0%, rgba(255,255,255,0.04) 100%);
    border-bottom: 1px solid rgba(139,92,246,0.13);
    border-radius: 16px 16px 0 0;
    padding: 1rem 1.25rem;
    position: relative; z-index: 1;
}
.tx-header-icon {
    width: 38px; height: 38px;
    background: rgba(139,92,246,0.14);
    border: 1px solid rgba(139,92,246,0.30);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #a78bfa; font-size: 1rem; flex-shrink: 0;
    box-shadow: 0 0 18px rgba(139,92,246,0.24), inset 0 1px 0 rgba(139,92,246,0.18);
}
.tx-header-title { color: #f1f5f9; font-size: .95rem; font-weight: 700; line-height: 1.3; }
.tx-header-sub   { color: rgba(148,163,184,0.55); font-size: .67rem; letter-spacing: .03em; margin-top: 2px; }

.tx-wallet-btn {
    color: #c4b5fd;
    border: 1px solid rgba(139,92,246,0.30);
    background: rgba(139,92,246,0.09);
    font-size: .78rem; font-weight: 600;
    padding: .38rem .85rem; border-radius: 8px;
    transition: all .2s ease; white-space: nowrap;
    text-decoration: none; display: inline-flex; align-items: center;
}
.tx-wallet-btn:hover {
    color: #ddd6fe;
    border-color: rgba(139,92,246,0.55);
    background: rgba(139,92,246,0.17);
    box-shadow: 0 0 18px rgba(139,92,246,0.25);
}

/* Transaction list */
.tx-list {
    list-style: none; padding: 0; margin: 0;
}
.tx-item {
    display: flex; align-items: center; gap: .9rem;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: background .16s ease;
    position: relative;
}
.tx-item:last-child { border-bottom: none; }
.tx-item:hover { background: rgba(255,255,255,0.03); }
.tx-item-credit:hover { background: rgba(16,185,129,0.05) !important; }
.tx-item-credit:hover .tx-icon-box { box-shadow: 0 0 18px rgba(16,185,129,0.30), inset 0 1px 0 rgba(16,185,129,0.20); }
.tx-item-debit:hover  { background: rgba(239,68,68,0.05) !important; }
.tx-item-debit:hover  .tx-icon-box { box-shadow: 0 0 18px rgba(239,68,68,0.28), inset 0 1px 0 rgba(239,68,68,0.18); }

/* Icon box */
.tx-icon-box {
    width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem;
    transition: box-shadow .18s ease;
}
.tx-icon-credit {
    background: rgba(16,185,129,0.13); border: 1px solid rgba(16,185,129,0.28); color: #10b981;
    box-shadow: 0 0 12px rgba(16,185,129,0.18), inset 0 1px 0 rgba(16,185,129,0.15);
}
.tx-icon-debit {
    background: rgba(239,68,68,0.13);  border: 1px solid rgba(239,68,68,0.28);  color: #f87171;
    box-shadow: 0 0 12px rgba(239,68,68,0.16), inset 0 1px 0 rgba(239,68,68,0.13);
}

/* Body */
.tx-body { flex: 1 1 0; min-width: 0; }
.tx-category {
    color: #f1f5f9; font-size: .87rem; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.3;
}
.tx-desc {
    color: rgba(148,163,184,0.65); font-size: .70rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 2px; max-width: 170px;
}
.tx-time {
    color: rgba(148,163,184,0.42); font-size: .63rem;
    margin-top: 3px; letter-spacing: .01em;
    display: flex; align-items: center; gap: 3px;
}

/* Right side */
.tx-right { flex-shrink: 0; text-align: right; }
.tx-amount {
    font-size: 1rem; font-weight: 800;
    letter-spacing: -.025em; line-height: 1.2;
}
.tx-amount-credit { color: #10b981; text-shadow: 0 0 14px rgba(16,185,129,0.45); }
.tx-amount-debit  { color: #f87171; text-shadow: 0 0 14px rgba(248,113,113,0.40); }
.tx-balance-pill {
    display: inline-block; margin-top: 4px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 20px;
    padding: .08rem .45rem;
    font-size: .62rem; font-weight: 600;
    color: rgba(148,163,184,0.65);
    letter-spacing: .02em;
    white-space: nowrap;
}

/* ── Recent Notifications ────────────────────────────────────────────────────── */
.glass-card-accent-amber {
    border-color: rgba(245,158,11,0.18) !important;
}
.glass-card-accent-amber::before {
    content: '';
    position: absolute;
    top: 0; left: 8%; right: 8%;
    height: 2px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent 0%, rgba(245,158,11,0.70) 30%, rgba(251,191,36,0.60) 65%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

.notif-card-header {
    padding: 1.1rem 1.4rem 0.9rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.notif-header-icon {
    width: 44px;
    height: 44px;
    background: rgba(245,158,11,0.14);
    border: 1px solid rgba(245,158,11,0.30);
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fbbf24;
    font-size: 1.05rem;
    flex-shrink: 0;
    box-shadow: 0 0 18px rgba(245,158,11,0.22), inset 0 1px 0 rgba(245,158,11,0.18);
}
.notif-header-title {
    font-size: .95rem;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: -.01em;
    white-space: nowrap;
}
.notif-header-sub {
    font-size: .68rem;
    color: rgba(148,163,184,0.65);
    margin-top: 1px;
    letter-spacing: .03em;
    white-space: nowrap;
}
.notif-unread-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(245,158,11,0.18);
    border: 1px solid rgba(245,158,11,0.32);
    color: #fbbf24;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
.notif-viewall-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(245,158,11,0.10);
    border: 1px solid rgba(245,158,11,0.22);
    color: #fbbf24;
    font-size: .75rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 10px;
    text-decoration: none;
    transition: background .18s, box-shadow .18s, color .18s;
    white-space: nowrap;
    flex-shrink: 0;
}
.notif-viewall-btn:hover {
    background: rgba(245,158,11,0.18);
    box-shadow: 0 0 14px rgba(245,158,11,0.22);
    color: #fde68a;
}

@media (max-width: 480px) {
    .notif-card-header {
        padding: .85rem 1rem;
        flex-wrap: nowrap !important;
        gap: .5rem;
    }
    .notif-card-header .gap-3 { gap: .5rem !important; }
    .notif-card-header .gap-2 { gap: .3rem !important; }
    .notif-header-icon {
        width: 36px;
        height: 36px;
        font-size: .9rem;
        border-radius: 10px;
    }
    .notif-header-title { font-size: .8rem; }
    .notif-header-sub { font-size: .6rem; }
    .notif-unread-badge { font-size: .52rem; padding: 2px 6px; }
    .notif-viewall-btn { font-size: .68rem; padding: 5px 10px; }
}

/* list */
.notif-list {
    padding: .45rem 0;
}
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: .75rem 1.4rem;
    border-bottom: 1px solid rgba(255,255,255,0.045);
    transition: background .18s;
    position: relative;
}
.notif-item:last-child { border-bottom: none; }
.notif-item::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    border-radius: 0 2px 2px 0;
    opacity: 0;
    transition: opacity .18s;
}
.notif-item-unread { background: rgba(245,158,11,0.05); }
.notif-item-unread::before {
    background: linear-gradient(180deg, rgba(245,158,11,0.80), rgba(251,191,36,0.50));
    opacity: 1;
}
.notif-item:hover { background: rgba(255,255,255,0.04); }
.notif-item-unread:hover { background: rgba(245,158,11,0.08); }

/* icon box */
.notif-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.notif-icon-amber {
    background: rgba(245,158,11,0.14);
    border: 1px solid rgba(245,158,11,0.28);
    color: #fbbf24;
    box-shadow: 0 0 14px rgba(245,158,11,0.20);
}
.notif-icon-dim {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    color: rgba(148,163,184,0.50);
}

/* body text */
.notif-title {
    font-size: .83rem;
    font-weight: 700;
    color: #e2e8f0;
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.notif-item-read .notif-title { color: rgba(148,163,184,0.80); font-weight: 600; }
.notif-new-pill {
    display: inline-block;
    background: rgba(245,158,11,0.20);
    border: 1px solid rgba(245,158,11,0.35);
    color: #fbbf24;
    font-size: .55rem;
    font-weight: 900;
    letter-spacing: .10em;
    padding: 1px 6px;
    border-radius: 4px;
}
.notif-message {
    font-size: .75rem;
    color: rgba(148,163,184,0.65);
    line-height: 1.45;
}
.notif-time {
    font-size: .68rem;
    color: rgba(148,163,184,0.50);
    letter-spacing: .02em;
    padding-top: 2px;
}

/* ── Empty states ────────────────────────────────────────────────────────────── */
.empty-state {
    text-align: center;
}
.empty-state-icon {
    width: 56px;
    height: 56px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: rgba(148,163,184,0.55);
}

/* ── Welcome card icon ───────────────────────────────────────────────────────── */
.welcome-icon-ring {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, rgba(99,102,241,0.28), rgba(139,92,246,0.18));
    border: 1px solid rgba(139,92,246,0.32);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: #a78bfa;
    box-shadow: 0 0 40px rgba(99,102,241,0.28);
    font-size: 1.75rem;
}

/* ── Chart loading spinner ───────────────────────────────────────────────────── */
.chart-loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(96,165,250,0.20);
    border-top-color: #60a5fa;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    vertical-align: middle;
}
.chart-loading-spinner-amber {
    border-color: rgba(251,191,36,0.20);
    border-top-color: #fbbf24;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── min-width-0 utility (for flex truncation) ───────────────────────────────── */
.min-width-0 { min-width: 0; }

/* =============================================================================
   LIGHT THEME — Dashboard Redesign component overrides
   ============================================================================= */

[data-theme="light"] .live-dot-wrap {
    background: rgba(0,119,204,0.08);
    border-color: rgba(0,119,204,0.22);
}
[data-theme="light"] .live-dot {
    background: #0077cc;
    box-shadow: 0 0 6px rgba(0,119,204,0.60);
}
[data-theme="light"] .live-label { color: #0063b0; text-shadow: none; }

/* Metric cards */
[data-theme="light"] .metric-card {
    background: rgba(255,255,255,0.75) !important;
    backdrop-filter: blur(24px) saturate(1.6);
    -webkit-backdrop-filter: blur(24px) saturate(1.6);
    box-shadow: 0 2px 20px rgba(99,102,241,0.10), 0 1px 4px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.90) !important;
    color: #0f172a;
}
[data-theme="light"] .metric-card:hover {
    box-shadow: 0 10px 36px rgba(99,102,241,0.16), 0 2px 8px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.95) !important;
}
[data-theme="light"] .metric-card::after { opacity: 0.04; }
[data-theme="light"] .metric-card:hover::after { opacity: 0.07; }
[data-theme="light"] .metric-accent-green { border-color: rgba(22,163,74,0.22) !important; background: linear-gradient(145deg, rgba(22,163,74,0.07) 0%, rgba(255,255,255,0.70) 100%) !important; }
[data-theme="light"] .metric-accent-green:hover { border-color: rgba(22,163,74,0.40) !important; }
[data-theme="light"] .metric-accent-blue  { border-color: rgba(37,99,235,0.20) !important; background: linear-gradient(145deg, rgba(37,99,235,0.07) 0%, rgba(255,255,255,0.70) 100%) !important; }
[data-theme="light"] .metric-accent-blue:hover  { border-color: rgba(37,99,235,0.38) !important; }
[data-theme="light"] .metric-accent-purple{ border-color: rgba(99,102,241,0.20) !important; background: linear-gradient(145deg, rgba(99,102,241,0.07) 0%, rgba(255,255,255,0.70) 100%) !important; }
[data-theme="light"] .metric-accent-purple:hover{ border-color: rgba(99,102,241,0.38) !important; }
[data-theme="light"] .metric-accent-amber { border-color: rgba(217,119,6,0.22) !important; background: linear-gradient(145deg, rgba(217,119,6,0.07) 0%, rgba(255,255,255,0.70) 100%) !important; }
[data-theme="light"] .metric-accent-amber:hover { border-color: rgba(217,119,6,0.40) !important; }
[data-theme="light"] .metric-accent-red   { border-color: rgba(220,38,38,0.22) !important; background: linear-gradient(145deg, rgba(220,38,38,0.07) 0%, rgba(255,255,255,0.70) 100%) !important; }
[data-theme="light"] .metric-accent-red:hover   { border-color: rgba(220,38,38,0.40) !important; }

/* Light metric icon boxes */
[data-theme="light"] .metric-icon-green  { background: rgba(22,163,74,0.13);    border-color: rgba(22,163,74,0.28);    color: #15803d;  box-shadow: 0 0 18px rgba(22,163,74,0.15); }
[data-theme="light"] .metric-icon-blue   { background: rgba(37,99,235,0.11);    border-color: rgba(37,99,235,0.25);    color: #1d4ed8;  box-shadow: 0 0 18px rgba(37,99,235,0.13); }
[data-theme="light"] .metric-icon-purple { background: rgba(99,102,241,0.11);   border-color: rgba(99,102,241,0.25);   color: #4f46e5;  box-shadow: 0 0 18px rgba(99,102,241,0.13); }
[data-theme="light"] .metric-icon-amber  { background: rgba(217,119,6,0.11);    border-color: rgba(217,119,6,0.25);    color: #b45309;  box-shadow: 0 0 18px rgba(217,119,6,0.13); }
[data-theme="light"] .metric-icon-red    { background: rgba(220,38,38,0.11);    border-color: rgba(220,38,38,0.25);    color: #dc2626;  box-shadow: 0 0 18px rgba(220,38,38,0.13); }

/* Trend badges */
[data-theme="light"] .metric-trend-up   { color: #15803d; background: rgba(22,163,74,0.10);  border-color: rgba(22,163,74,0.22); }
[data-theme="light"] .metric-trend-down { color: #dc2626; background: rgba(220,38,38,0.10); border-color: rgba(220,38,38,0.22); }

/* Win rate bar */
[data-theme="light"] .win-rate-bar  { background: rgba(99,102,241,0.10); }
[data-theme="light"] .win-rate-fill { background: linear-gradient(90deg, #16a34a, rgba(22,163,74,0.55)); }

/* Positions strip */
[data-theme="light"] .positions-strip {
    background: linear-gradient(135deg, rgba(37,99,235,0.06) 0%, rgba(255,255,255,0.80) 60%, rgba(99,102,241,0.05) 100%);
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    border-color: rgba(37,99,235,0.20);
    box-shadow: 0 4px 24px rgba(37,99,235,0.12), 0 1px 4px rgba(0,0,0,0.06);
}
[data-theme="light"] .positions-strip.strip-profit { border-color: rgba(22,163,74,0.22); }
[data-theme="light"] .positions-strip.strip-loss   { border-color: rgba(220,38,38,0.22); }
[data-theme="light"] .positions-icon-wrap {
    background: rgba(37,99,235,0.10);
    border-color: rgba(37,99,235,0.25);
    color: #1d4ed8;
    box-shadow: 0 0 16px rgba(37,99,235,0.15);
}
[data-theme="light"] .positions-stat-label { color: #64748b; }
[data-theme="light"] .positions-divider { background: linear-gradient(180deg, transparent, rgba(0,0,0,0.12), transparent); }
[data-theme="light"] .floating-pnl-pulse.pulse-green {
    color: #15803d;
    background: rgba(22,163,74,0.10);
    border-color: rgba(22,163,74,0.28);
    box-shadow: 0 0 12px rgba(22,163,74,0.15);
}
[data-theme="light"] .floating-pnl-pulse.pulse-red {
    color: #dc2626;
    background: rgba(220,38,38,0.10);
    border-color: rgba(220,38,38,0.28);
    box-shadow: 0 0 12px rgba(220,38,38,0.15);
}
[data-theme="light"] .positions-monitor-btn {
    color: #1d4ed8;
    border-color: rgba(37,99,235,0.30);
    background: rgba(37,99,235,0.07);
}
[data-theme="light"] .positions-monitor-btn:hover {
    color: #1e40af;
    border-color: rgba(37,99,235,0.55);
    background: rgba(37,99,235,0.14);
    box-shadow: 0 0 18px rgba(37,99,235,0.20);
}

/* Card header icons */
[data-theme="light"] .card-header-icon-blue   { background: rgba(37,99,235,0.10);   color: #1d4ed8; border-color: rgba(37,99,235,0.20); }
[data-theme="light"] .card-header-icon-green  { background: rgba(22,163,74,0.10);   color: #15803d; border-color: rgba(22,163,74,0.20); }
[data-theme="light"] .card-header-icon-amber  { background: rgba(217,119,6,0.10);   color: #b45309; border-color: rgba(217,119,6,0.20); }
[data-theme="light"] .card-header-icon-purple { background: rgba(99,102,241,0.10);  color: #4f46e5; border-color: rgba(99,102,241,0.20); }

/* Account avatars */
[data-theme="light"] .account-avatar-master {
    background: linear-gradient(135deg, rgba(217,119,6,0.20), rgba(245,158,11,0.12));
    border-color: rgba(217,119,6,0.28);
    color: #b45309;
}

/* Subscriptions card */
[data-theme="light"] .glass-card-accent-blue {
    border-color: rgba(37,99,235,0.20) !important;
    box-shadow: 0 4px 24px rgba(37,99,235,0.12), 0 1px 4px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.90) !important;
}
[data-theme="light"] .subs-card-header {
    background: linear-gradient(135deg, rgba(37,99,235,0.06) 0%, rgba(255,255,255,0.75) 100%);
    border-bottom-color: rgba(37,99,235,0.12);
}
[data-theme="light"] .subs-header-icon {
    background: rgba(37,99,235,0.10);
    border-color: rgba(37,99,235,0.22);
    color: #1d4ed8;
    box-shadow: 0 0 12px rgba(37,99,235,0.12);
}
[data-theme="light"] .subs-viewall-btn { color: #1d4ed8; border-color: rgba(37,99,235,0.28); background: rgba(37,99,235,0.06); }
[data-theme="light"] .subs-viewall-btn:hover { color: #1e40af; border-color: rgba(37,99,235,0.50); background: rgba(37,99,235,0.12); }
[data-theme="light"] .subs-table { color: #334155; }
[data-theme="light"] .subs-table thead th { color: #64748b; background: rgba(37,99,235,0.04) !important; border-bottom-color: rgba(37,99,235,0.10) !important; }
[data-theme="light"] .subs-table td { border-color: rgba(37,99,235,0.07); }
[data-theme="light"] .subs-row:hover { background: rgba(37,99,235,0.04) !important; }
[data-theme="light"] .subs-row:hover td:first-child { box-shadow: inset 3px 0 0 rgba(37,99,235,0.50); }
[data-theme="light"] .subs-master-avatar { background: linear-gradient(135deg, rgba(217,119,6,0.20), rgba(245,158,11,0.10)); border-color: rgba(217,119,6,0.28); color: #b45309; box-shadow: none; }
[data-theme="light"] .subs-master-name { color: #0f172a; }
[data-theme="light"] .subs-copier-name { color: #475569; }
[data-theme="light"] .subs-master-sub  { color: rgba(100,116,139,0.70); }
[data-theme="light"] .subs-fee-value   { color: #15803d; text-shadow: none; }
[data-theme="light"] .subs-perf-badge  { background: rgba(37,99,235,0.10); border-color: rgba(37,99,235,0.22); color: #1d4ed8; box-shadow: none; }
[data-theme="light"] .subs-renew-badge { background: rgba(22,163,74,0.08); border-color: rgba(22,163,74,0.22); color: #15803d; }
[data-theme="light"] .subs-manage-btn  { color: #1d4ed8; border-color: rgba(37,99,235,0.28); background: rgba(37,99,235,0.06); }
[data-theme="light"] .subs-manage-btn:hover { color: #1e40af; border-color: rgba(37,99,235,0.50); background: rgba(37,99,235,0.12); box-shadow: 0 0 12px rgba(37,99,235,0.15); }
[data-theme="light"] .subs-progress    { background: rgba(99,102,241,0.10); }

/* Symbol chip */
[data-theme="light"] .symbol-chip {
    background: rgba(99,102,241,0.08);
    border-color: rgba(99,102,241,0.15);
    color: #334155;
}

/* Trade type badges */
[data-theme="light"] .trade-buy  { background: rgba(22,163,74,0.10);   color: #15803d; border-color: rgba(22,163,74,0.22);   text-shadow: none; }
[data-theme="light"] .trade-sell { background: rgba(220,38,38,0.10);   color: #dc2626; border-color: rgba(220,38,38,0.22); }

/* Trades card (light) */
[data-theme="light"] .glass-card-accent-green { border-color: rgba(0,119,204,0.20) !important; box-shadow: 0 4px 24px rgba(0,119,204,0.10), 0 1px 4px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.90) !important; }
[data-theme="light"] .trades-card-header { background: linear-gradient(135deg, rgba(0,119,204,0.06) 0%, rgba(255,255,255,0.75) 100%); border-bottom-color: rgba(0,119,204,0.12); }
[data-theme="light"] .trades-header-icon { background: rgba(0,119,204,0.11); border-color: rgba(0,119,204,0.24); color: #0063b0; box-shadow: 0 0 14px rgba(0,119,204,0.14); }
[data-theme="light"] .trades-header-title { color: #0f172a; }
[data-theme="light"] .trades-header-sub   { color: #64748b; }
[data-theme="light"] .trades-monitor-btn  { color: #0063b0; border-color: rgba(0,119,204,0.28); background: rgba(0,119,204,0.07); }
[data-theme="light"] .trades-monitor-btn:hover { color: #004f8f; border-color: rgba(0,119,204,0.50); background: rgba(0,119,204,0.13); box-shadow: 0 0 14px rgba(0,119,204,0.15); }
[data-theme="light"] .trades-table { color: #334155; }
[data-theme="light"] .trades-table thead th { color: #64748b; background: rgba(22,163,74,0.04) !important; border-bottom-color: rgba(22,163,74,0.10) !important; }
[data-theme="light"] .trades-table td { border-color: rgba(22,163,74,0.06); }
[data-theme="light"] .trades-row-win:hover  { background: rgba(22,163,74,0.04) !important; }
[data-theme="light"] .trades-row-win:hover td:first-child  { box-shadow: inset 3px 0 0 rgba(22,163,74,0.45); }
[data-theme="light"] .trades-row-loss:hover { background: rgba(220,38,38,0.04) !important; }
[data-theme="light"] .trades-row-loss:hover td:first-child { box-shadow: inset 3px 0 0 rgba(220,38,38,0.40); }
[data-theme="light"] .trades-master-avatar { background: linear-gradient(135deg, rgba(217,119,6,0.18), rgba(245,158,11,0.10)); border-color: rgba(217,119,6,0.28); color: #b45309; box-shadow: none; }
[data-theme="light"] .trades-master-name { color: #0f172a; }
[data-theme="light"] .trades-copier-name { color: #475569; }
[data-theme="light"] .trades-master-sub  { color: rgba(100,116,139,0.65); }
[data-theme="light"] .trades-symbol-chip { background: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.20); color: #1d4ed8; box-shadow: none; }
[data-theme="light"] .trades-dir-buy  { background: rgba(22,163,74,0.09);  border-color: rgba(22,163,74,0.22);  color: #15803d; box-shadow: none; text-shadow: none; }
[data-theme="light"] .trades-dir-sell { background: rgba(220,38,38,0.09); border-color: rgba(220,38,38,0.22); color: #dc2626; box-shadow: none; }
[data-theme="light"] .trades-date { color: #334155; }
[data-theme="light"] .trades-time { color: #94a3b8; }
[data-theme="light"] .trades-pnl-win  { color: #15803d; text-shadow: none; }
[data-theme="light"] .trades-pnl-loss { color: #dc2626; text-shadow: none; }

/* Transaction icons */
[data-theme="light"] .tx-credit { background: rgba(22,163,74,0.10);  border-color: rgba(22,163,74,0.20);  color: #15803d; }
[data-theme="light"] .tx-debit  { background: rgba(220,38,38,0.10); border-color: rgba(220,38,38,0.20); color: #dc2626; }

/* Transactions card (light) */
[data-theme="light"] .glass-card-accent-purple { border-color: rgba(99,102,241,0.20) !important; box-shadow: 0 4px 24px rgba(99,102,241,0.12), 0 1px 4px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.90) !important; }
[data-theme="light"] .tx-card-header { background: linear-gradient(135deg, rgba(99,102,241,0.06) 0%, rgba(255,255,255,0.75) 100%); border-bottom-color: rgba(99,102,241,0.12); }
[data-theme="light"] .tx-header-icon  { background: rgba(99,102,241,0.10); border-color: rgba(99,102,241,0.22); color: #4f46e5; box-shadow: 0 0 14px rgba(99,102,241,0.12); }
[data-theme="light"] .tx-header-title { color: #0f172a; }
[data-theme="light"] .tx-header-sub   { color: #64748b; }
[data-theme="light"] .tx-wallet-btn   { color: #4f46e5; border-color: rgba(99,102,241,0.28); background: rgba(99,102,241,0.07); }
[data-theme="light"] .tx-wallet-btn:hover { color: #3730a3; border-color: rgba(99,102,241,0.50); background: rgba(99,102,241,0.13); box-shadow: 0 0 14px rgba(99,102,241,0.15); }
[data-theme="light"] .tx-item { border-bottom-color: rgba(99,102,241,0.07); }
[data-theme="light"] .tx-item:hover { background: rgba(99,102,241,0.03) !important; }
[data-theme="light"] .tx-item-credit:hover { background: rgba(22,163,74,0.04) !important; }
[data-theme="light"] .tx-item-debit:hover  { background: rgba(220,38,38,0.04) !important; }
[data-theme="light"] .tx-icon-credit { background: rgba(22,163,74,0.11); border-color: rgba(22,163,74,0.24); color: #15803d; box-shadow: none; }
[data-theme="light"] .tx-icon-debit  { background: rgba(220,38,38,0.10); border-color: rgba(220,38,38,0.22); color: #dc2626; box-shadow: none; }
[data-theme="light"] .tx-category    { color: #0f172a; }
[data-theme="light"] .tx-desc        { color: #64748b; }
[data-theme="light"] .tx-time        { color: #94a3b8; }
[data-theme="light"] .tx-amount-credit { color: #15803d; text-shadow: none; }
[data-theme="light"] .tx-amount-debit  { color: #dc2626; text-shadow: none; }
[data-theme="light"] .tx-balance-pill  { background: rgba(99,102,241,0.07); border-color: rgba(99,102,241,0.14); color: #475569; }

/* Notifications */
[data-theme="light"] .glass-card-accent-amber { border-color: rgba(217,119,6,0.20) !important; }
[data-theme="light"] .notif-card-header { border-bottom-color: rgba(0,0,0,0.07); }
[data-theme="light"] .notif-header-icon { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.25); color: #d97706; box-shadow: none; }
[data-theme="light"] .notif-header-title { color: #0f172a; }
[data-theme="light"] .notif-header-sub { color: rgba(71,85,105,0.65); }
[data-theme="light"] .notif-unread-badge { background: rgba(217,119,6,0.10); border-color: rgba(217,119,6,0.25); color: #b45309; }
[data-theme="light"] .notif-viewall-btn { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.20); color: #b45309; }
[data-theme="light"] .notif-viewall-btn:hover { background: rgba(245,158,11,0.14); color: #92400e; }
[data-theme="light"] .notif-item { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .notif-item:hover { background: rgba(0,0,0,0.025); }
[data-theme="light"] .notif-item-unread { background: rgba(245,158,11,0.04); }
[data-theme="light"] .notif-item-unread:hover { background: rgba(245,158,11,0.07); }
[data-theme="light"] .notif-icon-amber { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.22); color: #d97706; box-shadow: none; }
[data-theme="light"] .notif-icon-dim { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); color: #94a3b8; }
[data-theme="light"] .notif-title { color: #0f172a; }
[data-theme="light"] .notif-item-read .notif-title { color: #64748b; }
[data-theme="light"] .notif-new-pill { background: rgba(245,158,11,0.14); border-color: rgba(245,158,11,0.28); color: #b45309; }
[data-theme="light"] .notif-message { color: rgba(71,85,105,0.75); }
[data-theme="light"] .notif-time { color: rgba(100,116,139,0.65); }

/* Empty states */
[data-theme="light"] .empty-state-icon {
    background: rgba(248,250,252,0.90);
    border-color: rgba(99,102,241,0.12);
    color: #94a3b8;
}

/* Welcome card */
[data-theme="light"] .welcome-icon-ring {
    background: linear-gradient(135deg, rgba(99,102,241,0.16), rgba(139,92,246,0.10));
    border-color: rgba(99,102,241,0.25);
    color: #4f46e5;
    box-shadow: 0 0 32px rgba(99,102,241,0.18);
}

/* Chart spinner */
[data-theme="light"] .chart-loading-spinner { border-color: rgba(37,99,235,0.18); border-top-color: #2563eb; }
[data-theme="light"] .chart-loading-spinner-amber { border-color: rgba(217,119,6,0.18); border-top-color: #d97706; }

/* ═══════════════════════════════════════════════════════════════════════════
   MASTER PAGE HEADER
   ═══════════════════════════════════════════════════════════════════════════ */
.masters-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(245,158,11,0.15);
    border-radius: 18px;
    box-shadow: 0 4px 28px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.07);
    position: relative;
    overflow: hidden;
}
.masters-page-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(245,158,11,0.78), rgba(251,191,36,0.55), transparent);
    pointer-events: none;
}
.masters-header-icon {
    width: 50px; height: 50px;
    background: rgba(245,158,11,0.14);
    border: 1px solid rgba(245,158,11,0.32);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    color: #fbbf24; font-size: 1.3rem; flex-shrink: 0;
    box-shadow: 0 0 28px rgba(245,158,11,0.28), inset 0 1px 0 rgba(245,158,11,0.20);
}
.masters-header-title {
    font-size: 1.35rem; font-weight: 800;
    color: #f1f5f9; letter-spacing: -.03em; line-height: 1.2;
}
.masters-header-sub {
    font-size: .74rem; color: rgba(148,163,184,0.62); margin-top: 2px;
}
.masters-count-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(245,158,11,0.10);
    border: 1px solid rgba(245,158,11,0.24);
    border-radius: 12px; padding: .5rem 1.1rem; flex-shrink: 0;
}
.masters-count-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #fbbf24; box-shadow: 0 0 8px rgba(251,191,36,0.70);
    animation: dotPing 2s ease-in-out infinite;
}
#visibleCount {
    font-size: 1.2rem; font-weight: 800;
    color: #fbbf24; letter-spacing: -.02em;
    text-shadow: 0 0 12px rgba(251,191,36,0.40); line-height: 1;
}
.masters-count-label {
    font-size: .67rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: rgba(148,163,184,0.60);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MASTER FILTER + SORT BAR  (Views/Master/Index.cshtml)
   ═══════════════════════════════════════════════════════════════════════════ */
.fb-bar {
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(99,102,241,0.15);
    border-radius: 16px;
    padding: .75rem 1.1rem;
    box-shadow: 0 4px 28px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.07);
    position: relative;
    overflow: hidden;
}
.fb-bar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99,102,241,0.55), rgba(139,92,246,0.38), transparent);
    pointer-events: none;
}
/* Two explicit rows inside fb-bar */
.fb-row {
    display: flex;
    align-items: center;
    gap: .5rem 1rem;
    flex-wrap: wrap;
}
.fb-row-sep {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99,102,241,0.22), rgba(139,92,246,0.14), transparent);
    margin: .55rem 0;
}

.fb-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.fb-label {
    font-size: .59rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(148,163,184,0.50);
    white-space: nowrap;
}
.fb-sep {
    width: 1px;
    min-height: 28px;
    background: linear-gradient(180deg, transparent, rgba(99,102,241,0.28), transparent);
    flex-shrink: 0;
    margin: 0 2px;
}

/* ── Tier filter buttons ─────────────────────────────────────────────────── */
.fb-tier-btn {
    font-size: .71rem;
    font-weight: 700;
    letter-spacing: .03em;
    border-radius: 8px;
    padding: 4px 11px;
    border: 1px solid;
    line-height: 1.45;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    transition: filter .16s ease, transform .16s ease, box-shadow .16s ease;
}
.fb-tier-btn:hover:not(.active) {
    filter: brightness(1.25);
    transform: translateY(-1px);
}
.fb-tier-btn.active {
    filter: brightness(1.50) saturate(1.20);
    transform: translateY(-1px);
    box-shadow: 0 3px 16px rgba(0,0,0,0.42);
}

/* ── Sort buttons ────────────────────────────────────────────────────────── */
.fb-sort-btn {
    font-size: .71rem;
    font-weight: 700;
    letter-spacing: .03em;
    border-radius: 8px;
    padding: 4px 11px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    color: rgba(148,163,184,0.72);
    line-height: 1.45;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    transition: background .16s, border-color .16s, color .16s, box-shadow .16s, transform .16s;
}
.fb-sort-btn:hover:not(.active) {
    background: rgba(99,102,241,0.10);
    border-color: rgba(99,102,241,0.30);
    color: #c7d2fe;
    transform: translateY(-1px);
}
.fb-sort-btn.active {
    background: rgba(99,102,241,0.20);
    border-color: rgba(99,102,241,0.50);
    color: #a5b4fc;
    box-shadow: 0 0 14px rgba(99,102,241,0.22), inset 0 1px 0 rgba(99,102,241,0.14);
    transform: translateY(-1px);
}

/* ── Grade selects ───────────────────────────────────────────────────────── */
.fb-select {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(99,102,241,0.22) !important;
    border-radius: 8px !important;
    color: #e2e8f0 !important;
    font-size: .72rem !important;
    font-weight: 600 !important;
    padding: 4px 28px 4px 10px !important;
    min-width: 74px;
    cursor: pointer;
    transition: border-color .16s, box-shadow .16s;
    appearance: auto;
}
.fb-select:focus {
    border-color: rgba(99,102,241,0.52) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.14) !important;
    outline: none;
}
.fb-select option { background: #0d1228; color: #e2e8f0; }

/* ── Custom toggle (Hide Martingale) ─────────────────────────────────────── */
.fb-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    margin: 0;
}
.fb-toggle-input { display: none; }
.fb-toggle-track {
    width: 38px; height: 21px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 21px;
    position: relative;
    flex-shrink: 0;
    transition: background .22s, border-color .22s, box-shadow .22s;
}
.fb-toggle-thumb {
    position: absolute;
    top: 2px; left: 2px;
    width: 15px; height: 15px;
    border-radius: 50%;
    background: rgba(148,163,184,0.55);
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), background .22s, box-shadow .22s;
}
.fb-toggle-input:checked ~ .fb-toggle-track {
    background: rgba(239,68,68,0.20);
    border-color: rgba(239,68,68,0.48);
    box-shadow: 0 0 14px rgba(239,68,68,0.28);
}
.fb-toggle-input:checked ~ .fb-toggle-track .fb-toggle-thumb {
    transform: translateX(17px);
    background: #f87171;
    box-shadow: 0 0 8px rgba(248,113,113,0.60);
}
.fb-toggle-label {
    font-size: .71rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: rgba(148,163,184,0.70);
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    transition: color .18s;
}
.fb-toggle-wrap:hover .fb-toggle-label { color: rgba(248,113,113,0.90); }

/* ── Clear button ────────────────────────────────────────────────────────── */
.fb-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(239,68,68,0.10);
    border: 1px solid rgba(239,68,68,0.28);
    color: #f87171;
    font-size: .71rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 4px 13px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .16s, box-shadow .16s, border-color .16s;
}
.fb-clear-btn:hover {
    background: rgba(239,68,68,0.18);
    border-color: rgba(239,68,68,0.45);
    box-shadow: 0 0 14px rgba(239,68,68,0.24);
}

/* ── Light-mode overrides ────────────────────────────────────────────────── */
/* Masters page header — light */
[data-theme="light"] .masters-page-header { background: rgba(255,255,255,0.88); border-color: rgba(217,119,6,0.18); box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
[data-theme="light"] .masters-header-icon { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.26); color: #d97706; box-shadow: none; }
[data-theme="light"] .masters-header-title { color: #0f172a; }
[data-theme="light"] .masters-header-sub { color: rgba(71,85,105,0.70); }
[data-theme="light"] .masters-count-badge { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.20); }
[data-theme="light"] #visibleCount { color: #b45309; text-shadow: none; }
[data-theme="light"] .masters-count-label { color: rgba(71,85,105,0.60); }
[data-theme="light"] .fb-row-sep { background: linear-gradient(90deg, transparent, rgba(99,102,241,0.16), transparent); }

[data-theme="light"] .fb-bar {
    background: rgba(255,255,255,0.82);
    border-color: rgba(99,102,241,0.18);
    box-shadow: 0 4px 20px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.90);
}
[data-theme="light"] .fb-label { color: rgba(71,85,105,0.60); }
[data-theme="light"] .fb-sep { background: linear-gradient(180deg, transparent, rgba(99,102,241,0.20), transparent); }
[data-theme="light"] .fb-sort-btn { background: rgba(248,250,252,0.80); border-color: rgba(0,0,0,0.10); color: #475569; }
[data-theme="light"] .fb-sort-btn:hover:not(.active) { background: rgba(99,102,241,0.08); border-color: rgba(99,102,241,0.22); color: #4f46e5; }
[data-theme="light"] .fb-sort-btn.active { background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.38); color: #4338ca; box-shadow: 0 0 10px rgba(99,102,241,0.14); }
[data-theme="light"] .fb-select { background: rgba(255,255,255,0.90) !important; border-color: rgba(99,102,241,0.20) !important; color: #0f172a !important; }
[data-theme="light"] .fb-toggle-track { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.14); }
[data-theme="light"] .fb-toggle-thumb { background: rgba(71,85,105,0.45); }
[data-theme="light"] .fb-toggle-label { color: rgba(71,85,105,0.75); }
[data-theme="light"] .fb-toggle-wrap:hover .fb-toggle-label { color: #dc2626; }
[data-theme="light"] .fb-toggle-input:checked ~ .fb-toggle-track { background: rgba(220,38,38,0.12); border-color: rgba(220,38,38,0.38); box-shadow: 0 0 10px rgba(220,38,38,0.18); }
[data-theme="light"] .fb-clear-btn { background: rgba(239,68,68,0.07); border-color: rgba(239,68,68,0.22); color: #dc2626; }
[data-theme="light"] .fb-clear-btn:hover { background: rgba(239,68,68,0.14); }

/* ═══════════════════════════════════════════════════════════════════════════
   MASTER BROWSE CARDS  (Views/Master/Index.cshtml)
   ═══════════════════════════════════════════════════════════════════════════ */
.mc-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
/* Tier-coloured top shimmer */
.mc-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    border-radius: 16px 16px 0 0;
    z-index: 2;
    pointer-events: none;
}
/* Border + glow per tier */
.mc-tier-elite    { border-color: rgba(251,191,36,0.28) !important; box-shadow: 0 8px 40px rgba(0,0,0,0.45), 0 0 40px rgba(251,191,36,0.16), inset 0 1px 0 rgba(255,255,255,0.09) !important; }
.mc-tier-platinum { border-color: rgba(96,165,250,0.28)  !important; box-shadow: 0 8px 40px rgba(0,0,0,0.45), 0 0 40px rgba(96,165,250,0.16),  inset 0 1px 0 rgba(255,255,255,0.09) !important; }
.mc-tier-gold     { border-color: rgba(251,191,36,0.20)  !important; box-shadow: 0 8px 36px rgba(0,0,0,0.42), 0 0 26px rgba(251,191,36,0.10), inset 0 1px 0 rgba(255,255,255,0.08) !important; }
.mc-tier-silver   { border-color: rgba(148,163,184,0.20) !important; }
.mc-tier-bronze   { border-color: rgba(194,120,68,0.20)  !important; }
/* Shimmer colours */
.mc-tier-elite::before    { background: linear-gradient(90deg, transparent, rgba(251,191,36,0.95), rgba(253,230,138,0.70), transparent); }
.mc-tier-platinum::before { background: linear-gradient(90deg, transparent, rgba(96,165,250,0.90), rgba(139,92,246,0.70), transparent); }
.mc-tier-gold::before     { background: linear-gradient(90deg, transparent, rgba(251,191,36,0.75), rgba(253,230,138,0.55), transparent); }
.mc-tier-silver::before   { background: linear-gradient(90deg, transparent, rgba(148,163,184,0.65), rgba(203,213,225,0.45), transparent); }
.mc-tier-bronze::before   { background: linear-gradient(90deg, transparent, rgba(194,120,68,0.72), rgba(253,186,116,0.55), transparent); }
/* Hover lift per tier */
.mc-tier-elite:hover    { box-shadow: 0 18px 56px rgba(0,0,0,0.55), 0 0 56px rgba(251,191,36,0.24), inset 0 1px 0 rgba(255,255,255,0.12) !important; }
.mc-tier-platinum:hover { box-shadow: 0 18px 56px rgba(0,0,0,0.55), 0 0 56px rgba(96,165,250,0.24),  inset 0 1px 0 rgba(255,255,255,0.12) !important; }

/* ── Card Header ─────────────────────────────────────────────────────────── */
.mc-header {
    padding: 1.1rem 1.2rem .8rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.mc-avatar {
    width: 50px; height: 50px;
    border-radius: 15px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; flex-shrink: 0;
    border: 1px solid transparent;
    transition: transform .20s ease, box-shadow .20s ease;
}
.mc-card:hover .mc-avatar { transform: scale(1.08) rotate(-3deg); }
.mc-avatar-elite    { background: rgba(251,191,36,0.16); border-color: rgba(251,191,36,0.40); color: #fbbf24; box-shadow: 0 0 26px rgba(251,191,36,0.30), inset 0 1px 0 rgba(251,191,36,0.20); }
.mc-avatar-platinum { background: rgba(96,165,250,0.16);  border-color: rgba(96,165,250,0.40);  color: #93c5fd; box-shadow: 0 0 26px rgba(96,165,250,0.30),  inset 0 1px 0 rgba(96,165,250,0.20); }
.mc-avatar-gold     { background: rgba(251,191,36,0.12);  border-color: rgba(251,191,36,0.30);  color: #fde68a; box-shadow: 0 0 18px rgba(251,191,36,0.22); }
.mc-avatar-silver   { background: rgba(148,163,184,0.12); border-color: rgba(148,163,184,0.28); color: #cbd5e1; box-shadow: 0 0 14px rgba(148,163,184,0.16); }
.mc-avatar-bronze   { background: rgba(194,120,68,0.12);  border-color: rgba(194,120,68,0.28);  color: #fdba74; box-shadow: 0 0 16px rgba(194,120,68,0.20); }

.mc-name {
    font-size: .96rem; font-weight: 800;
    color: #f1f5f9; letter-spacing: -.025em;
    line-height: 1.2; margin-bottom: 3px;
}
.mc-server {
    font-size: .64rem; color: rgba(148,163,184,0.58);
    letter-spacing: .03em;
}
.mc-member-since {
    display: flex; align-items: center; gap: 5px;
    font-size: .66rem; color: rgba(148,163,184,0.52);
    margin-top: .6rem; letter-spacing: .02em;
}
.mc-member-since i { opacity: .5; font-size: .68rem; }

/* Status & tier badges */
.mc-status-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .59rem; font-weight: 800; letter-spacing: .07em;
    padding: 3px 9px; border-radius: 20px; border: 1px solid;
    text-transform: uppercase; white-space: nowrap;
}
.mc-status-active     { background: rgba(16,185,129,0.14); border-color: rgba(16,185,129,0.32); color: #10b981; }
.mc-status-subscribed { background: rgba(16,185,129,0.14); border-color: rgba(16,185,129,0.32); color: #34d399; }
.mc-status-private    { background: rgba(168,85,247,0.14); border-color: rgba(168,85,247,0.32); color: #c084fc; }
.mc-dot-pulse {
    width: 5px; height: 5px; border-radius: 50%;
    background: #0e9bff; box-shadow: 0 0 6px rgba(14,155,255,.70);
    display: inline-block; animation: dotPing 2s ease-in-out infinite;
}
.mc-tier-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .59rem; font-weight: 800; letter-spacing: .05em;
    padding: 3px 9px; border-radius: 20px; border: 1px solid;
    white-space: nowrap;
}
.mc-tier-rank { opacity: .65; font-weight: 600; margin-left: 1px; }

/* ── Grades + Score row ──────────────────────────────────────────────────── */
.mc-grade-row {
    padding: .6rem 1.2rem;
    background: rgba(255,255,255,0.028);
    border-bottom: 1px solid rgba(255,255,255,0.055);
}
.mc-grade-item {
    display: flex; align-items: center; gap: 5px;
}
.mc-grade-label {
    display: flex; align-items: center; gap: 3px;
    font-size: .60rem; font-weight: 700; letter-spacing: .09em;
    color: rgba(148,163,184,0.62); text-transform: uppercase;
}
.mc-grade-label i { font-size: .65rem; }
.mc-grade-value { font-size: .92rem; line-height: 1; }
.mc-score { display: flex; align-items: center; gap: 5px; }
.mc-score-label {
    font-size: .59rem; font-weight: 700; letter-spacing: .09em;
    color: rgba(148,163,184,0.52); text-transform: uppercase;
}
.mc-score-value {
    font-size: .96rem; font-weight: 800;
    color: #f1f5f9; text-shadow: 0 0 12px rgba(241,245,249,0.22);
}

/* ── Badges strip ────────────────────────────────────────────────────────── */
.mc-badges {
    display: flex; flex-wrap: wrap; gap: 5px;
    padding: .55rem 1.2rem;
    border-bottom: 1px solid rgba(255,255,255,0.055);
}
.mc-badge {
    display: inline-block;
    font-size: .58rem; font-weight: 700; letter-spacing: .05em;
    padding: 3px 9px; border-radius: 5px; border: 1px solid;
}

/* ── Body ────────────────────────────────────────────────────────────────── */
.mc-body {
    padding: .8rem 1.2rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}
.mc-perf-header {
    display: flex; justify-content: space-between; align-items: center;
}
.mc-perf-label {
    display: flex; align-items: center; gap: 5px;
    font-size: .61rem; font-weight: 800; letter-spacing: .10em;
    text-transform: uppercase; color: rgba(148,163,184,0.72);
}
.mc-perf-label i { font-size: .72rem; color: rgba(99,102,241,0.72); }
.mc-perf-period {
    font-size: .60rem; font-weight: 700; letter-spacing: .05em;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(148,163,184,0.60);
    padding: 2px 9px; border-radius: 20px;
}

/* 2×2 stat grid */
.mc-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}
.mc-stat-item {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 12px;
    padding: .65rem .5rem .55rem;
    text-align: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: border-color .18s, background .18s, box-shadow .18s;
}
.mc-stat-item:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.16);
    box-shadow: 0 2px 10px rgba(0,0,0,0.22);
}
.mc-stat-value {
    font-size: 1.05rem; font-weight: 800;
    letter-spacing: -.025em; line-height: 1.2;
    margin-bottom: 3px;
}
.mc-stat-label {
    font-size: .59rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: rgba(148,163,184,0.58);
}

/* Info section — copiers + fees */
.mc-info-section {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 13px;
    overflow: hidden;
}
.mc-info-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: .52rem .75rem;
    transition: background .16s;
}
.mc-info-row:hover { background: rgba(255,255,255,0.04); }
.mc-divider { height: 1px; background: rgba(255,255,255,0.065); }
.mc-info-icon {
    width: 27px; height: 27px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; flex-shrink: 0;
}
.mc-info-icon-blue  { background: rgba(59,130,246,0.14); border: 1px solid rgba(59,130,246,0.24); color: #60a5fa; }
.mc-info-icon-amber { background: rgba(245,158,11,0.14);  border: 1px solid rgba(245,158,11,0.24);  color: #fbbf24; }
.mc-info-label { font-size: .72rem; font-weight: 600; color: rgba(148,163,184,0.72); }
.mc-info-value { font-size: .9rem; font-weight: 800; color: #f1f5f9; }
.mc-fee-value  { font-size: .86rem; font-weight: 800; color: #fbbf24; text-shadow: 0 0 10px rgba(251,191,36,0.32); }
.mc-fee-sub    { font-size: .59rem; color: rgba(148,163,184,0.52); letter-spacing: .02em; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.mc-footer {
    display: flex; gap: 8px;
    padding: .75rem 1.2rem 1rem;
    border-top: 1px solid rgba(255,255,255,0.07);
    margin-top: auto;
}
.mc-btn-subscribe {
    background: linear-gradient(135deg, rgba(14,155,255,0.18) 0%, rgba(87,200,234,0.10) 100%);
    border: 1px solid rgba(14,155,255,0.38);
    color: #57c8ea; font-size: .78rem; font-weight: 700;
    border-radius: 10px; padding: .52rem;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: background .18s, box-shadow .18s, border-color .18s, color .18s;
    text-decoration: none; cursor: pointer;
}
.mc-btn-subscribe:hover {
    background: linear-gradient(135deg, rgba(14,155,255,0.28) 0%, rgba(87,200,234,0.18) 100%);
    border-color: rgba(14,155,255,0.65);
    box-shadow: 0 0 22px rgba(14,155,255,0.28);
    color: #7fe0f5;
}
.mc-btn-details {
    background: rgba(99,102,241,0.08);
    border: 1px solid rgba(99,102,241,0.22);
    color: #a5b4fc; font-size: .78rem; font-weight: 700;
    border-radius: 10px; padding: .52rem;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: background .18s, box-shadow .18s, border-color .18s, color .18s;
    text-decoration: none;
}
.mc-btn-details:hover {
    background: rgba(99,102,241,0.18);
    border-color: rgba(99,102,241,0.45);
    box-shadow: 0 0 18px rgba(99,102,241,0.22);
    color: #c7d2fe;
}
.mc-btn-subscribed {
    background: rgba(16,185,129,0.07); border: 1px solid rgba(16,185,129,0.18);
    color: #10b981; font-size: .78rem; font-weight: 700;
    border-radius: 10px; padding: .52rem;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    opacity: .80;
}
.mc-btn-closed {
    background: rgba(148,163,184,0.06); border: 1px solid rgba(148,163,184,0.16);
    color: #64748b; font-size: .78rem; font-weight: 700;
    border-radius: 10px; padding: .52rem;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}

/* ── Light-mode overrides ────────────────────────────────────────────────── */
[data-theme="light"] .mc-tier-elite    { border-color: rgba(217,119,6,0.30) !important; box-shadow: 0 6px 28px rgba(0,0,0,0.10), 0 0 28px rgba(217,119,6,0.14) !important; }
[data-theme="light"] .mc-tier-platinum { border-color: rgba(37,99,235,0.28)  !important; box-shadow: 0 6px 28px rgba(0,0,0,0.10), 0 0 28px rgba(37,99,235,0.12)  !important; }
[data-theme="light"] .mc-tier-gold     { border-color: rgba(217,119,6,0.22)  !important; }
[data-theme="light"] .mc-tier-silver   { border-color: rgba(100,116,139,0.22) !important; }
[data-theme="light"] .mc-tier-bronze   { border-color: rgba(180,83,9,0.20)   !important; }
[data-theme="light"] .mc-tier-elite::before    { background: linear-gradient(90deg, transparent, rgba(217,119,6,0.80), rgba(245,158,11,0.55), transparent); }
[data-theme="light"] .mc-tier-platinum::before { background: linear-gradient(90deg, transparent, rgba(37,99,235,0.75),  rgba(99,102,241,0.55), transparent); }
[data-theme="light"] .mc-tier-gold::before     { background: linear-gradient(90deg, transparent, rgba(217,119,6,0.60),  rgba(245,158,11,0.45), transparent); }
[data-theme="light"] .mc-tier-silver::before   { background: linear-gradient(90deg, transparent, rgba(100,116,139,0.55), transparent); }
[data-theme="light"] .mc-tier-bronze::before   { background: linear-gradient(90deg, transparent, rgba(180,83,9,0.55),   transparent); }
[data-theme="light"] .mc-header { border-bottom-color: rgba(0,0,0,0.07); }
[data-theme="light"] .mc-avatar-elite    { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.32); color: #d97706; box-shadow: 0 0 18px rgba(245,158,11,0.22); }
[data-theme="light"] .mc-avatar-platinum { background: rgba(37,99,235,0.10);  border-color: rgba(37,99,235,0.30);  color: #2563eb; box-shadow: 0 0 18px rgba(37,99,235,0.18); }
[data-theme="light"] .mc-avatar-gold     { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.25); color: #b45309; box-shadow: none; }
[data-theme="light"] .mc-avatar-silver   { background: rgba(71,85,105,0.08);  border-color: rgba(71,85,105,0.22);  color: #475569; box-shadow: none; }
[data-theme="light"] .mc-avatar-bronze   { background: rgba(180,83,9,0.08);   border-color: rgba(180,83,9,0.22);   color: #b45309; box-shadow: none; }
[data-theme="light"] .mc-name { color: #0f172a; }
[data-theme="light"] .mc-server { color: rgba(71,85,105,0.65); }
[data-theme="light"] .mc-member-since { color: rgba(71,85,105,0.55); }
[data-theme="light"] .mc-status-active     { background: rgba(22,163,74,0.10); border-color: rgba(22,163,74,0.28); color: #15803d; }
[data-theme="light"] .mc-status-subscribed { background: rgba(22,163,74,0.10); border-color: rgba(22,163,74,0.28); color: #16a34a; }
[data-theme="light"] .mc-status-private    { background: rgba(147,51,234,0.10); border-color: rgba(147,51,234,0.28); color: #9333ea; }
[data-theme="light"] .mc-grade-row { background: rgba(0,0,0,0.025); border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .mc-grade-label { color: rgba(71,85,105,0.65); }
[data-theme="light"] .mc-score-value { color: #0f172a; text-shadow: none; }
[data-theme="light"] .mc-score-label { color: rgba(71,85,105,0.55); }
[data-theme="light"] .mc-badges { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .mc-perf-label { color: rgba(71,85,105,0.75); }
[data-theme="light"] .mc-perf-period { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); color: #64748b; }
[data-theme="light"] .mc-stat-item { background: rgba(248,250,252,0.90); border-color: rgba(0,0,0,0.08); box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
[data-theme="light"] .mc-stat-item:hover { background: rgba(241,245,249,1); border-color: rgba(99,102,241,0.20); }
[data-theme="light"] .mc-stat-label { color: rgba(71,85,105,0.65); }
[data-theme="light"] .mc-info-section { background: rgba(248,250,252,0.80); border-color: rgba(0,0,0,0.07); }
[data-theme="light"] .mc-info-row:hover { background: rgba(241,245,249,0.90); }
[data-theme="light"] .mc-divider { background: rgba(0,0,0,0.06); }
[data-theme="light"] .mc-info-icon-blue  { background: rgba(37,99,235,0.08);  border-color: rgba(37,99,235,0.18);  color: #2563eb; }
[data-theme="light"] .mc-info-icon-amber { background: rgba(217,119,6,0.08);  border-color: rgba(217,119,6,0.18);  color: #d97706; }
[data-theme="light"] .mc-info-label { color: rgba(71,85,105,0.80); }
[data-theme="light"] .mc-info-value { color: #0f172a; }
[data-theme="light"] .mc-fee-value  { color: #b45309; text-shadow: none; }
[data-theme="light"] .mc-fee-sub    { color: rgba(71,85,105,0.58); }
[data-theme="light"] .mc-footer { border-top-color: rgba(0,0,0,0.07); }
[data-theme="light"] .mc-btn-subscribe { background: linear-gradient(135deg, rgba(0,119,204,0.14), rgba(14,155,255,0.08)); border-color: rgba(0,119,204,0.35); color: #0063b0; }
[data-theme="light"] .mc-btn-subscribe:hover { background: linear-gradient(135deg, rgba(0,119,204,0.22), rgba(14,155,255,0.14)); border-color: rgba(0,119,204,0.55); color: #004a87; box-shadow: 0 0 18px rgba(0,119,204,0.18); }
[data-theme="light"] .mc-btn-details { background: rgba(99,102,241,0.06); border-color: rgba(99,102,241,0.20); color: #4f46e5; }
[data-theme="light"] .mc-btn-details:hover { background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.38); color: #3730a3; }
[data-theme="light"] .mc-btn-subscribed { background: rgba(22,163,74,0.06); border-color: rgba(22,163,74,0.16); color: #15803d; }
[data-theme="light"] .mc-btn-closed { background: rgba(148,163,184,0.08); border-color: rgba(148,163,184,0.20); color: #94a3b8; }

/* ═══════════════════════════════════════════════════════════════════════════
   Master Details Page  (mdetails-*)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Back button ─────────────────────────────────────────────────────────── */
.mdetails-back-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: .42rem .85rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    color: rgba(148,163,184,0.80);
    font-size: .82rem; font-weight: 600;
    text-decoration: none;
    transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
}
.mdetails-back-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(99,102,241,0.40);
    color: #c7d2fe;
    box-shadow: 0 0 16px rgba(99,102,241,0.18);
}

/* ── Hero panel ──────────────────────────────────────────────────────────── */
.mdetails-hero {
    display: flex; justify-content: space-between; align-items: flex-start;
    flex-wrap: wrap; gap: 1rem;
    padding: 1.5rem 1.75rem;
}
.mdetails-hero-identity {
    display: flex; align-items: center; gap: 1.1rem; min-width: 0; flex: 1;
}
.mdetails-hero-name {
    font-size: 1.45rem; font-weight: 800; color: #f1f5f9;
    letter-spacing: -.01em; line-height: 1.15;
}
.mdetails-hero-meta {
    display: flex; flex-wrap: wrap; gap: .35rem .85rem;
    align-items: center; margin-top: .42rem;
}
.mdetails-hero-meta-item {
    font-size: .77rem; color: rgba(148,163,184,0.72);
    display: flex; align-items: center; gap: 4px;
    white-space: nowrap;
}
.mdetails-hero-meta-item i { opacity: .65; font-size: .8rem; }
.mdetails-hero-action {
    display: flex; align-items: center; flex-shrink: 0; padding-top: .1rem;
}

/* ── Section header ──────────────────────────────────────────────────────── */
.mdetails-section-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.35rem .9rem;
    border-bottom: 1px solid rgba(255,255,255,0.075);
    flex-wrap: wrap; gap: .5rem;
}
.mdetails-section-title {
    display: flex; align-items: center; gap: .55rem;
    font-size: .98rem; font-weight: 700; color: #f1f5f9; letter-spacing: -.008em;
}
.mdetails-section-title-icon {
    width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: .88rem; flex-shrink: 0;
}
.mdetails-icon-amber  { background: rgba(251,191,36,0.14);  border: 1px solid rgba(251,191,36,0.32);  color: #fbbf24; box-shadow: 0 0 12px rgba(251,191,36,0.16); }
.mdetails-icon-green  { background: rgba(16,185,129,0.14);  border: 1px solid rgba(16,185,129,0.32);  color: #10b981; box-shadow: 0 0 12px rgba(16,185,129,0.16); }
.mdetails-icon-blue   { background: rgba(96,165,250,0.14);  border: 1px solid rgba(96,165,250,0.32);  color: #60a5fa; box-shadow: 0 0 12px rgba(96,165,250,0.13); }
.mdetails-icon-purple { background: rgba(167,139,250,0.14); border: 1px solid rgba(167,139,250,0.32); color: #a78bfa; box-shadow: 0 0 12px rgba(167,139,250,0.13); }

/* ── Ranking stat items ───────────────────────────────────────────────────── */
.mdetails-stat-item {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px; padding: .9rem 1rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .3rem; text-align: center;
    transition: background .18s, border-color .18s;
}
.mdetails-stat-item:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.14);
}
.mdetails-stat-value {
    font-size: 1.5rem; font-weight: 800; color: #f1f5f9; line-height: 1.1;
}
.mdetails-stat-label {
    font-size: .68rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .07em; color: rgba(148,163,184,0.55);
}

/* Rankings list */
.mdetails-rank-list { display: flex; flex-direction: column; gap: .45rem; width: 100%; }
.mdetails-rank-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: .48rem .72rem;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.065);
    border-radius: 10px;
    transition: background .15s;
}
.mdetails-rank-row:hover { background: rgba(255,255,255,0.045); }
.mdetails-rank-key {
    font-size: .77rem; color: rgba(148,163,184,0.65);
    display: flex; align-items: center; gap: 5px;
}
.mdetails-rank-val { font-size: .92rem; font-weight: 700; }

/* ── Martingale warning ───────────────────────────────────────────────────── */
.mdetails-warning {
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.38);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(239,68,68,0.10), inset 0 1px 0 rgba(255,255,255,0.04);
    padding: 1rem 1.25rem;
    display: flex; align-items: flex-start; gap: .9rem;
    margin-bottom: 1.25rem;
    position: relative; overflow: hidden;
}
.mdetails-warning::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(239,68,68,0.70), rgba(248,113,113,0.50), transparent);
}
.mdetails-warning-icon {
    width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
    background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.35);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: #f87171;
    box-shadow: 0 0 14px rgba(239,68,68,0.20);
}
.mdetails-warning-title {
    font-size: .92rem; font-weight: 700; color: #f87171;
    text-shadow: 0 0 12px rgba(239,68,68,0.35);
}
.mdetails-warning-text {
    font-size: .78rem; color: rgba(248,113,113,0.65); margin-top: .22rem; line-height: 1.5;
}

/* ── Chart boxes ─────────────────────────────────────────────────────────── */
.mdetails-chart-box {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px; padding: 1rem 1.1rem;
    height: 100%;
    transition: background .18s, border-color .18s;
}
.mdetails-chart-box:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
}
.mdetails-chart-label {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: rgba(148,163,184,0.55); margin-bottom: .65rem;
}

/* ── Empty / loading states ──────────────────────────────────────────────── */
.mdetails-empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 2.5rem 1rem; text-align: center;
}
.mdetails-empty-icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: rgba(251,191,36,0.10); border: 1px solid rgba(251,191,36,0.22);
    color: #fbbf24; font-size: 1.3rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 18px rgba(251,191,36,0.12);
    margin-bottom: .8rem;
}

/* ── Win/Loss progress bar ───────────────────────────────────────────────── */
.mdetails-progress-wrap {
    position: relative; height: 8px; border-radius: 99px;
    overflow: hidden; background: rgba(255,255,255,0.06);
}
.mdetails-progress-bar {
    height: 100%; border-radius: 99px; transition: width .45s ease;
}

/* ── Fee boxes ───────────────────────────────────────────────────────────── */
.mdetails-fee-box {
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 13px; padding: .88rem 1rem;
    height: 100%;
}
.mdetails-fee-label {
    font-size: .68rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .07em; color: rgba(148,163,184,0.55);
}
.mdetails-fee-value {
    font-size: 1.22rem; font-weight: 800; color: #fbbf24;
    text-shadow: 0 0 12px rgba(251,191,36,0.32); margin-top: .22rem;
}
.mdetails-fee-sub {
    font-size: .68rem; color: rgba(148,163,184,0.50); margin-top: .1rem;
}

/* Fee split rows */
.mdetails-split-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: .62rem .85rem;
    border-radius: 10px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.065);
    margin-bottom: .5rem;
    transition: background .15s;
}
.mdetails-split-row:last-child { margin-bottom: 0; }
.mdetails-split-row:hover { background: rgba(255,255,255,0.045); }
.mdetails-split-key {
    font-size: .78rem; color: rgba(148,163,184,0.65);
    display: flex; align-items: center; gap: 7px;
}
.mdetails-split-val { font-size: .95rem; font-weight: 700; }

/* ── Trade filter bar ────────────────────────────────────────────────────── */
.mdetails-filter-bar {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px; padding: .78rem 1rem;
    display: flex; flex-wrap: wrap; gap: .65rem; align-items: flex-end;
    margin-bottom: 1.1rem;
}
.mdetails-filter-label {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: rgba(148,163,184,0.50);
    margin-bottom: .3rem; display: block;
}

/* ── Light-mode overrides ────────────────────────────────────────────────── */
[data-theme="light"] .mdetails-back-btn { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); color: #475569; }
[data-theme="light"] .mdetails-back-btn:hover { background: rgba(99,102,241,0.08); border-color: rgba(99,102,241,0.30); color: #4f46e5; box-shadow: 0 0 12px rgba(99,102,241,0.14); }
[data-theme="light"] .mdetails-hero-name { color: #0f172a; }
[data-theme="light"] .mdetails-hero-meta-item { color: rgba(71,85,105,0.75); }
[data-theme="light"] .mdetails-section-header { border-bottom-color: rgba(0,0,0,0.07); }
[data-theme="light"] .mdetails-section-title { color: #0f172a; }
[data-theme="light"] .mdetails-icon-amber  { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.28); color: #d97706; box-shadow: none; }
[data-theme="light"] .mdetails-icon-green  { background: rgba(22,163,74,0.10);  border-color: rgba(22,163,74,0.28);  color: #15803d; box-shadow: none; }
[data-theme="light"] .mdetails-icon-blue   { background: rgba(37,99,235,0.10);  border-color: rgba(37,99,235,0.28);  color: #2563eb; box-shadow: none; }
[data-theme="light"] .mdetails-icon-purple { background: rgba(109,40,217,0.08); border-color: rgba(109,40,217,0.25); color: #7c3aed; box-shadow: none; }
[data-theme="light"] .mdetails-stat-item { background: rgba(248,250,252,0.90); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .mdetails-stat-item:hover { background: rgba(241,245,249,1); border-color: rgba(99,102,241,0.18); }
[data-theme="light"] .mdetails-stat-value { color: #0f172a; }
[data-theme="light"] .mdetails-stat-label { color: rgba(71,85,105,0.60); }
[data-theme="light"] .mdetails-rank-row { background: rgba(248,250,252,0.80); border-color: rgba(0,0,0,0.07); }
[data-theme="light"] .mdetails-rank-row:hover { background: rgba(241,245,249,0.95); }
[data-theme="light"] .mdetails-rank-key { color: rgba(71,85,105,0.72); }
[data-theme="light"] .mdetails-warning { background: rgba(220,38,38,0.06); border-color: rgba(220,38,38,0.30); box-shadow: 0 4px 16px rgba(220,38,38,0.08); }
[data-theme="light"] .mdetails-warning::before { background: linear-gradient(90deg, transparent, rgba(220,38,38,0.65), rgba(239,68,68,0.45), transparent); }
[data-theme="light"] .mdetails-warning-title { color: #b91c1c; text-shadow: none; }
[data-theme="light"] .mdetails-warning-text { color: rgba(153,27,27,0.75); }
[data-theme="light"] .mdetails-warning-icon { background: rgba(220,38,38,0.10); border-color: rgba(220,38,38,0.25); color: #dc2626; box-shadow: none; }
[data-theme="light"] .mdetails-chart-box { background: rgba(248,250,252,0.80); border-color: rgba(0,0,0,0.07); }
[data-theme="light"] .mdetails-chart-box:hover { background: rgba(241,245,249,0.95); border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .mdetails-chart-label { color: rgba(71,85,105,0.70); }
[data-theme="light"] .mdetails-empty-icon { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.20); color: #d97706; box-shadow: none; }
[data-theme="light"] .mdetails-progress-wrap { background: rgba(0,0,0,0.06); }
[data-theme="light"] .mdetails-fee-box { background: rgba(248,250,252,0.80); border-color: rgba(0,0,0,0.07); }
[data-theme="light"] .mdetails-fee-label { color: rgba(71,85,105,0.60); }
[data-theme="light"] .mdetails-fee-value { color: #b45309; text-shadow: none; }
[data-theme="light"] .mdetails-fee-sub { color: rgba(71,85,105,0.55); }
[data-theme="light"] .mdetails-split-row { background: rgba(248,250,252,0.80); border-color: rgba(0,0,0,0.07); }
[data-theme="light"] .mdetails-split-row:hover { background: rgba(241,245,249,0.95); }
[data-theme="light"] .mdetails-split-key { color: rgba(71,85,105,0.72); }
[data-theme="light"] .mdetails-filter-bar { background: rgba(248,250,252,0.80); border-color: rgba(0,0,0,0.07); }
[data-theme="light"] .mdetails-filter-label { color: rgba(71,85,105,0.60); }

/* ── Fee Structure — enhanced components ─────────────────────────────────── */

/* Fee highlight boxes (replaces plain mdetails-fee-box for the two top boxes) */
.mdetails-fee-highlight {
    border-radius: 14px; padding: 1rem 1rem .9rem;
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: .18rem;
    height: 100%;
    transition: transform .18s, box-shadow .18s;
}
.mdetails-fee-highlight:hover { transform: translateY(-2px); }

/* Subscription fee — amber accent */
.mdetails-fee-highlight-sub {
    background: rgba(251,191,36,0.07);
    border: 1px solid rgba(251,191,36,0.22);
    box-shadow: 0 4px 18px rgba(251,191,36,0.08);
}
.mdetails-fee-highlight-sub::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(251,191,36,0.75), rgba(245,158,11,0.55), transparent);
}
/* Performance fee — purple accent */
.mdetails-fee-highlight-perf {
    background: rgba(167,139,250,0.07);
    border: 1px solid rgba(167,139,250,0.22);
    box-shadow: 0 4px 18px rgba(167,139,250,0.08);
}
.mdetails-fee-highlight-perf::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(167,139,250,0.75), rgba(139,92,246,0.55), transparent);
}

/* Icon boxes inside fee highlights */
.mdetails-fee-hl-icon {
    width: 30px; height: 30px; border-radius: 9px; margin-bottom: .45rem;
    display: flex; align-items: center; justify-content: center;
    font-size: .82rem;
    background: rgba(251,191,36,0.14); border: 1px solid rgba(251,191,36,0.28);
    color: #fbbf24; box-shadow: 0 0 10px rgba(251,191,36,0.15);
}
.mdetails-fee-hl-icon-perf {
    background: rgba(167,139,250,0.14); border-color: rgba(167,139,250,0.28);
    color: #a78bfa; box-shadow: 0 0 10px rgba(167,139,250,0.15);
}
.mdetails-fee-hl-label {
    font-size: .64rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: rgba(148,163,184,0.55);
}
.mdetails-fee-hl-value {
    font-size: 1.35rem; font-weight: 900; color: #fbbf24;
    text-shadow: 0 0 18px rgba(251,191,36,0.40); line-height: 1.1;
    margin-top: .1rem;
}
.mdetails-fee-hl-value-perf {
    color: #c4b5fd; text-shadow: 0 0 18px rgba(167,139,250,0.42);
}
.mdetails-fee-hl-sub {
    font-size: .66rem; color: rgba(148,163,184,0.48); margin-top: .05rem;
}

/* Split section container */
.mdetails-fee-split-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px; padding: .88rem 1rem;
}

/* Visual split bar */
.mdetails-split-viz-bar {
    height: 10px; border-radius: 99px; overflow: hidden;
    display: flex; background: rgba(255,255,255,0.05);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.30);
}
.mdetails-split-viz-master {
    background: linear-gradient(90deg, #059669, #10b981);
    display: flex; align-items: center; justify-content: flex-end;
    padding-right: 6px; transition: width .55s cubic-bezier(.34,1.56,.64,1);
    font-size: .55rem; font-weight: 800; color: rgba(255,255,255,0.90);
    letter-spacing: .02em;
}
.mdetails-split-viz-platform {
    background: linear-gradient(90deg, #d97706, #fbbf24);
    display: flex; align-items: center; justify-content: flex-start;
    padding-left: 6px; transition: width .55s cubic-bezier(.34,1.56,.64,1);
    font-size: .55rem; font-weight: 800; color: rgba(255,255,255,0.90);
    letter-spacing: .02em;
}

/* Legend dots */
.mdetails-split-legend {
    font-size: .7rem; font-weight: 600; color: rgba(148,163,184,0.60);
    display: flex; align-items: center; gap: 5px;
}
.mdetails-split-dot {
    width: 7px; height: 7px; border-radius: 50%; display: inline-block;
    flex-shrink: 0;
}

/* Split detail row icon boxes */
.mdetails-split-row-icon {
    width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .76rem; border: 1px solid transparent;
}

/* Override split-row padding inside fee-split-card for tighter look */
.mdetails-fee-split-card .mdetails-split-row {
    padding: .55rem .65rem;
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.06);
}

/* Custom password input */
.mdetails-pwd-wrap {
    display: flex; align-items: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 11px; overflow: hidden;
    transition: border-color .18s, box-shadow .18s;
}
.mdetails-pwd-wrap:focus-within {
    border-color: rgba(251,191,36,0.40);
    box-shadow: 0 0 0 3px rgba(251,191,36,0.08);
}
.mdetails-pwd-input {
    flex: 1; background: transparent; border: none; outline: none;
    color: #e2e8f0; font-size: .82rem; letter-spacing: .12em;
    padding: .55rem .75rem;
}
.mdetails-pwd-input::placeholder { color: rgba(148,163,184,0.35); }
.mdetails-pwd-btn {
    width: 38px; height: 38px; flex-shrink: 0;
    background: rgba(255,255,255,0.05); border: none; border-left: 1px solid rgba(255,255,255,0.10);
    color: rgba(148,163,184,0.60); font-size: .9rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .16s, color .16s;
}
.mdetails-pwd-btn:hover {
    background: rgba(251,191,36,0.12); color: #fbbf24;
}

/* ── Light-mode overrides for new fee components ─────────────────────────── */
[data-theme="light"] .mdetails-fee-highlight-sub { background: rgba(245,158,11,0.06); border-color: rgba(245,158,11,0.22); box-shadow: 0 3px 14px rgba(245,158,11,0.07); }
[data-theme="light"] .mdetails-fee-highlight-perf { background: rgba(109,40,217,0.05); border-color: rgba(109,40,217,0.18); box-shadow: 0 3px 14px rgba(109,40,217,0.06); }
[data-theme="light"] .mdetails-fee-hl-icon { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.28); color: #d97706; box-shadow: none; }
[data-theme="light"] .mdetails-fee-hl-icon-perf { background: rgba(109,40,217,0.08); border-color: rgba(109,40,217,0.22); color: #7c3aed; box-shadow: none; }
[data-theme="light"] .mdetails-fee-hl-label { color: rgba(71,85,105,0.62); }
[data-theme="light"] .mdetails-fee-hl-value { color: #b45309; text-shadow: none; }
[data-theme="light"] .mdetails-fee-hl-value-perf { color: #6d28d9; text-shadow: none; }
[data-theme="light"] .mdetails-fee-hl-sub { color: rgba(71,85,105,0.52); }
[data-theme="light"] .mdetails-fee-split-card { background: rgba(248,250,252,0.80); border-color: rgba(0,0,0,0.07); }
[data-theme="light"] .mdetails-split-viz-bar { background: rgba(0,0,0,0.05); box-shadow: inset 0 1px 2px rgba(0,0,0,0.12); }
[data-theme="light"] .mdetails-split-legend { color: rgba(71,85,105,0.65); }
[data-theme="light"] .mdetails-fee-split-card .mdetails-split-row { background: rgba(248,250,252,0.70); border-color: rgba(0,0,0,0.065); }
[data-theme="light"] .mdetails-pwd-wrap { background: rgba(248,250,252,0.90); border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .mdetails-pwd-wrap:focus-within { border-color: rgba(245,158,11,0.50); box-shadow: 0 0 0 3px rgba(245,158,11,0.10); }
[data-theme="light"] .mdetails-pwd-input { color: #0f172a; }
[data-theme="light"] .mdetails-pwd-btn { background: rgba(0,0,0,0.03); border-left-color: rgba(0,0,0,0.09); color: #64748b; }
[data-theme="light"] .mdetails-pwd-btn:hover { background: rgba(245,158,11,0.10); color: #d97706; }

/* ═══════════════════════════════════════════════════════════════════════════
   Performance Profile  (pp-*)  — the ranking-factor radar on master details
   ═══════════════════════════════════════════════════════════════════════════ */

/* Chart.js needs a sized, positioned parent when maintainAspectRatio is false */
.pp-radar-wrap { position: relative; width: 100%; height: 260px; }
.pp-radar-wrap canvas { display: block; width: 100% !important; height: 100% !important; }

/* ── Factor score bars ───────────────────────────────────────────────────── */
.pp-factor-list {
    display: flex; flex-direction: column; gap: .62rem;
    height: 100%; justify-content: center;
}
.pp-factor-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
    margin-bottom: .28rem;
}
.pp-factor-name {
    font-size: .76rem; font-weight: 700; color: #f1f5f9;
    display: inline-flex; align-items: center; gap: .35rem;
}
.pp-factor-weight {
    font-size: .58rem; font-weight: 700; letter-spacing: .05em;
    padding: .08rem .3rem; border-radius: 5px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    color: rgba(148,163,184,0.70);
}
.pp-factor-val {
    font-size: .94rem; font-weight: 900; line-height: 1; letter-spacing: -.02em;
}
.pp-factor-track {
    height: 6px; border-radius: 99px; overflow: hidden;
    background: rgba(255,255,255,0.05);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.35);
}
.pp-factor-fill {
    height: 100%; border-radius: 99px;
    transition: width .65s cubic-bezier(.34,1.56,.64,1);
}
.pp-factor-hint {
    font-size: .62rem; color: rgba(148,163,184,0.50); margin-top: .22rem;
}

/* ── Underlying metrics grid ─────────────────────────────────────────────── */
.pp-metrics-grid {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem;
}
.pp-metric {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 11px; padding: .55rem .4rem; text-align: center;
    transition: background .16s, border-color .16s;
}
.pp-metric:hover { background: rgba(255,255,255,0.055); border-color: rgba(255,255,255,0.12); }
.pp-metric-val {
    font-size: .96rem; font-weight: 800; color: #f1f5f9; line-height: 1.1;
    letter-spacing: -.01em;
}
.pp-metric-lbl {
    font-size: .55rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: rgba(148,163,184,0.50); margin-top: .22rem;
}

@media (max-width: 1199.98px) {
    .pp-metrics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pp-factor-list  { margin-top: .5rem; }
}
@media (max-width: 575.98px) {
    .pp-metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pp-radar-wrap   { height: 230px; }
}

/* ── Light-mode overrides ────────────────────────────────────────────────── */
[data-theme="light"] .pp-factor-name   { color: #0f172a; }
[data-theme="light"] .pp-factor-weight { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.09); color: #64748b; }
[data-theme="light"] .pp-factor-track  { background: rgba(0,0,0,0.06); box-shadow: inset 0 1px 2px rgba(0,0,0,0.12); }
[data-theme="light"] .pp-factor-hint   { color: rgba(71,85,105,0.62); }
[data-theme="light"] .pp-metric        { background: rgba(248,250,252,0.85); border-color: rgba(0,0,0,0.07); }
[data-theme="light"] .pp-metric:hover  { background: rgba(241,245,249,0.95); border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .pp-metric-val    { color: #0f172a; }
[data-theme="light"] .pp-metric-lbl    { color: rgba(71,85,105,0.58); }

/* ═══════════════════════════════════════════════════════════════════════════
   Ranking & Risk Profile  (rkp-*)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Score panel ─────────────────────────────────────────────────────────── */
.rkp-score-panel {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px; padding: 1.5rem 1rem 1.25rem;
    display: flex; flex-direction: column; align-items: center; text-align: center;
}

/* Tier ring icon */
.rkp-tier-ring {
    width: 76px; height: 76px; border-radius: 22px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.4rem; position: relative;
    transition: transform .22s ease, box-shadow .22s ease;
}
.rkp-score-panel:hover .rkp-tier-ring { transform: scale(1.06) rotate(-4deg); }
.rkp-ring-elite    { background: rgba(251,191,36,0.14); border: 2px solid rgba(251,191,36,0.42); color: #fbbf24; box-shadow: 0 0 32px rgba(251,191,36,0.28), inset 0 1px 0 rgba(251,191,36,0.20); }
.rkp-ring-platinum { background: rgba(96,165,250,0.14);  border: 2px solid rgba(96,165,250,0.42);  color: #93c5fd; box-shadow: 0 0 32px rgba(96,165,250,0.28),  inset 0 1px 0 rgba(96,165,250,0.20); }
.rkp-ring-gold     { background: rgba(234,179,8,0.14);   border: 2px solid rgba(234,179,8,0.38);   color: #fde68a; box-shadow: 0 0 26px rgba(234,179,8,0.24); }
.rkp-ring-silver   { background: rgba(148,163,184,0.12); border: 2px solid rgba(148,163,184,0.32); color: #cbd5e1; box-shadow: 0 0 20px rgba(148,163,184,0.18); }
.rkp-ring-bronze   { background: rgba(194,120,68,0.14);  border: 2px solid rgba(194,120,68,0.40);  color: #fdba74; box-shadow: 0 0 26px rgba(194,120,68,0.24); }

/* Score number */
.rkp-score-num {
    font-size: 2.6rem; font-weight: 900; line-height: 1; letter-spacing: -.03em;
}
.rkp-score-lbl {
    font-size: .62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: rgba(148,163,184,0.50); margin-top: .22rem;
}

/* Score progress bar */
.rkp-score-bar-wrap {
    width: 100%; height: 6px; border-radius: 99px; overflow: hidden;
    background: rgba(255,255,255,0.07);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.30);
}
.rkp-score-bar {
    height: 100%; border-radius: 99px;
    transition: width .65s cubic-bezier(.34,1.56,.64,1);
    box-shadow: 0 0 8px currentColor;
}

/* Score hint text */
.rkp-score-hint {
    font-size: .7rem; font-weight: 600; color: rgba(148,163,184,0.52);
    margin-top: .28rem; display: flex; align-items: center; gap: 5px;
}
.rkp-score-hint-sep { opacity: .4; }

/* Overall rank pill */
.rkp-rank-pill {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 99px; padding: .28rem .75rem;
    font-size: .76rem; font-weight: 700; color: rgba(148,163,184,0.75);
}
.rkp-rank-pill i { font-size: .72rem; opacity: .7; }
.rkp-rank-pill span { font-size: .65rem; color: rgba(148,163,184,0.50); font-weight: 500; }

/* ── Sub-panels (Rankings / Grades) ─────────────────────────────────────── */
.rkp-panel {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px; overflow: hidden;
}
.rkp-panel-hdr {
    display: flex; align-items: center; gap: .45rem;
    font-size: .66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: rgba(148,163,184,0.55);
    padding: .65rem 1rem .55rem;
    border-bottom: 1px solid rgba(255,255,255,0.065);
}

/* ── Rankings 3-col grid ─────────────────────────────────────────────────── */
.rkp-rank-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: .5rem; padding: .75rem;
}
.rkp-rank-cell {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.14);
    border-radius: 12px; padding: .8rem .5rem;
    display: flex; flex-direction: column; align-items: center; gap: .28rem;
    transition: background .16s, border-color .16s;
}
.rkp-rank-cell:hover {
    background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.22);
}
.rkp-rank-cell-icon {
    width: 30px; height: 30px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: .78rem; border: 1px solid transparent;
    margin-bottom: .1rem;
}
.rkp-rank-cell-cat {
    font-size: .62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: rgba(148,163,184,0.50);
}
.rkp-rank-cell-num {
    font-size: 1.4rem; font-weight: 900; line-height: 1; letter-spacing: -.02em;
}
.rkp-rank-cell-sub {
    font-size: .58rem; font-weight: 600; letter-spacing: .04em;
    color: rgba(148,163,184,0.62); text-align: center; margin-top: .05rem;
}

/* ── Grades 2-col grid ───────────────────────────────────────────────────── */
.rkp-grades-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: .5rem; padding: .75rem;
}
.rkp-grade-card {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.14);
    border-radius: 12px; padding: .9rem .75rem;
    display: flex; flex-direction: column; align-items: center; gap: .22rem;
    transition: background .16s, border-color .16s;
}
.rkp-grade-card:hover {
    background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.22);
}
.rkp-grade-category {
    font-size: .64rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: rgba(148,163,184,0.55);
}
.rkp-grade-letter {
    font-size: 2.5rem; font-weight: 900; line-height: 1; letter-spacing: -.02em;
    margin: .15rem 0 .05rem;
}
.rkp-grade-desc {
    font-size: .66rem; font-weight: 500; line-height: 1.25;
    color: rgba(148,163,184,0.72); text-align: center; max-width: 92%;
}

/* Grade scale pills */
.rkp-grade-scale {
    display: flex; gap: 3px; margin-top: .3rem;
}
.rkp-grade-scale-pip {
    font-size: .58rem; font-weight: 700; padding: 2px 5px;
    border-radius: 5px;
    background: rgba(255,255,255,0.04); color: rgba(148,163,184,0.42);
    border: 1px solid rgba(255,255,255,0.10);
    transition: all .18s;
}
.rkp-grade-scale-active {
    background: rgba(255,255,255,0.12) !important;
    color: #f1f5f9 !important;
    border-color: rgba(255,255,255,0.18) !important;
    box-shadow: 0 0 8px rgba(255,255,255,0.08);
}

/* ── Badges row ──────────────────────────────────────────────────────────── */
.rkp-badges-row {
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px; padding: .8rem 1rem;
    display: flex; flex-wrap: wrap; align-items: center; gap: .65rem;
}
.rkp-badges-hdr {
    font-size: .66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: rgba(148,163,184,0.55); white-space: nowrap;
}

/* ── Light-mode overrides ────────────────────────────────────────────────── */
[data-theme="light"] .rkp-score-panel { background: rgba(248,250,252,0.85); border-color: rgba(0,0,0,0.07); }
[data-theme="light"] .rkp-ring-elite    { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.32); color: #d97706; box-shadow: 0 0 22px rgba(245,158,11,0.18); }
[data-theme="light"] .rkp-ring-platinum { background: rgba(37,99,235,0.10);  border-color: rgba(37,99,235,0.30);  color: #2563eb; box-shadow: 0 0 22px rgba(37,99,235,0.15); }
[data-theme="light"] .rkp-ring-gold     { background: rgba(217,119,6,0.10);  border-color: rgba(217,119,6,0.28);  color: #b45309; box-shadow: none; }
[data-theme="light"] .rkp-ring-silver   { background: rgba(71,85,105,0.08);  border-color: rgba(71,85,105,0.24);  color: #475569; box-shadow: none; }
[data-theme="light"] .rkp-ring-bronze   { background: rgba(180,83,9,0.08);   border-color: rgba(180,83,9,0.24);   color: #b45309; box-shadow: none; }
[data-theme="light"] .rkp-score-lbl   { color: rgba(71,85,105,0.60); }
[data-theme="light"] .rkp-score-bar-wrap { background: rgba(0,0,0,0.07); }
[data-theme="light"] .rkp-score-hint  { color: rgba(71,85,105,0.55); }
[data-theme="light"] .rkp-rank-pill   { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.10); color: #475569; }
[data-theme="light"] .rkp-panel       { background: rgba(248,250,252,0.85); border-color: rgba(0,0,0,0.07); }
[data-theme="light"] .rkp-panel-hdr   { border-bottom-color: rgba(0,0,0,0.07); color: rgba(71,85,105,0.60); }
[data-theme="light"] .rkp-rank-cell   { background: rgba(248,250,252,0.80); border-color: rgba(15,23,42,0.14); }
[data-theme="light"] .rkp-rank-cell:hover { background: rgba(241,245,249,1); border-color: rgba(99,102,241,0.30); }
[data-theme="light"] .rkp-rank-cell-cat { color: rgba(71,85,105,0.60); }
[data-theme="light"] .rkp-rank-cell-sub { color: rgba(71,85,105,0.68); }
[data-theme="light"] .rkp-grade-card  { background: rgba(248,250,252,0.80); border-color: rgba(15,23,42,0.14); }
[data-theme="light"] .rkp-grade-card:hover { background: rgba(241,245,249,1); border-color: rgba(99,102,241,0.30); }
[data-theme="light"] .rkp-grade-category { color: rgba(71,85,105,0.60); }
[data-theme="light"] .rkp-grade-desc  { color: rgba(71,85,105,0.78); }
[data-theme="light"] .rkp-grade-scale-pip { background: rgba(0,0,0,0.04); border-color: rgba(15,23,42,0.12); color: rgba(100,116,139,0.50); }
[data-theme="light"] .rkp-grade-scale-active { background: rgba(0,0,0,0.10) !important; color: #0f172a !important; border-color: rgba(0,0,0,0.18) !important; box-shadow: none; }
[data-theme="light"] .rkp-badges-row  { background: rgba(248,250,252,0.80); border-color: rgba(0,0,0,0.07); }
[data-theme="light"] .rkp-badges-hdr  { color: rgba(71,85,105,0.60); }

/* ═══════════════════════════════════════════════════════════════════════════
   glass-card-accent-red / glass-card-accent-grey  (used by My Masters cards)
   ═══════════════════════════════════════════════════════════════════════════ */
.glass-card-accent-red {
    border-color: rgba(239,68,68,0.20) !important;
    box-shadow: 0 8px 36px rgba(0,0,0,0.42), 0 0 28px rgba(239,68,68,0.09),
                inset 0 1px 0 rgba(255,255,255,0.07) !important;
    position: relative; overflow: hidden;
}
.glass-card-accent-red::before {
    content: '';
    position: absolute; top: 0; left: 8%; right: 8%; height: 2px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, rgba(239,68,68,0.65), transparent);
    pointer-events: none; z-index: 1;
}
.glass-card-accent-grey {
    border-color: rgba(100,116,139,0.16) !important;
    box-shadow: 0 8px 36px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.06) !important;
    position: relative; overflow: hidden;
}
.glass-card-accent-grey::before {
    content: '';
    position: absolute; top: 0; left: 8%; right: 8%; height: 2px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, rgba(100,116,139,0.45), transparent);
    pointer-events: none; z-index: 1;
}
[data-theme="light"] .glass-card-accent-red  { border-color: rgba(220,38,38,0.18) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 0 18px rgba(220,38,38,0.07) !important; }
[data-theme="light"] .glass-card-accent-grey { border-color: rgba(100,116,139,0.14) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   My Masters page  (mym-*)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Card wrapper */
.mym-card {
    border-radius: 20px !important;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
}
.mym-card:hover { transform: translateY(-4px); }

/* ── Header block ──────────────────────────────────────────────────────── */
.mym-header {
    padding: 1.15rem 1.15rem .75rem;
    display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
}

/* Avatar */
.mym-avatar {
    width: 54px; height: 54px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; flex-shrink: 0;
    border: 1px solid transparent;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
}
.mym-card:hover .mym-avatar { transform: scale(1.07) rotate(-4deg); }
.mym-avatar-active   { background: rgba(16,185,129,0.14);  border-color: rgba(16,185,129,0.38);  color: #10b981; box-shadow: 0 0 24px rgba(16,185,129,0.30), inset 0 1px 0 rgba(16,185,129,0.20); }
.mym-avatar-pending  { background: rgba(245,158,11,0.14);  border-color: rgba(245,158,11,0.38);  color: #fbbf24; box-shadow: 0 0 22px rgba(245,158,11,0.28), inset 0 1px 0 rgba(245,158,11,0.20); }
.mym-avatar-rejected { background: rgba(239,68,68,0.12);   border-color: rgba(239,68,68,0.32);   color: #f87171; box-shadow: 0 0 14px rgba(239,68,68,0.20); }
.mym-avatar-inactive { background: rgba(100,116,139,0.10); border-color: rgba(100,116,139,0.26); color: #94a3b8; box-shadow: none; }

/* Name / server */
.mym-name   { font-size: 1rem; font-weight: 800; color: #f1f5f9; letter-spacing: -.01em; }
.mym-server { font-size: .72rem; color: rgba(148,163,184,0.58); }

/* Meta row */
.mym-meta {
    display: flex; gap: .85rem; flex-wrap: wrap;
    padding: 0 1.15rem .7rem;
    font-size: .73rem; color: rgba(148,163,184,0.58);
}

/* Dividers */
.mym-divider     { height: 1px; background: rgba(255,255,255,0.07); }

/* Alert boxes */
.mym-alert-box {
    display: flex; align-items: flex-start; gap: .55rem;
    border-radius: 12px; padding: .65rem .85rem;
    font-size: .78rem;
}
.mym-alert-amber { background: rgba(245,158,11,0.10); border: 1px solid rgba(245,158,11,0.22); color: #fde68a; }
.mym-alert-red   { background: rgba(239,68,68,0.10);  border: 1px solid rgba(239,68,68,0.22);  color: #fca5a5; }
.mym-alert-blue  { background: rgba(59,130,246,0.10); border: 1px solid rgba(59,130,246,0.22); color: #bfdbfe; }

/* ── Performance section ─────────────────────────────────────────────── */
.mym-perf-hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: .75rem 1.15rem .45rem;
}
.mym-perf-lbl {
    font-size: .62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .09em; color: rgba(148,163,184,0.55);
}

/* 2×2 stat grid */
.mym-stat-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: .45rem;
}
.mym-stat-box {
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px; padding: .75rem .55rem .6rem;
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: .08rem;
    transition: background .16s, border-color .16s, transform .18s ease;
}
.mym-stat-box:hover {
    background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.13);
    transform: translateY(-1px);
}
.mym-stat-icon-box {
    width: 26px; height: 26px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: .68rem; border: 1px solid transparent;
    margin-bottom: .2rem;
}
.mym-stat-val {
    font-size: 1.2rem; font-weight: 900; line-height: 1.1; letter-spacing: -.02em;
}
.mym-stat-lbl {
    font-size: .57rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: rgba(148,163,184,0.48); margin-top: .06rem;
}

/* ── Live positions row ──────────────────────────────────────────────── */
.mym-live-row { gap: .6rem; }
.mym-live-box {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    padding: .55rem .75rem;
    text-align: center;
}
.mym-live-lbl {
    font-size: .57rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: rgba(148,163,184,0.48); margin-bottom: .18rem;
}
.mym-live-val {
    font-size: 1.05rem; font-weight: 700; color: #f1f5f9;
    letter-spacing: -.01em;
}
[data-theme="light"] .mym-live-box  { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.07); }
[data-theme="light"] .mym-live-lbl  { color: rgba(71,85,105,0.52); }
[data-theme="light"] .mym-live-val  { color: #1e293b; }

/* Win-rate mini bar */
.mym-winbar-mini {
    width: 80%; height: 4px;
    background: rgba(255,255,255,0.07); border-radius: 99px; overflow: hidden;
    margin-top: .3rem;
}
.mym-winbar-mini-fill {
    height: 100%; border-radius: 99px;
    transition: width 1.0s cubic-bezier(.34,1.56,.64,1) .35s;
}

/* ── Fee row ─────────────────────────────────────────────────────────── */
.mym-fee-row {
    display: flex; align-items: stretch; justify-content: space-around;
    padding: .65rem 1.15rem .55rem;
}
.mym-fee-item  { display: flex; flex-direction: column; align-items: center; gap: .22rem; flex: 1; }
.mym-fee-sep   { width: 1px; background: rgba(255,255,255,0.07); margin: .1rem 0; flex-shrink: 0; }
.mym-fee-icon  {
    width: 28px; height: 28px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; border: 1px solid transparent;
}
.mym-fee-val   { font-size: .82rem; font-weight: 700; color: #f1f5f9; letter-spacing: -.01em; white-space: nowrap; }
.mym-fee-period{ font-size: .62rem; font-weight: 500; color: rgba(148,163,184,0.52); margin-left: .08rem; }
.mym-fee-lbl   { font-size: .56rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: rgba(148,163,184,0.45); }

/* ── Footer ──────────────────────────────────────────────────────────── */
.mym-footer {
    padding: .8rem 1.15rem 1.1rem;
    display: flex; flex-direction: column; gap: .5rem;
    margin-top: auto;
}

/* View Details button */
.mym-view-btn {
    display: flex; align-items: center; justify-content: center; gap: .55rem;
    width: 100%;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px; padding: .62rem 1rem;
    color: #e2e8f0; font-size: .85rem; font-weight: 600;
    text-decoration: none;
    transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
}
.mym-view-btn:hover {
    background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.34);
    color: #10b981; box-shadow: 0 0 18px rgba(16,185,129,0.12);
    text-decoration: none;
}
.mym-view-btn i { font-size: .9rem; transition: transform .18s; }
.mym-view-btn:hover i { transform: translateX(3px); }

/* Share link button */
.mym-share-btn {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; cursor: pointer;
    background: rgba(251,191,36,0.07); border: 1px solid rgba(251,191,36,0.24);
    border-radius: 12px; padding: .58rem 1rem;
    color: #fde68a; font-size: .8rem; font-weight: 600;
    transition: background .18s, border-color .18s, box-shadow .18s;
}
.mym-share-btn:hover {
    background: rgba(251,191,36,0.14); border-color: rgba(251,191,36,0.40);
    box-shadow: 0 0 14px rgba(251,191,36,0.14);
}

/* ── Light-mode overrides ────────────────────────────────────────────── */
[data-theme="light"] .mym-name    { color: #0f172a; }
[data-theme="light"] .mym-server  { color: rgba(71,85,105,0.62); }
[data-theme="light"] .mym-meta    { color: rgba(71,85,105,0.60); }
[data-theme="light"] .mym-divider { background: rgba(0,0,0,0.07); }
[data-theme="light"] .mym-perf-lbl { color: rgba(71,85,105,0.55); }
[data-theme="light"] .mym-stat-box { background: rgba(255,255,255,0.70); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .mym-stat-box:hover { background: rgba(255,255,255,0.92); border-color: rgba(0,0,0,0.13); }
[data-theme="light"] .mym-stat-lbl { color: rgba(71,85,105,0.52); }
[data-theme="light"] .mym-winbar-mini { background: rgba(0,0,0,0.08); }
[data-theme="light"] .mym-fee-sep  { background: rgba(0,0,0,0.07); }
[data-theme="light"] .mym-fee-val  { color: #0f172a; }
[data-theme="light"] .mym-fee-period { color: rgba(71,85,105,0.58); }
[data-theme="light"] .mym-fee-lbl  { color: rgba(71,85,105,0.52); }
[data-theme="light"] .mym-view-btn { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.10); color: #1e293b; }
[data-theme="light"] .mym-view-btn:hover { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.28); color: #065f46; box-shadow: 0 0 12px rgba(16,185,129,0.10); }
[data-theme="light"] .mym-share-btn { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.25); color: #b45309; }
[data-theme="light"] .mym-share-btn:hover { background: rgba(245,158,11,0.14); border-color: rgba(245,158,11,0.38); }
[data-theme="light"] .mym-alert-amber { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.20); color: #92400e; }
[data-theme="light"] .mym-alert-red   { background: rgba(239,68,68,0.08);  border-color: rgba(239,68,68,0.20);  color: #b91c1c; }
[data-theme="light"] .mym-alert-blue  { background: rgba(59,130,246,0.08); border-color: rgba(59,130,246,0.20); color: #1d4ed8; }
[data-theme="light"] .mym-avatar-active   { background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.30); color: #059669; box-shadow: 0 0 16px rgba(16,185,129,0.18); }
[data-theme="light"] .mym-avatar-pending  { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.30); color: #d97706; box-shadow: 0 0 14px rgba(245,158,11,0.16); }
[data-theme="light"] .mym-avatar-rejected { background: rgba(239,68,68,0.08);  border-color: rgba(239,68,68,0.24);  color: #dc2626; box-shadow: none; }
[data-theme="light"] .mym-avatar-inactive { background: rgba(100,116,139,0.08); border-color: rgba(100,116,139,0.22); color: #475569; }

/* ═══════════════════════════════════════════════════════════════════════════
   My Copier Accounts page  (myc-*)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Card wrapper */
.myc-card {
    border-radius: 20px !important;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
}
.myc-card:hover { transform: translateY(-4px); }

/* ── Header block ──────────────────────────────────────────────────────── */
.myc-header {
    padding: 1.15rem 1.15rem .75rem;
    display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
}

/* Avatar */
.myc-avatar {
    width: 54px; height: 54px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; flex-shrink: 0;
    border: 1px solid transparent;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
}
.myc-card:hover .myc-avatar { transform: scale(1.07) rotate(-4deg); }
.myc-avatar-active   { background: rgba(96,165,250,0.14);  border-color: rgba(96,165,250,0.38);  color: #60a5fa; box-shadow: 0 0 24px rgba(96,165,250,0.28),  inset 0 1px 0 rgba(96,165,250,0.18); }
.myc-avatar-inactive { background: rgba(100,116,139,0.10); border-color: rgba(100,116,139,0.26); color: #94a3b8; box-shadow: none; }

.myc-name   { font-size: 1rem; font-weight: 800; color: #f1f5f9; letter-spacing: -.01em; }
.myc-server { font-size: .72rem; color: rgba(148,163,184,0.58); }

/* ── Copying section ─────────────────────────────────────────────────── */
.myc-section-label {
    font-size: .60rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .09em; color: rgba(148,163,184,0.52);
}
.myc-copying-wrap { display: flex; flex-wrap: wrap; gap: .38rem; }
.myc-master-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    background: rgba(16,185,129,0.10); border: 1px solid rgba(16,185,129,0.24);
    border-radius: 99px; padding: .24rem .65rem;
    font-size: .72rem; font-weight: 600; color: #34d399;
}
.myc-no-master {
    display: flex; align-items: center; gap: .5rem;
    background: rgba(251,191,36,0.07); border: 1px solid rgba(251,191,36,0.18);
    border-radius: 10px; padding: .55rem .75rem;
    font-size: .75rem; color: rgba(251,191,36,0.70);
}

/* ── Subscription panel (plan + expiry) ──────────────────────────────── */
.myc-sub-panel {
    padding: .65rem 1.15rem .6rem;
    display: flex; flex-direction: column; gap: .55rem;
}

/* Plan badge */
.myc-plan-badge {
    display: inline-flex; align-items: center; gap: .42rem;
    border-radius: 99px; padding: .32rem .85rem;
    font-size: .74rem; font-weight: 700; border: 1px solid transparent;
    letter-spacing: .01em; width: fit-content;
}
.myc-plan-elite   { background: rgba(251,191,36,0.13); border-color: rgba(251,191,36,0.32); color: #fbbf24; text-shadow: 0 0 10px rgba(251,191,36,0.38); }
.myc-plan-pro     { background: rgba(96,165,250,0.12);  border-color: rgba(96,165,250,0.30);  color: #60a5fa; text-shadow: 0 0 10px rgba(96,165,250,0.36); }
.myc-plan-starter { background: rgba(148,163,184,0.10); border-color: rgba(148,163,184,0.22); color: #94a3b8; }

/* Expiry panel */
.myc-expiry-panel {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px; padding: .65rem .85rem;
}
.myc-expiry-lbl  { font-size: .60rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: rgba(148,163,184,0.52); }
.myc-expiry-date { font-size: .78rem; font-weight: 700; color: #f1f5f9; letter-spacing: -.01em; }
.myc-expiry-days { font-size: .68rem; font-weight: 500; color: rgba(148,163,184,0.52); margin-left: .2rem; }
.myc-expiry-urgent .myc-expiry-date { color: #f87171; text-shadow: 0 0 10px rgba(248,113,113,0.40); }
.myc-expiry-bar-wrap { height: 6px; background: rgba(255,255,255,0.07); border-radius: 99px; overflow: hidden; margin-top: .5rem; }
.myc-expiry-bar-fill { height: 100%; border-radius: 99px; transition: width 1.0s cubic-bezier(.34,1.56,.64,1) .5s; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.myc-footer {
    padding: .8rem 1.15rem 1.1rem;
    display: flex; flex-direction: column; gap: .5rem;
    margin-top: auto;
}

/* View Details — blue hover */
.myc-view-btn {
    display: flex; align-items: center; justify-content: center; gap: .55rem;
    width: 100%;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px; padding: .62rem 1rem;
    color: #e2e8f0; font-size: .85rem; font-weight: 600;
    text-decoration: none;
    transition: background .18s, border-color .18s, color .18s, box-shadow .18s;
}
.myc-view-btn:hover {
    background: rgba(96,165,250,0.10); border-color: rgba(96,165,250,0.34);
    color: #60a5fa; box-shadow: 0 0 18px rgba(96,165,250,0.12);
    text-decoration: none;
}
.myc-view-btn i { font-size: .9rem; transition: transform .18s; }
.myc-view-btn:hover i { transform: translateX(3px); }

/* Complete Payment — amber */
.myc-pay-btn {
    display: flex; align-items: center; justify-content: center; gap: .55rem;
    width: 100%; text-decoration: none;
    background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.34);
    border-radius: 12px; padding: .62rem 1rem;
    color: #fbbf24; font-size: .85rem; font-weight: 600;
    box-shadow: 0 0 14px rgba(245,158,11,0.10);
    transition: background .18s, border-color .18s, box-shadow .18s;
}
.myc-pay-btn:hover {
    background: rgba(245,158,11,0.18); border-color: rgba(245,158,11,0.48);
    box-shadow: 0 0 22px rgba(245,158,11,0.20);
    color: #fbbf24; text-decoration: none;
}
.myc-pay-btn i { transition: transform .18s; }
.myc-pay-btn:hover i { transform: translateX(2px); }

/* Cancel — glass red hover */
.myc-cancel-btn {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; cursor: pointer;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
    border-radius: 12px; padding: .58rem 1rem;
    color: rgba(148,163,184,0.70); font-size: .82rem; font-weight: 600;
    transition: background .18s, border-color .18s, color .18s;
}
.myc-cancel-btn:hover {
    background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.26); color: #f87171;
}

/* ── Light-mode overrides ────────────────────────────────────────────── */
[data-theme="light"] .myc-name    { color: #0f172a; }
[data-theme="light"] .myc-server  { color: rgba(71,85,105,0.62); }
[data-theme="light"] .myc-section-label { color: rgba(71,85,105,0.52); }
[data-theme="light"] .myc-master-chip { background: rgba(22,163,74,0.09); border-color: rgba(22,163,74,0.24); color: #15803d; }
[data-theme="light"] .myc-no-master { background: rgba(245,158,11,0.07); border-color: rgba(245,158,11,0.18); color: #92400e; }
[data-theme="light"] .myc-plan-elite   { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.28); color: #d97706; text-shadow: none; }
[data-theme="light"] .myc-plan-pro     { background: rgba(37,99,235,0.09);  border-color: rgba(37,99,235,0.24);  color: #1d4ed8; text-shadow: none; }
[data-theme="light"] .myc-plan-starter { background: rgba(71,85,105,0.08);  border-color: rgba(71,85,105,0.18);  color: #475569; }
[data-theme="light"] .myc-expiry-panel { background: rgba(248,250,252,0.80); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .myc-expiry-lbl   { color: rgba(71,85,105,0.52); }
[data-theme="light"] .myc-expiry-date  { color: #0f172a; }
[data-theme="light"] .myc-expiry-days  { color: rgba(71,85,105,0.55); }
[data-theme="light"] .myc-expiry-bar-wrap { background: rgba(0,0,0,0.08); }
[data-theme="light"] .myc-view-btn { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.10); color: #1e293b; }
[data-theme="light"] .myc-view-btn:hover { background: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.28); color: #1d4ed8; box-shadow: 0 0 12px rgba(37,99,235,0.10); }
[data-theme="light"] .myc-pay-btn { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.28); color: #b45309; box-shadow: none; }
[data-theme="light"] .myc-pay-btn:hover { background: rgba(245,158,11,0.16); border-color: rgba(245,158,11,0.40); color: #b45309; }
[data-theme="light"] .myc-cancel-btn { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.09); color: rgba(71,85,105,0.70); }
[data-theme="light"] .myc-cancel-btn:hover { background: rgba(220,38,38,0.07); border-color: rgba(220,38,38,0.22); color: #b91c1c; }
[data-theme="light"] .myc-avatar-active   { background: rgba(37,99,235,0.10);  border-color: rgba(37,99,235,0.28);  color: #2563eb; box-shadow: 0 0 16px rgba(37,99,235,0.18); }
[data-theme="light"] .myc-avatar-inactive { background: rgba(100,116,139,0.08); border-color: rgba(100,116,139,0.22); color: #475569; }

/* ═══════════════════════════════════════════════════════════════════════════
   ██████  TRADE COPIER STATION THEME  ██████
   Matches the marketing site (tradecopierstation.com css/style.css).
   Brand:       #0e9bff vivid blue · #0077cc deep blue · #57c8ea cyan
   Background:  #080a0d  (near-black)
   Font:        Inter
   Green (--fn-pos) is reserved for money/status meaning — profit, buy,
   active — never for brand chrome, same rule as the site.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ──────────────────────────────────────────────── */
:root {
    --fn-accent:          #0e9bff;
    --fn-accent-light:    #57c8ea;
    --fn-accent-bright:   #7fe0f5;
    --fn-accent-mid:      #0077cc;
    --fn-pos:             #22d39b;
    --fn-pos-rgb:         34,211,155;
    --fn-glow-strong:    rgba(14,155,255,0.50);
    --fn-glow-mid:       rgba(14,155,255,0.30);
    --fn-glow-soft:      rgba(14,155,255,0.14);
    --fn-glow-subtle:    rgba(14,155,255,0.07);
    --fn-bg-base:        #080a0d;
    --fn-bg-surface:     #0b0d12;
    --fn-bg-card:        #0f1117;
    --fn-bg-elevated:    #13151b;
    --fn-border:         rgba(255,255,255,0.08);
    --fn-border-accent:   rgba(14,155,255,0.22);
    --fn-text:           #eef2f7;
    --fn-text-muted:     #8892a4;
}

/* ── Base typography ─────────────────────────────────────────────────────── */
body,
.dashboard-page,
.sidebar,
.topbar,
.glass-card,
.glass-modal .modal-content {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
}

body {
    background-color: var(--fn-bg-base) !important;
    color: var(--fn-text) !important;
}

/* ── Topbar ──────────────────────────────────────────────────────────────── */
.topbar {
    background: rgba(6,7,10,0.97) !important;
    border-bottom: 1px solid rgba(14,155,255,0.10) !important;
    box-shadow: 0 1px 28px rgba(0,0,0,0.75), 0 0 50px rgba(14,155,255,0.04) !important;
}
.topbar-brand {
    color: var(--fn-accent) !important;
    text-shadow: 0 0 22px rgba(14,155,255,0.44) !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
}
.topbar-wallet-glass {
    background: rgba(14,155,255,0.09) !important;
    border-color: rgba(14,155,255,0.22) !important;
    color: var(--fn-accent) !important;
    text-shadow: 0 0 8px rgba(14,155,255,0.38) !important;
    box-shadow: none !important;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
    background: linear-gradient(180deg, #060709 0%, #09090d 100%) !important;
    border-right: 1px solid rgba(14,155,255,0.07) !important;
    box-shadow: 3px 0 32px rgba(0,0,0,0.72), 0 0 50px rgba(14,155,255,0.02) !important;
}
.sidebar .sidebar-link.active {
    color: var(--fn-accent) !important;
    background-color: rgba(14,155,255,0.09) !important;
    box-shadow: 0 0 18px rgba(14,155,255,0.12) !important;
    text-shadow: 0 0 10px rgba(14,155,255,0.50) !important;
    font-weight: 600 !important;
}
.sidebar .sidebar-link:hover {
    background-color: rgba(255,255,255,0.045) !important;
    color: #f1f5f9 !important;
}
.sidebar .sidebar-sublink.active {
    color: var(--fn-accent) !important;
    font-weight: 600 !important;
    text-shadow: 0 0 8px rgba(14,155,255,0.42) !important;
}
.sidebar-footer {
    border-top-color: rgba(14,155,255,0.08) !important;
    background: rgba(0,0,0,0.22) !important;
}
.btn-sidebar-profile {
    background: rgba(14,155,255,0.07) !important;
    border-color: rgba(14,155,255,0.18) !important;
    color: var(--fn-accent) !important;
}
.btn-sidebar-profile:hover {
    background: rgba(14,155,255,0.13) !important;
    border-color: rgba(14,155,255,0.36) !important;
    color: var(--fn-accent) !important;
    box-shadow: 0 0 16px rgba(14,155,255,0.20) !important;
}

/* ── Main + dashboard background ─────────────────────────────────────────── */
main:has(> .dashboard-page) {
    background: linear-gradient(160deg, #060709 0%, #090b10 40%, #07090d 100%) !important;
}
.dashboard-page {
    background: linear-gradient(160deg, #060709 0%, #090b10 40%, #07090d 100%) !important;
}

/* Ambient green radial glows */
.dashboard-page::before {
    background:
        radial-gradient(ellipse at 8%  12%,  rgba(14,155,255,0.15) 0%, transparent 52%),
        radial-gradient(ellipse at 90% 82%,  rgba(14,155,255,0.08) 0%, transparent 48%),
        radial-gradient(ellipse at 82% 4%,   rgba(87,200,234,0.09) 0%, transparent 40%),
        radial-gradient(ellipse at 40% 92%,  rgba(0,112,192,0.06) 0%, transparent 50%) !important;
}

/* Subtle dot-grid texture */
.dashboard-page::after {
    content: '';
    position: fixed; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.026) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}

/* ── Glass cards ─────────────────────────────────────────────────────────── */
.glass-card {
    background: rgba(255,255,255,0.044) !important;
    border: 1px solid rgba(255,255,255,0.082) !important;
    box-shadow: 0 8px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.062) !important;
}
.glass-card:hover {
    border-color: rgba(14,155,255,0.17) !important;
    box-shadow: 0 18px 52px rgba(0,0,0,0.64), 0 0 32px rgba(14,155,255,0.07),
                inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* ── Green shimmer card accent ────────────────────────────────────────────── */
.glass-card-accent-green {
    border-color: rgba(14,155,255,0.20) !important;
    box-shadow: 0 8px 36px rgba(0,0,0,0.52), 0 0 34px rgba(14,155,255,0.09),
                inset 0 1px 0 rgba(255,255,255,0.07) !important;
}
.glass-card-accent-green::before {
    background: linear-gradient(90deg, transparent, rgba(14,155,255,0.75), transparent) !important;
}

/* ── Glass glow green ─────────────────────────────────────────────────────── */
.glass-glow-green {
    box-shadow: 0 6px 28px rgba(0,0,0,.44), 0 0 18px rgba(14,155,255,.16),
                inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.glass-glow-green:hover {
    box-shadow: 0 14px 44px rgba(0,0,0,.55), 0 0 34px rgba(14,155,255,.28),
                inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* ── Text glow — green (profit side of text-glow-red) ─────────────────────── */
.text-glow-green {
    color: var(--fn-pos) !important;
    text-shadow: 0 0 15px rgba(var(--fn-pos-rgb),0.50) !important;
}

/* ── Metric text ─────────────────────────────────────────────────────────── */
.metric-label  { color: rgba(136,146,164,0.82) !important; }
.metric-sub    { color: rgba(136,146,164,0.65) !important; }
.dashboard-heading { letter-spacing: -.025em !important; }
.dashboard-subtitle { color: rgba(136,146,164,0.66) !important; }

/* ── Badge glass — green (Active / BUY status) ────────────────────────────── */
.badge-glass-green {
    background: rgba(var(--fn-pos-rgb),0.11) !important;
    color: var(--fn-pos) !important;
    border-color: rgba(var(--fn-pos-rgb),0.28) !important;
    text-shadow: 0 0 8px rgba(var(--fn-pos-rgb),0.36) !important;
}
.badge-glass-buy {
    background: rgba(var(--fn-pos-rgb),0.11) !important;
    color: var(--fn-pos) !important;
    text-shadow: 0 0 8px rgba(var(--fn-pos-rgb),0.34) !important;
}

/* ── Glow buttons — green ─────────────────────────────────────────────────── */
.btn-glow-green {
    color: var(--fn-accent) !important;
    border-color: rgba(14,155,255,0.36) !important;
    background: rgba(14,155,255,0.08) !important;
}
.btn-glow-green:hover {
    color: var(--fn-accent-bright) !important;
    border-color: rgba(14,155,255,0.62) !important;
    background: rgba(14,155,255,0.13) !important;
    box-shadow: 0 0 26px rgba(14,155,255,0.35) !important;
    text-shadow: 0 0 10px rgba(14,155,255,0.52) !important;
}
.btn-glow-green:disabled,
.btn-glow-green.disabled {
    color: var(--fn-accent) !important;
    border-color: rgba(14,155,255,0.34) !important;
    background: rgba(14,155,255,0.07) !important;
    opacity: 1 !important;
}

/* ── Glass toggle active ──────────────────────────────────────────────────── */
.btn-glass.active {
    background: rgba(14,155,255,0.10) !important;
    border-color: rgba(14,155,255,0.34) !important;
    color: var(--fn-accent) !important;
    text-shadow: 0 0 8px rgba(14,155,255,0.42) !important;
    box-shadow: 0 0 12px rgba(14,155,255,0.12) !important;
}

/* ── Glass modal ─────────────────────────────────────────────────────────── */
.glass-modal .modal-content {
    background: rgba(7,8,12,0.97) !important;
    border-color: rgba(255,255,255,0.09) !important;
    box-shadow: 0 28px 75px rgba(0,0,0,0.75), 0 0 55px rgba(14,155,255,0.06) !important;
}

/* ── Glass input focus ───────────────────────────────────────────────────── */
.glass-input:focus {
    border-color: rgba(14,155,255,0.46) !important;
    box-shadow: 0 0 0 3px rgba(14,155,255,0.11) !important;
}
.glass-select:focus,
.form-select.glass-select:focus {
    border-color: rgba(14,155,255,0.46) !important;
    box-shadow: 0 0 0 3px rgba(14,155,255,0.11) !important;
    outline: none !important;
}

/* ── DataTables focus ────────────────────────────────────────────────────── */
.dashboard-page .dt-input:focus,
.dashboard-page .dt-search input:focus,
.dashboard-page .dt-length select:focus,
.dashboard-page .dataTables_filter input:focus,
.dashboard-page .dataTables_length select:focus {
    border-color: rgba(14,155,255,0.46) !important;
    box-shadow: 0 0 0 3px rgba(14,155,255,0.10) !important;
}

/* ── Chart boxes — green variant ─────────────────────────────────────────── */
.chart-box-green {
    background: linear-gradient(145deg, rgba(14,155,255,0.06) 0%, rgba(255,255,255,0.025) 100%) !important;
    border-color: rgba(14,155,255,0.16) !important;
}
.chart-box-green::before { background: linear-gradient(90deg, transparent, rgba(14,155,255,0.85), transparent) !important; }
.chart-box-green:hover   { border-color: rgba(14,155,255,0.32) !important; box-shadow: 0 0 28px rgba(14,155,255,0.09) !important; }
.chart-icon-green {
    background: rgba(14,155,255,0.13) !important;
    border-color: rgba(14,155,255,0.28) !important;
    color: var(--fn-accent) !important;
    box-shadow: 0 0 12px rgba(14,155,255,0.18) !important;
}

/* ── Glass tabs — active ─────────────────────────────────────────────────── */
.glass-tabs .nav-link.active {
    color: var(--fn-accent) !important;
    border-top-color: rgba(14,155,255,0.30) !important;
}

/* ── mym card components ─────────────────────────────────────────────────── */
.mym-avatar-active {
    background: rgba(14,155,255,0.13) !important;
    border-color: rgba(14,155,255,0.38) !important;
    color: var(--fn-accent) !important;
    box-shadow: 0 0 22px rgba(14,155,255,0.28), inset 0 1px 0 rgba(14,155,255,0.18) !important;
}
.mym-view-btn:hover {
    background: rgba(14,155,255,0.09) !important;
    border-color: rgba(14,155,255,0.34) !important;
    color: var(--fn-accent) !important;
    box-shadow: 0 0 20px rgba(14,155,255,0.13) !important;
}

/* ── myc card components ─────────────────────────────────────────────────── */
.myc-master-chip {
    background: rgba(14,155,255,0.10) !important;
    border-color: rgba(14,155,255,0.24) !important;
    color: var(--fn-accent) !important;
}
.myc-view-btn:hover {
    background: rgba(14,155,255,0.09) !important;
    border-color: rgba(14,155,255,0.34) !important;
    color: var(--fn-accent) !important;
    box-shadow: 0 0 20px rgba(14,155,255,0.13) !important;
}

/* ── Sidebar nav active indicator dot ────────────────────────────────────── */
.sidebar .sidebar-link.active .sidebar-icon { opacity: 1 !important; color: var(--fn-accent) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   FUNDEDNEXT UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Gradient text */
.fn-gradient-text {
    background: linear-gradient(135deg, #0e9bff 0%, #57c8ea 50%, #7fe0f5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-weight: 800;
}
.fn-gradient-text-white {
    background: linear-gradient(135deg, #0e9bff 0%, #bfeaff 65%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* Section tag — small pill label before headings */
.fn-section-tag {
    display: inline-flex; align-items: center; gap: .35rem;
    background: rgba(14,155,255,0.10); border: 1px solid rgba(14,155,255,0.24);
    border-radius: 99px; padding: .22rem .78rem;
    font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .11em;
    color: var(--fn-accent);
}

/* Solid primary CTA button */
.btn-fn-primary {
    background: linear-gradient(135deg, #0e9bff 0%, #0b82e0 100%);
    border: 1px solid rgba(14,155,255,0.50);
    color: #fff !important;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    letter-spacing: .01em;
    border-radius: 10px;
    padding: .58rem 1.5rem;
    box-shadow: 0 4px 22px rgba(14,155,255,0.30), inset 0 1px 0 rgba(255,255,255,0.22);
    transition: all .20s cubic-bezier(.34,1.56,.64,1);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: .42rem;
    font-size: .88rem;
}
.btn-fn-primary:hover {
    background: linear-gradient(135deg, #35adff 0%, #1a8fe6 100%);
    box-shadow: 0 6px 30px rgba(14,155,255,0.44), inset 0 1px 0 rgba(255,255,255,0.28);
    color: #fff !important; transform: translateY(-1px);
}
.btn-fn-primary:active  { transform: translateY(0); }
.btn-fn-primary i       { font-size: .92rem; }

/* Large stat block */
.fn-stat-num {
    font-size: 2rem; font-weight: 900; letter-spacing: -.04em; line-height: 1;
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, #0e9bff, #57c8ea);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.fn-stat-lbl {
    font-size: .62rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .09em; color: rgba(136,146,164,0.55);
    font-family: 'Inter', sans-serif;
}

/* Premium card with top green shimmer */
.fn-card-glow {
    position: relative; overflow: hidden;
    border-color: rgba(14,155,255,0.20) !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.55), 0 0 42px rgba(14,155,255,0.09),
                inset 0 1px 0 rgba(255,255,255,0.07) !important;
}
.fn-card-glow::before {
    content: '';
    position: absolute; top: 0; left: 6%; right: 6%; height: 2px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, rgba(14,155,255,0.78), transparent);
    pointer-events: none; z-index: 1;
}

/* Pulse animation for live/active indicators */
@keyframes fn-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(14,155,255,0.0); }
    50%       { opacity: .85; box-shadow: 0 0 0 5px rgba(14,155,255,0.0); }
}
@keyframes fn-dot-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.35); opacity: .75; }
}
.fn-live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--fn-accent);
    box-shadow: 0 0 8px rgba(14,155,255,0.65);
    animation: fn-dot-pulse 2s ease-in-out infinite;
    display: inline-block;
}

/* Heading with green left-border accent */
.fn-section-heading {
    font-size: .70rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .10em; color: var(--fn-accent);
    border-left: 2px solid var(--fn-accent);
    padding-left: .6rem; margin-bottom: .5rem;
    font-family: 'Inter', sans-serif;
}

/* ── Topbar green avatar ring ─────────────────────────────────────────────── */
.topbar-avatar-ring {
    box-shadow: 0 0 0 2px rgba(14,155,255,0.40), 0 0 14px rgba(14,155,255,0.20) !important;
}
.topbar-avatar-ring:hover {
    box-shadow: 0 0 0 2px rgba(14,155,255,0.72), 0 0 22px rgba(14,155,255,0.36) !important;
}

/* ── Glass nav tabs — FN green active ────────────────────────────────────── */
.glass-tabs .nav-link.active {
    color: var(--fn-accent) !important;
    text-shadow: 0 0 10px rgba(14,155,255,0.40) !important;
}

/* ── Mobile sidebar open shadow ──────────────────────────────────────────── */
.sidebar.sidebar-open {
    box-shadow: 5px 0 40px rgba(0,0,0,0.75), 0 0 30px rgba(14,155,255,0.07) !important;
}

/* ── Dropdown menu dark ───────────────────────────────────────────────────── */
.topbar-dropdown .dropdown-menu {
    background: rgba(7,8,12,0.98) !important;
    border-color: rgba(255,255,255,0.09) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.70), 0 0 28px rgba(14,155,255,0.06) !important;
}
.topbar-dropdown .dropdown-item:hover,
.topbar-dropdown .dropdown-item:focus {
    background: rgba(14,155,255,0.07) !important;
    color: #f1f5f9 !important;
}

/* ── Form focus ring global override ─────────────────────────────────────── */
.btn:focus, .btn:active:focus,
.form-control:focus, .form-check-input:focus,
.form-select:focus {
    box-shadow: 0 0 0 3px rgba(14,155,255,0.20) !important;
    border-color: rgba(14,155,255,0.45) !important;
    outline: none !important;
}

/* ── Bootstrap primary → brand (dark only; light-theme.css owns light) ───────
   Bootstrap 5.3 bakes #0d6efd into each component's local --bs-* vars, so the
   root tokens alone do not reach buttons or checkboxes. */
:root:not([data-theme="light"]) {
    --bs-primary: #0e9bff;
    --bs-primary-rgb: 14,155,255;
    --bs-link-color: #57c8ea;
    --bs-link-color-rgb: 87,200,234;
    --bs-link-hover-color: #7fe0f5;
    --bs-link-hover-color-rgb: 127,224,245;
}
/* Label is near-black like the site's CTA: white on #0e9bff is only ~2.9:1. */
:root:not([data-theme="light"]) .btn-primary {
    --bs-btn-color: #03121c;
    --bs-btn-bg: #0e9bff;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #03121c;
    --bs-btn-hover-bg: #35adff;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #03121c;
    --bs-btn-active-bg: #0b82e0;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #03121c;
    --bs-btn-disabled-bg: #0e9bff;
    --bs-btn-disabled-border-color: transparent;
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(135deg, #0e9bff 0%, #0b82e0 100%);
    font-weight: 700;
    box-shadow: 0 0 24px rgba(14,155,255,0.32), 0 4px 14px rgba(0,0,0,0.40);
    transition: box-shadow .22s, transform .14s, filter .15s;
}
:root:not([data-theme="light"]) .btn-primary::before {
    content: '';
    position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.24), transparent);
    transform: skewX(-18deg);
    transition: left .52s ease;
    pointer-events: none;
}
:root:not([data-theme="light"]) .btn-primary:hover {
    box-shadow: 0 0 40px rgba(14,155,255,0.52), 0 4px 18px rgba(0,0,0,0.45);
    transform: translateY(-1px);
    filter: brightness(1.05);
}
:root:not([data-theme="light"]) .btn-primary:hover::before { left: 145%; }
:root:not([data-theme="light"]) .btn-outline-primary {
    --bs-btn-color: #57c8ea;
    --bs-btn-border-color: rgba(14,155,255,0.40);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(14,155,255,0.14);
    --bs-btn-hover-border-color: #0e9bff;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(14,155,255,0.22);
    --bs-btn-active-border-color: #0e9bff;
}
:root:not([data-theme="light"]) .form-check-input:checked {
    background-color: #0e9bff;
    border-color: #0e9bff;
}
:root:not([data-theme="light"]) .nav-pills .nav-link.active,
:root:not([data-theme="light"]) .page-item.active .page-link {
    background-color: #0e9bff;
    border-color: #0e9bff;
    color: #03121c;
}
:root:not([data-theme="light"]) .progress { --bs-progress-bar-bg: #0e9bff; }
::selection { background: rgba(14,155,255,0.32); }

/* ════════════════════════════════════════════════════════════════════════════
   TEXT CONTRAST FIXES — secondary/muted text
   Muted labels & meta text were too dull (low alpha) and hard to read on
   low-brightness screens. Appended LAST and theme-scoped with !important so they
   win over the FUNDEDNEXT block's own !important muted-text declarations.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Dark theme: lift muted text brightness ──────────────────────────────── */
[data-theme="dark"] .dashboard-subtitle,
[data-theme="dark"] .masters-header-sub,
[data-theme="dark"] .perf-header-sub,
[data-theme="dark"] .master-card-sub        { color: rgba(148,163,184,0.92) !important; }

[data-theme="dark"] .metric-label,
[data-theme="dark"] .mc-stat-label,
[data-theme="dark"] .mym-stat-lbl           { color: rgba(148,163,184,0.90) !important; }

[data-theme="dark"] .metric-sub,
[data-theme="dark"] .mc-server,
[data-theme="dark"] .mym-server             { color: rgba(148,163,184,0.84) !important; }

[data-theme="dark"] .mc-member-since        { color: rgba(148,163,184,0.80) !important; }

/* ── Light theme: darken muted text (also beats FUNDEDNEXT !important greys) ─ */
[data-theme="light"] .dashboard-subtitle,
[data-theme="light"] .masters-header-sub,
[data-theme="light"] .perf-header-sub,
[data-theme="light"] .master-card-sub       { color: #475569 !important; }

[data-theme="light"] .metric-label,
[data-theme="light"] .mc-stat-label,
[data-theme="light"] .mym-stat-lbl          { color: #475569 !important; }

[data-theme="light"] .metric-sub,
[data-theme="light"] .mc-server,
[data-theme="light"] .mym-server,
[data-theme="light"] .mc-member-since       { color: #475569 !important; }

/* ── Trading account subscription actions on mobile ──────────────────────────── */
@media (max-width: 576px) {
    .sub-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
    .sub-actions > form { width: 100%; }
    .sub-renew-form { flex-wrap: nowrap; }
    .sub-renew-form select { min-width: 0 !important; flex: 1 1 auto; }
    .sub-renew-form button { flex-shrink: 0; }
}

/* ── Copier hero — actions row (stat pills + Edit + status) on mobile ────────── */
@media (max-width: 576px) {
    .chd-actions {
        width: 100%;
        justify-content: flex-start;
        gap: .6rem;
    }
    .chd-live-stats {
        width: 100%;
        gap: .6rem !important;
    }
    .chd-stat-pill {
        flex: 1 1 0;
        min-width: 0 !important;
    }
    .chd-edit-btn, .chd-status-badge {
        flex: 0 0 auto;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   MASTER / DETAILS — Premium fintech redesign
   Scoped to .master-details-page (Views/Master/Details.cshtml)
   ══════════════════════════════════════════════════════════════════════════ */
.master-details-page {
    --md-card: #131D2D;
    --md-surface: #0F1724;
    --md-border: rgba(255, 255, 255, 0.06);
    --md-border-strong: rgba(255, 255, 255, 0.10);
    --md-primary: #0E9BFF;
    --md-secondary: #4F7CFF;
    --md-purple: #7B61FF;
    --md-warning: #F6C343;
    --md-danger: #FF5A6E;
    --md-text: #FFFFFF;
    --md-text-sec: #9CA3AF;
    --md-radius: 18px;
    --md-radius-sm: 12px;
    --md-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    --md-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.24);
    --md-ease: cubic-bezier(0.16, 1, 0.3, 1);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── KPI row ─────────────────────────────────────────────────────────────── */
.master-details-page .md-kpi {
    position: relative;
    overflow: hidden;
    height: 100%;
    padding: 16px;
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius);
    background: var(--md-card);
    box-shadow: var(--md-shadow-sm);
    transition: transform 0.25s var(--md-ease), box-shadow 0.25s var(--md-ease), border-color 0.25s var(--md-ease);
}
.master-details-page .md-kpi::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.85;
    transition: opacity 0.25s var(--md-ease);
}
.master-details-page .md-kpi-blue::before   { background: radial-gradient(120% 100% at 0% 0%, rgba(79,124,255,0.13), transparent 62%); }
.master-details-page .md-kpi-purple::before { background: radial-gradient(120% 100% at 0% 0%, rgba(123,97,255,0.13), transparent 62%); }
.master-details-page .md-kpi-green::before  { background: radial-gradient(120% 100% at 0% 0%, rgba(14, 155, 255,0.13),  transparent 62%); }
.master-details-page .md-kpi-amber::before  { background: radial-gradient(120% 100% at 0% 0%, rgba(246,195,67,0.13), transparent 62%); }
.master-details-page .md-kpi-red::before    { background: radial-gradient(120% 100% at 0% 0%, rgba(255,90,110,0.13), transparent 62%); }
.master-details-page .md-kpi:hover {
    transform: translateY(-3px);
    border-color: var(--md-border-strong);
    box-shadow: var(--md-shadow);
}
.master-details-page .md-kpi:hover::before { opacity: 1; }

.master-details-page .md-kpi-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.master-details-page .md-kpi-icon {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 36px; height: 36px;
    font-size: 0.98rem;
    border-radius: 11px;
    border: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    transition: transform 0.25s var(--md-ease);
}
.master-details-page .md-kpi:hover .md-kpi-icon { transform: scale(1.08) rotate(-4deg); }
.master-details-page .md-kpi-blue   .md-kpi-icon { background: rgba(79,124,255,0.14); color: var(--md-secondary); border-color: rgba(79,124,255,0.22); }
.master-details-page .md-kpi-purple .md-kpi-icon { background: rgba(123,97,255,0.14); color: var(--md-purple);    border-color: rgba(123,97,255,0.22); }
.master-details-page .md-kpi-green  .md-kpi-icon { background: rgba(14, 155, 255,0.14);  color: var(--md-primary);   border-color: rgba(14, 155, 255,0.22); }
.master-details-page .md-kpi-amber  .md-kpi-icon { background: rgba(246,195,67,0.14); color: var(--md-warning);   border-color: rgba(246,195,67,0.22); }
.master-details-page .md-kpi-red    .md-kpi-icon { background: rgba(255,90,110,0.14); color: var(--md-danger);    border-color: rgba(255,90,110,0.22); }

.master-details-page .md-kpi-title {
    position: relative;
    font-size: 0.82rem; font-weight: 600;
    color: var(--md-text);
    letter-spacing: -0.01em;
}
.master-details-page .md-kpi-value {
    position: relative;
    font-weight: 600; font-size: 1.6rem; line-height: 1.1;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    color: var(--md-text);
}
.master-details-page .md-kpi-sub {
    position: relative;
    color: var(--md-text-sec);
    font-size: 0.76rem; font-weight: 500;
    margin-top: 4px;
}
.master-details-page .md-pos  { color: var(--fn-pos); }
.master-details-page .md-neg  { color: var(--md-danger); }
.master-details-page .md-warn { color: var(--md-warning); }

/* ── Window toggle ───────────────────────────────────────────────────────── */
/* Drives the win-rate and net-profit cards and the charts together. It sits
   above the KPI row rather than on the chart card because the cards move with
   it too, and a control parked on one of the two things it changes reads as
   belonging only to that one. */
.master-details-page .md-window-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.master-details-page .md-window-caption {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    color: var(--md-text-sec);
    font-size: 0.78rem;
    font-weight: 500;
}
/* The segmented control itself is unscoped — the master's own details page reuses
   it for the subscription growth chart, and one definition is what keeps the two
   toggles looking like the same control. Every var carries the value it resolves to
   inside .master-details-page as its fallback, so it also renders correctly on a
   page that does not declare them. */
.md-window-seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--md-border, rgba(255, 255, 255, 0.06));
    border-radius: 999px;
    background: var(--md-card, #131D2D);
    box-shadow: var(--md-shadow-sm, 0 4px 16px rgba(0, 0, 0, 0.24));
    transition: opacity 0.2s var(--md-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.md-window-seg.is-busy { opacity: 0.5; pointer-events: none; }
.md-window-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--md-text-sec, #9CA3AF);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 5px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.2s var(--md-ease, cubic-bezier(0.16, 1, 0.3, 1)),
                background 0.2s var(--md-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.md-window-btn:hover:not(.is-active) { color: var(--md-text, #FFFFFF); }
.md-window-btn:focus-visible {
    outline: 2px solid var(--md-primary, #0E9BFF);
    outline-offset: 2px;
}
.md-window-btn.is-active {
    background: rgba(14, 155, 255, 0.14);
    color: var(--md-primary, #0E9BFF);
    box-shadow: inset 0 0 0 1px rgba(14, 155, 255, 0.24);
}
/* Light theme for the control outside .master-details-page, which is where the
   --md-* light values are declared. These are those same values written out, so a
   toggle on either page looks identical. */
[data-theme="light"] .md-window-seg {
    border-color: rgba(15, 23, 42, 0.08);
    background: #FFFFFF;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}
[data-theme="light"] .md-window-btn { color: #64748B; }
[data-theme="light"] .md-window-btn:hover:not(.is-active) { color: #0F1724; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.master-details-page .glass-card {
    background: var(--md-card);
    border: 1px solid var(--md-border) !important;
    border-radius: var(--md-radius) !important;
    box-shadow: var(--md-shadow-sm) !important;
    overflow: hidden;
}
.master-details-page .glass-card:hover { box-shadow: var(--md-shadow) !important; }
.master-details-page .glass-card-accent-amber  { border-top: 2px solid var(--md-warning)   !important; }
.master-details-page .glass-card-accent-green  { border-top: 2px solid var(--md-primary)   !important; }
.master-details-page .glass-card-accent-blue   { border-top: 2px solid var(--md-secondary) !important; }
.master-details-page .glass-card-accent-purple { border-top: 2px solid var(--md-purple)    !important; }

.master-details-page .mdetails-section-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--md-border);
}
.master-details-page .mdetails-section-title { font-weight: 700; font-size: 0.92rem; color: var(--md-text); }
.master-details-page .mdetails-section-title-icon {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 9px;
    font-size: 0.85rem;
    border: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.master-details-page .mdetails-icon-amber  { background: rgba(246,195,67,0.14); color: var(--md-warning);   border-color: rgba(246,195,67,0.22); }
.master-details-page .mdetails-icon-green  { background: rgba(14, 155, 255,0.14);  color: var(--md-primary);   border-color: rgba(14, 155, 255,0.22); }
.master-details-page .mdetails-icon-blue   { background: rgba(79,124,255,0.14); color: var(--md-secondary); border-color: rgba(79,124,255,0.22); }
.master-details-page .mdetails-icon-purple { background: rgba(123,97,255,0.14); color: var(--md-purple);    border-color: rgba(123,97,255,0.22); }

/* ── Back button ─────────────────────────────────────────────────────────── */
.master-details-page .mdetails-back-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 15px;
    background: var(--md-surface);
    border: 1px solid var(--md-border-strong);
    border-radius: 999px;
    color: var(--md-text-sec);
    font-size: 0.8rem; font-weight: 600;
    text-decoration: none;
    transition: all 0.22s var(--md-ease);
}
.master-details-page .mdetails-back-btn:hover {
    color: var(--md-text);
    border-color: var(--md-primary);
    background: rgba(14, 155, 255,0.10);
    transform: translateX(-2px);
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.master-details-page .mdetails-hero {
    display: flex; align-items: center; gap: 20px;
    flex-wrap: wrap;
    padding: 20px;
}
/* min-width: 0 let this item shrink without limit, which sounds harmless but
   isn't: with flex: 1 on a wrap container, flexbox only pushes a sibling onto
   a new line when the items on the current line can no longer be compressed
   to fit. An infinitely-shrinkable item never reaches that point — it just
   keeps getting crushed instead. On a narrow card this crushed the identity
   column down to ~118px while the live-stats pills held their width, and the
   nowrap meta text (server, login, "member since"...) overflowed straight
   through its own box into the pills sitting next to it.

   A real floor gives flex-wrap something to trigger on: once the row can't
   fit identity-at-240px plus its siblings, the siblings wrap to their own
   line instead of identity being crushed and overflowing. */
.master-details-page .mdetails-hero-identity { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 240px; }
.master-details-page .mdetails-hero-name {
    font-size: 1.4rem; font-weight: 700;
    color: var(--md-text);
    letter-spacing: -0.02em;
}
.master-details-page .mdetails-hero-meta {
    display: flex; flex-wrap: wrap; gap: 8px 16px;
    margin-top: 6px;
}
.master-details-page .mdetails-hero-meta-item {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.76rem; font-weight: 500;
    color: var(--md-text-sec);
}
.master-details-page .mc-avatar {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 56px; height: 56px;
    border-radius: 16px;
    font-size: 1.4rem;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
}
.master-details-page .mc-avatar-bronze   { background: linear-gradient(140deg, rgba(180,124,60,0.30),  rgba(180,124,60,0.10));  color: #D08A46; }
.master-details-page .mc-avatar-silver   { background: linear-gradient(140deg, rgba(148,163,184,0.30), rgba(148,163,184,0.10)); color: #CBD5E1; }
.master-details-page .mc-avatar-gold     { background: linear-gradient(140deg, rgba(234,179,8,0.30),   rgba(234,179,8,0.10));   color: #FACC15; }
.master-details-page .mc-avatar-platinum { background: linear-gradient(140deg, rgba(96,165,250,0.30),  rgba(96,165,250,0.10));  color: #93C5FD; }
.master-details-page .mc-avatar-elite    { background: linear-gradient(140deg, rgba(246,195,67,0.34),  rgba(246,195,67,0.10));  color: var(--md-warning); }

/* ── Ranking blocks ──────────────────────────────────────────────────────── */
.master-details-page .rkp-rank-box,
.master-details-page .rkp-grade-box {
    background: var(--md-surface);
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius-sm);
    transition: border-color 0.25s var(--md-ease), transform 0.25s var(--md-ease);
}
.master-details-page .rkp-rank-box:hover,
.master-details-page .rkp-grade-box:hover { border-color: var(--md-border-strong); transform: translateY(-2px); }

/* ── Charts ──────────────────────────────────────────────────────────────── */
.master-details-page .mdetails-chart-box {
    position: relative;
    height: 100%;
    padding: 16px;
    border-radius: var(--md-radius);
    border: 1px solid var(--md-border);
    background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.035), transparent 60%), var(--md-surface);
    transition: border-color 0.25s var(--md-ease), transform 0.25s var(--md-ease), box-shadow 0.25s var(--md-ease);
}
.master-details-page .mdetails-chart-box:hover {
    border-color: var(--md-border-strong);
    transform: translateY(-2px);
    box-shadow: var(--md-shadow-sm);
}
.master-details-page .mdetails-chart-label {
    font-size: 0.8rem; font-weight: 600;
    color: var(--md-text);
    margin-bottom: 14px;
}
/* Chart.js needs a sized, positioned parent when maintainAspectRatio is false */
.master-details-page .md-chart-canvas-wrap { position: relative; width: 100%; height: 210px; }
.master-details-page .md-chart-canvas-wrap canvas { display: block; width: 100% !important; height: 100% !important; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.master-details-page table.dataTable thead th,
.master-details-page .table thead th {
    background: var(--md-surface) !important;
    color: var(--md-text-sec) !important;
    font-size: 0.68rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 1px solid var(--md-border) !important;
    padding: 10px 14px !important;
    white-space: nowrap;
}
.master-details-page table.dataTable tbody td,
.master-details-page .table tbody td {
    border-bottom: 1px solid var(--md-border) !important;
    padding: 11px 14px !important;
    font-size: 0.82rem;
    vertical-align: middle;
    background: transparent;
}
.master-details-page table.dataTable tbody tr:hover td,
.master-details-page .table tbody tr:hover td { background: rgba(255, 255, 255, 0.025) !important; }

/* ── Buttons & pills ─────────────────────────────────────────────────────── */
.master-details-page .btn-glow-green {
    background: var(--md-primary);
    border: none; color: #041F16;
    font-weight: 600; border-radius: 999px;
    padding: 9px 18px;
    transition: all 0.25s var(--md-ease);
}
.master-details-page .btn-glow-green:hover {
    background: #57C8EA;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(14, 155, 255, 0.28);
}
.master-details-page .wl-filter-btn {
    background: var(--md-surface);
    border: 1px solid var(--md-border-strong);
    color: var(--md-text-sec);
    font-size: 0.72rem; font-weight: 600;
    padding: 5px 12px; border-radius: 999px;
    transition: all 0.22s var(--md-ease);
}
.master-details-page .wl-filter-btn:hover { color: var(--md-text); border-color: var(--md-border-strong); }
.master-details-page .wl-filter-btn.active {
    background: rgba(14, 155, 255, 0.14);
    border-color: rgba(14, 155, 255, 0.28);
    color: var(--md-primary);
}

/* ── Empty / warning states ──────────────────────────────────────────────── */
.master-details-page .mdetails-empty-state { text-align: center; padding: 36px 20px; }
.master-details-page .mdetails-empty-icon {
    width: 52px; height: 52px; margin: 0 auto 12px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--md-surface);
    border: 1px solid var(--md-border);
    color: var(--md-text-sec);
}
.master-details-page .mdetails-warning {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 16px 18px;
    margin-bottom: 24px;
    border-radius: var(--md-radius);
    background: linear-gradient(135deg, rgba(255,90,110,0.10), rgba(255,90,110,0.03));
    border: 1px solid rgba(255, 90, 110, 0.22);
}
.master-details-page .mdetails-warning-icon {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: var(--md-radius-sm);
    background: rgba(255, 90, 110, 0.14);
    color: var(--md-danger);
    border: 1px solid rgba(255, 90, 110, 0.22);
}
.master-details-page .mdetails-warning-title { font-weight: 700; font-size: 0.88rem; color: var(--md-danger); }
.master-details-page .mdetails-warning-text  { font-size: 0.78rem; color: var(--md-text-sec); margin-top: 3px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .master-details-page .md-chart-canvas-wrap { height: 195px; }
}
@media (max-width: 767.98px) {
    .master-details-page .md-kpi { padding: 14px; }
    .master-details-page .md-kpi-value { font-size: 1.3rem; }
    .master-details-page .md-kpi-icon { width: 32px; height: 32px; font-size: 0.9rem; }
    .master-details-page .md-kpi-head { margin-bottom: 10px; }
    .master-details-page .mdetails-hero { padding: 16px; gap: 14px; }
    .master-details-page .mdetails-hero-name { font-size: 1.15rem; }
    .master-details-page .mc-avatar { width: 46px; height: 46px; font-size: 1.15rem; border-radius: 13px; }
    .master-details-page .mdetails-chart-box { padding: 14px; }
    /* The sentence wraps to three lines on a phone and pushes the toggle off the
       fold. The badge alone still says what the period is, and the chart card
       below carries the same label. */
    .master-details-page .md-window-caption-text { display: none; }
    .master-details-page .md-window-bar { justify-content: flex-start; }
    /* Unscoped with the control itself — the growth chart's toggle needs the same
       narrower buttons on a phone. */
    .md-window-btn { padding: 5px 11px; }
}

/* ── Light theme ─────────────────────────────────────────────────────────── */
[data-theme="light"] .master-details-page {
    --md-card: #FFFFFF;
    --md-surface: #F7F8FA;
    --md-border: rgba(15, 23, 42, 0.08);
    --md-border-strong: rgba(15, 23, 42, 0.14);
    --md-text: #0F1724;
    --md-text-sec: #64748B;
    --md-shadow: 0 12px 32px rgba(15, 23, 42, 0.10);
    --md-shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.06);
}
[data-theme="light"] .master-details-page .mdetails-chart-box {
    background: radial-gradient(120% 90% at 50% 0%, rgba(15,23,42,0.02), transparent 60%), var(--md-surface);
}
[data-theme="light"] .master-details-page table.dataTable tbody tr:hover td,
[data-theme="light"] .master-details-page .table tbody tr:hover td { background: rgba(15,23,42,0.025) !important; }


/* ══════════════════════════════════════════════════════════════════════════
   TELEGRAM COPIER — Premium redesign
   Scoped to .telegram-copier-page (Views/TelegramCopier/Index.cshtml)
   ══════════════════════════════════════════════════════════════════════════ */
.telegram-copier-page {
    --tg-card: #131D2D;
    --tg-surface: #0F1724;
    --tg-border: rgba(255, 255, 255, 0.06);
    --tg-border-strong: rgba(255, 255, 255, 0.10);
    --tg-primary: #0E9BFF;
    --tg-blue: #4F7CFF;
    --tg-purple: #7B61FF;
    --tg-warning: #F6C343;
    --tg-danger: #FF5A6E;
    --tg-text: #FFFFFF;
    --tg-text-sec: #9CA3AF;
    --tg-text-dim: #6B7280;
    --tg-radius: 18px;
    --tg-radius-sm: 12px;
    --tg-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    --tg-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.24);
    --tg-ease: cubic-bezier(0.16, 1, 0.3, 1);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--tg-text);
}

/* ── Page header ─────────────────────────────────────────────────────────── */
.telegram-copier-page .tg-page-header {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.telegram-copier-page .tg-page-header-icon {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 52px; height: 52px;
    border-radius: 16px;
    font-size: 1.35rem;
    color: #5BA9F5;
    background: linear-gradient(145deg, rgba(91,169,245,0.20), rgba(79,124,255,0.06));
    border: 1px solid rgba(91,169,245,0.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 6px 18px rgba(79,124,255,0.14);
}
.telegram-copier-page .tg-page-header-text { flex: 1; min-width: 0; }
.telegram-copier-page .tg-page-title {
    font-size: 1.6rem; font-weight: 700;
    color: var(--tg-text);
    letter-spacing: -0.025em;
    margin: 0 0 2px;
}
.telegram-copier-page .tg-page-subtitle {
    font-size: 0.875rem; font-weight: 500;
    color: var(--tg-text-sec);
    margin: 0;
}
.telegram-copier-page .tg-page-header-cta { flex-shrink: 0; }

/* ── Card shell ──────────────────────────────────────────────────────────── */
.telegram-copier-page .tg-card {
    position: relative;
    overflow: hidden;
    background: var(--tg-card);
    border: 1px solid var(--tg-border);
    border-radius: var(--tg-radius);
    box-shadow: var(--tg-shadow-sm);
    transition: transform 0.25s var(--tg-ease), box-shadow 0.25s var(--tg-ease), border-color 0.25s var(--tg-ease);
}
.telegram-copier-page .tg-card:hover {
    border-color: var(--tg-border-strong);
    box-shadow: var(--tg-shadow);
}
/* Two cards per row once there is room; collapses to one automatically */
.telegram-copier-page .tg-session-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
/* Desktop: always exactly two cards per row */
@media (min-width: 992px) {
    .telegram-copier-page .tg-session-list { grid-template-columns: repeat(2, 1fr); }
}
/* Equal-height cards with the action row pinned to the bottom */
.telegram-copier-page .tg-session {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.telegram-copier-page .tg-session .tg-session-actions { margin-top: auto; }
.telegram-copier-page .tg-session:hover { transform: translateY(-2px); }

/* ── Identity row ────────────────────────────────────────────────────────── */
.telegram-copier-page .tg-session-head {
    display: flex; align-items: center; gap: 16px;
    padding: 22px 24px;
    flex-wrap: wrap;
}
.telegram-copier-page .tg-avatar {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 58px; height: 58px;
    border-radius: 50%;
    font-size: 1.25rem; font-weight: 700;
    color: #FFFFFF;
    background: linear-gradient(140deg, var(--tg-blue), var(--tg-purple));
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 6px 18px rgba(79,124,255,0.26), inset 0 1px 0 rgba(255,255,255,0.20);
    transition: transform 0.25s var(--tg-ease);
}
.telegram-copier-page .tg-session:hover .tg-avatar { transform: scale(1.04); }
.telegram-copier-page .tg-avatar.is-online::after {
    content: "";
    position: absolute;
    right: 1px; bottom: 1px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--tg-primary);
    border: 2.5px solid var(--tg-card);
}
.telegram-copier-page .tg-identity { flex: 1; min-width: 0; }
.telegram-copier-page .tg-identity-name {
    font-size: 1.3rem; font-weight: 700;
    color: var(--tg-text);
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.telegram-copier-page .tg-identity-phone {
    font-size: 0.9rem; font-weight: 500;
    color: var(--tg-text-sec);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

/* ── Status pill ─────────────────────────────────────────────────────────── */
.telegram-copier-page .tg-status {
    display: inline-flex; align-items: center; gap: 7px;
    flex-shrink: 0;
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 0.88rem; font-weight: 600;
    white-space: nowrap;
}
.telegram-copier-page .tg-status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.telegram-copier-page .tg-status-active  { background: rgba(14, 155, 255,0.12);  color: var(--tg-primary); border: 1px solid rgba(14, 155, 255,0.28); }
.telegram-copier-page .tg-status-pending { background: rgba(246,195,67,0.12); color: var(--tg-warning); border: 1px solid rgba(246,195,67,0.28); }
.telegram-copier-page .tg-status-danger  { background: rgba(255,90,110,0.12); color: var(--tg-danger);  border: 1px solid rgba(255,90,110,0.28); }
.telegram-copier-page .tg-status-idle    { background: rgba(156,163,175,0.10); color: var(--tg-text-sec); border: 1px solid rgba(156,163,175,0.22); }
.telegram-copier-page .tg-status-active .tg-status-dot { animation: tg-pulse 2s infinite; }
@keyframes tg-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(14, 155, 255, 0.55); }
    70%  { box-shadow: 0 0 0 5px rgba(14, 155, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(14, 155, 255, 0); }
}

/* ── Stats row ───────────────────────────────────────────────────────────── */
/* Stacked by default; two columns from the first breakpoint that fits them.
   Channels Enabled and Connection pair up on the top row, and the longer
   Last Connected timestamp takes the full width of the row beneath. */
.telegram-copier-page .tg-session-stats {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-top: 1px solid var(--tg-border);
    border-bottom: 1px solid var(--tg-border);
}
.telegram-copier-page .tg-stat {
    display: flex; align-items: center; gap: 11px;
    min-width: 0;
}
/* Vertical hairline between the paired stats; horizontal one above the row
   below. Both are off while the stats are stacked. */
.telegram-copier-page .tg-stat-divider {
    display: none;
    width: 1px;
    align-self: stretch;
    background: var(--tg-border);
}
.telegram-copier-page .tg-stat-rule {
    display: none;
    height: 1px;
    background: var(--tg-border);
}

/* Must come AFTER the base rules above or the dividers stay hidden and the
   Connection stat lands in the 1px track. */
@media (min-width: 576px) {
    .telegram-copier-page .tg-session-stats {
        grid-template-columns: 1fr 1px 1fr;
        gap: 14px 18px;
    }
    .telegram-copier-page .tg-stat-divider { display: block; }
    .telegram-copier-page .tg-stat-rule { display: block; grid-column: 1 / -1; }
    .telegram-copier-page .tg-stat-wide { grid-column: 1 / -1; }
}
.telegram-copier-page .tg-stat-icon {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 42px; height: 42px;
    border-radius: var(--tg-radius-sm);
    font-size: 1.05rem;
    border: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    transition: transform 0.25s var(--tg-ease);
}
.telegram-copier-page .tg-session:hover .tg-stat-icon { transform: scale(1.05); }
.telegram-copier-page .tg-icon-purple { background: rgba(123,97,255,0.14); color: var(--tg-purple);   border-color: rgba(123,97,255,0.22); }
.telegram-copier-page .tg-icon-green  { background: rgba(14, 155, 255,0.14);  color: var(--tg-primary);  border-color: rgba(14, 155, 255,0.22); }
.telegram-copier-page .tg-icon-blue   { background: rgba(79,124,255,0.14); color: var(--tg-blue);     border-color: rgba(79,124,255,0.22); }
.telegram-copier-page .tg-icon-idle   { background: rgba(156,163,175,0.10); color: var(--tg-text-dim); border-color: rgba(156,163,175,0.18); }
.telegram-copier-page .tg-stat-body { min-width: 0; }
.telegram-copier-page .tg-stat-label {
    font-size: 0.8rem; font-weight: 500;
    color: var(--tg-text-sec);
    margin-bottom: 2px;
}
.telegram-copier-page .tg-stat-value {
    display: flex; align-items: center; gap: 7px;
    font-size: 1.05rem; font-weight: 600;
    color: var(--tg-text);
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
}
/* Timestamp is the longest value — let it wrap rather than overflow the column */
.telegram-copier-page .tg-stat-value-sm { font-size: 0.88rem; line-height: 1.35; }
.telegram-copier-page .tg-text-green { color: var(--tg-primary); }
.telegram-copier-page .tg-text-dim   { color: var(--tg-text-dim); }
.telegram-copier-page .tg-live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--tg-primary);
    animation: tg-pulse 2s infinite;
}

/* ── Error strip ─────────────────────────────────────────────────────────── */
.telegram-copier-page .tg-session-error {
    display: flex; align-items: center; gap: 9px;
    padding: 12px 24px;
    font-size: 0.82rem; font-weight: 500;
    color: var(--tg-danger);
    background: rgba(255, 90, 110, 0.06);
    border-bottom: 1px solid var(--tg-border);
}

/* ── Actions row ─────────────────────────────────────────────────────────── */
.telegram-copier-page .tg-session-actions {
    display: flex; align-items: center; gap: 12px;
    padding: 20px 24px;
    flex-wrap: wrap;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.telegram-copier-page .tg-btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 12px 22px;
    border-radius: var(--tg-radius-sm);
    font-size: 0.92rem; font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.22s var(--tg-ease);
}
.telegram-copier-page .tg-btn-primary {
    background: rgba(14, 155, 255, 0.10);
    border-color: rgba(14, 155, 255, 0.30);
    color: var(--tg-primary);
}
.telegram-copier-page .tg-btn-primary:hover {
    background: rgba(14, 155, 255, 0.18);
    border-color: rgba(14, 155, 255, 0.50);
    color: #57C8EA;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(14, 155, 255, 0.18);
}
.telegram-copier-page .tg-btn-danger {
    background: rgba(255, 90, 110, 0.10);
    border-color: rgba(255, 90, 110, 0.30);
    color: var(--tg-danger);
}
.telegram-copier-page .tg-btn-danger:hover {
    background: rgba(255, 90, 110, 0.18);
    border-color: rgba(255, 90, 110, 0.50);
    color: #FF7A8B;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255, 90, 110, 0.16);
}
.telegram-copier-page .tg-btn-chevron { font-size: 0.75rem; opacity: 0.7; margin-left: -2px; }
.telegram-copier-page .tg-btn:hover .tg-btn-chevron { transform: translateX(2px); }

/* ── Decorative mark ─────────────────────────────────────────────────────── */
.telegram-copier-page .tg-session-decor {
    position: absolute;
    right: 26px; bottom: 14px;
    font-size: 3.4rem;
    color: var(--tg-primary);
    opacity: 0.07;
    transform: rotate(-18deg);
    pointer-events: none;
    transition: opacity 0.3s var(--tg-ease), transform 0.3s var(--tg-ease);
}
.telegram-copier-page .tg-session:hover .tg-session-decor {
    opacity: 0.12;
    transform: rotate(-18deg) translate(4px, -4px);
}

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.telegram-copier-page .tg-alert {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px;
    margin-bottom: 20px;
    border-radius: var(--tg-radius-sm);
    font-size: 0.86rem; font-weight: 500;
}
.telegram-copier-page .tg-alert-success {
    background: rgba(var(--fn-pos-rgb), 0.08);
    border: 1px solid rgba(var(--fn-pos-rgb), 0.24);
    color: var(--fn-pos);
}
.telegram-copier-page .tg-alert-danger {
    background: rgba(255, 90, 110, 0.08);
    border: 1px solid rgba(255, 90, 110, 0.24);
    color: var(--tg-danger);
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.telegram-copier-page .tg-empty { text-align: center; padding: 52px 28px; }
.telegram-copier-page .tg-empty-icon {
    width: 68px; height: 68px; margin: 0 auto 18px;
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem;
    color: #5BA9F5;
    background: linear-gradient(145deg, rgba(91,169,245,0.18), rgba(79,124,255,0.05));
    border: 1px solid rgba(91,169,245,0.20);
}
.telegram-copier-page .tg-empty-title {
    font-size: 1.05rem; font-weight: 700;
    color: var(--tg-text);
    margin-bottom: 8px;
}
.telegram-copier-page .tg-empty-text {
    font-size: 0.86rem;
    color: var(--tg-text-sec);
    max-width: 460px;
    margin: 0 auto 22px;
    line-height: 1.6;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .telegram-copier-page .tg-session-stats { gap: 16px; }
}
@media (max-width: 575.98px) {
    .telegram-copier-page .tg-page-title { font-size: 1.3rem; }
    .telegram-copier-page .tg-page-header-icon { width: 44px; height: 44px; font-size: 1.15rem; border-radius: 13px; }
    .telegram-copier-page .tg-page-header-cta { width: 100%; justify-content: center; }
    .telegram-copier-page .tg-session-head { padding: 18px; gap: 13px; }
    .telegram-copier-page .tg-avatar { width: 48px; height: 48px; font-size: 1.05rem; }
    .telegram-copier-page .tg-identity-name { font-size: 1.1rem; }
    .telegram-copier-page .tg-session-stats {
        padding: 18px;
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 16px;
    }
    .telegram-copier-page .tg-session-actions { padding: 18px; }
    .telegram-copier-page .tg-session-actions .tg-btn,
    .telegram-copier-page .tg-session-actions form { width: 100%; }
    .telegram-copier-page .tg-session-actions .tg-btn { justify-content: center; }
    .telegram-copier-page .tg-session-decor { display: none; }
}

/* ── Light theme ─────────────────────────────────────────────────────────── */
[data-theme="light"] .telegram-copier-page {
    --tg-card: #FFFFFF;
    --tg-surface: #F7F8FA;
    --tg-border: rgba(15, 23, 42, 0.08);
    --tg-border-strong: rgba(15, 23, 42, 0.14);
    --tg-text: #0F1724;
    --tg-text-sec: #64748B;
    --tg-text-dim: #94A3B8;
    --tg-shadow: 0 12px 32px rgba(15, 23, 42, 0.10);
    --tg-shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.06);
}


/* ── Telegram Copier — channel list table ───────────────────────────────── */

/* Bootstrap's .table defaults leak a light surface through on dark theme.
   Force the table to inherit the card surface instead. */
.telegram-copier-page .tg-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--tg-text);
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: var(--tg-text);
    --bs-table-hover-bg: transparent;
    --bs-table-hover-color: var(--tg-text);
    --bs-table-accent-bg: transparent;
    --bs-table-border-color: var(--tg-border);
    background: transparent;
    color: var(--tg-text);
    margin: 0;
}
.telegram-copier-page .tg-table > :not(caption) > * > * {
    background-color: transparent;
    color: inherit;
    box-shadow: none;
}

.telegram-copier-page .tg-table thead th {
    background: var(--tg-surface) !important;
    color: var(--tg-text-sec) !important;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--tg-border) !important;
    padding: 11px 20px !important;
    white-space: nowrap;
}
.telegram-copier-page .tg-table tbody td {
    border-bottom: 1px solid var(--tg-border) !important;
    border-top: none !important;
    padding: 12px 20px !important;
    font-size: 0.86rem;
    vertical-align: middle;
}
.telegram-copier-page .tg-table tbody tr:last-child td { border-bottom: none !important; }
.telegram-copier-page .tg-table tbody tr { transition: background 0.18s var(--tg-ease); }
.telegram-copier-page .tg-table tbody tr:hover td { background: rgba(255, 255, 255, 0.025) !important; }

/* Card header above the table */
.telegram-copier-page .tg-table-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--tg-border);
}
.telegram-copier-page .tg-table-head-title {
    display: flex; align-items: center; gap: 9px;
    font-size: 0.9rem; font-weight: 700;
    color: var(--tg-text);
}
.telegram-copier-page .tg-table-head-title i { color: var(--tg-purple); }

/* Channel list search + filters */
.telegram-copier-page .tg-table-head-search { flex-wrap: wrap; }
.telegram-copier-page .tg-channel-tools {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    margin-left: auto;
}
.telegram-copier-page .tg-search { position: relative; }
.telegram-copier-page .tg-search i {
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    font-size: 0.8rem; color: var(--tg-text-dim); pointer-events: none;
}
.telegram-copier-page .tg-search-input {
    width: 240px; max-width: 100%;
    padding: 7px 12px 7px 32px;
    font-size: 0.84rem; font-family: inherit;
    color: var(--tg-text);
    background: var(--tg-surface);
    border: 1px solid var(--tg-border-strong);
    border-radius: 10px;
    outline: none;
    transition: border-color 0.16s var(--tg-ease), box-shadow 0.16s var(--tg-ease);
}
.telegram-copier-page .tg-search-input::placeholder { color: var(--tg-text-dim); }
.telegram-copier-page .tg-search-input:focus {
    border-color: rgba(14, 155, 255, 0.45);
    box-shadow: 0 0 0 3px rgba(14, 155, 255, 0.12);
}
.telegram-copier-page .tg-filter-group {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--tg-surface);
    border: 1px solid var(--tg-border-strong);
    border-radius: 10px;
}
.telegram-copier-page .tg-filter {
    padding: 4px 10px;
    font-size: 0.76rem; font-weight: 600; font-family: inherit;
    color: var(--tg-text-sec);
    background: transparent; border: 0; border-radius: 7px;
    cursor: pointer;
}
.telegram-copier-page .tg-filter:hover { color: var(--tg-text); }
.telegram-copier-page .tg-filter.is-active { color: var(--tg-primary); background: rgba(14, 155, 255, 0.12); }
.telegram-copier-page .tg-no-match {
    padding: 28px 20px !important;
    text-align: center;
    font-size: 0.86rem;
    color: var(--tg-text-sec);
}
.telegram-copier-page .tg-no-match i { margin-right: 6px; color: var(--tg-text-dim); }
@media (max-width: 575.98px) {
    .telegram-copier-page .tg-channel-tools { width: 100%; margin-left: 0; }
    .telegram-copier-page .tg-search { flex: 1 1 100%; }
    .telegram-copier-page .tg-search-input { width: 100%; }
}
.telegram-copier-page .tg-count-pill {
    font-size: 0.72rem; font-weight: 600;
    color: var(--tg-text-sec);
    background: var(--tg-surface);
    border: 1px solid var(--tg-border-strong);
    border-radius: 999px;
    padding: 3px 11px;
    font-variant-numeric: tabular-nums;
}

/* Channel name cell */
.telegram-copier-page .tg-channel-cell { display: flex; align-items: center; gap: 11px; min-width: 0; }
.telegram-copier-page .tg-channel-avatar {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 9px;
    font-size: 0.8rem;
    border: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.telegram-copier-page .tg-channel-avatar.is-channel { background: rgba(79,124,255,0.14); color: var(--tg-blue);   border-color: rgba(79,124,255,0.22); }
.telegram-copier-page .tg-channel-avatar.is-group   { background: rgba(123,97,255,0.14); color: var(--tg-purple); border-color: rgba(123,97,255,0.22); }
.telegram-copier-page .tg-channel-title {
    font-weight: 600;
    color: var(--tg-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.telegram-copier-page .tg-type-chip {
    display: inline-block;
    font-size: 0.72rem; font-weight: 600;
    color: var(--tg-text-sec);
    background: var(--tg-surface);
    border: 1px solid var(--tg-border);
    border-radius: 8px;
    padding: 3px 10px;
}

/* Copying state */
.telegram-copier-page .tg-state {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.72rem; font-weight: 600;
    padding: 4px 11px; border-radius: 999px;
}
.telegram-copier-page .tg-state-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.telegram-copier-page .tg-state-on  { background: rgba(14, 155, 255,0.12);   color: var(--tg-primary);  border: 1px solid rgba(14, 155, 255,0.26); }
.telegram-copier-page .tg-state-off { background: rgba(156,163,175,0.10); color: var(--tg-text-dim); border: 1px solid rgba(156,163,175,0.18); }

.telegram-copier-page .tg-row-actions {
    display: inline-flex; align-items: center; gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Small + extra button variants */
.telegram-copier-page .tg-btn-sm {
    padding: 7px 15px;
    font-size: 0.8rem;
    border-radius: 9px;
    gap: 6px;
}
.telegram-copier-page .tg-btn-info {
    background: rgba(79, 124, 255, 0.10);
    border-color: rgba(79, 124, 255, 0.30);
    color: var(--tg-blue);
}
.telegram-copier-page .tg-btn-info:hover {
    background: rgba(79, 124, 255, 0.18);
    border-color: rgba(79, 124, 255, 0.50);
    color: #7B9CFF;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(79, 124, 255, 0.16);
}
.telegram-copier-page .tg-btn-ghost {
    background: var(--tg-surface);
    border-color: var(--tg-border-strong);
    color: var(--tg-text-sec);
}
.telegram-copier-page .tg-btn-ghost:hover {
    color: var(--tg-text);
    border-color: var(--tg-border-strong);
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-1px);
}

.telegram-copier-page .tg-alert-warning {
    background: rgba(246, 195, 67, 0.08);
    border: 1px solid rgba(246, 195, 67, 0.24);
    color: var(--tg-warning);
}
.telegram-copier-page .tg-session-label { color: var(--tg-text); font-weight: 700; }

@media (max-width: 767.98px) {
    .telegram-copier-page .tg-table thead th,
    .telegram-copier-page .tg-table tbody td { padding: 10px 14px !important; }
    .telegram-copier-page .tg-channel-title { max-width: 190px; }
}

/* Light theme — let the shared tokens drive it, just soften the hover */
[data-theme="light"] .telegram-copier-page .tg-table tbody tr:hover td { background: rgba(15, 23, 42, 0.025) !important; }
[data-theme="light"] .telegram-copier-page .tg-btn-ghost:hover { background: rgba(15, 23, 42, 0.04); }


/* ══════════════════════════════════════════════════════════════════════════
   EA ACCOUNTS — Premium redesign
   Scoped to .ea-accounts-page (Views/TradingAccount/Index.cshtml)
   ══════════════════════════════════════════════════════════════════════════ */
.ea-accounts-page {
    --ea-card: #131D2D;
    --ea-surface: #0F1724;
    --ea-border: rgba(255, 255, 255, 0.06);
    --ea-border-strong: rgba(255, 255, 255, 0.10);
    --ea-primary: #0E9BFF;
    --ea-blue: #4F7CFF;
    --ea-warning: #F6C343;
    --ea-danger: #FF5A6E;
    --ea-text: #FFFFFF;
    --ea-text-sec: #9CA3AF;
    --ea-text-dim: #6B7280;
    --ea-radius: 18px;
    --ea-radius-sm: 12px;
    --ea-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    --ea-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.24);
    --ea-ease: cubic-bezier(0.16, 1, 0.3, 1);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--ea-text);
}

/* ── Page header ─────────────────────────────────────────────────────────── */
.ea-accounts-page .ea-page-header {
    display: flex; align-items: center; gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.ea-accounts-page .ea-page-header-icon {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 52px; height: 52px;
    border-radius: 16px;
    font-size: 1.4rem;
    color: var(--ea-primary);
    background: linear-gradient(145deg, rgba(14, 155, 255,0.18), rgba(14, 155, 255,0.04));
    border: 1px solid rgba(14, 155, 255,0.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 18px rgba(14, 155, 255,0.12);
}
.ea-accounts-page .ea-page-header-text { flex: 1; min-width: 0; }
.ea-accounts-page .ea-page-title {
    font-size: 1.6rem; font-weight: 700;
    color: var(--ea-text);
    letter-spacing: -0.025em;
    margin: 0 0 2px;
}
.ea-accounts-page .ea-page-subtitle {
    font-size: 0.875rem; font-weight: 500;
    color: var(--ea-text-sec);
    margin: 0;
}
.ea-accounts-page .ea-page-header-cta { flex-shrink: 0; }
.ea-accounts-page .ea-page-note {
    font-size: 0.82rem;
    color: var(--ea-text-sec);
    margin-bottom: 20px;
}

/* ── Card shell ──────────────────────────────────────────────────────────── */
.ea-accounts-page .ea-card {
    position: relative;
    overflow: hidden;
    background: var(--ea-card);
    border: 1px solid var(--ea-border);
    border-radius: var(--ea-radius);
    box-shadow: var(--ea-shadow-sm);
    transition: transform 0.25s var(--ea-ease), box-shadow 0.25s var(--ea-ease), border-color 0.25s var(--ea-ease);
}

/* Two cards per row once there is room; keeps the second track when only one */
.ea-accounts-page .ea-account-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
/* Desktop: always exactly two cards per row */
@media (min-width: 992px) {
    .ea-accounts-page .ea-account-grid { grid-template-columns: repeat(2, 1fr); }
}
.ea-accounts-page .ea-account {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.ea-accounts-page .ea-account:hover { transform: translateY(-3px); box-shadow: var(--ea-shadow); }

/* Accent wash + border tint, alternating per card */
.ea-accounts-page .ea-account::before {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    opacity: 0.9;
    transition: opacity 0.25s var(--ea-ease);
}
.ea-accounts-page .ea-accent-green {
    border-color: rgba(14, 155, 255, 0.22);
    box-shadow: var(--ea-shadow-sm), 0 0 0 1px rgba(14, 155, 255, 0.04);
}
.ea-accounts-page .ea-accent-green::before {
    background: radial-gradient(110% 80% at 0% 0%, rgba(14, 155, 255,0.10), transparent 58%);
}
.ea-accounts-page .ea-accent-green:hover { border-color: rgba(14, 155, 255, 0.38); }

.ea-accounts-page .ea-accent-blue {
    border-color: rgba(79, 124, 255, 0.22);
    box-shadow: var(--ea-shadow-sm), 0 0 0 1px rgba(79, 124, 255, 0.04);
}
.ea-accounts-page .ea-accent-blue::before {
    background: radial-gradient(110% 80% at 0% 0%, rgba(79,124,255,0.10), transparent 58%);
}
.ea-accounts-page .ea-accent-blue:hover { border-color: rgba(79, 124, 255, 0.38); }

/* ── Identity row ────────────────────────────────────────────────────────── */
.ea-accounts-page .ea-account-head {
    position: relative;
    display: flex; align-items: flex-start; flex-wrap: wrap; gap: 14px;
    padding: 20px 22px;
}
.ea-accounts-page .ea-platform-tile {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3px;
    flex-shrink: 0;
    width: 62px; height: 62px;
    border-radius: 14px;
    background: var(--ea-surface);
    border: 1px solid var(--ea-border-strong);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    transition: transform 0.25s var(--ea-ease);
}
.ea-accounts-page .ea-account:hover .ea-platform-tile { transform: scale(1.04); }
.ea-accounts-page .ea-platform-name {
    font-size: 0.86rem; font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
}
.ea-accounts-page .ea-platform-tile i { font-size: 0.78rem; opacity: 0.75; }
.ea-accounts-page .ea-accent-green .ea-platform-tile { color: var(--ea-primary); border-color: rgba(14, 155, 255,0.28); background: rgba(14, 155, 255,0.07); }
.ea-accounts-page .ea-accent-blue  .ea-platform-tile { color: var(--ea-blue);    border-color: rgba(79,124,255,0.28); background: rgba(79,124,255,0.07); }

.ea-accounts-page .ea-identity { flex: 1 1 150px; min-width: 150px; padding-top: 2px; }
.ea-accounts-page .ea-identity-login {
    font-size: 1.4rem; font-weight: 700;
    color: var(--ea-text);
    letter-spacing: -0.02em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ea-accounts-page .ea-identity-server {
    font-size: 0.86rem; font-weight: 500;
    color: var(--ea-text-sec);
    margin-top: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* One horizontal line: trading pill, connection pill, setup status. They read as
   three peers, so stacking them made the card look like a list of problems. Wraps
   rather than overflows once the card gets narrow. */
.ea-accounts-page .ea-head-right {
    display: flex; flex-direction: row;
    align-items: center; justify-content: flex-end;
    flex-wrap: wrap; gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}
.ea-accounts-page .ea-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 0.76rem; font-weight: 600;
    white-space: nowrap;
}
.ea-accounts-page .ea-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ea-accounts-page .ea-pill-online  { background: rgba(14, 155, 255,0.12);   color: var(--ea-primary);  border: 1px solid rgba(14, 155, 255,0.26); }
.ea-accounts-page .ea-pill-online .ea-pill-dot { animation: ea-pulse 2s infinite; }
.ea-accounts-page .ea-pill-offline { background: rgba(156,163,175,0.10); color: var(--ea-text-dim); border: 1px solid rgba(156,163,175,0.20); }
@keyframes ea-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(14, 155, 255, 0.55); }
    70%  { box-shadow: 0 0 0 5px rgba(14, 155, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(14, 155, 255, 0); }
}
.ea-accounts-page .ea-account-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.86rem; font-weight: 600;
    color: var(--ea-primary);
    white-space: nowrap;
}
.ea-accounts-page .ea-status-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
}

/* ── Detail rows ─────────────────────────────────────────────────────────── */
.ea-accounts-page .ea-detail-list {
    position: relative;
    padding: 0 22px;
    border-top: 1px solid var(--ea-border);
}
.ea-accounts-page .ea-detail-row {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--ea-border);
}
.ea-accounts-page .ea-detail-row:last-child { border-bottom: none; }
.ea-accounts-page .ea-detail-label {
    display: inline-flex; align-items: center; gap: 9px;
    flex-shrink: 0;
    font-size: 0.85rem; font-weight: 500;
    color: var(--ea-text-sec);
}
.ea-accounts-page .ea-detail-label i { font-size: 0.9rem; opacity: 0.7; }
.ea-accounts-page .ea-detail-value {
    flex: 1;
    text-align: right;
    font-size: 0.88rem; font-weight: 600;
    color: var(--ea-text);
    min-width: 0;
    font-variant-numeric: tabular-nums;
}
.ea-accounts-page .ea-detail-value-sm { font-size: 0.83rem; }
.ea-accounts-page .ea-detail-sep   { color: var(--ea-text-dim); margin: 0 3px; }
.ea-accounts-page .ea-detail-muted { color: var(--ea-text-sec); font-weight: 500; }
.ea-accounts-page .ea-text-warn    { color: var(--ea-warning); }
.ea-accounts-page .ea-detail-icon {
    flex-shrink: 0;
    font-size: 0.98rem;
    width: 20px;
    text-align: center;
}
.ea-accounts-page .ea-accent-green .ea-detail-icon { color: var(--ea-primary); opacity: 0.85; }
.ea-accounts-page .ea-accent-blue  .ea-detail-icon { color: var(--ea-blue);    opacity: 0.85; }

/* ── Action ──────────────────────────────────────────────────────────────── */
/* Manage on the left, the trading switch pushed to the right, so the destructive
   half of the row is never next to the one people click most. */
.ea-accounts-page .ea-account-actions {
    position: relative;
    margin-top: auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 18px 22px 20px;
}

/* ── Deleted accounts: kept on the list as read-only history ─────────────── */
.ea-accounts-page .ea-account-deleted {
    opacity: 0.62;
    filter: grayscale(0.75);
}
.ea-accounts-page .ea-account-deleted:hover {
    opacity: 0.78;
}
.ea-accounts-page .ea-account-deleted-note {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 0.86rem; font-weight: 600;
    color: var(--ea-text-dim);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.ea-accounts-page .ea-btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 12px 22px;
    border-radius: var(--ea-radius-sm);
    font-size: 0.9rem; font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.22s var(--ea-ease);
}
.ea-accounts-page .ea-btn-primary {
    background: rgba(14, 155, 255, 0.10);
    border-color: rgba(14, 155, 255, 0.30);
    color: var(--ea-primary);
}
.ea-accounts-page .ea-btn-primary:hover {
    background: rgba(14, 155, 255, 0.18);
    border-color: rgba(14, 155, 255, 0.50);
    color: #57C8EA;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(14, 155, 255, 0.18);
}
.ea-accounts-page .ea-btn-outline {
    background: var(--ea-surface);
    border-color: var(--ea-border-strong);
    color: var(--ea-text);
}
.ea-accounts-page .ea-accent-green .ea-btn-outline {
    background: rgba(14, 155, 255, 0.07);
    border-color: rgba(14, 155, 255, 0.28);
    color: var(--ea-primary);
}
.ea-accounts-page .ea-accent-green .ea-btn-outline:hover {
    background: rgba(14, 155, 255, 0.15);
    border-color: rgba(14, 155, 255, 0.48);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(14, 155, 255, 0.16);
}
.ea-accounts-page .ea-accent-blue .ea-btn-outline {
    background: rgba(79, 124, 255, 0.07);
    border-color: rgba(79, 124, 255, 0.28);
    color: var(--ea-blue);
}
.ea-accounts-page .ea-accent-blue .ea-btn-outline:hover {
    background: rgba(79, 124, 255, 0.15);
    border-color: rgba(79, 124, 255, 0.48);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(79, 124, 255, 0.16);
}
.ea-accounts-page .ea-btn-chevron { font-size: 0.75rem; opacity: 0.7; margin-left: 2px; }
.ea-accounts-page .ea-btn:hover .ea-btn-chevron { transform: translateX(2px); }

/* ── Decorative sweep, bottom-right ──────────────────────────────────────── */
.ea-accounts-page .ea-account-decor {
    position: absolute;
    right: -40px; bottom: -70px;
    width: 240px; height: 150px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.3s var(--ea-ease);
}
.ea-accounts-page .ea-accent-green .ea-account-decor {
    border-top: 1px solid rgba(14, 155, 255, 0.30);
    box-shadow: 0 -14px 0 -13px rgba(14, 155, 255, 0.22), 0 -28px 0 -27px rgba(14, 155, 255, 0.14);
}
.ea-accounts-page .ea-accent-blue .ea-account-decor {
    border-top: 1px solid rgba(79, 124, 255, 0.30);
    box-shadow: 0 -14px 0 -13px rgba(79, 124, 255, 0.22), 0 -28px 0 -27px rgba(79, 124, 255, 0.14);
}
.ea-accounts-page .ea-account:hover .ea-account-decor { opacity: 0.85; }

/* ── Alerts ──────────────────────────────────────────────────────────────── */
.ea-accounts-page .ea-alert {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px;
    margin-bottom: 20px;
    border-radius: var(--ea-radius-sm);
    font-size: 0.86rem; font-weight: 500;
}
.ea-accounts-page .ea-alert-success {
    background: rgba(var(--fn-pos-rgb), 0.08);
    border: 1px solid rgba(var(--fn-pos-rgb), 0.24);
    color: var(--fn-pos);
}
.ea-accounts-page .ea-alert-danger {
    background: rgba(255, 90, 110, 0.08);
    border: 1px solid rgba(255, 90, 110, 0.24);
    color: var(--ea-danger);
}
/* Hitting the plan's account limit is not an error — it is a prompt to upgrade,
   so it sits between the success and danger tones rather than shouting. */
.ea-accounts-page .ea-alert-warning {
    background: rgba(246, 195, 67, 0.08);
    border: 1px solid rgba(246, 195, 67, 0.28);
    color: #f6c343;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.ea-accounts-page .ea-empty { text-align: center; padding: 52px 28px; }
.ea-accounts-page .ea-empty-icon {
    width: 68px; height: 68px; margin: 0 auto 18px;
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem;
    color: var(--ea-primary);
    background: linear-gradient(145deg, rgba(14, 155, 255,0.16), rgba(14, 155, 255,0.04));
    border: 1px solid rgba(14, 155, 255,0.20);
}
.ea-accounts-page .ea-empty-title {
    font-size: 1.05rem; font-weight: 700;
    color: var(--ea-text);
    margin-bottom: 8px;
}
.ea-accounts-page .ea-empty-text {
    font-size: 0.86rem;
    color: var(--ea-text-sec);
    max-width: 440px;
    margin: 0 auto 22px;
    line-height: 1.6;
}
.ea-accounts-page .ea-empty .ea-btn { margin-top: 0; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .ea-accounts-page .ea-account-grid { grid-template-columns: 1fr; }
    .ea-accounts-page .ea-page-title { font-size: 1.3rem; }
    .ea-accounts-page .ea-page-header-icon { width: 44px; height: 44px; font-size: 1.15rem; border-radius: 13px; }
    .ea-accounts-page .ea-page-header-cta { width: 100%; justify-content: center; }
    .ea-accounts-page .ea-account-head { padding: 18px; gap: 12px; flex-wrap: wrap; }
    .ea-accounts-page .ea-platform-tile { width: 52px; height: 52px; }
    .ea-accounts-page .ea-identity-login { font-size: 1.2rem; }
    .ea-accounts-page .ea-detail-list { padding: 0 18px; }
    /* Keep the desktop shape — label left, value right, one line. Scaled down to
       fit rather than wrapped, which used to drop the value onto its own row
       between the label and the trailing icon. */
    .ea-accounts-page .ea-detail-row { gap: 8px; padding: 12px 0; }
    .ea-accounts-page .ea-detail-label { font-size: 0.8rem; gap: 8px; min-width: 0; }
    .ea-accounts-page .ea-detail-label i { font-size: 0.85rem; }
    .ea-accounts-page .ea-detail-value { font-size: 0.82rem; }
    .ea-accounts-page .ea-detail-value-sm { font-size: 0.75rem; }
    .ea-accounts-page .ea-detail-icon { font-size: 0.9rem; width: 18px; }
    /* Too narrow to sit side by side: stack them, each full width. */
    .ea-accounts-page .ea-account-actions {
        flex-direction: column; align-items: stretch;
        padding: 16px 18px 18px;
    }
    .ea-accounts-page .ea-account-actions .ea-btn { width: 100%; justify-content: center; }
    .ea-accounts-page .ea-account-decor { display: none; }
}





/* ── Trading on / stopped ────────────────────────────────────────────────────
   The execution axis, shown next to the connection pill because they are
   different things: "Trading stopped" is the customer's own switch, while
   "Not connected" is the terminal not reporting. An account can be either
   independently, and neither says anything about its subscription. */
.ea-accounts-page .ea-pill-running {
    color: var(--ea-primary);
    background: rgba(14, 155, 255, 0.12);
    border: 1px solid rgba(14, 155, 255, 0.30);
}
.ea-accounts-page .ea-pill-running .ea-pill-dot { background: var(--ea-primary); }

.ea-accounts-page .ea-pill-stopped {
    color: var(--ea-warning);
    background: rgba(246, 195, 67, 0.12);
    border: 1px solid rgba(246, 195, 67, 0.32);
}
.ea-accounts-page .ea-pill-stopped .ea-pill-dot { background: var(--ea-warning); }

/* Amber, not red: stopping is a deliberate, reversible choice, not a fault */
.ea-accounts-page .ea-stopped-note {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 14px 18px 0;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 0.8rem; font-weight: 500;
    line-height: 1.5;
    color: var(--ea-text-sec);
    background: rgba(246, 195, 67, 0.07);
    border: 1px solid rgba(246, 195, 67, 0.20);
}
.ea-accounts-page .ea-stopped-note i {
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 0.95rem;
    color: var(--ea-warning);
}

/* Stop trading sits beside Manage, so it needs the same button family */
.ea-accounts-page .ea-btn-danger {
    background: rgba(255, 90, 110, 0.10);
    border: 1px solid rgba(255, 90, 110, 0.30);
    color: #FF8393;
}
.ea-accounts-page .ea-btn-danger:hover {
    background: rgba(255, 90, 110, 0.18);
    border-color: rgba(255, 90, 110, 0.50);
    color: #FF9AA7;
}
.ea-accounts-page .ea-account-actions form { margin: 0; }

/* ── A plan the customer is already on ───────────────────────────────────────
   Not buyable again until that period ends, so the card is calm rather than
   inviting: green border to match the Owned pill, inert buttons, and a line
   saying when it opens up again. */
.tgsub-page .tgs-plan-owned {
    border-color: rgba(14, 155, 255, 0.28);
}
.tgsub-page .tgs-plan-owned::before {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background: radial-gradient(125% 70% at 50% 0%, rgba(14, 155, 255, 0.08), transparent 62%);
}
.tgsub-page .tgs-plan-owned-note {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 0.76rem; font-weight: 500;
    line-height: 1.5;
    color: var(--tgs-text-dim);
}
.tgsub-page .tgs-plan-owned-note i { flex-shrink: 0; margin-top: 2px; }
/* nowrap so the date never breaks across lines mid-value ("2027-" / "09-10") */
.tgsub-page .tgs-plan-owned-note strong {
    color: var(--tgs-text-sec);
    font-weight: 600;
    white-space: nowrap;
}

/* ── An ended period ─────────────────────────────────────────────────────────
   Kept on the page for a while after it expires so the end date is visible and
   the plan can be bought again. Deliberately colourless: it is not running, and
   must not read like the live cards above it. */
.tgsub-page .tgs-card-ended {
    border-color: var(--tgs-border) !important;
    opacity: 0.92;
}
.tgsub-page .tgs-card-ended::before { background: none; }
.tgsub-page .tgs-card-ended:hover { border-color: var(--tgs-border-strong) !important; }
.tgsub-page .tgs-sub-icon-ended {
    color: var(--tgs-text-dim);
    background: rgba(156, 163, 175, 0.10);
    border-color: rgba(156, 163, 175, 0.20);
}

/* A disabled <button> needs the same inert treatment the span variant gets */
.tgsub-page .tgs-btn.is-disabled,
.tgsub-page button.tgs-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}
.tgsub-page .tgs-btn.is-disabled:hover,
.tgsub-page button.tgs-btn:disabled:hover {
    transform: none;
    box-shadow: none;
    background: var(--tgs-surface);
    border-color: var(--tgs-border-strong);
    color: var(--tgs-text-sec);
}

/* ── Manage page: move to another subscription ──────────────────────────────
   Sits under the Subscription Status details, divided off by the same hairline
   the card already uses between its sections. */
.ea-detail-page .ead-move {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ead-border);
}
.ea-detail-page .ead-move-label {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
    font-size: 0.78rem; font-weight: 600;
    color: var(--ead-text);
}
.ea-detail-page .ead-move-label i { color: var(--ead-accent); }
.ea-detail-page .ead-move-select { font-size: 0.8rem; }
/* Disabled options must still be readable: they are how the customer learns a
   subscription is full or already covering this account. */
.ea-detail-page .ead-move-select option:disabled { color: var(--ead-text-dim); }
.ea-detail-page .ead-move-note {
    display: flex; gap: 8px;
    margin-top: 8px;
    font-size: 0.72rem; line-height: 1.5;
    color: var(--ead-text-sec);
}
.ea-detail-page .ead-move-note a { color: var(--ead-accent); font-weight: 600; }

/* ── "Move account here" menu in the subscription strip ──────────────────────
   A compact dropdown beside Add account. Scoped selectors still apply to the
   menu: Popper's fixed strategy moves where it is drawn, not where it sits in
   the DOM. */
.ea-accounts-page .ea-move-toggle::after { margin-left: 2px; }
.ea-accounts-page .ea-move-menu {
    min-width: 320px;
    max-width: min(420px, 92vw);
    padding: 6px;
    background: var(--ea-card);
    border: 1px solid var(--ea-border-strong);
    border-radius: 14px;
    box-shadow: var(--ea-shadow);
}
.ea-accounts-page .ea-move-menu-head {
    padding: 8px 10px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--ea-border);
    font-size: 0.8rem; font-weight: 700;
    color: var(--ea-text);
}
.ea-accounts-page .ea-move-menu-head span {
    display: block;
    margin-top: 2px;
    font-size: 0.72rem; font-weight: 500;
    color: var(--ea-text-sec);
}
.ea-accounts-page .ea-move-menu form { margin: 0; }
.ea-accounts-page .ea-move-item {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 9px 10px;
    border-radius: 10px;
    white-space: normal;
    color: var(--ea-text);
    background: transparent;
}
.ea-accounts-page .ea-move-item:hover,
.ea-accounts-page .ea-move-item:focus {
    background: rgba(14, 155, 255, 0.10);
    color: var(--ea-text);
}
/* Blocked accounts stay listed, dimmed, so the reason is still readable. */
.ea-accounts-page .ea-move-item:disabled { opacity: 0.5; }
.ea-accounts-page .ea-move-item-login { font-size: 0.85rem; font-weight: 600; }
.ea-accounts-page .ea-move-item-meta { font-size: 0.74rem; color: var(--ea-text-sec); }

/* ── Back link (focused single-subscription view) ────────────────────────────
   Shown only when the page was opened from one subscription's "Manage accounts"
   button, so there is somewhere to go back to. */
.ea-accounts-page .ea-back-link {
    display: inline-flex; align-items: center; gap: 8px;
    margin-bottom: 16px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 0.84rem; font-weight: 600;
    text-decoration: none;
    color: var(--ea-text-sec);
    background: var(--ea-surface);
    border: 1px solid var(--ea-border-strong);
    transition: all 0.22s var(--ea-ease);
}
.ea-accounts-page .ea-back-link:hover {
    color: var(--ea-text);
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateX(-2px);
}
.ea-accounts-page .ea-back-link i { font-size: 0.9rem; }

/* Beats the light theme's `:root[data-theme="light"] a` colour, which would
   otherwise paint this link primary blue instead of button text */
[data-theme="light"] .ea-accounts-page a.ea-back-link { color: var(--ea-text-sec); }
[data-theme="light"] .ea-accounts-page a.ea-back-link:hover { color: var(--ea-text); }

/* ── Subscription sections ───────────────────────────────────────────────────
   The page is grouped by subscription: one header strip per subscription, then
   only the accounts seated on it. Every figure in a strip belongs to that one
   subscription — the counts are never added up across strips. */
.ea-accounts-page .ea-sub-section { margin-bottom: 34px; }
.ea-accounts-page .ea-sub-section:last-child { margin-bottom: 0; }

.ea-accounts-page .ea-sub-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    padding: 20px 24px;
    margin-bottom: 18px;
    border-color: rgba(14, 155, 255, 0.22) !important;
}
.ea-accounts-page .ea-sub-head::before {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 78% at 10% 0%, rgba(14, 155, 255, 0.09), transparent 62%);
}
.ea-accounts-page .ea-sub-head > * { position: relative; }

/* The "not covered by a subscription" strip is deliberately colourless — it is
   not a subscription and must not read as one. */
.ea-accounts-page .ea-sub-head-muted { border-color: var(--ea-border) !important; }
.ea-accounts-page .ea-sub-head-muted::before { background: none; }

.ea-accounts-page .ea-sub-icon {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 46px; height: 46px;
    border-radius: 14px;
    font-size: 1.15rem;
    color: var(--ea-primary);
    background: linear-gradient(145deg, rgba(14, 155, 255, 0.20), rgba(14, 155, 255, 0.05));
    border: 1px solid rgba(14, 155, 255, 0.24);
}
.ea-accounts-page .ea-sub-icon-muted {
    color: var(--ea-text-dim);
    background: rgba(156, 163, 175, 0.08);
    border-color: rgba(156, 163, 175, 0.18);
}

.ea-accounts-page .ea-sub-id { flex: 1; min-width: 0; }
.ea-accounts-page .ea-sub-name {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    font-size: 1.2rem; font-weight: 700;
    color: var(--ea-text);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 5px;
}
.ea-accounts-page .ea-sub-badge {
    display: inline-flex; align-items: center;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 0.7rem; font-weight: 700;
    white-space: nowrap;
}
.ea-accounts-page .ea-sub-badge-green {
    color: #57C8EA;
    background: rgba(14, 155, 255, 0.12);
    border: 1px solid rgba(14, 155, 255, 0.32);
}
.ea-accounts-page .ea-sub-badge-blue {
    color: #7FBBFF;
    background: rgba(79, 124, 255, 0.13);
    border: 1px solid rgba(79, 124, 255, 0.32);
}
.ea-accounts-page .ea-sub-meta {
    font-size: 0.83rem; font-weight: 500;
    line-height: 1.5;
    color: var(--ea-text-sec);
    margin: 0;
}
.ea-accounts-page .ea-sub-price { color: var(--ea-text); font-weight: 600; }
.ea-accounts-page .ea-sub-sep { opacity: 0.5; margin: 0 4px; }

.ea-accounts-page .ea-sub-usage { flex-shrink: 0; text-align: right; }
.ea-accounts-page .ea-sub-usage-count {
    font-size: 1.4rem; font-weight: 700;
    color: var(--ea-text);
    letter-spacing: -0.03em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.ea-accounts-page .ea-sub-usage-count span {
    font-size: 0.9rem; font-weight: 600;
    color: var(--ea-text-sec);
}
.ea-accounts-page .ea-sub-usage-label {
    font-size: 0.74rem; font-weight: 500;
    color: var(--ea-text-sec);
    margin-top: 2px;
    white-space: nowrap;
}
.ea-accounts-page .ea-sub-cta {
    flex-shrink: 0;
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
}

/* Grey accent for accounts no live subscription covers */
.ea-accounts-page .ea-accent-grey { border-color: var(--ea-border) !important; }
.ea-accounts-page .ea-accent-grey .ea-platform-tile {
    color: var(--ea-text-dim);
    border-color: rgba(156, 163, 175, 0.22);
    background: rgba(156, 163, 175, 0.06);
}
.ea-accounts-page .ea-accent-grey .ea-detail-icon { color: var(--ea-text-dim); opacity: 0.8; }

/* An empty state sitting inside a section rather than replacing the whole page */
.ea-accounts-page .ea-empty-inline { padding: 34px 24px; }

@media (max-width: 767.98px) {
    .ea-accounts-page .ea-sub-head { padding: 18px; gap: 14px; }
    .ea-accounts-page .ea-sub-name { font-size: 1.05rem; }
    .ea-accounts-page .ea-sub-usage { text-align: left; }
    .ea-accounts-page .ea-sub-cta { width: 100%; }
    .ea-accounts-page .ea-sub-cta .ea-btn { width: 100%; justify-content: center; }
}

/* ── Light theme ─────────────────────────────────────────────────────────── */
[data-theme="light"] .ea-accounts-page {
    --ea-card: #FFFFFF;
    --ea-surface: #F7F8FA;
    --ea-border: rgba(15, 23, 42, 0.08);
    --ea-border-strong: rgba(15, 23, 42, 0.14);
    --ea-text: #0F1724;
    --ea-text-sec: #64748B;
    --ea-text-dim: #94A3B8;
    --ea-shadow: 0 12px 32px rgba(15, 23, 42, 0.10);
    --ea-shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.06);
}
[data-theme="light"] .ea-accounts-page .ea-btn-outline { background: #FFFFFF; }


/* ══════════════════════════════════════════════════════════════════════════
   SUBSCRIPTION PLANS — Premium redesign
   Scoped to .plans-page (Views/Plans/Index.cshtml)
   ══════════════════════════════════════════════════════════════════════════ */
.plans-page {
    --pl-card: #131D2D;
    --pl-surface: #0F1724;
    --pl-border: rgba(255, 255, 255, 0.06);
    --pl-border-strong: rgba(255, 255, 255, 0.10);
    --pl-brand: #0E9BFF;
    --pl-blue: #4F7CFF;
    --pl-amber: #F6C343;
    --pl-danger: #FF5A6E;
    --pl-text: #FFFFFF;
    --pl-text-sec: #9CA3AF;
    --pl-text-dim: #6B7280;
    --pl-radius: 18px;
    --pl-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.24);
    --pl-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    --pl-ease: cubic-bezier(0.16, 1, 0.3, 1);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--pl-text);
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.plans-page .plans-header { margin-bottom: 22px; }
.plans-page .plans-title {
    font-size: 1.6rem; font-weight: 700;
    color: var(--pl-text);
    letter-spacing: -0.025em;
    margin: 0 0 4px;
}
.plans-page .plans-subtitle {
    font-size: 0.875rem; font-weight: 500;
    color: var(--pl-text-sec);
    margin: 0;
}
.plans-page .plans-subtitle a {
    color: var(--pl-blue);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid rgba(79, 124, 255, 0.35);
    transition: color 0.2s var(--pl-ease), border-color 0.2s var(--pl-ease);
}
.plans-page .plans-subtitle a:hover { color: #7B9CFF; border-color: rgba(79, 124, 255, 0.7); }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.plans-page .plans-tabs {
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0 0 26px;
    flex-wrap: wrap;
}
.plans-page .plans-tab {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 11px 20px;
    border-radius: 12px;
    font-size: 0.9rem; font-weight: 600;
    color: var(--pl-text-sec);
    background: var(--pl-surface);
    border: 1px solid var(--pl-border-strong);
    cursor: pointer;
    transition: all 0.22s var(--pl-ease);
}
.plans-page .plans-tab i { font-size: 1rem; }
.plans-page .plans-tab:hover { color: var(--pl-text); border-color: rgba(255, 255, 255, 0.18); }
.plans-page .plans-tab.active {
    color: var(--pl-brand);
    background: rgba(14, 155, 255, 0.10);
    border-color: rgba(14, 155, 255, 0.38);
    box-shadow: 0 4px 16px rgba(14, 155, 255, 0.12);
}
.plans-page .plans-tab.active i { color: var(--pl-brand); }
.plans-page #telegram-tab i { color: #4FA9F5; }
.plans-page #telegram-tab.active {
    color: #4FA9F5;
    background: rgba(79, 169, 245, 0.10);
    border-color: rgba(79, 169, 245, 0.38);
    box-shadow: 0 4px 16px rgba(79, 169, 245, 0.12);
}

/* ── Grid ────────────────────────────────────────────────────────────────── */
.plans-page .plans-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}
@media (min-width: 768px)  { .plans-page .plans-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .plans-page .plans-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── Card ────────────────────────────────────────────────────────────────── */
.plans-page .plan-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 22px;
    border-radius: var(--pl-radius);
    background: var(--pl-card);
    border: 1px solid var(--pl-border);
    box-shadow: var(--pl-shadow-sm);
    transition: transform 0.25s var(--pl-ease), box-shadow 0.25s var(--pl-ease), border-color 0.25s var(--pl-ease);
}
/* Accent wash bleeding from the top */
.plans-page .plan-card::before {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    opacity: 0.9;
    transition: opacity 0.25s var(--pl-ease);
}
.plans-page .plan-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pl-shadow);
}
.plans-page .plan-card:hover::before { opacity: 1; }

.plans-page .plan-accent-green {
    border-color: rgba(14, 155, 255, 0.24);
    --pl-accent: var(--pl-brand);
}
.plans-page .plan-accent-green::before {
    background: radial-gradient(125% 70% at 50% 0%, rgba(14, 155, 255, 0.12), transparent 60%);
}
.plans-page .plan-accent-green:hover {
    border-color: rgba(14, 155, 255, 0.45);
    box-shadow: var(--pl-shadow), 0 0 30px rgba(14, 155, 255, 0.10);
}

.plans-page .plan-accent-blue {
    border-color: rgba(79, 124, 255, 0.24);
    --pl-accent: var(--pl-blue);
}
.plans-page .plan-accent-blue::before {
    background: radial-gradient(125% 70% at 50% 0%, rgba(79, 124, 255, 0.14), transparent 60%);
}
.plans-page .plan-accent-blue:hover {
    border-color: rgba(79, 124, 255, 0.45);
    box-shadow: var(--pl-shadow), 0 0 30px rgba(79, 124, 255, 0.12);
}

.plans-page .plan-accent-amber {
    border-color: rgba(246, 195, 67, 0.24);
    --pl-accent: var(--pl-amber);
}
.plans-page .plan-accent-amber::before {
    background: radial-gradient(125% 70% at 50% 0%, rgba(246, 195, 67, 0.12), transparent 60%);
}
.plans-page .plan-accent-amber:hover {
    border-color: rgba(246, 195, 67, 0.45);
    box-shadow: var(--pl-shadow), 0 0 30px rgba(246, 195, 67, 0.10);
}

/* Faint tier numeral behind the header */
.plans-page .plan-watermark {
    position: absolute;
    top: -18px; right: 6px;
    font-size: 7rem;
    font-weight: 800;
    line-height: 1;
    color: var(--pl-accent, var(--pl-brand));
    opacity: 0.05;
    pointer-events: none;
    user-select: none;
    transition: opacity 0.3s var(--pl-ease);
}
.plans-page .plan-card:hover .plan-watermark { opacity: 0.09; }

/* ── Card head ───────────────────────────────────────────────────────────── */
.plans-page .plan-head {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 18px;
    margin-bottom: 4px;
}
.plans-page .plan-head-left { min-width: 0; }
.plans-page .plan-tier-badge {
    display: inline-block;
    font-size: 0.72rem; font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 9px;
    color: var(--pl-accent, var(--pl-brand));
}
.plans-page .plan-accent-green .plan-tier-badge { background: rgba(14, 155, 255, 0.12);  border: 1px solid rgba(14, 155, 255, 0.30); }
.plans-page .plan-accent-blue  .plan-tier-badge { background: rgba(79, 124, 255, 0.12); border: 1px solid rgba(79, 124, 255, 0.30); }
.plans-page .plan-accent-amber .plan-tier-badge { background: rgba(246, 195, 67, 0.12); border: 1px solid rgba(246, 195, 67, 0.30); }
.plans-page .plan-name {
    font-size: 1.35rem; font-weight: 700;
    color: var(--pl-text);
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.plans-page .plan-blurb {
    font-size: 0.82rem; font-weight: 500;
    color: var(--pl-text-sec);
    margin-top: 4px;
}
.plans-page .plan-head-right { text-align: right; flex-shrink: 0; }
.plans-page .plan-price {
    font-size: 1.55rem; font-weight: 700;
    color: var(--pl-text);
    letter-spacing: -0.03em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.plans-page .plan-period {
    font-size: 0.76rem; font-weight: 500;
    color: var(--pl-text-sec);
    margin-top: 3px;
    white-space: nowrap;
}

/* ── Sections ────────────────────────────────────────────────────────────── */
.plans-page .plan-section {
    position: relative;
    padding: 15px 0;
    border-top: 1px solid var(--pl-border);
}
.plans-page .plan-section-last { margin-top: auto; }
.plans-page .plan-section-title {
    font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--pl-accent, var(--pl-brand));
    margin-bottom: 9px;
}
.plans-page .plan-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    font-size: 0.85rem;
}
.plans-page .plan-row-label { color: var(--pl-text-sec); font-weight: 500; }
.plans-page .plan-row-value {
    color: var(--pl-text);
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.plans-page .plan-yes,
.plans-page .plan-no {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 600;
}
.plans-page .plan-yes { color: var(--pl-brand); }
.plans-page .plan-no  { color: var(--pl-text-dim); }

/* ── Section footnote ────────────────────────────────────────────────────── */
.plans-page .plan-hint {
    margin-top: 8px;
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--pl-text-dim);
}

/* ── "What's included" checklist — the same feature list the Telegram Copier
   subscription page shows, from TelegramCopierPlanFeatures. ─────────────────── */
.plans-page .plan-feature-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column;
    gap: 7px;
}
.plans-page .plan-feature-item {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 0.82rem; line-height: 1.4;
    color: var(--pl-text-sec);
}
.plans-page .plan-feature-item i {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--pl-accent, var(--pl-brand));
}

/* ── Subscribe footer ────────────────────────────────────────────────────────
   Only rendered on the account-copier subscription page — the Plans page shows the
   same card with nothing to press. */
.plans-page .plan-cta { display: flex; flex-direction: column; gap: 10px; }
.plans-page .plan-cta .plan-hint { margin-top: 0; }

.plans-page .plan-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 16px;
    font-size: 0.84rem;
    font-weight: 650;
    font-family: inherit;
    color: #04120C;
    text-decoration: none;
    background: var(--pl-accent, var(--pl-brand));
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.18s var(--pl-ease), box-shadow 0.18s var(--pl-ease), filter 0.18s var(--pl-ease);
}
.plans-page .plan-cta-btn:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
}
/* Nothing to subscribe to yet: inert, and it looks inert. */
.plans-page .plan-cta-btn.is-disabled,
.plans-page .plan-cta-btn:disabled {
    color: var(--pl-text-dim);
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--pl-border-strong);
    cursor: not-allowed;
    filter: none;
    transform: none;
    box-shadow: none;
}

.plans-page .plan-cta-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 11px;
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--pl-text-sec);
    background: rgba(14, 155, 255, 0.07);
    border: 1px solid rgba(14, 155, 255, 0.20);
    border-radius: 10px;
}
.plans-page .plan-cta-note i { color: var(--pl-brand); margin-top: 2px; }

/* ── Empty ───────────────────────────────────────────────────────────────── */
.plans-page .plans-empty {
    padding: 40px 20px;
    text-align: center;
    font-size: 0.88rem;
    color: var(--pl-text-sec);
    background: var(--pl-card);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius);
}

/* The CTA picks up --pl-accent from the card's own tier class, so the button matches
   the badge and border glow. Blue is the one dark enough to need light text. */
.plans-page .plan-accent-blue .plan-cta-btn { color: #FFFFFF; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .plans-page .plans-title { font-size: 1.3rem; }
    .plans-page .plan-card { padding: 18px; }
    .plans-page .plan-name  { font-size: 1.2rem; }
    .plans-page .plan-price { font-size: 1.35rem; }
    .plans-page .plan-watermark { font-size: 5.5rem; }
    .plans-page .plans-tab { flex: 1; justify-content: center; padding: 10px 14px; font-size: 0.84rem; }
}

/* ── Light theme ─────────────────────────────────────────────────────────── */
[data-theme="light"] .plans-page {
    --pl-card: #FFFFFF;
    --pl-surface: #F7F8FA;
    --pl-border: rgba(15, 23, 42, 0.08);
    --pl-border-strong: rgba(15, 23, 42, 0.14);
    --pl-text: #0F1724;
    --pl-text-sec: #64748B;
    --pl-text-dim: #94A3B8;
    --pl-shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.06);
    --pl-shadow: 0 12px 32px rgba(15, 23, 42, 0.10);
}
[data-theme="light"] .plans-page .plan-watermark { opacity: 0.06; }


/* ── Plans — Telegram Copier card ───────────────────────────────────────── */

/* Active Telegram tab: solid fill, matching the mockup */
.plans-page #telegram-tab.active {
    color: #FFFFFF;
    background: linear-gradient(135deg, #2E8FF0, #1E6FE0);
    border-color: rgba(79, 169, 245, 0.55);
    box-shadow: 0 6px 20px rgba(46, 143, 240, 0.28);
}
.plans-page #telegram-tab.active i { color: #FFFFFF; }

/* The Telegram card leans blue/indigo regardless of tier accent */
.plans-page .plan-card-tg::before {
    background:
        radial-gradient(120% 62% at 78% 0%, rgba(79, 124, 255, 0.20), transparent 62%),
        radial-gradient(100% 60% at 10% 0%, rgba(123, 97, 255, 0.12), transparent 60%);
}
.plans-page .plan-card-tg { border-color: rgba(79, 124, 255, 0.22); }
.plans-page .plan-card-tg:hover { border-color: rgba(79, 124, 255, 0.45); }

/* Decorative paper plane */
.plans-page .plan-plane {
    position: absolute;
    top: -6px; right: 10px;
    font-size: 4.6rem;
    opacity: 0.10;
    line-height: 1;
    color: #4F9CFF;
    pointer-events: none;
    transform: rotate(-14deg);
    filter: drop-shadow(0 0 14px rgba(79, 156, 255, 0.55));
    transition: transform 0.35s var(--pl-ease);
}
.plans-page .plan-card-tg:hover .plan-plane { transform: rotate(-14deg) translate(5px, -5px); }

.plans-page .plan-head-tg { padding-bottom: 22px; }
.plans-page .plan-head-tg .plan-blurb { max-width: 15rem; }

@media (max-width: 575.98px) {
    .plans-page .plan-plane { font-size: 3.4rem; top: -4px; right: 12px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   EA ACCOUNT DETAILS — Premium redesign
   Scoped to .ea-detail-page (Views/TradingAccount/Details.cshtml)
   ══════════════════════════════════════════════════════════════════════════ */
.ea-detail-page {
    --ead-card: #131D2D;
    --ead-surface: #0F1724;
    --ead-border: rgba(255, 255, 255, 0.06);
    --ead-border-strong: rgba(255, 255, 255, 0.10);
    --ead-accent: #0E9BFF;
    --ead-blue: #4F7CFF;
    --ead-purple: #7B61FF;
    --ead-amber: #F6C343;
    --ead-danger: #FF5A6E;
    --ead-text: #FFFFFF;
    --ead-text-sec: #9CA3AF;
    --ead-text-dim: #6B7280;
    --ead-radius: 18px;
    --ead-radius-sm: 12px;
    --ead-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.24);
    --ead-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    --ead-ease: cubic-bezier(0.16, 1, 0.3, 1);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--ead-text);
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.ea-detail-page .ead-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-bottom: 22px;
}
.ea-detail-page .ead-header-text { min-width: 0; }
.ea-detail-page .ead-title {
    font-size: 1.55rem; font-weight: 700;
    color: var(--ead-text);
    letter-spacing: -0.025em;
    margin: 0 0 3px;
    font-variant-numeric: tabular-nums;
}
.ea-detail-page .ead-subtitle {
    font-size: 0.85rem; font-weight: 500;
    color: var(--ead-text-sec);
    margin: 0;
}
.ea-detail-page .ead-header-actions { display: flex; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.ea-detail-page .ead-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 17px;
    border-radius: 10px;
    font-size: 0.84rem; font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.22s var(--ead-ease);
}
.ea-detail-page .ead-btn-ghost {
    background: var(--ead-surface);
    border-color: var(--ead-border-strong);
    color: var(--ead-text-sec);
}
.ea-detail-page .ead-btn-ghost:hover {
    color: var(--ead-text);
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-1px);
}
.ea-detail-page .ead-btn-danger {
    background: rgba(255, 90, 110, 0.10);
    border-color: rgba(255, 90, 110, 0.30);
    color: var(--ead-danger);
}
.ea-detail-page .ead-btn-danger:hover {
    background: rgba(255, 90, 110, 0.18);
    border-color: rgba(255, 90, 110, 0.50);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255, 90, 110, 0.16);
}

/* ── KPI row ─────────────────────────────────────────────────────────────── */
.ea-detail-page .ead-kpi-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 16px;
}
@media (min-width: 992px) {
    .ea-detail-page .ead-kpi-row { grid-template-columns: repeat(4, 1fr); }
}
.ea-detail-page .ead-kpi {
    position: relative;
    overflow: hidden;
    padding: 16px;
    border-radius: var(--ead-radius);
    background: var(--ead-card);
    border: 1px solid var(--ead-border);
    box-shadow: var(--ead-shadow-sm);
    transition: transform 0.25s var(--ead-ease), box-shadow 0.25s var(--ead-ease), border-color 0.25s var(--ead-ease);
}
.ea-detail-page .ead-kpi::before {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    opacity: 0.9;
    transition: opacity 0.25s var(--ead-ease);
}
.ea-detail-page .ead-kpi-blue::before   { background: radial-gradient(120% 100% at 0% 0%, rgba(79,124,255,0.13), transparent 62%); }
.ea-detail-page .ead-kpi-green::before  { background: radial-gradient(120% 100% at 0% 0%, rgba(14, 155, 255,0.13),  transparent 62%); }
.ea-detail-page .ead-kpi-purple::before { background: radial-gradient(120% 100% at 0% 0%, rgba(123,97,255,0.13), transparent 62%); }
.ea-detail-page .ead-kpi-amber::before  { background: radial-gradient(120% 100% at 0% 0%, rgba(246,195,67,0.13), transparent 62%); }
.ea-detail-page .ead-kpi-red::before    { background: radial-gradient(120% 100% at 0% 0%, rgba(255,90,110,0.13), transparent 62%); }
.ea-detail-page .ead-kpi:hover {
    transform: translateY(-3px);
    border-color: var(--ead-border-strong);
    box-shadow: var(--ead-shadow);
}
.ea-detail-page .ead-kpi:hover::before { opacity: 1; }

.ea-detail-page .ead-kpi-head {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px;
}
.ea-detail-page .ead-kpi-icon {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 10px;
    font-size: 0.92rem;
    border: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: transform 0.25s var(--ead-ease);
}
.ea-detail-page .ead-kpi:hover .ead-kpi-icon { transform: scale(1.08) rotate(-4deg); }
.ea-detail-page .ead-kpi-blue   .ead-kpi-icon { background: rgba(79,124,255,0.14); color: var(--ead-blue);   border-color: rgba(79,124,255,0.22); }
.ea-detail-page .ead-kpi-green  .ead-kpi-icon { background: rgba(14, 155, 255,0.14);  color: var(--ead-accent);  border-color: rgba(14, 155, 255,0.22); }
.ea-detail-page .ead-kpi-purple .ead-kpi-icon { background: rgba(123,97,255,0.14); color: var(--ead-purple); border-color: rgba(123,97,255,0.22); }
.ea-detail-page .ead-kpi-amber  .ead-kpi-icon { background: rgba(246,195,67,0.14); color: var(--ead-amber);  border-color: rgba(246,195,67,0.22); }
.ea-detail-page .ead-kpi-red    .ead-kpi-icon { background: rgba(255,90,110,0.14); color: var(--ead-danger); border-color: rgba(255,90,110,0.22); }

.ea-detail-page .ead-kpi-title {
    position: relative;
    font-size: 0.78rem; font-weight: 600;
    color: var(--ead-text-sec);
}
.ea-detail-page .ead-kpi-value {
    position: relative;
    font-size: 1.45rem; font-weight: 600;
    color: var(--ead-text);
    letter-spacing: -0.025em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.ea-detail-page .ead-kpi-sub {
    position: relative;
    font-size: 0.72rem; font-weight: 500;
    color: var(--ead-text-sec);
    margin-top: 4px;
}
.ea-detail-page .ead-pos { color: var(--fn-pos); }
.ea-detail-page .ead-neg { color: var(--ead-danger); }

/* ── Card shells ─────────────────────────────────────────────────────────── */
.ea-detail-page .glass-card {
    background: var(--ead-card);
    border: 1px solid var(--ead-border) !important;
    border-radius: var(--ead-radius) !important;
    box-shadow: var(--ead-shadow-sm) !important;
    transition: box-shadow 0.25s var(--ead-ease), border-color 0.25s var(--ead-ease);
}
.ea-detail-page .glass-card:hover { box-shadow: var(--ead-shadow) !important; }
.ea-detail-page .card-body h5 {
    font-size: 1rem; font-weight: 700;
    color: var(--ead-text);
    letter-spacing: -0.015em;
}
.ea-detail-page .card-body h6 {
    font-size: 0.85rem; font-weight: 700;
    color: var(--ead-text);
}
.ea-detail-page hr { border-color: var(--ead-border); opacity: 1; }
.ea-detail-page code {
    background: var(--ead-surface);
    border: 1px solid var(--ead-border);
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 0.82em;
    color: #7FE0F5;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */
.ea-detail-page table.dataTable thead th,
.ea-detail-page .table thead th {
    background: var(--ead-surface) !important;
    color: var(--ead-text-sec) !important;
    font-size: 0.66rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
    border-bottom: 1px solid var(--ead-border) !important;
    padding: 10px 12px !important;
    white-space: nowrap;
}
.ea-detail-page table.dataTable tbody td,
.ea-detail-page .table tbody td {
    border-bottom: 1px solid var(--ead-border) !important;
    padding: 10px 12px !important;
    font-size: 0.8rem;
    vertical-align: middle;
    background: transparent;
}
.ea-detail-page table.dataTable tbody tr:hover td,
.ea-detail-page .table tbody tr:hover td { background: rgba(255, 255, 255, 0.025) !important; }

/* ── Form controls ───────────────────────────────────────────────────────── */
.ea-detail-page .form-select,
.ea-detail-page .form-control {
    background: var(--ead-surface);
    border: 1px solid var(--ead-border-strong);
    color: var(--ead-text);
    border-radius: 9px;
    font-size: 0.84rem;
}
.ea-detail-page .form-select:focus,
.ea-detail-page .form-control:focus {
    background: var(--ead-surface);
    border-color: var(--ead-accent);
    color: var(--ead-text);
    box-shadow: 0 0 0 3px rgba(14, 155, 255, 0.14);
}

/* ── Channel list ────────────────────────────────────────────────────────── */
.ea-detail-page .ead-channel-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding: 11px 14px;
    border-radius: var(--ead-radius-sm);
    background: rgba(14, 155, 255, 0.07);
    border: 1px solid rgba(14, 155, 255, 0.22);
    font-size: 0.8rem; font-weight: 600;
    color: var(--ead-accent);
}
.ea-detail-page .ead-channel-footer.is-full {
    background: rgba(246, 195, 67, 0.07);
    border-color: rgba(246, 195, 67, 0.22);
    color: var(--ead-amber);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .ea-detail-page .ead-title { font-size: 1.2rem; }
    .ea-detail-page .ead-kpi { padding: 14px; }
    .ea-detail-page .ead-kpi-value { font-size: 1.2rem; }
    .ea-detail-page .ead-kpi-icon { width: 30px; height: 30px; font-size: 0.84rem; }
    .ea-detail-page .ead-header-actions { width: 100%; }
    .ea-detail-page .ead-header-actions .ead-btn { flex: 1; justify-content: center; }
}

/* ── Light theme ─────────────────────────────────────────────────────────── */
[data-theme="light"] .ea-detail-page {
    --ead-card: #FFFFFF;
    --ead-surface: #F7F8FA;
    --ead-border: rgba(15, 23, 42, 0.08);
    --ead-border-strong: rgba(15, 23, 42, 0.14);
    --ead-text: #0F1724;
    --ead-text-sec: #64748B;
    --ead-text-dim: #94A3B8;
    --ead-shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.06);
    --ead-shadow: 0 12px 32px rgba(15, 23, 42, 0.10);
}
[data-theme="light"] .ea-detail-page code { color: #0F766E; }
[data-theme="light"] .ea-detail-page table.dataTable tbody tr:hover td,
[data-theme="light"] .ea-detail-page .table tbody tr:hover td { background: rgba(15, 23, 42, 0.025) !important; }


/* ── EA details — performance summary + risk limits ─────────────────────── */
/* Sits inside the narrow left column, so the cards always stack one per row. */
.ea-detail-page .ead-split-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 16px;
}
/* The four-across figure grid needs the column to be wide enough; inside the
   left column it stays two-up until the layout goes single-column. */
@media (min-width: 1200px) and (max-width: 1599.98px) {
    .ea-detail-page .ead-perf-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Card head with icon tile */
.ea-detail-page .ead-card-head {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 18px;
}
.ea-detail-page .ead-card-head-icon {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 11px;
    font-size: 0.95rem;
    border: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.ea-detail-page .ead-chi-green { background: rgba(14, 155, 255,0.14);  color: var(--ead-accent); border-color: rgba(14, 155, 255,0.22); }
.ea-detail-page .ead-chi-amber { background: rgba(246,195,67,0.14); color: var(--ead-amber); border-color: rgba(246,195,67,0.22); }
.ea-detail-page .ead-chi-blue   { background: rgba(79,124,255,0.14); color: var(--ead-blue);   border-color: rgba(79,124,255,0.22); }
.ea-detail-page .ead-chi-purple { background: rgba(123,97,255,0.14); color: var(--ead-purple); border-color: rgba(123,97,255,0.22); }
.ea-detail-page .ead-card-head-sub {
    font-size: 0.72rem; font-weight: 500;
    color: var(--ead-text-sec);
    margin-top: 2px;
}

/* Performance figures */
.ea-detail-page .ead-perf-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}
@media (min-width: 576px) {
    .ea-detail-page .ead-perf-grid { grid-template-columns: repeat(4, 1fr); }
}
.ea-detail-page .ead-perf-cell {
    padding: 12px;
    border-radius: var(--ead-radius-sm);
    background: var(--ead-surface);
    border: 1px solid var(--ead-border);
}
.ea-detail-page .ead-perf-label {
    font-size: 0.7rem; font-weight: 500;
    color: var(--ead-text-sec);
    margin-bottom: 5px;
}
.ea-detail-page .ead-perf-value {
    font-size: 1.2rem; font-weight: 600;
    color: var(--ead-text);
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.ea-detail-page .ead-warn { color: var(--ead-amber); }

/* Win / loss split bar */
.ea-detail-page .ead-winbar {
    height: 7px;
    border-radius: 999px;
    background: var(--ead-danger);
    overflow: hidden;
}
.ea-detail-page .ead-winbar-fill {
    height: 100%;
    background: var(--fn-pos);
    border-radius: 999px 0 0 999px;
    transition: width 0.6s var(--ead-ease);
}
.ea-detail-page .ead-winbar-legend {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    font-size: 0.75rem; font-weight: 600;
}
.ea-detail-page .ead-perf-foot {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ead-border);
    font-size: 0.76rem;
    color: var(--ead-text-sec);
}

/* Risk limit rows */
.ea-detail-page .ead-limit-list { display: flex; flex-direction: column; }
.ea-detail-page .ead-limit {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--ead-border);
}
.ea-detail-page .ead-limit:last-child { border-bottom: none; }
.ea-detail-page .ead-limit-label {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 0.84rem; font-weight: 500;
    color: var(--ead-text-sec);
}
.ea-detail-page .ead-limit-label i { font-size: 0.9rem; opacity: 0.7; }
.ea-detail-page .ead-limit-value {
    font-size: 0.88rem; font-weight: 600;
    color: var(--ead-text);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.ea-detail-page .ead-limit-note {
    display: flex; align-items: flex-start; gap: 9px;
    margin-top: 14px;
    padding: 11px 13px;
    border-radius: var(--ead-radius-sm);
    background: rgba(246, 195, 67, 0.07);
    border: 1px solid rgba(246, 195, 67, 0.20);
    font-size: 0.76rem;
    color: var(--ead-amber);
    line-height: 1.5;
}
.ea-detail-page .ead-limit-note i { flex-shrink: 0; margin-top: 1px; }

/* Inline empty state */
.ea-detail-page .ead-inline-empty {
    display: flex; align-items: center; gap: 11px;
    padding: 22px 16px;
    border-radius: var(--ead-radius-sm);
    background: var(--ead-surface);
    border: 1px solid var(--ead-border);
    font-size: 0.82rem;
    color: var(--ead-text-sec);
}
.ea-detail-page .ead-inline-empty i { font-size: 1.1rem; opacity: 0.7; }


/* -- EA details: DataTables need Bootstrap's table vars neutralised ------- */
/* Bootstrap sets --bs-table-color/--bs-table-bg and paints them onto every
   cell via an inset box-shadow, which beats plain colour inheritance and
   leaves the body text dark on the dark card. */
.ea-detail-page table.dataTable,
.ea-detail-page .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ead-text);
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: var(--ead-text);
    --bs-table-hover-bg: transparent;
    --bs-table-hover-color: var(--ead-text);
    --bs-table-active-bg: transparent;
    --bs-table-active-color: var(--ead-text);
    --bs-table-accent-bg: transparent;
    --bs-table-border-color: var(--ead-border);
    background: transparent;
    color: var(--ead-text);
}
.ea-detail-page table.dataTable > :not(caption) > * > *,
.ea-detail-page .table > :not(caption) > * > * {
    background-color: transparent;
    color: inherit;
    box-shadow: none;
}
.ea-detail-page table.dataTable tbody td,
.ea-detail-page .table tbody td { color: var(--ead-text); }
.ea-detail-page table.dataTable tbody td.text-muted,
.ea-detail-page .table tbody td .text-muted { color: var(--ead-text-sec) !important; }

/* DataTables chrome: length menu, search box, info line, pagination */
.ea-detail-page .dataTables_wrapper,
.ea-detail-page .dt-container {
    color: var(--ead-text-sec);
    font-size: 0.82rem;
}
.ea-detail-page .dataTables_wrapper label,
.ea-detail-page .dt-container label,
.ea-detail-page .dataTables_info,
.ea-detail-page .dt-info { color: var(--ead-text-sec); }

.ea-detail-page .dataTables_length select,
.ea-detail-page .dataTables_filter input,
.ea-detail-page .dt-length select,
.ea-detail-page .dt-search input {
    background: var(--ead-surface);
    border: 1px solid var(--ead-border-strong);
    color: var(--ead-text);
    border-radius: 8px;
    padding: 5px 10px;
}
.ea-detail-page .dataTables_length select:focus,
.ea-detail-page .dataTables_filter input:focus,
.ea-detail-page .dt-length select:focus,
.ea-detail-page .dt-search input:focus {
    outline: none;
    border-color: var(--ead-accent);
    box-shadow: 0 0 0 3px rgba(14, 155, 255, 0.14);
}

.ea-detail-page .pagination .page-link {
    background: var(--ead-surface);
    border: 1px solid var(--ead-border);
    color: var(--ead-text-sec);
    font-size: 0.8rem;
    transition: all 0.2s var(--ead-ease);
}
.ea-detail-page .pagination .page-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--ead-text);
    border-color: var(--ead-border-strong);
}
.ea-detail-page .pagination .page-item.active .page-link {
    background: var(--ead-accent);
    border-color: var(--ead-accent);
    color: #041F16;
    font-weight: 600;
}
.ea-detail-page .pagination .page-item.disabled .page-link {
    background: var(--ead-surface);
    color: var(--ead-text-dim);
    opacity: 0.55;
}

/* Sort arrows */
.ea-detail-page table.dataTable thead th.dt-orderable-asc:hover,
.ea-detail-page table.dataTable thead th.dt-orderable-desc:hover {
    color: var(--ead-text) !important;
}
.ea-detail-page table.dataTable thead .dt-column-order::before,
.ea-detail-page table.dataTable thead .dt-column-order::after { opacity: 0.4; }
.ea-detail-page table.dataTable thead .dt-ordering-asc .dt-column-order::before,
.ea-detail-page table.dataTable thead .dt-ordering-desc .dt-column-order::after {
    opacity: 1;
    color: var(--ead-accent);
}

[data-theme="light"] .ea-detail-page .pagination .page-link { background: #FFFFFF; }

/* -- Copier risk modal: advanced (ported Telegram Copier) sections -------- */
.adv-risk {
    --adv-border: rgba(255, 255, 255, 0.08);
    --adv-surface: rgba(255, 255, 255, 0.02);
    border-top: 1px solid var(--adv-border);
    padding-top: 18px;
}
.adv-risk .accordion-item {
    background: transparent;
    border: 1px solid var(--adv-border);
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
}
.adv-risk .accordion-button {
    background: var(--adv-surface);
    color: #E5E7EB;
    font-size: 0.86rem;
    font-weight: 600;
    padding: 12px 16px;
    box-shadow: none;
}
.adv-risk .accordion-button:not(.collapsed) {
    background: rgba(14, 155, 255, 0.08);
    color: #0E9BFF;
}
.adv-risk .accordion-button:focus { box-shadow: 0 0 0 3px rgba(14, 155, 255, 0.14); }
.adv-risk .accordion-button::after { filter: invert(0.7); }
.adv-risk .accordion-body { padding: 16px; background: transparent; }

.adv-risk .adv-hint {
    font-size: 0.76rem;
    color: #9CA3AF;
    line-height: 1.55;
    margin-bottom: 14px;
}
.adv-risk .adv-hint code {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 1px 5px;
    color: #7FE0F5;
}
.adv-risk .adv-hint-warn {
    color: #F6C343;
    background: rgba(246, 195, 67, 0.07);
    border: 1px solid rgba(246, 195, 67, 0.20);
    border-radius: 10px;
    padding: 10px 12px;
}

.adv-risk .form-check-label { font-size: 0.82rem; color: #E5E7EB; }
.adv-risk .form-check-input:checked {
    background-color: #0E9BFF;
    border-color: #0E9BFF;
}
.adv-risk .adv-days {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    padding: 10px 12px;
    background: var(--adv-surface);
    border: 1px solid var(--adv-border);
    border-radius: 10px;
}

[data-theme="light"] .adv-risk {
    --adv-border: rgba(15, 23, 42, 0.10);
    --adv-surface: rgba(15, 23, 42, 0.02);
}
[data-theme="light"] .adv-risk .accordion-button { color: #0F1724; }
[data-theme="light"] .adv-risk .accordion-button::after { filter: none; }
[data-theme="light"] .adv-risk .form-check-label { color: #0F1724; }

/* -- Shared confirmation modal (replaces window.confirm) ----------------- */
/* Wide enough that a one-sentence prompt does not wrap mid-clause. */
.confirm-modal .modal-dialog { max-width: 520px; }
.confirm-modal .modal-content {
    background: #131D2D;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
    color: #FFFFFF;
}
.confirm-modal .modal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 22px 26px 18px;
}
.confirm-modal .modal-title {
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin: 0;
}
.confirm-modal .confirm-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    font-size: 1.15rem;
    background: rgba(246, 195, 67, 0.14);
    color: #F6C343;
    border: 1px solid rgba(246, 195, 67, 0.24);
}
.confirm-modal .confirm-modal-icon.is-danger {
    background: rgba(255, 90, 110, 0.14);
    color: #FF5A6E;
    border-color: rgba(255, 90, 110, 0.24);
}
.confirm-modal .modal-body { padding: 22px 26px; }
.confirm-modal .confirm-modal-text {
    font-size: 0.95rem;
    line-height: 1.65;
    color: #9CA3AF;
}
.confirm-modal .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 18px 26px;
    gap: 10px;
}
.confirm-modal .modal-footer .btn {
    border-radius: 11px;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 10px 24px;
}

/* Below ~576px Bootstrap already insets the dialog; just keep the padding
   from eating the available width. */
@media (max-width: 575.98px) {
    .confirm-modal .modal-header { padding: 18px 18px 14px; gap: 12px; }
    .confirm-modal .modal-body   { padding: 18px; }
    .confirm-modal .modal-footer { padding: 14px 18px; }
    .confirm-modal .modal-footer .btn { flex: 1; padding: 10px 16px; }
}

[data-theme="light"] .confirm-modal .modal-content {
    background: #FFFFFF;
    border-color: rgba(15, 23, 42, 0.10);
    color: #0F1724;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
}
[data-theme="light"] .confirm-modal .modal-header,
[data-theme="light"] .confirm-modal .modal-footer { border-color: rgba(15, 23, 42, 0.08); }
[data-theme="light"] .confirm-modal .confirm-modal-text { color: #64748B; }

/* ── Topbar: notification badge + mobile sizing ──────────────────────────────
   Theme-neutral layout, so it lives here rather than in light-theme.css.

   The badge is placed with Bootstrap's `top-0 start-100 translate-middle`,
   which pins it to the button's top-right corner and then shifts it up and
   left by half its own size. On a 56px bar that put its top 2px ABOVE the
   topbar and 17px past the right edge, so the count was clipped on two sides.
   Anchoring it inside the button's box keeps it whole at every width.

   The three controls were also three different sizes (48x35, 30x34, 34x34),
   which is why the row looked misaligned on a phone. -------------------- */

.topbar-notif-btn .badge {
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    font-size: .6rem !important;
    font-weight: 700;
    line-height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 575.98px) {
    .topbar { padding-left: .75rem !important; padding-right: .75rem !important; }
    .topbar > .ms-auto { gap: .375rem !important; flex-shrink: 0; }

    /* One hit target size for every control in the row. 36px also clears the
       44px-with-padding touch guidance once the 56px bar's own padding counts. */
    .sidebar-toggle-btn,
    .topbar-theme-btn,
    .topbar-notif-btn,
    .topbar-avatar-ring {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .topbar-avatar-ring img { width: 32px !important; height: 32px !important; }

    /* The toggle is display:block by default, so its glyph was positioned by
       line-height rather than centred. Flex centres it in both themes. */
    .sidebar-toggle-btn {
        align-items: center;
        justify-content: center;
        border: none !important;
        opacity: 1;
    }
    .sidebar-toggle-btn > i { font-size: 1.35rem !important; line-height: 1; }

    /* Brand gives up its space first — it is the only flexible item, and the
       controls must not be pushed off-screen. */
    .topbar-brand {
        font-size: .95rem !important;
        min-width: 0;
        overflow: hidden;
    }
    .topbar-brand .brand-wordmark {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .topbar-admin-btn { padding: .2rem .45rem !important; font-size: .72rem !important; }
}

/* Below ~380px the wordmark cannot fit alongside the controls at all. */
@media (max-width: 379.98px) {
    .topbar-brand .brand-wordmark { display: none; }
}

/* =============================================================================
   iOS SAFARI AUTO-ZOOM ON INPUT FOCUS
   =============================================================================
   iOS Safari zooms the page in whenever a focused form control's EFFECTIVE
   font-size resolves under 16px — this is Safari's own behaviour, not
   something the site opts into, and it is exactly 16px, not "small".

   :root sets `html { font-size: 14px }` and only raises it to 16px at
   `min-width: 768px` (the top of this file). Every iPhone in portrait is
   under that breakpoint, so any control sized in `rem` — which is all of
   them, since that's how Bootstrap's .form-control/.form-select and this
   file's own font-size:.72rem/.8rem/.8125rem input variants are written —
   resolves under 16px on every phone. That's why EVERY input zoomed, not
   just some: the 14px root is the single shared cause.

   The fix is scoped to phone widths only and targets element type + common
   type="" attributes rather than enumerating every custom input class
   (.glass-input, .perf-select, .fb-select, .dt-input, …) individually — an
   <input> is a select/text-entry control regardless of what class rides
   along with it, so the type selector reaches all of them without needing to
   be kept in sync with every future input variant. !important is required
   because several existing rules (.fb-select, .dashboard-page .dt-input, the
   light theme's .form-control-sm) already set a smaller size with !important
   of their own.

   This does NOT touch pinch-zoom or the viewport meta tag — disabling user
   zoom (maximum-scale=1) is an accessibility regression and is deliberately
   not used here. Only the *automatic* zoom-on-focus is suppressed, by
   removing its trigger condition.
   ============================================================================= */
@media (max-width: 767.98px) {
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="search"], input[type="tel"],
    input[type="url"], input[type="date"], input[type="datetime-local"],
    input[type="time"], input[type="month"], input[type="week"],
    textarea, select,
    .form-control, .form-select, .fb-select {
        font-size: 16px !important;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   TELEGRAM COPIER SUBSCRIPTION — Premium redesign
   Scoped to .tgsub-page (Views/Subscription/Index.cshtml)

   Same token convention as .plans-page and .telegram-copier-page. The
   secondary/dim greys sit a step brighter than on those pages because this
   screen carries a lot of small explanatory copy (renewal terms, proration)
   that has to stay readable rather than decorative.
   ══════════════════════════════════════════════════════════════════════════ */
.tgsub-page {
    --tgs-card: #131D2D;
    --tgs-surface: #0F1724;
    --tgs-raised: #182437;
    --tgs-border: rgba(255, 255, 255, 0.07);
    --tgs-border-strong: rgba(255, 255, 255, 0.13);
    --tgs-accent: #0E9BFF;
    --tgs-accent-bright: #57C8EA;
    --tgs-blue: #4F7CFF;
    --tgs-sky: #5BA9F5;
    --tgs-amber: #F6C343;
    --tgs-danger: #FF5A6E;
    --tgs-text: #FFFFFF;
    --tgs-text-sec: #A7B2C2;
    --tgs-text-dim: #7C8798;
    --tgs-radius: 18px;
    --tgs-radius-sm: 12px;
    --tgs-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.24);
    --tgs-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    --tgs-ease: cubic-bezier(0.16, 1, 0.3, 1);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--tgs-text);
}

/* ── Page header ─────────────────────────────────────────────────────────── */
.tgsub-page .tgs-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 6px 92px 24px 0;
    margin-bottom: 22px;
}
.tgsub-page .tgs-hero-icon {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 58px; height: 58px;
    border-radius: 18px;
    font-size: 1.5rem;
    color: var(--tgs-accent-bright);
    background: linear-gradient(145deg, rgba(14, 155, 255, 0.22), rgba(14, 155, 255, 0.05));
    border: 1px solid rgba(14, 155, 255, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 8px 22px rgba(14, 155, 255, 0.16);
}
.tgsub-page .tgs-hero-text { flex: 1; min-width: 0; }
.tgsub-page .tgs-hero-title {
    font-size: 1.75rem; font-weight: 700;
    color: var(--tgs-text);
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0 0 6px;
}
.tgsub-page .tgs-hero-sub {
    font-size: 0.9rem; font-weight: 500;
    line-height: 1.55;
    color: var(--tgs-text-sec);
    max-width: 62ch;
    margin: 0;
}
/* Decorative paper plane, matching the .plan-plane mark on the plans page */
.tgsub-page .tgs-hero-decor {
    position: absolute;
    top: 2px; right: 6px;
    font-size: 3.6rem;
    line-height: 1;
    color: var(--tgs-accent);
    opacity: 0.16;
    transform: rotate(-16deg);
    pointer-events: none;
    filter: drop-shadow(0 0 16px rgba(14, 155, 255, 0.45));
}

/* ── Card shell ──────────────────────────────────────────────────────────── */
.tgsub-page .tgs-card {
    position: relative;
    overflow: hidden;
    padding: 24px;
    margin-bottom: 26px;
    border-radius: var(--tgs-radius);
    background: var(--tgs-card);
    border: 1px solid var(--tgs-border);
    box-shadow: var(--tgs-shadow-sm);
    transition: border-color 0.25s var(--tgs-ease), box-shadow 0.25s var(--tgs-ease);
}
.tgsub-page .tgs-card:hover {
    border-color: var(--tgs-border-strong);
    box-shadow: var(--tgs-shadow);
}
/* The live subscription is the anchor of the page, so it gets the green wash */
.tgsub-page .tgs-card-live { border-color: rgba(14, 155, 255, 0.22); }
.tgsub-page .tgs-card-live::before {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 78% at 12% 0%, rgba(14, 155, 255, 0.10), transparent 62%);
}
.tgsub-page .tgs-card-live:hover { border-color: rgba(14, 155, 255, 0.40); }
.tgsub-page .tgs-card > * { position: relative; }

/* ── Current subscription head ───────────────────────────────────────────── */
.tgsub-page .tgs-sub-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 18px;
}
.tgsub-page .tgs-sub-id {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}
.tgsub-page .tgs-sub-icon {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 13px;
    font-size: 1.1rem;
    color: var(--tgs-sky);
    background: linear-gradient(145deg, rgba(91, 169, 245, 0.20), rgba(79, 124, 255, 0.05));
    border: 1px solid rgba(91, 169, 245, 0.22);
}
.tgsub-page .tgs-sub-name {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    font-size: 1.4rem; font-weight: 700;
    color: var(--tgs-text);
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin: 0 0 5px;
}
.tgsub-page .tgs-sub-meta {
    font-size: 0.85rem; font-weight: 500;
    color: var(--tgs-text-sec);
    margin: 0;
}
.tgsub-page .tgs-sub-meta strong { color: var(--tgs-text); font-weight: 600; }
.tgsub-page .tgs-sub-side {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
    margin-left: auto;
}
.tgsub-page .tgs-seats { text-align: right; }
.tgsub-page .tgs-seats-count {
    font-size: 1.55rem; font-weight: 700;
    color: var(--tgs-text);
    letter-spacing: -0.03em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.tgsub-page .tgs-seats-count span {
    font-size: 0.95rem; font-weight: 600;
    color: var(--tgs-text-sec);
}
.tgsub-page .tgs-seats-label {
    font-size: 0.76rem; font-weight: 500;
    color: var(--tgs-text-sec);
    margin-top: 2px;
    white-space: nowrap;
}

/* ── Status / countdown pills ────────────────────────────────────────────── */
.tgsub-page .tgs-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.78rem; font-weight: 700;
    white-space: nowrap;
}
.tgsub-page .tgs-pill i { font-size: 0.85rem; }
.tgsub-page .tgs-pill-green {
    color: var(--tgs-accent-bright);
    background: rgba(14, 155, 255, 0.12);
    border: 1px solid rgba(14, 155, 255, 0.34);
}
.tgsub-page .tgs-pill-blue {
    color: #7FBBFF;
    background: rgba(79, 124, 255, 0.13);
    border: 1px solid rgba(79, 124, 255, 0.34);
}
.tgsub-page .tgs-pill-amber {
    color: var(--tgs-amber);
    background: rgba(246, 195, 67, 0.12);
    border: 1px solid rgba(246, 195, 67, 0.34);
}
.tgsub-page .tgs-pill-red {
    color: #FF8393;
    background: rgba(255, 90, 110, 0.12);
    border: 1px solid rgba(255, 90, 110, 0.34);
}
/* Inline urgency accents for the "N days left" copy */
.tgsub-page .tgs-days-green { color: var(--fn-pos) !important; font-weight: 700; }
.tgsub-page .tgs-days-amber { color: var(--tgs-amber) !important;        font-weight: 700; }
.tgsub-page .tgs-days-red   { color: #FF8393 !important;                 font-weight: 700; }

/* ── Seat meter ──────────────────────────────────────────────────────────── */
.tgsub-page .tgs-meter {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
    margin-bottom: 16px;
}
.tgsub-page .tgs-meter-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #0077CC, #57C8EA);
    box-shadow: 0 0 14px rgba(14, 155, 255, 0.45);
    transition: width 0.4s var(--tgs-ease);
}

/* ── Connected accounts line ─────────────────────────────────────────────── */
.tgsub-page .tgs-connected {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    font-size: 0.82rem; font-weight: 500;
    color: var(--tgs-text-sec);
    margin-bottom: 18px;
}
.tgsub-page .tgs-connected i { color: var(--tgs-sky); }
.tgsub-page .tgs-chip {
    display: inline-flex; align-items: center;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 0.76rem; font-weight: 600;
    color: var(--tgs-text);
    background: var(--tgs-raised);
    border: 1px solid var(--tgs-border-strong);
    font-variant-numeric: tabular-nums;
}

/* ── Actions ─────────────────────────────────────────────────────────────── */
.tgsub-page .tgs-actions {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-bottom: 18px;
}
.tgsub-page .tgs-actions form { margin: 0; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.tgsub-page .tgs-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%;
    padding: 12px 20px;
    border-radius: var(--tgs-radius-sm);
    font-size: 0.9rem; font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.22s var(--tgs-ease);
}
.tgsub-page .tgs-btn i { font-size: 1rem; }
.tgsub-page .tgs-btn-sm {
    width: auto;
    padding: 10px 16px;
    font-size: 0.85rem;
}
/* Filled — the single strongest call to action on the screen */
.tgsub-page .tgs-btn-primary {
    background: linear-gradient(135deg, #0E9BFF, #0B82E0);
    border-color: rgba(14, 155, 255, 0.55);
    color: #03121C;
    box-shadow: 0 6px 20px rgba(14, 155, 255, 0.24);
}
.tgsub-page .tgs-btn-primary:hover {
    background: linear-gradient(135deg, #35ADFF, #1A8FE6);
    color: #03121C;
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(14, 155, 255, 0.34);
}
/* Tinted — upgrades and other affirmative-but-secondary actions */
.tgsub-page .tgs-btn-accent {
    background: rgba(14, 155, 255, 0.10);
    border-color: rgba(14, 155, 255, 0.32);
    color: var(--tgs-accent-bright);
}
.tgsub-page .tgs-btn-accent:hover {
    background: rgba(14, 155, 255, 0.18);
    border-color: rgba(14, 155, 255, 0.52);
    color: var(--tgs-accent-bright);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(14, 155, 255, 0.18);
}
/* Neutral — everything reversible */
.tgsub-page .tgs-btn-ghost {
    background: var(--tgs-surface);
    border-color: var(--tgs-border-strong);
    color: var(--tgs-text-sec);
}
.tgsub-page .tgs-btn-ghost:hover {
    background: var(--tgs-raised);
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--tgs-text);
    transform: translateY(-1px);
}
.tgsub-page .tgs-btn-danger {
    background: rgba(255, 90, 110, 0.10);
    border-color: rgba(255, 90, 110, 0.32);
    color: #FF8393;
}
.tgsub-page .tgs-btn-danger:hover {
    background: rgba(255, 90, 110, 0.18);
    border-color: rgba(255, 90, 110, 0.52);
    color: #FF9AA7;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(255, 90, 110, 0.16);
}

/* ── Note / callout ──────────────────────────────────────────────────────── */
.tgsub-page .tgs-note {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 13px 16px;
    border-radius: var(--tgs-radius-sm);
    font-size: 0.82rem; font-weight: 500;
    line-height: 1.55;
    color: var(--tgs-text-sec);
    background: rgba(79, 124, 255, 0.07);
    border: 1px solid rgba(79, 124, 255, 0.20);
}
.tgsub-page .tgs-note i {
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 0.95rem;
    color: #7FBBFF;
}

/* ── Empty state (no subscription) ───────────────────────────────────────── */
.tgsub-page .tgs-empty-title {
    display: flex; align-items: center; gap: 11px;
    font-size: 1.15rem; font-weight: 700;
    color: var(--tgs-text);
    margin: 0 0 7px;
}
.tgsub-page .tgs-empty-title i { color: var(--tgs-amber); }
.tgsub-page .tgs-empty-text {
    font-size: 0.86rem; font-weight: 500;
    line-height: 1.6;
    color: var(--tgs-text-sec);
    margin: 0;
    max-width: 68ch;
}

/* ── Trial banner ────────────────────────────────────────────────────────── */
.tgsub-page .tgs-trial {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 18px;
    border-color: rgba(14, 155, 255, 0.30);
}
.tgsub-page .tgs-trial::before {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background: radial-gradient(110% 80% at 88% 0%, rgba(14, 155, 255, 0.12), transparent 62%);
}
.tgsub-page .tgs-trial-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 1.1rem; font-weight: 700;
    color: var(--tgs-text);
    margin: 0 0 5px;
}
.tgsub-page .tgs-trial-title i { color: var(--tgs-accent-bright); }
.tgsub-page .tgs-trial-text {
    font-size: 0.84rem; font-weight: 500;
    color: var(--tgs-text-sec);
    margin: 0;
}
.tgsub-page .tgs-trial form { margin: 0; flex-shrink: 0; }

/* ── Section heading ─────────────────────────────────────────────────────── */
.tgsub-page .tgs-section-head {
    display: flex; align-items: center; gap: 11px;
    margin: 0 0 18px;
}
.tgsub-page .tgs-section-icon {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 10px;
    font-size: 0.95rem;
    color: var(--tgs-accent-bright);
    background: rgba(14, 155, 255, 0.12);
    border: 1px solid rgba(14, 155, 255, 0.26);
}
.tgsub-page .tgs-section-title {
    font-size: 1.25rem; font-weight: 700;
    color: var(--tgs-text);
    letter-spacing: -0.02em;
    margin: 0;
}

/* ── Subscription carousel ───────────────────────────────────────────────────
   One card per slide. The stepper sits in the section heading rather than on top of
   the card, because Bootstrap's own controls overlay the slide and would cover the
   buttons a subscription card is mostly made of. */
.tgsub-page .tgs-carousel-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.tgsub-page .tgs-carousel-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 0.95rem;
    color: var(--tgs-text-sec);
    background: var(--tgs-surface);
    border: 1px solid var(--tgs-border);
    border-radius: 10px;
    cursor: pointer;
    transition: color 0.16s var(--tgs-ease), border-color 0.16s var(--tgs-ease),
                background 0.16s var(--tgs-ease);
}
.tgsub-page .tgs-carousel-arrow:hover {
    color: var(--tgs-text);
    background: var(--tgs-card);
    border-color: var(--tgs-border-strong);
}

.tgsub-page .tgs-carousel-count {
    min-width: 62px;
    font-size: 0.76rem;
    font-weight: 600;
    text-align: center;
    color: var(--tgs-text-sec);
    font-variant-numeric: tabular-nums;
}

/* The slide is the card, so the carousel adds no chrome of its own — but a card with a
   dropdown or a shadow must not be clipped by the sliding viewport's overflow. */
.tgsub-page .tgs-carousel .carousel-item { padding: 2px; }

.tgsub-page .tgs-carousel-dots {
    position: static;          /* Bootstrap absolutely positions these over the slide */
    display: flex;
    justify-content: center;
    gap: 7px;
    margin: 0 0 18px;
    padding: 0;
}
.tgsub-page .tgs-carousel-dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--tgs-border-strong);
    opacity: 1;                /* Bootstrap dims inactive indicators to 0.5 */
    text-indent: 0;
    transition: width 0.18s var(--tgs-ease), background 0.18s var(--tgs-ease);
}
.tgsub-page .tgs-carousel-dots button.active {
    width: 20px;
    border-radius: 4px;
    background: var(--tgs-accent);
}

/* ── Plan grid ───────────────────────────────────────────────────────────── */
.tgsub-page .tgs-plan-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 768px)  { .tgsub-page .tgs-plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .tgsub-page .tgs-plan-grid { grid-template-columns: repeat(3, 1fr); } }

.tgsub-page .tgs-plan {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    border-radius: var(--tgs-radius);
    background: var(--tgs-card);
    border: 1px solid var(--tgs-border);
    box-shadow: var(--tgs-shadow-sm);
    transition: transform 0.25s var(--tgs-ease), box-shadow 0.25s var(--tgs-ease), border-color 0.25s var(--tgs-ease);
}
.tgsub-page .tgs-plan:hover {
    transform: translateY(-4px);
    border-color: var(--tgs-border-strong);
    box-shadow: var(--tgs-shadow);
}
/* The plan the customer is on reads as selected, not merely labelled */
.tgsub-page .tgs-plan-current {
    border-color: rgba(14, 155, 255, 0.45);
    box-shadow: var(--tgs-shadow-sm), 0 0 26px rgba(14, 155, 255, 0.10);
}
.tgsub-page .tgs-plan-current::before {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background: radial-gradient(125% 70% at 50% 0%, rgba(14, 155, 255, 0.12), transparent 62%);
}
.tgsub-page .tgs-plan-current:hover {
    border-color: rgba(14, 155, 255, 0.62);
    box-shadow: var(--tgs-shadow), 0 0 34px rgba(14, 155, 255, 0.16);
}
.tgsub-page .tgs-plan > * { position: relative; }

/* min-height reserves the "Current" pill's row on every card, so the plan
   names and prices line up across the grid whether the pill is there or not */
.tgsub-page .tgs-plan-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    min-height: 32px;
    margin-bottom: 14px;
}
.tgsub-page .tgs-plan-name {
    font-size: 1.3rem; font-weight: 700;
    color: var(--tgs-text);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0;
}
.tgsub-page .tgs-plan-price {
    display: flex; align-items: baseline; gap: 7px;
    margin-bottom: 20px;
}
.tgsub-page .tgs-plan-amount {
    font-size: 2.2rem; font-weight: 800;
    color: var(--tgs-text);
    letter-spacing: -0.045em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.tgsub-page .tgs-plan-period {
    font-size: 0.92rem; font-weight: 500;
    color: var(--tgs-text-sec);
}
.tgsub-page .tgs-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}
.tgsub-page .tgs-plan-features li {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 5px 0;
    font-size: 0.87rem; font-weight: 500;
    color: var(--tgs-text-sec);
}
.tgsub-page .tgs-plan-features i {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 0.9rem;
    color: var(--tgs-accent);
}
/* Buttons pin to the bottom so cards line up across the row */
.tgsub-page .tgs-plan-foot {
    margin-top: auto;
    display: grid;
    gap: 10px;
}
/* Card + crypto sit in one form so the gateway travels with the submit */
.tgsub-page .tgs-plan-actions {
    display: grid;
    gap: 10px;
    margin: 0;
}


/* ── Several subscriptions at once ───────────────────────────────────────────
   A customer can hold more than one, each rendered as its own card. These are
   the extra bits that only appear once the page can show a list. */
.tgsub-page .tgs-section-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.78rem; font-weight: 700;
    vertical-align: middle;
    color: var(--tgs-accent-bright);
    background: rgba(14, 155, 255, 0.12);
    border: 1px solid rgba(14, 155, 255, 0.26);
}

/* Price and expiry share the meta line under a subscription's name */
.tgsub-page .tgs-sub-price { color: var(--tgs-text); font-weight: 600; }
.tgsub-page .tgs-sub-dot   { opacity: 0.45; margin: 0 5px; }

/* "1 left" alongside the Add account label */
.tgsub-page .tgs-btn-note {
    margin-left: 2px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.72rem; font-weight: 700;
    background: rgba(14, 155, 255, 0.16);
}

/* A full subscription's Add button is inert rather than absent, so the card keeps
   its shape and says why nothing can be added */
.tgsub-page .tgs-btn.is-disabled {
    cursor: not-allowed;
    opacity: 0.55;
}
.tgsub-page .tgs-btn.is-disabled:hover {
    transform: none;
    box-shadow: none;
    background: var(--tgs-surface);
    border-color: var(--tgs-border-strong);
    color: var(--tgs-text-sec);
}

/* The same callout used inside a card, standing on its own above the plan grid */
.tgsub-page .tgs-note-standalone { margin-bottom: 20px; }

/* "Not covered by a subscription" is not a subscription and must not read as one */
.tgsub-page .tgs-section-icon-muted {
    color: var(--tgs-text-dim);
    background: rgba(156, 163, 175, 0.10);
    border-color: rgba(156, 163, 175, 0.20);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .tgsub-page .tgs-hero { padding: 4px 0 20px; }
    .tgsub-page .tgs-hero-decor { display: none; }
    .tgsub-page .tgs-hero-title { font-size: 1.4rem; }
    .tgsub-page .tgs-card { padding: 18px; }
    .tgsub-page .tgs-sub-side { margin-left: 0; width: 100%; justify-content: space-between; }
    .tgsub-page .tgs-sub-name { font-size: 1.2rem; }
    .tgsub-page .tgs-actions { flex-direction: column; align-items: stretch; }
    .tgsub-page .tgs-actions .tgs-btn,
    .tgsub-page .tgs-trial .tgs-btn { width: 100%; }
    .tgsub-page .tgs-plan { padding: 20px; }
    .tgsub-page .tgs-plan-amount { font-size: 1.9rem; }
    .tgsub-page .tgs-section-title { font-size: 1.1rem; }
}

/* ── Light theme ─────────────────────────────────────────────────────────── */
[data-theme="light"] .tgsub-page {
    --tgs-card: #FFFFFF;
    --tgs-surface: #F7F8FA;
    --tgs-raised: #EEF1F6;
    --tgs-border: rgba(15, 23, 42, 0.09);
    --tgs-border-strong: rgba(15, 23, 42, 0.15);
    --tgs-text: #0F1724;
    --tgs-text-sec: #556174;
    --tgs-text-dim: #7A869A;
    --tgs-shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.06);
    --tgs-shadow: 0 12px 32px rgba(15, 23, 42, 0.10);
}
[data-theme="light"] .tgsub-page .tgs-hero-decor { opacity: 0.13; }
/* Beats the light theme's `:root[data-theme="light"] a` link colour, which would
   otherwise paint the anchor-based buttons primary blue instead of button text */
[data-theme="light"] .tgsub-page a.tgs-btn-ghost { color: var(--tgs-text-sec); }
[data-theme="light"] .tgsub-page a.tgs-btn-ghost:hover { color: var(--tgs-text); }
[data-theme="light"] .tgsub-page .tgs-meter { background: rgba(15, 23, 42, 0.08); }
[data-theme="light"] .tgsub-page .tgs-note { color: #45536B; }
[data-theme="light"] .tgsub-page .tgs-note i { color: #2E6FE0; }
[data-theme="light"] .tgsub-page .tgs-days-green { color: #00875D !important; }
[data-theme="light"] .tgsub-page .tgs-pill-green { color: #00875D; }
[data-theme="light"] .tgsub-page .tgs-pill-blue  { color: #2A5FD0; }
[data-theme="light"] .tgsub-page .tgs-pill-amber { color: #9A6C00; }
[data-theme="light"] .tgsub-page .tgs-pill-red   { color: #C8384A; }
[data-theme="light"] .tgsub-page .tgs-btn-accent { color: #0063B0; }
[data-theme="light"] .tgsub-page .tgs-btn-accent:hover { color: #004F8F; }
[data-theme="light"] .tgsub-page .tgs-btn-danger { color: #C8384A; }
[data-theme="light"] .tgsub-page .tgs-btn-danger:hover { color: #AE2A3B; }
[data-theme="light"] .tgsub-page .tgs-plan-features i,
[data-theme="light"] .tgsub-page .tgs-section-icon,
[data-theme="light"] .tgsub-page .tgs-trial-title i { color: #0077CC; }

/* ══════════════════════════════════════════════════════════════════════════
   Broker-server suggestions — wwwroot/js/broker-server-autocomplete.js
   Attached to <body> with fixed positioning, so it sits above Bootstrap modals
   (z-index 1055) instead of being clipped by their scrolling body.
   ══════════════════════════════════════════════════════════════════════════ */
.bs-suggest {
    position: fixed;
    z-index: 2000;
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
    background: #131D2D;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.bs-suggest-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 7px;
    cursor: pointer;
}
.bs-suggest-item:hover,
.bs-suggest-item.is-active { background: rgba(14, 155, 255, 0.12); }
.bs-suggest-server {
    font-size: 0.86rem;
    font-weight: 600;
    color: #FFFFFF;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bs-suggest-broker {
    flex-shrink: 0;
    max-width: 45%;
    font-size: 0.74rem;
    color: #9CA3AF;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Matches [data-theme="dark"] .form-text, which would otherwise grey it out. */
.form-text.bs-suggest-hint,
[data-theme="dark"] .form-text.bs-suggest-hint { color: #F6C343 !important; }

[data-theme="light"] .bs-suggest {
    background: #FFFFFF;
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}
[data-theme="light"] .bs-suggest-server { color: #0F172A; }
[data-theme="light"] .bs-suggest-broker { color: #64748B; }
[data-theme="light"] .bs-suggest-item:hover,
[data-theme="light"] .bs-suggest-item.is-active { background: rgba(0, 112, 192, 0.10); }
[data-theme="light"] .form-text.bs-suggest-hint { color: #B7791F !important; }

/* =============================================================================
   TELEGRAM WORKSPACE TABS — [ Trading Accounts ] [ Plans ]
   Shared by TradingAccount/Index and Subscription/Index (_TelegramWorkspaceTabs).
   Real links, one per page, so this is purely presentational. Self-contained
   tokens: the strip sits inside both .tgsub-page and .ea-accounts-page.
   ========================================================================== */
.tc-tabs {
    --tc-surface: #0F1724;
    --tc-border: rgba(255, 255, 255, 0.10);
    --tc-text: #FFFFFF;
    --tc-text-sec: #A7B2C2;
    --tc-accent: #0E9BFF;
    --tc-accent-fill: rgba(14, 155, 255, 0.12);
    --tc-accent-edge: rgba(14, 155, 255, 0.40);
    --tc-hover: rgba(255, 255, 255, 0.05);
    --tc-ease: cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: stretch;
    gap: 4px;
    max-width: 100%;
    padding: 4px;
    margin: 0 0 22px;
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    border-radius: 14px;
    overflow-x: auto;
    scrollbar-width: none;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.tc-tabs::-webkit-scrollbar { display: none; }

.tc-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 20px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--tc-text-sec);
    text-decoration: none;
    transition: color 0.2s var(--tc-ease), background 0.2s var(--tc-ease),
                border-color 0.2s var(--tc-ease), box-shadow 0.2s var(--tc-ease);
}
.tc-tab i { font-size: 0.95rem; }
.tc-tab:hover {
    color: var(--tc-text);
    background: var(--tc-hover);
}
.tc-tab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--tc-surface), 0 0 0 4px var(--tc-accent-edge);
}
.tc-tab.is-active {
    color: var(--tc-accent);
    background: var(--tc-accent-fill);
    border-color: var(--tc-accent-edge);
    box-shadow: 0 4px 16px rgba(14, 155, 255, 0.12);
}
.tc-tab.is-active:hover { color: var(--tc-accent); }
.tc-tab:active { transform: translateY(1px); }

/* Phones: the strip spans the width and the pills share it evenly. */
@media (max-width: 575.98px) {
    .tc-tabs { display: flex; width: 100%; margin-bottom: 18px; }
    .tc-tab  { flex: 1 1 0; padding: 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .tc-tab { transition: none; }
    .tc-tab:active { transform: none; }
}

/* Light theme — the same -700 green on mint the Plans tabs use, for AA contrast. */
[data-theme="light"] .tc-tabs {
    --tc-surface: #FFFFFF;
    --tc-border: rgba(15, 23, 42, 0.12);
    --tc-text: #0F1724;
    --tc-text-sec: #556174;
    --tc-accent: #0063B0;
    --tc-accent-fill: #EAF5FF;
    --tc-accent-edge: #9FD3FF;
    --tc-hover: rgba(15, 23, 42, 0.05);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}
[data-theme="light"] .tc-tab.is-active { box-shadow: none; }

/* ── Telegram section on the trading accounts page ─────────────────────────
   The TelegramAccounts view component: the .tg-* session cards from the old
   Telegram Copier page, under a section bar that matches .tgs-section-head. */
.tc-telegram-section { margin: 0 0 32px; scroll-margin-top: 84px; }
.tc-telegram-section .tc-section-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin: 0 0 18px;
}
.tc-telegram-section .tc-section-bar .tgs-section-head { margin: 0; }
.tc-telegram-section .tgs-section-icon.tc-icon-telegram {
    color: #5BA9F5;
    background: rgba(91, 169, 245, 0.12);
    border-color: rgba(91, 169, 245, 0.28);
}
@media (max-width: 575.98px) {
    .tc-telegram-section .tc-section-cta { width: 100%; justify-content: center; }
}

/* ── New-user onboarding hero (TradingAccount/Index, Model.IsNewUser) ───────
   Shown instead of the empty subscriptions list / empty Telegram card for a
   customer who has never connected Telegram, subscribed or added an account.
   Sits inside .tgsub-page so it inherits its --tgs-* tokens. */
.tc-onboard {
    display: flex;
    justify-content: center;
    padding: 8px 0 24px;
}
.tc-onboard-card {
    width: 100%;
    max-width: 560px;
    text-align: center;
    padding: 40px 32px 34px;
    background: var(--tgs-card);
    border: 1px solid var(--tgs-border);
    border-radius: var(--tgs-radius);
    box-shadow: var(--tgs-shadow-sm);
}
.tc-onboard-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin-bottom: 28px;
}
/* Circle + label live in one column, so the label's own width reserves its own
   space and can never overlap its neighbour — the line between columns is a
   separate flex item, not something the labels are positioned relative to. */
.tc-onboard-step-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 96px;
    flex-shrink: 0;
}
.tc-onboard-step {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--tgs-raised);
    border: 1px solid var(--tgs-border-strong);
    color: var(--tgs-text-dim);
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}
.tc-onboard-step.is-current {
    background: rgba(14, 155, 255, 0.14);
    border-color: var(--tgs-accent);
    color: var(--tgs-accent-bright);
}
.tc-onboard-step-col small {
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    color: var(--tgs-text-dim);
}
.tc-onboard-step-col.is-current small { color: var(--tgs-text-sec); }
.tc-onboard-step-line {
    width: 20px;
    height: 2px;
    margin-top: 16px;
    background: var(--tgs-border-strong);
    flex-shrink: 0;
}
.tc-onboard-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin: 22px auto 18px;
    border-radius: 18px;
    font-size: 1.6rem;
    color: #5BA9F5;
    background: rgba(91, 169, 245, 0.12);
    border: 1px solid rgba(91, 169, 245, 0.28);
}
.tc-onboard-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--tgs-text);
    margin: 0 0 10px;
}
.tc-onboard-text {
    font-size: 0.9rem;
    color: var(--tgs-text-sec);
    max-width: 420px;
    margin: 0 auto 24px;
    line-height: 1.55;
}
/* Self-contained — .tg-btn only styles inside .telegram-copier-page, which this
   card (rendered inside .tgsub-page) is not, so the button needs its own rule
   rather than depending on that ancestor. */
.tc-onboard-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 30px;
    border-radius: 12px;
    background: #0E9BFF;
    border: 1px solid #0E9BFF;
    color: #06251C;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(14, 155, 255, 0.28);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.tc-onboard-cta:hover {
    background: #57C8EA;
    box-shadow: 0 10px 28px rgba(14, 155, 255, 0.38);
    color: #06251C;
}
.tc-onboard-cta:active { transform: translateY(1px); }
.tc-onboard-cta i { font-size: 1rem; }
[data-theme="light"] .tc-onboard-cta { color: #06251C; }

@media (max-width: 575.98px) {
    .tc-onboard-card { padding: 32px 20px 28px; }
    .tc-onboard-step-col { width: 76px; }
    .tc-onboard-step-line { width: 10px; }
    .tc-onboard-step-col small { font-size: 0.6rem; }
}

/* ── Onboarding progress strip (Subscription/Index, mid-onboarding only) ─── */
.tgs-onboard-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    margin: 0 0 22px;
    background: rgba(14, 155, 255, 0.08);
    border: 1px solid rgba(14, 155, 255, 0.24);
    border-radius: 12px;
    color: var(--tgs-accent-bright, #57C8EA);
    font-size: 0.85rem;
    font-weight: 600;
}
.tgs-onboard-strip i { font-size: 1rem; flex-shrink: 0; }
[data-theme="light"] .tgs-onboard-strip {
    background: #EAF5FF;
    border-color: #9FD3FF;
    color: #0063B0;
}

/* ── Channel search step (TradingAccount/Create, step 2) ─────────────────── */
.tc-channel-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
}
.tc-channel-search i { color: #9CA3AF; font-size: 0.9rem; flex-shrink: 0; }
.tc-channel-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #FFFFFF;
    font-size: 0.875rem;
}
.tc-channel-search-input::placeholder { color: #6B7280; }

.tc-channel-results {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: 4px;
}
.tc-channel-result {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 11px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    color: #E5E7EB;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.tc-channel-result:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); }
.tc-channel-result:disabled { cursor: default; opacity: 0.65; }
.tc-channel-result.is-selected {
    background: rgba(14, 155, 255, 0.08);
    border-color: rgba(14, 155, 255, 0.30);
}
.tc-channel-result-icon {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; flex-shrink: 0;
    border-radius: 8px;
    background: rgba(123, 97, 255, 0.14);
    color: #A78BFA;
    font-size: 0.75rem;
}
.tc-channel-result-title {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tc-channel-result-add {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: #0E9BFF;
}
.tc-channel-result.is-selected .tc-channel-result-add { color: #7FE0F5; }
.tc-channel-noresults {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 6px;
    color: #6B7280;
    font-size: 0.85rem;
}

.tc-channel-selected-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 8px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #9CA3AF;
}
.tc-channel-selected-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: rgba(14, 155, 255, 0.16);
    color: #0E9BFF;
    font-size: 0.7rem;
}
.tc-channel-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 20px;
}
.tc-channel-selected-empty { font-size: 0.82rem; color: #6B7280; }

.tc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px 5px 10px;
    background: rgba(14, 155, 255, 0.10);
    border: 1px solid rgba(14, 155, 255, 0.32);
    border-radius: 999px;
    color: #57C8EA;
    font-size: 0.8rem;
    font-weight: 600;
    max-width: 100%;
}
.tc-chip i { font-size: 0.72rem; }
.tc-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}
.tc-chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    color: inherit;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.tc-chip-remove:hover { background: rgba(255, 90, 110, 0.30); color: #FF5A6E; }

.tc-channel-empty {
    text-align: center;
    padding: 22px 12px;
    color: #9CA3AF;
    font-size: 0.85rem;
}
.tc-channel-empty i { font-size: 1.6rem; color: #5BA9F5; display: block; margin-bottom: 10px; }

/* Light theme */
[data-theme="light"] .tc-channel-search { background: #F7F8FA; border-color: rgba(15, 23, 42, 0.12); }
[data-theme="light"] .tc-channel-search i { color: #7A869A; }
[data-theme="light"] .tc-channel-search-input { color: #0F1724; }
[data-theme="light"] .tc-channel-search-input::placeholder { color: #9AA5B4; }
[data-theme="light"] .tc-channel-result {
    background: #FFFFFF; border-color: rgba(15, 23, 42, 0.10); color: #0F1724;
}
[data-theme="light"] .tc-channel-result:hover:not(:disabled) { background: #F7F8FA; border-color: rgba(15, 23, 42, 0.18); }
[data-theme="light"] .tc-channel-result.is-selected { background: #EAF5FF; border-color: #9FD3FF; }
[data-theme="light"] .tc-channel-result-add { color: #0063B0; }
[data-theme="light"] .tc-chip { background: #EAF5FF; border-color: #9FD3FF; color: #0063B0; }
[data-theme="light"] .tc-channel-selected-head { color: #556174; }
[data-theme="light"] .tc-channel-empty { color: #556174; }

/* ── "Available Channels" heading + loading state (Create.cshtml step 2) ──── */
.tc-channel-results-head {
    margin: 2px 0 8px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #9CA3AF;
}
.tc-channel-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 6px;
    color: #6B7280;
    font-size: 0.85rem;
}
.tc-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-top-color: #0E9BFF;
    animation: tc-spin 0.7s linear infinite;
    flex-shrink: 0;
}
@keyframes tc-spin { to { transform: rotate(360deg); } }
[data-theme="light"] .tc-channel-results-head { color: #556174; }
[data-theme="light"] .tc-channel-loading { color: #7A869A; }
[data-theme="light"] .tc-spinner { border-color: rgba(15, 23, 42, 0.15); border-top-color: #0063B0; }