/* RAG-PDF — palette green/cyan */
:root{
  --bg-deep:#02040a; --bg-elev:#08111e; --bg-card:rgba(10,18,36,0.6);
  --border:rgba(120,180,255,0.14); --border-strong:rgba(120,180,255,0.32);
  --text:#e8edf5; --text-muted:#a3b0c5; --text-soft:#7d8aa1;
  --accent:#39ff14; --accent-deep:#28a80a; --accent-soft:rgba(57,255,20,0.10);
  --accent-glow:rgba(57,255,20,0.32);
  --secondary:#5dd4f7;
  --danger:#ff5a2a; --danger-soft:rgba(255,90,42,0.12);
  --radius:14px; --radius-sm:8px;
  --tween:200ms cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg-deep)}
body{
  margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.55;color:var(--text);background:transparent;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
}
/* HAL background layer */
.neural-bg{position:fixed;inset:0;width:100vw;height:100dvh;z-index:-2;pointer-events:none;display:block}
.neural-overlay{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0.10) 0 1px,transparent 1px 3px),
             radial-gradient(ellipse at center,transparent 25%,rgba(0,0,0,0.55) 90%);
  mix-blend-mode:multiply}
.back-to-menu{
  position:fixed;top:12px;left:12px;z-index:10;
  padding:.55rem .85rem;border-radius:999px;background:var(--bg-card);
  border:1px solid var(--border);color:var(--text-muted);text-decoration:none;
  font-weight:600;font-size:.85rem;backdrop-filter:blur(10px);
  transition:background var(--tween),color var(--tween),border-color var(--tween);
}
.back-to-menu:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.85rem;padding:1.5rem 1rem .8rem;text-align:center}
.topbar .brand{
  font-size:2rem;font-weight:900;letter-spacing:.15em;
  background:linear-gradient(135deg,var(--accent),var(--secondary));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.topbar .tag{
  font-size:.7rem;font-family:ui-monospace,SFMono-Regular,monospace;color:var(--text-soft);
  letter-spacing:.14em;text-transform:uppercase;padding:.35rem .8rem;
  border:1px solid var(--border);border-radius:999px;background:var(--bg-card);
}
.layout{max-width:820px;margin:0 auto;padding:1rem 1.25rem 4rem;display:grid;gap:1rem}
.panel{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.4rem 1.6rem;backdrop-filter:blur(10px);
  animation:panelIn .35s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes panelIn{from{opacity:0;transform:translateY(6px)}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.panel{animation:none}}
.p-title{font-size:1.2rem;margin:0 0 .75rem;display:flex;align-items:center;gap:.7rem;line-height:1.3}
.p-num{
  display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;
  background:var(--accent-soft);color:var(--accent);
  border:1px solid var(--border-strong);border-radius:8px;
  font-family:ui-monospace,SFMono-Regular,monospace;font-weight:800;font-size:.95rem;
}
.p-hint{margin:.4rem 0;color:var(--text-muted);font-size:.92rem;line-height:1.55}
.p-hint strong{color:var(--accent);font-weight:700}
.p-hint code{padding:.1rem .35rem;background:var(--accent-soft);color:var(--accent);border-radius:4px;font-size:.85em;font-family:ui-monospace,monospace}
.p-hint a{color:var(--accent);text-decoration:underline}
.hint{color:var(--text-soft);font-size:.8rem;font-family:ui-monospace,monospace}

.dropzone{
  padding:2rem 1.5rem;border:2px dashed var(--border-strong);border-radius:var(--radius);
  text-align:center;background:var(--bg-elev);
  display:flex;flex-direction:column;align-items:center;gap:.85rem;
  transition:border-color var(--tween),background var(--tween);
}
.dropzone.is-drag{border-color:var(--accent);background:var(--accent-soft)}
.dz-hint{margin:0;color:var(--text-muted);font-size:.95rem}
.dz-small{margin:0;color:var(--text-soft);font-size:.75rem}
.pdf-info{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem}
.chip{
  padding:.35rem .8rem;border-radius:999px;font-size:.72rem;font-weight:700;
  font-family:ui-monospace,SFMono-Regular,monospace;letter-spacing:.05em;
  border:1px solid var(--border-strong);background:var(--bg-elev);color:var(--accent);
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.7rem 1.3rem;border-radius:var(--radius-sm);border:1px solid var(--border-strong);
  background:var(--bg-card);color:var(--text);font-weight:700;text-decoration:none;
  cursor:pointer;font-size:.95rem;font-family:inherit;
  transition:background var(--tween),border-color var(--tween),color var(--tween),transform var(--tween);
  min-height:42px;
}
.btn:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-deep));border-color:transparent;color:#04070f;box-shadow:0 6px 20px -6px var(--accent-glow)}
.btn-primary:hover{color:#04070f;filter:brightness(1.1);border-color:transparent}
.btn:disabled{opacity:.55;cursor:not-allowed;pointer-events:none}

.progress-row{display:flex;flex-direction:column;gap:.5rem;margin:.4rem 0 .75rem}
.prog-item{
  display:flex;justify-content:space-between;align-items:center;gap:.75rem;
  padding:.6rem .85rem;background:var(--bg-elev);border:1px solid var(--border);
  border-radius:var(--radius-sm);font-size:.85rem;
  transition:border-color var(--tween);
}
.prog-item.is-active{border-color:var(--accent);background:var(--accent-soft)}
.prog-item.is-done{border-color:var(--accent);color:var(--accent)}
.pi-name{font-weight:600;color:var(--text)}
.pi-status{font-family:ui-monospace,monospace;color:var(--text-soft);font-size:.78rem}
.prog-item.is-active .pi-status{color:var(--accent)}
.prog-item.is-done .pi-status{color:var(--accent);font-weight:700}
.prog-item.is-error{border-color:var(--danger);background:var(--danger-soft);color:var(--danger)}
.progress-bar{height:6px;background:var(--bg-elev);border-radius:999px;overflow:hidden;margin:.5rem 0}
.progress-bar-fill{display:block;height:100%;background:linear-gradient(90deg,var(--accent-deep),var(--accent));width:0%;transition:width .3s ease}

#query-input{
  width:100%;padding:.85rem 1rem;background:var(--bg-elev);border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);color:var(--text);font-family:inherit;
  font-size:.95rem;line-height:1.55;resize:vertical;min-height:80px;
  transition:border-color var(--tween);
}
#query-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.query-controls{display:flex;justify-content:space-between;align-items:center;gap:.75rem;margin-top:.75rem;flex-wrap:wrap}
.results{margin-top:1.25rem}
.results-title{margin:0 0 .5rem;font-size:1rem;color:var(--accent);font-weight:700;letter-spacing:.02em}
.result-card{
  padding:.85rem 1rem;background:var(--bg-elev);border:1px solid var(--border);
  border-radius:var(--radius-sm);margin-bottom:.6rem;
  transition:border-color var(--tween);position:relative;
}
.result-card:hover{border-color:var(--border-strong)}
.result-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}
.result-rank{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.6rem;height:1.6rem;font-family:ui-monospace,monospace;font-weight:800;font-size:.8rem;
  background:var(--accent-soft);color:var(--accent);border:1px solid var(--border-strong);
  border-radius:6px;
}
.result-score{font-family:ui-monospace,monospace;font-size:.78rem;color:var(--accent);font-weight:700}
.result-page{font-family:ui-monospace,monospace;font-size:.72rem;color:var(--text-soft)}
.result-body{margin:0;color:var(--text);font-size:.88rem;line-height:1.6;white-space:pre-wrap}
.result-body mark{background:var(--accent-soft);color:var(--accent);padding:0 .15rem;border-radius:3px;font-weight:600}
.result-body .best-sentence{display:block;padding:.35rem .55rem;margin:.3rem 0;background:color-mix(in srgb,var(--accent) 10%,transparent);border-left:3px solid var(--accent);border-radius:0 4px 4px 0}
.suggestions{margin:.75rem 0}
.sug-label{margin:0 0 .35rem;color:var(--text-soft);font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.sug-list{display:flex;flex-wrap:wrap;gap:.4rem}
.sug-chip{
  padding:.35rem .7rem;border-radius:999px;font-size:.75rem;
  background:var(--bg-elev);border:1px solid var(--border);color:var(--text-muted);
  cursor:pointer;font-family:inherit;transition:background var(--tween),color var(--tween),border-color var(--tween);
  max-width:100%;text-align:left;font-weight:500;
}
.sug-chip:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.query-controls{gap:1rem;align-items:center}
.topk-inline{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--text-muted);font-weight:600}
.topk-inline input[type="range"]{width:80px;accent-color:var(--accent);height:4px}
.topk-inline output{font-family:ui-monospace,monospace;color:var(--accent);font-weight:800;padding:.1rem .4rem;background:var(--accent-soft);border-radius:999px;min-width:1.6rem;text-align:center}
.answer{
  margin:1rem 0;padding:1rem 1.25rem;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent);
  border:1px solid var(--accent);border-radius:var(--radius);
  animation:panelIn .35s cubic-bezier(.2,.8,.2,1) both;
}
.answer-label{margin:0 0 .5rem;color:var(--accent);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800}
.answer-body{margin:0 0 .35rem;color:var(--text);font-size:.95rem;line-height:1.55;font-weight:500}
.answer-body mark{background:var(--accent-soft);color:var(--accent);padding:0 .15rem;border-radius:3px;font-weight:700}
.answer-src{margin:0;color:var(--text-soft);font-size:.72rem;font-family:ui-monospace,monospace}
.result-gauge{
  display:inline-block;width:60px;height:6px;background:var(--bg-deep);border-radius:999px;overflow:hidden;margin-left:.5rem;
  vertical-align:middle;
}
.result-gauge-fill{display:block;height:100%;background:linear-gradient(90deg,var(--accent-deep),var(--accent));transition:width .3s}
.mode-select{
  padding:.28rem .55rem;background:var(--bg-elev);border:1px solid var(--border);
  border-radius:var(--radius-sm);color:var(--text);font-size:.78rem;font-family:inherit;
  cursor:pointer;
}
.mode-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.result-thumbs{display:flex;gap:.5rem;margin-top:.5rem;flex-wrap:wrap}
.result-thumb{
  position:relative;background:#0f0;border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  overflow:hidden;cursor:pointer;transition:transform var(--tween),border-color var(--tween);
  background:#02040a;
}
.result-thumb:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 6px 20px -6px var(--accent-glow)}
.result-thumb canvas{display:block;max-width:100%;height:auto}
.result-thumb .thumb-badge{
  position:absolute;top:.3rem;left:.3rem;padding:.15rem .5rem;
  background:rgba(2,4,10,.9);color:var(--accent);font-family:ui-monospace,monospace;
  font-size:.65rem;font-weight:700;border-radius:999px;border:1px solid var(--accent);
}
.hist-chip{background:var(--bg-elev);color:var(--text-muted);opacity:.85}
.hist-chip:hover{opacity:1}
@media (max-width:600px){
  .topbar .brand{font-size:1.5rem}
  .panel{padding:1rem 1.15rem}
  .dropzone{padding:1.5rem 1rem}
}

/* Responsive canvas (audit fix) */
canvas{max-width:100%;height:auto;box-sizing:border-box}