:root{--bg: #0f0f13;--surface: #1a1a24;--surface2: #222233;--border: rgba(255, 255, 255, .08);--text: #e8e8f0;--text-dim: rgba(255, 255, 255, .5);--accent: #6c5ce7;--accent-glow: rgba(108, 92, 231, .3);--danger: #ff4757;--success: #2ed573;color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden;background:var(--bg);color:var(--text)}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.header{padding:.75rem 1.5rem;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;display:flex;align-items:baseline;gap:1rem}.title{font-size:1.25rem;font-weight:700;background:linear-gradient(135deg,#a29bfe,#6c5ce7,#fd79a8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em}.subtitle{font-size:.8rem;color:var(--text-dim)}.workspace{display:flex;flex:1;overflow:hidden}.canvas-container{flex:1;position:relative;cursor:crosshair;touch-action:none;background:#1e1e2e;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.03) 1px,transparent 0);background-size:24px 24px;overflow:hidden}.canvas-container canvas{display:block;width:100%;height:100%}.toolbar{width:240px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);overflow-y:auto;overflow-x:hidden;padding:.75rem;display:flex;flex-direction:column;gap:.75rem}.toolbar::-webkit-scrollbar{width:4px}.toolbar::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.toolbar-section{display:flex;flex-direction:column;gap:.5rem}.toolbar-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-dim);font-weight:600;display:flex;justify-content:space-between;align-items:center}.size-value{font-family:ui-monospace,monospace;font-size:.7rem;color:var(--accent)}.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.tool-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text);cursor:pointer;transition:all .15s ease;font-size:.6rem}.tool-btn:hover{background:var(--surface2);border-color:#ffffff26}.tool-btn.active{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow)}.tool-icon{font-size:1.1rem;line-height:1}.tool-name{font-size:.55rem;letter-spacing:.04em}.stamp-grid{display:flex;gap:4px;flex-wrap:wrap}.stamp-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;border:1px solid var(--border);border-radius:8px;background:transparent;cursor:pointer;transition:all .15s ease}.stamp-btn:hover{background:var(--surface2)}.stamp-btn.active{background:var(--accent);border-color:var(--accent);box-shadow:0 0 8px var(--accent-glow)}.color-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:3px}.color-btn{width:100%;aspect-ratio:1;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .1s ease}.color-btn:hover{transform:scale(1.15);z-index:1}.color-btn.active{border-color:#fff;box-shadow:0 0 8px #ffffff4d;transform:scale(1.1)}.color-custom{display:flex;align-items:center;gap:8px}.color-picker{width:32px;height:32px;border:none;border-radius:6px;cursor:pointer;background:none;padding:0}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:1px solid var(--border);border-radius:6px}.color-hex{font-family:ui-monospace,monospace;font-size:.7rem;color:var(--text-dim);text-transform:uppercase}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:var(--surface2);outline:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--text);transition:box-shadow .15s}.slider::-webkit-slider-thumb:hover{box-shadow:0 0 8px var(--accent-glow)}.slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--text)}.size-preview{display:flex;justify-content:center;padding:8px 0}.size-dot{transition:all .1s ease}.actions{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:auto;padding-top:.5rem}.action-btn{display:flex;align-items:center;justify-content:center;gap:4px;padding:8px 6px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text);cursor:pointer;font-size:.7rem;transition:all .15s ease}.action-btn:hover:not(:disabled){background:var(--surface2);border-color:#ffffff26}.action-btn:disabled{opacity:.3;cursor:not-allowed}.action-btn.save{background:var(--accent);border-color:var(--accent)}.action-btn.save:hover{box-shadow:0 0 12px var(--accent-glow)}@media(max-width:700px){.workspace{flex-direction:column-reverse}.toolbar{width:100%;flex-direction:row;flex-wrap:wrap;gap:.5rem;padding:.5rem;border-right:none;border-top:1px solid var(--border);max-height:200px;overflow-y:auto}.toolbar-section{flex:1;min-width:100px}.actions{grid-template-columns:repeat(4,1fr)}.tool-grid{grid-template-columns:repeat(6,1fr)}.header{padding:.5rem 1rem}}