:root {
  --bg: #0b1020;
  --panel: #121a2d;
  --panel-2: #172038;
  --line: rgba(255,255,255,.12);
  --text: #ecf2ff;
  --muted: #a7b2c8;
  --accent: #66e3ff;
  --accent-2: #7cf4ae;
  --warn: #ffd166;
  --danger: #ff6b6b;
  --good: #48d597;
  --shadow: 0 20px 60px rgba(0,0,0,.35);
  --radius: 18px;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 15% 10%, rgba(102, 227, 255, .16), transparent 32rem),
    radial-gradient(circle at 85% 5%, rgba(124, 244, 174, .12), transparent 30rem),
    var(--bg);
  color: var(--text);
}
button, input, select, textarea { font: inherit; }
button {
  border: 0;
  border-radius: 12px;
  padding: .75rem 1rem;
  background: linear-gradient(135deg, #23bad8, #2f83ff);
  color: white;
  font-weight: 750;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(47,131,255,.24);
}
button:hover { transform: translateY(-1px); }
button:active { transform: translateY(0); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
button.secondary { background: linear-gradient(135deg, #42c894, #26996c); box-shadow: 0 10px 25px rgba(66,200,148,.18); }
button.ghost-btn, button.ghost-btn:hover { background: rgba(255,255,255,.08); box-shadow: none; color: var(--text); border: 1px solid var(--line); }
button.danger { background: linear-gradient(135deg, #ff6b6b, #c92f4e); box-shadow: 0 10px 25px rgba(255,107,107,.18); }
button.primary { background: linear-gradient(135deg, #66e3ff, #2f83ff); }
code { background: rgba(255,255,255,.08); padding: .15rem .35rem; border-radius: .35rem; color: #eaffff; }
.app-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 1.3rem clamp(1rem, 3vw, 2rem) .9rem;
}
.eyebrow { margin: 0; color: var(--accent); letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; font-weight: 800; }
h1 { margin: .1rem 0 0; font-size: clamp(1.4rem, 4vw, 2.35rem); }
h2 { margin: 0 0 .35rem; font-size: 1.1rem; }
p { color: var(--muted); line-height: 1.5; }
.lead { font-size: 1rem; }
.build-pill { border: 1px solid var(--line); background: rgba(255,255,255,.08); color: #defbff; padding: .55rem .8rem; border-radius: 99px; white-space: nowrap; font-weight: 800; }
.tabs {
  display: flex;
  gap: .55rem;
  overflow-x: auto;
  padding: .2rem clamp(1rem, 3vw, 2rem) 1rem;
}
.tab {
  background: rgba(255,255,255,.07);
  color: var(--muted);
  border: 1px solid var(--line);
  box-shadow: none;
  white-space: nowrap;
}
.tab.active { color: var(--text); background: linear-gradient(135deg, rgba(102,227,255,.26), rgba(47,131,255,.25)); border-color: rgba(102,227,255,.5); }
.app-shell { padding: 0 clamp(1rem, 3vw, 2rem) 2rem; }
.panel { display: none; }
.panel.active { display: block; }
.grid { display: grid; gap: 1rem; margin-bottom: 1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.span-2 { grid-column: span 2; }
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.045));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  overflow: hidden;
}
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .75rem; }
.card-head p { margin: .1rem 0 0; }
.kpi-card strong { display: block; font-size: clamp(2rem, 6vw, 3rem); margin: .15rem 0; }
.kpi-card small, .muted, .hint { color: var(--muted); }
.hint { font-size: .88rem; }
label { display: grid; gap: .35rem; color: #d7e2f8; font-weight: 700; margin: .8rem 0; }
input, select, textarea {
  width: 100%;
  color: var(--text);
  background: rgba(255,255,255,.075);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .75rem .8rem;
  outline: none;
}
select option { color: #111827; }
input:focus, select:focus, textarea:focus { border-color: rgba(102,227,255,.75); box-shadow: 0 0 0 3px rgba(102,227,255,.12); }
input[type=file] { padding: .65rem; }
input[type=range] { accent-color: #66e3ff; }
.button-row { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; }
.button-row.right { justify-content: flex-end; }
.table-toolbar { display: flex; gap: .6rem; margin: .4rem 0 .8rem; }
.table-toolbar.multi > * { max-width: 360px; }
.table-wrap { overflow: auto; border-radius: 14px; border: 1px solid var(--line); }
.data-table { width: 100%; border-collapse: collapse; min-width: 650px; }
.data-table th, .data-table td { text-align: left; padding: .72rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table th { background: rgba(255,255,255,.08); color: #e9f3ff; position: sticky; top: 0; z-index: 1; }
.data-table tr:hover td { background: rgba(255,255,255,.035); }
.status-pass { color: var(--good); font-weight: 900; }
.status-fail { color: var(--danger); font-weight: 900; }
.canvas-card { min-height: 550px; }
.canvas-stage {
  position: relative;
  width: 100%;
  min-height: 420px;
  background: rgba(0,0,0,.22);
  border: 1px dashed rgba(255,255,255,.2);
  border-radius: 16px;
  overflow: auto;
  display: grid;
  place-items: center;
}
.canvas-stage canvas { max-width: 100%; height: auto; background: rgba(0,0,0,.35); }
.inspect-stage { min-height: 360px; margin-top: .75rem; }
.empty-state {
  min-height: 120px;
  border: 1px dashed var(--line);
  color: var(--muted);
  border-radius: 14px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
}
.roi-editor-form output { color: var(--accent); font-weight: 900; }
.camera-card video {
  display: none;
  width: 100%;
  max-height: 360px;
  background: #000;
  border-radius: 14px;
  margin: .5rem 0;
  border: 1px solid var(--line);
}
.camera-card video.active { display: block; }
.camera-diagnostics {
  display: none;
  background: rgba(255,209,102,.12);
  border: 1px solid rgba(255,209,102,.35);
  color: #ffe7a3;
  border-radius: 14px;
  padding: .75rem;
  margin-bottom: .7rem;
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem;
}
.camera-diagnostics.active { display: block; }
.input-inline { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .75rem; }
.result-card.pass { border-color: rgba(72,213,151,.7); box-shadow: 0 0 0 2px rgba(72,213,151,.12), var(--shadow); }
.result-card.fail { border-color: rgba(255,107,107,.7); box-shadow: 0 0 0 2px rgba(255,107,107,.12), var(--shadow); }
.result-big { font-size: clamp(2.2rem, 10vw, 4.5rem); font-weight: 950; margin: .2rem 0; }
.result-score { font-size: 1.15rem; font-weight: 850; }
.concept-flow { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 1rem 0; }
.concept-flow div { padding: .65rem .7rem; border: 1px solid rgba(102,227,255,.35); background: rgba(102,227,255,.1); border-radius: 12px; color: #e9fbff; font-weight: 800; }
.concept-flow span { color: var(--accent); font-weight: 900; }
.check-list { padding-left: 1.2rem; color: var(--muted); line-height: 1.65; }
.steps { color: var(--muted); line-height: 1.65; }
.check-row { display: flex; grid-template-columns: none; align-items: center; gap: .6rem; }
.check-row input { width: auto; }
.toast {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%) translateY(150%);
  background: #101827;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .8rem 1rem;
  box-shadow: var(--shadow);
  transition: transform .22s ease;
  z-index: 999;
  max-width: min(90vw, 680px);
}
.toast.show { transform: translateX(-50%) translateY(0); }
.hidden { display: none !important; }
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
}
@media (max-width: 680px) {
  .app-header { align-items: flex-start; flex-direction: column; }
  .card-head { flex-direction: column; }
  .input-inline { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
  .tabs { position: sticky; top: 0; z-index: 10; background: rgba(11,16,32,.92); backdrop-filter: blur(8px); }
  .canvas-stage { min-height: 300px; }
}
@media print {
  body { background: white; color: black; }
  .tabs, .app-header, button, input, select, textarea, .camera-card, .table-toolbar { display: none !important; }
  .panel { display: block !important; }
  .card { border: 1px solid #ddd; box-shadow: none; color: black; }
  p, .muted, .hint { color: #333; }
}