/* ============================================================
   寄宿考研管理系统 · style.css  v1
   设计系统：亮/暗双主题 + 设计令牌 + 桌面侧栏 / 移动端底部 Tab
   ============================================================ */
:root {
  /* 品牌色 */
  --primary: #2D5BFF;
  --primary-dark: #1A3FB8;
  --primary-hover: #1A3FB8;
  --brand: #2D5BFF;
  --brand-50: #EDF1FF;

  /* 背景 / 卡片 */
  --bg: #F5F7FB;
  --sidebar: #16181C;
  --sidebar-2: #101114;
  --card: #ffffff;
  --page-bg: #F5F7FB;

  /* 导航栏（可配置：--nav-bg / --nav-text / --nav-active-bg） */
  --nav-bg: #16181C;
  --nav-active-bg: #24272C;

  /* 文字 */
  --text: #1C2433;
  --muted: #7A8499;
  --ink-2: #3A3F46;
  --ink-3: #8A919C;

  /* 边框 / 阴影 */
  --border: #E3E8F0;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.08);

  /* 语义色 */
  --avail: #22c55e;
  --occupied: #C62E39;
  --reserved: #B45309;
  --danger: #C62E39;
  --warn: #B7791F;
  --free: #EAF7F0;

  /* 字体令牌 */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --mono: 'SF Mono', 'Cascadia Mono', Consolas, 'Courier New', monospace;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;

  /* 导航栏（侧边栏 / TabBar 用） */
  --nav-text: #C9CDD3;
  --nav-title: #f8fafc;
  --nav-active: #ffffff;

  /* 圆角 */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  /* 状态色块文字色（由 theme.js 按底色亮度自适应，勿手改） */
  --occupied-text: #FFFFFF;
  --reserved-text: #FFFFFF;
  --avail-text: #0b2b12;
  --free-text: #0F6A3C;
}

[data-theme="dark"] {
  --primary: #4D7DFF;
  --primary-hover: #2D5BFF;
  --brand-50: #1E2126;
  --bg: #16181C;
  --page-bg: #16181C;
  --card: #1E2126;
  --text: #F4F5F6;
  --muted: #8A919C;
  --ink-2: #C9CDD3;
  --ink-3: #6B7280;
  --border: #2A2E34;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.3);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.4);
  --sidebar: #101114;
  --sidebar-2: #0E0F11;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* 键盘焦点可见（全局兜底） */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

html, body { height: 100%; }

html, body { overflow-x: hidden; }
body {
  font-family: var(--font);
  background: var(--page-bg);
  color: var(--text);
  display: flex;
  min-height: 100vh;
  font-size: var(--fs-md);
  -webkit-tap-highlight-color: transparent;
}
.main { min-width: 0; }

/* ============ 滚动条：默认全局隐藏，仅在滚动时短暂显示（JS 切换 .is-scrolling） ============ */
* { -ms-overflow-style: none; scrollbar-width: none; }
::-webkit-scrollbar { width: 0; height: 0; background: transparent; display: none; }
.is-scrolling { -ms-overflow-style: auto; scrollbar-width: thin; scrollbar-color: rgba(148,163,184,.55) transparent; }
.is-scrolling::-webkit-scrollbar { width: 9px; height: 9px; display: block; }
.is-scrolling::-webkit-scrollbar-track { background: transparent; }
.is-scrolling::-webkit-scrollbar-thumb { background: rgba(148,163,184,.5); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
.is-scrolling::-webkit-scrollbar-corner { background: transparent; }

/* ============ 侧边栏（桌面） ============ */
.sidebar {
  width: 240px;
  background: var(--nav-bg, var(--sidebar));
  color: var(--nav-text);
  padding: 24px 0 16px;
  flex-shrink: 0;
  position: fixed; left: 0; top: 0; bottom: 0;
  overflow-y: auto;
  z-index: 100;
  display: flex;
  flex-direction: column;
}
/* logo：左对齐，与导航项对齐 */
.sidebar .logo { text-align: left; padding: 6px 22px 16px; border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 10px; }
.sidebar .logo h2 { font-size: 1.12em; font-weight: 700; color: var(--nav-title, #fff); display: flex; align-items: center; gap: 9px; letter-spacing: .3px; }
.sidebar .logo h2 svg { opacity: .92; }
.sidebar .logo p { font-size: .68em; color: var(--nav-text); opacity: .55; margin: 4px 0 0 27px; letter-spacing: 3px; }
.sidebar nav { flex: 1; padding: 4px 0; }
/* 导航项：圆角胶囊，两侧留白 */
.sidebar nav a, .sidebar-foot button {
  position: relative; display: flex; align-items: center; gap: 11px;
  color: var(--nav-text); margin: 2px 12px; padding: 9px 13px 9px 16px; border-radius: 10px;
  text-decoration: none; font-size: var(--fs-md); cursor: pointer;
  transition: box-shadow .16s ease, color .16s ease;
  border: none; background: none; width: calc(100% - 24px); text-align: left; font-family: inherit;
}
.sidebar nav a svg, .sidebar-foot button svg { opacity: .8; flex-shrink: 0; }
.sidebar nav a:hover, .sidebar-foot button:hover { box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--nav-title) 10%, transparent); color: var(--nav-title); }
.sidebar nav a.active { background: var(--nav-active-bg); color: var(--nav-title); font-weight: 600; box-shadow: none; }
.sidebar nav a.active svg { opacity: 1; }
.sidebar nav a.active::before { content: ''; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 3px; height: 17px; border-radius: 2px; background: var(--nav-title); }
.sidebar .divider { border-top: 1px solid rgba(255,255,255,.07); margin: 12px 16px; }
/* 导航分组标题：克制弱化 */
.nav-group-title {
  font-size: .66em; font-weight: 600; letter-spacing: 1.6px;
  color: var(--nav-text); opacity: .4;
  padding: 14px 24px 5px; user-select: none;
}
/* 主题按钮图标：亮色显示月亮、暗色显示太阳 */
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: inline-block; }
.sidebar-foot { padding: 8px 0 2px; border-top: 1px solid rgba(255,255,255,.07); margin-top: 6px; }

/* ============ 主内容区 ============ */
.main {
  flex: 1;
  padding: 24px;
  margin-left: 240px;
  overflow-y: auto;
  min-height: 100vh;
  padding-bottom: 40px;
}

/* ============ 卡片 ============ */
.card {
  background: var(--card);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: 24px;
  margin-bottom: 24px;
  border: 1px solid var(--border);
}
.card h3 {
  color: var(--text);
  margin-bottom: 20px;
  font-size: 1.3em;
  font-weight: 700;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--border);
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card h3::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 40px; height: 2px; background: var(--primary); border-radius: 2px; }
.card h4 { color: var(--text); margin-bottom: 12px; font-size: 1.05em; }

/* ============ 统计卡（KPI） ============ */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat-card { background: var(--card); border-radius: var(--r-md); padding: 18px 16px; text-align: center; box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
.stat-card .stat-value { font-size: 1.9rem; font-weight: 700; color: var(--primary); font-family: var(--mono); }
.stat-card .stat-label { font-size: 0.85em; color: var(--muted); margin-top: 4px; }
.stat-card.warn { border-color: var(--warn); }
.stat-card.warn .stat-value { color: var(--warn); }
.stat-card.ok .stat-value { color: var(--avail); }

/* ============ 分段控件 SegBar ============ */
.segbar {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  background: transparent; border: none;
  border-radius: 10px;
  padding: 4px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  flex-wrap: wrap;
}
.seg {
  padding: 7px 16px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  white-space: nowrap;
}
.seg:hover { color: var(--text); }
.seg.active { background: var(--primary); color: var(--primary-text, #fff); }

/* ============ 搜索栏 ============ */
.search-bar { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
.search-bar input, .search-bar select {
  flex: 1; min-width: 160px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: var(--fs-md);
  font-family: var(--mono);
  background: var(--card);
  color: var(--text);
  transition: all 0.2s ease;
}
.search-bar input:focus, .search-bar select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(45,91,255,0.14); outline: none; }

/* ============ 房间网格 ============ */
.grid-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; }
.room-card {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.room-card:hover { box-shadow: var(--shadow-lg); border-color: var(--primary); }
.room-card .room-header { font-weight: 600; font-size: 1.1em; margin-bottom: 8px; color: var(--text); min-width: 0; word-break: break-word; }
.room-card .rc-badges { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.rc-badge { font-size: 0.62em; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--border); color: var(--muted); }
.rc-badge-ok { background: var(--brand-50); color: var(--primary); }
.room-card .op-menu-anchor { float: right; margin-top: -4px; }
.room-card .op-trigger { padding: 2px 8px; border-radius: 8px; }
.room-card .op-trigger:hover { background: var(--border); color: var(--primary); border-color: var(--border); }
.room-card .occupants { font-size: 0.85em; color: var(--muted); min-height: 40px; word-break: break-all; }
.room-card .type-badge { font-size: 0.75em; padding: 3px 10px; border-radius: 12px; background: var(--border); color: var(--muted); display: inline-block; margin-top: 8px; }
.room-card .status-indicator { position: absolute; top: 10px; right: 10px; width: 10px; height: 10px; border-radius: 50%; }
.status-available { background: var(--avail); }
.status-occupied { background: var(--occupied); }
.status-booked { background: var(--reserved); }

/* ============ 表格 ============ */
.table-container { overflow-x: auto; margin: 16px 0; -webkit-overflow-scrolling: touch; }
.table-container table { min-width: 800px; }
table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 16px 0; font-size: var(--fs-md); table-layout: auto; border-radius: var(--r-md); overflow: hidden; }
th, td { border-bottom: 1px solid var(--border); padding: 12px 14px; text-align: left; word-wrap: break-word; overflow-wrap: break-word; line-height: 1.6; vertical-align: middle; }
th { background: linear-gradient(135deg, var(--card) 0%, var(--bg) 100%); font-weight: 600; color: var(--muted); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; }
td { background: var(--card); min-width: 70px; }
tr:hover td { background: var(--bg); }
tr:last-child td { border-bottom: none; }
td.num, .num { font-family: var(--mono); }
.td-date { font-family: var(--mono); }
.empty-tip { text-align: center; color: var(--muted); padding: 32px 0; }

/* ============ 徽章 ============ */
.badge { padding: 4px 12px; border-radius: 12px; font-size: 0.75em; color: white; font-weight: 500; white-space: nowrap; display: inline-block; }
.badge-available { background: #fff; color: #475569; border: 1px solid #E2E8F0; }
.badge-occupied { background: #fff; color: #DC2626; border: 1px solid #FECACA; }
.badge-reserved { background: #fff; color: #D97706; border: 1px solid #FDE68A; }
.badge-full { background: #2D5BFF; }
.badge-summer { background: #f97316; }
.badge-winter { background: #14b8a6; }
.badge-monthly { background: #8b5cf6; }
.badge-gray { background: var(--ink-3); }

/* ============ 按钮 ============ */
.btn {
  padding: 9px 16px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: var(--fs-md);
  font-weight: 500;
  transition: all 0.2s ease;
  margin: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--primary); color: var(--primary-text, #fff); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-success {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #fff;
  box-shadow: 0 2px 8px rgba(59,130,246,.25);
}
.btn-success:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 4px 12px rgba(59,130,246,.35);
}
.btn-warning { background: var(--reserved); color: var(--reserved-text); }
.btn-warning:hover { background: #d97706; }
.btn-danger { background: var(--danger); color: var(--occupied-text); }
.btn-danger:hover { background: #dc2626; }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--muted); }
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn-sm { padding: 5px 12px; font-size: var(--fs-sm); }
.btn-block { width: 100%; justify-content: center; }

/* ============ 表单 ============ */
.form-group { margin: 0 0 14px; }
.form-group:last-child { margin-bottom: 0; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text); letter-spacing: .2px; }
input, select, textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13.5px;
  font-family: var(--font);
  background: var(--card);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: .75; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}
input[type="date"], input[type="datetime-local"], input[type="number"] { font-family: var(--font); }
input[readonly] { background: var(--bg); color: var(--muted); }
textarea { min-height: 72px; line-height: 1.5; resize: vertical; padding-top: 9px; }
/* 下拉框：统一自定义箭头，跨浏览器一致 */
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A919C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 15px;
}

/* ============ 自定义下拉框（js-cb 模式） ============ */
.cb {
  position: relative;
  width: 100%;
  display: inline-block;
  vertical-align: middle;
}
.cb-input {
  width: 100%;
  min-height: 38px;
  padding: 8px 34px 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13.5px;
  font-family: var(--font);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  align-items: center;
  position: relative;
  user-select: none;
}
.cb-input:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}
.cb.cb-open .cb-input,
.cb-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}
.cb-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}
.cb-text.cb-placeholder {
  color: var(--ink-3);
  opacity: .75;
}
.cb-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  display: flex;
  align-items: center;
  transition: transform 0.2s ease;
  pointer-events: none;
}
.cb.cb-open .cb-arrow {
  transform: translateY(-50%) rotate(180deg);
}
.cb-list {
  display: none;
  position: absolute;
  left: 0;
  z-index: 500;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 280px;
  min-width: 100%;
  padding: 4px;
  animation: cbFadeIn 0.15s ease;
  /* JS 会改为 fixed 定位，避免父容器 overflow 截断 */
}
.cb.cb-open .cb-list {
  display: block;
}
@keyframes cbFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.cb-item {
  padding: 8px 12px;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.12s ease;
  line-height: 1.4;
}
.cb-item:hover {
  background: var(--bg);
}
.cb-item.cb-active {
  background: var(--brand-50);
  color: var(--primary);
}
.cb-item.cb-selected {
  font-weight: 600;
  color: var(--primary);
  background: var(--brand-50);
}
.cb-item.cb-disabled {
  color: var(--ink-3);
  opacity: 0.5;
  cursor: not-allowed;
}

/* 搜索栏内的下拉框适配 */
.search-bar .cb {
  flex: 1;
  min-width: 160px;
}
.search-bar .cb-input {
  padding: 9px 34px 9px 12px;
  font-family: var(--mono);
}

/* ============ 自定义日期框（连字符显示） ============ */
.date-wrap {
  position: relative;
  width: 100%;
  display: inline-block;
}
.date-wrap input[type="date"] {
  position: relative;
  z-index: 2;
  color: transparent;
  caret-color: transparent;
}
.date-wrap input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.date-wrap input[type="date"]::-webkit-datetime-edit,
.date-wrap input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.date-wrap input[type="date"]::-webkit-datetime-edit-text,
.date-wrap input[type="date"]::-webkit-datetime-edit-year-field,
.date-wrap input[type="date"]::-webkit-datetime-edit-month-field,
.date-wrap input[type="date"]::-webkit-datetime-edit-day-field {
  color: transparent !important;
}
.date-text {
  position: absolute;
  left: 12px;
  right: 34px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  font-size: 13.5px;
  font-family: var(--font);
  color: var(--text);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  user-select: none;
}
.date-text.date-empty {
  color: var(--ink-3);
  opacity: .75;
}

.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(182px, 1fr)); gap: 14px 16px; }
.form-row .form-group { margin-bottom: 0; }
/* 固定两列表单：字段成对分组，桌面一屏放完、不出现纵向滚动条 */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.form-grid-2 .form-group { margin-bottom: 0; min-width: 0; }
@media (max-width: 640px) {
  .form-grid-2 { grid-template-columns: 1fr; gap: 12px; }
}
.error-message { color: var(--danger); font-size: var(--fs-sm); margin-top: 5px; min-height: 0; }
.checkbox-line { display: flex; align-items: center; gap: 9px; margin: 4px 0 2px; }
.checkbox-line input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; flex: 0 0 18px; accent-color: var(--primary); cursor: pointer; }
.checkbox-line label { margin: 0; font-size: 13.5px; cursor: pointer; }

