/* 智行未来 · 三端共用设计 token（《三端设计规范_20261010》第 3、4、7 节）
   源文件在 rdk-x5/src/ui-kit/，用 sync.py 复制到 App 与网页，不要直接改副本。 */
@font-face{font-family:'Helvetica-Condensed';src:url('fonts/Helvetica-Condensed.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-024F,U+1E00-1EFF,U+2000-206F}

:root{
  color-scheme:light;
  /* 网页与 App 优先系统 SF/Roboto；车载屏 QML 另有字体，不再把 Condensed 当网页正文字体 */
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue','PingFang SC','Noto Sans SC','Microsoft YaHei',system-ui,sans-serif;
  --bg:#F5F5F7; --card:#FFFFFF; --fill:#E8E8ED; --ink:#1D1D1F; --ink2:#6E6E73; --ink3:#AEAEB2; --sep:#D2D2D7;
  --seg-on:#FFFFFF; --switch-off:#E9E9EB; --avatar:#636366;
  --seg-bg:rgba(255,255,255,.55);
  --map:#E3E8DD; --map-room:#F8F9F5; --map-wall:#AEB7A8; --route-casing:#FFFFFF;
  --blue:#0071E3; --blue-text:#0066CC; --blue-soft:#E5F0FD;
  --green:#34C759; --green-text:#248A3D; --green-soft:#E4F6E8;
  --orange:#FF9500; --orange-text:#C93400; --orange-soft:#FFF1E0;
  --red:#D70015; --red-text:#D70015; --red-soft:#FDE7E8;
  /* Strutt 驾驶模式底色（4.3） */
  --mode-manual:#C7CED7; --mode-waypoints:#F4E3AC; --mode-copilot:#BDDFFF; --mode-copilotplus:#C3E8C0;
  --mode-ink:#213648; --mode-ink2:#3E5266; --mode-card:rgba(255,255,255,.55); --mode-dot:#213648;
  /* 材质（第 7 节）：macOS 27 液态玻璃。regular 变体只用于功能层（顶栏/侧栏/浮层），内容卡片保持不透明 */
  --glass-bg:rgba(255,255,255,.72); --glass-deep:rgba(255,255,255,.55); --glass-float:rgba(255,255,255,.82);
  --glass-edge:rgba(255,255,255,.95); --glass-border-in:rgba(255,255,255,.55); --glass-hair:rgba(0,0,0,.05);
  --glass-shadow:0 8px 32px rgba(0,0,0,.08),0 1.5px 4px rgba(0,0,0,.04);
  --glass-shadow-float:0 16px 48px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.06);
  --glass-fallback:rgba(246,246,250,.97);
  --glass-tint1:rgba(0,113,227,.10); --glass-tint2:rgba(255,149,0,.08);
  --mat:var(--glass-bg); --sheet:var(--glass-float); --bar:var(--glass-bg); --scrim:rgba(0,0,0,.35);
  --blur-mat:blur(28px) saturate(180%); --blur-sheet:blur(36px) saturate(180%); --blur-bar:blur(32px) saturate(190%);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#000000; --card:#1C1C1E; --fill:#2C2C2E; --ink:#FFFFFF; --ink2:#AEAEB2; --ink3:#98989D; --sep:#38383A;
  --seg-on:#636366; --switch-off:#39393D; --avatar:#48484A;
  --seg-bg:rgba(60,60,67,.55);
  --map:#141618; --map-room:#1F2225; --map-wall:#4A5056; --route-casing:#0B1A2E;
  --blue:#0A84FF; --blue-text:#409CFF; --blue-soft:#0A2540;
  --green:#30D158; --green-text:#30D158; --green-soft:#0E2A16;
  --orange:#FF9F0A; --orange-text:#FFB340; --orange-soft:#3A2600;
  --red:#C9302A; --red-text:#FF6961; --red-soft:#3A1212;
  --mode-manual:#262B32; --mode-waypoints:#3A3012; --mode-copilot:#102A44; --mode-copilotplus:#14301A;
  --mode-ink:#F2F4F7; --mode-ink2:#C3CAD3; --mode-card:rgba(255,255,255,.08); --mode-dot:#F4E3AC;
  --glass-bg:rgba(44,46,52,.62); --glass-deep:rgba(30,31,36,.68); --glass-float:rgba(54,56,64,.78);
  --glass-edge:rgba(255,255,255,.16); --glass-border-in:rgba(255,255,255,.09); --glass-hair:rgba(0,0,0,.4);
  --glass-shadow:0 8px 32px rgba(0,0,0,.4),0 1.5px 4px rgba(0,0,0,.24);
  --glass-shadow-float:0 16px 48px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.3);
  --glass-fallback:rgba(30,30,34,.97);
  --glass-tint1:rgba(10,132,255,.14); --glass-tint2:rgba(191,90,242,.10);
  --mat:var(--glass-bg); --sheet:var(--glass-float); --bar:var(--glass-bg); --scrim:rgba(0,0,0,.5);
}
/* HIG「降低透明度」：模糊换成实色，只改颜色值 */
:root[data-reduce-transparency]{--mat:var(--card); --sheet:var(--bg); --bar:var(--card); --blur-mat:none; --blur-sheet:none; --blur-bar:none}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-synthesis:none;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;font-size:17px;line-height:1.47}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
button:disabled{cursor:default;opacity:.4}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
svg.ic.solid{fill:currentColor}

