/* ==========================================================
   mobile.css — 手机版专属样式（≤760px）
   ----------------------------------------------------------
   加载方式：<link rel="stylesheet" href="mobile.css" media="(max-width:760px)">
            桌面浏览器不会下载、不会解析本文件，PC 侧零风险。

   维护规矩（重要，避免再踩叠加坑）：
     1. 以后所有手机版样式改动只写在本文件；rz-app.css 从此只负责桌面。
     2. 断点统一 760px，不要新增 640/900/520 等其他断点。
     3. 需要压过 ui-refactor-v8 / v26 / unified 的 !important 时，
        沿用同款 :has(#id.tab-panel) 叠层提特异度（本文件最后加载，同强度必胜）。
     4. 手机版的 DOM 由 zufang-ui.js 的手机渲染分支产出（.room-card / .room-admin-mobile-card /
        .maintenance-mobile-card 等），不要针对桌面表格 markup 写媒体查询。
     5. v5 起为"手机原生皮肤层"：所有颜色/圆角/阴影只引用 :root 的 --m-* 变量，
        改主题色只动变量，不要散写十六进制。

   v5 变更（2026-11-09 手机版皮肤重做·第一批）：
     - 新增设计变量（浅灰底 + 纯白卡 + 青绿单强调色）
     - 全局骨架：顶栏吸顶、面板卡片化、按钮/徽章/输入框、底栏选中填充胶囊、弹窗底部抽屉
     - 日常维护页：视图切换改分段控件、筛选改横向胶囊吸顶、卡片沿用紧凑栅格换新皮肤
   ========================================================== */

@media (max-width:760px){

/* ======================================================
   0. 设计变量
   ====================================================== */
:root{
  --m-bg:#f3f5f7;
  --m-card:#ffffff;
  --m-line:#e7ebef;
  --m-ink:#182430;
  --m-ink2:#5a6a77;
  --m-ink3:#93a1ad;
  --m-pri:#0e8f6f;
  --m-pri-deep:#0b7a5e;
  --m-pri-soft:#e4f5ef;
  --m-danger:#d64545;
  --m-danger-soft:#fdeeee;
  --m-warn:#f0a53c;
  --m-radius:16px;
  --m-radius-sm:12px;
  --m-shadow:0 1px 2px rgba(24,36,48,.04),0 8px 22px -14px rgba(24,36,48,.16);
  --m-topbar-h:52px;
}

/* ======================================================
   1. 全局骨架：页面底色 / 顶栏 / 面板
   ====================================================== */
html body{
  background:var(--m-bg) !important;
  color:var(--m-ink) !important;
}

/* 顶栏：白底吸顶，品牌居左 */
html body .main.rental-shell > .topbar{
  position:sticky !important;
  top:0 !important;
  z-index:30 !important;
  margin:0 !important;
  padding:0 14px !important;
  min-height:var(--m-topbar-h) !important;
  border:0 !important;
  border-bottom:1px solid var(--m-line) !important;
  border-radius:0 !important;
  background:rgba(255,255,255,.96) !important;
  box-shadow:0 1px 0 rgba(24,36,48,.02) !important;
  backdrop-filter:saturate(1.4) blur(8px);
}
html body .main.rental-shell > .topbar .crumb{color:var(--m-ink3) !important;font-size:12px !important}
html body .main.rental-shell > .topbar #view-title{font-size:16px !important;color:var(--m-ink) !important}

/* 面板：浅灰底上的纯白圆角卡 */
html body .main.rental-shell .tab-panel > .panel{
  margin:12px 12px calc(16px + env(safe-area-inset-bottom)) !important;
  padding:14px 14px 16px !important;
  border:0 !important;
  border-radius:var(--m-radius) !important;
  background:var(--m-card) !important;
  box-shadow:var(--m-shadow) !important;
}
html body .main.rental-shell .tab-panel > .panel .panel-title{margin-bottom:12px !important}
html body .main.rental-shell .tab-panel > .panel .panel-title h2{
  color:var(--m-ink) !important;
  font-size:17px !important;
  font-weight:800 !important;
  line-height:1.3 !important;
}
html body .main.rental-shell .tab-panel > .panel .panel-title p{
  color:var(--m-ink2) !important;
  font-size:12px !important;
  line-height:1.45 !important;
}

/* ======================================================
   2. 按钮 / 徽章 / 输入框（全局触控规格）
   ====================================================== */
html body .main.rental-shell button.button,
html body .main.rental-shell .panel-title button.primary,
html body .main.rental-shell .panel-actions button.primary,
html body .main.rental-shell button.ghost,
html body .main.rental-shell button.button-outline,
html body .main.rental-shell button.button-danger-outline{
  min-height:42px !important;
  padding:0 16px !important;
  border-radius:var(--m-radius-sm) !important;
  font-size:14px !important;
  font-weight:700 !important;
  box-shadow:none !important;
}
html body .main.rental-shell button.primary{
  border:0 !important;
  background:var(--m-pri) !important;
  color:#fff !important;
}
html body .main.rental-shell button.button-outline{
  border:1px solid var(--m-line) !important;
  background:var(--m-card) !important;
  color:var(--m-ink) !important;
}
html body .main.rental-shell button.ghost{
  border:1px solid transparent !important;
  background:var(--m-pri-soft) !important;
  color:var(--m-pri-deep) !important;
}
html body .main.rental-shell button.button-danger-outline{
  border:1px solid #f3d3d3 !important;
  background:var(--m-card) !important;
  color:var(--m-danger) !important;
}

/* 状态徽章：浅色药丸 */
html body .main.rental-shell .status-chip{
  border:0 !important;
  border-radius:999px !important;
  padding:3px 10px !important;
  font-size:11px !important;
  font-weight:700 !important;
}

/* 输入框 / 下拉 / 文本域：46px 大热区 */
html body .main.rental-shell input:not([type="checkbox"]):not([type="radio"]),
html body .main.rental-shell select,
html body .main.rental-shell textarea{
  min-height:46px !important;
  border:1px solid var(--m-line) !important;
  border-radius:var(--m-radius-sm) !important;
  background:#f8fafb !important;
  color:var(--m-ink) !important;
  font-size:15px !important;
  padding:0 12px !important;
}
html body .main.rental-shell textarea{padding:10px 12px !important}
html body .main.rental-shell input:focus,
html body .main.rental-shell select:focus,
html body .main.rental-shell textarea:focus{
  border-color:var(--m-pri) !important;
  background:#fff !important;
  box-shadow:0 0 0 3px var(--m-pri-soft) !important;
  outline:none !important;
}
html body .main.rental-shell label{color:var(--m-ink2) !important}

/* ======================================================
   3. 底部导航：白底毛玻璃 + 选中填充胶囊 + 安全区
   ====================================================== */
html body .mobile-bottom-nav{
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  z-index:40 !important;
  display:flex !important; /* flex 自动平分，项数增减都铺满 */
  align-items:stretch !important;
  height:calc(56px + env(safe-area-inset-bottom)) !important;
  padding:6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
  border:0 !important;
  border-top:1px solid var(--m-line) !important;
  border-radius:0 !important;
  background:rgba(255,255,255,.96) !important;
  box-shadow:0 -6px 18px -12px rgba(24,36,48,.18) !important;
  backdrop-filter:saturate(1.4) blur(10px);
}
html body .mobile-bottom-nav button{
  position:relative !important;
  width:100% !important;
  min-height:44px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:14px !important;
  background:transparent !important;
  color:var(--m-ink3) !important;
}
html body .mobile-bottom-nav button iconify-icon{font-size:22px !important;line-height:1 !important}
html body .mobile-bottom-nav button span{font-size:10.5px !important;font-weight:600 !important;line-height:1.2 !important}
html body .mobile-bottom-nav button.active{
  background:var(--m-pri-soft) !important;
  color:var(--m-pri-deep) !important;
}
html body .mobile-bottom-nav button.active::after{content:none !important}
html body .mobile-bottom-nav button.active span{font-weight:800 !important}

/* 主内容区给底栏让位（原各层已有 padding-bottom，这里统一兜底） */
html body .main.rental-shell{padding-bottom:calc(72px + env(safe-area-inset-bottom)) !important}

/* ======================================================
   4. 弹窗：统一全屏模态
   用户设备 dialog 无 top-layer（absolute 会相对文档随页面滚动），
   必须用 fixed 相对视口；高度明确 100% 防内容塌缩。
   注意 rz-host 挂在 <html> 下不在 body 里，选择器不能带 body。
   ====================================================== */
html dialog[open]{
  position:fixed !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:0 !important;
  width:100% !important;
  max-width:100% !important;
  height:100% !important;
  max-height:none !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:var(--m-card) !important;
  box-shadow:none !important;
  padding-bottom:calc(10px + env(safe-area-inset-bottom)) !important;
}
html dialog[open]::backdrop{background:rgba(24,36,48,.45)}
/* ID 级弹窗：v8:4068、v26:263 等用 dialog#id(.class)(:not(...)) + !important 定宽
   （calc(100vw-12px)/(100vw-16px)，最高 (1,2,0)+important），类级全屏规则被压导致弹窗靠左、右侧留缝。
   这里用双 id 写法（#x#x，(2,1,2)）稳压一切单 id 规则，宽度/最大宽/最大高全部夺回 */
html dialog#record-dialog#record-dialog[open],
html dialog#move-in-dialog#move-in-dialog[open],
html dialog#renewal-dialog#renewal-dialog[open],
html dialog#room-items-dialog#room-items-dialog[open],
html dialog#room-maintenance-dialog#room-maintenance-dialog[open],
html dialog#room-photos-dialog#room-photos-dialog[open],
html dialog#room-tenants-dialog#room-tenants-dialog[open],
html dialog#maintenance-batch-dialog#maintenance-batch-dialog[open],
html dialog#rental-auth-dialog#rental-auth-dialog[open],
html dialog#image-preview-dialog#image-preview-dialog[open],
html dialog#user-edit-dialog#user-edit-dialog[open]{
  width:100% !important;
  max-width:100% !important;
  max-height:none !important;
  height:100% !important;
}
/* 弹窗内控件不允许横向溢出 */
html dialog[open] input,
html dialog[open] select,
html dialog[open] textarea{max-width:100% !important;min-width:0 !important}
/* 弹窗主按钮统一青绿：v8:907 用 dialog#id .dialog-actions .primary (1,1,1)+important 定蓝底，
   ui-redesign:703 (1,3,2)+important 暗青渐变，普通类级规则压不过——双 id (2,1,2) 夺回 */
