*{box-sizing:border-box;margin:0;padding:0}html,body{color:#e6e6e6;-webkit-user-select:none;user-select:none;background:#1e2126;width:100%;height:100%;font-family:Segoe UI,Microsoft YaHei,sans-serif;overflow:hidden}#app{grid-template:"topbar topbar"56px"sidebar canvas"1fr/220px 1fr;height:100vh;display:grid}#topbar{background:#2a2e35;border-bottom:1px solid #3a3f47;grid-area:topbar;justify-content:space-between;align-items:center;padding:0 16px;display:flex}#topbar h1{font-size:18px;font-weight:600}.controls{align-items:center;gap:8px;display:flex}.controls label{color:#aab2bd;font-size:13px}.controls select{color:#e6e6e6;background:#3a3f47;border:1px solid #4a5058;border-radius:6px;padding:5px 8px;font-size:13px}.controls button{color:#e6e6e6;cursor:pointer;background:#3a3f47;border:1px solid #4a5058;border-radius:6px;padding:6px 12px;font-size:13px;transition:background .15s}.controls button:hover{background:#4a5058}.controls button.danger:hover{background:#a03a3a;border-color:#c04a4a}#sidebar{background:#262a30;border-right:1px solid #3a3f47;flex-direction:column;grid-area:sidebar;gap:12px;padding:12px;display:flex;overflow-y:auto}.tools{gap:6px;display:flex}.tool{color:#e6e6e6;cursor:pointer;background:#3a3f47;border:1px solid #4a5058;border-radius:6px;flex:1;padding:8px 4px;font-size:12px;transition:background .15s}.tool:hover{background:#4a5058}.tool.active{color:#fff;background:#5b8def;border-color:#5b8def}#palette{grid-template-columns:repeat(5,1fr);gap:6px;display:grid}.swatch{aspect-ratio:1;cursor:pointer;border:2px solid #ffffff26;border-radius:6px;transition:transform .1s,border-color .1s}.swatch:hover{transform:scale(1.12)}.swatch.selected{border-color:#fff;box-shadow:0 0 0 2px #5b8def}#status{color:#aab2bd;border-top:1px solid #3a3f47;flex-direction:column;gap:6px;margin-top:auto;padding-top:10px;font-size:12px;display:flex}#status .hint{color:#6b7280;line-height:1.6}#canvas-container{cursor:none;grid-area:canvas;position:relative;overflow:hidden}.custom-size input{color:#e6e6e6;background:#3a3f47;border:1px solid #4a5058;border-radius:6px;width:52px;padding:4px 6px;font-size:13px}.custom-size button{color:#fff;cursor:pointer;background:#5b8def;border:none;border-radius:6px;padding:5px 10px;font-size:13px}.custom-size button:hover{background:#4a7bd8}#canvas-container canvas{display:block}#toast{color:#fff;opacity:0;pointer-events:none;z-index:100;background:#000000bf;border-radius:8px;padding:10px 20px;font-size:14px;transition:opacity .3s;position:fixed;bottom:32px;left:50%;transform:translate(-50%)}#toast.show{opacity:1}