/* 微砼工作室 OS 平台 · 组件与布局（V2）
   依赖 tokens.css；数据面用 1px 细线，阴影只给浮层。 */

/* ---------- 布局外壳 ---------- */
.app-nav {
    position: fixed; left:0; top:0; bottom:0; width: var(--nav-w);
    background: var(--surface); border-right: 1px solid var(--line);
    display:flex; flex-direction:column; z-index:20;
}
.app-nav__brand { padding: var(--sp-5) var(--sp-5) var(--sp-4); border-bottom:1px solid var(--line); display:flex; align-items:center; gap: var(--sp-3); }
.app-nav__logo { width:36px; height:36px; border-radius: var(--r-md); background: var(--brand-800); color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; }
.app-nav__title { font-size:13px; font-weight:600; letter-spacing:.02em; }
.app-nav__sub { font-size:var(--fs-cap); color: var(--muted); }
.app-nav__list { flex:1; overflow-y:auto; padding: var(--sp-3); }
.nav-group { padding: var(--sp-4) var(--sp-3) var(--sp-2); font-size:11px; font-weight:600; color: var(--muted-2); letter-spacing:.08em; }
.nav-item {
    width:100%; display:flex; align-items:center; gap: var(--sp-3);
    padding: 9px var(--sp-3); margin-bottom:2px; border-radius: var(--r-sm);
    color: var(--ink-2); font-size:13px; font-weight:500; text-align:left; cursor:pointer;
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.nav-item i { width:16px; text-align:center; color: var(--muted); font-size:13px; transition: color var(--dur-1) var(--ease); }
.nav-item:hover { background: var(--surface-2); color: var(--ink); }
.nav-item:hover i { color: var(--ink-2); }
.nav-item.active { background: var(--brand-50); color: var(--brand-800); font-weight:600; box-shadow: inset 2px 0 0 var(--brand-700); }
.nav-item.active i { color: var(--brand-700); }
.nav-item.nav-item--restricted { color: var(--muted-2); opacity:.58; cursor:not-allowed; }
.nav-item.nav-item--restricted i { color: var(--muted-2); }
.nav-item.nav-item--restricted:hover { background: var(--surface-2); color: var(--muted-2); }
.nav-item.nav-item--restricted:hover i { color: var(--muted-2); }
.app-nav__foot { padding: var(--sp-4); border-top:1px solid var(--line); font-size:11px; color: var(--muted); }
.app-nav__foot b { color: var(--brand-800); font-weight:600; }

.app-main { margin-left: var(--nav-w); min-height:100vh; display:flex; flex-direction:column; }
.app-topbar {
    position: sticky; top:0; z-index:15; height: var(--top-h);
    display:flex; align-items:center; justify-content:space-between; gap: var(--sp-4);
    padding: 0 var(--sp-8); background: rgba(255,255,255,.86);
    backdrop-filter: blur(10px); border-bottom:1px solid var(--line);
}
.app-content { padding: var(--sp-8); width:100%; max-width: var(--content-max); margin-inline:auto; }
.page-title { font-size: var(--fs-title); font-weight:600; letter-spacing:-0.01em; }
.page-sub { font-size: var(--fs-cap); color: var(--muted); margin-top:2px; }
.topbar-right { display:flex; align-items:center; gap: var(--sp-5); }
body.public-home .app-nav { display:none; }
body.public-home .app-main { margin-left:0; }
body.public-home .app-topbar { padding-inline: max(var(--sp-6), calc((100vw - var(--content-max)) / 2 + var(--sp-8))); }
body.public-home #notify-btn,
body.public-home #current-date,
body.public-home #header-avatar { display:none; }
.avatar { border-radius: var(--r-pill); object-fit:cover; background: var(--surface-2); }
.avatar--sm { width:30px; height:30px; border:1px solid var(--line); }
.avatar--lg { width:72px; height:72px; }
.avatar--xl { width:120px; height:120px; }

/* ---------- 卡片：数据面用 1px 细线，不用阴影 ---------- */
.card {
    background: var(--surface); border:1px solid var(--line);
    border-radius: var(--r-lg); padding: var(--sp-6);
}
.card--pad-lg { padding: var(--sp-8); }
.card--flat { border-radius: var(--r-md); }
.card--row { position:relative; padding-left: calc(var(--sp-6) + 6px); }
.card--row::before {
    content:''; position:absolute; left:0; top: var(--sp-6); bottom: var(--sp-6);
    width:3px; border-radius: 0 3px 3px 0; background: var(--brand-700);
}
.card--row.is-done::before { background: var(--line-2); }
.card--row.is-done { background: var(--surface-2); }
.card--warn { border-color: var(--warn-line); background: #fffdf8; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.card-head h4 { font-size: var(--fs-cap); text-transform: uppercase; letter-spacing:.08em; color: var(--muted); font-weight:600; }
.card:hover { border-color: var(--line-2); }

/* ---------- 行 / 分组 ---------- */
.row { display:flex; align-items:center; justify-content:space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); }
.row--warn { background: var(--warn-bg); }
.row--flat { border-bottom:1px solid var(--line); border-radius:0; padding: var(--sp-3) 0; }
.row--flat:last-child { border-bottom:0; }
.stack-2 > * + * { margin-top: var(--sp-2); }
.stack-3 > * + * { margin-top: var(--sp-3); }
.stack-4 > * + * { margin-top: var(--sp-4); }
.stack-6 > * + * { margin-top: var(--sp-6); }
.note {
    background: var(--surface); border:1px solid var(--line); border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4); font-size: var(--fs-cap); color: var(--muted);
}
.note--brand { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand-800); }
.field-note { font-size: var(--fs-cap); color: var(--muted-2); }
.kv { display:grid; grid-template-columns: auto 1fr; gap: 2px var(--sp-4); font-size: var(--fs-cap); color: var(--muted); }
.kv dt { color: var(--muted-2); }
.kv dd { color: var(--ink-2); }

/* ---------- 空状态 ---------- */
.empty {
    text-align:center; padding: var(--sp-10) var(--sp-6);
    color: var(--muted); font-size:13px;
}
.empty::before {
    content:''; display:block; width:40px; height:1px; margin:0 auto var(--sp-4);
    background: var(--line-2);
}

/* ---------- 按钮 ---------- */
.btn-green, .btn-primary {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    background: var(--brand-800); color:#fff; border:1px solid var(--brand-800);
    padding: 9px var(--sp-4); border-radius: var(--r-sm);
    font-size:13px; font-weight:600; cursor:pointer;
    transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.btn-green:hover, .btn-primary:hover { background: var(--brand-900); border-color: var(--brand-900); }
.btn-green:active, .btn-primary:active { transform: translateY(1px); }
.btn-green[disabled], .btn-primary[disabled] { opacity:.5; cursor:not-allowed; }
.btn-ghost {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    background: var(--surface); color: var(--ink-2); border:1px solid var(--line-2);
    padding: 9px var(--sp-4); border-radius: var(--r-sm);
    font-size:13px; font-weight:600; cursor:pointer;
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); border-color: var(--muted-2); }
.btn-danger { background: var(--surface); color: var(--danger-fg); border:1px solid var(--danger-line); }
.btn-danger:hover { background: var(--danger-bg); }
.btn-sm { padding: 5px var(--sp-3); font-size: var(--fs-cap); border-radius: var(--r-xs); }
.btn-link { background:none; border:0; padding:0; font-size: var(--fs-cap); font-weight:600; cursor:pointer; }
.btn-link--ok { color: var(--ok-fg); }
.btn-link--warn { color: var(--warn-fg); }
.btn-link--danger { color: var(--danger-fg); }
.btn-link--plain { color: var(--ink-2); }

