@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap");

:root { --bg:#f4f3ef; --surface:#fff; --soft:#f7f6f2; --text:#1c1c18; --muted:#74736d; --line:#deddd6; --line-strong:#c9c8bf; --accent:#1c1c18; --success:#29744f; --danger:#af3b32; --radius:24px; --radius-sm:14px; }
* { box-sizing:border-box; }
body { min-width:320px; margin:0; color:var(--text); background:radial-gradient(circle at 75% 0, #fff 0, transparent 32rem),var(--bg); font-family:Manrope,Arial,sans-serif; text-rendering:geometricPrecision; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.shell { width:min(100% - 48px,1280px); margin:auto; padding:50px 0 24px; }
.hero { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin:0 4px 38px; }
.kicker,.export-eyebrow { margin:0 0 7px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
h1 { margin:0; font:700 clamp(44px,6.4vw,76px)/.86 "Space Grotesk",sans-serif; letter-spacing:-.085em; }
.hero-subtitle { margin:14px 0 5px; font-size:18px; font-weight:700; letter-spacing:-.035em; }
.hero-description { max-width:660px; margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.back-link,.ghost-button { display:inline-flex; min-height:34px; padding:0 11px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:10px; background:#faf9f6; color:#595850; font-size:11px; font-weight:750; text-decoration:none; transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.back-link:hover,.ghost-button:hover { border-color:#aaa89f; background:#fff; transform:translateY(-1px); }
.workspace { display:grid; grid-template-columns:minmax(360px,.91fr) minmax(0,1.09fr); gap:16px; align-items:start; }
.panel { border:1px solid rgba(199,198,190,.72); border-radius:var(--radius); background:rgba(255,255,255,.86); box-shadow:0 18px 48px rgba(33,32,26,.055); }
.controls { display:grid; gap:0; padding:20px; }
.panel-caption,.section-title,.preview-head,.preview-footer,.export-topline,.range-head,.quality-actions,.logo-upload-row { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.panel-caption { padding-bottom:16px; }
.panel-caption span,.section-title>span { display:block; font-size:15px; font-weight:800; letter-spacing:-.025em; }
.panel-caption small,.section-title small { display:block; margin-top:2px; color:var(--muted); font-size:11px; }
.title-with-help,.label-with-help { display:inline-flex!important; align-items:center; gap:6px; }
.title-with-help > span { display:inline; }
.help-trigger { display:inline-grid; width:17px; height:17px; padding:0; place-items:center; border:0; border-radius:50%; background:#20201c; color:#fff; font:800 10px/1 Manrope,Arial,sans-serif; cursor:pointer; transition:transform .16s ease,background .16s ease; }
.help-trigger:hover { background:#4c4b45; transform:scale(1.08); }
.settings-tabs { display:grid; grid-template-columns:1fr 1fr; gap:5px; padding:5px; border-radius:15px; background:#efeee9; }
.settings-tab { min-height:39px; border:0; border-radius:11px; background:transparent; color:#6b6962; font-size:12px; font-weight:800; transition:transform .17s ease,background .17s ease,color .17s ease,box-shadow .17s ease; }
.settings-tab:hover { transform:translateY(-1px); }
.settings-tab.is-active { background:#fff; color:var(--text); box-shadow:0 3px 10px rgba(28,27,23,.1); }
.settings-tab-panel { min-width:0; }
.content-section { padding:16px 0 0; }
.settings-section { min-width:0; padding:16px 0; border-top:1px solid var(--line); }
.settings-tab-panel[data-settings-panel="settings"] .settings-section:first-child { border-top:0; }
.controls-footer { display:flex; justify-content:flex-end; padding-top:15px; }
.controls-footer .ghost-button { border-color:#20201c; background:#20201c; color:#fff; }
.controls-footer .ghost-button:hover { border-color:#383832; background:#383832; }
details summary { display:flex; align-items:center; justify-content:space-between; gap:12px; list-style:none; cursor:pointer; user-select:none; }
details summary::-webkit-details-marker { display:none; }
details summary::after { width:8px; height:8px; margin-left:4px; border-right:1.5px solid #6d6c65; border-bottom:1.5px solid #6d6c65; content:""; transform:rotate(45deg) translateY(-2px); transition:transform .18s ease; }
details[open] summary::after { transform:rotate(225deg) translate(-2px,-1px); }
details summary>span { font-size:13px; font-weight:760; }
details summary small { flex:1; color:var(--muted); font-size:10px; text-align:right; }
.details-body { display:grid; gap:13px; padding-top:15px; }
.type-tabs { display:flex; flex-wrap:wrap; gap:5px; margin-top:12px; }
.type-tab { min-height:31px; padding:0 9px; border:1px solid var(--line); border-radius:9px; background:var(--soft); color:#64635d; font-size:10px; font-weight:800; transition:background .15s ease,color .15s ease,border .15s ease,transform .15s ease; }
.type-tab:hover { transform:translateY(-1px); border-color:#aaa89f; }
.type-tab.is-active { border-color:var(--accent); background:var(--accent); color:#fff; }
.dynamic-fields { display:grid; gap:10px; margin-top:13px; }
.field { display:grid; gap:6px; min-width:0; }
.field label,.field>span,.select-field>span,.color-field>span:first-child,.shape-set legend { color:#4a4943; font-size:11px; font-weight:750; }
.field input,.field textarea,.select-field select { width:100%; border:1px solid var(--line-strong); border-radius:11px; outline:0; background:var(--soft); color:var(--text); transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.field input,.select-field select { height:43px; padding:0 12px; }
.field textarea { min-height:84px; padding:10px 12px; resize:vertical; line-height:1.45; }
.field input:focus,.field textarea:focus,.select-field select:focus { border-color:#77766f; background:#fff; box-shadow:0 0 0 4px rgba(23,23,20,.06); }
.field-message { min-height:0; margin:0; color:var(--muted); font-size:10px; line-height:1.4; }
.field-message.is-error { color:var(--danger); }
.segmented { display:grid; grid-template-columns:1fr 1fr; gap:5px; padding:4px; border-radius:13px; background:#efeee9; }
.segmented label { position:relative; cursor:pointer; }
.segmented input { position:absolute; opacity:0; }
.segmented span { display:flex; min-height:34px; align-items:center; justify-content:center; border-radius:9px; color:#6c6a64; font-size:11px; font-weight:760; transition:background .17s ease,color .17s ease,box-shadow .17s ease; }
.segmented input:checked+span { background:#fff; color:var(--text); box-shadow:0 2px 7px rgba(36,35,28,.09); }
.field-grid { display:grid; gap:10px; }
.field-grid.two-columns { grid-template-columns:1fr 1fr; }
.color-field,.select-field { display:grid; gap:6px; min-width:0; }
.color-control { display:flex; height:43px; align-items:center; gap:9px; padding:5px 8px; border:1px solid var(--line); border-radius:11px; background:var(--soft); }
.color-control input { width:30px; height:30px; padding:0; border:0; border-radius:8px; background:transparent; cursor:pointer; }
.color-control input::-webkit-color-swatch-wrapper { padding:0; }.color-control input::-webkit-color-swatch { border:1px solid rgba(0,0,0,.1); border-radius:7px; }
.color-control output { overflow:hidden; color:#595850; font:11px Consolas,monospace; text-overflow:ellipsis; white-space:nowrap; }
.select-field select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,#77756e 50%),linear-gradient(135deg,#77756e 50%,transparent 50%); background-position:calc(100% - 17px) 18px,calc(100% - 12px) 18px; background-repeat:no-repeat; background-size:5px 5px,5px 5px; }
.check-control { display:flex; align-items:center; gap:8px; color:#4e4d47; font-size:11px; font-weight:650; cursor:pointer; }
.check-control input { position:absolute; opacity:0; }.check-box { width:17px; height:17px; flex:0 0 auto; border:1px solid var(--line-strong); border-radius:5px; background:var(--soft); transition:background .16s ease,border .16s ease; }.check-control input:checked+.check-box { border-color:var(--text); background:var(--text); box-shadow:inset 0 0 0 4px var(--text); }.check-control input:checked+.check-box::after { display:block; width:7px; height:4px; margin:4px; border-left:1.5px solid #fff; border-bottom:1.5px solid #fff; content:""; transform:rotate(-45deg); }
.shape-set { min-width:0; margin:0; padding:0; border:0; }.shape-set legend { margin-bottom:9px; padding:0; }.shape-options { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }.shape-options label { position:relative; display:grid; min-width:0; min-height:67px; place-items:center; gap:3px; padding:8px 4px; border:1px solid var(--line); border-radius:12px; background:var(--soft); cursor:pointer; transition:transform .16s ease,border .16s ease,background .16s ease; }.shape-options label:hover { transform:translateY(-1px); border-color:#aaa89f; }.shape-options input { position:absolute; opacity:0; }.shape-options input:checked~span { box-shadow:0 0 0 2px var(--text); }.shape-options input:checked~small { color:var(--text); }.shape-options small { overflow:hidden; max-width:100%; color:#74736d; font-size:9px; font-weight:720; text-overflow:ellipsis; white-space:nowrap; }
.shape-square,.shape-rounded,.shape-dot,.shape-classy { display:block; width:24px; height:24px; background:#272722; }.shape-rounded { border-radius:7px; }.shape-dot { border-radius:50%; }.shape-classy { border-radius:11px 3px 11px 3px; }.eye-sample { position:relative; display:block; width:24px; height:24px; border:5px solid #272722; }.eye-sample::after { position:absolute; inset:3px; border-radius:1px; background:#272722; content:""; }.eye-rounded { border-radius:8px; }.eye-rounded::after { border-radius:4px; }.eye-dot { border-radius:50%; }.eye-dot::after { border-radius:50%; }
.logo-body { gap:14px; }.upload-button { display:inline-flex; min-height:37px; padding:0 12px; align-items:center; justify-content:center; border:1px solid #252521; border-radius:10px; background:#252521; color:#fff; font-size:11px; font-weight:760; cursor:pointer; }.logo-file-name { align-self:center; overflow:hidden; flex:1; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.is-hidden { display:none!important; }
.range-field { display:grid; gap:7px; min-width:0; }.range-head { align-items:center; color:#4a4943; font-size:11px; font-weight:750; }.range-head output { color:var(--text); font-size:11px; }.range-field input { width:100%; margin:0; accent-color:#20201c; cursor:pointer; }.range-scale { display:flex; justify-content:space-between; color:#999790; font-size:9px; }.quality-actions { align-items:center; }.quality-actions p { margin:0; color:var(--muted); font-size:10px; line-height:1.4; text-align:right; }
.output-column { display:grid; gap:16px; min-width:0; }.preview-panel { display:grid; grid-template-rows:auto minmax(420px,1fr) auto; min-height:548px; padding:20px; overflow:hidden; }.preview-head { align-items:center; }.preview-head>div { display:grid; gap:3px; }.preview-label,.preview-footer { color:var(--muted); font-size:11px; }.preview-head strong { font:650 14px "Space Grotesk",sans-serif; letter-spacing:.02em; }.status-badge { display:inline-flex; min-height:29px; align-items:center; gap:7px; padding:0 10px; border-radius:999px; background:#edf5ef; color:var(--success); font-size:10px; font-weight:800; }.status-badge::before { width:6px; height:6px; border-radius:50%; background:currentColor; content:""; }.status-badge.is-error { background:#fff0ee; color:var(--danger); }.status-badge.is-waiting { background:#efeee9; color:#77756e; }
.preview-stage { position:relative; display:grid; min-height:0; margin:14px 0 12px; place-items:center; overflow:hidden; border:1px solid #e5e4dd; border-radius:19px; background:linear-gradient(45deg,#f2f1ed 25%,transparent 25%) 0 0/20px 20px,linear-gradient(-45deg,#f2f1ed 25%,transparent 25%) 0 10px/20px 20px,linear-gradient(45deg,transparent 75%,#f2f1ed 75%) 10px -10px/20px 20px,linear-gradient(-45deg,transparent 75%,#f2f1ed 75%) -10px 0/20px 20px,#faf9f6; }.qr-card { display:grid; width:min(80%,460px); max-height:82%; place-items:center; filter:drop-shadow(0 18px 24px rgba(28,27,23,.13)); transition:transform .25s ease,opacity .22s ease; }.qr-card svg { display:block; width:100%; height:auto; max-height:100%; }.preview-stage.is-generating .qr-card { opacity:.3; transform:scale(.985); }.generation-sweep { position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent); transform:translateX(-120%); }.preview-stage.is-generating .generation-sweep { animation:sweep .75s ease-in-out infinite; }@keyframes sweep { to { transform:translateX(120%); } }.preview-footer { align-items:center; }.copy-button { border:0; background:transparent; color:#5f5e58; font-size:10px; font-weight:750; text-decoration:underline; text-underline-offset:3px; }
.export-panel { display:grid; gap:15px; padding:19px 20px 20px; }.export-topline > div { display:grid; gap:3px; }.export-eyebrow { display:block; }.export-topline strong { font-size:15px; letter-spacing:-.025em; }.export-topline p { max-width:310px; margin:0; color:var(--muted); font-size:10px; line-height:1.4; text-align:right; }.export-settings-row { display:grid; grid-template-columns:1fr; gap:18px; }.formats { min-width:0; margin:0; padding:0; border:0; }.export-field-label { display:block; margin-bottom:8px; color:#4a4943; font-size:11px; font-weight:750; }.format-grid { display:flex; flex-wrap:wrap; gap:6px; }.format-option { position:relative; cursor:pointer; }.format-option input { position:absolute; opacity:0; }.format-option span { display:inline-flex; min-width:53px; min-height:35px; padding:0 11px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:10px; background:var(--soft); color:#5b5a54; font-size:10px; font-weight:800; transition:transform .16s ease,border .16s ease,background .16s ease,color .16s ease; }.format-option:hover span { transform:translateY(-1px); border-color:#aaa89f; }.format-option input:checked+span { border-color:var(--text); background:var(--text); color:#fff; }.actions { display:grid; grid-template-columns:1fr; gap:8px; }.button { min-height:50px; border:0; border-radius:13px; font-size:12px; font-weight:800; transition:transform .17s ease,opacity .17s ease; }.button:hover { transform:translateY(-1px); }.secondary { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:#ecebe6; color:#2b2b26; }.primary { background:#20201c; color:#fff; }.action-icon { display:flex; width:17px; height:17px; }.action-icon svg { width:100%; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }.download-button { display:grid; align-content:center; gap:2px; padding:0 16px; text-align:left; }.download-meta { color:rgba(255,255,255,.63); font-size:9px; font-weight:600; }
footer { display:flex; justify-content:space-between; gap:24px; padding:17px 4px 0; color:#88877f; font-size:10px; line-height:1.4; }footer span:last-child { max-width:680px; text-align:right; }.toast { position:fixed; bottom:22px; left:50%; z-index:10; max-width:calc(100% - 32px); padding:11px 16px; border-radius:999px; background:#20201c; color:#fff; font-size:11px; opacity:0; pointer-events:none; transform:translate(-50%,18px); transition:opacity .2s ease,transform .2s ease; }.toast.is-visible { opacity:1; transform:translate(-50%,0); }.help-popover { position:fixed; top:22px; right:22px; z-index:30; width:min(360px,calc(100% - 44px)); max-height:calc(100svh - 44px); padding:15px 17px; overflow:auto; border-radius:14px; background:#20201c; color:#fff; box-shadow:0 16px 36px rgba(24,23,20,.24); }.help-popover strong { display:block; margin-bottom:7px; font-size:12px; }.help-popover p,.help-popover li { color:rgba(255,255,255,.8); font-size:11px; line-height:1.45; }.help-popover p { margin:0 0 9px; }.help-popover ul { display:grid; gap:5px; margin:0 0 10px; padding:0 0 0 16px; }.help-popover li::marker { color:#fff; }.help-popover b { color:#fff; }
@media (min-width:1051px) { .output-column { position:sticky; top:20px; } }
@media (max-width:1050px) { .workspace { grid-template-columns:1fr; }.preview-panel { min-height:570px; }.controls { order:2; }.output-column { order:1; } }
@media (max-width:650px) { .shell { width:min(100% - 20px,1280px); padding-top:25px; }.hero { margin:0 1px 23px; }.back-link { margin-top:5px; }.hero-subtitle { font-size:15px; }.workspace { gap:10px; }.controls,.preview-panel,.export-panel { padding:16px; border-radius:20px; }.preview-panel { grid-template-rows:auto 360px auto; min-height:0; }.qr-card { width:min(86%,420px); }.field-grid.two-columns,.export-settings-row { grid-template-columns:1fr; }.shape-options { grid-template-columns:repeat(2,1fr); }.shape-options label { min-height:58px; }.export-topline,.quality-actions { display:grid; gap:5px; }.export-topline p,.quality-actions p { max-width:none; text-align:left; }.actions { grid-template-columns:1fr; }.type-tabs { gap:4px; }.type-tab { padding:0 8px; } .logo-upload-row { flex-wrap:wrap; }.logo-file-name { flex-basis:100%; }.preview-footer { gap:8px; } footer { flex-direction:column; gap:5px; } footer span:last-child { text-align:left; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }