:root{
  --bg:#05080F;
  --bg2:#080C15;
  --g1:rgba(0,212,170,1);
  --g2:rgba(0,160,255,1);
  --gold:#FFB800;
  --red:#FF5B5B;
  --purple:#A78BFA;
  --glass:rgba(255,255,255,0.04);
  --glass2:rgba(255,255,255,0.07);
  --glass3:rgba(255,255,255,0.11);
  --bdr:rgba(255,255,255,0.08);
  --bdr2:rgba(255,255,255,0.14);
  --tx:#E8EDF5;
  --tx2:#9BA8C0;
  --tx3:#4A5568;
  --teal:#00D4AA;
  --teal2:#00B896;
  --ff:'Syne',sans-serif;
  --fb:'Outfit',sans-serif;
  --fnum:'Space Grotesk',sans-serif;
  --sh:0 8px 32px rgba(0,0,0,0.5);
  --glow:0 0 40px rgba(0,212,170,0.15);
  --glow2:0 0 60px rgba(0,212,170,0.25);
  --sidebar-bg:rgba(8,12,21,0.95);
  --topbar-bg:rgba(8,12,21,0.95);
  --modal-bg:rgba(10,14,25,0.95);
  --login-box-bg:rgba(8,12,21,0.85);
  --canvas-opacity:0.6;
  --noise-opacity:0.5;
}

/* ── LIGHT THEME ── */
html.light{
  --bg:#F0F4FA;
  --bg2:#E8EEF8;
  --glass:rgba(255,255,255,0.75);
  --glass2:rgba(255,255,255,0.9);
  --glass3:rgba(255,255,255,1);
  --bdr:rgba(0,0,0,0.08);
  --bdr2:rgba(0,0,0,0.14);
  --tx:#0D1B2E;
  --tx2:#3D5068;
  --tx3:#8A9BB5;
  --glow:0 0 40px rgba(0,212,170,0.12);
  --glow2:0 0 60px rgba(0,212,170,0.2);
  --sh:0 8px 32px rgba(0,0,0,0.1);
  --sidebar-bg:rgba(255,255,255,0.97);
  --topbar-bg:rgba(255,255,255,0.97);
  --modal-bg:rgba(248,250,254,0.98);
  --login-box-bg:rgba(255,255,255,0.92);
  --canvas-opacity:0.18;
  --noise-opacity:0.15;
}

/* ── WARM THEME (Sunrise — easy on eyes, popular in India) ── */
html.warm{
  --bg:#FFF8F0;
  --bg2:#FFF0E0;
  --glass:rgba(255,255,255,0.8);
  --glass2:rgba(255,248,240,0.95);
  --glass3:rgba(255,255,255,1);
  --bdr:rgba(180,100,0,0.12);
  --bdr2:rgba(180,100,0,0.2);
  --tx:#2D1A00;
  --tx2:#7A4A10;
  --tx3:#B8894A;
  --teal:#E07B00;
  --teal2:#C06800;
  --g1:rgba(224,123,0,1);
  --g2:rgba(255,160,50,1);
  --glow:0 0 40px rgba(224,123,0,0.15);
  --glow2:0 0 60px rgba(224,123,0,0.25);
  --sh:0 8px 32px rgba(100,50,0,0.12);
  --sidebar-bg:rgba(255,248,235,0.98);
  --topbar-bg:rgba(255,248,235,0.98);
  --modal-bg:rgba(255,252,245,0.98);
  --login-box-bg:rgba(255,250,240,0.95);
  --canvas-opacity:0.12;
  --noise-opacity:0.1;
}

