/* ================================================================
   app.css — HTML Previewer app page styles
   ================================================================ */
:root {
  --bg:#0d1117; --surface:#161b22; --overlay:#1c2128; --border:#30363d;
  --border-hi:#484f58; --accent:#58a6ff; --adim:rgba(88,166,255,.12);
  --green:#3fb950; --red:#f85149; --yellow:#d29922; --orange:#e3b341;
  --pink:#f778ba; --text:#e6edf3; --muted:#8b949e;
  --mono:'JetBrains Mono',monospace; --sans:'Inter',sans-serif;
  --r:6px; --shadow:0 8px 32px rgba(0,0,0,.45); --t:.15s ease;
}
[data-theme="light"] {
  --bg:#f6f8fa; --surface:#fff; --overlay:#eaeef2; --border:#d0d7de;
  --border-hi:#afb8c1; --text:#1f2328; --muted:#57606a;
  --shadow:0 8px 32px rgba(0,0,0,.1);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; overflow:hidden; }
body { font-family:var(--sans); background:var(--bg); color:var(--text); display:flex; flex-direction:column; -webkit-font-smoothing:antialiased; }
i.fi { display:inline-flex; align-items:center; justify-content:center; }

/* HEADER */
header { height:46px; flex-shrink:0; display:flex; align-items:center; gap:6px; padding:0 10px; background:var(--surface); border-bottom:1px solid var(--border); z-index:20; }
.logo { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:var(--text); text-decoration:none; padding:4px 8px; border-radius:var(--r); border:1px solid transparent; white-space:nowrap; flex-shrink:0; transition:background var(--t),border-color var(--t); }
.logo:hover { background:var(--overlay); border-color:var(--border); }
.logo img { width:18px; height:18px; border-radius:3px; object-fit:contain; }
.logo-accent { color:var(--accent); }
.url-bar { flex:1; max-width:340px; height:28px; display:flex; align-items:center; gap:5px; padding:0 9px; background:var(--bg); border:1px solid var(--border); border-radius:20px; font-family:var(--mono); font-size:11px; color:var(--muted); overflow:hidden; transition:border-color var(--t); }
.url-bar:hover { border-color:var(--border-hi); }
.url-lock { color:var(--green); flex-shrink:0; font-size:11px; }
.url-scheme { color:var(--accent); flex-shrink:0; }
.url-path { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hdr-spacer { flex:1; }
.hdr-nav { display:flex; align-items:center; gap:2px; flex-shrink:0; }
.hdr-btn { all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:5px; padding:4px 9px; height:28px; font-family:var(--sans); font-size:12px; font-weight:500; color:var(--muted); cursor:pointer; border-radius:var(--r); border:1px solid transparent; white-space:nowrap; text-decoration:none; transition:background var(--t),border-color var(--t),color var(--t); }
.hdr-btn:hover { background:var(--overlay); border-color:var(--border); color:var(--text); }
.hdr-btn .fi { font-size:13px; flex-shrink:0; }
.hdr-sep { width:1px; height:18px; background:var(--border); margin:0 2px; flex-shrink:0; }
.hdr-run { background:var(--accent); color:#fff !important; border-color:transparent !important; padding:4px 14px; font-weight:600; }
.hdr-run:hover { filter:brightness(1.12); background:var(--accent) !important; }

/* WORKSPACE */
.workspace { display:flex; flex:1; overflow:hidden; min-height:0; }

/* SIDEBAR */
.sidebar { width:178px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; padding:5px 4px; gap:1px; overflow-y:auto; overflow-x:hidden; }
.sb-section { font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--muted); padding:10px 8px 3px; user-select:none; }
.sb-section:first-child { padding-top:5px; }
.sb-sep { height:1px; background:var(--border); margin:4px; flex-shrink:0; }
.sb-btn { all:unset; box-sizing:border-box; display:flex; align-items:center; gap:7px; width:100%; padding:6px 8px; font-family:var(--sans); font-size:12px; font-weight:500; color:var(--muted); cursor:pointer; border-radius:var(--r); border:1px solid transparent; text-decoration:none; white-space:nowrap; transition:background var(--t),border-color var(--t),color var(--t); }
.sb-btn:hover,.sb-btn.active { background:var(--overlay); border-color:var(--border); color:var(--text); }
.sb-btn .fi { font-size:13px; width:16px; text-align:center; flex-shrink:0; }
.sb-accent { color:var(--accent); }
.sb-accent:hover,.sb-accent.active { background:var(--adim); border-color:rgba(88,166,255,.25); color:var(--accent); }
.sb-green { color:var(--green); }
.sb-green:hover,.sb-green.active { background:rgba(63,185,80,.1); border-color:rgba(63,185,80,.25); color:var(--green); }
.sb-red { color:var(--red); }
.sb-red:hover { background:rgba(248,81,73,.1); border-color:rgba(248,81,73,.25); color:var(--red); }
.sb-pink { color:var(--pink); }
.sb-pink:hover { background:rgba(247,120,186,.1); border-color:rgba(247,120,186,.25); color:var(--pink); }

/* THEME DROPDOWN */
.theme-dd { position:relative; width:100%; }
.theme-trigger { all:unset; box-sizing:border-box; display:flex; align-items:center; gap:7px; width:100%; padding:6px 8px; font-family:var(--sans); font-size:12px; font-weight:500; color:var(--muted); cursor:pointer; border-radius:var(--r); border:1px solid transparent; transition:background var(--t),border-color var(--t),color var(--t); }
.theme-trigger:hover,.theme-trigger.open { background:var(--overlay); border-color:var(--border); color:var(--text); }
.theme-trigger .fi { font-size:13px; width:16px; text-align:center; flex-shrink:0; }
.theme-trigger .theme-label { flex:1; }
.theme-trigger .theme-caret { font-size:10px; margin-left:auto; flex-shrink:0; transition:transform var(--t); }
.theme-trigger.open .theme-caret { transform:rotate(180deg); }
.theme-menu { position:absolute; bottom:calc(100% + 4px); left:0; right:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); z-index:100; transform:translateY(4px); opacity:0; pointer-events:none; transition:opacity .12s ease,transform .12s ease; }
.theme-menu.visible { opacity:1; transform:translateY(0); pointer-events:all; }
.theme-menu button { all:unset; box-sizing:border-box; display:flex; align-items:center; gap:8px; width:100%; padding:8px 10px; font-family:var(--sans); font-size:12px; font-weight:500; color:var(--muted); cursor:pointer; transition:background var(--t),color var(--t); }
.theme-menu button:hover { background:var(--overlay); color:var(--text); }
.theme-menu button.active { color:var(--accent); }
.theme-menu button.active:hover { background:var(--adim); }
.theme-menu button .fi { font-size:13px; width:16px; text-align:center; }
.theme-menu .tm-label { flex:1; }
.theme-menu .tm-check { font-size:11px; color:var(--accent); opacity:0; transition:opacity var(--t); margin-left:auto; }
.theme-menu button.active .tm-check { opacity:1; }

