:root{--bg: #14141c;--bg-panel: #1e1e2a;--bg-raised: #262636;--border: #36364a;--text: #f0f0f5;--text-dim: #a8a8bd;--accent: #4da3ff;--accent-strong: #2b83e6;--danger: #e65a5a;--focus: #8fc4ff;--radius: 10px;--topbar-h: 56px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.app{display:flex;flex-direction:column;height:100dvh}.app__main{flex:1;display:grid;grid-template-columns:auto 1fr 300px;min-height:0}.app__stage{min-width:0;min-height:0;display:flex}.app__footer{padding:6px 16px;text-align:center;border-top:1px solid var(--border);background:var(--bg-panel);font-size:12px}.privacy-note{color:var(--text-dim);margin:0}.topbar{height:var(--topbar-h);display:flex;align-items:center;gap:16px;padding:0 12px;background:var(--bg-panel);border-bottom:1px solid var(--border);flex-wrap:wrap}.topbar__brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px}.topbar__logo{color:var(--accent);font-size:20px}.topbar__actions{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}.button{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-raised);color:var(--text);font-size:13px;cursor:pointer;transition:background .15s,border-color .15s}.button:hover:not(:disabled){background:#30304a;border-color:#4a4a66}.button:disabled{opacity:.45;cursor:not-allowed}.button--primary{background:var(--accent-strong);border-color:var(--accent-strong)}.button--primary:hover:not(:disabled){background:#3d94f0;border-color:#3d94f0}.button--accent{background:#2f9e63;border-color:#2f9e63}.button--accent:hover:not(:disabled){background:#3ab573;border-color:#3ab573}.button--active{border-color:var(--accent);background:#4da3ff2e}.button--danger:hover:not(:disabled){background:#e65a5a33;border-color:var(--danger)}.button--toggle{min-width:40px;justify-content:center}.icon-button{border:none;background:transparent;color:var(--text-dim);cursor:pointer;font-size:14px;padding:2px 6px;border-radius:6px}.icon-button:hover:not(:disabled){color:var(--text);background:var(--bg-raised)}.icon-button:disabled{opacity:.3;cursor:default}.button-row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}.toolbar{display:flex;flex-direction:column;gap:4px;padding:8px 6px;background:var(--bg-panel);border-right:1px solid var(--border)}.toolbar__button{display:flex;flex-direction:column;align-items:center;gap:2px;width:64px;padding:10px 4px;border:1px solid transparent;border-radius:var(--radius);background:transparent;color:var(--text-dim);font-size:11px;cursor:pointer}.toolbar__button:hover{background:var(--bg-raised);color:var(--text)}.toolbar__button--active{background:#4da3ff26;border-color:var(--accent);color:var(--text)}.toolbar__icon{font-size:18px;line-height:1}.stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(circle at 50% 40%,#1b1b28 0%,var(--bg) 75%)}.stage__canvas,.stage__overlay{position:absolute;border-radius:4px}.stage__canvas{box-shadow:0 8px 40px #00000080}.sidepanel{background:var(--bg-panel);border-left:1px solid var(--border);overflow-y:auto;padding:16px 14px 80px}.sidepanel__title{margin:0 0 12px;font-size:15px}.panel__section{display:flex;flex-direction:column;gap:10px}.panel__heading{margin:14px 0 2px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim)}.panel__hint{margin:4px 0;font-size:12px;color:var(--text-dim)}.panel__status{margin:4px 0;font-size:12px;color:var(--text)}.panel__fullwidth{width:100%;justify-content:center}.slider-field{display:flex;flex-direction:column;gap:2px}.slider-field__head{display:flex;align-items:center;gap:8px}.slider-field__label{flex:1;font-size:13px}.slider-field__value{font-variant-numeric:tabular-nums;color:var(--text-dim);font-size:12px;min-width:48px;text-align:right}.slider-field input[type=range]{width:100%;accent-color:var(--accent);height:24px;cursor:pointer}.aspect-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.chip{padding:7px 10px;border:1px solid var(--border);border-radius:999px;background:var(--bg-raised);color:var(--text);font-size:12px;cursor:pointer}.chip:hover:not(:disabled){border-color:var(--accent)}.chip--active{background:#4da3ff33;border-color:var(--accent)}.chip:disabled{opacity:.4;cursor:not-allowed}.filter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.filter-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;border:2px solid transparent;border-radius:var(--radius);background:var(--bg-raised);cursor:pointer;color:var(--text)}.filter-card--active{border-color:var(--accent)}.filter-card__thumb{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;background:#101018}.filter-card__thumb--loading{display:block}.filter-card__name{font-size:11px}.text-input,.select{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-raised);color:var(--text);font-size:13px;font-family:inherit}.text-input:focus,.select:focus{border-color:var(--accent);outline:none}.field-label{font-size:13px;margin-bottom:-6px}.checkbox-field{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}.checkbox-field input{accent-color:var(--accent);width:16px;height:16px}.color-field{display:flex;align-items:center;justify-content:space-between;gap:8px}.color-field__controls{display:flex;align-items:center;gap:8px}.color-field input[type=color]{width:40px;height:28px;border:1px solid var(--border);border-radius:6px;background:transparent;padding:1px;cursor:pointer}.color-field__hex{font-size:12px;color:var(--text-dim);font-variant-numeric:tabular-nums}.text-layer-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:160px;overflow-y:auto}.text-layer-item{width:100%;display:flex;justify-content:space-between;gap:8px;padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-raised);color:var(--text);cursor:pointer;font-size:12px}.text-layer-item--active{border-color:var(--accent);background:#4da3ff26}.text-layer-item__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-layer-item__meta{color:var(--text-dim);flex-shrink:0}.upload-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:24px}.dropzone{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(560px,92vw);padding:56px 32px;border:2px dashed var(--border);border-radius:20px;background:var(--bg-panel);color:var(--text);cursor:pointer;text-align:center;transition:border-color .15s,background .15s}.dropzone:hover,.dropzone--over{border-color:var(--accent);background:#4da3ff0f}.dropzone__icon{font-size:44px}.dropzone__title{font-size:17px;font-weight:600}.dropzone__hint,.dropzone__formats{font-size:13px;color:var(--text-dim)}.drop-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a0a14bf;display:flex;align-items:center;justify-content:center;z-index:60;pointer-events:none}.drop-overlay__box{border:3px dashed var(--accent);border-radius:20px;padding:48px 64px;font-size:20px;background:var(--bg-panel)}.dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#080810b3;display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}.dialog{width:min(640px,96vw);max-height:90dvh;overflow-y:auto;background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;padding:20px 22px}.dialog__title{margin:0 0 12px;font-size:18px}.dialog__grid{display:flex;flex-direction:column;gap:14px}.dialog__footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;flex-wrap:wrap}.dialog__size-estimate{font-size:13px;color:var(--text-dim)}.size-inputs{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:8px}.size-inputs label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--text-dim)}.size-inputs input[type=number]{width:110px;padding:7px 9px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-raised);color:var(--text)}.busy-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#08081099;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:70;font-size:15px}.busy-overlay__spinner{width:42px;height:42px;border:4px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toasts{position:fixed;bottom:48px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:8px;z-index:80;width:min(480px,92vw)}.toast{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:var(--radius);background:var(--bg-raised);border:1px solid var(--border);box-shadow:0 6px 24px #0006;font-size:13px}.toast--error{border-color:var(--danger)}.toast--warning{border-color:#d8a13c}.toast__close{border:none;background:transparent;color:var(--text-dim);font-size:18px;cursor:pointer;padding:0 4px}@media(max-width:900px){.app__main{grid-template-columns:1fr;grid-template-rows:1fr auto auto}.app__stage{grid-row:1;min-height:0}.toolbar{grid-row:2;flex-direction:row;overflow-x:auto;border-right:none;border-top:1px solid var(--border);padding:6px}.toolbar__button{width:auto;min-width:64px;flex-direction:row;gap:6px;padding:8px 10px}.sidepanel{grid-row:3;border-left:none;border-top:1px solid var(--border);max-height:34dvh;padding-bottom:24px}.topbar{height:auto;padding:8px}.topbar__actions{margin-left:0;width:100%}.topbar__actions .button{flex:1 1 auto;justify-content:center;padding:10px 8px}.topbar__name{display:none}}