codebee 0.1.105 → 0.1.106

package/app/ui/style.css

@@ -721,6 +721,18 @@ body.settings-mode .side-settings { display: flex; }
 .set-back:hover { color: var(--text); background: var(--panel2); }
 .side-settings .set-group { color: var(--muted); font-size: 11px; padding: 12px 10px 4px; letter-spacing: .05em; }
 .side-settings .set-group:first-of-type { padding-top: 2px; }
+.settings-search-wrap {
+  display: flex; align-items: center; gap: 8px; min-height: 36px; margin: 0 2px 5px; padding: 0 9px;
+  border: 1px solid var(--border); border-radius: 9px; background: var(--panel); color: var(--muted);
+}
+.settings-search-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent); }
+.settings-search-wrap > .ico { width: 15px; height: 15px; flex: 0 0 auto; }
+.settings-search-wrap input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 12px; }
+.settings-search-wrap input::placeholder { color: var(--muted); }
+.settings-search-wrap kbd { flex: 0 0 auto; padding: 1px 4px; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); font: 10px var(--mono, monospace); }
+.settings-search-hidden { display: none !important; }
+.settings-search-empty { padding: 12px 10px; color: var(--muted); font-size: 12px; line-height: 1.5; }
+.settings-subhead { margin: 16px 0 8px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--text); font-size: 13px; font-weight: 650; line-height: 1.4; }
 .side-settings .set-item {
   display: flex; align-items: center; gap: 9px; text-align: left;
   background: none; border: none; color: var(--muted); padding: 8px 10px;
@@ -3102,6 +3114,29 @@ main.chat-fill #run-detail.chat-mode {
   font-size: 11px; line-height: 1.4; opacity: .72; }
 .chat-log-btn:hover, .chat-log-btn:focus-visible { color: var(--accent); opacity: 1; outline: none; }
 .chat-body { margin: 0; font: inherit; white-space: pre-wrap; }
+.chat-body.chat-markdown { white-space: normal; overflow-wrap: anywhere; }
+.chat-markdown > :first-child { margin-top: 0; }
+.chat-markdown > :last-child { margin-bottom: 0; }
+.chat-markdown p { margin: 0 0 .8em; }
+.chat-markdown h1, .chat-markdown h2, .chat-markdown h3,
+.chat-markdown h4, .chat-markdown h5, .chat-markdown h6 {
+  margin: 1.2em 0 .5em; color: var(--text); line-height: 1.35; font-weight: 650;
+}
+.chat-markdown h1 { font-size: 1.45em; }
+.chat-markdown h2 { font-size: 1.3em; }
+.chat-markdown h3 { font-size: 1.16em; }
+.chat-markdown h4, .chat-markdown h5, .chat-markdown h6 { font-size: 1.04em; }
+.chat-markdown ul, .chat-markdown ol { margin: .35em 0 .9em; padding-left: 1.7em; }
+.chat-markdown li { padding-left: .15em; }
+.chat-markdown li + li { margin-top: .35em; }
+.chat-markdown li > p { margin: 0; }
+.chat-markdown blockquote { margin: .65em 0; padding: .15em 0 .15em .9em;
+  border-left: 3px solid var(--border-strong); color: var(--muted); }
+.chat-markdown hr { height: 1px; margin: 1em 0; border: 0; background: var(--border); }
+.chat-markdown a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 2px; }
+.chat-markdown a:hover { text-decoration-color: currentColor; }
+.chat-markdown code { padding: .08em .3em; border: 1px solid var(--border); border-radius: 4px;
+  background: var(--panel2); font-family: var(--mono, monospace); font-size: .88em; }
 .chat-atts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
 /* 运行中且还没有正文：三点打字动画（reduced-motion 时退化为静态点） */
 .chat-typing { display: inline-flex; gap: 5px; align-items: center; padding: 8px 0 4px; }
