/* ═══════════════════════════════════════════════════════════
   PWD PORTAL v2 — Complete Stylesheet
   ═══════════════════════════════════════════════════════════ */

/* ── Google Fonts ────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── CSS Variables ────────────────────────────────────────── */
:root {
  --primary:        #4f46e5;
  --primary-d:      #3730a3;
  --primary-l:      #818cf8;
  --secondary:      #7c3aed;
  --accent:         #06b6d4;
  --success:        #059669;
  --success-l:      #d1fae5;
  --danger:         #dc2626;
  --danger-l:       #fee2e2;
  --warning:        #d97706;
  --warning-l:      #fef3c7;
  --info:           #0284c7;
  --info-l:         #e0f2fe;

  --bg:             #f0f4ff;
  --bg2:            #e8edf8;
  --surface:        #ffffff;
  --surface2:       #f8fafc;
  --border:         #e2e8f0;
  --border-l:       #f1f5f9;

  --text:           #0f172a;
  --text-2:         #334155;
  --text-3:         #64748b;
  --text-4:         #94a3b8;

  --radius-xs:      4px;
  --radius-sm:      8px;
  --radius:         12px;
  --radius-lg:      16px;
  --radius-xl:      24px;
  --radius-full:    9999px;

  --shadow-xs:      0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:      0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  --shadow:         0 4px 6px rgba(0,0,0,.05),0 10px 15px rgba(79,70,229,.06);
  --shadow-md:      0 8px 24px rgba(79,70,229,.10);
  --shadow-lg:      0 20px 40px rgba(79,70,229,.15);
  --shadow-xl:      0 25px 60px rgba(79,70,229,.20);

  --transition:     all .2s ease;
  --transition-slow:all .35s ease;

  --nav-h:          64px;
}

/* ── Reset ───────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; -webkit-tap-highlight-color:transparent; }
body {
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  min-height:100vh;
  overflow-x:hidden;
}
a { color:var(--primary); text-decoration:none; transition:var(--transition); }
a:hover { color:var(--primary-d); }
img { max-width:100%; height:auto; display:block; }
button,input,textarea,select { font-family:inherit; }

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg2); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-4); }

/* ═══════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════ */
.container { width:100%; max-width:1200px; margin:0 auto; padding:0 1.25rem; }
.page-wrap { min-height:100vh; display:flex; flex-direction:column; }
main { flex:1; padding:2rem 0; }

/* ═══════════════════════════════════════════════════════════
   NAVBAR
   ═══════════════════════════════════════════════════════════ */
.navbar {
  height:var(--nav-h);
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  position:sticky; top:0; z-index:200;
  box-shadow:0 2px 20px rgba(79,70,229,.35);
}
.nav-inner {
  height:100%; display:flex; align-items:center;
  justify-content:space-between; max-width:1200px;
  margin:0 auto; padding:0 1.25rem; gap:1rem;
}
.nav-brand {
  display:flex; align-items:center; gap:.6rem;
  color:#fff; font-size:1.2rem; font-weight:800;
  white-space:nowrap; flex-shrink:0;
}
.nav-brand .brand-icon { font-size:1.75rem; }
.nav-brand span { letter-spacing:-.3px; }

.nav-links { display:flex; align-items:center; gap:.25rem; }
.nav-links a {
  display:flex; align-items:center; gap:.35rem;
  color:rgba(255,255,255,.85); font-size:.875rem; font-weight:500;
  padding:.45rem .9rem; border-radius:var(--radius-full);
  transition:var(--transition); white-space:nowrap;
}
.nav-links a:hover,.nav-links a.active {
  background:rgba(255,255,255,.18); color:#fff;
}
.nav-links a.nav-logout {
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);
}
.nav-links a.nav-logout:hover { background:rgba(255,255,255,.25); }

.nav-notif {
  position:relative; display:flex; align-items:center;
  color:rgba(255,255,255,.85); cursor:pointer;
  padding:.45rem .7rem; border-radius:var(--radius-full);
  transition:var(--transition);
}
.nav-notif:hover { background:rgba(255,255,255,.18); color:#fff; }
.notif-badge {
  position:absolute; top:4px; right:4px;
  min-width:18px; height:18px; border-radius:var(--radius-full);
  background:#ef4444; color:#fff; font-size:.65rem;
  font-weight:700; display:flex; align-items:center; justify-content:center;
  border:2px solid var(--primary);
}

.nav-user-pill {
  display:flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.15); border-radius:var(--radius-full);
  padding:.3rem .75rem .3rem .3rem; cursor:pointer;
  border:1px solid rgba(255,255,255,.25); transition:var(--transition);
}
.nav-user-pill:hover { background:rgba(255,255,255,.25); }
.nav-user-pill .pill-avatar {
  width:30px; height:30px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(255,255,255,.4);
}
.nav-user-pill .pill-name {
  color:#fff; font-size:.8rem; font-weight:600; max-width:120px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.hamburger {
  display:none; flex-direction:column; gap:5px; cursor:pointer;
  background:none; border:none; padding:.4rem;
}
.hamburger span {
  display:block; width:22px; height:2px;
  background:#fff; border-radius:2px; transition:var(--transition);
}

/* ═══════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════ */
.card {
  background:var(--surface); border-radius:var(--radius-lg);
  border:1px solid var(--border); box-shadow:var(--shadow);
  overflow:hidden; transition:var(--transition);
}
.card:hover { box-shadow:var(--shadow-md); }
.card-pad { padding:1.5rem; }
.card-header {
  padding:1.25rem 1.5rem; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; background:var(--surface2);
}
.card-title { font-size:1rem; font-weight:700; color:var(--text); display:flex; align-items:center; gap:.5rem; }
.card-body { padding:1.5rem; }
.card-footer { padding:1rem 1.5rem; border-top:1px solid var(--border); background:var(--surface2); }

/* ═══════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════ */
.form-group { margin-bottom:1.25rem; }
.form-label {
  display:flex; align-items:center; gap:.4rem;
  font-size:.8rem; font-weight:700; color:var(--text-2);
  margin-bottom:.45rem; text-transform:uppercase; letter-spacing:.5px;
}
.form-label .lbl-icon { font-size:1rem; }
.required { color:var(--danger); }

.form-control {
  width:100%; padding:.7rem 1rem;
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  font-size:.925rem; color:var(--text); background:var(--surface);
  transition:var(--transition); line-height:1.5;
}
.form-control:focus {
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(79,70,229,.1);
  background:#fff;
}
.form-control:hover:not(:focus) { border-color:var(--primary-l); }
.form-control.error { border-color:var(--danger); box-shadow:0 0 0 3px rgba(220,38,38,.08); }
.form-control::placeholder { color:var(--text-4); }
textarea.form-control { resize:vertical; min-height:90px; }

.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:560px) { .form-row { grid-template-columns:1fr; } }

.form-hint { font-size:.75rem; color:var(--text-3); margin-top:.35rem; display:flex; align-items:center; gap:.3rem; }
.form-error { font-size:.78rem; color:var(--danger); margin-top:.35rem; display:flex; align-items:center; gap:.3rem; font-weight:500; }
.form-success { font-size:.78rem; color:var(--success); margin-top:.35rem; display:flex; align-items:center; gap:.3rem; }

.input-wrap { position:relative; }
.input-wrap .input-icon { position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color:var(--text-3); font-size:1rem; pointer-events:none; }
.input-wrap .form-control { padding-left:2.6rem; }
.input-wrap .input-suffix { position:absolute; right:.75rem; top:50%; transform:translateY(-50%); cursor:pointer; color:var(--text-3); }

.pw-strength { margin-top:.4rem; }
.pw-strength-bar { height:4px; border-radius:2px; background:var(--border); overflow:hidden; }
.pw-strength-fill { height:100%; border-radius:2px; transition:var(--transition); }
.pw-strength-text { font-size:.72rem; margin-top:.25rem; font-weight:600; }

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:.45rem; padding:.65rem 1.4rem;
  border-radius:var(--radius-sm); font-size:.875rem; font-weight:600;
  cursor:pointer; border:none; transition:var(--transition);
  white-space:nowrap; text-align:center; line-height:1;
  user-select:none; position:relative; overflow:hidden;
}
.btn::after {
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,0); transition:var(--transition);
}
.btn:hover::after { background:rgba(255,255,255,.08); }
.btn:active { transform:scale(.98); }
.btn:disabled { opacity:.55; cursor:not-allowed; pointer-events:none; }

