/* ==========================================================================
   KasirKu Denta GSM — PALET WARNA (5 pilihan)
   Dimuat SETELAH assets/app.css. Setiap palet mengubah aksen DAN latar tema
   (gelap & terang), jadi seluruh aplikasi ikut berubah.

   Dipilih lewat: Pengaturan (Owner, tersimpan untuk semua perangkat) ATAU
   tombol palet di pojok kanan atas (per perangkat, cookie `kasir_accent`).

   Atribut di <html>: data-theme="dark|light" data-accent="violet|gold|rose|
   magenta|cyan". Blok di bawah memakai dua atribut sekaligus supaya
   spesifisitasnya lebih tinggi dari blok tema dasar di app.css.
   Tanpa color-mix(), tanpa :has().
   ========================================================================== */


/* ---------- Palet: Biru – Ungu (violet) ---------- */

html[data-theme="dark"][data-accent="violet"] {
  --bg: #070A15;
  --surface: #0E1424;
  --surface-2: #131A2E;
  --surface-3: #1A2340;
  --border: rgba(147, 168, 255, .14);
  --border-2: rgba(147, 168, 255, .24);
  --txt: #E9EDFA;
  --muted: #95A0C0;
  --muted-2: #6B7699;
  --primary: #6366F1;
  --primary-2: #A855F7;
  --grad: linear-gradient(135deg, #3B82F6 0%, #6366F1 48%, #A855F7 100%);
  --grad-soft: linear-gradient(135deg, rgba(59, 130, 246, .20), rgba(168, 85, 247, .16));
  --vio: #C4B5FD;
  --vio-soft: rgba(168, 85, 247, .16);
  --vio-line: rgba(168, 85, 247, .34);
  --b1: #3B82F6; --b2: #6366F1; --b3: #8B5CF6; --b4: #A855F7;
  --sb-from: #0A1020;
  --sb-to: #0C1226;
  --input-bg: #0A1020;
  --table-head: rgba(255, 255, 255, .035);
  --modal-bg: #111A2C;
  --bubble-halo-1: rgba(59, 130, 246, .16);
  --bubble-halo-2: rgba(168, 85, 247, .14);
  --page-glow: radial-gradient(760px 420px at 6% -12%, rgba(37, 99, 235, .22), transparent 62%),
               radial-gradient(700px 420px at 100% 0%, rgba(139, 92, 246, .20), transparent 60%);
  --glow-1: #3B82F6; --glow-2: #6366F1; --glow-3: #A855F7; --glow-4: #22D3EE;
  --glow-shadow: rgba(99, 102, 241, .45);
}

html[data-theme="light"][data-accent="violet"] {
  --bg: #F4F6FC;
  --surface: #FFFFFF;
  --surface-2: #F8FAFF;
  --surface-3: #EEF2FC;
  --border: #E2E8F7;
  --border-2: #CFD9F0;
  --txt: #121B33;
  --muted: #5D6B8C;
  --muted-2: #8B97B4;
  --primary: #4F46E5;
  --primary-2: #7C3AED;
  --grad: linear-gradient(135deg, #2563EB 0%, #4F46E5 48%, #7C3AED 100%);
  --grad-soft: linear-gradient(135deg, rgba(37, 99, 235, .10), rgba(124, 58, 237, .09));
  --vio: #6D28D9;
  --vio-soft: #F1EBFE;
  --vio-line: #D8C9FA;
  --b1: #60A5FA; --b2: #818CF8; --b3: #A78BFA; --b4: #C084FC;
  --sb-from: #101A3A;
  --sb-to: #1B1440;
  --input-bg: #FFFFFF;
  --table-head: #F5F8FF;
  --modal-bg: #FFFFFF;
  --bubble-halo-1: rgba(59, 130, 246, .10);
  --bubble-halo-2: rgba(168, 85, 247, .09);
  --page-glow: radial-gradient(760px 420px at 6% -12%, rgba(59, 130, 246, .14), transparent 62%),
               radial-gradient(700px 420px at 100% 0%, rgba(139, 92, 246, .12), transparent 60%);
  --glow-1: #2563EB; --glow-2: #7C3AED; --glow-3: #A21CAF; --glow-4: #0891B2;
  --glow-shadow: rgba(79, 70, 229, .28);
}


/* ---------- Palet: Emas (gold) ---------- */

html[data-theme="dark"][data-accent="gold"] {
  --bg: #0B0904;
  --surface: #17120A;
  --surface-2: #1E1809;
  --surface-3: #2A2110;
  --border: rgba(255, 214, 140, .16);
  --border-2: rgba(255, 214, 140, .28);
  --txt: #F6EFE2;
  --muted: #C2B08B;
  --muted-2: #8E7F63;
  --primary: #F59E0B;
  --primary-2: #FBBF24;
  --grad: linear-gradient(135deg, #D97706 0%, #F59E0B 48%, #FCD34D 100%);
  --grad-soft: linear-gradient(135deg, rgba(217, 119, 6, .22), rgba(252, 211, 77, .15));
  --vio: #FDE68A;
  --vio-soft: rgba(245, 158, 11, .16);
  --vio-line: rgba(245, 158, 11, .34);
  --b1: #B45309; --b2: #D97706; --b3: #F59E0B; --b4: #FCD34D;
  --sb-from: #120D06;
  --sb-to: #1A1206;
  --input-bg: #100B05;
  --table-head: rgba(255, 255, 255, .04);
  --modal-bg: #201807;
  --bubble-halo-1: rgba(217, 119, 6, .18);
  --bubble-halo-2: rgba(252, 211, 77, .13);
  --page-glow: radial-gradient(760px 420px at 6% -12%, rgba(217, 119, 6, .20), transparent 62%),
               radial-gradient(700px 420px at 100% 0%, rgba(251, 191, 36, .16), transparent 60%);
  --glow-1: #D97706; --glow-2: #F59E0B; --glow-3: #FBBF24; --glow-4: #FDE68A;
  --glow-shadow: rgba(245, 158, 11, .42);
}

html[data-theme="light"][data-accent="gold"] {
  --bg: #FBF7EE;
  --surface: #FFFFFF;
  --surface-2: #FFFCF5;
  --surface-3: #F6EEDC;
  --border: #EFE3C9;
  --border-2: #E2D1AC;
  --txt: #2A2109;
  --muted: #6E603F;
  --muted-2: #9C8C6B;
  --primary: #B45309;
  --primary-2: #D97706;
  --grad: linear-gradient(135deg, #B45309 0%, #D97706 48%, #F59E0B 100%);
  --grad-soft: linear-gradient(135deg, rgba(180, 83, 9, .10), rgba(245, 158, 11, .10));
  --vio: #92400E;
  --vio-soft: #FEF3D7;
  --vio-line: #EFD9A6;
  --b1: #D97706; --b2: #F59E0B; --b3: #FBBF24; --b4: #FCD34D;
  --sb-from: #241703;
  --sb-to: #2E1E06;
  --input-bg: #FFFFFF;
  --table-head: #FDF7EA;
  --modal-bg: #FFFFFF;
  --bubble-halo-1: rgba(217, 119, 6, .10);
  --bubble-halo-2: rgba(251, 191, 36, .10);
  --page-glow: radial-gradient(760px 420px at 6% -12%, rgba(217, 119, 6, .14), transparent 62%),
               radial-gradient(700px 420px at 100% 0%, rgba(251, 191, 36, .12), transparent 60%);
  --glow-1: #B45309; --glow-2: #D97706; --glow-3: #F59E0B; --glow-4: #FBBF24;
  --glow-shadow: rgba(180, 83, 9, .26);
}


/* ---------- Palet: Rose / Pink (rose) ---------- */

html[data-theme="dark"][data-accent="rose"] {
  --bg: #0C060A;
  --surface: #1A0F16;
  --surface-2: #22131C;
  --surface-3: #2C1A24;
  --border: rgba(255, 168, 200, .16);
  --border-2: rgba(255, 168, 200, .28);
  --txt: #F8EAF0;
  --muted: #C4A5B3;
  --muted-2: #90707E;
  --primary: #F43F5E;
  --primary-2: #FB7185;
  --grad: linear-gradient(135deg, #BE123C 0%, #F43F5E 48%, #FB7185 100%);
  --grad-soft: linear-gradient(135deg, rgba(190, 18, 60, .22), rgba(251, 113, 133, .16));
  --vio: #FDA4AF;
  --vio-soft: rgba(244, 63, 94, .16);
  --vio-line: rgba(244, 63, 94, .34);
  --b1: #E11D48; --b2: #F43F5E; --b3: #FB7185; --b4: #FDA4AF;
  --sb-from: #120A10;
  --sb-to: #1B0C15;
  --input-bg: #10070C;
  --table-head: rgba(255, 255, 255, .04);
  --modal-bg: #221018;
  --bubble-halo-1: rgba(225, 29, 72, .18);
  --bubble-halo-2: rgba(251, 113, 133, .14);
  --page-glow: radial-gradient(760px 420px at 6% -12%, rgba(190, 18, 60, .20), transparent 62%),
               radial-gradient(700px 420px at 100% 0%, rgba(251, 113, 133, .16), transparent 60%);
  --glow-1: #E11D48; --glow-2: #F43F5E; --glow-3: #FB7185; --glow-4: #FDA4AF;
  --glow-shadow: rgba(244, 63, 94, .42);
}

html[data-theme="light"][data-accent="rose"] {
  --bg: #FDF4F7;
  --surface: #FFFFFF;
  --surface-2: #FFF8FA;
  --surface-3: #FCE9F0;
  --border: #F7DCE6;
  --border-2: #EFC6D6;
  --txt: #2C1420;
  --muted: #7A5567;
  --muted-2: #A98B99;
  --primary: #BE123C;
  --primary-2: #DB2777;
  --grad: linear-gradient(135deg, #BE123C 0%, #DB2777 48%, #F43F5E 100%);
  --grad-soft: linear-gradient(135deg, rgba(190, 18, 60, .09), rgba(219, 39, 119, .09));
  --vio: #9D174D;
  --vio-soft: #FCE7EF;
  --vio-line: #F3C3D6;
  --b1: #DB2777; --b2: #E11D48; --b3: #F43F5E; --b4: #FB7185;
  --sb-from: #2A1020;
  --sb-to: #35122A;
  --input-bg: #FFFFFF;
  --table-head: #FEF4F8;
  --modal-bg: #FFFFFF;
  --bubble-halo-1: rgba(219, 39, 119, .10);
  --bubble-halo-2: rgba(244, 63, 94, .10);
  --page-glow: radial-gradient(760px 420px at 6% -12%, rgba(219, 39, 119, .13), transparent 62%),
               radial-gradient(700px 420px at 100% 0%, rgba(244, 63, 94, .11), transparent 60%);
  --glow-1: #BE123C; --glow-2: #DB2777; --glow-3: #E11D48; --glow-4: #F43F5E;
  --glow-shadow: rgba(190, 18, 60, .26);
}


/* ---------- Palet: Ungu – Magenta (magenta) ---------- */

html[data-theme="dark"][data-accent="magenta"] {
  --bg: #0A0714;
  --surface: #150F24;
  --surface-2: #1B1330;
  --surface-3: #241A3D;
  --border: rgba(216, 168, 255, .16);
  --border-2: rgba(216, 168, 255, .28);
  --txt: #F0E9FA;
  --muted: #B3A3C9;
  --muted-2: #82719A;
  --primary: #8B5CF6;
  --primary-2: #D946EF;
  --grad: linear-gradient(135deg, #7C3AED 0%, #A855F7 48%, #E879F9 100%);
  --grad-soft: linear-gradient(135deg, rgba(124, 58, 237, .22), rgba(232, 121, 249, .16));
  --vio: #E9D5FF;
  --vio-soft: rgba(217, 70, 239, .16);
  --vio-line: rgba(217, 70, 239, .34);
  --b1: #7C3AED; --b2: #A855F7; --b3: #D946EF; --b4: #F0ABFC;
  --sb-from: #100A1C;
  --sb-to: #170B26;
  --input-bg: #0D0818;
  --table-head: rgba(255, 255, 255, .04);
  --modal-bg: #1C1230;
  --bubble-halo-1: rgba(124, 58, 237, .20);
  --bubble-halo-2: rgba(217, 70, 239, .15);
  --page-glow: radial-gradient(760px 420px at 6% -12%, rgba(124, 58, 237, .22), transparent 62%),
               radial-gradient(700px 420px at 100% 0%, rgba(217, 70, 239, .17), transparent 60%);
  --glow-1: #7C3AED; --glow-2: #A855F7; --glow-3: #D946EF; --glow-4: #F0ABFC;
  --glow-shadow: rgba(168, 85, 247, .45);
}

html[data-theme="light"][data-accent="magenta"] {
  --bg: #F7F3FD;
  --surface: #FFFFFF;
  --surface-2: #FBF7FF;
  --surface-3: #F2E9FC;
  --border: #EBDCF8;
  --border-2: #DCC6F0;
  --txt: #1E1236;
  --muted: #63497F;
  --muted-2: #9A85B4;
  --primary: #7C3AED;
  --primary-2: #C026D3;
  --grad: linear-gradient(135deg, #6D28D9 0%, #A855F7 48%, #D946EF 100%);
  --grad-soft: linear-gradient(135deg, rgba(109, 40, 217, .10), rgba(217, 70, 239, .09));
  --vio: #7E22CE;
  --vio-soft: #F5E9FE;
  --vio-line: #E2CBF7;
  --b1: #8B5CF6; --b2: #A855F7; --b3: #D946EF; --b4: #F0ABFC;
  --sb-from: #1B1038;
  --sb-to: #2A1046;
  --input-bg: #FFFFFF;
  --table-head: #FAF3FF;
  --modal-bg: #FFFFFF;
  --bubble-halo-1: rgba(124, 58, 237, .11);
  --bubble-halo-2: rgba(217, 70, 239, .10);
  --page-glow: radial-gradient(760px 420px at 6% -12%, rgba(124, 58, 237, .14), transparent 62%),
               radial-gradient(700px 420px at 100% 0%, rgba(217, 70, 239, .11), transparent 60%);
  --glow-1: #7C3AED; --glow-2: #A855F7; --glow-3: #D946EF; --glow-4: #F0ABFC;
  --glow-shadow: rgba(124, 58, 237, .28);
}


/* ---------- Palet: Biru – Cyan (cyan) ---------- */

html[data-theme="dark"][data-accent="cyan"] {
  --bg: #04101A;
  --surface: #0A1A28;
  --surface-2: #0E2131;
  --surface-3: #142C40;
  --border: rgba(140, 220, 255, .16);
  --border-2: rgba(140, 220, 255, .28);
  --txt: #E6F4FB;
  --muted: #93B4C6;
  --muted-2: #6C8FA3;
  --primary: #0EA5E9;
  --primary-2: #22D3EE;
  --grad: linear-gradient(135deg, #0369A1 0%, #0EA5E9 48%, #22D3EE 100%);
  --grad-soft: linear-gradient(135deg, rgba(3, 105, 161, .22), rgba(34, 211, 238, .16));
  --vio: #A5F3FC;
  --vio-soft: rgba(34, 211, 238, .16);
  --vio-line: rgba(34, 211, 238, .34);
  --b1: #0284C7; --b2: #0EA5E9; --b3: #22D3EE; --b4: #67E8F9;
  --sb-from: #061524;
  --sb-to: #081B2C;
  --input-bg: #05121E;
  --table-head: rgba(255, 255, 255, .04);
  --modal-bg: #0C2032;
  --bubble-halo-1: rgba(14, 165, 233, .20);
  --bubble-halo-2: rgba(34, 211, 238, .15);
  --page-glow: radial-gradient(760px 420px at 6% -12%, rgba(3, 105, 161, .22), transparent 62%),
               radial-gradient(700px 420px at 100% 0%, rgba(34, 211, 238, .17), transparent 60%);
  --glow-1: #0EA5E9; --glow-2: #22D3EE; --glow-3: #38BDF8; --glow-4: #67E8F9;
  --glow-shadow: rgba(14, 165, 233, .42);
}

html[data-theme="light"][data-accent="cyan"] {
  --bg: #F1F9FD;
  --surface: #FFFFFF;
  --surface-2: #F6FBFE;
  --surface-3: #E8F4FB;
  --border: #D8EAF5;
  --border-2: #BCDCEB;
  --txt: #0C2233;
  --muted: #4E6E82;
  --muted-2: #86A5B6;
  --primary: #0284C7;
  --primary-2: #0891B2;
  --grad: linear-gradient(135deg, #0369A1 0%, #0284C7 48%, #06B6D4 100%);
  --grad-soft: linear-gradient(135deg, rgba(3, 105, 161, .10), rgba(6, 182, 212, .10));
  --vio: #0E7490;
  --vio-soft: #E4F5FA;
  --vio-line: #BCDCEB;
  --b1: #0284C7; --b2: #0EA5E9; --b3: #22D3EE; --b4: #67E8F9;
  --sb-from: #06202E;
  --sb-to: #07283A;
  --input-bg: #FFFFFF;
  --table-head: #F2FAFE;
  --modal-bg: #FFFFFF;
  --bubble-halo-1: rgba(2, 132, 199, .11);
  --bubble-halo-2: rgba(34, 211, 238, .10);
  --page-glow: radial-gradient(760px 420px at 6% -12%, rgba(2, 132, 199, .13), transparent 62%),
               radial-gradient(700px 420px at 100% 0%, rgba(34, 211, 238, .11), transparent 60%);
  --glow-1: #0284C7; --glow-2: #0891B2; --glow-3: #0EA5E9; --glow-4: #22D3EE;
  --glow-shadow: rgba(2, 132, 199, .26);
}

/* ==========================================================================
   Tombol palet di pojok kanan atas (per perangkat)
   ========================================================================== */
.accent-wrap { position: relative; }
.accent-toggle {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 7px 11px; border-radius: 10px; font: inherit; font-size: 12px; font-weight: 700;
  color: var(--txt); background: var(--surface-2); border: 1px solid var(--border-2);
  transition: background-color .16s ease, border-color .16s ease;
}
.accent-toggle:hover { background: var(--surface-3); border-color: var(--primary); }
.accent-toggle svg { width: 15px; height: 15px; flex: 0 0 15px; }
.accent-dot {
  width: 13px; height: 13px; border-radius: 50%; flex: 0 0 13px;
  background: var(--grad); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--border-2);
}
.accent-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  width: 252px; max-width: calc(100vw - 24px);
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 13px;
  box-shadow: 0 22px 44px -24px rgba(0, 0, 0, .55), var(--shadow);
  padding: 10px; display: none;
}
.accent-pop.open { display: block; }
.accent-pop h4 { margin: 0 0 2px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.accent-pop p { margin: 0 0 8px; font-size: 10.5px; color: var(--muted-2); line-height: 1.45; }
.accent-list { display: grid; gap: 5px; }
.accent-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; cursor: pointer;
  padding: 7px 9px; border-radius: 9px; font: inherit; font-size: 12px; font-weight: 600;
  color: var(--txt); background: transparent; border: 1px solid transparent;
  transition: background-color .14s ease, border-color .14s ease;
}
.accent-item:hover { background: var(--surface-2); border-color: var(--border); }
.accent-item.is-on { background: var(--grad-soft); border-color: var(--vio-line); font-weight: 800; }
.accent-item .ac-swatch { width: 22px; height: 22px; border-radius: 7px; flex: 0 0 22px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.accent-item .ac-tick { margin-left: auto; font-size: 11px; color: var(--primary-2); opacity: 0; }
.accent-item.is-on .ac-tick { opacity: 1; }
.accent-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 10px; color: var(--muted-2); line-height: 1.5; }

/* warna swatch (nilai tetap per palet, tidak ikut tema aktif) */
.ac-swatch.sw-violet  { background: linear-gradient(135deg, #3B82F6, #6366F1 50%, #A855F7); }
.ac-swatch.sw-gold    { background: linear-gradient(135deg, #D97706, #F59E0B 50%, #FCD34D); }
.ac-swatch.sw-rose    { background: linear-gradient(135deg, #BE123C, #F43F5E 50%, #FB7185); }
.ac-swatch.sw-magenta { background: linear-gradient(135deg, #7C3AED, #A855F7 50%, #E879F9); }
.ac-swatch.sw-cyan    { background: linear-gradient(135deg, #0369A1, #0EA5E9 50%, #22D3EE); }

@media (max-width: 720px) {
  .accent-toggle { padding: 7px 9px; }
  .accent-toggle .accent-label { display: none; }
  .accent-pop { position: fixed; left: 12px; right: 12px; top: 60px; width: auto; max-width: none; }
}

/* ==========================================================================
   Pengaturan → Tampilan: pemilih tema & palet (dengan pratinjau)
   ========================================================================== */
.pal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; }
.pal-card {
  position: relative; display: block; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: 13px;
  padding: 10px; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.pal-card:hover { border-color: var(--border-2); transform: translateY(-2px); }
.pal-card input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pal-card .pal-name { display: flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 12.5px; font-weight: 800; color: var(--txt); }
.pal-card .pal-desc { display: block; margin-top: 2px; font-size: 10.5px; color: var(--muted-2); line-height: 1.45; }
.pal-card .pal-flag { margin-left: auto; font-size: 10px; font-weight: 800; color: var(--primary-2); opacity: 0; }
.pal-card.is-on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--grad-soft), var(--shadow); }
.pal-card.is-on .pal-flag { opacity: 1; }
.pal-card.is-on::after {
  content: ""; position: absolute; inset: -1px; border-radius: 13px; pointer-events: none;
  border: 1px solid var(--vio-line);
}

/* pratinjau kecil: latar kotak + garis aksen + tombol mini */
.pal-swatch {
  display: block;               /* span inline → tinggi 76px butuh display block */
  position: relative; height: 76px; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .12);
}
.pal-swatch::before { content: ""; position: absolute; inset: 0; background: var(--pal-grad); }
.pal-swatch::after { content: ""; position: absolute; left: 9px; right: 9px; top: 10px; bottom: 10px; border-radius: 8px; background: var(--pal-bg); }
.pal-swatch .ps-bar { position: absolute; z-index: 2; left: 17px; top: 19px; height: 7px; width: 46%; border-radius: 4px; background: var(--pal-txt); opacity: .55; }
.pal-swatch .ps-bar2 { position: absolute; z-index: 2; left: 17px; top: 32px; height: 5px; width: 30%; border-radius: 3px; background: var(--pal-txt); opacity: .28; }
.pal-swatch .ps-btn { position: absolute; z-index: 2; left: 17px; bottom: 17px; height: 12px; width: 40px; border-radius: 6px; background: var(--pal-grad); }
.pal-violet  { --pal-grad: linear-gradient(135deg, #3B82F6, #6366F1 50%, #A855F7); --pal-bg: #0E1424; --pal-txt: #E9EDFA; }
.pal-gold    { --pal-grad: linear-gradient(135deg, #D97706, #F59E0B 50%, #FCD34D); --pal-bg: #17120A; --pal-txt: #F6EFE2; }
.pal-rose    { --pal-grad: linear-gradient(135deg, #BE123C, #F43F5E 50%, #FB7185); --pal-bg: #1A0F16; --pal-txt: #F8EAF0; }
.pal-magenta { --pal-grad: linear-gradient(135deg, #7C3AED, #A855F7 50%, #E879F9); --pal-bg: #150F24; --pal-txt: #F0E9FA; }
.pal-cyan    { --pal-grad: linear-gradient(135deg, #0369A1, #0EA5E9 50%, #22D3EE); --pal-bg: #0A1A28; --pal-txt: #E6F4FB; }

/* kartu tema (Gelap / Terang) memakai warna palet yang sedang aktif */
.theme-card.pick { cursor: pointer; position: relative; }
.theme-card.pick input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.theme-card.pick.is-on { border-color: var(--primary); box-shadow: 0 0 0 2px var(--grad-soft); }
.theme-card.pick.is-on .theme-flag { opacity: 1; }
.theme-card .theme-flag { margin-left: auto; font-size: 10px; font-weight: 800; color: var(--primary-2); opacity: 0; }
.theme-card .theme-card-head { display: flex; align-items: center; gap: 6px; }
.page-setting .theme-prev { position: relative; overflow: hidden; }
.page-setting .theme-prev .tp-grad { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 10px; border-radius: 5px; background: var(--grad); }
.page-setting .theme-prev .tp-dots { position: absolute; left: 14px; top: 14px; display: flex; gap: 5px; }
.page-setting .theme-prev .tp-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--grad); display: block; }