@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@600;700&family=Space+Grotesk:wght@400;500;600&display=swap");

:root{
  --bg:#f7f2ea;
  --panel:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --line:#e7e1d9;
  --accent:#0f766e;
  --accent-2:#f59e0b;
  --error:#92400e;
  --error-bg:#fffbeb;
  --chip:#ffffff;
  --summary-bg:linear-gradient(120deg, rgba(15, 118, 110, 0.12), rgba(245, 158, 11, 0.18));
  --shadow:0 18px 50px rgba(15, 23, 42, 0.12);
}

[data-theme="dark"]{
  --bg:#0F1218;
  --panel:#151B25;
  --chip:#121A26;
  --line:#243041;
  --text:#EEF4FF;
  --muted:#C0CBDC;
  --accent:#C9D6E6;
  --accent-2:#C9D6E6;
  --error:#FCD34D;
  --error-bg:#2A2414;
  --summary-bg:#1A2230;
  --shadow:0 16px 32px rgba(0, 0, 0, 0.35);
  --summary-border:1px solid var(--line);
  --summary-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --summary-total-color:var(--text);
}

[data-theme="dark"][data-dark="A"]{
  --summary-border:0 0 0 3px var(--accent);
  --summary-shadow:none;
  --summary-total-color:var(--text);
}

[data-theme="dark"][data-dark="B"]{
  --summary-border:1px solid var(--accent);
  --summary-shadow:0 10px 22px rgba(201, 214, 230, 0.25);
  --summary-total-color:var(--text);
}

[data-theme="dark"][data-dark="C"]{
  --summary-border:1px solid var(--line);
  --summary-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --summary-total-color:var(--accent);
}

*{ box-sizing:border-box; }

html, body{
  margin:0;
  font-family:"Space Grotesk", system-ui, sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
  transition:background-color 0.25s ease, color 0.25s ease;
}

body::before,
body::after{
  content:"";
  position:fixed;
  width:380px;
  height:380px;
  border-radius:50%;
  filter:blur(0px);
  opacity:0.35;
  z-index:-1;
}

body::before{
  top:-120px;
  left:-80px;
  background:radial-gradient(circle, var(--accent-2), transparent 60%);
}

body::after{
  bottom:-140px;
  right:-100px;
  background:radial-gradient(circle, var(--accent), transparent 60%);
}

.page{
  max-width:1050px;
  margin:0 auto;
  padding:20px 16px 28px;
  animation:fadeUp 0.8s ease;
}

.hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
}

.brand{
  font-size:12px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
}

h1{
  font-family:"Fraunces", serif;
  font-size:28px;
  margin:2px 0 2px;
  display:flex;
  align-items:center;
  gap:12px;
}

h1 .brand{
  font-size:28px;
  letter-spacing:0;
  text-transform:none;
}

.title-sub{
  font-size:14px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--text);
  font-weight:600;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:linear-gradient(120deg, rgba(15, 118, 110, 0.12), rgba(245, 158, 11, 0.18));
}

.sub{
  font-size:15px;
  color:var(--muted);
  margin:0;
}

.panel-grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:22px;
}

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:20px;
  padding:16px;
  box-shadow:var(--shadow);
  transition:background-color 0.25s ease, border-color 0.25s ease;
}

.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

h2{
  font-size:18px;
  margin:0 0 4px;
}

.panel-sub{
  margin:0;
  font-size:13px;
  color:var(--muted);
}

.block{ margin-bottom:18px; }

label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
}

input, select{
  width:100%;
  padding:12px 14px;
  font-size:15px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--panel);
  color:var(--text);
  transition:background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

input:focus, select:focus{
  outline:2px solid rgba(15, 118, 110, 0.15);
  border-color:var(--accent);
}

input:disabled{
  background:var(--chip);
  color:var(--muted);
}

.toggle{
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:var(--chip);
}

.toggle button{
  padding:12px 10px;
  font-size:13px;
  background:transparent;
  border:0;
  cursor:pointer;
  color:var(--text);
}

.toggle button.active{
  background:var(--accent);
  color:var(--panel);
}

.hint,
.taxNote{
  font-size:12px;
  color:var(--muted);
  margin-top:6px;
}

.error{
  display:none;
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  background:var(--error-bg);
  color:var(--error);
  font-size:13px;
}

.row{
  display:flex;
  gap:12px;
}

.col{ flex:1; }

.tip-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-bottom:18px;
}

.tip-card{
  border:1px solid var(--line);
  background:var(--chip);
  border-radius:16px;
  padding:12px;
  cursor:pointer;
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  transition:transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.tip-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(15, 23, 42, 0.12);
}

.tip-card.active{
  border-color:var(--accent);
  box-shadow:0 10px 22px rgba(15, 118, 110, 0.25);
}

.tip-pct{
  font-size:15px;
  font-weight:600;
}

.tip-amt{
  font-size:16px;
  font-weight:600;
}

.tip-total{
  font-size:11px;
  color:var(--muted);
}

.tip-side{
  text-align:right;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.tip-total-value{
  font-size:15px;
  font-weight:600;
}

.summary{
  border-top:1px dashed var(--line);
  padding-top:16px;
}

.summary-row{
  display:flex;
  justify-content:space-between;
  font-size:14px;
  margin-bottom:8px;
  color:var(--muted);
}

.summary-row strong{ color:var(--text); }

.summary-total{
  margin-top:12px;
  padding:12px 14px;
  background:var(--summary-bg);
  border:var(--summary-border);
  box-shadow:var(--summary-shadow);
  border-radius:14px;
  display:flex;
  justify-content:space-between;
  font-size:16px;
  font-weight:600;
  transition:background-color 0.25s ease;
  position:relative;
  overflow:hidden;
}

.summary-total strong{
  color:var(--summary-total-color);
}

.theme-toggle{
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text);
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  cursor:pointer;
  white-space:nowrap;
}


footer{
  text-align:center;
  margin-top:28px;
  font-size:12px;
  color:var(--muted);
}

@media (max-width: 900px){
  .hero{ flex-direction:column; align-items:flex-start; }
  .panel-grid{ grid-template-columns:1fr; }
}

@media (max-width: 520px){
  .row{ flex-direction:column; }
  .page{ padding:14px 12px 20px; }
  h1{ font-size:20px; }
  h1 .brand{ font-size:20px; }
  .title-sub{ font-size:11px; padding:4px 8px; letter-spacing:0.12em; }
  .sub{ font-size:13px; }
  .card{ padding:14px; }
  .block{ margin-bottom:10px; }
  .tip-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .panel-sub, .hint, .taxNote{ font-size:11px; }
  footer{ display:none; }
}

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}