/* ═══════════════════════════════════════════════════════════════════════
   汀韵悠家 PMS · 设计系统

   色板全部取自《汀韵悠家_资料/06_品牌视觉/品牌手册说明.md》，不是随手挑的：
     青砖蓝 #1F3B54  主色（墙面、檐口、文字）
     灯笼橙 #C8552F  点缀色（只用于需要"被看见"的地方，大面积一律走浅底）
     宣纸米 #F5F0E6  底色
     墨色   #16202B  正文长文
   另补两个语义色（品牌手册没有、系统必需）：竹青=正常/成功，琥珀=提醒。

   规范：字号 6 档 · 间距 4 的倍数 · 圆角 3 档 · 阴影 3 档
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* ── 品牌色 ── */
  --ink:#1F3B54;          /* 青砖蓝 */
  --ink-deep:#16202B;     /* 墨色 */
  --ink-700:#2C4F6B;
  --ink-600:#3D6383;
  --ink-500:#5B7E9B;
  --ink-300:#A8BCCD;
  --ink-200:#D3DEE8;
  --ink-100:#E8EEF3;
  --ink-50:#F1F5F8;
  --lantern:#C8552F;      /* 灯笼橙（点缀）*/
  --lantern-dark:#B4482A;
  --lantern-soft:#FBEAE3;
  --lantern-line:#E9C3B4;
  /* 蓝：商户 2026-10-09 指定 —— 「已关闭」用蓝、「已订仍有库存」用浅蓝。
     与竹青/琥珀一样属于"品牌手册没有、系统必需"的语义色，不是随手挑的：
     关闭=蓝（重、表示不能再卖），已订仍开放=浅蓝（轻、表示这间有客但池里还有）。 */
  --blue:#2F6FA8;
  --blue-soft:#DCE9F7;
  --blue-line:#A9C8E4;
/* 房态日历「已订」底色：商户 2026-10-11 直接甩了一张色卡（取中心色 = #B5D2FA）。
   ⚠ 淡蓝底上**白字看不清**（原来是深蓝 --blue 配白字），所以这一套是"淡蓝底 + 深蓝字 +
     深蓝区分条"；只改房态日历，开关房的「已关闭」仍然是 --blue。 */
--sold-bg:#B5D2FA;
--sold-fg:#16436E;
--sold-bar:#3E74B0;
/* 开关房「已关闭」：商户 2026-10-11 要求**跟房态日历的已订同一个淡蓝**。
   两个语义（"已售" / "已关闭"）刻意分开成两套变量 —— 现在取值相同，
   以后任何一边想改，只动一行，不会互相带跑。 */
--closed-bg:#B5D2FA;
--closed-fg:#16436E;
  /* 粉：商户 2026-10-09 指定 —— 开关房「已订、池里还有房（平台仍开放）」用粉底。
     和蓝系分工：实心蓝=已关闭（不能再卖）、粉=这间有客但池里还有房、白=纯开放。 */
  --rose:#C2607F;
  --rose-soft:#F2B5C9;   /* 2026-10-09 商户两次要求加深： #FBE1E9 → #F7CBD9 → #F2B5C9 */
  --rose-line:#DF93AF;
  --paper:#F5F0E6;        /* 宣纸米 */
  --paper-bg:#F4F1EA;
  --card:#FFFFFF;
  --bamboo:#2E7D5B;       /* 竹青 · 正常 */
  --bamboo-soft:#E7F2EC;
  --amber:#B7791F;        /* 琥珀 · 提醒 */
  --amber-soft:#FBF3E3;
  --muted:#6B7C8C;
  --line:#E3E0D8;
  --line-soft:#EFEDE7;

  /* ── 兼容旧变量名（app.js / 内联样式里可能引用）── */
  --primary:var(--ink);
  --primary2:var(--ink-700);
  --green:var(--bamboo);
  --yellow:var(--amber);
  --red:var(--lantern);
  --bg:var(--paper-bg);
  --panel:var(--card);
  --text:var(--ink-deep);
  --sidebar-bg:var(--ink);
  --sidebar-text:#CFDCE6;
  --sidebar-active:var(--ink-700);

  /* ── 尺寸 ── */
  --sh:0 1px 2px rgba(31,59,84,.06),0 1px 3px rgba(31,59,84,.04);
  --sh-1:0 1px 2px rgba(31,59,84,.06),0 1px 3px rgba(31,59,84,.04);
  --sh-2:0 4px 12px rgba(31,59,84,.08),0 1px 3px rgba(31,59,84,.05);
  --sh-3:0 16px 40px rgba(22,32,43,.18);
  --ring:0 0 0 3px rgba(31,59,84,.16);
  --r-sm:6px; --r-md:10px; --r-lg:14px;
  --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:26px;
  --topbar-h:54px;
  --side-w:212px;

  /* ── 字体：标题宋体（雅致），正文黑体（清楚）── */
  --font-serif:"Noto Serif CJK SC","Source Han Serif SC","STZhongsong","华文中宋","Songti SC",serif;
  --font-sans:"Microsoft YaHei UI","微软雅黑","PingFang SC","Noto Sans CJK SC","Source Han Sans SC",
              -apple-system,"Segoe UI",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:var(--font-sans);background:var(--paper-bg);color:var(--ink-deep);
     font-size:var(--fs-md);line-height:1.5;-webkit-font-smoothing:antialiased}
button{border:none;cursor:pointer;font-family:inherit;font-size:inherit;background:none;color:inherit}
input,select,textarea{font-family:inherit;color:inherit}
/* 数字等宽：金额、日期、条数全部对齐 */
.num,td,th,.kpi strong,.revenue-summary strong{font-variant-numeric:tabular-nums}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#C9C6BC;border-radius:5px;border:2px solid transparent;
                          background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#B3B0A6;background-clip:content-box}

/* ─── 按钮 ─── */
.primary{background:var(--ink);color:#fff;padding:8px 14px;border-radius:var(--r-sm);
         font-size:var(--fs-sm);font-weight:500;transition:.15s}
.primary:hover{background:var(--ink-700)}
.primary:disabled{opacity:.5;cursor:not-allowed}
.ghost{background:#fff;border:1px solid var(--line);padding:8px 12px;border-radius:var(--r-sm);
       font-size:var(--fs-sm);color:var(--ink-700);transition:.15s}
.ghost:hover{border-color:var(--ink-300);background:var(--ink-50)}
.success{background:var(--bamboo);color:#fff;padding:7px 11px;border-radius:var(--r-sm);font-size:var(--fs-xs)}
.warning{background:var(--amber);color:#fff;padding:7px 11px;border-radius:var(--r-sm);font-size:var(--fs-xs)}
.danger{background:var(--lantern);color:#fff;padding:7px 11px;border-radius:var(--r-sm);font-size:var(--fs-xs)}
.accent{background:var(--lantern);color:#fff;padding:8px 14px;border-radius:var(--r-sm);
        font-size:var(--fs-sm);font-weight:500;box-shadow:0 2px 8px rgba(200,85,47,.26)}
.accent:hover{background:var(--lantern-dark)}
.hidden{display:none!important}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;box-shadow:var(--ring);border-color:var(--ink-300)}
.ic{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;
    stroke-linecap:round;stroke-linejoin:round}

/* ═══════════════ 外壳：顶栏横贯整宽 + 左侧栏 + 内容区各自滚动 ═══════════════
   整页不滚动（页面级滚动条彻底消失）；侧栏与内容各自滚，滚动条都是细的。 */
.layout{display:grid;grid-template-columns:var(--side-w) 1fr;grid-template-rows:var(--topbar-h) 1fr;
        height:100vh;overflow:hidden}

/* ─── 顶栏：左段与侧栏同色 → 与侧栏咬合成 L 形 ─── */
.topbar{grid-column:1/-1;grid-row:1;background:var(--ink);display:flex;align-items:center;
        padding-right:16px;gap:12px;z-index:20}
.topbar-brand{width:var(--side-w);flex:none;display:flex;align-items:center;gap:9px;padding-left:16px;
              height:100%;border-right:1px solid rgba(255,255,255,.10)}
.topbar-brand .logo{width:30px;height:30px;border-radius:5px;object-fit:cover;flex:none}
.topbar-brand strong{font-family:var(--font-serif);font-size:var(--fs-sm);color:#fff;display:block;
                     letter-spacing:.09em;line-height:1.25}
.topbar-brand small{font-size:9px;color:#8FA6B8;letter-spacing:.18em;text-transform:uppercase}
.topbar-title{display:flex;align-items:baseline;gap:8px;min-width:0}
.topbar-title h1{font-family:var(--font-serif);font-size:var(--fs-lg);font-weight:600;color:#fff;
                 letter-spacing:.05em;white-space:nowrap}
.topbar-title #pageCrumb{font-size:11px;color:#8FA6B8;white-space:nowrap}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.topbar-date{font-size:var(--fs-xs);color:#CFDCE6;background:rgba(255,255,255,.08);
             border-radius:var(--r-sm);padding:5px 10px;white-space:nowrap}
/* 顶栏里的按钮自动换成深底样式（HTML/JS 里的 class 不用改） */
.topbar .ghost{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.14);color:#E7EEF3}
.topbar .ghost:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.24)}
.topbar .primary,.topbar .accent{background:var(--lantern);color:#fff}
.topbar .primary:hover,.topbar .accent:hover{background:var(--lantern-dark)}

/* ─── 侧栏 ─── */
.sidebar{grid-column:1;grid-row:2;background:var(--ink);color:var(--sidebar-text);
         display:flex;flex-direction:column;min-height:0}
/* 兼容旧结构（品牌块留在侧栏里也不会坏） */
.side-brand{display:flex;align-items:center;gap:9px;padding:14px 16px 12px;
            border-bottom:1px solid rgba(255,255,255,.09)}
.side-brand .logo{width:32px;height:32px;display:block;border-radius:5px;flex:none;object-fit:cover}
.side-brand strong{font-family:var(--font-serif);font-size:var(--fs-sm);color:#fff;display:block;
                   letter-spacing:.08em}
.side-brand small{font-size:10px;color:#8FA6B8}
.side-nav{flex:1;padding:6px 0 10px;overflow-y:auto;min-height:0;
          /* 细、暗、透明轨道：深底上不滚动时几乎看不见（默认浅灰 15px 在深底上像一堵墙）*/
          scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
.side-nav::-webkit-scrollbar{width:6px}
.side-nav::-webkit-scrollbar-track{background:transparent}
.side-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.20);border-radius:3px;border:none}
.side-nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.36)}
/* ─── 分组折叠：功能多了就叠起来（点标题收起/展开，状态记在 localStorage）─── */
.nav-sec{display:block}
.nav-group-head{display:flex;align-items:center;width:100%;gap:7px;background:none;border:0;
  font:inherit;font-size:var(--fs-sm);font-weight:700;letter-spacing:.06em;color:#EDF4FA;
  padding:12px 14px 6px;cursor:pointer;text-align:left;
  border-top:1px solid rgba(255,255,255,.10);
  transition:color .15s,background .15s}
