/*
 * NKOSEC student homepage compact background layout
 * Keeps the announcement, login card and theme selector content-sized when
 * a custom image is selected in Background Studio.
 */

body.nk-homepage{
  --home-navy:#071a33;
  --home-navy-2:#0c274b;
  --home-blue:#1676df;
  --home-cyan:#12a9e8;
  --home-red:#d41122;
  --home-text:#f8fbff;
  --home-muted:rgba(226,235,248,.78);
  min-height:100svh;
  isolation:isolate;
  background:
    radial-gradient(900px 520px at 16% 10%,rgba(0,183,255,.14),transparent 65%),
    linear-gradient(135deg,#051020,#0a1b34) !important;
}

/* A custom Background Studio image is placed inside this layer. */
body.nk-homepage #nkosec-custom-background-layer::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(2,10,22,.52),rgba(2,10,22,.67)),
    radial-gradient(circle at 50% 22%,rgba(20,76,135,.14),transparent 42%);
}

/* Keep the homepage above the background and overlay. */
body.nk-homepage > .topbar,
body.nk-homepage > .wrap{
  position:relative;
  z-index:2;
}

body.nk-homepage .topbar{
  width:min(1120px,calc(100% - 28px));
  margin:0 auto;
  min-height:76px !important;
  padding:12px 0 7px !important;
}

body.nk-homepage .brand{
  gap:12px !important;
  min-width:0;
}

body.nk-homepage .logo{
  width:58px !important;
  height:58px !important;
  flex:0 0 58px;
  border:2px solid rgba(255,255,255,.78) !important;
  background:#fff !important;
  box-shadow:0 10px 28px rgba(0,0,0,.25) !important;
}

body.nk-homepage .brand strong{
  color:#fff !important;
  font-size:clamp(21px,2.3vw,31px) !important;
  line-height:1 !important;
  letter-spacing:.015em !important;
  text-shadow:0 3px 18px rgba(0,0,0,.42);
}

body.nk-homepage .brand span{
  color:rgba(234,242,253,.72) !important;
  font-size:clamp(9px,1vw,12px) !important;
  margin-top:6px !important;
  letter-spacing:.22em !important;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}

body.nk-homepage .adminBtn{
  right:0 !important;
  top:18px !important;
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:max-content !important;
  max-width:max-content !important;
  padding:9px 14px !important;
  color:#071a33 !important;
  background:rgba(255,255,255,.96) !important;
  border:1px solid rgba(255,255,255,.8) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.20) !important;
  transition:transform .18s ease,box-shadow .18s ease;
}
body.nk-homepage .adminBtn::before{content:"●";font-size:9px;color:#0d3d75;}
body.nk-homepage .adminBtn:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(0,0,0,.25) !important;}

body.nk-homepage .wrap{
  width:min(1120px,calc(100% - 28px)) !important;
  margin:0 auto !important;
  padding:4px 0 48px !important;
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr) auto !important;
  justify-items:center;
  align-items:center;
  gap:20px !important;
}

/*
 * The global theme stylesheet styles every direct section inside .wrap as a
 * large card. Explicitly remove that treatment from the login grid.
 */
html[data-nkosec-theme] body.nk-homepage .mainGrid,
html[data-nkosec-theme="light"] body.nk-homepage .mainGrid,
html[data-nkosec-theme="dark"] body.nk-homepage .mainGrid{
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  color:inherit !important;
}

body.nk-homepage .voteHero{
  width:min(900px,100%) !important;
  justify-self:center;
  padding:18px 24px !important;
  border-radius:19px !important;
  color:#fff !important;
  background:
    radial-gradient(circle at 8% 50%,rgba(211,17,34,.14),transparent 22%),
    radial-gradient(circle at 96% 78%,rgba(18,169,232,.14),transparent 25%),
    linear-gradient(125deg,rgba(5,20,43,.92),rgba(7,31,61,.88)) !important;
  border:1px solid rgba(103,169,255,.34) !important;
  box-shadow:0 18px 52px rgba(0,0,0,.28) !important;
  backdrop-filter:blur(16px) saturate(120%);
}

body.nk-homepage .voteHero::before{
  inset:0 !important;
  opacity:.5 !important;
  background:linear-gradient(105deg,rgba(255,255,255,.045),transparent 35%,rgba(255,255,255,.025)) !important;
}

body.nk-homepage .voteHeroInner{
  grid-template-columns:66px minmax(0,1fr) !important;
  gap:18px !important;
}

body.nk-homepage .announceIcon{
  width:58px !important;
  height:58px !important;
  border-width:1px !important;
  border-color:rgba(255,255,255,.22) !important;
  font-size:28px !important;
  color:#ff3041 !important;
  background:rgba(255,255,255,.07) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 28px rgba(0,0,0,.17) !important;
}

body.nk-homepage .heroTitle{
  max-width:none !important;
  margin:0 !important;
  font-size:clamp(23px,3vw,36px) !important;
  line-height:1.08 !important;
  color:#ef1528 !important;
  animation:none !important;
  text-shadow:0 3px 18px rgba(0,0,0,.22) !important;
}

body.nk-homepage .heroSub{
  max-width:680px !important;
  margin:7px auto 12px !important;
  color:rgba(233,241,252,.82) !important;
  font-size:clamp(12px,1.45vw,15px) !important;
  line-height:1.35 !important;
}

body.nk-homepage .timeRow{
  width:max-content !important;
  max-width:100% !important;
  grid-template-columns:repeat(2,max-content) !important;
  justify-content:center;
  gap:14px !important;
  margin:0 auto !important;
  padding-top:12px !important;
  border-top:1px solid rgba(255,255,255,.12) !important;
}

body.nk-homepage .timeBox{
  width:max-content;
  max-width:100%;
  min-width:0;
  gap:10px !important;
  justify-content:flex-start !important;
  padding:7px 13px;
  border-radius:999px;
  background:rgba(3,14,31,.30);
  border:1px solid rgba(126,176,242,.15);
}

body.nk-homepage .timeIcon{
  width:34px !important;
  height:34px !important;
  flex-basis:34px !important;
  font-size:16px !important;
  background:rgba(255,255,255,.10) !important;
}

body.nk-homepage .timeBox b{
  color:rgba(255,255,255,.78) !important;
  font-size:9px !important;
}
body.nk-homepage .timeBox span{
  color:#ff3041 !important;
  font-size:clamp(11px,1.25vw,14px) !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
}

body.nk-homepage .mainGrid,
body.nk-homepage .mainGrid.singleLogin{
  width:min(480px,100%) !important;
  grid-template-columns:minmax(0,480px) !important;
  justify-content:center !important;
  margin:0 !important;
  align-self:center;
}

body.nk-homepage .card{
  width:100% !important;
  padding:20px 24px !important;
  border-radius:21px !important;
  color:#f8fbff !important;
  background:linear-gradient(150deg,rgba(5,21,44,.94),rgba(7,29,57,.90)) !important;
  border:1px solid rgba(112,174,255,.32) !important;
  box-shadow:0 20px 58px rgba(0,0,0,.34) !important;
  backdrop-filter:blur(18px) saturate(125%);
}

body.nk-homepage .loginIcon{
  width:48px !important;
  height:48px !important;
  margin:0 auto 8px !important;
  font-size:21px !important;
  background:linear-gradient(145deg,#a8000d,#e3182a) !important;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 26px rgba(212,17,34,.28) !important;
}

body.nk-homepage .card h1{
  color:#fff !important;
  font-size:clamp(21px,2.5vw,27px) !important;
  line-height:1.08 !important;
  letter-spacing:.01em;
}

body.nk-homepage .card > p{
  color:rgba(225,235,249,.72) !important;
  font-size:12px !important;
  margin:5px 0 9px !important;
}

body.nk-homepage .motto{
  width:100%;
  max-width:none;
  margin:0 auto 12px !important;
  padding:6px 12px !important;
  border-radius:999px !important;
  color:#8e000a !important;
  background:rgba(255,255,255,.97) !important;
  border:1px solid rgba(255,255,255,.85) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
}

body.nk-homepage label{
  display:block;
  color:#f6f9ff !important;
  font-size:12px !important;
  margin-top:2px;
}

body.nk-homepage input{
  min-height:42px !important;
  margin:6px 0 10px !important;
  padding:10px 13px !important;
  color:#fff !important;
  caret-color:#fff;
  background:rgba(2,14,31,.48) !important;
  border:1px solid rgba(107,163,235,.26) !important;
  border-radius:12px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025) !important;
}
body.nk-homepage input::placeholder{color:rgba(215,227,245,.42) !important;}
body.nk-homepage input:focus{
  border-color:rgba(54,148,255,.78) !important;
  box-shadow:0 0 0 3px rgba(47,128,255,.16) !important;
}

