@import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css);

/* 1. RESET HTML: Jangan pake flex di sini biar kaga kepotong */
html {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* 2. BODY ELITE: Tetep 133% tapi nempel di kiri atas (0,0) */
body {
    /* RUMUS SAKTI: 100 / 0.75 = 133.333% */
    width: 100.333%;
    height: 133.333%;

    /* Scaling Engine */
    zoom: 0.85;
    -moz-transform: scale(0.85);
    -moz-transform-origin: 0 0; /* WAJIB nempel di pojok kiri atas */

    /* Theme & Layout */
    background-color: #020005;
    background-image: radial-gradient(circle at 50% -20%, rgba(168, 85, 247, 0.15) 0%, transparent 70%);
    color: #fff;
    font-family: 'Inter', sans-serif !important;

    /* Center Content: Sekarang kita tengahin .container-nya di sini */
    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;
    overflow: hidden;

    /* Security */
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 3. CONTAINER: Sekarang dia bakal presisi di tengah tanpa kepotong */
.container {
    width: 95%; /* Kasih sedikit ruang napas */
    height: 92%;
    display: flex;
    /* Tambahin styling flex-direction atau lainnya di sini */
}

/* 4. UTILITY */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: background-color .3s, border-color .3s, transform .2s cubic-bezier(.4, 0, .2, 1);
}

.swal2-container {
    z-index: 999999 !important;
}

input, textarea {
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Kalo kemaren app lu pake h-screen (100vh), sekarang kita timpa biar nurut sama wrapper */
.elite-app-wrapper {
    width: 100%;
    max-width: 1800px; /* Maksimal lebar biar kaga pecah di monitor Ultrawide */
    height: 100%; 
    max-height: 94vh; /* Kasih sisa ruang atas bawah */
    background: #0a0a0f;
    border-radius: 20px; /* Bikin pojoknya mulus melengkung */
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* Shadow Gacor: Bikin efek melayang */
    box-shadow: 
        0 30px 60px -15px rgba(0, 0, 0, 0.8), 
        0 0 50px rgba(168, 85, 247, 0.1),
        inset 0 1px 1px rgba(255, 255, 255, 0.05);
    overflow: hidden; /* Biar elemen dalem kaga bocor dari lengkungan */
    position: relative;
    display: flex; /* Sesuain sama layout sidebar lu */
}

/* Tombol Balik ke Landing Page */
.nav-back-landing {
    position: fixed;
    top: 25px;
    left: 30px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 18px;
    border-radius: 12px;
    color: #8a93a6;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    letter-spacing: 1px;
    transition: 0.3s;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
}

.nav-back-landing:hover {
    background: rgba(168, 85, 247, 0.1);
    border-color: rgba(168, 85, 247, 0.4);
    color: #fff;
    transform: translateX(-5px); /* Animasi geser dikit */
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.2);
}

.container {
    width: 100vw;
    flex: 1;
    margin: 0 !important;
    padding: 0 !important;
    position: relative
}

.sidebar {
    position: fixed;
    top: 66px;
    left: 16px;
    bottom: 16px;
    width: 56px;
    height: calc(100vh - 82px);
    background: rgba(18, 18, 24, .8) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
    flex-direction: column;
    padding: 20px 8px;
    z-index: 1000;
    transition: width .4s cubic-bezier(.25, 1, .5, 1), padding .4s
}

.sidebar:hover {
    width: 250px;
    padding: 20px 16px
}

.content {
    flex: 1;
    margin-left: 88px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 !important;
    margin-right: 0 !important;
    background: linear-gradient(135deg, #050505 0, #0a0a0f 100%)
}

.content-inner {
    padding: 40px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto
}

#pageTitle {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: -1px
}

#pageSub {
    font-size: 14px;
    color: #555;
    margin-bottom: 40px !important
}

input,
select,
textarea {
    background: #16161a !important;
    border: 1px solid #2d2d35 !important;
    color: #fff !important;
    padding: 14px !important;
    border-radius: 8px;
    width: 100%;
    font-size: 14px;
    transition: .3s
}

input:focus,
select:focus,
textarea:focus {
    border-color: #a855f7 !important;
    outline: 0
}