html dialog#record-dialog#record-dialog .dialog-actions .primary,
html dialog#move-in-dialog#move-in-dialog .dialog-actions .primary,
html dialog#renewal-dialog#renewal-dialog .dialog-actions .primary,
html dialog#room-items-dialog#room-items-dialog .dialog-actions .primary,
html dialog#room-maintenance-dialog#room-maintenance-dialog .dialog-actions .primary,
html dialog#room-photos-dialog#room-photos-dialog .dialog-actions .primary,
html dialog#room-tenants-dialog#room-tenants-dialog .dialog-actions .primary,
html dialog#maintenance-batch-dialog#maintenance-batch-dialog .dialog-actions .primary,
html dialog#rental-auth-dialog#rental-auth-dialog .dialog-actions .primary,
html dialog#image-preview-dialog#image-preview-dialog .dialog-actions .primary,
html dialog#user-edit-dialog#user-edit-dialog .dialog-actions .primary,
html dialog#record-dialog#record-dialog .move-in-actions .primary{
  background:var(--m-pri) !important;
  border-color:var(--m-pri) !important;
  color:#fff !important;
}
/* 幽灵按钮（取消等）：统一中性白底灰字 */
html dialog#record-dialog#record-dialog .dialog-actions .ghost,
html dialog#maintenance-batch-dialog#maintenance-batch-dialog .dialog-actions .ghost,
html dialog#move-in-dialog#move-in-dialog .dialog-actions .ghost{
  background:#fff !important;
  border:1px solid var(--m-line) !important;
  color:var(--m-ink2) !important;
}
html dialog[open] .dialog-head{
  position:sticky !important;
  top:0 !important;
  z-index:2 !important;
  background:var(--m-card) !important;
  border-bottom:1px solid var(--m-line) !important;
  border-radius:0 !important;
  padding:14px 16px 12px !important;
}
html dialog[open] .dialog-head h2{font-size:16px !important;color:var(--m-ink) !important}
html dialog[open] .dialog-head button{
  width:34px !important;
  height:34px !important;
  border:0 !important;
  border-radius:999px !important;
  background:#f1f4f6 !important;
  color:var(--m-ink2) !important;
  font-size:18px !important;
}
html dialog[open] .dialog-actions{
  position:sticky !important;
  bottom:0 !important;
  background:var(--m-card) !important;
  padding:10px 16px 0 !important;
}
html dialog[open] .dialog-actions .primary{width:100% !important;min-height:46px !important}
/* rz-host 换肤弹窗（续费/退房等）：全屏内三段布局，内容区滚动 */
html dialog.rz-host[open]{display:flex !important;flex-direction:column !important}
html dialog.rz-host[open] .rz-sbody{flex:1 1 auto !important;min-height:0 !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch !important}
/* 收紧弹窗左右边距（PC 的 22px 在手机上留白过多） */
html dialog[open] .dialog-head{padding-left:14px !important;padding-right:14px !important}
html dialog[open] .dialog-actions{padding-left:14px !important;padding-right:14px !important}
html dialog.rz-host[open] .rz-shead{padding-left:14px !important;padding-right:14px !important}
html dialog.rz-host[open] .rz-sbody{padding-left:14px !important;padding-right:14px !important}
html dialog.rz-host[open] .rz-sbody > *{padding-left:10px !important;padding-right:10px !important}
html dialog.rz-host[open] .rz-sbody > form{padding-left:0 !important;padding-right:0 !important}
/* 底部操作区两行：费用汇总条独占一行（否则被按钮挤成竖排），按钮第二行 */
html dialog.rz-host[open] .rz-sfoot,
html dialog.rz-host[open] .dialog-actions{
  flex-wrap:wrap !important;
  gap:8px !important;
  padding:10px 16px !important;
}
html dialog.rz-host[open] .rz-sfoot .checkout-refund-summary,
html dialog.rz-host[open] .dialog-actions .checkout-refund-summary{
  flex:1 1 100% !important;
  margin:0 !important;
  align-items:center !important;
  row-gap:2px !important;
}
html dialog.rz-host[open] .rz-sfoot .button,
html dialog.rz-host[open] .dialog-actions .button{min-height:42px !important}
/* "更多"九宫格弹窗内容少，保留贴底抽屉形态 */
html dialog.mobile-more-dialog[open]{
  top:auto !important;
  height:auto !important;
  max-height:calc(100% - 60px) !important;
  border-radius:20px 20px 0 0 !important;
}

/* ======================================================
   5. 日常维护页
   ====================================================== */

/* --- 5.1 视图切换：iOS 分段控件 --- */
body:has(#maintenance.tab-panel) .main.rental-shell > #maintenance.tab-panel.view > .maintenance-view-switch{
  display:flex !important;
  gap:0 !important;
  margin:0 0 12px !important;
  padding:3px !important;
  border:0 !important;
  border-radius:12px !important;
  background:#edf1f4 !important;
}
body:has(#maintenance.tab-panel) .main.rental-shell > #maintenance.tab-panel.view > .maintenance-view-switch button{
  flex:1 1 0 !important;
  min-height:34px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:10px !important;
  background:transparent !important;
  color:var(--m-ink2) !important;
  font-size:13px !important;
  font-weight:600 !important;
  padding:0 10px !important;
}
body:has(#maintenance.tab-panel) .main.rental-shell > #maintenance.tab-panel.view > .maintenance-view-switch button.active{
  background:var(--m-card) !important;
  color:var(--m-pri-deep) !important;
  font-weight:800 !important;
  box-shadow:0 2px 6px rgba(24,36,48,.12) !important;
}

/* --- 5.2 筛选：横向胶囊条，吸顶跟随顶栏 ---
   v26 用 body:has(#maintenance.tab-panel) 把它锁成 3+auto 网格，
   这里叠同款 :has 提特异度 + 最后加载压成横向滚动胶囊。 */