@@ -3169,6 +3204,20 @@ details.chat-think[open] > summary { border-bottom: 1px dashed var(--border-stro
   .rd-chat-flow { gap: 18px; padding: 12px 6px 8px; }
   .chat-bubble.me { max-width: 86%; }
   .stask-more { opacity: .8; }
+  /* 软键盘/安全区适配：输入条在消息流下方保持可见，发送按钮不会被底部手势区吞掉。 */
+  #run-detail.chat-mode .rd-chat-bar {
+    position: sticky; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 8;
+    margin-bottom: max(8px, env(safe-area-inset-bottom));
+    background: color-mix(in srgb, var(--panel) 94%, transparent);
+    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
+  }
+  #run-detail.chat-mode .rd-chat-flow { scroll-padding-bottom: 132px; }
+  #run-detail.chat-mode .rd-chat-tools { gap: 6px; }
+  #run-detail.chat-mode .rd-chat-tools .cmp-sel { padding: 4px 8px; font-size: 11.5px; }
+  #run-detail.chat-mode .rd-chat-tools .cmp-sel-face { max-width: 64px; }
+  #run-detail.chat-mode .rd-chat-tools .rd-hint {
+    order: 20; flex-basis: calc(100% - 44px); min-width: 0;
+  }
 }
 
 /* ================= 墨金组件精修层（惠及所有皮肤；DOM/几何零改动） =================
@@ -6858,6 +6907,34 @@ body.side-collapsed.inspector-open #app {
 #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; }
+.ov-goal-card { padding: 18px 20px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
+  background: linear-gradient(112deg, color-mix(in srgb, var(--accent) 7%, var(--panel)), var(--panel) 56%); }
+.ov-goal-card .panel-head { align-items: flex-start; }
+.ov-goal-card .panel-head h2 { margin: 0; font-size: 15px; }
+.ov-goal-caption { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
+.ov-goal-empty { display: grid; grid-template-columns: minmax(180px, .85fr) minmax(240px, 1.5fr) auto; gap: 9px; align-items: stretch; }
+.ov-goal-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; align-self: stretch; }
+.ov-goal-field label { flex: 0 0 14px; margin: 0; color: var(--muted); font-size: 11px; line-height: 14px; }
+.ov-goal-empty input, .ov-goal-empty textarea { min-width: 0; width: 100%; border: 1px solid var(--border); border-radius: 8px;
+  padding: 9px 11px; background: var(--bg); color: var(--text); font: inherit; font-size: 12px; resize: vertical; }
+.ov-goal-empty input { height: 44px; align-self: start; }
+.ov-goal-empty textarea { height: 56px; min-height: 56px; }
+.ov-goal-empty input:focus, .ov-goal-empty textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 28%, transparent); border-color: var(--accent); }
+.ov-goal-empty button { align-self: end; white-space: nowrap; }
+.ov-goal-active h3 { margin: 0 0 5px; font-size: 17px; font-weight: 650; }
+.ov-goal-description { margin: 0 0 13px; color: var(--muted); font-size: 12px; white-space: pre-wrap; }
+.ov-goal-progress-row { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; }
+.ov-goal-progress-track { height: 5px; margin-top: 6px; overflow: hidden; border-radius: 5px; background: var(--panel2); }
+.ov-goal-progress-track i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .25s ease; }
+.ov-goal-actions { display: flex; gap: 7px; margin-top: 13px; }
+.ov-goal-error { min-height: 0; margin: 4px 0 0; color: var(--bad); font-size: 11px; }
+.ov-goal-error:empty { display: none; }
+@media (max-width: 680px) {
+  .ov-goal-empty { grid-template-columns: 1fr; }
+  .ov-goal-empty input { align-self: stretch; }
+  .ov-goal-empty textarea { height: auto; min-height: 56px; }
+  .ov-goal-empty button { justify-self: start; }
+}
 
 /* Keep the current skin in charge of focus and action colors. */
 #sub-tasks .cmp-box:focus-within {
@@ -7106,30 +7183,194 @@ main.browser-page-active #page-settings > #sub-browser .browser-shell {
 .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; }
 
+/* Browser-first new tab: keep the workspace available, but let the page own
+   the canvas. Task context is an opt-in inspector instead of permanent chrome. */
+body.browser-context-collapsed .browser-context { display: none; }
+.browser-context-toggle { flex: none; }
+.browser-context-toggle[aria-expanded="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
+.browser-shortcuts { min-height: 43px; padding: 6px 14px; }
+.browser-home-workbench {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  width: min(680px, 100%);
+  min-height: 100%;
+  margin-inline: auto;
+  padding: 42px 28px 70px;
+  background: none;
+}
+.browser-home-hero {
+  grid-template-columns: auto minmax(0, 1fr);
+  width: min(520px, 100%);
+  padding: 0;
+  border: 0;
+  background: none;
+  box-shadow: none;
+}
+.browser-home-hero .browser-empty-mark { width: 48px; height: 48px; border-radius: 14px; }
+.browser-home-hero .browser-empty-mark .ico { width: 23px; height: 23px; }
+.browser-home-eyebrow { margin-bottom: 5px; font-size: 9px; letter-spacing: .16em; }
+.browser-home-hero h2 { font-size: 23px; }
+.browser-home-search {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: min(520px, 100%);
+  height: 48px;
+  padding: 0 8px 0 15px;
+  border: 1px solid var(--border-strong);
+  border-radius: 14px;
+  background: var(--panel);
+  box-shadow: 0 8px 26px color-mix(in srgb, var(--text) 7%, transparent);
+}
+.browser-home-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
+.browser-home-search > .ico { width: 17px; height: 17px; flex: none; color: var(--muted); }
+.browser-home-search input {
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  box-shadow: none;
+  font-size: 13px;
+}
+.browser-home-search input:focus { border: 0; }
+.browser-home-search-go { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: 0; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; }
+.browser-home-search-go:hover { color: var(--accent); background: var(--panel2); }
+.browser-home-search-go .ico { width: 16px; height: 16px; }
+.browser-home-note { width: min(520px, 100%); color: var(--muted); font-size: 10px; letter-spacing: .04em; }
+
+.browser-dialog {
+  width: min(620px, calc(100vw - 30px)); max-width: none; max-height: min(78vh, 740px); padding: 0;
+  overflow: hidden; border: 1px solid var(--border); border-radius: 16px; color: var(--text); background: var(--panel);
+  box-shadow: 0 24px 80px rgba(0, 0, 0, .24);
+}
+.browser-dialog::backdrop { background: rgba(14, 18, 25, .42); backdrop-filter: blur(3px); }
+.browser-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 13px; border-bottom: 1px solid var(--border); }
+.browser-dialog-head h2 { margin: 3px 0 0; font-size: 18px; font-weight: 650; }
+.browser-dialog-kicker { color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
+.browser-dialog-search { display: flex; align-items: center; gap: 9px; height: 38px; margin: 14px 18px 10px; padding: 0 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); }
+.browser-dialog-search .ico { width: 15px; height: 15px; color: var(--muted); }
+.browser-dialog-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; box-shadow: none; }
+.browser-dialog-search input:focus { border: 0; }
+.browser-history-list { max-height: min(52vh, 500px); padding: 0 10px; overflow: auto; }
+.browser-dialog-empty { padding: 36px 12px; color: var(--muted); font-size: 12px; text-align: center; }
+.browser-history-entry { display: flex; align-items: center; gap: 11px; width: 100%; min-width: 0; padding: 10px; border: 0; border-radius: 9px; color: var(--text); background: transparent; cursor: pointer; text-align: left; }
+.browser-history-entry:hover { background: var(--panel2); }
+.browser-history-entry-mark { display: grid; width: 30px; height: 30px; flex: none; place-items: center; border-radius: 9px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
+.browser-history-entry-mark .ico { width: 15px; height: 15px; }
+.browser-history-entry-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
+.browser-history-entry-copy b,.browser-history-entry-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.browser-history-entry-copy b { font-size: 12px; font-weight: 600; }
+.browser-history-entry-copy small { color: var(--muted); font-size: 10px; }
+.browser-history-entry time { flex: none; color: var(--muted); font-size: 10px; }
+.browser-dialog-foot,.browser-dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 18px 16px; border-top: 1px solid var(--border); }
+.browser-dialog-foot { color: var(--muted); font-size: 10px; }
+.browser-dialog-explainer,.browser-dialog-note { margin: 16px 20px; color: var(--muted); font-size: 12px; line-height: 1.65; }
+.browser-dialog-note { padding: 10px 12px; border-radius: 9px; background: var(--panel2); }
+.browser-confirm-dialog { width: min(480px, calc(100vw - 30px)); }
+.browser-confirm-dialog .browser-dialog-actions,.browser-permissions-dialog .browser-dialog-actions { justify-content: flex-end; }
+.browser-site-origin { margin: 14px 20px 8px; padding: 8px 10px; overflow-wrap: anywhere; border-radius: 8px; color: var(--accent); background: var(--panel2); font: 11px var(--mono, monospace); }
+.browser-permission-list { display: grid; gap: 2px; padding: 0 14px; }
+.browser-permission-list label { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 8px; border-bottom: 1px solid var(--border); cursor: pointer; }
+.browser-permission-list label > span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
+.browser-permission-list b { font-size: 12px; font-weight: 600; }
+.browser-permission-list small { color: var(--muted); font-size: 10px; }
+.browser-permission-list input { width: 16px; height: 16px; flex: none; accent-color: var(--accent); }
+.browser-permission-list input:disabled { cursor: not-allowed; }
+
 @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; }
