/* Filter chips row */
.filter-row {
  padding: 8px 14px 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 16px;
  font-size: 12px;
  background: #F0F0F0;
  color: #666;
  cursor: pointer;
  transition: all .15s;
  user-select: none;
  white-space: nowrap;
  border: 1px solid transparent;
}
.filter-chip:active {
  transform: scale(.95);
}
.filter-chip.active {
  background: var(--blue-light);
  color: var(--blue);
  border-color: var(--blue);
  font-weight: 600;
}
.filter-chip .arrow {
  font-size: 8px;
  margin-left: 2px;
}

/* Filter panel (dropdown) */
.filter-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.35);
  z-index: 100;
  animation: fadeIn .2s ease;
}
.filter-panel {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-radius: 16px 16px 0 0;
  z-index: 101;
  padding: 16px 20px env(safe-area-inset-bottom,20px);
  max-height: 55vh;
  overflow-y: auto;
  animation: up .25s ease;
}
.filter-panel h4 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #1F2937;
}
.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.filter-option {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  background: #F3F4F6;
  color: #4B5563;
  cursor: pointer;
  transition: all .15s;
  user-select: none;
  border: 1px solid transparent;
}
.filter-option:active {
  transform: scale(.96);
}
.filter-option.active {
  background: var(--blue-light);
  color: var(--blue);
  border-color: var(--blue);
  font-weight: 600;
}
.filter-panel-actions {
  display: flex;
  gap: 10px;
  padding-top: 4px;
}
.filter-panel-actions div {
  flex: 1;
  text-align: center;
  padding: 10px;
  border-radius: 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.filter-panel-actions .reset-btn {
  background: #F3F4F6;
  color: #6B7280;
}
.filter-panel-actions .confirm-btn {
  background: var(--blue);
  color: #fff;
}
.filter-panel-actions div:active {
  opacity: .8;
}
[data-theme="dark"] .filter-panel {
  background: #1E293B;
}
[data-theme="dark"] .filter-panel h4 {
  color: #E2E8F0;
}
[data-theme="dark"] .filter-option {
  background: #334155;
  color: #94A3B8;
}
[data-theme="dark"] .filter-option.active {
  background: rgba(255,102,0,.15);
  color: #FF9944;
  border-color: #FF9944;
}
[data-theme="dark"] .filter-chip {
  background: #334155;
  color: #94A3B8;
}
[data-theme="dark"] .filter-chip.active {
  background: rgba(255,102,0,.15);
  color: #FF9944;
  border-color: #FF9944;
}
[data-theme="dark"] .filter-panel-actions .reset-btn {
  background: #334155;
  color: #94A3B8;
}

/* ===== 🌙 Comprehensive Dark Mode ===== */

/* Page & Content */
[data-theme="dark"] .page,
[data-theme="dark"] .page-content,
[data-theme="dark"] .masonry { background: var(--bg); }

/* Cards */
[data-theme="dark"] .card,
[data-theme="dark"] .g2 .cs,
[data-theme="dark"] .cl,
[data-theme="dark"] .mg,
[data-theme="dark"] .lg,
[data-theme="dark"] .stats-r,
[data-theme="dark"] .cg,
[data-theme="dark"] .tag-r,
[data-theme="dark"] .banner-strip,
[data-theme="dark"] .msg-top,
[data-theme="dark"] .todo-r { background: var(--card-bg); }

/* Text */
[data-theme="dark"] .sec-hd h3,
[data-theme="dark"] .cs .tp .t,
[data-theme="dark"] .cl .tp .t,
[data-theme="dark"] .ts .t,
[data-theme="dark"] .todo-it .t,
[data-theme="dark"] .todo-hd { color: var(--text); }

[data-theme="dark"] .cs .c,
[data-theme="dark"] .cs .tgs span,
[data-theme="dark"] .cl .tgs span,
[data-theme="dark"] .cl .bn .l,
[data-theme="dark"] .cg .it .lb,
[data-theme="dark"] .tag-r div,
[data-theme="dark"] .banner-strip .banner-txt,
[data-theme="dark"] .todo-tx .s,
[data-theme="dark"] .pc .txt .s,
[data-theme="dark"] .msi .if .ls,
[data-theme="dark"] .ms-empty .et,
[data-theme="dark"] .cl .cp .nm,
[data-theme="dark"] .bc-item .info .nm,
[data-theme="dark"] .bc-item .info .meta,
[data-theme="dark"] .bc-item .st { color: var(--text-secondary); }

[data-theme="dark"] .cs .ft,
[data-theme="dark"] .todo-ar,
[data-theme="dark"] .msi .if .nm .tm,
[data-theme="dark"] .ms-empty .es,
[data-theme="dark"] .msg-search input::placeholder { color: #64748B; }

/* Borders */
[data-theme="dark"] .msi,
[data-theme="dark"] .mg .it,
[data-theme="dark"] .cl,
[data-theme="dark"] .dialog-panel,
[data-theme="dark"] .set-body .set-item,
[data-theme="dark"] .edit-sheet .er { border-color: var(--border); }

[data-theme="dark"] .bc-item .bar-w { background: #334155; }
[data-theme="dark"] .bc-item .bar-w .bar { background: var(--blue); }

/* Background accent */
[data-theme="dark"] .pc { background: rgba(59,130,246,.08); border-color: #334155; }
[data-theme="dark"] .cl .bn { background: rgba(59,130,246,.08); }
[data-theme="dark"] .todo-it { background: #2A3A4C; }
[data-theme="dark"] .tag-r div.act { background: var(--blue); color: #fff; }

/* Inputs */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .msg-search,
[data-theme="dark"] .wd-sheet .inp { background: var(--input-bg, #334155); color: var(--text); border-color: var(--border); }

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #64748B; }

/* Modals / Overlays */
[data-theme="dark"] .role-sheet,
[data-theme="dark"] .set-panel,
[data-theme="dark"] .edit-sheet,
[data-theme="dark"] .wd-sheet,
[data-theme="dark"] .wd-sheet .qrt { background: var(--card-bg); }

[data-theme="dark"] .role-item:active { background: #2A3A4C; }
[data-theme="dark"] .set-item:active { opacity: .7; }

[data-theme="dark"] .wd-sheet .bal .am { color: var(--blue); }
[data-theme="dark"] .wd-sheet .ch div { background: #334155; color: var(--text-secondary); }
[data-theme="dark"] .wd-sheet .ch div.act { background: rgba(255,102,0,.15); border-color: var(--blue); color: var(--blue); }
[data-theme="dark"] .wd-sheet .gr span { background: #475569; }
[data-theme="dark"] .wd-sheet .qrt { border-color: var(--border); }
[data-theme="dark"] .wd-sheet .qrt .l { color: var(--text-secondary); }

/* Settings / Edit panels */
[data-theme="dark"] .edit-sheet .et { color: var(--text); }
[data-theme="dark"] .edit-sheet .er .el { color: var(--text-secondary); }
[data-theme="dark"] .edit-sheet .er input { color: var(--text); }
[data-theme="dark"] .edit-sheet .er { border-color: var(--border); }
[data-theme="dark"] .edit-close { color: #64748B; }
[data-theme="dark"] .edit-close:hover { color: var(--text-secondary); }
[data-theme="dark"] .set-close { color: #64748B; border-color: var(--border); }
[data-theme="dark"] .set-item span.sa { color: #64748B; }
[data-theme="dark"] .set-lo { border-color: transparent; }

/* Toast */
[data-theme="dark"] .toast-fade { background: rgba(0,0,0,.85); }

/* Invite / CS modals */
[data-theme="dark"] div[style*="background:#fff"]:not([class]) { background: var(--card-bg) !important; }

/* Confirm dialog */
[data-theme="dark"] div[onclick*="confirmAction"] > div,
[data-theme="dark"] div[onclick*="confirmLogout"] > div,
[data-theme="dark"] .set-panel { background: var(--card-bg); }

[data-theme="dark"] button:not(.sf):not(.edit-save):not(.wdb) { border-color: var(--border); background: var(--card-bg); color: var(--text); }

/* Share sheet */
[data-theme="dark"] div[class="overlay"] + .role-sheet,
[data-theme="dark"] .set-panel .set-body,
[data-theme="dark"] .edit-sheet { background: var(--card-bg); }

/* Batch bar */
[data-theme="dark"] #batchBar { background: var(--card-bg); border-color: var(--border); }

/* Footer */
[data-theme="dark"] div[style*="text-align:center;padding:12px"],
[data-theme="dark"] #app-version { color: #64748B !important; background: var(--bg) !important; }

/* Back-to-top */
[data-theme="dark"] #back-top-btn { background: #475569; box-shadow: 0 2px 10px rgba(0,0,0,.4); }

/* Spinner */
[data-theme="dark"] .tk-spinner { border-color: #334155 !important; }

/* Rank tab */
[data-theme="dark"] .rank-tab div { background: #334155; color: var(--text-secondary); }
[data-theme="dark"] .rank-tab div.act { background: var(--blue); color: #fff; }

/* Msg tabs */
[data-theme="dark"] .msg-tabs div { background: #334155; color: var(--text-secondary); }
[data-theme="dark"] .msg-tabs div.act { background: var(--blue); color: #fff; }

/* BS grid */
[data-theme="dark"] .bs { background: var(--card-bg); }

/* Empty state */
[data-theme="dark"] .tk-empty { color: var(--text-secondary); }
[data-theme="dark"] .tk-empty-btn,
[data-theme="dark"] .tk-retry-btn { background: var(--blue); }

/* Error / Loading */
[data-theme="dark"] .tk-error { color: var(--text-secondary); }
[data-theme="dark"] .tk-loading { color: var(--text-secondary); }

/* Profile page injected styles */
[data-theme="dark"] .ph { background: linear-gradient(135deg, #4A1F00, #2E1300); }
[data-theme="dark"] .mg .it { border-color: #334155; }
[data-theme="dark"] .mg .it .sb,
[data-theme="dark"] .mg .it .ar { color: #64748B; }
[data-theme="dark"] .mg .it .tx { color: var(--text); }
[data-theme="dark"] .lg:active { background: #2A3A4C; }
[data-theme="dark"] .set-panel .set-head { background: linear-gradient(135deg, #4A1F00, #2E1300); }
[data-theme="dark"] .set-item { border-color: #334155; }
[data-theme="dark"] .set-item .si-i div:first-child { color: var(--text); }
[data-theme="dark"] .set-item .si-s { color: #64748B; }
[data-theme="dark"] .set-item span.sa,
[data-theme="dark"] .edit-close,
[data-theme="dark"] .set-close { color: #64748B; }
[data-theme="dark"] .edit-overlay,
[data-theme="dark"] .settings-overlay { background: rgba(0,0,0,.6); }
[data-theme="dark"] .edit-sheet .er .el { color: var(--text-secondary); }
[data-theme="dark"] .edit-sheet .er { border-color: #334155; }
[data-theme="dark"] .edit-sheet .er input { color: var(--text); }
[data-theme="dark"] .edit-sheet .er input:disabled { color: #64748B; background: transparent; }

/* Invite modal */
[data-theme="dark"] div[style*="background:#fff;border-radius:16px"],
[data-theme="dark"] div[style*="background:#fff;border-radius:14px"] { background: var(--card-bg) !important; }
[data-theme="dark"] div[style*="border:2px dashed #E5E7EB"] { border-color: #475569 !important; background: #2A3A4C !important; }
[data-theme="dark"] div[style*="width:130px;height:130px;background:#fff"] { background: #1E293B !important; }

/* Customer service modal */
[data-theme="dark"] div[style*="background:#F7F8FA;border-radius:12px"] { background: #2A3A4C !important; }
[data-theme="dark"] div[style*="background:#F7F8FA;border-radius:12px"] div:first-child { color: var(--text) !important; }
[data-theme="dark"] div[onclick*="confirmLogout"] + div,
[data-theme="dark"] div[onclick*="console.log"] + div[onclick] { color: var(--text) !important; }
[data-theme="dark"] button[id="confirmBtn"] { background: var(--blue); }

/* Role picker dark mode (injected by app.js) */
[data-theme="dark"] .role-sheet .t { color: var(--text); }
[data-theme="dark"] .role-sheet .sub { color: var(--text-secondary); }
[data-theme="dark"] .role-item .tx div:first-child { color: var(--text); }
[data-theme="dark"] .role-item .tx div:last-child { color: var(--text-secondary); }
[data-theme="dark"] .role-item { border-color: var(--border); }

/* Smooth theme transition */
* { transition: background-color .2s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:#F7F8FA;color:#1F2937;font-size:14px;padding-bottom:58px;line-height:1.5}:root{--blue:#FF6600;--blue-old:#FF6600;--blue-light:#FFF0E0;--blue-dark:#CC5200;--orange:#FF6600;--green:#00B578;--red:#F5222D;--gray:#6B7280;--gray-light:#9CA3B3;--border:#E5E7EB;--bg:#F7F8FA;--card-bg:#fff;--text:#1F2937;--text-secondary:#6B7280;--shadow:0 1px 4px rgba(0,0,0,.04)}[data-theme="dark"] body,[data-theme="dark"]{background:#0F172A;color:#E2E8F0}[data-theme="dark"]:root{--bg:#0F172A;--card-bg:#1E293B;--border:#334155;--text:#E2E8F0;--text-secondary:#94A3B8;--shadow:0 1px 4px rgba(0,0,0,.2)}[data-theme="dark"] .header{background:linear-gradient(135deg,#4A1F00,#2E1300)}[data-theme="dark"] .tabbar{background:#1E293B;border-color:#334155}[data-theme="dark"] .tabbar div{color:#94A3B8}[data-theme="dark"] .tabbar div.active{color:#FF9944}[data-theme="dark"] .search-box{background:#334155}[data-theme="dark"] .search-box input{color:#E2E8F0}[data-theme="dark"] .search-box input::placeholder{color:#64748B}[data-theme="dark"] .kpi-card,[data-theme="dark"] .kpi-chart{background:#1E293B!important}[data-theme="dark"] .kpi-card .val{color:#E2E8F0}[data-theme="dark"] .bc-item{background:#1E293B!important}[data-theme="dark"] .bc-item .meta{color:#94A3B8}[data-theme="dark"] .ms .b.oth{background:#334155;color:#E2E8F0}[data-theme="dark"] .cht-inp{background:#1E293B;border-color:#334155}[data-theme="dark"] .cht-inp input{background:#334155;color:#E2E8F0}[data-theme="dark"] .ds{background:#1E293B!important}[data-theme="dark"] .dd{color:#94A3B8}[data-theme="dark"] .role-sheet{background:#1E293B}[data-theme="dark"] .role-item{border-color:#334155}[data-theme="dark"] .sec-hd a{color:#FF9944}.header{background:linear-gradient(135deg,var(--blue),var(--blue-dark));color:#fff;padding:14px 16px 20px;border-radius:0 0 24px 24px;position:relative;overflow:hidden}.header::before{content:'';position:absolute;top:-60px;right:-40px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.06)}.header::after{content:'';position:absolute;bottom:-30px;left:-20px;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,.04)}.header-top{display:flex;align-items:center;gap:10px;margin-bottom:12px;position:relative;z-index:1}.header-top .logo{font-size:20px;font-weight:800}.header-top .city{font-size:11px;display:flex;align-items:center;gap:3px;cursor:pointer;background:rgba(255,255,255,.12);padding:3px 10px;border-radius:12px;transition:opacity .15s}.header-top .city:active{opacity:.7}.header-top .acts{display:flex;gap:12px;margin-left:auto;font-size:12px;cursor:pointer;opacity:.85}.search-box{background:#fff;border-radius:24px;padding:9px 14px;display:flex;align-items:center;gap:8px;color:#999;font-size:13px;position:relative;z-index:1}.search-box input{border:none;outline:none;flex:1;font-size:13px;background:transparent;color:#333}.search-box input::placeholder{color:#bbb}.search-box .sf{background:var(--blue);color:#fff;padding:5px 16px;border-radius:18px;font-size:11px;font-weight:600;flex-shrink:0}.search-box .sf:active{opacity:.85;transform:scale(.96)}.page{display:none;min-height:65vh}.page.active{display:block;animation:pageIn .25s ease}@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.sec-hd{display:flex;justify-content:space-between;align-items:center;padding:14px 14px 8px}.sec-hd h3{font-size:16px;font-weight:700}.sec-hd a{font-size:11px;color:var(--blue);text-decoration:none}.tabbar{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border);display:flex;padding:4px 0 env(safe-area-inset-bottom,4px);z-index:20;box-shadow:0 -1px 6px rgba(0,0,0,.04)}@keyframes skel{0%{opacity:.6}50%{opacity:1}100%{opacity:.6}}.skel-wrap{animation:skel 1.2s ease-in-out infinite;padding:16px}.skel-r{display:flex;gap:6px;margin-bottom:12px}.skel-r div{flex:1;height:16px;background:#eee;border-radius:4px}[data-theme="dark"] .skel-r div{background:#334155}.skel-g{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:12px}.skel-g div{height:52px;background:#eee;border-radius:10px}[data-theme="dark"] .skel-g div{background:#334155}.skel-t{display:flex;gap:6px;margin-bottom:10px}.skel-t div{height:28px;width:56px;background:#eee;border-radius:14px}[data-theme="dark"] .skel-t div{background:#334155}.skel-p{height:52px;background:#eee;border-radius:12px;margin-bottom:10px}[data-theme="dark"] .skel-p{background:#334155}.skel-h{height:20px;width:30%;background:#eee;border-radius:4px;margin-bottom:8px}[data-theme="dark"] .skel-h{background:#334155}.skel-2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}.skel-2 div{height:130px;background:#eee;border-radius:12px}[data-theme="dark"] .skel-2 div{background:#334155}.skel-l{margin-bottom:12px}.skel-l div{height:140px;background:#eee;border-radius:12px;margin-bottom:8px}[data-theme="dark"] .skel-l div{background:#334155}.tabbar div{flex:1;text-align:center;font-size:9px;color:var(--gray-light);cursor:pointer;padding:2px 0;transition:color .15s;user-select:none}.tabbar div:active{opacity:.6}.tabbar div.active{color:var(--blue)}.tabbar div i{display:block;font-size:22px;margin-bottom:1px;font-style:normal}.bd-wrap{position:relative;display:inline-block}.bd-wrap::after{content:'';position:absolute;top:-2px;right:-7px;width:8px;height:8px;background:var(--red);border-radius:50%;border:2px solid #fff}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes popUp{from{opacity:0;transform:scale(.92) translateY(20px)}to{opacity:1;transform:none}}@keyframes up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}@keyframes tkfade{from{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes toastUp{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}