/* MAIN */
.main { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.tabbar { flex-shrink:0; display:flex; height:36px; background:var(--surface); border-bottom:1px solid var(--border); padding:0 4px; gap:2px; align-items:flex-end; }
.tab { all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:6px; padding:0 13px; height:32px; font-family:var(--sans); font-size:12px; font-weight:500; color:var(--muted); cursor:pointer; border-radius:var(--r) var(--r) 0 0; border:1px solid transparent; border-bottom:none; user-select:none; white-space:nowrap; position:relative; top:1px; transition:color var(--t),background var(--t),border-color var(--t); }
.tab:hover { color:var(--text); background:var(--overlay); }
.tab.active { color:var(--text); background:var(--bg); border-color:var(--border); border-bottom-color:var(--bg); }
.tab .fi { font-size:12px; }
.panels { flex:1; display:flex; overflow:hidden; }
.panel { flex:1; display:none; flex-direction:column; overflow:hidden; }
.panel.active { display:flex; }

/* EDITOR */
.ed-meta { flex-shrink:0; height:27px; display:flex; align-items:center; gap:6px; padding:0 10px; background:var(--overlay); border-bottom:1px solid var(--border); font-family:var(--mono); font-size:10px; color:var(--muted); }
.ed-tag { background:var(--adim); border:1px solid rgba(88,166,255,.2); color:var(--accent); padding:1px 6px; border-radius:3px; font-size:9px; font-weight:700; letter-spacing:.4px; }
.ed-meta-r { margin-left:auto; display:flex; gap:8px; align-items:center; }
.ed-meta kbd { padding:1px 5px; background:var(--surface); border:1px solid var(--border); border-radius:3px; font-family:var(--mono); font-size:9px; color:var(--muted); }
.ed-body { flex:1; display:flex; overflow:hidden; }
.gutter { width:46px; flex-shrink:0; padding:10px 8px; background:var(--overlay); border-right:1px solid var(--border); font-family:var(--mono); font-size:12px; line-height:1.65; color:var(--muted); text-align:right; user-select:none; overflow:hidden; }
#code { flex:1; padding:10px 14px; background:var(--bg); color:var(--text); font-family:var(--mono); font-size:12.5px; line-height:1.65; border:none; outline:none; resize:none; tab-size:2; white-space:pre; overflow:auto; caret-color:var(--accent); transition:background var(--t),color var(--t); }
#code::placeholder { color:var(--muted); opacity:.35; font-style:italic; }
#code::selection { background:rgba(88,166,255,.22); }

/* PREVIEW */
.pv-chrome { flex-shrink:0; height:35px; display:flex; align-items:center; gap:8px; padding:0 10px; background:var(--surface); border-bottom:1px solid var(--border); }
.traffic { display:flex; gap:5px; align-items:center; flex-shrink:0; }
.traffic button { all:unset; box-sizing:border-box; width:12px; height:12px; border-radius:50%; cursor:pointer; transition:filter var(--t),transform var(--t); }
.traffic button:hover { filter:brightness(.75); transform:scale(1.1); }
.tc-r { background:var(--red); } .tc-y { background:var(--yellow); } .tc-g { background:var(--green); }
.pv-addr { flex:1; height:22px; display:flex; align-items:center; gap:4px; padding:0 8px; background:var(--bg); border:1px solid var(--border); border-radius:100px; font-family:var(--mono); font-size:10px; min-width:0; overflow:hidden; transition:border-color var(--t); }
.pv-addr:hover { border-color:var(--border-hi); }
.pv-lock { color:var(--green); flex-shrink:0; font-size:10px; }
.pv-scheme { color:var(--accent); flex-shrink:0; }
.pv-slug { color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pv-tools { display:flex; gap:3px; flex-shrink:0; }
.pv-tool { all:unset; box-sizing:border-box; width:24px; height:24px; display:flex; align-items:center; justify-content:center; background:var(--overlay); border:1px solid var(--border); border-radius:var(--r); cursor:pointer; color:var(--muted); transition:border-color var(--t),color var(--t),background var(--t); }
.pv-tool:hover { border-color:var(--accent); color:var(--accent); background:var(--adim); }
.pv-tool .fi { font-size:12px; }
#preview-frame { flex:1; border:none; background:#fff; display:block; }

/* HIGHLIGHT */
.hl-meta { flex-shrink:0; height:27px; display:flex; align-items:center; gap:8px; padding:0 10px; background:var(--overlay); border-bottom:1px solid var(--border); font-family:var(--mono); font-size:10px; color:var(--muted); }
.hl-legend { display:flex; gap:12px; margin-left:auto; }
.hl-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:4px; }
.hl-scroll { flex:1; overflow:auto; padding:10px 14px; }
#hl-out { font-family:var(--mono); font-size:12.5px; line-height:1.65; white-space:pre-wrap; word-break:break-all; }
.s-tag { color:#57ab5a; } .s-attr { color:#6cb6ff; } .s-val { color:#96d0ff; }
.s-cmt,.s-doc { color:var(--muted); font-style:italic; }
.s-br { color:var(--muted); opacity:.6; } .s-txt { color:var(--text); opacity:.7; }

/* STATUS BAR */
.statusbar { flex-shrink:0; height:22px; display:flex; align-items:center; background:var(--surface); border-top:1px solid var(--border); font-family:var(--mono); font-size:10px; color:var(--muted); overflow:hidden; }
.st-cell { padding:0 10px; height:100%; display:flex; align-items:center; gap:5px; border-right:1px solid var(--border); white-space:nowrap; }
.st-cell:last-child { border-right:none; }
.st-right { margin-left:auto; border-right:none; border-left:1px solid var(--border); }
.st-dot { width:6px; height:6px; border-radius:50%; background:var(--green); flex-shrink:0; }
.st-dot.busy { background:var(--yellow); animation:pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.4} }

/* MODAL */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); z-index:500; display:flex; align-items:center; justify-content:center; padding:16px; opacity:0; pointer-events:none; transition:opacity .18s ease; }
.modal-overlay.visible { opacity:1; pointer-events:all; }
.modal { background:var(--surface); border:1px solid var(--border); border-radius:12px; width:100%; max-width:440px; box-shadow:var(--shadow); transform:translateY(12px) scale(.98); transition:transform .18s ease; }
.modal-overlay.visible .modal { transform:translateY(0) scale(1); }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); }
.modal-title { font-size:13px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:7px; }
.modal-title .fi { font-size:14px; color:var(--accent); }
.modal-close { all:unset; box-sizing:border-box; width:26px; height:26px; display:flex; align-items:center; justify-content:center; color:var(--muted); cursor:pointer; border-radius:var(--r); transition:background var(--t),color var(--t); }
.modal-close:hover { background:var(--overlay); color:var(--text); }
.modal-close .fi { font-size:13px; }
.modal-tabs { display:flex; border-bottom:1px solid var(--border); background:var(--overlay); }
.modal-tab { all:unset; box-sizing:border-box; display:flex; align-items:center; gap:5px; padding:9px 16px; font-family:var(--sans); font-size:12px; font-weight:500; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color var(--t),border-color var(--t); }
.modal-tab:hover { color:var(--text); }
.modal-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.modal-tab .fi { font-size:12px; }
.modal-body { padding:18px; display:flex; flex-direction:column; gap:14px; }
.modal-pane { display:none; flex-direction:column; gap:12px; }
.modal-pane.active { display:flex; }
.modal-footer { display:flex; gap:8px; justify-content:flex-end; padding:12px 18px; border-top:1px solid var(--border); }
.inp-label { display:block; font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.inp { display:block; width:100%; height:34px; padding:0 10px; background:var(--bg); border:1px solid var(--border); border-radius:var(--r); font-family:var(--mono); font-size:12px; color:var(--text); outline:none; transition:border-color var(--t),box-shadow var(--t); }
.inp:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--adim); }
.inp::placeholder { color:var(--muted); opacity:.5; }
.inp-row { display:flex; gap:6px; align-items:flex-end; }
.inp-row .inp { flex:1; }
.inp-hint { font-size:11px; color:var(--muted); line-height:1.65; }
.inp-hint code { font-family:var(--mono); font-size:10px; background:var(--overlay); border:1px solid var(--border); padding:1px 5px; border-radius:3px; }
.file-zone { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:30px 20px; border:1.5px dashed var(--border); border-radius:var(--r); cursor:pointer; text-align:center; transition:border-color var(--t),background var(--t); }
.file-zone:hover { border-color:var(--accent); background:var(--adim); }
.file-zone .fi { font-size:26px; color:var(--muted); transition:color var(--t); }
.file-zone:hover .fi { color:var(--accent); }
.file-zone-title { font-size:13px; font-weight:600; color:var(--text); }
.file-zone-sub { font-size:11px; color:var(--muted); }
.btn-m-p { all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:5px; padding:7px 14px; font-family:var(--sans); font-size:12px; font-weight:600; color:#fff; background:var(--accent); border-radius:var(--r); cursor:pointer; transition:filter var(--t); white-space:nowrap; }
.btn-m-p:hover { filter:brightness(1.12); }
.btn-m-p:disabled { opacity:.5; cursor:not-allowed; filter:none; }
.btn-m-p .fi { font-size:12px; }
.btn-m-g { all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:5px; padding:7px 14px; font-family:var(--sans); font-size:12px; font-weight:600; color:var(--text); background:var(--overlay); border:1px solid var(--border); border-radius:var(--r); cursor:pointer; transition:border-color var(--t),color var(--t); }
.btn-m-g:hover { border-color:var(--accent); color:var(--accent); }

/* TOAST */
#toast { position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(12px); padding:7px 16px; background:var(--surface); border:1px solid var(--border); border-radius:20px; font-family:var(--sans); font-size:12px; font-weight:600; pointer-events:none; opacity:0; transition:opacity .18s ease,transform .18s ease; z-index:9999; box-shadow:var(--shadow); white-space:nowrap; color:var(--text); }
#toast.show  { opacity:1; transform:translateX(-50%) translateY(0); }
#toast.ok    { color:var(--green);  border-color:rgba(63,185,80,.3); }
#toast.info  { color:var(--accent); border-color:rgba(88,166,255,.3); }
#toast.warn  { color:var(--orange); border-color:rgba(227,179,65,.3); }
#toast.error { color:var(--red);    border-color:rgba(248,81,73,.3); }

#file-in { position:absolute; width:0; height:0; opacity:0; pointer-events:none; }

/* EMBED modes */
body.embed         header, body.embed         .statusbar { display:none; }
body.embed         .sb-import, body.embed     .sb-export { display:none; }
body.embed-demo    header, body.embed-demo    .statusbar { display:none; }
body.embed-demo    .workspace { pointer-events:none !important; user-select:none !important; }
body.embed-demo    #code { caret-color:transparent; }
body.embed-readonly header, body.embed-readonly .statusbar,
body.embed-readonly .sidebar, body.embed-readonly .tabbar { display:none; }
body.embed-readonly .workspace { pointer-events:none !important; user-select:none !important; }
body.embed-readonly #code { caret-color:transparent; }

::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:var(--border-hi); }

