@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root { --ease-spring: cubic-bezier(0.25, 1, 0.5, 1); --bg-color: #F5F5F7; }
.dark { --bg-color: #121214; }

body { font-family: 'Inter', sans-serif; overflow: hidden; margin: 0; user-select: none; background: var(--bg-color); transition: background-color 0.4s var(--ease-spring), color 0.4s var(--ease-spring); }
.dark body { color: white; }

.glass { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); background: rgba(255,255,255,0.75); border: 1px solid rgba(0,0,0,0.05); }
.dark .glass { background: rgba(44,44,46,0.75); border: 1px solid rgba(255,255,255,0.05); }

#sidebar { transition: width 0.4s var(--ease-spring); }
.sidebar-collapsed { width: 88px !important; }
.sidebar-collapsed .nav-text, .sidebar-collapsed .logo-text { max-width: 0; opacity: 0; margin-left: 0; }
.sidebar-collapsed .logo-btn { margin: 0 auto; }
.nav-btn { display: flex; align-items: center; padding: 12px; border-radius: 12px; overflow: hidden; transition: background-color 0.2s; }
.nav-icon-wrap { width: 28px; display: flex; justify-content: center; flex-shrink: 0; font-size: 1.1rem; }
.nav-text { transition: all 0.4s var(--ease-spring); overflow: hidden; max-width: 150px; margin-left: 12px; white-space: nowrap; }
.logo-text { transition: all 0.4s var(--ease-spring); overflow: hidden; max-width: 150px; white-space: nowrap; }

.logo-btn svg { transition: transform 0.4s var(--ease-spring); }
.logo-btn:hover svg { transform: scale(1.08); }
.logo-btn:active .eye-r { transform: scaleY(0.1); transform-origin: center; transition: transform 0.1s; }
.logo-path { fill: #000; stroke: #E5E5E5; transition: fill 0.4s, stroke 0.4s; }
.dark .logo-path { fill: #FFF; stroke: #333; }
.logo-eye { fill: #FFF; transition: fill 0.4s; }
.dark .logo-eye { fill: #000; }

canvas { display: block; touch-action: none; outline: none; }
.cursor-brush { cursor: crosshair; }
.cursor-eraser { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 20H7L3 16C2.5 15.5 2.5 14.5 3 14L13 4C13.5 3.5 14.5 3.5 15 4L20 9C20.5 9.5 20.5 10.5 20 11L11 20"/></svg>') 0 24, auto; }

::-webkit-scrollbar { display: none; }
.spinner { width: 40px; height: 40px; border: 4px solid rgba(0,102,255,0.2); border-top-color: #0066FF; border-radius: 50%; animation: spin 1s linear infinite; }
.mini-spinner { width: 14px; height: 14px; border: 2px solid rgba(0,102,255,0.2); border-top-color: #0066FF; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

#text-editor { position: absolute; z-index: 50; background: transparent; border: 1.5px solid #0066FF; border-radius: 6px; outline: none; resize: none; overflow: hidden; white-space: pre-wrap; word-wrap: break-word; padding: 4px; margin: -4px 0 0 -4px; line-height: 1.5; }
.tooltip { opacity: 0; pointer-events: none; transition: all 0.2s var(--ease-spring); transform: scale(0.95) translateY(-50%); }
.group:hover .tooltip { opacity: 1; transform: scale(1) translateY(-50%); }
.sidebar-collapsed .group:hover .tooltip-sidebar { opacity: 1; transform: scale(1) translateY(-50%); }