:root{
  /* Themeable variables */
  --bg: #0b0f14;
  --bg2: #162033;                 /* top glow */
  --panel: rgba(18, 24, 36, 0.65);
  --cardA: rgba(255,255,255,0.04);
  --cardB: rgba(255,255,255,0.02);
  --surface: rgba(15, 21, 32, 0.85); /* inputs / sticky headers */
  --text: #e9eef7;
  --muted: #a8b3c7;
  --line: rgba(255,255,255,0.08);
  --line2: rgba(255,255,255,0.06);
  --shadow: rgba(0,0,0,0.25);

  --accent: #5aa7ff;
  --accent2:#1d4ed8;

  --hoverTint: rgba(255,255,255,0.04);
  --rowHover: rgba(255,255,255,0.04);
  --ring: rgba(90,167,255,0.12);
}

/* THEME 1 (Blue - default) */
body[data-theme="t1"]{
  --bg:#0b0f14;
  --bg2:#162033;
  --panel: rgba(18, 24, 36, 0.65);
  --cardA: rgba(255,255,255,0.04);
  --cardB: rgba(255,255,255,0.02);
  --surface: rgba(15, 21, 32, 0.85);
  --text:#e9eef7;
  --muted:#a8b3c7;
  --line: rgba(255,255,255,0.08);
  --line2: rgba(255,255,255,0.06);
  --shadow: rgba(0,0,0,0.25);
  --accent:#5aa7ff;
  --accent2:#1d4ed8;
  --rowHover: rgba(90,167,255,0.06);
  --ring: rgba(90,167,255,0.14);
}

/* THEME 2 (Emerald) */
body[data-theme="t2"]{
  --bg:#07150f;
  --bg2:#0a2a1c;
  --panel: rgba(10, 26, 20, 0.72);
  --cardA: rgba(255,255,255,0.035);
  --cardB: rgba(255,255,255,0.015);
  --surface: rgba(9, 23, 18, 0.90);
  --text:#eafff6;
  --muted:#b8d8c9;
  --line: rgba(255,255,255,0.10);
  --line2: rgba(255,255,255,0.07);
  --shadow: rgba(0,0,0,0.30);
  --accent:#34d399;
  --accent2:#059669;
  --rowHover: rgba(52,211,153,0.10);
  --ring: rgba(52,211,153,0.18);
}

/* THEME 3 (Purple) */
body[data-theme="t3"]{
  --bg:#0c0718;
  --bg2:#1c0f3a;
  --panel: rgba(20, 14, 36, 0.72);
  --cardA: rgba(255,255,255,0.04);
  --cardB: rgba(255,255,255,0.018);
  --surface: rgba(16, 11, 30, 0.90);
  --text:#f2ecff;
  --muted:#cbbcf5;
  --line: rgba(255,255,255,0.10);
  --line2: rgba(255,255,255,0.07);
  --shadow: rgba(0,0,0,0.32);
  --accent:#a78bfa;
  --accent2:#7c3aed;
  --rowHover: rgba(167,139,250,0.10);
  --ring: rgba(167,139,250,0.18);
}

/* THEME 4 (Amber/Orange) */
body[data-theme="t4"]{
  --bg:#140b05;
  --bg2:#2b1406;
  --panel: rgba(28, 16, 10, 0.75);
  --cardA: rgba(255,255,255,0.04);
  --cardB: rgba(255,255,255,0.018);
  --surface: rgba(22, 13, 8, 0.92);
  --text:#fff3e8;
  --muted:#e3cbb6;
  --line: rgba(255,255,255,0.11);
  --line2: rgba(255,255,255,0.075);
  --shadow: rgba(0,0,0,0.34);
  --accent:#fb923c;
  --accent2:#ea580c;
  --rowHover: rgba(251,146,60,0.12);
  --ring: rgba(251,146,60,0.18);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: radial-gradient(1200px 600px at 20% 0%, var(--bg2) 0%, var(--bg) 55%) fixed;
  color:var(--text);
}

.wrap{max-width:1200px; margin:0 auto; padding:24px}
.header{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; margin-bottom:18px;
}
h1{margin:0 0 6px 0; font-size:28px}
.sub{margin:0; color:var(--muted); max-width:860px; line-height:1.4}

.headerRight{
  display:flex;
  align-items:center;
  gap:12px;
}

.themeDots{
  display:flex;
  gap:8px;
  padding:8px 10px;
  border-radius:14px;
  background: rgba(255,255,255,0.04);
  border:1px solid var(--line);
}
.dot{
  width:14px; height:14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.22);
  cursor:pointer;
  padding:0;
  outline:none;
}
.dot:hover{filter:brightness(1.1)}
.dot:active{transform:translateY(1px)}
.dot.t1{background:#5aa7ff}
.dot.t2{background:#34d399}
.dot.t3{background:#a78bfa}
.dot.t4{background:#fb923c}

.btn{
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  border:1px solid rgba(255,255,255,0.15);
  color:white;
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  font-weight:600;
  white-space:nowrap;
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}

.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  margin:18px 0 18px;
}
.cards-4{grid-template-columns: repeat(4, minmax(0, 1fr));}

.card{
  background: linear-gradient(180deg, var(--cardA), var(--cardB));
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px 14px 12px;
  box-shadow: 0 10px 30px var(--shadow);
}
.card.mini{box-shadow:none}
.label{color:var(--muted); font-size:12px; letter-spacing:0.2px; margin-bottom:8px}
.big{font-size:26px; font-weight:800; margin-bottom:6px}
.muted{color:var(--muted)}
.small{font-size:13px}
.num{text-align:right}

.panel{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  margin: 18px 0;
}
.panelHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px 10px;
  border-bottom:1px solid var(--line);
}
.panelHead h2{margin:0; font-size:16px}

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
.formRow{
  display:flex;
  gap:12px;
  padding:14px;
  align-items:flex-end;
  flex-wrap:wrap;
  border-bottom:1px solid var(--line);
}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:12px; color:var(--muted)}
.field input{
  background: var(--surface);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  padding:10px 12px;
  color: var(--text);
  outline:none;
  min-width: 180px;
}
.field input:focus{
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 0 0 3px var(--ring);
}

.tableScroller{overflow:auto; max-height:50vh}
table{width:100%; border-collapse:collapse}
th, td{padding:12px 14px; border-bottom:1px solid var(--line2)}
th{
  text-align:left;
  position:sticky; top:0;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  z-index:2;
}
tbody tr:hover{background: var(--rowHover)}

.dbtn{
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  color: var(--text);
  padding:6px 10px;
  border-radius:10px;
  cursor:pointer;
}
.dbtn:hover{background: rgba(255,255,255,0.10);}

.calc{padding:14px}
.calcRow{
  display:flex;
  align-items:center;
  gap:16px;
}
#paySlider{width:100%}
.calcGrid{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}

.badge{
  display:inline-block;
  font-size:11px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--muted);
  margin-left:8px;
}

.footer{margin-top:14px}

@media (max-width: 1050px){
  .cards-4{grid-template-columns: 1fr 1fr;}
  .grid2{grid-template-columns:1fr;}
  .calcGrid{grid-template-columns:1fr;}
}