*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--clr-bg: #0f1117;--clr-surface: #1a1d27;--clr-surface-alt: #22262f;--clr-border: #2e3340;--clr-text: #e4e6eb;--clr-text-muted: #8b8fa3;--clr-accent: #6c5ce7;--clr-accent-hover: #7e70f0;--clr-danger: #e74c3c;--radius: 10px;--transition: .15s ease;font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--clr-text);background:var(--clr-bg)}body{min-height:100vh}.app{max-width:1280px;margin:0 auto;padding:2rem 1.5rem}.app__header{text-align:center;margin-bottom:2rem}.app__title{font-size:1.75rem;font-weight:700;letter-spacing:-.02em}.app__subtitle{color:var(--clr-text-muted);margin-top:.25rem;font-size:.95rem}.app__main{display:grid;grid-template-columns:340px 1fr;gap:2rem;align-items:start}.app__sidebar{display:flex;flex-direction:column;gap:1rem}.app__preview{display:flex;flex-direction:column;gap:1.5rem}.dropzone{border:2px dashed var(--clr-border);border-radius:var(--radius);padding:2rem 1.5rem;text-align:center;cursor:pointer;transition:border-color var(--transition),background var(--transition)}.dropzone--active,.dropzone:hover{border-color:var(--clr-accent);background:#6c5ce70f}.dropzone__text{font-size:.95rem}.dropzone__browse{color:var(--clr-accent);cursor:pointer;text-decoration:underline;font-weight:600}.dropzone__hint{font-size:.8rem;color:var(--clr-text-muted);margin-top:.35rem}.dropzone__loading{color:var(--clr-accent);font-weight:600}.image-list__title{font-size:.9rem;font-weight:600;color:var(--clr-text-muted);margin-bottom:.5rem}.image-list__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:.5rem}.image-list__item{position:relative;background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:8px;padding:.5rem;display:flex;flex-direction:column;align-items:center;gap:.25rem}.image-list__thumb{width:40px;height:40px;object-fit:contain}.image-list__name{font-size:.65rem;color:var(--clr-text-muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.image-list__remove{position:absolute;top:2px;right:4px;background:none;border:none;color:var(--clr-danger);font-size:1rem;cursor:pointer;line-height:1;opacity:0;transition:opacity var(--transition)}.image-list__item:hover .image-list__remove{opacity:1}.btn--clear{align-self:flex-start;background:none;border:1px solid var(--clr-danger);color:var(--clr-danger);padding:.35rem .75rem;border-radius:6px;font-size:.8rem;cursor:pointer;transition:background var(--transition),color var(--transition)}.btn--clear:hover{background:var(--clr-danger);color:#fff}.controls{border:1px solid var(--clr-border);border-radius:var(--radius);padding:1rem;background:var(--clr-surface)}.controls__legend{font-size:.85rem;font-weight:600;color:var(--clr-text-muted);padding:0 .25rem}.controls__row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.5rem}.controls__label{display:flex;flex-direction:column;font-size:.8rem;color:var(--clr-text-muted);gap:.25rem;flex:1 1 100px}.controls__select,.controls__input{background:var(--clr-surface-alt);border:1px solid var(--clr-border);color:var(--clr-text);padding:.4rem .5rem;border-radius:6px;font-size:.85rem}.controls__input{width:70px}.export-bar{display:flex;gap:.5rem;flex-wrap:wrap}.export-bar__btn{flex:1;padding:.55rem 1rem;border:1px solid var(--clr-border);border-radius:8px;background:var(--clr-surface);color:var(--clr-text);font-size:.85rem;font-weight:600;cursor:pointer;transition:background var(--transition),border-color var(--transition)}.export-bar__btn:hover:not(:disabled){background:var(--clr-surface-alt);border-color:var(--clr-accent)}.export-bar__btn--primary{background:var(--clr-accent);border-color:var(--clr-accent);color:#fff}.export-bar__btn--primary:hover:not(:disabled){background:var(--clr-accent-hover)}.export-bar__btn:disabled{opacity:.4;cursor:not-allowed}.preview__title{font-size:1rem;font-weight:600;margin-bottom:.25rem}.preview__dims{font-size:.8rem;color:var(--clr-text-muted);margin-bottom:.5rem}.preview__canvas-wrapper{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius);padding:1rem;overflow:auto;max-height:500px}.preview__canvas{image-rendering:pixelated;max-width:100%}.preview__empty{text-align:center;color:var(--clr-text-muted);padding:3rem 0;font-size:.9rem}.mapping__title{font-size:1rem;font-weight:600;margin-bottom:.5rem}.mapping__code{background:var(--clr-surface);border:1px solid var(--clr-border);border-radius:var(--radius);padding:1rem;font-family:JetBrains Mono,Fira Code,monospace;font-size:.78rem;color:var(--clr-text-muted);overflow:auto;max-height:350px;white-space:pre}@media (max-width: 768px){.app__main{grid-template-columns:1fr}}