/* 费用摘要卡 */
.summary-box { background: var(--bg); padding: 14px 16px; border-radius: 10px; margin: 14px 0; border: 1px solid var(--border); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; align-items: center; }
/* 基本信息两列网格：label 定宽 + 值紧跟，紧凑不悬空 */
.summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.summary-row { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-md); min-width: 0; }
.summary-row > span:first-child { flex: 0 0 76px; color: var(--muted); font-size: 0.92em; }
.summary-row > span:last-child { font-weight: 600; word-break: break-all; }
.summary-row.total { font-weight: 600; border-top: 1px dashed var(--border); padding-top: 10px; grid-column: 1 / -1; }
.summary-row.total > span:last-child { color: var(--primary); }
/* 弹窗内明细表格：固定列布局，列宽不随内容漂移 */
.tbl-fixed { table-layout: fixed; }
.tbl-fixed th, .tbl-fixed td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 弹窗内表格不受全局 min-width:800px 影响，随弹窗自适应 */
.modal-content .tbl-fixed, .modal-content table { min-width: 0; }
/* 详情类弹窗（含明细表）：固定上限宽度，避免被内容撑成大窗 */
.modal-content:has(.room-detail-grid) { width: min(880px, 96vw); }

/* 预订弹窗：左右两栏布局 */
.modal-content:has(.book-layout) { width: min(780px, 96vw); }
.book-layout { display: flex; gap: 20px; margin-top: 4px; }
.book-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.book-col-left { flex: 1 1 55%; }
.book-col-right { flex: 1 1 45%; }
.form-section-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  margin-bottom: -2px; letter-spacing: .2px;
  display: flex; align-items: center; gap: 8px;
}
.form-section-title::before {
  content: ''; width: 3px; height: 14px; border-radius: 2px;
  background: var(--primary);
}
.price-panel {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px; display: flex;
  flex-direction: column; gap: 12px;
}
.price-panel .summary-box { margin-top: 2px; }
.price-panel .summary-row { padding: 8px 0; }
.price-panel .summary-row > span:last-child {
  white-space: nowrap;
  word-break: normal;
  font-family: var(--mono);
  margin-left: auto;
}
@media (max-width: 560px) {
  .book-layout { flex-direction: column; gap: 16px; }
  .book-col-left, .book-col-right { flex: 1 1 100%; }
}