button {
    background: #1a1a1a;
    color: #fff;
    border: 1px solid #333;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: .3s
}

.btn-primary {
    background: #a855f7 !important;
    border: none !important
}

button:hover {
    background: #222;
    border-color: #a855f7;
    transform: translateY(-2px)
}

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

::-webkit-scrollbar-track {
    background: 0 0
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .1);
    border-radius: 10px
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .25)
}

.tab-btn {
    position: relative;
    overflow: hidden;
    font-weight: 600
}

.tab-btn:active {
    transform: scale(.95)
}

.active-tab {
    background: #a855f7 !important;
    box-shadow: 0 4px 15px rgba(168, 85, 247, .3)
}

@media (max-width:1200px) {
    .dashboard-main-grid {
        gap: 15px
    }
}

@media (max-width:900px) {

    .dashboard-main-grid,
    .profile-container {
        grid-template-columns: 1fr
    }
}

.calendar-day-box,
.elite-3d-card,
.journal-glass-row {
    transform: translateZ(0);
    will-change: transform, opacity
}

.danger-zone {
    border: 1px solid rgba(255, 95, 86, .1) !important;
    background: rgba(255, 95, 86, .02) !important
}

.danger-zone:hover {
    background: rgba(255, 95, 86, .08) !important;
    border-color: rgba(255, 95, 86, .4) !important;
    transform: scale(1.02)
}

.warning-blink {
    margin-left: auto;
    color: #ff5f56;
    font-size: .8rem;
    animation: 1.5s infinite pulseRed
}

@keyframes pulseRed {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: .3
    }
}

.factory-reset-card {
    margin-top: 30px;
    border: 1px solid rgba(255, 95, 86, .3) !important;
    background: rgba(10, 10, 15, .8) !important;
    cursor: pointer;
    transition: .4s
}

.factory-reset-card:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 20px 50px rgba(255, 95, 86, .2);
    border-color: #ff5f56 !important
}

.reset-content {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px
}

.reset-icon {
    font-size: 2rem;
    color: #ff5f56;
    animation: 3s linear infinite rotateWarning
}

@keyframes rotateWarning {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

/* --- HAPUS GLOBAL (*) GPU HACK --- */
/* Jangan pake tag bintang (*) buat 3D transform, bikin scroll mati! */

/* --- FIX: PAGE CONTAINER --- */
.page {
    /* HAPUS overflow-y dan scroll-behavior di sini! Biar Lenis yang kerja */
    width: 100%;
    min-height: 100%;
    /* Kalau butuh akselerasi GPU, cukup taruh di elemen yang gerak aja */
    transform: translateZ(0); 
}

/* --- AREA SCROLL LENIS (Udah Bener!) --- */
.content-area {
    flex: 1;
    height: 100%;
    /* Ini satu-satunya yang boleh punya overflow */
    overflow-y: auto; 
    overflow-x: hidden;
    position: relative;
}

.scroll-content {
    /* Ini kunci biar gak kepotong */
    height: auto !important; 
    min-height: 100%; 
    padding-bottom: 50px; 
    box-sizing: border-box;
}

/* Resetter standar dari Lenis */
html.lenis, html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

/* ── PHASE 2 FIX: LIGHT MODE — FULL PAGE OVERRIDES ──
   Background: white, Text: dark/visible, Cards: light with borders
   Specificity high so page-level CSS can't override
*/

body.theme-light {
    background-color: #f5f6fa !important;
    background-image: none !important;
}

body.theme-light .elite-app-wrapper {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
}

body.theme-light .content {
    background: #f5f6fa !important;
}

body.theme-light .sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.05) !important;
}

body.theme-light .sidebar-menu li {
    color: #374151 !important;
}

body.theme-light .sidebar-menu li:hover {
    background: rgba(124, 58, 237, 0.06) !important;
    color: #7c3aed !important;
    border-left-color: #7c3aed !important;
}

body.theme-light .sidebar-menu li.active {
    background: rgba(124, 58, 237, 0.1) !important;
    color: #7c3aed !important;
    border-left-color: #7c3aed !important;
}

