:root{--bg-page: #fffdf9;--bg-card: #e3e0f7;--bg-surface: #ffffff;--bg-surface-low: #f4efe6;--bg-elevated: #ffffff;--bg-hover: #dfdcf0;--text-primary: #1e1b19;--text-secondary: #67615b;--text-tertiary: #958f87;--border-subtle: rgba(30, 27, 25, .08);--border-light: rgba(30, 27, 25, .12);--border-medium: rgba(30, 27, 25, .2);--accent-primary: #7c6fbd;--accent-primary-dim: rgba(124, 111, 189, .2);--accent-link: #5a4fa3;--accent-link-underline: rgba(90, 79, 163, .4);--danger-color: #c53a3a;--danger-bg: rgba(197, 58, 58, .1);--success-color: #4a9d5b;--warning-color: #d4952a;--notebook-lavender: var(--bg-card);--notebook-pink: #F5DCE9;--notebook-cyan: #CFF0F5;--notebook-cream: #F5F5DC;--notebook-mint: #DCF5DF;--pin-beige-bg: #FFF3C9;--pin-beige-border: #E8DBA8;--pin-beige-accent: #C9B878;--pin-beige-dim: rgba(201, 184, 120, .3);--pin-red-bg: #FFDFE7;--pin-red-border: #F0C8D0;--pin-red-accent: #E898A8;--pin-red-dim: rgba(232, 152, 168, .3);--pin-green-bg: #DAF6E5;--pin-green-border: #C5E8D4;--pin-green-accent: #8BC4A0;--pin-green-dim: rgba(139, 196, 160, .3);--pin-purple-bg: #E7E7FF;--pin-purple-border: #D0D0F0;--pin-purple-accent: var(--accent-primary);--pin-purple-dim: var(--accent-primary-dim);--font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--font-size-base: 15px;--font-size-small: 13px;--font-size-xs: 11px;--font-size-large: 18px;--line-height: 1.55;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-bold: 600;--card-padding: 14px;--card-border-radius: 6px;--card-max-width: 88%;--card-shadow: 0 2px 4px rgba(0, 0, 0, .08), inset 0 0 0 1px rgba(30, 27, 25, .08);--input-padding: 10px;--input-border-radius: 12px;--input-min-height: 48px;--button-size: 32px;--button-border-radius: 8px;--icon-size-small: 18px;--icon-size-medium: 22px;--icon-size-large: 26px;--logo-offset-y: 2px;--checkbox-size: 1em;--checkbox-offset: .167em;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 20px;--content-max-width: 600px;--settings-max-width: 500px;--image-max-height: min(500px, 60vh);--stack-content-max-height: min(500px, 60vh)}*{box-sizing:border-box}html{height:100%;overflow:hidden;-webkit-text-size-adjust:100%}body{margin:0;padding:0;height:100%;font-family:var(--font-family);font-size:var(--font-size-base);line-height:var(--line-height);color:var(--text-primary);background-color:var(--bg-page);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;overscroll-behavior:none}#root{height:100%}body{overscroll-behavior-y:contain}::selection{background:var(--accent-primary);color:#fff}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}a,button{-webkit-tap-highlight-color:transparent}.app-loading{display:flex;align-items:center;justify-content:center;height:100%;background:var(--bg-page)}.app-loading-spinner{width:32px;height:32px;border:3px solid var(--border-light);border-top-color:var(--accent-primary);border-radius:50%;animation:app-spin .8s linear infinite}@keyframes app-spin{to{transform:rotate(360deg)}}.app-unlock{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#7c5cbf,#9b7ed9,#b8a4e3);padding:24px;z-index:9999}.unlock-container{display:flex;flex-direction:column;align-items:center;max-width:400px;width:100%;padding:40px 32px;background:#fffffff2;border-radius:24px;box-shadow:0 8px 32px #00000026}.unlock-container img{margin-bottom:24px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.unlock-container h2{font-size:24px;font-weight:600;color:#2d2d2d;margin:0 0 8px;text-align:center}.unlock-container p{font-size:14px;color:#6b6b6b;margin:0 0 24px;text-align:center}.unlock-error{background:#fee2e2;color:#b91c1c;padding:12px 16px;border-radius:8px;font-size:13px;margin:0 0 16px;text-align:center;word-break:break-word}.unlock-hint{font-size:13px;color:#888;margin:0 0 20px;text-align:center;font-style:italic}.unlock-debug{background:#1a1a1a;color:#0f0;padding:12px;border-radius:8px;font-family:monospace;font-size:11px;text-align:left;margin:0 0 16px;max-height:200px;overflow-y:auto;word-break:break-all}.unlock-debug div{margin-bottom:4px}.unlock-actions{display:flex;flex-direction:column;gap:12px;width:100%}.unlock-btn{padding:14px 24px;font-size:16px;font-weight:500;border-radius:12px;cursor:pointer;transition:all .2s ease;border:none;width:100%;background:#7c5cbf;color:#fff}.unlock-btn:hover{background:#6b4dab}.unlock-btn.secondary{background:#f0edf5;color:#5c4a8a}.unlock-btn.secondary:hover{background:#e5e0ed}@media(max-width:480px){.unlock-container{padding:32px 24px}.unlock-container h2{font-size:20px}}.preview-link{color:var(--accent-link);text-decoration:underline;text-decoration-color:var(--accent-link-underline);text-underline-offset:2px;pointer-events:none;cursor:default}.preview-image-icon{display:inline;vertical-align:-.125em;color:var(--text-secondary);margin:0 .15em}.preview-image-icon svg{display:inline}.pin-entry{display:flex;flex-direction:column;align-items:center;padding:24px;outline:none;width:100%;max-width:320px;margin:0 auto}.pin-header{text-align:center;margin-bottom:24px}.pin-title{font-size:1.5rem;font-weight:600;color:var(--text-primary, #1a1a1a);margin:0 0 8px}.pin-subtitle{font-size:.9rem;color:var(--text-secondary, #666);margin:0}.pin-error{color:#dc2626;font-size:.875rem;margin:0 0 16px;text-align:center}.pin-dots{display:flex;gap:12px;margin-bottom:8px}.pin-dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--border-color, #d1d5db);background:transparent;transition:all .15s ease}.pin-dot.filled{background:var(--accent-color, #7c5cbf);border-color:var(--accent-color, #7c5cbf)}.pin-dot.optional{opacity:.5}.pin-dot.optional.filled{opacity:1}.pin-dots.shake{animation:shake .4s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}.pin-hint{font-size:.75rem;color:var(--text-tertiary, #999);margin:0 0 24px}.pin-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:280px}.pin-key{width:72px;height:72px;border-radius:50%;border:1px solid var(--border-color, #e5e7eb);background:var(--card-bg, #fff);font-size:1.5rem;font-weight:500;color:var(--text-primary, #1a1a1a);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.pin-key:hover:not(:disabled){background:var(--hover-bg, #f3f4f6)}.pin-key:active:not(:disabled){transform:scale(.95);background:var(--active-bg, #e5e7eb)}.pin-key:disabled{opacity:.5;cursor:not-allowed}.pin-key-action{background:transparent;border-color:transparent;color:var(--text-secondary, #666)}.pin-key-action:hover:not(:disabled){background:var(--hover-bg, #f3f4f6)}.pin-key-submit{color:var(--text-tertiary, #999)}.pin-key-submit.enabled{color:var(--accent-color, #7c5cbf);background:var(--accent-bg, rgba(124, 92, 191, .1));border-color:var(--accent-color, #7c5cbf)}.pin-key-submit.enabled:hover:not(:disabled){background:var(--accent-hover, rgba(124, 92, 191, .2))}.pin-spinner{width:20px;height:20px;border:2px solid var(--border-color, #e5e7eb);border-top-color:var(--accent-color, #7c5cbf);border-radius:50%;animation:spin .8s linear infinite}.pin-footer{margin-top:24px;text-align:center}@media(max-width:360px){.pin-key{width:64px;height:64px;font-size:1.25rem}.pin-keypad{gap:8px}}@media(prefers-color-scheme:dark){.pin-title{color:#f9fafb}.pin-subtitle{color:#9ca3af}.pin-dot{border-color:#4b5563}.pin-hint{color:#6b7280}.pin-key{background:#1f2937;border-color:#374151;color:#f9fafb}.pin-key:hover:not(:disabled){background:#374151}.pin-key:active:not(:disabled){background:#4b5563}.pin-key-action{color:#9ca3af}.pin-key-submit{color:#6b7280}.pin-key-submit.enabled{background:#7c5cbf33}}.welcome-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg-page);padding:24px;z-index:9999;font-family:IBM Plex Mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.welcome-screen:has(.cloud-mask){background:linear-gradient(135deg,#7c6fbd,#9d93cf,#bdb6dc)}.welcome-screen button,.welcome-screen input,.welcome-screen textarea,.welcome-screen select{font-family:inherit}.welcome-container{display:flex;flex-direction:column;align-items:center;width:850px;max-width:95vw;min-height:auto;padding:60px 110px;background:transparent;font-family:inherit;position:relative}.welcome-container.cloud-mask{min-height:850px;padding:200px 110px 70px;background:var(--bg-elevated);box-shadow:0 8px 32px #00000026,0 2px 8px #0000001a;animation:cloudFloat .5s ease-out;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 425.49 425.49'%3E%3Cpath fill='black' d='M230.396,389.574c-35.522,0-69.865-14.233-95.169-39.253c-8.437,3.633-17.598,5.544-26.832,5.544c-37.351,0-67.735-30.385-67.735-67.744c0-3.991,0.382-8.039,1.13-12.087C15.517,256.599,0,226.052,0,193.212c0-51.649,38.985-95.495,89.707-102.087c12.705-33.238,44.35-55.209,80.367-55.209c31.433,0,60.176,17.176,75.254,44.366c10.86-3.755,22.183-5.657,33.782-5.657c57.144,0,103.631,46.479,103.631,103.615c0,2.398-0.106,4.837-0.317,7.421c25.67,10.047,43.065,35.05,43.065,63.029c0,39.667-34.53,71.45-74.726,67.378C327.63,360.913,281.037,389.574,230.396,389.574z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 425.49 425.49'%3E%3Cpath fill='black' d='M230.396,389.574c-35.522,0-69.865-14.233-95.169-39.253c-8.437,3.633-17.598,5.544-26.832,5.544c-37.351,0-67.735-30.385-67.735-67.744c0-3.991,0.382-8.039,1.13-12.087C15.517,256.599,0,226.052,0,193.212c0-51.649,38.985-95.495,89.707-102.087c12.705-33.238,44.35-55.209,80.367-55.209c31.433,0,60.176,17.176,75.254,44.366c10.86-3.755,22.183-5.657,33.782-5.657c57.144,0,103.631,46.479,103.631,103.615c0,2.398-0.106,4.837-0.317,7.421c25.67,10.047,43.065,35.05,43.065,63.029c0,39.667-34.53,71.45-74.726,67.378C327.63,360.913,281.037,389.574,230.396,389.574z'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}@keyframes cloudFloat{0%{transform:translateY(20px) scale(.95);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.welcome-title .logo-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0;margin-left:10px;margin-right:2px}.welcome-title .logo-icon svg,.welcome-title .logo-icon img{display:block;width:1.0435em;height:1.0435em;position:relative;left:2px;top:var(--logo-offset-y);vertical-align:middle}.welcome-title{font-size:22px;font-weight:var(--font-weight-bold);color:var(--text-primary);margin:0 0 24px;display:flex;align-items:center;justify-content:center;gap:0}.welcome-status{font-size:var(--font-size-small);color:var(--text-secondary);margin:0 0 16px;text-align:center}.welcome-error{font-size:var(--font-size-small);color:var(--danger-color);margin:0 0 16px;text-align:center;padding:10px 14px;background:var(--danger-bg);border:2px solid var(--danger-color);box-shadow:3px 3px 0 var(--danger-color)}.welcome-error--action-needed{font-weight:var(--font-weight-medium)}.welcome-actions{display:flex;flex-direction:column;align-items:center;gap:12px}.method-description{font-size:var(--font-size-small);color:var(--text-secondary);text-align:center;margin:0 0 8px}.welcome-btn{padding:12px 28px;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);font-family:inherit;cursor:pointer;transition:transform .1s ease,box-shadow .1s ease;border:3px solid var(--text-primary);background:var(--bg-card);color:var(--text-primary);box-shadow:6px 6px #00000021}.welcome-btn:hover{transform:translate(1px,1px);box-shadow:5px 5px #00000021}.welcome-btn:active{transform:translate(2px,2px);box-shadow:none}.welcome-btn.primary{background:var(--accent-primary);color:#fff;border-color:var(--text-primary)}.welcome-btn.primary:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:2px 2px 0 var(--text-primary)}.welcome-btn.secondary{background:var(--bg-elevated);color:var(--text-primary)}.copy-link{background:none;border:none;color:var(--text-primary);font-family:inherit;font-size:var(--font-size-small);cursor:pointer;padding:8px 4px;text-decoration:none;position:relative}.copy-link:before{content:"";position:absolute;left:0;right:0;bottom:6px;height:0;background:#fff7d0;z-index:-1;transition:height .1s ease}.copy-link:hover:before{height:8px}.welcome-btn.text{background:transparent;color:var(--text-secondary);padding:8px 16px;border:none;box-shadow:none}.welcome-btn.text:hover{color:var(--text-primary);background:var(--bg-hover);transform:none;box-shadow:none}.welcome-loading{display:flex;justify-content:center;padding:24px}.welcome-spinner{width:32px;height:32px;border:3px solid var(--border-light);border-top-color:var(--accent-primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.welcome-mnemonic{width:100%}.mnemonic-warning{font-size:var(--font-size-small);color:var(--text-secondary);text-align:center;margin:0 0 20px;line-height:1.5}.mnemonic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px;padding:16px;background:var(--bg-surface-low);border-radius:var(--card-border-radius);border:1px solid var(--border-subtle)}.mnemonic-cell{display:flex;align-items:center;gap:6px;padding:8px 10px;background:var(--bg-elevated);border-radius:6px;border:1px solid var(--border-subtle)}.mnemonic-number{color:var(--text-tertiary);font-size:11px;font-weight:var(--font-weight-medium);min-width:18px}.mnemonic-word{font-size:var(--font-size-small);font-family:inherit;color:var(--text-primary);font-weight:var(--font-weight-medium)}.copy-btn{margin-bottom:12px}.welcome-mnemonic-input{width:100%}.mnemonic-instruction{font-size:var(--font-size-small);color:var(--text-secondary);text-align:center;margin:0 0 16px}.mnemonic-textarea{width:100%;padding:12px;font-size:var(--font-size-small);font-family:inherit;color:var(--text-primary);background:var(--bg-elevated);border:1px solid var(--border-light);border-radius:var(--input-border-radius);resize:none;margin-bottom:16px;box-sizing:border-box}.mnemonic-textarea:focus{outline:none;border-color:var(--accent-primary)}.mnemonic-textarea::placeholder{color:var(--text-tertiary)}.welcome-subtitle{font-size:var(--font-size-small);color:var(--text-secondary);text-align:center;margin:-16px 0 24px}.welcome-note{font-size:var(--font-size-small);color:var(--text-secondary);text-align:center;margin:0 0 20px;line-height:1.5}.welcome-link{background:none;border:none;color:var(--text-primary);font-size:var(--font-size-small);font-family:inherit;cursor:pointer;padding:12px;text-decoration:none;margin-top:8px;position:relative}.welcome-link:before{content:"";position:absolute;left:8px;right:8px;bottom:10px;height:0;background:#fff7d0;z-index:-1;transition:height .1s ease}.welcome-link:hover:before{height:10px}.welcome-options{display:flex;flex-direction:column;gap:12px;width:100%;margin-bottom:8px}.option-card{display:flex;align-items:flex-start;padding:18px 20px;background:var(--bg-card);border:3px solid var(--text-primary);cursor:pointer;transition:transform .1s ease,box-shadow .1s ease;text-align:left;width:100%;box-shadow:6px 6px #00000021;position:relative}.option-card:hover{transform:translate(1px,1px);box-shadow:5px 5px #00000021}.option-card:active{transform:translate(2px,2px);box-shadow:none}.option-content{flex:1}.option-content h3{font-size:var(--font-size-base);font-weight:var(--font-weight-bold);color:var(--text-primary);margin:0 0 6px;letter-spacing:-.3px}.option-content p{font-size:var(--font-size-small);color:var(--text-secondary);margin:0;line-height:1.5}.option-note{display:inline-block;font-size:11px;color:var(--text-tertiary);margin-top:6px;padding:2px 6px;background:var(--bg-surface-low);border-radius:3px}.backup-warning{font-size:var(--font-size-small);color:var(--text-primary);text-align:center;margin:0 0 8px}.backup-list{font-size:var(--font-size-small);color:var(--text-secondary);margin:0 0 20px;padding-left:24px;text-align:left}.backup-list li{margin-bottom:4px}.backup-checkbox{display:flex;align-items:center;gap:10px;font-size:var(--font-size-small);color:var(--text-secondary);margin:16px 0;cursor:pointer}.backup-checkbox input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent-primary);cursor:pointer}.restore-hint{font-size:var(--font-size-small);color:var(--text-secondary);text-align:center;margin:0 0 16px;padding:12px;background:var(--bg-surface-low);border-radius:var(--button-border-radius);line-height:1.5}.welcome-btn svg{width:20px;height:20px;vertical-align:middle;margin-right:6px}@media(max-width:768px){.welcome-container{padding:40px 60px}.welcome-container.cloud-mask{padding:150px 80px 60px}.welcome-title{font-size:20px}.welcome-btn{padding:10px 24px;font-size:14px}.option-card{padding:14px 16px}.option-content h3{font-size:14px}.option-content p{font-size:12px}}@media(max-width:540px){.welcome-container{width:98vw;padding:32px 24px}.welcome-container.cloud-mask{min-height:480px;padding:90px 50px 50px}.welcome-title{font-size:18px}.welcome-subtitle,.welcome-note,.method-description{font-size:13px}.mnemonic-grid{grid-template-columns:repeat(2,1fr)}.mnemonic-cell{padding:6px 8px}.mnemonic-word{font-size:12px}}@media(max-width:400px){.welcome-container{padding:24px 16px}.welcome-container.cloud-mask{padding:80px 40px 45px;min-height:450px}.welcome-title{font-size:16px}.welcome-btn{padding:10px 20px;font-size:13px}}.toast-container{position:fixed;top:calc(60px + env(safe-area-inset-top,0px));right:var(--spacing-md);z-index:1000;display:flex;flex-direction:column;gap:var(--spacing-sm);max-width:400px;width:calc(100% - var(--spacing-md) * 2);pointer-events:none}@media(max-width:480px){.toast-container{right:var(--spacing-sm);left:var(--spacing-sm);width:auto;max-width:none}}.toast{display:flex;align-items:flex-start;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--card-border-radius);background:var(--bg-elevated);box-shadow:0 4px 12px #00000026,0 1px 3px #0000001a;font-size:var(--font-size-small);line-height:var(--line-height);pointer-events:auto;animation:toast-enter .2s ease-out;outline:none}.toast:focus-visible{box-shadow:0 4px 12px #00000026,0 0 0 2px var(--accent-primary)}.toast--exiting{animation:toast-exit .2s ease-in forwards}@keyframes toast-enter{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes toast-exit{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}.toast__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:2px}.toast__icon svg{display:block}.toast__message{flex:1;color:var(--text-primary);word-wrap:break-word}.toast__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;margin:-2px -4px -2px 0;border:none;border-radius:4px;background:transparent;color:var(--text-tertiary);cursor:pointer;transition:background-color .15s,color .15s}.toast__close:hover{background:var(--bg-hover);color:var(--text-secondary)}.toast__close:focus-visible{outline:2px solid var(--accent-primary);outline-offset:-2px}.toast--info{border-left:3px solid var(--accent-primary)}.toast--info .toast__icon{color:var(--accent-primary)}.toast--success{border-left:3px solid var(--success-color)}.toast--success .toast__icon{color:var(--success-color)}.toast--warning{border-left:3px solid var(--warning-color)}.toast--warning .toast__icon{color:var(--warning-color)}.toast--error{border-left:3px solid var(--danger-color)}.toast--error .toast__icon{color:var(--danger-color)}.segmented-progress{display:inline-flex;align-items:center;gap:var(--spacing-xs)}.segmented-progress-bar{display:flex;gap:2px}.segmented-progress-block{border-radius:1px;transition:background-color .15s ease}.segmented-progress-block.empty{background:var(--bg-surface);border:1px solid var(--border-subtle)}.segmented-progress-block.filled{background:var(--accent-primary);border:1px solid var(--accent-primary)}.segmented-progress.small .segmented-progress-block{width:4px;height:8px}.segmented-progress.small .segmented-progress-label{font-size:10px}.segmented-progress.medium .segmented-progress-block{width:6px;height:12px}.segmented-progress.medium .segmented-progress-label{font-size:var(--font-size-small)}.segmented-progress.large .segmented-progress-block{width:10px;height:18px}.segmented-progress.large .segmented-progress-label{font-size:var(--font-size-base)}.segmented-progress-label{color:var(--text-secondary);font-variant-numeric:tabular-nums;min-width:3ch;text-align:right}.segmented-progress.animated .segmented-progress-block.filled{animation:segment-pulse 1.5s ease-in-out infinite}@keyframes segment-pulse{0%,to{opacity:1}50%{opacity:.7}}.segmented-progress.loading .segmented-progress-block.filled:last-of-type{animation:segment-blink .8s ease-in-out infinite}@keyframes segment-blink{0%,to{opacity:1}50%{opacity:.4}}.media-attachment{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm);background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--card-border-radius);margin:var(--spacing-sm) 0;cursor:pointer;transition:background-color .2s,border-color .2s}.media-attachment:hover{background:var(--bg-hover);border-color:var(--border-medium)}.media-attachment.image:hover{background:var(--bg-card);border-color:var(--border-light)}.media-attachment.loading{cursor:default;opacity:.7}.media-spinner{width:20px;height:20px;border:2px solid var(--border-light);border-top-color:var(--accent-primary);border-radius:50%;animation:media-spin .8s linear infinite}@keyframes media-spin{to{transform:rotate(360deg)}}.media-attachment.error{border-color:var(--danger-color);background:var(--danger-bg);cursor:default}.media-error-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--danger-color);color:#fff;border-radius:50%;font-weight:700;font-size:var(--font-size-small);flex-shrink:0}.media-error-text{font-size:var(--font-size-small);color:var(--danger-color)}.media-attachment.removed{border-color:var(--border-light);background:var(--bg-hover);cursor:default;opacity:.6}.media-attachment.removed:hover{background:var(--bg-hover);border-color:var(--border-light)}.media-removed-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);flex-shrink:0}.media-removed-text{font-size:var(--font-size-small);color:var(--text-tertiary);font-style:italic}.media-attachment.image{flex-direction:column;padding:0;overflow:hidden;max-width:100%}.media-image{width:100%;max-height:var(--image-max-height);object-fit:contain;display:block;border-radius:var(--card-border-radius) var(--card-border-radius) 0 0}.media-attachment.image .media-status{width:100%;padding:var(--spacing-xs) var(--spacing-sm);display:flex;align-items:center;justify-content:space-between;font-size:var(--font-size-small);border-top:1px solid var(--border-light)}.media-status.pending{background:var(--warning-bg);color:var(--warning-color)}.media-status.failed{background:var(--danger-bg);color:var(--danger-color)}.media-status.local-only{background:var(--bg-hover);color:var(--text-secondary)}.media-attachment.file{display:flex;align-items:center;gap:var(--spacing-sm)}.media-file-icon{flex-shrink:0;color:var(--text-tertiary)}.media-file-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.media-filename{font-size:var(--font-size-base);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.media-file-meta{font-size:var(--font-size-small);color:var(--text-tertiary)}.media-status-inline{color:inherit}.media-status-inline.pending{color:var(--warning-color)}.media-status-inline.failed{color:var(--danger-color)}.media-retry-btn,.media-retry-btn-inline{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--button-border-radius);padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-small);color:var(--text-primary);cursor:pointer;transition:background-color .2s}.media-retry-btn:hover,.media-retry-btn-inline:hover{background:var(--bg-hover)}.media-retry-btn:disabled,.media-retry-btn-inline:disabled{opacity:.5;cursor:not-allowed}.media-retry-btn-inline{padding:2px var(--spacing-xs);margin-left:var(--spacing-xs)}.media-download-btn{flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--bg-hover);border-radius:var(--button-border-radius);color:var(--text-secondary);transition:background-color .2s,color .2s}.media-download-btn:hover{background:var(--border-light);color:var(--text-primary)}.media-attachment-placeholder{display:block;padding:var(--spacing-sm);background:var(--bg-surface-low);border:1px dashed var(--border-light);border-radius:var(--card-border-radius);margin:var(--spacing-sm) 0;text-align:center;font-size:var(--font-size-small);color:var(--text-tertiary)}.media-attachment-placeholder:before{content:"Loading media..."}.media-upload-progress{display:flex;align-items:center;gap:var(--spacing-xs)}.media-progress-text{font-size:var(--font-size-small);font-variant-numeric:tabular-nums;min-width:3ch}.media-progress-text-inline{font-size:inherit;font-variant-numeric:tabular-nums;margin-left:var(--spacing-xs)}.media-status-inline .segmented-progress{display:inline-flex;vertical-align:middle}.note-item{display:flex;flex-direction:column;align-items:flex-end;padding:var(--spacing-sm) var(--spacing-md)}.note-card{max-width:var(--card-max-width);padding:var(--card-padding);background:var(--bg-card);border-radius:var(--card-border-radius);border:1px solid var(--border-subtle);box-shadow:var(--card-shadow);word-wrap:break-word;overflow-wrap:break-word;user-select:none;-webkit-user-select:none;cursor:default;transition:box-shadow .2s,border-color .2s}.note-card:active{border-color:var(--border-light)}.note-card.editing{background:var(--bg-card);border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-primary-dim)}.note-text{font-size:var(--font-size-base);line-height:var(--line-height);color:var(--text-primary);white-space:pre-wrap;user-select:text;-webkit-user-select:text}.note-text a{color:var(--accent-link);text-decoration:underline;text-decoration-color:var(--accent-link-underline)}.note-text a:hover{text-decoration-color:var(--accent-link)}.note-time{font-size:var(--font-size-small);color:var(--text-secondary);margin-top:var(--spacing-xs);margin-right:var(--spacing-xs)}.edit-textarea{width:100%;border:none;background:transparent;resize:none;font-size:var(--font-size-base);line-height:var(--line-height);color:var(--text-primary);font-family:inherit;padding:0;margin:0;box-sizing:border-box;overflow:hidden}.edit-textarea:focus{outline:none}:root[data-sticky-tape=true] .note-card{position:relative;overflow:visible}:root[data-sticky-tape=true] .note-card:before{content:"";position:absolute;top:-5px;left:12px;width:28px;height:10px;background:var(--tape-color, #e0d9b5);opacity:.85;transform:rotate(-3deg);border-radius:1px;box-shadow:0 1px #0000000f}:root[data-sticky-tape=true] .note-card.editing:before{display:none}:root[data-sticky-tape-variation=true] .note-card.tape-left:before{left:8px}:root[data-sticky-tape-variation=true] .note-card.tape-center:before{left:50%;margin-left:-14px}:root[data-sticky-tape-variation=true] .note-card.tape-right:before{left:auto;right:8px}:root[data-sticky-tape-variation=true] .note-card.tape-rot-1:before{--tape-rotate: -3deg}:root[data-sticky-tape-variation=true] .note-card.tape-rot-2:before{--tape-rotate: -1deg}:root[data-sticky-tape-variation=true] .note-card.tape-rot-3:before{--tape-rotate: 2deg}:root[data-sticky-tape-variation=true] .note-card.tape-rot-4:before{--tape-rotate: 3deg}:root[data-sticky-tape-variation=true] .note-card.tape-rot-5:before{--tape-rotate: 5deg}:root[data-sticky-tape-variation=true] .note-card.tape-rot-6:before{--tape-rotate: 7deg}:root[data-sticky-tape-variation=true] .note-card.tape-size-1:before{width:24px;height:9px}:root[data-sticky-tape-variation=true] .note-card.tape-size-2:before{width:30px;height:11px}:root[data-sticky-tape-variation=true] .note-card.tape-size-3:before{width:26px;height:10px}:root[data-sticky-tape-variation=true] .note-card.tape-size-4:before{width:32px;height:9px}:root[data-sticky-tape-variation=true] .note-card:before{transform:rotate(var(--tape-rotate, -3deg))}:root[data-sticky-tape-matte=true] .note-card:before{background-image:linear-gradient(135deg,transparent 0%,rgba(255,255,255,.15) 40%,rgba(255,255,255,.05) 60%,transparent 100%),repeating-linear-gradient(90deg,transparent,transparent 1px,rgba(0,0,0,.03) 1px,rgba(0,0,0,.03) 2px);background-color:var(--tape-color, #e0d9b5)}.washi-tape{display:none}:root[data-sticky-tape=true][data-sticky-tape-real=true] .washi-tape{display:block;position:absolute;top:-8px;left:8px;width:40px;height:auto;transform:rotate(-5deg);pointer-events:none;z-index:1}:root[data-sticky-tape=true][data-sticky-tape-real=true] .note-card:before{display:none}:root[data-sticky-tape=true][data-sticky-tape-real=true] .note-card.editing .washi-tape{display:none}:root[data-sticky-tape-variation=true] .washi-tape.tape-left{left:4px}:root[data-sticky-tape-variation=true] .washi-tape.tape-center{left:50%;margin-left:-20px}:root[data-sticky-tape-variation=true] .washi-tape.tape-right{left:auto;right:4px}:root[data-sticky-tape-variation=true] .washi-tape.tape-rot-1{transform:rotate(-8deg)}:root[data-sticky-tape-variation=true] .washi-tape.tape-rot-2{transform:rotate(-3deg)}:root[data-sticky-tape-variation=true] .washi-tape.tape-rot-3{transform:rotate(2deg)}:root[data-sticky-tape-variation=true] .washi-tape.tape-rot-4{transform:rotate(5deg)}:root[data-sticky-tape-variation=true] .washi-tape.tape-rot-5{transform:rotate(8deg)}:root[data-sticky-tape-variation=true] .washi-tape.tape-rot-6{transform:rotate(12deg)}:root[data-sticky-tape-variation=true] .washi-tape.tape-size-1{width:35px}:root[data-sticky-tape-variation=true] .washi-tape.tape-size-2{width:42px}:root[data-sticky-tape-variation=true] .washi-tape.tape-size-3{width:38px}:root[data-sticky-tape-variation=true] .washi-tape.tape-size-4{width:45px}.note-text strong{font-weight:var(--font-weight-bold)}.note-text em{font-style:italic}.note-text u{text-decoration:underline;text-decoration-color:var(--text-secondary);text-underline-offset:2px}.note-text del{text-decoration:line-through;color:var(--text-tertiary)}.note-text mark{background:var(--accent-primary);color:#fff;padding:1px 3px;border-radius:2px}.note-text code{font-family:SF Mono,Fira Code,Consolas,monospace;background:var(--bg-surface-low);padding:2px 5px;border-radius:4px;font-size:.9em}.note-text pre{background:var(--bg-surface-low);padding:var(--spacing-sm);border-radius:var(--button-border-radius);overflow-x:auto;margin:var(--spacing-xs) 0}.note-text pre code{background:transparent;padding:0;font-size:.85em;line-height:1.4}.note-text blockquote{border-left:3px solid var(--accent-primary);margin:var(--spacing-xs) 0;padding-left:var(--spacing-sm);color:var(--text-secondary);font-style:italic}.note-text blockquote blockquote{margin-left:var(--spacing-xs);border-left-color:var(--border-light);margin-top:var(--spacing-xs);margin-bottom:var(--spacing-xs)}.note-text blockquote blockquote blockquote{border-left-color:var(--text-tertiary)}.note-text .markdown-image{max-width:100%;max-height:var(--image-max-height);object-fit:contain;border-radius:var(--card-border-radius);margin:var(--spacing-xs) 0;display:block}.note-text .list-item{display:flex;align-items:flex-start;gap:var(--spacing-xs);margin:2px 0}.note-text .bullet-marker,.note-text .number-marker{flex-shrink:0;color:var(--text-secondary);min-width:1.2em}.note-text .bullet-marker{text-align:center}.note-text .number-marker{text-align:right}.note-text .task-item{display:flex;align-items:baseline;gap:var(--spacing-sm);margin:2px 0}.note-text .task-item input[type=checkbox]{flex-shrink:0;font-size:inherit;width:var(--checkbox-size);height:var(--checkbox-size);margin:0;cursor:pointer;accent-color:var(--accent-primary);transform:translateY(var(--checkbox-offset))}.note-text .task-item.checked>span{text-decoration:line-through;color:var(--text-tertiary)}.note-card.pinned.pin-beige{background:var(--pin-beige-bg);border-color:var(--pin-beige-border)}.note-card.pinned.pin-red{background:var(--pin-red-bg);border-color:var(--pin-red-border)}.note-card.pinned.pin-green{background:var(--pin-green-bg);border-color:var(--pin-green-border)}.note-card.pinned.pin-purple{background:var(--pin-purple-bg);border-color:var(--pin-purple-border)}.note-card.pinned.pin-beige.editing{background:var(--pin-beige-bg);border-color:var(--pin-beige-accent);box-shadow:0 0 0 3px var(--pin-beige-dim)}.note-card.pinned.pin-red.editing{background:var(--pin-red-bg);border-color:var(--pin-red-accent);box-shadow:0 0 0 3px var(--pin-red-dim)}.note-card.pinned.pin-green.editing{background:var(--pin-green-bg);border-color:var(--pin-green-accent);box-shadow:0 0 0 3px var(--pin-green-dim)}.note-card.pinned.pin-purple.editing{background:var(--pin-purple-bg);border-color:var(--pin-purple-accent);box-shadow:0 0 0 3px var(--pin-purple-dim)}.note-item.selection-mode{position:relative;cursor:pointer}.note-item.selection-mode .note-card{pointer-events:none}.selection-checkbox{position:absolute;left:var(--spacing-sm);top:50%;transform:translateY(-50%);z-index:5;display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:var(--bg-card);border-radius:6px;box-shadow:var(--card-shadow)}.note-item.selected .note-card{border-color:var(--accent-primary);box-shadow:0 0 0 2px var(--accent-primary-dim)}.note-item.selection-anchor .note-card{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-primary)}.note-item.in-stack.selection-mode .note-card{opacity:.5;pointer-events:none}.note-item.in-stack.selection-mode .selection-checkbox{display:none}.note-item.selection-mode:not(.in-stack):hover .note-card{border-color:var(--text-tertiary)}.note-stack{position:relative;z-index:0;max-width:var(--card-max-width);min-width:200px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.note-stack:hover{transform:translateY(-2px)}.note-stack:hover .stack-paper:nth-child(1){transform:translate(-12px,-8px) rotate(-4deg)!important}.note-stack:hover .stack-paper:nth-child(2){transform:translate(-6px,-4px) rotate(-2deg)!important}.note-stack:hover .stack-paper:nth-child(3){transform:translate(6px,-4px) rotate(2deg)!important}.note-stack:hover .stack-paper:nth-child(4){transform:translate(12px,-8px) rotate(4deg)!important}.note-stack:active{transform:translateY(0)}.note-stack:focus{outline:none}.note-stack:focus-visible{outline:2px solid var(--accent-primary);outline-offset:4px;border-radius:var(--card-border-radius)}.stack-washi{position:absolute;top:-12px;left:50%;transform:translate(-50%);z-index:100;width:80px;height:28px;pointer-events:none}.stack-washi-image{width:100%;height:100%;object-fit:cover;filter:drop-shadow(0 1px 2px rgba(0,0,0,.1))}.stack-papers{position:relative;padding-top:8px}.stack-paper{position:absolute;inset:8px 0 0;background:var(--bg-card);border-radius:var(--card-border-radius);border:1px solid var(--border-subtle);box-shadow:var(--card-shadow);transition:transform .25s cubic-bezier(.4,0,.2,1)}.stack-paper-front{position:relative;padding:var(--card-padding);padding-top:calc(var(--card-padding) + 4px);min-height:60px}.stack-content{position:relative;z-index:1}.stack-badge{position:absolute;bottom:-8px;right:12px;display:flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;background:var(--accent-primary);color:#fff;border-radius:12px;font-size:12px;font-weight:var(--font-weight-bold);box-shadow:0 2px 6px #0003;z-index:101}.note-stack.pinned .stack-paper-front,.note-stack.pinned.pin-beige .stack-paper-front{background:var(--pin-beige-bg);border-color:var(--pin-beige-border)}.note-stack.pinned.pin-red .stack-paper-front{background:var(--pin-red-bg);border-color:var(--pin-red-border)}.note-stack.pinned.pin-green .stack-paper-front{background:var(--pin-green-bg);border-color:var(--pin-green-border)}.note-stack.pinned.pin-purple .stack-paper-front{background:var(--pin-purple-bg);border-color:var(--pin-purple-border)}@media(max-width:480px){.note-stack{min-width:160px}.stack-washi{width:60px;height:22px;top:-10px}.stack-badge{min-width:20px;height:20px;font-size:11px;bottom:-6px;right:8px}}.paper-lined{background:repeating-linear-gradient(to bottom,transparent,transparent 23px,var(--border-subtle) 23px,var(--border-subtle) 24px),var(--bg-card)}.paper-grid{background:repeating-linear-gradient(to right,var(--border-subtle) 0,var(--border-subtle) 1px,transparent 1px,transparent 20px),repeating-linear-gradient(to bottom,var(--border-subtle) 0,var(--border-subtle) 1px,transparent 1px,transparent 20px),var(--bg-card)}.paper-dotted{background:radial-gradient(circle at center,var(--border-light) 1px,transparent 1px),var(--bg-card);background-size:16px 16px}.paper-plain{background:var(--bg-card)}.stack-viewer-overlay{position:fixed;inset:0;background:#000000d9;z-index:1000;animation:overlayFadeIn .25s ease-out;display:flex;align-items:center;outline:none;--stack-origin-x: 0px;--stack-origin-y: 0px;--stack-origin-scale: .5}@keyframes overlayFadeIn{0%{opacity:0}to{opacity:1}}.stack-viewer-overlay.closing{animation:overlayFadeOut .2s ease-out forwards}@keyframes overlayFadeOut{0%{opacity:1}to{opacity:0}}.stack-viewer-counter{position:fixed;top:var(--spacing-md);left:var(--spacing-md);padding:var(--spacing-xs) var(--spacing-sm);background:#ffffff26;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--button-border-radius);color:#fff;font-size:var(--font-size-small);font-weight:var(--font-weight-medium);z-index:1010}.stack-viewer-close{position:fixed;top:var(--spacing-md);right:var(--spacing-md);width:44px;height:44px;border-radius:50%;background:#ffffff26;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:background-color .15s;z-index:1010}.stack-viewer-close:hover{background:#ffffff40}.stack-viewer-close:active{background:#ffffff4d}.stack-viewer-carousel{width:100%;display:flex;align-items:center;gap:var(--spacing-md);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:var(--spacing-lg) calc((100vw - (100vw - 5 * var(--spacing-md)) / 3.5) / 2);scrollbar-width:none;-ms-overflow-style:none;animation:carouselZoomIn .3s cubic-bezier(.32,.72,0,1)}@keyframes carouselZoomIn{0%{opacity:0;transform:translate(var(--stack-origin-x),var(--stack-origin-y)) scale(var(--stack-origin-scale))}to{opacity:1;transform:translate(0) scale(1)}}.stack-viewer-carousel::-webkit-scrollbar{display:none}.stack-viewer-carousel.dragging{scroll-behavior:auto;scroll-snap-type:none}.stack-viewer-overlay.closing .stack-viewer-carousel{animation:carouselZoomOut .2s cubic-bezier(.32,0,.67,0) forwards}@keyframes carouselZoomOut{0%{opacity:1;transform:translate(0) scale(1)}to{opacity:0;transform:translate(var(--stack-origin-x),var(--stack-origin-y)) scale(var(--stack-origin-scale))}}.stack-viewer-card{flex:0 0 calc((100vw - 5 * var(--spacing-md)) / 3.5);min-width:220px;scroll-snap-align:center;background:var(--bg-card);border-radius:var(--card-border-radius);border:1px solid var(--border-subtle);box-shadow:0 8px 32px #0000004d;display:flex;flex-direction:column;overflow:hidden;transition:transform .2s ease,opacity .2s ease;transform:scale(.95);opacity:.7;touch-action:pan-x;user-select:none;-webkit-user-select:none;cursor:grab}.stack-viewer-card.active{transform:scale(1);opacity:1}.stack-viewer-card:active{cursor:grabbing}.stack-viewer-card.pinned.pin-beige{background-color:var(--pin-beige-bg);border-color:var(--pin-beige-border)}.stack-viewer-card.pinned.pin-red{background-color:var(--pin-red-bg);border-color:var(--pin-red-border)}.stack-viewer-card.pinned.pin-green{background-color:var(--pin-green-bg);border-color:var(--pin-green-border)}.stack-viewer-card.pinned.pin-purple{background-color:var(--pin-purple-bg);border-color:var(--pin-purple-border)}.stack-viewer-content{flex:1;padding:var(--card-padding);overflow-y:auto;font-size:var(--font-size-base);line-height:var(--line-height);color:var(--text-primary);white-space:pre-wrap;min-height:80px;max-height:var(--stack-content-max-height)}.stack-viewer-content a{color:var(--accent-link);text-decoration:underline}.stack-viewer-meta{padding:var(--spacing-xs) var(--card-padding);border-top:1px solid var(--border-subtle)}.stack-viewer-time{font-size:var(--font-size-small);color:var(--text-tertiary)}.stack-viewer-edit{flex:1;display:flex;flex-direction:column}.stack-viewer-textarea{flex:1;padding:var(--card-padding);border:none;background:transparent;font-size:var(--font-size-base);line-height:var(--line-height);color:var(--text-primary);resize:none;font-family:inherit;min-height:100px}.stack-viewer-textarea:focus{outline:none}.stack-viewer-edit-actions{display:flex;justify-content:flex-end;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--card-padding);border-top:1px solid var(--border-subtle)}.stack-viewer-edit-btn{padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--button-border-radius);font-size:var(--font-size-small);font-weight:var(--font-weight-medium);cursor:pointer;transition:opacity .15s}.stack-viewer-edit-btn.cancel{background:var(--bg-hover);border:none;color:var(--text-primary)}.stack-viewer-edit-btn.save{background:var(--accent-primary);border:none;color:#fff}.stack-viewer-edit-btn:hover{opacity:.85}.stack-viewer-nav{position:fixed;bottom:var(--spacing-lg);left:50%;transform:translate(-50%);display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);background:#ffffff26;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:24px;z-index:1010}.stack-viewer-nav-btn{width:40px;height:40px;border-radius:50%;background:#fff3;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:background-color .15s,opacity .15s}.stack-viewer-nav-btn:hover:not(:disabled){background:#ffffff59}.stack-viewer-nav-btn:disabled{opacity:.3;cursor:not-allowed}.stack-viewer-dots{display:flex;align-items:center;gap:6px}.stack-viewer-dot{width:8px;height:8px;border-radius:50%;background:#fff6;border:none;cursor:pointer;padding:0;transition:background-color .15s,transform .15s}.stack-viewer-dot:hover{background:#fff9}.stack-viewer-dot.active{background:#fff;transform:scale(1.3)}.stack-viewer-dot-ellipsis{color:#fff9;font-size:12px;line-height:1;padding:0 2px;-webkit-user-select:none;user-select:none}.stack-viewer-context-menu{position:fixed;background:var(--bg-elevated);border-radius:var(--card-border-radius);box-shadow:0 4px 20px #0000004d;padding:var(--spacing-xs);min-width:140px;z-index:1020;animation:contextMenuFadeIn .15s ease-out}@keyframes contextMenuFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.stack-viewer-context-menu button{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);background:transparent;border:none;border-radius:var(--button-border-radius);font-size:var(--font-size-base);color:var(--text-primary);cursor:pointer;transition:background-color .1s}.stack-viewer-context-menu button:hover{background:var(--bg-hover)}.stack-viewer-context-menu button.danger{color:var(--danger-color)}.stack-viewer-context-menu button.danger:hover{background:var(--danger-bg)}@media(max-width:1024px){.stack-viewer-carousel{padding:var(--spacing-lg) calc((100vw - (100vw - 4 * var(--spacing-md)) / 2.5) / 2)}.stack-viewer-card{flex:0 0 calc((100vw - 4 * var(--spacing-md)) / 2.5)}}@media(max-width:768px){.stack-viewer-carousel{padding:var(--spacing-md) calc((100vw - (100vw - 3 * var(--spacing-sm)) / 1.5) / 2);gap:var(--spacing-sm)}.stack-viewer-card{flex:0 0 calc((100vw - 3 * var(--spacing-sm)) / 1.5);min-width:200px}.stack-viewer-counter{top:var(--spacing-sm);left:var(--spacing-sm)}.stack-viewer-close{top:var(--spacing-sm);right:var(--spacing-sm);width:40px;height:40px}.stack-viewer-nav{bottom:var(--spacing-md);padding:var(--spacing-xs) var(--spacing-sm)}.stack-viewer-nav-btn{width:36px;height:36px}}@media(max-width:480px){.stack-viewer-carousel{padding:var(--spacing-sm) calc((100vw - (100vw - 2 * var(--spacing-xs)) / 1.2) / 2);gap:var(--spacing-xs)}.stack-viewer-card{flex:0 0 calc((100vw - 2 * var(--spacing-xs)) / 1.2);min-width:180px}}.pin-banner{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);min-height:2.5em;cursor:pointer;transition:filter .15s;user-select:none;-webkit-user-select:none;border-radius:1em;margin:var(--spacing-sm);margin-bottom:0;border-left:.35em solid var(--bracket-color, #E8DBA8);box-shadow:inset 0 0 0 1px var(--border-subtle, rgba(0, 0, 0, .08))}.pin-banner:hover{filter:brightness(.97)}.pin-banner:active{filter:brightness(.94)}.pin-banner:focus{outline:none}.pin-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text-secondary);position:relative;top:-1px}.pin-icon-svg{width:14px;height:14px}:root[data-large-ui=true] .pin-icon-svg{width:18px;height:18px}.pin-preview{flex:1;font-size:var(--font-size-small);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.pin-counter{flex-shrink:0;font-size:var(--font-size-small);color:var(--text-secondary);padding:.15em .4em;background:#0000000f;border-radius:.6em}.pin-chevron{flex-shrink:0;color:var(--text-tertiary)}.context-menu{position:fixed;z-index:1000;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--card-border-radius);padding:var(--spacing-xs) 0;box-shadow:0 4px 20px #0000001f;min-width:160px;animation:contextMenuIn .15s ease-out}@keyframes contextMenuIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes contextMenuOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.context-menu.closing{animation:contextMenuOut .15s ease-out forwards}.context-menu button{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);border:none;background:transparent;color:var(--text-primary);font-size:var(--font-size-small);cursor:pointer;text-align:left;border-radius:0;-webkit-appearance:none;appearance:none;transition:background-color .15s}.context-menu button:hover{background:var(--bg-hover)}.context-menu button:focus{outline:none}.context-menu button svg{width:var(--icon-size-small);height:var(--icon-size-small);color:var(--text-secondary);flex-shrink:0}.context-menu button.delete{color:var(--danger-color)}.context-menu button.delete svg{color:var(--danger-color)}.context-menu button.delete:hover{background:var(--danger-bg)}.context-menu button.has-submenu{justify-content:flex-start}.context-menu button.has-submenu .chevron{margin-left:auto;color:var(--text-tertiary)}.context-menu button.back-btn{color:var(--text-secondary);justify-content:flex-start}.context-menu button.back-btn svg{color:var(--text-tertiary)}.menu-separator{height:1px;background:var(--border-subtle);margin:var(--spacing-xs) 0}.color-row{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--spacing-sm) var(--spacing-md);background:transparent}.color-row:focus{outline:none;background:var(--bg-hover)}.color-label{font-size:var(--font-size-small);color:var(--text-primary)}.color-dots{display:flex;gap:8px}.color-dot{width:20px;height:20px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .15s,border-color .15s}.color-dot:hover{transform:scale(1.15)}.color-dot.active{border-color:var(--text-primary)}.color-dot.beige{background:#fff3c9}.color-dot.red{background:#ffdfe7}.color-dot.green{background:#daf6e5}.color-dot.purple{background:#e7e7ff}.color-swatch{width:16px;height:16px;border-radius:50%;flex-shrink:0}.color-swatch.beige{background:#fff3c9}.color-swatch.red{background:#ffdfe7}.color-swatch.green{background:#daf6e5}.color-swatch.purple{background:#e7e7ff}.context-menu button.active-color{background:var(--bg-hover)}.context-menu button .check{margin-left:auto;color:var(--accent-primary)}.image-lightbox-overlay{position:fixed;inset:0;width:100%;width:100vw;height:100%;height:100vh;height:-webkit-fill-available;height:100dvh;background:#000000f2;z-index:9999;animation:lightboxFadeIn .2s ease-out;display:flex;align-items:center;justify-content:center;outline:none;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overflow:hidden;transition:background-color .15s ease-out}@keyframes lightboxFadeIn{0%{opacity:0}to{opacity:1}}.image-lightbox-overlay.closing{animation:lightboxFadeOut .2s ease-out forwards}@keyframes lightboxFadeOut{0%{opacity:1}to{opacity:0}}.image-lightbox-counter{position:fixed;top:calc(var(--spacing-md) + env(safe-area-inset-top,0px));left:calc(var(--spacing-md) + env(safe-area-inset-left,0px));padding:var(--spacing-xs) var(--spacing-sm);background:#ffffff26;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:var(--button-border-radius);color:#fff;font-size:var(--font-size-small);font-weight:var(--font-weight-medium);z-index:10001}.image-lightbox-actions{position:fixed;top:calc(var(--spacing-md) + env(safe-area-inset-top,0px));right:calc(var(--spacing-md) + env(safe-area-inset-right,0px));display:flex;gap:var(--spacing-sm);z-index:10001}.image-lightbox-download,.image-lightbox-delete,.image-lightbox-close{width:44px;height:44px;border-radius:50%;background:#ffffff26;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:background .15s ease;text-decoration:none}.image-lightbox-download:hover,.image-lightbox-delete:hover,.image-lightbox-close:hover{background:#ffffff40}.image-lightbox-download:active,.image-lightbox-delete:active,.image-lightbox-close:active{background:#ffffff4d}.image-lightbox-delete{background:#e74c3c4d}.image-lightbox-delete:hover{background:#e74c3c80}.image-lightbox-delete:active{background:#e74c3c99}.image-lightbox-content{display:flex;align-items:center;justify-content:center;width:100%;height:100%;max-height:100%;padding:var(--spacing-md);box-sizing:border-box;overflow:hidden}.image-lightbox-image{max-width:95vw;max-height:90vh;object-fit:contain;border-radius:var(--card-border-radius);will-change:transform;pointer-events:none}@media(max-width:768px){.image-lightbox-actions,.image-lightbox-counter{top:calc(var(--spacing-lg) + env(safe-area-inset-top,20px))}.image-lightbox-content{padding:var(--spacing-xs);padding-top:calc(60px + env(safe-area-inset-top,20px));padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}.image-lightbox-image{max-width:100vw;max-height:calc(100dvh - 140px - env(safe-area-inset-top,20px) - env(safe-area-inset-bottom,0px));border-radius:0}}.image-lightbox-nav{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:#ffffff26;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;z-index:10001;transition:background .15s ease,opacity .15s ease}.image-lightbox-nav:hover{background:#ffffff40}.image-lightbox-nav:active{background:#ffffff4d}.image-lightbox-nav.disabled{opacity:.3;cursor:default;pointer-events:none}.image-lightbox-nav-prev{left:var(--spacing-md)}.image-lightbox-nav-next{right:var(--spacing-md)}@media(max-width:768px){.image-lightbox-nav{display:none}}.image-lightbox-dots{position:fixed;bottom:calc(var(--spacing-lg) + env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%);display:flex;gap:var(--spacing-xs);z-index:10001;padding:var(--spacing-xs) var(--spacing-sm);background:#ffffff1a;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:20px}.image-lightbox-dot{width:8px;height:8px;border-radius:50%;background:#fff6;border:none;padding:0;cursor:pointer;transition:background .15s ease,transform .15s ease}.image-lightbox-dot:hover{background:#fff9}.image-lightbox-dot.active{background:#fff;transform:scale(1.2)}@media(max-width:768px){.image-lightbox-dot{width:10px;height:10px}}.image-lightbox-loading,.image-lightbox-error{display:flex;align-items:center;justify-content:center;color:#ffffffb3;font-size:var(--font-size-base)}.image-lightbox-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.2);border-top-color:#fffc;border-radius:50%;animation:lightboxSpin .8s linear infinite}@keyframes lightboxSpin{to{transform:rotate(360deg)}}.image-lightbox-delete-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:10002;animation:lightboxFadeIn .15s ease-out}.image-lightbox-delete-dialog{background:var(--bg-card);border-radius:var(--card-border-radius);padding:var(--spacing-lg);max-width:300px;width:90%;box-shadow:0 8px 32px #0000004d;animation:lightboxDialogIn .15s ease-out}@keyframes lightboxDialogIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.image-lightbox-delete-dialog p{margin:0 0 var(--spacing-sm);color:var(--text-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);text-align:center}.image-lightbox-delete-warning{color:var(--text-secondary)!important;font-size:var(--font-size-small)!important;font-weight:400!important}.image-lightbox-delete-actions{display:flex;gap:var(--spacing-sm);margin-top:var(--spacing-md)}.image-lightbox-delete-cancel,.image-lightbox-delete-confirm{flex:1;padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:var(--button-border-radius);font-size:var(--font-size-small);font-weight:var(--font-weight-medium);cursor:pointer;transition:opacity .15s}.image-lightbox-delete-cancel{background:var(--bg-hover);color:var(--text-primary)}.image-lightbox-delete-cancel:hover{background:var(--border-light)}.image-lightbox-delete-confirm{background:var(--danger-color, #e74c3c);color:#fff}.image-lightbox-delete-confirm:hover{opacity:.9}.notes-list{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--spacing-sm) 0;-webkit-overflow-scrolling:touch;touch-action:pan-y;scrollbar-width:none;-ms-overflow-style:none}.notes-list::-webkit-scrollbar{display:none}.notes-list.empty{display:flex;align-items:center;justify-content:center}.empty-state{text-align:center;padding:var(--spacing-lg) var(--spacing-md);color:var(--text-tertiary)}.empty-icon{margin-bottom:var(--spacing-md);opacity:.5}.empty-state p{font-size:var(--font-size-large);color:var(--text-secondary);margin:0 0 var(--spacing-sm) 0}.empty-state span{font-size:var(--font-size-small)}.notes-list.selection-mode{background:var(--bg-selection-mode, color-mix(in srgb, var(--accent-primary) 3%, transparent))}.selection-action-bar{position:fixed;bottom:calc(var(--input-area-height, 80px) + env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%);display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-elevated);border-radius:24px;box-shadow:0 4px 20px #00000026;z-index:100;animation:slideUpBar .2s ease-out}@keyframes slideUpBar{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.selection-count{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);color:var(--text-secondary);padding:0 var(--spacing-xs);min-width:70px}.selection-cancel-btn{padding:var(--spacing-xs) var(--spacing-md);background:var(--bg-hover);border:none;border-radius:16px;color:var(--text-primary);font-size:var(--font-size-small);font-weight:var(--font-weight-medium);cursor:pointer;transition:background-color .15s}.selection-cancel-btn:hover{background:var(--border-light)}.selection-stack-btn{padding:var(--spacing-xs) var(--spacing-md);background:var(--accent-primary);border:none;border-radius:16px;color:#fff;font-size:var(--font-size-small);font-weight:var(--font-weight-medium);cursor:pointer;transition:opacity .15s,background-color .15s}.selection-stack-btn:hover:not(:disabled){opacity:.9}.selection-stack-btn:disabled{opacity:.5;cursor:not-allowed}.selection-delete-btn{padding:var(--spacing-xs) var(--spacing-md);background:var(--danger-color, #e74c3c);border:none;border-radius:16px;color:#fff;font-size:var(--font-size-small);font-weight:var(--font-weight-medium);cursor:pointer;transition:opacity .15s,background-color .15s}.selection-delete-btn:hover:not(:disabled){opacity:.9}.selection-delete-btn:disabled{opacity:.5;cursor:not-allowed}.delete-confirm-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .15s ease-out}.delete-confirm-dialog{background:var(--bg-card);border-radius:var(--card-border-radius);padding:var(--spacing-lg);max-width:300px;width:90%;box-shadow:0 8px 32px #0003;animation:scaleIn .15s ease-out}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.delete-confirm-dialog p{margin:0 0 var(--spacing-sm);color:var(--text-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);text-align:center}.delete-confirm-warning{color:var(--text-secondary)!important;font-size:var(--font-size-small)!important;font-weight:400!important}.delete-confirm-actions{display:flex;gap:var(--spacing-sm);margin-top:var(--spacing-md)}.delete-confirm-cancel,.delete-confirm-btn{flex:1;padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:var(--button-border-radius);font-size:var(--font-size-small);font-weight:var(--font-weight-medium);cursor:pointer;transition:opacity .15s}.delete-confirm-cancel{background:var(--bg-hover);color:var(--text-primary)}.delete-confirm-cancel:hover{background:var(--border-light)}.delete-confirm-btn{background:var(--danger-color, #e74c3c);color:#fff}.delete-confirm-btn:hover{opacity:.9}.formatting-toolbar{background:var(--bg-surface-low);border-radius:var(--input-border-radius) var(--input-border-radius) 0 0;box-shadow:inset 1px 0 0 var(--border-subtle),inset -1px 0 0 var(--border-subtle),inset 0 1px 0 var(--border-subtle);padding:0 var(--spacing-sm);max-height:0;overflow:hidden;pointer-events:none;transition:max-height .25s ease-out,padding .25s ease-out,box-shadow .25s;z-index:10}.formatting-toolbar.visible{max-height:100px;padding:var(--spacing-xs) var(--spacing-sm);pointer-events:auto}.formatting-toolbar-inner{display:flex;align-items:center;justify-content:flex-start;gap:var(--spacing-xs);flex-wrap:wrap}.format-btn-item{flex-shrink:0;width:var(--button-size);height:var(--button-size);background:transparent;border:none;border-radius:var(--button-border-radius);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:color .15s,background-color .15s,transform .1s}.format-btn-item:hover{color:var(--text-primary);background:var(--bg-hover)}.format-btn-item:active{transform:scale(.92)}.format-btn-item svg{width:var(--icon-size-small);height:var(--icon-size-small)}.format-btn-item:nth-child(8):before{content:"";position:absolute;left:calc(-1 * var(--spacing-xs) / 2);top:25%;height:50%;width:1px;background:var(--border-light)}.format-btn-item:nth-child(8){position:relative;margin-left:var(--spacing-xs)}.note-input{display:flex;align-items:flex-end;padding:0 var(--spacing-md);min-height:var(--input-min-height);padding-top:0;padding-bottom:var(--spacing-sm);background:var(--bg-page)}.input-wrapper{flex:1}.input-wrapper.toolbar-open .input-container{border-top-left-radius:0;border-top-right-radius:0;box-shadow:inset 1px 0 0 var(--border-subtle),inset -1px 0 0 var(--border-subtle),inset 0 -1px 0 var(--border-subtle);transition:box-shadow .2s,border-radius 0s}.input-wrapper:not(.toolbar-open) .input-container{transition:box-shadow .1s .2s,border-radius 0s .2s}.input-wrapper.toolbar-open:focus-within .input-container{box-shadow:inset 1px 0 0 var(--accent-primary),inset -1px 0 0 var(--accent-primary),inset 0 -1px 0 var(--accent-primary)}.input-wrapper.toolbar-open:focus-within .formatting-toolbar{box-shadow:inset 1px 0 0 var(--accent-primary),inset -1px 0 0 var(--accent-primary),inset 0 1px 0 var(--accent-primary)}.input-container{display:flex;align-items:flex-end;background:var(--bg-surface-low);border:none;box-shadow:inset 0 0 0 1px var(--border-subtle);border-radius:var(--input-border-radius);padding:var(--input-padding);min-height:var(--input-min-height);transition:box-shadow .2s ease-in-out}.input-container:focus-within{box-shadow:inset 0 0 0 1px var(--accent-primary)}.input-container textarea{flex:1;border:none;background:transparent;resize:none;font-size:var(--font-size-base);line-height:var(--line-height);color:var(--text-primary);min-height:var(--button-size);padding:var(--spacing-xs) 0;overflow-y:hidden;font-family:inherit}.input-container textarea::placeholder{color:var(--text-tertiary)}.input-container textarea:focus{outline:none}.attachment-btn{flex-shrink:0;width:var(--button-size);height:var(--button-size);background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:color .2s;margin-right:var(--spacing-xs)}.attachment-btn:hover:not(:disabled){color:var(--text-primary)}.attachment-btn:disabled{opacity:.4;cursor:not-allowed}.attachment-btn svg{width:var(--icon-size-small);height:var(--icon-size-small)}.format-btn{flex-shrink:0;width:var(--button-size);height:var(--button-size);background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:color .2s,opacity .2s ease-in-out;margin-left:var(--spacing-xs);opacity:0;pointer-events:none}.format-btn.visible{opacity:1;pointer-events:auto}.format-btn:hover{color:var(--text-primary)}.format-btn svg{width:var(--icon-size-small);height:var(--icon-size-small)}.send-btn{flex-shrink:0;width:var(--button-size);height:var(--button-size);background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--accent-primary);transition:opacity .2s,transform .1s;margin-left:var(--spacing-sm)}.send-btn:disabled{opacity:.4;cursor:not-allowed}.send-btn:not(:disabled):hover{opacity:.9}.send-btn:not(:disabled):active{transform:scale(.95)}.send-btn svg{display:block;width:28px;height:28px;min-width:28px;min-height:28px}:root[data-large-ui=true] .send-btn svg{width:var(--icon-size-large);height:var(--icon-size-large)}@media(max-width:500px){:root:not([data-large-ui=true]) .input-container{padding:8px}:root:not([data-large-ui=true]) .attachment-btn,:root:not([data-large-ui=true]) .format-btn{width:36px;height:36px;margin-right:2px}:root:not([data-large-ui=true]) .send-btn{width:36px;height:36px;margin-left:4px}.send-btn svg{width:30px;height:30px;min-width:30px;min-height:30px}:root:not([data-large-ui=true]) .input-container textarea{min-height:36px;padding:8px 0}}:root[data-bg-pattern] .note-input,:root[data-custom-bg] .note-input{background:transparent}.input-container.drag-over{box-shadow:inset 0 0 0 2px var(--accent-primary);background:color-mix(in srgb,var(--accent-primary) 5%,var(--bg-surface-low))}.drop-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--accent-primary) 10%,var(--bg-surface-low) 90%);border-radius:var(--input-border-radius);z-index:10;pointer-events:none}.drop-overlay span{color:var(--accent-primary);font-size:var(--font-size-base);font-weight:500}.input-container{position:relative}.migration-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:2000;padding:var(--spacing-md);animation:migrationFadeIn .2s ease-out}@keyframes migrationFadeIn{0%{opacity:0}to{opacity:1}}.migration-dialog{background:var(--bg-card);border-radius:var(--card-border-radius);width:100%;max-width:480px;max-height:90vh;overflow-y:auto;box-shadow:0 8px 32px #0000004d;animation:migrationScaleIn .2s ease-out}@keyframes migrationScaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.migration-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--border-light)}.migration-header h2{margin:0;font-size:var(--font-size-large);font-weight:var(--font-weight-semibold);color:var(--text-primary)}.migration-close-btn{width:32px;height:32px;border:none;background:transparent;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:background-color .15s,color .15s}.migration-close-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.migration-content{padding:var(--spacing-lg)}.migration-current{margin-bottom:var(--spacing-lg);padding:var(--spacing-md);background:var(--bg-surface);border-radius:var(--card-border-radius)}.migration-current h3,.migration-new h3{margin:0 0 var(--spacing-sm);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--text-primary)}.migration-endpoint{margin:0;font-size:var(--font-size-small);color:var(--text-secondary);word-break:break-all}.migration-bucket{margin:var(--spacing-xs) 0 0;font-size:var(--font-size-small);color:var(--text-secondary)}.migration-count{margin:var(--spacing-sm) 0 0;font-size:var(--font-size-small);font-weight:var(--font-weight-medium);color:var(--accent-primary)}.migration-new{margin-bottom:var(--spacing-md)}.migration-field{margin-bottom:var(--spacing-sm)}.migration-field label{display:block;margin-bottom:var(--spacing-xs);font-size:var(--font-size-small);font-weight:var(--font-weight-medium);color:var(--text-secondary)}.migration-field input{width:100%;padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--border-light);border-radius:var(--input-border-radius);background:var(--bg-input);color:var(--text-primary);font-size:var(--font-size-base);box-sizing:border-box;transition:border-color .15s}.migration-field input:focus{outline:none;border-color:var(--accent-primary)}.migration-field input::placeholder{color:var(--text-tertiary)}.migration-test-result{margin-top:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--button-border-radius);font-size:var(--font-size-small)}.migration-test-result.success{background:#2ecc7126;color:#27ae60}.migration-test-result.error{background:#e74c3c26;color:#e74c3c}.migration-info{margin:var(--spacing-md) 0;padding:var(--spacing-sm) var(--spacing-md);background:#7c6fbd1a;border-radius:var(--button-border-radius);font-size:var(--font-size-small);color:var(--text-secondary);line-height:1.5}.migration-actions{display:flex;gap:var(--spacing-sm);margin-top:var(--spacing-md)}.migration-test-btn,.migration-start-btn{flex:1;padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:var(--button-border-radius);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);cursor:pointer;transition:opacity .15s,background-color .15s}.migration-test-btn{background:var(--bg-hover);color:var(--text-primary)}.migration-test-btn:hover:not(:disabled){background:var(--border-light)}.migration-start-btn{background:var(--accent-primary);color:#fff}.migration-start-btn:hover:not(:disabled){opacity:.9}.migration-test-btn:disabled,.migration-start-btn:disabled{opacity:.5;cursor:not-allowed}.migration-progress{text-align:center;padding:var(--spacing-lg) 0}.migration-progress h3{margin:0 0 var(--spacing-lg);font-size:var(--font-size-large);color:var(--text-primary)}.migration-progress-info{display:flex;justify-content:space-between;margin-bottom:var(--spacing-sm);font-size:var(--font-size-small);color:var(--text-secondary)}.migration-progress-bar{height:8px;background:var(--bg-surface);border-radius:4px;overflow:hidden}.migration-progress-fill{height:100%;background:var(--accent-primary);border-radius:4px;transition:width .3s ease}.migration-current-file{margin:var(--spacing-md) 0;font-size:var(--font-size-small);color:var(--text-secondary);min-height:1.5em;word-break:break-all}.migration-warning{margin:var(--spacing-lg) 0 0;font-size:var(--font-size-small);font-weight:var(--font-weight-medium);color:var(--text-tertiary)}.migration-result{text-align:center;padding:var(--spacing-lg) 0}.migration-result-icon{margin-bottom:var(--spacing-md)}.migration-result.success .migration-result-icon{color:#27ae60}.migration-result.error .migration-result-icon{color:#e74c3c}.migration-result h3{margin:0 0 var(--spacing-sm);font-size:var(--font-size-large);color:var(--text-primary)}.migration-result p{margin:var(--spacing-xs) 0;font-size:var(--font-size-base);color:var(--text-secondary)}.migration-failed-files{margin:var(--spacing-md) 0;padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-surface);border-radius:var(--button-border-radius);text-align:left;max-height:150px;overflow-y:auto}.migration-failed-files p{margin:0 0 var(--spacing-xs);font-size:var(--font-size-small);font-weight:var(--font-weight-medium)}.migration-failed-files ul{margin:0;padding:0 0 0 var(--spacing-md);font-size:var(--font-size-small);color:var(--text-secondary)}.migration-failed-files li{margin:var(--spacing-xs) 0;word-break:break-all}.migration-done-btn{display:inline-block;min-width:120px;margin-top:var(--spacing-lg);padding:var(--spacing-sm) var(--spacing-xl);border:none;border-radius:var(--button-border-radius);background:var(--accent-primary);color:#fff;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);cursor:pointer;transition:opacity .15s}.migration-done-btn:hover{opacity:.9}.storage-bar-container{display:flex;flex-direction:column;gap:var(--spacing-xs);margin-top:var(--spacing-xs)}.storage-bar-track{height:8px;background:var(--border-light);border-radius:4px;overflow:hidden}.storage-bar-fill{height:100%;background:var(--accent-primary);border-radius:4px;transition:width .3s ease}.storage-bar-fill.storage-bar-warning{background:var(--warning-color)}.storage-bar-fill.storage-bar-danger{background:var(--danger-color)}.storage-bar-label{font-size:var(--font-size-small);color:var(--text-secondary);text-align:right}.promo-code-container{margin-top:var(--spacing-md);padding-top:var(--spacing-md);border-top:1px solid var(--border-subtle)}.promo-code-label{font-size:var(--font-size-small);color:var(--text-secondary);margin-bottom:var(--spacing-sm)}.promo-code-input-row{display:flex;gap:var(--spacing-sm)}.promo-code-input{flex:1;padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--border-light);border-radius:var(--button-border-radius);background:var(--bg-card);color:var(--text-primary);font-size:var(--font-size-base);font-family:monospace;text-transform:uppercase;letter-spacing:.5px}.promo-code-input:focus{outline:none;border-color:var(--accent-primary)}.promo-code-input:disabled{opacity:.5;cursor:not-allowed}.promo-code-input::placeholder{color:var(--text-tertiary);text-transform:uppercase}.promo-code-btn{padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:var(--button-border-radius);background:var(--accent-primary);color:#fff;font-size:var(--font-size-small);font-weight:var(--font-weight-medium);cursor:pointer;transition:opacity .2s;white-space:nowrap}.promo-code-btn:hover:not(:disabled){opacity:.9}.promo-code-btn:disabled{opacity:.5;cursor:not-allowed}.promo-code-result{margin-top:var(--spacing-sm);padding:var(--spacing-sm);border-radius:var(--button-border-radius);font-size:var(--font-size-small)}.promo-code-result.success{background:#4a9d5b26;color:var(--success-color)}.promo-code-result.error{background:#d4464626;color:var(--danger-color)}.settings-tab-content .account-section{background:transparent;border:none;border-bottom:1px solid var(--border-subtle);border-radius:0;padding:var(--spacing-md) var(--spacing-lg);margin-bottom:0}.account-loading{padding:var(--spacing-md);color:var(--text-tertiary);font-size:var(--font-size-small);text-align:center}.account-email-section{margin-bottom:var(--spacing-md)}.account-email-display{display:flex;align-items:center;gap:var(--spacing-sm);margin-top:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--button-border-radius)}.account-email-value{flex:1;font-size:var(--font-size-base);color:var(--text-primary)}.account-email-check{color:var(--success-color);font-size:16px}.account-email-form{display:flex;gap:var(--spacing-sm);margin-top:var(--spacing-sm)}.account-email-input{flex:1;padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--border-light);border-radius:var(--button-border-radius);background:var(--bg-card);color:var(--text-primary);font-size:var(--font-size-base)}.account-email-input:focus{outline:none;border-color:var(--accent-primary)}.account-email-input:disabled{opacity:.5;cursor:not-allowed}.account-email-btn{padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:var(--button-border-radius);background:var(--accent-primary);color:#fff;font-size:var(--font-size-small);font-weight:var(--font-weight-medium);cursor:pointer;transition:opacity .2s;white-space:nowrap}.account-email-btn:hover:not(:disabled){opacity:.9}.account-email-btn:disabled{opacity:.5;cursor:not-allowed}.account-email-error{margin-top:var(--spacing-sm);font-size:var(--font-size-small);color:var(--danger-color)}.account-storage-section{margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-md);border-bottom:1px solid var(--border-subtle)}.account-tier-header{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-xs)}.account-tier-label{font-size:var(--font-size-base);color:var(--text-primary)}.account-tier-badge{padding:2px 8px;border-radius:4px;font-size:var(--font-size-small);font-weight:var(--font-weight-bold);text-transform:uppercase;letter-spacing:.5px}.tier-badge-free{background:var(--border-light);color:var(--text-secondary)}.tier-badge-pro{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff}.tier-badge-unlimited{background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff}.account-tier-expiry{font-size:var(--font-size-small);color:var(--text-tertiary);margin-bottom:var(--spacing-sm)}.account-upgrade-btn{width:100%;padding:var(--spacing-sm) var(--spacing-md);margin-top:var(--spacing-md);border:1px solid var(--border-light);border-radius:var(--button-border-radius);background:var(--bg-card);color:var(--text-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);cursor:not-allowed;display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);opacity:.7}.account-coming-soon{font-size:var(--font-size-xs);color:var(--text-tertiary);font-weight:400}.account-promo-section{margin-top:var(--spacing-sm)}.account-promo-disabled{padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-card);border:1px dashed var(--border-light);border-radius:var(--button-border-radius);color:var(--text-tertiary);font-size:var(--font-size-small);text-align:center}.account-sync-section{margin-bottom:var(--spacing-md)}.sync-storage-value{font-family:var(--font-mono, monospace);font-size:var(--font-size-small)}.media-gallery-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--spacing-md)}.media-gallery-modal{background:var(--bg-card);border-radius:var(--card-border-radius);width:100%;max-width:800px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 40px #0000004d}.media-gallery-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md);border-bottom:1px solid var(--border-light)}.media-gallery-header h2{margin:0;font-size:var(--font-size-lg);color:var(--text-primary)}.media-gallery-close{background:none;border:none;cursor:pointer;color:var(--text-secondary);padding:var(--spacing-xs);border-radius:var(--button-border-radius);transition:color .2s,background-color .2s}.media-gallery-close:hover{color:var(--text-primary);background:var(--bg-hover)}.media-gallery-toolbar{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm) var(--spacing-md);border-bottom:1px solid var(--border-light);gap:var(--spacing-md);flex-wrap:wrap}.media-gallery-filters{display:flex;gap:var(--spacing-xs)}.filter-btn{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--button-border-radius);padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-small);color:var(--text-secondary);cursor:pointer;transition:all .2s}.filter-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.filter-btn.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff}.media-gallery-sort{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--button-border-radius);padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-small);color:var(--text-primary);cursor:pointer}.media-gallery-grid{flex:1;overflow-y:auto;padding:var(--spacing-md);display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));grid-auto-rows:min-content;gap:var(--spacing-md);align-content:start}.media-gallery-empty{grid-column:1 / -1;text-align:center;padding:var(--spacing-xl);color:var(--text-tertiary)}.media-gallery-item{background:var(--bg-surface);border:1px solid var(--border-light);border-radius:var(--card-border-radius);overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s}.media-gallery-item:hover{border-color:var(--border-medium);box-shadow:0 4px 12px #0000001a}.media-gallery-item.image{cursor:pointer}.media-item-preview{height:120px;min-height:120px;display:flex;align-items:center;justify-content:center;background:var(--bg-page);border-bottom:1px solid var(--border-light);flex-shrink:0}.media-item-preview img{max-width:100%;max-height:100%;object-fit:contain}.media-item-thumbnail{width:100%;height:100%;object-fit:cover;animation:thumbnail-fade-in .3s ease-out}@keyframes thumbnail-fade-in{0%{opacity:0}to{opacity:1}}.media-item-skeleton{width:100%;height:100%;background:linear-gradient(90deg,var(--bg-surface) 25%,var(--bg-hover) 50%,var(--bg-surface) 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite ease-in-out}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.media-item-placeholder,.media-item-file-icon{color:var(--text-tertiary)}.media-item-error{color:var(--danger-color);opacity:.6}.media-item-removed{color:var(--text-tertiary);opacity:.5}.media-item-info{padding:var(--spacing-sm);display:flex;flex-direction:column;gap:2px;flex-shrink:0}.media-item-filename{font-size:var(--font-size-small);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.media-item-meta{font-size:var(--font-size-xs);color:var(--text-tertiary)}.media-item-status{font-size:var(--font-size-xs);display:flex;align-items:center;gap:var(--spacing-xs)}.media-item-status.pending{color:var(--warning-color)}.media-item-status.failed{color:var(--danger-color)}.media-item-orphaned{font-size:var(--font-size-xs);color:var(--text-tertiary);font-style:italic}.media-item-actions{display:flex;gap:var(--spacing-xs);padding:0 var(--spacing-sm) var(--spacing-sm);flex-shrink:0}.media-item-action{flex:1;background:var(--bg-page);border:1px solid var(--border-subtle);border-radius:var(--button-border-radius);padding:var(--spacing-xs);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.media-item-action:hover{background:var(--bg-hover);color:var(--text-primary)}.media-item-action.delete:hover{background:var(--danger-bg);border-color:var(--danger-color);color:var(--danger-color)}.media-preview-overlay{position:absolute;inset:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:10}.media-preview-content{max-width:90%;max-height:90%;position:relative}.media-preview-image{max-width:100%;max-height:80vh;object-fit:contain;border-radius:var(--card-border-radius)}.media-preview-loading,.media-preview-error{color:#fff;padding:var(--spacing-xl)}.media-preview-close{position:absolute;top:-40px;right:0;background:none;border:none;color:#fff;cursor:pointer;padding:var(--spacing-sm)}.media-delete-confirm-overlay{position:absolute;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:20}.media-delete-confirm{background:var(--bg-card);border-radius:var(--card-border-radius);padding:var(--spacing-lg);text-align:center;max-width:300px}.media-delete-confirm p{margin:0 0 var(--spacing-sm);color:var(--text-primary)}.media-delete-warning{color:var(--text-tertiary);font-size:var(--font-size-small)}.media-delete-actions{display:flex;gap:var(--spacing-sm);margin-top:var(--spacing-md)}.media-delete-cancel,.media-delete-confirm-btn{flex:1;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--button-border-radius);font-size:var(--font-size-small);cursor:pointer;transition:opacity .2s}.media-delete-cancel{background:var(--bg-surface);border:1px solid var(--border-subtle);color:var(--text-primary)}.media-delete-confirm-btn{background:var(--danger-color);border:none;color:#fff}.media-delete-cancel:hover,.media-delete-confirm-btn:hover{opacity:.9}@media(max-width:500px){.media-gallery-modal{max-height:90vh}.media-gallery-grid{grid-template-columns:repeat(2,1fr);gap:var(--spacing-sm);padding:var(--spacing-sm)}.media-gallery-toolbar{flex-direction:column;align-items:stretch}.media-gallery-filters{overflow-x:auto;padding-bottom:var(--spacing-xs)}}.settings-overlay{position:fixed;inset:0;background:#0006;display:flex;align-items:flex-end;justify-content:center;z-index:1000;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.settings-menu{background:var(--bg-elevated);border-radius:var(--card-border-radius) var(--card-border-radius) 0 0;width:100%;max-width:var(--settings-max-width);height:80vh;display:flex;flex-direction:column;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.settings-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-lg);border-bottom:1px solid var(--border-subtle)}.settings-header h2{margin:0;font-size:var(--font-size-large);font-weight:var(--font-weight-bold);color:var(--text-primary)}.close-btn{width:var(--button-size);height:var(--button-size);border-radius:50%;background:var(--bg-hover);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:background-color .2s}.close-btn:hover{background:var(--border-light)}.close-btn svg{width:var(--icon-size-medium);height:var(--icon-size-medium)}.settings-tabs{display:flex;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm) 0;flex-shrink:0}.settings-tab{padding:var(--spacing-xs) var(--spacing-md);background:var(--bg-surface-low);border:1px solid var(--border-subtle);border-bottom:none;border-radius:var(--card-border-radius) var(--card-border-radius) 0 0;color:var(--text-tertiary);font-size:var(--font-size-small);font-weight:var(--font-weight-medium);cursor:pointer;transition:color .2s,background-color .2s;position:relative;margin-bottom:-1px}.settings-tab:hover{cursor:pointer}.settings-tab.active{color:var(--text-primary);background:var(--bg-elevated);border-color:var(--border-subtle);z-index:1}.settings-tab-content{overflow-y:auto;flex:1;background:var(--bg-elevated);border-top:1px solid var(--border-subtle);position:relative}.tab-panel{animation:fadeInTab .2s ease-out}@keyframes fadeInTab{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.settings-section{padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--border-subtle)}.setting-item{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md);margin-top:var(--spacing-md)}.setting-item:first-child{margin-top:0}.setting-info{flex:1}.setting-label{display:block;font-size:var(--font-size-base);color:var(--text-primary);margin-bottom:2px}.setting-description{display:block;font-size:var(--font-size-small);color:var(--text-tertiary)}.toggle{position:relative;display:inline-block;width:51px;height:31px;flex-shrink:0}.toggle input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;inset:0;background-color:var(--border-light);border-radius:31px;transition:background-color .3s}.toggle-slider:before{position:absolute;content:"";height:27px;width:27px;left:2px;bottom:2px;background-color:#fff;border-radius:50%;transition:transform .3s;box-shadow:0 2px 4px #00000026}.toggle input:checked+.toggle-slider{background-color:var(--accent-primary)}.toggle input:checked+.toggle-slider:before{transform:translate(20px)}.setting-input{width:100%;padding:var(--spacing-sm);margin-top:var(--spacing-sm);border:1px solid var(--border-light);border-radius:var(--card-border-radius);background:var(--bg-card);color:var(--text-primary);font-size:var(--font-size-base);font-family:monospace}.setting-input:focus{outline:none;border-color:var(--accent-primary)}.status-indicator{padding:var(--spacing-xs) var(--spacing-sm);border-radius:12px;font-size:var(--font-size-small);font-weight:var(--font-weight-medium)}.status-indicator.online{background:#4a9d5b26;color:var(--success-color)}.status-indicator.offline{background:#d4952a26;color:var(--warning-color)}.action-btn{padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:var(--button-border-radius);background:var(--bg-hover);color:var(--text-primary);font-size:var(--font-size-small);font-weight:var(--font-weight-medium);cursor:pointer;transition:background-color .2s}.action-btn:hover{background:var(--border-light)}.section-header{font-size:var(--font-size-small);font-weight:var(--font-weight-bold);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--spacing-sm)}.theme-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-sm);margin-top:var(--spacing-sm);margin-bottom:var(--spacing-md)}.theme-card{padding:var(--spacing-sm) var(--spacing-xs);background:var(--bg-card);border:2px solid var(--border-light);border-radius:var(--card-border-radius);cursor:pointer;text-align:center;transition:border-color .2s,box-shadow .2s}.theme-card:hover{border-color:var(--text-tertiary)}.theme-card.selected{border-color:var(--accent-primary);box-shadow:0 0 0 2px var(--accent-primary-dim)}.theme-card-name{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);color:var(--text-primary);margin-bottom:var(--spacing-xs);line-height:1.2}.theme-card-radio{width:16px;height:16px;border-radius:50%;border:2px solid var(--border-light);margin:0 auto;display:flex;align-items:center;justify-content:center}.theme-card.selected .theme-card-radio{border-color:var(--accent-primary)}.theme-card.selected .theme-card-radio:after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent-primary)}.pattern-row{display:flex;align-items:center;gap:var(--spacing-sm);margin-top:var(--spacing-sm)}.segmented-control{display:flex;background:var(--bg-page);border-radius:var(--button-border-radius);padding:2px;gap:2px}.segmented-option{padding:8px 16px;background:transparent;border:none;border-radius:calc(var(--button-border-radius) - 2px);cursor:pointer;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:var(--text-tertiary);transition:background-color .2s,color .2s}.segmented-option:hover{color:var(--text-secondary)}.segmented-option.selected{background:var(--bg-card);color:var(--text-primary);box-shadow:0 1px 3px #00000014}.fabric-picker{display:flex;gap:var(--spacing-xs);margin-top:var(--spacing-sm)}.fabric-swatch{flex:1;aspect-ratio:1;max-width:48px;border:2px solid var(--border-light);border-radius:var(--button-border-radius);cursor:pointer;transition:border-color .2s,transform .1s;position:relative}.fabric-swatch:hover{border-color:var(--text-tertiary);transform:scale(1.05)}.fabric-swatch.selected{border-color:var(--accent-primary);box-shadow:0 0 0 2px var(--accent-primary-dim)}.fabric-swatch.fabric-off{background:var(--bg-page);display:flex;align-items:center;justify-content:center}.fabric-swatch.fabric-off:after{content:"×";font-size:18px;color:var(--text-tertiary)}.mini-section{background:var(--bg-surface-low);border-radius:var(--card-border-radius);padding:var(--spacing-sm);margin-top:var(--spacing-sm)}.mini-section .setting-item{padding:var(--spacing-xs) 0}.mini-section .setting-item:first-child{padding-top:0}.mini-section .mini-setting{padding-left:var(--spacing-lg)}.mini-setting .setting-label{font-size:var(--font-size-small)}.mini-setting .setting-description{font-size:var(--font-size-xs)}.toggle.toggle-small{width:42px;height:26px}.toggle.toggle-small .toggle-slider{border-radius:26px}.toggle.toggle-small .toggle-slider:before{height:22px;width:22px}.toggle.toggle-small input:checked+.toggle-slider:before{transform:translate(16px)}.tape-color-picker{display:flex;gap:var(--spacing-xs)}.tape-swatch{width:28px;height:28px;border:2px solid var(--border-light);border-radius:4px;cursor:pointer;transition:border-color .2s,transform .1s}.tape-swatch:hover{border-color:var(--text-tertiary);transform:scale(1.1)}.tape-swatch.selected{border-color:var(--accent-primary);box-shadow:0 0 0 2px var(--accent-primary-dim)}.pin-color-picker{display:flex;gap:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-md)}.pin-color-swatch{width:32px;height:32px;border:2px solid var(--border-light);border-radius:50%;cursor:pointer;transition:border-color .2s,transform .1s}.pin-color-swatch:hover{border-color:var(--text-tertiary);transform:scale(1.1)}.pin-color-swatch.selected{border-color:var(--text-primary);box-shadow:0 0 0 2px var(--accent-primary-dim)}.custom-bg-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-sm);margin-top:var(--spacing-sm)}.custom-bg-card{aspect-ratio:1;border:2px solid var(--border-light);border-radius:var(--card-border-radius);cursor:pointer;background-size:cover;background-position:center;transition:border-color .2s,transform .1s,box-shadow .2s;position:relative;overflow:hidden}.custom-bg-card:hover{border-color:var(--text-tertiary);transform:scale(1.02)}.custom-bg-card.selected{border-color:var(--accent-primary);box-shadow:0 0 0 2px var(--accent-primary-dim)}.custom-bg-card.custom-bg-off{background:var(--bg-surface-low);display:flex;align-items:center;justify-content:center}.custom-bg-card.custom-bg-off span{font-size:var(--font-size-small);color:var(--text-tertiary);font-weight:var(--font-weight-medium)}.logo-picker{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.logo-option{width:40px;height:40px;border:2px solid var(--border-light);border-radius:var(--button-border-radius);background:var(--bg-card);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:border-color .2s,color .2s}.logo-option:hover{border-color:var(--text-tertiary);color:var(--text-primary)}.logo-option.selected{border-color:var(--accent-primary);color:var(--accent-primary)}.logo-controls{display:flex;flex-direction:column;gap:var(--spacing-xs);margin-top:var(--spacing-sm);padding:var(--spacing-sm);background:var(--bg-surface-low);border-radius:var(--card-border-radius)}.toggle-row{display:flex;align-items:center;justify-content:space-between}.logo-controls select{padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--border-light);border-radius:var(--button-border-radius);background:var(--bg-card);color:var(--text-primary);font-size:var(--font-size-small)}.slider-control{display:flex;align-items:center;gap:var(--spacing-xs)}.slider-control input[type=range]{width:80px;height:4px;-webkit-appearance:none;appearance:none;background:var(--border-light);border-radius:2px;cursor:pointer}.slider-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent-primary);cursor:pointer}.slider-control input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent-primary);cursor:pointer;border:none}.slider-value{min-width:20px;text-align:center;font-size:var(--font-size-small);color:var(--text-secondary)}.relay-list{display:flex;flex-direction:column;gap:var(--spacing-xs);margin-top:var(--spacing-sm)}.relay-item{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm);background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--button-border-radius)}.relay-url{font-family:monospace;font-size:var(--font-size-small);color:var(--text-secondary);word-break:break-all;flex:1}.relay-remove-btn{width:24px;height:24px;border:none;background:transparent;color:var(--text-tertiary);font-size:18px;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color .2s,color .2s;flex-shrink:0;margin-left:var(--spacing-sm)}.relay-remove-btn:hover:not(:disabled){background:var(--danger-bg);color:var(--danger-color)}.relay-remove-btn:disabled{opacity:.3;cursor:not-allowed}.relay-add{display:flex;gap:var(--spacing-sm);margin-top:var(--spacing-sm)}.relay-add .setting-input{flex:1;margin-top:0}.relay-add-btn{padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:var(--button-border-radius);background:var(--accent-primary);color:#fff;font-size:var(--font-size-small);font-weight:var(--font-weight-medium);cursor:pointer;transition:opacity .2s;flex-shrink:0}.relay-add-btn:hover:not(:disabled){opacity:.9}.relay-add-btn:disabled{opacity:.5;cursor:not-allowed}.relay-error{display:block;margin-top:var(--spacing-xs);font-size:var(--font-size-small);color:var(--danger-color)}.relay-restart-notice{margin-top:var(--spacing-sm);padding:var(--spacing-sm);background:var(--warning-bg, rgba(212, 149, 42, .15));border-radius:var(--button-border-radius);font-size:var(--font-size-small);color:var(--warning-color);text-align:center}.setting-input.input-error{border-color:var(--danger-color)}.notebook-style-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-sm);margin-top:var(--spacing-sm)}.notebook-style-card{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm);background:var(--bg-card);border:2px solid var(--border-light);border-radius:var(--card-border-radius);cursor:pointer;transition:border-color .2s,box-shadow .2s}.notebook-style-card:hover{border-color:var(--text-tertiary)}.notebook-style-card.selected{border-color:var(--accent-primary);box-shadow:0 0 0 2px var(--accent-primary-dim)}.notebook-style-preview{width:100%;aspect-ratio:4 / 3;background:var(--bg-card);border-radius:2px}.notebook-style-name{font-size:var(--font-size-small);font-weight:var(--font-weight-medium);color:var(--text-primary)}.notebook-style-preview.notebook-style-brutalist{border:2px solid var(--notebook-border, #161616);box-shadow:3px 3px #00000021}.notebook-style-preview.notebook-style-smacked{border-radius:6px;border:1px solid var(--notebook-border, #161616);box-shadow:2px 4px 0 var(--notebook-border, #161616)}.landing-page-picker{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-top:var(--spacing-sm)}.radio-option{display:flex;align-items:center;gap:var(--spacing-sm);cursor:pointer}.radio-option input[type=radio]{width:18px;height:18px;margin:0;accent-color:var(--accent-primary);cursor:pointer}.radio-label{font-size:var(--font-size-small);color:var(--text-primary)}.notebook-select{margin-left:auto;padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--border-light);border-radius:var(--button-border-radius);background:var(--bg-card);color:var(--text-primary);font-size:var(--font-size-small);cursor:pointer;min-width:120px}.notebook-select:disabled{opacity:.5;cursor:not-allowed}.notebook-select:focus{outline:none;border-color:var(--accent-primary)}.storage-toggle-btn{width:100%;padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-page);border:1px solid var(--border-subtle);border-radius:var(--card-border-radius);color:var(--text-primary);font-size:var(--font-size-small);cursor:pointer;transition:background-color .2s;margin-top:var(--spacing-sm)}.storage-toggle-btn:hover{background:var(--bg-elevated)}.storage-config-form{margin-top:var(--spacing-md);padding:var(--spacing-md);background:var(--bg-page);border-radius:var(--card-border-radius)}.storage-field{margin-bottom:var(--spacing-md)}.storage-field label{display:block;margin-bottom:var(--spacing-xs);color:var(--text-secondary);font-size:var(--font-size-small)}.storage-field .setting-input{width:100%;box-sizing:border-box}.storage-test-result{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--card-border-radius);font-size:var(--font-size-small);margin-bottom:var(--spacing-md)}.storage-test-result.success{background:var(--pin-green-bg);color:var(--text-primary)}.storage-test-result.error{background:var(--pin-red-bg);color:var(--text-primary)}.storage-actions{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}.storage-test-btn,.storage-save-btn,.storage-clear-btn{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--card-border-radius);font-size:var(--font-size-small);cursor:pointer;transition:opacity .2s}.storage-test-btn{background:var(--bg-elevated);border:1px solid var(--border-subtle);color:var(--text-primary)}.storage-save-btn{background:var(--accent-primary);border:none;color:#fff}.storage-clear-btn{background:transparent;border:1px solid var(--border-subtle);color:var(--text-secondary)}.storage-test-btn:disabled,.storage-save-btn:disabled{opacity:.5;cursor:not-allowed}.storage-info{margin-top:var(--spacing-md);margin-bottom:0;color:var(--text-muted);font-size:var(--font-size-xs);line-height:1.4}.media-settings-header{margin-top:var(--spacing-lg)}.storage-gallery-btn{width:100%;padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-page);border:1px solid var(--border-subtle);border-radius:var(--card-border-radius);color:var(--text-primary);font-size:var(--font-size-small);cursor:pointer;transition:background-color .2s;margin-top:var(--spacing-md)}.storage-gallery-btn:hover{background:var(--bg-elevated)}.storage-migrate-btn{width:100%;padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-page);border:1px solid var(--border-subtle);border-radius:var(--card-border-radius);color:var(--text-primary);font-size:var(--font-size-small);cursor:pointer;transition:background-color .2s;margin-top:var(--spacing-sm)}.storage-migrate-btn:hover{background:var(--bg-elevated)}.account-overlay{position:fixed;inset:0;background:var(--bg-page);z-index:1100;overflow-y:auto}.account-screen{max-width:var(--settings-max-width);margin:0 auto;min-height:100vh;background:var(--bg-elevated)}.account-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-lg);border-bottom:1px solid var(--border-subtle);position:sticky;top:0;background:var(--bg-elevated);z-index:10}.account-header h2{margin:0;font-size:var(--font-size-large);font-weight:var(--font-weight-bold);color:var(--text-primary)}.back-btn{width:var(--button-size);height:var(--button-size);border-radius:50%;background:var(--bg-hover);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:background-color .2s}.back-btn:hover{background:var(--border-light)}.header-spacer{width:var(--button-size)}.account-content{padding:var(--spacing-md)}.account-section{padding:var(--spacing-md);margin-bottom:var(--spacing-md);background:var(--bg-card);border-radius:var(--card-border-radius);border:1px solid var(--border-subtle)}.account-section .section-header{font-size:var(--font-size-small);font-weight:var(--font-weight-bold);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--spacing-sm)}.section-description{font-size:var(--font-size-small);color:var(--text-secondary);line-height:1.5;margin:0 0 var(--spacing-md) 0}.owner-info{display:flex;align-items:center;gap:var(--spacing-sm)}.owner-id{font-family:monospace;font-size:var(--font-size-small);color:var(--text-secondary);background:var(--bg-surface-low);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--button-border-radius)}.account-btn{display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:var(--button-border-radius);background:var(--accent-primary);color:#fff;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);cursor:pointer;transition:opacity .2s,background-color .2s}.account-btn:hover{opacity:.9}.account-btn.secondary{background:var(--bg-hover);color:var(--text-primary)}.account-btn.secondary:hover{background:var(--border-light);opacity:1}.account-btn.small{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-small)}.account-btn.danger{background:var(--danger-color)}.account-btn.danger-outline{background:transparent;border:1px solid var(--danger-color);color:var(--danger-color)}.account-btn.danger-outline:hover{background:var(--danger-bg);opacity:1}.btn-icon{display:flex;align-items:center;justify-content:center}.protection-error{color:var(--danger-color);font-size:var(--font-size-small);margin:0 0 var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);background:var(--danger-bg);border-radius:var(--button-border-radius)}.protection-action-panel{background:var(--bg-surface-low);border-radius:var(--card-border-radius);padding:var(--spacing-md);margin-bottom:var(--spacing-md)}.protection-action-panel .action-description{font-size:var(--font-size-small);color:var(--text-secondary);line-height:1.5;margin:0 0 var(--spacing-md)}.protection-action-panel .action-warning{font-size:var(--font-size-small);color:var(--danger-color);line-height:1.5;margin:0 0 var(--spacing-md)}.protection-options{display:flex;flex-direction:column;gap:var(--spacing-md)}.protection-status{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-surface-low);border-radius:var(--button-border-radius)}.protection-status .status-icon{font-size:20px}.protection-status .status-text{font-size:var(--font-size-base);color:var(--text-primary);font-weight:var(--font-weight-medium)}.protection-buttons{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.mnemonic-display{background:var(--bg-surface-low);border-radius:var(--card-border-radius);padding:var(--spacing-md)}.mnemonic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.mnemonic-cell{display:flex;align-items:center;gap:6px;padding:var(--spacing-xs) var(--spacing-sm);background:var(--bg-card);border-radius:var(--button-border-radius);border:1px solid var(--border-subtle)}.mnemonic-number{color:var(--text-tertiary);font-size:11px;font-weight:500;min-width:18px}.mnemonic-word{font-family:monospace;font-size:var(--font-size-small);color:var(--text-primary);font-weight:500}.mnemonic-actions{display:flex;gap:var(--spacing-sm)}.mnemonic-confirm{background:var(--bg-surface-low);border-radius:var(--card-border-radius);padding:var(--spacing-md)}.confirm-warning{margin:0 0 var(--spacing-md) 0;font-size:var(--font-size-small);color:var(--text-secondary);line-height:1.5}.danger-zone{border-color:var(--danger-color);background:var(--danger-bg)}.danger-zone .section-header{color:var(--danger-color)}.danger-item{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm) 0;border-bottom:1px solid var(--border-subtle)}.danger-item:last-child{border-bottom:none;padding-bottom:0}.danger-item:first-of-type{padding-top:0}.danger-info{flex:1}.danger-label{display:block;font-size:var(--font-size-base);color:var(--text-primary);font-weight:var(--font-weight-medium);margin-bottom:2px}.danger-description{display:block;font-size:var(--font-size-small);color:var(--text-secondary)}.confirm-buttons{display:flex;gap:var(--spacing-xs)}@media(max-width:480px){.mnemonic-grid{grid-template-columns:repeat(2,1fr)}.protection-buttons{flex-direction:column}.protection-buttons .account-btn{width:100%}.danger-item{flex-direction:column;align-items:flex-start;gap:var(--spacing-sm)}.danger-item .account-btn,.danger-item .confirm-buttons{width:100%}.confirm-buttons{flex-direction:row}.confirm-buttons .account-btn{flex:1}}.notebook-item{position:relative;padding:1rem;min-height:100px;background:var(--bg-card, #f3f3f3);cursor:pointer}.notebook-item.notebook-style-brutalist{border:3px solid var(--notebook-border, #161616);box-shadow:6px 6px #00000021;transition:transform .15s ease,box-shadow .15s ease;will-change:transform}@media(hover:hover){.notebook-item.notebook-style-brutalist:hover{transform:translate(-2px,-2px);box-shadow:8px 8px #0000002e}}.notebook-item.notebook-style-brutalist:active{transform:translate(2px,2px);box-shadow:4px 4px #00000021}.notebook-item.notebook-style-brutalist.no-hover-animation{transition:none}@media(hover:hover){.notebook-item.notebook-style-brutalist.no-hover-animation:hover{transform:none;box-shadow:6px 6px #00000021}}.notebook-item.notebook-style-brutalist.no-hover-animation:active{transform:none;box-shadow:6px 6px #00000021}.notebook-item.notebook-style-smacked{border-radius:12px;border:2px solid var(--notebook-border, #161616);box-shadow:4px 8px 0 var(--notebook-border, #161616);margin-bottom:8px;margin-right:4px;transition:transform .15s ease;will-change:transform}@media(hover:hover){.notebook-item.notebook-style-smacked:hover{transform:translate(-2px,-2px)}}.notebook-item.notebook-style-smacked.no-hover-animation{transition:none}@media(hover:hover){.notebook-item.notebook-style-smacked.no-hover-animation:hover{transform:none}}.notebook-item-content{display:flex;flex-direction:column;gap:var(--spacing-xs)}.notebook-item-name{margin:0;font-size:var(--font-size-base);font-weight:var(--font-weight-bold);color:var(--text-primary);line-height:1.3}.notebook-item-name-input{font-size:var(--font-size-base);font-weight:var(--font-weight-bold);font-family:inherit;color:var(--text-primary);background:var(--bg-surface-low);border:1px solid var(--border-subtle);border-radius:var(--input-border-radius);padding:var(--spacing-xs) var(--spacing-sm);width:100%;outline:none}.notebook-item-name-input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 2px var(--accent-primary-dim)}.notebook-item-preview{margin:0;font-size:var(--font-size-small);color:var(--text-secondary);line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.notebook-item-date{font-size:calc(var(--font-size-small) - 2px);color:var(--text-tertiary)}.notebook-item-menu{position:fixed;z-index:10000;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--card-border-radius);padding:var(--spacing-xs) 0;box-shadow:0 4px 20px #0000001f;min-width:160px;animation:notebookMenuIn .15s ease-out}@keyframes notebookMenuIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes notebookMenuOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.notebook-item-menu.closing{animation:notebookMenuOut .15s ease-out forwards}.notebook-item-menu button{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);border:none;background:transparent;color:var(--text-primary);font-size:var(--font-size-small);cursor:pointer;text-align:left;border-radius:0;-webkit-appearance:none;appearance:none;transition:background-color .15s}.notebook-item-menu button:hover{background:var(--bg-hover)}.notebook-item-menu button:focus{outline:none}.notebook-item-menu button svg{width:var(--icon-size-small);height:var(--icon-size-small);color:var(--text-secondary);flex-shrink:0}.notebook-item-menu button.delete{color:var(--danger-color)}.notebook-item-menu button.delete svg{color:var(--danger-color)}.notebook-item-menu button.delete:hover{background:var(--danger-bg)}.notebook-item-menu button.has-submenu{justify-content:flex-start}.notebook-item-menu button.has-submenu .chevron{margin-left:auto;color:var(--text-tertiary)}.notebook-item-menu button.back-btn{color:var(--text-secondary);justify-content:flex-start}.notebook-item-menu button.back-btn svg{color:var(--text-tertiary)}.notebook-item-menu .menu-separator{height:1px;background:var(--border-subtle);margin:var(--spacing-xs) 0}.notebook-item-menu button.active-color{background:var(--bg-hover)}.notebook-item-menu button .check{margin-left:auto;color:var(--accent-primary)}.notebook-color-swatch{width:16px;height:16px;border-radius:50%;flex-shrink:0;border:1px solid rgba(0,0,0,.15)}.notebook-color-swatch.lavender{background:var(--bg-card)}.notebook-color-swatch.pink{background:var(--notebook-pink)}.notebook-color-swatch.cyan{background:var(--notebook-cyan)}.notebook-color-swatch.cream{background:var(--notebook-cream)}.notebook-color-swatch.mint{background:var(--notebook-mint)}.notebook-item.color-lavender{background:var(--bg-card)}.notebook-item.color-pink{background:var(--notebook-pink)}.notebook-item.color-cyan{background:var(--notebook-cyan)}.notebook-item.color-cream{background:var(--notebook-cream)}.notebook-item.color-mint{background:var(--notebook-mint)}.create-notebook-modal-backdrop{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--spacing-md);animation:modalBackdropFadeIn .15s ease-out}.create-notebook-modal{background:var(--bg-card);border-radius:var(--card-border-radius);box-shadow:var(--card-shadow);width:100%;max-width:400px;padding:var(--spacing-lg);animation:modalSlideIn .2s ease-out}.create-notebook-modal-title{margin:0 0 var(--spacing-lg) 0;font-size:var(--font-size-large);font-weight:var(--font-weight-bold);color:var(--text-primary);text-align:center}.create-notebook-modal-input{width:100%;padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-base);color:var(--text-primary);background:var(--bg-surface-low);border:1px solid var(--border-subtle);border-radius:var(--input-border-radius);outline:none;transition:border-color .15s ease,box-shadow .15s ease;box-sizing:border-box}.create-notebook-modal-input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-primary-dim)}.create-notebook-modal-input::placeholder{color:var(--text-tertiary)}.create-notebook-modal-input:disabled{opacity:.7;cursor:not-allowed}.create-notebook-modal-actions{display:flex;gap:var(--spacing-sm);margin-top:var(--spacing-lg);justify-content:flex-end}.create-notebook-modal-btn{padding:var(--spacing-sm) var(--spacing-lg);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);border-radius:var(--button-border-radius);border:none;cursor:pointer;transition:background-color .15s ease,opacity .15s ease}.create-notebook-modal-btn:disabled{opacity:.5;cursor:not-allowed}.create-notebook-modal-btn.primary{background:var(--accent-primary);color:#fff}.create-notebook-modal-btn.primary:hover:not(:disabled){background:var(--accent-primary);filter:brightness(1.1)}.create-notebook-modal-btn.secondary{background:var(--bg-hover);color:var(--text-primary)}.create-notebook-modal-btn.secondary:hover:not(:disabled){background:var(--bg-surface-low)}.notebooks-list-view{display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:var(--content-max-width);margin:0 auto;background:var(--bg-page)}.notebooks-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md);padding-top:max(var(--spacing-md),env(safe-area-inset-top));background:var(--bg-page);border-bottom:1px solid var(--border-subtle);flex-shrink:0;position:relative}@media(min-width:768px){.notebooks-header:before{content:"";position:absolute;top:0;bottom:-1px;left:50%;transform:translate(-50%);width:100vw;background:inherit;border-bottom:inherit;z-index:-1}}.notebooks-header-left{display:flex;align-items:center}.notebooks-logo-btn{display:flex;align-items:center;gap:0;background:none;border:none;padding:var(--spacing-xs);margin:calc(-1 * var(--spacing-xs));border-radius:var(--card-border-radius);font-family:inherit;font-size:var(--font-size-large);font-weight:var(--font-weight-bold);color:var(--text-primary);letter-spacing:-.3px}.notebooks-logo-btn .logo-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}.notebooks-logo-btn .logo-icon svg,.notebooks-logo-btn .logo-icon img{display:block;width:1.0435em;height:1.0435em;position:relative;left:2px;top:var(--logo-offset-y);vertical-align:middle}.notebooks-header-right{display:flex;align-items:center;gap:var(--spacing-sm)}.notebooks-create-btn{width:var(--button-size);height:var(--button-size);border-radius:50%;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:background-color .15s ease,color .15s ease}.notebooks-create-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.notebooks-create-btn svg{width:var(--icon-size-medium);height:var(--icon-size-medium)}.notebooks-search-btn{width:var(--button-size);height:var(--button-size);border-radius:50%;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:background-color .15s ease,color .15s ease}.notebooks-search-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.notebooks-search-btn>div{display:flex;align-items:center;justify-content:center;width:var(--icon-size-medium);height:var(--icon-size-medium)}.notebooks-search-btn svg{width:100%;height:100%}.notebooks-settings-btn{width:var(--button-size);height:var(--button-size);border-radius:50%;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:background-color .15s ease,color .15s ease}.notebooks-settings-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.notebooks-settings-btn svg{width:var(--icon-size-medium);height:var(--icon-size-medium)}@keyframes notebooks-gear-spin{0%{transform:rotate(0)}to{transform:rotate(90deg)}}.notebooks-settings-btn.spinning svg{animation:notebooks-gear-spin .5s ease-out forwards}.notebooks-content{flex:1;overflow-y:auto;padding:var(--spacing-md);padding-bottom:calc(var(--spacing-md) + env(safe-area-inset-bottom))}.notebooks-title{margin:0 0 var(--spacing-lg) 0;font-size:calc(var(--font-size-large) + 4px);font-weight:var(--font-weight-bold);color:var(--text-primary)}.notebooks-grid{display:flex;flex-direction:column;gap:var(--spacing-md);background:transparent}.notebooks-loading{display:flex;align-items:center;justify-content:center;padding:var(--spacing-lg);color:var(--text-secondary);font-size:var(--font-size-base)}.notebooks-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-lg);text-align:center}.notebooks-empty p{margin:0 0 var(--spacing-md) 0;color:var(--text-secondary);font-size:var(--font-size-base)}.notebooks-empty-create{padding:var(--spacing-sm) var(--spacing-lg);background:var(--accent-primary);color:#fff;border:none;border-radius:var(--card-border-radius);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);cursor:pointer;transition:background-color .15s ease}.notebooks-empty-create:hover{background:var(--accent-primary);filter:brightness(1.1)}.notebooks-syncing{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xl) var(--spacing-md);text-align:center;color:var(--text-secondary);min-height:200px}.notebooks-syncing h3{margin:var(--spacing-md) 0 var(--spacing-sm);color:var(--text-primary);font-size:1.1rem;font-weight:var(--font-weight-medium)}.notebooks-syncing p{margin:0;font-size:var(--font-size-small);max-width:280px;line-height:1.5}.notebooks-syncing-spinner{width:36px;height:36px;border:3px solid var(--border-color, #e5e5e5);border-top-color:var(--accent-primary, #4a9f4d);border-radius:50%;animation:notebooks-spin .8s linear infinite}@keyframes notebooks-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:root[data-bg-pattern] .notebooks-list-view,:root[data-custom-bg] .notebooks-list-view{background:transparent}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--spacing-md);animation:modalBackdropFadeIn .15s ease-out}@keyframes modalBackdropFadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:var(--bg-card);border-radius:var(--card-border-radius);box-shadow:var(--card-shadow);width:100%;max-width:400px;padding:var(--spacing-lg);animation:modalSlideIn .2s ease-out}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.sync-modal{text-align:center}.sync-modal-icon{margin-bottom:var(--spacing-md);color:var(--text-secondary)}.sync-modal-icon.warning{color:var(--color-warning, #f59e0b)}.sync-modal h3{margin:0 0 var(--spacing-sm) 0;font-size:var(--font-size-large);font-weight:var(--font-weight-bold);color:var(--text-primary)}.sync-modal p{margin:0 0 var(--spacing-sm) 0;color:var(--text-secondary);font-size:var(--font-size-base);line-height:1.5}.sync-modal-hint{font-size:var(--font-size-small);color:var(--text-tertiary);margin-top:var(--spacing-md)!important}.sync-modal-btn{margin-top:var(--spacing-lg);padding:var(--spacing-sm) var(--spacing-xl);background:var(--accent-primary);color:#fff;border:none;border-radius:var(--button-border-radius);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);cursor:pointer;transition:filter .15s ease}.sync-modal-btn:hover{filter:brightness(1.1)}.app{display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:var(--content-max-width);margin:0 auto;background:var(--bg-page)}.app-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md);padding-top:max(var(--spacing-md),env(safe-area-inset-top));background:var(--bg-header);border-bottom:1px solid var(--border-subtle);flex-shrink:0;position:relative}@media(min-width:768px){.app-header:before{content:"";position:absolute;top:0;bottom:-1px;left:50%;transform:translate(-50%);width:100vw;background:inherit;border-bottom:inherit;z-index:-1}}.logo-btn{display:flex;align-items:center;gap:0;background:none;border:none;cursor:pointer;padding:var(--spacing-xs);margin:calc(-1 * var(--spacing-xs));border-radius:var(--card-border-radius);font-family:inherit;font-size:var(--font-size-large);font-weight:var(--font-weight-bold);color:var(--text-primary);letter-spacing:-.3px}.logo-btn .logo-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}.logo-btn .logo-icon svg,.logo-btn .logo-icon img{display:block;width:1.0435em;height:1.0435em;position:relative;left:2px;top:var(--logo-offset-y);vertical-align:middle}.header-left h1{margin:0;font-size:var(--font-size-large);font-weight:var(--font-weight-bold);color:var(--text-primary);letter-spacing:-.3px;display:flex;align-items:center;gap:0}.header-left h1 .logo-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}.header-left h1 .logo-icon svg,.header-left h1 .logo-icon img{display:block;width:1.0435em;height:1.0435em;position:relative;left:2px;top:0;vertical-align:middle}.header-right{display:flex;align-items:center;gap:var(--spacing-sm)}.connection-dot{width:8px;height:8px;border-radius:50%;transition:background-color .3s}.connection-dot.online{background:var(--success-color)}.connection-dot.offline{background:var(--warning-color)}.settings-btn{width:var(--button-size);height:var(--button-size);border-radius:50%;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:background-color .2s,color .2s}.settings-btn svg{width:var(--icon-size-medium);height:var(--icon-size-medium)}.settings-btn:hover{background:var(--bg-hover);color:var(--text-primary)}@keyframes gear-spin{0%{transform:rotate(0)}to{transform:rotate(90deg)}}.settings-btn.spinning svg{animation:gear-spin .5s ease-out forwards}.app-main{flex:1;display:flex;flex-direction:column;overflow:hidden}.loading{flex:1;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:var(--font-size-base)}:root[data-bg-pattern] .app,:root[data-custom-bg] .app{background:transparent}:root[data-custom-bg] body{background-size:600px!important}@media(min-width:768px){:root[data-custom-bg] body{background-size:1000px!important}}@media(min-width:1200px){:root[data-custom-bg] body{background-size:auto!important}}.note-input-wrapper{max-height:300px;opacity:1;overflow:hidden;transition:max-height .25s ease-out,opacity .2s ease-out;padding-bottom:env(safe-area-inset-bottom,0)}.note-input-wrapper.editing-note{max-height:0;opacity:0;pointer-events:none}.note-input-wrapper.pwa-keyboard-open{padding-bottom:0}.storage-error-toast{position:fixed;bottom:100px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--danger-color);color:#fff;border-radius:8px;font-size:var(--font-size-small);box-shadow:0 4px 12px #0003;cursor:pointer;z-index:1000;animation:toastSlideUp .3s ease-out}.storage-error-toast svg{flex-shrink:0}@keyframes toastSlideUp{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.unlock-logo{width:64px;height:64px;margin-bottom:24px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.unlock-btn.primary{display:flex;align-items:center;justify-content:center;gap:8px;background:#7c5cbf;color:#fff}.unlock-btn.primary:hover{background:#6b4dab}.unlock-btn.primary svg{width:20px;height:20px}.unlock-link{background:none;border:none;color:#7c5cbf;font-size:14px;cursor:pointer;padding:8px;text-decoration:underline;text-underline-offset:2px}.unlock-link:hover{color:#5c4a8a}.recovery-container{max-width:480px}.recovery-description{color:#6b6b6b;font-size:14px;line-height:1.5;margin:0 0 24px;text-align:center}.recovery-form{width:100%;display:flex;flex-direction:column;gap:16px}.recovery-input{width:100%;padding:16px;font-size:14px;font-family:monospace;line-height:1.5;border:2px solid #e5e7eb;border-radius:12px;resize:none;background:#fafafa;transition:border-color .2s}.recovery-input:focus{outline:none;border-color:#7c5cbf;background:#fff}.recovery-input::placeholder{color:#9ca3af}.recovery-error{color:#dc2626;font-size:14px;margin:0;text-align:center}.recovery-actions{display:flex;gap:12px}.recovery-actions .unlock-btn{flex:1}@media(max-width:480px){.recovery-container{padding:24px 20px}.recovery-actions{flex-direction:column}.recovery-actions .unlock-btn{width:100%}}