body:has(#maintenance.tab-panel):has(.maintenance-filters) .main.rental-shell > #maintenance.tab-panel.view > .maintenance-filters.filter-bar{
  display:flex !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  align-items:center !important;
  gap:8px !important;
  position:sticky !important;
  top:var(--m-topbar-h) !important;
  z-index:20 !important;
  margin:0 -14px 12px !important;
  padding:8px 14px !important;
  border:0 !important;
  border-radius:0 !important;
  background:rgba(255,255,255,.97) !important;
  box-shadow:0 6px 12px -10px rgba(24,36,48,.16) !important;
  backdrop-filter:saturate(1.3) blur(8px);
}
body:has(#maintenance.tab-panel):has(.maintenance-filters) .main.rental-shell > #maintenance.tab-panel.view > .maintenance-filters.filter-bar::-webkit-scrollbar{display:none}
/* 保留 [hidden] 隐藏能力（批次视图时隐藏筛选） */
body:has(#maintenance.tab-panel):has(.maintenance-filters) .main.rental-shell > #maintenance.tab-panel.view > .maintenance-filters.filter-bar[hidden]{display:none !important}

body:has(#maintenance.tab-panel):has(.maintenance-filters) .main.rental-shell > #maintenance.tab-panel.view > .maintenance-filters.filter-bar label{
  flex:0 0 auto !important;
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  height:38px !important;
  margin:0 !important;
  padding:0 5px 0 12px !important;
  border:1px solid var(--m-line) !important;
  border-radius:999px !important;
  background:#f6f8fa !important;
  color:var(--m-ink2) !important;
  font-size:12px !important;
  font-weight:600 !important;
  white-space:nowrap !important;
}
body:has(#maintenance.tab-panel):has(.maintenance-filters) .main.rental-shell > #maintenance.tab-panel.view > .maintenance-filters.filter-bar label input,
body:has(#maintenance.tab-panel):has(.maintenance-filters) .main.rental-shell > #maintenance.tab-panel.view > .maintenance-filters.filter-bar label select{
  min-height:0 !important;
  height:30px !important;
  margin:0 !important;
  padding:0 4px !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:13px !important;
  font-weight:600 !important;
  color:var(--m-ink) !important;
  width:auto !important;
  min-width:88px !important;
}
body:has(#maintenance.tab-panel):has(.maintenance-filters) .main.rental-shell > #maintenance.tab-panel.view > .maintenance-filters.filter-bar button{
  display:inline-flex !important;
  align-items:center !important;
  flex:0 0 auto !important;
  height:34px !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 14px !important;
  border-radius:999px !important;
  background:#f6f8fa !important;
  border:1px solid var(--m-line) !important;
  color:var(--m-ink2) !important;
  font-size:12.5px !important;
  font-weight:600 !important;
}

/* --- 5.3 待报销深绿横幅（保留原方案，接入新变量） --- */
body:has(#maintenance.tab-panel):has(.maintenance-batch-actions) > .main.rental-shell #maintenance.tab-panel.view > .maintenance-batch-actions.maintenance-batch{
  display:grid !important;
  grid-template-columns:1fr auto !important;
  align-items:center !important;
  gap:8px 10px !important;
  margin:0 0 10px !important;
  padding:11px 13px !important;
  border:0 !important;
  border-radius:12px !important;
  background:linear-gradient(135deg,var(--m-pri-deep),var(--m-pri)) !important;
  box-shadow:0 6px 16px -8px rgba(14,143,111,.55) !important;
}
body:has(#maintenance.tab-panel):has(.maintenance-batch-actions) > .main.rental-shell #maintenance.tab-panel.view > .maintenance-batch-actions.maintenance-batch #maintenance-batch-count{
  display:block !important;
  grid-column:1 !important;
  font-size:13.5px !important;
  line-height:1.4 !important;
  white-space:normal !important;
  overflow:visible !important;
  color:#e9fff7 !important;
  font-weight:800 !important;
}
body:has(#maintenance.tab-panel):has(.maintenance-batch-actions) > .main.rental-shell #maintenance.tab-panel.view > .maintenance-batch-actions.maintenance-batch #maintenance-batch-count *{
  color:#fff !important;
  font-weight:800 !important;
}
body:has(#maintenance.tab-panel):has(.maintenance-batch-actions) > .main.rental-shell #maintenance.tab-panel.view > .maintenance-batch-actions.maintenance-batch .rz-record-actions{
  display:contents !important;
}
body:has(#maintenance.tab-panel):has(.maintenance-batch-actions) > .main.rental-shell #maintenance.tab-panel.view > .maintenance-batch-actions.maintenance-batch .small{
  grid-column:auto !important;
  grid-row:auto !important;
  width:auto !important;
  min-width:96px !important;
  height:38px !important;
  padding:0 16px !important;
  border:1px solid rgba(255,255,255,.55) !important;
  border-radius:9px !important;
  background:rgba(255,255,255,.15) !important;
  color:#fff !important;
  font-size:13px !important;
  font-weight:700 !important;
  overflow:visible !important;
  white-space:nowrap !important;
}
body:has(#maintenance.tab-panel):has(.maintenance-batch-actions) > .main.rental-shell #maintenance.tab-panel.view > .maintenance-batch-actions.maintenance-batch .rz-more-menu{
  background:#fff !important;
}
body:has(#maintenance.tab-panel):has(.maintenance-batch-actions) > .main.rental-shell #maintenance.tab-panel.view > .maintenance-batch-actions.maintenance-batch .rz-more-menu .button{
  color:var(--m-ink) !important;
}

/* --- 5.4 维护卡片：紧凑栅格（一屏 6+ 条，内容不删）× 新皮肤 ---
   手法沿用 v3：金额行与按钮行 grid 合并同一行；删冗余"金额"标签；
   按钮收 30px；行距收紧。v8 用 #maintenance.tab-panel.view 前缀，
   此处 html body 同强度 + 本文件最后加载 → 必胜。 */
html body #maintenance.tab-panel.view .maintenance-mobile-card{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:end !important;
  gap:2px 10px !important;
  padding:10px 12px 9px 15px !important;
  border:1px solid var(--m-line) !important;
  border-radius:14px !important;
  background:var(--m-card) !important;
  box-shadow:0 1px 3px rgba(24,36,48,.05) !important;
}
/* 状态左侧色条：待处理=琥珀 / 已完成=青绿 / 已报销=灰蓝 */
html body #maintenance.tab-panel.view .maintenance-mobile-card::before{background:var(--m-warn) !important}
html body #maintenance.tab-panel.view .maintenance-mobile-card.maintenance-done::before{background:var(--m-pri) !important}
html body #maintenance.tab-panel.view .maintenance-mobile-card.maintenance-reimbursed::before{background:#7fa3b5 !important}

html body #maintenance.tab-panel.view .maintenance-mobile-head{grid-column:1/-1 !important;gap:6px !important}
html body #maintenance.tab-panel.view .maintenance-mobile-head strong{font-size:14px !important;color:var(--m-ink) !important}
html body #maintenance.tab-panel.view .maintenance-mobile-head > div > span{margin-top:1px !important;font-size:10.5px !important;color:var(--m-ink3) !important}
html body #maintenance.tab-panel.view .maintenance-mobile-card h3{grid-column:1/-1 !important;margin:4px 0 0 !important;font-size:13.5px !important;color:var(--m-ink) !important}
html body #maintenance.tab-panel.view .maintenance-mobile-note{grid-column:1/-1 !important;margin-top:2px !important;font-size:11.5px !important;line-height:1.45 !important;color:var(--m-ink2) !important}
html body #maintenance.tab-panel.view .maintenance-mobile-meta{
  grid-column:1 !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:baseline !important;
  margin-top:5px !important;
  padding-top:0 !important;
  border-top:0 !important;
  gap:6px !important;
}
/* "金额"二字是纯标签，金额数字本身醒目，去掉省一格 */
html body #maintenance.tab-panel.view .maintenance-mobile-meta > span{display:none !important}
html body #maintenance.tab-panel.view .maintenance-mobile-meta strong{margin-left:0 !important;font-size:15px !important;white-space:nowrap !important;color:var(--m-ink) !important}
html body #maintenance.tab-panel.view .maintenance-mobile-meta em{font-style:normal !important;font-size:10.5px !important;color:var(--m-ink3) !important}
html body #maintenance.tab-panel.view .maintenance-mobile-card .card-actions{
  grid-column:2 !important;
  display:flex !important;
  flex-wrap:nowrap !important; /* 基础层 .card-actions 有 wrap，被压窄就竖排撑高卡片 */
  gap:6px !important;
  margin:0 !important;
  justify-content:flex-end !important;
}
html body #maintenance.tab-panel.view .maintenance-mobile-card .card-actions .button{
  flex:0 0 auto !important; /* 压掉 v8 flex:1 1 0，按钮不被拉伸/换行 */
  height:30px !important;
  min-height:0 !important;
  padding:0 10px !important;
  font-size:12px !important;
  border-radius:8px !important;
  white-space:nowrap !important;
  box-shadow:none !important;
}
html body #maintenance.tab-panel.view .maintenance-mobile-card .card-actions .icon-button{flex:0 0 30px !important;width:30px !important;padding:0 !important}
html body #maintenance.tab-panel.view .maintenance-mobile-card .card-actions .button:not(.icon-button){min-width:0 !important;padding:0 9px !important;font-size:11.5px !important}
html body #maintenance.tab-panel.view .maintenance-mobile-card .status-chip{font-size:10px !important;padding:2px 8px !important}

