/* Mother Groups — Stylesheet */
/* Supports light (default) and dark ([data-theme="dark"]) modes */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,600;1,400&family=DM+Sans:wght@400;500&display=swap');

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

:root {
  /* Brown & pink warm theme */
  --bg:#fdf6ee; --warm:#f5ead8; --blush:#f2c9b8; --rose:#c97d6a; --deep:#7a3d30;
  --muted:#9a8778; --dark:#2c2218; --card:#ffffff;
  --sh:0 4px 24px rgba(122,61,48,.10); --sh2:0 2px 8px rgba(122,61,48,.06);
  --sb-bg:#7a3d30; --sb-hover:rgba(255,255,255,.09); --sb-active:rgba(255,255,255,.20);
  --sb-text:#f5ead8; --sb-muted:rgba(242,201,184,.6); --sb-border:rgba(255,255,255,.12);
  --adm-bg:#0f1117; --adm-s:#1a1d27; --adm-b:#272a38; --adm-a:#7c6af7;
  --adm-t:#e2e4f0; --adm-m:#6b6f8a; --adm-g:#34d399; --adm-r:#f87171; --adm-am:#fbbf24;
}
[data-theme="dark"]:root {
  --bg:#080d09; --warm:#0d1a0f; --blush:#1e4028; --rose:#22c55e; --deep:#4ade80;
  --muted:#6b7280; --dark:#e2f5e8; --card:#0f1a12;
  --sh:0 4px 24px rgba(0,0,0,.4); --sh2:0 2px 8px rgba(0,0,0,.3);
  --sb-bg:#050e07; --sb-hover:rgba(34,197,94,.08); --sb-active:rgba(34,197,94,.18);
  --sb-text:#b0c8b5; --sb-muted:rgba(74,222,128,.35); --sb-border:rgba(34,197,94,.12);
  --adm-bg:#050e07; --adm-s:#0a1a0d; --adm-b:#1e4028; --adm-a:#4ade80;
  --adm-t:#c8f0d0; --adm-m:#4b7a55; --adm-g:#4ade80;
}

body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--dark);min-height:100vh}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:400}
button{font-family:'DM Sans',sans-serif}
em{font-style:italic}

/* Splash */
.splash{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--bg);color:var(--muted);font-size:14px}
.splash-spin{width:32px;height:32px;border:3px solid var(--blush);border-top-color:var(--rose);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Dark toggle */
.dark-toggle{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:20px;cursor:pointer;font-size:12px;font-weight:500;transition:all .2s;flex-shrink:0;background:var(--warm)}

/* Layout */
.app{display:flex;min-height:100vh}
.sidebar{width:270px;flex-shrink:0;background:var(--sb-bg);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;overflow:hidden;z-index:50;transition:transform .28s cubic-bezier(.4,0,.2,1)}
.sb-scroll{flex:1;overflow-y:auto;overflow-x:hidden}
.sb-footer{flex-shrink:0;border-top:1px solid var(--sb-border);padding:8px 0 8px}
.main{margin-left:270px;flex:1;display:flex;flex-direction:column;min-height:100vh}

/* Sidebar */
.sb-head{padding:18px 16px 14px;border-bottom:1px solid var(--sb-border)}
.sb-head-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.sb-brand{font-family:'Fraunces',serif;font-size:19px;color:#f2c9b8}
.sb-pill{display:flex;align-items:center;gap:9px;background:var(--sb-hover);border-radius:10px;padding:8px 10px;border:none;cursor:pointer;width:100%;text-align:left}
.sb-uname{font-size:13px;font-weight:500;color:var(--sb-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-usub{font-size:11px;color:var(--sb-muted);margin-top:1px}
.sb-edit-hint{font-size:10px;color:rgba(255,255,255,.3)}
.sb-sec{padding:14px 16px 5px;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--sb-muted);display:flex;align-items:center;gap:6px}
.sb-badge{background:var(--rose);color:#fff;font-size:9px;font-weight:700;padding:1px 6px;border-radius:10px}
.sb-item{display:flex;align-items:flex-start;gap:10px;margin:1px 8px;padding:10px 11px;border-radius:10px;cursor:pointer;border:none;background:transparent;color:var(--sb-text);text-align:left;width:calc(100% - 16px);transition:background .15s}
.sb-item:hover{background:var(--sb-hover)}
.sb-item.on{background:var(--sb-active)}
.sb-dot{width:8px;height:8px;border-radius:50%;background:#93c5fd;margin-top:4px;flex-shrink:0}
.sb-dot-paused{background:#fbbf24}.sb-dot-retired{background:#9ca3af}.sb-dot-setup{background:var(--rose)}
.sb-ev-dot{width:8px;height:8px;border-radius:50%;background:#fbbf24;margin-top:4px;flex-shrink:0}
.sb-gname{font-size:13px;font-weight:500;line-height:1.3}
.sb-gmeta{font-size:11px;color:var(--sb-muted);margin-top:2px}
.sb-action{display:flex;align-items:center;gap:8px;margin:1px 8px;padding:9px 11px;border-radius:10px;border:1px dashed var(--sb-border);background:transparent;font-size:12px;cursor:pointer;width:calc(100% - 16px);transition:all .15s;color:rgba(255,255,255,.45)}
.sb-share:hover,.sb-event:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.sb-event{color:rgba(251,191,36,.6);border-color:rgba(251,191,36,.25)}
.sb-event:hover{color:#fbbf24;border-color:#fbbf24}
.sb-logout{display:flex;align-items:center;gap:8px;margin:2px 8px 2px;padding:9px 11px;border-radius:10px;border:1px solid var(--sb-border);background:transparent;color:var(--sb-muted);font-size:13px;cursor:pointer;width:calc(100% - 16px);transition:all .15s}
.sb-logout:hover{background:var(--sb-hover);color:#fff}
.sb-profile-link{display:flex;align-items:center;gap:8px;margin:2px 8px;padding:9px 11px;border-radius:10px;border:1px solid var(--sb-border);background:transparent;color:var(--sb-muted);font-size:13px;cursor:pointer;width:calc(100% - 16px);transition:all .15s}
.sb-profile-link:hover{background:var(--sb-hover);color:#fff}
.sb-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:49;backdrop-filter:blur(2px)}
.mob-bar{display:none;align-items:center;gap:12px;padding:0 14px;height:52px;background:var(--sb-bg);position:sticky;top:0;z-index:40;flex-shrink:0;border-bottom:1px solid var(--sb-border)}
.mob-brand{font-family:'Fraunces',serif;font-size:16px;color:#f2c9b8;flex:1}
.mob-btn{background:none;border:none;color:var(--sb-muted);cursor:pointer;padding:6px;border-radius:8px;font-size:20px;display:flex;align-items:center}

@media(max-width:768px){
  .sidebar{transform:translateX(-100%);width:280px}
  .sidebar.open{transform:translateX(0);box-shadow:4px 0 24px rgba(0,0,0,.4)}
  .main{margin-left:0}
  .mob-bar{display:flex}
  .sb-backdrop.show{display:block}
  .sb-dt-only{display:none}
  .chat-wrap{height:calc(100vh - 52px)}
}

/* Banner */
.banner{background:linear-gradient(135deg,var(--rose),var(--deep));color:#fff;padding:14px 22px;display:flex;align-items:center;gap:12px;flex-shrink:0}
.banner-t{flex:1}
.banner-t h3{font-size:15px;margin-bottom:2px}
.banner-t p{font-size:12px;opacity:.85}
.banner-btn{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:9px;padding:7px 14px;font-size:12px;cursor:pointer}

/* Welcome */
.welcome{flex:1;display:flex;align-items:center;justify-content:center;padding:36px;text-align:center}
.welcome-in{max-width:520px}
.welcome-big{font-size:48px;margin-bottom:12px}
.welcome-in h2{font-size:24px;color:var(--deep);margin-bottom:10px}
.welcome-in p{color:var(--muted);font-size:14px;line-height:1.6;margin-bottom:22px}
.wc-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.wc{background:var(--card);border-radius:14px;padding:16px 12px;box-shadow:var(--sh2);flex:1;min-width:130px;max-width:160px;border:1.5px solid var(--blush);transition:border-color .2s,transform .2s}
.wc:hover{border-color:var(--rose);transform:translateY(-2px)}
.wc .ico{font-size:22px;margin-bottom:6px}
.wc-title{font-size:12px;font-weight:700;color:var(--dark);margin-bottom:4px}
.wc p{font-size:11px;color:var(--muted);line-height:1.4}

/* Chat */
.chat-wrap{display:flex;flex-direction:column;height:100vh;overflow:hidden}
.chat-hd{padding:14px 22px;background:var(--card);border-bottom:1px solid var(--blush);display:flex;align-items:center;gap:12px;flex-shrink:0}
.chat-hd-ico{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--blush),var(--rose));display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.chat-hd h3{font-size:15px;color:var(--deep)}
.chat-hd p{font-size:11px;color:var(--muted);margin-top:1px}
.ev-chip{display:inline-flex;align-items:center;gap:4px;background:#fef3c7;color:#92400e;padding:2px 8px;border-radius:12px;font-size:10px;font-weight:600;margin-left:6px;vertical-align:middle}
.ev-manage-btn,.ev-close-area button{padding:5px 11px;border-radius:8px;border:1.5px solid var(--blush);background:transparent;color:var(--muted);font-size:12px;font-weight:500;cursor:pointer;transition:all .18s;flex-shrink:0}
.ev-manage-btn:hover{border-color:var(--rose);color:var(--rose)}
.ev-close-confirm-row{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);flex-shrink:0}
.ev-close-yes{background:#ef4444;border:none;border-radius:6px;color:#fff;padding:4px 10px;cursor:pointer;font-size:12px}
.ev-close-no{background:transparent;border:1px solid var(--blush);border-radius:6px;color:var(--muted);padding:4px 10px;cursor:pointer;font-size:12px}
.paused-bar{background:#fef3c7;border-top:1px solid #fde68a;padding:10px 22px;font-size:13px;color:#92400e;text-align:center;flex-shrink:0}
.retired-bar{background:#f3f4f6;color:#6b7280}
.closed-bar{background:#fef2f2;border-color:#fca5a5;color:#b91c1c}
.msgs{flex:1;overflow-y:auto;padding:18px 22px;display:flex;flex-direction:column;gap:2px;background:var(--bg)}
.msgs-empty{text-align:center;margin-top:36px;color:var(--muted)}
.msgs-empty-ico{font-size:34px;margin-bottom:10px}
.msgs-empty-title{font-family:'Fraunces',serif;font-size:17px;color:var(--deep);margin-bottom:6px}
.msgs-empty-sub{font-size:13px}
.dd{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted);margin:12px 0 5px}
.dd::before,.dd::after{content:'';flex:1;height:1px;background:var(--blush)}
.mrow{display:flex;align-items:flex-end;gap:8px;margin-bottom:2px}
.mrow.me{flex-direction:row-reverse}
.mav{width:27px;height:27px;border-radius:50%;background:var(--blush);display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-size:11px;color:var(--deep);flex-shrink:0}
.mav-me{background:var(--rose);color:#fff}
.mbw{max-width:70%}
.msender{font-size:10px;color:var(--muted);margin-bottom:2px;padding-left:2px}
.mrow.me .msender{text-align:right;padding-right:2px}
.mb{padding:9px 13px;border-radius:16px;font-size:14px;line-height:1.5;word-break:break-word;background:var(--card);color:var(--dark);box-shadow:var(--sh2);border-bottom-left-radius:3px;border:1px solid var(--blush)}
.mrow.me .mb{background:var(--rose);color:#fff;border-bottom-left-radius:16px;border-bottom-right-radius:3px;border:none}
.mb-audio{padding:0!important;background:transparent!important;box-shadow:none!important;border:none!important}
.me .mb-audio .ab-wrap{background:var(--rose);border-radius:16px;border-bottom-right-radius:3px}
.me .mb-audio .ab-play{background:rgba(255,255,255,.25);color:#fff}
.me .mb-audio .ab-prog{background:rgba(255,255,255,.35)}
.me .mb-audio .ab-prog-fill{background:rgba(255,255,255,.85)}
.me .mb-audio .ab-dur{color:#fff}
.mt{font-size:10px;color:var(--muted);margin-top:2px;padding-left:2px}
.mrow.me .mt{text-align:right;padding-right:2px}
.typing{display:flex;gap:4px;padding:9px 12px;background:var(--card);border-radius:16px;border-bottom-left-radius:3px;width:fit-content;box-shadow:var(--sh2);border:1px solid var(--blush)}
.tdot{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:bop 1.2s infinite}
.tdot:nth-child(2){animation-delay:.15s}.tdot:nth-child(3){animation-delay:.3s}
@keyframes bop{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
.inp-area{padding:10px 22px 14px;background:var(--card);border-top:1px solid var(--blush);flex-shrink:0}
.inp-modes{display:flex;gap:5px;margin-bottom:8px}
.inp-mode{padding:4px 12px;border-radius:16px;border:1.5px solid var(--blush);background:transparent;font-size:12px;font-weight:500;color:var(--muted);cursor:pointer;transition:all .18s}
.inp-mode.on{background:var(--rose);border-color:var(--rose);color:#fff}
.inp-mode:hover:not(.on){border-color:var(--rose);color:var(--rose)}
.inp-row{display:flex;gap:8px;align-items:flex-end}
.inp{flex:1;border:1.5px solid var(--blush);border-radius:18px;padding:10px 15px;font-family:'DM Sans',sans-serif;font-size:14px;outline:none;resize:none;background:var(--bg);color:var(--dark);min-height:42px;max-height:100px;line-height:1.4;transition:border-color .2s}
.inp:focus{border-color:var(--rose)}
.send-btn{width:42px;height:42px;border-radius:50%;background:var(--rose);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;font-size:16px;transition:background .15s}
.send-btn:hover{background:var(--deep)}
.send-btn:disabled{opacity:.4;cursor:not-allowed}
.blocked-msg{text-align:center;font-size:13px;color:var(--muted);padding:8px 0}
.ai-note{font-size:10px;color:var(--rose);margin-top:5px;opacity:.8}

/* Audio */
.rec-row{display:flex;align-items:center;gap:8px}
.rec-btn{width:42px;height:42px;border-radius:50%;background:var(--rose);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;flex-shrink:0;transition:all .18s}
.rec-btn:disabled{opacity:.4;cursor:not-allowed}
.rec-active{background:#ef4444;animation:pulse-r 1.2s infinite}
@keyframes pulse-r{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4)}50%{box-shadow:0 0 0 10px rgba(239,68,68,0)}}
.rec-timer{font-size:13px;font-weight:600;color:var(--rose);min-width:38px}
.rec-hint{font-size:13px;color:var(--muted)}
.rec-live{font-size:11px;color:#ef4444;font-weight:600}
.rec-err{font-size:12px;color:#ef4444;margin-bottom:6px;padding:6px 10px;background:#fef2f2;border-radius:8px}
.aud-preview{background:var(--warm);border-radius:10px;padding:9px 12px;display:flex;align-items:center;gap:9px}
.ap-play{width:30px;height:30px;border-radius:50%;background:var(--rose);border:none;cursor:pointer;color:#fff;flex-shrink:0;font-size:13px}
.ap-bar{flex:1;height:4px;background:var(--blush);border-radius:2px}
.ap-fill{height:100%;background:var(--rose);border-radius:2px}
.ap-time{font-size:11px;color:var(--muted);min-width:32px;text-align:right}
.ap-del{background:none;border:none;color:var(--muted);cursor:pointer;padding:3px;font-size:14px}
.ap-del:hover{color:#ef4444}
.ab-wrap{display:flex;align-items:center;gap:8px;padding:7px 11px;min-width:160px}
.ab-play{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.25);border:none;cursor:pointer;font-size:12px;color:inherit}
.mrow:not(.me) .ab-play{background:var(--rose);color:#fff}
.ab-prog{flex:1;height:3px;background:rgba(255,255,255,.35);border-radius:2px;cursor:pointer}
.mrow:not(.me) .ab-prog{background:var(--blush)}
.ab-prog-fill{height:100%;background:rgba(255,255,255,.8);border-radius:2px;transition:width .1s}
.mrow:not(.me) .ab-prog-fill{background:var(--rose)}
.ab-dur{font-size:10px;opacity:.75;min-width:28px}

/* Auth */
.auth-bg{min-height:100vh;display:flex;background:linear-gradient(135deg,#fdf6ee,#f5ead8,#f2c9b8);align-items:center;justify-content:center;padding:20px;position:relative}
[data-theme="dark"] .auth-bg{background:linear-gradient(135deg,#080d09,#0d1a0f,#0f2217)}
.auth-dark-toggle{position:absolute;top:14px;right:14px}
.auth-card{background:var(--card);border-radius:22px;padding:40px 36px;width:100%;max-width:390px;box-shadow:0 4px 32px rgba(122,61,48,.12);border:1px solid var(--blush)}
.auth-logo{text-align:center;margin-bottom:26px}
.auth-fl{font-size:32px;margin-bottom:6px}
.auth-logo h1{font-size:25px;color:var(--deep)}
.auth-logo p{font-size:12px;color:var(--muted);margin-top:4px;font-style:italic}

/* Forms */
.tabs{display:flex;background:var(--warm);border-radius:10px;padding:3px;margin-bottom:22px;gap:3px}
.tab{flex:1;padding:7px;border:none;background:transparent;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;color:var(--muted);transition:all .2s}
.tab.on{background:var(--card);color:var(--rose);box-shadow:var(--sh2)}
.errmsg{background:#fef2f2;border:1px solid #fca5a5;border-radius:9px;padding:9px 12px;font-size:13px;color:#b91c1c;margin-bottom:14px;white-space:pre-wrap;word-break:break-word;max-height:200px;overflow-y:auto}
[data-theme="dark"] .errmsg{background:#1a0707}
.hint{background:#eff6ff;border:1px solid var(--blush);border-radius:9px;padding:9px 12px;font-size:11px;color:#1d4ed8;margin-bottom:14px;line-height:1.5}
[data-theme="dark"] .hint{background:#071a0e;color:#4ade80;border-color:#1e4028}
.fg{margin-bottom:14px;position:relative}
.lbl{display:block;font-size:11px;font-weight:500;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.7px}
.fi{width:100%;padding:10px 13px;border:1.5px solid var(--blush);border-radius:10px;font-family:'DM Sans',sans-serif;font-size:14px;color:var(--dark);background:var(--bg);outline:none;transition:border-color .2s}
.fi:focus{border-color:var(--rose)}
.fi::placeholder{color:var(--muted)}
.btn{width:100%;padding:12px;background:var(--rose);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s}
.btn:hover{background:var(--deep)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-sec{width:100%;padding:10px;background:transparent;color:var(--muted);border:1.5px solid var(--blush);border-radius:10px;font-size:13px;cursor:pointer;margin-top:8px;transition:all .18s}
.btn-sec:hover{border-color:var(--rose);color:var(--rose)}
.code-fi{width:100%;padding:11px 13px;border:2px solid var(--blush);border-radius:10px;font-family:monospace;font-size:14px;font-weight:600;text-align:center;letter-spacing:1.5px;color:var(--deep);background:var(--bg);outline:none;text-transform:uppercase;transition:border-color .2s}
.code-fi:focus{border-color:var(--rose)}

/* City picker */
.city-wrap{position:relative}
.city-x{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--muted);font-size:16px}
.city-dd{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--card);border:1.5px solid var(--blush);border-radius:12px;box-shadow:var(--sh);z-index:200;overflow:hidden}
.city-opt{display:flex;align-items:center;gap:9px;padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--warm);transition:background .1s}
.city-opt:last-child{border-bottom:none}
.city-opt:hover,.city-opt.hi{background:var(--warm)}
.city-opt-name{font-size:14px;font-weight:500;color:var(--dark)}
.city-opt-sub{font-size:11px;color:var(--muted)}
.city-ok{display:flex;align-items:center;gap:9px;padding:10px 12px;background:#eff6ff;border:1.5px solid #93c5fd;border-radius:10px}
[data-theme="dark"] .city-ok{background:#071a0e;border-color:#16a34a}
.city-ok-name{font-size:14px;color:var(--dark);font-weight:500}
.city-ok-sub{font-size:11px;color:var(--rose);margin-top:1px}
[data-theme="dark"] .city-ok-sub{color:#4ade80}
.city-change{background:none;border:none;font-size:12px;color:var(--muted);cursor:pointer;text-decoration:underline;margin-left:auto}
.city-none{padding:12px;text-align:center;font-size:13px;color:var(--muted)}

/* Modal overlay */
.ov{position:fixed;inset:0;background:rgba(45,28,20,.5);backdrop-filter:blur(5px);z-index:100;display:flex;align-items:center;justify-content:center;padding:18px}
[data-theme="dark"] .ov{background:rgba(0,0,0,.8)}
.mc{background:var(--card);border-radius:22px;padding:32px;width:100%;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,.25);max-height:90vh;overflow-y:auto;border:1px solid var(--blush)}
.mc h2{font-size:21px;color:var(--deep);margin-bottom:6px}
.mc .sub{font-size:13px;color:var(--muted);margin-bottom:22px;line-height:1.5}
.cc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:16px}
.cc{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 8px;border:2px solid var(--blush);border-radius:12px;cursor:pointer;background:var(--bg);transition:all .18s;font-size:12px;color:var(--muted);text-align:center}
.cc:hover,.cc.on{border-color:var(--rose);background:var(--warm);color:var(--rose);box-shadow:0 0 0 3px rgba(201,125,106,.15)}
.cc .em{font-size:24px}
.ev-preview{background:var(--warm);border-radius:9px;padding:9px 13px;margin-bottom:14px;font-size:13px;color:var(--deep);border:1px solid var(--blush)}
.back-lnk{background:none;border:none;color:var(--muted);font-size:13px;cursor:pointer;padding:8px 0;width:100%;text-align:center;margin-top:6px}
.back-lnk:hover{color:var(--rose)}

/* Share modal */
.sov{position:fixed;inset:0;background:rgba(45,28,20,.55);backdrop-filter:blur(5px);z-index:150;display:flex;align-items:center;justify-content:center;padding:20px}
[data-theme="dark"] .sov{background:rgba(0,0,0,.85)}
.smc{background:var(--card);border-radius:22px;padding:32px;width:100%;max-width:350px;text-align:center;border:1px solid var(--blush)}
.smc h2{font-size:20px;color:var(--deep);margin-bottom:6px}
.ssub{font-size:13px;color:var(--muted);margin-bottom:20px;line-height:1.5}
.code-box{background:var(--warm);border:2px dashed var(--blush);border-radius:14px;padding:18px;margin-bottom:16px}
.code-lbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.code-segs{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-bottom:6px}
.code-seg{font-family:monospace;font-size:15px;font-weight:700;letter-spacing:1px;color:var(--deep);background:var(--card);border:1.5px solid var(--blush);border-radius:7px;padding:5px 8px}
.copy-btn{width:100%;padding:11px;background:var(--rose);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:7px;transition:background .2s}
.copy-btn:hover{background:var(--deep)}
.copy-btn.ok{background:#16a34a}
.close-lnk{background:none;border:none;color:var(--muted);font-size:13px;cursor:pointer;padding:6px}

/* Profile */
.prof-av-area{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 0;margin-bottom:4px}
.prof-av-big{width:72px;height:72px;border-radius:50%;background:var(--blush);display:flex;align-items:center;justify-content:center;overflow:hidden;border:3px solid var(--rose);cursor:pointer;transition:opacity .18s;position:relative}
.prof-av-big:hover{opacity:.85}
.prof-av-big img{width:100%;height:100%;object-fit:cover}
.prof-av-initial{font-family:'Fraunces',serif;font-size:28px;color:#fff;background:var(--rose);width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:50%}
.prof-av-overlay{position:absolute;inset:0;background:rgba(0,0,0,.35);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .18s}
.prof-av-big:hover .prof-av-overlay{opacity:1}
.prof-av-opts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.prof-av-opt{padding:5px 12px;border:1.5px solid var(--blush);border-radius:20px;background:transparent;font-size:12px;color:var(--muted);cursor:pointer;transition:all .15s}
.prof-av-opt:hover,.prof-av-opt.on{border-color:var(--rose);color:var(--rose);background:var(--warm)}
.icon-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;margin-top:10px;max-height:150px;overflow-y:auto;padding:4px}
.icon-cell{width:34px;height:34px;border-radius:8px;border:2px solid transparent;background:var(--warm);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;transition:all .15s}
.icon-cell:hover{border-color:var(--rose);transform:scale(1.1)}
.icon-cell.on{border-color:var(--rose);background:var(--blush)}
.prof-section-title{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin:16px 0 8px;border-top:1px solid var(--blush);padding-top:14px}

/* Member profile card */
.mpc-ov{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-end;justify-content:center}
@media(min-width:500px){.mpc-ov{align-items:center;padding:20px}}
.mpc-ov::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(3px)}
.mpc{position:relative;background:var(--card);border-radius:22px 22px 0 0;padding:28px 24px 32px;width:100%;max-width:380px;box-shadow:0 -4px 40px rgba(0,0,0,.2);border:1px solid var(--blush)}
@media(min-width:500px){.mpc{border-radius:22px}}
.mpc-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.mpc-info{flex:1;min-width:0}
.mpc-name{font-size:18px;font-family:'Fraunces',serif;color:var(--deep);margin-bottom:2px}
.mpc-city{font-size:13px;color:var(--muted)}
.mpc-close{background:var(--warm);border:none;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);font-size:18px;flex-shrink:0}
.mpc-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--blush);font-size:13px}
.mpc-row:last-child{border-bottom:none}
.mpc-icon{font-size:16px;width:24px;text-align:center;flex-shrink:0}
.mpc-label{font-size:11px;color:var(--muted);margin-bottom:1px;text-transform:uppercase;letter-spacing:.5px}
.mpc-val{color:var(--dark);font-weight:500}
.mpc-age{font-weight:400;color:var(--muted);margin-left:4px}
.mpc-empty{text-align:center;color:var(--muted);font-size:13px;padding:8px 0}

/* Confirm modal */
.conf-ov{position:fixed;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(5px);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.conf-c{background:var(--adm-s);border:1px solid var(--adm-b);border-radius:14px;padding:26px;max-width:350px;width:100%}
.conf-c h3{font-size:17px;color:var(--adm-t);margin-bottom:5px;font-family:'Fraunces',serif}
.conf-c p{font-size:13px;color:var(--adm-m);line-height:1.6;margin-bottom:18px}
.conf-bts{display:flex;gap:8px;justify-content:flex-end}
.conf-no{padding:7px 15px;background:transparent;border:1px solid var(--adm-b);color:var(--adm-m);border-radius:7px;cursor:pointer;font-size:13px}
.conf-yes{padding:7px 15px;background:var(--adm-r);border:none;color:#fff;border-radius:7px;cursor:pointer;font-size:13px}

/* Admin */
.adm{display:flex;flex-direction:column;min-height:100vh;background:var(--adm-bg);color:var(--adm-t)}
.adm-topbar{display:flex;align-items:center;background:var(--adm-s);border-bottom:1px solid var(--adm-b);height:56px;padding:0 20px;gap:12px;flex-shrink:0;position:sticky;top:0;z-index:50}
.adm-brand{font-family:'Fraunces',serif;font-size:18px;color:var(--adm-t)}
.adm-badge{display:inline-block;background:rgba(124,106,247,.15);color:var(--adm-a);font-size:9px;font-weight:600;letter-spacing:1px;padding:2px 7px;border-radius:4px;text-transform:uppercase;margin-left:6px;vertical-align:middle}
[data-theme="dark"] .adm-badge{background:rgba(74,222,128,.15)}
.adm-topnav{display:flex;align-items:center;gap:2px;flex:1;margin-left:16px}
.adm-ni{display:flex;align-items:center;gap:7px;padding:7px 13px;font-size:13px;color:var(--adm-m);cursor:pointer;border:none;background:transparent;border-radius:8px;transition:all .15s;white-space:nowrap;border-bottom:2px solid transparent}
.adm-ni.adm-ni-config{margin-left:auto}
.adm-ni:hover{color:var(--adm-t);background:rgba(255,255,255,.05)}
.adm-ni.on{color:var(--adm-a);background:rgba(124,106,247,.08);border-bottom-color:var(--adm-a)}
[data-theme="dark"] .adm-ni.on{background:rgba(74,222,128,.08)}
.adm-nav-badge{font-size:10px;background:rgba(124,106,247,.15);color:var(--adm-a);padding:1px 6px;border-radius:8px;margin-left:4px}
.adm-nav-badge-ev{background:rgba(251,191,36,.15);color:#fbbf24}
.adm-topright{display:flex;align-items:center;gap:8px;margin-left:auto}
.adm-lo{display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--adm-b);color:var(--adm-m);border-radius:7px;cursor:pointer;font-size:12px;background:transparent;transition:all .2s}
.adm-lo:hover{border-color:var(--adm-a);color:var(--adm-t)}
.adm-main{flex:1;padding:26px 30px}
.adm-loading{text-align:center;padding:40px;color:var(--adm-m)}
.adm-ph{display:flex;justify-content:space-between;margin-bottom:22px;align-items:flex-start}
.adm-ph h2{font-size:21px;font-family:'Fraunces',serif;font-weight:400;color:var(--adm-t)}
.adm-ph p{font-size:12px;color:var(--adm-m);margin-top:2px}
.sg{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:11px;margin-bottom:24px}
.sc2{background:var(--adm-s);border:1px solid var(--adm-b);border-radius:12px;padding:16px;transition:border-color .15s,box-shadow .15s}
.sc2.clickable{cursor:pointer;text-align:left;width:100%}
.sc2.clickable:hover{border-color:var(--adm-a);box-shadow:0 0 0 2px rgba(124,106,247,.12)}
.sc2-arrow{font-size:16px;color:var(--adm-m);float:right;opacity:.5}
.sc2.clickable:hover .sc2-arrow{opacity:1;color:var(--adm-a)}
.slbl{font-size:10px;color:var(--adm-m);text-transform:uppercase;letter-spacing:.7px;margin-bottom:7px}
.sval{font-size:28px;font-family:'Fraunces',serif;font-weight:300;line-height:1}
.ssub{font-size:11px;color:var(--adm-m);margin-top:4px}
.adm-stitle{font-size:10px;font-weight:500;color:var(--adm-m);text-transform:uppercase;letter-spacing:.7px;margin-bottom:11px;display:flex;align-items:center;gap:8px}
.adm-stitle::after{content:'';flex:1;height:1px;background:var(--adm-b)}
.act-list{display:flex;flex-direction:column;gap:3px}
.act-row{display:flex;align-items:center;gap:11px;padding:10px 13px;background:var(--adm-s);border-radius:9px;border:1px solid var(--adm-b);cursor:pointer;transition:border-color .15s;flex-wrap:wrap}
.act-row:hover{border-color:rgba(124,106,247,.3)}
.adot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.adot.live{background:var(--adm-g);box-shadow:0 0 5px var(--adm-g)}.adot.paused{background:var(--adm-am)}.adot.retired{background:var(--adm-m)}.adot.closed{background:var(--adm-r)}
.aname{font-size:13px;color:var(--adm-t);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aprev{font-size:11px;color:var(--adm-m);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.atm{font-size:11px;color:var(--adm-m);flex-shrink:0}
.asl{display:flex;flex-direction:column;gap:5px}
/* Bulk selection */
.bulk-bar{display:flex;align-items:center;gap:12px;padding:8px 16px;background:rgba(124,106,247,.08);border-bottom:1px solid var(--adm-a);flex-wrap:wrap;}
.bulk-count{font-size:13px;font-weight:600;color:var(--adm-a);white-space:nowrap;}
.bulk-acts{display:flex;gap:6px;flex-wrap:wrap;}
.bulk-row-hd{padding:6px 16px;border-bottom:1px solid var(--adm-b);}
.bulk-cb-wrap{display:flex;align-items:center;gap:8px;cursor:pointer;}
.bulk-cb-wrap input[type=checkbox]{width:15px;height:15px;accent-color:var(--adm-a);cursor:pointer;flex-shrink:0;}
.usr-row-wrap{display:flex;align-items:center;gap:8px;padding:0 12px;border-left:3px solid transparent;}
.usr-row-wrap.usr-row-sel{background:rgba(124,106,247,.06);border-left-color:var(--adm-a);}
.bulk-row-wrap.usr-row-sel{background:rgba(124,106,247,.06);border-left:3px solid var(--adm-a);}
.ab-sec{padding:5px 10px;border:1px solid var(--adm-b);border-radius:7px;background:transparent;color:var(--adm-m);font-size:12px;cursor:pointer;}
.ab-sec:hover{border-color:var(--adm-m);color:var(--adm-t);}
.asr{background:var(--adm-s);border:1px solid var(--adm-b);border-radius:12px;padding:13px 16px;display:flex;align-items:center;gap:12px;transition:border-color .15s;border-left:4px solid transparent;flex-wrap:wrap}
.asr.live{border-left-color:var(--adm-g)}.asr.paused{border-left-color:var(--adm-am);opacity:.85}.asr.retired{border-left-color:var(--adm-m);opacity:.6}.asr.closed{border-left-color:var(--adm-r);opacity:.7}
.asi{flex:1;min-width:0}
.ast{font-size:14px;color:var(--adm-t);font-weight:500;margin-bottom:3px}
.ass{display:flex;gap:12px;font-size:11px;color:var(--adm-m);flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:14px;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.3px;flex-shrink:0}
.pill.live{background:rgba(52,211,153,.1);color:var(--adm-g);border:1px solid rgba(52,211,153,.2)}
.pill.paused{background:rgba(251,191,36,.1);color:var(--adm-am);border:1px solid rgba(251,191,36,.2)}
.pill.retired{background:rgba(107,111,138,.12);color:var(--adm-m);border:1px solid rgba(107,111,138,.2)}
.pill.closed{background:rgba(248,113,113,.12);color:var(--adm-r);border:1px solid rgba(248,113,113,.2)}
.abts{display:flex;gap:4px;flex-shrink:0;flex-wrap:wrap}
.ab{display:flex;align-items:center;gap:4px;padding:5px 9px;border-radius:7px;border:1px solid var(--adm-b);background:transparent;color:var(--adm-m);font-size:11px;cursor:pointer;transition:all .15s;white-space:nowrap}
.ab:hover{color:var(--adm-t);border-color:var(--adm-t)}
.ab-v:hover{border-color:var(--adm-a);color:var(--adm-a)}
.ab-p:hover{border-color:var(--adm-am);color:var(--adm-am)}
.ab-r:hover{border-color:var(--adm-g);color:var(--adm-g)}
.ab-x:hover{border-color:var(--adm-r);color:var(--adm-r)}
.ab-close:hover{border-color:var(--adm-r);color:var(--adm-r)}
.adf{display:flex;gap:6px;margin-bottom:13px;flex-wrap:wrap;align-items:center}
.adf-btn{padding:5px 11px;border-radius:7px;border:1px solid var(--adm-b);background:transparent;color:var(--adm-m);font-size:12px;cursor:pointer;transition:all .15s}
.adf-btn.on{background:rgba(124,106,247,.1);border-color:var(--adm-a);color:var(--adm-a)}
.adf-s{flex:1;min-width:110px;padding:6px 11px;border:1px solid var(--adm-b);border-radius:7px;background:var(--adm-s);color:var(--adm-t);font-size:12px;outline:none}
.adf-s:focus{border-color:var(--adm-a)}
.adf-s::placeholder{color:var(--adm-m)}
.adm-vw{display:flex;flex-direction:column;height:calc(100vh - 56px)}
.adm-vhd{display:flex;align-items:center;gap:11px;margin-bottom:13px;flex-shrink:0;flex-wrap:wrap}
.adm-back{display:flex;align-items:center;gap:5px;padding:6px 11px;background:var(--adm-s);border:1px solid var(--adm-b);color:var(--adm-m);border-radius:7px;cursor:pointer;font-size:12px;transition:all .15s}
.adm-back:hover{color:var(--adm-t);border-color:var(--adm-t)}
.adm-vi{flex:1}
.adm-vi h3{font-size:16px;color:var(--adm-t);font-family:'Fraunces',serif;font-weight:400}
.adm-vi p{font-size:11px;color:var(--adm-m);margin-top:2px}
.adm-msgs{flex:1;overflow-y:auto;background:rgba(0,0,0,.15);border:1px solid var(--adm-b);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:3px}
.amr{display:flex;align-items:flex-start;gap:8px;margin-bottom:3px}
.amav{width:24px;height:24px;border-radius:50%;background:var(--adm-s);border:1px solid var(--adm-b);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--adm-m);flex-shrink:0;margin-top:2px}
.amw{max-width:78%}
.ams{font-size:10px;color:var(--adm-m);margin-bottom:3px}
.amb{padding:7px 11px;border-radius:12px;font-size:13px;line-height:1.5;word-break:break-word;background:var(--adm-s);color:var(--adm-t);border:1px solid var(--adm-b)}
.adm-empty{text-align:center;padding:40px 20px;color:var(--adm-m)}
/* Events page */
.ev-stat{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:12px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.ev-stat.live{background:rgba(52,211,153,.12);color:var(--adm-g);border:1px solid rgba(52,211,153,.2)}
.ev-stat.paused{background:rgba(251,191,36,.12);color:var(--adm-am);border:1px solid rgba(251,191,36,.2)}
.ev-stat.closed{background:rgba(248,113,113,.12);color:#f87171;border:1px solid rgba(248,113,113,.2)}
.ev-stat.retired{background:rgba(107,111,138,.12);color:var(--adm-m);border:1px solid rgba(107,111,138,.2)}
.evr{background:var(--adm-s);border:1px solid var(--adm-b);border-radius:12px;padding:14px 18px;display:flex;align-items:flex-start;gap:14px;transition:border-color .15s;margin-bottom:5px;flex-wrap:wrap}
.evr-icon{width:40px;height:40px;border-radius:10px;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.2);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.evr-body{flex:1;min-width:0}
.evr-name{font-size:14px;font-weight:500;color:var(--adm-t);margin-bottom:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.evr-meta{display:flex;gap:14px;font-size:11px;color:var(--adm-m);flex-wrap:wrap}
.evr-acts{display:flex;gap:5px;flex-shrink:0;flex-wrap:wrap;align-items:flex-start}
/* Admin mobile */
.adm-bot{display:none;position:fixed;bottom:0;left:0;right:0;height:58px;background:var(--adm-s);border-top:1px solid var(--adm-b);z-index:50;flex-direction:row;align-items:stretch;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.adm-tab{flex:0 0 auto;min-width:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:none;background:transparent;color:var(--adm-m);cursor:pointer;padding:6px 8px;transition:color .15s;font-size:9px;font-weight:500;letter-spacing:.3px;position:relative}
.adm-tab:hover{color:var(--adm-t)}
.adm-tab.on{color:var(--adm-a)}
.adm-tab.on::after{content:'';position:absolute;top:0;left:10%;right:10%;height:2px;background:var(--adm-a);border-radius:0 0 2px 2px}
@media(max-width:768px){
  .adm-topnav{display:none!important}
  .adm-main{padding:14px 14px 74px!important}
  .adm-bot{display:flex!important}
  .adm-vw{height:calc(100vh - 56px - 58px)}
  .sg{grid-template-columns:repeat(2,1fr)}
  .asr,.evr{flex-wrap:wrap}
  .abts,.evr-acts{width:100%;margin-top:8px}
}

::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--blush);border-radius:3px}
.adm ::-webkit-scrollbar-thumb{background:var(--adm-b)}

/* ── Email Verification Screen ───────────────────────────────────────────── */
.verify-card {
  background: var(--card);
  border-radius: 22px;
  padding: 40px 36px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 4px 32px rgba(122,61,48,.12);
  border: 1px solid var(--blush);
  text-align: center;
}
.verify-icon {
  font-size: 48px;
  margin-bottom: 14px;
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.verify-card h2 {
  font-size: 22px;
  color: var(--deep);
  margin-bottom: 6px;
}
.verify-email-addr {
  font-size: 14px;
  font-weight: 600;
  color: var(--rose);
  background: var(--warm);
  border: 1px solid var(--blush);
  border-radius: 8px;
  padding: 6px 14px;
  display: inline-block;
  margin-bottom: 14px;
  word-break: break-all;
}
.verify-body {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 20px;
}
.verify-steps {
  background: var(--warm);
  border: 1px solid var(--blush);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 22px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.verify-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--dark);
  line-height: 1.5;
}
.vs-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--rose);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.verify-sent-msg {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #15803d;
  border-radius: 9px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 12px;
}
[data-theme="dark"] .verify-sent-msg {
  background: #052e16;
  border-color: #166534;
  color: #4ade80;
}
.verify-spam-note {
  font-size: 12px;
  color: var(--muted);
  margin-top: 12px;
  line-height: 1.5;
}

/* ── Auto-join / ProfileModal code toggle ────────────────────────────────── */
.code-toggle-wrap {
  margin-top: 14px;
  border-top: 1px solid var(--blush);
  padding-top: 12px;
}
.code-toggle-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .18s;
}
.code-toggle-btn:hover { color: var(--rose); }

/* ── Join result banner ───────────────────────────────────────────────────── */
.join-result {
  background: var(--warm);
  border: 1.5px solid var(--blush);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--deep);
  line-height: 1.6;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.join-result-icon { font-size: 24px; flex-shrink: 0; margin-top: 1px; }
.join-result-title { font-weight: 700; margin-bottom: 3px; font-size: 14px; }
.join-result-sub { color: var(--muted); font-size: 12px; }

/* ── User Management Page ─────────────────────────────────────────────────── */
.usr-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 32px;
}

.usr-row {
  background: var(--adm-s);
  border: 1px solid var(--adm-b);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: border-color .15s;
  border-left: 4px solid transparent;
}
.usr-row:hover { border-left-color: var(--adm-a); }
.usr-suspended { border-left-color: var(--adm-r) !important; opacity: .75; }

.usr-av {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--adm-b);
  border: 1px solid var(--adm-b);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0; overflow: hidden;
}
.usr-av img { width: 100%; height: 100%; object-fit: cover; }
.usr-init {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  color: var(--adm-a);
}

.usr-info { flex: 1; min-width: 0; }

.usr-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--adm-t);
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.usr-email {
  font-size: 12px;
  color: var(--adm-m);
  margin-bottom: 5px;
  word-break: break-all;
}

.usr-meta {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--adm-m);
  flex-wrap: wrap;
}

.usr-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.usr-badge-suspended {
  background: rgba(248,113,113,.15);
  color: var(--adm-r);
  border: 1px solid rgba(248,113,113,.25);
}
.usr-badge-unverified {
  background: rgba(251,191,36,.15);
  color: var(--adm-am);
  border: 1px solid rgba(251,191,36,.25);
}
.usr-badge-fake {
  background: rgba(124,106,247,.15);
  color: var(--adm-a);
  border: 1px solid rgba(124,106,247,.25);
}

.usr-acts {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Status message bar */
.usr-msg {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 9px;
  font-size: 13px;
  margin-bottom: 14px;
  font-weight: 500;
}
.usr-msg-ok  { background: rgba(52,211,153,.1);  color: var(--adm-g); border: 1px solid rgba(52,211,153,.2);  }
.usr-msg-err { background: rgba(248,113,113,.1); color: var(--adm-r); border: 1px solid rgba(248,113,113,.2); }
.usr-msg-close {
  margin-left: auto;
  background: none; border: none;
  color: inherit; cursor: pointer; font-size: 16px; opacity: .6;
}
.usr-msg-close:hover { opacity: 1; }

/* ── Testing Tools section ────────────────────────────────────────────────── */
.usr-test-section {
  background: var(--adm-s);
  border: 1px solid var(--adm-b);
  border-radius: 14px;
  padding: 22px 24px;
  margin-top: 8px;
}

.usr-test-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--adm-t);
  margin-bottom: 6px;
}

.usr-test-sub {
  font-size: 13px;
  color: var(--adm-m);
  line-height: 1.6;
  margin-bottom: 18px;
}
.usr-test-sub code {
  background: var(--adm-b);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--adm-a);
}

.usr-test-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.usr-test-card {
  background: var(--adm-bg);
  border: 1px solid var(--adm-b);
  border-radius: 10px;
  padding: 16px 18px;
}

.usr-test-danger {
  border-color: rgba(248,113,113,.25);
  background: rgba(248,113,113,.04);
}

.usr-test-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--adm-t);
}

.usr-test-result {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
}
.usr-test-ok  { background: rgba(52,211,153,.1);  color: var(--adm-g); }
.usr-test-err { background: rgba(248,113,113,.1); color: var(--adm-r); }

@media (max-width: 768px) {
  .usr-test-row { grid-template-columns: 1fr; }
  .usr-acts { width: 100%; margin-top: 8px; }
  .usr-row  { flex-wrap: wrap; }
  /* Add members tab to mobile bottom nav */
  .adm-bot { justify-content: space-around; }
}

/* ── User Detail Modal ────────────────────────────────────────────────────── */
.udet-mc {
  max-width: 480px;
  padding: 0;
  overflow: hidden;
}

.udet-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 26px 20px;
  background: var(--adm-s);
  border-bottom: 1px solid var(--adm-b);
}

.udet-av {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--adm-b);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0; overflow: hidden;
  border: 2px solid var(--adm-b);
}

.udet-head-info { flex: 1; min-width: 0; }

.udet-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--adm-t);
  margin-bottom: 3px;
}

.udet-email {
  font-size: 12px;
  color: var(--adm-m);
  margin-bottom: 8px;
  word-break: break-all;
}

.udet-badges {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.udet-close {
  background: var(--adm-b);
  border: none;
  border-radius: 50%;
  width: 28px; height: 28px;
  color: var(--adm-m);
  cursor: pointer;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.udet-close:hover { background: var(--adm-r); color: #fff; }

.udet-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--adm-m);
  padding: 14px 26px 6px;
}

.udet-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 7px 26px;
  border-bottom: 1px solid var(--adm-b);
  font-size: 13px;
}
.udet-row:last-of-type { border-bottom: none; }

.udet-label {
  width: 110px;
  flex-shrink: 0;
  color: var(--adm-m);
  font-size: 12px;
}

.udet-val {
  color: var(--adm-t);
  flex: 1;
  word-break: break-word;
}

.udet-divider {
  height: 1px;
  background: var(--adm-b);
  margin: 4px 0;
}

.udet-mc .btn-sec {
  margin: 0 26px 24px;
  width: calc(100% - 52px);
}

/* ── Reset Password Modal ─────────────────────────────────────────────────── */
.rpw-warning {
  background: rgba(251,191,36,.1);
  border: 1px solid rgba(251,191,36,.25);
  border-radius: 9px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--adm-am);
  margin-bottom: 16px;
  line-height: 1.5;
}

.rpw-result {
  background: var(--adm-s);
  border: 1px solid var(--adm-b);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 14px;
  text-align: center;
}

.rpw-result-label {
  font-size: 11px;
  color: var(--adm-m);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 10px;
}

.rpw-result-pw {
  font-family: 'Courier New', monospace;
  font-size: 22px;
  font-weight: 700;
  color: var(--adm-g);
  letter-spacing: 1px;
  margin-bottom: 14px;
  word-break: break-all;
}

.rpw-copy {
  background: var(--adm-b);
  border: 1px solid var(--adm-b);
  border-radius: 8px;
  color: var(--adm-t);
  padding: 7px 16px;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s;
  width: 100%;
}
.rpw-copy:hover { background: rgba(52,211,153,.15); border-color: var(--adm-g); }
.rpw-copied { background: rgba(52,211,153,.15) !important; border-color: var(--adm-g) !important; color: var(--adm-g) !important; }

.rpw-note {
  font-size: 12px;
  color: var(--adm-r);
  text-align: center;
  padding: 8px 0;
  font-weight: 600;
}

/* ── Reset Password Modal — method selection & confirm ─────────────────────── */
.rpw-method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.rpw-method {
  border: 2px solid var(--adm-b);
  border-radius: 14px;
  padding: 18px 16px;
  cursor: pointer;
  background: var(--adm-s);
  transition: border-color .18s, background .18s, transform .15s;
  text-align: center;
}
.rpw-method:hover {
  border-color: var(--adm-a);
  background: rgba(124,106,247,.06);
  transform: translateY(-2px);
}
.rpw-method-on {
  border-color: var(--adm-a) !important;
  background: rgba(124,106,247,.1) !important;
  box-shadow: 0 0 0 3px rgba(124,106,247,.15);
}

.rpw-method-icon {
  font-size: 28px;
  margin-bottom: 10px;
}
.rpw-method-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--adm-t);
  margin-bottom: 6px;
  line-height: 1.3;
}
.rpw-method-sub {
  font-size: 11px;
  color: var(--adm-m);
  line-height: 1.5;
}

/* Confirm card */
.rpw-confirm-card {
  background: var(--adm-s);
  border: 1px solid var(--adm-b);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}
.rpw-confirm-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--adm-b);
  font-size: 13px;
}
.rpw-confirm-row:last-child { border-bottom: none; }
.rpw-confirm-label {
  width: 70px;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--adm-m);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.rpw-confirm-val {
  color: var(--adm-t);
  flex: 1;
  word-break: break-word;
}

/* Email sent success box */
.rpw-sent-box {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(52,211,153,.08);
  border: 1px solid rgba(52,211,153,.2);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 4px;
}
.rpw-sent-icon { font-size: 28px; flex-shrink: 0; }
.rpw-sent-to   { font-size: 11px; color: var(--adm-m); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
.rpw-sent-email{ font-size: 14px; font-weight: 600; color: var(--adm-g); word-break: break-all; }

@media (max-width: 480px) {
  .rpw-method-grid { grid-template-columns: 1fr; }
}

/* ── Reset Password Modal — reveal toggle ─────────────────────────────────── */
.rpw-result-pw-wrap {
  margin-bottom: 12px;
}

.rpw-result-pw-hidden {
  filter: blur(6px);
  user-select: none;
  pointer-events: none;
  transition: filter .25s;
}

.rpw-reveal-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  background: var(--adm-b);
  border: 1px solid var(--adm-b);
  border-radius: 8px;
  color: var(--adm-t);
  padding: 7px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.rpw-reveal-btn:hover {
  background: rgba(124,106,247,.12);
  border-color: var(--adm-a);
  color: var(--adm-a);
}

.rpw-copy:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ── User Profile — Change Password section ───────────────────────────────── */
.chpw-toggle {
  background: none;
  border: 1px solid var(--blush);
  border-radius: 20px;
  color: var(--muted);
  font-size: 12px;
  font-family: 'DM Sans', sans-serif;
  padding: 4px 12px;
  cursor: pointer;
  transition: border-color .18s, color .18s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.chpw-toggle:hover { border-color: var(--rose); color: var(--rose); }

.chpw-box {
  background: var(--warm);
  border: 1.5px solid var(--blush);
  border-radius: 12px;
  padding: 16px 18px 18px;
  margin-bottom: 14px;
  animation: fadeUp .2s ease both;
}

.chpw-success {
  background: #f0fdf4;
  border: 1px solid #86efac;
  color: #15803d;
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 10px;
}
[data-theme="dark"] .chpw-success {
  background: #052e16;
  border-color: #166534;
  color: #4ade80;
}

/* ── Forgot password link on login screen ─────────────────────────────────── */
.auth-forgot-link {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 13px;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  padding: 8px 0 0;
  transition: color .18s;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}
.auth-forgot-link:hover { color: var(--rose); }

/* ── Forgot password screen ───────────────────────────────────────────────── */
.fpw-confirm-box {
  background: var(--warm);
  border: 1.5px solid var(--blush);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 18px;
  text-align: center;
}
.fpw-confirm-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .7px;
  margin-bottom: 6px;
}
.fpw-confirm-email {
  font-size: 16px;
  font-weight: 700;
  color: var(--deep);
  word-break: break-all;
}

.fpw-sent-box {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
[data-theme="dark"] .fpw-sent-box {
  background: #052e16;
  border-color: #166534;
}
.fpw-sent-icon { font-size: 28px; flex-shrink: 0; }
.fpw-sent-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .7px;
  margin-bottom: 3px;
}
.fpw-sent-email {
  font-size: 14px;
  font-weight: 700;
  color: var(--deep);
  word-break: break-all;
}
[data-theme="dark"] .fpw-sent-email { color: #4ade80; }

/* ── Activity Charts ─────────────────────────────────────────────────────── */
.ach-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.ach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}

.ach-wrap {
  background: var(--adm-s);
  border: 1px solid var(--adm-b);
  border-radius: 12px;
  padding: 14px 14px 8px;
  transition: border-color .15s;
}
.ach-wrap:hover { border-color: var(--adm-a); }

.ach-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.ach-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--adm-m);
  text-transform: uppercase;
  letter-spacing: .6px;
}

.ach-total {
  font-size: 20px;
  font-weight: 700;
  font-family: 'Fraunces', serif;
  line-height: 1;
}

.ach-unit {
  font-size: 10px;
  font-weight: 400;
  color: var(--adm-m);
  font-family: 'DM Sans', sans-serif;
  margin-left: 2px;
}

.ach-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.ach-loading {
  color: var(--adm-m);
  font-size: 13px;
  padding: 20px 0;
  text-align: center;
}

@media (max-width: 900px) {
  .ach-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ach-grid { grid-template-columns: 1fr; }
}

/* ── Poll widget (create form) ───────────────────────────────────────────── */
.poll-opt-row { display:flex; align-items:center; gap:8px; }
.poll-del-opt {
  background:none; border:1px solid var(--blush); border-radius:6px;
  color:var(--muted); cursor:pointer; padding:4px 9px; font-size:13px;
  flex-shrink:0; transition:all .15s;
}
.poll-del-opt:hover { border-color:var(--rose); color:var(--rose); }

/* ── Poll card in chat ────────────────────────────────────────────────────── */
.poll-card {
  background:var(--card); border:1.5px solid var(--blush);
  border-radius:14px; padding:13px 15px;
  box-shadow:var(--sh2);
  width:100%;
}
.poll-header {
  display:flex; align-items:flex-start; gap:8px; margin-bottom:13px;
}
.poll-icon { font-size:16px; flex-shrink:0; margin-top:2px; }
.poll-q { font-weight:700; font-size:14px; color:var(--dark); flex:1; line-height:1.45; }
.poll-closed-badge {
  font-size:10px; font-weight:700; background:var(--warm);
  color:var(--muted); border-radius:20px; padding:3px 9px; flex-shrink:0;
  border:1px solid var(--blush);
}

/* Bubble-style option rows */
.poll-opts { display:flex; flex-direction:column; gap:7px; margin-bottom:11px; }

.poll-bubble {
  border:2px solid var(--blush);
  border-radius:12px;
  padding:10px 13px;
  background:var(--bg);
  transition:border-color .18s, background .18s, box-shadow .18s;
  outline:none;
  user-select:none;
}
.poll-bubble:not(.poll-bubble-closed) {
  cursor:pointer;
}
.poll-bubble:not(.poll-bubble-closed):hover {
  border-color:var(--rose);
  background:rgba(201,125,106,.05);
  box-shadow:0 0 0 3px rgba(201,125,106,.1);
}
.poll-bubble:not(.poll-bubble-closed):focus {
  border-color:var(--rose);
  box-shadow:0 0 0 3px rgba(201,125,106,.18);
}
.poll-bubble-selected {
  border-color:var(--rose) !important;
  background:rgba(201,125,106,.08) !important;
  box-shadow:0 0 0 3px rgba(201,125,106,.15) !important;
}
.poll-bubble-closed { cursor:default; }

/* Radio + label row inside bubble */
.poll-bubble-row {
  display:flex; align-items:center; gap:10px;
}
.poll-radio {
  width:18px; height:18px; border-radius:50%;
  border:2px solid var(--blush);
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  transition:border-color .15s;
  background:var(--bg);
}
.poll-bubble:hover .poll-radio,
.poll-bubble-selected .poll-radio {
  border-color:var(--rose);
}
.poll-radio-on {
  border-color:var(--rose) !important;
  background:var(--rose);
}
.poll-radio-dot {
  width:7px; height:7px; border-radius:50%; background:#fff;
  display:block;
}
.poll-bubble-label {
  flex:1; font-size:13px; color:var(--dark); line-height:1.35;
}
.poll-bubble-pct {
  font-size:12px; font-weight:700; color:var(--muted);
  flex-shrink:0;
}
.poll-bubble-selected .poll-bubble-pct { color:var(--rose); }

/* Thin result bar inside bubble */
.poll-bubble-bar {
  height:3px; background:var(--warm); border-radius:2px;
  margin-top:7px; overflow:hidden;
}
.poll-bubble-fill {
  height:100%; border-radius:2px;
  transition:width .4s ease;
}

/* Footer */
.poll-footer {
  font-size:11px; color:var(--muted);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:6px;
}
.poll-change-hint {
  font-size:11px; color:var(--muted); font-style:italic;
}
.poll-close-btn {
  background:none; border:1px solid var(--blush); border-radius:20px;
  color:var(--muted); cursor:pointer; font-size:11px; padding:3px 11px;
  transition:all .15s;
}
.poll-close-btn:hover { border-color:var(--rose); color:var(--rose); }

/* ── Report button in MemberCard ────────────────────────────────────────── */
.mpc-report-btn {
  display:block; width:100%; background:none;
  border:1px solid rgba(201,125,106,.3); border-radius:10px;
  color:var(--muted); font-size:12px; font-family:'DM Sans',sans-serif;
  padding:8px; cursor:pointer; margin-top:10px;
  transition:all .15s;
}
.mpc-report-btn:hover { border-color:var(--rose); color:var(--rose); background:rgba(201,125,106,.06); }

/* ── Admin Reports page ─────────────────────────────────────────────────── */
.rep-list { display:flex; flex-direction:column; gap:8px; margin-bottom:24px; }

.rep-row {
  background:var(--adm-s); border:1px solid var(--adm-b);
  border-radius:12px; padding:14px 16px;
  display:flex; align-items:flex-start; gap:14px;
  border-left:4px solid var(--adm-am);
}
.rep-suspended { border-left-color:var(--adm-r); opacity:.8; }

.rep-count-badge {
  width:36px; height:36px; border-radius:50%;
  background:var(--adm-am); color:#000;
  font-size:16px; font-weight:700; font-family:'Fraunces',serif;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

.rep-info { flex:1; min-width:0; }
.rep-name { font-size:14px; font-weight:600; color:var(--adm-t); margin-bottom:2px;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.rep-email { font-size:12px; color:var(--adm-m); margin-bottom:4px; word-break:break-all; }
.rep-reasons {
  font-size:12px; color:var(--adm-m); font-style:italic;
  margin-bottom:4px; line-height:1.4;
  max-height:40px; overflow:hidden;
}
.rep-meta { font-size:11px; color:var(--adm-m); }

/* ── Admin Config page ──────────────────────────────────────────────────── */
.cfg-section {
  background:var(--adm-s); border:1px solid var(--adm-b);
  border-radius:14px; padding:22px 24px;
}
.cfg-section-title {
  font-size:14px; font-weight:700; color:var(--adm-t); margin-bottom:10px;
}
.cfg-desc {
  font-size:13px; color:var(--adm-m); line-height:1.6; margin-bottom:18px;
}
.cfg-row {
  display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:18px;
}
.cfg-field {}
.cfg-label {
  font-size:12px; font-weight:600; color:var(--adm-t);
  display:block; margin-bottom:4px;
}
.cfg-hint {
  font-size:11px; color:var(--adm-m); line-height:1.5; margin-bottom:8px;
}
.cfg-input-row { display:flex; align-items:center; gap:8px; }
.cfg-input { width:90px; flex:none !important; }
.cfg-unit { font-size:13px; color:var(--adm-m); }
.cfg-preview {
  background:var(--adm-bg); border:1px solid var(--adm-b);
  border-radius:9px; padding:11px 14px;
  font-size:13px; color:var(--adm-m); line-height:1.6;
  margin-bottom:18px;
}
.cfg-preview strong { color:var(--adm-t); }
.cfg-preview-label { font-weight:600; color:var(--adm-a); margin-right:6px; }
.cfg-about {
  border:1px solid var(--adm-b); border-radius:9px; overflow:hidden;
}
.cfg-about-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 14px; border-bottom:1px solid var(--adm-b);
  font-size:13px; color:var(--adm-m);
}
.cfg-about-row:last-child { border-bottom:none; }
.cfg-about-row span:last-child { color:var(--adm-t); font-weight:500; }

@media (max-width:640px) {
  .cfg-row { grid-template-columns:1fr; }
}

/* ── New accounts trend bar charts ──────────────────────────────────────── */
.ach-trend-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px;
}
.trend-bars {
  display:flex; align-items:flex-end; gap:3px;
  height:80px; padding:4px 0 0;
}
.trend-bar-col {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end; gap:3px; min-width:0;
}
.trend-bar {
  width:100%; border-radius:3px 3px 0 0;
  min-height:2px; transition:height .3s ease;
}
.trend-bar-label {
  font-size:9px; color:var(--adm-m);
  white-space:nowrap; overflow:hidden;
  max-width:100%; text-overflow:ellipsis;
}
@media (max-width:640px) {
  .ach-trend-grid { grid-template-columns:1fr; }
}

/* ── Dashboard Waitlist + Tickets panels ─────────────────────────────────── */
.dash-panels-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
  margin-bottom: 8px;
}
@media (max-width: 720px) {
  .dash-panels-grid { grid-template-columns: 1fr; }
}
.dash-panel {
  background: var(--adm-c);
  border: 1.5px solid var(--adm-b);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color .2s;
}
.dash-panel-alert {
  border-color: var(--adm-r);
  box-shadow: 0 0 0 3px rgba(239,68,68,.08);
}
.dash-panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dash-panel-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}
.dash-panel-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--adm-t);
  line-height: 1.2;
}
.dash-panel-sub {
  font-size: 11px;
  color: var(--adm-m);
  margin-top: 2px;
}
.dash-panel-action {
  margin-left: auto;
  font-size: 11px !important;
  padding: 4px 10px !important;
  white-space: nowrap;
  flex-shrink: 0;
}
.dash-panel-stats {
  display: flex;
  gap: 0;
  border: 1px solid var(--adm-b);
  border-radius: 10px;
  overflow: hidden;
}
.dash-pstat {
  flex: 1;
  text-align: center;
  padding: 10px 4px 8px;
  border-right: 1px solid var(--adm-b);
}
.dash-pstat:last-child { border-right: none; }
.dash-pstat-val {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
}
.dash-pstat-lbl {
  font-size: 10px;
  color: var(--adm-m);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.dash-panel-plat {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dash-plat-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  text-transform: capitalize;
}
.dash-plat-tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--adm-a);
  background: var(--adm-a-bg, rgba(107,119,241,.12));
  padding: 2px 7px;
  border-radius: 10px;
  text-transform: capitalize;
}
.dash-panel-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--adm-b);
  border-radius: 10px;
  overflow: hidden;
}
.dash-panel-list-hdr {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--adm-m);
  padding: 8px 12px 6px;
  border-bottom: 1px solid var(--adm-b);
  background: var(--adm-b);
}
.dash-panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--adm-b);
  gap: 8px;
}
.dash-panel-row:last-child { border-bottom: none; }
.dash-panel-row-ticket {
  cursor: pointer;
  transition: background .15s;
}
.dash-panel-row-ticket:hover { background: var(--adm-b); }
.dash-panel-row-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.dash-panel-row-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--adm-t);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-panel-row-email {
  font-size: 11px;
  color: var(--adm-m);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-panel-row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.dash-panel-row-time {
  font-size: 10px;
  color: var(--adm-m);
  white-space: nowrap;
}
.dash-ticket-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--adm-r);
  display: inline-block;
  flex-shrink: 0;
}
.dash-panel-empty {
  font-size: 12px;
  color: var(--adm-m);
  text-align: center;
  padding: 16px 8px;
  font-style: italic;
}

/* ── Join-choice cards (ProfileModal step 2) ─────────────────────────────── */
.join-choice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 2px solid var(--blush);
  border-radius: 14px;
  padding: 16px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  background: var(--card);
  transition: border-color .18s, background .18s, box-shadow .18s, transform .15s;
  user-select: none;
}
.join-choice:hover {
  border-color: var(--rose);
  background: rgba(201,125,106,.04);
  box-shadow: 0 4px 20px rgba(201,125,106,.12);
  transform: translateY(-1px);
}
.join-choice-active {
  border-color: var(--rose);
  background: rgba(201,125,106,.04);
  box-shadow: 0 0 0 3px rgba(201,125,106,.15);
}

.join-choice-icon {
  font-size: 26px;
  flex-shrink: 0;
  margin-top: 1px;
}

.join-choice-body {
  flex: 1;
  min-width: 0;
}

.join-choice-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 4px;
  font-family: 'Fraunces', serif;
}

.join-choice-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}

.join-choice-arrow {
  font-size: 22px;
  color: var(--blush);
  flex-shrink: 0;
  margin-top: 2px;
  transition: color .15s;
}
.join-choice:hover .join-choice-arrow { color: var(--rose); }

/* ── Chat member count badge (in header) ────────────────────────────────── */
.chat-hd-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blush);
  color: var(--deep);
  font-size: 11px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  border-radius: 20px;
  padding: 1px 8px;
  margin-left: 7px;
  vertical-align: middle;
  line-height: 1.6;
}

/* ── Chat member strip (below header) ───────────────────────────────────── */
.chat-members-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 22px 7px;
  background: var(--warm);
  border-bottom: 1px solid var(--blush);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.cms-avatars {
  display: flex;
  align-items: center;
}

.cms-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--blush);
  border: 2px solid var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  margin-left: -6px;
  flex-shrink: 0;
  transition: transform .15s;
}
.cms-av:first-child { margin-left: 0; }
.cms-av:hover { transform: scale(1.15); z-index: 2; }

.cms-init {
  font-size: 10px;
  font-weight: 700;
  color: var(--deep);
  font-family: 'Fraunces', serif;
}

.cms-more {
  background: var(--warm);
  border: 2px solid var(--blush);
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
}

.cms-names {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

/* ── Sidebar member count pill ──────────────────────────────────────────── */
.sb-mem-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.18);
  color: var(--sb-text);
  font-size: 10px;
  font-weight: 700;
  border-radius: 20px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
  opacity: .8;
}

/* ── Event Manage Modal ──────────────────────────────────────────────────── */
.evm-mc {
  max-width: 440px;
  padding: 24px 26px 20px;
}

.evm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.evm-header h2 { margin: 0; }

/* Tab bar */
.evm-tabs {
  display: flex;
  gap: 4px;
  background: var(--warm);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 14px;
}
.evm-tab {
  flex: 1;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .15s, color .15s;
  font-family: 'DM Sans', sans-serif;
}
.evm-tab:hover { color: var(--deep); }
.evm-tab.on {
  background: var(--card);
  color: var(--deep);
  font-weight: 700;
  box-shadow: var(--sh2);
}