.btn-primary {
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff; box-shadow:0 4px 15px rgba(79,70,229,.3);
}
.btn-primary:hover:not(:disabled) {
  color:#fff; transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(79,70,229,.4);
}
.btn-success { background:linear-gradient(135deg,#059669,#047857); color:#fff; box-shadow:0 4px 12px rgba(5,150,105,.25); }
.btn-success:hover:not(:disabled) { color:#fff; transform:translateY(-1px); box-shadow:0 6px 16px rgba(5,150,105,.35); }
.btn-danger  { background:linear-gradient(135deg,#dc2626,#b91c1c); color:#fff; box-shadow:0 4px 12px rgba(220,38,38,.25); }
.btn-danger:hover:not(:disabled)  { color:#fff; transform:translateY(-1px); box-shadow:0 6px 16px rgba(220,38,38,.35); }
.btn-warning { background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff; }
.btn-warning:hover:not(:disabled) { color:#fff; transform:translateY(-1px); }
.btn-info    { background:linear-gradient(135deg,#0ea5e9,#0284c7); color:#fff; }
.btn-info:hover:not(:disabled) { color:#fff; transform:translateY(-1px); }

.btn-outline { background:transparent; color:var(--primary); border:1.5px solid var(--primary); }
.btn-outline:hover:not(:disabled) { background:var(--primary); color:#fff; }
.btn-ghost { background:transparent; color:var(--text-2); border:1.5px solid var(--border); }
.btn-ghost:hover:not(:disabled) { background:var(--bg2); border-color:var(--text-4); }
.btn-white { background:#fff; color:var(--primary); border:1.5px solid rgba(255,255,255,.3); }
.btn-white:hover { background:rgba(255,255,255,.9); color:var(--primary-d); }

.btn-sm  { padding:.45rem .9rem; font-size:.8rem; border-radius:var(--radius-xs); }
.btn-lg  { padding:.85rem 2rem; font-size:1rem; border-radius:var(--radius-sm); }
.btn-xl  { padding:1rem 2.5rem; font-size:1.05rem; border-radius:var(--radius); }
.btn-full { width:100%; }
.btn-icon { padding:.6rem; aspect-ratio:1; }

/* ── Loading Spinner ─────────────────────────────────────── */
.spinner { display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════
   BADGES & STATUS
   ═══════════════════════════════════════════════════════════ */
.badge {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.2rem .7rem; border-radius:var(--radius-full);
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
}
.badge-pending  { background:var(--warning-l); color:#92400e; }
.badge-approved { background:var(--success-l); color:#065f46; }
.badge-rejected { background:var(--danger-l);  color:#991b1b; }
.badge-info     { background:var(--info-l);    color:#075985; }
.badge-primary  { background:#ede9fe;           color:#4c1d95; }

.status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.dot-pending  { background:var(--warning); box-shadow:0 0 0 3px var(--warning-l); }
.dot-approved { background:var(--success); box-shadow:0 0 0 3px var(--success-l); animation:pulse 2s infinite; }
.dot-rejected { background:var(--danger);  box-shadow:0 0 0 3px var(--danger-l); }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 3px rgba(5,150,105,.2)} 50%{box-shadow:0 0 0 6px rgba(5,150,105,.1)} }

/* ═══════════════════════════════════════════════════════════
   FLASH MESSAGES
   ═══════════════════════════════════════════════════════════ */
.flash {
  display:flex; align-items:flex-start; gap:.75rem;
  padding:1rem 1.25rem; border-radius:var(--radius-sm);
  margin-bottom:1.5rem; font-size:.875rem; font-weight:500;
  animation:slideDown .3s ease; line-height:1.5; border:1px solid transparent;
}
@keyframes slideDown { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:none} }
.flash-success { background:var(--success-l); color:#065f46; border-color:#a7f3d0; }
.flash-error   { background:var(--danger-l);  color:#991b1b; border-color:#fca5a5; }
.flash-warning { background:var(--warning-l); color:#92400e; border-color:#fde68a; }
.flash-info    { background:var(--info-l);    color:#075985; border-color:#7dd3fc; }

/* ═══════════════════════════════════════════════════════════
   AUTH PAGES
   ═══════════════════════════════════════════════════════════ */
.auth-bg {
  min-height:100vh;
  background:linear-gradient(135deg,#1e1b4b 0%,#4f46e5 40%,#7c3aed 70%,#a855f7 100%);
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem; position:relative; overflow:hidden;
}
.auth-bg::before {
  content:''; position:absolute; top:-50%; left:-50%;
  width:200%; height:200%;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.03) 0%,transparent 60%);
  animation:rotateBg 20s linear infinite;
}
@keyframes rotateBg { to { transform:rotate(360deg); } }

.auth-card {
  background:#fff; border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl); width:100%; max-width:500px;
  overflow:hidden; position:relative; z-index:1;
}
.auth-header {
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  padding:2.5rem 2rem 2rem; text-align:center; color:#fff;
  position:relative; overflow:hidden;
}
.auth-header::before {
  content:''; position:absolute; top:-30px; right:-30px;
  width:120px; height:120px; border-radius:50%;
  background:rgba(255,255,255,.07);
}
.auth-header::after {
  content:''; position:absolute; bottom:-40px; left:-20px;
  width:100px; height:100px; border-radius:50%;
  background:rgba(255,255,255,.05);
}
.auth-logo { font-size:3.5rem; margin-bottom:.75rem; position:relative; z-index:1; }
.auth-title { font-size:1.75rem; font-weight:800; margin-bottom:.35rem; position:relative; z-index:1; }
.auth-subtitle { color:rgba(255,255,255,.75); font-size:.9rem; position:relative; z-index:1; }
.auth-body { padding:2rem; }

.test-creds {
  background:linear-gradient(135deg,#eff6ff,#f0f9ff);
  border:1px solid #bae6fd; border-radius:var(--radius-sm);
  padding:.85rem 1rem; margin-bottom:1.25rem; font-size:.8rem;
}
.test-creds strong { color:#0369a1; display:block; margin-bottom:.4rem; }
.test-creds span { color:#0284c7; }

/* ═══════════════════════════════════════════════════════════
   REGISTRATION STEPS
   ═══════════════════════════════════════════════════════════ */
.reg-bg {
  min-height:100vh;
  background:linear-gradient(135deg,#1e1b4b 0%,#4f46e5 40%,#7c3aed 70%,#a855f7 100%);
  padding:2rem 1rem; display:flex; align-items:flex-start; justify-content:center;
}
.reg-card { background:#fff; border-radius:var(--radius-xl); box-shadow:var(--shadow-xl); width:100%; max-width:680px; overflow:hidden; }
.reg-header { background:linear-gradient(135deg,var(--primary),var(--secondary)); padding:2rem; text-align:center; color:#fff; }
.reg-header .reg-logo { font-size:3rem; margin-bottom:.5rem; }
.reg-header h1 { font-size:1.6rem; font-weight:800; }
.reg-header p { color:rgba(255,255,255,.75); font-size:.875rem; }
.reg-body { padding:2rem; }

.steps-bar { display:flex; margin-bottom:2rem; position:relative; }
.steps-bar::before {
  content:''; position:absolute; top:16px; left:5%; right:5%;
  height:2px; background:var(--border); z-index:0;
}
.step-item { flex:1; text-align:center; position:relative; z-index:1; }
.step-num {
  width:32px; height:32px; border-radius:50%;
  background:var(--border); color:var(--text-3);
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:700; margin:0 auto .4rem;
  transition:var(--transition); border:2px solid var(--border);
}
.step-item.active .step-num { background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 0 0 4px rgba(79,70,229,.15); }
.step-item.done .step-num   { background:var(--success); color:#fff; border-color:var(--success); }
.step-label { font-size:.7rem; color:var(--text-3); font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.step-item.active .step-label { color:var(--primary); }
.step-item.done .step-label   { color:var(--success); }

.section-divider {
  display:flex; align-items:center; gap:.75rem;
  font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:1px; color:var(--primary); margin:1.5rem 0 1.25rem;
}
.section-divider::before,.section-divider::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(to right,transparent,rgba(79,70,229,.2));
}
.section-divider::after { background:linear-gradient(to left,transparent,rgba(79,70,229,.2)); }

/* ═══════════════════════════════════════════════════════════
   UPLOAD & CAMERA
   ═══════════════════════════════════════════════════════════ */
.upload-zone {
  border:2px dashed var(--border); border-radius:var(--radius);
  padding:1.75rem; text-align:center; cursor:pointer;
  transition:var(--transition); background:var(--surface2);
  position:relative;
}
.upload-zone:hover { border-color:var(--primary); background:#f5f3ff; }
.upload-zone.dragover { border-color:var(--primary); background:#ede9fe; }
.upload-zone input[type=file] {
  position:absolute; inset:0; opacity:0;
  cursor:pointer; width:100%; height:100%;
}
.upload-icon { font-size:2.5rem; margin-bottom:.6rem; }
.upload-zone h4 { font-size:.9rem; font-weight:600; color:var(--text-2); margin-bottom:.3rem; }
.upload-zone p { font-size:.78rem; color:var(--text-3); }
.upload-preview-img {
  max-width:100%; max-height:200px; border-radius:var(--radius-sm);
  margin:.75rem auto 0; object-fit:cover; display:none;
  border:2px solid var(--primary); box-shadow:var(--shadow);
}

.camera-wrap { border-radius:var(--radius); overflow:hidden; background:#000; }
#camera-feed { width:100%; display:block; max-height:270px; object-fit:cover; }
#cam-canvas  { display:none; }
.selfie-result { width:100%; border-radius:var(--radius-sm); display:none; border:2px solid var(--success); }
.cam-btns { display:flex; gap:.6rem; margin-top:.75rem; flex-wrap:wrap; }

/* ═══════════════════════════════════════════════════════════
   DASHBOARD LAYOUT
   ═══════════════════════════════════════════════════════════ */
.dash-grid { display:grid; grid-template-columns:300px 1fr; gap:1.5rem; align-items:start; }
@media(max-width:900px) { .dash-grid { grid-template-columns:1fr; } }

/* ── Profile Sidebar Card ────────────────────────────────── */
.profile-hero {
  background:linear-gradient(145deg,var(--primary),var(--secondary));
  border-radius:var(--radius-lg); padding:2rem 1.5rem;
  text-align:center; color:#fff; position:relative; overflow:hidden;
}
.profile-hero::before {
  content:''; position:absolute; top:-40px; right:-40px;
  width:130px; height:130px; border-radius:50%;
  background:rgba(255,255,255,.07);
}
.profile-hero::after {
  content:''; position:absolute; bottom:-50px; left:-30px;
  width:110px; height:110px; border-radius:50%;
  background:rgba(255,255,255,.05);
}
.profile-avatar-wrap {
  position:relative; display:inline-block;
  margin-bottom:1rem; z-index:1;
}
.profile-avatar {
  width:90px; height:90px; border-radius:50%;
  border:4px solid rgba(255,255,255,.4);
  object-fit:cover; box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.profile-avatar-init {
  width:90px; height:90px; border-radius:50%;
  background:rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center;
  font-size:2.2rem; font-weight:800; color:#fff;
  border:4px solid rgba(255,255,255,.4);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.profile-cam-btn {
  position:absolute; bottom:2px; right:2px;
  width:28px; height:28px; border-radius:50%;
  background:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; box-shadow:0 2px 8px rgba(0,0,0,.2);
  transition:var(--transition);
}
.profile-cam-btn:hover { transform:scale(1.1); background:var(--primary-l); }

.profile-name { font-size:1.15rem; font-weight:800; margin-bottom:.2rem; z-index:1; position:relative; }
.profile-email { font-size:.78rem; opacity:.75; margin-bottom:.75rem; z-index:1; position:relative; }
.profile-pwd-id {
  background:rgba(255,255,255,.15); border-radius:var(--radius-full);
  padding:.3rem .85rem; font-size:.72rem; font-weight:700;
  display:inline-block; z-index:1; position:relative;
  border:1px solid rgba(255,255,255,.2);
}

/* ── Sidebar Nav ─────────────────────────────────────────── */
.sidebar-menu { list-style:none; display:flex; flex-direction:column; gap:.2rem; }
.sidebar-menu a {
  display:flex; align-items:center; gap:.75rem;
  padding:.75rem 1rem; border-radius:var(--radius-sm);
  color:var(--text-3); font-size:.875rem; font-weight:500;
  transition:var(--transition);
}
.sidebar-menu a:hover { background:var(--bg); color:var(--text); }
.sidebar-menu a.active {
  background:linear-gradient(135deg,rgba(79,70,229,.08),rgba(124,58,237,.08));
  color:var(--primary); font-weight:700;
}
.sidebar-menu a .menu-icon { font-size:1.1rem; width:24px; flex-shrink:0; text-align:center; }

/* ── Stat Cards ─────────────────────────────────────────── */
.stats-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.stat-card {
  background:var(--surface); border-radius:var(--radius-lg);
  border:1px solid var(--border); box-shadow:var(--shadow-xs);
  padding:1.25rem; text-align:center; transition:var(--transition);
  position:relative; overflow:hidden;
}
.stat-card::before {
  content:''; position:absolute; top:-20px; right:-20px;
  width:70px; height:70px; border-radius:50%;
  background:rgba(79,70,229,.05);
}
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.stat-icon { font-size:1.75rem; margin-bottom:.5rem; }
.stat-value { font-size:1.75rem; font-weight:800; color:var(--primary); line-height:1; }
.stat-label { font-size:.72rem; color:var(--text-3); font-weight:600; text-transform:uppercase; letter-spacing:.5px; margin-top:.3rem; }

/* ── Info Grid ──────────────────────────────────────────── */
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:480px) { .info-grid { grid-template-columns:1fr; } }
.info-item { display:flex; flex-direction:column; gap:.25rem; }
.info-label { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--text-3); }
.info-value { font-size:.9rem; font-weight:600; color:var(--text); }

/* ═══════════════════════════════════════════════════════════
   PAGE TABS
   ═══════════════════════════════════════════════════════════ */
.page-tabs {
  display:flex; gap:0; border-bottom:2px solid var(--border);
  margin-bottom:1.5rem; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.page-tab {
  display:flex; align-items:center; gap:.4rem;
  padding:.75rem 1.25rem; background:none; border:none;
  font-size:.875rem; font-weight:600; color:var(--text-3);
  cursor:pointer; border-bottom:3px solid transparent;
  margin-bottom:-2px; white-space:nowrap; transition:var(--transition);
}
.page-tab:hover { color:var(--text); }
.page-tab.active { color:var(--primary); border-bottom-color:var(--primary); }
.tab-pane { display:none; }
.tab-pane.active { display:block; animation:fadeUp .25s ease; }
@keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* ═══════════════════════════════════════════════════════════
   PHOTOS GALLERY
   ═══════════════════════════════════════════════════════════ */
.photo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1rem; }
.photo-item {
  position:relative; aspect-ratio:1; border-radius:var(--radius);
  overflow:hidden; cursor:pointer; group:true;
  box-shadow:var(--shadow-xs); border:1px solid var(--border);
  transition:var(--transition);
}
.photo-item:hover { transform:scale(1.03); box-shadow:var(--shadow-md); }
.photo-item img { width:100%; height:100%; object-fit:cover; transition:var(--transition); }
.photo-item:hover img { transform:scale(1.08); }
.photo-overlay {
  position:absolute; inset:0; background:rgba(0,0,0,0);
  display:flex; align-items:center; justify-content:center;
  transition:var(--transition); flex-direction:column; gap:.4rem;
}
.photo-item:hover .photo-overlay { background:rgba(0,0,0,.45); }
.photo-overlay span { color:#fff; font-size:1.5rem; opacity:0; transform:scale(.7); transition:var(--transition); }
.photo-item:hover .photo-overlay span { opacity:1; transform:scale(1); }
.photo-caption { font-size:.7rem; color:rgba(255,255,255,.9); opacity:0; transition:var(--transition); text-align:center; padding:0 .5rem; }
.photo-item:hover .photo-caption { opacity:1; }
.photo-delete {
  position:absolute; top:.4rem; right:.4rem; width:26px; height:26px;
  background:rgba(220,38,38,.85); border:none; border-radius:50%;
  color:#fff; font-size:.75rem; cursor:pointer; display:none;
  align-items:center; justify-content:center; z-index:2;
  transition:var(--transition);
}
.photo-item:hover .photo-delete { display:flex; }
.photo-delete:hover { background:var(--danger); transform:scale(1.1); }

.photo-upload-tile {
  aspect-ratio:1; border-radius:var(--radius); border:2px dashed var(--border);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; transition:var(--transition); background:var(--surface2);
  position:relative;
}
.photo-upload-tile:hover { border-color:var(--primary); background:#f5f3ff; }
.photo-upload-tile input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.photo-upload-tile span { font-size:2rem; margin-bottom:.4rem; }
.photo-upload-tile p { font-size:.75rem; color:var(--text-3); text-align:center; }

/* ═══════════════════════════════════════════════════════════
   COMMUNITY CHAT
   ═══════════════════════════════════════════════════════════ */
.chat-container {
  display:flex; flex-direction:column;
  height:calc(100vh - var(--nav-h) - 180px);
  min-height:400px; max-height:680px;
  background:var(--surface); border-radius:var(--radius-lg);
  border:1px solid var(--border); box-shadow:var(--shadow);
  overflow:hidden;
}
.chat-header {
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  padding:1rem 1.25rem; color:#fff;
  display:flex; align-items:center; gap:.75rem; flex-shrink:0;
}
.chat-live-dot {
  width:10px; height:10px; background:#4ade80; border-radius:50%;
  box-shadow:0 0 0 3px rgba(74,222,128,.3);
  animation:livePulse 2s infinite;
}
@keyframes livePulse { 0%,100%{box-shadow:0 0 0 3px rgba(74,222,128,.3)} 50%{box-shadow:0 0 0 6px rgba(74,222,128,.1)} }
.chat-header-info h3 { font-size:.95rem; font-weight:700; margin:0; }
.chat-header-info p  { font-size:.72rem; opacity:.75; margin:0; }

.chat-messages-wrap { flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.75rem; }
.chat-messages-wrap::-webkit-scrollbar { width:4px; }
.chat-messages-wrap::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.chat-msg { display:flex; gap:.6rem; align-items:flex-end; max-width:100%; }
.chat-msg.own { flex-direction:row-reverse; }
.chat-msg-avatar {
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  object-fit:cover; border:2px solid var(--border);
}
.chat-msg-avatar-init {
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.75rem; font-weight:700;
}
.chat-bubble-wrap { display:flex; flex-direction:column; gap:.2rem; max-width:72%; }
.chat-msg.own .chat-bubble-wrap { align-items:flex-end; }
.chat-sender { font-size:.7rem; font-weight:700; color:var(--primary); padding:0 .5rem; }
.chat-bubble {
  padding:.6rem .95rem; border-radius:18px;
  font-size:.875rem; line-height:1.55; word-break:break-word;
  position:relative;
}
.chat-msg:not(.own) .chat-bubble {
  background:var(--bg2); color:var(--text);
  border-bottom-left-radius:4px;
}
.chat-msg.own .chat-bubble {
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff; border-bottom-right-radius:4px;
}
.chat-time { font-size:.65rem; color:var(--text-4); padding:0 .5rem; }
.chat-msg.own .chat-time { color:rgba(255,255,255,.65); }

.chat-typing { display:flex; align-items:center; gap:.4rem; padding:.4rem .75rem; }
.typing-dot { width:7px; height:7px; border-radius:50%; background:var(--text-4); animation:typingBounce 1s infinite; }
.typing-dot:nth-child(2){animation-delay:.15s}
.typing-dot:nth-child(3){animation-delay:.3s}
@keyframes typingBounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }

.chat-date-divider {
  display:flex; align-items:center; gap:.75rem;
  font-size:.7rem; color:var(--text-4); font-weight:600;
  margin:.25rem 0;
}
.chat-date-divider::before,.chat-date-divider::after { content:''; flex:1; height:1px; background:var(--border); }

.chat-input-wrap { border-top:1px solid var(--border); padding:.85rem 1rem; background:var(--surface2); flex-shrink:0; }
.chat-input-row { display:flex; gap:.6rem; align-items:flex-end; }
.chat-textarea {
  flex:1; padding:.65rem 1rem; border:1.5px solid var(--border);
  border-radius:var(--radius-full); font-size:.875rem; resize:none;
  max-height:100px; font-family:inherit; line-height:1.4;
  transition:var(--transition); background:#fff;
}
.chat-textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(79,70,229,.1); }
.chat-send {
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff; border:none; cursor:pointer; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  transition:var(--transition); box-shadow:0 4px 12px rgba(79,70,229,.3);
}
.chat-send:hover { transform:scale(1.08); box-shadow:0 6px 16px rgba(79,70,229,.4); }
.chat-char { font-size:.7rem; color:var(--text-4); text-align:right; margin-top:.3rem; }
.chat-locked {
  flex:1; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:.5rem; padding:2rem; color:var(--text-3);
}
.chat-empty { text-align:center; padding:3rem 1rem; color:var(--text-3); }
.chat-empty .empty-icon { font-size:3rem; margin-bottom:.75rem; opacity:.4; }

/* ═══════════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════════ */
.modal-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,.65);
  z-index:500; display:none; align-items:center; justify-content:center;
  padding:1rem; backdrop-filter:blur(4px);
}
.modal-backdrop.open { display:flex; animation:fadeIn .2s ease; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal {
  background:#fff; border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl); width:100%; max-width:550px;
  animation:modalIn .25s ease; overflow:hidden;
  max-height:90vh; display:flex; flex-direction:column;
}
@keyframes modalIn { from{opacity:0;transform:scale(.95) translateY(10px)} to{opacity:1;transform:none} }
.modal-header {
  padding:1.25rem 1.5rem; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  background:var(--surface2);
}
.modal-title { font-size:1rem; font-weight:700; }
.modal-close { background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--text-3); width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:var(--transition); }
.modal-close:hover { background:var(--bg2); color:var(--text); }
.modal-body { padding:1.5rem; overflow-y:auto; }
.modal-footer { padding:1rem 1.5rem; border-top:1px solid var(--border); display:flex; gap:.75rem; justify-content:flex-end; background:var(--surface2); }

/* ═══════════════════════════════════════════════════════════
   TABLE
   ═══════════════════════════════════════════════════════════ */
.tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius-sm); }
table { width:100%; border-collapse:collapse; font-size:.875rem; }
thead th {
  background:var(--surface2); color:var(--text-3);
  font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.6px; padding:.85rem 1rem;
  border-bottom:1px solid var(--border); text-align:left; white-space:nowrap;
}
tbody td { padding:.9rem 1rem; border-bottom:1px solid var(--border-l); vertical-align:middle; }
tbody tr:last-child td { border-bottom:none; }
tbody tr { transition:var(--transition); }
tbody tr:hover { background:var(--bg); }
.tbl-avatar { display:flex; align-items:center; gap:.75rem; }
.tbl-avatar img,
.tbl-avatar .tbl-init {
  width:40px; height:40px; border-radius:var(--radius-sm);
  object-fit:cover; flex-shrink:0; border:1px solid var(--border);
}
.tbl-avatar .tbl-init {
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff; font-size:.9rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
}
.tbl-name { font-weight:600; font-size:.875rem; }
.tbl-sub  { font-size:.75rem; color:var(--text-3); }

/* ═══════════════════════════════════════════════════════════
   NOTIFICATION PANEL
   ═══════════════════════════════════════════════════════════ */
.notif-panel {
  position:absolute; top:calc(var(--nav-h) - 8px); right:1rem;
  width:360px; max-width:calc(100vw - 2rem);
  background:#fff; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xl); border:1px solid var(--border);
  z-index:300; display:none; overflow:hidden;
  animation:modalIn .2s ease;
}
.notif-panel.open { display:block; }
.notif-panel-header { padding:1rem 1.25rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; background:var(--surface2); }
.notif-panel-header h4 { font-size:.9rem; font-weight:700; }
.notif-item { padding:.85rem 1.25rem; border-bottom:1px solid var(--border-l); transition:var(--transition); cursor:pointer; display:flex; gap:.75rem; align-items:flex-start; }
.notif-item:hover { background:var(--bg); }
.notif-item.unread { background:linear-gradient(135deg,rgba(79,70,229,.03),rgba(124,58,237,.03)); }
.notif-item .notif-icon { font-size:1.4rem; flex-shrink:0; }
.notif-item-title { font-size:.8rem; font-weight:700; color:var(--text); }
.notif-item-msg   { font-size:.75rem; color:var(--text-3); margin-top:.2rem; }
.notif-item-time  { font-size:.7rem; color:var(--text-4); margin-top:.3rem; }
.unread-dot { width:8px; height:8px; background:var(--primary); border-radius:50%; flex-shrink:0; margin-top:5px; }

/* ═══════════════════════════════════════════════════════════
   PENDING / APPROVED BANNERS
   ═══════════════════════════════════════════════════════════ */
.status-banner {
  border-radius:var(--radius-lg); padding:1.5rem;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  margin-bottom:1.5rem;
}
.status-banner.pending  { background:linear-gradient(135deg,#fffbeb,#fef3c7); border:1px solid #fde68a; }
.status-banner.rejected { background:linear-gradient(135deg,#fef2f2,#fee2e2); border:1px solid #fca5a5; }
.status-banner.approved { background:linear-gradient(135deg,#f0fdf4,#dcfce7); border:1px solid #86efac; }
.status-banner .sb-icon { font-size:2.5rem; flex-shrink:0; }
.status-banner .sb-body h3 { font-size:1rem; font-weight:700; margin-bottom:.3rem; }
.status-banner .sb-body p { font-size:.875rem; }
.status-banner.pending  .sb-body h3 { color:#92400e; }
.status-banner.pending  .sb-body p  { color:#b45309; }
.status-banner.rejected .sb-body h3 { color:#991b1b; }
.status-banner.rejected .sb-body p  { color:#b91c1c; }
.status-banner.approved .sb-body h3 { color:#166534; }
.status-banner.approved .sb-body p  { color:#15803d; }

/* ═══════════════════════════════════════════════════════════
   ADMIN NAVBAR
   ═══════════════════════════════════════════════════════════ */
.admin-navbar .navbar {
  background:linear-gradient(135deg,#0f172a,#1e293b);
}

/* ═══════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════ */
.toast-wrap { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999; display:flex; flex-direction:column; gap:.6rem; pointer-events:none; }
.toast {
  pointer-events:auto; min-width:260px; max-width:380px;
  padding:.85rem 1.1rem; border-radius:var(--radius);
  font-size:.875rem; font-weight:500;
  display:flex; align-items:center; gap:.6rem;
  box-shadow:var(--shadow-lg); animation:toastIn .3s ease;
  color:#fff;
}
@keyframes toastIn { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:none} }
.toast-success { background:linear-gradient(135deg,#059669,#047857); }
.toast-error   { background:linear-gradient(135deg,#dc2626,#b91c1c); }
.toast-warning { background:linear-gradient(135deg,#d97706,#b45309); }
.toast-info    { background:linear-gradient(135deg,#0284c7,#0369a1); }
.toast-close   { margin-left:auto; background:none; border:none; color:rgba(255,255,255,.7); cursor:pointer; font-size:1rem; }

/* ═══════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════ */
.flex { display:flex; }
.flex-col { flex-direction:column; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.justify-center { justify-content:center; }
.gap-1 { gap:.5rem; }
.gap-2 { gap:1rem; }
.gap-3 { gap:1.5rem; }
.flex-wrap { flex-wrap:wrap; }
.flex-1 { flex:1; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:480px){.grid-2{grid-template-columns:1fr}}
.w-full { width:100%; }
.text-center { text-align:center; }
.text-right  { text-align:right; }
.font-bold { font-weight:700; }
.font-semibold { font-weight:600; }
.text-sm { font-size:.875rem; }
.text-xs { font-size:.75rem; }
.text-muted { color:var(--text-3); }
.text-primary { color:var(--primary); }
.text-success { color:var(--success); }
.text-danger  { color:var(--danger); }
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.p-0{padding:0}
.hidden { display:none !important; }
.show { display:block !important; }

/* ═══════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════ */
.empty-state { text-align:center; padding:3rem 1rem; }
.empty-state .empty-icon { font-size:3.5rem; opacity:.35; margin-bottom:1rem; }
.empty-state h3 { color:var(--text-3); font-size:1.05rem; margin-bottom:.5rem; }
.empty-state p  { color:var(--text-4); font-size:.875rem; }

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
.footer {
  background:var(--surface); border-top:1px solid var(--border);
  padding:1.25rem; text-align:center;
  color:var(--text-3); font-size:.8rem;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media(max-width:640px) {
  .hamburger { display:flex; }
  .nav-links {
    display:none; position:absolute; top:var(--nav-h); left:0; right:0;
    background:linear-gradient(135deg,#3730a3,#6d28d9);
    padding:.75rem; flex-direction:column; align-items:stretch;
    box-shadow:0 8px 24px rgba(0,0,0,.2); z-index:199;
  }
  .nav-links.open { display:flex; }
  .nav-links a { padding:.85rem 1rem; border-radius:var(--radius-sm); font-size:.95rem; }
  .navbar { position:relative; }
  .notif-panel { right:.5rem; width:calc(100vw - 1rem); }
  .chat-container { height:calc(100vh - var(--nav-h) - 140px); }
  .reg-body { padding:1.25rem; }
  .auth-body { padding:1.5rem; }
  main { padding:1rem 0; }
}
@media(max-width:480px) {
  .card-pad,.card-body { padding:1rem; }
  .card-header { padding:1rem; }
  .stats-row { grid-template-columns:1fr 1fr; }
  .info-grid { grid-template-columns:1fr; }
}