*{box-sizing:border-box}:root{--bg: #0d0d0f;--panel: #18181b;--panel-border: rgba(255, 255, 255, .08);--surface: #222226;--surface-hover: #2b2b30;--surface-active: #35353c;--text: #ededef;--text-dim: #96969e;--accent: #6d5efc;--accent-hover: #8577ff;--accent-soft: rgba(109, 94, 252, .18);--radius-sm: 7px;--radius-md: 12px}html,body{margin:0;height:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);overflow:hidden}#app{display:flex;flex-direction:column;height:100vh}#titlebar{display:flex;align-items:center;justify-content:space-between;background:var(--panel);border-bottom:1px solid var(--panel-border);padding:10px 16px;flex:0 0 auto}#app-title{display:flex;align-items:center;font-weight:600;letter-spacing:.2px}#app-title:before{content:"";display:inline-block;width:10px;height:10px;margin-right:10px;border-radius:3px;background:var(--accent);box-shadow:0 0 12px var(--accent)}#file-actions button{margin-left:8px}button{font:inherit;cursor:pointer;background:var(--surface);color:var(--text);border:1px solid var(--panel-border);border-radius:var(--radius-sm);padding:6px 12px;transition:background-color .15s ease,border-color .15s ease}button:hover{background:var(--surface-hover);border-color:#ffffff26}button:active{background:var(--surface-active)}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#toolbar{display:flex;align-items:center;gap:16px;background:var(--panel);border-bottom:1px solid var(--panel-border);padding:8px 16px;flex:0 0 auto;flex-wrap:wrap}.tool-group{display:flex;align-items:center;gap:5px;padding-right:14px;border-right:1px solid var(--panel-border)}.tool-group:last-child{border-right:none}.tool-btn{font-size:16px;width:36px;height:32px;padding:0;display:flex;align-items:center;justify-content:center}.tool-btn.active{background:var(--accent-soft);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.opt{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-dim)}.opt input[type=range]{width:90px;accent-color:var(--accent)}#colorbar{display:flex;align-items:center;gap:20px;background:var(--panel);border-bottom:1px solid var(--panel-border);padding:10px 16px;flex:0 0 auto}#swatches{display:grid;grid-template-columns:repeat(14,20px);grid-auto-rows:20px;gap:4px}.swatch{width:20px;height:20px;border:1px solid var(--panel-border);border-radius:4px;cursor:pointer;transition:outline-color .1s ease}.swatch:hover{outline:2px solid var(--accent);outline-offset:1px}#active-colors{display:flex;gap:12px}.color-slot{display:flex;flex-direction:column;align-items:center;font-size:10px;color:var(--text-dim);gap:4px}.color-slot input[type=color]{width:40px;height:26px;border:1px solid var(--panel-border);border-radius:var(--radius-sm);padding:0;cursor:pointer;background:var(--surface)}#canvas-wrap{flex:1 1 auto;overflow:auto;display:flex;align-items:safe center;justify-content:safe center;background:radial-gradient(circle at 50% 0%,#1a1a1e,var(--bg) 70%);padding:20px;position:relative}#canvas-wrap::-webkit-scrollbar{width:10px;height:10px}#canvas-wrap::-webkit-scrollbar-track{background:transparent}#canvas-wrap::-webkit-scrollbar-thumb{background:var(--surface-hover);border-radius:10px}#canvas-stage{position:relative;flex:none}#canvas,#overlay{display:block;cursor:crosshair}#canvas{box-shadow:0 12px 40px #0009,0 0 0 1px #ffffff0f;background:#fff}#overlay{position:absolute;top:0;left:0}#resize-preview{position:absolute;border:2px dashed var(--accent);background:var(--accent-soft);pointer-events:none;display:none;z-index:5}.resize-handle{position:absolute;background:#6d5efc73;z-index:10;transition:background-color .15s ease}.resize-handle:hover{background:var(--accent)}#handle-e{width:6px;margin-left:-3px;cursor:ew-resize}#handle-s{height:6px;margin-top:-3px;cursor:ns-resize}#handle-se{width:14px;height:14px;margin-left:-7px;margin-top:-7px;border-radius:3px;cursor:nwse-resize;background:var(--accent)}#canvas-size-group input[type=number]{width:64px;background:var(--surface);color:var(--text);border:1px solid var(--panel-border);border-radius:var(--radius-sm);padding:4px 6px}#statusbar{flex:0 0 auto;display:flex;gap:24px;background:var(--panel);border-top:1px solid var(--panel-border);padding:6px 16px;font-size:12px;color:var(--text-dim)}