@media (max-width:580px) {
  .sidebar { width:42px; }
  .sb-btn > span:not(.fi) { display:none; }
  .sb-section,.sb-sep { display:none; }
  .sb-btn { justify-content:center; padding:8px; gap:0; }
  .theme-trigger .theme-label,.theme-trigger .theme-caret { display:none; }
  .url-bar { display:none; }
  .hdr-btn > span { display:none; }
  .ed-meta kbd,.ed-meta .ed-meta-r > :last-child { display:none; }
}

/* ── WORD WRAP ─────────────────────────────────────────────────── */
#code.wrap { white-space: pre-wrap; word-break: break-all; }
.sb-btn.active.wrap-active { color:var(--accent); background:var(--adim); border-color:rgba(88,166,255,.25); }

/* ── DRAG-AND-DROP FILE ZONE ───────────────────────────────────── */
.file-zone.dragover { border-color:var(--accent); background:var(--adim); box-shadow:0 0 0 3px var(--adim); }
.file-zone.dragover .fi { color:var(--accent); }
.file-zone.dragover .file-zone-title { color:var(--accent); }

/* ── HIGHLIGHT COPY BUTTON ─────────────────────────────────────── */
.hl-copy-btn { all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:4px; padding:2px 8px; height:20px; font-family:var(--sans); font-size:10px; font-weight:600; color:var(--muted); background:var(--surface); border:1px solid var(--border); border-radius:3px; cursor:pointer; transition:border-color var(--t),color var(--t),background var(--t); }
.hl-copy-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--adim); }
.hl-copy-btn .fi { font-size:10px; }