body.theme-light .sidebar-category {
    color: #9ca3af !important;
}

body.theme-light .sidebar-category:hover {
    color: #7c3aed !important;
}

body.theme-light .sidebar-bottom-stats {
    border-top-color: rgba(0, 0, 0, 0.08) !important;
}

body.theme-light .side-mini-card {
    background: rgba(0, 0, 0, 0.03) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

body.theme-light .side-mini-card small {
    color: #9ca3af !important;
}

body.theme-light .side-mini-card h4,
body.theme-light .side-mini-card h2 {
    color: #111827 !important;
}

body.theme-light .text-purple-glow {
    color: #7c3aed !important;
    text-shadow: none !important;
}

body.theme-light #sidePnL {
    color: #16a34a !important;
}

/* ── INPUT FIELDS IN LIGHT MODE ── */
body.theme-light input,
body.theme-light select,
body.theme-light textarea {
    background: #ffffff !important;
    border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
    color: #111827 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
}

body.theme-light input:focus,
body.theme-light select:focus,
body.theme-light textarea:focus {
    border-color: #7c3aed !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12) !important;
}

body.theme-light input::placeholder {
    color: #9ca3af !important;
}

body.theme-light label,
body.theme-light .input-label,
body.theme-light .field-label {
    color: #374151 !important;
}

body.theme-light .input-container label {
    color: #6b7280 !important;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 1px;
}

/* ── BUTTONS IN LIGHT MODE ── */
body.theme-light button {
    background: #f3f4f6 !important;
    color: #111827 !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

body.theme-light .btn-primary {
    background: linear-gradient(135deg, #7c3aed, #9333ea) !important;
    border: none !important;
    color: #ffffff !important;
}

body.theme-light button:hover {
    background: #e5e7eb !important;
    border-color: #7c3aed !important;
    color: #7c3aed !important;
}

body.theme-light .btn-primary:hover {
    background: linear-gradient(135deg, #6d28d9, #7c22ce) !important;
    color: #ffffff !important;
}

/* ── CARDS & GLASS PANELS IN LIGHT MODE ── */
body.theme-light [class*="card"],
body.theme-light [class*="glass"],
body.theme-light [class*="elite-card"],
body.theme-light [class*="journal-card"],
body.theme-light .dashboard-card,
body.theme-light .metric-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    color: #111827 !important;
}

body.theme-light [class*="card"] h1,
body.theme-light [class*="card"] h2,
body.theme-light [class*="card"] h3,
body.theme-light [class*="card"] h4,
body.theme-light .dashboard-card h1,
body.theme-light .dashboard-card h2,
body.theme-light .dashboard-card h3,
body.theme-light .dashboard-card h4 {
    color: #111827 !important;
}

body.theme-light [class*="card"] p,
body.theme-light [class*="card"] small,
body.theme-light [class*="card"] span,
body.theme-light .dashboard-card p,
body.theme-light .dashboard-card small,
body.theme-light .dashboard-card span {
    color: #6b7280 !important;
}

/* ── PAGE CONTENT IN LIGHT MODE ── */
body.theme-light .page {
    color: #111827 !important;
    background: transparent !important;
}

body.theme-light .page h1,
body.theme-light .page h2,
body.theme-light .page h3,
body.theme-light #pageTitle {
    color: #111827 !important;
}

body.theme-light .page p,
body.theme-light .page small,
body.theme-light .page-text {
    color: #4b5563 !important;
}

body.theme-light .page-subtitle,
body.theme-light #pageSub {
    color: #9ca3af !important;
}

