/*
╔══════════════════════════════════════════════════════════╗
║           HELPR ADAR PRO  ·  style.css                   ║
║     Design: Dark Luxury · Electric Cyan + Neon Green     ║
║                                                          ║
║  CONTENTS                                                ║
║  1.  CSS Variables & Reset                               ║
║  2.  Screen System                                       ║
║  3.  Shared Components (Logo, Buttons, Pills)            ║
║  4.  Screen 1  · Welcome / Landing Page                  ║
║  5.  Screen 2&3 · Auth Pages (User + Owner)              ║
║  6.  Screen 4  · Main Dashboard (9 Cards)                ║
║  7.  Category Dashboards (Hospital, Police, etc.)        ║
║  8.  Owner Dashboard                                     ║
║  9.  Modal & Toast                                       ║
║  10. Animations & Responsive                             ║
╚══════════════════════════════════════════════════════════╝
*/

/* ============================================================
   HELPR ADAR PRO — PREMIUM DESIGN SYSTEM
   Aesthetic: Dark luxury with electric accents
   Vibe: Cyberpunk meets fintech — sophisticated danger
============================================================ */

:root {
  /* Core palette */
  --void:       #020408;
  --deep:       #060d18;
  --surface:    #0a1628;
  --panel:      #0f1f3a;
  --card:       #111d35;
  --card-hover: #162344;
  --border:     rgba(99,179,237,0.12);
  --border-glow:rgba(99,179,237,0.35);

  /* Electric accent system */
  --cyan:       #00d4ff;
  --cyan-dim:   #0099bb;
  --electric:   #3b82f6;
  --neon-green: #00ff88;
  --neon-green-dim:#00cc6a;
  --amber:      #f59e0b;
  --coral:      #ff6b6b;
  --violet:     #8b5cf6;

  /* Gradients */
  --grad-cyan:  linear-gradient(135deg, #00d4ff, #3b82f6);
  --grad-green: linear-gradient(135deg, #00ff88, #00cc6a);
  --grad-fire:  linear-gradient(135deg, #ff6b6b, #f59e0b);
  --grad-violet:linear-gradient(135deg, #8b5cf6, #3b82f6);
  --grad-hero:  linear-gradient(135deg, #020408 0%, #060d18 40%, #0a1a2e 100%);

  /* Text */
  --text-primary:  #f0f4ff;
  --text-secondary:#8aa4c8;
  --text-muted:    #4a6080;

  /* Glows */
  --glow-cyan:  0 0 40px rgba(0,212,255,0.3), 0 0 80px rgba(0,212,255,0.1);
  --glow-green: 0 0 40px rgba(0,255,136,0.3), 0 0 80px rgba(0,255,136,0.1);
  --glow-fire:  0 0 40px rgba(255,107,107,0.3);
  --glow-card:  0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(99,179,237,0.08);

  --r: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{
  font-family:'Plus Jakarta Sans',sans-serif;
  background:var(--void);
  color:var(--text-primary);
  min-height:100vh;
  overflow-x:hidden;
  cursor:default;
}

/* Custom scrollbar */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--deep)}
::-webkit-scrollbar-thumb{background:var(--cyan-dim);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--cyan)}

/* ── SCREENS ── */
.screen{display:none;min-height:100vh;flex-direction:column}
.screen.active{display:flex}

/* ── PARTICLE CANVAS ── */
#particleCanvas{
  position:fixed;top:0;left:0;width:100%;height:100%;
  pointer-events:none;z-index:0;opacity:0.4;
}

.splash-screen{
  position:fixed;
  inset:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at top, rgba(0,212,255,0.12), transparent 35%), rgba(1,7,18,0.98);
  backdrop-filter:blur(14px);
  padding:24px;
  transition:opacity .4s ease, transform .4s ease;
}
.splash-screen.hidden{
  opacity:0;
  pointer-events:none;
  transform:scale(0.98);
}
.splash-screen .splash-content{
  width:100%;
  max-width:560px;
  text-align:center;
  color:#f8fbff;
  position:relative;
}
.splash-logo-wrap{
  position:relative;
  width:140px;
  height:140px;
  margin:0 auto 24px;
}
.splash-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(0,212,255,0.12);
  animation:spin-slow 12s linear infinite;
}
.splash-ring.ring-2{animation-duration:16s; border-color:rgba(0,255,136,0.14);}
.splash-ring.ring-1{transform:scale(0.84);}
.splash-ring.ring-3{transform:scale(0.68);border-color:rgba(139,92,246,0.14);}
.splash-icon{
  position:absolute;
  inset:24px;
  border-radius:24px;
  background:linear-gradient(135deg,#00d4ff,#00ff88);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:44px;
  box-shadow:0 0 40px rgba(0,255,136,0.2);
}
.splash-welcome-text,
.splash-sub,
.splash-load-txt,
.splash-hint{
  position:relative;
  z-index:2;
}
.splash-title{
  font-size:clamp(48px,5vw,72px);
  line-height:1.05;
  margin:18px 0 12px;
}
.splash-title span{
  background:linear-gradient(135deg,#00d4ff,#00ff88);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.splash-pills{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:22px 0 20px;
}
.s-pill{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:999px;
  padding:10px 16px;
  font-size:13px;
}
.splash-bar{
  width:100%;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  overflow:hidden;
  margin:0 auto 10px;
}
.splash-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#00d4ff,#00ff88);
  border-radius:999px;
  transition:width .3s ease;
}
.splash-load-txt{
  font-size:14px;
  color:#cbd5e1;
  margin-bottom:10px;
}
.splash-hint{
  display:inline-flex;
  align-items:center;
  gap:8px;
  justify-content:center;
  color:#a8c7ff;
  font-size:14px;
  opacity:0.86;
  cursor:pointer;
}
.hint-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#00d4ff;
  box-shadow:0 0 15px rgba(0,212,255,0.35);
}
@keyframes spin-slow{
  to{transform:rotate(360deg);}
}

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

/* ── SHARED COMPONENTS ── */

/* Logo */
.hr-logo{
  display:inline-flex;align-items:center;gap:12px;
  font-family:'Outfit',sans-serif;font-size:22px;font-weight:800;
  color:var(--text-primary);text-decoration:none;position:relative;z-index:2;
}
.hr-logo-icon{
  width:38px;height:38px;border-radius:10px;
  background:var(--grad-cyan);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
  box-shadow:var(--glow-cyan);
  animation:logo-pulse 3s ease infinite;
}
.hr-logo span{
  background:var(--grad-cyan);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}

