/* ═══════════════════════════════════════════════════════════════
   app.css — Flip7 Design System
   Retro-playful · Teal / Coral / Gold / Cream
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Primary Teal ── */
  --teal:        #2BA8A2;
  --teal-light:  #3CC4BD;
  --teal-dark:   #1E8C86;
  --teal-bg:     #E8F6F5;
  --teal-ink:    #14403D;

  /* ── Accent Gold ── */
  --gold:        #FFD23F;
  --gold-light:  #FFE47A;
  --gold-dark:   #E6B800;
  --gold-ink:    #96700A;
  --gold-bg:     #FFF8E7;

  /* ── Coral ── */
  --coral:       #EF6C4A;
  --coral-light: #FF8A6A;
  --coral-dark:  #D45233;
  --coral-bg:    #FDEDE8;

  /* ── Support ── */
  --cream:       #FFF8E7;
  --sky:         #5DADE2;
  --sky-bg:      #EAF4FB;
  --sky-ink:     #2E86C1;
  --success:     #27AE60;
  --error:       #E74C3C;

  /* ── Surface ── */
  --surface:      #EFF8F7;
  --surface-card: #FFFFFF;
  --line:         #DCEDEB;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  background: var(--surface);
  color: #17302E;
  font-family: var(--font-body);
  font-weight: 500;
}

[x-cloak] { display:none !important; }

