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

/* ─── OKLCH DESIGN TOKENS ─────────────────────────────────────────────────── */

[data-theme="dark"] {
  color-scheme: dark;
  --bg-0:       oklch(0.13 0.006 75);
  --bg-1:       oklch(0.18 0.007 75);
  --bg-2:       oklch(0.22 0.008 75);
  --bg-3:       oklch(0.27 0.008 75);
  --text-0:     oklch(0.93 0.010 75);
  --text-1:     oklch(0.70 0.010 75);
  --text-2:     oklch(0.48 0.008 75);
  --text-3:     oklch(0.32 0.007 75);
  --border-0:   oklch(0.27 0.007 75);
  --border-1:   oklch(0.36 0.007 75);
  --accent:     oklch(0.80 0.14 68);
  --accent-mid: oklch(0.55 0.12 68);
  --accent-bg:  oklch(0.20 0.05 68);
  --green:      oklch(0.76 0.17 152);
  --green-bg:   oklch(0.16 0.04 152);
  --green-bd:   oklch(0.28 0.08 152);
  --warn:       oklch(0.80 0.14 82);
  --warn-bg:    oklch(0.18 0.05 82);
  --warn-bd:    oklch(0.32 0.09 82);
  --danger:     oklch(0.72 0.19 27);
  --danger-bg:  oklch(0.17 0.06 27);
  --danger-bd:  oklch(0.30 0.10 27);
  /* Real fuse colors: 7.5A=brown, 10A=red, 15A=blue, 20A=yellow, 25A=clear, 30A=green, 40A+=orange/red */
  --f-75-bg: oklch(0.22 0.06 55);  --f-75-bd: oklch(0.38 0.10 55);  --f-75-tx: oklch(0.88 0.08 55);   /* brown */
  --f-10-bg: oklch(0.22 0.07 27);  --f-10-bd: oklch(0.38 0.12 27);  --f-10-tx: oklch(0.88 0.10 27);   /* red */
  --f-15-bg: oklch(0.20 0.06 260); --f-15-bd: oklch(0.36 0.12 260); --f-15-tx: oklch(0.88 0.08 260);  /* blue */
  --f-20-bg: oklch(0.22 0.06 95);  --f-20-bd: oklch(0.38 0.12 95);  --f-20-tx: oklch(0.90 0.10 95);   /* yellow */
  --f-25-bg: oklch(0.22 0.01 75);  --f-25-bd: oklch(0.38 0.02 75);  --f-25-tx: oklch(0.90 0.01 75);   /* clear/natural */
  --f-30-bg: oklch(0.20 0.06 152); --f-30-bd: oklch(0.36 0.12 152); --f-30-tx: oklch(0.88 0.10 152);  /* green */
  --f-40-bg: oklch(0.22 0.07 55);  --f-40-bd: oklch(0.38 0.12 55);  --f-40-tx: oklch(0.88 0.10 55);   /* orange */
  --f-50-bg: oklch(0.22 0.07 27);  --f-50-bd: oklch(0.38 0.12 27);  --f-50-tx: oklch(0.88 0.10 27);   /* red (maxi) */
  --f-60-bg: oklch(0.22 0.06 95);  --f-60-bd: oklch(0.38 0.12 95);  --f-60-tx: oklch(0.90 0.10 95);   /* yellow (maxi) */
  --f-hi-bg: oklch(0.22 0.07 55);  --f-hi-bd: oklch(0.38 0.12 55);  --f-hi-tx: oklch(0.88 0.10 55);   /* orange (mega) */
  --shadow: 0 2px 16px oklch(0.05 0.01 75 / 0.7);
}