/* Glassmorphism card */
.glass{
  background:rgba(15,31,58,0.6);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
}
.glass:hover{border-color:var(--border-glow)}

/* Glow button */
.btn-glow{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 28px;border:none;border-radius:12px;
  font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;
  cursor:pointer;transition:all 0.3s;position:relative;overflow:hidden;
  letter-spacing:0.3px;
}
.btn-glow::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.1) 50%,transparent 70%);
  transform:translateX(-100%);transition:transform 0.5s;
}
.btn-glow:hover::before{transform:translateX(100%)}
.btn-glow:hover{transform:translateY(-2px)}
.btn-glow:active{transform:translateY(0)}

.btn-cyan{background:var(--grad-cyan);color:#000;box-shadow:0 4px 24px rgba(0,212,255,0.4)}
.btn-cyan:hover{box-shadow:0 8px 40px rgba(0,212,255,0.6)}
.btn-green{background:var(--grad-green);color:#000;box-shadow:0 4px 24px rgba(0,255,136,0.4)}
.btn-green:hover{box-shadow:0 8px 40px rgba(0,255,136,0.6)}
.btn-dark{background:var(--panel);color:var(--text-primary);border:1px solid var(--border)}
.btn-dark:hover{border-color:var(--cyan);box-shadow:0 0 20px rgba(0,212,255,0.2)}
.btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--border-glow);color:var(--text-primary)}
.btn-fire{background:var(--grad-fire);color:#fff;box-shadow:var(--glow-fire)}
.btn-fire:hover{box-shadow:0 8px 40px rgba(255,107,107,0.6)}
.btn-admin{
  background:linear-gradient(135deg,#1a0030,#2d1b69);
  color:#c4b5fd;border:1px solid rgba(139,92,246,0.4);
  box-shadow:0 4px 24px rgba(139,92,246,0.3);
}
.btn-admin:hover{box-shadow:0 8px 40px rgba(139,92,246,0.5);border-color:rgba(139,92,246,0.7)}

/* Status badges */
.pill{
  display:inline-flex;align-items:center;gap:5px;
  border-radius:20px;padding:3px 10px;
  font-size:11px;font-weight:700;letter-spacing:0.3px;
}
.pill-green{background:rgba(0,255,136,0.12);color:var(--neon-green);border:1px solid rgba(0,255,136,0.2)}
.pill-cyan{background:rgba(0,212,255,0.12);color:var(--cyan);border:1px solid rgba(0,212,255,0.2)}
.pill-amber{background:rgba(245,158,11,0.12);color:var(--amber);border:1px solid rgba(245,158,11,0.2)}
.pill-fire{background:rgba(255,107,107,0.12);color:var(--coral);border:1px solid rgba(255,107,107,0.2)}
.pill-violet{background:rgba(139,92,246,0.12);color:var(--violet);border:1px solid rgba(139,92,246,0.2)}

/* Divider */
.divider{height:1px;background:var(--border);margin:20px 0}

/* Section titles */
.sec-label{
  font-size:11px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:var(--cyan);
  display:flex;align-items:center;gap:8px;margin-bottom:8px;
}
.sec-label::before{content:'';width:20px;height:1px;background:var(--cyan)}
.sec-title{
  font-family:'Outfit',sans-serif;
  font-size:clamp(28px,4vw,48px);
  font-weight:800;line-height:1.1;
  color:var(--text-primary);
}
.sec-title span{
  background:var(--grad-cyan);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}

/* ============================================================
   SCREEN 1 — WELCOME / LANDING
============================================================ */
#welcomeScreen{
  background:var(--grad-hero);
  position:relative;overflow:hidden;
}

/* Animated mesh gradient background */
.mesh-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 800px 600px at 20% 20%, rgba(0,212,255,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 600px 800px at 80% 80%, rgba(0,255,136,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 400px 400px at 60% 30%, rgba(139,92,246,0.06) 0%, transparent 50%);
  animation:mesh-shift 8s ease infinite alternate;
}

/* Glowing orbs */
.orb{
  position:absolute;border-radius:50%;
  filter:blur(80px);pointer-events:none;
  animation:orb-float 6s ease infinite;
}
.orb-1{width:400px;height:400px;background:rgba(0,212,255,0.08);top:-100px;left:-100px;animation-delay:0s}
.orb-2{width:300px;height:300px;background:rgba(0,255,136,0.06);bottom:-50px;right:10%;animation-delay:2s}
.orb-3{width:200px;height:200px;background:rgba(139,92,246,0.08);top:40%;right:-50px;animation-delay:4s}

/* Grid lines */
.grid-lines{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(0,212,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.03) 1px, transparent 1px);
  background-size:60px 60px;
  pointer-events:none;
}

/* Welcome Nav */
.w-nav{
  position:relative;z-index:10;
  padding:20px 48px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(0,212,255,0.08);
  backdrop-filter:blur(10px);
}
.w-nav-links{display:flex;gap:6px}
.w-nav-link{
  background:transparent;border:none;
  padding:8px 18px;border-radius:20px;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:600;
  color:var(--text-muted);cursor:pointer;transition:all 0.2s;
}
.w-nav-link:hover{
  color:var(--text-primary);
  background:rgba(0,212,255,0.08);
}

/* Hero body */
.w-body{
  position:relative;z-index:2;
  flex:1;display:flex;align-items:center;
  padding:60px 48px;gap:60px;
}

.w-left{flex:1;max-width:580px}

/* Floating badge */
.w-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(0,212,255,0.08);
  border:1px solid rgba(0,212,255,0.2);
  border-radius:20px;padding:6px 16px;
  font-size:12px;font-weight:700;color:var(--cyan);
  margin-bottom:28px;
  animation:fadeUp 0.6s ease both;
}
.w-badge .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--neon-green);
  box-shadow:0 0 8px var(--neon-green);
  animation:pulse-dot 1.5s infinite;
}

.w-headline{
  font-family:'Outfit',sans-serif;
  font-size:clamp(40px,5.5vw,72px);
  font-weight:900;line-height:1.05;
  color:var(--text-primary);
  margin-bottom:24px;
  animation:fadeUp 0.7s ease 0.1s both;
}
.w-headline .accent{
  background:var(--grad-cyan);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  position:relative;
}
.w-headline .accent-2{
  background:var(--grad-green);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}