/* 液态玻璃背景：固定于视口的淡色环境渐变，给玻璃层可折射的内容（不随滚动重绘） */
html{background:var(--bg);
  background-image:radial-gradient(55% 45% at 12% -5%,var(--glass-tint1) 0%,transparent 60%),
                   radial-gradient(50% 40% at 88% 105%,var(--glass-tint2) 0%,transparent 60%);
  background-attachment:fixed}
body{background:transparent}

/* 材质：玻璃 = 半透明底 + 模糊采样 + 顶部高光与内描边（box-shadow 不占布局） */
.mat{background:var(--mat);-webkit-backdrop-filter:var(--blur-mat);backdrop-filter:var(--blur-mat);
  box-shadow:inset 0 0 0 1px var(--glass-border-in),inset 0 1px 0 var(--glass-edge)}
.mat-bar{background:var(--bar);-webkit-backdrop-filter:var(--blur-bar);backdrop-filter:var(--blur-bar);
  box-shadow:inset 0 0 0 1px var(--glass-border-in),inset 0 1px 0 var(--glass-edge)}
.mat-sheet{background:var(--sheet);-webkit-backdrop-filter:var(--blur-sheet);backdrop-filter:var(--blur-sheet);
  box-shadow:inset 0 0 0 1px var(--glass-border-in),inset 0 1px 0 var(--glass-edge),var(--glass-shadow-float)}
/* 无 backdrop-filter 的浏览器：接近不透明，保证可读 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .mat,.mat-bar,.mat-sheet{background:var(--glass-fallback)}}
/* 降低透明度：玻璃退化为卡片实色，同时关掉高光描边 */
:root[data-reduce-transparency] .mat,:root[data-reduce-transparency] .mat-bar,:root[data-reduce-transparency] .mat-sheet{box-shadow:none}
:root[data-reduce-transparency] .dialog,:root[data-reduce-transparency] .float,:root[data-reduce-transparency] .sh-pop,
:root[data-reduce-transparency] .sh-menu,:root[data-reduce-transparency] .cam-view-pop,:root[data-reduce-transparency] .call-panel{background:var(--card);-webkit-backdrop-filter:none;backdrop-filter:none}

/* 细节工具类：Apple 风格数字、标题字距、滚动条、选区、连续圆角（corner-shape 仅 Chromium，Safari 回退普通圆角） */
table,.metric .v,.vital-numbers b,.cl b{font-variant-numeric:tabular-nums}
.sh-brand{letter-spacing:-.02em}
::selection{background:var(--blue-soft)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(127,127,127,.45);border-radius:5px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(127,127,127,.65);border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}
@supports (corner-shape: squircle){
  .card,.btn,.dialog,.float,.mat-sheet,.sh-pop,.cam-view-pop,.call-panel,.seg,.list,.side a,.sh-tabs a,.frm input,.frm select,.dialog input,.dialog select{corner-shape:squircle}}

/* 状态标签（第 6 节 tag）：胶囊软色 */
.tag{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:3px 10px;font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap;background:var(--fill);color:var(--ink2)}
.tag.red{background:var(--red-soft);color:var(--red-text)}
.tag.orange{background:var(--orange-soft);color:var(--orange-text)}
.tag.green{background:var(--green-soft);color:var(--green-text)}
.tag.blue{background:var(--blue-soft);color:var(--blue-text)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}

/* 驾驶模式色带 */
.mode-band{background:var(--mode-manual);color:var(--mode-ink)}
.mode-band.waypoints{background:var(--mode-waypoints)}
.mode-band .dot{background:var(--mode-dot)}
.mode-band .ink2{color:var(--mode-ink2)}
.mode-swatch{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--mode-manual);box-shadow:0 0 0 1.5px var(--mode-ink);flex:none}
.mode-swatch.waypoints{background:#F4E3AC}
.mode-swatch.off{background:var(--fill);box-shadow:none}

/* 开关（App 51×31，外层点按 ≥44） */
.switch{width:60px;height:44px;display:grid;place-items:center;flex:none}
.switch>span{position:relative;display:block;width:51px;height:31px;border-radius:16px;background:var(--switch-off);transition:background .2s}
.switch>span::after{content:"";position:absolute;left:2px;top:2px;width:27px;height:27px;border-radius:50%;background:#FFFFFF;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:transform .2s}
.switch[aria-checked="true"]>span{background:var(--green)}
.switch[aria-checked="true"]>span::after{transform:translateX(20px)}

/* 分段控件：半透明分层 + 发丝描边（iOS 26 分段控件质感） */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);height:36px;padding:2px;border-radius:10px;background:var(--seg-bg);box-shadow:inset 0 0 0 1px var(--sep)}
.seg>button{border-radius:8px;font-size:14px;color:var(--ink)}
.seg>button[aria-selected="true"]{background:var(--seg-on);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.12)}