.nav-sec:first-child .nav-group-head{border-top:0;padding-top:8px}
.nav-group-head:hover{color:#fff;background:rgba(255,255,255,.05)}
.nav-group-head span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-group-head .chev{width:15px;height:15px;flex:none;opacity:.9;transition:transform .18s}
.nav-sec.collapsed .nav-group-head .chev{transform:rotate(-90deg)}
.nav-group-body{display:block}
.nav-sec.collapsed .nav-group-body{display:none}
.nav-empty{padding:14px 16px;font-size:11px;color:#8FA6B8;line-height:1.65}
.nav-empty small{color:#7C93A6}
/* 账单统计：跨区间的单按天摊算 的开关 */
.rev-prorate{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);
  color:var(--ink-700);cursor:pointer;user-select:none}
.rev-prorate input[type=checkbox]{width:15px;height:15px;margin:0;flex:none}
.nav-item{display:flex;align-items:center;gap:9px;height:36px;padding:0 16px;font-size:var(--fs-sm);
          color:var(--sidebar-text);cursor:pointer;position:relative;transition:background .15s,color .15s;
          text-decoration:none;border-left:3px solid transparent}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active{background:rgba(255,255,255,.11);color:#fff;font-weight:600;border-left-color:var(--lantern)}
.nav-item i{font-style:normal;font-size:15px;width:18px;text-align:center;flex:none}
.nav-item .ic{opacity:.92}
.side-footer{padding:10px 16px;border-top:1px solid rgba(255,255,255,.09);display:flex;gap:6px;flex:none}
.side-footer button{flex:1;font-size:var(--fs-xs);padding:7px}
.side-status{padding:9px 16px;border-top:1px solid rgba(255,255,255,.09);font-size:11px;color:#8FA6B8;
             display:flex;align-items:center;gap:7px;flex:none}
.side-status i{width:6px;height:6px;border-radius:50%;background:var(--bamboo);flex:none;display:block}

/* ─── 内容区：自己滚 ─── */
.main-content{grid-column:2;grid-row:2;overflow-y:auto;min-height:0;padding:16px 20px 28px}

/* ─── 页面 ─── */
.page-content{display:none}
/* ⚠ 2026-10-10（E-028 顺带）：原来这里是 `.page-content.active{display:block;animation:fadeUp .18s ease}`。
   fadeUp 是个 opacity+transform 动画，加在**整个页面容器**上 —— 每切一次页面就给一大片子树
   建一次合成层，弱机器上会"翻页卡一下"。实测影响不大（2.7→2.2 ms/步），但它是纯装饰，
   去掉只赚不赔。@keyframes fadeUp 保留着，万一别处要用。 */
.page-content.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:12px}
/* 页面标题已经挪到顶栏，正文里重复的 h2 隐掉（只藏 h2，页面头部控件保留） */
.page-head h2{display:none}
.page-head:has(> h2:only-child){display:none}
.hint{color:var(--muted);font-size:var(--fs-xs)}
/* 使用说明折叠盒：默认只占一行 */
.hintbox{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-md);
  margin-bottom:12px;box-shadow:var(--sh-1);overflow:hidden}
.hintbox summary{list-style:none;cursor:pointer;padding:10px 16px;font-size:var(--fs-xs);
  color:var(--ink-600);display:flex;align-items:center;gap:7px;font-weight:600;
  border-bottom:1px solid transparent}
.hintbox summary::-webkit-details-marker{display:none}
.hintbox[open] summary{border-bottom-color:var(--line-soft)}
.hintbox summary:hover{background:var(--ink-50)}
.hintbox > div{padding:12px 16px 4px}
.hintbox p{font-size:var(--fs-xs);color:var(--muted);line-height:1.7;margin-bottom:8px}
.hintbox p strong{color:var(--ink-600)}

/* ═══════════════ 卡片基座 ═══════════════ */
.panel,.dash-card,.platform-card,.task-item,.guest-table,.shift-grid,.revenue-table-wrap,
.rc-calendar-wrap,.grid-wrap,.trend-table{background:var(--card);border:1px solid var(--line-soft);
  border-radius:var(--r-md);box-shadow:var(--sh-1)}

/* ─── KPI ─── */
/* KPI 拆栏后从 6 张变成 9 张（2026-10-10）：写死 6 列会挤成两行很难看，
   改成自动排布 —— 宽屏一行铺满，窄屏自动换行，不用再手改列数 */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
         gap:12px;margin-bottom:16px}
.kpi{background:var(--card);padding:14px 16px;border-radius:var(--r-md);box-shadow:var(--sh-1);
     border:1px solid var(--line-soft);position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ink-200)}
.kpi.warn::after{background:var(--lantern)}
.kpi.ok::after{background:var(--bamboo)}
.kpi span{color:var(--muted);font-size:var(--fs-xs);display:block}
.kpi strong{font-size:var(--fs-2xl);font-weight:600;display:block;margin-top:4px;
            letter-spacing:-.01em;color:var(--ink)}
.kpi small{color:var(--muted);font-size:11px}
.kpi.warn strong{color:var(--lantern)}
.kpi.ok strong{color:var(--bamboo)}

