/* ============================================================ MUZHI MODULE LIBRARY · 云开模块库 ------------------------------------------------------------ 所有页面共享的模块化样式。每个模块以注释分区，并支持变体切换： · 整页切换：在上加 data-v-<模块>="<变体>" · 局部切换：在容器上加同样的 data 属性，或在元素上加 .v-<变体> 类模块清单、变体说明与修改指南见 MODULES.md。依赖：先引入 muzhi/tokens.css，再引入本文件。页面约定：或 data-shell="console" ============================================================ */ /* ============ M0 · 基础 ============ */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{color:var(--seed-fg);font-family:var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} ::selection{background:var(--acc-line);color:var(--seed-fg)} a{color:inherit;text-decoration:none} body[data-shell="landing"]{ font-size:16px;line-height:1.6; background: radial-gradient(1000px 480px at 82% -12%,color-mix(in oklab,var(--seed-primary) 13%,transparent),transparent 70%), radial-gradient(760px 420px at -8% 34%,color-mix(in oklab,var(--seed-accent) 10%,transparent),transparent 72%), var(--seed-bg); background-attachment:fixed; } body[data-shell="console"]{ font-size:14px;line-height:1.55; background: radial-gradient(1000px 480px at 82% -12%,color-mix(in oklab,var(--seed-primary) 13%,transparent),transparent 70%), radial-gradient(760px 420px at -8% 34%,color-mix(in oklab,var(--seed-accent) 10%,transparent),transparent 72%), var(--seed-bg); background-attachment:fixed; } .wrap{max-width:1200px;margin:0 auto;padding:0 32px} /* ============ M1 · 按钮 ============ */ .btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 22px;border-radius:9999px;font-size:14px;font-family:var(--font);cursor:pointer;transition:all .2s;border:1px solid transparent} .btn-primary{ background:linear-gradient(165deg,color-mix(in oklab,var(--acc) 78%,#fff),var(--acc)); color:var(--on-acc,#fff);font-weight:600; border-color:color-mix(in oklab,var(--acc) 45%,transparent); box-shadow:0 1px 2px color-mix(in oklab,var(--acc) 16%,transparent), 0 6px 14px color-mix(in oklab,var(--acc) 14%,transparent), inset 0 1px 0 color-mix(in oklab,#fff 42%,transparent); } .btn-primary:hover{ filter:brightness(1.05); box-shadow:0 2px 4px color-mix(in oklab,var(--acc) 18%,transparent), 0 10px 20px color-mix(in oklab,var(--acc) 16%,transparent), inset 0 1px 0 color-mix(in oklab,#fff 48%,transparent); transform:translateY(-1px); } .btn-primary:active{transform:translateY(0);filter:brightness(.98)} html[data-theme="light"] .btn-primary{ background:linear-gradient(165deg,color-mix(in oklab,var(--acc) 62%,#fff),color-mix(in oklab,var(--acc) 92%,#fff)); box-shadow:0 1px 2px color-mix(in oklab,var(--acc) 12%,transparent), 0 8px 18px color-mix(in oklab,var(--acc) 12%,transparent), inset 0 1px 0 color-mix(in oklab,#fff 55%,transparent); } html[data-theme="dark"] .btn-primary{ background:linear-gradient(165deg,color-mix(in oklab,var(--acc) 72%,#fff),color-mix(in oklab,var(--acc) 88%,#1a2836)); box-shadow:0 1px 2px color-mix(in oklab,var(--acc) 20%,transparent), 0 8px 20px color-mix(in oklab,var(--acc) 16%,transparent), inset 0 1px 0 color-mix(in oklab,#fff 28%,transparent); } .btn-ghost{border-color:var(--line-2);color:var(--seed-fg);background:color-mix(in oklab,var(--seed-surface) 55%,transparent)} .btn-ghost:hover{border-color:var(--acc-line);color:var(--acc);background:var(--acc-soft)} .btn-lg{height:48px;padding:0 30px;font-size:15px} [data-shell="console"] .btn{height:34px;padding:0 16px;font-size:13px;gap:7px} [data-shell="console"] .btn-primary{ box-shadow:0 1px 2px color-mix(in oklab,var(--acc) 14%,transparent), inset 0 1px 0 color-mix(in oklab,#fff 35%,transparent); } /* ============ M2 · 顶部导航（官网） ============ */ [data-shell="landing"] header{ position:sticky;top:0;z-index:50; background:var(--glass-bar); backdrop-filter:blur(var(--seed-blur)) saturate(1.6); -webkit-backdrop-filter:blur(var(--seed-blur)) saturate(1.6); border-bottom:1px solid var(--line); } .nav{display:flex;align-items:center;gap:32px;height:64px} .brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px;letter-spacing:.5px} .brand svg{width:28px;height:28px;flex:none} .brand-mark{display:inline-flex;align-items:center} .brand-mark svg,.brand-mark img{width:28px;height:28px;flex:none;object-fit:contain;display:block} [data-shell="console"] .brand-mark svg,[data-shell="console"] .brand-mark img{width:26px;height:26px} .nav-links{display:flex;gap:26px;font-size:14px;color:var(--fg-2);margin-left:12px} .nav-links a{padding:6px 0;transition:color .2s} .nav-links a:hover{color:var(--seed-fg)} .nav-links a.active{color:var(--acc)} .nav-cta{margin-left:auto;display:flex;align-items:center;gap:14px} .tag-mono{ font-family:var(--mono);font-size:12px;letter-spacing:1.6px; text-transform:uppercase;color:var(--acc); display:inline-flex;align-items:center;gap:8px; padding:6px 14px;border:1px solid var(--acc-line);border-radius:9999px; background:var(--acc-soft); } .tag-mono::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc)} /* ============ M3 · 主题切换器 ============ */ .theme-switch{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:9999px;padding:3px;background:var(--glass-pill);backdrop-filter:blur(var(--seed-blur));-webkit-backdrop-filter:blur(var(--seed-blur))} .theme-switch button{border:none;background:transparent;color:var(--fg-3);font-family:var(--font);font-size:12px;padding:5px 13px;border-radius:9999px;cursor:pointer;transition:all .15s} .theme-switch button:hover{color:var(--seed-fg)} .theme-switch button.on{background:var(--acc-soft);color:var(--acc);font-weight:500} /* ============ M4 · 章节骨架（官网） ============ */ [data-shell="landing"] section{padding:calc(96px*var(--seed-space)) 0;position:relative} .sec-head{max-width:660px;margin-bottom:56px} .sec-head h2{font-size:36px;line-height:1.25;font-weight:600;letter-spacing:-.5px;margin:18px 0 14px} .sec-head p{color:var(--fg-2);font-size:16px} .sec-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--acc)} /* ============ M5 · Hero 首屏 ============ */ .hero{padding:calc(96px*var(--seed-space)) 0 calc(84px*var(--seed-space));overflow:hidden} .hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,var(--acc-soft),transparent 46%)} .hero::after{content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(720px 460px at 50% 0%,#000 20%,transparent 78%); mask-image:radial-gradient(720px 460px at 50% 0%,#000 20%,transparent 78%); opacity:.5} .hero .wrap{position:relative;z-index:1} .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center} .hero h1{font-size:52px;line-height:1.16;font-weight:600;letter-spacing:-1px;margin:22px 0 20px} .hero h1 em{font-style:normal;color:var(--acc)} .hero .lead{color:var(--fg-2);font-size:17px;max-width:520px;margin-bottom:34px} .hero-btns{display:flex;gap:14px;margin-bottom:44px} .hero-stats{display:flex;border:1px solid var(--line);border-radius:var(--seed-radius);background:var(--glass);overflow:hidden} .hero-stats div{flex:1;padding:16px 20px;border-right:1px solid var(--line)} .hero-stats div:last-child{border-right:none} .hero-stats b{display:block;font-size:22px;font-weight:600;font-family:var(--mono)} .hero-stats span{font-size:12px;color:var(--fg-3)} /* ============ M6 · 网格与卡片 ============ */ .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} .card{background:var(--glass);border:1px solid var(--line);border-radius:var(--seed-radius);padding:26px;transition:border-color .25s} .card:hover{border-color:var(--acc-line)} .card h3{font-size:17px;font-weight:600;margin:16px 0 8px} .card p{font-size:14px;color:var(--fg-2);line-height:1.7} .ico{width:42px;height:42px;border-radius:11px;background:var(--acc-soft);border:1px solid var(--acc-line);display:flex;align-items:center;justify-content:center} .ico svg{width:22px;height:22px;stroke:var(--acc);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block;overflow:visible} /* ============ M7 · 数据指标 ============ */ .metrics{border-block:1px solid var(--line);background:linear-gradient(180deg,transparent,var(--acc-soft) 120%)} .metric-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center} .metric b{font-size:44px;font-weight:600;font-family:var(--mono);letter-spacing:-1px;color:var(--seed-fg);display:block} .metric b i{font-style:normal;color:var(--acc);font-size:24px;margin-left:2px} .metric span{color:var(--fg-3);font-size:13px} /* ============ M8 · 产品矩阵卡 ============ */ .fam-card{display:flex;flex-direction:column;gap:10px} .fam-card .fam-tag{font-family:var(--mono);font-size:11px;letter-spacing:1.4px;color:var(--fg-3);text-transform:uppercase} .fam-card h3{margin:0} .fam-card .go{margin-top:auto;color:var(--acc);font-size:13px} .dot{width:10px;height:10px;border-radius:50%;flex:none} /* ============ M9 · CTA 收尾 ============ */ .cta-band{ border:1px solid var(--acc-line);border-radius:calc(var(--seed-radius) + 8px); background:linear-gradient(140deg,var(--acc-soft),var(--panel) 62%); padding:60px;text-align:center; } .cta-band h2{font-size:32px;font-weight:600;letter-spacing:-.5px;margin-bottom:12px} .cta-band p{color:var(--fg-2);margin-bottom:30px} .cta-band .btn{margin:0 7px} /* ============ M10 · 页脚 ============ */ footer{border-top:1px solid var(--line);padding:48px 0 40px;color:var(--fg-3);font-size:13px} .foot{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap} .foot-cols{display:flex;gap:64px} .foot h4{color:var(--fg-2);font-size:13px;font-weight:500;margin-bottom:12px} .foot a{display:block;padding:4px 0;transition:color .2s} .foot a:hover{color:var(--acc)} .foot-brand{max-width:280px} .foot-brand .brand{margin-bottom:12px} .copyright{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px} /* ============ C1 · 控制台骨架 ============ */ .app{display:grid;grid-template-columns:236px 1fr;min-height:100vh} [data-shell="console"] aside{background:color-mix(in oklab,var(--side) 62%,transparent);border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;backdrop-filter:blur(var(--seed-blur));-webkit-backdrop-filter:blur(var(--seed-blur))} [data-shell="console"] .brand{font-size:15px;padding:6px 10px 18px} [data-shell="console"] .brand svg{width:26px;height:26px} .prod-badge{margin:0 10px 16px;padding:9px 12px;border-radius:10px;background:var(--acc-soft);border:1px solid var(--acc-line);font-size:12.5px;color:var(--acc);display:flex;align-items:center;gap:8px} .prod-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc)} .nav-group{font-family:var(--mono);font-size:10px;letter-spacing:1.4px;color:var(--fg-3);text-transform:uppercase;padding:16px 12px 6px} .nav-item{ display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:8px; color:var(--fg-2);font-size:13.5px;font-weight:400;letter-spacing:.1px; transition:color .15s,background .15s;cursor:pointer;border:1px solid transparent; } .nav-ico,.neo-ico,.palette-item .ico{ width:20px;height:20px;flex:none; display:inline-flex;align-items:center;justify-content:center; background:transparent;border:none;box-shadow:none;border-radius:0; color:inherit;transition:color .15s;line-height:0; } .nav-item svg,.nav-ico svg,.neo-ico svg,.palette-item .ico svg,.icon-btn svg{ width:18px;height:18px;stroke:currentColor;fill:none; stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none; display:block;overflow:visible;vector-effect:non-scaling-stroke; } .nav-ico svg *,.neo-ico svg *,.palette-item .ico svg *{ stroke:inherit;fill:none;stroke-linecap:round;stroke-linejoin:round; } .nav-item:hover{color:var(--seed-fg);background:color-mix(in oklab,var(--seed-fg) 4.5%,transparent)} .nav-item:hover .nav-ico{transform:none;box-shadow:none} .nav-item.on{ color:var(--acc);font-weight:600; background:color-mix(in oklab,var(--acc) 10%,transparent); border-color:color-mix(in oklab,var(--acc) 18%,transparent); } .nav-item.on .nav-ico{ color:var(--acc);background:transparent;box-shadow:none; } .nav-item .n{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--fg-3);background:color-mix(in oklab,var(--seed-fg) 7%,transparent);padding:1px 7px;border-radius:99px} .side-user{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--glass)} .avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--acc),var(--seed-primary));display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;font-weight:600;flex:none} .side-user b{font-size:13px;display:block} .side-user span{font-size:11px;color:var(--fg-3)} [data-shell="console"] main{min-width:0} .topbar{display:flex;align-items:center;gap:16px;padding:14px 28px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--glass-bar);backdrop-filter:blur(var(--seed-blur)) saturate(1.6);-webkit-backdrop-filter:blur(var(--seed-blur)) saturate(1.6);z-index:5} .crumb{font-size:13px;color:var(--fg-3)} .crumb b{color:var(--seed-fg);font-weight:500} .search{margin-left:auto;display:flex;align-items:center;gap:8px;height:34px;padding:0 14px;border:1px solid var(--line);border-radius:9px;color:var(--fg-3);font-size:12.5px;min-width:220px} .search svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8} .search kbd{margin-left:auto;font-family:var(--mono);font-size:10px;border:1px solid var(--line-2);border-radius:5px;padding:1px 6px} .env{font-family:var(--mono);font-size:11px;color:var(--acc);border:1px solid var(--acc-line);background:var(--acc-soft);padding:4px 12px;border-radius:99px} .icon-btn{width:34px;height:34px;border:1px solid var(--line);border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--fg-2);position:relative;cursor:pointer} .icon-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round} .icon-btn .dot{position:absolute;top:7px;right:8px;width:6px;height:6px;border-radius:50%;background:var(--red)} .content{padding:calc(26px*var(--seed-space)) 28px;display:flex;flex-direction:column;gap:20px} .page-head{display:flex;align-items:center;flex-wrap:wrap;gap:12px 14px;margin-bottom:4px} .page-head h1{font-size:22px;font-weight:600;letter-spacing:-.3px} .page-head p{color:var(--fg-3);font-size:13px} .page-head .actions{margin-left:auto;display:flex;gap:10px} /* ============ C2 · KPI 指标卡 ============ */ .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .kpi{background:var(--glass);border:1px solid var(--line);border-radius:var(--seed-radius);padding:18px 20px} .kpi .k-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px} .kpi .k-top span{color:var(--fg-3);font-size:12.5px} .kpi .trend{font-family:var(--mono);font-size:11px;padding:2px 8px;border-radius:99px} .trend.up{color:var(--green);background:color-mix(in oklab,var(--green) 12%,transparent)} .trend.down{color:var(--red);background:color-mix(in oklab,var(--red) 12%,transparent)} .trend.acc{color:var(--acc);background:var(--acc-soft)} .trend.flat{color:var(--fg-3);background:color-mix(in oklab,var(--seed-fg) 7%,transparent)} .kpi b{font-size:26px;font-family:var(--mono);font-weight:600;letter-spacing:-.5px;display:block} .kpi .sub{font-size:11.5px;color:var(--fg-3);margin-top:8px;font-family:var(--mono)} .kpi .spark{margin-top:12px} .spark polyline{fill:none;stroke:var(--acc);stroke-width:1.6;stroke-linecap:round} .spark path{fill:var(--acc-soft);stroke:none} /* ============ C3 · 面板与表格 ============ */ .grid-main{display:grid;grid-template-columns:1.65fr 1fr;gap:16px} .panel{background:var(--glass);border:1px solid var(--line);border-radius:var(--seed-radius);overflow:hidden} .panel-h{display:flex;align-items:center;gap:10px;padding:15px 20px;border-bottom:1px solid var(--line)} .panel-h h2{font-size:14.5px;font-weight:600} .panel-h .mono-tag{font-family:var(--font);font-size:11px;letter-spacing:0;color:var(--fg-3);border:1px solid var(--line);padding:2px 9px;border-radius:99px;font-weight:500;text-transform:none} .panel-h .right{margin-left:auto;display:flex;gap:8px;align-items:center} .chip{font-size:12px;font-family:var(--font);font-weight:500;color:var(--fg-2);border:1px solid var(--line-2);padding:4px 12px;border-radius:99px;cursor:pointer;letter-spacing:0} .chip.on{color:var(--acc);border-color:var(--acc-line);background:var(--acc-soft)} .panel-b{padding:20px} .chart{width:100%;height:auto;display:block} .c-grid{stroke:var(--line);stroke-width:1} .c-line{stroke:var(--acc);stroke-width:2;fill:none;stroke-linecap:round} .c-line2{stroke:var(--green);stroke-width:1.6;fill:none} .c-area{fill:var(--acc-soft)} .c-lab{fill:var(--fg-3);font-size:10px;font-family:var(--mono)} table{width:100%;border-collapse:collapse;font-size:13px} th{font-size:11px;font-family:var(--mono);letter-spacing:1px;color:var(--fg-3);text-transform:uppercase;text-align:left;font-weight:400;padding:10px 20px;border-bottom:1px solid var(--line)} td{padding:12px 20px;border-bottom:1px solid var(--line);color:var(--fg-2)} tr:last-child td{border-bottom:none} tr:hover td{background:color-mix(in oklab,var(--seed-fg) 3%,transparent)} td b{color:var(--seed-fg);font-weight:500} td .mono{font-family:var(--mono);font-size:12px} .badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;padding:3px 10px;border-radius:99px} .badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor} .b-ok{color:var(--green);background:color-mix(in oklab,var(--green) 11%,transparent)} .b-warn{color:var(--amber);background:color-mix(in oklab,var(--amber) 11%,transparent)} .b-err{color:var(--red);background:color-mix(in oklab,var(--red) 11%,transparent)} .b-run{color:var(--acc);background:var(--acc-soft)} .b-info{color:var(--acc);background:var(--acc-soft)} .b-pause{color:var(--fg-3);background:color-mix(in oklab,var(--seed-fg) 7%,transparent)} .foot-note{color:var(--fg-3);font-size:12px;text-align:center;padding:6px 0 14px;font-family:var(--font)} /* ============ G1 · 玻璃质感通用层 ============ */ [data-shell="landing"] .card,[data-shell="landing"] .hero-stats, [data-shell="landing"] .arch,[data-shell="landing"] .pipeline, [data-shell="landing"] .lifecycle,[data-shell="landing"] .loop, [data-shell="landing"] .cta-band,[data-shell="landing"] .code-panel, [data-shell="landing"] .model-card,[data-shell="landing"] .canvas-panel, [data-shell="landing"] .tutor{ background:var(--glass); backdrop-filter:blur(var(--seed-blur)) saturate(1.6); -webkit-backdrop-filter:blur(var(--seed-blur)) saturate(1.6); } [data-shell="console"] .panel,[data-shell="console"] .kpi{ background:var(--glass); backdrop-filter:blur(var(--seed-blur)) saturate(1.6); -webkit-backdrop-filter:blur(var(--seed-blur)) saturate(1.6); } /* 明亮主题下玻璃面板附加柔和投影 */ html[data-theme="light"] .card,html[data-theme="light"] .hero-stats, html[data-theme="light"] .arch,html[data-theme="light"] .pipeline, html[data-theme="light"] .lifecycle,html[data-theme="light"] .loop, html[data-theme="light"] .cta-band,html[data-theme="light"] .code-panel, html[data-theme="light"] .model-card,html[data-theme="light"] .canvas-panel, html[data-theme="light"] .tutor{box-shadow:0 12px 32px color-mix(in oklab,var(--seed-primary) 9%,transparent)} html[data-theme="light"] .panel,html[data-theme="light"] .kpi{box-shadow:0 10px 28px color-mix(in oklab,var(--seed-primary) 8%,transparent)} /* ============================================================ V · 模块变体层用法：body 或任意容器上加 data-v-<模块>="<变体>"，或元素上加 .v-<变体> 类。 ============================================================ */ /* V-M2 · 导航：glass(默认) / solid */ [data-v-nav="solid"] header{background:var(--seed-bg);backdrop-filter:none;-webkit-backdrop-filter:none} /* V-M4 · 章节标题：left(默认) / center */ [data-v-sec-head="center"] .sec-head{margin-inline:auto;text-align:center} /* V-M5 · Hero：split(默认) / center */ [data-v-hero="center"] .hero-grid{grid-template-columns:1fr;justify-items:center;text-align:center} [data-v-hero="center"] .hero .lead{margin-inline:auto} [data-v-hero="center"] .hero-btns{justify-content:center} [data-v-hero="center"] .hero-stats{width:100%;max-width:820px} /* V-M6 · 卡片：glass(默认) / solid / outline */ [data-v-card="solid"] .card,.card.v-solid{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none} [data-v-card="outline"] .card,.card.v-outline{background:transparent;border-color:var(--line-2);backdrop-filter:none;-webkit-backdrop-filter:none} /* V-M7 · 指标：band(默认) / cards */ [data-v-metrics="cards"] .metrics{background:none;border-block:none} [data-v-metrics="cards"] .metric{background:var(--glass);border:1px solid var(--line);border-radius:var(--seed-radius);padding:28px 16px;backdrop-filter:blur(var(--seed-blur));-webkit-backdrop-filter:blur(var(--seed-blur))} /* V-M9 · CTA：center(默认) / split */ [data-v-cta="split"] .cta-band{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:40px;row-gap:10px;align-items:center;text-align:left;padding:44px 60px} [data-v-cta="split"] .cta-band h2{grid-column:1;grid-row:1;margin:0;font-size:26px} [data-v-cta="split"] .cta-band p{grid-column:1;grid-row:2;margin:0} [data-v-cta="split"] .cta-band .btn{grid-column:2;margin:0} [data-v-cta="split"] .cta-band .btn-primary{grid-row:1} [data-v-cta="split"] .cta-band .btn-ghost{grid-row:2} /* V-C2 · KPI：default / accent */ [data-v-kpi="accent"] .kpi,.kpi.v-accent{border-top:2px solid var(--acc-line)} /* V-C3 · 面板：glass(默认) / solid */ [data-v-panel="solid"] .panel,[data-v-panel="solid"] .kpi,.panel.v-solid,.kpi.v-solid{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none} /* V-C3 · 表格：plain(默认) / zebra */ [data-v-table="zebra"] tbody tr:nth-child(even) td{background:color-mix(in oklab,var(--seed-fg) 4%,transparent)} /* ============ R · 响应式 ============ */ @media (max-width:1100px){ .grid-main{grid-template-columns:1fr} .kpis{grid-template-columns:1fr 1fr} } @media (max-width:960px){ .nav-links{display:none} .hero-grid{grid-template-columns:1fr} .grid-4{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:1fr} .grid-2{grid-template-columns:1fr} .metric-row{grid-template-columns:repeat(2,1fr);gap:32px} .hero h1{font-size:38px} [data-shell="landing"] section{padding:calc(64px*var(--seed-space)) 0} .cta-band{padding:40px 24px} } @media (max-width:800px){ .app{grid-template-columns:1fr} [data-shell="console"] aside{display:none} /* 综合平台控制台：保持侧栏 + 工作区并排，避免主内容被顶出视口 */ body[data-platform-shell] .app{ grid-template-columns:minmax(200px,236px) minmax(0,1fr)!important; height:100vh;overflow:hidden; } body[data-platform-shell] aside{display:flex!important;height:100vh;position:relative} } @media (max-width:600px){ .grid-4,.grid-3{grid-template-columns:1fr} }