:root{color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg-base);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--fs-base);line-height:1.6}
.mono{font-family:var(--font-mono)}
.muted{color:var(--text-secondary)}
.fs-xs{font-size:var(--fs-xs)}
.yao-spacer{flex:1}
a{color:inherit;text-decoration:none}
.hide-sm{display:inline}
/* ── 应用外壳顶栏（T-58 · specs/ui/app-shell.md）：与 Vue 栈 shared/ui/ui.css 同类名同几何 ── */
.yao-topbar{display:flex;align-items:center;gap:var(--sp-3);min-height:var(--layout-topbar);padding:0 var(--sp-5);
  background:var(--bg-surface);border-bottom:1px solid var(--border-subtle);position:sticky;top:0;z-index:20}
.yao-brand{display:flex;align-items:center;gap:var(--sp-2);font-weight:var(--fw-semibold)}
.yao-brand:hover .yao-brand-name{color:var(--brand-primary)}
.yao-brand .mark{display:inline-flex;flex-direction:column;gap:3px;width:14px}
.yao-brand .mark i{display:block;height:3px;background:var(--brand-primary);border-radius:1px}
.yao-brand .mark i.broken{background:linear-gradient(90deg,var(--brand-accent) 0 42%,transparent 42% 58%,var(--brand-accent) 58% 100%)}
/* T-111（人类裁定）：品牌 = 爻能源·YaoEnergy ｜ 应用名 —— 分隔条 + 应用名次级色 */
.yao-brand-sep{width:1px;height:16px;background:var(--border-strong);flex:0 0 auto}
.yao-brand-app{font-weight:var(--fw-medium);color:var(--text-secondary)}
.yao-brand:hover .yao-brand-app{color:var(--brand-primary)}
.yao-acct{display:flex;align-items:center;gap:var(--sp-2)}
.yao-acct-chip{display:inline-flex;align-items:center;gap:var(--sp-2);cursor:pointer;list-style:none;padding:2px var(--sp-2);border-radius:var(--radius-md)}
.yao-acct-chip::-webkit-details-marker{display:none}
.yao-acct-chip:hover{background:var(--bg-base)}
.yao-avatar{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:9999px;
  background:var(--brand-primary-soft);color:var(--brand-primary);font-size:var(--fs-xs);font-weight:var(--fw-semibold);flex:0 0 auto}
.yao-caret{color:var(--text-muted);font-size:var(--fs-xs)}
.yao-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--radius-md);
  background:var(--brand-primary);color:var(--fixed-on-bright);font-size:var(--fs-xs);cursor:pointer;border:0;white-space:nowrap}
.yao-btn.ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border-subtle)}
.yao-menu{position:relative}
/* T-111：悬停/聚焦展开（人类：鼠标上去出下拉）；⛔ 不用 <details>（closed 隐藏无法被 CSS 覆盖） */
.yao-menu .yao-menu-body{display:none}
.yao-menu:hover .yao-menu-body,.yao-menu:focus-within .yao-menu-body{display:flex}
.yao-menu-body{position:absolute;right:0;top:calc(100% + var(--sp-2));min-width:260px;max-height:70vh;overflow:auto;
  background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);padding:var(--sp-2);z-index:60;flex-direction:column;gap:2px}
.yao-menu-group{display:flex;flex-direction:column;gap:2px}
.yao-menu-group+.yao-menu-group{margin-top:var(--sp-2);padding-top:var(--sp-2);border-top:1px solid var(--border-subtle)}
.yao-menu-title{font-size:var(--fs-xs);color:var(--text-muted);padding:2px var(--sp-2) var(--sp-1)}
.yao-menu-item{display:flex;align-items:center;gap:var(--sp-2);padding:5px 8px;border-radius:var(--radius-sm);white-space:nowrap}
.yao-menu-item:hover{background:var(--bg-base)}
.yao-menu-item.on{background:var(--brand-primary-soft);color:var(--brand-primary)}
/* 窄屏降级（规范 §2-6 + 2026-10-12 修订）：切换器/环境标识已从顶栏删除；账号姓名(≤480) 收起；品牌与账号区始终在 */
@media(max-width:860px){.yao-topbar{padding:0 var(--sp-3);gap:var(--sp-2)}}
@media(max-width:640px){.hide-sm{display:none}.yao-topbar .tabs{display:none}}
@media(max-width:480px){.yao-topbar .yao-acct-name,.yao-topbar .yao-caret{display:none}.yao-topbar .yao-brand-name{font-size:var(--fs-sm)}
  .yao-topbar .yao-acct,.yao-topbar .yao-btn{flex:0 0 auto}}
