/* ═══════════════════════════════════════════════════════════════════
   Sekinchan — Liquid 主题（第三主题，Apple「液态玻璃」风格）
   · html[data-theme="liquid"]：Apple-inspired 材质分层：玻璃导航 + 清晰内容 + 胶囊控件
   · v4 逐卡片材质系统（Apple HIG Liquid Glass 原则落地，见 §10）：
     内容磨砂面板 + 悬浮层真玻璃 + specular 顶缘 + 同心圆角 + 指针镜面 + 弹簧微动效
   · 本文件被 11 个 legacy 页面与 Next layout.tsx 共同引用（/demo/css/liquid-theme.css）
   · 主题值存储沿用 sk-theme-v2（'light' | 'dark' | 'liquid'）
   · 表面词表与各页 [data-theme="light"] 注入块保持同源：card/panel/stat-card/
     module/surface + topbar/nav + layer/legend/compass + 各页专属卡片类
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. 令牌：玻璃白面板 + 石墨蓝文字 + Apple 蓝 ── */
html[data-theme="liquid"]{
  --bg:#f5f5f7;
  color-scheme:light;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","PingFang SC",sans-serif;
  --ink:#1d1d1f;--body:#515154;--blue:#007aff;--blue-dark:#0062cc;
  --paper:#fff;--line:rgba(60,60,67,.12);--soft:#f2f2f7;--sky:#f5f5f7;
  --gold:#a66b00;--good:#248a3d;
  --panel:rgba(255,255,255,.90);
  --panel-2:#f2f2f7;
  --panel-3:#eaeaef;
  --panel-4:#e2e5ea;
  --fg:#1d1d1f;
  --muted:#636366;
  --muted-2:#6c6c70;
  --border:rgba(60,60,67,.10);
  --border-2:rgba(60,60,67,.18);
  --accent:#007aff;
  --accent-2:#0062cc;
  --accent-soft:rgba(10,132,255,.13);
  --ok:#2ea36b;
  --warn:#cf961a;
  --danger:#d9534a;
  --info:#2f93b3;
  --teal:#2a9d90;
  --sk-glass:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.40));
  --sk-glass-strong:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.52));
  --sk-blur:blur(20px) saturate(165%);
  --sk-edge:inset 0 1px 0 rgba(255,255,255,.78),inset 0 -1px 0 rgba(255,255,255,.18);
  --sk-float:0 16px 44px -18px rgba(23,58,120,.30),0 2px 10px -4px rgba(23,58,120,.14);
  --shadow:0 16px 44px -18px rgba(23,58,120,.30),0 2px 10px -4px rgba(23,58,120,.14);
}

/* ── 2. Aurora canvas: glass surfaces need colored light to refract. ──
   body 背景必须保持 transparent——body 盒子只有视口高（html,body{height:100%}），
   任何 body 底色都会盖住负 z 环境光层并造成滚动断层（画布色由 html 承担，
   见 page-transitions.js 注入的 html[data-theme=liquid]{background:#f5f5f7}）。 */
html[data-theme="liquid"] body{
  background:transparent;
  color:var(--fg);font-family:var(--font);-webkit-font-smoothing:antialiased;
}
html[data-theme="liquid"] body::before,
html[data-theme="liquid"] body::after{content:none}
/* 环境光（html::before，z-index:-1：内容之下、html 底色之上）：色斑沿左缘
   导航带纵向排布（蓝→紫罗兰→青），磨砂玻璃折射出流动的色彩渐变才读得出
   「透明玻璃」；顶部两斑供顶栏折射。 */
html[data-theme="liquid"]::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(560px 760px at -14% 18%,rgba(59,130,246,.52),transparent 66%),
    radial-gradient(500px 680px at -12% 52%,rgba(139,92,246,.40),transparent 62%),
    radial-gradient(480px 640px at -10% 84%,rgba(6,182,212,.48),transparent 64%),
    radial-gradient(560px 320px at 24% -12%,rgba(255,199,142,.30),transparent 66%),
    radial-gradient(680px 420px at 104% -8%,rgba(154,160,255,.26),transparent 60%);
}

/* ── 3. 玻璃表面（legacy 词表 + 各页专属 + video workspace）── */
html[data-theme="liquid"] :is(.card,.panel,.stat-card,.module,.surface,.surface-panel,.mcard,
  .mc-card,.st-card,.s-card,.ap-table-panel,.my-item,.pl-item,.plan-item,.fd-modal,.ps-results){
  background:var(--panel)!important;
  border:1px solid rgba(60,60,67,.09)!important;
  box-shadow:0 2px 8px rgba(28,35,48,.025),0 12px 32px -24px rgba(28,35,48,.16);
}
html[data-theme="liquid"] :is(.card,.stat-card,.mcard,.mc-card,.st-card,.s-card,.module,
  .surface-panel,.ap-table-panel){border-radius:22px!important}