::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#BFE0DC; border-radius:999px; }
::-webkit-scrollbar-thumb:hover { background:#9ED2CC; }

/* ── Headlines: extra-bold + generous tracking ── */
h1, h2, h3 { letter-spacing:.2px; }
h1 { letter-spacing:.4px; }

/* ═══════════════ Navigation ═══════════════ */
.nav-active {
  background: linear-gradient(135deg, var(--teal-bg), #DCF2EF);
  color: var(--teal-dark);
  border-left:3px solid var(--teal);
  box-shadow: inset 0 0 0 1px rgba(43,168,162,.12);
}
.nav-active .nav-icon { color: var(--teal-dark); }
.nav-item { border-left:3px solid transparent; transition:all .15s cubic-bezier(.34,1.56,.64,1); }
.nav-item:hover { background: var(--teal-bg); border-left-color:#B7E4DF; color: var(--teal-dark) !important; }

/* ═══════════════ Cards ═══════════════ */
.card { transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.card:hover {
  box-shadow: 0 6px 22px rgba(43,168,162,.16);
  border-color:#CFEAE6 !important;
  transform: translateY(-1px);
}

/* Left-accent card (state communication) */
.card-accent { border-left:6px solid var(--teal-light) !important; }
.card-accent.is-win   { border-left-color: var(--gold) !important; }
.card-accent.is-alert { border-left-color: var(--coral) !important; }

/* ═══════════════ Badges / Tags ═══════════════ */
.tag {
  display:inline-flex; align-items:center; gap:2px;
  padding:3px 11px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.2px;
  line-height:1.5;
}

.badge-violet { background:var(--teal-bg);   color:var(--teal-dark); }
.badge-blue   { background:var(--sky-bg);    color:var(--sky-ink);   }
.badge-green  { background:#E9F7EF;          color:#1E8449;          }
.badge-amber  { background:#FFF3D6;          color:var(--gold-ink);  }
.badge-pink   { background:var(--coral-bg);  color:var(--coral-dark);}
.badge-slate  { background:#F0F5F4;          color:#5B6B6B;          }
.badge-red    { background:#FDECEA;          color:#C0392B;          }
.badge-teal   { background:var(--teal-bg);   color:var(--teal-dark); }

/* ═══════════════ Inputs — cream surfaces ═══════════════ */
input[type=checkbox] { accent-color:var(--teal); width:16px; height:16px; cursor:pointer; }

.input-clean {
  border:1.5px solid #DDEBE9; border-radius:var(--radius-md);
  padding:9px 14px; font-size:13px; font-weight:500;
  outline:none; transition:border-color .15s, box-shadow .15s, background .15s;
  background:var(--cream); color:#17302E; width:100%;
}
.input-clean::placeholder { color:#9BB3B0; }
.input-clean:hover { border-color:#C2E2DE; }
.input-clean:focus {
  border-color: var(--teal);
  background:#FFFDF7;
  box-shadow: 0 0 0 4px rgba(43,168,162,.15);
}
textarea.input-clean { resize:vertical; min-height:76px; }
select.input-clean { cursor:pointer; }

/* ═══════════════ Stat cards ═══════════════ */
.stat-card {
  border-top:3px solid transparent !important;
  border-radius:var(--radius-lg) !important;
  transition:transform .18s ease, box-shadow .18s ease;
}
.stat-card:hover { transform:translateY(-2px); box-shadow:0 8px 22px rgba(43,168,162,.12) !important; }
.stat-blue   { border-top-color: var(--sky)     !important; }
.stat-violet { border-top-color: var(--teal)    !important; }
.stat-green  { border-top-color: var(--success) !important; }
.stat-amber  { border-top-color: var(--gold)    !important; }
.stat-red    { border-top-color: var(--coral)   !important; }

/* ═══════════════ Tables ═══════════════ */
.trow { transition:background .12s; }
.trow:hover { background:#F7FCFB; }

.vrow { transition:background .12s; }
.vrow:hover { background:#F7FCFB; }
.vrow td { vertical-align:top; }

.prog-bar { height:6px; border-radius:999px; background:#DFF0ED; overflow:hidden; }
.prog-fill { height:100%; border-radius:999px; transition:width .32s cubic-bezier(.34,1.2,.64,1); }

/* ═══════════════ Modals ═══════════════ */
.modal-overlay {
  position:fixed; inset:0; background:rgba(20,64,61,.42);
  backdrop-filter:blur(3px); z-index:50;
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.modal-box {
  background:var(--surface-card); border-radius:var(--radius-xl);
  border:1px solid var(--line);
  width:100%; max-width:560px; max-height:90vh; overflow-y:auto;
  box-shadow:0 24px 60px rgba(20,64,61,.22);
}
.modal-box-wide { max-width:800px; }
.modal-box-xl   { max-width:680px; }
.modal-box-read { max-width:920px; } /* modal baca detail: lebih lebar, body-nya yang scroll */

/* ═══════════════ Icon picker ═══════════════ */
.icon-opt { cursor:pointer; border:2px solid transparent; border-radius:var(--radius-md); padding:8px; transition:all .12s; }
.icon-opt:hover { border-color:#A9DED8; background:var(--teal-bg); }
.icon-opt.selected { border-color:var(--teal); background:var(--teal-bg); box-shadow:0 0 0 3px rgba(43,168,162,.14); }

.delete-zone { transition:all .12s; border-radius:var(--radius-md); }
.delete-zone:hover { background:var(--coral-bg) !important; border-color:var(--coral-light) !important; color:var(--coral-dark) !important; }

/* ═══════════════ Judgment states ═══════════════ */
.judgment-winning { background:#FFF6DC !important; color:var(--gold-ink) !important;  border:1.5px solid var(--gold) !important; }
.judgment-testing { background:var(--sky-bg) !important; color:var(--sky-ink) !important; border:1.5px solid #BBDDF3 !important; }
.judgment-loser   { background:var(--coral-bg) !important; color:#B23A1E !important; border:1.5px solid #F7C4B3 !important; }
.judgment-none    { background:#F0F5F4 !important; color:#93A5A4 !important; border:1.5px solid #E1ECEA !important; }

/* ═══════════════ Bank cards ═══════════════ */
.bank-card { transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease; }
.bank-card:hover { box-shadow:0 6px 20px rgba(43,168,162,.15); border-color:#CFEAE6 !important; transform:translateY(-1px); }
.copy-btn { opacity:0; transition:opacity .15s; }
.bank-card:hover .copy-btn { opacity:1; }

/* ═══════════════ Filter pills ═══════════════ */
.cat-pill {
  cursor:pointer; padding:6px 16px; border-radius:999px;
  font-size:12px; font-weight:600;
  border:1.5px solid #DDEBE9; background:var(--cream); color:#6C8683;
  transition:all .14s cubic-bezier(.34,1.56,.64,1);
}
.cat-pill:hover { border-color:#A9DED8; background:var(--teal-bg); color:var(--teal-dark); transform:translateY(-1px); }
.cat-pill.active {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  border-color: var(--gold-dark); color:var(--teal-ink); font-weight:800;
  box-shadow: 0 4px 14px rgba(255,210,63,.45);
}

/* ═══════════════ Flip7 Buttons ═══════════════ */
.btn-brand {
  border-radius:999px !important;
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  color:#fff;
  box-shadow: 0 6px 18px rgba(43,168,162,.38);
  transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, filter .15s;
}
.btn-brand:hover { filter:brightness(1.06); box-shadow:0 8px 24px rgba(43,168,162,.48); }
.btn-brand:active { transform:scale(.95); }

.btn-gold {
  border-radius:999px !important;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--teal-ink);
  box-shadow: 0 6px 18px rgba(255,210,63,.5);
  transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, filter .15s;
}
.btn-gold:hover { filter:brightness(1.05); box-shadow:0 8px 24px rgba(255,210,63,.62); }
.btn-gold:active { transform:scale(.95); }

.btn-soft {
  border-radius:999px !important;
  background: var(--cream);
  border:1.5px solid var(--line);
  color: var(--teal-dark);
  transition: all .15s cubic-bezier(.34,1.56,.64,1);
}
.btn-soft:hover { background:var(--teal-bg); border-color:#A9DED8; transform:translateY(-1px); }

.btn-coral {
  border-radius:999px !important;
  background: linear-gradient(135deg, var(--coral), var(--coral-dark));
  color:#fff;
  box-shadow: 0 6px 18px rgba(239,108,74,.42);
  transition: transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
}
.btn-coral:active { transform:scale(.95); }

/* ═══════════════ Section titles ═══════════════ */
.section-title {
  display:flex; align-items:center; gap:8px;
  font-weight:800; letter-spacing:.3px;
  padding-bottom:10px; margin-bottom:14px;
  border-bottom:3px dashed #CFEAE6;
}

/* ═══════════════ Glow helpers ═══════════════ */
.glow-teal  { box-shadow:0 4px 20px rgba(43,168,162,.30); }
.glow-gold  { box-shadow:0 4px 20px rgba(255,210,63,.42); }
.glow-coral { box-shadow:0 4px 20px rgba(239,108,74,.35); }
.glow-sky   { box-shadow:0 4px 16px rgba(93,173,226,.30); }

/* ═══════════════ Animations ═══════════════ */
@keyframes f7-pop {
  0%   { transform:scale(.92); opacity:0; }
  60%  { transform:scale(1.03); opacity:1; }
  100% { transform:scale(1); }
}
.anim-pop { animation: f7-pop .22s cubic-bezier(.34,1.56,.64,1); }

@keyframes f7-glow {
  0%,100% { opacity:.55; transform:scale(1); }
  50%     { opacity:1;   transform:scale(1.03); }
}
.anim-glow { animation: f7-glow 2s ease-in-out infinite; }

@keyframes f7-crown {
  0%,100% { transform:translateY(0) rotate(-4deg); }
  50%     { transform:translateY(-4px) rotate(4deg); }
}
.anim-crown { animation: f7-crown 1.5s ease-in-out infinite; }

/* Button toggle tema (sidebar) */
.theme-toggle {
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 12px; border-radius:var(--radius-md);
  border:1.5px solid var(--line); background:var(--cream); color:var(--teal-dark);
  font-size:13px; font-weight:700; cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
.theme-toggle:hover { background:var(--teal-bg); border-color:#A9DED8; }
.theme-toggle .theme-toggle-hint { margin-left:auto; font-size:10px; font-weight:600; color:#9BB3B0; }

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — diaktifkan lewat <html class="dark"> (lihat head.ejs)
   Override memakai !important karena markup memakai utility Tailwind
   dan inline style warna terang. Selector [class~="…"] dipakai agar
   token arbitrary (mis. bg-[#FFF8E7]/60) bisa ditembak tanpa escape.
   ═══════════════════════════════════════════════════════════════ */
html.dark {
  color-scheme: dark;
  --surface:      #0E1615;
  --surface-card: #16201F;
  --line:         #24322F;
  --cream:        #1A2422;
  --teal-bg:      #123230;
  --teal-ink:     #CDF1ED;
  --gold-bg:      #2A2416;
  --coral-bg:     #2C1B17;
  --sky-bg:       #10222E;
  --sky-ink:      #86CBF0;
  --teal-dark:    #2FB8B0;
}

html.dark body { background:#0E1615; color:#DCE8E5; }

/* ── Latar halaman / sidebar (inline style) ── */
html.dark [style*="#EFF8F7"]   { background:#0E1615 !important; }
html.dark [style*="#F7FCFB"]   { background:#16201F !important; }
html.dark [style*="linear-gradient(135deg,#E8F6F5"] { background:linear-gradient(135deg,#16241F,#152521) !important; }
html.dark [style*="#DCEDEB"]   { border-color:#24322F !important; }
html.dark [style*="color:#1E8C86"] { color:#4FD3CB !important; }
html.dark .app-sidebar {
  background:linear-gradient(180deg,#131E1C,#0F1918) !important;
  border-right-color:#22302C !important;
}

/* ── Background utility ── */
html.dark [class~="bg-white"]        { background-color:#16201F !important; }
html.dark [class~="bg-gray-50"]      { background-color:#1B2624 !important; }
html.dark [class~="bg-gray-50/50"]   { background-color:rgba(27,38,36,.55) !important; }
html.dark [class~="bg-gray-50/60"]   { background-color:rgba(27,38,36,.65) !important; }
html.dark [class~="bg-gray-50/70"]   { background-color:rgba(27,38,36,.75) !important; }
html.dark [class~="bg-gray-100"]     { background-color:#202C29 !important; }
html.dark [class~="bg-gray-200"]     { background-color:#2A3835 !important; }
html.dark [class~="bg-gray-900"]     { background-color:#0A1211 !important; }
html.dark [class~="bg-amber-50"],
html.dark [class~="bg-amber-50/50"],
html.dark [class~="bg-amber-50/60"],
html.dark [class~="bg-amber-50/70"]  { background-color:rgba(255,210,63,.12) !important; }
html.dark [class~="bg-green-50"],
html.dark [class~="bg-green-50/50"]  { background-color:rgba(39,174,96,.14) !important; }
html.dark [class~="bg-red-50"],
html.dark [class~="bg-red-50/50"]    { background-color:rgba(231,76,60,.15) !important; }
html.dark [class~="bg-[#F4FBFA]"]    { background-color:#15201F !important; }
html.dark [class~="bg-[#E8F6F5]"],
html.dark [class~="bg-[#E8F6F5]/60"] { background-color:rgba(60,196,189,.12) !important; }
html.dark [class~="bg-[#FFF8E7]/60"] { background-color:rgba(255,210,63,.1) !important; }
html.dark [class~="bg-[#1E8C86]"],
html.dark [class~="bg-[#2BA8A2]"]    { background-color:#2FB8B0 !important; }

/* ── Hover background ── */
html.dark [class~="hover:bg-gray-50"]:hover,
html.dark [class~="hover:bg-white"]:hover,
html.dark [class~="hover:bg-[#F4FBFA]"]:hover { background-color:#1F2B29 !important; }
html.dark [class~="hover:bg-red-50"]:hover,
html.dark [class~="hover:bg-red-50/60"]:hover { background-color:rgba(231,76,60,.2) !important; }
html.dark [class~="hover:bg-[#FFF8E7]"]:hover { background-color:rgba(255,210,63,.14) !important; }
html.dark [class~="hover:bg-[#E8F6F5]"]:hover,
html.dark [class~="hover:bg-[#E8F6F5]/60"]:hover { background-color:rgba(60,196,189,.16) !important; }
html.dark [class~="hover:bg-[#146059]"]:hover,
html.dark [class~="hover:bg-[#1E8C86]"]:hover { background-color:#2FB8B0 !important; }

/* ── Teks ── */
html.dark [class~="text-gray-900"] { color:#EAF4F2 !important; }
html.dark [class~="text-gray-800"] { color:#E1EEEB !important; }
html.dark [class~="text-gray-700"] { color:#CBD9D5 !important; }
html.dark [class~="text-gray-600"] { color:#AFC1BD !important; }
html.dark [class~="text-gray-500"] { color:#93A8A4 !important; }
html.dark [class~="text-gray-400"] { color:#7F948F !important; }
html.dark [class~="text-gray-300"] { color:#647874 !important; }
html.dark [class~="text-gray-200"] { color:#4E635F !important; }
html.dark [class~="text-gray-100"] { color:#3F534F !important; }
html.dark [class~="text-[#1E8C86]"]    { color:#4FD3CB !important; }
html.dark [class~="text-[#1E8C86]/80"] { color:rgba(79,211,203,.85) !important; }
html.dark [class~="text-[#146059]"]    { color:#6FD8D0 !important; }
html.dark [class~="text-[#2BA8A2]"]    { color:#4FD3CB !important; }
html.dark [class~="text-[#2E86C1]"]    { color:#86CBF0 !important; }
html.dark [class~="text-[#6C8683]"]    { color:#9BB3B0 !important; }
html.dark [class~="text-[#B98600]"]    { color:#F2C64B !important; }
html.dark [class~="text-[#E6B800]"]    { color:#FFD23F !important; }
html.dark [class~="text-[#96700A]"]    { color:#E3BE5A !important; }
html.dark [class~="text-red-300"],
html.dark [class~="text-red-400"]      { color:#FF9C8C !important; }
html.dark [class~="text-red-500"],
html.dark [class~="text-red-600"]      { color:#FF8A7A !important; }
html.dark [class~="text-green-400"]    { color:#63D68F !important; }
html.dark [class~="text-green-600"],
html.dark [class~="text-green-700"]    { color:#7CE0A3 !important; }
html.dark [class~="text-amber-300"],
html.dark [class~="text-amber-400"]    { color:#FFDE7A !important; }
html.dark [class~="text-amber-500"],
html.dark [class~="text-amber-600"],
html.dark [class~="text-amber-700"]    { color:#FFD23F !important; }

/* ── Border & divider ── */
html.dark [class~="border-gray-50"]  { border-color:#1C2825 !important; }
html.dark [class~="border-gray-100"] { border-color:#24322F !important; }
html.dark [class~="border-gray-200"] { border-color:#2C3B37 !important; }
html.dark [class~="border-gray-300"] { border-color:#3A4A46 !important; }
html.dark [class~="border-amber-100"],
html.dark [class~="border-[#FFECC2]"] { border-color:rgba(255,210,63,.3) !important; }
html.dark [class~="border-green-100"],
html.dark [class~="border-green-200"] { border-color:rgba(39,174,96,.4) !important; }
html.dark [class~="border-red-100"],
html.dark [class~="border-red-200"]   { border-color:rgba(231,76,60,.42) !important; }
html.dark [class~="border-[#A9DED8]"] { border-color:rgba(60,196,189,.42) !important; }
html.dark [class~="border-[#D5EDEA]"] { border-color:#2B3A36 !important; }
html.dark [class~="border-[#FFD23F]"] { border-color:rgba(255,210,63,.55) !important; }
html.dark [class~="border-[#1E8C86]"] { border-color:#3CC4BD !important; }
html.dark [class~="divide-gray-50"] > :not([hidden]) ~ :not([hidden]) { border-color:#22302C !important; }

/* ── Hover/focus border & teks ── */
html.dark [class~="hover:border-gray-200"]:hover,
html.dark [class~="hover:border-gray-300"]:hover { border-color:#3A4A46 !important; }
html.dark [class~="hover:border-[#A9DED8]"]:hover { border-color:rgba(60,196,189,.65) !important; }
html.dark [class~="hover:border-red-200"]:hover   { border-color:rgba(231,76,60,.55) !important; }
html.dark [class~="focus:border-[#A9DED8]"]:focus { border-color:#3CC4BD !important; }
html.dark [class~="focus:bg-white"]:focus         { background-color:#111B1A !important; }
html.dark [class~="hover:text-gray-600"]:hover,
html.dark [class~="hover:text-gray-700"]:hover    { color:#DCE9E5 !important; }
html.dark [class~="hover:text-[#1E8C86]"]:hover,
html.dark [class~="hover:text-[#146059]"]:hover,
html.dark [class~="hover:text-[#2BA8A2]"]:hover   { color:#7FE8E1 !important; }
html.dark [class~="hover:text-[#96700A]"]:hover   { color:#FFD23F !important; }
html.dark [class~="hover:text-red-400"]:hover,
html.dark [class~="hover:text-red-500"]:hover     { color:#FF9C8C !important; }
html.dark [class~="hover:text-amber-400"]:hover   { color:#FFDE7A !important; }

/* ── Komponen ── */
html.dark .nav-active {
  background:linear-gradient(135deg,rgba(60,196,189,.2),rgba(60,196,189,.08));
  color:#5FDCD4;
  box-shadow:inset 0 0 0 1px rgba(60,196,189,.18);
}
html.dark .nav-active .nav-icon { color:#5FDCD4; }
html.dark .nav-item:hover {
  background:rgba(60,196,189,.12);
  border-left-color:rgba(60,196,189,.45);
  color:#7FE8E1 !important;
}
html.dark .card:hover,
html.dark .bank-card:hover {
  border-color:#2E4A45 !important;
  box-shadow:0 6px 22px rgba(0,0,0,.45);
}

html.dark .input-clean {
  background:#111B1A; border-color:#2A3A36; color:#E4EFED;
}
html.dark .input-clean::placeholder { color:#6E837F; }
html.dark .input-clean:hover { border-color:#374A45; }
html.dark .input-clean:focus {
  background:#0F1918; border-color:var(--teal);
  box-shadow:0 0 0 4px rgba(60,196,189,.18);
}
html.dark select.input-clean option { background:#16201F; color:#E4EFED; }
html.dark input[type=date]::-webkit-calendar-picker-indicator { filter:invert(.85) brightness(1.2); }
html.dark input[type=checkbox] { accent-color:#3CC4BD; }

html.dark .btn-soft { background:#1B2624; border-color:#2C3B37; color:#7FE8E1; }
html.dark .btn-soft:hover { background:rgba(60,196,189,.15); border-color:rgba(60,196,189,.5); }
html.dark .cat-pill { background:#1B2624; border-color:#2C3B37; color:#9BB3B0; }
html.dark .cat-pill:hover { background:rgba(60,196,189,.14); border-color:rgba(60,196,189,.45); color:#7FE8E1; }
html.dark .cat-pill.active { color:#14403D; }

html.dark .badge-violet,
html.dark .badge-teal  { background:rgba(60,196,189,.16); color:#7FE8E1; }
html.dark .badge-blue  { background:rgba(93,173,226,.18);  color:#8FCDF2; }
html.dark .badge-green { background:rgba(39,174,96,.18);   color:#7CE0A3; }
html.dark .badge-amber { background:rgba(255,210,63,.16);  color:#FFD86B; }
html.dark .badge-pink  { background:rgba(239,108,74,.18);  color:#FF9A7C; }
html.dark .badge-slate { background:rgba(148,163,184,.16); color:#B6C4C1; }
html.dark .badge-red   { background:rgba(231,76,60,.18);   color:#FF9A8B; }

html.dark .judgment-winning { background:rgba(255,210,63,.16) !important; color:#FFD86B !important; border-color:rgba(255,210,63,.55) !important; }
html.dark .judgment-testing { background:rgba(93,173,226,.18) !important; color:#8FCDF2 !important; border-color:rgba(93,173,226,.5) !important; }
html.dark .judgment-loser   { background:rgba(239,108,74,.18) !important; color:#FF9A7C !important; border-color:rgba(239,108,74,.5) !important; }
html.dark .judgment-none    { background:rgba(148,163,184,.14) !important; color:#8B9E9A !important; border-color:#2C3B37 !important; }

html.dark .trow:hover,
html.dark .vrow:hover { background:#1B2624; }
html.dark .prog-bar { background:#223230; }
html.dark .modal-overlay { background:rgba(4,10,9,.62); }
html.dark .modal-box { box-shadow:0 24px 60px rgba(0,0,0,.55); }
html.dark .section-title { border-bottom-color:#2A3835; }
html.dark .icon-opt:hover { border-color:rgba(60,196,189,.5); background:rgba(60,196,189,.12); }
html.dark .icon-opt.selected { border-color:#3CC4BD; background:rgba(60,196,189,.18); box-shadow:0 0 0 3px rgba(60,196,189,.16); }
html.dark .delete-zone:hover {
  background:rgba(239,108,74,.16) !important;
  border-color:rgba(239,108,74,.5) !important;
  color:#FF9A7C !important;
}
html.dark .theme-toggle { background:#1B2624; border-color:#2C3B37; color:#7FE8E1; }
html.dark .theme-toggle:hover { background:rgba(60,196,189,.14); border-color:rgba(60,196,189,.5); }
html.dark .theme-toggle .theme-toggle-hint { color:#6E837F; }
html.dark ::-webkit-scrollbar-thumb { background:#2C403C; }
html.dark ::-webkit-scrollbar-thumb:hover { background:#3A524D; }