.w-desc{
  font-size:17px;color:var(--text-secondary);
  line-height:1.7;margin-bottom:40px;max-width:480px;
  animation:fadeUp 0.7s ease 0.2s both;
}

/* CTA Buttons */
.w-btns{
  display:flex;gap:14px;flex-wrap:wrap;
  margin-bottom:48px;
  animation:fadeUp 0.7s ease 0.3s both;
}
.w-btns .btn-glow{font-size:15px;padding:15px 32px}

/* Stats row */
.w-stats{
  display:flex;gap:32px;flex-wrap:wrap;
  animation:fadeUp 0.7s ease 0.4s both;
}
.w-stat{}
.w-stat-num{
  font-family:'Outfit',sans-serif;
  font-size:28px;font-weight:900;
  background:var(--grad-cyan);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  line-height:1;
}
.w-stat-label{font-size:12px;color:var(--text-muted);font-weight:600;margin-top:3px}

/* Right — phone mockup */
.w-right{
  flex:0 0 400px;
  display:flex;flex-direction:column;gap:20px;
  animation:fadeUp 0.8s ease 0.2s both;
}

.phone-mock{
  background:linear-gradient(145deg,#111d35,#0a1628);
  border:1px solid rgba(0,212,255,0.15);
  border-radius:32px;padding:24px;
  box-shadow:
    0 40px 80px rgba(0,0,0,0.6),
    0 0 0 1px rgba(0,212,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.05);
  transform:rotate(3deg) translateY(-10px);
  animation:phone-float 4s ease infinite;
}
.phone-screen{
  background:var(--deep);border-radius:20px;
  padding:20px;border:1px solid var(--border);
}
.phone-map{
  height:120px;border-radius:14px;
  background:linear-gradient(135deg,#0a1628,#0f2040);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:32px;letter-spacing:6px;
  margin-bottom:14px;
  position:relative;overflow:hidden;
}
.phone-map::after{
  content:'';position:absolute;
  width:60px;height:60px;border-radius:50%;
  background:rgba(0,212,255,0.15);
  top:30%;left:40%;
  box-shadow:0 0 30px rgba(0,212,255,0.4);
  animation:radar-pulse 2s ease infinite;
}
.phone-row{
  display:flex;align-items:center;gap:10px;
  background:rgba(0,212,255,0.04);
  border:1px solid rgba(0,212,255,0.08);
  border-radius:10px;padding:10px 12px;
  margin-bottom:8px;font-size:12px;font-weight:600;
  color:var(--text-secondary);
}
.phone-dot{width:7px;height:7px;border-radius:50%;background:var(--neon-green);flex-shrink:0;box-shadow:0 0 8px var(--neon-green)}

.mini-cards{display:flex;gap:12px}
.mini-card{
  flex:1;background:rgba(0,212,255,0.04);
  border:1px solid rgba(0,212,255,0.1);
  border-radius:14px;padding:14px;text-align:center;
  transition:all 0.3s;
}
.mini-card:hover{border-color:rgba(0,212,255,0.3);transform:translateY(-3px)}
.mini-num{
  font-family:'Outfit',sans-serif;font-size:20px;font-weight:900;
  background:var(--grad-cyan);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.mini-lbl{font-size:10px;color:var(--text-muted);font-weight:600;margin-top:2px}

/* Feature pills */
.w-features{
  display:flex;gap:10px;flex-wrap:wrap;
  animation:fadeUp 0.7s ease 0.5s both;
}
.feat-pill{
  display:flex;align-items:center;gap:7px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border);
  border-radius:20px;padding:7px 14px;
  font-size:12px;font-weight:600;color:var(--text-secondary);
  transition:all 0.2s;
}
.feat-pill:hover{border-color:var(--border-glow);color:var(--text-primary)}

/* Footer strip */
.w-footer{
  position:relative;z-index:2;
  background:rgba(6,13,24,0.8);
  border-top:1px solid var(--border);
  padding:16px 48px;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;
  backdrop-filter:blur(10px);
}
.w-footer-feats{display:flex;gap:24px;flex-wrap:wrap}
.w-footer-feat{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--text-muted);font-weight:500;
}
.w-footer-links{display:flex;gap:16px}
.w-footer-links a{font-size:12px;color:var(--text-muted);text-decoration:none;transition:color 0.2s}
.w-footer-links a:hover{color:var(--cyan)}


/* ============================================================
   SCREEN 2 & 3 — AUTH PAGES
============================================================ */
.auth-screen{background:var(--void);position:relative;overflow:hidden}

.auth-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 600px 600px at 0% 50%, rgba(0,212,255,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 400px 600px at 100% 50%, rgba(0,255,136,0.04) 0%, transparent 60%);
}

.auth-layout{display:flex;min-height:100vh;position:relative;z-index:2}

