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

*{box-sizing:border-box;margin:0;padding:0}

/* Surface tokens: every background/well/chip in the app pulls from these instead of
   one-off hex, so theme.css only has to redefine these few values for light mode
   to cover every component (toolbar, inputs, popovers, SPICE view, Smith overlay...). */
:root{
  --bg:#070a12;--panel:#0c121e;--panel2:#111a2a;--line:#202b3d;
  --text:#edf3fa;--muted:#8b98ac;--dim:#536176;
  --cyan:#67e8f9;--green:#34d399;--red:#fb7185;--amber:#fbbf24;--purple:#a78bfa;
  --font:'DM Sans',sans-serif;--mono:'JetBrains Mono',monospace;

  --surface-0:#070b13;  /* stage / deepest well */
  --surface-1:#080d16;  /* inputs, wells, formula box */
  --surface-2:#131c2c;  /* raised chips: toolbar buttons, tools-3d */
  --surface-3:#111827;  /* floating: popover, examples list */
  --surface-header:#090d15;
  --surface-hover:#121b2b;
  --surface-hover-strong:#1d293c;
  --border-hot:#3d526e;
}

body{height:100vh;overflow:hidden;color:var(--text);background:var(--bg);font:var(--sim-fs-base,13px) var(--font)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}

/* ===== APP SHELL ===== */
#app{height:100vh;display:grid;grid-template-rows:60px minmax(0,1fr) 215px}

header{
  display:flex;align-items:center;gap:22px;padding:0 15px;
  border-bottom:1px solid var(--line);background:var(--surface-header);backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:0 1px 0 rgba(255,255,255,.04),0 4px 20px rgba(0,0,0,.2);
}
.brand{display:flex;align-items:center;gap:10px;width:250px}
.brand>span{
  display:grid;place-items:center;width:36px;height:36px;border-radius:11px;
  color:#051117;background:linear-gradient(135deg,var(--cyan),#818cf8);
  font-size:25px;font-weight:700;
}
.brand div{display:flex;flex-direction:column}
.brand small{margin-top:3px;color:var(--dim);font:var(--sim-fs-3xs,8px) var(--mono);letter-spacing:.1em}

.engine{display:flex;align-items:center;gap:9px;flex:1}
.engine label,.aside-title,.results-head>span{
  color:var(--dim);font:600 var(--sim-fs-2xs,9px) var(--mono);letter-spacing:.14em;
}
.engine select{padding:8px 30px 8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--text);font-size:var(--sim-fs-sm,11px)}

.toolbar{display:flex;gap:7px}
.toolbar button,.btn{
  padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--text);
  font-size:var(--sim-fs-xs,10px);font-weight:600;transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.toolbar button:hover,.btn:hover{border-color:var(--border-hot);background:var(--surface-hover);transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.15)}