/* 会话抽屉 / 弹窗等 fixed 层：更实的玻璃保证内容可读 */
html[data-theme="liquid"] :is(.card-req,.fd-modal,.drawer){
  background:var(--sk-glass-strong)!important;
  -webkit-backdrop-filter:blur(26px) saturate(170%);
  backdrop-filter:blur(26px) saturate(170%);
}
html[data-theme="liquid"] :is(.panel-head,.mon-head,.drawer-foot,.sk-mk-lbl,.section-heading,
  .player-heading,.panel-footnote){
  background:rgba(255,255,255,.30)!important;
  border-color:rgba(120,150,200,.22)!important;
}
/* 顶栏 / 侧导航：悬浮玻璃条 */
html[data-theme="liquid"] :is(.topbar,header.topbar,.top-bar){
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.32))!important;
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  backdrop-filter:blur(26px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.55)!important;
  box-shadow:0 10px 34px -20px rgba(23,58,120,.28),inset 0 1px 0 rgba(255,255,255,.82);
}
html[data-theme="liquid"] :is(.nav,nav.nav,.sidebar,.profile-nav){
  /* 对角渐变厚度（左上厚、中部薄、右下回填）：玻璃「厚度不均」的液态读感 */
  background:linear-gradient(115deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.10) 34%,rgba(255,255,255,.22) 100%)!important;
  border-color:rgba(255,255,255,.60)!important;
  -webkit-backdrop-filter:blur(30px) saturate(185%);
  backdrop-filter:blur(30px) saturate(185%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset -1px 0 0 rgba(255,255,255,.38),
    inset 1px 0 0 rgba(255,255,255,.28),
    14px 0 38px -20px rgba(23,58,120,.30);
}
html[data-theme="liquid"] .nav-links>a,
html[data-theme="liquid"] .profile-nav .nav a{
  color:var(--fg)!important;border-radius:12px;
}
html[data-theme="liquid"] .nav-links>a:hover,
html[data-theme="liquid"] .profile-nav .nav a:hover{
  background:rgba(255,255,255,.55)!important;color:var(--fg)!important;
}
html[data-theme="liquid"] .nav-links>a.active,
html[data-theme="liquid"] .profile-nav .nav a.active{
  background:linear-gradient(135deg,rgba(10,132,255,.20),rgba(10,132,255,.08))!important;
  color:var(--accent-2)!important;
  box-shadow:inset 0 0 0 1px rgba(10,132,255,.24),var(--sk-edge);
}
html[data-theme="liquid"] .nav-place{color:var(--muted)}
html[data-theme="liquid"] .nav-place b{color:var(--fg)}
html[data-theme="liquid"] .nav-art{opacity:.9}

