waybetter 0.1.0 → 0.6.0

package/dist/shell/panel/panel.css

@@ -0,0 +1,401 @@
+/* wayBetter panel. Night Ink + Geist; narrow split pane first, side rail from 720px.
+   One grammar for every setting: section header, a card of rows, label left, control right. */
+.btp {
+  /* Follows the active theme like the shell chrome (`--wb-p-*` / `--wb-f-*`, src/shell/themeStore.ts). */
+  --c-ground: var(--wb-p-ground, #07080c); --c-chrome: var(--wb-p-chrome, #0b0d13); --c-card: var(--wb-p-card, #0d1017); --c-field: var(--wb-p-field, #131722); --c-raise: var(--wb-p-raise, #1a1f2d);
+  --c-line: var(--wb-p-line, #20263a); --c-line-soft: var(--wb-p-line-soft, #171b28); --c-line-strong: var(--wb-p-line-strong, #2d3550);
+  --c-text: var(--wb-p-text, #eef0f7); --c-text-2: var(--wb-p-text-2, #c9cfe3); --c-muted: var(--wb-p-muted, #8e95ab); --c-faint: var(--wb-p-faint, #5f667c);
+  --c-accent: var(--wb-p-accent, #7b9cff); --c-accent-ink: var(--wb-p-accent-ink, #0a0f22); --c-accent-rgb: var(--wb-p-accent-rgb, 123 156 255); --c-accent-soft: rgb(var(--c-accent-rgb) / .16);
+  --c-text-rgb: var(--wb-p-text-rgb, 238 240 247); --c-popover: var(--wb-p-popover, #10131c); --c-thumb: var(--wb-p-thumb, linear-gradient(180deg, #252b3d, #1c2130)); --c-track: var(--wb-p-track, #1c2130); --c-knob: var(--wb-p-knob, #aeb4c7);
+  color-scheme: var(--wb-c-scheme, dark);
+  --c-danger: #ff5c6c; --c-ok: #3ddc97; --c-warn: #f6c453;
+  --c-brush: linear-gradient(90deg, #4f6bff, #22d3ee 55%, #a855f7);
+  --f-ui: var(--wb-f-chrome, 'Geist Variable', 'Segoe UI', system-ui, sans-serif); --f-mono: var(--wb-f-mono, 'Geist Mono Variable', ui-monospace, Consolas, monospace);
+  --ease: cubic-bezier(.2, .7, .2, 1);
+  position: relative; height: 100%; display: grid; grid-template-rows: auto auto 1fr; overflow: hidden;
+  background: var(--c-ground); color: var(--c-text); font: 400 13px/1.45 var(--f-ui); letter-spacing: -.003em;
+  -webkit-font-smoothing: antialiased; font-feature-settings: 'ss01', 'cv11';
+}
+.btp-root { position: absolute; inset: 0; container-type: inline-size; container-name: panel; }
+.btp *, .btp *::before, .btp *::after { box-sizing: border-box; }
+.btp button { font: inherit; color: inherit; }
+.btp code { padding: 1px 5px; border-radius: 5px; background: var(--c-field); border: 1px solid var(--c-line-soft); font: 11.5px var(--f-mono); color: var(--c-text-2); }
+.btp mark { background: var(--c-accent-soft); color: var(--c-text); border-radius: 3px; box-shadow: 0 0 0 1px rgb(var(--c-accent-rgb) / .35); }
+.btp :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
+.btp :is(.bt-search, .bt-inputrow) input:focus-visible, .btp .bt-hex:focus-visible, .btp .bt-code textarea:focus-visible, .btp .btp-input:focus-visible, .btp .bt-input:focus-visible { outline: none; }
+
+/* Header: brand + settings search */
+.btp-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
+.btp-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--c-brush); opacity: .38; }
+.btp-brand { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
+.btp-brand img { border-radius: 6px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
+.btp-brand strong { font-size: 13.5px; font-weight: 650; letter-spacing: -.015em; }
+.btp-head .bt-search { margin-inline-start: auto; width: min(320px, 100%); }
+
+/* Section nav: a scrolling strip in a narrow pane, a rail in a wide one */
+.btp-nav { display: flex; gap: 2px; padding: 8px 10px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--c-line-soft); background: var(--c-chrome); }
+.btp-nav::-webkit-scrollbar { display: none; }
+.btp-nav button { position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--c-muted); font-weight: 520; cursor: pointer; transition: color .15s, background-color .15s; }
+.btp-nav button svg { flex: none; opacity: .8; }
+.btp-nav button:hover { color: var(--c-text); background: var(--c-field); }
+.btp-nav button.is-on { color: var(--c-text); background: var(--c-raise); }
+.btp-nav button.is-on svg { color: var(--c-accent); opacity: 1; }
+
+.btp-body { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--c-line) transparent; }
+.btp-page { max-width: 860px; padding: 18px 16px 64px; }
+.btp-title { margin: 2px 0 14px; font-size: 20px; font-weight: 650; letter-spacing: -.025em; }
+.btp-title-sub { color: var(--c-muted); font-weight: 450; }
+
+@container panel (min-width: 720px) {
+  .btp { grid-template-columns: 196px 1fr; grid-template-rows: auto 1fr; }
+  .btp-head { grid-column: 1 / -1; padding: 12px 20px; }
+  .btp-nav { flex-direction: column; gap: 1px; padding: 14px 10px; border-bottom: 0; border-inline-end: 1px solid var(--c-line-soft); overflow: visible; }
+  .btp-nav button { height: auto; min-height: 32px; padding: 6px 10px; text-align: start; line-height: 1.25; }
+  .btp-nav button.is-on::before { content: ''; position: absolute; inset-inline-start: -10px; top: 8px; bottom: 8px; width: 2px; border-start-start-radius: 0; border-start-end-radius: 2px; border-end-end-radius: 2px; border-end-start-radius: 0; background: var(--c-accent); }
+  .btp-page { padding: 26px 32px 72px; }
+  .btp-title { font-size: 22px; margin-bottom: 18px; }
+}
+
+/* Sections and rows */
+.bt-section { margin-bottom: 22px; }
+.bt-section-head { display: flex; align-items: flex-end; gap: 12px; margin: 0 2px 8px; }
+.bt-section-head > div:first-child { flex: 1; min-width: 0; }
+.bt-section-head h2 { margin: 0; font-size: 13px; font-weight: 620; letter-spacing: -.005em; }
+.bt-section-head p { margin: 2px 0 0; color: var(--c-muted); font-size: 12px; line-height: 1.45; max-width: 62ch; }
+.bt-section-action { flex: 0 0 auto; }
+.bt-card { border: 1px solid var(--c-line-soft); border-radius: 12px; background: var(--c-card); box-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset; }
+.bt-card:empty { display: none; }
+.bt-card > .bt-gallery, .bt-card > .bt-import { padding: 12px; }
+
+.bt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 20px; padding: 12px 16px; min-height: 52px; }
+.bt-row + .bt-row, .bt-card > * + .bt-row { border-top: 1px solid var(--c-line-soft); }
+.bt-row.is-wide { grid-template-columns: minmax(0, 1fr); }
+.bt-row-copy { min-width: 0; }
+.bt-row-label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; font-weight: 540; }
+.bt-row-hint { margin-top: 2px; color: var(--c-muted); font-size: 12px; line-height: 1.45; max-width: 58ch; }
+.bt-row-control { display: flex; justify-content: flex-end; min-width: 0; }
+.bt-row.is-wide .bt-row-control { justify-content: flex-start; }
+
+@container panel (max-width: 460px) {
+  .bt-row { grid-template-columns: minmax(0, 1fr); }
+  .bt-row-control { justify-content: flex-start; }
+  .bt-row:has(> .bt-row-control > .bt-toggle) { grid-template-columns: minmax(0, 1fr) auto; }
+  .bt-section-head { flex-wrap: wrap; align-items: flex-start; }
+}
+
+.bt-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.bt-stack { display: flex; flex-direction: column; gap: 10px; width: 100%; }
+.bt-badge { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; background: var(--c-field); border: 1px solid var(--c-line-soft); color: var(--c-muted); font: 500 10.5px/1 var(--f-mono); letter-spacing: 0; }
+.bt-badge.is-accent { color: var(--c-accent); border-color: rgb(var(--c-accent-rgb) / .3); background: var(--c-accent-soft); }
+.bt-status { color: var(--c-muted); font: 11.5px var(--f-mono); }
+.bt-status.is-warn { color: var(--c-warn); }
+.bt-alert { margin: 12px; padding: 10px 12px; border: 1px solid rgba(255, 92, 108, .35); border-radius: 10px; background: rgba(255, 92, 108, .08); font-size: 12px; }
+
+/* Buttons */
+.bt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 13px; border: 1px solid var(--c-line); border-radius: 9px; background: var(--c-field); color: var(--c-text); font-weight: 540; white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s, transform .1s; }
+.bt-btn.is-sm { height: 28px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; }
+.bt-btn:hover:not(:disabled) { border-color: var(--c-line-strong); background: var(--c-raise); }
+.bt-btn:active:not(:disabled) { transform: translateY(.5px); }
+.bt-btn:disabled { opacity: .42; cursor: default; }
+.bt-btn.is-primary { background: var(--c-text); border-color: var(--c-text); color: var(--c-ground); }
+.bt-btn.is-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--c-text) 88%, var(--c-ground)); border-color: transparent; }
+.bt-btn.is-ghost { background: transparent; border-color: transparent; color: var(--c-muted); }
+.bt-btn.is-ghost:hover:not(:disabled) { background: var(--c-field); color: var(--c-text); border-color: transparent; }
+.bt-btn.is-danger { background: var(--c-danger); border-color: var(--c-danger); color: #fff; }
+
+/* Toggle */
+.bt-toggle { position: relative; flex: 0 0 auto; width: 36px; height: 21px; padding: 0; border: 1px solid var(--c-line-strong); border-radius: 999px; background: var(--c-track); cursor: pointer; transition: background-color .18s var(--ease), border-color .18s; }
+.bt-toggle-knob { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--c-knob); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); transition: transform .2s var(--ease), background-color .18s; }
+.bt-toggle.is-on { background: var(--c-accent); border-color: var(--c-accent); }
+.bt-toggle.is-on .bt-toggle-knob { transform: translateX(15px); background: #fff; }
+.bt-toggle:disabled { opacity: .45; cursor: default; }
+
+/* Segmented */
+.bt-seg { position: relative; display: inline-flex; flex-wrap: nowrap; max-width: 100%; padding: 3px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-ground); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); isolation: isolate; }
+.bt-seg-thumb { position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; border-radius: 7px; background: var(--c-thumb); box-shadow: 0 0 0 1px var(--c-line-strong), 0 2px 6px rgba(0, 0, 0, .35); transition: transform .22s var(--ease), width .22s var(--ease), opacity .15s; }
+.bt-seg button { position: relative; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--c-muted); font-weight: 520; white-space: nowrap; cursor: pointer; transition: color .15s; }
+.bt-seg.is-sm button { padding: 0 10px; font-size: 12.5px; }
+.bt-seg button:hover { color: var(--c-text); }
+.bt-seg button.is-on { color: var(--c-text); }
+.bt-seg button:focus-visible { outline-offset: -1px; }
+
+/* Select */
+.bt-select { position: relative; min-width: 150px; }
+.bt-select-button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: 32px; padding-block: 0; padding-inline: 11px 10px; border: 1px solid var(--c-line); border-radius: 9px; background: var(--c-field); text-align: start; cursor: pointer; transition: border-color .15s; }
+.bt-select-button:hover, .bt-select.is-open .bt-select-button { border-color: var(--c-line-strong); }
+.bt-select-button svg { flex: 0 0 auto; color: var(--c-muted); transition: transform .18s var(--ease); }
+.bt-select.is-open .bt-select-button svg { transform: rotate(180deg); }
+.bt-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.bt-select-list { position: absolute; z-index: 30; top: calc(100% + 6px); inset-inline-end: 0; min-width: 100%; width: max-content; max-width: 300px; max-height: 300px; margin: 0; padding: 5px; overflow-y: auto; list-style: none; border: 1px solid var(--c-line-strong); border-radius: 11px; background: var(--c-popover); box-shadow: 0 18px 50px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .4); animation: bt-pop .14s var(--ease); scrollbar-width: thin; }
+.bt-select-list li { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 32px; padding-block: 5px; padding-inline: 9px 28px; border-radius: 7px; cursor: pointer; }
+.bt-select-list li.bt-select-group { min-height: 0; margin-top: 4px; padding-block: 7px 3px; color: var(--c-muted); font-size: 11px; font-weight: 600; cursor: default; pointer-events: none; }
+.bt-select-list li.bt-select-group:first-child { margin-top: 0; }
+.bt-select-list li.is-active { background: var(--c-raise); }
+.bt-select-list li.is-on .bt-select-opt { color: var(--c-text); font-weight: 560; }
+.bt-select-list li small { color: var(--c-muted); font-size: 11px; }
+.bt-select-opt { font-size: 13.5px; }
+.bt-select-check { position: absolute; inset-inline-end: 9px; top: 50%; margin-top: -7px; color: var(--c-accent); }
+@keyframes bt-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
+
+/* Slider */
+.bt-slider { display: flex; align-items: center; gap: 12px; width: min(260px, 100%); }
+.bt-slider input { --pct: 50%; flex: 1; min-width: 0; height: 20px; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
+.bt-slider input::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--c-accent) var(--pct), var(--c-line) var(--pct)); }
+.bt-slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgb(var(--c-accent-rgb) / .22), 0 1px 3px rgba(0, 0, 0, .5); transition: box-shadow .15s; }
+.bt-slider input:hover::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgb(var(--c-accent-rgb) / .25), 0 1px 3px rgba(0, 0, 0, .5); }
+.bt-slider input::-moz-range-track { height: 4px; border-radius: 4px; background: var(--c-line); }
+.bt-slider input::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--c-accent); }
+.bt-slider input::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; }
+.bt-slider output { flex: 0 0 auto; min-width: 54px; padding: 3px 6px; border: 1px solid var(--c-line-soft); border-radius: 6px; background: var(--c-chrome); color: var(--c-text); font: 500 11.5px var(--f-mono); text-align: center; }
+
+/* Color */
+.bt-color { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
+.bt-swatch { position: relative; flex: 0 0 auto; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: var(--sw, transparent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); cursor: pointer; transition: transform .15s var(--ease), box-shadow .15s; }
+.bt-swatch:hover { transform: scale(1.08); }
+.bt-swatch.is-on { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 2px var(--c-card), 0 0 0 4px var(--c-text); }
+.bt-swatch.is-auto { width: auto; height: 26px; padding: 0 11px; border-radius: 999px; background: var(--c-field); box-shadow: inset 0 0 0 1px var(--c-line); color: var(--c-muted); font-size: 12px; font-weight: 540; }
+.bt-swatch.is-auto.is-on { color: var(--c-text); box-shadow: inset 0 0 0 1px var(--c-line-strong), 0 0 0 2px var(--c-card), 0 0 0 4px var(--c-text); }
+.bt-swatch.is-picker { display: inline-grid; place-items: center; overflow: hidden; background: conic-gradient(from 90deg, #ff5f6d, #ffd400, #3ddc97, #1d9bf0, #7856ff, #f91880, #ff5f6d); }
+.bt-swatch.is-picker.is-on { background: var(--sw); }
+.bt-swatch.is-picker input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
+.bt-hex { width: 84px; height: 28px; margin-inline-start: 2px; padding: 0 8px; border: 1px solid var(--c-line); border-radius: 7px; background: var(--c-field); color: var(--c-text); font: 12px var(--f-mono); outline: none; }
+.bt-hex:focus { border-color: var(--c-accent); }
+
+/* Inputs */
+.bt-input, .btp-input { width: 100%; height: 32px; padding: 0 11px; border: 1px solid var(--c-line); border-radius: 9px; background: var(--c-field); color: var(--c-text); font: inherit; outline: none; transition: border-color .15s, box-shadow .15s; }
+.bt-input.is-mono { font-family: var(--f-mono); font-size: 12px; }
+.bt-input:focus, .btp-input:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); }
+.bt-inputrow { display: flex; width: min(420px, 100%); border: 1px solid var(--c-line); border-radius: 9px; background: var(--c-field); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
+.bt-inputrow:focus-within { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); }
+.bt-inputrow input { flex: 1; min-width: 0; height: 32px; padding: 0 11px; border: 0; background: transparent; color: var(--c-text); font: inherit; outline: none; }
+.bt-inputrow input.is-mono { font: 12px var(--f-mono); }
+.bt-inputrow button { flex: 0 0 auto; padding: 0 14px; border: 0; border-inline-start: 1px solid var(--c-line); background: var(--c-raise); font-weight: 560; cursor: pointer; }
+.bt-inputrow button:hover:not(:disabled) { background: var(--c-raise); }
+.bt-inputrow button:disabled { color: var(--c-faint); cursor: default; }
+
+.bt-search { position: relative; display: flex; align-items: center; height: 30px; padding-block: 0; padding-inline: 10px 8px; gap: 7px; border: 1px solid var(--c-line); border-radius: 9px; background: var(--c-field); color: var(--c-muted); transition: border-color .15s, box-shadow .15s; }
+.bt-search:focus-within { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); color: var(--c-text); }
+.bt-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--c-text); font: inherit; outline: none; }
+.bt-search input::-webkit-search-cancel-button { display: none; }
+.bt-search input::placeholder { color: var(--c-faint); }
+.bt-search button { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px; background: var(--c-raise); color: var(--c-muted); line-height: 1; cursor: pointer; }
+
+/* Chips */
+.bt-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
+.bt-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; max-width: 100%; padding-block: 0; padding-inline: 10px 4px; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-field); font-size: 12.5px; animation: bt-pop .16s var(--ease); }
+.bt-chip > svg { flex: 0 0 auto; color: var(--c-muted); }
+.bt-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.bt-chip button { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--c-muted); cursor: pointer; }
+.bt-chip button:hover { background: rgba(255, 92, 108, .16); color: var(--c-danger); }
+.bt-chips-empty { margin: 0; color: var(--c-faint); font-size: 12px; }
+
+.bt-stepper { display: inline-flex; align-items: center; height: 30px; border: 1px solid var(--c-line); border-radius: 9px; background: var(--c-field); overflow: hidden; }
+.bt-stepper button { width: 30px; height: 100%; border: 0; background: transparent; color: var(--c-muted); font-size: 15px; cursor: pointer; }
+.bt-stepper button:hover:not(:disabled) { background: var(--c-raise); color: var(--c-text); }
+.bt-stepper button:disabled { opacity: .35; cursor: default; }
+.bt-stepper output { min-width: 42px; text-align: center; font: 500 12.5px var(--f-mono); }
+.bt-stepper output small { margin-inline-start: 2px; color: var(--c-muted); }
+
+/* Empty state */
+.bt-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 20px 28px; text-align: center; }
+.bt-empty-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 6px; border: 1px solid var(--c-line); border-radius: 13px; background: linear-gradient(180deg, var(--c-raise), var(--c-field)); color: var(--c-muted); }
+.bt-empty strong { font-size: 13.5px; font-weight: 600; }
+.bt-empty p { max-width: 44ch; margin: 0; color: var(--c-muted); font-size: 12.5px; line-height: 1.5; }
+.bt-empty-action { margin-top: 10px; }
+.bt-snippet { margin: 8px 0 2px; padding: 10px 14px; border: 1px solid var(--c-line-soft); border-radius: 9px; background: var(--c-ground); color: var(--c-text-2); font: 11.5px/1.6 var(--f-mono); text-align: start; white-space: pre; overflow-x: auto; max-width: 100%; }
+
+/* Code editor (Custom CSS, theme JSON) */
+.bt-code { display: flex; flex-direction: column; }
+.bt-code textarea { width: 100%; min-height: 200px; padding: 14px 16px; border: 0; border-radius: 12px 12px 0 0; background: transparent; color: var(--c-text-2); font: 12px/1.65 var(--f-mono); resize: vertical; outline: none; tab-size: 2; }
+.bt-code.is-compact textarea { min-height: 110px; border: 1px solid var(--c-line); border-bottom: 0; background: var(--c-chrome); }
+.bt-code-bar { display: flex; align-items: center; gap: 8px; padding-block: 8px; padding-inline: 16px 10px; border-top: 1px solid var(--c-line-soft); }
+.bt-code.is-compact .bt-code-bar { border: 1px solid var(--c-line); border-radius: 0 0 10px 10px; background: var(--c-chrome); }
+.bt-code-bar small { margin-inline-end: auto; color: var(--c-faint); font-size: 11.5px; }
+.bt-code-bar small.is-error { color: var(--c-danger); font-family: var(--f-ui); font-size: 12px; }
+
+/* Theme gallery */
+.bt-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
+.bt-theme { position: relative; }
+.bt-theme-hit { display: flex; flex-direction: column; width: 100%; padding: 0; overflow: hidden; border: 1px solid var(--c-line); border-radius: 13px; background: var(--c-chrome); text-align: start; cursor: pointer; transition: border-color .18s, box-shadow .18s, transform .18s var(--ease); }
+.bt-theme-hit:hover { border-color: var(--c-line-strong); transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
+.bt-theme.is-on .bt-theme-hit { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent), 0 12px 36px rgba(59, 90, 200, .22); }
+.bt-theme-hit .tp { border-bottom: 1px solid var(--c-line-soft); }
+.bt-theme-info { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px 12px; }
+.bt-theme-title { display: flex; align-items: center; gap: 8px; }
+.bt-theme-title strong { font-size: 13.5px; font-weight: 620; letter-spacing: -.01em; }
+.bt-theme-check { display: grid; place-items: center; width: 18px; height: 18px; margin-inline-start: auto; border-radius: 50%; background: var(--c-accent); color: var(--c-accent-ink); }
+.bt-theme-info small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--c-muted); font-size: 12px; line-height: 1.4; }
+.bt-theme-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
+.bt-theme-tags em { padding: 1px 6px; border-radius: 5px; background: var(--c-field); color: var(--c-muted); font: normal 500 10.5px/16px var(--f-mono); }
+.bt-theme-tags em.is-accent { color: var(--c-accent); background: var(--c-accent-soft); }
+.bt-theme-remove { position: absolute; top: 8px; inset-inline-end: 8px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; background: rgba(7, 8, 12, .72); color: #fff; backdrop-filter: blur(6px); opacity: 0; cursor: pointer; transition: opacity .15s; }
+.bt-theme:hover .bt-theme-remove, .bt-theme-remove:focus-visible { opacity: 1; }
+.bt-theme-remove:hover { background: var(--c-danger); border-color: var(--c-danger); }
+
+.bt-import { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; border-bottom: 1px solid var(--c-line-soft); }
+.bt-import-drop { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px dashed var(--c-line-strong); border-radius: 11px; background: repeating-linear-gradient(135deg, rgba(123, 156, 255, .03) 0 8px, transparent 8px 16px); }
+.bt-import-drop strong { font-size: 13px; font-weight: 600; }
+.bt-import-drop p { margin: 0 0 6px; color: var(--c-muted); font-size: 12px; line-height: 1.5; }
+@container panel (min-width: 620px) { .bt-import { grid-template-columns: 1fr 1fr; } }
+
+/* Theme preview: a scaled X mock built from the theme document */
+.tp { position: relative; width: 100%; overflow: hidden; }
+.tp-stage { position: absolute; top: 0; left: 0; display: flex; justify-content: center; gap: 0; transform-origin: 0 0; color: var(--tp-text); font-family: var(--tp-ui); font-weight: var(--tp-weight); letter-spacing: var(--tp-track); overflow: hidden; }
+.tp-stage b, .tp-stage strong { font-weight: var(--tp-bold); }
+.tp-nav { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; width: 206px; padding: 10px 12px 0 14px; }
+.tp-logo { display: grid; place-items: center; width: 50px; height: 50px; }
+.tp-nav-item { display: flex; align-items: center; gap: 18px; height: 50px; padding: 0 14px; border-radius: var(--tp-pill); }
+.tp-nav-item.is-on { font-weight: var(--tp-bold); }
+.tp-post-btn { display: grid; place-items: center; height: 50px; margin: 14px 12px 0 0; border-radius: var(--tp-pill); background: var(--tp-inverse); color: var(--tp-on-inverse); font-weight: var(--tp-bold); }
+.tp-col { flex: 0 0 auto; height: 100%; background: var(--tp-bg); border-left: 1px solid var(--tp-border); border-right: 1px solid var(--tp-border); overflow: hidden; } /* rtl-ok: symmetric borders (theme preview mock of X) */
+.tp-col-head { background: color-mix(in srgb, var(--tp-bg) 88%, transparent); border-bottom: 1px solid var(--tp-border); }
+.tp-col-head > strong { display: block; padding: 14px 16px 0; }
+.tp-tabs { display: flex; margin-top: 10px; }
+.tp-tabs span { flex: 1; padding: 12px 0 14px; color: var(--tp-muted); text-align: center; font-weight: 500; }
+.tp-tabs span.is-on { position: relative; color: var(--tp-text); font-weight: var(--tp-bold); }
+.tp-tabs span.is-on::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 56px; height: 4px; margin-left: -28px; border-radius: 4px; background: var(--tp-accent); } /* rtl-ok: centred with left: 50% */
+.tp-feed.is-cards { padding: 6px 0; }
+.tp-post { display: flex; gap: 12px; padding: var(--tp-pad) 16px; border-bottom: 1px solid var(--tp-border); }
+.tp-feed.is-cards .tp-post { margin: calc(var(--tp-pad) / 2 + 2px) 12px; border: 1px solid var(--tp-border); border-radius: var(--tp-r); background: var(--tp-surface); }
+.tp-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--tp-avatar); background: var(--tp-elevated); }
+.tp-avatar.is-sm { background: linear-gradient(135deg, #1d9bf0, #7856ff); }
+.tp-post-body { flex: 1; min-width: 0; }
+.tp-post-meta { display: flex; gap: 5px; white-space: nowrap; overflow: hidden; }
+.tp-post-meta span { color: var(--tp-muted); }
+.tp-post p { margin: 2px 0 0; font-family: var(--tp-body); }
+.tp-media { height: 112px; margin-top: 10px; border: 1px solid var(--tp-border); border-radius: var(--tp-r); background: linear-gradient(135deg, color-mix(in srgb, var(--tp-accent) 70%, #000), color-mix(in srgb, var(--tp-accent) 25%, var(--tp-bg))); overflow: hidden; }
+.tp-media span { display: block; width: 45%; height: 100%; margin-left: auto; background: radial-gradient(circle at 60% 40%, rgba(255, 255, 255, .35), transparent 60%); } /* rtl-ok: theme preview mock of X, which is LTR */
+.tp-actions { display: flex; justify-content: space-between; max-width: 420px; margin-top: 10px; color: var(--tp-muted); }
+.tp-actions span { display: inline-flex; align-items: center; gap: 5px; }
+.tp-actions span.is-hot { color: #f91880; }
+.tp-side { flex: 0 0 auto; padding: 8px 0 0 22px; }
+.tp-searchbox { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px; border: 1px solid var(--tp-border); border-radius: var(--tp-pill); color: var(--tp-muted); background: var(--tp-bg); }
+.tp-module { margin-top: 14px; padding: 12px 16px 6px; border: 1px solid var(--tp-border); border-radius: var(--tp-r); background: var(--tp-bg); }
+.tp-module > strong { display: block; margin-bottom: 6px; }
+.tp-trend { display: flex; flex-direction: column; padding: 7px 0; }
+.tp-trend small { color: var(--tp-muted); }
+.tp-follow { display: flex; align-items: center; gap: 10px; padding: 8px 0 10px; }
+.tp-follow > div { display: flex; flex: 1; flex-direction: column; min-width: 0; }
+.tp-follow small { color: var(--tp-muted); }
+.tp-follow-btn { padding: 7px 16px; border-radius: var(--tp-pill); background: var(--tp-inverse); color: var(--tp-on-inverse); font-weight: var(--tp-bold); }
+.tp-crt { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, .45)); }
+
+/* Search mode: sections without a matching row disappear */
+.btp.is-searching .bt-section:not(:has(.bt-row)) { display: none; }
+.btp-results .bt-section:first-child { margin-top: 0; }
+
+/* Toast */
+.btp-toast { position: absolute; left: 50%; bottom: 18px; z-index: 40; max-width: min(520px, calc(100% - 32px)); padding: 10px 14px; border: 1px solid var(--c-line-strong); border-radius: 11px; background: #141824; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); font-size: 12.5px; cursor: pointer; transform: translateX(-50%); animation: bt-toast .22s var(--ease); }
+.btp-toast.is-error { border-color: rgba(255, 92, 108, .55); background: color-mix(in srgb, var(--c-danger) 12%, var(--c-card)); }
+@keyframes bt-toast { from { opacity: 0; transform: translate(-50%, 8px); } }
+
+@media (prefers-reduced-motion: reduce) { .btp *, .btp *::before, .btp *::after { transition: none !important; animation: none !important; } }
+
+/* ---------------------------------------------------------------------------------------------
+   Lists and editors shared with Drafts, Accounts and Updates (btp-* grammar). */
+.btp-group { padding: 0 0 6px; margin-bottom: 18px; }
+.btp-group-head { margin: 0 2px 10px; }
+.btp-group-head h2 { margin: 0; font-size: 13px; font-weight: 620; }
+.btp-group-head p { margin: 2px 0 0; color: var(--c-muted); font-size: 12px; }
+.btp-muted { color: var(--c-muted); font-size: 12px; margin-inline-end: auto; }
+.btp-btn { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-field); cursor: pointer; font-weight: 540; white-space: nowrap; transition: border-color .15s, background-color .15s; }
+.btp-btn:hover:not(:disabled) { border-color: var(--c-line-strong); background: var(--c-raise); }
+.btp-btn:disabled { opacity: .42; cursor: default; }
+.btp-btn.is-primary { background: var(--c-text); border-color: var(--c-text); color: var(--c-ground); }
+.btp-btn.is-danger { background: var(--c-danger); border-color: var(--c-danger); color: #fff; }
+.btp-link { border: 0; background: none; padding: 6px 0; color: var(--c-accent); cursor: pointer; font-weight: 540; }
+.btp-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
+.btp-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; padding: 10px 12px; border: 1px solid rgba(255, 92, 108, .35); border-radius: 10px; background: rgba(255, 92, 108, .08); font-size: 12px; }
+.btp-alert .btp-btn { margin-inline-start: auto; }
+.btp-toolbar { display: flex; gap: 8px; }
+.btp-seg { display: inline-flex; gap: 2px; margin: 12px 0 8px; padding: 3px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-chrome); }
+.btp-seg button { height: 26px; padding: 0 11px; border: 0; border-radius: 7px; background: none; color: var(--c-muted); cursor: pointer; font-weight: 520; }
+.btp-seg button.is-on { background: var(--c-raise); color: var(--c-text); box-shadow: 0 0 0 1px var(--c-line-strong); }
+.btp-seg span { margin-inline-start: 5px; font: 11px var(--f-mono); opacity: .7; }
+.btp-list { display: flex; flex-direction: column; gap: 6px; }
+.btp-list-head { margin: 16px 2px 4px; color: var(--c-muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
+.btp-list-head span { font-family: var(--f-mono); }
+.btp-empty { margin: 0; padding: 26px 16px; border: 1px dashed var(--c-line); border-radius: 12px; color: var(--c-muted); font-size: 12.5px; text-align: center; }
+.btp-item { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 11px 13px; border: 1px solid var(--c-line-soft); border-radius: 11px; background: var(--c-card); text-align: start; cursor: pointer; transition: border-color .15s, background-color .15s; }
+.btp-item:hover { border-color: var(--c-line); background: var(--c-field); }
+.btp-item.is-on { border-color: var(--c-accent); }
+.btp-item-top { display: flex; align-items: baseline; gap: 8px; }
+.btp-item-top strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
+.btp-item-top small { flex: 0 0 auto; color: var(--c-muted); font: 11px var(--f-mono); }
+.btp-item-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--c-muted); font-size: 12px; white-space: pre-wrap; }
+.btp-item-meta { display: flex; gap: 6px; margin-top: 3px; }
+.btp-item-meta em { padding: 0 6px; border-radius: 5px; background: var(--c-field); color: var(--c-muted); font: normal 10.5px/17px var(--f-mono); }
+.btp-item-meta em.is-warn { color: var(--c-warn); }
+.btp-draft { padding-top: 2px; }
+.btp-draft-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
+.btp-save { font: 11px var(--f-mono); color: var(--c-muted); }
+.btp-save.is-saved { color: var(--c-ok); }
+.btp-save.is-error, .btp-save.is-conflict { color: var(--c-danger); }
+.btp-draft-title { margin-bottom: 8px; font-weight: 600; }
+.btp-draft-text { height: auto; min-height: 200px; padding: 12px; resize: vertical; line-height: 1.55; }
+.btp-diff pre { margin: 6px 0 0; padding: 8px 10px; max-height: 180px; overflow: auto; border: 1px solid var(--c-line-soft); border-radius: 9px; background: var(--c-card); font: 11.5px/1.5 var(--f-mono); white-space: pre-wrap; }
+.btp-diff pre span { display: block; }
+.btp-diff .is-del { background: rgba(255, 92, 108, .14); }
+.btp-diff .is-add { background: rgba(61, 220, 151, .14); }
+.btp-account { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--c-line-soft); border-radius: 11px; background: var(--c-card); }
+.btp-account.is-on { border-color: var(--c-line-strong); }
+.btp-account .btp-input { flex: 1; }
+.btp-dot { flex: 0 0 auto; width: 14px; height: 14px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 3px var(--c-card), 0 0 0 4px var(--c-line); }
+.btp-account-name { display: flex; flex: 1; min-width: 0; flex-direction: column; border: 0; background: none; text-align: start; cursor: pointer; }
+.btp-account-name strong { font-weight: 600; }
+.btp-account-name small { color: var(--c-muted); font-size: 11.5px; }
+.btp-account.is-on .btp-account-name small { color: var(--c-accent); }
+.btp-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--c-line-soft); border-radius: 12px; background: var(--c-card); }
+.btp-card > div { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
+.btp-card small { color: var(--c-muted); font-size: 12px; }
+.btp-notes { margin: 6px 0 0; color: var(--c-muted); font-size: 12px; white-space: pre-wrap; }
+
+/* Home: the wayBetter hero, highlights and About */
+.btp-hero { position: relative; overflow: hidden; isolation: isolate; padding: 30px 24px 26px; border: 1px solid var(--c-line); border-radius: 18px; background: radial-gradient(120% 90% at 0% 0%, rgba(79, 107, 255, .16), transparent 60%), radial-gradient(90% 80% at 100% 10%, rgba(168, 85, 247, .14), transparent 60%), var(--c-card); }
+.btp-hero::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--c-brush); opacity: .9; }
+.btp-hero-glow { position: absolute; z-index: -1; inset-inline-end: -60px; bottom: -90px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(34, 211, 238, .16), transparent 70%); filter: blur(8px); }
+.btp-hero-mark { display: inline-grid; place-items: center; width: 76px; height: 76px; margin-bottom: 18px; border-radius: 20px; background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 40px -12px rgba(79, 107, 255, .55); }
+.btp-hero-mark img { border-radius: 14px; }
+.btp-hero-kicker { margin: 0 0 6px; color: var(--c-muted); font-size: 12.5px; font-weight: 560; letter-spacing: .01em; }
+.btp-hero-name { background: var(--c-brush); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 720; }
+.btp-hero-title { margin: 0; font-size: clamp(24px, 6cqi, 34px); line-height: 1.08; font-weight: 700; letter-spacing: -.035em; }
+.btp-hero-title em { font-style: normal; background: var(--c-brush); -webkit-background-clip: text; background-clip: text; color: transparent; }
+.btp-hero-lede { max-width: 54ch; margin: 12px 0 0; color: var(--c-muted); font-size: 13.5px; line-height: 1.55; }
+.btp-hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
+.btp-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border: 1px solid var(--c-line-strong); border-radius: 999px; background: rgba(255, 255, 255, .03); color: var(--c-text); font-size: 11.5px; font-weight: 560; font-variant-numeric: tabular-nums; }
+.btp-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
+.btp-hero-actions .btp-btn { height: 34px; padding: 0 16px; border-radius: 10px; }
+
+.btp-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin: 12px 0 26px; }
+.btp-highlight { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; row-gap: 3px; align-items: center; padding: 13px 14px; border: 1px solid var(--c-line-soft); border-radius: 12px; background: var(--c-card); color: var(--c-text); text-align: start; cursor: pointer; transition: border-color .15s, background-color .15s, transform .15s; }
+.btp-highlight:hover { border-color: var(--c-line-strong); background: var(--c-field); transform: translateY(-1px); }
+.btp-highlight svg { color: var(--c-accent); }
+.btp-highlight strong { font-size: 13px; font-weight: 640; }
+.btp-highlight span { grid-column: 1 / -1; color: var(--c-muted); font-size: 12px; line-height: 1.45; }
+
+.btp-about .btp-group-head p { max-width: 64ch; line-height: 1.55; font-size: 12.5px; margin-top: 4px; }
+.btp-layers { display: grid; gap: 1px; margin: 12px 0 0; padding: 0; list-style: none; border: 1px solid var(--c-line-soft); border-radius: 12px; overflow: hidden; background: var(--c-line-soft); }
+.btp-layers li { display: flex; gap: 14px; align-items: baseline; padding: 13px 16px; background: var(--c-card); }
+.btp-layers li div { display: grid; gap: 2px; }
+.btp-layers strong { font-size: 13px; font-weight: 640; }
+.btp-layers li div span { color: var(--c-muted); font-size: 12px; line-height: 1.45; }
+.btp-layer-n { flex: 0 0 auto; background: var(--c-brush); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 12px; font-weight: 720; font-variant-numeric: tabular-nums; }
+.btp-about-foot { display: flex; align-items: center; gap: 6px; margin: 14px 2px 0; color: var(--c-faint); font-size: 12px; }
+.btp-about-foot b { color: var(--c-muted); font-weight: 600; }
+.btp-about-foot .btp-link { padding: 0; font-size: 12px; }
+
+@container panel (min-width: 720px) {
+  .btp-hero { padding: 40px 36px 34px; }
+}
+@media (prefers-reduced-motion: reduce) { .btp-highlight { transition: none; } .btp-highlight:hover { transform: none; } }
+/* Icon pack install screen (Appearance > Icons > Import icon pack) */
+.wb-pack-facts { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 4px 0; font-size: 12px; }
+.wb-pack-facts dt { color: var(--c-text-2, inherit); opacity: .75; }
+.wb-pack-facts dd { margin: 0; overflow-wrap: anywhere; }
+.wb-pack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); gap: 6px; padding: 8px 0; }
+.wb-pack-grid span { display: grid; place-items: center; height: 32px; border-radius: 8px; background: rgba(127, 127, 127, .08); }
+.wb-pack-grid .bt-glyph { width: 20px; height: 20px; }
+.wb-pack-warning { color: var(--c-warn, #d9a441); font-size: 12px; }
+.wb-pack-list { flex-wrap: wrap; margin-top: 6px; }
+.wb-pack-row { display: flex; flex-direction: column; gap: 8px; width: 100%; }
+.wb-pack-review { width: 100%; max-width: 560px; box-sizing: border-box; }