@cs4alhaider/screenbook 0.1.0

package/shell/shell.css

@@ -0,0 +1,952 @@
+/* ScreenBook shell — studio chrome. Project themes never touch this;
+   the shell has its own neutral skin driven by [data-shell="light|dark"]. */
+
+:root {
+  --sb-bg: #F1EFEB;
+  --sb-panel: #FAF9F7;
+  --sb-panel-2: #FFFFFF;
+  --sb-ink: #211E1A;
+  --sb-ink-2: #6F6A61;
+  --sb-ink-3: #9B958A;
+  --sb-line: #E3DFD7;
+  --sb-line-2: #D6D1C6;
+  --sb-accent: #5B5BD6;
+  --sb-accent-soft: #ECECFB;
+  --sb-accent-ink: #FFFFFF;
+  --sb-danger: #D6455B;
+  --sb-ok: #22A06B;
+  --sb-warn: #B47D12;
+  --sb-hover: rgba(30, 25, 18, 0.05);
+  --sb-active: rgba(30, 25, 18, 0.08);
+  --sb-shadow: 0 18px 60px rgba(30, 24, 14, 0.16);
+  --sb-shadow-soft: 0 4px 18px rgba(30, 24, 14, 0.08);
+  --sb-dots: rgba(30, 25, 18, 0.055);
+  --sb-radius: 12px;
+  --sb-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --sb-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
+  --sb-topbar-h: 52px;
+}
+
+html[data-shell="dark"] {
+  --sb-bg: #161519;
+  --sb-panel: #1D1C21;
+  --sb-panel-2: #26252B;
+  --sb-ink: #EDEBF3;
+  --sb-ink-2: #A7A3B0;
+  --sb-ink-3: #726E7C;
+  --sb-line: #2E2D34;
+  --sb-line-2: #3A3941;
+  --sb-accent: #8484F0;
+  --sb-accent-soft: #2A2A45;
+  --sb-accent-ink: #FFFFFF;
+  --sb-hover: rgba(237, 235, 243, 0.06);
+  --sb-active: rgba(237, 235, 243, 0.1);
+  --sb-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
+  --sb-shadow-soft: 0 4px 18px rgba(0, 0, 0, 0.35);
+  --sb-dots: rgba(237, 235, 243, 0.05);
+}
+
+* { box-sizing: border-box; }
+[hidden] { display: none !important; }
+html, body { height: 100%; }
+body {
+  margin: 0;
+  font-family: var(--sb-font);
+  font-size: 13px;
+  color: var(--sb-ink);
+  background: var(--sb-bg);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  -webkit-font-smoothing: antialiased;
+}
+button { font-family: inherit; color: inherit; }
+input { font-family: inherit; }
+
+body.solo .topbar,
+body.solo .sidebar,
+body.solo .review-panel,
+body.solo .flowbar { display: none !important; }
+body.solo .canvas { padding: 0; }
+
+/* ---------------------------------------------------------------- topbar */
+
+.topbar {
+  height: var(--sb-topbar-h);
+  flex: 0 0 var(--sb-topbar-h);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 0 14px;
+  background: var(--sb-panel);
+  border-bottom: 1px solid var(--sb-line);
+  z-index: 40;
+}
+
+.brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.brand-mark {
+  width: 26px; height: 26px;
+  display: grid; place-items: center;
+  background: var(--sb-accent);
+  color: var(--sb-accent-ink);
+  border-radius: 8px;
+  font-size: 14px;
+  flex: 0 0 auto;
+}
+.brand-name { font-weight: 700; letter-spacing: -0.1px; }
+.brand-sep { color: var(--sb-ink-3); }
+.brand-project {
+  color: var(--sb-ink-2);
+  font-weight: 600;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+
+.topbar-controls { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
+.tb-divider { width: 1px; height: 22px; background: var(--sb-line); margin: 0 4px; flex: 0 0 auto; }
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 30px;
+  padding: 0 10px;
+  border: 1px solid var(--sb-line);
+  border-radius: 9px;
+  background: var(--sb-panel-2);
+  cursor: pointer;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--sb-ink);
+  white-space: nowrap;
+  user-select: none;
+  transition: background .12s ease, border-color .12s ease;
+}
+.chip:hover { background: var(--sb-hover); }
+.chip .chip-icon { font-size: 13px; line-height: 1; }
+.chip .chip-caret { color: var(--sb-ink-3); font-size: 9px; margin-left: 1px; }
+.chip .chip-value { color: var(--sb-ink-2); font-weight: 600; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
+.chip.icon-only { padding: 0 8px; }
+.chip.is-on {
+  background: var(--sb-accent-soft);
+  border-color: var(--sb-accent);
+  color: var(--sb-accent);
+}
+.chip.is-danger.is-on { background: rgba(214, 69, 91, .1); border-color: var(--sb-danger); color: var(--sb-danger); }
+
+/* dropdown menus */
+.dropdown { position: relative; }
+.menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  inset-inline-end: 0;
+  min-width: 230px;
+  max-width: 330px;
+  max-height: min(60vh, 480px);
+  overflow: auto;
+  background: var(--sb-panel-2);
+  border: 1px solid var(--sb-line);
+  border-radius: 12px;
+  box-shadow: var(--sb-shadow);
+  padding: 5px;
+  z-index: 80;
+}
+.menu-head {
+  padding: 7px 10px 5px;
+  font-size: 10.5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: .8px;
+  color: var(--sb-ink-3);
+}
+.menu-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 9px;
+  width: 100%;
+  padding: 8px 10px;
+  border: 0;
+  border-radius: 8px;
+  background: none;
+  cursor: pointer;
+  text-align: start;
+}
+.menu-item:hover { background: var(--sb-hover); }
+.menu-item .mi-icon { font-size: 15px; line-height: 1.25; flex: 0 0 18px; text-align: center; }
+.menu-item .mi-body { flex: 1; min-width: 0; }
+.menu-item .mi-title { font-size: 12.5px; font-weight: 600; }
+.menu-item .mi-desc { font-size: 11.5px; color: var(--sb-ink-2); margin-top: 1px; line-height: 1.35; }
+.menu-item .mi-check { color: var(--sb-accent); font-weight: 700; visibility: hidden; padding-top: 1px; }
+.menu-item.is-checked .mi-check { visibility: visible; }
+.menu-item.is-checked .mi-title { color: var(--sb-accent); }
+.menu-empty { padding: 14px 12px; color: var(--sb-ink-3); font-size: 12px; }
+
+/* ---------------------------------------------------------------- layout */
+
+.workspace { flex: 1; display: flex; min-height: 0; }
+
+/* ---------------------------------------------------------------- sidebar */
+
+.sidebar {
+  width: 292px;
+  flex: 0 0 292px;
+  display: flex;
+  flex-direction: column;
+  background: var(--sb-panel);
+  border-inline-end: 1px solid var(--sb-line);
+  min-height: 0;
+}
+
+.sidebar-feature { padding: 14px 14px 6px; }
+.sf-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; letter-spacing: -0.2px; }
+.sf-title .sf-icon { font-size: 17px; }
+.sf-desc { margin-top: 3px; font-size: 12px; line-height: 1.45; color: var(--sb-ink-2); }
+
+.sidebar-search { padding: 8px 12px 10px; }
+.sidebar-search input {
+  width: 100%;
+  height: 30px;
+  padding: 0 10px;
+  border: 1px solid var(--sb-line);
+  border-radius: 9px;
+  background: var(--sb-panel-2);
+  color: var(--sb-ink);
+  font-size: 12.5px;
+  outline: none;
+}
+.sidebar-search input:focus { border-color: var(--sb-accent); }
+.sidebar-search input::placeholder { color: var(--sb-ink-3); }
+
+.screen-list { flex: 1; overflow-y: auto; padding: 2px 8px 12px; min-height: 0; }
+
+.group-head {
+  padding: 12px 8px 4px;
+  font-size: 10.5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: .8px;
+  color: var(--sb-ink-3);
+}
+
+.screen-row {
+  display: block;
+  width: 100%;
+  text-align: start;
+  padding: 9px 10px;
+  border: 0;
+  border-radius: 10px;
+  background: none;
+  cursor: pointer;
+  margin-bottom: 2px;
+}
+.screen-row:hover { background: var(--sb-hover); }
+.screen-row.is-active { background: var(--sb-accent-soft); }
+.screen-row.is-active .sr-title { color: var(--sb-accent); }
+.sr-title { font-size: 13px; font-weight: 650; letter-spacing: -0.1px; }
+.sr-desc {
+  margin-top: 2px;
+  font-size: 11.5px;
+  line-height: 1.4;
+  color: var(--sb-ink-2);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.sr-meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
+.sr-date { font-size: 10.5px; color: var(--sb-ink-3); font-variant-numeric: tabular-nums; }
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  height: 16px;
+  padding: 0 7px;
+  border-radius: 999px;
+  font-size: 9.5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: .5px;
+  background: var(--sb-hover);
+  color: var(--sb-ink-2);
+}
+.pill.st-draft { background: rgba(180, 125, 18, .14); color: var(--sb-warn); }
+.pill.st-wip { background: rgba(91, 91, 214, .12); color: var(--sb-accent); }
+.pill.st-ready { background: rgba(34, 160, 107, .13); color: var(--sb-ok); }
+.pill.st-review { background: rgba(214, 69, 91, .11); color: var(--sb-danger); }
+.pill.pill-device { background: none; border: 1px solid var(--sb-line-2); }
+
+.list-empty { padding: 26px 14px; text-align: center; color: var(--sb-ink-3); font-size: 12px; line-height: 1.6; }
+
+.sidebar-foot {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 14px;
+  border-top: 1px solid var(--sb-line);
+}
+.serve-badge { font-size: 11px; font-weight: 600; color: var(--sb-ink-3); }
+.serve-badge.is-live { color: var(--sb-ok); }
+.foot-link { font-size: 11px; font-weight: 600; color: var(--sb-ink-3); text-decoration: none; }
+.foot-link:hover { color: var(--sb-accent); }
+
+/* ---------------------------------------------------------------- canvas */
+
+.canvas {
+  flex: 1;
+  min-width: 0;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: 26px;
+  background:
+    radial-gradient(var(--sb-dots) 1px, transparent 1px) 0 0 / 22px 22px,
+    var(--sb-bg);
+}
+
+.stage {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  place-items: center;
+  position: relative;
+}
+
+.stage-empty {
+  max-width: 420px;
+  text-align: center;
+  color: var(--sb-ink-2);
+  font-size: 13px;
+  line-height: 1.7;
+}
+.stage-empty h2 { color: var(--sb-ink); font-size: 17px; letter-spacing: -0.2px; margin: 0 0 8px; }
+.stage-empty code {
+  font-family: var(--sb-mono);
+  font-size: 11.5px;
+  background: var(--sb-panel);
+  border: 1px solid var(--sb-line);
+  padding: 2px 6px;
+  border-radius: 6px;
+}
+
+/* frame scaling wrapper: JS sets --frame-scale */
+.frame-fit { display: grid; place-items: center; }
+.frame-outer { transform: scale(var(--frame-scale, 1)); transform-origin: center center; }
+
+/* screen-switch transition (disabled by config or prefers-reduced-motion) */
+.frame-outer.is-entering { animation: sb-enter 0.18s ease; }
+@keyframes sb-enter {
+  from { opacity: 0.35; transform: scale(var(--frame-scale, 1)) translateY(5px); }
+  to { opacity: 1; transform: scale(var(--frame-scale, 1)) translateY(0); }
+}
+
+/* device-variant chips above the frame */
+.variant-chips {
+  position: absolute;
+  top: 2px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 4px;
+  padding: 3px;
+  background: var(--sb-panel-2);
+  border: 1px solid var(--sb-line);
+  border-radius: 999px;
+  box-shadow: var(--sb-shadow-soft);
+  z-index: 20;
+}
+.variant-chip {
+  border: 0;
+  background: none;
+  border-radius: 999px;
+  padding: 4px 12px;
+  font-size: 11.5px;
+  font-weight: 650;
+  color: var(--sb-ink-2);
+  cursor: pointer;
+}
+.variant-chip:hover { background: var(--sb-hover); }
+.variant-chip.is-on {
+  background: var(--sb-accent);
+  color: var(--sb-accent-ink);
+}
+
+/* ------------------------------------------------ device frames */
+
+.device { position: relative; box-shadow: var(--sb-shadow); }
+.device iframe {
+  border: 0;
+  display: block;
+  background: #fff;
+  width: 100%;
+  height: 100%;
+}
+
+/* iOS */
+.device.dev-ios {
+  width: 393px; height: 852px;
+  border-radius: 55px;
+  padding: 10px;
+  background: #0B0B0E;
+  outline: 2px solid rgba(255, 255, 255, 0.06);
+}
+.device.dev-ios .dev-viewport {
+  position: relative;
+  width: 373px; height: 832px;
+  border-radius: 45px;
+  overflow: hidden;
+  background: #fff;
+}
+.dev-island {
+  position: absolute;
+  top: 11px; left: 50%;
+  transform: translateX(-50%);
+  width: 118px; height: 34px;
+  background: #000;
+  border-radius: 20px;
+  z-index: 12;
+}
+.dev-statusbar {
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 30px 0;
+  z-index: 11;
+  pointer-events: none;
+  font: 600 14.5px/1 var(--sb-font);
+  color: #000;
+}
+.dev-statusbar .sb-icons { display: flex; align-items: center; gap: 5px; font-size: 12px; letter-spacing: -1px; }
+.device[data-screen-mode="dark"] .dev-statusbar { color: #fff; }
+.device[data-statusbar="light"] .dev-statusbar { color: #fff !important; }
+.device[data-statusbar="dark"] .dev-statusbar { color: #000 !important; }
+.dev-homebar {
+  position: absolute;
+  bottom: 8px; left: 50%;
+  transform: translateX(-50%);
+  width: 134px; height: 5px;
+  border-radius: 3px;
+  background: #000;
+  opacity: .9;
+  z-index: 12;
+}
+.device[data-screen-mode="dark"] .dev-homebar { background: #fff; }
+.device[data-statusbar="light"] .dev-homebar { background: #fff !important; }
+.device[data-statusbar="dark"] .dev-homebar { background: #000 !important; }
+
+/* Android */
+.device.dev-android {
+  width: 412px; height: 915px;
+  border-radius: 32px;
+  padding: 8px;
+  background: #101013;
+  outline: 2px solid rgba(255, 255, 255, 0.06);
+}
+.device.dev-android .dev-viewport {
+  position: relative;
+  width: 396px; height: 899px;
+  border-radius: 24px;
+  overflow: hidden;
+  background: #fff;
+}
+.dev-punch {
+  position: absolute;
+  top: 12px; left: 50%;
+  transform: translateX(-50%);
+  width: 13px; height: 13px;
+  border-radius: 50%;
+  background: #000;
+  outline: 2px solid rgba(255, 255, 255, .08);
+  z-index: 12;
+}
+.dev-statusbar-android {
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 22px 0;
+  z-index: 11;
+  pointer-events: none;
+  font: 500 13px/1 Roboto, var(--sb-font);
+  color: #000;
+}
+.dev-statusbar-android .sb-icons { display: flex; gap: 4px; font-size: 11.5px; }
+.device[data-screen-mode="dark"] .dev-statusbar-android { color: #fff; }
+.device[data-statusbar="light"] .dev-statusbar-android { color: #fff !important; }
+.device[data-statusbar="dark"] .dev-statusbar-android { color: #000 !important; }
+.dev-gesturebar {
+  position: absolute;
+  bottom: 7px; left: 50%;
+  transform: translateX(-50%);
+  width: 108px; height: 4px;
+  border-radius: 2px;
+  background: #000;
+  opacity: .75;
+  z-index: 12;
+}
+.device[data-screen-mode="dark"] .dev-gesturebar { background: #fff; }
+
+/* Web browser */
+.device.dev-web {
+  width: 1280px;
+  border-radius: 12px;
+  background: var(--sb-panel-2);
+  border: 1px solid var(--sb-line-2);
+  overflow: hidden;
+}
+.dev-browserbar {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 0 14px;
+  background: var(--sb-panel);
+  border-bottom: 1px solid var(--sb-line);
+}
+.dev-browserbar .bb-dots { display: flex; gap: 6px; }
+.dev-browserbar .bb-dots i {
+  width: 11px; height: 11px;
+  border-radius: 50%;
+  display: block;
+}
+.bb-dots i:nth-child(1) { background: #F26D60; }
+.bb-dots i:nth-child(2) { background: #F2BE4B; }
+.bb-dots i:nth-child(3) { background: #5FC454; }
+.dev-browserbar .bb-url {
+  flex: 0 1 460px;
+  margin: 0 auto;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border-radius: 7px;
+  background: var(--sb-hover);
+  color: var(--sb-ink-2);
+  font-size: 11.5px;
+  font-family: var(--sb-mono);
+  white-space: nowrap; overflow: hidden;
+}
+.device.dev-web .dev-viewport { position: relative; width: 1280px; height: 760px; background: #fff; }
+
+/* Bare */
+.device.dev-none {
+  border-radius: 14px;
+  border: 1px solid var(--sb-line-2);
+  overflow: hidden;
+  background: #fff;
+}
+.device.dev-none .dev-viewport { position: relative; width: 900px; height: 640px; }
+
+/* app mode: the app draws its own status/home chrome — engine shows bezel only */
+.device[data-chrome="self"] .dev-statusbar,
+.device[data-chrome="self"] .dev-statusbar-android,
+.device[data-chrome="self"] .dev-homebar,
+.device[data-chrome="self"] .dev-gesturebar,
+.device[data-chrome="self"] .dev-island,
+.device[data-chrome="self"] .dev-browserbar,
+.device[data-chrome="self"] .dev-punch { display: none; }
+.device.dev-web[data-chrome="self"] .dev-viewport { height: 800px; }
+
+/* screen loading veil */
+.dev-viewport .load-veil {
+  position: absolute; inset: 0;
+  display: grid; place-items: center;
+  background: var(--sb-panel);
+  color: var(--sb-ink-3);
+  font-size: 12px;
+  z-index: 10;
+  opacity: 1;
+  transition: opacity .18s ease;
+  pointer-events: none;
+}
+.dev-viewport .load-veil.is-hidden {
+  opacity: 0;
+  visibility: hidden;   /* drop out of the a11y tree once faded */
+  transition: opacity .18s ease, visibility 0s linear .2s;
+}
+
+/* ---------------------------------------------------------------- flowbar */
+
+.flowbar {
+  position: absolute;
+  left: 50%;
+  bottom: 20px;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  max-width: min(720px, calc(100% - 40px));
+  padding: 10px 12px;
+  background: var(--sb-panel-2);
+  border: 1px solid var(--sb-line);
+  border-radius: 14px;
+  box-shadow: var(--sb-shadow);
+  z-index: 30;
+}
+.flowbar .fb-nav {
+  width: 30px; height: 30px;
+  display: grid; place-items: center;
+  border: 1px solid var(--sb-line);
+  border-radius: 9px;
+  background: var(--sb-panel);
+  cursor: pointer;
+  font-size: 13px;
+  flex: 0 0 auto;
+}
+.flowbar .fb-nav:hover:not(:disabled) { background: var(--sb-hover); }
+.flowbar .fb-nav:disabled { opacity: .35; cursor: default; }
+.flowbar .fb-body { min-width: 0; }
+.flowbar .fb-title { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.flowbar .fb-title .fb-count { color: var(--sb-ink-3); font-weight: 600; margin-inline-start: 6px; font-variant-numeric: tabular-nums; }
+.flowbar .fb-note { font-size: 12px; color: var(--sb-ink-2); line-height: 1.45; margin-top: 1px; }
+.flowbar .fb-close {
+  border: 0; background: none;
+  color: var(--sb-ink-3);
+  cursor: pointer;
+  font-size: 14px;
+  flex: 0 0 auto;
+  padding: 4px 6px;
+}
+.flowbar .fb-close:hover { color: var(--sb-danger); }
+
+/* ---------------------------------------------------------------- review */
+
+.review-panel {
+  width: 320px;
+  flex: 0 0 320px;
+  display: flex;
+  flex-direction: column;
+  background: var(--sb-panel);
+  border-inline-start: 1px solid var(--sb-line);
+  min-height: 0;
+}
+.rp-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 13px 14px 9px;
+}
+.rp-head h3 { margin: 0; font-size: 13.5px; letter-spacing: -0.1px; }
+.rp-head .rp-count { color: var(--sb-ink-3); font-weight: 600; margin-inline-start: 6px; }
+.rp-tools { display: flex; gap: 6px; }
+.rp-tool {
+  border: 1px solid var(--sb-line);
+  background: var(--sb-panel-2);
+  border-radius: 7px;
+  height: 24px;
+  padding: 0 8px;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  color: var(--sb-ink-2);
+}
+.rp-tool:hover { background: var(--sb-hover); }
+
+.rp-reviewer { padding: 0 14px 8px; }
+.rp-reviewer input {
+  width: 100%;
+  height: 27px;
+  border: 1px solid var(--sb-line);
+  border-radius: 8px;
+  background: var(--sb-panel-2);
+  color: var(--sb-ink);
+  padding: 0 9px;
+  font-size: 12px;
+  outline: none;
+}
+.rp-reviewer input:focus { border-color: var(--sb-accent); }
+
+.rp-hint {
+  margin: 0 14px 8px;
+  padding: 8px 10px;
+  border-radius: 9px;
+  background: var(--sb-accent-soft);
+  color: var(--sb-accent);
+  font-size: 11.5px;
+  line-height: 1.5;
+  font-weight: 550;
+}
+
+.rp-list { flex: 1; overflow-y: auto; padding: 2px 10px 12px; min-height: 0; }
+.rp-item {
+  border: 1px solid var(--sb-line);
+  border-radius: 11px;
+  background: var(--sb-panel-2);
+  padding: 9px 11px;
+  margin-bottom: 8px;
+  cursor: pointer;
+}
+.rp-item:hover { border-color: var(--sb-line-2); }
+.rp-item.is-focus { border-color: var(--sb-accent); }
+.rp-item.is-resolved { opacity: .62; }
+.rp-item .ri-top { display: flex; align-items: center; gap: 7px; }
+.rp-item .ri-n {
+  width: 18px; height: 18px;
+  border-radius: 50%;
+  background: var(--sb-danger);
+  color: #fff;
+  display: grid; place-items: center;
+  font-size: 10px; font-weight: 700;
+  flex: 0 0 auto;
+}
+.rp-item.is-resolved .ri-n { background: var(--sb-ok); }
+.rp-item .ri-note { font-size: 12.5px; line-height: 1.45; font-weight: 550; }
+.rp-item .ri-ctx {
+  margin-top: 6px;
+  font-size: 10.5px;
+  color: var(--sb-ink-3);
+  font-family: var(--sb-mono);
+  line-height: 1.5;
+  word-break: break-all;
+}
+.rp-item .ri-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
+.rp-item .ri-actions { display: flex; gap: 6px; margin-top: 7px; }
+
+.rp-composer {
+  border-top: 1px solid var(--sb-line);
+  padding: 10px 12px 12px;
+}
+.rp-composer textarea {
+  width: 100%;
+  min-height: 56px;
+  resize: vertical;
+  border: 1px solid var(--sb-line);
+  border-radius: 9px;
+  background: var(--sb-panel-2);
+  color: var(--sb-ink);
+  font: inherit;
+  font-size: 12.5px;
+  padding: 8px 9px;
+  outline: none;
+}
+.rp-composer textarea:focus { border-color: var(--sb-accent); }
+.rp-composer .rc-row { display: flex; justify-content: space-between; align-items: center; margin-top: 7px; gap: 8px; }
+.rp-composer .rc-ctx { font-size: 10.5px; color: var(--sb-ink-3); font-family: var(--sb-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.btn-primary {
+  border: 0;
+  background: var(--sb-accent);
+  color: var(--sb-accent-ink);
+  border-radius: 8px;
+  height: 27px;
+  padding: 0 12px;
+  font-size: 12px;
+  font-weight: 700;
+  cursor: pointer;
+}
+.btn-primary:hover { filter: brightness(1.06); }
+.btn-ghost {
+  border: 1px solid var(--sb-line);
+  background: none;
+  border-radius: 8px;
+  height: 27px;
+  padding: 0 10px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--sb-ink-2);
+  cursor: pointer;
+}
+.btn-ghost:hover { background: var(--sb-hover); }
+
+/* ---------------------------------------------------------------- theme lab */
+
+.theme-panel {
+  width: 320px;
+  flex: 0 0 320px;
+  display: flex;
+  flex-direction: column;
+  background: var(--sb-panel);
+  border-inline-start: 1px solid var(--sb-line);
+  min-height: 0;
+}
+.tl-themes { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
+.tl-theme-chip {
+  border: 1px solid var(--sb-line);
+  background: var(--sb-panel-2);
+  border-radius: 999px;
+  padding: 5px 12px;
+  font-size: 12px;
+  font-weight: 650;
+  color: var(--sb-ink-2);
+  cursor: pointer;
+}
+.tl-theme-chip.is-on {
+  background: var(--sb-accent-soft);
+  border-color: var(--sb-accent);
+  color: var(--sb-accent);
+}
+.tl-strip {
+  display: flex;
+  gap: 6px;
+  padding: 2px 14px 10px;
+}
+.tl-strip span {
+  flex: 1;
+  height: 26px;
+  border-radius: 7px;
+  border: 1px solid var(--sb-line);
+}
+.tl-rows { flex: 1; overflow-y: auto; padding: 4px 12px 14px; min-height: 0; }
+.tl-row {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 4px 2px;
+}
+.tl-row label {
+  flex: 0 0 108px;
+  font-size: 11px;
+  font-weight: 650;
+  font-family: var(--sb-mono);
+  color: var(--sb-ink-2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tl-row input[type="color"] {
+  flex: 0 0 30px;
+  width: 30px; height: 26px;
+  padding: 1px;
+  border: 1px solid var(--sb-line);
+  border-radius: 7px;
+  background: var(--sb-panel-2);
+  cursor: pointer;
+}
+.tl-row .tl-mini {
+  flex: 0 0 30px;
+  height: 26px;
+  border-radius: 7px;
+  border: 1px solid var(--sb-line);
+}
+.tl-row input[type="text"] {
+  flex: 1;
+  min-width: 0;
+  height: 26px;
+  border: 1px solid var(--sb-line);
+  border-radius: 7px;
+  background: var(--sb-panel-2);
+  color: var(--sb-ink);
+  font-family: var(--sb-mono);
+  font-size: 11px;
+  padding: 0 8px;
+  outline: none;
+}
+.tl-row input[type="text"]:focus { border-color: var(--sb-accent); }
+
+/* ---------------------------------------------------------------- toasts */
+
+.shell-toasts {
+  position: fixed;
+  left: 50%;
+  bottom: 22px;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  z-index: 300;
+  pointer-events: none;
+}
+.shell-toast {
+  padding: 9px 16px;
+  border-radius: 999px;
+  background: var(--sb-ink);
+  color: var(--sb-bg);
+  font-size: 12.5px;
+  font-weight: 600;
+  box-shadow: var(--sb-shadow);
+  opacity: 0;
+  transform: translateY(8px);
+  transition: all .2s ease;
+}
+.shell-toast.is-in { opacity: 1; transform: translateY(0); }
+
+/* ---------------------------------------------------------------- selftest */
+
+.selftest-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 400;
+  background: color-mix(in srgb, var(--sb-bg) 88%, transparent);
+  backdrop-filter: blur(6px);
+  display: grid;
+  place-items: center;
+  padding: 30px;
+}
+.st-card {
+  width: min(760px, 100%);
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--sb-panel-2);
+  border: 1px solid var(--sb-line);
+  border-radius: 16px;
+  box-shadow: var(--sb-shadow);
+  overflow: hidden;
+}
+.st-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px 18px 12px;
+}
+.st-head h2 { margin: 0; font-size: 16px; letter-spacing: -0.2px; }
+.st-summary { font-size: 12.5px; font-weight: 700; }
+.st-summary.is-pass { color: var(--sb-ok); }
+.st-summary.is-fail { color: var(--sb-danger); }
+.st-progress {
+  height: 4px;
+  margin: 0 18px;
+  border-radius: 2px;
+  background: var(--sb-hover);
+  overflow: hidden;
+}
+.st-progress i {
+  display: block;
+  height: 100%;
+  width: 0;
+  background: var(--sb-accent);
+  border-radius: 2px;
+  transition: width .15s ease;
+}
+.st-rows { flex: 1; overflow-y: auto; padding: 10px 12px 14px; min-height: 120px; }
+.st-row {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 5px 8px;
+  border-radius: 7px;
+  font-size: 12px;
+}
+.st-row .st-ico { flex: 0 0 auto; }
+.st-row.is-pass .st-ico { color: var(--sb-ok); }
+.st-row.is-fail { background: rgba(214, 69, 91, .07); }
+.st-row.is-fail .st-ico { color: var(--sb-danger); }
+.st-row .st-name { font-weight: 600; }
+.st-row .st-combo { color: var(--sb-ink-3); font-family: var(--sb-mono); font-size: 10.5px; }
+.st-row .st-err { color: var(--sb-danger); font-size: 11px; margin-inline-start: auto; max-width: 45%; text-align: end; }
+.st-foot {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 18px 14px;
+  border-top: 1px solid var(--sb-line);
+}
+.st-foot .st-note { font-size: 11.5px; color: var(--sb-ink-3); }
+
+/* ---------------------------------------------------------------- misc */
+
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-thumb { background: var(--sb-line-2); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
+::-webkit-scrollbar-track { background: transparent; }
+
+@media (max-width: 900px) {
+  .sidebar { width: 240px; flex-basis: 240px; }
+  .review-panel { width: 270px; flex-basis: 270px; }
+}