:root {
  color-scheme:dark;
  --bg:#131720;
  --header:#171b25;
  --panel:#1b202c;
  --line:#343b4b;
  --field:#141923;
  --text:#f2f4fa;
  --muted:#a0aabd;
  --accent:#93a8ff;
  --accent-text:#101a33;
  font:14px/1.45 Inter,system-ui,sans-serif;
  color:var(--text);
  background:var(--bg);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-height:100vh}
h1,h2,h3,p{margin:0}
button,input,select,textarea{font:inherit}
button,summary{cursor:pointer}
button:disabled{cursor:default;opacity:.5}
button{color:inherit}
a{color:var(--accent);text-decoration:none}
:focus-visible{outline:2px solid #b7c6ff;outline-offset:3px}
.icon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.top{min-height:68px;padding:10px 28px;display:flex;align-items:center;gap:22px;background:var(--header);border-bottom:1px solid #303542}
.brand{color:var(--text);display:flex;align-items:center;gap:12px;font-size:17px;font-weight:700;white-space:nowrap;min-width:192px;border-right:1px solid #303542;padding-right:22px}
.brand-icon,.file-icon{display:grid;place-items:center;border-radius:9px;width:34px;height:34px;background:var(--accent);color:var(--accent-text)}
nav,.account,.preview-tools,.history-actions{display:flex;align-items:center;gap:8px}
.account{margin-left:auto}
.nav,.balance{display:flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--muted);font-weight:600;padding:8px 12px;border-radius:7px;white-space:nowrap}
.nav.active,.nav:hover,.balance:hover{background:#2b3450;color:var(--accent)}
.balance{font-size:12px}
.button{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:1px solid transparent;border-radius:8px;padding:9px 13px;min-height:40px;font-weight:700;font-size:13px;white-space:nowrap}
.primary{background:var(--accent);color:var(--accent-text)}
.primary:hover:not(:disabled){background:#afbeff}
.outline{background:#1e2431;border-color:#3a4356;color:var(--text)}
.outline:hover:not(:disabled){border-color:var(--accent)}
main{max-width:1640px;margin:0 auto;padding:0 28px}
.intro{margin:22px 0 24px}
h1{font-size:25px;font-weight:750;letter-spacing:-.025em}
h2{font-size:15px}
.intro p,.output-head p{color:var(--muted);font-size:13px;margin-top:4px}
.workspace{display:grid;grid-template-columns:minmax(0,2.5fr) minmax(325px,1fr);gap:20px;align-items:start}
.panel{min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.output{overflow:hidden;background:#191e29}
.output-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px 12px 20px;min-height:60px;border-bottom:1px solid #303542}
.preview-tools button{display:grid;place-items:center;background:#1e2431;border:1px solid #3a4356;border-radius:6px;color:var(--muted);min-width:34px;height:34px;padding:0 5px}
.preview-tools button:hover:not(:disabled){color:var(--text)}
.zoom-group{display:flex;background:#1e2431;border:1px solid #3a4356;border-radius:6px}
.zoom-group button{border:0;background:none;height:32px}
#zoom-reset{min-width:52px;font:600 12px ui-monospace,monospace}
.canvas{background-color:#151a24;background-image:radial-gradient(#2d3442 1px,transparent 1px);background-size:20px 20px;height:clamp(380px,calc(100vh - 320px),620px);overflow:auto}
.canvas-stage{display:grid;place-items:center;min-width:100%;min-height:100%;width:max-content;height:max-content;padding:24px}
.artboard{display:grid;place-items:center;width:var(--preview-width, min(54vw,520px));height:var(--preview-height,min(54vw,520px));background-color:#edf1ff;background-image:linear-gradient(#dfe5fa 1px,transparent 1px),linear-gradient(90deg,#dfe5fa 1px,transparent 1px);background-size:24px 24px;border:1px solid #a8b7f1;border-radius:3px;overflow:hidden}
.artboard img{display:block;width:100%;height:100%;object-fit:contain}
.output-foot{display:flex;align-items:center;gap:10px;padding:13px 18px;border-top:1px solid #303542;font-size:13px}
.file-icon{width:32px;height:32px;background:#272f44;color:#adbeff;border-radius:7px;flex:none}
#preview-filename{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#preview-size{margin-left:auto;color:var(--muted);white-space:nowrap;font:12px ui-monospace,monospace}
.settings{padding:0 22px 22px}
.settings h2{margin:0 -22px;padding:19px 22px;border-bottom:1px solid #303542}
.mode-switch{display:flex;gap:3px;padding:3px;margin-top:20px;border-radius:8px;background:var(--field)}
.mode-switch button{flex:1;border:1px solid transparent;border-radius:6px;padding:7px 5px;background:transparent;color:var(--muted);font-size:12px;font-weight:700}
.mode-switch button[aria-pressed=true]{color:#b7c6ff;background:#2b354f;border-color:#425272}
.field{display:grid;gap:7px;margin-top:20px;min-width:0}
.label-row{display:flex;align-items:center;justify-content:space-between;gap:6px}
label{font-weight:700;font-size:13px}
.label-row span,.field small,.optional{color:var(--muted);font-size:11px}
textarea,input,select{min-width:0;width:100%;border:1px solid #46516a;border-radius:8px;background:var(--field);color:var(--text);padding:10px 12px}
select{min-height:43px;background:#171c27}
textarea{resize:vertical;line-height:1.55}
textarea::placeholder,input::placeholder{color:#a0aabd;opacity:1}
.presets{display:flex;flex-wrap:wrap;gap:4px}
.presets button{border:1px solid #343e56;border-radius:5px;color:#bac8ef;background:#222b3f;font-size:11px;padding:3px 6px}
.presets button:hover{background:#2b354f}
.columns{display:grid;grid-template-columns:1fr 1fr;gap:12px}
details{margin:22px 0;border-block:1px solid #303542;padding:12px 0}
summary{font-size:13px;color:var(--muted);font-weight:650}
details[open]{padding-bottom:14px}
#generate{width:100%;min-height:47px}
.output-meta{margin-top:22px;border-top:1px solid #303542;padding-top:11px;display:grid;gap:9px}
.output-meta>div{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.output-meta strong{color:var(--text);text-align:right}
.output-meta .format-value{color:var(--accent);font-family:ui-monospace,monospace}
.message{font-size:12px;margin-top:8px;overflow-wrap:anywhere;color:#b7c6ff}
.message:empty{display:none}
.message.error{color:#ffacb8}
.generation-progress{display:grid;gap:9px;margin-top:12px;padding:10px 12px;border:1px solid #425272;border-radius:8px;background:#222b43;color:#d1dbff;font-size:12px}
.progress-head{display:flex;align-items:center;gap:8px}
.spinner{width:16px;height:16px;flex:none;border:2px solid #535f80;border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
.generation-progress progress{width:100%;height:9px;accent-color:var(--accent)}
.generation-progress button{justify-self:start}
@keyframes spin{to{transform:rotate(1turn)}}
@media(prefers-reduced-motion:reduce){.spinner{animation:none}}
.result-grid,.history-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:9px}
.result-grid{padding:12px 18px;border-top:1px solid #303542;max-height:360px;overflow:auto}
.result{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:#171c27}
.result:has([aria-pressed=true]){border-color:var(--accent)}
.result img,.preview-surface{background-color:#edf1ff;background-image:conic-gradient(#dce3fa 25%,transparent 0 50%,#dce3fa 0 75%,transparent 0);background-size:16px 16px}
.result img{display:block;width:100%;height:106px;padding:7px;object-fit:contain}
.result a{display:block;text-align:center;padding:7px;font-weight:700;font-size:12px}
.thumbnail{display:block;width:100%;border:0;padding:0;background:none}
.thumbnail:focus-visible{outline-offset:-4px}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.metric{display:grid;gap:6px;padding:15px}
.metric span,.history-item small,.empty{color:var(--muted);font-size:12px}
.metric strong{font-size:25px}
.ledger{padding:0 16px 15px}
.ledger-head{margin:0 -16px 10px;flex-wrap:wrap}
.history-actions,.history-item-head{flex-wrap:wrap}
.history-item{display:grid;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.history-item-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.history-item h3{font-size:14px;margin-bottom:3px}
.history-item small{overflow-wrap:anywhere}
.empty{padding:14px 0}
dialog{width:min(450px,calc(100% - 28px));border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);padding:20px}
dialog::backdrop{background:#090c13c9}
.dialog-head,.dialog-actions{display:flex;justify-content:space-between;align-items:center;gap:10px}
.dialog-head button{border:0;background:none;font-size:24px}
.dialog-actions{justify-content:flex-end;margin-top:12px}
dialog p,dialog small{color:var(--muted);margin:8px 0}
.preview-dialog{width:min(900px,calc(100% - 28px))}
.preview-surface{border-radius:8px;margin-top:10px}
.preview-surface img{display:block;width:100%;height:min(65vh,660px);object-fit:contain;padding:12px}
@media(max-width:850px){
  .top,main{padding-left:16px;padding-right:16px}
  .brand{min-width:auto;padding-right:12px}
  .workspace{gap:12px}
  .settings{padding-inline:16px}
  .settings h2{margin-inline:-16px;padding-inline:16px}
}
@media(max-width:670px){
  .top{gap:8px;flex-wrap:wrap}
  .brand{border:0}
  .top nav{order:3;width:100%}
  .workspace{grid-template-columns:1fr}
  .canvas{height:clamp(265px,62vw,440px)}
  .metrics{gap:6px}
  .metric{padding:9px}
}
@media(max-width:390px){.top,main{padding-inline:10px}.account .balance{padding:6px;font-size:11px}.account .button{padding:7px;font-size:11px}}

#account-form{display:grid;gap:8px;margin:12px 0}
#account-message:empty{display:none}