:root { color-scheme: dark; --bg:#0b1020; --panel:#141b2d; --line:#2a3651; --text:#edf2ff;
  --muted:#94a3bd; --blue:#5b8cff; --green:#3ddc97; --red:#ff6577; --amber:#f6c85f; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(circle at top,#172344,var(--bg) 42%); color:var(--text);
  font:15px/1.45 Inter,system-ui,sans-serif; min-height:100vh; }
.shell { width:min(1500px,96vw); margin:auto; padding:28px 0 60px; }
.page-header,.section-heading,.item-card { display:flex; justify-content:space-between; gap:18px; align-items:center; }
h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:6px; font-size:clamp(28px,4vw,46px); }
h2 { margin-bottom:5px; } h3 { color:#c9d6f1; }
.eyebrow { color:#75a0ff; font-size:12px; letter-spacing:.16em; font-weight:800; margin-bottom:7px; }
.subtitle,.section-heading p,.intro p { color:var(--muted); margin-bottom:0; }
.connection { padding:9px 14px; border:1px solid var(--line); border-radius:999px; color:var(--muted); white-space:nowrap; }
.connection span { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--amber); margin-right:8px; }
.connection.online span { background:var(--green); }.connection.offline span { background:var(--red); }
.tabs { display:flex; gap:8px; margin:26px 0 16px; padding:5px; background:#0d1425; border:1px solid var(--line); border-radius:14px; }
.tab { flex:1; border:0; color:var(--muted); background:transparent; padding:12px; border-radius:10px; cursor:pointer; font-weight:700; }
.tab.active { background:var(--blue); color:white; }
.workspace { display:none; }.workspace.active { display:grid; gap:16px; }
.panel { background:linear-gradient(145deg,#151d31,#111829); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:0 16px 40px #05081255; }
.upload-form { display:grid; gap:16px; }
.drop-zone { min-height:150px; border:2px dashed #3a4a70; border-radius:14px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:5px; cursor:pointer; background:#0c1324aa; }
.drop-zone:hover { border-color:var(--blue); }.drop-zone input { max-width:280px; }.upload-icon { font-size:30px; color:var(--blue); }
button,.primary,.secondary,.danger,select { font:inherit; }
button { cursor:pointer; }.primary { border:0; border-radius:11px; padding:12px 18px; color:white; font-weight:800;
  background:linear-gradient(135deg,#4778f3,#765bea); }
.secondary,.danger { border:1px solid var(--line); border-radius:9px; padding:8px 12px; color:var(--text); background:#1c2740; }
.danger { color:#ff9ba7; border-color:#6b3340; }.form-message { min-height:22px; color:var(--green); margin:0; }.error { color:var(--red)!important; }
.card-list { display:grid; gap:9px; }.item-card,.job-card { padding:12px; border:1px solid var(--line); border-radius:11px; background:#0c1324; }
.item-card>div,.job-card { display:flex; flex-direction:column; gap:3px; }.item-card small,.job-card small,.job-card code { color:var(--muted); }
.warning { color:var(--amber)!important; }.empty { color:var(--muted); text-align:center; padding:18px; margin:0; }
.clickable { cursor:pointer; transition:border-color .15s ease,transform .15s ease; }
.clickable:hover,.clickable:focus-visible { border-color:var(--blue); transform:translateY(-1px); outline:none; }
.detail-modal { width:min(760px,calc(100vw - 28px)); max-height:88vh; padding:0; border:1px solid var(--line);
  border-radius:16px; color:var(--text); background:#111829; box-shadow:0 24px 80px #000b; }
.detail-modal::backdrop { background:#030711bb; backdrop-filter:blur(3px); }
.modal-card { padding:0; }.modal-header { display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:18px 20px; border-bottom:1px solid var(--line); }
.modal-header h2 { margin:0; font-size:21px; overflow-wrap:anywhere; }
.modal-close { width:36px; height:36px; border:1px solid var(--line); border-radius:9px;
  color:var(--text); background:#1c2740; font-size:24px; line-height:1; }
.modal-body { display:grid; gap:18px; padding:20px; overflow:auto; max-height:64vh; }
.modal-section { display:grid; gap:8px; }.modal-section h3 { margin:0; }
.detail-grid { display:grid; grid-template-columns:minmax(150px,210px) 1fr; gap:7px 16px; margin:0; }
.detail-grid dt { color:var(--muted); }.detail-grid dd { margin:0; overflow-wrap:anywhere; }
.detail-list { margin:0; padding-left:20px; }.detail-list li { margin:4px 0; overflow-wrap:anywhere; }
.modal-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; padding:15px 20px;
  border-top:1px solid var(--line); }
.choice-grid,.checks,.detector-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px; margin:10px 0 18px; }
.choice-grid label,.checks label,.detector-grid label { display:flex; gap:8px; align-items:center; padding:9px 11px;
  border:1px solid var(--line); border-radius:9px; background:#0c1324; overflow-wrap:anywhere; }
.training-columns { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:16px; }
fieldset { border:1px solid var(--line); border-radius:12px; min-width:0; } legend { color:#b9c9e8; font-weight:700; }
.field { display:grid; gap:6px; }.field select { padding:10px; border:1px solid var(--line); border-radius:9px; background:#0c1324; color:var(--text); }
details { border:1px solid var(--line); border-radius:10px; padding:11px; } summary { cursor:pointer; font-weight:700; }
.jobs-panel { margin-top:0; }.job-columns { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.job-card p { margin:5px 0; }.job-card code { font-size:11px; overflow-wrap:anywhere; }
@media(max-width:850px) { .training-columns,.job-columns { grid-template-columns:1fr; }.page-header { align-items:flex-start; }.tabs { flex-direction:column; }
  .detail-grid { grid-template-columns:1fr; gap:2px; }.detail-grid dd { margin-bottom:8px; } }