codebee 0.1.69 → 0.1.70

package/app/ui/style.css

@@ -575,6 +575,75 @@ body.side-collapsed #sidebar { border-right: none; padding-left: 0; padding-righ
 #page-settings { max-width: none; }
 .subpage { display: flex; flex-direction: column; gap: 20px; }
 
+/* ---------------- 内置浏览器工作区 ---------------- */
+.browser-shell {
+  display: flex; flex-direction: column; min-height: min(760px, calc(100vh - 140px));
+  border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
+  background: var(--panel); box-shadow: var(--shadow);
+}
+.browser-head { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 7px 12px 0; background: var(--sidebar); border-bottom: 1px solid var(--border); }
+.browser-tabs { display: flex; align-items: flex-end; gap: 4px; min-width: 0; flex: 1; overflow-x: auto; }
+.browser-tab { display: inline-flex; align-items: center; gap: 7px; min-width: 160px; max-width: 240px; padding: 9px 12px; border: 1px solid transparent; border-bottom: 0; border-radius: 9px 9px 0 0; background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: 12.5px; }
+.browser-tab span:not(.browser-tab-close) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.browser-tab.active { color: var(--text); background: var(--panel); border-color: var(--border); }
+.browser-tab:hover { color: var(--text); background: var(--panel2); }
+.browser-tab .ico { width: 14px; height: 14px; flex: none; }
+.browser-tab-close { margin-left: auto; color: var(--muted); font-size: 16px; line-height: 1; opacity: .7; }
+.browser-tab-close:hover { color: var(--bad); opacity: 1; }
+.browser-tab-add { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0 0 4px 2px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
+.browser-tab-add:hover { color: var(--text); background: var(--panel2); }
+.browser-status { display: inline-flex; align-items: center; gap: 7px; flex: none; color: var(--muted); font-size: 11px; white-space: nowrap; }
+.browser-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 14%, transparent); }
+.browser-toolbar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: var(--panel); border-bottom: 1px solid var(--border); }
+.browser-toolbar .icon-btn { width: 30px; height: 30px; flex: none; }
+.browser-address-wrap { display: flex; align-items: center; min-width: 0; flex: 1; height: 34px; padding: 0 4px 0 11px; border: 1px solid var(--border-strong); border-radius: 9px; background: var(--panel2); }
+.browser-address-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent); }
+.browser-lock { width: 14px; height: 14px; flex: none; color: var(--ok); }
+.browser-address-wrap input { min-width: 0; flex: 1; height: 100%; padding: 0 9px; border: 0; outline: 0; background: transparent; color: var(--text); font: 12.5px var(--mono); }
+.browser-go { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
+.browser-go:hover { background: var(--panel); color: var(--accent); }
+.browser-external { flex: none; }
+.browser-shortcuts { display: flex; align-items: center; gap: 7px; padding: 9px 12px; overflow-x: auto; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--panel2) 58%, transparent); }
+.browser-shortcut { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel); color: var(--muted); cursor: pointer; font: inherit; font-size: 11.5px; white-space: nowrap; }
+.browser-shortcut:hover { color: var(--text); border-color: var(--border-strong); background: var(--panel2); }
+.shortcut-mark { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; color: #fff; font: 700 10px/1 var(--font-ui); }
+.shortcut-mark.google { background: #4285f4; }.shortcut-mark.github { background: #24292f; }.shortcut-mark.mdn { background: #83d130; font-size: 8px; }.shortcut-mark.preview { background: var(--accent); }
+.browser-stage { position: relative; display: flex; flex: 1; min-height: 420px; background: var(--bg); }
+.browser-frame { display: block; width: 100%; height: 100%; min-height: 420px; flex: 1; border: 0; background: #fff; }
+.browser-frame-error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  min-height: 360px;
+  padding: 32px 22px;
+  color: var(--muted);
+  background: var(--bg);
+  text-align: center;
+}
+.browser-frame-error-mark {
+  display: grid;
+  place-items: center;
+  width: 48px;
+  height: 48px;
+  border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--border));
+  border-radius: 14px;
+  color: var(--warn);
+  background: color-mix(in srgb, var(--warn) 10%, var(--panel));
+}
+.browser-frame-error-mark .ico { width: 22px; height: 22px; }
+.browser-frame-error h2 { margin: 2px 0 0; color: var(--text); font-size: 18px; }
+.browser-frame-error p { max-width: 520px; margin: 0 0 8px; font-size: 12px; line-height: 1.55; }
+.browser-empty { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; width: 100%; padding: 48px 22px; text-align: center; color: var(--muted); background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 38%), var(--bg); }
+.browser-empty-mark { display: grid; place-items: center; width: 66px; height: 66px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: 18px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
+.browser-empty-mark .ico { width: 30px; height: 30px; }
+.browser-empty h2 { margin: 4px 0 0; color: var(--text); font-size: 20px; }
+.browser-empty p { max-width: 480px; margin: 0 0 8px; font-size: 13px; }
+.browser-foot { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 7px 12px; border-top: 1px solid var(--border); color: var(--muted); font-size: 11px; }
+
+
 /* 左栏的「设置」导航（设置模式下替换任务树） */
 .side-main { display: flex; flex-direction: column; flex: 1; min-height: 0; }
 .side-settings { display: none; flex-direction: column; flex: 1; min-height: 0; gap: 2px; overflow-y: auto; overflow-x: hidden; }
@@ -1177,6 +1246,16 @@ body.inspector-open #inspector { display: flex; }
   /* 手机顶栏精简：皮肤入口撤下（皮肤在 设置 → 皮肤），只留明暗图标 */
   #btn-skin { display: none; }
   .page-title { font-size: 14px; }
+  .browser-shell { min-height: calc(100vh - 112px); border-radius: 10px; }
+  .browser-head { padding: 6px 8px 0; }
+  .browser-status { display: none; }
+  .browser-toolbar { padding: 7px; gap: 3px; flex-wrap: wrap; }
+  .browser-toolbar .icon-btn { width: 28px; height: 28px; }
+  .browser-address-wrap { order: 2; flex-basis: 100%; }
+  .browser-external { margin-left: auto; }
+  .browser-stage, .browser-frame { min-height: 360px; }
+  .browser-tab { min-width: 128px; max-width: 180px; padding: 8px 9px; }
+  .browser-foot { font-size: 10px; }
   main { padding: 14px 10px 70px; }
   .panel { padding: 13px; }
   .composer { padding: 16px 14px 13px; }
@@ -3256,6 +3335,148 @@ span.imgcap:hover { border-color: var(--accent); color: var(--accent); }
   100% { offset-distance: 100%; opacity: 0; transform: rotate(-4deg); }
 }
 