/* 卡内操作按钮配色（紧凑卡里保持可读） */
html body #maintenance.tab-panel.view .maintenance-mobile-card .card-actions .button-outline{color:var(--m-pri-deep) !important;border-color:#cfe9e0 !important}

/* ======================================================
   6. 租户电话：可拨号高亮
   ====================================================== */
.room-tenant .rz-tel,
.room-admin-mobile-card .rz-tel,
.maintenance-mobile-card .rz-tel{
  color:var(--m-pri-deep);
  border-bottom:1px dashed #bfe3d6;
  text-decoration:none;
}

/* ======================================================
   7. 租房管理 + 工作台（第二批皮肤统一）
   ====================================================== */

/* --- 7.1 租房管理 --- */
/* "房间维护"主操作按钮：青绿填充（压过 v8 的 #147e9c 双 id 规则） */
body:has(#rental.tab-panel):has(.room-card) .main.rental-shell #rental.tab-panel.view .room-card .room-actions .button-dark{
  background:var(--m-pri) !important;
  border:0 !important;
  color:#fff !important;
  box-shadow:none !important;
}
/* "共 N 间房"徽章：浅绿药丸（压过 v8 蓝色 #167fae） */
body:has(#rental.tab-panel) .main.rental-shell > #rental.tab-panel.view > .page-head.mobile-rental-head .mobile-rental-total{
  display:inline-flex !important;
  align-items:center !important;
  height:34px !important;
  padding:0 13px !important;
  border:0 !important;
  border-radius:999px !important;
  background:var(--m-pri-soft) !important;
  color:var(--m-pri-deep) !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  white-space:nowrap !important;
}
body:has(#rental.tab-panel) .main.rental-shell > #rental.tab-panel.view > .page-head.mobile-rental-head .mobile-rental-total strong{
  margin:0 2px !important;
  color:var(--m-pri-deep) !important;
  font-size:15px !important;
  font-weight:800 !important;
}

/* --- 7.2 工作台 --- */
/* 快捷入口：白卡+青绿图标（压过 v8 蓝色 #168bd0） */
body:has(#overview.tab-panel) .main.rental-shell #overview.tab-panel.view .quick-panel .quick-action{
  border:1px solid var(--m-line) !important;
  border-radius:12px !important;
  background:#f8fafb !important;
  color:var(--m-ink) !important;
}
body:has(#overview.tab-panel) .main.rental-shell #overview.tab-panel.view .quick-panel .quick-action iconify-icon{
  color:var(--m-pri) !important;
}

/* 统计卡图标：统一青绿（压过 v8 蓝色/多彩 nth-child 规则） */
body:has(#overview.tab-panel) .main.rental-shell #overview.tab-panel.view .stat-card .stat-icon{
  color:var(--m-pri) !important;
  background:var(--m-pri-soft) !important;
  border-radius:12px !important;
}
/* 顶部大统计卡（mobile-workbench）在租房间图标：蓝→青绿（压过 v8 .occupied 蓝） */
body:has(#overview.tab-panel) .main.rental-shell #overview.tab-panel.view .mobile-workbench-stat .mobile-workbench-stat-icon{
  color:var(--m-pri) !important;
  background:var(--m-pri-soft) !important;
}

