:root{--color-primary: #007AFF;--color-primary-dark: #0051D5;--color-success: #34C759;--color-warning: #FF9500;--color-danger: #FF3B30;--color-background: #F2F2F7;--color-background-secondary: #E5E5EA;--color-surface: #FFFFFF;--color-surface-secondary: #F2F2F7;--color-surface-tertiary: #FFFFFF;--color-text-primary: #000000;--color-text-secondary: #8E8E93;--color-text-tertiary: #C7C7CC;--color-text-quaternary: #D1D1D6;--color-separator: rgba(60, 60, 67, .29);--color-separator-opaque: #C6C6C8;--color-fill-primary: rgba(120, 120, 128, .2);--color-fill-secondary: rgba(120, 120, 128, .16);--color-fill-tertiary: rgba(118, 118, 128, .12);--color-fill-quaternary: rgba(116, 116, 128, .08);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--spacing-3xl: 64px;--spacing-list-item: 44px;--spacing-toolbar-height: 44px;--spacing-navbar-height: 60px;--spacing-sidebar-width: 320px;--font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;--font-family-mono: "SF Mono", "Monaco", "Consolas", monospace;--font-size-caption-2: 11px;--font-size-caption-1: 12px;--font-size-footnote: 13px;--font-size-subheadline: 15px;--font-size-callout: 16px;--font-size-body: 17px;--font-size-headline: 17px;--font-size-title-3: 20px;--font-size-title-2: 22px;--font-size-title-1: 28px;--font-size-large-title: 34px;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--line-height-tight: 1.2;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--radius-xs: 4px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-full: 9999px;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px rgba(0, 0, 0, .15);--shadow-modal: 0 10px 40px rgba(0, 0, 0, .3);--z-base: 0;--z-dropdown: 100;--z-sticky: 200;--z-toolbar: 300;--z-navbar: 400;--z-modal-backdrop: 900;--z-modal: 1000;--z-popover: 1100;--z-tooltip: 1200;--transition-fast: .15s ease-in-out;--transition-base: .25s ease-in-out;--transition-slow: .35s ease-in-out;--ease-ios: cubic-bezier(.4, 0, .2, 1);--ease-ios-in: cubic-bezier(.4, 0, 1, 1);--ease-ios-out: cubic-bezier(0, 0, .2, 1);--pen-color-default: #000000;--pen-size-default: 3;--highlighter-opacity: .3;--eraser-size-default: 20;--color-pen-black: #000000;--color-pen-blue: #007AFF;--color-pen-red: #FF3B30;--color-pen-green: #34C759;--color-pen-yellow: #FFD60A;--color-pen-purple: #AF52DE;--color-pen-pink: #FF2D55;--color-pen-orange: #FF9500}@media(prefers-color-scheme:dark){:root{--color-background: #000000;--color-background-secondary: #1C1C1E;--color-surface: #1C1C1E;--color-surface-secondary: #2C2C2E;--color-surface-tertiary: #3A3A3C;--color-text-primary: #FFFFFF;--color-text-secondary: #8E8E93;--color-text-tertiary: #636366;--color-text-quaternary: #48484A;--color-separator: rgba(84, 84, 88, .65);--color-separator-opaque: #38383A;--color-fill-primary: rgba(120, 120, 128, .36);--color-fill-secondary: rgba(120, 120, 128, .32);--color-fill-tertiary: rgba(118, 118, 128, .24);--color-fill-quaternary: rgba(116, 116, 128, .18);--color-primary: #0A84FF;--color-primary-dark: #007AFF}}.text-primary{color:var(--color-text-primary)}.text-secondary{color:var(--color-text-secondary)}.text-tertiary{color:var(--color-text-tertiary)}.bg-surface{background-color:var(--color-surface)}.bg-background{background-color:var(--color-background)}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-md{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;overflow:hidden}body{font-family:var(--font-family);font-size:var(--font-size-body);line-height:1.5;color:var(--color-text-primary);background-color:var(--color-background);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none}#root{height:100%;width:100%;overflow:hidden}input,textarea,[contenteditable]{-webkit-user-select:text;user-select:text}button{font-family:inherit;font-size:inherit;border:none;background:none;cursor:pointer;padding:0;color:inherit}a{color:var(--color-primary);text-decoration:none}ul,ol{list-style:none}img,svg{display:block;max-width:100%}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-separator);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-secondary)}.safe-area-container{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fade-in{animation:fadeIn var(--transition-base) var(--ease-ios-out)}.fade-out{animation:fadeOut var(--transition-base) var(--ease-ios-in)}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideDown{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}.slide-up{animation:slideUp .35s var(--ease-ios-out)}.slide-down{animation:slideDown .35s var(--ease-ios-in)}.slide-in-left{animation:slideInLeft .35s var(--ease-ios-out)}.slide-in-right{animation:slideInRight .35s var(--ease-ios-out)}@keyframes scaleIn{0%{opacity:0;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@keyframes scaleOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}.scale-in{animation:scaleIn .25s var(--ease-ios-out)}.scale-out{animation:scaleOut .25s var(--ease-ios-in)}.btn-press{transition:transform var(--transition-fast),opacity var(--transition-fast)}.btn-press:active{transform:scale(.95);opacity:.7}@keyframes ripple{to{transform:scale(4);opacity:0}}.ripple{position:relative;overflow:hidden}.ripple:after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;background:#ffffff80;border-radius:50%;transform:translate(-50%,-50%) scale(0);animation:ripple .6s ease-out;pointer-events:none}@keyframes spin{to{transform:rotate(360deg)}}.spinner{width:20px;height:20px;border:2px solid var(--color-fill-tertiary);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}.spinner-large{width:36px;height:36px;border-width:3px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton{background:linear-gradient(90deg,var(--color-fill-tertiary) 0%,var(--color-fill-secondary) 50%,var(--color-fill-tertiary) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite;border-radius:var(--radius-sm)}@keyframes pull-rotate{to{transform:rotate(360deg)}}.pull-refresh-indicator{animation:pull-rotate 1s linear infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.bounce{animation:bounce .6s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}.shake{animation:shake .5s ease-in-out}@keyframes flipIn{0%{transform:perspective(400px) rotateY(-90deg);opacity:0}to{transform:perspective(400px) rotateY(0);opacity:1}}.flip-in{animation:flipIn .6s var(--ease-ios-out)}@keyframes progress{0%{transform:translate(-100%)}to{transform:translate(100%)}}.progress-bar-animated:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:progress 1.5s ease-in-out infinite}.gpu-accelerated{transform:translateZ(0);will-change:transform;backface-visibility:hidden}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.skeleton{animation:none;background:var(--color-fill-tertiary)}.spinner{animation:none}}:root[data-theme=default]{--color-primary: #007AFF;--color-danger: #FF3B30;--color-success: #34C759;--color-warning: #FFD60A;--color-background: #F2F2F7;--color-surface: #FFFFFF;--color-fill-primary: rgba(120, 120, 128, .2);--color-fill-secondary: rgba(120, 120, 128, .16);--color-fill-tertiary: rgba(118, 118, 128, .12);--color-text-primary: #000000;--color-text-secondary: rgba(60, 60, 67, .6);--color-text-tertiary: rgba(60, 60, 67, .3);--color-separator: rgba(60, 60, 67, .29)}:root[data-theme=pastel-pink]{--color-primary: #FFB5C5;--color-danger: #FF8FA3;--color-success: #B5E7A0;--color-warning: #FFE5B4;--color-background: #FFF5F7;--color-surface: #FFFFFF;--color-fill-primary: rgba(255, 181, 197, .2);--color-fill-secondary: rgba(255, 181, 197, .12);--color-fill-tertiary: rgba(255, 181, 197, .08);--color-text-primary: #4A4A4A;--color-text-secondary: rgba(74, 74, 74, .6);--color-text-tertiary: rgba(74, 74, 74, .3);--color-separator: rgba(255, 181, 197, .3)}:root[data-theme=pastel-blue]{--color-primary: #A8D8EA;--color-danger: #FF8FA3;--color-success: #B5E7A0;--color-warning: #FFE5B4;--color-background: #F0F8FF;--color-surface: #FFFFFF;--color-fill-primary: rgba(168, 216, 234, .25);--color-fill-secondary: rgba(168, 216, 234, .15);--color-fill-tertiary: rgba(168, 216, 234, .08);--color-text-primary: #2C3E50;--color-text-secondary: rgba(44, 62, 80, .6);--color-text-tertiary: rgba(44, 62, 80, .3);--color-separator: rgba(168, 216, 234, .35)}:root[data-theme=pastel-lavender]{--color-primary: #C5B9E8;--color-danger: #FF8FA3;--color-success: #B5E7A0;--color-warning: #FFE5B4;--color-background: #F8F6FF;--color-surface: #FFFFFF;--color-fill-primary: rgba(197, 185, 232, .25);--color-fill-secondary: rgba(197, 185, 232, .15);--color-fill-tertiary: rgba(197, 185, 232, .08);--color-text-primary: #4A4A4A;--color-text-secondary: rgba(74, 74, 74, .6);--color-text-tertiary: rgba(74, 74, 74, .3);--color-separator: rgba(197, 185, 232, .35)}:root[data-theme=pastel-mint]{--color-primary: #98D8C8;--color-danger: #FF8FA3;--color-success: #B5E7A0;--color-warning: #FFE5B4;--color-background: #F0FFF4;--color-surface: #FFFFFF;--color-fill-primary: rgba(152, 216, 200, .25);--color-fill-secondary: rgba(152, 216, 200, .15);--color-fill-tertiary: rgba(152, 216, 200, .08);--color-text-primary: #2D4A3E;--color-text-secondary: rgba(45, 74, 62, .6);--color-text-tertiary: rgba(45, 74, 62, .3);--color-separator: rgba(152, 216, 200, .35)}:root[data-theme=pastel-peach]{--color-primary: #FFCBA4;--color-danger: #FF8FA3;--color-success: #B5E7A0;--color-warning: #FFE5B4;--color-background: #FFF8F0;--color-surface: #FFFFFF;--color-fill-primary: rgba(255, 203, 164, .25);--color-fill-secondary: rgba(255, 203, 164, .15);--color-fill-tertiary: rgba(255, 203, 164, .08);--color-text-primary: #4A4A4A;--color-text-secondary: rgba(74, 74, 74, .6);--color-text-tertiary: rgba(74, 74, 74, .3);--color-separator: rgba(255, 203, 164, .35)}:root[data-theme=coffee-vibe]{--color-primary: #A67C52;--color-danger: #C85A54;--color-success: #8B9556;--color-warning: #D4A574;--color-background: #F5F1ED;--color-surface: #FFFBF7;--color-fill-primary: rgba(166, 124, 82, .15);--color-fill-secondary: rgba(166, 124, 82, .1);--color-fill-tertiary: rgba(166, 124, 82, .06);--color-text-primary: #3E2723;--color-text-secondary: rgba(62, 39, 35, .65);--color-text-tertiary: rgba(62, 39, 35, .35);--color-separator: rgba(166, 124, 82, .25)}:root[data-color-mode=dark]{--color-danger: #FF453A;--color-success: #30D158;--color-warning: #FFD60A;--color-background: #000000;--color-surface: #1C1C1E;--color-fill-primary: rgba(120, 120, 128, .36);--color-fill-secondary: rgba(120, 120, 128, .32);--color-fill-tertiary: rgba(118, 118, 128, .24);--color-text-primary: #FFFFFF;--color-text-secondary: rgba(235, 235, 245, .6);--color-text-tertiary: rgba(235, 235, 245, .3);--color-separator: rgba(84, 84, 88, .65);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);--shadow-md: 0 4px 16px rgba(0, 0, 0, .5);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .6);--shadow-modal: 0 16px 48px rgba(0, 0, 0, .7)}:root[data-color-mode=dark][data-theme=default]{--color-primary: #0A84FF}:root[data-color-mode=dark] .drawing-canvas-container{background:#fff}:root[data-color-mode=dark] .note-editor-canvas>*{background:#fff;box-shadow:0 2px 8px #0009,0 4px 16px #0006}:root[data-color-mode=dark] .page-background-blank,:root[data-color-mode=dark] .page-background-lined,:root[data-color-mode=dark] .page-background-grid,:root[data-color-mode=dark] .page-background-dotted{background-color:#fff}:root[data-color-mode=dark][data-theme=pastel-pink]{--color-primary: #FFB5C5;--color-background: #1A0F12;--color-surface: #2A1820}:root[data-color-mode=dark][data-theme=pastel-blue]{--color-primary: #A8D8EA;--color-background: #0A0F15;--color-surface: #131A24}:root[data-color-mode=dark][data-theme=pastel-lavender]{--color-primary: #C5B9E8;--color-background: #110F18;--color-surface: #1D1A28}:root[data-color-mode=dark][data-theme=pastel-mint]{--color-primary: #98D8C8;--color-background: #0A1410;--color-surface: #131F1A}:root[data-color-mode=dark][data-theme=pastel-peach]{--color-primary: #FFCBA4;--color-background: #160F0A;--color-surface: #251A13}:root[data-color-mode=dark][data-theme=coffee-vibe]{--color-primary: #D4A574;--color-background: #0D0806;--color-surface: #1A1310}.page-background-blank{background:#fff}.page-background-lined{background:#fff;background-image:repeating-linear-gradient(transparent,transparent 31px,#e0e0e0 31px,#e0e0e0 32px);background-size:100% 32px;background-position:0 0}.page-background-grid{background:#fff;background-image:repeating-linear-gradient(0deg,transparent,transparent 19px,#e0e0e0 19px,#e0e0e0 20px),repeating-linear-gradient(90deg,transparent,transparent 19px,#e0e0e0 19px,#e0e0e0 20px);background-size:20px 20px}.page-background-dotted{background:#fff;background-image:radial-gradient(circle,#d0d0d0 1px,transparent 1px);background-size:20px 20px;background-position:0 0}@media print{.page-background-lined,.page-background-grid,.page-background-dotted{print-color-adjust:exact;-webkit-print-color-adjust:exact}}.category-list{display:flex;flex-direction:column;height:100%;overflow:hidden}.category-list-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md);border-bottom:1px solid var(--color-separator)}.category-list-title{font-size:var(--font-size-title-2);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin:0}.category-list-content{flex:1;overflow-y:auto;padding:var(--spacing-sm)}.category-item-wrapper{position:relative;display:flex;align-items:center;gap:var(--spacing-xs);margin-bottom:var(--spacing-xs)}.category-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);background:transparent;flex:1;text-align:left;transition:background var(--transition-fast)}.category-item:hover{background:var(--color-fill-tertiary)}.category-item.active{background:var(--color-fill-primary)}.category-edit-btn{width:32px;height:32px;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);font-size:16px;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);opacity:0;pointer-events:none}.category-item-wrapper:hover .category-edit-btn{opacity:1;pointer-events:auto}.category-edit-btn:hover{background:var(--color-fill-tertiary);color:var(--color-text-primary)}.category-edit-btn:active{transform:scale(.9)}.category-icon{width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;text-align:center;line-height:1}.category-name{font-size:var(--font-size-body);color:var(--color-text-primary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.loading{padding:var(--spacing-md);text-align:center;color:var(--color-text-secondary)}.modal-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);animation:fadeIn var(--transition-base);padding:var(--spacing-lg)}.modal{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--spacing-xl);width:100%;max-width:500px;max-height:90vh;overflow-y:auto;overflow-x:hidden;box-shadow:var(--shadow-modal);animation:scaleIn var(--transition-base);box-sizing:border-box}.modal *{box-sizing:border-box}.modal h3{margin:0 0 var(--spacing-xl) 0;font-size:var(--font-size-title-1);font-weight:var(--font-weight-bold);color:var(--color-text-primary)}.modal input[type=text]{width:100%;padding:var(--spacing-md);border:1px solid var(--color-separator);border-radius:var(--radius-md);font-size:var(--font-size-body);background:var(--color-background);color:var(--color-text-primary);box-sizing:border-box}.modal input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #007aff1a}.modal-actions{display:flex;gap:var(--spacing-sm);justify-content:space-between;align-items:center;margin-top:var(--spacing-xl);padding-top:var(--spacing-lg);border-top:1px solid var(--color-separator);width:100%;flex-wrap:wrap}.modal-actions button{padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);font-size:var(--font-size-body);font-weight:var(--font-weight-semibold);transition:all var(--transition-fast);white-space:nowrap;flex-shrink:0}.modal-actions button:not(.primary):not(.danger){background:var(--color-fill-secondary);color:var(--color-text-primary)}.modal-actions button.primary{background:var(--color-primary);color:#fff}.modal-actions button:hover{opacity:.85;transform:translateY(-1px)}.modal-actions button:active{transform:translateY(0)}.empty-categories{padding:var(--spacing-2xl) var(--spacing-md);text-align:center}.empty-categories p{color:var(--color-text-secondary);margin-bottom:var(--spacing-md)}.btn-create-first{padding:var(--spacing-sm) var(--spacing-lg);background:var(--color-primary);color:#fff;border-radius:var(--radius-md);font-weight:var(--font-weight-medium)}.form-group{margin-bottom:var(--spacing-xl)}.form-group label{display:block;font-size:var(--font-size-callout);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin-bottom:var(--spacing-md)}.form-group input[type=text]{font-size:var(--font-size-body)}.color-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.color-option{width:100%;aspect-ratio:1;border-radius:var(--radius-md);border:3px solid transparent;transition:all var(--transition-fast);cursor:pointer;position:relative}.color-option:hover{transform:scale(1.1)}.color-option.selected{border-color:#fff;box-shadow:0 0 0 2px var(--color-text-primary);transform:scale(1.05)}.color-option.selected:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:18px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.5)}.color-input{width:100%;height:50px;border:2px solid var(--color-separator);border-radius:var(--radius-md);cursor:pointer;transition:border-color var(--transition-fast);box-sizing:border-box}.color-input:hover{border-color:var(--color-primary)}.category-preview{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-lg);background:var(--color-background);border-radius:var(--radius-lg);border:2px solid var(--color-separator)}.category-preview .category-icon{width:48px;height:48px;font-size:24px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;text-align:center;line-height:1}.category-preview span{font-size:var(--font-size-body);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.modal-actions-right{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}.modal-actions button.danger{background:var(--color-danger);color:#fff}.modal-actions button.danger:hover{opacity:.85}@media(max-width:768px){.modal{margin:0 var(--spacing-md);max-width:calc(100vw - var(--spacing-xl))}.color-picker{grid-template-columns:repeat(4,1fr)}.modal-actions{flex-wrap:wrap}.modal-actions button{flex:1;min-width:auto}}.note-card{display:flex;flex-direction:column;background:var(--color-surface);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);transition:all var(--transition-fast);text-align:left;border:1px solid var(--color-separator)}.note-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.note-card:active{transform:translateY(0)}.note-card-thumbnail{width:100%;aspect-ratio:4 / 3;background:var(--color-background);overflow:hidden;position:relative}.note-card-thumbnail img{width:100%;height:100%;object-fit:cover}.note-card-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:48px;color:var(--color-text-tertiary)}.note-card-content{padding:var(--spacing-sm) var(--spacing-md);flex:1}.note-card-title{font-size:var(--font-size-callout);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin:0 0 var(--spacing-xs) 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.note-card-date{font-size:var(--font-size-footnote);color:var(--color-text-secondary);margin:0 0 var(--spacing-xs) 0}.note-card-meta{display:flex;align-items:center;gap:var(--spacing-xs);font-size:var(--font-size-caption-1);color:var(--color-text-tertiary)}.note-card-favorite{font-size:14px}.note-card-strokes{color:var(--color-text-tertiary)}.notes-list-container{display:flex;flex-direction:column;height:100%;overflow:hidden}.notes-list-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--color-separator);background:var(--color-surface);height:var(--spacing-navbar-height);box-sizing:border-box}.notes-list-title{font-size:var(--font-size-large-title);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin:0}.btn-primary{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background:var(--color-primary);color:#fff;border-radius:var(--radius-md);font-size:var(--font-size-body);font-weight:var(--font-weight-medium);transition:all var(--transition-fast)}.btn-primary:hover{opacity:.9}.btn-primary:active{transform:scale(.95)}.btn-icon{font-size:var(--font-size-title-2);line-height:1}.notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--spacing-md);padding:var(--spacing-lg);overflow-y:auto}.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-2xl);text-align:center}.empty-state-icon{font-size:64px;margin-bottom:var(--spacing-md)}.empty-state h3{font-size:var(--font-size-title-1);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin:0 0 var(--spacing-sm) 0}.empty-state p{font-size:var(--font-size-body);color:var(--color-text-secondary);margin:0 0 var(--spacing-lg) 0}@media(max-width:768px){.notes-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--spacing-sm);padding:var(--spacing-md)}}.drawing-canvas-container{width:100%;height:100%;min-height:100%;overflow:hidden;position:relative;background:#fff}.drawing-canvas{width:100%;height:100%;min-height:100%;display:block;user-select:none;-webkit-user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent}.drawing-canvas-container,.drawing-canvas{-webkit-touch-callout:none}.toolbar{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);background:var(--color-surface);border-bottom:1px solid var(--color-separator);min-height:var(--spacing-toolbar-height);z-index:var(--z-toolbar);flex-wrap:wrap}.toolbar-group{display:flex;align-items:center;gap:var(--spacing-sm)}.toolbar-label{font-size:var(--font-size-callout);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);white-space:nowrap}.toolbar-section{display:flex;align-items:center;gap:var(--spacing-xs);position:relative}.toolbar-btn{height:36px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;background:transparent;color:var(--color-text-primary);font-size:var(--font-size-callout);transition:all var(--transition-fast);position:relative;border:2px solid transparent}.toolbar-btn:hover{background:var(--color-fill-tertiary)}.toolbar-btn:active{transform:scale(.98)}.toolbar-btn.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.toolbar-btn.danger{color:var(--color-danger)}.tool-btn{padding:var(--spacing-xs) var(--spacing-md);gap:var(--spacing-xs);min-width:100px}.tool-icon{font-size:20px;font-weight:400}.tool-label{font-size:var(--font-size-callout);font-weight:var(--font-weight-medium)}.page-type-btn{padding:var(--spacing-xs) var(--spacing-sm);gap:var(--spacing-xs);min-width:85px}.page-icon{font-size:20px;font-weight:400}.page-label{font-size:var(--font-size-callout);font-weight:var(--font-weight-medium)}.size-option-btn{padding:var(--spacing-xs) var(--spacing-md);min-width:70px;font-weight:var(--font-weight-medium)}.icon-btn{width:36px;height:36px;font-size:20px}.color-section{gap:var(--spacing-sm)}.color-btn{width:32px;height:32px;border-radius:var(--radius-full);border:2px solid transparent;transition:all var(--transition-fast);cursor:pointer;box-shadow:0 1px 3px #00000026}.color-btn:hover{transform:scale(1.15);box-shadow:0 2px 6px #0003}.color-btn.active{border-color:var(--color-text-primary);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--color-text-primary);transform:scale(1.1)}.toolbar-divider{width:1px;height:24px;background:var(--color-separator)}.toolbar-spacer{flex:1}.toolbar-actions{gap:var(--spacing-xs)}@media(max-width:1024px){.toolbar{gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md)}.toolbar-label{display:none}.tool-btn{min-width:auto;padding:var(--spacing-xs)}.tool-label{display:none}.page-type-btn{min-width:auto;padding:var(--spacing-xs)}.page-label{display:none}.size-option-btn{min-width:auto;padding:var(--spacing-xs) var(--spacing-sm)}}@media print{.toolbar{display:none!important}}.note-editor{display:flex;flex-direction:column;height:100%;width:100%;overflow:hidden;background:var(--color-surface)}.note-editor-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--color-separator);background:var(--color-surface);height:var(--spacing-navbar-height);box-sizing:border-box;gap:var(--spacing-md)}.btn-back{padding:var(--spacing-xs) var(--spacing-sm);background:var(--color-fill-tertiary);color:var(--color-text-primary);border-radius:var(--radius-sm);font-size:var(--font-size-body);transition:all var(--transition-fast);white-space:nowrap}.btn-back:hover{background:var(--color-fill-secondary)}.btn-back:active{transform:scale(.95)}.note-editor-title{font-size:var(--font-size-title-2);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.note-editor-title.editable{cursor:pointer;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);transition:background var(--transition-fast)}.note-editor-title.editable:hover{background:var(--color-fill-tertiary)}.note-title-input{flex:1;font-size:var(--font-size-title-2);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);background:var(--color-background);border:2px solid var(--color-primary);border-radius:var(--radius-sm);padding:var(--spacing-xs) var(--spacing-sm);outline:none;font-family:inherit}.note-editor-actions{display:flex;align-items:center;gap:var(--spacing-sm)}.save-indicator{font-size:var(--font-size-footnote);color:var(--color-text-secondary);animation:fadeIn var(--transition-fast)}.btn-delete{width:36px;height:36px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;background:transparent;font-size:18px;transition:all var(--transition-fast);cursor:pointer}.btn-delete:hover{background:#ff3b301a;transform:scale(1.05)}.btn-delete:active{transform:scale(.95)}.note-editor-canvas{flex:1;overflow:auto;position:relative;background:var(--color-background);display:flex;align-items:flex-start;justify-content:center;padding:var(--spacing-2xl) var(--spacing-lg)}.note-editor-canvas>*{width:210mm;height:297mm;background:#fff;box-shadow:0 2px 8px #0000001a,0 4px 16px #00000014;border-radius:2px;position:relative}.loading{flex:1;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);font-size:var(--font-size-body)}@media(max-width:1024px){.note-editor-title{font-size:var(--font-size-title-3)}.note-editor-canvas{padding:var(--spacing-md)}.note-editor-canvas>*{width:100%;height:100%;max-width:100%;max-height:100%;min-height:unset}}@media(max-width:768px){.note-editor-canvas>*{aspect-ratio:210 / 297;min-height:500px;height:auto}}@media print{.note-editor-header,.toolbar{display:none!important}.note-editor-canvas{overflow:visible;background:#fff;padding:0;display:block}.note-editor-canvas>*{width:210mm;height:297mm;box-shadow:none;border-radius:0;margin:0;page-break-after:always}@page{size:A4;margin:0}body{margin:0;padding:0}}.settings-view{display:flex;flex-direction:column;height:100%;background:var(--color-background)}.settings-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--color-separator);background:var(--color-surface);height:var(--spacing-navbar-height);box-sizing:border-box}.settings-title{font-size:var(--font-size-large-title);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin:0}.settings-content{flex:1;overflow-y:auto;padding:var(--spacing-lg)}.settings-section{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.settings-section-title{font-size:var(--font-size-title-2);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin:0 0 var(--spacing-md) 0}.settings-placeholder{color:var(--color-text-secondary);font-size:var(--font-size-body);margin:0}.settings-group{margin-bottom:var(--spacing-xl)}.settings-group:last-child{margin-bottom:0}.settings-item{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) 0;border-bottom:1px solid var(--color-separator)}.settings-item:last-child{border-bottom:none}.settings-item-label{flex:1}.settings-item-title{font-size:var(--font-size-body);font-weight:var(--font-weight-medium);color:var(--color-text-primary);margin:0 0 var(--spacing-xs) 0}.settings-item-description{font-size:var(--font-size-callout);color:var(--color-text-secondary);margin:0}.settings-item-control{flex-shrink:0;margin-left:var(--spacing-md)}.toggle-switch{position:relative;width:51px;height:31px;background:var(--color-fill-tertiary);border-radius:31px;cursor:pointer;transition:background var(--transition-fast)}.toggle-switch.active{background:var(--color-primary)}.toggle-switch:after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;background:#fff;border-radius:50%;transition:transform var(--transition-fast);box-shadow:0 2px 4px #0003}.toggle-switch.active:after{transform:translate(20px)}.color-mode-options{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md);margin-bottom:var(--spacing-xl)}.color-mode-btn{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-lg);background:var(--color-surface);border:2px solid var(--color-separator);border-radius:var(--radius-lg);transition:all var(--transition-fast);cursor:pointer}.color-mode-btn:hover{border-color:var(--color-primary);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.color-mode-btn.active{border-color:var(--color-primary);background:var(--color-fill-tertiary);box-shadow:0 4px 16px #007aff33}.color-mode-icon{font-size:32px;line-height:1}.color-mode-name{font-size:var(--font-size-callout);font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.color-mode-btn.active .color-mode-name{color:var(--color-primary);font-weight:var(--font-weight-semibold)}.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--spacing-md);margin-top:var(--spacing-md)}.theme-card{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);background:transparent;border:2px solid var(--color-separator);border-radius:var(--radius-lg);transition:all var(--transition-fast);cursor:pointer;text-align:center}.theme-card:hover{border-color:var(--color-primary);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.theme-card.active{border-color:var(--color-primary);background:var(--color-fill-tertiary);box-shadow:0 4px 16px #007aff33}.theme-preview{width:80px;height:80px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 2px 8px #00000026;transition:transform var(--transition-fast)}.theme-card:hover .theme-preview{transform:scale(1.05)}.theme-check{color:#fff;font-size:28px;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.3)}.theme-name{font-size:var(--font-size-callout);font-weight:var(--font-weight-medium);color:var(--color-text-primary);line-height:1.3}.theme-card.active .theme-name{color:var(--color-primary);font-weight:var(--font-weight-semibold)}@media(max-width:768px){.settings-content,.settings-section{padding:var(--spacing-md)}.color-mode-options{grid-template-columns:1fr;gap:var(--spacing-sm)}.color-mode-btn{flex-direction:row;justify-content:center;padding:var(--spacing-md)}.theme-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--spacing-sm)}.theme-preview{width:60px;height:60px}.theme-check{font-size:24px}}.app-shell{display:flex;height:100vh;width:100vw;overflow:hidden;background:var(--color-background)}.sidebar{width:var(--spacing-sidebar-width);min-width:var(--spacing-sidebar-width);background:var(--color-surface);border-right:1px solid var(--color-separator);display:flex;flex-direction:column;transition:width var(--transition-base) var(--ease-ios);overflow:hidden;position:relative}.sidebar.collapsed{width:60px;min-width:60px}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--color-separator);height:var(--spacing-navbar-height);box-sizing:border-box}.sidebar.collapsed .sidebar-header{justify-content:center;padding:var(--spacing-sm)}.sidebar-title{font-size:var(--font-size-large-title);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin:0;transition:opacity var(--transition-fast)}.sidebar.collapsed .sidebar-title{opacity:0;width:0;overflow:hidden}.btn-icon{width:32px;height:32px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;background:transparent;color:var(--color-text-secondary);transition:background var(--transition-fast)}.btn-icon:hover{background:var(--color-fill-tertiary)}.btn-icon:active{transform:scale(.95)}.sidebar-footer{margin-top:auto;padding:var(--spacing-md);border-top:1px solid var(--color-separator)}.settings-btn{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);width:100%;background:transparent;color:var(--color-text-secondary);border-radius:var(--radius-md);transition:all var(--transition-fast);text-align:left}.settings-btn:hover{background:var(--color-fill-tertiary);color:var(--color-text-primary)}.settings-btn:active{transform:scale(.98)}.settings-icon{font-size:20px;flex-shrink:0}.settings-label{font-size:var(--font-size-body);font-weight:var(--font-weight-medium)}.user-section{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm) var(--spacing-md);background:var(--color-fill-tertiary);border-radius:var(--radius-md);margin-top:var(--spacing-sm)}.user-info{display:flex;align-items:center;gap:var(--spacing-xs);font-size:var(--font-size-callout);color:var(--color-text-secondary)}.user-icon{font-size:16px}.user-name{font-weight:var(--font-weight-medium)}.logout-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--color-text-secondary);border-radius:var(--radius-sm);font-size:20px;transition:all var(--transition-fast);cursor:pointer}.logout-btn:hover{background:var(--color-fill-secondary);color:var(--color-danger)}.logout-btn:active{transform:scale(.95)}.main-content{flex:1;overflow:hidden;display:flex;flex-direction:column}@media(max-width:768px){.sidebar{position:absolute;left:0;top:0;bottom:0;z-index:var(--z-modal);transform:translate(-100%)}.sidebar:not(.collapsed){transform:translate(0);box-shadow:var(--shadow-modal)}}.sidebar,.main-content{will-change:transform}.login-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--color-background);padding:var(--spacing-lg)}.login-container{width:100%;max-width:400px;background:var(--color-surface);border-radius:var(--radius-xl);padding:var(--spacing-2xl);box-shadow:var(--shadow-lg)}.login-header{text-align:center;margin-bottom:var(--spacing-2xl)}.login-header h1{font-size:var(--font-size-large-title);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin:0 0 var(--spacing-sm) 0}.login-header p{font-size:var(--font-size-body);color:var(--color-text-secondary);margin:0}.login-form{display:flex;flex-direction:column;gap:var(--spacing-lg)}.form-group{display:flex;flex-direction:column;gap:var(--spacing-sm)}.form-group label{font-size:var(--font-size-callout);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.form-group input{padding:var(--spacing-md);font-size:var(--font-size-body);border:2px solid var(--color-separator);border-radius:var(--radius-md);background:var(--color-background);color:var(--color-text-primary);transition:border-color var(--transition-fast)}.form-group input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #007aff1a}.form-group input:disabled{opacity:.5;cursor:not-allowed}.error-message{padding:var(--spacing-md);background:#ff3b301a;color:var(--color-danger);border-radius:var(--radius-md);font-size:var(--font-size-callout);text-align:center}.btn-login{padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-body);font-weight:var(--font-weight-semibold);background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-md);transition:all var(--transition-fast);cursor:pointer}.btn-login:hover:not(:disabled){opacity:.9;transform:translateY(-1px)}.btn-login:active:not(:disabled){transform:translateY(0)}.btn-login:disabled{opacity:.5;cursor:not-allowed}@media(max-width:768px){.login-container{padding:var(--spacing-xl)}}