/* ============================================================
   Konec Web · Pro 主题（Console 工具风）
   shadcn / Linear / GitHub 风：单字体 · 近黑强调 · 中性灰 · 描边优先 · 紧凑密度
   换皮只改本文件的 :root token；类名与 app.js 保持不动。
   ============================================================ */
@font-face { font-family: "Sharp Sans Display No1"; src: url("/fonts/SharpSansDispNo1-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Sharp Sans Display No1"; src: url("/fonts/SharpSansDispNo1-Semibold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Sharp Sans Display No1"; src: url("/fonts/SharpSansDispNo1-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }

* { box-sizing: border-box; }
:root {
  /* 表面 / 中性（原名保留，值换成 pro-theme） */
  --bg: #faf8f6;            /* 页面底 —— 暖调米白 */
  --panel: #ffffff;         /* 表面：卡片/侧栏/头部/弹窗 */
  --panel2: #f4f4f5;        /* 次级面：hover / 输入区外 / chip 底 */
  --border: #e4e4e7;        /* hairline 描边（输入/分隔线） */
  --card-border: #f4f2f0;   /* 卡片描边 —— 暖调 hairline */
  --shell: #2e2e2e;         /* 外壳炭灰：浮起内容面板/侧栏之间的底 */
  --border-soft: #efeff1;   /* 更弱分隔线 */
  --border-strong: #d4d4d8; /* hover 描边 */

  /* 文字 */
  --text: #18181b;          /* ink 主文字 */
  --text2: #52525b;         /* 次要文字 */
  --muted: #71717a;         /* 弱文字 / 表头 */

  /* 强调 = 近黑（只给主 CTA / 关键强调；彩色留给状态语义） */
  --accent: #18181b;
  --accent2: #18181b;
  --brand-tint: #f4f4f5;
  --on-brand: #ffffff;

  /* 状态语义色（编码含义，两端一致） */
  --green: #10b981;  --green-bg: rgba(16,185,129,.12);
  --red:   #ef4444;  --red-bg:   rgba(239,68,68,.12);
  --amber: #f59e0b;  --amber-bg: rgba(245,158,11,.12);
  --info:  #607feb;  --info-bg:  rgba(96,127,235,.12);

  /* Dashboard 数据可视化：统一单色墨阶（高级简约，黑白灰），不再用分域彩色 */
  --viz-fill:   #18181b;   /* 主填充：近黑 —— 占用/在线/待处理 */
  --viz-fill-2: #a1a1aa;   /* 次填充：中灰 */
  --viz-fill-3: #d4d4d8;   /* 弱填充：浅灰 —— 空置/离线/已完成 */
  --viz-track:  #ececee;   /* 轨道底 */

  /* 圆角（紧凑） */
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;

  /* 描边优先的 elevation + 聚焦环 + 遮罩 */
  --elev-1: 0 0 0 1px var(--card-border);
  --elev-2: 0 0 0 1px var(--border-strong), 0 1px 2px rgba(24,24,27,.04);
  --elev-3: 0 0 0 1px var(--border), 0 16px 40px -12px rgba(24,24,27,.25);
  --focus-ring: 0 0 0 3px rgba(24,24,27,.1);
  --overlay: rgba(0,0,0,.4);

  --font: "Sharp Sans Display No1", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font); font-size: 13px; line-height: 1.5; font-weight: 500;
  background: var(--bg); color: var(--text); display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
/* 表单控件默认不继承 body 字体 —— 全局指定 SSD，让按钮/下拉/输入统一（JSON/代码类 textarea 仍单独用 --mono）。 */
button, select, input { font-family: var(--font); }

/* ============ 侧栏品牌区（原顶栏 <header> 移入侧栏顶部） ============ */
/* 品牌区：Logo 与平台名同一行（flex 行；折叠态只剩居中的 Logo） */
.side-brand { padding: 18px 16px 14px; display: flex; align-items: center; gap: 10px; }
.side-brand h1 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin: 0; line-height: 1.3; color: var(--text); min-width: 0; }
.side-brand .status { margin-top: 10px; font-size: 12px; color: var(--muted); font-weight: 600; }
.side-brand .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-right: 6px; }
.side-brand .dot.on { background: var(--green); }
.side-brand .brand-logo { flex: 0 0 auto; height: 28px; max-width: 84px; object-fit: contain; display: block; }
.side-foot { padding: 10px 12px 12px; border-top: 1px solid var(--border); }
.side-foot .btn { width: 100%; }

/* ============ 布局 ============ */
/* 外壳炭灰底：侧栏贴左、内容面板浮起于其上（shell + 浮起 main 卡） */
.layout { flex: 1; display: flex; min-height: 0; background: var(--shell); }
body.inspector-collapsed .inspector { display: none; }
body.on-dashboard .inspector { display: none; }   /* Dashboard 全宽，不占 420px 给 API 日志 */
/* 侧栏容器：品牌区(顶) + 可滚动 nav(中) + API Log 开关(底)。炭灰 token 挂在这里，子元素继承。 */
.sidebar {
  width: 240px; flex-shrink: 0; display: flex; flex-direction: column; min-height: 0;
  background: var(--panel); color: var(--text);
  /* 炭灰侧栏：面板 #2e2e2e，分层灰阶 hover/active/border。
     「选中只改背景、文字色不变」：所有状态文字+图标同一暖近白，选中/hover 仅靠背景 pill 区分。 */
  --panel: #2e2e2e;                    /* 面板底：中性炭灰（与外壳一致） */
  --bg: #3d3b38;                       /* hover 底：略提亮 */
  --brand-tint: #4a4744;               /* 选中底：暖灰 pill —— 唯一区分选中的方式 */
  --border: #565452;
  --text: #e6e2da;                     /* 统一文字+图标色（各状态不变） */
  --text2: #e6e2da;                    /* 未选中 = 选中，同色 */
  --muted: #e6e2da;                    /* 模块/子项+图标 同色 */
  --accent: #e6e2da;
}
nav {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px 10px;
  display: flex; flex-direction: column;   /* 便于把底部组(modbar-end)推到侧栏底 */
}
nav button {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 10px 12px; margin-bottom: 4px; height: 42px;
  background: none; border: none; border-radius: var(--r-sm); color: var(--text2); cursor: pointer;
  /* <button> 默认不继承 body 字体 —— 显式指定，否则侧栏用系统默认字体 */
  font-family: var(--font);
  font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: 120ms;
}
nav button > span { overflow: hidden; text-overflow: ellipsis; }
nav button:hover { background: var(--bg); color: var(--text); }
nav button.active { background: var(--brand-tint); color: var(--text); }
/* 顶层模块切换条 */
.modbar { display: flex; flex-direction: column; gap: 4px; }
/* 底部组：贴侧栏底部（无分隔线，靠间距区分） */
.modbar.modbar-end { margin-top: auto; padding-top: 14px; }
.modbar .modbtn { font-size: 14.5px; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--muted); }
.modbar .modbtn.active { color: var(--text); background: var(--brand-tint); }
nav .modbar button { margin-bottom: 2px; }
/* 左侧栏二级菜单：父级带展开箭头，子项缩进 */
.modbtn.has-children .nav-chevron { margin-left: auto; display: inline-flex; align-items: center; color: var(--muted); transition: transform 120ms; }
.modbtn.has-children .nav-chevron.open { transform: rotate(180deg); }
/* 子菜单展开/收起过场：grid-template-rows 0fr↔1fr 平滑动画 height:auto */
.nav-submenu { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 220ms cubic-bezier(.4,0,.2,1); }
.nav-submenu.open { grid-template-rows: 1fr; }
.nav-submenu-inner { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 4px; }
.nav-submenu.open .nav-submenu-inner { padding: 3px 0 6px; }
.nav-submenu .submenu-item { height: 38px; padding-left: 40px; font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); }
.nav-submenu .submenu-item:hover { color: var(--text); }
/* 子项选中：加粗变深 + 前置小圆点，不用填充底色，与父级（灰底+描边）区分 */
.nav-submenu .submenu-item { position: relative; }
.nav-submenu .submenu-item.active { color: var(--text); font-weight: 700; background: none; box-shadow: none; }
.nav-submenu .submenu-item.active::before { content: ''; position: absolute; left: 22px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* 浮起的内容面板：暖米白底 + 暖 hairline 描边 + 圆角，浮在炭灰 shell 上。
   内部 = 顶部标题条(.page-header) + 可滚动内容(.content-body)。 */
main.content {
  flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden;
  margin: 8px; border-radius: var(--r-lg); border: 1px solid var(--card-border);
  background: var(--bg); box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.content-body { flex: 1; overflow: auto; padding: 24px; min-width: 0; }
/* 页面自身的首个 H2 标题交给顶部标题条展示，避免重复 */
.content-body > h2:first-child { display: none; }
/* 面板内顶部标题条：折叠钮 + 竖分隔 + 返回 + 页面标题 + 右侧动作；底部 hairline = 标题下方 divider */
.page-header {
  flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 10px 20px; border-bottom: 1px solid var(--border-strong);
}
.ph-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border: none; background: none; border-radius: var(--r-sm); color: var(--muted); cursor: pointer; transition: 120ms; flex-shrink: 0;
}
.ph-toggle:hover { background: var(--panel2); color: var(--text); }
.ph-divider { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; }
/* 标题 + 其下描述堆叠成一列，整体可省略号收缩 */
.ph-titles { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.ph-title { font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin: 0; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-subtitle { font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* 通知中心：铃铛 + 未读红点计数 + 下拉面板 */
.ph-bell-wrap { position: relative; flex-shrink: 0; }
.ph-bell-badge { position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
.notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 380px; max-width: calc(100vw - 32px);
  max-height: min(560px, 72vh); overflow: auto; scrollbar-width: none;
  background: var(--panel); border: 1px solid var(--card-border); border-radius: var(--r-lg); box-shadow: var(--elev-3);
  animation: flyIn 120ms cubic-bezier(.2,.9,.2,1) both;
}
.notif-panel::-webkit-scrollbar { display: none; }
.notif-head { position: sticky; top: 0; background: var(--panel); display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); }
.notif-head h4 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.notif-head .n { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--panel2); border-radius: 999px; padding: 1px 8px; }
.notif-list { display: flex; flex-direction: column; }
.notif-item { display: flex; gap: 11px; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); cursor: pointer; transition: background 120ms; }
.notif-item:hover { background: var(--panel2); }
.notif-item:last-child { border-bottom: none; }
.notif-ico { flex-shrink: 0; display: inline-flex; margin-top: 1px; }
.notif-body { min-width: 0; flex: 1; }
.notif-title { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-snip { font-size: 12px; color: var(--text2); line-height: 1.5; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-time { font-size: 11px; color: var(--muted); margin-top: 4px; }
.notif-empty { padding: 36px 16px; text-align: center; color: var(--muted); font-size: 13px; }
.notif-foot { position: sticky; bottom: 0; background: var(--panel); padding: 10px 16px; border-top: 1px solid var(--border-soft); }
.notif-foot button { width: 100%; background: none; border: none; color: var(--text2); font-family: var(--font); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px; border-radius: var(--r-sm); }
.notif-foot button:hover { color: var(--text); background: var(--panel2); }
/* 折叠：侧栏收成 icon-only 窄栏（保留图标，隐藏文字/品牌文字/箭头/状态/底部按钮）→ 右侧内容卡随之变宽 */
body.sidebar-collapsed .sidebar { width: 64px; }
body.sidebar-collapsed .side-brand { padding: 16px 0; justify-content: center; gap: 0; }
body.sidebar-collapsed .side-brand h1,
body.sidebar-collapsed .side-brand .status,
body.sidebar-collapsed .side-foot { display: none; }
body.sidebar-collapsed nav button > span { display: none; }
body.sidebar-collapsed .modbtn.has-children .nav-chevron { display: none; }
body.sidebar-collapsed nav button { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }

/* 侧栏子菜单浮层（flyout）：点有子项的模块从右侧弹出，炭灰风格延续侧栏。挂在 body（fixed，不被 nav 裁切）。 */
.nav-flyout {
  position: fixed; z-index: 60; min-width: 210px;
  background: #2e2e2e; border: 1px solid #565452; border-radius: 12px;
  padding: 6px; display: flex; flex-direction: column; gap: 3px;
  box-shadow: 0 14px 36px rgba(0,0,0,.45);
  animation: flyIn 120ms cubic-bezier(.2,.9,.2,1) both;
}
@keyframes flyIn { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
.nav-flyout .fly-head { font-size: 12px; font-weight: 700; letter-spacing: -.01em; color: #9a9a9a; padding: 7px 10px 5px; }
.nav-flyout button {
  display: flex; align-items: center; width: 100%; text-align: left; height: 38px; padding: 0 12px;
  border: none; background: none; border-radius: 8px; color: #e6e2da; cursor: pointer;
  font-family: var(--font); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: 120ms;
}
.nav-flyout button:hover { background: #3d3b38; }
.nav-flyout button.active { background: #4a4744; }
.inspector {
  width: 420px; flex-shrink: 0; background: var(--panel);
  margin: 8px 8px 8px 0; border: 1px solid var(--card-border); border-radius: var(--r-lg);
  padding: 16px; overflow: auto; display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.inspector h3 { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.inspector pre {
  background: var(--panel2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px;
  margin: 0; font-family: var(--mono); font-size: 12px; color: var(--text2); white-space: pre-wrap; word-break: break-all; max-height: 45vh; overflow: auto;
}
.inspector .meta { font-size: 12px; color: var(--muted); }

/* ============ 排版 ============ */
h2 { font-size: 20px; font-weight: 700; letter-spacing: -.014em; margin: 0 0 16px; }
.card { background: var(--panel); border: 1px solid var(--card-border); border-radius: var(--r-md); padding: 16px; margin-bottom: 16px; }
.card h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 8px; }
.muted { color: var(--muted); }

/* 通用统计小块（社区/维修等模块复用，statBig/mrStat） */
.stat-row { display: flex; gap: 28px; flex-wrap: wrap; }
.stat-num { font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--text); letter-spacing: -.02em; }
.stat-label { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 3px; }
/* 通用进度条（OTA 等模块复用） */
.dash-bar { height: 8px; border-radius: var(--r-pill); background: var(--panel2); overflow: hidden; }
.dash-bar > i { display: block; height: 100%; background: var(--green); border-radius: var(--r-pill); transition: width 240ms; }

/* ============ Dashboard 数据可视化看板 ============ */
/* 固定 3 列（宽屏），中屏 2 列、窄屏 1 列。6 张卡正好 3+3，避免 auto-fit 在宽屏排成 5 列后末卡落单、
   且行内卡片等宽、参差留白更小。minmax(0,1fr) 防长文本（如中文门禁点名）撑破列宽。 */
/* 等高网格：固定 3 列（宽屏），中屏 2 列、窄屏 1 列。grid-auto-rows:1fr + 卡片 height:100%
   使所有卡片行高一致、彼此等高（卡内 margin-top:auto 的页脚/入口自然贴底）。 */
.viz-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 18px; align-items: stretch; }
@media (max-width: 1180px) { .viz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .viz-grid { grid-template-columns: 1fr; } }

/* Hero 问候区：时段问候大标题 + 当日日期 */
.dash-hero { margin: 2px 0 22px; }
.dash-hello { font-size: 25px; font-weight: 800; letter-spacing: -.02em; color: var(--text); line-height: 1.15; }
.dash-date { font-size: 13px; margin-top: 4px; }
/* 每卡：分域强调色由内联 --accent 提供；--track 为该色的浅色底（环/条的背景轨道） */
.viz-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--card-border); border-radius: var(--r-lg); padding: 18px;
  transition: border-color 160ms, box-shadow 160ms;
  animation: vizIn 440ms cubic-bezier(.4,0,.2,1) both;
  min-height: 210px; height: 100%;   /* 等高：随网格行拉伸，与同行卡片一致 */
}
.viz-card.wide { grid-column: span 2; }
@media (max-width: 720px) { .viz-card.wide { grid-column: span 1; } }
/* 平静的卡片：不做上浮/投影，hover 仅描边略深 */
.viz-card:hover { border-color: var(--border); }
/* 表头：图标 chip + 标题，清晰锚点（运营一眼识别域） */
.viz-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.viz-head h3 { margin: 0; font-size: 13.5px; font-weight: 600; text-transform: none; letter-spacing: -.005em; color: var(--text2); }
.viz-ico { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--panel2); color: var(--text2); }
.viz-refresh { margin-left: auto; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 4px; border-radius: var(--r-sm); opacity: .55; transition: 120ms; }
.viz-refresh:hover { color: var(--text); background: var(--panel2); opacity: 1; transform: rotate(90deg); }
/* 内容直接落在卡面上（不再套内层面板）：靠 表头 → 主指标 → 页脚 建立层级 */
.viz-body { min-height: 120px; flex: 1; display: flex; flex-direction: column; }
.viz-skel { height: 120px; border-radius: var(--r-sm); background: linear-gradient(100deg, var(--panel2) 30%, var(--border-soft) 50%, var(--panel2) 70%); background-size: 200% 100%; animation: vizSkel 1.1s infinite; }
/* 页脚：贴卡片底部，上方一条暖 hairline 分隔 */
.viz-foot { font-size: 11px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--card-border); }
@keyframes vizIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes vizSkel { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* 环形仪表 */
.gauge { position: relative; width: 128px; height: 128px; margin: 2px auto 4px; }
.ring { display: block; width: 128px; height: 128px; }
.ring-arc { transition: stroke-dashoffset 900ms cubic-bezier(.34,1.1,.4,1); }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-val { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }

/* 大数字统计块 */
.big-stat { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.big-num { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--text); }
.big-cap { font-size: 12px; font-weight: 600; }

/* 分段条（2px 表面间隙；进场从 0 展开） */
.seg-bar { display: flex; gap: 2px; height: 10px; border-radius: var(--r-pill); overflow: hidden; margin: 14px 0 12px; background: var(--viz-track); }
/* 限定在 .seg-bar 内：.seg 这个类名同时被分段按钮组用着（见下方 .seg button），
   不限定的话 width:0 会漏过去把按钮组压扁 */
.seg-bar > .seg { width: 0; height: 100%; border-radius: 2px; transition: width 800ms cubic-bezier(.4,0,.2,1); }
.seg-bar > .seg:first-child { border-radius: var(--r-pill) 2px 2px var(--r-pill); }
.seg-bar > .seg:last-child { border-radius: 2px var(--r-pill) var(--r-pill) 2px; }

/* 图例 */
.viz-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.viz-legend .lg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.viz-legend .lg-sw { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.viz-legend .lg-lb { color: var(--muted); }
.viz-legend .lg-vl { font-weight: 700; color: var(--text); }

/* 当日入住时间轴 */
.timeline { margin: 16px 0 6px; }
.tl-line { position: relative; height: 3px; border-radius: var(--r-pill); background: var(--viz-track); margin: 14px 2px; }
.tl-dot { position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--panel); border: 2px solid var(--viz-fill); box-shadow: 0 0 0 2px var(--panel); cursor: default; transition: transform 120ms; }
.tl-dot.done { background: var(--viz-fill); }
.tl-dot:hover { transform: translate(-50%, -50%) scale(1.35); z-index: 2; }
.tl-now { position: absolute; top: -5px; bottom: -5px; width: 2px; height: 13px; transform: translateX(-50%); background: var(--text); border-radius: 2px; opacity: .55; }
.tl-axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* CCTV 相机预览格 */
.cam-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
@media (max-width: 520px) { .cam-grid { grid-template-columns: repeat(2, 1fr); } }
.cam-tile { position: relative; aspect-ratio: 16/10; border-radius: var(--r-sm); cursor: pointer; overflow: hidden;
  display: flex; align-items: center; justify-content: center; color: #8b8b93;
  background: linear-gradient(135deg, #1c1c22, #101014); transition: 140ms; }
.cam-tile:hover { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
.cam-live { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.35); animation: camPulse 2s ease-in-out infinite; }
.cam-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; font-size: 10px; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.6)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes camPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* 卡片详情入口：固定在卡片右下角（margin-top:auto 顶到底 + 右对齐） */
.dash-cta { margin-top: auto; padding-top: 16px; display: flex; justify-content: flex-end; }
/* Dashboard 卡内列表 */
.dash-list { display: flex; flex-direction: column; }
.dash-li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border-soft); }
.dash-li:first-child { border-top: none; padding-top: 2px; }
.dash-li-main { min-width: 0; flex: 1; }
.dash-li-title { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-li-sub { font-size: 11px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-li .tag { margin-left: auto; flex-shrink: 0; }
/* 门禁远程开门列表 */
.dash-open { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.dash-open-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.dash-open-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.dash-open-main { min-width: 0; flex: 1; }
.dash-open-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-open-sub { font-size: 11px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 门禁开门按钮：统一描边风（默认透明描边，hover 填近黑），不做实心彩色 */
.dash-open-row .btn { flex-shrink: 0; background: transparent; color: var(--text); border-color: var(--border-strong); }
.dash-open-row .btn:hover { background: var(--text); color: #fff; border-color: var(--text); opacity: 1; }
.dash-open-row .btn[disabled] { opacity: .55; cursor: default; }
/* 进场动画错峰；尊重减少动效 */
.viz-card:nth-child(1) { animation-delay: 40ms; }
.viz-card:nth-child(2) { animation-delay: 85ms; }
.viz-card:nth-child(3) { animation-delay: 130ms; }
.viz-card:nth-child(4) { animation-delay: 175ms; }
.viz-card:nth-child(5) { animation-delay: 220ms; }
.viz-card:nth-child(6) { animation-delay: 265ms; }
@media (prefers-reduced-motion: reduce) {
  .viz-card { animation: none; }
  .ring-arc, .seg, .tl-dot, .cam-tile, .cam-live, .viz-refresh { transition: none; animation: none; }
}

/* ============ Notifications ============ */
/* 新建通知表单 */
.noti-grid { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.noti-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text2); }
.noti-field-label { font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 8px; }
.noti-compose textarea { width: 100%; min-width: 0; min-height: 72px; font-family: var(--font); font-size: 13px; font-weight: 500; }
.noti-deliver { margin-top: 16px; }
/* 投递渠道切换 chip（多选） */
.noti-ch { cursor: pointer; user-select: none; color: var(--text2); transition: 120ms; }
.noti-ch::before { content: '○'; font-size: 11px; line-height: 1; }
.noti-ch:hover { border-color: var(--border-strong); }
.noti-ch.on { border-color: var(--accent); background: var(--brand-tint); color: var(--text); }
.noti-ch.on::before { content: '●'; }

/* 公告类型：彩色分类 chip（图标+文字同色，淡底由文字色自动派生）+ 编辑/看板处的彩色图标。
   颜色类见 .tag 规则之后（需排在 .tag{color} 后才能覆盖基础色）。 */
.tag.noti-type-tag { display: inline-flex; align-items: center; gap: 4px; background: color-mix(in srgb, currentColor 13%, transparent); }
.noti-type-preview { display: inline-flex; align-items: center; }

/* 已发布列表项 */
.noti-item { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px; margin-bottom: 10px; }
.noti-item:last-child { margin-bottom: 0; }
.noti-item.noti-cancelled { opacity: .55; }
/* 新建公告弹窗：分节小标题 + 表单 */
.noti-section-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 20px 0 10px; }
.noti-form > .noti-section-label:first-child { margin-top: 0; }
.noti-form textarea { width: 100%; min-width: 0; min-height: 84px; font-family: var(--font); font-size: 13px; font-weight: 500; line-height: 1.6; }
/* 公告类型选择器：彩色圆点 + 名称的卡片式单选（t.cc 提供 currentColor） */
.noti-type-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.noti-type-opt { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1.5px solid var(--border); border-radius: var(--r-pill); background: var(--panel); cursor: pointer; transition: 120ms; }
.noti-type-opt:hover { border-color: var(--border-strong); }
.noti-type-opt.sel { border-color: currentColor; background: color-mix(in srgb, currentColor 9%, var(--panel)); }
.noti-type-opt-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: currentColor; }
.noti-type-opt-label { font-size: 12.5px; font-weight: 600; color: var(--text2); }
.noti-type-opt.sel .noti-type-opt-label { color: var(--text); font-weight: 700; }
/* 已发布列表：卡片 feed（Active / Past 分组） */
.noti-feed { display: flex; flex-direction: column; gap: 10px; }
.noti-feed-item { position: relative; display: flex; gap: 12px; padding: 14px 16px; border: 1px solid var(--card-border); border-radius: var(--r-md); background: var(--panel); }
.noti-feed-item.noti-cancelled { opacity: .6; }
.noti-feed-item.clickable { cursor: pointer; transition: border-color 120ms, box-shadow 120ms; }
.noti-feed-item.clickable:hover { border-color: var(--border-strong); box-shadow: 0 1px 3px rgba(24,24,27,.05); }
.noti-feed-main { min-width: 0; flex: 1; }
.noti-feed-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; }
.noti-feed-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.noti-feed-title { font-size: 14.5px; font-weight: 600; color: var(--text); }
.noti-feed-time { margin-left: auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.noti-feed-body { font-size: 13px; color: var(--text2); line-height: 1.65; margin-top: 5px; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.noti-feed-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.noti-feed-actions { display: flex; gap: 6px; margin-left: auto; }
textarea:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }

/* ============ 表单 ============ */
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text2); }
input, select, textarea {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text); padding: 8px 12px; font-family: var(--font); font-size: 13px; font-weight: 500; min-width: 120px; transition: 120ms;
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
textarea { font-family: var(--mono); min-width: 320px; min-height: 72px; resize: vertical; }

/* ── 对话框表单布局（shadcn 风）：字段等距、label→控件 8px、行内字段 14px；textarea 用正文字体 ── */
.form-grid { display: flex; flex-direction: column; gap: 18px; }
.form-grid label { gap: 8px; }
.form-grid .row { margin: 0; gap: 14px; align-items: flex-end; }
.form-grid input, .form-grid select { min-width: 0; padding: 9px 12px; }
.form-grid textarea { font-family: var(--font); font-size: 13px; font-weight: 500; line-height: 1.6; min-width: 0; width: 100%; min-height: 78px; padding: 9px 12px; }
/* 非 <label> 包裹的字段块（开放日 / 照片等）：小标题 + 内容 */
.fld { display: flex; flex-direction: column; gap: 9px; }
.fld-label { font-size: 12px; font-weight: 600; color: var(--text2); }
.fld-help { font-size: 11.5px; font-weight: 500; color: var(--muted); margin-top: -2px; }
/* 复选开关行：横向排列，控件与文字居中对齐 */
label.chk-row { flex-direction: row; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--text); }
label.chk-row input { width: 16px; height: 16px; min-width: 0; padding: 0; accent-color: var(--accent); cursor: pointer; }
/* 弹窗内的多选清单（如「密码发往哪几把锁」）：整块一个边框，行间细分隔线 */
.pick-list { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.pick-list label.chk-row { padding: 9px 12px; border-bottom: 1px solid var(--border-soft); }
.pick-list label.chk-row:last-child { border-bottom: none; }
.pick-list label.chk-row:hover { background: var(--panel2); }
.pick-list .pl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 双列对话框表单：短字段并排，长字段整行(.span2)；控件填满所在列，减少纵向高度(少滚动) ── */
.form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; align-items: start; }
.form-grid2 > .span2 { grid-column: 1 / -1; }
.form-grid2 label { display: flex; flex-direction: column; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text2); }
.form-grid2 input, .form-grid2 select { width: 100%; min-width: 0; padding: 9px 12px; }
.form-grid2 textarea { width: 100%; min-width: 0; font-family: var(--font); font-size: 13px; font-weight: 500; line-height: 1.6; min-height: 74px; padding: 9px 12px; }
.form-grid2 label.chk-row { flex-direction: row; align-items: center; align-self: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; }
.form-grid2 label.chk-row input { width: 16px; height: 16px; padding: 0; accent-color: var(--accent); }
/* 增强控件(自定义 select / date / time)在双列表单里填满所在列，时间/日期/下拉宽度一致 */
.form-grid2 .fsel { display: block; width: 100%; min-width: 0; }
.form-grid2 .fsel-trigger, .form-grid2 .fsel-trigger.fdate-timesel { width: 100%; }   /* 时间选择器默认 width:auto，这里拉满与日期对齐 */
.form-grid2 input:disabled { opacity: .5; cursor: not-allowed; background: var(--panel2); }
/* 输入框下方的内联小开关（如 Capacity 的「No limit」子选项）：紧贴输入、左对齐 */
.cap-fld .inline-chk { margin-top: 1px; }
.form-grid2 .inline-chk { flex-direction: row; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--text2); cursor: pointer; }
.form-grid2 .inline-chk input { width: 15px; height: 15px; min-width: 0; padding: 0; accent-color: var(--accent); cursor: pointer; }
/* 分节小标题（句首大写，非全大写；带上分隔线，settings-form 观感）：整行 */
.form-sec { grid-column: 1 / -1; font-size: 12px; font-weight: 700; letter-spacing: -.005em; color: var(--text2); margin: 4px 0 -4px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.form-sec.first { margin-top: 0; padding-top: 0; border-top: none; }
/* 照片上传：明确可点的虚线投放区 */
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 18px 16px; border: 1.5px dashed var(--border-strong); border-radius: var(--r-md); background: var(--panel2); color: var(--muted); cursor: pointer; text-align: center; transition: border-color 120ms, background 120ms, color 120ms; }
.dropzone:hover { border-color: var(--accent); background: var(--bg); color: var(--text2); }
.dropzone .dz-title { font-size: 13px; font-weight: 600; color: var(--text2); }
.dropzone:hover .dz-title { color: var(--text); }
.dropzone .dz-help { font-size: 11.5px; font-weight: 500; }