.evm-tab-count {
  background: var(--blush);
  color: var(--deep);
  font-size: 10px;
  font-weight: 700;
  border-radius: 20px;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
}
.evm-tab-count-blue {
  background: rgba(124,106,247,.18);
  color: #7c6af7;
}

/* Member list */
.evm-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  margin-bottom: 4px;
}

.evm-empty {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 24px 0;
}

/* Member chip row */
.evm-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--warm);
  border: 1px solid var(--blush);
  border-radius: 10px;
  padding: 9px 12px;
  transition: border-color .15s;
}
.evm-chip:hover { border-color: var(--rose); }

.evm-av {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--blush);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.evm-init {
  font-size: 13px; font-weight: 700;
  color: var(--deep); font-family: 'Fraunces', serif;
}

.evm-chip-info { flex: 1; min-width: 0; }
.evm-chip-name {
  font-size: 13px; font-weight: 600;
  color: var(--dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.evm-chip-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }

/* Add/remove buttons on chips */
.evm-btn {
  flex-shrink: 0;
  border: none; border-radius: 8px;
  font-size: 12px; font-weight: 600;
  padding: 5px 11px; cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: background .15s, opacity .15s;
}
.evm-btn:disabled { opacity: .45; cursor: not-allowed; }
.evm-btn-add {
  background: rgba(201,125,106,.12);
  color: var(--deep);
}
.evm-btn-add:hover:not(:disabled) { background: var(--rose); color: #fff; }
.evm-btn-remove {
  background: rgba(248,113,113,.1);
  color: #b91c1c;
}
.evm-btn-remove:hover:not(:disabled) { background: #f87171; color: #fff; }

/* ── Join welcome banner (shown after auto-matching to an existing salon) ─── */
.join-welcome-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: linear-gradient(135deg, var(--rose), var(--deep));
  color: #fff;
  padding: 14px 18px;
  flex-shrink: 0;
  animation: fadeUp .4s ease both;
  position: relative;
}

.jwb-icon {
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 1px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
}

.jwb-body { flex: 1; min-width: 0; }

.jwb-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 3px;
}

.jwb-text {
  font-size: 13px;
  line-height: 1.5;
  opacity: .92;
}
.jwb-text strong { opacity: 1; }

.jwb-close {
  background: rgba(255,255,255,.2);
  border: none;
  border-radius: 50%;
  width: 24px; height: 24px;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s;
  align-self: flex-start;
}
.jwb-close:hover { background: rgba(255,255,255,.35); }

/* ── Event owner badge in manage modal ──────────────────────────────────── */
.evm-owner-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--warm);
  border: 1px solid var(--blush);
  border-radius: 20px;
  padding: 3px 10px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Find nearby locations button (CreateEventModal) ────────────────────── */