/* ============ 教室座位（按排布局，A+C 风格） ============ */
.classroom-map { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 18px; }
.seat-row { display: flex; align-items: flex-start; gap: 10px; }
.seat-row-label { flex: 0 0 54px; font-size: 0.72em; color: var(--muted); padding-top: 14px; font-weight: 600; }
.seat-row-seats { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; }
.seat-cell {
  flex: 1 1 0; min-width: 64px; max-width: 210px;
  min-height: 74px;
  display: flex; flex-direction: column; justify-content: space-between;
  border-radius: 10px; padding: 8px 10px;
  font-size: 13px; cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.15s, box-shadow 0.15s;
}
.seat-cell:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.seat-cell.free { background: var(--ov-avail-bg); border-color: var(--ov-avail-bg); color: var(--text); }
[data-theme="dark"] .seat-cell.free { background: #2A2E34; border-color: #2A2E34; color: #C9CDD3; }
.seat-cell.used { background: var(--occupied); border-color: var(--occupied); color: var(--occupied-text); }
[data-theme="dark"] .seat-cell.used { background: #5C1A1F; border-color: #5C1A1F; color: #FCA5A5; }
[data-theme="dark"] .seat-cell.seat-cell-lg { box-shadow: 0 2px 6px rgba(0,0,0,.3); }
[data-theme="dark"] .seat-cell.seat-cell-lg:hover { box-shadow: 0 4px 12px rgba(0,0,0,.4); }

.seat-cell.seat-spacer { visibility: hidden; pointer-events: none; border: none; background: transparent; box-shadow: none; }
.seat-cell .sc-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.sc-no { font-weight: 700; font-size: 0.95em; }
.sc-state { font-size: 0.62em; opacity: 0.8; }
.sc-name { font-size: 0.85em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
.sc-bed { font-size: 0.68em; opacity: 0.8; cursor: pointer; margin-top: 2px; align-self: flex-start; }
.sc-bed:hover { text-decoration: underline; }
/* 教室详情弹窗加宽（仅含 classroom-map 时生效） */
.modal-content:has(.classroom-map) { width: min(780px, 96vw); }

/* ============ 教室示意图（方格画布） ============ */
.cm-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.cm-tool {
  padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--card);
  cursor: pointer; font-size: 0.8em; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 0.15s;
}
.cm-tool:hover { border-color: var(--primary); }
.cm-tool.active { border-color: var(--primary); color: var(--primary); font-weight: 600; background: var(--brand-50); }
.cm-swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid rgba(0,0,0,0.12); }
.cm-grid {
  display: grid; gap: 2px; padding: 10px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  margin: 12px 0; overflow-x: auto; user-select: none;
  touch-action: none;
}
.cm-cell {
  width: 26px; height: 26px; border-radius: 4px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 0.62em; color: #fff; font-weight: 600;
  border: 1px solid transparent;
}
.cm-cell.cm-empty { background: transparent; border-color: var(--border); color: transparent; }
[data-theme="dark"] .cm-cell.cm-empty { border-color: #2A2E34; }
.cm-wall { background: var(--ink-2); }
.cm-desk { background: #52C41A; }
.cm-chair { background: #0ea5e9; }
.cm-aisle { background: var(--corridor); color: var(--corridor-text); }
[data-theme="dark"] .cm-aisle { background: #24272C; color: var(--ink-3); }
.cm-podium { background: #8b5cf6; }
.cm-window { background: #06b6d4; }
.cm-door { background: #b45309; }
.cm-seat { background: #2D5BFF; font-size: 0.58em; padding: 0 2px; cursor: grab; }
.cm-seat:active { cursor: grabbing; }
.cm-cell[data-dragtarget="1"] { outline: 3px solid var(--primary); outline-offset: -1px; z-index: 3; transform: scale(1.06); }
/* 示意图查看模式：座位实时状态 */
.cm-view .cm-cell { cursor: default; }
.cm-cell.cm-used { background: var(--ov-occupied-bg); color: var(--text); font-size: 0.6em; font-weight: 700; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-cell.cm-free { background: var(--ov-avail-bg); color: var(--text); font-size: 0.6em; font-weight: 600; }
[data-theme="dark"] .cm-cell.cm-free { color: #dcfce7; }
.cm-cell.cm-miss { background: var(--ov-reserved-bg); color: var(--text); font-size: 0.58em; font-weight: 700; }
.cm-legend { display: inline-block; padding: 2px 8px; border-radius: 8px; font-size: 0.72em; margin-right: 6px; }
.cm-legend-used { background: var(--occupied); color: var(--occupied-text); }
.cm-legend-free { background: var(--avail); color: var(--avail-text); }
.cm-legend-miss { background: var(--reserved); color: var(--reserved-text); }

/* ============ 楼层示意图（整层平面总览） ============ */
.floor-wrap {
  display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start;
  padding: 18px; margin: 6px 0 14px;
  background: var(--bg); border: 1px dashed var(--border); border-radius: 12px;
}
.floor-room {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px; cursor: pointer; transition: all 0.15s;
}
.floor-room:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.floor-room .floor-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-weight: 700; font-size: 0.85em; margin-bottom: 8px; color: var(--text); }
.floor-room .floor-stats { font-size: 0.72em; font-weight: 500; color: var(--muted); }
.floor-room .cm-grid { padding: 6px; gap: 2px; margin: 0; border-radius: 8px; }
.floor-room .cm-cell { width: 22px; height: 22px; font-size: 0.52em; cursor: pointer; }
.floor-room.no-map { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 130px; min-height: 90px; text-align: center; color: var(--muted); font-size: 0.8em; }

/* 楼层排布（自由摆放教室位置） */
.floor-canvas {
  position: relative;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 47px, var(--border) 47px, var(--border) 48px),
    repeating-linear-gradient(90deg, transparent, transparent 47px, var(--border) 47px, var(--border) 48px),
    var(--bg);
  border: 1px solid var(--border); border-radius: 12px;
  margin: 8px 0 16px; overflow: auto;
}
/* 楼层总图：表格合并单元格布局 */
.floor-scroll {
  overflow-x: auto;
  padding-bottom: 0;
  position: relative;
  scrollbar-width: none;
}
.floor-scroll::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(148,163,184,.5); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.75); }
::-webkit-scrollbar-corner { background: transparent; }
.floor-table {
  display: grid; gap: 4px; padding: 4px;
  grid-template-columns: repeat(var(--fc, 2), minmax(120px, 1fr));
  grid-auto-rows: minmax(8px, auto);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 47px, var(--border) 47px, var(--border) 48px),
    repeating-linear-gradient(90deg, transparent, transparent 47px, var(--border) 47px, var(--border) 48px),
    var(--bg);
  border: 1px solid var(--border); border-radius: 12px;
  margin: 8px 0 16px; overflow: auto; min-width: 0;
}
.floor-block {
  position: absolute;
  background: var(--card); border: 1.5px solid var(--ink-3); border-radius: 6px;
  padding: 10px; cursor: pointer; transition: all 0.15s;
}
.floor-block:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.floor-block .floor-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-weight: 700; font-size: 0.85em; margin-bottom: 6px; color: var(--text); }
.floor-block .floor-stats { font-size: 0.72em; font-weight: 500; color: var(--muted); }
.floor-block .cm-grid { padding: 6px; gap: 2px; margin: 0; border-radius: 8px; background: var(--bg); }
.floor-block .cm-cell { width: 22px; height: 22px; font-size: 0.52em; cursor: pointer; }
.floor-block.no-map { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 120px; min-height: 80px; text-align: center; color: var(--muted); font-size: 0.8em; }
.floor-unplaced { margin: 10px 0; }
.floor-cell-empty { background: var(--bg); border: 1px dashed var(--border); border-radius: 0; min-height: 22px; }

/* 表格样式教室块（纯表格：表头条 + 座位单元格区） */
.floor-block-grid {
  position: static; display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 4px; padding: 0;
  background: var(--card); min-width: 0; overflow: hidden;
  box-shadow: 0 1px 3px rgba(16,24,40,.05);
}
.floor-block-grid:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(16,24,40,.08); transform: none; }
[data-theme="dark"] .floor-block-grid { background: #1E2126; border-color: #2A2E34; box-shadow: none; }
[data-theme="dark"] .floor-block-grid:hover { border-color: var(--primary); }
.fbg-head {
  display: flex; justify-content: space-between; align-items: center; gap: 4px;
  padding: 3px 8px; border-bottom: 1px solid var(--ov-border-soft);
  background: var(--card); font-weight: 700; font-size: 0.78em; color: var(--text);
}
[data-theme="dark"] .fbg-head { background: #24272C; border-bottom-color: #2A2E34; }
.fbg-name { white-space: nowrap; }
.fbg-meta { font-size: 0.62em; font-weight: 500; color: var(--muted); white-space: nowrap; }
.fbg-pct { font-size: 0.7em; font-weight: 500; color: var(--muted); }
.fbg-grid {
  display: grid; gap: 1px; padding: 4px; flex: 1; justify-content: center; align-content: stretch;
  background: var(--bg); border: none; border-radius: 0;
}
[data-theme="dark"] .fbg-grid { background: #2A2E34; }

/* 暗色主题 - 房间卡片（覆盖默认玻璃效果） */
[data-theme="dark"] .mg-room {
  background: linear-gradient(145deg, #2A2E34, #1E2126) !important;
  border-color: #3A3F48 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.3) !important;
}
.fbg-cell {
  width: 100%; height: 28px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  font-size: 0.72em; font-weight: 600; padding: 0 2px;
  border-radius: 3px; cursor: pointer; overflow: hidden; white-space: nowrap;
  transition: all 0.12s;
}
.fbg-cell:hover { filter: brightness(0.94); }
.fbg-cell b { font-weight: 600; line-height: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.fbg-arrow { font-style: normal; font-size: 0.55em; line-height: 1; opacity: 0.85; }
.fbg-cell.free { background: var(--ov-avail-bg); color: var(--text); }
.fbg-cell.used { background: var(--ov-occupied-bg); color: var(--text); }
.fbg-grid-map { justify-content: stretch; }
.fbg-grid-map .fbg-cell { width: 100%; height: 28px; font-size: 0.72em; }
.fbg-grid-map .fbg-arrow { font-size: 0.6em; }
.fbg-blank { background: var(--bg); cursor: default; }
.fbg-blank:hover { filter: none; }
.fbg-grid-map .fbg-blank { color: var(--muted); opacity: 0.55; }
.fp-mapbtn { font-size: 0.6em; font-weight: 600; color: var(--primary); border: 1px solid var(--primary); border-radius: 999px; padding: 0 6px; cursor: pointer; }

/* 楼层教室面板（座位按钮样式，参考座位分布界面） */
.floor-block.floor-panel { min-width: 220px; }
.fp-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 700; font-size: 0.85em; color: var(--text); margin-bottom: 4px; }
.fp-pct { font-size: 0.7em; font-weight: 500; color: var(--muted); }
.fp-mapbtn:hover { background: var(--primary); color: var(--primary-text, #fff); }
.fp-stats { display: flex; justify-content: space-between; font-size: 0.72em; color: var(--muted); margin-bottom: 8px; }
.fp-seats { display: flex; flex-wrap: wrap; gap: 5px; }
.fp-seat {
  position: relative; flex: 0 0 auto; width: 44px; min-height: 38px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72em; font-weight: 600; padding: 2px 4px; cursor: pointer;
  transition: all 0.15s;
}
.fp-seat:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.fp-seat.free { background: var(--ov-avail-bg); color: var(--text); }
.fp-seat.used { background: var(--ov-occupied-bg); color: var(--text); }
.fp-zuo { position: absolute; bottom: 2px; right: 5px; font-size: 0.58em; opacity: 0.75; }

/* 楼层走廊条带（总览：相邻格合并为连贯条纹条带；编辑：独立灰格） */
.floor-corridor {
  position: static; z-index: 1;
  background: repeating-linear-gradient(135deg, var(--corridor) 0 5px, var(--ov-border-soft) 5px 10px);
  border: 1px solid var(--corridor-strong); border-radius: 6px;
  min-height: 8px;
}
.floor-table .floor-corridor.corridor-h { height: 80px; min-height: 80px; align-self: center; }
.floor-table .floor-corridor.corridor-v { width: 144px; min-width: 144px; justify-self: center; align-self: stretch; }
[data-theme="dark"] .floor-corridor {
  background: repeating-linear-gradient(135deg, var(--ink-2) 0 10px, #454B53 10px 20px);
  border-color: #32373D;
}
.floor-slot.has-corridor { border-style: solid; border-color: var(--corridor); background: var(--corridor); border-radius: 4px; }
.floor-slot .fl-corridor { color: var(--corridor-text); font-size: 0.72em; font-weight: 600; letter-spacing: 1px; }
[data-theme="dark"] .floor-slot.has-corridor { border-color: #454B54; background: var(--ink-2); }
[data-theme="dark"] .floor-slot .fl-corridor { color: #C9CDD3; }

/* 楼层图统计行（参照房间卡片统计样式：空闲/在住） */
.floor-total {
  display: inline-block; margin: 10px 0 4px; padding: 6px 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  font-size: 0.8em; font-weight: 600; color: var(--text);
}
.floor-statline {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--border);
  font-size: 0.68em; color: var(--muted);
}
.floor-edit-grid { display: grid; gap: 10px; margin: 12px 0; }
.floor-slot {
  position: relative;
  min-height: 72px; border: 1.5px dashed var(--border); border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer; transition: all 0.15s; font-size: 0.85em;
}
.fl-pos {
  position: absolute; top: 3px; left: 6px;
  font-size: 0.58em; font-weight: 600; color: var(--ink-3); opacity: 0.7; pointer-events: none;
}
.floor-slot:hover { border-color: var(--primary); background: var(--brand-50); }
.floor-slot.has-room { border-style: solid; border-color: var(--primary); background: var(--brand-50); color: var(--text); cursor: grab; padding: 4px; overflow: hidden; }
.floor-slot.has-room:active { cursor: grabbing; }
.floor-slot[data-dragtarget="1"] { outline: 3px solid var(--primary); outline-offset: -1px; transform: scale(1.04); z-index: 3; }
/* 编辑槽位：教室名（大号简洁，不显示座位/人名） */
.fl-roomname { font-size: 1.05em; font-weight: 700; color: var(--text); line-height: 1.3; text-align: center; }
.floor-slot .fl-empty { color: var(--ink-3); font-size: 0.72em; }
.floor-slot .fl-remove { color: var(--danger); font-size: 0.7em; }
.fl-label { font-size: 0.85em; color: var(--muted); }
/* 教室选择弹窗（点空格未选教室时弹出） */
.pick-list { display: flex; flex-direction: column; gap: 8px; max-height: 56vh; overflow-y: auto; margin: 0; }
.pick-opt { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 9px 13px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-size: 13.5px; background: var(--card); transition: border-color .15s, background .15s; }
.pick-opt:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--card)); }
.pick-opt:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 9%, var(--card)); font-weight: 600; }
.pick-opt input { width: 17px; height: 17px; min-height: 0; flex: 0 0 17px; accent-color: var(--primary); }

/* 管理座位：座位格删除按钮 */
.seat-cell { position: relative; }
.sc-del {
  position: absolute; top: 2px; right: 2px; z-index: 2;
  width: 16px; height: 16px; line-height: 14px; text-align: center;
  background: rgba(239, 68, 68, 0.9); color: var(--occupied-text); border-radius: 50%;
  font-size: 0.6em; cursor: pointer; opacity: 0.85;
}
.sc-del:hover { opacity: 1; transform: scale(1.1); }

/* 教室占位图：大方格展示入住人信息 */
.occ-grid { display: grid; gap: 12px; margin: 12px 0; }
.seat-cell.seat-cell-lg {
  min-height: 110px; border-radius: 12px; padding: 12px 10px;
  display: flex; flex-direction: column; gap: 6px; cursor: pointer;
  box-shadow: var(--shadow-sm); transition: all 0.15s;
}
.seat-cell.seat-cell-lg:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.seat-cell.seat-cell-lg .sc-top { display: flex; justify-content: space-between; align-items: center; font-size: 0.8em; gap: 4px; }
.seat-cell.seat-cell-lg .sc-no { font-weight: 700; }
.seat-cell.seat-cell-lg .sc-state { font-size: 0.72em; opacity: 0.85; background: color-mix(in srgb, currentColor 18%, transparent); padding: 1px 8px; border-radius: 999px; }
.seat-cell.seat-cell-lg .sc-name { font-size: 1.35em; font-weight: 700; line-height: 1.15; word-break: break-all; }
.seat-cell.seat-cell-lg .sc-bed { font-size: 0.75em; opacity: 0.9; }
.seat-cell.seat-cell-lg .sc-empty { font-size: 0.85em; opacity: 0.55; margin-top: 6px; }



/* 占位图按示意图布局：大方格 + 图块混合网格 */
.occ-map { display: grid; gap: 6px; margin: 12px 0; }
.occ-map .cm-cell { width: 100%; height: 52px; font-size: 0.62em; }
.occ-map .seat-cell.seat-cell-lg { min-height: 52px; height: 52px; border-radius: 8px; padding: 5px 4px; gap: 1px; box-shadow: none; }
.occ-map .seat-cell.seat-cell-lg .sc-top { font-size: 0.6em; }
.occ-map .seat-cell.seat-cell-lg .sc-state { font-size: 0.58em; padding: 0 5px; }
.occ-map .seat-cell.seat-cell-lg .sc-name { font-size: 0.92em; }
.occ-map .seat-cell.seat-cell-lg .sc-bed { font-size: 0.58em; }
.occ-map .seat-cell.seat-cell-lg .sc-empty { font-size: 0.68em; margin-top: 2px; }
/* 座位按纸质分布表两列排布（左列 | 过道 | 右列） */
.fbg-grid-2col { grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); gap: 2px; justify-content: stretch; align-content: start; }
.fbg-grid-2col .fbg-col { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fbg-grid-2col .fbg-cell { width: 100%; height: 28px; }
.fbg-aisle { background: var(--corridor); border-radius: 4px; min-height: 36px; }
[data-theme="dark"] .fbg-aisle { background: var(--ink-2); }
/* 座位横向两行排布（上排 | 行间横向过道连走廊 | 下排） */
.fbg-grid-2row { display: flex; flex-direction: column; gap: 2px; justify-content: stretch; align-content: stretch; height: 100%; }
.fbg-grid-2row .fbg-row { display: flex; flex: 1 1 0; gap: 2px; justify-content: center; align-items: stretch; min-width: 0; }
.fbg-grid-2row .fbg-cell { flex: 1 1 0; width: auto; min-width: 0; height: auto; font-size: 0.6em; }
.fbg-grid-2row .fbg-cell b { white-space: normal; word-break: break-all; line-height: 1.15; }
.fbg-grid-2row .fbg-arrow { font-size: 0.5em; }
.fbg-aisle-h { height: 13px; background: var(--corridor); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 8px; color: var(--corridor-text); font-weight: 600; letter-spacing: 1px; }
[data-theme="dark"] .fbg-aisle-h { background: var(--ink-2); color: #C9CDD3; }
/* 占位图：座位大格横向两行排布（上排=表格左列 | 过道 | 下排=表格右列） */
.occ-grid-2row { display: flex; flex-direction: column; gap: 6px; }
.occ-grid-2row .occ-row { display: flex; gap: 6px; justify-content: center; }
.occ-grid-2row .seat-cell.seat-cell-lg { flex: 1 1 0; min-width: 0; }


/* ============ Toast（统一右下角） ============ */
#toastWrap { position: fixed; right: 18px; bottom: 90px; z-index: 3000; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.toast {
  padding: 10px 18px;
  border-radius: 10px;
  color: white;
  font-size: var(--fs-md);
  font-weight: 500;
  z-index: 3000;
  animation: slideInRight 0.3s ease;
  box-shadow: var(--shadow-lg);
  max-width: 86vw;
}
.toast-success { background: var(--avail); }
.toast-error { background: var(--occupied); }
.toast-warning { background: var(--reserved); }
.toast-info { background: var(--primary); }
@keyframes slideInRight { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ============ 弹窗 ============ */
/* ============ Modal 弹窗系统（三段式：固定标题栏 / 正文 / 固定底栏） ============ */
.modal { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.46); backdrop-filter: blur(3px); justify-content: center; align-items: center; z-index: 1000; padding: 20px; }
.modal.active { display: flex; }
.modal-content {
  display: flex; flex-direction: column;
  background: var(--card);
  border-radius: 18px;
  padding: 0;
  width: min(520px, 100%);
  max-width: 100%;
  max-height: 90vh;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-lg);
  color: var(--text);
  animation: modalFadeIn 0.2s ease;
}
.modal.active .modal-content { animation: modalFadeIn 0.2s ease; }
@keyframes modalFadeIn { from { opacity: 1; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }
.modal-head { flex: 0 0 auto; display: flex; align-items: center; min-height: 54px; padding: 14px 52px 12px 22px; border-bottom: 1px solid var(--border); }
.modal-head h3 { margin: 0; padding-left: 12px; position: relative; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--text); letter-spacing: .2px; }
.modal-head h3::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 17px; border-radius: 4px; background: var(--primary); }
.modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px; }
.modal-body-canvas { padding: 16px; }
.modal-body > *:last-child { margin-bottom: 0; }
.modal-content .table-container th, .modal-content .table-container td { padding: 8px 10px; }
.modal-content .room-detail-grid { table-layout: fixed; }
.modal-content .room-detail-grid col, .modal-content .room-detail-grid th:nth-child(1) { width: 8%; }
.modal-content .room-detail-grid th:nth-child(2) { width: 12%; }
.modal-content .room-detail-grid th:nth-child(3) { width: 12%; }
.modal-content .room-detail-grid th:nth-child(4) { width: 15%; }
.modal-content .room-detail-grid th:nth-child(5) { width: 25%; }
.modal-content .room-detail-grid th:nth-child(6) { width: 15%; }
.modal-content .room-detail-grid th:nth-child(7) { width: 13%; }
.modal-content .room-detail-grid td { word-break: break-word; }
.modal-content .room-detail-grid td:nth-child(4) { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
.modal-close {
  position: absolute; right: 12px; top: 11px; z-index: 20;
  width: 32px; height: 32px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; background: transparent;
  color: var(--ink-3); transition: background .15s, color .15s;
}
.modal-close:hover { background: var(--bg); color: var(--text); }
.modal-close svg { display: block; }
.modal-foot {
  display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap;
}
.modal-content > .modal-foot {
  flex: 0 0 auto; padding: 13px 22px 16px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 82%, var(--bg));
  border-radius: 0 0 18px 18px;
}
.modal-content > .modal-foot > .foot-actions { display:flex; gap:10px; align-items:stretch; margin-right:auto; flex-wrap:wrap; }
.modal-content > .modal-foot .btn { margin: 0; min-height: 40px; display: inline-flex; align-items: center; }
.modal-content > .modal-foot .op-trigger {
  min-height: 40px;
  padding: 0 16px;
  border: none;
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.modal-content > .modal-foot .op-trigger:hover {
  background: var(--brand-50);
  color: var(--primary);
}

/* ============ 语义工具类（统一收编内联样式） ============ */
/* 布局辅助 */
.d-none { display: none !important; }
.span-all { grid-column: 1 / -1; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.btn-group { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn-file { cursor: pointer; margin: 4px; }
.section-title { margin: 20px 0 12px; font-weight: 600; color: var(--text); }
.section-head { font-weight: 600; margin-bottom: 12px; color: var(--text); }
.section-block { margin-bottom: 14px; }
.mt-14 { margin-top: 14px; }
.mt-12 { margin-top: 12px; }
.hint-text { margin: 0 0 14px; padding: 9px 12px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; background: color-mix(in srgb, var(--primary) 6%, transparent); border-radius: 8px; }
/* 说明文字折叠：默认收起，点击展开 */
details.hint-fold { margin: 6px 0 15px; }
details.hint-fold summary { cursor: pointer; font-size: 12px; color: var(--muted); list-style: none; user-select: none; display: inline-block; padding: 2px 0; }
details.hint-fold summary::-webkit-details-marker { display: none; }
details.hint-fold summary::before { content: "▸ "; }
details.hint-fold[open] summary::before { content: "▾ "; }
details.hint-fold .hint-text { margin: 8px 0 0; }

.import-block { padding: 12px 14px; border: 1px dashed var(--border); border-radius: 10px; margin-bottom: 14px; }
.import-block h4 { margin: 0 0 8px; font-size: 14px; }

/* 文本状态色 */
.text-muted { color: var(--muted); }
.sub-text { font-size: 0.78em; line-height: 1.15; margin-top: 1px; }
.text-ok { color: var(--avail); }
.text-warn { color: var(--reserved); }
.text-danger { color: var(--danger); }
.text-primary { color: var(--primary); }

/* 金额数字列 */
.num-ok { color: var(--avail); font-weight: 600; }
.num-warn { color: var(--reserved); font-weight: 600; }
.num-primary { color: var(--primary); font-weight: 600; }

/* 微排版 */
.meta-sm { font-size: 0.7em; color: var(--ink-3); }
.card-stats { font-size: 0.7em; color: var(--ink-3); margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--border); }
.td-date-resv { color: var(--reserved); }
.divider-line { border-top: 1px dashed var(--border); margin: 14px 0; }

/* 提示框 */
.alert-box { border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; font-size: var(--fs-sm); }
.alert-danger { background: var(--ov-occupied-bg); border: 1px solid #F1AEB2; }
.alert-warn { background: var(--ov-reserved-bg); border: 1px solid #F6D79E; }
.alert-info { background: var(--brand-50); border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent); }
.alert-info .alert-title { color: var(--primary); }
.alert-title { font-weight: 600; margin-bottom: 6px; }
.alert-body { color: var(--text); margin-top: 4px; }
.alert-sub { color: var(--muted); margin-top: 4px; }
.info-box { color: var(--warn); background: var(--brand-50); padding: 10px 12px; border-radius: 8px; font-size: var(--fs-sm); margin-bottom: 10px; }

/* 教室座位占位格 */
.seat-spacer { border: none; background: transparent; }

/* 分页条 */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 12px 0 4px;
}
.page-info { font-size: 12px; color: var(--muted); }
.pagination .btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* 座位下宿舍床位关联标签（无边框纯文本） */
.bed-tag {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 6px;
  font-size: 10px;
  line-height: 1.5;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}
.bed-tag:hover { color: var(--primary); background: transparent; }

/* 费用摘要辅助 */
.summary-box-accent { background: var(--brand-50); }
.total-gap { margin-top: 10px; }
.arrears-row { display: flex; justify-content: space-between; font-size: var(--fs-sm); padding: 4px 0; border-bottom: 1px dashed #F1AEB2; }

/* 房间详情操作：三点按钮 + 下拉菜单 */
.op-wrap { position: relative; display: inline-block; }.op-trigger {
  width: auto; min-width: 66px; height: 30px; padding: 0 10px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 8px;
  font-size: 12px; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.op-trigger:hover { background: var(--brand-50); border-color: var(--primary); color: var(--primary); }
.op-menu {
  position: fixed; z-index: 1100;
  min-width: 132px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 5px;
  display: flex; flex-direction: column; gap: 2px;
}
.op-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px;
  border: none; background: none;
  font-size: var(--fs-md);
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.op-item:hover { background: var(--brand-50); }
.op-danger { color: var(--danger); }
.op-danger:hover { background: var(--ov-occupied-bg); }
.op-primary { color: var(--primary); }

/* 设置页标签页 */
/* ============ 确认框 ============ */
.confirm-dialog {
  display: none;
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--card);
  border-radius: 18px;
  padding: 22px 22px 20px;
  width: min(400px, 90vw);
  z-index: 2001;
  box-shadow: var(--shadow-lg);
  color: var(--text);
}
.confirm-dialog.active { display: block; animation: modalFadeIn 0.2s ease; }
.confirm-dialog h4 { margin-bottom: 8px; font-size: 16px; font-weight: 700; }
.confirm-dialog p { color: var(--muted); margin-bottom: 20px; line-height: 1.6; word-break: break-word; font-size: 14px; }
.confirm-dialog .btn-group { display: flex; justify-content: flex-end; gap: 10px; }
.confirm-dialog .btn-group .btn { flex: 1; margin: 0; justify-content: center; }

/* ============ Loading 遮罩 ============ */
.loading-mask {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(15,23,42,0.45);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 4000; gap: 12px; color: #fff; font-size: var(--fs-md);
}
.loading-spinner {
  width: 34px; height: 34px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ 移动端 ============ */
.menu-toggle { display: none; }
.overlay { display: none; }
.tabbar { display: none; }

@media (max-width: 768px) {
  body { display: block; padding-bottom: 60px; }
  .sidebar {
    width: 78%; max-width: 300px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1000;
  }
  .sidebar.open { transform: translateX(0); }
  .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999; }
  .overlay.active { display: block; }
  .search-bar { flex-direction: column; align-items: stretch; }
  .search-bar input, .search-bar select { min-width: 100%; }
  .segbar { width: 100%; flex-wrap: wrap; row-gap: 6px; }
  .seg { flex: 1; padding: 7px 6px; text-align: center; }

  /* 底部 Tab Bar（6 项） */
  .tabbar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    height: 56px;
    background: var(--card);
    border-top: 1px solid var(--border);
    z-index: 900;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar a {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    color: var(--muted);
    text-decoration: none;
    font-size: var(--fs-xs);
    cursor: pointer;
    overflow: hidden;
  }
  .tabbar a svg { flex-shrink: 0; }
  .tabbar a span { white-space: nowrap; }
  .tabbar a.active { color: var(--primary); font-weight: 600; }

  table { font-size: var(--fs-sm); }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
}

/* ============================================================
   A+C 组合风格：上下铺色块矩阵（房间页）
   - 每间房间内床位按两两分组（上铺/下铺纵向排列）
   - 状态色走可配置变量：--occupied / --reserved / --avail
   ============================================================ */
.toolbar-row { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; align-items: center; }
/* 编辑楼层排布：紧凑单行工具栏（教室 + 工具 + 列/行） */
.fl-tb { gap: 6px; }
.fl-room-sel { width: auto; min-width: 120px; max-width: 200px; padding: 4px 6px; font-size: 0.85em; }
.fl-size { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 0.8em; color: var(--muted); }
.fl-size input { width: 46px; padding: 3px 4px; font-size: 0.85em; }
.bunk-grid {
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: 6px;
  margin: 10px 0 4px;
}
.bunk-pair { display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr 1fr; gap: 5px; min-width: 0; }
.bunk-cell {
  position: relative;
  border-radius: 4px;
  padding: 6px 4px;
  text-align: center;
  cursor: pointer;
  min-height: 46px;
  min-width: 0;
  overflow: hidden;
  transition: transform 0.12s, box-shadow 0.12s;
}
.bunk-cell:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.bunk-cell.occupied { background: var(--occupied); color: var(--occupied-text); } .bunk-cell.occupied .bc-no, .bunk-cell.occupied .bc-name { color: var(--occupied-text); } .bunk-cell.occupied .bc-no { opacity: .85; }
.bunk-cell.booked { background: var(--reserved); color: var(--reserved-text); } .bunk-cell.booked .bc-no, .bunk-cell.booked .bc-name { color: var(--reserved-text); } .bunk-cell.booked .bc-no { opacity: .85; }
.bunk-cell.available { background: var(--ov-avail-bg); color: var(--text); }
[data-theme="dark"] .bunk-cell.available { background: #2A2E34; color: #C9CDD3; }
.bunk-cell .bc-lv {
  position: absolute; top: 3px; left: 6px;
  font-size: 10px; font-weight: 600; opacity: 0.9;
}
.bunk-cell .bc-no { font-size: 10px; font-weight: 500; line-height: 1.2; color: var(--muted); }
.bunk-cell .bc-name { font-size: 13px; font-weight: 700; margin-top: 2px; line-height: 1.2; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bunk-cell.available .bc-name { font-weight: 500; color: var(--muted); }
.bunk-cell.empty-slot { visibility: hidden; }

/* 房间楼层示意图 */
.map-section { margin: 18px 0 8px; font-size: 14px; color: var(--text); }
.map-section::before { content: ''; display: inline-block; width: 4px; height: 14px; background: var(--primary); border-radius: 2px; margin-right: 6px; vertical-align: -2px; }
.map-section-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 18px 0 8px; }
.map-section-row .map-section { margin: 0; }
.room-floor-table { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
.room-floor-table .floor-block-grid { min-width: 0; width: 100%; }
.rm-grid { display: grid; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; justify-content: stretch; width: 100%; box-sizing: border-box; padding: 5px 6px; }
.rm-cell {
  width: auto; min-width: 0; height: 34px; border-radius: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--occupied-text); cursor: pointer;
  gap: 0; overflow: hidden; white-space: nowrap; padding: 2px 5px;
  transition: all 0.12s;
}
.rm-cell:hover { transform: translateY(-1px); filter: brightness(1.08); }
.rm-cell .rm-lv { font-size: 9px; opacity: 0.85; line-height: 1; }
.rm-cell .rm-no { font-size: 11px; font-weight: 700; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-cell .rm-name { font-size: 10px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-cell .rm-empty-t { color: var(--muted); font-weight: 400; opacity: 0.7; }
.rm-cell.occupied { background: var(--occupied); color: var(--occupied-text); }
.rm-cell.booked { background: var(--reserved); color: var(--reserved-text); }
.rm-cell.available { background: var(--ov-avail-bg); color: var(--text); }
.rm-cell.available .rm-lv { color: var(--free-text); }


[data-theme="dark"] .rm-cell.available { background: #1F2A24; color: #86EFAC; }
.rm-empty { background: transparent; border: 1px dashed var(--border); cursor: default; }
.map-legend { display: inline-flex; align-items: center; margin-right: 14px; font-size: 12px; color: var(--muted); }
.dot { width: 10px; height: 10px; border-radius: 4px; display: inline-block; margin-right: 4px; }
.dot-occupied { background: var(--occupied); }
.dot-booked { background: var(--reserved); }
.dot-avail { background: var(--free); }

/* 房间卡宿舍类型标识 */
.gender-tag {
  display: inline-block;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: 1px;
  font-weight: 600;
}
.gender-tag.male { background: #E8EEFF; color: #1A3FB8; }
.gender-tag.female { background: #fce7f3; color: #db2777; }

/* 房间详情表：上/下铺小标签 */
.level-tag {
  display: inline-block;
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg);
  color: var(--muted);
  margin-left: 4px;
  vertical-align: 1px;
}

/* ============================================================
   外观设置面板（可配置颜色）
   ============================================================ */
.appearance-block { margin-bottom: 18px; }
.app-block-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 8px;
  letter-spacing: 0.4px;
}
.app-hint { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.6; }
.color-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.color-dot {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.12s;
}
.color-dot:hover { transform: scale(1.12); }
.color-dot.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--text); }
.color-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px dashed var(--border);
}
.color-row:last-of-type { border-bottom: none; }
.color-name { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.color-chip { width: 16px; height: 16px; border-radius: 4px; display: inline-block; }
.color-row input[type="color"] {
  width: 52px; height: 30px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  cursor: pointer;
}

/* ============================================================
   移动端专属 UI 重构 v3（≤768px）
   A+C 组合：深色导航 + 紧凑数据 + 色块矩阵
   ============================================================ */
@media (min-width: 769px) {
  .mobile-topbar { display: none; }
}
@media (max-width: 768px) {
  body { background: var(--page-bg); display: block; }
  .main { margin-left: 0; padding: 12px 12px 80px; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; overflow-x: hidden; }
  .card, .tile { max-width: 100%; min-width: 0; box-sizing: border-box; }

  /* 深色顶栏 */
  .mobile-topbar {
    position: sticky;
    top: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--nav-bg, #16181C);
    color: var(--nav-text);
    padding: 10px 12px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.2);
  }
  .menu-toggle {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 8px;
    background: transparent;
    color: var(--nav-text);
    font-size: 18px;
    box-shadow: none;
  }
  .mobile-title { font-size: 15px; font-weight: 700; letter-spacing: 0.3px; }

  /* 卡片：小圆角 / 细边框 / 紧凑 */
  .card { border-radius: 10px; border: 1px solid var(--border); padding: 14px 12px; margin-bottom: 12px; }
  .card h3 { font-size: 1.05rem; margin-bottom: 12px; padding-bottom: 8px; }
  .card h3::after { width: 22px; height: 3px; }

  /* 统计卡 */
  .stats-row { gap: 8px; margin-bottom: 12px; }
  .stat-card { border-radius: 10px; padding: 12px 8px; }
  .stat-card .stat-value { font-size: 1.45rem; }

  /* 分段 / 筛选：紧凑小圆角 */
  .segbar { border-radius: 8px; padding: 3px; }
  .seg { border-radius: 8px; padding: 7px 10px; font-size: var(--fs-sm); }
  .search-bar { gap: 6px; margin-bottom: 12px; }
  .search-bar input, .search-bar select {
    border-radius: 8px;
    padding: 9px 12px;
    -webkit-appearance: none; appearance: none;
  }

  /* 表格：保持紧凑表格形态（横滑查看），去卡片化 */
  .table-container { overflow-x: auto; margin: 10px 0; }
  .table-container table { display: table; }
  .table-container tbody { display: table-row-group; }
  .table-container tbody tr { display: table-row; background: none; border-radius: 0; padding: 0; margin: 0; box-shadow: none; }
  .table-container td { display: table-cell; justify-content: initial; gap: 0; padding: 8px 10px; border-bottom: 1px solid var(--border); min-width: 0; background: transparent; }
  .table-container td::before { content: none; }
  .table-container td > * { text-align: left; }
  .table-container tbody tr:hover td { background: var(--hover, rgba(0,0,0,0.02)); }
  .table-container thead th { padding: 8px 10px; font-size: 11px; }

  /* 房间：色块矩阵自适应 */
  .grid-rooms { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .room-card { border-radius: 10px; padding: 12px 10px; }
  .room-card .room-header { font-size: 0.98rem; }
  .bunk-grid { grid-template-columns: repeat(auto-fit, 56px); gap: 5px; }
  .bunk-cell { min-height: 40px; padding: 5px 3px; }
  .bunk-cell .bc-no { font-size: 11px; }
  .bunk-cell .bc-name { font-size: 10px; }

  /* 按钮 / 表单：触摸友好、圆角统一 */
  .btn { border-radius: 10px; padding: 10px 14px; }
  .btn-sm { padding: 7px 11px; }
  .modal-content > .modal-foot .btn { flex: 0 0 auto; justify-content: center; align-items:center; margin: 0; min-height: 40px; }
  .form-group { margin: 0 0 12px; }
  input, select, textarea { min-height: 40px; border-radius: 10px; padding: 9px 12px; }
  textarea { min-height: 68px; }
  /* 自定义下拉框移动端适配 */
  .cb-input { min-height: 40px; padding: 9px 34px 9px 12px; }
  .date-text { padding-top: 0; }
  .summary-box { border-radius: 10px; grid-template-columns: 1fr; gap: 8px; }

  /* 教室座位 */
  .seat-grid { grid-template-columns: repeat(var(--seat-cols, 4), minmax(52px, 1fr)); gap: 6px; }
  .seat-cell { width: auto; height: 54px; border-radius: 8px; }

  /* 弹窗：三段式，仅正文区滚动，标题与底栏常驻；底栏避让 Home 指示条 */
  .modal { padding: 14px; }
  .modal-content {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: calc(100vh - 28px);
    border-radius: 16px;
  }
  .modal-head { min-height: 50px; padding: 13px 48px 11px 18px; }
  .modal-body { padding: 16px 18px; }
  .modal-body-canvas { padding: 14px; }
  .modal-content > .modal-foot { padding: 11px 16px calc(13px + env(safe-area-inset-bottom, 0px)); border-radius: 0 0 16px 16px; }
  .confirm-dialog { width: 88vw; }

  /* 三点菜单 / 告警框 / 分页 */
  .op-menu { border-radius: 10px; }
  .alert-box { border-radius: 12px; }
  .pagination { gap: 6px; margin: 12px 0 4px; }
  .pagination .btn { border-radius: 8px; }

  /* Toast / 深色 TabBar */
  #toastWrap { bottom: 72px; }
  .tabbar {
    background: var(--nav-bg, #16181C);
    border-top: none;
    box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.25);
    height: 56px;
  }
  [data-theme="dark"] .tabbar { background: var(--nav-bg); border-top: 1px solid var(--nav-active-bg); }
  [data-theme="dark"] .mobile-topbar { background: var(--nav-bg); }
  .tabbar a { font-size: 10px; color: var(--nav-text); }
  .tabbar a.active { color: var(--nav-title); font-weight: 700; border-top: 2px solid var(--nav-title); }
  [data-theme="dark"] .tabbar a.active { color: var(--nav-title); border-top-color: var(--nav-title); }
  .tabbar svg { width: 20px; height: 20px; }

  /* 教室座位移动端：格子收窄、弹窗全宽 */
  .modal-content:has(.classroom-map) { width: 100%; max-width: 100%; }
  .seat-cell { width: 76px; min-height: 62px; padding: 6px 8px; }
  .seat-row-label { flex-basis: 42px; font-size: 0.66em; padding-top: 10px; }
}

/* 全局滚动条隐藏（内容仍可滑动，视觉更干净） */

/* ============================================================
   视觉升级 v2：在既有设计令牌上提升精致度与层次
   只改装饰层（卡片/弹窗/表格/按钮/表单/统计卡/侧边栏），
   不触碰布局网格与功能画布，可整体回退。
   ============================================================ */

/* 背景微渐变，替代纯灰 */
body { background: linear-gradient(180deg, var(--page-bg) 0%, color-mix(in srgb, var(--page-bg) 88%, var(--card) 12%) 100%); }

/* 卡片：更柔和的层次阴影 + 顶部高光 */
.card {
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 8px 24px -12px rgba(16,17,20,0.10);
  border-color: color-mix(in srgb, var(--border) 85%, transparent);
}
.card h3 { letter-spacing: 0.2px; }
.stat-card {
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 6px 18px -10px rgba(16,17,20,0.08);
  border-color: color-mix(in srgb, var(--border) 85%, transparent);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.04), 0 14px 28px -12px rgba(16,17,20,0.14); }
.stat-card .stat-value {
  color: var(--primary);
}
.stat-card.warn .stat-value { color: var(--warn); }
.stat-card.ok .stat-value { color: var(--avail); }

/* 表格：表头更清晰、行距更透气 */
table { box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 6px 20px -14px rgba(16,17,20,0.10); border: 1px solid var(--border); }
th { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 70%, var(--card) 30%), var(--bg)); }
tr:hover td { background: color-mix(in srgb, var(--primary) 5%, var(--bg)); }
th, td { padding: 13px 14px; }

/* 按钮：主按钮渐变 + 按压反馈，次按钮描边化 */
.btn { border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--primary) 55%, transparent);
}
.btn-primary:hover { filter: brightness(1.06); box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--primary) 60%, transparent); }
.btn-success, .btn-warning, .btn-danger { box-shadow: 0 2px 8px -2px rgba(16,17,20,0.12); }
.btn-ghost { background: var(--card); }

/* 表单：输入聚焦环统一 */
input, select, textarea { background: var(--card); }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }

/* 分段控件：选中项加阴影与高光 */
.seg.active { box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--primary) 55%, transparent); }

