/* ============================================================
   Najibabad Live Voter Update — 2026
   Election Solution | Team Rafeeq Ansari
   Design system: dark "command room" theme, purple/teal brand
   accents (from the Election Solution mark) + gold highlight +
   a restrained red/green nod to the cycle election symbol.
   ============================================================ */

:root{
  --bg:            #070a14;
  --bg-2:          #0b0f1e;
  --surface:       #10152650;
  --surface-solid: #10152a;
  --surface-2:     #171d34;
  --border:        #26304e;
  --border-soft:   #1c2440;
  --text:          #eef1fb;
  --text-dim:      #9aa4c4;
  --text-faint:    #6b7494;

  --purple:        #9b6bf0;
  --purple-dim:    #6d4fb0;
  --teal:          #22c3ad;
  --teal-dim:      #17897a;
  --gold:          #f2b544;
  --red:           #ef4b62;
  --green:         #35c96f;

  --grad-brand:    linear-gradient(135deg, var(--purple), var(--teal));
  --grad-gold:     linear-gradient(135deg, #f6c968, #ec9b3b);
  --grad-hero:     radial-gradient(1200px 600px at 15% -10%, rgba(155,107,240,.25), transparent 60%),
                    radial-gradient(1000px 700px at 90% 10%, rgba(34,195,173,.20), transparent 55%);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-lift: 0 20px 50px -20px rgba(0,0,0,.6);
  --shadow-soft: 0 8px 24px -12px rgba(0,0,0,.5);

  --font-display: 'Sora', 'Hind', sans-serif;
  --font-body: 'Hind', 'Sora', sans-serif;
  color-scheme: dark;
}

*{ box-sizing: border-box; }
[hidden]{ display: none !important; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
button{ font-family: inherit; }
input, select{ font-family: inherit; }

/* ---------------- background fx ---------------- */
.bg-fx{ position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); }
.bg-grid{
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(rgba(155,107,240,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155,107,240,.06) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(1200px 800px at 50% 0%, #000 40%, transparent 90%);
}
.bg-glow{ position: absolute; border-radius: 50%; filter: blur(90px); opacity: .35; }
.bg-glow--a{ width: 600px; height: 600px; top: -200px; left: -150px; background: var(--purple); }
.bg-glow--b{ width: 700px; height: 700px; top: 200px; right: -250px; background: var(--teal); }

/* ---------------- topbar ---------------- */
.topbar{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px) saturate(140%);
  background: rgba(7,10,20,.72);
  border-bottom: 1px solid var(--border-soft);
}
.topbar__inner{
  max-width: 1240px; margin: 0 auto; padding: 16px 20px 14px;
  display: flex; align-items: center; justify-content: flex-start; gap: 16px;
}
.brand{ display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.brand__icon{ width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; }
.brand__text{ display: flex; flex-direction: column; line-height: 1.2; }
/* Animated shimmer/shine sweep across the brand wordmark — a moving
   highlight band inside the existing purple/teal (and gold, for "AI")
   gradient, done purely with background-position so it keeps working
   with the text-gradient-clip trick already used everywhere else. */
.brand__name{
  font-family: var(--font-display); font-weight: 700; font-size: 26px; white-space: nowrap;
  background: linear-gradient(100deg, var(--purple) 0%, var(--teal) 35%, #fbfbff 50%, var(--teal) 65%, var(--purple) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: brandShimmer 5s linear infinite;
}
.brand__name em{
  font-style: normal;
  background: linear-gradient(100deg, #f6c968 0%, #ec9b3b 35%, #fff6e0 50%, #ec9b3b 65%, #f6c968 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: brandShimmer 5s linear infinite;
}
@keyframes brandShimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce){
  .brand__name, .brand__name em{ animation: none; }
}
.brand__sub{ font-size: 13px; color: var(--text-faint); letter-spacing: .04em; }
@media (max-width: 900px){
  .brand__icon{ width: 54px; height: 54px; }
  .brand__name{ font-size: 20px; }
}

/* Second header row: a full-width, bordered strip dedicated to the nav so
   it always has its own room and never has to compete with the brand for
   space (that competition used to force it to wrap or hide behind a
   hamburger menu). All tabs now stay on a single line at every screen
   size — on narrow screens the strip scrolls horizontally instead. */
.topbar__navrow{
  border-top: 1px solid var(--border-soft);
  background: rgba(255,255,255,.03);
}
.nav{
  max-width: 1240px; margin: 0 auto; padding: 9px 20px;
  display: flex; gap: 4px; flex-wrap: nowrap;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.nav::-webkit-scrollbar{ height: 6px; }
.nav::-webkit-scrollbar-thumb{ background: var(--border-soft); border-radius: 4px; }
.nav__link{
  background: transparent; border: 1px solid transparent; color: var(--text-dim);
  padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: .18s ease;
  white-space: nowrap; flex-shrink: 0;
}
.nav__link:hover{ color: var(--text); background: var(--surface-2); }
.nav__link.is-active{ color: var(--bg); background: var(--grad-brand); }

/* ---------------- hero ---------------- */
.hero{
  position: relative;
  background: var(--grad-hero);
  padding: 56px 20px 0;
  overflow: hidden;
}
.hero__inner{
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px;
  align-items: center;
  padding-bottom: 48px;
}
.hero__badgerow{ display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.badge{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  background: var(--surface);
}
.badge--live{ color: #ffd7dd; border-color: rgba(239,75,98,.35); background: rgba(239,75,98,.12); }
.badge--live .dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(239,75,98,.6); animation: pulse 1.6s infinite; }
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(239,75,98,.55); }
  70%{ box-shadow: 0 0 0 8px rgba(239,75,98,0); }
  100%{ box-shadow: 0 0 0 0 rgba(239,75,98,0); }
}
.badge--ac{ color: #cdeee7; border-color: rgba(34,195,173,.35); background: rgba(34,195,173,.10); }

.hero__title{
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.08;
  font-weight: 800;
  margin: 0 0 14px;
  letter-spacing: -.01em;
}
.hero__title span{
  display: block;
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__title--pda{
  color: var(--red);
  font-weight: 900;
  font-size: clamp(44px, 6.8vw, 78px);
  letter-spacing: .01em;
  text-shadow: 0 0 40px rgba(239,75,98,.35);
}
.hero__team{
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 27px); font-weight: 700; color: var(--text);
  margin: 0 0 10px;
}
.hero__team::before{ content: '● '; color: var(--teal); }
.hero__team span{
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__tagline{ color: var(--text-dim); font-size: 15.5px; margin: 0 0 26px; max-width: 46ch; }

.hero__cta{ display: flex; gap: 12px; flex-wrap: wrap; }
.btn{
  border: none; cursor: pointer; border-radius: 12px;
  font-weight: 700; font-size: 14.5px; padding: 13px 22px;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:active{ transform: translateY(1px) scale(.99); }
.btn--primary{ background: var(--grad-brand); color: #0a0e18; box-shadow: 0 10px 30px -10px rgba(155,107,240,.55); }
.btn--primary:hover{ box-shadow: 0 14px 34px -8px rgba(155,107,240,.7); }
.btn--ghost{ background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.btn--ghost:hover{ background: var(--border-soft); }
.btn--sm{ padding: 8px 14px; font-size: 13px; border-radius: 9px; }
.btn--danger{ background: rgba(239,75,98,.15); color: #ff8b9c; border: 1px solid rgba(239,75,98,.35); }

.hero__media{ position: relative; display: flex; justify-content: center; }
.hero__photoWrap{ position: relative; max-width: 380px; width: 100%; }
.hero__photo{
  width: 100%; border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lift);
  object-fit: cover;
  aspect-ratio: 900/950;
}
.hero__symbol{
  position: absolute; bottom: -22px; right: -22px;
  width: 96px; height: 96px; border-radius: 50%;
  border: 4px solid var(--bg);
  box-shadow: var(--shadow-soft);
}

.hero__stats{
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
}
.stat{ background: var(--surface-solid); padding: 22px 16px; text-align: center; }
.stat__value{ display: block; font-family: var(--font-display); font-size: clamp(22px,3vw,32px); font-weight: 800; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat__label{ font-size: 13px; color: var(--text-dim); }

/* ---------------- main app ---------------- */
.app{ max-width: 1240px; margin: 0 auto; padding: 40px 20px 80px; }
.view{ display: none; animation: fadeUp .35s ease; }
.view.is-active{ display: block; }
@keyframes fadeUp{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }

.section-head{ margin-bottom: 26px; }
.section-head h2{ font-family: var(--font-display); font-size: 28px; margin: 0 0 6px; }
.section-head p{ color: var(--text-dim); margin: 0; }

.grid{ display: grid; gap: 18px; }
.grid--kpi{ grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); margin-bottom: 24px; }
.grid--2{ grid-template-columns: repeat(auto-fit, minmax(360px,1fr)); margin-bottom: 24px; }

.card{
  background: var(--surface-solid);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: var(--shadow-soft);
}
.card__title{ font-family: var(--font-display); font-size: 16px; margin: 0 0 16px; color: var(--text); }

.kpi{
  background: var(--surface-solid);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}
.kpi::before{
  content: ''; position: absolute; inset: 0; opacity: .08; background: var(--kpi-grad, var(--grad-brand));
}
.kpi__icon{ font-size: 22px; margin-bottom: 10px; display: inline-block; }
.kpi__value{ font-family: var(--font-display); font-size: 26px; font-weight: 800; position: relative; }
.kpi__label{ color: var(--text-dim); font-size: 13px; position: relative; }
.kpi__label:first-child{ text-transform: uppercase; letter-spacing: .04em; font-size: 11px; font-weight: 700; margin-bottom: 6px; }
.kpi__cand{ font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text); margin: 6px 0 2px; position: relative; }

/* ---------------- toolbar / inputs ---------------- */
.toolbar{ display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.toolbar--search{ align-items: stretch; }
.input{
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 14.5px;
  flex: 1;
  min-width: 180px;
}
.input:focus{ outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(155,107,240,.18); }
.input--select{ flex: 0 0 auto; min-width: 200px; }
.input--big{ font-size: 16px; padding: 14px 16px; }
.search-hint{ color: var(--text-faint); font-size: 13px; margin: -10px 0 16px; }

/* ---------------- table ---------------- */
.table-wrap{ overflow-x: auto; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--surface-solid); }
.table{ width: 100%; border-collapse: collapse; min-width: 640px; font-size: 14px; }
.table thead th{
  text-align: left; padding: 12px 14px; font-size: 12.5px; letter-spacing: .03em;
  color: var(--text-dim); border-bottom: 1px solid var(--border-soft);
  position: sticky; top: 0; background: var(--surface-solid);
}
.table tbody td{ padding: 11px 14px; border-bottom: 1px solid var(--border-soft); color: var(--text); }
.table tbody tr:hover{ background: var(--surface-2); }
.table tbody tr:last-child td{ border-bottom: none; }
.pill{ display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pill--m{ background: rgba(34,195,173,.15); color: #7fe4d4; }
.pill--f{ background: rgba(239,75,98,.15); color: #ff9caa; }
.pill--o{ background: rgba(242,181,68,.15); color: #ffd28a; }
.row-link{ cursor: pointer; }
.link-btn{ background: none; border: 1px solid var(--border); color: var(--teal); padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.link-btn:hover{ background: var(--surface-2); }

.pager{ display: flex; gap: 14px; justify-content: center; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.pager__nums{ display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pager button{
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim);
  padding: 7px 13px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.pager button.is-active{ background: var(--grad-brand); color: var(--bg); border-color: transparent; }
.pager button:disabled{ opacity: .35; cursor: not-allowed; }
.pager__jump{ display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); }
.pager__jumpInput{
  width: 62px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  padding: 6px 8px; border-radius: 8px; font-size: 13px; text-align: center;
}
.pager__jumpInput:focus{ outline: none; border-color: var(--purple); }
.pager__jumpBtn{
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim);
  padding: 6px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 700;
}
.pager__jumpBtn:hover{ background: var(--border-soft); color: var(--text); }

.back-link{ background: none; border: none; color: var(--teal); cursor: pointer; font-weight: 700; margin-bottom: 16px; padding: 0; font-size: 14px; }

/* ---------------- charts (hand-rolled SVG/bars) ---------------- */
.chart-wrap{ min-height: 220px; }
.chart-wrap--wide{ min-height: 260px; }
.bar-row{ display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 13px; }
.bar-row__label{ width: 130px; flex-shrink: 0; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row__label--wide{ width: 240px; }
.bar-row__track{ flex: 1; background: var(--surface-2); border-radius: 6px; height: 14px; overflow: hidden; }
.bar-row__fill{ height: 100%; border-radius: 6px; background: var(--grad-brand); }
.bar-row__val{ width: 60px; text-align: right; font-weight: 700; color: var(--text); flex-shrink: 0; }
.bar-row--cand{ align-items: flex-start; margin-bottom: 14px; }
.bar-row--cand .bar-row__label{ white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; padding-top: 1px; }
.bar-row--cand .bar-row__track{ margin-top: 3px; }
.bar-row--cand .bar-row__val{ width: auto; min-width: 110px; padding-top: 1px; }
.bar-row__cand{ font-size: 11.5px; font-weight: 400; color: var(--text-faint); margin-top: 2px; white-space: normal; }

/* ---------------- month-wise addition/deletion cards ---------------- */
.month-cards{ display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap: 12px; }
.month-card{
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 14px 16px; text-align: center;
}
.month-card--total{ background: var(--surface-solid); border-color: var(--purple-dim); }
.month-card__label{ font-size: 12.5px; color: var(--text-dim); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 8px; }
.month-card__nums{ display: flex; justify-content: center; gap: 14px; font-family: var(--font-display); font-weight: 800; font-size: 17px; }
.month-card__nums .add{ color: var(--green); }
.month-card__nums .del{ color: var(--red); }

/* ---------------- family groups ---------------- */
.family-groups{ display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); }
.family-card{ background: var(--surface-solid); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 14px 16px; cursor: pointer; transition: .15s ease; }
.family-card:hover{ border-color: var(--purple); background: var(--surface-2); }
.family-card__head{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.family-card__house{ font-weight: 700; font-family: var(--font-display); }
.family-card__count{ font-size: 12px; color: var(--teal); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.family-card__chevron{ color: var(--text-faint); font-weight: 600; }
.family-card__list{ margin: 0; padding-left: 18px; font-size: 13px; color: var(--text-dim); }
.family-card__list li{ margin-bottom: 3px; }

/* ---------------- duplicate tabs ---------------- */
.dup-tabs{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.dup-tab{
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim);
  padding: 10px 14px; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 700;
}
.dup-tab span{ display: inline-block; margin-left: 6px; background: rgba(255,255,255,.08); padding: 1px 7px; border-radius: 999px; font-size: 11.5px; }
.dup-tab.is-active{ background: var(--grad-brand); color: var(--bg); border-color: transparent; }

/* ---------------- booth-win tiles (election results) ---------------- */
.boothwin-tiles{ display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 12px; }
.boothwin-tile{
  background: var(--surface-2); border: 1px solid var(--border); border-left: 4px solid var(--pc, var(--border));
  color: var(--text);
  border-radius: var(--radius-sm); padding: 14px 12px; text-align: center; cursor: pointer;
  font-family: inherit; transition: .15s ease;
}
.boothwin-tile:hover{ border-color: var(--pc, var(--purple)); }
.boothwin-tile.is-active{ background: var(--pc, var(--purple)); border-color: var(--pc, var(--purple)); color: #0a0e18; }
.boothwin-tile.is-active .boothwin-tile__pct{ color: #0a0e18; opacity: .85; }
.boothwin-tile__party{ font-weight: 800; font-family: var(--font-display); margin-bottom: 6px; color: var(--pc, var(--text)); }
.boothwin-tile.is-active .boothwin-tile__party{ color: #0a0e18; }
.boothwin-tile__count{ font-size: 24px; font-weight: 800; font-family: var(--font-display); }
.boothwin-tile__pct{ font-size: 11.5px; color: var(--text-dim); margin-top: 4px; }

/* ---------------- results ---------------- */
.result-card{ background: var(--surface-solid); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 22px; }
.result-card h3{ font-family: var(--font-display); margin: 0 0 4px; font-size: 17px; }
.result-card .yr{ color: var(--text-faint); font-size: 12.5px; margin-bottom: 16px; }
.result-row{ display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px dashed var(--border-soft); font-size: 14px; }
.result-row:last-child{ border-bottom: none; }
.result-row .name{ font-weight: 600; }
.result-row .party{ font-size: 11.5px; color: var(--text-faint); }
.result-row .votes{ font-weight: 700; font-family: var(--font-display); }
.winner-tag{ background: var(--pc, var(--gold)); color: #0a0e18; font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; margin-left: 8px; }
.party-badge{
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .02em;
  color: var(--pc, var(--purple));
  background: rgba(155,107,240,.16); border: 1px solid rgba(155,107,240,.45);
  background: color-mix(in srgb, var(--pc, var(--purple)) 16%, transparent);
  border-color: color-mix(in srgb, var(--pc, var(--purple)) 45%, transparent);
}

/* ---------------- portal login gate (whole-portal, session-only) ---------------- */
.login-gate{
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: var(--bg);
}
.login-gate__box{
  background: var(--surface-solid); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); padding: 44px 36px; text-align: center;
  max-width: 380px; width: 100%; box-shadow: var(--shadow-lift);
}
.login-gate__logo{ width: 78px; height: 78px; object-fit: contain; margin: 0 auto 18px; border-radius: 50%; }
.login-gate__brand{
  font-family: var(--font-display); font-weight: 700; font-size: 24px; margin-bottom: 4px;
  background: linear-gradient(100deg, var(--purple) 0%, var(--teal) 35%, #fbfbff 50%, var(--teal) 65%, var(--purple) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: brandShimmer 5s linear infinite;
}
.login-gate__brand em{
  font-style: normal;
  background: linear-gradient(100deg, #f6c968 0%, #ec9b3b 35%, #fff6e0 50%, #ec9b3b 65%, #f6c968 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: brandShimmer 5s linear infinite;
}
.login-gate__sub{ font-family: var(--font-display); font-weight: 800; letter-spacing: .05em; color: var(--red); font-size: 15px; margin-bottom: 28px; }
.login-gate__fields{ display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.login-gate__fields .input{ text-align: center; }
.login-gate__btn{ width: 100%; }
.login-gate__msg{ color: var(--red); font-size: 13px; min-height: 18px; margin: 12px 0 0; }

/* ---------------- admin gate ---------------- */
.admin-gate{ display: flex; justify-content: center; padding: 40px 0; }
.admin-gate__box{
  background: var(--surface-solid); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); padding: 36px; text-align: center; max-width: 360px; width: 100%;
  box-shadow: var(--shadow-lift);
}
.admin-gate__icon{ width: 56px; margin: 0 auto 14px; }
.admin-gate__box h3{ font-family: var(--font-display); margin: 0 0 6px; }
.admin-gate__box p{ color: var(--text-dim); font-size: 13.5px; margin: 0 0 18px; }
.admin-gate__box .input{ margin-bottom: 12px; text-align: center; }
.admin-gate__msg{ color: var(--red); font-size: 13px; min-height: 18px; margin-top: 10px !important; }

/* ---------------- admin panel: bulk upload cards ---------------- */
.admin-upload-card__hint{ color: var(--text-dim); font-size: 12.5px; margin: 0 0 14px; line-height: 1.6; }
.admin-upload-card__hint code{ background: var(--surface-2); color: var(--teal); padding: 1px 5px; border-radius: 5px; font-size: 11.5px; }
.upload-drop{
  border: 2px dashed var(--border); border-radius: var(--radius-sm);
  padding: 26px 14px; text-align: center; cursor: pointer;
  color: var(--text-dim); font-size: 13.5px; transition: .15s ease;
}
.upload-drop span{ font-size: 26px; display: block; margin-bottom: 8px; }
.upload-drop:hover{ border-color: var(--purple); color: var(--text); background: var(--surface-2); }
.upload-drop.is-drag{ border-color: var(--teal); background: rgba(34,195,173,.08); color: var(--text); }
.admin-upload-status{ font-size: 13px; margin: 12px 0 0; min-height: 18px; color: var(--text-dim); }

/* ---------------- modal ---------------- */
.modal{ position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal__backdrop{ position: absolute; inset: 0; background: rgba(4,6,12,.7); backdrop-filter: blur(4px); }
.modal__box{
  position: relative; background: var(--surface-solid); border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg); padding: 26px; max-width: 420px; width: 100%;
  box-shadow: var(--shadow-lift);
  display: flex; flex-direction: column; gap: 12px;
}
.modal__box h3{ font-family: var(--font-display); margin: 0 0 6px; }
.modal__box label{ font-size: 13px; color: var(--text-dim); display: flex; flex-direction: column; gap: 6px; }
.modal__actions{ display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

/* ---------------- toast ---------------- */
.toast-wrap{ position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast{
  background: var(--surface-solid); border: 1px solid var(--border); border-left: 4px solid var(--teal);
  padding: 12px 16px; border-radius: 10px; font-size: 13.5px; box-shadow: var(--shadow-soft);
  animation: toastIn .25s ease;
}
.toast--error{ border-left-color: var(--red); }
@keyframes toastIn{ from{ opacity: 0; transform: translateY(10px); } to{ opacity: 1; transform: none; } }

/* ---------------- footer ---------------- */
.footer{ border-top: 1px solid var(--border-soft); padding: 34px 20px; }
.footer__inner{ max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.footer__brand{ display: flex; align-items: center; gap: 10px; }
.footer__icon{ width: 30px; }
.footer__brand strong{ font-family: var(--font-display); display: block; font-size: 14px; }
.footer__brand span{ font-size: 11px; color: var(--text-faint); }
.footer__note{ color: var(--text-dim); font-size: 13px; margin: 0; }

.empty-note{ text-align: center; color: var(--text-faint); padding: 30px 0; font-size: 14px; }

/* ---------------- responsive ---------------- */
@media (max-width: 900px){
  .hero__inner{ grid-template-columns: 1fr; }
  .hero__media{ order: -1; }
  .hero__photoWrap{ max-width: 280px; margin: 0 auto; }
  .hero__stats{ grid-template-columns: repeat(2,1fr); }
}