.btn-nearby {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: var(--warm);
  border: 2px dashed var(--blush);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--deep);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  text-align: left;
  transition: border-color .18s, background .18s, box-shadow .18s;
  margin-top: 6px;
}
.btn-nearby:hover:not(:disabled) {
  border-color: var(--rose);
  background: rgba(201,125,106,.06);
  box-shadow: 0 0 0 3px rgba(201,125,106,.1);
}
.btn-nearby:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.btn-nearby-icon { font-size: 18px; flex-shrink: 0; }
.btn-nearby-ext {
  margin-left: auto;
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  background: var(--blush);
  border-radius: 10px;
  padding: 2px 8px;
  flex-shrink: 0;
  white-space: nowrap;
}
.btn-nearby:hover:not(:disabled) .btn-nearby-ext {
  background: rgba(201,125,106,.2);
  color: var(--deep);
}
.btn-nearby-hint {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin-top: 4px;
  margin-bottom: 2px;
}
.btn-nearby-hint strong { color: var(--deep); }

/* ── Venue Picker Modal ──────────────────────────────────────────────────── */
.venue-picker-ov { z-index: 120; }

.venue-picker-mc {
  max-width: 480px;
  padding: 22px 24px 18px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.venue-picker-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  flex-shrink: 0;
}
.venue-picker-hd h2 { margin: 0; }

.venue-loading {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 32px 0;
  flex-shrink: 0;
}

.venue-empty {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 28px 0;
  flex-shrink: 0;
}

.venue-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 4px 0 12px;
  padding-right: 2px;
}

/* Individual venue card */
.venue-card {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--blush);
  border-radius: 12px;
  padding: 11px 12px;
  cursor: pointer;
  background: var(--bg);
  transition: border-color .15s, background .15s, box-shadow .15s;
  flex-shrink: 0;
}
.venue-card:hover {
  border-color: var(--rose);
  background: rgba(201,125,106,.04);
  box-shadow: 0 0 0 3px rgba(201,125,106,.1);
}
.venue-card-sel {
  border-color: var(--rose) !important;
  background: rgba(201,125,106,.07) !important;
  box-shadow: 0 0 0 3px rgba(201,125,106,.15) !important;
}

/* Radio ring on the left */
.venue-card-left { flex-shrink: 0; }
.venue-sel-ring {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--blush);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s;
  background: var(--bg);
}
.venue-card:hover .venue-sel-ring,
.venue-card-sel .venue-sel-ring {
  border-color: var(--rose);
}
.venue-card-sel .venue-sel-ring { background: var(--rose); }
.venue-sel-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
  display: block;
}