/* 预订详情弹窗（运营视角）：突出「何时」，其余信息用清晰定义列表，联系方式可点 */
.bk-when { display: flex; align-items: center; gap: 13px; padding: 14px 16px; background: var(--panel2); border: 1px solid var(--card-border); border-radius: var(--r-md); }
.bk-when > .ico { color: var(--muted); flex: 0 0 auto; }
.bk-when-date { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.bk-when-time { font-size: 13px; color: var(--text2); margin-top: 2px; font-variant-numeric: tabular-nums; }
.bk-sec { font-size: 11px; font-weight: 700; letter-spacing: .03em; color: var(--muted); margin-bottom: 10px; }
.bk-dl { display: grid; grid-template-columns: 96px 1fr; gap: 11px 14px; align-items: baseline; }
.bk-dl dt { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.bk-dl dd { margin: 0; font-size: 13px; font-weight: 500; color: var(--text); word-break: break-word; }
.bk-dl dd a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border-strong); }
.bk-dl dd a:hover { border-color: var(--text); }

/* ── shadcn 风格自定义 Select / Date（由 ui-upgrade.js 渐进增强：原生控件隐藏为数据源） ── */
.fsel { position: relative; display: inline-block; vertical-align: middle; min-width: 120px; max-width: 100%; }
label > .fsel { display: block; }
/* 被增强的原生控件：保留在 DOM（value/change 照旧），仅视觉隐藏 */
.fsel > select[data-ui-upgraded], .fsel > input[data-ui-upgraded] { display: none !important; }
.fsel-trigger {
  display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm);
  color: var(--text); padding: 8px 10px 8px 12px; font-family: var(--font); font-size: 13px; font-weight: 500;
  cursor: pointer; text-align: left; transition: border-color 120ms, box-shadow 120ms;
}
.fsel-trigger:hover { border-color: var(--border-strong); }
.fsel-trigger.open, .fsel-trigger:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.fsel-trigger:disabled { cursor: not-allowed; opacity: .55; }
.fsel-trigger:disabled:hover { border-color: var(--border); }
.fsel-empty { padding: 10px 12px; font-size: 12.5px; color: var(--muted); }
.fsel-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsel-label.fdate-ph { color: var(--muted); }
.fdate-ico { display: inline-flex; color: var(--muted); flex-shrink: 0; }
.fsel-caret { display: inline-flex; color: var(--muted); flex-shrink: 0; transition: transform 150ms; }
.fsel-trigger.open .fsel-caret { transform: rotate(180deg); }
.fsel-panel {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; max-height: 260px; overflow: auto; z-index: 30;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 4px; box-shadow: var(--elev-3);
  animation: flyIn 120ms cubic-bezier(.2,.9,.2,1) both;
}
@keyframes flyIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
/* 增强层用 fixed 定位挂到 body 下，避免被 .table-wrap / .modal 等滚动容器裁切（top/left 由 JS 写入） */
.fsel-panel.fsel-fixed { position: fixed; top: auto; left: auto; z-index: 80; }
.fsel-opt {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none;
  border-radius: var(--r-sm); color: var(--text); padding: 7px 10px; font-family: var(--font); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.fsel-opt:hover { background: var(--bg); }
.fsel-opt.sel { font-weight: 700; }
.fsel-check { width: 16px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); }

