@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

:root {
  --bg: #111113;
  --surface: #18181b;
  --surface2: #1f1f24;
  --border: #2a2a30;
  --border2: #35353d;
  --text: #e4e4e8;
  --muted: #6b6b78;
  --muted2: #45454f;
  --accent: #a8c4d4;
  --accent-dim: #1a2d36;
  --accent-text: #c8dde8;
  --gold: #c8a94a;
  --green: #4a9e6a;
  --red: #9e4a4a;
  --red-dim: #231010;
  --mono: 'IBM Plex Mono', monospace;
  --sans: 'IBM Plex Sans', sans-serif;
  --r: 6px;
  --r-lg: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* TOP BAR */
#topbar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0 1.25rem;
  height: 48px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}

#topbar h1 {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--accent-text);
}

#status-pill {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--muted);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 0.2rem 0.7rem;
}
.sdot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted2); flex-shrink: 0; }
.sdot.loading { background: var(--gold); animation: pulse 1s ease-in-out infinite; }
.sdot.ready   { background: var(--green); }
.sdot.error   { background: var(--red); }
.sdot.working { background: var(--accent); animation: pulse 0.7s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

#file-area { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; }

#fname-display {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--gold);
  display: none;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-btn {
  height: 28px;
  padding: 0 0.75rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  border-radius: var(--r);
  cursor: pointer;
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--text);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.top-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-text); }
.top-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.top-btn.primary { border-color: var(--accent); background: var(--accent-dim); color: var(--accent-text); }
.top-btn.primary:hover:not(:disabled) { background: var(--accent); color: #fff; }
#file-input { display: none; }

/* INFO BAR */
#info-bar {
  display: none;
  align-items: center;
  gap: 0;
  height: 26px;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--muted);
  padding: 0 1.25rem;
  overflow: hidden;
}
#info-bar.visible { display: flex; }
.info-seg { display: flex; gap: 0.4rem; align-items: center; padding-right: 1rem; margin-right: 1rem; border-right: 1px solid var(--border); }
.info-seg:last-child { border-right: none; }
.info-seg span { color: var(--text); }

/* LAYOUT */
#layout { display: flex; flex: 1; overflow: hidden; }

/* SIDEBAR */
#sidebar {
  width: 270px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
}

.sb-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}
.sb-scroll::-webkit-scrollbar { width: 4px; }
.sb-scroll::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

.sec-title {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 0.55rem;
  margin-top: 1.2rem;
}
.sec-title:first-child { margin-top: 0; }

.op-row { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.35rem; }

.op-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}
.op-toggle input[type=checkbox] { accent-color: var(--accent); width: 13px; height: 13px; cursor: pointer; }

.op-in {
  flex: 1;
  height: 24px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 0 0.45rem;
  min-width: 0;
}
.op-in:focus { outline: none; border-color: var(--accent); }
.op-in:disabled { opacity: 0.28; pointer-events: none; }
select.op-in {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%236b6b78'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  padding-right: 1rem;
  cursor: pointer;
}

.lbl { font-family: var(--mono); font-size: 0.62rem; color: var(--muted); flex-shrink: 0; }

.sb-btn {
  width: 100%;
  margin-top: 0.85rem;
  height: 30px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  border-radius: var(--r);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sb-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.sb-btn.accent { background: var(--accent-dim); border: 1px solid var(--accent); color: var(--accent-text); }
.sb-btn.accent:hover:not(:disabled) { background: var(--accent); color: #fff; }
.sb-btn.neutral { background: transparent; border: 1px solid var(--border2); color: var(--muted); }
.sb-btn.neutral:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }

.param-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; }

.pchip {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-family: var(--mono);
  padding: 0.28rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  cursor: pointer;
  background: var(--surface2);
  transition: all 0.12s;
  user-select: none;
}
.pchip input { accent-color: var(--accent); cursor: pointer; width: 11px; height: 11px; }
.pchip:has(input:checked) { border-color: var(--accent); background: var(--accent-dim); color: var(--accent-text); }

