:root { --navy:#071d2b; --navy-2:#0b2b3d; --ink:#122b39; --muted:#607683; --line:#dce6e9; --panel:#fff; --canvas:#f2f6f5; --cyan:#10a8b5; --red:#d84b50; --orange:#e78938; --green:#3b9b78; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--canvas); color:var(--ink); font-family:"PingFang SC","Microsoft YaHei",Inter,system-ui,sans-serif; }
button,a,input,select { font:inherit; }
button { color:inherit; }
.app-shell { min-height:100vh; }
.topbar { position:sticky; top:0; z-index:50; height:68px; display:flex; align-items:center; gap:12px; padding:0 24px; color:white; background:linear-gradient(110deg,var(--navy),#0b3345 72%,#0d4a55); border-bottom:1px solid rgba(255,255,255,.12); box-shadow:0 8px 30px rgba(4,25,38,.16); }
.brand-mark { width:40px; height:40px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.35); border-radius:11px 11px 16px 11px; background:linear-gradient(145deg,rgba(16,168,181,.9),rgba(255,255,255,.08)); font-weight:800; box-shadow:inset 0 0 0 3px rgba(255,255,255,.06); }
.brand-copy { display:flex; flex-direction:column; line-height:1.2; }
.brand-copy strong { font-size:16px; letter-spacing:.02em; }
.brand-copy small { color:#9bc6ce; margin-top:4px; font-size:11px; letter-spacing:.08em; }
.connection { margin-left:auto; display:flex; align-items:center; gap:8px; padding:7px 11px; border-radius:999px; color:#bcd8dd; background:rgba(255,255,255,.08); font-size:12px; }
.connection-dot { width:7px; height:7px; border-radius:50%; background:#57dca1; box-shadow:0 0 0 4px rgba(87,220,161,.12); }
.is-offline .connection-dot { background:#f0ba55; }
.workspace { display:grid; grid-template-columns:230px 1fr; min-height:calc(100vh - 68px); }
.sidebar { position:sticky; top:68px; height:calc(100vh - 68px); padding:28px 18px; background:#e8efef; border-right:1px solid #d5e0e2; }
.side-kicker { margin:0 12px 15px; color:#82949d; font-size:11px; font-weight:700; letter-spacing:.18em; }
.sidebar button { width:100%; min-height:46px; display:flex; align-items:center; gap:12px; margin:4px 0; padding:0 13px; border:0; border-radius:10px; background:transparent; color:#536b77; text-align:left; cursor:pointer; transition:.18s ease; }
.sidebar button span { font-size:10px; color:#92a2a9; letter-spacing:.08em; }
.sidebar button:hover { background:rgba(255,255,255,.7); }
.sidebar button.active { color:white; background:var(--navy-2); box-shadow:0 8px 18px rgba(7,35,50,.15); }
.sidebar button.active span { color:#6ed8db; }
.side-note { position:absolute; left:18px; right:18px; bottom:24px; padding:15px; border:1px solid #d1dcde; border-radius:12px; background:rgba(255,255,255,.55); }
.side-note b { font-size:12px; }
.side-note p { margin:6px 0 0; color:#71858e; font-size:11px; line-height:1.7; }
.main-panel { min-width:0; padding:34px clamp(20px,4vw,58px) 70px; }
.page-heading { display:flex; justify-content:space-between; gap:30px; align-items:flex-end; max-width:1240px; margin:0 auto 24px; }
.eyebrow { color:#168c98; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.page-heading h1 { max-width:820px; margin:8px 0 8px; font-size:clamp(25px,3.2vw,42px); line-height:1.17; letter-spacing:-.04em; color:#0b2532; }
.page-heading p { max-width:820px; margin:0; color:var(--muted); font-size:14px; line-height:1.8; }
.heading-stamp { flex:0 0 auto; padding-left:18px; border-left:2px solid var(--cyan); text-align:right; }
.heading-stamp b,.heading-stamp span { display:block; }.heading-stamp b { font-size:14px; color:#234b59; }.heading-stamp span { margin-top:4px; color:#82949d; font-size:10px; }
.metric-grid { max-width:1240px; margin:0 auto 16px; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.metric-card { min-height:126px; padding:18px 19px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.9); box-shadow:0 8px 24px rgba(22,60,75,.04); }
.metric-card span,.metric-card small { display:block; }.metric-card span { color:#6d818b; font-size:12px; }.metric-card strong { display:block; margin:13px 0 8px; color:#123b49; font-size:30px; letter-spacing:-.04em; }.metric-card strong i { font-style:normal; font-size:13px; color:#6b818b; }.metric-card small { color:#91a1a8; font-size:11px; }
.metric-card.risk-card { border-color:#f1c99f; background:linear-gradient(145deg,#fffaf3,#fff); }.metric-card.risk-card strong { color:#cf6c26; }
.standard-alert { max-width:1240px; display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:13px; margin:0 auto 16px; padding:14px 16px; border:1px solid #e9c98e; border-radius:13px; background:#fff9ea; }
.alert-icon { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:#ecae36; color:white; font-weight:900; }
.standard-alert b { font-size:13px; }.standard-alert p { margin:3px 0 0; color:#755f3e; font-size:12px; line-height:1.6; }.standard-alert a,.local-proof a { color:#096e7a; font-size:12px; font-weight:700; text-decoration:none; white-space:nowrap; }
.dashboard-grid { max-width:1240px; margin:0 auto 16px; display:grid; grid-template-columns:minmax(0,1.55fr) minmax(290px,.85fr); gap:16px; }
.panel { border:1px solid var(--line); border-radius:16px; background:var(--panel); box-shadow:0 10px 30px rgba(25,58,72,.045); overflow:hidden; }
.panel-title { min-height:72px; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:16px 20px; border-bottom:1px solid #e7edef; }.panel-title h2 { margin:5px 0 0; font-size:17px; color:#153542; }
.legend { display:flex; align-items:center; gap:6px; color:#7a8d95; font-size:10px; white-space:nowrap; }.dot { width:7px; height:7px; border-radius:50%; }.dot.danger { background:var(--red); }.dot.warn { background:var(--orange); }.dot.ok { background:var(--green); }
.boundary-map { position:relative; min-height:365px; padding:65px 20px 38px; overflow:hidden; background:linear-gradient(#eaf6f5 0 22%,#f8f7f1 22% 100%); }
.ground-line { position:absolute; top:18px; left:20px; right:20px; height:26px; border-bottom:2px solid #7a9fa7; color:#5f7b84; font-size:10px; }.water-band { position:absolute; top:44px; left:0; right:0; height:25px; opacity:.75; background:repeating-linear-gradient(170deg,#91d8dc 0 8px,#bdebed 8px 16px); }
.node-grid { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.boundary-node { min-height:100px; display:grid; grid-template-columns:34px 1fr; grid-template-rows:auto auto; column-gap:9px; align-content:center; padding:13px; border:1px solid #dce5e6; border-radius:12px; background:rgba(255,255,255,.95); text-align:left; cursor:default; }.boundary-node > span { grid-row:1/3; width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:#e7f4f3; color:#178a93; font-weight:800; }.boundary-node b { font-size:12px; }.boundary-node small { margin-top:5px; color:#84959d; font-size:10px; }.boundary-node.danger { border-style:dashed; border-color:#dc8f91; }.boundary-node.danger > span { background:#fbe7e6; color:#c64d52; }.boundary-node.warn { border-color:#ecc999; }.boundary-node.warn > span { background:#fff2df; color:#d3782f; }
.defense-line { position:absolute; left:20px; right:20px; bottom:19px; padding-top:9px; border-top:2px dashed var(--red); color:#9c5254; font-size:10px; }
.action-list { padding:8px 18px 16px; }.action-item { display:grid; grid-template-columns:44px 1fr; gap:11px; padding:14px 0; border-bottom:1px solid #edf1f2; }.action-item:last-child { border-bottom:0; }.action-item > span { align-self:start; padding:5px 6px; border-radius:6px; background:#e7f3f2; color:#167d86; font-size:10px; font-weight:800; text-align:center; }.action-item b { font-size:13px; }.action-item p { margin:5px 0; color:#637983; font-size:11px; line-height:1.65; }.action-item small { color:#99a6ac; font-size:10px; }
.local-proof { max-width:1240px; display:grid; grid-template-columns:minmax(220px,.8fr) minmax(0,1.5fr) auto; align-items:center; gap:24px; margin:0 auto; padding:20px 22px; border-radius:15px; color:white; background:linear-gradient(115deg,#0b2736,#0c4d58); }.local-proof .eyebrow { color:#64d2d1; }.local-proof h2 { margin:6px 0 0; font-size:17px; }.local-proof p { margin:0; color:#c6dde1; font-size:12px; line-height:1.8; }.local-proof a { color:#79e3df; }
.empty-view { min-height:65vh; display:grid; place-items:center; align-content:center; text-align:center; }.empty-view span { color:#168c98; font-size:11px; letter-spacing:.15em; }.empty-view h1 { margin:10px 0; }.empty-view p { color:#7e9199; }.mobile-nav { display:none; }
@media (max-width:1050px) { .metric-grid { grid-template-columns:repeat(2,1fr); }.dashboard-grid { grid-template-columns:1fr; }.local-proof { grid-template-columns:1fr auto; }.local-proof p { grid-column:1/-1; grid-row:2; } }
@media (max-width:760px) {
  .topbar { height:61px; padding:0 14px; }.brand-mark { width:36px; height:36px; }.brand-copy strong { font-size:14px; }.brand-copy small { font-size:9px; }.connection { padding:7px; font-size:0; }.connection-dot { margin:0; }
  .workspace { display:block; min-height:calc(100vh - 61px); }.sidebar { display:none; }.main-panel { padding:22px 13px calc(88px + env(safe-area-inset-bottom)); }.page-heading { align-items:flex-start; }.page-heading h1 { font-size:27px; }.page-heading p { font-size:13px; }.heading-stamp { display:none; }
  .metric-grid { grid-template-columns:1fr 1fr; gap:8px; }.metric-card { min-height:110px; padding:15px; }.metric-card strong { font-size:26px; }.standard-alert { grid-template-columns:30px 1fr; }.standard-alert a { grid-column:2; }
  .panel-title { align-items:flex-start; }.legend { display:none; }.boundary-map { padding-left:12px; padding-right:12px; }.node-grid { grid-template-columns:repeat(2,1fr); gap:8px; }.boundary-node { min-height:92px; padding:10px; }
  .local-proof { grid-template-columns:1fr; gap:12px; }.local-proof p,.local-proof a { grid-column:auto; grid-row:auto; }
  .mobile-nav { position:fixed; z-index:60; left:0; right:0; bottom:0; display:grid; grid-template-columns:repeat(5,1fr); padding:7px 7px calc(7px + env(safe-area-inset-bottom)); border-top:1px solid #d4e0e1; background:rgba(250,252,251,.96); backdrop-filter:blur(16px); box-shadow:0 -10px 28px rgba(12,43,57,.1); }.mobile-nav button { min-height:48px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:0; background:transparent; color:#70848c; font-size:9px; }.mobile-nav button span { width:25px; height:22px; display:grid; place-items:center; border-radius:7px; background:#eef3f3; font-size:10px; font-weight:800; }.mobile-nav button.active { color:#0a6974; font-weight:800; }.mobile-nav button.active span { color:white; background:#0c7f89; }
}
@media (max-width:390px) { .metric-grid { grid-template-columns:1fr; }.metric-card { min-height:auto; }.node-grid { grid-template-columns:1fr; }.brand-copy strong { max-width:210px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } }
@media print { .topbar,.sidebar,.mobile-nav { display:none!important; }.workspace { display:block; }.main-panel { padding:20px; }.panel,.metric-card { box-shadow:none; break-inside:avoid; } }

/* Global controls */
.asset-picker { display:flex; align-items:center; gap:8px; margin-left:18px; padding:6px 9px 6px 11px; border:1px solid rgba(255,255,255,.14); border-radius:10px; background:rgba(255,255,255,.07); color:#b9d6db; font-size:11px; }
.asset-picker select { max-width:150px; border:0; outline:0; background:transparent; color:white; font-weight:700; cursor:pointer; }
.asset-picker option { color:#102d3a; background:white; }
.top-action,.primary-button,.secondary-button { border:0; border-radius:9px; cursor:pointer; font-weight:800; transition:transform .16s ease,box-shadow .16s ease,background .16s ease; }
.top-action { padding:9px 12px; background:#6edbd7; color:#07333b; font-size:11px; }
.top-action:hover,.primary-button:hover { transform:translateY(-1px); box-shadow:0 8px 18px rgba(5,89,99,.18); }
.side-context { margin:23px 9px 0; padding:14px 12px; border-top:1px solid #ccd9db; }
.side-context span,.side-context b { display:block; }.side-context span { color:#87979d; font-size:10px; }.side-context b { margin:5px 0; color:#234754; font-size:12px; }.side-context p { margin:0; color:#748891; font-size:10px; line-height:1.65; }
.primary-button { min-height:45px; padding:0 18px; background:var(--cyan); color:white; }
.secondary-button { min-height:36px; padding:0 12px; border:1px solid #d6e2e4; background:#f4f8f8; color:#46636e; font-size:11px; }
.method-note { max-width:1240px; display:grid; grid-template-columns:110px 1fr; gap:14px; margin:16px auto 0; padding:15px 17px; border-left:3px solid #dcaa52; background:#fffaf0; color:#6c5e47; font-size:12px; line-height:1.75; }
.method-note b { color:#483e2f; }.method-note p { margin:0; }

/* Risk path and checklist */
.risk-red { --risk:#d84b50; --risk-soft:#fff0ef; }.risk-orange { --risk:#e78938; --risk-soft:#fff5e9; }.risk-yellow { --risk:#d2a52c; --risk-soft:#fff9df; }.risk-blue { --risk:#3189a4; --risk-soft:#edf8fb; }
.metric-card[class*="risk-"],.result-panel[class*="risk-"] { border-color:color-mix(in srgb,var(--risk) 48%,#dce6e9); background:linear-gradient(145deg,var(--risk-soft),#fff 68%); }
.metric-card[class*="risk-"] strong,.result-panel[class*="risk-"] .result-header strong { color:var(--risk); }
.risk-path-grid { max-width:1240px; display:grid; grid-template-columns:repeat(2,1fr); gap:13px; margin:0 auto 16px; }
.risk-path { display:grid; grid-template-columns:48px 1fr; gap:14px; padding:20px; border:1px solid var(--line); border-top:3px solid var(--path); border-radius:14px; background:white; box-shadow:0 8px 24px rgba(22,60,75,.035); }
.path-red { --path:var(--red); }.path-orange { --path:var(--orange); }.path-yellow { --path:#d0a22b; }.path-blue { --path:#3a8fa6; }
.path-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:13px; background:color-mix(in srgb,var(--path) 12%,white); color:var(--path); font-size:18px; font-weight:900; }
.risk-path h2 { margin:1px 0 11px; font-size:16px; }.risk-path p { margin:7px 0 0; color:#637984; font-size:11px; line-height:1.7; }.risk-path p b { color:#304f5b; }
.checklist-panel { max-width:1240px; margin:0 auto; }
.progress-ring { --p:0%; width:49px; height:49px; position:relative; display:grid; place-items:center; border-radius:50%; background:conic-gradient(var(--cyan) var(--p),#e3ecee 0); }
.progress-ring:after { content:""; position:absolute; inset:5px; border-radius:50%; background:white; }.progress-ring span { position:relative; z-index:1; color:#1b6972; font-size:11px; font-weight:900; }
.checklist { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:#e8eef0; }
.checklist button { min-height:76px; display:grid; grid-template-columns:34px 1fr; align-items:center; gap:12px; padding:14px 18px; border:0; background:white; text-align:left; cursor:pointer; }
.checklist button:hover { background:#f8fbfb; }.checklist button > span { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:#f0f3f3; color:#87969c; font-size:10px; font-weight:800; }.checklist button.checked > span { background:#dff3eb; color:#237d60; }
.checklist button b,.checklist button small { display:block; }.checklist button b { font-size:12px; }.checklist button small { margin-top:5px; color:#86969d; font-size:10px; }

/* Selection engine */
.selector-layout { max-width:1240px; display:grid; grid-template-columns:minmax(310px,.7fr) minmax(0,1.3fr); gap:16px; margin:0 auto 16px; }
.control-stack { padding:6px 20px 16px; }
.switch-row,.range-row { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px 0; border-bottom:1px solid #ecf1f2; }
.switch-row > span b,.switch-row > span small,.range-row > span b { display:block; }.switch-row > span b,.range-row > span b { font-size:12px; }.switch-row > span small { margin-top:5px; color:#82949b; font-size:10px; }
.switch-row input { position:absolute; opacity:0; pointer-events:none; }.switch-row i { width:40px; height:23px; position:relative; flex:0 0 auto; border-radius:30px; background:#cad5d8; cursor:pointer; transition:.18s ease; }.switch-row i:after { content:""; position:absolute; left:3px; top:3px; width:17px; height:17px; border-radius:50%; background:white; box-shadow:0 1px 4px rgba(0,0,0,.18); transition:.18s ease; }.switch-row input:checked + i { background:var(--cyan); }.switch-row input:checked + i:after { transform:translateX(17px); }
.range-row { display:block; }.range-row > span { display:flex; justify-content:space-between; }.range-row output { color:#147d87; font-size:12px; font-weight:800; }.range-row input,.range-control input { width:100%; margin-top:13px; accent-color:var(--cyan); }
.package-steps { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:#e7edef; }
.package-steps > div { min-height:151px; padding:19px; background:white; }.package-steps span { color:#168a95; font-size:10px; font-weight:900; letter-spacing:.08em; }.package-steps b { display:block; margin:12px 0 7px; font-size:14px; }.package-steps p { margin:0; color:#657b85; font-size:11px; line-height:1.7; }
.tech-grid { max-width:1240px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 auto; }
.tech-card { position:relative; min-height:275px; padding:20px; border:1px solid var(--line); border-radius:14px; background:white; overflow:hidden; }
.tech-rank { height:4px; position:absolute; top:0; left:0; right:0; background:#e7eef0; }.tech-rank i { height:100%; display:block; background:linear-gradient(90deg,#12a9b5,#57c9b4); }.tech-rank span { position:absolute; top:12px; right:16px; color:#769099; font-size:9px; font-style:normal; }
.tech-order { color:#a8b7bc; font-family:monospace; font-size:11px; }.tech-card h2 { margin:22px 0 8px; font-size:16px; }.tech-card > b { color:#147985; font-size:11px; }.tech-card p { margin:12px 0 0; color:#647b85; font-size:11px; line-height:1.65; }.tech-card p strong { color:#314f5b; }

/* Scenario sandbox */
.scenario-tabs { max-width:1240px; display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin:0 auto 14px; }
.scenario-tabs button { min-height:94px; padding:13px 14px; border:1px solid var(--line); border-radius:12px; background:white; text-align:left; cursor:pointer; }.scenario-tabs button:hover { border-color:#95c6ca; }.scenario-tabs button.active { border-color:#148c96; background:#eaf7f6; box-shadow:inset 0 0 0 1px #148c96; }.scenario-tabs span,.scenario-tabs b,.scenario-tabs small { display:block; }.scenario-tabs span { color:#168b96; font-size:10px; font-weight:900; }.scenario-tabs b { margin:7px 0 4px; font-size:12px; }.scenario-tabs small { color:#788c94; font-size:9px; line-height:1.5; }
.sandbox-layout { max-width:1240px; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(330px,.7fr); gap:16px; margin:0 auto 16px; align-items:start; }
.input-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0 22px; padding:8px 20px 14px; }
.range-control { min-height:90px; display:block; padding:14px 0 10px; border-bottom:1px solid #edf1f2; }.range-control > span { display:flex; align-items:center; justify-content:space-between; gap:10px; }.range-control b { font-size:11px; }.range-control output { color:#117984; font-size:11px; font-weight:900; }.range-control small { display:block; margin-top:4px; color:#99a7ac; font-size:9px; text-align:right; }
.scenario-switches { display:flex; flex-wrap:wrap; gap:8px; padding:0 20px 20px; }.scenario-switches label { display:flex; align-items:center; gap:7px; padding:8px 10px; border:1px solid #dce6e8; border-radius:8px; color:#5e757f; background:#f7f9f9; font-size:10px; cursor:pointer; }.scenario-switches input { accent-color:var(--cyan); }
.result-panel { border-top:4px solid var(--risk); }
.result-header { display:grid; grid-template-columns:1fr; gap:10px; padding:21px; border-bottom:1px solid #e6edef; }.result-header span,.result-header strong,.result-header small { display:block; }.result-header span { color:#6b8089; font-size:11px; }.result-header strong { margin:7px 0 3px; font-size:34px; }.result-header small { color:#83959d; font-size:10px; }.result-header p { margin:0; color:#405b66; font-size:11px; line-height:1.7; }
.result-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:#e6edef; }.result-grid > div { min-height:94px; padding:14px; background:white; }.result-grid span,.result-grid strong,.result-grid small { display:block; }.result-grid span { color:#748992; font-size:10px; }.result-grid strong { margin:8px 0 5px; color:#173e4c; font-size:16px; }.result-grid small { color:#98a6ab; font-size:9px; line-height:1.45; }.result-panel .primary-button { width:calc(100% - 40px); margin:18px 20px 20px; }
.recommendation-panel { max-width:1240px; display:grid; grid-template-columns:260px 1fr; gap:25px; margin:0 auto 16px; padding:21px 23px; border:1px solid #b8dadd; border-radius:15px; background:linear-gradient(125deg,#effafa,#fff); }.recommendation-panel h2 { margin:6px 0 0; font-size:17px; }.recommendation-panel ol { margin:0; padding-left:20px; color:#496470; font-size:11px; line-height:1.75; }.recommendation-panel li + li { margin-top:7px; }
.formula-grid { max-width:1240px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:0 auto; }.formula-grid article { padding:17px; border:1px solid var(--line); border-radius:12px; background:white; }.formula-grid b,.formula-grid code { display:block; }.formula-grid b { font-size:11px; }.formula-grid code { margin:10px 0; color:#0c7480; font-size:10px; line-height:1.5; white-space:normal; }.formula-grid p { margin:0; color:#788b94; font-size:9px; line-height:1.6; }

/* Resource center */
.resource-tabs { max-width:1240px; display:flex; gap:7px; margin:0 auto 14px; padding:5px; border:1px solid var(--line); border-radius:12px; background:#e8eeee; }.resource-tabs button { flex:1; min-height:41px; border:0; border-radius:8px; background:transparent; color:#667b84; font-size:11px; cursor:pointer; }.resource-tabs button.active { background:white; color:#0f727d; font-weight:900; box-shadow:0 4px 13px rgba(25,58,72,.07); }
.prompt-grid,.evidence-grid,.gate-grid { max-width:1240px; display:grid; gap:12px; margin:0 auto 16px; }.prompt-grid { grid-template-columns:repeat(3,1fr); }.evidence-grid { grid-template-columns:repeat(2,1fr); }.gate-grid { grid-template-columns:repeat(4,1fr); }
.prompt-card,.evidence-card,.gate-card { min-height:230px; padding:19px; border:1px solid var(--line); border-radius:14px; background:white; }
.prompt-card > span,.evidence-card span { color:#158793; font-size:9px; font-weight:900; letter-spacing:.08em; }.prompt-card h2,.evidence-card h2,.gate-card h2 { margin:12px 0 9px; font-size:14px; }.prompt-card p,.evidence-card p,.gate-card p { color:#657b85; font-size:10px; line-height:1.75; }.prompt-card button { width:100%; min-height:37px; margin-top:10px; border:1px solid #b8dadd; border-radius:8px; background:#eef9f8; color:#0d7881; font-size:10px; font-weight:800; cursor:pointer; }
.evidence-card > div { display:flex; justify-content:space-between; }.evidence-card i { padding:4px 7px; border-radius:6px; background:#e9f6f4; color:#32806e; font-size:9px; font-style:normal; }.evidence-card > b { color:#335966; font-size:10px; }.evidence-card a { display:inline-block; margin-top:10px; color:#0b7782; font-size:10px; font-weight:800; text-decoration:none; }
.gate-card { min-height:250px; border-top:3px solid #1d8b96; }.gate-card > span { width:31px; height:31px; display:grid; place-items:center; border-radius:8px; background:#dff3f2; color:#117b84; font-size:10px; font-weight:900; }.gate-card .reject { padding-top:10px; border-top:1px dashed #e1e7e8; color:#a85255; }
.action-roadmap { max-width:960px; margin:0 auto 16px; border:1px solid var(--line); border-radius:15px; background:white; overflow:hidden; }.roadmap-head { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:19px 21px; border-bottom:1px solid #e8edef; }.roadmap-head h2 { margin:6px 0 0; font-size:16px; }.wide-progress { width:210px; height:7px; border-radius:8px; background:#e5edef; overflow:hidden; }.wide-progress i { height:100%; display:block; border-radius:8px; background:linear-gradient(90deg,#12aab4,#58c99a); }
.action-roadmap > button { width:100%; min-height:81px; display:grid; grid-template-columns:35px 90px 1fr; align-items:center; gap:15px; padding:14px 21px; border:0; border-bottom:1px solid #edf1f2; background:white; text-align:left; cursor:pointer; }.action-roadmap > button:last-child { border-bottom:0; }.action-roadmap > button:hover { background:#f7fbfa; }.action-roadmap > button > span { width:31px; height:31px; display:grid; place-items:center; border-radius:50%; background:#eef2f3; color:#778c94; font-size:10px; font-weight:800; }.action-roadmap > button.done > span { background:#dff3e9; color:#287f61; }.action-roadmap > button > b { color:#16828d; font-size:11px; }.action-roadmap h3 { margin:0 0 5px; font-size:12px; }.action-roadmap p { margin:0; color:#738891; font-size:10px; line-height:1.6; }
.pwa-tip { max-width:960px; display:grid; grid-template-columns:120px 1fr; gap:18px; margin:16px auto 0; padding:14px 17px; border:1px dashed #a8cfd2; border-radius:12px; background:#eef9f8; color:#5c737c; font-size:10px; line-height:1.7; }.pwa-tip b { color:#156f77; }
.site-footer { max-width:1240px; display:flex; justify-content:space-between; gap:20px; margin:35px auto 0; padding-top:18px; border-top:1px solid #d8e2e4; color:#86979e; font-size:10px; }.site-footer b { color:#41616d; }

@media (max-width:1050px) {
  .asset-picker { margin-left:auto; }.connection { margin-left:0; }.tech-grid { grid-template-columns:repeat(2,1fr); }.formula-grid { grid-template-columns:repeat(2,1fr); }.gate-grid { grid-template-columns:repeat(2,1fr); }.prompt-grid { grid-template-columns:repeat(2,1fr); }.sandbox-layout { grid-template-columns:1fr; }.result-grid { grid-template-columns:repeat(4,1fr); }
}
@media (max-width:760px) {
  .asset-picker { order:4; width:100%; margin:0; padding:4px 8px; position:absolute; top:61px; left:0; right:0; border-radius:0; border:0; border-bottom:1px solid #cbdcde; background:#eaf2f2; color:#667c85; }.asset-picker select { flex:1; max-width:none; color:#153f4c; text-align:right; }.top-action { display:none; }.main-panel { padding-top:61px; }
  .risk-path-grid,.selector-layout,.tech-grid,.evidence-grid,.prompt-grid,.gate-grid { grid-template-columns:1fr; }.risk-path { grid-template-columns:40px 1fr; padding:16px; }.path-icon { width:39px; height:39px; }.checklist { grid-template-columns:1fr; }.method-note { grid-template-columns:1fr; gap:5px; }
  .package-steps { grid-template-columns:1fr; }.package-steps > div { min-height:auto; }.scenario-tabs { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:3px; }.scenario-tabs button { min-width:210px; scroll-snap-align:start; }.input-grid { grid-template-columns:1fr; }.result-grid { grid-template-columns:repeat(2,1fr); }.recommendation-panel { grid-template-columns:1fr; gap:12px; }.formula-grid { grid-template-columns:1fr 1fr; }
  .resource-tabs { overflow-x:auto; }.resource-tabs button { min-width:100px; }.roadmap-head { display:block; }.wide-progress { width:100%; margin-top:14px; }.action-roadmap > button { grid-template-columns:32px 68px 1fr; gap:9px; padding:12px; }.pwa-tip { grid-template-columns:1fr; gap:4px; }.site-footer { display:block; line-height:1.7; }.site-footer span { display:block; margin-top:4px; }
}
@media (max-width:430px) {
  .formula-grid { grid-template-columns:1fr; }.result-grid { grid-template-columns:1fr 1fr; }.result-grid > div { min-height:89px; }.action-roadmap > button { grid-template-columns:30px 1fr; }.action-roadmap > button div { grid-column:2; }.brand-copy { max-width:230px; }
}

/* Static PWA view system and professional graphic content */
.view { display:none; animation:view-in .2s ease; }
.view.active { display:block; }
@keyframes view-in { from { opacity:.25; transform:translateY(4px); } to { opacity:1; transform:none; } }
.noscript { position:fixed; inset:auto 12px 12px; z-index:100; padding:12px; border-radius:10px; background:#8c3034; color:white; text-align:center; }
.engineering-visual { max-width:1240px; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr); margin:0 auto 16px; border:1px solid #cddcdf; border-radius:17px; background:#092634; overflow:hidden; box-shadow:0 12px 34px rgba(7,36,49,.12); }
.visual-media { min-height:390px; position:relative; background:#0b2a38; overflow:hidden; }
.visual-media:after { content:"原理示意 · 非施工图"; position:absolute; left:16px; bottom:15px; padding:7px 10px; border:1px solid rgba(255,255,255,.25); border-radius:7px; color:#d7ecee; background:rgba(4,24,34,.72); backdrop-filter:blur(8px); font-size:9px; letter-spacing:.08em; }
.visual-media img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; display:block; }
.engineering-visual figcaption { display:flex; flex-direction:column; justify-content:space-between; gap:20px; padding:24px; color:white; background:linear-gradient(150deg,#0a2a39,#0b3f48); }
.engineering-visual h2 { margin:7px 0 9px; font-size:20px; line-height:1.35; }.engineering-visual p { margin:0; color:#bad2d7; font-size:11px; line-height:1.8; }.engineering-visual ol { margin:0; padding:0; list-style:none; }.engineering-visual li { display:grid; grid-template-columns:70px 1fr; gap:10px; padding:11px 0; border-top:1px solid rgba(255,255,255,.1); }.engineering-visual li b { color:#68d6d3; font-size:10px; }.engineering-visual li span { color:#d5e5e7; font-size:10px; line-height:1.55; }
.diagram-grid { max-width:1240px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 auto 16px; }
.diagram-card { min-height:215px; padding:18px; border:1px solid var(--line); border-radius:14px; background:white; box-shadow:0 7px 22px rgba(22,60,75,.035); }
.diagram-head { display:flex; align-items:center; gap:11px; }.diagram-head > span { width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:#dff3f2; color:#127b84; font-size:10px; font-weight:900; }.diagram-head b,.diagram-head small { display:block; }.diagram-head b { font-size:13px; }.diagram-head small { margin-top:3px; color:#8a9aa0; font-size:9px; }
.diagram-card > p { margin:14px 0 0; color:#687e87; font-size:10px; line-height:1.65; }
.flow-line { display:flex; align-items:center; gap:5px; margin-top:20px; overflow:hidden; }.flow-line i { flex:1; min-height:45px; display:grid; place-items:center; padding:5px; border-radius:8px; background:#edf7f7; color:#24727b; font-size:8px; font-style:normal; text-align:center; }.flow-line i.danger { background:#fff0ef; color:#b44b50; }.flow-line em { color:#6f9ca3; font-size:10px; font-style:normal; }
.defense-stack { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin-top:17px; }.defense-stack i { min-height:37px; display:grid; place-items:center; padding:6px; border-left:3px solid #14949e; background:#eef8f7; color:#356671; font-size:8px; font-style:normal; text-align:center; }
.evidence-chain { display:grid; grid-template-columns:repeat(6,1fr); gap:3px; margin-top:23px; }.evidence-chain i { position:relative; min-height:38px; display:grid; place-items:center; border-radius:6px; background:#0c4551; color:white; font-size:8px; font-style:normal; }.evidence-chain i:not(:last-child):after { content:""; width:5px; height:2px; position:absolute; right:-4px; background:#72bdc3; }
.action-list > div { display:grid; grid-template-columns:48px 1fr; column-gap:11px; padding:14px 0; border-bottom:1px solid #edf1f2; }.action-list > div:last-child { border-bottom:0; }.action-list > div > span { grid-row:1/3; align-self:start; padding:5px; border-radius:6px; background:#e7f3f2; color:#167d86; font-size:9px; font-weight:900; text-align:center; }.action-list > div > b { font-size:12px; }.action-list > div > p { margin:5px 0 0; color:#637983; font-size:10px; line-height:1.6; }
.resource-panel { display:none; }.resource-panel.active { display:block; animation:view-in .18s ease; }
.connection.offline .connection-dot,.connection.offline i { background:#f0ba55; }.connection i { width:7px; height:7px; border-radius:50%; background:#57dca1; box-shadow:0 0 0 4px rgba(87,220,161,.12); }
.install-btn { min-height:36px; padding:0 12px; border:0; border-radius:8px; background:#6edbd7; color:#07333b; font-size:10px; font-weight:900; cursor:pointer; }
.progress-ring { background:conic-gradient(var(--cyan) var(--p,0%),#e3ecee 0); }
.action-roadmap #actionList > button { width:100%; min-height:81px; display:grid; grid-template-columns:35px 90px 1fr; align-items:center; gap:15px; padding:14px 21px; border:0; border-bottom:1px solid #edf1f2; background:white; text-align:left; cursor:pointer; }.action-roadmap #actionList > button:last-child { border-bottom:0; }.action-roadmap #actionList > button:hover { background:#f7fbfa; }.action-roadmap #actionList > button > span { width:31px; height:31px; display:grid; place-items:center; border-radius:50%; background:#eef2f3; color:#778c94; font-size:10px; font-weight:800; }.action-roadmap #actionList > button.done > span { background:#dff3e9; color:#287f61; }.action-roadmap #actionList > button > b { color:#16828d; font-size:11px; }.action-roadmap #actionList h3 { margin:0 0 5px; font-size:12px; }.action-roadmap #actionList p { margin:0; color:#738891; font-size:10px; line-height:1.6; }
.evidence-card > div:first-child { display:flex; justify-content:space-between; gap:10px; }.evidence-card a { overflow-wrap:anywhere; }
.source-tag { display:inline-flex; align-items:center; min-height:22px; padding:0 7px; border-radius:6px; background:#edf5f5; color:#54717b; font-size:8px; }

@media (max-width:1050px) {
  .engineering-visual { grid-template-columns:1fr; }.visual-media { min-height:440px; }.diagram-grid { grid-template-columns:1fr 1fr; }.diagram-card:last-child { grid-column:1/-1; }
}
@media (max-width:760px) {
  .engineering-visual { display:block; }.visual-media { min-height:300px; }.engineering-visual figcaption { padding:18px; }.engineering-visual h2 { font-size:17px; }.diagram-grid { grid-template-columns:1fr; }.diagram-card:last-child { grid-column:auto; }.flow-line { gap:3px; }.flow-line i { min-height:42px; font-size:7px; }.install-btn { display:none; }.action-roadmap #actionList > button { grid-template-columns:32px 68px 1fr; gap:9px; padding:12px; }
}
@media (max-width:430px) {
  .visual-media { min-height:230px; }.engineering-visual li { grid-template-columns:62px 1fr; }.evidence-chain { grid-template-columns:repeat(3,1fr); gap:5px; }.evidence-chain i:after { display:none; }.action-roadmap #actionList > button { grid-template-columns:30px 1fr; }.action-roadmap #actionList > button div { grid-column:2; }
}