/* GeoNum Calculator — MIT License */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #0a0e1a;
  --bg-panel:  #111827;
  --bg-input:  #1e2535;
  --bg-hover:  #1a2235;
  --border:    #2a3550;
  --accent:    #6366f1;
  --accent2:   #4fc3f7;
  --green:     #22c55e;
  --amber:     #f59e0b;
  --red:       #ef4444;
  --text:      #e2e8f0;
  --text-dim:  #64748b;
  --text-mid:  #94a3b8;
  --radius:    8px;
  --font-mono: 'JetBrains Mono', 'Fira Mono', monospace;
}

html, body { height: 100%; font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; }

/* Layout */
#app { display: flex; flex-direction: column; min-height: 100vh; }
header { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1.5rem; background: var(--bg-panel); border-bottom: 1px solid var(--border); }
header h1 { font-size: 18px; font-weight: 700; color: var(--accent); letter-spacing: -0.5px; }
header .subtitle { font-size: 12px; color: var(--text-dim); }
header .doi-link { margin-left: auto; font-size: 11px; color: var(--text-dim); text-decoration: none; }
header .doi-link:hover { color: var(--accent2); }
.install-btn { padding: 4px 12px; border: 1px solid var(--border); border-radius: 4px; background: transparent; color: var(--text-mid); font-size: 11px; cursor: pointer; display: none; }
.install-btn:hover { border-color: var(--accent); color: var(--accent); }

nav.tabs { display: flex; gap: 2px; padding: 0.5rem 1.5rem 0; background: var(--bg-panel); border-bottom: 1px solid var(--border); }
nav.tabs button { padding: 6px 16px; background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.15s; }
nav.tabs button:hover { color: var(--text); }
nav.tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }

main { flex: 1; display: flex; overflow: hidden; }
.panel { flex: 1; overflow-y: auto; padding: 1.5rem; display: none; }
.panel.active { display: block; }

/* Calculator layout */
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 1200px; }
@media (max-width: 900px) { .calc-grid { grid-template-columns: 1fr; } }

.card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.card h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); margin-bottom: 1rem; }

/* Inputs */
input, select, textarea {
  width: 100%; padding: 7px 10px; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: 4px; color: var(--text); font-size: 13px; font-family: inherit;
}
input:focus, select:focus { outline: none; border-color: var(--accent); }
label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 3px; margin-top: 10px; }
label:first-child { margin-top: 0; }

.btn { padding: 7px 16px; border: none; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 500; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #5254cc; }
.btn-secondary { background: var(--bg-input); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--accent); }
.btn-sm { padding: 4px 10px; font-size: 12px; }

.actions { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; align-items: center; }
.status { font-size: 12px; color: var(--text-dim); }

/* Result display */
.result-block { background: var(--bg-input); border-radius: 4px; padding: 1rem; margin-top: 1rem; }
.result-row { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 13px; }
.result-row:last-child { border: none; }
.result-label { color: var(--text-dim); font-size: 12px; }
.result-value { font-family: var(--font-mono); font-size: 13px; }
.drift-ok    { color: var(--green); }
.drift-warn  { color: var(--amber); }
.drift-alert { color: var(--red); }

/* Formula picker */
.formula-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5rem; }
.formula-btn { background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px; padding: 8px 12px; text-align: left; cursor: pointer; color: var(--text); font-size: 12px; transition: border-color 0.1s; }
.formula-btn:hover, .formula-btn.active { border-color: var(--accent); color: var(--accent); }
.formula-btn small { display: block; color: var(--text-dim); font-size: 11px; margin-top: 2px; font-family: var(--font-mono); }

/* Constants table */
.const-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.const-table th { padding: 6px 10px; text-align: left; color: var(--text-dim); font-weight: 500; border-bottom: 1px solid var(--border); font-size: 11px; text-transform: uppercase; }
.const-table td { padding: 5px 10px; border-bottom: 1px solid rgba(255,255,255,0.04); font-family: var(--font-mono); }
.const-table tr:hover td { background: var(--bg-hover); }
.const-table .sym { color: var(--accent2); font-weight: 600; }
.const-table .val { color: var(--text); }
.const-table .unc { color: var(--text-dim); font-size: 11px; }

/* Results table */
.results-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 1rem; }
.results-table th { padding: 6px 10px; text-align: left; color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; border-bottom: 1px solid var(--border); }
.results-table td { padding: 5px 10px; font-family: var(--font-mono); border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 12px; }
.results-table tr:hover td { background: var(--bg-hover); }

/* Benchmark */
.bench-row { background: var(--bg-input); border-radius: 4px; padding: 0.75rem 1rem; margin-bottom: 0.75rem; }
.bench-row h4 { font-size: 12px; color: var(--text-mid); margin-bottom: 0.5rem; }
.bench-note { font-size: 11px; color: var(--text-dim); margin-top: 0.5rem; font-style: italic; }

/* Docs */
.docs-content { max-width: 800px; }
.docs-content h2 { font-size: 18px; margin: 2rem 0 0.75rem; color: var(--accent); }
.docs-content h3 { font-size: 14px; margin: 1.5rem 0 0.5rem; color: var(--accent2); }
.docs-content p { color: var(--text-mid); margin-bottom: 0.75rem; line-height: 1.7; }
.docs-content pre { background: var(--bg-input); padding: 1rem; border-radius: 4px; font-family: var(--font-mono); font-size: 12px; color: #a5f3fc; overflow-x: auto; margin: 0.75rem 0; }
.docs-content code { font-family: var(--font-mono); font-size: 12px; background: var(--bg-input); padding: 1px 5px; border-radius: 3px; color: #a5f3fc; }
.docs-content .callout { background: var(--bg-input); border-left: 3px solid var(--accent); padding: 0.75rem 1rem; border-radius: 0 4px 4px 0; margin: 1rem 0; }
.docs-content .callout.warn { border-color: var(--red); }
.docs-content a { color: var(--accent2); text-decoration: none; }
.docs-content a:hover { text-decoration: underline; }

/* Expression calculator */
.expr-input { font-family: var(--font-mono); font-size: 15px; padding: 10px 14px; }
.expr-history { max-height: 320px; overflow-y: auto; }
.expr-entry { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.expr-entry .expr-text { font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); }
.expr-entry .expr-val  { font-family: var(--font-mono); font-size: 14px; font-weight: 600; }

/* Export bar */
.export-bar { display: flex; gap: 0.5rem; align-items: center; padding: 0.75rem 0; }
.export-bar span { font-size: 12px; color: var(--text-dim); }

/* Precision badge */
.prec-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 2px 8px; border-radius: 99px; font-weight: 600; }
.prec-badge.ok   { background: rgba(34,197,94,0.15);  color: var(--green); }
.prec-badge.warn { background: rgba(245,158,11,0.15); color: var(--amber); }
.prec-badge.bad  { background: rgba(239,68,68,0.15);  color: var(--red); }

/* Zone selector */
.zone-select-row { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.zone-select-row label { margin: 0; white-space: nowrap; }
.zone-select-row select { flex: 1; }

/* Loading overlay */
#loading { position: fixed; inset: 0; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; z-index: 999; }
#loading h2 { font-size: 22px; color: var(--accent); }
#loading p { color: var(--text-dim); font-size: 14px; }
.spinner { width: 40px; height: 40px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }