:root{
  --bg:#0c1020; --bg-elev:#161c2e; --line:#2a3350; --chip:#232b45;
  --primary:#4f6ef7; --primary-l:#6d8cff; --accent:#7c5cff; --cyan:#39d0ff;
  --ink:#e8edf6; --muted:#9ba3b8;
  --green:#2ecc71; --amber:#f0ad4e; --red:#ff6b6b; --progress:#36d6b8;
  --green-bg:#132a20; --amber-bg:#382a14; --red-bg:#3d1b1b;
  --radius:16px; --radius-sm:12px; --shadow:0 2px 14px rgba(0,0,0,.28); --maxw:560px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Roboto,sans-serif;
  background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; line-height:1.6; font-size:14px;
}
#app{ max-width:var(--maxw); margin:0 auto; min-height:100%; min-height:100dvh; display:flex; flex-direction:column; }
.topbar{ position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; padding:16px 18px; background:rgba(12,16,32,.82); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
.brand{ font-weight:800; font-size:18px; background:linear-gradient(135deg,var(--cyan),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sync-btn{ background:var(--chip); color:var(--ink); border:1px solid var(--line); border-radius:999px; padding:7px 16px; font-size:13px; font-weight:600; cursor:pointer; }
.sync-btn:active{ transform:scale(.96); }
.screen{ flex:1; padding:18px; padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
.h-title{ font-size:26px; font-weight:800; margin:0; }
.h-sub{ font-size:13px; color:var(--muted); margin:4px 0 18px; }

.card{ background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }
.hero{ background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); background-image:radial-gradient(120% 120% at 0% 0%, rgba(79,110,247,.18), transparent 60%); }
.hero .label{ color:var(--muted); font-size:14px; }
.hero .num{ font-size:48px; font-weight:900; color:var(--primary-l); margin:2px 0; }
.hero .hint{ color:var(--cyan); font-size:13px; }
.tip{ color:var(--amber); font-size:13px; margin-top:14px; }

.stat-row{ display:flex; gap:12px; margin-top:16px; }
.stat{ flex:1; background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px; text-align:center; }
.stat.hot{ border-color:var(--amber); background:linear-gradient(180deg, var(--amber-bg), var(--bg-elev)); }
.stat .s-num{ font-size:28px; font-weight:800; color:var(--ink); }
.stat.hot .s-num{ color:var(--amber); }
.stat .s-lab{ font-size:12px; color:var(--muted); margin-top:2px; }

.progress{ margin:4px 0 14px; }
.progress-bar{ height:10px; background:var(--line); border-radius:6px; overflow:hidden; }
.progress-fill{ height:100%; background:linear-gradient(90deg,var(--primary),var(--progress)); border-radius:6px; transition:width .4s; }
.progress-meta{ font-size:12px; color:var(--muted); margin-top:6px; }

.filters{ display:flex; gap:8px; margin-bottom:16px; }
.filter{ flex:1; background:var(--bg-elev); border:1px solid var(--line); border-radius:999px; padding:8px 4px; font-size:13px; color:var(--muted); cursor:pointer; text-align:center; transition:.15s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.filter.active{ background:rgba(79,110,247,.16); border-color:var(--primary); color:var(--primary-l); font-weight:700; }

.todo-add{ background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px; margin-bottom:16px; }
.todo-add .line{ display:flex; gap:8px; margin-top:8px; }
.input{ flex:1; width:100%; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:11px 14px; font-size:15px; outline:none; font-family:inherit; }
.input:focus{ border-color:var(--primary); }
.date-input{ color-scheme:dark; }
.add-btn{ width:48px; border:none; border-radius:10px; background:linear-gradient(135deg,var(--primary),var(--accent)); color:#04121a; font-size:22px; font-weight:800; cursor:pointer; flex:none; }
.add-btn:active{ transform:scale(.96); }

.item{ display:flex; align-items:flex-start; gap:11px; padding:12px; border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:8px; background:var(--bg-elev); animation:itemIn .2s ease; }
.item:hover{ border-color:#3a466b; }
.item.done{ opacity:.6; background:#111627; }
.item.done .ct{ text-decoration:line-through; color:var(--muted); }
@keyframes itemIn{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }
.cb{ width:20px; height:20px; margin-top:2px; accent-color:var(--green); flex:none; cursor:pointer; }
.body{ flex:1; min-width:0; }
.ct{ font-size:15px; line-height:1.4; word-break:break-word; }
.tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.tag{ font-size:11px; padding:2px 8px; border-radius:8px; background:var(--chip); color:var(--muted); }
.tag.dead{ background:var(--amber-bg); color:var(--amber); }
.tag.warn{ background:var(--red-bg); color:var(--red); }
.tag.day{ background:#2d2450; color:#b9a8ff; }
.tag.safe{ background:var(--green-bg); color:var(--green); }
.ops{ display:flex; flex:none; }
.op-btn{ background:none; border:none; color:var(--muted); font-size:13px; cursor:pointer; padding:4px 6px; border-radius:8px; }
.op-btn:hover{ background:var(--chip); }
.op-btn.del{ color:var(--red); }

.placeholder{ background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius); padding:44px 18px; text-align:center; color:var(--muted); }

.badge{ display:inline-block; font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; margin-left:8px; }
.badge.doing{ background:rgba(57,208,255,.16); color:var(--cyan); }
.badge.soon{ background:rgba(240,173,78,.16); color:var(--amber); }
.badge.done{ background:var(--green-bg); color:var(--green); }

.tabbar{ position:static; z-index:10; display:flex; overflow-x:auto; background:rgba(22,28,46,.92); backdrop-filter:blur(14px); border-top:1px solid var(--line); padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 14px); }
.tabbar::-webkit-scrollbar{ display:none; }
.tabbar.mainbar{ justify-content:space-around; }
.tabbar.familybar{ justify-content:flex-start; }
.tab{ flex:1 1 0; min-width:0; background:none; border:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 0; color:var(--muted); font-size:10px; }
.tab span{ width:18px; height:18px; display:flex; align-items:center; justify-content:center; }
.tab span svg{ width:100%; height:100%; }
.tab label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%; text-align:center; }
.tab.active{ color:var(--primary-l); }
.tabbar.familybar .tab.back{ flex:0 0 64px; }
.tabbar.familybar .tab.fsub{ flex:1 1 0; min-width:0; }

/* 移动端：底部导航栏固定常驻视口底部，不随页面长短滑动；桌面端在 @media(min-width:860px) 中隐藏 */
.nav-host{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
}
.nav-host .tabbar{
  max-width:var(--maxw); margin:0 auto;
  box-shadow:0 -4px 18px rgba(0,0,0,.35);
}

.toast{ position:fixed; left:50%; bottom:calc(92px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(20px); background:var(--bg-elev); border:1px solid var(--line); color:var(--ink); padding:10px 18px; border-radius:999px; font-size:13px; opacity:0; pointer-events:none; transition:.25s; box-shadow:var(--shadow); }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* 日程日历 */
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.cal-nav{ width:36px; height:36px; border-radius:10px; background:var(--bg-elev); border:1px solid var(--line); color:var(--ink); font-size:18px; cursor:pointer; flex:none; }
.cal-nav:active{ transform:scale(.94); }
.cal-title{ font-size:16px; font-weight:700; }
.cal-week{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:6px; }
.cal-week span{ text-align:center; font-size:11px; color:var(--muted); }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-cell{ aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; position:relative; border-radius:10px; font-size:13px; color:var(--ink); background:var(--bg-elev); border:1px solid transparent; cursor:pointer; }
.cal-cell.empty{ background:none; cursor:default; }
.cal-cell.today{ border-color:var(--primary); color:var(--primary-l); font-weight:700; }
.cal-cell.sel{ background:rgba(79,110,247,.18); border-color:var(--primary); }
.cal-cell .dot{ position:absolute; bottom:6px; width:5px; height:5px; border-radius:50%; background:var(--progress); }
.day-title{ font-size:14px; font-weight:700; margin:18px 0 10px; }
.ev-time{ display:inline-block; font-size:12px; color:var(--primary-l); font-weight:700; margin-right:4px; }
.time-input{ color-scheme:dark; max-width:140px; flex:none; }

/* 家庭成员 */
.sec-title{ font-size:13px; font-weight:700; color:var(--muted); margin:16px 0 10px; }
.member{ display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:8px; background:var(--bg-elev); }
.avatar{ width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--accent)); display:flex; align-items:center; justify-content:center; font-size:22px; flex:none; }
.m-body{ flex:1; min-width:0; }
.m-name{ font-size:15px; font-weight:600; display:flex; align-items:center; gap:8px; }
.m-sub{ font-size:12px; color:var(--muted); margin-top:2px; }
.primary-btn{ width:100%; margin-top:14px; padding:13px; border:none; border-radius:12px; background:linear-gradient(135deg,var(--primary),var(--accent)); color:#04121a; font-size:15px; font-weight:800; cursor:pointer; }
.primary-btn:active{ transform:scale(.98); }
.house-card{ margin-bottom:6px; }
.house-name{ font-size:20px; font-weight:800; }
.invite-box{ margin-top:12px; background:var(--bg); border:1px dashed var(--line); border-radius:12px; padding:14px; }
.invite-code{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:18px; font-weight:800; letter-spacing:2px; color:var(--primary-l); text-align:center; }

/* 浅色主题 */
[data-theme="light"]{
  --bg:#f4f6fb; --bg-elev:#ffffff; --line:#e6eaf2; --chip:#eef1fb;
  --ink:#1f2733; --muted:#6b7686; --primary:#4f6ef7; --primary-l:#3b56d6;
  --accent:#7c5cff; --cyan:#39d0ff; --green:#16a34a; --amber:#d97706; --red:#dc2626; --progress:#36d6b8;
  --green-bg:#e9f8ef; --amber-bg:#fff5e6; --red-bg:#fdeaea;
}
[data-theme="light"] .topbar{ background:rgba(244,246,251,.85); }
[data-theme="light"] .tabbar{ background:rgba(255,255,255,.92); }

/* 专注计时器 */
.focus-card{ background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-top:16px; text-align:center; box-shadow:var(--shadow); }
.focus-head{ display:flex; justify-content:space-between; align-items:center; font-size:13px; margin-bottom:12px; }
.focus-head .focus-stat{ color:var(--muted); font-size:12px; }
.timer-wrap{ position:relative; width:160px; height:160px; margin:0 auto; }
.timer-svg{ width:100%; height:100%; transform:rotate(-90deg); }
.timer-bg{ fill:none; stroke:var(--line); stroke-width:8; }
.timer-ring{ fill:none; stroke:var(--primary); stroke-width:8; stroke-linecap:round; transition:stroke-dashoffset .3s linear; }
.timer-center{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.timer-text{ font-size:30px; font-weight:800; font-variant-numeric:tabular-nums; }
.focus-btns{ display:flex; gap:10px; margin-top:14px; }
.focus-btns .filter{ flex:1; }

/* 周视图 */
.week-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.week-cell{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 2px; border-radius:10px; background:var(--bg-elev); border:1px solid transparent; cursor:pointer; }
.week-cell .wd{ font-size:10px; color:var(--muted); }
.week-cell.today{ border-color:var(--primary); }
.week-cell.sel{ background:rgba(79,110,247,.18); border-color:var(--primary); }
.week-cell .dn{ font-size:15px; font-weight:600; }
.week-cell .dot{ width:5px; height:5px; border-radius:50%; background:var(--progress); }

/* 番茄钟时长步进 */
.focus-len{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:14px; }
.len-btn{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:var(--bg); color:var(--primary-l); font-size:20px; font-weight:800; cursor:pointer; flex:none; line-height:1; }
.len-btn:active{ transform:scale(.92); }
.len-label{ font-size:15px; font-weight:700; min-width:74px; text-align:center; }

/* 日历内联事件 */
.cal-cell.fill{ aspect-ratio:auto; min-height:62px; align-items:flex-start; justify-content:flex-start; flex-direction:column; padding:4px 5px; gap:1px; }
.cal-cell.fill .dn{ font-size:12px; align-self:flex-start; }
.cal-ev{ font-size:10px; line-height:1.25; color:var(--progress); width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-ev.more{ color:var(--muted); }
.week-cell.fill{ align-items:stretch; padding:6px 2px; gap:2px; justify-content:flex-start; }
.week-cell.fill .dn{ align-self:center; }

/* 四象限 */
.matrix{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:4px; }
.quad{ background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px; min-height:120px; border-top:3px solid var(--line); }
.quad.q1{ border-top-color:var(--red); }
.quad.q2{ border-top-color:var(--primary); }
.quad.q3{ border-top-color:var(--amber); }
.quad.q4{ border-top-color:var(--muted); }
.q-head{ display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:700; margin-bottom:8px; }
.q-tag{ font-size:10px; color:var(--muted); font-weight:600; }
.q-empty{ color:var(--muted); font-size:12px; }
.q-item{ background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:8px; margin-bottom:6px; }
.q-item.done .q-ct{ text-decoration:line-through; color:var(--muted); opacity:.6; }
.q-ct{ font-size:13px; line-height:1.35; word-break:break-word; cursor:pointer; }
.q-toggles{ display:flex; gap:6px; margin-top:7px; }
.q-toggle{ font-size:11px; padding:3px 8px; border-radius:8px; border:1px solid var(--line); background:var(--chip); color:var(--muted); cursor:pointer; }
.q-toggle.on{ color:#fff; border-color:transparent; }
.q-toggle.imp.on{ background:var(--primary); }
.q-toggle.urg.on{ background:var(--red); }

/* 笔记 */
.note{ background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px; margin-bottom:10px; cursor:pointer; }
.note:active{ transform:scale(.99); }
.note-title{ font-size:15px; font-weight:700; }
.note-snippet{ font-size:13px; color:var(--muted); margin-top:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.note-time{ font-size:11px; color:var(--muted); margin-top:6px; }
.back-btn{ background:none; border:none; color:var(--primary-l); font-size:15px; font-weight:700; cursor:pointer; padding:0 0 12px; }
.note-editor-area{ width:100%; min-height:240px; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:12px; padding:12px; font-size:15px; line-height:1.6; font-family:inherit; outline:none; resize:vertical; margin-top:10px; }
.del-btn{ color:var(--red) !important; }

/* ===== 页面切换 / 列表入场动画 ===== */
.screen > *{ animation:pageIn .28s ease both; }
@keyframes pageIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
.item,.note,.member,.stat,.quad{ animation:itemIn .26s ease both; }
@keyframes itemIn{ from{opacity:0; transform:translateY(8px) scale(.985);} to{opacity:1; transform:none;} }

/* 主题 / 卡片平滑过渡 */
body{ transition:background-color .35s ease, color .35s ease; }
.topbar,.tabbar,.card,.hero,.item,.note,.member,.stat,.filter,.cal-cell,.week-cell,.focus-card,.todo-add{ transition:background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .2s ease; }

/* 底部 Tab 滑动指示 + 图标放大 */
.tab{ position:relative; }
.tab span{ transition:transform .2s ease; }
.tab.active span{ transform:scale(1.18); }
.tab::after{ content:''; position:absolute; bottom:3px; left:50%; transform:translateX(-50%); width:22px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--cyan),var(--accent)); opacity:0; transition:opacity .2s ease; }
.tab.active::after{ opacity:1; }

/* 按钮 / 控件微交互 */
.add-btn,.sync-btn,.primary-btn,.len-btn,.cal-nav,.filter,.op-btn{ transition:transform .12s ease, background-color .2s ease, border-color .2s ease, color .2s ease; }
.add-btn:active,.primary-btn:active,.sync-btn:active,.cal-nav:active,.len-btn:active{ transform:scale(.94); }
.filter:active{ transform:scale(.96); }
.cb{ transition:transform .12s ease; cursor:pointer; }
.cb:active{ transform:scale(.82); }
.item.done{ transition:opacity .25s ease, background-color .25s ease; }

/* 番茄钟完成脉冲 */
@keyframes pulse{ 0%{transform:scale(1);} 40%{transform:scale(1.06);} 100%{transform:scale(1);} }
.timer-wrap.pulse{ animation:pulse .9s ease; }

/* 空状态浮动 */
.placeholder .ph-emoji{ display:inline-block; animation:floaty 3s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

/* ===== 自定义弹窗 Modal ===== */
.modal-mask{ position:fixed; inset:0; background:rgba(6,9,18,.6); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:24px; z-index:50; animation:maskIn .2s ease; }
@keyframes maskIn{ from{opacity:0;} to{opacity:1;} }
.modal{ width:100%; max-width:340px; background:var(--bg-elev); border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:0 20px 60px rgba(0,0,0,.5); animation:modalIn .26s cubic-bezier(.2,.8,.3,1.2); }
@keyframes modalIn{ from{opacity:0; transform:translateY(16px) scale(.94);} to{opacity:1; transform:none;} }
.modal h3{ margin:0 0 14px; font-size:17px; }
.modal .input{ margin-bottom:12px; }
.modal-msg{ color:var(--muted); font-size:14px; line-height:1.6; margin-bottom:6px; }
.modal-btns{ display:flex; gap:10px; margin-top:8px; }
.modal-btns .filter{ flex:1; }

/* ===== 登录 / 注册 ===== */
.auth-wrap{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:28px 22px; }
.auth-logo{ font-size:30px; font-weight:900; background:linear-gradient(135deg,var(--cyan),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:4px; }
.auth-sub{ color:var(--muted); font-size:14px; margin-bottom:24px; }
.auth-card{ background:var(--bg-elev); border:1px solid var(--line); border-radius:20px; padding:22px; box-shadow:var(--shadow); }
.auth-tabs{ display:flex; gap:6px; background:var(--chip); padding:4px; border-radius:12px; margin-bottom:18px; }
.auth-tabs button{ flex:1; border:none; background:none; color:var(--muted); padding:10px; border-radius:9px; font-size:14px; font-weight:700; cursor:pointer; }
.auth-tabs button.on{ background:var(--bg-elev); color:var(--primary-l); box-shadow:var(--shadow); }
.auth-field{ position:relative; margin-bottom:12px; }
.auth-field .input{ padding-right:42px; }
.pw-toggle{ position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--muted); cursor:pointer; font-size:13px; }
.auth-err{ color:var(--red); font-size:13px; min-height:18px; margin:2px 0 10px; }
.auth-hint{ color:var(--muted); font-size:12px; text-align:center; margin-top:16px; line-height:1.6; }

/* ===== 桌面侧边栏 + 响应式 ===== */
.layout{ flex:1; display:flex; max-width:var(--maxw); margin:0 auto; width:100%; }
.sidebar{ display:none; }
@media (min-width: 860px){
  #app{ max-width:none; }
  .layout{ max-width:1180px; padding:18px; gap:18px; }
  .sidebar{ display:flex; flex-direction:column; width:220px; flex:none; gap:4px; padding-top:6px; }
  .sidebar .nav-item{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; color:var(--muted); font-size:15px; font-weight:600; cursor:pointer; border:1px solid transparent; }
  .sidebar .nav-item:hover{ background:var(--bg-elev); }
  .sidebar .nav-item.active{ background:var(--bg-elev); color:var(--primary-l); border-color:var(--line); }
  .sidebar .nav-item svg{ width:22px; height:22px; flex:none; }
  .sidebar-group{ font-size:12px; color:var(--muted); padding:14px 14px 6px; font-weight:700; letter-spacing:.5px; }
  .nav-host{ display:none !important; } /* 桌面隐藏底部栏 */
  .screen{ padding:8px 8px 40px; }
}

/* ===== 家庭空间 ===== */
.fam-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.home-switch{ background:var(--bg-elev); border:1px solid var(--line); color:var(--ink); border-radius:10px; padding:9px 12px; font-size:14px; font-weight:700; cursor:pointer; max-width:60%; }
.home-switch:active{ transform:scale(.98); }
.fam-home-card{ background:linear-gradient(135deg, rgba(79,110,247,.22), rgba(124,92,255,.12)); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-bottom:16px; }
.fam-home-name{ font-size:22px; font-weight:800; display:flex; align-items:center; gap:8px; }
.fam-home-meta{ color:var(--muted); font-size:13px; margin-top:4px; }
.fam-empty{ text-align:center; padding:40px 18px; color:var(--muted); }
.fam-actions{ display:flex; gap:10px; margin-top:14px; }
.fam-actions .filter{ flex:1; }

/* 家庭底部导航（返回 + 子功能） */
.familybar{ display:flex; align-items:stretch; gap:2px; overflow-x:auto; }
.familybar .tab.back{ flex:none; width:64px; color:var(--primary-l); border-right:1px solid var(--line); }
.familybar .tab.fsub{ flex:1; min-width:60px; }

/* ===== 公告 ===== */
.announce{ background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px; margin-bottom:10px; animation:itemIn .26s ease both; }
.announce.pinned{ border-color:var(--amber); }
.announce-title{ font-size:15px; font-weight:700; display:flex; align-items:center; gap:6px; }
.announce-pin{ font-size:11px; background:var(--amber-bg); color:var(--amber); padding:2px 8px; border-radius:8px; font-weight:700; }
.announce-body{ font-size:13px; color:var(--ink); margin-top:6px; white-space:pre-wrap; line-height:1.6; }
.announce-meta{ font-size:11px; color:var(--muted); margin-top:8px; }
.announce .ops{ justify-content:flex-end; margin-top:8px; }

/* ===== 定位 ===== */
.loc-map{ background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius); padding:12px; margin-bottom:14px; }
/* 真地图（Leaflet） */
.loc-map-tools{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.loc-map-tools .filters.sm{ margin:0; flex-wrap:nowrap; }
.loc-map-tools .filters.sm .filter{ padding:5px 10px; font-size:12px; }
.loc-map-tools #loc-fit{ flex:none; padding:5px 10px; font-size:12px; }
.loc-mapbox{ height:240px; width:100%; border-radius:10px; overflow:hidden; background:var(--bg); border:1px solid var(--line); z-index:0; }
.loc-map-note{ font-size:11px; color:var(--muted); margin-top:8px; line-height:1.5; }
/* 自定义头像大头针（避免依赖 Leaflet 默认图片资源） */
.loc-pin-wrap{ background:none; border:0; }
.loc-pin{ position:relative; width:32px; height:40px; display:flex; align-items:flex-start; justify-content:center; }
.loc-pin span{ display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; font-size:12px; font-weight:700; color:#fff; background:var(--primary-l); border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.35); }
.loc-pin.me span{ background:var(--cyan); color:#06202b; }
.loc-pin:after{ content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); border-left:6px solid transparent; border-right:6px solid transparent; border-top:9px solid #fff; filter:drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.leaflet-popup-content{ margin:10px 12px; font-size:13px; line-height:1.6; }
.leaflet-popup-content .loc-pop{ font-weight:700; }
.leaflet-popup-content .loc-pop-addr{ color:var(--ink); }
.leaflet-popup-content .loc-pop-addr.muted{ color:var(--muted); font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11px; }
.leaflet-popup-content .loc-pop-coord{ color:var(--muted); font-size:11px; font-family:ui-monospace,Menlo,Consolas,monospace; margin-top:4px; }
.leaflet-container{ font:inherit; background:var(--bg); }
.leaflet-bar a{ background:var(--bg-elev); color:var(--ink); border-bottom-color:var(--line); }
.leaflet-bar a:hover{ background:var(--chip); }
/* 离线降级卡片 */
.loc-fallback{ display:flex; flex-direction:column; gap:8px; }
.loc-fb-tip{ font-size:11px; color:var(--amber); }
.loc-fb-row{ background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:8px 10px; font-size:12px; }
.loc-fb-row b{ font-size:13px; }
.loc-member{ display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:8px; background:var(--bg-elev); }
.loc-addr{ font-size:13px; color:var(--ink); margin-top:2px; line-height:1.45; }
.loc-addr.muted{ color:var(--muted); font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11px; }
.loc-coord{ font-size:11px; color:var(--muted); font-family:ui-monospace,Menlo,Consolas,monospace; }
.loc-time{ font-size:11px; color:var(--muted); margin-top:2px; }

/* ===== 账号切换（演示多人共享） ===== */
.demo-banner{ background:linear-gradient(135deg, rgba(240,173,78,.16), rgba(255,107,107,.10)); border:1px solid var(--amber); border-radius:12px; padding:12px 14px; font-size:12px; color:var(--amber); margin-bottom:16px; line-height:1.6; }
.acct-item{ display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:8px; background:var(--bg-elev); cursor:pointer; }
.acct-item.cur{ border-color:var(--primary); }
.acct-item .m-sub{ font-size:11px; }

/* 顶部退出 */
.logout-link{ background:var(--chip); color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:7px 14px; font-size:13px; font-weight:600; cursor:pointer; }
.logout-link:active{ transform:scale(.96); }

.loading{ text-align:center; color:var(--muted); padding:40px; font-size:14px; }

/* ===== 家庭状态条（默认显示每个成员状态） ===== */
.fam-status{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.fam-stat-item{ display:flex; align-items:center; gap:8px; background:var(--bg-elev); border:1px solid var(--line); border-radius:999px; padding:5px 12px 5px 5px; }
.avatar.sm{ width:28px; height:28px; font-size:14px; border-radius:50%; }
.fam-stat-meta{ display:flex; flex-direction:column; line-height:1.2; }
.fam-stat-name{ font-size:12px; font-weight:600; display:flex; align-items:center; gap:4px; }
.fam-stat-chip{ font-size:11px; padding:1px 8px; border-radius:999px; background:rgba(57,208,255,.16); color:var(--cyan); }
.fam-stat-chip.off{ background:var(--chip); color:var(--muted); }
.fam-rel{ font-size:10px; padding:1px 6px; border-radius:6px; background:var(--amber-bg); color:var(--amber); }

/* ===== 我的设置卡 ===== */
.set-card{ background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px; margin-bottom:12px; }
.set-t{ font-size:13px; font-weight:700; color:var(--muted); margin-bottom:10px; }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.rel-chip{ background:var(--chip); border:1px solid var(--line); color:var(--ink); border-radius:999px; padding:6px 12px; font-size:13px; cursor:pointer; }
.rel-chip:active{ transform:scale(.96); }
.status-chip{ background:var(--chip); border:1px solid var(--line); color:var(--ink); border-radius:999px; padding:6px 12px; font-size:13px; cursor:pointer; }
.status-chip.on{ background:rgba(57,208,255,.18); border-color:var(--cyan); color:var(--cyan); font-weight:700; }
.status-chip:active{ transform:scale(.96); }

/* ===== 情况页 ===== */
.line{ display:flex; gap:8px; }
.line .input{ flex:1; min-width:0; }
.sit-target{ color:var(--cyan); font-weight:700; }
.sit-sep{ color:var(--muted); margin:0 2px; }
.sit-content{ color:var(--ink); }
.m-name .sit-content{ font-weight:400; }

/* ===== 权限管理 ===== */
.perm-list{ display:flex; flex-direction:column; gap:10px; }
.perm-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:10px 14px; cursor:pointer; }
.perm-row b{ font-size:14px; }
.perm-row small{ font-size:11px; }
.perm-cb{ width:20px; height:20px; accent-color:var(--green); flex:none; cursor:pointer; }

/* ===== 定位设置（自动共享 + 权限提示） ===== */
.loc-set-card{ background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px; margin-bottom:14px; }
.loc-set-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 0; }
.loc-set-t{ font-size:14px; font-weight:600; }
.loc-set-s{ font-size:11px; color:var(--muted); margin-top:2px; font-weight:400; }
.loc-set-card .input.sm{ width:90px; flex:none; text-align:center; }
.loc-perm-tip{ margin-top:10px; background:var(--amber-bg); border:1px solid var(--amber); color:var(--amber); border-radius:10px; padding:10px 12px; font-size:12px; line-height:1.5; }
/* iOS 风格开关 */
.switch{ position:relative; display:inline-block; width:46px; height:26px; flex:none; }
.switch input{ opacity:0; width:0; height:0; }
.switch .slider{ position:absolute; cursor:pointer; inset:0; background:var(--line); border-radius:999px; transition:.2s; }
.switch .slider:before{ content:''; position:absolute; height:20px; width:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; }
.switch input:checked + .slider{ background:var(--primary); }
.switch input:checked + .slider:before{ transform:translateX(20px); }

/* ===== Markdown 渲染 ===== */
.md{ font-size:14px; line-height:1.7; word-break:break-word; }
.md .md-h{ font-weight:800; margin:10px 0 6px; line-height:1.3; }
.md .md-h1{ font-size:20px; } .md .md-h2{ font-size:18px; } .md .md-h3{ font-size:16px; } .md .md-h4,.md .md-h5,.md .md-h6{ font-size:14px; }
.md .md-p{ margin:6px 0; }
.md .md-list{ margin:6px 0; padding-left:22px; }
.md .md-list li{ margin:3px 0; }
.md .md-quote{ margin:8px 0; padding:6px 12px; border-left:3px solid var(--primary); background:rgba(79,110,247,.08); color:var(--muted); border-radius:0 8px 8px 0; }
.md .md-pre{ background:#0a0e1c; border:1px solid var(--line); border-radius:8px; padding:10px 12px; overflow:auto; font-size:12px; font-family:ui-monospace,Menlo,Consolas,monospace; white-space:pre-wrap; }
.md code{ background:var(--chip); padding:1px 5px; border-radius:5px; font-size:12px; font-family:ui-monospace,Menlo,Consolas,monospace; }
.md a{ color:var(--cyan); }
.announce-body.md{ white-space:normal; }

/* ===== 议题 ===== */
.topic{ background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px; margin-bottom:12px; animation:itemIn .26s ease both; }
.topic-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.topic-type{ font-size:11px; color:var(--muted); margin-left:6px; }
.topic-title{ font-size:16px; font-weight:700; line-height:1.45; }
.topic-desc{ font-size:13px; color:var(--muted); margin-top:4px; white-space:pre-wrap; }
.topic-meta{ font-size:11px; color:var(--muted); margin-top:10px; }
.topic .ops{ justify-content:flex-end; margin-top:0; }
.tp-types{ display:flex; gap:6px; flex-wrap:wrap; }
.tp-types .filter{ flex:1; padding:7px 6px; font-size:12px; }

/* 选择题 */
.tp-opt{ border:1px solid var(--line); border-radius:10px; padding:9px 11px; margin-top:8px; cursor:pointer; transition:border-color .16s, background .16s; }
.tp-opt:active{ transform:scale(.99); }
.tp-opt.picked{ border-color:var(--primary); background:rgba(79,110,247,.12); }
.tp-opt-line{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14px; }
.tp-opt-num{ font-size:12px; color:var(--muted); flex:none; }
.tp-track{ height:6px; background:var(--chip); border-radius:999px; margin-top:7px; overflow:hidden; }
.tp-fill{ height:100%; background:linear-gradient(90deg,var(--primary),var(--primary-l)); border-radius:999px; transition:width .3s ease; }

/* 两选项 PK */
.pk-wrap{ margin-top:10px; }
.pk-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; font-size:14px; }
.pk-row:first-child{ margin-top:0; }
.pk-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pk-num{ font-size:12px; font-weight:700; flex:none; }
.pk-num.red, .pk-fill.red{ color:var(--red); }
.pk-num.blue{ color:var(--cyan); }
.pk-track{ height:12px; background:var(--chip); border-radius:999px; margin-top:5px; overflow:hidden; }
.pk-fill{ height:100%; border-radius:999px; transition:width .35s ease; }
.pk-fill.red{ background:linear-gradient(90deg,#ff6b6b,#ff9a8b); }
.pk-fill.blue{ background:linear-gradient(90deg,#39d0ff,#6d8cff); }
.pk-btns{ display:flex; gap:8px; margin-top:12px; }
.pk-btns .pk-btn{ flex:1; font-weight:700; }
.pk-btn.red.active{ background:var(--red-bg); border-color:var(--red); color:var(--red); }
.pk-btn.blue.active{ background:rgba(57,208,255,.14); border-color:var(--cyan); color:var(--cyan); }

/* 开放式问答 */
.tp-answers{ margin-top:10px; }
.tp-ans{ border-left:2px solid var(--line); padding:4px 0 4px 10px; margin-top:8px; font-size:13px; }
.tp-ans b{ display:block; font-size:12px; color:var(--muted); font-weight:600; }
.tp-ans span{ white-space:pre-wrap; }

/* ===== 意见反馈工单 ===== */
.fb-item{ background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px; margin-bottom:10px; animation:itemIn .26s ease both; }
.fb-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.fb-who{ font-size:13px; font-weight:600; }
.fb-time{ font-size:11px; color:var(--muted); margin-left:auto; }
.fb-sit{ font-size:14px; margin-top:8px; white-space:pre-wrap; line-height:1.6; }
.fb-err-box{ margin-top:8px; }
.fb-err-box b{ font-size:11px; color:var(--muted); }
.fb-err-box pre{ background:#0a0e1c; border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:12px; font-family:ui-monospace,Menlo,Consolas,monospace; white-space:pre-wrap; overflow:auto; margin:4px 0 0; max-height:160px; }
.fb-other{ font-size:12px; color:var(--muted); margin-top:6px; word-break:break-all; }
.fb-item .ops{ justify-content:flex-end; margin-top:10px; }

/* ===== 运行时错误提醒条 ===== */
.err-bar{ position:fixed; left:50%; transform:translateX(-50%) translateY(140%); bottom:calc(78px + env(safe-area-inset-bottom)); z-index:60;
  display:none; align-items:center; gap:10px; max-width:min(560px, calc(100vw - 24px));
  background:var(--red-bg); border:1px solid var(--red); color:var(--ink);
  border-radius:999px; padding:9px 12px 9px 16px; box-shadow:0 6px 24px rgba(0,0,0,.4);
  transition:transform .28s cubic-bezier(.2,.9,.3,1); }
.err-bar.show{ display:flex; transform:translateX(-50%) translateY(0); }
.err-bar-txt{ font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.err-bar-btn{ flex:none; background:transparent; border:1px solid var(--red); color:var(--red); border-radius:999px; padding:4px 12px; font-size:12px; font-weight:700; cursor:pointer; }
.err-bar-btn:active{ transform:scale(.95); }
.err-bar-x{ flex:none; background:transparent; border:none; color:var(--muted); font-size:15px; cursor:pointer; padding:2px 4px; line-height:1; }
.err-pre{ background:#0a0e1c; border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:12px; font-family:ui-monospace,Menlo,Consolas,monospace; white-space:pre-wrap; overflow:auto; max-height:220px; margin-top:8px; }

/* ===== 管理后台（隐蔽入口） ===== */
.admin-wrap{ animation:itemIn .26s ease both; }
.admin-head{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px;
  box-shadow:var(--shadow); background-image:radial-gradient(120% 140% at 0% 0%, rgba(124,92,255,.22), transparent 62%); }
.admin-title{ font-size:20px; font-weight:800; }
.admin-sub{ font-size:12px; color:var(--muted); margin-top:2px; }
.admin-tabs{ display:flex; gap:8px; margin:14px 0 2px; }
.admin-tabs .filter{ flex:1; padding:8px 6px; }
.adm-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:14px; }
.adm-card{ background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; }
.adm-card-n{ font-size:26px; font-weight:900; line-height:1.15;
  background:linear-gradient(135deg,var(--cyan),var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.adm-card-l{ font-size:12px; color:var(--muted); margin-top:2px; }
.adm-quick{ display:flex; gap:8px; flex-wrap:wrap; }
.adm-quick .filter{ flex:1; }
.adm-alert{ margin-top:14px; background:var(--amber-bg); border:1px solid var(--amber); color:var(--amber); border-radius:var(--radius-sm); padding:10px 14px; font-size:13px; font-weight:600; }
.adm-ok{ margin-top:14px; background:var(--green-bg); border:1px solid var(--green); color:var(--green); border-radius:var(--radius-sm); padding:10px 14px; font-size:13px; font-weight:600; }
.adm-list{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.adm-row{ display:flex; align-items:center; gap:10px; background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; }
.adm-row-main{ flex:1; min-width:0; }
.adm-row-t{ font-size:14px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.adm-row-s{ font-size:11px; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.adm-fb .fb-mail{ font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }