/* ISP TestPoint Agent — PCB dark console theme
   Brand: green #15A417, gray #3F3F3F, copper accents for hardware context
   Fonts: Space Grotesk (display) / Inter (body) / JetBrains Mono (data) */

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

:root{
  --bg:#0b0f0c;
  --panel:#10160f;
  --panel-2:#141c12;
  --line:#22301f;
  --line-soft:#1a241a;
  --green:#15A417;
  --green-bright:#22e025;
  --green-dim:#0e3d10;
  --copper:#c97a3d;
  --copper-dim:#3a2c1c;
  --gray:#3F3F3F;
  --text:#e7efe5;
  --text-dim:#9bb09a;
  --text-mute:#5e7060;
  --red:#e0524a;
  --amber:#d9a83b;
  --radius:10px;
  --mono:'JetBrains Mono', monospace;
  --disp:'Space Grotesk', sans-serif;
  --body:'Inter', sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(21,164,23,0.07) 1px, transparent 1px);
  background-size:26px 26px;
}
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

a{color:var(--green-bright); text-decoration:none}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--green-bright); outline-offset:2px;
}

/* ---------- App shell ---------- */
.app{display:flex; min-height:100vh}
.side{
  width:248px; flex:0 0 248px; background:var(--panel);
  border-right:1px solid var(--line); display:flex; flex-direction:column;
  padding:20px 14px; position:relative;
}
.side::after{
  content:""; position:absolute; top:0; right:-1px; bottom:0; width:1px;
  background:linear-gradient(180deg, transparent, var(--green) 8%, transparent 14%, transparent 86%, var(--green) 92%, transparent);
  opacity:.5;
}
.brand{display:flex; align-items:center; gap:10px; padding:6px 8px 22px}
.brand-mark{
  width:26px; height:26px; border-radius:4px; flex:0 0 26px;
  background:
    linear-gradient(135deg, var(--green) 0%, var(--green-dim) 100%);
  position:relative;
  box-shadow:0 0 0 1px var(--line), 0 0 14px rgba(21,164,23,.35);
}
.brand-mark::before{
  content:""; position:absolute; inset:6px; border:1.5px solid rgba(0,0,0,.4); border-radius:2px;
}
.brand-text{font-family:var(--disp); font-weight:700; font-size:15px; line-height:1.15; letter-spacing:.2px}
.brand-text em{font-style:normal; color:var(--text-dim); font-weight:500; font-size:11px; letter-spacing:1.5px; text-transform:uppercase}
.brand-dim{color:var(--text-dim)}
.brand-lg .brand-text{font-size:19px}
.brand-lg .brand-mark{width:34px;height:34px;flex:0 0 34px}

.nav{display:flex; flex-direction:column; gap:2px; flex:1}
.nav a{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px;
  color:var(--text-dim); font-size:13.5px; font-weight:500; border:1px solid transparent;
}
.nav a:hover{ background:var(--panel-2); color:var(--text) }
.nav a.on{
  background:var(--green-dim); color:var(--green-bright); border-color:var(--line);
}
.nav i{ width:16px; height:16px; flex:0 0 16px; display:inline-block; }

.side-foot{
  border-top:1px solid var(--line); padding-top:14px; margin-top:10px;
  display:flex; flex-direction:column; gap:8px; font-size:12.5px;
}
.trace{ height:1px; background:linear-gradient(90deg, var(--green), transparent); display:block; margin-bottom:4px}
.side-foot .user{color:var(--text-dim); font-family:var(--mono)}
.side-foot .logout{color:var(--text-mute)}
.side-foot .logout:hover{color:var(--red)}

.main{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 28px; border-bottom:1px solid var(--line); background:rgba(16,22,15,.4);
}
.topbar h1{font-family:var(--disp); font-size:20px; margin:0; font-weight:600}
.content{padding:24px 28px 60px; max-width:1180px}