/* 悬浮小件：图层/图例/指北针/搜索结果/地图弹窗 */
html[data-theme="liquid"] :is(.layer,.legend,.compass,.net-badge,.sk-pop-cam-meta,.um-menu,
  .sk-role-menu,.nav-group-menu,.maplibregl-popup-content){
  background:var(--sk-glass-strong)!important;
  color:var(--fg)!important;
  border:1px solid rgba(255,255,255,.60)!important;
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);
  box-shadow:var(--sk-float),var(--sk-edge);
}
html[data-theme="liquid"] .layer.on{
  background:var(--accent-soft)!important;color:var(--accent-2)!important;
  border-color:rgba(10,132,255,.30)!important;
}
html[data-theme="liquid"] .maplibregl-popup-tip{border-top-color:rgba(255,255,255,.7)!important;border-bottom-color:rgba(255,255,255,.7)!important}
html[data-theme="liquid"] :is(.ps-item,.pl-item,.my-item,.device-item,.nav-group-menu a):hover{background:rgba(255,255,255,.55)!important;color:var(--fg)!important}
html[data-theme="liquid"] .ps-search input,
html[data-theme="liquid"] :is(.layer,.legend):hover{color:var(--fg)!important}
/* 视频帧保持暗底（画面对比度） */
html[data-theme="liquid"] :is(.sk-pop-cam-frame,.sk-pop-cam-off,.player-shell,.video-shell){background:#0a1522!important}

/* ── 4. 控件：输入 / 按钮 / 胶囊 ── */
html[data-theme="liquid"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),textarea,select){
  background:rgba(255,255,255,.55)!important;
  color:var(--fg)!important;
  border:1px solid var(--border-2)!important;
  box-shadow:inset 0 1px 2px rgba(23,58,120,.08);
  border-radius:10px;
}
html[data-theme="liquid"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),textarea,select):focus{
  outline:none;border-color:rgba(10,132,255,.55)!important;
  box-shadow:0 0 0 3px rgba(10,132,255,.18);
}
html[data-theme="liquid"] ::placeholder{color:var(--muted-2)}
html[data-theme="liquid"] :is(.asst,.submit,.um-btn,.btn-primary,.submit-btn,.story-primary){
  background:linear-gradient(135deg,#0a84ff,#0a6cd4)!important;
  color:#fff!important;
  box-shadow:0 10px 26px -10px rgba(10,108,220,.55),inset 0 1px 0 rgba(255,255,255,.35);
}
html[data-theme="liquid"] :is(.asst,.submit,.um-btn,.btn-primary,.submit-btn,.story-primary):hover{
  filter:brightness(1.06);
}
html[data-theme="liquid"] :is(.fd-btn,.dispatch-btn,.segmented button,.quick button){
  background:rgba(255,255,255,.55)!important;color:var(--fg)!important;
  border:1px solid rgba(255,255,255,.62)!important;
}
html[data-theme="liquid"] :is(.fd-btn,.dispatch-btn,.segmented button):hover{background:rgba(255,255,255,.78)!important}
html[data-theme="liquid"] :is(.theme-toggle,.m-theme-btn,.m-drawer-btn,.sk-nav-toggle,.voice-btn){
  background:var(--sk-glass)!important;
  border:1px solid rgba(255,255,255,.62)!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:var(--sk-edge);
}
html[data-theme="liquid"] :is(.theme-toggle,.m-theme-btn,.m-drawer-btn,.sk-nav-toggle) :is(svg,.ico-sun,.ico-moon){color:var(--muted)}
html[data-theme="liquid"] :is(.count-pill,.playback-badge){
  background:rgba(255,255,255,.55)!important;color:var(--fg)!important;
  border:1px solid rgba(255,255,255,.55);
}
html[data-theme="liquid"] :is(.trend.up,.badge.ok,.ico.ok){background:rgba(46,163,107,.16)!important}
html[data-theme="liquid"] :is(.trend.down,.badge.danger,.ico.danger){background:rgba(217,83,74,.16)!important}
html[data-theme="liquid"] :is(.badge.warn,.ico.warn){background:rgba(207,150,26,.16)!important}
html[data-theme="liquid"] :is(.badge.info,.ico.info){background:rgba(47,147,179,.16)!important}
/* 表格 */
html[data-theme="liquid"] :is(.ap-table,.q-tbl){
  background:transparent!important;color:var(--fg)!important;
}
html[data-theme="liquid"] :is(.ap-table th,.q-tbl th){
  background:rgba(255,255,255,.42)!important;color:var(--muted)!important;
}
html[data-theme="liquid"] :is(.ap-table td,.q-tbl td){border-color:var(--border)!important}
/* 滚动条 */
html[data-theme="liquid"] ::-webkit-scrollbar{width:10px;height:10px}
html[data-theme="liquid"] ::-webkit-scrollbar-thumb{background:rgba(90,130,190,.38)!important;border-radius:8px;border:2px solid transparent;background-clip:content-box!important}
html[data-theme="liquid"] ::-webkit-scrollbar-track{background:transparent}

/* ── 5. Next 侧（login / account / admin 共用 .app/.topbar/.nav 词表）── */
html[data-theme="liquid"] .story-landing{background:linear-gradient(160deg,#0a1e3f,#123a63 55%,#0d4a5e)}
html[data-theme="liquid"] .story-auth-modal{
  background:var(--sk-glass-strong)!important;
  -webkit-backdrop-filter:blur(28px) saturate(170%);
  backdrop-filter:blur(28px) saturate(170%);
  border:1px solid rgba(255,255,255,.55)!important;
  border-radius:22px!important;
  box-shadow:0 28px 70px -24px rgba(4,20,45,.55),var(--sk-edge);
  color:var(--fg);
}
html[data-theme="liquid"] .story-auth-form :is(input,select){background:rgba(255,255,255,.72)!important}
html[data-theme="liquid"] :is(.profile-hub,.profile-main){
  --ph-ink:#1d1d1f;--ph-copy:#515154;--ph-muted:#636366;--ph-line:rgba(60,60,67,.14);
  --ph-blue:#0a6cd4;--ph-surface:rgba(255,255,255,.6);
  background:transparent;color:var(--ph-ink);
}
html[data-theme="liquid"] :is(.profile-topbar,.profile-card,.profile-summary,.profile-savebar){
  background:var(--sk-glass-strong)!important;
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  border-color:rgba(255,255,255,.55)!important;
  box-shadow:var(--sk-float),var(--sk-edge);
}
html[data-theme="liquid"] .admin-shell .main,
html[data-theme="liquid"] .app .main{background:transparent!important}

/* ── 6. 主题按钮三态图标：light→moon / dark→droplet / liquid→sun ── */
.ico-drop{display:none}
html[data-theme="dark"] :is(.theme-toggle,.m-theme-btn,.profile-theme) :is(.ico-sun,.ico-moon){display:none!important}
html[data-theme="dark"] :is(.theme-toggle,.m-theme-btn,.profile-theme) .ico-drop{display:block!important}
html[data-theme="liquid"] :is(.theme-toggle,.m-theme-btn,.profile-theme) .ico-sun{display:block!important}
html[data-theme="liquid"] :is(.theme-toggle,.m-theme-btn,.profile-theme) :is(.ico-moon,.ico-drop){display:none!important}

/* ── 7. Persistent visual shell + content-only slide dissolve.
   Full document navigation remains intact. Named shell snapshots stay opaque
   while the content moves; page-transitions.js can hold them until auth is ready.
   Names belong to one outer element only (account's nested .nav is not named). */
@view-transition{navigation:auto}
.app > .nav,.profile-nav{view-transition-name:sk-nav}
.app > .topbar,.profile-topbar{view-transition-name:sk-topbar}
.app > main,.profile-main{view-transition-name:sk-content}
.m-tabbar{view-transition-name:sk-tabs}
html.embed :is(.nav,.topbar,main){view-transition-name:none}
::view-transition{pointer-events:none}
::view-transition-group(*){animation-duration:420ms;animation-timing-function:cubic-bezier(.22,.68,.2,1)}
::view-transition-old(root){animation:skCanvasOut 200ms cubic-bezier(.22,.68,.2,1) both}
::view-transition-new(root){animation:skCanvasIn 300ms cubic-bezier(.22,.68,.2,1) both}
::view-transition-old(sk-content){animation:skContentOut 260ms cubic-bezier(.22,.68,.2,1) both}
::view-transition-new(sk-content){animation:skContentIn 420ms cubic-bezier(.22,.68,.2,1) both}
/* Shell always stays above the transitioning content, including fullscreen maps. */
::view-transition-group(sk-nav),::view-transition-group(sk-topbar),::view-transition-group(sk-tabs){z-index:2}
::view-transition-image-pair(sk-nav),::view-transition-image-pair(sk-topbar),::view-transition-image-pair(sk-tabs){isolation:isolate}
::view-transition-old(sk-nav),::view-transition-old(sk-topbar),::view-transition-old(sk-tabs){animation:none;opacity:1;mix-blend-mode:normal;z-index:1}
::view-transition-new(sk-nav),::view-transition-new(sk-topbar),::view-transition-new(sk-tabs){animation:none;opacity:1;mix-blend-mode:normal}
@keyframes skCanvasOut{to{opacity:0}}
@keyframes skCanvasIn{from{opacity:0}to{opacity:1}}
@keyframes skContentOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-12px)}}
@keyframes skContentIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
/* No whole-body fade in browsers without cross-document transitions. */
html.sk-page-enter-fallback :is(.app > main,.profile-main){animation:skContentIn 320ms cubic-bezier(.22,.68,.2,1) both}
html.sk-theme-morph body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:radial-gradient(46% 46% at var(--sk-morph-x,50%) var(--sk-morph-y,42%),
    rgba(255,255,255,.85),rgba(255,255,255,0) 72%);
  animation:skMorph .55s cubic-bezier(.2,.6,.35,1) both;
}
@keyframes skMorph{from{opacity:1;transform:scale(.25)}to{opacity:0;transform:scale(1.6)}}

