:root{--bg-base: #fafaf9;--bg-surface: #ffffff;--bg-overlay: #f5f5f4;--bg-card: rgba(255, 255, 255, .9);--accent-primary: #6366f1;--accent-secondary: #818cf8;--accent-glow: rgba(99, 102, 241, .2);--text-primary: #1c1917;--text-secondary: #57534e;--text-muted: #a8a29e;--border-subtle: rgba(0, 0, 0, .08);--border-medium: rgba(0, 0, 0, .12);--danger: #dc2626;--danger-bg: rgba(220, 38, 38, .1);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);--shadow-md: 0 4px 12px rgba(0, 0, 0, .1);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--transition-fast: .15s ease;--transition-normal: .25s ease;--circle-size: 80px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-base);color:var(--text-primary);min-height:100vh;min-height:100dvh;display:flex;justify-content:center;align-items:center;padding:20px;overflow:hidden;touch-action:manipulation}.app{width:fit-content;max-width:100%;display:flex;flex-direction:column;gap:16px}.header{text-align:center}.logo{display:flex;align-items:center;justify-content:center;gap:8px}.logo .material-symbols-rounded{font-size:28px;color:var(--accent-primary)}.header h1{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--text-primary)}.canvas-container{display:flex;flex-direction:column;align-items:center;width:100%}.canvas-header{width:100%;display:flex;justify-content:flex-end;margin-bottom:8px}.circle-counter{font-size:.8rem;font-weight:600;color:var(--text-muted);min-width:50px;text-align:right}.circle-counter.limit-reached{color:var(--danger)}.canvas-wrapper{position:relative;width:350px;height:350px;background:var(--bg-surface);overflow:hidden;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);flex-shrink:0}.canvas{width:100%;height:100%;position:absolute;top:0;left:0;cursor:crosshair;overflow:visible;touch-action:none;isolation:isolate;z-index:1}.canvas.select-mode{cursor:pointer}.canvas.limit-reached{cursor:not-allowed}.border-overlay{position:absolute;top:0;left:0;right:0;bottom:0;border:2px solid var(--border-medium);border-radius:var(--radius-xl);pointer-events:none;z-index:1000}.toolbar{background:var(--bg-card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:var(--shadow-sm)}.mode-toggle{display:flex;background:var(--bg-overlay);border-radius:var(--radius-md);padding:3px}.mode-btn{display:flex;align-items:center;justify-content:center;padding:8px 12px;border:none;border-radius:var(--radius-sm);cursor:pointer;background:transparent;color:var(--text-muted);transition:var(--transition-fast);-webkit-tap-highlight-color:transparent}.mode-btn .material-symbols-rounded{font-size:20px}.mode-btn:hover{color:var(--text-secondary)}.mode-btn.active{background:var(--bg-surface);color:var(--accent-primary);box-shadow:var(--shadow-sm)}.color-section{display:flex;align-items:center;gap:8px;flex:1;justify-content:center}.color-picker-wrapper{width:32px;height:32px;flex-shrink:0}.color-picker-wrapper input[type=color]{width:100%;height:100%;border:none;border-radius:var(--radius-sm);cursor:pointer;background:transparent;padding:0}.color-picker-wrapper input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color-picker-wrapper input[type=color]::-webkit-color-swatch{border-radius:var(--radius-sm);border:2px solid var(--border-medium)}.preset-colors{display:flex;gap:6px;flex-wrap:wrap}.color-btn{width:24px;height:24px;border:2px solid transparent;border-radius:50%;cursor:pointer;transition:var(--transition-fast);-webkit-tap-highlight-color:transparent;box-shadow:var(--shadow-sm)}.color-btn:hover{transform:scale(1.1)}.color-btn:active{transform:scale(.95)}.color-btn.active{border-color:var(--text-primary);transform:scale(1.15)}.actions{display:flex;gap:4px}.btn{display:flex;align-items:center;justify-content:center;padding:8px;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-fast);-webkit-tap-highlight-color:transparent}.btn .material-symbols-rounded{font-size:20px}.icon-dashed-circle{width:20px;height:20px;border:2px dashed currentColor;border-radius:50%;display:inline-block;box-sizing:border-box}.btn-ghost.btn-delete:not(:disabled){color:var(--danger);opacity:.8}.btn-ghost.btn-delete:not(:disabled):hover{background:var(--danger-bg);opacity:1}.btn:disabled{opacity:.2;pointer-events:none;cursor:not-allowed}.btn-ghost{background:transparent;color:var(--text-muted)}.btn-ghost:hover{background:var(--bg-overlay);color:var(--text-secondary)}.btn-ghost:active{transform:scale(.95)}.circle{position:absolute;width:var(--circle-size);height:var(--circle-size);border-radius:50%;cursor:pointer;transition:box-shadow var(--transition-fast);transform:translate(-50%,-50%);z-index:1;-webkit-tap-highlight-color:transparent;box-shadow:var(--shadow-md)}.circle:hover{box-shadow:var(--shadow-lg)}.circle.selected{box-shadow:0 0 0 3px #fff,0 0 0 5px #00000026,var(--shadow-lg);z-index:10;cursor:grab}.circle.dragging{opacity:.9;cursor:grabbing;z-index:50;transform:translate(-50%,-50%) scale(1.05)}.canvas.place-mode .circle{pointer-events:none}@media (max-width: 440px){body{padding:16px}.app{gap:12px}.header h1{font-size:1.25rem}.logo .material-symbols-rounded{font-size:24px}.toolbar{padding:10px;gap:8px}.mode-btn{padding:6px 10px}.color-btn{width:22px;height:22px}.color-picker-wrapper{width:28px;height:28px}.circle-counter{top:8px;right:8px;padding:4px 8px;font-size:.7rem}}