/* ============ Per-application styles ============ */

/* ---------- shared: app sidebars ---------- */
.files-sidebar, .set-sidebar { width: 212px; flex: none; background: var(--sidebar-bg); border-right: 1px solid var(--separator); padding: 10px 8px; }
.side-title { font-size: 12px; font-weight: 700; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .4px; padding: 12px 10px 5px; }
.side-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--fg); font-size: 14.5px; }
.side-row:hover { background: var(--list-row-hover); }
.side-row.active { background: color-mix(in srgb, var(--accent) 26%, transparent); font-weight: 500; }
.side-count { margin-left: auto; font-size: 12px; background: var(--entry-bg); border-radius: 999px; padding: 1px 8px; color: var(--fg-dim); }

/* ---------- Files ---------- */
.files-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.files-crumb { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; font-weight: 700; max-width: 46%; overflow: hidden; }
.files-crumb .crumb { border: none; background: none; color: var(--fg); font: inherit; padding: 4px 8px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.files-crumb .crumb:hover { background: var(--btn-flat-hover); }
.files-crumb .crumb.current { background: var(--entry-bg); }
.files-crumb .crumb-sep { opacity: .45; display: inline-flex; }
.files-search { border-radius: 999px; }
.files-view { flex: 1; padding: 14px 18px; }
.files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px 6px; align-content: start; }
.files-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 8px; border-radius: 12px; cursor: default; text-align: center; }
.files-item:hover { background: var(--list-row-hover); }
.files-item.selected { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.files-item .flabel { font-size: 13px; line-height: 1.25; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100px; }
.files-list { display: flex; flex-direction: column; }
.files-list-head, .files-row { display: grid; grid-template-columns: minmax(200px, 1fr) 110px 130px 110px 40px; gap: 8px; align-items: center; padding: 6px 12px; border-radius: 8px; }
.files-list-head { color: var(--fg-dim); font-size: 12.5px; font-weight: 500; padding: 6px 12px; border-bottom: 1px solid var(--separator); }
.files-row { font-size: 14px; cursor: default; border-bottom: 1px solid color-mix(in srgb, var(--separator) 45%, transparent); }
.files-row:hover { background: var(--list-row-hover); }
.files-row.selected { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.frow-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.frow-main .fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsize, .fdate { color: var(--fg-dim); font-size: 13px; }
.ftype { color: var(--fg-dim); font-size: 13px; }
.files-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--fg-dim); font-size: 18px; font-weight: 300; }
.files-empty .sub { font-size: 13.5px; color: var(--fg-faint); }
.files-loading { height: 100%; display: flex; align-items: center; justify-content: center; }
.trash-bar { display: flex; justify-content: flex-end; padding: 0 0 12px; }
.props { text-align: left; }
.prop-row { display: flex; justify-content: space-between; gap: 30px; padding: 7px 4px; border-bottom: 1px solid var(--separator); font-size: 14px; }
.prop-row .k { color: var(--fg-dim); }
.icon-btn.disabled { opacity: .35; pointer-events: none; }

/* ---------- Text Editor ---------- */
.editor-area {
  flex: 1; width: 100%; resize: none; border: none; outline: none; background: transparent;
  color: var(--fg); font-family: var(--mono); font-size: 14.5px; line-height: 1.65;
  padding: 18px 22px; caret-color: var(--accent); tab-size: 4;
}
.editor-area::placeholder { color: var(--fg-faint); }
.mod-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); opacity: 0; transition: opacity .2s; margin-left: 8px; }
.hb-title .subtitle { display: block; font-size: 12px; font-weight: 400; color: var(--fg-dim); }

