/* ============================================================
   MLA CONSTITUENT PORTAL — MODERN CIVIC UI (redesign)
   Deep navy + saffron accent · glassmorphism · soft depth
   ============================================================ */
:root{
  /* Brand / surface — TVK FLAG palette (red + yellow) */
  --navy:        #A5121B;   /* deep TVK red (headers, nav, footer) */
  --navy-2:      #8E0E15;   /* darker red */
  --indigo:      #D81E28;   /* flag red (gradients) */
  --saffron:     #FFC629;   /* flag yellow — primary accent */
  --saffron-2:   #FFD75E;   /* light yellow */
  --saffron-dk:  #B8790A;   /* deep gold (accessible on cream) */
  --teal:        #F5A700;   /* warm gold — secondary accent */
  --rose:        #E11D48;   /* alerts / danger */

  --ink:         #2A1410;   /* main text (warm dark) */
  --muted:       #8A7267;   /* secondary text */
  --line:        #F0E1CC;   /* hairlines */
  --bg:          #FFFBF2;   /* page background (warm cream) */
  --bg-2:        #FDF2DC;   /* alt section (soft yellow) */
  --surface:     #FFFFFF;
  --green:       #16A34A;
  --amber:       #B8790A;

  /* Legacy aliases (kept so older inline styles still resolve) */
  --red:        var(--saffron);
  --red-dark:   var(--navy);
  --red-bright: var(--saffron-2);
  --gold:       var(--saffron);
  --gold-light: var(--saffron-2);
  --cream:      var(--bg);
  --cream-2:    #C7D2E4;
  --white:      #FFFFFF;

  --font-display: 'Plus Jakarta Sans', 'Baloo Thambi 2', 'Noto Sans Tamil', sans-serif;
  --font-body:    'Inter', 'Noto Sans Tamil', sans-serif;
  --font-ta:      'Baloo Thambi 2', 'Noto Sans Tamil', sans-serif;

  --radius:    18px;
  --radius-lg: 26px;
  --radius-sm: 12px;
  --shadow:    0 24px 60px -18px rgba(11,27,52,.28);
  --shadow-sm: 0 10px 30px -14px rgba(11,27,52,.22);
  --shadow-xs: 0 2px 8px rgba(11,27,52,.06);
  --ring:      0 0 0 4px rgba(216,30,40,.28);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  background:
    radial-gradient(1100px 520px at 90% -10%, rgba(255,198,41,.20), transparent 60%),
    radial-gradient(900px 500px at -10% 8%, rgba(216,30,40,.08), transparent 55%),
    var(--bg);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  margin:0 0 .5em;
  line-height:1.18;
  letter-spacing:-.01em;
  font-weight:800;
}
:lang(ta) h1, :lang(ta) h2, :lang(ta) h3, :lang(ta) h4{ font-family:var(--font-ta); letter-spacing:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ max-width:1180px; margin:0 auto; padding:0 22px; }
button{ font-family:var(--font-body); cursor:pointer; }
:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:8px; }
::selection{ background:var(--saffron-2); color:var(--navy); }

/* ============================================================
   BUNTING — repurposed into a slim tricolour accent rule
   ============================================================ */
.bunting{
  height:6px;
  background:linear-gradient(90deg,var(--indigo) 0 33%, var(--saffron) 33% 66%, var(--indigo) 66% 100%);
  opacity:1;
}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  background:var(--navy);
  color:#C7D2E4;
  font-size:.82rem;
}
.topbar .container{
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 22px; flex-wrap:wrap; gap:8px;
}
.topbar a{ color:var(--saffron-2); }
.topbar .tb-party{ color:var(--saffron-2); font-weight:600; font-family:var(--font-ta); }
.topbar .lang-switch button{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); color:#C7D2E4;
  padding:4px 13px; border-radius:999px; font-size:.78rem; margin-left:6px; transition:.18s;
}
.topbar .lang-switch button:hover{ background:rgba(255,255,255,.14); }
.topbar .lang-switch button.active{ background:var(--saffron); color:var(--navy); border-color:var(--saffron); font-weight:700; }

