/* ============================================================
   PORTAL — Staff Messaging & Scheduling
   Mobile-first · Dark Theme · Nightclub Aesthetic
   ============================================================ */

:root {
  --gold:        #dcc88d;
  --gold-light:  #e8daa8;
  --bronze:      #9e6e3d;
  --amber:       #f7a100;
  --bg-0:        #0b0b0f;
  --bg-1:        #12121a;
  --bg-2:        #1a1a26;
  --bg-3:        #24243a;
  --bg-4:        #2f2f48;
  --border:      rgba(220,200,141,.12);
  --border-gold: rgba(220,200,141,.3);
  --text-1:      #f0f0f5;
  --text-2:      #a0a0b4;
  --text-3:      #606078;
  --red:         #ef4444;
  --green:       #22c55e;
  --blue:        #60a5fa;
  --radius:      10px;
  --radius-lg:   16px;
  --transition:  .25s cubic-bezier(.4,0,.2,1);
  --font:        'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --topbar-h:    54px;
  --sidebar-w:   280px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html {
  font-size:16px; -webkit-text-size-adjust:100%;
  overflow-x:hidden; overscroll-behavior-x:none;
}

body {
  font-family: var(--font);
  background: var(--bg-0);
  color: var(--text-1);
  line-height: 1.5;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overscroll-behavior-x: none;
}

a { color:var(--gold); text-decoration:none; }
img { max-width:100%; display:block; }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 18px; border:none; border-radius:var(--radius);
  font-family:var(--font); font-size:.85rem; font-weight:600;
  cursor:pointer; transition:all var(--transition); line-height:1;
}
.btn-gold {
  background:linear-gradient(135deg,var(--bronze),var(--gold));
  color:var(--bg-0);
}
.btn-gold:hover { filter:brightness(1.15); transform:translateY(-1px); }
.btn-secondary { background:var(--bg-3); color:var(--text-2); }
.btn-secondary:hover { background:var(--bg-4); color:var(--text-1); }
.btn-danger { background:var(--red); color:#fff; }
.btn-danger:hover { filter:brightness(1.15); }
.btn-sm { padding:7px 12px; font-size:.75rem; }
.btn-full { width:100%; }
.btn:disabled { opacity:.5; cursor:default; pointer-events:none; }

/* ── FORM ELEMENTS ───────────────────────────────────────── */
.field { margin-bottom:14px; }
.field label {
  display:block; font-size:.7rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.5px; color:var(--text-3); margin-bottom:5px;
}
.field input, .field select, .select-input {
  width:100%; padding:12px 14px; background:var(--bg-1); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text-1); font-family:var(--font);
  font-size:.9rem; outline:none; transition:border var(--transition);
}
.field input:focus, .select-input:focus { border-color:var(--gold); }
.field input::placeholder { color:var(--text-3); }
.select-input { appearance:none; padding-right:32px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23a0a0b4'%3E%3Cpath d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; }

/* ── CHECKBOX GRID (user modal) ──────────────────────────── */
.check-grid {
  display:flex; flex-direction:column; gap:2px;
  background:var(--bg-1); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; margin-top:4px;
}
.check-row {
  display:flex !important; align-items:center; gap:10px;
  padding:10px 14px; cursor:pointer;
  font-size:.85rem !important; font-weight:500 !important;
  text-transform:none !important; letter-spacing:0 !important;
  color:var(--text-1) !important; margin:0 !important;
  transition:background .15s;
}
.check-row:hover { background:var(--bg-2); }
.check-row + .check-row { border-top:1px solid var(--border); }
.check-row input[type="checkbox"] {
  position:absolute; opacity:0; width:0; height:0; pointer-events:none;
}
.check-indicator {
  width:18px; height:18px; flex-shrink:0; border-radius:4px;
  border:2px solid var(--text-3); background:transparent;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s; position:relative;
}
.check-indicator::after {
  content:''; display:block; width:5px; height:9px;
  border:solid transparent; border-width:0 2px 2px 0;
  transform:rotate(45deg) translateY(-1px); opacity:0; transition:opacity .15s;
}
.check-row input:checked + .check-indicator {
  background:var(--gold); border-color:var(--gold);
}
.check-row input:checked + .check-indicator::after {
  border-color:var(--bg-0); opacity:1;
}
.check-icon { font-size:.8rem; flex-shrink:0; width:18px; text-align:center; }
.check-label { flex:1; min-width:0; }

/* ── ALERTS ──────────────────────────────────────────────── */
.alert { padding:10px 14px; border-radius:var(--radius); font-size:.85rem; margin-bottom:12px; }
.alert-error { background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.3); color:#fca5a5; }
.alert-success { background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.3); color:#86efac; }

/* ── BADGE ───────────────────────────────────────────────── */
.badge {
  display:inline-block; padding:3px 8px; border-radius:20px;
  font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.3px;
}
.badge-admin { background:rgba(239,68,68,.12); color:#f87171; }
.badge-user { background:rgba(96,165,250,.12); color:#60a5fa; }
.badge-mod { background:rgba(168,85,247,.15); color:#a855f7; }
.badge-suspended { background:rgba(239,68,68,.15); color:var(--red); }
.badge-count { background:var(--gold); color:var(--bg-0); min-width:18px; text-align:center; }

/* ── LOGIN ───────────────────────────────────────────────── */
.login-card {
  width:100%; max-width:380px; padding:36px 24px; margin:20px;
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--radius-lg); text-align:center;
}
.login-logo {
  width:64px; height:64px; margin:0 auto 16px;
  background:linear-gradient(135deg,var(--bronze),var(--gold));
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; color:var(--bg-0); overflow:hidden;
}
.login-logo-img { background:none; }
.login-logo img { width:100%; height:100%; object-fit:cover; }
.login-card h1 { font-size:1.4rem; margin-bottom:4px; }
.login-sub { font-size:.85rem; color:var(--text-2); margin-bottom:24px; }

/* Login tabs */
.login-tabs {
  display:flex; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--border); margin-bottom:20px;
}
.login-tab {
  flex:1; padding:10px; background:none; border:none;
  font-size:.82rem; font-weight:600; color:var(--text-3);
  cursor:pointer; transition:background .15s, color .15s;
}
.login-tab.active {
  background:var(--gold); color:var(--bg-0);
}
.login-tab:not(.active):hover { background:var(--bg-3); color:var(--text-1); }

.remember-me {
  display:flex; align-items:center; gap:8px;
  margin:-4px 0 16px; cursor:pointer;
  font-size:.78rem; color:var(--text-2);
  justify-content:flex-start; text-align:left;
}
.remember-me input[type="checkbox"] {
  width:16px; height:16px; accent-color:var(--gold);
  border-radius:3px; cursor:pointer; flex-shrink:0;
}

/* ── LOGIN / APPLY PAGE (index.php) ──────────────────────── */
body.login-page {
  overflow-x:hidden;
  overflow-y:auto;
  height:auto;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:max(16px, env(safe-area-inset-top)) 0 calc(16px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling:touch;
}
body.login-page .login-card { max-width:420px; margin:0 auto; flex-shrink:0; }
body.login-page .app-step { display:none; }
body.login-page .app-step.active { display:block; }
body.login-page .app-question { margin-bottom:14px; }
body.login-page .app-question label { display:block; font-size:.82rem; font-weight:600; color:var(--text-1); margin-bottom:4px; }
body.login-page .app-question .app-q-required { color:var(--gold); font-size:.7rem; margin-left:4px; }
body.login-page .app-question input[type="text"],
body.login-page .app-question textarea { width:100%; padding:10px 12px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius); color:var(--text-1); font-size:.85rem; font-family:inherit; resize:vertical; }
body.login-page .app-question textarea { min-height:60px; }
body.login-page .app-question input:focus,
body.login-page .app-question textarea:focus { border-color:var(--gold); outline:none; }
body.login-page .app-ack-row { display:flex; align-items:flex-start; gap:8px; padding:10px 12px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; }
body.login-page .app-ack-row input { margin-top:3px; accent-color:var(--gold); }
body.login-page .app-ack-row span { font-size:.82rem; color:var(--text-1); line-height:1.4; }
body.login-page .app-yesno { display:flex; gap:8px; flex-wrap:wrap; }
body.login-page .app-yesno label { display:flex; align-items:center; gap:5px; padding:8px 14px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; font-weight:400; font-size:.85rem; }
body.login-page .app-yesno input { accent-color:var(--gold); }
body.login-page .app-photo-area { border:2px dashed var(--border); border-radius:var(--radius); padding:20px; text-align:center; cursor:pointer; transition:border-color .2s; }
body.login-page .app-photo-area:hover,
body.login-page .app-photo-area.dragover { border-color:var(--gold); }
body.login-page .app-photo-area i { font-size:1.5rem; color:var(--text-3); margin-bottom:6px; }
body.login-page .app-photo-area p { font-size:.8rem; color:var(--text-3); margin:0; }
body.login-page .app-photo-previews { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
body.login-page .app-photo-thumb { width:64px; height:64px; border-radius:8px; object-fit:cover; border:2px solid var(--border); }
body.login-page .app-photo-remove { position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%; background:var(--red); color:#fff; border:none; font-size:.6rem; cursor:pointer; display:flex; align-items:center; justify-content:center; }
body.login-page .app-photo-wrap { position:relative; display:inline-block; }
body.login-page .app-nav {
  position:sticky;
  bottom:0;
  z-index:5;
  display:flex;
  gap:8px;
  margin-top:16px;
  padding:12px 0 calc(8px + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(to top, var(--bg-2) 80%, transparent);
}
body.login-page .app-nav .btn { flex:1; min-height:44px; }
body.login-page .btn-full { min-height:44px; }
body.login-page .app-progress { display:flex; gap:4px; margin-bottom:16px; }
body.login-page .app-progress-dot { flex:1; height:4px; border-radius:2px; background:var(--bg-3); transition:background .3s; }
body.login-page .app-progress-dot.filled { background:var(--gold); }
body.login-page .venue-search-wrap { position:relative; }
body.login-page .venue-search-wrap input { width:100%; padding:12px 14px 12px 38px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius); color:var(--text-1); font-size:.92rem; font-family:inherit; }
body.login-page .venue-search-wrap input:focus { border-color:var(--gold); outline:none; }
body.login-page .venue-search-wrap .search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-3); font-size:.85rem; pointer-events:none; }
body.login-page .venue-list { list-style:none; padding:0; margin:12px 0 0; max-height:300px; overflow-y:auto; }
body.login-page .venue-item { display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:8px; cursor:pointer; transition:border-color .2s, background .2s; }
body.login-page .venue-item:hover { border-color:var(--gold); background:var(--bg-2); }
body.login-page .venue-item-logo { width:40px; height:40px; border-radius:8px; object-fit:cover; background:var(--bg-3); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:var(--gold); }
body.login-page .venue-item-logo img { width:100%; height:100%; border-radius:8px; object-fit:cover; }
body.login-page .venue-item-name { font-weight:600; font-size:.92rem; color:var(--text-1); }
body.login-page .venue-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:16px; }
body.login-page .venue-badge-name { font-weight:600; font-size:.85rem; color:var(--gold); }
body.login-page .venue-badge .change-btn { background:none; border:none; color:var(--text-3); font-size:.75rem; cursor:pointer; text-decoration:underline; padding:0; }
body.login-page .venue-badge .change-btn:hover { color:var(--text-1); }
body.login-page .venue-empty { text-align:center; padding:20px; color:var(--text-3); font-size:.85rem; }

/* ── TOPBAR ──────────────────────────────────────────────── */
.topbar {
  position:fixed; top:0; left:0; right:0; z-index:900;
  height:var(--topbar-h); background:var(--bg-1);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 12px; gap:10px;
}
.topbar-center {
  flex:1 1 0%; min-width:0; display:flex; flex-direction:column; justify-content:center; overflow:hidden;
}
.topbar-venue {
  font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  color:var(--gold); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin:0; padding:0; display:inline-block;
}
.topbar-title {
  font-size:1rem; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  line-height:1.2; margin:0; padding:0;
}
.topbar-btn {
  flex-shrink:0;
  width:38px; height:38px; border:none; background:transparent;
  color:var(--text-2); font-size:1.1rem; cursor:pointer; border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--transition);
}
.topbar-btn:hover { background:var(--bg-3); color:var(--text-1); }

.topbar-venue.vs-multi {
  cursor:pointer; padding:3px 8px; margin:-3px -8px;
  border-radius:var(--radius); transition:background .15s, color .15s;
}
.topbar-venue.vs-multi:hover, .topbar-venue.vs-multi:active {
  background:rgba(220,200,141,.12); color:#f0dfa0;
}
.topbar-venue.vs-multi::after {
  content:'\f078'; font-family:'Font Awesome 6 Free'; font-weight:900;
  font-size:.45rem; margin-left:5px; opacity:.6; vertical-align:middle;
}

/* ── VENUE SWITCHER ─────────────────────────────────────── */
.vs-overlay {
  position:fixed; inset:0; z-index:1100; background:rgba(0,0,0,.5);
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:calc(var(--topbar-h) + 8px);
  animation:fadeIn .15s ease;
}
.vs-panel {
  background:var(--bg-2); border-radius:var(--radius-lg); width:min(340px, 92vw);
  max-height:70vh; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 12px 40px rgba(0,0,0,.4); border:1px solid var(--border);
}
.vs-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 10px; border-bottom:1px solid var(--border);
}
.vs-title { font-size:.85rem; font-weight:700; color:var(--text-1); }
.vs-close {
  background:none; border:none; color:var(--text-3); font-size:1rem;
  cursor:pointer; padding:4px; border-radius:var(--radius);
}
.vs-close:hover { color:var(--text-1); background:var(--bg-3); }