/* Left panel */
.auth-panel{
  flex:0 0 460px;
  background:linear-gradient(160deg,#060d18 0%,#0a1628 50%,#0f1f3a 100%);
  padding:48px 40px;
  display:flex;flex-direction:column;
  border-right:1px solid var(--border);
  position:relative;overflow:hidden;
}
.auth-panel::before{
  content:'';position:absolute;
  bottom:-100px;left:-100px;
  width:350px;height:350px;border-radius:50%;
  background:rgba(0,212,255,0.06);
  filter:blur(60px);
}
.auth-panel::after{
  content:'';position:absolute;
  top:-80px;right:-80px;
  width:250px;height:250px;border-radius:50%;
  background:rgba(0,255,136,0.05);
  filter:blur(60px);
}

.auth-panel-brand{position:relative;z-index:2;margin-bottom:44px}

.auth-panel-title{
  position:relative;z-index:2;
  font-family:'Outfit',sans-serif;
  font-size:30px;font-weight:800;
  color:var(--text-primary);line-height:1.2;margin-bottom:14px;
}
.auth-panel-sub{
  position:relative;z-index:2;
  font-size:14px;color:var(--text-secondary);
  line-height:1.7;margin-bottom:40px;
}

.auth-perks{position:relative;z-index:2}
.perk-item{
  display:flex;align-items:flex-start;gap:14px;
  margin-bottom:20px;
}
.perk-icon{
  width:36px;height:36px;border-radius:10px;
  background:rgba(0,212,255,0.08);
  border:1px solid rgba(0,212,255,0.15);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;
}
.perk-title{font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:2px}
.perk-desc{font-size:12px;color:var(--text-muted)}

/* Right form */
.auth-form-wrap{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:40px 32px;
  background:var(--void);
}

.auth-box{
  width:100%;max-width:420px;
  background:rgba(10,22,40,0.8);
  backdrop-filter:blur(20px);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  padding:40px 36px;
  box-shadow:0 40px 80px rgba(0,0,0,0.5),0 0 0 1px rgba(0,212,255,0.05);
  animation:fadeUp 0.5s ease;
}

.auth-label-badge{
  display:inline-flex;align-items:center;gap:6px;
  border-radius:8px;padding:5px 12px;
  font-size:11px;font-weight:700;letter-spacing:0.5px;
  margin-bottom:20px;
}
.auth-label-cyan{background:rgba(0,212,255,0.1);color:var(--cyan);border:1px solid rgba(0,212,255,0.2)}
.auth-label-green{background:rgba(0,255,136,0.1);color:var(--neon-green);border:1px solid rgba(0,255,136,0.2)}

.auth-title{
  font-family:'Outfit',sans-serif;
  font-size:26px;font-weight:800;
  color:var(--text-primary);margin-bottom:6px;
}
.auth-subtitle{font-size:13px;color:var(--text-muted);margin-bottom:28px;line-height:1.5}

/* Google button */
.btn-google{
  width:100%;padding:13px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:12px;cursor:pointer;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:700;
  color:var(--text-primary);transition:all 0.2s;
}
.btn-google:hover{
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.2);
  box-shadow:0 4px 20px rgba(0,0,0,0.3);
}
.g-icon{
  width:20px;height:20px;border-radius:50%;
  background:linear-gradient(135deg,#4285f4,#34a853,#fbbc04,#ea4335);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:900;color:#fff;
}

/* Auth divider */
.auth-divider{
  display:flex;align-items:center;gap:14px;
  margin:20px 0;color:var(--text-muted);
  font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
}
.auth-divider::before,.auth-divider::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--border),transparent);
}

/* Form fields */
.f-group{margin-bottom:16px}
.f-label{
  display:block;font-size:11px;font-weight:700;
  color:var(--text-muted);margin-bottom:7px;
  text-transform:uppercase;letter-spacing:1px;
}
.f-input{
  width:100%;padding:12px 14px;
  background:rgba(0,212,255,0.03);
  border:1px solid var(--border);
  border-radius:10px;color:var(--text-primary);
  font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;
  transition:all 0.2s;
}
.f-input:focus{
  outline:none;
  border-color:var(--cyan);
  background:rgba(0,212,255,0.05);
  box-shadow:0 0 0 3px rgba(0,212,255,0.1),var(--glow-cyan);
}
.f-input::placeholder{color:var(--text-muted)}

/* Submit button */
.btn-auth-submit{
  width:100%;padding:14px;border:none;
  border-radius:12px;font-family:'Outfit',sans-serif;
  font-size:15px;font-weight:800;cursor:pointer;
  transition:all 0.3s;letter-spacing:0.3px;
  margin-top:6px;position:relative;overflow:hidden;
}
.btn-auth-submit::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(45deg,transparent,rgba(255,255,255,0.1),transparent);
  transform:translateX(-100%);transition:0.5s;
}
.btn-auth-submit:hover::after{transform:translateX(100%)}
.btn-auth-submit:hover{transform:translateY(-1px)}

.bts-cyan{background:var(--grad-cyan);color:#000;box-shadow:0 4px 24px rgba(0,212,255,0.4)}
.bts-green{background:var(--grad-green);color:#000;box-shadow:0 4px 24px rgba(0,255,136,0.4)}

.auth-switch{text-align:center;margin-top:20px;font-size:13px;color:var(--text-muted)}
.auth-switch button{
  background:none;border:none;cursor:pointer;font-size:13px;font-weight:700;
  transition:color 0.2s;
}
.link-cyan{color:var(--cyan)}
.link-green{color:var(--neon-green)}
.auth-switch button:hover{text-decoration:underline}

.auth-back-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:none;cursor:pointer;
  font-size:13px;font-weight:600;color:var(--text-muted);
  transition:color 0.2s;margin-bottom:24px;padding:0;
}
.auth-back-btn:hover{color:var(--cyan)}

/* ============================================================
   SCREEN 4 — MAIN DASHBOARD (9 Cards)
============================================================ */
#mainDashboard{background:var(--void)}

/* Dash navbar */
.d-nav{
  background:rgba(6,13,24,0.9);
  border-bottom:1px solid var(--border);
  padding:0 28px;
  display:flex;align-items:center;gap:16px;
  height:64px;
  position:sticky;top:0;z-index:200;
  backdrop-filter:blur(20px);
}
.d-search{
  flex:1;max-width:420px;
  display:flex;
  background:rgba(0,212,255,0.04);
  border:1px solid var(--border);
  border-radius:12px;overflow:hidden;
  transition:border-color 0.2s;
}
.d-search:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,212,255,0.08)}
.d-search input{
  flex:1;padding:9px 14px;
  background:transparent;border:none;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;
  color:var(--text-primary);
}
.d-search input:focus{outline:none}
.d-search input::placeholder{color:var(--text-muted)}
.d-search-btn{
  padding:9px 16px;background:var(--cyan);border:none;
  color:#000;font-size:13px;font-weight:700;cursor:pointer;
  font-family:'Outfit',sans-serif;transition:opacity 0.2s;
}
.d-search-btn:hover{opacity:0.88}

.d-nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.d-loc-btn{
  display:flex;align-items:center;gap:6px;
  padding:8px 14px;background:rgba(0,212,255,0.08);
  border:1px solid rgba(0,212,255,0.2);
  border-radius:10px;color:var(--cyan);
  font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:700;
  cursor:pointer;transition:all 0.2s;
}
.d-loc-btn:hover{background:rgba(0,212,255,0.15);box-shadow:0 0 20px rgba(0,212,255,0.2)}
.d-exit-btn{
  padding:8px 14px;background:transparent;
  border:1px solid var(--border);border-radius:10px;
  color:var(--text-muted);font-family:'Plus Jakarta Sans',sans-serif;
  font-size:12px;font-weight:700;cursor:pointer;transition:all 0.2s;
}
.d-exit-btn:hover{border-color:var(--coral);color:var(--coral)}
.d-avatar{
  width:34px;height:34px;border-radius:50%;
  background:var(--grad-cyan);
  display:flex;align-items:center;justify-content:center;
  color:#000;font-size:13px;font-weight:800;cursor:pointer;
  box-shadow:var(--glow-cyan);
}

