/* ================================================================
   JNVAA Balaghat Election Portal v3
   Design: Clean Professional Government × Modern Web
   Brand: #31417c Navy · #00548e Blue · #09a84c Green · #fcd20e Gold · #c32735 Red
   Fonts: DM Sans (body) + Cormorant Garamond (display)
   ================================================================ */

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

/* ── BRAND TOKENS ── */
:root {
  /* Official JNVAA logo colours */
  --brand-navy:   #31417c;
  --brand-blue:   #00548e;
  --brand-green:  #09a84c;
  --brand-gold:   #fcd20e;
  --brand-red:    #c32735;

  /* Semantic shades */
  --navy-950: #0d1220;
  --navy-900: #1a2040;
  --navy-800: #232d5a;
  --navy-700: #31417c;   /* brand-navy */
  --navy-600: #3d4f96;
  --navy-500: #4d61b0;
  --navy-100: #eef0f8;
  --navy-50:  #f5f6fb;

  --blue-700: #004070;
  --blue-600: #00548e;   /* brand-blue */
  --blue-500: #006aaf;
  --blue-100: #e5f2fb;
  --blue-50:  #f0f7fd;

  --green-700: #067434;
  --green-600: #09a84c;  /* brand-green */
  --green-500: #0cc05a;
  --green-100: #e6f9ee;
  --green-50:  #f0fbf4;

  --gold-500: #fcd20e;   /* brand-gold */
  --gold-600: #e5bc00;
  --gold-100: #fffbe5;

  --red-600:  #c32735;   /* brand-red */
  --red-100:  #fce8ea;

  /* Neutrals */
  --white:    #ffffff;
  --gray-50:  #f8f9fc;
  --gray-100: #f0f2f7;
  --gray-200: #e2e6f0;
  --gray-300: #c8cfe3;
  --gray-400: #9aa3c0;
  --gray-500: #6b7599;
  --gray-600: #4a527a;
  --gray-700: #323862;
  --gray-900: #1a1f3c;

  /* Semantic */
  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-500);
  --text-muted:     var(--gray-400);
  --border-light:   var(--gray-200);
  --border-mid:     var(--gray-300);
  --bg-page:        var(--gray-50);
  --bg-card:        var(--white);
  --bg-subtle:      var(--navy-50);

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(49,65,124,.06);
  --shadow-sm: 0 1px 4px rgba(49,65,124,.08), 0 2px 8px rgba(49,65,124,.04);
  --shadow-md: 0 2px 8px rgba(49,65,124,.08), 0 4px 24px rgba(49,65,124,.06);
  --shadow-lg: 0 4px 16px rgba(49,65,124,.10), 0 8px 40px rgba(49,65,124,.08);
  --shadow-xl: 0 8px 32px rgba(49,65,124,.12), 0 16px 64px rgba(49,65,124,.10);

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl:28px;

  /* Transitions */
  --t: 200ms cubic-bezier(.4,0,.2,1);
  --t-slow: 350ms cubic-bezier(.4,0,.2,1);
}

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:'DM Sans',system-ui,sans-serif;
  background:var(--bg-page);
  color:var(--text-primary);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
input,select,textarea,button { font-family:inherit; }
::selection { background:rgba(49,65,124,.15); }
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--gray-100); }
::-webkit-scrollbar-thumb { background:var(--navy-700); border-radius:2px; }

/* ── LAYOUT ── */
.container { max-width:1160px; margin:0 auto; padding:0 24px; }

/* ── TRICOLOR STRIPE ── */
.tricolor { height:3px; background:linear-gradient(90deg,#FF9933 33.33%,#fff 33.33% 66.66%,#138808 66.66%); }

/* ── TYPOGRAPHY ── */
.display { font-family:'Cormorant Garamond',Georgia,serif; }
h1,h2,h3,h4 { line-height:1.25; letter-spacing:-0.01em; }
.eyebrow {
  font-size:0.7rem; font-weight:600; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--brand-blue);
  display:flex; align-items:center; gap:8px;
}
.eyebrow::before { content:''; width:20px; height:1.5px; background:var(--brand-blue); }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 22px; border-radius:var(--r-md);
  font-size:0.875rem; font-weight:600; letter-spacing:0.01em;
  cursor:pointer; border:none; outline:none;
  transition:var(--t); white-space:nowrap; text-decoration:none;
  line-height:1;
}
.btn-primary {
  background:var(--brand-navy); color:var(--white);
  box-shadow:var(--shadow-sm);
}
.btn-primary:hover { background:var(--navy-600); box-shadow:var(--shadow-md); transform:translateY(-1px); }
.btn-primary:active { transform:translateY(0); }

