/* ============================================================
   酒店 AI 员工 · 工作台样式（手机优先，宽屏自动两栏）
   零依赖：不引 Tailwind/CDN，断网也能演示
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#f4f5f7; --card:#fff; --ink:#111827; --sub:#6b7280; --line:#e8eaee;
  --navy:#16305c; --navy2:#0f2244; --gold:#b98f2e;
  --ok:#0f7b46; --okbg:#e8f6ee; --warn:#a8620a; --warnbg:#fdf2e3;
  --bad:#b3261e; --badbg:#fdecea; --info:#1f5aa8; --infobg:#eaf1fb;
  --r:16px;
  /* —— 2026-09-14 视觉精修：阴影分三层，别再用一坨灰；数字用等宽对齐 —— */
  --sh1:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.03);
  --sh2:0 2px 6px rgba(16,24,40,.05), 0 8px 20px rgba(16,24,40,.07);
  --sh3:0 10px 30px rgba(16,24,40,.12), 0 2px 8px rgba(16,24,40,.06);
  --ease:cubic-bezier(.22,.61,.36,1);
}
html,body{background:var(--bg)}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;
  color:var(--ink);font-size:15px;line-height:1.6;padding-bottom:76px;-webkit-font-smoothing:antialiased;
}
body.chatpage{padding-bottom:0;height:100vh;overflow:hidden}
body.chatpage .tabbar{display:none} /* 聊天页全屏输入，不被底部导航挡 */
a{color:var(--info);text-decoration:none}
.wrap{max-width:520px;margin:0 auto}
@media(min-width:1000px){
  body{padding-bottom:24px;padding-top:56px}
  .wrap{max-width:1140px;padding:0 16px}
  .grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  .grid>.span2{grid-column:1/-1}
}

/* ---------------- 顶部 hero ---------------- */
.hero{background:linear-gradient(158deg,#1b3c72 0%,var(--navy) 42%,var(--navy2) 100%);color:#fff;
  padding:22px 18px 20px;position:relative;overflow:hidden}
@media(min-width:1000px){.hero{border-radius:0 0 24px 24px;box-shadow:var(--sh2)}}
/* 两个光斑（金 + 青）比原来一个更透气，也更像"有光"而不是一块色 */
.hero:after{content:"";position:absolute;right:-40px;top:-40px;width:170px;height:170px;
  border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(185,143,46,.30),rgba(185,143,46,0) 70%)}
.hero:before{content:"";position:absolute;left:-60px;bottom:-80px;width:200px;height:200px;
  border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(96,165,250,.16),rgba(96,165,250,0) 70%)}
.hero .row{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1;gap:10px}
.hotel{font-size:16.5px;font-weight:600;letter-spacing:.3px}
.hotel span{display:block;font-size:12px;opacity:.72;font-weight:400;margin-top:2px}
.aibadge{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2);padding:5px 10px;border-radius:99px;font-size:11.5px;white-space:nowrap}
.dot{width:6px;height:6px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 3px rgba(61,220,132,.25)}
.dot.off{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.25)}
.htitle{position:relative;z-index:1;margin-top:16px;font-size:22px;font-weight:700;letter-spacing:.5px}
.hsub{position:relative;z-index:1;font-size:12.5px;opacity:.78;margin-top:3px}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.14);
  border-radius:14px;overflow:hidden;margin-top:16px;position:relative;z-index:1;
  border:1px solid rgba(255,255,255,.10)}
