/* 皮肤：data-theme=light|dark 手动指定；未指定(auto)时跟随系统。颜色只在这里定义。 */
:root { --act-h:36px; --watch:#2f6fe4; --bg:#f5f5f5; --card:#fff; --text:#222; --muted:#888; --line:#eee; --accent:#ff6a33; --ok:#1a9d4b; --err:#d33; --warn:#c77d00; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg:#141417; --card:#212127; --text:#ececf0; --muted:#9a9aa6; --line:#33333b; --ok:#3ecf72; --err:#ff6b6b; --warn:#f0b040; --watch:#7aa7ff; }
}
:root[data-theme="dark"] { --watch:#7aa7ff; --bg:#141417; --card:#212127; --text:#ececf0; --muted:#9a9aa6; --line:#33333b; --ok:#3ecf72; --err:#ff6b6b; --warn:#f0b040; }

* { box-sizing:border-box }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.5 system-ui,"PingFang SC","Microsoft YaHei",sans-serif; transition:background .2s,color .2s }
.muted { color:var(--muted); font-size:13px }

.tabs { display:flex; background:var(--card); border-radius:12px; padding:4px; margin-bottom:12px }
.tab { flex:1; border:0; background:transparent; color:var(--muted); padding:8px; border-radius:9px; cursor:pointer; font-size:15px }
.tab.on { background:var(--accent); color:#fff }
.badge { background:var(--err); color:#fff; border-radius:9px; font-size:11px; padding:0 6px; margin-left:4px }

.days { display:flex; gap:8px; overflow-x:auto; padding-bottom:8px }
.day { flex:0 0 auto; padding:8px 14px; border-radius:10px; background:var(--card); border:0; color:var(--text); cursor:pointer; text-align:center }
.day.on { background:var(--accent); color:#fff }
.slot { display:flex; align-items:center; gap:12px; background:var(--card); border-radius:12px; padding:12px 14px; margin-top:10px }
.slot .info { flex:1 }
.time { font-weight:600; font-size:16px }
.left { color:var(--accent) } .left.zero { color:var(--muted) }
.job { font-size:12px; margin-top:2px } .job.success { color:var(--ok) } .job.error { color:var(--err) }

button.act { border:0; border-radius:18px; padding:7px 16px; cursor:pointer; background:var(--accent); color:#fff; font-size:14px }
button.act.ghost { background:transparent; color:var(--accent); border:1px solid var(--accent) }
button.act.danger { background:var(--err); color:#fff; border:1px solid var(--err) }
/* 用 <a> 当按钮时（深链必须挂在真实链接上）保持同样外观 */
a.act { border-radius:18px; padding:7px 16px; cursor:pointer; background:var(--accent); color:#fff; font-size:14px }
a.act.ghost { background:transparent; color:var(--accent); border:1px solid var(--accent) }
.tag { font-size:12px; font-weight:400; color:#fff; background:var(--ok); border-radius:8px; padding:1px 8px; margin-left:6px }

/* 我的预约页 */
.sec-title { margin:16px 0 4px; font-size:13px; color:var(--muted) }
.bk { background:var(--card); border-radius:12px; padding:12px 14px; margin-top:10px; display:flex; align-items:center; gap:12px }
.bk.pending { border-left:4px solid var(--ok) }
.bk .info { flex:1; min-width:0 }
.bk .meta { color:var(--muted); font-size:12px }
.status { font-size:12px; border-radius:10px; padding:1px 9px; background:var(--line); color:var(--muted) }
.status.s1 { background:var(--ok); color:#fff } .status.s2 { color:var(--ok) } .status.s4 { color:var(--warn) }
.empty { text-align:center; padding:28px 0; color:var(--muted) }

#login { text-align:center; background:var(--card); border-radius:12px; padding:16px }
#login img { max-width:100%; width:380px; border-radius:8px }
#toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:#333; color:#fff; padding:10px 18px; border-radius:20px; opacity:0; transition:opacity .2s; pointer-events:none }
#toast.show { opacity:.95 }

/* 通用卡片/表单（会议室页、口令页、登录页） */
.card { background:var(--card); border-radius:12px; padding:14px; margin-top:10px }
.card.center { text-align:center }
.form label, .form .field { display:block; font-size:13px; color:var(--muted); margin-top:10px }
.form .field > span { display:block; margin-bottom:4px }
input, select { width:100%; margin-top:4px; padding:9px 10px; font-size:16px; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:8px }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.form .row2 .act { margin-top:14px; padding:10px }
.chips { display:flex; flex-wrap:wrap; gap:6px; max-height:132px; overflow-y:auto }
.chip { margin:0 !important; font-size:14px !important; color:var(--text) !important }
.chip input { display:none }
.chip span { display:inline-block; padding:4px 12px; border-radius:14px; background:var(--bg); border:1px solid var(--line) }
.chip input:checked + span { background:var(--accent); color:#fff; border-color:var(--accent) }
nav.tabs.sub { background:transparent; padding:0; margin-bottom:6px }
nav.tabs.sub .tab { background:var(--card); margin-right:8px; flex:0 0 auto; padding:6px 16px }
nav.tabs.sub .tab.on { background:var(--accent) }
button.act { min-height:var(--act-h); box-sizing:border-box }
@media (max-width:480px) { .slot, .bk { padding:12px } .time { font-size:15px } }

/* 会议室：筛选条 + 时间轴（仿小米会议小程序）。busy=别人订的 mine=我订的 pick=我正在选 win=查询窗口提示线 */
:root { --busy:#cfdcff; --mine:#a8e3bd; --past:#e4e4e8 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --busy:#34457a; --mine:#2c6b45; --past:#2c2c33 } }
:root[data-theme="dark"] { --busy:#34457a; --mine:#2c6b45; --past:#2c2c33 }
.row-date { display:grid; grid-template-columns:36px 1fr 36px; gap:6px; align-items:center }
.row-time { margin-top:8px } .row-time select { margin-top:0 }
.row-date input, .row-date select { margin-top:0; padding:8px 6px; font-size:15px }
.row-min { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:end }
.row-min .act { height:42px }
button.act.sm { padding:4px 12px; min-height:30px; font-size:13px }
.mt-list { margin-top:10px }
.mt-room { background:var(--card); border-radius:12px; padding:12px 14px 6px; margin-bottom:10px }
.mt-room .head { display:flex; justify-content:space-between; align-items:flex-start; gap:8px }
.mt-room .meta { color:var(--muted); font-size:12px }
.tl { display:flex; margin-top:8px; border:1px solid var(--line); border-radius:6px; overflow:hidden; height:28px }
.cell { flex:1; border-right:1px solid var(--line); cursor:pointer; position:relative }
.cell:nth-child(2n) { border-right-color:transparent }
.cell.busy { background:var(--busy) } .cell.mine { background:var(--mine) } .cell.past { background:var(--past); cursor:not-allowed }
.cell.win::after { content:''; position:absolute; inset:0; border-top:2px solid var(--accent); border-bottom:2px solid var(--accent); opacity:.55 }
.cell.pick { background:var(--accent) !important }
.axis { position:relative; height:18px; font-size:11px; color:var(--muted) }
.axis span { position:absolute; transform:translateX(-30%) }
.divider { text-align:center; color:var(--muted); font-size:13px; padding:10px 0 }
.sheet { position:fixed; left:0; right:0; bottom:0; z-index:5; background:var(--card); padding:14px 16px max(14px,env(safe-area-inset-bottom)); box-shadow:0 -4px 16px rgba(0,0,0,.18); border-radius:16px 16px 0 0; max-width:640px; margin:0 auto }
.sheet input { margin:8px 0 10px }
details.more { margin-top:10px } details.more summary { cursor:pointer; color:var(--muted); font-size:13px; padding:4px 0 }
button.act.wide { width:100%; margin-top:12px; height:40px }

/* 三列选择器（园区|楼栋|楼层）与窄屏的空闲时段列表 */
.area-btn { width:100%; margin-top:8px; text-align:left; padding:10px 12px; font-size:15px; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:8px; cursor:pointer }
.picker { position:fixed; inset:0; z-index:9 }
.pmask { position:absolute; inset:0; background:rgba(0,0,0,.45) }
.pbox { position:absolute; left:0; right:0; bottom:0; max-width:640px; margin:0 auto; background:var(--card); border-radius:16px 16px 0 0; padding-bottom:env(safe-area-inset-bottom) }
.phead { display:flex; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line); font-size:16px } .phead .ok { color:var(--accent) }
.pcols { display:grid; grid-template-columns:1fr 1fr 1fr; height:46vh; max-height:380px }
.pcol { overflow-y:auto; border-right:1px solid var(--line) } .pcol:last-child { border-right:0 }
.pit { padding:13px 14px; font-size:15px; cursor:pointer; display:flex; justify-content:space-between; align-items:center }
.pit.on { color:var(--accent); font-weight:600 }
.pit.chk i { width:18px; height:18px; border:1.5px solid var(--muted); border-radius:4px } .pit.chk.on i { background:var(--accent); border-color:var(--accent) }
.freelist { display:block; margin-top:6px }
.free-row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-top:1px solid var(--line); font-size:16px }
}

/* 任何带 hidden 属性的元素都必须隐藏（避免被各处的 display 规则盖掉） */
[hidden] { display:none !important }

/* 「已预约」绿色徽标：固定放在「取消预约」按钮左边 */
.booked-pill { display:inline-flex; align-items:center; justify-content:center; gap:4px; font-size:14px; color:#fff; background:var(--ok); border-radius:18px; padding:0 14px; min-height:var(--act-h); box-sizing:border-box; white-space:nowrap }
.booked-pill::before { content:'✓' }
.slot .mine-actions, .g-row .acts.mine-actions { display:flex; align-items:center; gap:8px; flex-shrink:0 }

/* 自动抢规则面板 */
.rules-head { display:flex; justify-content:space-between; align-items:center; margin:4px 0 2px }
.rule { display:flex; align-items:center; gap:10px; background:var(--bg); border-radius:10px; padding:10px 12px; margin-top:8px } .rule.off { opacity:.55 } .rule .info { flex:1; min-width:0 }
.rule-form { margin-top:10px; background:var(--bg) }
.chipbtn { border:1px solid var(--line); background:var(--card); color:var(--text); border-radius:14px; padding:4px 11px; font-size:14px; cursor:pointer }
.chipbtn.on { background:var(--accent); color:#fff; border-color:var(--accent) }
.switch { position:relative; display:inline-block; width:40px; height:24px; margin:0 !important } .switch input { opacity:0; width:0; height:0 }
.switch i { position:absolute; inset:0; background:var(--line); border-radius:12px; transition:.2s } .switch i::after { content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s }
.switch input:checked + i { background:var(--ok) } .switch input:checked + i::after { transform:translateX(16px) }
hr.sep { border:0; border-top:1px solid var(--line); margin:14px 0 }

/* 「取消盯位」用蓝色，与橙色的「盯位自动抢」区分开 */
button.act.watching { background:transparent; color:var(--watch); border:1px solid var(--watch) }

.qr-actions { display:flex; flex-direction:column; gap:8px; margin:10px auto; max-width:360px }
/* 深链（mioa:// / xiaomier://）必须挂在 <a href> 上才唤得起 App：JS 赋值 location 在部分 WebView 里会被拦 */
.qr-actions a.act { display:block; text-align:center; text-decoration:none }
#login img, #authQr { background:#fff }
#authQr { width:240px; max-width:100%; border-radius:8px; margin:8px auto; display:block }
#authQr[hidden] { display:none }

/* 小号：与 button.act.sm 同高（30px），用于电脑版右侧面板 */
.booked-pill.sm { min-height:30px; font-size:13px; padding:0 10px; border-radius:15px }
.bk .mine-actions { display:flex; align-items:center; gap:8px; flex-shrink:0 }
.bk .info { min-width:0 }