.sel-row { display: flex; gap: 0.35rem; margin-bottom: 0.45rem; }
.tiny-btn {
  font-family: var(--mono);
  font-size: 0.62rem;
  padding: 0.18rem 0.45rem;
  border: 1px solid var(--border2);
  border-radius: var(--r);
  background: var(--surface2);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.12s;
}
.tiny-btn:hover { border-color: var(--accent); color: var(--accent-text); }

/* MAIN */
#main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

#tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 1rem;
  background: var(--surface);
  flex-shrink: 0;
  overflow-x: auto;
}
#tabs::-webkit-scrollbar { display: none; }

.tab {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  padding: 0.65rem 0.9rem;
  cursor: pointer;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent-text); border-bottom-color: var(--accent); }

#content { flex: 1; overflow: hidden; position: relative; }

.panel {
  display: none;
  height: 100%;
  overflow-y: auto;
  padding: 1.1rem 1.25rem;
}
.panel.active { display: block; }
.panel::-webkit-scrollbar { width: 4px; }
.panel::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

/* EMPTY STATE */
#empty-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  pointer-events: none;
}
#empty-state.hidden { display: none; }
.empty-icon { font-size: 2rem; opacity: 0.15; }
.empty-title { font-size: 0.82rem; color: var(--muted); }
.empty-sub { font-family: var(--mono); font-size: 0.68rem; color: var(--muted2); }

/* PLOT WRAP */
.plot-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 1rem;
  overflow: hidden;
}
.ptitle {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted2);
  padding: 0.65rem 1rem 0;
}
.plot-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 960px) { .plot-grid-2 { grid-template-columns: 1fr; } }

/* PARAMS RESULTS */
.params-grid-result {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.55rem;
}
.pr-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 0.8rem 0.9rem;
}
.pr-card .pk { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); margin-bottom: 0.3rem; }
.pr-card .pv { font-family: var(--mono); font-size: 1rem; font-weight: 500; color: var(--text); }
.pr-card .pu { font-family: var(--mono); font-size: 0.58rem; color: var(--muted2); margin-top: 0.12rem; }

.panel-sec {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 0.7rem;
  margin-top: 1.1rem;
}
.panel-sec:first-child { margin-top: 0; }

/* ERROR TOAST */
#error-toast {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  max-width: 380px;
  background: var(--red-dim);
  border: 1px solid var(--red);
  border-radius: var(--r-lg);
  padding: 0.7rem 0.9rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: #e88;
  z-index: 100;
  display: none;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

/* BATCH TAB */
#batch-drop-zone {
  border: 1.5px dashed var(--border2);
  border-radius: var(--r-lg);
  padding: 2.5rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  background: var(--surface);
  margin-bottom: 1rem;
}
#batch-drop-zone:hover, #batch-drop-zone.drag-over {
  border-color: var(--accent);
  background: var(--accent-dim);
}
#batch-drop-zone p { font-size: 0.82rem; color: var(--muted); }
#batch-drop-zone strong { color: var(--accent-text); }
#batch-drop-zone .fmts { font-family: var(--mono); font-size: 0.68rem; color: var(--muted2); margin-top: 0.4rem; }
#batch-file-input { display: none; }

.batch-toolbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.batch-toolbar .lbl { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); }