.btn-blue { background:var(--brand-blue); color:var(--white); box-shadow:var(--shadow-sm); }
.btn-blue:hover { background:var(--blue-500); box-shadow:var(--shadow-md); transform:translateY(-1px); }

.btn-green { background:var(--brand-green); color:var(--white); box-shadow:var(--shadow-sm); }
.btn-green:hover { background:var(--green-500); box-shadow:var(--shadow-md); transform:translateY(-1px); }

.btn-gold { background:var(--brand-gold); color:var(--navy-900); font-weight:700; box-shadow:var(--shadow-sm); }
.btn-gold:hover { background:var(--gold-600); transform:translateY(-1px); box-shadow:var(--shadow-md); }

.btn-outline {
  background:transparent; color:var(--brand-navy);
  border:1.5px solid var(--brand-navy);
}
.btn-outline:hover { background:var(--navy-50); }

.btn-outline-white {
  background:transparent; color:var(--white);
  border:1.5px solid rgba(255,255,255,.5);
}
.btn-outline-white:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.8); }

.btn-ghost { background:transparent; color:var(--brand-navy); }
.btn-ghost:hover { background:var(--navy-50); }

.btn-sm  { padding:7px 16px; font-size:0.8125rem; border-radius:var(--r-sm); }
.btn-lg  { padding:13px 28px; font-size:0.9375rem; border-radius:var(--r-lg); }
.btn-xl  { padding:15px 36px; font-size:1rem; border-radius:var(--r-lg); }
.btn-full { width:100%; }

.btn-loading { position:relative; color:transparent !important; pointer-events:none; }
.btn-loading::after {
  content:''; position:absolute;
  width:16px; height:16px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:white;
  border-radius:50%;
  animation:spin .65s linear infinite;
}

.btn-danger { background:var(--red-600); color:var(--white); }
.btn-danger:hover { background:#a81e2a; }

/* ── FORM ELEMENTS ── */
.field { margin-bottom:18px; }
.label {
  display:block; font-size:0.8rem; font-weight:600;
  color:var(--gray-700); margin-bottom:6px; letter-spacing:0.02em;
}
.label .req { color:var(--brand-red); margin-left:2px; }
.input, .select, .textarea {
  width:100%; padding:10px 14px;
  background:var(--white); border:1.5px solid var(--border-light);
  border-radius:var(--r-md); font-family:inherit;
  font-size:0.9rem; color:var(--text-primary);
  transition:var(--t); outline:none; line-height:1.5;
}
.input:focus, .select:focus, .textarea:focus {
  border-color:var(--brand-navy);
  box-shadow:0 0 0 3px rgba(49,65,124,.1);
}
.input::placeholder { color:var(--text-muted); }
.select { appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7599' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  padding-right:36px;
}
.select option { background:var(--white); color:var(--text-primary); }
.textarea { resize:vertical; min-height:80px; line-height:1.6; }
.field-hint { font-size:0.75rem; color:var(--text-muted); margin-top:5px; line-height:1.5; }

/* Glass inputs (for dark backgrounds) */
.input-glass {
  width:100%; padding:10px 14px;
  background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.2);
  border-radius:var(--r-md); font-family:inherit;
  font-size:0.9rem; color:var(--white); outline:none;
  transition:var(--t);
}
.input-glass:focus { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.5); box-shadow:0 0 0 3px rgba(255,255,255,.1); }
.input-glass::placeholder { color:rgba(255,255,255,.4); }
.select-glass {
  width:100%; padding:10px 14px;
  background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.2);
  border-radius:var(--r-md); font-family:inherit;
  font-size:0.9rem; color:var(--white); outline:none; cursor:pointer; appearance:none;
}
.select-glass option { background:var(--navy-800); color:var(--white); }
.label-glass { display:block; font-size:0.75rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:6px; }

