/* ===== Base tokens (WeighRight theme) ===== */
:root{
  --bg:#f4f4f4;              /* light gray steel-like background */
  --card:#ffffff;            /* card surfaces */
  --text:#222222;            /* dark text */
  --muted:#6e6e6e;           /* muted gray */
  --tint:#444c54;            /* dark steel blue/gray */
  --tint-accent:#888f99;     /* accent steel gray */
  --danger:#b00020;          /* alert red */

  --radius:16px;
  --shadow:0 6px 18px rgba(0,0,0,.06);
}

:root[data-theme="dark"]{
  --bg:#0f1113;              /* deep dark steel */
  --card:#181a1c;
  --text:#f5f5f5;
  --muted:#9aa0a6;
  --tint:#aeb5bd;            /* light steel gray */
  --tint-accent:#7a828a;
  --danger:#ef4444;
}

*{box-sizing:border-box}
html,body{height:100%}
body.app{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  padding-bottom:72px; /* space for tabbar */
}

/* ===== Logo ===== */
.app-header img.logo{
  height:100px;
  object-fit:contain;
}

/* ===== Header ===== */
.app-header{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px);
  border-bottom:2px solid var(--tint-accent);
}
:root[data-theme="dark"] .app-header{
  background:rgba(24,26,28,.9);
  border-bottom-color:var(--tint-accent);
}
.app-title{
  font-size:18px;
  font-weight:800;
  letter-spacing:1px;
  color:var(--tint);
}

/* ===== Layout ===== */
.container{padding:16px;}
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  margin-bottom:14px;
  border:1px solid var(--tint-accent);
}
.muted{color:var(--muted)}
.small{font-size:12px}
.mt6{margin-top:6px}
.mt8{margin-top:8px}

/* ===== Buttons ===== */
.btn{
  border:0;
  border-radius:12px;
  padding:10px 14px;
  font-weight:700;
  background:var(--tint-accent);
  color:#fff;
  text-decoration:none;
  display:inline-block;
  cursor:pointer;
  letter-spacing:0.5px;
}
.btn.primary{
  background:var(--tint);
  color:#fff;
}
.btn.ghost{
  background:transparent;
  border:2px solid var(--tint);
  color:var(--tint);
}
.btn.danger{
  background:var(--danger);
  color:#fff;
}
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}

/* ===== Inputs ===== */
label{
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  margin-bottom:6px;
}
input, select{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--tint-accent);
  background:#fff;
  color:var(--text);
  font-size:16px;
}
:root[data-theme="dark"] input,
:root[data-theme="dark"] select{
  background:#111416;
  color:#f5f5f7;
  border-color:var(--tint-accent);
}

/* ===== Grids ===== */
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
@media (max-width:420px){
  .grid2, .grid3{ grid-template-columns:1fr; }
}

/* ===== Results ===== */
.result{
  margin-top:10px;
  padding:12px;
  border-radius:12px;
  background:rgba(68,76,84,.06);
  border:1px dashed var(--tint-accent);
  white-space:pre-wrap;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
:root[data-theme="dark"] .result{
  background:rgba(174,181,189,.12);
}

/* ===== Tab bar ===== */
.tabbar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:30;
  display:flex;
  justify-content:space-around;
  gap:8px;
  padding:10px;
  background:var(--card);
  border-top:2px solid var(--tint-accent);
}
.tab{
  flex:1;
  text-align:center;
  padding:10px;
  border-radius:999px;
  text-decoration:none;
  background:var(--tint-accent);
  color:#fff;
  font-weight:800;
  letter-spacing:0.5px;
}
.tab.active{
  background:var(--tint);
  color:#fff;
}
:root[data-theme="dark"] .tab{
  background:var(--tint-accent);
  color:#fff;
}
:root[data-theme="dark"] .tab.active{
  background:var(--tint);
  color:#fff;
}

/* ===== Bullets ===== */
.bullets{margin:0; padding-left:20px}
.bullets li{margin:6px 0}


/* Textareas match inputs */
textarea{
  width:100%;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--tint-accent);
  background:#fff;
  color:var(--text);
  font-size:16px;
  resize:vertical;
  min-height:96px;
}
:root[data-theme="dark"] textarea{
  background:#111416; color:#f5f5f7; border-color:var(--tint-accent);
}

/* Accessible focus */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid var(--tint);
  outline-offset:2px;
}

/* Read-only inputs (e.g., L auto) */
input[readonly]{
  background:rgba(0,0,0,.03);
}

/* Optional error state */
.input-error{ border-color:#ef4444 !important; }
.text-error{ color:#ef4444; }