#batch-file-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 1rem;
}
.batch-file-header {
  display: grid;
  grid-template-columns: 1fr 80px 90px 60px;
  gap: 0;
  padding: 0.45rem 0.9rem;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted2);
}
.batch-file-row {
  display: grid;
  grid-template-columns: 1fr 80px 90px 60px;
  gap: 0;
  padding: 0.45rem 0.9rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text);
  align-items: center;
  transition: background 0.1s;
}
.batch-file-row:last-child { border-bottom: none; }
.batch-file-row:hover { background: var(--surface2); }
.batch-file-row .fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 0.5rem; }
.batch-status-badge {
  font-family: var(--mono);
  font-size: 0.6rem;
  padding: 0.15rem 0.45rem;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  width: fit-content;
}
.badge-pending  { background: var(--surface2); color: var(--muted); border: 1px solid var(--border2); }
.badge-running  { background: var(--accent-dim); color: var(--accent-text); border: 1px solid var(--accent); }
.badge-done     { background: #162310; color: #6ab87a; border: 1px solid #2a4a1e; }
.badge-error    { background: var(--red-dim); color: #e88; border: 1px solid var(--red); }

.batch-run-btn {
  height: 34px;
  padding: 0 1.25rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.07em;
  border-radius: var(--r);
  cursor: pointer;
  border: 1px solid var(--accent);
  background: var(--accent-dim);
  color: var(--accent-text);
  transition: all 0.15s;
}
.batch-run-btn:hover:not(:disabled) { background: var(--accent); color: #fff; }
.batch-run-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.batch-clear-btn {
  height: 34px;
  padding: 0 1rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  border-radius: var(--r);
  cursor: pointer;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--muted);
  transition: all 0.15s;
}
.batch-clear-btn:hover { border-color: var(--red); color: #e88; }

#batch-progress-bar-wrap {
  height: 3px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 1rem;
  display: none;
}
#batch-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width 0.3s ease;
  width: 0%;
}

#batch-results-wrap { display: none; }

.batch-results-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: auto;
  margin-bottom: 1rem;
  max-height: 340px;
}
.batch-results-table-wrap::-webkit-scrollbar { width: 4px; height: 4px; }
.batch-results-table-wrap::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

#batch-results-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.7rem;
}
#batch-results-table th {
  position: sticky;
  top: 0;
  background: var(--surface2);
  padding: 0.45rem 0.75rem;
  text-align: left;
  color: var(--muted2);
  font-weight: 500;
  letter-spacing: 0.07em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
#batch-results-table td {
  padding: 0.4rem 0.75rem;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
#batch-results-table tr:last-child td { border-bottom: none; }
#batch-results-table tr:hover td { background: var(--surface2); }
#batch-results-table td:first-child { color: var(--muted); }

.batch-export-btn {
  height: 30px;
  padding: 0 1rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  border-radius: var(--r);
  cursor: pointer;
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--text);
  transition: all 0.15s;
}
.batch-export-btn:hover { border-color: var(--gold); color: var(--gold); }


/* SINGLE-FILE DROP ZONE */
#single-drop-zone {
  border: 1.5px dashed var(--border2);
  border-radius: var(--r-lg);
  padding: 1.5rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  background: var(--surface);
  margin-bottom: 1rem;
}
#single-drop-zone:hover, #single-drop-zone.drag-over {
  border-color: var(--accent);
  background: var(--accent-dim);
}
#single-drop-zone p { font-size: 0.82rem; color: var(--muted); }
#single-drop-zone strong { color: var(--accent-text); }
#single-drop-zone .fmts { font-family: var(--mono); font-size: 0.68rem; color: var(--muted2); margin-top: 0.3rem; }


/* ── LANDING ── */
:root {
  --laccent: #a8c4d4;
  --laccent2: #c8dde8;
  --lbg: #09090b;
  --lborder: #1e1e24;
  --lborder2: #2a2a34;
  --ltext: #e8e8ec;
  --lmuted: #5a5a6a;
  --lmuted2: #3a3a48;
  --serif: 'DM Serif Display', Georgia, serif;
}

#topo-canvas { position:fixed; inset:0; z-index:0; opacity:0.18; pointer-events:none; }