/* 房况三格统计条：即将到期 / 空置 / 已租出（复用桌面统计卡数值） */
body:has(#overview.tab-panel) .main.rental-shell #overview.tab-panel.view .mobile-workbench-roomstats{
  grid-column:1 / -1 !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:9px !important;
}
body:has(#overview.tab-panel) .main.rental-shell #overview.tab-panel.view .mobile-workbench-roomstats .mobile-roomstat{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  min-height:64px !important;
  padding:10px 4px !important;
  border:1px solid var(--m-line) !important;
  border-radius:14px !important;
  background:var(--m-card) !important;
  box-shadow:0 1px 3px rgba(24,36,48,.05) !important;
}
body:has(#overview.tab-panel) .main.rental-shell #overview.tab-panel.view .mobile-workbench-roomstats .mobile-roomstat strong{
  font-size:22px !important;
  line-height:1.1 !important;
  color:var(--m-ink) !important;
  font-variant-numeric:tabular-nums !important;
}
body:has(#overview.tab-panel) .main.rental-shell #overview.tab-panel.view .mobile-workbench-roomstats .mobile-roomstat small{
  font-size:11.5px !important;
  color:var(--m-ink2) !important;
  white-space:nowrap !important;
}
body:has(#overview.tab-panel) .main.rental-shell #overview.tab-panel.view .mobile-workbench-roomstats .mobile-roomstat.expiring strong{color:#c07a12 !important}
body:has(#overview.tab-panel) .main.rental-shell #overview.tab-panel.view .mobile-workbench-roomstats .mobile-roomstat.vacant strong{color:#d2503f !important}
body:has(#overview.tab-panel) .main.rental-shell #overview.tab-panel.view .mobile-workbench-roomstats .mobile-roomstat.rented strong{color:var(--m-pri) !important}

/* 待处理事项：状态点统一语义色（蓝→青绿），处理按钮浅绿填充 */
body:has(#overview.tab-panel) .main.rental-shell #overview.tab-panel.view .todo-dot{
  background:var(--m-pri) !important;
}
body:has(#overview.tab-panel) .main.rental-shell #overview.tab-panel.view .todo-dot.amber{
  background:var(--m-warn) !important;
}
body:has(#overview.tab-panel) .main.rental-shell #overview.tab-panel.view .todo-row .mini-button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:34px !important;
  padding:0 14px !important;
  border:0 !important;
  border-radius:9px !important;
  background:var(--m-pri-soft) !important;
  color:var(--m-pri-deep) !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  box-shadow:none !important;
}

/* ======================================================
   8. 租户管理重排（第三批）
   原 PC 表格是 8 列固定像素栅格（约1090px）塞进手机屏，
   操作按钮被拉成空盒。改为双列信息卡布局。
   ====================================================== */
body:has(#tenants.tab-panel):has(.tenant-row) .main.rental-shell #tenants.tab-panel.view #tenant-list .tenant-row{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px 12px !important;
  align-items:start !important;
  padding:12px 14px 12px 16px !important;
  border:1px solid var(--m-line) !important;
  border-left:3px solid var(--m-pri) !important;
  border-radius:14px !important;
  background:var(--m-card) !important;
  box-shadow:0 1px 3px rgba(24,36,48,.05) !important;
}
body:has(#tenants.tab-panel):has(.tenant-row) .main.rental-shell #tenants.tab-panel.view #tenant-list .tenant-row[data-tenant-state="ended"]{
  border-left-color:#9fb0bc !important;
}
/* 姓名+房号头部跨两列 */
body:has(#tenants.tab-panel):has(.tenant-row) .main.rental-shell #tenants.tab-panel.view #tenant-list .tenant-row .tenant-main{
  grid-column:1/-1 !important;
}
body:has(#tenants.tab-panel):has(.tenant-row) .main.rental-shell #tenants.tab-panel.view #tenant-list .tenant-row .tenant-main h3{
  margin:0 !important;
  font-size:15px !important;
  color:var(--m-ink) !important;
}
body:has(#tenants.tab-panel):has(.tenant-row) .main.rental-shell #tenants.tab-panel.view #tenant-list .tenant-row .tenant-main p{
  margin:2px 0 0 !important;
  font-size:12px !important;
  color:var(--m-ink3) !important;
}
/* 其余字段块：小标签+值 */
body:has(#tenants.tab-panel):has(.tenant-row) .main.rental-shell #tenants.tab-panel.view #tenant-list .tenant-row > div:not(.tenant-main):not(.table-actions){
  display:flex !important;
  flex-direction:column !important;
  gap:2px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}
body:has(#tenants.tab-panel):has(.tenant-row) .main.rental-shell #tenants.tab-panel.view #tenant-list .tenant-row > div span{
  font-size:11px !important;
  color:var(--m-ink3) !important;
  font-weight:600 !important;
}
body:has(#tenants.tab-panel):has(.tenant-row) .main.rental-shell #tenants.tab-panel.view #tenant-list .tenant-row > div strong{
  font-size:13px !important;
  color:var(--m-ink) !important;
  font-weight:700 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
body:has(#tenants.tab-panel):has(.tenant-row) .main.rental-shell #tenants.tab-panel.view #tenant-list .tenant-row > div em{
  font-style:normal !important;
  font-size:11px !important;
  color:var(--m-pri-deep) !important;
  font-weight:600 !important;
}
body:has(#tenants.tab-panel):has(.tenant-row) .main.rental-shell #tenants.tab-panel.view #tenant-list .tenant-row > div small{
  font-size:11px !important;
  color:var(--m-ink3) !important;
}
/* 支付/金额块占右侧，金额醒目 */
body:has(#tenants.tab-panel):has(.tenant-row) .main.rental-shell #tenants.tab-panel.view #tenant-list .tenant-row .tenant-payment strong{
  color:var(--m-ink) !important;
  white-space:normal !important;
}
/* 操作区：跨两列，按钮换行均分 */
body:has(#tenants.tab-panel):has(.tenant-row) .main.rental-shell #tenants.tab-panel.view #tenant-list .tenant-row .table-actions{
  grid-column:1/-1 !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin:2px 0 0 !important;
  padding-top:10px !important;
  border-top:1px solid var(--m-line) !important;
}
body:has(#tenants.tab-panel):has(.tenant-row) .main.rental-shell #tenants.tab-panel.view #tenant-list .tenant-row .table-actions .button,
body:has(#tenants.tab-panel):has(.tenant-row) .main.rental-shell #tenants.tab-panel.view #tenant-list .tenant-row .table-actions a{
  flex:1 1 calc(50% - 4px) !important;
  min-height:36px !important;
  padding:0 10px !important;
  border-radius:10px !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  white-space:nowrap !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:none !important;
}
body:has(#tenants.tab-panel):has(.tenant-row) .main.rental-shell #tenants.tab-panel.view #tenant-list .tenant-row .table-actions .button-outline{
  border:1px solid var(--m-line) !important;
  background:var(--m-card) !important;
  color:var(--m-ink) !important;
}
/* 归档：固定小方块，不参与拉伸 */
body:has(#tenants.tab-panel):has(.tenant-row) .main.rental-shell #tenants.tab-panel.view #tenant-list .tenant-row .table-actions .tenant-archive-button{
  flex:0 0 44px !important;
  width:44px !important;
  min-height:36px !important;
  padding:0 !important;
  border:1px solid #f3d3d3 !important;
  background:var(--m-danger-soft) !important;
  color:var(--m-danger) !important;
}
body:has(#tenants.tab-panel):has(.tenant-row) .main.rental-shell #tenants.tab-panel.view #tenant-list .tenant-row .table-actions .tenant-archive-button iconify-icon{
  font-size:16px !important;
}
/* 分组标题 */
body:has(#tenants.tab-panel) .main.rental-shell #tenants.tab-panel.view .tenant-group-heading h2{
  font-size:15px !important;
  color:var(--m-ink) !important;
}
body:has(#tenants.tab-panel) .main.rental-shell #tenants.tab-panel.view .tenant-group-heading h2 span{
  color:var(--m-ink3) !important;
  font-size:12.5px !important;
  font-weight:600 !important;
}

}

/* ---------- 维护弹窗图片凭证：完整展示不裁剪 ----------
   原 rz-app 规则固定 74px 高 + cover，横版图被裁成细条看不清。
   改为按比例完整显示，最高 320px。 */
html body #record-dialog.maintenance-dialog .maint-upload-box.has-image{
  height:auto !important;
  max-height:330px !important;
  padding:6px !important;
  background:#f6fafb !important;
}
html body #record-dialog.maintenance-dialog .maint-upload-box.has-image img{
  width:100% !important;
  height:auto !important;
  max-height:318px !important;
  object-fit:contain !important;
  border-radius:6px !important;
}

/* ---------- 房间弹窗三大块：移动端两列、块头精简 ---------- */
#record-dialog.rooms-dialog .dialog-fields,
html dialog.rz-host[open] .dialog-fields.dialog-rooms{display:flex !important;flex-direction:column !important;gap:11px !important}
html .dialog-rooms .rz-fblock{padding:12px 13px 13px;border-radius:12px}
html .dialog-rooms .rz-fblock-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px 12px !important}
html .dialog-rooms .rz-fblock-head{margin-bottom:10px}
html .dialog-rooms .rz-fblock-head strong{font-size:13.5px}
html .dialog-rooms .rz-fblock-head span{display:none}

/* 房间弹窗只读字段：灰底输入框 */
html .dialog-rooms input[readonly]{background:#eef4f2 !important;border-color:#dfe8e5 !important;color:#5d7482 !important}

/* ======================================================
   9. P0 修复批次（2026-11-11）
   ------------------------------------------------------
   9.1 退房页：桌面 6 列表格在 390px 下溢出 795px 被裁，改为卡片流
   9.2 设置页：合同甲方资料 4 列压成 2 列；字段对照表改横向滚动
   9.3 维护卡片：金额行「含图片凭证」被操作按钮压断
   9.4 顶栏：工作空间下拉截断
   ====================================================== */
@media (max-width:760px){

/* --- 9.1 入住/退房：表格 → 卡片（td 由 table() 写入 data-l 列名） --- */
html body .main.rental-shell #checkout.tab-panel.view #checkout-list table.table{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  table-layout:auto !important;
  border:0 !important;
  background:transparent !important;
}
html body .main.rental-shell #checkout.tab-panel.view #checkout-list table.table thead{display:none !important}
html body .main.rental-shell #checkout.tab-panel.view #checkout-list table.table tbody{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
}
html body .main.rental-shell #checkout.tab-panel.view #checkout-list table.table tr{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:6px 10px !important;
  padding:12px 14px !important;
  border:1px solid var(--m-line) !important;
  border-radius:14px !important;
  background:var(--m-card) !important;
  box-shadow:0 1px 3px rgba(24,36,48,.05) !important;
}
html body .main.rental-shell #checkout.tab-panel.view #checkout-list table.table td{
  display:block !important;
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  line-height:1.45 !important;
  vertical-align:top !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:var(--m-ink) !important;
  font-size:13px !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
