/* Palet tema E-REKON — ganti instan via html[data-theme] */

:root,
html[data-theme="toska"]{
    --th-id:toska;
    --th-sidebar:#0b4a56;
    --th-sidebar2:#083e49;
    --th-sidebar3:#062f38;
    --th-accent:#14b8a6;
    --th-accent2:#20c6c0;
    --th-accent3:#0d9488;
    --th-hero:linear-gradient(135deg,#0b4a56,#14b8a6 55%,#7ef0ea);
    --th-btn:linear-gradient(180deg,#20c6c0,#0d9488);
    --th-bg:#e7f7f5;
    --th-bg2:#d8f1ee;
    --th-card:#fff;
    --th-ink:#163a44;
    --th-muted:#5f7d86;
    --th-line:#c5e4df;
    --th-text-on-dark:#d7eeec;
    --th-on-accent:#053845;
    --th-badge:#7ef0ea;
    --th-badge-ink:#053845;
    --th-hover:rgba(126,240,234,.88);
    --th-active:linear-gradient(90deg,#7ef0ea,#20c6c0);
    --th-scroll:#20c6c0;
    --th-shadow:0 8px 24px rgba(8,62,73,.08);
}

html[data-theme="oranye"]{
    --th-id:oranye;
    --th-sidebar:#5a2a08;
    --th-sidebar2:#4a2208;
    --th-sidebar3:#3a1a05;
    --th-accent:#f97316;
    --th-accent2:#fb923c;
    --th-accent3:#ea580c;
    --th-hero:linear-gradient(135deg,#ea580c,#f97316 50%,#fdba74);
    --th-btn:linear-gradient(180deg,#fb923c,#ea580c);
    --th-bg:#fff4eb;
    --th-bg2:#ffedd5;
    --th-ink:#431407;
    --th-muted:#9a3412;
    --th-line:#fed7aa;
    --th-text-on-dark:#fde8d4;
    --th-on-accent:#431407;
    --th-badge:#fb923c;
    --th-badge-ink:#fff;
    --th-hover:rgba(251,146,60,.92);
    --th-active:linear-gradient(90deg,#fdba74,#f97316);
    --th-scroll:#f97316;
    --th-shadow:0 8px 24px rgba(90,42,8,.10);
}

html[data-theme="ungu"]{
    --th-id:ungu;
    --th-sidebar:#2e1065;
    --th-sidebar2:#1e1b4b;
    --th-sidebar3:#17143a;
    --th-accent:#7c3aed;
    --th-accent2:#a78bfa;
    --th-accent3:#6d28d9;
    --th-hero:linear-gradient(135deg,#5b21b6,#7c3aed 48%,#c4b5fd);
    --th-btn:linear-gradient(180deg,#a78bfa,#6d28d9);
    --th-bg:#f5f3ff;
    --th-bg2:#ede9fe;
    --th-ink:#1e1b4b;
    --th-muted:#6d28d9;
    --th-line:#ddd6fe;
    --th-text-on-dark:#e9e4ff;
    --th-on-accent:#1e1b4b;
    --th-badge:#a78bfa;
    --th-badge-ink:#fff;
    --th-hover:rgba(167,139,250,.92);
    --th-active:linear-gradient(90deg,#ddd6fe,#a78bfa);
    --th-scroll:#7c3aed;
    --th-shadow:0 8px 24px rgba(46,16,101,.10);
}

html[data-theme="rose"]{
    --th-id:rose;
    --th-sidebar:#4c0519;
    --th-sidebar2:#3f0a1a;
    --th-sidebar3:#2a0612;
    --th-accent:#e11d48;
    --th-accent2:#fb7185;
    --th-accent3:#be123c;
    --th-hero:linear-gradient(135deg,#be123c,#e11d48 48%,#fda4af);
    --th-btn:linear-gradient(180deg,#fb7185,#be123c);
    --th-bg:#fff1f2;
    --th-bg2:#ffe4e6;
    --th-ink:#4c0519;
    --th-muted:#9f1239;
    --th-line:#fecdd3;
    --th-text-on-dark:#ffe4e6;
    --th-on-accent:#4c0519;
    --th-badge:#fb7185;
    --th-badge-ink:#fff;
    --th-hover:rgba(251,113,133,.92);
    --th-active:linear-gradient(90deg,#fecdd3,#fb7185);
    --th-scroll:#e11d48;
    --th-shadow:0 8px 24px rgba(76,5,25,.10);
}

html[data-theme="biru"]{
    --th-id:biru;
    --th-sidebar:#0e4d8b;
    --th-sidebar2:#0a3d6e;
    --th-sidebar3:#08325c;
    --th-accent:#2b91df;
    --th-accent2:#3aa8d6;
    --th-accent3:#176ca8;
    --th-hero:linear-gradient(135deg,#0e4d8b,#1f80c8 55%,#3aa8d6);
    --th-btn:linear-gradient(180deg,#3aa8d6,#176ca8);
    --th-bg:#e8f4fb;
    --th-bg2:#d7eaf6;
    --th-ink:#063b5a;
    --th-muted:#407b96;
    --th-line:#c8dfea;
    --th-text-on-dark:#eaf6ff;
    --th-on-accent:#06284a;
    --th-badge:#7fd4ff;
    --th-badge-ink:#0e4d8b;
    --th-hover:rgba(185,231,255,.95);
    --th-active:linear-gradient(90deg,#b9e7ff,#3aa8d6);
    --th-scroll:#2b91df;
    --th-shadow:0 8px 24px rgba(14,77,139,.10);
}

/* Pemilih tema */
.sg-theme-wrap{ position:relative; margin-right:6px; }
.sg-theme-btn{
    height:36px; min-width:36px; padding:0 10px;
    display:inline-flex; align-items:center; gap:6px;
    border:1px solid var(--th-line); border-radius:999px;
    background:var(--th-card); color:var(--th-ink);
    cursor:pointer; font:700 11px Inter,Arial,sans-serif;
}
.sg-theme-dot{
    width:14px; height:14px; border-radius:50%;
    background:var(--th-accent); box-shadow:inset 0 0 0 2px #fff, 0 0 0 1px var(--th-accent);
}
.sg-theme-panel{
    position:absolute; right:0; top:44px; z-index:80;
    width:280px; padding:12px;
    background:#fff; border:1px solid var(--th-line); border-radius:16px;
    box-shadow:0 16px 36px rgba(0,0,0,.14);
}
.sg-theme-panel[hidden]{ display:none !important; }
.sg-theme-panel h4{ margin:0 0 8px; font:800 12px Inter,Arial; color:var(--th-ink); }
.sg-theme-panel p{ margin:0 0 10px; font-size:11px; color:var(--th-muted); line-height:1.4; }
.sg-theme-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sg-theme-opt{
    display:flex; align-items:center; gap:8px;
    padding:8px 10px; border-radius:12px; border:1px solid #e8eef2;
    background:#fafbfc; cursor:pointer; text-align:left; font:700 12px Inter,Arial; color:#234;
}
.sg-theme-opt:hover{ border-color:var(--th-accent); }
.sg-theme-opt.is-on{ border-color:var(--th-accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--th-accent) 30%, transparent); }
.sg-theme-swatch{ width:22px; height:22px; border-radius:8px; flex:0 0 22px; }
.sg-theme-swatch.toska{ background:linear-gradient(135deg,#0b4a56,#20c6c0); }
.sg-theme-swatch.oranye{ background:linear-gradient(135deg,#5a2a08,#f97316); }
.sg-theme-swatch.ungu{ background:linear-gradient(135deg,#2e1065,#a78bfa); }
.sg-theme-swatch.rose{ background:linear-gradient(135deg,#4c0519,#fb7185); }
.sg-theme-swatch.biru{ background:linear-gradient(135deg,#0e4d8b,#3aa8d6); }
.sg-theme-swatch.auto{ background:conic-gradient(#20c6c0,#f97316,#a78bfa,#fb7185,#3aa8d6,#20c6c0); }