/* ============================================================
HA-SaaS · Neon Glass Theme
设计语言：深空黑 · 玻璃磨砂 · 霓虹渐变 · 科技网格
字体策略：本地托管 woff2（位于 public/fonts/），不再访问 Google Fonts。
字体源于 Google Fonts CC0/SIL OFL（Inter / JetBrains Mono / Orbitron）。
============================================================ */
/* —— 本地 @font-face：Inter / JetBrains Mono / Orbitron ——
仅保留 latin 子集（U+0000-00FF + 部分标点）。
latin-ext (U+0100-02BA, 主要是欧洲特殊字符 ñ/ü/ß) 在中文 + ASCII 场景永远不会被命中，
去掉以节省静态资源体积、减少不必要的请求与缓存条目。 */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
src: url("/fonts/inter-400-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
src: url("/fonts/inter-500-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
src: url("/fonts/inter-600-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
src: url("/fonts/inter-700-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap;
src: url("/fonts/inter-800-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
src: url("/fonts/jetbrains-mono-400-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap;
src: url("/fonts/jetbrains-mono-500-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap;
src: url("/fonts/jetbrains-mono-600-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: "Orbitron"; font-style: normal; font-weight: 500; font-display: swap;
src: url("/fonts/orbitron-500-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: "Orbitron"; font-style: normal; font-weight: 600; font-display: swap;
src: url("/fonts/orbitron-600-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: "Orbitron"; font-style: normal; font-weight: 700; font-display: swap;
src: url("/fonts/orbitron-700-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: "Orbitron"; font-style: normal; font-weight: 800; font-display: swap;
src: url("/fonts/orbitron-800-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
/* —— 基础面板（沿用旧变量名以兼容内联样式） —— */
--paper-1: #06060a; /* 主背景：近黑（去蓝调） */
--paper-2: rgba(255, 255, 255, 0.04); /* 主玻璃面 */
--paper-3: rgba(255, 255, 255, 0.06); /* 高亮玻璃面 */
--paper-4: rgba(255, 255, 255, 0.025); /* 弱化玻璃面 */
--paper-edge: rgba(255, 255, 255, 0.10);
--vellum: rgba(10, 10, 14, 0.55); /* 侧栏玻璃 */
/* 实体玻璃底色（不透明版本，用于某些需要遮挡的元素） */
--glass-1: #0a0a0d;
--glass-2: #101013;
--glass-3: #1a1a1f;
/* —— 文本层级（中性灰，无蓝调） —— */
--ink: #f5f5f7; /* 主文 */
--ink-soft: #d4d4d8; /* 副文 */
--ink-faded: #a1a1aa; /* 注释 */
--ink-dim: #71717a;
/* 兼容别名：历史代码大量使用 --text / --text-muted，指向同一组 ink-* */
--text: var(--ink);
--text-muted: var(--ink-faded);
--text-dim: var(--ink-dim);
/* —— 描边 —— */
--line: rgba(255, 255, 255, 0.10);
--line-soft: rgba(255, 255, 255, 0.05);
--line-bold: rgba(255, 255, 255, 0.22);
/* —— 语义色（命名沿用旧 seal-*） ——
主体色不再为青/蓝，统一改为银白系 */
--seal-red: #e5e7eb; /* 主品牌 / 高亮（银白） */
--seal-red-d: #cbd5e1;
--seal-blue: #cbd5e1;
--seal-blue-d:#94a3b8;
--seal-green: #10b981;
--seal-green-d:#059669;
--seal-amber: #f59e0b;
/* 旧变量名 neon-* 现在指向银白系，functional 颜色（pink/lime/rose）保持 */
--neon-cyan: #e5e7eb; /* 原 #22d3ee */
--neon-blue: #cbd5e1; /* 原 #3b82f6 */
--neon-purple: #94a3b8; /* 原 #a855f7 */
--neon-pink: #ec4899;
--neon-rose: #f43f5e;
--neon-lime: #84cc16;
/* —— 渐变 ——
主体色：黑 / 银（替代旧的青→蓝→紫渐变） */
--grad-primary: linear-gradient(135deg, #2a2a30 0%, #1a1a1d 50%, #050505 100%);
--grad-primary-h: linear-gradient(135deg, #3a3a40 0%, #25252a 50%, #15151a 100%);
--grad-accent: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
--grad-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
--grad-warn: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
--grad-danger: linear-gradient(135deg, #f43f5e 0%, #ec4899 100%);
--grad-cool: linear-gradient(135deg, #71717a 0%, #1c1c20 100%);
--grad-text: linear-gradient(135deg, #ffffff 0%, #a1a1aa 100%);
/* 阴影 / 光晕（保留旧变量名兼容；颜色已统一为银白光） */
--glow-cyan: 0 0 24px rgba(255, 255, 255, 0.25);
--glow-blue: 0 0 24px rgba(255, 255, 255, 0.18);
--glow-purple: 0 0 24px rgba(255, 255, 255, 0.14);
--shadow-md: 0 8px 32px rgba(0, 0, 0, 0.45);
--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
/* —— 字体 —— */
--font-ui: "Inter", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei",
"Hiragino Sans GB", -apple-system, BlinkMacSystemFont,
"Segoe UI", system-ui, sans-serif;
--font-display: "Orbitron", "Inter", "PingFang SC", system-ui, sans-serif;
--font-typewriter:"JetBrains Mono", "SF Mono", Consolas, monospace;
--font-mono: "JetBrains Mono", "SF Mono", Consolas, "Courier New", monospace;
--font-serif: var(--font-ui);
/* —— 尺寸 —— */
--side-w: 248px;
--side-w-collapsed: 72px;
--top-h: 64px;
--radius: 10px;
--radius-r: 14px;
--radius-sm: 6px;
}
/* ============================================================
浅色主题：变量级覆盖 —— 通过 html[data-theme="light"] 启用
关键策略：仅重定义颜色变量；具体组件样式不动，沿用变量自动适配。
对极少数硬编码 rgba(255,255,255,*) 的地方做兜底覆盖。
============================================================ */
html[data-theme="light"] {
--paper-1: #f7f7f9;
--paper-2: rgba(0, 0, 0, 0.04);
--paper-3: rgba(0, 0, 0, 0.06);
--paper-4: rgba(0, 0, 0, 0.025);
--paper-edge: rgba(0, 0, 0, 0.10);
--vellum: rgba(255, 255, 255, 0.78);
--glass-1: #ffffff;
--glass-2: #f4f4f7;
--glass-3: #e9e9ee;
--ink: #18181b;
--ink-soft: #3f3f46;
--ink-faded: #52525b;
--ink-dim: #71717a;
--line: rgba(0, 0, 0, 0.10);
--line-soft: rgba(0, 0, 0, 0.05);
--line-bold: rgba(0, 0, 0, 0.22);
--seal-red: #18181b;
--seal-red-d: #3f3f46;
--seal-blue: #3f3f46;
--seal-blue-d:#52525b;
--neon-cyan: #18181b;
--neon-blue: #3f3f46;
--neon-purple: #52525b;
--grad-primary: linear-gradient(135deg, #f4f4f5 0%, #e4e4e7 50%, #d4d4d8 100%);
--grad-primary-h: linear-gradient(135deg, #ffffff 0%, #f4f4f5 50%, #e4e4e7 100%);
--grad-cool: linear-gradient(135deg, #d4d4d8 0%, #71717a 100%);
--grad-text: linear-gradient(135deg, #18181b 0%, #71717a 100%);
--glow-cyan: 0 0 24px rgba(0, 0, 0, 0.08);
--glow-blue: 0 0 24px rgba(0, 0, 0, 0.06);
--glow-purple: 0 0 24px rgba(0, 0, 0, 0.05);
--shadow-md: 0 8px 32px rgba(0, 0, 0, 0.10);
--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.14);
}
/* body 背景图直接覆盖（不走变量） */
html[data-theme="light"] body {
color: var(--ink);
background:
radial-gradient(1200px 700px at 8% -10%, rgba(0,0,0,0.04), transparent 60%),
radial-gradient(900px 700px at 100% 10%, rgba(0,0,0,0.03), transparent 55%),
radial-gradient(900px 700px at 50% 110%, rgba(0,0,0,0.03), transparent 60%),
linear-gradient(180deg, #f7f7f9 0%, #ffffff 50%, #f3f3f5 100%);
background-attachment: fixed;
}
html[data-theme="light"] body::before {
background-image:
linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px) !important;
}
/* —— 兜底：把项目里硬编码 rgba(255,255,255,*) 的高频背景/边框翻转成
浅色对应——避免浅色背景下出现"白底白雾"。仅覆盖最常见的几个范围。 */
html[data-theme="light"] .card,
html[data-theme="light"] .pcs-filter,
html[data-theme="light"] .pcs-tab,
html[data-theme="light"] .pcs-search-wrap,
html[data-theme="light"] .pc-card,
html[data-theme="light"] .room-pro,
html[data-theme="light"] .ac-pad,
html[data-theme="light"] .pc-tile,
html[data-theme="light"] .rp-pc-stat,
html[data-theme="light"] .topbar,
html[data-theme="light"] .sidebar,
html[data-theme="light"] .modal-box,
html[data-theme="light"] .role-chip,
html[data-theme="light"] .console-banner,
html[data-theme="light"] .pcs-banner,
html[data-theme="light"] .balance-chip {
background-color: rgba(255,255,255,0.65);
border-color: rgba(0,0,0,0.08);
color: var(--ink);
}
html[data-theme="light"] .pcs-tab.on {
background: linear-gradient(135deg, rgba(0,0,0,0.06), rgba(0,0,0,0.10));
color: #18181b; border-color: rgba(0,0,0,0.22);
}
html[data-theme="light"] .pcs-tab-cnt,
html[data-theme="light"] .pcs-tab-dot.off,
html[data-theme="light"] .rp-pc-stat.off {
background: rgba(0,0,0,0.08); color: #18181b;
}
html[data-theme="light"] .nav .item:hover,
html[data-theme="light"] .nav .item.active {
background: rgba(0,0,0,0.06);
}
html[data-theme="light"] .data-table tbody tr:nth-child(odd),
html[data-theme="light"] .data-table tbody tr:hover {
background: rgba(0,0,0,0.03);
}
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
/* 注意：必须用 background-color 而不是 background shorthand。
shorthand 会把 background-image / background-repeat / background-position
全部重置 — select 的下拉箭头 SVG 就会被默认 repeat 平铺成一排 "v v v v"。 */
background-color: #ffffff;
border-color: rgba(0,0,0,0.12);
color: var(--ink);
}
html[data-theme="light"] .muted,
html[data-theme="light"] .dim,
html[data-theme="light"] .small.muted {
color: var(--ink-faded);
}
html[data-theme="light"] .rp-head { border-bottom-color: rgba(0,0,0,0.10); }
html[data-theme="light"] .rp-badge.off {
background: rgba(0,0,0,0.05); color: var(--ink-faded); border-color: rgba(0,0,0,0.10);
}
* { box-sizing: border-box; }
html, body {
margin: 0; padding: 0;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 450;
line-height: 1.6;
letter-spacing: 0.1px;
color: var(--ink);
background: var(--paper-1);
/* 深空背景：基底黑 + 淡灰光晕（去蓝调） */
background-image:
radial-gradient(1200px 700px at 8% -10%, rgba(255, 255, 255, 0.05), transparent 60%),
radial-gradient(900px 700px at 100% 10%, rgba(255, 255, 255, 0.04), transparent 55%),
radial-gradient(900px 700px at 50% 110%, rgba(255, 255, 255, 0.03), transparent 60%),
linear-gradient(180deg, #050507 0%, #0a0a0e 50%, #050507 100%);
background-attachment: fixed;
height: 100%;
min-height: 0;
overflow: hidden;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* 页面本身不滚动：滚动职责全部下放到 main#view（内容区）和 .sidebar .nav
（导航列表）内部。这样：
- 不再需要强制渲染页面级滚动条 → 右缘不会出现一条空的黑色滚动槽
（内嵌 iframe / 门店视图这类单屏页尤其明显）；
- 侧栏品牌块 / 用户名 / 底部按钮恒定钉住，窗口矮时只有导航列表滚动；
- 内容高度变化不会引起页面级滚动条出现/消失导致的背景左右跳。 */
html {
height: 100%;
overflow: hidden;
}
/* 全局网格层（在所有内容下方，body::before 覆盖整页） */
body::before {
content: "";
position: fixed; inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 30%, transparent 90%);
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 30%, transparent 90%);
z-index: 0;
}
/* body::after（星点装饰）已按用户要求移除，登录页仅保留 body::before 的网格 */
#cyber-bg { z-index: 0; }
#shell, .topbar, .sidebar, main#view { position: relative; z-index: 1; }
#login { z-index: 50; }
::selection { background: rgba(255, 255, 255, 0.32); color: #fff; }
/* 显示字体仅用于品牌 / 大标题 */
.page-head .title,
.card-head h2, .card h2, .panel h2,
.brand-text,
.brand-icon,
.login-card h1,
.topbar .crumb b,
.modal-head > span,
.empty-title,
.stat .num {
font-family: var(--font-display);
letter-spacing: 0.6px;
}
.stat .num { letter-spacing: 0; }
/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
border-radius: 10px;
border: 2px solid transparent;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, var(--neon-cyan), var(--neon-purple));
background-clip: padding-box;
border: 2px solid transparent;
}
/* Firefox（不识别 ::-webkit-scrollbar）：scrollbar-width / scrollbar-color 都是
可继承属性，挂在 html 上即可让全站所有滚动容器（含 AI 对话消息区 #_ai_msgs、
代客查看 .view-as-tabs、代码块 .md-code）拿到统一细滚动条样式，避免回退成系统默认粗滚动条。 */
html {
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.20) transparent;
}
/* ---------- Utility ---------- */
.hidden { display: none !important; }
.muted { color: var(--ink-faded); }
.dim { color: var(--ink-dim); }
.small { font-size: 12.5px; }
.tiny { font-size: 11px; letter-spacing: 0.4px; }
.mono, .kbd, .copy-input input { font-family: var(--font-mono); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.num, table td, .stat .num, .balance-chip { font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.right { text-align: right; }
.spacer { flex: 1; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.col { display: flex; flex-direction: column; gap: 8px; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 720px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
a { color: var(--neon-cyan); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--neon-blue); text-shadow: 0 0 12px rgba(255, 255, 255, 0.5); }
hr {
border: 0; height: 1px;
background: linear-gradient(to right, transparent, var(--line-bold), transparent);
margin: 16px 0;
}
/* ---------- Buttons ---------- */
button, .btn {
cursor: pointer;
font-family: var(--font-ui);
font-weight: 600;
font-size: 13px;
padding: 8px 18px;
background: rgba(255, 255, 255, 0.05);
color: var(--ink);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: var(--radius);
letter-spacing: 0.3px;
transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
position: relative;
display: inline-flex; align-items: center; gap: 7px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 4px 12px rgba(0,0,0,0.25);
}
button:hover, .btn:hover {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.45);
color: var(--neon-cyan);
transform: translateY(-1px);
box-shadow:
0 1px 0 rgba(255,255,255,0.08) inset,
0 6px 20px rgba(255, 255, 255, 0.18),
0 0 0 1px rgba(255, 255, 255, 0.25);
}
button:active, .btn:active { transform: translateY(0); }
button:disabled, .btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
/* 主按钮：黑色渐变填充 + 银白描边 */
button.primary, .btn.primary {
background: var(--grad-primary);
border: 1px solid rgba(255, 255, 255, 0.18);
color: #fff;
font-weight: 700;
box-shadow:
0 4px 18px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(255, 255, 255, 0.10) inset;
}
button.primary:hover, .btn.primary:hover {
background: var(--grad-primary-h);
color: #fff;
border-color: rgba(255, 255, 255, 0.32);
box-shadow:
0 6px 26px rgba(0, 0, 0, 0.65),
0 0 0 1px rgba(255, 255, 255, 0.20) inset;
}
button.ghost {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.10);
color: var(--ink-soft);
padding: 6px 14px;
box-shadow: none;
backdrop-filter: blur(8px);
}
button.ghost:hover {
color: #fff;
border-color: rgba(255, 255, 255, 0.45);
background: rgba(255, 255, 255, 0.07);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.20);
}
button.danger {
background: var(--grad-danger);
color: #fff;
border-color: transparent;
box-shadow: 0 4px 18px rgba(244, 63, 94, 0.4);
}
button.danger:hover { filter: brightness(1.1); color: #fff; box-shadow: 0 6px 24px rgba(244, 63, 94, 0.55); }
button.success {
background: var(--grad-success);
color: #fff;
border-color: transparent;
box-shadow: 0 4px 18px rgba(16, 185, 129, 0.4);
}
button.success:hover { filter: brightness(1.1); color: #fff; box-shadow: 0 6px 24px rgba(16, 185, 129, 0.55); }
button.warn {
background: var(--grad-warn);
color: #fff;
border-color: transparent;
box-shadow: 0 4px 18px rgba(245, 158, 11, 0.4);
}
button.warn:hover { filter: brightness(1.1); color: #fff; }
button.small { padding: 4px 12px; font-size: 12px; }
button.icon-only {
padding: 4px 8px; box-shadow: none; border: 0; background: transparent;
color: var(--ink-faded);
}
button.icon-only:hover { background: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.20); }
button.link {
background: none; color: var(--ink); padding: 2px 4px; box-shadow: none; border: 0;
text-decoration: underline; font-weight: 500;
}
button.link:hover { color: #fff; background: none; transform: none; box-shadow: none; }
/* ---------- Inputs ---------- */
input, select, textarea {
font-family: var(--font-ui);
font-size: 13.5px;
width: 100%;
padding: 9px 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: var(--radius);
color: var(--ink);
transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
line-height: 1.4;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.45);
background: rgba(255, 255, 255, 0.06);
box-shadow:
0 0 0 3px rgba(255, 255, 255, 0.10),
0 0 16px rgba(255, 255, 255, 0.10);
}
input::placeholder, textarea::placeholder { color: var(--ink-dim); }
input[readonly], input:disabled { color: var(--ink-faded); background: rgba(255, 255, 255, 0.02); }
input[readonly] { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0; }
/* ---------- 浏览器自动填充：覆盖 Chrome/Edge/Safari 默认的白/黄/蓝色背景 ---------- */
/* WebKit / Blink */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
-webkit-text-fill-color: var(--ink);
-webkit-box-shadow: 0 0 0 1000px #101013 inset;
box-shadow: 0 0 0 1000px #101013 inset;
caret-color: var(--ink);
border-color: rgba(255, 255, 255, 0.10);
/* 延迟背景色过渡，避免短暂闪现浏览器默认色 */
transition: background-color 9999s ease-in-out 0s,
-webkit-text-fill-color 0s;
}
/* 自动填充状态下保留 focus 的银白光环 */
input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus {
-webkit-box-shadow:
0 0 0 1000px #101013 inset,
0 0 0 3px rgba(255, 255, 255, 0.15),
0 0 16px rgba(255, 255, 255, 0.15);
box-shadow:
0 0 0 1000px #14172b inset,
0 0 0 3px rgba(255, 255, 255, 0.15),
0 0 16px rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.55);
}
/* 标准 / Firefox */
input:autofill,
textarea:autofill,
select:autofill {
background-color: #101013 !important;
color: var(--ink) !important;
}
select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2322d3ee' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 32px;
}
select option { background: var(--glass-2); color: var(--ink); }
.field { margin-bottom: 14px; }
.field label {
display: block; margin-bottom: 6px;
font-size: 12px;
letter-spacing: 0.5px;
color: var(--ink-soft);
font-weight: 600;
text-transform: uppercase;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
.field .help { font-size: 12px; color: var(--ink-faded); margin-top: 4px; }
.input-group { display: flex; align-items: stretch; }
.input-group input { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
.input-group button { border-top-left-radius: 0; border-bottom-left-radius: 0; }
/* ---------- Tags（霓虹徽章） ---------- */
.tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 10px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.4px;
border: 1px solid currentColor;
background: rgba(255, 255, 255, 0.05);
color: var(--ink-soft);
white-space: nowrap;
position: relative;
}
.tag::before {
content: "";
width: 5px; height: 5px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 6px currentColor;
}
.tag-active, .tag-online { color: var(--neon-lime); background: rgba(132, 204, 22, 0.08); }
.tag-pending { color: var(--seal-amber); background: rgba(245, 158, 11, 0.08); }
.tag-expired, .tag-offline { color: var(--neon-rose); background: rgba(244, 63, 94, 0.08); }
.tag-disabled { color: var(--ink-dim); background: rgba(255, 255, 255, 0.03); }
.tag-disabled::before { box-shadow: none; }
.tag-info { color: #67e8f9; background: rgba(103, 232, 249, 0.10); } /* 保留：功能性信息标签（青）*/
.tag-purple { color: #c084fc; background: rgba(192, 132, 252, 0.10); } /* 保留：功能性紫标签 */
.tag-plain { color: var(--ink-faded); }
.tag-plain::before { display: none; }
/* ---------- Layout ---------- */
.shell {
height: 100%;
overflow: hidden;
display: grid;
grid-template-columns: var(--side-w) 1fr;
/* 新增 banner 行：「门店过期/未激活/被禁用」全局横幅。
新增 viewas 行：admin / agent 代客查看时的身份提示 + 网咖运营子导航。
两行都默认无内容时 auto 行高 ≈ 0，不会占位影响 main 高度。 */
grid-template-rows: var(--top-h) auto auto 1fr;
grid-template-areas:
"side top"
"side banner"
"side viewas"
"side main";
transition: grid-template-columns .25s cubic-bezier(.4,0,.2,1);
}
/* 代客查看 host：与 main 等宽，左右 padding 与 main 对齐
空内容时（admin/agent 不在代客查看模式 / store 自己用）整行 0 高，不可见。 */
#view_as_host {
grid-area: viewas;
padding: 14px 36px 0 36px;
}
#view_as_host:empty { padding: 0; }
/* ============ 全局横幅：门店账号异常状态 ============
覆盖 main 上方整条横向区域，跟随侧栏宽度自适应，
背景红/琥珀渐变 + 边线高亮，确保所有 store 子页面都能看到。 */
.store-banner {
grid-area: banner;
display: flex; align-items: center; gap: 10px;
padding: 12px 24px;
margin: 0;
font-size: 13.5px; line-height: 1.5;
color: #fff5f5;
background: linear-gradient(90deg, rgba(244,63,94,0.22), rgba(244,63,94,0.08) 70%);
border-bottom: 1px solid rgba(244,63,94,0.45);
box-shadow: 0 2px 12px -6px rgba(244,63,94,0.4);
z-index: 5;
}
.store-banner.warn-amber {
color: #fff7e6;
background: linear-gradient(90deg, rgba(245,158,11,0.22), rgba(245,158,11,0.08) 70%);
border-bottom-color: rgba(245,158,11,0.45);
box-shadow: 0 2px 12px -6px rgba(245,158,11,0.4);
}
.store-banner .sb-ico {
flex: none; width: 20px; height: 20px;
display: grid; place-items: center;
border-radius: 50%;
background: rgba(255,255,255,0.18);
font-weight: 800; font-size: 12px;
}
.store-banner .sb-msg { flex: 1 1 auto; min-width: 0; }
.store-banner .sb-msg b { color: #fff; margin-right: 4px; }
.store-banner .sb-act {
flex: none;
padding: 4px 12px;
font-size: 12.5px; font-weight: 600;
color: #fff;
background: rgba(255,255,255,0.16);
border: 1px solid rgba(255,255,255,0.32);
border-radius: 6px;
cursor: pointer;
text-decoration: none;
transition: background 0.15s ease;
}
.store-banner .sb-act:hover { background: rgba(255,255,255,0.28); }
html[data-theme="light"] .store-banner {
color: #7f1d1d;
background: linear-gradient(90deg, rgba(244,63,94,0.16), rgba(244,63,94,0.04) 70%);
}
html[data-theme="light"] .store-banner.warn-amber {
color: #78350f;
background: linear-gradient(90deg, rgba(245,158,11,0.18), rgba(245,158,11,0.04) 70%);
}
html[data-theme="light"] .store-banner .sb-msg b { color: #111; }
html[data-theme="light"] .store-banner .sb-act {
color: #1f1f1f;
background: rgba(0,0,0,0.06);
border-color: rgba(0,0,0,0.18);
}
html[data-theme="light"] .store-banner .sb-act:hover { background: rgba(0,0,0,0.12); }
.shell.collapsed { grid-template-columns: var(--side-w-collapsed) 1fr; }
/* ============ 侧栏折叠动画期间 ============
在 250ms grid-template-columns 过渡过程中，JS 会给 加上
.is-sidebar-toggling 标记。这段时间内只关掉昂贵的 backdrop-filter
（最大化时大面积模糊每帧重采样是闪烁的元凶）。
过渡结束后 (~320ms) backdrop-filter 自动恢复。
注意：
- 不再去碰 .card / .stat / .kpi 的 animation 属性，否则在解除该类时
`animation: float-in .3s` 会被浏览器视作新动画从头重放一次，看起来
就像"整页又刷新了一下"。
- 不再用通用 * 选择器统改 transition-property，避免在解除该类时
`transition: all` 元素（如 chip-btn）把 backdrop-filter 从 none
回到 blur 这一变化插值播放一遍，造成回弹瞬闪。
- 改为对玻璃元素显式禁用所有 transition，让 backdrop-filter 在解除
时瞬时回到原状，无插值、无补帧。 */
.is-sidebar-toggling .sidebar,
.is-sidebar-toggling .topbar,
.is-sidebar-toggling .card,
.is-sidebar-toggling .panel,
.is-sidebar-toggling .chip-btn,
.is-sidebar-toggling .topbar .balance-chip,
.is-sidebar-toggling .role-chip {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
transition: none !important;
}
.shell.collapsed .sidebar .brand-block {
padding: 0;
justify-content: center;
gap: 0;
}
.shell.collapsed .sidebar .brand-icon { display: none; }
.shell.collapsed .sidebar .brand-text { display: none; }
.shell.collapsed .sidebar-toggle {
position: static;
margin: 0;
width: 32px; height: 32px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.14);
}
.shell.collapsed .sidebar-toggle:hover {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.45);
}
.shell.collapsed .sidebar .footer-actions {
padding: 14px 8px 10px;
}
.shell.collapsed .sidebar .role-chip {
margin: 10px 10px 6px;
padding: 5px;
justify-content: center;
background: transparent;
border: 0;
box-shadow: none;
}
.shell.collapsed .sidebar .role-chip::before,
.shell.collapsed .sidebar .role-chip::after { display: none; }
.shell.collapsed .sidebar .role-chip .info { display: none; }
.shell.collapsed .sidebar .role-chip .avatar { width: 38px; height: 38px; font-size: 15px; }
.shell.collapsed .sidebar .nav { padding: 10px 6px; gap: 2px; }
.shell.collapsed .sidebar .nav-section { display: none !important; }
.shell.collapsed .sidebar .nav-group + .nav-group {
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid var(--line-soft);
}
.shell.collapsed .sidebar .nav-group .nav-list { max-height: 800px !important; opacity: 1 !important; pointer-events: auto !important; }
.shell.collapsed .sidebar .nav-item {
justify-content: center;
padding: 10px 0;
gap: 0;
border-left: none;
margin: 1px 0;
position: relative;
}
.shell.collapsed .sidebar .nav-item:hover {
background: rgba(255, 255, 255, 0.07);
color: #fff;
}
.shell.collapsed .sidebar .nav-item .icn { width: 18px; height: 18px; opacity: 1; }
.shell.collapsed .sidebar .nav-item span:not(.icn),
.shell.collapsed .sidebar .nav-item .badge { display: none; }
.shell.collapsed .sidebar .nav-item.active {
background: linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.04) 100%);
color: #fff;
box-shadow: inset 2px 0 0 0 rgba(255, 255, 255, 0.8);
}
.shell.collapsed .sidebar .nav-item.active::after { display: none; }
.shell.collapsed .sidebar .footer-actions button {
padding: 8px 0; justify-content: center; flex: 1;
font-size: 0;
}
.shell.collapsed .sidebar .footer-actions button svg { width: 16px; height: 16px; }
.shell.collapsed .sidebar .footer-actions button span { display: none; }
/* —— Sidebar：玻璃面板 —— */
.sidebar {
grid-area: side;
/* 双层背景：上层为浅银渐变，下层为半透明深色玻璃，保证可读 */
background:
linear-gradient(180deg,
rgba(255, 255, 255, 0.05) 0%,
transparent 35%,
transparent 65%,
rgba(255, 255, 255, 0.04) 100%),
linear-gradient(180deg, rgba(10, 10, 14, 0.42) 0%, rgba(6, 6, 10, 0.60) 100%);
border-right: 1px solid transparent;
border-image: linear-gradient(180deg,
rgba(255, 255, 255, 0.20) 0%,
rgba(255, 255, 255, 0.06) 35%,
rgba(255, 255, 255, 0.06) 65%,
rgba(255, 255, 255, 0.20) 100%) 1;
height: 100%;
min-height: 0;
/* 只让中间的 .nav 列表滚动：品牌块 / 用户名 / 底部按钮恒定钉住，
窗口矮时标题不会被卷出视野 */
overflow: hidden;
z-index: 10;
display: flex; flex-direction: column;
box-shadow:
inset -1px 0 0 0 rgba(255, 255, 255, 0.04),
4px 0 32px rgba(0, 0, 0, 0.35);
transform: translateZ(0);
backface-visibility: hidden;
contain: layout style paint;
}
.sidebar::before {
/* 顶部高光条 */
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
pointer-events: none;
}
/* 导航列表的滚动条：窗口矮（内嵌 iframe / 小屏）时导航放不下会滚动，
全局 10px 滚动条压在侧栏右缘像一条黑槽——收成 4px 细条，
平时全透明，悬停侧栏才显出淡淡的滑块。 */
.sidebar .nav { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.sidebar:hover .nav { scrollbar-color: rgba(255, 255, 255, 0.22) transparent; }
.sidebar .nav::-webkit-scrollbar { width: 4px; }
.sidebar .nav::-webkit-scrollbar-thumb {
background: transparent;
border: 0;
border-radius: 4px;
}
.sidebar:hover .nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); }
html[data-theme="light"] .sidebar:hover .nav { scrollbar-color: rgba(0, 0, 0, 0.25) transparent; }
html[data-theme="light"] .sidebar .nav::-webkit-scrollbar-thumb { background: transparent; }
html[data-theme="light"] .sidebar:hover .nav::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.25); }
.sidebar svg.icn { transform: translateZ(0); }
.sidebar .brand-block {
padding: 0 18px 0 22px;
display: flex; align-items: center; gap: 12px;
border-bottom: 1px solid var(--line);
height: var(--top-h);
position: relative;
}
.sidebar-toggle {
margin-left: auto;
width: 28px; height: 28px;
padding: 0;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--line);
border-radius: 50%;
color: var(--ink-soft);
display: grid; place-items: center;
cursor: pointer;
box-shadow: none;
transition: all .15s ease;
flex-shrink: 0;
}
.sidebar-toggle:hover {
border-color: rgba(255, 255, 255, 0.5);
color: var(--neon-cyan);
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 0 16px rgba(255, 255, 255, 0.25);
transform: none;
}
.sidebar-toggle .ico-expand { display: none; }
.shell.collapsed .sidebar-toggle .ico-collapse { display: none; }
.shell.collapsed .sidebar-toggle .ico-expand { display: block; }
.sidebar .brand-icon {
width: 38px; height: 38px;
border-radius: 11px;
color: #fff;
display: grid; place-items: center;
font-family: var(--font-display);
font-weight: 800; font-size: 18px;
background:
linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 55%),
linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(161, 161, 170, 0.85) 50%, rgba(255, 255, 255, 0.85) 100%);
border: 1px solid rgba(255, 255, 255, 0.22);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.42),
inset 0 -1px 0 rgba(0, 0, 0, 0.20),
0 6px 18px rgba(0, 0, 0, 0.45),
0 0 22px rgba(255, 255, 255, 0.20);
backdrop-filter: blur(8px) saturate(160%);
-webkit-backdrop-filter: blur(8px) saturate(160%);
flex-shrink: 0;
transform: none;
position: relative;
overflow: hidden;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.sidebar .brand-icon::after {
/* 顶部弧形高光 */
content: "";
position: absolute;
left: 4px; right: 4px; top: 3px;
height: 38%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.40), transparent);
border-radius: 8px 8px 50% 50% / 8px 8px 30px 30px;
pointer-events: none;
}
.sidebar .brand-text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
line-height: 1.05;
position: relative;
padding-left: 14px;
}
.sidebar .brand-text::before {
/* 左侧渐变发光竖条 */
content: "";
position: absolute;
left: 0; top: 4px; bottom: 4px;
width: 3px;
border-radius: 2px;
background: linear-gradient(180deg, #f5f5f7 0%, #a1a1aa 50%, #3f3f46 100%);
box-shadow:
0 0 10px rgba(0, 0, 0, 0.55),
0 0 18px rgba(255, 255, 255, 0.30);
}
.sidebar .brand-text .bt-main {
font-family: var(--font-display);
font-weight: 800;
font-size: 18px;
letter-spacing: 1px;
background:
linear-gradient(135deg,
#ffffff 0%,
#e5e7eb 35%,
#cbd5e1 70%,
#94a3b8 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.45))
drop-shadow(0 0 14px rgba(255, 255, 255, 0.18));
white-space: nowrap;
}
.sidebar .brand-text .bt-sub {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-weight: 600;
font-size: 9px;
letter-spacing: 3px;
text-transform: uppercase;
color: rgba(148, 163, 184, 0.75);
white-space: nowrap;
}
.sidebar .role-chip {
margin: 14px 14px 8px;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--line);
border-radius: var(--radius);
display: flex; align-items: center; gap: 12px;
position: relative;
backdrop-filter: blur(10px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.sidebar .role-chip::before { display: none; }
.sidebar .role-chip .avatar {
width: 38px; height: 38px;
border-radius: 10px;
display: grid; place-items: center;
font-family: var(--font-display);
font-weight: 700; font-size: 15px;
color: rgba(255, 255, 255, 0.92);
flex-shrink: 0;
position: relative;
/* 扁平极简：无毛玻璃、无内阴影、无外发光、无高光层 */
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: none;
text-shadow: none;
}
.sidebar .role-chip .avatar::after { content: none; }
/* 三种角色：扁平 + 半透明渐变（保留炫彩） */
.role-admin .avatar {
background: linear-gradient(135deg,
rgba(244, 63, 94, 0.50) 0%,
rgba(236, 72, 153, 0.50) 55%,
rgba(255, 255, 255, 0.50) 100%);
border: 1px solid rgba(236, 72, 153, 0.50);
}
.role-agent .avatar {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.50) 0%,
rgba(255, 255, 255, 0.50) 55%,
rgba(161, 161, 170, 0.50) 100%);
border: 1px solid rgba(255, 255, 255, 0.50);
}
.role-store .avatar {
background: linear-gradient(135deg,
rgba(16, 185, 129, 0.50) 0%,
rgba(20, 184, 166, 0.50) 55%,
rgba(255, 255, 255, 0.50) 100%);
border: 1px solid rgba(16, 185, 129, 0.50);
}
.sidebar .role-chip .info { flex: 1; min-width: 0; }
.sidebar .role-chip .info .nm { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.sidebar .role-chip .info .sub { font-size: 11.5px; color: var(--ink-faded); }
.sidebar .nav { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 1px; }
.sidebar .nav-group { display: flex; flex-direction: column; }
.sidebar .nav-group .nav-list {
display: flex; flex-direction: column; gap: 2px;
overflow: hidden;
max-height: 800px;
transition: max-height .22s ease, opacity .15s ease;
}
.sidebar .nav-group.collapsed .nav-list {
max-height: 0;
opacity: 0;
pointer-events: none;
}
.sidebar .nav-section {
display: flex; align-items: center; gap: 8px;
padding: 14px 8px 6px;
font-size: 10.5px;
color: var(--ink-faded);
letter-spacing: 1.4px;
font-weight: 700;
border-bottom: 0;
margin-bottom: 4px;
position: relative;
background: transparent;
border: 0;
width: 100%;
text-align: left;
cursor: pointer;
box-shadow: none;
border-radius: 0;
transition: color .12s ease;
text-transform: uppercase;
}
.sidebar .nav-section:hover { color: #fff; transform: none; box-shadow: none; }
.sidebar .nav-section:active { transform: none; }
.sidebar .nav-section::before {
content: "";
width: 4px; height: 4px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.7);
box-shadow: 0 0 8px rgba(255, 255, 255, 0.45);
flex-shrink: 0;
}
.sidebar .nav-section .ns-text { flex: 1; }
.sidebar .nav-section .ns-chevron {
display: inline-flex; align-items: center; justify-content: center;
color: var(--ink-faded);
transition: transform .2s ease;
}
.sidebar .nav-group.collapsed .nav-section .ns-chevron { transform: rotate(-90deg); }
.sidebar .nav-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 12px;
color: var(--ink-soft);
cursor: pointer;
font-size: 13.5px;
font-weight: 500;
border-radius: var(--radius);
margin: 0 2px;
transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
user-select: none;
position: relative;
border-left: 0;
text-decoration: none;
}
.sidebar .nav-item .icn { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.75; transition: opacity .15s ease; }
.sidebar .nav-item:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--ink);
}
.sidebar .nav-item:hover .icn { opacity: 1; }
.sidebar .nav-item.active {
background: linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 60%, transparent 100%);
color: #fff;
font-weight: 600;
box-shadow:
inset 2px 0 0 0 rgba(255, 255, 255, 0.8),
0 4px 18px rgba(0, 0, 0, 0.35);
}
.sidebar .nav-item.active .icn { opacity: 1; color: #fff; }
.sidebar .nav-item.active::after {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.55);
margin-left: auto;
}
.sidebar .nav-item .badge {
margin-left: auto;
background: var(--grad-danger);
color: #fff;
font-size: 10px;
padding: 1px 7px;
height: 16px;
display: grid; place-items: center;
font-family: var(--font-mono);
font-weight: 700;
border-radius: 999px;
box-shadow: 0 0 10px rgba(244, 63, 94, 0.55);
}
.sidebar .footer-actions {
padding: 14px 16px 16px;
border-top: 1px solid var(--line);
display: flex; gap: 8px;
background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.25) 100%);
}
.sidebar .footer-actions::before { display: none; }
.sidebar .footer-actions button {
flex: 1; font-size: 12px; padding: 7px 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--line);
color: var(--ink-soft);
font-weight: 500;
letter-spacing: 0.3px;
}
.sidebar .footer-actions button:hover {
background: rgba(244, 63, 94, 0.10);
color: var(--neon-rose);
border-color: rgba(244, 63, 94, 0.45);
box-shadow: 0 0 0 1px rgba(244, 63, 94, 0.2);
}
/* —— 主题切换按钮：紫色 hover（与退出登录的红色区分），太阳/月亮图标互斥显示 —— */
.sidebar .footer-actions button.theme-toggle:hover {
background: rgba(168, 85, 247, 0.10);
color: #c4b5fd;
border-color: rgba(168, 85, 247, 0.45);
box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.18);
}
/* 默认深色：只显月亮；切到浅色（is-light）：只显太阳 */
.theme-toggle .ico-theme-light { display: none; }
.theme-toggle .ico-theme-dark { display: inline-block; }
.theme-toggle.is-light .ico-theme-light { display: inline-block; }
.theme-toggle.is-light .ico-theme-dark { display: none; }
.theme-toggle svg { transition: transform 0.4s ease; }
.theme-toggle:hover svg { transform: rotate(-18deg) scale(1.08); }
/* 浅色主题下：按钮配色（避免黑底白字残留） */
html[data-theme="light"] .sidebar .footer-actions button {
background: rgba(0,0,0,0.04);
border: 1px solid rgba(0,0,0,0.12);
color: var(--ink-soft);
}
html[data-theme="light"] .sidebar .footer-actions button:hover {
background: rgba(244, 63, 94, 0.10);
color: #be123c;
border-color: rgba(244, 63, 94, 0.35);
}
html[data-theme="light"] .sidebar .footer-actions button.theme-toggle:hover {
background: rgba(168, 85, 247, 0.10);
color: #6d28d9;
border-color: rgba(168, 85, 247, 0.35);
}
/* —— Topbar：玻璃顶栏 —— */
.topbar {
grid-area: top;
/* 极淡背景：横向青→紫赛博色调叠在半透明深色玻璃上 */
background:
linear-gradient(90deg,
rgba(255, 255, 255, 0.05) 0%,
transparent 30%,
transparent 70%,
rgba(255, 255, 255, 0.05) 100%),
rgba(6, 6, 10, 0.28);
border-bottom: 1px solid transparent;
height: var(--top-h);
display: flex; align-items: center;
padding: 0 28px;
gap: 16px;
position: sticky; top: 0; z-index: 5;
}
.topbar::after {
content: "";
position: absolute; bottom: -1px; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55), transparent);
pointer-events: none;
}
.topbar .crumb {
font-size: 13.5px;
color: var(--ink-faded);
display: flex; align-items: center; gap: 10px;
}
.topbar .crumb b {
color: var(--ink);
font-weight: 700;
font-size: 17px;
letter-spacing: 0.6px;
}
.topbar .crumb svg { color: var(--ink-dim); }
/* 面包屑链接：与 .muted 同色，hover 时升亮一档 + 加下划线提示可点 */
.topbar .crumb a.crumb-link {
color: inherit;
text-decoration: none;
cursor: pointer;
border-radius: 4px;
padding: 2px 4px;
margin: 0 -4px;
transition: color .15s ease, background .15s ease;
}
.topbar .crumb a.crumb-link:hover {
color: var(--ink);
background: rgba(255, 255, 255, 0.06);
}
html[data-theme="light"] .topbar .crumb a.crumb-link:hover {
background: rgba(0, 0, 0, 0.05);
}
.topbar .top-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.topbar .balance-chip {
padding: 6px 14px;
background: rgba(245, 158, 11, 0.08);
border: 1px solid rgba(245, 158, 11, 0.35);
color: var(--seal-amber);
font-family: var(--font-mono);
font-weight: 600;
font-size: 13px;
line-height: 1;
display: inline-flex; align-items: center; gap: 6px;
position: relative;
font-variant-numeric: tabular-nums lining-nums;
border-radius: 999px;
backdrop-filter: blur(10px);
box-shadow: 0 0 16px rgba(245, 158, 11, 0.15);
}
.topbar .balance-chip svg { flex-shrink: 0; }
.topbar .balance-chip #tb_balance_val { letter-spacing: 0.3px; }
.topbar .balance-chip::before { display: none; }
/* 全局门店筛选器（topbar 右侧、balance-chip 左边） */
.topbar .store-filter {
display: inline-flex; align-items: center;
gap: 6px;
padding: 4px 8px 4px 10px;
background: var(--paper-2, rgba(255, 255, 255, 0.04));
border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
border-radius: 999px;
color: var(--text);
height: 32px;
transition: border-color .15s, background .15s;
}
.topbar .store-filter.hidden { display: none; }
.topbar .store-filter:hover { border-color: var(--line-bold, rgba(255, 255, 255, 0.28)); background: var(--paper-2, rgba(255, 255, 255, 0.08)); }
.topbar .store-filter-ico {
display: inline-flex; align-items: center; justify-content: center;
color: var(--text-muted, #a1a1aa);
flex-shrink: 0;
}
.topbar .store-filter-sel {
background: transparent;
border: 0;
color: var(--text);
font-size: 13px;
font-weight: 500;
padding: 0 4px;
cursor: pointer;
outline: none;
min-width: 100px;
max-width: 180px;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%237dd3fc' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 4px center;
padding-right: 18px;
}
.topbar .store-filter-sel option { background: #1a1f2b; color: var(--text); }
/* editRoomModal 顶部的只读"所属门店"标签 */
.field-readonly {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 8px;
color: var(--text);
font-size: 13.5px;
}
.field-readonly .ha-tag {
display: inline-flex; align-items: center; gap: 5px;
color: #7dd3fc; font-weight: 600;
}
/* —— Main ——
页面唯一的滚动容器（html/body/shell 均 overflow:hidden）。
scrollbar-gutter 预留槽位：切页时滚动条出现/消失不会让内容宽度跳动；
空槽透出的是 main 自身透明底（即页面背景），不会像页面级强制滚动条
那样在最右缘糊一条黑槽。 */
main#view {
grid-area: main;
padding: 28px 36px 64px;
overflow-y: auto;
overflow-x: hidden;
scrollbar-gutter: stable;
min-width: 0;
min-height: 0;
/* 提升到独立合成层，让侧栏折叠动画期间 main 内部的重绘
不再连累 sidebar / topbar / body 背景的 backdrop-filter 反复采样。 */
transform: translateZ(0);
isolation: isolate;
}
main#view > * { max-width: 100%; }
.view-inner {
max-width: 1600px;
margin: 0 auto;
}
.page-head {
display: flex; align-items: flex-end; justify-content: space-between;
margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
padding-bottom: 18px;
position: relative;
}
.page-head::after {
content: ""; position: absolute; bottom: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, var(--line-bold), transparent);
}
.page-head::before { display: none; }
.page-head .title {
font-size: 26px; font-weight: 700;
letter-spacing: 1px; color: var(--ink);
line-height: 1.2;
background: var(--grad-text);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.page-head .subtitle {
font-size: 13px;
color: var(--ink-faded);
margin-top: 8px;
letter-spacing: 0.2px;
}
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* —— Cards / panels：玻璃面板 —— */
.card, .panel {
background: rgba(255, 255, 255, 0.035);
border: 1px solid var(--line);
border-radius: var(--radius-r);
padding: 22px 24px;
margin-bottom: 16px;
position: relative;
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.04) inset,
0 8px 32px rgba(0, 0, 0, 0.30);
overflow: hidden;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
pointer-events: none;
}
.card::after { display: none; }
.panel::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
pointer-events: none;
}
.card.tight { padding: 14px 18px; }
.card:hover {
border-color: rgba(255, 255, 255, 0.14);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.06) inset,
0 12px 40px rgba(0, 0, 0, 0.40);
}
.card h2, .panel h2 {
margin: 0 0 16px;
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
letter-spacing: 0.8px;
color: var(--ink);
display: flex; align-items: center; gap: 10px;
padding-bottom: 12px;
border-bottom: 1px solid var(--line);
position: relative;
text-transform: uppercase;
}
.card h2::after {
content: ""; position: absolute; bottom: -1px; left: 0; width: 56px;
height: 1px;
background: linear-gradient(to right, rgba(255, 255, 255, 0.55), transparent);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.25);
}
.card h2 svg, .panel h2 svg { color: var(--ink-soft); }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.card-head h2 { margin: 0; border: 0; padding: 0; }
.card-head h2::after { display: none; }
/* —— Stat Cards —— */
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px;
margin-bottom: 18px;
}
.stat {
background: rgba(255, 255, 255, 0.035);
border: 1px solid var(--line);
padding: 18px 20px;
position: relative;
border-radius: var(--radius-r);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
overflow: hidden;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.04) inset,
0 8px 28px rgba(0, 0, 0, 0.30);
}
.stat::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--stat-color, var(--neon-cyan)), transparent);
pointer-events: none;
}
.stat::after {
content: "";
position: absolute;
right: -30px; top: -30px;
width: 120px; height: 120px;
background: radial-gradient(circle, var(--stat-color, var(--neon-cyan)) 0%, transparent 60%);
opacity: 0.18;
pointer-events: none;
filter: blur(8px);
border-radius: 50%;
transform: none;
}
.stat:hover {
transform: translateY(-2px);
border-color: rgba(255, 255, 255, 0.16);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.06) inset,
0 12px 40px rgba(0, 0, 0, 0.40),
0 0 0 1px var(--stat-color, var(--neon-cyan)) inset;
}
.stat .lbl {
font-size: 11.5px; color: var(--ink-faded);
display: flex; align-items: center; gap: 6px;
letter-spacing: 1.2px;
font-weight: 600;
text-transform: uppercase;
position: relative;
z-index: 1;
}
.stat .lbl svg { color: var(--stat-color, var(--neon-cyan)); filter: drop-shadow(0 0 4px var(--stat-color, var(--neon-cyan))); }
.stat .num {
font-family: var(--font-display);
font-size: 30px;
font-weight: 700;
margin-top: 6px;
letter-spacing: 0;
color: var(--ink);
line-height: 1.1;
font-variant-numeric: tabular-nums lining-nums;
position: relative;
z-index: 1;
}
.stat .delta { font-size: 12px; color: var(--ink-faded); margin-top: 6px; position: relative; z-index: 1; }
.stat .delta.up { color: var(--neon-lime); }
.stat .delta.dn { color: var(--neon-rose); }
.stat.cyan { --stat-color: var(--neon-cyan); }
.stat.green { --stat-color: var(--neon-lime); }
.stat.purple { --stat-color: var(--neon-purple); }
.stat.pink { --stat-color: var(--neon-pink); }
.stat.amber { --stat-color: var(--seal-amber); }
.stat.rose { --stat-color: var(--neon-rose); }
/* —— Tables —— */
table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: transparent;
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
}
th, td {
padding: 12px 14px;
text-align: left;
font-size: 13.5px;
border-bottom: 1px solid var(--line-soft);
vertical-align: middle;
white-space: nowrap;
}
td.wrap, td .wrap { white-space: normal; }
th {
background: rgba(255, 255, 255, 0.04);
font-weight: 600;
color: var(--ink-soft);
font-size: 11.5px;
letter-spacing: 1px;
border-bottom: 1px solid var(--line-bold);
text-transform: uppercase;
}
td b { color: var(--ink); font-weight: 600; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .15s ease; }
tbody tr:nth-child(odd) { background: transparent; }
tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.018); }
tbody tr:hover { background: rgba(255, 255, 255, 0.06); }
td .row { gap: 6px; }
td a { font-weight: 500; }
.tbl-empty { padding: 50px; text-align: center; color: var(--ink-faded); }
.card { overflow-x: auto; }
.tbl-wrap { width: 100%; overflow-x: auto; margin-top: 8px; border-radius: var(--radius); }
.tbl-wrap > table { width: 100%; }
.expire-cell { white-space: nowrap; }
.tbl-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.tbl-toolbar input { max-width: 280px; }
.tbl-toolbar select { width: auto; min-width: 130px; }
/* ===========================================================
Login Page · Split Glass
左：品牌叙事 · 右：表单
=========================================================== */
.login {
position: fixed; inset: 0;
display: grid; place-items: center;
/* 透明：让全局 .cyber-bg（极光 + 涂鸦 + 扫描线）显示在登录页背后 */
background: transparent;
z-index: 50;
overflow: hidden;
padding: 24px;
}
/* 极细网格 */
.login::before {
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 92%);
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 92%);
pointer-events: none;
}
/* ===========================================================
Global Cyber-Graffiti Backdrop · 全站赛博涂鸦背景
极光 + 涂鸦 SVG + VHS 扫描线，位于所有页面之下
=========================================================== */
.cyber-bg {
position: fixed; inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
/* 独立 GPU 合成层：避免主内容切换/重排时整层重绘，消除导航点击时的肉眼抖动 */
transform: translateZ(0);
will-change: transform;
contain: layout style paint;
backface-visibility: hidden;
}
.cyber-bg .aurora {
position: absolute;
border-radius: 50%;
filter: blur(90px);
opacity: 0.48;
mix-blend-mode: screen;
}
.cyber-bg .aurora-a {
width: 560px; height: 560px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0%, transparent 65%);
top: -170px; left: -170px;
animation: aurora-a 22s ease-in-out infinite;
}
.cyber-bg .aurora-b {
width: 640px; height: 640px;
background: radial-gradient(circle, rgba(180, 180, 190, 0.7) 0%, transparent 65%);
bottom: -220px; right: -200px;
opacity: 0.36;
animation: aurora-b 26s ease-in-out infinite;
}
.cyber-bg .aurora-c {
width: 480px; height: 480px;
background: radial-gradient(circle, rgba(220, 220, 230, 0.6) 0%, transparent 65%);
top: 30%; right: -120px;
opacity: 0.28;
animation: aurora-c 30s ease-in-out infinite;
}
@keyframes aurora-a {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(40px, 30px); }
}
@keyframes aurora-b {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(-50px, -40px); }
}
@keyframes aurora-c {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(30px, -50px); }
}
/* —— 赛博涂鸦 SVG 图层（全局，淡化以保证内容可读） —— */
.cyber-bg .graffiti-layer {
position: absolute; inset: 0;
width: 100%; height: 100%;
pointer-events: none;
opacity: 0.55;
mix-blend-mode: screen;
/* 把涂鸦 SVG 中的彩色变成银灰色（保留形状/动效，去蓝紫调） */
filter: grayscale(1) brightness(0.85) drop-shadow(0 0 14px rgba(255, 255, 255, 0.18));
transition: opacity .35s ease;
}
.cyber-bg .aurora,
.cyber-bg .scanlines {
transition: opacity .35s ease;
}
/* 登录页时增强涂鸦的视觉强度（仅当 #login 未隐藏时） */
body:has(#login:not(.hidden)) .cyber-bg .graffiti-layer { opacity: 0.88; }
body:has(#login:not(.hidden)) .cyber-bg .aurora { opacity: 0.55; }
body:has(#login:not(.hidden)) .cyber-bg .aurora-b { opacity: 0.42; }
body:has(#login:not(.hidden)) .cyber-bg .aurora-c { opacity: 0.32; }
body:has(#login:not(.hidden)) .cyber-bg .scanlines { opacity: 0.55; }
.cyber-bg .graffiti-layer .g-pulse {
transform-box: fill-box;
transform-origin: center;
animation: graf-pulse 6s ease-in-out infinite;
}
.cyber-bg .graffiti-layer .g-pulse-delay {
transform-box: fill-box;
transform-origin: center;
animation: graf-pulse 7.5s ease-in-out -2s infinite;
}
.cyber-bg .graffiti-layer .g-drift {
animation: graf-drift 14s ease-in-out infinite;
}
.cyber-bg .graffiti-layer .g-drift-slow {
animation: graf-drift 22s ease-in-out infinite;
}
@keyframes graf-pulse {
0%, 100% { opacity: 1; filter: none; }
50% { opacity: 0.55; filter: drop-shadow(0 0 18px currentColor); }
}
@keyframes graf-drift {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(14px, -10px); }
}
/* —— VHS 扫描线覆盖（全局，淡化） —— */
.cyber-bg .scanlines {
position: absolute; inset: 0;
pointer-events: none;
background-image: repeating-linear-gradient(
180deg,
rgba(255, 255, 255, 0.025) 0px,
rgba(255, 255, 255, 0.025) 1px,
transparent 1px,
transparent 4px
);
mix-blend-mode: overlay;
opacity: 0.30;
}
/* —— 双栏面板 —— */
.login-panel {
position: relative; z-index: 1;
width: 880px; max-width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
background: rgba(10, 10, 14, 0.62);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 18px;
backdrop-filter: blur(28px) saturate(140%);
-webkit-backdrop-filter: blur(28px) saturate(140%);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.04) inset,
0 32px 80px rgba(0, 0, 0, 0.55);
overflow: hidden;
}
.login-panel::before {
/* 极细顶光线 */
content: "";
position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
pointer-events: none;
}
/* —— 左栏：SVG 智能管家星球 + 品牌标题 —— */
.login-info {
padding: 20px 20px 4px;
display: flex; flex-direction: column;
justify-content: center;
align-items: center;
background:
radial-gradient(460px 300px at 30% 32%, rgba(255, 255, 255, 0.18), transparent 70%),
radial-gradient(420px 260px at 100% 100%, rgba(236, 72, 153, 0.18), transparent 70%),
radial-gradient(300px 220px at 50% 50%, rgba(255, 255, 255, 0.12), transparent 75%);
border-right: 1px solid rgba(255, 255, 255, 0.05);
position: relative;
overflow: hidden;
min-height: 480px;
}
/* 左侧栏：极细赛博网格背景 */
.login-info::before {
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(236, 72, 153, 0.05) 1px, transparent 1px);
background-size: 28px 28px;
mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 95%);
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 95%);
pointer-events: none;
z-index: 0;
}
.mascots {
width: 100%;
max-width: 340px;
height: auto;
max-height: 360px;
display: block;
position: relative;
z-index: 1;
filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45));
animation: mascots-idle 7s ease-in-out infinite;
}
.mascot {
transform-origin: 50% 95%;
will-change: transform;
}
.mascot .body {
filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
}
@keyframes mascots-idle {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
/* —— 品牌标题（SVG 下方） —— */
.brand-title {
position: relative;
z-index: 2;
text-align: center;
padding: 8px 16px 22px;
}
.brand-title h2 {
margin: 0;
font-family: var(--font-ui);
font-size: 22px;
font-weight: 800;
letter-spacing: 3px;
line-height: 1.2;
background: linear-gradient(135deg, #ffffff 0%, #d4d4d8 50%, #71717a 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 0.30));
}
.brand-title p {
margin: 8px 0 0;
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 6px;
color: var(--ink-faded);
display: inline-flex;
align-items: center;
gap: 10px;
}
.brand-title p::before,
.brand-title p::after {
content: "";
width: 18px;
height: 1px;
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.35), transparent);
}
/* —— 右栏：表单 —— */
.login-form {
padding: 36px 42px 36px;
display: flex; flex-direction: column;
justify-content: center;
}
.lf-head { margin-bottom: 22px; }
.lf-brand {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
font-family: var(--font-ui);
font-size: 11.5px;
font-weight: 700;
letter-spacing: 3.5px;
text-transform: uppercase;
color: transparent;
background: linear-gradient(135deg, #ffffff 0%, #a1a1aa 60%, #3f3f46 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 14px;
position: relative;
}
.lf-brand::before,
.lf-brand::after {
content: "";
flex: 1;
height: 2px;
border-radius: 999px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.30);
}
.lf-brand::before {
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.8));
}
.lf-brand::after {
background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4) 70%, transparent);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.30);
}
.lf-head h1 {
margin: 0;
font-family: var(--font-ui);
font-size: 24px;
font-weight: 700;
letter-spacing: -0.3px;
color: #fff;
line-height: 1.2;
}
.lf-head p {
margin: 8px 0 0;
font-size: 12.5px;
color: var(--ink-faded);
letter-spacing: 0.2px;
}
/* —— 输入字段 —— */
.login-field {
position: relative;
margin-bottom: 12px;
display: flex; align-items: stretch;
}
.login-field .lf-icon {
position: absolute;
left: 14px; top: 50%;
transform: translateY(-50%);
color: var(--ink-dim);
pointer-events: none;
display: flex;
transition: color .15s ease;
z-index: 1;
}
.login-field input {
flex: 1;
padding: 11px 14px 11px 40px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
color: var(--ink);
font-size: 13.5px;
transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.login-field input:focus {
border-color: rgba(255, 255, 255, 0.50);
background: rgba(255, 255, 255, 0.04);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}
.login-field:focus-within .lf-icon { color: var(--neon-cyan); }
/* 密码显隐按钮 */
.lf-toggle {
position: absolute;
right: 6px; top: 50%;
transform: translateY(-50%);
width: 30px; height: 30px;
padding: 0;
background: transparent;
border: 0;
color: var(--ink-dim);
border-radius: 6px;
display: grid; place-items: center;
cursor: pointer;
box-shadow: none;
transition: color .15s ease, background .15s ease;
}
.lf-toggle:hover {
color: var(--neon-cyan);
background: rgba(255, 255, 255, 0.06);
transform: translateY(-50%);
box-shadow: none;
}
.lf-toggle .ico-eye-off { display: none; }
.lf-toggle.on .ico-eye { display: none; }
.lf-toggle.on .ico-eye-off { display: block; }
/* —— 验证码字段 —— */
.captcha-field { margin-bottom: 8px; }
.captcha-field input {
padding-right: 142px;
font-family: var(--font-mono);
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 600;
}
.captcha-box {
position: absolute;
right: 4px; top: 50%;
transform: translateY(-50%);
width: 124px; height: 36px;
padding: 0;
background: transparent;
border: 0;
border-radius: 8px;
cursor: pointer;
box-shadow: none;
overflow: hidden;
transition: filter .15s ease, opacity .15s ease;
display: grid; place-items: center;
}
.captcha-box:hover {
background: transparent;
transform: translateY(-50%);
filter: brightness(1.15) saturate(1.15);
}
.captcha-box.loading { pointer-events: none; }
.captcha-box svg { width: 100%; height: 100%; display: block; }
.captcha-box .captcha-loading {
font-size: 10.5px;
color: var(--ink-faded);
letter-spacing: 1px;
font-family: var(--font-mono);
}
/* —— 登录按钮：黑色玻璃质感 + 银白高光 —— */
.login-submit {
margin-top: 18px;
width: 100%;
padding: 12px;
font-size: 14px;
font-weight: 700;
letter-spacing: 6px;
color: #ffffff;
background:
linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 55%),
linear-gradient(135deg, #2a2a30 0%, #1a1a1d 50%, #050505 100%);
background-size: 200% 200%, 220% 220%;
background-position: 0% 0%, 0% 50%;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 12px;
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.28),
inset 0 -1px 0 rgba(0, 0, 0, 0.32),
0 10px 28px rgba(0, 0, 0, 0.55),
0 0 36px rgba(255, 255, 255, 0.10);
justify-content: center;
position: relative;
transition: transform .15s ease, box-shadow .18s ease, filter .15s ease, opacity .15s ease, background-position .9s ease;
overflow: hidden;
}
/* 扫光高光（hover 时滑过） */
.login-submit::before {
content: "";
position: absolute;
top: 0; left: -40%;
width: 40%; height: 100%;
background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.30) 50%, transparent 100%);
transform: skewX(-18deg);
pointer-events: none;
transition: left .7s cubic-bezier(.4,0,.2,1);
}
.login-submit:hover {
transform: translateY(-1px);
filter: brightness(1.18);
background-position: 100% 100%, 100% 50%;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.40),
inset 0 -1px 0 rgba(0, 0, 0, 0.32),
0 14px 36px rgba(0, 0, 0, 0.65),
0 0 50px rgba(255, 255, 255, 0.18);
}
.login-submit:hover::before { left: 130%; }
.login-submit:active { transform: translateY(0); filter: brightness(1.02); }
.login-submit:disabled { opacity: 0.6; cursor: progress; transform: none; filter: none; }
.login-submit .ls-text,
.login-submit .ls-spinner { position: relative; z-index: 1; }
.login-submit .ls-spinner {
display: none;
width: 15px; height: 15px;
border: 2px solid rgba(255, 255, 255, 0.30);
border-top-color: #ffffff;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
.login-submit.loading .ls-text { display: none; }
.login-submit.loading .ls-spinner { display: inline-block; }
/* —— 错误提示 + Hint —— */
.login-form .err {
color: var(--neon-rose);
min-height: 16px;
font-size: 12.5px;
margin-top: 10px;
text-align: center;
letter-spacing: 0.2px;
}
/* —— 登录页脚：版本号 + ICP 备案号（上下两行排列） —— */
.login-footer {
margin-top: 18px;
padding-top: 14px;
border-top: 1px dashed rgba(255, 255, 255, 0.10);
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: 0.4px;
color: var(--ink-faded);
text-align: center;
}
.login-footer .lf-version { white-space: nowrap; }
.login-footer .lf-sep { display: none; } /* 上下排列时不再需要分隔符 */
.login-footer .lf-beian {
color: var(--ink-faded);
text-decoration: none;
transition: color .15s ease, text-shadow .15s ease;
white-space: nowrap;
}
.login-footer .lf-beian:hover {
color: #ffffff;
text-shadow: 0 0 12px rgba(255, 255, 255, 0.45);
}
.login-footer .lf-beian:focus-visible {
outline: 1px dashed rgba(255, 255, 255, 0.45);
outline-offset: 3px;
border-radius: 3px;
}
.login-form .err:not(:empty) {
padding: 7px 12px;
background: rgba(244, 63, 94, 0.06);
border: 1px solid rgba(244, 63, 94, 0.20);
border-radius: 8px;
animation: err-shake .42s cubic-bezier(.36, .07, .19, .97);
}
@keyframes err-shake {
10%, 90% { transform: translateX(-1px); }
20%, 80% { transform: translateX(2px); }
30%, 50%, 70% { transform: translateX(-4px); }
40%, 60% { transform: translateX(4px); }
}
/* —— 窄屏：隐藏左侧角色组，只显示表单 —— */
@media (max-width: 760px) {
.login-panel {
grid-template-columns: 1fr;
width: 420px;
}
.login-info { display: none; }
.login-form { padding: 40px 36px 34px; }
}
@media (max-width: 460px) {
.login { padding: 12px; }
.login-form { padding: 28px 22px 22px; }
}
/* —— Modal：浮空玻璃 —— */
.modal { position: fixed; inset: 0; z-index: 99; display: grid; place-items: center; padding: 20px; }
.modal-bg {
position: absolute; inset: 0;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(8px) saturate(120%);
-webkit-backdrop-filter: blur(8px) saturate(120%);
}
.modal-box {
position: relative;
width: 580px; max-width: 100%; max-height: 88vh;
display: flex; flex-direction: column;
background: rgba(10, 10, 14, 0.78);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 18px;
backdrop-filter: blur(28px) saturate(160%);
-webkit-backdrop-filter: blur(28px) saturate(160%);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.04) inset,
0 30px 80px rgba(0, 0, 0, 0.60),
0 0 60px rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.modal-box::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6), transparent);
pointer-events: none;
}
.modal-box.wide { width: 760px; }
.modal-box.x-wide { width: 960px; }
/* 门店视图子窗口：取消暗淡全屏遮挡（不挡取色/看地图），点击穿透到背后画布，仅弹窗本体可交互 */
.modal.modal-dimless { pointer-events: none; }
.modal.modal-dimless .modal-bg { display: none; }
.modal.modal-dimless .modal-box { pointer-events: auto; }
.modal-head {
padding: 18px 24px 14px;
border-bottom: 1px solid var(--line);
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
position: relative;
color: var(--ink);
}
.modal-head::after { display: none; }
.modal-head button { font-size: 22px; line-height: 1; padding: 4px 10px; border-radius: 8px; }
.modal-body { padding: 22px 24px; overflow: auto; flex: 1; }
.modal-foot {
padding: 14px 24px;
border-top: 1px solid var(--line);
display: flex; gap: 10px; justify-content: flex-end;
background: rgba(0, 0, 0, 0.20);
}
/* —— Toast：浮窗 —— */
.toast {
position: fixed;
bottom: 30px; left: 50%; transform: translateX(-50%);
padding: 12px 22px;
background: rgba(20, 24, 51, 0.80);
border: 1px solid rgba(255, 255, 255, 0.14);
color: var(--ink);
font-family: var(--font-ui);
font-size: 13.5px;
font-weight: 600;
border-radius: 999px;
z-index: 200;
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.06) inset,
0 12px 40px rgba(0, 0, 0, 0.55),
0 0 32px rgba(255, 255, 255, 0.20);
animation: toast-in .25s cubic-bezier(.4,0,.2,1);
display: flex; align-items: center; gap: 8px;
letter-spacing: 0.3px;
}
.toast.err { border-color: rgba(244, 63, 94, 0.45); color: var(--neon-rose); box-shadow: 0 0 0 1px rgba(244,63,94,0.15) inset, 0 12px 40px rgba(244,63,94,0.25), 0 0 32px rgba(244,63,94,0.30); }
.toast.ok { border-color: rgba(132, 204, 22, 0.45); color: var(--neon-lime); box-shadow: 0 0 0 1px rgba(132,204,22,0.15) inset, 0 12px 40px rgba(132,204,22,0.25), 0 0 32px rgba(132,204,22,0.30); }
@keyframes toast-in {
from { opacity: 0; transform: translate(-50%, 14px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
/* —— HA grid / Device cards —— */
.ha-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
}
.ha-card {
padding: 16px 18px;
background: rgba(255, 255, 255, 0.035);
border: 1px solid var(--line);
position: relative;
border-radius: var(--radius);
backdrop-filter: blur(10px);
transition: all .18s ease;
overflow: hidden;
}
.ha-card::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
pointer-events: none;
}
.ha-card:hover {
border-color: rgba(255, 255, 255, 0.32);
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.ha-card .name {
font-family: var(--font-ui);
font-weight: 700; font-size: 15px;
letter-spacing: 0.3px;
color: var(--ink);
}
.ha-card .target {
font-size: 12px; color: var(--ink-faded);
font-family: var(--font-mono);
margin-top: 4px;
}
.ha-row {
display: flex; align-items: center; gap: 8px;
padding: 11px 14px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--line);
margin-bottom: 8px;
border-radius: var(--radius);
flex-wrap: wrap;
backdrop-filter: blur(8px);
}
.ha-row input { flex: 1; }
/* —— Devices —— */
.devices-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.area-section { margin-bottom: 28px; }
.area-section .area-title {
font-size: 14px; font-weight: 700;
color: var(--ink);
display: flex; align-items: center; gap: 10px;
margin: 0 0 14px;
padding: 0 0 8px;
letter-spacing: 0.6px;
border-bottom: 1px solid var(--line);
text-transform: uppercase;
}
.area-section .area-title::before {
content: "";
width: 3px; height: 14px;
background: var(--grad-primary);
border-radius: 2px;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}
.area-section .area-title::after {
content: ""; flex: 1; height: 1px;
background-image: linear-gradient(to right, var(--line-bold), transparent);
}
.area-section .area-title .count {
color: var(--ink-faded); font-weight: 400;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0;
}
.dev-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 12px;
}
/* 大店性能（2026-07 网鱼中山路 6000+ 实体复盘）：
⚠ 不要用 content-visibility:auto——几千张高度不一的卡在同一个 grid 里时，
离屏卡片按 contain-intrinsic-size 估高参与行高计算，滚动/重进页面时
"解锁真实高度→行高变→视口内容移位→重新估算"来回抖动，Chrome 会陷入
长时间布局收敛（表现＝页面卡死很久、下方卡片一片空白像"设备变少"）。
改用安全的 contain:content：只隔离卡片内部的布局/绘制影响面，不做尺寸估算，
无任何视觉副作用。 */
.dev-list .dev {
contain: content;
}
/* 千卡级列表的绘制减负（JS 侧在卡片数 >500 时给容器挂 .dev-perf）：
每张卡一个 backdrop-filter: blur(10px) 是合成器灾难——滚动时几百个可见
模糊层逐帧重采样背景；transition:all 又让任何 class 翻转都触发全属性过渡。
大店直接砍掉毛玻璃、收窄过渡属性；几十张卡的小店不受影响。 */
.dev-perf .dev {
backdrop-filter: none;
transition: border-color .15s ease, background-color .15s ease;
}
.dev {
position: relative;
padding: 14px 16px;
background: rgba(255, 255, 255, 0.035);
border: 1px solid var(--line);
border-radius: var(--radius);
transition: all .15s ease;
backdrop-filter: blur(10px);
overflow: hidden;
}
.dev::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
pointer-events: none;
}
.dev:hover { border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 6px 20px rgba(0,0,0,0.35); transform: translateY(-1px); }
.dev.on {
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.06));
border-color: rgba(255, 255, 255, 0.45);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 30px rgba(255, 255, 255, 0.15);
}
.dev .dev-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.dev .dev-name {
font-family: var(--font-ui);
font-weight: 600; font-size: 14.5px; line-height: 1.3;
color: var(--ink);
}
.dev .dev-id {
font-size: 11px; color: var(--ink-dim);
font-family: var(--font-mono);
margin-top: 4px; word-break: break-all;
}
.dev .dev-state {
font-size: 13px;
color: var(--neon-cyan);
margin-top: 8px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.dev .dev-domain {
display: inline-flex; align-items: center;
font-size: 10px; font-weight: 700;
padding: 2px 8px;
background: rgba(255, 255, 255, 0.06);
color: var(--ink-faded);
border: 1px solid var(--line);
letter-spacing: 0.6px;
flex-shrink: 0;
font-family: var(--font-mono);
text-transform: uppercase;
border-radius: 999px;
}
.dev .dev-actions { display: flex; gap: 6px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.dev .dev-actions input[type=range] { flex: 1; }
/* —— Range / slider —— */
input[type=range] {
-webkit-appearance: none;
appearance: none;
background: transparent;
padding: 0;
border: 0;
height: 20px;
cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
background: linear-gradient(to right, #71717a, #1c1c20);
border: 0;
height: 4px;
border-radius: 999px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px; height: 16px;
background: #fff;
border-radius: 50%;
margin-top: -6px;
border: 0;
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.6),
0 0 14px rgba(255, 255, 255, 0.18);
cursor: pointer;
}
/* —— Chips —— */
.chip-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
}
.chip {
padding: 12px 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--line);
cursor: pointer;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 600;
text-align: center;
transition: all .15s ease;
display: flex; align-items: center; gap: 8px; justify-content: center;
color: var(--ink-soft);
letter-spacing: 0.3px;
border-radius: var(--radius);
backdrop-filter: blur(10px);
}
.chip:hover {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.45);
color: var(--neon-cyan);
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(255, 255, 255, 0.20);
}
.chip svg { width: 14px; height: 14px; }
/* —— Loading —— */
.loading {
padding: 40px; text-align: center; color: var(--ink-faded);
font-size: 13.5px;
display: flex; align-items: center; justify-content: center; gap: 12px;
letter-spacing: 0.4px;
}
.loading::before {
content: "";
width: 18px; height: 18px;
border: 2px solid rgba(255, 255, 255, 0.10);
border-top-color: var(--neon-cyan);
border-right-color: var(--neon-purple);
border-radius: 50%;
animation: spin 1s cubic-bezier(.5,.1,.5,.9) infinite;
filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ============ 操作日志：刷新过渡（避免闪烁/重建）============ */
.logs-wrap {
position: relative;
min-height: 120px;
/* 表格列宽固定，详情列至少 260px；窄屏允许横向滚动而不是挤变形 */
overflow-x: auto;
/* 强容器化 + 独立合成层：侧栏折叠 250ms 动画期间，表格内 50 行
文本因 table-layout:fixed 自动列宽变化会触发大量回流，必须把
重排 / 重绘 / 合成都圈在 .logs-wrap 内部，不要外溢到整页。 */
contain: layout paint style;
transform: translateZ(0);
isolation: isolate;
}
.logs-wrap > table.logs-table {
table-layout: fixed;
min-width: 888px;
}
/* 宽表（列特别多，如 OSS 流量统计 16 列）：888px 保底会把所有列挤扁且永远不触发
.logs-wrap 的横向滚动条 → 用更大的保底宽度让容器自然出横向滚动。
每张表可用 style="--tbl-minw:1450px" 按自己的列数微调。 */
.logs-wrap > table.logs-table.logs-table-wide {
min-width: var(--tbl-minw, 1280px);
}
.logs-wrap > table.logs-table td {
vertical-align: top;
/* 防止 tag/JSON 等长字符串横向溢出到下一列 */
overflow: hidden;
}
.logs-wrap > table.logs-table td.wrap {
word-break: break-word;
line-height: 1.55;
}
/* 表格内的 tag 标签：稍小字号 + 更高对比，符合密集表格阅读 */
.logs-wrap .tag {
font-size: 12px;
letter-spacing: 0;
padding: 2px 8px;
/* 单元格列宽固定，tag 内文字若过长则裁剪显示而不撑破列 */
max-width: 100%;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
.logs-wrap .tag-plain {
color: var(--ink-soft);
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.18);
}
.logs-wrap .tag-info {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.55);
}
.logs-wrap .tag-active, .logs-wrap .tag-online {
background: rgba(132, 204, 22, 0.14);
border-color: rgba(132, 204, 22, 0.55);
}
.logs-wrap .tag-expired, .logs-wrap .tag-offline {
background: rgba(244, 63, 94, 0.14);
border-color: rgba(244, 63, 94, 0.55);
}
.logs-wrap.is-refreshing { pointer-events: none; }
.logs-wrap.is-refreshing > table,
.logs-wrap.is-refreshing > .pager {
opacity: 0.55;
transition: opacity .15s ease;
}
.logs-wrap.is-refreshing::after {
content: "";
position: absolute;
top: 16px; right: 16px;
width: 18px; height: 18px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.22);
border-top-color: var(--neon-cyan);
animation: spin .8s linear infinite;
z-index: 5;
box-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
}
/* —— Empty state —— */
.empty {
padding: 56px 20px;
text-align: center;
color: var(--ink-faded);
}
.empty .icon {
width: 56px; height: 56px;
margin: 0 auto 16px;
color: var(--ink-dim);
opacity: 0.7;
filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.20));
}
.empty .empty-title {
font-family: var(--font-display);
font-size: 16px;
color: var(--ink);
margin-bottom: 8px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.empty .empty-msg { font-size: 13px; color: var(--ink-faded); }
.empty button { margin-top: 16px; }
/* Sparkline */
.spark { width: 100%; height: 60px; }
/* Expire cell */
.expire-cell {
display: inline-flex; flex-direction: row; gap: 8px;
line-height: 1.35; align-items: center; white-space: nowrap;
}
.expire-cell > div { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); }
.expire-cell .tag { font-size: 10px; padding: 2px 8px; white-space: nowrap; }
/* —— 门店列表里展开的 HA 子行（按 HA 计费/到期）—— */
tr.ha-subrow > td { background: var(--surface-2, rgba(127,127,127,0.04)); font-size: 12.5px; padding-top: 6px; padding-bottom: 6px; }
tr.ha-subrow:hover > td { background: var(--surface-3, rgba(127,127,127,0.08)); }
/* 门店分组表（主行 + 其下 HA 子行）：关掉全局斑马纹。
隐藏的 HA 子行（display:none）仍被 :nth-child 计数，各门店子行数量不同会把
后续可见主行的奇偶推乱 → 背景深浅参差不齐。这里统一让主行透明，分组靠子行浅底色体现。 */
table.ha-grouped tbody tr:nth-child(odd),
table.ha-grouped tbody tr:nth-child(even) { background: transparent; }
table.ha-grouped tbody tr:hover { background: rgba(255, 255, 255, 0.06); }
html[data-theme="light"] table.ha-grouped tbody tr:nth-child(odd),
html[data-theme="light"] table.ha-grouped tbody tr:nth-child(even) { background: transparent; }
html[data-theme="light"] table.ha-grouped tbody tr:hover { background: rgba(0, 0, 0, 0.05); }
/* —— Range chips —— */
.range-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip-btn {
padding: 5px 12px;
font-size: 12.5px;
font-weight: 500;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--line);
color: var(--ink-soft);
cursor: pointer;
letter-spacing: 0.2px;
border-radius: 999px;
/* 显式列出过渡属性，刻意不包含 backdrop-filter ——
侧栏折叠动画收尾解除 .is-sidebar-toggling 时，避免毛玻璃从 none
回到 blur(8px) 的 150ms 插值在 16 颗 chip 上同时播放，导致整页"刷新感"。 */
transition: background .15s ease, border-color .15s ease, color .15s ease,
box-shadow .15s ease, transform .15s ease, font-weight .15s ease;
font-family: inherit;
line-height: 1.3;
box-shadow: none;
backdrop-filter: blur(8px);
}
.chip-btn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.40);
color: #fff;
transform: none;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.chip-btn.active {
background: var(--grad-primary);
border-color: rgba(255, 255, 255, 0.45);
color: #fff;
font-weight: 600;
box-shadow:
0 4px 14px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(255, 255, 255, 0.14) inset;
}
.chip-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* —— BarChart —— */
.barchart-wrap { width: 100%; }
.barchart { width: 100%; height: auto; display: block; }
.barchart-legend {
display: flex; gap: 18px; flex-wrap: wrap;
justify-content: center; padding: 8px 0 2px;
font-size: 12px; color: var(--ink-soft);
}
.barchart-legend .legend-item {
display: inline-flex; align-items: center; gap: 6px;
}
.barchart-legend .legend-item i {
display: inline-block; width: 12px; height: 12px;
border-radius: 3px; margin: 0;
}
/* —— KPI cards —— */
.kpi-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.kpi {
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.035);
padding: 16px 18px;
border-radius: var(--radius-r);
position: relative;
backdrop-filter: blur(12px);
overflow: hidden;
transition: all .18s ease;
}
.kpi::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
}
.kpi:hover {
border-color: rgba(255, 255, 255, 0.18);
transform: translateY(-2px);
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.40);
}
.kpi .lbl {
font-size: 11px; color: var(--ink-faded); margin-bottom: 8px;
letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600;
}
.kpi .val { font-size: 22px; font-weight: 700; font-family: var(--font-display); letter-spacing: 0.4px; }
.kpi .sub { font-size: 11.5px; color: var(--ink-faded); margin-top: 4px; }
.kpi.in .val { background: var(--grad-success); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kpi.out .val { background: var(--grad-danger); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kpi.net .val { background: var(--grad-warn); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kpi.fee .val { color: var(--ink); }
/* —— Custom date —— */
.range-custom {
display: inline-flex; gap: 8px; align-items: center;
padding: 0 4px;
}
.range-custom .chip-date {
padding: 5px 11px;
font-size: 12.5px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--line);
color: var(--ink);
border-radius: 999px;
font-family: inherit;
width: auto; min-width: 140px; max-width: 180px;
}
.range-custom .chip-date:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.55);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}
/* —— Pager —— */
.pager {
display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
padding: 14px 4px 4px;
margin-top: 10px;
border-top: 1px dashed var(--line);
}
.pager-meta {
font-size: 12.5px; color: var(--ink-faded);
font-variant-numeric: tabular-nums;
}
.pager-grp { display: flex; gap: 4px; align-items: center; }
.pager-grp .chip-btn { min-width: 30px; padding: 4px 10px; font-size: 12.5px; }
.pager-size {
width: auto; min-width: 110px;
padding: 5px 11px; font-size: 12.5px;
margin-left: auto;
}
/* —— Filter bar —— */
.filter-bar {
display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
padding-bottom: 14px;
margin-bottom: 14px;
border-bottom: 1px dashed var(--line);
}
/* —— Toggle switch（用于"启用自动清理"等开关） —— */
.switch-wrap input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
position: relative;
width: 42px;
height: 22px;
flex: 0 0 42px;
padding: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.15);
cursor: pointer;
transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.switch-wrap input[type="checkbox"]::after {
content: "";
position: absolute;
top: 2px; left: 2px;
width: 16px; height: 16px;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,.35);
transition: transform .18s ease, background .18s ease;
}
.switch-wrap input[type="checkbox"]:checked {
background: linear-gradient(135deg, #2a2a30, #050505);
border-color: rgba(255, 255, 255, 0.45);
box-shadow:
0 0 0 3px rgba(255, 255, 255, 0.10),
0 0 14px rgba(0, 0, 0, 0.55);
}
.switch-wrap input[type="checkbox"]:checked::after {
transform: translateX(20px);
}
.switch-wrap input[type="checkbox"]:focus {
outline: none;
box-shadow:
0 0 0 3px rgba(255, 255, 255, 0.14),
0 0 14px rgba(0, 0, 0, 0.55);
}
.filter-bar .filter-group {
display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.filter-bar .filter-label {
font-size: 11px;
color: var(--ink-faded);
letter-spacing: 1px;
margin-right: 4px;
text-transform: uppercase;
font-weight: 600;
}
.filter-bar input[type=search],
.filter-bar input[type=text] { width: auto; min-width: 200px; max-width: 280px; }
.filter-bar select { width: auto; min-width: 120px; }
/* —— 中窄屏（平板 / 集成接口 iframe 内嵌第三方 UI）——
此档侧栏默认自动折叠成图标栏（app.js _sideCollapsed），这里同步收紧
内容区留白 / 标题字号 / 筛选栏密度，让中等尺寸 iframe 里不显局促。
注意保持在 600px 块之前：≤600 的更紧凑值要能覆盖本块。 */
@media (max-width: 1024px) {
main#view { padding: 20px 20px 56px; }
#view_as_host { padding: 12px 20px 0 20px; }
#view_as_host:empty { padding: 0; }
.topbar { padding: 0 18px; }
.page-head { margin-bottom: 18px; padding-bottom: 14px; }
.page-head .title { font-size: 23px; }
.filter-bar { gap: 10px; }
.filter-bar input[type=search],
.filter-bar input[type=text] { min-width: 140px; }
/* 卡片网格：最小列宽放宽一档，900px 上下的 iframe 也能排两列 */
.room-pro-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.dpanel-grid { grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); }
}
/* —— Mobile —— */
@media (max-width: 600px) {
main#view { padding: 16px 14px 40px; }
#view_as_host { padding: 10px 14px 0 14px; }
#view_as_host:empty { padding: 0; }
.topbar { padding: 0 16px; gap: 10px; }
.page-head .title { font-size: 22px; }
.topbar .crumb b { font-size: 16px; }
/* 代客查看子导航在窄屏滚动而非换行，避免一屏占满 */
.view-as-tabs { flex-wrap: nowrap; overflow-x: auto; }
.view-as-tab { flex: 0 0 auto; }
}
/* —— Misc —— */
.kbd {
display: inline-block;
padding: 2px 8px;
font-family: var(--font-mono);
font-size: 11.5px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--line);
border-radius: 6px;
color: var(--ink-soft);
letter-spacing: 0.5px;
}
.copy-input {
display: flex; gap: 0; align-items: stretch;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.04);
border-radius: var(--radius);
overflow: hidden;
backdrop-filter: blur(8px);
}
.copy-input input {
flex: 1; border: 0; background: transparent;
font-family: var(--font-mono);
font-size: 13px;
border-radius: 0;
}
.copy-input input:focus { box-shadow: none; background: transparent; }
.copy-input button {
border: 0; border-left: 1px solid var(--line);
border-radius: 0;
background: rgba(255, 255, 255, 0.04);
box-shadow: none;
padding: 8px 16px;
}
.copy-input button:hover { background: rgba(255, 255, 255, 0.08); }
iframe.full {
width: 100%; height: calc(100vh - 110px);
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.02);
border-radius: var(--radius);
}
.warn { color: var(--seal-amber); }
.err { color: var(--neon-rose); min-height: 18px; font-size: 13px; }
.ok { color: var(--neon-lime); }
/* —— Letterpress / decor 旧规则覆盖 —— */
.stat .num,
.kpi .val,
.balance-chip,
.page-head .title {
text-shadow: none;
}
/* —— Ornament divider —— */
.ornament-divider {
display: flex; align-items: center; gap: 14px;
color: var(--ink-faded);
font-size: 12.5px;
text-align: center;
margin: 22px auto;
}
.ornament-divider::before,
.ornament-divider::after {
content: ""; flex: 1; height: 1px;
background: linear-gradient(to right, transparent, var(--line-bold) 30%, var(--line-bold) 70%, transparent);
}
/* —— 修：旧版 :has 表格 overflow 规则保留 ——
注意：当卡片内部已经有显式 .logs-wrap / .tbl-wrap 作为滚动容器时，
不要再给卡片本身加 overflow-x:auto，避免嵌套滚动容器在侧栏折叠动画
期间反复争抢，引起整页闪烁。 */
.card { overflow: visible; }
.card:has(> table),
.card:has(> .tbl-wrap) { overflow-x: auto; }
.card:has(thead):not(:has(.logs-wrap)):not(:has(.tbl-wrap)) { overflow-x: auto; }
/* —— 微动画：登录卡 / modal 入场 —— */
@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 24px rgba(255, 255, 255, 0.25); }
50% { box-shadow: 0 0 36px rgba(255, 255, 255, 0.50); }
}
@keyframes float-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.login-panel { animation: float-in .4s cubic-bezier(.4,0,.2,1); }
.modal-box { animation: float-in .25s cubic-bezier(.4,0,.2,1); }
.card, .stat, .kpi { animation: float-in .3s cubic-bezier(.4,0,.2,1); }
/* —— 提升 stat 中数字的渐变文字（部分有 amber 类的金额数字） —— */
.stat.amber .num,
.stat.rose .num {
background: linear-gradient(135deg, var(--stat-color, var(--neon-cyan)) 0%, #fff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* —— Wax seal（兼容旧 .wax-seal 类，作为登录页装饰隐藏） —— */
.wax-seal { display: none; }
/* ============================================================
性能优化分区（GPU 降负载）
策略：登录页保持炫酷视觉；登录后（#shell 显示）大幅瘦身。
- 登录后整张 #cyber-bg + body 装饰层全部隐藏 → 不再合成/动画
- 削减满屏 backdrop-filter，仅保留 sidebar/topbar/modal-box/login-panel
- 极光层降低 blur 半径、去掉 mix-blend-mode（最贵的合成成本）
- 不再用 background-attachment: fixed（滚动时整屏重绘）
- 尊重 prefers-reduced-motion：彻底关掉所有循环动画
============================================================ */
/* —— 1. 登录后隐藏全部装饰层（最大单笔收益） —— */
body:has(#shell:not(.hidden)) #cyber-bg,
body:has(#shell:not(.hidden))::before,
body:has(#shell:not(.hidden))::after {
display: none !important;
}
/* 登录后页面背景退化为纯色（去掉多层径向渐变 + fixed attachment） */
body:has(#shell:not(.hidden)) {
background-image: none;
background-attachment: scroll;
background: var(--paper-1);
}
/* —— 2. 极光层减负：blur 90→40、不再 mix-blend、整体降透明 —— */
.cyber-bg .aurora {
filter: blur(40px);
mix-blend-mode: normal;
opacity: 0.28;
}
.cyber-bg .aurora-b { opacity: 0.22; }
.cyber-bg .aurora-c { opacity: 0.18; }
/* 涂鸦层 / 扫描线：去掉 mix-blend-mode（全屏混色合成极贵） */
.cyber-bg .graffiti-layer { mix-blend-mode: normal; opacity: 0.40; }
.cyber-bg .scanlines { mix-blend-mode: normal; opacity: 0.18; }
/* —— 3. 削减 backdrop-filter ——
仅保留以下大块玻璃面板的模糊（视觉差别最明显）：
.sidebar / .topbar / .modal-box / .login-panel / .modal-bg
其余所有元素一律取消 backdrop-filter，避免每一帧反复采样背景。 */
.card, .panel, .stat, .kpi,
.ha-card, .ha-row, .dev,
.chip, .chip-btn, .chip-date, .range-custom .chip-date,
.copy-input, .balance-chip, .brand-icon, .role-chip,
.footer-actions, .login-submit,
button, .btn,
input, select, textarea,
.toast {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* modal 遮罩仅做半透黑遮挡，不再 blur 整屏 */
.modal-bg {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: rgba(0, 0, 0, 0.62);
}
/* —— 4. 主面板（仍保留 blur 的几处）适度降低半径 —— */
.sidebar, .topbar {
backdrop-filter: blur(8px) saturate(120%);
-webkit-backdrop-filter: blur(8px) saturate(120%);
}
.modal-box {
backdrop-filter: blur(14px) saturate(130%);
-webkit-backdrop-filter: blur(14px) saturate(130%);
}
.login-panel {
backdrop-filter: blur(16px) saturate(130%);
-webkit-backdrop-filter: blur(16px) saturate(130%);
}
/* —— 5. 减少滚动时整屏重绘 —— */
html, body { background-attachment: scroll; }
/* —— 6. 用户开启「减少动态效果」时只关装饰动画 ——
注意：不要用 `* { animation-duration: 0s }`，这会把
spinner (`spin`)、toast 入场 (`toast-in`)、错误抖动 (`err-shake`)
这些有功能意义的反馈一起干掉。 */
@media (prefers-reduced-motion: reduce) {
.cyber-bg .aurora,
.cyber-bg .graffiti-layer .g-pulse,
.cyber-bg .graffiti-layer .g-pulse-delay,
.cyber-bg .graffiti-layer .g-drift,
.cyber-bg .graffiti-layer .g-drift-slow,
.mascots,
.login-panel,
.modal-box,
.card, .stat, .kpi { animation: none !important; }
}
/* —— 7. 让 cyber-bg 真正成为独立层（已在原规则中声明），
再加 content-visibility 让滚动屏外时跳过渲染 —— */
.cyber-bg { content-visibility: auto; }
/* ============================================================
修复：登录页输入框被浏览器自动填充时变白
原因：通用的 input:-webkit-autofill 用 box-shadow 蒙版伪装暗色，
但 .login-field input:focus 自己又设置了 box-shadow，
两者特异性相同、且后者在源代码中靠后 → focus 时蒙版被挤掉，
Chrome/Edge 的原生黄白底就漏出来了。
解法：用更高特异性（.login-field input:-webkit-autofill:focus）
重新铺上暗色蒙版 + focus 光环，统一三种状态：
默认 / hover / focus 都是同一套深底色。
============================================================ */
.login-field input:-webkit-autofill,
.login-field input:-webkit-autofill:hover,
.login-field input:-webkit-autofill:active {
-webkit-text-fill-color: var(--ink) !important;
-webkit-box-shadow: 0 0 0 1000px #101013 inset !important;
box-shadow: 0 0 0 1000px #101013 inset !important;
caret-color: var(--ink) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 10px !important;
background-clip: padding-box !important;
transition: background-color 9999s ease-in-out 0s,
-webkit-text-fill-color 0s !important;
}
.login-field input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--ink) !important;
-webkit-box-shadow:
0 0 0 1000px #101013 inset,
0 0 0 3px rgba(255, 255, 255, 0.12) !important;
box-shadow:
0 0 0 1000px #101013 inset,
0 0 0 3px rgba(255, 255, 255, 0.12) !important;
caret-color: var(--ink) !important;
border: 1px solid rgba(255, 255, 255, 0.50) !important;
border-radius: 10px !important;
background-clip: padding-box !important;
}
/* —— Agent exe 编译进度 —— */
.build-progress-wrap { margin-bottom: 14px; }
.build-progress-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
font-size: 12.5px;
}
.build-progress-bar {
height: 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.build-progress-bar > i {
display: block;
height: 100%;
width: 0%;
border-radius: inherit;
background: linear-gradient(90deg, #10b981, #34d399);
transition: width 0.35s ease;
}
.build-log {
margin-top: 12px;
max-height: 220px;
overflow: auto;
padding: 10px 12px;
border-radius: 8px;
background: rgba(0, 0, 0, 0.35);
border: 1px solid rgba(255, 255, 255, 0.08);
font-family: ui-monospace, Consolas, monospace;
font-size: 11.5px;
line-height: 1.55;
white-space: pre-wrap;
word-break: break-all;
}
.build-checks { margin-top: 12px; display: grid; gap: 6px; }
.build-check {
display: flex;
gap: 8px;
align-items: flex-start;
font-size: 12.5px;
line-height: 1.45;
padding: 8px 10px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.03);
}
.build-check.ok { border-color: rgba(16, 185, 129, 0.25); background: rgba(16, 185, 129, 0.06); }
.build-check.bad { border-color: rgba(249, 115, 115, 0.25); background: rgba(249, 115, 115, 0.06); }
.build-check .ico { flex: 0 0 auto; font-weight: 700; }
.build-check.ok .ico { color: #86efac; }
.build-check.bad .ico { color: #fca5a5; }
/* ============================================================
网咖控制台 / 房间管理 / 房间详情
============================================================ */
/* 房间网格 + 房间卡 */
.room-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 14px;
}
.room-card {
padding: 14px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.025);
transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
display: flex;
flex-direction: column;
gap: 10px;
}
.room-card:hover {
transform: translateY(-2px);
border-color: rgba(103, 232, 249, 0.30);
background: rgba(255, 255, 255, 0.04);
}
.room-card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 6px;
}
.room-card-title {
display: flex;
flex-direction: column;
gap: 3px;
flex: 1 1 auto;
min-width: 0;
}
.room-card-title b { font-size: 14.5px; }
.zone-tag {
display: inline-block;
align-self: flex-start;
padding: 1px 7px;
border-radius: 999px;
font-size: 11px;
background: rgba(139, 92, 246, 0.14);
color: #c4b5fd;
border: 1px solid rgba(139, 92, 246, 0.30);
}
/* 上机率条 */
.ratio-row { display: flex; flex-direction: column; gap: 4px; }
.ratio-text { font-size: 13px; }
.ratio-text b { font-size: 16px; color: #67e8f9; }
.ratio-bar {
height: 6px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.06);
overflow: hidden;
}
.ratio-fill {
height: 100%;
background: linear-gradient(90deg, #22d3ee, #a855f7);
transition: width 0.35s ease;
}
/* 空调状态行 */
.ac-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-size: 12.5px;
padding-top: 6px;
border-top: 1px dashed rgba(255, 255, 255, 0.06);
}
.ac-row .ac-name {
flex: 1 1 100%;
font-size: 11.5px;
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 2px;
}
.ac-mode {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
color: var(--text-muted);
}
.ac-mode.on {
background: rgba(103, 232, 249, 0.12);
border-color: rgba(103, 232, 249, 0.32);
color: #a5f3fc;
}
.ac-temp b { color: var(--text); }
/* 房间详情 顶部卡 */
.area-detail-top {
background: linear-gradient(135deg, rgba(56, 189, 248, 0.10), rgba(139, 92, 246, 0.06));
}
.area-detail-top .big-temp {
font-size: 56px;
font-weight: 700;
font-family: 'Orbitron', 'Segoe UI', sans-serif;
color: #67e8f9;
letter-spacing: -0.03em;
line-height: 1.1;
}
.area-detail-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
min-width: 480px;
}
.area-detail-stats > div {
padding: 10px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.05);
}
@media (max-width: 640px) {
.area-detail-stats { grid-template-columns: repeat(2, 1fr); min-width: 0; }
}
/* PC 小方块网格 */
.pc-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
gap: 6px;
}
.pc-tile {
padding: 8px 6px;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.025);
text-align: center;
font-size: 11px;
line-height: 1.3;
transition: all 0.18s ease;
}
.pc-tile .pc-name { font-weight: 600; font-size: 12px; color: var(--text); }
.pc-tile .pc-state { color: var(--text-muted); font-size: 10.5px; margin-top: 2px; }
.pc-tile.on {
background: rgba(34, 197, 94, 0.10);
border-color: rgba(34, 197, 94, 0.38);
}
.pc-tile.on .pc-name { color: #86efac; }
.pc-tile.on .pc-state { color: #86efac; }
.pc-tile.offline {
background: rgba(249, 115, 115, 0.06);
border-color: rgba(249, 115, 115, 0.30);
}
.pc-tile.offline .pc-name { color: #fca5a5; }
.pc-tile.offline .pc-state { color: #fca5a5; }
/* PC 多选选项（房间编辑 modal 内） */
.pc-picker {
display: flex;
flex-direction: column;
gap: 6px;
}
.pc-picker input[type="text"], .pc-picker > input { padding: 6px 10px; font-size: 12.5px; }
.pc-list {
max-height: 320px;
overflow-y: auto;
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 8px;
background: rgba(0, 0, 0, 0.18);
padding: 8px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 6px;
}
/* ====================================================================
控制台 Pro / 房间卡 Pro / PC 导航页 — 完整样式
==================================================================== */
/* 通用：状态圆点 */
.dot {
display: inline-block; width: 8px; height: 8px; border-radius: 999px;
background: rgba(255,255,255,0.25); flex: 0 0 auto; vertical-align: middle;
}
.dot-on { background: #4ade80; box-shadow: 0 0 6px rgba(74, 222, 128, 0.55); }
.dot-cool { background: #67e8f9; box-shadow: 0 0 6px rgba(103, 232, 249, 0.55); }
.dot-err { background: #f43f5e; box-shadow: 0 0 6px rgba(244, 63, 94, 0.55); }
.dot-muted { background: rgba(255,255,255,0.20); }
/* ===== 控制台顶部 banner ===== */
.console-banner {
display: grid; grid-template-columns: 1fr 360px; gap: 24px;
padding: 22px 26px; margin-bottom: 16px;
background: linear-gradient(135deg, rgba(103,232,249,0.10) 0%, rgba(167,139,250,0.06) 60%, rgba(0,0,0,0) 100%);
border: 1px solid rgba(255,255,255,0.10); border-radius: 16px;
position: relative; overflow: hidden;
}
.console-banner .cb-left { display: flex; flex-direction: column; gap: 8px; }
.cb-tag {
display: inline-block; align-self: flex-start;
padding: 4px 11px; border-radius: 999px;
background: rgba(103,232,249,0.18); color: #67e8f9;
font-size: 11.5px; font-weight: 600; letter-spacing: 0.5px;
}
.cb-title {
margin: 4px 0 2px; font-size: 24px; font-weight: 700;
letter-spacing: 0.5px; line-height: 1.3;
}
.cb-title b { color: #67e8f9; padding: 0 2px; }
.cb-sub { margin: 0; color: var(--text-muted); font-size: 13px; }
.console-banner .cb-right { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.cb-time { color: var(--text-muted); font-size: 12px; text-align: right; }
.cb-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cb-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px; border-radius: 999px;
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
font-size: 11.5px;
}
.cb-chip b { color: var(--text); }
.cb-bar { height: 8px; background: rgba(255,255,255,0.06); border-radius: 999px; overflow: hidden; margin-top: 4px; }
.cb-bar-fill {
height: 100%; border-radius: inherit;
background: linear-gradient(90deg, #67e8f9, #a78bfa);
transition: width 0.4s ease;
}
.cb-bar-lbl { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
@media (max-width: 920px) {
.console-banner { grid-template-columns: 1fr; }
}
/* ===== 季节预设 ===== */
.season-panel {
padding: 16px 18px; margin-bottom: 16px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px;
}
.season-panel.is-off { opacity: 0.85; }
.season-panel.is-off .season-card { opacity: 0.55; filter: grayscale(0.4); }
.season-panel.is-off .season-card:hover { opacity: 0.85; }
.season-panel.is-off .patrol-bar-fill { background: rgba(255,255,255,0.18); box-shadow: none; }
.season-head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 12px; gap: 16px; flex-wrap: wrap;
}
.season-head-l { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; flex-wrap: wrap; }
.season-head-l .season-head-sub { white-space: normal; flex: 1; min-width: 200px; }
/* —— 季节预设分组 Tab 栏（2026-07 分组化）——
一行：左侧分组 Tab（默认「一组」+ 店主自建组 + ＋新建），右侧当前组操作
（绑定房间 / 改名 / 删除）。点 Tab 切换下方三张季节卡显示的分组参数。 */
.season-groups {
display: flex; justify-content: space-between; align-items: center;
gap: 12px; flex-wrap: wrap;
margin: 2px 0 12px;
padding: 8px 10px;
background: rgba(255,255,255,0.025);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
}
.season-groups .sg-tabs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.sg-tab {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 12px;
font-size: 12.5px; line-height: 20px;
color: var(--text-muted);
background: transparent;
border: 1px solid rgba(255,255,255,0.10);
border-radius: 999px;
cursor: pointer;
transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.sg-tab:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.sg-tab.active {
color: var(--text);
background: rgba(122,162,255,0.14);
border-color: rgba(122,162,255,0.45);
}
.sg-tab .sg-def {
font-size: 10px; line-height: 14px; padding: 0 5px;
border-radius: 4px;
color: var(--text-muted);
background: rgba(255,255,255,0.08);
}
.sg-tab .sg-cnt { font-size: 11px; color: var(--text-muted); }
.sg-tab.active .sg-cnt { color: inherit; opacity: .75; }
.sg-tab.sg-add { border-style: dashed; }
.season-groups .sg-acts { display: flex; align-items: center; gap: 6px; }
.season-groups .sg-acts button.ghost.small { padding: 3px 10px; font-size: 11.5px; }
.season-groups .sg-acts button.danger-txt { color: var(--danger, #f87171); }
.season-groups .sg-acts button[disabled] { opacity: .45; cursor: not-allowed; }
/* 分组绑定房间弹窗：房间勾选列表 */
.sg-room-list {
display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px;
max-height: 46vh; overflow-y: auto;
padding: 2px;
}
.sg-room-item {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
cursor: pointer;
transition: border-color .15s ease, background .15s ease;
}
.sg-room-item:hover { background: rgba(255,255,255,0.04); }
.sg-room-item.is-on { border-color: rgba(122,162,255,0.45); background: rgba(122,162,255,0.10); }
.sg-room-item input { flex: 0 0 auto; }
.sg-room-item .sg-room-name { flex: 1; min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-room-item .sg-room-note { font-size: 10.5px; color: var(--warn, #fbbf24); margin-left: 4px; }
.sg-room-item .sg-room-note.muted { color: var(--text-muted); }
/* 季节总开关（iOS 风格 toggle） */
.season-toggle {
display: inline-flex; align-items: center; gap: 8px;
cursor: pointer; user-select: none;
}
.season-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.season-toggle .toggle-track {
position: relative;
width: 40px; height: 22px;
border-radius: 999px;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.12);
transition: background 0.18s ease, border-color 0.18s ease;
}
.season-toggle .toggle-thumb {
position: absolute;
top: 1px; left: 1px;
width: 18px; height: 18px;
border-radius: 50%;
background: #e5e7eb;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
transition: left 0.18s cubic-bezier(.4,.2,.2,1), background 0.18s ease;
}
.season-toggle input:checked + .toggle-track {
background: rgba(74, 222, 128, 0.45);
border-color: rgba(74, 222, 128, 0.65);
box-shadow: 0 0 8px rgba(74, 222, 128, 0.25);
}
.season-toggle input:checked + .toggle-track .toggle-thumb {
left: 19px; background: #f0fdf4;
}
.season-toggle .toggle-lbl {
font-size: 12px; font-weight: 600;
color: var(--text-muted);
min-width: 44px;
}
.season-toggle input:checked ~ .toggle-lbl { color: #86efac; }
/* 房间卡片：顾客控制四开关（顾客禁止 / 模式禁止 / 巡检豁免 / 任务豁免，房间管理页专属）。
勾选 = 限制态，用琥珀色提示这是一项约束。两行 × 每行两个（grid 均分）。 */
.rp-custops {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 6px 10px;
margin: 2px 0 8px;
padding: 0 2px;
}
.rp-custops-toggle {
display: inline-flex; align-items: center; gap: 6px;
cursor: pointer; user-select: none;
flex: 0 1 auto; min-width: 0;
}
/* 右列（第 2/4 个）贴卡片右缘，左列贴左缘——中间留白，不然右列悬在中间很难看 */
.rp-custops-toggle:nth-child(even) { justify-self: end; }
.rp-custops-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.rp-custops-toggle .toggle-track {
position: relative;
width: 36px; height: 20px;
border-radius: 999px;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.12);
transition: background 0.18s ease, border-color 0.18s ease;
}
.rp-custops-toggle .toggle-thumb {
position: absolute;
top: 1px; left: 1px;
width: 16px; height: 16px;
border-radius: 50%;
background: #e5e7eb;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
transition: left 0.18s cubic-bezier(.4,.2,.2,1), background 0.18s ease;
}
.rp-custops-toggle input:checked + .toggle-track {
background: rgba(245, 158, 11, 0.45);
border-color: rgba(245, 158, 11, 0.65);
box-shadow: 0 0 8px rgba(245, 158, 11, 0.25);
}
.rp-custops-toggle input:checked + .toggle-track .toggle-thumb {
left: 17px; background: #fffbeb;
}
.rp-custops-lbl {
font-size: 12px; font-weight: 600;
color: var(--text-muted);
white-space: nowrap;
}
.rp-custops-toggle input:checked ~ .rp-custops-lbl { color: #fbbf24; }
/* ============================================================
* 通用 iOS 风格 toggle 滑块（与 .season-toggle 视觉一致，去掉文字标签依赖）
* 用法：
*
* 适合表格行内的"启用/禁用"列；加 .small 类缩成 32×18px 适合密集场景
* ============================================================ */
.ui-toggle {
display: inline-flex; align-items: center; gap: 6px;
cursor: pointer; user-select: none;
vertical-align: middle;
}
.ui-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.ui-toggle .toggle-track {
position: relative;
width: 40px; height: 22px;
border-radius: 999px;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.12);
transition: background 0.18s ease, border-color 0.18s ease;
flex-shrink: 0;
}
.ui-toggle .toggle-thumb {
position: absolute;
top: 1px; left: 1px;
width: 18px; height: 18px;
border-radius: 50%;
background: #e5e7eb;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
transition: left 0.18s cubic-bezier(.4,.2,.2,1), background 0.18s ease;
}
.ui-toggle input:checked + .toggle-track {
background: rgba(74, 222, 128, 0.45);
border-color: rgba(74, 222, 128, 0.65);
box-shadow: 0 0 8px rgba(74, 222, 128, 0.25);
}
.ui-toggle input:checked + .toggle-track .toggle-thumb {
left: 19px; background: #f0fdf4;
}
.ui-toggle.disabled { opacity: 0.55; cursor: not-allowed; }
.ui-toggle.disabled input { pointer-events: none; }
/* small：表格行内紧凑尺寸 */
.ui-toggle.small .toggle-track { width: 32px; height: 18px; }
.ui-toggle.small .toggle-thumb { width: 14px; height: 14px; top: 1px; left: 1px; }
.ui-toggle.small input:checked + .toggle-track .toggle-thumb { left: 15px; }
.season-head-r {
display: flex; align-items: center; gap: 8px;
padding: 4px 10px; border-radius: 999px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
}
.season-head-r .patrol-lbl {
display: inline-flex; align-items: center; gap: 4px;
color: var(--text-muted); font-size: 11px;
}
.season-head-r .patrol-bar {
width: 96px; height: 6px; border-radius: 999px;
background: rgba(255,255,255,0.06);
overflow: hidden;
}
.season-head-r .patrol-bar-fill {
height: 100%; width: 0%;
background: linear-gradient(90deg, #22d3ee, #4ade80);
transition: width 0.45s linear;
box-shadow: 0 0 8px rgba(74, 222, 128, 0.35);
}
.season-head-r .patrol-txt { min-width: 36px; text-align: right; color: var(--text-muted); font-size: 11px; }
.season-head-r button.ghost.small { padding: 2px 8px; font-size: 11px; }
.season-tag {
font-size: 11.5px; font-weight: 600; letter-spacing: 0.5px;
color: var(--text); padding: 3px 10px; border-radius: 999px;
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
}
.season-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.season-card {
position: relative;
padding: 16px 18px 14px;
border-radius: 10px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
display: grid; grid-template-columns: 38px 1fr auto;
grid-template-rows: auto auto auto auto;
column-gap: 12px; row-gap: 4px; align-items: center;
transition: border-color 0.15s ease, background 0.15s ease;
}
.season-card:hover { border-color: rgba(255,255,255,0.18); }
.season-card .sc-edit {
position: absolute; top: 8px; right: 8px;
width: 24px; height: 24px; padding: 0;
display: grid; place-items: center;
border-radius: 6px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
color: var(--text-muted); cursor: pointer;
opacity: 0; transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.season-card:hover .sc-edit,
.season-card.active .sc-edit { opacity: 1; }
.season-card .sc-edit:hover { background: rgba(103,232,249,0.18); color: #67e8f9; border-color: rgba(103,232,249,0.35); }
.season-card .sc-ico {
grid-row: 1 / 3; grid-column: 1;
width: 38px; height: 38px; border-radius: 10px;
display: grid; place-items: center;
background: rgba(255,255,255,0.05);
}
.season-card .sc-name {
grid-row: 1; grid-column: 2;
font-size: 14px; font-weight: 700; letter-spacing: 0.3px;
display: flex; align-items: center; gap: 8px;
}
.season-card .sc-desc {
grid-row: 2; grid-column: 2;
font-size: 12px; color: var(--text-muted);
}
.season-card .sc-range {
grid-row: 3; grid-column: 1 / -1;
font-size: 10.5px; color: var(--text-muted);
padding: 5px 8px; margin-top: 6px;
border-radius: 6px;
background: rgba(255,255,255,0.025);
border: 1px dashed rgba(255,255,255,0.08);
display: flex; align-items: center; gap: 4px;
}
.season-card .sc-range svg { vertical-align: -1px; }
.season-card .sc-hint {
grid-row: 4; grid-column: 1 / -1;
font-size: 10.5px; color: var(--text-muted); white-space: nowrap;
margin-top: 2px;
}
.season-card .sc-auto-flag {
display: inline-block;
font-size: 10px; font-weight: 600; letter-spacing: 0.4px;
padding: 1px 6px; border-radius: 999px;
color: #fcd34d;
background: rgba(251, 191, 36, 0.12);
border: 1px solid rgba(251, 191, 36, 0.30);
}
.season-card.season-amber .sc-ico { color: #fbbf24; background: rgba(245,158,11,0.10); }
.season-card.season-cyan .sc-ico { color: #67e8f9; background: rgba(103,232,249,0.10); }
.season-card.season-lime .sc-ico { color: #84cc16; background: rgba(132,204,22,0.12); }
/* 激活态：被启用的季节卡——更亮的边框 + 高亮 */
.season-card.active { border-color: rgba(103, 232, 249, 0.55); background: rgba(103, 232, 249, 0.06); box-shadow: 0 0 0 1px rgba(103, 232, 249, 0.15), inset 0 0 24px rgba(103, 232, 249, 0.05); }
.season-card.active.season-amber { border-color: rgba(251, 191, 36, 0.55); background: rgba(251, 191, 36, 0.06); box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.18), inset 0 0 24px rgba(251, 191, 36, 0.05); }
.season-card.active.season-lime { border-color: rgba(132, 204, 22, 0.55); background: rgba(132, 204, 22, 0.06); box-shadow: 0 0 0 1px rgba(132, 204, 22, 0.18), inset 0 0 24px rgba(132, 204, 22, 0.05); }
.season-card .sc-active-flag {
display: inline-block;
font-size: 14px;
color: #4ade80;
vertical-align: middle;
animation: scActivePulse 1.6s ease-in-out infinite;
}
@keyframes scActivePulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
/* 季节编辑器 */
.season-edit .field-row { gap: 12px; }
.season-edit .field label { font-size: 12px; color: var(--text-muted); }
.season-card .sc-hint svg { vertical-align: -1px; }
/* 适用月份选择器 */
.season-months {
margin-bottom: 14px; padding: 12px;
border: 1px solid var(--border, #2a2a2a); border-radius: 10px;
background: rgba(255, 255, 255, 0.02);
}
.season-months-hd {
display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px;
}
.season-months-hd > span:first-child { font-size: 13px; font-weight: 600; }
.season-months-grid {
display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px;
}
.sm-cell {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 2px; padding: 8px 4px; min-height: 46px; cursor: pointer;
border: 1px solid var(--border, #333); border-radius: 8px;
background: var(--panel-2, #1a1a1a); color: var(--text, #ddd);
font-size: 13px; transition: all .12s ease;
}
.sm-cell:hover { border-color: #5a8; }
.sm-cell .sm-m { font-weight: 600; }
.sm-cell .sm-own { font-size: 10px; line-height: 1; color: var(--text-muted); }
.sm-cell.is-on {
background: rgba(64, 160, 120, 0.22); border-color: #4caf80; color: #d6f5e6;
}
.sm-cell.is-on .sm-own { color: #bfe8d3; }
.sm-cell.is-taken {
opacity: 0.62; background: rgba(255, 255, 255, 0.015); border-style: dashed;
}
.sm-cell.is-conflict {
background: rgba(220, 70, 70, 0.22); border-color: #e05555; color: #ffd9d9;
}
.sm-cell.is-conflict .sm-own { color: #ffc2c2; }
.season-months-warn {
margin-top: 8px; padding: 7px 10px; border-radius: 7px;
background: rgba(220, 70, 70, 0.14); border: 1px solid rgba(220, 70, 70, 0.4);
color: #ff9b9b; font-size: 12px;
}
@media (max-width: 820px) {
.season-months-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 820px) {
.season-row { grid-template-columns: 1fr; }
.season-head-r .patrol-bar { width: 60px; }
}
/* ===== 控制台 筛选区（grid 两栏布局，杜绝 flex 收缩重叠） ===== */
.console-filter {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
margin-bottom: 14px; padding: 10px 14px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
}
.cf-search {
display: flex; align-items: center; gap: 8px;
min-width: 0;
padding: 7px 12px; border-radius: 8px;
background: rgba(0,0,0,0.20); border: 1px solid rgba(255,255,255,0.06);
}
.cf-search svg { color: var(--text-muted); flex: 0 0 auto; }
.cf-search input {
flex: 1 1 auto; min-width: 0; width: 100%;
background: none; border: none; outline: none; color: var(--text);
font-size: 13px;
}
.cf-actions {
display: inline-flex; gap: 12px; align-items: center;
flex-wrap: nowrap;
white-space: nowrap;
}
.cf-toggle {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; cursor: pointer; user-select: none;
color: var(--text-muted);
white-space: nowrap;
}
.cf-toggle span { white-space: nowrap; word-break: keep-all; }
.cf-toggle input[type="checkbox"] {
width: 14px; height: 14px; margin: 0; flex: 0 0 auto;
}
.cf-toggle:hover { color: var(--text); }
/* 类型筛选下拉：和 cf-toggle 同一行，外观贴合圆角胶囊视觉语言 */
.cf-zone-sel {
background: rgba(0,0,0,0.20);
border: 1px solid rgba(255,255,255,0.06);
color: var(--text);
border-radius: 999px;
padding: 4px 12px;
font-size: 12px;
outline: none;
cursor: pointer;
}
.cf-zone-sel:hover {
border-color: rgba(103,232,249,0.35);
}
html[data-theme="light"] .cf-zone-sel {
background: rgba(0,0,0,0.04);
border-color: rgba(0,0,0,0.10);
}
/* ============================================================
* Task Editor（IF-THEN 块状编辑器）
* ----------------------------------------------------------
* 每个 .te-block 是一块语义块（基础信息 / WHEN / IF / THEN / AFTER），
* 内部用 .te-row 横排"label + input"。条件叶子 / 动作行用 .te-leaf / .te-act
* 做内嵌横排卡片，移动端 flex-wrap 自动折行。
* ============================================================ */
.task-editor { display: flex; flex-direction: column; gap: 14px; }
.te-block {
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px; padding: 12px 14px;
}
html[data-theme="light"] .te-block { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); }
.te-block-head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin-bottom: 10px;
}
.te-block-title { font-weight: 600; color: var(--accent, #67e8f9); font-size: 13px; letter-spacing: 0.4px; }
.te-row {
display: flex; align-items: center; gap: 10px;
margin: 6px 0; flex-wrap: wrap;
}
.te-row .input, .te-row .select { flex: 1; min-width: 160px; }
.te-label { flex: 0 0 90px; color: var(--text-muted); font-size: 12px; }
.te-cb { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 12px; cursor: pointer; }
.te-cb input { margin: 0; }
.te-trig-type { max-width: 220px; }
.te-cron-tpls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.te-leaves { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.te-leaf, .te-act {
display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
padding: 8px 10px; border-radius: 8px;
background: rgba(103,232,249,0.04);
border: 1px solid rgba(103,232,249,0.12);
}
html[data-theme="light"] .te-leaf, html[data-theme="light"] .te-act {
background: rgba(103,232,249,0.06);
border-color: rgba(103,232,249,0.18);
}
.te-leaf-watch { min-width: 180px; }
.te-leaf-fields { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; align-items: center; }
.te-leaf-fields .input, .te-leaf-fields .select { min-width: 110px; flex: 1; }
.te-leaf-del, .te-act-del { padding: 4px 10px; }
.te-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.te-advanced { margin-top: 10px; }
.te-advanced summary { cursor: pointer; color: var(--text-muted); font-size: 12px; padding: 4px 0; }
.te-advanced[open] summary { color: var(--text); }
.cf-view {
display: inline-flex; flex: 0 0 auto;
border-radius: 999px; padding: 3px;
background: rgba(0,0,0,0.20); border: 1px solid rgba(255,255,255,0.06);
}
.cf-view-btn {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 12px; border-radius: 999px;
background: transparent; border: none; color: var(--text-muted);
font-size: 12px; cursor: pointer; transition: all 0.12s ease;
white-space: nowrap;
}
.cf-view-btn:hover { color: var(--text); }
.cf-view-btn.on {
background: rgba(103,232,249,0.20); color: #a5f3fc;
box-shadow: 0 0 0 1px rgba(103,232,249,0.35) inset;
}
/* 小屏：两栏改成纵向堆叠，actions 占满第二行 */
@media (max-width: 720px) {
.console-filter { grid-template-columns: 1fr; }
.cf-actions { justify-content: space-between; }
}
/* ===== Pro 版房间卡 ===== */
.room-area { margin-top: 4px; }
.room-pro-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
gap: 14px;
}
.room-pro {
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
padding: 14px 16px;
display: flex; flex-direction: column; gap: 12px;
position: relative;
transition: border-color 0.15s ease, transform 0.15s ease;
}
.room-pro:hover { border-color: rgba(255,255,255,0.18); transform: translateY(-1px); }
.room-pro.is-on { border-color: rgba(103,232,249,0.30); }
.room-pro.is-empty { opacity: 0.78; }
/* ===== 房间卡整卡「空调运行」点亮（2026-07 店主反馈：只亮操控块区分度不够）=====
store.js makeRoomCardPro 按绑定空调运行模式挂 .ac-run + .acm-<模式>；
整卡描边 + 顶部渐变洗色 + 外发光，制冷蓝/制热橙/除湿琥珀/送风青。
「无人但空调开着」的房间同样点亮（覆盖 is-empty 的降透明度），一眼揪出异常。 */
.room-pro.acm-cool { --acm: 96,165,250; }
.room-pro.acm-heat { --acm: 251,146,60; }
.room-pro.acm-dry { --acm: 251,191,36; }
.room-pro.acm-fan_only { --acm: 45,212,191; }
.room-pro.acm-auto, .room-pro.acm-heat_cool { --acm: 103,232,249; }
.room-pro.ac-run,
.room-pro.ac-run:hover {
border-color: rgba(var(--acm, 103,232,249), 0.55);
background:
linear-gradient(180deg, rgba(var(--acm, 103,232,249), 0.07), rgba(var(--acm, 103,232,249), 0.015) 46%, rgba(255,255,255,0.02) 100%);
box-shadow: 0 0 0 1px rgba(var(--acm, 103,232,249), 0.10) inset, 0 12px 34px -16px rgba(var(--acm, 103,232,249), 0.60);
}
.room-pro.is-empty.ac-run { opacity: 1; }
html[data-theme="light"] .room-pro.acm-cool { --acm: 37,99,235; }
html[data-theme="light"] .room-pro.acm-heat { --acm: 234,88,12; }
html[data-theme="light"] .room-pro.acm-dry { --acm: 217,119,6; }
html[data-theme="light"] .room-pro.acm-fan_only { --acm: 13,148,136; }
html[data-theme="light"] .room-pro.acm-auto, html[data-theme="light"] .room-pro.acm-heat_cool { --acm: 8,145,178; }
html[data-theme="light"] .room-pro.ac-run,
html[data-theme="light"] .room-pro.ac-run:hover {
border-color: rgba(var(--acm, 8,145,178), 0.55);
background:
linear-gradient(180deg, rgba(var(--acm, 8,145,178), 0.06), rgba(var(--acm, 8,145,178), 0.012) 46%, #ffffff 100%);
box-shadow: 0 0 0 1px rgba(var(--acm, 8,145,178), 0.08) inset, 0 10px 28px -16px rgba(var(--acm, 8,145,178), 0.40);
}
/* 拖拽重排（仅房间管理页 showCrud=true 时启用） */
.room-pro.is-draggable {
cursor: grab;
}
.room-pro.is-draggable:active { cursor: grabbing; }
.room-pro.is-draggable .rp-ac,
.room-pro.is-draggable button,
.room-pro.is-draggable input,
.room-pro.is-draggable .ac-pad,
.room-pro.is-draggable .rp-tool,
.room-pro.is-draggable .rp-pc {
cursor: auto;
}
.room-pro.is-draggable button,
.room-pro.is-draggable .rp-tool { cursor: pointer; }
.room-pro.dragging { opacity: 0.45; transform: rotate(-1deg) scale(0.99); }
.room-pro.dnd-over-before { box-shadow: -3px 0 0 0 #67e8f9, 0 0 12px rgba(103,232,249,0.35); }
.room-pro.dnd-over-after { box-shadow: 3px 0 0 0 #67e8f9, 0 0 12px rgba(103,232,249,0.35); }
.rp-head {
display: flex; justify-content: space-between; align-items: center;
padding-bottom: 10px; border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.rp-title { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--text); }
.rp-title > svg { color: var(--ink-faded); flex: 0 0 auto; transition: transform 0.3s ease, color 0.2s ease; }
/* 房间名：渐变文字 + 字距 + 微光晕，让"大厅 1-10 / 57-64 包厢"这种朴素标题有质感 */
.rp-title b {
font-weight: 800;
letter-spacing: 1px;
font-size: 15px;
background: linear-gradient(135deg, #ffffff 0%, #d4d4d8 55%, #a1a1aa 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 0 12px rgba(255,255,255,0.10));
transition: background 0.3s ease, filter 0.3s ease, letter-spacing 0.3s ease;
}
.room-pro:hover .rp-title b {
background: linear-gradient(135deg, #ffffff 0%, #e9d5ff 45%, #a855f7 100%);
-webkit-background-clip: text;
background-clip: text;
filter: drop-shadow(0 0 18px rgba(168,85,247,0.30));
letter-spacing: 1.4px;
}
.room-pro:hover .rp-title > svg {
color: #a855f7;
transform: rotate(-8deg) scale(1.08);
}
/* 浅色主题：把渐变换成深色版，避免白底白字 */
html[data-theme="light"] .rp-title b {
background: linear-gradient(135deg, #18181b 0%, #3f3f46 55%, #71717a 100%);
-webkit-background-clip: text;
background-clip: text;
filter: drop-shadow(0 0 8px rgba(0,0,0,0.06));
}
html[data-theme="light"] .room-pro:hover .rp-title b {
background: linear-gradient(135deg, #18181b 0%, #7c3aed 50%, #a855f7 100%);
-webkit-background-clip: text;
background-clip: text;
filter: drop-shadow(0 0 12px rgba(168,85,247,0.25));
}
.rp-badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 10px; border-radius: 999px;
font-size: 11px; font-weight: 600;
white-space: nowrap; /* 防止"有人 5"被挤换行成"有人 / 5" */
flex: 0 0 auto; /* 不被挤压 */
}
.rp-badge.on { background: rgba(74,222,128,0.12); color: #86efac; border: 1px solid rgba(74,222,128,0.30); }
.rp-badge.off { background: rgba(255,255,255,0.04); color: var(--text-muted); border: 1px solid rgba(255,255,255,0.08); }
/* 订座标识：对外订座接口预定进行中（预定开的空调、等顾客上机），任务完成/取消后消除 */
.rp-badge.book { background: rgba(251,191,36,0.14); color: #fcd34d; border: 1px solid rgba(251,191,36,0.35); }
html[data-theme="light"] .rp-badge.book { background: rgba(251,191,36,0.18); color: #92400e; border-color: rgba(180,120,10,0.40); }
/* 季节预设分组徽章（房间卡标题/列表房间名旁）：房间归属的分组名。
非默认组蓝色点亮，默认「一组」灰色低调——扫一眼就能分清哪些房间套了特殊参数。 */
.rp-sg {
display: inline-flex; align-items: center;
padding: 1px 7px;
margin-left: 6px;
border-radius: 999px;
font-size: 10.5px; line-height: 16px; font-weight: 600;
letter-spacing: 0;
white-space: nowrap;
flex: 0 0 auto;
background: rgba(122,162,255,0.12);
color: #a5c0ff;
border: 1px solid rgba(122,162,255,0.32);
}
.rp-sg.def {
background: rgba(255,255,255,0.05);
color: var(--text-muted);
border-color: rgba(255,255,255,0.10);
}
html[data-theme="light"] .rp-sg { background: rgba(59,102,241,0.10); color: #3b5bdb; border-color: rgba(59,102,241,0.32); }
html[data-theme="light"] .rp-sg.def { background: rgba(0,0,0,0.04); color: var(--text-muted); border-color: rgba(0,0,0,0.10); }
/* v2.x 起 PC↔空调自动联动已下线，相关 .rp-title.linked / .room-name-linked
样式已删除（房间名不再有"已联动"vs"普通"两态）。 */
/* 无人占位 */
.rp-empty {
text-align: center; padding: 24px 12px;
display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.rp-empty-icon { color: var(--text-muted); opacity: 0.6; }
.rp-empty-text { font-size: 16px; font-weight: 600; color: var(--text-muted); margin-top: 6px; }
.rp-empty-sub { font-size: 11.5px; color: var(--text-muted); opacity: 0.7; }
/* PC mini grid */
.rp-pc-section { display: flex; flex-direction: column; gap: 8px; }
.rp-section-head {
display: flex; justify-content: space-between; align-items: center;
font-size: 11.5px; color: var(--text-muted); letter-spacing: 0.3px;
}
.rp-section-title {
font-weight: 600; color: var(--text); text-transform: uppercase;
}
.rp-pc-stats { display: inline-flex; gap: 10px; align-items: center; }
.rp-pc-stat {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 6px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
background: rgba(255,255,255,0.04);
}
.rp-pc-stat.on { color: #d1fae5; background: rgba(74,222,128,0.14); }
.rp-pc-stat.off { color: var(--text-muted); }
.rp-pc-stat.offline { color: #fda4af; background: rgba(244,63,94,0.10); }
.rp-pc-hint {
display: inline-flex; align-items: center; gap: 4px;
margin-top: 4px;
font-size: 11px;
}
.rp-pc-hint svg { color: currentColor; opacity: 0.7; }
/* PC 网格：固定双行高度——
- 少于 2 行的房间也撑到 2 行（与多机房间视觉对齐）
- 多于 2 行的房间出现内部滚动条（不再挤垮整张卡片）
- 行高用 CSS 变量统一，方便日后微调 */
.rp-pc-grid {
--rp-pc-row-h: 40px;
--rp-pc-gap: 5px;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: var(--rp-pc-row-h);
gap: var(--rp-pc-gap);
/* 锁死 2 行可视高度：min=max 双向夹紧 */
min-height: calc(var(--rp-pc-row-h) * 2 + var(--rp-pc-gap));
max-height: calc(var(--rp-pc-row-h) * 2 + var(--rp-pc-gap));
overflow-y: auto;
scrollbar-gutter: stable; /* 有/无滚动条时不抖动 */
align-content: start; /* 不足两行时贴顶，下半留空 */
}
.rp-pc-grid::-webkit-scrollbar { width: 6px; }
.rp-pc-grid::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.16);
border-radius: 3px;
}
.rp-pc-grid::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.26); }
.rp-pc {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
padding: 4px 2px; border-radius: 6px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
font-size: 10.5px;
color: var(--text-muted);
position: relative;
min-width: 0; /* 配合 grid，让 ellipsis 生效 */
overflow: hidden;
}
.rp-pc-name {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 100%;
}
.rp-pc.on { background: rgba(74,222,128,0.18); border-color: rgba(74,222,128,0.42); color: #d1fae5; }
.rp-pc.on .rp-pc-ico { color: #4ade80; }
.rp-pc.offline { background: rgba(244,63,94,0.10); border-color: rgba(244,63,94,0.28); color: #fda4af; }
.rp-pc.offline .rp-pc-ico { color: #f43f5e; }
.rp-pc.more {
display: grid; place-items: center;
background: rgba(255,255,255,0.06); color: var(--text-muted);
font-weight: 600;
}
.rp-pc-ico { color: var(--text-muted); line-height: 0; }
.rp-pc-name { font-weight: 600; letter-spacing: 0.3px; }
/* 空调控制面板 */
.rp-ac {
margin-top: 2px; padding: 12px 14px;
border-radius: 10px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
display: flex; flex-direction: column; gap: 10px;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.rp-ac-empty { padding: 8px; text-align: center; opacity: 0.6; }
/* ===== 空调操控器开/关一眼可辨（2026-07 店主反馈：状态不够明显）=====
device-render.js 按运行模式给 .rp-ac 挂 .is-running + .m-<模式> / .is-off；
运行中整块按模式着色（边框+渐变浅底+状态胶囊高亮），关着保持中性灰。
与 device-render.css 中同名段落保持一致（顾客页独立加载那份副本）。 */
.rp-ac.m-cool { --acm: 96,165,250; --acm-ink: #93c5fd; }
.rp-ac.m-heat { --acm: 251,146,60; --acm-ink: #fdba74; }
.rp-ac.m-dry { --acm: 251,191,36; --acm-ink: #fcd34d; }
.rp-ac.m-fan_only { --acm: 45,212,191; --acm-ink: #5eead4; }
.rp-ac.m-auto, .rp-ac.m-heat_cool { --acm: 103,232,249; --acm-ink: #a5f3fc; }
.rp-ac.is-running {
border-color: rgba(var(--acm, 103,232,249), 0.42);
background: linear-gradient(180deg, rgba(var(--acm, 103,232,249), 0.09), rgba(var(--acm, 103,232,249), 0.02));
box-shadow: 0 0 0 1px rgba(var(--acm, 103,232,249), 0.10) inset, 0 6px 22px -10px rgba(var(--acm, 103,232,249), 0.45);
}
.rp-ac.is-running .ac-pad-state.on {
background: rgba(var(--acm, 103,232,249), 0.16);
color: var(--acm-ink, #a5f3fc);
border-color: rgba(var(--acm, 103,232,249), 0.48);
font-weight: 700;
}
.rp-ac.is-running .ac-pad-state .dot {
background: rgb(var(--acm, 103,232,249));
box-shadow: 0 0 6px rgba(var(--acm, 103,232,249), 0.60);
}
/* 关机态：状态胶囊给足对比（描边加深 + 文字提亮一档），不再和背景融为一体 */
.rp-ac.is-off .ac-pad-state {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.16);
color: var(--text);
opacity: 0.75;
}
html[data-theme="light"] .rp-ac.m-cool { --acm: 37,99,235; --acm-ink: #1d4ed8; }
html[data-theme="light"] .rp-ac.m-heat { --acm: 234,88,12; --acm-ink: #c2410c; }
html[data-theme="light"] .rp-ac.m-dry { --acm: 217,119,6; --acm-ink: #b45309; }
html[data-theme="light"] .rp-ac.m-fan_only { --acm: 13,148,136; --acm-ink: #0f766e; }
html[data-theme="light"] .rp-ac.m-auto, html[data-theme="light"] .rp-ac.m-heat_cool { --acm: 8,145,178; --acm-ink: #0e7490; }
html[data-theme="light"] .rp-ac.is-running {
border-color: rgba(var(--acm, 8,145,178), 0.50);
background: linear-gradient(180deg, rgba(var(--acm, 8,145,178), 0.07), rgba(var(--acm, 8,145,178), 0.015));
box-shadow: 0 0 0 1px rgba(var(--acm, 8,145,178), 0.08) inset, 0 6px 18px -10px rgba(var(--acm, 8,145,178), 0.35);
}
html[data-theme="light"] .rp-ac.is-running .ac-pad-state.on {
background: rgba(var(--acm, 8,145,178), 0.12);
color: var(--acm-ink, #0e7490);
border-color: rgba(var(--acm, 8,145,178), 0.45);
}
html[data-theme="light"] .rp-ac.is-off .ac-pad-state {
background: rgba(0,0,0,0.05);
border-color: rgba(0,0,0,0.16);
color: var(--ink);
opacity: 0.75;
}
/* ===== 房间卡内嵌「绑定设备」区（v3.x：空调 + 任意设备卡片）===== */
.rp-devices { margin-top: 8px; }
.rp-dev-card { margin-top: 6px; }
.rp-dev-head {
display: flex; align-items: center; gap: 6px;
font-size: 12px; margin-bottom: 4px;
}
.rp-dev-head .rp-dev-ico { display: inline-flex; opacity: 0.8; }
.rp-dev-head .rp-dev-name { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-dev-scope {
font-size: 10px; padding: 1px 7px; border-radius: 999px;
border: 1px solid rgba(255,255,255,0.14); opacity: 0.85; white-space: nowrap;
}
.rp-dev-scope.room { background: rgba(103,232,249,0.12); color: #67e8f9; border-color: rgba(103,232,249,0.30); }
.rp-dev-scope.pcs { background: rgba(250,204,21,0.12); color: #facc15; border-color: rgba(250,204,21,0.30); }
.rp-dev-body { }
/* 多卡：下拉组合框选择 + 按机位机位标注 */
.rp-dev-sel .rp-dev-combo { margin-bottom: 8px; }
.rp-dev-pcs { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 1px 0 7px; }
.rp-dev-pcs-lbl { font-size: 11px; color: var(--text-muted); }
.rp-dev-pcchip {
font-size: 11px; padding: 2px 8px; border-radius: 6px; white-space: nowrap;
border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: var(--text-muted);
}
.rp-dev-pcchip.on { background: rgba(74,222,128,0.14); color: #4ade80; border-color: rgba(74,222,128,0.35); }
.rp-dev-pcchip.offline { opacity: 0.5; }
html[data-theme="light"] .rp-dev-pcchip { background: rgba(0,0,0,0.03); }
/* 多卡：紧凑标签页 */
.rp-dev-tabbar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.rp-dev-tab {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; padding: 3px 8px; border-radius: 6px;
border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04);
color: var(--text-muted); cursor: pointer; max-width: 130px;
}
.rp-dev-tab .rp-dev-tab-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-dev-tab:hover { border-color: rgba(255,255,255,0.20); }
.rp-dev-tab.active {
background: rgba(103,232,249,0.12); color: #67e8f9;
border-color: rgba(103,232,249,0.35);
}
html[data-theme="light"] .rp-dev-tab { background: rgba(0,0,0,0.03); }
/* ===== 设备绑定管理 modal ===== */
.rbind-modal .rbind-head { font-weight: 600; font-size: 13px; margin: 10px 0 6px; }
.rbind-modal .rbind-sep { height: 1px; background: rgba(255,255,255,0.10); margin: 12px 0; }
.rbind-row {
display: flex; align-items: center; gap: 8px;
padding: 7px 8px; border-radius: 7px;
border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03);
margin-bottom: 6px;
}
.rbind-info { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.rbind-info .rbind-card { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rbind-acts { display: flex; gap: 4px; flex-shrink: 0; }
.rbind-acts .ghost.small.on { background: rgba(103,232,249,0.14); color: #67e8f9; border-color: rgba(103,232,249,0.35); }
.rbind-pcs { display: flex; flex-wrap: wrap; gap: 5px; padding: 2px 4px 10px 4px; }
.rbind-pc {
font-size: 11px; padding: 3px 9px; border-radius: 6px; cursor: pointer;
border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: var(--text-muted);
}
.rbind-pc.on { background: rgba(250,204,21,0.14); color: #facc15; border-color: rgba(250,204,21,0.35); }
/* 可拖拽排序的绑定项 */
.rbind-item { margin-bottom: 6px; border-radius: 7px; }
.rbind-item > .rbind-row { margin-bottom: 0; }
.rbind-item.dragging { opacity: 0.45; }
.rbind-drag {
cursor: grab; user-select: none; flex-shrink: 0;
color: var(--text-muted); font-size: 14px; line-height: 1; padding: 0 2px;
}
.rbind-item[draggable="true"]:hover .rbind-drag { color: var(--text); }
.rbind-item.dragging .rbind-drag { cursor: grabbing; }
.rbind-add { display: flex; gap: 8px; align-items: center; }
/* 二级筛选：标签下拉（定宽）+ 设备卡片下拉（占满）。均为 UI.combo 包裹元素，
视觉由内部 .combo-trigger 负责，这里只管布局宽度。 */
.rbind-tabsel { flex: 0 0 132px; min-width: 0; }
.rbind-select { flex: 1; min-width: 0; }
.ac-pad-head {
display: flex; align-items: center; gap: 10px;
flex-wrap: wrap;
}
.ac-pad-state {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 10px; border-radius: 999px;
font-size: 12px; font-weight: 500;
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
color: var(--text-muted);
}
.ac-pad-state.on { background: rgba(103,232,249,0.12); color: #a5f3fc; border-color: rgba(103,232,249,0.32); }
.ac-pad-cur { font-size: 12px; color: var(--text-muted); }
.ac-pad-cur b { color: var(--text); font-size: 13px; }
.ac-pad-title { font-size: 13px; font-weight: 600; color: var(--text); margin-right: 2px; }
.ac-pad-power {
margin-left: auto;
display: inline-flex; align-items: center; gap: 4px;
padding: 5px 12px; border-radius: 999px;
font-size: 11.5px; font-weight: 600;
background: rgba(255,255,255,0.06); color: var(--text-muted);
border: 1px solid rgba(255,255,255,0.10);
cursor: pointer;
}
.ac-pad-power.on {
background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff;
border-color: rgba(249,115,22,0.45);
box-shadow: 0 4px 14px rgba(249,115,22,0.30);
}
.ac-pad-power:hover { filter: brightness(1.1); }
.ac-pad-temp {
display: grid; grid-template-columns: 44px 1fr 44px;
align-items: center; gap: 6px;
}
.ac-pad-btn {
width: 44px; height: 44px; border-radius: 50%;
/* flex 居中：- 和 + 这两个字形的基线本身就偏上，纯靠 line-height 居中肉眼会觉得"向上飘"。
padding:0 抹掉浏览器对