:root {
  color-scheme: light;
  --bg: #07110f;
  --panel: rgba(17, 34, 30, 0.82);
  --panel-strong: #12241f;
  --line: rgba(166, 226, 205, 0.15);
  --text: #f2f8f5;
  --muted: #9eb5ad;
  --green: #39e6a2;
  --green-strong: #1ccf8a;
  --blue: #65a9ff;
  --danger: #ff8f8f;
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.34);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { min-width: 320px; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 8%, rgba(41, 211, 150, 0.18), transparent 32rem),
    radial-gradient(circle at 83% 18%, rgba(64, 132, 255, 0.12), transparent 30rem),
    linear-gradient(145deg, #07110f 0%, #091410 52%, #07100e 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

body::before {
  position: fixed;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.16;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000, transparent 76%);
}

button, input, select { font: inherit; }
button { color: inherit; }

.shell {
  position: relative;
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 42px 22px;
}

.hero { width: min(920px, 100%); }

.brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 64px;
}

.brand-mark {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(57, 230, 162, 0.38);
  border-radius: 16px;
  background: #06120f;
  box-shadow: 0 12px 30px rgba(21, 180, 121, .2), 0 0 0 1px rgba(255,255,255,.035) inset;
}

.brand-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.eyebrow { margin: 0 0 5px; color: var(--green); font-size: 10px; font-weight: 760; letter-spacing: .17em; }
h1 { margin: 0; font-size: 20px; line-height: 1; letter-spacing: -.02em; }

.state-pill {
  margin-left: auto;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,.025);
  font-size: 12px;
}

.state-pill.ready { color: var(--green); border-color: rgba(57,230,162,.25); }
.state-pill.error { color: var(--danger); border-color: rgba(255,143,143,.25); }
.logout-button {
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,.025);
  font-size: 12px;
  cursor: pointer;
}
.logout-button:hover { color: var(--text); border-color: rgba(255,255,255,.25); }

.copy { margin-bottom: 28px; }
.copy h2 { margin: 0 0 14px; max-width: 780px; font-size: clamp(36px, 6vw, 70px); line-height: 1.04; letter-spacing: -.06em; }
.copy p { max-width: 700px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.75; }

.download-card, .job-panel {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(20,40,35,.92), rgba(11,24,21,.88));
  box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.045);
  backdrop-filter: blur(20px);
}

.download-card { padding: 14px; }
.url-row { display: flex; gap: 12px; }