/* Hero banner */
.d-hero{
  padding:32px 28px;
  background:linear-gradient(135deg,var(--deep) 0%,var(--surface) 100%);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px;
  position:relative;overflow:hidden;
}
.d-hero::before{
  content:'';position:absolute;
  right:-100px;top:-100px;
  width:400px;height:400px;border-radius:50%;
  background:rgba(0,212,255,0.03);
  filter:blur(60px);
}
.d-hero h2{
  font-family:'Outfit',sans-serif;
  font-size:22px;font-weight:800;
  color:var(--text-primary);margin-bottom:4px;
}
.d-hero p{font-size:13px;color:var(--text-secondary)}
.d-hero-stats{display:flex;gap:14px;flex-wrap:wrap}
.d-h-stat{
  background:rgba(0,212,255,0.06);
  border:1px solid rgba(0,212,255,0.12);
  border-radius:12px;padding:12px 18px;
  text-align:center;min-width:70px;
  transition:all 0.3s;
}
.d-h-stat:hover{border-color:rgba(0,212,255,0.3);box-shadow:0 0 20px rgba(0,212,255,0.1)}
.d-h-num{
  font-family:'Outfit',sans-serif;font-size:20px;font-weight:900;
  background:var(--grad-cyan);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.d-h-lbl{font-size:10px;color:var(--text-muted);font-weight:600}

/* Filter bar */
.d-filters{
  padding:14px 28px;
  display:flex;gap:8px;flex-wrap:wrap;
  border-bottom:1px solid var(--border);
  background:rgba(6,13,24,0.6);
  backdrop-filter:blur(10px);
}
.f-chip{
  display:flex;align-items:center;gap:5px;
  padding:6px 14px;border-radius:20px;
  border:1px solid var(--border);
  background:transparent;
  font-size:12px;font-weight:700;color:var(--text-muted);
  cursor:pointer;transition:all 0.2s;white-space:nowrap;
}
.f-chip.active{
  background:rgba(0,212,255,0.1);
  border-color:rgba(0,212,255,0.3);
  color:var(--cyan);
  box-shadow:0 0 12px rgba(0,212,255,0.15);
}
.f-chip:not(.active):hover{border-color:var(--border-glow);color:var(--text-secondary)}

/* Status bar */
.d-status{
  padding:8px 28px;
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--text-muted);font-weight:600;
  background:rgba(2,4,8,0.4);
  border-bottom:1px solid var(--border);
}
.s-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--neon-green);
  box-shadow:0 0 8px var(--neon-green);
  animation:pulse-dot 2s infinite;flex-shrink:0;
}

/* ── CARDS GRID ── */
.cards-grid{
  padding:24px 28px 48px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;align-items:start;
}

/* Service card */
.svc-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  display:flex;flex-direction:column;
  cursor:pointer;
  transition:all 0.35s cubic-bezier(0.4,0,0.2,1);
  position:relative;
}
.svc-card::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(0,212,255,0.03),transparent);
  opacity:0;transition:opacity 0.3s;pointer-events:none;
}
.svc-card:hover::before{opacity:1}
.svc-card:hover{
  transform:translateY(-6px);
  border-color:rgba(0,212,255,0.25);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.5),
    0 0 0 1px rgba(0,212,255,0.15),
    0 0 40px rgba(0,212,255,0.08);
}

/* Card top band */
.c-band{
  padding:18px 18px 14px;
  display:flex;align-items:center;gap:13px;
}
.c-icon{
  width:48px;height:48px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;flex-shrink:0;
  border:1px solid rgba(255,255,255,0.08);
  transition:transform 0.3s;
}
.svc-card:hover .c-icon{transform:scale(1.1) rotate(-5deg)}
.c-name{
  font-family:'Outfit',sans-serif;font-size:16px;font-weight:700;
  color:var(--text-primary);
}
.c-tag{
  font-size:10px;font-weight:700;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:0.7px;margin-top:2px;
}

/* Card meta */
.c-meta{
  padding:0 18px 12px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}

/* Facilities */
.c-facils{
  padding:4px 18px 10px;
  display:flex;gap:5px;flex-wrap:wrap;
}
.facil-chip{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;padding:3px 9px;
  font-size:10px;font-weight:600;color:var(--text-muted);
  white-space:nowrap;transition:all 0.2s;
}
.svc-card:hover .facil-chip{border-color:var(--border-glow);color:var(--text-secondary)}

/* Emergency strip */
.emrg-strip{
  margin:0 14px 10px;
  border-radius:10px;padding:9px 12px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  border:1px solid;
  position:relative;overflow:hidden;
}
.emrg-strip::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,0.02),transparent);
}
.emrg-left{display:flex;align-items:center;gap:7px;position:relative}
.emrg-pulse{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  animation:emrg-blink 1.2s infinite;
}
.emrg-lbl{font-size:11px;font-weight:800;letter-spacing:0.4px;text-transform:uppercase}
.emrg-btn{
  border:none;border-radius:8px;padding:5px 13px;
  font-family:'Outfit',sans-serif;font-size:12px;font-weight:800;
  cursor:pointer;transition:all 0.2s;white-space:nowrap;flex-shrink:0;
  position:relative;
}
.emrg-btn:hover{transform:scale(1.05)}

/* Card divider */
.c-divider{height:1px;background:var(--border);margin:0 18px}

/* Card actions */
.c-actions{
  padding:12px 18px 16px;
  display:flex;gap:7px;margin-top:auto;
}
.c-btn{
  flex:1;padding:9px 4px;border:none;border-radius:9px;
  color:#fff;font-family:'Plus Jakarta Sans',sans-serif;
  font-size:12px;font-weight:700;cursor:pointer;
  transition:all 0.2s;
  display:flex;align-items:center;justify-content:center;gap:4px;
}
.c-btn:hover{transform:translateY(-1px);opacity:0.88}
.c-btn-outline{
  background:rgba(255,255,255,0.06);
  color:var(--text-secondary);
  border:1px solid rgba(255,255,255,0.1);
}
.c-btn-outline:hover{border-color:var(--border-glow);color:var(--text-primary)}
.c-btn-dark{background:rgba(0,0,0,0.4);color:var(--text-secondary);border:1px solid var(--border)}
.c-btn-dark:hover{border-color:var(--cyan);color:var(--cyan)}