body.nk-homepage button[type="submit"]{
  min-height:45px;
  margin-top:2px !important;
  border-radius:11px !important;
  padding:11px 14px !important;
  font-size:15px !important;
  background:linear-gradient(100deg,#1763c8,#17a6dd) !important;
  box-shadow:0 10px 25px rgba(18,121,210,.24) !important;
}
body.nk-homepage button[type="submit"]:not(:disabled):hover{filter:brightness(1.06);transform:translateY(-1px);}
body.nk-homepage button[type="submit"]:disabled{filter:saturate(.72);}

body.nk-homepage form > p{
  color:rgba(218,229,245,.62) !important;
  margin:8px 0 0 !important;
  font-size:10px !important;
}

body.nk-homepage .footer{
  color:rgba(224,235,249,.64) !important;
  margin:0 !important;
  padding:1px 0 0;
  font-size:11px !important;
  text-shadow:0 2px 10px rgba(0,0,0,.36);
}
body.nk-homepage .footer b{color:#55d47b !important;}

/* Compact theme selector, only as wide as its buttons. */
body.nk-homepage .nkosec-theme-switch{
  left:18px !important;
  right:auto !important;
  bottom:14px !important;
  width:max-content !important;
  max-width:max-content !important;
  min-width:0 !important;
  display:inline-flex !important;
  gap:3px !important;
  padding:4px !important;
  transform:none !important;
  border-radius:999px !important;
  background:rgba(4,18,38,.82) !important;
  border:1px solid rgba(98,159,238,.28) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.28) !important;
}
body.nk-homepage .nkosec-theme-switch button{
  width:auto !important;
  min-width:0 !important;
  max-width:max-content !important;
  padding:6px 9px !important;
  font-size:10px !important;
  white-space:nowrap;
}

/* Header branding must switch to black in light mode. */
html[data-nkosec-theme="light"] body.nk-homepage .brand strong,
html[data-nkosec-theme="light"] body.nk-homepage .brand span{
  color:#000000 !important;
  text-shadow:none !important;
}

/* Light mode remains readable over custom photos without large white strips. */
html[data-nkosec-theme="light"] body.nk-homepage #nkosec-custom-background-layer::after{
  background:linear-gradient(180deg,rgba(240,247,255,.16),rgba(5,18,34,.28));
}
html[data-nkosec-theme="light"] body.nk-homepage .voteHero{
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(239,246,255,.91)) !important;
  color:#071a33 !important;
  border-color:rgba(12,72,145,.18) !important;
  box-shadow:0 18px 48px rgba(2,16,36,.20) !important;
}
html[data-nkosec-theme="light"] body.nk-homepage .heroTitle{color:#ae0816 !important;}
html[data-nkosec-theme="light"] body.nk-homepage .heroSub{color:#334155 !important;}
html[data-nkosec-theme="light"] body.nk-homepage .timeRow{border-color:rgba(7,26,51,.12) !important;}
html[data-nkosec-theme="light"] body.nk-homepage .timeBox{
  background:rgba(255,255,255,.66) !important;
  border-color:rgba(7,26,51,.10) !important;
}
html[data-nkosec-theme="light"] body.nk-homepage .timeBox b{color:#1f3048 !important;}
html[data-nkosec-theme="light"] body.nk-homepage .timeBox span{color:#ae0816 !important;}
html[data-nkosec-theme="light"] body.nk-homepage .card{
  color:#071a33 !important;
  background:linear-gradient(155deg,rgba(255,255,255,.96),rgba(242,248,255,.93)) !important;
  border-color:rgba(7,59,121,.18) !important;
  box-shadow:0 20px 54px rgba(2,16,36,.20) !important;
}
html[data-nkosec-theme="light"] body.nk-homepage .card h1,
html[data-nkosec-theme="light"] body.nk-homepage label{color:#071a33 !important;}
html[data-nkosec-theme="light"] body.nk-homepage .card > p{color:#526681 !important;}
html[data-nkosec-theme="light"] body.nk-homepage input{
  color:#071a33 !important;
  background:rgba(255,255,255,.96) !important;
  border-color:rgba(7,59,121,.17) !important;
}
html[data-nkosec-theme="light"] body.nk-homepage input::placeholder{color:#8797ad !important;}
html[data-nkosec-theme="light"] body.nk-homepage form > p{color:#64748b !important;}
html[data-nkosec-theme="light"] body.nk-homepage .nkosec-theme-switch{background:rgba(255,255,255,.93) !important;}

@media(max-width:760px){
  body.nk-homepage{overflow:auto !important;}
  body.nk-homepage .topbar{min-height:68px !important;padding:8px 0 5px !important;}
  body.nk-homepage .brand{max-width:calc(100% - 88px) !important;gap:8px !important;}
  body.nk-homepage .logo{width:46px !important;height:46px !important;flex-basis:46px;}
  body.nk-homepage .brand strong{font-size:clamp(15px,4.5vw,21px) !important;}
  body.nk-homepage .brand span{font-size:8px !important;letter-spacing:.13em !important;}
  body.nk-homepage .adminBtn{top:16px !important;font-size:9px !important;padding:7px 9px !important;}
  body.nk-homepage .wrap{width:calc(100% - 16px) !important;gap:12px !important;padding-bottom:68px !important;}
  body.nk-homepage .voteHero{width:min(590px,100%) !important;padding:13px 12px !important;}
  body.nk-homepage .voteHeroInner{grid-template-columns:42px minmax(0,1fr) !important;gap:8px !important;}
  body.nk-homepage .announceIcon{width:39px !important;height:39px !important;font-size:18px !important;}
  body.nk-homepage .heroTitle{font-size:clamp(16px,5vw,22px) !important;}
  body.nk-homepage .heroSub{font-size:10px !important;margin:4px auto 7px !important;}
  body.nk-homepage .timeRow{width:100% !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:5px !important;padding-top:7px !important;}
  body.nk-homepage .timeBox{width:100%;padding:5px 7px !important;border-radius:11px;gap:5px !important;align-items:flex-start !important;}
  body.nk-homepage .timeIcon{width:25px !important;height:25px !important;flex-basis:25px !important;font-size:12px !important;}
  body.nk-homepage .timeBox span{font-size:clamp(8px,2.35vw,10px) !important;white-space:normal !important;overflow-wrap:anywhere;}
  body.nk-homepage .card{padding:16px !important;}
  body.nk-homepage .nkosec-theme-switch{left:10px !important;bottom:10px !important;}
}

@media(max-height:720px) and (min-width:761px){
  body.nk-homepage .topbar{min-height:58px !important;padding:5px 0 2px !important;}
  body.nk-homepage .logo{width:43px !important;height:43px !important;flex-basis:43px;}
  body.nk-homepage .brand strong{font-size:22px !important;}
  body.nk-homepage .brand span{font-size:8px !important;margin-top:3px !important;}
  body.nk-homepage .adminBtn{top:11px !important;}
  body.nk-homepage .wrap{gap:8px !important;padding-bottom:30px !important;}
  body.nk-homepage .voteHero{padding:10px 18px !important;}
  body.nk-homepage .voteHeroInner{grid-template-columns:48px minmax(0,1fr) !important;gap:10px !important;}
  body.nk-homepage .announceIcon{width:43px !important;height:43px !important;font-size:20px !important;}
  body.nk-homepage .heroTitle{font-size:25px !important;}
  body.nk-homepage .heroSub{margin:3px auto 5px !important;font-size:10px !important;}
  body.nk-homepage .timeRow{padding-top:6px !important;}
  body.nk-homepage .timeBox{padding:4px 9px !important;}
  body.nk-homepage .timeIcon{width:27px !important;height:27px !important;flex-basis:27px !important;}
  body.nk-homepage .card{padding:13px 18px !important;}
  body.nk-homepage .loginIcon{width:37px !important;height:37px !important;font-size:17px !important;margin-bottom:4px !important;}
  body.nk-homepage .card h1{font-size:20px !important;}
  body.nk-homepage .motto{margin-bottom:7px !important;padding:4px 9px !important;}
  body.nk-homepage input{min-height:34px !important;padding:7px 10px !important;margin:3px 0 6px !important;}
  body.nk-homepage button[type="submit"]{min-height:36px !important;padding:7px 10px !important;}
  body.nk-homepage form > p{margin-top:4px !important;}
}

/* ========================================================================
   MIRROR GLASS HOMEPAGE PANELS
   Added 27 June 2026
   Makes the announcement and login panels transparent and reflective while
   preserving text contrast, compact sizing and both theme modes.
   ======================================================================== */
body.nk-homepage .voteHero,
body.nk-homepage .card{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate;
  -webkit-backdrop-filter:blur(22px) saturate(145%) contrast(105%);
  backdrop-filter:blur(22px) saturate(145%) contrast(105%);
  border:1px solid rgba(213,235,255,.52) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(92,166,232,.12),
    0 20px 58px rgba(0,0,0,.30),
    0 0 0 1px rgba(21,111,206,.10) !important;
}

/* Transparent dark mirror glass. The campus image remains visible behind it. */
body.nk-homepage .voteHero{
  background:
    linear-gradient(135deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.035) 36%,rgba(0,18,39,.18) 72%,rgba(8,45,78,.15) 100%),
    rgba(3,18,36,.28) !important;
}
body.nk-homepage .card{
  background:
    linear-gradient(145deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.035) 35%,rgba(1,20,39,.20) 75%,rgba(9,50,82,.16) 100%),
    rgba(3,18,36,.30) !important;
}

/* Soft reflected light across each glass panel. */
body.nk-homepage .voteHero::before,
body.nk-homepage .card::before{
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  pointer-events:none !important;
  inset:0 !important;
  opacity:1 !important;
  background:
    linear-gradient(118deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.065) 16%,transparent 35%,transparent 66%,rgba(95,192,255,.07) 100%) !important;
}

/* Fine highlight along the top edge, similar to polished mirror glass. */
body.nk-homepage .voteHero::after,
body.nk-homepage .card::after{
  content:"" !important;
  position:absolute;
  z-index:0;
  pointer-events:none;
  left:18px;
  right:18px;
  top:0;
  height:1px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.78),rgba(115,204,255,.62),transparent) !important;
  box-shadow:0 0 18px rgba(113,199,255,.28);
}

/* Keep all real panel content above the reflective layers. */
body.nk-homepage .voteHero > *,
body.nk-homepage .card > *{
  position:relative;
  z-index:1;
}

/* Improve text clarity over the transparent glass. */
body.nk-homepage .heroSub,
body.nk-homepage .card > p,
body.nk-homepage label,
body.nk-homepage form > p{
  text-shadow:0 2px 10px rgba(0,0,0,.72);
}
body.nk-homepage .card h1{
  text-shadow:0 3px 16px rgba(0,0,0,.62);
}

/* Smaller glass elements inside the panels. */
body.nk-homepage .announceIcon,
body.nk-homepage .timeBox,
body.nk-homepage input{
  -webkit-backdrop-filter:blur(12px) saturate(130%);
  backdrop-filter:blur(12px) saturate(130%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 8px 22px rgba(0,0,0,.12) !important;
}
body.nk-homepage .timeBox{
  background:linear-gradient(135deg,rgba(255,255,255,.105),rgba(0,15,32,.16)) !important;
  border-color:rgba(213,235,255,.28) !important;
}
body.nk-homepage input{
  background:linear-gradient(135deg,rgba(3,17,33,.38),rgba(2,23,43,.25)) !important;
  border-color:rgba(206,231,255,.32) !important;
}
body.nk-homepage input:focus{
  background:linear-gradient(135deg,rgba(3,18,35,.48),rgba(5,34,62,.32)) !important;
  border-color:rgba(112,198,255,.88) !important;
  box-shadow:0 0 0 3px rgba(51,166,255,.17),inset 0 1px 0 rgba(255,255,255,.17) !important;
}

/* Light theme uses clear frosted glass instead of an opaque white card. */
html[data-nkosec-theme="light"] body.nk-homepage .voteHero,
html[data-nkosec-theme="light"] body.nk-homepage .card{
  background:
    linear-gradient(140deg,rgba(255,255,255,.52) 0%,rgba(255,255,255,.22) 42%,rgba(225,241,255,.16) 100%),
    rgba(255,255,255,.16) !important;
  border-color:rgba(255,255,255,.68) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    inset 0 -1px 0 rgba(62,120,178,.11),
    0 20px 54px rgba(2,16,36,.20),
    0 0 0 1px rgba(12,72,145,.08) !important;
}
html[data-nkosec-theme="light"] body.nk-homepage .heroSub,
html[data-nkosec-theme="light"] body.nk-homepage .card > p,
html[data-nkosec-theme="light"] body.nk-homepage label,
html[data-nkosec-theme="light"] body.nk-homepage form > p,
html[data-nkosec-theme="light"] body.nk-homepage .card h1{
  text-shadow:0 1px 8px rgba(255,255,255,.72);
}
html[data-nkosec-theme="light"] body.nk-homepage .timeBox{
  background:linear-gradient(135deg,rgba(255,255,255,.52),rgba(235,246,255,.24)) !important;
  border-color:rgba(255,255,255,.58) !important;
}
html[data-nkosec-theme="light"] body.nk-homepage input{
  color:#071a33 !important;
  background:linear-gradient(135deg,rgba(255,255,255,.60),rgba(240,248,255,.36)) !important;
  border-color:rgba(255,255,255,.72) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 8px 20px rgba(2,16,36,.08) !important;
}
html[data-nkosec-theme="light"] body.nk-homepage input:focus{
  border-color:rgba(30,120,218,.72) !important;
  box-shadow:0 0 0 3px rgba(37,132,231,.14),inset 0 1px 0 rgba(255,255,255,.92) !important;
}

/* Mobile devices can be less powerful, so use a slightly lighter blur. */
@media(max-width:760px){
  body.nk-homepage .voteHero,
  body.nk-homepage .card{
    -webkit-backdrop-filter:blur(16px) saturate(135%);
    backdrop-filter:blur(16px) saturate(135%);
  }
}

/* Fallback for browsers without backdrop-filter support. */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  body.nk-homepage .voteHero,
  body.nk-homepage .card{
    background:rgba(5,25,47,.78) !important;
  }
  html[data-nkosec-theme="light"] body.nk-homepage .voteHero,
  html[data-nkosec-theme="light"] body.nk-homepage .card{
    background:rgba(245,250,255,.90) !important;
  }
}


/* ========================================================================
   MOBILE HEADER OVERLAP + DUPLICATED ADMIN LABEL FIX
   ======================================================================== */

/* The old small-screen pseudo-label could appear together with the real
   link text, producing "Admin Login Admin". Only the real responsive labels
   below are allowed to render. */
body.nk-homepage .adminBtn::after{
  content:none !important;
  display:none !important;
}
body.nk-homepage .adminBtnFull{display:inline;}
body.nk-homepage .adminBtnShort{display:none;}

/* Reserve a dedicated grid column for the login button so it can never sit
   on top of the school name. */
body.nk-homepage .topbar{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
  column-gap:12px !important;
  align-items:center !important;
}
body.nk-homepage .brand{
  grid-column:2 !important;
  justify-self:center !important;
  min-width:0 !important;
  max-width:100% !important;
}
body.nk-homepage .brand > div:last-child{min-width:0;}
body.nk-homepage .brand strong{
  white-space:normal !important;
  overflow-wrap:normal !important;
  text-wrap:balance;
}
body.nk-homepage .adminBtn{
  grid-column:3 !important;
  justify-self:end !important;
  position:static !important;
  inset:auto !important;
  margin:0 !important;
  width:max-content !important;
  max-width:100% !important;
  white-space:nowrap !important;
}

/* Tablet and mobile landscape: keep the complete system name visible and
   use one short Admin label instead of allowing overlap. */
@media(max-width:1050px){
  body.nk-homepage .topbar{
    grid-template-columns:minmax(0,1fr) auto !important;
    column-gap:10px !important;
    justify-content:stretch !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }
  body.nk-homepage .brand{
    grid-column:1 !important;
    justify-self:start !important;
    max-width:100% !important;
  }
  body.nk-homepage .brand strong{
    font-size:clamp(17px,3.15vw,27px) !important;
    line-height:1.06 !important;
  }
  body.nk-homepage .brand span{
    font-size:clamp(8px,1.25vw,10px) !important;
    letter-spacing:.13em !important;
  }
  body.nk-homepage .adminBtn{
    grid-column:2 !important;
    font-size:11px !important;
    padding:8px 11px !important;
  }
  body.nk-homepage .adminBtnFull{display:none !important;}
  body.nk-homepage .adminBtnShort{display:inline !important;}
}

@media(max-width:620px){
  body.nk-homepage .topbar{
    column-gap:6px !important;
    min-height:56px !important;
    padding-top:6px !important;
    padding-bottom:5px !important;
  }
  body.nk-homepage .brand{
    gap:6px !important;
  }
  body.nk-homepage .logo{
    width:40px !important;
    height:40px !important;
    flex:0 0 40px !important;
  }
  body.nk-homepage .brand strong{
    font-size:clamp(13px,4.1vw,17px) !important;
    line-height:1.08 !important;
    letter-spacing:.005em !important;
  }
  body.nk-homepage .brand span{
    font-size:clamp(6px,2vw,8px) !important;
    margin-top:3px !important;
    letter-spacing:.08em !important;
  }
  body.nk-homepage .adminBtn{
    gap:4px !important;
    padding:7px 8px !important;
    font-size:9px !important;
  }
  body.nk-homepage .adminBtn::before{
    font-size:7px !important;
  }
}

@media(max-width:370px){
  body.nk-homepage .logo{
    width:35px !important;
    height:35px !important;
    flex-basis:35px !important;
  }
  body.nk-homepage .brand strong{
    font-size:12px !important;
  }
  body.nk-homepage .brand span{
    font-size:6px !important;
  }
  body.nk-homepage .adminBtn{
    padding:6px 7px !important;
    font-size:8px !important;
  }
}


/* ========================================================================
   CIRCULAR VOTING COUNTDOWN + RED ENDED BUTTON
   Added 28 June 2026
   ======================================================================== */
body.nk-homepage .countdownRing{
  --countdown-accent:#27a8ff;
  --countdown-glow:rgba(39,168,255,.34);
  position:relative;
  width:86px;
  height:86px;
  margin:0 auto 8px;
  display:grid;
  place-items:center;
  border-radius:50%;
  isolation:isolate;
  filter:drop-shadow(0 10px 22px var(--countdown-glow));
}
body.nk-homepage .countdownRing.status-not_started{
  --countdown-accent:#ffb020;
  --countdown-glow:rgba(255,176,32,.30);
}
body.nk-homepage .countdownRing.status-ended{
  --countdown-accent:#ef233c;
  --countdown-glow:rgba(239,35,60,.38);
}
body.nk-homepage .countdownSvg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  transform:rotate(-90deg);
}
body.nk-homepage .countdownTrack,
body.nk-homepage .countdownProgress{
  fill:none;
  stroke-width:8;
}
body.nk-homepage .countdownTrack{
  stroke:rgba(255,255,255,.15);
}
body.nk-homepage .countdownProgress{
  stroke:var(--countdown-accent);
  stroke-linecap:round;
  stroke-dasharray:100;
  stroke-dashoffset:0;
  transition:stroke-dashoffset .35s linear,stroke .25s ease;
  filter:drop-shadow(0 0 5px var(--countdown-accent));
}
body.nk-homepage .countdownRing::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:50%;
  z-index:-1;
  background:
    radial-gradient(circle at 34% 24%,rgba(255,255,255,.18),transparent 30%),
    linear-gradient(145deg,rgba(255,255,255,.10),rgba(2,20,42,.48));
  border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(12px) saturate(135%);
  backdrop-filter:blur(12px) saturate(135%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -10px 22px rgba(0,0,0,.12);
}
body.nk-homepage .countdownText{
  width:66px;
  min-width:0;
  text-align:center;
  color:#fff;
  line-height:1.02;
  text-shadow:0 2px 8px rgba(0,0,0,.76);
}
body.nk-homepage .countdownLabel{
  display:block;
  margin-bottom:3px;
  font-size:7px;
  line-height:1;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:rgba(237,245,255,.78);
}
body.nk-homepage .countdownValue{
  display:block;
  font-size:10px;
  line-height:1.12;
  font-weight:1000;
  overflow-wrap:normal;
}

/* The ended state must be a strong red, not the normal blue login gradient. */
body.nk-homepage button[type="submit"].status-ended,
body.nk-homepage button[type="submit"].status-ended:disabled{
  opacity:1 !important;
  cursor:not-allowed !important;
  color:#fff !important;
  background:linear-gradient(100deg,#a9000d 0%,#ef233c 58%,#c70018 100%) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 10px 26px rgba(226,24,52,.36),inset 0 1px 0 rgba(255,255,255,.18) !important;
  filter:none !important;
}
body.nk-homepage button[type="submit"].status-not_started:disabled{
  opacity:1 !important;
  cursor:not-allowed !important;
  color:#fff !important;
  background:linear-gradient(100deg,#9b6500,#f3a000) !important;
  box-shadow:0 10px 24px rgba(243,160,0,.24) !important;
  filter:none !important;
}

html[data-nkosec-theme="light"] body.nk-homepage .countdownText{
  color:#071a33;
  text-shadow:0 1px 6px rgba(255,255,255,.9);
}
html[data-nkosec-theme="light"] body.nk-homepage .countdownLabel{
  color:rgba(7,26,51,.66);
}
html[data-nkosec-theme="light"] body.nk-homepage .countdownTrack{
  stroke:rgba(7,26,51,.14);
}
html[data-nkosec-theme="light"] body.nk-homepage .countdownRing::before{
  background:
    radial-gradient(circle at 34% 24%,rgba(255,255,255,.88),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.60),rgba(220,238,255,.34));
  border-color:rgba(255,255,255,.72);
}

@media(max-width:700px){
  body.nk-homepage .countdownRing{
    width:72px;
    height:72px;
    margin-bottom:5px;
  }
  body.nk-homepage .countdownRing::before{inset:8px;}
  body.nk-homepage .countdownText{width:56px;}
  body.nk-homepage .countdownLabel{font-size:6px;margin-bottom:2px;}
  body.nk-homepage .countdownValue{font-size:8px;}
  body.nk-homepage .countdownTrack,
  body.nk-homepage .countdownProgress{stroke-width:7;}
}

@media(max-height:650px){
  body.nk-homepage .countdownRing{
    width:62px;
    height:62px;
    margin-bottom:3px;
  }
  body.nk-homepage .countdownRing::before{inset:7px;}
  body.nk-homepage .countdownText{width:48px;}
  body.nk-homepage .countdownLabel{font-size:5px;}
  body.nk-homepage .countdownValue{font-size:7px;}
  body.nk-homepage .countdownTrack,
  body.nk-homepage .countdownProgress{stroke-width:7;}
}

@media(max-height:560px){
  body.nk-homepage .countdownRing{
    width:50px;
    height:50px;
    margin-bottom:2px;
  }
  body.nk-homepage .countdownRing::before{inset:6px;}
  body.nk-homepage .countdownText{width:39px;}
  body.nk-homepage .countdownLabel{display:none;}
  body.nk-homepage .countdownValue{font-size:6px;}
  body.nk-homepage .countdownTrack,
  body.nk-homepage .countdownProgress{stroke-width:6;}
}

/* ========================================================================
   COUNTDOWN POSITIONED TO THE RIGHT OF LOGIN CARD
   Added 28 June 2026
   ======================================================================== */
body.nk-homepage .mainGrid,
body.nk-homepage .mainGrid.singleLogin{
  position:relative !important;
  overflow:visible !important;
}

body.nk-homepage .countdownDock{
  position:absolute;
  top:24px;
  left:calc(100% + 72px);
  width:150px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  z-index:4;
  pointer-events:none;
}

body.nk-homepage .countdownRing{
  width:142px;
  height:142px;
  margin:0;
  filter:drop-shadow(0 16px 34px var(--countdown-glow));
}

body.nk-homepage .countdownRing::before{
  inset:15px;
  background:
    radial-gradient(circle at 34% 24%,rgba(255,255,255,.22),transparent 31%),
    linear-gradient(145deg,rgba(255,255,255,.12),rgba(2,20,42,.58));
  border:1px solid rgba(255,255,255,.22);
}

body.nk-homepage .countdownText{
  width:104px;
  line-height:1.06;
}

body.nk-homepage .countdownLabel{
  margin-bottom:7px;
  font-size:10px;
  letter-spacing:.12em;
  color:rgba(242,247,255,.86);
}

body.nk-homepage .countdownValue{
  font-size:17px;
  line-height:1.12;
  color:#ff263a !important;
  text-shadow:
    0 0 10px rgba(255,38,58,.52),
    0 2px 8px rgba(0,0,0,.72);
}

body.nk-homepage .countdownTrack,
body.nk-homepage .countdownProgress{
  stroke-width:7;
}

html[data-nkosec-theme="light"] body.nk-homepage .countdownValue{
  color:#d00018 !important;
  text-shadow:0 1px 6px rgba(255,255,255,.92),0 0 9px rgba(208,0,24,.22);
}

/* Keep the timer to the right on medium desktop screens without clipping. */
@media(max-width:1180px) and (min-width:861px){
  body.nk-homepage .countdownDock{
    left:calc(100% + 28px);
  }
  body.nk-homepage .countdownRing{
    width:122px;
    height:122px;
  }
  body.nk-homepage .countdownRing::before{inset:13px;}
  body.nk-homepage .countdownText{width:88px;}
  body.nk-homepage .countdownLabel{font-size:8px;margin-bottom:5px;}
  body.nk-homepage .countdownValue{font-size:14px;}
}

/* On tablets and phones, place the countdown above the login card so it
   remains fully visible and never creates horizontal scrolling. */
@media(max-width:860px){
  body.nk-homepage .mainGrid,
  body.nk-homepage .mainGrid.singleLogin{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:10px !important;
  }
  body.nk-homepage .countdownDock{
    position:relative;
    inset:auto;
    order:0;
    width:100%;
    min-height:100px;
    align-items:center;
  }
  body.nk-homepage .card{order:1;}
  body.nk-homepage .closedCard{order:2;}
  body.nk-homepage .countdownRing{
    width:102px;
    height:102px;
  }
  body.nk-homepage .countdownRing::before{inset:10px;}
  body.nk-homepage .countdownText{width:74px;}
  body.nk-homepage .countdownLabel{font-size:7px;margin-bottom:4px;}
  body.nk-homepage .countdownValue{font-size:11px;}
}

@media(max-width:520px){
  body.nk-homepage .countdownDock{
    min-height:86px;
    margin-bottom:-2px;
  }
  body.nk-homepage .countdownRing{
    width:88px;
    height:88px;
  }
  body.nk-homepage .countdownRing::before{inset:9px;}
  body.nk-homepage .countdownText{width:66px;}
  body.nk-homepage .countdownLabel{font-size:6px;margin-bottom:3px;}
  body.nk-homepage .countdownValue{font-size:10px;}
}

/* Override older short-screen rules because the timer is no longer inside
   the login card and now has its own space. */
@media(max-height:650px) and (min-width:861px){
  body.nk-homepage .countdownRing{
    width:116px;
    height:116px;
  }
  body.nk-homepage .countdownRing::before{inset:12px;}
  body.nk-homepage .countdownText{width:84px;}
  body.nk-homepage .countdownLabel{display:block;font-size:8px;margin-bottom:4px;}
  body.nk-homepage .countdownValue{font-size:13px;}
}

/* ========================================================================
   PREMIUM CRIMSON COUNTDOWN RING
   Added 28 June 2026
   Keeps the ring and time reading red in every voting state.
   ======================================================================== */
body.nk-homepage .countdownRing,
body.nk-homepage .countdownRing.status-open,
body.nk-homepage .countdownRing.status-not_started,
body.nk-homepage .countdownRing.status-ended{
  --countdown-accent:#ff2846 !important;
  --countdown-accent-deep:#b80023 !important;
  --countdown-glow:rgba(255,40,70,.46) !important;
  border:1px solid rgba(255,104,126,.32);
  background:
    radial-gradient(circle at 50% 50%,rgba(255,31,65,.10) 0 46%,transparent 47%),
    conic-gradient(from 215deg,rgba(255,255,255,.20),rgba(255,40,70,.05) 18%,rgba(255,40,70,.22) 40%,rgba(255,255,255,.10) 66%,rgba(255,40,70,.04) 100%);
  box-shadow:
    0 18px 46px rgba(0,0,0,.34),
    0 0 34px rgba(255,40,70,.20),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -12px 24px rgba(52,0,12,.18);
  animation:nkPremiumCountdownPulse 2.8s ease-in-out infinite;
}

body.nk-homepage .countdownRing::before{
  background:
    linear-gradient(145deg,rgba(255,255,255,.20),rgba(255,255,255,.025) 38%,rgba(12,19,38,.62) 72%),
    radial-gradient(circle at 34% 23%,rgba(255,255,255,.30),transparent 28%),
    radial-gradient(circle at 68% 78%,rgba(255,30,66,.14),transparent 44%) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -16px 28px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,35,66,.08) !important;
}

body.nk-homepage .countdownRing::after{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:50%;
  pointer-events:none;
  border:1px solid rgba(255,73,98,.34);
  box-shadow:
    0 0 0 4px rgba(255,35,66,.035),
    0 0 26px rgba(255,35,66,.24),
    inset 0 0 18px rgba(255,255,255,.055);
  opacity:.92;
}

body.nk-homepage .countdownTrack{
  stroke:rgba(255,255,255,.16) !important;
}

body.nk-homepage .countdownProgress{
  stroke:#ff2846 !important;
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,.34))
    drop-shadow(0 0 8px rgba(255,40,70,.86))
    drop-shadow(0 0 15px rgba(184,0,35,.48)) !important;
}

body.nk-homepage .countdownLabel{
  color:rgba(255,244,247,.88) !important;
  text-shadow:0 1px 7px rgba(0,0,0,.72);
}

body.nk-homepage .countdownValue{
  color:#ff304d !important;
  font-weight:1000 !important;
  font-variant-numeric:tabular-nums;
  letter-spacing:.015em;
  text-shadow:
    0 1px 0 rgba(255,255,255,.18),
    0 0 7px rgba(255,255,255,.12),
    0 0 12px rgba(255,48,77,.72),
    0 3px 10px rgba(0,0,0,.72) !important;
}

html[data-nkosec-theme="light"] body.nk-homepage .countdownRing,
html[data-nkosec-theme="light"] body.nk-homepage .countdownRing.status-open,
html[data-nkosec-theme="light"] body.nk-homepage .countdownRing.status-not_started,
html[data-nkosec-theme="light"] body.nk-homepage .countdownRing.status-ended{
  border-color:rgba(166,0,28,.24);
  background:
    radial-gradient(circle at 50% 50%,rgba(255,37,67,.07) 0 46%,transparent 47%),
    conic-gradient(from 215deg,rgba(255,255,255,.88),rgba(255,40,70,.05) 20%,rgba(255,40,70,.15) 44%,rgba(255,255,255,.68) 70%,rgba(255,40,70,.04) 100%);
  box-shadow:
    0 16px 38px rgba(54,0,12,.16),
    0 0 28px rgba(207,0,36,.13),
    inset 0 1px 0 rgba(255,255,255,.92);
}

html[data-nkosec-theme="light"] body.nk-homepage .countdownRing::before{
  background:
    linear-gradient(145deg,rgba(255,255,255,.93),rgba(255,255,255,.48) 50%,rgba(238,244,252,.72)),
    radial-gradient(circle at 34% 23%,rgba(255,255,255,.96),transparent 30%),
    radial-gradient(circle at 68% 78%,rgba(255,30,66,.08),transparent 44%) !important;
  border-color:rgba(255,255,255,.82) !important;
}

html[data-nkosec-theme="light"] body.nk-homepage .countdownTrack{
  stroke:rgba(90,0,16,.14) !important;
}

html[data-nkosec-theme="light"] body.nk-homepage .countdownLabel{
  color:rgba(65,13,25,.72) !important;
  text-shadow:0 1px 5px rgba(255,255,255,.92);
}

html[data-nkosec-theme="light"] body.nk-homepage .countdownValue{
  color:#c90025 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.92),
    0 0 10px rgba(201,0,37,.20),
    0 2px 8px rgba(55,0,12,.14) !important;
}

body.nk-homepage .countdownRing.status-ended{
  animation:none;
}

@keyframes nkPremiumCountdownPulse{
  0%,100%{
    filter:drop-shadow(0 16px 34px rgba(255,40,70,.30));
  }
  50%{
    filter:drop-shadow(0 18px 42px rgba(255,40,70,.52));
  }
}

@media (prefers-reduced-motion:reduce){
  body.nk-homepage .countdownRing{
    animation:none !important;
  }
}

/* ========================================================================
   PREMIUM DUAL COUNTDOWN RESPONSES
   Active state: live hours, minutes and seconds inside a red progress dial.
   Ended state: the same dial becomes a clear red "Voting Has Ended" response.
   Added 28 June 2026.
   ======================================================================== */
body.nk-homepage .mainGrid,
body.nk-homepage .mainGrid.singleLogin{
  position:relative !important;
  width:min(480px,100%) !important;
  overflow:visible !important;
}

body.nk-homepage .countdownDock{
  position:absolute !important;
  top:8px !important;
  left:calc(100% + 54px) !important;
  width:220px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:14px !important;
  z-index:5 !important;
  pointer-events:none;
}

body.nk-homepage .countdownRing,
body.nk-homepage .countdownRing.status-open,
body.nk-homepage .countdownRing.status-not_started,
body.nk-homepage .countdownRing.status-ended{
  width:212px !important;
  height:212px !important;
  margin:0 !important;
  border:1px solid rgba(255,92,116,.46) !important;
  background:
    repeating-conic-gradient(from -3deg,rgba(255,255,255,.28) 0 1deg,transparent 1deg 6deg),
    radial-gradient(circle at 50% 50%,rgba(255,35,69,.11) 0 42%,transparent 43%),
    conic-gradient(from 205deg,rgba(255,255,255,.17),rgba(255,40,70,.04) 20%,rgba(255,40,70,.20) 44%,rgba(255,255,255,.08) 68%,rgba(255,40,70,.04) 100%) !important;
  box-shadow:
    0 24px 56px rgba(0,0,0,.38),
    0 0 44px rgba(255,35,67,.24),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -18px 34px rgba(57,0,14,.20) !important;
  filter:drop-shadow(0 18px 36px rgba(255,30,65,.36)) !important;
}