/* ─── 看板面板 ─── */
.dash-panels{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.dash-card{padding:0;overflow:hidden}
.dash-card h3{font-size:var(--fs-sm);font-weight:600;color:var(--ink);margin:0;
              padding:11px 16px;border-bottom:1px solid var(--line-soft);
              display:flex;align-items:center;gap:8px}
.dash-card h3 .cnt{background:var(--ink-100);color:var(--ink-700);border-radius:9px;
                   min-width:18px;height:18px;display:inline-grid;place-items:center;
                   font-size:10px;font-weight:600;padding:0 6px}
.dash-card h3 .cnt.pill{width:auto;white-space:nowrap}
.dash-card > .mini-list,.dash-card > .cancel-list,.dash-card > .plat-state-list,
.dash-card > .hint{padding:12px 16px}
.mini-list{display:grid;gap:6px;max-height:224px;overflow-y:auto;align-content:start}
.mini-item{border:1px solid transparent;border-radius:var(--r-sm);padding:9px 11px;
           font-size:var(--fs-xs);cursor:pointer;background:var(--ink-50);transition:.15s}
.mini-item:hover{border-color:var(--ink-200);background:#fff}
.mini-item strong{display:block;font-size:var(--fs-sm);color:var(--ink-deep)}
.empty{color:var(--muted);font-size:var(--fs-xs);text-align:center;padding:14px}
.empty-state{color:var(--muted);text-align:center;padding:44px 20px;font-size:var(--fs-md);
             background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-md);
             box-shadow:var(--sh-1)}

/* ─── 退单 + 平台登录态 ─── */
.dash-panels.two{grid-template-columns:1fr 1fr;align-items:start}
.dash-panels.two .cancel-panel{grid-column:auto}
.dash-panels.two .cancel-list,
.dash-panels.two .plat-state-list{max-height:214px;overflow-y:auto}
.plat-state-list{display:grid;gap:4px;align-content:start}
@media (max-width:900px){.dash-panels.two{grid-template-columns:1fr}}
.cancel-panel{box-shadow:var(--sh-1);border-left:3px solid var(--lantern)}
.cancel-panel h3{color:var(--lantern)}
.cancel-panel h3 .cnt{background:var(--lantern-soft);color:var(--lantern)}
.cancel-list{display:grid;gap:6px;max-height:184px;overflow-y:auto;align-content:start}
.cancel-item{display:flex;justify-content:space-between;align-items:center;gap:10px;
             border:1px solid var(--lantern-line);background:var(--lantern-soft);
             border-radius:var(--r-sm);padding:9px 12px;font-size:var(--fs-xs)}
.cancel-item strong{color:var(--lantern)}
.cancel-item .cancel-info{text-align:right;color:var(--muted);font-size:11px;line-height:1.45}
/* 退单后的三件小事：房放回平台了没有 / 疑似退单（平台列表里没了）/ 未放回明细 */
.cancel-item.suspected{flex-direction:column;align-items:stretch;gap:4px;
  border-left:3px solid var(--amber);background:#FFF9EE}
.cancel-item.suspected .cancel-info{text-align:left}
.cancel-item .chip{display:inline-block;font-size:10px;padding:1px 7px;border-radius:9px;
  margin-left:6px;font-weight:600;white-space:nowrap}
.chip.ok-chip{background:#E3F3E8;color:#22703B}
.chip.warn-chip{background:#FBE6D6;color:#A8551F}
.warn-text{color:#B4771A;font-weight:600}
/* 待办入住：平台侧已入住、商户还没点「入住」（N0 口径：本地入住只认人工点击） */
.date-cell .ck-badge{position:absolute;right:2px;bottom:2px;font-size:9px;line-height:1;
  padding:2px 4px;border-radius:3px;background:var(--amber);color:#fff;white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,.18)}
.date-cell.needs-checkin{box-shadow:inset 0 0 0 2px rgba(183,121,31,.55)}
.cancel-empty{color:var(--muted);text-align:center;padding:14px;font-size:var(--fs-xs)}

/* ═══════════════ 表格 ═══════════════ */
.guest-table,.shift-grid,.trend-table,.revenue-table{border-collapse:separate;border-spacing:0;
  width:100%;overflow:hidden}
.guest-table th,.shift-grid th,.trend-table th,.revenue-table th{
  background:var(--paper);font-size:11px;font-weight:600;color:var(--ink-600);letter-spacing:.03em;
  padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2}
.guest-table td,.shift-grid td,.trend-table td,.revenue-table td{
  padding:9px 12px;font-size:var(--fs-sm);border-bottom:1px solid var(--line-soft);color:var(--ink-deep)}
.guest-table tbody tr:last-child td,.revenue-table tbody tr:last-child td,
.trend-table tbody tr:last-child td{border-bottom:none}
.guest-table tbody tr:hover td,.revenue-table tbody tr:hover td,
.trend-table tbody tr:hover td{background:var(--ink-50)}
.guest-table td strong{font-size:var(--fs-sm)}
.revenue-table td,.revenue-table th{text-align:left}
.revenue-table .status-confirmed{color:var(--ink-600)}
.revenue-table .status-checked_in{color:var(--bamboo);font-weight:600}
.revenue-table .status-checked_out{color:var(--muted)}
.revenue-table .status-cancelled{color:var(--lantern)}
/* 商户实得是这张表最该被看见的一列：金额右对齐 + 浅竹青底 + 加粗 */
.revenue-table td.r,.revenue-table th.r{text-align:right}
.revenue-table td.income{background:var(--bamboo-soft);color:var(--bamboo);font-weight:700}
.revenue-table td.fee{color:var(--muted)}
.revenue-table tbody tr:hover td.income{background:#DCEBE3}
.trend-table th,.trend-table td{text-align:right}
.trend-table td:first-child,.trend-table th:first-child{text-align:left}
.shift-grid td,.shift-grid th{text-align:center}
.low-stock{background:var(--lantern-soft)}
.row-danger{background:var(--lantern-soft)}
.bar{height:8px;border-radius:4px;background:var(--ink);display:inline-block;vertical-align:middle}

/* ═══════════════ 账单 ═══════════════ */
.revenue-controls{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.revenue-controls input[type=date]{border:1px solid var(--line);border-radius:var(--r-sm);
  padding:6px 10px;font-size:var(--fs-sm);background:#fff;height:32px}
.sep{color:var(--muted)}
.revenue-summary{display:flex;gap:20px;margin-bottom:12px;font-size:var(--fs-xs);color:var(--muted);
                 flex-wrap:wrap;align-items:baseline}
.revenue-summary strong{font-size:var(--fs-xl);color:var(--ink);font-weight:600;margin-left:4px}
.revenue-table-wrap{overflow:auto;max-height:460px}
.revenue-table{font-size:var(--fs-sm)}

/* ═══════════════ 平台设置卡 ═══════════════ */
.platform-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:12px 0}
.platform-card{padding:14px;display:grid;gap:8px}
.platform-card.status-logged_in{border-color:#BFE0CD;background:var(--bamboo-soft)}
.platform-card.status-manual_required,
.platform-card.status-login_failed{border-color:var(--lantern-line);background:var(--lantern-soft)}
.platform-title{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-sm)}
.platform-title strong{color:var(--ink)}
.platform-title span{font-size:11px;color:var(--muted)}
.platform-card small{color:var(--muted);font-size:11px;line-height:1.45}
.platform-card button{width:100%;font-size:var(--fs-xs)}

/* ═══════════════ 同步 / 日志 ═══════════════ */
.panel{padding:0;margin-bottom:12px;overflow:hidden}
.panel h3{font-size:var(--fs-sm);font-weight:600;color:var(--ink);padding:11px 16px;
          border-bottom:1px solid var(--line-soft);margin:0}
.panel > *:not(h3){margin-left:16px;margin-right:16px}
.panel > *:not(h3):last-child{margin-bottom:14px}
.sync-controls{display:flex;gap:6px;margin:8px 0;flex-wrap:wrap}
.sync-result{border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:10px;margin-top:8px;
             font-size:var(--fs-xs);line-height:1.6;background:var(--ink-50)}
.sync-result .sync-item{padding:4px 0;border-bottom:1px solid var(--line-soft)}
.sync-result .sync-item:last-child{border-bottom:none}
.status-ok{color:var(--bamboo);font-weight:600}
.status-err{color:var(--lantern);font-weight:600}
.status-warn{color:var(--amber);font-weight:600}
.sync-log-area{margin-top:10px}
.sync-log-area pre{background:var(--ink-50);border:1px solid var(--line-soft);border-radius:var(--r-sm);
  padding:10px;font-size:11px;overflow:auto;max-height:220px;white-space:pre-wrap;
  font-family:ui-monospace,Consolas,monospace}

/* ═══════════════ 弹窗 ═══════════════ */
/* ⚠ 2026-10-10 实测（E-028）：这里原来有 `backdrop-filter:blur(2px)`，
   而弹窗遮罩是 `position:fixed;inset:0` 的**全屏层** —— 弱机器（Win7 / 没有 GPU 加速）
   上在弹窗里**选字**时，每一帧都要把整屏重新模糊一次：
   CPU 降频 6× + 关 GPU 的对照实验里，弹窗内拖选 **27.0 ms/步 → 去掉 blur 后 2.7 ms/步（快 90%）**。
   商户报的"选字就卡顿/卡住"就是它。这里改成**不用模糊、把底色加深一点**拿到同样的层级感。 */
.modal{position:fixed;inset:0;background:rgba(22,32,43,.56);display:none;z-index:60}
.modal.open{display:grid;place-items:center;padding:16px}
.modal-card{width:min(760px,100%);max-height:88vh;overflow:auto;background:#fff;
            border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--sh-3)}
.modal-card.small{width:min(400px,100%)}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;
            padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
.modal-head h2{font-family:var(--font-serif);font-size:var(--fs-lg);font-weight:600;color:var(--ink);
               letter-spacing:.03em}
.close{width:28px;height:28px;border-radius:var(--r-sm);background:var(--ink-50);font-size:16px;
       cursor:pointer;border:none;color:var(--muted);line-height:1;transition:.15s}
.close:hover{background:var(--ink-100);color:var(--ink)}
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.form-grid label{display:grid;gap:4px;font-size:11px;color:var(--muted)}
.form-grid input,.form-grid select{padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--r-sm);font-size:var(--fs-sm);background:#fff}
.wide{grid-column:1/-1}
.calc{color:var(--ink-600);font-size:var(--fs-xs)}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.action-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.room-info{font-size:var(--fs-sm);color:var(--ink-600);line-height:1.6}
.form-vertical{display:grid;gap:12px}
.form-vertical label{display:grid;gap:4px;font-size:var(--fs-xs);color:var(--muted)}
.form-vertical input,.form-vertical select,.form-vertical textarea{padding:8px 10px;
  border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--fs-sm);background:#fff}
.form-vertical button{margin-top:4px}

/* ═══════════════ 全局提示 ═══════════════ */
.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,80px);background:var(--ink-deep);
       color:#fff;padding:10px 18px;border-radius:var(--r-sm);opacity:0;z-index:200;transition:.25s;
       max-width:90vw;font-size:var(--fs-sm);box-shadow:var(--sh-3)}
.toast.show{transform:translate(-50%,0);opacity:1}
.toast.error{background:var(--lantern)}
.fatal-banner{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:var(--lantern-soft);
  border-top:2px solid var(--lantern);color:#8A3620;padding:10px 16px;font-size:var(--fs-xs);
  display:flex;align-items:center;gap:10px}
.fatal-banner strong{flex:0 0 auto}
.fatal-banner small{flex:1;color:#A54A3F;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ═══════════════ 登录页 ═══════════════ */
.login-page{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#16202B 0%,#1F3B54 55%,#2C4F6B 100%)}
.login-page.hidden{display:none}
.login-page::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 78% 18%,rgba(200,85,47,.20),transparent 45%)}
.login-card{position:relative;background:var(--paper);border-radius:var(--r-lg);padding:32px 34px 26px;
  width:min(368px,90vw);text-align:center;box-shadow:var(--sh-3);border:1px solid rgba(255,255,255,.5)}
.login-logo{width:72px;height:72px;display:block;margin:0 auto 12px;border-radius:16px;object-fit:cover;
  box-shadow:0 4px 14px rgba(31,59,84,.18)}
.login-card h2{font-family:var(--font-serif);font-size:var(--fs-lg);font-weight:600;color:var(--ink);
  margin-bottom:20px;letter-spacing:.08em}
.login-card input{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:var(--fs-md);margin-bottom:10px;background:#fff;transition:.15s}
.login-card .primary{width:100%;padding:11px;font-size:var(--fs-md);margin-top:8px}
.login-remember{display:flex;align-items:center;gap:6px;justify-content:flex-start;
  font-size:var(--fs-xs);color:var(--muted);margin:2px 0 4px;cursor:pointer}
.login-remember input{width:auto;margin:0;padding:0;transform:scale(1.05)}
.login-err{color:var(--lantern);font-size:var(--fs-xs);margin-top:10px}
.login-hint{color:var(--muted);font-size:11px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line)}

/* ═══════════════ 房态日历 ═══════════════ */
.grid-wrap,.rc-calendar-wrap{overflow:visible}
.room-grid,.rc-table{border-collapse:separate;border-spacing:0;width:100%;table-layout:fixed}
.room-grid th,.room-grid td,.rc-table th,.rc-table td{border-bottom:1px solid var(--line-soft);
  border-right:1px solid var(--line-soft);padding:0}
.room-grid th,.rc-table th{background:var(--paper);position:sticky;top:0;z-index:2;
  font-size:10px;font-weight:500;color:var(--muted);padding:7px 3px;text-align:center;
  border-bottom:1px solid var(--line)}
.room-grid .room-col,.rc-table .room-col{width:96px;padding:6px 9px;text-align:left;
  vertical-align:middle;background:var(--ink-50);border-right:1px solid var(--line);white-space:nowrap}
.room-grid th.room-col,.rc-table th.room-col{z-index:3;background:var(--paper);text-align:left;
  padding-left:10px}
.room-grid .room-col strong,.rc-table .room-col strong{font-size:var(--fs-xs);display:block;
  line-height:1.25;color:var(--ink)}
.room-grid .room-col small,.rc-table .room-col small{font-size:10px;color:var(--muted);display:block;
  line-height:1.25}
.room-title{display:flex;align-items:center;gap:4px;justify-content:space-between}
.room-title>div{flex:1;text-align:left;min-width:0}
.room-gear{width:18px;height:18px;border-radius:4px;background:#fff;border:1px solid var(--line);
  color:var(--muted);font-size:10px;cursor:pointer;flex-shrink:0;padding:0;line-height:1}
.room-gear:hover{border-color:var(--ink-300);color:var(--ink)}
.date-cell,.rc-cell{height:42px;cursor:pointer;font-size:10px;color:var(--muted);vertical-align:middle;
  text-align:center;padding:0;overflow:hidden;position:relative;transition:background .12s}
.date-cell:hover,.rc-cell:hover{background:var(--ink-50)}
/* 「今天」只标在表头上：整列每格描框会让人误以为全选中了 */
.room-grid th.today,.rc-table th.today{color:var(--lantern);font-weight:700;
  border-bottom:2px solid var(--lantern)}
.date-cell.today{background-image:linear-gradient(180deg,rgba(200,85,47,.07),transparent 55%)}
/* 房态日历「已订/已售」= **淡蓝底（--sold-bg #B5D2FA）+ 深蓝字**。
   颜色演进（别再翻回去）：2026-10-09 先"淡蓝"→ 又要"蓝色"（用 --blue 深蓝配白字）
   → 2026-10-11 商户**直接给了一张色卡**，就按色卡取值 #B5D2FA。
   ⚠ 淡蓝底上白字完全看不清，所以文字与"平台单/线下单"的区分色条一并换成深蓝
     （--sold-fg / --sold-bar，实线=平台、虚线=线下）。
   开关房的「已关闭」仍是 --blue、「已订·池里还有房」仍是粉 —— 商户只改了房态日历。 */
.date-cell.s-sold{background:var(--sold-bg)}
/* 开关房的「已订·池里还有房」：**粉色**（商户 2026-10-09 指定，原来是浅蓝）。
   灰色小字在粉底上偏虚，所以客人名一档提到 --ink-600，看得清谁住。 */
.rc-booked,.rc-sold-open{background:var(--rose-soft)}
.rc-sold-open .rc-guest{color:var(--ink-600)}
.date-cell.s-sold::before,.rc-booked::before{content:"";position:absolute;left:0;top:0;bottom:0;
  width:3px;background:var(--ink-600)}
.date-cell.s-sold::before{background:var(--sold-bar)}
.date-cell.s-sold.s-offline::before{background:repeating-linear-gradient(180deg,
  var(--sold-bar) 0 4px,transparent 4px 7px)}
/* ⚠ 必须带上 .s-offline 那一档：文件后面还有一条
   `.date-cell.s-offline .sold-tag{color:var(--ink-600)}`（3 个类），
   不带的话它会把线下的客人名又染回深灰、压在蓝底上看不见。这里用 4 个类压过它。 */
.date-cell.s-sold .sold-tag,
.date-cell.s-sold.s-offline .sold-tag,
.date-cell.s-sold .sold-name,
.date-cell.s-sold .cell-text{color:var(--sold-fg)}
/* 往日订单（.past-lock，2026-10-10 商户规则）：整格**置灰**、点了不弹窗。
   ⚠ 之前只有 JS 加了 class、**CSS 一直没写** —— 于是"该置灰"的格子还是蓝的，
     商户看到的就是"没做"。这里必须写在上面那条白字规则**后面**，并且类数不能少，
     否则会被 .date-cell.s-sold 那条蓝底/白字压回去。 */
.date-cell.s-sold.past-lock{background:var(--ink-100)}
.date-cell.s-sold.past-lock::before{background:var(--ink-300)}
.date-cell.s-sold.past-lock .sold-tag,
.date-cell.s-sold.s-offline.past-lock .sold-tag,
.date-cell.s-sold.past-lock .sold-name,
.date-cell.s-sold.past-lock .cell-text{color:var(--muted)}
/* 看着就"点不动"：默认指针 + 略降饱和度的名字 */
.date-cell.past-lock{cursor:default}
.date-cell.s-sold.s-offline.past-lock::before{
  background:repeating-linear-gradient(180deg,var(--ink-300) 0 4px,transparent 4px 7px)}
/* 往日订单：过了午夜即锁定 —— 整格置灰、点击不弹窗（2026-10-10 商户规则）。
   灰底灰字代替实心蓝，一眼区分"过去的单"和"当前/未来的单"；
   左侧来源色条（实线=平台、虚线=线下）保留，但降成浅灰。 */
.date-cell.past-lock{background:var(--ink-100);cursor:default}
.date-cell.past-lock:hover{background:var(--ink-100)}
.date-cell.past-lock.s-sold::before{background:var(--ink-300)}
.date-cell.past-lock.s-sold.s-offline::before{background:repeating-linear-gradient(180deg,
  var(--ink-300) 0 4px,transparent 4px 7px)}
.date-cell.past-lock.s-sold .sold-tag,
.date-cell.past-lock.s-sold.s-offline .sold-tag,
.date-cell.past-lock.s-sold .sold-name,
.date-cell.past-lock.s-sold .cell-text{color:var(--muted)}
/* 格子内容固定**两行**：第一行「美团已售 / 线下预定」，第二行客人名，全部居中。
   竖排（column）就是为了把两行之间那条"多余的空行"去掉 —— 以前块级标签后面又跟一个
   <br>，等于三行，中间空一格；挤成一行又太拥挤（商户两次反馈，最后定两行）。 */
.date-cell .cell-line,.rc-cell .cell-line{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:0;padding:0 2px 0 4px;line-height:1.25}
.date-cell .cell-line:empty,.rc-cell .cell-line:empty{display:none}
.cell-text{font-size:10px}
.sold-tag{font-style:normal;font-weight:600;font-size:10px;line-height:1.2;white-space:nowrap;
  color:var(--ink-700)}
.date-cell.s-offline .sold-tag{color:var(--ink-600)}
.sold-name{font-size:10px;line-height:1.2;color:var(--ink-600);white-space:nowrap}
.rc-guest{font-size:9px;line-height:1.2;color:var(--muted);white-space:nowrap}
.date-cell.has-exposure{background:var(--lantern-soft)}
.date-cell.has-exposure::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--lantern)}
.exp-badge{position:absolute;top:1px;right:2px;font-size:11px;line-height:1;color:var(--lantern);
  animation:pulse 1.6s ease-in-out infinite}
        /* 平台异常关闭（白丢生意）：平台上关着、本地没订单 → 房间白空着卖不出去。
           和「超卖风险」同一套视觉语言，但用琥珀色不用红：这是"没赚到"，不是"要赔"。
           （2026-10-10 商户报障：10-23 绾君心开关房显示关闭、房态日历看不出任何东西） */
        .date-cell.has-platclosed{background:var(--amber-soft)}
        .date-cell.has-platclosed::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
          background:var(--amber)}
        .lost-badge{position:absolute;top:1px;left:2px;font-size:10px;line-height:12px;padding:0 3px;
          border-radius:3px;background:var(--amber);color:#fff;font-weight:600}
        /* 必填项的小红星（预订弹窗「单价/晚」）—— 2026-10-10 商户要求：单价是必填项，要有个符号 */
        .req{color:#C0392B;font-weight:700;margin-left:2px}
        /* 接单通道能力表（待接单页）：一眼看出哪个平台能自动接、哪个只能人工 */
        .acc-channels{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
        .acc-chip{font-size:var(--fs-xs);padding:4px 10px;border-radius:999px;font-weight:600}
        .acc-chip.ok{background:#E7F4EA;color:#1E7E34;border:1px solid #B7DEC2}
        .acc-chip.no{background:#FDECEA;color:#B3261E;border:1px solid #F0B4AA}
        /* 「自住 · 免费房」那一行：**只有小方框能点**，点文字/点空白都不切换
           （商户 2026-10-10：不要"随便点整行都能勾选"；所以没用 <label> 包住） */
        .free-stay-row{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);
          color:var(--ink-700);cursor:default}
        .free-stay-row input[type=checkbox]{width:15px;height:15px;margin:0;flex:0 0 auto;
          cursor:pointer;accent-color:var(--lantern)}
        .free-stay-row .free-stay-text{cursor:default;user-select:none}
.date-cell.s-maint{background:repeating-linear-gradient(45deg,var(--ink-50) 0 6px,
  rgba(168,188,205,.35) 6px 12px)}
.date-cell.s-vacant_dirty,.rc-cell.lg-dirty{background:var(--amber-soft)}
.plat-strip{display:flex;gap:1px;justify-content:center;margin-top:1px}
.plat-strip i,.plat-closed i{font-style:normal;font-size:8px;line-height:11px;padding:0 2px;
  border-radius:3px;display:inline-block}
.plat-strip i.p-open{background:var(--lantern-soft);color:var(--lantern)}
.plat-strip i.p-closed{background:var(--bamboo-soft);color:var(--bamboo)}
.plat-strip i.p-unknown{background:var(--ink-50);color:var(--muted)}
.plat-closed{display:flex;gap:1px;justify-content:center;margin-top:1px}
.sell-tag{font-style:normal;font-size:8px;background:var(--bamboo-soft);color:var(--bamboo);
  border-radius:3px;padding:0 2px;display:inline-block}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* 平台开关房页的格子 */
/* 格子和房态日历**同款同尺寸**（10px 字、42px 高、同一套边框），
   两个页面切换时视觉上是"同一张表换了个页签"（商户要求） */
.rc-cell{font-size:10px}
.rc-open,.lg-open{background:#F4FAF6}
/* 开关房：**已关闭**（含"无房已关闭"——平台/系统因为卖满而关的，落地就是 closed）
   颜色演进：灯笼橙浅底 → 2026-10-09 实心蓝白字 → **2026-10-11 商户要求改成
   和房态日历已订同款淡蓝 + 深蓝字**（--closed-bg/--closed-fg）。
   ⚠ 淡蓝底上白字看不清，所以文字必须跟着换深蓝；这条别只改背景色。 */
.rc-manual,.lg-manual{background:var(--closed-bg);color:var(--closed-fg)}
.rc-manual .cell-text,.rc-manual .rc-guest{color:var(--closed-fg)}
/* ── 开关房页头部：页签 / 日期 / 图例 / 同步按钮 全部压在**一行**里 ── */
.rc-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.room-controls-tabs{display:flex;flex:0 0 auto}
.room-controls-tabs button{padding:5px 13px;font-size:var(--fs-xs);border-radius:0;margin-left:-1px;
  position:relative;line-height:1.4}
.room-controls-tabs button:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm);margin-left:0}
.room-controls-tabs button:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0}
.room-controls-tabs button.active{background:var(--ink);border-color:var(--ink);color:#fff;z-index:1}
.rc-head .cal-controls{flex:0 0 auto;gap:6px}
.rc-head .cal-controls input,.rc-head .cal-controls select{height:28px;padding:2px 8px}
.rc-head-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}
.rc-head-right .ghost{padding:5px 12px;font-size:var(--fs-xs)}
.rc-sub{display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.rc-syncinfo{font-size:11px;color:var(--muted);line-height:1.6;flex:1 1 auto;min-width:0}
.rc-dataAt{font-size:11px;color:var(--muted);white-space:nowrap;margin-left:auto}
/* 「?」说明：平时只占一个圆点，点开浮层压在表格上，不占版面高度 */
.rc-hint{position:relative;flex:0 0 auto}
.rc-hint>summary{list-style:none;cursor:pointer;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--muted);font-weight:700;font-size:13px;
  display:flex;align-items:center;justify-content:center;user-select:none}
.rc-hint>summary::-webkit-details-marker{display:none}
.rc-hint>summary:hover{border-color:var(--ink-300);color:var(--ink)}
.rc-hint[open]>summary{border-color:var(--ink);color:var(--ink)}
.rc-hint>div{position:absolute;right:0;top:calc(100% + 6px);width:min(560px,78vw);z-index:40;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-3);padding:12px 14px}
.rc-hint>div p{font-size:var(--fs-xs);color:var(--muted);line-height:1.7;margin-bottom:8px}
.rc-hint>div p:last-child{margin-bottom:0}
.rc-hint>div strong{color:var(--ink-600)}
.rc-legend{display:flex;gap:12px;font-size:11px;color:var(--muted);flex-wrap:wrap;align-items:center}
.lg{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:4px;vertical-align:middle}
.lg-vacant{background:#fff;border:1px solid var(--line)}
.lg-dirty{background:var(--amber-soft)}
.lg-arrival{background:var(--ink-100)}
.lg-occupied{background:var(--bamboo-soft)}
.lg-departure{background:var(--amber-soft)}
.lg-booked{background:var(--ink-100)}
.lg-maint{background:repeating-linear-gradient(45deg,var(--ink-50) 0 3px,rgba(168,188,205,.4) 3px 6px)}
.lg-departed{background:var(--ink-50)}
/* 图例的"已售"色块必须跟格子同色，不然图例和表格对不上（这条踩过：改格子忘了改图例） */
.lg-sold{background:var(--sold-bg);border:1px solid var(--sold-bar);
  border-left:3px solid var(--sold-bar)}
.lg-sold-offline{background:var(--sold-bg);border:1px solid var(--sold-bar);
  border-left:3px dashed var(--sold-bar)}
.lg-sold-open{background:var(--rose-soft);border:1px solid var(--rose-line)}
.legend-bar{display:flex;gap:14px;margin-top:10px;font-size:11px;color:var(--muted);flex-wrap:wrap}
.cal-controls{display:flex;gap:8px;align-items:center;font-size:var(--fs-xs);flex-wrap:wrap}
/* 房态日历的"数据更新于 11:23:45"（2026-10-10 商户要求）：
   跟筛选控件同一行、右对齐，弱化色但时间本身用深色 + 等宽数字，
   扫一眼就能确认"这版是不是最新的" */
.cal-updated{margin-left:auto;display:flex;align-items:center;gap:8px;
  color:var(--muted);font-size:var(--fs-xs);white-space:nowrap}
.cal-updated strong{color:var(--ink-700);font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:.3px}
.cal-auto{padding:1px 6px;border-radius:999px;background:var(--ink-50);
  color:var(--ink-500);font-size:10px}
.cal-controls input,.cal-controls select,.date-input,.search-input{border:1px solid var(--line);
  border-radius:var(--r-sm);padding:5px 9px;font-size:var(--fs-xs);background:#fff;height:32px}

/* ═══════════════ 任务 / 排班 ═══════════════ */
.task-item{display:flex;justify-content:space-between;align-items:center;padding:11px 16px;
  margin-bottom:8px;border-left:3px solid var(--line)}
.task-item.pending{border-left-color:var(--amber)}
.task-item.in_progress{border-left-color:var(--ink-600)}
.task-item.completed,.task-item.resolved{border-left-color:var(--bamboo)}
.task-item>div:nth-child(2){color:var(--muted);font-size:var(--fs-xs)}
.task-item>div:last-child{display:flex;gap:6px}
.task-item button{padding:5px 10px;font-size:11px;border-radius:var(--r-sm)}
.shift-cell{cursor:pointer}
.shift-cell.assigned{background:var(--bamboo-soft)}

/* ═══════════════ 徽标 / 开关 ═══════════════ */
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;line-height:1.6;
       font-weight:600}
.switch{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);cursor:pointer;
        user-select:none;color:var(--ink-600)}
.switch input{width:15px;height:15px;cursor:pointer;accent-color:var(--ink)}
.badge-ok{background:var(--bamboo-soft);color:var(--bamboo)}
.badge-warn{background:var(--amber-soft);color:var(--amber)}
.badge-bad{background:var(--lantern-soft);color:var(--lantern)}
.badge-mute{background:var(--ink-50);color:var(--muted)}
.nav-badge{background:var(--lantern);color:#fff;border-radius:9px;font-size:10px;padding:1px 6px;
           margin-left:auto;font-weight:600}
.nav-badge.hidden{display:none}

/* ═══════════════ 顶部告警条 ═══════════════ */
.oversell-bar{background:var(--lantern-soft);border:1px solid var(--lantern-line);color:var(--lantern);
  padding:10px 16px;border-radius:var(--r-md);margin-bottom:14px;cursor:pointer;font-size:var(--fs-sm);
  display:flex;align-items:center;gap:10px;font-weight:600;transition:.15s}
.oversell-bar:hover{border-color:var(--lantern)}
.oversell-bar.hidden{display:none}
.oversell-bar small{font-weight:400;color:var(--ink-600);margin-left:auto}

/* 退单告警条：比超卖条更"红"一档 —— 客人退单是现金流事件，商户要立刻看到 */
.cancel-bar{background:#FDECEA;border:1px solid #F0B4AA;color:#B3261E;
  padding:9px 14px;border-radius:var(--r-md);margin-bottom:12px;cursor:pointer;
  display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);font-weight:600;
  transition:.15s}
.cancel-bar:hover{border-color:#B3261E;background:#FBE0DC}
.cancel-bar.hidden{display:none}
.cancel-bar .canc-detail{font-weight:400;color:#8A3620}
.cancel-bar small{font-weight:400;color:#8A3620;margin-left:auto;white-space:nowrap}
        /* 平台异常关闭条：琥珀色 —— 「白丢生意」是没赚到钱，红色留给超卖（要赔钱的那类） */
        .lost-bar{background:#FDF3DF;border:1px solid #E3C07A;color:#8A5A00;
          padding:9px 14px;border-radius:var(--r-md);margin-bottom:12px;cursor:pointer;
          display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);font-weight:600;
          transition:.15s}
        .lost-bar:hover{border-color:var(--amber);background:#FBEDD2}
        .lost-bar.hidden{display:none}
        .lost-bar small{font-weight:400;color:#8A5A00;margin-left:auto;white-space:nowrap}
.cancel-panel.flash{animation:cancelFlash 1.1s ease-in-out 2}
@keyframes cancelFlash{0%,100%{box-shadow:var(--sh-1)}
  50%{box-shadow:0 0 0 4px rgba(200,85,47,.30)}}

/* ═══════════════ 小屏适配 ═══════════════ */
/* 屏高不够（笔记本 768 之类）：导航紧凑一档 —— 让滚动条**压根不出现** */
@media (max-height:820px){
  :root{--topbar-h:50px}
  .nav-item{height:31px;font-size:var(--fs-xs)}
  .nav-group-head{padding:9px 14px 4px;font-size:12.5px}
  .side-nav{padding:2px 0 6px}
  .side-status{padding:7px 16px;font-size:10px}
  .kpi strong{font-size:22px}
}
/* 更紧一档（768 高的笔记本）：分组标题压到最窄（仍然可点，用来折叠）——
    现在功能再多也不会撑出滚动条：把不常用的分组收起来即可 */
@media (max-height:800px){
  .nav-group-head{padding:8px 14px 4px;font-size:12.5px}
  .nav-item{height:28px;padding:0 14px;gap:8px}
  .side-nav{padding:3px 0 5px}
  .side-status{padding:6px 14px}
}
/* 屏宽不够：侧栏收成图标条 */
@media (max-width:1180px){
  :root{--side-w:64px}
  .topbar-brand{width:64px;padding-left:0;justify-content:center}
  .topbar-brand div{display:none}
  .nav-group-head{justify-content:center;padding:8px 0 2px}
  .nav-group-head span{display:none}
  .nav-group-head .chev{opacity:.6}
  .nav-item{justify-content:center;padding:0;height:40px;gap:0}
  .nav-item .nav-label{display:none}
  .nav-item .ic{width:18px;height:18px}
  .nav-item .nav-badge{position:absolute;top:5px;right:12px;margin:0}
  .side-status{justify-content:center;font-size:0;padding:9px 0}
  .platform-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .kpi-row{grid-template-columns:repeat(3,1fr)}
  .dash-panels{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr 1fr}
  .main-content{padding:12px 14px 22px}
}
@media (max-width:700px){
  .kpi-row{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:1fr}
}

/* ══ 通知中心（N14）：顶栏铃铛 + 面板 ══ */
.notif-btn { position: relative; }
.notif-badge {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 9px; background: var(--red, #d33); color: #fff;
  font-size: 10px; line-height: 16px; text-align: center; font-weight: 700;
}
.notif-panel {
  position: fixed; top: 52px; right: 16px; width: 380px; max-height: 70vh;
  background: var(--panel, #fff); border: 1px solid var(--line, #e3e6ea);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18);
  z-index: 60; display: flex; flex-direction: column; overflow: hidden;
}
.notif-panel.hidden { display: none; }
.notif-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid var(--line, #e3e6ea); }
.notif-list { overflow: auto; padding: 4px 0; }
.notif-item { display: flex; gap: 8px; padding: 8px 12px; cursor: pointer;
  border-bottom: 1px dashed var(--line, #eef1f4); }
.notif-item:hover { background: rgba(0,0,0,.03); }
.notif-item.unread { background: rgba(255,180,0,.08); }
.notif-item:last-child { border-bottom: none; }

/* ══════════════════════════════════════════════════════════════
   手机端适配（2026-10-12，"老板和商户都要用手机"）
   目标：手机不再是"挤成一条"，而是能正经干活的第二工位。
   · 侧栏 → 汉堡抽屉（左上角按钮 / 点遮罩收起）
   · 底部 4 个标签：看板 / 房态 / 接单 / 更多
   · 所有宽表 → 横向滑动（关键列冻结）
   · 弹窗 → 全屏；按钮 ≥44px 触控尺寸；输入框 16px（防 iOS 聚焦自动放大）
   · .pc-only：手机上隐藏（批量关房/改价/导出这类"误触代价大"的操作）
   ══════════════════════════════════════════════════════════════ */
#navToggle, #mobileTabs, #navMask { display: none; }

@media (max-width: 860px) {
  /* ── 布局：单列，侧栏变抽屉 ── */
  .layout { grid-template-columns: 1fr !important; }
  .sidebar {
    position: fixed; left: 0; top: var(--topbar-h); bottom: 0; width: 264px;
    transform: translateX(-105%); transition: transform .22s ease;
    z-index: 80; overflow-y: auto; box-shadow: 6px 0 24px rgba(0,0,0,.28);
  }
  body.nav-open .sidebar { transform: none; }
  #navMask {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45);
    z-index: 70; opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  body.nav-open #navMask { opacity: 1; pointer-events: auto; }
  .main-content { grid-column: 1 !important; padding: 10px 10px 76px !important; }

  /* ── 顶栏：省空间 ── */
  .topbar { padding: 0 8px; gap: 6px; }
  .topbar-brand small { display: none; }
  .topbar-title h1 { font-size: 15px; }
  .topbar-date { display: none; }
  .topbar-actions button { padding: 6px 9px; font-size: 12px; }
  .topbar-actions button:not(#logoutBtn) svg { margin: 0; }
  #navToggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: none; background: transparent; color: #fff;
    font-size: 20px; cursor: pointer;
  }

  /* ── 底部标签栏 ── */
  #mobileTabs {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: 58px;
    background: #fff; border-top: 1px solid var(--line, #e3e6ea); z-index: 75;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  #mobileTabs button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; border: none; background: transparent; color: #7a838c; font-size: 11px;
  }
  #mobileTabs button.active { color: var(--brand, #2f7d5d); font-weight: 600; }
  #mobileTabs button .tb-ic { font-size: 19px; line-height: 1; }

  /* ── 表格：横向滑动；别把表格压变形 ── */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.room-grid, table.rc-table { min-width: 720px; }
  table.guest-table, table.revenue-table, table.trend-table, table.shift-grid { min-width: 560px; }
  .room-col, .room-grid th.room-col, .rc-table .room-col {
    position: sticky; left: 0; z-index: 3; background: var(--panel, #fff);
    box-shadow: 1px 0 0 var(--line, #e3e6ea);
  }

  /* ── 弹窗全屏（手机上小弹窗根本点不动）── */
  .modal-card, .modal-card.small {
    width: 100vw !important; max-width: 100vw !important;
    min-height: 100vh; max-height: 100vh; border-radius: 0 !important;
    overflow-y: auto; padding: 14px;
  }
  .modal-card .form-grid { grid-template-columns: 1fr !important; }
  .modal-actions { position: sticky; bottom: 0; background: #fff; padding-top: 10px; }

  /* ── 触控尺寸 & 防 iOS 缩放 ── */
  button, .btn, .ghost, .primary { min-height: 42px; }
  input, select, textarea { font-size: 16px !important; }
  .kpi-row { grid-template-columns: repeat(2, 1fr) !important; }
  .revenue-controls, .cal-controls, .sync-controls { flex-wrap: wrap; gap: 6px; }
  .cal-controls input[type=date], .revenue-controls input[type=date] { width: 46%; min-width: 130px; }

  /* ── 手机上不做的操作（误触代价大）── */
  .pc-only { display: none !important; }
  .mobile-hint { display: block !important; }
}

.mobile-hint { display: none; color: #8a6d3b; background: #fcf8e3; border: 1px solid #faebcc;
  border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.6; margin: 8px 0; }

/* ══ 手机专用视图：房态日历（按天看）/ 开关房（大按钮）══ */
.m-grid-datebar { display: flex; align-items: center; gap: 8px; margin: 8px 0 10px; }
.m-grid-datebar button { min-width: 46px; font-size: 17px; padding: 6px 0; }
.m-grid-datebar input[type=date] { flex: 1; text-align: center; }
.m-room-card { background: var(--panel, #fff); border: 1px solid var(--line, #e3e6ea);
  border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.m-room-card.sold { background: #eaf2fb; border-color: #bcd6f2; }
.m-room-card.closed { background: #eef1f4; color: #6b7480; }
.m-room-card.offline { background: #fdeff0; border-color: #f3c2c6; }
.m-room-head { display: flex; align-items: baseline; gap: 8px; }
.m-room-head strong { font-size: 17px; }
.m-room-head .tag { font-size: 11px; padding: 1px 7px; border-radius: 9px; background: #eef1f4; color: #5a636e; }
.m-room-card.sold .tag.sold-tag { background: #2f7d5d; color: #fff; }
.m-room-meta { margin-top: 4px; font-size: 13px; color: #4a525b; line-height: 1.7; }
.m-room-meta .k { color: #8b939c; margin-right: 4px; }
.m-room-acts { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.m-room-acts button { flex: 1; min-width: 84px; }
.m-plat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.m-plat-btn { display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 6px; border-radius: 10px; border: 1px solid var(--line, #e3e6ea);
  background: #fff; font-size: 13px; }
.m-plat-btn .s { font-size: 11px; color: #6b7480; }
.m-plat-btn.on { background: #eaf2fb; border-color: #bcd6f2; }
.m-plat-btn.off { background: #eef1f4; color: #6b7480; }
.m-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.m-tabs button { white-space: nowrap; }
.m-tabs button.active { background: var(--brand, #2f7d5d); color: #fff; border-color: transparent; }

/* ── 手机端：把"桌面专用"的控件收起来（2026-10-12）──
   手机版日历/开关房各有自己的日期条与卡片视图，桌面这套工具条留着只会占屏幕。 */
@media (max-width: 860px) {
  /* 房态日历页：桌面日期/天数/模式/平台开关全部隐藏 */
  #page-calendar .cal-controls > input#startDate,
  #page-calendar .cal-controls > select#rangeDays,
  #page-calendar .cal-controls > select#calMode,
  #page-calendar .cal-controls > label.switch { display: none !important; }
  #page-calendar .cal-controls { justify-content: flex-end; }
  /* 开关房页：平台页签 + 天数 + 图例收起来（手机版一次看 4 家） */
  #page-controls .room-controls-tabs,
  #page-controls .cal-controls,
  #page-controls .rc-legend { display: none !important; }
  #page-controls .rc-head { flex-wrap: wrap; gap: 6px; }
  /* 房态日历的"数据更新于/自动刷新"保持可见（商户要知道数据新旧） */
}

/* ══════════════════════════════════════════════════════════════
   手机端第二轮优化（2026-10-12，项总反馈）
   ① 抽屉导航：1180px 以下的"图标条"规则把手机抽屉的文字也干掉了 → 在手机断点里显式恢复
      文字、加大条目（46px）、角标靠右、分组标题加粗、抽屉内加品牌头
   ② 新增预订弹窗：字段分段（客人/房间日期/金额/其他）+ 头部与底部操作栏吸顶/吸底、
      大按钮（48px）、自住勾选整行可点、算价按钮跟金额放一起
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  /* ── ① 抽屉导航 ── */
  .sidebar { width: 282px !important; }
  .topbar-brand div { display: block !important; }        /* 品牌名恢复（顶栏） */
  .nav-group-head {
    justify-content: flex-start !important;
    padding: 14px 16px 6px !important;
    font-size: 13.5px !important;
    letter-spacing: .04em;
    color: rgba(255,255,255,.62);
  }
  .nav-group-head span { display: block !important; flex: 1; text-align: left; }
  .nav-item {
    justify-content: flex-start !important;
    height: 46px !important;
    padding: 0 14px !important;
    gap: 12px !important;
    font-size: 15px !important;
    border-radius: 8px;
    margin: 2px 8px;
  }
  .nav-item .nav-label { display: block !important; flex: 1; text-align: left; }
  .nav-item .ic { width: 19px !important; height: 19px !important; }
  .nav-item .nav-badge {
    position: static !important; margin: 0 0 0 auto !important;
    min-width: 20px; height: 20px; line-height: 20px; font-size: 12px;
  }
  .nav-group-body { padding-bottom: 6px; }
  .side-status { font-size: 12px !important; padding: 12px 16px !important;
    justify-content: flex-start !important; }

  /* ── ② 新增预订弹窗 ── */
  #bookingModal .modal-card { padding: 0 !important; }
  #bookingModal .modal-head {
    position: sticky; top: 0; z-index: 6; background: #fff;
    border-bottom: 1px solid var(--line, #e3e6ea); padding: 12px 14px; margin: 0;
  }
  #bookingModal .modal-head h2 { font-size: 17px; }
  #bookingModal .modal-head .close { width: 40px; height: 40px; font-size: 20px; }
  #bookingForm { padding: 12px 14px 0 !important; gap: 10px !important; }
  #bookingModal label { font-size: 13.5px; color: #58616b; }
  #bookingModal input, #bookingModal select, #bookingModal textarea {
    height: 46px !important; padding: 0 12px; border-radius: 9px;
  }
  /* 分段标题：只有手机上显示（JS 注入 .m-sec） */
  .m-sec {
    grid-column: 1 / -1; margin: 6px 0 2px; font-size: 12.5px; font-weight: 700;
    color: #2f7d5d; letter-spacing: .06em;
    display: flex; align-items: center; gap: 8px;
  }
  .m-sec::after { content: ''; flex: 1; height: 1px; background: #e6eaee; }
  /* 自住/免费房：整行可点（48px），小方框也大一点 */
  #bookingModal .free-stay-row { min-height: 48px; align-items: center; gap: 10px;
    background: #f7f9fa; border-radius: 9px; padding: 0 12px !important; }
  #bookingModal .free-stay-row input[type=checkbox] { width: 22px; height: 22px; }
  #bookingModal .free-stay-text { font-size: 14px; }
  /* 算价提示 + 算价按钮：跟金额字段贴在一起，且按钮够大 */
  #bookingModal .calc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    font-size: 13.5px; background: #f7f9fa; border-radius: 9px; padding: 10px 12px !important; }
  #bookingModal .calc button { min-width: 132px; height: 42px; font-size: 14px; margin: 0 !important; }
  /* 底部操作栏吸底（取消/保存 等宽大按钮） */
  #bookingModal .modal-actions.wide {
    position: sticky; bottom: 0; z-index: 6; background: #fff; margin: 6px 0 0;
    border-top: 1px solid var(--line, #e3e6ea); padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0)) !important;
    display: flex; gap: 10px;
  }
  #bookingModal .modal-actions.wide button { flex: 1; height: 48px; font-size: 16px; font-weight: 600; }
  /* 编辑态的动作按钮组（入住/退房/打印/取消预订…）：手机上两列网格 */
  #bookingModal .action-row { display: grid !important; grid-template-columns: 1fr 1fr;
    gap: 8px; padding: 12px 14px 16px; }
  #bookingModal .action-row button { height: 46px; font-size: 14px; }
}
/* 桌面端不显示分段标题（JS 注入的元素） */
@media (min-width: 861px) { .m-sec { display: none !important; } }

/* ── 手机端第三轮微调（2026-10-12）──
   ① 顶栏品牌名不要恢复（会挤成三行）② 必填星号别换行 ③ 弹窗打开时藏掉底部标签栏（否则压住保存按钮） */
@media (max-width: 860px) {
  .topbar-brand div { display: none !important; }
  #bookingModal label .req { display: inline !important; margin-left: 2px; }
  #bookingModal .wide .req { display: inline !important; }
  body.modal-open #mobileTabs { display: none !important; }
  body.modal-open .main-content { padding-bottom: 12px !important; }
}

@media (max-width: 860px) {
  /* 标签改块级：让"电话 *"排在同一行（原来 label 是 flex 列，星号被挤到单独一行） */
  #bookingModal label { display: block !important; }
  #bookingModal label .req { display: inline !important; }
  #bookingModal label > input,
  #bookingModal label > select,
  #bookingModal label > textarea { margin-top: 6px; }
}

@media (max-width: 860px) {
  /* 修：label 变块级后输入框变成"行内并排"了 → 强制整行宽 */
  #bookingModal label > input,
  #bookingModal label > select,
  #bookingModal label > textarea {
    display: block !important; width: 100% !important; margin-top: 6px;
  }
  #bookingModal .wide > input, #bookingModal .wide > select, #bookingModal .wide > textarea {
    display: block !important; width: 100% !important;
  }
}

/* ── 修：手机端那条"整行宽"的规则误伤了复选框（自住那行被撑成 294px 高）──
   只对文本框/下拉/多行文本生效，复选框单独按触控尺寸排。 */
@media (max-width: 860px) {
  #bookingModal label > input:not([type=checkbox]),
  #bookingModal label > select,
  #bookingModal label > textarea,
  #bookingModal .wide > input:not([type=checkbox]),
  #bookingModal .wide > select,
  #bookingModal .wide > textarea {
    display: block !important; width: 100% !important; margin-top: 6px;
  }
  #bookingModal .free-stay-row {
    display: flex !important; align-items: center !important;
    flex-direction: row !important; gap: 10px !important;
    height: auto !important; min-height: 52px !important; padding: 6px 12px !important;
  }
  #bookingModal .free-stay-row input[type=checkbox] {
    display: block !important; width: 22px !important; height: 22px !important;
    flex: none !important; margin: 0 !important;
  }
  #bookingModal .free-stay-text {
    display: block !important; flex: 1 !important; width: auto !important;
    font-size: 14px !important; line-height: 1.45 !important;
  }
  /* 段落提示/锁定提示也顺手排整齐 */
  #bookingModal .calc, #bookingModal .calc.wide {
    display: block !important; width: 100% !important;
  }
  #bookingModal .calc button { display: inline-block !important; width: auto !important; margin-top: 8px !important; }
}

@media (max-width: 860px) {
  /* 修：我那条 .calc{display:block!important} 把 JS 用内联 display:none 藏起来的
     「平台订单信息 / 往日锁定提示」又显示出来了（屏幕底部两条空条）——
     这里让"内联藏着"的继续藏着。 */
  #bookingModal .calc[style*="display:none"],
  #bookingModal .calc[style*="display: none"],
  #bookingModal .wide[style*="display:none"],
  #bookingModal .wide[style*="display: none"] { display: none !important; }
  #bookingModal .calc:empty { display: none !important; }
}

@media (max-width: 860px) {
  /* 修：上面 .action-row{display:grid!important} 盖掉了 .hidden（新建单也会冒出"入住/退房"）。
     .hidden 是全局工具类，必须让它在最后仍然赢。 */
  #bookingModal .action-row.hidden,
  #bookingModal .hidden { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   手机端弹窗：自适应高度 + 屏幕居中 + 三段式（2026-10-12 第二轮修正）
   项总反馈："做到自适应大小、屏幕居中；拉不到最下面，保存按不到"
   真因：我上一版把卡片设成 100vh 全屏 —— 手机浏览器的 100vh **比真实可视区高**
        （地址栏/工具栏占了高度），于是卡片底部（含"保存"）被顶到屏幕外，滚也滚不到。
   现在的做法：
     · 卡片**高度自适应**（height:auto），最多不超过 `calc(100dvh - 20px)`（dvh=动态视口高度）
     · 外层 .modal.open 本来就是 place-items:center → 保持**屏幕居中**，四周留 10px
     · 卡片内部改成"头固定 / 表单区自己滚 / 底部按钮固定在卡内"，
       这样**按钮永远在卡片底部、永远点得到**（不依赖 100vh 是否准）
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .modal.open { padding: 10px; }

  .modal-card, .modal-card.small {
    width: min(100%, 620px) !important;
    max-width: min(100%, 620px) !important;
    height: auto !important;                 /* ★ 自适应：内容少就矮 */
    min-height: 0 !important;
    max-height: calc(100vh - 20px) !important;   /* 老浏览器兜底 */
    max-height: calc(100dvh - 20px) !important;  /* ★ 真机动态视口（关键） */
    border-radius: 14px !important;
    overflow: hidden !important;             /* 滚动交给内部，避免与 sticky 打架 */
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
  }
  /* 头部：固定不滚 */
  .modal-card > .modal-head,
  #bookingModal .modal-head {
    flex: 0 0 auto; position: static; margin: 0 !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--line, #e3e6ea); background: #fff;
  }
  /* 中间：表单区自己滚动 */
  #bookingForm {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding: 12px 14px 0 !important;
  }
  /* 底部操作栏：**固定在卡片底部**（贴在滚动区下沿） */
  #bookingModal .modal-actions.wide {
    position: sticky; bottom: 0; flex: 0 0 auto;
    background: #fff; border-top: 1px solid var(--line, #e3e6ea);
    margin: 8px 0 0 !important;
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0)) !important;
    display: flex; gap: 10px;
  }
  #bookingModal .modal-actions.wide button { flex: 1; height: 48px; font-size: 16px; font-weight: 600; }
  /* 编辑态的按钮组：不参与滚动，永远贴在卡片底 */
  #bookingModal #editActions { flex: 0 0 auto; }
  /* 其它小弹窗（房间/客人自助码等）同样自适应居中 */
  .modal-card.small { width: min(100%, 520px) !important; }
  .modal-card > .modal-head .close { width: 40px; height: 40px; font-size: 20px; }
  .modal-card > :not(.modal-head):not(#bookingForm) { flex: 0 0 auto; }
  .modal-card > .modal-body, .modal-card > form:not(#bookingForm) {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    -webkit-overflow-scrolling: touch; padding: 12px 14px;
  }
}

/* ══════════════════════════════════════════════════════════════
   手机端顶栏重做（2026-10-12 项总："顶栏很不美观"）
   现状问题（实测 390px 宽）：4 个按钮挤在 390px 里，"刷新"被挤成「刷/新」两行、
   "新增预订"变成「新增预/订」，标题被 logo 和铃铛夹在中间，整体像拼出来的。
   改法：
     · 顶栏只留：☰ + 小 logo + 页面标题（+细面包屑） + 🔔通知 + ↻刷新（**纯图标、40×40**）
     · 「新增预订」挪到**右下角悬浮按钮（FAB）**（拇指最容易够到的位置）
     · 「退出登录」挪进抽屉底部（顶栏腾出空间）
     · 按钮统一 40×40、圆角 10px、半透明底，**禁止换行**
   ══════════════════════════════════════════════════════════════ */
#mFabNew, #mDrawerLogout { display: none; }

@media (max-width: 860px) {
  .topbar { height: 52px; padding: 0 6px 0 2px; gap: 2px; }
  /* 左：汉堡 + 小 logo */
  .topbar-brand { width: auto !important; padding: 0 !important; gap: 2px; flex: none; }
  #navToggle { width: 42px; height: 42px; font-size: 21px; }
  .topbar-brand .logo { width: 26px; height: 26px; border-radius: 6px; }
  /* 中：标题 + 面包屑（一行，超长省略） */
  .topbar-title { flex: 1 1 auto; min-width: 0; gap: 6px; margin-left: 6px; align-items: center; }
  .topbar-title h1 {
    font-size: 16px !important; font-weight: 700; letter-spacing: .01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  .topbar-title #pageCrumb { font-size: 10.5px; opacity: .75; flex: none; }
  /* 右：只有两个图标按钮，纯图标、不换行 */
  .topbar-actions { margin-left: 4px; gap: 6px; flex: none; }
  .topbar-actions .topbar-date,
  #newBookingBtn,
  #logoutBtn { display: none !important; }
  #refreshBtn, #notifBtn {
    width: 40px !important; height: 40px !important; min-height: 40px !important;
    padding: 0 !important; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0 !important;              /* 藏掉"刷新"两个字，只留图标 */
    white-space: nowrap; overflow: hidden;
  }
  #refreshBtn .ic, #notifBtn .ic { width: 19px; height: 19px; font-size: 0; }
  .notif-badge { top: 3px !important; right: 3px !important; }

  /* 右下角悬浮「＋ 新增预订」：拇指区，永远可见（弹窗打开时藏起来） */
  #mFabNew {
    display: inline-flex; align-items: center; gap: 6px;
    position: fixed; right: 14px; bottom: calc(58px + 14px + env(safe-area-inset-bottom, 0));
    height: 50px; padding: 0 18px 0 14px; border: 0; border-radius: 25px;
    background: var(--lantern, #c0562f); color: #fff; font-size: 15px; font-weight: 700;
    box-shadow: 0 6px 18px rgba(192,86,47,.35); z-index: 74;
  }
  #mFabNew > span { font-size: 21px; line-height: 1; font-weight: 400; }
  #mFabNew:active { transform: scale(.97); }
  body.modal-open #mFabNew { display: none; }

  /* 抽屉底部：退出登录 */
  #mDrawerLogout {
    display: block; width: calc(100% - 24px); margin: 10px 12px 16px;
    height: 44px; border-radius: 9px; border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.06); color: #E7EEF3; font-size: 14px;
  }
  #mDrawerLogout:active { background: rgba(255,255,255,.14); }
}

/* ══════════════════════════════════════════════════════════════
   手机端第三轮修正（2026-10-12 项总反馈）
   ① 房态卡片底色：线下订单**不能用粉色**，要与桌面房态日历一致
      桌面口径：已订=蓝底 var(--sold-bg)#B5D2FA + 左侧色条；线下=同样的蓝底，
      区别在左侧**斜纹条**（桌面 ::before 就是 repeating-linear-gradient）。
   ② 「新增预订」从悬浮按钮挪进底部标签栏（悬浮挡操作）
   ══════════════════════════════════════════════════════════════ */
#mFabNew { display: none !important; }        /* 旧悬浮按钮作废 */

@media (max-width: 860px) {
  /* ── ① 房态卡片配色对齐桌面 ── */
  .m-room-card { position: relative; overflow: hidden; padding-left: 15px; }
  .m-room-card.sold,
  .m-room-card.offline {
    background: var(--sold-bg, #B5D2FA);
    border-color: var(--sold-bar, #3E74B0);
    color: var(--sold-fg, #16436E);
  }
  .m-room-card.sold::before,
  .m-room-card.offline::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
    background: var(--sold-bar, #3E74B0);
  }
  .m-room-card.offline::before {      /* 线下：斜纹（跟桌面 s-offline 的斜纹一致） */
    background: repeating-linear-gradient(180deg,
      var(--sold-bar, #3E74B0) 0 5px, transparent 5px 10px);
  }
  .m-room-card.sold .m-room-head strong,
  .m-room-card.offline .m-room-head strong { color: var(--sold-fg, #16436E); }
  .m-room-card.sold .m-room-meta,
  .m-room-card.offline .m-room-meta { color: var(--sold-fg, #16436E); }
  .m-room-card.sold .m-room-meta .k,
  .m-room-card.offline .m-room-meta .k { color: rgba(22,67,110,.62); }
  .m-room-card.sold .tag.sold-tag,
  .m-room-card.offline .tag.sold-tag {
    background: #fff; color: var(--sold-fg, #16436E); font-weight: 700;
  }
  /* 已订卡片里的"查看/办理"按钮：蓝底上要看得清 */
  .m-room-card.sold .m-room-acts button,
  .m-room-card.offline .m-room-acts button {
    background: rgba(255,255,255,.92); border-color: var(--sold-bar, #3E74B0);
    color: var(--sold-fg, #16436E);
  }
  /* 空房卡（白底）保持原样；停用卡灰底 */
  .m-room-card.closed { background: #eef1f4; border-color: #dfe4e9; }

  /* ── ② 底部标签栏里的「＋新增」── */
  #mobileTabs .tab-new { flex: 0 0 auto; padding: 0 12px; }
  #mobileTabs .tab-new .tb-ic {
    width: 38px; height: 38px; border-radius: 19px;
    background: var(--lantern, #c0562f); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; line-height: 1; margin-bottom: 1px;
  }
  #mobileTabs .tab-new:active .tb-ic { transform: scale(.94); }
}

@media (max-width: 860px) {
  /* 手机开关房：已订·池里还有房 → 粉色（与桌面 .rc-sold-open 同一口径 var(--rose-soft)） */
  .m-room-card.rc-sold-open { background: var(--rose-soft, #F2B5C9); border-color: #e09cb4; }
  .m-room-card.rc-sold-open .m-room-head strong { color: #6b2740; }
  .m-room-card.rc-sold-open .m-room-card,
  .m-room-card.rc-sold-open .m-plat-btn { background: rgba(255,255,255,.94); }
  .m-room-card.rc-sold-open .hint { color: #7a4257; }
}

/* ── 手机端：顶栏去掉汉堡（有底部「更多」就够），换成更大的品牌 logo（项总 2026-10-12）── */
@media (max-width: 860px) {
  #navToggle { display: none !important; }
  .topbar { padding-left: 12px; }
  .topbar-brand { padding-left: 0 !important; gap: 0; }
  .topbar-brand .logo {
    width: 40px !important; height: 40px !important;
    border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.25);
  }
  .topbar-title { margin-left: 12px; }
  /* 抽屉照样能用：底部「更多」打开它；点遮罩/点菜单项关闭 */
  #mobileTabs .tab-more-active { color: var(--brand, #2f7d5d) !important; font-weight: 600; }
}

/* ══════════════════════════════════════════════════════════════
   运营方标识（泉州鑫淼源科技有限公司）+ 版权（2026-10-12）
   放置原则：**不抢主体、不做大**——
     · 顶栏最右：22~26px 的**白底圆角小贴片**里放 16~18px 的 logo（蓝绿标记在白底上最清楚），
       鼠标悬停显示"泉州鑫淼源科技有限公司 · 版权所有"
     · 抽屉最底部：20px logo + 公司全称 + 一行小字版权（手机/桌面都能看到出品方）
     · 登录页最底部：一行灰字版权（客户第一眼就知道是谁做的）
   ══════════════════════════════════════════════════════════════ */
.corp-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.28); flex: none; cursor: help;
}
.corp-badge img { width: 23px; height: 23px; display: block; }

.corp-foot {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 16px 4px; margin-top: 6px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.corp-foot img { width: 26px; height: 26px; display: block; background: #fff;
  border-radius: 6px; padding: 2px; flex: none; }
.corp-foot div { min-width: 0; }
.corp-foot strong { display: block; font-size: 12px; font-weight: 600;
  color: #DDE7EE; line-height: 1.35; }
.corp-foot small { display: block; font-size: 10.5px; color: #8FA6B8; line-height: 1.5; }

.login-corp {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 14px; font-size: 12px; color: #8b939c;
}
.login-corp img { width: 20px; height: 20px; display: block; }

@media (max-width: 860px) {
  .corp-badge { width: 26px; height: 26px; border-radius: 7px; }
  .corp-badge img { width: 20px; height: 20px; }
  .corp-foot { padding: 10px 14px 2px; }
  .corp-foot img { width: 24px; height: 24px; }
}

/* ── 修：运营方/版权那一块在**桌面侧栏**折行了（项总 2026-10-12 截图反馈）──
   实测：桌面侧栏只有 212px，版权行「© 2026 版权所有 · 汀韵悠家定制版」在 145px 的
   文字列里放不下 → 折成 2 行（手机抽屉 282px 是 1 行）。
   修法：① 文案精简成两行「公司全称 / 版权所有 © 2026」，并**禁止折行**（超长省略号）
        ② 861~1180px 时侧栏是 64px 图标条 → 这块**只留 logo**，文字收起来
        ③ "汀韵悠家定制版"挪到顶栏徽章的悬停提示里（不占地方） */
.corp-foot strong,
.corp-foot small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.corp-foot strong { font-size: 11.5px; }
.corp-foot small { font-size: 10.5px; }

@media (min-width: 861px) {
  .corp-foot { padding: 12px 14px 2px; }
  .corp-foot img { width: 24px; height: 24px; padding: 2px; }
}
/* 图标条模式（861~1180px）：只留 logo，居中 */
@media (min-width: 861px) and (max-width: 1180px) {
  .corp-foot { justify-content: center; padding: 10px 0 2px; }
  .corp-foot div { display: none; }
}