/* Icon bg variants */
.ib-red{background:rgba(255,107,107,0.12)}
.ib-blue{background:rgba(59,130,246,0.12)}
.ib-orange{background:rgba(245,158,11,0.12)}
.ib-green{background:rgba(0,255,136,0.1)}
.ib-teal{background:rgba(0,212,255,0.1)}
.ib-navy{background:rgba(59,130,246,0.08)}
.ib-purple{background:rgba(139,92,246,0.12)}
.ib-rose{background:rgba(255,107,107,0.1)}
.ib-yellow{background:rgba(245,158,11,0.1)}


/* ============================================================
   CATEGORY DASHBOARDS (9 screens)
============================================================ */
.cat-dash{background:var(--void)}

.cat-topbar{
  background:rgba(6,13,24,0.95);
  border-bottom:1px solid var(--border);
  padding:0 28px;
  display:flex;align-items:center;gap:16px;
  height:64px;position:sticky;top:0;z-index:200;
  backdrop-filter:blur(20px);
}

.cat-hero{
  padding:28px;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px;
  border-bottom:1px solid var(--border);
  position:relative;overflow:hidden;
}
.cat-hero::after{
  content:'';position:absolute;
  right:-80px;top:-80px;
  width:300px;height:300px;border-radius:50%;
  filter:blur(80px);pointer-events:none;opacity:0.3;
}
.cat-hero h1{
  font-family:'Outfit',sans-serif;
  font-size:24px;font-weight:800;
  color:var(--text-primary);margin-bottom:6px;
  display:flex;align-items:center;gap:10px;
}
.cat-hero p{font-size:13px;color:var(--text-secondary)}
.cat-hero-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}

.cat-content{padding:24px 28px 48px;max-width:900px;width:100%}

/* Section card */
.info-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);padding:22px;margin-bottom:18px;
  transition:border-color 0.2s;
}
.info-card:hover{border-color:var(--border-glow)}
.info-card-title{
  font-family:'Outfit',sans-serif;font-size:16px;font-weight:700;
  color:var(--text-primary);margin-bottom:16px;
  display:flex;align-items:center;gap:8px;
}

/* Info grid */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.info-cell{
  background:rgba(0,212,255,0.03);
  border:1px solid var(--border);
  border-radius:12px;padding:14px;
  transition:all 0.2s;
}
.info-cell:hover{border-color:rgba(0,212,255,0.2);background:rgba(0,212,255,0.05)}
.info-cell-label{
  font-size:10px;font-weight:700;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:1px;margin-bottom:5px;
}
.info-cell-value{
  font-family:'Outfit',sans-serif;font-size:16px;font-weight:700;
  color:var(--text-primary);
}

/* Feature tags */
.feat-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.feat-tag{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;padding:5px 12px;
  font-size:12px;font-weight:600;color:var(--text-secondary);
  transition:all 0.2s;
}
.feat-tag:hover{border-color:var(--border-glow);color:var(--text-primary)}

/* Action row */
.action-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

/* Emergency call button */
.emrg-call-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 24px;border:none;border-radius:12px;
  font-family:'Outfit',sans-serif;font-size:15px;font-weight:800;
  cursor:pointer;transition:all 0.3s;
  background:linear-gradient(135deg,#dc2626,#991b1b);
  color:#fff;
  box-shadow:0 4px 20px rgba(220,38,38,0.4);
  animation:pulse-red 1.5s infinite;
  position:relative;overflow:hidden;
}
.emrg-call-btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(45deg,transparent,rgba(255,255,255,0.1),transparent);
  transform:translateX(-100%);animation:shine 2s infinite;
}

/* Service list in category */
.svc-list{display:flex;flex-direction:column;gap:14px}
.svc-item{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);padding:18px 20px;
  transition:all 0.2s;
}
.svc-item:hover{border-color:var(--border-glow);background:var(--card-hover)}
.svc-item-name{
  font-family:'Outfit',sans-serif;font-size:16px;font-weight:700;
  color:var(--text-primary);margin-bottom:4px;
}
.svc-item-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.svc-item-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.nearest-tag{
  background:rgba(0,255,136,0.1);color:var(--neon-green);
  border:1px solid rgba(0,255,136,0.2);
  border-radius:20px;padding:3px 12px;font-size:11px;font-weight:700;
}

