* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace; background: #1a1a1a; color: #e0e0e0; height: 100vh; display: flex; flex-direction: column; }
header { padding: 10px 18px; background: #222; border-bottom: 1px solid #333; display: flex; flex-wrap: wrap; gap: 15px; align-items: center; justify-content: space-between; }
.controls { display: flex; gap: 10px; align-items: center; flex: 1; flex-wrap: wrap; }
select, input[type="text"], button { background: #333; color: #fff; border: 1px solid #444; padding: 6px 10px; border-radius: 4px; font-size: 13px; outline: none; }
select { cursor: pointer; }
button { cursor: pointer; background: #4caf50; border-color: #4caf50; font-weight: bold; }
button:hover { background: #45a049; }
button.delete-btn { background: #e06c75; border-color: #e06c75; margin-left: 10px; }
button.delete-btn:hover { background: #c55b62; }
button.restore-btn { background: #61afef; border-color: #61afef; color: #000; }
button.rename-btn { background: #333; border-color: #555; color: #ddd; font-weight: normal; }
button.rename-btn:hover { background: #444; color: #fff; }
button.restore-btn:hover { background: #4ba3e3; }
.status-container { display: flex; align-items: center; gap: 5px; }
#status { font-size: 12px; color: #666; transition: color 0.2s; margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.toolbar { background: #2a2a2a; padding: 6px 18px; border-bottom: 1px solid #333; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.toolbar button { background: transparent; border: 1px solid #555; color: #ccc; padding: 4px 10px; border-radius: 3px; font-weight: normal; font-family: inherit; }
.toolbar button:hover { background: #444; color: #fff; border-color: #777; }
.toolbar-divider { width: 1px; height: 18px; background: #444; margin: 0 4px; }

/* ---- Main area: tab sidebar | resizer | editor ---- */
#main { flex: 1; min-height: 0; display: flex; position: relative; }
#editor { min-width: 0; }
#sidebar { --sb-w: 280px; width: var(--sb-w); flex: 0 0 auto; background: #1f1f1f; border-right: 1px solid #333; display: flex; flex-direction: column; min-width: 0; }
.sb-head { display: flex; gap: 4px; padding: 8px; }
.sb-head input { flex: 1; min-width: 0; background: #151515; border: 1px solid #3a3a3a; color: #eee; padding: 6px 8px; border-radius: 4px; font-size: 12px; }
.sb-btn { background: #2a2a2a !important; border: 1px solid #3f3f3f !important; color: #ccc !important; padding: 4px 8px !important; font-weight: normal !important; font-size: 13px !important; border-radius: 4px; flex: 0 0 auto; }
.sb-btn:hover { background: #3a3a3a !important; color: #fff !important; }
.sb-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 0 8px 8px; border-bottom: 1px solid #2c2c2c; }
.sb-actions .sb-btn { flex: 1 1 0; font-size: 12px !important; padding: 4px 3px !important; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-actions .sb-btn.sb-add-group  { background: rgba(97,175,239,0.12) !important; border-color: rgba(97,175,239,0.30) !important; color: #cfe3f7 !important; }
.sb-actions .sb-btn.sb-add-folder { background: rgba(229,192,123,0.12) !important; border-color: rgba(229,192,123,0.30) !important; color: #f0dcb4 !important; }
.sb-actions .sb-btn.sb-add-tab    { background: rgba(152,195,121,0.12) !important; border-color: rgba(152,195,121,0.30) !important; color: #d4e9c6 !important; }
.sb-actions .sb-btn.sb-add-group:hover  { background: rgba(97,175,239,0.22) !important; color: #fff !important; }
.sb-actions .sb-btn.sb-add-folder:hover { background: rgba(229,192,123,0.22) !important; color: #fff !important; }
.sb-actions .sb-btn.sb-add-tab:hover    { background: rgba(152,195,121,0.22) !important; color: #fff !important; }
#tab-list { flex: 1; overflow-y: auto; padding: 4px 0 30px; }
.tl-more { display: inline-block; background: transparent !important; border: none !important; color: #999 !important; padding: 0 4px !important; font-size: 14px !important; font-weight: normal !important; line-height: 1; flex: 0 0 auto; }
.tl-more:hover { color: #fff !important; }
.tl-row:hover .tl-more { display: inline-block; }
@media (hover: none) { .tl-more { display: inline-block; } }
/* Tab PIN button: three states that look nothing alike */
.tl-more.tl-pin { font-size: 10px !important; line-height: 14px; padding: 1px 6px !important; border-radius: 9px; margin-left: 2px; }
.tl-more.tl-pin.pin-none { border: 1px dashed #555 !important; color: #888 !important; }                 /* no PIN: "+ PIN" action */
.tl-more.tl-pin.pin-none:hover { border-color: #d19a66 !important; color: #d19a66 !important; }
.tl-more.tl-pin.pin-locked { background: #e5c07b !important; color: #1a1a1a !important; font-weight: bold !important; }   /* locked */
.tl-more.tl-pin.pin-open { background: #2f4a28 !important; color: #b5e08f !important; border: 1px solid #98c379 !important; } /* unlocked for now */
.tl-more.tl-pin.pin-locked:hover, .tl-more.tl-pin.pin-open:hover { filter: brightness(1.15); }
.sb-foot { padding: 5px 10px; font-size: 11px; color: #666; border-top: 1px solid #2c2c2c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tl-row { display: flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 8px 0 6px; font-size: 13px; color: #bbb; cursor: pointer; border-left: 2px solid transparent; user-select: none; white-space: nowrap; }
.tl-row:hover { background: #2a2a2a; color: #fff; }
.tl-row.active { background: #2c313a; color: #fff; border-left-color: #61afef; font-weight: bold; }
.tl-row.kb-focus { outline: 1px solid #61afef; outline-offset: -1px; }
.tl-name { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.tl-folder { color: #e5c07b; font-weight: bold; }
.tl-folder.has-active .tl-name { text-decoration: underline; text-decoration-color: #61afef; text-underline-offset: 3px; }
/* Open/close arrows on groups and folders: a clear little button (tabs keep the same space, empty) */
.tl-caret { width: 18px; height: 18px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: #888; border-radius: 4px; }
.tl-caret:not(:empty) { border: 1px solid #555; background: #2b2b2b; color: #e6e6e6; }
.tl-row:hover .tl-caret:not(:empty) { border-color: #61afef; background: #334050; color: #fff; }
/* Project tree: connecting lines drawn like  ├─  │  └─  */
.tl-guides { display: flex; align-self: stretch; flex: 0 0 auto; margin-right: -2px; }
.tl-guide { width: 16px; position: relative; flex: 0 0 auto; }
.tl-guide.pipe::before, .tl-guide.tee::before { content: ''; position: absolute; left: 7px; top: 0; bottom: 0; border-left: 1px solid #4a4a4a; }
.tl-guide.elbow::before { content: ''; position: absolute; left: 7px; top: 0; height: 50%; border-left: 1px solid #4a4a4a; }
.tl-guide.tee::after, .tl-guide.elbow::after { content: ''; position: absolute; left: 7px; right: -2px; top: 50%; border-top: 1px solid #4a4a4a; }
.tl-gicon { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center;
            font-size: 11px; font-weight: 800; line-height: 1; color: #fff; background: #3d6fb0; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.25); font-family: -apple-system, "Segoe UI", Roboto, sans-serif; }
.tl-gicon.current { background: #4d8ee0; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.25), 0 0 0 2px rgba(97,175,239,0.35); }
.tl-gicon.deleted { background: #555; color: #bbb; }
.tl-gicon.mini { width: 14px; height: 14px; font-size: 9px; border-radius: 4px; margin: 0 2px; vertical-align: -2px; }
.tl-icon { flex: 0 0 auto; width: 18px; text-align: center; font-size: 13px; }
.tl-group { color: #9fc7f0; font-weight: bold; margin-top: 2px; }
.tl-group.current { background: transparent; color: #e3f0fc; }
.tl-open-tag { flex: 0 0 auto; font-size: 10px; font-weight: bold; letter-spacing: 0.6px; color: #0d1b2a; background: #61afef; border-radius: 9px; padding: 1px 7px; line-height: 14px; }
/* The group you're in: a tinted, outlined band around its header and its whole tree */
/* Adds no margin, border or padding, so rows keep exactly the same position whichever group is open.
   The outline is drawn on top by ::after and lets clicks pass through. */
.tl-current-group { position: relative; background: rgba(97,175,239,0.13); border-radius: 0 6px 6px 0; }
.tl-current-group::after { content: ''; position: absolute; inset: 0; pointer-events: none; border: 1px solid rgba(97,175,239,0.40); border-left: 3px solid #61afef; border-radius: 0 6px 6px 0; }
.tl-current-group .tl-row:hover { background: rgba(255,255,255,0.07); }
.tl-current-group .tl-row.active { background: rgba(97,175,239,0.30); }
.tl-group.other { color: #8a9bab; font-weight: normal; }
.tl-group.other:hover { color: #fff; }
.tl-trash { margin-top: 80px; border-top: 1px solid #3a3a3a; }
.tl-trashed { color: #888; }
.tl-more.tl-restore { font-size: 11px !important; color: #98c379 !important; border: 1px solid #3c5232 !important; border-radius: 9px; padding: 1px 7px !important; }
.tl-more.tl-restore:hover { background: #2f4a28 !important; }
.tl-kind { font-size: 10px; color: #6b7f93; font-weight: normal; flex: 0 0 auto; text-transform: uppercase; letter-spacing: 0.5px; }
.tl-count, .tl-meta { font-size: 11px; color: #777; font-weight: normal; flex: 0 0 auto; }
.tl-path { font-size: 11px; color: #777; font-weight: normal; }
.tl-hit { font-size: 10px; color: #98c379; font-weight: normal; flex: 0 0 auto; }
.tl-row.drop-before { box-shadow: inset 0 2px 0 #61afef; }
.tl-row.drop-into { background: rgba(97,175,239,0.2); }
.tl-row.drop-merge { background: rgba(229,192,123,0.18); box-shadow: inset 0 0 0 1px #e5c07b; }
.tl-row.drop-merge::after { content: '＋📁 new folder'; font-size: 10px; color: #e5c07b; font-weight: bold; flex: 0 0 auto; }
.tl-row.dragging { opacity: 0.4; }
.tl-empty { padding: 14px 12px; font-size: 12px; color: #777; }
#tab-list.drop-root { box-shadow: inset 0 -3px 0 #61afef; }

#sb-resizer { width: 6px; margin-left: -3px; margin-right: -3px; cursor: col-resize; flex: 0 0 auto; z-index: 5; position: relative; }
#sb-resizer:hover, #sb-resizer.dragging { background: rgba(97,175,239,0.45); }
body.sb-resizing { cursor: col-resize; user-select: none; }

#sb-strip { display: none; width: 30px; flex: 0 0 auto; background: #1f1f1f; border-right: 1px solid #333; flex-direction: column; align-items: center; padding-top: 10px; gap: 10px; cursor: pointer; }
#sb-strip:hover { background: #262626; }
.strip-icon { color: #ccc; font-size: 15px; }
.strip-name { writing-mode: vertical-rl; font-size: 12px; color: #999; max-height: 70vh; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.sb-collapsed #sidebar, body.sb-collapsed #sb-resizer { display: none; }
body.sb-collapsed #sb-strip { display: flex; }

/* ---- Backup compare panel (right side) ---- */
/* The divider between the note and the History panel: a visible bar with a grip (drag to resize) */
#hp-resizer { display: none; width: 10px; margin: 0; cursor: col-resize; flex: 0 0 auto; z-index: 5; position: relative; background: #2a2418; border-left: 1px solid #4a3f22; border-right: 1px solid #4a3f22; }
#hp-resizer::before { content: ''; position: absolute; left: 50%; top: 50%; height: 40px; transform: translate(-50%, -50%); border-left: 2px dotted rgba(229,192,123,0.65); }
#hp-resizer:hover, #hp-resizer.dragging { background: #3d3421; }
/* The panel itself has a warm tint, so it doesn't look like the notes */
#history-panel { display: none; --hp-w: 420px; width: var(--hp-w); flex: 0 0 auto; flex-direction: column; background: #1e1c17; min-width: 0; }
#history-panel .hp-head { background: #2a2418; border-bottom-color: #4a3f22; }
#history-panel .hp-bar { background: #221f19; border-bottom-color: #3a3320; }
#history-panel .hp-actions, #history-panel .hp-foot { background: #221f19; border-top-color: #3a3320; }
#history-panel .hp-title { font-size: 14px; }
/* Loading indicator for "All recent changes" */
.rc-loading { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 20px; color: #ddd; font-size: 14px; text-align: center; }
.rc-spinner { width: 36px; height: 36px; border-radius: 50%; border: 4px solid rgba(229,192,123,0.2); border-top-color: #e5c07b; animation: rc-spin 0.9s linear infinite; }
@keyframes rc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rc-spinner { animation-duration: 2.5s; } }
.rc-progress { width: 75%; max-width: 260px; height: 8px; background: #111; border: 1px solid #3a3320; border-radius: 4px; overflow: hidden; }
.rc-progress span { display: block; height: 100%; width: 0; background: #e5c07b; transition: width 0.25s; }
.rc-loading small { color: #999; font-size: 12px; }
body.hp-open #history-panel { display: flex; }
body.hp-open #hp-resizer { display: block; }
.hp-head { display: flex; gap: 6px; padding: 8px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid #2c2c2c; }
.hp-title { font-weight: bold; color: #e5c07b; font-size: 13px; white-space: nowrap; }
.hp-head select { flex: 1 1 130px; min-width: 0; font-size: 12px; padding: 5px 6px; }
.hp-bar { display: flex; gap: 12px; align-items: center; padding: 6px 10px; font-size: 12px; color: #aaa; border-bottom: 1px solid #2c2c2c; flex-wrap: wrap; }
.hp-bar label { display: flex; gap: 4px; align-items: center; cursor: pointer; }
#hp-stats { margin-left: auto; color: #888; }
.hp-note { padding: 5px 10px; font-size: 11px; color: #e5c07b; background: #262217; border-bottom: 1px solid #3a3320; }
.hp-note:empty { display: none; }
#hp-body { flex: 1; overflow: auto; padding: 6px 0 30px; font-size: 13px; line-height: 1.5; user-select: text; cursor: text; }
.hp-row { display: flex; gap: 6px; padding: 0 10px 0 4px; white-space: pre-wrap; word-break: break-word; }
.hp-sign { width: 12px; flex: 0 0 auto; color: #777; user-select: none; text-align: center; }
.hp-text { flex: 1; min-width: 0; }
.hp-row.eq { color: #9a9a9a; }
.hp-row.del { background: rgba(224,108,117,0.14); color: #f2c4c8; }
.hp-row.del .hp-sign { color: #e06c75; }
.hp-row.ins { background: rgba(152,195,121,0.12); color: #cfe6be; }
.hp-row.ins .hp-sign { color: #98c379; }
.hp-rich { color: inherit; }
.hp-hunk { border-left: 2px solid #e5c07b; margin: 4px 0; }
.hp-hunk-head { display: flex; gap: 6px; align-items: center; padding: 3px 8px; font-size: 11px; color: #e5c07b; background: #24211a; user-select: none; }
.hp-hunk-head span { margin-right: auto; }
.hp-mini { background: #333 !important; border: 1px solid #4a4a4a !important; color: #ddd !important; padding: 1px 7px !important; font-size: 11px !important; font-weight: normal !important; border-radius: 3px; }
.hp-mini:hover { background: #444 !important; color: #fff !important; }
.hp-fold { display: block; width: calc(100% - 20px); margin: 2px 10px; background: transparent !important; border: 1px dashed #3a3a3a !important; color: #777 !important; font-size: 11px !important; font-weight: normal !important; padding: 2px !important; }
.hp-fold:hover { color: #ccc !important; border-color: #666 !important; }
.hp-imgline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hp-thumb { height: 40px; border-radius: 3px; border: 1px solid #444; }
.hp-empty { padding: 20px; color: #777; font-size: 13px; text-align: center; }
.hp-actions { display: flex; gap: 6px; padding: 6px 8px; border-top: 1px solid #2c2c2c; flex-wrap: wrap; }
.hp-actions .sb-btn { font-size: 12px !important; }
.hp-foot { padding: 5px 10px; font-size: 11px; color: #666; border-top: 1px solid #2c2c2c; }
/* "All recent changes" view: every changed tab in every group over a chosen time */
#hp-range, #hp-refresh { display: none; }
#history-panel.recent #hp-range { display: block; }
#history-panel.recent #hp-refresh { display: inline-block; }
#history-panel.recent #hp-tab, #history-panel.recent #hp-date, #history-panel.recent #hp-mode,
#history-panel.recent #hp-copyall, #history-panel.recent #hp-restore, #history-panel.recent #hp-now { display: none !important; }
.rc-group { margin: 12px 6px 4px; padding: 6px 10px; background: #20262d; border-left: 3px solid #61afef; border-radius: 0 4px 4px 0; font-size: 12px; color: #cfe3f7; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rc-group:first-child { margin-top: 4px; }
.rc-group b { font-size: 13px; color: #fff; }
.rc-group .rc-sub { color: #8a9bab; font-size: 11px; margin-left: auto; }
.rc-tab { margin: 6px 6px 10px 12px; border: 1px solid #333; border-radius: 5px; overflow: hidden; background: #1a1a1a; }
.rc-tab-head { display: flex; gap: 6px; align-items: center; padding: 5px 8px; background: #242424; font-size: 12px; color: #ddd; flex-wrap: wrap; }
.rc-name { font-weight: bold; color: #fff; word-break: break-word; }
.rc-kind { font-size: 10px; padding: 1px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.4px; }
.rc-kind.changed { background: #4a3f22; color: #e5c07b; }
.rc-kind.added { background: #263b22; color: #98c379; }
.rc-kind.removed { background: #4a2326; color: #f2a0a6; }
.rc-kind.renamed { background: #22344a; color: #9fc7f0; }
.rc-stats { color: #888; font-size: 11px; margin-left: auto; }
.rc-diff { padding: 4px 0; font-size: 13px; line-height: 1.5; }
.rc-quiet { padding: 6px 10px; font-size: 12px; color: #888; }

/* ---- Backups page ---- */
.modal-box.bk-box { width: 1040px; max-width: 96vw; max-height: 92vh; text-align: left; display: flex; flex-direction: column; padding: 18px; }
.bk-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.bk-head h3 { margin: 0 auto 0 0 !important; }
#bk-content { overflow-y: auto; flex: 1; min-height: 0; padding-right: 4px; }
.bk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 10px; }
.bk-card { background: #262626; border: 1px solid #383838; border-radius: 6px; padding: 10px 12px; min-width: 0; }
.bk-card .k { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
.bk-card .v { font-size: 20px; color: #fff; font-weight: bold; margin: 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-card .s { font-size: 11px; color: #999; line-height: 1.35; }
.bk-card.warn { border-color: #e5c07b; } .bk-card.warn .v { color: #e5c07b; }
.bk-card.bad { border-color: #e06c75; } .bk-card.bad .v { color: #e06c75; }
.bk-section { margin: 18px 0 8px; font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.6px; }
.bk-health > div { font-size: 13px; padding: 6px 10px; border-radius: 4px; margin-bottom: 4px; background: #222; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bk-ok { color: #98c379; } .bk-warn { color: #e5c07b; } .bk-bad { color: #e06c75; }
.bk-link { color: #61afef; font-size: 12px; }
.bk-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: #111; border: 1px solid #333; }
.bk-bar span { display: block; height: 100%; }
.bk-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: #aaa; margin-top: 8px; }
.bk-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.bk-table-wrap { overflow-x: auto; }
table.bk-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.bk-table th { text-align: left; color: #888; font-weight: normal; padding: 6px 8px; border-bottom: 1px solid #333; white-space: nowrap; }
.bk-table td { padding: 7px 8px; border-bottom: 1px solid #2a2a2a; white-space: nowrap; color: #ccc; }
.bk-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.bk-table tr.bk-grow { cursor: pointer; }
.bk-table tr.bk-grow:hover td { background: #262626; }
.bk-cur { color: #61afef; font-size: 10px; margin-left: 6px; border: 1px solid #61afef; border-radius: 3px; padding: 0 4px; }
.bk-gone { color: #e06c75; font-size: 10px; margin-left: 6px; border: 1px solid #e06c75; border-radius: 3px; padding: 0 4px; }
.bk-timeline td { background: #1c1c1c; white-space: normal; padding: 6px 12px 10px; }
.bk-day { display: flex; gap: 10px; align-items: center; padding: 5px 0; border-bottom: 1px dashed #2c2c2c; font-size: 12px; flex-wrap: wrap; }
.bk-day .d { width: 130px; color: #ddd; }
.bk-tier { font-size: 10px; padding: 1px 6px; border-radius: 3px; background: #333; color: #aaa; }
.bk-chg { color: #999; flex: 1; min-width: 220px; }
.bk-chg b { font-weight: normal; }
.bk-chg b.a { color: #98c379; } .bk-chg b.c { color: #e5c07b; } .bk-chg b.r { color: #e06c75; } .bk-chg b.n { color: #61afef; }
.bk-names { color: #777; }
.bk-meta { color: #777; font-size: 11px; }
.bk-fulls { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; padding-top: 8px; }
.ret-help { background: #1b1f24; border: 1px solid #2d3640; border-radius: 6px; padding: 10px 14px; margin-bottom: 14px; font-size: 13px; color: #c8ccd0; line-height: 1.5; }
.ret-help summary { cursor: pointer; color: #61afef; font-weight: bold; }
.ret-help h4 { margin: 12px 0 4px; font-size: 13px; color: #e5c07b; }
.ret-help p { margin: 0 0 6px; }
.ret-help ul { margin: 0 0 6px 20px; }
.ret-help li { margin-bottom: 3px; }
.ret-help b { color: #fff; font-weight: 600; }
.ret-box { background: #222; border: 1px solid #333; border-radius: 6px; padding: 12px 14px; margin-bottom: 10px; }
.ret-grid { display: flex; flex-direction: column; gap: 8px; }
.ret-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: #ccc; }
.ret-label { width: 260px; color: #ddd; }
.ret-row input[type=number] { width: 80px; background: #151515; border: 1px solid #444; color: #fff; padding: 5px 8px; border-radius: 4px; font-size: 13px; text-align: right; }
.ret-row input[type=number]:disabled { opacity: 0.4; }
.ret-unit { color: #888; font-size: 12px; }
.ret-forever { display: flex; align-items: center; gap: 4px; color: #aaa; font-size: 12px; margin-left: 10px; cursor: pointer; }
.ret-summary { margin-top: 12px; font-size: 13px; color: #98c379; line-height: 1.45; }
.ret-warn > div { font-size: 12px; margin-top: 6px; }
.ret-actions { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.ret-save:disabled { opacity: 0.45; cursor: default; }
@media (max-width: 700px) { .ret-label { width: 100%; } }
.sa-enable { font-size: 14px; color: #fff; margin-bottom: 10px; cursor: pointer; }
.sa-body { display: flex; flex-direction: column; gap: 8px; }
.sa-body.off { opacity: 0.45; }
.sa-box select, .sa-box input[type=time] { background: #151515; border: 1px solid #444; color: #fff; padding: 5px 8px; border-radius: 4px; font-size: 13px; }
.sa-box input[type=time] { color-scheme: dark; }
.sa-box input[type=time]:disabled { opacity: 0.4; }
.sa-meter { width: 220px; height: 10px; border-radius: 5px; background: #111; border: 1px solid #333; overflow: hidden; }
.sa-meter span { display: block; height: 100%; width: 0; transition: width 0.3s; }
.sa-status { margin-top: 12px; padding: 8px 10px; background: #1b1b1b; border-radius: 4px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.sa-how { margin-top: 10px; font-size: 12px; color: #aaa; }
.sa-how summary { cursor: pointer; color: #61afef; margin-bottom: 6px; }
/* Backups page: undo the generic modal input/button styles inside it */
.modal-box .bk-head .sb-btn, .modal-box .ret-actions .sb-btn, .modal-box .bkv-actions .sb-btn, .modal-box .hp-mini { width: auto !important; flex: 0 0 auto; }
.modal-box .bk-head .sb-btn { padding: 6px 12px !important; }
.modal-box .ret-actions .sb-btn { padding: 7px 14px !important; }
.bk-head .bk-meta { white-space: nowrap; }
.modal-box .ret-box input, .modal-box .ret-box select { width: auto; margin: 0; padding: 5px 8px; letter-spacing: normal; font-size: 13px; }
.modal-box .ret-box input[type=number] { text-align: right; width: 90px; }
.modal-box .ret-box input[type=time] { text-align: left; width: 110px; }
.modal-box .ret-box input[type=checkbox] { width: 16px; height: 16px; padding: 0; margin: 0; accent-color: #61afef; }
.sa-enable { display: flex; align-items: center; gap: 8px; }
.bk-health > div { background: #1b1b1b !important; border-left: 3px solid currentColor; }
.bk-card.wide .v { font-size: 18px; }
/* Backups page: tabs + clearly separated panels */
.bk-nav { display: flex; gap: 4px; border-bottom: 2px solid #333; margin-bottom: 16px; position: sticky; top: 0; background: #222; z-index: 3; overflow-x: auto; }
.modal-box .bk-tab { width: auto !important; background: transparent !important; border: none !important; border-bottom: 3px solid transparent !important; margin-bottom: -2px; color: #999 !important; padding: 10px 16px !important; font-size: 14px !important; font-weight: 600 !important; border-radius: 6px 6px 0 0 !important; display: flex; gap: 8px; align-items: center; white-space: nowrap; filter: none !important; }
.modal-box .bk-tab:hover { color: #fff !important; background: #2a2a2a !important; }
.modal-box .bk-tab.on { color: #fff !important; background: #2b2b2b !important; }
.bk-tab[data-tab="dashboard"].on { border-bottom-color: #61afef !important; }
.bk-tab[data-tab="alerts"].on { border-bottom-color: #d19a66 !important; }
.bk-tab[data-tab="retention"].on { border-bottom-color: #98c379 !important; }
.bk-tab-icon { font-size: 16px; }
.bk-tab-short { display: none; }
@media (max-width: 700px) {
  .modal-box .bk-tab { padding: 9px 8px !important; font-size: 13px !important; gap: 5px; flex: 1 1 0; justify-content: center; }
  .bk-tab-label { display: none; }
  .bk-tab-short { display: inline; }
  .bk-badge { font-size: 0; padding: 0; width: 8px; height: 8px; border-radius: 50%; }   /* status shown as a coloured dot */
  .bk-badge:not(.ok):not(.warn):not(.bad) { display: none !important; }
  .bk-panel { padding-left: 10px; border-left-width: 3px; }
  .bk-panel-head { padding: 10px 12px; gap: 10px; }
  .bk-panel-icon { font-size: 24px; }
}
.bk-badge { font-size: 10px; font-weight: normal; padding: 1px 8px; border-radius: 9px; background: #3a3a3a; color: #ccc; }
.bk-badge.ok { background: #263b22; color: #98c379; }
.bk-badge.warn { background: #e5c07b; color: #1a1a1a; }
.bk-badge.bad { background: #e06c75; color: #fff; }
.bk-panel { display: none; --accent: #61afef; --tint: rgba(97,175,239,0.08); border-left: 4px solid var(--accent); padding: 0 4px 10px 16px; }
.bk-panel.on { display: block; }
.bk-panel-alerts { --accent: #d19a66; --tint: rgba(209,154,102,0.09); }
.bk-panel-retention { --accent: #98c379; --tint: rgba(152,195,121,0.08); }
.bk-panel-head { display: flex; gap: 14px; align-items: center; background: var(--tint); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; }
.bk-panel-icon { font-size: 30px; line-height: 1; }
.bk-panel-head h2 { margin: 0 0 3px; font-size: 18px; color: var(--accent); }
.bk-panel-head p { margin: 0 !important; font-size: 12px; color: #aaa; line-height: 1.45; }
.bk-panel .bk-section { color: var(--accent); border-bottom: 1px solid #333; padding-bottom: 5px; margin-top: 22px; }
.bk-panel-alerts .ret-box, .bk-panel-retention .ret-box { border-color: color-mix(in srgb, var(--accent) 30%, #333); }
.modal-box.bkv-box { width: 1100px; max-width: 96vw; height: 88vh; text-align: left; display: flex; flex-direction: column; padding: 16px; }
.bkv-main { flex: 1; min-height: 0; display: flex; border: 1px solid #333; border-radius: 4px; overflow: hidden; }
#bkv-list { width: 240px; flex: 0 0 auto; overflow-y: auto; border-right: 1px solid #333; background: #1c1c1c; padding: 4px 0; }
.bkv-tab { padding: 6px 10px; cursor: pointer; font-size: 13px; color: #bbb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bkv-tab:hover { background: #262626; color: #fff; }
.bkv-tab.on { background: #2c313a; color: #fff; box-shadow: inset 2px 0 0 #61afef; }
.bkv-tab .m { float: right; font-size: 10px; margin-left: 6px; }
.bkv-tab .m.a { color: #98c379; } .bkv-tab .m.c { color: #e5c07b; }
#bkv-content { flex: 1; min-width: 0; overflow: auto; padding: 8px 0; font-size: 13px; line-height: 1.5; user-select: text; cursor: text; background: #1a1a1a; }
.bkv-actions { display: flex; gap: 8px; align-items: center; padding-top: 10px; flex-wrap: wrap; }
@media (max-width: 700px) {
  #bkv-list { width: 120px; }
  .bk-day .d { width: auto; }
}

@media (max-width: 700px) {
  #history-panel { position: absolute; top: 0; bottom: 0; right: 0; left: 30px; width: auto !important; z-index: 70; box-shadow: -6px 0 24px rgba(0,0,0,0.6); border-left: 3px solid #e5c07b; }
  #hp-resizer { display: none !important; }
  #sidebar { position: absolute; top: 0; bottom: 0; left: 30px; z-index: 60; width: min(85vw, 320px); box-shadow: 6px 0 24px rgba(0,0,0,0.6); }
  #sb-resizer { display: none !important; }
  #sb-strip { display: flex; }
}

/* Mixed text + image editor: a column of auto-growing textareas with image blocks between them */
#editor { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
/* The note column: the "Group › Tab" label above the note, then the note itself */
#editor-col { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
#crumb { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 18px; background: #28323a; border-bottom: 1px solid rgba(97,175,239,0.35); font-size: 18px; font-weight: 600; line-height: 1.3; color: #e3f0fc; white-space: nowrap; overflow: hidden; cursor: default; }
#crumb[hidden] { display: none; }
#crumb .tl-gicon { width: 24px; height: 24px; font-size: 14px; border-radius: 6px; flex: 0 0 auto; }
.crumb-group { color: #9fc7f0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.crumb-sep { color: #61afef; opacity: 0.7; font-weight: 400; flex: 0 0 auto; }
.crumb-folder { color: #e5c07b; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.crumb-tab { color: #fff; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.crumb-lock { flex: 0 0 auto; font-size: 12px; font-weight: bold; color: #1a1a1a; background: #e5c07b; border-radius: 9px; padding: 1px 8px; }
@media (max-width: 700px) { #crumb { font-size: 16px; padding: 8px 12px; } }
#editor.drop-target { box-shadow: inset 0 0 0 2px #61afef; }
/* Text blocks: formatted (bold/italic) editable text between images and formatted blocks */
#editor .tb { flex: 0 0 auto; width: 100%; padding: 2px 18px; font-size: 15px; line-height: 1.6; color: inherit; outline: none; font-family: inherit; tab-size: 4; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.6em; position: relative; cursor: text; }
#editor .tb:first-child { padding-top: 18px; }
#editor .tb.last { flex-grow: 1; padding-bottom: 18px; }
#editor .tb.tb-off { background: #111; color: #555; cursor: default; }
#editor .tb.is-empty::before { content: attr(data-placeholder); color: #666; position: absolute; pointer-events: none; }
#editor .tb b, #editor .tb strong { font-weight: 700; color: #fff; }
#editor .tb i, #editor .tb em { font-style: italic; }
.toolbar button.fmt-on { background: #3a4452; border-color: #61afef; color: #fff; }

.img-block { position: relative; margin: 6px 18px; align-self: flex-start; max-width: calc(100% - 36px); }
.img-block img { display: block; max-width: 100%; max-height: 70vh; border-radius: 4px; border: 1px solid #333; }
.img-block.selected img { outline: 2px solid #61afef; outline-offset: 2px; }
/* Per-image display modes (data-view is the effective mode) */
.img-block[data-view="thumb"] img { max-width: 200px; max-height: 120px; cursor: zoom-in; }
.img-block[data-view="medium"] img { max-width: min(100%, 360px); max-height: 360px; cursor: zoom-in; }
.img-block[data-view="fit"] img { max-width: 100%; max-height: 70vh; }
.img-block[data-view="actual"] { align-self: stretch; overflow-x: auto; }
.img-block[data-view="actual"] img { max-width: none; max-height: none; }
.img-block[data-view="name"] img { display: none; }
.img-chip { display: none; align-items: center; gap: 8px; background: #262626; border: 1px solid #3a3a3a; border-radius: 4px; padding: 6px 70px 6px 10px; font-size: 13px; color: #ddd; cursor: zoom-in; max-width: 100%; }
.img-chip .img-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.img-chip .img-chip-meta { font-size: 11px; color: #888; white-space: nowrap; }
.img-block[data-view="name"] .img-chip { display: inline-flex; }

.img-tools { position: absolute; top: 6px; right: 6px; display: none; gap: 4px; }
.img-block[data-view="name"] .img-tools { top: 50%; transform: translateY(-50%); }
.img-tools button { background: rgba(0,0,0,0.75); border: none; color: #fff; padding: 2px 8px; font-size: 14px; border-radius: 3px; font-weight: normal; }
.img-tools button:hover { background: #444; }
.img-tools button.img-del:hover { background: #e06c75; }
.img-block:hover .img-tools, .img-block.selected .img-tools, .img-block.menu-open .img-tools { display: flex; }
@media (hover: none) { .img-tools { display: flex; } }

/* Formatted (rich) blocks: shown on "paper" so pasted colours look like the original */
.rich-block { position: relative; margin: 6px 18px; }
.rich-block.deleted { display: none !important; }
.rich-body { background: #fdfdfd; color: #1e1e1e; border: 1px solid #3a3a3a; border-radius: 4px; padding: 12px 16px; font-family: Calibri, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.45; outline: none; overflow-x: auto; word-wrap: break-word; }
.rich-body:focus { box-shadow: 0 0 0 2px #61afef; }
.rich-body p { margin: 0 0 8px; }
.rich-body h1, .rich-body h2, .rich-body h3, .rich-body h4 { margin: 10px 0 6px; line-height: 1.25; }
.rich-body ul, .rich-body ol { padding-left: 26px; margin: 0 0 8px; }
.rich-body blockquote { border-left: 3px solid #ccc; margin: 0 0 8px; padding-left: 10px; color: #555; }
.rich-body pre { background: #f1f1f1; padding: 8px 10px; border-radius: 3px; white-space: pre-wrap; font-family: Consolas, monospace; font-size: 13px; }
.rich-body code { background: #f1f1f1; padding: 0 3px; border-radius: 3px; font-family: Consolas, monospace; font-size: 0.92em; }
.rich-body pre code { background: none; padding: 0; }
.rich-body table { border-collapse: collapse; margin: 0 0 8px; }
.rich-body th, .rich-body td { border: 1px solid #bbb; padding: 4px 8px; vertical-align: top; }
.rich-body th { background: #eee; }
.rich-body a { color: #0b5cad; }
.rich-body > :last-child { margin-bottom: 0; }
.rich-block.selected .rich-body { outline: 2px solid #61afef; outline-offset: 2px; }
.rich-block.preview .rich-body { outline: 2px dashed #61afef; outline-offset: 2px; }
.rich-block:hover .img-tools, .rich-block.selected .img-tools { display: flex; }

#paste-menu { position: fixed; left: 50%; bottom: 44px; transform: translateX(-50%); display: none; z-index: 940; background: #2a2a2a; border: 1px solid #4a4a4a; border-radius: 8px; padding: 6px; gap: 6px; align-items: center; box-shadow: 0 8px 26px rgba(0,0,0,0.6); font-size: 13px; flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 24px); }
#paste-menu .pm-label { color: #aaa; padding: 0 4px 0 6px; }
#paste-menu button { background: #333; border: 1px solid #4a4a4a; color: #ddd; font-weight: normal; padding: 6px 10px; border-radius: 5px; }
#paste-menu button:hover, #paste-menu button.previewing { background: #3a4452; color: #fff; }
#paste-menu button.current { border-color: #61afef; box-shadow: inset 0 0 0 1px #61afef; }
#paste-menu .pm-hint { color: #777; font-size: 11px; padding: 0 6px; }
@media (max-width: 700px) { #paste-menu .pm-hint { display: none; } }

#img-menu, #ctx-menu { position: fixed; z-index: 950; display: none; min-width: 210px; background: #2a2a2a; border: 1px solid #4a4a4a; border-radius: 6px; padding: 4px 0; box-shadow: 0 8px 24px rgba(0,0,0,0.6); font-size: 13px; }
#img-menu .menu-head, #ctx-menu .menu-head { padding: 6px 12px 2px; font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
#img-menu button, #ctx-menu button { display: block; width: 100%; text-align: left; background: transparent; border: none; border-radius: 0; color: #ddd; padding: 6px 12px; font-weight: normal; font-size: 13px; }
#img-menu button:hover, #ctx-menu button:hover { background: #3a3a3a; color: #fff; }
#img-menu button.on, #ctx-menu button.on { color: #61afef; }
#img-menu button.danger:hover, #ctx-menu button.danger:hover { background: #e06c75; color: #fff; }
#img-menu .menu-sep, #ctx-menu .menu-sep { height: 1px; background: #444; margin: 4px 0; }
.img-block.deleted { display: none !important; }

#undo-toast { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); background: #333; border: 1px solid #555; color: #eee; padding: 8px 12px; border-radius: 6px; font-size: 13px; display: none; align-items: center; gap: 12px; z-index: 900; box-shadow: 0 6px 20px rgba(0,0,0,0.5); }
#undo-toast button { background: #61afef; border-color: #61afef; color: #000; padding: 4px 12px; }
#undo-toast button:hover { background: #4ba3e3; }

/* Picture Vault */
.modal-box.vault-box { width: 820px; max-width: 95vw; text-align: left; max-height: 92vh; display: flex; flex-direction: column; }
.vault-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.vault-head h3 { margin: 0; }
#vault-count { font-size: 12px; color: #888; }
.modal-box #vault-search { text-align: left; letter-spacing: normal; margin-bottom: 8px; padding: 10px 12px; }
.vault-filter { font-size: 12px; color: #aaa; display: flex; align-items: center; gap: 6px; margin-bottom: 10px; cursor: pointer; }
.modal-box .vault-filter input { width: auto; margin: 0; padding: 0; }
#vault-grid { flex: 1; min-height: 120px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; align-content: start; border: 1px solid #333; border-radius: 4px; background: #1a1a1a; padding: 10px; }
.vault-empty { grid-column: 1 / -1; color: #888; font-size: 13px; padding: 20px; text-align: center; }
.vault-card { background: #262626; border: 1px solid #383838; border-radius: 5px; padding: 8px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.vault-thumb { width: 100%; height: 120px; object-fit: contain; background: #111; border-radius: 3px; cursor: zoom-in; }
.vault-title { font-size: 13px; font-weight: bold; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-sub { font-size: 11px; color: #888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-ctx { font-size: 11px; color: #aaa; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 1.35em; }
.vault-badge { align-self: flex-start; font-size: 10px; color: #000; background: #e5c07b; border-radius: 3px; padding: 1px 6px; }
.vault-actions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: auto; }
.modal-box .vault-actions button { width: auto; flex: 1; padding: 5px 6px; font-size: 11px; font-weight: normal; border-radius: 3px; background: #333; color: #ddd; border: 1px solid #4a4a4a; }
.modal-box .vault-actions button.primary { background: #61afef; color: #000; border-color: #61afef; font-weight: bold; }
.modal-box .vault-actions button.danger:hover { background: #e06c75; color: #fff; }
#vault-preview { z-index: 1100; cursor: zoom-out; }
#vault-preview img { max-width: 92vw; max-height: 88vh; border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,0.7); }

footer { padding: 6px 18px; background: #222; border-top: 1px solid #333; font-size: 11px; color: #777; display: flex; justify-content: flex-end; gap: 20px; }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(26, 26, 26, 0.95); display: none; justify-content: center; align-items: center; z-index: 1000; }
.modal-box { background: #222; padding: 25px; border-radius: 6px; border: 1px solid #444; width: 320px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.modal-box.large { width: 500px; max-width: 90vw; text-align: left; }
.modal-box h3 { margin-bottom: 10px; color: #fff; }
.modal-box p { font-size: 13px; color: #aaa; margin-bottom: 20px; line-height: 1.4; }
.modal-box input { width: 100%; margin-bottom: 15px; padding: 12px; background: #111; color: #fff; border: 1px solid #555; border-radius: 4px; font-size: 14px; text-align: center; letter-spacing: 2px; }
.modal-box button { width: 100%; padding: 12px; font-size: 14px; border: none; border-radius: 4px; cursor: pointer; }
.modal-box button:hover { filter: brightness(1.1); }
.modal-box .close-btn { background: #444; border-color: #444; margin-top: 15px; color: #fff; }
.modal-box .close-btn:hover { background: #555; }

#alerts-list { max-height: 400px; overflow-y: auto; margin-bottom: 15px; border: 1px solid #333; border-radius: 4px; background: #1a1a1a; padding: 10px; }
.alert-item { background: #222; padding: 12px; margin-bottom: 10px; border-radius: 4px; border-left: 3px solid #61afef; font-size: 13px; color: #ddd; }
.alert-item:last-child { margin-bottom: 0; }
.alert-item.scheduled { border-left-color: #e5c07b; }
.alert-meta { font-size: 11px; color: #888; margin-bottom: 5px; display: flex; justify-content: space-between; }
.alert-message { word-wrap: break-word; }
.cancel-alert-btn { background: #e06c75 !important; border: none !important; padding: 4px 8px !important; font-size: 11px !important; width: auto !important; margin-top: 8px; color: #fff; }

/* Set Reminder popup: write, schedule, and see / cancel reminders in one place */
.modal-box.reminder-box { width: 560px; max-width: 94vw; max-height: 92vh; overflow-y: auto; }
.reminder-box p { margin-bottom: 12px; }
.rm-label { font-size: 12px; color: #aaa; display: block; margin-bottom: 5px; }
#reminder-text { width: 100%; background: #111; color: #fff; border: 1px solid #555; border-radius: 4px; padding: 10px; font-family: inherit; font-size: 14px; line-height: 1.4; resize: vertical; outline: none; margin-bottom: 10px; }
#reminder-text:focus { border-color: #61afef; }
.rm-when { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.modal-box .rm-when button { width: auto; flex: 1 1 0; padding: 10px 8px; font-size: 13px; background: #333; color: #fff; border: 1px solid #555; }
.modal-box .rm-when button.rm-now { flex: 1 1 100%; background: #61afef; color: #000; font-weight: bold; border-color: #61afef; }
.rm-exact { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.modal-box .rm-exact input { flex: 1 1 200px; width: auto; margin: 0; padding: 10px; text-align: left; letter-spacing: normal; color-scheme: dark; font-family: inherit; }
.modal-box .rm-exact button { width: auto; flex: 1 1 auto; padding: 10px 14px; background: #e5c07b; color: #000; font-weight: bold; }
.rm-msg { font-size: 13px; min-height: 18px; margin-bottom: 10px; }
.rm-list-head { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.6px; margin: 6px 0 6px; }
.reminder-box #alerts-list { max-height: 300px; }

/* ---- Spreadsheet tabs ---- */
#editor.sheet-mode { overflow: hidden; }
.sheet-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sheet-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 12px; background: #202020; border-bottom: 1px solid #333; font-size: 12px; color: #aaa; }
.sheet-bar button { background: #2a2a2a; border: 1px solid #444; color: #ddd; padding: 4px 9px; border-radius: 4px; font-weight: normal; font-size: 12px; }
.sheet-bar button:hover { background: #3a3a3a; color: #fff; }
.sheet-bar button:disabled { opacity: 0.4; cursor: default; background: #2a2a2a; }
.sheet-bar button.on { background: #3a4452; border-color: #61afef; color: #fff; }
.sheet-bar select { background: #151515; border: 1px solid #444; color: #ddd; padding: 4px 6px; border-radius: 4px; font-size: 12px; max-width: 170px; }
.sheet-sep { width: 1px; height: 18px; background: #444; }
.sheet-check { display: flex; align-items: center; gap: 4px; cursor: pointer; color: #ccc; }
.sheet-fx { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid #333; background: #1b1b1b; }
.sheet-addr { min-width: 58px; text-align: center; font-weight: bold; color: #61afef; font-size: 13px; background: #111; border: 1px solid #333; border-radius: 4px; padding: 4px 6px; }
.sheet-input { flex: 1; min-width: 0; background: #111; border: 1px solid #444; color: #fff; padding: 5px 8px; border-radius: 4px; font-size: 13px; font-family: inherit; outline: none; }
.sheet-input:focus { border-color: #61afef; }
.sheet-scroll { flex: 1; min-height: 0; overflow: auto; position: relative; outline: none; background: #161616; }
table.sheet-grid { border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 13px; }
.sheet-grid th { background: #262626; color: #999; font-weight: normal; font-size: 11px; border-right: 1px solid #333; border-bottom: 1px solid #333; user-select: none; }
.sheet-grid thead th { position: sticky; top: 0; z-index: 3; height: 24px; text-align: center; cursor: s-resize; }
.sheet-grid tbody th { position: sticky; left: 0; z-index: 2; text-align: center; cursor: e-resize; }
.sheet-grid thead th.corner { left: 0; z-index: 4; cursor: pointer; }
.sheet-grid th.hl { background: #33404d; color: #fff; }
.sheet-grid td { border-right: 1px solid #2e2e2e; border-bottom: 1px solid #2e2e2e; padding: 0 6px; height: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #e0e0e0; cursor: cell; background: #1a1a1a; user-select: none; }
.sheet-grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
.sheet-grid td.err { color: #e06c75; }
.sheet-grid td.in-sel { box-shadow: inset 0 0 0 9999px rgba(97,175,239,0.18); }
.sheet-grid td.active { outline: 2px solid #61afef; outline-offset: -2px; }
.sheet-grid td.editing { padding: 0 2px; overflow: visible; }
.sheet-grid tr.hdr td { font-weight: bold; background: #232a31; position: sticky; top: 25px; z-index: 1; }
.sheet-rz { position: absolute; right: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 5; }
.sheet-rz:hover { background: rgba(97,175,239,0.5); }
.sheet-cell-input { width: 100%; height: 24px; background: #0f0f0f; color: #fff; border: none; outline: none; font: inherit; padding: 0 4px; box-sizing: border-box; }
.sheet-help { padding: 5px 12px; font-size: 11px; color: #777; border-top: 1px solid #2c2c2c; background: #1b1b1b; }
.sb-actions .sb-btn.sb-add-sheet { background: rgba(86,182,194,0.12) !important; border-color: rgba(86,182,194,0.30) !important; color: #c6eef2 !important; }
.sb-actions .sb-btn.sb-add-sheet:hover { background: rgba(86,182,194,0.22) !important; color: #fff !important; }

/* Notes beside web pages: setup popup + "Add to notes" dialog */
.modal-box.web-box { width: 560px; max-width: 94vw; max-height: 92vh; overflow-y: auto; }
.web-box ol { margin: 0 0 12px 20px; font-size: 13px; color: #ccc; line-height: 1.5; }
.web-box li { margin-bottom: 10px; }
.web-drag { display: inline-block; margin: 6px 0 2px; padding: 8px 16px; border-radius: 18px; background: #61afef; color: #0d1b2a; font-weight: bold; text-decoration: none; cursor: grab; }
.web-tip { font-size: 12px; color: #888; }
.modal-box.clip-box { width: 540px; max-width: 94vw; max-height: 94vh; overflow-y: auto; }
.clip-src { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; font-size: 13px; }
.clip-src b { color: #fff; word-break: break-word; }
.clip-src span { color: #61afef; font-size: 11px; word-break: break-all; }
.clip-text { max-height: 140px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; background: #151515; border: 1px solid #333; border-radius: 4px; padding: 8px 10px; font-size: 13px; color: #ddd; margin-bottom: 12px; }
.clip-opt { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid #333; border-radius: 6px; margin-bottom: 6px; font-size: 13px; color: #ddd; cursor: pointer; flex-wrap: wrap; }
.clip-opt:has(input:checked) { border-color: #61afef; background: rgba(97,175,239,0.10); }
.clip-opt.off { opacity: 0.45; cursor: default; }
.modal-box .clip-opt input[type=radio], .modal-box .clip-check input { width: 16px; height: 16px; margin: 0; padding: 0; accent-color: #61afef; flex: 0 0 auto; }
.modal-box .clip-opt select, .modal-box .clip-opt input[type=text] { width: auto; flex: 1 1 160px; min-width: 0; margin: 0; padding: 6px 8px; text-align: left; letter-spacing: normal; font-size: 13px; background: #111; color: #fff; border: 1px solid #555; border-radius: 4px; }
.clip-check { display: flex; gap: 8px; align-items: center; font-size: 13px; color: #ccc; margin: 10px 0 6px; cursor: pointer; }
.clip-note { font-size: 12px !important; color: #888 !important; margin: 4px 0 12px !important; }
.clip-actions { display: flex; gap: 8px; }
.modal-box .clip-actions button { flex: 1; margin: 0; }

/* Import / Export popup */
.modal-box.txt-box { width: 520px; max-width: 94vw; }
.txt-box p { margin-bottom: 14px; }
.txt-box p b { color: #fff; word-break: break-word; }
.txt-opt { display: flex; gap: 12px; align-items: center; background: #1b1b1b; border: 1px solid #333; border-radius: 6px; padding: 12px; margin-bottom: 10px; }
.txt-opt div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.txt-opt strong { color: #fff; font-size: 14px; }
.txt-opt span { color: #999; font-size: 12px; line-height: 1.4; }
.modal-box .txt-opt button { width: auto; flex: 0 0 auto; padding: 9px 14px; font-size: 13px; font-weight: bold; background: #61afef; color: #000; }
.modal-box .txt-opt button:disabled { opacity: 0.4; cursor: default; filter: none; }
.txt-opt.txt-all { border-color: #3a4f63; background: #1b2128; }
.txt-chk { display: flex !important; flex-direction: row !important; gap: 6px !important; align-items: center; font-size: 12px; color: #ccc; margin-top: 4px; cursor: pointer; }
.modal-box .txt-chk input { width: 15px; height: 15px; margin: 0; padding: 0; accent-color: #61afef; flex: 0 0 auto; }
@media (max-width: 500px) { .txt-opt { flex-direction: column; align-items: stretch; } }

/* PIN-protected tabs */
#pin-modal { z-index: 1050; }
#pin-modal .modal-box { width: 360px; max-width: 92vw; }
#pin-modal p { margin-bottom: 14px; text-align: left; white-space: pre-line; }
#pin-modal input { margin-bottom: 10px; }
.pin-err { color: #e06c75; font-size: 12px; min-height: 16px; margin-bottom: 10px; }
.pin-lock { margin: auto; text-align: center; padding: 30px 20px; max-width: 340px; width: 100%; }
.pin-lock .pin-icon { font-size: 44px; line-height: 1; }
.pin-lock h3 { margin: 12px 0 6px; color: #fff; font-size: 17px; word-break: break-word; }
.pin-lock p { font-size: 13px; color: #999; margin-bottom: 14px; line-height: 1.4; }
.pin-mask { -webkit-text-security: disc; }
.pin-lock input { width: 100%; padding: 12px; background: #111; color: #fff; border: 1px solid #555; border-radius: 4px; font-size: 18px; text-align: center; letter-spacing: 4px; margin-bottom: 8px; outline: none; }
.pin-lock input:focus { border-color: #61afef; }
.pin-lock button { width: 100%; padding: 10px; font-size: 14px; }
.pin-lock .pin-note { font-size: 11px; color: #666; margin: 14px 0 0; }