/* ── ALERTS ── */
.alert {
  padding:12px 16px; border-radius:var(--r-md);
  font-size:0.875rem; font-weight:500;
  display:none; align-items:flex-start; gap:10px;
  margin-bottom:16px; border:1.5px solid;
  line-height:1.55;
}
.alert.show { display:flex; }
.alert-error   { background:var(--red-100);   color:#7a1520; border-color:#f5b4ba; }
.alert-success { background:var(--green-100);  color:#05542a; border-color:#9edcba; }
.alert-info    { background:var(--blue-100);   color:#00395f; border-color:#99c8e8; }

/* ── BADGE ── */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:50px;
  font-size:0.72rem; font-weight:600; letter-spacing:0.03em;
}
.badge-green  { background:var(--green-100);  color:var(--green-700); }
.badge-red    { background:var(--red-100);    color:var(--red-600); }
.badge-navy   { background:var(--navy-100);   color:var(--navy-700); }
.badge-gold   { background:var(--gold-100);   color:#856f00; }
.badge-blue   { background:var(--blue-100);   color:var(--blue-600); }

/* ── CARDS ── */
.card { background:var(--bg-card); border-radius:var(--r-lg); border:1px solid var(--border-light); box-shadow:var(--shadow-sm); }
.card-hover { transition:var(--t-slow); }
.card-hover:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--gray-300); }

/* ── DIVIDER ── */
.divider { border:none; border-top:1px solid var(--border-light); margin:0; }

/* ── MODAL ── */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(13,18,32,.65);
  backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  z-index:9000; padding:16px;
  opacity:0; visibility:hidden; transition:var(--t-slow);
}
.modal-overlay.open { opacity:1; visibility:visible; }
.modal {
  background:var(--white); border-radius:var(--r-xl);
  width:100%; max-width:440px;
  box-shadow:var(--shadow-xl);
  transform:scale(.95) translateY(8px);
  transition:var(--t-slow);
  overflow:hidden;
}
.modal-overlay.open .modal { transform:scale(1) translateY(0); }
.modal-top-bar { height:4px; background:linear-gradient(90deg,var(--brand-navy),var(--brand-blue)); }
.modal-body { padding:32px; text-align:center; }
.modal-icon-wrap {
  width:64px; height:64px; border-radius:50%;
  background:var(--navy-50); margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  color:var(--brand-navy);
}
.modal-title { font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:700; color:var(--gray-900); margin-bottom:10px; }
.modal-desc  { font-size:0.9rem; color:var(--text-secondary); line-height:1.65; margin-bottom:26px; }
.modal-actions { display:flex; gap:10px; justify-content:center; }

/* ================================================================
   HEADER
   ================================================================ */
.site-header {
  position:sticky; top:0; z-index:1000;
  background:var(--navy-900);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar {
  background:var(--brand-navy);
  padding:5px 24px;
  display:flex; align-items:center; justify-content:center;
  gap:8px;
  font-size:0.72rem; font-weight:500;
  color:rgba(255,255,255,.75);
  letter-spacing:0.04em;
}
.topbar .sep { opacity:.35; }

.header-inner {
  max-width:1160px; margin:0 auto;
  padding:0 24px;
  display:flex; align-items:center; height:68px; gap:32px;
}

.logo-link { display:flex; align-items:center; text-decoration:none; flex-shrink:0; }
.logo-link img { height:36px; width:auto; }

.header-nav { display:flex; align-items:center; gap:2px; flex:1; }
.nav-link {
  padding:8px 14px; border-radius:var(--r-sm);
  font-size:0.875rem; font-weight:500;
  color:rgba(255,255,255,.68);
  transition:var(--t);
}
.nav-link:hover { color:var(--white); background:rgba(255,255,255,.07); }
.nav-link.active { color:var(--white); }
.nav-link.active::after {
  display:block; content:''; height:2px; background:var(--brand-gold);
  border-radius:1px; margin-top:2px;
}

.header-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }

.hamburger {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; padding:8px; flex-shrink:0;
}
.hamburger span { width:20px; height:2px; background:var(--white); border-radius:1px; transition:var(--t); }

/* Mobile menu */
.mobile-menu {
  position:fixed; top:0; right:-100%; width:280px; height:100vh;
  background:var(--navy-900); z-index:9999;
  padding:24px 20px; overflow-y:auto;
  transition:right .3s ease; box-shadow:-8px 0 40px rgba(0,0,0,.4);
}
.mobile-menu.open { right:0; }
.mobile-menu-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  z-index:9998; display:none;
}
.mobile-menu-overlay.open { display:block; }
.mobile-menu-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,.1); }
.mobile-menu-header img { height:28px; }
.mobile-close { background:none; border:none; color:var(--white); cursor:pointer; padding:4px; }
.mobile-nav-link { display:flex; align-items:center; gap:12px; padding:12px 10px; color:rgba(255,255,255,.75); font-size:0.9rem; font-weight:500; border-radius:var(--r-md); transition:var(--t); }
.mobile-nav-link:hover { background:rgba(255,255,255,.08); color:var(--white); }
.mobile-nav-link.active { background:rgba(49,65,124,.5); color:var(--white); }
.mobile-nav-divider { border-color:rgba(255,255,255,.08); margin:8px 0; }

/* ================================================================
   HERO
   ================================================================ */
.hero {
  position:relative; overflow:hidden;
  background:var(--navy-900);
  padding:0;
}
.hero-bg-pattern {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 700px 500px at 15% 60%, rgba(0,84,142,.35) 0%, transparent 65%),
    radial-gradient(ellipse 500px 400px at 85% 20%, rgba(49,65,124,.25) 0%, transparent 60%),
    radial-gradient(ellipse 400px 300px at 80% 90%, rgba(9,168,76,.08) 0%, transparent 50%);
}
/* Subtle dot grid */
.hero-bg-pattern::after {
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 100%);
}

