:root {
  --ink: #29211f;
  --muted: #716966;
  --paper: #fffdf9;
  --canvas: #f5f1ea;
  --line: #e7dfd5;
  --accent: #c93639;
  --accent-dark: #a8272a;
  --shadow: 0 20px 55px rgba(55, 39, 28, .10);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--canvas); }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #1e73be; outline-offset: 3px; }
img { display: block; max-width: 100%; }
.skip-link { position: fixed; z-index: 20; left: 16px; top: -50px; background: #fff; color: #000; padding: 10px 14px; border-radius: 8px; transition: top .2s; }
.skip-link:focus { top: 16px; }
.shell { width: min(1480px, calc(100% - 32px)); margin: 0 auto; }
.topbar { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { appearance: none; border: 0; color: var(--ink); background: transparent; padding: 4px 0; display: flex; align-items: center; gap: 10px; font-weight: 760; letter-spacing: -.04em; font-size: 21px; }
.brand-mark { width: 31px; height: 31px; border-radius: 11px; display: grid; place-items: center; color: white; background: var(--accent); font-family: Georgia, serif; font-size: 21px; font-style: italic; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.text-button, .icon-button { background: transparent; border: 0; color: var(--muted); padding: 9px 11px; border-radius: 999px; }
.text-button:hover, .icon-button:hover { background: #eee8df; color: var(--ink); }
.primary, .save-button { color: #fff; background: var(--accent); border: 1px solid var(--accent); font-weight: 700; border-radius: 999px; padding: 11px 17px; transition: transform .15s, background .15s; }
.primary:hover, .save-button:hover { background: var(--accent-dark); transform: translateY(-1px); }
.primary:disabled, .save-button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.secondary { color: var(--ink); background: #fff; border: 1px solid var(--line); font-weight: 700; border-radius: 999px; padding: 10px 16px; }
.secondary:hover { background: #f9f6f0; }
.danger { color: #a8272a; background: #fff7f7; border-color: #f0cccc; }
.hero { min-height: calc(100vh - 76px); display: grid; align-items: center; padding: 36px 0 70px; }
.hero-grid { display: grid; grid-template-columns: 1.07fr .93fr; gap: clamp(30px, 7vw, 110px); align-items: center; }
.eyebrow { margin: 0 0 14px; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1 { font: 600 clamp(45px, 6vw, 82px)/.98 Georgia, "Times New Roman", serif; letter-spacing: -.065em; margin: 0; max-width: 760px; }
.lede { max-width: 570px; color: var(--muted); font-size: 18px; line-height: 1.6; margin: 24px 0 0; }
.upload-card { padding: clamp(22px, 3vw, 38px); border-radius: 28px; background: var(--paper); box-shadow: var(--shadow); border: 1px solid rgba(220, 210, 197, .7); }
.upload-drop { min-height: 215px; border: 1.5px dashed #cfc5b8; border-radius: 19px; display: grid; place-items: center; text-align: center; padding: 24px; background: #fbfaf7; transition: .2s; }
.upload-drop.dragover { border-color: var(--accent); background: #fff5f4; }
.upload-drop h2 { font: 600 24px/1.1 Georgia, serif; margin: 13px 0 8px; letter-spacing: -.03em; }
.upload-drop p { margin: 0; color: var(--muted); font-size: 14px; }
.upload-drop input { display: none; }
.upload-icon { width: 45px; height: 45px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; border-radius: 15px; font-size: 22px; }
.checks { display: grid; gap: 13px; margin: 22px 0; }
.check { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; color: #544d49; font-size: 13px; line-height: 1.42; cursor: pointer; }
.check input { margin-top: 1px; accent-color: var(--accent); width: 16px; height: 16px; }
.upload-submit { width: 100%; }
.fine-print { color: var(--muted); font-size: 12px; line-height: 1.48; margin: 15px 0 0; text-align: center; }
.hero-visual { position: relative; min-height: 530px; }
.editorial-card { overflow: hidden; position: absolute; box-shadow: var(--shadow); background: #dac3b6; }
.editorial-card img { width: 100%; height: 100%; object-fit: cover; }
.placeholder-a { width: 48%; height: 61%; top: 7%; left: 5%; border-radius: 40% 40% 16px 16px; background: linear-gradient(135deg, #cc9b84, #70463d); }
.placeholder-b { width: 39%; height: 43%; right: 2%; top: 1%; border-radius: 18px; background: linear-gradient(135deg, #6b3c39, #e4bba2); }
.placeholder-c { width: 47%; height: 40%; bottom: 0; right: 9%; border-radius: 18px; background: linear-gradient(135deg, #ecb3a0, #7b4a43); }
.placeholder-a::after, .placeholder-b::after, .placeholder-c::after { content: "AI preview"; position: absolute; left: 13px; bottom: 13px; color: #fff; background: rgba(0,0,0,.32); padding: 5px 8px; border-radius: 99px; font-size: 11px; font-weight: 750; }
.floating-note { position: absolute; left: 0; bottom: 9%; border-radius: 14px; padding: 13px 15px; background: #fffdf9; box-shadow: 0 14px 35px rgba(55,39,28,.14); font-size: 13px; font-weight: 700; }
.gallery-page { padding-bottom: 72px; }
.gallery-intro { display: flex; justify-content: space-between; align-items: end; gap: 22px; margin: 26px 0 25px; }
.gallery-intro h1 { font-size: clamp(36px, 4.4vw, 63px); max-width: 840px; }
.gallery-intro p { max-width: 570px; color: var(--muted); line-height: 1.5; margin: 14px 0 0; }
.privacy-pill { white-space: nowrap; display: inline-flex; gap: 7px; align-items: center; color: #625a54; background: #ebe4da; border-radius: 999px; padding: 8px 11px; font-size: 12px; font-weight: 750; }
.toolbar { background: rgba(255,253,249,.76); backdrop-filter: blur(10px); border: 1px solid var(--line); padding: 12px 13px; border-radius: 18px; display: flex; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 21px; }
.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.count { padding: 9px 11px; background: #eee8df; border-radius: 999px; font-size: 13px; font-weight: 750; }
.key-panel { display: none; margin: -7px 0 21px; padding: 15px; background: #fff9ed; border: 1px solid #eedab4; border-radius: 16px; color: #5b4a2d; }
.key-panel.open { display: block; }
.key-panel label { display: block; font-size: 13px; font-weight: 750; margin-bottom: 8px; }
.key-row { display: flex; gap: 9px; }
.key-row input { flex: 1; min-width: 150px; border: 1px solid #d9caa8; background: #fff; border-radius: 10px; padding: 10px 12px; }
.key-panel p { font-size: 12px; line-height: 1.45; margin: 9px 0 0; }
.option-panel { margin: 0 0 18px; padding: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 2px 0 rgba(47,33,25,.04); }
.option-heading { display: flex; justify-content: space-between; align-items: end; gap: 14px; margin-bottom: 13px; }
.option-heading h2 { margin: 0; font-size: 20px; line-height: 1.15; letter-spacing: 0; }
.option-heading p { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.35; }
.option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 9px; }
.option-choice { width: 100%; min-height: 78px; display: grid; grid-template-columns: 31px 1fr auto; align-items: center; gap: 10px; text-align: left; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 11px; transition: border-color .15s, background .15s, box-shadow .15s; }
.option-choice:hover { background: #fbf8f3; border-color: #d7c9bc; }
.option-choice.active { border-color: var(--accent); background: #fff6f5; box-shadow: inset 0 0 0 1px rgba(201,54,57,.28); }
.option-check { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #8c817a; font-weight: 800; }
.option-choice.active .option-check { background: var(--accent); }
.option-copy { min-width: 0; display: grid; gap: 4px; }
.option-copy strong { font-size: 14px; line-height: 1.15; }
.option-copy small { color: var(--muted); font-size: 12px; line-height: 1.25; }
.option-status { color: #7a7069; background: #eee8df; border-radius: 999px; padding: 5px 8px; font-size: 11px; font-weight: 750; white-space: nowrap; }
.option-choice.active .option-status { color: #fff; background: var(--accent); }
.masonry { columns: 2 180px; column-gap: 14px; }
.result-card { break-inside: avoid; position: relative; margin: 0 0 14px; overflow: hidden; border-radius: 17px; background: #ded6cc; min-height: 180px; box-shadow: 0 2px 0 rgba(47,33,25,.05); cursor: pointer; isolation: isolate; }
.result-card.tall { min-height: 348px; } .result-card.medium { min-height: 270px; } .result-card.short { min-height: 205px; }
.result-card img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; transition: transform .35s ease; }
.result-card:hover img { transform: scale(1.025); }
.card-fallback { width: 100%; min-height: inherit; background: linear-gradient(140deg, rgba(202,176,158,.95), rgba(107,77,67,.92)); background-size: cover; background-position: center; }
.result-card[data-original] .card-fallback { opacity: .72; filter: saturate(.75); }
.card-overlay { position: absolute; inset: auto 0 0; padding: 38px 12px 12px; background: linear-gradient(transparent, rgba(22,15,13,.8)); color: white; display: flex; align-items: end; justify-content: space-between; gap: 9px; z-index: 2; }
.card-copy { min-width: 0; } .card-copy h2 { font-size: 14px; margin: 0; line-height: 1.15; letter-spacing: -.02em; } .card-copy span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; margin-top: 5px; opacity: .85; }
.save-button { padding: 7px 11px; font-size: 12px; flex: 0 0 auto; }
.save-button.saved { background: #fff; color: var(--ink); border-color: #fff; }
.pending { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(43,32,27,.18); z-index: 1; }
.pending span { background: rgba(255,253,249,.93); color: #534842; padding: 8px 10px; border-radius: 999px; font-size: 12px; font-weight: 750; box-shadow: 0 4px 14px rgba(0,0,0,.11); }
.card-select { position: absolute; top: 11px; left: 11px; z-index: 4; width: 29px; height: 29px; border-radius: 50%; border: 1px solid rgba(255,255,255,.8); background: rgba(30,22,18,.25); color: white; display: grid; place-items: center; font-size: 15px; }
.card-select.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.card-error { position: absolute; top: 12px; right: 12px; max-width: calc(100% - 24px); color: #8e1e24; background: #fff0f0; border-radius: 9px; padding: 8px; z-index: 3; font-size: 11px; line-height: 1.2; }
.dialog-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(31,23,20,.54); display: grid; place-items: center; padding: 18px; }
.dialog { position: relative; width: min(960px, 100%); max-height: calc(100vh - 36px); overflow: auto; border-radius: 23px; background: var(--paper); box-shadow: 0 28px 100px rgba(17,9,4,.34); }
.dialog-close { position: absolute; right: 14px; top: 14px; z-index: 3; border: 0; border-radius: 50%; width: 37px; height: 37px; color: #fff; background: rgba(0,0,0,.45); font-size: 22px; }
.compare { position: relative; height: min(65vh, 650px); overflow: hidden; background: #d6c9bf; }
.compare img { width: 100%; height: 100%; object-fit: contain; background: #211a18; }
.compare .after { position: absolute; inset: 0; width: var(--split); overflow: hidden; border-right: 2px solid #fff; }
.compare .after img { width: calc(100vw - 36px); max-width: 960px; }
.compare-label { position: absolute; top: 15px; padding: 6px 9px; color: #fff; background: rgba(0,0,0,.47); border-radius: 99px; font-size: 11px; font-weight: 750; }
.compare-label.before { right: 15px; } .compare-label.after-label { left: 15px; }
.compare-range { position: absolute; bottom: 16px; width: calc(100% - 32px); left: 16px; accent-color: #fff; }
.dialog-details { padding: 22px; display: flex; gap: 18px; align-items: end; justify-content: space-between; }
.dialog-details h2 { font: 600 29px/1 Georgia, serif; letter-spacing: -.04em; margin: 0; }
.dialog-details p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.dialog-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: end; }
.settings-dialog { width: min(500px, 100%); padding: 28px; }
.settings-dialog h2 { font: 600 31px/1 Georgia, serif; letter-spacing: -.045em; margin: 0; }
.settings-dialog p { color: var(--muted); line-height: 1.5; font-size: 14px; }
.settings-dialog label { display: block; margin: 18px 0 8px; font-size: 13px; font-weight: 750; }
.settings-dialog input { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.settings-dialog .primary { margin-top: 18px; }
.toast { position: fixed; z-index: 100; bottom: 20px; left: 50%; transform: translate(-50%, 120px); background: #29211f; color: #fff; padding: 11px 15px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.22); font-size: 13px; transition: transform .24s; max-width: calc(100% - 30px); text-align: center; }
.toast.show { transform: translate(-50%, 0); }
.loading-dots::after { content: '…'; display: inline-block; width: 1.1em; overflow: hidden; vertical-align: bottom; animation: dots 1.1s steps(4, end) infinite; } @keyframes dots { to { width: 0; } }
@media (max-width: 760px) { .shell { width: min(100% - 24px, 1480px); } .topbar { min-height: 62px; } .hero { padding: 22px 0 40px; } .hero-grid { grid-template-columns: 1fr; } .hero-visual { min-height: 330px; order: -1; } .upload-card { border-radius: 22px; } .gallery-intro { align-items: start; flex-direction: column; margin-top: 13px; } .toolbar { align-items: stretch; flex-direction: column; } .toolbar-right { justify-content: space-between; } .option-heading { align-items: stretch; flex-direction: column; } .option-heading .secondary { width: 100%; } .option-grid { grid-template-columns: 1fr; } .option-choice { grid-template-columns: 31px 1fr; } .option-status { grid-column: 2; justify-self: start; } .masonry { columns: 2; column-gap: 9px; } .result-card { margin-bottom: 9px; border-radius: 13px; } .result-card.tall { min-height: 255px; } .result-card.medium { min-height: 220px; } .result-card.short { min-height: 170px; } .dialog-details { align-items: stretch; flex-direction: column; } .dialog-actions { justify-content: start; } .compare { height: 54vh; } .key-row { flex-direction: column; } }
@media (min-width: 950px) { .masonry { columns: 4; } }
@media (min-width: 1250px) { .masonry { columns: 5; } }

/* One-workspace layout: the photo and every control remain visible together. */
.gallery-page { display:grid; grid-template-columns:minmax(0, 1fr) minmax(330px, 430px); gap:14px; align-items:start; }
.gallery-page > .gallery-intro { grid-column:1 / -1; margin-bottom:0; }
.gallery-page > .compare { grid-column:1; grid-row:2 / span 6; position:sticky; top:14px; margin:0; min-height:500px; border-radius:22px; box-shadow:var(--shadow); }
.gallery-page > .option-panel, .gallery-page > .option-heading, .gallery-page > .toolbar { grid-column:2; margin:0; }
.gallery-page > .option-heading { background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:16px; }
.gallery-page > .option-heading h2 { margin:0 0 12px; font-size:16px; }
.gallery-page > .option-heading .secondary { margin:0 6px 7px 0; }
.gallery-page > .option-heading input[type=range] { height:26px; }
.gallery-page > .toolbar { border-radius:18px; }
@media (max-width: 900px) { .gallery-page { display:block; }.gallery-page > .gallery-intro { margin-bottom:14px; }.gallery-page > .compare { position:static; min-height:360px; margin:14px 0; }.gallery-page > .option-panel, .gallery-page > .option-heading, .gallery-page > .toolbar { margin:12px 0; } }

/* Single all-options workspace */
.all-editor { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); gap:18px; padding:26px 0 70px; align-items:start; }
.all-preview { position:sticky; top:16px; overflow:hidden; border:1px solid var(--line); border-radius:22px; background:#211a18; box-shadow:var(--shadow); }
.all-preview .image-frame > img { width:100%; height:min(76vh,760px); object-fit:contain; background:#211a18; }
.all-preview > p { margin:0; padding:12px 15px; color:var(--muted); background:var(--paper); font-size:13px; font-weight:700; }
.all-preview > #downloadResult { margin:12px 15px 0; }
.all-preview .compare { height:min(76vh,760px); }.all-preview .compare .after img { max-width:900px; width:calc(100vw - 36px); }
.all-controls { padding:20px; border:1px solid var(--line); background:var(--paper); border-radius:22px; box-shadow:0 12px 35px rgba(55,39,28,.06); }
.editor-title h1 { font:600 38px/1 Georgia,serif; letter-spacing:-.05em; margin:0; }.editor-title p:not(.eyebrow) { color:var(--muted); line-height:1.45; margin:10px 0 0; }
.selection-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:20px 0 14px; }.selection-actions span { color:var(--muted); font-size:13px; font-weight:700; }
.generate-top { margin:0 0 14px; }.generate-top .primary { width:100%; }
.option-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.option-group { border:1px solid var(--line); border-radius:14px; padding:12px; }.option-group h2 { margin:0 0 8px; font-size:14px; }.option-group label { display:block; color:#514946; font-size:13px; padding:5px 0; cursor:pointer; }.option-group input { accent-color:var(--accent); }
.strength { margin-top:18px; border-top:1px solid var(--line); padding-top:16px; }.strength > div:first-child { display:flex; justify-content:space-between; }.strength h2 { margin:0; font-size:15px; }.strength b { color:var(--accent); }.strength input { width:100%; accent-color:var(--accent); margin:12px 0 4px; }.strength > div:last-child { display:flex; justify-content:space-between; color:var(--muted); font-size:11px; }
.generate-row { display:flex; gap:9px; margin-top:18px; }.generate-row .primary { flex:1; }
@media(max-width:900px){.all-editor{grid-template-columns:1fr;padding-top:14px}.all-preview{position:static}.all-preview .image-frame > img,.all-preview .compare{height:56vh}.option-groups{grid-template-columns:1fr}.all-controls{border-radius:18px}}