/* Extension-only styles */

/* Features that arrive in later steps */
.no-history [data-feature="history"],
.no-backups [data-feature="backups"],
.no-reminders [data-feature="reminders"] { display: none !important; }

/* The side panel is narrow: keep the toolbar to one tidy wrapping block */
.mode-panel .toolbar { flex-wrap: wrap; row-gap: 4px; }

/* Version in the bottom bar, so it's easy to see an update has arrived */
#app-version { color: #61afef; }

/* Password box */
#lock-msg.err { color: #e06c75; }

/* Backups page: backup files */
.bf-last { margin-bottom: 10px; }
.bf-big { font-size: 16px; font-weight: 600; color: #98c379; margin-bottom: 2px; }
.bf-opt { align-items: flex-start; }
.bf-opt .bk-meta { font-weight: normal; margin-top: 2px; }
.bf-folder-row { margin: 4px 0 6px 26px; align-items: center; }
.rm-msg.ok { color: #98c379; }
.rm-msg.err { color: #e06c75; }
#settings-modal .ret-actions { margin: 10px 0; }
.set-time { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.set-time select { background: #111; color: #ddd; border: 1px solid #444; border-radius: 4px; padding: 5px 8px; font-size: 13px; }

/* Reminders */
.rm-how { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin: 10px 0 4px; font-size: 13px; }
.rm-how label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.rm-how label.off { opacity: .45; cursor: default; }
.rm-head { margin: 16px 0 8px; }
.phone-steps { margin: 6px 0 8px 18px; padding: 0; font-size: 13px; line-height: 1.7; }
.phone-topic { background: #111; border: 1px solid #333; padding: 2px 6px; border-radius: 3px; color: #e5c07b; user-select: all; }
.rm-how input[type="checkbox"] { width: auto; margin: 0; padding: 0; flex: none; }
.rm-how label { white-space: nowrap; font-size: 13px; color: #ccc; }

/* Notes background */
#editor { background-size: cover; background-position: center; background-repeat: no-repeat; }
#editor.has-bg-img .tb { text-shadow: 0 1px 3px rgba(0,0,0,.85); }
.nbg-scope { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; margin: 4px 0 8px; }
.nbg-scope label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.nbg-scope input { width: auto; margin: 0; }
.nbg-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.nbg-swatch { width: 74px; height: 42px; border: 2px solid #3a3a3a; border-radius: 6px; padding: 0; display: flex; align-items: flex-end; justify-content: center; cursor: pointer; }
.nbg-swatch span { font-size: 10px; color: #bbb; padding-bottom: 3px; font-weight: normal; }
.nbg-swatch.on { border-color: #61afef; }
#nbg-dim { width: 160px; }
#settings-modal .modal-box, #reminder-modal .modal-box { max-height: calc(100vh - 40px); overflow-y: auto; }

/* Website (phone) — the extension-only parts */
.mode-site .ext-only { display: none !important; }

/* Sync */
.sync-devices { margin: 8px 0; }
.sync-dev { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid #2a2a2a; font-size: 13px; }
.sync-dev span:first-child { flex: 1; min-width: 160px; }
.link-box { text-align: center; }
#link-qr { width: 220px; height: 220px; margin: 8px auto; background: #fff; border-radius: 6px; }
#link-qr svg { width: 100%; height: 100%; display: block; }
.link-code { font-family: Consolas, monospace; font-size: 22px; letter-spacing: 2px; color: #e5c07b; background: #111; border: 1px solid #333; border-radius: 6px; padding: 8px 12px; display: inline-block; user-select: all; margin: 4px 0; }
#link-url { word-break: break-all; }