: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; 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); }
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; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.grid4 { display:grid; grid-template-columns:repeat(4,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; }
.row { display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.row:last-child { margin-bottom:0; }
.row.inline { margin:0; }
.row label { font-size:12px; color:var(--muted); width:74px; flex:none; }
.row.inline label { width:auto; }
input[type=range] { width:100%; accent-color:var(--accent); }
input[type=color] { width:36px; height:26px; border:none; background:none; padding:0; flex:none; }
input[type=text] { width:100%; background:#15161b; border:1px solid var(--line); color:var(--text); border-radius:7px; padding:7px 9px; font-size:12px; }
select { background:#15161b; border:1px solid var(--line); color:var(--text); border-radius:7px; padding:7px 9px; font-size:12px; width:100%; cursor:pointer; }
.row.inline select { width:auto; }
.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; }
.glabel { font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); margin:11px 0 7px; }
.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)}}

/* ---- aggiunte modalità libera (stesse variabili/colori del #1) ---- */
.grid3 button, .grid4 button { flex-direction:column; gap:3px; justify-content:center; align-items:center; text-align:center; padding:10px 4px; min-height:52px; }
.grid3 button small { color:var(--muted); font-size:9.5px; }
.grid3 button { font-family:'Fraunces',serif; font-size:18px; }
.shapes .sh-rect { width:18px; height:14px; background:var(--text); border-radius:2px; }
.shapes .sh-circle { width:16px; height:16px; background:var(--text); border-radius:50%; }
.shapes .sh-tri { width:0; height:0; border-left:9px solid transparent; border-right:9px solid transparent; border-bottom:16px solid var(--text); }
.shapes .sh-line { width:18px; height:0; border-top:3px solid var(--text); border-radius:2px; }
.clipart button { padding:8px; }
.clipart svg { width:22px; height:22px; fill:var(--text); }
.toolbar { display:flex; align-items:center; gap:5px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:5px 7px; }
.toolbar button { width:auto; padding:6px 9px; border-radius:7px; font-size:14px; justify-content:center; }
.toolbar .sep { width:1px; height:18px; background:var(--line); margin:0 2px; }
.seg { display:flex; gap:0; flex:1; }
.seg button { width:auto; flex:1; justify-content:center; border-radius:0; padding:6px; }
.seg button:first-child { border-radius:7px 0 0 7px; }
.seg button:last-child { border-radius:0 7px 7px 0; }
.seg button.on { border-color:var(--accent); color:var(--text); background:var(--panel2); }
.layers { display:flex; flex-direction:column; gap:5px; max-height:200px; overflow-y:auto; }
.layer { position:relative; display:flex; align-items:center; gap:8px; padding:6px 8px; background:var(--panel2); border:1px solid var(--line); border-radius:7px; font-size:12px; cursor:pointer; }
.layer:hover { border-color:var(--accent2); }
.layer.active { border-color:var(--accent); }
.layer .grip { width:11px; flex:none; text-align:center; color:var(--muted); cursor:grab; opacity:.5; font-size:11px; line-height:1; }
.layer:hover .grip { opacity:.9; }
.layer .ico { width:16px; text-align:center; flex:none; color:var(--muted); }
.layer .nm { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.layer .lk { color:var(--muted); font-size:11px; }
.layer.dragging { opacity:.35; }
.layer-placeholder { height:31px; border:1.5px dashed var(--accent2); border-radius:7px; background:rgba(77,141,255,.10); box-sizing:border-box; }