+  .browser-home-workbench { padding: 28px 18px 50px; gap: 16px; }
+  .browser-home-hero { grid-template-columns: auto minmax(0, 1fr); padding: 0; }
 }
 
 @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-workbench { padding: 24px 14px 46px; gap: 14px; }
+  .browser-home-hero { grid-template-columns: auto minmax(0, 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; }
+  .browser-home-search { height: 44px; }
+  .browser-dialog { width: calc(100vw - 20px); border-radius: 13px; }
+  .browser-dialog-head { padding: 15px 15px 11px; }
+  .browser-history-entry time { display: none; }
+  .browser-dialog-foot { align-items: flex-start; flex-direction: column; padding: 12px 15px 14px; }
+}
+
+/* Codex-inspired workspace polish: quiet chrome, crisp separators, and a
+   neutral reading canvas. Keep the existing palette system in control. */
+html[data-skin="ocean"][data-theme="light"] {
+  --bg: #ffffff;
+  --sidebar: #f7f7f8;
+  --panel: #ffffff;
+  --panel2: #f2f2f3;
+  --border: #e7e7e9;
+  --border-strong: #d7d7da;
+  --text: #242426;
+  --muted: #77777d;
+  --accent: #376fbd;
+  --accent2: #2e62aa;
+  --shadow: 0 2px 10px rgba(24, 24, 27, .045);
+}
+html[data-skin="ocean"][data-theme="light"] #app,
+html[data-skin="ocean"][data-theme="light"] #mainwrap,
+html[data-skin="ocean"][data-theme="light"] main,
+html[data-skin="ocean"][data-theme="light"] .topbar { background: var(--bg); }
+html[data-skin="ocean"][data-theme="light"] .side-rail,
+html[data-skin="ocean"][data-theme="light"] #sidebar { background: var(--sidebar); border-color: var(--border); }
+html[data-skin="ocean"][data-theme="light"] .side-rail { gap: 6px; }
+html[data-skin="ocean"][data-theme="light"] .rail-btn { border-radius: 10px; color: #85858b; }
+html[data-skin="ocean"][data-theme="light"] .rail-btn:hover { color: var(--text); background: #ececee; }
+html[data-skin="ocean"][data-theme="light"] .rail-btn.active { color: var(--text); background: #e9e9eb; box-shadow: none; }
+html[data-skin="ocean"][data-theme="light"] .brand-row { min-height: 44px; }
+html[data-skin="ocean"][data-theme="light"] .brand-name { font-size: 15px; font-weight: 650; }
+html[data-skin="ocean"][data-theme="light"] .side-main > .new-task { margin-top: 9px; margin-bottom: 8px; }
+html[data-skin="ocean"][data-theme="light"] .side-label-row { padding-top: 5px; }
+html[data-skin="ocean"][data-theme="light"] .qitem,
+html[data-skin="ocean"][data-theme="light"] .stask,
+html[data-skin="ocean"][data-theme="light"] .sdir summary { transition: background-color .14s ease, color .14s ease; }
+html[data-skin="ocean"][data-theme="light"] .qitem:hover,
+html[data-skin="ocean"][data-theme="light"] .stask:hover,
+html[data-skin="ocean"][data-theme="light"] .sdir summary:hover { transform: none; background: #ededee; }
+html[data-skin="ocean"][data-theme="light"] .qitem.active,
+html[data-skin="ocean"][data-theme="light"] .stask.active { color: var(--text); background: #e9e9eb; }
+html[data-skin="ocean"][data-theme="light"] .stask.active { box-shadow: inset 2px 0 var(--accent); }
+html[data-skin="ocean"][data-theme="light"] .topbar {
+  min-height: 54px;
+  padding-inline: 22px;
+  border-bottom-color: var(--border);
+  backdrop-filter: none;
+}
+html[data-skin="ocean"][data-theme="light"] .topbar .page-title { font-size: 14px; font-weight: 600; letter-spacing: 0; }
+html[data-skin="ocean"][data-theme="light"] .top-actions .pill:hover,
+html[data-skin="ocean"][data-theme="light"] .brand-tool:hover { color: var(--text); background: #ededee; }
+html[data-skin="ocean"][data-theme="light"] main { padding-top: 26px; }
+html[data-skin="ocean"][data-theme="light"] .page { gap: 16px; }
+html[data-skin="ocean"][data-theme="light"] .panel,
+html[data-skin="ocean"][data-theme="light"] .item,
+html[data-skin="ocean"][data-theme="light"] .card { border-color: var(--border); box-shadow: none; }
+html[data-skin="ocean"][data-theme="light"] .panel { border-radius: 12px; }
+html[data-skin="ocean"][data-theme="light"] .panel-head { border-bottom-color: var(--border); }
+html[data-skin="ocean"][data-theme="light"] button.ghost { border-color: var(--border-strong); }
+html[data-skin="ocean"][data-theme="light"] button.ghost:hover { background: #f1f1f2; }
+html[data-skin="ocean"][data-theme="light"] #inspector { border-left-color: var(--border); box-shadow: -8px 0 28px rgba(20, 20, 22, .035); }
+html[data-skin="ocean"][data-theme="light"] .cmp-box { border-radius: 16px; box-shadow: 0 5px 18px rgba(24, 24, 27, .055); }
+
+@media (max-width: 900px) {
+  html[data-skin="ocean"][data-theme="light"] .topbar { padding-inline: 14px; }
+  html[data-skin="ocean"][data-theme="light"] main { padding-top: 18px; }
 }
 
 /* 步骤行 flex 化后的防压缩补充（追加于文件尾防并行重排）：徽章/按钮不许被
@@ -7188,6 +7429,8 @@ main.browser-page-active #page-settings > #sub-browser .browser-shell {
 }
 .hive-view-btn:hover, .hive-scene-btn:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 8%, transparent); }
 .hive-view-btn.active { border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); color: var(--accent); }
+/* 自由 3D 暂不发布：即使浏览器恢复旧 DOM/状态，也不显示用户入口。 */
+.hive-view-btn[data-hive-view="live3d"] { display: none !important; }
 .hive-scene-hint { margin-left: 8px; }
 .hive-scene-spacer { flex: 1; }
 .hive-scene-btn { min-width: 31px; border-color: var(--border); background: var(--panel); font-size: 13px; }
@@ -7293,24 +7536,81 @@ main.browser-page-active #page-settings > #sub-browser .browser-shell {
   .hive-detail-head, .hive-detail-meta, .hive-detail-log { padding-inline: 14px; }
 }
 
-/* ---- 发布台·批量选择（pb-pend）：待发章号 chips + 全选/清空 + 发布所选/直发所选 ---- */
-.pb-pend { width: 100%; margin-top: 6px; padding: 6px 8px; border: 1px solid var(--line);
-  border-radius: 8px; font-size: 12px; }
-.pb-pend-head { display: flex; gap: 10px; align-items: center; color: var(--muted); }
-.pb-pend-head a { color: var(--accent, #4a7dbe); text-decoration: none; }
-.pb-pend-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px;
-  max-height: 96px; overflow: auto; }
-.pb-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px;
-  border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
-  color: var(--muted); user-select: none; }
-.pb-chip.on { border-color: var(--accent, #4a7dbe); color: var(--text); }
-.pb-chip input { margin: 0; }
-.pb-pend-btns { display: flex; gap: 8px; margin-top: 6px; }
-.pb-vol { font-size: 11px; color: var(--accent, #4a7dbe); margin-top: 5px; font-weight: 600; }
-.pb-vol-sel { display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
-  color: inherit; user-select: none; }
-.pb-vol-sel:hover, .pb-vol-sel.on { color: var(--text); }
-.pb-vol-sel input { margin: 0; accent-color: var(--accent, #4a7dbe); }
+/* 发布台待发选择：卷区独立，只有章节列表滚动，摘要和操作始终可见。 */
+.pb-pend-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; width: 100%;
+  padding: 12px; margin-top: 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel2); }
+.pb-pend-summary span { flex: 1; font-size: 12px; color: var(--text); white-space: nowrap; }
+.pb-selection-modal .modal { width: 720px; max-width: 100%; max-height: min(84vh, calc(100vh - 48px)); overflow: hidden; }
+.pb-selection-modal .modal-body { min-height: 0; padding: 0; }
+.pb-selection-modal .pb-pend { margin: 0; border: 0; border-radius: 0; }
+.pb-selection-modal .pb-pend-chips { max-height: none; overflow: visible; scrollbar-gutter: auto; padding: 16px 20px; }
+.pb-selection-modal .pb-pend-head { padding: 12px 20px; }
+.pb-selection-modal .modal-foot { padding: 0; }
+.pb-selection-modal .pb-pend-foot { width: 100%; padding: 12px 20px; border: 0; }
+.pb-selection-modal .pb-pend-btns button { min-height: 32px; padding: 4px 8px; line-height: 1.4; overflow-wrap: anywhere; }
+.pb-selection-modal .pb-pend-count { font-size: 12px; }
+.pb-pend { width: 100%; min-width: 0; margin-top: 8px; overflow: hidden;
+  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); font-size: 12px; }
+.pb-pend-head { display: flex; gap: 12px; align-items: center; padding: 12px;
+  border-bottom: 1px solid var(--border); background: var(--panel2); }
+.pb-pend-heading { display: grid; gap: 4px; flex: 1; min-width: 0; }
+.pb-pend-heading strong { color: var(--text); font-size: 13px; font-weight: 600; }
+.pb-pend-heading span { color: var(--muted); font-size: 11.5px; }
+.pb-pend-head a { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 28px;
+  color: var(--accent); text-decoration: none; padding: 0 4px; border-radius: 4px; }
+.pb-pend-head a:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
+.pb-pend-chips { display: grid; gap: 16px; padding: 12px; max-height: 256px;
+  overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
+.pb-pend-volume { min-width: 0; }
+.pb-pend-volume + .pb-pend-volume { border-top: 1px solid var(--border); padding-top: 12px; }
+.pb-pend .pb-vol { margin: 0 0 8px; font-size: 12px; color: var(--text); font-weight: 600; }
+.pb-pend .pb-vol-sel { display: flex; align-items: center; gap: 8px; min-height: 28px;
+  cursor: pointer; user-select: none; }
+.pb-vol-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pb-vol-count { margin-left: auto; flex-shrink: 0; color: var(--muted); font-size: 11.5px; font-weight: 400; }
+.pb-chapter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 8px; }
+.pb-chip { display: grid; grid-template-columns: 16px 1fr; align-items: center; gap: 4px 8px; min-height: 52px;
+  min-width: 0; padding: 4px; border: 1px solid var(--border); border-radius: var(--r-sm);
+  cursor: pointer; color: var(--muted); background: var(--panel); font-variant-numeric: tabular-nums; user-select: none; }
+.pb-chip.on { border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
+  color: var(--text); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
+.pb-chip:hover { border-color: var(--accent); }
+.pb-chip input { grid-row: span 2; }
+.pb-chip-number { color: var(--text); font-weight: 600; }
+.pb-chip-review { font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
+.pb-chip.review-ready .pb-chip-review { color: var(--ok); }
+.pb-chip.review-passed_blocked .pb-chip-review, .pb-chip.review-stale .pb-chip-review { color: var(--warn); }
+.pb-chip.review-failed .pb-chip-review { color: var(--bad); }
+.pb-pend-progress { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 12px 20px 0;
+  color: var(--muted); font-size: 12px; }
+.pb-pend-progress strong { color: var(--text); font-weight: 600; }
+.pb-review-legend { display: flex; flex-wrap: wrap; gap: 5px 12px; padding: 9px 20px 0;
+  color: var(--muted); font-size: 11px; line-height: 1.5; }
+.pb-review-legend span { display: inline-flex; align-items: center; gap: 5px; }
+.pb-review-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
+.pb-review-legend .review-ready i { background: var(--ok); }
+.pb-review-legend .review-passed_blocked i { background: var(--warn); }
+.pb-review-legend .review-failed i { background: var(--bad); }
+.pb-review-legend .review-pending i { background: var(--muted); }
+.pb-drafted-list { margin: 0 20px 16px; font-size: 12px; color: var(--muted); }
+.pb-drafted-list summary { cursor: pointer; }
+.pb-drafted-list p { line-height: 1.6; overflow-wrap: anywhere; }
+.pb-selection-modal .pb-ready-select { min-height: 28px; padding: 4px 8px; font-size: 12px; white-space: nowrap; }
+.pb-pend input[type="checkbox"] { width: 14px; height: 14px; flex-shrink: 0; margin: 0; accent-color: var(--accent); }
+.pb-chip:focus-within, .pb-vol-sel:focus-within, .pb-pend-head a:focus-visible {
+  outline: 2px solid var(--accent); outline-offset: 2px; }
+.pb-pend-foot { display: grid; gap: 8px; padding: 12px; border-top: 1px solid var(--border); background: var(--panel2); }
+.pb-pend-count { color: var(--text); font-variant-numeric: tabular-nums; }
+.pb-pend-mode-hint { color: var(--muted); font-size: 11.5px; line-height: 1.5; }
+.pb-pend-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
+.bm-pub .pb-pend-btns button { min-height: 32px; padding: 4px 8px; line-height: 1.4; overflow-wrap: anywhere; }
+.bm-pub .pb-pend-btns button.primary { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
+@media (max-width: 480px) {
+  .pb-pend-btns { grid-template-columns: 1fr; }
+  .pb-pend-head { gap: 8px; }
+  .pb-selection-modal .pb-pend-head { flex-wrap: wrap; }
+  .pb-selection-modal .pb-pend-heading { flex-basis: 100%; }
+}
 
 
 /* Procedural WebGL hive renderer: canvas is the live 3D layer, DOM controls stay accessible above it. */
@@ -7792,6 +8092,26 @@ main.browser-page-active #page-settings > #sub-browser .browser-shell {
   .hive-scene-stage.is-fullscreen .hive-scene-hint { display: none; }
 }
 
+/* ---- 人工评审队列 ---- */
+.review-queue { margin-top: 20px; }
+.review-queue-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
+.review-queue-toolbar select { width: auto; min-width: 130px; }
+.review-queue-list { display: grid; gap: 12px; }
+.review-request { min-width: 0; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r-md); padding: 14px; }
+.review-request-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
+.review-request-head strong { min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
+.review-request-head .tag { flex-shrink: 0; }
+.review-request-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
+.review-request-paths { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
+.review-request-paths code { max-width: 100%; overflow-wrap: anywhere; }
+.review-request-reason { white-space: pre-wrap; overflow-wrap: anywhere; padding: 10px; background: var(--panel); border-radius: var(--r-md); }
+.review-request .actions { flex-wrap: wrap; }
+@media (max-width: 640px) {
+  .review-queue .panel-head { flex-wrap: wrap; }
+  .review-queue .panel-head .actions { flex-wrap: wrap; }
+  .review-request { padding: 10px; }
+}
+
 /* ---- 步骤行窄主列折行（追加于文件尾防并行重排） ----
  * 步骤行定宽列总和 ≈783px（序号26+角色92+执行者118+st-model 77+st-prov 200+耗时42
  * +状态chip 44+日志按钮60+8间隙96+内边距28），浏览器缩放/窄窗/检查器打开都会把
@@ -7806,3 +8126,240 @@ main.browser-page-active #page-settings > #sub-browser .browser-shell {
   .step .role { flex: 0 1 92px; }
   .step .who { flex: 0 1 118px; }
 }
+
+/* Type and spacing pass: tune hierarchy and reading rhythm across the app. */
+body {
+  font-family: var(--font-ui), "Microsoft YaHei UI", "PingFang SC", sans-serif;
+  font-size: 14px;
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+main { padding: 28px clamp(20px, 2.6vw, 44px) 76px; }
+.page { gap: 18px; }
+.page-title { font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: 0; }
+h1, h2, h3 { text-wrap: pretty; }
+h2 { font-size: 16px; line-height: 1.4; letter-spacing: -.01em; }
+h3 { font-size: 13.5px; line-height: 1.45; }
+.panel-head { gap: 10px; margin-bottom: 14px; padding-bottom: 11px; }
+.panel-head h2 { margin: 0; font-size: 16px; font-weight: 650; }
+.hint, .msg { font-size: 12.5px; line-height: 1.65; }
+.field > label { font-size: 12.5px; line-height: 1.45; }
+input, select, textarea { line-height: 1.5; }
+button { font-family: inherit; }
+button.ghost, button.primary, button.danger { font-size: 13px; font-weight: 550; }
+.item .name { font-size: 13.5px; line-height: 1.45; }
+.item .desc, .item .hint { line-height: 1.55; }
+#run-list .item .rt .name { font-size: 13.5px; font-weight: 600; }
+#run-list .item .rt .desc { font-size: 12px; line-height: 1.5; }
+#run-list .item .time { font-size: 11.5px; font-variant-numeric: tabular-nums; }
+#sub-tasks .hero {
+  max-width: 760px;
+  font-size: clamp(25px, 2.6vw, 31px);
+  line-height: 1.3;
+  letter-spacing: -.035em;
+  text-wrap: balance;
+}
+#sub-tasks .hero-sub { max-width: 620px; margin: 0 auto 20px; line-height: 1.6; }
+#sub-tasks .cmp-box textarea { font-size: 14px; line-height: 1.7; }
+#sub-tasks .cmp-box textarea::placeholder { line-height: 1.6; }
+#sub-tasks .cmp-hint, #sub-tasks .cmp-estimate { font-size: 11.5px; line-height: 1.55; }
+.side-label { font-size: 11px; font-weight: 600; letter-spacing: .035em; }
+.sdir summary, .stask { font-size: 12.5px; line-height: 1.5; }
+.side-usage { font-size: 11.5px; line-height: 1.5; }
+#run-detail .detail-head h2, #rd-rail > .detail-head > #rd-title { font-size: 15px; line-height: 1.4; letter-spacing: -.01em; }
+
+@media (max-width: 900px) {
+  main { padding: 20px 16px 62px; }
+  .page { gap: 15px; }
+}
+@media (max-width: 640px) {
+  body { font-size: 13.5px; }
+  main { padding: 16px 12px 58px; }
+  .panel-head { margin-bottom: 11px; }
+  .panel-head h2 { font-size: 15px; }
+  #sub-tasks .hero { font-size: 23px; }
+}
+
+/* Mobile remote workbench: one content column, navigation in a drawer. Keep
+   these rules after the desktop skin/density layers so they cannot leak back. */
+.mobile-workspaces, #sub-tasks .mobile-workspaces-back { display: none; }
+@media (max-width: 900px) {
+  #app, body.side-collapsed #app,
+  body.inspector-open #app, body.side-collapsed.inspector-open #app {
+    grid-template-columns: minmax(0, 1fr);
+    height: 100dvh;
+    min-height: 0;
+  }
+  #mainwrap { height: 100dvh; min-height: 0; }
+  .side-rail {
+    position: fixed; inset: 0 auto 0 0; z-index: 61; width: 56px;
+    padding: max(12px, env(safe-area-inset-top)) 6px max(12px, env(safe-area-inset-bottom));
+    visibility: visible;
+  }
+  .rail-btn { width: 44px; height: 44px; }
+  #sidebar {
+    left: 56px; width: min(320px, calc(100vw - 80px));
+    padding-top: max(14px, env(safe-area-inset-top)) !important;
+    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
+    visibility: visible;
+  }
+  body.side-collapsed .side-rail, body.side-collapsed #sidebar {
+    visibility: hidden; pointer-events: none !important;
+  }
+  #sidebar .new-task, #sidebar .set-item, #sidebar .stask, #sidebar .sdir summary { min-height: 44px; }
+  #sidebar .stask-more { opacity: 1; min-width: 36px; min-height: 36px; }
+  .topbar, html[data-skin="ocean"][data-theme="light"] .topbar {
+    min-height: 64px; padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
+    gap: 8px; flex-wrap: nowrap;
+  }
+  #btn-menu, .top-actions .pill.ctrl { min-width: 44px; min-height: 44px; }
+  .page-title-wrap { display: flex; flex: 1; overflow: hidden; }
+  .page-title-wrap::before { content: "CodeBee"; color: var(--text); font-size: 15px; font-weight: 650; }
+  .topbar .page-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
+  .crumb-root { display: none; }
+  .top-actions { flex: none; margin-left: auto; gap: 4px; }
+  .top-actions .conn { display: flex; padding: 0; background: transparent; font-size: 11px; }
+  .top-actions .pill:not(.ctrl) { display: none; }
+  #upd-pill, #health-banner { max-width: 90px; overflow: hidden; }
+  main, html[data-skin="ocean"][data-theme="light"] main {
+    min-height: 0; padding: 20px max(12px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
+  }
+  main:has(> #page-settings > #sub-tasks:not(.hidden)) { display: block; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
+  #sub-tasks { min-height: 0; display: block; }
+  #sub-tasks .composer { margin: 0 auto; padding: 0; max-width: 680px; }
+  #sub-tasks .hero-row { margin-bottom: 16px; text-align: left; justify-content: flex-start; align-items: flex-start; }
+  #sub-tasks .hero { font-size: 20px; line-height: 1.5; text-align: left; text-wrap: balance; }
+  #sub-tasks .cmp-box { padding: 0 12px 12px; border-radius: 16px; }
+  #sub-tasks .cmp-pills { padding: 8px 0; gap: 8px; }
+  #sub-tasks .cmp-pills .cmp-wd { flex-basis: 100%; }
+  #sub-tasks .cmp-wd input { min-height: 44px; font-size: 16px; }
+  #sub-tasks .cmp-wd .ghost.small { min-height: 44px; padding-inline: 8px; font-size: 13px; }
+  #sub-tasks #row-git { max-width: 100%; }
+  #sub-tasks #f-git-rev { font-size: 16px; min-height: 44px; max-width: 100%; }
+  #sub-tasks .cmp-box textarea { min-height: 132px; font-size: 16px; line-height: 1.65; padding: 12px 0; }
+  #sub-tasks .cmp-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; gap: 8px; padding-top: 8px; }
+  #sub-tasks .cmp-mode, #sub-tasks .type-wrap { min-width: 0; max-width: 100%; }
+  #sub-tasks .cmp-mode { grid-column: 1; grid-row: 1; }
+  #sub-tasks .cmp-mode .type-pick { min-height: 44px; max-width: 100%; padding-inline: 10px; font-size: 13px; }
+  #sub-tasks .tp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  #sub-tasks .cmp-bar .att-strip { grid-column: 2; grid-row: 1; margin: 0; }
+  #sub-tasks .cmp-bar .att-strip > .ghost.small { min-width: 44px; min-height: 44px; padding: 8px; }
+  #sub-tasks .att-strip .ghost span { display: none; }
+  #sub-tasks .cmp-send { display: contents; }
+  #sub-tasks .cmp-send .cmp-sel { display: none; }
+  #sub-tasks #btn-create.round { grid-column: 3; grid-row: 1; width: 44px; height: 44px; }
+  #create-msg { grid-column: 1 / -1; grid-row: 2; overflow-wrap: anywhere; }
+  #create-msg:empty { display: none; }
+  #sub-tasks .cmp-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; }
+  #sub-tasks .cmp-quick > button { min-height: 44px; padding: 8px; justify-content: flex-start; border: 1px solid var(--border); border-radius: 12px; font-size: 13px; background: var(--panel); }
+  #sub-tasks #f-advanced { margin-top: 16px; }
+  #sub-tasks #f-advanced > summary { min-height: 44px; display: flex; align-items: center; justify-content: center; }
+  #sub-tasks .adv-body input, #sub-tasks .adv-body select, #sub-tasks .adv-body textarea { font-size: 16px; }
+  #sub-tasks.mobile-has-workspaces:not(.mobile-composing) > .composer { display: none; }
+  #sub-tasks.mobile-has-workspaces:not(.mobile-composing) > .mobile-workspaces { display: block; }
+  #sub-tasks.mobile-has-workspaces.mobile-composing .mobile-workspaces-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 0 12px; padding: 8px 0; border: 0; }
+  .mobile-workspaces-back .ico { transform: rotate(180deg); }
+  .mobile-workspaces-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
+  .mobile-workspaces-head h2 { margin: 0; font-size: 18px; line-height: 1.5; }
+  .mobile-workspaces-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
+  .mobile-workspaces-head button { min-height: 44px; flex: none; padding: 8px 12px; }
+  #mobile-workspace-list { display: grid; gap: 12px; }
+  .mobile-workspace-card { position: relative; min-width: 0; }
+  .mobile-workspace { position: relative; min-width: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
+  .mobile-workspace > summary { display: flex; align-items: center; gap: 12px; min-height: 92px; padding: 16px 68px 16px 12px; list-style: none; cursor: pointer; }
+  .mobile-workspace > summary::-webkit-details-marker { display: none; }
+  .mobile-folder { flex: none; width: 24px; height: 24px; color: var(--muted); }
+  .mobile-workspace-copy, .mobile-task-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
+  .mobile-workspace-copy b, .mobile-task-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; color: var(--text); }
+  .mobile-workspace-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font: 12px/1.5 var(--mono); }
+  .mobile-workspace-copy small, .mobile-task-copy small { color: var(--muted); font-size: 12px; }
+  .mobile-workspace-total { color: var(--muted); font-size: 13px; }
+  .mobile-workspace-chevron { flex: none; width: 16px; height: 16px; color: var(--muted); }
+  .mobile-workspace[open] > summary .mobile-workspace-chevron { transform: rotate(90deg); }
+  .mobile-workspace-new { position: absolute; top: 24px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border); border-radius: 10px; }
+  .mobile-workspace-tasks { border-top: 1px solid var(--border); padding: 4px 12px; }
+  .mobile-task { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 72px; padding: 12px 4px; text-align: left; border: 0; border-radius: 8px; background: transparent; }
+  .mobile-task + .mobile-task { border-top: 1px solid var(--border); }
+  .mobile-task .chip, .mobile-task .sbadge { flex: none; max-width: 40%; font-size: 11px; white-space: nowrap; }
+  .mobile-task:hover { background: var(--panel2); }
+  .mobile-workspace > summary:focus-visible, .mobile-task:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+}
+@media (max-width: 380px) {
+  .topbar .page-title { display: none; }
+  .mobile-workspace > summary { gap: 8px; padding-left: 12px; }
+  .mobile-folder { width: 20px; height: 20px; }
+  .mobile-workspace-copy b { font-size: 14px; }
+}
+
+/* Long-goal card: keep the form readable at desktop widths and stack it cleanly on narrow panes. */
+#page-settings > #sub-overview .ov-goal-card {
+  padding: 20px 22px 22px;
+  border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
+  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, var(--panel)), var(--panel) 62%);
+}
+#page-settings > #sub-overview .ov-goal-card .panel-head {
+  min-height: 0;
+  margin-bottom: 18px;
+  padding-bottom: 14px;
+  align-items: flex-start;
+}
+#page-settings > #sub-overview .ov-goal-card .panel-head h2 {
+  font-size: 16px;
+  line-height: 1.35;
+  letter-spacing: -.01em;
+}
+#page-settings > #sub-overview .ov-goal-caption {
+  max-width: 42em;
+  margin-top: 6px;
+  line-height: 1.55;
+}
+#page-settings > #sub-overview .ov-goal-empty {
+  grid-template-columns: minmax(190px, .9fr) minmax(300px, 1.55fr) auto;
+  gap: 12px;
+  align-items: end;
+}
+#page-settings > #sub-overview .ov-goal-field { gap: 7px; }
+#page-settings > #sub-overview .ov-goal-field label {
+  font-size: 12px;
+  font-weight: 550;
+  line-height: 1.35;
+}
+#page-settings > #sub-overview .ov-goal-empty input,
+#page-settings > #sub-overview .ov-goal-empty textarea {
+  box-sizing: border-box;
+  min-height: 44px;
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--bg) 82%, var(--panel));
+  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
+}
+#page-settings > #sub-overview .ov-goal-empty textarea {
+  height: 58px;
+  min-height: 58px;
+  line-height: 1.5;
+}
+#page-settings > #sub-overview .ov-goal-empty input:focus,
+#page-settings > #sub-overview .ov-goal-empty textarea:focus {
+  background: var(--panel);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
+}
+#page-settings > #sub-overview .ov-goal-empty button {
+  min-height: 42px;
+  padding-inline: 18px;
+  border-radius: 10px;
+  box-shadow: 0 5px 12px color-mix(in srgb, var(--accent) 20%, transparent);
+}
+@media (max-width: 760px) {
+  #page-settings > #sub-overview .ov-goal-empty {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  }
+  #page-settings > #sub-overview .ov-goal-empty .ov-goal-field:nth-child(2) { grid-column: 1 / -1; }
+  #page-settings > #sub-overview .ov-goal-empty button { grid-column: 1 / -1; justify-self: start; }
+}
+@media (max-width: 520px) {
+  #page-settings > #sub-overview .ov-goal-card { padding: 16px; }
+  #page-settings > #sub-overview .ov-goal-empty { grid-template-columns: 1fr; gap: 10px; }
+  #page-settings > #sub-overview .ov-goal-empty .ov-goal-field:nth-child(2),
+  #page-settings > #sub-overview .ov-goal-empty button { grid-column: auto; }
+  #page-settings > #sub-overview .ov-goal-empty button { width: 100%; }
+}