/* Split UI */
:root{
  --bg:#0b0c10;
  --card:#12141a;
  --border:#252a35;
  --text:#e8eaf0;
  --muted:#a7adbb;
  --good:#1f6f3b;
  --bad:#7a1f2a;
  --neutral:#2b3140;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}

.topbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  background:#0f1117;
  gap:12px;
}
.topbar h1{ margin:0 0 6px 0; font-size:18px; }
.sessionline{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.topbar-right{ display:flex; gap:10px; flex-wrap:wrap; }

.split{
  display:flex;
  height: calc(100vh - 68px);
}
.pane{
  width:50%;
  overflow:auto;
  padding:16px;
}
.pane-right{
  border-left:1px solid var(--border);
}

h2{ margin: 0 0 12px 0; font-size:16px; }
h3{ margin: 0 0 10px 0; font-size:14px; }
h4{ margin: 10px 0 8px 0; font-size:13px; color:var(--muted); }

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  margin-bottom:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}

label{ display:block; font-size:12px; color:var(--muted); margin-bottom:8px; }
input, textarea{
  width:100%;
  border-radius:10px;
  border:1px solid var(--border);
  background:#0f1117;
  color:var(--text);
  padding:10px 10px;
  margin-top:6px;
  font-size:14px;
}
textarea{ min-height:70px; resize:vertical; }

button{
  border-radius:12px;
  border:1px solid var(--border);
  background:#171a22;
  color:var(--text);
  padding:10px 12px;
  cursor:pointer;
}
button:hover{ filter:brightness(1.07); }
button.primary{
  background:#1b2333;
  border-color:#2e3a55;
}
button:disabled{ opacity:.45; cursor:not-allowed; }

.muted{ color:var(--muted); }
.bigtext{ font-size:14px; line-height:1.35; }
.kicker{ font-size:11px; color:var(--muted); margin-bottom:4px; }

.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.grid-3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:10px; }
.divider{ height:1px; background:var(--border); margin:12px 0; }

canvas{ border:1px solid var(--border); border-radius:12px; background:#0f1117; width:360px; max-width:100%; height:auto; }
pre{ background:#0f1117; border:1px solid var(--border); border-radius:12px; padding:12px; overflow:auto; }

.bowGrid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "limbTop   stringTop  stringTop"
    "yokeTL    cableBot   yokeTR"
    "peep      brace      ata"
    "dloop     restH      restV"
    "yokeBL    cableTop   yokeBR"
    "stringBot stringBot  limbBot"
    "drawWt    drawWt     drawWt";
  gap:10px;
}

.cell{
  background:#0f1117;
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px;
}
.cell.disabled{ opacity:0.45; }
.cell-title{ font-size:12px; color:var(--muted); margin-bottom:8px; }
.hint{ font-size:11px; color:var(--muted); margin-top:6px; }

.nudge{ display:flex; gap:8px; align-items:center; }
.nudge input{ margin-top:0; text-align:center; }
.nbtn{
  width:38px;
  height:38px;
  padding:0;
  border-radius:12px;
  background:#151926;
}

.mirrorVal{
  font-size:18px;
  font-weight:700;
  padding:10px 12px;
  border-radius:12px;
  background:var(--neutral);
  border:1px solid var(--border);
}
.mirrorVal.good{ background:rgba(31,111,59,.35); border-color:rgba(31,111,59,.8); }
.mirrorVal.bad{ background:rgba(122,31,42,.35); border-color:rgba(122,31,42,.8); }
.mirrorVal.zero{ background:rgba(43,49,64,.45); }
.mirrorVal.na{ color:var(--muted); }

.rec-summary{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.cta{
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  border:1px dashed #3a4663;
  background:#0f1117;
}
.cta-title{ font-size:12px; color:var(--muted); margin-bottom:6px; }
.cta-text{ font-size:16px; font-weight:800; }
.btnrow{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }

.causeRow{
  display:grid;
  grid-template-columns: 1fr 3fr 90px;
  gap:10px;
  padding:10px;
  border-bottom:1px solid var(--border);
}
.causeRow:last-child{ border-bottom:none; }
.badge{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#0f1117;
  font-size:12px;
}

/* Top bar summary */
.topbar{ position:sticky; top:0; z-index:20; background:rgba(12,14,18,.92); backdrop-filter: blur(10px); border-bottom:1px solid #1f2433; padding:10px 14px; }
.topbarRow{ display:flex; gap:12px; align-items:center; }
.topbarTitle{ font-weight:700; }
.topbarVals{ flex:1; font-size:13px; color:#cbd2e1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.detailsSummary{ cursor:pointer; display:flex; justify-content:space-between; align-items:center; padding:4px 0; }
details[open] .detailsSummary{ margin-bottom:10px; }

/* Spinner */
.spinner{ display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,.25); border-top-color: rgba(255,255,255,.9); border-radius:50%; animation: spin .8s linear infinite; margin-left:8px; vertical-align:-2px; }
@keyframes spin{ to{ transform: rotate(360deg);} }
.hidden{ display:none !important; }

/* Toast notifications */
.toast{ position:fixed; right:16px; bottom:16px; min-width:240px; max-width:420px; padding:12px 14px; border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.45); background:#121826; color:#e8eaf0; border:1px solid #2b3140; opacity:0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; z-index:50; }
.toast.show{ opacity:1; transform: translateY(0); }
.toast.good{ border-color: rgba(61,220,151,.35); }
.toast.bad{ border-color: rgba(255,97,97,.35); }
.toast.warn{ border-color: rgba(255,208,77,.35); }
.btn.danger{ border-color: rgba(255,97,97,.35); }