/* ── OLED THEME (Pure black — saves battery on AMOLED phones) ── */
/* ── SAFFRON INDIA THEME ── */
html.saffron{
  --bg:#fff8f0;
  --bg2:#fff3e0;
  --g1:rgba(234,88,12,1);
  --g2:rgba(245,158,11,1);
  --teal:#ea580c;
  --teal2:#c2410c;
  --gold:#f59e0b;
  --red:#dc2626;
  --glass:rgba(234,88,12,0.05);
  --glass2:rgba(234,88,12,0.08);
  --glass3:rgba(255,255,255,1);
  --bdr:rgba(234,88,12,0.12);
  --bdr2:rgba(234,88,12,0.22);
  --tx:#431407;
  --tx2:#9a3412;
  --tx3:#ea580c;
  --glow:0 0 40px rgba(234,88,12,0.18);
  --glow2:0 0 60px rgba(234,88,12,0.28);
  --sh:0 8px 32px rgba(180,60,0,0.12);
  --sidebar-bg:rgba(255,255,255,0.98);
  --topbar-bg:rgba(255,255,255,0.98);
  --modal-bg:rgba(255,252,245,0.98);
  --login-box-bg:rgba(255,255,255,0.95);
  --canvas-opacity:0.12;
  --noise-opacity:0.08;
}
html.saffron body{background:var(--bg)}
html.saffron .card{background:rgba(255,255,255,0.9);border-color:rgba(234,88,12,0.1)}
html.saffron .card:hover{border-color:rgba(234,88,12,0.3)}
html.saffron .stat-card{background:rgba(255,255,255,0.85);border-color:rgba(234,88,12,0.12)}
html.saffron .member-card{background:rgba(255,255,255,0.85);border-color:rgba(234,88,12,0.1)}
html.saffron .role-card{background:rgba(255,252,245,0.9);border-color:rgba(234,88,12,0.12)}
html.saffron .role-card.sel{background:rgba(234,88,12,0.08);border-color:rgba(234,88,12,0.3)}
html.saffron .nav-item{color:#9a3412}
html.saffron .nav-item:hover{background:rgba(234,88,12,0.06);color:#ea580c}
html.saffron .nav-item.active{background:rgba(234,88,12,0.1);color:#ea580c;border-left-color:#ea580c}
html.saffron .modal-bg{background:rgba(67,20,7,0.4)}
html.saffron .tb-btn{background:rgba(255,255,255,0.85);border-color:rgba(234,88,12,0.2);color:#9a3412}
html.saffron .tb-btn:hover{background:rgba(234,88,12,0.06)}
html.saffron .tb-btn.p{background:linear-gradient(135deg,#ea580c,#f59e0b);color:#fff;border-color:transparent}
html.saffron .tb-search{background:rgba(255,255,255,0.85);border-color:rgba(234,88,12,0.2);color:var(--tx)}
html.saffron table{background:transparent}
html.saffron th{background:rgba(234,88,12,0.07);color:#9a3412}
html.saffron td{color:#431407}
html.saffron tr:hover td{background:rgba(234,88,12,0.04)}
html.saffron .l-input{background:rgba(255,255,255,0.9);border-color:rgba(234,88,12,0.2);color:var(--tx)}
html.saffron .l-input:focus{background:#fff;border-color:#ea580c}
html.saffron .form-input{background:rgba(255,255,255,0.9);border-color:rgba(234,88,12,0.2);color:var(--tx)}
html.saffron .form-input:focus{background:#fff;border-color:#ea580c}
html.saffron .sb-name{background:linear-gradient(135deg,#ea580c,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
html.saffron .sb-society{color:#c2410c}
html.saffron #owner-sidebar{background:#fff8f0;border-right-color:rgba(234,88,12,0.15)}
html.saffron .onav-item{color:#9a3412}
html.saffron .onav-item:hover{background:rgba(234,88,12,0.07);color:#ea580c}
html.saffron .onav-item.active{background:rgba(234,88,12,0.12);color:#ea580c;border-left-color:#ea580c}
html.saffron .btn-teal{background:linear-gradient(135deg,#ea580c,#f59e0b)!important;color:#fff!important}
html.saffron .res-card{background:rgba(255,255,255,0.9);border-color:rgba(234,88,12,0.12)}
html.saffron .res-nav-btn.active{background:linear-gradient(135deg,#ea580c,#f59e0b);color:#fff}
html.saffron .toast{background:linear-gradient(135deg,#ea580c,#f59e0b);color:#fff}

/* ── EMERALD GREEN THEME ── */
html.emerald{
  --bg:#f0fdf4;
  --bg2:#dcfce7;
  --g1:rgba(22,163,74,1);
  --g2:rgba(13,148,136,1);
  --teal:#16a34a;
  --teal2:#15803d;
  --gold:#f59e0b;
  --red:#dc2626;
  --glass:rgba(22,163,74,0.05);
  --glass2:rgba(22,163,74,0.08);
  --glass3:rgba(255,255,255,1);
  --bdr:rgba(22,163,74,0.12);
  --bdr2:rgba(22,163,74,0.22);
  --tx:#052e16;
  --tx2:#166534;
  --tx3:#16a34a;
  --glow:0 0 40px rgba(22,163,74,0.18);
  --glow2:0 0 60px rgba(22,163,74,0.28);
  --sh:0 8px 32px rgba(0,100,40,0.12);
  --sidebar-bg:rgba(255,255,255,0.98);
  --topbar-bg:rgba(255,255,255,0.98);
  --modal-bg:rgba(240,253,244,0.98);
  --login-box-bg:rgba(255,255,255,0.95);
  --canvas-opacity:0.12;
  --noise-opacity:0.08;
}
html.emerald body{background:var(--bg)}
html.emerald .card{background:rgba(255,255,255,0.9);border-color:rgba(22,163,74,0.1)}
html.emerald .card:hover{border-color:rgba(22,163,74,0.3)}
html.emerald .stat-card{background:rgba(255,255,255,0.85);border-color:rgba(22,163,74,0.12)}
html.emerald .member-card{background:rgba(255,255,255,0.85);border-color:rgba(22,163,74,0.1)}
html.emerald .role-card{background:rgba(240,253,244,0.9);border-color:rgba(22,163,74,0.12)}
html.emerald .role-card.sel{background:rgba(22,163,74,0.08);border-color:rgba(22,163,74,0.3)}
html.emerald .nav-item{color:#166534}
html.emerald .nav-item:hover{background:rgba(22,163,74,0.06);color:#16a34a}
html.emerald .nav-item.active{background:rgba(22,163,74,0.1);color:#16a34a;border-left-color:#16a34a}
html.emerald .modal-bg{background:rgba(5,46,22,0.4)}
html.emerald .tb-btn{background:rgba(255,255,255,0.85);border-color:rgba(22,163,74,0.2);color:#166534}
html.emerald .tb-btn:hover{background:rgba(22,163,74,0.06)}
html.emerald .tb-btn.p{background:linear-gradient(135deg,#16a34a,#0d9488);color:#fff;border-color:transparent}
html.emerald .tb-search{background:rgba(255,255,255,0.85);border-color:rgba(22,163,74,0.2);color:var(--tx)}
html.emerald table{background:transparent}
html.emerald th{background:rgba(22,163,74,0.07);color:#166534}
html.emerald td{color:#052e16}
html.emerald tr:hover td{background:rgba(22,163,74,0.04)}
html.emerald .l-input{background:rgba(255,255,255,0.9);border-color:rgba(22,163,74,0.2);color:var(--tx)}
html.emerald .l-input:focus{background:#fff;border-color:#16a34a}
html.emerald .form-input{background:rgba(255,255,255,0.9);border-color:rgba(22,163,74,0.2);color:var(--tx)}
html.emerald .form-input:focus{background:#fff;border-color:#16a34a}
html.emerald .sb-name{background:linear-gradient(135deg,#16a34a,#0d9488);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
html.emerald .sb-society{color:#15803d}
html.emerald #owner-sidebar{background:#f0fdf4;border-right-color:rgba(22,163,74,0.15)}
html.emerald .onav-item{color:#166534}
html.emerald .onav-item:hover{background:rgba(22,163,74,0.07);color:#16a34a}
html.emerald .onav-item.active{background:rgba(22,163,74,0.12);color:#16a34a;border-left-color:#16a34a}
html.emerald .btn-teal{background:linear-gradient(135deg,#16a34a,#0d9488)!important;color:#fff!important}
html.emerald .res-card{background:rgba(255,255,255,0.9);border-color:rgba(22,163,74,0.12)}
html.emerald .res-nav-btn.active{background:linear-gradient(135deg,#16a34a,#0d9488);color:#fff}
html.emerald .toast{background:linear-gradient(135deg,#16a34a,#0d9488);color:#fff}

/* ── PURPLE PREMIUM THEME ── */
html.purple{
  --bg:#faf5ff;
  --bg2:#f5f3ff;
  --g1:rgba(124,58,237,1);
  --g2:rgba(219,39,119,1);
  --teal:#7c3aed;
  --teal2:#6d28d9;
  --gold:#f59e0b;
  --red:#e11d48;
  --glass:rgba(124,58,237,0.05);
  --glass2:rgba(124,58,237,0.08);
  --glass3:rgba(255,255,255,1);
  --bdr:rgba(124,58,237,0.12);
  --bdr2:rgba(124,58,237,0.22);
  --tx:#1e0a2e;
  --tx2:#4c1d95;
  --tx3:#9333ea;
  --glow:0 0 40px rgba(124,58,237,0.18);
  --glow2:0 0 60px rgba(124,58,237,0.3);
  --sh:0 8px 32px rgba(124,58,237,0.12);
  --sidebar-bg:rgba(255,255,255,0.98);
  --topbar-bg:rgba(255,255,255,0.98);
  --modal-bg:rgba(250,245,255,0.98);
  --login-box-bg:rgba(255,255,255,0.95);
  --canvas-opacity:0.06;
  --noise-opacity:0.04;
}
html.purple body{background:var(--bg)}
html.purple .card{background:rgba(255,255,255,0.9);border-color:rgba(124,58,237,0.1)}
html.purple .card:hover{border-color:rgba(124,58,237,0.3)}
html.purple .stat-card{background:rgba(255,255,255,0.85);border-color:rgba(124,58,237,0.12)}
html.purple .member-card{background:rgba(255,255,255,0.85);border-color:rgba(124,58,237,0.1)}
html.purple .role-card{background:rgba(248,245,255,0.9);border-color:rgba(124,58,237,0.12)}
html.purple .role-card.sel{background:rgba(124,58,237,0.08);border-color:rgba(124,58,237,0.3)}
html.purple .nav-item{color:#4c1d95}
html.purple .nav-item:hover{background:rgba(124,58,237,0.06);color:#7c3aed}
html.purple .nav-item.active{background:rgba(124,58,237,0.1);color:#7c3aed;border-left-color:#7c3aed}
html.purple .modal-bg{background:rgba(30,10,46,0.4)}
html.purple .tb-btn{background:rgba(255,255,255,0.8);border-color:rgba(124,58,237,0.2);color:#4c1d95}
html.purple .tb-btn:hover{background:rgba(124,58,237,0.06)}
html.purple .tb-btn.p{background:linear-gradient(135deg,#7c3aed,#db2777);color:#fff;border-color:transparent}
html.purple .tb-search{background:rgba(255,255,255,0.85);border-color:rgba(124,58,237,0.2);color:var(--tx)}
html.purple table{background:transparent}
html.purple th{background:rgba(124,58,237,0.07);color:#4c1d95}
html.purple td{color:#1e0a2e}
html.purple tr:hover td{background:rgba(124,58,237,0.04)}
html.purple .l-input{background:rgba(255,255,255,0.9);border-color:rgba(124,58,237,0.2);color:var(--tx)}
html.purple .l-input:focus{background:#fff;border-color:#7c3aed}
html.purple .form-input{background:rgba(255,255,255,0.9);border-color:rgba(124,58,237,0.2);color:var(--tx)}
html.purple .form-input:focus{background:#fff;border-color:#7c3aed}
html.purple .section-header{color:var(--tx)}
html.purple .sb-hdr{background:rgba(255,255,255,0.98)}
html.purple .sb-name{background:linear-gradient(135deg,#7c3aed,#db2777);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
html.purple .sb-society{color:#9333ea}
html.purple #owner-sidebar{background:#f5f3ff;border-right-color:rgba(124,58,237,0.15)}
html.purple .onav-item{color:#4c1d95}
html.purple .onav-item:hover{background:rgba(124,58,237,0.07);color:#7c3aed}
html.purple .onav-item.active{background:rgba(124,58,237,0.12);color:#7c3aed;border-left-color:#7c3aed}
html.purple .btn-teal{background:linear-gradient(135deg,#7c3aed,#db2777)!important;color:#fff!important}
html.purple .res-card{background:rgba(255,255,255,0.9);border-color:rgba(124,58,237,0.12)}
html.purple .res-nav-btn.active{background:linear-gradient(135deg,#7c3aed,#db2777);color:#fff}
html.purple .toast{background:linear-gradient(135deg,#7c3aed,#db2777);color:#fff}


/* ══════════════════════════════════════════════
   SKELETON LOADING — performance fix
   ══════════════════════════════════════════════ */
@keyframes shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
.skel{
  background:linear-gradient(90deg,
    var(--glass2) 25%,
    var(--glass3) 50%,
    var(--glass2) 75%
  );
  background-size:200% 100%;
  animation:shimmer 1.4s infinite;
  border-radius:8px;
}
html.light .skel,html.warm .skel,
html.purple .skel,html.saffron .skel,html.emerald .skel{
  background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s infinite;
}
.skel-stat{height:80px;border-radius:14px;margin-bottom:0}
.skel-card{height:120px;border-radius:16px}
.skel-row{height:44px;border-radius:10px;margin-bottom:8px}
.skel-text{height:14px;border-radius:6px;margin-bottom:8px}
.skel-text.short{width:60%}
.skel-text.med{width:80%}
.skel-avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0}
.skel-wrap{display:flex;flex-direction:column;gap:10px;padding:16px}
.skel-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px}
.skel-member-row{display:flex;align-items:center;gap:12px;padding:10px 16px}

/* ── THEME TRANSITION — targeted only, not global * (global kills scroll FPS) ── */
.theme-animated,
.nav-item,.card,.modal,.modal-bg,.sidebar,.top-bar,
.stat-card,.role-card,.demo-pill,.l-input,.btn-teal,
.member-card,.task-card,.expense-item,.notif-item,.complaint-card{
  transition:background-color .25s ease,border-color .2s ease,color .2s ease,box-shadow .25s ease}
.no-transition,canvas{transition:none!important}
input,textarea,select,button{transition:border-color .2s,box-shadow .2s,background .2s,transform .15s!important}

/* ── THEME TOGGLE BUTTON ── */
.theme-toggle{
  display:flex;align-items:center;gap:8px;
  background:var(--glass2);border:1px solid var(--bdr2);
  border-radius:30px;padding:6px 14px 6px 8px;
  cursor:pointer;transition:all .25s!important;
  font-family:var(--ff);font-size:12px;font-weight:700;color:var(--tx2);
  flex-shrink:0;
}
.theme-toggle:hover{border-color:var(--teal);color:var(--teal)}
.tt-track{
  width:34px;height:18px;border-radius:9px;
  background:linear-gradient(135deg,#1a1f30,#2a3050);
  border:1.5px solid rgba(255,255,255,.15);
  position:relative;transition:all .35s!important;flex-shrink:0;
}
html.light .tt-track{
  background:linear-gradient(135deg,#b8d4f8,#7ec8f0);
  border-color:rgba(0,160,255,.3);
}
.tt-thumb{
  width:12px;height:12px;border-radius:50%;
  background:#fff;
  position:absolute;top:2px;left:2px;
  transition:transform .35s cubic-bezier(.34,1.4,.64,1)!important;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;font-size:7px;
}
html.light .tt-thumb{transform:translateX(16px)}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:var(--bg);color:var(--tx);font-family:var(--fb);font-size:14px;overflow-x:hidden;max-width:100vw;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:border-box}

/* ── CANVAS BACKGROUND ── */
#bg-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.7;transition:opacity .4s ease}

/* ── NOISE OVERLAY ── */
body::after{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;z-index:1;opacity:var(--noise-opacity);transition:opacity .4s ease}

/* ── VIEWS ── */
.view{display:none;position:relative;z-index:2;background:transparent}
.view.active{display:block}

/* ══════════════════════════════════════════════
   LOGIN
══════════════════════════════════════════════ */
#login-view{min-height:100vh;display:none;align-items:center;justify-content:center;padding:20px;position:relative;z-index:2;overflow-x:hidden;width:100%}
#login-view.active{display:flex}

.login-box{
  width:100%;max-width:420px;
  background:var(--login-box-bg);
  backdrop-filter:blur(40px);
  -webkit-backdrop-filter:blur(40px);
  border:1px solid var(--bdr2);
  border-radius:28px;
  padding:32px 24px;
  box-shadow:0 32px 80px rgba(0,0,0,.7),var(--glow);
  animation:loginReveal .6s cubic-bezier(.4,0,.2,1) forwards;
  opacity:0;transform:translateY(30px) scale(.97);
  box-sizing:border-box;
}
@keyframes loginReveal{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}

.login-logo{text-align:center;margin-bottom:32px}
.login-emblem{width:72px;height:72px;margin:0 auto 14px;border-radius:22px;background:linear-gradient(135deg,var(--teal),var(--g2));display:flex;align-items:center;justify-content:center;font-size:32px;box-shadow:0 12px 40px rgba(0,212,170,.35);animation:emblemPulse 3s ease-in-out infinite}
@keyframes emblemPulse{0%,100%{box-shadow:0 12px 40px rgba(0,212,170,.35)}50%{box-shadow:0 12px 60px rgba(0,212,170,.55)}}
.login-name{font-family:var(--ff);font-size:28px;font-weight:800;background:linear-gradient(135deg,var(--tx) 30%,var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px}
.login-sub{font-size:12px;color:var(--tx3);letter-spacing:3px;text-transform:uppercase;margin-top:5px}

.l-label{font-size:10px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:2px;margin-bottom:8px;display:block}
.l-input{width:100%;background:var(--glass);border:1px solid var(--bdr2);border-radius:12px;padding:14px 16px;font-size:14px;color:var(--tx);font-family:var(--fb);outline:none;transition:all .3s;margin-bottom:14px}
.l-input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,212,170,.1);background:var(--glass2)}
.l-input::placeholder{color:var(--tx3)}

.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.role-card{background:var(--glass);border:1.5px solid var(--bdr);border-radius:14px;padding:14px 10px;text-align:center;cursor:pointer;transition:all .25s;position:relative;overflow:hidden}
.role-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--teal),var(--g2));opacity:0;transition:opacity .3s}
.role-card.sel{border-color:var(--teal);background:rgba(0,212,170,.08)}
.role-card.sel::before{opacity:.06}
.role-card:hover{border-color:var(--bdr2);transform:translateY(-2px)}
.rc-icon{font-size:26px;margin-bottom:6px;position:relative;z-index:1}
.rc-name{font-size:12px;font-weight:700;color:var(--tx);position:relative;z-index:1;font-family:var(--ff)}
.rc-sub{font-size:10px;color:var(--tx3);margin-top:2px;position:relative;z-index:1}

.l-btn{width:100%;background:linear-gradient(135deg,var(--teal),var(--g2));border:none;border-radius:14px;padding:16px;font-size:15px;font-weight:700;color:#050810;cursor:pointer;font-family:var(--ff);letter-spacing:.5px;transition:all .25s;box-shadow:0 8px 30px rgba(0,212,170,.3);margin-top:4px;position:relative;overflow:hidden}
.l-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.2),transparent);opacity:0;transition:opacity .3s}
.l-btn:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,212,170,.4)}
.l-btn:hover::after{opacity:1}
.l-btn:active{transform:scale(.98)}

.demo-section{margin-top:22px;padding-top:18px;border-top:1px solid var(--bdr)}
.demo-title{font-size:10px;color:var(--tx3);text-align:center;letter-spacing:2px;text-transform:uppercase;margin-bottom:12px}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.demo-pill{background:var(--glass);border:1px solid var(--bdr);border-radius:10px;padding:10px 12px;cursor:pointer;transition:all .2s}
.demo-pill:hover{background:var(--glass2);border-color:var(--teal);transform:scale(1.02)}
.dp-role{font-size:9px;color:var(--teal);font-weight:700;letter-spacing:1px;text-transform:uppercase}
.dp-name{font-size:12px;font-weight:600;color:var(--tx);margin-top:2px;font-family:var(--ff)}
.dp-flat{font-size:10px;color:var(--tx3);margin-top:1px}

/* ══════════════════════════════════════════════
   ADMIN LAYOUT
══════════════════════════════════════════════ */
#admin-view{display:none;height:100vh;overflow:hidden}
#admin-view.active{display:flex}

/* SIDEBAR */
.sidebar{
  width:250px;flex-shrink:0;
  background:var(--sidebar-bg);
  backdrop-filter:blur(30px);
  border-right:1px solid var(--bdr);
  display:flex;flex-direction:column;overflow:hidden;
  position:relative;
}
.sidebar::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--teal),transparent)}

.sb-hdr{padding:22px 20px 18px;border-bottom:1px solid var(--bdr)}
.sb-logo{display:flex;align-items:center;gap:12px;overflow:visible}
.sb-emblem{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--teal),var(--g2));display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;box-shadow:0 4px 16px rgba(0,212,170,.3);animation:emblemPulse 3s ease-in-out infinite}
.sb-name{font-family:var(--ff);font-size:15px;font-weight:800;background:linear-gradient(135deg,var(--tx),var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;white-space:nowrap;overflow:visible;padding-left:1px}
.sb-society{font-size:10px;color:var(--tx3);margin-top:2px;letter-spacing:.5px}

.sb-nav{padding:14px 12px;flex:1;overflow-y:auto;scrollbar-width:none}
.sb-nav::-webkit-scrollbar{display:none}
.nav-section-label{font-size:9px;font-weight:700;color:var(--tx3);letter-spacing:2px;text-transform:uppercase;padding:12px 8px 6px}
.nav-item{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border-radius:12px;border:none;background:none;cursor:pointer;color:var(--tx2);font-family:var(--fb);font-size:13px;font-weight:500;text-align:left;transition:all .25s;margin-bottom:2px;position:relative;overflow:hidden}
.nav-item::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:0;background:linear-gradient(to bottom,var(--teal),var(--g2));border-radius:2px;transition:height .3s}
.nav-item:hover{background:var(--glass2);color:var(--tx)}
.nav-item.active{background:rgba(0,212,170,.08);color:var(--teal);font-weight:600;border:1px solid rgba(0,212,170,.15)}
.nav-item.active::before{height:60%}
.ni-icon{font-size:18px;width:22px;text-align:center;flex-shrink:0;transition:transform .2s}
.nav-item:hover .ni-icon{transform:scale(1.15)}
.ni-badge{margin-left:auto;background:var(--red);color:#fff;border-radius:8px;padding:2px 7px;font-size:10px;font-weight:700;animation:badgePulse 2s ease-in-out infinite}
.ni-badge.g{background:var(--teal);animation:none}
@keyframes badgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}

.sb-foot{padding:16px 18px;border-top:1px solid var(--bdr)}
.sb-user{display:flex;align-items:center;gap:10px}
.sb-av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--g2));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#050810;flex-shrink:0;font-family:var(--ff)}
.sb-uname{font-size:13px;font-weight:600;color:var(--tx)}
.sb-urole{font-size:10px;color:var(--teal);margin-top:1px;font-weight:600}
.sb-logout{margin-left:auto;font-size:11px;color:var(--red);font-weight:700;cursor:pointer;border:1px solid rgba(255,91,91,.2);background:rgba(255,91,91,.05);padding:5px 10px;border-radius:8px;font-family:var(--ff);transition:all .2s}
.sb-logout:hover{background:rgba(255,91,91,.12);border-color:rgba(255,91,91,.4)}

/* MAIN */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{height:64px;background:var(--topbar-bg);backdrop-filter:blur(20px);border-bottom:1px solid var(--bdr);padding:0 28px;display:flex;align-items:center;gap:14px;flex-shrink:0;position:relative}
.topbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,212,170,.2),transparent)}
.page-title{font-family:var(--ff);font-size:18px;font-weight:800;flex:1;background:linear-gradient(135deg,var(--tx) 60%,var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.tb-search{display:flex;align-items:center;gap:8px;background:var(--glass);border:1px solid var(--bdr);border-radius:10px;padding:8px 14px;transition:all .25s;width:200px}
.tb-search:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,212,170,.1)}
.tb-search input{border:none;background:none;outline:none;font-family:var(--fb);font-size:13px;color:var(--tx);width:100%}
.tb-search input::placeholder{color:var(--tx3)}

.tb-btn{padding:8px 16px;border-radius:10px;border:1px solid var(--bdr);background:var(--glass);font-family:var(--ff);font-size:12px;font-weight:700;cursor:pointer;color:var(--tx2);transition:all .2s;letter-spacing:.3px}
.tb-btn:hover{background:var(--glass2);border-color:var(--bdr2);color:var(--tx)}
.tb-btn.p{background:linear-gradient(135deg,var(--teal),var(--g2));color:#050810;border-color:transparent;box-shadow:0 4px 20px rgba(0,212,170,.25)}
.tb-btn.p:hover{transform:translateY(-1px);box-shadow:0 6px 28px rgba(0,212,170,.35)}

.content{flex:1;overflow-y:auto;padding:28px;background:var(--bg);scrollbar-width:thin;scrollbar-color:var(--glass2) transparent}

/* PAGES */
.page{display:none}
.page.active{display:block;animation:fadeUp .38s cubic-bezier(.4,0,.2,1)}

/* ── GLASS CARD ── */
.card{
  background:var(--glass);
  backdrop-filter:blur(20px);
  border:1px solid var(--bdr);
  border-radius:18px;
  padding:22px;
  margin-bottom:20px;
  position:relative;
  overflow:hidden;
  transition:border-color .3s,box-shadow .3s,transform .3s;
}
.card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.02),transparent);pointer-events:none}
.card:hover{border-color:rgba(0,212,170,.2);box-shadow:var(--glow);transform:translateY(-1px)}
.card-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.card-title{font-family:var(--ff);font-size:14px;font-weight:700;color:var(--tx)}
.card-act{font-size:12px;color:var(--teal);font-weight:600;cursor:pointer;border:none;background:none;font-family:var(--fb);transition:opacity .2s}
.card-act:hover{opacity:.7}

/* ── STAT CARDS ── */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stat-card{
  background:var(--glass);
  border:1px solid var(--bdr);
  border-radius:18px;
  padding:22px;
  position:relative;
  overflow:hidden;
  transition:all .3s;
}
.stat-card::after{content:'';position:absolute;bottom:-20px;right:-20px;width:80px;height:80px;border-radius:50%;opacity:.06;transition:all .4s}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--glow)}
.stat-card:hover::after{transform:scale(1.5)}
.sc-icon{font-size:24px;margin-bottom:10px}
.sc-label{font-size:11px;font-weight:600;color:var(--tx3);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.sc-val{font-family:var(--fnum);font-size:32px;font-weight:700;line-height:1;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.sc-sub{font-size:11px;color:var(--tx3);margin-top:8px;display:flex;align-items:center;gap:5px}
.sc-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:6px}
.sc-badge.up{background:rgba(0,212,170,.15);color:var(--teal)}
.sc-badge.warn{background:rgba(255,184,0,.15);color:var(--gold)}
.sc-badge.bad{background:rgba(255,91,91,.15);color:var(--red)}

/* ══════════════════════════════════════════════
   ANIMATION SYSTEM
══════════════════════════════════════════════ */

/* ── KEYFRAMES LIBRARY ── */
@keyframes fadeUp      {from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeDown    {from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeLeft    {from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeRight   {from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:translateX(0)}}
@keyframes scalePop    {0%{opacity:0;transform:scale(.7)}70%{transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@keyframes bounceIn    {0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.08)}70%{transform:scale(.95)}100%{transform:scale(1)}}
@keyframes slideRight  {from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}
@keyframes shimmer     {0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes glowPulse   {0%,100%{box-shadow:0 0 20px rgba(0,212,170,.2)}50%{box-shadow:0 0 40px rgba(0,212,170,.5),0 0 80px rgba(0,212,170,.2)}}
@keyframes spin360     {from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes floatY      {0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes rippleOut   {0%{transform:scale(0);opacity:.6}100%{transform:scale(3);opacity:0}}
@keyframes countBarFill{from{width:0}to{width:var(--target-w,100%)}}
@keyframes borderRun   {0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes typewriter  {from{width:0}to{width:100%}}
@keyframes cursorBlink {0%,100%{opacity:1}50%{opacity:0}}
@keyframes confettiFall{0%{transform:translateY(-20px) rotate(0deg);opacity:1}100%{transform:translateY(100vh) rotate(720deg);opacity:0}}
@keyframes tealSweep   {0%{left:-100%}100%{left:200%}}
@keyframes heartbeat   {0%,100%{transform:scale(1)}14%{transform:scale(1.15)}28%{transform:scale(1)}42%{transform:scale(1.1)}70%{transform:scale(1)}}
@keyframes waveform    {0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
@keyframes orbitSpin   {from{transform:rotate(0deg) translateX(60px) rotate(0deg)}to{transform:rotate(360deg) translateX(60px) rotate(-360deg)}}
@keyframes slideInNav  {from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:translateX(0)}}
@keyframes numberRoll  {0%{transform:translateY(20px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes toastBounce {0%{transform:translateX(-50%) translateY(40px) scale(.8);opacity:0}60%{transform:translateX(-50%) translateY(-6px) scale(1.03)}100%{transform:translateX(-50%) translateY(0) scale(1);opacity:1}}
@keyframes modalDrop   {0%{opacity:0;transform:scale(.88) translateY(-24px)}70%{transform:scale(1.02) translateY(4px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes gradFlow    {0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes scanLine    {0%{top:-2px}100%{top:100%}}
@keyframes morphBlob   {0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}25%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%}50%{border-radius:50% 60% 30% 40%/40% 30% 70% 60%}75%{border-radius:40% 60% 70% 30%/60% 40% 50% 40%}}

/* ── LOGIN ANIMATIONS ── */
.login-box{animation:fadeUp .7s cubic-bezier(.34,1.2,.64,1) forwards}
.login-emblem{animation:emblemPulse 3s ease-in-out infinite, floatY 4s ease-in-out infinite}
.login-name{animation:fadeDown .6s .2s both}
.login-sub{animation:fadeDown .6s .35s both}
.l-label:first-of-type{animation:fadeRight .5s .4s both}
.role-grid{animation:fadeUp .5s .45s both}
.role-card{transition:all .25s cubic-bezier(.34,1.4,.64,1)}
.role-card:hover{transform:translateY(-4px) scale(1.03)}
.role-card.sel{animation:scalePop .3s cubic-bezier(.34,1.4,.64,1)}
.demo-section{animation:fadeUp .5s .6s both}
.l-btn{position:relative;overflow:hidden}
.l-btn::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,255,255,.25);border-radius:50%;transform:translate(-50%,-50%);transition:width .5s,height .5s,opacity .5s}
.l-btn:active::before{width:300px;height:300px;opacity:0}

/* ── SIDEBAR ENTRANCE ── */
.nav-item{animation:slideInNav .4s both}
.nav-item:nth-child(1){animation-delay:.05s}
.nav-item:nth-child(2){animation-delay:.10s}
.nav-item:nth-child(3){animation-delay:.15s}
.nav-item:nth-child(4){animation-delay:.20s}
.nav-item:nth-child(5){animation-delay:.25s}
.nav-item:nth-child(6){animation-delay:.30s}
.nav-item:nth-child(7){animation-delay:.35s}
.nav-item:nth-child(8){animation-delay:.40s}
.nav-item:hover .ni-icon{transform:scale(1.2) rotate(-5deg);transition:transform .2s cubic-bezier(.34,1.8,.64,1)}

/* ── RIPPLE BUTTON ── */
.ripple-btn{position:relative;overflow:hidden}
.ripple{position:absolute!important;border-radius:50%;background:rgba(255,255,255,.2);transform:scale(0);animation:rippleOut .55s linear;pointer-events:none;z-index:99}

/* ── STAT CARD ENHANCED ── */
.stat-card{animation:fadeUp .5s cubic-bezier(.34,1.2,.64,1) both}
.stat-card:nth-child(1){animation-delay:.05s}
.stat-card:nth-child(2){animation-delay:.12s}
.stat-card:nth-child(3){animation-delay:.19s}
.stat-card:nth-child(4){animation-delay:.26s}
.stat-card:nth-child(5){animation-delay:.33s}
.stat-card:hover{transform:translateY(-5px) scale(1.01)}
.sc-icon{display:inline-block;transition:transform .3s cubic-bezier(.34,1.8,.64,1)}
.stat-card:hover .sc-icon{transform:scale(1.25) rotate(-8deg)}

/* ── CARD HOVER LIFT ── */
.card{transition:border-color .3s,box-shadow .3s,transform .25s cubic-bezier(.34,1.2,.64,1)}
.card:hover{transform:translateY(-3px)}

/* ── TABLE ROW STAGGER — handled by JS animateTable() ── */
tr:hover td{background:var(--glass2)!important;transition:background .15s}

/* ── PAGE TRANSITION ── */
.page.active{animation:fadeUp .4s cubic-bezier(.4,0,.2,1)}

/* ── MEMBER CARDS — entrance handled by JS animateMembers() ── */

/* ── MODAL ANIMATION ── */
@keyframes modalIn{from{opacity:0;transform:scale(.88) translateY(-24px)}70%{transform:scale(1.02) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal{animation:modalIn .4s cubic-bezier(.34,1.2,.64,1)}
.modal h2{animation:fadeDown .3s .1s both}
.form-group{animation:fadeUp .3s both}
.form-group:nth-child(1){animation-delay:.05s}
.form-group:nth-child(2){animation-delay:.1s}
.form-group:nth-child(3){animation-delay:.15s}
.form-group:nth-child(4){animation-delay:.2s}

/* ── TOAST ANIMATION ── */
.toast{animation:none}
.toast.show{animation:toastBounce .45s cubic-bezier(.34,1.4,.64,1) forwards}

/* ── NOTIF / ALERT CARDS ── */
.notif-card{animation:slideRight .35s both}
.notif-item{animation:fadeRight .3s both}

/* ── SHIMMER SKELETON ── */
.shimmer-line{background:linear-gradient(90deg,var(--glass) 25%,var(--glass2) 50%,var(--glass) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:6px;height:12px;margin-bottom:8px}

/* ── GRADIENT TEXT ANIMATION ── */
.anim-grad-text{
  background:linear-gradient(90deg,var(--teal),var(--g2),var(--purple),var(--teal));
  background-size:300% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:gradFlow 4s linear infinite;
}

/* ── SCAN LINE (dashboard header accent) ── */
.topbar::before{
  content:'';position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,212,170,.6),transparent);
  animation:scanLine 4s linear infinite;pointer-events:none;z-index:10;
}

/* ── FLOATING ORB (dashboard background flair) ── */
.orb{
  position:fixed;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0;
  animation:floatY 6s ease-in-out infinite, morphBlob 12s ease-in-out infinite;
}
.orb-1{width:300px;height:300px;top:10%;left:5%;background:radial-gradient(circle,rgba(0,212,170,.08),transparent 70%);animation-delay:0s}
.orb-2{width:250px;height:250px;top:50%;right:5%;background:radial-gradient(circle,rgba(0,160,255,.07),transparent 70%);animation-delay:-3s}
.orb-3{width:200px;height:200px;bottom:10%;left:40%;background:radial-gradient(circle,rgba(167,139,250,.06),transparent 70%);animation-delay:-6s}

/* ── PROGRESS BAR ANIMATE ── */
.prog-fill{transition:width 1s cubic-bezier(.4,0,.2,1)!important}

/* ── PAYMENT SUCCESS CONFETTI ── */
.confetti-piece{
  position:fixed;width:10px;height:10px;border-radius:2px;
  pointer-events:none;z-index:5000;
  animation:confettiFall 2.2s ease-in forwards;
}

/* ── WAVEFORM (ambient, bnav) ── */
.wave-bar{display:inline-block;width:3px;border-radius:2px;background:var(--teal);animation:waveform .9s ease-in-out infinite;margin:0 1px}
.wave-bar:nth-child(2){animation-delay:.15s}
.wave-bar:nth-child(3){animation-delay:.3s}
.wave-bar:nth-child(4){animation-delay:.45s}

/* ── ACTIVE NAV DOT GLOW ── */
.bndot{animation:glowPulse 2s ease-in-out infinite,scalePop .4s cubic-bezier(.34,1.8,.64,1)}

/* ── QA CARD BOUNCE ── */
.qa-card{transition:all .25s cubic-bezier(.34,1.5,.64,1)!important}
.qa-card:hover{transform:translateY(-6px) scale(1.04)!important}
.qa-card:active{transform:scale(.9)!important}

/* ── RES HERO ANIMATE ── */
.res-hero{animation:fadeUp .6s cubic-bezier(.34,1.2,.64,1) forwards}
.hero-greeting{animation:fadeDown .5s .1s both}
.hero-name{animation:fadeDown .5s .2s both}
.hero-flat{animation:fadeDown .4s .3s both}
.hero-stats{animation:fadeUp .5s .4s both}

/* ── AMENITY CARD ── */
.amenity-card{transition:all .25s cubic-bezier(.34,1.4,.64,1)!important}
.amenity-card:hover{transform:translateY(-6px) scale(1.04)!important}

/* ── PAY BTN HEARTBEAT ── */
.pay-btn{animation:heartbeat 2.5s ease-in-out infinite}
.pay-btn:hover{animation:none}

/* ── INVOICE MODAL ── */
#invoice-modal .modal-bg{animation:none}
#invoice-inner{animation:fadeUp .45s cubic-bezier(.34,1.2,.64,1)}

/* ── THEME TOGGLE SPIN ── */
.tt-thumb{transition:transform .4s cubic-bezier(.34,1.5,.64,1)!important}

/* ── GRID ── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}

/* ── PILLS ── */
.pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:6px;font-size:11px;font-weight:700}
.p-open{background:rgba(255,91,91,.12);color:var(--red);border:1px solid rgba(255,91,91,.2)}
.p-prog{background:rgba(255,184,0,.12);color:var(--gold);border:1px solid rgba(255,184,0,.2)}
.p-done{background:rgba(0,212,170,.12);color:var(--teal);border:1px solid rgba(0,212,170,.2)}
.p-high{background:rgba(255,91,91,.12);color:var(--red);border:1px solid rgba(255,91,91,.2)}
.p-med{background:rgba(255,184,0,.12);color:var(--gold);border:1px solid rgba(255,184,0,.2)}
.p-low{background:rgba(0,212,170,.12);color:var(--teal);border:1px solid rgba(0,212,170,.2)}

/* ── TABLE ── */
.table-wrap{overflow-x:auto;border-radius:14px;overflow:hidden}
table{width:100%;border-collapse:collapse}
th{font-family:var(--ff);font-size:10px;font-weight:700;color:var(--tx3);text-align:left;padding:12px 16px;border-bottom:1px solid var(--bdr);text-transform:uppercase;letter-spacing:1px;background:rgba(255,255,255,.02)}
td{padding:14px 16px;border-bottom:1px solid var(--bdr);vertical-align:middle;font-size:13px;color:var(--tx2);transition:background .15s}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--glass)}
.td-b{font-weight:600;color:var(--tx);font-family:var(--ff)}
.td-s{font-size:11px;color:var(--tx3);margin-top:3px}

/* ── NOTIF ITEM ── */
.notif-item{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--bdr);align-items:flex-start;transition:all .2s;animation:fadeSlide .3s ease both}
@keyframes fadeSlide{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
.notif-item:last-child{border-bottom:none}
.ni-dot{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.ni-title{font-size:13px;font-weight:700;color:var(--tx);font-family:var(--ff)}
.ni-body{font-size:12px;color:var(--tx2);margin-top:4px;line-height:1.6}
.ni-meta{font-size:11px;color:var(--tx3);margin-top:6px;display:flex;gap:10px}

/* ── EXP BARS ── */
.exp-bar-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.ebl{font-size:12px;color:var(--tx2);width:110px;flex-shrink:0;font-weight:500}
.ebt{flex:1;height:6px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden}
.ebf{height:6px;border-radius:3px;transition:width .8s cubic-bezier(.4,0,.2,1)}
.eba{font-size:12px;font-weight:700;color:var(--tx);width:72px;text-align:right;flex-shrink:0;font-family:var(--fnum);letter-spacing:-0.3px}

/* ── MEMBER GRID ── */
.member-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.member-card{
  background:var(--glass);border:1px solid var(--bdr);border-radius:16px;padding:20px;text-align:center;
  transition:all .3s;cursor:pointer;
}
.member-card:hover{border-color:rgba(0,212,170,.3);transform:translateY(-4px) scale(1.02);box-shadow:var(--glow)}
.m-av{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;margin:0 auto 12px;font-family:var(--ff);box-shadow:0 4px 16px rgba(0,0,0,.3);position:relative;z-index:1}
.m-name{font-size:13px;font-weight:700;color:var(--tx);font-family:var(--ff)}
.m-flat{font-size:11px;color:var(--tx3);margin:4px 0 10px}
.m-status{font-size:11px;font-weight:700;padding:4px 12px;border-radius:8px;display:inline-block}
@keyframes cardPop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}

/* ── FORMS ── */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.form-group{margin-bottom:14px}
.form-label{display:block;font-size:10px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:6px;font-family:var(--ff)}
.form-input{width:100%;border:1px solid var(--bdr);border-radius:10px;padding:11px 14px;font-family:var(--fb);font-size:13px;color:var(--tx);background:var(--glass);outline:none;transition:all .25s}
.form-input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,212,170,.1);background:var(--glass2)}
textarea.form-input{min-height:80px;resize:vertical}

/* ── MODAL ── */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:1000;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(8px)}
.modal-bg.open{display:flex}
.modal{
  background:var(--modal-bg);backdrop-filter:blur(40px);
  border:1px solid var(--bdr2);border-radius:22px;
  padding:30px;width:520px;max-width:100%;max-height:90vh;overflow-y:auto;
  box-shadow:0 32px 80px rgba(0,0,0,.8),var(--glow);
  animation:modalIn .3s cubic-bezier(.34,1.2,.64,1);
}
@keyframes modalIn{from{opacity:0;transform:scale(.92) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal h2{font-family:var(--ff);font-size:19px;font-weight:800;margin-bottom:22px;background:linear-gradient(135deg,var(--tx),var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid var(--bdr)}

/* ── ROW ACTS ── */
.row-acts{display:flex;gap:6px}
.act-btn{padding:5px 12px;border-radius:8px;border:1px solid var(--bdr);background:var(--glass);font-size:11px;font-weight:600;cursor:pointer;color:var(--tx2);transition:all .2s;font-family:var(--ff)}
.act-btn:hover{background:var(--glass2);border-color:var(--bdr2);transform:scale(1.05)}
.act-btn.g{border-color:rgba(0,212,170,.3);color:var(--teal)}
.act-btn.g:hover{background:rgba(0,212,170,.08)}
.act-btn.r{border-color:rgba(255,91,91,.3);color:var(--red)}
.act-btn.b{border-color:rgba(0,160,255,.3);color:var(--g2)}

/* ── COMPOSE ── */
.compose-panel{background:var(--glass);border:1px solid var(--bdr);border-radius:18px;padding:22px;margin-bottom:20px}

/* ── PROGRESS ── */
.prog-wrap{height:4px;background:rgba(255,255,255,.06);border-radius:2px;margin-top:8px;overflow:hidden}
.prog-fill{height:4px;border-radius:2px;transition:width .8s cubic-bezier(.4,0,.2,1)}

/* ── DUES ROW ── */
.dues-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--bdr);font-size:13px}
.dues-row:last-child{border-bottom:none}

/* ── UPI BOX ── */
.pay-glow-box{
  background:linear-gradient(135deg,rgba(0,212,170,.08),rgba(0,160,255,.06));
  border:1px solid rgba(0,212,170,.2);
  border-radius:18px;padding:24px;margin-bottom:16px;position:relative;overflow:hidden;
}
.pay-glow-box::before{content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(0,212,170,.15),transparent 70%);animation:orbFloat 4s ease-in-out infinite}
@keyframes orbFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(-10px,10px)}}
.pay-amount{font-family:var(--fnum);font-size:40px;font-weight:700;color:var(--tx);position:relative;z-index:1;letter-spacing:-1.5px;font-variant-numeric:tabular-nums}
.pay-label{font-size:11px;color:var(--tx3);letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}
.pay-due{font-size:12px;color:var(--teal);margin-top:4px;font-weight:600}
.pay-btn{background:linear-gradient(135deg,var(--teal),var(--g2));border:none;border-radius:12px;padding:14px 24px;font-size:14px;font-weight:700;color:#050810;cursor:pointer;margin-top:16px;font-family:var(--ff);transition:all .25s;box-shadow:0 6px 24px rgba(0,212,170,.3);display:flex;align-items:center;gap:8px}
.pay-btn:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(0,212,170,.4)}
.upi-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.upi-opt{background:var(--glass);border:1px solid var(--bdr);border-radius:8px;padding:7px 14px;font-size:11px;font-weight:700;color:var(--tx2);cursor:pointer;transition:all .2s}
.upi-opt:hover{border-color:var(--teal);color:var(--teal);background:rgba(0,212,170,.06)}

/* ── TOAST ── */
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);
  background:rgba(10,14,25,.95);color:var(--tx);
  border:1px solid var(--teal);
  padding:12px 22px;border-radius:12px;font-size:13px;font-weight:600;
  opacity:0;transition:all .35s cubic-bezier(.34,1.4,.64,1);z-index:9000;
  pointer-events:none;white-space:nowrap;
  box-shadow:0 8px 32px rgba(0,0,0,.6),0 0 20px rgba(0,212,170,.2);
  font-family:var(--ff)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ══════════════════════════════════════════════
   RESIDENT VIEW
══════════════════════════════════════════════ */
#resident-view{display:none;min-height:100vh;background:var(--bg);flex-direction:column;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
#resident-view.active{display:flex}
/* Header zone scrolls with page — not clipped */
.res-header-zone{flex-shrink:0}
/* Content zone — normal flow, scrolls with parent */
.res-content-zone{flex:1}

.res-topbar{
  background:var(--topbar-bg);backdrop-filter:blur(30px);
  border-bottom:1px solid var(--bdr);padding:16px 20px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:50;
}
.res-topbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,212,170,.3),transparent)}

.res-hero{
  margin:16px 16px 0;
  background:linear-gradient(135deg,rgba(0,212,170,.08),rgba(0,160,255,.05));
  border:1px solid rgba(0,212,170,.15);
  border-radius:22px;padding:24px;position:relative;overflow:hidden;
  animation:heroReveal .6s cubic-bezier(.4,0,.2,1) forwards;opacity:0;transform:translateY(20px)
}
@keyframes heroReveal{to{opacity:1;transform:translateY(0)}}
.res-hero::before{content:'';position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(0,212,170,.12),transparent 70%);animation:orbFloat 5s ease-in-out infinite;pointer-events:none}
.res-hero::after{content:'🏢';position:absolute;right:-10px;bottom:-20px;font-size:100px;opacity:.04;pointer-events:none}
.hero-greeting{font-size:11px;color:var(--tx3);letter-spacing:2px;text-transform:uppercase;font-weight:600}
.hero-name{font-family:var(--ff);font-size:24px;font-weight:800;background:linear-gradient(135deg,var(--tx),var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:5px 0 3px}
.hero-flat{font-size:12px;color:var(--tx3)}
.hero-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;margin-top:18px;padding-top:16px;border-top:1px solid var(--bdr)}
.hs-val{font-family:var(--fnum);font-size:22px;font-weight:700;color:var(--tx);letter-spacing:-0.5px;font-variant-numeric:tabular-nums}
.hs-label{font-size:10px;color:var(--tx3);margin-top:3px;letter-spacing:.5px}

.qa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px 16px 0}
.qa-card{background:var(--glass);border:1px solid var(--bdr);border-radius:14px;padding:16px 8px;text-align:center;cursor:pointer;transition:all .25s;animation:cardPop .4s cubic-bezier(.34,1.4,.64,1) both}
.qa-card:nth-child(1){animation-delay:.05s}
.qa-card:nth-child(2){animation-delay:.1s}
.qa-card:nth-child(3){animation-delay:.15s}
.qa-card:nth-child(4){animation-delay:.2s}
.qa-card:hover{border-color:rgba(0,212,170,.3);transform:translateY(-3px);box-shadow:var(--glow)}
.qa-card:active{transform:scale(.94)}
.qa-icon{font-size:24px;margin-bottom:7px}
.qa-name{font-size:10px;font-weight:700;color:var(--tx2);line-height:1.3;font-family:var(--ff)}

.res-tabs{display:none}
/* Health Monitor */
.health-bar-wrap{display:flex;align-items:center;gap:10px}
.health-bar-track{flex:1;height:10px;border-radius:10px;background:var(--glass2);overflow:hidden;position:relative}
.health-bar-fill{height:100%;border-radius:10px;transition:width 1.2s cubic-bezier(.34,1.2,.64,1)}
.health-bar-fill.animated{background-size:200% 100%;animation:barShimmer 2s linear infinite}
@keyframes barShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.health-bar-pct{font-family:var(--fnum);font-size:12px;font-weight:700;color:var(--tx);min-width:36px;text-align:right}
.res-tabs::-webkit-scrollbar{display:none}
.res-tab{display:flex;align-items:center;gap:6px;padding:9px 18px;border-radius:30px;border:none;background:none;font-family:var(--ff);font-size:12px;font-weight:700;color:var(--tx3);cursor:pointer;transition:all .25s;white-space:nowrap;border:1px solid transparent}
.res-tab.active{background:rgba(0,212,170,.1);border-color:rgba(0,212,170,.2);color:var(--teal)}

.res-page{display:none;padding:16px;padding-bottom:80px;animation:fadeUp .35s ease}
.res-page.active{display:block}
.res-page.active{display:block}
.res-card{background:var(--glass);border:1px solid var(--bdr);border-radius:16px;padding:18px;margin-bottom:12px;transition:all .25s}
.res-card:hover{border-color:rgba(0,212,170,.15)}
.res-card-title{font-family:var(--ff);font-size:14px;font-weight:700;color:var(--tx);margin-bottom:14px}

.notif-card{background:var(--glass);border:1px solid var(--bdr);border-radius:14px;padding:15px;margin-bottom:10px;display:flex;gap:12px;align-items:flex-start;transition:all .2s;animation:fadeSlide .35s ease both}
.notif-card:hover{border-color:rgba(0,212,170,.2);transform:translateX(4px)}
.nc-icon{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.nc-title{font-size:13px;font-weight:700;color:var(--tx);font-family:var(--ff)}
.nc-body{font-size:12px;color:var(--tx2);margin-top:3px;line-height:1.6}
.nc-time{font-size:10px;color:var(--tx3);margin-top:5px;font-weight:600}

.btn-teal{background:linear-gradient(135deg,var(--teal),var(--g2));border:none;border-radius:12px;padding:14px 24px;font-size:14px;font-weight:700;color:#050810;cursor:pointer;font-family:var(--ff);transition:all .25s;width:100%;box-shadow:0 6px 24px rgba(0,212,170,.25)}
.btn-teal:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(0,212,170,.35)}

.bnav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:500px;
  background:var(--topbar-bg);backdrop-filter:blur(30px);
  border-top:1px solid var(--bdr);
  display:flex;overflow-x:auto;overflow-y:hidden;
  padding:8px 4px 20px;z-index:100;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  gap:0;
}
.bnav::-webkit-scrollbar{display:none}
.bnav::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,212,170,.4),transparent)}
.bnav-item{
  flex:0 0 auto;min-width:64px;max-width:72px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  cursor:pointer;padding:6px 4px 2px;
  border:none;background:none;
  font-family:var(--ff);transition:transform .15s;
  border-radius:12px;
}
.bnav-item:active{transform:scale(.85)}
.bnav-item.active{background:rgba(0,212,170,.1)}
.bni{font-size:20px;line-height:1.2}
.bnl{font-size:8.5px;font-weight:700;color:var(--tx3);letter-spacing:.3px;text-transform:uppercase;text-align:center;white-space:nowrap}
.bnav-item.active .bni{filter:drop-shadow(0 0 4px rgba(0,212,170,.5))}
.bnav-item.active .bnl{color:var(--teal)}
.bndot{width:4px;height:4px;border-radius:50%;background:var(--teal);margin-top:1px;box-shadow:0 0 6px var(--teal)}

/* ── TASK FILTER BUTTONS ── */
.task-filter-btn{padding:7px 16px;border-radius:10px;border:1px solid var(--bdr);background:var(--glass);font-family:var(--ff);font-size:12px;font-weight:700;cursor:pointer;color:var(--tx2);transition:all .2s;letter-spacing:.3px}
.task-filter-btn:hover{background:var(--glass2);color:var(--tx)}
.task-filter-btn.active{background:rgba(0,212,170,.1);border-color:rgba(0,212,170,.3);color:var(--teal)}
/* ── STATUS CHANGE DROPDOWN ── */
.status-select{padding:5px 8px;border-radius:8px;border:1px solid var(--bdr);background:var(--glass);font-size:11px;font-weight:700;cursor:pointer;color:var(--tx2);font-family:var(--ff);outline:none;transition:all .2s}
.status-select:focus{border-color:var(--teal)}
html.light .status-select{background:rgba(248,250,254,.9)}
@keyframes slotPop{0%{transform:scale(.8);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
.amenity-card{border-radius:14px;padding:18px;text-align:center;cursor:pointer;transition:all .25s;animation:cardPop .4s both;position:relative;overflow:hidden}
.amenity-card:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 12px 32px rgba(0,0,0,.4)}
.amenity-card::after{content:'Tap to Book';position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.5),transparent);color:#fff;font-size:10px;font-weight:700;padding:8px 0 6px;letter-spacing:.5px;opacity:0;transition:opacity .25s;text-transform:uppercase}
.amenity-card:hover::after{opacity:1}
.time-slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.time-slot{padding:9px 6px;border-radius:10px;border:1.5px solid var(--bdr2);background:var(--glass);text-align:center;cursor:pointer;transition:all .2s;font-size:12px;font-weight:600;color:var(--tx2);font-family:var(--fnum);animation:slotPop .25s both}
.time-slot:hover{border-color:var(--teal);color:var(--teal);background:rgba(0,212,170,.06)}
.time-slot.selected{border-color:var(--teal);background:rgba(0,212,170,.12);color:var(--teal);box-shadow:0 0 12px rgba(0,212,170,.2)}
.time-slot.booked{border-color:rgba(255,91,91,.2);background:rgba(255,91,91,.06);color:var(--red);cursor:not-allowed;opacity:.6}
.booking-card{background:var(--glass);border:1px solid var(--bdr);border-radius:14px;padding:14px 16px;margin-bottom:10px;display:flex;align-items:center;gap:12px;animation:fadeRight .3s both}
.booking-card:hover{border-color:rgba(0,212,170,.2)}
.bk-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.bk-name{font-size:13px;font-weight:700;color:var(--tx);font-family:var(--ff)}
.bk-meta{font-size:11px;color:var(--tx3);margin-top:3px}
.bk-cancel{margin-left:auto;font-size:10px;font-weight:700;color:var(--red);background:rgba(255,91,91,.08);border:1px solid rgba(255,91,91,.2);border-radius:8px;padding:5px 10px;cursor:pointer;transition:all .2s;flex-shrink:0;font-family:var(--ff)}
.bk-cancel:hover{background:rgba(255,91,91,.18)}
.amen-tabs{display:flex;gap:6px;margin-bottom:16px}
.amen-tab{flex:1;padding:10px;border-radius:12px;border:1.5px solid var(--bdr);background:var(--glass);font-family:var(--ff);font-size:12px;font-weight:700;color:var(--tx3);cursor:pointer;transition:all .25s;text-align:center}
.amen-tab.active{background:rgba(0,212,170,.1);border-color:rgba(0,212,170,.25);color:var(--teal)}
html.light .time-slot{background:rgba(248,250,254,.9)}
html.light .booking-card{background:rgba(255,255,255,.85)}

/* PAY SUCCESS */
.success-ring{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--g2));display:flex;align-items:center;justify-content:center;font-size:36px;margin:0 auto 16px;box-shadow:0 0 40px rgba(0,212,170,.4);animation:successPop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes successPop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}

/* ── LIGHT THEME OVERRIDES ── */
html.light body{background:var(--bg)}
html.light .card{background:rgba(255,255,255,0.8);border-color:rgba(0,0,0,0.07)}
html.light .card:hover{border-color:rgba(0,212,170,.35)}
html.light .stat-card{background:rgba(255,255,255,0.85);border-color:rgba(0,0,0,0.07)}
html.light .compose-panel{background:rgba(255,255,255,0.8);border-color:rgba(0,0,0,0.08)}
html.light .member-card{background:rgba(255,255,255,0.85);border-color:rgba(0,0,0,0.07)}
html.light .role-card{background:rgba(248,250,254,0.9);border-color:rgba(0,0,0,0.1)}
html.light .role-card.sel{background:rgba(0,212,170,.08)}
html.light .demo-pill{background:rgba(248,250,254,0.9);border-color:rgba(0,0,0,0.08)}
html.light .demo-pill:hover{background:rgba(255,255,255,1)}
html.light .l-input{background:rgba(248,250,254,0.9);border-color:rgba(0,0,0,0.12);color:var(--tx)}
html.light .l-input:focus{background:#fff}
html.light .form-input{background:rgba(248,250,254,0.9);border-color:rgba(0,0,0,0.12);color:var(--tx)}
html.light .form-input:focus{background:#fff}
html.light table{background:transparent}
html.light th{background:rgba(240,244,250,0.9);color:var(--tx3)}
html.light td{color:var(--tx2)}
html.light tr:hover td{background:rgba(0,212,170,.04)}
html.light .modal-bg{background:rgba(0,0,0,.35)}
html.light .tb-btn{background:rgba(255,255,255,0.8);border-color:rgba(0,0,0,0.1);color:var(--tx2)}
html.light .tb-btn:hover{background:rgba(255,255,255,1)}
html.light .nav-item{color:var(--tx2)}
html.light .nav-item:hover{background:rgba(0,0,0,.04)}
html.light .nav-item.active{background:rgba(0,212,170,.1);color:var(--teal)}
html.light #owner-sidebar{background:#f8fafc;border-right-color:rgba(0,0,0,.09)}
html.light .onav-item{color:#334155}
html.light .onav-item:hover{background:rgba(0,0,0,.05);color:#0f172a}
html.light .onav-item.active{background:rgba(0,212,170,.12);color:#0d9488;font-weight:700}
html.light .owner-profile-card{background:rgba(0,212,170,.07);border:1px solid rgba(0,212,170,.2)}
html.light .owner-info-name{color:#0f172a}
html.light .owner-info-role{color:#64748b}
html.light .tb-search{background:rgba(240,244,250,0.9);border-color:rgba(0,0,0,0.1)}
html.light .tb-search input{color:var(--tx)}
html.light .res-card{background:rgba(255,255,255,0.85);border-color:rgba(0,0,0,0.07)}
html.light .qa-card{background:rgba(255,255,255,0.8);border-color:rgba(0,0,0,0.07)}
html.light .notif-card{background:rgba(255,255,255,0.8);border-color:rgba(0,0,0,0.07)}
html.light .res-tab{color:var(--tx3)}
html.light .res-tab.active{background:rgba(0,212,170,.1);border-color:rgba(0,212,170,.25);color:var(--teal)}
html.light .bnav{background:rgba(255,255,255,.95);border-top-color:rgba(0,0,0,.08)}
html.light .bnav-item.active{background:rgba(0,160,80,.08)}
html.light .res-hero{background:linear-gradient(135deg,rgba(0,212,170,.06),rgba(0,160,255,.04));border-color:rgba(0,212,170,.2)}
html.light .upi-opt{background:rgba(240,244,250,.9);border-color:rgba(0,0,0,.1)}
html.light .pay-glow-box{background:linear-gradient(135deg,rgba(0,212,170,.06),rgba(0,160,255,.04))}
html.light .sb-foot{background:var(--sidebar-bg)}
html.light .act-btn{background:rgba(248,250,254,0.9);border-color:rgba(0,0,0,.1);color:var(--tx2)}
html.light .act-btn:hover{background:rgba(240,244,250,1)}
html.light .toast{background:rgba(255,255,255,.97);border-color:var(--teal);color:var(--tx)}
html.light .amenity-card{filter:brightness(1.02)}
html.light html.light #bg-canvas{opacity:.18}
html.light #owner-bg-canvas{opacity:.12}
html.light #resident-bg-canvas{opacity:.1}
html.light #owner-dash-canvas{opacity:.08}
html.light .page-title{background:linear-gradient(135deg,var(--tx) 60%,var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

html.light .orb-1{background:radial-gradient(circle,rgba(0,212,170,.07),transparent 70%)}
html.light .orb-2{background:radial-gradient(circle,rgba(0,160,255,.06),transparent 70%)}
html.light .orb-3{background:radial-gradient(circle,rgba(167,139,250,.05),transparent 70%)}
html.light .topbar::before{background:linear-gradient(90deg,transparent,rgba(0,212,170,.35),transparent)}

/* ── VISITOR LOG ── */
.visitor-log-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--bdr);transition:all .2s}
.visitor-log-item:last-child{border-bottom:none}
.visitor-log-item:hover{background:var(--glass);border-radius:10px;padding-left:8px}
.vl-badge{width:38px;height:38px;border-radius:12px;background:rgba(0,160,255,.12);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.vl-status-in{background:rgba(0,212,170,.12);color:var(--teal);border:1px solid rgba(0,212,170,.2)}
.vl-status-out{background:rgba(255,91,91,.12);color:var(--red);border:1px solid rgba(255,91,91,.2)}
.vl-status-exp{background:rgba(255,184,0,.12);color:var(--gold);border:1px solid rgba(255,184,0,.2)}

@media(max-width:900px){
  .stats-row{grid-template-columns:1fr 1fr}
  .two-col{grid-template-columns:1fr}
  .sidebar{width:200px}
}
@media(max-width:650px){
  /* Hide sidebar — mobile uses hamburger or swipe */
  .sidebar{display:none}
  /* Admin content takes full width */
  .main{width:100%;min-width:0}
  /* Stats always 2-col on mobile */
  .stats-row{grid-template-columns:1fr 1fr;gap:10px}
  /* Force all 2-col grids to 1-col on mobile */
  .two-col{grid-template-columns:1fr;gap:12px}
  .form-row{grid-template-columns:1fr;gap:0}
  /* Topbar compact */
  .topbar{padding:10px 14px;gap:8px;flex-wrap:nowrap}
  .page-title{font-size:15px}
  .tb-search{display:none} /* hide search on mobile */
  .tb-btn{padding:7px 10px;font-size:11px}
  /* Cards full width */
  .card{padding:14px}
  .card-hdr{flex-wrap:wrap;gap:8px}
  /* Tables scroll horizontally */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:500px}
  /* Member grid — 2 cols on mobile */
  .member-grid{grid-template-columns:1fr 1fr;gap:10px}
  .member-card{padding:14px 10px}
  /* Modal full screen on mobile */
  .modal{width:95vw;max-width:95vw;padding:20px 16px;margin:10px}
  .profile-modal{width:100vw;max-width:100vw;border-radius:24px 24px 0 0;margin:0;margin-top:auto}
  .profile-modal-bg{align-items:flex-end}
  /* Login box tighter */
  .login-box{padding:24px 18px}
  /* Role grid — 2 rows of 3 */
  .role-grid{gap:8px}
  .role-card{padding:12px 8px}
  .rc-icon{font-size:22px}
  .rc-name{font-size:11px}
  /* pm-foot scrollable */
  .pm-foot{flex-wrap:wrap;gap:8px;padding:0 16px 20px}
  .pm-foot .tb-btn{flex:1;min-width:calc(50% - 4px);padding:10px 8px;font-size:11px}
  .pm-body{padding:16px}
  /* Dues table */
  #dues-tbody tr td:nth-child(3){display:none} /* hide flat type col */
  /* Expense form */
  .exp-stat-row{grid-template-columns:1fr 1fr}
  /* ── Admin topbar: mobile collapse ── */
  .topbar{gap:6px;padding:10px 12px;overflow:visible}
  .topbar .tb-search{display:none} /* hide search on mobile */
  .topbar .tb-btn:not([id]){display:none} /* hide Task/Notify buttons */
  .topbar .theme-toggle{
    padding:5px 7px;gap:0;min-width:34px;height:34px;
    border-radius:50%;justify-content:center;flex-shrink:0;
  }
  .topbar .theme-toggle .tt-track{display:none !important}
  .topbar .theme-toggle .tt-theme-label{display:none !important}
  .topbar .theme-toggle .tt-theme-icon{font-size:15px;display:inline}
  #sound-toggle-btn{padding:6px 8px;font-size:13px}
  button[onclick="openSOS()"]{padding:6px 10px;font-size:11px;letter-spacing:0}
  .page-title{font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Visitor popup */
  #visitor-popup-container{top:10px;right:10px;left:10px;max-width:none}
  .visitor-popup{width:100%}
  /* Guard topbar */
  .res-topbar{padding:10px 12px;gap:6px}

  /* ── Mobile topbar: icon-only mode ── */
  .res-topbar .theme-toggle{
    padding:6px 8px;gap:0;min-width:36px;height:36px;
    border-radius:50%;justify-content:center;
  }
  .res-topbar .theme-toggle .tt-track{display:none !important}
  .res-topbar .theme-toggle .tt-theme-label{display:none !important}
  .res-topbar .theme-toggle .tt-theme-icon{font-size:16px;display:inline}
  #lang-btn{padding:5px 7px;font-size:10px}
}
@media(max-width:400px){
  .stats-row{grid-template-columns:1fr 1fr;gap:8px}
  .member-grid{grid-template-columns:1fr 1fr}
  .role-card{padding:10px 6px}
  .rc-name{font-size:10px}
  .pm-foot .tb-btn{min-width:100%;flex:none}
  .pm-info-grid{grid-template-columns:1fr}
}
@media(max-width:650px){
  #mob-menu-btn{display:flex!important}
  /* Mobile sidebar as overlay */
  .sidebar{
    display:flex!important;
    position:fixed;top:0;left:-260px;height:100%;width:240px;
    z-index:3000;transition:left .3s cubic-bezier(.4,0,.2,1);
    box-shadow:none;
  }
  .sidebar.mob-open{
    left:0;
    box-shadow:4px 0 32px rgba(0,0,0,.5);
  }
  #mob-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:2999;backdrop-filter:blur(2px)}
  #mob-overlay.show{display:block}
}
@media(min-width:651px){
  #mob-menu-btn{display:none!important}
  #mob-overlay{display:none!important}
}
::-webkit-scrollbar-thumb{background:var(--glass2);border-radius:2px}

/* ── LOADING OVERLAY ── */
#sp-loader{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;transition:opacity .4s ease}
#sp-loader.hidden{opacity:0;pointer-events:none}
.sp-loader-ring{width:48px;height:48px;border-radius:50%;border:3px solid var(--glass2);border-top-color:var(--teal);animation:spin360 .8s linear infinite}
.sp-loader-txt{font-family:var(--ff);font-size:13px;color:var(--tx3);letter-spacing:1px}
.sb-status-dot{width:8px;height:8px;border-radius:50%;background:var(--teal);display:inline-block;margin-right:6px;animation:glowPulse 2s ease-in-out infinite}
.sb-status-dot.offline{background:var(--red);animation:none}
/* ── QR VISITOR SELF-REGISTRATION ── */
#visitor-reg-view{display:none;min-height:100vh;background:linear-gradient(135deg,#050810 0%,#0D1B2E 100%);align-items:center;justify-content:center;padding:20px;z-index:10}
#visitor-reg-view.active{display:flex}
.vr-box{width:100%;max-width:440px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:28px 24px;animation:fadeUp .5s cubic-bezier(.34,1.2,.64,1)}
.vr-header{text-align:center;margin-bottom:24px}
.vr-building{font-family:var(--ff);font-size:18px;font-weight:800;color:#fff;margin:10px 0 4px}
.vr-sub{font-size:12px;color:rgba(255,255,255,.5);letter-spacing:.5px;text-transform:uppercase}
.vr-form-label{font-size:10px;font-weight:700;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:6px;display:block}
.vr-input{width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:13px 14px;font-size:14px;color:#fff;font-family:'Outfit',sans-serif;outline:none;transition:border .2s;box-sizing:border-box;margin-bottom:14px}
.vr-input:focus{border-color:#00D4AA;background:rgba(0,212,170,.06)}
.vr-input option{background:#0D1B2E;color:#fff}
.vr-btn{width:100%;padding:15px;border-radius:14px;border:none;background:linear-gradient(135deg,#00D4AA,#00A0FF);color:#050810;font-family:'Outfit',sans-serif;font-size:15px;font-weight:800;cursor:pointer;letter-spacing:.3px;transition:all .25s;margin-top:4px}
.vr-btn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,212,170,.35)}
.vr-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.vr-success{text-align:center;padding:32px 20px;display:none}
/* QR button in admin */
.qr-btn{padding:7px 14px;border-radius:10px;border:1px solid rgba(0,212,170,.3);background:rgba(0,212,170,.08);color:var(--teal);font-size:12px;font-weight:700;cursor:pointer;font-family:var(--ff);transition:all .2s}
.qr-btn:hover{background:rgba(0,212,170,.15)}
/* Visitor arrival popup */
@keyframes visitorArrive{0%{opacity:0;transform:translateY(-20px) scale(.95)}70%{transform:translateY(4px) scale(1.02)}100%{opacity:1;transform:translateY(0) scale(1)}}
.visitor-popup{position:fixed;top:20px;right:20px;width:min(320px,calc(100vw - 40px));background:var(--modal-bg);border:2px solid rgba(0,212,170,.3);border-radius:18px;padding:16px 18px;z-index:5000;box-shadow:0 16px 48px rgba(0,0,0,.6),0 0 0 1px rgba(0,212,170,.1);animation:visitorArrive .4s cubic-bezier(.34,1.2,.64,1)}
.vp-icon{font-size:28px;margin-bottom:6px}
.vp-title{font-family:var(--ff);font-size:14px;font-weight:800;color:var(--teal);margin-bottom:4px}
.vp-detail{font-size:12px;color:var(--tx2);line-height:1.7}
html.light .visitor-popup{background:#fff}
@keyframes profilePop{0%{opacity:0;transform:scale(.85) translateY(30px)}65%{transform:scale(1.02) translateY(-4px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.profile-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:2000;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(14px)}
.profile-modal-bg.open{display:flex}
.profile-modal{width:100%;max-width:480px;background:var(--modal-bg);backdrop-filter:blur(40px);border:1px solid var(--bdr2);border-radius:28px;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.8),var(--glow2);animation:profilePop .45s cubic-bezier(.34,1.2,.64,1);position:relative}
.pm-header{padding:32px 28px 24px;background:linear-gradient(135deg,#0a1628,#0d1f3c);border-bottom:1px solid var(--bdr);text-align:center;position:relative;overflow:hidden}
.pm-header canvas{position:absolute;inset:0;width:100%;height:100%;opacity:1}
.pm-header::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(0,212,170,.25) 0%,rgba(0,160,255,.12) 40%,transparent 70%);animation:pmPulse 3s ease-in-out infinite}
.pm-header::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,transparent 60%,rgba(0,212,170,.04) 100%)}
@keyframes pmPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.7}50%{transform:translate(-50%,-50%) scale(1.15);opacity:1}}
@keyframes pmFloat{0%,100%{transform:translateY(0) rotate(0deg);opacity:.6}50%{transform:translateY(-8px) rotate(180deg);opacity:1}}
/* pm-header background set in light mode block below */
.pm-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;background:var(--glass2);border:1px solid var(--bdr2);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;color:var(--tx2);transition:all .2s;z-index:2}
.pm-close:hover{background:rgba(255,91,91,.15);border-color:rgba(255,91,91,.3);color:var(--red);transform:rotate(90deg)}
.pm-av-big{width:82px;height:82px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;font-family:var(--ff);margin:0 auto 14px;box-shadow:0 8px 32px rgba(0,0,0,.4),0 0 0 4px rgba(255,255,255,.07);position:relative;z-index:1;animation:scalePop .5s .1s both}
.pm-name{font-family:var(--ff);font-size:22px;font-weight:800;color:var(--tx);letter-spacing:-.3px;position:relative;z-index:1}
.pm-flat-tag{display:inline-flex;align-items:center;gap:5px;background:var(--glass2);border:1px solid var(--bdr2);border-radius:20px;padding:4px 14px;font-size:12px;font-weight:700;color:var(--tx2);margin-top:8px;font-family:var(--fnum);position:relative;z-index:1}
.pm-body{padding:22px 28px}
.pm-section{margin-bottom:20px}
.pm-section-title{font-size:9px;font-weight:800;color:var(--tx3);text-transform:uppercase;letter-spacing:2px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.pm-section-title::after{content:'';flex:1;height:1px;background:var(--bdr)}
.pm-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pm-info-item{background:var(--glass);border:1px solid var(--bdr);border-radius:12px;padding:12px 14px;animation:fadeUp .3s both}
.pm-info-label{font-size:9px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
.pm-info-val{font-size:13px;font-weight:600;color:var(--tx)}
.pm-dues-box{border-radius:14px;padding:16px 18px;margin-bottom:20px;position:relative;overflow:hidden}
.pm-dues-box.paid{background:rgba(0,212,170,.06);border:1px solid rgba(0,212,170,.2)}
.pm-dues-box.pending{background:rgba(255,91,91,.06);border:1px solid rgba(255,91,91,.25);animation:glowPulse 3s ease-in-out infinite}
.pm-dues-amount{font-family:var(--fnum);font-size:30px;font-weight:700;letter-spacing:-1.5px}
.pm-hist-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--bdr);font-size:12px}
.pm-hist-row:last-child{border-bottom:none}
.pm-foot{padding:0 28px 24px;display:flex;gap:10px}
html.light .profile-modal{background:rgba(255,255,255,.97)}
/* pm-header ALWAYS stays dark in both modes — animation needs dark background */
html.light .pm-header{background:linear-gradient(135deg,#050e1f,#0a1628) !important}
html.light .pm-header canvas{opacity:1 !important}
html.light .pm-name{color:#fff}
html.light .pm-flat-tag{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.8)}
html.light .pm-info-item{background:rgba(248,250,254,.9);border-color:rgba(0,0,0,.07)}

.shake-anim{animation:shake .4s ease !important;}@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
@keyframes sosPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,91,91,.4)}50%{box-shadow:0 0 0 6px rgba(255,91,91,0)}}
@keyframes sosAlertIn{0%{opacity:0;transform:scale(.85)}70%{transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}
@keyframes sosRing{0%,100%{transform:rotate(0)}10%{transform:rotate(-15deg)}20%{transform:rotate(15deg)}30%{transform:rotate(-12deg)}40%{transform:rotate(12deg)}50%{transform:rotate(-8deg)}60%{transform:rotate(8deg)}70%{transform:rotate(0)}}
.sos-overlay{position:fixed;inset:0;z-index:9999;background:rgba(255,0,0,.18);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;animation:sosAlertIn .3s ease}
.sos-modal{background:#0D0D0D;border:3px solid #FF3B3B;border-radius:28px;padding:32px 28px;max-width:420px;width:100%;text-align:center;box-shadow:0 0 80px rgba(255,59,59,.6),0 0 0 1px rgba(255,59,59,.3);animation:sosAlertIn .35s cubic-bezier(.34,1.2,.64,1)}
.sos-icon{font-size:56px;margin-bottom:8px;animation:sosRing 1s .2s both}
.sos-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}
.sos-type-btn{padding:14px 10px;border-radius:16px;border:2px solid rgba(255,59,59,.3);background:rgba(255,59,59,.08);font-family:var(--ff);font-size:13px;font-weight:800;color:#FF3B3B;cursor:pointer;transition:all .2s;line-height:1.4}
.sos-type-btn:hover,.sos-type-btn.sel{background:rgba(255,59,59,.2);border-color:#FF3B3B;transform:scale(1.03)}
.sos-type-btn .sos-emoji{font-size:28px;display:block;margin-bottom:6px}
/* ── Login dropdowns ── */
.login-dd-item{padding:11px 14px;cursor:pointer;font-size:13px;color:var(--tx);border-bottom:1px solid var(--bdr);transition:background .15s;display:flex;align-items:center;gap:10px}
.login-dd-item:last-child{border-bottom:none}
.login-dd-item:hover{background:rgba(0,212,170,.08)}
.login-dd-item .dd-code{font-family:var(--fnum);font-weight:700;color:var(--teal);font-size:12px;letter-spacing:1px}
.login-dd-item .dd-name{font-weight:600;color:var(--tx)}
.login-dd-item .dd-city{font-size:11px;color:var(--tx3)}
.login-dd-flat{padding:10px 14px;cursor:pointer;font-size:13px;color:var(--tx);border-bottom:1px solid var(--bdr);transition:background .15s;display:flex;justify-content:space-between;align-items:center}
.login-dd-flat:last-child{border-bottom:none}
.login-dd-flat:hover{background:rgba(0,212,170,.08)}
.login-dd-flat .df-flat{font-family:var(--fnum);font-weight:700;color:var(--teal)}
.login-dd-flat .df-name{font-size:11px;color:var(--tx3)}
html.light .login-dd-item,.login-dd-flat{background:rgba(255,255,255,.97)}
@media print{
  body.sp-printing>*{display:none!important}
  body.sp-printing #invoice-print-area{display:block!important;position:fixed;inset:0;background:#fff;font-family:'Space Grotesk',sans-serif;color:#0F172A}
}
#invoice-print-area{display:none}

/* ══════════════════════════════════════════════
   SUPER ADMIN — OWNER PORTAL
══════════════════════════════════════════════ */
#entry-view{min-height:100vh;display:none;align-items:center;justify-content:center;padding:20px;position:relative;z-index:2;flex-direction:column;gap:0}
#entry-view.active{display:flex}
#super-login-view.active{display:flex}
#super-view{display:none;min-height:100vh;background:var(--bg);position:relative;z-index:2}
#super-view.active{display:block}
.entry-box{width:100%;max-width:520px;text-align:center;animation:fadeUp .7s cubic-bezier(.34,1.2,.64,1) forwards;opacity:0;transform:translateY(30px)}
.entry-logo{width:80px;height:80px;border-radius:24px;background:linear-gradient(135deg,var(--teal),var(--g2));display:flex;align-items:center;justify-content:center;font-size:36px;margin:0 auto 18px;box-shadow:0 12px 40px rgba(0,212,170,.4);animation:emblemPulse 3s ease-in-out infinite,floatY 4s ease-in-out infinite}
.entry-title{font-family:var(--ff);font-size:34px;font-weight:800;background:linear-gradient(135deg,var(--tx) 30%,var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-1px;margin-bottom:6px}
.entry-sub{font-size:13px;color:var(--tx3);margin-bottom:40px;letter-spacing:.5px}
.entry-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
.entry-card{background:var(--glass);border:1.5px solid var(--bdr);border-radius:20px;padding:28px 20px;cursor:pointer;transition:all .3s cubic-bezier(.34,1.3,.64,1);position:relative;overflow:hidden;text-align:center}
.entry-card::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .3s;background:linear-gradient(135deg,rgba(0,212,170,.08),rgba(0,160,255,.06))}
.entry-card:hover{border-color:var(--teal);transform:translateY(-5px) scale(1.02);box-shadow:var(--glow)}
.entry-card:hover::before{opacity:1}
.entry-card-icon{font-size:38px;margin-bottom:12px}
.entry-card-title{font-family:var(--ff);font-size:15px;font-weight:800;color:var(--tx);margin-bottom:5px}
.entry-card-sub{font-size:11px;color:var(--tx3);line-height:1.6}
.entry-card.owner-card{border-color:rgba(255,184,0,.25)}
.entry-card.owner-card:hover{border-color:var(--gold);box-shadow:0 0 40px rgba(255,184,0,.15)}
.entry-card.owner-card::before{background:linear-gradient(135deg,rgba(255,184,0,.08),rgba(255,140,0,.04))}
.super-login-box{width:100%;max-width:420px;background:var(--login-box-bg);backdrop-filter:blur(40px);border:1px solid rgba(255,184,0,.2);border-radius:28px;padding:40px 32px;box-shadow:0 32px 80px rgba(0,0,0,.7),0 0 60px rgba(255,184,0,.08);animation:fadeUp .6s cubic-bezier(.34,1.2,.64,1) forwards}
.super-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,184,0,.1);border:1px solid rgba(255,184,0,.3);border-radius:20px;padding:5px 14px;font-size:10px;font-weight:700;color:var(--gold);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:18px}
.super-topbar{background:var(--topbar-bg);backdrop-filter:blur(20px);border-bottom:1px solid var(--bdr);padding:0 32px;height:64px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:50}
.super-topbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,184,0,.4),transparent)}
.super-content{padding:28px 32px;max-width:1400px;margin:0 auto}
.super-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}
.buildings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.building-card{background:var(--glass);border:1px solid var(--bdr);border-radius:20px;padding:22px;position:relative;overflow:hidden;transition:all .3s;animation:fadeUp .5s both}
.building-card:hover{border-color:rgba(0,212,170,.25);transform:translateY(-3px);box-shadow:var(--glow)}
.building-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:20px 20px 0 0}
.building-card.st-active::after{background:linear-gradient(90deg,var(--teal),var(--g2))}
.building-card.st-suspended::after{background:var(--red)}
.building-card.st-trial::after{background:var(--gold)}
.bc-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
.bc-av{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--teal),var(--g2));display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;box-shadow:0 4px 16px rgba(0,212,170,.2)}
.bc-name{font-family:var(--ff);font-size:15px;font-weight:800;color:var(--tx);margin-bottom:3px}
.bc-city{font-size:11px;color:var(--tx3)}
.bc-code{font-family:var(--fnum);font-size:10px;color:var(--teal);font-weight:700;background:rgba(0,212,170,.08);border:1px solid rgba(0,212,170,.15);padding:2px 9px;border-radius:6px;letter-spacing:1.5px;display:inline-block;margin-top:4px}
.bc-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;padding:12px 0;margin:12px 0;border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr)}
.bc-sv{font-family:var(--fnum);font-size:20px;font-weight:700;color:var(--tx);text-align:center}
.bc-sl{font-size:9px;color:var(--tx3);text-transform:uppercase;letter-spacing:.5px;margin-top:2px;text-align:center}
.bc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.bc-plan{font-size:10px;font-weight:700;padding:3px 10px;border-radius:6px}
.plan-free{background:rgba(0,212,170,.1);color:var(--teal);border:1px solid rgba(0,212,170,.2)}
.plan-pro{background:rgba(255,184,0,.1);color:var(--gold);border:1px solid rgba(255,184,0,.2)}
.plan-trial{background:rgba(167,139,250,.1);color:var(--purple);border:1px solid rgba(167,139,250,.2)}
.bc-acts{display:flex;gap:6px}
.bca{padding:5px 11px;border-radius:8px;border:1px solid var(--bdr);background:var(--glass);font-size:10px;font-weight:700;cursor:pointer;color:var(--tx2);transition:all .2s;font-family:var(--ff)}
.bca:hover{background:var(--glass2)}
.bca.r{border-color:rgba(255,91,91,.3);color:var(--red)}
.bca.g{border-color:rgba(0,212,170,.3);color:var(--teal)}
.bca.b{border-color:rgba(0,160,255,.3);color:var(--g2)}
.bca.gold{border-color:rgba(255,184,0,.3);color:var(--gold)}
.reg-steps{display:flex;margin-bottom:24px;position:relative}
.reg-steps::before{content:'';position:absolute;top:13px;left:14px;right:14px;height:2px;background:var(--bdr2);z-index:0}
.reg-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;z-index:1}
.rs-dot{width:26px;height:26px;border-radius:50%;border:2px solid var(--bdr2);background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:var(--tx3);transition:all .35s;font-family:var(--fnum)}
.rs-lbl{font-size:8px;color:var(--tx3);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.reg-step.s-done .rs-dot{background:var(--teal);border-color:var(--teal);color:#050810}
.reg-step.s-active .rs-dot{background:linear-gradient(135deg,var(--teal),var(--g2));border-color:transparent;color:#050810;box-shadow:0 0 14px rgba(0,212,170,.5);animation:emblemPulse 2s ease-in-out infinite}
.reg-step.s-active .rs-lbl{color:var(--teal)}
html.light .building-card{background:rgba(255,255,255,.85)}
html.light .entry-card{background:rgba(255,255,255,.85)}

/* ═══════════════════════════════════════════════════════════════
   MOBILE PERFORMANCE & UX IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════ */

/* Scroll performance — GPU acceleration on scrollable containers */
.main-content,.modal,.modal-bg,[class*="-list"],[class*="-grid"]{
  -webkit-overflow-scrolling:touch;
  will-change:auto;
}

/* Reduce animation complexity on low-end devices */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:0.01ms!important;
  }
  canvas{display:none!important;}
}

/* Mobile touch targets — minimum 44px (Apple HIG standard) */
@media (max-width:768px){
  .nav-item{padding:13px 12px;min-height:44px;}
  .btn-teal,.tb-btn,.l-btn{min-height:44px;font-size:14px;}
  .role-card{padding:16px 10px;}
  .stat-card{padding:16px;}

  /* Prevent text overflow on small screens */
  .sb-name{font-size:14px;}
  .sb-society{font-size:9px;}
  
  /* Better modal on mobile */
  .modal{max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  
  /* Full width inputs on mobile */
  .form-input,.l-input{font-size:16px!important;} /* prevents iOS zoom */
  
  /* Larger close buttons */
  .modal-close{width:36px;height:36px;font-size:18px;}
  
  /* Card grid — single column on very small screens */
  @media (max-width:380px){
    .stats-grid{grid-template-columns:1fr 1fr!important;}
    .role-grid{grid-template-columns:repeat(2,1fr)!important;}
  }
}

/* Prevent iOS rubber-band overscroll on main app */
body{overscroll-behavior:none;}
.main-content{overscroll-behavior-y:contain;}

/* Smooth momentum scrolling everywhere */
*{-webkit-overflow-scrolling:touch;}

/* Tap highlight removal for app-like feel */
*{-webkit-tap-highlight-color:transparent;}
button,a,[onclick]{cursor:pointer;user-select:none;}

/* content-visibility for off-screen sections — massive paint performance gain */
.view:not(.active){content-visibility:auto;contain-intrinsic-size:0 500px;}

/* Better font rendering on mobile */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* Warm theme accent patches */
html.warm .stat-card{border-color:rgba(224,123,0,0.15);}
html.warm .nav-item.active{background:rgba(224,123,0,0.12);color:#E07B00;}
html.warm .btn-teal{background:linear-gradient(135deg,#E07B00,#FF9A00);}
html.warm .login-name{background:linear-gradient(135deg,#2D1A00,#E07B00);-webkit-background-clip:text;background-clip:text;}



/* ═══════════════════════════════════════════════════════════════
   REDESIGNED PROFILE UI — Resident / Secretary / Chairman / Owner
   ═══════════════════════════════════════════════════════════════ */

/* ── Resident Profile Hero Card ── */
.rp-hero {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 16px;
  background: linear-gradient(145deg, #0a1628 0%, #0d1f3c 100%);
  border: 1px solid var(--bdr2);
  box-shadow: 0 20px 60px rgba(0,0,0,.5), var(--glow);
}
.rp-hero-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(0,212,170,.18) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 20%, rgba(0,160,255,.12) 0%, transparent 50%);
}
.rp-hero-inner {
  position: relative; z-index: 1;
  padding: 28px 24px 24px;
}
.rp-avatar-wrap {
  position: relative; width: fit-content; margin-bottom: 16px;
}
.rp-avatar {
  width: 76px; height: 76px; border-radius: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 900; font-family: var(--ff);
  color: #050810; letter-spacing: -1px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4), 0 0 0 3px rgba(0,212,170,.3);
  animation: profileAvatarIn .6s cubic-bezier(.34,1.4,.64,1) both;
}
.rp-avatar-ring {
  position: absolute; inset: -4px; border-radius: 26px;
  border: 2px solid transparent;
  background: linear-gradient(var(--modal-bg),var(--modal-bg)) padding-box,
              linear-gradient(135deg, var(--teal), var(--g2)) border-box;
  animation: spinRing 8s linear infinite;
}
@keyframes spinRing { to { transform: rotate(360deg); } }
@keyframes profileAvatarIn { from { transform: scale(0.5) rotate(-10deg); opacity:0; } to { transform: scale(1) rotate(0); opacity:1; } }

.rp-hero-name {
  font-family: var(--ff); font-size: 22px; font-weight: 900;
  color: #fff; letter-spacing: -.5px;
  animation: slideUpFade .5s .1s both;
}
.rp-hero-role {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; padding: 4px 12px; border-radius: 20px;
  background: rgba(0,212,170,.15); border: 1px solid rgba(0,212,170,.3);
  font-size: 11px; font-weight: 700; color: var(--teal);
  text-transform: uppercase; letter-spacing: 1.5px;
  animation: slideUpFade .5s .15s both;
}
.rp-hero-stats {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 1px; margin-top: 20px;
  background: rgba(255,255,255,.06); border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  animation: slideUpFade .5s .25s both;
}
.rp-hero-stat {
  padding: 12px 10px; text-align: center;
  background: rgba(255,255,255,.02);
  transition: background .2s;
}
.rp-hero-stat:hover { background: rgba(0,212,170,.06); }
.rp-hero-stat-val {
  font-family: var(--fnum); font-size: 16px; font-weight: 800;
  color: var(--teal); line-height: 1;
}
.rp-hero-stat-label {
  font-size: 9px; color: rgba(255,255,255,.4);
  text-transform: uppercase; letter-spacing: 1px; margin-top: 4px;
}

@keyframes slideUpFade { from { transform: translateY(12px); opacity:0; } to { transform: translateY(0); opacity:1; } }

/* ── Profile info rows ── */
.rp-info-card {
  background: var(--glass); border: 1px solid var(--bdr);
  border-radius: 20px; overflow: hidden; margin-bottom: 14px;
  animation: slideUpFade .4s .3s both;
}
.rp-info-header {
  padding: 16px 18px 12px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--bdr);
}
.rp-info-icon {
  width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.rp-info-title {
  font-family: var(--ff); font-size: 13px; font-weight: 700;
  color: var(--tx);
}
.rp-info-rows { padding: 4px 0; }
.rp-info-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 18px; border-bottom: 1px solid var(--bdr);
  transition: background .15s;
}
.rp-info-row:last-child { border-bottom: none; }
.rp-info-row:hover { background: var(--glass2); }
.rp-info-row-label {
  font-size: 11px; color: var(--tx3);
  text-transform: uppercase; letter-spacing: 1px;
}
.rp-info-row-val {
  font-size: 13px; font-weight: 600; color: var(--tx);
  text-align: right; max-width: 60%;
}

/* ── Password change card ── */
.rp-pw-card {
  background: var(--glass); border: 1px solid var(--bdr);
  border-radius: 20px; overflow: hidden; margin-bottom: 14px;
  animation: slideUpFade .4s .4s both;
}
.rp-pw-header {
  padding: 16px 18px 14px; border-bottom: 1px solid var(--bdr);
  display: flex; align-items: center; gap: 10px;
}
.rp-pw-body { padding: 18px; }
.rp-pw-input-wrap { position: relative; margin-bottom: 14px; }
.rp-pw-input-label {
  font-size: 10px; font-weight: 700; color: var(--tx3);
  text-transform: uppercase; letter-spacing: 1.5px;
  display: block; margin-bottom: 7px;
}
.rp-pw-toggle {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--tx3); cursor: pointer;
  font-size: 16px; padding: 4px; margin-top: 12px;
  transition: color .2s;
}
.rp-pw-toggle:hover { color: var(--teal); }

/* ── Member Profile Modal — Secretary/Chairman view ── */
.pm2-modal {
  width: 100%; max-width: 520px;
  background: var(--modal-bg); border-radius: 28px;
  overflow: hidden; border: 1px solid var(--bdr2);
  box-shadow: 0 40px 100px rgba(0,0,0,.8), var(--glow2);
  animation: profilePop .45s cubic-bezier(.34,1.2,.64,1);
  max-height: 92vh; overflow-y: auto;
}
.pm2-hero {
  position: relative; padding: 36px 28px 28px;
  background: linear-gradient(160deg, #060f22 0%, #0a1832 100%);
  overflow: hidden; text-align: center;
}
.pm2-hero-bg {
  position: absolute; inset: 0; pointer-events: none;
}
.pm2-hero-orb1 {
  position: absolute; width: 200px; height: 200px;
  top: -60px; left: -60px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,170,.2), transparent 70%);
  animation: orbFloat 6s ease-in-out infinite;
}
.pm2-hero-orb2 {
  position: absolute; width: 160px; height: 160px;
  bottom: -40px; right: -40px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,160,255,.15), transparent 70%);
  animation: orbFloat 8s ease-in-out infinite reverse;
}
@keyframes orbFloat { 0%,100%{transform:translate(0,0)} 50%{transform:translate(12px,8px)} }
.pm2-close {
  position: absolute; top: 16px; right: 16px; z-index: 10;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.6); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.pm2-close:hover { background: rgba(255,91,91,.15); color: var(--red); }
.pm2-av {
  width: 90px; height: 90px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 900; font-family: var(--ff);
  margin: 0 auto 14px; position: relative; z-index: 1;
  box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 0 4px rgba(255,255,255,.08);
  animation: scalePop .5s cubic-bezier(.34,1.5,.64,1) both;
}
.pm2-name {
  font-family: var(--ff); font-size: 22px; font-weight: 900;
  color: #fff; position: relative; z-index: 1;
}
.pm2-tags {
  display: flex; gap: 8px; justify-content: center;
  margin-top: 10px; position: relative; z-index: 1; flex-wrap: wrap;
}
.pm2-tag {
  padding: 4px 12px; border-radius: 20px; font-size: 11px;
  font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}
.pm2-stats-bar {
  display: grid; grid-template-columns: repeat(4,1fr);
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 20px;
}
.pm2-stat {
  padding: 14px 10px; text-align: center;
  border-right: 1px solid rgba(255,255,255,.06);
  position: relative; z-index: 1;
}
.pm2-stat:last-child { border-right: none; }
.pm2-stat-val {
  font-family: var(--fnum); font-size: 17px; font-weight: 800;
  color: var(--teal); line-height: 1;
}
.pm2-stat-lbl {
  font-size: 9px; color: rgba(255,255,255,.35);
  text-transform: uppercase; letter-spacing: .8px; margin-top: 4px;
}
.pm2-body { padding: 22px 26px; }
.pm2-section-title {
  font-family: var(--ff); font-size: 11px; font-weight: 800;
  color: var(--tx3); text-transform: uppercase; letter-spacing: 2px;
  margin-bottom: 12px; margin-top: 4px;
  display: flex; align-items: center; gap: 8px;
}
.pm2-section-title::after {
  content: ''; flex: 1; height: 1px; background: var(--bdr);
}
.pm2-info-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-bottom: 20px;
}
.pm2-info-chip {
  background: var(--glass2); border: 1px solid var(--bdr);
  border-radius: 14px; padding: 12px 14px;
  animation: slideUpFade .3s both;
  transition: border-color .2s;
}
.pm2-info-chip:hover { border-color: var(--teal); }
.pm2-info-chip-label {
  font-size: 9px; color: var(--tx3);
  text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 4px;
}
.pm2-info-chip-val {
  font-size: 13px; font-weight: 700; color: var(--tx);
}
.pm2-dues-card {
  border-radius: 16px; padding: 16px 18px; margin-bottom: 20px;
  position: relative; overflow: hidden;
}
.pm2-dues-paid {
  background: linear-gradient(135deg, rgba(0,212,170,.12), rgba(0,212,170,.06));
  border: 1px solid rgba(0,212,170,.25);
}
.pm2-dues-pending {
  background: linear-gradient(135deg, rgba(255,184,0,.1), rgba(255,91,91,.06));
  border: 1px solid rgba(255,184,0,.25);
}
.pm2-footer {
  padding: 0 26px 24px;
  display: grid; grid-template-columns: repeat(2,1fr); gap: 10px;
}
.pm2-action-btn {
  padding: 12px 16px; border-radius: 14px; border: 1px solid var(--bdr2);
  background: var(--glass2); color: var(--tx2); font-family: var(--ff);
  font-size: 12px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all .2s;
}
.pm2-action-btn:hover { border-color: var(--teal); color: var(--teal); transform: translateY(-1px); }
.pm2-action-btn.primary {
  background: linear-gradient(135deg, var(--teal), var(--g2));
  border: none; color: #050810;
}
.pm2-action-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,212,170,.3); }
.pm2-action-btn.danger:hover { border-color: var(--red); color: var(--red); }
.pm2-action-btn.gold:hover { border-color: var(--gold); color: var(--gold); }

/* ── Owner Portal Enhancements ── */
.owner-profile-card {
  background: linear-gradient(135deg, rgba(255,184,0,.08), rgba(255,140,0,.04));
  border: 1px solid rgba(255,184,0,.2); border-radius: 20px;
  padding: 20px; margin: 16px; animation: slideUpFade .4s both;
  display: flex; align-items: center; gap: 14px;
}
.owner-av {
  width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(135deg,var(--gold),#ff9500);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(255,184,0,.3);
}
.owner-info-name {
  font-family: var(--ff); font-size: 14px; font-weight: 800;
  color: var(--gold);
}
.owner-info-role {
  font-size: 10px; color: var(--tx3); margin-top: 2px;
  text-transform: uppercase; letter-spacing: 1px;
}
.onav-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 11px 20px;
  background: none; border: none; border-left: 3px solid transparent;
  color: var(--tx2); font-family: var(--ff); font-size: 13px;
  font-weight: 500; cursor: pointer; text-align: left;
  transition: all .2s; border-radius: 0 10px 10px 0;
  margin: 1px 0;
}
.onav-item:hover { background: var(--glass); color: var(--tx); border-left-color: var(--bdr2); }
.onav-item.active { background: rgba(0,212,170,.08); color: var(--teal); border-left-color: var(--teal); font-weight: 700; }
.onav-badge {
  margin-left: auto; padding: 2px 8px; border-radius: 10px;
  background: rgba(255,91,91,.15); color: var(--red);
  font-size: 10px; font-weight: 700;
}
.owner-bld-card {
  background: var(--glass); border: 1px solid var(--bdr);
  border-radius: 20px; overflow: hidden; cursor: pointer;
  transition: all .25s; position: relative;
  animation: slideUpFade .4s both;
}
.owner-bld-card:hover {
  transform: translateY(-3px);
  border-color: var(--teal);
  box-shadow: 0 12px 40px rgba(0,0,0,.3), 0 0 0 1px rgba(0,212,170,.1);
}
.owner-bld-top {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--bdr);
}
.owner-bld-accent {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.owner-bld-name {
  font-family: var(--ff); font-size: 15px; font-weight: 800;
  color: var(--tx); margin-top: 4px;
}
.owner-bld-code {
  font-size: 10px; color: var(--teal); font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
}
.owner-bld-stats {
  display: grid; grid-template-columns: repeat(3,1fr);
  border-top: 1px solid var(--bdr);
}
.owner-bld-stat {
  padding: 12px 10px; text-align: center;
  border-right: 1px solid var(--bdr);
}
.owner-bld-stat:last-child { border-right: none; }
.owner-bld-stat-val {
  font-family: var(--fnum); font-size: 18px; font-weight: 800; color: var(--tx);
}
.owner-bld-stat-lbl {
  font-size: 9px; color: var(--tx3);
  text-transform: uppercase; letter-spacing: .5px; margin-top: 2px;
}

/* Light theme profile overrides */
html.light .pm2-hero, html.light .rp-hero { background: linear-gradient(145deg,#0a1628,#0d1f3c) !important; }
html.light .rp-hero-bg { opacity: 0.8; }
html.warm .rp-hero, html.warm .pm2-hero {
  background: linear-gradient(145deg,#1a0800,#2d1200) !important;
}
html.warm .rp-hero-bg {
  background: radial-gradient(ellipse at 30% 50%, rgba(224,123,0,.2) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 20%, rgba(255,140,0,.12) 0%, transparent 50%);
}

/* Responsive */
@media (max-width:480px) {
  .pm2-modal { border-radius: 24px 24px 0 0; }
  .pm2-stats-bar { grid-template-columns: repeat(2,1fr); }
  .pm2-footer { grid-template-columns: 1fr; }
  .pm2-info-grid { grid-template-columns: 1fr; }
  .rp-hero-stats { grid-template-columns: repeat(3,1fr); }
  .owner-profile-card { flex-direction: column; text-align: center; }
}