/* =========================================================================
   MolGroup — visual identity
   ---------------------------------------------------------------------
   Design grounded in laboratory instrumentation: oscilloscope/spectrometer
   bezels (corner tick-marks), character-table data grids, and a
   chemistry-pigment-derived palette. Accent colors are FUNCTIONAL, not
   decorative: prussian blue marks structural/axis data, cinnabar marks
   IR activity, verdigris marks Raman activity -- mirroring the actual
   semantics the app reports.
   ========================================================================= */

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

:root {
  --bg-void: #0b0e13;
  --bg-panel: #141922;
  --bg-panel-raised: #1a2029;
  --line: #262d3a;
  --line-bright: #3a4356;

  --ink: #e9e6da;
  --ink-dim: #8992a3;
  --ink-faint: #5a6376;

  --prussian: #6fa3d8;
  --prussian-dim: #2e4a6b;
  --cinnabar: #e2593c;
  --cinnabar-dim: #4a2620;
  --verdigris: #5fb3a0;
  --verdigris-dim: #1f3d38;
  --amber: #d9a441;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', monospace;

  --radius: 3px;
}

* { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background: var(--bg-void);
  background-image:
    radial-gradient(circle at 15% 8%, rgba(111, 163, 216, 0.05), transparent 40%),
    radial-gradient(circle at 85% 92%, rgba(95, 179, 160, 0.04), transparent 40%);
  color: var(--ink);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--prussian-dim); color: var(--ink); }

a { color: var(--prussian); }

/* ---- top bar: instrument-panel nameplate ---- */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-panel);
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.brand::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--verdigris);
  box-shadow: 0 0 8px var(--verdigris);
  flex-shrink: 0;
}
.nav-links { display: flex; gap: 22px; align-items: center; }
.nav-links a {
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 0.82rem;
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: color 0.15s;
}
.nav-links a:hover { color: var(--ink); }
.link-btn {
  background: none; border: none; color: var(--ink-dim);
  font-size: 0.82rem; font-family: var(--font-mono); letter-spacing: 0.03em;
  text-transform: uppercase; cursor: pointer; padding: 0;
}
.link-btn:hover { color: var(--ink); }
.inline-form { display: inline; }

.container { max-width: 860px; margin: 0 auto; padding: 48px 24px 80px; }

/* ---- headings / copy ---- */
h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.subtitle {
  color: var(--ink-dim);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 28px;
  max-width: 56ch;
}
.muted { color: var(--ink-dim); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 6px;
}

/* ---- console: input row styled like an instrument control strip ---- */
.analyze-form {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 16px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 24px 0;
}
input[type="text"], input[type="email"], input[type="password"], #smiles {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line-bright);
  background: var(--bg-void);
  color: var(--ink);
  flex: 1;
  min-width: 220px;
}
input:focus, button:focus, .checkbox-label input:focus {
  outline: 2px solid var(--prussian);
  outline-offset: 1px;
}
button {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--prussian);
  background: var(--prussian-dim);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
button:hover { background: var(--prussian); border-color: var(--prussian); color: var(--bg-void); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
.checkbox-label {
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
}

/* status indicator dot, echoes the instrument-panel language */
.status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.status-dot.idle { background: var(--ink-faint); }
.status-dot.running { background: var(--amber); box-shadow: 0 0 6px var(--amber); animation: pulse 1.2s ease-in-out infinite; }
.status-dot.complete { background: var(--verdigris); box-shadow: 0 0 6px var(--verdigris); }
.status-dot.failed { background: var(--cinnabar); box-shadow: 0 0 6px var(--cinnabar); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---- auth forms ---- */
.auth-form { display: flex; flex-direction: column; gap: 16px; max-width: 380px; }
.auth-form label {
  display: flex; flex-direction: column; gap: 7px;
  font-size: 0.85rem; font-family: var(--font-mono); color: var(--ink-dim);
  letter-spacing: 0.02em;
}

.error {
  background: var(--cinnabar-dim);
  border: 1px solid var(--cinnabar);
  color: #f5b3a3;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 11px 14px;
  border-radius: var(--radius);
  margin: 14px 0;
}

/* ---- panel: the core visual signature ----
   Corner tick-marks reference oscilloscope graticules / photographic-plate
   registration marks rather than a generic rounded "card". */
.panel {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-top: 20px;
}
.panel::before, .panel::after,
.panel .tick-br, .panel .tick-bl {
  content: "";
  position: absolute;
  width: 11px; height: 11px;
  border-color: var(--line-bright);
  pointer-events: none;
}
.panel::before { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; }
.panel::after { top: -1px; right: -1px; border-top: 1px solid; border-right: 1px solid; }

/* legacy alias so any remaining .card references still render sanely */
.card { position: relative; background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin-top: 20px; }

.label { 
  font-family: var(--font-mono);
  color: var(--ink-faint);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.pg {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--prussian);
  margin: 4px 0 2px;
  letter-spacing: -0.01em;
}

/* ---- data table: reads like a printed character table ---- */
table { width: 100%; border-collapse: collapse; margin-top: 12px; font-family: var(--font-mono); }
th {
  text-align: left; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-faint); font-weight: 500;
  padding: 6px 10px; border-bottom: 1px solid var(--line-bright);
}
td { padding: 7px 10px; font-size: 0.88rem; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: none; }

.active { color: var(--verdigris); font-weight: 500; }
.inactive { color: var(--ink-faint); }
td.active-ir { color: var(--cinnabar); font-weight: 500; }
td.active-raman { color: var(--verdigris); font-weight: 500; }

.history-table .pg-cell { color: var(--prussian); font-weight: 600; font-family: var(--font-mono); }
.status-complete { color: var(--verdigris); }
.status-queued, .status-running { color: var(--amber); }
.status-failed { color: var(--cinnabar); }

#interp {
  white-space: pre-wrap;
  line-height: 1.65;
  font-size: 0.92rem;
  color: var(--ink);
}

/* ---- 3D viewer: framed like an instrument bezel ---- */
.mol-viewer {
  width: 100%;
  height: 340px;
  border-radius: var(--radius);
  background: #05070a;
  border: 1px solid var(--line);
  position: relative;
  margin-top: 10px;
}
.viewer-hint { margin-top: 10px; font-size: 0.78rem; font-family: var(--font-mono); }
.legend-swatch {
  display: inline-block; width: 9px; height: 9px; border-radius: 1px; margin-right: 4px;
}

/* ---- footer readout strip (used sparingly) ---- */
.readout-strip {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-dim);
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.readout-strip strong { color: var(--ink); font-weight: 500; }

@media (max-width: 640px) {
  .container { padding: 32px 16px 60px; }
  .pg { font-size: 2rem; }
  .nav { padding: 14px 16px; flex-wrap: wrap; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .status-dot.running { animation: none; }
}