/* ============================================================
   NAVBAR — glassmorphism sticky
   ============================================================ */
.navbar{
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(11,27,52,.07);
  position:sticky; top:0; z-index:50;
}
.navbar .container{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 22px;
}
.brand{ display:flex; align-items:center; gap:13px; }
.brand img{
  width:50px; height:50px; border-radius:15px; object-fit:cover;
  box-shadow:var(--shadow-xs); border:2px solid #fff; outline:2px solid var(--saffron);
}
.brand .name{ font-family:var(--font-display); font-weight:800; font-size:1.06rem; color:var(--navy); }
.brand .role{ font-size:.78rem; color:var(--muted); }

.nav-links{ display:flex; gap:2px; flex-wrap:wrap; align-items:center; }
.nav-links a{
  padding:9px 15px; border-radius:999px; font-weight:600; font-size:.92rem; color:var(--ink);
  position:relative; transition:.16s;
}
.nav-links a:hover{ background:var(--bg-2); color:var(--navy); }
.nav-links a.active{
  background:linear-gradient(135deg,var(--navy),var(--indigo)); color:#fff;
  box-shadow:0 6px 16px -8px rgba(30,58,138,.7);
}
.nav-toggle{ display:none; background:var(--bg-2); border:none; font-size:1.4rem; color:var(--navy); border-radius:12px; padding:4px 12px; }

