/* =====================================================================
   e-Presensi · Sistem Tema
   Empat tema: PRO (terang, biru), ELITE (gelap, violet-cyan),
               PREMIUM (porselen, navy + emas), LUXURY (obsidian + emas champagne)
   Dipasang lewat <html data-theme="..."> dan dimuat SETELAH elite.css.
   Token didefinisikan pada [data-theme] sehingga pratinjau di tema.php dapat memakainya.
   ===================================================================== */

/* ---------- 1. TOKEN ---------- */
[data-theme="pro"]{
  --t-bg:#f3f6fb;--t-bg-img:none;--t-surface:#fff;--t-surface-2:#f7faff;--t-hover:#f1f6fd;
  --t-text:#13233f;--t-heading:#102a52;--t-muted:#6f7d95;--t-border:#e4ebf4;--t-border-2:#d6e0ee;--t-input-bg:#fbfdff;
  --t-accent:#1769e0;--t-accent-2:#2d8cff;--t-link:#1769e0;--t-icon:#1769e0;--t-accent-soft:rgba(23,105,224,.10);
  --t-btn:linear-gradient(135deg,#1769e0,#0b4fb3);--t-btn-ink:#fff;--t-btn-glow:0 8px 18px rgba(23,105,224,.22);
  --t-radius:16px;--t-radius-sm:10px;--t-shadow:0 8px 28px rgba(17,42,78,.07);--t-shadow-lg:0 20px 46px -22px rgba(17,42,78,.35);
  --t-font:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;--t-display:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --t-side:linear-gradient(180deg,#061a3b 0%,#092a59 72%,#061c40 100%);--t-side-solid:#071a3a;--t-side-text:#c8d9ef;--t-side-strong:#fff;--t-side-muted:#a9c3e7;--t-side-caption:#7596c1;
  --t-side-border:rgba(255,255,255,.08);--t-side-hover:rgba(48,139,255,.14);--t-side-active:linear-gradient(90deg,#1769e0,#2c8cff);--t-side-active-text:#fff;--t-side-active-shadow:0 7px 18px rgba(28,117,228,.25);
  --t-brand-mark:linear-gradient(135deg,#1e88ff,#72c7ff);--t-brand-ink:#fff;--t-brand-accent:#62b8ff;
  --t-top:#fff;--t-top-border:#e4ebf4;--t-top-shadow:none;
  --t-hero:linear-gradient(100deg,#0b2856 0%,#0f3d79 62%,#164e8e 100%);--t-hero-text:#fff;--t-hero-sub:#c8dbf4;--t-eyebrow:#dbc58f;--t-ring:rgba(255,255,255,.12);
  --t-hair:linear-gradient(90deg,#1769e0,#72c7ff,#1769e0);--t-footer:linear-gradient(135deg,#0b1f3a,#123e6d);
  --c-blue:#1474e8;--c-green:#0c9a64;--c-orange:#e88a00;--c-purple:#7753d2;--c-red:#e53f63;--c-cyan:#1298b7;--c-green-soft:rgba(16,168,107,.08);
  /* login */
  --l-brand-bg:radial-gradient(circle at 12% 20%,rgba(54,132,244,.42),transparent 28%),radial-gradient(circle at 80% 85%,rgba(228,189,88,.17),transparent 24%),linear-gradient(145deg,#041531 0%,#082a5b 54%,#0c4383 100%);
  --l-ribbon:linear-gradient(180deg,transparent 0 13%,rgba(228,189,88,.98) 13.2% 17%,rgba(255,255,255,.98) 17.2% 21%,rgba(23,105,224,.95) 21.2% 100%);
  --l-hl:#f5d986;--l-line:linear-gradient(90deg,#e4bd58,transparent);--l-form-bg:linear-gradient(180deg,#f7faff,#edf3f9);
  --l-stripe:linear-gradient(135deg,transparent 0 48%,rgba(228,189,88,.95) 48.2% 51%,rgba(23,105,224,.98) 51.2% 57%,transparent 57.2%);
  --l-card-bg:rgba(255,255,255,.96);--l-card-border:rgba(214,224,238,.95);--l-card-shadow:0 28px 75px rgba(22,47,84,.15);
  --l-logo-bg:#fff;--l-title:#061b3d;--l-title-b:#e4bd58;--l-sub:#4e6788;--l-label:#243754;--l-input-bg:#f9fbfe;--l-input-border:#dce6f2;--l-placeholder:#9aa7ba;
  --l-quote-bg:#eef5fd;--l-quote-ink:#456486;--l-foot:#7c899c;--l-foot-strong:#31496a;--l-badge-bg:#fffaf0;--l-badge-ink:#8b6a1d;--l-badge-line:#d9b85b;
  --l-link-bg:#f6f9fd;--l-link-line:#b6c6da;--l-link-ink:#5f7088;--l-link-strong:#0f3166;--l-page:#eef3f9;
}

[data-theme="elite"]{
  --t-bg:#090d16;--t-bg-img:radial-gradient(900px 520px at 88% -12%,rgba(124,92,255,.17),transparent 60%),radial-gradient(700px 420px at -6% 108%,rgba(34,211,238,.10),transparent 55%);
  --t-surface:#0f1522;--t-surface-2:#131b2c;--t-hover:#17213a;
  --t-text:#e4eaf6;--t-heading:#f5f7ff;--t-muted:#8f9bb5;--t-border:#1d2740;--t-border-2:#2a3556;--t-input-bg:#0c1220;
  --t-accent:#7c5cff;--t-accent-2:#22d3ee;--t-link:#8b9cff;--t-icon:#22d3ee;--t-accent-soft:rgba(124,92,255,.16);
  --t-btn:linear-gradient(135deg,#7c5cff,#4f7cff 58%,#22d3ee);--t-btn-ink:#fff;--t-btn-glow:0 10px 26px -6px rgba(124,92,255,.55);
  --t-radius:16px;--t-radius-sm:11px;--t-shadow:0 0 0 1px rgba(255,255,255,.02),0 16px 36px -20px rgba(0,0,0,.8);--t-shadow-lg:0 30px 70px -28px rgba(0,0,0,.9);
  --t-font:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;--t-display:"Space Grotesk",Inter,system-ui,sans-serif;
  --t-side:linear-gradient(180deg,#070a12 0%,#0a0f1c 100%);--t-side-solid:#080c15;--t-side-text:#aeb9d3;--t-side-strong:#fff;--t-side-muted:#7d89a6;--t-side-caption:#5f6c8c;
  --t-side-border:rgba(124,92,255,.15);--t-side-hover:rgba(124,92,255,.12);--t-side-active:linear-gradient(90deg,rgba(124,92,255,.95),rgba(34,211,238,.78));--t-side-active-text:#fff;--t-side-active-shadow:0 10px 26px -8px rgba(124,92,255,.6);
  --t-brand-mark:linear-gradient(135deg,#7c5cff,#22d3ee);--t-brand-ink:#fff;--t-brand-accent:#22d3ee;
  --t-top:rgba(9,13,22,.78);--t-top-border:#1d2740;--t-top-shadow:0 1px 0 rgba(124,92,255,.10);
  --t-hero:linear-gradient(120deg,#1a1347 0%,#10265a 55%,#0b3b63 100%);--t-hero-text:#fff;--t-hero-sub:#c3d0ee;--t-eyebrow:#8be9fd;--t-ring:rgba(34,211,238,.24);
  --t-hair:linear-gradient(90deg,#7c5cff,#22d3ee,#7c5cff);--t-footer:linear-gradient(135deg,#0c1220,#151c36);
  --c-blue:#60a5fa;--c-green:#34d399;--c-orange:#fbbf24;--c-purple:#a78bfa;--c-red:#fb7185;--c-cyan:#22d3ee;--c-green-soft:rgba(52,211,153,.10);
  --l-brand-bg:radial-gradient(circle at 12% 20%,rgba(124,92,255,.46),transparent 30%),radial-gradient(circle at 82% 88%,rgba(34,211,238,.24),transparent 28%),linear-gradient(145deg,#070a14 0%,#140d38 55%,#0b2a4d 100%);
  --l-ribbon:linear-gradient(180deg,transparent 0 13%,rgba(34,211,238,.95) 13.2% 17%,rgba(255,255,255,.95) 17.2% 21%,rgba(124,92,255,.95) 21.2% 100%);
  --l-hl:#8be9fd;--l-line:linear-gradient(90deg,#7c5cff,transparent);--l-form-bg:linear-gradient(180deg,#0b101c,#090d16);
  --l-stripe:linear-gradient(135deg,transparent 0 48%,rgba(34,211,238,.95) 48.2% 51%,rgba(124,92,255,.98) 51.2% 57%,transparent 57.2%);
  --l-card-bg:rgba(15,21,34,.92);--l-card-border:#1d2740;--l-card-shadow:0 30px 80px rgba(0,0,0,.6);
  --l-logo-bg:#fff;--l-title:#f5f7ff;--l-title-b:#22d3ee;--l-sub:#8f9bb5;--l-label:#c8d1e6;--l-input-bg:#0c1220;--l-input-border:#2a3556;--l-placeholder:#5f6c8c;
  --l-quote-bg:#101829;--l-quote-ink:#9eabc8;--l-foot:#6f7c9a;--l-foot-strong:#c8d1e6;--l-badge-bg:#101829;--l-badge-ink:#22d3ee;--l-badge-line:#2a3556;
  --l-link-bg:#101829;--l-link-line:#2a3556;--l-link-ink:#8f9bb5;--l-link-strong:#c8d1e6;--l-page:#090d16;
}

[data-theme="premium"]{
  --t-bg:#f6f3ec;--t-bg-img:none;--t-surface:#fffefb;--t-surface-2:#faf6ea;--t-hover:#f7f1e2;
  --t-text:#1b2438;--t-heading:#0c2147;--t-muted:#6d7589;--t-border:#e8e1d0;--t-border-2:#dcd2b8;--t-input-bg:#fffdf8;
  --t-accent:#0c2a57;--t-accent-2:#b8912f;--t-link:#0f3a7a;--t-icon:#0c2a57;--t-accent-soft:rgba(12,42,87,.08);
  --t-btn:linear-gradient(135deg,#0c2a57,#15407a);--t-btn-ink:#f3dfa0;--t-btn-glow:0 10px 22px -10px rgba(12,42,87,.6);
  --t-radius:14px;--t-radius-sm:10px;--t-shadow:0 12px 32px -20px rgba(12,33,71,.38);--t-shadow-lg:0 26px 56px -28px rgba(12,33,71,.5);
  --t-font:"Instrument Sans",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;--t-display:Newsreader,Georgia,"Times New Roman",serif;
  --t-side:linear-gradient(180deg,#051430 0%,#0a2349 70%,#061a38 100%);--t-side-solid:#061a38;--t-side-text:#c9d5ea;--t-side-strong:#fff;--t-side-muted:#9fb1cf;--t-side-caption:#d4af37;
  --t-side-border:rgba(212,175,55,.18);--t-side-hover:rgba(212,175,55,.10);--t-side-active:linear-gradient(90deg,rgba(212,175,55,.26),rgba(212,175,55,.04));--t-side-active-text:#f3dfa0;--t-side-active-shadow:inset 3px 0 0 #d4af37;
  --t-brand-mark:linear-gradient(135deg,#d4af37,#f1dc94);--t-brand-ink:#0c2147;--t-brand-accent:#ecd989;
  --t-top:#fffefb;--t-top-border:#e8e1d0;--t-top-shadow:0 1px 0 rgba(212,175,55,.35);
  --t-hero:linear-gradient(130deg,#061a38 0%,#0b2a57 60%,#15508a 125%);--t-hero-text:#fff;--t-hero-sub:#c8d6ec;--t-eyebrow:#ecd989;--t-ring:rgba(212,175,55,.42);
  --t-hair:linear-gradient(90deg,#8c7324,#d4af37,#ecd989,#d4af37,#8c7324);--t-footer:linear-gradient(135deg,#061a38,#0c2a57);
  --c-blue:#1f5fae;--c-green:#187a50;--c-orange:#b8780a;--c-purple:#6a4bb0;--c-red:#b3354f;--c-cyan:#1b7f95;--c-green-soft:rgba(24,122,80,.09);
  --l-brand-bg:radial-gradient(circle at 14% 18%,rgba(212,175,55,.20),transparent 28%),radial-gradient(circle at 82% 88%,rgba(21,80,138,.55),transparent 34%),linear-gradient(145deg,#041229 0%,#0a2349 56%,#0f3466 100%);
  --l-ribbon:linear-gradient(180deg,transparent 0 13%,rgba(212,175,55,.98) 13.2% 16%,rgba(255,255,255,.96) 16.2% 18%,rgba(236,217,137,.95) 18.2% 21%,rgba(12,42,87,.9) 21.2% 100%);
  --l-hl:#ecd989;--l-line:linear-gradient(90deg,#d4af37,transparent);--l-form-bg:linear-gradient(180deg,#fbf9f3,#f3efe4);
  --l-stripe:linear-gradient(135deg,transparent 0 48%,rgba(212,175,55,.95) 48.2% 50%,rgba(255,255,255,.9) 50.2% 51.4%,rgba(12,42,87,.98) 51.6% 57%,transparent 57.2%);
  --l-card-bg:rgba(255,254,251,.97);--l-card-border:#e8e1d0;--l-card-shadow:0 30px 70px -28px rgba(12,33,71,.4);
  --l-logo-bg:#fff;--l-title:#0c2147;--l-title-b:#b8912f;--l-sub:#6d7589;--l-label:#1b2438;--l-input-bg:#fffdf8;--l-input-border:#dcd2b8;--l-placeholder:#a39f90;
  --l-quote-bg:#faf6ea;--l-quote-ink:#6b6247;--l-foot:#857f6c;--l-foot-strong:#3d3a2c;--l-badge-bg:#fffaf0;--l-badge-ink:#8b6a1d;--l-badge-line:#d4af37;
  --l-link-bg:#faf6ea;--l-link-line:#d9cfb3;--l-link-ink:#6d7589;--l-link-strong:#0c2147;--l-page:#f1ede2;
}

[data-theme="luxury"]{
  --t-bg:#0b0a09;--t-bg-img:radial-gradient(820px 440px at 92% -10%,rgba(201,169,97,.11),transparent 60%),radial-gradient(640px 400px at -6% 110%,rgba(130,62,40,.12),transparent 60%);
  --t-surface:#14120f;--t-surface-2:#191611;--t-hover:#1e1a13;
  --t-text:#e9e1cf;--t-heading:#f4ead2;--t-muted:#a1977f;--t-border:rgba(201,169,97,.17);--t-border-2:rgba(201,169,97,.30);--t-input-bg:#0f0d0a;
  --t-accent:#c9a961;--t-accent-2:#f1dca0;--t-link:#e2c783;--t-icon:#ecd28f;--t-accent-soft:rgba(201,169,97,.14);
  --t-btn:linear-gradient(135deg,#a98a45,#ecd28f 46%,#c9a961 72%,#9a7c3b);--t-btn-ink:#1a1406;--t-btn-glow:0 12px 28px -10px rgba(201,169,97,.55);
  --t-radius:8px;--t-radius-sm:6px;--t-shadow:0 0 0 1px rgba(201,169,97,.05),0 22px 46px -26px #000;--t-shadow-lg:0 34px 80px -30px #000;
  --t-font:Manrope,Inter,system-ui,-apple-system,"Segoe UI",sans-serif;--t-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --t-side:linear-gradient(180deg,#080706 0%,#0e0c09 100%);--t-side-solid:#090806;--t-side-text:#b6ad97;--t-side-strong:#f4ead2;--t-side-muted:#8b8370;--t-side-caption:#c9a961;
  --t-side-border:rgba(201,169,97,.17);--t-side-hover:rgba(201,169,97,.08);--t-side-active:linear-gradient(90deg,rgba(201,169,97,.22),rgba(201,169,97,.03));--t-side-active-text:#f1dca0;--t-side-active-shadow:inset 2px 0 0 #c9a961;
  --t-brand-mark:linear-gradient(135deg,#a98a45,#f1dca0);--t-brand-ink:#1a1406;--t-brand-accent:#f1dca0;
  --t-top:rgba(11,10,9,.84);--t-top-border:rgba(201,169,97,.18);--t-top-shadow:0 1px 0 rgba(201,169,97,.06);
  --t-hero:linear-gradient(125deg,#1a140a 0%,#0e0b07 56%,#1e1509 100%);--t-hero-text:#f4ead2;--t-hero-sub:#cfc3a6;--t-eyebrow:#e2c783;--t-ring:rgba(201,169,97,.34);
  --t-hair:linear-gradient(90deg,transparent,#c9a961,#f1dca0,#c9a961,transparent);--t-footer:linear-gradient(135deg,#0c0a07,#19130a);
  --c-blue:#86aef0;--c-green:#6fcf97;--c-orange:#e7b04a;--c-purple:#b79be0;--c-red:#e5788a;--c-cyan:#6cc5d1;--c-green-soft:rgba(111,207,151,.10);
  --l-brand-bg:radial-gradient(circle at 14% 18%,rgba(201,169,97,.20),transparent 30%),radial-gradient(circle at 84% 90%,rgba(130,62,40,.28),transparent 32%),linear-gradient(145deg,#070605 0%,#14100a 56%,#1d150a 100%);
  --l-ribbon:linear-gradient(180deg,transparent 0 13%,rgba(201,169,97,.98) 13.2% 14.4%,transparent 14.6% 17%,rgba(241,220,160,.96) 17.2% 18.2%,transparent 18.4% 21%,rgba(201,169,97,.13) 21.2% 100%);
  --l-hl:#f1dca0;--l-line:linear-gradient(90deg,#c9a961,transparent);--l-form-bg:linear-gradient(180deg,#0e0c09,#0a0907);
  --l-stripe:linear-gradient(135deg,transparent 0 48%,rgba(201,169,97,.95) 48.2% 49.4%,transparent 49.6% 52%,rgba(201,169,97,.4) 52.2% 53%,transparent 53.2%);
  --l-card-bg:rgba(20,18,15,.94);--l-card-border:rgba(201,169,97,.26);--l-card-shadow:0 34px 90px rgba(0,0,0,.7);
  --l-logo-bg:#fff;--l-title:#f4ead2;--l-title-b:#c9a961;--l-sub:#a1977f;--l-label:#d8cdb2;--l-input-bg:#0f0d0a;--l-input-border:rgba(201,169,97,.30);--l-placeholder:#6b6350;
  --l-quote-bg:#17140f;--l-quote-ink:#b3a98f;--l-foot:#8b8370;--l-foot-strong:#d8cdb2;--l-badge-bg:#17140f;--l-badge-ink:#e2c783;--l-badge-line:rgba(201,169,97,.4);
  --l-link-bg:#14120f;--l-link-line:rgba(201,169,97,.32);--l-link-ink:#a1977f;--l-link-strong:#ecd28f;--l-page:#0b0a09;
}

/* ---------- 2. DASAR ---------- */
html[data-theme]{--bs-body-bg:var(--t-bg);--bs-body-color:var(--t-text);--bs-border-color:var(--t-border);--bs-link-color:var(--t-link);--bs-link-hover-color:var(--t-accent-2);--bs-secondary-color:var(--t-muted);--bs-heading-color:var(--t-heading);color-scheme:light}
html[data-theme="elite"],html[data-theme="luxury"]{color-scheme:dark}
html[data-theme] body{background-color:var(--t-bg);background-image:var(--t-bg-img);background-attachment:fixed;color:var(--t-text);font-family:var(--t-font)}
html[data-theme] :is(.page-title,.panel-title,.main-area .hero h2,.ep-title,.ep-hero h2,.school-name,.brand-title,.stat-card .value,.pd-hero h1,.pd-tile h3,.bkd-hero h2,.bkd-title,.pa-hero h2,.kp-top h1,.kp-tile h3,.plr-hero h3,.login-brand h2,.welcome h3,.brand-school,.brand-side .hero h1){font-family:var(--t-display)}
html[data-theme="luxury"] :is(.page-title,.ep-title){font-size:30px;font-weight:600;letter-spacing:.01em}
html[data-theme="luxury"] :is(.panel-title,.bkd-title){font-size:18px;font-weight:600}
html[data-theme="luxury"] :is(.main-area .hero h2,.ep-hero h2,.bkd-hero h2,.pd-hero h1,.pa-hero h2){font-weight:600;letter-spacing:.005em}
html[data-theme="luxury"] .ep-pro .ep-hero h2{font-size:36px}
html[data-theme="luxury"] .stat-card .value{font-size:32px;font-weight:600}
html[data-theme="premium"] .ep-pro .ep-hero h2{font-weight:600;font-size:33px}
html[data-theme="premium"] .stat-card .value,html[data-theme="premium"] .page-title,html[data-theme="premium"] .ep-title{font-weight:600}
html[data-theme="premium"] .stat-card .value{font-size:29px}
html[data-theme="elite"] :is(.page-title,.ep-title,.stat-card .value,.panel-title){letter-spacing:-.01em}
html[data-theme] a:not([class]){color:var(--t-link)}

/* ---------- 3. KERANGKA: SIDEBAR ---------- */
html[data-theme] .sidebar{background:var(--t-side);color:var(--t-side-text);border-right:1px solid var(--t-side-border);box-shadow:none}
html[data-theme] .brand,html[data-theme] .sidebar-foot{border-color:var(--t-side-border)}
html[data-theme] .brand-mark{background:var(--t-brand-mark);color:var(--t-brand-ink);box-shadow:var(--t-btn-glow)}
html[data-theme] .brand-title,html[data-theme] .profile strong{color:var(--t-side-strong)}
html[data-theme] .brand-title span{color:var(--t-brand-accent)}
html[data-theme] .brand-sub,html[data-theme] .profile small,html[data-theme] .sidebar-foot{color:var(--t-side-muted)}
html[data-theme] .nav-caption{color:var(--t-side-caption)}
html[data-theme] .avatar{background:var(--t-brand-mark);color:var(--t-brand-ink);border-color:var(--t-side-border)}
html[data-theme] .side-nav a{color:var(--t-side-text);border-radius:var(--t-radius-sm)}
html[data-theme] .side-nav a:hover{background:var(--t-side-hover);color:var(--t-side-strong)}
html[data-theme] .side-nav a.active{background:var(--t-side-active);color:var(--t-side-active-text);box-shadow:var(--t-side-active-shadow)}
html[data-theme] .sidebar-foot strong{color:var(--t-brand-accent)!important}
html[data-theme="luxury"] .nav-caption,html[data-theme="premium"] .nav-caption{letter-spacing:.22em}
html[data-theme="luxury"] .side-nav a,html[data-theme="premium"] .side-nav a{font-weight:600;letter-spacing:.01em}
html[data-theme] .mobile-nav .offcanvas{background:var(--t-side-solid);color:var(--t-side-strong)}
html[data-theme] .mobile-nav a{color:var(--t-side-text)}


/* ---------- 3b. KELOMPOK MENU ---------- */
html[data-theme] .nav-gh{color:var(--t-side-caption)}
html[data-theme] .nav-gh:hover{color:var(--t-side-strong)}
html[data-theme] .nav-group[data-has-active]>.nav-gh{color:var(--t-brand-accent)}
html[data-theme="premium"] .nav-gh,html[data-theme="luxury"] .nav-gh{letter-spacing:.2em}
html[data-theme="luxury"] .nav-group+.nav-group,html[data-theme="premium"] .nav-group+.nav-group{border-top:1px solid var(--t-side-border);margin-top:6px;padding-top:2px}

/* ---------- 4. KERANGKA: TOPBAR ---------- */
html[data-theme] .topbar{background:var(--t-top);border-bottom:1px solid var(--t-top-border);box-shadow:var(--t-top-shadow);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html[data-theme] .school-name,html[data-theme] .user-menu strong{color:var(--t-heading)!important}
html[data-theme] .school-address,html[data-theme] .top-clock .date,html[data-theme] .top-clock small,html[data-theme] .user-menu small{color:var(--t-muted)!important}
html[data-theme] .top-clock{border-left-color:var(--t-border)}
html[data-theme] .top-clock .time{color:var(--t-heading)}
html[data-theme] .school-logo{background:var(--t-surface-2);border-color:var(--t-border);color:var(--t-icon)}
html[data-theme] .search-box input{background:var(--t-input-bg);border-color:var(--t-border-2);color:var(--t-text)}
html[data-theme] .search-box select{background:transparent!important;color:var(--t-muted)!important}
html[data-theme] .search-box i{color:var(--t-muted)}
html[data-theme] .icon-btn{background:var(--t-surface);border-color:var(--t-border);color:var(--t-muted);border-radius:var(--t-radius-sm)}
html[data-theme] .icon-btn:hover{border-color:var(--t-accent);color:var(--t-heading)}
html[data-theme] .user-avatar{background:var(--t-accent-soft);color:var(--t-icon)}
html[data-theme] .user-menu .bi-chevron-down{color:var(--t-muted)!important}

/* ---------- 5. KONTEN: KARTU, PANEL, HERO ---------- */
html[data-theme] :is(.panel,.stat-card,.quick-item,.footer-bar,.ep-search,.card){background:var(--t-surface)!important;border:1px solid var(--t-border)!important;border-radius:var(--t-radius)!important;box-shadow:var(--t-shadow)!important;color:var(--t-text)}
html[data-theme] .ep-pro .stat-card,html[data-theme] .ep-pro .panel{background:var(--t-surface)!important;border-color:var(--t-border)!important;box-shadow:var(--t-shadow)!important;border-radius:var(--t-radius)!important}
html[data-theme] .ep-pro .quick-item{border-color:var(--t-border)!important;border-radius:var(--t-radius-sm)!important}
html[data-theme] .panel-head{border-bottom-color:var(--t-border)!important}
html[data-theme] .panel-title,html[data-theme] .ep-title,html[data-theme] .page-title,html[data-theme] .ep-search-title{color:var(--t-heading)}
html[data-theme] .panel-sub,html[data-theme] .page-sub,html[data-theme] .ep-sub,html[data-theme] .ep-search-sub,html[data-theme] .stat-card .label,html[data-theme] .stat-card .meta,html[data-theme] .footer-bar,html[data-theme] .quick-item small,html[data-theme] .empty{color:var(--t-muted)}
html[data-theme] .stat-card .value,html[data-theme] .footer-bar strong{color:var(--t-heading)}
html[data-theme] .quick-item{color:var(--t-text)}
html[data-theme] .quick-item:hover{border-color:var(--t-accent)!important;background:var(--t-hover)!important}
html[data-theme] .quick-icon{background:var(--t-accent-soft)!important;color:var(--t-icon)!important;border-radius:var(--t-radius-sm)}
html[data-theme] .stat-card.blue .stat-icon{background:color-mix(in srgb,var(--c-blue) 15%,transparent);color:var(--c-blue)}
html[data-theme] .stat-card.green .stat-icon{background:color-mix(in srgb,var(--c-green) 15%,transparent);color:var(--c-green)}
html[data-theme] .stat-card.orange .stat-icon{background:color-mix(in srgb,var(--c-orange) 15%,transparent);color:var(--c-orange)}
html[data-theme] .stat-card.purple .stat-icon{background:color-mix(in srgb,var(--c-purple) 15%,transparent);color:var(--c-purple)}
html[data-theme] .stat-card.red .stat-icon{background:color-mix(in srgb,var(--c-red) 15%,transparent);color:var(--c-red)}
html[data-theme] .stat-card.cyan .stat-icon{background:color-mix(in srgb,var(--c-cyan) 15%,transparent);color:var(--c-cyan)}
html[data-theme] .stat-icon{border-radius:var(--t-radius-sm)}
html[data-theme] .pro-status{color:var(--c-green)!important}

html[data-theme] .main-area .hero,html[data-theme] .ep-pro .ep-hero{background:var(--t-hero);color:var(--t-hero-text);border-radius:calc(var(--t-radius) + 4px);box-shadow:var(--t-shadow-lg)}
html[data-theme] .main-area .hero:after,html[data-theme] .ep-pro .ep-hero:after{border-color:var(--t-ring);box-shadow:0 0 0 38px color-mix(in srgb,var(--t-ring) 22%,transparent),0 0 0 76px color-mix(in srgb,var(--t-ring) 12%,transparent)}
html[data-theme] .ep-pro .ep-hero{position:relative}
html[data-theme] .ep-pro .ep-hero:before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--t-hair)}
html[data-theme] :is(.main-area .hero p,.ep-pro .ep-hero p){color:var(--t-hero-sub)}
html[data-theme] .ep-pro .ep-eyebrow{color:var(--t-eyebrow)}
html[data-theme] .ep-pro .ep-quote,html[data-theme] .hero-quote{color:var(--t-hero-sub)}
html[data-theme] :is(.main-area .hero h2,.ep-pro .ep-hero h2){color:var(--t-hero-text)}

/* ---------- 6. TOMBOL & FORM ---------- */
html[data-theme] :is(.btn-elite,.ep-pro .ep-scan,.btn-primary){background:var(--t-btn)!important;border:0!important;color:var(--t-btn-ink)!important;box-shadow:var(--t-btn-glow);border-radius:var(--t-radius-sm)}
html[data-theme] :is(.btn-elite,.ep-pro .ep-scan,.btn-primary):hover{filter:brightness(1.1);color:var(--t-btn-ink)!important}
html[data-theme] .btn-outline-primary{color:var(--t-link);border-color:var(--t-border-2);background:transparent;--bs-btn-color:var(--t-link);--bs-btn-border-color:var(--t-border-2);--bs-btn-hover-bg:var(--t-accent-soft);--bs-btn-hover-color:var(--t-heading);--bs-btn-hover-border-color:var(--t-accent);--bs-btn-active-bg:var(--t-accent-soft);--bs-btn-active-color:var(--t-heading);--bs-btn-active-border-color:var(--t-accent);border-radius:var(--t-radius-sm)}
html[data-theme] :is(.btn-light,.btn-outline-secondary,.btn-outline-dark){--bs-btn-bg:var(--t-surface-2);--bs-btn-color:var(--t-text);--bs-btn-border-color:var(--t-border-2);--bs-btn-hover-bg:var(--t-hover);--bs-btn-hover-color:var(--t-heading);--bs-btn-hover-border-color:var(--t-accent);border-radius:var(--t-radius-sm)}
html[data-theme] :is(.form-control,.form-select){background-color:var(--t-input-bg);border-color:var(--t-border-2);color:var(--t-text);border-radius:var(--t-radius-sm)}
html[data-theme] :is(.form-control,.form-select):focus{border-color:var(--t-accent);box-shadow:0 0 0 .22rem var(--t-accent-soft);background-color:var(--t-input-bg);color:var(--t-text)}
html[data-theme] .form-control::placeholder{color:var(--t-muted);opacity:.7}
html[data-theme] .form-label,html[data-theme] label{color:var(--t-text)}
html[data-theme="elite"] .form-select,html[data-theme="luxury"] .form-select{--bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a1a9bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}
html[data-theme] .search-box select option,html[data-theme] .form-select option{background:var(--t-surface);color:var(--t-text)}
html[data-theme] .main-area .alert{border-radius:var(--t-radius-sm)}
html[data-theme="elite"] .main-area .alert-success,html[data-theme="luxury"] .main-area .alert-success{background:color-mix(in srgb,var(--c-green) 14%,transparent);color:var(--c-green)}
html[data-theme="elite"] .main-area .alert-danger,html[data-theme="luxury"] .main-area .alert-danger{background:color-mix(in srgb,var(--c-red) 14%,transparent);color:var(--c-red)}
html[data-theme="elite"] .main-area .alert-warning,html[data-theme="luxury"] .main-area .alert-warning{background:color-mix(in srgb,var(--c-orange) 14%,transparent);color:var(--c-orange)}
html[data-theme] :is(.dropdown-menu,.modal-content,.offcanvas:not(.mobile-nav .offcanvas),.list-group-item){background:var(--t-surface);color:var(--t-text);border-color:var(--t-border)}

/* ---------- 7. TABEL & STATUS ---------- */
html[data-theme] .table{--bs-table-bg:transparent;--bs-table-color:var(--t-text);--bs-table-border-color:var(--t-border);--bs-table-hover-bg:var(--t-hover);--bs-table-hover-color:var(--t-text);--bs-table-striped-bg:var(--t-surface-2);--bs-table-striped-color:var(--t-text)}
html[data-theme] .table-elite thead th,html[data-theme] :is(.bkd-table,.pa-table,.plr-table) th{background:var(--t-surface-2);color:var(--t-muted);border-color:var(--t-border)}
html[data-theme] .table-elite tbody td{border-color:var(--t-border);color:var(--t-text)}
html[data-theme] .student-mini{background:var(--t-accent-soft);color:var(--t-icon)}
html[data-theme] .status-hadir{background:color-mix(in srgb,var(--c-green) 16%,transparent);color:var(--c-green)}
html[data-theme] .status-late{background:color-mix(in srgb,var(--c-orange) 16%,transparent);color:var(--c-orange)}
html[data-theme] .status-izin{background:color-mix(in srgb,var(--c-purple) 16%,transparent);color:var(--c-purple)}
html[data-theme] .status-alpha{background:color-mix(in srgb,var(--c-red) 16%,transparent);color:var(--c-red)}
html[data-theme] .progress-elite{background:var(--t-surface-2)}
html[data-theme] .ep-footer{background:var(--t-footer);border-top:1px solid var(--t-border);color:var(--t-side-text)}
html[data-theme] .ep-footer::before{content:"";display:block;height:2px;margin:-22px -28px 20px;background:var(--t-hair);border-radius:18px 18px 0 0}

/* ---------- 8. HALAMAN KHUSUS (dashboard BK/orang tua, presensi, persetujuan, kartu) ---------- */
html[data-theme] :is(.pd-hero,.bkd-hero,.pa-hero,.plr-hero,.kp-top){background:var(--t-hero);color:var(--t-hero-text);box-shadow:var(--t-shadow-lg)}
html[data-theme] :is(.pd-hero,.bkd-hero)::before,html[data-theme] .kp-top::before{border-color:var(--t-ring);box-shadow:0 0 0 14px color-mix(in srgb,var(--t-ring) 18%,transparent),0 0 0 30px color-mix(in srgb,var(--t-ring) 10%,transparent),0 0 0 48px color-mix(in srgb,var(--t-ring) 6%,transparent)}
html[data-theme] :is(.pd-hero,.bkd-hero,.pa-hero)::after{background:var(--t-hair)}
html[data-theme] :is(.pd-kicker,.bkd-kick,.pa-hero .kick){color:var(--t-eyebrow)}
html[data-theme] .bkd-hero p,html[data-theme] .kp-top p{color:var(--t-hero-sub)}
html[data-theme] :is(.bkd-cta){background:var(--t-btn);color:var(--t-btn-ink)}
html[data-theme] :is(.pd-tile,.bkd-sec,.bkd-kpi,.pa-card,.pa-sum,.plr-card,.kp-stat,.kp-filter,.kp-tile){background:var(--t-surface);border-color:var(--t-border);box-shadow:var(--t-shadow);border-radius:var(--t-radius);color:var(--t-text)}
html[data-theme] :is(.pd-tile h3,.bkd-title,.bkd-quick b,.pa-sum b,.bkd-kpi b,.kp-stat b,.kp-tile h3){color:var(--t-heading)}
html[data-theme] :is(.pd-tile p,.bkd-sub,.bkd-quick small,.pa-sum span,.bkd-kpi span,.kp-stat span,.kp-tile p,.bkd-empty){color:var(--t-muted)}
html[data-theme] :is(.bkd-head){border-bottom-color:var(--t-border)}
html[data-theme] .pd-go{color:var(--t-link)}
html[data-theme] .pd-ic,html[data-theme] .bkd-quick .ic{background:var(--t-accent-soft);color:var(--t-icon)}
html[data-theme] .pd-tile:hover{border-color:var(--t-accent);box-shadow:var(--t-shadow-lg)}
html[data-theme] .pd-tile:hover .pd-ic{background:var(--t-accent);color:var(--t-btn-ink)}
html[data-theme] .bkd-quick:hover{background:var(--t-hover);border-color:var(--t-border-2)}
html[data-theme] .pd-alert{background:color-mix(in srgb,var(--c-orange) 13%,var(--t-surface));border-color:color-mix(in srgb,var(--c-orange) 40%,transparent);color:var(--t-text)}
html[data-theme] .pd-alert a{color:var(--t-link)}
html[data-theme] :is(.pa-chip){background:var(--t-surface-2);border-color:var(--t-border-2);color:var(--t-text)}
html[data-theme] .kp-seg a[aria-current="true"]{background:var(--t-surface);color:var(--t-heading)}
html[data-theme] .kp-btn-gold{background:var(--t-btn);color:var(--t-btn-ink)}
html[data-theme] .plr-src,html[data-theme] .bkd-src{background:var(--t-surface-2);color:var(--t-muted)}
html[data-theme] .kp-note{background:color-mix(in srgb,var(--c-orange) 12%,var(--t-surface));border-color:color-mix(in srgb,var(--c-orange) 38%,transparent);color:var(--t-text)}

/* ikon KPI dan lencana status mengikuti warna tema (aman untuk tema gelap) */
html[data-theme] .bkd-kpi.k-blue .ic{background:color-mix(in srgb,var(--c-blue) 15%,transparent);color:var(--c-blue)}
html[data-theme] .bkd-kpi.k-green .ic{background:color-mix(in srgb,var(--c-green) 15%,transparent);color:var(--c-green)}
html[data-theme] .bkd-kpi.k-amber .ic{background:color-mix(in srgb,var(--c-orange) 15%,transparent);color:var(--c-orange)}
html[data-theme] .bkd-kpi.k-rose .ic{background:color-mix(in srgb,var(--c-purple) 15%,transparent);color:var(--c-purple)}
html[data-theme] .bkd-kpi.k-red .ic{background:color-mix(in srgb,var(--c-red) 15%,transparent);color:var(--c-red)}
html[data-theme] .bkd-kpi.k-gray .ic{background:var(--t-surface-2);color:var(--t-muted)}
html[data-theme] :is(.bkd-hadir,.bkd-pulang,.plr-approved){background:color-mix(in srgb,var(--c-green) 16%,transparent);color:var(--c-green)}
html[data-theme] :is(.bkd-terlambat,.plr-pending){background:color-mix(in srgb,var(--c-orange) 16%,transparent);color:var(--c-orange)}
html[data-theme] :is(.bkd-izin,.bkd-dispensasi,.plr-izin){background:color-mix(in srgb,var(--c-blue) 16%,transparent);color:var(--c-blue)}
html[data-theme] :is(.bkd-sakit,.plr-sakit,.bkd-point,.plr-dispensasi){background:color-mix(in srgb,var(--c-purple) 16%,transparent);color:var(--c-purple)}
html[data-theme] :is(.bkd-alpa,.plr-rejected){background:color-mix(in srgb,var(--c-red) 16%,transparent);color:var(--c-red)}
html[data-theme] :is(.bkd-belum){background:var(--t-surface-2);color:var(--t-muted)}
html[data-theme] .plr-pulang_awal{background:color-mix(in srgb,var(--c-cyan) 16%,transparent);color:var(--c-cyan)}
html[data-theme] .bkd-late{color:var(--c-red)}

/* ---------- 9. ORNAMEN PER TEMA ---------- */
/* ELITE: garis cahaya di atas kartu */
html[data-theme="elite"] :is(.stat-card,.panel){position:relative}
html[data-theme="elite"] .stat-card::before,html[data-theme="elite"] .panel::before{content:"";position:absolute;left:14px;right:14px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(124,92,255,.7),rgba(34,211,238,.7),transparent);pointer-events:none}
html[data-theme="elite"] .topbar{box-shadow:0 1px 0 rgba(124,92,255,.14),0 14px 30px -22px rgba(124,92,255,.5)}
html[data-theme="elite"] .side-nav a.active i{filter:drop-shadow(0 0 6px rgba(255,255,255,.55))}
/* PREMIUM: garis emas halus */
html[data-theme="premium"] :is(.panel,.stat-card){border-top:2px solid rgba(212,175,55,.55)!important}
html[data-theme="premium"] .panel-title{font-size:16px}
html[data-theme="premium"] .stat-card .stat-icon{box-shadow:inset 0 0 0 1px rgba(212,175,55,.35)}
/* LUXURY: bingkai tipis emas dan huruf kapital berjarak */
html[data-theme="luxury"] :is(.stat-card,.panel,.card,.quick-item){box-shadow:var(--t-shadow),inset 0 1px 0 rgba(255,255,255,.035)!important}
html[data-theme="luxury"] :is(.stat-card .label,.table-elite thead th,.nav-caption,.panel-sub,.footer-bar){letter-spacing:.08em}
html[data-theme="luxury"] :is(.stat-card .label){text-transform:uppercase;font-size:10px}
html[data-theme="luxury"] .panel-head{border-bottom-style:solid;background:linear-gradient(180deg,rgba(201,169,97,.05),transparent)}
html[data-theme="luxury"] .btn-elite,html[data-theme="luxury"] .ep-scan,html[data-theme="luxury"] .btn-primary{font-weight:800;letter-spacing:.03em}
html[data-theme="luxury"] .hero:after,html[data-theme="luxury"] .ep-hero:after{border-width:1px}

/* ---------- 10. LOGIN ---------- */
html[data-theme] body.login-body,html[data-theme] .login-page{background:var(--l-page)}
html[data-theme] .login-page .brand-side{background:var(--l-brand-bg)}
html[data-theme] .login-page .gold-ribbon{background:var(--l-ribbon)}
html[data-theme] .login-page .hero h1 span,html[data-theme] .login-page .feature .icon{color:var(--l-hl)}
html[data-theme] .login-page .hero .line{background:var(--l-line)}
html[data-theme] .login-page .form-side{background:var(--l-form-bg)}
html[data-theme] .login-page .form-side:before{background:var(--l-stripe)}
html[data-theme] .login-page .login-card{background:var(--l-card-bg);border-color:var(--l-card-border);box-shadow:var(--l-card-shadow)}
html[data-theme] .login-page .login-logo{background:var(--l-logo-bg);border-color:var(--l-card-border)}
html[data-theme] .login-page .login-brand h2{color:var(--l-title)}
html[data-theme] .login-page .login-brand h2 b{color:var(--l-title-b)}
html[data-theme] .login-page .login-brand .sub{color:var(--l-sub)}
html[data-theme] .login-page .welcome h3{color:var(--l-title)}
html[data-theme] .login-page .welcome p{color:var(--l-sub)}
html[data-theme] .login-page .field label{color:var(--l-label)}
html[data-theme] .login-page .input{background:var(--l-input-bg);border-color:var(--l-input-border);color:var(--t-text)}
html[data-theme] .login-page .input::placeholder{color:var(--l-placeholder)}
html[data-theme] .login-page .input:focus{background:var(--l-input-bg);border-color:var(--t-accent);box-shadow:0 0 0 4px var(--t-accent-soft)}
html[data-theme] .login-page .toggle-pass{color:var(--t-muted)}
html[data-theme] .login-page .toggle-pass:hover{background:var(--t-hover);color:var(--t-heading)}
html[data-theme] .login-page .login-btn{background:var(--t-btn);color:var(--t-btn-ink);box-shadow:var(--t-btn-glow);border-radius:calc(var(--t-radius-sm) + 3px)}
html[data-theme] .login-page .login-card .alert{background:color-mix(in srgb,var(--c-red) 12%,var(--l-card-bg));border-color:color-mix(in srgb,var(--c-red) 40%,transparent);color:var(--c-red)}
html[data-theme] .login-page .quote{background:var(--l-quote-bg);color:var(--l-quote-ink)}
html[data-theme] .login-page .pro-footer{color:var(--l-foot)}
html[data-theme] .login-page .pro-footer strong{color:var(--l-foot-strong)}
html[data-theme] .login-page .pro-badge{background:var(--l-badge-bg);color:var(--l-badge-ink);border-color:var(--l-badge-line)}
html[data-theme] .login-page .sl-link{background:var(--l-link-bg);border-color:var(--l-link-line);color:var(--l-link-ink)}
html[data-theme] .login-page .sl-link strong{color:var(--l-link-strong)}
html[data-theme] .login-page .sl-link:hover{border-color:var(--t-accent)}
html[data-theme] .login-page .input,html[data-theme] .login-page .login-card{border-radius:var(--t-radius-sm)}
html[data-theme] .login-page .login-card{border-radius:calc(var(--t-radius) + 11px)}
html[data-theme="luxury"] .login-page .login-card{border-radius:14px}
html[data-theme="luxury"] .login-page .brand-side .hero h1{font-weight:600;letter-spacing:-.01em;font-size:clamp(46px,5vw,78px);line-height:.95}
html[data-theme="luxury"] .login-page .login-brand h2{font-weight:600;font-size:34px}
html[data-theme="premium"] .login-page .brand-side .hero h1{font-weight:600;letter-spacing:-.02em}
html[data-theme="premium"] .login-page .login-brand h2{font-weight:600}
html[data-theme="elite"] .login-page .brand-side .hero h1{letter-spacing:-.04em}
html[data-theme="elite"] .login-page .login-card{backdrop-filter:blur(10px)}

/* ---------- 11. PENGALIH TEMA ---------- */
.ep-theme{position:relative}
.ep-theme-btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 12px 0 10px;border:1px solid var(--t-border,#e4ebf4);background:var(--t-surface,#fff);color:var(--t-muted,#5e6f89);border-radius:var(--t-radius-sm,11px);font:600 12px/1 var(--t-font,inherit);cursor:pointer}
.ep-theme-btn:hover{border-color:var(--t-accent,#1769e0);color:var(--t-heading,#102a52)}
.ep-theme-btn:focus-visible,.ep-theme-opt:focus-visible,.ep-theme-dot:focus-visible{outline:2px solid var(--t-accent-2,#2d8cff);outline-offset:2px}
.ep-theme-dots{display:inline-flex}
.ep-theme-dots i{width:12px;height:12px;border-radius:50%;margin-left:-4px;box-shadow:0 0 0 2px var(--t-surface,#fff)}
.ep-theme-dots i:first-child{margin-left:0}
.ep-theme-menu{position:absolute;right:0;top:calc(100% + 8px);width:270px;padding:8px;background:var(--t-surface,#fff);border:1px solid var(--t-border-2,#d6e0ee);border-radius:var(--t-radius,16px);box-shadow:var(--t-shadow-lg,0 20px 46px -22px rgba(17,42,78,.35));z-index:1200;display:none}
.ep-theme.is-open .ep-theme-menu{display:block}
.ep-theme-head{padding:8px 10px 6px;font:700 10px/1 var(--t-font,inherit);letter-spacing:.14em;text-transform:uppercase;color:var(--t-muted,#6f7d95)}
.ep-theme-opt{display:flex;align-items:center;gap:12px;width:100%;padding:9px 10px;border:0;background:transparent;border-radius:var(--t-radius-sm,10px);cursor:pointer;text-align:left;color:var(--t-text,#13233f)}
.ep-theme-opt:hover{background:var(--t-hover,#f1f6fd)}
.ep-theme-opt[aria-pressed="true"]{background:var(--t-accent-soft,rgba(23,105,224,.1))}
.ep-theme-sw{flex:none;width:44px;height:30px;border-radius:9px;overflow:hidden;display:grid;grid-template-columns:34% 1fr;box-shadow:0 0 0 1px rgba(128,128,128,.28)}
.ep-theme-sw i{display:block}
.ep-theme-opt b{display:block;font:700 13px/1.2 var(--t-font,inherit);color:var(--t-heading,#102a52)}
.ep-theme-opt small{display:block;font:500 11px/1.3 var(--t-font,inherit);color:var(--t-muted,#6f7d95)}
.ep-theme-opt .ck{margin-left:auto;color:var(--t-accent-2,#2d8cff);font-size:15px;opacity:0}
.ep-theme-opt[aria-pressed="true"] .ck{opacity:1}
.ep-theme-float{position:absolute;top:20px;right:22px;z-index:6;display:flex;gap:8px;align-items:center;padding:6px 8px 6px 12px;background:var(--l-card-bg,rgba(255,255,255,.9));border:1px solid var(--l-card-border,#dce6f2);border-radius:999px;box-shadow:0 10px 24px -14px rgba(0,0,0,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ep-theme-float span{font:700 10px/1 var(--t-font,inherit);letter-spacing:.12em;text-transform:uppercase;color:var(--l-sub,#4e6788)}
.ep-theme-dot{width:24px;height:24px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;box-shadow:0 0 0 1px rgba(128,128,128,.35);position:relative}
.ep-theme-dot[aria-pressed="true"]{border-color:var(--t-accent-2,#2d8cff);box-shadow:0 0 0 2px var(--l-card-bg,#fff),0 0 0 4px var(--t-accent-2,#2d8cff)}
@media(max-width:575px){.ep-theme-btn span.lbl{display:none}.ep-theme-menu{right:-40px}.ep-theme-float span{display:none}.ep-theme-float{top:12px;right:12px}}

/* ---------- 12. PRATINJAU DI tema.php (memakai token tema pada elemen apa pun) ---------- */
.tp{display:grid;grid-template-columns:30% 1fr;height:178px;border-radius:14px;overflow:hidden;background-color:var(--t-bg);background-image:var(--t-bg-img);box-shadow:0 0 0 1px rgba(128,128,128,.3)}
.tp-side{background:var(--t-side);padding:10px 8px;display:flex;flex-direction:column;gap:6px}
.tp-brand{height:14px;border-radius:5px;background:var(--t-brand-mark);width:70%}
.tp-nav{height:9px;border-radius:4px;background:var(--t-side-hover);opacity:.9}
.tp-nav.on{background:var(--t-side-active);box-shadow:var(--t-side-active-shadow)}
.tp-main{padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.tp-top{height:12px;border-radius:5px;background:var(--t-top);border:1px solid var(--t-top-border)}
.tp-hero{height:46px;border-radius:8px;background:var(--t-hero);position:relative;overflow:hidden}
.tp-hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--t-hair)}
.tp-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tp-card{height:34px;border-radius:7px;background:var(--t-surface);border:1px solid var(--t-border);box-shadow:var(--t-shadow);padding:6px}
.tp-card i{display:block;height:5px;width:55%;border-radius:3px;background:var(--t-muted);opacity:.5}
.tp-card b{display:block;height:8px;width:36%;border-radius:3px;background:var(--t-accent);margin-top:5px}
.tp-btn{height:14px;width:42%;border-radius:6px;background:var(--t-btn)}