/* ── TOPBAR IN LIGHT MODE ── */
body.theme-light .tpb-container,
body.theme-light .tpb-left-zone {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

body.theme-light .tpb-brand {
    color: #111827 !important;
}

body.theme-light .tpb-intel-capsule {
    background: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: #111827 !important;
}

body.theme-light .tpb-label {
    color: #9ca3af !important;
}

body.theme-light .tpb-value {
    color: #111827 !important;
}

/* ── MODALS IN LIGHT MODE ── */
body.theme-light .elite-modal-box {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #111827 !important;
}

body.theme-light .elite-modal-box h2,
body.theme-light .elite-modal-box h3 {
    color: #111827 !important;
}

body.theme-light .elite-modal-box p,
body.theme-light .elite-modal-box small,
body.theme-light .elite-modal-box label {
    color: #4b5563 !important;
}

body.theme-light .elite-modal-overlay {
    background: rgba(0, 0, 0, 0.4) !important;
}

/* ── TABLES IN LIGHT MODE ── */
body.theme-light table,
body.theme-light .trade-table,
body.theme-light .journal-table {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: #111827 !important;
}

body.theme-light th,
body.theme-light thead td {
    background: #f9fafb !important;
    color: #374151 !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.08) !important;
}

body.theme-light td,
body.theme-light tbody td {
    color: #374151 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

body.theme-light tr:hover td {
    background: #f9fafb !important;
}

/* ── BADGES & PILLS IN LIGHT MODE ── */
body.theme-light .status-pill,
body.theme-light .badge,
body.theme-light .tag-pill,
body.theme-light .dir-pill {
    color: #ffffff !important;
}

body.theme-light .pill-win {
    background: rgba(22, 163, 74, 0.15) !important;
    color: #16a34a !important;
    border: 1px solid rgba(22, 163, 74, 0.3) !important;
}

body.theme-light .pill-loss {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #dc2626 !important;
    border: 1px solid rgba(220, 38, 38, 0.3) !important;
}

body.theme-light .pill-be {
    background: rgba(251, 191, 36, 0.15) !important;
    color: #d97706 !important;
    border: 1px solid rgba(251, 191, 36, 0.3) !important;
}

body.theme-light .pill-long {
    background: rgba(22, 163, 74, 0.15) !important;
    color: #16a34a !important;
    border: 1px solid rgba(22, 163, 74, 0.3) !important;
}

body.theme-light .pill-short {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #dc2626 !important;
    border: 1px solid rgba(220, 38, 38, 0.3) !important;
}

/* ── GRAPHS & CHARTS IN LIGHT MODE ── */
body.theme-light canvas,
body.theme-light .chart-container {
    background: transparent !important;
}

/* ── SWEETALERT2 IN LIGHT MODE ── */
body.theme-light .swal2-popup {
    background: #ffffff !important;
    color: #111827 !important;
}

body.theme-light .swal2-title {
    color: #111827 !important;
}

body.theme-light .swal2-html-container {
    color: #4b5563 !important;
}

body.theme-light .swal2-close {
    color: #9ca3af !important;
}

/* ── LOGOUT BUTTON IN LIGHT MODE ── */
body.theme-light .sidebar-bottom-stats button[onclick*="logoutTotal"] {
    background: rgba(220, 38, 38, 0.08) !important;
    border: 1px solid rgba(220, 38, 38, 0.2) !important;
    color: #dc2626 !important;
}

/* ── COLLAPSIBLE / ACCORDION IN LIGHT MODE ── */
body.theme-light .collapse-header,
body.theme-light .accordion-header {
    color: #374151 !important;
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

/* ── TABS IN LIGHT MODE ── */
body.theme-light .tab-btn,
body.theme-light .tab-item {
    color: #9ca3af !important;
}

body.theme-light .tab-btn.active,
body.theme-light .tab-item.active {
    background: #7c3aed !important;
    color: #ffffff !important;
}

/* ── TOAST NOTIFICATIONS IN LIGHT MODE ── */
body.theme-light .toast-custom {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: #111827 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

body.theme-light .toast-msg {
    color: #374151 !important;
}

/* ── SEARCH / FILTER BAR IN LIGHT MODE ── */
body.theme-light .search-bar,
body.theme-light .filter-bar,
body.theme-light .toolbar {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* ── PROGRESS BARS IN LIGHT MODE ── */
body.theme-light .progress-bar,
body.theme-light .progress-fill {
    background: rgba(0, 0, 0, 0.06) !important;
}

body.theme-light .progress-fill {
    background: #7c3aed !important;
}

/* ── SELECT DROPDOWNS IN LIGHT MODE ── */
body.theme-light select option {
    background: #ffffff !important;
    color: #111827 !important;
}

/* ── SCROLLBARS IN LIGHT MODE ── */
body.theme-light ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15) !important;
}

body.theme-light ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03) !important;
}

/* ── LOGO GRADIENT TEXT IN LIGHT MODE ── */
body.theme-light .logo-gradient {
    background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ── PAGE-SPECIFIC TEXT IN LIGHT MODE ── */
body.theme-light .trade-date,
body.theme-light .trade-pair,
body.theme-light .trade-pnl,
body.theme-light .trade-grade,
body.theme-light .trade-r {
    color: #374151 !important;
}

body.theme-light .pnl-positive {
    color: #16a34a !important;
}

body.theme-light .pnl-negative {
    color: #dc2626 !important;
}

body.theme-light .grade-a-plus,
body.theme-light .grade-a {
    color: #059669 !important;
}

body.theme-light .grade-b {
    color: #d97706 !important;
}

body.theme-light .grade-c {
    color: #dc2626 !important;
}

body.theme-light .grade-f {
    color: #dc2626 !important;
}

/* ── SIDEBAR LOGO & BRAND IN LIGHT MODE ── */
body.theme-light .sidebar-logo-img {
    filter: drop-shadow(0 0 8px rgba(124, 58, 237, 0.4)) !important;
}

body.theme-light .sidebar-tagline {
    color: #7c3aed !important;
}

/* ── MOBILE COMPANION FIXES ── */
body.theme-light .mob-container {
    color: #111827 !important;
}

body.theme-light .mob-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: #111827 !important;
}

body.theme-light .mob-text {
    color: #374151 !important;
}

body.theme-light .mob-title {
    color: #111827 !important;
}

body.theme-light .mob-detail-bg {
    background: linear-gradient(to bottom, rgba(124, 58, 237, 0.1), #ffffff 60%) !important;
}

body.theme-light .mob-slide-panel {
    background: #ffffff !important;
    border-left: 1px solid rgba(0, 0, 0, 0.06) !important;
}

body.theme-light .mob-modal__content {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: #111827 !important;
}

/* ── WHITESPACE / PADDING FIXES IN LIGHT MODE ── */
body.theme-light .mob-container {
    margin-left: 0 !important;
}

/* ── NAV LINKS IN LIGHT MODE ── */
body.theme-light .tpb-icon-btn {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #6b7280 !important;
}

body.theme-light .tpb-icon-btn:hover,
body.theme-light .tpb-icon-btn.active {
    background: rgba(124, 58, 237, 0.1) !important;
    color: #7c3aed !important;
}

/* ── SAFE NET: FORCE ALL TEXT ON WHITE BG TO DARK ──
   Catch-all for any text not yet caught above */
body.theme-light .page,
body.theme-light .page *
{
    color: #374151 !important;
}

body.theme-light .page h1,
body.theme-light .page h2,
body.theme-light .page h3,
body.theme-light .page h4,
body.theme-light .page h5,
body.theme-light .page h6 {
    color: #111827 !important;
}

body.theme-light .page a:not(.btn-primary):not(.btn-secondary) {
    color: #7c3aed !important;
}

body.theme-light .page a:not(.btn-primary):not(.btn-secondary):hover {
    color: #6d28d9 !important;
}

/* ── PHASE 2: ACCESSIBILITY ── */

/* Skip to content link */
.skip-to-content {
    position: absolute;
    top: -9999px;
    left: 0;
    z-index: 999999;
    padding: 12px 24px;
    background: #a855f7;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 8px 0;
    font-size: .85rem;
}

.skip-to-content:focus {
    top: 0;
}

/* ARIA live region for dynamic updates */
.aria-live-region {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus visible for keyboard nav */
:focus-visible {
    outline: 2px solid #a855f7;
    outline-offset: 2px;
}

/* Sidebar ARIA: active state */
.sidebar-menu li[aria-current="page"] {
    background: linear-gradient(90deg, rgba(192, 132, 252, 0.15), transparent 100%);
    color: #fff;
    border-left: 4px solid #c084fc;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    * {
        border-color: #000 !important;
    }
    .elite-input,
    .elite-select {
        border-width: 2px !important;
    }
}