@media (max-width:900px){
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:#fff; flex-direction:column; padding:12px 20px 18px; box-shadow:var(--shadow); gap:4px;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ width:100%; }
  .nav-toggle{ display:block; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  background:
    radial-gradient(90% 120% at 88% -20%, rgba(255,198,41,.42), transparent 55%),
    radial-gradient(70% 90% at 8% 120%, rgba(255,215,94,.22), transparent 55%),
    linear-gradient(135deg, var(--navy-2) 0%, var(--navy) 45%, var(--indigo) 100%);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:22px 22px; opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);
          mask-image:linear-gradient(180deg,#000,transparent 75%);
}
.hero .container{
  display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;
  padding:72px 22px 80px;
}
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.28);
  padding:7px 15px; border-radius:999px; font-size:.8rem; letter-spacing:.02em; margin-bottom:20px;
  backdrop-filter:blur(6px);
}
.hero .eyebrow::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--saffron-2); box-shadow:0 0 0 4px rgba(251,191,36,.28); }
.hero h1{ color:#fff; font-size:clamp(2.1rem,4.4vw,3.4rem); margin-bottom:.18em; }
.hero .constituency{ font-size:1.15rem; color:var(--saffron-2); font-weight:700; margin-bottom:20px; }
.hero p.lede{ font-size:1.04rem; color:rgba(255,255,255,.88); max-width:48ch; margin-bottom:30px; }
.hero .cta-row{ display:flex; gap:14px; flex-wrap:wrap; }

.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 26px; border-radius:999px; font-weight:700; font-size:.95rem;
  border:1.5px solid transparent; transition:transform .16s, box-shadow .16s, background .16s;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-gold{ background:linear-gradient(135deg,var(--saffron-2),var(--saffron)); color:var(--navy); box-shadow:0 12px 26px -10px rgba(245,158,11,.75); }
.btn-gold:hover{ box-shadow:0 16px 32px -10px rgba(245,158,11,.9); }
.btn-outline{ border-color:rgba(255,255,255,.55); color:#fff; }
.btn-outline:hover{ background:rgba(255,255,255,.12); }
.btn-red{ background:linear-gradient(135deg,var(--navy),var(--indigo)); color:#fff; box-shadow:0 12px 26px -12px rgba(30,58,138,.8); }
.btn-red:hover{ box-shadow:0 16px 30px -12px rgba(30,58,138,.95); }
.btn-full{ width:100%; justify-content:center; }

.hero-photo{ position:relative; display:flex; justify-content:center; }
.hero-photo .frame{
  width:min(340px,80%); aspect-ratio:3/4; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 40px 80px -24px rgba(0,0,0,.55);
  background:linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
  padding:10px;
}
.hero-photo .frame img{ width:100%; height:100%; object-fit:cover; border-radius:calc(var(--radius-lg) - 10px); }
.hero-photo::after{
  content:""; position:absolute; inset:auto -6% -8% -6%; height:60%; z-index:-1;
  background:radial-gradient(closest-side, rgba(245,158,11,.5), transparent 70%); filter:blur(24px);
}

/* ============================================================
   CM STRIP
   ============================================================ */
.cm-strip{ background:var(--navy-2); color:#C7D2E4; border-top:1px solid rgba(255,255,255,.06); }
.cm-strip .container{
  display:flex; align-items:center; gap:18px; padding:18px 22px; flex-wrap:wrap;
}
.cm-strip img{ width:56px; height:56px; border-radius:14px; object-fit:cover; border:2px solid var(--saffron); }
.cm-strip .label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--saffron-2); }
.cm-strip .name{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:#fff; }

/* ============================================================
   STATS
   ============================================================ */
.stats{ background:transparent; margin-top:0; position:relative; z-index:2; }
.stats .container{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:40px 22px 8px;
}
.stat-card{
  text-align:center; padding:26px 20px; border-radius:var(--radius);
  background:var(--surface); box-shadow:var(--shadow-sm); border:1px solid var(--line);
  transition:transform .18s, box-shadow .18s;
}
.stat-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.stat-card .num{
  font-family:var(--font-display); font-size:2.4rem; font-weight:800;
  background:linear-gradient(135deg,var(--navy),var(--saffron-dk)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-card .lbl{ font-size:.86rem; color:var(--muted); margin-top:4px; font-weight:500; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section{ padding:66px 0; }
.section-head{ text-align:center; max-width:660px; margin:0 auto 40px; }
.section-head .kicker{
  display:inline-block; color:var(--saffron-dk); font-weight:700; font-size:.76rem;
  letter-spacing:.12em; text-transform:uppercase; padding:5px 12px; border-radius:999px;
  background:rgba(245,158,11,.12); margin-bottom:12px;
}
.section-head h2{ font-size:clamp(1.7rem,3vw,2.35rem); }
.section-alt{ background:var(--bg-2); }

/* Category / scheme grid */
.grid-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:18px; }
.card{
  background:var(--surface); border-radius:var(--radius); padding:24px;
  box-shadow:var(--shadow-xs); border:1px solid var(--line);
  transition:transform .18s, box-shadow .18s, border-color .18s;
  position:relative; overflow:hidden;
}
.card::before{
  content:""; position:absolute; left:0; top:0; height:3px; width:100%;
  background:linear-gradient(90deg,var(--indigo),var(--saffron)); transform:scaleX(0); transform-origin:left; transition:.25s;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent; }
.card:hover::before{ transform:scaleX(1); }
.card .icon{
  font-size:1.6rem; width:52px; height:52px; display:grid; place-items:center;
  border-radius:14px; background:linear-gradient(135deg,rgba(255,198,41,.28),rgba(216,30,40,.14));
}
.card h3{ font-size:1.05rem; margin:14px 0 6px; color:var(--navy); }
.card p{ font-size:.9rem; color:var(--muted); margin:0; }
a.card{ text-align:center; }
a.card .icon{ margin:0 auto; }

/* Notices */
.notice-item{
  display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line);
}
.notice-item:last-child{ border-bottom:none; }
.notice-date{
  background:linear-gradient(135deg,var(--navy),var(--indigo)); color:#fff; border-radius:14px;
  padding:10px 12px; text-align:center; min-width:66px; font-family:var(--font-display); font-weight:800;
  box-shadow:var(--shadow-xs); align-self:flex-start; line-height:1.15;
}
.notice-date small{ color:var(--saffron-2); font-weight:700; }
.notice-item h4{ margin:0 0 4px; font-size:1.02rem; color:var(--navy); }
.notice-item p{ margin:0; font-size:.9rem; color:var(--muted); }

/* ============================================================
   FORMS
   ============================================================ */
.form-card{
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow-sm);
  padding:34px; border:1px solid var(--line);
}
.form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
label{ font-weight:600; font-size:.84rem; display:block; margin-bottom:7px; color:var(--ink); }
input, select, textarea{
  width:100%; padding:12px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--line);
  background:#fff; font-family:var(--font-body); font-size:.95rem; color:var(--ink); transition:.16s;
}
input::placeholder, textarea::placeholder{ color:#9AA6B8; }
input:focus, select:focus, textarea:focus{ border-color:var(--saffron); box-shadow:var(--ring); }
.field{ margin-bottom:18px; }
textarea{ resize:vertical; min-height:110px; }

.alert{ padding:15px 18px; border-radius:var(--radius-sm); margin-bottom:22px; font-size:.92rem; border:1px solid transparent; }
.alert-success{ background:#E9F9EF; color:#0F7A3D; border-color:#BBE9CD; }
.alert-error{ background:#FDECEF; color:#B01530; border-color:#F6C6CF; }

/* Status badges */
.badge{ display:inline-flex; align-items:center; gap:6px; padding:5px 13px; border-radius:999px; font-size:.78rem; font-weight:700; }
.badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.badge-pending{ background:#FEF3E2; color:var(--amber); }
.badge-progress{ background:#E4EEFF; color:#1D5FA8; }
.badge-done{ background:#E4F6EC; color:var(--green); }

/* Tables */
table{ width:100%; border-collapse:separate; border-spacing:0; background:var(--surface); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-xs); border:1px solid var(--line); }
th, td{ padding:14px 16px; text-align:left; font-size:.9rem; border-bottom:1px solid var(--line); }
th{ background:var(--navy); color:#DCE6F5; font-weight:600; letter-spacing:.02em; }
tr:last-child td{ border-bottom:none; }
tbody tr{ transition:.14s; }
tbody tr:hover{ background:var(--bg-2); }

/* Gallery before/after */
.gallery-item{ background:var(--surface); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line); transition:transform .18s, box-shadow .18s; }
.gallery-item:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.ba-wrap{ display:grid; grid-template-columns:1fr 1fr; }
.ba-wrap figure{ margin:0; position:relative; }
.ba-wrap img{ width:100%; height:210px; object-fit:cover; }
.ba-wrap figcaption{
  position:absolute; bottom:10px; left:10px; background:rgba(11,27,52,.82); color:#fff;
  font-size:.72rem; padding:4px 12px; border-radius:999px; backdrop-filter:blur(4px); font-weight:600;
}
.gallery-item .body{ padding:18px; }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ background:var(--navy); color:#AEBED6; position:relative; }
footer::before{ content:""; display:block; height:6px; background:linear-gradient(90deg,var(--indigo) 0 33%, var(--saffron) 33% 66%, var(--indigo) 66% 100%); }
footer .container{ padding:52px 22px 28px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; }
footer h4{ color:#fff; font-size:1.02rem; margin-bottom:14px; }
footer a{ color:#AEBED6; transition:.15s; }
footer a:hover{ color:var(--saffron-2); }
.foot-item{ display:flex; gap:10px; margin-bottom:12px; font-size:.9rem; }
.foot-bottom{ border-top:1px solid rgba(255,255,255,.09); text-align:center; padding:18px 22px; font-size:.8rem; color:#7E90AC; }

@media (max-width:900px){
  .hero .container{ grid-template-columns:1fr; text-align:center; }
  .hero .eyebrow{ margin-left:auto; margin-right:auto; }
  .hero .cta-row{ justify-content:center; }
  .hero-photo{ order:-1; }
  .stats .container{ grid-template-columns:1fr; }
  footer .container{ grid-template-columns:1fr; }
}

/* ============================================================
   ADMIN PANEL — modern dashboard chrome
   ============================================================ */
.admin-body{ background:var(--bg-2); }
.admin-wrap{ display:grid; grid-template-columns:264px 1fr; min-height:100vh; }

/* ---- Sidebar ---- */
.admin-side{
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(255,198,41,.10), transparent 60%),
    linear-gradient(185deg,var(--navy),var(--navy-2));
  color:#F6E7CF; padding:20px 16px 16px;
  display:flex; flex-direction:column; gap:6px;
  position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto;
  border-right:1px solid rgba(0,0,0,.2);
}
.admin-brand{ display:flex; align-items:center; gap:12px; padding:6px 8px 18px; margin-bottom:6px; border-bottom:1px solid rgba(255,255,255,.10); }
.admin-flag{ width:50px; height:34px; border-radius:6px; object-fit:cover; box-shadow:0 6px 14px -6px rgba(0,0,0,.6); flex:0 0 auto; }
.admin-brand .ab-name{ display:block; font-family:var(--font-display); font-weight:800; color:#fff; font-size:1.02rem; line-height:1.1; }
.admin-brand .ab-sub{ display:block; font-size:.74rem; color:var(--saffron-2); letter-spacing:.03em; margin-top:2px; }
.admin-nav{ display:flex; flex-direction:column; gap:3px; }
.admin-nav-label{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,231,207,.5); padding:14px 12px 6px; }
.admin-nav a, .admin-side-foot a{
  display:flex; align-items:center; gap:11px;
  padding:10px 13px; border-radius:12px; font-size:.92rem; font-weight:500; color:#EAD9BE; transition:.15s;
  position:relative;
}
.admin-nav a .ic, .admin-side-foot a .ic{ width:22px; text-align:center; font-size:1.02rem; opacity:.95; }
.admin-nav a:hover, .admin-side-foot a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.admin-nav a.active{
  background:linear-gradient(135deg,var(--saffron),#E0A400); color:var(--navy-2); font-weight:700;
  box-shadow:0 10px 20px -10px rgba(255,198,41,.8);
}
.admin-nav a.active .ic{ opacity:1; }
.admin-nav .admin-badge{ margin-left:auto; background:var(--indigo); color:#fff; font-size:.7rem; font-weight:700; padding:1px 9px; border-radius:999px; }
.admin-nav a.active .admin-badge{ background:var(--navy-2); color:#fff; }
.admin-side-foot{ margin-top:auto; padding-top:12px; border-top:1px solid rgba(255,255,255,.10); display:flex; flex-direction:column; gap:3px; }
.admin-side-foot .logout{ color:#FFC7C7; }
.admin-side-foot .logout:hover{ background:rgba(225,29,72,.22); color:#fff; }

/* ---- Content column ---- */
.admin-content{ display:flex; flex-direction:column; min-width:0; }
.admin-appbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:14px;
  padding:12px 26px; background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(12px); -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
}
.admin-menu-btn{ display:none; background:var(--bg-2); border:none; color:var(--navy); font-size:1.2rem; border-radius:10px; padding:5px 12px; }
.admin-crumb{ font-weight:700; color:var(--navy); font-family:var(--font-display); letter-spacing:.02em; }
.admin-crumb span{ color:var(--muted); font-weight:500; }
.admin-appbar-right{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.admin-date{ font-size:.82rem; color:var(--muted); background:var(--bg-2); padding:6px 12px; border-radius:999px; }
.admin-user{ display:flex; align-items:center; gap:8px; font-size:.86rem; font-weight:600; color:var(--ink); }
.admin-avatar{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; background:linear-gradient(135deg,var(--indigo),var(--navy)); box-shadow:var(--shadow-xs); }
.admin-logout-btn{ display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--bg-2); color:var(--navy); font-size:1.05rem; }
.admin-logout-btn:hover{ background:#FCE0E3; color:var(--rose); }

.admin-main{ padding:28px 26px 40px; background:transparent; }
.admin-main > h1{ font-size:1.7rem; color:var(--navy); margin:0 0 22px; }
.admin-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; gap:16px; flex-wrap:wrap; }
.admin-topbar h1{ color:var(--navy); }

/* ---- Stat cards ---- */
.kv-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:18px; }
.admin-stat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow-xs); display:flex; align-items:center; gap:16px;
  position:relative; overflow:hidden; transition:transform .18s, box-shadow .18s;
}
.admin-stat::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--indigo); }
.admin-stat.s-pending::after{ background:var(--amber); }
.admin-stat.s-progress::after{ background:#1D5FA8; }
.admin-stat.s-done::after{ background:var(--green); }
.admin-stat:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); }
.admin-stat .as-ic{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; font-size:1.5rem; flex:0 0 auto; background:linear-gradient(135deg,rgba(255,198,41,.28),rgba(216,30,40,.12)); }
.admin-stat .as-num{ font-family:var(--font-display); font-size:1.9rem; font-weight:800; color:var(--navy); line-height:1; }
.admin-stat .as-lbl{ font-size:.84rem; color:var(--muted); margin-top:4px; }

/* ---- Panels ---- */
.admin-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-xs); overflow:hidden; margin-bottom:24px; }
.admin-card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line); }
.admin-card-head h2{ margin:0; font-size:1.1rem; color:var(--navy); }
.admin-card-body{ padding:6px 8px; }
.admin-card table{ box-shadow:none; border:none; border-radius:0; }
.admin-card table th:first-child{ padding-left:20px; } .admin-card table td:first-child{ padding-left:20px; }
.admin-card table th:last-child{ padding-right:20px; } .admin-card table td:last-child{ padding-right:20px; }

.upload-box{
  background:var(--surface); border:2px dashed #E2C9A0; border-radius:var(--radius);
  padding:24px; text-align:center; margin-bottom:20px; transition:.16s;
}
.upload-box:hover{ border-color:var(--saffron); background:#FFFDF6; }
.upload-box img{ max-height:160px; margin:0 auto 12px; border-radius:var(--radius-sm); }

@media (max-width:860px){
  .admin-wrap{ grid-template-columns:1fr; }
  .admin-side{
    position:fixed; z-index:60; left:0; top:0; bottom:0; width:264px; height:100vh;
    transform:translateX(-100%); transition:transform .22s ease; box-shadow:var(--shadow);
  }
  .admin-side.open{ transform:translateX(0); }
  .admin-menu-btn{ display:block; }
}

/* ---- Login ---- */
.login-wrap{ min-height:86vh; display:flex; align-items:center; justify-content:center; padding:48px 20px;
  background:
    radial-gradient(700px 400px at 80% 0%, rgba(255,198,41,.22), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(216,30,40,.10), transparent 60%);
}
.login-card{ background:var(--surface); padding:40px; border-radius:var(--radius-lg); box-shadow:var(--shadow); width:100%; max-width:400px; border:1px solid var(--line); }

/* ============================================================
   TVK WAVING FLAG
   ============================================================ */
.flag-wave{ transform-origin:left center; animation:flagwave 3.4s ease-in-out infinite; will-change:transform; }
@keyframes flagwave{
  0%,100%{ transform:rotate(-1.1deg) skewY(.7deg) scaleY(1); }
  50%    { transform:rotate(1.1deg)  skewY(-.7deg) scaleY(.98); }
}
.brand-flag{ width:52px; height:35px; border-radius:5px; object-fit:cover; box-shadow:var(--shadow-xs); border:1px solid rgba(0,0,0,.06); flex:0 0 auto; }
.hero-flag{
  display:block; width:min(230px,64%); border-radius:8px; margin-bottom:22px;
  border:2px solid rgba(255,255,255,.4); box-shadow:0 20px 44px -16px rgba(0,0,0,.55);
}
.foot-flag{ width:120px; border-radius:6px; margin-bottom:12px; box-shadow:var(--shadow-xs); }
@media (max-width:520px){ .brand-flag{ display:none; } }
@media (prefers-reduced-motion:reduce){ .flag-wave{ animation:none; } }

/* Entrance animation for cards/sections */
@media (prefers-reduced-motion:no-preference){
  .card, .stat-card, .gallery-item{ animation:rise .5s both; }
  @keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
}

/* ============================================================
   HOME TOP BANNER (animated medallion)
   ============================================================ */
.top-banner{
  position:relative; overflow:hidden; text-align:center;
  padding:30px 20px 34px;
  background:
    radial-gradient(70% 130% at 50% -10%, rgba(255,198,41,.30), transparent 60%),
    linear-gradient(135deg, var(--navy-2) 0%, var(--navy) 45%, var(--indigo) 100%);
}
.top-banner::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size:20px 20px; opacity:.5;
  -webkit-mask-image:radial-gradient(60% 100% at 50% 50%, #000, transparent 75%);
          mask-image:radial-gradient(60% 100% at 50% 50%, #000, transparent 75%);
}
.top-banner .tb-float{
  position:relative; display:inline-block;
  animation:tbFloat 4.6s ease-in-out infinite;
}
.top-banner .tb-carousel{
  position:relative; width:min(300px,76vw); aspect-ratio:1/1; margin:0 auto;
  border-radius:50%; overflow:hidden; border:5px solid var(--saffron);
  box-shadow:0 22px 48px -14px rgba(0,0,0,.55), 0 0 0 4px rgba(255,255,255,.14);
  animation:tbIn .8s cubic-bezier(.2,.7,.3,1) both, tbGlow 3.2s ease-in-out 1s infinite;
}
.top-banner .tb-slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top;
  transform-origin:center; opacity:0; animation:tbKen 15s ease-in-out infinite;
}
.top-banner .tb-slide:nth-child(1){ animation-delay:0s; }
.top-banner .tb-slide:nth-child(2){ animation-delay:5s; }
.top-banner .tb-slide:nth-child(3){ animation-delay:10s; }
/* Ken-Burns: slow zoom + gentle pan while each photo fades in/out */
@keyframes tbKen{
  0%   { opacity:0; transform:scale(1.02) translate(0,0); }
  4%   { opacity:1; }
  30%  { opacity:1; }
  34%  { opacity:0; transform:scale(1.16) translate(-2%,-1.5%); }
  100% { opacity:0; transform:scale(1.02) translate(0,0); }
}
@keyframes tbIn{ from{ opacity:0; transform:scale(.85); } to{ opacity:1; transform:scale(1); } }
@keyframes tbFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@keyframes tbGlow{
  0%,100%{ box-shadow:0 22px 48px -14px rgba(0,0,0,.55), 0 0 0 4px rgba(255,255,255,.14), 0 0 0 0 rgba(255,198,41,.5); }
  50%    { box-shadow:0 22px 48px -14px rgba(0,0,0,.55), 0 0 0 4px rgba(255,255,255,.14), 0 0 34px 8px rgba(255,198,41,.6); }
}
@media (prefers-reduced-motion:reduce){
  .top-banner .tb-float{ animation:none; }
  .top-banner .tb-carousel{ animation:tbIn .5s both; }
  .top-banner .tb-slide{ animation:none; }
  .top-banner .tb-slide:nth-child(1){ opacity:1; }
}