[data-theme="light"] {
  color-scheme: light;
  --bg-0:       oklch(0.99 0.003 75);
  --bg-1:       oklch(0.96 0.005 75);
  --bg-2:       oklch(0.92 0.006 75);
  --bg-3:       oklch(0.87 0.007 75);
  --text-0:     oklch(0.16 0.010 75);
  --text-1:     oklch(0.36 0.010 75);
  --text-2:     oklch(0.54 0.008 75);
  --text-3:     oklch(0.70 0.007 75);
  --border-0:   oklch(0.84 0.007 75);
  --border-1:   oklch(0.76 0.008 75);
  --accent:     oklch(0.44 0.14 68);
  --accent-mid: oklch(0.58 0.12 68);
  --accent-bg:  oklch(0.93 0.04 68);
  --green:      oklch(0.36 0.14 152);
  --green-bg:   oklch(0.93 0.04 152);
  --green-bd:   oklch(0.78 0.08 152);
  --warn:       oklch(0.42 0.13 82);
  --warn-bg:    oklch(0.94 0.05 82);
  --warn-bd:    oklch(0.78 0.09 82);
  --danger:     oklch(0.44 0.17 27);
  --danger-bg:  oklch(0.94 0.05 27);
  --danger-bd:  oklch(0.78 0.10 27);
  /* Real fuse colors: 7.5A=brown, 10A=red, 15A=blue, 20A=yellow, 25A=clear, 30A=green, 40A+=orange/red */
  --f-75-bg: oklch(0.92 0.04 55);  --f-75-bd: oklch(0.70 0.10 55);  --f-75-tx: oklch(0.28 0.10 55);   /* brown */
  --f-10-bg: oklch(0.92 0.05 27);  --f-10-bd: oklch(0.70 0.12 27);  --f-10-tx: oklch(0.28 0.14 27);   /* red */
  --f-15-bg: oklch(0.92 0.04 260); --f-15-bd: oklch(0.68 0.10 260); --f-15-tx: oklch(0.26 0.12 260);  /* blue */
  --f-20-bg: oklch(0.94 0.05 95);  --f-20-bd: oklch(0.72 0.12 95);  --f-20-tx: oklch(0.28 0.12 95);   /* yellow */
  --f-25-bg: oklch(0.94 0.01 75);  --f-25-bd: oklch(0.76 0.02 75);  --f-25-tx: oklch(0.30 0.01 75);   /* clear/natural */
  --f-30-bg: oklch(0.92 0.05 152); --f-30-bd: oklch(0.68 0.12 152); --f-30-tx: oklch(0.26 0.12 152);  /* green */
  --f-40-bg: oklch(0.93 0.05 55);  --f-40-bd: oklch(0.70 0.12 55);  --f-40-tx: oklch(0.28 0.12 55);   /* orange */
  --f-50-bg: oklch(0.92 0.05 27);  --f-50-bd: oklch(0.70 0.12 27);  --f-50-tx: oklch(0.28 0.14 27);   /* red (maxi) */
  --f-60-bg: oklch(0.94 0.05 95);  --f-60-bd: oklch(0.72 0.12 95);  --f-60-tx: oklch(0.28 0.12 95);   /* yellow (maxi) */
  --f-hi-bg: oklch(0.93 0.05 55);  --f-hi-bd: oklch(0.70 0.12 55);  --f-hi-tx: oklch(0.28 0.12 55);   /* orange (mega) */
  --shadow: 0 2px 16px oklch(0.50 0.01 75 / 0.12);
}

/* ─── BASE ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg-0); }
body {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  background: var(--bg-0);
  color: var(--text-0);
  min-height: 100vh;
  padding-bottom: 300px;
  transition: background 0.2s, color 0.2s;
}

/* ─── HEADER ──────────────────────────────────────────────────────────────── */
.header {
  padding: 16px 20px 0;
  border-bottom: 1px solid var(--border-0);
  background: var(--bg-0);
  position: sticky; top: 0; z-index: 20;
  transition: background 0.2s, border-color 0.2s;
}
.header-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.header-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px; font-weight: 600;
  color: var(--accent); letter-spacing: 0.03em; flex: 1;
}
.header-sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; color: var(--text-2); letter-spacing: 0.02em;
}


