:root {
  --bg: #f6f1e8;
  --paper: #fffaf0;
  --paper-strong: #fffdf7;
  --ink: #17130d;
  --muted: #746b5f;
  --soft: #ded4c2;
  --line: rgba(23, 19, 13, 0.12);
  --gold: #c88a1d;
  --gold-2: #f6d27a;
  --blue: #557f92;
  --good: #257a50;
  --warn: #956b19;
  --danger: #a04444;
  --shadow: 0 24px 80px rgba(74, 54, 26, .14);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% -16%, rgba(246,210,122,.34), transparent 31rem),
    radial-gradient(circle at 96% 0%, rgba(85,127,146,.14), transparent 28rem),
    linear-gradient(180deg, #fbf7ef 0%, var(--bg) 100%);
  overflow: hidden;
}
button, textarea { font: inherit; }
button { border: 1px solid var(--line); background: var(--paper-strong); color: var(--ink); border-radius: 14px; padding: 10px 13px; cursor: pointer; font-weight: 760; transition: .18s ease; }
button:hover { transform: translateY(-1px); border-color: rgba(200,138,29,.46); box-shadow: 0 10px 26px rgba(74,54,26,.08); }
button:disabled { opacity: .48; cursor: not-allowed; transform: none; box-shadow: none; }
button.primary { min-height: 52px; border: 0; border-radius: 17px; background: #14110c; color: #fff7e4; box-shadow: 0 14px 34px rgba(20,17,12,.18); font-size: 15px; }
.app-shell { width: min(1280px, calc(100% - 28px)); min-height: 100svh; height: 100svh; margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) 0 max(14px, env(safe-area-inset-bottom)); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 38px; }
.brand { display: inline-flex; gap: 10px; align-items: center; color: var(--ink); text-decoration: none; font-weight: 850; letter-spacing: -.02em; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(200,138,29,.35); border-radius: 50%; color: var(--gold); background: rgba(255,250,240,.74); box-shadow: 0 0 34px rgba(246,210,122,.32); }
.topbar-right { display: inline-flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.topbar-note { margin: 0; color: var(--muted); font-size: 13px; }
.account-menu { position: relative; display: none; }
.account-menu[data-authenticated="true"] { display: block; }
.account-menu summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; min-height: 34px; max-width: 220px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.68); cursor: pointer; font-size: 12px; font-weight: 820; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-avatar { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(23,19,13,.08); font-size: 12px; }
#accountDisplayName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-popover { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 220px; display: grid; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,250,240,.98); box-shadow: 0 18px 50px rgba(74,54,26,.16); }
.account-popover p { margin: 0; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#logoutBtn { width: 100%; min-height: 40px; }
.version-badge { display: inline-flex; align-items: center; margin-left: 8px; padding: 3px 8px; border-radius: 999px; color: var(--ink); background: rgba(255,255,255,.68); border: 1px solid var(--line); font-weight: 820; font-variant-numeric: tabular-nums; }
.flow-screen { min-height: 0; height: 100%; display: grid; gap: 14px; }
.flow-screen[hidden] { display: none; }
.create-screen { grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr); align-items: start; }
.result-screen { grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr); }
.auth-screen { grid-template-columns: minmax(0, 1fr); align-items: center; justify-items: center; }
.image-pane, .command-bar, .review-drawer, .auth-card { border: 1px solid var(--line); background: rgba(255,250,240,.82); border-radius: 28px; box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.image-pane { padding: 10px; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.create-photo-card { align-self: start; }
.create-photo-card .upload-wrap { aspect-ratio: 4 / 3; height: auto; }
.pane-head { height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px 8px; color: var(--muted); font-size: 12px; font-weight: 740; }
.pane-tools { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.pane-tools > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.expand-btn { min-height: 26px; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 820; background: rgba(255,255,255,.54); }
.canvas-wrap, .compare-viewer { position: relative; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: #eee5d4; }
.canvas-wrap { height: 100%; }
canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
.dropzone { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 9px; text-align: center; border: 1.5px dashed rgba(23,19,13,.22); border-radius: 22px; cursor: pointer; transition: .2s ease; background: rgba(238,229,212,.93); }
.upload-wrap.has-image .dropzone { opacity: 0; pointer-events: none; }
.upload-wrap.has-image:hover .dropzone { opacity: .92; pointer-events: auto; }
.dropzone:hover, .dropzone.drag { border-color: rgba(200,138,29,.58); background: rgba(244,234,214,.96); }
.dropzone input { display: none; }
.drop-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: var(--paper-strong); border: 1px solid var(--line); box-shadow: 0 14px 30px rgba(74,54,26,.09); font-size: 32px; line-height: 1; color: var(--gold); }
.drop-title { display: block; font-size: clamp(24px, 4vw, 44px); letter-spacing: -.06em; font-weight: 880; max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop-subtitle { display: block; color: var(--muted); font-size: 13px; }
.badge { padding: 6px 10px; border-radius: 999px; background: rgba(23,19,13,.08); color: var(--ink); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; font-weight: 850; }
.badge.gold { color: #1b1304; background: var(--gold-2); }
.command-bar { min-height: 0; display: grid; align-content: center; gap: 14px; padding: clamp(14px, 2vw, 24px); }
.intent-head { min-width: 0; }
.eyebrow { margin: 0 0 5px; color: var(--gold); text-transform: uppercase; letter-spacing: .14em; font-weight: 850; font-size: 10px; }
h1 { margin: 0; font-size: clamp(30px, 4vw, 56px); line-height: .94; letter-spacing: -.065em; }
h2, h3 { margin: 0 0 8px; letter-spacing: -.02em; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.modes button { text-align: left; min-height: 70px; display: grid; gap: 3px; background: rgba(255,255,255,.5); }
.modes button small { color: var(--muted); font-weight: 650; }
.modes button.active { background: #17130d; color: #fff7e4; border-color: #17130d; }
.modes button.active small { color: rgba(255,247,228,.72); }
.field { margin: 0; }
label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px; font-weight: 720; }
textarea { width: 100%; border: 1px solid var(--line); background: rgba(255,255,255,.62); color: var(--ink); border-radius: 15px; padding: 12px 13px; outline: none; min-height: 96px; resize: none; }
.checkline { display: flex; align-items: center; gap: 11px; margin: 0; padding: 12px 13px; border: 1px solid var(--line); border-radius: 15px; color: var(--ink); background: rgba(255,255,255,.52); }
.checkline input { width: 19px; height: 19px; accent-color: var(--gold); }
.checkline span { display: grid; gap: 2px; }
.checkline small { color: var(--muted); font-weight: 650; }
.ai-status { margin: 0; color: var(--muted); font-size: 12px; min-height: 16px; }
.ai-status[data-kind="busy"], .ai-status[data-kind="waiting"] { color: var(--warn); }
.ai-status[data-kind="done"] { color: var(--good); }
.ai-status[data-kind="error"] { color: var(--danger); }
.result-stage { min-height: 0; }
.compare-viewer { height: 100%; touch-action: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; }
.preview-card { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-radius: 16px; background: #18140f; display: grid; place-items: center; }
.preview-card--original { border: 1px solid rgba(255,250,240,.18); }
.preview-card--generated { border: 1px solid rgba(246,210,122,.38); }
.preview-label { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 5px 8px; border-radius: 999px; background: rgba(255,250,240,.88); color: var(--ink); font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.compare-viewer canvas { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.compare-image { width: 100%; height: 100%; object-fit: contain; background: #18140f; }
.wait-overlay { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; color: #fff4d4; background: rgba(11,10,8,.64); transition: opacity .25s ease; }
.wait-overlay[data-state="idle"] { color: var(--muted); background: rgba(255,250,240,.86); }
.wait-overlay[data-state="done"] { background: rgba(11,10,8,.18); color: #fff8df; animation: doneFlash 1.35s ease; }
.wait-overlay.hidden { opacity: 0; pointer-events: none; }
.wait-overlay p { margin: 0; font-size: 15px; font-weight: 760; }
.wait-overlay .wait-please { margin-top: -4px; color: rgba(255,244,212,.76); font-size: 13px; font-weight: 680; }
.wait-overlay[data-state="idle"] .wait-please, .wait-overlay[data-state="done"] .wait-please, .wait-overlay[data-state="error"] .wait-please { display: none; }
.wait-overlay strong { font-size: clamp(42px, 7vw, 92px); letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.orb { width: 42px; height: 42px; border-radius: 50%; border: 2px solid rgba(246,210,122,.34); border-top-color: var(--gold-2); box-shadow: 0 0 36px rgba(246,210,122,.42); }
.wait-overlay[data-state="busy"] .orb, .wait-overlay[data-state="waiting"] .orb { animation: spin 1s linear infinite; }
.wait-overlay[data-state="done"] .orb { animation: pulse 1s ease 2; background: var(--gold-2); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.2); } }
@keyframes doneFlash { 0% { box-shadow: inset 0 0 0 0 rgba(246,210,122,0); } 35% { box-shadow: inset 0 0 0 999px rgba(246,210,122,.18); } 100% { box-shadow: inset 0 0 0 0 rgba(246,210,122,0); } }
.progress-box { display: grid; gap: 8px; }
.progress-box[data-state="waiting"] { border-color: rgba(85,127,146,.5); }
.progress-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.progress-state-text { margin: 0; color: var(--muted); font-size: 12px; }
.progress-track { height: 8px; background: rgba(23,19,13,.08); border-radius: 999px; overflow: hidden; }
.progress-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue), var(--gold)); }
.result-buttons, .export-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ai-pipeline, .pipeline-steps { display: contents; }
.download-primary { min-height: 48px; background: #17130d; color: #fff7e4; border-color: #17130d; box-shadow: 0 14px 34px rgba(20,17,12,.16); }
.review-drawer { padding: 0; overflow: hidden; box-shadow: none; background: rgba(255,255,255,.42); }
.review-drawer > summary { cursor: pointer; padding: 13px 16px; font-weight: 850; list-style: none; display: flex; justify-content: space-between; }
.review-drawer > summary::-webkit-details-marker { display: none; }
.review-drawer > summary::after { content: "+"; color: var(--gold); }
.review-drawer[open] > summary::after { content: "–"; }
.reports { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 0 12px 12px; max-height: 48vh; overflow: auto; }
.reports article { background: rgba(255,250,240,.68); border: 1px solid var(--line); border-radius: 18px; padding: 12px; }
ul { margin: 0; padding-left: 18px; color: var(--muted); line-height: 1.5; font-size: 13px; }
.score { margin: 8px 0 12px; }
.score-row { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.bar { height: 8px; background: rgba(23,19,13,.08); border-radius: 999px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--gold)); border-radius: inherit; }
#complianceText { color: var(--muted); line-height: 1.5; font-size: 13px; }
.timing-table { display: grid; gap: 7px; color: var(--muted); font-size: 13px; }
.timing-table p { margin: 0; line-height: 1.5; }
.timing-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 9px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.38); }
.timing-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.timing-row strong { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.timing-row.active { border-color: rgba(200,138,29,.42); background: rgba(246,210,122,.16); }
.timing-row.failed { border-color: rgba(160,68,68,.42); background: rgba(160,68,68,.08); }
.timing-row.total { background: rgba(23,19,13,.06); }
.auth-shell { width: min(560px, 100%); align-content: start; gap: 18px; padding: clamp(22px, 4vw, 42px); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 5px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.46); }
.auth-tabs button { min-height: 44px; border-radius: 13px; background: transparent; box-shadow: none; }
.auth-tabs button.active { background: #17130d; color: #fff7e4; border-color: #17130d; }
.auth-panel { display: grid; gap: 15px; }
.auth-panel[hidden] { display: none; }
.auth-note { margin: 0; color: var(--muted); line-height: 1.5; }
.auth-form { display: grid; gap: 12px; }
.auth-form .field { display: grid; gap: 7px; margin: 0; color: var(--muted); font-size: 13px; font-weight: 760; }
.auth-form input { width: 100%; min-height: 52px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.74); color: var(--ink); padding: 0 14px; font: inherit; font-size: 16px; outline: none; }
.auth-form input:focus { border-color: rgba(200,138,29,.72); box-shadow: 0 0 0 4px rgba(246,210,122,.2); }
.optional { color: var(--muted); font-weight: 650; opacity: .72; }
.auth-error { min-height: 20px; margin: 0; color: var(--danger); font-size: 13px; line-height: 1.4; }
.auth-actions { display: grid; gap: 10px; }
.auth-back { min-height: 44px; background: rgba(255,255,255,.58); }
.hidden { display: none; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.image-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 22px; }
.image-modal.hidden { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(9,8,6,.72); backdrop-filter: blur(12px); }
.modal-card { position: relative; width: min(1320px, 96vw); max-height: 94vh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; padding: 14px; border: 1px solid rgba(255,250,240,.24); border-radius: 24px; background: rgba(255,250,240,.96); box-shadow: 0 30px 100px rgba(0,0,0,.36); }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.modal-head h2 { margin: 0; }
.modal-image-wrap { min-height: 0; display: grid; place-items: center; overflow: auto; border: 1px solid var(--line); border-radius: 18px; background: #111; }
.modal-image-wrap img { display: block; max-width: 100%; max-height: 76vh; width: auto; height: auto; object-fit: contain; }
.modal-hint { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
@media (max-width: 920px) {
  .app-shell { width: min(100% - 18px, 1220px); }
  .create-screen, .result-screen { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .create-photo-card .upload-wrap { aspect-ratio: auto; height: 100%; }
  .compare-viewer { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .auth-screen { grid-template-columns: 1fr; }
  .command-bar { align-content: stretch; }
  h1 { font-size: clamp(28px, 9vw, 42px); }
  .modes { grid-template-columns: 1fr 1fr; }
  textarea { min-height: 74px; }
  .result-buttons, .export-panel { grid-template-columns: 1fr; }
  .reports { max-height: 35svh; }
}
@media (max-width: 640px) {
  .topbar-note { display: none; }
  .account-menu summary { max-width: 170px; }
  .create-screen { grid-template-rows: minmax(210px, 42svh) minmax(0, auto); }
  .result-screen { grid-template-rows: minmax(240px, 1fr) auto; }
  .auth-shell { width: 100%; padding: 18px; }
  .command-bar { padding: 12px; gap: 10px; border-radius: 22px; }
  .image-pane, .auth-card { border-radius: 22px; }
  .modes button { min-height: 58px; padding: 10px; }
  .checkline { padding: 10px; }
  body.keyboard-open { overflow: auto; }
}