.wrap{max-width:1180px;margin:0 auto;padding:var(--sp-5) var(--sp-5) 64px}
.wrap.center{text-align:center;max-width:760px}
.tabs{display:flex;gap:var(--sp-1);margin-left:var(--sp-4)}
.tab{padding:6px 12px;font-size:var(--fs-sm);color:var(--text-secondary);border-bottom:2px solid transparent}
.tab:hover{color:var(--brand-primary)}
.tab.on{color:var(--text-primary);border-bottom-color:var(--brand-primary);font-weight:var(--fw-medium)}
.panel{margin-top:var(--sp-5)}
.panel h2{font-size:var(--fs-lg);margin:0 0 var(--sp-2)}
.layers{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-3);margin-top:var(--sp-3)}
.layer{display:block;background:var(--bg-surface);border:1px solid var(--border-subtle);border-left:3px solid var(--brand-primary);
  border-radius:var(--radius-md);padding:var(--sp-3)}
.layer b{display:block}.layer span{display:block;margin-top:2px}
h1{font-size:28px;margin:var(--sp-3) 0 var(--sp-2)}
.lead{color:var(--text-secondary);max-width:900px}
.points{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-3);margin:var(--sp-4) 0 var(--sp-2)}
.pt{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--sp-3)}
.pt b{display:block;margin-bottom:2px}
.pt span{font-size:var(--fs-sm);color:var(--text-secondary)}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin:var(--sp-5) 0 var(--sp-2)}
.chip{padding:3px 10px;border:1px solid var(--border-subtle);border-radius:var(--radius-full);background:var(--bg-surface);font-size:var(--fs-xs)}
.chip:hover{border-color:var(--brand-primary);color:var(--brand-primary)}
/* 能力链上的应用标签=链接（人类 2026-10-13 反馈"不能点击"）——给足可点的视觉反馈 */
a.chip-link{text-decoration:none;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
a.chip-link:hover{border-color:var(--brand-primary);color:var(--brand-primary);background:var(--bg-base)}
.chain{margin-top:var(--sp-5)}
.band{margin-top:var(--sp-5);padding:var(--sp-4);border:1px dashed var(--border-strong);border-radius:var(--radius-md);background:var(--bg-base)}
.axis{margin:var(--sp-6) 0 0;font-size:var(--fs-lg)}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin:var(--sp-3) 0}
.wave{font-size:11px;padding:2px 8px;border-radius:var(--radius-full);border:1px solid transparent;white-space:nowrap}
.w0{background:var(--semantic-neutral-soft);color:var(--text-secondary)}
.w1{background:var(--brand-primary-soft);color:var(--brand-primary);border-color:var(--brand-primary)}
.w2{background:var(--semantic-warning-soft);color:var(--semantic-warning);border-color:var(--semantic-warning)}
.w3{background:var(--semantic-success-soft);color:var(--semantic-success);border-color:var(--semantic-success)}
.w4,.w5{background:var(--bg-base);color:var(--text-secondary);border-color:var(--border-strong)}
.layerbox{padding:var(--sp-5)}
.lb-head{display:flex;align-items:center;gap:var(--sp-3)}
.lb-ico svg{width:26px;height:26px;color:var(--brand-primary)}
.lb-title b{font-size:var(--fs-lg)}
.lb-title span{display:block}
.lb-meta{color:var(--text-secondary)}
.lb-desc{margin:var(--sp-3) 0 var(--sp-4);color:var(--text-secondary);font-size:var(--fs-sm);max-width:960px}
.layerbox-instances{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-3)}
.app-card2{display:block;border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--sp-3);background:var(--bg-base)}
.app-card2:hover{border-color:var(--brand-primary);transform:translateY(-1px)}
.ac-head{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:nowrap;min-width:0}
.ac-head b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-desc{font-size:var(--fs-xs);color:var(--text-secondary);margin:var(--sp-2) 0}
.ac-foot{display:flex;align-items:center;gap:var(--sp-2)}
.flow-row{display:flex;justify-content:center;margin:var(--sp-3) 0;color:var(--text-secondary)}
.flow-row span{font-size:var(--fs-lg);line-height:1}
.layerbox{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--sp-4);background:var(--bg-surface)}
.layerbox-head{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3)}
.layerbox-head svg{width:22px;height:22px;flex:0 0 auto}
.layerbox-head b{display:block}
.layerbox-head span{display:block}
.l-people{border-style:dashed;background:var(--bg-base);justify-items:center;text-align:center}
.l-people .layerbox-head{justify-content:center}
.l-forecast{border-left:3px solid var(--brand-accent)}
.l-decide{border-left:3px solid var(--brand-accent)}
.l-exec{border-left:3px solid var(--semantic-warning)}
.l-client{border-left:3px solid var(--semantic-success)}
.l-base{border-style:dashed;background:var(--bg-base)}
.l-data{border-left:3px solid var(--brand-primary)}
.l-apps{border-left:3px solid var(--semantic-success)}
.grid-mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--sp-2)}
.app-chip{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);background:var(--bg-base)}
.app-chip:hover{border-color:var(--brand-primary)}
.app-chip .ico{width:24px;height:24px}
.app-chip .ico svg{width:14px;height:14px}
.app-chip .nm{font-size:var(--fs-sm)}
.badge-mini{margin-left:auto;font-size:10px;color:var(--text-secondary)}
.badge-mini.ok{color:var(--semantic-success)}
.subgroups{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--sp-3)}
.subgroup{border:1px dashed var(--border-subtle);border-radius:var(--radius-md);padding:var(--sp-3)}
.sg-title{font-size:var(--fs-xs);color:var(--text-secondary);margin-bottom:var(--sp-2)}
.flow{display:flex;align-items:center;gap:var(--sp-2);margin:var(--sp-3) 0 0 var(--sp-5);color:var(--brand-primary)}
.flow span{font-size:var(--fs-lg);line-height:1}
.chain-head{display:flex;align-items:baseline;gap:var(--sp-2);padding-bottom:var(--sp-2);border-bottom:1px solid var(--border-subtle)}
.chain-head h2{font-size:var(--fs-lg);margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--sp-4);margin-top:var(--sp-3)}
.app-card{display:block;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  padding:var(--sp-4);box-shadow:var(--shadow-sm);transition:box-shadow var(--motion-fast) var(--motion-easing),transform var(--motion-fast) var(--motion-easing)}
.app-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.app-head{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:nowrap;min-width:0}
.app-head b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ico{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--radius-sm);
  background:var(--brand-primary-soft);color:var(--brand-primary);flex:0 0 auto}
