:root {
  --bg:#16171c; --panel:#202229; --panel2:#272a32; --line:#343843;
  --text:#eceef3; --muted:#9298a6; --accent:#ff4d5e; --accent2:#4d8dff; --ok:#5ad17f; --warn:#ffb454;
}
* { box-sizing:border-box; }
html,body { margin:0; height:100%; font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }
.logo { font-family:'Fraunces','Inter',serif; }
.app { display:grid; grid-template-columns:262px 1fr 264px; grid-template-rows:54px 1fr 38px; height:100vh; }
header { grid-column:1/-1; display:flex; align-items:center; gap:14px; padding:0 18px; background:var(--panel); border-bottom:1px solid var(--line); }
.logo { font-weight:800; letter-spacing:.5px; font-size:16px; }
.logo span { color:var(--accent); }
.pill { font-size:11px; color:var(--muted); border:1px solid var(--line); padding:3px 9px; border-radius:99px; }
a.pill.link { text-decoration:none; }
a.pill.link:hover { border-color:var(--accent2); color:var(--text); }
.spacer { flex:1; }
.price { display:flex; flex-direction:column; align-items:flex-end; line-height:1.1; }
.price b { font-size:18px; } .price small { color:var(--muted); font-size:11px; }
aside { background:var(--panel); overflow-y:auto; }
aside.left { border-right:1px solid var(--line); }
aside.right { border-left:1px solid var(--line); }
.section { padding:13px 14px; border-bottom:1px solid var(--line); }
.section h2 { font-size:11px; text-transform:uppercase; letter-spacing:.7px; color:var(--muted); margin:0 0 11px; display:flex; justify-content:space-between; }
.stage { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; overflow:auto; padding:18px;
    background:repeating-conic-gradient(#1c1d23 0% 25%, #191a1f 0% 50%) 50%/22px 22px; }
.canvas-wrap { border-radius:3px; box-shadow:0 18px 60px rgba(0,0,0,.55); }
footer { grid-column:1/-1; display:flex; align-items:center; gap:16px; padding:0 16px; background:var(--panel); border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
button,.btn { background:var(--panel2); color:var(--text); border:1px solid var(--line); border-radius:9px; padding:9px 11px; font-size:12.5px; cursor:pointer; width:100%; text-align:left; display:flex; align-items:center; gap:8px; transition:.12s; }
button:hover { border-color:var(--accent2); }
button.primary { background:linear-gradient(135deg,#ff4d5e,#ff7a52); border:none; color:#fff; justify-content:center; font-weight:700; font-size:14px; padding:12px; box-shadow:0 6px 18px rgba(255,77,94,.35); }
button.ghost { justify-content:center; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tray { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.thumb { position:relative; aspect-ratio:1; border-radius:6px; overflow:hidden; border:2px solid transparent; cursor:grab; background:#000; }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.thumb.used::after { content:'✓'; position:absolute; top:2px; right:3px; width:15px; height:15px; background:var(--ok); color:#06210f; font-size:10px; font-weight:800; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.thumb.used img { opacity:.55; }
.row { display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.row:last-child { margin-bottom:0; }
.row label { font-size:12px; color:var(--muted); width:74px; flex:none; }
input[type=range] { width:100%; accent-color:var(--accent); }
input[type=color] { width:36px; height:26px; border:none; background:none; padding:0; }
input[type=text] { width:100%; background:#15161b; border:1px solid var(--line); color:var(--text); border-radius:7px; padding:7px 9px; font-size:12px; }
.pagenav { display:flex; align-items:center; gap:14px; color:var(--muted); font-size:13px; }
.pagenav button { width:auto; padding:7px 12px; border-radius:8px; }
.dots { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; max-width:680px; }
.dot { width:30px; height:22px; border-radius:4px; border:1px solid var(--line); background:#15161b; color:var(--muted); font-size:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.dot.active { border-color:var(--accent); color:var(--text); background:var(--panel2); }
.hint { font-size:11px; color:var(--muted); line-height:1.55; }
.kv { display:flex; justify-content:space-between; font-size:12px; margin:5px 0; }
.kv span:first-child { color:var(--muted); }
.swatches { display:flex; flex-wrap:wrap; gap:6px; }
.sw { width:24px; height:24px; border-radius:5px; border:1px solid var(--line); cursor:pointer; }
.dpi-ok{color:var(--ok)} .dpi-warn{color:var(--warn)} .dpi-bad{color:var(--accent)}
#overlay { position:fixed; inset:0; background:rgba(10,11,14,.82); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; z-index:50; color:var(--muted); }
.spin { width:38px; height:38px; border:3px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:r 1s linear infinite; } @keyframes r{to{transform:rotate(360deg)}}