.hero-grid {
  position:relative; z-index:1;
  max-width:1160px; margin:0 auto;
  padding:72px 24px 64px;
  display:grid; grid-template-columns:1fr 420px; gap:56px; align-items:center;
}

/* Left content */
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 14px; border-radius:50px;
  background:rgba(252,210,14,.12); border:1px solid rgba(252,210,14,.3);
  font-size:0.72rem; font-weight:600; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--brand-gold); margin-bottom:20px;
}
.hero-eyebrow .dot { width:6px; height:6px; border-radius:50%; background:var(--brand-gold); animation:pulse 2s ease infinite; }

.hero-title {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.2rem,5vw,3.6rem);
  font-weight:700; line-height:1.12;
  color:var(--white); letter-spacing:-0.02em;
  margin-bottom:8px;
}
.hero-title em { font-style:italic; color:var(--brand-gold); }

.hero-tagline {
  font-size:0.98rem; color:rgba(255,255,255,.5);
  margin-bottom:20px; font-weight:300;
  letter-spacing:0.04em;
}

.hero-desc { font-size:1rem; color:rgba(255,255,255,.68); line-height:1.75; margin-bottom:32px; max-width:480px; }

.hero-ctas { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:48px; }

.hero-stats { display:flex; gap:0; border-top:1px solid rgba(255,255,255,.1); padding-top:28px; }
.hero-stat { flex:1; text-align:center; padding:0 16px; }
.hero-stat + .hero-stat { border-left:1px solid rgba(255,255,255,.1); }
.hero-stat-value { font-family:'Cormorant Garamond',serif; font-size:2rem; font-weight:700; color:var(--brand-gold); line-height:1; letter-spacing:-0.02em; }
.hero-stat-label { font-size:0.72rem; color:rgba(255,255,255,.45); text-transform:uppercase; letter-spacing:0.1em; margin-top:5px; }

/* Right — Login card */
.login-card {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-xl);
  backdrop-filter:blur(16px);
  overflow:hidden;
}
.login-card-bar { height:3px; background:linear-gradient(90deg,var(--brand-gold),var(--brand-green)); }
.login-card-body { padding:28px; }
.login-card-title { font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:700; color:var(--white); margin-bottom:4px; }
.login-card-sub { font-size:0.83rem; color:rgba(255,255,255,.5); margin-bottom:22px; }

.tab-pills { display:flex; background:rgba(0,0,0,.2); border-radius:var(--r-sm); padding:3px; margin-bottom:22px; gap:3px; }
.tab-pill { flex:1; padding:8px; text-align:center; border-radius:var(--r-sm); font-size:0.83rem; font-weight:600; cursor:pointer; border:none; background:transparent; color:rgba(255,255,255,.5); transition:var(--t); }
.tab-pill.active { background:rgba(255,255,255,.12); color:var(--white); }

/* ================================================================
   ELECTION STATUS BAR
   ================================================================ */
.status-bar { background:var(--navy-800); border-bottom:1px solid rgba(255,255,255,.06); }
.status-bar-inner {
  max-width:1160px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.status-indicator { display:flex; align-items:center; gap:12px; }
.live-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.live-dot.open  { background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.2); animation:pulse 2s ease infinite; }
.live-dot.closed{ background:var(--brand-gold); }
.status-label { font-size:0.875rem; font-weight:600; color:var(--white); }
.status-sub   { font-size:0.78rem; color:rgba(255,255,255,.5); margin-top:2px; }

.countdown { display:flex; align-items:center; gap:6px; }
.cnt-unit { text-align:center; background:rgba(255,255,255,.08); border-radius:var(--r-sm); padding:6px 10px; min-width:48px; }
.cnt-num { font-family:'Cormorant Garamond',serif; font-size:1.25rem; font-weight:700; color:var(--brand-gold); line-height:1; }
.cnt-label { font-size:0.6rem; text-transform:uppercase; letter-spacing:0.1em; color:rgba(255,255,255,.4); margin-top:2px; }
.cnt-colon { font-size:1rem; font-weight:700; color:rgba(255,255,255,.3); }

/* ================================================================
   SECTION HEADERS
   ================================================================ */
.section { padding:64px 0; }
.section-sm { padding:40px 0; }
.section-dark { background:var(--navy-900); }
.section-mid  { background:var(--navy-800); }
.section-alt  { background:var(--white); }

