:root{--bg-page: #fffdf9;--bg-card: #e3e0f7;--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);--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;--font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--font-size-base: 15px;--font-size-small: 13px;--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;--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}*{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}}.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:linear-gradient(135deg,#7c6fbd,#9d93cf,#bdb6dc);padding:24px;z-index:9999}.welcome-container{display:flex;flex-direction:column;align-items:center;max-width:400px;width:100%;padding:40px 32px;background:var(--bg-elevated);border-radius:16px;box-shadow:0 8px 32px #0000001f;font-family:var(--font-family)}.welcome-logo{margin-bottom:24px}.welcome-logo img{filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.welcome-title{font-size:20px;font-weight:var(--font-weight-bold);color:var(--text-primary);margin:0 0 24px;text-align:center}.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:8px 12px;background:var(--danger-bg);border-radius:8px;border:1px solid transparent}.welcome-error--action-needed{border-color:var(--danger-color);background:var(--danger-bg);font-weight:var(--font-weight-medium)}.welcome-actions{display:flex;flex-direction:column;gap:12px;width:100%}.method-description{font-size:var(--font-size-small);color:var(--text-secondary);text-align:center;margin:0 0 8px}.welcome-btn{padding:14px 24px;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);font-family:var(--font-family);border-radius:var(--input-border-radius);cursor:pointer;transition:all .2s ease;border:none;width:100%}.welcome-btn.primary{background:var(--accent-primary);color:#fff}.welcome-btn.primary:hover{filter:brightness(.9)}.welcome-btn.primary:disabled{background:var(--accent-primary-dim);cursor:not-allowed;filter:none}.welcome-btn.secondary{background:var(--bg-surface-low);color:var(--text-primary)}.welcome-btn.secondary:hover{background:var(--bg-hover)}.welcome-btn.text{background:transparent;color:var(--text-secondary);padding:8px}.welcome-btn.text:hover{color:var(--text-primary)}.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:var(--font-family);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:var(--font-family);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(--accent-link);font-size:var(--font-size-small);font-family:var(--font-family);cursor:pointer;padding:12px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent-link-underline);margin-top:8px}.welcome-link:hover{color:var(--accent-primary)}.welcome-options{display:flex;flex-direction:column;gap:12px;width:100%;margin-bottom:8px}.option-card{display:flex;align-items:flex-start;padding:20px;background:var(--bg-elevated);border:1px solid var(--border-light);border-radius:var(--card-border-radius);cursor:pointer;transition:all .3s ease;text-align:left;width:100%}.option-card:hover{border-color:var(--accent-primary);background:var(--bg-surface-low)}.option-card:active{transform:scale(.98)}.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 4px}.option-content p{font-size:var(--font-size-small);color:var(--text-secondary);margin:0;line-height:1.4}.option-note{display:inline-block;font-size:11px;color:var(--text-tertiary);margin-top:4px}.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.primary{display:flex;align-items:center;justify-content:center;gap:8px}.welcome-btn.primary svg{width:20px;height:20px}@media(max-width:480px){.welcome-container{padding:32px 24px}.welcome-title{font-size:18px}.mnemonic-grid{grid-template-columns:repeat(2,1fr)}.mnemonic-cell{padding:6px 8px}.mnemonic-word{font-size:12px}}.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-y:auto;overflow-x: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:300px;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:#fff3c9;border-color:#e8dba8}.note-card.pinned.pin-red{background:#ffdfe7;border-color:#f0c8d0}.note-card.pinned.pin-green{background:#daf6e5;border-color:#c5e8d4}.note-card.pinned.pin-purple{background:#e7e7ff;border-color:#d0d0f0}.note-card.pinned.editing{box-shadow:0 0 0 3px var(--accent-primary-dim)}.note-card.pinned.pin-beige.editing{background:#fff3c9;border-color:var(--accent-primary)}.note-card.pinned.pin-red.editing{background:#ffdfe7;border-color:var(--accent-primary)}.note-card.pinned.pin-green.editing{background:#daf6e5;border-color:var(--accent-primary)}.note-card.pinned.pin-purple.editing{background:#e7e7ff;border-color:var(--accent-primary)}.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)}.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)}}.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;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)}.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)}.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)}.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}.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{color:var(--text-primary)}.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}.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);max-height:80vh;overflow-y:auto;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-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)}.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:12px;margin-top:12px;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)}.reconnect-btn{width:100%;padding:var(--spacing-sm);margin-top:var(--spacing-sm);border:none;border-radius:var(--card-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}.reconnect-btn:hover{opacity:.9}.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-picker{display:flex;gap:var(--spacing-xs);margin-top:var(--spacing-sm)}.pattern-option{flex:1;padding:var(--spacing-sm) var(--spacing-xs);background:var(--bg-card);border:2px solid var(--border-light);border-radius:var(--button-border-radius);cursor:pointer;font-size:var(--font-size-small);font-weight:var(--font-weight-medium);color:var(--text-secondary);transition:border-color .2s,color .2s,background-color .2s}.pattern-option:hover{border-color:var(--text-tertiary);color:var(--text-primary)}.pattern-option.selected{border-color:var(--accent-primary);background:var(--accent-primary-dim);color:var(--text-primary)}.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-setting{margin-left:var(--spacing-sm);padding-left:var(--spacing-sm);border-left:2px solid var(--border-subtle)}.mini-setting .setting-label{font-size:var(--font-size-small)}.mini-setting .setting-description{font-size:11px}.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)}.health-link{display:block;width:100%;padding:var(--spacing-sm);margin-top:var(--spacing-sm);text-align:center;background:var(--bg-hover);color:var(--accent-link);text-decoration:none;border-radius:var(--button-border-radius);font-size:var(--font-size-small);font-weight:var(--font-weight-medium);transition:background-color .2s}.health-link:hover{background:var(--border-light)}.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)}.logo-controls .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)}.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}}.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-page);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}}.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;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%}}