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

:root{
  --bg:#F1F1EC; --surface:#FFFFFF; --surface-2:#E7E6E0;
  --ink:#15171A; --ink-soft:#53565D; --ink-faint:#8B8E94; --line:#D2D1C9;
  --accent:#B07D12; --accent-ink:#15171A; --accent-bg:#F8EBC9; --accent-line:#8C6410;
  --hero-bg:#15171A; --hero-ink:#F3F2EC; --hero-ink-soft:#A8ABB1; --hero-line:#33353A;
  --ok-bg:#E4EFE2; --ok-ink:#2E6A3E; --ok-line:#B9D6B4;
  --progress-bg:#F8EBC9; --progress-ink:#8C6410; --progress-line:#E2C878;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0B0C0E; --surface:#17181B; --surface-2:#1E2024;
    --ink:#F1F0EA; --ink-soft:#AEB1B7; --ink-faint:#6E7278; --line:#2A2C31;
    --accent:#EFAF2B; --accent-ink:#0B0C0E; --accent-bg:#2E2408; --accent-line:#EFAF2B;
    --hero-bg:#0B0C0E; --hero-ink:#F3F2EC; --hero-ink-soft:#9A9EA5; --hero-line:#26282D;
    --ok-bg:#17261A; --ok-ink:#7BC08A; --ok-line:#2C4630;
    --progress-bg:#2E2408; --progress-ink:#EFAF2B; --progress-line:#4A3A10;
  }
}
*{box-sizing:border-box;}
body{ margin:0; background:var(--bg); color:var(--ink); font-family:'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing:antialiased; }
h1,h2,h3{ font-family:'Big Shoulders Display', 'Arial Narrow', sans-serif; text-transform:uppercase; letter-spacing:0.01em; text-wrap:balance; margin:0; line-height:0.95; }
.mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; }
.eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); font-weight:600; }
a{ color:inherit; }
.wrap{ max-width:1000px; margin-inline:auto; padding-inline:24px; }
@media (min-width:900px){ .wrap{ padding-inline:40px; } }

header.site{ position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding-block:16px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:1.2rem; letter-spacing:0.04em; }

.btn{ display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:var(--accent-ink); font-weight:700; font-size:0.82rem; padding:10px 16px; border-radius:2px; text-decoration:none; border:1px solid var(--accent); white-space:nowrap; cursor:pointer; }
.btn:hover{ filter:brightness(1.06); }
.btn.outline{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn.outline:hover{ border-color:var(--accent); color:var(--accent); }
.btn[disabled]{ opacity:0.55; cursor:not-allowed; }
.btn.danger{ background:transparent; color:#C0392B; border:1px solid #C0392B; }

main{ padding-block:48px 80px; }
.card{ border:1px solid var(--line); background:var(--surface); border-radius:2px; padding:24px; }
.card + .card{ margin-top:20px; }

.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:0.78rem; color:var(--ink-soft); font-weight:500; }
.field input, .field select, .field textarea{
  font-family:'IBM Plex Sans', sans-serif; font-size:0.92rem;
  padding:10px 12px; border:1px solid var(--line); border-radius:2px;
  background:var(--bg); color:var(--ink); width:100%;
}
.field textarea{ min-height:70px; resize:vertical; }
.pw-wrap{ position:relative; display:flex; }
.pw-wrap input{ flex:1; padding-right:40px; }
.pw-toggle{
  position:absolute; right:0; top:0; bottom:0; width:38px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; color:var(--ink-soft); padding:0;
}
.pw-toggle:hover{ color:var(--ink); }
.pw-toggle svg{ width:18px; height:18px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:600px){ .form-grid{ grid-template-columns:1fr; } }

.form-msg{ margin-top:12px; font-size:0.84rem; line-height:1.5; padding:10px 12px; border-radius:2px; display:none; }
.form-msg.error{ display:block; background:var(--progress-bg); color:var(--progress-ink); border:1px solid var(--progress-line); }
.form-msg.ok{ display:block; background:var(--ok-bg); color:var(--ok-ink); border:1px solid var(--ok-line); }

.status-pill{ font-family:'IBM Plex Mono', monospace; font-size:0.7rem; font-weight:600; padding:5px 10px; border-radius:12px; white-space:nowrap; border:1px solid; }
.status-progress{ background:var(--progress-bg); color:var(--progress-ink); border-color:var(--progress-line); }
.status-ok{ background:var(--ok-bg); color:var(--ok-ink); border-color:var(--ok-line); }
.progress-track{ margin-top:18px; height:6px; border-radius:4px; background:var(--surface-2); overflow:hidden; }
.progress-fill{ height:100%; background:var(--accent); border-radius:4px; }
.stage-list{ margin-top:20px; display:flex; flex-direction:column; gap:10px; }
.stage{ display:flex; align-items:center; gap:10px; font-size:0.88rem; color:var(--ink-faint); }
.stage span{ width:20px; height:20px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono', monospace; font-size:0.66rem; flex:none; }
.stage.done{ color:var(--ink-soft); }
.stage.done span{ background:var(--ok-bg); border-color:var(--ok-line); color:var(--ok-ink); }
.stage.current{ color:var(--ink); font-weight:600; }
.stage.current span{ background:var(--progress-bg); border-color:var(--progress-line); color:var(--progress-ink); }
.file-list{ margin-top:16px; border-top:1px solid var(--line); }
.file-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding-block:10px; border-bottom:1px solid var(--line); font-size:0.86rem; }
.file-row a{ text-decoration:underline; }

table{ width:100%; border-collapse:collapse; font-size:0.86rem; }
th, td{ text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); }
th{ font-family:'IBM Plex Mono', monospace; font-size:0.7rem; letter-spacing:0.06em; color:var(--ink-faint); text-transform:uppercase; }
.empty-state{ color:var(--ink-faint); font-size:0.9rem; padding:24px 0; text-align:center; }