/* ---------- Terminal ---------- */
.term-screen {
  flex: 1; width: 100%; background: #300A24; color: #ffffff;
  font-family: var(--mono); font-size: 14.5px; line-height: 1.5;
  padding: 10px 14px; cursor: text; overflow-y: auto; user-select: text;
}
.term-line { white-space: pre-wrap; word-break: break-word; min-height: 1.2em; }
.term-line.t-pre { white-space: pre; }
.term-line.t-dim { color: #b8a5b5; }
.term-line.t-err { color: #ff8a80; }
.t-user { color: #26A269; font-weight: 700; }
.t-path { color: #12488B; font-weight: 700; color: #3584e4; }
body .term-screen .t-path { color: #78d0ff; }
.t-dim { color: #d8c7d5; }
.t-orange { color: #E95420; }
.term-row { display: flex; align-items: baseline; }
.term-input { flex: 1; background: none; border: none; outline: none; color: #fff; font: inherit; caret-color: #fff; }

/* ---------- Settings ---------- */
.set-content { flex: 1; padding: 18px 26px 30px; min-width: 0; }
.set-h2 { font-weight: 700; font-size: 21px; margin: 2px 0 4px; }
.set-h3 { font-size: 14px; font-weight: 700; color: var(--fg-dim); margin: 22px 0 0; text-transform: none; }
.set-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 260px; color: var(--fg-dim); }
.set-empty .sub { font-size: 13.5px; color: var(--fg-faint); margin-top: 6px; }
.hoverable { cursor: pointer; }
.hoverable:hover { background: var(--list-row-hover); }
.style-row { display: flex; gap: 18px; margin-top: 14px; }
.style-card { cursor: pointer; border-radius: 12px; padding: 6px; border: 2.5px solid transparent; transition: border-color .15s; }
.style-card:hover { border-color: var(--btn-border); }
.style-card.sel { border-color: var(--accent); }
.style-preview { width: 168px; height: 110px; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid rgba(0,0,0,.2); }
.style-preview.light { background: #fafafa; }
.style-preview.dark { background: #242424; }
.sp-hb { height: 26px; background: #fff; border-bottom: 1px solid rgba(0,0,0,.12); }
.dark .sp-hb { background: #303030; border-bottom-color: rgba(255,255,255,.1); }
.sp-body { flex: 1; }
.style-label { text-align: center; font-size: 13.5px; padding: 6px 0 2px; font-weight: 500; }
.accent-row { display: flex; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.accent-dot { width: 34px; height: 34px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); transition: transform .12s; }
.accent-dot:hover { transform: scale(1.12); }
.accent-dot.sel { border-color: var(--fg); }
.wall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 14px; }
.wall-thumb { aspect-ratio: 16/9; border-radius: 10px; background-size: cover; background-position: center; cursor: pointer; border: 3px solid transparent; box-shadow: 0 2px 8px rgba(0,0,0,.25); position: relative; overflow: hidden; transition: transform .15s; }
.wall-thumb:hover { transform: scale(1.03); }
.wall-thumb.sel { border-color: var(--accent); }
.wall-name { position: absolute; left: 8px; bottom: 6px; color: #fff; font-size: 12.5px; text-shadow: 0 1px 3px rgba(0,0,0,.8); font-weight: 500; }
.user-hero { display: flex; align-items: center; padding: 12px 4px; }
.about-hero { display: flex; flex-direction: column; align-items: center; padding: 20px 0 6px; }
.about-name { font-size: 24px; font-weight: 700; margin-top: 16px; }
.about-sub { color: var(--fg-dim); margin-top: 2px; }

/* ---------- Calculator ---------- */
.calc-wrap { flex: 1; display: flex; flex-direction: column; padding: 14px; gap: 12px; }
.calc-display { text-align: right; padding: 14px 10px; }
.calc-expr { min-height: 20px; color: var(--fg-dim); font-size: 15px; font-family: var(--mono); }
.calc-result { font-size: 40px; font-weight: 300; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calc-pad { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 8px; }
.calc-key { border: none; border-radius: 10px; background: var(--btn-bg); color: var(--fg); font-size: 19px; cursor: pointer; transition: filter .1s, transform .05s; }
.calc-key:hover { filter: brightness(1.12); }
.calc-key:active { transform: scale(.96); }
.calc-key.op { background: color-mix(in srgb, var(--accent) 18%, var(--btn-bg)); }
.calc-key.eq { background: var(--accent); color: #fff; }
.calc-key.c { color: #e01b24; }

/* ---------- Firefox ---------- */
.ff-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--window-bg); }
.ff-tabbar { display: flex; align-items: center; gap: 4px; padding: 6px 8px 0; background: var(--sidebar-bg); }
.ff-tab { display: flex; align-items: center; gap: 8px; max-width: 220px; min-width: 120px; padding: 8px 10px; border-radius: 8px 8px 0 0; cursor: pointer; background: transparent; color: var(--fg-dim); font-size: 13px; position: relative; }
.ff-tab:hover { background: var(--list-row-hover); }
.ff-tab.active { background: var(--window-bg); color: var(--fg); box-shadow: 0 -1px 0 var(--separator) inset; }
.ff-tab-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.ff-tab-close { border: none; background: none; color: inherit; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: .6; cursor: pointer; }
.ff-tab-close:hover { background: var(--list-row-active); opacity: 1; }
.ff-newtab { margin-left: 2px; }
.ff-toolbar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--window-bg); border-bottom: 1px solid var(--separator); }
.ff-urlwrap { flex: 1; display: flex; align-items: center; gap: 8px; background: var(--entry-bg); border-radius: 999px; padding: 6px 14px; color: var(--fg-dim); }
.ff-url { flex: 1; background: none; border: none; outline: none; color: var(--fg); font-size: 14px; }
.ff-viewport { flex: 1; min-height: 0; background: var(--window-bg); }
.ff-page { padding: 0; min-height: 100%; }
.ff-start { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 78vh; }
.ff-wordmark { font-size: 44px; font-weight: 300; color: var(--fg); margin-bottom: 26px; letter-spacing: .5px; }
.ff-tiles { display: flex; gap: 18px; margin-top: 34px; flex-wrap: wrap; justify-content: center; }
.ff-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
.ff-tile:hover .ff-tile-icon { transform: scale(1.08); }
.ff-tile-icon { width: 52px; height: 52px; border-radius: 12px; color: #fff; font-weight: 700; font-size: 22px; display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.ff-tile-name { font-size: 12.5px; color: var(--fg-dim); }
.ff-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; }
.ff-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--entry-bg); border-top-color: var(--accent); animation: spin .8s linear infinite; }
.ff-error { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 70vh; text-align: center; padding: 20px; }
.ff-error h1 { font-size: 24px; font-weight: 300; margin: 18px 0 8px; }
.ff-error p { max-width: 480px; color: var(--fg-dim); line-height: 1.55; }
.ff-err-art { font-size: 44px; opacity: .6; }
.ff-search { padding: 30px 46px; }
.ff-search-head { display: flex; align-items: baseline; border-bottom: 1px solid var(--separator); padding-bottom: 12px; margin-bottom: 8px; }
.ff-result { padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--separator) 50%, transparent); }
.ff-res-url { color: var(--fg-faint); font-size: 12.5px; }
.ff-res-title { color: #1a5fb4; font-size: 17px; cursor: pointer; }
.ff-res-title:hover { text-decoration: underline; }
body.theme-dark .ff-res-title { color: #78d0ff; }
.ff-res-snippet { color: var(--fg-dim); font-size: 13.5px; margin-top: 3px; line-height: 1.5; }
.ff-ubuntu { min-height: 100%; }
.ub-nav { display: flex; align-items: center; gap: 26px; padding: 14px 40px; background: #2c001e; color: #fff; font-size: 14px; }
.ub-nav span:not(.ub-logo) { cursor: pointer; opacity: .85; }
.ub-nav span:hover { opacity: 1; text-decoration: underline; }
.ub-logo { font-weight: 700; font-size: 17px; color: #E95420; margin-right: 20px; }
.ub-hero { background: linear-gradient(120deg, #77216F 0%, #2c001e 60%, #5b1746 100%); color: #fff; padding: 70px 40px; }
.ub-hero-inner { max-width: 640px; margin: 0 auto; }
.ub-hero h1 { font-size: 42px; font-weight: 300; margin: 0; }
.ub-hero h2 { font-size: 20px; font-weight: 400; opacity: .85; margin: 6px 0 14px; }
.ub-hero p { line-height: 1.6; opacity: .92; max-width: 520px; }
.ub-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; padding: 40px; max-width: 1000px; margin: 0 auto; }
.ub-card h3 { margin: 0 0 8px; }
.ub-card p { color: var(--fg-dim); font-size: 14px; line-height: 1.55; margin: 0; }
.ub-foot { text-align: center; color: var(--fg-faint); font-size: 12.5px; padding: 26px; border-top: 1px solid var(--separator); }
.ff-wiki { display: flex; min-height: 100%; }
.wiki-side { width: 180px; flex: none; border-right: 1px solid var(--separator); padding: 26px 16px; font-size: 13.5px; }
.wiki-link { padding: 5px 0; color: #1a5fb4; cursor: pointer; }
body.theme-dark .wiki-link { color: #78d0ff; }
.wiki-main { flex: 1; padding: 30px 44px; max-width: 760px; }
.wiki-sec h3 { margin: 20px 0 6px; font-family: Georgia, serif; }
.wiki-sec p { line-height: 1.65; color: var(--fg); }

/* ---------- Software ---------- */
.sw-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sw-tabs { display: flex; gap: 4px; padding: 10px 16px 0; border-bottom: 1px solid var(--separator); background: var(--sidebar-bg); }
.swtab { border: none; background: none; padding: 9px 16px; font-size: 14.5px; font-weight: 500; color: var(--fg-dim); cursor: pointer; border-radius: 8px 8px 0 0; position: relative; }
.swtab:hover { color: var(--fg); background: var(--list-row-hover); }
.swtab.active { color: var(--fg); }
.swtab.active::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2.5px; background: var(--accent); border-radius: 2px; }
.sw-content { flex: 1; padding: 18px 22px 30px; min-width: 0; }
.sw-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; border-radius: 14px; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 26%, var(--card-bg)), var(--card-bg)); border: 1px solid var(--card-border); }
.sw-chips { display: flex; gap: 8px; margin: 16px 0; flex-wrap: wrap; }
.sw-chip { padding: 6px 14px; border-radius: 999px; background: var(--entry-bg); font-size: 13.5px; cursor: pointer; }
.sw-chip:hover { background: var(--btn-hover); }
.sw-chip.active { background: var(--accent); color: #fff; }
.sw-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.sw-card { display: flex; align-items: center; gap: 16px; padding: 14px 16px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; cursor: pointer; transition: box-shadow .15s; }
.sw-card:hover { box-shadow: 0 3px 14px rgba(0,0,0,.14); }
.sw-card-main { flex: 1; min-width: 0; }
.sw-card-title { font-weight: 500; font-size: 15.5px; }
.sw-card-sub { color: var(--fg-dim); font-size: 12.5px; margin-top: 1px; }
.sw-card-desc { color: var(--fg-dim); font-size: 13px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.install-progress { width: 110px; }
.install-bar { height: 6px; border-radius: 4px; background: var(--entry-bg); overflow: hidden; }
.install-fill { height: 100%; background: var(--accent); transition: width .25s; border-radius: 4px; }
.sw-up-to-date { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 320px; color: var(--fg-dim); }
.sw-up-to-date .icon { color: #33d17a; }
.sw-up-to-date .sub { font-size: 13.5px; color: var(--fg-faint); margin-top: 5px; }
.sw-badge { font-size: 11.5px; padding: 3px 10px; border-radius: 999px; background: var(--entry-bg); color: var(--fg-dim); }
.sw-badge.security { background: #e01b24; color: #fff; }
.sw-badge.bug-fix { background: #e5a50a; color: #000; }
.sw-badge.enhancement { background: #308280; color: #fff; }

/* ---------- Clocks ---------- */
.clocks-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.clocks-tabs { display: flex; gap: 2px; padding: 10px 14px 0; border-bottom: 1px solid var(--separator); background: var(--sidebar-bg); }
.ctab { display: flex; align-items: center; gap: 7px; border: none; background: none; padding: 9px 15px; font-size: 14px; font-weight: 500; color: var(--fg-dim); cursor: pointer; border-radius: 8px 8px 0 0; }
.ctab:hover { color: var(--fg); background: var(--list-row-hover); }
.ctab.active { color: var(--fg); box-shadow: 0 -1px 0 var(--separator) inset, 0 2px 0 var(--accent) inset; }
.clocks-content { flex: 1; padding: 22px; }
.world-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.world-card { position: relative; border-radius: 14px; padding: 18px; overflow: hidden; color: #fff; min-height: 110px; }
.world-card.day { background: linear-gradient(135deg, #3584e4, #62a0ea); }
.world-card.night { background: linear-gradient(135deg, #241f31, #3d3846); }
.wc-name { font-weight: 700; }
.wc-day { font-weight: 400; opacity: .8; margin-left: 8px; font-size: 13px; }
.wc-time { font-size: 38px; font-weight: 300; margin-top: 14px; letter-spacing: 1px; }
.wc-icon { position: absolute; right: 14px; top: 14px; opacity: .9; }
.sw-wrap2 {}
.sw-display { font-size: 64px; font-weight: 300; text-align: center; padding: 30px 0; font-variant-numeric: tabular-nums; }
.sw-wrap2, .sw-wrap .sw-display {}
.sw-wrap { min-width: 0; }
.clocks-content .sw-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60%; }

/* ---------- Image Viewer ---------- */
.iv-stage { flex: 1; display: flex; align-items: center; justify-content: center; background: #1b1b1f; overflow: hidden; position: relative; user-select: none; }
.iv-img { max-width: 92%; max-height: 92%; border-radius: 4px; box-shadow: 0 6px 30px rgba(0,0,0,.5); transition: transform .15s var(--ease-out); }
.iv-empty { position: absolute; color: rgba(255,255,255,.4); }
.iv-zoom-label { min-width: 48px; text-align: center; font-size: 13px; color: var(--fg-dim); }

/* ---------- System Monitor ---------- */
.sm-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sm-tabs { display: flex; gap: 2px; padding: 10px 14px 0; border-bottom: 1px solid var(--separator); background: var(--sidebar-bg); }
.sm-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sm-list { flex: 1; padding: 10px 14px; }
.sm-row { display: grid; grid-template-columns: minmax(160px, 1fr) 90px 70px 70px 90px 70px; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 7px; font-size: 13.5px; }
.sm-row:hover { background: var(--list-row-hover); }
.sm-head { color: var(--fg-dim); font-size: 12.5px; font-weight: 500; position: sticky; top: 0; background: var(--window-bg); }
.sm-c { text-align: right; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.sm-row .cpu { color: var(--fg); }
.sm-kill { opacity: 0; }
.sm-row:hover .sm-kill { opacity: 1; }
.sm-res { padding: 18px 24px; display: flex; flex-direction: column; gap: 22px; }
.sm-chart-title { font-size: 13.5px; font-weight: 500; color: var(--fg-dim); display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sm-legend { display: flex; gap: 14px; font-size: 12.5px; }
.sm-canvas { width: 100%; height: 120px; border: 1px solid var(--card-border); border-radius: 8px; }
.sm-info { font-size: 13px; color: var(--fg-dim); }

/* ---------- Mines ---------- */
.mines-wrap { flex: 1; display: flex; flex-direction: column; padding: 16px; gap: 12px; align-items: center; }
.mines-status { display: flex; justify-content: space-between; width: 100%; max-width: 380px; font-weight: 500; color: var(--fg-dim); }
.mines-board { display: grid; gap: 4px; width: 100%; max-width: 380px; }
.mines-cell { aspect-ratio: 1; border: none; border-radius: 7px; background: var(--btn-bg); font: inherit; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .08s; }
.mines-cell:hover { background: var(--btn-hover); }
.mines-cell.rev { background: color-mix(in srgb, var(--fg) 7%, transparent); cursor: default; }
.mines-cell.rev[data-n="1"] { color: #3584e4; }
.mines-cell.rev[data-n="2"] { color: #33d17a; }
.mines-cell.rev[data-n="3"] { color: #e01b24; }
.mines-cell.rev[data-n="4"] { color: #8a5cd6; }
.mines-cell.rev[data-n="5"] { color: #e5a50a; }
.mines-cell.rev[data-n="6"], .mines-cell.rev[data-n="7"], .mines-cell.rev[data-n="8"] { color: #c64600; }
.mines-cell.mine { background: #e01b24; color: #fff; }
.mines-cell.flag::after { content: '⚑'; }

/* ---------- Weather ---------- */
.weather-wrap { flex: 1; padding: 22px; overflow: auto; }
.weather-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.weather-card { background: linear-gradient(160deg, #308280, #2667c2); border-radius: 14px; padding: 18px; color: #fff; position: relative; }
.w-temp { font-size: 44px; font-weight: 300; margin-top: 12px; }
.w-cond { opacity: .85; }
.w-hi-lo { margin-top: 10px; font-size: 13px; opacity: .8; }
.w-icon { position: absolute; right: 16px; top: 16px; }

/* ---------- Help ---------- */
.help-wrap { flex: 1; padding: 30px 36px; overflow: auto; }
.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.help-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; padding: 20px; cursor: default; transition: transform .15s, box-shadow .15s; }
.help-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.help-card h3 { margin: 10px 0 6px; font-size: 16px; }
.help-card p { margin: 0; color: var(--fg-dim); font-size: 13.5px; line-height: 1.55; }

/* battery warning icon in top bar */
.icon.battery-warn { color: #ff7b63; }
.icon.battery-crit { color: #ff5b5b; }