.section-header { margin-bottom:48px; }
.section-header.centered { text-align:center; }
.section-title { font-family:'Cormorant Garamond',serif; font-size:clamp(1.7rem,3.5vw,2.4rem); font-weight:700; color:var(--gray-900); margin-top:10px; letter-spacing:-0.02em; }
.section-title-light { color:var(--white); }
.section-desc { font-size:0.95rem; color:var(--text-secondary); line-height:1.75; max-width:540px; margin-top:12px; }
.section-desc.centered { margin:12px auto 0; }

/* Rule ornament */
.rule-ornament { display:flex; align-items:center; gap:14px; margin:16px auto 0; max-width:200px; }
.rule-ornament::before,.rule-ornament::after { content:''; flex:1; height:1px; background:var(--border-light); }
.rule-gem { width:6px; height:6px; background:var(--brand-gold); transform:rotate(45deg); }

/* ================================================================
   HOW-TO STEPS
   ================================================================ */
.steps-row { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; }
.steps-row::before {
  content:''; position:absolute;
  top:24px; left:calc(12.5% + 20px); right:calc(12.5% + 20px); height:1px;
  background:linear-gradient(90deg,transparent,var(--border-light) 20%,var(--border-light) 80%,transparent);
}
.step-card { text-align:center; padding:28px 20px; }
.step-num-wrap {
  width:48px; height:48px; border-radius:50%;
  background:var(--white); border:1.5px solid var(--brand-navy);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px; position:relative; z-index:1;
  color:var(--brand-navy);
}
.step-num-wrap .step-num-text { font-family:'Cormorant Garamond',serif; font-size:1.1rem; font-weight:700; }
.step-icon-wrap {
  width:52px; height:52px; border-radius:var(--r-md);
  background:var(--navy-800); border:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 18px; color:var(--brand-gold);
}
.step-title { font-size:0.95rem; font-weight:700; color:var(--white); margin-bottom:8px; }
.step-desc { font-size:0.83rem; color:rgba(255,255,255,.55); line-height:1.65; }

/* ================================================================
   POSITIONS GRID
   ================================================================ */
.positions-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.pos-card {
  background:var(--white); border-radius:var(--r-lg);
  border:1.5px solid var(--border-light);
  padding:24px; transition:var(--t-slow);
  cursor:default;
}
.pos-card:hover { border-color:var(--brand-navy); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.pos-card-num { font-family:'Cormorant Garamond',serif; font-size:2.5rem; font-weight:700; color:var(--gray-200); line-height:1; margin-bottom:14px; }
.pos-card-icon-wrap { width:40px; height:40px; border-radius:var(--r-sm); background:var(--navy-50); display:flex; align-items:center; justify-content:center; margin-bottom:14px; color:var(--brand-navy); }
.pos-card-name { font-size:1.05rem; font-weight:700; color:var(--gray-900); margin-bottom:8px; }
.pos-card-desc { font-size:0.83rem; color:var(--text-secondary); line-height:1.65; }
.pos-stripe { height:3px; border-radius:2px; background:var(--brand-navy); width:32px; margin-bottom:16px; }

/* ================================================================
   CANDIDATE CARDS
   ================================================================ */
.pos-filter-bar { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; margin-bottom:32px; scrollbar-width:none; }
.pos-filter-bar::-webkit-scrollbar { display:none; }
.filter-btn {
  flex-shrink:0; padding:7px 16px; border-radius:50px;
  border:1.5px solid var(--border-light);
  background:var(--white); font-size:0.83rem; font-weight:600;
  color:var(--text-secondary); cursor:pointer; transition:var(--t);
  white-space:nowrap; display:flex; align-items:center; gap:6px;
}
.filter-btn:hover { border-color:var(--brand-navy); color:var(--brand-navy); }
.filter-btn.active { background:var(--brand-navy); border-color:var(--brand-navy); color:var(--white); }
.filter-btn.done { border-color:var(--brand-green); color:var(--green-700); background:var(--green-50); }

.cand-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }

.cand-card {
  background:var(--white); border-radius:var(--r-lg);
  border:1.5px solid var(--border-light);
  overflow:hidden; transition:var(--t-slow);
  cursor:pointer; position:relative;
}
.cand-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--gray-300); }
.cand-card.selected { border-color:var(--brand-green); box-shadow:0 0 0 3px rgba(9,168,76,.12); }
.cand-card.voted { pointer-events:none; opacity:.85; border-color:var(--brand-gold); }