/* ─── TABS ────────────────────────────────────────────────────────────────── */
.tabs { display: flex; margin-bottom: -1px; }
.tab {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; font-weight: 500;
  padding: 8px 16px;
  border: 1px solid transparent; border-bottom: none;
  background: transparent; color: var(--text-2);
  cursor: pointer; letter-spacing: 0.03em;
  border-radius: 4px 4px 0 0;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.tab:hover { color: var(--text-1); }
.tab.active { background: var(--bg-1); color: var(--accent); border-color: var(--border-0); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ─── CONTROLS ────────────────────────────────────────────────────────────── */
.controls {
  padding: 10px 20px; background: var(--bg-1);
  border-bottom: 1px solid var(--border-0);
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  transition: background 0.2s;
}
.search-wrap { position: relative; flex: 1; min-width: 180px; }
.search-wrap input {
  width: 100%; background: var(--bg-3); border: 1px solid var(--border-1);
  color: var(--text-0); font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; padding: 8px 12px 8px 32px; border-radius: 4px;
  outline: none; transition: border-color 0.15s, background 0.2s;
}
.search-wrap input:focus { border-color: var(--accent); }
.search-wrap input::placeholder { color: var(--text-3); }
.search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); font-size: 13px; pointer-events: none; line-height: 1;
}
.legend { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ldot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 3px; vertical-align: middle; }
.llabel { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--text-2); white-space: nowrap; }

/* ─── CONTROL BUTTONS ────────────────────────────────────────────────────── */
.ctrl-btn {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.04em;
  padding: 6px 12px; border-radius: 4px;
  border: 1px solid var(--border-1);
  background: var(--bg-2); color: var(--text-1);
  cursor: pointer; white-space: nowrap;
  transition: all 0.15s;
}
.ctrl-btn:hover { border-color: var(--accent-mid); color: var(--text-0); }
.ctrl-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ctrl-btn.active {
  background: var(--accent-bg); color: var(--accent);
  border-color: var(--accent-mid);
}

/* ─── FUSE GRID ───────────────────────────────────────────────────────────── */
.grid-wrap { padding: 14px 20px; overflow-x: auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.grid.spatial { gap: 4px; }
.grid.spatial .fuse { min-height: 52px; font-size: 10px; padding: 6px 8px; }
.grid.spatial .fuse-num { font-size: 8px; }
.grid.spatial .fuse-name { font-size: 10px; }
.grid.spatial .fuse-amp { font-size: 9px; }

/* Relay items placed inside spatial grid */
.relay-in-grid {
  background: var(--bg-2); border: 1px solid var(--border-0);
  border-radius: 4px; padding: 6px 8px;
  transition: background 0.2s;
  min-height: 52px;
  display: flex; flex-direction: column; justify-content: center;
}
.relay-in-grid .relay-id {
  font-family: 'IBM Plex Mono', monospace; font-size: 8px;
  color: var(--accent-mid); font-weight: 600; letter-spacing: 0.04em;
}
.relay-in-grid .relay-name {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  color: var(--text-1); line-height: 1.3; margin-top: 2px;
}

@media (max-width: 700px) {
  .grid.spatial {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important;
  }
  .grid.spatial .fuse,
  .grid.spatial .relay-in-grid { grid-row: auto !important; grid-column: auto !important; }
}

.fuse {
  border-radius: 5px; padding: 8px 10px; cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.1s, filter 0.1s, opacity 0.2s;
  min-height: 62px; display: flex; flex-direction: column; justify-content: space-between;
}
.fuse:hover { transform: translateY(-1px); filter: brightness(1.10); }
.fuse:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fuse.selected { outline: 2px solid var(--accent); outline-offset: 1px; filter: brightness(1.12); }
.fuse.empty { background: var(--bg-2) !important; border-color: var(--border-0) !important; cursor: default; opacity: 0.4; }
.fuse.empty:hover { transform: none; filter: none; }
.fuse.dimmed { opacity: 0.15; pointer-events: none; }

.fuse[data-amp="7.5"]  { background: var(--f-75-bg); border-color: var(--f-75-bd); color: var(--f-75-tx); }  /* brown */
.fuse[data-amp="10"]   { background: var(--f-10-bg); border-color: var(--f-10-bd); color: var(--f-10-tx); }  /* red */
.fuse[data-amp="15"]   { background: var(--f-15-bg); border-color: var(--f-15-bd); color: var(--f-15-tx); }  /* blue */
.fuse[data-amp="20"]   { background: var(--f-20-bg); border-color: var(--f-20-bd); color: var(--f-20-tx); }  /* yellow */
.fuse[data-amp="25"]   { background: var(--f-25-bg); border-color: var(--f-25-bd); color: var(--f-25-tx); }  /* clear */
.fuse[data-amp="30"]   { background: var(--f-30-bg); border-color: var(--f-30-bd); color: var(--f-30-tx); }  /* green */
.fuse[data-amp="40"]   { background: var(--f-40-bg); border-color: var(--f-40-bd); color: var(--f-40-tx); }  /* orange */
.fuse[data-amp="50"]   { background: var(--f-50-bg); border-color: var(--f-50-bd); color: var(--f-50-tx); }  /* red (maxi) */
.fuse[data-amp="60"]   { background: var(--f-60-bg); border-color: var(--f-60-bd); color: var(--f-60-tx); }  /* yellow (maxi) */
.fuse[data-amp="80"],
.fuse[data-amp="100"],
.fuse[data-amp="140"]  { background: var(--f-hi-bg); border-color: var(--f-hi-bd); color: var(--f-hi-tx); }  /* orange (mega) */

.fuse-num    { font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 500; opacity: 0.65; margin-bottom: 2px; }
.fuse-name   { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; line-height: 1.3; flex: 1; }
.fuse-amp    { font-family: 'IBM Plex Mono', monospace; font-size: 10px; margin-top: 3px; opacity: 0.75; }
.fuse-result { font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 600; margin-top: 2px; }

/* ─── RELAY SECTION ───────────────────────────────────────────────────────── */
.relay-section { padding: 0 20px 24px; }
.relay-header {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: var(--text-2);
  letter-spacing: 0.10em; text-transform: uppercase;
  padding: 14px 0 8px; border-top: 1px solid var(--border-0);
}
.relay-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 5px; }
.relay-item {
  background: var(--bg-2); border: 1px solid var(--border-0);
  border-radius: 4px; padding: 7px 10px; font-size: 11px; color: var(--text-1);
  transition: background 0.2s;
}
.relay-id { font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: var(--accent-mid); font-weight: 600; margin-bottom: 2px; letter-spacing: 0.04em; }