/* ---------- Icons (inline mono symbols via pseudo, kept minimal) ---------- */
i[data-i]{ display:inline-block; width:14px; }
i[data-i]::before{ content:"▸"; color:currentColor; opacity:.8; font-size:11px }
.btn i[data-i]::before, .nav i[data-i]::before, .card-h i[data-i]::before{ content:"●"; font-size:8px; }

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--body); font-weight:600; font-size:13.5px; padding:10px 16px;
  border-radius:8px; border:1px solid var(--line); background:var(--panel-2); color:var(--text);
  cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:transform .12s, background .15s;
}
.btn:hover{ transform:translateY(-1px) }
.btn-primary{ background:var(--green); color:#06210a; border-color:var(--green); }
.btn-primary:hover{ background:var(--green-bright) }
.btn-ghost{ background:transparent }
.btn-block{ width:100%; justify-content:center }

/* ---------- Cards ---------- */
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 18px 20px; margin-bottom:18px;
}
.card-muted{ background:linear-gradient(180deg, var(--panel), var(--panel-2)) }
.card-h{
  font-family:var(--disp); font-weight:600; font-size:14.5px; margin-bottom:14px;
  display:flex; align-items:center; gap:8px; color:var(--text);
}
.card-h i[data-i]{color:var(--green-bright)}
.card-act{ margin-left:auto; font-size:12.5px; font-weight:500 }

/* ---------- Grid / stats ---------- */
.grid-2{ display:grid; grid-template-columns:1.1fr .9fr; gap:18px }
@media (max-width:900px){ .grid-2{grid-template-columns:1fr} }

.stats{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:20px }
@media (max-width:1000px){ .stats{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .stats{grid-template-columns:repeat(2,1fr)} }
.stat{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 14px 12px; position:relative; overflow:hidden;
}
.stat-trace{position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--line-soft)}
.stat-n{display:block; font-family:var(--mono); font-size:24px; font-weight:500; color:var(--text)}
.stat-l{display:block; font-size:11.5px; color:var(--text-dim); margin-top:2px}
.stat-g .stat-n, .stat-g ~ .stat-trace{color:var(--green-bright)}
.stat-c{color:var(--green-bright)}
.stat-a{color:var(--amber)}
.stat-r{color:var(--red)}

/* ---------- Forms ---------- */
.form label{ display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--text-dim); margin-bottom:14px; font-weight:500 }
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
@media (max-width:640px){ .f-row{grid-template-columns:1fr} }
input[type=text], input[type=password], input[type=email], input:not([type]), select, textarea{
  background:var(--bg); border:1px solid var(--line); border-radius:7px; color:var(--text);
  padding:10px 12px; font-family:var(--body); font-size:13.5px;
}
textarea{ font-family:var(--mono); resize:vertical }
.hint{ font-size:12px; color:var(--text-mute); margin:6px 0 0 }

.seg{ display:flex; gap:8px; flex-wrap:wrap }
.seg-i{ flex-direction:row !important; align-items:center; gap:0 !important; cursor:pointer;
  border:1px solid var(--line); border-radius:7px; padding:8px 12px; background:var(--bg); margin:0; }
.seg-i input{ display:none }
.seg-i span{ font-size:12.5px; color:var(--text-dim); font-weight:500 }
.seg-i:has(input:checked){ border-color:var(--green); background:var(--green-dim) }
.seg-i:has(input:checked) span{ color:var(--green-bright) }

/* ---------- Tables ---------- */
.tbl{ width:100%; border-collapse:collapse; font-size:13px }
.tbl th{ text-align:left; color:var(--text-mute); font-weight:600; font-size:11px; text-transform:uppercase;
  letter-spacing:.5px; padding:8px 10px; border-bottom:1px solid var(--line) }
.tbl td{ padding:10px; border-bottom:1px solid var(--line-soft) }
.tbl tr:hover td{ background:rgba(21,164,23,.04) }
.mono{ font-family:var(--mono) }
.tbl-pins .pin-name{ color:var(--copper); font-weight:600 }

/* ---------- Chips ---------- */
.chip{ display:inline-block; padding:3px 9px; border-radius:99px; font-size:11px; font-weight:600;
  border:1px solid var(--line); text-transform:capitalize }