/* ── 8. Theme morph accessibility (all motion disabled in final media rule). ── */
@media (prefers-reduced-motion:reduce){
  html.sk-theme-morph body::after{animation:none!important;content:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  html.sk-page-enter-fallback :is(.app > main,.profile-main){animation:none!important}
}

/* ── 9. Shared Apple-inspired hierarchy across every workspace. ──
   Keep geometry in page styles: fixed maps, collapsed navigation and embedded
   complaint forms must retain their existing positioning and dimensions. */
html[data-theme="liquid"]{
  --sk-glass:linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,255,255,.56));
  --sk-glass-strong:linear-gradient(145deg,rgba(255,255,255,.96),rgba(248,249,252,.90));
  --sk-edge:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.4);
  --sk-float:0 8px 32px -12px rgba(32,40,56,.20),0 1px 4px rgba(32,40,56,.05);
}
html[data-theme="liquid"] :is(button,input,select,textarea){font-family:var(--font)}
html[data-theme="liquid"] :is(h1,h2,h3,.page-head h1,.workspace-head h1){letter-spacing:-.035em}
html[data-theme="liquid"] :is(.num,.st-cell b){font-variant-numeric:tabular-nums;letter-spacing:-.025em}
html[data-theme="liquid"] :is(.crumb,.nav-label,.workspace-eyebrow){color:var(--muted);letter-spacing:.035em}
html[data-theme="liquid"] :is(.nav a,.nav-links>a,.profile-nav .nav a){
  border-radius:13px;color:var(--fg)!important;transition:background .18s ease,box-shadow .18s ease;
}
html[data-theme="liquid"] :is(.nav a,.nav-links>a,.profile-nav .nav a):hover{background:rgba(255,255,255,.66)!important}
html[data-theme="liquid"] :is(.nav a.active,.nav-links>a.active,.profile-nav .nav a.active){
  background:rgba(255,255,255,.88)!important;color:var(--accent-2)!important;
  box-shadow:0 2px 8px rgba(32,40,56,.07),inset 0 0 0 1px rgba(255,255,255,.9);
}
html[data-theme="liquid"] .nav a.active::before{display:none}
html[data-theme="liquid"] .nav a.active svg{color:var(--accent);opacity:1}
html[data-theme="liquid"] :is(.theme-toggle,.profile-theme,.profile-bell,.bell,.sk-nav-toggle){border-radius:50%!important}
html[data-theme="liquid"] :is(.sk-lang,.segmented,.workspace-tabs,.device-tabs,.evidence-tabs){
  background:rgba(118,118,128,.09)!important;border:1px solid rgba(60,60,67,.06);border-radius:999px;padding:4px;
}
html[data-theme="liquid"] :is(.sk-lang-btn,.segmented button,.workspace-tabs button,.device-tabs button,.evidence-tabs button){
  border-radius:999px!important;background:transparent!important;border-color:transparent!important;
  color:var(--muted)!important;box-shadow:none;
}
html[data-theme="liquid"] :is(.sk-lang-btn.on,.segmented button.on,.segmented button.active,.workspace-tabs button.on,.device-tabs button.on,.evidence-tabs button.on){
  background:#fff!important;color:var(--fg)!important;box-shadow:0 1px 5px rgba(0,0,0,.12);
}
html[data-theme="liquid"] :is(.um-card,.dk-card,.voice-card,.voice-item,.profile-card,.profile-summary,.card-req){
  background:var(--panel)!important;border:1px solid var(--border)!important;
  border-radius:22px;box-shadow:0 8px 28px -20px rgba(32,40,56,.18);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
html[data-theme="liquid"] :is(.modal-box,.sk-modal-card,.m-share-box,.notify,.drawer,.fd-modal,.um-menu,.sk-role-menu,.nav-group-menu){
  background:var(--sk-glass-strong)!important;border:1px solid rgba(255,255,255,.8)!important;
  border-radius:22px;box-shadow:0 24px 64px -20px rgba(23,30,45,.28),var(--sk-edge);
  -webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);
  color:var(--fg);
}
html[data-theme="liquid"] :is(.fd-backdrop,.story-modal-backdrop){background:rgba(24,28,36,.24)}
html[data-theme="liquid"] :is(.ap-toolbar,.analysis-toolbar,.playback-toolbar,.profile-savebar){
  background:var(--sk-glass)!important;border:1px solid rgba(255,255,255,.8);border-radius:18px;
  box-shadow:var(--sk-float),var(--sk-edge);
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
}
html[data-theme="liquid"] :is(.ap-btn,.fd-btn,.dispatch-btn,.quick button,.submit,.um-btn,.btn-primary,.submit-btn,.story-primary,.assign,.cmp-new){
  border-radius:999px!important;transition:background .18s ease,box-shadow .18s ease,filter .18s ease;
}
html[data-theme="liquid"] :is(.submit,.um-btn,.btn-primary,.submit-btn,.story-primary,.assign,.cmp-new,.send,.voice-primary,.profile-save,.profile-small-primary){
  background:linear-gradient(180deg,#1686ff,#0071ed)!important;color:#fff!important;
  border-color:rgba(0,94,204,.18)!important;box-shadow:0 3px 10px rgba(0,113,237,.16),inset 0 1px 0 #ffffff40;
}
html[data-theme="liquid"] :is(.asst svg,.cmp-new svg,.submit svg){color:inherit}
html[data-theme="liquid"] :is(button,[role="button"],a,input,select,textarea):focus-visible{
  outline:3px solid #007aff!important;outline-offset:3px;
}
html[data-theme="liquid"] :is(button,input,select,textarea):disabled{opacity:.48;cursor:not-allowed;filter:none;box-shadow:none}
html[data-theme="liquid"] :is(input[type="checkbox"],input[type="radio"],input[type="range"]){accent-color:#007aff}
html[data-theme="liquid"] select option{background:#fff;color:#1d1d1f}
html[data-theme="liquid"] :is(.ap-table,.q-tbl,.um-tbl,.requests){color:var(--fg)}
html[data-theme="liquid"] :is(.ap-table,.q-tbl,.um-tbl,.requests) th{
  background:#f5f5f7!important;color:var(--muted)!important;font-weight:600;
  border-color:var(--border)!important;
}
html[data-theme="liquid"] :is(.ap-table,.q-tbl,.um-tbl,.requests) td{border-color:var(--border)!important}
html[data-theme="liquid"] :is(.ap-table,.q-tbl,.um-tbl,.requests) tbody tr:hover{background:#f5f8fd!important}
html[data-theme="liquid"] :is(.requests tbody tr.selected,.device-item.on,.device-item.active,.card-req .ticket.active){
  background:#eaf3ff!important;box-shadow:inset 3px 0 0 #007aff;
}
/* Status colors carry meaning: preserve success, pending and destructive states. */
html[data-theme="liquid"] :is(.badge.ok,.badge.done,.ico.ok,.trend.up){background:#e8f5ec!important;color:#217a37!important}
html[data-theme="liquid"] :is(.badge.warn,.badge.doing,.ico.warn){background:#fff3d9!important;color:#895b00!important}
html[data-theme="liquid"] :is(.badge.danger,.ico.danger,.trend.down){background:#ffedeb!important;color:#c33228!important}
html[data-theme="liquid"] :is(.badge.info,.badge.new,.ico.info){background:#eaf3ff!important;color:#0062cc!important}
/* Chat, complaint handling and civic content. */
html[data-theme="liquid"] :is(.chat-hero,.hero){border-radius:26px;border-color:rgba(255,255,255,.8);box-shadow:0 8px 30px -22px #303b5540}
html[data-theme="liquid"] :is(.chat-hero h1,.chat-hero p,.tk-main b,.panel-head b,.card-req .ct b){color:var(--fg)}
html[data-theme="liquid"] :is(.chat-hero-kicker,.cmp-more,.quick button svg){color:var(--accent-2)}
html[data-theme="liquid"] :is(.composer,.panel-head,.queue-head,.pagination){background:transparent!important;border-color:var(--border)!important}
html[data-theme="liquid"] :is(.input,.cmp-in){background:#f5f5f7!important;border:1px solid var(--border)!important;border-radius:16px}
html[data-theme="liquid"] :is(.input,.cmp-in) input{background:transparent!important;border:0!important;box-shadow:none;color:var(--fg)!important}
html[data-theme="liquid"] .row.bot .bx{background:#f2f2f7;color:var(--fg);border-radius:20px 20px 20px 7px}
html[data-theme="liquid"] .row.me .bx{background:#e7f1ff;color:#163b67;border-radius:20px 20px 7px 20px}
html[data-theme="liquid"] .quick button{background:#f5f5f7!important;border-color:var(--border)!important}
html[data-theme="liquid"] .profile-nav .nav{background:transparent!important;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-theme="liquid"] :is(.profile-jump a,.profile-theme,.profile-bell){color:var(--fg)}
html[data-theme="liquid"] .login-form{background:var(--sk-glass-strong);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
html[data-theme="liquid"] .story-auth-modal{border-radius:28px!important}
html[data-theme="liquid"] .story-auth-form :is(h2,label,.field span){color:var(--fg)}
/* Video/map imagery stays intact; only the control plane receives glass. */
html[data-theme="liquid"] :is(.layer,.legend,.compass,.net-badge){border-radius:16px}
html[data-theme="liquid"] :is(.section-heading,.player-heading,.panel-footnote){background:transparent!important}
html[data-theme="liquid"] .player-shell{color:#f5f5f7}
/* Native-sized touch targets and a floating mobile tab bar. */
@media(max-width:860px){
  html[data-theme="liquid"] :is(.m-tabbar,.m-drawer){
    background:var(--sk-glass-strong)!important;border:1px solid rgba(255,255,255,.8)!important;
    -webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);
    box-shadow:var(--sk-float),var(--sk-edge);
  }
  html[data-theme="liquid"] .m-tabbar{left:12px;right:12px;bottom:calc(8px + env(safe-area-inset-bottom));border-radius:28px;padding-bottom:0}
  html[data-theme="liquid"] .m-tabbar .m-tab{margin:5px;border-radius:22px;color:var(--muted)}
  html[data-theme="liquid"] .m-tabbar .m-tab.on{background:#e5efff;color:var(--accent-2)}
  html[data-theme="liquid"] :is(.m-theme-btn,.m-drawer-btn,.voice-btn){min-width:44px;min-height:44px;border-radius:50%}
  html[data-theme="liquid"] :is(.card,.stat-card,.surface-panel,.um-card){border-radius:18px!important}
  html[data-theme="liquid"] :is(.field input,.field select,.field textarea,.composer input){font-size:16px}
}
/* Material fallbacks: readable without transparency, motion or blur support. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-theme="liquid"]{--sk-glass:#f8f9fc;--sk-glass-strong:#fff}
  html[data-theme="liquid"] :is(.topbar,.nav,.sidebar,.profile-nav){background:#f4f5f8!important}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){
  html[data-theme="liquid"]{--sk-glass:#fff;--sk-glass-strong:#fff;--panel:#fff;--border:#a6a6ad;--border-2:#8e8e93;--muted:#48484a;--muted-2:#48484a}
  html[data-theme="liquid"] :is(.topbar,.nav,.sidebar,.profile-nav,.profile-topbar,.story-auth-modal,.login-form){background:#fff!important}
  html[data-theme="liquid"] :is(.card,.panel,.surface,.surface-panel,.um-card,.profile-card){border-color:#a6a6ad!important}
  html[data-theme="liquid"] *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media(prefers-reduced-motion:reduce){
  html[data-theme="liquid"] *,html[data-theme="liquid"] *::before,html[data-theme="liquid"] *::after{
    animation:none!important;transition:none!important;scroll-behavior:auto!important;
  }
  html[data-theme="liquid"] body.sk-page-out{opacity:1}
  /* 豁免：登录故事书翻页（storyPageSlide*）是内容导航而非装饰——亮/暗主题在
     reduce 下也保留滑动（globals.css 只关文案入场动画），被上面全局
     animation:none 掐掉后 1.12s 窗口静止、章节硬切闪烁。与 live.js v10
     公告/预警滚动豁免（1516a03）同因；!important+更高特异性压回全局击杀。 */
  html[data-theme="liquid"] .story-book-stage.is-sliding .story-book-page-underlay{animation:storyPageSlideIn 1.12s cubic-bezier(.22,.7,.19,1) both!important}
  html[data-theme="liquid"] .story-book-page-current.is-turning{animation:storyPageSlideOut 1.12s cubic-bezier(.22,.7,.19,1) both!important}
  html[data-theme="liquid"] .story-book-page-current.is-turning::before{animation:storyPageSlideShade 1.12s ease both!important}
}

/* Secondary management actions must remain visually subordinate to Save. */
html[data-theme="liquid"] .um-btn.um-btn-sec{background:#f2f2f7!important;color:var(--fg)!important;box-shadow:none}

/* ── 10. Liquid Glass v4：逐卡片材质系统（Apple HIG 原则落地）────────────
   原则 → 实现：
   ① 玻璃是控件/导航层材质，内容区用磨砂面板分层（HIG：内容永远第一层）
   ② specular 顶缘高光 + 多层内圈 rim 光（"边缘透镜感"）
   ③ 同心圆角：22 卡片 / 999 胶囊控件 / 行内 12
   ④ 材质对输入有反应：指针跟随镜面光斑（role.js SK.liquid 注入 .sk-lq-glow）
   ⑤ 弹簧微动效：离散卡片悬停浮起 cubic-bezier(.34,1.56,.64,1)，按压向手指收聚
   ⑥ 性能：静态画布上内容卡片不加 backdrop-filter（对纯色渐变不可见），
      模糊预算只留给悬浮层（导航/顶栏/工具栏/弹窗/吸顶头部/浮动小件）。
   分级：大面板（地图/播放器/列表容器）只换材质不浮起；离散小卡片（stat/um/
   mc/contact/voice…）才有 hover lift。 */
html[data-theme="liquid"]{
  --sk-spring:cubic-bezier(.34,1.56,.64,1);
  --sk-rim:inset 0 1px 0 rgba(255,255,255,.92),inset 0 0 0 1px rgba(255,255,255,.30),inset 0 -1px 0 rgba(255,255,255,.20);
  --sk-card-shadow:0 1px 2px rgba(23,30,45,.04),0 14px 34px -18px rgba(23,30,45,.20);
  --sk-card-lift:0 2px 4px rgba(23,30,45,.05),0 24px 50px -20px rgba(23,58,120,.32);
}

/* 10.1 材质基底：磨砂玻璃面板（全部内容卡片/面板/列表容器） */
html[data-theme="liquid"] :is(.card,.stat-card,.mcard,.mc-card,.st-card,.s-card,.um-card,.dk-card,
  .voice-card,.voice-item,.profile-card,.profile-summary,.card-req,.info-card,.plan-card,.form-card,
  .contact-card,.alert-box,.ld-flights-box,.ld-notice-box,.panel,.module,.surface,.surface-panel,
  .map-card,.map-panel,.my-list,.plan-list,.planning-box,.report-box,.device-panel,.event-panel,
  .evidence-panel,.player-panel,.related-panel,.device-list,.event-list,.ap-table-panel,.notice-list,
  .request-categories){
  background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.56))!important;
  border:1px solid rgba(255,255,255,.66)!important;
  box-shadow:var(--sk-card-shadow),var(--sk-rim)!important;
}

/* 10.2 离散卡片：悬停浮起（弹簧）+ 边缘点亮（大面板刻意不浮起） */
html[data-theme="liquid"] :is(.card,.stat-card,.mcard,.mc-card,.st-card,.s-card,.um-card,.dk-card,
  .voice-card,.voice-item,.profile-card,.profile-summary,.info-card,.plan-card,.form-card,.contact-card){
  transition:transform .25s var(--sk-spring),box-shadow .25s var(--sk-spring),border-color .2s ease;
}
/* hover 浮起仅在真指针设备生效（触屏点按不再粘滞触发位移；transition 声明保持在外，按压/布局不受影响） */
@media (hover: hover) and (pointer: fine){
  html[data-theme="liquid"] :is(.card,.stat-card,.mcard,.mc-card,.st-card,.s-card,.um-card,.dk-card,
    .voice-card,.voice-item,.profile-card,.profile-summary,.info-card,.plan-card,.form-card,.contact-card):hover{
    transform:translateY(-2px);
    border-color:rgba(255,255,255,.95)!important;
    box-shadow:var(--sk-card-lift),var(--sk-rim)!important;
  }
}

/* 10.3 指针镜面光斑：SK.liquid 注入 <i class="sk-lq-glow">，随指针在卡面滑动 */
html[data-theme="liquid"] .sk-lq-glow{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6;
  background:radial-gradient(300px 220px at var(--sk-x,50%) var(--sk-y,-60px),
    rgba(255,255,255,.38),rgba(255,255,255,.06) 45%,rgba(255,255,255,0) 72%);
  opacity:0;transition:opacity .5s ease;mix-blend-mode:screen;
}
html[data-theme="liquid"] .sk-lq-on .sk-lq-glow{opacity:1}
@media (prefers-reduced-motion:reduce){html[data-theme="liquid"] .sk-lq-glow{transition:none}}

/* 10.4 按压收聚：材质"向手指聚拢"（按钮/导航/标签全部 spring-down） */
html[data-theme="liquid"] :is(.ap-btn,.fd-btn,.dispatch-btn,.quick button,.fc-btn,.mt-btn,.cmp-new,
  .asst,.submit,.um-btn,.btn-primary,.submit-btn,.story-primary,.assign,.send,.voice-primary,
  .profile-save,.profile-small-primary,.theme-toggle,.m-theme-btn,.sk-nav-toggle):active{transform:scale(.96)}
html[data-theme="liquid"] :is(.ap-btn,.fd-btn,.dispatch-btn,.quick button,.fc-btn,.mt-btn,.cmp-new,
  .asst,.submit,.um-btn,.btn-primary,.submit-btn,.story-primary,.assign,.send,.voice-primary,
  .profile-save,.profile-small-primary){transition:transform .2s var(--sk-spring),filter .2s ease,box-shadow .2s ease,background .18s ease}
html[data-theme="liquid"] :is(.nav a,.nav-links>a,.sk-lang-btn,.segmented button,.workspace-tabs button,
  .device-tabs button,.evidence-tabs button,.m-tab):active{transform:scale(.97)}
html[data-theme="liquid"] :is(.nav a,.nav-links>a){transition:background .18s ease,box-shadow .18s ease,transform .2s var(--sk-spring)}

/* 10.5 卡片头部 / 吸顶条：半透明 + 模糊（滚动内容从玻璃下穿过）
   注意：.map-head 不在此列——地图顶栏是「悬浮在暗色地图上的玻璃条」，见 10.5b。 */
html[data-theme="liquid"] :is(.panel-head,.mon-head,.fc-head,.rb-head,.mc-card-head,
  .queue-head,.dash-cfg-head,.dash-lib-head,.fd-m-head,.rm-head){
  background:rgba(255,255,255,.34)!important;
  border-color:var(--border)!important;color:var(--fg);
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
}

/* 10.5b 地图浮层家族（twin/twin3d/dispatch）：各页 [data-theme=light] 的覆盖在 liquid
   下不命中、会回落暗色基底——这里统一给高对比玻璃（地图画布本身保持暗色不动）。 */
html[data-theme="liquid"] :is(.map-head,.map-tip,.map-legend,.reveal-chip,.sk-mk,.sk-mk-sel,
  .reminders,.sat-ctl,.ps-results){
  background:var(--sk-glass-strong)!important;
  color:var(--fg)!important;
  border:1px solid rgba(255,255,255,.60)!important;
  -webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);
  box-shadow:var(--sk-float),var(--sk-rim);
}
html[data-theme="liquid"] :is(.map-head,.map-tip,.map-legend,.reminders,.sat-ctl,.ps-results) :is(b,h2,h3,span){
  color:inherit;
}
/* 图层筹码激活态：白玻璃底 + 蓝字描边（近透明蓝压暗地图会浑浊） */
html[data-theme="liquid"] .layer.on{
  background:var(--sk-glass-strong)!important;
  color:var(--accent-2)!important;
  border-color:rgba(10,132,255,.38)!important;
  box-shadow:inset 0 0 0 1px rgba(10,132,255,.22),var(--sk-edge)!important;
}
html[data-theme="liquid"] .nav-foot{
  border-top:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.30);
  border-radius:12px;margin:8px 6px 6px;
}

/* 10.6 胶囊 / 徽章 / 状态签：rim 光（语义色保持 §9 不动，只加玻璃边缘） */
html[data-theme="liquid"] :is(.env-pill,.count-pill,.playback-badge,.net-badge,.badge,.trend,.ico,.ap-stat,.mon-src){
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55)!important;
}
html[data-theme="liquid"] :is(.count-pill,.playback-badge,.env-pill,.net-badge){border-radius:999px!important}
html[data-theme="liquid"] .trend.flat{background:#ececf0!important;color:#48484a!important}

/* 10.7 行级悬停：玻璃填充（列表行 / 时间线 / 设备条目） */
html[data-theme="liquid"] :is(.timeline-item,.notify-row,.location-row,.vrow,.plog-item,.rm-item,
  .ql-item,.f-row,.fc-row,.ic-row,.fm-row):hover{background:rgba(255,255,255,.52)}

/* 10.8 浮层：toast 玻璃 + hero 幅面 rim 光 */
html[data-theme="liquid"] :is(.dp-toast,.toast){
  background:var(--sk-glass-strong)!important;color:var(--fg)!important;
  border:1px solid rgba(255,255,255,.8)!important;border-radius:18px;
  box-shadow:var(--sk-float),var(--sk-rim);
  -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
}
html[data-theme="liquid"] :is(.chat-hero,.hero,.mc-hero){
  box-shadow:0 8px 30px -22px rgba(32,40,56,.25),var(--sk-rim);
}