.cand-card-top {
  height:96px;
  background:linear-gradient(135deg,var(--navy-800) 0%,var(--navy-700) 60%,var(--blue-600) 100%);
  position:relative; overflow:visible;
}
.cand-card-top-overlay {
  position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='rgba(255,255,255,0.03)'%3E%3Cpath d='M0 0h20v20H0zM20 20h20v20H20z'/%3E%3C/g%3E%3C/svg%3E");
}
.cand-pos-label {
  position:absolute; top:12px; right:12px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
  border-radius:50px; padding:3px 10px;
  font-size:0.65rem; font-weight:600; letter-spacing:0.08em;
  text-transform:uppercase; color:rgba(255,255,255,.8);
}
.cand-photo-wrap { position:absolute; bottom:-22px; left:20px; z-index:2; }
.cand-photo {
  width:64px; height:64px; border-radius:50%;
  border:3px solid var(--white);
  box-shadow:var(--shadow-md);
  object-fit:cover; background:var(--gray-100);
}
.cand-check {
  position:absolute; top:12px; left:12px;
  width:26px; height:26px; border-radius:50%;
  background:var(--brand-green);
  display:flex; align-items:center; justify-content:center;
  color:var(--white);
  opacity:0; transform:scale(.5);
  transition:var(--t);
}
.cand-card.selected .cand-check { opacity:1; transform:scale(1); }

.cand-card-body { padding:30px 20px 20px; }
.cand-name { font-size:1rem; font-weight:700; color:var(--gray-900); line-height:1.3; margin-bottom:3px; }
.cand-meta { font-size:0.78rem; color:var(--text-muted); display:flex; align-items:center; gap:6px; margin-bottom:14px; }
.cand-meta-sep { width:3px; height:3px; border-radius:50%; background:var(--brand-gold); }
.cand-bio { font-size:0.85rem; color:var(--text-secondary); line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:14px; }

.manifesto-toggle { display:flex; align-items:center; gap:6px; background:none; border:none; font-family:inherit; font-size:0.8rem; font-weight:600; color:var(--brand-blue); cursor:pointer; padding:0; transition:color var(--t); }
.manifesto-toggle:hover { color:var(--brand-navy); }
.manifesto-body { margin-top:10px; padding:12px 14px; background:var(--gold-100); border-radius:var(--r-md); border-left:3px solid var(--brand-gold); font-size:0.83rem; color:var(--gray-700); font-style:italic; line-height:1.65; display:none; }
.manifesto-body.open { display:block; }

.cand-vote-btn {
  width:100%; margin-top:16px; padding:10px;
  background:var(--navy-50); border:1.5px solid var(--border-light);
  border-radius:var(--r-md); font-family:inherit;
  font-size:0.83rem; font-weight:600; color:var(--brand-navy);
  cursor:pointer; transition:var(--t);
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.cand-vote-btn:hover { background:var(--brand-navy); color:var(--white); border-color:var(--brand-navy); }
.cand-vote-btn.selected { background:var(--brand-green); color:var(--white); border-color:var(--brand-green); }
.cand-vote-btn.voted-btn { background:var(--gold-100); color:#856f00; border-color:var(--brand-gold); cursor:not-allowed; }

/* ================================================================
   VOTER BAR & PROGRESS
   ================================================================ */
.voter-bar {
  background:var(--white); border-radius:var(--r-lg);
  border:1px solid var(--border-light);
  border-left:4px solid var(--brand-green);
  padding:18px 24px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
  margin-bottom:28px; box-shadow:var(--shadow-xs);
}
.voter-name { font-size:1rem; font-weight:700; color:var(--gray-900); }
.voter-detail { font-size:0.8rem; color:var(--text-muted); margin-top:3px; }
.progress-wrap { flex:1; min-width:180px; max-width:300px; }
.progress-label { display:flex; justify-content:space-between; font-size:0.75rem; color:var(--text-muted); font-weight:500; margin-bottom:6px; }
.progress-track { height:6px; background:var(--gray-100); border-radius:3px; overflow:hidden; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--brand-green),var(--brand-blue)); border-radius:3px; transition:width .5s ease; }

/* ================================================================
   SUBMIT SECTION
   ================================================================ */
.submit-panel {
  background:var(--white); border-radius:var(--r-xl);
  border:1px solid var(--border-light);
  padding:36px; text-align:center; margin-top:36px;
  box-shadow:var(--shadow-sm);
}
.submit-panel-title { font-family:'Cormorant Garamond',serif; font-size:1.3rem; font-weight:700; color:var(--gray-900); margin-bottom:8px; }
.submit-panel-desc { font-size:0.875rem; color:var(--text-secondary); margin-bottom:24px; }
.submit-warning { font-size:0.76rem; color:var(--text-muted); margin-top:12px; display:flex; align-items:center; justify-content:center; gap:5px; }

/* ================================================================
   RESULTS
   ================================================================ */