/* ─── CALCULATOR PANEL ────────────────────────────────────────────────────── */
.calc-panel {
  position: fixed; bottom: 0; left: 0; right: 0;
  top: 50%;
  background: var(--bg-1); border-top: 2px solid var(--border-0);
  z-index: 100;
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), border-color 0.2s, background 0.2s;
  transform: translateY(100%);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.calc-panel.dragging { transition: none; }
.calc-panel.visible { transform: translateY(0); }
.calc-resize-handle {
  position: absolute; top: -10px; left: 0; right: 0; height: 20px;
  cursor: ns-resize; z-index: 200; pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
}
.calc-resize-handle::after {
  content: ''; width: 48px; height: 4px; border-radius: 2px;
  background: var(--border-1); opacity: 0.6;
}
.calc-resize-handle:hover::after { opacity: 1; }
.calc-panel.has-result { border-top-color: var(--accent-mid); }

.calc-inner { max-width: 1400px; margin: 0 auto; padding: 14px 20px 18px; display: flex; gap: 24px; align-items: flex-start; height: 100%; position: relative; z-index: 1; pointer-events: none; }
.calc-content {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  background: oklch(0.13 0.006 75 / 0.88);
  border-radius: 8px;
  padding: 14px;
  backdrop-filter: blur(8px);
  overflow-y: auto;
  max-height: 100%;
  max-width: 420px;
  pointer-events: auto;
}
[data-theme="light"] .calc-content {
  background: oklch(0.96 0.006 75 / 0.88);
}
.calc-toprow { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }

.calc-badge {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 600;
  letter-spacing: 0.04em; background: var(--accent-bg); color: var(--accent);
  border: 1px solid var(--accent-mid); padding: 3px 9px; border-radius: 3px;
  white-space: nowrap; margin-top: 1px;
}
.calc-name { font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 600; color: var(--text-0); white-space: nowrap; flex-basis: 100%; order: 5; }
.calc-circuit { font-size: 11px; color: var(--text-1); line-height: 1.45; flex-basis: 100%; order: 10; }
.calc-dismiss {
  background: none; border: 1px solid var(--border-1); color: var(--text-2);
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; padding: 4px 10px;
  border-radius: 3px; cursor: pointer; white-space: nowrap;
  transition: color 0.12s, border-color 0.12s;
  margin-left: auto;
}
.calc-dismiss:hover { color: var(--text-0); border-color: var(--text-2); }
.calc-dismiss:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.calc-body { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; flex: 1; }

.mv-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: var(--text-2);
  letter-spacing: 0.08em; text-transform: uppercase; display: block; margin-bottom: 6px;
}
.mv-input-row {
  display: flex; align-items: stretch;
  background: var(--bg-3); border: 1px solid var(--border-1);
  border-radius: 5px; overflow: hidden; transition: border-color 0.15s;
}
.mv-input-row:focus-within { border-color: var(--accent); }
.mv-input-row input {
  flex: 1; background: transparent; border: none; color: var(--text-0);
  font-family: 'IBM Plex Mono', monospace; font-size: 24px; font-weight: 500;
  padding: 10px 12px; outline: none; min-width: 0;
}
.mv-input-row input::placeholder { color: var(--text-3); font-size: 18px; }
.mv-unit { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--text-2); padding: 0 12px 0 4px; display: flex; align-items: center; }

.bar-wrap { margin-top: 8px; }
.bar-track { height: 4px; background: var(--bg-3); border-radius: 2px; overflow: hidden; }
.bar-fill { height: 4px; border-radius: 2px; transition: width 0.3s, background 0.3s; width: 0%; }
.bar-meta { display: flex; justify-content: space-between; margin-top: 4px; }
.bar-pct { font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: var(--text-2); }

.result-area { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.rbox {
  background: var(--bg-2); border: 1px solid var(--border-0);
  border-radius: 5px; padding: 9px 11px; transition: background 0.2s, border-color 0.2s;
}
.rbox-val { font-family: 'IBM Plex Mono', monospace; font-size: 17px; font-weight: 600; color: var(--text-0); line-height: 1.2; }
.rbox-lbl { font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: var(--text-2); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.05em; }
.rbox.ok     { background: var(--green-bg);  border-color: var(--green-bd); }
.rbox.warn   { background: var(--warn-bg);   border-color: var(--warn-bd); }
.rbox.danger { background: var(--danger-bg); border-color: var(--danger-bd); }
.rbox.ok     .rbox-val { color: var(--green); }
.rbox.warn   .rbox-val { color: var(--warn); }
.rbox.danger .rbox-val { color: var(--danger); }

.empty-calc { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--text-3); padding: 10px 0; grid-column: 1/-1; }
.no-results { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--text-2); padding: 24px 0; }

/* ─── 3D FUSE VIEWER ─────────────────────────────────────────────────────── */
.fuse-3d {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  cursor: grab;
}
.fuse-3d:active { cursor: grabbing; }
.fuse-3d canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
@media (max-width: 700px) {
  .calc-panel { top: 0; border-top: none; background: none; }
  .calc-inner { flex-direction: column; padding: 10px 12px 0; gap: 0; }
  .calc-content, [data-theme="light"] .calc-content { width: 100%; box-sizing: border-box; padding: 10px; background: none; backdrop-filter: none; }
  .calc-toprow { margin-bottom: 6px; gap: 4px 6px; }
  .calc-circuit { font-size: 10px; line-height: 1.3; margin-top: 2px; }
  .mv-input-row input { font-size: 18px; padding: 6px 10px; }
  .bar-wrap { margin-top: 4px; }
  .bar-meta { margin-top: 2px; }
  .result-area { gap: 4px; }
  .rbox { padding: 6px 8px; }
  .rbox-val { font-size: 14px; }
  .fuse-3d { inset: 0; height: auto; }
  .controls { gap: 8px; }
  .search-wrap { flex: 1 1 100%; }
}