/* =========================================================
   tema.css · Delapan gaya tampilan KasQ

   Gaya dipilih lewat atribut data-skin di elemen <html>, terpisah dari
   mode gelap/terang yang tetap dipegang data-theme. Jadi tiap gaya punya
   dua wajah: gelap dan terang.

   Selain warna, tiap gaya juga mengubah huruf, bentuk kartu, bentuk wadah
   ikon, dan tanda pada menu yang sedang aktif. Berkas ini dimuat SESUDAH
   style.css supaya nilainya menang. Gaya "minimalism" sengaja tidak ditulis
   di sini karena itu tampilan bawaan yang sudah ada di style.css.
   ========================================================= */

/* ---------------------------------------------------------
   Token bersama yang dipakai lintas gaya
   --------------------------------------------------------- */
:root{
  --aura-1:rgba(38,192,106,.22);
  --aura-2:rgba(15,169,138,.20);
  --mulai-bg:#04100B;
  --pola:none;
  --hero:linear-gradient(125deg,#1FA85E 0%,#12A17E 48%,#0C8E93 100%);
  --hero-bayang:0 22px 46px -22px rgba(18,161,110,.72);
  /* Huruf judul terpisah dari huruf isi, supaya tiap gaya bisa memasang
     huruf tampilan yang khas tanpa mengorbankan keterbacaan teks panjang. */
  --font-judul:var(--font);
  --tebal-judul:650;
  --spasi-judul:-.45px;
  --besar-judul:1;
  /* Bentuk wadah ikon. Dipakai persentase supaya satu nilai cocok untuk
     semua ukuran ikon, dari 32px sampai 44px. */
  --r-ikon:30%;
}
[data-theme="light"]{
  --aura-1:rgba(18,161,80,.16);
  --aura-2:rgba(11,140,114,.14);
}

.auth{
  background:
    radial-gradient(900px 520px at 12% -10%, var(--aura-1), transparent 62%),
    radial-gradient(760px 460px at 92% 8%, var(--aura-2), transparent 60%),
    var(--bg);
}
.mulai{background:var(--mulai-bg)}
.hero{background:var(--hero);box-shadow:var(--hero-bayang)}

/* Huruf judul dipasang di elemen yang memang berperan sebagai judul atau
   angka besar. Teks isi tetap memakai huruf badan supaya nyaman dibaca. */
.topbar-title h1,
.card-head h2,
.brand-text strong,
.hero-amount,
.stat-val,
.goal-amt b,
.mini-value,
.auth-title,
.ring-center b,
.empty h3,
.month-label{
  font-family:var(--font-judul);
}
.topbar-title h1,
.hero-amount,
.auth-title{
  font-weight:var(--tebal-judul);
  letter-spacing:var(--spasi-judul);
}
.topbar-title h1{font-size:calc(20.5px * var(--besar-judul))}
.hero-amount{font-size:calc(37px * var(--besar-judul))}

.stat-ic,.tx-ic,.cat-ic,.goal-ic,.empty-ic{border-radius:var(--r-ikon)}

/* Lapisan pola khas tiap gaya, digambar di belakang isi aplikasi */
.main{position:relative}
.main::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:var(--pola);opacity:.55;
}
.main > *{position:relative;z-index:1}


/* =========================================================
   FUTURISTIC
   Panel instrumen: sudut terpotong, garis tipis berpendar,
   huruf teknis, label huruf besar yang renggang.
   ========================================================= */