/* 房间：卡片标题 */
html body .main.rental-shell #checkout.tab-panel.view #checkout-list table.table td[data-l="房间"]{
  grid-area:1 / 1 !important;
  font-size:14.5px !important;
  font-weight:800 !important;
  line-height:1.35 !important;
}
/* 退房日期：右上角 */
html body .main.rental-shell #checkout.tab-panel.view #checkout-list table.table td[data-l="退房日期"]{
  grid-area:1 / 2 !important;
  justify-self:end !important;
  align-self:start !important;
  padding:1px 8px !important;
  border-radius:999px !important;
  background:#f2f6f5 !important;
  color:var(--m-ink2) !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  font-variant-numeric:tabular-nums !important;
  white-space:nowrap !important;
}
/* 租户：副标题 */
html body .main.rental-shell #checkout.tab-panel.view #checkout-list table.table td[data-l="租户"]{
  grid-area:2 / 1 !important;
  color:var(--m-ink2) !important;
  font-size:12.5px !important;
}
/* 两个金额：并排，带小标签 */
html body .main.rental-shell #checkout.tab-panel.view #checkout-list table.table td[data-l="扣费合计"],
html body .main.rental-shell #checkout.tab-panel.view #checkout-list table.table td[data-l="应退押金"]{
  display:flex !important;
  align-items:baseline !important;
  gap:5px !important;
  margin-top:4px !important;
  font-size:14px !important;
  font-weight:800 !important;
  font-variant-numeric:tabular-nums !important;
}
html body .main.rental-shell #checkout.tab-panel.view #checkout-list table.table td[data-l="扣费合计"]{grid-area:3 / 1 !important}
html body .main.rental-shell #checkout.tab-panel.view #checkout-list table.table td[data-l="应退押金"]{
  grid-area:3 / 2 !important;
  justify-self:end !important;
  color:var(--m-pri-deep) !important;
}
html body .main.rental-shell #checkout.tab-panel.view #checkout-list table.table td[data-l="扣费合计"]::before,
html body .main.rental-shell #checkout.tab-panel.view #checkout-list table.table td[data-l="应退押金"]::before{
  content:attr(data-l);
  color:var(--m-ink3);
  font-size:11px;
  font-weight:600;
}
/* 操作：底部按钮行 */
html body .main.rental-shell #checkout.tab-panel.view #checkout-list table.table td[data-l="操作"]{
  grid-area:4 / 1 / 5 / 3 !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin-top:6px !important;
  padding-top:10px !important;
  border-top:1px solid var(--m-line) !important;
}
html body .main.rental-shell #checkout.tab-panel.view #checkout-list table.table td[data-l="操作"] button{
  flex:1 1 calc(33.33% - 6px) !important;
  min-height:36px !important;
  margin:0 !important;
  border-radius:10px !important;
  font-size:12.5px !important;
  white-space:nowrap !important;
}

