:root{
  --bg:#0a1730; --bg2:#0e2143; --panel:#122a4f; --panel2:#14315c;
  --line:rgba(96,140,220,.20); --accent:#3b82f6; --accent2:#60a5fa;
  --ink:#e7edf7; --muted:#9fb2d0;
}
*{box-sizing:border-box}
body{
  margin:0;background:
    radial-gradient(1100px 500px at 85% -10%,rgba(59,130,246,.10),transparent),
    linear-gradient(170deg,#081226,#0a1730 45%,#0b1c3a);
  color:var(--ink);font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;min-height:100vh}
a{color:var(--accent2);text-decoration:none}a:hover{text-decoration:underline}

.app-header{border-bottom:1px solid var(--line);background:rgba(10,23,48,.6);backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:10}
.app-header__inner{max-width:1500px;margin:0 auto;padding:16px 24px;display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:12px}
.app-header__brand{display:flex;align-items:center;gap:14px}
.app-header__brand h1{font-size:1.5rem;margin:0;letter-spacing:.3px}
.app-header__brand p{margin:2px 0 0;color:var(--muted);font-size:.9rem}
.app-header__meta{display:flex;gap:8px;flex-wrap:wrap}
.pill{font-size:.74rem;border:1px solid var(--line);color:var(--accent2);background:rgba(59,130,246,.08);
  padding:5px 11px;border-radius:20px}

.app-main{max-width:1500px;margin:0 auto;padding:24px}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.toolbar__hint{color:var(--muted);margin:0;font-size:.95rem}
.toolbar__actions{display:flex;align-items:center;gap:12px}
.btn-accent{background:var(--accent);color:#08152e;border:none;font-weight:700;padding:10px 20px;border-radius:9px;transition:.2s}
.btn-accent:hover{background:var(--accent2);color:#08152e;box-shadow:0 6px 20px rgba(59,130,246,.35)}
.text-accent{color:var(--accent2)!important}

.panel{background:linear-gradient(160deg,var(--panel),var(--panel2));border:1px solid var(--line);
  border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.25);margin-bottom:24px}
.panel__head{padding:15px 20px;border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,rgba(59,130,246,.10),transparent)}
.panel__head h2{margin:0;font-size:1rem;font-weight:700;color:var(--accent2);letter-spacing:.3px}
.panel__body{padding:18px 20px}
.panel__body#sample-metadata{font-size:.92rem;line-height:1.9;color:var(--ink)}
#sample-metadata p{margin:0;padding:3px 0;border-bottom:1px dashed rgba(96,140,220,.14)}

.form-select{background:rgba(8,18,38,.7);border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:10px 12px}
.form-select:focus{border-color:var(--accent);box-shadow:0 0 0 .2rem rgba(59,130,246,.2);background:rgba(8,18,38,.9);color:var(--ink)}
.form-select option{background:#0e2143;color:var(--ink)}

.js-plotly-plot,.plotly,.plot-container{width:100%!important}

.app-footer{max-width:1500px;margin:20px auto 0;padding:24px;border-top:1px solid var(--line);
  text-align:center;color:var(--muted);font-size:.9rem}
.app-footer p{margin:4px 0}

@media (max-width:768px){
  .app-header__brand h1{font-size:1.25rem}
  .toolbar{flex-direction:column;align-items:flex-start}
}