.ico svg{width:17px;height:17px}
.app-id{font-size:var(--fs-xs);color:var(--text-secondary);margin-top:2px}
.app-desc{font-size:var(--fs-sm);color:var(--text-secondary);margin:var(--sp-2) 0}
.app-foot{font-size:var(--fs-xs);color:var(--text-secondary);opacity:.85}
.yao-badge{display:inline-flex;align-items:center;gap:5px;margin-left:auto;font-size:var(--fs-xs);padding:1px 8px;border-radius:var(--radius-full);background:var(--bg-base);white-space:nowrap;flex:0 0 auto}
.yao-badge.ok{color:var(--semantic-success);background:var(--semantic-success-soft)}
.yao-badge.warn{color:var(--semantic-warning);background:var(--semantic-warning-soft)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--semantic-neutral);display:inline-block}
.dot.ok{background:var(--semantic-success)}.dot.warn{background:var(--semantic-warning)}
.notice{border:1px solid var(--border-subtle);border-left:3px solid var(--brand-accent);background:var(--brand-accent-soft);
  padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-md);font-size:var(--fs-sm);margin:var(--sp-4) 0}
.about{margin-top:var(--sp-6);background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--sp-5)}
.about h2{margin:0 0 var(--sp-3);font-size:var(--fs-lg)}
.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--sp-5)}
.about h3{font-size:var(--fs-sm);margin:var(--sp-3) 0 var(--sp-1)}
.about p{font-size:var(--fs-sm);color:var(--text-secondary);margin:0 0 var(--sp-2)}
.foot{margin-top:var(--sp-6);font-size:var(--fs-xs)}
.sub{color:var(--text-secondary)}