/* Online shopping */
.shop-search-area{
  background:rgba(6,13,24,0.8);
  border-bottom:1px solid var(--border);
  padding:14px 28px;display:flex;gap:12px;
}
.shop-search-wrap{
  flex:1;display:flex;
  background:rgba(0,212,255,0.04);
  border:1px solid var(--border);
  border-radius:12px;overflow:hidden;
}
.shop-search-wrap input{
  flex:1;padding:10px 14px;background:transparent;border:none;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;color:var(--text-primary);
}
.shop-search-wrap input:focus{outline:none}
.shop-search-wrap input::placeholder{color:var(--text-muted)}
.shop-go{
  padding:10px 18px;background:var(--violet);border:none;
  color:#fff;font-size:13px;font-weight:700;cursor:pointer;
  font-family:'Outfit',sans-serif;
}
.shop-cats{
  padding:12px 28px;
  display:flex;gap:8px;flex-wrap:wrap;
  border-bottom:1px solid var(--border);
  background:rgba(2,4,8,0.4);
}
.shop-cat{
  padding:6px 16px;border-radius:20px;
  border:1px solid var(--border);background:transparent;
  font-size:12px;font-weight:700;color:var(--text-muted);cursor:pointer;transition:all 0.2s;
}
.shop-cat.active,.shop-cat:hover{
  background:rgba(139,92,246,0.15);
  border-color:rgba(139,92,246,0.4);color:var(--violet);
}
.products-grid{
  padding:20px 28px 48px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.p-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);overflow:hidden;
  transition:all 0.3s;cursor:pointer;
}
.p-card:hover{border-color:rgba(139,92,246,0.3);transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,0.4)}
.p-img{
  height:120px;display:flex;align-items:center;justify-content:center;
  font-size:48px;
  background:linear-gradient(135deg,rgba(139,92,246,0.08),rgba(59,130,246,0.08));
}
.p-info{padding:12px}
.p-name{font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;color:var(--text-primary);margin-bottom:5px}
.p-price{font-size:16px;font-weight:800;color:var(--violet)}
.p-og{font-size:11px;color:var(--text-muted);text-decoration:line-through;margin-left:5px}
.p-off{background:rgba(0,255,136,0.12);color:var(--neon-green);border-radius:4px;padding:1px 6px;font-size:10px;font-weight:700;margin-left:4px}
.p-stars{color:var(--amber);font-size:11px;font-weight:700;margin-top:4px}
.p-btns{padding:0 12px 12px;display:flex;gap:7px}
.p-btn{flex:1;padding:8px 4px;border:none;border-radius:8px;font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;font-weight:700;cursor:pointer;transition:all 0.2s}
.p-btn-main{background:var(--grad-violet);color:#fff}
.p-btn-outline{background:rgba(255,255,255,0.04);color:var(--text-secondary);border:1px solid var(--border)}

/* Cart bar */
.cart-bar{
  position:fixed;bottom:0;left:0;right:0;
  background:rgba(10,22,40,0.95);
  backdrop-filter:blur(20px);
  border-top:1px solid var(--border);
  padding:12px 28px;
  display:flex;align-items:center;justify-content:space-between;
  z-index:100;transform:translateY(100%);transition:transform 0.3s;
}
.cart-bar.visible{transform:translateY(0)}
.cart-info{font-size:14px;font-weight:700;color:var(--text-primary)}
.cart-info span{color:var(--cyan);font-weight:800}
.btn-checkout{
  background:var(--grad-green);border:none;color:#000;
  padding:10px 24px;border-radius:10px;
  font-family:'Outfit',sans-serif;font-size:14px;font-weight:800;cursor:pointer;
  transition:all 0.2s;
}
.btn-checkout:hover{box-shadow:var(--glow-green)}


/* ============================================================
   OWNER DASHBOARD
============================================================ */
#ownerDashboard{background:var(--void)}

.o-nav{
  background:rgba(6,13,24,0.95);
  border-bottom:1px solid var(--border);
  padding:0 28px;display:flex;align-items:center;gap:16px;
  height:64px;position:sticky;top:0;z-index:200;
  backdrop-filter:blur(20px);
}
.o-badge{
  background:rgba(0,255,136,0.08);color:var(--neon-green);
  border:1px solid rgba(0,255,136,0.2);
  border-radius:20px;padding:4px 12px;
  font-size:11px;font-weight:700;
}
.o-hero{
  padding:28px;
  background:linear-gradient(135deg,#060d18,#0a1628,#0f1f3a);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:16px;
}
.o-hero h2{font-family:'Outfit',sans-serif;font-size:22px;font-weight:800;color:var(--text-primary);margin-bottom:4px}
.o-hero p{font-size:13px;color:var(--text-secondary)}
.btn-reg-new{
  display:flex;align-items:center;gap:8px;
  padding:12px 22px;background:var(--grad-green);border:none;
  border-radius:12px;cursor:pointer;
  font-family:'Outfit',sans-serif;font-size:14px;font-weight:800;
  color:#000;transition:all 0.2s;box-shadow:0 4px 20px rgba(0,255,136,0.3);
}
.btn-reg-new:hover{transform:translateY(-1px);box-shadow:0 8px 30px rgba(0,255,136,0.4)}

.o-content{padding:28px;flex:1}
.sub-view{display:none}
.sub-view.active{display:block}

.type-grid-9{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:14px;margin-top:18px;
}
.type-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:22px 14px;
  cursor:pointer;transition:all 0.3s;
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;
}
.type-card:hover{
  border-color:rgba(0,255,136,0.3);
  background:rgba(0,255,136,0.04);
  transform:translateY(-3px);
  box-shadow:0 8px 30px rgba(0,0,0,0.4),0 0 20px rgba(0,255,136,0.1);
}
.type-card-icon{
  width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  transition:transform 0.3s;
}
.type-card:hover .type-card-icon{transform:scale(1.1) rotate(-5deg)}
.type-card-name{font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;color:var(--text-primary)}

/* Registration form */
.reg-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:30px;max-width:720px;
}
.reg-title{font-family:'Outfit',sans-serif;font-size:22px;font-weight:800;color:var(--text-primary);margin-bottom:4px}
.reg-sub{font-size:13px;color:var(--text-muted);margin-bottom:26px}
.reg-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rg{display:flex;flex-direction:column;gap:6px}
.rg.full{grid-column:1/-1}
.rg label{
  font-size:11px;font-weight:700;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:1px;
}
.rg input,.rg select,.rg textarea{
  padding:11px 13px;
  background:rgba(0,212,255,0.03);
  border:1px solid var(--border);
  border-radius:10px;color:var(--text-primary);
  font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;
  transition:all 0.2s;width:100%;
}
.rg input:focus,.rg select:focus,.rg textarea:focus{
  outline:none;border-color:var(--neon-green);
  background:rgba(0,255,136,0.04);
  box-shadow:0 0 0 3px rgba(0,255,136,0.1);
}
.rg select option{background:var(--panel)}
.rg textarea{resize:vertical;min-height:80px}
.btn-reg-submit{
  width:100%;margin-top:22px;padding:14px;border:none;
  border-radius:12px;font-family:'Outfit',sans-serif;
  font-size:17px;font-weight:800;cursor:pointer;
  background:var(--grad-green);color:#000;
  transition:all 0.3s;box-shadow:0 4px 20px rgba(0,255,136,0.3);
}
.btn-reg-submit:hover{transform:translateY(-1px);box-shadow:0 8px 30px rgba(0,255,136,0.4)}


/* ============================================================
   MODAL
============================================================ */
.modal-backdrop{
  display:none;position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,0.8);
  backdrop-filter:blur(8px);
  align-items:center;justify-content:center;padding:20px;
}
.modal-backdrop.open{display:flex}
.modal-box{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  width:100%;max-width:700px;max-height:88vh;
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 40px 80px rgba(0,0,0,0.6),0 0 0 1px rgba(0,212,255,0.08);
  animation:modalIn 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.modal-head{
  padding:22px 26px 18px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,var(--surface),var(--panel));
}
.modal-head h2{font-family:'Outfit',sans-serif;font-size:20px;font-weight:800;color:var(--text-primary)}
.modal-x{
  width:32px;height:32px;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--border);
  border-radius:8px;color:var(--text-secondary);
  font-size:16px;cursor:pointer;transition:all 0.2s;
}
.modal-x:hover{background:rgba(255,107,107,0.15);color:var(--coral);border-color:rgba(255,107,107,0.3)}
.modal-body{padding:20px 26px 26px;overflow-y:auto;flex:1}