/* ---------- 输入 ---------- */
.input-base {
    width:100%; background: var(--surface); border:1px solid var(--line-2);
    border-radius: var(--r-sm); padding: 9px var(--sp-3);
    font-size:13px; color: var(--ink); outline:none;
    transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.input-base::placeholder { color: var(--muted-2); }
.input-base:focus { border-color: var(--brand-600); box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
.input-base:disabled { background: var(--surface-2); color: var(--muted); }
.field > label { display:block; font-size: var(--fs-cap); color: var(--muted); margin-bottom: var(--sp-1); }
.field .req::after { content:' *'; color: var(--danger-fg); }
.field-error { font-size: var(--fs-cap); color: var(--danger-fg); margin-top: var(--sp-1); min-height:16px; }
.input-base.is-invalid { border-color: var(--danger-line); }

/* ---------- 徽标：全站唯一的语义状态定义 ---------- */
.badge {
    display:inline-flex; align-items:center; gap:4px;
    padding: 2px 9px; border-radius: var(--r-pill);
    font-size:11px; font-weight:600; line-height:1.7; white-space:nowrap;
    background: var(--mute-bg); color: var(--mute-fg); border:1px solid transparent;
}
.badge--ok     { background: var(--ok-bg);     color: var(--ok-fg);     border-color: var(--ok-line); }
.badge--warn   { background: var(--warn-bg);   color: var(--warn-fg);   border-color: var(--warn-line); }
.badge--danger { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-line); }
.badge--info   { background: var(--info-bg);   color: var(--info-fg);   border-color: var(--info-line); }
.badge--brand  { background: var(--brand-50);  color: var(--brand-800); border-color: var(--brand-100); }
.badge--xs     { font-size:10px; padding:1px 7px; }
.tag { display:inline-flex; align-items:center; padding:2px 9px; border-radius: var(--r-pill); font-size:11px; font-weight:600; background: var(--mute-bg); color: var(--mute-fg); }
.tag-ing { background: var(--brand-50); color: var(--brand-800); }

/* ---------- 表格：细线分隔 + 悬浮高亮（Linear） ---------- */
body .table { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
body .table th {
    text-align:left; padding: 10px var(--sp-4); background: var(--surface-2);
    font-size:11px; font-weight:600; color: var(--muted); letter-spacing:.04em;
    border-bottom:1px solid var(--line); white-space:nowrap;
}
body .table th:first-child { border-top-left-radius: var(--r-md); }
body .table th:last-child { border-top-right-radius: var(--r-md); }
body .table td { padding: var(--sp-3) var(--sp-4); border-bottom:1px solid var(--line); vertical-align:top; color: var(--ink-2); }
body .table tbody tr:hover td { background: var(--surface-2); }
body .table tbody tr:last-child td { border-bottom:0; }
.table-num { text-align:right; font-variant-numeric: tabular-nums; color: var(--ink); font-weight:600; }

/* ---------- 表格单元格语义（V1.2 列表体系） ---------- */
body .table td { height:46px; }
.cell-date { white-space:nowrap; color:var(--muted); font-variant-numeric:tabular-nums; font-size:var(--fs-cap); }
.cell-cat { white-space:nowrap; }
.cell-reason { min-width:16rem; max-width:26rem; color:var(--ink-2); }
.cell-reason .expandable-text, .cell-note .expandable-text { max-width:26rem; }
.cell-sub { display:block; font-size:10px; color:var(--muted-2); margin-top:2px; }
.cell-att { font-size:var(--fs-cap); }
.cell-note { min-width:9rem; font-size:var(--fs-cap); }
.cell-actions { white-space:nowrap; }
.act-row { display:flex; gap:var(--sp-3); align-items:center; justify-content:flex-end; opacity:.62; transition: opacity var(--dur-1) var(--ease); }
body .table tbody tr:hover .act-row { opacity:1; }
body .table th.table-num, body .table td.table-num { text-align:right; }
.table-empty { text-align:center; color:var(--muted); padding: var(--sp-8) 0 !important; }

/* ---------- 行列表与时间线（V1.3 内容层） ---------- */
.list { border-top:1px solid var(--line); }
.list__row { display:flex; gap: var(--sp-4); align-items:flex-start; padding: var(--sp-4) 0; border-bottom:1px solid var(--line); }
.list__row:last-child { border-bottom:0; }
.list__body { flex:1; min-width:0; }
.list__title { font-size:14px; font-weight:600; color: var(--ink); }
.list__excerpt { font-size:13px; color: var(--ink-2); margin-top:3px; }
.list__excerpt:not(.expandable-text) { overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.expandable-text { min-width:0; max-width:100%; }
.expandable-text__body { max-width:100%; max-height:3.2em; overflow:hidden; overflow-wrap:anywhere; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.6; }
.expandable-text.is-expanded .expandable-text__body { display:block; max-height:none; overflow:visible; }
.expandable-text__toggle { display:inline-flex; align-items:center; gap:5px; margin-top:4px; padding:0; border:0; background:none; color:var(--brand-700); font-size:12px; line-height:1.5; cursor:pointer; }
.expandable-text__toggle[hidden] { display:none; }
.expandable-text__toggle:hover { color:var(--brand-800); text-decoration:underline; }
.expandable-text--note { color:var(--warn-fg); font-size:10px; }
.list__meta { display:flex; flex-wrap:wrap; gap: var(--sp-3); align-items:center; font-size: var(--fs-cap); color: var(--muted-2); margin-top: var(--sp-2); }
.list__side { flex-shrink:0; white-space:nowrap; opacity:.55; transition: opacity var(--dur-1) var(--ease); }
.list__row:hover .list__side { opacity:1; }

.timeline { position:relative; padding-left: var(--sp-5); }
.timeline::before { content:''; position:absolute; left:3px; top:10px; bottom:10px; width:1px; background: var(--line); }
.timeline__item { position:relative; padding: var(--sp-3) 0; }
.timeline__item:first-child { padding-top:0; }
.timeline__item::before { content:''; position:absolute; left: calc(var(--sp-5) * -1); top:17px; width:7px; height:7px; border-radius:50%; background: var(--brand-600); box-shadow:0 0 0 3px var(--surface); }
.timeline__item:first-child::before { top:6px; }

/* ---------- 骨架屏与动效（V1.4 反馈层） ---------- */
.skeleton {
    background: linear-gradient(90deg, var(--surface-2) 25%, #e7ebf0 37%, var(--surface-2) 63%);
    background-size: 400% 100%; animation: shimmer 1.25s ease-in-out infinite;
    border-radius: var(--r-xs); height:12px;
}
@keyframes shimmer { 0% { background-position:100% 0; } 100% { background-position:0 0; } }
.sk-card { border:1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: var(--sp-6); }
.sk-row { display:flex; align-items:center; gap: var(--sp-4); padding: var(--sp-3) 0; }
.sk-row + .sk-row { border-top:1px solid var(--line); }
.row-enter { animation: rowEnter var(--dur-3) var(--ease); }
@keyframes rowEnter { from { opacity:0; transform: translateY(-4px); } to { opacity:1; transform:none; } }
.fade-out { animation: fadeOut var(--dur-2) var(--ease) forwards; }
@keyframes fadeOut { to { opacity:0; } }

/* ---------- 工作台（V1.5，案例：云控制台概览页） ---------- */
.dash-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap: var(--sp-5); }
.dash-card { display:flex; flex-direction:column; }
.dash-card--wide { grid-column: span 2; }
.dash-todo { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap: var(--sp-3); }
.dash-todo__empty { grid-column:1 / -1; display:flex; align-items:center; justify-content:center; min-height:104px; text-align:center; color:var(--muted); font-size:13px; }
.dash-todo__i {
    text-align:left; background: var(--surface); border:1px solid var(--line);
    border-radius: var(--r-md); padding: var(--sp-4); cursor:pointer;
    transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.dash-todo__i:hover { border-color: var(--brand-600); background: var(--brand-50); }
.dash-todo__n { font-size:26px; font-weight:600; letter-spacing:-.02em; line-height:1.1; color: var(--ink); }
.dash-todo__k { font-size: var(--fs-cap); color: var(--muted); margin-top:3px; }
.dash-kv { display:flex; flex-direction:column; gap: var(--sp-3); }
.dash-kv__r { display:flex; justify-content:space-between; align-items:baseline; gap: var(--sp-3); font-size:13px; color: var(--ink-2); }
.dash-kv__r b { font-size:18px; font-weight:600; color: var(--ink); font-variant-numeric: tabular-nums; }
.dash-kv__r span { color: var(--muted); }
.mini-bar { height:4px; border-radius:2px; background: var(--surface-3); overflow:hidden; margin-top: var(--sp-2); }
.mini-bar > i { display:block; height:100%; background: var(--brand-600); }
/* 限制列表高度，记录过多时在卡片内部滚动 */
#dash-recent, #activity-list { min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; }
#dash-recent { max-height:20rem; }
#activity-list { max-height:22rem; }
#dash-recent::-webkit-scrollbar, #activity-list::-webkit-scrollbar { width:6px; }
#dash-recent::-webkit-scrollbar-thumb, #activity-list::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:var(--r-pill); }
#dash-recent::-webkit-scrollbar-track, #activity-list::-webkit-scrollbar-track { background:transparent; }
@media (min-width:1600px) { .dash-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:1200px) { .dash-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:820px) { .dash-grid { grid-template-columns:1fr; } .dash-card--wide { grid-column:span 1; } .dash-todo { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---------- 表单与查询栏（V1.6） ---------- */
.form-grid { display:grid; gap: var(--sp-4); }
.form-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.form-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.form-sec { border-top:1px solid var(--line); padding-top: var(--sp-5); margin-top: var(--sp-5); }
.form-sec:first-child { border-top:0; padding-top:0; margin-top:0; }
.form-sec__t { font-size: var(--fs-cap); font-weight:600; color: var(--muted); letter-spacing:.06em; margin-bottom: var(--sp-3); }
.filter-bar { display:flex; flex-wrap:wrap; align-items:center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.filter-bar .input-base { width:auto; min-width:180px; }
.filter-bar select.input-base { min-width:130px; }
.danger-note { background: var(--danger-bg); border:1px solid var(--danger-line); color: var(--danger-fg); border-radius: var(--r-sm); padding: var(--sp-3); font-size: var(--fs-cap); }
@media (max-width:820px) { .form-grid--2, .form-grid--3 { grid-template-columns:1fr; } }

/* ---------- 通知 / 折叠导航 / 视图偏好（V1.7） ---------- */
.btn-icon { position:relative; background:none; border:0; cursor:pointer; color: var(--ink-2); font-size:15px; padding:6px; border-radius: var(--r-sm); }
.btn-icon:hover { background: var(--surface-2); color: var(--ink); }
.notify-dot { position:absolute; top:-2px; right:-4px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background: var(--danger-fg); color:#fff; font-size:10px; line-height:16px; text-align:center; }
.cr-review-btn { position:relative; }
.copyright-applications { scroll-margin-top: calc(var(--top-h) + var(--sp-4)); }
#content-copyright { scroll-margin-top: calc(var(--top-h) + var(--sp-4)); }
.copyright-applications__title { font-size:var(--fs-title); font-weight:600; }
.notify-item { display:flex; gap: var(--sp-3); align-items:flex-start; padding: var(--sp-3) 0; border-bottom:1px solid var(--line); cursor:pointer; }
.notify-item:last-child { border-bottom:0; }
.notify-item:hover .notify-item__t { color: var(--brand-800); }
.nav-toggle { width:100%; display:flex; align-items:center; gap: var(--sp-3); padding:7px var(--sp-3); margin-bottom: var(--sp-3); border-radius: var(--r-sm); border:0; background:none; color: var(--muted); font-size:12px; cursor:pointer; }
.nav-toggle:hover { background: var(--surface-2); color: var(--ink); }

body.nav-collapsed { --nav-w: 68px; }
body.nav-collapsed .app-nav__title,
body.nav-collapsed .app-nav__sub,
body.nav-collapsed .nav-group,
body.nav-collapsed .nav-item span,
body.nav-collapsed .nav-toggle span { display:none; }
body.nav-collapsed .app-nav__brand { justify-content:center; padding-left:0; padding-right:0; }
body.nav-collapsed .nav-item, body.nav-collapsed .nav-toggle { justify-content:center; padding-left:0; padding-right:0; }
body.nav-collapsed .app-nav__foot > div { display:none; }
.app-nav, .app-main { transition: margin-left var(--dur-2) var(--ease), width var(--dur-2) var(--ease); }

/* ---------- 可达性与命令面板（V1.8） ---------- */
.skip-link {
    position:absolute; left:-9999px; top:0; z-index:300;
    background: var(--brand-800); color:#fff; padding:10px 16px;
    border-radius: 0 0 var(--r-sm) 0; font-size:13px; font-weight:600;
}
.skip-link:focus { left:0; }
.cmdk-item {
    display:flex; justify-content:space-between; align-items:center; gap: var(--sp-4);
    width:100%; text-align:left; padding:10px var(--sp-3); border:0; background:none;
    border-radius: var(--r-sm); cursor:pointer; font-size:13px; color: var(--ink);
}
.cmdk-item:hover, .cmdk-item:focus-visible { background: var(--surface-2); }
.cmdk-item span:last-child { color: var(--muted); font-size: var(--fs-cap); }
.sr-only {
    position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ---------- 覆盖 Tailwind 的圆角/阴影/密度，收敛到令牌（body 前缀保证优先级） ---------- */
body .rounded-2xl, body .rounded-3xl { border-radius: var(--r-lg); }
body .rounded-xl { border-radius: var(--r-md); }
body .rounded-lg { border-radius: var(--r-sm); }
body .glass-card { background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg); backdrop-filter:none; }
body .shadow-sm, body .shadow { box-shadow: none; }
body .p-8 { padding: var(--sp-6); }
body .p-6 { padding: var(--sp-5); }
body .p-4 { padding: var(--sp-3); }
body .mb-8 { margin-bottom: var(--sp-6); }
body .mb-6 { margin-bottom: var(--sp-5); }

/* ---------- 登录遮罩 ---------- */
#login-overlay {
    position: fixed; inset: 0; overflow: hidden;
    background: rgba(15,23,42,.58); backdrop-filter: blur(4px);
    z-index: 100; display: none; align-items: center; justify-content: center;
    padding: var(--sp-6) var(--sp-4);
    scrollbar-width:none;
}
#login-overlay::-webkit-scrollbar { display:none; }
#login-overlay.login-open { display:flex; }
.login-bg { position:fixed; inset:0; pointer-events:none; overflow:hidden; }
.login-bg { display:none; }
.login-grid {
    position:absolute; inset:0;
    background-image: radial-gradient(rgba(167,232,198,.16) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 70%);
            mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 70%);
}
.login-orb { position:absolute; border-radius:50%; filter: blur(60px); opacity:.55; animation: loginFloat 14s ease-in-out infinite alternate; }
.login-orb--a { width:460px; height:460px; left:-120px; top:-140px; background: radial-gradient(circle, #2f8f55 0%, transparent 70%); }
.login-orb--b { width:520px; height:520px; right:-160px; bottom:-200px; background: radial-gradient(circle, #6fe3b0 0%, transparent 70%); opacity:.28; animation-delay:-6s; }
@keyframes loginFloat { from { transform: translate(0,0); } to { transform: translate(40px,30px); } }

.login-shell {
    position:relative; z-index:1; width:100%; max-width: 820px; max-height:90vh; overflow:hidden; margin:auto;
    display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,360px);
    border-radius: var(--r-lg); overflow-x:hidden;
    border:1px solid rgba(255,255,255,.14);
    box-shadow: 0 40px 90px -30px rgba(0,0,0,.65);
    animation: loginIn 520ms var(--ease) both;
    scrollbar-width:none;
}
.login-shell::-webkit-scrollbar { display:none; }
.login-close {
    position:absolute; z-index:2; top:12px; right:12px; width:32px; height:32px;
    display:flex; align-items:center; justify-content:center; border:1px solid var(--line);
    border-radius:var(--r-sm); background:var(--surface); color:var(--muted); cursor:pointer;
}
.login-close:hover { color:var(--ink); background:var(--surface-2); }
@keyframes loginIn { from { opacity:0; transform: translateY(14px) scale(.985); } to { opacity:1; transform:none; } }

.login-brand {
    position:relative; display:flex; flex-direction:column; justify-content:space-between; gap: var(--sp-8);
    padding: var(--sp-10); color:#e6f3ea;
    background: #174b2b;
}
.login-brand::after {
    content:''; position:absolute; right:-80px; bottom:-80px; width:280px; height:280px; border-radius:50%;
    border:1px solid rgba(167,232,198,.18); box-shadow: 0 0 0 40px rgba(167,232,198,.04), 0 0 0 80px rgba(167,232,198,.025);
    pointer-events:none;
}
.login-brand__mark { display:flex; align-items:center; gap: var(--sp-2); font-size:12px; font-weight:600; letter-spacing:.2em; color:#a7e8c6; }
.login-brand__mark i { width:30px; height:30px; border-radius: var(--r-md); background: rgba(111,227,176,.16); display:flex; align-items:center; justify-content:center; color:#6fe3b0; font-size:14px; }
.login-brand__eyebrow { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#8fc7a6; }
.login-brand__t { color:#fff; font-size:34px; line-height:1.18; letter-spacing:-.02em; margin: var(--sp-3) 0 var(--sp-4); }
.login-brand__d { font-size:13.5px; line-height:1.8; color:#cfe6d6; max-width:36ch; }
.login-brand__pts { margin-top: var(--sp-6); display:flex; flex-direction:column; gap: var(--sp-2); }
.login-brand__pts li { display:flex; align-items:center; gap: var(--sp-3); font-size:13px; color:#e6f3ea; }
.login-brand__pts i { width:26px; height:26px; border-radius:50%; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; font-size:11px; color:#6fe3b0; }
.login-brand__foot { font-size:11.5px; color:#8fc7a6; }

.login-box {
    background: var(--surface); padding: var(--sp-10) var(--sp-8); width:100%; text-align:center;
    display:flex; flex-direction:column; justify-content:center;
}
.login-logo {
    width:56px; height:56px; border-radius: 14px; color:#fff; display:flex; align-items:center; justify-content:center;
    margin:0 auto var(--sp-5); font-size:24px;
    background: linear-gradient(145deg, var(--brand-700), var(--brand-900));
    box-shadow: 0 10px 24px -10px rgba(21,128,61,.7), inset 0 1px 0 rgba(255,255,255,.2);
}
.login-title { font-size:24px; font-weight:700; color: var(--ink); margin-bottom: var(--sp-1); }
.login-sub { font-size:13px; color: var(--muted); margin-bottom: var(--sp-6); }
.login-box .input-base { height:46px; background: var(--surface-2); border-color: transparent; transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.login-box .input-base:hover { background: var(--surface-3); }
.login-box .input-base:focus { background: var(--surface); border-color: var(--brand-600); }
.login-box .relative > i { transition: color var(--dur-2) var(--ease); }
.login-box .relative:focus-within > i { color: var(--brand-700); }
.login-submit { height:46px; display:inline-flex; align-items:center; justify-content:center; gap: var(--sp-2); font-weight:600; letter-spacing:.04em; }
.login-submit i { font-size:12px; transition: transform var(--dur-2) var(--ease); }
.login-submit:hover i { transform: translateX(3px); }
.login-divider { display:flex; align-items:center; gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-4); font-size:11px; color: var(--muted-2); }
.login-divider::before, .login-divider::after { content:''; flex:1; height:1px; background: var(--line); }
.login-copy { margin-top: var(--sp-6); font-size:11px; color: var(--muted-2); letter-spacing:.04em; }
@media (max-width:860px) {
    .login-shell { grid-template-columns: minmax(0,1fr); max-width:420px; }
    .login-brand { display:none; }
    .login-box { padding: var(--sp-8) var(--sp-6); }
    body.public-home .app-topbar { padding-inline: var(--sp-4); }
}
@media (prefers-reduced-motion: reduce) {
    .login-orb, .login-shell { animation:none; }
}
.animate-shake { animation: shake .5s; }
@keyframes shake {
    0%,100% { transform: translateX(0); }
    20%,60% { transform: translateX(-8px); }
    40%,80% { transform: translateX(8px); }
}

/* ---------- 浮层：只有这里允许阴影 ---------- */
.modal-overlay { position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:60; display:none; align-items:center; justify-content:center; padding: var(--sp-4); }
.modal-overlay.open { display:flex; animation: fadeIn var(--dur-2) var(--ease); }
.modal-panel { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--e-3); width:100%; max-width: 32rem; max-height:85vh; overflow-y:auto; padding: var(--sp-6); border:1px solid var(--line); animation: modalIn var(--dur-3) var(--ease); }
.modal-overlay.viewer-modal .modal-panel { max-width:64rem; }
.modal-overlay.chat-modal .modal-panel { max-width:40rem; }
@keyframes modalIn { from { opacity:0; transform: translateY(8px) scale(.99); } to { opacity:1; transform:none; } }
#toast { border-radius: var(--r-md); box-shadow: var(--e-3); font-size:13px; }
.upload-progress { display:none; position:fixed; z-index:100; left:50%; bottom:24px; transform:translateX(-50%); width:min(420px,calc(100vw - 24px)); padding:14px 16px; background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:var(--e-3); }
.upload-progress.is-visible { display:block; }
.upload-progress-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--ink); font-size:13px; }
.upload-progress-percent { color:var(--muted); font-variant-numeric:tabular-nums; }
.upload-progress-filename { margin-top:4px; overflow:hidden; color:var(--muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.upload-progress-track { height:6px; margin-top:10px; overflow:hidden; background:var(--surface-2); border-radius:999px; }
.upload-progress-fill { width:0; height:100%; background:var(--brand-600); transition:width .15s linear; }
.upload-progress.is-indeterminate .upload-progress-fill { position:relative; width:35%; animation:upload-progress-indeterminate 1.2s ease-in-out infinite; }
@keyframes upload-progress-indeterminate { from { transform:translateX(-110%); } to { transform:translateX(300%); } }
@media (prefers-reduced-motion:reduce) { .upload-progress-fill { transition:none; } .upload-progress.is-indeterminate .upload-progress-fill { animation:none; width:100%; opacity:.4; } }

/* ---------- 页面区段 ---------- */
.section-content { display:none; animation: fadeIn var(--dur-3) var(--ease); }
.section-content.active { display:block; }
@keyframes fadeIn { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform:none; } }
.content-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.content-head p { font-size: var(--fs-cap); color: var(--muted); }
.honor-tabs { display:flex; gap: var(--sp-2); border-bottom:1px solid var(--line); margin-bottom: var(--sp-5); }
.honor-tab { display:inline-flex; align-items:center; padding:9px var(--sp-4); margin-bottom:-1px; border:1px solid transparent; border-bottom:2px solid transparent; background:transparent; color:var(--muted); font-size:13px; font-weight:600; cursor:pointer; }
.honor-tab:hover { color:var(--ink); background:var(--surface-2); }
.honor-tab.is-active { color:var(--brand-800); border-bottom-color:var(--brand-700); }
.honor-timeline-trigger { display:inline-flex; align-items:center; padding:8px 12px; border:1px solid var(--brand-100); border-radius:var(--r-sm); background:var(--brand-50); color:var(--brand-800); font-size:13px; font-weight:600; cursor:pointer; transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.honor-timeline-trigger:hover { background:var(--brand-100); border-color:var(--brand-600); transform:translateY(-1px); }

/* ---------- 荣誉时间轴 ---------- */
#content-honors-timeline { position:relative; isolation:isolate; min-height:calc(100vh - var(--top-h)); margin:calc(var(--sp-8) * -1); padding:var(--sp-8); }
#content-honors-timeline::before { content:''; position:absolute; z-index:-1; inset:0; background:
    linear-gradient(120deg, rgba(215,232,219,.91) 0%, rgba(232,240,234,.88) 52%, rgba(209,228,214,.92) 100%),
    linear-gradient(116deg, transparent 0 52%, rgba(177,143,53,.09) 52.1% 52.35%, transparent 52.5%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 1px, transparent 1px 18px),
    url('../img/hero-micp.jpg') center/cover no-repeat; opacity:.94; pointer-events:none; }
.honor-timeline-page { position:relative; z-index:1; max-width:1080px; margin:0 auto; }
.honor-timeline-hero { position:relative; overflow:hidden; display:flex; align-items:flex-end; justify-content:space-between; min-height:270px; padding:var(--sp-8) var(--sp-10); background:#102d20; color:#fff; border:1px solid rgba(185,221,200,.16); border-radius:var(--r-lg); box-shadow:0 18px 36px -24px rgba(13,59,30,.7); }
.honor-timeline-hero::before { content:''; position:absolute; inset:0; opacity:.42; background:linear-gradient(116deg, transparent 0 52%, rgba(226,187,93,.12) 52.1% 52.35%, transparent 52.5%), repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 16px); pointer-events:none; }
.honor-timeline-hero::after { content:''; position:absolute; width:410px; height:410px; right:-130px; bottom:-250px; border:1px solid rgba(224,190,101,.34); border-radius:50%; box-shadow:0 0 0 22px rgba(224,190,101,.06), 0 0 0 46px rgba(224,190,101,.035); pointer-events:none; }
.honor-timeline-hero__copy { position:relative; z-index:1; max-width:680px; }
.honor-timeline-back { display:inline-flex; align-items:center; gap:8px; margin-bottom:var(--sp-8); padding:6px 0; border:0; background:none; color:#cfe6d6; font-size:12px; cursor:pointer; }
.honor-timeline-back:hover { color:#fff; }
.honor-timeline-kicker { display:flex; align-items:center; gap:9px; color:#e4c66e; font-size:11px; font-weight:700; letter-spacing:.18em; }
.honor-timeline-kicker i { font-size:13px; }
.honor-timeline-kicker b { margin-left:3px; padding-left:10px; border-left:1px solid rgba(228,198,110,.45); color:#a7e8c6; font-size:10px; font-weight:600; letter-spacing:.08em; }
.honor-timeline-hero h1 { max-width:12em; margin:var(--sp-3) 0 var(--sp-2); color:#fff; font-family:"Noto Serif CJK SC","Source Han Serif SC","Noto Serif SC","Songti SC","STSong","SimSun",serif; font-size:clamp(32px,4.2vw,48px); font-weight:700; letter-spacing:.02em; line-height:1.18; text-wrap:balance; text-shadow:0 2px 18px rgba(0,0,0,.18); }
.honor-timeline-hero h1 span, .honor-timeline-hero h1 em { display:block; }
.honor-timeline-hero h1 em { position:relative; width:max-content; max-width:100%; color:#e4c66e; font-style:normal; letter-spacing:.045em; }
.honor-timeline-hero h1 em::after { content:''; display:block; width:44%; height:2px; margin-top:8px; border-radius:2px; background:#e4c66e; opacity:.72; }
.honor-timeline-hero p { margin:0; color:#cfe6d6; font-size:14px; }
.honor-timeline-hero__rule { display:flex; align-items:center; gap:12px; margin-top:var(--sp-8); color:rgba(207,230,214,.68); font-size:9px; letter-spacing:.2em; }
.honor-timeline-hero__rule i { width:76px; height:1px; background:#e4c66e; opacity:.75; }
.honor-timeline-hero__mark { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:112px; height:112px; margin:0 var(--sp-4) var(--sp-1) 0; border:1px solid rgba(228,198,110,.65); border-radius:50%; color:#e4c66e; background:rgba(255,255,255,.045); box-shadow:0 0 0 7px rgba(228,198,110,.05), inset 0 0 24px rgba(228,198,110,.06); }
.honor-timeline-hero__mark::before { content:''; position:absolute; inset:8px; border:1px dashed rgba(228,198,110,.42); border-radius:50%; }
.honor-timeline-hero__mark span, .honor-timeline-hero__mark b { position:relative; z-index:1; font-size:8px; letter-spacing:.18em; }
.honor-timeline-hero__mark i { position:relative; z-index:1; font-size:28px; }
.honor-timeline-hero__mark b { color:#cfe6d6; font-size:7px; line-height:1.35; text-align:center; }
.honor-timeline-summary { display:flex; align-items:center; gap:var(--sp-8); margin:0 var(--sp-2); padding:var(--sp-5) var(--sp-6); border-bottom:1px solid var(--line); }
.honor-timeline-summary__stat { display:flex; align-items:center; gap:10px; min-width:130px; }
.honor-timeline-summary__icon { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:var(--r-md); background:var(--brand-50); color:var(--brand-700); font-size:13px; }
.honor-timeline-summary__icon--gold { background:#fff7dc; color:#a97808; }
.honor-timeline-summary__stat > span:last-child { display:flex; flex-direction:column; gap:1px; }
.honor-timeline-summary strong { color:var(--brand-900); font-size:25px; line-height:1; font-variant-numeric:tabular-nums; }
.honor-timeline-summary small { color:var(--muted); font-size:11px; }
.honor-timeline-summary__note { margin-left:auto; color:var(--muted); font-size:12px; }
.honor-timeline { position:relative; padding:var(--sp-8) var(--sp-2) var(--sp-8); }
.honor-timeline::before { content:''; position:absolute; left:141px; top:48px; bottom:62px; width:1px; background:linear-gradient(var(--brand-100), #d8b85c 48%, var(--brand-100)); }
.honor-timeline__item { position:relative; display:grid; grid-template-columns:120px 44px minmax(0,1fr); column-gap:0; min-height:150px; animation:honorTimelineIn var(--dur-3) var(--ease) both; animation-delay:var(--timeline-delay); }
.honor-timeline__date { padding:var(--sp-2) var(--sp-5) 0 0; text-align:right; }
.honor-timeline__date strong { display:block; color:var(--brand-800); font-size:14px; font-variant-numeric:tabular-nums; }
.honor-timeline__date span { display:block; margin-top:2px; color:var(--muted-2); font-size:11px; }
.honor-timeline__rail { position:relative; display:flex; justify-content:center; }
.honor-timeline__rail > span { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:38px; height:38px; margin-top:2px; border:5px solid var(--canvas); border-radius:50%; background:#d6ae45; color:#fff; font-size:12px; box-shadow:0 0 0 1px #d6ae45, 0 4px 12px -5px rgba(126,91,10,.7); }
.honor-timeline__item--level-4 .honor-timeline__rail > span { background:#b88919; box-shadow:0 0 0 1px #b88919, 0 0 0 5px rgba(214,174,69,.18), 0 5px 14px -4px rgba(126,91,10,.75); }
.honor-timeline__card { position:relative; align-self:start; margin:0 0 var(--sp-6) var(--sp-5); padding:var(--sp-5) var(--sp-6); border:1px solid var(--line); border-left:3px solid var(--brand-600); border-radius:var(--r-md); background:var(--surface); box-shadow:0 8px 20px -18px rgba(15,23,42,.55); transition:border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.honor-timeline__card::before { content:''; position:absolute; left:-9px; top:17px; width:9px; height:9px; border-top:1px solid var(--line); border-left:1px solid var(--line); background:var(--surface); transform:rotate(-45deg); }
.honor-timeline__card:hover { border-color:var(--brand-600); background:var(--brand-50); box-shadow:0 12px 26px -18px rgba(21,128,61,.55); transform:translateX(4px); }
.honor-timeline__meta { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); }
.honor-timeline__index { color:var(--brand-600); font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.12em; }
.honor-timeline__card h3 { margin:var(--sp-3) 0 var(--sp-2); font-size:18px; }
.honor-timeline__competition { display:flex; align-items:center; gap:7px; margin:0; color:var(--brand-800); font-size:13px; font-weight:600; }
.honor-timeline__competition i { color:#b88919; font-size:11px; }
.honor-timeline__detail { margin:var(--sp-3) 0 0; color:var(--ink-2); font-size:13px; line-height:1.7; }
.honor-timeline__tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--sp-3); }
.honor-timeline__tags span { padding:3px 9px; border:1px solid var(--brand-100); border-radius:var(--r-pill); background:var(--brand-50); color:var(--brand-800); font-size:11px; }
.honor-timeline-loading, .honor-timeline-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:300px; color:var(--muted); text-align:center; }
.honor-timeline-loading { flex-direction:row; gap:var(--sp-2); font-size:13px; }
.honor-timeline-loading i { color:var(--brand-600); }
.honor-timeline-empty__icon { display:flex; align-items:center; justify-content:center; width:56px; height:56px; margin-bottom:var(--sp-4); border-radius:50%; background:var(--brand-50); color:var(--brand-600); font-size:21px; }
.honor-timeline-empty__icon--error { background:var(--danger-bg); color:var(--danger-fg); }
.honor-timeline-empty h3 { margin:0 0 var(--sp-2); font-size:17px; }
.honor-timeline-empty p { margin:0 0 var(--sp-5); font-size:13px; }
@keyframes honorTimelineIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (max-width:700px) {
    .honor-timeline-hero { min-height:250px; padding:var(--sp-6); }
    .honor-timeline-hero__mark { position:absolute; top:var(--sp-6); right:var(--sp-6); width:72px; height:72px; margin:0; }
    .honor-timeline-hero__mark i { font-size:21px; }
    .honor-timeline-hero__mark b { font-size:5px; }
    .honor-timeline-hero__copy { padding-top:var(--sp-6); padding-right:var(--sp-10); }
    .honor-timeline-hero h1 { max-width:10em; font-size:clamp(29px,8.4vw,40px); line-height:1.22; }
    .honor-timeline-hero__rule { margin-top:var(--sp-6); }
    .honor-timeline-summary { gap:var(--sp-4); margin:0; padding:var(--sp-4) 0 var(--sp-6); }
    .honor-timeline-summary__stat { min-width:0; gap:7px; }
    .honor-timeline-summary__icon { width:30px; height:30px; }
    .honor-timeline-summary__note { display:none; }
    .honor-timeline::before { left:15px; top:18px; }
    .honor-timeline__item { grid-template-columns:32px minmax(0,1fr); min-height:0; }
    .honor-timeline__date { grid-column:2; grid-row:1; padding:0 0 var(--sp-2) var(--sp-5); text-align:left; }
    .honor-timeline__date strong { display:inline; margin-right:var(--sp-2); }
    .honor-timeline__date span { display:inline; }
    .honor-timeline__rail { grid-column:1; grid-row:1 / span 2; justify-content:flex-start; }
    .honor-timeline__rail > span { width:32px; height:32px; }
    .honor-timeline__card { grid-column:2; grid-row:2; margin:0 0 var(--sp-6) var(--sp-5); padding:var(--sp-4); }
}
@media (prefers-reduced-motion: reduce) { .honor-timeline__item { animation:none; } }

/* ---------- Hero / 数据带（Apple：一屏一件事 + 底色阶梯） ---------- */
.hero {
    position:relative; overflow:hidden;
    background: #0d3a1d;                 /* 兜底色（图未加载时也不露白） */
    border-radius: var(--r-lg); padding: var(--sp-12) var(--sp-10);
    color:#fff;
}
/* 背景＝「MICP 微观之旅」第 02 章（孔隙尺度）的实拍帧：缓慢漂移，像一扇正在播放的窗 */
.hero::before {
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background: url('../img/hero-micp.jpg') center/cover no-repeat;
    transform: scale(1.05);
    animation: heroDrift 28s ease-in-out infinite alternate;
    will-change: transform;
}
/* 深绿遮罩（左密右疏，保证左侧文字可读）+ 细点阵纹理 */
.hero::after {
    content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    background-image:
        linear-gradient(100deg, rgba(5,30,16,.95) 0%, rgba(7,40,22,.84) 44%, rgba(9,52,29,.62) 100%),
        radial-gradient(rgba(167,232,198,.10) 1px, transparent 1px);
    background-size: 100% 100%, 20px 20px;
}
.hero__grid, .hero__meta { position:relative; z-index:2; }
@keyframes heroDrift {
    from { transform: scale(1.05) translate3d(0,0,0); }
    to   { transform: scale(1.13) translate3d(-1.4%, -1%, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .hero::before { animation:none; }
}
.hero__eyebrow {
    display:inline-flex; align-items:center; gap: var(--sp-2);
    font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#a7e8c6; font-weight:600;
    padding:4px 12px; border-radius: var(--r-pill);
    background: rgba(111,227,176,.10); border:1px solid rgba(111,227,176,.28);
}
.hero__eyebrow::before { content:''; width:6px; height:6px; border-radius:50%; background:#6fe3b0; box-shadow:0 0 8px #6fe3b0; }
.hero__main { animation: fadeIn 480ms var(--ease) both; }
.hero__aside { animation: fadeIn 480ms 120ms var(--ease) both; }
.hero h1 { color:#fff; font-size:44px; line-height:1.15; letter-spacing:-.03em; margin: var(--sp-4) 0 var(--sp-4); font-weight:650; text-wrap:balance; }
.hero p { color:#cfe6d6; max-width:58ch; font-size:15px; line-height:1.75; }
.hero__cta { display:flex; flex-wrap:wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero .btn-primary { background:#fff; color:var(--brand-900); border-color:#fff; }
.hero .btn-primary:hover { background:#e9f6ee; border-color:#e9f6ee; }
.hero .btn-ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.42); }
.hero .btn-ghost:hover { background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.6); }
.hero__meta { position:relative; z-index:2; display:flex; flex-wrap:wrap; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-8); padding: var(--sp-5) 0 var(--sp-4); border-top:1px solid rgba(255,255,255,.16); font-size:var(--fs-cap); color:#a7d8b8; }
.hero__meta span { padding:5px 12px; border-radius: var(--r-pill); background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }
.hero__meta b { color:#fff; font-weight:600; margin-left:4px; }

.kpi-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap: var(--sp-4); margin: calc(var(--sp-6) * -1) var(--sp-6) 0; position:relative; z-index:2; }
.kpi {
    position:relative; background:var(--surface); border:1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5);
    box-shadow: 0 12px 28px -18px rgba(15,23,42,.35);
    transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.kpi:hover { transform: translateY(-2px); border-color: var(--brand-100); box-shadow: 0 18px 34px -18px rgba(21,128,61,.35); }
.kpi__ic {
    position:absolute; top: var(--sp-5); right: var(--sp-5);
    width:34px; height:34px; border-radius: var(--r-md); display:flex; align-items:center; justify-content:center;
    background: var(--brand-50); color: var(--brand-700); font-size:14px;
}
.kpi__v { font-size:30px; font-weight:650; letter-spacing:-.02em; line-height:1.1; }
.kpi__v span { font-size:13px; font-weight:500; color:var(--muted); margin-left:3px; }
.kpi__k { font-size: var(--fs-cap); color: var(--muted); margin-top: var(--sp-1); }
.kpi__bar { height:4px; border-radius:2px; background: linear-gradient(90deg, var(--brand-700), #6fe3b0); opacity:.85; margin-top: var(--sp-3); }

.band { background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-8); }
.band--alt { background: linear-gradient(180deg, var(--brand-50), var(--surface-2)); }
.band h3 { font-size: var(--fs-title); margin-bottom: var(--sp-3); }
.band__kick { font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color: var(--brand-700); margin-bottom: var(--sp-1); }
.band__lead { font-size:13.5px; line-height:1.85; color: var(--ink-2); }
.band h4.band__sub { margin-top: var(--sp-6); margin-bottom: var(--sp-3); }

.micp-flow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap: var(--sp-2); margin-top: var(--sp-5); counter-reset: none; }
.micp-flow li {
    position:relative; display:flex; flex-direction:column; gap:2px;
    padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
    background: var(--surface-2); border:1px solid var(--line);
}
.micp-flow li:not(:last-child)::after {
    content:''; position:absolute; right:-7px; top:50%; width:10px; height:10px; z-index:1;
    border-top:2px solid var(--brand-600); border-right:2px solid var(--brand-600);
    transform: translateY(-50%) rotate(45deg); background: transparent;
}
.micp-flow b { font-size:10px; color: var(--brand-700); font-variant-numeric: tabular-nums; letter-spacing:.08em; }
.micp-flow span { font-size:13px; font-weight:600; color: var(--ink); }
.micp-flow i { font-style:normal; font-size:11.5px; color: var(--muted); }

.value-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap: var(--sp-3); }
.value-card {
    display:flex; align-items:center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
    border:1px solid var(--line); border-radius: var(--r-md);
    transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.value-card:hover { border-color: var(--brand-100); background: var(--brand-50); }
.value-card > i { width:36px; height:36px; flex-shrink:0; border-radius: var(--r-md); display:flex; align-items:center; justify-content:center; background: var(--brand-50); color: var(--brand-700); font-size:15px; }
.value-card b { display:block; font-size:13px; color: var(--ink); font-weight:600; }
.value-card span { display:block; font-size:11.5px; color: var(--muted); }

.feat-list { display:flex; flex-direction:column; gap: var(--sp-2); margin-top: var(--sp-2); }
.feat-list li {
    display:flex; align-items:flex-start; gap: var(--sp-3); font-size:13px; color: var(--ink-2); line-height:1.55;
    padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: rgba(255,255,255,.7); border:1px solid var(--line);
}
.feat-list li i { width:22px; flex-shrink:0; text-align:center; color: var(--brand-700); margin-top:3px; font-size:12px; }
@media (max-width:640px) {
    .micp-flow { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .micp-flow li:nth-child(2)::after { display:none; }
    .value-grid { grid-template-columns: minmax(0,1fr); }
    .kpi-strip { margin: var(--sp-4) 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hero__main, .hero__aside { animation:none; }
    .kpi:hover { transform:none; }
}
.band h4 { font-size:13px; color: var(--ink-2); margin-bottom: var(--sp-2); }
.list-tick { font-size:13px; color: var(--ink-2); }
.list-tick li { padding: 3px 0 3px 16px; position:relative; }
.list-tick li::before { content:''; position:absolute; left:0; top:11px; width:5px; height:5px; border-radius:50%; background: var(--brand-600); }
@media (max-width:1100px) { .kpi-strip { grid-template-columns:repeat(2,minmax(0,1fr)); } .hero { padding: var(--sp-8) var(--sp-6); } .hero h1 { font-size:34px; } }

/* ---------- 兼容旧标记 ---------- */
.sidebar-item { }
#conn-banner { font-size: var(--fs-cap); }

/* ---------- 技术原理展示 · 首页右侧入口（V2.1 补充） ---------- */
.hero__grid {
    display:grid; grid-template-columns: minmax(0,1fr) 340px;
    gap: var(--sp-8); align-items:start; position:relative; z-index:2;
}
.hero__aside { min-width:0; }
.cine-card {
    position:relative; border-radius: var(--r-lg); padding: var(--sp-6);
    background: linear-gradient(165deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
    border:1px solid rgba(255,255,255,.26);
    box-shadow: 0 18px 40px -22px rgba(0,0,0,.6);
    backdrop-filter: blur(6px);
}
.cine-card__top { display:flex; align-items:center; justify-content:space-between; gap: var(--sp-3); }
.cine-card__kick {
    font-size:11px; font-weight:600; letter-spacing:.16em; color:#06110d;
    background: #a7e8c6; border-radius: var(--r-pill); padding:3px 10px;
}
.cine-card__live { display:flex; align-items:center; gap:6px; font-size:11px; color:#cfe6d6; }
.cine-card__live i { width:6px; height:6px; border-radius:50%; background:#6fe3b0; box-shadow:0 0 8px #6fe3b0; }
.cine-card__t { color:#fff; font-size:22px; font-weight:600; letter-spacing:-.01em; margin: var(--sp-3) 0 var(--sp-2); }
.cine-card__d { color:#cfe6d6; font-size:12.5px; line-height:1.7; }
.cine-card__chs { display:flex; flex-wrap:wrap; gap:6px; margin: var(--sp-4) 0; }
.cine-chip {
    display:inline-flex; align-items:baseline; gap:5px; padding:5px 9px; cursor:pointer;
    border:1px solid rgba(255,255,255,.22); border-radius: var(--r-sm);
    background: rgba(255,255,255,.06); color:#e6f3ea; font-size:11.5px;
    transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.cine-chip b { font-size:10px; color:#6fe3b0; font-variant-numeric:tabular-nums; }
.cine-chip i { font-style:normal; font-size:10px; color:#9dbfab; }
.cine-chip:hover { background: rgba(255,255,255,.16); border-color:#6fe3b0; transform: translateY(-1px); }
.cine-card__go {
    width:100%; display:flex; align-items:center; gap: var(--sp-3); cursor:pointer;
    padding: 10px var(--sp-3); border-radius: var(--r-md); border:1px solid #6fe3b0;
    background:#6fe3b0; color:#06110d; text-align:left;
    transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.cine-card__go:hover { background:#8df0c6; transform: translateY(-1px); }
.cine-card__play {
    width:30px; height:30px; border-radius:50%; background:#06110d; color:#6fe3b0;
    display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0;
}
.cine-card__go-t { display:block; font-size:14px; font-weight:600; line-height:1.3; }
.cine-card__go-s { display:block; font-size:11px; opacity:.7; }
.cine-card__note { margin-top: var(--sp-3); font-size:11px; line-height:1.6; color:#9dbfab; }
.cine-card__note b { color:#e6f3ea; font-family:var(--fe); }
@media (max-width:1180px) {
    .hero__grid { grid-template-columns: minmax(0,1fr); }
    .cine-card { max-width:560px; }
}
@media (max-width:820px) {
    .cine-card { padding: var(--sp-5); }
    .cine-card__chs { display:none; }
}

/* ---------- 站内播放器（MICP 微观之旅） ---------- */
body.cine-open { overflow:hidden; }
.cine-layer {
    position:fixed; inset:0; z-index:130; display:flex; flex-direction:column;
    background:#050807; color:#eef3f1; font-family:var(--f);
}
.cine-bar {
    display:flex; align-items:center; gap: var(--sp-4); flex-shrink:0;
    padding:9px var(--sp-4); background:rgba(8,14,12,.94);
    border-bottom:1px solid rgba(255,255,255,.09);
    transition: transform var(--dur-3) var(--ease), opacity var(--dur-3) var(--ease);
}
.cine-layer.bar-hidden .cine-bar { transform: translateY(-104%); opacity:0; }
.cine-back {
    display:inline-flex; align-items:center; gap:8px; flex-shrink:0; cursor:pointer;
    padding:7px 14px; border-radius: var(--r-pill); font-size:12.5px; color:#e6f3ea;
    border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06);
    transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.cine-back:hover { background:rgba(255,255,255,.14); border-color:#6fe3b0; }
.cine-chs { display:flex; align-items:center; gap:6px; flex:1; min-width:0; overflow-x:auto; padding-bottom:2px; }
.cine-chs::-webkit-scrollbar { height:4px; }
.cine-chs::-webkit-scrollbar-thumb { background:rgba(255,255,255,.18); border-radius:2px; }
.cine-ch {
    display:inline-flex; align-items:baseline; gap:6px; cursor:pointer; white-space:nowrap;
    padding:6px 12px; border-radius: var(--r-pill); font-size:12px;
    border:1px solid rgba(255,255,255,.14); color:rgba(238,243,241,.72); background:none;
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.cine-ch b { font-size:10px; opacity:.65; font-variant-numeric:tabular-nums; }
.cine-ch i { font-style:normal; font-size:10px; opacity:.5; }
.cine-ch:hover { color:#fff; border-color:#6fe3b0; }
.cine-ch.on { background:#6fe3b0; border-color:#6fe3b0; color:#06110d; }
.cine-ch.on b, .cine-ch.on i { opacity:.8; }
.cine-acts { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.cine-state {
    font-size:11.5px; color:#9dbfab; letter-spacing:.02em; max-width:22rem;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cine-state[data-kind="warn"] { color:#f2c14e; }
.cine-btn {
    display:inline-flex; align-items:center; gap:7px; cursor:pointer; white-space:nowrap;
    padding:7px 12px; border-radius: var(--r-pill); font-size:12px;
    border:1px solid rgba(255,255,255,.16); color:rgba(238,243,241,.78); background:rgba(255,255,255,.04);
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.cine-btn:hover { color:#fff; border-color:rgba(255,255,255,.4); }
.cine-btn.on { background:#6fe3b0; border-color:#6fe3b0; color:#06110d; }
.cine-stage { position:relative; flex:1; min-height:0; }
.cine-frame { position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; }
.cine-load {
    position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; text-align:center; padding: var(--sp-8); background:#050807; color:rgba(238,243,241,.72);
    transition: opacity var(--dur-3) var(--ease);
}
.cine-load.done { opacity:0; pointer-events:none; }
.cine-load p { font-size:13px; line-height:1.8; }
.cine-load__tip { font-size:11.5px; color:rgba(238,243,241,.42); max-width:34rem; }
.cine-load__ring {
    width:34px; height:34px; border-radius:50%;
    border:2px solid rgba(255,255,255,.14); border-top-color:#6fe3b0;
    animation: spin 900ms linear infinite;
}
.cine-load__warn { font-size:26px; color:#f2c14e; }
.cine-load__link { color:#6fe3b0; text-decoration:underline; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width:1080px) {
    .cine-state { display:none; }
}
@media (max-width:820px) {
    .cine-bar { padding:8px var(--sp-3); gap: var(--sp-3); flex-wrap:wrap; }
    .cine-ch span, .cine-ch i { display:none; }
    .cine-ch b { font-size:11px; opacity:1; }
    .cine-btn span { display:none; }
}
@media (prefers-reduced-motion: reduce) {
    .cine-load__ring { animation:none; }
}