body.nk-homepage .countdownRing::before{
  inset:19px !important;
  background:
    radial-gradient(circle at 35% 24%,rgba(255,255,255,.22),transparent 28%),
    linear-gradient(145deg,rgba(255,255,255,.12),rgba(5,15,34,.72) 66%,rgba(17,2,12,.76)) !important;
  border:1px solid rgba(255,255,255,.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -20px 34px rgba(0,0,0,.26),
    0 0 0 1px rgba(255,42,72,.08) !important;
}

body.nk-homepage .countdownRing::after{
  inset:-8px !important;
  border:1px solid rgba(255,67,95,.44) !important;
  box-shadow:
    0 0 0 5px rgba(255,35,66,.035),
    0 0 30px rgba(255,35,66,.30),
    inset 0 0 22px rgba(255,255,255,.06) !important;
}

body.nk-homepage .countdownSvg{
  inset:4px !important;
  width:calc(100% - 8px) !important;
  height:calc(100% - 8px) !important;
}

body.nk-homepage .countdownOuterTrack{
  fill:none;
  stroke:rgba(255,255,255,.10);
  stroke-width:1.2;
  stroke-dasharray:1.3 2.7;
}

body.nk-homepage .countdownTrack,
body.nk-homepage .countdownProgress{
  stroke-width:5.6 !important;
}

body.nk-homepage .countdownTrack{
  stroke:rgba(255,255,255,.12) !important;
}

body.nk-homepage .countdownProgress{
  stroke:#ff2445 !important;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.45))
    drop-shadow(0 0 8px rgba(255,37,70,.98))
    drop-shadow(0 0 18px rgba(178,0,34,.62)) !important;
}

body.nk-homepage .countdownText{
  width:138px !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  color:#fff !important;
  line-height:1 !important;
  text-align:center !important;
}

body.nk-homepage .countdownLabel{
  display:block !important;
  margin:0 0 8px !important;
  color:rgba(255,247,249,.92) !important;
  font-size:10px !important;
  line-height:1 !important;
  letter-spacing:.14em !important;
  font-weight:1000 !important;
  text-transform:uppercase !important;
}

body.nk-homepage .countdownUnits{
  width:100%;
  display:grid;
  gap:1px;
}

body.nk-homepage .countdownUnit{
  min-height:36px;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:7px;
}

body.nk-homepage .countdownUnit strong{
  min-width:58px;
  color:#ff2949;
  font-size:35px;
  line-height:.95;
  font-weight:1000;
  font-variant-numeric:tabular-nums;
  letter-spacing:.015em;
  text-align:right;
  text-shadow:
    0 0 8px rgba(255,255,255,.12),
    0 0 15px rgba(255,41,73,.72),
    0 3px 12px rgba(0,0,0,.74);
}

body.nk-homepage .countdownUnit small{
  min-width:28px;
  color:#ff4f68;
  font-size:10px;
  line-height:1;
  font-weight:1000;
  letter-spacing:.08em;
  text-align:left;
}

body.nk-homepage .countdownCompactValue{
  display:none;
  color:#ff2949 !important;
  font-size:14px;
  font-weight:1000;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 12px rgba(255,41,73,.64),0 3px 10px rgba(0,0,0,.70);
}

body.nk-homepage .countdownEndedResponse{
  width:150px !important;
}

body.nk-homepage .countdownEndedIcon{
  width:40px;
  height:40px;
  margin-bottom:8px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#ff2e4d;
  border:2px solid #ff2e4d;
  font-size:22px;
  line-height:1;
  font-weight:1000;
  box-shadow:0 0 18px rgba(255,38,69,.28),inset 0 0 12px rgba(255,38,69,.08);
}

body.nk-homepage .countdownEndedLead{
  color:#fff;
  font-size:14px;
  line-height:1;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

body.nk-homepage .countdownEndedWord{
  margin:4px 0 8px;
  color:#ff2949;
  font-size:32px;
  line-height:.92;
  font-weight:1000;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-shadow:0 0 18px rgba(255,41,73,.58),0 3px 11px rgba(0,0,0,.74);
}

body.nk-homepage .countdownEndedResponse small{
  color:rgba(246,241,244,.82);
  font-size:9px;
  line-height:1.25;
  font-weight:750;
}

body.nk-homepage .countdownStamp{
  width:max-content;
  max-width:240px;
  min-height:34px;
  padding:8px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:10px;
  color:rgba(255,244,247,.88);
  background:rgba(9,22,47,.82);
  border:1px solid rgba(255,54,84,.34);
  box-shadow:0 10px 24px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(12px) saturate(125%);
  font-size:9px;
  line-height:1.25;
  text-align:center;
}

body.nk-homepage .countdownStamp b{
  color:#ff405b;
}

body.nk-homepage .countdownStampIcon{
  color:#ff405b;
  font-size:15px;
}

body.nk-homepage.status-ended .countdownRing{
  background:
    repeating-conic-gradient(from -3deg,rgba(255,112,132,.30) 0 1deg,transparent 1deg 6deg),
    radial-gradient(circle at 50% 50%,rgba(255,24,58,.18) 0 43%,transparent 44%),
    conic-gradient(from 205deg,rgba(255,51,82,.22),rgba(95,0,20,.28) 40%,rgba(255,43,75,.18) 70%,rgba(34,0,10,.34)) !important;
  border-color:rgba(255,75,103,.72) !important;
  box-shadow:
    0 25px 62px rgba(0,0,0,.42),
    0 0 55px rgba(255,25,60,.36),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -22px 38px rgba(69,0,18,.30) !important;
  animation:nkEndedResponseGlow 2.2s ease-in-out infinite !important;
}

body.nk-homepage.status-ended .countdownProgress{
  stroke:#ff203f !important;
  stroke-dashoffset:0 !important;
}

body.nk-homepage.status-ended .voteHero{
  border-color:rgba(255,48,77,.48) !important;
  background:
    radial-gradient(circle at 8% 50%,rgba(238,22,53,.18),transparent 22%),
    linear-gradient(125deg,rgba(37,4,15,.93),rgba(11,20,42,.92)) !important;
}

body.nk-homepage.status-ended .heroTitle{
  color:#ff2949 !important;
}

body.nk-homepage.status-not_started .heroTitle{
  color:#ffb020 !important;
}

body.nk-homepage.status-not_started .countdownStamp,
body.nk-homepage.status-not_started .countdownRing{
  border-color:rgba(255,176,32,.40) !important;
}

@keyframes nkEndedResponseGlow{
  0%,100%{filter:drop-shadow(0 18px 36px rgba(255,30,65,.36));}
  50%{filter:drop-shadow(0 20px 48px rgba(255,30,65,.62));}
}

html[data-nkosec-theme="light"] body.nk-homepage .countdownRing{
  background:
    repeating-conic-gradient(from -3deg,rgba(107,0,21,.22) 0 1deg,transparent 1deg 6deg),
    radial-gradient(circle at 50% 50%,rgba(255,37,67,.06) 0 42%,transparent 43%),
    conic-gradient(from 205deg,rgba(255,255,255,.96),rgba(255,40,70,.06) 25%,rgba(255,40,70,.15) 48%,rgba(255,255,255,.74) 73%,rgba(255,40,70,.04)) !important;
}

html[data-nkosec-theme="light"] body.nk-homepage .countdownRing::before{
  background:
    radial-gradient(circle at 35% 24%,rgba(255,255,255,.96),transparent 30%),
    linear-gradient(145deg,rgba(255,255,255,.94),rgba(241,246,252,.78) 68%,rgba(255,238,242,.78)) !important;
}

html[data-nkosec-theme="light"] body.nk-homepage .countdownLabel,
html[data-nkosec-theme="light"] body.nk-homepage .countdownEndedLead{
  color:#41101c !important;
  text-shadow:none !important;
}

html[data-nkosec-theme="light"] body.nk-homepage .countdownUnit strong,
html[data-nkosec-theme="light"] body.nk-homepage .countdownCompactValue,
html[data-nkosec-theme="light"] body.nk-homepage .countdownEndedWord{
  color:#c90028 !important;
  text-shadow:0 0 10px rgba(201,0,40,.18),0 2px 6px rgba(56,0,14,.10) !important;
}

html[data-nkosec-theme="light"] body.nk-homepage .countdownUnit small{
  color:#b80023 !important;
}

html[data-nkosec-theme="light"] body.nk-homepage .countdownEndedResponse small{
  color:rgba(55,18,27,.72) !important;
}

html[data-nkosec-theme="light"] body.nk-homepage .countdownStamp{
  color:#3f1721;
  background:rgba(255,255,255,.88);
  border-color:rgba(194,0,36,.22);
}

/* Medium desktops retain the right-side response without clipping. */
@media(max-width:1180px) and (min-width:861px){
  body.nk-homepage .countdownDock{
    left:calc(100% + 20px) !important;
    width:184px !important;
    gap:11px !important;
  }
  body.nk-homepage .countdownRing{
    width:176px !important;
    height:176px !important;
  }
  body.nk-homepage .countdownRing::before{inset:16px !important;}
  body.nk-homepage .countdownText{width:116px !important;}
  body.nk-homepage .countdownLabel{font-size:8px !important;margin-bottom:6px !important;}
  body.nk-homepage .countdownUnit{min-height:29px;gap:5px;}
  body.nk-homepage .countdownUnit strong{min-width:47px;font-size:28px;}
  body.nk-homepage .countdownUnit small{min-width:24px;font-size:8px;}
  body.nk-homepage .countdownEndedResponse{width:124px !important;}
  body.nk-homepage .countdownEndedIcon{width:33px;height:33px;font-size:18px;margin-bottom:6px;}
  body.nk-homepage .countdownEndedLead{font-size:11px;}
  body.nk-homepage .countdownEndedWord{font-size:26px;margin:3px 0 6px;}
  body.nk-homepage .countdownEndedResponse small{font-size:8px;}
  body.nk-homepage .countdownStamp{max-width:190px;font-size:8px;padding:7px 9px;}
}

/* Tablets and phones put the response above the card and use a compact readout. */
@media(max-width:860px){
  body.nk-homepage .mainGrid,
  body.nk-homepage .mainGrid.singleLogin{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:7px !important;
  }
  body.nk-homepage .countdownDock{
    position:relative !important;
    inset:auto !important;
    order:0 !important;
    width:100% !important;
    min-height:0 !important;
    gap:7px !important;
  }
  body.nk-homepage .card{order:1 !important;}
  body.nk-homepage .countdownRing{
    width:122px !important;
    height:122px !important;
  }
  body.nk-homepage .countdownRing::before{inset:11px !important;}
  body.nk-homepage .countdownSvg{inset:2px !important;width:calc(100% - 4px) !important;height:calc(100% - 4px) !important;}
  body.nk-homepage .countdownText{width:88px !important;}
  body.nk-homepage .countdownUnits{display:none !important;}
  body.nk-homepage .countdownCompactValue{display:block !important;font-size:12px !important;line-height:1.12 !important;}
  body.nk-homepage .countdownLabel{font-size:7px !important;margin-bottom:5px !important;}
  body.nk-homepage .countdownStamp{min-height:26px;max-width:92%;padding:5px 9px;font-size:7px;border-radius:8px;}
  body.nk-homepage .countdownStampIcon{font-size:11px;}
  body.nk-homepage .countdownEndedResponse{width:92px !important;}
  body.nk-homepage .countdownEndedIcon{width:26px;height:26px;margin-bottom:4px;border-width:1px;border-radius:8px;font-size:14px;}
  body.nk-homepage .countdownEndedLead{font-size:8px;}
  body.nk-homepage .countdownEndedWord{font-size:19px;margin:2px 0 4px;}
  body.nk-homepage .countdownEndedResponse small{font-size:6px;line-height:1.15;}
}

@media(max-width:520px){
  body.nk-homepage .countdownRing{
    width:108px !important;
    height:108px !important;
  }
  body.nk-homepage .countdownRing::before{inset:10px !important;}
  body.nk-homepage .countdownText{width:78px !important;}
  body.nk-homepage .countdownLabel{font-size:6px !important;margin-bottom:4px !important;}
  body.nk-homepage .countdownCompactValue{font-size:10px !important;}
  body.nk-homepage .countdownStamp{font-size:6px;padding:4px 8px;}
}

/* Short landscape screens keep every control visible without scrolling. */
@media(max-height:650px) and (min-width:861px){
  body.nk-homepage .countdownDock{
    top:2px !important;
    gap:8px !important;
  }
  body.nk-homepage .countdownRing{
    width:148px !important;
    height:148px !important;
  }
  body.nk-homepage .countdownRing::before{inset:13px !important;}
  body.nk-homepage .countdownText{width:100px !important;}
  body.nk-homepage .countdownLabel{font-size:7px !important;margin-bottom:4px !important;}
  body.nk-homepage .countdownUnit{min-height:24px;gap:4px;}
  body.nk-homepage .countdownUnit strong{min-width:40px;font-size:23px;}
  body.nk-homepage .countdownUnit small{min-width:20px;font-size:7px;}
  body.nk-homepage .countdownEndedResponse{width:105px !important;}
  body.nk-homepage .countdownEndedIcon{width:28px;height:28px;font-size:15px;margin-bottom:4px;}
  body.nk-homepage .countdownEndedLead{font-size:9px;}
  body.nk-homepage .countdownEndedWord{font-size:22px;margin:2px 0 4px;}
  body.nk-homepage .countdownEndedResponse small{font-size:7px;}
  body.nk-homepage .countdownStamp{font-size:7px;min-height:26px;padding:5px 8px;}
}

@media(max-height:560px) and (max-width:860px){
  body.nk-homepage .countdownDock{gap:3px !important;}
  body.nk-homepage .countdownRing{width:86px !important;height:86px !important;}
  body.nk-homepage .countdownRing::before{inset:8px !important;}
  body.nk-homepage .countdownText{width:64px !important;}
  body.nk-homepage .countdownLabel{display:block !important;font-size:5px !important;margin-bottom:2px !important;}
  body.nk-homepage .countdownCompactValue{font-size:8px !important;}
  body.nk-homepage .countdownStamp{display:none !important;}
  body.nk-homepage .countdownEndedIcon{display:none !important;}
  body.nk-homepage .countdownEndedLead{font-size:7px;}
  body.nk-homepage .countdownEndedWord{font-size:16px;margin:2px 0;}
  body.nk-homepage .countdownEndedResponse small{font-size:5px;}
}

@media(prefers-reduced-motion:reduce){
  body.nk-homepage.status-ended .countdownRing{
    animation:none !important;
  }
}

/* ========================================================================
   COMPACT INLINE COUNTDOWN DIAL
   Keeps the premium red dial, reduces its footprint and places
   HR, MIN and SEC on one clean horizontal line.
   Added 28 June 2026.
   ======================================================================== */
@media(min-width:861px){
  body.nk-homepage .countdownDock{
    top:18px !important;
    left:calc(100% + 38px) !important;
    width:190px !important;
    gap:10px !important;
  }

  body.nk-homepage .countdownRing,
  body.nk-homepage .countdownRing.status-open,
  body.nk-homepage .countdownRing.status-not_started,
  body.nk-homepage .countdownRing.status-ended{
    width:174px !important;
    height:174px !important;
    border-width:1px !important;
    box-shadow:
      0 20px 44px rgba(0,0,0,.38),
      0 0 32px rgba(255,35,67,.28),
      inset 0 1px 0 rgba(255,255,255,.28),
      inset 0 -15px 26px rgba(57,0,14,.18) !important;
  }

  body.nk-homepage .countdownRing::before{
    inset:15px !important;
  }

  body.nk-homepage .countdownRing::after{
    inset:-5px !important;
    box-shadow:
      0 0 0 3px rgba(255,35,66,.03),
      0 0 23px rgba(255,35,66,.28),
      inset 0 0 16px rgba(255,255,255,.05) !important;
  }

  body.nk-homepage .countdownSvg{
    inset:3px !important;
    width:calc(100% - 6px) !important;
    height:calc(100% - 6px) !important;
  }

  body.nk-homepage .countdownTrack,
  body.nk-homepage .countdownProgress{
    stroke-width:5.2px !important;
  }

  body.nk-homepage .countdownText{
    width:140px !important;
  }

  body.nk-homepage .countdownLabel{
    margin:0 0 10px !important;
    font-size:8px !important;
    letter-spacing:.18em !important;
  }

  body.nk-homepage .countdownUnits{
    width:auto !important;
    display:flex !important;
    align-items:baseline !important;
    justify-content:center !important;
    flex-wrap:nowrap !important;
    gap:7px !important;
    padding:7px 10px !important;
    border-radius:999px !important;
    background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025)) !important;
    border:1px solid rgba(255,77,104,.17) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 7px 18px rgba(0,0,0,.18) !important;
  }

  body.nk-homepage .countdownUnit{
    min-height:0 !important;
    display:flex !important;
    align-items:baseline !important;
    justify-content:center !important;
    gap:2px !important;
    white-space:nowrap !important;
  }

  body.nk-homepage .countdownUnit strong{
    min-width:0 !important;
    font-size:21px !important;
    line-height:1 !important;
    letter-spacing:0 !important;
    text-align:center !important;
  }

  body.nk-homepage .countdownUnit small{
    min-width:0 !important;
    font-size:6px !important;
    line-height:1 !important;
    letter-spacing:.05em !important;
    text-align:left !important;
  }

  body.nk-homepage .countdownCompactValue{
    display:none !important;
  }

  body.nk-homepage .countdownEndedResponse{
    width:126px !important;
  }

  body.nk-homepage .countdownEndedIcon{
    width:31px !important;
    height:31px !important;
    margin-bottom:5px !important;
    border-radius:10px !important;
    font-size:17px !important;
  }

  body.nk-homepage .countdownEndedLead{
    font-size:10px !important;
  }

  body.nk-homepage .countdownEndedWord{
    margin:3px 0 5px !important;
    font-size:25px !important;
  }

  body.nk-homepage .countdownEndedResponse small{
    font-size:7px !important;
  }

  body.nk-homepage .countdownStamp{
    max-width:190px !important;
    min-height:30px !important;
    padding:7px 10px !important;
    font-size:8px !important;
  }
}