.mobile-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  margin-top: 18px;
  padding: 24px;
  border: 1px solid rgba(101, 169, 255, .22);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(18,38,34,.94), rgba(11,24,31,.9));
  box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.045);
}
.mobile-panel[hidden], .file-panel[hidden] { display: none; }
.mobile-copy h3 { margin: 0 0 8px; font-size: 19px; }
.mobile-copy > p:not(.job-kicker) { max-width: 590px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.mobile-address-row { display: flex; min-width: 0; gap: 9px; margin-top: 16px; }
.mobile-address-row code {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: #b9d9ff;
  background: rgba(3, 12, 18, .42);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.copy-button {
  flex: 0 0 auto;
  padding: 9px 12px;
  border: 1px solid rgba(101, 169, 255, .28);
  border-radius: 10px;
  color: #a9ceff;
  background: rgba(101,169,255,.08);
  cursor: pointer;
}
.qr-frame { padding: 9px; border-radius: 18px; background: #fff; box-shadow: 0 18px 44px rgba(0,0,0,.24); }
.qr-frame img { display: block; width: 168px; height: 168px; }

.input-wrap {
  position: relative;
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
}

.input-wrap svg { position: absolute; left: 18px; width: 22px; fill: none; stroke: #79a698; stroke-width: 1.7; stroke-linecap: round; }

.input-wrap input {
  width: 100%;
  height: 62px;
  padding: 0 18px 0 52px;
  border: 1px solid rgba(171, 225, 207, .13);
  outline: none;
  border-radius: 15px;
  color: var(--text);
  background: rgba(3, 15, 12, .48);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.input-wrap input::placeholder { color: #6f8880; }
.input-wrap input:focus { border-color: rgba(57,230,162,.54); background: rgba(5,20,16,.72); box-shadow: 0 0 0 4px rgba(57,230,162,.08); }

.primary-button {
  display: inline-flex;
  min-width: 190px;
  height: 62px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 15px;
  color: #042116;
  background: linear-gradient(135deg, #54f0b4, #29d897);
  box-shadow: 0 14px 30px rgba(29, 207, 138, .19), inset 0 1px rgba(255,255,255,.35);
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease;
}

.primary-button:hover { transform: translateY(-1px); filter: brightness(1.04); }
.primary-button:active { transform: translateY(0); }
.primary-button:disabled { cursor: not-allowed; filter: grayscale(.4); opacity: .58; transform: none; }
.primary-button svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.instagram-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin: 14px 4px 0;
  padding: 15px 14px 4px;
  border-top: 1px solid var(--line);
}
.instagram-options[hidden] { display: none; }
.toggle-row { display: flex; flex: 1; align-items: center; gap: 12px; cursor: pointer; }
.toggle-row input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.toggle { position: relative; width: 44px; height: 25px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: #20312c; transition: .2s ease; }
.toggle::after { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #afc1bb; content: ""; transition: .2s ease; }
.toggle-row input:checked + .toggle { border-color: var(--green); background: rgba(57,230,162,.22); }
.toggle-row input:checked + .toggle::after { transform: translateX(19px); background: var(--green); }
.toggle-row strong { display: block; margin-bottom: 3px; font-size: 13px; }
.toggle-row small { display: block; color: var(--muted); font-size: 12px; }
.session-upload { display: flex; min-width: 0; align-items: center; gap: 10px; }
.session-upload input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.session-file-button {
  flex: 0 0 auto;
  padding: 9px 12px;
  border: 1px solid rgba(101,169,255,.3);
  border-radius: 10px;
  color: #b9d9ff;
  background: rgba(101,169,255,.08);
  font-size: 12px;
  font-weight: 720;
  cursor: pointer;
}
.session-upload > span { max-width: 210px; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.session-safety { grid-column: 1 / -1; margin: -5px 0 0 56px; color: #78948a; font-size: 11px; line-height: 1.6; }

.quality-strip { display: flex; gap: 22px; margin: 15px 7px 2px; color: var(--muted); font-size: 12px; }
.quality-strip span { display: inline-flex; align-items: center; gap: 7px; }
.quality-strip i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }

.job-panel { margin-top: 18px; padding: 24px; }
.job-heading { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.job-kicker { margin: 0 0 6px; color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.job-heading h3 { margin: 0; font-size: 17px; }
.job-percent { color: var(--green); font-size: 20px; font-weight: 820; }
.progress-track { position: relative; height: 7px; margin-top: 20px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.07); }
.progress-bar { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green-strong), #71f2bc); box-shadow: 0 0 18px rgba(57,230,162,.45); transition: width .35s ease; }
.progress-track.indeterminate .progress-bar { width: 35%; animation: drift 1.35s ease-in-out infinite; }
@keyframes drift { 0% { transform: translateX(-110%); } 100% { transform: translateX(330%); } }
.job-meta { display: flex; min-height: 18px; gap: 18px; margin-top: 10px; color: var(--muted); font-size: 12px; }
.job-error { margin: 16px 0 0; padding: 12px 14px; border: 1px solid rgba(255,143,143,.18); border-radius: 12px; color: #ffc2c2; background: rgba(130,35,35,.13); line-height: 1.55; }
.file-panel { margin-top: 20px; padding-top: 19px; border-top: 1px solid var(--line); }
.file-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.file-panel-heading h4 { margin: 0; font-size: 16px; }
.file-list { display: grid; gap: 9px; margin-top: 14px; }
.file-row { display: flex; min-width: 0; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(4,16,13,.32); }
.file-index { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 9px; color: var(--green); background: rgba(57,230,162,.09); font-size: 11px; font-weight: 800; }
.file-name { min-width: 0; flex: 1; overflow: hidden; color: #c8d9d3; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.save-link { flex: 0 0 auto; padding: 8px 11px; border-radius: 9px; color: #042116; background: var(--green); font-size: 12px; font-weight: 800; text-decoration: none; }
.save-tip { margin: 13px 0 0; color: #7f978f; font-size: 11px; line-height: 1.65; }
.job-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.secondary-button, .text-button { border-radius: 11px; cursor: pointer; }
.secondary-button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 15px; border: 1px solid rgba(57,230,162,.28); color: var(--green); background: rgba(57,230,162,.08); text-decoration: none; }
.archive-button { white-space: nowrap; }
.text-button { padding: 10px 4px; border: 0; color: var(--muted); background: transparent; }
.text-button:hover { color: var(--text); }

footer { margin-top: 22px; text-align: center; color: #688077; font-size: 11px; line-height: 1.6; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.login-shell { width: min(460px, 100%); }
.login-brand { margin-bottom: 28px; }
.login-card {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(20,40,35,.94), rgba(11,24,21,.92));
  box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.045);
}
.login-card h2 { margin: 0 0 10px; font-size: 30px; letter-spacing: -.04em; }
.login-card > p { margin: 0 0 24px; color: var(--muted); line-height: 1.7; }
.login-card label { display: block; margin-bottom: 9px; color: var(--muted); font-size: 13px; }
.login-card input {
  width: 100%;
  height: 56px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  outline: 0;
  color: var(--text);
  background: rgba(4,17,14,.72);
}
.login-card input:focus { border-color: rgba(57,230,162,.54); box-shadow: 0 0 0 4px rgba(57,230,162,.08); }
.login-card .primary-button { width: 100%; margin-top: 14px; }
.login-error { margin: 14px 0 0 !important; color: var(--danger) !important; font-size: 13px; }
.login-note { margin: 18px 2px 0; color: #688077; font-size: 11px; line-height: 1.6; text-align: center; }

@media (max-width: 700px) {
  .shell { padding: 24px 14px; place-items: start center; }
  .brand-row { margin-bottom: 48px; }
  .state-pill { display: none; }
  .logout-button { margin-left: auto; }
  .copy h2 { font-size: clamp(36px, 12vw, 54px); }
  .url-row { flex-direction: column; }
  .primary-button { width: 100%; min-width: 0; }
  .mobile-panel { grid-template-columns: 1fr; justify-items: center; padding: 20px; text-align: center; }
  .mobile-address-row { width: 100%; flex-direction: column; }
  .mobile-address-row code { width: 100%; }
  .copy-button { width: 100%; }
  .qr-frame { grid-row: 1; }
  .instagram-options { grid-template-columns: 1fr; align-items: flex-start; gap: 14px; }
  .session-upload { width: 100%; padding-left: 56px; }
  .session-upload > span { max-width: none; }
  .session-safety { margin: -4px 0 0 56px; }
  .quality-strip { flex-wrap: wrap; gap: 9px 16px; }
  .job-panel { padding: 20px 16px; }
  .file-panel-heading { align-items: flex-start; flex-direction: column; }
  .archive-button { width: 100%; }
  .file-row { align-items: flex-start; }
  .file-name { padding-top: 6px; white-space: normal; overflow-wrap: anywhere; }
  .save-link { margin-top: 1px; }
}

@media (max-width: 420px) {
  .shell { padding-inline: 10px; }
  .brand-row { gap: 10px; }
  .brand-mark { width: 46px; height: 46px; border-radius: 14px; }
  h1 { font-size: 18px; }
  .copy h2 { font-size: 35px; }
  .copy p { font-size: 14px; }
  .download-card { padding: 10px; border-radius: 19px; }
  .input-wrap input, .primary-button { height: 58px; }
  .quality-strip { margin-inline: 4px; }
  .session-upload { align-items: stretch; flex-direction: column; padding-left: 0; }
  .session-file-button { text-align: center; }
  .session-upload > span { text-align: center; }
  .session-safety { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Kai 2: a quiet, device-first download workspace. */
:root { --bg:#f5f7f6; --panel:#fff; --panel-strong:#eff5f2; --line:#dce5e0; --text:#172c27; --muted:#62766e; --green:#087f5b; --green-strong:#079767; --danger:#ac3030; --shadow:0 16px 50px #183b2910; }
body { background:radial-gradient(ellipse at 90% 15%,#d9efe566,transparent 48%),var(--bg); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; }
body::before { display:none; }
.shell { padding:32px 32px 20px; place-items:start center; }
.hero { width:min(960px,100%); }
.brand-row { margin-bottom:58px; gap:12px; }
.brand-mark { width:48px; height:48px; border:0; border-radius:14px; box-shadow:0 5px 14px #163d2920; }
h1 { font-size:19px; line-height:1.3; font-weight:650; }
.eyebrow { font-size:9px; color:var(--muted); letter-spacing:.14em; }
.state-pill { background:#fff; font-size:11px; padding:8px 12px; }
.state-pill.ready { color:var(--green); border-color:#cfe6db; }
.state-pill.error { color:var(--danger); }
.logout-button { background:transparent; border-color:transparent; min-height:44px; }
.copy { position:relative; margin-bottom:28px; }
.copy .section-label { font-size:12px; font-weight:650; letter-spacing:.13em; color:var(--green); margin-bottom:16px; }
.copy h2 { font-size:clamp(36px,5vw,54px); letter-spacing:-.045em; line-height:1.22; font-weight:650; margin-bottom:20px; }
.copy > p { max-width:580px; font-size:15px; line-height:1.85; }
.steps { display:flex; list-style:none; gap:36px; padding:0; margin:0 0 24px; font-size:12px; color:var(--muted); }
.steps b { color:var(--green); margin-right:7px; font-size:10px; letter-spacing:.05em; }
.download-card,.job-panel,.login-card { background:#fff; border:1px solid #e0e7e3; backdrop-filter:none; box-shadow:var(--shadow); border-radius:22px; }
.download-card { padding:20px 24px; }
.card-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:14px; font-weight:650; }
.card-heading .text-button { font-size:12px; color:var(--green); padding:10px 0 10px 14px; }
.input-wrap input { height:58px; background:#f5f8f6; border-color:#dfe8e2; color:var(--text); font-size:16px; border-radius:13px; }
.input-wrap input:focus { background:white; border-color:#087f5b; box-shadow:0 0 0 3px #087f5b14; }
.input-wrap input::placeholder { color:#788b82; font-size:13px; }
.primary-button { min-width:154px; height:58px; border-radius:13px; background:#087f5b; color:white; box-shadow:0 5px 12px #087f5b18; font-weight:600; }
.primary-button:hover { background:#086a4e; }
.primary-button:disabled { opacity:.6; }
.link-hint { font-size:12px; line-height:1.65; color:var(--muted); margin:11px 0; overflow-wrap:anywhere; }
.quality-strip { flex-wrap:wrap; gap:10px 22px; padding-top:15px; margin:15px 0 0; border-top:1px solid #edf0ee; font-size:11px; }
.quality-strip i { box-shadow:none; background:#4da588; }
.empty-state { display:flex; gap:18px; align-items:center; padding:26px 24px; margin-top:16px; border:1px dashed #cedbd3; border-radius:20px; }
.empty-symbol { display:grid; place-items:center; width:42px; height:42px; flex:0 0 auto; border-radius:14px; background:#e9f0ec; color:#628878; font-size:24px; }
.empty-state h3 { font-size:13px; margin:0 0 6px; font-weight:600; }
.empty-state p { font-size:12px; line-height:1.7; color:var(--muted); margin:0; }
.job-panel { padding:24px; }
.job-heading h3 { line-height:1.6; overflow-wrap:anywhere; font-size:16px; }
.job-kicker { font-size:10px; letter-spacing:.04em; }
.job-percent { font-size:24px; font-variant-numeric:tabular-nums; }
.progress-track { background:#e9f0eb; height:6px; }
.progress-bar { background:linear-gradient(90deg,#087f5b,#55c49c); box-shadow:none; }
.progress-track.indeterminate .progress-bar { width:35% !important; }
.job-error { color:#9f3030; background:#fff5f3; border-color:#f3d7d0; font-size:13px; overflow-wrap:anywhere; }
.file-row { background:#f8faf9; align-items:center; border-color:#e4ebe6; padding:14px; }
.file-name { color:var(--text); font-size:13px; }
.file-metadata { display:block; font-weight:400; color:var(--muted); font-size:11px; padding-top:5px; }
.file-index { background:#e2efe8; width:34px; height:38px; }
.save-link { background:#087f5b; color:#fff; min-height:44px; display:flex; align-items:center; padding:10px 16px; }
.save-tip { color:var(--muted); font-size:12px; }
.secondary-button { background:#edf6f1; border-color:#cce3d6; min-height:44px; font-size:13px; }
.text-button { min-height:44px; }
.help-panel { margin-top:26px; }
.help-panel details { border-bottom:1px solid var(--line); padding:15px 2px; }
.help-panel summary { cursor:pointer; font-size:13px; font-weight:550; }
.help-panel p { font-size:12px; color:var(--muted); line-height:1.85; max-width:760px; margin-bottom:0; }
footer { text-align:left; font-size:10px; margin-top:20px; }
.instagram-options { margin-inline:0; padding-inline:0; }
.toggle { background:#cbd8d1; border-color:#cbd8d1; }
.toggle::after { background:white; }
.toggle-row input:checked + .toggle { background:#087f5b; border-color:#087f5b; }
.toggle-row input:checked + .toggle::after { background:white; }
.session-file-button { background:#edf6f1; color:#087f5b; border-color:#cce3d6; min-height:44px; display:inline-flex; align-items:center; }
.session-safety { color:var(--muted); }
.mobile-panel { background:#eaf4ef; border-color:#cfe2d6; box-shadow:none; }
.mobile-address-row code { background:#fff; color:var(--text); }
.copy-button { color:var(--green); background:#fff; border-color:var(--line); }
.login-shell { align-self:center; }
.login-brand { margin-bottom:28px; }
.login-card input { background:#f5f8f6; font-size:16px; }
.login-card input:focus { border-color:#087f5b; }
.login-card h2 { font-size:28px; }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,.toggle-row:focus-within,.session-upload:focus-within { outline:3px solid #55aa8a; outline-offset:4px; }
button:disabled { cursor:not-allowed; }
@media(max-width:700px) {
  .shell { padding:24px 18px; }
  .brand-row { flex-wrap:wrap; margin-bottom:36px; }
  .state-pill { display:inline-flex; margin-left:0; order:4; flex-basis:auto; font-size:10px; padding:5px 9px; }
  .logout-button { margin-left:auto; }
  .copy h2 { font-size:38px; }
  .copy > p { font-size:14px; }
  .steps { gap:22px; font-size:11px; }
  .download-card { padding:16px; }
  .url-row { gap:10px; }
  .empty-state { padding:20px 16px; gap:12px; }
  .job-panel { padding:20px 16px; }
  .file-row { gap:9px; padding:12px 10px; }
  .file-name { padding:0; }
  .file-panel-heading { gap:12px; }
  .quality-strip { gap:10px 14px; }
  .session-upload { padding-left:0; }
  .session-safety { margin-left:0; }
  .login-brand { margin-bottom:24px; }
}
@media(max-width:380px) { .shell { padding-inline:12px; } .steps { gap:12px; } h1 { font-size:17px; } .copy h2 { font-size:34px; } .file-index { display:none; } }

/* Focus edition: stable input, contextual controls, quiet supporting content. */
body { background:#f5f7f6; }
.hero { width:min(820px,100%); }
.brand-row { margin-bottom:34px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.eyebrow { display:none; }
.copy { margin-bottom:22px; }
.copy h2 { font-size:clamp(27px,4vw,36px); line-height:1.3; margin-bottom:10px; letter-spacing:-.035em; }
.copy > p { font-size:14px; }
.download-card { padding:20px; border-radius:18px; box-shadow:0 6px 24px #17382a08; }
.card-heading { margin-bottom:10px; }
.primary-button { min-width:140px; box-shadow:none; }
.quality-strip { gap:8px 16px; line-height:1.7; }
.empty-state { min-height:132px; background:transparent; border:1px solid #e0e7e3; border-radius:18px; }
.empty-state h3 { font-size:16px; margin:8px 0; }
.job-panel { border-radius:18px; box-shadow:0 6px 24px #17382a08; }
.job-meta { font-variant-numeric:tabular-nums; }
.help-panel { margin-top:20px; }
footer { max-width:680px; }
.login-brand { border-bottom:0; padding-bottom:0; }
@media(min-width:701px) {
  .shell { padding-top:40px; }
  .help-panel { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
}
@media(max-width:700px) {
  .shell { padding:20px 16px; }
  .brand-row { margin-bottom:24px; padding-bottom:16px; gap:10px; }
  .brand-mark { width:40px; height:40px; border-radius:12px; }
  h1 { font-size:17px; }
  .state-pill { order:4; width:100%; border:0; padding:0; background:transparent; }
  .copy h2 { font-size:28px; }
  .copy { margin-bottom:18px; }
  .download-card { padding:16px; }
  .empty-state { min-height:118px; }
  .quality-strip { font-size:11px; }
}
/* Kai: warm paper, ink, restrained editorial hierarchy. */
:root{--bg:#f6f5f1;--panel:#fffefa;--text:#262824;--muted:#70736b;--line:#dedfd7;--green:#426453;--green-strong:#426453;--danger:#a33e32;--shadow:0 8px 32px #292d2210}
body{background:var(--bg);-webkit-font-smoothing:antialiased}
.shell{min-height:100svh;padding:36px 48px 24px}
.hero{width:min(1040px,100%)}
.brand-row{gap:13px;padding-bottom:26px;margin-bottom:0}
.brand-mark{width:46px;height:46px;border-radius:13px;background:#202220;box-shadow:none}
h1{font-size:30px;font-weight:600;letter-spacing:-1.3px;line-height:1}
.brand-caption{display:block;margin-top:7px;font-size:10px;font-weight:400;letter-spacing:1.2px;color:var(--muted)}
.state-pill{font-size:11px;color:var(--muted);display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;padding:0}
.state-pill:before{content:"";width:5px;height:5px;background:#a5a89d;border-radius:50%}
.state-pill.ready{color:var(--muted)}
.state-pill.ready:before{background:#527b57}
.state-pill.error{color:var(--danger)}
.state-pill.error:before{background:var(--danger)}
.logout-button{margin-left:9px;padding:0 12px;border:1px solid var(--line);border-radius:8px;font-size:11px}
.logout-button:hover{background:#eaeae3;color:var(--text)}
.copy{padding:54px 0 34px;margin:0}
.copy .overline{margin:0 0 21px;font-size:10px;letter-spacing:3px;font-weight:500;color:#727667}
.copy h2{margin:0 0 21px;font-size:clamp(36px,4.4vw,58px);font-weight:500;letter-spacing:-2px;line-height:1.3}
.copy h2 span{color:#85897c}
.copy>p{font-size:13px;line-height:1.9;color:var(--muted)}
.mobile-break{display:none}
.download-card{padding:23px 26px 18px;border-color:#d8dad0;border-radius:16px;background:var(--panel);box-shadow:var(--shadow)}
.card-heading{gap:12px;margin-bottom:15px;font-size:13px;font-weight:500}
.section-number{font-family:"SFMono-Regular",Consolas,monospace;font-size:10px;letter-spacing:1px;color:#858b79;margin-right:14px;font-weight:400}
.card-heading .text-button{min-height:32px;padding:6px 0 6px 12px;color:#535b48;font-size:11px}
.url-row{gap:10px}
.input-wrap svg{left:18px;width:20px;stroke:#8a8e81}
.input-wrap input{height:60px;border-color:#e0e2d8;border-radius:9px;background:#f7f8f3;padding-left:49px}
.input-wrap input::placeholder{color:#84897b}
.input-wrap input:focus{background:#fffefa;border-color:#748168;box-shadow:0 0 0 3px #74816815}
.primary-button{gap:18px;min-width:154px;height:60px;padding:0 22px;border:1px solid #262824;border-radius:9px;background:#262824;color:#fafaf5;font-size:13px;font-weight:500;box-shadow:none}
.primary-button:hover{background:#454a3e;filter:none;transform:none}
.primary-button:active{transform:translateY(1px)}
.primary-button svg{width:19px;stroke-width:1.6}
.link-hint{margin:13px 0 0;font-size:11px;line-height:1.8}
.quality-strip{gap:9px 22px;margin-top:19px;padding-top:16px;border-color:#e9ebe2;font-size:10px;color:#74796b}
.quality-strip i{width:3px;height:3px;background:#7c876d}
.empty-state{align-items:flex-start;gap:8px;min-height:0;padding:29px 4px 28px;margin-top:14px;border:0;border-bottom:1px solid var(--line);border-radius:0}
.empty-state>.section-number{margin-top:3px}
.empty-state h3{font-weight:400;font-size:14px;margin:10px 0 7px}
.empty-state p{font-size:11px;line-height:1.8}
.empty-state .job-kicker{font-size:10px;letter-spacing:1px;color:#74796b}
.empty-status{margin-left:auto;white-space:nowrap;font-size:10px;color:#7b8171;border:1px solid var(--line);border-radius:5px;padding:5px 8px}
.job-panel{margin-top:20px;padding:25px;border-radius:16px;background:var(--panel);box-shadow:none}
.job-heading h3{font-weight:500}
.job-percent{font-weight:400;color:var(--text)}
.progress-track{height:4px;background:#e5e7dd}
.progress-bar{background:#66775a}
.file-row{border-color:#e4e6dc;border-radius:9px;background:#f7f8f2}
.file-index{border:1px solid var(--line);border-radius:5px;background:transparent;color:var(--muted);font-weight:400}
.save-link{border-radius:7px;background:#262824;font-weight:500}
.secondary-button{border-color:#cfd5c4;border-radius:7px;background:#f1f3ea;color:#4f5d43}
.help-panel{gap:28px;margin-top:15px}
.help-panel details{padding:14px 0;border:0}
.help-panel summary{font-size:11px;font-weight:400;color:#535a49}
.help-panel p{font-size:11px;line-height:1.9}
footer{max-width:none;margin-top:18px;border-top:1px solid var(--line);padding-top:14px;font-size:10px;color:#7b8072;line-height:1.8}
footer p{margin:0}
.toggle-row strong{font-weight:500}
.toggle-row input:checked+.toggle{background:#526848;border-color:#526848}
.session-file-button{border-color:var(--line);background:#f1f3ea;color:#4f5d43;font-weight:500}
.mobile-panel{background:#edf0e5;border-color:var(--line)}
.copy-button{border-color:var(--line);background:var(--panel)}
.login-shell{width:min(440px,100%)}
.login-brand{margin-bottom:30px;padding:0;border:0}
.login-card{padding:32px;border-radius:16px;background:var(--panel)}
.login-card h2{font-size:28px;letter-spacing:-1px;font-weight:500}
.login-card>p{font-size:12px;line-height:1.9}
.login-card label{font-size:11px}
.login-card input{border-radius:8px;background:#f7f8f2}
.login-card .primary-button{height:54px}
.login-note{font-size:10px;color:var(--muted)}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,.toggle-row:focus-within,.session-upload:focus-within{outline:2px solid #687d60;outline-offset:4px}
@media(min-width:860px){.hero{display:grid;grid-template-columns:1fr 1.35fr;column-gap:48px}.brand-row{grid-column:1/-1;margin-bottom:66px}.copy{grid-column:1;grid-row:2/5;padding:18px 0}.copy h2{font-size:clamp(36px,4vw,46px);line-height:1.4}.copy>p:not(.overline){max-width:260px}.download-card,.empty-state,.job-panel,.mobile-panel,.help-panel{grid-column:2}.help-panel{gap:18px}footer{grid-column:1/-1;margin-top:62px}.quality-strip{gap:8px 16px}.url-row{flex-direction:column}.primary-button{width:100%;height:54px}}
@media(max-width:700px){.shell{padding:24px 22px}.brand-row{padding-bottom:20px;gap:11px}.brand-mark{width:42px;height:42px;border-radius:12px}h1{font-size:27px}.brand-caption{font-size:9px}.state-pill{order:0;width:auto;margin-left:auto;font-size:9px;gap:5px}.logout-button{font-size:10px;padding:0 7px;margin-left:0;min-height:36px}.copy{padding:34px 0 26px}.copy .overline{font-size:9px;letter-spacing:2.3px;margin-bottom:16px}.copy h2{font-size:36px;letter-spacing:-1.3px;margin-bottom:16px}.copy>p{font-size:12px}.mobile-break{display:block}.download-card{padding:17px;border-radius:13px}.card-heading{margin-bottom:13px;font-size:12px}.section-number{margin-right:10px}.primary-button{height:54px}.input-wrap input{height:56px}.quality-strip{gap:8px 14px;font-size:9px;margin-top:15px;padding-top:13px}.link-hint{font-size:10px}.empty-state{padding:23px 0;gap:4px;min-height:0}.empty-state h3{font-size:13px}.empty-state p{font-size:10px}.empty-status{display:none}.help-panel{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px}.help-panel summary{font-size:10px}footer{font-size:9px;margin-top:15px}.job-panel{padding:18px}.login-card{padding:25px}.login-brand{margin-bottom:25px}}
@media(max-width:380px){.shell{padding-inline:16px}.state-pill{order:4;width:100%;margin-left:0}.logout-button{margin-left:auto}.copy h2{font-size:33px}}