.results-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:20px; }
.result-card { background:var(--white); border-radius:var(--r-lg); border:1px solid var(--border-light); overflow:hidden; box-shadow:var(--shadow-xs); transition:var(--t); }
.result-card:hover { box-shadow:var(--shadow-md); }
.result-card-head { background:var(--navy-800); padding:16px 20px; display:flex; align-items:center; gap:12px; }
.result-card-icon { width:36px; height:36px; border-radius:var(--r-sm); background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:var(--brand-gold); flex-shrink:0; }
.result-pos-name { font-size:0.95rem; font-weight:700; color:var(--white); }
.result-vote-total { font-size:0.75rem; color:rgba(255,255,255,.45); margin-top:2px; }
.result-rows { padding:16px 20px; display:flex; flex-direction:column; gap:14px; }
.result-row { display:flex; align-items:center; gap:10px; }
.rank-badge { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.72rem; font-weight:700; flex-shrink:0; }
.rank-1 { background:linear-gradient(135deg,#FFD700,#FFA000); color:#5a3a00; }
.rank-2 { background:linear-gradient(135deg,#E8E8E8,#B0B0B0); color:#3a3a3a; }
.rank-3 { background:linear-gradient(135deg,#E8B86D,#C87F32); color:#3a1a00; }
.rank-n { background:var(--gray-100); color:var(--text-muted); }
.result-cand { flex:0 0 120px; }
.result-cand-name { font-size:0.85rem; font-weight:600; color:var(--gray-900); line-height:1.3; }
.result-cand-batch { font-size:0.72rem; color:var(--text-muted); }
.result-bar-wrap { flex:1; }
.result-bar-track { height:7px; background:var(--gray-100); border-radius:4px; overflow:hidden; margin-bottom:3px; }
.result-bar-fill { height:100%; border-radius:4px; background:linear-gradient(90deg,var(--brand-navy),var(--brand-blue)); transition:width 1.1s ease; }
.result-bar-fill.leader { background:linear-gradient(90deg,var(--green-700),var(--brand-green)); }
.result-pct { font-size:0.73rem; color:var(--text-muted); text-align:right; }
.elected-tag { display:inline-flex; align-items:center; gap:4px; font-size:0.68rem; font-weight:700; padding:2px 8px; background:var(--gold-100); color:#856f00; border-radius:50px; margin-left:6px; vertical-align:middle; }

/* ================================================================
   ADMIN PANEL
   ================================================================ */
.admin-wrap { display:flex; min-height:100vh; background:var(--gray-50); }
.admin-sidebar {
  width:248px; flex-shrink:0;
  background:var(--navy-900);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.admin-sidebar-head { padding:20px; border-bottom:1px solid rgba(255,255,255,.07); }
.admin-sidebar-head img { height:28px; margin-bottom:12px; }
.election-status-chip { display:inline-flex; align-items:center; gap:6px; font-size:0.72rem; font-weight:600; padding:4px 10px; border-radius:50px; }
.chip-open { background:rgba(9,168,76,.15); color:#6ee7a0; }
.chip-closed { background:rgba(252,210,14,.12); color:var(--brand-gold); }

.admin-nav { flex:1; padding:12px; }
.admin-nav-btn {
  display:flex; align-items:center; gap:10px;
  width:100%; padding:10px 12px; border-radius:var(--r-md);
  font-family:inherit; font-size:0.875rem; font-weight:500;
  color:rgba(255,255,255,.65);
  background:none; border:none; cursor:pointer;
  transition:var(--t); text-align:left; margin-bottom:2px;
}
.admin-nav-btn:hover { background:rgba(255,255,255,.07); color:var(--white); }
.admin-nav-btn.active { background:rgba(49,65,124,.5); color:var(--white); border-left:2px solid var(--brand-gold); padding-left:10px; }
.admin-nav-btn svg { flex-shrink:0; opacity:.75; }

.admin-main { flex:1; padding:32px; overflow-y:auto; }
.admin-page-title { font-family:'Cormorant Garamond',serif; font-size:1.7rem; font-weight:700; color:var(--gray-900); margin-bottom:4px; }
.admin-page-desc { font-size:0.875rem; color:var(--text-secondary); margin-bottom:28px; }

.stat-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:16px; margin-bottom:28px; }
.stat-tile { background:var(--white); border-radius:var(--r-lg); padding:20px; border:1px solid var(--border-light); border-top:3px solid var(--brand-navy); box-shadow:var(--shadow-xs); }
.stat-tile.blue  { border-top-color:var(--brand-blue); }
.stat-tile.green { border-top-color:var(--brand-green); }
.stat-tile.gold  { border-top-color:var(--brand-gold); }
.stat-tile.red   { border-top-color:var(--brand-red); }
.stat-tile-icon { color:var(--brand-navy); margin-bottom:10px; }
.stat-tile.blue  .stat-tile-icon { color:var(--brand-blue); }
.stat-tile.green .stat-tile-icon { color:var(--brand-green); }
.stat-tile.gold  .stat-tile-icon { color:#856f00; }
.stat-tile-val { font-family:'Cormorant Garamond',serif; font-size:2rem; font-weight:700; color:var(--gray-900); line-height:1; }
.stat-tile-lbl { font-size:0.75rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.08em; margin-top:5px; }

.data-table { width:100%; border-collapse:collapse; background:var(--white); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-xs); border:1px solid var(--border-light); }
.data-table thead th { background:var(--navy-800); color:rgba(255,255,255,.8); padding:12px 16px; text-align:left; font-size:0.78rem; font-weight:600; text-transform:uppercase; letter-spacing:0.07em; }
.data-table tbody td { padding:12px 16px; border-bottom:1px solid var(--border-light); font-size:0.875rem; color:var(--text-secondary); vertical-align:middle; }
.data-table tbody tr:last-child td { border-bottom:none; }
.data-table tbody tr:hover td { background:var(--gray-50); }

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer { background:var(--navy-900); color:rgba(255,255,255,.6); padding:56px 0 24px; margin-top:64px; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.footer-brand img { height:32px; margin-bottom:16px; }
.footer-brand-name { font-family:'Cormorant Garamond',serif; font-size:1.05rem; color:var(--white); font-weight:600; margin-bottom:8px; }
.footer-desc { font-size:0.83rem; line-height:1.75; }
.footer-col-title { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.16em; color:var(--brand-gold); margin-bottom:14px; }
.footer-link { display:flex; align-items:center; gap:7px; font-size:0.85rem; color:rgba(255,255,255,.55); padding:4px 0; transition:color var(--t); }
.footer-link:hover { color:var(--white); }
.footer-divider { border-color:rgba(255,255,255,.08); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:0.78rem; padding-top:20px; }
.footer-tagline { color:var(--brand-gold); font-weight:600; }

/* ================================================================
   UTILITY
   ================================================================ */
.hidden { display:none !important; }
.text-center { text-align:center; }
.flex { display:flex; }
.items-center { align-items:center; }
.gap-8 { gap:8px; }
.gap-12 { gap:12px; }
.mt-4 { margin-top:4px; }
.mt-8 { margin-top:8px; }
.mt-16 { margin-top:16px; }
.mt-24 { margin-top:24px; }
.mb-16 { margin-bottom:16px; }
.mb-24 { margin-bottom:24px; }
.fw-700 { font-weight:700; }
.text-white { color:var(--white); }
.text-muted { color:var(--text-muted); }

/* ================================================================
   ANIMATIONS
   ================================================================ */
@keyframes spin  { to { transform:rotate(360deg); } }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.7;transform:scale(1.3)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.anim-fade-up { animation:fadeUp .5s ease both; }
.d1 { animation-delay:.08s; }
.d2 { animation-delay:.16s; }
.d3 { animation-delay:.24s; }
.d4 { animation-delay:.32s; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:1024px) {
  .hero-grid { grid-template-columns:1fr; gap:40px; }
  .hero-title { font-size:2.6rem; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:28px; }
  .steps-row { grid-template-columns:1fr 1fr; gap:20px; }
  .steps-row::before { display:none; }
  .admin-sidebar { width:220px; }
}
@media (max-width:768px) {
  .header-nav { display:none; }
  .hamburger { display:flex; }
  .header-inner { gap:16px; }
  .hero-grid { padding:48px 16px 40px; }
  .hero-title { font-size:2rem; }
  .hero-stats { gap:0; }
  .hero-stat-value { font-size:1.5rem; }
  .hero-ctas { gap:8px; }
  .voter-bar { flex-direction:column; align-items:flex-start; }
  .progress-wrap { max-width:100%; width:100%; }
  .steps-row { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:24px; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .admin-wrap { flex-direction:column; }
  .admin-sidebar { width:100%; height:auto; position:relative; }
  .admin-nav { display:flex; overflow-x:auto; padding:8px 12px; gap:4px; }
  .admin-nav-btn { white-space:nowrap; flex-shrink:0; }
  .admin-main { padding:20px 16px; }
  .cand-grid { grid-template-columns:1fr; }
  .results-grid { grid-template-columns:1fr; }
  .positions-grid { grid-template-columns:1fr 1fr; }
  .status-bar-inner { flex-direction:column; align-items:flex-start; gap:14px; }
  .container { padding:0 16px; }
  .section { padding:44px 0; }
  .modal-actions { flex-direction:column; }
  .modal-actions .btn { width:100%; }
}
@media (max-width:480px) {
  .hero-stats { flex-direction:column; gap:0; }
  .hero-stat { border-left:none !important; border-top:1px solid rgba(255,255,255,.1); padding:16px; }
  .hero-stat:first-child { border-top:none; }
  .positions-grid { grid-template-columns:1fr; }
  .hero-ctas .btn { width:100%; }
}