/* 徽章：更精致的小胶囊 */
.badge { padding: 3px 10px; border-radius: 999px; font-weight: 600; letter-spacing: 0.2px; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }

/* 弹窗：大阴影 + 内边框 + 标题装饰条 */
.modal { background: rgba(10,12,16,0.55); backdrop-filter: blur(3px); }
.modal-content {
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 28px 64px -20px rgba(16,17,20,0.45);
}
.modal-head h3::before { background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 55%, #7C9AFF)); }
.section-title { position: relative; padding-left: 12px; }
.section-title::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 14px; border-radius: 3px; background: var(--primary); opacity: 0.85; }

/* 摘要卡：浅色渐变 + 细腻内边距 */
.summary-box {
  background: linear-gradient(160deg, color-mix(in srgb, var(--bg) 92%, var(--primary) 4%), var(--bg));
  border-color: color-mix(in srgb, var(--border) 80%, transparent);
}
.summary-row > span:first-child { letter-spacing: 0.2px; }


/* 搜索栏输入框聚焦微调 */
.search-bar input:focus, .search-bar select:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }

/* ============================================================
   经营概览 · Bento 工作台（B 版总览布局落地 v3）
   楼层平面图 + KPI + 教室占用 + 到期提醒 + 快捷操作
   ============================================================ */