/* Loading overlay */
#loading-overlay {
  position:fixed; inset:0; z-index:999;
  background:#09090b;
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:2rem;
  transition:opacity 0.6s ease;
}
#loading-overlay.active { display:flex; }
#loading-overlay.fade-out { opacity:0; pointer-events:none; }
.lo-logo { font-family:var(--mono); font-size:0.75rem; font-weight:300; letter-spacing:0.3em; color:var(--lmuted); text-transform:uppercase; }
.lo-ring { width:64px; height:64px; }
.lo-ring svg { width:100%; height:100%; animation:lospin 2s linear infinite; }
@keyframes lospin { to { transform:rotate(360deg); } }
.lo-ring-track { fill:none; stroke:#2a2a34; stroke-width:1; }
.lo-ring-fill { fill:none; stroke:var(--laccent); stroke-width:1; stroke-linecap:round; stroke-dasharray:175.9; stroke-dashoffset:175.9; transition:stroke-dashoffset 0.4s ease; }
.lo-steps { display:flex; flex-direction:column; gap:0.4rem; width:240px; }
.lo-step { display:flex; align-items:center; gap:0.6rem; font-family:var(--mono); font-size:0.65rem; color:#3a3a48; transition:color 0.3s; }
.lo-step.active { color:var(--lmuted); }
.lo-step.done   { color:var(--laccent); }
.lo-step-dot { width:5px; height:5px; border-radius:50%; background:#3a3a48; flex-shrink:0; transition:background 0.3s; }
.lo-step.active .lo-step-dot { background:var(--lmuted); animation:lopulse 0.8s ease-in-out infinite; }
.lo-step.done .lo-step-dot   { background:var(--laccent); animation:none; }
@keyframes lopulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
.lo-status { font-family:var(--mono); font-size:0.68rem; color:var(--lmuted); letter-spacing:0.08em; }

/* Landing page wrapper */
#landing-page { transition:opacity 0.5s ease; }
#landing-page.fade-out { opacity:0; pointer-events:none; }
#landing-page.gone { display:none !important; }

/* App shell */
#app-shell { display:none; flex-direction:column; height:100vh; overflow:hidden; opacity:0; transition:opacity 0.5s ease 0.2s; }
#app-shell.visible { display:flex; opacity:1; }

/* Nav */
.l-nav { position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; padding:0 3rem; height:56px; border-bottom:1px solid var(--lborder); background:rgba(9,9,11,0.88); backdrop-filter:blur(12px); }
.l-nav-logo { font-family:var(--mono); font-size:0.72rem; letter-spacing:0.2em; color:var(--laccent); text-transform:uppercase; text-decoration:none; }
.l-nav-links { display:flex; gap:2rem; margin-left:auto; list-style:none; }
.l-nav-links a { font-family:var(--mono); font-size:0.68rem; color:var(--lmuted); text-decoration:none; letter-spacing:0.06em; transition:color 0.2s; }
.l-nav-links a:hover { color:var(--ltext); }

/* Hero */
.l-hero { position:relative; z-index:2; min-height:100vh; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:0 12vw; padding-top:56px; background:var(--lbg); }
.l-eyebrow { font-family:var(--mono); font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--lmuted); margin-bottom:1.5rem; opacity:0; transform:translateY(12px); animation:lfu 0.8s ease 0.2s forwards; }
.l-title { font-family:var(--serif); font-size:clamp(3rem,7vw,6.5rem); font-weight:400; line-height:1.05; letter-spacing:-0.02em; color:var(--ltext); margin-bottom:0.2em; opacity:0; transform:translateY(16px); animation:lfu 0.9s ease 0.35s forwards; }
.l-title em { font-style:italic; color:var(--laccent); }
.l-sub { font-family:'DM Sans',sans-serif; font-size:clamp(0.9rem,1.5vw,1.1rem); font-weight:300; color:var(--lmuted); max-width:480px; line-height:1.7; margin-bottom:3rem; opacity:0; transform:translateY(12px); animation:lfu 0.9s ease 0.5s forwards; }
.l-cta-row { display:flex; align-items:center; gap:1.5rem; opacity:0; transform:translateY(12px); animation:lfu 0.9s ease 0.65s forwards; }
.l-btn { display:inline-flex; align-items:center; gap:0.6rem; padding:0.85rem 2rem; background:var(--laccent); color:#09090b; font-family:var(--mono); font-size:0.75rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; border:none; border-radius:2px; cursor:pointer; transition:background 0.2s,transform 0.15s; }
.l-btn:hover { background:var(--laccent2); transform:translateY(-1px); }
.l-btn2 { font-family:var(--mono); font-size:0.72rem; color:var(--lmuted); letter-spacing:0.08em; text-decoration:none; border-bottom:1px solid #3a3a48; padding-bottom:1px; transition:color 0.2s,border-color 0.2s; }
.l-btn2:hover { color:var(--ltext); border-color:var(--lmuted); }
.l-meta { position:absolute; bottom:3rem; left:12vw; display:flex; gap:3rem; opacity:0; animation:lfu 0.9s ease 0.9s forwards; }
.l-meta-item { display:flex; flex-direction:column; gap:0.25rem; }
.l-meta-lbl { font-family:var(--mono); font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--lmuted2); }
.l-meta-val { font-family:var(--mono); font-size:0.82rem; color:var(--lmuted); }
@keyframes lfu { to { opacity:1; transform:translateY(0); } }

/* Sections */
.l-sec { position:relative; z-index:2; padding:7rem 12vw; background:var(--lbg); border-top:1px solid var(--lborder); }
.l-sec-lbl { font-family:var(--mono); font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--lmuted2); margin-bottom:3.5rem; display:flex; align-items:center; gap:1rem; }
.l-sec-lbl::after { content:''; flex:1; height:1px; background:var(--lborder); max-width:80px; }
.l-hairline { position:relative; z-index:2; height:1px; background:var(--lborder); margin:0 12vw; }

/* Feature cards */
.l-feat-grid { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--lborder); }
.l-feat { padding:2.5rem 2rem; border-right:1px solid var(--lborder); transition:background 0.2s; }
.l-feat:last-child { border-right:none; }
.l-feat:hover { background:rgba(168,196,212,0.03); }
.l-feat-num { font-family:var(--mono); font-size:0.6rem; color:var(--lmuted2); letter-spacing:0.1em; margin-bottom:1.5rem; }
.l-feat-icon { width:32px; height:32px; margin-bottom:1.25rem; opacity:0.45; }
.l-feat-title { font-family:var(--serif); font-size:1.3rem; font-weight:400; color:var(--ltext); margin-bottom:0.75rem; line-height:1.2; }
.l-feat-desc { font-size:0.82rem; font-weight:300; color:var(--lmuted); line-height:1.7; }

/* Params grid */
.l-params-layout { display:grid; grid-template-columns:1fr 1.4fr; gap:6rem; align-items:start; }
.l-params-text h2 { font-family:var(--serif); font-size:clamp(1.8rem,3vw,2.8rem); font-weight:400; line-height:1.2; color:var(--ltext); margin-bottom:1.25rem; }
.l-params-text p { font-size:0.85rem; font-weight:300; color:var(--lmuted); line-height:1.8; margin-bottom:2rem; }
.l-params-tbl { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--lborder); }
.l-pcell { padding:0.8rem 1rem; border-right:1px solid var(--lborder); border-bottom:1px solid var(--lborder); font-family:var(--mono); font-size:0.72rem; color:var(--lmuted); transition:all 0.15s; cursor:default; }
.l-pcell:hover { background:rgba(168,196,212,0.06); color:var(--laccent); }
.l-pcell:nth-child(4n) { border-right:none; }
.l-pcell.hl { color:var(--laccent); background:rgba(168,196,212,0.05); }

