/* SM 工作台 · 晴空像素主题
   视觉规则与验收：../UI视觉规范/README.md
   本文件在 style.css 之后加载；不改变 DOM 锚点、事件、数据与断点。
   像素字体只用于短标签，所有项目/灵感正文保持系统字体。 */

@font-face {
  font-family: "Fusion Pixel 12";
  src: url("fonts/fusion-pixel-12px-zh-hans.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #30557f;
  --ink-strong: #203c61;
  --ink-mid: #3f6798;
  --ink-soft: #dceafa;
  --ink-faint: #edf5ff;
  --bg: #f7f6ee;
  --card: #fffefa;
  --line: #c9d8e9;
  --line-strong: #7892ae;
  --text: #24344b;
  --text-2: #435a73;
  --text-3: #60748b;
  --danger: #a63e44;
  --danger-soft: #ffe7e5;
  --warn: #835322;
  --warn-soft: #fff0c9;
  --ok: #24624e;
  --ok-soft: #dbf3e6;
  --radius: 0;
  --radius-sm: 0;
  --shadow: 4px 4px 0 #c8d7e6;
  --px-sky: #dceefa;
  --px-sky-deep: #bcdcf0;
  --px-mint: #c5edda;
  --px-coral: #f3aa82;
  --px-lemon: #ffe39a;
  --px-paper: #fffefa;
  --px-border: #405d81;
  --px-focus: #d15f35;
  --px-font: "Fusion Pixel 12", "PingFang SC", sans-serif;
}

html, body { background: var(--bg); color: var(--text); }
body { font-size: 14.5px; }
button, input, select, textarea { color: inherit; }
button:focus-visible, [role="button"]:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [contenteditable="true"]:focus-visible {
  outline: 3px solid var(--px-focus);
  outline-offset: 2px;
}
::selection { background: #ffe39a; color: var(--text); }

/* 外框与棋盘地面：纹理只在空白区域，绝不覆盖正文。 */
.view {
  background-color: var(--bg);
  background-image: linear-gradient(#e7ebea 1px, transparent 1px),
    linear-gradient(90deg, #e7ebea 1px, transparent 1px);
  background-size: 24px 24px;
}
.view-inner { padding-bottom: 14px; }
.sidebar {
  background: var(--px-sky);
  color: var(--text);
  border-right: 3px solid var(--px-border);
  box-shadow: inset -6px 0 0 #eef8ff;
}
.brand { align-items: center; padding: 7px 18px 17px; gap: 10px; }
.brand::before {
  content: ""; width: 20px; height: 20px; flex: 0 0 auto;
  background: var(--px-coral);
  border: 2px solid var(--px-border);
  box-shadow: 4px 4px 0 #a9c9db, inset 5px 5px 0 var(--px-lemon);
}
.brand-name, .login-title, .topbar-title, .section-title, .cfg-section-head,
.modal-title, .stat-num, .vstrip-ver, .vv-title {
  font-family: var(--px-font);
  font-weight: 400;
}
.brand-name { color: var(--ink-strong); font-size: 20px; letter-spacing: 1px; }
.brand-sub { color: var(--text-2); font-size: 11px; letter-spacing: .5px; }
.nav-group { margin-top: 18px; }
.nav-group-title {
  color: var(--text-2); font-family: var(--px-font);
  font-size: 12px; letter-spacing: .5px; padding-bottom: 7px;
}
.nav-item {
  color: var(--text-2); border-left: 0; border-right: 4px solid transparent;
  font-size: 14px; font-weight: 600; margin: 3px 8px; width: calc(100% - 16px);
  padding: 0 12px; min-height: 46px;
}
.nav-item:hover { color: var(--ink-strong); background: #f5fbff; }
.nav-item.active {
  color: var(--ink-strong); background: var(--px-lemon);
  border: 2px solid var(--px-border); border-right-width: 4px;
  box-shadow: 3px 3px 0 #9fbcd1;
}
.nav-add { color: var(--ink); }
.nav-count { color: var(--text-2); }
.nav-dot { border-radius: 0; border: 1px solid var(--px-border); }
.side-foot { border-top: 2px solid #a9c5d9; padding-top: 16px; }
.side-action {
  background: #f8fcff; color: var(--ink-strong);
  border: 2px solid var(--px-border); border-radius: 0;
  box-shadow: 3px 3px 0 #9fbcd1; font-weight: 600;
}
.side-action:hover { background: #fff; color: var(--ink-strong); border-color: var(--px-border); }
.side-action.primary, .side-action.primary:hover {
  background: var(--px-mint); color: var(--ink-strong); border-color: var(--px-border);
}
.side-action-exit { color: var(--text-2); }
.side-action:active, .btn:active, .head-act:active {
  transform: translate(2px, 2px); box-shadow: 1px 1px 0 #9fbcd1; opacity: 1;
}

.topbar {
  background: var(--px-paper); border-bottom: 3px solid var(--px-border);
  min-height: 62px;
}
.topbar-title { font-size: 19px; color: var(--ink-strong); }
.role-badge { border: 1px solid var(--warn); border-radius: 0; font-weight: 600; }
.icon-btn { border: 2px solid var(--line-strong); border-radius: 0; background: #fff; }
.icon-btn:hover { background: var(--px-lemon); color: var(--ink-strong); }
.tabbar { background: var(--px-paper); border-top: 3px solid var(--px-border); }
.tab { color: var(--text-2); min-height: 60px; font-weight: 600; }
.tab.active { color: var(--ink-strong); background: var(--px-lemon); box-shadow: inset 0 4px 0 var(--px-border); }
.tab-txt { font-size: 12.5px; }
.fab {
  border: 3px solid var(--px-border); border-radius: 0;
  background: var(--px-coral); color: var(--ink-strong);
  box-shadow: 5px 5px 0 #9fbcd1;
}
.fab:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 #9fbcd1; }

/* 基础组件：方形像素边框、实色层级、可见的按下反馈。 */
.card, .cfg-card, .list, .empty, .px-panel {
  background: var(--px-paper); border: 2px solid var(--px-border);
  border-radius: 0; box-shadow: var(--shadow);
}
.card { padding: 18px; }
.card-click:hover { border-color: var(--ink-strong); box-shadow: 6px 6px 0 #b4cfdf; }
.card-click:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #b4cfdf; }
.card-pinned { border-color: #a7662f; box-shadow: 4px 4px 0 var(--px-lemon); }
.card-title {
  color: var(--ink-strong); font-size: 16px; font-weight: 700;
  line-height: 1.5; white-space: normal; overflow: visible;
  text-overflow: clip; overflow-wrap: anywhere;
}
.card-meta { font-size: 12.5px; color: var(--text-2); }
.card-body { margin-top: 13px; }
.stat-row { gap: 12px 20px; }
.stat-num { font-size: 22px; color: var(--ink-strong); }
.stat-lbl { font-size: 12px; color: var(--text-2); }
.bar, .px-progress {
  background: #e6eef6; border: 1px solid var(--px-border);
  height: 12px; border-radius: 0; overflow: hidden;
}
.bar-fill { background: repeating-linear-gradient(90deg, #7cc8aa 0 10px, #98dbbc 10px 20px); }
.tag, .pick, .chip, .chip-filter, .px-badge {
  border-radius: 0; border: 1px solid var(--px-border);
  font-weight: 600;
}
.tag { padding: 2px 8px; font-size: 11.5px; background: var(--px-sky); color: var(--ink-strong); }
.tag-line { background: #fff; }
.tag-ok { background: var(--ok-soft); color: var(--ok); border-color: #60a486; }
.tag-warn { background: var(--warn-soft); color: var(--warn); border-color: #c38b46; }
.tag-danger { background: var(--danger-soft); color: var(--danger); border-color: #c66b70; }
.tag-mute { background: #e9eef3; color: var(--text-2); border-color: #9eb0c2; }
.pin-badge { color: #a7662f; }

.btn, .head-act, .px-button {
  border: 2px solid var(--px-border); border-radius: 0;
  font-weight: 700; box-shadow: 3px 3px 0 #b4c6d5;
  transition: background .12s, transform .12s, box-shadow .12s;
}
.btn-primary, .head-act--primary, .px-button--primary {
  background: var(--px-mint); color: var(--ink-strong);
}
.btn-primary:hover, .head-act--primary:hover, .px-button--primary:hover {
  background: #ade3c7; color: var(--ink-strong);
}
.btn-ghost, .head-act { background: #fff; color: var(--ink-strong); }
.btn-ghost:hover, .head-act:hover { background: var(--px-lemon); color: var(--ink-strong); }
.btn-danger, .head-act--danger { background: var(--danger-soft); color: var(--danger); border-color: #ad6266; }
.btn-danger:hover, .head-act--danger:hover { background: #ffd5d2; }
.btn:active { opacity: 1; }
.btn-sm { min-height: 36px; }
.section-title { font-size: 18px; color: var(--ink-strong); }
.section-title::before, .cfg-section-head::before {
  content: ""; width: 9px; height: 9px; flex: 0 0 auto;
  background: var(--px-coral); border: 1px solid var(--px-border);
  box-shadow: 3px 3px 0 var(--px-lemon);
}
.section-note, .field-hint { color: var(--text-2); }

/* 标签、清单和表单是信息密集区；这里减少装饰，靠留白和描边建立层级。 */
.cat-tabs, .seg, .rt-toolbar {
  background: var(--px-sky); border: 2px solid var(--px-border);
  border-radius: 0;
}
.cat-tabs { max-width: 370px; }
.cat-tab, .seg-btn { border-radius: 0; color: var(--text-2); font-weight: 700; }
.cat-tab.active, .seg-btn.active {
  background: var(--px-lemon); color: var(--ink-strong);
  box-shadow: inset 0 -3px 0 #d4ae5e;
}
.cat-tab-num, .cat-tab.active .cat-tab-num { color: var(--text-2); }
.chip-filter { background: #fff; color: var(--text-2); }
.chip-filter.on, .pick.on { background: var(--px-lemon); color: var(--ink-strong); border-color: var(--px-border); }
.chip-filter:hover, .pick:hover, .chip-add:hover { background: #fff7d9; }
.filter-note { color: var(--text-2); }
.link-btn { color: var(--ink); font-weight: 700; }
.list { overflow: hidden; }
.row { border-bottom: 1px solid var(--line-strong); gap: 12px; }
.row:nth-child(even) { background: #f6faff; }
.row-title { font-size: 14.5px; font-weight: 600; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.row-sub { font-size: 13px; color: var(--text-2); line-height: 1.65; }
.check { border: 2px solid var(--px-border); border-radius: 0; }
.check.on { background: var(--px-mint); color: var(--ink-strong); border-color: var(--px-border); }
.empty { border-style: dashed; color: var(--text-2); font-size: 14px; }
.vstrip, .vstrip-more {
  background: var(--px-paper); border: 2px solid var(--px-border);
  border-radius: 0; box-shadow: 3px 3px 0 #c8d7e6;
}
.vstrip:hover, .vstrip-more:hover { background: #fff9e8; border-color: var(--px-border); }
.vstrip-more.open { background: var(--px-lemon); }
.vstrip-ver { font-size: 16px; }
.vstrip--tiny { background: #f5f8fc; }
.vstrip--tiny .vstrip-ver { font-family: var(--px-font); font-size: 13px; color: var(--text-2); }
.vstrip-core, .vstrip-date, .vbar-stats, .vbar-hint { color: var(--text-2); }
.vstrip-core { font-size: 13px; }
.vwrap--grp { align-items: stretch; }
.cfg-section-head { font-size: 17px; border-left: 0; padding-left: 0; letter-spacing: 0; }
.cfg-section-note { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; }
.cfg-name { color: var(--ink-strong); font-size: 16px; font-weight: 700; }
.cfg-desc { color: var(--text-2); font-size: 13px; }
.chip { background: #fff; color: var(--text); }
.chip-btn, .chip-x { border-radius: 0; }
.chip-btn:hover { background: var(--px-lemon); }
.chip-add { border: 2px dashed var(--px-border); border-radius: 0; background: #fff; }
.field-label { color: var(--text-2); font-weight: 700; }
.input, .select, .textarea, .login-input {
  background: #fff; color: var(--text);
  border: 2px solid var(--line-strong); border-radius: 0;
}
.input:focus, .select:focus, .textarea:focus, .login-input:focus {
  border-color: var(--px-border); box-shadow: 3px 3px 0 #b7d9ea;
}
.textarea { font-size: 14.5px; }

/* 内容优先：灵感卡片与查看页使用连续阅读字体。 */
.card-idea { background: #fffefb; }
.card-idea .card-title { font-size: 16.5px; }
.idea-excerpt {
  color: var(--text); font-size: 15px; line-height: 1.8;
  max-height: 7.2em; overflow-wrap: anywhere;
}
.iv-title { color: var(--ink-strong); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; font-weight: 700; }
.iv-content, .iv-content strong, .vv-core, .vv-text, .vv-port-note {
  color: var(--text); overflow-wrap: anywhere;
}
.iv-content--long { font-size: 16px; line-height: 1.9; }
.iv-content--mid { font-size: 17px; line-height: 1.9; }
.iv-content--short { color: var(--text); }
.iv-where { color: var(--ink); font-weight: 700; }
.rt blockquote { border-left: 3px solid var(--px-border); }

/* 弹窗、灵感双层流程保留原尺寸与按钮位置。 */
.modal-layer { background: rgba(25, 45, 67, .48); }
.modal {
  background: var(--px-paper); border: 3px solid var(--px-border);
  border-radius: 0; box-shadow: 8px 8px 0 rgba(28, 54, 79, .25);
}
.modal-head { background: var(--px-sky); border-bottom: 2px solid var(--px-border); }
.modal-title { font-size: 18px; color: var(--ink-strong); }
.modal-close { border-radius: 0; color: var(--ink-strong); }
.modal-close:hover { background: var(--px-lemon); }
.modal-body { background: var(--px-paper); }
.modal-foot { background: #f5faff; border-top: 2px solid var(--px-border); }
.modal-idea .modal-head, .modal-idea-confirm .modal-head { background: var(--px-sky); }
.modal-idea .modal-title, .modal-idea-confirm .modal-title { color: var(--ink-strong); font-size: 15px; }
.modal-idea .idea-title {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  border-bottom: 2px solid var(--px-border); color: var(--text); font-weight: 700;
}
.modal-idea .idea-text {
  border: 2px solid var(--line-strong); border-radius: 0;
  background: #fff; color: var(--text); font-size: 16px;
  line-height: 1.85; overflow-wrap: anywhere;
}
.modal-idea .idea-text:focus { border-color: var(--px-border); box-shadow: 3px 3px 0 #b7d9ea; }
.rt-toolbar { background: #e8f2fc; }
.rt-btn { border: 1px solid var(--line-strong); border-radius: 0; color: var(--ink-strong); }
.rt-btn:hover { background: var(--px-lemon); border-color: var(--px-border); }
.rt-sep { background: var(--px-border); }
.ic-preview { background: #f4f9ff; border: 2px solid var(--px-border); border-radius: 0; }
.ic-preview-body { color: var(--text); font-size: 14px; }
.vv-title { font-size: 27px; }
.vv-ports { border: 2px solid var(--px-border); border-radius: 0; }
.vv-port { background: #fff; }
.vv-port:nth-child(even) { background: #f5faff; }
.vv-item { background: #edf5ff; border-left: 3px solid var(--px-border); border-radius: 0; }
.vv-item-dot { border-radius: 0; }

.toast { border: 2px solid var(--px-border); border-radius: 0; background: var(--ink-strong); box-shadow: 4px 4px 0 #a9c5d9; }
.banner { border: 2px solid #be9150; border-radius: 0; }
.banner-info { border-color: var(--px-border); }

/* 登录页也属于同一套视觉语言。 */
.login-layer {
  background-color: #e3f1fb;
  background-image: linear-gradient(#d2e5f1 1px, transparent 1px),
    linear-gradient(90deg, #d2e5f1 1px, transparent 1px);
  background-size: 24px 24px;
}
.login-box {
  max-width: 380px; background: var(--px-paper);
  border: 3px solid var(--px-border); border-radius: 0;
  box-shadow: 8px 8px 0 #abc9db; padding: 35px 28px 27px;
}
.login-title { font-size: 28px; letter-spacing: 1px; color: var(--ink-strong); }
.login-sub { color: var(--text-2); font-size: 13px; }
.login-btn { background: var(--px-mint); color: var(--ink-strong); }

@media (max-width: 1023px) {
  .view { padding: 16px; }
  .view-inner { padding-bottom: 88px; }
  .topbar { min-height: 58px; }
  .topbar-title { font-size: 16px; }
  .cat-tabs { max-width: none; }
  .btn-sm { min-height: 40px; }
  .modal-idea .rt-btn { border-radius: 0; }
  .modal-idea .idea-text { font-size: 16px; }
  .iv-content--long { font-size: 16px; }
}
@media (max-width: 699px) {
  .view { padding: 14px; }
  .cards { gap: 16px; }
  .card { padding: 15px; }
  .card-title { font-size: 16px; }
  .card-idea .card-title { font-size: 16px; }
  .idea-excerpt { font-size: 15px; }
  .modal { box-shadow: 4px 4px 0 rgba(28, 54, 79, .25); }
  .modal-layer { padding: 10px; }
  .modal-idea .modal-title { font-size: 13px; }
  .modal-idea .head-act { padding: 0 8px; font-size: 12px; }
  .modal-idea .idea-title { font-size: 19px; }
  .modal-idea .rt-toolbar { gap: 3px; padding: 3px; }
  .modal-idea .rt-btn { min-height: 34px; }
  .modal-idea-view .modal-foot .btn { min-height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* 样例图对齐：蓝天像素世界、橙/蓝/绿项目卡、彩色统计块、草地边缘。
   场景只占导航、卡片首部和空状态；真实正文仍在纯色纸面上。 */
.view { background: #fff9eb; background-image: none; }
.view-inner::after {
  content: ""; display: block; height: 110px; margin: 24px -20px -14px;
  background: url("pixel-art/footer-world.png") center bottom / 100% auto no-repeat;
  image-rendering: pixelated;
}
.topbar {
  min-height: 178px; align-items: flex-end; padding: 0 28px 22px;
  background: #b9e5ff url("pixel-art/sky-world.png") center 69% / cover no-repeat;
  border-bottom: 3px solid #86b4cf;
}
.topbar-title {
  font-size: 46px; line-height: 1.1; color: #102b56;
  font-weight: 700; text-shadow: 2px 2px 0 #fff9e8;
}
main:has(.cat-tabs) .topbar-title::before,
main:has(.view-inner > .toolbar + .empty) .topbar-title::before {
  content: ""; display: inline-block; width: 50px; height: 50px;
  vertical-align: middle; margin-right: 10px;
  background: url("pixel-art/sprout-cat.png") center / 140% no-repeat;
  image-rendering: pixelated;
}
main:has(.view-inner > .toolbar + .empty) .topbar-title::before {
  background-image: url("pixel-art/icons/lightbulb.svg"); background-size: 35px;
}
.sidebar {
  background: linear-gradient(180deg, #bde5fb 0%, #eaf7fb 32%, #fff9e9 100%);
  border-right: 3px solid #8bbad3; box-shadow: none;
}
.brand { background: #d5f4e7; border-bottom: 3px solid #8bbad3; margin: -18px 0 5px; padding: 24px 14px 17px; }
.brand::before {
  width: 32px; height: 32px; background: url("pixel-art/sprout-cat.png") center / 150% no-repeat;
  border: 0; box-shadow: none;
}
.brand-name { font-size: 18px; font-family: var(--px-font); }
.nav-group-title { font-size: 15px; color: #446c91; }
.nav-item { font-size: 14.5px; color: #153a68; }
.nav-item.active { background: #b8eed4; border-color: #55b790; box-shadow: 3px 3px 0 #aad4cf; }
.nav-item[data-id="pj1"] .nav-dot,
.nav-item[data-id="pj2"] .nav-dot,
.nav-item[data-id="pj3"] .nav-dot { display: none; }
.nav-item[data-id="pj1"]::before,
.nav-item[data-id="pj2"]::before,
.nav-item[data-id="pj3"]::before {
  content: ""; width: 23px; height: 23px; flex: 0 0 auto;
  background: center / 145% no-repeat;
  image-rendering: pixelated;
}
.nav-item[data-id="pj1"]::before { background-image: url("pixel-art/sprout-cat.png"); }
.nav-item[data-id="pj2"]::before { background-image: url("pixel-art/gamepad.png"); }
.nav-item[data-id="pj3"]::before { background-image: url("pixel-art/ringed-planet.png"); }
.nav-item[data-id="pj_life"] .nav-ico,
.nav-item[data-id="pj_personal"] .nav-ico,
.nav-item[data-id="pj_ideas"] .nav-ico,
.nav-item[data-act="go-config"] .nav-ico {
  background: center / contain no-repeat; image-rendering: pixelated;
}
.nav-item[data-id="pj_life"] .nav-ico { background-image: url("pixel-art/icons/leaf.svg"); }
.nav-item[data-id="pj_personal"] .nav-ico { background-image: url("pixel-art/icons/folder.svg"); }
.nav-item[data-id="pj_ideas"] .nav-ico { background-image: url("pixel-art/icons/lightbulb.svg"); }
.nav-item[data-act="go-config"] .nav-ico { background-image: url("pixel-art/icons/settings-cog.svg"); }
.nav-item[data-id="pj_life"] .nav-ico .ico,
.nav-item[data-id="pj_personal"] .nav-ico .ico,
.nav-item[data-id="pj_ideas"] .nav-ico .ico,
.nav-item[data-act="go-config"] .nav-ico .ico { visibility: hidden; }
.side-foot { background: #e3f7e6; border-top: 3px solid #8ccdb0; }
.side-action.primary { background: #ffb477; }
.side-action.primary:hover { background: #ffc292; }
.side-action .ico, .icon-btn .ico, .fab .ico { display: none; }
.side-action::before, .icon-btn::before, .fab::before {
  content: ""; display: inline-block; flex: 0 0 auto; width: 19px; height: 19px;
  background: center / contain no-repeat; image-rendering: pixelated;
}
.side-action[data-act="refresh"]::before, #btnRefresh::before { background-image: url("pixel-art/icons/refresh.svg"); }
.side-action[data-act="quick-idea"]::before, .fab::before { background-image: url("pixel-art/icons/lightbulb.svg"); }
.side-action[data-act="logout"]::before, #btnLogoutTop::before { background-image: url("pixel-art/icons/logout.svg"); }
.icon-btn { background: #fffef5; border-color: #6488a8; }

.cards { gap: 18px; }
.cards > .card.card-click[data-act="go-scope"] {
  min-height: 415px; padding: 18px;
  border: 3px solid #e99b68; box-shadow: 5px 5px 0 #b3c1c8;
  background: #fffdf1;
}
.cards > .card.card-click[data-id="pj2"] { border-color: #76b7e7; background: #fafdff; }
.cards > .card.card-click[data-id="pj3"] { border-color: #7ccca8; background: #f8fff8; }
.cards > .card.card-click[data-act="go-scope"] .card-head { min-height: 64px; gap: 10px; }
.cards > .card.card-click[data-act="go-scope"] .card-head::before {
  content: ""; width: 58px; height: 58px; flex: 0 0 auto;
  background: #ffe5ce url("pixel-art/icons/folder.svg") center / 32px no-repeat;
  border: 2px solid #d99666; image-rendering: pixelated;
}
.cards > .card.card-click[data-id="pj1"] .card-head::before {
  background-image: url("pixel-art/sprout-cat.png"); background-size: 125%;
}
.cards > .card.card-click[data-id="pj2"] .card-head::before {
  background-color: #dcedff; background-image: url("pixel-art/gamepad.png");
  background-size: 145%; border-color: #77b7e7;
}
.cards > .card.card-click[data-id="pj3"] .card-head::before {
  background-color: #d9f5e7; background-image: url("pixel-art/ringed-planet.png");
  background-size: 145%; border-color: #7ccca8;
}
.cards > .card.card-click[data-act="go-scope"] .card-head .nav-dot { display: none; }
.cards > .card.card-click[data-act="go-scope"] .card-title {
  font-family: var(--px-font); font-size: 22px; line-height: 1.35; font-weight: 700;
}
.cards > .card.card-click[data-act="go-scope"] .stat-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  margin: 17px 0 13px;
}
.cards > .card.card-click[data-act="go-scope"] .stat {
  min-height: 92px; align-items: center; justify-content: center;
  border: 1px solid #df9b69; background: #ffd8b9; padding: 6px 2px;
}
.cards > .card.card-click[data-act="go-scope"] .stat:nth-child(2) { background: #d5ecff; border-color: #87bcde; }
.cards > .card.card-click[data-act="go-scope"] .stat:nth-child(3) { background: #d2f2df; border-color: #8dcba9; }
.cards > .card.card-click[data-act="go-scope"] .stat-num { font-size: 29px; line-height: 1.05; font-weight: 700; }
.cards > .card.card-click[data-act="go-scope"] .stat-lbl { font-size: 12px; color: #223b5b; }
.cards > .card.card-click[data-act="go-scope"] .bar { margin-top: 13px; height: 10px; border-color: #9eb6c6; background: #e6e8e7; }
.cards > .card.card-click[data-act="go-scope"] .card-meta {
  margin-top: 10px; color: #274363; font-size: 13px;
}
.cards > .card.card-click[data-act="go-scope"] .card-meta::before {
  content: ""; display: inline-block; width: 16px; height: 16px;
  margin-right: 5px; vertical-align: -3px;
  background: url("pixel-art/icons/file-text.svg") center / contain no-repeat;
}
.cards > .card.card-click[data-act="go-scope"] .card-body {
  background: #e3f3ff; border: 1px solid #acd3ea;
  padding: 10px; margin-top: 16px;
}
.cards > .card.card-click[data-act="go-scope"] .card-body .field-label {
  font-size: 13px; color: #173c6a; margin-bottom: 8px;
}
.cards > .card.card-click[data-act="go-scope"] .card-body .row-sub {
  display: block; padding: 5px 7px; background: #fffaf0;
  border: 1px solid #d8e4e7; color: var(--text); font-size: 13px;
}
.cards > .card.card-click[data-act="go-scope"]:not(:has(.card-body))::after {
  content: "暂无灵感"; display: block; margin: 33px auto 0;
  padding-top: 39px; text-align: center; color: #667e95; font-size: 12px;
  background: url("pixel-art/icons/lightbulb.svg") center top / 26px no-repeat;
}
.toolbar .btn-primary, .view-inner > .toolbar:first-child .btn,
.fab { background: #ffa96e; color: #102e55; border-color: #8d513a; box-shadow: 4px 4px 0 #b7bcb7; }
.toolbar .btn-primary:hover, .view-inner > .toolbar:first-child .btn:hover { background: #ffbf88; }
.toolbar .btn { font-family: var(--px-font); font-size: 15px; }
.cat-tabs, .seg { background: #d9efff; border-color: #86b5d0; }
.cat-tab.active, .seg-btn.active {
  background: #fffaf0; color: #c25028; box-shadow: inset 0 -4px 0 #ea8257;
}
.tag, .chip-filter, .pick { border-color: #9abbd0; }
.bar-fill { background: repeating-linear-gradient(90deg, #69c69b 0 10px, #8bdbaf 10px 20px); }

/* 空 Ideas 页按样例保留留白和中心插画。其它空列表不强行占满屏幕。 */
.view-inner > .toolbar + .empty {
  min-height: 340px; display: flex; align-items: flex-end; justify-content: center;
  padding: 210px 18px 38px; font-size: 16px; font-weight: 700;
  border: 0; box-shadow: none; background: url("pixel-art/ideas-empty.png") center 24px / 210px no-repeat;
}

.tabbar { background: #e2f8e8; border-top-color: #65baa0; }
.tab { min-height: 64px; color: #173d68; }
.tab.active { background: #ffaf75; box-shadow: inset 0 4px 0 #aa6749; }
.tab-ico { width: 24px; height: 24px; margin: 0 auto; background: center / contain no-repeat; image-rendering: pixelated; }
.tab-ico .ico { visibility: hidden; }
.tab[data-key="work"] .tab-ico { background-image: url("pixel-art/icons/home.svg"); }
.tab[data-key="pj_life"] .tab-ico { background-image: url("pixel-art/icons/leaf.svg"); }
.tab[data-key="pj_personal"] .tab-ico { background-image: url("pixel-art/icons/folder.svg"); }
.tab[data-key="pj_ideas"] .tab-ico { background-image: url("pixel-art/icons/lightbulb.svg"); }
.tab[data-key="config"] .tab-ico { background-image: url("pixel-art/icons/settings-cog.svg"); }
.tab-txt { font-family: var(--px-font); font-size: 13px; }

.section-title {
  display: flex; min-height: 42px; padding: 7px 12px;
  background: #e0f5e7; border: 2px solid #95c9ad;
  color: #183b62; font-size: 17px;
}
.row-title { font-size: 15.5px; }
.row-sub { font-size: 13.5px; }
.login-layer { background: #b9e5ff url("pixel-art/sky-world.png") center / cover no-repeat; }
.login-box { background: #fff9eb; border-color: #6e9fba; }
.login-title::before {
  content: ""; display: block; width: 74px; height: 74px;
  margin: 0 auto 8px; background: url("pixel-art/sprout-cat.png") center / 140% no-repeat;
  image-rendering: pixelated;
}
.login-btn { background: #ffa96e; border-color: #8d513a; }
.login-btn:hover { background: #ffbf88; }

@media (max-width: 1023px) {
  .topbar { min-height: 145px; padding: 24px 14px 18px; align-items: flex-start; background-position: 77% 72%; }
  .topbar-title { font-size: 34px; flex: 1; line-height: 1.2; }
  .view { padding: 14px; }
  .view-inner::after { height: 68px; margin: 22px -14px -14px; }
  .cards > .card.card-click[data-act="go-scope"] { min-height: 0; }
  .cards > .card.card-click[data-act="go-scope"] .card-head::before { width: 58px; height: 58px; }
  .cards > .card.card-click[data-act="go-scope"] .card-title { font-size: 21px; }
  .cards > .card.card-click[data-act="go-scope"] .stat { min-height: 82px; }
  .cards > .card.card-click[data-act="go-scope"]:not(:has(.card-body))::after { margin-top: 18px; }
  main:has(.cat-tabs) .topbar-title::before,
  main:has(.view-inner > .toolbar + .empty) .topbar-title::before {
    width: 34px; height: 34px; margin-right: 5px;
  }
}
@media (max-width: 699px) {
  .topbar { min-height: 145px; }
  .topbar-title { font-size: 31px; max-width: calc(100% - 90px); }
  .icon-btn { background: rgba(255,253,241,.88); min-width: 40px; }
  .cards > .card.card-click[data-act="go-scope"] { padding: 14px; }
  .cards > .card.card-click[data-act="go-scope"] .card-head { min-height: 56px; }
  .cards > .card.card-click[data-act="go-scope"] .card-head::before { width: 54px; height: 54px; }
  .cards > .card.card-click[data-act="go-scope"] .stat-row { margin: 12px 0 10px; }
  .cards > .card.card-click[data-act="go-scope"] .stat { min-height: 72px; }
  .cards > .card.card-click[data-act="go-scope"] .stat-num { font-size: 26px; }
  .cards > .card.card-click[data-act="go-scope"] .stat-lbl { font-size: 11.5px; }
  .view-inner > .toolbar + .empty { min-height: 320px; background-size: 190px; padding-top: 200px; }
}

/* 超宽电脑屏：内容随可用空间扩展，但正文仍保持可读的行宽。
   横幅以固定场景尺寸靠右放置，避免 cover 在 3K/4K 屏把角色放大裁掉。 */
@media (min-width: 1800px) {
  html, body { font-size: 16px; }
  .app { grid-template-columns: 300px minmax(0, 1fr); }
  .brand { padding: 28px 20px 21px; }
  .brand-name { font-size: 21px; }
  .brand-sub { font-size: 12px; }
  .nav-group-title { font-size: 16px; padding-left: 24px; }
  .nav-item { min-height: 52px; padding: 0 24px; font-size: 16px; }
  .nav-count { font-size: 13px; }
  .side-action { min-height: 48px; font-size: 14px; }
  .topbar {
    min-height: 210px;
    padding: 0 46px 26px;
    position: relative;
    background: linear-gradient(180deg, #a8dcfc 0%, #dbf0fc 62%, #fff9eb 100%);
  }
  .topbar::before {
    content: ""; position: absolute; inset: 0;
    background-image: url("pixel-art/sky-world.png");
    background-position: right calc(100% + 20px);
    background-size: 1700px auto;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 65%);
    mask-image: linear-gradient(90deg, transparent 35%, #000 65%);
    pointer-events: none;
  }
  .topbar-title { position: relative; font-size: 52px; }
  .view { padding: 32px clamp(40px, 3vw, 88px); }
  .view-inner { max-width: 2400px; }
  .view-inner::after { height: 260px; margin-top: 30px; }
  .toolbar .btn { min-height: 44px; font-size: 17px; }
  .cat-tabs { max-width: 440px; }
  .cat-tab { min-height: 46px; font-size: 16px; }
  .cat-tab-num { font-size: 13px; }
  .seg-btn { min-height: 42px; font-size: 15px; }
  .vbar-stats, .vbar-hint { font-size: 14px; }
  .vstrip { min-height: 54px; padding: 10px 16px; }
  .vstrip-ver { font-size: 18px; }
  .vstrip-core { font-size: 15px; }
  .vstrip-date { font-size: 14px; }
  .vstrip--tiny .vstrip-ver { font-size: 15px; }
  .vstrip--tiny .vstrip-date { font-size: 13px; }
  .vstrip-more { min-height: 54px; font-size: 14px; }
  .card-title { font-size: 18px; }
  .card-meta { font-size: 14px; }
  .cards-ver .vwrap--full .card-meta { max-width: 82ch; line-height: 1.75; overflow-wrap: anywhere; }
  .row-title { font-size: 16px; }
  .row-sub { font-size: 14px; }
  .tag { font-size: 13px; }
  .cards > .card.card-click[data-act="go-scope"] .card-title { font-size: 24px; }
  .cards > .card.card-click[data-act="go-scope"] .stat-num { font-size: 32px; }
  .cards > .card.card-click[data-act="go-scope"] .card-body .row-sub { font-size: 15px; }
}

/* 第二版：像素冒险手账。只改现有元素的外观，不改功能侧的版式和事件锚点。 */
:root {
  --px-game-ink: #354e70;
  --px-game-shadow: #adc2d5;
  --px-game-cream: #fff8e9;
  --px-game-gold: #ffe5a1;
  --px-game-violet: #eee5f8;
}

/* 吉气崽：从用户提供的火焰少年标识提炼原创像素角色，仅用于该项目。 */
.nav-item[data-id="pj1"]::before {
  width: 28px; height: 28px;
  background-image: url("pixel-art/jqz-mascot-v2.png");
  background-size: contain;
}
.cards > .card.card-click[data-id="pj1"] .card-head::before {
  background-color: #fff0d6;
  background-image: url("pixel-art/jqz-mascot-v2.png");
  background-size: contain;
  border-color: #d38953;
}
.app:has(.nav-item[data-id="pj1"].active) .topbar-title::before {
  background-image: url("pixel-art/jqz-mascot-v2.png");
  background-size: contain;
}

/* 三种动漫意象以原创像素小物呈现：手里剑、符纸、紫藤刀。 */
.nav-item[data-act="go-today"] .nav-ico,
.nav-item[data-act="go-today-hot"] .nav-ico,
.nav-item[data-id="pj_life"] .nav-ico {
  background-position: center; background-size: contain; background-repeat: no-repeat;
  image-rendering: pixelated;
}
.nav-item[data-act="go-today"] .nav-ico { background-image: url("pixel-art/icons/shinobi-star.svg"); }
.nav-item[data-act="go-today-hot"] .nav-ico { background-image: url("pixel-art/icons/cursed-charm.svg"); }
/* v24：历史归档 —— 收纳箱就用 folder */
.nav-item[data-act="go-today-hist"] .nav-ico { background-image: url("pixel-art/icons/folder.svg"); }
.nav-item[data-id="pj_life"] .nav-ico { background-image: url("pixel-art/icons/wisteria-blade.svg"); }
.nav-item[data-act="go-today"] .nav-ico .ico,
.nav-item[data-act="go-today-hot"] .nav-ico .ico,
.nav-item[data-act="go-today-hist"] .nav-ico .ico { visibility: hidden; }
.tab[data-key="today"] .tab-ico { background-image: url("pixel-art/icons/shinobi-star.svg"); }
.today-switch[data-act="go-today"] .nav-ico,
.today-switch[data-act="go-today-hot"] .nav-ico,
.today-switch[data-act="go-today-hist"] .nav-ico {
  background-position: center; background-size: contain; background-repeat: no-repeat;
  image-rendering: pixelated;
}
.today-switch[data-act="go-today"] .nav-ico { background-image: url("pixel-art/icons/shinobi-star.svg"); }
.today-switch[data-act="go-today-hot"] .nav-ico { background-image: url("pixel-art/icons/cursed-charm.svg"); }
.today-switch[data-act="go-today-hist"] .nav-ico { background-image: url("pixel-art/icons/folder.svg"); }
.today-switch .nav-ico .ico { visibility: hidden; }
.nav-group-today { border-bottom: 2px dashed #a9c4d8; padding-bottom: 11px; }
.nav-group-today .nav-group-title { color: #8c4c2d; }
.nav-group-title::before {
  content: ""; display: inline-block; width: 7px; height: 7px;
  margin-right: 8px; vertical-align: 2px;
  background: #efaa70; border: 1px solid var(--px-game-ink);
}
.nav-item.active { position: relative; }
.nav-item.active::after {
  content: ""; position: absolute; left: -8px; top: calc(50% - 5px);
  width: 8px; height: 10px; background: #e9915d;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Today：任务板、版本板与排行榜获得游戏面板层级，正文仍是浅色纸面。 */
.today-head {
  padding: 12px 16px; background: #eaf6ff;
  border: 2px solid var(--px-game-ink);
  box-shadow: 4px 4px 0 var(--px-game-shadow);
  margin-bottom: 20px;
}
.today-title {
  color: var(--ink-strong); font-family: var(--px-font);
  font-size: 27px; font-weight: 400; line-height: 1.2;
}
.today-sub { color: var(--text-2); font-size: 13.5px; }
.today-grid { gap: 20px; }
.today-block {
  overflow: hidden; background: var(--px-paper);
  border: 3px solid var(--px-game-ink);
  box-shadow: 6px 6px 0 var(--px-game-shadow);
}
.today-blk-head {
  min-height: 66px; padding: 8px 16px;
  background: #e2f3ff; border-bottom: 3px solid #9abbd5;
}
.today-block[data-today-block="todo"] .today-blk-head { background: #e5f7ec; border-bottom-color: #8bc9aa; }
.today-block[data-today-block="vers"] .today-blk-head { background: #fff0c7; border-bottom-color: #e0ba74; }
.today-block[data-today-block="hot"] .today-blk-head { background: #f1e8fb; border-bottom-color: #bea3db; }
.today-blk-head::before {
  content: ""; display: block; flex: 0 0 auto; width: 34px; height: 34px;
  background: #fffaf1 url("pixel-art/icons/shinobi-star.svg") center / 25px no-repeat;
  border: 2px solid var(--px-game-ink); image-rendering: pixelated;
  box-shadow: 2px 2px 0 #b7cad8;
}
.today-block[data-today-block="todo"] .today-blk-head::before { background-image: url("pixel-art/icons/wisteria-blade.svg"); }
.today-block[data-today-block="vers"] .today-blk-head::before { background-image: url("pixel-art/icons/cursed-charm.svg"); }
.today-block[data-today-block="hot"] .today-blk-head::before { background-image: url("pixel-art/icons/cursed-charm.svg"); }
.today-blk-fold { font-family: var(--px-font); font-size: 17px; color: var(--ink-strong); }
.today-blk-caret {
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  color: var(--px-game-ink); background: #fffaf1;
  border: 1px solid var(--px-game-ink); font-size: 13px;
}
.today-blk-count { background: #fffaf1; font-size: 12px; }
.today-block .list { border: 0; box-shadow: none; }
.today-row { min-height: 52px; border-bottom: 1px dashed #c3d4df; }
.today-row:nth-child(even) { background: #f6faff; }
.today-row .row-title { font-size: 15px; line-height: 1.55; }
.today-row .check { border: 2px solid var(--px-game-ink); border-radius: 0; background: #fffdf5; }
.today-row .check.on { background: #b7eccd; }
.today-row[data-act]:hover { background: #fff4d6; }
.today-add {
  background: #fff4d9; border-top: 2px dashed #d7b783;
  color: #734924; font-size: 13.5px; font-weight: 700;
}
.today-add:hover { background: #ffeac0; }
.today-switch {
  background: #e7f3ff; border: 2px solid var(--px-game-ink);
  border-radius: 0; box-shadow: 3px 3px 0 var(--px-game-shadow);
}
.today-hint, .today-ver-stage, .today-ver .row-sub { color: var(--text-2); }
.today-ver-stage > .tag { line-height: 1.45; }
.td-val { background: #fffdf6; border: 2px solid #b4c9d8; border-radius: 0; }

/* 新增的版本分支全文：用进度板强调标题与端名，长说明保持正常字体。 */
.cards-ver .vwrap--full > .card {
  border: 3px solid var(--px-game-ink);
  padding-top: 24px;
  box-shadow: inset 0 6px 0 #ffe0a4, 6px 6px 0 var(--px-game-shadow);
}
.cards-ver .vwrap--mini .vstrip { border-left: 5px solid #db9361; background: #fffaf1; }
.cards-ver .vstrip--tiny { border-left: 3px solid #9dcdb4; }
.vv-ports--card { border: 2px solid #a7bfd1; border-radius: 0; }
.vv-port-name { color: var(--ink-strong); font-family: var(--px-font); font-size: 15px; }
.vv-port-note { color: var(--text); font-size: 14px; line-height: 1.8; }
.card .vv-port-note { font-size: 14px; }
.vv-port-owners .tag { font-size: 12px; }
.vv-port-stage-k, .vv-port-owners-k { font-size: 12px; color: var(--text-2); }
.vv-stage { border-radius: 0; font-size: 12px; }

/* 网络热点：排行榜只强化顺序和点击感，长标题仍可扫读。 */
.hot-row { min-height: 46px; padding: 8px 10px; border-bottom: 1px dashed #c3d4df; }
.hot-row:hover { background: #fff4d9; }
.hot-rank {
  display: inline-grid; place-items: center; width: 29px; height: 29px;
  border: 1px solid #adc4d5; background: #edf5ff;
  font-family: var(--px-font); font-size: 15px; color: var(--ink-strong);
}
.hot-rank-1 { background: #ffe19b; border-color: #bb8c42; color: #704b20; }
.hot-rank-2 { background: #dce9f5; border-color: #90a7bc; color: #425a70; }
.hot-rank-3 { background: #f4d6b5; border-color: #c49a76; color: #7b4a2b; }
.hot-title { font-size: 14.5px; color: var(--text); }
.hot-heat { color: var(--text-2); font-size: 12.5px; }
.hot-foot { color: var(--text-2); }

/* App 数据分析：像游戏状态板，但图表、数字和说明保持独立白底。 */
.umeng-panel {
  padding: 0 18px 18px; background: #fffdf8;
  border: 3px solid var(--px-game-ink); border-radius: 0;
  box-shadow: 6px 6px 0 var(--px-game-shadow);
}
.umeng-head {
  margin: 0 -18px; padding: 14px 18px;
  background: #e6f3ff; border-bottom: 3px solid #9abbd5;
}
.umeng-title { font-family: var(--px-font); font-size: 21px; font-weight: 400; }
.umeng-sub, .umeng-stamp { color: var(--text-2); }
.umeng-app {
  border: 2px solid #9fb7cc; border-radius: 0;
  padding: 13px 14px; background: #fff;
  box-shadow: 3px 3px 0 #d5e2ed;
}
.umeng-app-head { padding-bottom: 8px; border-bottom: 1px dashed #bed0df; }
.umeng-plat { border-radius: 0; border-width: 2px; }
.umeng-app-name { font-size: 14px; }
.umeng-kpis { gap: 9px; }
.umeng-kpi { padding: 9px 10px; border: 1px solid #c8dced; background: #f3faff; }
.umeng-kpi:nth-child(2) { background: #f0faf4; border-color: #c2e3cd; }
.umeng-kpi:nth-child(3) { background: #fff8ed; border-color: #ead6b8; }
.umeng-kpi-lbl { color: var(--text-2); font-size: 12px; }
.umeng-kpi-num { font-family: var(--px-font); font-size: 23px; font-weight: 400; }
.umeng-kpi-date { color: var(--text-2); }
.umeng-live { border: 1px dashed #bb9a62; border-radius: 0; background: #fff7e5; }
.umeng-q { border-radius: 0; background: #fff; }
.umeng-doc-tip { border-radius: 0; }

@media (max-width: 699px) {
  .today-head { padding: 10px 12px; margin-bottom: 16px; }
  .today-title { font-size: 22px; }
  .today-sub { font-size: 12.5px; }
  .today-grid { gap: 16px; }
  .today-blk-head { min-height: 56px; padding: 6px 10px; gap: 6px; }
  .today-blk-head::before { width: 28px; height: 28px; background-size: 21px; }
  .today-blk-fold { font-size: 15px; }
  .today-blk-count { font-size: 11px; }
  .today-row { padding: 11px 10px; }
  .today-row .row-title { font-size: 14.5px; }
  .hot-row { gap: 6px; padding: 8px 5px; }
  .hot-rank { width: 25px; height: 25px; font-size: 13px; }
  .hot-title { font-size: 13px; }
  .hot-heat { font-size: 11px; }
  .umeng-panel { padding: 0 10px 12px; }
  .umeng-head { margin: 0 -10px; padding: 10px 12px; }
  .umeng-title { font-size: 18px; }
  .umeng-app { padding: 10px; }
  .umeng-kpi { padding: 8px; }
}
@media (max-width: 360px) {
  .today-blk-head::before { width: 24px; height: 24px; background-size: 18px; }
  .today-blk-fold { font-size: 14px; }
  .today-blk-count { font-size: 10px; padding: 1px 4px; }
}