/* ── FONTS ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Syne:wght@600;700;800&display=swap');

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

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
    --primary:    #004e7a;
    --secondary:  #00b4d8;
    --accent:     #0ecfef;
    --light:      #90e0ef;
    --dark:       #003049;
    --text:       #003049;
    --text-muted: #5f7485;
    --gray:       #6c757d;
    --gray-light: #94a3b8;
    --bg:         #daeeff;
    --success:    #16a34a;
    --danger:     #dc2626;
    --warning:    #d97706;
    --card-bg:    rgba(227,244,255,0.96);
    --btn-shadow:       0 4px 16px rgba(0,78,122,0.28);
    --btn-shadow-hover: 0 8px 24px rgba(0,180,216,0.4);
    --input-border: rgba(0,100,160,0.2);
    --input-bg:     rgba(245,251,255,0.95);
    --table-bg:     rgba(230,245,255,0.95);
    --footer-color: white;
    --border:       rgba(0,78,122,0.18);
    --surface:      rgba(220,240,255,0.97);
    --surface2:     #c8e3f8;
    --shadow-sm:    0 1px 6px rgba(0,0,0,0.07), 0 2px 12px rgba(0,0,0,0.05);
    --shadow-md:    0 4px 20px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
    --shadow-lg:    0 12px 40px rgba(0,0,0,0.15), 0 4px 12px rgba(0,0,0,0.08);
    --shadow-xl:    0 24px 64px rgba(0,0,0,0.20);
    --radius-sm:    8px;
    --radius-md:    12px;
    --radius-lg:    16px;
    --radius-xl:    20px;
    --radius-2xl:   28px;
    --transition:   0.22s cubic-bezier(0.4,0,0.2,1);
    --nav-h:        64px;
}

/* ── DARK MODE ─────────────────────────────────────────────── */
[data-theme="dark"] {
    --primary:    #22d3ee;
    --secondary:  #7dd3fc;
    --accent:     #38bdf8;
    --dark:       #e2f0f8;
    --text:       #e2f0f8;
    --text-muted: #94a3b8;
    --gray:       #94a3b8;
    --gray-light: #475569;
    --card-bg:    rgba(13,22,35,0.98);
    --btn-shadow:       0 4px 16px rgba(0,180,216,0.2);
    --btn-shadow-hover: 0 8px 24px rgba(125,211,252,0.3);
    --input-border: #1e3a52;
    --input-bg:     #0a1928;
    --table-bg:     #0a1928;
    --footer-color: #94a3b8;
    --border:       rgba(34,211,238,0.12);
    --surface:      rgba(13,22,35,0.98);
    --surface2:     #060e18;
    --shadow-sm:    0 1px 6px rgba(0,0,0,0.5), 0 2px 12px rgba(0,0,0,0.3);
    --shadow-md:    0 4px 20px rgba(0,0,0,0.4);
    --shadow-lg:    0 12px 40px rgba(0,0,0,0.5);
    --shadow-xl:    0 24px 64px rgba(0,0,0,0.6);
}
[data-theme="dark"] body {
    background: linear-gradient(135deg,#060e18 0%,#0a1928 40%,#0d1f32 100%);
    color: #e2f0f8;
}
[data-theme="dark"] .glass-card,[data-theme="dark"] .hero,[data-theme="dark"] .card,
[data-theme="dark"] .location-card,[data-theme="dark"] .stat-box {
    background:var(--card-bg);
    border-color:rgba(34,211,238,0.1);
}
[data-theme="dark"] .log-container { background:var(--table-bg); }
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea {
    background:var(--input-bg); border-color:var(--input-border); color:var(--dark);
}
[data-theme="dark"] label { color:var(--dark); }
[data-theme="dark"] table th { background:rgba(0,0,0,0.3) !important; color:#94a3b8 !important; }
[data-theme="dark"] table td { border-color:#1e3a52; color:var(--dark); }
[data-theme="dark"] tr { background:var(--table-bg); }
[data-theme="dark"] .modal-content-custom { background:#0d1624; }
[data-theme="dark"] .modal-content-custom p { color:#94a3b8; }
[data-theme="dark"] .profile-divider { background:#1e3a52; }
[data-theme="dark"] .profile-details p { border-color:rgba(255,255,255,0.06); }
[data-theme="dark"] .hero { background:rgba(0,20,40,0.7) !important; }
[data-theme="dark"] .hero p { color:#94a3b8 !important; }
[data-theme="dark"] .auth-card { background:rgba(10,20,32,0.98); }
[data-theme="dark"] .otp-box { border-color:#1e3a52; }
[data-theme="dark"] .info-alert { background:rgba(34,211,238,0.08); color:#94a3b8; }
[data-theme="dark"] nav { background:rgba(6,14,24,0.95); border-color:rgba(34,211,238,0.12); }
[data-theme="dark"] .mobile-nav-drawer { background:rgba(6,14,24,0.99); }
[data-theme="dark"] .location-card { background:#0a1928; }
[data-theme="dark"] .location-card small { color:#94a3b8; }
[data-theme="dark"] .stat-box p { color:#94a3b8; }
[data-theme="dark"] .auth-footer { color:rgba(255,255,255,0.82); }
[data-theme="dark"] .profile-access { background:rgba(34,211,238,0.1); }
[data-theme="dark"] .pm-chip { background:rgba(34,211,238,0.06); border-color:rgba(34,211,238,0.14); color:#94a3b8; }
[data-theme="dark"] .filter-bar { background:rgba(13,22,35,0.98); border-color:rgba(34,211,238,0.12); }
[data-theme="dark"] .staff-alert-bar { background:rgba(217,119,6,0.12); color:#fbbf24; border-color:rgba(217,119,6,0.3); }
[data-theme="dark"] .hotkey-badge { background:rgba(34,211,238,0.08); border-color:rgba(34,211,238,0.2); color:#7dd3fc; }

html { scroll-behavior:smooth; }

/* ── SCROLLBAR ──────────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(0,78,122,0.18); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:rgba(0,78,122,0.35); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background:rgba(34,211,238,0.15); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background:rgba(34,211,238,0.3); }

/* ── BODY ────────────────────────────────────────────────────── */
body {
    font-family:'DM Sans', 'Segoe UI', sans-serif;
    background: linear-gradient(135deg, #005f96, #0093b8, #0ecfef, #005f96);
    background-size: 400% 400%;
    animation: wave 25s ease infinite;
    color: var(--dark);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.6;
    width: 100%;
    max-width: 100vw;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { font-family:'Syne', sans-serif; letter-spacing:-0.025em; line-height:1.2; }
.logo, button { font-family:'DM Sans', sans-serif; }
.nav-links a { font-family:'DM Sans', sans-serif; }
@keyframes wave {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.hidden { display:none !important; }
.eye-icon, .eye-off-icon { display:block; }
.eye-icon.hidden, .eye-off-icon.hidden { display:none !important; }

/* ── NAVIGATION ─────────────────────────────────────────────── */
nav {
    background: rgba(210,237,255,0.90);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    padding: 0 1.5rem;
    height: var(--nav-h);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 1px 0 rgba(0,78,122,0.08), 0 4px 24px rgba(0,78,122,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.6);
    animation: slideDown 0.6s cubic-bezier(0.4,0,0.2,1);
}
@keyframes slideDown { from{transform:translateY(-100%);opacity:0} to{transform:translateY(0);opacity:1} }

.nav-container {
    max-width: 1200px; margin: auto;
    display: flex; flex-wrap: nowrap;
    align-items: center; gap: 0; height: 100%;
}
.logo { display:flex; align-items:center; flex-shrink:0; text-decoration:none; }
.logo img { height:48px; transition:transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.3s; }
.logo img:hover { transform:scale(1.05); }

.nav-links { display:flex; gap:0.15rem; align-items:center; flex-wrap:nowrap; }
.nav-links a {
    text-decoration:none; color:var(--gray);
    padding:0.4rem 0.85rem; border-radius:var(--radius-sm);
    font-weight:500; font-size:0.875rem;
    transition:all var(--transition); white-space:nowrap;
    position:relative; display:flex; align-items:center; gap:5px;
}
.nav-links a:hover { color:var(--primary); background:rgba(0,78,122,0.06); }
.nav-links a.active {
    background:var(--primary); color:white;
    box-shadow: var(--btn-shadow);
}

/* User greeting pill */
.nav-user {
    display:flex; align-items:center; gap:7px;
    padding:0.3rem 0.8rem 0.3rem 0.5rem;
    background:rgba(0,78,122,0.05);
    border:1.5px solid rgba(0,78,122,0.12);
    border-radius:99px;
    font-size:0.78rem; color:var(--gray); font-weight:600;
}
.nav-user-dot {
    width:8px; height:8px; border-radius:50%;
    background:var(--success);
    box-shadow:0 0 0 3px rgba(22,163,74,0.2);
    flex-shrink:0; animation:dotGlow 2.5s ease-in-out infinite;
}
@keyframes dotGlow {
    0%,100% { box-shadow:0 0 0 3px rgba(22,163,74,0.2); }
    50%      { box-shadow:0 0 0 5px rgba(22,163,74,0.1); }
}

/* Dark mode toggle */
.dark-toggle {
    background:transparent !important;
    border:1.5px solid rgba(108,117,125,0.3) !important;
    color:var(--gray) !important;
    width:38px !important; height:38px !important;
    padding:0 !important; margin:0 !important;
    border-radius:var(--radius-sm) !important; box-shadow:none !important;
    text-transform:none !important; cursor:pointer;
    transition:all var(--transition) !important; flex-shrink:0;
    display:flex !important; align-items:center !important; justify-content:center !important;
}
.dark-toggle:hover {
    border-color:var(--primary) !important; color:var(--primary) !important;
    background:rgba(0,78,122,0.06) !important;
    transform:none !important; box-shadow:none !important;
}
.dark-toggle::after { display:none !important; }
.dark-toggle svg, .dark-toggle .btn-icon { width:17px; height:17px; pointer-events:none; }

/* Push toggle */
.push-toggle-wrap { display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer; user-select:none; min-height:38px; }
.push-toggle-icon { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; line-height:0; margin:0; flex-shrink:0; color:var(--gray); }
.push-toggle-icon svg { width:18px; height:18px; display:block; }
.push-toggle-switch {
    position:relative; width:42px; height:23px;
    background:#cbd5e1; border-radius:99px; cursor:pointer;
    transition:background 0.3s; outline:none; flex-shrink:0; border:none; padding:0;
}
.push-toggle-switch:focus-visible { box-shadow:0 0 0 3px rgba(0,180,216,0.3); }
.push-toggle-switch.active { background:var(--secondary); }
.push-toggle-knob {
    position:absolute; top:2.5px; left:2.5px;
    width:18px; height:18px; background:rgba(227,244,255,0.96);
    border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,0.2);
    transition:transform 0.28s cubic-bezier(0.4,0,0.2,1);
    will-change:transform;
}
.push-toggle-switch.active .push-toggle-knob { transform:translateX(19px); }
.push-toggle-label { display:none !important; }
.push-toggle-switch.active ~ .push-toggle-label { color:var(--secondary); }
@media (max-width:640px) {
    .push-toggle-wrap { gap:6px; }
    .push-toggle-icon { width:16px; height:16px; }
    .push-toggle-icon svg { width:16px; height:16px; }
}

/* Hamburger */
.hamburger {
    display:none; flex-direction:column; gap:5px; cursor:pointer;
    padding:7px 5px; background:transparent; border:none; box-shadow:none;
    width:auto; margin:0; text-transform:none;
    border-radius:var(--radius-sm);
}
.hamburger:hover { background:rgba(0,78,122,0.06) !important; }
.hamburger:hover,.hamburger:active { box-shadow:none !important; transform:none !important; }
.hamburger::after { display:none !important; }
.hamburger span {
    display:block; width:22px; height:2px;
    background:var(--gray); border-radius:2px; transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── MOBILE DRAWER — fixed alignment ────────────────────────── */
.mobile-nav {
    display:block;
    position:fixed; inset:0;
    width:100%; height:100vh;
    background:rgba(0,0,0,0.45);
    z-index:9990;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity 0.3s ease, visibility 0.3s ease;
}
.mobile-nav.open {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}
.mobile-nav-drawer {
    position:fixed; top:0; right:0;
    width:min(280px,85vw);
    height:100vh; max-height:100vh;
    background:rgba(210,237,255,0.98);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    padding:1rem 0.875rem;
    display:flex; flex-direction:column; gap:0.25rem;
    box-shadow:-6px 0 32px rgba(0,0,0,0.15);
    transform:translateX(100%);
    transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain; z-index:9991;
    box-sizing:border-box;
}
.mobile-nav.open .mobile-nav-drawer { transform:translateX(0); }
.mobile-nav-drawer a {
    text-decoration:none; color:#4b5563;
    padding:0.75rem 1rem; border-radius:var(--radius-sm);
    font-weight:500; font-size:0.93rem;
    transition:all 0.18s;
    display:flex; align-items:center; gap:10px;
    min-height:46px;
}
.mobile-nav-drawer a svg { width:18px; height:18px; flex-shrink:0; opacity:0.7; }
.mobile-nav-drawer a.active, .mobile-nav-drawer a:hover {
    background:var(--primary); color:white;
}
.mobile-nav-drawer a.active svg, .mobile-nav-drawer a:hover svg { opacity:1; }
.mobile-nav-close {
    background:transparent !important; border:none; box-shadow:none !important;
    width:36px; height:36px; padding:0;
    margin:0 0 0.5rem auto;
    color:#6b7280; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    border-radius:var(--radius-sm);
    transition:all 0.18s; flex-shrink:0;
}
.mobile-nav-close:hover { background:rgba(0,0,0,0.06) !important; color:var(--primary) !important; transform:none !important; }
.mobile-nav-close::after { display:none !important; }
.mobile-nav-close svg { width:20px; height:20px; }
.mobile-nav-divider { height:1px; background:rgba(0,78,122,0.08); margin:0.4rem 0.5rem; }
.mobile-nav-logout { color:#dc2626 !important; font-weight:600 !important; }
.mobile-nav-logout:hover { background:rgba(220,38,38,0.07) !important; color:#dc2626 !important; }
[data-theme="dark"] .mobile-nav-drawer { background:rgba(6,14,24,0.99); }
[data-theme="dark"] .mobile-nav-drawer a { color:#94a3b8; }
[data-theme="dark"] .mobile-nav-divider { background:rgba(34,211,238,0.1); }

/* ── LAYOUT ─────────────────────────────────────────────────── */
.container { max-width:1100px; margin:auto; padding:2rem 1.5rem; position:relative; z-index:10; }

.glass-card, .hero, .card {
    background:var(--card-bg); padding:2rem; border-radius:var(--radius-xl);
    border:1px solid rgba(255,255,255,0.5);
    box-shadow:var(--shadow-md);
    margin-bottom:1.75rem;
    transition:transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s;
}
.glass-card.animate-in,.hero.animate-in,.card.animate-in {
    animation:fadeUp 0.7s cubic-bezier(0.4,0,0.2,1) both;
}
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
.hero { text-align:center; }
.hero img { animation:float 6s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; }
.flex-btn-container { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; margin-top:1rem; }

/* ── LOCATION / SENSOR CARDS ──────────────────────────────── */
.location-card {
    background:rgba(227,244,255,0.96); padding:1.5rem; border-radius:var(--radius-lg);
    border-left:5px solid var(--success); position:relative;
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
    box-shadow:var(--shadow-sm); overflow:hidden;
}
.location-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.location-card.detecting {
    background:#fff5f5 !important;
    border-left-color:var(--danger) !important;
    animation:cardPulse 2s ease-in-out infinite;
}
[data-theme="dark"] .location-card.detecting { background:rgba(220,38,38,0.07) !important; }
.location-card.offline { border-left-color:#94a3b8 !important; opacity:0.72; }
@keyframes cardPulse {
    0%,100% { box-shadow:var(--shadow-sm); }
    50%      { box-shadow:0 0 0 10px rgba(220,38,38,0); }
}

/* Status dots */
.status-dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:middle; flex-shrink:0; }
.dot-clear    { background:#22c55e; box-shadow:0 0 6px rgba(34,197,94,0.5); }
.dot-detecting{ background:#ef4444; box-shadow:0 0 6px rgba(239,68,68,0.5); animation:dotBlink 1s ease-in-out infinite; }
.dot-offline  { background:#94a3b8; }
@keyframes dotBlink { 0%,100%{opacity:1} 50%{opacity:0.2} }

/* AQI badges */
.aqi-badge { display:inline-block; padding:3px 12px; border-radius:99px; font-size:0.7rem; font-weight:700; margin-top:6px; letter-spacing:0.02em; }
.aqi-good     { background:#dcfce7; color:#15803d; }
.aqi-moderate { background:#fef9c3; color:#854d0e; }
.aqi-alert    { background:#fee2e2; color:#dc2626; }
.aqi-offline  { background:#f1f5f9; color:#64748b; }
[data-theme="dark"] .aqi-good     { background:rgba(34,197,94,0.15);  color:#4ade80; }
[data-theme="dark"] .aqi-moderate { background:rgba(234,179,8,0.15);  color:#fbbf24; }
[data-theme="dark"] .aqi-alert    { background:rgba(239,68,68,0.15);  color:#f87171; }
[data-theme="dark"] .aqi-offline  { background:rgba(148,163,184,0.1); color:#94a3b8; }

/* PM chips */
.pm-values { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.pm-chip {
    background: linear-gradient(135deg,rgba(0,78,122,0.05),rgba(0,180,216,0.07)); border:1px solid rgba(0,78,122,0.1);
    border-radius:6px; padding:3px 8px;
    font-size:0.7rem; color:var(--gray); font-family:monospace; font-weight:500;
}
.card-timestamp { font-size:0.67rem; color:var(--gray); margin-top:6px; display:block; opacity:0.75; }

/* Live badge */
.live-badge {
    display:inline-flex; align-items:center; gap:5px;
    background:#dcfce7; color:#15803d; border-radius:99px;
    padding:3px 10px; font-size:0.68rem; font-weight:700; margin-left:10px; vertical-align:middle;
}
.live-dot { width:6px; height:6px; border-radius:50%; background:#22c55e; animation:dotBlink 1.5s ease-in-out infinite; }
[data-theme="dark"] .live-badge { background:rgba(34,197,94,0.14); color:#4ade80; }
.last-updated-bar { text-align:center; font-size:0.72rem; color:rgba(255,255,255,0.75); margin-bottom:1rem; font-weight:500; }
[data-theme="dark"] .last-updated-bar { color:#94a3b8; }

/* Staff alert bar */
.staff-alert-bar {
    display:none; background:#fffbeb; border:1px solid #fcd34d;
    border-radius:var(--radius-md); padding:12px 16px; margin-bottom:1.25rem;
    font-size:0.875rem; color:#92400e; align-items:center; gap:10px;
}
.staff-alert-bar.visible { display:flex; }
.zone-card-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.zone-card-header h3 { margin:0; font-size:1rem; font-weight:700; }

/* ── BUTTONS ─────────────────────────────────────────────────── */
button {
    width:100%; padding:0.82rem 1.25rem; margin-top:1rem;
    border:none; border-radius:var(--radius-md);
    background:linear-gradient(135deg, var(--primary), #006899);
    color:white; cursor:pointer; font-weight:600;
    font-family:'DM Sans', sans-serif;
    transition:all var(--transition); position:relative; overflow:hidden;
    box-shadow:var(--btn-shadow); font-size:0.9rem;
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    letter-spacing:0.01em;
}
button::after {
    content:''; position:absolute; inset:0;
    background:radial-gradient(circle at center,rgba(255,255,255,0.2),transparent 70%);
    opacity:0; transition:opacity 0.3s;
}
button:hover::after { opacity:1; }
button:hover { transform:translateY(-2px); box-shadow:var(--btn-shadow-hover); filter:brightness(1.05); }
button:active { transform:translateY(0) scale(0.99); }
.btn-primary { background:linear-gradient(135deg, var(--primary), #006899); }
.btn-success { background:linear-gradient(135deg, #16a34a, #15803d) !important; box-shadow:0 4px 14px rgba(22,163,74,0.3) !important; }
.btn-success:hover { filter:brightness(1.08) !important; }
.btn-danger  { background:linear-gradient(135deg, #dc2626, #b91c1c) !important; box-shadow:0 4px 14px rgba(220,38,38,0.3) !important; }
.btn-danger:hover { filter:brightness(1.08) !important; }

/* Acknowledge / Resolve */
.ack-btn {
    margin-top:10px; padding:9px 16px;
    background:linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color:white; border:none; border-radius:var(--radius-sm);
    font-weight:700; cursor:pointer; font-size:0.82rem;
    transition:all var(--transition); width:100%;
    box-shadow:0 3px 10px rgba(220,38,38,0.25) !important;
}
.ack-btn:hover { filter:brightness(1.08) !important; transform:translateY(-1px); }
.resolve-btn {
    margin-top:8px; padding:9px 16px;
    background:linear-gradient(135deg, #16a34a, #15803d) !important;
    color:white; border:none; border-radius:var(--radius-sm);
    font-weight:700; cursor:pointer; font-size:0.82rem;
    transition:all var(--transition); width:100%;
    box-shadow:0 3px 10px rgba(22,163,74,0.25) !important;
}
.resolve-btn:hover { filter:brightness(1.08) !important; transform:translateY(-1px); }

/* ── FORMS ───────────────────────────────────────────────────── */
label { display:block; margin-top:1rem; font-weight:600; font-size:0.78rem; color:var(--dark); letter-spacing:0.01em; }
input, select, textarea {
    width:100%; padding:0.75rem 0.95rem; margin-top:0.35rem;
    border-radius:var(--radius-md); border:1.5px solid var(--input-border);
    font-family:'DM Sans', sans-serif; font-size:0.9rem;
    background:var(--input-bg); color:var(--dark);
    transition:all var(--transition);
}
input:focus, select:focus, textarea:focus {
    outline:none; border-color:var(--secondary);
    box-shadow:0 0 0 3px rgba(0,180,216,0.15);
}
input.field-error, select.field-error, textarea.field-error { border-color:var(--danger); box-shadow:0 0 0 3px rgba(220,38,38,0.1); }
.field-error-msg { color:var(--danger); font-size:0.72rem; margin-top:0.3rem; display:block; font-weight:500; }
.pw-strength-bar { height:3px; border-radius:3px; margin-top:6px; transition:width 0.4s,background 0.4s; width:0%; }
.pw-strength-label { font-size:0.7rem; margin-top:3px; font-weight:600; }
.otp-timer { text-align:center; font-size:0.78rem; color:var(--danger); margin-top:0.4rem; font-weight:600; }
.otp-box { margin-top:1rem; padding-top:1rem; border-top:1px dashed rgba(0,78,122,0.15); }
.input-group { position:relative; }

/* ── STATS & TABLES ──────────────────────────────────────────── */
.stat-box { background:rgba(227,244,255,0.96); padding:1.5rem 1.25rem; border-radius:var(--radius-lg);
    border-bottom:3px solid var(--primary); text-align:center;
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1); box-shadow:var(--shadow-sm);
    position:relative; overflow:hidden;
}
.stat-box::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, var(--primary), var(--secondary));
    opacity:0; transition:opacity 0.3s;
}
.stat-box:hover::before { opacity:1; }
.stat-box.animate-in { animation:fadeUp 0.7s cubic-bezier(0.4,0,0.2,1) both; }
.stat-box:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.stat-box h3 { font-size:1.9rem; font-weight:800; color:var(--primary); margin:0.25rem 0; }
.stat-box p { font-size:0.75rem; color:var(--gray); font-weight:600; text-transform:uppercase; letter-spacing:0.06em; margin:0; }

.log-container {
    background:rgba(227,244,255,0.96); border-radius:var(--radius-lg); overflow-x:auto;
    border:1px solid rgba(0,78,122,0.08); box-shadow:var(--shadow-sm);
    transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.log-container.animate-in { animation:fadeUp 0.7s cubic-bezier(0.4,0,0.2,1) both; }
.log-container:hover { box-shadow:var(--shadow-md); }

table { width:100%; border-collapse:collapse; font-size:0.85rem; }
thead { border-bottom:2px solid rgba(0,78,122,0.08); }
th {
    padding:12px 16px; text-align:left;
    font-size:0.7rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.07em; color:var(--gray);
    background: linear-gradient(135deg,rgba(0,78,122,0.05),rgba(0,180,216,0.07)); cursor:pointer; white-space:nowrap;
    transition:color var(--transition);
}
th:hover { color:var(--primary); }
td { padding:11px 16px; border-bottom:1px solid rgba(0,78,122,0.06); color:var(--dark); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tbody tr { transition:background var(--transition); }
tbody tr:hover { background:rgba(0,78,122,0.025); }

/* Tags */
.tag { padding:3px 10px; border-radius:99px; font-size:0.68rem; font-weight:700; letter-spacing:0.04em; display:inline-block; }
.tag-danger  { background:#fee2e2; color:#dc2626; }
.tag-success { background:#dcfce7; color:#15803d; }
.tag-warning { background:#fef9c3; color:#854d0e; }
.tag-info    { background:#dbeafe; color:#1d4ed8; }
[data-theme="dark"] .tag-danger  { background:rgba(239,68,68,0.15);  color:#f87171; }
[data-theme="dark"] .tag-success { background:rgba(34,197,94,0.15);  color:#4ade80; }
[data-theme="dark"] .tag-warning { background:rgba(234,179,8,0.15);  color:#fbbf24; }
[data-theme="dark"] .tag-info    { background:rgba(59,130,246,0.15); color:#60a5fa; }

/* Filter bar */
.filter-bar {
    display:flex; gap:0.75rem; flex-wrap:wrap; align-items:flex-end;
    margin-bottom:1.25rem; padding:1.25rem;
    background:var(--card-bg); border-radius:var(--radius-lg);
    border:1px solid rgba(255,255,255,0.5); box-shadow:var(--shadow-sm);
}
.filter-group { display:flex; flex-direction:column; gap:4px; flex:1; min-width:140px; }
.filter-group label { margin:0; font-size:0.7rem; color:var(--gray); text-transform:uppercase; letter-spacing:0.04em; }
.filter-group input, .filter-group select { margin:0; padding:0.5rem 0.75rem; font-size:0.82rem; border-radius:var(--radius-sm); }
.export-btn { padding:0.52rem 1rem; width:auto; margin-top:0; font-size:0.82rem; border-radius:var(--radius-sm); background:linear-gradient(135deg,#16a34a,#15803d) !important; box-shadow:none !important; }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1.5rem; }

/* Page hero */
.page-hero { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem; }
/* Default: dark text for light hero panels (e.g. History). Pages with a dark hero can override. */
.page-hero h1 { font-size:1.75rem; color:#04324d; text-shadow:none; }
.page-hero p { color:#475569; font-size:0.9rem; margin-top:0.2rem; }
[data-theme="dark"] .page-hero h1 { color:#e8f4fc; text-shadow:0 1px 14px rgba(0,0,0,0.35); }
[data-theme="dark"] .page-hero p { color:#cbd5e1; }

/* ── SMOKE ANIMATION ────────────────────────────────────────── */
.smoke-container { position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.smoke-particle {
    position:absolute; bottom:-200px;
    background:radial-gradient(circle,rgba(60,60,60,0.6) 0%,rgba(100,100,100,0.25) 50%,transparent 30%);
    border-radius:50%; filter:blur(10px); animation:rise 18s infinite ease-out;
}
@keyframes rise {
    0%  { transform:translateY(0) scale(1); opacity:0; }
    20% { opacity:0.8; }
    60% { transform:translateY(-70vh) scale(2.8); opacity:0.4; }
    100%{ transform:translateY(-140vh) scale(5); opacity:0; }
}

/* ── PROFILE PAGE ────────────────────────────────────────────── */
.profile-wrapper { min-height:calc(100vh - 120px); display:flex; align-items:center; justify-content:center; }
.profile-card { max-width:480px; width:100%; text-align:center; padding:2.2rem; }
.profile-avatar { display:flex; flex-direction:column; align-items:center; margin-bottom:1.2rem; }
.profile-img {
    width:120px; height:120px; border-radius:50%;
    border:3px solid var(--secondary); object-fit:cover; object-position:center;
    background:#e0f7fa; display:block;
    box-shadow:0 0 0 6px rgba(0,180,216,0.1), 0 4px 20px rgba(0,78,122,0.15);
}
.change-photo-btn {
    width:auto; padding:0.42rem 1rem; margin-top:0.6rem; font-size:0.75rem;
    border-radius:99px; box-shadow:none !important;
    background:rgba(0,78,122,0.06) !important;
    color:var(--primary) !important;
    border:1.5px solid rgba(0,78,122,0.12) !important;
    display:inline-flex !important; align-items:center; gap:5px;
    text-transform:none !important; letter-spacing:normal !important;
}
.change-photo-btn:hover { background:rgba(0,78,122,0.12) !important; transform:none !important; box-shadow:none !important; }
.change-photo-btn::after { display:none !important; }
[data-theme="dark"] .change-photo-btn { background:rgba(34,211,238,0.08) !important; color:var(--secondary) !important; border-color:rgba(34,211,238,0.18) !important; }
.profile-name { font-size:1.3rem; font-weight:700; margin-top:0.75rem; margin-bottom:0.25rem; color:var(--dark); text-align:center !important; }
.profile-role-badge {
    display:inline-block; padding:4px 16px; border-radius:99px;
    font-size:0.7rem; font-weight:700; letter-spacing:0.05em;
    background:linear-gradient(135deg, var(--primary), var(--secondary));
    color:white; margin-bottom:1rem;
}
.profile-divider { height:1px; background:#e5e7eb; margin:1rem 0; }
.profile-details { text-align:left; font-size:0.875rem; }
.profile-detail-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:0.55rem 0; border-bottom:1px solid rgba(0,78,122,0.06);
}
.profile-detail-row:last-child { border-bottom:none; }
.profile-detail-label { color:var(--gray); font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; }
.profile-detail-value { color:var(--dark); font-weight:500; font-size:0.875rem; text-align:right; }
.profile-access { margin-top:1rem; font-size:0.8rem; font-weight:600; padding:0.4rem 1rem; border-radius:99px; display:inline-block; background:rgba(0,78,122,0.07); color:var(--primary); }
.profile-edit-form { text-align:left; margin-top:1rem; }
.profile-edit-form .btn-row { display:flex; gap:0.75rem; margin-top:1rem; }
.profile-edit-form .btn-row button { margin-top:0; }
.change-pw-section { margin-top:1.2rem; text-align:left; padding-top:1rem; border-top:1px dashed rgba(0,78,122,0.12); }
.change-pw-section h4 { font-size:0.9rem; margin-bottom:0.5rem; color:var(--primary); font-weight:700; }

/* ── AUTH PAGE ── MAJOR IMPROVEMENTS ──────────────────────────── */
.auth-wrapper {
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    position:relative; padding:1.5rem 0;
}
.auth-wrapper .smoke-container { opacity:0.3; }
.auth-container {
    width:100%; max-width:460px; margin:auto;
    padding:1.5rem 1.5rem 2rem; z-index:10;
    display:flex; flex-direction:column; gap:0;
}
.auth-header {
    text-align:center; margin-bottom:1.5rem; color:white;
    animation:fadeUp 0.6s cubic-bezier(0.4,0,0.2,1) both;
}
.auth-header h1 {
    font-size:1.9rem; font-weight:800;
    text-shadow:0 2px 20px rgba(0,0,0,0.25);
    letter-spacing:-0.03em; line-height:1.15;
}
.auth-header p {
    font-size:0.9rem; opacity:0.88; margin-top:0.4rem; line-height:1.55;
    text-shadow:0 1px 8px rgba(0,0,0,0.15);
}
/* Trust badges under the header */
.auth-trust-row {
    display:flex; justify-content:center; gap:1.25rem;
    margin-top:0.85rem; flex-wrap:wrap;
}
.auth-trust-badge {
    display:inline-flex; align-items:center; gap:5px;
    background:rgba(255,255,255,0.18); color:white;
    border:1px solid rgba(255,255,255,0.3);
    border-radius:99px; padding:4px 12px;
    font-size:0.7rem; font-weight:600; letter-spacing:0.03em;
    backdrop-filter:blur(8px);
}
.auth-trust-badge svg { width:11px; height:11px; flex-shrink:0; }

/* The card */
.auth-card {
    padding:2.25rem 2rem; border-radius:var(--radius-2xl);
    background:rgba(220,242,255,0.97);
    box-shadow:0 24px 64px rgba(0,78,122,0.18), 0 4px 16px rgba(0,0,0,0.08);
    border:1px solid rgba(255,255,255,0.8);
    animation:fadeUp 0.7s 0.1s cubic-bezier(0.4,0,0.2,1) both;
    position:relative; overflow:hidden;
}
.auth-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, var(--primary), var(--secondary), var(--primary));
    background-size:200% 100%;
    animation:shimmer 3s linear infinite;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
[data-theme="dark"] .auth-card {
    background:rgba(10,20,32,0.98);
    box-shadow:0 24px 64px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.3);
    border-color:rgba(34,211,238,0.1);
}

/* Brand / logo section */
.brand-section {
    display:flex; flex-direction:column; align-items:center;
    margin-bottom:1.5rem; gap:0;
}
.auth-logo { width:200px; height:auto; }
.brand-tagline {
    font-size:0.72rem; color:var(--gray); font-weight:600;
    letter-spacing:0.12em; text-transform:uppercase;
    margin-top:-0.25rem; opacity:0.7;
}

/* Tab switcher (Login / Sign Up) */
.auth-tabs {
    display:flex; background:#f1f5f9; border-radius:var(--radius-sm);
    padding:3px; margin-bottom:1.5rem; gap:2px;
}
.auth-tab {
    flex:1; padding:0.55rem 0; text-align:center;
    font-size:0.85rem; font-weight:600; color:var(--gray);
    border-radius:6px; cursor:pointer;
    transition:all 0.22s; border:none; background:transparent;
    margin:0; box-shadow:none; width:auto; letter-spacing:0;
}
.auth-tab:hover { color:var(--primary); background:rgba(0,78,122,0.06); transform:none; }
.auth-tab.active {
    background:rgba(227,244,255,0.96); color:var(--primary);
    box-shadow:0 1px 6px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,78,122,0.08);
}
.auth-tab::after { display:none !important; }
[data-theme="dark"] .auth-tabs { background:rgba(0,0,0,0.3); }
[data-theme="dark"] .auth-tab.active { background:#1e3a52; color:var(--secondary); box-shadow:none; }

/* Form inputs on auth page */
.auth-form-content .input-group { margin-bottom:0.85rem; }
.auth-form-content label {
    font-size:0.73rem; font-weight:700; margin-bottom:0.3rem;
    text-transform:uppercase; letter-spacing:0.05em; color:var(--gray);
}
.auth-form-content input, .auth-form-content select {
    padding:0.78rem 0.95rem; border-radius:var(--radius-md); font-size:0.9rem;
    border:1.5px solid var(--input-border);
    transition:all var(--transition);
}
.auth-form-content input:focus, .auth-form-content select:focus {
    border-color:var(--secondary);
    box-shadow:0 0 0 3px rgba(0,180,216,0.12);
}
.grid-inputs { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }

/* Remember me / forgot row */
.auth-meta-row {
    display:flex; align-items:center; justify-content:space-between;
    margin-top:0.5rem; margin-bottom:0.25rem;
}
.auth-remember { display:flex; align-items:center; gap:6px; }
.auth-remember input[type="checkbox"] { width:auto; margin:0; accent-color:var(--secondary); cursor:pointer; }
.auth-remember label { margin:0; font-size:0.8rem; font-weight:500; cursor:pointer; }
.auth-forgot { font-size:0.8rem; color:var(--secondary); cursor:pointer; font-weight:600; }
.auth-forgot:hover { text-decoration:underline; }

/* CTA button inside auth */
.auth-form-content .btn-primary {
    width:100%; padding:0.88rem;
    font-size:0.93rem; font-weight:700;
    border-radius:var(--radius-md);
    background:linear-gradient(135deg, var(--primary) 0%, #006fa1 100%);
    letter-spacing:0.02em; margin-top:1rem;
}

/* Divider */
.auth-divider {
    display:flex; align-items:center; gap:12px;
    margin:1.1rem 0; color:var(--gray); font-size:0.78rem;
}
.auth-divider::before, .auth-divider::after {
    content:''; flex:1; height:1px; background:var(--input-border);
}

/* Links at bottom */
.auth-extra-links { margin-top:1.1rem; text-align:center; font-size:0.85rem; color:var(--gray); }
.auth-extra-links p { margin:0.3rem 0; }
.text-link { color:var(--secondary); cursor:pointer; font-weight:700; }
.text-link:hover { text-decoration:underline; color:var(--primary); }
.text-link.small { font-size:0.8rem; opacity:0.85; }
.info-alert {
    background:linear-gradient(135deg, rgba(0,180,216,0.08), rgba(0,78,122,0.06));
    border:1.5px solid rgba(0,180,216,0.2);
    padding:0.85rem 1rem; border-radius:var(--radius-md);
    font-size:0.85rem; margin-bottom:0.85rem;
    display:flex; align-items:flex-start; gap:10px;
    color:var(--dark);
}
.info-alert svg { flex-shrink:0; margin-top:1px; color:var(--secondary); }
[data-theme="dark"] .info-alert { color:#94a3b8; }

/* Email sent banner */
.email-sent-banner {
    display:flex; align-items:center; gap:12px;
    background:linear-gradient(135deg, rgba(22,163,74,0.08), rgba(21,128,61,0.06));
    border:1.5px solid rgba(22,163,74,0.2);
    border-radius:var(--radius-md); padding:12px 14px; margin-bottom:12px;
}
.email-sent-icon { flex-shrink:0; color:var(--success); }
.email-sent-icon svg { width:22px; height:22px; display:block; }
.email-sent-text { font-size:0.82rem; color:var(--gray); }
.email-sent-text strong { display:block; color:var(--dark); margin-bottom:2px; font-size:0.84rem; }

/* Dark mode toggle on auth */
.auth-dark-toggle-wrap {
    text-align:center; margin-top:1rem;
    display:flex; align-items:center; justify-content:center; gap:8px;
}
.auth-dark-label { font-size:0.75rem; color:rgba(255,255,255,0.65); font-weight:500; }

/* Auth footer */
.auth-footer {
    margin-top: 1.25rem;
    text-align: center;
    color: rgba(255,255,255,0.82);
    font-size: 0.82rem;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Email/mobile banner override */
@media (max-width:600px) {
    .email-sent-banner { display:flex !important; }
}

/* ── STAFF RESPONSE MODAL ───────────────────────────────────── */
.staff-response-modal {
    position:fixed; inset:0; background:rgba(0,0,0,0.55);
    backdrop-filter:blur(8px); display:none;
    align-items:center; justify-content:center; z-index:11000;
}
.staff-response-modal.open { display:flex; }
.staff-response-card {
    background:rgba(227,244,255,0.96); border-radius:var(--radius-xl); padding:2rem 1.75rem;
    max-width:380px; width:90%;
    box-shadow:var(--shadow-xl);
    border-top:4px solid var(--danger);
    animation:slideUp 0.38s cubic-bezier(0.175,0.885,0.32,1.1);
}
[data-theme="dark"] .staff-response-card { background:#0d1624; }
@keyframes slideUp { from{transform:translateY(28px);opacity:0} to{transform:translateY(0);opacity:1} }
.staff-response-card h3 { margin:0 0 6px; color:var(--danger); font-size:1.1rem; }
.staff-response-card p { margin:0 0 16px; color:#555; font-size:0.875rem; line-height:1.6; }
[data-theme="dark"] .staff-response-card p { color:#94a3b8; }
.location-tag { display:inline-block; background:#fee2e2; color:#dc2626; border-radius:var(--radius-sm); padding:3px 12px; font-size:0.8rem; font-weight:700; margin-bottom:12px; }
[data-theme="dark"] .location-tag { background:rgba(220,38,38,0.15); color:#f87171; }
.staff-respond-btn { width:100%; padding:11px; background:linear-gradient(135deg,var(--primary),#006899) !important; color:white; border:none; border-radius:var(--radius-md); font-weight:700; font-size:0.9rem; cursor:pointer; margin-top:0; }
.staff-dismiss-btn { width:100%; padding:9px; background:transparent; color:var(--gray); border:1px solid #e2e8f0; border-radius:var(--radius-md); font-size:0.82rem; cursor:pointer; margin-top:8px; }

/* ── CONTACT ─────────────────────────────────────────────────── */
.char-count { font-size:0.72rem; color:var(--gray); float:right; text-transform:none; letter-spacing:0; font-weight:400; margin-top:0; }
.ticket-success { margin-top:1rem; padding:1rem 1.25rem; background:#dcfce7; border-radius:var(--radius-md); color:#15803d; font-size:0.875rem; font-weight:500; display:none; }
.ticket-success.show { display:block; }
.inbox-ticket { border:1px solid rgba(0,78,122,0.1); border-radius:var(--radius-md); padding:1rem 1.25rem; margin-bottom:0.75rem; transition:box-shadow var(--transition); }
.inbox-ticket:hover { box-shadow:var(--shadow-sm); }
.inbox-ticket-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:0.5rem; }
.inbox-ticket-ref { font-size:0.7rem; color:var(--gray); font-family:monospace; }
.contact-page-header {
    text-align:center; margin-bottom:1.5rem; padding:1.75rem 2rem;
    background:var(--card-bg); border-radius:var(--radius-xl);
    box-shadow:var(--shadow-md); border:1px solid rgba(255,255,255,0.5);
}
.contact-page-header h1 { color:var(--primary); margin:0 0 0.35rem; }
.contact-page-header p { color:var(--gray); margin:0; font-size:0.9rem; }
[data-theme="dark"] .contact-page-header h1 { color:var(--secondary); }
.ticket-ref-badge {
    display:inline-block; font-family:monospace; font-size:0.72rem;
    background:rgba(0,180,216,0.1); color:var(--secondary);
    padding:2px 8px; border-radius:4px; font-weight:600;
}
[data-theme="dark"] .ticket-ref-badge { background:rgba(34,211,238,0.1); }

/* ── MODAL ──────────────────────────────────────────────────── */
.modal-overlay-custom {
    position:fixed; inset:0; background:rgba(0,0,0,0.55);
    backdrop-filter:blur(10px); display:none;
    align-items:center; justify-content:center; z-index:11000;
    animation:fadeIn 0.3s cubic-bezier(0.4,0,0.2,1);
}
.modal-content-custom {
    background:var(--card-bg); padding:2.5rem; border-radius:var(--radius-xl);
    width:90%; max-width:400px; text-align:center;
    box-shadow:var(--shadow-xl);
    border:1px solid rgba(255,255,255,0.4);
    animation:slideUp 0.38s cubic-bezier(0.175,0.885,0.32,1.1);
}
.modal-content-custom h3 { margin-bottom:0.5rem; color:var(--primary); font-size:1.4rem; }
.modal-content-custom p { color:var(--gray); margin-bottom:2rem; font-size:0.9rem; }
.modal-btn-group { display:flex; gap:1rem; }
.confirm-btn { background:linear-gradient(135deg,#dc2626,#b91c1c) !important; margin-top:0; }
.cancel-btn  { background:linear-gradient(135deg,#6b7280,#4b5563) !important; margin-top:0; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ── PASSWORD EYE TOGGLE ─────────────────────────────────────── */
.input-password-wrap { position:relative; margin-top:0.35rem; overflow:visible !important; }
.input-password-wrap input { margin-top:0; padding-right:2.8rem; width:100%; }
.eye-btn {
    position:absolute !important; right:0.75rem !important; top:50% !important;
    transform:translateY(-50%) !important;
    width:32px !important; height:32px !important; min-width:unset !important;
    padding:0 !important; margin:0 !important; border:none !important;
    border-radius:0 !important; background:transparent !important;
    box-shadow:none !important; text-transform:none !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    cursor:pointer !important; color:var(--gray) !important;
    transition:color 0.2s !important; z-index:10 !important; overflow:visible !important;
}
.eye-btn::after,.eye-btn::before { display:none !important; }
.eye-btn:hover { background:transparent !important; box-shadow:none !important; transform:translateY(-50%) !important; color:var(--secondary) !important; }
.eye-btn:active { transform:translateY(-50%) !important; box-shadow:none !important; background:transparent !important; }
.eye-icon,.eye-off-icon { width:20px !important; height:20px !important; pointer-events:none !important; display:block !important; flex-shrink:0 !important; }
.eye-off-icon.hidden { display:none !important; }

/* ── NOTIFICATIONS ───────────────────────────────────────────── */
.notification {
    position:fixed; top:1.25rem; right:1.25rem;
    width:auto; min-width:280px; max-width:360px;
    color:white; padding:0.875rem 1.25rem; border-radius:var(--radius-md);
    box-shadow:0 8px 32px rgba(0,0,0,0.18);
    z-index:10000; font-weight:500; font-size:0.88rem; line-height:1.4;
    opacity:0; visibility:hidden;
    transform:translateY(-12px) scale(0.97);
    transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.1);
    font-family:'DM Sans', sans-serif;
}
.notification.show { opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.notification.success { background:linear-gradient(135deg, #16a34a, #15803d); }
.notification.error   { background:linear-gradient(135deg, #dc2626, #b91c1c); }
.notification.info    { background:linear-gradient(135deg, #0284c7, #0369a1); }
.notification.warning { background:linear-gradient(135deg, #d97706, #b45309); }

/* ── FOOTER ──────────────────────────────────────────────────── */
footer,
.site-footer {
    text-align: center;
    padding: 1.6rem 1rem 2rem;
    color: rgba(255,255,255,0.84);
    font-size: 0.85rem;
    opacity: 1;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
footer p,
.site-footer p {
    margin: 0;
    line-height: 1.7;
}
footer a,
.site-footer a,
.auth-footer a {
    color: rgba(255,255,255,0.94) !important;
    text-decoration: none;
}
footer a:hover,
.site-footer a:hover,
.auth-footer a:hover {
    text-decoration: underline;
}

/* ── SESSION WARNING ─────────────────────────────────────────── */
#session-warning {
    position:fixed; bottom:80px; left:50%; transform:translateX(-50%);
    background:#fffbeb; color:#92400e; border:1px solid #fcd34d;
    border-radius:var(--radius-md); padding:0.75rem 1.5rem;
    font-size:0.85rem; z-index:9998; text-align:center;
    box-shadow:var(--shadow-md); display:none;
}

/* ── HOTKEY BADGE ────────────────────────────────────────────── */
.hotkey-badge {
    position:fixed; bottom:1.25rem; left:1.25rem;
    background:rgba(0,180,216,0.1); color:var(--secondary);
    border:1px solid rgba(0,180,216,0.2); border-radius:var(--radius-sm);
    padding:6px 12px; font-size:0.76rem; cursor:pointer;
    z-index:1000; transition:all var(--transition);
    backdrop-filter:blur(8px); font-weight:600;
}
.hotkey-badge:hover { background:rgba(0,180,216,0.18); transform:translateY(-1px); }

/* Table header cell */
.th-cell { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
th { white-space:nowrap; }
.stat-box p svg { vertical-align:-2px; }
#edit-btn { display:inline-flex !important; align-items:center !important; gap:6px !important; text-transform:none !important; letter-spacing:normal !important; }
#edit-btn::after { display:none !important; }

/* ── NAV CONTROLS (user pill + dark toggle + push toggle) ────── */
.nav-controls {
    display:flex !important;
    align-items:center !important;
    gap:10px;
    flex-shrink:0 !important;
    flex-wrap:nowrap !important;
    margin-left:auto !important;
}
.nav-controls .hamburger { display:none; }
.nav-controls > label.push-toggle-wrap,
.nav-controls > .push-toggle-wrap {
    display:inline-flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0.55rem !important;
    min-height:38px !important;
    margin:0 !important;
    padding:0 !important;
    line-height:0 !important;
}
.nav-controls > label.push-toggle-wrap .push-toggle-icon,
.nav-controls > .push-toggle-wrap .push-toggle-icon,
.nav-controls > label.push-toggle-wrap .push-toggle-switch,
.nav-controls > .push-toggle-wrap .push-toggle-switch {
    align-self:center !important;
    margin:0 !important;
}
.nav-controls > label.push-toggle-wrap .push-toggle-label,
.nav-controls > .push-toggle-wrap .push-toggle-label {
    display:none !important;
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width:900px) {
    .nav-links { display:none !important; }
    .nav-controls .hamburger { display:flex !important; }
    .nav-user  { display:none !important; }
    .nav-controls { gap:8px; }
    .nav-controls > label.push-toggle-wrap,
    .nav-controls > .push-toggle-wrap {
        display:none !important;
    }
}
@media (max-width:768px) {
    nav { padding:0 1rem; }
    .logo img { height:40px; }
    .container { max-width:100%; padding:1rem; }
    .glass-card { padding:1.25rem; border-radius:var(--radius-lg); }
    h1, h2 { font-size:1.15rem; }
    .page-hero h1 { font-size:1.3rem; }
    .grid { grid-template-columns:1fr; }
    .grid-inputs { grid-template-columns:1fr; }
    .modal-btn-group { flex-direction:column; }
    .modal-btn-group button { width:100%; margin-top:0.5rem; }
    .profile-edit-form .btn-row { flex-direction:column; }
    .profile-edit-form .btn-row button { width:100%; }
    .stats-grid { grid-template-columns:repeat(3,1fr); gap:0.6rem; }
    .stat-box { padding:1rem 0.75rem; }
    .stat-box h3 { font-size:1.4rem; }
    .stat-box p { font-size:0.67rem; }
    .filter-bar { flex-direction:column; gap:0.5rem; padding:1rem; }
    .filter-group { min-width:auto; }
    .page-hero img { display:none; }
    .auth-card { padding:1.75rem 1.5rem; }
    .auth-tabs { margin-bottom:1.25rem; }
    .notification {
        left:50% !important;
        right:auto !important;
        top:calc(env(safe-area-inset-top, 0px) + 0.8rem) !important;
        width:min(calc(100vw - 1.25rem), 560px) !important;
        max-width:calc(100vw - 1.25rem) !important;
        min-width:0 !important;
        margin:0 !important;
        text-align:center !important;
        transform:translateX(-50%) translateY(-12px) scale(0.98) !important;
    }
    .notification.show {
        transform:translateX(-50%) translateY(0) scale(1) !important;
    }
}
@media (max-width:600px) {
    .page-hero img { display:none; }
    .auth-trust-row { gap:0.6rem; }
    .auth-trust-badge { font-size:0.67rem; padding:3px 10px; }
}
@media (max-width:480px) {
    .auth-container { padding: 1rem 1rem 1.5rem; }
    /* Improved readability for small screens */
    body { font-size: 15px; }
    .container { padding: 1rem 0.75rem; }
    .glass-card { padding: 1.5rem 1rem; }
    footer, .site-footer { padding:1rem; font-size:0.75rem; }
    button, input, select { font-size:16px; }
    .log-container table,.log-container thead,.log-container tbody,
    .log-container th,.log-container td,.log-container tr { display:block; }
    .log-container thead tr { position:absolute; top:-9999px; left:-9999px; }
    .log-container tr { background:var(--table-bg,#fff); margin-bottom:14px; border-radius:var(--radius-md); box-shadow:var(--shadow-sm); padding:10px; }
    .log-container td { border:none; position:relative; padding-left:50% !important; text-align:right !important; padding-top:8px; padding-bottom:8px; border-bottom:1px solid #eee; }
    .log-container td:last-child { border-bottom:none; }
    .log-container td::before { position:absolute; left:10px; width:45%; font-weight:700; text-align:left; content:attr(data-label); color:var(--gray); font-size:0.7rem; text-transform:uppercase; }
    .notification { width:calc(100% - 1rem) !important; max-width:calc(100% - 1rem) !important; }
    .notification.show { transform:translateX(-50%) translateY(0) scale(1) !important; }
    .hotkey-badge { display:none; }
    .auth-card { border-radius:var(--radius-xl); }
    .mobile-nav-drawer { width:min(280px,90vw); }
}

/* ─────────────────────────────────────────────
   FINAL UI UPGRADE (RESPECTS LIGHT + DARK MODE)
──────────────────────────────────────────── */

/* === 1. BACKGROUND IMPROVEMENT (LIGHT MODE ONLY) === */
body {
    background:
        radial-gradient(circle at 20% 20%, rgba(0,180,216,0.08), transparent 40%),
        radial-gradient(circle at 80% 0%, rgba(0,78,122,0.08), transparent 40%),
        linear-gradient(135deg, var(--light), var(--secondary), var(--primary));
    background-size: 300% 300%;
}

/* subtle grid (works both modes) */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: 0.25;
    pointer-events: none;
    z-index: 0;
}

/* === 2. HERO PANEL (MAIN HEADER IMPROVEMENT) === */
.hero {
    backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}

/* LIVE badge enhancement */
.hero .live-badge,
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    background: rgba(22,163,74,0.15);
    color: var(--success);
    font-weight: 600;
}

/* pulsing dot */
.live-badge::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 6px var(--success);
    animation: pulseLive 2s infinite;
}

/* === 3. SENSOR CARDS (BIG IMPROVEMENT) === */
.location-card {
    position: relative;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    transition: all 0.25s ease;
}

/* left accent bar (status indicator) */
.location-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 8px 0 0 8px;
    background: var(--gray-light);
}

/* status states */
.location-card.online::before {
    background: var(--success);
}

.location-card.offline::before {
    background: var(--gray-light);
}

.location-card.alert::before {
    background: var(--danger);
}

/* hover effect (safe) */
.location-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* === 4. STATUS TEXT IMPROVEMENT === */
.status-text {
    font-weight: 600;
}

.status-text.online {
    color: var(--success);
}

.status-text.offline {
    color: var(--gray-light);
}

.status-text.alert {
    color: var(--danger);
}

/* === 5. BUTTON IMPROVEMENT === */
button {
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.2s ease;
}

/* cleaner hover */
button:hover {
    filter: brightness(1.05);
    box-shadow: var(--btn-shadow-hover);
}

/* === 6. NAVBAR POLISH === */
nav {
    backdrop-filter: blur(14px) saturate(150%);
}

/* active nav = clearer */
.nav-links a.active {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0,78,122,0.2);
}

/* === 7. TEXT READABILITY FIX === */
p, small {
    color: var(--gray);
}

/* === 8. LAST UPDATED TEXT (dashboard feel) === */
.last-updated {
    font-size: 0.8rem;
    color: var(--gray-light);
    letter-spacing: 0.02em;
}

/* === 9. SMOOTH HAMBURGER (NO BREAK) === */
.menu-toggle span {
    transition: all 0.3s ease;
}

/* animation */
.menu-toggle.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* drawer animation — authoritative version lives in style-fixes.css */

/* === 10. LIVE ANIMATION === */
@keyframes pulseLive {
    0% { box-shadow: 0 0 0 0 rgba(22,163,74,0.5); }
    70% { box-shadow: 0 0 0 6px rgba(22,163,74,0); }
    100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}

/* === 11. PERFORMANCE SAFE === */
* {
    transition-property: background, color, box-shadow, transform, border, opacity, visibility;
}

/* ══════════════════════════════════════════════════════════════
   FRESHZONE  ·  VISUAL UPGRADE v2  (light-mode polish)
   Stacks on top of existing rules — no breaks, only improvements
   ══════════════════════════════════════════════════════════════ */

/* ── 1. RICHER BODY GRADIENT ─────────────────────────────────── */
body {
    background: linear-gradient(135deg, #004466 0%, #006aa0 25%, #0097c4 55%, #00c8e6 80%, #005f88 100%);
    background-size: 400% 400%;
    animation: wave 28s ease infinite;
}
[data-theme="dark"] body {
    background: linear-gradient(135deg, #030a14 0%, #060e1c 35%, #091626 65%, #040c18 100%);
    background-size: 300% 300%;
    animation: wave 28s ease infinite;
}

/* ── 2. CARD SURFACES — iced blue, not white ─────────────────── */
.glass-card, .hero, .card {
    background: linear-gradient(160deg, rgba(225,245,255,0.97) 0%, rgba(210,237,255,0.95) 100%);
    border: 1px solid rgba(0,120,180,0.18);
    box-shadow: 0 6px 28px rgba(0,60,120,0.13), 0 1px 4px rgba(0,0,0,0.06);
}
[data-theme="dark"] .glass-card,
[data-theme="dark"] .hero,
[data-theme="dark"] .card {
    background: rgba(13,22,35,0.98);
    border-color: rgba(34,211,238,0.10);
}

/* ── 3. NAVIGATION — frosted blue glass ──────────────────────── */
nav {
    background: rgba(0,68,110,0.82) !important;
    border-bottom: 1px solid rgba(0,180,216,0.25) !important;
    box-shadow: 0 2px 20px rgba(0,40,80,0.30), 0 1px 0 rgba(0,180,216,0.18) !important;
}
.nav-links a {
    color: rgba(200,238,255,0.85) !important;
}
.nav-links a:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.12) !important;
}
.nav-links a.active {
    background: linear-gradient(135deg, #00b4d8, #0ecfef) !important;
    color: #fff !important;
    box-shadow: 0 3px 14px rgba(0,180,216,0.45) !important;
}
.nav-user {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.22) !important;
    color: rgba(200,238,255,0.9) !important;
}
.dark-toggle {
    border-color: rgba(255,255,255,0.28) !important;
    color: rgba(200,238,255,0.85) !important;
}
.dark-toggle:hover {
    border-color: #0ecfef !important;
    color: #fff !important;
    background: rgba(255,255,255,0.1) !important;
}
.hamburger span { background: rgba(200,238,255,0.9) !important; }

/* ── 4. STAT BOXES — gradient tiles ──────────────────────────── */
.stat-box {
    background: linear-gradient(145deg, rgba(210,238,255,0.98) 0%, rgba(185,225,255,0.92) 100%) !important;
    border-bottom: 3px solid var(--secondary) !important;
    border-top: none !important;
    box-shadow: 0 4px 18px rgba(0,60,120,0.12), 0 1px 4px rgba(0,0,0,0.05) !important;
}
.stat-box:nth-child(even) {
    background: linear-gradient(145deg, rgba(195,232,255,0.98) 0%, rgba(165,215,255,0.92) 100%) !important;
}
.stat-box h3 { color: #004e7a; }
[data-theme="dark"] .stat-box {
    background: rgba(0,30,55,0.92) !important;
    border-bottom-color: var(--accent) !important;
}
[data-theme="dark"] .stat-box h3 { color: #7dd3fc; }

/* ── 5. SENSOR / LOCATION CARDS ──────────────────────────────── */
.location-card {
    background: linear-gradient(155deg, rgba(222,243,255,0.98) 0%, rgba(205,235,255,0.95) 100%) !important;
    border: 1px solid rgba(0,120,180,0.15) !important;
    box-shadow: 0 4px 18px rgba(0,60,120,0.10), 0 1px 3px rgba(0,0,0,0.05) !important;
}
[data-theme="dark"] .location-card {
    background: #0a1928 !important;
    border-color: rgba(34,211,238,0.1) !important;
}

/* ── 6. TABLE — blue-tinted headers ─────────────────────────── */
th {
    background: rgba(180,220,255,0.65) !important;
    color: #003a5c !important;
    border-bottom: 2px solid rgba(0,100,160,0.2) !important;
}
th:hover { color: var(--primary) !important; }
tbody tr:hover { background: rgba(0,130,200,0.06) !important; }
td { border-bottom-color: rgba(0,80,140,0.08) !important; }
[data-theme="dark"] th {
    background: rgba(0,0,0,0.35) !important;
    color: #7dd3fc !important;
}

/* ── 7. MOBILE DRAWER ────────────────────────────────────────── */
.mobile-nav-drawer {
    background: rgba(0,50,85,0.97) !important;
}
.mobile-nav-drawer a { color: rgba(195,235,255,0.85) !important; }
.mobile-nav-drawer a:hover,
.mobile-nav-drawer a.active {
    background: rgba(0,180,216,0.22) !important;
    color: #fff !important;
}
.mobile-nav-divider { background: rgba(0,180,216,0.18) !important; }
.mobile-nav-logout { color: #fca5a5 !important; }

/* ── 8. FORM INPUTS ──────────────────────────────────────────── */
input, select, textarea {
    background: rgba(235,249,255,0.9) !important;
    border-color: rgba(0,100,160,0.22) !important;
    color: #002c4a !important;
}
input:focus, select:focus, textarea:focus {
    background: rgba(225,245,255,0.98) !important;
    border-color: var(--secondary) !important;
    box-shadow: 0 0 0 3px rgba(0,180,216,0.18) !important;
}
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: #0a1928 !important;
    border-color: #1e3a52 !important;
    color: #e2f0f8 !important;
}

/* ── 9. AUTH CARD ────────────────────────────────────────────── */
.auth-card {
    background: linear-gradient(160deg, rgba(225,245,255,0.97) 0%, rgba(205,237,255,0.96) 100%) !important;
    border: 1px solid rgba(0,120,180,0.22) !important;
    box-shadow: 0 28px 70px rgba(0,40,100,0.22), 0 4px 16px rgba(0,0,0,0.08) !important;
}
.auth-tabs {
    background: rgba(0,100,160,0.1) !important;
}
.auth-tab.active {
    background: rgba(215,240,255,0.98) !important;
    color: var(--primary) !important;
}
[data-theme="dark"] .auth-card {
    background: rgba(10,20,32,0.98) !important;
}
[data-theme="dark"] .auth-tabs {
    background: rgba(0,0,0,0.3) !important;
}

/* ── 10. FILTER BAR ──────────────────────────────────────────── */
.filter-bar {
    background: linear-gradient(160deg, rgba(218,240,255,0.97), rgba(200,232,255,0.95)) !important;
    border: 1px solid rgba(0,100,160,0.18) !important;
}
[data-theme="dark"] .filter-bar {
    background: rgba(13,22,35,0.98) !important;
}

/* ── 11. LOG CONTAINER ───────────────────────────────────────── */
.log-container {
    background: linear-gradient(160deg, rgba(220,242,255,0.97), rgba(200,232,255,0.95)) !important;
    border-color: rgba(0,100,160,0.14) !important;
}
[data-theme="dark"] .log-container {
    background: #0a1928 !important;
}

/* ── 12. INSTALL BANNER ──────────────────────────────────────── */
#fz-install-banner {
    background: linear-gradient(135deg, rgba(220,243,255,0.99), rgba(205,235,255,0.98)) !important;
    border-color: rgba(0,100,160,0.18) !important;
}

/* ── 13. MODAL CARD ──────────────────────────────────────────── */
.modal-content-custom {
    background: linear-gradient(160deg, rgba(220,243,255,0.99), rgba(205,235,255,0.97)) !important;
}
.staff-response-card {
    background: linear-gradient(160deg, rgba(220,243,255,0.99), rgba(205,235,255,0.97)) !important;
}
[data-theme="dark"] .modal-content-custom,
[data-theme="dark"] .staff-response-card {
    background: #0d1624 !important;
}

/* ── 14. PAGE HERO TEXT ──────────────────────────────────────── */
.page-hero h1 { text-shadow: 0 2px 16px rgba(0,0,0,0.20); }

/* ── 15. SCROLLBAR (blue accent) ─────────────────────────────── */
::-webkit-scrollbar-thumb { background: rgba(0,100,170,0.28) !important; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,150,210,0.45) !important; }

/* ── 16. PUSH TOGGLE ─────────────────────────────────────────── */
.push-toggle-switch { background: rgba(0,100,160,0.20) !important; }
.push-toggle-switch.active { background: var(--secondary) !important; }

/* ── 17. CONTACT PAGE HEADER ─────────────────────────────────── */
.contact-page-header {
    background: linear-gradient(155deg, rgba(215,241,255,0.98), rgba(195,230,255,0.96)) !important;
    border: 1px solid rgba(0,100,160,0.15) !important;
}

/* ── 18. HOTKEY BADGE ────────────────────────────────────────── */
.hotkey-badge {
    background: rgba(0,100,160,0.15) !important;
    border-color: rgba(0,160,216,0.28) !important;
    color: #00b4d8 !important;
    backdrop-filter: blur(8px);
}

/* ── 19. PROFILE CARD ────────────────────────────────────────── */
.profile-img { background: rgba(180,225,255,0.6) !important; }
.profile-divider { background: rgba(0,100,160,0.12) !important; }

/* ── 20. LABEL COLORS ────────────────────────────────────────── */
label { color: #003a5c !important; }
[data-theme="dark"] label { color: var(--dark) !important; }


/* ══════════════════════════════════════════════════════════════
   FRESHZONE  ·  DESIGN ELEVATION v3
   Targeted upgrades: fonts, auth, cards, typography, micro-details
   Safe — no breaking changes, only additive improvements
   ══════════════════════════════════════════════════════════════ */

/* ── UPGRADE FONT STACK to something more distinctive ─────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Syne:wght@600;700;800&display=swap');

body {
    font-family: 'Outfit', 'DM Sans', 'Segoe UI', sans-serif;
    letter-spacing: -0.01em;
}
h1, h2, h3, h4 {
    font-family: 'Syne', sans-serif;
    letter-spacing: -0.03em;
}
button, .nav-links a, label { font-family: 'Outfit', sans-serif; }

/* ── AUTH PAGE — complete visual overhaul ─────────────────────── */
.auth-wrapper {
    background: none;
    overflow: hidden;
}

/* Animated mesh behind auth */
.auth-wrapper::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 10% 10%, rgba(0,180,216,0.35) 0%, transparent 55%),
        radial-gradient(ellipse 60% 80% at 90% 85%, rgba(0,78,122,0.5) 0%, transparent 55%),
        radial-gradient(ellipse 50% 50% at 50% 50%, rgba(14,207,239,0.15) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
    animation: meshMove 18s ease-in-out infinite alternate;
}
@keyframes meshMove {
    0%   { transform: scale(1) translate(0,0); }
    50%  { transform: scale(1.06) translate(1%, -1.5%); }
    100% { transform: scale(1) translate(-1%, 1%); }
}
[data-theme="dark"] .auth-wrapper::before {
    background:
        radial-gradient(ellipse 70% 60% at 15% 15%, rgba(34,211,238,0.12) 0%, transparent 55%),
        radial-gradient(ellipse 60% 70% at 85% 80%, rgba(0,78,122,0.25) 0%, transparent 55%);
}

/* Small floating particles */
.auth-wrapper::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.5) 1px, transparent 1px),
        radial-gradient(circle, rgba(0,180,216,0.3) 1px, transparent 1px);
    background-size: 60px 60px, 90px 90px;
    background-position: 0 0, 30px 45px;
    animation: particleDrift 25s linear infinite;
    z-index: 0;
    pointer-events: none;
    opacity: 0.4;
}
[data-theme="dark"] .auth-wrapper::after { opacity: 0.08; }
@keyframes particleDrift { from { background-position: 0 0, 30px 45px; } to { background-position: 60px 60px, 90px 105px; } }

/* Auth container above overlays */
.auth-container { position: relative; z-index: 10; }

/* Header upgrades */
.auth-header h1 {
    font-size: 2.2rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, #ffffff 30%, rgba(144,224,239,0.9) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 12px rgba(0,0,0,0.15));
}
[data-theme="dark"] .auth-header h1 {
    background: linear-gradient(135deg, #e2f0f8 30%, #22d3ee 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
.auth-header p {
    color: rgba(255,255,255,0.82);
    font-size: 0.92rem;
    font-weight: 400;
}

/* Auth card — refined glass panel */
.auth-card {
    background: rgba(232,248,255,0.95) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    border: 1px solid rgba(255,255,255,0.75) !important;
    box-shadow:
        0 0 0 1px rgba(0,120,180,0.08),
        0 32px 72px rgba(0,40,100,0.2),
        0 8px 24px rgba(0,0,0,0.06),
        inset 0 1px 0 rgba(255,255,255,0.9) !important;
    border-radius: 24px !important;
    padding: 2.25rem 2.25rem 2rem !important;
}
[data-theme="dark"] .auth-card {
    background: rgba(8,18,32,0.96) !important;
    border: 1px solid rgba(34,211,238,0.12) !important;
    box-shadow:
        0 0 0 1px rgba(34,211,238,0.06),
        0 32px 72px rgba(0,0,0,0.6),
        0 8px 24px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(34,211,238,0.08) !important;
}

/* Shimmer top bar */
.auth-card::before {
    content: '';
    position: absolute;
    top: 0; left: 15%; right: 15%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0,180,216,0.8), rgba(14,207,239,1), rgba(0,180,216,0.8), transparent);
    border-radius: 0 0 4px 4px;
    animation: shimmerBar 3.5s ease-in-out infinite;
}
@keyframes shimmerBar {
    0%, 100% { opacity: 0.6; left: 20%; right: 20%; }
    50%       { opacity: 1;   left: 10%; right: 10%; }
}
[data-theme="dark"] .auth-card::before {
    background: linear-gradient(90deg, transparent, rgba(34,211,238,0.5), rgba(34,211,238,0.9), rgba(34,211,238,0.5), transparent);
}

/* Logo section */
.brand-section {
    margin-bottom: 1.25rem;
    position: relative;
}
.brand-section::after {
    content: '';
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,120,180,0.18), transparent);
    margin-top: 1.1rem;
}
[data-theme="dark"] .brand-section::after {
    background: linear-gradient(90deg, transparent, rgba(34,211,238,0.12), transparent);
}

/* Tab switcher — pill style */
.auth-tabs {
    background: rgba(0,90,140,0.09) !important;
    border-radius: 12px !important;
    padding: 4px !important;
    margin-bottom: 1.4rem !important;
    border: 1px solid rgba(0,100,160,0.12) !important;
}
[data-theme="dark"] .auth-tabs {
    background: rgba(0,0,0,0.35) !important;
    border-color: rgba(34,211,238,0.08) !important;
}
.auth-tab {
    border-radius: 9px !important;
    font-weight: 600 !important;
    font-size: 0.87rem !important;
    padding: 0.5rem 0 !important;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important;
    letter-spacing: 0 !important;
}
.auth-tab.active {
    background: white !important;
    color: var(--primary) !important;
    box-shadow: 0 2px 10px rgba(0,78,122,0.12), 0 1px 3px rgba(0,0,0,0.08) !important;
    font-weight: 700 !important;
}
[data-theme="dark"] .auth-tab.active {
    background: rgba(34,211,238,0.1) !important;
    color: #22d3ee !important;
    box-shadow: none !important;
}

/* Input fields on auth */
.auth-form-content input,
.auth-form-content select {
    background: rgba(248,252,255,0.92) !important;
    border: 1.5px solid rgba(0,100,160,0.18) !important;
    border-radius: 10px !important;
    color: #002840 !important;
    font-size: 0.92rem !important;
    padding: 0.78rem 0.95rem !important;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
}
.auth-form-content input:focus,
.auth-form-content select:focus {
    background: rgba(255,255,255,0.99) !important;
    border-color: var(--secondary) !important;
    box-shadow: 0 0 0 3px rgba(0,180,216,0.14), 0 2px 8px rgba(0,78,122,0.08) !important;
}
[data-theme="dark"] .auth-form-content input,
[data-theme="dark"] .auth-form-content select {
    background: rgba(10,24,40,0.9) !important;
    border-color: rgba(34,211,238,0.15) !important;
    color: #e2f0f8 !important;
}
[data-theme="dark"] .auth-form-content input:focus,
[data-theme="dark"] .auth-form-content select:focus {
    background: rgba(12,28,48,0.98) !important;
    border-color: #22d3ee !important;
    box-shadow: 0 0 0 3px rgba(34,211,238,0.1) !important;
}

/* Auth labels */
.auth-form-content label {
    color: #004068 !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
}
[data-theme="dark"] .auth-form-content label {
    color: #94a3b8 !important;
}

/* Sign In / primary button in auth */
.auth-form-content .btn-primary,
.auth-form-content button.btn-primary {
    background: linear-gradient(135deg, #004e7a 0%, #006fa3 50%, #00b4d8 100%) !important;
    border-radius: 12px !important;
    padding: 0.92rem 1.5rem !important;
    font-size: 0.96rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 6px 22px rgba(0,78,122,0.35), 0 2px 6px rgba(0,0,0,0.1) !important;
    transition: all 0.22s ease !important;
    position: relative !important;
    overflow: hidden !important;
}
.auth-form-content .btn-primary:hover {
    box-shadow: 0 10px 30px rgba(0,180,216,0.45), 0 4px 10px rgba(0,0,0,0.12) !important;
    transform: translateY(-2px) !important;
    filter: brightness(1.06) !important;
}
.auth-form-content .btn-primary:active {
    transform: translateY(0) !important;
    box-shadow: 0 4px 14px rgba(0,78,122,0.3) !important;
}

/* OTP verify / success button */
.auth-form-content .btn-success {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 20px rgba(22,163,74,0.3) !important;
}

/* Trust badges */
.auth-trust-badge {
    background: rgba(255,255,255,0.15) !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    color: rgba(255,255,255,0.92) !important;
    font-weight: 600 !important;
    backdrop-filter: blur(10px) !important;
    padding: 4px 12px 4px 9px !important;
    font-size: 0.71rem !important;
    letter-spacing: 0.02em !important;
    transition: background 0.2s !important;
}
.auth-trust-badge:hover {
    background: rgba(255,255,255,0.22) !important;
}

/* Forgot password link */
.auth-forgot {
    color: var(--secondary) !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
}

/* OTP input box */
#signup-otp-input, #reset-otp-input {
    text-align: center !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.35em !important;
    color: var(--primary) !important;
    font-family: 'Outfit', monospace !important;
}
[data-theme="dark"] #signup-otp-input,
[data-theme="dark"] #reset-otp-input {
    color: #22d3ee !important;
}

/* ── NAV UPGRADE — sharper, more premium look ──────────────────── */
nav {
    height: 60px !important;
    background: rgba(0,60,100,0.88) !important;
    backdrop-filter: blur(24px) saturate(200%) !important;
    box-shadow: 0 1px 0 rgba(0,180,216,0.2), 0 4px 28px rgba(0,30,60,0.25) !important;
    border-bottom: 1px solid rgba(0,180,216,0.18) !important;
}
.nav-links a {
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.01em !important;
}
.nav-links a.active {
    background: linear-gradient(135deg, rgba(0,180,216,0.9), rgba(14,207,239,0.85)) !important;
    color: white !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 12px rgba(0,180,216,0.4), 0 1px 3px rgba(0,0,0,0.15) !important;
}

/* ── HERO CARD — more presence ──────────────────────────────────── */
.hero {
    border-radius: 20px !important;
    background: linear-gradient(160deg, rgba(228,246,255,0.97) 0%, rgba(208,238,255,0.96) 100%) !important;
    border: 1px solid rgba(0,130,190,0.16) !important;
    box-shadow: 0 8px 32px rgba(0,50,110,0.14), 0 2px 8px rgba(0,0,0,0.06) !important;
    padding: 2.25rem 2rem !important;
}
[data-theme="dark"] .hero {
    background: rgba(8,18,32,0.95) !important;
    border-color: rgba(34,211,238,0.1) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}
.hero h1 {
    font-size: 1.65rem !important;
    font-weight: 800 !important;
    color: #003a5c !important;
    letter-spacing: -0.03em !important;
}
[data-theme="dark"] .hero h1 { color: #e2f0f8 !important; }
.hero > p {
    color: #3a7c99 !important;
    font-size: 0.95rem !important;
    font-weight: 400 !important;
}
[data-theme="dark"] .hero > p { color: #94a3b8 !important; }

/* ── SENSOR CARDS — more premium ───────────────────────────────── */
.location-card {
    border-radius: 18px !important;
    padding: 1.5rem 1.5rem 1.25rem !important;
    border-left-width: 5px !important;
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), box-shadow 0.25s !important;
}
.location-card:hover {
    transform: translateY(-5px) scale(1.008) !important;
    box-shadow: 0 16px 40px rgba(0,50,110,0.18), 0 4px 12px rgba(0,0,0,0.08) !important;
}
.zone-card-header h3 {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #003a5c !important;
    letter-spacing: -0.02em !important;
}
[data-theme="dark"] .zone-card-header h3 { color: #e2f0f8 !important; }

/* ── STAT BOXES — more distinctive numbers ─────────────────────── */
.stat-box h3 {
    font-size: 2.1rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    color: #003049 !important;
}
[data-theme="dark"] .stat-box h3 {
    color: #7dd3fc !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}
.stat-box p {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #0c4a6e !important;
}
[data-theme="dark"] .stat-box p { color: #cbd5e1 !important; }

/* ── GLASS CARDS — subtle inner glow ───────────────────────────── */
.glass-card, .card {
    border-radius: 20px !important;
    box-shadow: 0 6px 28px rgba(0,50,110,0.12), 0 1px 4px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.7) !important;
    border: 1px solid rgba(0,120,180,0.14) !important;
}
[data-theme="dark"] .glass-card,
[data-theme="dark"] .card {
    box-shadow: 0 6px 28px rgba(0,0,0,0.5), inset 0 1px 0 rgba(34,211,238,0.06) !important;
    border-color: rgba(34,211,238,0.08) !important;
}

/* ══ Shared page masthead (Dashboard + History) — same frosted card as other app pages ══ */
.fz-masthead {
    position: relative;
    overflow: hidden;
    background: linear-gradient(165deg, #e8f4fc 0%, #d0ebf7 50%, #c5e8f4 100%) !important;
    border: 1px solid rgba(0, 100, 150, 0.16) !important;
    box-shadow: 0 4px 28px rgba(0, 45, 90, 0.1), 0 1px 0 rgba(255, 255, 255, 0.65) inset !important;
    border-radius: 20px !important;
}
.fz-masthead::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #00b4d8, #0ecfef, #7dd3fc, #a78bfa);
    opacity: 0.9;
    pointer-events: none;
}
.fz-masthead::after {
    content: "";
    position: absolute;
    top: -40%; right: -15%;
    width: 50%; height: 120%;
    background: radial-gradient(ellipse, rgba(0, 180, 216, 0.2) 0%, transparent 70%);
    pointer-events: none;
}
[data-theme="dark"] .fz-masthead {
    background: linear-gradient(165deg, rgba(10, 24, 42, 0.96) 0%, rgba(6, 18, 35, 0.98) 100%) !important;
    border-color: rgba(34, 211, 238, 0.2) !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(34, 211, 238, 0.08) !important;
}
[data-theme="dark"] .fz-masthead::after {
    background: radial-gradient(ellipse, rgba(34, 211, 238, 0.12) 0%, transparent 70%);
}
/* Per-stat number colors: see style-v2.css (loads after) */

/* ── TABLE IMPROVEMENTS ─────────────────────────────────────────── */
.log-container {
    border-radius: 18px !important;
    overflow: hidden !important;
}
th {
    font-size: 0.68rem !important;
    letter-spacing: 0.08em !important;
    font-weight: 800 !important;
}
td {
    font-size: 0.86rem !important;
    font-weight: 400 !important;
}
.log-container td { color: #0f172a !important; }
[data-theme="dark"] .log-container td { color: #e2e8f0 !important; }
tbody tr:hover { transition: background 0.15s !important; }

/* ── BUTTONS — sharper, more confident ──────────────────────────── */
button {
    border-radius: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important;
}
button:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.06) !important;
}
button:active {
    transform: translateY(0) scale(0.99) !important;
    filter: brightness(0.98) !important;
}
.ack-btn, .resolve-btn {
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
}

/* ── MOBILE BOTTOM NAV — premium look ──────────────────────────── */
@media (max-width: 768px) {
    #fz-bottom-nav {
        background: rgba(0,50,85,0.96) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        border-top: 1px solid rgba(0,180,216,0.2) !important;
        box-shadow: 0 -4px 24px rgba(0,30,60,0.3) !important;
    }
    .fz-bn-tab { color: rgba(180,220,255,0.6) !important; }
    .fz-bn-tab.active { color: #0ecfef !important; }
    .fz-bn-tab.active::after { background: #0ecfef !important; }
    [data-theme="dark"] #fz-bottom-nav {
        background: rgba(4,10,22,0.97) !important;
        border-top-color: rgba(34,211,238,0.1) !important;
    }
    [data-theme="dark"] .fz-bn-tab.active { color: #22d3ee !important; }

    #fz-bn-more-menu {
        background: rgba(0,45,80,0.97) !important;
        border-color: rgba(0,180,216,0.2) !important;
        backdrop-filter: blur(20px) !important;
    }
    .fz-bn-more-item { color: rgba(195,235,255,0.9) !important; }
    .fz-bn-more-item.danger { color: #fca5a5 !important; }
    .fz-bn-more-item:not(:last-child) {
        border-bottom-color: rgba(0,180,216,0.12) !important;
    }
}

/* ── NOTIFICATIONS — more defined ───────────────────────────────── */
.notification {
    border-radius: 14px !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    box-shadow: 0 10px 36px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.1) !important;
    padding: 0.9rem 1.3rem !important;
}

/* ── PAGE HERO TEXT ──────────────────────────────────────────────── */
.page-hero h1 {
    font-size: 1.9rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
    text-shadow: 0 2px 20px rgba(0,0,0,0.18) !important;
}

/* ── FILTER ACTIONS ─────────────────────────────────────────────── */
.filter-action-btn {
    border-radius: 10px !important;
    font-weight: 700 !important;
}

/* ── TAGS — slightly bolder ─────────────────────────────────────── */
.tag {
    font-weight: 700 !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.04em !important;
}

/* ── PROFILE PAGE — name & badge ────────────────────────────────── */
.profile-name {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
}
.profile-role-badge {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
}

/* ── LIVE BADGE — more visible ──────────────────────────────────── */
.live-badge {
    font-weight: 700 !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.05em !important;
    padding: 4px 12px !important;
}

/* ── FOOTER ──────────────────────────────────────────────────────── */
footer {
    font-size: 0.8rem !important;
    color: rgba(255,255,255,0.55) !important;
    letter-spacing: 0.01em !important;
}