@media(max-width:1180px) and (min-width:861px){
  body.nk-homepage .countdownDock{
    left:calc(100% + 18px) !important;
    width:166px !important;
  }

  body.nk-homepage .countdownRing,
  body.nk-homepage .countdownRing.status-open,
  body.nk-homepage .countdownRing.status-not_started,
  body.nk-homepage .countdownRing.status-ended{
    width:154px !important;
    height:154px !important;
  }

  body.nk-homepage .countdownRing::before{
    inset:13px !important;
  }

  body.nk-homepage .countdownText{
    width:126px !important;
  }

  body.nk-homepage .countdownUnits{
    gap:5px !important;
    padding:6px 8px !important;
  }

  body.nk-homepage .countdownUnit strong{
    font-size:18px !important;
  }

  body.nk-homepage .countdownUnit small{
    font-size:5px !important;
  }
}

@media(max-height:650px) and (min-width:861px){
  body.nk-homepage .countdownDock{
    top:3px !important;
  }

  body.nk-homepage .countdownRing,
  body.nk-homepage .countdownRing.status-open,
  body.nk-homepage .countdownRing.status-not_started,
  body.nk-homepage .countdownRing.status-ended{
    width:138px !important;
    height:138px !important;
  }

  body.nk-homepage .countdownRing::before{
    inset:12px !important;
  }

  body.nk-homepage .countdownText{
    width:112px !important;
  }

  body.nk-homepage .countdownLabel{
    margin-bottom:6px !important;
    font-size:6px !important;
  }

  body.nk-homepage .countdownUnits{
    gap:4px !important;
    padding:5px 7px !important;
  }

  body.nk-homepage .countdownUnit strong{
    font-size:16px !important;
  }

  body.nk-homepage .countdownUnit small{
    font-size:5px !important;
  }

  body.nk-homepage .countdownStamp{
    min-height:25px !important;
    padding:5px 8px !important;
    font-size:7px !important;
  }
}

/* The compact mobile reading is already a single line, so retain it while
   refining the ring proportions and glow. */
@media(max-width:860px){
  body.nk-homepage .countdownRing{
    width:112px !important;
    height:112px !important;
    box-shadow:
      0 14px 30px rgba(0,0,0,.34),
      0 0 24px rgba(255,35,67,.25),
      inset 0 1px 0 rgba(255,255,255,.22) !important;
  }

  body.nk-homepage .countdownRing::before{
    inset:10px !important;
  }

  body.nk-homepage .countdownRing::after{
    inset:-4px !important;
  }
}

@media(max-width:520px){
  body.nk-homepage .countdownRing{
    width:100px !important;
    height:100px !important;
  }

  body.nk-homepage .countdownRing::before{
    inset:9px !important;
  }
}

@media(max-height:560px) and (max-width:860px){
  body.nk-homepage .countdownRing{
    width:84px !important;
    height:84px !important;
  }

  body.nk-homepage .countdownRing::before{
    inset:8px !important;
  }

  body.nk-homepage .countdownText{
    width:62px !important;
  }

  body.nk-homepage .countdownCompactValue{
    font-size:8px !important;
  }
}


/* ========================================================================
   Clean countdown update: remove the date/end strip and all neon glow.
   The countdown stays red, crisp and premium without luminous effects.
   ======================================================================== */
body.nk-homepage .countdownDock{
  gap:0 !important;
}

body.nk-homepage .countdownStamp{
  display:none !important;
}

body.nk-homepage .countdownRing,
body.nk-homepage .countdownRing.status-open,
body.nk-homepage .countdownRing.status-not_started,
body.nk-homepage .countdownRing.status-ended,
body.nk-homepage.status-ended .countdownRing{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -12px 24px rgba(0,0,0,.18) !important;
  filter:none !important;
  animation:none !important;
}

body.nk-homepage .countdownRing::before{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -12px 22px rgba(0,0,0,.18) !important;
}