/* ── WORD WRAP TOGGLE BUTTON ───────────────────────────────────── */
.wrap-toggle { all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:4px; padding:2px 8px; height:20px; font-family:var(--sans); font-size:10px; font-weight:600; color:var(--muted); background:var(--surface); border:1px solid var(--border); border-radius:3px; cursor:pointer; white-space:nowrap; transition:border-color var(--t),color var(--t),background var(--t); }
.wrap-toggle:hover { border-color:var(--accent); color:var(--accent); background:var(--adim); }
.wrap-toggle.active { border-color:rgba(88,166,255,.4); color:var(--accent); background:var(--adim); }
.wrap-toggle .fi { font-size:10px; }

/* ── MOBILE SIDEBAR TOGGLE ─────────────────────────────────────── */
.hdr-sidebar-toggle { all:unset; box-sizing:border-box; display:none; align-items:center; justify-content:center; width:32px; height:32px; border-radius:var(--r); border:1px solid var(--border); color:var(--muted); cursor:pointer; flex-shrink:0; transition:background var(--t),border-color var(--t),color var(--t); }
.hdr-sidebar-toggle:hover { background:var(--overlay); border-color:var(--border-hi); color:var(--text); }
.hdr-sidebar-toggle .fi { font-size:14px; }

/* ── SIDEBAR OVERLAY (mobile) ──────────────────────────────────── */
#sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:49; backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }

/* ── FOCUS VISIBLE RINGS ───────────────────────────────────────── */
button:focus-visible, a:focus-visible, [tabindex="0"]:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px;
}

/* ── SKIP TO CONTENT ───────────────────────────────────────────── */
.skip-link { position:absolute; top:-100%; left:8px; z-index:9999; padding:6px 12px; background:var(--accent); color:#fff; font-size:12px; font-weight:600; border-radius:0 0 var(--r) var(--r); text-decoration:none; transition:top .1s; }
.skip-link:focus { top:0; }

/* ── IMPROVED MOBILE (≤ 720px) ─────────────────────────────────── */
@media (max-width:720px) {
  .hdr-sidebar-toggle { display:inline-flex; }
  #sidebar-overlay { display:block; opacity:0; pointer-events:none; transition:opacity .2s ease; }
  body.sidebar-open #sidebar-overlay { opacity:1; pointer-events:all; }

  .sidebar {
    position:fixed; top:46px; left:0; bottom:0; z-index:50;
    transform:translateX(-100%); transition:transform .22s cubic-bezier(.4,0,.2,1);
    box-shadow:4px 0 24px rgba(0,0,0,.4);
    width:200px !important;
  }
  body.sidebar-open .sidebar { transform:translateX(0); }
  /* Show full sidebar labels on mobile overlay */
  body.sidebar-open .sb-btn > span:not([aria-hidden]) { display:inline; }
  body.sidebar-open .sb-section { display:block; }
  body.sidebar-open .sb-sep { display:block; }
  body.sidebar-open .sb-btn { justify-content:flex-start; padding:6px 8px; gap:7px; }
  body.sidebar-open .theme-trigger .theme-label,
  body.sidebar-open .theme-trigger .theme-caret { display:inline; }
}
@media (max-width:580px) {
  .sidebar { width:42px; }
  .sb-btn > span:not(.fi) { display:none; }
  .sb-section, .sb-sep { display:none; }
  .sb-btn { justify-content:center; padding:8px; gap:0; }
  .theme-trigger .theme-label, .theme-trigger .theme-caret { display:none; }
  .url-bar { display:none; }
  .hdr-btn > span { display:none; }
  .ed-meta kbd, .ed-meta .ed-meta-r > :last-child { display:none; }
}