:root {
  --ov-avail-bg: color-mix(in srgb, var(--free) 55%, #ffffff);
  --ov-occupied-bg: color-mix(in srgb, var(--occupied) 26%, #ffffff);
  --ov-reserved-bg: color-mix(in srgb, var(--reserved) 28%, #ffffff);
  --ov-border-soft: #E3E8F0;
  --ov-shadow: 0 1px 2px rgba(20,22,28,.04), 0 12px 32px -16px rgba(20,22,28,.14);
  --corridor: #E3E8F0;
  --corridor-strong: #D3DAE6;
  --corridor-text: #7A8499;
}
[data-theme="dark"] {
  --ov-avail-bg: color-mix(in srgb, var(--free) 22%, #1a1d24);
  --ov-occupied-bg: color-mix(in srgb, var(--occupied) 26%, #1a1d24);
  --ov-reserved-bg: #332811;
  --ov-border-soft: #242834;
  --ov-shadow: 0 1px 2px rgba(0,0,0,.35), 0 12px 32px -14px rgba(0,0,0,.55);
}

.bento { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.tile {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--ov-shadow); padding: 18px; display: flex; flex-direction: column; gap: 12px;
  min-width: 0; flex: 1 1 100%;
}
.tile-head { display: flex; align-items: center; gap: 9px; padding-bottom: 12px; border-bottom: 1px solid var(--ov-border-soft); min-width: 0; flex-wrap: wrap; row-gap: 8px; }
.tile-head .th-ic { width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tile-head .th-ic svg { width: 16px; height: 16px; }
.tile-head h3 { font-size: 14px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.tile-head .th-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-head .spacer { flex: 1; }
.tile-head .more { font-size: 11.5px; color: var(--muted); cursor: pointer; border: none; background: none; font-family: inherit; padding: 4px 8px; border-radius: 8px; transition: all .15s; white-space: nowrap; flex-shrink: 0; }
.tile-head .more:hover { color: var(--primary); background: var(--brand-50); }
.ic { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ic svg { width: 19px; height: 19px; }
.ic-b { background: var(--brand-50); color: var(--primary); }
.ic-g { background: var(--ov-avail-bg); color: var(--avail); }
.ic-a { background: var(--ov-reserved-bg); color: var(--reserved); }
.ic-r { background: var(--ov-occupied-bg); color: var(--occupied); }
.ic-n { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }

/* KPI 2×2 网格 */
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1; align-content: start; }
.kpi { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; min-width: 0; overflow: hidden; transition: border-color .15s; }
.kpi:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.kpi .ic { width: 36px; height: 36px; border-radius: 10px; }
.kpi .ic svg { width: 18px; height: 18px; }
.kpi .kv { font-size: 22px; font-weight: 800; letter-spacing: .3px; line-height: 1.1; font-family: var(--mono); white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kpi .kv small { font-size: 12px; font-weight: 600; color: var(--muted); }
.kpi .kl { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.kpi-foot { margin-top: auto; padding: 10px 2px 0; font-size: 11px; color: var(--muted); font-weight: 600; border-top: 1px dashed var(--ov-border-soft); display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
.kpi-foot b { color: var(--danger); }
.kpi-pool { display: flex; align-items: baseline; justify-content: flex-start; gap: 10px; font-size: 11px; color: var(--muted); padding: 8px 2px 0; }
.kpi-pool b { color: var(--text); font-family: var(--mono); font-weight: 700; }
@media (max-width: 420px) { .kpi-grid { grid-template-columns: 1fr; } }

/* 教室 mini 卡 */
.mini-class { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.mc { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 11px; cursor: pointer; transition: border-color .15s, transform .15s; }
.mc:hover { border-color: var(--primary); transform: translateY(-1px); }
.mc-head { display: flex; align-items: center; gap: 5px; margin-bottom: 7px; font-size: 12px; font-weight: 700; }
.mc-head .ct { font-size: 9.5px; color: var(--muted); background: var(--card); border: 1px solid var(--border); padding: 1px 6px; border-radius: 999px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.mc-head .spacer { flex: 1; }
.mc-head .occ { font-size: 9.5px; color: var(--muted); font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.mc-row { display: flex; gap: 4px; margin-bottom: 4px; }
.mc-seat { flex: 1; height: 22px; border-radius: 4px; background: var(--ov-avail-bg); border: 1px solid color-mix(in srgb, var(--free-text) 45%, transparent); }
.mc-seat.used { background: var(--occupied); border-color: var(--occupied); }
.mc-bar { height: 4px; border-radius: 99px; background: var(--border); overflow: hidden; margin-top: 4px; }
.mc-bar i { display: block; height: 100%; border-radius: 99px; background: var(--primary); }

/* 到期提醒 */
.due-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.table-container table.due-tbl { min-width: 0; }
.due-tbl .mini-btn { padding: 3px 8px; }
.due-tbl th { font-size: 11px; color: var(--muted); font-weight: 600; text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); background: none; text-transform: none; letter-spacing: 0; }
.due-tbl td { padding: 8px 6px; font-size: 12.5px; border-bottom: 1px solid var(--ov-border-soft); background: transparent; min-width: 0; }
.due-tbl tr:last-child td { border-bottom: none; }
.due-tbl tr:hover td { background: color-mix(in srgb, var(--primary) 3%, transparent); }
.due-tbl .nm { font-weight: 600; }
.due-tbl .bd, .due-tbl .mono { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.overdue { font-weight: 700; font-size: 11.5px; }
.overdue.ov-over { color: var(--danger); }
.overdue.ov-today { color: var(--warn); }
.overdue.ov-ok { color: var(--avail); }
.mini-btn { border: none; background: var(--primary); color: var(--primary-text, #fff); font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 8px; cursor: pointer; font-family: inherit; transition: filter .15s; }
.mini-btn:hover { filter: brightness(1.1); }
.mini-btn.ghost { background: var(--border); color: var(--text); }
.badge-ov { font-size: 10.5px; background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); padding: 2px 9px; border-radius: 999px; font-weight: 700; }

/* 快捷操作 */
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.quick-btn { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); background: var(--card); border-radius: 12px; padding: 12px 14px; cursor: pointer; transition: all .15s; font-family: inherit; text-align: left; }
.quick-btn:hover { border-color: var(--primary); box-shadow: var(--ov-shadow); }
.quick-btn:active { transform: scale(.97); }
.quick-btn .qb-ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.quick-btn .qb-ic svg { width: 16px; height: 16px; }
.quick-btn .qb-tx { display: flex; flex-direction: column; line-height: 1.3; font-size: 13px; font-weight: 600; color: var(--text); }
.quick-btn .qb-tx small { font-size: 10.5px; color: var(--muted); font-weight: 400; margin-top: 1px; }

/* 楼层图适配磁贴 */
.t-big .floor-scroll { overflow-x: auto; min-width: 0; }
.ov-legend { margin: 0 0 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ov-legend-inline { display: flex; align-items: center; gap: 12px; margin-left: 14px; flex: 0 0 auto; }

/* 迷你楼层图（总览磁贴）：两翼多列密集网格，容纳 40+ 间 */
.ov-floor-sec { border: none; border-radius: 12px; padding: 0; background: transparent; }
.ov-floor-sec + .ov-floor-sec { margin-top: 12px; }
.ov-floor-title { font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.ov-floor-title::before { content: none; }
.mini-grid { display: grid; grid-template-columns: 1fr 18px 1fr; gap: 8px; align-items: start; }
.mini-col { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; align-content: start; }
/* 信息卡网格（总览楼层平面图）：每间房一张紧凑卡，无占位 */
.ov-room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; }
.mg-room {
  border: 1px solid var(--border) !important;
  background: #fff !important;
  box-shadow:
    0 3px 8px rgba(15, 23, 42, 0.08),
    0 1px 2px rgba(15, 23, 42, 0.04);
  border-radius: 10px;
  padding: 8px 8px 10px;
  cursor: pointer;
  transition: all .15s;
  text-align: left;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.mg-room:hover {
  border-color: #CBD5E1 !important;
  box-shadow:
    0 6px 16px rgba(15, 23, 42, 0.12),
    0 2px 4px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}
.mg-top { display: flex; align-items: baseline; gap: 5px; min-width: 0; justify-content: space-between; }
.mg-no { font-size: 12.5px; font-weight: 800; letter-spacing: .3px; }
.mg-bar { height: 4px; border-radius: 99px; background: var(--ov-border-soft); overflow: hidden; }
.mg-bar i { display: block; height: 100%; border-radius: 99px; }
.mg-room.used .mg-bar i,
.mg-room.booked .mg-bar i,
.mg-room.free .mg-bar i { background: #64748B !important; }
.mg-occ2 { font-size: 10px; font-weight: 600; color: var(--muted); margin-left: auto; }
.mg-beds { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); gap: 4px; justify-content: start; padding: 2px 0 0; }
.mg-bed { font-size: 8px; font-weight: 700; line-height: 1; padding: 3px 5px; border-radius: 4px; white-space: nowrap; color: var(--text); cursor: pointer; text-align: center; }
.mg-bed:hover { filter: brightness(0.94); }
.mg-bed.used { background: var(--occupied); color: var(--occupied-text); }
.mg-bed.booked { background: var(--reserved); color: var(--reserved-text); }
.mg-bed.free { background: var(--ov-avail-bg); }
.mg-aisle { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: 9px; letter-spacing: 2px; writing-mode: vertical-rl; background: var(--ov-border-soft); border-radius: 6px; }
.mg-aisle svg { width: 11px; height: 11px; }

/* 断点：桌面 ≥1101 并排工作台；平板堆叠；移动单列 */
@media (min-width: 1101px) {
  .bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .t-kpi { grid-column: span 12; order: 1; padding: 14px 18px; gap: 12px; align-self: start; }
  .t-kpi .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .t-big { grid-column: span 7; order: 2; }
  .t-class { grid-column: span 5; order: 3; align-self: start; }
  .t-due { grid-column: span 7; order: 4; }
  .t-quick { grid-column: span 5; order: 5; }
}
@media (min-width: 769px) and (max-width: 950px) {
  .bento { gap: 14px; }
  .t-big, .t-kpi, .t-class, .t-due, .t-quick { flex: 1 1 100%; }
  .t-kpi .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 951px) and (max-width: 1100px) {
  .bento { gap: 14px; }
  .t-big, .t-kpi, .t-class, .t-due, .t-quick { flex: 1 1 100%; }
  .t-kpi .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .t-kpi .kpi { gap: 10px; padding: 12px; }
  .t-kpi .kpi .ic { width: 34px; height: 34px; }
  .t-kpi .kpi .kv { font-size: 20px; }
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .tile { min-width: 0; padding: 14px; }
  .tile-head { flex-wrap: wrap; row-gap: 8px; }
  .tile-head .ov-legend-inline { display: none; }
  .tile-head .ov-locate { width: 108px; }
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
  .mini-class { grid-template-columns: 1fr; }
  .kpi { gap: 10px; padding: 12px; }
  .kpi .ic { width: 32px; height: 32px; }
  .kpi .kv { font-size: 19px; }
  .fbg-aisle-h { height: 9px; font-size: 0; }
  .table-container::-webkit-scrollbar, .floor-scroll::-webkit-scrollbar { height: 4px; width: 4px; }
  .table-container::-webkit-scrollbar-thumb, .floor-scroll::-webkit-scrollbar-thumb { background: rgba(148,163,184,.55); border-radius: 4px; border: none; }
}
@media (max-width: 480px) {
  .quick-grid { grid-template-columns: 1fr; }
}

/* 弹窗紧凑：详情类内容尽量一屏内放下 */
.modal-content .summary-box { padding: 12px 14px; margin: 12px 0; }
.modal-content .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; }
.modal-content .summary-row > span:first-child { flex-basis: 54px; font-size: 0.88em; }
.modal-content .section-title { margin: 14px 0 8px; }
.modal-content .table-container { margin: 8px 0; }
.modal-content table.tbl-fixed { margin: 0; }
.modal-content .tbl-fixed th, .modal-content .tbl-fixed td { padding: 7px 10px; font-size: 13px; line-height: 1.4; }
@media (max-width: 520px) {
  .modal-content .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 总览平面图房号定位（P2 修复） */
.ov-locate { width: 128px; flex-shrink: 0; padding: 6px 10px; border: none; border-radius: 8px; font-size: 13px; background: rgb(255 255 255 / .5); color: var(--text); outline: none; }
.ov-locate:focus { border: none; box-shadow: none; }
.mg-room.mg-hit { outline: 2px solid var(--primary); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(45,91,255,.18); }
.mg-room.mg-dim { opacity: .2; filter: saturate(.35); }

/* 移动端楼层平面图折叠（P2） */
.ov-chevron { display: none; font-size: 10px; }
@media (max-width: 768px) {
  .ov-chevron { display: inline-block; }
  .ov-floor-title { cursor: pointer; user-select: none; }
  .ov-floor-sec .ov-room-grid { display: none; }
  .ov-floor-sec.open .ov-room-grid { display: grid; }
}

/* 概览子 tab 统一卡片容器 */
.dash-panel {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.05));
}

/* ===== 表单弹窗（入住登记等）：单页分区、视觉统一 ===== */
.modal-content:has(#custName) { width: min(700px, 96vw); }
.modal-subtitle { margin: -6px 0 14px; font-size: var(--fs-sm); color: var(--muted); }
.form-section { padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); margin-bottom: 12px; }
.form-section + .form-section { margin-top: 0; }
.form-section > .section-title { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--text); }
.form-section .form-row { gap: 12px 16px; }
.form-section .form-group { margin: 0; }
.form-section .form-group label { margin-bottom: 5px; }
.form-section.form-section-tint { background: color-mix(in srgb, var(--primary) 6%, var(--card)); border-color: color-mix(in srgb, var(--primary) 18%, var(--border)); }
.check-line { display: flex; align-items: center; gap: 8px; margin: 12px 0 2px; font-size: var(--fs-md); cursor: pointer; user-select: none; }
.check-line input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); }
.due-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 11px 16px; border-radius: 10px; background: color-mix(in srgb, var(--primary) 8%, var(--card)); border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border)); }
.due-bar .due-lbl { font-size: var(--fs-md); color: var(--muted); }
.due-bar .due-val { font-size: 20px; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; line-height: 1; }
@media (max-width: 640px) {
  .modal-content:has(#custName) { width: 96vw; }
  .form-section { padding: 12px; }
}

/* ===== 房间详情 7 列表：窄屏转卡片堆叠（修复手机横向溢出） ===== */
@media (max-width: 640px) {
  .modal-content .room-detail-grid { table-layout: auto; min-width: 0 !important; width: 100% !important; }
  .modal-content .room-detail-grid th { display: none !important; }
  .modal-content .room-detail-grid thead { display: none !important; }
  .modal-content .room-detail-grid,
  .modal-content .room-detail-grid tbody { display: block; width: 100%; }
  .modal-content .room-detail-grid tr {
    display: block; border: 1px solid var(--border); border-radius: 12px;
    padding: 8px 14px; margin: 0 0 12px; background: var(--bg);
  }
  .modal-content .room-detail-grid td {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 8px 0; border: none; border-bottom: 1px dashed var(--border);
    font-family: var(--font) !important; white-space: normal !important; text-align: right;
  }
  .modal-content .room-detail-grid td::before {
    content: attr(data-label); flex: 0 0 auto; color: var(--muted);
    font-size: 12.5px; font-weight: 600; text-align: left;
  }
  .modal-content .room-detail-grid td:last-child { border-bottom: none; }
  .modal-content .room-detail-grid td[data-label="操作"] { justify-content: flex-end; }
}


/* ============================================================
   全局视觉精修：控件令牌 / 数字对齐 / 金额备注列 / 统一空状态
   ============================================================ */
:root { --ctl-h: 38px; --ctl-h-sm: 30px; --r-ctl: 10px; }

/* 表格与 KPI 数字等宽，纵向按位对齐 */
table, .kpi .kv, .kpi-pool b { font-variant-numeric: tabular-nums; }
.num, .td-date { font-variant-numeric: tabular-nums; }

/* 金额列：右对齐、等宽、不换行（表头与单元格同类名） */
.td-amount { text-align: right; white-space: nowrap; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* 备注 / 原因列：超长省略，完整内容悬停见 title */
.td-note { max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 控件圆角统一到令牌；分段按钮与小按钮等高、内容居中 */
.btn, input, select, textarea, .segbar { border-radius: var(--r-ctl); }
.seg { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; }

/* 统一空状态：线性图标 + 弱化文案（表格 td 与卡片 div 通用） */
.empty-tip { text-align: center; color: var(--muted); padding: 36px 16px; font-size: 13px; line-height: 1.7; }
.empty-tip::before {
  content: ""; display: block; width: 42px; height: 42px; margin: 0 auto 10px;
  background-repeat: no-repeat; background-position: center; background-size: contain; opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E");
}
@media (max-width: 768px) { .td-note { max-width: 150px; } }

/* ============================================================
   雾化玻璃 · 雾霾蓝主题（data-theme="glass"）
   - 冷调蓝灰渐变背景 + 柔光斑，面板为半透明毛玻璃
   - 强调色 / 导航色跟随「设置→外观」配色（color-mix 动态派生）
   - 状态色块（在住/预订/空闲）保持语义实色
   ============================================================ */
[data-theme="glass"] {
  /* 强调色 / 导航色不写死，交由「设置→外观」配置（内联变量）动态派生 */
  /* 页面背景交给 body 渐变 */
  --bg: transparent !important;
  --page-bg: transparent !important;
  /* 玻璃面（半透明白，中性质感，不随配色变化以保证可读） */
  --card: rgba(255,255,255,.60) !important;
  --bg-card: rgba(255,255,255,.55) !important;
  /* 文字：深蓝灰，加深保证浅玻璃上的可读性 v2 */
  --text: #0B1220 !important;
  --muted: #334155 !important;
  --ink-2: #0F172A !important;
  --ink-3: #1E293B !important;
  /* 边框 / 阴影 */
  --border: rgba(255,255,255,.60) !important;
  --shadow-sm: 0 1px 2px rgba(46,74,110,.10);
  --shadow-md: 0 8px 24px rgba(46,74,110,.14);
  --shadow-lg: 0 18px 48px rgba(46,74,110,.20);
  /* 导航色跟随用户配置，做半透明玻璃化派生 */
  --sidebar: color-mix(in srgb, var(--nav-bg) 74%, transparent);
  --sidebar-2: color-mix(in srgb, var(--nav-bg) 84%, transparent);
  --nav-title: #1E293B !important;
  --nav-active: #0F172A !important;
  --nav-active-bg: rgb(51 65 85 / .2) !important;
  --glass-nav-active: rgb(51 65 85 / .2) !important;
  /* 主色淡底跟随主题色 */
  --brand-50: color-mix(in srgb, var(--primary) 12%, #ffffff);
  /* 玻璃质感令牌（整改优化版 v2） */
  --glass-panel: linear-gradient(150deg, rgba(255,255,255,.72), rgba(248,251,255,.58));
  --glass-panel-2: rgba(255,255,255,.42);
  --glass-deep: linear-gradient(150deg, color-mix(in srgb, var(--nav-bg) 58%, transparent), color-mix(in srgb, var(--nav-bg) 72%, transparent));
  --glass-border: rgba(255,255,255,.55);
  --glass-blur: blur(24px) saturate(180%);
  --glass-shadow:
    0 0 0 1px rgba(96,130,170,.10),
    0 16px 48px rgba(46,74,110,.18),
    0 4px 16px rgba(46,74,110,.08),
    inset 0 1px 0 rgba(255,255,255,.80),
    inset 0 -1px 0 rgba(255,255,255,.15);
  /* 主按钮 / 选中态：基于用户主色的微渐变与投影 */
  --glass-primary: linear-gradient(135deg, color-mix(in srgb, var(--primary) 88%, #ffffff 12%), color-mix(in srgb, var(--primary) 92%, #000000 8%));
  --glass-primary-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 32%, transparent);
  /* 导航描边 / 选中遮罩随导航文字色自适应（深导航白描边、浅导航深描边） */
  --glass-nav-line: color-mix(in srgb, var(--nav-text) 18%, transparent);
  --glass-nav-active: color-mix(in srgb, var(--nav-text) 16%, transparent);
}

/* 页面雾化背景：冷蓝灰渐变 + 多层柔光斑（v24 - 增加彩色光斑，提升玻璃通透感） */
[data-theme="glass"] body {
  background:
    radial-gradient(ellipse at 8% 15%, rgba(147, 197, 253, 0.5) 0%, transparent 42%),
    radial-gradient(ellipse at 92% 10%, rgba(196, 181, 253, 0.35) 0%, transparent 38%),
    radial-gradient(ellipse at 85% 90%, rgba(134, 239, 172, 0.22) 0%, transparent 40%),
    radial-gradient(ellipse at 15% 88%, rgba(253, 186, 116, 0.2) 0%, transparent 38%),
    linear-gradient(135deg,
      #F0F4FA 0%,
      #E8EEF6 35%,
      #F5F7FB 70%,
      #EDF1F7 100%
    ) fixed !important;
  color: #1E293B;
}

/* 统一玻璃卡片：所有页面外层 .card 都是玻璃效果（v24 - 总览页与其他页统一，无边框） */
[data-theme="glass"] .card {
  background:
    linear-gradient(145deg,
      rgb(255 255 255 / .68),
      rgb(255 255 255 / .48)
    ) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%) !important;
  backdrop-filter: blur(22px) saturate(170%) !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow:
    0 10px 36px rgba(46,74,110,.14),
    0 3px 12px rgba(46,74,110,.06) !important;
}

/* 进度条：玻璃主题下调柔和，避免深灰太突兀 */
[data-theme="glass"] .mg-bar { background: rgba(255,255,255,.45) !important; }
[data-theme="glass"] .mg-room .mg-bar i { background: #94A3B8 !important; }
[data-theme="glass"] .mc-bar { background: rgba(255,255,255,.45) !important; }

/* 总览页内部区块：浅底扁平无边框，靠柔和阴影区分层级 */
[data-theme="glass"] .tile,
[data-theme="glass"] .kpi,
[data-theme="glass"] .mc,
[data-theme="glass"] .dash-panel,
[data-theme="glass"] .stat-card {
  background: rgba(255,255,255,.45) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(46,74,110,.08), 0 1px 3px rgba(46,74,110,.04) !important;
}

/* 弹框玻璃质感 */
[data-theme="glass"] .modal-content,
[data-theme="glass"] .op-menu,
[data-theme="glass"] .toast {
  background:
    linear-gradient(145deg,
      rgb(255 255 255 / .85),
      rgb(255 255 255 / .7)
    ) !important;
  border: none !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  border-radius: 14px !important;
  color: #0F172A !important;
  box-shadow:
    0 20px 60px rgb(100 116 139 / .18),
    0 8px 24px rgb(100 116 139 / .1) !important;
}
[data-theme="glass"] .modal-content .muted,
[data-theme="glass"] .modal-content [class*="sub"],
[data-theme="glass"] .modal-content label {
  color: #334155 !important;
}

/* 房间卡片 - 扁平浅底无边框，靠柔和阴影区分层级 */
[data-theme="glass"] .room-card,
[data-theme="glass"] .cls-room-card {
  background: rgba(255,255,255,.40) !important;
  border: none !important;
  box-shadow:
    0 12px 32px rgba(30, 41, 59, .25),
    0 4px 12px rgba(30, 41, 59, .15) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 去掉所有 hover 和 focus 的边框反馈 - 全局（透明化而非 inherit，避免变成黑框） */
[data-theme="glass"] *:hover,
[data-theme="glass"] *:focus,
[data-theme="glass"] *:focus-visible {
  border-color: transparent !important;
  outline: none !important;
}

/* 按钮和链接保留 hover 效果，其他卡片全去掉 */
[data-theme="glass"] .btn:hover,
[data-theme="glass"] .op-trigger:hover,
[data-theme="glass"] .sidebar a:hover {
  /* 按钮的 hover 效果保留 */
}

/* 玻璃主题 - 房间格子立体阴影 */
[data-theme="glass"] .mg-room {
  border: 1px solid rgba(255,255,255,.7) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.65), rgba(255,255,255,.45)) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 8px 8px 10px !important;
  gap: 6px !important;
  box-shadow:
    0 4px 12px rgba(30, 41, 59, 0.12),
    0 1px 3px rgba(30, 41, 59, 0.06) !important;
}

/* 卡片类 hover：柔和阴影上浮，替代边框反馈 */
[data-theme="glass"] .kpi:hover,
[data-theme="glass"] .mc:hover,
[data-theme="glass"] .quick-btn:hover,
[data-theme="glass"] .tile:hover,
[data-theme="glass"] .room-card:hover,
[data-theme="glass"] .cls-room-card:hover,
[data-theme="glass"] .mg-room:hover,
[data-theme="glass"] .floor-room:hover,
[data-theme="glass"] .floor-block:hover {
  box-shadow: 0 4px 16px rgba(46,74,110,.12) !important;
  border-color: transparent !important;
  transform: translateY(-1px) !important;
  transition: all 0.2s ease !important;
}

/* 平设计 - 房间卡片和床位样式 v20 */
[data-theme="glass"] .room-card {
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(46,74,110,.08) !important;
  border: none !important;
  outline: none !important;
}
[data-theme="glass"] .room-card:focus,
[data-theme="glass"] .room-card:focus-visible,
[data-theme="glass"] .room-card:active {
  outline: none !important;
  box-shadow: 0 6px 20px rgba(46,74,110,.15) !important;
  border: none !important;
}

/* 统一已占用样式 - 浅红底深红字 */
[data-theme="glass"] .bed-occupied,
[data-theme="glass"] .seat-occupied {
  background: #FEE2E2 !important;
  box-shadow: none !important;
  color: #DC2626 !important;
  border-radius: 6px !important;
}

[data-theme="glass"] .bed-empty,
[data-theme="glass"] .seat-empty {
  background: #F8FAFC !important;
  box-shadow: none !important;
  color: #94A3B8 !important;
  border-radius: 6px !important;
}

[data-theme="glass"] .tile:hover,
[data-theme="glass"] .room-card:hover,
[data-theme="glass"] .cls-room-card:hover {
  box-shadow: none !important;
}

/* 侧边栏玻璃质感 */
[data-theme="glass"] .sidebar {
  background:
    linear-gradient(180deg,
      rgb(255 255 255 / .6),
      rgb(255 255 255 / .4)
    ) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  border-right: none !important;
  box-shadow: 2px 0 16px rgb(100 116 139 / .06) !important;
}

/* 选中项高亮 - 玻璃质感 */
[data-theme="glass"] .sidebar nav a.active,
[data-theme="glass"] .sidebar nav a[aria-current="page"],
[data-theme="glass"] .sidebar nav a.active *,
[data-theme="glass"] .sidebar nav a[aria-current="page"] * {
  color: var(--nav-title) !important;
  font-weight: 600 !important;
}
[data-theme="glass"] .sidebar nav a.active,
[data-theme="glass"] .sidebar nav a[aria-current="page"] {
  background: rgba(255,255,255,.45) !important;
  border-left: none !important;
  box-shadow: 0 2px 10px rgba(46, 74, 110, .12) !important;
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
}

/* 按钮：统一玻璃风格 */
[data-theme="glass"] .btn-primary {
  background: var(--glass-primary);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow:
    var(--glass-primary-shadow),
    inset 0 1px 0 rgba(255,255,255,.3);
  color: var(--primary-text, #fff);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

[data-theme="glass"] .btn-ghost {
  background: rgba(255,255,255,.45);
  border: 1px solid var(--glass-border);
  color: var(--ink-2);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
/* 楼层区域：去掉外层容器，直接透明，靠标题和分隔线区分（v6） */
[data-theme="glass"] .ov-floor-sec {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* 玻璃导航：侧栏 / 移动顶栏 / 底部 Tab（整改优化版 v6 - 更通透 + 字体自适应） */
[data-theme="glass"] .sidebar,
[data-theme="glass"] .mobile-topbar,
[data-theme="glass"] .tabbar {
  background:
    linear-gradient(165deg,
      color-mix(in srgb, var(--nav-bg) 35%, transparent) 0%,
      color-mix(in srgb, var(--nav-bg) 25%, transparent) 50%,
      color-mix(in srgb, var(--nav-bg) 40%, transparent) 100%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  backdrop-filter: blur(30px) saturate(200%);
  box-shadow:
    0 8px 32px color-mix(in srgb, var(--primary) 15%, transparent),
    inset 0 1px 0 rgba(255,255,255,.15);
}
[data-theme="glass"] .sidebar { border-right: none !important; }
[data-theme="glass"] .tabbar { border-top: none !important; }
[data-theme="glass"] .mobile-topbar { border-bottom: none !important; }
/* 侧边栏内部分隔线透明化 */
[data-theme="glass"] .sidebar .logo { border-bottom-color: rgba(0,0,0,.06) !important; }
[data-theme="glass"] .sidebar-foot { border-top-color: rgba(0,0,0,.06) !important; }
[data-theme="glass"] .sidebar .divider { border-top-color: rgba(0,0,0,.06) !important; }
/* 导航字体颜色：根据背景亮度自适应（v6） */
[data-theme="glass"] .sidebar,
[data-theme="glass"] .mobile-topbar,
[data-theme="glass"] .tabbar {
  color: var(--nav-text);
}
[data-theme="glass"] .sidebar nav a,
[data-theme="glass"] .tabbar a,
[data-theme="glass"] .mobile-topbar {
  color: #1E293B !important;
  opacity: 1;
  font-weight: 500;
}
[data-theme="glass"] .sidebar nav a:hover,
[data-theme="glass"] .tabbar a:hover {
  opacity: 1;
  background: rgba(255,255,255,.25) !important;
  border-left: none !important;
  box-shadow: none !important;
}
[data-theme="glass"] .sidebar nav a::before,
[data-theme="glass"] .sidebar nav a.active::before,
[data-theme="glass"] .sidebar nav a:hover::before {
  display: none !important;
}
[data-theme="glass"] .tabbar a.active {
  color: var(--primary);
  opacity: 1;
}
[data-theme="glass"] .sidebar .nav-item.active,
[data-theme="glass"] .sidebar .nav-item.active * {
  background: rgba(255,255,255,.4) !important;
  color: #0F172A !important;
  font-weight: 600 !important;
  opacity: 1;
  box-shadow: 0 2px 10px rgba(46, 74, 110, .12) !important;
}
[data-theme="glass"] .sidebar .logo h2 {
  color: #1e293b !important;
}
[data-theme="glass"] .sidebar .logo p {
  color: #64748b !important;
  opacity: 1;
}
[data-theme="glass"] .sidebar .logo {
  border-bottom-color: rgba(0,0,0,.08) !important;
}

/* 大量重复的卡片：扁平浅底，减少玻璃嵌套感（整改优化版 v3） */
[data-theme="glass"] .room-card {
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(255,255,255,.40);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* 座位单元格：更扁平，减少层层叠叠感（v3） */
[data-theme="glass"] .seat-cell {
  border-radius: 8px;
  border-width: 1px;
  box-shadow: none;
  transition: transform 0.15s;
}
[data-theme="glass"] .seat-cell:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(46,74,110,.12);
}
[data-theme="glass"] .seat-cell.free {
  background: rgba(255,255,255,.45);
  border-color: rgba(255,255,255,.50);
}
[data-theme="glass"] .seat-cell.used {
  background: color-mix(in srgb, var(--occupied) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--occupied) 25%, transparent);
  color: var(--occupied);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
}
[data-theme="glass"] .seat-cell.used .sc-state {
  background: color-mix(in srgb, var(--occupied) 15%, transparent);
}
[data-theme="glass"] .seat-cell.booked,
[data-theme="glass"] .seat-cell.reserved {
  background: color-mix(in srgb, var(--reserved) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--reserved) 25%, transparent);
  color: var(--reserved);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
}
[data-theme="glass"] .seat-cell.booked .sc-state,
[data-theme="glass"] .seat-cell.reserved .sc-state {
  background: color-mix(in srgb, var(--reserved) 15%, transparent);
}

/* 表单控件：浅玻璃无边框 */
[data-theme="glass"] input,
[data-theme="glass"] select,
[data-theme="glass"] textarea {
  background: rgba(255,255,255,.50);
  border: none;
  color: var(--text);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(46,74,110,.06);
}
[data-theme="glass"] input::placeholder,
[data-theme="glass"] textarea::placeholder { color: #8293AA; }
[data-theme="glass"] input:focus,
[data-theme="glass"] select:focus,
[data-theme="glass"] textarea:focus { background: rgba(255,255,255,.78); box-shadow: 0 0 0 2px var(--primary), 0 4px 12px rgba(46,74,110,.1); outline: none; }
[data-theme="glass"] select option { background: #EAF1F8; color: var(--text); }

/* 自定义下拉框 - 玻璃主题 */
[data-theme="glass"] .cb-input {
  background: rgba(255,255,255,.50);
  border: none;
  color: var(--text);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(46,74,110,.06);
}
[data-theme="glass"] .cb-input:hover {
  background: rgba(255,255,255,.65);
}
[data-theme="glass"] .cb.cb-open .cb-input,
[data-theme="glass"] .cb-input:focus {
  background: rgba(255,255,255,.78);
  box-shadow: 0 0 0 2px var(--primary), 0 4px 12px rgba(46,74,110,.1);
  outline: none;
  border: none;
}
[data-theme="glass"] .cb-arrow {
  color: #64748B;
}
[data-theme="glass"] .cb-text.cb-placeholder {
  color: #8293AA;
  opacity: 1;
}
[data-theme="glass"] .cb-list {
  background: linear-gradient(145deg,
    rgb(255 255 255 / .88),
    rgb(255 255 255 / .72)
  );
  border: none;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    0 20px 60px rgb(100 116 139 / .18),
    0 8px 24px rgb(100 116 139 / .1);
  padding: 6px;
}
[data-theme="glass"] .cb-item:hover {
  background: rgba(255,255,255,.7);
}
[data-theme="glass"] .cb-item.cb-active,
[data-theme="glass"] .cb-item.cb-selected {
  background: color-mix(in srgb, var(--primary) 12%, rgba(255,255,255,.8));
  color: var(--primary);
}
[data-theme="glass"] .cb-item.cb-disabled {
  color: #94A3B8;
}

/* 搜索栏内的下拉框 - 玻璃主题 */
[data-theme="glass"] .search-bar .cb-input {
  background: rgba(255,255,255,.50);
}

/* 自定义日期框 - 玻璃主题 */
[data-theme="glass"] .date-text {
  color: var(--text);
}
[data-theme="glass"] .date-text.date-empty {
  color: #8293AA;
  opacity: 1;
}

/* 表格：透明底 + 半透明表头与隔行 + 无边框 */
[data-theme="glass"] .table-container,
[data-theme="glass"] table { background: transparent; border: none; box-shadow: none; }
[data-theme="glass"] table th { background: rgba(255,255,255,.52); color: var(--muted); border-bottom: none; }
[data-theme="glass"] table td { background: transparent; border-bottom: 1px solid rgba(255,255,255,.4); }
[data-theme="glass"] tbody tr:nth-child(even) td { background: rgba(255,255,255,.26); }
[data-theme="glass"] tbody tr:hover td { background: rgba(255,255,255,.52); }

/* 分段控件：玻璃主题下调实，确保文字清晰可见 */
[data-theme="glass"] .segbar {
  background: rgba(255,255,255,.55);
  border: none;
  padding: 4px;
}
[data-theme="glass"] .seg {
  background: transparent;
  color: #1E293B !important;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 8px;
}
[data-theme="glass"] .seg.active {
  background: linear-gradient(135deg, #1E3A5F, #0F172A) !important;
  color: #FFFFFF !important;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);
}

/* 按钮：统一白色玻璃风格，和导航选中态一致 */
[data-theme="glass"] .btn-primary {
  background: rgba(255,255,255,.65) !important;
  border: 1px solid rgba(255,255,255,.8) !important;
  color: #0F172A !important;
  font-weight: 600 !important;
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  box-shadow:
    0 3px 12px rgba(46,74,110,.14),
    0 1px 3px rgba(46,74,110,.06),
    inset 0 1px 0 rgba(255,255,255,.8) !important;
}
[data-theme="glass"] .btn-primary:hover {
  background: rgba(255,255,255,.8) !important;
  box-shadow:
    0 6px 20px rgba(46,74,110,.18),
    0 2px 6px rgba(46,74,110,.08),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
  filter: none !important;
}
[data-theme="glass"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning) {
  background: rgba(255,255,255,.45) !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  color: #334155 !important;
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  box-shadow: 0 2px 8px rgba(46,74,110,.08) !important;
}
[data-theme="glass"] .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):hover {
  background: rgba(255,255,255,.65) !important;
  box-shadow: 0 4px 16px rgba(46,74,110,.12) !important;
}
[data-theme="glass"] .modal-content > .modal-foot .op-trigger {
  background: rgba(255,255,255,.45) !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  color: #334155 !important;
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  box-shadow: 0 2px 8px rgba(46,74,110,.08) !important;
}
[data-theme="glass"] .modal-content > .modal-foot .op-trigger:hover {
  background: rgba(255,255,255,.65) !important;
  color: var(--primary) !important;
  box-shadow: 0 4px 16px rgba(46,74,110,.12) !important;
}

/* 玻璃主题 - 语义色按钮：白色玻璃 + 彩色文字/边框点缀 */
[data-theme="glass"] .btn-success {
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(16,185,129,.3) !important;
  color: #047857 !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 2px 10px rgba(16,185,129,.12) !important;
}
[data-theme="glass"] .btn-success:hover {
  background: rgba(255,255,255,.75) !important;
  box-shadow: 0 4px 16px rgba(16,185,129,.18) !important;
}
[data-theme="glass"] .btn-warning {
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(245,158,11,.3) !important;
  color: #B45309 !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 2px 10px rgba(245,158,11,.12) !important;
}
[data-theme="glass"] .btn-warning:hover {
  background: rgba(255,255,255,.75) !important;
  box-shadow: 0 4px 16px rgba(245,158,11,.18) !important;
}
[data-theme="glass"] .btn-danger {
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(239,68,68,.3) !important;
  color: #DC2626 !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 2px 10px rgba(239,68,68,.12) !important;
}
[data-theme="glass"] .btn-danger:hover {
  background: rgba(255,255,255,.75) !important;
  box-shadow: 0 4px 16px rgba(239,68,68,.18) !important;
}

/* 中性统计条 / 弹窗遮罩 / 侧栏遮罩 */
[data-theme="glass"] .alert-info {
  background: rgba(255,255,255,.5); border: none; color: var(--ink-2);
}
[data-theme="glass"] .quick-btn {
  border: none !important;
  background: rgba(255,255,255,.45) !important;
  box-shadow: 0 2px 8px rgba(46,74,110,.07) !important;
}
[data-theme="glass"] .quick-btn:hover {
  background: rgba(255,255,255,.65) !important;
  box-shadow: 0 4px 14px rgba(46,74,110,.12) !important;
}
[data-theme="glass"] .modal { background: rgba(36,56,86,.38); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
[data-theme="glass"] .overlay { background: rgba(36,56,86,.4); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }

/* 不支持 backdrop-filter 时的可读性兜底（面板更实） */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  [data-theme="glass"] { --card: #EAF0F7 !important; }
  [data-theme="glass"] .card, [data-theme="glass"] .tile, [data-theme="glass"] .modal-content,
  [data-theme="glass"] .kpi, [data-theme="glass"] .ov-floor-sec, [data-theme="glass"] .mc,
  [data-theme="glass"] .op-menu, [data-theme="glass"] .toast { background: #F2F6FB; }
  [data-theme="glass"] .sidebar, [data-theme="glass"] .mobile-topbar, [data-theme="glass"] .tabbar { background: var(--nav-bg); }
}

/* ============================================================
   雾化玻璃主题：无障碍与性能适配
   ============================================================ */
/* 玻璃专属焦点：用柔和阴影替代描边，避免深色主色导致黑框 */
[data-theme="glass"] :focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25), 0 2px 8px rgba(59, 130, 246, 0.15) !important;
}

/* 全局去深色边框：玻璃主题下所有非按钮元素的深色边框统一替换为柔和半透明白边 */
[data-theme="glass"] .floor-block,
[data-theme="glass"] .floor-block-grid,
[data-theme="glass"] .import-block,
[data-theme="glass"] .summary-box,
[data-theme="glass"] .price-panel {
  background: rgba(255,255,255,.35) !important;
  border-color: rgba(255,255,255,.45) !important;
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
}
[data-theme="glass"] .form-section-title { color: #0F172A; }

/* 移动端减小模糊半径，降低 GPU 开销（tile/kpi/mc/dash-panel 为扁平，不需模糊） */
@media (max-width: 768px) {
  [data-theme="glass"] .card, [data-theme="glass"] .modal-content,
  [data-theme="glass"] .op-menu, [data-theme="glass"] .toast {
    -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  }
  [data-theme="glass"] .sidebar, [data-theme="glass"] .mobile-topbar, [data-theme="glass"] .tabbar {
    -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  }
}

/* 经营季度卡片布局（重构版） */
.quarters-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 20px 0;
}
.quarter-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.quarter-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
}
.quarter-body {
  display: flex;
  align-items: center;
  gap: 12px;
}
.quarter-date-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.quarter-date-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.quarter-date-inputs {
  display: flex;
  gap: 8px;
}
.quarter-date-inputs select {
  flex: 1;
  width: 100%;
  min-width: 70px;
  padding: 8px 28px 8px 10px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background-color: var(--input-bg) !important;
  appearance: auto;
  -webkit-appearance: auto;
  font-size: 14px;
}
.quarter-arrow {
  font-size: 18px;
  color: var(--muted);
  padding: 0 4px;
}
@media (max-width: 768px) {
  .quarters-grid { grid-template-columns: 1fr; }
}

/* 系统偏好"减少透明度"：玻璃改近实色并关闭模糊，保证可读性 */
@media (prefers-reduced-transparency: reduce) {
  [data-theme="glass"] {
    --card: #EAF0F7 !important;
    --glass-panel: linear-gradient(150deg, #F5F9FD, #E9F0F8);
    --glass-deep: var(--nav-bg);
  }
  [data-theme="glass"] .card, [data-theme="glass"] .tile, [data-theme="glass"] .modal-content,
  [data-theme="glass"] .kpi, [data-theme="glass"] .ov-floor-sec, [data-theme="glass"] .mc,
  [data-theme="glass"] .op-menu, [data-theme="glass"] .toast,
  [data-theme="glass"] .sidebar, [data-theme="glass"] .mobile-topbar, [data-theme="glass"] .tabbar {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* ========== 最高优先级：侧边栏选中项（v226 修复） ========== */
[data-theme="glass"] #sideNav a.active,
[data-theme="glass"] #sideNav a.active span,
[data-theme="glass"] #sideNav a.active svg,
[data-theme="glass"] #sideNav a[aria-current="page"],
[data-theme="glass"] #sideNav a[aria-current="page"] span,
[data-theme="glass"] #sideNav a[aria-current="page"] svg {
  color: #0F172A !important;
  background-color: transparent !important;
  font-weight: 600 !important;
}
[data-theme="glass"] #sideNav a.active,
[data-theme="glass"] #sideNav a[aria-current="page"] {
  background: rgba(255,255,255,.4) !important;
  box-shadow: 0 2px 10px rgba(46, 74, 110, .12) !important;
}
/* ========== 装饰线调整（v227） ========== */
[data-theme="glass"] .card h3::after,
[data-theme="glass"] .section-title::before,
[data-theme="glass"] .modal-head h3::before {
  content: none !important;
}

/* tile-head 底部分隔线 + h3 分隔线保留，玻璃质感 */
[data-theme="glass"] .tile-head {
  border-bottom: 1px solid rgba(46, 74, 110, .15) !important;
  padding-bottom: 12px !important;
}
[data-theme="glass"] .card h3,
[data-theme="glass"] .tile-head h3 {
  border-bottom-color: rgba(46, 74, 110, .15) !important;
  border-bottom-width: 1.5px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) !important;
}
[data-theme="glass"] .tile-head h3::after {
  content: '' !important;
  background: var(--primary) !important;
}
/* ============================================================
   v229 最终修复：彻底去掉所有多余边框、线条、背景容器
   ============================================================ */

/* 1. 所有分段切换栏：完全透明，无背景无边框 */
[data-theme="glass"] .segbar,
[data-theme="glass"] .resource-tabbar,
[data-theme="glass"] #roomViewBar,
[data-theme="glass"] #classSegBar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 2. 卡片标题区域：保留底部分隔线，玻璃质感 */
[data-theme="glass"] .tile-head {
  border-bottom: 1px solid rgba(46, 74, 110, .18) !important;
  padding-bottom: 12px !important;
}

/* 3. 标题装饰线（蓝色短横线）保留，玻璃质感 */
[data-theme="glass"] .tile-head h3::after {
  content: '' !important;
  display: block !important;
  background: var(--primary) !important;
}
[data-theme="glass"] .card h3::after,
[data-theme="glass"] .section-title::before,
[data-theme="glass"] .modal-head h3::before,
[data-theme="glass"] .ov-floor-title::before,
[data-theme="glass"] .ov-floor-title::after {
  content: none !important;
  display: none !important;
}

/* 4. 搜索/定位输入框：无边框，透明底 */
[data-theme="glass"] .ov-locate,
[data-theme="glass"] .search-bar input,
[data-theme="glass"] .search-bar select {
  border: none !important;
  background: rgba(255,255,255,.35) !important;
  box-shadow: none !important;
}
[data-theme="glass"] .ov-locate:focus,
[data-theme="glass"] .search-bar input:focus,
[data-theme="glass"] .search-bar select:focus {
  border: none !important;
  box-shadow: none !important;
  background: rgba(255,255,255,.55) !important;
  outline: none !important;
}

/* 5. 楼层标题无任何装饰 */
[data-theme="glass"] .ov-floor-title {
  border-left: none !important;
  padding-left: 0 !important;
}
/* 6. 标题 h3 自身的下边框去掉（card / tile 中普通 h3），tile-head h3 保留 */
[data-theme="glass"] .card h3,
[data-theme="glass"] .tile h3 {
  border-bottom: none !important;
  box-shadow: none !important;
}
[data-theme="glass"] .tile-head h3 {
  border-bottom: 1.5px solid rgba(46, 74, 110, .18) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) !important;
}
/* ============================================================
   v231 清理残留虚线、分隔线
   ============================================================ */

/* KPI 卡片底部虚线去掉 */
[data-theme="glass"] .kpi-foot {
  border-top: none !important;
  padding-top: 6px !important;
}

/* 房间卡片底部虚线去掉 */
[data-theme="glass"] .mg-room .mg-foot,
[data-theme="glass"] .room-card .card-stats {
  border-top: none !important;
}

/* 通用分隔虚线在 glass 下去掉 */
[data-theme="glass"] .divider-line {
  border-top: none !important;
  margin: 8px 0 !important;
}

/* tile-head 标题横线最终恢复（覆盖 card h3::after 的隐藏规则） */
[data-theme="glass"] .card .tile-head h3::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 40px !important;
  height: 2px !important;
  background: var(--primary) !important;
  border-radius: 2px !important;
}
/* ============================================================
   v232 侧边栏选中项：中性灰高对比，文字清晰
   ============================================================ */
[data-theme="glass"] #sideNav a.active,
[data-theme="glass"] #sideNav a.active span,
[data-theme="glass"] #sideNav a.active svg,
[data-theme="glass"] #sideNav a[aria-current="page"],
[data-theme="glass"] #sideNav a[aria-current="page"] span,
[data-theme="glass"] #sideNav a[aria-current="page"] svg {
  color: #0F172A !important;
  font-weight: 700 !important;
}
[data-theme="glass"] #sideNav a.active,
[data-theme="glass"] #sideNav a[aria-current="page"] {
  background: rgba(71, 85, 105, .14) !important;
  box-shadow: none !important;
  border: none !important;
}
[data-theme="glass"] #sideNav a.active svg,
[data-theme="glass"] #sideNav a[aria-current="page"] svg {
  opacity: 1 !important;
}
/* ============================================================
   v233 教室座位格玻璃化（与房间 seat-cell 一致）+ 走廊柔和化
   ============================================================ */

/* 教室座位格：与房间格子同样的半透明白玻璃 */
[data-theme="glass"] .fbg-cell.free {
  background: rgba(255,255,255,.45) !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  color: #334155 !important;
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
}
[data-theme="glass"] .fbg-cell.used {
  background: color-mix(in srgb, var(--occupied) 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--occupied) 25%, transparent) !important;
  color: var(--occupied) !important;
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
}
[data-theme="glass"] .fbg-booked,
[data-theme="glass"] .fbg-cell.booked,
[data-theme="glass"] .fbg-cell.miss {
  background: color-mix(in srgb, var(--reserved) 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--reserved) 25%, transparent) !important;
  color: var(--reserved) !important;
}
[data-theme="glass"] .fbg-blank { background: transparent !important; border-color: transparent !important; }

/* 教室整层网格容器：去掉实色底，融入玻璃 */
[data-theme="glass"] .cm-grid {
  background: transparent !important;
  border: none !important;
}
/* 示意图模式的座位格状态色，统一玻璃质感 */
[data-theme="glass"] .cm-view .cm-cell.cm-free,
[data-theme="glass"] .cm-cell.cm-free {
  background: rgba(255,255,255,.45) !important;
  border-color: rgba(255,255,255,.5) !important;
  color: #334155 !important;
}
[data-theme="glass"] .cm-view .cm-cell.cm-used,
[data-theme="glass"] .cm-cell.cm-used {
  background: color-mix(in srgb, var(--occupied) 14%, transparent) !important;
  color: var(--occupied) !important;
}
[data-theme="glass"] .cm-view .cm-cell.cm-miss,
[data-theme="glass"] .cm-cell.cm-miss {
  background: color-mix(in srgb, var(--reserved) 14%, transparent) !important;
  color: var(--reserved) !important;
}

/* 走廊 / 过道：柔和半透明雾面，替代实色灰 */
[data-theme="glass"] .floor-corridor,
[data-theme="glass"] .fbg-aisle,
[data-theme="glass"] .fbg-aisle-h,
[data-theme="glass"] .cm-aisle {
  background: rgba(100,116,139,.12) !important;
  border: none !important;
  background-image: none !important;
  color: #64748B !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
[data-theme="glass"] .floor-slot.has-corridor {
  background: rgba(100,116,139,.12) !important;
  border-color: transparent !important;
}
[data-theme="glass"] .floor-slot .fl-corridor { color: #64748B !important; }
/* ============================================================
   v234 移动端紧凑适配：子tab横滑不折行、表格一屏放下不横滑
   ============================================================ */
@media (max-width: 560px) {
  /* 顶部子标签：横向滑动，不折成两行 */
  .segbar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 3px;
  }
  .segbar::-webkit-scrollbar { display: none; }
  .segbar .seg {
    flex: 0 0 auto !important;
    white-space: nowrap;
    padding: 7px 12px !important;
    font-size: 13px !important;
  }

  /* 表格：取消 800px 最小宽，一屏内放下，列间距收紧 */
  .table-container { overflow-x: hidden !important; margin: 8px 0; }
  .table-container table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: fixed;
    font-size: 12px !important;
  }
  .table-container thead th {
    padding: 7px 5px !important;
    font-size: 11px !important;
    white-space: nowrap;
  }
  .table-container tbody td {
    padding: 7px 5px !important;
    font-size: 12px !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  /* 操作列按钮紧凑 */
  .table-container td .btn {
    padding: 4px 8px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }
}
/* ============================================================
   v235 修复移动端：op-menu 下拉弹出定位 + 弹窗表格表头隐藏
   ============================================================ */

/* op-menu 移到 body 下后，确保层级和小屏适配 */
.op-menu {
  z-index: 3000 !important;
  max-width: calc(100vw - 16px);
  max-height: 70vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 560px) {
  .op-menu { min-width: 140px; padding: 4px; }
  .op-item { padding: 10px 14px; font-size: 13px; }

  /* 弹窗内所有表格：移动端表头一律隐藏，避免出现那排模糊表头 */
  .modal-content .table-container thead,
  .modal-content .table-container thead tr,
  .modal-content .table-container thead th { display: none !important; }

  /* modal 内容区滚动更顺 */
  .modal-body { -webkit-overflow-scrolling: touch; }
}
/* ============================================================
   v236 房间详情卡片背景实化：不要透出后面的页面内容
   ============================================================ */
@media (max-width: 640px) {
  .modal-content .room-detail-grid tr {
    background: var(--card, #ffffff) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 2px 10px -6px rgba(15,23,42,.15) !important;
  }
}
/* glass 主题下给卡片更实的半透明白，避免透出背景 */
[data-theme="glass"] .modal-content .room-detail-grid tr {
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(255,255,255,.6) !important;
}
/* ============================================================
   v237 统一日期输入框高度（iOS 原生 date 偏矮问题）
   ============================================================ */
input[type="date"], input[type="datetime-local"], input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  min-height: 38px;
  height: auto;
  padding: 8px 12px;
  line-height: 1.4;
}
@media (max-width: 768px) {
  input[type="date"], input[type="datetime-local"], input[type="time"] {
    min-height: 40px;
    height: 40px;
    padding: 9px 12px;
  }
}
/* ============================================================
   v238 修复移动端整页横向溢出 + 快捷按钮强制换行
   ============================================================ */
html, body { max-width: 100%; overflow-x: hidden; }
@media (max-width: 768px) {
  /* 任何容器都不许撑破视口 */
  .main, .card, .tile, .bento, .dash-panel,
  .t-big, .t-quick, .t-kpi, .t-class, .t-due {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  /* 快捷操作：强制 2 列，按钮文字横排不竖排 */
  .quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
  }
  .quick-btn {
    padding: 10px 12px;
    gap: 8px;
    min-width: 0;
  }
  .quick-btn .qb-tx { font-size: 12px; white-space: normal; word-break: keep-all; }
  .quick-btn .qb-ic { width: 30px; height: 30px; flex-shrink: 0; }
  /* 楼层平面图内部横滑，不撑破外层 */
  .floor-scroll, .room-floor-table, .floor-table {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 420px) {
  .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* ============================================================
   v239 移动端操作菜单改为底部动作面板（彻底规避真机 fixed 定位/backdrop-filter 问题）
   ============================================================ */
@media (max-width: 640px) {
  .op-menu {
    position: fixed !important;
    top: auto !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    left: 12px !important;
    right: 12px;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0;
    padding: 8px;
    border-radius: 16px;
    background: var(--card, #fff);
    box-shadow: 0 -8px 40px rgba(15,23,42,.22), 0 2px 12px rgba(15,23,42,.12);
    z-index: 3000 !important;
    animation: opSheetUp .18s ease-out;
  }
  @keyframes opSheetUp { from { transform: translateY(16px); opacity: .4; } to { transform: translateY(0); opacity: 1; } }
  .op-menu .op-item {
    padding: 14px 16px;
    font-size: 15px;
    text-align: center;
    border-radius: 10px;
    min-height: 48px;
    display: flex; align-items: center; justify-content: center;
  }
  .op-menu .op-item + .op-item { border-top: 1px solid var(--border); }
}
/* ============================================================
   v240 房间详情卡片：隐藏操作列重复的“操作”字段标签（按钮本身已带文字）
   ============================================================ */
@media (max-width: 640px) {
  .modal-content .room-detail-grid td[data-label="操作"]::before { content: none; display: none; }
  .modal-content .room-detail-grid td[data-label="操作"] { justify-content: flex-end; padding-top: 10px; }
}
/* ============================================================
   v241 待入住预订姓名/时间分行 + 下拉分组与移动端适配
   ============================================================ */
.resv-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.resv-item { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; line-height: 1.35; }
.resv-item + .resv-item { margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--border); }
.resv-name { font-weight: 600; color: var(--text); }
.resv-range { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 下拉 optgroup 分组标题更清晰 */
select optgroup { font-weight: 700; color: var(--text); }
select optgroup option { font-weight: 400; }

@media (max-width: 640px) {
  /* 卡片里“待入住预订”多行内容顶部对齐、姓名时间分行不挤 */
  .room-detail-grid td[data-label="待入住预订"] { align-items: flex-start; }
  .room-detail-grid td[data-label="待入住预订"] .resv-item { align-items: flex-end; }
  .resv-range { font-size: 11.5px; white-space: normal; text-align: right; }
}
@media (max-width: 560px) {
  /* 字号≥16px 防止 iOS 聚焦下拉时自动放大页面；高度与其他控件一致 */
  select, input, textarea { font-size: 16px; }
}
/* v241 补充：移动端自定义下拉项触摸友好、长文本换行、列表更高可滚动 */
@media (max-width: 640px) {
  .cb-list { max-height: 62vh !important; width: auto !important; min-width: 0 !important; left: 12px !important; right: 12px; }
  .cb-item { padding: 13px 14px; font-size: 15px; white-space: normal; line-height: 1.35; word-break: break-word; }
  .cb-input { min-height: 44px; }
}
/* ============================================================
   v242 总览磁贴标题图标与标题首行对齐
   图标盒原本相对“标题+副标题”两行整体垂直居中，导致比主标题偏下；
   改为顶部对齐并上移 2px，使图标中心与 h3 主标题中心精确齐平
   ============================================================ */
.tile-head .th-ic { align-self: flex-start; margin-top: -2px; }
/* ============================================================
   v243 自定义下拉浮层修复
   - 浮层打开时挂到 body（JS），用独立 class 控制显示，摆脱 modal backdrop-filter 包含块
   - 移动端全宽、最高 62vh、触摸顺滑可滚动
   ============================================================ */
.cb-list.cb-floating { display: block; min-width: 0; }
@media (max-width: 640px) {
  .cb-list.cb-floating {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: 62vh !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  .cb-list.cb-floating .cb-item {
    padding: 13px 14px;
    font-size: 15px;
    white-space: normal;
    line-height: 1.35;
    word-break: break-word;
  }
}
/* v243 总览迷你楼层网格：床位改为纯状态色块，固定尺寸整齐排列 */
.mg-bed {
  min-width: 15px;
  height: 15px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
/* ============ v246 下拉浮层滚动条常驻：小弹层需明确可滚动、可鼠标拖拽（不受全局自动隐藏影响） ============ */
.cb-list.cb-floating { -ms-overflow-style: auto; scrollbar-width: thin; scrollbar-color: rgba(148,163,184,.65) transparent; }
.cb-list.cb-floating::-webkit-scrollbar { width: 9px; height: 9px; display: block; }
.cb-list.cb-floating::-webkit-scrollbar-track { background: transparent; }
.cb-list.cb-floating::-webkit-scrollbar-thumb { background: rgba(148,163,184,.55); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
.cb-list.cb-floating::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.82); border: 2px solid transparent; background-clip: content-box; }
.cb-list.cb-floating::-webkit-scrollbar-corner { background: transparent; }