:root{
  --bg:#f5f6f8; --panel:#ffffff; --line:#e6e8ec; --line-soft:#f0f1f4;
  --text:#1a1d24; --muted:#6b7280; --faint:#9aa1ad;
  --primary:#2f6bff; --primary-soft:#eef3ff;
  --danger:#dc2626; --danger-soft:#fef2f2;
  --warn:#ea8a00; --warn-soft:#fff8eb;
  --ok:#0f9d64; --ok-soft:#eefaf4;
  --radius:14px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px -12px rgba(16,24,40,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text); font-size:14px; line-height:1.55;
  font-family:system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none !important}

/* ---------- 按钮 ---------- */
.btn{
  border:1px solid var(--line); background:#fff; color:var(--text);
  padding:8px 14px; border-radius:10px; font-size:13.5px; font-weight:500;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  transition:background .15s,border-color .15s,transform .06s;
}
.btn:hover{background:#f7f8fa}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary); border-color:var(--primary); color:#fff}
.btn-primary:hover{background:#2560ea; border-color:#2560ea}
.btn-danger{color:var(--danger); border-color:#f3d3d3}
.btn-danger:hover{background:var(--danger-soft)}
.btn-sm{padding:5px 10px; font-size:12.5px; border-radius:8px}
.btn-block{width:100%; justify-content:center; padding:11px; font-size:14.5px; margin-top:4px}
.btn:disabled{opacity:.6; cursor:not-allowed}

/* ---------- 登录页 ---------- */
.auth{
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:24px;
}
.auth-card{
  width:100%; max-width:392px; background:var(--panel); border:1px solid var(--line);
  border-radius:18px; padding:28px 26px 24px; box-shadow:0 2px 8px rgba(16,24,40,.05), 0 20px 48px -24px rgba(16,24,40,.25);
}
.auth-brand{display:flex; align-items:center; gap:10px; margin-bottom:22px}
.auth-brand .brand-mark{width:36px;height:36px;border-radius:11px;flex:0 0 auto;background:linear-gradient(140deg,#3d7bff,#1f4fd6);display:grid;place-items:center;color:#fff;font-size:18px}
.auth-brand b{display:block; font-size:15px}
.auth-brand span{display:block; font-size:11.5px; color:var(--faint)}
.auth-title{margin:0 0 4px; font-size:20px; font-weight:650; letter-spacing:-.3px}
.auth-desc{margin:0 0 18px; font-size:13px; color:var(--muted)}
.auth-card .field{margin-bottom:14px}
#authForm .field:last-of-type{margin-bottom:16px}
.auth-msg{
  background:var(--danger-soft); border:1px solid #f6cfcf; color:#a32020;
  border-radius:10px; padding:9px 12px; font-size:12.5px; margin-bottom:12px;
}
.auth-msg.ok{background:var(--ok-soft); border-color:#c8ecda; color:#0b6b46}
.auth-switch{margin-top:16px; text-align:center; font-size:13px; color:var(--muted)}
.auth-switch button{border:none; background:none; color:var(--primary); font-weight:500; padding:2px 4px}
.auth-switch button:hover{text-decoration:underline}
.auth-foot{margin-top:18px; font-size:11.5px; color:var(--faint); text-align:center}

/* ---------- 表单 ---------- */
.field label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:5px; font-weight:500}
.field label em{color:var(--danger); font-style:normal; margin-left:2px}
.field input[type=text],.field input[type=email],.field input[type=password],
.field input[type=date],.field input[type=time],.field select,.field textarea{
  width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:10px;
  background:#fafbfc; outline:none; transition:border-color .15s,box-shadow .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--primary); background:#fff; box-shadow:0 0 0 3px var(--primary-soft);
}
.field textarea{resize:vertical; min-height:64px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.hint{font-size:11.5px; color:var(--faint); margin-top:5px; line-height:1.5}

/* ---------- 顶栏 ---------- */
.topbar{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line)}
.topbar-inner{max-width:1180px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:14px}
.brand{display:flex; align-items:center; gap:10px; min-width:0}
.brand-mark{width:34px; height:34px; border-radius:10px; flex:0 0 auto; background:linear-gradient(140deg,#3d7bff,#1f4fd6); display:grid; place-items:center; color:#fff; font-size:17px; box-shadow:0 4px 12px -4px rgba(47,107,255,.5)}
.brand-txt{min-width:0}
.brand-txt b{display:block; font-size:15.5px; white-space:nowrap}
.brand-txt span{display:block; font-size:11.5px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px}
.topbar-actions{margin-left:auto; display:flex; gap:8px; flex:0 0 auto}
.wrap{max-width:1180px; margin:0 auto; padding:20px}

/* ---------- 统计 ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow)}
.stat .k{font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px}
.stat .k i{width:6px; height:6px; border-radius:50%; background:var(--faint); display:inline-block}
.stat .v{font-size:26px; font-weight:650; letter-spacing:-.5px; margin-top:4px; line-height:1.15}
.stat .v small{font-size:12px; font-weight:500; color:var(--faint); margin-left:3px}
.stat.is-danger .k i{background:var(--danger)} .stat.is-danger .v{color:var(--danger)}
.stat.is-warn .k i{background:var(--warn)} .stat.is-warn .v{color:var(--warn)}
.stat.is-ok .k i{background:var(--ok)} .stat.is-ok .v{color:var(--ok)}

/* ---------- 横幅 ---------- */
.banner{display:none; align-items:center; gap:12px; background:var(--warn-soft); border:1px solid #f6e0b8; color:#7a4c00; border-radius:var(--radius); padding:12px 16px; margin-bottom:16px; font-size:13.5px}
.banner.show{display:flex}
.banner .b-icon{font-size:17px; flex:0 0 auto}
.banner .b-txt{flex:1; min-width:0}
.banner.danger{background:var(--danger-soft); border-color:#f6cfcf; color:#8a1c1c}

/* ---------- 工具栏 ---------- */
.toolbar{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; margin-bottom:16px; box-shadow:var(--shadow); display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.search{position:relative; flex:1 1 200px; min-width:180px}
.search input{width:100%; padding:8px 12px 8px 32px; border:1px solid var(--line); border-radius:10px; background:#fafbfc; outline:none}
.search input:focus{border-color:var(--primary); background:#fff; box-shadow:0 0 0 3px var(--primary-soft)}
.search svg{position:absolute; left:10px; top:50%; transform:translateY(-50%); opacity:.45}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{border:1px solid var(--line); background:#fff; border-radius:999px; padding:5px 12px; font-size:12.5px; color:var(--muted)}
.chip:hover{border-color:#d5d9e0; color:var(--text)}
.chip.on{background:var(--text); border-color:var(--text); color:#fff}
.chip.on.c-danger{background:var(--danger); border-color:var(--danger)}
.chip.on.c-warn{background:var(--warn); border-color:var(--warn)}
.chip.on.c-ok{background:var(--ok); border-color:var(--ok)}
.toolbar select{padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:#fff; outline:none}

/* ---------- 卡片 ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:14px}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; border-left:3px solid var(--line); transition:box-shadow .18s,transform .18s}
.card:hover{box-shadow:0 2px 6px rgba(16,24,40,.06),0 14px 30px -14px rgba(16,24,40,.2); transform:translateY(-1px)}
.card.lv-expired{border-left-color:var(--danger)}
.card.lv-urgent{border-left-color:#f0603a}
.card.lv-warn{border-left-color:var(--warn)}
.card.lv-soon{border-left-color:#d8bd2a}
.card.lv-safe{border-left-color:var(--ok)}
.card.lv-done{opacity:.62; border-left-color:var(--line)}
.thumb{position:relative; height:152px; background:#f2f4f7; flex:0 0 auto; overflow:hidden}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}
.thumb .ph{width:100%; height:100%; display:grid; place-items:center; font-size:40px; background:linear-gradient(150deg,#eef2f8,#e2e8f2); color:#98a3b5}
.thumb .tag{position:absolute; left:8px; top:8px; background:rgba(17,24,39,.62); color:#fff; font-size:11px; padding:3px 8px; border-radius:999px; backdrop-filter:blur(4px)}
.thumb .days{position:absolute; right:8px; top:8px; background:rgba(255,255,255,.94); font-size:12px; font-weight:650; padding:4px 9px; border-radius:999px; border:1px solid rgba(255,255,255,.7); box-shadow:0 2px 8px -3px rgba(0,0,0,.4)}
.thumb .days.expired{background:var(--danger); color:#fff; border-color:var(--danger)}
.thumb .days.urgent{background:#f0603a; color:#fff; border-color:#f0603a}
.thumb .days.warn{background:var(--warn); color:#fff; border-color:var(--warn)}
.thumb .days.soon{background:#c9a900; color:#fff; border-color:#c9a900}
.thumb .days.safe{background:var(--ok); color:#fff; border-color:var(--ok)}
.card-body{padding:12px 13px 13px; display:flex; flex-direction:column; gap:7px; flex:1 1 auto}
.c-name{font-weight:600; font-size:14.5px; line-height:1.35; word-break:break-word}
.c-meta{font-size:12px; color:var(--muted); display:flex; flex-wrap:wrap; gap:4px 8px}
.c-date{font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:5px; flex-wrap:wrap}
.c-date b{color:var(--text); font-weight:600; font-variant-numeric:tabular-nums}
.c-note{font-size:12px; color:var(--faint); background:#fafbfc; border-radius:8px; padding:6px 8px; word-break:break-word}
.c-bar{height:5px; border-radius:999px; background:#eceef2; overflow:hidden; margin-top:2px}
.c-bar i{display:block; height:100%; border-radius:999px; background:var(--primary)}
.c-bar-txt{font-size:11px; color:var(--faint); margin-top:-2px}
.c-acts{display:flex; gap:6px; margin-top:auto; padding-top:4px; flex-wrap:wrap}
.c-acts .spacer{flex:1 1 0; min-width:0}
.card.saving{opacity:.55; pointer-events:none}

/* ---------- 空状态 ---------- */
.empty{display:none; text-align:center; padding:60px 20px; color:var(--muted)}
.empty.show{display:block}
.empty .e-mark{font-size:44px; margin-bottom:10px}
.empty h3{margin:0 0 6px; font-size:16px; color:var(--text); font-weight:600}
.empty p{margin:0 0 16px; font-size:13px}
.foot{max-width:1180px; margin:0 auto; padding:8px 20px 34px; color:var(--faint); font-size:11.5px; text-align:center}

/* ---------- 弹窗 ---------- */
.modal{position:fixed; inset:0; z-index:100; display:none; background:rgba(17,24,39,.42); backdrop-filter:blur(3px); padding:20px; overflow-y:auto}
.modal.show{display:flex; align-items:flex-start; justify-content:center}
.sheet{background:#fff; border-radius:18px; width:100%; max-width:520px; margin:auto; box-shadow:0 24px 60px -20px rgba(16,24,40,.4)}
.sheet-head{display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line-soft)}
.sheet-head h2{margin:0; font-size:16px; font-weight:650}
.sheet-head .x{margin-left:auto; border:none; background:transparent; font-size:19px; color:var(--faint); padding:2px 6px; border-radius:8px}
.sheet-head .x:hover{background:#f1f2f5; color:var(--text)}
.sheet-body{padding:16px 18px; display:flex; flex-direction:column; gap:14px}
.sheet-foot{padding:14px 18px; border-top:1px solid var(--line-soft); display:flex; gap:8px; justify-content:flex-end}
.mini-title{font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:6px}
.admin-tag{font-size:10.5px; font-weight:500; color:var(--faint); background:#f1f2f5; border-radius:6px; padding:1px 6px}
.photo-box{border:1px dashed #d5d9e0; border-radius:12px; background:#fafbfc; padding:12px; display:flex; gap:12px; align-items:center}
.photo-prev{width:84px; height:84px; border-radius:10px; flex:0 0 auto; overflow:hidden; background:#eef1f5; display:grid; place-items:center; font-size:26px; color:#a9b2c0}
.photo-prev img{width:100%; height:100%; object-fit:cover; display:block}
.photo-acts{display:flex; flex-wrap:wrap; gap:6px}
.adv-days{display:flex; gap:6px; flex-wrap:wrap}
.adv-days label{display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line); border-radius:999px; padding:5px 11px; font-size:12.5px; cursor:pointer; background:#fff; color:var(--muted)}
.adv-days input{accent-color:var(--primary); margin:0}
.adv-days label:has(input:checked){border-color:var(--primary); background:var(--primary-soft); color:var(--primary); font-weight:500}
/* ---------- 房子切换与列表 ---------- */
.house-switch{
  display:inline-flex; align-items:center; gap:4px; max-width:280px;
  border:1px solid transparent; background:transparent; border-radius:8px;
  padding:1px 6px; margin-left:-6px; font-size:11.5px; color:var(--faint);
  transition:background .15s,color .15s,border-color .15s;
}
.house-switch:hover{background:#f1f3f7; color:var(--text); border-color:var(--line)}
.house-switch #houseLine{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.house-switch .caret{font-size:9px; opacity:.7}
.house-list{display:flex; flex-direction:column; gap:6px}
.house-item{
  display:flex; align-items:center; gap:9px; padding:9px 11px; cursor:pointer;
  border:1px solid var(--line); border-radius:10px; background:#fff; text-align:left; width:100%;
  transition:border-color .15s,background .15s;
}
.house-item:hover{border-color:#c9d3e8; background:#fafbff}
.house-item.on{border-color:var(--primary); background:var(--primary-soft)}
.house-item .h-icon{font-size:16px; flex:0 0 auto}
.house-item .h-txt{flex:1 1 auto; min-width:0}
.house-item .h-name{font-size:13.5px; font-weight:500; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.house-item .h-meta{font-size:11.5px; color:var(--faint); display:block; margin-top:1px}
.house-item .h-badge{font-size:10.5px; border-radius:999px; padding:2px 8px; background:var(--primary); color:#fff; flex:0 0 auto}
.house-item .h-role{font-size:10.5px; color:var(--faint); flex:0 0 auto}
.house-empty{padding:14px; text-align:center; color:var(--faint); font-size:12.5px; border:1px dashed #d5d9e0; border-radius:10px}

/* ---------- 无房子引导页 ---------- */
.onboard{min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px}
.onboard-card{
  width:100%; max-width:420px; background:var(--panel); border:1px solid var(--line);
  border-radius:18px; padding:30px 26px 26px; text-align:center;
  box-shadow:0 2px 8px rgba(16,24,40,.05), 0 20px 48px -24px rgba(16,24,40,.25);
}
.onboard-mark{font-size:40px; line-height:1}
.onboard-card h1{margin:12px 0 8px; font-size:19px; font-weight:650; letter-spacing:-.3px}
.onboard-card > p{margin:0 0 22px; font-size:13px; color:var(--muted); line-height:1.7}
.onboard-block{text-align:left; margin-bottom:6px}
.onboard-block label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:6px; font-weight:500}
.onboard-or{display:flex; align-items:center; gap:10px; margin:16px 0; color:var(--faint); font-size:11.5px}
.onboard-or::before,.onboard-or::after{content:""; flex:1; height:1px; background:var(--line)}
.house-switch, .onboard-card{ -webkit-tap-highlight-color:transparent }

.sep{height:1px; background:var(--line-soft); margin:2px 0}
.data-acts{display:flex; flex-wrap:wrap; gap:8px}

/* ---------- 房子管理 ---------- */
.invite-row{display:flex; gap:6px; align-items:stretch}
.invite-row input{flex:1 1 auto; min-width:0; letter-spacing:.1em; font-variant-numeric:tabular-nums}
.member-list{display:flex; flex-direction:column; gap:6px; border:1px solid var(--line); border-radius:10px; padding:9px; background:#fafbfc}
.member{display:flex; align-items:center; gap:8px; font-size:13px; min-width:0}
.member .m-name{font-weight:500; white-space:nowrap}
.member .m-mail{color:var(--faint); font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.member .m-role{font-size:11px; border-radius:999px; padding:2px 8px; background:var(--primary-soft); color:var(--primary); font-weight:500; flex:0 0 auto}
.member .m-role.me{background:#eef2f8; color:var(--muted)}
.member .m-spacer{flex:1 1 auto; min-width:0}
.member .m-meta{color:var(--faint); font-size:11px; flex:0 0 auto}
.tag-mine{font-size:10.5px; color:var(--faint); background:#f4f5f7; border-radius:6px; padding:1px 6px; flex:0 0 auto}

/* ---------- 提示条 ---------- */
.toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,16px); z-index:200; background:#1f2430; color:#fff; padding:10px 18px; border-radius:999px; font-size:13px; box-shadow:0 12px 30px -10px rgba(16,24,40,.5); opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; max-width:calc(100vw - 40px); text-align:center}
.toast.show{opacity:1; transform:translate(-50%,0)}
.toast.warn{background:#8a3a00}
.toast.err{background:#8a1c1c}

/* ---------- 响应式 ---------- */
@media (max-width:760px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .wrap{padding:14px}
  .topbar-inner{padding:10px 14px; gap:10px}
  .brand-txt span{display:none}
  .btn .btn-label{display:none}
  .btn{padding:8px 11px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:11px}
  .thumb{height:126px}
  .row2{grid-template-columns:1fr}
  .banner{font-size:12.5px; padding:10px 12px}
  .auth{padding:16px}
  .auth-card{padding:22px 20px 18px}
}
@media (max-width:430px){
  .grid{grid-template-columns:1fr 1fr}
  .c-note{display:none}
  .stat .v{font-size:22px}
  .c-acts{gap:4px}
  .c-acts .btn{padding:5px 8px; font-size:12px}
  .act-label{display:none}
}