/* --- 9.2 设置页：甲方资料 4 列 → 2 列；字段对照表横向滚动 --- */
html body .main.rental-shell #settings.tab-panel.view .contract-party-fields{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px 12px !important;
}
html body .main.rental-shell #settings.tab-panel.view .contract-party-field{min-width:0 !important}
html body .main.rental-shell #settings.tab-panel.view .contract-party-field input{
  width:100% !important;
  min-width:0 !important;
  text-overflow:ellipsis;
}
/* 身份证、地址这类长字段独占一行 */
html body .main.rental-shell #settings.tab-panel.view .contract-party-field:has(input[maxlength="18"]),
html body .main.rental-shell #settings.tab-panel.view .contract-party-field:nth-child(n+3){
  grid-column:1 / -1 !important;
}
/* 字段对照表：容器横向滚动，表格给足最小宽度，不再被裁 */
html body .main.rental-shell #settings.tab-panel.view .contract-field-table-wrap{
  max-width:100% !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
  border-radius:10px;
}
html body .main.rental-shell #settings.tab-panel.view .contract-field-table-wrap::-webkit-scrollbar{height:4px}
html body .main.rental-shell #settings.tab-panel.view .contract-field-table-wrap::-webkit-scrollbar-thumb{background:#cbd8d4;border-radius:2px}
html body .main.rental-shell #settings.tab-panel.view .contract-field-table{min-width:520px !important}
/* 填充字段对照表：4 列在手机上横滑不如竖排，一条字段一张小卡 */
html body .main.rental-shell #settings.tab-panel.view .contract-field-preview-table{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  border-collapse:separate !important;
}
html body .main.rental-shell #settings.tab-panel.view .contract-field-preview-table thead{display:none !important}
html body .main.rental-shell #settings.tab-panel.view .contract-field-preview-table tbody{display:block !important}
html body .main.rental-shell #settings.tab-panel.view .contract-field-preview-table tr{
  display:grid !important;
  grid-template-columns:max-content minmax(0,1fr) !important;
  gap:3px 10px !important;
  padding:9px 12px !important;
  border:0 !important;
  border-bottom:1px solid var(--m-line) !important;
  background:transparent !important;
}
html body .main.rental-shell #settings.tab-panel.view .contract-field-preview-table tr:last-child{border-bottom:0 !important}
html body .main.rental-shell #settings.tab-panel.view .contract-field-preview-table td{
  display:block !important;
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}
html body .main.rental-shell #settings.tab-panel.view .contract-field-preview-table td:nth-child(1){
  justify-self:start !important;
  padding:1px 7px !important;
  border-radius:6px !important;
  background:#f3effc !important;
  color:#4b3b7a !important;
  font-size:11px !important;
  font-weight:700 !important;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace !important;
  white-space:nowrap !important;
  width:max-content !important;
  max-width:100% !important;
}
html body .main.rental-shell #settings.tab-panel.view .contract-field-preview-table td:nth-child(2){
  grid-column:2 !important;
  text-align:right !important;
  color:#6b7280 !important;
  font-size:11.5px !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}
html body .main.rental-shell #settings.tab-panel.view .contract-field-preview-table td:nth-child(3){
  grid-column:1 / -1 !important;
  white-space:normal !important;
  color:var(--m-ink) !important;
  font-size:12.5px !important;
  font-weight:600 !important;
  line-height:1.45 !important;
  word-break:break-word !important;
}
html body .main.rental-shell #settings.tab-panel.view .contract-field-preview-table td:nth-child(4){
  grid-column:1 / -1 !important;
  color:var(--m-ink3) !important;
  font-size:10.5px !important;
}
/* 合同预览工具条：竖排，避免下拉挤成一条 */
html body .main.rental-shell #settings.tab-panel.view .contract-preview-toolbar{
  flex-direction:column !important;
  align-items:stretch !important;
  gap:8px !important;
}
html body .main.rental-shell #settings.tab-panel.view .contract-preview-toolbar select{
  width:100% !important;
  min-width:0 !important;
}

/* --- 9.3 维护卡片：金额行不被按钮压断 --- */
html body #maintenance.tab-panel.view .maintenance-mobile-meta{min-width:0 !important}
html body #maintenance.tab-panel.view .maintenance-mobile-meta strong{flex:0 0 auto !important}
html body #maintenance.tab-panel.view .maintenance-mobile-meta em{
  flex:1 1 auto !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
html body #maintenance.tab-panel.view .maintenance-mobile-card .card-actions{flex:0 0 auto !important}
html body #maintenance.tab-panel.view .maintenance-mobile-card .card-actions .button:not(.icon-button){
  flex:0 0 auto !important;
  width:auto !important;
  min-width:66px !important;
  max-width:104px !important;
  padding:0 10px !important;
  height:28px !important;
  font-size:11.5px !important;
}

/* --- 9.4 顶栏：工作空间下拉按可用空间伸展 --- */
html body .main.rental-shell > .topbar .top-actions{gap:6px !important;min-width:0 !important}
html body .main.rental-shell > .topbar .workspace-switcher{
  flex:1 1 auto !important;
  min-width:0 !important;
  max-width:56vw !important;
}
html body .main.rental-shell > .topbar .workspace-switcher > span{display:none !important}
html body .main.rental-shell > .topbar .workspace-switcher select{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  padding-right:20px !important;
  font-size:13px !important;
  font-weight:700 !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  overflow:hidden !important;
}
}

/* 顶栏品牌：不参与压缩，字号略收，避免只显示「东瑞」两字 */
@media (max-width:760px){
  html body .main.rental-shell > .topbar .mobile-topbar-brand{flex:0 0 auto !important}
  html body .main.rental-shell > .topbar .mobile-topbar-brand span{font-size:13px !important;white-space:nowrap !important}
  html body .main.rental-shell > .topbar .workspace-switcher{max-width:44vw !important;min-width:96px !important}
}

/* 顶栏「管理员」角色胶囊：手机上纯展示、占宽且与「更多」页重复，隐藏让位给工作空间名 */
@media (max-width:760px){
  html body .main.rental-shell > .topbar .top-actions .avatar-small{display:none !important}
  html body .main.rental-shell > .topbar .workspace-switcher{max-width:52vw !important}
}

/* 合同模板说明里的长文件名：允许断行，避免溢出右侧 */
@media (max-width:760px){
  html body .main.rental-shell #settings.tab-panel.view .settings-template-note .meta{
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }
}