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 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 #3B82F6;
}

/* ── 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(16,185,129,0.70); }
.sidebar-toggle-btn:hover { color: rgba(16,185,129,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(16,185,129,0.22);
    transition: box-shadow .2s;
}
.topbar-avatar-ring:hover { box-shadow: 0 0 0 2px rgba(16,185,129,0.55); }

/* Theme toggle button */
.topbar-theme-btn {
    color: rgba(16,185,129,0.75);
    border: 1px solid rgba(16,185,129,0.20);
    background: rgba(16,185,129,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: #10b981;
    border-color: rgba(16,185,129,0.45);
    background: rgba(16,185,129,0.12);
    box-shadow: 0 0 12px rgba(16,185,129,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 */

/* 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(34,197,94,0.35) !important; box-shadow: 0 4px 24px rgba(22,163,74,0.15), 0 0 18px rgba(22,163,74,0.10), inset 0 1px 0 rgba(255,255,255,0.90) !important; }
[data-theme="light"] .glass-glow-green:hover  { border-color: rgba(34,197,94,0.55) !important; box-shadow: 0 12px 40px rgba(22,163,74,0.22), 0 0 30px rgba(22,163,74,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(22,163,74,0.05) 0%, rgba(255,255,255,0.75) 100%); border-color: rgba(22,163,74,0.18); }
[data-theme="light"] .chart-box-green:hover  { border-color: rgba(22,163,74,0.32); box-shadow: 0 0 24px rgba(22,163,74,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: #15803d;
    border-color: rgba(22,163,74,0.40);
    background: rgba(22,163,74,0.09);
    box-shadow: 0 0 8px rgba(22,163,74,0.12);
}
[data-theme="light"] .btn-glow-green:hover {
    color: #166534;
    border-color: rgba(22,163,74,0.70);
    background: rgba(22,163,74,0.15);
    box-shadow: 0 0 20px rgba(22,163,74,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(16,185,129,0.07);
    border: 1px solid rgba(16,185,129,0.18);
    border-radius: 20px;
}
.live-dot {
    width: 7px;
    height: 7px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(16,185,129,0.70);
    animation: livePulse 2s ease-in-out infinite;
    flex-shrink: 0;
}
.live-label {
    font-size: .72rem;
    font-weight: 600;
    color: #10b981;
    text-shadow: 0 0 8px rgba(16,185,129,0.40);
    letter-spacing: .04em;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(16,185,129,0.70); }
    50%       { opacity: .5; box-shadow: 0 0 12px rgba(16,185,129,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(16,185,129,0.07) 0%, rgba(255,255,255,0.04) 100%);
    border-bottom: 1px solid rgba(16,185,129,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(16,185,129,0.14);
    border: 1px solid rgba(16,185,129,0.30);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #10b981; font-size: 1rem; flex-shrink: 0;
    box-shadow: 0 0 18px rgba(16,185,129,0.24), inset 0 1px 0 rgba(16,185,129,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: #6ee7b7;
    border: 1px solid rgba(16,185,129,0.30);
    background: rgba(16,185,129,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(16,185,129,0.55);
    background: rgba(16,185,129,0.15);
    box-shadow: 0 0 18px rgba(16,185,129,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(16,185,129,0.12) !important;
    font-size: 0.61rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 700;
    padding: .6rem 1rem;
    background: rgba(16,185,129,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(22,163,74,0.08);
    border-color: rgba(22,163,74,0.22);
}
[data-theme="light"] .live-dot {
    background: #16a34a;
    box-shadow: 0 0 6px rgba(22,163,74,0.60);
}
[data-theme="light"] .live-label { color: #15803d; 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(22,163,74,0.20) !important; box-shadow: 0 4px 24px rgba(22,163,74,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(22,163,74,0.06) 0%, rgba(255,255,255,0.75) 100%); border-bottom-color: rgba(22,163,74,0.12); }
[data-theme="light"] .trades-header-icon { background: rgba(22,163,74,0.11); border-color: rgba(22,163,74,0.24); color: #15803d; box-shadow: 0 0 14px rgba(22,163,74,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: #15803d; border-color: rgba(22,163,74,0.28); background: rgba(22,163,74,0.07); }
[data-theme="light"] .trades-monitor-btn:hover { color: #166534; border-color: rgba(22,163,74,0.50); background: rgba(22,163,74,0.13); box-shadow: 0 0 14px rgba(22,163,74,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: #10b981; box-shadow: 0 0 6px rgba(16,185,129,.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(16,185,129,0.18) 0%, rgba(52,211,153,0.10) 100%);
    border: 1px solid rgba(16,185,129,0.38);
    color: #34d399; 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(16,185,129,0.28) 0%, rgba(52,211,153,0.18) 100%);
    border-color: rgba(16,185,129,0.65);
    box-shadow: 0 0 22px rgba(16,185,129,0.28);
    color: #6ee7b7;
}
.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(22,163,74,0.14), rgba(16,185,129,0.08)); border-color: rgba(22,163,74,0.35); color: #15803d; }
[data-theme="light"] .mc-btn-subscribe:hover { background: linear-gradient(135deg, rgba(22,163,74,0.22), rgba(16,185,129,0.14)); border-color: rgba(22,163,74,0.55); color: #14532d; box-shadow: 0 0 18px rgba(22,163,74,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; }

/* ═══════════════════════════════════════════════════════════════════════════
   ██████  FUNDEDNEXT THEME  ██████
   Design aesthetic inspired by FundedNext.com
   Brand:       #00d09c  (teal-green)
   Background:  #080a0d  (near-black)
   Font:        Inter
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ──────────────────────────────────────────────── */
:root {
    --fn-green:          #00d09c;
    --fn-green-light:    #33ddaf;
    --fn-green-bright:   #00ffa8;
    --fn-green-mid:      #00b890;
    --fn-glow-strong:    rgba(0,208,156,0.50);
    --fn-glow-mid:       rgba(0,208,156,0.30);
    --fn-glow-soft:      rgba(0,208,156,0.14);
    --fn-glow-subtle:    rgba(0,208,156,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-green:   rgba(0,208,156,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(0,208,156,0.10) !important;
    box-shadow: 0 1px 28px rgba(0,0,0,0.75), 0 0 50px rgba(0,208,156,0.04) !important;
}
.topbar-brand {
    color: var(--fn-green) !important;
    text-shadow: 0 0 22px rgba(0,208,156,0.44) !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
}
.topbar-wallet-glass {
    background: rgba(0,208,156,0.09) !important;
    border-color: rgba(0,208,156,0.22) !important;
    color: var(--fn-green) !important;
    text-shadow: 0 0 8px rgba(0,208,156,0.38) !important;
    box-shadow: none !important;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
    background: linear-gradient(180deg, #060709 0%, #09090d 100%) !important;
    border-right: 1px solid rgba(0,208,156,0.07) !important;
    box-shadow: 3px 0 32px rgba(0,0,0,0.72), 0 0 50px rgba(0,208,156,0.02) !important;
}
.sidebar .sidebar-link.active {
    color: var(--fn-green) !important;
    background-color: rgba(0,208,156,0.09) !important;
    box-shadow: 0 0 18px rgba(0,208,156,0.12) !important;
    text-shadow: 0 0 10px rgba(0,208,156,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-green) !important;
    font-weight: 600 !important;
    text-shadow: 0 0 8px rgba(0,208,156,0.42) !important;
}
.sidebar-footer {
    border-top-color: rgba(0,208,156,0.08) !important;
    background: rgba(0,0,0,0.22) !important;
}
.btn-sidebar-profile {
    background: rgba(0,208,156,0.07) !important;
    border-color: rgba(0,208,156,0.18) !important;
    color: var(--fn-green) !important;
}
.btn-sidebar-profile:hover {
    background: rgba(0,208,156,0.13) !important;
    border-color: rgba(0,208,156,0.36) !important;
    color: var(--fn-green) !important;
    box-shadow: 0 0 16px rgba(0,208,156,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(0,208,156,0.15) 0%, transparent 52%),
        radial-gradient(ellipse at 90% 82%,  rgba(0,208,156,0.08) 0%, transparent 48%),
        radial-gradient(ellipse at 82% 4%,   rgba(0,240,185,0.09) 0%, transparent 40%),
        radial-gradient(ellipse at 40% 92%,  rgba(0,168,130,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(0,208,156,0.17) !important;
    box-shadow: 0 18px 52px rgba(0,0,0,0.64), 0 0 32px rgba(0,208,156,0.07),
                inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

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

/* ── Glass glow green ─────────────────────────────────────────────────────── */
.glass-glow-green {
    box-shadow: 0 6px 28px rgba(0,0,0,.44), 0 0 18px rgba(0,208,156,.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(0,208,156,.28),
                inset 0 1px 0 rgba(255,255,255,.10) !important;
}

/* ── Text glow — primary green ────────────────────────────────────────────── */
.text-glow-green {
    color: var(--fn-green) !important;
    text-shadow: 0 0 15px rgba(0,208,156,0.58) !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 ──────────────────────────────────────────────────── */
.badge-glass-green {
    background: rgba(0,208,156,0.11) !important;
    color: var(--fn-green) !important;
    border-color: rgba(0,208,156,0.28) !important;
    text-shadow: 0 0 8px rgba(0,208,156,0.40) !important;
}
.badge-glass-buy {
    background: rgba(0,208,156,0.11) !important;
    color: var(--fn-green) !important;
    text-shadow: 0 0 8px rgba(0,208,156,0.38) !important;
}

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

/* ── Glass toggle active ──────────────────────────────────────────────────── */
.btn-glass.active {
    background: rgba(0,208,156,0.10) !important;
    border-color: rgba(0,208,156,0.34) !important;
    color: var(--fn-green) !important;
    text-shadow: 0 0 8px rgba(0,208,156,0.42) !important;
    box-shadow: 0 0 12px rgba(0,208,156,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(0,208,156,0.06) !important;
}

/* ── Glass input focus ───────────────────────────────────────────────────── */
.glass-input:focus {
    border-color: rgba(0,208,156,0.46) !important;
    box-shadow: 0 0 0 3px rgba(0,208,156,0.11) !important;
}
.glass-select:focus,
.form-select.glass-select:focus {
    border-color: rgba(0,208,156,0.46) !important;
    box-shadow: 0 0 0 3px rgba(0,208,156,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(0,208,156,0.46) !important;
    box-shadow: 0 0 0 3px rgba(0,208,156,0.10) !important;
}

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

/* ── Glass tabs — active ─────────────────────────────────────────────────── */
.glass-tabs .nav-link.active {
    color: var(--fn-green) !important;
    border-top-color: rgba(0,208,156,0.30) !important;
}

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

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

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

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

/* Gradient text */
.fn-gradient-text {
    background: linear-gradient(135deg, #00d09c 0%, #33ddaf 50%, #00ffa8 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, #00d09c 0%, #a8f0df 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(0,208,156,0.10); border: 1px solid rgba(0,208,156,0.24);
    border-radius: 99px; padding: .22rem .78rem;
    font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .11em;
    color: var(--fn-green);
}

/* Solid primary CTA button */
.btn-fn-primary {
    background: linear-gradient(135deg, #00d09c 0%, #00b88a 100%);
    border: 1px solid rgba(0,208,156,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(0,208,156,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, #00e0a9 0%, #00c898 100%);
    box-shadow: 0 6px 30px rgba(0,208,156,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, #00d09c, #33ddaf);
    -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(0,208,156,0.20) !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.55), 0 0 42px rgba(0,208,156,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(0,208,156,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(0,208,156,0.0); }
    50%       { opacity: .85; box-shadow: 0 0 0 5px rgba(0,208,156,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-green);
    box-shadow: 0 0 8px rgba(0,208,156,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-green);
    border-left: 2px solid var(--fn-green);
    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(0,208,156,0.40), 0 0 14px rgba(0,208,156,0.20) !important;
}
.topbar-avatar-ring:hover {
    box-shadow: 0 0 0 2px rgba(0,208,156,0.72), 0 0 22px rgba(0,208,156,0.36) !important;
}

/* ── Glass nav tabs — FN green active ────────────────────────────────────── */
.glass-tabs .nav-link.active {
    color: var(--fn-green) !important;
    text-shadow: 0 0 10px rgba(0,208,156,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(0,208,156,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(0,208,156,0.06) !important;
}
.topbar-dropdown .dropdown-item:hover,
.topbar-dropdown .dropdown-item:focus {
    background: rgba(0,208,156,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(0,208,156,0.20) !important;
    border-color: rgba(0,208,156,0.45) !important;
    outline: none !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   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: #00D68F;
    --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(0,214,143,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(0,214,143,0.14);  color: var(--md-primary);   border-color: rgba(0,214,143,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(--md-primary); }
.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, #00D68F);
    outline-offset: 2px;
}
.md-window-btn.is-active {
    background: rgba(0, 214, 143, 0.14);
    color: var(--md-primary, #00D68F);
    box-shadow: inset 0 0 0 1px rgba(0, 214, 143, 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(0,214,143,0.14);  color: var(--md-primary);   border-color: rgba(0,214,143,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(0,214,143,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: #17E39E;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 214, 143, 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(0, 214, 143, 0.14);
    border-color: rgba(0, 214, 143, 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: #00D68F;
    --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(0,214,143,0.12);  color: var(--tg-primary); border: 1px solid rgba(0,214,143,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(0, 214, 143, 0.55); }
    70%  { box-shadow: 0 0 0 5px rgba(0, 214, 143, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 214, 143, 0); }
}

/* ── Stats row ───────────────────────────────────────────────────────────── */
/* Stacked by default. The card is only half a row wide on desktop, so three
   stats side-by-side do not fit until the viewport is genuinely large. */
.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;
}
.telegram-copier-page .tg-stat-divider {
    display: none;
    width: 1px;
    align-self: stretch;
    background: var(--tg-border);
}

/* Wide screens: three across, with the separators restored.
   Must come AFTER the base rules above or the divider stays hidden and the
   middle stat lands in the 1px track. */
@media (min-width: 1600px) {
    .telegram-copier-page .tg-session-stats {
        grid-template-columns: 1fr 1px 1fr 1px 1fr;
        gap: 14px;
    }
    .telegram-copier-page .tg-stat-divider { display: block; }
}
.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(0,214,143,0.14);  color: var(--tg-primary);  border-color: rgba(0,214,143,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(0, 214, 143, 0.10);
    border-color: rgba(0, 214, 143, 0.30);
    color: var(--tg-primary);
}
.telegram-copier-page .tg-btn-primary:hover {
    background: rgba(0, 214, 143, 0.18);
    border-color: rgba(0, 214, 143, 0.50);
    color: #17E39E;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 214, 143, 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(0, 214, 143, 0.08);
    border: 1px solid rgba(0, 214, 143, 0.24);
    color: var(--tg-primary);
}
.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); }
.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(0,214,143,0.12);   color: var(--tg-primary);  border: 1px solid rgba(0,214,143,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: #00D68F;
    --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(0,214,143,0.18), rgba(0,214,143,0.04));
    border: 1px solid rgba(0,214,143,0.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 18px rgba(0,214,143,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(0, 214, 143, 0.22);
    box-shadow: var(--ea-shadow-sm), 0 0 0 1px rgba(0, 214, 143, 0.04);
}
.ea-accounts-page .ea-accent-green::before {
    background: radial-gradient(110% 80% at 0% 0%, rgba(0,214,143,0.10), transparent 58%);
}
.ea-accounts-page .ea-accent-green:hover { border-color: rgba(0, 214, 143, 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; 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(0,214,143,0.28); background: rgba(0,214,143,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; min-width: 0; 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;
}
.ea-accounts-page .ea-head-right {
    display: flex; flex-direction: column;
    align-items: flex-end; gap: 7px;
    flex-shrink: 0;
}
.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(0,214,143,0.12);   color: var(--ea-primary);  border: 1px solid rgba(0,214,143,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(0, 214, 143, 0.55); }
    70%  { box-shadow: 0 0 0 5px rgba(0, 214, 143, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 214, 143, 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 ──────────────────────────────────────────────────────────────── */
.ea-accounts-page .ea-account-actions {
    position: relative;
    margin-top: auto;
    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(0, 214, 143, 0.10);
    border-color: rgba(0, 214, 143, 0.30);
    color: var(--ea-primary);
}
.ea-accounts-page .ea-btn-primary:hover {
    background: rgba(0, 214, 143, 0.18);
    border-color: rgba(0, 214, 143, 0.50);
    color: #17E39E;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 214, 143, 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(0, 214, 143, 0.07);
    border-color: rgba(0, 214, 143, 0.28);
    color: var(--ea-primary);
}
.ea-accounts-page .ea-accent-green .ea-btn-outline:hover {
    background: rgba(0, 214, 143, 0.15);
    border-color: rgba(0, 214, 143, 0.48);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 214, 143, 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(0, 214, 143, 0.30);
    box-shadow: 0 -14px 0 -13px rgba(0, 214, 143, 0.22), 0 -28px 0 -27px rgba(0, 214, 143, 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(0, 214, 143, 0.08);
    border: 1px solid rgba(0, 214, 143, 0.24);
    color: var(--ea-primary);
}
.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);
}

/* ── 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(0,214,143,0.16), rgba(0,214,143,0.04));
    border: 1px solid rgba(0,214,143,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; }
    .ea-accounts-page .ea-account-actions { 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; }
}

/* ── 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-green: #00D68F;
    --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-green);
    background: rgba(0, 214, 143, 0.10);
    border-color: rgba(0, 214, 143, 0.38);
    box-shadow: 0 4px 16px rgba(0, 214, 143, 0.12);
}
.plans-page .plans-tab.active i { color: var(--pl-green); }
.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(0, 214, 143, 0.24);
    --pl-accent: var(--pl-green);
}
.plans-page .plan-accent-green::before {
    background: radial-gradient(125% 70% at 50% 0%, rgba(0, 214, 143, 0.12), transparent 60%);
}
.plans-page .plan-accent-green:hover {
    border-color: rgba(0, 214, 143, 0.45);
    box-shadow: var(--pl-shadow), 0 0 30px rgba(0, 214, 143, 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-green));
    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-green));
}
.plans-page .plan-accent-green .plan-tier-badge { background: rgba(0, 214, 143, 0.12);  border: 1px solid rgba(0, 214, 143, 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-green));
    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-green); }
.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);
}

/* ── 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);
}

/* ── 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-green: #00D68F;
    --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(0,214,143,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(0,214,143,0.14);  color: var(--ead-green);  border-color: rgba(0,214,143,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(--ead-green); }
.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: #7BE3C0;
}

/* ── 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-green);
    color: var(--ead-text);
    box-shadow: 0 0 0 3px rgba(0, 214, 143, 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(0, 214, 143, 0.07);
    border: 1px solid rgba(0, 214, 143, 0.22);
    font-size: 0.8rem; font-weight: 600;
    color: var(--ead-green);
}
.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(0,214,143,0.14);  color: var(--ead-green); border-color: rgba(0,214,143,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(--ead-green);
    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-green);
    box-shadow: 0 0 0 3px rgba(0, 214, 143, 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-green);
    border-color: var(--ead-green);
    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-green);
}

[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(0, 214, 143, 0.08);
    color: #00D68F;
}
.adv-risk .accordion-button:focus { box-shadow: 0 0 0 3px rgba(0, 214, 143, 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: #7BE3C0;
}
.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: #00D68F;
    border-color: #00D68F;
}
.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 > span {
        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 > span { 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;
    }
}