[data-skin="futuristic"]{
  --bg:#040911; --bg-soft:#07101E; --surface:#0A1524; --surface-2:#0F1F32; --surface-3:#15283E;
  --border:#1B4463; --border-soft:#12283C;
  --text:#DFF1FF; --text-dim:#96BCD6; --muted:#63849F;
  --primary:#00E5D0; --primary-2:#1E96FF; --primary-soft:rgba(0,229,208,.13);
  --fab-atas:#4DF7E4; --fab-bibir:#00887A;
  --luar-app:#01050B;
  --accent:#1E96FF; --accent-soft:rgba(30,150,255,.14);
  --income:#00E5A8; --income-soft:rgba(0,229,168,.12);
  --expense:#FF4D7E; --expense-soft:rgba(255,77,126,.12);
  --saving:#FFC93C; --saving-soft:rgba(255,201,60,.12);
  --danger:#FF3D62;
  --kaca:rgba(10,21,36,.62); --kaca-garis:rgba(0,229,208,.24);
  --kaca-kilau:rgba(0,229,208,.32); --kaca-alas:rgba(0,0,0,.32);
  --shadow-sm:0 0 0 1px rgba(0,229,208,.07);
  --shadow:0 14px 38px -16px rgba(0,150,190,.5);
  --shadow-lg:0 32px 74px -26px rgba(0,130,180,.62);
  --r-xs:2px; --r-sm:3px; --r-md:4px; --r-lg:5px; --r-xl:6px;
  --r-ikon:4px;
  --font:"Space Grotesk","Inter","Segoe UI",system-ui,sans-serif;
  --font-judul:"Orbitron","Space Grotesk",system-ui,sans-serif;
  --tebal-judul:600; --spasi-judul:.02em; --besar-judul:.86;
  --aura-1:rgba(0,229,208,.2); --aura-2:rgba(30,150,255,.18);
  --mulai-bg:#02070E;
  --hero:linear-gradient(125deg,#00776E 0%,#0A5F96 52%,#123478 100%);
  --hero-bayang:0 20px 44px -22px rgba(0,150,190,.7);
  --pola:
    linear-gradient(rgba(0,229,208,.045) 1px, transparent 1px) 0 0/100% 46px,
    linear-gradient(90deg, rgba(0,229,208,.03) 1px, transparent 1px) 0 0/46px 100%;
}
[data-skin="futuristic"][data-theme="light"]{
  --bg:#E8F1F8; --bg-soft:#F1F7FC; --surface:#FFFFFF; --surface-2:#EBF3FA; --surface-3:#DBE9F5;
  --border:#A9C9DF; --border-soft:#D5E5F1;
  --text:#04202F; --text-dim:#3A5E75; --muted:#688096;
  --primary:#00A092; --primary-2:#0A72BE; --primary-soft:rgba(0,160,146,.12);
  --fab-atas:#22C0AC; --fab-bibir:#007367;
  --luar-app:#CBDCEA;
  --accent:#0A72BE; --accent-soft:rgba(10,114,190,.11);
  --income:#009279; --income-soft:rgba(0,146,121,.11);
  --expense:#D8365E; --expense-soft:rgba(216,54,94,.10);
  --saving:#C07E0C; --saving-soft:rgba(192,126,12,.12);
  --danger:#CE2942;
  --kaca:rgba(255,255,255,.66); --kaca-garis:rgba(0,160,146,.22);
  --kaca-kilau:rgba(255,255,255,.9); --kaca-alas:rgba(10,60,90,.1);
  --shadow-sm:0 0 0 1px rgba(10,80,120,.06);
  --shadow:0 12px 28px -14px rgba(10,80,120,.24);
  --shadow-lg:0 32px 64px -28px rgba(10,80,120,.3);
  --aura-1:rgba(0,160,146,.16); --aura-2:rgba(10,114,190,.14);
  --mulai-bg:#D8E8F3;
  --hero:linear-gradient(125deg,#00A092 0%,#0A72BE 52%,#2350A8 100%);
  --hero-bayang:0 20px 40px -22px rgba(10,114,190,.5);
  --pola:
    linear-gradient(rgba(10,114,190,.05) 1px, transparent 1px) 0 0/100% 46px,
    linear-gradient(90deg, rgba(10,114,190,.035) 1px, transparent 1px) 0 0/46px 100%;
}
/* Sudut kanan atas dipotong seperti pelat logam */
[data-skin="futuristic"] .card,
[data-skin="futuristic"] .stat,
[data-skin="futuristic"] .goal{
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  border:1px solid var(--border);
  background:linear-gradient(158deg, var(--surface) 0%, var(--bg-soft) 100%);
}
/* Garis penanda di tepi atas kartu */
[data-skin="futuristic"] .card::before{
  content:"";position:absolute;left:0;top:0;width:52px;height:2px;
  background:var(--primary);box-shadow:0 0 10px var(--primary);
}
[data-skin="futuristic"] .hero{
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  border:1px solid rgba(0,229,208,.3);
}
[data-skin="futuristic"] .nav-item,
[data-skin="futuristic"] .subbar-label,
[data-skin="futuristic"] .hero-label,
[data-skin="futuristic"] .stat-name{
  text-transform:uppercase;letter-spacing:.08em;font-size:11.8px;
}
[data-skin="futuristic"] .nav-item.is-active{
  background:var(--primary-soft);
  box-shadow:inset 2px 0 0 var(--primary), 0 0 18px -8px var(--primary);
}
[data-skin="futuristic"] .btn{text-transform:uppercase;letter-spacing:.05em;font-size:12.4px}
[data-skin="futuristic"] .btn-primary{
  box-shadow:0 0 0 1px rgba(0,229,208,.45), 0 6px 22px -9px var(--primary);
}
[data-skin="futuristic"] .brand-mark{
  clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  border-radius:0;
}
[data-skin="futuristic"] .hero-amount,
[data-skin="futuristic"] .stat-val,
[data-skin="futuristic"] .mini-value{letter-spacing:.01em}
[data-skin="futuristic"] .bar-track,
[data-skin="futuristic"] .goal-bar,
[data-skin="futuristic"] .bar-fill,
[data-skin="futuristic"] .goal-bar i{border-radius:0}


/* =========================================================
   CYBERPUNK
   Papan reklame gang belakang: magenta menyala, pita kuning,
   sudut siku terpotong, huruf padat huruf besar, garis pindai.
   ========================================================= */
[data-skin="cyberpunk"]{
  --bg:#07050D; --bg-soft:#0C0916; --surface:#130E22; --surface-2:#1B1230; --surface-3:#271840;
  --border:#4A2478; --border-soft:#221739;
  --text:#F8EBFF; --text-dim:#C0A4E4; --muted:#8A72B0;
  --primary:#FF1F8C; --primary-2:#A716FF; --primary-soft:rgba(255,31,140,.15);
  --fab-atas:#FF63B4; --fab-bibir:#9C0054;
  --luar-app:#030108;
  --accent:#F5E000; --accent-soft:rgba(245,224,0,.13);
  --income:#00F5B8; --income-soft:rgba(0,245,184,.12);
  --expense:#FF1F8C; --expense-soft:rgba(255,31,140,.12);
  --saving:#F5E000; --saving-soft:rgba(245,224,0,.12);
  --danger:#FF2D55;
  --kaca:rgba(19,14,34,.64); --kaca-garis:rgba(255,31,140,.3);
  --kaca-kilau:rgba(245,224,0,.24); --kaca-alas:rgba(0,0,0,.38);
  --shadow-sm:0 0 0 1px rgba(255,31,140,.12);
  --shadow:0 0 0 1px rgba(255,31,140,.2), 6px 6px 0 -1px rgba(245,224,0,.45);
  --shadow-lg:0 30px 70px -25px rgba(255,31,140,.5);
  --r-xs:0px; --r-sm:0px; --r-md:0px; --r-lg:0px; --r-xl:0px;
  --r-ikon:0px;
  --font:"Chakra Petch","Inter","Segoe UI",system-ui,sans-serif;
  --font-judul:"Rajdhani","Chakra Petch",system-ui,sans-serif;
  --tebal-judul:700; --spasi-judul:.04em; --besar-judul:1.14;
  --aura-1:rgba(255,31,140,.24); --aura-2:rgba(167,22,255,.2);
  --mulai-bg:#050309;
  --hero:linear-gradient(118deg,#C2005E 0%,#7B12CC 55%,#2E0C7A 100%);
  --hero-bayang:0 0 0 1px rgba(245,224,0,.35), 10px 10px 0 -2px rgba(245,224,0,.4);
  --pola:repeating-linear-gradient(0deg, rgba(255,31,140,.05) 0 1px, transparent 1px 3px);
}
[data-skin="cyberpunk"][data-theme="light"]{
  --bg:#F2E9FF; --bg-soft:#F9F4FF; --surface:#FFFFFF; --surface-2:#F1E6FF; --surface-3:#E4D2FF;
  --border:#1B0B2E; --border-soft:#DCC9F5;
  --text:#170826; --text-dim:#452C63; --muted:#755A96;
  --primary:#D6006E; --primary-2:#7B12CC; --primary-soft:rgba(214,0,110,.1);
  --fab-atas:#F0398D; --fab-bibir:#96004D;
  --luar-app:#DFCEF7;
  --accent:#8A6A00; --accent-soft:rgba(138,106,0,.12);
  --income:#00876C; --income-soft:rgba(0,135,108,.11);
  --expense:#D6006E; --expense-soft:rgba(214,0,110,.1);
  --saving:#8A6A00; --saving-soft:rgba(138,106,0,.12);
  --danger:#C9143C;
  --kaca:rgba(255,255,255,.7); --kaca-garis:rgba(214,0,110,.2);
  --kaca-kilau:rgba(255,255,255,.94); --kaca-alas:rgba(60,20,90,.1);
  --shadow-sm:0 0 0 1px rgba(27,11,46,.12);
  --shadow:0 0 0 1px rgba(27,11,46,.18), 6px 6px 0 -1px rgba(214,0,110,.26);
  --shadow-lg:0 32px 64px -28px rgba(90,20,130,.34);
  --aura-1:rgba(214,0,110,.15); --aura-2:rgba(123,18,204,.13);
  --mulai-bg:#E8D8FB;
  --hero:linear-gradient(118deg,#D6006E 0%,#8B18D6 55%,#4B18A0 100%);
  --hero-bayang:0 0 0 1px rgba(27,11,46,.25), 10px 10px 0 -2px rgba(138,106,0,.35);
  --pola:repeating-linear-gradient(0deg, rgba(123,18,204,.045) 0 1px, transparent 1px 3px);
}
[data-skin="cyberpunk"] .card,
[data-skin="cyberpunk"] .stat,
[data-skin="cyberpunk"] .goal{
  border:1px solid var(--border);
  clip-path:polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);
}
/* Pita kuning di pojok kartu, seperti tanda peringatan */
[data-skin="cyberpunk"] .card::after{
  content:"";position:absolute;right:0;top:0;width:34px;height:3px;background:var(--accent);
}
[data-skin="cyberpunk"] .hero{
  clip-path:polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
[data-skin="cyberpunk"] .brand-text strong,
[data-skin="cyberpunk"] .topbar-title h1,
[data-skin="cyberpunk"] .auth-title,
[data-skin="cyberpunk"] .card-head h2,
[data-skin="cyberpunk"] .nav-item,
[data-skin="cyberpunk"] .btn{
  text-transform:uppercase;
}
[data-skin="cyberpunk"] .nav-item{letter-spacing:.07em;font-size:12.6px;font-weight:600}
[data-skin="cyberpunk"] .nav-item.is-active{
  background:var(--primary-soft);color:var(--primary);
  box-shadow:inset 4px 0 0 var(--accent);
}
[data-skin="cyberpunk"] .card-head h2{letter-spacing:.05em;font-size:16px}
[data-skin="cyberpunk"] .btn{font-weight:600;letter-spacing:.05em}
[data-skin="cyberpunk"] .btn-primary{
  box-shadow:0 0 0 1px var(--accent), 0 0 24px -7px var(--primary);
}
[data-skin="cyberpunk"] .brand-mark{
  border-radius:0;
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
[data-skin="cyberpunk"] .hero-amount{text-shadow:0 0 22px rgba(255,255,255,.35)}
[data-skin="cyberpunk"] .bar-track,
[data-skin="cyberpunk"] .goal-bar,
[data-skin="cyberpunk"] .bar-fill,
[data-skin="cyberpunk"] .goal-bar i,
[data-skin="cyberpunk"] .legend-dot{border-radius:0}


/* =========================================================
   RETRO
   Poster tahun tujuh puluhan: krem, oranye bakar, huruf slab
   tebal, sudut sangat bulat, bayangan padat tanpa kabur.
   ========================================================= */
[data-skin="retro"]{
  --bg:#231810; --bg-soft:#2C1F16; --surface:#37271C; --surface-2:#443124; --surface-3:#523C2C;
  --border:#7A5E44; --border-soft:#4C3828;
  --text:#F8EAD3; --text-dim:#D6BC99; --muted:#A98F6D;
  --primary:#F08A2C; --primary-2:#D2542A; --primary-soft:rgba(240,138,44,.15);
  --fab-atas:#FCA850; --fab-bibir:#A0540F;
  --luar-app:#160E08;
  --accent:#E8BE3E; --accent-soft:rgba(232,190,62,.14);
  --income:#93BD52; --income-soft:rgba(147,189,82,.13);
  --expense:#DE6647; --expense-soft:rgba(222,102,71,.13);
  --saving:#E8BE3E; --saving-soft:rgba(232,190,62,.13);
  --danger:#CE452C;
  --kaca:rgba(55,39,28,.62); --kaca-garis:rgba(248,234,211,.16);
  --kaca-kilau:rgba(248,234,211,.22); --kaca-alas:rgba(0,0,0,.26);
  --shadow-sm:0 3px 0 rgba(0,0,0,.28);
  --shadow:0 7px 0 rgba(0,0,0,.32);
  --shadow-lg:0 16px 0 rgba(0,0,0,.34);
  --r-xs:12px; --r-sm:17px; --r-md:22px; --r-lg:28px; --r-xl:34px;
  --r-ikon:50%;
  --font:"Bitter","Georgia",serif;
  --font-judul:"Alfa Slab One","Bitter",Georgia,serif;
  --tebal-judul:400; --spasi-judul:-.01em; --besar-judul:.94;
  --aura-1:rgba(240,138,44,.2); --aura-2:rgba(232,190,62,.16);
  --mulai-bg:#1D130C;
  --hero:
    radial-gradient(120% 130% at 12% 118%, rgba(232,190,62,.5), transparent 58%),
    linear-gradient(122deg,#CC6A1C 0%,#AE451D 54%,#7E5A18 100%);
  --hero-bayang:0 10px 0 rgba(0,0,0,.3);
  --pola:repeating-linear-gradient(45deg, rgba(240,138,44,.04) 0 14px, transparent 14px 28px);
}
[data-skin="retro"][data-theme="light"]{
  --bg:#F2E2C8; --bg-soft:#F8EEDC; --surface:#FFFAF0; --surface-2:#F6E9D2; --surface-3:#EEDBBB;
  --border:#8A6A45; --border-soft:#E2CFAE;
  --text:#3A2513; --text-dim:#6B4F31; --muted:#94795A;
  --primary:#C4561B; --primary-2:#9B3A14; --primary-soft:rgba(196,86,27,.12);
  --fab-atas:#E27831; --fab-bibir:#8B3A0D;
  --luar-app:#E0CBA6;
  --accent:#AD8317; --accent-soft:rgba(173,131,23,.13);
  --income:#5D8A26; --income-soft:rgba(93,138,38,.12);
  --expense:#C24428; --expense-soft:rgba(194,68,40,.11);
  --saving:#AD8317; --saving-soft:rgba(173,131,23,.13);
  --danger:#B0331C;
  --kaca:rgba(255,250,240,.7); --kaca-garis:rgba(138,106,69,.2);
  --kaca-kilau:rgba(255,255,255,.92); --kaca-alas:rgba(90,60,30,.1);
  --shadow-sm:0 3px 0 rgba(138,106,69,.3);
  --shadow:0 7px 0 rgba(138,106,69,.32);
  --shadow-lg:0 16px 0 rgba(138,106,69,.34);
  --aura-1:rgba(196,86,27,.16); --aura-2:rgba(173,131,23,.14);
  --mulai-bg:#EBD5AF;
  --hero:
    radial-gradient(120% 130% at 12% 118%, rgba(232,190,62,.55), transparent 58%),
    linear-gradient(122deg,#C4561B 0%,#9B3A14 54%,#8A6A18 100%);
  --hero-bayang:0 10px 0 rgba(138,106,69,.32);
  --pola:repeating-linear-gradient(45deg, rgba(196,86,27,.04) 0 14px, transparent 14px 28px);
}
[data-skin="retro"] .card,
[data-skin="retro"] .stat,
[data-skin="retro"] .goal,
[data-skin="retro"] .hero{border:2.5px solid var(--border)}
[data-skin="retro"] .card,
[data-skin="retro"] .goal{box-shadow:var(--shadow)}
[data-skin="retro"] .btn{
  border-width:2.5px;border-radius:999px;font-weight:700;padding:10px 18px;
}
[data-skin="retro"] .btn-sm{padding:7px 14px}
[data-skin="retro"] .icon-btn,
[data-skin="retro"] .brand-mark{border-radius:50%}
[data-skin="retro"] .nav-item{border-radius:999px;font-weight:600}
[data-skin="retro"] .nav-item.is-active{background:var(--primary);color:#fff}
[data-skin="retro"] .card-head h2{font-size:17px;line-height:1.3}
[data-skin="retro"] .bar-track,
[data-skin="retro"] .goal-bar{height:11px;border:1.5px solid var(--border)}
[data-skin="retro"] .segment{border-width:2.5px;border-radius:999px}
[data-skin="retro"] .segment button{border-radius:999px}


/* =========================================================
   GLASS MORPHISM
   Lembar kaca beku melayang di atas cahaya warna. Semuanya
   tembus pandang, tepinya berkilau, sudutnya sangat bulat.
   ========================================================= */
[data-skin="glass"]{
  --bg:#0A0F22; --bg-soft:#0E142C; --surface:rgba(255,255,255,.07); --surface-2:rgba(255,255,255,.11);
  --surface-3:rgba(255,255,255,.17);
  --border:rgba(255,255,255,.22); --border-soft:rgba(255,255,255,.13);
  --text:#F4F7FF; --text-dim:#C4CDEC; --muted:#96A1C8;
  --primary:#7ED9FF; --primary-2:#B79EFF; --primary-soft:rgba(126,217,255,.18);
  --fab-atas:#AEEAFF; --fab-bibir:#2B7EA8;
  --luar-app:#060A18;
  --accent:#B79EFF; --accent-soft:rgba(183,158,255,.16);
  --income:#7CF0C2; --income-soft:rgba(124,240,194,.14);
  --expense:#FF9FB6; --expense-soft:rgba(255,159,182,.14);
  --saving:#FFDC8E; --saving-soft:rgba(255,220,142,.14);
  --danger:#FF7C92;
  --kaca:rgba(255,255,255,.1); --kaca-garis:rgba(255,255,255,.26);
  --kaca-kilau:rgba(255,255,255,.44); --kaca-alas:rgba(0,0,0,.16);
  --shadow-sm:0 2px 14px rgba(0,0,0,.2);
  --shadow:0 18px 44px -20px rgba(0,0,0,.55);
  --shadow-lg:0 36px 84px -32px rgba(0,0,0,.65);
  --r-xs:13px; --r-sm:17px; --r-md:21px; --r-lg:27px; --r-xl:34px;
  --r-ikon:34%;
  --font:"Manrope","Inter","Segoe UI",system-ui,sans-serif;
  --font-judul:"Manrope","Inter",system-ui,sans-serif;
  --tebal-judul:800; --spasi-judul:-.03em; --besar-judul:1;
  --aura-1:rgba(126,217,255,.22); --aura-2:rgba(183,158,255,.2);
  --mulai-bg:#090E20;
  --hero:linear-gradient(125deg, rgba(126,217,255,.34) 0%, rgba(183,158,255,.3) 52%, rgba(124,240,194,.26) 100%);
  --hero-bayang:0 20px 46px -22px rgba(0,0,0,.5);
}
[data-skin="glass"][data-theme="light"]{
  --bg:#E7EEFB; --bg-soft:#F0F5FE; --surface:rgba(255,255,255,.58); --surface-2:rgba(255,255,255,.74);
  --surface-3:rgba(255,255,255,.9);
  --border:rgba(255,255,255,.9); --border-soft:rgba(120,140,190,.2);
  --text:#121A31; --text-dim:#45527A; --muted:#727DA0;
  --primary:#2C82C9; --primary-2:#7455E4; --primary-soft:rgba(44,130,201,.12);
  --fab-atas:#4FA6E4; --fab-bibir:#1E6394;
  --luar-app:#D3DDF3;
  --accent:#7455E4; --accent-soft:rgba(116,85,228,.12);
  --income:#12A277; --income-soft:rgba(18,162,119,.11);
  --expense:#DE4E77; --expense-soft:rgba(222,78,119,.11);
  --saving:#CB8D1B; --saving-soft:rgba(203,141,27,.12);
  --danger:#D63B5A;
  --kaca:rgba(255,255,255,.55); --kaca-garis:rgba(255,255,255,.92);
  --kaca-kilau:rgba(255,255,255,.98); --kaca-alas:rgba(40,60,110,.08);
  --shadow-sm:0 2px 12px rgba(40,60,110,.09);
  --shadow:0 18px 40px -20px rgba(40,60,110,.28);
  --shadow-lg:0 36px 76px -32px rgba(40,60,110,.32);
  --aura-1:rgba(44,130,201,.16); --aura-2:rgba(116,85,228,.14);
  --mulai-bg:#DBE5F8;
  --hero:linear-gradient(125deg, rgba(44,130,201,.85) 0%, rgba(116,85,228,.8) 52%, rgba(18,162,119,.78) 100%);
  --hero-bayang:0 18px 40px -20px rgba(40,60,110,.4);
}
/* Cahaya warna di belakang kaca; tanpa ini efek buramnya tidak terlihat */
[data-skin="glass"] body,
[data-skin="glass"] .main,
[data-skin="glass"] .sidebar{
  background-image:
    radial-gradient(700px 500px at 6% 2%, rgba(126,217,255,.3), transparent 60%),
    radial-gradient(740px 540px at 97% 10%, rgba(183,158,255,.28), transparent 62%),
    radial-gradient(620px 620px at 48% 110%, rgba(124,240,194,.22), transparent 62%);
  background-attachment:fixed;
}
[data-skin="glass"][data-theme="light"] body,
[data-skin="glass"][data-theme="light"] .main,
[data-skin="glass"][data-theme="light"] .sidebar{
  background-image:
    radial-gradient(700px 500px at 6% 2%, rgba(44,130,201,.22), transparent 60%),
    radial-gradient(740px 540px at 97% 10%, rgba(116,85,228,.2), transparent 62%),
    radial-gradient(620px 620px at 48% 110%, rgba(18,162,119,.18), transparent 62%);
}
[data-skin="glass"] .card,
[data-skin="glass"] .stat,
[data-skin="glass"] .goal,
[data-skin="glass"] .hero,
[data-skin="glass"] .modal,
[data-skin="glass"] .popover,
[data-skin="glass"] .auth-panel,
[data-skin="glass"] .segment,
[data-skin="glass"] .mini-card,
[data-skin="glass"] .topbar,
[data-skin="glass"] .sidebar{
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  backdrop-filter:blur(26px) saturate(180%);
}
[data-skin="glass"] .card,
[data-skin="glass"] .stat,
[data-skin="glass"] .goal,
[data-skin="glass"] .auth-panel,
[data-skin="glass"] .mini-card{
  border:1px solid var(--border);
  box-shadow:var(--shadow), inset 0 1px 0 var(--kaca-kilau);
}
[data-skin="glass"] .topbar{background:rgba(255,255,255,.05);border-bottom-color:var(--border-soft)}
[data-skin="glass"][data-theme="light"] .topbar{background:rgba(255,255,255,.45)}
[data-skin="glass"] .sidebar{background:rgba(255,255,255,.05)}
[data-skin="glass"][data-theme="light"] .sidebar{background:rgba(255,255,255,.42)}
[data-skin="glass"] .hero{
  border:1px solid var(--border);
  box-shadow:var(--hero-bayang), inset 0 1px 0 var(--kaca-kilau);
}
[data-skin="glass"] .nav-item.is-active{
  background:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32);
}
[data-skin="glass"] .btn{border-radius:999px}
[data-skin="glass"] .btn-soft{
  background:rgba(255,255,255,.1);border-color:var(--border);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
/* Peramban tanpa dukungan blur tetap harus terbaca */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  [data-skin="glass"]{--surface:#19203D; --surface-2:#212949; --surface-3:#2B3457}
  [data-skin="glass"][data-theme="light"]{--surface:#FFFFFF; --surface-2:#F4F7FE; --surface-3:#E9EFFB}
}


/* =========================================================
   POP ART
   Panel komik: garis tebal, bayangan padat, titik halftone,
   huruf poster, warna primer yang berteriak.
   ========================================================= */
[data-skin="popart"]{
  --bg:#181320; --bg-soft:#201929; --surface:#292035; --surface-2:#342A44; --surface-3:#413455;
  --border:#FFF3DC; --border-soft:#3F3352;
  --text:#FFF6E6; --text-dim:#D8C8E2; --muted:#A290B2;
  --primary:#FF3B30; --primary-2:#FFC400; --primary-soft:rgba(255,59,48,.18);
  --fab-atas:#FF6C60; --fab-bibir:#AE1810;
  --luar-app:#0D0912;
  --accent:#2E7BFF; --accent-soft:rgba(46,123,255,.16);
  --income:#22C55E; --income-soft:rgba(34,197,94,.15);
  --expense:#FF3B30; --expense-soft:rgba(255,59,48,.15);
  --saving:#FFC400; --saving-soft:rgba(255,196,0,.15);
  --danger:#FF3B30;
  --kaca:rgba(41,32,53,.72); --kaca-garis:rgba(255,246,230,.22);
  --kaca-kilau:rgba(255,196,0,.26); --kaca-alas:rgba(0,0,0,.32);
  --shadow-sm:3px 3px 0 var(--border);
  --shadow:6px 6px 0 var(--border);
  --shadow-lg:10px 10px 0 var(--border);
  --r-xs:5px; --r-sm:7px; --r-md:9px; --r-lg:13px; --r-xl:16px;
  --r-ikon:50%;
  --font:"Rubik","Inter","Segoe UI",system-ui,sans-serif;
  --font-judul:"Bungee","Rubik",system-ui,sans-serif;
  --tebal-judul:400; --spasi-judul:0; --besar-judul:.82;
  --aura-1:rgba(255,59,48,.2); --aura-2:rgba(255,196,0,.18);
  --mulai-bg:#151020;
  --hero:linear-gradient(122deg,#E5322C 0%,#C21B6B 52%,#1E6FE8 100%);
  --hero-bayang:8px 8px 0 var(--border);
  --pola:radial-gradient(rgba(255,246,230,.055) 1.5px, transparent 1.6px) 0 0/15px 15px;
}
[data-skin="popart"][data-theme="light"]{
  --bg:#FFEFC4; --bg-soft:#FFF6DC; --surface:#FFFFFF; --surface-2:#FFF4D2; --surface-3:#FFE79E;
  --border:#14100D; --border-soft:#D9C79A;
  --text:#14100D; --text-dim:#3E342A; --muted:#7A6B53;
  --primary:#E5322C; --primary-2:#FFC400; --primary-soft:rgba(229,50,44,.12);
  --fab-atas:#FF564F; --fab-bibir:#A81C17;
  --luar-app:#F1DCA4;
  --accent:#1E6FE8; --accent-soft:rgba(30,111,232,.12);
  --income:#12A150; --income-soft:rgba(18,161,80,.12);
  --expense:#E5322C; --expense-soft:rgba(229,50,44,.11);
  --saving:#DDA200; --saving-soft:rgba(221,162,0,.14);
  --danger:#D6221C;
  --kaca:rgba(255,255,255,.72); --kaca-garis:rgba(20,16,13,.22);
  --kaca-kilau:rgba(255,255,255,.96); --kaca-alas:rgba(20,16,13,.1);
  --aura-1:rgba(229,50,44,.16); --aura-2:rgba(255,196,0,.2);
  --mulai-bg:#FFE79E;
  --hero:linear-gradient(122deg,#E5322C 0%,#D6157A 52%,#1E6FE8 100%);
  --pola:radial-gradient(rgba(20,16,13,.075) 1.5px, transparent 1.6px) 0 0/15px 15px;
}
[data-skin="popart"] .card,
[data-skin="popart"] .stat,
[data-skin="popart"] .goal,
[data-skin="popart"] .hero,
[data-skin="popart"] .modal,
[data-skin="popart"] .auth-panel,
[data-skin="popart"] .btn,
[data-skin="popart"] .segment,
[data-skin="popart"] .mini-card,
[data-skin="popart"] .input{
  border:3px solid var(--border);
}
[data-skin="popart"] .card,
[data-skin="popart"] .goal,
[data-skin="popart"] .auth-panel{box-shadow:var(--shadow)}
[data-skin="popart"] .stat{box-shadow:var(--shadow-sm)}
[data-skin="popart"] .hero{box-shadow:var(--hero-bayang)}
[data-skin="popart"] .btn{
  box-shadow:3px 3px 0 var(--border);font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;font-size:12.6px;
}
[data-skin="popart"] .btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--border)}
[data-skin="popart"] .stat-ic,
[data-skin="popart"] .tx-ic,
[data-skin="popart"] .cat-ic,
[data-skin="popart"] .goal-ic,
[data-skin="popart"] .brand-mark{border:2.5px solid var(--border)}
[data-skin="popart"] .brand-mark{border-radius:50%}
[data-skin="popart"] .nav-item{font-weight:600}
[data-skin="popart"] .nav-item.is-active{
  background:var(--primary);color:#fff;
  border:2.5px solid var(--border);box-shadow:3px 3px 0 var(--border);
}
[data-skin="popart"] .card-head h2{font-size:13.5px;line-height:1.45}
[data-skin="popart"] .topbar-title h1{line-height:1.3}
[data-skin="popart"] .bar-track,
[data-skin="popart"] .goal-bar{border:2px solid var(--border);height:12px}


/* =========================================================
   AURORA
   Langit kutub: pita cahaya hijau dan ungu, panel gelap
   tembus, tepi kartu bergradasi, huruf tipis melebar.
   ========================================================= */
[data-skin="aurora"]{
  --bg:#040A1A; --bg-soft:#08122A; --surface:#0C1932; --surface-2:#122343; --surface-3:#1A2F55;
  --border:#264271; --border-soft:#182B4E;
  --text:#EBF3FF; --text-dim:#AAC0DE; --muted:#7B91B6;
  --primary:#41E3A8; --primary-2:#7E6CFF; --primary-soft:rgba(65,227,168,.14);
  --fab-atas:#6DF2C0; --fab-bibir:#178C64;
  --luar-app:#02050E;
  --accent:#7E6CFF; --accent-soft:rgba(126,108,255,.15);
  --income:#41E3A8; --income-soft:rgba(65,227,168,.13);
  --expense:#FF80AA; --expense-soft:rgba(255,128,170,.13);
  --saving:#FFD06E; --saving-soft:rgba(255,208,110,.13);
  --danger:#FF5E7C;
  --kaca:rgba(12,25,50,.62); --kaca-garis:rgba(126,108,255,.26);
  --kaca-kilau:rgba(65,227,168,.26); --kaca-alas:rgba(0,0,0,.26);
  --shadow-sm:0 2px 14px rgba(65,227,168,.07);
  --shadow:0 18px 44px -20px rgba(70,90,220,.5);
  --shadow-lg:0 36px 82px -30px rgba(70,90,220,.6);
  --r-xs:11px; --r-sm:15px; --r-md:19px; --r-lg:24px; --r-xl:30px;
  --r-ikon:36%;
  --font:"Outfit","Inter","Segoe UI",system-ui,sans-serif;
  --font-judul:"Outfit","Inter",system-ui,sans-serif;
  --tebal-judul:300; --spasi-judul:-.02em; --besar-judul:1.08;
  --aura-1:rgba(65,227,168,.24); --aura-2:rgba(126,108,255,.22);
  --mulai-bg:#030813;
  --hero:linear-gradient(122deg,#0F8F6C 0%,#2A6BB8 48%,#5B4CC4 100%);
  --hero-bayang:0 22px 48px -22px rgba(70,90,220,.6);
}
[data-skin="aurora"][data-theme="light"]{
  --bg:#ECF2FF; --bg-soft:#F3F8FF; --surface:#FFFFFF; --surface-2:#EEF4FF; --surface-3:#E0EAFC;
  --border:#C5D6F2; --border-soft:#DCE7FA;
  --text:#0B1930; --text-dim:#405478; --muted:#6F80A0;
  --primary:#12A578; --primary-2:#6150D6; --primary-soft:rgba(18,165,120,.12);
  --fab-atas:#2CC495; --fab-bibir:#0C7655;
  --luar-app:#D5E1F6;
  --accent:#6150D6; --accent-soft:rgba(97,80,214,.12);
  --income:#12A578; --income-soft:rgba(18,165,120,.11);
  --expense:#DC4770; --expense-soft:rgba(220,71,112,.1);
  --saving:#C48713; --saving-soft:rgba(196,135,19,.12);
  --danger:#D1385A;
  --kaca:rgba(255,255,255,.68); --kaca-garis:rgba(97,80,214,.2);
  --kaca-kilau:rgba(255,255,255,.94); --kaca-alas:rgba(30,50,100,.09);
  --shadow-sm:0 2px 10px rgba(40,60,120,.08);
  --shadow:0 16px 34px -18px rgba(40,60,120,.26);
  --shadow-lg:0 34px 70px -30px rgba(40,60,120,.32);
  --aura-1:rgba(18,165,120,.16); --aura-2:rgba(97,80,214,.15);
  --mulai-bg:#E1ECFB;
  --hero:linear-gradient(122deg,#12A578 0%,#2C7CC4 48%,#6150D6 100%);
  --hero-bayang:0 20px 42px -22px rgba(60,80,180,.45);
}
/* Pita cahaya di latar */
[data-skin="aurora"] .main,
[data-skin="aurora"] .sidebar{
  background-image:
    radial-gradient(900px 420px at 18% -10%, rgba(65,227,168,.17), transparent 64%),
    radial-gradient(780px 420px at 92% 2%, rgba(126,108,255,.17), transparent 62%),
    radial-gradient(700px 380px at 50% 106%, rgba(126,108,255,.1), transparent 62%);
  background-attachment:fixed;
}
[data-skin="aurora"][data-theme="light"] .main,
[data-skin="aurora"][data-theme="light"] .sidebar{
  background-image:
    radial-gradient(900px 420px at 18% -10%, rgba(18,165,120,.13), transparent 64%),
    radial-gradient(780px 420px at 92% 2%, rgba(97,80,214,.13), transparent 62%),
    radial-gradient(700px 380px at 50% 106%, rgba(97,80,214,.08), transparent 62%);
}
/* Tepi kartu bergradasi hijau ke ungu */
[data-skin="aurora"] .card,
[data-skin="aurora"] .goal{
  border:1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(145deg, rgba(65,227,168,.5), rgba(126,108,255,.45) 55%, transparent 90%) border-box;
}
[data-skin="aurora"][data-theme="light"] .card,
[data-skin="aurora"][data-theme="light"] .goal{
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(145deg, rgba(18,165,120,.4), rgba(97,80,214,.35) 55%, transparent 90%) border-box;
}
[data-skin="aurora"] .brand-text strong{
  background:linear-gradient(94deg, var(--primary), var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
[data-skin="aurora"] .hero-amount{
  background:linear-gradient(94deg,#FFFFFF,#D8F5E8 45%,#CFC7FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
[data-skin="aurora"] .nav-item{border-radius:999px}
[data-skin="aurora"] .nav-item.is-active{
  background:linear-gradient(94deg, var(--primary-soft), var(--accent-soft));
  color:var(--text);
}
[data-skin="aurora"] .btn{border-radius:999px}
[data-skin="aurora"] .card-head h2{font-weight:400;font-size:17px;letter-spacing:-.02em}
[data-skin="aurora"] .stat-val,
[data-skin="aurora"] .goal-amt b,
[data-skin="aurora"] .mini-value{font-weight:400}


/* =========================================================
   HANDWRITTEN
   Buku catatan: kertas bergaris, kotak yang digambar tangan,
   tulisan sambung, dan coretan spidol di bawah judul.
   ========================================================= */
[data-skin="handwritten"]{
  --bg:#1B1A16; --bg-soft:#222118; --surface:#27261E; --surface-2:#312F25; --surface-3:#3C392C;
  --border:#6A6650; --border-soft:#3A382C;
  --text:#F3EDDC; --text-dim:#D2C9AF; --muted:#9E9682;
  --primary:#95D673; --primary-2:#63B86B; --primary-soft:rgba(149,214,115,.14);
  --fab-atas:#AEE391; --fab-bibir:#4F8C39;
  --luar-app:#121108;
  --accent:#84CBEA; --accent-soft:rgba(132,203,234,.14);
  --income:#95D673; --income-soft:rgba(149,214,115,.13);
  --expense:#F3A092; --expense-soft:rgba(243,160,146,.13);
  --saving:#F4D384; --saving-soft:rgba(244,211,132,.13);
  --danger:#EA7B6D;
  --kaca:rgba(39,38,30,.64); --kaca-garis:rgba(243,237,220,.18);
  --kaca-kilau:rgba(243,237,220,.22); --kaca-alas:rgba(0,0,0,.24);
  --shadow-sm:0 2px 7px rgba(0,0,0,.24);
  --shadow:0 9px 24px -11px rgba(0,0,0,.42);
  --shadow-lg:0 24px 54px -24px rgba(0,0,0,.52);
  --r-ikon:50%;
  --font:"Patrick Hand","Comic Sans MS","Segoe Print",cursive;
  --font-judul:"Caveat","Patrick Hand","Segoe Script",cursive;
  --tebal-judul:700; --spasi-judul:0; --besar-judul:1.3;
  --aura-1:rgba(149,214,115,.16); --aura-2:rgba(132,203,234,.14);
  --mulai-bg:#171611;
  --hero:linear-gradient(122deg,#4F8C39 0%,#3E7C6C 52%,#3A6489 100%);
  --hero-bayang:0 10px 26px -12px rgba(0,0,0,.5);
  --pola:repeating-linear-gradient(180deg, transparent 0 31px, rgba(243,237,220,.055) 31px 32px);
}
[data-skin="handwritten"][data-theme="light"]{
  --bg:#F8F2E2; --bg-soft:#FCF8ED; --surface:#FFFDF4; --surface-2:#F7F1E1; --surface-3:#EEE5CF;
  --border:#C3B695; --border-soft:#E3D9C1;
  --text:#2B2721; --text-dim:#585044; --muted:#8A8071;
  --primary:#2F7D5C; --primary-2:#3E6FA8; --primary-soft:rgba(47,125,92,.12);
  --fab-atas:#46A077; --fab-bibir:#215B41;
  --luar-app:#E8DEC5;
  --accent:#3E6FA8; --accent-soft:rgba(62,111,168,.11);
  --income:#2F7D5C; --income-soft:rgba(47,125,92,.11);
  --expense:#C05540; --expense-soft:rgba(192,85,64,.11);
  --saving:#B58421; --saving-soft:rgba(181,132,33,.12);
  --danger:#B34A38;
  --kaca:rgba(255,253,244,.72); --kaca-garis:rgba(110,95,65,.18);
  --kaca-kilau:rgba(255,255,255,.92); --kaca-alas:rgba(90,75,45,.08);
  --shadow-sm:0 2px 6px rgba(120,105,75,.16);
  --shadow:0 9px 22px -11px rgba(120,105,75,.32);
  --shadow-lg:0 24px 50px -24px rgba(120,105,75,.36);
  --aura-1:rgba(47,125,92,.14); --aura-2:rgba(62,111,168,.12);
  --mulai-bg:#F0E7D0;
  --hero:linear-gradient(122deg,#2F7D5C 0%,#356F7E 52%,#3E6FA8 100%);
  --hero-bayang:0 10px 24px -12px rgba(120,105,75,.4);
  --pola:repeating-linear-gradient(180deg, transparent 0 31px, rgba(110,95,65,.1) 31px 32px);
}
[data-skin="handwritten"]{font-size:16.5px}
/* Sudut yang sengaja tidak rata, seperti kotak yang digambar tangan */
[data-skin="handwritten"] .card,
[data-skin="handwritten"] .stat,
[data-skin="handwritten"] .goal,
[data-skin="handwritten"] .modal,
[data-skin="handwritten"] .auth-panel{
  border:2px solid var(--border);
  border-radius:17px 24px 19px 26px / 24px 17px 26px 19px;
}
[data-skin="handwritten"] .hero{border-radius:22px 30px 24px 32px / 30px 22px 32px 24px}
[data-skin="handwritten"] .btn{
  border:2px solid var(--border);
  border-radius:15px 21px 16px 22px / 21px 15px 22px 16px;
  font-weight:400;
}
[data-skin="handwritten"] .input,
[data-skin="handwritten"] .segment,
[data-skin="handwritten"] .mini-card{
  border-radius:14px 19px 15px 20px / 19px 14px 20px 15px;
}
[data-skin="handwritten"] .nav-item{border-radius:13px 19px 14px 20px / 19px 13px 20px 14px}
[data-skin="handwritten"] .nav-item.is-active{
  background:var(--primary-soft);box-shadow:inset 0 0 0 2px var(--border);
}
[data-skin="handwritten"] .card-head h2{font-size:23px;line-height:1.1}
[data-skin="handwritten"] .topbar-title h1{line-height:1.15}
/* Coretan spidol di bawah judul kartu */
[data-skin="handwritten"] .card-head h2::after{
  content:"";display:block;width:44px;height:2.5px;margin-top:1px;
  background:var(--primary);border-radius:2px;transform:rotate(-.7deg);opacity:.65;
}
[data-skin="handwritten"] .bar-track,
[data-skin="handwritten"] .goal-bar{border:1.5px solid var(--border);height:10px}
[data-skin="handwritten"] .stat-val,
[data-skin="handwritten"] .goal-amt b,
[data-skin="handwritten"] .mini-value{font-weight:700}


/* =========================================================
   Halaman pemilih tema
   Tiap kartu menampilkan tiruan kecil antarmuka dalam warna,
   sudut, dan huruf gaya itu sendiri, jadi wujudnya bisa
   dilihat sebelum dipakai.
   ========================================================= */
/* Aplikasi selalu memakai lebar ponsel, jadi dua kolom adalah muatan paling
   pas: cukup besar untuk melihat wujudnya, cukup ringkas untuk membandingkan. */
.tema-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
}
.tema-kartu{
  position:relative;padding:0;overflow:hidden;text-align:left;
  border:1.5px solid var(--border-soft);border-radius:var(--r-md);
  background:var(--surface-2);
  transition:transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.tema-kartu:hover{transform:translateY(-3px);border-color:var(--primary)}
.tema-kartu.on{border-color:var(--primary);box-shadow:0 0 0 2.5px var(--primary-soft)}

/* ---- Tiruan antarmuka di dalam kartu ---- */
.tp{
  display:block;padding:13px;background:var(--p-bg);
  font-family:var(--p-font);border-bottom:1px solid var(--border-soft);
}
.tp-atas{display:flex;align-items:center;gap:7px;margin-bottom:10px}
.tp-mark{
  width:19px;height:19px;border-radius:var(--p-r-ikon);flex:none;
  background:linear-gradient(140deg, var(--p-primary), var(--p-accent));
}
.tp-judul{
  font-size:11.5px;font-weight:var(--p-tebal);letter-spacing:var(--p-spasi);
  color:var(--p-text);line-height:1;white-space:nowrap;
}
.tp-titik{margin-left:auto;display:flex;gap:3px;flex:none}
.tp-titik i{width:5px;height:5px;border-radius:50%;background:var(--p-muted);opacity:.6}

.tp-hero{
  display:block;border-radius:var(--p-r-besar);padding:10px 11px;margin-bottom:9px;
  background:var(--p-hero);color:#fff;position:relative;overflow:hidden;
}
.tp-hero small{display:block;font-size:8.5px;opacity:.85;letter-spacing:.02em}
.tp-hero b{
  display:block;font-size:15.5px;line-height:1.2;margin-top:2px;
  font-weight:var(--p-tebal);letter-spacing:var(--p-spasi);
}
.tp-baris{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tp-kotak{
  display:block;border-radius:var(--p-r);padding:8px;
  background:var(--p-surface);border:1px solid var(--p-border);
}
.tp-kotak i{display:block;width:15px;height:15px;border-radius:var(--p-r-ikon);margin-bottom:6px}
.tp-kotak em{display:block;height:5px;border-radius:3px;background:var(--p-muted);opacity:.5}
.tp-kotak em + em{margin-top:4px;width:62%}

/* ---- Keterangan di bawah tiruan ---- */
.tema-info{display:block;padding:11px 13px 13px}
.tema-nama{
  display:block;font-size:14.5px;font-weight:660;color:var(--text);
  line-height:1.2;margin-bottom:3px;
}
.tema-ket{display:block;font-size:11.7px;color:var(--muted);line-height:1.5}
.tema-cek{
  position:absolute;top:9px;right:9px;width:22px;height:22px;border-radius:50%;
  background:var(--primary);display:none;place-items:center;
  box-shadow:0 2px 10px -2px var(--primary);
}
.tema-cek svg{width:13px;height:13px;stroke:#fff;stroke-width:3}
.tema-kartu.on .tema-cek{display:grid}

@media (max-width:430px){
  .tema-grid{gap:10px}
  .tp{padding:9px}
  .tp-atas{gap:5px;margin-bottom:8px}
  .tp-mark{width:16px;height:16px}
  .tp-judul{font-size:10.5px}
  .tp-hero{padding:8px 9px;margin-bottom:7px}
  .tp-hero b{font-size:13px}
  .tp-baris{gap:6px}
  .tp-kotak{padding:6px}
  .tema-info{padding:9px 10px 11px}
  .tema-nama{font-size:13px}
  .tema-ket{font-size:10.8px;line-height:1.42}
}