:root{color-scheme:dark;--bg: #17141c;--panel: #1f1b26;--border: #322c3d;--text: #ece7f3;--text-dim: #9c93ad;--accent: #a78bfa;--danger: #f87171}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px}#app{display:grid;grid-template-columns:240px 1fr 280px;grid-template-rows:auto 1fr;grid-template-areas:"toolbar toolbar toolbar" "palette canvas properties";height:100vh}.toolbar{grid-area:toolbar;display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem;border-bottom:1px solid var(--border);background:var(--panel)}.toolbar h1{display:flex;align-items:center;gap:.4rem;font-size:1rem;margin:0 .5rem 0 0;color:var(--accent);letter-spacing:.03em}.toolbar h1 img{border-radius:5px}.status{margin-left:auto;color:var(--text-dim);font-size:.8rem}.bg-picker{display:flex;align-items:center;gap:.4rem;color:var(--text-dim)}#input-label-text{width:9rem}#input-label-size{width:3.5rem}button{background:#2a2434;color:var(--text);border:1px solid var(--border);border-radius:6px;padding:.4rem .7rem;font-size:.85rem;cursor:pointer}button:hover{border-color:var(--accent)}button.danger{color:var(--danger)}input[type=color]{width:28px;height:24px;padding:0;border:1px solid var(--border);border-radius:4px;background:none}input[type=search],input[type=number]{background:#14111a;color:var(--text);border:1px solid var(--border);border-radius:6px;padding:.35rem .5rem}.palette{grid-area:palette;border-right:1px solid var(--border);padding:.75rem;overflow-y:auto;display:flex;flex-direction:column;gap:.6rem}#icon-search,#btn-import-icons{width:100%}.icon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.icon-swatch{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#201b29;border:1px solid var(--border);border-radius:6px;cursor:grab;color:var(--text)}.icon-swatch:hover{border-color:var(--accent)}.icon-swatch svg{width:60%;height:60%;stroke:currentColor;fill:none}.canvas-area{grid-area:canvas;display:flex;align-items:center;justify-content:center;overflow:auto;padding:1rem}.canvas-frame{height:100%;aspect-ratio:57 / 100;max-width:100%;box-shadow:0 10px 40px #00000080;border-radius:8px;overflow:hidden}#card-canvas{width:100%;height:100%;display:block}.placed-icon{cursor:grab}.placed-icon:active{cursor:grabbing}.selection-halo{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:6 5;vector-effect:non-scaling-stroke}.properties{grid-area:properties;border-left:1px solid var(--border);padding:.75rem;overflow-y:auto;display:flex;flex-direction:column;gap:1rem}.panel-section h2{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-dim);margin:0 0 .5rem}.icon-name{margin:0 0 .75rem;font-size:.95rem;color:var(--text)}.panel-section label{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;color:var(--text-dim)}.panel-section label input[type=range]{flex:1}.panel-section label input[type=number]{width:4.5rem}.panel-section label input[type=text]{width:5rem;font-family:monospace}.position-row{display:flex;gap:.75rem}.position-row label{flex:1}.position-row input[type=number]{width:100%}.button-row{display:flex;gap:.4rem;margin-bottom:.5rem}.button-row button{flex:1}#btn-delete-icon{width:100%}.layer-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.layer-row{display:flex;align-items:center;gap:.4rem;padding:.3rem .4rem;border-radius:4px;cursor:pointer;color:var(--text-dim)}.layer-row.selected{background:#2a2434;color:var(--text)}.layer-row span.layer-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer-row button{padding:.1rem .35rem;font-size:.7rem}