:root{--color-bg-base: #0d1117;--color-bg-surface: #161b22;--color-bg-elevated: #1c2128;--color-bg-overlay: #21262d;--color-bg-sidebar: #0d1117;--color-bg-notelist: #161b22;--color-bg-editor: #1c2128;--color-text-primary: #e6edf3;--color-text-secondary: #8b949e;--color-text-tertiary: #6e7681;--color-text-muted: #484f58;--color-text-link: #58a6ff;--color-accent: #58a6ff;--color-accent-hover: #79b8ff;--color-accent-active: #388bfd;--color-accent-subtle: rgba(56, 139, 253, .15);--color-border-default: #30363d;--color-border-muted: #21262d;--color-border-strong: #484f58;--color-success: #3fb950;--color-warning: #d29922;--color-error: #f85149;--color-info: #58a6ff;--color-status-none: #6e7681;--color-status-active: #58a6ff;--color-status-on-hold: #d29922;--color-status-completed: #3fb950;--color-status-dropped: #f85149;--color-tag-default-bg: rgba(110, 118, 129, .15);--color-tag-default-text: #8b949e;--color-tag-red-bg: rgba(248, 81, 73, .15);--color-tag-red-text: #f85149;--color-tag-orange-bg: rgba(210, 153, 34, .15);--color-tag-orange-text: #d29922;--color-tag-yellow-bg: rgba(210, 153, 34, .15);--color-tag-yellow-text: #e3b341;--color-tag-green-bg: rgba(63, 185, 80, .15);--color-tag-green-text: #3fb950;--color-tag-teal-bg: rgba(57, 211, 196, .15);--color-tag-teal-text: #39d3c4;--color-tag-blue-bg: rgba(88, 166, 255, .15);--color-tag-blue-text: #58a6ff;--color-tag-violet-bg: rgba(163, 113, 247, .15);--color-tag-violet-text: #a371f7;--color-tag-purple-bg: rgba(163, 113, 247, .15);--color-tag-purple-text: #bc8cff;--color-tag-pink-bg: rgba(219, 97, 162, .15);--color-tag-pink-text: #db61a2;--syntax-bg: #282a36;--syntax-fg: #f8f8f2;--syntax-selection: #44475a;--syntax-comment: #6272a4;--syntax-cyan: #8be9fd;--syntax-green: #50fa7b;--syntax-orange: #ffb86c;--syntax-pink: #ff79c6;--syntax-purple: #bd93f9;--syntax-red: #ff5555;--syntax-yellow: #f1fa8c;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";--font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", Menlo, monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--leading-none: 1;--leading-tight: 1.25;--leading-snug: 1.375;--leading-normal: 1.5;--leading-relaxed: 1.625;--leading-loose: 2;--space-0: 0;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--space-24: 6rem;--sidebar-width: 220px;--sidebar-collapsed-width: 56px;--notelist-width: 280px;--notelist-min-width: 240px;--notelist-max-width: 400px;--header-height: 48px;--mobile-header-height: 56px;--radius-none: 0;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--radius-2xl: 16px;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .4), 0 2px 4px -2px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .4), 0 4px 6px -4px rgba(0, 0, 0, .3);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .4), 0 8px 10px -6px rgba(0, 0, 0, .3);--shadow-dropdown: 0 4px 12px rgba(0, 0, 0, .4), 0 0 0 1px var(--color-border-default);--shadow-modal: 0 16px 48px rgba(0, 0, 0, .5), 0 0 0 1px var(--color-border-default);--duration-instant: 50ms;--duration-fast: .1s;--duration-normal: .2s;--duration-slow: .3s;--ease-in: cubic-bezier(.4, 0, 1, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--ease-in-out: cubic-bezier(.4, 0, .2, 1);--transition-colors: color var(--duration-fast) var(--ease-in-out), background-color var(--duration-fast) var(--ease-in-out), border-color var(--duration-fast) var(--ease-in-out);--transition-opacity: opacity var(--duration-normal) var(--ease-in-out);--transition-transform: transform var(--duration-normal) var(--ease-out);--transition-all: all var(--duration-normal) var(--ease-in-out)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes scaleIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:#fff3}*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}::selection{background:var(--color-accent-subtle);color:var(--color-text-primary)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:var(--font-sans);font-size:16px;line-height:var(--leading-normal);color:var(--color-text-primary);background:var(--color-bg-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{height:100%}a{color:var(--color-text-link);text-decoration:none}button{font-family:inherit}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--font-medium);cursor:pointer;transition:var(--transition-all);border:1px solid transparent;background:none;outline:none}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.btn-primary:hover:not(:disabled){background:var(--color-accent-hover);border-color:var(--color-accent-hover)}.btn-secondary{background:var(--color-bg-elevated);color:var(--color-text-primary);border-color:var(--color-border-default)}.btn-secondary:hover:not(:disabled){background:var(--color-bg-overlay);border-color:var(--color-border-strong)}.btn-ghost{background:transparent;color:var(--color-text-secondary)}.btn-ghost:hover:not(:disabled){background:#ffffff0d;color:var(--color-text-primary)}.btn-danger{background:var(--color-error);color:#fff;border-color:var(--color-error)}.btn-danger:hover:not(:disabled){background:#d32f2f;border-color:#d32f2f}.input{width:100%;padding:var(--space-2) var(--space-3);background:var(--color-bg-base);border:1px solid var(--color-border-default);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--color-text-primary);transition:var(--transition-colors);outline:none}.input::placeholder{color:var(--color-text-tertiary)}.input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-subtle)}select.input{appearance:none;cursor:pointer;padding-right:var(--space-8);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}