.vs-list { overflow-y:auto; flex:1; padding:6px 0; }
.vs-item {
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  cursor:pointer; transition:background .12s;
}
.vs-item:hover { background:var(--bg-3); }
.vs-item.vs-active { background:var(--bg-3); }
.vs-item-logo {
  width:32px; height:32px; border-radius:8px; background:var(--bg-3);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  overflow:hidden; font-size:.8rem; color:var(--text-3);
}
.vs-item-logo img { width:100%; height:100%; object-fit:cover; }
.vs-item-info { flex:1; min-width:0; }
.vs-item-name {
  font-size:.82rem; font-weight:600; color:var(--text-1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vs-item-meta {
  font-size:.68rem; color:var(--text-3); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vs-item-check { color:var(--gold); font-size:.75rem; flex-shrink:0; opacity:0; }
.vs-active .vs-item-check { opacity:1; }
.vs-item-unlink {
  background:none; border:none; color:var(--text-3); font-size:.7rem;
  cursor:pointer; padding:4px 6px; border-radius:var(--radius); opacity:0;
  transition:opacity .12s;
}
.vs-item:hover .vs-item-unlink { opacity:.6; }
.vs-item-unlink:hover { opacity:1 !important; color:var(--red, #f87171); background:var(--bg-3); }

.vs-link-section { padding:8px 16px 14px; border-top:1px solid var(--border); }
.vs-link-btn {
  background:none; border:1px dashed var(--border); color:var(--text-3);
  width:100%; padding:8px; border-radius:var(--radius); cursor:pointer;
  font-size:.78rem; transition:all .12s;
}
.vs-link-btn:hover { color:var(--gold); border-color:var(--gold); }
.vs-link-form { margin-top:10px; }
.vs-input {
  width:100%; padding:8px 10px; background:var(--bg-1); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text-1); font-size:.8rem;
  margin-bottom:6px; box-sizing:border-box;
}
.vs-input:focus { outline:none; border-color:var(--gold); }
.vs-search-results {
  list-style:none; margin:0 0 6px; padding:0; max-height:140px; overflow-y:auto;
}
.vs-search-results li {
  padding:8px 10px; cursor:pointer; font-size:.8rem; color:var(--text-2);
  border-radius:var(--radius); display:flex; align-items:center; gap:8px;
}
.vs-search-results li:hover { background:var(--bg-3); color:var(--text-1); }
.vs-search-results li .vs-sr-logo {
  width:22px; height:22px; border-radius:5px; background:var(--bg-3);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  overflow:hidden; font-size:.6rem; color:var(--text-3);
}
.vs-search-results li .vs-sr-logo img { width:100%; height:100%; object-fit:cover; }
.vs-link-prompt { font-size:.75rem; color:var(--text-2); margin:8px 0 6px; }
.vs-link-actions { display:flex; gap:8px; margin-top:8px; }
.vs-btn {
  padding:7px 14px; border-radius:var(--radius); font-size:.78rem;
  font-weight:600; cursor:pointer; border:none;
}
.vs-btn-cancel { background:var(--bg-3); color:var(--text-2); }
.vs-btn-confirm { background:var(--gold); color:#000; }
.vs-btn-confirm:disabled { opacity:.5; cursor:not-allowed; }
.vs-link-error { font-size:.72rem; color:var(--red, #f87171); margin-top:4px; }

/* ── SIDEBAR ─────────────────────────────────────────────── */
.sidebar {
  position:fixed; top:0; left:0; bottom:0; z-index:1000;
  width:var(--sidebar-w); background:var(--bg-1);
  border-right:1px solid var(--border);
  transform:translateX(-100%); transition:transform .3s ease;
  display:flex; flex-direction:column; overflow-y:auto;
}
.sidebar.open { transform:translateX(0); }
.sidebar-overlay {
  position:fixed; inset:0; z-index:999; background:rgba(0,0,0,.6);
  display:none;
}
.sidebar-overlay.open { display:block; }
.sidebar-header {
  padding:16px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.sidebar-user { font-weight:600; font-size:.9rem; display:flex; align-items:center; gap:8px; }
.sidebar-user i { color:var(--gold); font-size:1.2rem; }
.sidebar-nav { flex:1; padding:8px 0; }
.sidebar-section {
  padding:12px 16px 4px; font-size:.65rem; font-weight:700;
  text-transform:uppercase; letter-spacing:1px; color:var(--text-3);
}
.sidebar-section-toggle {
  cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  user-select:none; transition:color .15s;
}
.sidebar-section-toggle:hover { color:var(--text-2); }
.dm-toggle-icon {
  font-size:.55rem; transition:transform .2s ease;
}
.dm-toggle-icon.rotated { transform:rotate(-90deg); }
.dm-list-collapsible {
  overflow:hidden; transition:max-height .25s ease, opacity .2s ease;
  max-height:600px; opacity:1;
}
.dm-list-collapsible.collapsed {
  max-height:0 !important; opacity:0; pointer-events:none;
}
.dm-item-wrap {
  position:relative; display:flex; align-items:center;
}
.dm-item-wrap .dm-sidebar-item { flex:1; min-width:0; }
.dm-hide-btn {
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border-radius:50%;
  background:transparent; border:none; cursor:pointer;
  color:var(--text-3); font-size:.6rem;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .15s, background .15s, color .15s;
}
.dm-item-wrap:hover .dm-hide-btn { opacity:1; }
.dm-hide-btn:hover { background:rgba(239,68,68,.12); color:var(--red); }
.sidebar-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 16px; font-size:.88rem; color:var(--text-2);
  transition:all var(--transition); cursor:pointer; border:none; background:none;
  width:100%; text-align:left; font-family:var(--font);
}
.sidebar-item:hover { background:var(--bg-3); color:var(--text-1); }
.sidebar-item.active { background:rgba(220,200,141,.08); color:var(--gold); }
.sidebar-item i { width:20px; text-align:center; font-size:.95rem; }
.sidebar-home { margin-bottom:4px; }
.sidebar-home i { color:var(--gold); }

/* ── MAIN ────────────────────────────────────────────────── */
.main {
  position:fixed; top:var(--topbar-h); left:0; right:0; bottom:0;
  overflow:hidden;
}
.view { display:none; height:100%; overflow-y:auto; overflow-x:hidden; overscroll-behavior-x:none; touch-action:pan-y pinch-zoom; }
.view.active { display:flex; flex-direction:column; }

/* ── Analytics iframe ────────────────────────────────────── */
#viewCheckinAnalytics { overflow:hidden; }
#viewCheckinAnalytics iframe { flex:1; min-height:0; }

/* ── Pull-to-refresh ────────────────────────────────────── */
.ptr-indicator {
  position:absolute; top:0; left:50%; transform:translateX(-50%) translateY(-40px);
  width:36px; height:36px; border-radius:50%; background:var(--bg-2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-3); font-size:.85rem; z-index:50;
  opacity:0; transition:opacity .2s;
  pointer-events:none;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.ptr-indicator.ptr-visible { opacity:1; }
.ptr-indicator.ptr-ready { color:var(--gold); border-color:var(--gold); }

/* ── CHAT ────────────────────────────────────────────────── */

/* Banner strip at top of chat */
.chat-banner {
  flex-shrink:0;
  display:flex; align-items:center; gap:10px;
  padding:10px 16px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--group-color, var(--gold)) 18%, var(--bg-1)), var(--bg-1));
  border-bottom:1px solid color-mix(in srgb, var(--group-color, var(--gold)) 25%, transparent);
  font-weight:700; font-size:.88rem;
  color:var(--text-1);
}
.chat-banner i {
  font-size:1rem; color:var(--group-color, var(--gold));
  width:28px; height:28px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--group-color, var(--gold)) 15%, transparent);
}
.chat-banner > span:not(.user-bubble) {
  flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chat-banner .user-bubble { flex-shrink:0; }

/* Wrapper for messages + watermark */
.chat-area {
  flex:1; position:relative; overflow:hidden; min-height:0;
}

/* Large translucent watermark */
.chat-watermark {
  position:absolute; inset:0; z-index:0;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(2.5rem, 8vw, 5rem);
  font-weight:900; text-transform:uppercase;
  letter-spacing:2px;
  color:var(--group-color, var(--gold));
  opacity:.04;
  pointer-events:none; user-select:none;
  white-space:nowrap;
  line-height:1;
}

.chat-messages {
  position:relative; z-index:1;
  height:100%; overflow-y:auto; overflow-x:hidden; padding:16px 12px 8px;
  display:flex; flex-direction:column; gap:4px;
  scroll-behavior:smooth;
}

/* Universal avatar bubble */
.user-bubble {
  border-radius:50%; object-fit:cover; display:block; flex-shrink:0;
}
.user-bubble-letter {
  background:linear-gradient(135deg, var(--gold), #b8860b);
  color:#fff; font-weight:800; display:flex;
  align-items:center; justify-content:center;
}

/* Avatar pop preview */
.avatar-pop {
  position:fixed; z-index:9999; border-radius:50%; object-fit:cover;
  width:120px; height:120px; pointer-events:none;
  box-shadow:0 8px 32px rgba(0,0,0,.45); border:3px solid var(--gold);
  animation:avatarPopIn .2s ease-out forwards;
}
.avatar-pop.fade-out { animation:avatarPopOut .3s ease-in forwards; }
@keyframes avatarPopIn { from { transform:scale(0); opacity:0; } to { transform:scale(1); opacity:1; } }
@keyframes avatarPopOut { from { transform:scale(1); opacity:1; } to { transform:scale(.7); opacity:0; } }

/* Message group: timestamp + row */
.msg-group {
  display:flex; flex-direction:column; align-items:center;
  max-width:85%; animation:msgIn .25s ease; cursor:pointer;
}
.msg-group-other { align-self:flex-start; align-items:flex-start; }
.msg-group-mine  { align-self:flex-end; align-items:flex-end; }

.msg-timestamp {
  font-size:.62rem; color:var(--text-3); text-align:center;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .25s ease, opacity .2s ease, margin .25s ease;
  margin:0; padding:0 8px; letter-spacing:.02em;
  align-self:center;
}
.msg-group.show-ts .msg-timestamp {
  max-height:22px; opacity:1; margin-bottom:2px;
}
.msg-seen-by {
  font-size:.65rem; color:var(--text-3); text-align:center;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .3s ease, opacity .25s ease, margin .3s ease;
  padding:0 8px; margin:0;
}
.msg-group.show-ts .msg-seen-by {
  max-height:60px; opacity:1; margin-bottom:4px;
}
.announce-seen-by { cursor:pointer; }
.msg-seen-by i { margin-right:3px; font-size:.58rem; }

/* Read-receipt avatar bubbles (Facebook Messenger style) */
.read-bubbles {
  display:flex; justify-content:flex-end; gap:2px;
  padding:1px 44px 2px 44px;
}
.msg-group-other .read-bubbles,
.msg-group-other + .read-bubbles { justify-content:flex-start; }
.read-bubble {
  width:16px; height:16px; border-radius:50%; overflow:hidden;
  background:var(--bg-4); display:flex; align-items:center; justify-content:center;
  font-size:.5rem; font-weight:700; color:var(--gold); cursor:pointer;
  border:1.5px solid var(--bg-1); flex-shrink:0;
  transition:transform .15s;
}
.read-bubble:hover { transform:scale(1.4); z-index:1; }
.read-bubble img {
  width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;
}
.read-bubble-more {
  background:var(--bg-3); color:var(--text-2); font-size:.45rem; font-weight:700;
  letter-spacing:-.02em;
}
.read-bubbles { cursor:pointer; }

/* Message row: avatar + bubble side by side */
.msg-row {
  display:flex; align-items:flex-end; gap:6px; width:100%;
}
.msg-row-other { justify-content:flex-start; }
.msg-row-mine  { flex-direction:row-reverse; justify-content:flex-start; }

.msg-avatar-wrap { flex-shrink:0; line-height:0; }

.msg {
  padding:8px 12px; border-radius:14px;
  font-size:.88rem; line-height:1.45; position:relative;
  word-wrap:break-word; min-width:0; flex:0 1 auto;
}
.msg-text-body { white-space:pre-wrap; }
@keyframes msgIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.msg-other {
  background:var(--bg-3); color:var(--text-1);
  border-bottom-left-radius:4px;
}
.msg-mine {
  background:linear-gradient(135deg,#2a2350,#3a2a60);
  color:var(--text-1); border-bottom-right-radius:4px;
}
.msg-sender {
  font-size:.7rem; font-weight:700; color:var(--gold); margin-bottom:2px;
  display:flex; align-items:center; gap:5px;
}
.msg-mine .msg-sender {
  justify-content:flex-end; color:var(--text-3);
}
.msg-role-badge {
  font-size:.55rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  padding:1px 5px; border-radius:3px; line-height:1.4; flex-shrink:0;
}
.msg-role-admin {
  background:rgba(251,191,36,.15); color:#fbbf24;
}
.msg-role-mod {
  background:rgba(96,165,250,.15); color:#60a5fa;
}
.msg-img-wrap {
  margin:6px 0 2px; display:inline-block;
}
.msg-img {
  max-width:220px; max-height:220px; object-fit:contain;
  border-radius:10px; cursor:pointer;
  transition:filter .2s ease;
  display:block;
}
.msg-img:hover { filter:brightness(1.12); }
.msg-mine .msg-img-wrap { text-align:right; display:block; }
.msg-mine .msg-img { margin-left:auto; }
.msg-delete {
  position:absolute; top:4px; right:4px; width:22px; height:22px;
  border-radius:50%; background:var(--red); color:#fff; border:none;
  font-size:.6rem; cursor:pointer; display:none;
  align-items:center; justify-content:center;
}
.msg:hover .msg-delete { display:flex; }
.msg-edit-btn {
  position:absolute; top:4px; right:4px; width:22px; height:22px;
  border-radius:50%; background:var(--gold); color:#1a1a2e; border:none;
  font-size:.6rem; cursor:pointer; display:none;
  align-items:center; justify-content:center; z-index:1;
}
.msg:hover .msg-edit-btn { display:flex; }
.msg.msg-editing { overflow:visible; }
.msg-edit-area { margin-top:4px; }
.msg-edit-input {
  width:100%; min-height:32px; max-height:200px; resize:none; overflow:hidden;
  background:transparent; border:none; border-bottom:1.5px solid var(--gold);
  color:var(--text-1); padding:4px 0; font-size:.88rem; line-height:1.45;
  font-family:inherit; outline:none;
}
.msg-edit-hint {
  display:flex; align-items:center; gap:4px; margin-top:4px;
  font-size:.62rem; color:var(--text-3);
}
.msg-edit-hint a {
  color:var(--gold); text-decoration:none; font-weight:600;
}
.msg-edit-hint a:hover { text-decoration:underline; }

.msg-system {
  align-self:center; background:var(--bg-2); color:var(--text-3);
  padding:4px 14px; border-radius:20px; font-size:.75rem;
  max-width:none;
}

/* Chat input */
.chat-input {
  position:relative;
  display:flex; align-items:flex-end; gap:8px;
  padding:8px 12px; background:var(--bg-1); border-top:1px solid var(--border);
  padding-bottom:max(8px, env(safe-area-inset-bottom));
  flex-shrink:0;
}
.chat-input textarea {
  flex:1; padding:10px 14px; background:var(--bg-2); border:1px solid var(--border);
  border-radius:20px; color:var(--text-1); font-family:var(--font); font-size:16px;
  outline:none; resize:none; overflow-y:auto;
  min-height:40px; max-height:140px; line-height:1.4;
  scrollbar-width:thin;
  -webkit-appearance:none;
}
.chat-input textarea:focus { border-color:var(--gold); }
.chat-input textarea::placeholder { color:var(--text-3); }
.chat-attach {
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  color:var(--text-3); font-size:1.1rem; cursor:pointer; transition:color var(--transition);
  flex-shrink:0; background:none; border:none; padding:0;
}
.chat-attach:hover { color:var(--gold); }
.btn-send {
  width:38px; height:38px; border:none; border-radius:50%;
  background:linear-gradient(135deg,var(--bronze),var(--gold));
  color:var(--bg-0); font-size:.95rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:filter var(--transition); flex-shrink:0;
}
.btn-send:hover { filter:brightness(1.15); }

.chat-image-preview {
  position:relative; padding:6px 12px; background:var(--bg-1);
  border-top:1px solid var(--border); flex-shrink:0;
}
.chat-image-preview img {
  height:60px; border-radius:var(--radius); object-fit:cover;
}
.chat-image-preview button {
  position:absolute; top:2px; right:8px; width:24px; height:24px;
  border-radius:50%; background:var(--red); color:#fff; border:none;
  cursor:pointer; font-size:.7rem;
  display:flex; align-items:center; justify-content:center;
}
.chat-preview-status {
  display:block; margin-top:4px; font-size:.72rem; font-weight:600;
}
.chat-preview-uploading { color:var(--amber); }
.chat-preview-ready { color:var(--green); }
.chat-preview-error { color:var(--red); }

/* ── DRAG-AND-DROP OVERLAY ───────────────────────────────── */
.view.drop-active {
  position:relative;
}
.view.drop-active::after {
  content:'Drop image to send';
  position:absolute; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background:rgba(26,26,46,.85);
  border:3px dashed var(--gold);
  border-radius:12px;
  color:var(--gold); font-size:1.1rem; font-weight:700;
  letter-spacing:.03em;
  pointer-events:none;
  animation:dropPulse 1.2s ease infinite;
}
@keyframes dropPulse {
  0%, 100% { border-color:var(--gold); }
  50% { border-color:var(--bronze); }
}

/* ── IMAGE LIGHTBOX ──────────────────────────────────────── */
.lightbox {
  display:none; position:fixed; inset:0; z-index:3000;
  background:rgba(0,0,0,.92); backdrop-filter:blur(8px);
  align-items:center; justify-content:center; padding:20px;
}
.lightbox.open { display:flex; }
.lightbox img {
  max-width:100%; max-height:90vh; max-height:90dvh;
  border-radius:var(--radius); object-fit:contain;
  animation:lbIn .2s ease;
}
@keyframes lbIn { from { opacity:0; transform:scale(.92); } to { opacity:1; transform:none; } }
.lightbox-toolbar {
  position:absolute; top:16px; right:16px; z-index:3001;
  display:flex; gap:8px;
}
.lightbox-download {
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.15); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; cursor:pointer; text-decoration:none; transition:background .15s;
}
.lightbox-download:hover { background:rgba(255,255,255,.3); }
.lightbox-close {
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.15); color:#fff; border:none;
  font-size:1.1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
.lightbox-close:hover { background:rgba(255,255,255,.3); }
.lb-toast {
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:rgba(255,255,255,.18); backdrop-filter:blur(12px); color:#fff;
  padding:10px 20px; border-radius:20px; font-size:.85rem; font-weight:500;
  opacity:0; transition:opacity .25s, transform .25s; pointer-events:none;
  white-space:nowrap; z-index:3002;
}
.lb-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── TASKS / CLEANING LIST ──────────────────────────────── */
#viewTasks { overflow-y:auto; padding:0; }
#tasksContent { padding:12px; max-width:640px; margin:0 auto; width:100%; }

.task-header { margin-bottom:16px; }
.task-header-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.task-header-info { flex:1; min-width:0; }
.task-title { font-size:1.1rem; font-weight:700; margin:0 0 6px; display:flex; align-items:center; gap:8px; color:var(--text-1); }
.task-title i { color:#f59e0b; }
.task-date-nav { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.task-date-label { font-size:.82rem; color:var(--text-2); font-weight:500; }
.task-nav-btn {
  background:none; border:1px solid var(--border); color:var(--text-2);
  width:30px; height:30px; border-radius:8px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:.75rem;
  transition:background .12s, color .12s;
}
.task-nav-btn:hover { background:var(--bg-3); color:var(--text-1); }
.task-today-btn { margin-left:4px; width:auto; padding:0 10px; font-size:.68rem; font-weight:700; font-family:var(--font); }
.task-date-picker {
  background:var(--bg-3); border:1px solid var(--border); color:var(--text-1);
  border-radius:8px; padding:4px 8px; font-size:.75rem; font-family:var(--font);
  cursor:pointer; outline:none; height:30px;
  transition:border-color .12s;
}
.task-date-picker:focus { border-color:var(--gold); }
.task-admin-btns { display:flex; gap:6px; flex-shrink:0; }

.task-progress { display:flex; align-items:center; gap:10px; }
.task-progress-bar { flex:1; height:8px; background:var(--bg-3); border-radius:4px; overflow:hidden; }
.task-progress-fill { height:100%; background:linear-gradient(90deg,#f59e0b,#22c55e); border-radius:4px; transition:width .4s ease; }
.task-progress-text { font-size:.72rem; color:var(--text-3); white-space:nowrap; font-weight:600; }

.task-empty { text-align:center; padding:48px 16px; color:var(--text-3); }
.task-empty i { font-size:2.5rem; color:#22c55e; margin-bottom:12px; display:block; }
.task-empty p { font-size:.88rem; }

.task-list { display:flex; flex-direction:column; gap:10px; }
.task-card {
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:12px; overflow:hidden; transition:border-color .15s, box-shadow .15s;
}
.task-card:hover { border-color:rgba(245,158,11,.3); box-shadow:0 2px 12px rgba(0,0,0,.1); }
.task-card.task-done { opacity:.7; }
.task-card.task-done .task-card-title { text-decoration:line-through; color:var(--text-3); }
.task-card-main { display:flex; align-items:flex-start; gap:12px; padding:14px; }
.task-check {
  flex-shrink:0; background:none; border:none; cursor:pointer;
  font-size:1.3rem; color:var(--text-3); padding:0; margin-top:2px;
  transition:color .15s, transform .15s;
}
.task-check:hover { transform:scale(1.15); }
.task-check.checked { color:#22c55e; }
.task-card-info { flex:1; min-width:0; }
.task-card-title { font-weight:600; font-size:.88rem; color:var(--text-1); margin-bottom:4px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.task-card-desc { font-size:.78rem; color:var(--text-3); margin-bottom:6px; line-height:1.4; }
.task-card-img { margin:6px 0; }
.task-card-img img { max-width:100%; max-height:180px; border-radius:8px; object-fit:cover; }
.task-card-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.68rem; color:var(--text-3); }
.task-badge {
  padding:2px 7px; border-radius:4px; font-size:.6rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.02em;
}
.task-badge-recur { background:rgba(59,130,246,.12); color:#60a5fa; }
.task-badge-once { background:rgba(168,85,247,.12); color:#a855f7; }
.task-badge-off { background:rgba(239,68,68,.12); color:#ef4444; }
.task-pri { padding:2px 6px; border-radius:4px; font-size:.58rem; font-weight:700; text-transform:uppercase; }
.task-pri-high { background:rgba(239,68,68,.12); color:#ef4444; }
.task-pri-med { background:rgba(245,158,11,.12); color:#f59e0b; }
.task-meta-by { display:flex; align-items:center; gap:3px; }

.task-completion-info {
  padding:10px 14px 14px 52px; border-top:1px solid var(--border);
  font-size:.75rem; color:var(--text-2);
}
.task-completed-by { margin-bottom:4px; }
.task-completed-by i { color:#22c55e; margin-right:4px; }
.task-completion-notes { color:var(--text-3); margin-top:4px; font-style:italic; }
.task-completion-notes i { margin-right:4px; color:var(--gold); }
.task-completion-img { margin-top:6px; }
.task-completion-img img { max-width:160px; max-height:120px; border-radius:8px; object-fit:cover; cursor:pointer; }

.task-complete-form {
  padding:10px 14px 14px 52px; border-top:1px solid var(--border);
  animation:replyBarIn .2s ease;
}
.task-notes-input {
  width:100%; background:var(--bg-3); border:1px solid var(--border);
  border-radius:8px; padding:8px 10px; color:var(--text-1);
  font-size:.78rem; font-family:var(--font); resize:none; margin-bottom:8px;
}
.task-form-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.task-upload-btn {
  display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  font-size:.75rem; color:var(--gold); font-weight:600;
  padding:6px 12px; border-radius:8px; background:rgba(245,158,11,.08);
  border:1px dashed rgba(245,158,11,.3); transition:background .12s;
}
.task-upload-btn:hover { background:rgba(245,158,11,.15); }
.task-img-name { font-size:.7rem; color:var(--text-3); max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.task-submit-btn { margin-left:auto; }

/* Task Manager */
.task-manager { }
.task-mgr-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.task-mgr-header h3 { font-size:1rem; font-weight:700; color:var(--text-1); margin:0; }
.task-mgr-list { display:flex; flex-direction:column; gap:8px; }
.task-mgr-item {
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  background:var(--bg-2); border:1px solid var(--border); border-radius:10px;
  transition:border-color .12s;
}
.task-mgr-item:hover { border-color:var(--gold); }
.task-mgr-item.task-inactive { opacity:.5; }
.task-mgr-info { flex:1; min-width:0; }
.task-mgr-title { font-weight:600; font-size:.85rem; color:var(--text-1); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.task-mgr-meta { font-size:.7rem; color:var(--text-3); margin-top:3px; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.task-mgr-actions { display:flex; gap:4px; flex-shrink:0; }
.task-day-tag {
  display:inline-block; padding:2px 6px; border-radius:4px;
  background:rgba(245,158,11,.1); color:#f59e0b;
  font-size:.6rem; font-weight:700; text-transform:capitalize;
}
.task-empty-text { text-align:center; color:var(--text-3); padding:24px; font-size:.85rem; }

/* Task Form */
.task-form-wrap { }
.task-form-header { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.task-form-header h3 { font-size:1rem; font-weight:700; color:var(--text-1); margin:0; }
.task-form-body { display:flex; flex-direction:column; gap:12px; }
.task-form-preview { max-width:100%; max-height:120px; border-radius:8px; margin-top:6px; object-fit:cover; }

.task-form-btns { display:flex; gap:8px; margin-top:12px; }
.task-form-btns .btn { flex:1; }

.task-sched-toggle { display:flex; gap:0; border-radius:8px; overflow:hidden; border:1px solid var(--border); }
.task-sched-opt {
  flex:1; padding:8px 12px; border:none; background:var(--bg-3); color:var(--text-3);
  font-size:.78rem; font-weight:600; cursor:pointer; transition:background .12s, color .12s;
  text-align:center; font-family:var(--font);
}
.task-sched-opt.active { background:var(--gold); color:#000; }

.task-day-picks { display:flex; gap:4px; flex-wrap:wrap; }
.task-day-pick {
  padding:6px 12px; border-radius:8px; font-size:.75rem; font-weight:600;
  cursor:pointer; border:1px solid var(--border); background:var(--bg-3);
  color:var(--text-3); transition:all .12s; user-select:none;
}
.task-day-pick input { display:none; }
.task-day-pick.active { background:var(--gold); color:#000; border-color:var(--gold); }

/* Task Reports */
.task-report-wrap { }
.task-report-presets { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.task-preset-btn {
  padding:6px 14px; border-radius:8px; border:1px solid var(--border);
  background:var(--bg-2); color:var(--text-2); font-size:.75rem;
  font-weight:600; cursor:pointer; transition:all .12s; font-family:var(--font);
}
.task-preset-btn:hover { border-color:var(--gold); color:var(--gold); }
.task-report-custom { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:16px; font-size:.8rem; color:var(--text-3); }
.task-report-custom .as-input { max-width:150px; }

.report-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:16px; }
.report-stat {
  text-align:center; padding:14px 8px; background:var(--bg-2);
  border:1px solid var(--border); border-radius:10px;
}
.report-stat-num { font-size:1.5rem; font-weight:800; color:var(--gold); display:block; }
.report-stat-label { font-size:.65rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.03em; font-weight:600; }
.report-section-title { font-size:.82rem; font-weight:700; color:var(--text-2); margin:16px 0 8px; }
.report-table { display:flex; flex-direction:column; gap:4px; }
.report-row {
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  background:var(--bg-2); border-radius:8px; font-size:.78rem;
}
.report-row-name { flex:1; font-weight:500; color:var(--text-1); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.report-row-bar { flex:0 0 80px; height:6px; background:var(--bg-3); border-radius:3px; overflow:hidden; }
.report-row-bar div { height:100%; background:var(--gold); border-radius:3px; }
.report-row-pct { font-size:.7rem; color:var(--text-3); font-weight:600; white-space:nowrap; }

@media (max-width:480px) {
  .report-summary { grid-template-columns:repeat(2,1fr); }
  .task-header-top { flex-direction:column; }
  .task-admin-btns { width:100%; }
  .task-admin-btns .btn { flex:1; }
}

/* ── Quick-Add Task FAB & Sheet ───────────────────────────── */
.task-fab {
  position:fixed; bottom:24px; right:24px; z-index:90;
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg,#f59e0b,#d97706);
  color:#000; border:none; cursor:pointer;
  font-size:1.3rem; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(245,158,11,.4);
  transition:transform .15s, box-shadow .15s;
}
.task-fab:hover { transform:scale(1.08); box-shadow:0 6px 28px rgba(245,158,11,.5); }
.task-fab:active { transform:scale(.95); }

.task-quick-overlay {
  position:fixed; inset:0; z-index:100;
  background:rgba(0,0,0,.5); backdrop-filter:blur(4px);
  display:flex; align-items:flex-end; justify-content:center;
  animation:fadeIn .15s ease;
}
.task-quick-sheet {
  width:100%; max-width:500px;
  background:var(--bg-1); border-radius:16px 16px 0 0;
  padding:16px 16px 24px; box-shadow:0 -4px 30px rgba(0,0,0,.3);
  animation:slideUpSheet .2s ease;
}
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes slideUpSheet { from { transform:translateY(100%); } to { transform:translateY(0); } }
.task-quick-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px; font-weight:700; font-size:.95rem; color:var(--text-1);
}
.task-quick-close {
  background:none; border:none; cursor:pointer; color:var(--text-3);
  font-size:1.1rem; padding:4px 8px; border-radius:8px;
  transition:background .12s, color .12s;
}
.task-quick-close:hover { background:var(--bg-3); color:var(--text-1); }
.task-quick-input {
  width:100%; padding:12px 14px; border-radius:10px;
  border:1px solid var(--border); background:var(--bg-2);
  color:var(--text-1); font-size:.92rem; font-family:var(--font);
  margin-bottom:8px; outline:none; transition:border-color .12s;
}
.task-quick-input:focus { border-color:var(--gold); }
.task-quick-notes {
  width:100%; padding:10px 14px; border-radius:10px;
  border:1px solid var(--border); background:var(--bg-2);
  color:var(--text-1); font-size:.8rem; font-family:var(--font);
  resize:none; margin-bottom:10px; outline:none; transition:border-color .12s;
}
.task-quick-notes:focus { border-color:var(--gold); }
.task-quick-row { display:flex; align-items:center; gap:8px; }
.task-quick-cam {
  display:flex; align-items:center; gap:5px; cursor:pointer;
  padding:8px 14px; border-radius:10px; font-size:.78rem; font-weight:600;
  color:var(--text-2); background:var(--bg-3); border:1px solid var(--border);
  transition:background .12s, color .12s;
}
.task-quick-cam:hover { background:var(--bg-2); color:var(--gold); }
.task-quick-cam i { font-size:.9rem; }
.task-quick-fname { font-size:.68rem; color:var(--text-3); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.task-quick-pri-wrap { flex-shrink:0; }
.task-quick-pri {
  background:none; border:1px solid var(--border); border-radius:8px;
  cursor:pointer; padding:8px 10px; font-size:.85rem; color:var(--text-3);
  transition:color .12s, border-color .12s;
}
.task-quick-pri:hover { border-color:var(--gold); }
.task-quick-send { padding:8px 20px; font-size:.82rem; white-space:nowrap; }

.task-quick-preview {
  margin-top:10px; position:relative; display:inline-block;
}
.task-quick-preview img {
  max-width:100%; max-height:150px; border-radius:10px; object-fit:cover;
}
.task-quick-preview-rm {
  position:absolute; top:4px; right:4px;
  width:24px; height:24px; border-radius:50%;
  background:rgba(0,0,0,.7); color:#fff; border:none;
  cursor:pointer; font-size:.65rem;
  display:flex; align-items:center; justify-content:center;
}

/* Home task card summary */
.home-task-summary-count {
  display:flex; align-items:center; gap:8px; padding:4px 0 8px;
}
.home-task-number {
  font-size:1.6rem; font-weight:700; color:var(--accent,#6366f1); line-height:1;
}
.home-task-done-badge {
  margin-left:auto; font-size:.7rem; color:var(--text-3);
  background:var(--bg-2,rgba(255,255,255,.06)); padding:2px 8px; border-radius:10px;
}
.home-task-progress { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.home-task-summary-actions {
  display:flex; gap:8px; padding-top:4px;
}
.home-task-summary-btn {
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 12px; border:none; border-radius:8px; cursor:pointer;
  font-size:.8rem; font-weight:600; transition:transform .12s, box-shadow .12s;
}
.home-task-summary-btn:hover { transform:translateY(-1px); box-shadow:0 3px 12px rgba(0,0,0,.15); }
.home-task-summary-btn:active { transform:scale(.97); }
.home-task-add-btn {
  background:linear-gradient(135deg,#f59e0b,#d97706); color:#000;
}
.home-task-view-btn {
  background:var(--bg-2,rgba(255,255,255,.08)); color:var(--text-1,#fff);
  border:1px solid var(--border,rgba(255,255,255,.1));
}

/* ── SCHEDULE ────────────────────────────────────────────── */
.schedule-grid { padding:12px; }

/* ── SCHEDULE: Day card ──────────────────────────────────── */
.sched-day {
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--radius-lg); margin-bottom:14px; overflow:hidden;
  transition:border-color .3s, box-shadow .3s;
}
.sched-highlight {
  border-color:var(--gold)!important;
  box-shadow:0 0 0 2px rgba(220,200,141,.35), 0 0 16px rgba(220,200,141,.12);
  animation:schedPulse 1.2s ease-in-out 2;
}
@keyframes schedPulse {
  0%,100% { box-shadow:0 0 0 2px rgba(220,200,141,.35), 0 0 16px rgba(220,200,141,.12); }
  50% { box-shadow:0 0 0 3px rgba(220,200,141,.5), 0 0 24px rgba(220,200,141,.2); }
}
.sched-day-header {
  padding:10px 14px; background:var(--bg-3);
  font-weight:700; font-size:.9rem;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.sched-day-title small { font-weight:400; opacity:.5; font-size:.8em; }
.sched-day-header small { font-weight:400; color:var(--text-2); font-size:.75rem; }
.sched-day-total {
  margin-left:auto; font-size:.72rem; font-weight:600; color:#fff !important;
  padding:3px 10px; background:rgba(0,0,0,.35); border-radius:10px;
  border:1px solid rgba(255,255,255,.15);
}
.sched-closed-badge {
  font-size:.6rem; font-weight:700; color:#ef4444;
  background:rgba(239,68,68,.15); border-radius:10px;
  padding:2px 8px; text-transform:uppercase; letter-spacing:.3px;
}
.sched-day.sched-closed { opacity:.65; }
.sched-day.sched-closed .sched-day-header { background:rgba(239,68,68,.08); }
.sched-past { opacity:.55; }

/* ── SCHEDULE: Per-slot note (visible to all) ───────────── */
.sched-note {
  padding:5px 8px; font-size:.72rem; color:var(--text-2);
  background:rgba(251,191,36,.08); border-radius:4px; margin:4px 0;
  display:flex; align-items:flex-start; gap:5px; line-height:1.35;
}
.sched-note i { color:#fbbf24; margin-top:1px; flex-shrink:0; font-size:.65rem; }
.sched-note-btn {
  border:none; cursor:pointer; background:none; color:var(--text-3);
  font-size:.7rem; padding:2px 4px; border-radius:var(--radius);
  transition:all var(--transition); flex-shrink:0; margin-left:auto;
}
.sched-note-btn:hover { color:#fbbf24; background:rgba(251,191,36,.12); }

/* ── SCHEDULE: Shift cards (dynamic columns via inline style) */
.sched-shifts {
  display:grid; gap:0;
}
.sched-shift-card {
  padding:12px; border-top:1px solid var(--border);
  transition:background var(--transition);
}
.sched-shift-card:not(:last-child) { border-right:1px solid var(--border); }
.sched-shift-card.mine { background:rgba(220,200,141,.08); }
.sched-shift-card.shift-closed { background:rgba(239,68,68,.04); }

.sched-shift-head {
  display:flex; align-items:center; gap:6px; margin-bottom:8px;
}
.sched-shift-label {
  font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.4px; color:var(--text-3);
  display:inline-flex; align-items:center; gap:5px;
}
.sched-shift-label i { font-size:.7rem; }
.sched-shift-card.mine .sched-shift-label { color:var(--gold); }
.sched-shift-count {
  font-size:.62rem; font-weight:700; min-width:18px; height:18px;
  padding:0 5px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--bg-4); color:var(--text-2);
}
.sched-shift-card.mine .sched-shift-count { background:rgba(220,200,141,.2); color:var(--gold); }

/* Admin shift toggle */
.sched-shift-toggle {
  margin-left:auto; border:none; background:none; cursor:pointer;
  font-size:1.15rem; padding:2px; transition:color var(--transition);
}
.sched-shift-toggle.is-open { color:#34d399; }
.sched-shift-toggle.is-open:hover { color:#22c55e; }
.sched-shift-toggle.is-closed { color:#ef4444; }
.sched-shift-toggle.is-closed:hover { color:#dc2626; }

/* Closed shift label */
.sched-shift-closed {
  font-size:.7rem; font-weight:600; color:#ef4444; opacity:.7;
  display:flex; align-items:center; gap:4px; padding:6px 0;
}

/* Names list */
.sched-shift-names {
  display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px;
}
.sched-shift-names span {
  font-size:.72rem; padding:2px 8px; border-radius:10px;
  background:var(--bg-4); color:var(--text-2);
}
.sched-shift-names .sched-me {
  background:rgba(220,200,141,.18); color:var(--gold); font-weight:600;
}
.sched-name-pill {
  font:inherit; font-size:.72rem; padding:2px 8px; border-radius:10px;
  background:var(--bg-4); color:var(--text-2); border:none;
  display:inline-flex; align-items:center; vertical-align:middle;
}
.sched-name-pill.sched-me {
  background:rgba(220,200,141,.18); color:var(--gold); font-weight:600;
}
button.sched-name-removable {
  cursor:pointer;
  transition:background var(--transition), color var(--transition), box-shadow var(--transition);
}
button.sched-name-removable:hover {
  background:rgba(239,68,68,.15); color:#f87171; box-shadow:0 0 0 1px rgba(239,68,68,.35);
}
.sched-remove-warning {
  margin:0; font-size:.85rem; line-height:1.45; color:var(--text-2);
}
.sched-remove-warning strong { color:var(--text-1); }
.sched-modal-remove {
  background:#b91c1c; color:#fff; border:none; cursor:pointer;
  padding:7px 16px; border-radius:var(--radius); font-size:.8rem; font-weight:600;
  display:inline-flex; align-items:center; gap:5px; transition:all var(--transition);
}
.sched-modal-remove:hover:not(:disabled) { filter:brightness(1.12); }
.sched-modal-remove:disabled { opacity:.6; cursor:not-allowed; }
.sched-empty {
  font-size:.72rem; color:var(--text-3); font-style:italic;
  background:none !important; padding:2px 0 !important;
}

/* Sign up button */
.sched-signup-btn {
  width:100%; border:1px dashed var(--border); background:var(--bg-3);
  color:var(--text-2); font-size:.73rem; font-weight:600; cursor:pointer;
  padding:6px 0; border-radius:var(--radius); display:flex;
  align-items:center; justify-content:center; gap:5px;
  transition:all var(--transition);
}
.sched-signup-btn:hover { border-color:var(--gold); color:var(--gold); background:rgba(220,200,141,.06); }
.sched-signup-btn.signed-up {
  border-style:solid; border-color:rgba(220,200,141,.3);
  background:rgba(220,200,141,.1); color:var(--gold);
}
.sched-signup-btn.signed-up:hover { background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.3); color:#ef4444; }
.sched-locked .sched-signup-btn { display:none; }

/* ── SCHEDULE: Note modal ───────────────────────────────── */
.sched-note-overlay {
  position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,.65); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.sched-note-modal {
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--radius-lg); width:100%; max-width:420px; overflow:hidden;
}
.sched-modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--border);
}
.sched-modal-header h3 {
  font-size:.9rem; margin:0; color:var(--gold);
  display:flex; align-items:center; gap:8px;
  min-width:0; overflow:hidden; text-overflow:ellipsis;
}
.sched-modal-close {
  background:none; border:none; color:var(--text-3); cursor:pointer;
  font-size:1rem; padding:4px; border-radius:var(--radius); transition:all var(--transition);
}
.sched-modal-close:hover { color:var(--text-1); background:var(--bg-4); }
.sched-modal-body { padding:16px; }
.sched-note-input {
  width:100%; border:1px solid var(--border); background:var(--bg-3);
  color:var(--text-1); border-radius:var(--radius); padding:10px 12px;
  font-size:.85rem; resize:vertical; font-family:inherit; box-sizing:border-box;
}
.sched-note-input:focus { border-color:var(--gold); outline:none; }
.sched-note-charcount {
  text-align:right; font-size:.65rem; color:var(--text-3); padding:2px 4px 0;
}
.sched-modal-footer {
  display:flex; justify-content:flex-end; gap:8px;
  padding:12px 16px; border-top:1px solid var(--border);
}
.sched-modal-cancel {
  background:var(--bg-4); color:var(--text-2); border:none; cursor:pointer;
  padding:7px 16px; border-radius:var(--radius); font-size:.8rem; font-weight:600;
  transition:all var(--transition);
}
.sched-modal-cancel:hover { background:var(--bg-3); color:var(--text-1); }
.sched-modal-save {
  background:var(--gold); color:#000; border:none; cursor:pointer;
  padding:7px 16px; border-radius:var(--radius); font-size:.8rem; font-weight:600;
  display:inline-flex; align-items:center; gap:5px; transition:all var(--transition);
}
.sched-modal-save:hover { filter:brightness(1.1); }

/* ── ADMIN ───────────────────────────────────────────────── */
.admin-toolbar {
  padding:12px; display:flex; gap:8px; align-items:center;
  border-bottom:1px solid var(--border);
}

.user-list { padding:8px 12px; }
.bulk-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; background:var(--bg-1); border-bottom:1px solid var(--border);
  flex-wrap:wrap; gap:8px;
}
.bulk-bar-left { display:flex; align-items:center; gap:10px; }
.bulk-bar-right { display:flex; align-items:center; gap:6px; }
.bulk-select-all {
  display:flex; align-items:center; gap:6px; cursor:pointer;
  font-size:.78rem; color:var(--text-2);
}
.bulk-select-all input { accent-color:var(--gold); width:16px; height:16px; }
.bulk-count { font-size:.72rem; color:var(--text-3); font-weight:600; }
.bulk-user-check {
  accent-color:var(--gold); width:18px; height:18px; flex-shrink:0; cursor:pointer;
}
.bulk-group-list {
  display:flex; flex-direction:column; gap:4px; max-height:350px; overflow-y:auto;
  margin-top:10px;
}
.bulk-group-pick {
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--bg-1); color:var(--text-1); cursor:pointer;
  font-size:.82rem; text-align:left; transition:all .15s;
}
.bulk-group-pick:hover { border-color:var(--gold); background:rgba(220,200,141,.06); }
#btnBulkToggle.active { background:var(--bg-2); border-color:var(--text-3); }
.user-row {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:var(--radius);
  transition:background var(--transition); cursor:pointer;
  border-bottom:1px solid var(--border);
}
.user-row:last-child { border-bottom:none; }
.user-row:hover { background:var(--bg-3); }
.user-row-avatar {
  width:30px; height:30px; border-radius:50%; overflow:hidden;
  background:var(--bg-4); display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.7rem; color:var(--gold); flex-shrink:0;
}
.user-row-info {
  flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;
}
.user-row-info > :first-child {
  display:flex; align-items:center; gap:5px; flex-wrap:wrap;
}
.user-row-name {
  font-weight:600; font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.user-row-groups { display:flex; gap:2px; align-items:center; flex-wrap:wrap; }
.badge-group-dot {
  width:14px; height:14px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; color:#fff;
  font-size:.42rem; cursor:default; opacity:.8;
}
.user-row:hover .badge-group-dot { opacity:1; }
.user-row-actions { display:flex; gap:3px; flex-shrink:0; }
.user-row-actions button {
  width:22px; height:22px; border:none; border-radius:5px;
  background:transparent; color:var(--text-3); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:.65rem;
  transition:all var(--transition);
}
.user-row-actions button:hover { background:var(--bg-4); color:var(--text-1); }
.user-row-actions button.btn-del:hover { background:var(--red); color:#fff; }

/* ── MODAL ───────────────────────────────────────────────── */
.modal-overlay {
  display:none; position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,.65); backdrop-filter:blur(4px);
  align-items:center; justify-content:center; padding:16px;
}
.modal-overlay.open { display:flex; }
.modal-box {
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:24px 20px;
  width:100%; max-width:420px; max-height:90vh; overflow-y:auto;
}
.modal-box h2 { font-size:1.1rem; margin-bottom:16px; color:var(--gold); }

/* ── INSTALL STEPS ───────────────────────────────────────── */
.install-steps { display:flex; flex-direction:column; gap:12px; }
.install-step {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; background:var(--bg-3); border-radius:var(--radius);
  font-size:.85rem; line-height:1.4;
}
.install-num {
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--bronze),var(--gold));
  color:var(--bg-0); font-weight:800; font-size:.8rem;
  display:flex; align-items:center; justify-content:center;
}

/* iOS install banner */
.ios-install-banner {
  position:fixed; bottom:0; left:0; right:0; z-index:9000;
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; padding-bottom:max(14px, env(safe-area-inset-bottom));
  background:var(--bg-2); border-top:1px solid var(--border-gold);
  box-shadow:0 -4px 24px rgba(0,0,0,.4);
  transform:translateY(100%); transition:transform .35s ease-out;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.ios-install-banner.show { transform:translateY(0); }
.ios-banner-icon {
  width:40px; height:40px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg,var(--gold),var(--bronze));
  display:flex; align-items:center; justify-content:center;
  color:var(--bg-0); font-size:1.1rem;
}
.ios-banner-text { flex:1; min-width:0; line-height:1.35; }
.ios-banner-text strong { display:block; font-size:.88rem; color:var(--text-1); }
.ios-banner-text span { font-size:.75rem; color:var(--text-2); }
.ios-banner-close {
  width:30px; height:30px; border:none; border-radius:50%; flex-shrink:0;
  background:var(--bg-4); color:var(--text-2); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:.8rem;
  transition:background .15s;
}
.ios-banner-close:hover { background:var(--bg-3); }

[data-theme="light"] .ios-install-banner { background:#fff; box-shadow:0 -4px 16px rgba(0,0,0,.1); }
[data-theme="light"] .ios-banner-close { background:var(--bg-3); }

/* ── DIRECT MESSAGES ─────────────────────────────────────── */
.dm-sidebar-item {
  padding:6px 16px !important; gap:8px !important;
  display:flex !important; align-items:center !important;
  white-space:nowrap; overflow:hidden;
}
.dm-sidebar-name { font-weight:600; font-size:.82rem; flex-shrink:0; }
.dm-sidebar-preview {
  font-size:.72rem; color:var(--text-3); margin-left:6px;
  overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.dm-banner { --group-color:#f472b6; }

/* DM Back button in banner */
.dm-back-btn {
  background:none; border:none; color:var(--text-2); cursor:pointer;
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border-radius:8px; font-size:1rem; flex-shrink:0; margin-right:2px; padding:0;
  transition:background var(--transition), color var(--transition);
}
.dm-back-btn i { background:none; width:auto; height:auto; color:inherit; }
.dm-back-btn:hover { background:rgba(255,255,255,.1); color:var(--text-1); }

/* DM Banner: avatar + status */
.dm-banner-avatar-wrap {
  position:relative; flex-shrink:0; line-height:0;
}
.dm-banner-dot {
  position:absolute; bottom:-1px; right:-1px;
  width:10px; height:10px; border-radius:50%;
  border:2px solid var(--bg-1); display:none;
}
.dm-banner-dot.dm-online { display:block; background:#22c55e; }
.dm-banner-dot.dm-offline { display:block; background:#6b7280; }
.dm-banner-name-wrap {
  display:flex; flex-direction:column; min-width:0; gap:0;
}
.dm-banner-name {
  font-weight:600; font-size:.88rem; color:var(--text-1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dm-banner-status {
  font-size:.65rem; color:var(--text-3); line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dm-banner-status:empty { display:none; }

/* DM Inbox View */
.dm-inbox-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px 12px; border-bottom:1px solid var(--border);
}
.dm-inbox-header span { font-size:1.15rem; font-weight:700; color:var(--text-1); }
.dm-inbox-list { overflow-y:auto; flex:1; }
.dm-inbox-swipe {
  position:relative; overflow:hidden;
}
.dm-inbox-swipe-action {
  position:absolute; left:0; top:0; bottom:0; width:70px;
  background:var(--red); display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.15rem; opacity:0; transition:opacity .15s;
}
.dm-inbox-row {
  display:flex; align-items:center; gap:12px;
  padding:12px 18px; cursor:pointer;
  border-bottom:1px solid var(--border);
  transition:background var(--transition);
  background:var(--bg-1); position:relative; z-index:1;
}
.dm-inbox-row:hover { background:var(--bg-2); }
.dm-inbox-row.dm-inbox-unread { background:color-mix(in srgb, var(--gold) 5%, var(--bg-1)); }
.dm-inbox-avatar { flex-shrink:0; position:relative; }
.dm-inbox-avatar .user-bubble,
.dm-inbox-avatar .dm-avatar { width:42px; height:42px; font-size:.9rem; }
.dm-inbox-dot {
  position:absolute; bottom:0; right:0;
  width:12px; height:12px; border-radius:50%;
  border:2px solid var(--bg-1);
}
.dm-inbox-dot.dm-online { background:#22c55e; }
.dm-inbox-dot.dm-offline { background:#6b7280; }
.dm-inbox-info { flex:1; min-width:0; }
.dm-inbox-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:2px; }
.dm-inbox-name { font-weight:600; color:var(--text-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dm-inbox-time { font-size:.72rem; color:var(--text-3); white-space:nowrap; flex-shrink:0; }
.dm-inbox-preview { font-size:.82rem; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dm-inbox-unread .dm-inbox-name { color:var(--gold); }
.dm-inbox-unread .dm-inbox-preview { color:var(--text-2); font-weight:500; }
.dm-inbox-badge {
  flex-shrink:0; min-width:22px; height:22px; padding:0 6px;
  border-radius:12px; background:var(--red); color:#fff;
  font-size:.72rem; font-weight:700; display:flex; align-items:center; justify-content:center;
}
.dm-inbox-del {
  flex-shrink:0; background:none; border:none; cursor:pointer;
  color:var(--text-3); font-size:.8rem; padding:6px 8px;
  border-radius:6px; opacity:0; pointer-events:none;
  transition:opacity .12s, color .12s, background .12s;
}
.dm-inbox-row:hover .dm-inbox-del { opacity:1; pointer-events:auto; }
.dm-inbox-del:hover { color:var(--red); background:rgba(239,68,68,.1); }
@media (hover:none) {
  .dm-inbox-del { display:none; }
}
.dm-inbox-empty {
  text-align:center; padding:60px 20px; color:var(--text-3);
}
.dm-inbox-empty i { font-size:2.5rem; margin-bottom:12px; display:block; opacity:.5; }
.dm-inbox-empty p { font-size:.95rem; }

/* DM contact picker in modal */
.dm-contact-search {
  width:100%; padding:9px 12px; margin-bottom:8px;
  background:var(--bg-1); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text-1); font-size:.82rem;
}
.dm-contact-search:focus { border-color:var(--gold); outline:none; }
.dm-contact-search::placeholder { color:var(--text-3); }
.dm-contact-list { max-height:45vh; overflow-y:auto; }
.dm-pick-row {
  display:flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:var(--radius);
  cursor:pointer; transition:background var(--transition);
}
.dm-pick-row:hover { background:var(--bg-3); }
.dm-pick-name { flex:1; font-size:.82rem; font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dm-pick-badge {
  font-size:.55rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  padding:1px 6px; border-radius:3px; line-height:1.4; flex-shrink:0;
}
.dm-pick-badge-admin { background:rgba(251,191,36,.15); color:#fbbf24; }
.dm-pick-badge-mod { background:rgba(96,165,250,.15); color:#60a5fa; }
.dm-pick-badge-user { background:rgba(255,255,255,.06); color:var(--text-3); }

/* ── ACTIVITY LOG ────────────────────────────────────────── */
.activity-filters {
  display:flex; gap:8px; padding:8px 12px;
  border-bottom:1px solid var(--border); flex-shrink:0;
}
.activity-log { padding:0; overflow-y:auto; flex:1; }

/* Tree sections */
.act-section { border-bottom:1px solid var(--border); }
.act-header {
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  cursor:pointer; transition:background .15s; user-select:none;
}
.act-header:hover { background:var(--bg-2); }
.act-header-name { font-weight:600; font-size:.82rem; color:var(--text-1); }
.act-header-count {
  margin-left:auto; font-size:.65rem; font-weight:700; color:var(--text-3);
  background:var(--bg-3); padding:2px 7px; border-radius:10px;
}
.act-chevron {
  font-size:.55rem; color:var(--text-3);
  transition:transform .2s;
}
.act-header[data-collapsed="false"] .act-chevron { transform:rotate(90deg); }

.act-body { padding:0 0 0 18px; }
.act-row {
  padding:6px 14px 6px 10px;
  border-top:1px solid var(--bg-3);
  position:relative;
}
.act-row-content {
  font-size:.8rem; color:var(--text-1); line-height:1.4;
  word-break:break-word;
}
.act-text { display:inline; }
.act-thumb {
  width:48px; height:36px; object-fit:cover; border-radius:6px;
  cursor:pointer; vertical-align:middle; margin:2px 4px 2px 0;
  transition:filter .15s;
}
.act-thumb:hover { filter:brightness(1.15); }
.act-row-foot {
  display:flex; align-items:center; gap:8px; margin-top:2px;
}
.act-row-time { font-size:.6rem; color:var(--text-3); }
.act-del {
  background:none; border:none; cursor:pointer;
  color:var(--text-3); font-size:.6rem; padding:2px 4px;
  border-radius:4px; transition:color .15s;
  margin-left:auto; opacity:0;
}
.act-row:hover .act-del { opacity:1; }
.act-del:hover { color:var(--red); }

/* Admin context menu (avatar click) */
.user-ctx-menu {
  position:fixed; z-index:9000;
  background:var(--bg-1); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:0 8px 24px rgba(0,0,0,.4);
  min-width:170px; overflow:hidden;
}
.ctx-header {
  padding:10px 14px; font-weight:700; font-size:.8rem;
  border-bottom:1px solid var(--border); color:var(--text-1);
}
.user-ctx-menu button {
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 14px; background:none; border:none;
  font-size:.8rem; color:var(--text-1); cursor:pointer;
  transition:background .12s;
}
.user-ctx-menu button:hover { background:var(--bg-3); }
.user-ctx-menu button i { width:16px; text-align:center; color:var(--text-3); font-size:.75rem; }
.admin-clickable { cursor:pointer; }
.admin-clickable:hover { filter:brightness(1.2); }

/* Pending signups */
.pending-list { padding:8px 12px; overflow-y:auto; flex:1; }
.pending-row {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px; border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.pending-info { display:flex; align-items:center; gap:10px; min-width:0; }
.pending-name { font-weight:600; font-size:.85rem; }
.pending-time { font-size:.68rem; color:var(--text-3); }
.pending-actions { display:flex; gap:6px; flex-shrink:0; }
/* ── Application review ──────────────────────────────── */
.app-review-photo { width:80px; height:80px; object-fit:cover; border-radius:8px; cursor:pointer; border:2px solid var(--border); transition:transform .2s; }
.app-review-photo:hover { transform:scale(1.05); }
.appq-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
.appq-info { min-width:0; flex:1; }
.appq-text { font-size:.85rem; font-weight:500; color:var(--text-1); }
.appq-meta { display:flex; gap:4px; margin-top:3px; flex-wrap:wrap; }
.appq-meta .badge { font-size:.6rem; padding:2px 6px; }
.appq-actions { display:flex; gap:4px; flex-shrink:0; }
.legacy-count-badge { margin-left:auto; min-width:18px; height:18px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; font-size:.65rem; font-weight:700; background:var(--text-3); color:#fff; padding:0 5px; }

.pending-count-badge {
  margin-left:auto; min-width:18px; height:18px; border-radius:9px;
  background:var(--red); color:#fff; font-size:.6rem; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 5px; line-height:1;
}

/* ── USER STAT BAR (People + Manage Users) ─────────────── */
.user-stat-bar {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px 14px 6px; font-size:.78rem; color:var(--text-2);
}
.usb-item { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.usb-total i { color:var(--text-3); font-size:.6rem; }
.usb-online i { color:var(--green); font-size:.5rem; }
.usb-inactive i { color:var(--red, #e74c3c); font-size:.65rem; }

/* ── PEOPLE DIRECTORY ────────────────────────────────────── */
.people-search-wrap {
  position:relative; padding:10px 12px 4px;
}
.people-search {
  width:100%; padding:8px 12px 8px 32px;
  background:var(--bg-1); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text-1); font-size:.82rem;
}
.people-search:focus { border-color:var(--gold); outline:none; }
.people-search::placeholder { color:var(--text-3); }
.people-search-icon {
  position:absolute; left:22px; top:50%; transform:translateY(-50%);
  color:var(--text-3); font-size:.7rem; pointer-events:none; margin-top:2px;
}
.people-grid {
  display:flex; flex-direction:column; gap:0;
  padding:4px 0; overflow-y:auto; flex:1;
}
.people-card {
  display:flex; align-items:center; gap:10px;
  padding:8px 14px;
  transition:background .15s;
}
.people-card:hover { background:var(--bg-2); }
.people-card + .people-card { border-top:1px solid var(--border); }
.people-info { flex:1; min-width:0; }
.people-name { font-weight:600; font-size:.82rem; display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.people-meta { font-size:.65rem; color:var(--text-3); margin-top:1px; }
.people-role {
  font-size:.5rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  padding:1px 5px; border-radius:3px; line-height:1.4; flex-shrink:0;
}
.people-role-admin { background:rgba(251,191,36,.15); color:#fbbf24; }
.people-role-mod { background:rgba(96,165,250,.15); color:#60a5fa; }
.people-role-user { background:rgba(255,255,255,.06); color:var(--text-3); }
.people-role-you { background:rgba(220,200,141,.12); color:#dcc88d; }
.people-dm { flex-shrink:0; font-size:.68rem !important; padding:5px 10px !important; }

/* ── ONLINE STATUS ──────────────────────────────────────── */
.avatar-online-wrap {
  position:relative; flex-shrink:0;
}
.online-dot {
  position:absolute; bottom:0; right:0;
  width:10px; height:10px; border-radius:50%;
  background:#22c55e; border:2px solid var(--bg-0);
  box-sizing:border-box;
}
.active-now-text {
  color:#22c55e; font-weight:600;
}
.inactive-now-text {
  color:#ef4444; font-weight:600;
  background:rgba(239,68,68,.12); padding:1px 7px; border-radius:10px;
  font-size:.62rem; display:inline-block;
}
.offline-dot {
  position:absolute; bottom:0; right:0;
  width:10px; height:10px; border-radius:50%;
  background:#ef4444; border:2px solid var(--bg-0);
  box-sizing:border-box;
}
.badge-inactive-pulse {
  background:rgba(239,68,68,.15); color:#ef4444; font-weight:600;
  font-size:.6rem; padding:2px 8px; border-radius:10px; display:inline-block;
  animation: inactive-flash 2s ease-in-out infinite;
}
.badge-online-pulse {
  background:rgba(34,197,94,.15); color:#22c55e; font-weight:600;
  font-size:.6rem; padding:2px 8px; border-radius:10px; display:inline-block;
}
@keyframes inactive-flash {
  0%, 100% { opacity:1; }
  50% { opacity:.4; }
}

/* ── ANNOUNCEMENT PERMANENT TIMESTAMP ────────────────────── */
.msg-announce-time {
  font-size:.62rem; color:var(--text-3); text-align:center;
  margin-bottom:2px; padding:0 8px; letter-spacing:.02em;
}

/* ── REACTIONS ───────────────────────────────────────────── */
.msg-react-row {
  display:flex; align-items:center; gap:4px;
  padding:0 44px; min-height:0;
  position:relative;
}
.msg-react-mine { justify-content:flex-end; }
.msg-react-other { justify-content:flex-start; }
.react-counts {
  display:flex; gap:3px; flex-wrap:wrap;
}
.react-pill {
  display:inline-flex; align-items:center; gap:3px;
  padding:2px 7px; border-radius:12px;
  background:var(--bg-2); border:1px solid var(--border);
  cursor:pointer; font-size:.7rem; transition:background .15s, border-color .15s;
}
.react-pill:hover { background:var(--bg-3); }
.react-mine {
  background:rgba(220,200,141,.12); border-color:rgba(220,200,141,.3);
}
.react-pill-emoji { font-size:.75rem; line-height:1; }
.react-pill-count { font-size:.6rem; font-weight:700; color:var(--text-2); }
.react-add-btn {
  background:none; border:none; cursor:pointer;
  color:var(--text-3); font-size:.75rem; padding:2px 4px;
  border-radius:4px; transition:color .15s;
}
.react-add-btn:hover { color:var(--gold); }

/* Reaction detail popup */
.rd-header { margin-bottom:10px; }
.rd-tabs {
  display:flex; gap:4px; flex-wrap:wrap; margin-bottom:12px;
  border-bottom:1px solid var(--border); padding-bottom:8px;
}
.rd-tab {
  padding:5px 10px; border-radius:16px; border:1px solid var(--border);
  background:var(--bg-1); color:var(--text-2); font-size:.78rem;
  cursor:pointer; transition:all .15s; white-space:nowrap;
}
.rd-tab:hover { background:var(--bg-3); }
.rd-tab.active { background:var(--gold); color:#1a1a2e; border-color:var(--gold); font-weight:600; }
.rd-list { max-height:260px; overflow-y:auto; }
.rd-user {
  display:flex; align-items:center; gap:10px; padding:7px 4px;
  border-bottom:1px solid var(--border);
}
.rd-user:last-child { border-bottom:none; }
.rd-avatar { width:32px; height:32px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.rd-avatar-letter {
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--gold), #8b6914);
  color:#fff; font-weight:700; font-size:.8rem;
}
.rd-name { font-size:.85rem; color:var(--text-1); font-weight:500; }
.rd-emoji-section { margin-bottom:8px; }
.rd-emoji-header { font-size:1.1rem; padding:4px 0 2px; }

.react-picker {
  display:flex; gap:2px; padding:5px 8px;
  background:var(--bg-1); border:1px solid var(--border);
  border-radius:20px; box-shadow:0 4px 16px rgba(0,0,0,.25);
  position:fixed; z-index:999;
  animation:reactPopIn .15s ease;
}
@keyframes reactPopIn { from { opacity:0; transform:scale(.9) translateY(4px); } to { opacity:1; transform:scale(1) translateY(0); } }
.react-emoji {
  background:none; border:none; cursor:pointer;
  font-size:1.2rem; padding:4px; border-radius:6px;
  transition:transform .12s, background .12s;
  line-height:1;
}
.react-emoji:hover { transform:scale(1.3); background:var(--bg-3); }

/* ── REPLY-TO QUOTE (inside message bubble) ─────────────── */
.msg-reply-quote {
  display:flex; flex-direction:column; gap:1px;
  padding:6px 10px; margin:-4px -6px 6px -6px;
  background:rgba(255,255,255,.06); border-left:3px solid var(--gold);
  border-radius:6px; cursor:pointer;
  transition:background .15s;
  max-width:100%; overflow:hidden;
}
.msg-reply-quote:hover { background:rgba(255,255,255,.10); }
.msg-reply-sender {
  font-size:.68rem; font-weight:700; color:var(--gold);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.msg-reply-preview {
  font-size:.72rem; color:var(--text-3); line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:240px;
}

/* Reply compose bar (above chat input) */
.reply-compose-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 14px; background:var(--bg-1); border-top:1px solid var(--border);
  gap:10px; flex-shrink:0;
  animation:replyBarIn .2s ease;
}
@keyframes replyBarIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.reply-compose-info {
  display:flex; align-items:center; gap:10px;
  min-width:0; flex:1;
}
.reply-compose-icon {
  color:var(--gold); font-size:.85rem; flex-shrink:0;
}
.reply-compose-text {
  display:flex; flex-direction:column; gap:1px; min-width:0;
}
.reply-compose-name {
  font-size:.72rem; font-weight:700; color:var(--gold);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.reply-compose-preview {
  font-size:.7rem; color:var(--text-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.reply-compose-cancel {
  background:none; border:none; cursor:pointer;
  color:var(--text-3); font-size:.9rem; padding:4px 6px;
  border-radius:50%; transition:color .15s, background .15s;
  flex-shrink:0;
}
.reply-compose-cancel:hover { color:var(--red); background:rgba(255,255,255,.06); }

/* Highlight flash when scrolling to replied-to message */
.msg-highlight {
  animation:msgHighlight 1.5s ease;
}
@keyframes msgHighlight {
  0%, 100% { background:transparent; }
  20% { background:rgba(220,200,141,.18); border-radius:14px; }
  60% { background:rgba(220,200,141,.08); }
}

/* ── MESSAGE ACTION SHEET (long-press menu) ─────────────── */
.msg-action-backdrop {
  position:fixed; inset:0; z-index:1100;
  background:rgba(0,0,0,.45);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}
.msg-action-backdrop.active {
  opacity:1; pointer-events:auto;
}
.msg-action-sheet {
  width:100%; max-width:420px;
  background:var(--bg-1);
  border-top-left-radius:18px; border-top-right-radius:18px;
  padding:6px 0 max(12px, env(safe-area-inset-bottom));
  transform:translateY(100%);
  transition:transform .28s cubic-bezier(.22,1,.36,1);
  box-shadow:0 -4px 24px rgba(0,0,0,.35);
}
.msg-action-backdrop.active .msg-action-sheet {
  transform:translateY(0);
}
.msg-action-handle {
  width:36px; height:4px; border-radius:2px;
  background:var(--border); margin:6px auto 8px;
}
.msg-action-item {
  display:flex; align-items:center; gap:14px;
  width:100%; padding:14px 24px;
  background:none; border:none; color:var(--text-1);
  font-size:.92rem; font-family:var(--font);
  cursor:pointer; transition:background .12s;
  text-align:left;
}
.msg-action-item:hover,
.msg-action-item:active { background:var(--bg-2); }
.msg-action-item i {
  width:20px; text-align:center; font-size:.95rem;
  color:var(--text-2);
}
.msg-action-item[data-action="reply"] i { color:var(--gold); }
.msg-action-item[data-action="delete"] { color:var(--red); }
.msg-action-item[data-action="delete"] i { color:var(--red); }
.msg-action-warn { color:#f59e0b !important; }
.msg-action-warn i { color:#f59e0b !important; }
.msg-action-important { color:#fbbf24 !important; }
.msg-action-important i { color:#fbbf24 !important; }

/* ── IMPORTANT MESSAGE (admin-flagged) ───────────────────── */
.msg-group-important {
  position:relative;
  z-index:2;
}
.msg-important {
  position:relative;
  overflow:visible;
  isolation:isolate;
  animation:msgImportantPulse 2.4s ease-in-out infinite;
  box-shadow:0 0 16px rgba(245,158,11,.4), 0 0 0 2px rgba(245,158,11,.55);
}
.msg-important::before {
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:18px;
  padding:3px;
  background:linear-gradient(90deg,#f59e0b,#ef4444,#a855f7,#3b82f6,#22c55e,#eab308,#f59e0b);
  background-size:400% 100%;
  animation:msgImportantSpectrum 5s linear infinite;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  z-index:0;
}
.msg-important::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(245,158,11,.22),rgba(168,85,247,.16),rgba(59,130,246,.12));
  background-size:300% 300%;
  animation:msgImportantGlow 4s ease infinite;
  pointer-events:none;
  z-index:0;
}
.msg-important > *:not(.msg-hover-bar) {
  position:relative;
  z-index:1;
}
.msg-mine.msg-important {
  background:linear-gradient(135deg,rgba(42,35,80,.95),rgba(58,42,96,.95));
  box-shadow:0 0 18px rgba(245,158,11,.45), 0 0 28px rgba(168,85,247,.25), 0 0 0 2px rgba(251,191,36,.6);
}
.msg-other.msg-important {
  box-shadow:0 0 16px rgba(245,158,11,.35), 0 0 0 2px rgba(245,158,11,.5);
}
.msg-important-badge {
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:.62rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#fbbf24;
  margin-bottom:6px;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(245,158,11,.18);
  animation:msgImportantBadgePulse 2s ease-in-out infinite;
  position:relative;
  z-index:1;
}
.msg-important-badge-mine {
  display:flex;
  width:100%;
  justify-content:flex-end;
}
.msg-important-badge i { font-size:.58rem; }
.msg-flag-important-btn {
  position:absolute; top:4px; width:22px; height:22px;
  border-radius:50%; background:rgba(245,158,11,.15); color:#fbbf24; border:none;
  font-size:.58rem; cursor:pointer; display:none;
  align-items:center; justify-content:center; z-index:2;
}
.msg:hover .msg-flag-important-btn,
.msg-flag-important-btn.active { display:flex; }
.msg-flag-important-btn:hover { background:#f59e0b; color:#1a1a2e; }
.msg-flag-important-btn.active {
  background:linear-gradient(135deg,#f59e0b,#a855f7);
  color:#fff;
  animation:msgImportantBadgePulse 1.5s ease-in-out infinite;
}
@keyframes msgImportantSpectrum {
  0% { background-position:0% 50%; }
  100% { background-position:400% 50%; }
}
@keyframes msgImportantPulse {
  0%, 100% { transform:scale(1); box-shadow:0 0 10px rgba(245,158,11,.3); }
  50% { transform:scale(1.015); box-shadow:0 0 22px rgba(168,85,247,.45), 0 0 32px rgba(59,130,246,.2); }
}
@keyframes msgImportantGlow {
  0%, 100% { background-position:0% 50%; opacity:.85; }
  50% { background-position:100% 50%; opacity:1; }
}
@keyframes msgImportantBadgePulse {
  0%, 100% { opacity:1; }
  50% { opacity:.72; }
}
[data-theme="light"] .msg-important::after {
  background:linear-gradient(135deg,rgba(245,158,11,.28),rgba(168,85,247,.2),rgba(59,130,246,.16));
}
[data-theme="light"] .msg-mine.msg-important {
  box-shadow:0 0 16px rgba(245,158,11,.4), 0 0 0 2px rgba(217,119,6,.55);
}

/* ── DESKTOP HOVER TOOLBAR (react / reply / more) ───────── */
.msg-hover-bar {
  position:absolute; top:50%; transform:translateY(-50%);
  display:flex; gap:1px;
  background:var(--bg-1); border:1px solid var(--border);
  border-radius:18px; padding:2px 3px;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
  opacity:0; pointer-events:none;
  transition:opacity .12s ease;
  z-index:20; white-space:nowrap;
}
.msg-hover-other { left:100%; margin-left:6px; }
.msg-hover-mine  { right:100%; margin-right:6px; }
.msg-hover-bar::before {
  content:''; position:absolute; top:-4px; bottom:-4px;
}
.msg-hover-other::before { right:100%; width:12px; }
.msg-hover-mine::before  { left:100%; width:12px; }
.msg:hover > .msg-hover-bar {
  opacity:1; pointer-events:auto;
}
@media (hover:none) {
  .msg-hover-bar { display:none !important; }
  .msg-group.msg-show-actions { z-index:5; }
  .msg-group.msg-show-actions .msg-hover-bar {
    display:flex !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }
  .msg-group.msg-show-actions .msg-flag-important-btn,
  .msg-group.msg-show-actions .msg-delete,
  .msg-group.msg-show-actions .msg-edit-btn,
  .msg-group.msg-show-actions .msg-warn-btn {
    display:flex !important;
  }
}
.msg-hbtn {
  background:none; border:none; cursor:pointer;
  color:var(--text-3); font-size:.82rem;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; transition:background .12s, color .12s;
}
.msg-hbtn:hover { background:var(--bg-3); color:var(--text-1); }

/* ── READ-ONLY CHANNEL NOTICE ───────────────────────────── */
.chat-readonly-notice {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; font-size:.78rem; color:var(--text-3);
  border-top:1px solid var(--border); background:var(--bg-0);
  flex-shrink:0;
}
.chat-readonly-notice i { color:var(--gold); font-size:.8rem; }

/* ── ACTIVITY PROFILE CARD ──────────────────────────────── */
.act-profile {
  padding:10px 14px; border-bottom:1px solid var(--border);
  background:var(--bg-1);
}
.act-profile-name {
  font-weight:700; font-size:.85rem; display:flex; align-items:center; gap:6px;
}
.act-profile-dates {
  display:flex; gap:16px; margin-top:4px; flex-wrap:wrap;
}
.act-profile-dates span {
  font-size:.65rem; color:var(--text-3); display:flex; align-items:center; gap:4px;
}
.act-profile-dates i { font-size:.55rem; color:var(--text-3); }

/* ── MONITORING NOTICE ───────────────────────────────────── */
.monitor-notice {
  margin-top:20px; padding:16px;
  background:rgba(239,68,68,.06); border:1px solid rgba(239,68,68,.18);
  border-radius:var(--radius-lg);
  display:flex; gap:12px; align-items:flex-start;
}
.monitor-notice > i {
  font-size:1.2rem; color:var(--red); flex-shrink:0; margin-top:2px;
}
.monitor-notice strong {
  display:block; font-size:.8rem; margin-bottom:4px; color:var(--red);
  text-transform:uppercase; letter-spacing:.5px;
}
.monitor-notice p {
  font-size:.78rem; color:var(--text-2); line-height:1.55; margin:0;
}

/* ── EMPTY STATE ─────────────────────────────────────────── */
.empty-state {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; height:100%; color:var(--text-3); text-align:center;
}
.empty-state i { font-size:3rem; margin-bottom:12px; color:var(--bg-4); }
.empty-state p { font-size:.9rem; }

.view-empty { display:flex; }

/* ── HOME DASHBOARD ──────────────────────────────────────── */
.home-dash {
  width:100%; max-width:640px; margin:0 auto; padding:28px 16px;
  display:flex; flex-direction:column; gap:20px;
  overflow-y:auto; height:100%;
}
.home-greeting {
  font-size:1.35rem; font-weight:700; color:var(--text-1);
}
.home-greeting span { color:var(--gold); }

.home-cards { display:flex; flex-direction:column; gap:14px; }
.home-card {
  background:var(--bg-2); border:1px solid var(--bg-3);
  border-radius:12px; overflow:hidden;
  transition: box-shadow .15s;
}
.home-card:hover { box-shadow:0 2px 12px rgba(0,0,0,.15); }
.home-card-header {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; font-weight:600; font-size:.9rem;
  color:var(--text-1); border-bottom:1px solid var(--bg-3);
}
.home-card-link {
  margin-left:auto; font-size:.75rem; font-weight:600;
  color:var(--gold); text-decoration:none;
  transition:opacity .12s;
}
.home-card-link:hover { opacity:.75; }
.home-card-header i { font-size:1rem; }
.home-card-dm .home-card-header i { color:#5b8def; }
.home-card-announce .home-card-header i { color:#f0a030; }
.home-card-rooms .home-card-header i { color:#8b5cf6; }

.home-card-body { padding:8px 12px; }
.home-none { color:var(--text-3); font-size:.82rem; margin:4px 0; font-style:italic; }

.home-row {
  display:flex; align-items:center; gap:10px;
  padding:7px 6px; border-radius:8px; cursor:pointer;
  transition: background .12s;
}
.home-row:hover { background:var(--bg-3); }
.home-row-avatar {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:var(--gold); color:#fff; display:flex; align-items:center;
  justify-content:center; font-size:.75rem; font-weight:600; overflow:hidden;
}
.home-row-avatar img { width:100%; height:100%; object-fit:cover; }
.home-row-info { flex:1; min-width:0; }
.home-row-name {
  font-size:.85rem; font-weight:600; color:var(--text-1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.home-row-sub {
  font-size:.75rem; color:var(--text-3); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.home-row-badge {
  background:#ef4444; color:#fff; font-size:.7rem; font-weight:700;
  padding:2px 7px; border-radius:10px; flex-shrink:0; min-width:20px;
  text-align:center;
}

.home-room-row {
  display:flex; align-items:center; gap:10px;
  padding:7px 6px; border-radius:8px; cursor:pointer;
  transition: background .12s;
}
.home-room-row:hover { background:var(--bg-3); }
.home-room-icon {
  width:32px; height:32px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; color:#fff;
}
.home-room-name {
  flex:1; font-size:.85rem; font-weight:600; color:var(--text-1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.home-actions {
  display:flex; gap:10px; flex-wrap:wrap; padding-top:6px;
}
.home-action-btn {
  flex:1; min-width:100px; background:var(--bg-3); border:1px solid var(--bg-4);
  color:var(--text-1); padding:10px 14px; border-radius:10px;
  font-size:.82rem; font-weight:600; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
  transition: background .12s, transform .1s;
}
.home-action-btn:hover { background:var(--gold); color:#fff; transform:translateY(-1px); }
.home-action-btn i { font-size:.85rem; }

[data-theme="light"] .home-card { background:#fff; border-color:#e5e7eb; }
[data-theme="light"] .home-card:hover { box-shadow:0 2px 12px rgba(0,0,0,.08); }
[data-theme="light"] .home-row:hover { background:#f3f4f6; }
[data-theme="light"] .home-room-row:hover { background:#f3f4f6; }
[data-theme="light"] .home-action-btn { background:#f3f4f6; border-color:#d1d5db; }

/* Suspended / Inactive popup */
.susp-popup-list { max-height:50vh; overflow-y:auto; }
.susp-popup-row {
  display:flex; align-items:center; gap:10px;
  padding:8px 0; border-bottom:1px solid var(--border);
}
.susp-popup-row:last-child { border-bottom:none; }
.susp-popup-name { flex:1; font-weight:600; font-size:.85rem; }
.susp-popup-time { font-size:.75rem; color:var(--text-3); }
.susp-popup-unsuspend { flex-shrink:0; }

/* ── ADMIN SETTINGS ──────────────────────────────────────── */
.as-stats {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-bottom:16px;
}
@media (max-width:480px) { .as-stats { grid-template-columns:repeat(2, 1fr); } }
.as-stat {
  background:var(--bg-2); border:1px solid var(--bg-3); border-radius:10px;
  padding:14px 10px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:2px;
}
.as-stat i { font-size:.85rem; color:var(--gold); margin-bottom:2px; }
.as-stat span { font-size:1.05rem; font-weight:700; color:var(--text-1); }
.as-stat small { font-size:.68rem; color:var(--text-3); }

.as-card {
  background:var(--bg-2); border:1px solid var(--bg-3); border-radius:12px;
  padding:16px 18px; margin-bottom:12px; overflow:hidden;
}
.as-card-title {
  font-size:.88rem; font-weight:700; color:var(--text-1); margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
}
.as-card-title i { color:var(--gold); font-size:.85rem; }
.as-card-danger { border-color:rgba(239,68,68,.25); }
.as-card-danger .as-card-title i { color:var(--red); }

.as-field {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 0; border-bottom:1px solid var(--bg-3);
}
.as-field:last-of-type { border-bottom:none; }
.as-label {
  font-size:.82rem; font-weight:500; color:var(--text-2); flex-shrink:0;
}
.as-inline { display:flex; align-items:center; gap:5px; }
.as-unit { font-size:.78rem; color:var(--text-3); }
.as-hint {
  font-size:.72rem; color:var(--text-3); padding-top:6px; line-height:1.4;
}
.as-input {
  background:var(--bg-3); border:1px solid var(--bg-4); color:var(--text-1);
  border-radius:8px; padding:6px 10px; font-size:.82rem;
  outline:none; transition:border-color .15s;
}
.as-input:focus { border-color:var(--gold); }
.as-input-num { width:72px; text-align:center; }
.as-input-wide { width:180px; }
.as-input-time { width:auto; }
select.as-input { width:auto; cursor:pointer; }

.as-logo-row { display:flex; align-items:center; gap:8px; }
.as-logo-thumb {
  width:40px; height:40px; border-radius:10px; overflow:hidden; flex-shrink:0;
  background:var(--bg-3); display:flex; align-items:center; justify-content:center;
  border:1px solid var(--bg-4); color:var(--text-3); font-size:1rem;
}
.as-logo-thumb img { width:100%; height:100%; object-fit:contain; }

.as-btn-danger {
  background:rgba(239,68,68,.12); color:var(--red); border:none; cursor:pointer;
  border-radius:8px; padding:6px 10px; font-size:.78rem; font-weight:600;
  transition:background .15s;
}
.as-btn-danger:hover { background:rgba(239,68,68,.25); }

.as-save-btn {
  width:100%; padding:12px; border:none; border-radius:10px; cursor:pointer;
  background:var(--gold); color:#000; font-size:.88rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-bottom:12px; transition:opacity .15s;
}
.as-save-btn:hover { opacity:.85; }

.as-sched-grid {
  display:grid; grid-template-columns:repeat(7, 1fr); gap:6px;
}
.as-sched-day {
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.as-sched-label {
  font-size:.7rem; font-weight:700; color:var(--text-2);
  text-transform:uppercase; letter-spacing:.3px;
}
.as-sched-day .as-input-num {
  width:100%; text-align:center; padding:6px 4px; font-size:.85rem;
}

/* Slot editor in admin settings */
.as-slot-list { display:flex; flex-direction:column; gap:6px; }
.as-slot-row {
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  background:var(--bg-3); border:1px solid var(--border); border-radius:var(--radius);
}
.as-slot-icon-preview { width:18px; text-align:center; color:var(--gold); font-size:.85rem; flex-shrink:0; }
.as-slot-row .as-slot-icon { width:120px; padding:6px; font-size:.78rem; flex-shrink:0; }
.as-slot-row .as-slot-label { font-size:.85rem; min-width:0; flex:1; }
.as-slot-del {
  background:none; border:none; color:var(--text-3); cursor:pointer;
  padding:4px 8px; font-size:.75rem; border-radius:var(--radius); flex-shrink:0;
  transition:all var(--transition);
}
.as-slot-del:hover { color:#ef4444; background:rgba(239,68,68,.1); }
.as-slot-add-row {
  display:flex; gap:6px; align-items:center; margin-top:10px;
}
.as-slot-add-row input { font-size:.85rem; min-width:0; }
.as-slot-add-row input:first-child { flex:0 0 100px; }
.as-slot-add-row input:nth-child(2) { flex:1; }
.as-slot-add-row .btn { flex-shrink:0; white-space:nowrap; }

/* Settings saved toast */
.settings-toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--gold); color:#000; padding:10px 24px; border-radius:var(--radius-lg);
  font-size:.85rem; font-weight:600; z-index:9999; pointer-events:none;
  opacity:0; transition:opacity .25s, transform .25s;
  display:flex; align-items:center; gap:8px;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.settings-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

@media (max-width:600px) {
  .sched-shifts { grid-template-columns:1fr !important; }
  .sched-shift-card:not(:last-child) { border-right:none; }
  .as-slot-row { flex-wrap:wrap; }
  .as-slot-row .as-slot-icon { width:100px; }
  .as-slot-row .as-slot-label { flex:1 1 100%; order:3; margin-top:4px; }
  .as-slot-add-row { flex-wrap:wrap; }
  .as-slot-add-row input:first-child { flex:1 1 80px; }
}
@media (max-width:480px) {
  .as-sched-grid { grid-template-columns:repeat(4, 1fr); }
  .as-card { padding:14px 12px; }
  .as-field { flex-wrap:wrap; gap:4px; }
  .as-input-wide { width:100%; }
  select.as-input { width:100%; }
  .as-vt-add-row { flex-wrap:wrap; }
  .as-vt-add-row .as-input { flex:1 1 100px; }
  .as-vt-key { max-width:80px; font-size:.62rem; }
}

[data-theme="light"] .as-stat { background:#fff; border-color:#e5e7eb; }
[data-theme="light"] .as-card { background:#fff; border-color:#e5e7eb; }
[data-theme="light"] .as-input { background:#f9fafb; border-color:#d1d5db; }
[data-theme="light"] .as-logo-thumb { background:#f3f4f6; border-color:#d1d5db; }
[data-theme="light"] .as-save-btn { color:#000; }

/* ── SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--bg-4); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-3); }

/* ── DAY SEPARATOR ───────────────────────────────────────── */
.msg-day-separator {
  display:flex; align-items:center; justify-content:center;
  margin:14px 0 8px; gap:12px; align-self:stretch;
}
.msg-day-separator::before,
.msg-day-separator::after {
  content:''; flex:1; height:1px; background:var(--border);
}
.msg-day-separator span {
  font-size:.68rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.5px; color:var(--text-3); white-space:nowrap;
  padding:4px 12px; background:var(--bg-2); border-radius:20px;
  border:1px solid var(--border);
}

/* ── UNREAD DIVIDER ─────────────────────────────────────── */
.unread-divider {
  display:flex; align-items:center; justify-content:center;
  margin:14px 0 8px; gap:12px; align-self:stretch;
}
.unread-divider::before,
.unread-divider::after {
  content:''; flex:1; height:1px; background:#d4a030;
}
.unread-divider span {
  font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; color:#d4a030; white-space:nowrap;
  padding:4px 14px; background:rgba(212,160,48,.1); border-radius:20px;
  border:1px solid rgba(212,160,48,.3);
}

/* ── SCROLL TO BOTTOM BUTTON ────────────────────────────── */
.scroll-bottom-btn {
  position:absolute; bottom:12px; right:16px; z-index:50;
  width:40px; height:40px; border-radius:50%;
  background:var(--bg-3,rgba(30,30,30,.95)); color:var(--text-1,#fff);
  border:1px solid var(--border,rgba(255,255,255,.12));
  box-shadow:0 4px 16px rgba(0,0,0,.35);
  cursor:pointer; font-size:1rem;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s, box-shadow .15s, opacity .15s;
  opacity:.9;
}
.scroll-bottom-btn:hover { transform:scale(1.08); opacity:1; box-shadow:0 6px 20px rgba(0,0,0,.45); }
.scroll-bottom-btn:active { transform:scale(.93); }
[data-theme="light"] .scroll-bottom-btn {
  background:var(--bg-1,#fff); color:var(--text-1,#1a1a1a);
  box-shadow:0 4px 16px rgba(0,0,0,.12);
}
[data-theme="light"] .unread-divider span {
  background:rgba(212,160,48,.08);
}

/* ── SETTINGS ────────────────────────────────────────────── */
.settings-card {
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:28px 20px;
}
.settings-avatar-wrap {
  display:flex; flex-direction:column; align-items:center;
  width:fit-content; margin:0 auto 16px;
  cursor:pointer;
}
.settings-avatar-circle {
  position:relative; width:80px; height:80px;
}
.settings-avatar {
  width:80px; height:80px;
  background:linear-gradient(135deg,var(--bronze),var(--gold));
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; font-weight:800; color:var(--bg-0);
}
.settings-avatar-img {
  width:80px; height:80px; border-radius:50%; object-fit:cover; display:block;
}
.settings-avatar-edit {
  position:absolute; bottom:2px; right:2px; width:26px; height:26px;
  border-radius:50%; background:var(--gold); color:var(--bg-0);
  display:flex; align-items:center; justify-content:center;
  font-size:.65rem; box-shadow:0 2px 6px rgba(0,0,0,.3);
  z-index:1;
}
.settings-avatar-label {
  display:block; margin-top:8px;
  font-size:.72rem; font-weight:600; color:var(--gold);
  letter-spacing:.02em;
}

/* ── THEME SWITCHER ──────────────────────────────────────── */
.theme-switcher {
  display:flex; gap:8px;
}
.theme-opt {
  flex:1; padding:12px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--bg-2); color:var(--text-2); font-family:var(--font);
  font-size:.85rem; font-weight:600; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:all var(--transition);
}
.theme-opt:hover { border-color:var(--gold); color:var(--text-1); }
.theme-opt.active {
  background:rgba(220,200,141,.12); border-color:var(--gold); color:var(--gold);
}

/* ── DESKTOP ─────────────────────────────────────────────── */
@media (min-width:768px) {
  .sidebar {
    transform:translateX(0);
    top:var(--topbar-h);
  }
  .sidebar-overlay { display:none !important; }
  .topbar { left:var(--sidebar-w); }
  #btnSidebar { display:none; }
  .main { left:var(--sidebar-w); }
}

/* ============================================================
   LIGHT THEME
   ============================================================ */
[data-theme="light"] {
  --bg-0:        #f5f5f7;
  --bg-1:        #ffffff;
  --bg-2:        #f0f0f3;
  --bg-3:        #e5e5ea;
  --bg-4:        #d1d1d6;
  --border:      rgba(0,0,0,.1);
  --border-gold: rgba(158,110,61,.35);
  --text-1:      #1c1c1e;
  --text-2:      #636366;
  --text-3:      #aeaeb2;
  --red:         #dc2626;
  --green:       #16a34a;
  --blue:        #2563eb;
}

[data-theme="light"] body {
  color:var(--text-1);
  background:var(--bg-0);
}

[data-theme="light"] .topbar {
  background:var(--bg-1);
  border-bottom-color:var(--border);
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}

[data-theme="light"] .sidebar {
  background:var(--bg-1);
  border-right-color:var(--border);
  box-shadow:2px 0 8px rgba(0,0,0,.06);
}

[data-theme="light"] .sidebar-item:hover { background:var(--bg-3); }
[data-theme="light"] .sidebar-item.active { background:rgba(158,110,61,.1); }

[data-theme="light"] .msg-mine {
  background:linear-gradient(135deg,#e8daa8,#dcc88d);
  color:#1c1c1e;
}
[data-theme="light"] .msg-mine .msg-sender { color:#7a5530; }
[data-theme="light"] .msg-mine .msg-time { color:#9e6e3d; }

[data-theme="light"] .msg-other {
  background:var(--bg-3);
  color:var(--text-1);
}

[data-theme="light"] .msg-sender { color:var(--bronze); }
[data-theme="light"] .msg-timestamp { color:var(--text-3); }

[data-theme="light"] .msg-day-separator span {
  background:var(--bg-1);
  border-color:var(--border);
  color:var(--text-2);
}

[data-theme="light"] .chat-banner {
  background:linear-gradient(135deg, color-mix(in srgb, var(--group-color, var(--bronze)) 10%, var(--bg-1)), var(--bg-1));
  border-bottom-color:color-mix(in srgb, var(--group-color, var(--bronze)) 18%, transparent);
}
[data-theme="light"] .chat-banner i {
  background:color-mix(in srgb, var(--group-color, var(--bronze)) 10%, transparent);
}
[data-theme="light"] .chat-watermark { opacity:.035; }
[data-theme="light"] .dm-back-btn:hover { background:rgba(0,0,0,.08); }
[data-theme="light"] .dm-inbox-row.dm-inbox-unread { background:color-mix(in srgb, var(--bronze) 5%, var(--bg-1)); }
[data-theme="light"] .dm-inbox-unread .dm-inbox-name { color:var(--bronze); }

[data-theme="light"] .chat-input {
  background:var(--bg-1);
  border-top-color:var(--border);
}
[data-theme="light"] .chat-input textarea {
  background:var(--bg-2);
  border-color:var(--border);
  color:var(--text-1);
}

[data-theme="light"] .login-card {
  background:var(--bg-1);
  box-shadow:0 4px 24px rgba(0,0,0,.08);
}

[data-theme="light"] .settings-card {
  background:var(--bg-1);
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}

[data-theme="light"] .sched-day { background:var(--bg-1); }
[data-theme="light"] .sched-day-header { background:var(--bg-2); }
[data-theme="light"] .sched-day-total {
  color:var(--text-1) !important;
  background:rgba(0,0,0,.06);
  border-color:rgba(0,0,0,.1);
}
[data-theme="light"] .sched-shift-card.mine { background:rgba(158,110,61,.06); }
[data-theme="light"] .sched-shift-card.shift-closed { background:rgba(239,68,68,.03); }
[data-theme="light"] .sched-note { background:rgba(251,191,36,.06); }
[data-theme="light"] .sched-note-input { background:var(--bg-1); }
[data-theme="light"] .sched-note-modal { background:var(--bg-1); }
[data-theme="light"] .sched-signup-btn { background:var(--bg-2); }

[data-theme="light"] .user-row:hover { background:var(--bg-2); }
[data-theme="light"] .user-row-avatar { background:var(--bg-3); }
[data-theme="light"] .user-row-actions button { background:var(--bg-3); }

[data-theme="light"] .modal-overlay { background:rgba(0,0,0,.3); }
[data-theme="light"] .modal-box {
  background:var(--bg-1);
  box-shadow:0 8px 32px rgba(0,0,0,.12);
}

[data-theme="light"] .badge-admin { background:rgba(220,38,38,.1); color:#dc2626; }
[data-theme="light"] .badge-user { background:rgba(37,99,235,.1); color:#2563eb; }
[data-theme="light"] .badge-mod { background:rgba(147,51,234,.1); color:#7c3aed; }
[data-theme="light"] .badge-suspended { background:rgba(220,38,38,.1); color:var(--red); }

[data-theme="light"] .people-card:hover { background:var(--bg-2); }
[data-theme="light"] .people-card + .people-card { border-top-color:var(--border); }
[data-theme="light"] .people-search { background:var(--bg-0); }
[data-theme="light"] .people-role-admin { background:rgba(158,110,61,.1); color:#9e6e3d; }
[data-theme="light"] .people-role-mod { background:rgba(59,130,246,.1); color:#3b82f6; }
[data-theme="light"] .people-role-user { background:rgba(0,0,0,.04); color:var(--text-3); }
[data-theme="light"] .people-role-you { background:rgba(158,110,61,.08); color:#9e6e3d; }
[data-theme="light"] .act-profile { background:var(--bg-0); }
[data-theme="light"] .online-dot { border-color:var(--bg-0); }
[data-theme="light"] .offline-dot { border-color:var(--bg-0); }
[data-theme="light"] .active-now-text { color:#16a34a; }
[data-theme="light"] .inactive-now-text { color:#dc2626; background:rgba(220,38,38,.1); }
[data-theme="light"] .badge-inactive-pulse { background:rgba(220,38,38,.1); color:#dc2626; }
[data-theme="light"] .badge-online-pulse { background:rgba(22,163,74,.1); color:#16a34a; }
[data-theme="light"] .react-pill { background:var(--bg-1); border-color:var(--border); }
[data-theme="light"] .react-pill:hover { background:var(--bg-2); }
[data-theme="light"] .react-mine { background:rgba(158,110,61,.08); border-color:rgba(158,110,61,.2); }
[data-theme="light"] .react-picker { background:var(--bg-0); box-shadow:0 4px 16px rgba(0,0,0,.1); }
[data-theme="light"] .react-emoji:hover { background:var(--bg-2); }
[data-theme="light"] .user-bubble-letter { background:linear-gradient(135deg, var(--bronze), #8b6914); }

[data-theme="light"] .alert-error { background:rgba(220,38,38,.08); border-color:rgba(220,38,38,.2); color:#991b1b; }
[data-theme="light"] .alert-success { background:rgba(22,163,74,.08); border-color:rgba(22,163,74,.2); color:#166534; }

[data-theme="light"] .field input,
[data-theme="light"] .field select,
[data-theme="light"] .select-input {
  background:var(--bg-0);
  border-color:var(--border);
  color:var(--text-1);
}
[data-theme="light"] .check-grid { background:var(--bg-0); border-color:var(--border); }
[data-theme="light"] .check-row:hover { background:var(--bg-2); }
[data-theme="light"] .check-row + .check-row { border-top-color:var(--border); }
[data-theme="light"] .check-row input:checked + .check-indicator { background:var(--bronze); border-color:var(--bronze); }

[data-theme="light"] .theme-opt {
  background:var(--bg-1);
  border-color:var(--border);
  color:var(--text-2);
}
[data-theme="light"] .theme-opt.active {
  background:rgba(158,110,61,.08);
  border-color:var(--bronze);
  color:var(--bronze);
}

[data-theme="light"] .btn-secondary { background:var(--bg-3); color:var(--text-1); }

[data-theme="light"] .dm-pick-row:hover { background:var(--bg-2); }
[data-theme="light"] .dm-contact-search { background:var(--bg-0); }
[data-theme="light"] .dm-pick-badge-admin { background:rgba(158,110,61,.1); color:#9e6e3d; }
[data-theme="light"] .dm-pick-badge-mod { background:rgba(59,130,246,.1); color:#3b82f6; }
[data-theme="light"] .dm-pick-badge-user { background:rgba(0,0,0,.04); color:var(--text-3); }
[data-theme="light"] .act-section { border-bottom-color:var(--border); }
[data-theme="light"] .act-header:hover { background:var(--bg-2); }
[data-theme="light"] .act-row { border-top-color:var(--border); }
[data-theme="light"] .user-ctx-menu { background:var(--bg-0); box-shadow:0 8px 24px rgba(0,0,0,.12); }
[data-theme="light"] .user-ctx-menu button:hover { background:var(--bg-2); }
[data-theme="light"] .login-tab.active { background:var(--bronze); color:#fff; }
[data-theme="light"] .login-tab:not(.active):hover { background:var(--bg-2); }
[data-theme="light"] .pending-row { border-bottom-color:var(--border); }
[data-theme="light"] .monitor-notice {
  background:rgba(220,38,38,.04); border-color:rgba(220,38,38,.12);
}

[data-theme="light"] ::-webkit-scrollbar-thumb { background:var(--bg-4); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background:var(--text-3); }

/* ── SUSPENSION OVERLAY ───────────────────────────────── */
.suspend-overlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.85); backdrop-filter:blur(12px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.suspend-card {
  background:var(--bg-1); border:1px solid var(--border);
  border-radius:16px; padding:36px 28px; max-width:380px; width:100%;
  text-align:center; box-shadow:0 24px 64px rgba(0,0,0,.5);
}
.suspend-icon {
  width:64px; height:64px; margin:0 auto 16px;
  border-radius:50%; background:rgba(239,68,68,.12);
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; color:var(--red);
}
.suspend-card h2 {
  margin:0 0 8px; font-size:1.15rem; color:var(--text-1);
}
.suspend-msg {
  color:var(--text-2); font-size:.85rem; margin:0 0 12px; line-height:1.5;
}
.suspend-until {
  font-size:.8rem; color:var(--gold); margin:0 0 20px;
  padding:10px 14px; border-radius:var(--radius);
  background:rgba(220,200,141,.08); border:1px solid rgba(220,200,141,.15);
  line-height:1.6;
}
.suspend-until i { margin-right:6px; }
.suspend-actions { margin-bottom:16px; }
.suspend-actions .btn { min-width:140px; }
.suspend-help {
  font-size:.7rem; color:var(--text-3); margin:0; line-height:1.5;
}

/* ── READ RECEIPTS ───────────────────────────────────── */
.msg-read-receipt {
  font-size:.6rem; color:var(--gold); text-align:right;
  padding:1px 4px 0; opacity:.7;
  align-self:flex-end;
}
.msg-read-receipt i { font-size:.55rem; margin-right:2px; }

/* ── NOTIFICATION BADGES ─────────────────────────────── */
.notif-dot {
  position:absolute; top:6px; right:6px;
  width:9px; height:9px; border-radius:50%;
  background:var(--red); border:2px solid var(--bg-0);
}
.topbar-btn { position:relative; }

.dm-unread-badge, .group-unread-badge {
  margin-left:auto; flex-shrink:0;
  min-width:18px; height:18px; border-radius:9px;
  background:var(--red); color:#fff; font-size:.6rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  padding:0 5px; line-height:1;
}

/* ── MUTE BUTTON IN BANNER ───────────────────────────── */
.banner-mute {
  background:none; border:none; cursor:pointer;
  color:var(--text-3); font-size:.85rem; padding:4px 8px;
  border-radius:var(--radius); transition:background .15s, color .15s;
  margin-left:auto; flex-shrink:0;
}
.banner-mute:hover { background:rgba(255,255,255,.08); color:var(--text-1); }

.dm-banner-actions {
  display:flex; align-items:center; gap:2px; margin-left:auto; flex-shrink:0;
}
.dm-call-btn {
  background:none; border:none; cursor:pointer;
  color:var(--text-3); font-size:.85rem; padding:6px 8px;
  border-radius:var(--radius); transition:background .15s, color .15s;
}
.dm-call-btn:hover { background:rgba(255,255,255,.08); color:#34d399; }

/* ── CALL OVERLAY ──────────────────────────────────── */
.call-overlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.92);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(10px);
}
#remoteAudio {
  position:fixed; left:-10000px; top:0;
  width:1px; height:1px; opacity:0;
  pointer-events:none;
}
.call-panel {
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:40px 32px; text-align:center; max-width:400px; width:100%;
}
.call-panel .call-avatar { width:80px; height:80px; }
.call-panel .call-avatar .avatar { width:80px!important; height:80px!important; font-size:2rem!important; }
.call-name { font-size:1.4rem; font-weight:700; color:#fff; }
.call-status { font-size:.9rem; color:rgba(255,255,255,.6); }
.call-timer {
  font-size:1.1rem; font-weight:600; color:#34d399;
  font-variant-numeric:tabular-nums;
}
.call-controls {
  display:flex; align-items:center; gap:16px; margin-top:24px;
}
.call-ctrl-btn {
  width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  font-size:1.2rem; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.12); color:#fff;
  transition:background .15s, transform .1s;
}
.call-ctrl-btn:hover { background:rgba(255,255,255,.2); transform:scale(1.05); }
.call-ctrl-btn:active { transform:scale(.95); }
.call-ctrl-end { background:#ef4444!important; }
.call-ctrl-end:hover { background:#dc2626!important; }
.call-ctrl-muted { background:rgba(255,255,255,.25); color:rgba(255,255,255,.5); }
.call-ctrl-active { background:rgba(52,211,153,.25); color:#34d399; }
.call-ctrl-active:hover { background:rgba(52,211,153,.35); }

.call-incoming-controls { display:flex; gap:32px; margin-top:28px; }
.call-ctrl-decline { background:#ef4444!important; }
.call-ctrl-decline:hover { background:#dc2626!important; }
.call-ctrl-accept { background:#22c55e!important; }
.call-ctrl-accept:hover { background:#16a34a!important; }

.call-video-wrap {
  position:relative; width:100%; max-width:480px; aspect-ratio:4/3;
  background:#000; border-radius:12px; overflow:hidden; margin:8px 0;
  display:flex;
}
.call-video-wrap video#remoteVideo {
  width:100%; height:100%; object-fit:cover;
}
.call-video-wrap video#localVideo {
  position:absolute; bottom:8px; right:8px;
  width:100px; height:75px; object-fit:cover;
  border-radius:8px; border:2px solid rgba(255,255,255,.3);
}

@keyframes callPulse {
  0%,100% { opacity:.6; }
  50% { opacity:1; }
}
.call-incoming .call-status { animation:callPulse 1.5s ease-in-out infinite; color:#34d399; }

/* ── FULLSCREEN VIDEO CALL ───────────────────────────── */
.call-overlay--video { background:#000; }
.call-overlay--video .call-panel {
  max-width:none; padding:0; width:100%; height:100%;
  position:relative; justify-content:flex-end; gap:0;
}
.call-overlay--video .call-avatar { display:none; }
.call-overlay--video .call-name {
  position:absolute; top:max(env(safe-area-inset-top,12px),12px);
  left:0; right:0; z-index:3;
  text-shadow:0 1px 8px rgba(0,0,0,.8);
  font-size:1.15rem;
}
.call-overlay--video .call-status {
  position:absolute; top:calc(max(env(safe-area-inset-top,12px),12px) + 32px);
  left:0; right:0; z-index:3;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.call-overlay--video .call-timer {
  position:absolute; top:calc(max(env(safe-area-inset-top,12px),12px) + 56px);
  left:0; right:0; z-index:3;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.call-overlay--video .call-video-wrap {
  position:absolute; inset:0; max-width:none; width:100%; height:100%;
  aspect-ratio:auto; border-radius:0; margin:0; z-index:1;
}
.call-overlay--video .call-video-wrap video#remoteVideo {
  width:100%; height:100%; object-fit:cover;
}
.call-overlay--video .call-video-wrap video#localVideo {
  width:110px; height:150px; bottom:max(env(safe-area-inset-bottom,16px),120px);
  right:16px; border-radius:14px; border:2px solid rgba(255,255,255,.4);
  z-index:4;
}
.call-overlay--video .call-controls {
  position:relative; z-index:5;
  margin:0 auto max(env(safe-area-inset-bottom,16px),24px);
  background:rgba(0,0,0,.45); backdrop-filter:blur(12px);
  border-radius:32px; padding:10px 24px;
}

/* ── ROOM TYPE PICKER (create chatroom modal) ────────── */
.room-type-list { display:flex; flex-direction:column; gap:6px; }
.room-type-card {
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  background:var(--bg-1); border:1px solid var(--border);
  border-radius:var(--radius); cursor:pointer;
  text-align:left; transition:border-color .15s, background .15s;
}
.room-type-card:hover {
  border-color:var(--gold); background:rgba(220,200,141,.06);
}
.room-type-icon {
  width:40px; height:40px; border-radius:10px;
  background:var(--gold); color:var(--bg-0);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; flex-shrink:0;
}
.room-type-info { display:flex; flex-direction:column; gap:2px; min-width:0; }
.room-type-info strong { font-size:.85rem; color:var(--text-1); }
.room-type-info span { font-size:.7rem; color:var(--text-3); line-height:1.3; }
.room-type-preview {
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  background:var(--bg-1); border:1px solid var(--border);
  border-radius:var(--radius); margin-top:10px;
  font-size:.75rem; color:var(--text-3);
}
.room-type-preview i { color:var(--gold); font-size:.8rem; }

/* ── GUEST LIST VIEW ─────────────────────────────────── */
.gl-banner {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; font-weight:600; font-size:.95rem;
  color:#fff; background:linear-gradient(135deg, rgba(251,191,36,.15), rgba(220,200,141,.08));
  border-bottom:1px solid var(--border);
}
.gl-banner i { color:var(--gold); font-size:1rem; }
.gl-banner span { flex:1; }
.gl-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 16px; border-bottom:1px solid var(--border);
}
.gl-day-label {
  font-size:.8rem; font-weight:600; color:var(--gold);
  display:flex; align-items:center; gap:6px;
}
.gl-count {
  text-align:center; padding:4px 16px 12px;
  font-size:.75rem; color:var(--text-3);
  display:flex; align-items:center; justify-content:center; gap:5px;
}
.gl-count i { color:var(--text-3); font-size:.65rem; }
.gl-checked-count { color:var(--green); }
.gl-checked-count i { color:var(--green); }
.gl-entries {
  flex:1; overflow-y:auto; padding:4px 12px 12px;
}
.gl-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:48px 16px; color:var(--text-3); gap:12px;
}
.gl-empty i { font-size:2rem; opacity:.3; }
.gl-empty p { font-size:.85rem; }
.gl-entry {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; margin-bottom:4px;
  background:var(--bg-1); border:1px solid var(--border);
  border-radius:var(--radius); transition:border-color .15s;
}
.gl-entry:hover { border-color:rgba(220,200,141,.25); }
.gl-entry-vip {
  border-color:rgba(251,191,36,.3);
  background:linear-gradient(135deg, rgba(251,191,36,.08), transparent);
}
.gl-entry-main { display:flex; align-items:center; gap:8px; flex:1; min-width:0; flex-wrap:wrap; }
.gl-guest-name { font-weight:600; font-size:.85rem; color:var(--text-1); }
.gl-note { font-size:.7rem; color:var(--text-3); }
.gl-vip-badge {
  font-size:.6rem; font-weight:700; color:#fbbf24; text-transform:uppercase;
  display:flex; align-items:center; gap:3px; letter-spacing:.03em;
}
.gl-vip-badge i { font-size:.55rem; }
.gl-checkin-btn {
  background:none; border:none; cursor:pointer; padding:0; flex-shrink:0;
  font-size:1.1rem; color:var(--text-3); transition:color .15s;
}
.gl-checkin-btn:hover { color:var(--text-2); }
.gl-checkin-btn.gl-checkin-done { color:var(--green); }
.gl-checked-in .gl-guest-name { text-decoration:line-through; opacity:.6; }
.gl-entry-meta {
  display:flex; align-items:center; gap:8px; flex-shrink:0;
}
.gl-added-by { font-size:.65rem; color:var(--text-3); white-space:nowrap; }
.gl-remove {
  background:none; border:none; cursor:pointer;
  color:var(--text-3); font-size:.7rem; padding:4px 6px;
  border-radius:4px; transition:color .15s, background .15s;
}
.gl-remove:hover { color:var(--red); background:rgba(239,68,68,.1); }
.gl-add-form {
  display:flex; align-items:center; gap:6px;
  padding:10px 12px; border-top:1px solid var(--border);
  background:var(--bg-0);
}
.gl-add-form input[type="text"] {
  flex:1; min-width:0; padding:10px 12px;
  background:var(--bg-1); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text-1); font-size:.82rem;
}
.gl-add-form input[type="text"]:focus { border-color:var(--gold); outline:none; }
.gl-add-form input[type="text"]::placeholder { color:var(--text-3); }
.gl-vip-toggle {
  display:flex; align-items:center; cursor:pointer;
  padding:8px; border-radius:var(--radius);
  color:var(--text-3); font-size:.9rem; transition:color .15s;
}
.gl-vip-toggle input { display:none; }
.gl-vip-toggle:has(input:checked) { color:#fbbf24; }
.gl-vip-toggle.active { color:#fbbf24; }

#viewGuestlist {
  display:flex; flex-direction:column; height:100%;
}
.gl-hist-list {
  display:flex; flex-direction:column;
  max-height:400px; overflow-y:auto; margin-top:8px;
}
.gl-hist-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border:none; border-bottom:1px solid var(--border);
  background:none; color:var(--text-1); cursor:pointer;
  font-size:.82rem; text-align:left; transition:background .15s;
  border-radius:var(--radius); margin-bottom:2px;
}
.gl-hist-row:hover { background:rgba(251,191,36,.08); }
.gl-hist-date { font-weight:600; }
.gl-hist-stats { display:flex; align-items:center; gap:10px; font-size:.72rem; color:var(--text-3); }
.gl-hist-vip { color:#fbbf24; }
.gl-hist-arrived { color:var(--green); }
.gl-hist-modal-header {
  display:flex; align-items:center; gap:12px; margin-bottom:12px;
}
.gl-hist-back {
  width:32px; height:32px; border-radius:50%; border:1px solid var(--border);
  background:none; color:var(--text-2); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; transition:all .15s; flex-shrink:0;
}
.gl-hist-back:hover { border-color:var(--gold); color:var(--gold); }
.gl-hist-summary {
  display:flex; align-items:center; gap:10px; font-size:.72rem; color:var(--text-3); margin-top:2px;
}
.gl-hist-entries {
  max-height:400px; overflow-y:auto; margin-top:8px;
  display:flex; flex-direction:column; gap:4px;
}
.gl-checkin-label { font-size:.65rem; font-weight:600; color:var(--green); display:flex; align-items:center; gap:3px; }
.gl-noshow-label { font-size:.65rem; font-weight:600; color:var(--text-3); display:flex; align-items:center; gap:3px; }
#viewStats {
  display:flex; flex-direction:column; height:100%; overflow-y:auto;
}
.stats-banner {
  padding:12px 16px; font-weight:700; font-size:.95rem;
  display:flex; align-items:center; gap:8px;
  background:linear-gradient(135deg, rgba(96,165,250,.12), transparent);
  border-bottom:1px solid var(--border);
}
.stats-banner i { color:var(--group-color, #60a5fa); }
.stats-toolbar {
  display:flex; gap:8px; padding:8px 16px; border-bottom:1px solid var(--border);
}
#statsEditToggle.active { background:var(--gold); color:#1a1a2e; border-color:var(--gold); }
.stats-date-label {
  padding:8px 16px; font-size:.75rem; font-weight:600;
  color:var(--text-2); display:flex; align-items:center; gap:6px;
}
.stats-grid { padding:8px 16px; flex:1; overflow-y:auto; }
.stats-empty {
  text-align:center; padding:48px 16px; color:var(--text-3);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.stats-empty i { font-size:2.5rem; margin-bottom:4px; opacity:.5; }
.stats-empty p { margin:0; font-size:.85rem; }
.stat-row {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  margin-bottom:4px; background:var(--bg-1); border:1px solid var(--border);
  border-radius:var(--radius); transition:border-color .15s;
}
.stat-row:hover { border-color:rgba(96,165,250,.3); }
.stat-label { flex:1; min-width:0; display:flex; align-items:center; gap:6px; }
.stat-name { font-weight:600; font-size:.85rem; color:var(--text-1); }
.stat-item-actions { display:inline-flex; gap:4px; }
.stat-item-actions button {
  background:none; border:none; cursor:pointer; color:var(--text-3);
  font-size:.65rem; width:20px; height:20px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  transition:color .15s, background .15s;
}
.stat-edit-item:hover { color:var(--gold); background:rgba(220,200,141,.1); }
.stat-del-item:hover { color:var(--red); background:rgba(239,68,68,.1); }
.stat-value-area {
  display:flex; align-items:center; gap:4px; flex-shrink:0;
}
.stat-minus, .stat-plus {
  width:28px; height:28px; border-radius:50%; border:1px solid var(--border);
  background:var(--bg-0); color:var(--text-2); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; transition:all .15s;
}
.stat-minus:hover, .stat-plus:hover { border-color:var(--gold); color:var(--gold); }
.stat-input {
  width:56px; text-align:center; padding:4px 0; border:1px solid var(--border);
  border-radius:6px; background:var(--bg-0); color:var(--text-1);
  font-size:.9rem; font-weight:700; font-family:inherit;
  -moz-appearance:textfield;
}
.stat-input::-webkit-outer-spin-button,
.stat-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.stat-input:focus { border-color:var(--gold); outline:none; }
.stat-meta { font-size:.6rem; color:var(--text-3); flex-shrink:0; white-space:nowrap; line-height:1.3; }
.stat-meta-time { display:block; font-size:.5rem; opacity:.6; line-height:1; }
.stats-history-wrap {
  max-height:60vh; overflow-y:auto; overflow-x:auto; margin-top:12px;
  border:1px solid var(--border); border-radius:var(--radius);
}
.stats-history-table {
  width:100%; border-collapse:collapse; font-size:.75rem;
}
.stats-history-table th {
  padding:6px 10px; text-align:left; font-weight:600; color:var(--text-2);
  border-bottom:1px solid var(--border); position:sticky; top:0;
  background:var(--bg-0);
}
.stats-history-table td {
  padding:6px 10px; border-bottom:1px solid var(--border); color:var(--text-1);
}
.stats-hist-date { font-weight:600; color:var(--text-2); white-space:nowrap; }

/* ── Light theme overrides for new elements ──────────── */
[data-theme="light"] .suspend-card { background:var(--bg-0); }
[data-theme="light"] .suspend-until { background:rgba(158,110,61,.06); border-color:rgba(158,110,61,.15); color:var(--bronze); }
[data-theme="light"] .msg-read-receipt { color:var(--bronze); }
[data-theme="light"] .banner-mute:hover { background:rgba(0,0,0,.05); color:var(--text-1); }
[data-theme="light"] .dm-call-btn:hover { background:rgba(0,0,0,.06); }
[data-theme="light"] .room-type-card { background:var(--bg-0); }
[data-theme="light"] .room-type-card:hover { background:rgba(158,110,61,.04); border-color:var(--bronze); }
[data-theme="light"] .room-type-icon { background:var(--bronze); }
[data-theme="light"] .room-type-preview { background:var(--bg-0); }
[data-theme="light"] .gl-entry { background:var(--bg-0); }
[data-theme="light"] .gl-hist-row:hover { background:rgba(158,110,61,.04); }
[data-theme="light"] .gl-add-form { background:var(--bg-0); }
[data-theme="light"] .gl-add-form input[type="text"] { background:var(--bg-1); }
[data-theme="light"] .gl-banner { background:linear-gradient(135deg, rgba(158,110,61,.08), transparent); }
[data-theme="light"] .gl-day-label { color:var(--bronze); }
[data-theme="light"] .dm-hide-btn:hover { background:rgba(239,68,68,.08); }
[data-theme="light"] .sidebar-section-toggle:hover { color:var(--text-1); }
[data-theme="light"] .msg-role-admin { background:rgba(158,110,61,.1); color:#9e6e3d; }
[data-theme="light"] .msg-role-mod { background:rgba(59,130,246,.1); color:#3b82f6; }
[data-theme="light"] .stat-row { background:var(--bg-0); }
[data-theme="light"] .stats-banner { background:linear-gradient(135deg, rgba(96,165,250,.08), transparent); }
[data-theme="light"] .stats-history-table th { background:var(--bg-1); }

/* ── @Mention highlight ──────────────────────────────── */
.mention-highlight {
  background:rgba(220,200,141,.18); color:var(--gold); font-weight:600;
  border-radius:3px; padding:0 3px;
}
.mention-dropdown {
  position:absolute; bottom:100%; left:8px; right:8px; max-height:280px; overflow-y:auto;
  background:var(--bg-0); border:1px solid var(--border); border-radius:12px;
  box-shadow:0 -8px 30px rgba(0,0,0,.35); z-index:100; margin-bottom:6px;
  padding:4px 0; scrollbar-width:thin;
  animation:mentionSlideUp .15s ease;
}
@keyframes mentionSlideUp {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:translateY(0); }
}
.mention-header {
  padding:8px 14px 4px; font-size:.65rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.8px; color:var(--text-3); user-select:none;
}
.mention-option {
  display:flex; align-items:center; gap:10px; padding:8px 14px;
  cursor:pointer; color:var(--text-1); transition:background .08s;
  border-radius:8px; margin:0 4px;
}
.mention-option:hover, .mention-active {
  background:var(--bg-1);
}
.mention-avatar { flex-shrink:0; line-height:0; }
.mention-avatar .user-bubble { width:30px; height:30px; }
.mention-name {
  font-size:.85rem; font-weight:500; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mention-role {
  font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  padding:2px 6px; border-radius:4px; flex-shrink:0;
}
.mention-role-admin { background:rgba(220,200,141,.15); color:var(--gold); }
.mention-role-mod { background:rgba(96,165,250,.12); color:#60a5fa; }
[data-theme="light"] .mention-dropdown { box-shadow:0 -6px 24px rgba(0,0,0,.12); }
[data-theme="light"] .mention-active { background:rgba(0,0,0,.05); }

/* ── Photo Gallery ───────────────────────────────────── */
.gallery-banner {
  background:linear-gradient(135deg, rgba(167,139,250,.12), transparent) !important;
}
#viewGallery { display:flex; flex-direction:column; overflow:hidden; }
#viewGallery[style*="display:none"] { display:none !important; }
.gallery-content {
  flex:1; overflow-y:auto; padding:0;
}
.gal-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--border);
  gap:10px; flex-wrap:wrap;
}
.gal-upload-wrap {
  display:flex; align-items:center; gap:10px;
}
.gal-count {
  font-size:.75rem; color:var(--text-3); font-weight:600;
}
.gal-album-title {
  display:flex; align-items:center; gap:8px;
  font-weight:600; font-size:.9rem; color:var(--text-1); flex:1; min-width:0;
}
.gal-album-title small { color:var(--text-3); font-weight:400; }
.gal-toolbar-actions {
  display:flex; align-items:center; gap:8px;
}
/* Gallery admin note */
.gal-note-wrap {
  display:flex; align-items:flex-start; gap:8px;
  padding:12px 16px; border-bottom:1px solid var(--border);
  background:color-mix(in srgb, var(--gold) 5%, var(--bg-1));
}
.gal-note-display {
  flex:1; font-size:.85rem; color:var(--text-2); line-height:1.5;
}
.gal-note-display i { color:var(--gold); margin-right:4px; font-size:.7rem; }
.gal-note-edit-btn {
  flex-shrink:0; width:28px; height:28px; border-radius:50%;
  background:transparent; border:none; color:var(--text-3);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:.7rem; transition:background .15s, color .15s;
}
.gal-note-edit-btn:hover { background:rgba(255,255,255,.08); color:var(--gold); }
.gal-note-input {
  flex:1; width:100%; min-height:60px; padding:10px 12px;
  background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text-1); font-size:.85rem; font-family:var(--font);
  resize:vertical;
}
.gal-note-input:focus { border-color:var(--gold); outline:none; }
.gal-note-actions { display:flex; gap:8px; margin-top:8px; }

.gal-empty {
  text-align:center; padding:60px 20px; color:var(--text-3);
}
.gal-empty i { font-size:2.5rem; margin-bottom:12px; display:block; opacity:.4; }
.gal-empty p { font-size:.92rem; }

/* Album grid */
.gal-album-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:14px; padding:16px;
}
.gal-album-card {
  background:var(--bg-2); border-radius:var(--radius);
  overflow:hidden; cursor:pointer;
  transition:transform .15s, box-shadow .15s;
  border:1px solid var(--border);
}
.gal-album-card:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,.15);
}
.gal-album-cover {
  width:100%; aspect-ratio:1; background:var(--bg-1);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.gal-album-cover img { width:100%; height:100%; object-fit:cover; }
.gal-album-cover i { font-size:2rem; color:var(--text-3); opacity:.3; }
.gal-album-info {
  display:flex; align-items:center; gap:8px; padding:10px 12px;
}
.gal-album-avatar { flex-shrink:0; }
.gal-album-meta { min-width:0; }
.gal-album-name {
  font-weight:600; font-size:.82rem; color:var(--text-1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;
}
.gal-album-count { font-size:.7rem; color:var(--text-3); }

/* Photo grid */
.gal-photo-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
  gap:6px; padding:12px;
}
.gal-photo-cell {
  position:relative; aspect-ratio:1; border-radius:6px;
  overflow:hidden; cursor:pointer; background:var(--bg-2);
}
.gal-photo-cell img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .2s;
}
.gal-photo-cell:hover img { transform:scale(1.05); }
.gal-photo-del {
  position:absolute; top:6px; right:6px;
  width:26px; height:26px; border-radius:50%;
  background:rgba(0,0,0,.55); border:none; color:#fff;
  font-size:.65rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .15s, background .15s;
}
.gal-photo-cell:hover .gal-photo-del { opacity:1; }
.gal-photo-del:hover { background:var(--red); }
@media (hover:none) {
  .gal-photo-del { opacity:1; }
}

/* Lightbox */
.gal-lightbox {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.92);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  opacity:0; transition:opacity .25s;
}
.gal-lightbox-show { opacity:1; }
.gal-lb-img {
  max-width:90vw; max-height:80vh; object-fit:contain;
  border-radius:6px; transition:opacity .15s;
}
.gal-lb-controls {
  display:flex; align-items:center; gap:16px;
  margin-top:16px;
}
.gal-lb-btn {
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.1); border:none; color:#fff;
  font-size:1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s;
}
.gal-lb-btn:hover { background:rgba(255,255,255,.22); }
.gal-lb-counter {
  color:rgba(255,255,255,.6); font-size:.82rem; font-weight:600;
  min-width:60px; text-align:center;
}

/* ── Lost & Found view ───────────────────────────────── */
.lf-banner {
  background:linear-gradient(135deg, rgba(245,158,11,.12), transparent) !important;
  --group-color:#f59e0b;
}
.lf-items {
  flex:1; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:8px;
  scrollbar-width:thin;
}
.lf-empty {
  text-align:center; padding:48px 24px; color:var(--text-3);
}
.lf-empty i { font-size:2rem; margin-bottom:12px; display:block; opacity:.4; }
.lf-empty p { margin:0; }
.lf-empty-sub { font-size:.75rem; margin-top:4px; opacity:.6; }

/* Compact card row */
.lf-card {
  background:var(--bg-1); border:1px solid var(--border); border-radius:10px;
  display:flex; align-items:center; gap:10px; padding:8px 10px;
  cursor:pointer; position:relative; transition:border-color .15s, background .15s;
  min-height:56px;
}
.lf-card:hover { border-color:rgba(245,158,11,.3); background:var(--bg-2); }
.lf-card:active { background:var(--bg-2); }
.lf-card-thumb {
  width:48px; height:48px; min-width:48px; border-radius:8px; overflow:hidden;
  background:var(--bg-2); display:flex; align-items:center; justify-content:center;
}
.lf-card-thumb img {
  width:100%; height:100%; object-fit:cover;
}
.lf-card-thumb i {
  font-size:1.1rem; color:var(--text-3); opacity:.5;
}
.lf-card-info {
  flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;
}
.lf-card-title {
  font-size:.82rem; color:var(--text-1); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-weight:500;
}
.lf-card-sub {
  display:flex; align-items:center; gap:6px; font-size:.68rem; color:var(--text-3);
  overflow:hidden; white-space:nowrap;
}
.lf-card-sub i { font-size:.6rem; opacity:.6; }
.lf-card-status {
  display:inline-flex; align-items:center; gap:3px; font-size:.65rem;
  padding:2px 8px; border-radius:10px; font-weight:600; white-space:nowrap;
}
.lf-status-open {
  background:rgba(245,158,11,.12); color:#f59e0b;
}
.lf-status-claimed {
  background:rgba(34,197,94,.12); color:#22c55e;
}
.lf-card-chevron {
  color:var(--text-3); opacity:.3; font-size:.7rem; margin-left:auto; min-width:14px;
  text-align:center;
}

/* Detail modal */
.lf-detail-img {
  width:100%; max-height:300px; border-radius:10px; overflow:hidden;
  background:#000; margin-bottom:14px; display:flex; align-items:center; justify-content:center;
}
.lf-detail-img img {
  width:100%; max-height:300px; object-fit:contain; cursor:pointer;
}
.lf-detail-desc {
  font-size:.88rem; color:var(--text-1); line-height:1.5;
  white-space:pre-wrap; word-break:break-word; margin-bottom:12px;
}
.lf-detail-meta {
  display:flex; flex-wrap:wrap; gap:10px; font-size:.72rem; color:var(--text-3);
  margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--border);
}
.lf-detail-meta i { margin-right:3px; opacity:.6; }
.lf-detail-claim {
  display:flex; flex-direction:column; gap:8px;
}
.lf-claim-btn {
  background:none; border:1px solid var(--border); color:var(--text-2);
  padding:8px 18px; border-radius:20px; font-size:.8rem; cursor:pointer;
  transition:all .15s; font-weight:600; width:100%; text-align:center;
}
.lf-claim-btn:hover { background:#f59e0b; color:#000; border-color:#f59e0b; }
.lf-claim-btn i { margin-right:5px; }
.lf-claimed-detail {
  background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.2);
  border-radius:10px; padding:10px 14px;
}
.lf-claimed-detail .lf-claimed-name {
  font-size:.82rem; color:#22c55e; font-weight:600; margin-bottom:2px;
}
.lf-claimed-detail .lf-claimed-name i { margin-right:4px; }
.lf-claimed-detail .lf-archive-note {
  font-size:.68rem; color:var(--text-3); margin-top:4px;
  display:flex; align-items:center; gap:4px;
}
.lf-unclaim-btn {
  background:none; border:1px solid var(--border); color:var(--text-3); cursor:pointer;
  font-size:.75rem; padding:6px 14px; border-radius:16px; transition:all .15s;
  margin-top:6px; width:100%; text-align:center;
}
.lf-unclaim-btn:hover { border-color:#ef4444; color:#ef4444; }
.lf-detail-delete {
  margin-top:12px; padding-top:12px; border-top:1px solid var(--border);
}
.lf-del-btn {
  background:none; border:1px solid rgba(239,68,68,.3); color:#ef4444;
  padding:7px 14px; border-radius:16px; font-size:.75rem; cursor:pointer;
  transition:all .15s; width:100%; text-align:center; font-weight:500;
}
.lf-del-btn:hover { background:rgba(239,68,68,.1); border-color:#ef4444; }
.lf-del-btn i { margin-right:5px; }
.lf-card.lf-is-claimed { border-color:rgba(34,197,94,.2); }
.lf-card.lf-is-claimed .lf-card-thumb { opacity:.5; }
.lf-card.lf-is-claimed .lf-card-title { opacity:.5; text-decoration:line-through; }

/* Post form */
.lf-post-form {
  display:flex; align-items:flex-end; gap:8px; padding:10px 12px;
  border-top:1px solid var(--border); background:var(--bg-0);
}
.lf-post-form textarea {
  flex:1; resize:none; overflow-y:auto; min-height:40px; max-height:100px;
  padding:10px 14px; border:1px solid var(--border); border-radius:20px;
  background:var(--bg-1); color:var(--text-1); font-size:.85rem;
  font-family:inherit; scrollbar-width:thin;
}
.lf-post-form textarea:focus { outline:none; border-color:#f59e0b; }
.lf-post-form .chat-attach { color:#f59e0b; }
[data-theme="light"] .lf-card { background:var(--bg-0); }
[data-theme="light"] .lf-post-form textarea { background:var(--bg-1); }

/* ── Promoter Scorecards ─────────────────────────────── */
.promo-period { font-size:.75rem; color:var(--text-3); margin-bottom:12px; }
.promo-period i { margin-right:4px; }
.promo-list { display:flex; flex-direction:column; gap:8px; }
.promo-card {
  display:flex; align-items:center; gap:12px; padding:10px 14px;
  background:var(--bg-1); border-radius:var(--radius); border:1px solid var(--border);
}
.promo-card-rank { font-size:1.2rem; min-width:28px; text-align:center; }
.promo-rank { font-size:.75rem; font-weight:700; color:var(--text-3); }
.promo-card-info { flex:1; min-width:0; }
.promo-card-name { font-weight:600; font-size:.85rem; color:var(--text-1); }
.promo-card-stats { display:flex; gap:10px; flex-wrap:wrap; font-size:.7rem; color:var(--text-3); margin-top:2px; }
.promo-card-stats i { margin-right:2px; }
.promo-card-rate { text-align:right; min-width:60px; }
.promo-rate-num { font-size:1.1rem; font-weight:700; color:var(--gold); }
.promo-rate-label { font-size:.55rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.5px; }
.promo-rate-bar { width:50px; height:4px; background:var(--bg-2); border-radius:2px; margin-top:3px; margin-left:auto; }
.promo-rate-bar > div { height:100%; background:var(--gold); border-radius:2px; transition:width .3s; }

/* ── Repeat Guest Hint ───────────────────────────────── */
.gl-repeat-hint {
  padding:6px 14px; font-size:.75rem; color:var(--gold); background:rgba(220,200,141,.08);
  border-left:3px solid var(--gold); margin:0 12px 4px; border-radius:0 var(--radius) var(--radius) 0;
}
.gl-repeat-hint i { margin-right:4px; }

/* ── Push notification popup ──────────────────────────── */
.push-popup-overlay {
  position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.65);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:pushFadeIn .3s ease;
}
@keyframes pushFadeIn { from { opacity:0; } to { opacity:1; } }
.push-popup-card {
  background:var(--bg-0); border-radius:16px; padding:32px 28px; text-align:center;
  max-width:360px; width:100%; box-shadow:0 12px 40px rgba(0,0,0,.35);
  animation:pushSlideUp .35s ease;
}
@keyframes pushSlideUp { from { transform:translateY(30px); opacity:0; } to { transform:translateY(0); opacity:1; } }
.push-popup-icon {
  width:64px; height:64px; border-radius:50%; margin:0 auto 16px;
  background:linear-gradient(135deg, var(--bronze), #e8d48b); display:flex;
  align-items:center; justify-content:center;
}
.push-popup-icon i { font-size:1.6rem; color:#0b0b0f; }
.push-popup-card h2 { margin:0 0 8px; font-size:1.25rem; color:var(--text-1); }
.push-popup-card p { margin:0 0 24px; font-size:.88rem; color:var(--text-2); line-height:1.5; }
.push-popup-actions { display:flex; flex-direction:column; gap:10px; }
.push-popup-skip {
  background:none; border:none; color:var(--text-3); font-size:.82rem;
  cursor:pointer; padding:8px;
}
.push-popup-skip:hover { color:var(--text-1); }

/* ── Push preferences toggles in My Account ──────────── */
.push-prefs-section { margin-top:16px; }
.push-master-toggle, .push-category-toggles { margin-bottom:4px; }
.push-toggle-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0; border-bottom:1px solid var(--border); font-size:.9rem; color:var(--text-1);
  cursor:pointer;
}
.push-toggle-row span { display:flex; align-items:center; gap:8px; }
.push-toggle-row span i { color:var(--bronze); }
.push-switch {
  position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0;
}
.push-switch input { opacity:0; width:0; height:0; }
.push-slider {
  position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0;
  background:var(--bg-2); border-radius:24px; transition:.25s;
}
.push-slider::before {
  content:''; position:absolute; height:18px; width:18px; left:3px; bottom:3px;
  background:#fff; border-radius:50%; transition:.25s;
}
.push-switch input:checked + .push-slider { background:var(--bronze); }
.push-switch input:checked + .push-slider::before { transform:translateX(20px); }

/* ── CHAT BOT ────────────────────────────────────────── */
.cb-header {
  display:flex; align-items:center; gap:16px; margin-bottom:20px;
}
.cb-bot-avatar {
  width:56px; height:56px; border-radius:16px; flex-shrink:0;
  background:linear-gradient(135deg, #3b82f6, #6366f1);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; color:#fff;
  box-shadow:0 4px 16px rgba(59,130,246,.3);
}
.cb-title { font-size:1.3rem; font-weight:700; color:var(--text-1); margin:0; }
.cb-subtitle { font-size:.78rem; color:var(--text-3); margin:4px 0 0; line-height:1.4; }

.cb-stats-row {
  display:flex; gap:8px; margin-bottom:20px;
}
.cb-stat {
  flex:1; text-align:center; padding:14px 8px;
  background:var(--bg-2); border-radius:12px; border:1px solid var(--border);
}
.cb-stat-num {
  display:block; font-size:1.4rem; font-weight:800; color:var(--gold);
}
.cb-stat-label {
  display:block; font-size:.65rem; color:var(--text-3); text-transform:uppercase;
  letter-spacing:.5px; margin-top:2px;
}

.cb-tabs {
  display:flex; gap:4px; margin-bottom:16px;
  background:var(--bg-2); border-radius:10px; padding:4px;
}
.cb-tab {
  flex:1; padding:10px 8px; border:none; border-radius:8px;
  background:transparent; color:var(--text-3); font-size:.8rem;
  font-weight:600; cursor:pointer; transition:.2s;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.cb-tab:hover { color:var(--text-1); }
.cb-tab.active {
  background:var(--bg-1); color:var(--text-1);
  box-shadow:0 1px 4px rgba(0,0,0,.15);
}
.cb-tab i { font-size:.7rem; }

.cb-card {
  background:var(--bg-2); border-radius:12px; border:1px solid var(--border);
  padding:16px; margin-bottom:12px;
}
.cb-card-title {
  font-weight:700; font-size:.9rem; color:var(--text-1);
  margin-bottom:12px; display:flex; align-items:center; gap:8px;
}
.cb-card-title i { color:#3b82f6; font-size:.8rem; }

.cb-field { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.cb-label { font-size:.75rem; color:var(--text-3); font-weight:600; text-transform:uppercase; letter-spacing:.3px; }
.cb-select {
  padding:10px 12px; border-radius:8px; border:1px solid var(--border);
  background:var(--bg-1); color:var(--text-1); font-size:.85rem;
}
.cb-textarea {
  padding:12px; border-radius:8px; border:1px solid var(--border);
  background:var(--bg-1); color:var(--text-1); font-size:.85rem;
  font-family:inherit; resize:vertical; min-height:100px; line-height:1.5;
}
.cb-textarea:focus, .cb-select:focus {
  outline:none; border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.15);
}
.cb-char-count { font-size:.65rem; color:var(--text-3); text-align:right; }

.cb-send-btn {
  width:100%; padding:12px; border:none; border-radius:10px;
  background:linear-gradient(135deg, #3b82f6, #6366f1);
  color:#fff; font-size:.9rem; font-weight:700; cursor:pointer;
  transition:.2s; display:flex; align-items:center; justify-content:center; gap:8px;
}
.cb-send-btn:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(59,130,246,.3); }
.cb-send-btn:disabled { opacity:.6; cursor:not-allowed; transform:none; }

.cb-save-btn {
  padding:10px 20px; border:none; border-radius:8px;
  background:var(--gold); color:#000; font-size:.85rem; font-weight:600;
  cursor:pointer; transition:.2s;
}
.cb-save-btn:hover { opacity:.9; }
.cb-save-btn:disabled { opacity:.5; cursor:not-allowed; }

.cb-result { margin-top:8px; font-size:.8rem; min-height:1.2em; }

.cb-templates {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;
}
.cb-tpl-btn {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:14px 8px; border:1px solid var(--border); border-radius:10px;
  background:var(--bg-1); color:var(--text-2); font-size:.72rem;
  cursor:pointer; transition:.2s; font-weight:600;
}
.cb-tpl-btn i { font-size:1.1rem; }
.cb-tpl-btn:hover { border-color:#3b82f6; background:rgba(59,130,246,.08); color:var(--text-1); }
@media (max-width: 480px) {
  .cb-templates { grid-template-columns:repeat(2, 1fr); }
}

.cb-hist-item {
  padding:12px 0; border-bottom:1px solid var(--border);
}
.cb-hist-item:last-child { border-bottom:none; }
.cb-hist-meta {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:.72rem; margin-bottom:4px;
}
.cb-hist-audience {
  background:rgba(59,130,246,.12); color:#3b82f6;
  padding:2px 8px; border-radius:6px; font-weight:600;
}
.cb-hist-audience i { margin-right:3px; font-size:.6rem; }
.cb-hist-count { color:var(--gold); font-weight:600; }
.cb-hist-time { color:var(--text-3); }
.cb-hist-by { font-size:.7rem; color:var(--text-3); margin-bottom:6px; }
.cb-hist-msg {
  font-size:.82rem; color:var(--text-2); line-height:1.5;
  white-space:pre-wrap; word-break:break-word;
}
.cb-hist-delete {
  margin-left:auto; background:none; border:none; color:var(--text-3);
  cursor:pointer; padding:2px 6px; font-size:.7rem; border-radius:4px;
}
.cb-hist-delete:hover { color:#ef4444; background:rgba(239,68,68,.1); }

.cb-count {
  background:var(--gold); color:#000; font-size:.6rem; font-weight:700;
  padding:1px 7px; border-radius:10px; margin-left:6px;
}

.cb-empty { color:var(--text-3); font-size:.85rem; text-align:center; padding:24px 0; }

.cb-load-more {
  display:block; width:100%; padding:10px; margin-top:8px;
  border:1px dashed var(--border); border-radius:8px;
  background:transparent; color:var(--text-3); font-size:.8rem;
  cursor:pointer; font-weight:600;
}
.cb-load-more:hover { border-color:#3b82f6; color:#3b82f6; }

.cb-hint {
  font-size:.78rem; color:var(--text-3); line-height:1.5;
  margin-bottom:14px;
}
.cb-hint code {
  background:rgba(59,130,246,.12); color:#3b82f6;
  padding:1px 5px; border-radius:4px; font-size:.75rem;
}

.cb-tips {
  list-style:none; padding:0; margin:0;
}
.cb-tips li {
  font-size:.78rem; color:var(--text-3); line-height:1.6;
  padding:6px 0; border-bottom:1px solid var(--border);
  padding-left:18px; position:relative;
}
.cb-tips li:last-child { border:none; }
.cb-tips li::before {
  content:'\f0eb'; font-family:'Font Awesome 6 Free'; font-weight:900;
  position:absolute; left:0; color:var(--gold); font-size:.65rem;
}
.cb-tips code {
  background:rgba(59,130,246,.12); color:#3b82f6;
  padding:1px 5px; border-radius:4px; font-size:.72rem;
}

.cb-toggle-wrap {
  position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0;
}
.cb-toggle-wrap input { opacity:0; width:0; height:0; }
.cb-toggle-slider {
  position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0;
  background:var(--bg-3); border-radius:24px; transition:.25s;
}
.cb-toggle-slider::before {
  content:''; position:absolute; height:18px; width:18px; left:3px; bottom:3px;
  background:#fff; border-radius:50%; transition:.25s;
}
.cb-toggle-wrap input:checked + .cb-toggle-slider { background:#3b82f6; }
.cb-toggle-wrap input:checked + .cb-toggle-slider::before { transform:translateX(20px); }

/* ── USER PROFILE ────────────────────────────────────── */
.up-header { display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.up-avatar {
  width:64px; height:64px; border-radius:50%; flex-shrink:0; overflow:hidden;
  background:var(--bg-2); display:flex; align-items:center; justify-content:center;
  font-size:2.5rem; color:var(--text-3); border:3px solid var(--border);
}
.up-avatar img { width:100%; height:100%; object-fit:cover; }
.up-name { font-size:1.2rem; font-weight:700; color:var(--text-1); margin:0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.up-meta { font-size:.75rem; color:var(--text-3); margin-top:4px; }
.up-suspended { font-size:.7rem; background:rgba(239,68,68,.15); color:#ef4444; padding:2px 8px; border-radius:6px; font-weight:600; }

.up-role { font-size:.6rem; padding:2px 8px; border-radius:6px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.up-role-admin { background:rgba(239,68,68,.15); color:#ef4444; }
.up-role-mod { background:rgba(59,130,246,.15); color:#3b82f6; }
.up-role-user { background:rgba(52,211,153,.15); color:#34d399; }
.up-role-bot { background:rgba(139,92,246,.15); color:#8b5cf6; }

.up-stats-grid {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-bottom:20px;
}
@media (max-width: 520px) { .up-stats-grid { grid-template-columns:repeat(2, 1fr); } }
.up-stat-card {
  text-align:center; padding:12px 6px;
  background:var(--bg-2); border-radius:10px; border:1px solid var(--border);
}
.up-stat-link { cursor:pointer; transition:border-color .15s, background .15s; }
.up-stat-link:hover { border-color:var(--gold); background:rgba(220,200,141,.08); }
.up-stat-num { display:block; font-size:1.2rem; font-weight:800; color:var(--gold); }
.up-stat-lbl { display:block; font-size:.6rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.4px; margin-top:2px; }
.up-goto-schedule {
  display:block; width:100%; margin-top:12px; padding:8px 0; border:none;
  background:rgba(220,200,141,.1); color:var(--gold); font-size:.78rem; font-weight:600;
  border-radius:8px; cursor:pointer; transition:background .15s;
}
.up-goto-schedule:hover { background:rgba(220,200,141,.18); }
.up-goto-schedule i { margin-right:6px; }

.up-tabs {
  display:flex; gap:4px; margin-bottom:16px;
  background:var(--bg-2); border-radius:10px; padding:4px; overflow-x:auto;
}
.up-tab {
  flex:1; padding:9px 6px; border:none; border-radius:8px;
  background:transparent; color:var(--text-3); font-size:.75rem;
  font-weight:600; cursor:pointer; transition:.2s; white-space:nowrap;
}
.up-tab:hover { color:var(--text-1); }
.up-tab.active { background:var(--bg-1); color:var(--text-1); box-shadow:0 1px 4px rgba(0,0,0,.15); }

.up-card {
  background:var(--bg-2); border-radius:12px; border:1px solid var(--border);
  padding:16px; margin-bottom:12px;
}
.up-card-title {
  font-weight:700; font-size:.85rem; color:var(--text-1);
  margin-bottom:12px; display:flex; align-items:center; gap:8px;
}
.up-card-title i { color:var(--gold); font-size:.75rem; }

.up-empty { color:var(--text-3); font-size:.82rem; text-align:center; padding:16px 0; }

.up-bar-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.up-bar-label { width:32px; font-size:.7rem; color:var(--text-3); font-weight:600; text-align:right; flex-shrink:0; }
.up-bar-track { flex:1; height:8px; background:var(--bg-3); border-radius:4px; overflow:hidden; }
.up-bar-fill { height:100%; background:linear-gradient(90deg,#3b82f6,#6366f1); border-radius:4px; transition:.3s; }
.up-bar-fill.up-bar-gold { background:linear-gradient(90deg,var(--gold),#f59e0b); }
.up-bar-val { width:28px; font-size:.65rem; color:var(--text-3); text-align:right; }

.up-hour-chart { display:flex; align-items:flex-end; gap:2px; height:72px; }
.up-hour-bar { flex:1; display:flex; flex-direction:column; align-items:center; height:100%; }
.up-hour-track { flex:1; display:flex; align-items:flex-end; width:100%; min-height:0; }
.up-hour-fill { width:100%; background:linear-gradient(180deg,#3b82f6,#6366f1); border-radius:2px 2px 0 0; min-height:1px; transition:.3s; }
.up-hour-lbl { font-size:.5rem; color:var(--text-3); height:10px; line-height:10px; flex-shrink:0; }

.up-group-tag {
  display:inline-block; font-size:.72rem; padding:4px 10px; border-radius:6px;
  background:var(--bg-1); color:var(--text-2); border:1px solid var(--border);
  margin:2px 4px 2px 0;
}

.up-shift-list { display:flex; flex-direction:column; gap:4px; }
.up-shift-item {
  display:flex; align-items:center; gap:10px; padding:6px 0;
  border-bottom:1px solid var(--border); font-size:.8rem;
}
.up-shift-item:last-child { border:none; }
.up-shift-date { color:var(--text-2); flex:1; }
.up-shift-type { font-size:.65rem; padding:2px 8px; border-radius:6px; font-weight:700; text-transform:uppercase; }
.up-shift-day { background:rgba(245,158,11,.15); color:#f59e0b; }
.up-shift-night { background:rgba(139,92,246,.15); color:#8b5cf6; }

.up-warn-item {
  padding:12px 0; border-bottom:1px solid var(--border);
}
.up-warn-item:last-child { border:none; }
.up-warn-header { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.up-warn-type {
  font-size:.72rem; font-weight:700; padding:2px 8px; border-radius:6px;
  background:rgba(239,68,68,.12); color:#ef4444;
}
.up-warn-date { font-size:.68rem; color:var(--text-3); }
.up-warn-del {
  margin-left:auto; background:none; border:none; color:var(--text-3);
  cursor:pointer; padding:2px 6px; font-size:.65rem; border-radius:4px;
}
.up-warn-del:hover { color:#ef4444; background:rgba(239,68,68,.1); }
.up-warn-quote {
  font-size:.78rem; color:var(--text-3); font-style:italic; padding:6px 10px;
  background:var(--bg-1); border-radius:6px; border-left:3px solid #ef4444; margin:6px 0;
}
.up-warn-notes { font-size:.78rem; color:var(--text-2); margin:4px 0; }
.up-warn-by { font-size:.65rem; color:var(--text-3); }
.up-warn-add-btn {
  display:block; width:100%; padding:10px; margin-top:12px;
  border:1px dashed var(--border); border-radius:8px;
  background:transparent; color:var(--text-3); font-size:.8rem;
  cursor:pointer; font-weight:600;
}
.up-warn-add-btn:hover { border-color:#ef4444; color:#ef4444; }

.up-susp-item {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:8px 0; border-bottom:1px solid var(--border); font-size:.75rem;
}
.up-susp-item:last-child { border:none; }
.up-susp-action { padding:2px 8px; border-radius:6px; font-weight:700; font-size:.65rem; text-transform:uppercase; }
.up-susp-suspended { background:rgba(239,68,68,.12); color:#ef4444; }
.up-susp-unsuspended { background:rgba(52,211,153,.12); color:#34d399; }
.up-susp-dur { color:var(--text-2); font-weight:600; }
.up-susp-date { color:var(--text-3); }
.up-susp-by { color:var(--text-3); }
.up-susp-reason { width:100%; font-size:.72rem; color:var(--text-3); font-style:italic; margin-top:2px; }

.up-action-row { display:flex; align-items:center; gap:8px; }
.up-input {
  padding:10px 12px; border-radius:8px; border:1px solid var(--border);
  background:var(--bg-1); color:var(--text-1); font-size:.85rem; font-family:inherit;
}
.up-input:focus { outline:none; border-color:var(--gold); }
.up-select {
  padding:10px 12px; border-radius:8px; border:1px solid var(--border);
  background:var(--bg-1); color:var(--text-1); font-size:.85rem;
}
.up-action-btn {
  padding:10px 16px; border:none; border-radius:8px;
  background:var(--gold); color:#000; font-size:.82rem; font-weight:600;
  cursor:pointer; white-space:nowrap;
}
.up-action-btn:hover { opacity:.9; }
.up-action-danger { background:#ef4444; color:#fff; }
.up-result { margin-top:6px; font-size:.78rem; min-height:1em; }

.up-msg-item { padding:8px 0; border-bottom:1px solid var(--border); }
.up-msg-item:last-child { border:none; }
.up-msg-meta { display:flex; justify-content:space-between; align-items:center; margin-bottom:2px; }
.up-msg-group { font-size:.68rem; font-weight:600; color:#3b82f6; }
.up-msg-time { font-size:.65rem; color:var(--text-3); }
.up-msg-text { font-size:.8rem; color:var(--text-2); white-space:pre-wrap; word-break:break-word; }

/* Warn button on messages */
.msg-warn-btn {
  position:absolute; top:4px; right:4px; width:22px; height:22px;
  border-radius:50%; background:rgba(239,68,68,.15); color:#ef4444; border:none;
  font-size:.6rem; cursor:pointer; display:none;
  align-items:center; justify-content:center;
}
.msg:hover .msg-warn-btn { display:flex; }
.msg-warn-btn:hover { background:#ef4444; color:#fff; }

/* Violation types in admin settings */
.as-vt-row {
  display:flex; align-items:center; gap:8px; padding:6px 0;
  border-bottom:1px solid var(--border); font-size:.82rem;
  min-width:0;
}
.as-vt-row:last-child { border:none; }
.as-vt-label { flex:1; color:var(--text-1); font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.as-vt-key { font-size:.68rem; color:var(--text-3); background:var(--bg-1); padding:2px 6px; border-radius:4px; flex-shrink:0; max-width:100px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.as-vt-del {
  background:none; border:none; color:var(--text-3); cursor:pointer;
  padding:2px 6px; font-size:.7rem; border-radius:4px; flex-shrink:0;
}
.as-vt-del:hover { color:#ef4444; background:rgba(239,68,68,.1); }
.as-vt-add-row { display:flex; gap:8px; margin-top:10px; }
.as-vt-add-row .as-input { flex:1; min-width:0; }

/* ── Photo Picker Action Sheet ───────────────────── */
.photo-picker-overlay{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .15s ease;}
.photo-picker-sheet{width:100%;max-width:400px;background:var(--bg-2,#1e1e2e);border-radius:16px 16px 0 0;padding:16px 16px 28px;display:flex;flex-direction:column;gap:8px;animation:slideUp .2s ease;}
.photo-picker-title{text-align:center;font-weight:700;font-size:1rem;color:var(--text-1,#fff);padding:4px 0 8px;border-bottom:1px solid var(--border,#333);margin-bottom:4px;}
.photo-picker-btn{display:flex;align-items:center;gap:12px;width:100%;padding:14px 18px;border:none;border-radius:12px;background:var(--bg-3,#2a2a3e);color:var(--text-1,#fff);font-size:.95rem;font-weight:600;cursor:pointer;transition:background .15s;}
.photo-picker-btn:hover,.photo-picker-btn:active{background:var(--bg-4,#353550);}
.photo-picker-btn i{font-size:1.2rem;width:24px;text-align:center;color:var(--gold,#d4a843);}
.photo-picker-cancel{justify-content:center;background:transparent;color:var(--text-3,#888);font-weight:500;margin-top:4px;}
.photo-picker-cancel:hover,.photo-picker-cancel:active{background:rgba(255,255,255,.05);}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media(min-width:600px){.photo-picker-sheet{border-radius:16px;margin-bottom:20px;}}

/* ── Blocked Users List ──────────────────────────── */
.blocked-row {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 10px; border-radius:10px; background:var(--bg-3); margin-bottom:6px;
}
.blocked-info { display:flex; align-items:center; gap:8px; min-width:0; }
.blocked-name { font-size:.85rem; font-weight:600; color:var(--text-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.blocked-unbtn {
  flex-shrink:0; border:none; background:none; color:var(--gold); font-size:.76rem;
  font-weight:600; cursor:pointer; padding:6px 10px; border-radius:8px;
  background:rgba(212,168,67,.1); transition:background .15s;
}
.blocked-unbtn:hover { background:rgba(212,168,67,.2); }
.blocked-unbtn:disabled { opacity:.5; cursor:default; }

/* ── Schedule Inactivity Report ──────────────────────────── */
.sr-header { display:flex; align-items:center; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.sr-title { font-size:1.1rem; font-weight:700; color:var(--text-1); margin:0; display:flex; align-items:center; gap:8px; }
.sr-title i { color:#f97316; }
.sr-empty { text-align:center; padding:48px 20px; color:var(--text-2); }
.sr-empty i { font-size:2.5rem; margin-bottom:12px; display:block; color:var(--text-3); }
.sr-empty p { margin:6px 0; }
.sr-summary { background:rgba(249,115,22,.08); border:1px solid rgba(249,115,22,.2); border-radius:10px; padding:14px 18px; margin-bottom:18px; font-size:.9rem; color:var(--text-1); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sr-summary-count { font-size:1.6rem; font-weight:800; color:#f97316; line-height:1; }

.sr-list { border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.sr-row { border-bottom:1px solid var(--border); }
.sr-row:last-child { border-bottom:none; }
.sr-row-main { display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; transition:background .12s; }
.sr-row-main:hover { background:var(--bg-2); }
.sr-row-info { flex:1; min-width:0; }
.sr-row-name { font-weight:600; font-size:.88rem; color:var(--text-1); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sr-row-detail { font-size:.75rem; color:var(--text-3); display:block; }
.sr-row-arrow { font-size:.65rem; color:var(--text-3); transition:transform .2s; flex-shrink:0; }
.sr-row-arrow.sr-arrow-open { transform:rotate(180deg); }
.sr-row-actions { padding:8px 14px 12px 48px; background:var(--bg-2); border-top:1px solid var(--border); }
.sr-row-stats { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:.75rem; color:var(--text-3); margin-bottom:8px; }
.sr-row-stats i { width:14px; text-align:center; }
.sr-row-btns { display:flex; gap:6px; flex-wrap:wrap; }

.sr-avatar { width:32px; height:32px; border-radius:50%; background:var(--bg-3); display:flex; align-items:center; justify-content:center; overflow:hidden; flex-shrink:0; }
.sr-avatar-img { width:100%; height:100%; object-fit:cover; }
.sr-avatar-letter { font-size:.75rem; font-weight:700; color:var(--text-2); }

.sr-act-btn { height:30px; border:none; border-radius:6px; background:var(--bg-3); color:var(--text-2); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:5px; font-size:.72rem; padding:0 10px; transition:background .15s, color .15s; white-space:nowrap; }
.sr-act-btn i { font-size:.68rem; }
.sr-act-btn:hover { background:var(--gold); color:#000; }
.sr-act-danger:hover { background:var(--red); color:#fff; }
.sr-act-exclude:hover { background:#f97316; color:#fff; }
.sr-act-include:hover { background:#22c55e; color:#fff; }

.sr-excluded-section { margin-top:20px; border:1px dashed var(--border); border-radius:10px; padding:14px 16px; }
.sr-excluded-header { font-size:.82rem; font-weight:600; color:var(--text-3); margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.sr-excluded-list { display:flex; flex-wrap:wrap; gap:8px; }
.sr-excluded-chip { display:inline-flex; align-items:center; gap:6px; background:var(--bg-2); border:1px solid var(--border); border-radius:20px; padding:4px 10px 4px 4px; font-size:.78rem; color:var(--text-2); }
.sr-excluded-av { width:22px; height:22px; border-radius:50%; background:var(--bg-3); display:flex; align-items:center; justify-content:center; overflow:hidden; font-size:.65rem; font-weight:700; flex-shrink:0; }
.sr-excluded-add { border:none; background:none; color:var(--text-3); cursor:pointer; font-size:.72rem; padding:2px 4px; border-radius:4px; transition:color .15s; }
.sr-excluded-add:hover { color:#22c55e; }

.sr-popup-list { max-height:55vh; overflow-y:auto; }
.sr-popup-avatar { width:32px; height:32px; border-radius:50%; background:var(--bg-3); display:flex; align-items:center; justify-content:center; overflow:hidden; font-size:.8rem; font-weight:700; color:var(--text-2); flex-shrink:0; }

@media (max-width:600px) {
  .sr-row-main { padding:8px 10px; gap:8px; }
  .sr-row-actions { padding:8px 10px 10px 42px; }
  .sr-act-btn { height:28px; font-size:.68rem; padding:0 8px; }
}