";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-contain-size{syntax:"*";inherits:false}@property --tw-contain-layout{syntax:"*";inherits:false}@property --tw-contain-paint{syntax:"*";inherits:false}@property --tw-contain-style{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes pulse{50%{opacity:.5}}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0));filter:blur(var(--tw-enter-blur,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0));filter:blur(var(--tw-exit-blur,0))}}@keyframes accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto)))))}}@keyframes accordion-up{0%{height:var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto)))))}to{height:0}}[data-vaul-drawer]:not([data-vaul-custom-container=true])::after{content:"";position:absolute;background:inherit;background-color:inherit}[data-vaul-drawer][data-vaul-drawer-direction=top]::after{top:initial;bottom:100%;left:0;right:0;height:200%}[data-vaul-drawer][data-vaul-drawer-direction=bottom]::after{top:100%;bottom:initial;left:0;right:0;height:200%}[data-vaul-drawer][data-vaul-drawer-direction=left]::after{left:initial;right:100%;top:0;bottom:0;width:200%}[data-vaul-drawer][data-vaul-drawer-direction=right]::after{left:100%;right:initial;top:0;bottom:0;width:200%}[data-vaul-handle]:active,[data-vaul-handle]:hover{opacity:1}@media (pointer:fine){[data-vaul-handle-hitarea]:{width:100%;height:100%}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{to{opacity:0}}@keyframes slideFromBottom{from{transform:translate3d(0,var(--initial-transform,100%),0)}to{transform:translate3d(0,0,0)}}@keyframes slideToBottom{to{transform:translate3d(0,var(--initial-transform,100%),0)}}@keyframes slideFromTop{from{transform:translate3d(0,calc(var(--initial-transform,100%)*-1),0)}to{transform:translate3d(0,0,0)}}@keyframes slideToTop{to{transform:translate3d(0,calc(var(--initial-transform,100%)*-1),0)}}@keyframes slideFromLeft{from{transform:translate3d(calc(var(--initial-transform,100%)*-1),0,0)}to{transform:translate3d(0,0,0)}}@keyframes slideToLeft{to{transform:translate3d(calc(var(--initial-transform,100%)*-1),0,0)}}@keyframes slideFromRight{from{transform:translate3d(var(--initial-transform,100%),0,0)}to{transform:translate3d(0,0,0)}}@keyframes slideToRight{to{transform:translate3d(var(--initial-transform,100%),0,0)}}[data-sonner-toast]:focus-visible{box-shadow:0 4px 12px rgba(0,0,0,.1),0 0 0 2px rgba(0,0,0,.2)}[data-sonner-toast][data-styled=true] [data-button]:focus-visible{box-shadow:0 0 0 2px rgba(0,0,0,.4)}[data-sonner-toast][data-styled=true] [data-close-button]:focus-visible{box-shadow:0 4px 12px rgba(0,0,0,.1),0 0 0 2px rgba(0,0,0,.2)}[data-sonner-toast][data-styled=true]:hover [data-close-button]:hover{background:var(--gray2);border-color:var(--gray5)}[data-sonner-toast][data-swiping=true]::before{content:"";position:absolute;left:-100%;right:-100%;height:100%;z-index:-1}[data-sonner-toast][data-y-position=top][data-swiping=true]::before{bottom:50%;transform:scaleY(3) translateY(50%)}[data-sonner-toast][data-y-position=bottom][data-swiping=true]::before{top:50%;transform:scaleY(3) translateY(-50%)}[data-sonner-toast][data-swiping=false][data-removed=true]::before{content:"";position:absolute;inset:0;transform:scaleY(2)}[data-sonner-toast][data-expanded=true]::after{content:"";position:absolute;left:0;height:calc(var(--gap) + 1px);bottom:100%;width:100%}[data-sonner-toast][data-removed=true][data-front=false]::before{height:calc(var(--initial-height) + 20%)}@keyframes swipe-out-left{from{transform:var(--y) translateX(var(--swipe-amount-x));opacity:1}to{transform:var(--y) translateX(calc(var(--swipe-amount-x) - 100%));opacity:0}}@keyframes swipe-out-right{from{transform:var(--y) translateX(var(--swipe-amount-x));opacity:1}to{transform:var(--y) translateX(calc(var(--swipe-amount-x) + 100%));opacity:0}}@keyframes swipe-out-up{from{transform:var(--y) translateY(var(--swipe-amount-y));opacity:1}to{transform:var(--y) translateY(calc(var(--swipe-amount-y) - 100%));opacity:0}}@keyframes swipe-out-down{from{transform:var(--y) translateY(var(--swipe-amount-y));opacity:1}to{transform:var(--y) translateY(calc(var(--swipe-amount-y) + 100%));opacity:0}}[data-sonner-toaster][data-sonner-theme=dark] [data-sonner-toast] [data-close-button]:hover{background:var(--normal-bg-hover);border-color:var(--normal-border-hover)}@keyframes sonner-fade-in{0%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:scale(1)}}@keyframes sonner-fade-out{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.8)}}@keyframes sonner-spin{0%{opacity:1}100%{opacity:.15}}/* 全局基线样式（深色后台主题）
*
* 注意：这里的元素级重置必须放在 @layer base 里。
* panel.css 是存证页面 CSS 的原样拼接，Tailwind 的工具类都在 @layer utilities；
* 未分层的规则优先级高于任何 @layer，会把 text-sm / text-2xl 这类工具类静默压掉
* （例：h1.text-2xl 会退化成继承字号、button.text-sm 会退化成 16px）。
*/
:root {
--bc-bg: #0d1117;
--bc-panel: #161b22;
--bc-border: #30363d;
--bc-text: #e6edf3;
--bc-muted: #8b949e;
--bc-accent: #f85149;
}
@layer base {
* { box-sizing: border-box; }
html, body, #app { height: 100%; }
/* 竖向滚动条**常驻**（2026-10-25 二次修正）：APK 構建頁的手机预览按列宽等比缩放，缩放后的高度又决定
内容高度，内容高度再决定页面要不要竖向滚动条 —— 滚动条一出现就占掉列宽、预览变小、内容变矮、
滚动条消失、列宽回来 ⇒ **每帧自激**（实测 1600×877~880：`clientWidth` 1600↔1592、预览 550↔546px，
121 帧采样 150 次翻面；把窗口高度挪出这个带宽就完全静止）。
⚠️ **别把它换回只用 `scrollbar-gutter: stable`**：Chrome 对**根元素**在「当前没有滚动条」时**不会**为
gutter 预留槽位（对普通 div 会 —— 实测 `` 短内容下
clientWidth 照样 -15，而根元素短内容下 clientWidth 不变），只写 gutter 等于没修，抖动照旧。
`overflow-y: scroll` 让滚动条无条件常驻，可用宽度恒定，这条反馈链从源头断掉；
macOS 的 overlay 滚动条本来不占宽，视觉无变化（Windows / Linux 常驻一条 8px 槽位，内容不再横移）。 */
html { overflow-y: scroll; scrollbar-gutter: stable; }
/* 内层滚动容器同理（div 上 gutter 是生效的）：给「内容宽度 → 内容高度 → 要不要滚动条」这类反馈链用。 */
.bc-scroll-stable { scrollbar-gutter: stable; }
/* 全部页面按用户确认的 80% 视觉密度呈现；125% 的自然布局宽高补偿后，
变换后的内容仍完整占满当前窗口，等效于浏览器缩放到 80%。 */
.bc-app-scale {
width: 125%;
min-height: 125svh;
transform: scale(0.8);
transform-origin: top left;
}
.bc-app-scale .h-svh { height: 125svh !important; }
.bc-app-scale .min-h-svh { min-height: 125svh !important; }
.bc-app-scale .bc-login,
.bc-app-scale .bc-boot { min-height: 125svh; }
body {
margin: 0;
font-family: Inter, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
background: var(--bc-bg);
color: var(--bc-text);
-webkit-font-smoothing: antialiased;
/* macOS 上的 Firefox 走 ox 前缀；只做平滑，不改字重/字号，避免布局位移 */
-moz-osx-font-smoothing: grayscale;
}
button { font: inherit; }
input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; }
/* 存证页面 CSS 缺 preflight：补标题重置，避免 h1-h6 用浏览器默认字号。
放在 base 层内，text-2xl / font-bold 这类工具类仍可覆盖。 */
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0; }
p { margin: 0; }
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #30363d; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }
/* 存证 CSS 未产出、但侧栏折叠交互需要的工具类。
存证页面固定为展开态（data-state=expanded），这些类只影响折叠后，展开态与存证一致。 */
@layer utilities {
.group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\)\]:is(:where(.group)[data-collapsible=icon] *) {
width: calc(var(--sidebar-width-icon) + calc(var(--spacing) * 4));
}
.group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\+2px\)\]:is(:where(.group)[data-collapsible=icon] *) {
width: calc(var(--sidebar-width-icon) + calc(var(--spacing) * 4) + 2px);
}
.group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.group)[data-collapsible=offcanvas] *) {
left: calc(var(--sidebar-width) * -1);
}
.peer-data-\[state\=collapsed\]\:w-\[calc\(100\%-var\(--sidebar-width-icon\)-1rem\)\]:is(:where(.peer)[data-state=collapsed] ~ *) {
width: calc(100% - var(--sidebar-width-icon) - 1rem);
}
.group-data-\[collapsible\=icon\]\:size-8\!:is(:where(.group)[data-collapsible=icon] *) {
width: calc(var(--spacing) * 8) !important;
height: calc(var(--spacing) * 8) !important;
}
.group-data-\[collapsible\=icon\]\:p-2\!:is(:where(.group)[data-collapsible=icon] *) {
padding: calc(var(--spacing) * 2) !important;
}
.group-data-\[collapsible\=icon\]\:overflow-hidden:is(:where(.group)[data-collapsible=icon] *) {
overflow: hidden;
}
}
/* ---------------------------------------------------------------------------
* 面板共享组件层
*
* 为什么放在 @layer components：这一层低于 utilities，页面里残留的工具类仍可覆盖，
* 不会悄悄改变已有页面的表现；同时比 @layer base 高，能稳定压住元素级重置。
*
* 目标（对应用户反馈）：① 控件尺寸/间距统一，工具栏不再互相遮挡；
* ② 交互控件都有可见焦点环、hover 过渡 150ms、点击区不小于 32×32；
* ③ 把「一个按钮 20 个类名」收敛成 .bc-btn 这类短类名，便于后续统一维护。
* ------------------------------------------------------------------------- */
@layer components {
/* 页面外壳：所有业务页共用同一套外边距与纵向节奏 */
.bc-page {
display: flex;
flex: 1;
min-height: 0;
flex-direction: column;
gap: 0.75rem;
padding: 0 1rem 1rem;
}
.bc-page__body { display: flex; flex: 1; min-height: 0; flex-direction: column; }
/* 页头：左侧标题 + 右侧动作 */
.bc-page__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex: none;
}
.bc-page__title {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9375rem;
font-weight: 600;
color: var(--bc-text);
}
.bc-page__sub { font-size: 0.75rem; color: var(--bc-muted); }
.bc-page__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
/* 工具栏：筛选与批量操作分行的容器，行内元素永不重叠 */
.bc-toolbar {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.625rem 0.75rem;
border: 1px solid var(--bc-border);
border-radius: 0.75rem;
background: #12171e;
flex: none;
}
.bc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-width: 0; }
.bc-row--between { justify-content: space-between; }
.bc-row__label {
font-size: 0.75rem;
color: var(--bc-muted);
letter-spacing: 0.02em;
flex: none;
}
.bc-sep { width: 1px; height: 1.25rem; background: var(--bc-border); flex: none; }
/* 表单控件：统一高度/圆角/焦点环 */
.bc-input,
.bc-select {
height: 2rem;
padding: 0 0.625rem;
font-size: 0.8125rem;
color: var(--bc-text);
background: #0d1117;
border: 1px solid var(--bc-border);
border-radius: 0.5rem;
outline: none;
transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
.bc-select {
background: #161b22;
color: #c9d1d9;
padding-right: 1.75rem;
cursor: pointer;
appearance: none;
/* 国家/应用这类选项文案偏长，限宽 + 省略号，避免一个下拉就把整行挤换行 */
max-width: 9.5rem;
text-overflow: ellipsis;
background-image: linear-gradient(45deg, transparent 50%, var(--bc-muted) 50%),
linear-gradient(135deg, var(--bc-muted) 50%, transparent 50%);
background-position: calc(100% - 14px) 13px, calc(100% - 9px) 13px;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}
.bc-input::placeholder { color: #6e7681; }
.bc-input:hover, .bc-select:hover { border-color: #484f58; }
.bc-input:focus-visible, .bc-select:focus-visible {
border-color: #58a6ff;
box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.25);
}
/* 搜索框：左侧留出图标位 */
.bc-search { position: relative; min-width: 12rem; flex: 1 1 14rem; max-width: 22rem; }
.bc-search .bc-input { width: 100%; padding-left: 2rem; }
.bc-search > svg {
position: absolute;
left: 0.625rem;
top: 50%;
transform: translateY(-50%);
width: 0.875rem;
height: 0.875rem;
color: var(--bc-muted);
pointer-events: none;
}
/* 按钮：默认=次级（描边），变体见下 */
.bc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
height: 2rem;
padding: 0 0.75rem;
font-size: 0.8125rem;
font-weight: 500;
color: #c9d1d9;
background: #161b22;
border: 1px solid var(--bc-border);
border-radius: 0.5rem;
cursor: pointer;
white-space: nowrap;
flex: none;
transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease;
}
.bc-btn:hover { background: #1c2128; border-color: #484f58; color: var(--bc-text); }
.bc-btn:active { transform: translateY(0.5px); }
.bc-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(248, 81, 73, 0.3); }
.bc-btn[disabled], .bc-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.bc-btn[disabled]:hover, .bc-btn:disabled:hover { background: #161b22; border-color: var(--bc-border); color: #c9d1d9; }
.bc-btn > svg { width: 0.875rem; height: 0.875rem; flex: none; }
.bc-btn--icon { width: 2rem; padding: 0; }
.bc-btn--sm { height: 1.75rem; padding: 0 0.5rem; font-size: 0.75rem; }
.bc-btn--sm.bc-btn--icon { width: 1.75rem; }
.bc-btn--primary { background: rgba(248, 81, 73, 0.14); border-color: rgba(248, 81, 73, 0.35); color: #ff7b72; }
.bc-btn--primary:hover { background: rgba(248, 81, 73, 0.22); border-color: rgba(248, 81, 73, 0.5); color: #ffa198; }
.bc-btn--accent { background: rgba(88, 166, 255, 0.12); border-color: rgba(88, 166, 255, 0.3); color: #79c0ff; }
.bc-btn--accent:hover { background: rgba(88, 166, 255, 0.2); border-color: rgba(88, 166, 255, 0.45); color: #a5d6ff; }
.bc-btn--warn { background: rgba(240, 136, 62, 0.12); border-color: rgba(240, 136, 62, 0.32); color: #f0a35e; }
.bc-btn--warn:hover { background: rgba(240, 136, 62, 0.2); border-color: rgba(240, 136, 62, 0.45); color: #ffbe8a; }
.bc-btn--danger { background: rgba(248, 81, 73, 0.12); border-color: rgba(248, 81, 73, 0.3); color: #f85149; }
.bc-btn--danger:hover { background: rgba(248, 81, 73, 0.2); border-color: rgba(248, 81, 73, 0.45); color: #ff7b72; }
.bc-btn--success { background: rgba(63, 185, 80, 0.12); border-color: rgba(63, 185, 80, 0.3); color: #56d364; }
.bc-btn--success:hover { background: rgba(63, 185, 80, 0.2); border-color: rgba(63, 185, 80, 0.45); color: #7ee787; }
.bc-btn--on { background: rgba(248, 81, 73, 0.14); border-color: rgba(248, 81, 73, 0.4); color: #ff7b72; }
/* 预置 CSS 里没有 .transition-shadow / .transition-colors 之外的过渡工具类，
所以按项目约定补语义类：只声明真正会变的属性，别用 transition: all。 */
.bc-card-hover { transition: box-shadow 150ms ease, border-color 150ms ease; }
.bc-pill-selectable { transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease; }
/* 设备卡片的左侧标签列。
中文标签最长「系统版本:」= 4 字，4.5rem 够用；英文最长 "Setup progress:" 约 116px，
固定 72px 会让英文标签压到右侧数值列上（切到 English 立刻看得出没对齐）。
宽度跟着 走 —— i18n 的 setLocale() 会同步该属性，所以不需要 JS 参与。 */
.bc-field-label { width: 4.5rem; flex: none; color: #6e7681; }
html[lang^='en'] .bc-field-label { width: 7.75rem; }
/* ---- 排版原语（只调细节，不动布局）---- */
/* 会变化的数字（计数、百分比、时间、RTT、体积）：等宽数字，避免刷新时左右跳 */
.bc-num { font-variant-numeric: tabular-nums; }
/* 短标题/卡片标题：换行更均衡，避免最后一个字掉到下一行 */
.bc-balance { text-wrap: balance; }
/* 说明/次要文案：避免孤字与难看的断行（长正文不要用） */
.bc-pretty { text-wrap: pretty; }
/* 统计/状态小胶囊（比按钮更轻，不可点或可点皆可） */
.bc-chip {
display: inline-flex;
align-items: center;
gap: 0.375rem;
height: 2rem;
padding: 0 0.625rem;
font-size: 0.8125rem;
color: #c9d1d9;
background: #161b22;
border: 1px solid var(--bc-border);
border-radius: 0.5rem;
white-space: nowrap;
flex: none;
/* 计数类胶囊：等宽数字，刷新时不会因为 1/8 宽度不同而抖动 */
font-variant-numeric: tabular-nums;
}
button.bc-chip { cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; }
button.bc-chip:hover { background: #1c2128; border-color: #484f58; color: var(--bc-text); }
button.bc-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(248, 81, 73, 0.3); }
.bc-chip--muted { color: var(--bc-muted); }
.bc-chip--total { border-color: #30363d; }
.bc-chip--online { background: rgba(63, 185, 80, 0.12); border-color: rgba(63, 185, 80, 0.4); color: #56d364; }
.bc-chip--info { background: rgba(88, 166, 255, 0.08); border-color: rgba(88, 166, 255, 0.22); color: #79c0ff; }
.bc-chip--warn { background: rgba(240, 136, 62, 0.08); border-color: rgba(240, 136, 62, 0.22); color: #f0a35e; }
.bc-chip--cyan { background: rgba(57, 197, 187, 0.08); border-color: rgba(57, 197, 187, 0.22); color: #56d4dd; }
.bc-chip__value { font-weight: 600; font-size: 0.9375rem; line-height: 1; }
.bc-chip__label { font-size: 0.75rem; color: var(--bc-muted); }
.bc-chip--online .bc-chip__label { color: rgba(86, 211, 100, 0.7); }
.bc-chip--info .bc-chip__label { color: rgba(121, 192, 255, 0.7); }
.bc-chip--warn .bc-chip__label { color: rgba(240, 163, 94, 0.7); }
.bc-chip--cyan .bc-chip__label { color: rgba(86, 212, 221, 0.7); }
/* 下拉面板：顶栏币种/时区共用；固定定位在父级 relative 容器内、超出高度可滚动 */
.bc-menu-wrap { position: relative; }
.bc-menu {
position: absolute;
top: calc(100% + 0.375rem);
left: 0;
z-index: 50;
min-width: 100%;
max-height: 16rem;
overflow-y: auto;
padding: 0.25rem;
background: #161b22;
border: 1px solid var(--bc-border);
border-radius: 0.5rem;
box-shadow: 0 12px 32px rgba(1, 4, 9, 0.6);
}
.bc-menu--right { left: auto; right: 0; }
.bc-menu__item {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.375rem 0.5rem;
font-size: 0.8125rem;
color: var(--bc-text);
background: none;
border: 0;
border-radius: 0.375rem;
cursor: pointer;
text-align: left;
transition: background-color 120ms ease;
}
.bc-menu__item:hover { background: #1c2128; }
.bc-menu__item[aria-selected="true"], .bc-menu__item[data-active="true"] {
background: rgba(248, 81, 73, 0.12);
color: #ff7b72;
}
.bc-menu__code { color: var(--bc-muted); font-variant-numeric: tabular-nums; }
.bc-menu__search {
position: sticky;
top: -0.25rem;
padding: 0.25rem;
background: #161b22;
border-bottom: 1px solid var(--bc-border);
margin-bottom: 0.25rem;
}
.bc-menu__empty { padding: 0.75rem 0.5rem; font-size: 0.8125rem; color: var(--bc-muted); text-align: center; }
/* 实时/缓存状态点：不只看颜色，同时带文字（无障碍：不依赖颜色传达信息） */
.bc-live { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--bc-muted); }
.bc-live__dot { width: 0.375rem; height: 0.375rem; border-radius: 999px; background: #56d364; flex: none; }
.bc-live--stale .bc-live__dot { background: #f0a35e; }
/* 空态 / 表格滚动容器（宽表横滚，避免撑破布局） */
.bc-empty { padding: 3.5rem 1rem; text-align: center; color: var(--bc-muted); font-size: 0.8125rem; }
/* 列表加载失败：说清原因并给「重试」，不再是"一片暂无数据"。
所有列表页共用（失败原因来自 useList 的 error），见 frontend/src/useList.js。 */
.bc-list-error { padding: 3.5rem 1rem; text-align: center; font-size: 0.8125rem; color: #f85149;
display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.bc-table-scroll { flex: 1; min-height: 0; overflow: auto; }
/* 分页条：与面板同宽，上边框分隔 */
.bc-pager {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.625rem 0.875rem;
border-top: 1px solid var(--bc-border);
}
.bc-pager__range { font-size: 0.75rem; color: var(--bc-muted); font-variant-numeric: tabular-nums; }
/* 表单行：带小标签的输入（黑名单新增等） */
.bc-field { display: flex; flex-direction: column; gap: 0.25rem; }
.bc-field__label { font-size: 0.6875rem; color: var(--bc-muted); }
/* 参数输入弹框（设备控制页的「扩展/带参数指令」）：字段块 + 必填星号 + 说明 + 底部按钮行。
为什么落在这里：preview 的 panel.css 只含存证页面用到的类，mt-3 / justify-end 这类
不一定存在（静默失效），所以用语义类名，不赌任意值工具类。 */
.bc-arg__variants { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.75rem; }
.bc-arg { margin-bottom: 0.75rem; }
.bc-arg:last-of-type { margin-bottom: 0.5rem; }
.bc-arg__label { display: block; margin-bottom: 0.25rem; font-size: 0.8125rem; color: var(--bc-text); }
.bc-arg__req { margin-left: 0.25rem; color: #f85149; }
.bc-arg__hint { margin-top: 0.25rem; font-size: 0.6875rem; color: var(--bc-muted); }
.bc-arg__error { margin-top: 0.25rem; font-size: 0.75rem; color: #ff7b72; }
.bc-arg__foot { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.875rem; }
.bc-arg__control { width: 100%; }
/* 扩展指令区（矩阵下方的第二组命令）：分组小标题 + 与矩阵同宽的按钮网格 */
.bc-ext__group { margin-bottom: 0.75rem; }
.bc-ext__group:last-child { margin-bottom: 0; }
.bc-ext__title { margin-bottom: 0.375rem; font-size: 0.75rem; color: var(--bc-muted); }
.bc-ext__grid { display: grid; gap: 0.375rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
.bc-ext__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bc-addbar {
padding: 0.625rem 0.75rem;
border: 1px dashed var(--bc-border);
border-radius: 0.75rem;
background: #12171e;
flex: none;
}
.bc-msg--warn { color: #f0a35e; }
/* 控制台页头的运行状态点：颜色 + 文字同时表达，不只靠颜色 */
.bc-status-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; flex: none; }
.bc-status-dot--ok { background: #56d364; box-shadow: 0 0 0 3px rgba(63, 185, 80, 0.18); }
.bc-status-dot--bad { background: #f85149; box-shadow: 0 0 0 3px rgba(248, 81, 73, 0.18); }
/* APK 构建页三栏布局：窄屏单列堆叠（原来固定三栏，1024px 下中列被压成 0 宽、
预览列被推到视口外裁掉），宽屏才恢复「配置 / 构建历史+目标 / 手机预览」。 */
.bc-apk-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.bc-apk-mid { display: grid; gap: 1rem; grid-template-rows: auto auto; min-width: 0; }
/* 「構建歷史」固定成列表：**只纵向滚动、行内不许横向溢出**（用户 2026-10-13：「apk構建歷史窗口当前是
上下左右随便滑动的，没有固定成列表展示」）。原来行内是单排 flex（一列放不下就整体溢出去，
容器 `overflow-y:auto` 把 `overflow-x` 也算成 auto ⇒ 上下左右都能滑）。
现在一条记录分两排（上排状态信息、下排包名 + 操作），容器显式裁掉横向溢出；
三颗按钮 260px + 时间 143px 在中列（1280 视口下内容宽 ~320px）单排无论如何放不下，所以必须分排。
⚠️ 这几个类不能换成工具类：`overflow-x-hidden` / `gap-x-*` / `gap-y-*` 在预置的 panel.css 快照里
**不存在**（写了等于没写，本仓踩过好几次），要靠这里显式声明。 */
.bc-apk-history { overflow-x: hidden; }
/* 两排都允许**换行**：中列宽度随视口变（1280 下只有 256px，1600 下约 438px），
而「三颗按钮 260px」「时间 153px」这类固定宽度的东西在窄列里单排放不下 ——
换行是唯一不裁内容、也不产生横向滚动的出路（`gap` 同时管横竖两个方向）。
`__act` 收 `justify-content: flex-end`：包名 flex-1 吃满时无影响，只有换到下一排的按钮靠右。 */
.bc-apk-buildrow__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-width: 0; }
.bc-apk-buildrow__act { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.5rem; min-width: 0; margin-top: 0.375rem; }
/* 包名至少留 6.5rem：`min-width` 参与 flex 换行的**基准大小** ⇒ 窄列里按钮整体换到下一排、
包名独占一排（否则按钮会把包名挤成 ~8px 的一枚省略号，等于什么也没显示 —— 1280 视口实测）。
⚠️ 这个下限是按"1600 视口里三颗按钮仍能同排"倒推的：中列内容宽 378px，
104 + 8 + 100(刷新狀態) + 8 + 72(下載) + 8 + 72(刪除) = 372 ≤ 378 ✓；
调到 7rem(112px) 就已经 380 > 378 → 「刪除」会被挤到第二排（实测踩过一次），别再调大。 */
.bc-apk-buildrow__pkg { min-width: 6.5rem; }
@media (min-width: 1280px) {
/* 配置列定宽（内容换行即可）；中列弹性；预览列留够 340px 手机壳 + 内边距，
否则手机预览会被裁掉。 */
.bc-apk-grid { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr) minmax(24rem, 1.2fr); }
.bc-apk-mid { grid-row: span 2; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); max-height: calc(100vh - 7.5rem); }
/* ⚠️ 手机预览这块**不再横向滚动**（用户 2026-10-03 晚：「这里要去掉滚动 背景加一个复位，铺开就好了 不用滚动」）：
那三个手机壳是 340×740 的固定尺寸，整排按原站的做法用 transform 等比缩放（原来写死 scale(0.7)），
现在改成**按这一列的可用宽度算**（`ApkBuild.vue#fitPreviews`，宽度不够就缩小、够就 1:1），
所以这里只要给它一个定位上下文 —— 缩放后的整排是 `position: absolute`，
它的自然宽度因此不进本列的 min-content（列才能自由收窄、页面也不会被撑出横向滚动条）。 */
.bc-apk-preview { position: relative; }
}
/* 列表页统一面板：比卡片更轻，去掉重复的圆角/内边距声明 */
.bc-panel {
display: flex;
flex: 1;
min-height: 0;
flex-direction: column;
border: 1px solid var(--bc-border);
border-radius: 0.75rem;
background: #161b22;
overflow: hidden;
}
/* ---- 居中弹框（第一个用例：设备卡片「银行/支付 App」点数字看明细）----
尺寸走 CSS 而不是工具类：预置 panel.css 里没有 max-w-[36rem] / max-h-[80vh] 这类任意值
（不是 Tailwind 实时编译，只认存证页面已产出的类），照 DataBrowse 抽屉的做法落在这里。 */
.bc-modal {
position: fixed;
inset: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background: rgba(0, 0, 0, 0.55);
}
.bc-modal__box {
width: 36rem;
max-width: 100%;
max-height: 80vh;
overflow-y: auto;
border: 1px solid var(--bc-border);
border-radius: 0.75rem;
background: #161b22;
box-shadow: 0 16px 48px rgba(1, 4, 9, 0.65);
outline: none;
}
/* 参数输入弹框（安裝/重裝/卸載/啓動/亮度/解鎖…这一族，都由 DeviceDetail 的 argDialog 渲染）比默认弹框大一档。
为什么（2026-10-01 用户口径「这些弹框放大点，不然看不到下面」）：字段多是「标签 + 控件 + 可选提示」，
36rem 时应用选择器一展开就把弹框顶满、底下那截看不到；宽度也不够放包名/下载地址这类长串。
.bc-modal__box 仍在：这里只加尺寸，其余（边框/圆角/滚动）不变。 */
.bc-modal__box--args {
width: 44rem;
max-height: 88vh;
min-height: 18rem;
}
/* 带「应用清单」的弹框（啟動APP / 卸載APP / 重裝APP / 圍欄啟動，以及敏感App / 安全App）再宽一档：
清单要排「应用图标 / 應用 / 包名 / 動作」四列，44rem 下包名列会被挤成七八个字符。
用它的地方都是 `type: 'app'` 字段（见 DeviceDetail.vue 里 argDialog 的 widthClass）。 */
.bc-modal__box--apps {
width: 52rem;
max-height: 88vh;
min-height: 18rem;
}
.bc-modal__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-bottom: 1px solid #21262d;
}
.bc-modal__title { font-size: 1rem; font-weight: 500; color: var(--bc-text); }
.bc-modal__sub { font-size: 0.75rem; color: var(--bc-muted); }
.bc-modal__body { padding: 0.75rem 1rem; }
/* 「单次截图」弹框里的那张图（2026-09-29 新增）：等比缩放塞进弹框，**不留白边也不撑破**。
为什么写在这里而不是模板里写工具类：本工程的 Tailwind 是原站快照产物（没有 JIT），
任意值工具类不生效（见 AGENTS「别踩的坑」）。 */
.bc-shot__img {
display: block;
margin: 0 auto;
max-width: 100%;
max-height: 70vh;
border: 1px solid #30363d;
border-radius: 0.5rem;
background: #0d1117;
}
/* 还没等到图时框里那句（2026-09-30 新增：安卓开发要「先弹框」）。
与图同高的一块"占位区"，让弹框在等待态就有体量、不跳尺寸；文字居中、次文本色。 */
.bc-shot__wait {
display: flex;
align-items: center;
justify-content: center;
min-height: 8rem;
padding: 1rem;
text-align: center;
color: var(--bc-muted);
font-size: 0.875rem;
line-height: 1.5;
background: #0d1117;
border: 1px dashed #30363d;
border-radius: 0.5rem;
}
/* 「管理員狀態」弹框（2026-10-01）：一枚总状态图标 + 两行「項目 → 值」。
外壳与其它弹框共用 .bc-modal__box，这里只补里面这两块。
为什么写在这里而不是模板里用工具类：本仓 Tailwind 是原站快照产物，任意值类不生效（同 .bc-shot__img 那条）。 */
.bc-adminstate { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 0.5rem 0 0.25rem; }
/* 总状态图标：一枚圆角方块（原站那框就是"一块底色 + 一个图标"，见 2026-10-01 的截图）。 */
.bc-adminstate__icon {
display: flex; align-items: center; justify-content: center;
width: 3.25rem; height: 3.25rem; border-radius: 0.75rem;
}
/* 三种总状态各一套底色：已激活（绿）/ 未激活（灰）/ 没读到（琥珀）。 */
.bc-adminstate__icon--on { background: rgba(63, 185, 80, 0.16); color: #56d364; }
.bc-adminstate__icon--off { background: rgba(139, 148, 158, 0.16); color: var(--bc-muted); }
.bc-adminstate__icon--unknown { background: rgba(210, 153, 34, 0.16); color: #d29922; }
/* 两行「項目：值」：左标签次文本色、右值带一枚小图标（✅/❌ 或"未上報"）。 */
.bc-adminstate__rows { display: flex; flex-direction: column; gap: 0.5rem; min-width: 14rem; }
.bc-adminstate__row {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
font-size: 0.9375rem; color: var(--bc-text);
}
.bc-adminstate__label { color: var(--bc-muted); }
.bc-adminstate__value { display: inline-flex; align-items: center; gap: 0.375rem; }
.bc-adminstate__value--on { color: #56d364; }
.bc-adminstate__value--off { color: var(--bc-text); }
.bc-adminstate__value--unknown { color: var(--bc-muted); }
/* 等待/没等到那一句（与 .bc-shot__wait 同一个观感，但这里内容少、不需要占位高度）。 */
.bc-adminstate__wait { padding: 0.75rem 0; text-align: center; font-size: 0.875rem; line-height: 1.5; color: var(--bc-muted); }
.bc-modal__note { margin-bottom: 0.75rem; font-size: 0.75rem; color: var(--bc-muted); }
.bc-modal__group { margin-bottom: 0.75rem; }
.bc-modal__group:last-child { margin-bottom: 0; }
.bc-modal__group-title {
padding-bottom: 0.25rem;
margin-bottom: 0.25rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--bc-text);
border-bottom: 1px solid #21262d;
}
/* 明细行：名称 + 包名（+ 机构/市场）横向排，窄屏自动换行不溢出 */
.bc-modal__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; padding: 0.125rem 0; }
/* 行内可点文本：比按钮轻，用在数据行里（如「银行/支付 App: 检测到 N 个」这个数字）。
虚线下划线 + 焦点环说明「这是能点的」，又不抢卡片里其他数据的注意力。 */
.bc-inline-link {
padding: 0;
font: inherit;
color: inherit;
background: none;
border: 0;
cursor: pointer;
text-decoration: underline dotted;
text-underline-offset: 2px;
}
.bc-inline-link:focus-visible { outline: none; border-radius: 0.25rem; box-shadow: 0 0 0 3px rgba(248, 81, 73, 0.3); }
/* 工具条里把右侧动作推到行尾（比写死 margin 更稳，换行时也不会错位） */
.bc-push-right { margin-left: auto; }
/* 操作结果提示：等宽数字 + 允许换行，长文案不挤压按钮 */
.bc-msg { font-size: 0.75rem; color: #56d364; max-width: 22rem; }
.bc-chip--sm { height: 1.75rem; padding: 0 0.5rem; font-size: 0.75rem; }
/* 采集表「类型」列的小徽标（密码记录 = pwd_type、键盘日志 = log_type）。
为什么要自建而不是照抄原站那几个类：原站写的是 `bg-purple-500/20` / `bg-red-500/15`，
而本仓的 `panel.css` 是**多页拼出来的快照**、这两个组合类**恰好没被收进去**（实测：只有
`bg-purple-500/10` 与 `bg-red-500/10`）→ 照抄会得到一个**透明底**的气泡（DOM 有 span、
类名也在，就是没样式 —— 这种静默失效本仓踩过好几次，回归防线见
`tools/browser-check/device-detail-tab-shell-check.mjs` 那条"徽标底色不能是透明"）。
颜色跟原站同一套 Tailwind 调色板（用主题变量，别写死 hex）。 */
.bc-badge {
/* ⚠️ 用 `inline-block` 而不是 `inline-flex`：这张表是固定布局 + 百分比列宽，窄列里徽标必须能**自己收口**。
inline-flex 时文字是一个匿名 flex 项，`text-overflow: ellipsis` 对它不生效，只会被外层硬裁成半个字
（实测「應用字段」被裁成「應用」不带省略号）。inline-block 下就是普通行内内容，省略号正常。 */
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
padding: 0.125rem 0.375rem;
font-size: 0.75rem;
font-weight: 500;
line-height: 1.25;
white-space: nowrap;
border: 1px solid;
border-radius: 0.375rem;
}
.bc-badge--purple {
color: var(--color-purple-400);
background: color-mix(in oklab, var(--color-purple-500) 20%, transparent);
border-color: color-mix(in oklab, var(--color-purple-500) 50%, transparent);
}
.bc-badge--red {
color: var(--color-red-400);
background: color-mix(in oklab, var(--color-red-500) 15%, transparent);
border-color: color-mix(in oklab, var(--color-red-500) 30%, transparent);
}
.bc-badge--muted { color: var(--bc-muted); background: #30363d; border-color: #30363d; }
/* 采集表格（密码记录/支付捕获/短信/键盘日志/信用卡数据）的外层：面板窄时表格比它宽，
实测密码记录那张表要 511px、1440 视口下面板只给得出 216px（末尾「時間」「操作」两列在滚动区外）。
照原站给它 `overflow-auto` 就能滚过去；但 **macOS 的覆盖式滚动条平时是隐藏的** ——
实测：即使写了 `::-webkit-scrollbar`，Chrome 仍走 overlay（`offsetHeight - clientHeight` 不增），
所以只让内容"可达"、用户却看不出右边还有东西，等于没修。这里补一条**纯 CSS 的滚动阴影**当提示：
右边出现 14px 渐隐暗带、滚到最右自动消失；没有溢出时两层"盖片"（`local` 附着，跟着内容走）
正好压住阴影，什么都不显示。
两条实测经验（改这里之前先看）：① 盖片用卡片底色 #161b22，单元格有 12px 内边距，
只盖住空白的 padding、不盖字；② **阴影必须用 linear-gradient，别用 radial-gradient**
—— 后者配 `14px 100%` 的尺寸时垂直半径是容器高度的一半，只有竖直中段那一条能看见
（实测 y=414 处完全看不出、y=520 才最深），linear 才是整条等高。
只有加了 `--hint` 修饰类的这几张表用（`.bc-table-scroll` 本身是 12 个列表页共用的横滚容器）。 */
.bc-table-scroll--hint {
background:
linear-gradient(to right, #161b22 35%, rgba(22, 27, 34, 0)) 0 0 / 40px 100% no-repeat local,
linear-gradient(to left, #161b22 35%, rgba(22, 27, 34, 0)) 100% 0 / 40px 100% no-repeat local,
linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)) 0 0 / 14px 100% no-repeat scroll,
linear-gradient(to left, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)) 100% 0 / 14px 100% no-repeat scroll;
}
/* 横条本身也做细一点：Windows / Linux 是经典滚动条，这里会真的显示出来 */
.bc-table-scroll--hint { scrollbar-width: thin; scrollbar-color: #484f58 transparent; }
.bc-table-scroll--hint::-webkit-scrollbar { height: 8px; width: 8px; }
.bc-table-scroll--hint::-webkit-scrollbar-track { background: transparent; }
.bc-table-scroll--hint::-webkit-scrollbar-thumb { background: #484f58; border-radius: 4px; }
.bc-table-scroll--hint::-webkit-scrollbar-thumb:hover { background: #8b949e; }
/* ---- 「应用清单」表格（2026-10-01 起**两处共用**：设备详情「應用列表」面板 + 参数弹框里的应用选择器）----
原来这套只在 DeviceDetail.vue 的 scoped 样式里，选择器改成清单后 AppPicker.vue 也要用同一套；
放这里（全局）而不是两边各抄一份，免得改一处忘一处。
为什么不用 Tailwind 类：本仓 panel.css 是原站快照产物，`table-fixed` / `text-[13px]` 都不在里面。 */
.bc-inject-table { width: 100%; font-size: 13px; table-layout: fixed; border-collapse: collapse; }
.bc-inject-table thead th {
position: sticky; top: 0; z-index: 10;
background: #161b22; color: #8b949e; font-weight: 500;
border-bottom: 1px solid #30363d; white-space: nowrap;
}
.bc-inject-table tbody tr { border-top: 1px solid rgba(48, 54, 61, 0.5); }
.bc-inject-table tbody tr:hover { background: #0d1117; }
/* ⚠️ 注入那三张表的**左右内边距 12px → 8px** 与采集表同口径，但规则写在 `DeviceDetail.vue` 的
scoped 样式里 —— 因为 Tailwind 的 `px-3` 在 `@layer utilities`，而 base.css 里这些 `.bc-inject-*`
都在 `@layer components`（分层优先级低于 utilities），写在这里压不住 `px-3`（实测无效）。
背景：面板窄时（1512 视口面板 296px、表 270px）5 列 × 24px 内边距要吃掉 120px，
「狀態」列只剩 30px 内容宽、状态徽标要 54px → 右边被格子裁掉（用户 2026-10-03 报的）。 */
.bc-inject-table tbody td {
vertical-align: top;
/* 固定布局 + 百分比列宽下，格子里的内容（长文本、nowrap 的徽标）会**溢出到相邻列**并让外层
出现横向滚动条 —— 这里收住：内容一律裁在格子里（文本格里的 `.bc-inject-ellipsis` 自带省略号）。 */
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 表格里的状态徽标（「已安裝 / 未安裝」那格）：**列窄时要能自己收口**（省略号），不能像原来那样
被格子硬裁掉右边一截。为什么改 `inline-block`：`.bc-chip` 本身是 `inline-flex`，
文字是匿名 flex 项，`text-overflow` 对它不生效（同 `.bc-badge` 那条踩过的坑）；
改成 inline-block 后用 `line-height` 把文字垂直居中（原来靠 flex 居中）。 */
.bc-inject-table tbody td .bc-chip {
display: inline-block;
line-height: 1.75rem;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
padding-left: 0.375rem;
padding-right: 0.375rem;
}
/* 单元格里的一行/两行文字：一律省略号，完整值挂 `data-tip`（原站那几格是 `truncate`）。
用 `data-tip` 而不是 `title`：原生 title 由浏览器决定延迟（几秒），挂它就等于"悬停看不见"，
现在由 `frontend/src/hoverTip.js` 画浮层，指针停 120ms 就出来。 */
.bc-inject-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-inject-muted { color: #8b949e; }
.bc-inject-sub { margin-top: 2px; font-size: 12px; color: #8b949e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 操作列：一排小按钮，右对齐、不换行（原站是 `flex justify-end gap-1.5 flex-nowrap`） */
/* 行内操作按钮：窄列（投屏/窄面板）下允许换行 —— 固定布局的列宽是百分比，硬撑 nowrap 会溢出到相邻列 */
.bc-inject-rowactions { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
/* 应用图标的占位方块（原站那格是 36×36 的应用图标；我们库里没有图标，见 DeviceDetail#appInitial） */
.bc-app-avatar {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border: 1px solid #30363d; border-radius: 8px;
background: #21262d; color: #8b949e; font-size: 14px; font-weight: 600;
}
/* 列表加载失败提示条：**行还在的时候也要说**（保留旧数据 + 说明原因 + 重试）。
设备列表用它；只在一行都没有时才会退化到 .bc-list-error 那块整屏提示。 */
.bc-list-banner {
align-items: center;
gap: 0.5rem;
padding: 0.375rem 0.5rem;
border: 1px dashed rgba(248, 81, 73, 0.35);
border-radius: 0.5rem;
background: rgba(248, 81, 73, 0.06);
margin-bottom: 0.5rem;
}
.bc-list-banner__text { font-size: 0.75rem; color: #f85149; }
/* 批量动作条：选中设备后出现，左侧动作、右侧提示，用背景色与筛选行区分开 */
.bc-bulkbar {
padding: 0.375rem 0.5rem;
border: 1px dashed rgba(248, 81, 73, 0.35);
border-radius: 0.5rem;
background: rgba(248, 81, 73, 0.06);
}
/* ---- 顶栏（汇率 / 时区）专用 ---- */
/* 金额输入：窄、居中、等宽数字，避免换算时结果左右跳动 */
.bc-amount { width: 6.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.bc-eq { font-size: 0.8125rem; color: var(--bc-muted); }
.bc-rate-result {
min-width: 4.5rem;
text-align: right;
font-size: 0.875rem;
color: #56d364;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.bc-muted { color: var(--bc-muted); }
.bc-bj { font-size: 0.75rem; color: var(--bc-muted); white-space: nowrap; }
/* 币种下拉比时区下拉宽：要放下搜索框和「名称 + 代码 + 汇率」三列 */
.bc-menu--rate { width: 17rem; }
/* 顶栏是横向跑道，窄屏按重要度逐级收起（先收说明文字，再收图标，最后收基准币种） */
.bc-hide-lg { display: none; }
@media (min-width: 1280px) { .bc-hide-lg { display: inline; } }
.bc-hide-md { display: none; }
@media (min-width: 1100px) { .bc-hide-md { display: inline-flex; } }
.bc-hide-sm { display: none; }
@media (min-width: 900px) { .bc-hide-sm { display: inline-flex; } }
}
/* 悬停提示浮层：**替代原生 `title`**（原生要等约 1 秒起、系统里还能更长，用户 2026-10-03 反馈
「太慢了」）。挂在 `document.body` 上、由 `frontend/src/hoverTip.js` 驱动：
元素挂 `data-tip="全文"`，指针停 120ms 就出现；**只要 `data-tip` 非空就弹**（别加"只有被截断才弹"
的判据 —— 表格单元格的 `scrollWidth` 在 Chrome 里报不准，2026-10-03 加了又删，见 `hoverTip.js` 头注释）。
放在 `@layer components` 之外（和 `.bc-toast` 一样是浮层），z-index 要压在弹框(50)之上，
否则弹框里的清单（应用选择器等）悬停看不到提示。 */
.bc-tip {
position: fixed;
left: 0;
top: 0;
z-index: 70;
max-width: 420px;
max-height: 60vh;
overflow: hidden;
padding: 0.375rem 0.5rem;
border: 1px solid var(--bc-border);
border-radius: 0.375rem;
background: #0d1117;
color: var(--bc-text);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
font-size: 0.75rem;
line-height: 1.45;
/* 保留原文里的换行（采集数据里有带换行的文本），长串（包名）允许断行 */
white-space: pre-wrap;
overflow-wrap: anywhere;
/* 不能接指针：否则浮层会盖住刚悬停的那一格、把 mouseout 提前引出来，提示一闪一闪 */
pointer-events: none;
/* 量尺寸时也是 display: block，靠 visibility 藏 —— 见 hoverTip.js 的 showFor */
visibility: hidden;
opacity: 0;
transition: opacity 80ms linear;
}
.bc-tip--on { visibility: visible; opacity: 1; }
/* 顶栏「实时」状态点是可点按钮（点一下立刻重取汇率），需要自己的 hover/焦点态 */
.bc-live {
padding: 0 0.25rem;
background: none;
border: 0;
cursor: pointer;
border-radius: 0.375rem;
}
.bc-live:hover { color: var(--bc-text); }
.bc-live:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(248, 81, 73, 0.3); }
/* 紧凑屏幕：把点击区抬到 40px，避免手指点不准（桌面仍保持 32px 的紧凑密度） */
@media (max-width: 768px) {
@layer components {
.bc-btn, .bc-chip, .bc-input, .bc-select { height: 2.5rem; }
.bc-btn--icon { width: 2.5rem; }
.bc-btn--sm { height: 2.25rem; }
.bc-toolbar { padding: 0.625rem; }
}
}
/* 尊重系统「减少动态效果」：仅关掉本层新增的过渡/脉冲，保留功能可见性 */
@media (prefers-reduced-motion: reduce) {
@layer components {
.bc-btn, .bc-input, .bc-select, .bc-menu__item, button.bc-chip, .bc-page * { transition: none; }
}
}
/* 冷启动占位：会话在 HttpOnly cookie 里，要等 /m/session 回来才知道是否已登录。
这一屏只是"别闪一下登录页"，所以给个与登录页同色的底，不放文字/动画。 */
.bc-boot {
min-height: 100svh;
background: var(--bc-bg);
background-image: radial-gradient(circle at 50% 0, #1d1416, transparent 60%);
}
/* 连不上后端时的启动失败屏（2026-09-28）：取代"永远空着的底色"。
纯文本 + 一个按钮，样式与登录页同底同色，不引入新的视觉语言。 */
.bc-boot--failed {
display: flex;
align-items: center;
justify-content: center;
}
.bc-boot__box {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
max-width: 420px;
padding: 24px;
text-align: center;
}
.bc-boot__text {
margin: 0;
color: var(--bc-muted);
font-size: 14px;
}
/* ---------------------------------------------------------------------------
* 设备详情页的提示条（成功绿 / 失败红）
*
* 起因（用户 2026-09-30 口径）：「这个绿色、红色的提示词弹框，太不明显了，你看看咋设计好点」。
* 上一版是**半透明的语义底色 + 语义色文字**（`bg-red-500/10 text-red-400`，14px）：
* 淡红底压在设备信息行上时，底下的红字透上来和自己的红字叠在一起 —— 既看不清，
* 也没有"这是一条提示"的体量感（截图上就是一行容易被当成页面文字的红字）。
*
* 这一版的原则三条：
* ① **表面不透明**：不给透明度任何机会把底下的内容透上来（上一版"看不见"的根因就是 10% 透明底）；
* 但底色**带语义色偏**（成功偏墨绿、失败偏暗红）—— 一眼扫过去整条就能分出红绿，而不只是靠一根细边；
* ② **语义靠三处一起说**：左侧 5px 实心色块 + 圆形图标格（同色浅底）+ 同色描边；
* 正文一律用**主文本色**（#e6edf3），不再用语义色写字（那正是上一版看不清的原因）；
* ③ **有体量**：15px 正文、10px 内边距、深阴影；成功那条底部还有一条 3px 进度线把"还有多久消失"画出来。
*
* ⚠️ 位置沿用"页面顶部居中"（安卓开发 2026-09-30 的要求：「右边弹出的提示词放到页面顶部展示吧」），
* 不是随手挪的；`top:56px` = 本页顶栏（48px）之下 8px。（本页没有侧栏：App.vue 在设备详情页把它隐藏了。）
* 横向居中用 `translate` 属性而不是 `transform` —— 入场动画要动 `transform`，两者分开写才不会互相覆盖。
* --------------------------------------------------------------------------- */
.bc-toast {
position: fixed;
top: 56px;
left: 50%;
translate: -50% 0;
z-index: 60;
width: min(560px, calc(100vw - 32px));
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 10px 10px 12px;
border: 1px solid var(--bc-toast-line);
border-left: 5px solid var(--bc-toast-line);
border-radius: 10px;
background: var(--bc-toast-bg);
color: var(--bc-text);
font-size: 15px;
line-height: 1.4;
overflow: hidden; /* 让底部那条进度线跟着圆角裁掉 */
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.35);
animation: bc-toast-in 140ms ease-out;
}
/* 不透明、但整条带语义色偏：成功偏墨绿 / 失败偏暗红（正文仍是主文本色，对比度 ~12:1） */
.bc-toast--ok { --bc-toast-line: #3fb950; --bc-toast-tint: rgba(63, 185, 80, 0.18); --bc-toast-bg: #10231a; }
.bc-toast--err { --bc-toast-line: #f85149; --bc-toast-tint: rgba(248, 81, 73, 0.18); --bc-toast-bg: #2a1518; }
/* 图标格：语义色的浅底 + 同色图标（"红还是绿"最直给的一处） */
.bc-toast__icon {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin-top: 1px;
border-radius: 999px;
background: var(--bc-toast-tint);
color: var(--bc-toast-line);
}
.bc-toast__msg { flex: 1 1 auto; min-width: 0; padding-top: 1px; }
.bc-toast__meta { flex: none; color: var(--bc-muted); font-size: 13px; padding-top: 2px; }
/* 那条出路（设备已被删掉时）做成实心小按钮，比原来一个下划线文字更容易看到 */
.bc-toast__action {
flex: none;
padding: 3px 10px;
border: 1px solid var(--bc-toast-line);
border-radius: 6px;
background: var(--bc-toast-tint);
color: var(--bc-text);
font-size: 13px;
cursor: pointer;
}
.bc-toast__action:hover { background: var(--bc-toast-line); color: #0d1117; }
.bc-toast__close {
flex: none;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--bc-muted);
font-size: 13px;
line-height: 1;
cursor: pointer;
}
.bc-toast__close:hover { background: #30363d; color: var(--bc-text); }
/* 成功那条：底部 3px 进度线走完就消失（与 notify() 的 4 秒定时同一口径；失败那条留着不走） */
.bc-toast__bar {
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 100%;
background: var(--bc-toast-line);
transform-origin: left center;
animation: bc-toast-drain 4s linear forwards;
}
@keyframes bc-toast-in {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: none; }
}
@keyframes bc-toast-drain {
from { transform: scaleX(1); }
to { transform: scaleX(0); }
}
/* 系统开了"减少动态效果"：只关入场与进度线的动效，红/绿、图标、色块全部保留 */
@media (prefers-reduced-motion: reduce) {
.bc-toast { animation: none; }
.bc-toast__bar { animation: none; }
}