/* Workflow */
.l-flow { display:grid; grid-template-columns:repeat(4,1fr); margin-top:3rem; position:relative; }
.l-flow::before { content:''; position:absolute; top:20px; left:calc(12.5% + 10px); right:calc(12.5% + 10px); height:1px; background:#2a2a34; }
.l-step { padding:0 1.5rem; }
.l-step-num { width:40px; height:40px; border:1px solid #2a2a34; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:0.65rem; color:var(--lmuted2); margin-bottom:1.5rem; background:var(--lbg); position:relative; z-index:1; transition:border-color 0.2s,color 0.2s; }
.l-step:hover .l-step-num { border-color:var(--laccent); color:var(--laccent); }
.l-step-title { font-family:var(--mono); font-size:0.72rem; font-weight:500; color:var(--ltext); letter-spacing:0.06em; margin-bottom:0.6rem; }
.l-step-desc { font-size:0.78rem; font-weight:300; color:var(--lmuted); line-height:1.65; }

/* Formats */
.l-formats { position:relative; z-index:2; padding:5rem 12vw; border-top:1px solid var(--lborder); background:var(--lbg); display:flex; align-items:center; gap:5rem; }
.l-fmt-lbl { font-family:var(--mono); font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--lmuted2); flex-shrink:0; }
.l-fmt-list { display:flex; flex-wrap:wrap; gap:0.5rem; }
.l-fmt-tag { font-family:var(--mono); font-size:0.68rem; color:var(--lmuted); padding:0.3rem 0.7rem; border:1px solid #2a2a34; border-radius:2px; transition:all 0.15s; }
.l-fmt-tag:hover { border-color:var(--laccent); color:var(--laccent); }

/* CTA + Footer */
.l-cta { position:relative; z-index:2; padding:8rem 12vw; border-top:1px solid var(--lborder); background:var(--lbg); display:flex; flex-direction:column; align-items:center; text-align:center; }
.l-cta h2 { font-family:var(--serif); font-size:clamp(2rem,4vw,3.5rem); font-weight:400; color:var(--ltext); margin-bottom:1rem; max-width:600px; line-height:1.15; }
.l-cta p { font-size:0.85rem; font-weight:300; color:var(--lmuted); margin-bottom:2.5rem; max-width:400px; line-height:1.7; }
.l-footer { position:relative; z-index:2; border-top:1px solid var(--lborder); background:var(--lbg); padding:2rem 12vw; display:flex; align-items:center; gap:2rem; }
.l-footer-logo { font-family:var(--mono); font-size:0.65rem; letter-spacing:0.18em; color:var(--lmuted2); text-transform:uppercase; }
.l-footer-links { display:flex; gap:1.5rem; margin-left:auto; }
.l-footer-links a { font-family:var(--mono); font-size:0.62rem; color:var(--lmuted2); text-decoration:none; letter-spacing:0.06em; transition:color 0.2s; }
.l-footer-links a:hover { color:var(--lmuted); }

/* Error modal */
#error-modal { position:fixed; inset:0; z-index:600; background:rgba(0,0,0,0.65); display:none; align-items:center; justify-content:center; padding:2rem; }
.error-modal-box { background:var(--surface); border:1px solid var(--red); border-radius:var(--r-lg); max-width:560px; width:100%; padding:1.5rem; }
.error-modal-head { display:flex; align-items:flex-start; gap:0.75rem; margin-bottom:1rem; }
.error-modal-icon { width:18px; height:18px; border-radius:50%; background:var(--red); flex-shrink:0; margin-top:2px; display:flex; align-items:center; justify-content:center; font-size:10px; color:#fff; font-weight:600; }
.error-modal-title { font-family:var(--mono); font-size:0.78rem; color:#e88; margin-bottom:0.5rem; }
.error-modal-body { font-family:var(--mono); font-size:0.68rem; color:var(--muted); line-height:1.6; white-space:pre-wrap; word-break:break-word; max-height:300px; overflow-y:auto; background:var(--surface2); border:1px solid var(--border); border-radius:var(--r); padding:0.75rem; }
.error-modal-foot { display:flex; justify-content:flex-end; margin-top:1rem; }
.error-modal-dismiss { font-family:var(--mono); font-size:0.72rem; padding:0.45rem 1rem; background:transparent; border:1px solid var(--border2); border-radius:var(--r); color:var(--muted); cursor:pointer; transition:border-color 0.15s,color 0.15s; }
.error-modal-dismiss:hover { border-color:var(--accent); color:var(--accent-text); }

/* APP FOOTER */
#app-footer {
  height: 28px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--muted2);
  letter-spacing: 0.06em;
}
#app-footer-links { margin-left: auto; }
#app-footer-links a { color: var(--muted2); text-decoration: none; letter-spacing: 0.06em; transition: color 0.2s; }
#app-footer-links a:hover { color: var(--muted); }