/* Date 月历浮层 */
.fdate-panel {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; width: 268px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px; box-shadow: var(--elev-3);
  animation: flyIn 120ms cubic-bezier(.2,.9,.2,1) both;
}
.fdate-panel.fsel-fixed { position: fixed; top: auto; left: auto; z-index: 80; }
.fdate-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fdate-month { font-size: 13px; font-weight: 700; color: var(--text); }
.fdate-nav { width: 28px; height: 28px; border: none; background: none; border-radius: var(--r-sm); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.fdate-nav:hover { background: var(--bg); color: var(--text); }
.fdate-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.fdate-wd { font-size: 11px; font-weight: 600; color: var(--muted); text-align: center; padding: 4px 0; }
.fdate-day { height: 32px; border: none; background: none; border-radius: var(--r-sm); color: var(--text); cursor: pointer; font-family: var(--font); font-size: 12.5px; font-weight: 500; }
.fdate-day:hover { background: var(--bg); }
.fdate-day.today { box-shadow: inset 0 0 0 1px var(--border-strong); }
.fdate-day.sel { background: var(--accent); color: var(--on-brand); font-weight: 700; }
.fdate-day.pad { visibility: hidden; }
.fdate-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
/* 时间选择：紧凑 trigger + 向上弹出的时段列表 */
.fdate-timewrap { width: auto; min-width: 0; }
.fsel-trigger.fdate-timesel { width: auto; min-width: 96px; padding: 6px 8px 6px 11px; font-variant-numeric: tabular-nums; }
.fsel-panel.fdate-timepanel { top: auto; bottom: calc(100% + 4px); max-height: 208px; min-width: 96px; }
.fsel-panel.fdate-timepanel .fsel-opt { font-variant-numeric: tabular-nums; justify-content: flex-start; }

/* 原生 select 的布局规则镜像到增强后的 .fsel 容器（类名规则会随 className 复制自动生效，这里只补元素选择器） */
.sce-item > .fsel { flex: 1 1 150px; min-width: 110px; }
.sce-item .sce-val > .fsel { flex: 1; min-width: 0; width: 100%; }
.sce-sec-h .fsel { min-width: 0; }
.sce-sec-h .fsel .fsel-trigger { padding: 3px 8px; font-size: 12px; }
.flt-card .fsel { width: 100%; min-width: 0; }
.noti-field .fsel { min-width: 160px; }
/* 维修工单状态行内切换：布局类复制到容器后，把 padding 还给 trigger、语义色描边上到 trigger */
.fsel.mr-status-sel { padding: 0; border: none; }
.fsel.mr-status-sel .fsel-trigger { padding: 5px 8px; font-size: 12px; font-weight: 600; }
.fsel.mr-status-sel.mr-open   .fsel-trigger { border-color: var(--amber); color: #92400e; }
.fsel.mr-status-sel.mr-prog   .fsel-trigger { border-color: var(--info);  color: #3730a3; }
.fsel.mr-status-sel.mr-closed .fsel-trigger { border-color: var(--green); color: #047857; }

/* ============ 按钮（高 ~32，radius sm，13/600）============ */
button.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--accent); color: var(--on-brand); border: 1px solid var(--accent); border-radius: var(--r-sm);
  padding: 7px 12px; font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer; transition: 120ms;
}
/* 按钮里的图标（如主操作的 + 号）：略大、稍细，视觉重量与文字匹配 */
button.btn svg.ico { width: 16px; height: 16px; stroke-width: 2.2; }
button.btn.sm svg.ico { width: 15px; height: 15px; }
button.btn:hover { opacity: .9; }
button.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
button.btn.ghost { background: transparent; color: var(--text2); border-color: transparent; }
button.btn.ghost:hover { background: var(--bg); color: var(--text); opacity: 1; }
/* 图标按钮：正方形、图标居中（如工具条右侧的 Refresh） */
button.btn.icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; width: 34px; height: 34px; flex-shrink: 0; }
/* 描边按钮：白底 + hairline 描边（次级操作，如 Rename / ＋Sub-space），比 ghost 更有边界感 */
button.btn.outline { background: var(--panel); color: var(--text); border-color: var(--border-strong); }
button.btn.outline:hover { background: var(--bg); border-color: var(--text2); opacity: 1; }
button.btn.danger { background: transparent; color: var(--red); border-color: transparent; }
button.btn.danger:hover { background: var(--red-bg); border-color: var(--red); opacity: 1; }
/* 实心描边的危险按钮：边框常驻，明确呈现为按钮而非文字链接 */
button.btn.danger-solid { background: var(--red-bg); color: var(--red); border-color: var(--red); }
button.btn.danger-solid:hover { opacity: .9; }
/* 破坏性描边按钮：透明底 + 柔和红描边（如详情弹窗的 Delete），hover 时填浅红 */
button.btn.danger-outline { background: transparent; color: var(--red); border-color: color-mix(in srgb, var(--red) 42%, var(--border-strong)); }
button.btn.danger-outline:hover { background: var(--red-bg); border-color: var(--red); opacity: 1; }
button.btn.warn { background: var(--amber); color: #1f2937; border-color: var(--amber); }
button.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.sm { padding: 4px 9px; font-size: 12px; }

/* ============ 表格（卡片表格）============ */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
th { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: normal; text-transform: none; position: sticky; top: 0; background: var(--bg); }
td { font-weight: 600; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg); }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); }
/* 表格内复选框：垂直居中、统一大小，与同行文字对齐 */
table td input[type="checkbox"] { margin: 0; vertical-align: middle; width: 15px; height: 15px; cursor: pointer; }