/* Body text */
.venue-card-body { flex: 1; min-width: 0; }
.venue-name {
  font-size: 13px; font-weight: 700;
  color: var(--dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.venue-addr {
  font-size: 11px; color: var(--muted);
  margin-top: 2px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.venue-meta {
  display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap;
}
.venue-dist {
  font-size: 11px; font-weight: 600; color: var(--rose);
  background: rgba(201,125,106,.1); border-radius: 10px;
  padding: 1px 7px;
}
.venue-type {
  font-size: 10px; color: var(--muted);
  background: var(--warm); border-radius: 10px;
  padding: 1px 7px; text-transform: capitalize;
}

/* Map icon link */
.venue-map-link {
  font-size: 18px;
  text-decoration: none;
  flex-shrink: 0;
  opacity: .5;
  transition: opacity .15s;
  padding: 4px;
}
.venue-map-link:hover { opacity: 1; }

/* Footer with action buttons */
.venue-picker-footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

/* ── Selected venue chip in CreateEventModal ────────────────────────────── */
.venue-selected-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(201,125,106,.08);
  border: 1.5px solid var(--rose);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 6px;
}
.venue-sel-icon { font-size: 18px; flex-shrink: 0; }
.venue-sel-info { flex: 1; min-width: 0; }
.venue-sel-name {
  font-size: 13px; font-weight: 700; color: var(--dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.venue-sel-addr {
  font-size: 11px; color: var(--muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.venue-sel-link {
  font-size: 12px; font-weight: 600;
  color: var(--rose); text-decoration: none;
  border: 1px solid var(--rose); border-radius: 8px;
  padding: 3px 9px; flex-shrink: 0;
  transition: all .15s;
}
.venue-sel-link:hover { background: var(--rose); color: #fff; }
.venue-sel-clear {
  background: none; border: none;
  color: var(--muted); cursor: pointer;
  font-size: 18px; padding: 0 2px;
  transition: color .15s; flex-shrink: 0;
}
.venue-sel-clear:hover { color: var(--rose); }

/* Update btn-nearby to remove "opens Maps" ext label when browsing inline */
.btn-nearby-ext {
  background: rgba(201,125,106,.12);
  color: var(--rose);
}

/* ── Venue Banner (compact card at top of event chat) ───────────────────── */
.venue-banner {
  display: flex;
  flex-direction: row;          /* horizontal: photos left, info right */
  align-items: stretch;
  flex-shrink: 0;
  background: var(--warm);
  border-bottom: 1px solid var(--blush);
  overflow: hidden;
  min-height: 72px;
}

/* Photo carousel — small square on the left */
.vb-photos {
  position: relative;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  align-self: center;
  margin: 8px 0 8px 10px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--blush);
}

.vb-photo-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.vb-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .3s ease;
  display: block;
}
.vb-photo-active { opacity: 1; z-index: 1; }

/* Arrow buttons — tiny, sit on the image edges */
.vb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  background: rgba(0,0,0,.45);
  border: none;
  color: #fff;
  font-size: 13px;
  width: 18px; height: 18px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; line-height: 1;
}
.vb-arrow:hover { background: rgba(0,0,0,.7); }
.vb-arrow-l { left: 2px; }
.vb-arrow-r { right: 2px; }

/* Dots — under the square thumbnail */
.vb-dots {
  display: flex;
  justify-content: center;
  gap: 3px;
  padding: 3px 0 0;
  position: absolute;
  bottom: 3px;
  left: 0; right: 0;
}
.vb-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  cursor: pointer;
  transition: background .2s;
}
.vb-dot-on { background: #fff; }

/* Info — flex column, takes remaining width */
.vb-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 10px 14px 10px 12px;
  flex: 1;
  min-width: 0;
}
.vb-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vb-addr {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vb-directions {
  font-size: 11px;
  font-weight: 600;
  color: var(--rose);
  text-decoration: none;
  margin-top: 3px;
  display: inline-block;
  transition: opacity .15s;
}
.vb-directions:hover { opacity: .75; }

/* ── Venue card photo thumbnail ────────────────────────────────────────── */
.venue-card-thumb {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--warm);
  margin-right: 2px;
}
.venue-card-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Manual venue entry button ──────────────────────────────────────────── */
.venue-manual-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: 1.5px dashed var(--blush);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  margin-top: 4px;
  transition: border-color .15s, color .15s;
}
.venue-manual-btn:hover { border-color: var(--rose); color: var(--rose); }

/* ── Date/time row in event creation / date modal ────────────────────────── */
.ev-dt-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.ev-dt-row .fg { margin-bottom: 0; }
.lbl-opt {
  font-weight: 400;
  color: var(--muted);
  font-size: 10px;
  margin-left: 4px;
}

/* ── Date line in VenueBanner ────────────────────────────────────────────── */
.vb-date {
  font-size: 12px;
  font-weight: 600;
  color: var(--rose);
  margin-top: 1px;
}

/* ── Venue search input + dropdown (VenuePickerModal) ───────────────────── */
.venue-search-wrap {
  position: relative;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.venue-search-spin {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.venue-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 50;
  background: var(--card);
  border: 1.5px solid var(--rose);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
  overflow: hidden;
  max-height: 220px;
  overflow-y: auto;
}
.venue-dd-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--blush);
  transition: background .12s;
}
.venue-dd-item:last-child { border-bottom: none; }
.venue-dd-item:hover { background: rgba(201,125,106,.07); }
.venue-dd-name {
  font-size: 13px; font-weight: 600; color: var(--dark);
}
.venue-dd-addr {
  font-size: 11px; color: var(--muted); margin-top: 2px;
}

/* ── Clickable member strip ─────────────────────────────────────────────── */
.cms-av-clickable {
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.cms-av-clickable:hover {
  transform: scale(1.2);
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.cms-name-link {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  transition: color .15s;
}
.cms-name-link:hover { color: var(--rose); }

/* ── AvatarChip action buttons row ─────────────────────────────────────── */
.evm-chip-acts {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: 4px;
}
.evm-btn-view {
  background: rgba(124,106,247,.1);
  color: #7c6af7;
  border: none;
  border-radius: 7px;
  width: 30px; height: 30px;
  cursor: pointer;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
  font-family: inherit;
}
.evm-btn-view:hover { background: rgba(124,106,247,.22); }
.evm-btn-report {
  background: rgba(248,113,113,.1);
  color: #f87171;
  border: none;
  border-radius: 7px;
  width: 30px; height: 30px;
  cursor: pointer;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
  font-family: inherit;
}
.evm-btn-report:hover { background: rgba(248,113,113,.22); }

/* ── Find local help sidebar button ─────────────────────────────────────── */
.sb-help { color: rgba(201,125,106,.7); border-color: rgba(201,125,106,.3); }
.sb-help:hover { background: rgba(201,125,106,.28); }

/* Browse Salons button */
.sb-age-chip { font-size:10px; font-weight:600; background:rgba(255,255,255,.12); color:rgba(255,255,255,.7); border-radius:8px; padding:1px 5px; margin-left:4px; letter-spacing:.3px; }
.salon-age-chip { font-size:11px; font-weight:600; background:var(--rose-light,rgba(198,114,108,.15)); color:var(--rose); border-radius:8px; padding:1px 7px; margin-left:6px; vertical-align:middle; }
.sb-browse { color: rgba(147,197,253,.75); border-color: rgba(147,197,253,.25); }
.sb-browse:hover { color: #93c5fd; border-color: #93c5fd; background: rgba(147,197,253,.1); }
.sb-browse--full { opacity: .4; cursor: not-allowed; }
.sb-browse--full:hover { background: transparent; border-color: rgba(147,197,253,.25); color: rgba(147,197,253,.75); }

/* Multi-salon sidebar items */
.sb-item-wrap { display:flex; align-items:center; position:relative; }
.sb-item-inline { flex:1; }
.sb-leave-btn { flex-shrink:0; background:none; border:none; color:rgba(255,255,255,.25); font-size:11px; padding:4px 8px; cursor:pointer; border-radius:6px; transition:color .15s, background .15s; }
.sb-leave-btn:hover { color:#ef4444; background:rgba(239,68,68,.15); }

/* Browse Salons Modal */
  background: linear-gradient(135deg, rgba(201,125,106,.18), rgba(122,61,48,.12));
  color: var(--sb-text);
  border-left: 3px solid var(--rose);
}
.sb-help:hover { background: rgba(201,125,106,.28); }

/* ── Find Help Modal ─────────────────────────────────────────────────────── */
/* Browse Salons Modal */
.bsm-mc { max-width: 520px; }
.bsm-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; }
.bsm-header h2 { margin:0; }
.bsm-loading { text-align:center; padding:40px 0; color:var(--muted); }
.bsm-spin { width:32px; height:32px; border:3px solid var(--blush); border-top-color:var(--rose); border-radius:50%; animation:spin .8s linear infinite; margin:0 auto 12px; }
@keyframes spin { to { transform:rotate(360deg); } }
.bsm-err { background:rgba(239,68,68,.08); color:#b91c1c; border:1px solid rgba(239,68,68,.2); border-radius:10px; padding:10px 14px; font-size:13px; margin-bottom:14px; }
.relay-email-banner { display:flex; gap:14px; align-items:flex-start; padding:14px 16px; background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.35); border-radius:12px; margin-bottom:16px; }
.relay-email-banner .relay-email-icon { font-size:22px; flex-shrink:0; }
.relay-email-banner strong { display:block; color:#92400e; margin-bottom:4px; }
.relay-email-banner p { margin:0; font-size:13px; color:#78350f; line-height:1.5; }
.relay-email-banner code { font-size:11px; background:rgba(0,0,0,.08); padding:1px 4px; border-radius:3px; }

.at-max-banner { display:flex; gap:14px; align-items:flex-start; padding:14px 16px; background:rgba(251,191,36,.08); border:1px solid rgba(251,191,36,.35); border-radius:12px; margin-bottom:16px; }
.at-max-banner .at-max-icon { font-size:22px; flex-shrink:0; }
.at-max-banner strong { display:block; color:#92400e; margin-bottom:4px; }
.at-max-banner p { margin:0; font-size:13px; color:#78350f; line-height:1.5; }

.ev-salon-picker { margin:12px 0; padding:14px; background:var(--bg2,rgba(0,0,0,.03)); border:1px solid var(--border); border-radius:12px; }
.ev-salon-picker-title { font-weight:700; margin-bottom:4px; }
.ev-salon-option { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; cursor:pointer; transition:background .15s; margin-bottom:4px; font-size:14px; }
.ev-salon-option:hover { background:rgba(0,0,0,.04); }
.ev-salon-option--on { background:rgba(198,114,108,.08); }

.social-btns { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.social-btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:11px 16px; border-radius:10px; font-size:14px; font-weight:600; cursor:pointer; border:1.5px solid; transition:opacity .15s, box-shadow .15s; }
.social-btn:hover { opacity:.9; box-shadow:0 2px 8px rgba(0,0,0,.12); }
.social-btn:disabled { opacity:.5; cursor:not-allowed; }
.social-btn--apple { background:#000; color:#fff; border-color:#000; }
.social-btn--google { background:#fff; color:#3c4043; border-color:#dadce0; }
.social-btn--facebook { background:#1877F2; color:#fff; border-color:#1877F2; }
.auth-divider { display:flex; align-items:center; gap:12px; margin:4px 0 16px; color:var(--muted); font-size:12px; }
.auth-divider::before,.auth-divider::after { content:''; flex:1; border-top:1px solid var(--border); }

.bsm-empty { text-align:center; padding:32px 0; color:var(--muted); }

.bsm-empty-icon { font-size:40px; margin-bottom:12px; }
.bsm-list { display:flex; flex-direction:column; gap:12px; }
.bsm-row { display:flex; align-items:flex-start; gap:12px; padding:14px; border-radius:14px; border:1.5px solid var(--blush); background:var(--surface); transition:border-color .15s; }
.bsm-row:hover:not(.bsm-row--full) { border-color:var(--rose); }
.bsm-row--full { opacity:.65; }
.bsm-icon { font-size:28px; flex-shrink:0; padding-top:2px; }
.bsm-info { flex:1; min-width:0; }
.bsm-name { font-size:14px; font-weight:700; color:var(--deep); margin-bottom:4px; }
.bsm-meta { font-size:12px; color:var(--muted); margin-bottom:5px; display:flex; gap:6px; flex-wrap:wrap; }
.bsm-match { font-size:11px; font-weight:600; display:inline-block; margin-bottom:6px; padding:2px 8px; border-radius:20px; }
.bsm-match.perfect { background:rgba(201,125,106,.15); color:var(--rose); }
.bsm-match.good { background:rgba(74,222,128,.1); color:#16a34a; }
.bsm-match.ok { background:rgba(0,0,0,.05); color:var(--muted); }
[data-theme="dark"] .bsm-match.good { color:#4ade80; }
.bsm-bar-wrap { height:4px; background:var(--blush); border-radius:4px; overflow:hidden; margin-bottom:5px; }
.bsm-bar { height:100%; border-radius:4px; transition:width .3s; }
.bsm-capacity { font-size:11px; color:var(--muted); }
.bsm-capacity--full { color:var(--muted); font-weight:600; }
.bsm-action { flex-shrink:0; display:flex; align-items:center; }
.bsm-join-btn { background:var(--rose); color:#fff; border:none; border-radius:20px; padding:7px 16px; font-size:13px; font-weight:700; cursor:pointer; transition:background .15s,transform .1s; font-family:inherit; }
.bsm-join-btn:hover:not(:disabled) { background:var(--deep); transform:translateY(-1px); }
.bsm-join-btn:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.bsm-full-badge { font-size:12px; font-weight:600; color:var(--muted); background:var(--blush); padding:5px 12px; border-radius:20px; }

.fhm-mc {
  max-width: 520px;
  padding: 22px 24px 20px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.fhm-results-mc { max-width: 480px; }

.fhm-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-shrink: 0;
}
.fhm-header h2 { margin: 0; }

/* Category grid */
.fhm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  overflow-y: auto;
}
@media (max-width: 480px) { .fhm-grid { grid-template-columns: repeat(2, 1fr); } }

.fhm-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  padding: 14px 8px;
  background: var(--warm);
  border: 1.5px solid var(--blush);
  border-radius: 14px;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.fhm-cat-card:hover {
  border-color: var(--rose);
  background: rgba(201,125,106,.07);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(201,125,106,.15);
}
.fhm-cat-emoji { font-size: 26px; }
.fhm-cat-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.3;
}
.fhm-cat-desc {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.3;
}

/* Back row */
.fhm-back-row { margin-bottom: 10px; flex-shrink: 0; }
.fhm-back-btn {
  background: none;
  border: none;
  font-size: 13px;
  color: var(--rose);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  padding: 0;
  transition: opacity .15s;
}
.fhm-back-btn:hover { opacity: .7; }

/* Search filter */
.fhm-search { margin-bottom: 10px; flex-shrink: 0; }

/* Loading / empty */
.fhm-loading {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 28px 0;
  flex-shrink: 0;
}
.fhm-empty {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 24px 0;
}

/* Results list */
.fhm-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 2px;
}

.fhm-result {
  background: var(--warm);
  border: 1.5px solid var(--blush);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: border-color .15s;
  flex-shrink: 0;
}
.fhm-result:hover { border-color: var(--rose); }

.fhm-result-info { flex: 1; min-width: 0; }
.fhm-result-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 2px;
}
.fhm-result-addr {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 5px;
}
.fhm-result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.fhm-phone {
  font-size: 11px;
  color: var(--muted);
}
.fhm-web {
  font-size: 11px;
  color: var(--rose);
  text-decoration: none;
  font-weight: 600;
}
.fhm-web:hover { opacity: .75; }

/* Action buttons */
.fhm-result-acts {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
}
.fhm-map-btn, .fhm-call-btn {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  padding: 5px 10px;
  text-align: center;
  white-space: nowrap;
  transition: opacity .15s;
}
.fhm-map-btn {
  background: var(--blush);
  color: var(--deep);
}
.fhm-map-btn:hover { opacity: .8; }
.fhm-call-btn {
  background: rgba(52,211,153,.15);
  color: #059669;
}
.fhm-call-btn:hover { opacity: .8; }

.prof-av-big:not(.prof-av-clickable) { cursor: default; }
.prof-av-big:not(.prof-av-clickable):hover { opacity: 1; }
.prof-av-big:not(.prof-av-clickable) .prof-av-overlay { display: none; }

/* ── Share salon code button in chat header ──────────────────────────────── */
.hd-share-btn {
  background: linear-gradient(135deg, rgba(201,125,106,.15), rgba(122,61,48,.08));
  border-color: var(--rose);
  color: var(--deep);
  font-weight: 600;
}
.hd-share-btn:hover {
  background: linear-gradient(135deg, rgba(201,125,106,.28), rgba(122,61,48,.15));
}

/* ── Sidebar: event section header with collapse toggle ─────────────────── */
.sb-sec-ev {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sb-compact-btn {
  background: none;
  border: none;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  padding: 2px 6px;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.sb-compact-btn:hover { color: var(--rose); background: rgba(201,125,106,.1); }

/* Compact pill row */
.sb-ev-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 4px 12px 8px;
}
.sb-ev-pill {
  background: var(--warm);
  border: 1.5px solid var(--rose);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--deep);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: border-color .15s, background .15s, box-shadow .15s;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-ev-pill:hover {
  background: rgba(201,125,106,.15);
  box-shadow: 0 0 0 2px rgba(201,125,106,.2);
}
.sb-ev-pill.on {
  background: var(--rose);
  color: #fff;
  border-color: var(--deep);
}

/* ── Open event link button inside messages ──────────────────────────────── */
.msg-event-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(201,125,106,.12);
  border: 1.5px solid var(--rose);
  border-radius: 10px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--deep);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  margin-top: 6px;
  transition: background .15s, box-shadow .15s;
}
.msg-event-link:hover {
  background: rgba(201,125,106,.22);
  box-shadow: 0 2px 8px rgba(201,125,106,.2);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* NEW FEATURES CSS                                                             */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── Unread badge ────────────────────────────────────────────────────────── */
.sb-unread {
  background: var(--rose);
  color: #fff;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  margin-left: 4px;
  min-width: 18px;
  text-align: center;
  display: inline-block;
}

/* ── Reactions ───────────────────────────────────────────────────────────── */
.reactions-wrap { position: relative; margin-top: 3px; }
.reactions-row  { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.reaction-chip  {
  background: var(--warm); border: 1.5px solid var(--blush);
  border-radius: 20px; padding: 2px 7px; font-size: 12px;
  cursor: pointer; display: flex; align-items: center; gap: 3px;
  transition: border-color .15s, background .15s; font-family: inherit;
}
.reaction-chip.mine { border-color: var(--rose); background: rgba(201,125,106,.12); }
.reaction-chip:hover { border-color: var(--rose); }
.reaction-add {
  background: none; border: 1.5px dashed var(--blush); border-radius: 20px;
  padding: 2px 8px; font-size: 12px; cursor: pointer; color: var(--muted);
  transition: border-color .15s; font-family: inherit;
}
.reaction-add:hover { border-color: var(--rose); color: var(--rose); }
.reaction-ghost {
  background: none; border: none; font-size: 12px; color: var(--muted);
  cursor: pointer; opacity: 0; transition: opacity .15s; font-family: inherit;
  padding: 2px 4px;
}
.mbw:hover .reaction-ghost { opacity: 1; }
.reaction-picker {
  position: absolute; bottom: calc(100% + 4px); left: 0;
  background: var(--card); border: 1.5px solid var(--blush);
  border-radius: 12px; padding: 6px 8px;
  display: flex; gap: 4px; z-index: 20;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.reaction-pick-btn {
  background: none; border: none; font-size: 20px;
  cursor: pointer; padding: 2px; border-radius: 6px;
  transition: background .12s; font-family: inherit;
}
.reaction-pick-btn:hover { background: var(--warm); }

/* ── Pinned message banner ───────────────────────────────────────────────── */
.pinned-banner {
  display: flex; flex-direction: column;
  background: rgba(201,125,106,.07);
  border-bottom: 1px solid var(--blush);
  flex-shrink: 0;
}
.pinned-banner-top {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px;
}
.pinned-icon { font-size: 14px; flex-shrink: 0; }
.pinned-body { flex: 1; min-width: 0; cursor: default; }
.pinned-label { font-size: 10px; font-weight: 700; color: var(--rose); text-transform: uppercase; letter-spacing: .5px; }
.pinned-text  { font-size: 12px; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pinned-poll-q { white-space: normal; cursor: pointer; }
.pinned-poll-hint { font-size: 10px; color: var(--rose); margin-left: 4px; }
.pinned-poll-body { padding: 0 14px 10px; }
.pinned-banner-expanded { background: rgba(201,125,106,.10); }
.pinned-nav   { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); }
.pinned-nav button { background:none;border:none;cursor:pointer;font-size:14px;color:var(--muted);padding:0 2px;font-family:inherit; }
.pinned-nav button:hover { color: var(--rose); }
.pinned-unpin { background:none;border:none;font-size:16px;cursor:pointer;color:var(--muted);padding:0 2px;font-family:inherit; }
.pinned-unpin:hover { color: var(--rose); }

/* Pin button on message hover */
.mt-row { display: flex; align-items: center; gap: 6px; }
.msg-pin-btn {
  background: none; border: none; font-size: 11px; cursor: pointer;
  opacity: 0; transition: opacity .15s; padding: 0; font-family: inherit;
  color: var(--muted);
}
.mbw:hover .msg-pin-btn { opacity: .6; }
.mbw:hover .msg-pin-btn:hover { opacity: 1; }

/* ── RSVP widget ─────────────────────────────────────────────────────────── */
.rsvp-widget {
  padding: 10px 16px;
  background: var(--warm);
  border-bottom: 1px solid var(--blush);
  flex-shrink: 0;
}
.rsvp-label { font-size: 12px; font-weight: 600; color: var(--deep); margin-bottom: 7px; display: flex; align-items: center; gap: 8px; }
.rsvp-total { font-weight: 400; color: var(--muted); font-size: 11px; }
.rsvp-btns  { display: flex; gap: 6px; }
.rsvp-btn   {
  flex: 1; padding: 6px 4px; border: 1.5px solid var(--blush);
  border-radius: 10px; background: var(--card); font-size: 12px;
  cursor: pointer; font-family: 'DM Sans', sans-serif; font-weight: 500;
  color: var(--dark);
  transition: border-color .15s, background .15s;
  display: flex; align-items: center; justify-content: center; gap: 3px;
}
.rsvp-btn:hover   { border-color: var(--rose); }
.rsvp-btn.rsvp-on { border-color: var(--rose); background: rgba(201,125,106,.12); font-weight: 700; }
[data-theme="dark"] .rsvp-btn { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); color: var(--dark); }
[data-theme="dark"] .rsvp-btn:hover { border-color: var(--rose); background: rgba(255,255,255,.12); }
[data-theme="dark"] .rsvp-btn.rsvp-on { border-color: var(--rose); background: rgba(34,197,94,.15); }
[data-theme="dark"] .rsvp-widget { background: rgba(255,255,255,.04); }
[data-theme="dark"] .rsvp-label { color: var(--dark); }
.rsvp-count       { background: rgba(201,125,106,.15); border-radius: 8px; padding: 0 5px; font-size: 10px; }

/* Owner RSVP summary */
.rsvp-owner { padding: 10px 16px; }
.rsvp-owner-title { font-size: 11px; font-weight: 700; color: var(--rose); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.rsvp-stats { display: flex; align-items: center; gap: 0; }
.rsvp-stat  { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; }
.rsvp-stat-emoji { font-size: 16px; line-height: 1; }
.rsvp-stat-count { font-size: 18px; font-weight: 700; color: var(--deep); line-height: 1.1; }
.rsvp-stat-count.rsvp-stat-grey { color: var(--muted); }
.rsvp-stat-label { font-size: 10px; color: var(--muted); font-weight: 500; }
.rsvp-stat-div   { width: 1px; height: 36px; background: var(--blush); flex-shrink: 0; }

/* ── Mood check-in ───────────────────────────────────────────────────────── */
.mood-widget {
  padding: 10px 16px 12px;
  background: rgba(130,80,160,.05);
  border-bottom: 1px solid var(--blush);
  flex-shrink: 0;
}
.mood-label  { font-size: 12px; font-weight: 600; color: var(--deep); margin-bottom: 8px; }
.mood-btns   { display: flex; gap: 6px; justify-content: space-between; }
.mood-btn    {
  flex: 1; padding: 6px 2px; border: 1.5px solid var(--blush);
  border-radius: 10px; background: var(--card); cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: border-color .15s, background .15s;
}
.mood-btn:hover { border-color: var(--rose); background: rgba(201,125,106,.07); }
.mood-em  { font-size: 20px; }
.mood-lbl { font-size: 9px; color: var(--muted); font-weight: 500; }
.mood-done { padding: 10px 16px; font-size: 12px; color: #805ad5; font-weight: 500; border-bottom: 1px solid var(--blush); flex-shrink: 0; }

/* ── Milestones ──────────────────────────────────────────────────────────── */
.ms-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ms-preset-btn {
  border: 1.5px solid var(--blush); border-radius: 20px; padding: 4px 10px;
  font-size: 12px; cursor: pointer; background: var(--warm);
  font-family: 'DM Sans', sans-serif; transition: border-color .15s;
}
.ms-preset-btn:hover { border-color: var(--rose); }
.ms-share-label { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 12px; cursor: pointer; }
.ms-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--warm); border: 1.5px solid var(--blush);
  border-radius: 12px; padding: 10px 12px;
}
.ms-emoji { font-size: 24px; flex-shrink: 0; }
.ms-info  { flex: 1; min-width: 0; }
.ms-title { font-size: 13px; font-weight: 700; color: var(--dark); }
.ms-note  { font-size: 11px; color: var(--muted); }
.ms-date  { font-size: 10px; color: var(--muted); margin-top: 2px; }
.ms-shared { font-size: 10px; color: var(--rose); font-weight: 600; background: rgba(201,125,106,.1); border-radius: 8px; padding: 2px 7px; flex-shrink: 0; }
.ms-del { background:none;border:none;font-size:18px;cursor:pointer;color:var(--muted);padding:0;font-family:inherit;flex-shrink:0; }
.ms-del:hover { color: var(--rose); }

/* ── Resource library ────────────────────────────────────────────────────── */
.res-cats { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.res-cat-btn {
  border: 1.5px solid var(--blush); border-radius: 16px; padding: 3px 10px;
  font-size: 11px; cursor: pointer; background: var(--warm);
  font-family: 'DM Sans', sans-serif; transition: border-color .15s, background .15s;
}
.res-cat-btn.on { border-color: var(--rose); background: rgba(201,125,106,.12); font-weight: 700; }
.res-list { max-height: 50vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.res-item { display: flex; align-items: flex-start; gap: 10px; background: var(--warm); border: 1.5px solid var(--blush); border-radius: 10px; padding: 10px 12px; }
.res-info { flex: 1; min-width: 0; }
.res-title { font-size: 13px; font-weight: 700; color: var(--rose); text-decoration: none; display: block; }
.res-title:hover { opacity: .8; }
.res-desc { font-size: 11px; color: var(--muted); margin-top: 2px; }
.res-add { border-top: 1px solid var(--blush); margin-top: 14px; padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }

/* ── Event templates ─────────────────────────────────────────────────────── */
.tpl-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.tpl-item {
  border: 1.5px solid var(--blush); border-radius: 10px; padding: 9px 12px;
  cursor: pointer; background: var(--warm); transition: border-color .15s;
}
.tpl-item:hover { border-color: var(--rose); }
.tpl-name { font-size: 13px; font-weight: 600; color: var(--dark); }
.tpl-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ── Verified badge (admin users) ────────────────────────────────────────── */
.usr-badge-verified { background: rgba(52,211,153,.15); color: #059669; }

/* ── Profile completeness nudge (sidebar) ────────────────────────────────── */
.sb-nudge {
  background: rgba(201,125,106,.08);
  border: 1.5px dashed var(--blush);
  border-radius: 10px; padding: 8px 12px; margin: 0 12px 8px;
  font-size: 12px; color: var(--muted); cursor: pointer;
  transition: border-color .15s;
}
.sb-nudge:hover { border-color: var(--rose); color: var(--rose); }

/* ── Leave event button ───────────────────────────────────────────────────── */
.ev-leave-btn {
  background: rgba(248,113,113,.1);
  border: 1.5px solid rgba(248,113,113,.4);
  color: #dc2626;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: background .15s, border-color .15s;
}
.ev-leave-btn:hover {
  background: rgba(248,113,113,.2);
  border-color: #dc2626;
}
.ev-leave-yes {
  background: #dc2626 !important;
  color: #fff !important;
}

/* ── CityPicker loading spinner ─────────────────────────────────────────── */
.city-spinner {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  pointer-events: none;
  animation: spin 1s linear infinite;
}

/* ── Photo picker ─────────────────────────────────────────────────────────── */
.photo-picker{padding:8px 0}
.photo-preview-grid{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.photo-prev-wrap{position:relative;width:72px;height:72px}
.photo-prev-img{width:72px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--blush)}
.photo-prev-del{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:#dc2626;color:#fff;border:none;cursor:pointer;font-size:11px;line-height:18px;text-align:center;padding:0}
.photo-add-more{width:72px;height:72px;border-radius:8px;border:2px dashed var(--blush);background:transparent;color:var(--rose);font-size:13px;cursor:pointer}
.photo-add-more:hover{background:var(--warm)}

/* ── Image message grid ───────────────────────────────────────────────────── */
.mb-images{padding:4px!important;background:transparent!important;box-shadow:none!important;border:none!important}
.msg-img-grid{display:grid;gap:3px;max-width:240px}
.msg-img-grid:has(img:nth-child(1):last-child){grid-template-columns:1fr}
.msg-img-grid:has(img:nth-child(2):last-child){grid-template-columns:1fr 1fr}
.msg-img-grid:has(img:nth-child(3):last-child){grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
.msg-img-grid:has(img:nth-child(3):last-child) img:first-child{grid-column:1/-1}
.msg-img-grid:has(img:nth-child(n+4)){grid-template-columns:1fr 1fr 1fr}
.msg-img{width:100%;height:80px;object-fit:cover;border-radius:6px;cursor:pointer;transition:opacity .15s}
.msg-img:hover{opacity:.88}
.msg-img-grid img:only-child{height:160px}

/* ── Lightbox ─────────────────────────────────────────────────────────────── */
.lightbox-ov{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9999;display:flex;align-items:center;justify-content:center}
.lb-img{max-width:90vw;max-height:85vh;object-fit:contain;border-radius:8px}
.lb-close{position:fixed;top:16px;right:16px;background:rgba(255,255,255,.15);border:none;color:#fff;font-size:22px;width:40px;height:40px;border-radius:50%;cursor:pointer;z-index:10000}
.lb-prev,.lb-next{position:fixed;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);border:none;color:#fff;font-size:36px;width:48px;height:48px;border-radius:50%;cursor:pointer;z-index:10000}
.lb-prev{left:12px}.lb-next{right:12px}
.lb-dots{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10000}
.lb-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;transition:background .15s}
.lb-dot.on{background:#fff}

/* ── Pinned banner — audio & image support ───────────────────────────────── */
.pinned-img-strip{display:flex;gap:4px;align-items:center;margin-top:4px;flex-wrap:nowrap}
.pinned-img-thumb{width:48px;height:48px;object-fit:cover;border-radius:6px;cursor:pointer;flex-shrink:0;transition:opacity .15s}
.pinned-img-thumb:hover{opacity:.85}
.pinned-img-more{min-width:48px;height:48px;border-radius:6px;background:var(--blush);color:var(--deep);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* Contact Us full panel */
.contact-panel { display:flex; flex-direction:column; height:100%; overflow:hidden; background:var(--bg); }
.contact-header { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--border); flex-shrink:0; }
.contact-panel > div:last-child { flex:1; overflow-y:auto; padding:16px 20px; }