body.nk-homepage .countdownRing::after{
  box-shadow:none !important;
  border-color:rgba(255,67,95,.30) !important;
}

body.nk-homepage .countdownProgress,
body.nk-homepage.status-ended .countdownProgress{
  filter:none !important;
}

body.nk-homepage .countdownUnit strong,
body.nk-homepage .countdownCompactValue,
body.nk-homepage .countdownEndedWord{
  text-shadow:none !important;
}

body.nk-homepage .countdownEndedIcon{
  box-shadow:none !important;
}

html[data-nkosec-theme="light"] body.nk-homepage .countdownRing,
html[data-nkosec-theme="light"] body.nk-homepage .countdownRing.status-open,
html[data-nkosec-theme="light"] body.nk-homepage .countdownRing.status-not_started,
html[data-nkosec-theme="light"] body.nk-homepage .countdownRing.status-ended{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -10px 22px rgba(15,23,42,.08) !important;
  filter:none !important;
  animation:none !important;
}

/* ========================================================================
   MOBILE PORTRAIT POLISH
   Keeps the ended response compact, prevents overlaps and gives the public
   login page a balanced phone layout. Added 28 June 2026.
   ======================================================================== */
@media (max-width: 600px) {
  html,
  body.nk-homepage {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body.nk-homepage {
    min-height: 100svh !important;
    padding-bottom: 68px !important;
  }

  body.nk-homepage .topbar {
    width: calc(100% - 18px) !important;
    min-height: 62px !important;
    padding: 8px 0 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  body.nk-homepage .brand {
    min-width: 0 !important;
    max-width: calc(100% - 78px) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  body.nk-homepage .logo {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    border-width: 1px !important;
    box-shadow: 0 7px 18px rgba(0,0,0,.22) !important;
  }

  body.nk-homepage .brand > div:last-child {
    min-width: 0 !important;
  }

  body.nk-homepage .brand strong {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: clamp(15px, 4.7vw, 19px) !important;
    line-height: 1.05 !important;
  }

  body.nk-homepage .brand span {
    display: block !important;
    max-width: 100% !important;
    margin-top: 4px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 7px !important;
    line-height: 1 !important;
    letter-spacing: .11em !important;
  }

  body.nk-homepage .adminBtn {
    position: static !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    min-width: 64px !important;
    padding: 7px 10px !important;
    justify-content: center !important;
    font-size: 9px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
  }

  body.nk-homepage .adminBtn::before {
    font-size: 7px !important;
  }

  body.nk-homepage .wrap {
    width: calc(100% - 18px) !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    padding: 4px 0 18px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  body.nk-homepage .voteHero {
    width: 100% !important;
    padding: 12px 11px !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.24) !important;
  }

  body.nk-homepage .voteHeroInner {
    display: block !important;
  }

  body.nk-homepage .announceIcon {
    display: none !important;
  }

  body.nk-homepage .heroContent {
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  body.nk-homepage .heroTitle {
    margin: 0 !important;
    font-size: clamp(18px, 6vw, 22px) !important;
    line-height: 1.08 !important;
    letter-spacing: .01em !important;
  }

  body.nk-homepage .heroSub {
    margin: 5px auto 8px !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

  body.nk-homepage .timeRow {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding-top: 8px !important;
  }

  body.nk-homepage .timeBox {
    width: 100% !important;
    min-width: 0 !important;
    padding: 6px 7px !important;
    display: grid !important;
    grid-template-columns: 24px minmax(0,1fr) !important;
    align-items: center !important;
    gap: 5px !important;
    border-radius: 12px !important;
  }

  body.nk-homepage .timeIcon {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
    font-size: 11px !important;
  }

  body.nk-homepage .timeBox b {
    display: block !important;
    margin-bottom: 2px !important;
    font-size: 7px !important;
    line-height: 1 !important;
    letter-spacing: .05em !important;
  }

  body.nk-homepage .timeBox span {
    display: block !important;
    min-width: 0 !important;
    font-size: clamp(7px, 2.25vw, 9px) !important;
    line-height: 1.18 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body.nk-homepage .mainGrid,
  body.nk-homepage .mainGrid.singleLogin {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 9px !important;
    overflow: visible !important;
  }

  body.nk-homepage .countdownDock {
    position: relative !important;
    inset: auto !important;
    order: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    transform: none !important;
  }

  body.nk-homepage .countdownRing,
  body.nk-homepage .countdownRing.status-open,
  body.nk-homepage .countdownRing.status-not_started,
  body.nk-homepage .countdownRing.status-ended,
  body.nk-homepage.status-ended .countdownRing {
    width: 124px !important;
    height: 124px !important;
    min-width: 124px !important;
    min-height: 124px !important;
    margin: 0 auto !important;
    border-width: 1px !important;
    background:
      repeating-conic-gradient(from -3deg,rgba(255,255,255,.16) 0 1deg,transparent 1deg 7deg),
      radial-gradient(circle at 50% 50%,rgba(255,35,69,.07) 0 43%,transparent 44%),
      linear-gradient(145deg,rgba(255,255,255,.08),rgba(8,18,39,.24)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -10px 20px rgba(0,0,0,.16) !important;
    filter: none !important;
    animation: none !important;
    transform: none !important;
  }

  body.nk-homepage .countdownRing::before {
    inset: 10px !important;
    background: linear-gradient(145deg,rgba(255,255,255,.08),rgba(6,16,35,.82)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -10px 18px rgba(0,0,0,.17) !important;
  }

  body.nk-homepage .countdownRing::after {
    inset: -3px !important;
    border-color: rgba(255,67,95,.26) !important;
    box-shadow: none !important;
  }

  body.nk-homepage .countdownSvg {
    inset: 2px !important;
    width: calc(100% - 4px) !important;
    height: calc(100% - 4px) !important;
  }

  body.nk-homepage .countdownTrack,
  body.nk-homepage .countdownProgress {
    stroke-width: 5px !important;
  }

  body.nk-homepage .countdownText {
    width: 92px !important;
    max-width: 92px !important;
  }

  body.nk-homepage .countdownEndedResponse {
    width: 90px !important;
  }

  body.nk-homepage .countdownEndedIcon {
    width: 24px !important;
    height: 24px !important;
    margin: 0 0 4px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
  }

  body.nk-homepage .countdownEndedLead {
    font-size: 7px !important;
    line-height: 1 !important;
    letter-spacing: .07em !important;
  }

  body.nk-homepage .countdownEndedWord {
    margin: 2px 0 4px !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }

  body.nk-homepage .countdownEndedResponse small {
    font-size: 5.5px !important;
    line-height: 1.18 !important;
  }

  body.nk-homepage .countdownLabel {
    margin-bottom: 4px !important;
    font-size: 6px !important;
  }

  body.nk-homepage .countdownUnits {
    display: none !important;
  }

  body.nk-homepage .countdownCompactValue {
    display: block !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  body.nk-homepage .card {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px 14px 14px !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 36px rgba(0,0,0,.28) !important;
  }

  body.nk-homepage .card h1 {
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1.05 !important;
  }

  body.nk-homepage .card > p {
    margin: 5px 0 10px !important;
    font-size: 11px !important;
  }

  body.nk-homepage .motto {
    margin: 0 auto 11px !important;
    padding: 6px 10px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  body.nk-homepage label {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  body.nk-homepage input {
    min-height: 44px !important;
    height: 44px !important;
    margin: 6px 0 10px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
  }

  body.nk-homepage button[type="submit"] {
    min-height: 45px !important;
    height: 45px !important;
    margin-top: 1px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
  }

  body.nk-homepage form > p {
    margin: 8px 0 0 !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
  }

  body.nk-homepage .footer {
    margin: 1px 0 0 !important;
    padding: 0 0 2px !important;
    text-align: center !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
  }

  body.nk-homepage .nkosec-theme-switch {
    left: 50% !important;
    right: auto !important;
    bottom: 8px !important;
    transform: translateX(-50%) !important;
    padding: 3px !important;
    gap: 2px !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.25) !important;
  }

  body.nk-homepage .nkosec-theme-switch button {
    padding: 5px 8px !important;
    font-size: 9px !important;
  }
}

@media (max-width: 380px) {
  body.nk-homepage .topbar {
    width: calc(100% - 14px) !important;
  }

  body.nk-homepage .brand {
    max-width: calc(100% - 70px) !important;
  }

  body.nk-homepage .logo {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }

  body.nk-homepage .brand strong {
    font-size: 14px !important;
  }

  body.nk-homepage .adminBtn {
    min-width: 58px !important;
    padding: 6px 8px !important;
    font-size: 8px !important;
  }

  body.nk-homepage .wrap {
    width: calc(100% - 14px) !important;
  }

  body.nk-homepage .heroTitle {
    font-size: 17px !important;
  }

  body.nk-homepage .heroSub {
    font-size: 9px !important;
  }

  body.nk-homepage .timeBox {
    grid-template-columns: 20px minmax(0,1fr) !important;
    padding: 5px !important;
  }

  body.nk-homepage .timeIcon {
    width: 20px !important;
    height: 20px !important;
    flex-basis: 20px !important;
    font-size: 9px !important;
  }

  body.nk-homepage .countdownRing,
  body.nk-homepage .countdownRing.status-open,
  body.nk-homepage .countdownRing.status-not_started,
  body.nk-homepage .countdownRing.status-ended,
  body.nk-homepage.status-ended .countdownRing {
    width: 116px !important;
    height: 116px !important;
    min-width: 116px !important;
    min-height: 116px !important;
  }

  body.nk-homepage .card {
    padding: 14px 12px 13px !important;
  }
}


/* ========================================================================
   MOBILE ENDED STATUS BUTTON VISIBILITY FIX
   Added 28 June 2026
   A non-submit status panel is used while voting is closed so Samsung
   Browser and other mobile browsers cannot collapse the disabled button.
   ======================================================================== */
body.nk-homepage .loginStatus {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  height: auto !important;
  margin: 2px 0 0 !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 8 !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  text-align: center !important;
  white-space: normal !important;
  line-height: 1.15 !important;
  letter-spacing: .25px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  user-select: none;
}

body.nk-homepage .loginStatus.status-ended {
  color: #fff !important;
  background: linear-gradient(100deg,#a3000c 0%,#e3182e 52%,#b70014 100%) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 8px 20px rgba(145,0,18,.28), inset 0 1px 0 rgba(255,255,255,.16) !important;
}

body.nk-homepage .loginStatus.status-not_started {
  color: #fff !important;
  background: linear-gradient(100deg,#8a5900 0%,#e69700 55%,#bd7600 100%) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 8px 20px rgba(160,101,0,.24), inset 0 1px 0 rgba(255,255,255,.14) !important;
}

html[data-nkosec-theme="light"] body.nk-homepage .loginStatus.status-ended,
html[data-nkosec-theme="light"] body.nk-homepage .loginStatus.status-not_started {
  color: #fff !important;
}

@media (max-width: 760px) {
  body.nk-homepage .loginStatus {
    display: flex !important;
    min-height: 48px !important;
    height: 48px !important;
    margin-top: 2px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }
}

@media (max-width: 380px) {
  body.nk-homepage .loginStatus {
    min-height: 46px !important;
    height: 46px !important;
    font-size: 13px !important;
  }
}

/* ========================================================================
   MOBILE LOGIN CARD VERTICAL SPACING
   Added 28 June 2026
   Moves the student login card slightly lower on phones so the ended status
   panel and countdown response have clearer separation.
   ======================================================================== */
@media (max-width: 600px) {
  body.nk-homepage .card {
    margin-top: 9px !important;
  }
}

@media (max-width: 380px) {
  body.nk-homepage .card {
    margin-top: 7px !important;
  }
}


/* ========================================================================
   MOBILE LOGIN CARD EXPANDED DOWNWARD
   Added 28 June 2026
   Lets the student login card grow naturally on phones so every field,
   status panel, footer text and spacing remain clearly visible.
   ======================================================================== */
@media (max-width: 760px) {
  html,
  body {
    height: auto !important;
    min-height: 100svh !important;
  }

  body.nk-homepage {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    display: block !important;
    padding-bottom: 84px !important;
  }

  body.nk-homepage .wrap {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 18px !important;
  }

  body.nk-homepage .mainGrid,
  body.nk-homepage .mainGrid.singleLogin {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  body.nk-homepage .card {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    padding: 18px 14px 24px !important;
    margin-top: 12px !important;
    margin-bottom: 8px !important;
  }

  body.nk-homepage .card form {
    display: block !important;
  }

  body.nk-homepage .card input {
    margin-bottom: 12px !important;
  }

  body.nk-homepage .loginStatus,
  body.nk-homepage button[type="submit"] {
    min-height: 50px !important;
    height: auto !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
  }

  body.nk-homepage form > p {
    margin-top: 10px !important;
    padding-bottom: 2px !important;
  }

  body.nk-homepage .footer {
    margin-top: 10px !important;
    margin-bottom: 12px !important;
    padding-bottom: 0 !important;
  }

  body.nk-homepage .nkosec-theme-switch {
    bottom: 10px !important;
  }
}

@media (max-width: 380px) {
  body.nk-homepage .card {
    padding: 17px 12px 22px !important;
    margin-top: 10px !important;
  }

  body.nk-homepage .loginStatus,
  body.nk-homepage button[type="submit"] {
    min-height: 48px !important;
  }
}


/* ========================================================================
   ANNOUNCEMENT PANEL GLOW REMOVAL REFINEMENT
   Added 28 June 2026
   Removes the reddish glow/tint from the ended-state announcement panel and
   keeps the hero panel on a clean neutral glass background.
   ======================================================================== */
body.nk-homepage.status-ended .voteHero {
  border-color: rgba(213,235,255,.52) !important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.035) 36%,rgba(0,18,39,.18) 72%,rgba(8,45,78,.15) 100%),
    rgba(3,18,36,.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(92,166,232,.12),
    0 20px 58px rgba(0,0,0,.30),
    0 0 0 1px rgba(21,111,206,.10) !important;
}

body.nk-homepage.status-ended .voteHero::before {
  background:
    linear-gradient(118deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.065) 16%,transparent 35%,transparent 66%,rgba(95,192,255,.07) 100%) !important;
  opacity: 1 !important;
}

body.nk-homepage.status-ended .announceIcon,
body.nk-homepage.status-ended .timeBox {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 28px rgba(0,0,0,.17) !important;
}

/* ========================================================================
   LOGIN CARD TRANSPARENCY, INPUT ICONS AND ADMIN BUTTON CONSISTENCY
   Added 28 June 2026
   ======================================================================== */

/* Slightly clearer glass so the configured background image is subtly seen. */
body.nk-homepage .card {
  background:
    linear-gradient(145deg,rgba(255,255,255,.105) 0%,rgba(255,255,255,.025) 36%,rgba(1,20,39,.145) 76%,rgba(9,50,82,.11) 100%),
    rgba(3,18,36,.21) !important;
  -webkit-backdrop-filter: blur(17px) saturate(132%) contrast(103%) !important;
  backdrop-filter: blur(17px) saturate(132%) contrast(103%) !important;
}

html[data-nkosec-theme="light"] body.nk-homepage .card {
  background:
    linear-gradient(140deg,rgba(255,255,255,.40) 0%,rgba(255,255,255,.15) 44%,rgba(225,241,255,.10) 100%),
    rgba(255,255,255,.10) !important;
  -webkit-backdrop-filter: blur(17px) saturate(125%) contrast(102%) !important;
  backdrop-filter: blur(17px) saturate(125%) contrast(102%) !important;
}

/* Icons positioned inside the two login inputs. */
body.nk-homepage .inputWrap {
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
}

body.nk-homepage .inputWrap .inputIcon {
  position: absolute !important;
  left: 13px !important;
  top: 50% !important;
  z-index: 3 !important;
  width: 18px !important;
  height: 18px !important;
  display: grid !important;
  place-items: center !important;
  color: #72b8ff !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  opacity: .88 !important;
}

body.nk-homepage .inputWrap .inputIcon svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  fill: currentColor !important;
}

body.nk-homepage .inputWrap input {
  padding-left: 43px !important;
}

body.nk-homepage .inputWrap:focus-within .inputIcon {
  color: #a9d6ff !important;
  opacity: 1 !important;
}

html[data-nkosec-theme="light"] body.nk-homepage .inputWrap .inputIcon {
  color: #1769bd !important;
}

html[data-nkosec-theme="light"] body.nk-homepage .inputWrap:focus-within .inputIcon {
  color: #0b4f98 !important;
}

/* Admin action now follows the blue interface gradient. */
body.nk-homepage .adminBtn {
  color: #ffffff !important;
  background: linear-gradient(100deg,#1859c9 0%,#138ed7 55%,#10a7df 100%) !important;
  border: 1px solid rgba(174,224,255,.55) !important;
  box-shadow:
    0 9px 22px rgba(5,79,162,.28),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
  text-shadow: 0 1px 2px rgba(0,32,76,.45) !important;
}

body.nk-homepage .adminBtn:hover,
body.nk-homepage .adminBtn:focus-visible {
  background: linear-gradient(100deg,#164fb8 0%,#087fc9 55%,#079ad2 100%) !important;
  border-color: rgba(218,241,255,.78) !important;
  box-shadow:
    0 11px 25px rgba(5,79,162,.34),
    inset 0 1px 0 rgba(255,255,255,.30) !important;
}

body.nk-homepage .adminBtn .adminBtnFull,
body.nk-homepage .adminBtn .adminBtnShort,
body.nk-homepage .adminBtn::after {
  color: #ffffff !important;
}

@media (max-width: 760px) {
  body.nk-homepage .inputWrap .inputIcon {
    left: 12px !important;
    width: 17px !important;
    height: 17px !important;
  }

  body.nk-homepage .inputWrap input {
    padding-left: 40px !important;
  }
}

/* ========================================================================
   LOGIN FEEDBACK, CLOSED INPUTS AND ADMIN BUTTON MICRO-INTERACTION
   Added 28 June 2026
   ======================================================================== */

/* Smooth, subtle blue glow on the Admin button. */
body.nk-homepage .adminBtn {
  position: absolute;
  overflow: hidden;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    filter .22s ease !important;
  will-change: transform, box-shadow;
}

body.nk-homepage .adminBtn::before {
  content: "";
  position: absolute;
  inset: -45%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle, rgba(164,224,255,.52) 0%, rgba(76,171,255,.18) 35%, transparent 68%);
  transform: scale(.72);
  transition: opacity .24s ease, transform .34s ease;
}

body.nk-homepage .adminBtn > span,
body.nk-homepage .adminBtn::after {
  position: relative;
  z-index: 1;
}

body.nk-homepage .adminBtn:hover,
body.nk-homepage .adminBtn:focus-visible {
  transform: translateY(-2px) scale(1.015);
  filter: saturate(108%) brightness(1.035);
  animation: nkAdminSoftGlow 1.5s ease-in-out infinite;
}

body.nk-homepage .adminBtn:hover::before,
body.nk-homepage .adminBtn:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

body.nk-homepage .adminBtn:active {
  transform: translateY(0) scale(.985);
  animation: none;
}

@keyframes nkAdminSoftGlow {
  0%,100% {
    box-shadow:
      0 9px 22px rgba(5,79,162,.28),
      0 0 0 0 rgba(69,176,255,.08),
      inset 0 1px 0 rgba(255,255,255,.24);
  }
  50% {
    box-shadow:
      0 12px 28px rgba(5,79,162,.36),
      0 0 18px 3px rgba(69,176,255,.18),
      inset 0 1px 0 rgba(255,255,255,.30);
  }
}

/* Small spinner displayed inside the login button during processing. */
body.nk-homepage #studentLoginButton {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  transition: opacity .2s ease, filter .2s ease, transform .2s ease !important;
}

body.nk-homepage .loginButtonSpinner {
  display: none;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  border: 2px solid rgba(255,255,255,.42);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: nkLoginSpinner .72s linear infinite;
}

body.nk-homepage .studentLoginForm.is-processing .loginButtonSpinner {
  display: inline-block;
}

body.nk-homepage .studentLoginForm.is-processing #studentLoginButton {
  cursor: wait !important;
  opacity: .9 !important;
  filter: saturate(.88) brightness(.96) !important;
  transform: none !important;
}

body.nk-homepage .studentLoginForm.is-processing .inputWrap,
body.nk-homepage .studentLoginForm.is-processing label {
  pointer-events: none;
}

@keyframes nkLoginSpinner {
  to { transform: rotate(360deg); }
}

/* Closed elections keep the inputs visible but clearly unavailable. */
body.nk-homepage .inputWrap input:disabled {
  cursor: not-allowed !important;
  color: rgba(219,230,244,.64) !important;
  -webkit-text-fill-color: rgba(219,230,244,.64) !important;
  background: rgba(5,18,37,.48) !important;
  border-color: rgba(151,174,204,.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  opacity: .78 !important;
}

body.nk-homepage .inputWrap:has(input:disabled) .inputIcon {
  color: rgba(151,174,204,.58) !important;
  opacity: .72 !important;
}

html[data-nkosec-theme="light"] body.nk-homepage .inputWrap input:disabled {
  color: rgba(56,76,103,.66) !important;
  -webkit-text-fill-color: rgba(56,76,103,.66) !important;
  background: rgba(226,234,244,.66) !important;
  border-color: rgba(93,116,145,.25) !important;
}

html[data-nkosec-theme="light"] body.nk-homepage .inputWrap:has(input:disabled) .inputIcon {
  color: rgba(69,94,126,.60) !important;
}

@media (prefers-reduced-motion: reduce) {
  body.nk-homepage .adminBtn,
  body.nk-homepage .adminBtn:hover,
  body.nk-homepage .adminBtn:focus-visible,
  body.nk-homepage .loginButtonSpinner {
    animation: none !important;
    transition: none !important;
  }
}