/* ============ 分页条 pager ============ */
/* 范围文本 + 页码(带 …) + 每页条数；页码/条数用统一的方块按钮，选中= ink 实心 */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.pager-range { font-size: 13px; font-weight: 500; color: var(--muted); }
.pager-nav, .pager-size { display: flex; align-items: center; gap: 4px; }
.pager-btn {
  min-width: 32px; height: 32px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: var(--r-sm); color: var(--text2);
  font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer; transition: 120ms;
}
.pager-btn:hover:not(:disabled):not(.active) { background: var(--panel2); color: var(--text); }
.pager-btn.active { background: var(--accent); color: var(--on-brand); border-color: var(--accent); cursor: default; }
.pager-btn:disabled { opacity: .4; cursor: default; }
.pager-arrow { color: var(--muted); }
.pager-gap { min-width: 20px; text-align: center; color: var(--muted); font-size: 13px; user-select: none; }

/* ============ 状态 chip ============ */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; background: var(--panel2); color: var(--text2); }
.tag.on { background: var(--green-bg); color: #047857; }
.tag.on::before, .tag.off::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag.off { background: var(--red-bg); color: #b91c1c; }
/* 门锁凭证 phase 的中间态（待创建/待冻结…）：既不是成功也不是失败，与 on/off 同形不同色 */
.tag.warn { background: var(--amber-bg); color: #92400e; }
.tag.warn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ============ 子 tab（下划线式）============ */
.subtabs { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.subtabs button { background: none; border: none; border-bottom: 2px solid transparent; color: var(--text2); padding: 8px 14px; margin-bottom: -1px; cursor: pointer; font-size: 14px; font-weight: 600; transition: 120ms; }
.subtabs button:hover { color: var(--text); }
.subtabs button.active { color: var(--text); border-bottom-color: var(--text); }

/* ============ 提示框 ============ */
.warn-box { background: var(--amber-bg); border: 1px solid rgba(245,158,11,.35); border-radius: var(--r-sm); padding: 10px 12px; font-size: 13px; color: #92400e; margin-bottom: 12px; }
.warn-box b { color: #78350f; }
/* Dashboard 公告 banner：单条 + 「+N more」计数，点击进公告页 */
.dash-notice { display: flex; align-items: center; gap: 10px; cursor: pointer; transition: border-color 120ms; }
.dash-notice:hover { border-color: rgba(245,158,11,.6); }
.dash-notice .dash-notice-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-notice .dash-notice-more { flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: var(--r-pill); background: rgba(245,158,11,.18); color: #92400e; }
.dash-notice .dash-notice-arrow { flex-shrink: 0; display: inline-flex; color: #b45309; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--panel2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 3px 10px; font-size: 12px; font-weight: 600; display: flex; gap: 6px; align-items: center; }
.chip b { color: var(--text); }
.chip span.x { cursor: pointer; color: var(--red); font-weight: bold; }
/* chip 上的非破坏性操作（刷新/改名）：红色只留给真正会删东西的 × */
.chip span.x.act { color: var(--text2); font-weight: 600; }
.chip span.x.act:hover { color: var(--text); }

/* ============ 筛选 chips（Product Library 类型筛选）+ 目录缩略图 ============ */
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.filter-chip { background: var(--panel2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--text2); cursor: pointer; transition: 120ms; }
.filter-chip:hover { border-color: var(--border-strong); color: var(--text); }
.filter-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.lib-thumb { width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--panel2); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; color: var(--muted); box-shadow: inset 0 0 0 1px var(--border-soft); }
.lib-thumb img { width: 100%; height: 100%; object-fit: contain; }
.empty { color: var(--muted); padding: 20px; text-align: center; }

/* ============ 弹窗 ============ */
.modal-bg { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal { position: relative; background: var(--panel); border-radius: var(--r-lg); box-shadow: var(--elev-3); padding: 24px; width: auto; min-width: 520px; max-width: 92vw; max-height: 90vh; overflow: auto; scrollbar-width: none; }
.modal::-webkit-scrollbar { display: none; }   /* 隐藏滚动条（仍可滚动），弹窗更干净 */
.modal h3 { margin: 0 0 12px; }
.modal-head { position: sticky; top: -24px; z-index: 3; background: var(--panel); margin: -24px -24px 20px; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border-soft); }
.modal-head h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.modal-x { background: none; border: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: var(--r-sm); }
.modal-x:hover { color: var(--text); }
.modal pre { background: var(--panel2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px; font-family: var(--mono); font-size: 12px; color: var(--text2); white-space: pre-wrap; word-break: break-all; }
.modal .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 22px; }

/* ===== 图片灯箱（点击缩略图放大） ===== */
.lightbox-bg { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 32px; cursor: zoom-out; }
.lightbox-img { max-width: 92vw; max-height: 90vh; object-fit: contain; border-radius: var(--r-md); box-shadow: var(--elev-3); cursor: zoom-out; }
.lightbox-x { position: fixed; top: 16px; right: 20px; background: none; border: none; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; opacity: .8; padding: 0 6px; }
.lightbox-x:hover { opacity: 1; }

/* ===== 场景创建/编辑弹窗（automation / tap-to-run） ===== */
.sce { display: flex; flex-direction: column; gap: 16px; min-width: 480px; }
.sce > label { gap: 6px; }
.sce-name { width: 100%; }
.sce-namerow { display: flex; align-items: flex-end; gap: 14px; }
.sce-namerow > label:first-child { flex: 1; }
.sce-enabled { flex-shrink: 0; }
.sce-enabled .sw { margin-top: 2px; }
.sce-sec { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel2); padding: 12px 14px; }
.sce-sec-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sce-sec-h b { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sce-sec-h .sce-sp { margin-left: auto; }
.sce-sec-h select { padding: 3px 8px; font-size: 12px; }
.sce-rows { display: flex; flex-direction: column; gap: 8px; }
.sce-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 10px; }
.sce-item.locked { border-style: dashed; background: transparent; }
.sce-item.dragging { opacity: .5; border-style: dashed; }
.sce-drag { flex: 0 0 auto; cursor: grab; color: var(--muted); user-select: none; font-size: 14px; line-height: 1; padding: 0 2px; }
.sce-drag:active { cursor: grabbing; }
.sce-item > select { flex: 1 1 150px; min-width: 110px; }
.sce-item .sce-op { flex: 0 0 60px; min-width: 52px; }
.sce-item .sce-val { flex: 1 1 130px; display: flex; align-items: center; gap: 6px; min-width: 110px; }
.sce-item .sce-val > input, .sce-item .sce-val > select { flex: 1; min-width: 0; width: 100%; }
.sce-item .sce-lock { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text2); }
.sce-x { margin-left: auto; flex-shrink: 0; background: transparent; border: none; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; padding: 4px 7px; border-radius: var(--r-sm); }
.sce-x:hover { color: var(--red); background: var(--red-bg); }
.sce-empty { font-size: 12px; color: var(--muted); padding: 2px 2px 6px; }
.sce-adds { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sce-add { border: 1px dashed var(--border-strong); background: transparent; color: var(--text2); border-radius: var(--r-sm); padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; transition: 120ms; }
.sce-add:hover { border-color: var(--accent); color: var(--text); }
.sce-time { flex: 0 0 auto; width: 108px; }
.sce-delay { display: flex; align-items: center; gap: 5px; color: var(--text2); font-size: 12px; }
.sce-delay input { width: 58px; }
.sce-item .sce-rulestate { flex: 0 0 96px; min-width: 90px; }
.sce-days { display: flex; gap: 4px; flex-wrap: wrap; }
.sce-day { padding: 4px 9px; font-size: 12px; font-weight: 600; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--panel); color: var(--muted); cursor: pointer; }
.sce-day.on { background: var(--accent); color: var(--on-brand); border-color: var(--accent); }
.sce-msg { font-size: 12px; color: var(--red); min-height: 16px; }
/* 右侧抽屉 */
.drawer-bg { position: fixed; inset: 0; background: var(--overlay); display: flex; justify-content: flex-end; z-index: 50; }
.drawer { position: relative; width: 480px; max-width: 94vw; height: 100%; background: var(--panel); border-left: 1px solid var(--border); box-shadow: -16px 0 40px -12px rgba(24,24,27,.25); display: flex; flex-direction: column; animation: drawerIn .22s ease; }
@keyframes drawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.drawer .modal-head { position: sticky; top: 0; margin: 0; padding: 16px 20px; z-index: 3; }
.drawer .drawer-body { padding: 16px 20px; overflow: auto; flex: 1; }
.drawer .drawer-body .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

/* ===== AI Search（Google 式居中搜索）===== */
.ai-search { max-width: 680px; margin: 0 auto; text-align: center; min-height: calc(100vh - 440px); display: flex; flex-direction: column; justify-content: center; }
.ai-search-title { font-size: 22px; font-weight: 700; letter-spacing: -.014em; margin-bottom: 6px; }
/* 首次搜索：中心 loading（占据 hero 同样的居中区域）*/
.ai-loading { min-height: calc(100vh - 440px); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ai-loading .spinner { border-color: var(--border); border-top-color: var(--accent); }
.ai-search-bar { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.ai-search-bar input {
  flex: 1; height: 46px; border-radius: var(--r-pill); padding: 0 20px; font-size: 15px;
  border: 1px solid var(--border); box-shadow: var(--elev-1);
}
.ai-search-bar input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.ai-search-bar .btn { height: 46px; border-radius: var(--r-pill); padding: 0 24px; }
/* 高级过滤：pill 折叠开关 + 面板卡（在搜索框上方）*/
.ai-adv-toggle { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 6px 14px; font-size: 12px; font-weight: 600; color: var(--text2); cursor: pointer; transition: 120ms; }
.ai-adv-toggle:hover { border-color: var(--border-strong); color: var(--text); }
.ai-adv { max-width: 680px; margin: 12px auto 0; padding: 14px 16px; background: var(--panel2); border: 1px solid var(--border); border-radius: var(--r-md); text-align: left; }
/* filter 卡片网格：按属性分区（wide 占整行；其余半行）*/
.flt-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; text-align: left; }
.flt-card { border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel); padding: 10px 12px; display: flex; flex-direction: column; }
.flt-card.wide { grid-column: 1 / -1; }
.flt-card-h { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.flt-card .flt-hint { font-size: 11px; color: var(--muted); margin-top: 8px; }
.flt-card input:not([type=range]), .flt-card select { width: 100%; min-width: 0; }
.flt-row2 { display: flex; gap: 12px; }
.flt-row2 label { flex: 1; }
@media (max-width: 520px) { .flt-cards { grid-template-columns: 1fr; } }
.ai-sim-badge { min-width: 44px; text-align: center; font-weight: 700; font-family: var(--mono); background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px 8px; font-size: 12px; color: var(--text); }
/* 出结果后：搜索框缩到左上角、变小、左对齐 */
.ai-search.compact { max-width: none; margin: 0 0 14px; text-align: left; min-height: 0; display: block; }
.ai-search-bar.compact { max-width: 620px; margin-top: 0; }
.ai-search-bar.compact input { height: 40px; font-size: 14px; }
.ai-search-bar.compact .btn { height: 40px; padding: 0 20px; }
.ai-search.compact .ai-adv { margin: 12px 0 0; max-width: 620px; }

/* ===== CCTV / AcuSeek 检索结果网格 ===== */
.cctv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.live-stage { position: relative; width: 960px; max-width: 86vw; aspect-ratio: 16 / 9; max-height: 72vh; background: #000; border-radius: var(--r-md); overflow: hidden; }
.live-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.live-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #d4d4d8; text-align: center; padding: 0 16px; }
.live-loading.error { color: var(--amber); }
.live-loading.error .spinner { display: none; }
.spinner { width: 40px; height: 40px; border: 3px solid rgba(255,255,255,.18); border-top-color: #fff; border-radius: 50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ANPR 多相机实时网格：铺满父宽左对齐，一排最多 2 路；单路时占满整行放大 */
.anpr-live-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; }
.anpr-live-grid:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.anpr-live-grid .live-stage { width: 100%; max-width: 100%; max-height: none; }
/* 窄屏退回单列 */
@media (max-width: 900px) { .anpr-live-grid { grid-template-columns: minmax(0, 1fr); } }
/* Vehicle & Parking · Plate Management：左名单卡片 + 右车牌表 */
.anpr-plates { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; align-items: start; }
.anpr-list-card { display: block; width: 100%; text-align: left; padding: 10px 12px; margin-bottom: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; font: inherit; color: var(--text); }
.anpr-list-card:hover { border-color: var(--border-strong); }
.anpr-list-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
@media (max-width: 900px) { .anpr-plates { grid-template-columns: minmax(0, 1fr); } }
.anpr-plates th input[type="checkbox"], .anpr-plates td input[type="checkbox"] { width: 15px; height: 15px; min-width: 0; padding: 0; margin: 0; vertical-align: middle; cursor: pointer; }
.anpr-plates th, .anpr-plates td { padding: 10px 10px; }
/* CCTV 码流分段开关 */
.cctv-grid + .seg, .live-stage ~ .seg, .seg.stream { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.cctv-live-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .cctv-live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cctv-item { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; background: var(--panel); }
.cctv-thumb { width: 100%; aspect-ratio: 16 / 9; min-height: 180px; object-fit: cover; display: block; cursor: pointer; background: #0b0b0c; }
.cctv-thumb.muted { display: flex; align-items: center; justify-content: center; color: var(--muted); background: var(--panel2); }
.cctv-snap { position: relative; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; background-repeat: no-repeat; }
/* 有画面的摄像头卡：中间叠一个灰白色播放图标，引导点击进入实时 */
.cctv-snap.has-img::after {
  content: '▶'; display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; padding-left: 4px;
  background: rgba(245, 245, 245, 0.82); color: rgba(24, 24, 27, 0.72); font-size: 19px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); pointer-events: none; transition: 120ms;
}
.cctv-item:hover .cctv-snap.has-img::after { background: #fff; transform: scale(1.08); }
.snap-ph { color: var(--muted); font-size: 13px; }
.cctv-snap.has-img .snap-ph { display: none; }
.cctv-meta { padding: 8px 10px; }
.cctv-frame { position: relative; line-height: 0; }
.cctv-rect { position: absolute; border: 2px solid var(--red); box-shadow: 0 0 0 2px rgba(239,68,68,.35); pointer-events: none; border-radius: 2px; }
/* 下拉菜单 */
.menu { position: absolute; top: 100%; left: 0; margin-top: 4px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 4px; min-width: 220px; z-index: 20; box-shadow: var(--elev-3); animation: flyIn 120ms cubic-bezier(.2,.9,.2,1) both; }
.menu.menu-right { left: auto; right: 0; }
.menu button { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text); padding: 8px 12px; border-radius: var(--r-sm); cursor: pointer; font-size: 13px; font-weight: 600; }
.menu button:hover { background: var(--bg); }
.menu button.danger { color: var(--red); }
/* 空间树展开/收起箭头：chevron 图标，hover 变深 */
.tree-caret { cursor: pointer; width: 16px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); transition: color 120ms; }
.tree-caret:hover { color: var(--text); }
/* 空状态页 */
.empty-state { text-align: center; padding: 64px 20px; }
.empty-state h3 { margin: 14px 0 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
/* Space 房号网格 */
.room-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1100px) { .room-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.room-card { border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px; cursor: pointer; background: var(--panel); display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 110px; transition: box-shadow .15s, border-color .15s; }
.room-card:hover { border-color: var(--border-strong); box-shadow: var(--elev-2); }
.room-card .rc-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.room-card .rc-no { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.room-card .tag { align-self: flex-start; }
.room-card.occupied { border-color: var(--green); }
.room-card .rc-people { color: #047857; font-size: 13px; font-weight: 600; }
/* 住户资料卡 */
.profile-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.avatar { width: 60px; height: 60px; border-radius: 50%; background: var(--panel2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700; color: var(--text); flex-shrink: 0; object-fit: cover; }
.profile-name { font-size: 18px; font-weight: 700; }
.face-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--panel2); }
/* 住户行 */
.resident-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border-soft); }
.resident-row:first-child { border-top: 0; }
.resident-row .rr-name { font-weight: 600; }
/* Access Control：三种解锁方式并排 */
.unlock-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
/* Building Access 有 4 块（+ HID Mobile Access）；窄屏退回 2 列再退 1 列 */
.unlock-methods.um-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1180px) { .unlock-methods.um-4 { grid-template-columns: repeat(2, 1fr); } }
/* 住户详情弹窗只有 640px 宽，4 列会挤成条：这里固定 2×2 */
#resPanel-building .unlock-methods.um-4 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .unlock-methods, .unlock-methods.um-4 { grid-template-columns: 1fr; } }
.um-block { border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px; background: var(--panel); }
.um-block.has { border-color: var(--border-strong); }
.um-head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.um-head .um-ico { font-size: 15px; }
.um-head .um-count { margin-left: auto; min-width: 22px; text-align: center; background: var(--panel2); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 1px 8px; font-size: 11px; color: var(--muted); font-weight: 700; }
.um-block.has .um-count { color: var(--text); border-color: var(--border-strong); }
.um-head .um-edit { margin-left: 6px; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; border-radius: 4px; }
.um-head .um-edit:hover { color: var(--text); background: var(--bg); }
.um-block.editing { border-color: var(--accent); background: var(--bg); }
.um-body { display: flex; flex-wrap: wrap; gap: 6px; }
.um-body .chip { font-family: var(--mono); }
.um-empty { color: var(--muted); font-size: 12px; padding: 4px 0; }
.um-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 10px; }
/* Access Management：Building / In-Room 两组 */
/* 门禁两类分组：Building（真实网关）vs In-Room（mock），做成独立带色面板以明显区分 */
.access-group { margin-top: 14px; border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: var(--r-md); overflow: hidden; }
.ag-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; padding: 9px 12px; background: var(--panel2); border-bottom: 1px solid var(--border); }
.ag-title .muted { font-size: 12px; margin-left: 2px; }
.access-group .unlock-methods { margin: 12px; }
/* Building Access = 蓝（真实网关凭证） */
.ag-building { border-left-color: var(--info); }
.ag-building .ag-title { background: var(--info-bg); }
.ag-building .ag-title svg.ico { color: var(--info); }
/* In-Room Access = 琥珀（mock） */
.ag-inroom { border-left-color: var(--amber); }
.ag-inroom .ag-title { background: var(--amber-bg); }
.ag-inroom .ag-title svg.ico { color: var(--amber); }
.tag.ag-live { background: var(--info-bg); color: #3730a3; }
/* HID Origo 手机凭证：Building Access 的第四块。不经网关，故用 HID 标签与前三块区分 */
.tag.hid-tag { background: var(--panel2); color: var(--text2); border: 1px solid var(--border-strong); font-size: 10px; letter-spacing: .04em; padding: 0 5px; }
/* 4 列下 head 塞不下状态，故状态单独一行；⟳ 顶到 head 右端 */
.um-block.hid .hid-label { white-space: nowrap; }
/* 卡号是否已写进门禁主机：没写进去手机贴上去也开不了门，必须一眼可见 */
.tag.hid-synced { background: var(--green-bg); color: #047857; font-size: 10px; padding: 0 6px; }
.tag.hid-unsynced { background: var(--amber-bg); color: #92400e; font-size: 10px; padding: 0 6px; }
/* HID 邀请确认弹窗 */
.hid-modal-card { background: var(--panel2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 4px 16px; }
.hid-modal-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: 13px; }
.hid-modal-row + .hid-modal-row { border-top: 1px solid var(--border-soft); }
.hid-modal-row .muted { flex: 0 0 92px; font-size: 12px; }
.hid-modal-row .mono-val { font-family: var(--mono); }
.hid-modal-steps { margin: 0; padding-left: 20px; color: var(--text2); font-size: 13px; line-height: 1.7; }
.hid-modal-steps li { margin-bottom: 4px; }
/* Connect 页选中 SKU 后的编码详情 */
.hid-part-detail { background: var(--panel2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 2px 14px; margin: 10px 0 0; max-width: 720px; }
.um-block.hid .um-head .um-edit { margin-left: auto; }
.hid-state { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.hid-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.um-block.hid-active    .hid-dot { background: var(--green); }
.um-block.hid-active    .hid-state { color: #065f46; }
.um-block.hid-pending   .hid-dot, .um-block.hid-suspended .hid-dot { background: var(--amber); }
.um-block.hid-pending   .hid-state, .um-block.hid-suspended .hid-state { color: #92400e; }
.um-block.hid-failed    .hid-dot { background: var(--red); }
.um-block.hid-failed    .hid-state { color: #991b1b; }
.um-block.hid-revoked   .hid-state { color: var(--muted); }
.um-block.hid-active { border-color: rgba(16,185,129,.45); }
.hid-body { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.hid-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hid-line .muted { flex: 0 0 48px; font-size: 11px; }
.hid-line > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hid-line .chip { font-family: var(--mono); letter-spacing: .06em; }
.hid-hint { color: var(--muted); font-size: 11px; line-height: 1.45; margin-top: 8px; }
.hid-err { color: var(--red); font-size: 12px; line-height: 1.45; word-break: break-word; }
/* 发卡器采集弹窗（等刷卡 / 按指纹）*/
.reader-stage { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 18px 4px 4px; }
.reader-icon { font-size: 52px; line-height: 1; }
.reader-icon.pulse { animation: readerpulse 1.2s ease-in-out infinite; }
@keyframes readerpulse { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.12); opacity: 1; } }
.reader-prompt { color: var(--muted); }
.reader-stage .actions { display: flex; gap: 8px; justify-content: center; margin-top: 4px; }
/* 住户弹窗-通行记录 */
#resPanel-records .table-wrap { max-height: 320px; overflow: auto; }
#resPanel-records .table-wrap thead th { position: sticky; top: 0; background: var(--bg); z-index: 1; }


/* ============ IoT 设备控制面板（能力表驱动）============ */
.dev-panel { display: flex; flex-direction: column; gap: 2px; }
.dev-panel .meta { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.ctrl-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--border-soft); }
.ctrl-row:last-child { border-bottom: none; }
.ctrl-row .ctrl-label { flex: 0 0 40%; font-size: 13px; font-weight: 600; }
.ctrl-row .ctrl-label small { display: block; color: var(--muted); font-size: 11px; font-weight: 500; font-family: var(--mono); }
.ctrl-row .ctrl-body { flex: 1; display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.ctrl-row .ctrl-val { min-width: 46px; text-align: right; font-family: var(--mono); color: var(--text); font-size: 13px; font-weight: 600; }
/* 开关 */
.sw { position: relative; display: inline-block; vertical-align: middle; width: 44px; height: 24px; flex-shrink: 0; cursor: pointer; }
.sw input { opacity: 0; width: 0; height: 0; }
.sw .track { position: absolute; inset: 0; background: var(--panel2); border: 1px solid var(--border); border-radius: 24px; transition: .18s; }
.sw .thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(24,24,27,.2); transition: .18s; }
.sw input:checked + .track { background: var(--green); border-color: var(--green); }
.sw input:checked + .track .thumb { transform: translateX(20px); }
.sw input:disabled + .track { opacity: .5; cursor: not-allowed; }
/* 滑块 */
.ctrl-row input[type=range] { flex: 1; max-width: 220px; min-width: 0; accent-color: var(--accent); }
/* 分段 / 枚举按钮 */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.seg button { padding: 4px 10px; font-size: 12px; font-weight: 600; border-radius: var(--r-sm); cursor: pointer; background: var(--panel); color: var(--text2); border: 1px solid var(--border); transition: 120ms; }
.seg button:hover { border-color: var(--border-strong); color: var(--text); }
.seg button.active { background: var(--accent); color: var(--on-brand); border-color: var(--accent); }
.seg button:disabled { opacity: .45; cursor: not-allowed; }
/* 只读状态项 */
.ctrl-row.readonly .ctrl-val { color: var(--text2); }
.ctrl-row .alarm { color: var(--red); font-weight: 700; }

/* ============================================================
   图标系统：单色线性图标（lucide 风）
   规则：图标一律 currentColor（随文字色）；彩色只保留给状态语义。
   ============================================================ */
svg.ico { display: inline-block; vertical-align: -0.15em; flex: none; stroke: currentColor; }
/* 内联在文字/标签中的图标：略微下压对齐基线 */
.tag svg.ico, .chip svg.ico, b svg.ico, .rc-people svg.ico, .muted svg.ico, .ag-title svg.ico { vertical-align: -0.16em; }
.tag svg.ico, .chip svg.ico { margin-right: 1px; }

/* 侧栏导航：图标弱化为 muted，hover/active 跟随文字变深 */
nav .modbtn svg.ico { color: var(--muted); transition: color 120ms; }
nav .modbtn:hover svg.ico, nav .modbtn.active svg.ico { color: var(--text); }

/* Dashboard 卡标题图标 */
.dash-head h3 { display: inline-flex; align-items: center; gap: 8px; }
.dash-head h3 svg.ico { color: var(--muted); }

/* Access group 标题图标 */
.ag-title svg.ico { color: var(--text2); }

/* 解锁方式块图标（人脸/卡/密码/指纹）*/
.um-head .um-ico { display: inline-flex; align-items: center; color: var(--text2); }
.um-block.has .um-head .um-ico { color: var(--text); }

/* 读卡器/指纹仪弹窗大图标 */
.reader-icon svg.ico { color: var(--text2); }
.reader-icon.ok { color: var(--green); }

/* 空状态大图标 + 无信号占位：弱化为描边灰，不喧宾夺主 */
.empty-state svg.ico, .ai-search svg.ico, .snap-ph svg.ico { color: var(--border-strong); }
.snap-ph svg.ico { vertical-align: -0.2em; margin-right: 4px; }
.empty-state svg.ico { margin-bottom: 4px; }

/* avatar 占位图标 */
.avatar svg.ico { color: var(--muted); }

/* ============ Maintenance Requests 维修工单 ============ */
/* 状态/优先级色块（语义色）*/
.tag.mr-open   { background: var(--amber-bg); color: #92400e; }
.tag.mr-prog   { background: var(--info-bg);  color: #3730a3; }
.tag.mr-closed { background: var(--green-bg); color: #047857; }
.tag.mr-high   { background: var(--red-bg);   color: #b91c1c; }

/* ============ 计数分段控件（计数即筛选，替代 KPI 条 + tabs 的重复） ============ */
/* 分段筛选（shadcn Tabs 风）：muted 轨道内嵌分段，选中=白色药丸+微投影；计数作小徽标 */
.count-tabs { display: inline-flex; align-items: center; gap: 3px; padding: 3px; margin-right: auto; max-width: 100%; overflow-x: auto;
  background: var(--panel2); border: 1px solid var(--card-border); border-radius: var(--r-md); }
.count-tab { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: none; border-radius: var(--r-sm); background: none; cursor: pointer; white-space: nowrap; transition: background 120ms, box-shadow 120ms, color 120ms; }
.count-tab .l { order: 1; font-size: 13px; font-weight: 600; color: var(--muted); }
.count-tab .n { order: 2; font-size: 11px; font-weight: 700; line-height: 1; color: var(--muted); background: var(--panel); border: 1px solid var(--card-border); border-radius: var(--r-pill); padding: 2px 6px; min-width: 20px; text-align: center; }
.count-tab:hover:not(.active) .l { color: var(--text2); }
.count-tab.active { background: var(--panel); box-shadow: 0 1px 2px rgba(24,24,27,.10), 0 0 0 1px rgba(24,24,27,.02); }
.count-tab.active .l { color: var(--text); }
.count-tab.active .n { color: var(--text); background: var(--brand-tint); border-color: var(--border); }
.count-tab.warn .n { color: var(--red); border-color: color-mix(in srgb, var(--red) 30%, var(--card-border)); }

/* ============================================================
   Install Jobs 派工看板（Installation → Install Jobs）
   结构：作用域汇总条(.ij-overview) → 粘顶工具条(.ij-toolbar) → 房间卡网格(.ij-grid)
   规则沿用主题：描边优先、单色墨阶进度、语义色只给状态（完成=绿 / 缺陷=红）。
   ============================================================ */
/* —— 汇总条：当前 楼栋/楼层/搜索 作用域内的四个口径（不随状态 tab 变化，作为稳定基线） —— */
.ij-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
@media (max-width: 1080px) { .ij-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .ij-overview { grid-template-columns: 1fr; } }
.ij-stat { background: var(--panel); border: 1px solid var(--card-border); border-radius: var(--r-md); padding: 13px 15px 14px; display: flex; flex-direction: column; }
.ij-stat-k { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ij-stat-v { font-size: 23px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--text); margin-top: 7px; font-variant-numeric: tabular-nums; }
.ij-stat-v .ij-stat-of { font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.ij-stat.bad .ij-stat-v { color: var(--red); }
.ij-stat-sub { font-size: 11.5px; font-weight: 500; color: var(--muted); margin-top: auto; padding-top: 8px; }
/* 微进度条：默认墨阶，满格转绿（唯一的“完成”语义色） */
.ij-bar { height: 5px; border-radius: var(--r-pill); background: var(--viz-track); overflow: hidden; }
.ij-bar > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--viz-fill); transition: width 280ms cubic-bezier(.4,0,.2,1); }
.ij-bar.done > i { background: var(--green); }
.ij-stat .ij-bar { margin-top: 10px; }

/* —— 工具条：粘在内容面板顶部（长房间列表滚动时筛选常驻） —— */
.ij-toolbar {
  position: sticky; top: -24px; z-index: 12; margin: 0 -24px 16px; padding: 12px 24px 14px;
  background: var(--bg); border-bottom: 1px solid var(--card-border);
}
.ij-toolbar-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ij-toolbar-row + .ij-toolbar-row { margin-top: 10px; }
.ij-result { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 搜索框：前置放大镜（图标绝对定位，输入左内边距让位） */
/* 搜索框占主位但不铺满（宽屏时把筛选下拉推到右侧成组） */
.ij-search { position: relative; flex: 1 1 240px; min-width: 180px; max-width: 380px; margin-right: auto; display: flex; }
.ij-search > svg.ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.ij-search > input { width: 100%; min-width: 0; padding-left: 34px; }
.ij-filters > select, .ij-filters > .fsel { flex: 0 1 168px; min-width: 132px; }

/* —— 房间卡网格：等高（auto-rows 1fr + 卡 height:100%），卡内各段落对齐 —— */
.ij-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 12px; align-items: stretch; }
.ij-card {
  display: flex; flex-direction: column; height: 100%; cursor: pointer; text-align: left;
  background: var(--panel); border: 1px solid var(--card-border); border-radius: var(--r-md); padding: 14px 15px 13px;
  transition: border-color 140ms, box-shadow 140ms;
}
.ij-card:hover { border-color: var(--border-strong); box-shadow: var(--elev-2); }
.ij-card:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
/* 未派工：保留白底（都是卡），只用「可见的虚线描边」区分——
   不能用透明底：暖调 --card-border 虚线在页面底色上几乎看不见，卡片会像消失了一样。 */
.ij-card.is-idle { border-style: dashed; border-color: var(--border); }
.ij-card.is-idle:hover { border-style: solid; border-color: var(--border-strong); }
.ij-card-top { display: flex; align-items: center; gap: 8px; }
.ij-no { font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--text); font-variant-numeric: tabular-nums; }
.ij-card-top .tag { margin-left: auto; flex-shrink: 0; }
.ij-path { font-size: 11px; font-weight: 500; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ij-sep { height: 1px; background: var(--card-border); margin: 12px 0; }
/* 属性表：定宽标签列 + 值列，多卡之间纵向对齐 */
.ij-dl { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 6px 10px; align-items: baseline; margin: 0; }
.ij-dl dt { margin: 0; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.ij-dl dd { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ij-dl dd.na { font-weight: 500; color: var(--muted); }
/* 进度块：贴卡底（margin-top:auto），标题行 + 条 */
.ij-prog { margin-top: auto; padding-top: 14px; }
.ij-prog-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.ij-prog-k { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.ij-prog-n { font-size: 12px; font-weight: 600; color: var(--text2); font-variant-numeric: tabular-nums; }
.ij-pct { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.ij-card.is-done .ij-pct { color: #047857; }
/* 缺陷提示行：卡底红字，与进度条之间一条 hairline */
.ij-defect { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--card-border); font-size: 11.5px; font-weight: 600; color: #b91c1c; }
/* 未派工卡的号召块：虚线内框 + 加号，明确「点这里派工」 */
.ij-assign { margin-top: auto; padding-top: 14px; display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text2); }
.ij-assign svg.ico { color: var(--muted); }
.ij-card.is-idle:hover .ij-assign { color: var(--text); }
.ij-card.is-idle:hover .ij-assign svg.ico { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .ij-bar > i { transition: none; } }

/* ============================================================
   房间施工详情页（Install Jobs → 房间工单）
   交付经理视角的信息顺序：这是哪间房 → 事实（户型/人/时间）→ 能不能验收（.ijd-gate）
   → 阻塞项（红条）→ 明细分区（设备 / 绑定 / 缺陷）。
   ============================================================ */
.ijd-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin: 0 0 16px; }
.ijd-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ijd-title { font-size: 22px; font-weight: 700; letter-spacing: -.016em; margin: 0; color: var(--text); }
.ijd-sub { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 3px; }
.ijd-head-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* 返回链接：与大标题左边缘对齐（抵掉 ghost 按钮的内边距） */
.ijd-back { margin: 0 0 10px -9px; }

/* —— 生命周期 stepper：进度感（做完的浅、当前的实心、后面的弱），点击即推进 —— */
.ijd-steps { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: var(--panel2); border: 1px solid var(--card-border); border-radius: var(--r-pill); }
.ijd-step { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: none; background: none; border-radius: var(--r-pill); cursor: pointer; font-family: var(--font); font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; transition: 120ms; }
.ijd-step:hover:not(.is-current) { color: var(--text); background: var(--panel); }
.ijd-step.is-done { color: var(--text2); }
.ijd-step.is-done svg.ico { color: var(--green); }
.ijd-step.is-current { background: var(--accent); color: var(--on-brand); cursor: default; }
.ijd-step:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* —— 事实条：hairline 分隔的等宽单元格（1px gap 露出底色做分隔线） —— */
.ijd-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 1px; margin: 0 0 14px; background: var(--card-border); border: 1px solid var(--card-border); border-radius: var(--r-md); overflow: hidden; }
.ijd-fact { background: var(--panel); padding: 11px 14px 12px; min-width: 0; }
.ijd-fact-k { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ijd-fact-v { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--text); margin-top: 6px; min-width: 0; }
.ijd-fact-v.na { font-weight: 500; color: var(--muted); }
.ijd-fact-v .btn.sm { padding: 2px 7px; font-size: 11.5px; }

/* —— 验收闸门：三项检查 + 结论 + 唯一主操作。交付经理只看这块就知道能不能签字 —— */
.ijd-gate { display: flex; gap: 18px; flex-wrap: wrap; align-items: stretch; background: var(--panel); border: 1px solid var(--card-border); border-radius: var(--r-md); padding: 16px; margin: 0 0 14px; }
/* 三项检查按内容宽度左排（不用等分栅格——等分会把三项拉得过散） */
.ijd-checks { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 16px 30px; }
.ijd-check { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.ijd-check-ico { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--panel2); color: var(--muted); }
.ijd-check.ok .ijd-check-ico { background: var(--green-bg); color: #047857; }
.ijd-check.wip .ijd-check-ico { background: var(--amber-bg); color: #92400e; }
.ijd-check.blocked .ijd-check-ico { background: var(--red-bg); color: #b91c1c; }
.ijd-check-k { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.ijd-check-v { font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--text); margin-top: 2px; font-variant-numeric: tabular-nums; }
.ijd-check-n { font-size: 11.5px; font-weight: 500; color: var(--muted); margin-top: 2px; }
/* 结论列：窄屏时分隔线转到上方 */
.ijd-verdict { flex: 0 0 236px; margin-left: auto; display: flex; flex-direction: column; gap: 4px; padding-left: 20px; border-left: 1px solid var(--border); }
.ijd-verdict-t { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--text); }
.ijd-verdict.ready .ijd-verdict-t { color: #047857; }
.ijd-verdict-s { font-size: 11.5px; font-weight: 500; color: var(--muted); line-height: 1.5; }
.ijd-verdict .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 780px) { .ijd-verdict { padding: 14px 0 0; border-left: none; border-top: 1px solid var(--card-border); flex-basis: 100%; } }

/* 阻塞条：红版 warn-box（唯一会打断阅读的元素，只给未闭环缺陷） */
.warn-box.bad { background: var(--red-bg); border-color: rgba(239,68,68,.35); color: #b91c1c; display: flex; align-items: center; gap: 9px; }
.warn-box.bad b { color: #7f1d1d; }
.warn-box.bad .btn { margin-left: auto; flex-shrink: 0; }

/* —— 分区标题：标题 + 计数 + 右侧动作 —— */
.ijd-sec-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; flex-wrap: wrap; }
.ijd-sec-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.ijd-sec-n { font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.ijd-sec-sp { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* —— 明细行：真·表格化栅格（列在行与行之间对齐，扫一眼就知道差什么） —— */
.ijd-list { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); overflow: hidden; }
.ijd-row { display: grid; grid-template-columns: minmax(0, 1.2fr) 96px minmax(0, 1.6fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--border-soft); }
.ijd-row:first-child { border-top: none; }
.ijd-row:hover { background: var(--bg); }
/* 未完成/未闭环用左侧 inset 色条（不用 border-left，避免打乱栅格列宽） */
.ijd-row.wip { box-shadow: inset 3px 0 0 var(--amber); }
.ijd-row.bad { box-shadow: inset 3px 0 0 var(--red); }
/* 表头行：micro-caps，不参与 hover */
.ijd-row.ijd-row-h { padding: 8px 14px; background: var(--bg); border-top: none; }
.ijd-row.ijd-row-h:hover { background: var(--bg); }
.ijd-row-h > span { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
/* 绑定行（开关 + 名称 + 状态）与缺陷行（内容 + 状态 + 操作）各自的列型 */
.ijd-list.bind .ijd-row { grid-template-columns: 44px minmax(0, 1fr) 96px; }
.ijd-list.defects .ijd-row { grid-template-columns: minmax(0, 1fr) 96px auto; }
.ijd-list.cols3 .ijd-row { grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr); }
.ijd-cell { min-width: 0; }
.ijd-name { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ijd-meta { font-size: 11px; font-weight: 500; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ijd-desc { font-size: 12px; font-weight: 500; color: var(--text2); line-height: 1.55; margin-top: 3px; white-space: pre-wrap; }
.ijd-map { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; font-weight: 600; color: var(--text2); }
.ijd-map > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ijd-map > select, .ijd-map > .fsel { flex: 1; min-width: 0; }
.ijd-map .fsel-trigger { padding: 5px 8px 5px 10px; font-size: 12px; }
.ijd-acts { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.ijd-empty { padding: 26px 14px; text-align: center; font-size: 12.5px; color: var(--muted); }
/* 窄屏：栅格退成堆叠，操作左对齐 */
@media (max-width: 880px) {
  .ijd-row, .ijd-list.bind .ijd-row, .ijd-list.defects .ijd-row, .ijd-list.cols3 .ijd-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ijd-row.ijd-row-h { display: none; }
  /* 堆叠后操作组左对齐；.sce-x 基础规则的 margin-left:auto 会把 ✕ 顶到右边，这里收回 */
  .ijd-acts { justify-content: flex-start; }
  .ijd-acts .sce-x { margin-left: 0; }
}
/* 清单底部的「新增一项」行，与列表分离（虚线上边） */
.ijd-add { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; max-width: 760px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.ijd-add > label { flex: 1 1 180px; min-width: 0; }
.ijd-add > label > select, .ijd-add > label > input, .ijd-add > label > .fsel { width: 100%; min-width: 0; }

/* ============ 通用记录卡 feed（Lost & Found / Parcel 等状态化列表复用） ============ */
.rec-feed { display: flex; flex-direction: column; gap: 10px; }
.rec-card { display: flex; gap: 14px; padding: 13px 16px; border: 1px solid var(--card-border); border-radius: var(--r-md); background: var(--panel); transition: border-color 120ms, background 120ms, box-shadow 120ms; }
.rec-card.clickable { cursor: pointer; }
.rec-card.clickable:hover { border-color: var(--border-strong); box-shadow: 0 1px 3px rgba(24,24,27,.05); }
.rec-card.is-muted { opacity: .62; }
.rec-lead { flex: 0 0 auto; display: flex; align-items: flex-start; padding-top: 1px; }
.rec-thumb { width: 52px; height: 52px; border-radius: var(--r-sm); object-fit: cover; border: 1px solid var(--border); background: var(--panel2); display: block; }
.rec-thumb-ph { width: 52px; height: 52px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; color: var(--muted); background: var(--panel2); border: 1px solid var(--border); }
.rec-main { min-width: 0; flex: 1; }
.rec-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; color: var(--muted); }
.rec-eyebrow.lf-found { color: #2563eb; }
.rec-eyebrow.lf-lost { color: #d97706; }
.rec-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rec-title { font-size: 14px; font-weight: 600; color: var(--text); }
.rec-id { font-size: 11px; font-family: var(--mono); color: var(--muted); }
.rec-meta { font-size: 12px; color: var(--text2); margin-top: 5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rec-meta .sep { color: var(--border-strong); }
.rec-meta .ico { vertical-align: -.15em; }
.rec-desc { font-size: 12.5px; color: var(--text2); margin-top: 7px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rec-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 8px; }
.rec-time { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
/* 详情弹窗里的图片画廊行 */
.rec-gallery { display: flex; gap: 8px; flex-wrap: wrap; }
/* Parcel 卡右侧取件码：标签 + 打码值 + 眼睛切换，默认隐藏，点眼睛才显示 */
.pc-code-row { display: inline-flex; align-items: center; gap: 8px; }
.pc-code-row .lbl { font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.pc-code-row .code { font-family: var(--mono); font-weight: 700; font-size: 15px; letter-spacing: 2px; color: var(--text); min-width: 72px; text-align: right; }
.pc-eye { background: none; border: none; color: var(--muted); cursor: pointer; padding: 2px; display: inline-flex; border-radius: var(--r-sm); }
.pc-eye:hover { color: var(--text); background: var(--bg); }
/* 大号取件码展示（Parcel 详情） */
.pc-code-box { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: var(--panel2); }
.pc-code-box .code { font-family: var(--mono); font-size: 30px; font-weight: 700; letter-spacing: 6px; color: var(--text); }
.pc-code-box .lbl { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
/* 公告类型分类色（须排在 .tag 之后以覆盖基础 color） */
.noti-c-water   { color: #2563eb; }  /* 水 —— 蓝 */
.noti-c-power   { color: #d97706; }  /* 电 —— 琥珀 */
.noti-c-fire    { color: #dc2626; }  /* 火警 —— 红 */
.noti-c-network { color: #7c3aed; }  /* 网络 —— 紫 */
.noti-c-general { color: var(--muted); }  /* 通用 —— 中灰 */
/* 行内状态切换下拉：边框随状态语义色 */
.mr-status-sel { padding: 5px 8px; font-size: 12px; font-weight: 600; min-width: 118px; }
.mr-status-sel.mr-open   { border-color: var(--amber); color: #92400e; }
.mr-status-sel.mr-prog   { border-color: var(--info);  color: #3730a3; }
.mr-status-sel.mr-closed { border-color: var(--green); color: #047857; }
/* 内容预览：单行省略 */
.mr-preview { font-size: 12px; max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 类型管理行 */
.mr-type-list { display: flex; flex-direction: column; gap: 8px; }
.mr-type-row { display: flex; gap: 8px; align-items: center; }
.mr-type-row input { flex: 1; min-width: 0; }

/* ============================================================
   住户端提交页 submit.html（移动优先，独立于管理控制台）
   ============================================================ */
body.rp { display: block; background: var(--bg); overflow-x: hidden; }
.rp-shell { max-width: 520px; margin: 0 auto; padding: 28px 16px 48px; display: flex; flex-direction: column; min-height: 100%; }
.rp-head { text-align: center; padding: 4px 0 22px; }
.rp-brand { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rp-title { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin: 10px 0 6px; }
.rp-sub { color: var(--muted); margin: 0; font-size: 14px; }
.rp-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--elev-2); }
.rp-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.rp-field:last-of-type { margin-bottom: 0; }
.rp-field > label { font-size: 13px; font-weight: 700; color: var(--text); }
.rp-field .rp-hint { font-size: 12px; color: var(--muted); font-weight: 500; margin-top: -2px; }
/* 15px 起步：iOS 聚焦不缩放；触摸友好的高度。min-width:0 覆盖基础 input/textarea 的 min-width，避免窄屏溢出 */
.rp-field input, .rp-field select, .rp-field textarea { width: 100%; min-width: 0; font-size: 15px; padding: 11px 12px; }
.rp-field textarea { min-height: 120px; font-family: var(--font); font-weight: 500; resize: vertical; }
.rp-type-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-type { flex: 1 1 104px; min-width: 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--panel); padding: 13px 10px; font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--text2); cursor: pointer; text-align: center; transition: 120ms; }
.rp-type:hover { border-color: var(--border-strong); color: var(--text); }
.rp-type.on { border-color: var(--accent); background: var(--brand-tint); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); }
.rp-submit { width: 100%; margin-top: 20px; height: 48px; font-size: 15px; }
.rp-msg { color: var(--red); font-size: 13px; min-height: 4px; margin-top: 10px; }
.rp-foot { text-align: center; color: var(--muted); font-size: 12px; margin-top: 22px; }
/* 成功态 */
.rp-done { text-align: center; padding: 22px 6px 10px; }
.rp-done .rp-check { width: 64px; height: 64px; border-radius: 50%; background: var(--green-bg); color: var(--green); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.rp-done h2 { font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.rp-ref { font-family: var(--mono); font-weight: 700; background: var(--panel2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 12px; display: inline-block; margin-top: 4px; }

/* ============ 集成生态：Configuration 页 Hero + 品牌磁贴 ============ */
.integ-hero { display: flex; flex-wrap: wrap; gap: 24px 32px; align-items: flex-start; justify-content: space-between;
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel2) 100%);
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 24px; margin-bottom: 20px; }
.integ-hero-lead { flex: 1 1 340px; min-width: 0; }
.integ-kicker { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--muted); }
.integ-title { font-size: 22px; font-weight: 700; margin: 3px 0 6px; letter-spacing: -.01em; }
.integ-stats { display: flex; gap: 10px; flex: 0 1 auto; }
.integ-stat { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 18px; min-width: 92px; text-align: center; box-shadow: var(--elev-2); }
.integ-stat-num { font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.integ-stat-label { font-size: 11px; color: var(--muted); margin-top: 6px; font-weight: 600; }

/* 域卡头部 */
.dom-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.dom-ico { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: var(--r-md); background: var(--panel2); border: 1px solid var(--border); color: var(--text2); }
.dom-title { margin: 0; font-size: 15px; font-weight: 700; }
.dom-blurb { font-size: 12px; margin-top: 1px; }

/* 品牌磁贴网格 */
.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-bottom: 14px; }
.brand-tile { display: flex; flex-direction: column; align-items: stretch; gap: 10px; text-align: left; width: 100%;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; cursor: pointer;
  font-family: var(--font); transition: border-color 120ms, box-shadow 120ms, background 120ms; }
.brand-tile:hover { border-color: var(--border-strong); }
.brand-tile.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
/* logo 条：白底承托宽字标/彩色商标，object-fit:contain 统一各种比例 */
.brand-logobar { height: 52px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 7px 12px; }
.brand-logobar.is-mono { font-family: var(--mono); font-weight: 700; font-size: 16px; letter-spacing: .02em; color: var(--text2); background: var(--panel2); }
.brand-logo { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.brand-body { display: flex; flex-direction: column; gap: 3px; }
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.brand-name { font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-note { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700;
  padding: 3px 8px; border-radius: var(--r-pill); letter-spacing: .01em; white-space: nowrap; }
.brand-tile.status-live .brand-pill { background: var(--green-bg); color: #047857; }
.brand-tile.status-ready .brand-pill { background: var(--info-bg); color: #3b56c9; }
.brand-tile.status-roadmap .brand-pill { background: var(--amber-bg); color: #92400e; }
.brand-tile.status-roadmap { opacity: .82; }
.brand-tile.status-roadmap .brand-mono { border-style: dashed; }

/* ============ Subscription 订阅方案 ============ */
.sub-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
@media (max-width: 980px) { .sub-layout { grid-template-columns: 1fr; } }
.sub-sec-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 30px 0 12px; padding-top: 18px; border-top: 1px solid var(--border-soft); }
/* 弹窗(Pricing Settings)内的分节标题不需要那么大的间隔 */
.modal .sub-sec-title { margin: 18px 0 10px; padding-top: 12px; }

/* 标准版卡 */
.sub-plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sub-plan-name { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.sub-price { white-space: nowrap; }
.sub-price-num { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.sub-price-num.sm { font-size: 18px; }
.sub-price-unit { font-size: 11.5px; color: var(--muted); }
.sub-included { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 720px) { .sub-included { grid-template-columns: 1fr; } }
.sub-inc-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: var(--r-md); background: var(--panel2); }
.sub-inc-item > div { min-width: 0; }
.sub-inc-ico { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--border); color: var(--text2); }
.sub-inc-label { font-size: 13px; font-weight: 700; }
.sub-inc-check { margin-left: auto; color: var(--green); flex: 0 0 auto; align-self: center; }

/* Addon 磁贴：可点选，选中描边加深 */
.sub-addon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.sub-addon { text-align: left; font-family: var(--font); cursor: pointer; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; display: flex; flex-direction: column; transition: border-color 120ms, box-shadow 120ms, transform 120ms; }
.sub-addon:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.sub-addon.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sub-addon-top { display: flex; align-items: center; justify-content: space-between; }
.sub-addon-pill { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-pill); background: var(--panel2); border: 1px solid var(--border); color: var(--muted); }
.sub-addon-pill.on { background: var(--accent); border-color: var(--accent); color: var(--on-brand); }
.sub-addon-cta { margin-top: 10px; font-size: 11.5px; font-weight: 600; color: var(--muted); border-top: 1px dashed var(--border); padding-top: 8px; }
.sub-addon-cta.on { color: var(--text); }

/* 报价面板 */
.sub-quote { position: sticky; top: 12px; }
.sub-quote-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; padding: 5px 0; }
.sub-quote-row.total { font-size: 15px; font-weight: 700; }
.sub-quote-row.muted-row { color: var(--muted); font-size: 12px; }
.sub-quote-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sub-quote-div { border-top: 1px solid var(--border); margin: 8px 0 4px; }

/* ============ Amenities Booking 公共设施预约 ============ */
.amen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; max-width: 1100px; }
.amen-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; transition: border-color 120ms, box-shadow 120ms, transform 120ms; }
.amen-card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(24,24,27,.2); }
.amen-card.off { opacity: .78; }
.amen-cover { position: relative; height: 128px; background: var(--panel2); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border-soft); cursor: zoom-in; }
.amen-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.amen-count { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill); background: rgba(24,24,27,.72); color: #fff; }
.amen-pill { position: absolute; left: 8px; top: 8px; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: var(--r-pill); }
.amen-pill.ok { background: var(--green-bg); color: #047857; }
.amen-pill.off { background: var(--amber-bg); color: #92400e; }
.amen-body { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.amen-name { font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.amen-desc { font-size: 12.5px; margin-top: 5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.amen-meta { display: flex; flex-direction: column; gap: 7px; margin-top: 13px; font-size: 12px; color: var(--text2); }
.amen-meta > span { display: inline-flex; align-items: center; gap: 7px; }
.amen-meta svg { flex: 0 0 auto; color: var(--muted); }
/* 卡片操作条：与 meta 固定间距 + 上分隔线（shadcn card footer 感） */
.amen-actions { display: flex; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft); }

/* 表单里的每周开放日复选块 */
.amen-day { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding: 5px 10px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--panel); color: var(--muted); cursor: pointer; user-select: none; transition: all 120ms; }
.amen-day:hover { border-color: var(--border-strong); }
.amen-day.on { background: var(--accent); border-color: var(--accent); color: var(--on-brand); }

/* Addon 磁贴内的细分能力：included 打勾清单 + extra 可点选(额外加钱) */
.sub-feat-list { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.sub-feat { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text2); }
.sub-feat-check { color: var(--green); display: flex; flex: 0 0 auto; }
.sub-feat.extra { cursor: pointer; border-radius: var(--r-sm); margin: 0 -4px; padding: 3px 4px; color: var(--muted); }
.sub-feat.extra:hover { background: var(--panel2); }
.sub-feat.extra.on { color: var(--text); }
.sub-feat-price { margin-left: auto; flex: 0 0 auto; font-variant-numeric: tabular-nums; font-size: 11.5px; font-weight: 600; }
.sub-feat-box { width: 14px; height: 14px; flex: 0 0 auto; border: 1px solid var(--border-strong); border-radius: 4px; display: flex; align-items: center; justify-content: center; background: var(--panel); }
.sub-feat-box.on { background: var(--accent); border-color: var(--accent); color: var(--on-brand); }
/* 报价面板里的 extra 行：缩进弱化 */
.sub-quote-row.sub-quote-extra { font-size: 12px; color: var(--text2); padding: 2px 0 2px 14px; }

/* Standard 卡：两大产品(App/平台)面板，各带标准能力清单 */
.sub-std-prod { flex-direction: column; align-items: stretch; }
.sub-std-head { display: flex; align-items: center; gap: 10px; }

/* Your Quote 底部：全包摊薄的每房每周均价，强调块 */
.sub-quote-avg { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 10px 12px; background: var(--panel2); border: 1px solid var(--border); border-radius: var(--r-md); font-weight: 700; font-size: 14px; }
.sub-quote-avg .sub-quote-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ===== 工单会话（管理员回复 ↔ 住户 App 可见）===== */
.mr-thread { border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; background: var(--panel2); }
.mr-msgs { display: flex; flex-direction: column; gap: 10px; max-height: 300px; overflow-y: auto; }
.mr-msg { background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--info); border-radius: var(--r-sm); padding: 8px 10px; }
/* 内部备注做成虚线+琥珀，和"住户能看到"的一眼分开 */
.mr-msg.internal { border-left-color: var(--amber); border-style: dashed; background: var(--amber-bg); }
.mr-msg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.mr-msg-who { font-size: 12px; font-weight: 700; }
.mr-msg-time { margin-left: auto; font-size: 11px; color: var(--muted); }
.mr-msg-x { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; border-radius: 4px; }
.mr-msg-x:hover { color: var(--red); background: var(--bg); }
.mr-msg-body { font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
.tag.mr-visible { background: var(--info-bg); color: #3730a3; font-size: 10px; padding: 0 6px; }
.tag.mr-internal { background: var(--amber-bg); color: #92400e; font-size: 10px; padding: 0 6px; }
/* 住户回帖：换个方向的强调（绿+右缩进），和员工发的一眼分开 */
.mr-msg.from-resident { border-left-color: var(--green); margin-left: 24px; background: var(--panel2); }
.tag.mr-from-resident { background: var(--green-bg); color: #047857; font-size: 10px; padding: 0 6px; }
.mr-compose { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
/* 全局 label 是 column 布局（表单用），这里要 checkbox 与文字同行，故显式覆盖 */
.mr-internal-toggle { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--text2); cursor: pointer; }
.mr-internal-toggle input { margin: 0; }
.mr-reply-count { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--text2); }