.modal-empty{text-align:center;padding:52px 20px;color:var(--text-muted)}
.modal-empty .e-ico{font-size:52px;margin-bottom:16px}
.modal-empty h3{font-family:'Outfit',sans-serif;font-size:20px;color:var(--text-primary);margin-bottom:8px}

.modal-item{
  background:rgba(0,212,255,0.03);
  border:1px solid var(--border);
  border-radius:var(--r);padding:18px;margin-bottom:14px;
  transition:border-color 0.2s;
}
.modal-item:hover{border-color:rgba(0,212,255,0.2)}
.modal-item-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;gap:10px;flex-wrap:wrap;
}
.modal-item-name{font-family:'Outfit',sans-serif;font-size:18px;font-weight:700;color:var(--text-primary)}
.modal-details{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.d-pair{font-size:12px;color:var(--text-muted);display:flex;gap:5px}
.d-pair strong{color:var(--text-secondary)}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap}
.m-act{
  display:flex;align-items:center;gap:5px;
  padding:8px 16px;border:none;border-radius:9px;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:700;
  cursor:pointer;transition:all 0.2s;
}
.m-act:hover{opacity:0.85;transform:translateY(-1px)}
.m-act-cyan{background:rgba(0,212,255,0.15);color:var(--cyan);border:1px solid rgba(0,212,255,0.3)}
.m-act-red{background:rgba(255,107,107,0.12);color:var(--coral);border:1px solid rgba(255,107,107,0.2)}
.m-ts{font-size:11px;color:var(--text-muted);margin-top:8px}

/* ============================================================
   TOAST
============================================================ */
.toast{
  position:fixed;bottom:28px;left:50%;
  transform:translateX(-50%) translateY(100px);
  background:rgba(10,22,40,0.95);
  backdrop-filter:blur(20px);
  border:1px solid var(--border);
  color:var(--text-primary);
  padding:13px 26px;border-radius:50px;
  font-weight:700;font-size:14px;z-index:9999;
  transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow:0 8px 40px rgba(0,0,0,0.5),0 0 0 1px rgba(0,212,255,0.1);
  display:flex;align-items:center;gap:8px;
  white-space:nowrap;
}
.toast.show{transform:translateX(-50%) translateY(0)}


/* ============================================================
   ANIMATIONS
============================================================ */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes logo-pulse{
  0%,100%{box-shadow:0 0 20px rgba(0,212,255,0.4)}
  50%{box-shadow:0 0 40px rgba(0,212,255,0.8),0 0 80px rgba(0,212,255,0.3)}
}
@keyframes orb-float{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-30px) scale(1.05)}
}
@keyframes phone-float{
  0%,100%{transform:rotate(3deg) translateY(-10px)}
  50%{transform:rotate(3deg) translateY(-20px)}
}
@keyframes mesh-shift{
  0%{opacity:1}100%{opacity:0.7}
}
@keyframes radar-pulse{
  0%{transform:scale(0.5);opacity:1}
  100%{transform:scale(3);opacity:0}
}
@keyframes pulse-dot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.5;transform:scale(0.8)}
}
@keyframes emrg-blink{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:0.4;transform:scale(0.8)}
}
@keyframes pulse-red{
  0%,100%{box-shadow:0 4px 20px rgba(220,38,38,.4)}
  50%{box-shadow:0 4px 40px rgba(220,38,38,.8),0 0 80px rgba(220,38,38,.2)}
}
@keyframes shine{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}
@keyframes modalIn{
  from{opacity:0;transform:scale(0.85) translateY(20px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes stagger-in{
  from{opacity:0;transform:translateY(20px) scale(0.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.stagger > *{
  animation:stagger-in 0.5s ease both;
}
.stagger > *:nth-child(1){animation-delay:0.05s}
.stagger > *:nth-child(2){animation-delay:0.1s}
.stagger > *:nth-child(3){animation-delay:0.15s}
.stagger > *:nth-child(4){animation-delay:0.2s}
.stagger > *:nth-child(5){animation-delay:0.25s}
.stagger > *:nth-child(6){animation-delay:0.3s}
.stagger > *:nth-child(7){animation-delay:0.35s}
.stagger > *:nth-child(8){animation-delay:0.4s}
.stagger > *:nth-child(9){animation-delay:0.45s}


/* ============================================================
   RESPONSIVE
============================================================ */
@media(max-width:1200px){.w-right{flex:0 0 300px}}
@media(max-width:1024px){
  .cards-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .products-grid{grid-template-columns:repeat(2,1fr)}
  .type-grid-9{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .auth-layout{flex-direction:column}
  .auth-panel{flex:none;padding:28px}
  .auth-panel .auth-perks{display:none}
  .w-right{display:none}
  .w-body{padding:32px 24px}
}
@media(max-width:768px){
  .w-nav{padding:14px 20px}
  .w-nav-links{display:none}
  .d-nav,.o-nav,.cat-topbar{padding:0 16px;gap:10px}
  .d-search{max-width:none;flex:1}
  .cards-grid{grid-template-columns:repeat(2,1fr);padding:16px;gap:14px}
  .cat-content{padding:20px 16px 40px}
  .products-grid{padding:16px;gap:12px}
  .o-content{padding:20px 16px}
  .modal-details{grid-template-columns:1fr}
  .reg-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .cards-grid{grid-template-columns:1fr;padding:12px;gap:12px}
  .products-grid{grid-template-columns:1fr;padding:12px}
  .type-grid-9{grid-template-columns:1fr 1fr}
  .reg-grid{grid-template-columns:1fr}
  .rg.full{grid-column:1}
  .w-btns{flex-direction:column}
  .w-btns .btn-glow{width:100%;justify-content:center}
  .d-nav-right{gap:6px}
  .d-h-stat{padding:8px 12px}
  .info-grid{grid-template-columns:1fr}
  .action-row{flex-direction:column}
}