.kpi{background:rgba(8,20,40,.28);padding:11px 4px;text-align:center}
.kpi b{display:block;font-size:20px;font-weight:700;line-height:1.25;letter-spacing:-.2px;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.kpi b small{font-size:12px;font-weight:600}
.kpi i{display:block;font-style:normal;font-size:10.5px;opacity:.75;margin-top:1px}
.kpi em{font-style:normal;font-size:11px;color:#7ee2a8}
.kpi em.dn{color:#ffb4ad}

/* ---------------- 卡片 ---------------- */
.card{background:var(--card);border-radius:var(--r);margin:12px 12px 0;
  box-shadow:var(--sh1);overflow:hidden;
  transition:box-shadow .28s var(--ease),transform .28s var(--ease)}
@media(min-width:1000px){.card{margin:0}}
.ch{display:flex;align-items:center;gap:8px;padding:14px 16px 0}
.ch h3{font-size:16px;font-weight:650;flex:1;letter-spacing:.2px}
.ch .ico{font-size:17px}
.cb{padding:12px 16px 16px}
.hr{height:1px;background:var(--line);margin:12px 0}
.muted{color:var(--sub);font-size:12.5px}
.tag{font-size:11px;padding:2px 8px;border-radius:99px;font-weight:600;white-space:nowrap;display:inline-block}
.t-ok{background:var(--okbg);color:var(--ok)} .t-warn{background:var(--warnbg);color:var(--warn)}
.t-bad{background:var(--badbg);color:var(--bad)} .t-info{background:var(--infobg);color:var(--info)}
.t-gold{background:#fbf3e0;color:var(--gold)} .t-gray{background:#f0f1f4;color:#4b5563}

.why{background:#fafbfc;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:10px}
.why li{list-style:none;font-size:12.5px;color:#374151;padding-left:14px;position:relative;margin:4px 0}
.why li:before{content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.why .t{font-size:11px;color:var(--sub);font-weight:600;letter-spacing:.5px;margin-bottom:4px}

.rooms{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rooms.c3{grid-template-columns:repeat(3,1fr)}
.room{background:#fafbfc;border:1px solid var(--line);border-radius:10px;padding:9px 4px;text-align:center}
.room b{display:block;font-size:18px;font-weight:700}
.room i{font-style:normal;font-size:10.5px;color:var(--sub)}
.rt{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:7px 0;border-bottom:1px dashed var(--line)}
.rt:last-child{border:0}
.rt s{text-decoration:none;color:var(--sub);font-size:12px;text-align:right;flex:0 0 auto}

.price{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.price .old{font-size:15px;color:var(--sub);text-decoration:line-through}
.price .new{font-size:30px;font-weight:750;color:var(--navy);line-height:1}
.price .up{font-size:12px;font-weight:700;color:var(--ok);background:var(--okbg);padding:2px 7px;border-radius:6px}
.price .up.dn{color:var(--bad);background:var(--badbg)}
.range{font-size:12px;color:var(--sub);margin-top:6px}
.cmp{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:2px}
.cmp>div{flex:0 0 auto;background:#fafbfc;border:1px solid var(--line);border-radius:9px;padding:7px 10px;font-size:12px;text-align:center}
.cmp b{display:block;font-size:14px;font-weight:700}

.item{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.item:last-child{border:0;padding-bottom:0}
.av{flex:0 0 36px;height:36px;border-radius:10px;background:var(--infobg);color:var(--info);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.av.g{background:#fbf3e0;color:var(--gold)} .av.r{background:var(--badbg);color:var(--bad)}
.av.k{background:var(--okbg);color:var(--ok)} .av.n{background:#eef0f3;color:#4b5563}
.it{flex:1;min-width:0}
.it .n{font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.it .d{font-size:12.5px;color:var(--sub);margin-top:2px}
.quote{background:#fafbfc;border-left:3px solid var(--gold);border-radius:0 8px 8px 0;
  padding:8px 10px;font-size:12.5px;color:#374151;margin-top:7px;white-space:pre-wrap}
.quote.blue{border-left-color:var(--info)}

/* ---------------- 按钮 ---------------- */
.acts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.btn{flex:1;min-width:96px;border:0;border-radius:10px;padding:11px 10px;font-size:14px;font-weight:650;
  font-family:inherit;cursor:pointer;transition:.15s;letter-spacing:.3px}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.55;cursor:default}
.b1{background:var(--navy);color:#fff} .b2{background:#f0f1f4;color:#374151}
.b3{background:var(--gold);color:#fff} .b4{background:#fff;color:var(--navy);border:1px solid var(--navy)}
.bs{flex:0 0 auto;padding:8px 14px;font-size:13px;border-radius:9px;min-width:0}
.done{background:var(--okbg)!important;color:var(--ok)!important;border-color:transparent!important;pointer-events:none}

/* ---------------- 表单 ---------------- */
input[type=text],textarea,select{
  width:100%;font-family:inherit;font-size:14px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;outline:none;transition:.15s}
input:focus,textarea:focus,select:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(22,48,92,.08)}
textarea{resize:vertical;line-height:1.6}
label.fl{display:block;font-size:12px;color:var(--sub);font-weight:600;margin:10px 0 4px}

/* ---------------- 质检 ---------------- */
.qc{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer}
.qc:last-child{border:0}
.qc .m{flex:1;min-width:0}
.qc .m b{font-size:14px;font-weight:600}
.qc .m div{font-size:12px;color:var(--sub)}
.sc{flex:0 0 auto;text-align:right}
.sc b{font-size:17px;font-weight:750}
.sc.hi b{color:var(--ok)} .sc.mid b{color:var(--warn)} .sc.lo b{color:var(--bad)}
.sc i{font-style:normal;display:block;font-size:10.5px;color:var(--sub)}

/* ---------------- 聊天 ---------------- */
.chatwrap{display:flex;flex-direction:column;height:100vh;max-width:520px;margin:0 auto;background:#ededed}
@media(min-width:1000px){.chatwrap{max-width:480px;box-shadow:0 0 40px rgba(0,0,0,.08)}}
.chattop{background:var(--navy);color:#fff;padding:10px 14px;display:flex;align-items:center;gap:10px;flex:0 0 auto}
.chattop select{width:auto;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.2);color:#fff;font-size:12.5px;padding:6px 8px}
.chattop select option{color:#111}
.chattop .who{flex:1;min-width:0}
.chattop .who b{font-size:15px;display:block;line-height:1.3}
.chattop .who span{font-size:11px;opacity:.75}
.msgs{flex:1;overflow-y:auto;padding:14px 12px 20px;-webkit-overflow-scrolling:touch}
.msg{display:flex;gap:8px;margin-bottom:14px;align-items:flex-start}
.msg .bub{max-width:74%;background:#fff;border-radius:4px 12px 12px 12px;padding:9px 12px;font-size:14.5px;
  line-height:1.55;box-shadow:0 1px 1px rgba(0,0,0,.05);white-space:pre-wrap;word-break:break-word}
.msg.me{flex-direction:row-reverse}
.msg.me .bub{background:#95ec69;border-radius:12px 4px 12px 12px}
.msg .ava{flex:0 0 34px;height:34px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;background:var(--navy);color:#fff}
.msg.me .ava{background:#7c8899}
.msg .meta{font-size:10.5px;color:#9ca3af;margin-top:3px}
.chatbar{flex:0 0 auto;background:#f7f7f7;border-top:1px solid #e2e2e2;padding:8px 10px;
  padding-bottom:calc(8px + env(safe-area-inset-bottom));display:flex;gap:8px;align-items:flex-end}
.chatbar textarea{flex:1;border-radius:8px;max-height:96px;min-height:38px;padding:8px 10px;font-size:15px}
.chatbar button{flex:0 0 auto;background:var(--ok);color:#fff;border:0;border-radius:8px;padding:9px 16px;
  font-size:14.5px;font-weight:650;font-family:inherit;cursor:pointer}
.chatbar button:disabled{background:#a7c4b4}
.sysline{text-align:center;font-size:11.5px;color:#8b8b8b;background:rgba(0,0,0,.05);
  padding:4px 10px;border-radius:6px;margin:0 auto 14px;max-width:88%}
.typing .bub{color:var(--sub);font-style:italic}
.memcard{background:#fffbea;border:1px solid #f0e3b8;border-radius:10px;padding:8px 10px;margin:0 auto 14px;
  max-width:94%;font-size:11.5px;color:#7a5c12;line-height:1.6}
.memcard b{color:#5c4408}

/* ---------------- 导航 ---------------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);display:flex;z-index:60;padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{flex:1;text-align:center;padding:7px 2px 6px;color:var(--sub);font-size:10.5px;font-weight:600}
.tabbar a i{display:block;font-style:normal;font-size:19px;line-height:1.3;filter:grayscale(1) opacity(.55)}
.tabbar a.on{color:var(--navy)} .tabbar a.on i{filter:none}
.topnav{display:none}
@media(min-width:1000px){
  .tabbar{display:none}
  .topnav{display:flex;position:fixed;top:0;left:0;right:0;height:56px;background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:60;align-items:center;
    padding:0 24px;gap:6px}
  .topnav .brand{font-weight:700;font-size:15px;margin-right:18px;color:var(--navy)}
  .topnav a{padding:7px 14px;border-radius:9px;font-size:14px;color:#4b5563;font-weight:600}
  .topnav a.on{background:var(--navy);color:#fff}
  body.chatpage{padding-top:0}
  body.chatpage .topnav{display:none}
}

/* ---------------- 底部确认条 ---------------- */
.fixed{position:fixed;left:0;right:0;bottom:56px;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);padding:9px 14px;z-index:55;display:flex;align-items:center;gap:12px}
@media(min-width:1000px){.fixed{bottom:0;padding-bottom:12px}}
.fixed .txt{flex:1;font-size:12.5px;color:var(--sub)}
.fixed .txt b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
.fixed button{border:0;background:var(--navy);color:#fff;padding:11px 18px;border-radius:11px;
  font-size:14px;font-weight:700;font-family:inherit;cursor:pointer}
.foot{text-align:center;color:var(--sub);font-size:11.5px;padding:18px 20px 8px;line-height:1.8}

/* ---------------- 杂项 ---------------- */
#toast{position:fixed;left:50%;bottom:130px;transform:translate(-50%,12px);z-index:99;
  background:rgba(17,24,39,.93);color:#fff;padding:11px 18px;border-radius:11px;font-size:13.5px;
  opacity:0;transition:.22s;pointer-events:none;max-width:86vw;text-align:center;white-space:pre-wrap}
#toast.on{opacity:1;transform:translate(-50%,0)}
.fold{display:none}.fold.on{display:block}
.spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px;margin-right:6px}
.spin.dark{border-color:rgba(22,48,92,.25);border-top-color:var(--navy)}
@keyframes sp{to{transform:rotate(360deg)}}
.skel{background:linear-gradient(90deg,#eef0f3 25%,#f6f7f9 50%,#eef0f3 75%);background-size:200% 100%;
  animation:sk 1.2s infinite;border-radius:8px;height:14px;margin:8px 0}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.empty{text-align:center;padding:28px 20px;color:var(--sub);font-size:13px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.chip{background:#f0f1f4;color:#4b5563;font-size:11.5px;padding:3px 9px;border-radius:99px}
.chip.g{background:#fbf3e0;color:var(--gold)} .chip.r{background:var(--badbg);color:var(--bad)}
.chip.k{background:var(--okbg);color:var(--ok)}
.row2{display:flex;gap:10px}.row2>*{flex:1;min-width:0}

/* ---------------- 行动卡（第一屏：今天要做的事） ---------------- */
.acts-grid{padding:10px 12px 0;display:grid;gap:10px}
@media(min-width:1000px){.acts-grid{grid-template-columns:1fr 1fr}}
.act{background:var(--card);border-radius:14px;padding:14px 14px 12px;display:flex;gap:12px;
  box-shadow:0 1px 2px rgba(16,24,40,.05),0 1px 12px rgba(16,24,40,.04);position:relative;overflow:hidden}
.act:after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gold)}
.act b{color:var(--navy)}
.actico{flex:0 0 40px;height:40px;border-radius:12px;background:#fbf3e0;display:flex;
  align-items:center;justify-content:center;font-size:20px}
.actmain{flex:1;min-width:0}
.acttitle{font-size:16px;font-weight:700;line-height:1.4}
.actsub{font-size:12.5px;color:var(--sub);margin-top:5px;line-height:1.65}
.act.done{opacity:.75;background:#f6faf7}
.act.done:after{background:var(--ok)}
.act.done .acttitle{color:var(--ink)}

/* 明细折叠 */
details.details{margin:12px 12px 0}
@media(min-width:1000px){details.details{margin:12px 0 0}}
details.details summary{display:flex;align-items:center;gap:8px;padding:14px 16px;cursor:pointer;
  list-style:none;user-select:none}
details.details summary::-webkit-details-marker{display:none}
details.details summary:after{content:"▾";margin-left:auto;font-size:15px;color:var(--sub);transition:.2s}
details.details[open] summary:after{transform:rotate(180deg)}
details.details summary h3{font-size:16px;font-weight:650;flex:0 0 auto}
details.details > .grid{display:none}
details.details[open] > .grid{display:grid}
details.details[open] > .grid > .card{display:block}
@media(max-width:999px){details.details[open] > .grid > .card{display:block}}
details.details .muted{padding:0 16px 14px}

/* 门店切换器（随 hero 流式排布，不遮挡内容） */
.hero-select{flex:0 0 auto;max-width:150px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:8px;padding:5px 6px;font-size:12px;color:#fff}
.hero-select option{color:#111}

/* ============================================================
   2026-09-14 视觉精修（保持深蓝金，只提质感 —— 用户拍板方向）
   ============================================================ */

/* ① 数字一律等宽：对齐好看，老板扫一眼就能比大小 */
.kpi b,.kpi em,.price .new,.sc b,.room b,.cmp b,.fixed .txt b,.hotel,.htitle{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ② 间距舒展一点（原来偏挤），标题字重加一档 */
.ch{padding:15px 16px 0}
.ch h3{font-weight:680;letter-spacing:.1px}
.cb{padding:14px 16px 18px}

/* ③ 列表分隔线更淡（原来偏重，一整屏虚线很吵） */
.item,.rt,.qc,.hr{border-color:#f1f2f5}

/* ④ 行动卡与卡片统一阴影语言 */
.act{box-shadow:var(--sh1);transition:box-shadow .28s var(--ease),transform .28s var(--ease)}
.actico{box-shadow:inset 0 0 0 1px rgba(185,143,46,.14)}

/* ⑤ 按钮过渡更顺，按下有回弹 */
.btn{transition:filter .18s var(--ease),background .18s var(--ease),transform .12s var(--ease)}

/* ⑥ hover 微交互 —— 只在"真有指针"的设备上生效，触屏不会误触发 */
@media(hover:hover) and (min-width:1000px){
  .card:hover{box-shadow:var(--sh2)}
  .act:hover{box-shadow:var(--sh2);transform:translateY(-1px)}
  .item:hover,.rt:hover,.qc:hover{background:#fafbfd}
  .topnav a:hover{background:#f0f2f6;color:var(--navy)}
  .topnav a.on:hover{background:var(--navy);color:#fff}
  .btn:hover:not(:disabled){filter:brightness(1.07)}
  .tabbar a:hover{color:var(--navy)}
}

/* ⑦ 桌面滚动条细一点，不抢视线 */
@media(min-width:1000px){
  *::-webkit-scrollbar{width:9px;height:9px}
  *::-webkit-scrollbar-thumb{background:#d7dbe2;border-radius:9px;border:2px solid transparent;background-clip:content-box}
  *::-webkit-scrollbar-thumb:hover{background:#bcc3cd;background-clip:content-box}
  *::-webkit-scrollbar-track{background:transparent}
}

/* ⑧ toast 跟上一档 */
#toast{border-radius:14px;box-shadow:var(--sh3)}
.empty{padding:34px 20px;line-height:1.9}

/* ⑨ 键盘可达：焦点要看得见（别为了好看把 outline 全干掉） */
.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid rgba(22,48,92,.45);outline-offset:2px}

/* ⑩ 尊重系统"减少动态效果"设置（无障碍，也省电） */
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ============================================================
   2026-09-14 手机端三个真问题（第一次在 414px 下截图才看出来的）
   ============================================================ */
@media(max-width:999px){
  /* ① 底部栏挤：11 项塞进 414px。**不隐藏**（2026-09-14 修正）——
        我一度把平台项（门店/账号）藏了，结果用户在手机上**找不到改密码的入口**。
        功能可用 > 好看：宁可挤一点，也不能把入口藏没了。
        普通客户（boss）本来就看不到这两项 → 他们那边只有 9 项，不挤。 */
  .tabbar a{padding:6px 0 5px;font-size:9.5px}
  .tabbar a i{font-size:17px}

  /* ② hero 右上角被"铃铛 + 用户chip"压住（它们是 fixed 定位，手机没有顶栏挡着）。
        给 hero 顶部留出安全区 */
  .hero{padding-top:46px}
}

/* ③ 按钮文字被挤断（"跑全员质/检"）：按钮内文字永不折行，宽度不够就整块换到下一行 */
.btn{white-space:nowrap}
.acts .btn{flex:1 1 auto}