.chip-done, .chip-live{ background:var(--green-dim); color:var(--green-bright); border-color:var(--green) }
.chip-error{ background:#2b1212; color:var(--red); border-color:var(--red) }
.chip-running, .chip-queued{ background:#2b220f; color:var(--amber); border-color:var(--amber) }
.chip-unverified, .chip-draft{ background:var(--copper-dim); color:var(--copper); border-color:var(--copper) }
.chip-type{ background:var(--panel-2); color:var(--text-dim); text-transform:capitalize }

/* ---------- Misc ---------- */
.muted{ color:var(--text-mute) }
.small{ font-size:12px }
.link{ font-size:12.5px; font-weight:600 }
.empty{ text-align:center; padding:40px 10px; color:var(--text-mute) }
.empty p{ margin-bottom:14px }
.back{ display:inline-block; margin-bottom:14px; font-size:12.5px; color:var(--text-dim) }
.filters{ display:flex; gap:8px; margin-bottom:16px }
.filter{ padding:7px 14px; border-radius:7px; border:1px solid var(--line); color:var(--text-dim); font-size:12.5px; font-weight:600 }
.filter.on{ background:var(--green-dim); color:var(--green-bright); border-color:var(--green) }

.alert{ padding:12px 14px; border-radius:8px; font-size:13px; margin-bottom:16px; border:1px solid }
.alert-ok{ background:var(--green-dim); color:var(--green-bright); border-color:var(--green) }
.alert-err{ background:#2b1212; color:#ff8b84; border-color:var(--red) }
.alert-warn{ background:var(--copper-dim); color:#e8b98a; border-color:var(--copper) }

.kv{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px }
.kv div{ background:var(--bg); border:1px solid var(--line-soft); border-radius:7px; padding:8px 10px; display:flex; justify-content:space-between; gap:8px }
.kv span{ color:var(--text-mute); font-size:11.5px }
.kv b{ font-family:var(--mono); font-size:12.5px; text-align:right }

.taglist{ margin-top:12px; font-size:12px; display:flex; gap:6px; flex-wrap:wrap; align-items:center }
.tl-h{ color:var(--text-mute); margin-right:2px }
.tag{ background:var(--panel-2); border:1px solid var(--line); padding:3px 9px; border-radius:99px; color:var(--text-dim) }
.tag-c{ border-color:var(--green); color:var(--green-bright) }
.warnbox{ margin-top:14px; background:var(--copper-dim); border:1px solid var(--copper); border-radius:7px; padding:10px 12px; font-size:12.5px; color:#e8b98a; display:flex; gap:8px }

.article{ font-size:13.5px; line-height:1.65; color:var(--text-dim); max-height:560px; overflow:auto; padding-right:6px }
.article h2{ font-family:var(--disp); color:var(--text); font-size:16px; margin:18px 0 8px }
.article table{ width:100%; border-collapse:collapse; font-size:12.5px; margin:10px 0 }
.article table td, .article table th{ border:1px solid var(--line); padding:6px 8px }

.logbox{ font-family:var(--mono); font-size:11.5px; max-height:320px; overflow:auto; display:flex; flex-direction:column; gap:5px }
.logline{ display:flex; gap:10px; padding:4px 8px; border-radius:5px; background:var(--bg) }
.lt{ color:var(--text-mute) }
.ll{ color:var(--green-bright); width:42px }
.log-error .ll{ color:var(--red) }
.log-warn .ll{ color:var(--amber) }
.lj{ color:var(--copper) }

.jobhead{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap }
.jh-title{ font-family:var(--disp); margin:0 0 8px; font-size:18px }
.jh-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }

.steps{ margin:0; padding-left:18px; color:var(--text-dim); font-size:13px; display:flex; flex-direction:column; gap:8px }
.steps code{ background:var(--bg); padding:1px 6px; border-radius:4px; font-family:var(--mono); color:var(--green-bright) }

/* ---------- Auth screen ---------- */
.auth-body{ display:flex; align-items:center; justify-content:center; min-height:100vh }
.auth-card{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:32px 30px; width:380px; box-shadow:0 30px 80px -30px rgba(21,164,23,.18);
}
.auth-sub{ color:var(--text-mute); font-size:12.5px; margin:4px 0 18px }
.auth-form{ display:flex; flex-direction:column }
.auth-trace{ height:1px; margin-top:18px; background:linear-gradient(90deg, transparent, var(--green), transparent) }
.install-list{ list-style:none; padding:0; margin:14px 0; display:flex; flex-direction:column; gap:8px; font-size:13px }
.il-ok{ color:var(--green-bright) }
.il-err{ color:var(--red) }
.il-warn{ color:var(--amber) }