.toolbar .primary{border:0;color:#05171a;background:linear-gradient(135deg,#5eead4,#38bdf8);transition:background .18s ease,box-shadow .18s ease,transform .18s ease}.toolbar .primary:hover{background:linear-gradient(135deg,#3dd9c4,#25a8d1);color:#041012;transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.15)}

main{display:grid;grid-template-columns:250px minmax(430px,1fr) 290px;min-height:0}

/* ===== ASIDES ===== */
.library,.inspector{
  min-height:0;overflow-y:auto;padding:var(--sim-sp-4,14px);background:var(--surface-1);backdrop-filter:blur(12px);
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.library{border-right:1px solid rgba(148,163,184,.08)}
.inspector{border-left:1px solid rgba(148,163,184,.08)}
.aside-title{display:flex;justify-content:space-between;margin-bottom:12px}
.aside-title kbd{padding:2px 5px;border:1px solid var(--line);border-radius:4px}

.library input{
  width:100%;padding:9px;margin-bottom:12px;border:1px solid var(--line);border-radius:8px;
  outline:0;color:var(--text);background:var(--surface-1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:var(--sim-fs-sm,11px);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.library input:focus{border-color:var(--cyan)}

.family{margin-bottom:8px}
.family-head{
  display:flex;justify-content:space-between;width:100%;padding:8px 5px;border:0;
  background:transparent;color:var(--dim);font:600 var(--sim-fs-2xs,9px) var(--mono);letter-spacing:.1em;
}
.item{
  display:flex;align-items:center;gap:9px;width:100%;margin:3px 0;padding:8px;
  border:1px solid transparent;border-radius:9px;background:transparent;text-align:left;
  transition:background .18s ease,box-shadow .18s ease,border-color .18s ease,transform .18s ease;
}
.item:hover{border-color:var(--line);background:var(--surface-hover);transform:translateX(2px) translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.15)}
.item i{
  display:grid;place-items:center;width:29px;height:29px;border-radius:8px;
  color:var(--item);background:color-mix(in srgb,var(--item),transparent 88%);font-style:normal;
}
.item span{display:flex;min-width:0;flex-direction:column}
.item strong{font-size:var(--sim-fs-xs,10px)}
.item small{margin-top:2px;color:var(--dim);font-size:var(--sim-fs-3xs,8px)}

.tip,.empty{
  padding:10px;border:1px dashed var(--line);border-radius:9px;
  color:var(--dim);font-size:var(--sim-fs-2xs,9px);line-height:1.5;background:var(--surface-hover);
}

/* ===== STAGE ===== */
#stage{position:relative;min-width:0;overflow:hidden;background:radial-gradient(ellipse 60% 50% at 50% 40%,rgba(34,211,238,.04),transparent),radial-gradient(circle at 30% 60%,rgba(99,102,241,.04),transparent 50%),radial-gradient(circle at 70% 30%,rgba(34,211,238,.03),transparent 50%),linear-gradient(160deg,#0a1020,#050810);background-size:200% 200%,100% 100%,100% 100%,100% 100%;animation:glass-drift 20s ease infinite}
#field{position:absolute;width:100%;height:100%;touch-action:none;image-rendering:auto}

.stage-head,.stage-help{
  position:absolute;z-index:2;display:flex;align-items:center;gap:9px;padding:7px 9px;
  border:1px solid var(--line);border-radius:9px;background:var(--surface-2);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font:var(--sim-fs-2xs,9px) var(--mono);pointer-events:none;box-shadow:0 2px 10px rgba(0,0,0,.2);
}
.stage-head{top:12px;left:12px}
.stage-head span:last-child{color:var(--dim)}
#status-dot{width:7px;height:7px;border-radius:50%;background:var(--amber)}
#status-dot.live{background:var(--green);box-shadow:0 0 9px var(--green)}
.stage-help{right:12px;bottom:12px;color:var(--dim)}

/* ===== INSPECTOR CONTROLS ===== */
.section{margin-bottom:15px;padding-bottom:13px;border-bottom:1px solid rgba(148,163,184,.08)}
.section h3{margin-bottom:10px;font-size:var(--sim-fs-sm,11px)}
.control{margin-bottom:11px}
.control label{display:flex;justify-content:space-between;margin-bottom:5px;color:var(--muted);font-size:var(--sim-fs-2xs,9px)}
.control input,.control select{
  width:100%;padding:7px;border:1px solid var(--line);border-radius:7px;
  outline:0;background:var(--surface-1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--text);font:var(--sim-fs-2xs,9px) var(--mono);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.control input:focus,.control select:focus{border-color:var(--cyan)}
.control input[type=range]{padding:0}
/* Measured/computed readout — amber, distinct from interactive cyan controls */
.control .value{color:var(--sim-value,var(--amber));font-family:var(--mono)}

.formula{padding:8px;border-radius:7px;color:var(--cyan);background:var(--surface-1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font:var(--sim-fs-2xs,9px)/1.5 var(--mono);box-shadow:inset 0 1px 3px rgba(0,0,0,.15)}
.danger{color:#fda4af;border-color:#fb718544;background:#fb718511}

/* ===== RESULTS ===== */
.results{min-height:0;border-top:1px solid var(--line);background:var(--surface-header);display:grid;grid-template-rows:40px 1fr}
.results-head{display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid var(--line)}
#metrics{color:var(--muted);font:var(--sim-fs-2xs,9px) var(--mono)}
#scope{width:100%;height:100%}

/* ===== SMITH CHART ===== */
#smith-canvas{position:absolute;top:0;left:0;width:100%;height:100%;touch-action:none;image-rendering:auto;background:var(--surface-1);z-index:1}

/* ===== SPICE VIEW ===== */
.spice-view{position:absolute;top:0;left:0;width:100%;height:100%;background:color-mix(in srgb,var(--surface-0),transparent 20%);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:2;display:none;flex-direction:column;padding:12px}
.spice-view.active{display:flex}
.spice-view-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.spice-view-header span{color:var(--dim);font:600 var(--sim-fs-2xs,9px) var(--mono);letter-spacing:.14em}
.spice-view-controls{position:relative;display:flex;align-items:center;gap:7px}
.spice-view-controls button{
  padding:5px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:var(--sim-fs-2xs,9px);font-weight:600;color:var(--muted);transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.spice-view-controls button:hover{border-color:rgba(103,232,249,.25);color:var(--text);transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.15)}
.spice-view-controls .primary{border:0;color:#05171a;background:linear-gradient(135deg,#5eead4,#38bdf8);transition:background .18s ease,box-shadow .18s ease,transform .18s ease}.spice-view-controls .primary:hover{background:linear-gradient(135deg,#3dd9c4,#25a8d1);color:#041012;transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.15)}
.spice-examples-btn{cursor:pointer}

.spice-examples-popover{
  position:absolute;top:calc(100% + 4px);left:0;width:270px;max-height:70vh;overflow:auto;
  padding:8px;border:1px solid var(--line);border-top-color:var(--line);border-radius:10px;background:var(--surface-3);backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);
  box-shadow:0 20px 50px rgba(0,0,0,.35),0 8px 20px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.04);z-index:30;display:none;
}
.spice-examples-popover.active{display:block}
.spice-examples-popover section{margin-bottom:8px}
.spice-examples-popover h3{
  font:600 var(--sim-fs-2xs,9px) var(--mono);letter-spacing:.14em;
  margin-bottom:6px;padding:0 4px;color:var(--dim);
}
.spice-examples-popover button{display:block;width:100%;padding:9px;border:0;border-radius:7px;background:transparent;text-align:left;color:var(--text);font-size:var(--sim-fs-xs,10px)}
.spice-examples-popover button:hover{background:var(--surface-hover-strong)}
.spice-examples-popover small{display:block;margin-top:2px;color:var(--dim);font-size:var(--sim-fs-3xs,8px)}

.spice-view textarea{
  width:100%;flex:1;min-height:120px;padding:8px;border:1px solid var(--line);border-radius:6px;
  background:var(--surface-1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--text);font:var(--sim-fs-xs,10px) var(--mono);resize:vertical;outline:0;transition:border-color .18s ease,box-shadow .18s ease;
}
.spice-view textarea:focus{border-color:var(--cyan)}
.spice-view #spice-plots{margin-top:10px;flex:1;overflow-y:auto}

.spice-running,.spice-error{padding:10px;border-radius:6px;font:var(--sim-fs-2xs,9px) var(--mono);text-align:center}
.spice-running{color:var(--cyan);background:rgba(103,232,249,.1)}
.spice-error{color:var(--red);background:rgba(251,113,133,.1)}

.plot-card.spice-probe,.plot-card.spice-tl{margin-top:8px}

.spice-settings{
  display:grid;grid-template-columns:minmax(130px,180px) minmax(130px,180px) minmax(190px,1fr);
  gap:10px;align-items:end;margin-bottom:10px;padding:10px;border:1px solid var(--line);border-top-color:var(--line);border-radius:9px;background:var(--surface-2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 4px 14px rgba(0,0,0,.15);
}
.spice-settings label{display:grid;gap:5px;color:var(--dim);font:600 var(--sim-fs-3xs,8px) var(--mono);letter-spacing:.1em}
.spice-settings input{width:100%;padding:8px;border:1px solid var(--line);border-radius:7px;outline:0;background:var(--surface-1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--text);font:var(--sim-fs-xs,10px) var(--mono)}
.spice-settings input:focus{border-color:var(--cyan)}
.spice-setting-summary{display:flex;justify-content:flex-end;gap:14px;padding:8px;color:var(--muted);font:var(--sim-fs-2xs,9px) var(--mono)}
#spice-status.running{color:var(--cyan)}
#spice-status.success{color:var(--green)}
#spice-status.error{color:var(--red)}

#spice-plots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(520px,100%),1fr));gap:12px;padding:2px 1px 16px}
.plot-card.spice-probe{display:flex;min-width:0;min-height:285px;flex-direction:column;border-color:rgba(103,232,249,.14);background:var(--surface-1);box-shadow:0 16px 38px #0005}
.spice-probe .spice-plot-head{display:flex;min-height:62px;align-items:center;justify-content:space-between;gap:16px;padding:10px 14px;border-bottom:1px solid rgba(103,232,249,.1)}
.spice-plot-head>div:first-child{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:8px}
.spice-plot-head strong{color:var(--text);font:600 12px var(--mono)}
.spice-plot-head>div:first-child small{grid-column:2;color:var(--dim);font:var(--sim-fs-3xs,8px) var(--mono)}
.spice-trace-dot{grid-row:1/3;width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.spice-measures{display:flex;gap:18px}
/* Measured SPICE readouts — amber to match the "computed value" semantic elsewhere */
.spice-measures span{color:var(--sim-value,#fbbf24);font:600 var(--sim-fs-xs,10px) var(--mono);text-align:right}
.spice-measures small{display:block;margin-bottom:3px;color:var(--dim);font:7px var(--mono);letter-spacing:.12em}
.plot-card.spice-probe canvas{display:block;width:100%;height:220px}
.plot-card.spice-tl{flex:auto;padding:10px 12px;border-color:rgba(167,139,250,.18);background:rgba(167,139,250,.05)}

/* ===== SMITH CHART OVERLAY ===== */
.smith-chart-overlay{
  position:absolute;z-index:10;top:12px;right:12px;display:flex;align-items:center;gap:9px;
  padding:7px 9px;border:1px solid var(--line);border-radius:9px;background:var(--surface-1);
  backdrop-filter:blur(10px);font:var(--sim-fs-2xs,9px) var(--mono);pointer-events:auto;
}
.smith-chart-overlay button{padding:5px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2);font-size:var(--sim-fs-2xs,9px);font-weight:600;color:var(--muted)}
.smith-chart-overlay button:hover{border-color:var(--border-hot);color:var(--text)}
.smith-chart-overlay label{display:flex;align-items:center;gap:5px;color:var(--muted)}
.smith-chart-overlay input{width:58px;padding:5px 6px;border:1px solid var(--line);border-radius:6px;outline:0;background:var(--surface-1);color:var(--text);font:var(--sim-fs-2xs,9px) var(--mono)}
.smith-chart-overlay input:focus{border-color:var(--cyan)}

/* ===== POPOVER ===== */
.popover{
  position:fixed;z-index:20;top:52px;right:260px;width:270px;max-height:70vh;overflow:auto;
  padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--surface-3);box-shadow:0 20px 50px #0009;
}
.popover button{display:block;width:100%;padding:9px;border:0;border-radius:7px;background:transparent;text-align:left;color:var(--text)}
.popover button:hover{background:var(--surface-hover-strong)}
.popover small{display:block;margin-top:2px;color:var(--dim)}

/* ===== RESPONSIVE ===== */
@media(max-width:1050px){
  main{grid-template-columns:210px 1fr 250px}
  .brand{width:190px}
  .brand small{display:none}
}
@media(max-width:760px){
  .library{display:none}
  main{grid-template-columns:1fr 240px}
  .toolbar button:not(.primary){display:none}
}