+/* ================= CodeBee workbench refresh =================
+ * A quieter Codex-inspired shell: a slim navigation rail, a compact project
+ * browser, and a single centered command surface. Existing page states and
+ * controls keep their original DOM hooks; this layer only changes geometry.
+ */
+:root {
+  --cb-ink: #18212b;
+  --cb-muted: #71808e;
+  --cb-line: #e2e7eb;
+  --cb-surface: #ffffff;
+  --cb-canvas: #f7f8fa;
+  --cb-rail: #eef1f3;
+  --cb-orange: var(--accent);
+  --cb-orange-soft: color-mix(in srgb, var(--accent) 10%, transparent);
+}
+
+html[data-theme="light"][data-skin="ocean"] {
+  --bg: var(--cb-canvas);
+  --sidebar: #f0f2f4;
+  --panel: var(--cb-surface);
+  --panel2: #f4f6f8;
+  --border: var(--cb-line);
+  --border-strong: #cfd7de;
+  --text: var(--cb-ink);
+  --muted: var(--cb-muted);
+  --accent: var(--cb-orange);
+  --accent2: #d95420;
+  --shadow: 0 16px 44px rgba(31, 43, 54, .08);
+}
+
+#app { grid-template-columns: 46px 224px minmax(0, 1fr); background: var(--bg); }
+body.side-collapsed #app { grid-template-columns: 46px 0 minmax(0, 1fr); }
+
+.side-rail {
+  display: flex; flex-direction: column; align-items: center; gap: 7px;
+  padding: 12px 7px 10px; background: var(--cb-rail); border-right: 1px solid var(--cb-line);
+}
+.rail-btn {
+  width: 32px; height: 32px; display: grid; place-items: center; padding: 0;
+  border: 0; border-radius: 9px; background: transparent; color: #84909a; cursor: pointer;
+  transition: color .15s ease, background-color .15s ease, transform .15s ease;
+}
+.rail-btn:hover { color: var(--cb-ink); background: rgba(255,255,255,.78); }
+.rail-btn.active { color: var(--cb-orange); background: #fff; box-shadow: 0 2px 8px rgba(37, 45, 52, .08); }
+.rail-btn:active { transform: scale(.94); }
+.rail-btn .ico { width: 17px; height: 17px; }
+.rail-spacer { flex: 1; }
+
+#sidebar { padding: 13px 10px 10px; background: var(--sidebar); border-right: 1px solid var(--cb-line); }
+.brand { min-height: 39px; padding: 4px 8px 12px; gap: 8px; border-bottom: 1px solid var(--cb-line); }
+.brand-bee { display: grid; place-items: center; width: 21px; height: 21px; color: var(--cb-orange); }
+.brand-bee .ico { width: 19px; height: 19px; stroke-width: 1.8; }
+.brand-name { color: var(--cb-ink); font-size: 15px; letter-spacing: .02em; }
+.brand-caret { width: 13px; height: 13px; margin-left: 1px; color: #95a0a9; transform: rotate(90deg); }
+.new-task, .side-search { min-height: 35px; border-radius: 8px; }
+.new-task { margin-top: 10px; color: var(--cb-ink); }
+.new-task:hover, .side-search:hover { background: #e6eaed; }
+.side-search { color: var(--cb-muted); }
+.side-quick { margin: 9px 0 8px; }
+.qitem { min-height: 34px; border-radius: 8px; }
+.qitem.active { color: var(--cb-ink); background: #e6eaed; }
+.side-section.tasks { border-top: 1px solid var(--cb-line); padding-top: 10px; }
+.side-label { color: #89959e; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
+.stask, .sdir summary { border-radius: 7px; }
+.stask:hover, .sdir summary:hover { background: #e6eaed; }
+.stask.active { background: var(--cb-orange-soft); color: var(--cb-ink); }
+.side-usage { border-top: 1px solid var(--cb-line); border-radius: 8px; }
+.side-foot { border-top-color: var(--cb-line); }
+
+#mainwrap { background: var(--cb-canvas); }
+.topbar { min-height: 56px; padding: 10px 22px; background: rgba(247,248,250,.9); border-bottom: 1px solid var(--cb-line); backdrop-filter: blur(16px); }
+.page-title { color: var(--cb-ink); font-size: 14px; font-weight: 650; }
+.top-actions { gap: 6px; }
+.top-actions .pill { background: transparent; border-color: transparent; color: var(--cb-muted); }
+.top-actions .pill:hover { background: #e9edf0; border-color: transparent; color: var(--cb-ink); }
+.top-actions .conn { color: var(--cb-muted); font-size: 11px; }
+main { padding: 24px 34px 72px; }
+
+#sub-tasks { min-height: calc(100vh - 112px); justify-content: center; gap: 12px; }
+.composer { width: min(860px, 100%); max-width: 860px; margin: 0 auto; padding: 14px 0 0; }
+.hero-row { justify-content: center; margin-bottom: 18px; }
+.hero { color: var(--cb-ink); font-size: clamp(24px, 3vw, 31px); font-weight: 500 !important; letter-spacing: -.025em !important; text-align: center; }
+.form { gap: 0; }
+.cmp-box { overflow: visible; border: 1px solid #d9dfe4; border-radius: 18px; background: var(--cb-surface); box-shadow: 0 10px 28px rgba(41, 53, 63, .08); transition: border-color .16s ease, box-shadow .16s ease; }
+.cmp-box:focus-within { border-color: color-mix(in srgb, var(--cb-orange) 50%, #d9dfe4); box-shadow: 0 12px 34px rgba(41, 53, 63, .11), 0 0 0 3px rgba(232,108,45,.09); }
+.cmp-pills { padding: 12px 14px 2px; }
+.cmp-wd { color: var(--cb-muted); }
+.cmp-wd .input-row { gap: 5px; }
+.cmp-wd input { height: 30px; padding: 5px 8px; border: 0; background: transparent; color: var(--cb-muted); font-size: 12px; }
+.cmp-wd input:focus { box-shadow: none; }
+.cmp-wd .ico { width: 14px; height: 14px; }
+.cmp-hint { margin: 0 15px 2px; font-size: 11px; }
+.cmp-context-note { margin: 6px 16px 0; color: #8a969f; font-size: 11px; }
+.cmp-context-note .ico { width: 13px; height: 13px; }
+#f-goal { min-height: 96px; padding: 11px 16px; border: 0; border-radius: 0; background: transparent; color: var(--cb-ink); font-size: 15px; line-height: 1.6; }
+#f-goal::placeholder { color: #a7b0b7; }
+#f-goal:focus { box-shadow: none; }
+.cmp-bar { min-height: 48px; padding: 7px 10px 9px 13px; border-top: 1px solid #edf0f2; }
+.type-pick, .cmp-sel { color: var(--cb-muted); background: #f4f6f7; border-color: #e1e6e9; }
+.type-pick:hover, .cmp-sel:hover { color: var(--cb-ink); background: #edf0f2; }
+.cmp-send { gap: 6px; }
+.cmp-send .primary.round { width: 34px; height: 34px; background: var(--cb-orange); box-shadow: 0 4px 12px rgba(232,108,45,.24); }
+.cmp-send .primary.round:hover { background: #d95b20; }
+.att-strip .ghost { border-color: transparent; color: var(--cb-muted); }
+.att-strip .ghost:hover { background: #f1f3f5; }
+
+main .panel.wide { max-width: 1040px; margin-left: auto; margin-right: auto; }
+.page { max-width: 1120px; }
+.panel { border-radius: 14px; box-shadow: 0 8px 22px rgba(41,53,63,.05); }
+.panel-head { border-bottom-color: var(--cb-line); }
+button.primary { background: var(--cb-orange); box-shadow: 0 3px 10px rgba(232,108,45,.2); }
+button.primary:hover { filter: brightness(.96); }
+
+@media (max-width: 860px) {
+  #app { grid-template-columns: 42px minmax(0, 1fr); }
+  #sidebar { position: fixed; z-index: 30; left: 42px; top: 0; bottom: 0; width: 228px; transform: translateX(0); box-shadow: 16px 0 34px rgba(30,40,50,.12); }
+  body.side-collapsed #app { grid-template-columns: 42px minmax(0, 1fr); }
+  body.side-collapsed #sidebar { transform: translateX(-110%); opacity: 0; }
+  main { padding: 20px 16px 58px; }
+  .topbar { padding: 9px 14px; }
+  .top-actions .pill:nth-child(n+3) { display: none; }
+  #sub-tasks { min-height: calc(100vh - 92px); }
+  .hero { font-size: 24px; }
+}
+
+@media (max-width: 560px) {
+  .side-rail { padding-left: 5px; padding-right: 5px; }
+  .rail-btn { width: 30px; height: 30px; }
+  .page-title-wrap { display: none; }
+  .topbar { justify-content: space-between; }
+  .top-actions { margin-left: auto; }
+  .cmp-box { border-radius: 15px; }
+  .cmp-pills { padding: 9px 11px 0; }
+  #f-goal { min-height: 116px; font-size: 14px; }
+  .cmp-bar { align-items: flex-end; }
+  .cmp-send .cmp-sel { display: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rail-btn, .cmp-box, .primary { transition: none; }
+}
+
 /* 报告里的 md 围栏代码块走 codeBlockHTML（.code-block 行号表格）：
    抵消 .report td 的表格边框/内距，避免代码格画成九宫格 */
 .report .code-block td { border: none; }
@@ -4046,11 +4267,13 @@ body.inspector-open #run-detail #rd-log.rd-logdrawer {
 .chat-result .cr-head { display: flex; align-items: center; gap: 8px; font-weight: 600;
   font-size: 13.5px; color: var(--ok); }
 .chat-result.bad .cr-head { color: var(--bad); }
+.chat-result.partial .cr-head { color: var(--warn); }
 .chat-result.off .cr-head { color: var(--muted); }
 .chat-result .cr-head .ico { width: 16px; height: 16px; flex: none; }
 .chat-result .cr-meta { font-size: 12px; color: var(--muted); margin-top: 5px; }
 .chat-result .cr-err { font-size: 12.5px; color: var(--bad); margin-top: 8px; line-height: 1.5;
   white-space: pre-wrap; overflow-wrap: anywhere; }
+.chat-result.partial .cr-err { color: var(--warn); }
 .chat-result .cr-files { margin-top: 10px; }
 .chat-result .cr-files-title { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
 .chat-result .cr-steps { margin-top: 10px; font-size: 12.5px; }
@@ -5958,6 +6181,13 @@ button.request-busy > * { opacity: .18; }
 .su-spark .ks-line { fill: none; stroke: var(--accent); stroke-width: 1.6;
   stroke-linejoin: round; stroke-linecap: round; }
 .su-spark .ks-area { stroke: none; fill: var(--accent); opacity: .16; }
+/* 实时更新脉冲：token 数字变化时短暂点亮再淡回（app.js 数字变了才挂 .su-live） */
+.side-usage.su-live .su-tok { animation: su-live 1.1s ease-out; }
+@keyframes su-live {
+  0%, 40% { color: var(--accent); }
+  100% { }
+}
+@media (prefers-reduced-motion: reduce) { .side-usage.su-live .su-tok { animation: none; } }
 
 /* 计数徽章：导航项右侧的灰底数字胶囊；0 时整块收起（不留空位） */
 .nav-badge {
@@ -6177,3 +6407,559 @@ table.fp-xls { border-collapse: collapse; font-family: var(--mono); font-size: 1
 .rd-timeout-row label { color: var(--muted); white-space: nowrap; }
 .rd-timeout-row select { flex: 0 0 auto; min-width: 96px; }
 .rd-timeout-row select:disabled { opacity: .55; cursor: not-allowed; }
+
+/* ---------------- 禅道·修复记录归档区（追加于文件尾防并行重排） ---------------- */
+/* 已归档卡：整体降透明度弱化，标题链接维持可点 */
+.zt-archived { opacity: .62; }
+.zt-archived .head .name { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--muted); }
+/* 已归档折叠头：按钮形态（可聚焦），箭头随开合转 90° */
+button.zt-arch-head {
+  display: flex; align-items: center; gap: 6px; margin: 10px 0 4px;
+  padding: 6px 10px; border: 1px dashed var(--border); border-radius: 10px;
+  background: none; color: var(--muted); font-size: 12.5px; cursor: pointer; width: 100%;
+}
+button.zt-arch-head .ico { transition: transform .15s; }
+button.zt-arch-head.open .ico { transform: rotate(90deg); }
+button.zt-arch-head:hover { border-color: var(--accent); color: var(--accent); }
+.zt-arch-list { display: grid; gap: 10px; margin-top: 6px; }
+
+/* Final layout pass: kept at EOF so legacy skin/component rules cannot undo it. */
+html[data-theme="light"][data-skin="ocean"] {
+  --bg: #f7f8fa; --sidebar: #f0f2f4; --panel: #fff; --panel2: #f4f6f8;
+  --border: #e2e7eb; --border-strong: #cfd7de; --text: #18212b; --muted: #71808e;
+  --accent: #1f6fd0; --accent2: #5b4fe0; --shadow: 0 16px 44px rgba(31,43,54,.08);
+}
+#app { grid-template-columns: 46px 224px minmax(0, 1fr); background: var(--bg); }
+body.side-collapsed #app { grid-template-columns: 46px 0 minmax(0, 1fr); }
+.side-rail { display:flex; flex-direction:column; align-items:center; gap:7px; padding:12px 7px 10px; background:#eef1f3; border-right:1px solid #e2e7eb; }
+.rail-btn { width:32px; height:32px; display:grid; place-items:center; padding:0; border:0; border-radius:9px; background:transparent; color:#84909a; cursor:pointer; transition:color .15s,background-color .15s,transform .15s; }
+.rail-btn:hover { color:#18212b; background:#fff; }
+.rail-btn.active { color:var(--accent); background:#fff; box-shadow:0 2px 8px rgba(37,45,52,.08); }
+.rail-btn:active { transform:scale(.94); }
+.rail-btn .ico { width:17px; height:17px; }
+.rail-spacer { flex:1; }
+#sidebar { padding:13px 10px 10px; background:var(--sidebar); border-right:1px solid #e2e7eb; }
+.brand { min-height:39px; padding:4px 8px 12px; gap:8px; border-bottom:1px solid #e2e7eb; }
+.brand-bee { display:grid; place-items:center; width:21px; height:21px; color:var(--accent); }
+.brand-bee .ico { width:19px; height:19px; stroke-width:1.8; }
+.brand-name { color:#18212b; font-size:15px; letter-spacing:.02em; }
+.brand-caret { width:13px; height:13px; margin-left:1px; color:#95a0a9; transform:rotate(90deg); }
+.new-task, .side-search { min-height:35px; border-radius:8px; }
+.new-task { margin-top:10px; color:#18212b; }
+.new-task:hover, .side-search:hover, .stask:hover, .sdir summary:hover { background:#e6eaed; }
+.side-search { color:#71808e; }
+.side-quick { margin:9px 0 8px; }
+.side-section.tasks { border-top:1px solid #e2e7eb; padding-top:10px; }
+.side-label { color:#89959e; font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
+.stask.active { background:color-mix(in srgb, var(--accent) 10%, transparent); color:#18212b; }
+.side-usage { border-top:1px solid #e2e7eb; border-radius:8px; }
+.side-foot { border-top-color:#e2e7eb; }
+#mainwrap { background:#f7f8fa; }
+.topbar { min-height:56px; padding:10px 22px; background:rgba(247,248,250,.9); border-bottom:1px solid #e2e7eb; backdrop-filter:blur(16px); }
+.page-title { color:#18212b; font-size:14px; font-weight:650; }
+.top-actions { gap:6px; }
+.top-actions .pill { background:transparent; border-color:transparent; color:#71808e; }
+.top-actions .pill:hover { background:#e9edf0; border-color:transparent; color:#18212b; }
+main { padding:24px 34px 72px; }
+#sub-tasks { min-height:calc(100vh - 112px); justify-content:center; gap:12px; }
+.composer { width:min(860px,100%); max-width:860px; margin:0 auto; padding:14px 0 0; }
+.hero-row { justify-content:center; margin-bottom:18px; }
+.hero { color:#18212b; font-size:clamp(24px,3vw,31px); font-weight:500 !important; letter-spacing:-.025em !important; text-align:center; }
+.cmp-box { overflow:visible; border:1px solid #d9dfe4; border-radius:18px; background:#fff; box-shadow:0 10px 28px rgba(41,53,63,.08); }
+.cmp-box:focus-within { border-color:#e8a17f; box-shadow:0 12px 34px rgba(41,53,63,.11),0 0 0 3px rgba(232,108,45,.09); }
+.cmp-pills { padding:12px 14px 2px; }
+.cmp-wd input { height:30px; padding:5px 8px; border:0; background:transparent; color:#71808e; font-size:12px; }
+.cmp-wd input:focus { box-shadow:none; }
+.cmp-wd .ico { width:14px; height:14px; }
+.cmp-hint { margin:0 15px 2px; font-size:11px; }
+.cmp-context-note { margin:6px 16px 0; color:#8a969f; font-size:11px; }
+.cmp-context-note .ico { width:13px; height:13px; }
+#f-goal { min-height:96px; padding:11px 16px; border:0; border-radius:0; background:transparent; color:#18212b; font-size:15px; line-height:1.6; }
+#f-goal:focus { box-shadow:none; }
+.cmp-bar { min-height:48px; padding:7px 10px 9px 13px; border-top:1px solid #edf0f2; }
+.type-pick, .cmp-sel { color:#71808e; background:#f4f6f7; border-color:#e1e6e9; }
+.type-pick:hover, .cmp-sel:hover { color:#18212b; background:#edf0f2; }
+.cmp-send { gap:6px; }
+.cmp-send .primary.round { width:34px; height:34px; background:var(--accent); box-shadow:0 4px 12px color-mix(in srgb, var(--accent) 24%, transparent); }
+.att-strip .ghost { border-color:transparent; color:#71808e; }
+.att-strip .ghost:hover { background:#f1f3f5; }
+main .panel.wide { max-width:1040px; margin-left:auto; margin-right:auto; }
+button.primary { background:var(--accent); box-shadow:0 3px 10px color-mix(in srgb, var(--accent) 20%, transparent); }
+button.primary:hover { filter:brightness(.96); }
+@media (max-width:860px) {
+  #app, body.side-collapsed #app { grid-template-columns:42px minmax(0,1fr); }
+  #sidebar { position:fixed; z-index:30; left:42px; top:0; bottom:0; width:228px; transform:translateX(0); box-shadow:16px 0 34px rgba(30,40,50,.12); }
+  body.side-collapsed #sidebar { transform:translateX(-110%); opacity:0; }
+  main { padding:20px 16px 58px; }
+  .topbar { padding:9px 14px; }
+  #sub-tasks { min-height:calc(100vh - 92px); }
+  .hero { font-size:24px; }
+}
+@media (max-width:560px) {
+  .side-rail { padding-left:5px; padding-right:5px; }
+  .rail-btn { width:30px; height:30px; }
+  .page-title-wrap { display:none; }
+  .topbar { justify-content:space-between; }
+  .cmp-box { border-radius:15px; }
+  .cmp-pills { padding:9px 11px 0; }
+  #f-goal { min-height:116px; font-size:14px; }
+  .cmp-send .cmp-sel { display:none; }
+}
+
+/* Keep the layout refresh on the existing skin palette. The workbench should
+   inherit ocean/forest/amber/violet/contrast choices instead of imposing a new
+   brand color. */
+html[data-skin="ocean"][data-theme="light"] {
+  --bg: #fff; --sidebar: #eff5fd; --panel: #fff; --panel2: #f0f6fd;
+  --border: #d7e3f4; --border-strong: #b9cde8; --text: #0c1a2c; --muted: #526983;
+  --accent: #1f6fd0; --accent2: #5b4fe0; --ok: #0d9a72; --warn: #a9761a;
+  --bad: #d23c58; --chip-queued-bg: #f0f6fd; --log-bg: #f4f8fe; --log-text: #33475f;
+}
+.brand-bee { display: none; }
+.brand-name { color: var(--text); }
+.side-rail { background: var(--sidebar); border-right-color: var(--border); }
+.rail-btn:hover, .rail-btn.active { background: var(--panel); }
+.topbar, #mainwrap { background: var(--bg); }
+.cmp-box { background: var(--panel); border-color: var(--border-strong); }
+.rail-btn.active { color: var(--accent); }
+.new-task:hover, .side-search:hover, .stask:hover, .sdir summary:hover { background: var(--panel2); }
+.stask.active { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text); }
+.cmp-box:focus-within { border-color: color-mix(in srgb, var(--accent) 50%, var(--border-strong)); box-shadow: 0 12px 34px color-mix(in srgb, var(--accent) 10%, transparent), 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent); }
+.cmp-send .primary.round, button.primary { background: var(--accent); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 24%, transparent); }
+.cmp-send .primary.round:hover, button.primary:hover { background: var(--accent2); }
+.cmp-context-note, .cmp-wd input, .att-strip .ghost { color: var(--muted); }
+.hero, .page-title, .new-task { color: var(--text); }
+html[data-skin="contrast"] .rail-btn.active { box-shadow: none; }
+
+/* 一级导航已经迁移到最左侧窄轨，项目栏只保留项目与任务内容，避免重复入口。 */
+.side-quick { display: none; }
+.side-foot { display: none; }
+
+/* 项目栏顶部：搜索收进标题行，新任务回归普通命令项。 */
+.side-main { position: relative; }
+.brand-row { display: flex; align-items: center; min-height: 39px; padding: 0 10px 0 12px; border-bottom: 1px solid var(--border); }
+.brand-row .brand { flex: 1 1 auto; width: auto; min-width: 0; padding: 4px 0 12px; border-bottom: 0; }
+.brand-tool { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; flex: none; padding: 0; border: 0; background: transparent; color: var(--muted); border-radius: 7px; cursor: pointer; }
+.brand-tool:hover { color: var(--text); background: var(--panel2); }
+.brand-tool .ico { width: 15px; height: 15px; }
+.brand-row .side-search { position: static; min-height: 28px; height: 28px; margin: 0; }
+.brand-row .side-search .ss-label, .brand-row .side-search .kbd { display: none; }
+.side-main > .new-task {
+  width: calc(100% - 24px); min-height: 34px; margin: 8px 12px 6px 12px; padding: 7px 9px;
+  background: transparent; color: var(--text); border: 0; border-radius: 8px;
+  box-shadow: none; font-weight: 400; transform: none;
+}
+.side-main > .new-task:hover {
+  background: var(--panel2); color: var(--text); box-shadow: none; transform: none;
+}
+.side-main > .new-task .kbd { display: none; }
+.side-main > .new-task .ico { width: 15px; height: 15px; color: var(--muted); }
+.side-label-row { min-height: 34px; }
+.side-label-row .foot-btn { display: flex; }
+
+/* Typography pass: slightly larger working text and clearer hierarchy. */
+body { font-size: 14px; }
+#sidebar { font-size: 13px; }
+.brand-name { font-size: 16px; font-weight: 700; }
+.new-task { font-size: 14px; }
+.side-label { font-size: 12px; letter-spacing: .04em; }
+.sdir summary, .stask { font-size: 13px; }
+.sdir summary, .stask { line-height: 1.55; }
+.side-usage { font-size: 12px; }
+.topbar .page-title { font-size: 15px; }
+main { font-size: 14px; }
+#run-list .item { border-color: color-mix(in srgb, var(--border) 72%, transparent); border-radius: 11px; padding: 11px 12px; }
+#run-list .item .rt .name { font-size: 14px; }
+#run-list .item .rt .desc { font-size: 12px; }
+#run-list .item .time { font-size: 12px; }
+.cmp-context-note, .cmp-hint, .cmp-estimate { font-size: 12px; }
+#f-goal::placeholder { color: color-mix(in srgb, var(--muted) 78%, #fff); }
+
+/* Match the reference proportions: 46px rail + 216px project column. */
+#app { grid-template-columns: 46px 216px minmax(0, 1fr); }
+body.side-collapsed #app { grid-template-columns: 46px 0 minmax(0, 1fr); }
+#sidebar { padding: 13px 0 10px; }
+.brand { width: 100%; padding: 4px 12px 12px; justify-content: flex-start; text-align: left; }
+.brand {
+  display: flex; align-items: center; gap: 7px; min-height: 39px;
+  margin: 0; border: 0; outline: 0; background: transparent;
+  color: var(--text); font: inherit; cursor: pointer;
+}
+.brand:hover { background: transparent; }
+.brand:focus, .brand:active { border: 0; outline: 0; box-shadow: none; }
+.brand:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: -2px; }
+.brand-name { flex: 0 0 auto; }
+.side-main > .new-task { margin-left: 12px; margin-right: 10px; }
+.side-section.tasks { padding-left: 12px; padding-right: 10px; }
+.side-usage { margin-left: 10px; margin-right: 10px; }
+.side-usage { width: calc(100% - 20px); max-width: calc(100% - 20px); }
+
+.brand-menu {
+  position: absolute; z-index: 80; top: 47px; left: 8px; width: 204px;
+  padding: 6px; border: 1px solid var(--border-strong); border-radius: 12px;
+  background: var(--panel); box-shadow: 0 14px 32px color-mix(in srgb, var(--text) 16%, transparent);
+}
+.brand-menu-item {
+  display: flex; align-items: center; justify-content: space-between; gap: 10px;
+  min-height: 48px; padding: 8px 9px; border-radius: 8px; color: var(--text);
+  font-size: 13px;
+}
+.brand-menu-item.selected { background: color-mix(in srgb, var(--panel2) 70%, transparent); }
+.brand-menu-item b { display: block; font-weight: 600; }
+.brand-menu-item small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
+.brand-menu-item > .ico { width: 15px; height: 15px; color: var(--muted); }
+.brand-caret { transition: transform .15s ease; }
+.brand[aria-expanded="true"] .brand-caret { transform: rotate(-90deg); }
+
+/* Stable three-column header: workspace name | notifications | search. */
+.brand-row {
+  display: grid; grid-template-columns: minmax(0, 1fr) 28px 28px;
+  align-items: center; gap: 2px;
+}
+.brand-row > #btn-brand {
+  display: inline-flex !important; width: 100% !important; min-width: 0 !important;
+  flex: none !important; align-items: center; justify-content: flex-start;
+  height: 28px; padding: 0 !important; overflow: visible;
+}
+.brand-row > #btn-brand .brand-name {
+  display: inline-block !important; visibility: visible !important;
+  flex: none; white-space: nowrap;
+}
+.brand-row > .brand-tool { position: static !important; width: 28px; min-width: 28px; }
+.side-section.tasks { border-top: 0 !important; margin-top: 0 !important; padding-top: 8px; }
+
+/* Compact the handoff from the new-chat action to the project list. */
+.side-main > .new-task { margin-bottom: 2px; }
+.side-section.tasks { padding-top: 4px; }
+
+/* The task landing page previously exceeded main's content box by 4px,
+   which made an idle workspace show a permanent vertical scrollbar. */
+#sub-tasks { min-height: calc(100dvh - 116px); }
+
+/* The inspector is a fourth top-level grid item (rail | project list | main | inspector).
+   Keep the rail and project column in the grid when the right detail panel opens;
+   the older three-column rule put the inspector on a new row and squeezed the main area. */
+body.inspector-open #app {
+  grid-template-columns: 46px 216px minmax(0, 1fr) minmax(280px, 340px);
+}
+body.side-collapsed.inspector-open #app {
+  grid-template-columns: 46px 0 minmax(0, 1fr) minmax(280px, 340px);
+}
+
+/* Shared page rhythm: every secondary workspace uses one readable content axis.
+   The task composer remains its own centered surface; all other pages align
+   headings, cards, tables, and lists to the same 1040px column. */
+#page-settings > .subpage:not(#sub-tasks) {
+  width: min(1040px, 100%);
+  max-width: 1040px;
+  margin-inline: auto;
+  gap: 16px;
+}
+#page-settings > #sub-browser {
+  width: 100%;
+  max-width: none;
+  margin-inline: 0;
+  min-height: 0;
+}
+#page-settings > #sub-browser .browser-shell {
+  width: 100%;
+  min-height: calc(100dvh - 116px);
+}
+#page-settings > .subpage:not(#sub-tasks) > .panel.wide {
+  width: 100%;
+  max-width: none;
+  margin-inline: 0;
+}
+#page-settings > .subpage:not(#sub-tasks) .panel-head {
+  min-height: 38px;
+  margin-bottom: 14px;
+  padding-bottom: 10px;
+  gap: 10px;
+}
+#page-settings > .subpage:not(#sub-tasks) .panel-head h2 {
+  font-size: 15px;
+  line-height: 1.35;
+}
+#page-settings > .subpage:not(#sub-tasks) .hint {
+  line-height: 1.55;
+}
+#page-settings > .subpage:not(#sub-tasks) .cards,
+#page-settings > .subpage:not(#sub-tasks) .list {
+  min-width: 0;
+}
+#page-settings > #sub-overview .ov-title { font-size: 25px; }
+#page-settings > #sub-overview .ov-row { gap: 12px; }
+#page-settings > #sub-overview .panel { border-radius: 12px; }
+
+/* Keep the current skin in charge of focus and action colors. */
+#sub-tasks .cmp-box:focus-within {
+  border-color: color-mix(in srgb, var(--accent) 50%, var(--border-strong));
+  box-shadow: 0 12px 34px color-mix(in srgb, var(--text) 10%, transparent),
+    0 0 0 3px color-mix(in srgb, var(--accent) 11%, transparent);
+}
+.side-rail, #sidebar { background: var(--sidebar); border-color: var(--border); }
+#mainwrap, .topbar { background: var(--bg); border-color: var(--border); }
+.rail-btn:hover, .rail-btn.active { background: var(--panel); }
+.rail-btn.active, .stask.active, .qitem.active { color: var(--accent); }
+.stask.active, .qitem.active { background: color-mix(in srgb, var(--accent) 10%, transparent); }
+.new-task:hover, .side-search:hover, .stask:hover, .sdir summary:hover { background: var(--panel2); }
+.panel { box-shadow: var(--shadow); }
+.panel-head { border-bottom-color: var(--border); }
+button.primary, .cmp-send .primary.round { background: var(--accent); box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 22%, transparent); }
+button.primary:hover, .cmp-send .primary.round:hover { background: var(--accent2); }
+
+/* On small screens the inspector is an overlay. It must not add grid columns
+   after the desktop four-column rule above. */
+@media (max-width: 900px) {
+  #app, body.side-collapsed #app,
+  body.inspector-open #app, body.side-collapsed.inspector-open #app {
+    grid-template-columns: 42px minmax(0, 1fr);
+  }
+  #page-settings > .subpage:not(#sub-tasks) {
+    width: 100%;
+    max-width: none;
+  }
+  #page-settings > #sub-browser .browser-shell {
+    min-height: calc(100dvh - 112px);
+  }
+}
+
+/* Browser console: this is CodeBee's operating surface, so it owns the
+   available canvas instead of inheriting the centered 1040px reading column. */
+main.browser-page-active {
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  padding: 0;
+}
+main.browser-page-active > #page-settings {
+  display: flex;
+  flex: 1 1 0;
+  min-height: 0;
+  width: 100%;
+  max-width: none;
+  margin: 0;
+}
+main.browser-page-active #page-settings > #sub-browser {
+  display: flex;
+  flex: 1 1 0;
+  width: 100%;
+  max-width: none;
+  min-height: 0;
+  margin: 0;
+  gap: 0;
+}
+main.browser-page-active #page-settings > #sub-browser .browser-shell {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+.browser-stage { min-height: 0; }
+.browser-viewport {
+  display: flex;
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: 0;
+}
+.browser-context {
+  display: flex;
+  flex: 0 0 276px;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 0;
+  padding: 15px 14px;
+  overflow-y: auto;
+  border-right: 1px solid var(--border);
+  background: color-mix(in srgb, var(--panel2) 68%, var(--bg));
+}
+.browser-context-head,
+.browser-context-section-head {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+.browser-context-kicker {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--text);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+.browser-context-kicker .ico { width: 14px; height: 14px; color: var(--accent); }
+.browser-context-live {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin-left: auto;
+  color: var(--muted);
+  font-size: 10px;
+}
+.browser-context-live i {
+  width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 13%, transparent);
+}
+.browser-context-select { display: flex; flex-direction: column; gap: 5px; }
+.browser-context-select label,
+.browser-context-section-head { color: var(--muted); font-size: 11px; font-weight: 650; }
+.browser-context-select select {
+  width: 100%; min-width: 0; height: 34px; padding: 0 9px;
+  border-radius: 8px; font-size: 12px; background: var(--panel);
+}
+.browser-task-card {
+  display: flex; flex-direction: column; gap: 8px; min-height: 88px;
+  padding: 11px; border: 1px solid var(--border); border-radius: 10px;
+  background: var(--panel);
+}
+.browser-task-title { color: var(--text); font-size: 13px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
+.browser-task-meta { display: flex; flex-wrap: wrap; gap: 5px; color: var(--muted); font-size: 10.5px; }
+.browser-task-meta span { display: inline-flex; align-items: center; gap: 4px; }
+.browser-task-meta .browser-task-status { color: var(--accent); font-weight: 650; }
+.browser-task-goal { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
+.browser-task-empty { color: var(--muted); font-size: 12px; line-height: 1.5; }
+.browser-context-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
+.browser-context-actions button:first-child { grid-column: 1 / -1; }
+.browser-context-actions button { min-width: 0; justify-content: center; }
+.browser-context-section { padding-top: 12px; border-top: 1px solid var(--border); }
+.browser-context-section-head { justify-content: space-between; margin-bottom: 8px; color: var(--text); }
+.browser-context-section-head .icon-btn { width: 22px; height: 22px; }
+.browser-context-section-head .icon-btn .ico { width: 13px; height: 13px; }
+.browser-verify-card, .browser-publish-card { color: var(--muted); font-size: 11px; line-height: 1.5; }
+.browser-verify-line { display: flex; align-items: center; gap: 7px; color: var(--text); }
+.browser-verify-line .ico { width: 14px; height: 14px; }
+.browser-verify-line.ok { color: var(--ok); }
+.browser-verify-line.bad { color: var(--bad); }
+.browser-verify-command { margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 10px var(--mono); }
+.browser-publish-note { margin: -2px 0 8px; color: var(--muted); font-size: 10px; line-height: 1.45; }
+.browser-publish-platforms { display: grid; gap: 5px; }
+.browser-publish-platform { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.browser-publish-platform b { color: var(--text); font-weight: 600; }
+.browser-publish-platform span { color: var(--muted); font-size: 10px; }
+.browser-empty {
+  align-items: stretch;
+  justify-content: stretch;
+  padding: 0;
+  overflow: auto;
+  text-align: left;
+}
+.browser-home-workbench {
+  display: grid;
+  grid-template-rows: auto auto auto minmax(94px, 1fr);
+  gap: 14px;
+  width: 100%;
+  min-height: 100%;
+  padding: clamp(16px, 2vw, 28px);
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 42%),
+    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 28%),
+    var(--bg);
+}
+.browser-home-hero {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 16px;
+  padding: 18px 20px;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  background: color-mix(in srgb, var(--panel) 88%, transparent);
+  box-shadow: 0 12px 28px color-mix(in srgb, var(--text) 6%, transparent);
+}
+.browser-home-copy { min-width: 0; }
+.browser-home-eyebrow { display: block; margin-bottom: 3px; color: var(--accent); font-size: 10.5px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
+.browser-home-hero h2 { margin: 0 0 4px; color: var(--text); font-size: clamp(20px, 2vw, 27px); line-height: 1.25; }
+.browser-home-hero p { max-width: 760px; margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
+.browser-home-mode { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: var(--panel2); font-size: 10.5px; white-space: nowrap; }
+.browser-home-mode i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 13%, transparent); }
+.browser-home-current {
+  padding: 14px 16px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--panel2) 62%, var(--panel));
+}
+.browser-home-section-label { display: block; margin-bottom: 7px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
+.browser-home-task-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
+.browser-home-task-row > div { min-width: 0; }
+.browser-home-task-row h3 { margin: 0; overflow: hidden; color: var(--text); font-size: 15px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
+.browser-home-task-row p { margin: 3px 0 0; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
+.browser-home-run { flex: none; max-width: 42%; overflow: hidden; color: var(--accent); font: 10.5px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
+.browser-home-workflows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
+.browser-home-action {
+  display: flex;
+  align-items: center;
+  gap: 13px;
+  min-width: 0;
+  min-height: 86px;
+  padding: 15px 16px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  color: var(--text);
+  background: var(--panel);
+  box-shadow: none;
+  cursor: pointer;
+  text-align: left;
+  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
+}
+.browser-home-action:hover:not(:disabled) { border-color: var(--border-strong); background: var(--panel2); transform: translateY(-1px); }
+.browser-home-action:disabled { cursor: default; opacity: .42; }
+.browser-home-action > .ico { width: 22px; height: 22px; color: var(--accent); }
+.browser-home-action > span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
+.browser-home-action b { font-size: 13px; font-weight: 700; }
+.browser-home-action small { overflow: hidden; color: var(--muted); font-size: 10.5px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
+.browser-home-action.primary { color: #fff; border-color: transparent; background: var(--accent); }
+.browser-home-action.primary:hover:not(:disabled) { background: var(--accent2); }
+.browser-home-action.primary > .ico, .browser-home-action.primary small { color: currentColor; }
+.browser-home-capabilities {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  align-content: stretch;
+}
+.browser-home-capabilities > div {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  padding: 12px 14px;
+  border: 1px solid var(--border);
+  border-radius: 11px;
+  color: var(--muted);
+  background: color-mix(in srgb, var(--panel) 68%, transparent);
+}
+.browser-home-capabilities .ico { width: 17px; height: 17px; color: var(--accent); }
+.browser-home-capabilities span { display: flex; min-width: 0; flex-direction: column; }
+.browser-home-capabilities b { color: var(--text); font-size: 11px; }
+.browser-home-capabilities small { overflow: hidden; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
+
+@media (max-width: 900px) {
+  main.browser-page-active { overflow-y: auto; }
+  .browser-stage { flex-direction: column; overflow: visible; }
+  .browser-context { flex: 0 0 auto; max-height: 310px; border-right: 0; border-bottom: 1px solid var(--border); }
+  .browser-viewport { min-height: 430px; }
+  .browser-home-workbench { grid-template-rows: auto auto auto auto; padding: 14px; }
+  .browser-home-hero { grid-template-columns: auto minmax(0, 1fr); padding: 15px; }
+  .browser-home-mode { display: none; }
+  .browser-home-capabilities { grid-template-columns: 1fr; }
+}
+
+@media (max-width: 560px) {
+  .browser-context { padding: 12px 10px; }
+  .browser-viewport { min-height: 380px; }
+  .browser-home-workbench { padding: 10px; }
+  .browser-home-hero { grid-template-columns: 1fr; gap: 10px; }
+  .browser-home-hero .browser-empty-mark { width: 46px; height: 46px; border-radius: 12px; }
+  .browser-home-hero .browser-empty-mark .ico { width: 22px; height: 22px; }
+  .browser-home-hero h2 { font-size: 19px; }
+  .browser-home-hero p { font-size: 11.5px; }
+  .browser-home-task-row { align-items: flex-start; flex-direction: column; gap: 6px; }
+  .browser-home-run { max-width: 100%; }
+  .browser-home-workflows { grid-template-columns: 1fr; }
+  .browser-home-action { min-height: 72px; }
+}