:root{
  --bg:#0b1220; --panel:#0e1628; --bar:#0c1320;
  --border:#20304a; --text:#e8eefc; --muted:#98a8c9; --acc:#79e0ff; --accent2:#5de39a;
  --link:#7fb7ff;

  /* layout tweaks */
  --page-pad: clamp(12px, 3vw, 28px);
  --sticky-top: 12px;
  --sidebar-w: clamp(300px, 22vw, 360px);
  --sidebar-pad-x: 16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,ui-sans-serif,Apple Color Emoji,Segoe UI Emoji}
h1,h2{margin:0 0 10px}
a{color:var(--link);text-decoration:none} a:hover{text-decoration:underline}

/* TOP BAR */
.top{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--border);
  background:linear-gradient(0deg,rgba(255,255,255,0.02),rgba(255,255,255,0.02));
  padding-inline: var(--page-pad);
}
.top-actions{display:flex;gap:10px;align-items:center}

/* LAYOUT */
.layout{
  display:grid;
  grid-template-columns: var(--sidebar-w) minmax(0,1fr);
  gap: var(--gap, 1rem);
  align-items:start;
  overflow: visible;              /* don't clip sticky children */
  padding-inline: var(--page-pad);
}

/* STICKY SIDEBAR */
.sidebar{
  position: sticky;               /* key: make it sticky again */
  top: var(--sticky-top);
  align-self: start;
  padding: 12px var(--sidebar-pad-x);
  scrollbar-gutter: stable both-edges;   /* text never kisses scrollbar */
  max-height: calc(100dvh - var(--sticky-top) - 12px);
  overflow: auto;
}

/* Mobile: let it flow normally */
@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr; }
  .sidebar{ position: static; max-height:none; overflow:visible; }
}

/* STEPS & BARS */
.step{padding:16px 18px;border-top:1px solid var(--border)}
.step .n{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:999px;background:#18243a;border:1px solid var(--border);font-size:1.5rem;color:var(--acc);margin-right:8px}
.bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--bar);border:1px solid var(--border);border-radius:12px;padding:10px 12px}
.inline-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.light-weight{font-weight:300; font-size:0.8em}

/* UPLOAD */
.dropzone{margin:8px 0;background:#0a101b;border:1px dashed var(--border);border-radius:12px;cursor:pointer}
.dropzone .dz-inner{padding:16px;color:var(--muted);text-align:center}
.dropzone.dragover{border-color:var(--acc);box-shadow:0 0 0 2px rgba(121,224,255,.2) inset}

/* CROP & PREVIEW */
.crop-wrap{margin-top:10px}
#cropCanvas{width:100%;height:auto;background:#0a0f16;border:1px solid var(--border);border-radius:12px}

.preview{margin-top:10px;max-width:960px}
#previewCanvas{width:100%;height:auto;background:#080d17;border:1px solid var(--border);border-radius:12px}
.meta-line{margin-top:6px;color:var(--muted);font-size:.95rem}

@media (min-width: 1100px){
  .preview{max-width:45vw}
}

/* STATUS */
.status-wrap{margin-top:12px}
.status-row{display:flex;gap:10px;align-items:center}
.status-text{color:var(--muted)}
.status-progress{flex:1;height:6px;background:#121b2e;border-radius:999px;overflow:hidden;border:1px solid var(--border)}
.status-progress__bar{height:100%;width:0%;background:linear-gradient(90deg,var(--acc),#7cffc3)}

/* DEBUG */
.debug-log{max-height:240px;overflow:auto;background:#070c15;border:1px solid var(--border);border-radius:12px;padding:10px;color:#cfe3ff}

/* BUTTONS & INPUTS */
.btn-run{padding:8px 12px;border-radius:10px;border:1px solid var(--border);font-size:1.06em; background:#46608b;color:var(--text);cursor:pointer; font-weight:800}
.btn-run:hover{background:#80589b}
.btn-secondary{background:#1e2d4d; font-size:0.9em; font-weight:300}
.toggle{display:inline-flex;gap:6px;align-items:center;cursor:pointer}

select, input[type="number"], input[type="text"]{background:#0f182a;border:1px solid var(--border);color:var(--text);border-radius:8px;padding:6px}
small.hint{color:var(--muted)}
.sidebar img{max-width:100%;height:auto;border:1px solid var(--border);border-radius:8px;margin:6px 0}
.sidebar h3{margin:10px 0 6px}
.sidebar p{color:var(--muted);line-height:1.4}
.sidebar ul{margin:6px 0 10px 18px;color:var(--muted)}

/* Sidebar TOC: stacked links with comfy hit area */
#toc a { display:block; padding: .4rem .6rem; margin: .2rem 0; border-radius: 8px; }

/* TABLES (compact width + vertical dividers + 3rd-col wrapping) */
.table-wrap {
  display: inline-block;         /* shrink-to-fit content */
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.kv-table {
  width: auto;                   /* don't stretch full width */
  table-layout: auto;
  border-collapse: collapse;
  font-size: .95rem;
}
.kv-table th, .kv-table td {
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.kv-table th:last-child, .kv-table td:last-child { border-right: 0; }
.kv-table thead th {
  text-align: left;
  position: sticky; top: 0;
  background: var(--panel);
  z-index: 1;
}
.kv-table tbody tr:nth-child(even) { background: rgba(255,255,255,.03); }
.kv-table td:nth-child(2) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kv-table th:nth-child(3), .kv-table td:nth-child(3) {
  max-width: 50ch; white-space: normal; overflow-wrap: anywhere;
}
@media (max-width: 640px){
  .kv-table th:nth-child(3), .kv-table td:nth-child(3){ max-width: 32ch; }
}

/* FIGURE LEGEND */
.figure-legend {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
  line-height: 1.5;
}
.figure-legend p { margin: 0.5rem 0; }
.figure-legend strong { color: #fff; } /* high-contrast on dark theme */

/* force the model label onto its own row inside .bar (which is flex) */
.model-label{
  flex: 0 0 100%;   /* full row */
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--muted);
}

/* make the run buttons live on their own row (optional but tidy) */
.btn-row{
  width: 100%;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}