@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&family=Outfit:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=Syne:wght@700;800&display=swap');

html, body, p, span, a, li, b, strong, button, input, select, textarea, label, td, th, div, article, section, header, footer,
h1, h2, h3, h4, h5, h6 {
  font-family: 'Ubuntu', sans-serif !important;
}

[lang="ar"], [dir="rtl"], .bismillah-mark, .arabic-team-name {
  font-family: 'Noto Naskh Arabic', 'Amiri', 'Traditional Arabic', serif !important;
}

:root{
  --modern-bg:#07100b;
  --modern-surface:rgba(8,20,13,.88);
  --modern-surface-soft:rgba(12,27,18,.72);
  --modern-line:rgba(255,255,255,.11);
  --modern-line-strong:rgba(105,231,137,.3);
  --modern-text:#f5f8f6;
  --modern-muted:#9ca9a1;
  --modern-accent:#4ee883;
  --modern-accent-soft:rgba(78,232,131,.11);
  --modern-radius:20px;
  --modern-shadow:0 22px 60px rgba(0,0,0,.28);
}

/* Clean, subtle, dark emerald browser scrollbars across all pages */
html {
  scroll-behavior: smooth !important;
  scroll-padding-top: 84px !important;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}

* {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(78, 232, 131, 0.4) rgba(4, 14, 8, 0.6) !important;
  -webkit-overflow-scrolling: touch !important;
}

::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

::-webkit-scrollbar-track {
  background: rgba(4, 14, 8, 0.6) !important;
  border-radius: 99px !important;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(78, 232, 131, 0.45) 0%, rgba(78, 232, 131, 0.25) 100%) !important;
  border: 2px solid rgba(4, 14, 8, 0.6) !important;
  border-radius: 99px !important;
  transition: background 0.25s ease, box-shadow 0.25s ease !important;
}

::-webkit-scrollbar-thumb:hover {
  background: #4ee883 !important;
  box-shadow: 0 0 14px rgba(78, 232, 131, 0.65) !important;
}

::-webkit-scrollbar-corner {
  background: transparent !important;
}

.motion-scroll-progress,
.scroll-back-to-top {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body:not(.page-admin){color:var(--modern-text);font-family:"Ubuntu",sans-serif!important}
body:not(.page-admin) main{width:min(1180px,100%);padding-inline:22px}
body:not(.page-admin) .motion-aurora{display:none!important}

body:not(.page-admin) .motion-depth.motion-in{transform:none!important;background-image:none!important}
body:not(.page-admin) .overline{margin-bottom:10px;color:var(--modern-accent);font-size:9px;letter-spacing:.15em}
body:not(.page-admin) h1,
body:not(.page-admin) h2,
body:not(.page-admin) h3,
body:not(.page-admin) h4,
body:not(.page-admin) h5,
body:not(.page-admin) h6 {
  font-family: 'Ubuntu', sans-serif !important;
  letter-spacing: -0.01em !important;
}
body:not(.page-admin) input,
body:not(.page-admin) textarea,
body:not(.page-admin) select{border-color:var(--modern-line)!important;background:rgba(255,255,255,.045)!important;color:#fff!important;box-shadow:none!important}
body:not(.page-admin) input:focus,
body:not(.page-admin) textarea:focus,
body:not(.page-admin) select:focus{border-color:var(--modern-accent)!important;box-shadow:0 0 0 3px rgba(89,223,123,.1)!important}

body:not(.page-admin) .site-header{
  top:0;
  width:min(1184px,calc(100% - 24px));
  min-height:58px;
  margin:0 auto;
  padding:7px 12px;
  border:1px solid var(--modern-line);
  border-radius:16px;
  background:rgba(5,14,9,.75);
  box-shadow:0 14px 42px rgba(0,0,0,.24);
  backdrop-filter:blur(16px);
}
body:not(.page-admin) .site-logo img{width:38px;height:38px;padding:5px;border-radius:10px}
body:not(.page-admin) .site-logo b{font-size:13px;letter-spacing:-.01em}
body:not(.page-admin) .site-logo small{margin-top:1px;color:rgba(255,255,255,.45);font-size:8px}
body:not(.page-admin) .site-nav{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:4px 6px;border:1px solid rgba(9,174,70,.25);border-radius:9999px;background:rgba(2,12,6,.85);backdrop-filter:blur(16px);box-shadow:inset 0 1px 1px rgba(255,255,255,.08),0 4px 16px rgba(0,0,0,.3)}
body:not(.page-admin) .site-nav a{position:relative;display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 16px;border-radius:9999px;border:1px solid transparent;color:rgba(255,255,255,.78);font-family:'Plus Jakarta Sans','Manrope','Cairo',sans-serif;font-size:13px;font-weight:700;letter-spacing:.01em;text-decoration:none;white-space:nowrap;background:transparent;transition:all .22s ease}
body:not(.page-admin) .site-nav a:hover{color:#fff;background:rgba(9,174,70,.16);border-color:rgba(9,174,70,.3);box-shadow:0 2px 10px rgba(9,174,70,.2)}
body:not(.page-admin) .site-nav a.active{color:#fff;background:linear-gradient(135deg,#09ae46,#068033);border:1px solid rgba(255,255,255,.25);font-weight:700;box-shadow:0 4px 18px rgba(9,174,70,.6),inset 0 1px 0 rgba(255,255,255,.3)}
body:not(.page-admin) .visitor-logout-floating{height:36px;border-color:var(--modern-line);border-radius:10px;background:rgba(255,255,255,.045);box-shadow:none}
body:not(.page-admin) .visitor-logout-floating:hover{border-color:var(--modern-line-strong);background:var(--modern-accent-soft)}

body.page-home .home-redesign{padding-top:24px}
body.page-home .home-redesign-hero{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px 10px;text-align:center}
body.page-home .home-redesign-copy{display:flex;flex-direction:column;align-items:center;max-width:760px;margin-bottom:28vh}
body.page-home .home-visitor-greeting{width:max-content;margin-bottom:26px;padding:8px 12px;border:1px solid var(--modern-line);border-radius:999px;background:rgba(5,15,9,.62);color:var(--modern-muted);font-size:10px}
body.page-home .home-hero-eyebrow{margin-bottom:13px;color:var(--modern-accent);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
body.page-home .home-redesign-copy h1{margin:0;color:#fff;font-size:clamp(52px,8.5vw,98px);line-height:.88;text-align:center}
body.page-home .home-redesign-copy h1 em{color:var(--modern-accent)}
body.page-home .home-hero-intro{max-width:600px;margin:28px 0 0;color:rgba(255,255,255,.68);font-size:15px;line-height:1.75;text-align:center}
body.page-home .home-platform-statement{margin:0 0 26px;padding:28px 0;border-block:1px solid var(--modern-line);background:none!important}
body.page-home .home-platform-statement>p{max-width:900px;margin:0;color:#eef4f0;font-size:clamp(20px,2.7vw,31px);line-height:1.35}
body.page-home .home-platform-statement>strong{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:18px;color:var(--modern-muted);font-size:8px;letter-spacing:.1em;text-transform:uppercase}
body.page-home .home-story,
body.page-home .home-access,
body.page-home .home-event-highlights{margin-top:24px;border:1px solid var(--modern-line);border-radius:var(--modern-radius);background:var(--modern-surface);box-shadow:var(--modern-shadow);backdrop-filter:none}
body.page-home .home-musabaqa-about{grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:32px;margin-top:24px;border:none!important;background:transparent!important;box-shadow:none!important;padding:0!important}
body.page-home .home-musabaqa-about>*{border:1px solid var(--modern-line);border-radius:var(--modern-radius);background:var(--modern-surface);box-shadow:var(--modern-shadow);padding:clamp(26px,4vw,48px)}
body.page-home .home-about-copy h2{max-width:16ch;margin-bottom:20px;font-size:clamp(36px,5vw,58px);line-height:.98}
body.page-home .home-about-copy>p:not(.overline){color:var(--modern-muted);font-size:12px;line-height:1.8}
body.page-home .home-musabaqa-prayer{align-content:center}
body.page-home .home-musabaqa-prayer>span{color:var(--modern-accent);font-family:"Noto Naskh Arabic",serif!important;font-size:32px!important;line-height:1.75!important;font-weight:600}
body.page-home .home-musabaqa-prayer>p{margin:14px 0 0;color:rgba(255,255,255,.65);font-size:11px;line-height:1.75}
body.page-home .home-story{grid-template-columns:1fr 1fr;gap:0;overflow:hidden;padding:0}
body.page-home .home-story-visual{min-height:470px;margin:0;border-radius:0}
body.page-home .home-story-visual img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) brightness(.72)}
body.page-home .home-story-content{padding:clamp(28px,5vw,58px)}
body.page-home .home-story-kicker{color:var(--modern-accent);font-size:9px;letter-spacing:.14em;text-transform:uppercase}
body.page-home .home-story-content h2{margin:8px 0 18px;font-size:clamp(36px,4.8vw,56px);line-height:.96}
body.page-home .home-story-copy{color:var(--modern-muted);font-size:12px;line-height:1.8}
body.page-home .home-story-verse{margin-top:28px}
body.page-home .home-access{padding:clamp(26px,4vw,44px)}
body.page-home .home-access>header{align-items:end;margin-bottom:24px}
body.page-home .home-access>header h2{font-size:clamp(38px,5vw,60px);line-height:.92}
body.page-home .home-access>header>span{max-width:420px;color:var(--modern-muted);font-size:11px;line-height:1.7}
body.page-home .home-access-grid{gap:10px}
body.page-home .feature-card{min-height:150px!important;padding:20px!important;border:1px solid var(--modern-line)!important;border-radius:15px!important;background:rgba(255,255,255,.025)!important;box-shadow:none!important;backdrop-filter:none!important}
body.page-home .feature-card:hover{transform:translateY(-4px)!important;border-color:var(--modern-line-strong)!important;background:var(--modern-accent-soft)!important}
body.page-home .home-event-highlights{padding:clamp(26px,4vw,44px)}
body.page-home .home-event-highlights>header{margin-bottom:23px}
body.page-home .home-event-highlights>header h2{max-width:17ch;font-size:clamp(38px,5vw,60px);line-height:.96}
body.page-home .home-event-highlights>div{gap:10px}
body.page-home .home-event-highlights article{min-height:210px;padding:20px;border:1px solid var(--modern-line);border-radius:15px;background:rgba(255,255,255,.025)}
body.page-home .home-event-highlights article:hover{transform:translateY(-4px);border-color:var(--modern-line-strong);background:var(--modern-accent-soft)}
body.page-home .home-event-highlights article>span{width:39px;height:39px;margin-bottom:34px;border-radius:11px}

body.page-scoreboard .scoreboard-experience{padding:105px 0 70px}
body.page-scoreboard .leaderboard-header{align-items:end;margin-bottom:32px;padding:0}
body.page-scoreboard .leaderboard-header h1{font-family:'Ubuntu', sans-serif!important;font-size:clamp(52px,7vw,84px);font-weight:800;line-height:.92;letter-spacing:-.02em;color:#ffffff}
body.page-scoreboard .leaderboard-header h1 em{font-style:normal;color:var(--modern-accent)}
body.page-scoreboard .leaderboard-header h1 span{color:#ffffff}
body.page-scoreboard .leaderboard-status{max-width:440px;padding:20px 24px;border:1px solid rgba(78,232,131,.15);border-radius:20px;background:rgba(8,22,13,.6);backdrop-filter:blur(12px);box-shadow:0 12px 30px rgba(0,0,0,.2),inset 0 1px 0 rgba(78,232,131,.1)}
body.page-scoreboard .leaderboard-status p{color:rgba(140,224,148,.7);font-size:12px}

body.page-scoreboard .leaderboard-glass{position:relative;overflow:hidden;border:1px solid rgba(78,232,131,.15);border-radius:32px;background:#061209;box-shadow:inset 0 1px 0 rgba(78,232,131,.1),0 40px 100px rgba(0,0,0,.5);backdrop-filter:none}
body.page-scoreboard .leader-feature{position:relative;background:linear-gradient(160deg,color-mix(in srgb,var(--team) 15%,#081a0d),#040c06);border-right:1px solid rgba(78,232,131,.1)}
body.page-scoreboard .leader-feature::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top left,color-mix(in srgb,var(--team) 25%,transparent),transparent 60%);opacity:.2;pointer-events:none}
body.page-scoreboard .leader-avatar{border:1px solid color-mix(in srgb,var(--team) 30%,rgba(78,232,131,.2));border-radius:24px;background:color-mix(in srgb,var(--team) 15%,#061209);box-shadow:inset 0 1px 0 rgba(78,232,131,.15),0 16px 32px rgba(0,0,0,.3)}
body.page-scoreboard .leader-identity-copy h2{font-family:'Ubuntu', sans-serif!important;font-weight:800;letter-spacing:-.01em}
body.page-scoreboard .leader-performance{border:1px solid rgba(78,232,131,.15);border-radius:20px;background:rgba(78,232,131,.03);box-shadow:inset 0 1px 0 rgba(78,232,131,.05)}
body.page-scoreboard .leader-score-block strong{font-family:'Ubuntu', sans-serif!important;letter-spacing:-.02em;text-shadow:0 4px 12px rgba(0,0,0,.4)}
body.page-scoreboard .score-dual-bar{height:12px;border:1px solid rgba(78,232,131,.2);border-radius:99px;background:rgba(78,232,131,.05);box-shadow:inset 0 2px 4px rgba(0,0,0,.4)}
body.page-scoreboard .score-dual-bar i{background:linear-gradient(90deg,var(--modern-accent),#86efac);box-shadow:0 0 12px rgba(89,223,123,.35),inset 0 1px 0 rgba(255,255,255,.3)}

body.page-scoreboard .ranking-panel{background:transparent}
body.page-scoreboard .ranking-row{border:1px solid rgba(78,232,131,.08);border-radius:18px;background:rgba(78,232,131,.02);box-shadow:0 4px 12px rgba(0,0,0,.05);transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s ease,background .3s ease,box-shadow .3s ease}
body.page-scoreboard .ranking-row:hover{transform:translateY(-2px) scale(1.005);border-color:rgba(78,232,131,.25);background:rgba(78,232,131,.06);box-shadow:0 12px 24px rgba(0,0,0,.2),inset 0 1px 0 rgba(78,232,131,.1)}
body.page-scoreboard .ranking-row.is-leading{border-color:color-mix(in srgb,var(--team) 30%,rgba(78,232,131,.15));background:linear-gradient(90deg,color-mix(in srgb,var(--team) 12%,transparent),rgba(78,232,131,.02))}
body.page-scoreboard .ranking-team h3{font-family:'Ubuntu', sans-serif!important;font-weight:700;letter-spacing:-.01em}
body.page-scoreboard .ranking-score{font-family:'Ubuntu', sans-serif!important;font-weight:800;letter-spacing:-.02em}
body.page-scoreboard .team-signal{border:1px solid rgba(78,232,131,.15);background:rgba(78,232,131,.04);border-radius:12px}

body.page-schedule main{padding-top:0 !important;padding-bottom:70px}
body.page-schedule .schedule-head{margin-top:0;margin-bottom:24px;padding:0 0 24px;border-bottom:1px solid rgba(255,255,255,.09)}
body.page-schedule .schedule-head h1{font-size:clamp(58px,8vw,92px);line-height:.84}
body.page-schedule .schedule-head h1 em{font-style:normal;color:var(--modern-accent)}
body.page-schedule .schedule-head>p{max-width:440px;color:var(--modern-muted);font-size:11px;line-height:1.7}
body.page-schedule .schedule-head + .schedule-tabs{margin-top:12px}
body.page-schedule .schedule-tabs{display:flex;width:100%;max-width:660px;margin:0 auto 18px;padding:4px;border:1px solid var(--modern-line);border-radius:12px;background:var(--modern-surface);box-shadow:none;box-sizing:border-box}
body.page-schedule .schedule-tabs button{flex-shrink:0;white-space:nowrap;min-height:38px;border-radius:99px;color:var(--modern-muted)}
body.page-schedule .schedule-tabs button.active{background:#4ee883;color:#07100b;box-shadow:none}
body.page-schedule .schedule-grid{gap:12px}
body.page-schedule .schedule-column{overflow:hidden;border:1px solid var(--modern-line);border-radius:17px;background:var(--modern-surface);box-shadow:var(--modern-shadow);backdrop-filter:none}
body.page-schedule .schedule-column>header{background:rgba(89,223,123,.07)}
body.page-schedule .schedule-row{border-color:rgba(255,255,255,.075);background:transparent}
body.page-schedule .schedule-row:hover{background:var(--modern-accent-soft)}

body.page-participants .participant-shell{padding:24px 0 70px !important}
body.page-participants .participant-title{align-items:end;margin-bottom:22px;padding:0}
body.page-participants .participant-title h1{font-size:clamp(58px,8vw,92px);line-height:.84}
body.page-participants .clock-block{padding:13px 16px;border:1px solid var(--modern-line);border-radius:14px;background:var(--modern-surface)}
body.page-participants .participant-layout{gap:12px}
body.page-participants .speaker-card,
body.page-participants .participant-list,
body.page-participants .directory-chapter-heading,
body.page-participants .public-student-directory{border:1px solid var(--modern-line);border-radius:var(--modern-radius);background:var(--modern-surface);box-shadow:var(--modern-shadow);backdrop-filter:none}
body.page-participants .participant-row{border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.025)}
body.page-participants .participant-row:hover,
body.page-participants .participant-row.active{border-color:var(--modern-line-strong);background:var(--modern-accent-soft)}
body.page-participants .directory-chapter-heading{padding:25px 28px}
body.page-participants .public-student-grid article{border-color:rgba(255,255,255,.075);background:rgba(255,255,255,.022)}

body.page-review main{padding-top:0 !important;padding-bottom:60px}
body.page-review .review-shell{min-height:auto;grid-template-columns:minmax(0,.85fr) minmax(380px,1.15fr);gap:clamp(35px,7vw,90px);align-items:center;padding:24px 0 60px}
body.page-review .review-copy h1{font-size:clamp(58px,8vw,92px);line-height:.84}
body.page-review .review-copy>p:last-child{max-width:430px;color:var(--modern-muted);font-size:12px;line-height:1.8}
body.page-review .review-card{padding:clamp(24px,4vw,38px);border:1px solid var(--modern-line);border-radius:var(--modern-radius);background:var(--modern-surface);box-shadow:var(--modern-shadow);backdrop-filter:none}
body.page-review .rating-buttons{gap:7px}
body.page-review .rating-buttons button{border-radius:10px;background:rgba(255,255,255,.04)}
body.page-review .button-review-submit{min-height:50px;border-radius:11px;background:var(--modern-accent);color:#07100b;box-shadow:none}

body.page-home .site-footer.home-institution-footer{margin-top:28px!important;border-top:1px solid var(--modern-line)!important;background:transparent!important;color:#fff!important}
body.page-home .home-footer-location{border:1px solid var(--modern-line);background:rgba(255,255,255,.02);box-shadow:none;backdrop-filter:none}
body.page-home .home-footer-identity h2{color:#fff}
body.page-home .home-footer-identity address{color:var(--modern-muted)}

@media(max-width:900px){
  body.page-home .home-musabaqa-about{grid-template-columns:1fr}
  body.page-home .home-story{grid-template-columns:1fr}
  body.page-home .home-story-visual{min-height:340px}
  body.page-home .home-access-grid,
  body.page-home .home-event-highlights>div{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.page-review .review-shell{grid-template-columns:1fr;gap:25px}
}

@media(max-width:700px){
  body:not(.page-admin){padding-top:0}
  body:not(.page-admin) main{padding-inline:12px}
  body:not(.page-admin) .site-header{top:0!important;margin-top:0!important;left:0!important;right:0!important;width:100%!important;min-height:52px;padding:6px 7px!important;border-radius:0 0 14px 14px!important}
  body:not(.page-admin) .site-logo img{width:34px;height:34px;padding:5px}
  body:not(.page-admin) .site-logo b{font-size:10px!important}
  body:not(.page-admin) .site-logo small{font-size:5px!important}
  body:not(.page-admin) .visitor-logout-floating{width:34px!important;height:34px!important;min-width:34px!important;padding:4px!important}
  body.page-home .home-redesign{padding-top:0}
  body.page-home .home-redesign-hero{min-height:100vh;padding:20px 10px;align-items:center;justify-content:center;text-align:center}
  body.page-home .home-redesign-copy h1{font-size:clamp(48px,14.5vw,76px)!important;line-height:.92!important;font-weight:900!important}
  body.page-home .home-hero-intro{font-size:12px}
  body.page-home .home-platform-statement{margin-inline:8px;padding:23px 0}
  body.page-home .home-platform-statement>p{font-size:21px}
  body.page-home .home-story,
  body.page-home .home-access,
  body.page-home .home-event-highlights{margin-top:12px;border-radius:17px}
  body.page-home .home-access,
  body.page-home .home-event-highlights{padding:22px 18px}
  body.page-home .home-musabaqa-about>*{border-radius:17px;padding:22px 18px}
  body.page-home .home-story-visual{min-height:260px}
  body.page-home .home-story-content{padding:25px 19px}
  body.page-home .home-access>header{display:grid;gap:13px}
  body.page-home .home-access-grid,
  body.page-home .home-event-highlights>div{grid-template-columns:1fr}
  body.page-home .feature-card{min-height:132px!important}
  body.page-home .home-event-highlights article{min-height:170px}
  body.page-scoreboard .scoreboard-experience,
  body.page-participants .participant-shell{padding:88px 0 85px}
  body.page-schedule main,
  body.page-review main{padding-top:88px;padding-bottom:85px}
  body.page-scoreboard .leaderboard-header,
  body.page-schedule .schedule-head,
  body.page-participants .participant-title{display:grid;gap:17px}
  body.page-scoreboard .leaderboard-header h1,
  body.page-schedule .schedule-head h1,
  body.page-participants .participant-title h1,
  body.page-review .review-copy h1{font-size:42px}
  body.page-scoreboard .leaderboard-glass{border-radius:17px}
  body.page-schedule .schedule-head{margin-top:14px;margin-bottom:10px;gap:14px}
  body.page-schedule .schedule-head + .schedule-tabs{margin-top:6px}
  body.page-schedule .schedule-tabs{width:100%;max-width:100%;overflow-x:auto;box-sizing:border-box}
  body.page-schedule .schedule-column{border-radius:15px}
  body.page-participants .participant-layout{grid-template-columns:1fr}
  body.page-participants .speaker-card,
  body.page-participants .participant-list,
  body.page-participants .directory-chapter-heading,
  body.page-participants .public-student-directory{border-radius:16px}
  body.page-review .review-shell{padding:16px 0 85px}
  body.page-review .review-card{padding:20px 16px;border-radius:17px}
}

@media(prefers-reduced-motion:reduce){body:not(.page-admin) *{scroll-behavior:auto!important}}

/* Musabaqa 2026–27 programme and responsibility page. */
html body.page-musabaqa,
body.page-musabaqa,
html body.page-program-plan,
body.page-program-plan {
  --page-image: url("../kauzariyya9.png");
  position: relative !important;
  isolation: isolate !important;
  background:
    linear-gradient(180deg, rgba(4, 10, 7, .72), rgba(3, 8, 5, .92)),
    linear-gradient(90deg, rgba(4, 12, 7, .78), rgba(4, 12, 7, .55)),
    var(--page-image) center / cover fixed !important;
}
html body.page-musabaqa::before,
body.page-musabaqa::before,
html body.page-program-plan::before,
body.page-program-plan::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  height: 100vh !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(4, 10, 7, .68), rgba(3, 8, 5, .92)),
    var(--page-image) center / cover no-repeat !important;
  filter: none !important;
}
body.page-musabaqa .musabaqa-plan{padding:112px 0 72px}
.musabaqa-plan-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:42px;align-items:end;margin-bottom:24px;padding:10px 4px 28px;border-bottom:1px solid var(--modern-line)}
.musabaqa-plan-hero h1{max-width:12ch;margin:0;color:#fff;font-size:clamp(58px,8vw,98px);line-height:.83}
.musabaqa-plan-hero>div:first-child>p:last-child{max-width:620px;margin:25px 0 0;color:var(--modern-muted);font-size:12px;line-height:1.75}
.musabaqa-plan-stats{display:flex;gap:10px}
.musabaqa-plan-stats span{min-width:126px;display:grid;gap:6px;padding:20px;border:1px solid var(--modern-line);border-radius:16px;background:var(--modern-surface);box-shadow:var(--modern-shadow)}
.musabaqa-plan-stats strong{color:#fff;font:800 40px/1 "Ubuntu",sans-serif}
.musabaqa-plan-stats small{color:var(--modern-muted);font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.musabaqa-program-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:13px}
.musabaqa-program-section{overflow:hidden;border:1px solid var(--modern-line);border-radius:var(--modern-radius);background:var(--modern-surface);box-shadow:var(--modern-shadow)}
.musabaqa-program-section>header{display:flex;align-items:end;justify-content:space-between;gap:18px;padding:25px 25px 20px;border-bottom:1px solid var(--modern-line);background:linear-gradient(110deg,rgba(89,223,123,.08),transparent)}
.musabaqa-program-section>header .overline{margin-bottom:6px}
.musabaqa-program-section>header h2{margin:0;color:#fff;font-size:36px;line-height:1}
.musabaqa-program-section>header>span{color:var(--modern-muted);font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.musabaqa-program-list{display:grid;padding:8px}
.musabaqa-program-list article{display:grid;grid-template-columns:36px minmax(0,1fr) 32px;gap:12px;align-items:center;min-height:76px;padding:12px 13px;border-bottom:1px solid rgba(255,255,255,.07);border-radius:12px;transition:background .22s,transform .22s}
.musabaqa-program-list article:last-child{border-bottom:0}
.musabaqa-program-list article:hover{transform:translateX(3px);background:var(--modern-accent-soft)}
.musabaqa-program-list article>b{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(89,223,123,.2);border-radius:10px;background:var(--modern-accent-soft);color:var(--modern-accent);font-size:9px}
.musabaqa-program-list article>div{min-width:0}
.musabaqa-program-list h3{margin:0 0 5px;color:#fff;font-size:16px;line-height:1.1}
.musabaqa-program-list p{margin:0;color:var(--modern-muted);font-size:9px;line-height:1.5}
.musabaqa-program-list article>span{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:rgba(255,255,255,.04);color:rgba(255,255,255,.34);font-size:8px}
.musabaqa-program-list article.is-pending p{color:#f4c973}
.musabaqa-program-list article.is-pending>b{border-color:rgba(244,201,115,.25);background:rgba(244,201,115,.08);color:#f4c973}
.musabaqa-committee{margin-top:13px;padding:clamp(24px,4vw,40px);border:1px solid var(--modern-line);border-radius:var(--modern-radius);background:var(--modern-surface);box-shadow:var(--modern-shadow)}
.musabaqa-committee>header{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.7fr);gap:30px;align-items:end;margin-bottom:23px;padding-bottom:21px;border-bottom:1px solid var(--modern-line)}
.musabaqa-committee>header h2{margin:0;color:#fff;font-size:clamp(38px,5vw,58px);line-height:.95}
.musabaqa-committee>header>p{margin:0;color:var(--modern-muted);font-size:10px;line-height:1.7}
.musabaqa-committee>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.musabaqa-committee article{min-height:148px;padding:17px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.025);transition:transform .22s,border-color .22s,background .22s}
.musabaqa-committee article:hover{transform:translateY(-4px);border-color:var(--modern-line-strong);background:var(--modern-accent-soft)}
.musabaqa-committee article>span{color:var(--modern-accent);font-size:8px;font-weight:900;letter-spacing:.1em}
.musabaqa-committee h3{margin:28px 0 8px;color:#fff;font-size:18px}
.musabaqa-committee article p{margin:0;color:var(--modern-muted);font-size:9px;line-height:1.6}
.musabaqa-source-note{width:max-content;max-width:100%;display:flex;align-items:center;gap:8px;margin:16px 4px 0;color:rgba(255,255,255,.45);font-size:8px;letter-spacing:.04em}
.musabaqa-source-note span{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:var(--modern-accent-soft);color:var(--modern-accent);font-weight:900}

@media(max-width:900px){
  .musabaqa-plan-hero{grid-template-columns:1fr;align-items:start}
  .musabaqa-plan-stats{justify-self:start}
  .musabaqa-program-grid{grid-template-columns:1fr}
  .musabaqa-committee>div{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  body.page-musabaqa,body.page-program-plan{--page-image:url("../kauzariyya9.png");background:
    linear-gradient(180deg, rgba(4, 10, 7, .72), rgba(3, 8, 5, .92)),
    linear-gradient(90deg, rgba(4, 12, 7, .78), rgba(4, 12, 7, .55)),
    var(--page-image) center / cover no-repeat !important}
  body.page-musabaqa:before,body.page-program-plan:before{content:"";position:fixed;inset:0;height:100vh;z-index:-1;pointer-events:none;background:
    linear-gradient(180deg, rgba(4, 10, 7, .68), rgba(3, 8, 5, .92)),
    var(--page-image) center / cover no-repeat !important;filter:none !important}
  body.page-musabaqa .musabaqa-plan{padding:90px 0 88px}
  .musabaqa-plan-hero{gap:23px;margin-bottom:12px;padding:8px 3px 22px}
  .musabaqa-plan-hero h1{font-size:54px}
  .musabaqa-plan-hero>div:first-child>p:last-child{margin-top:18px;font-size:10px}
  .musabaqa-plan-stats{width:100%}
  .musabaqa-plan-stats span{min-width:0;flex:1;padding:15px;border-radius:13px}
  .musabaqa-plan-stats strong{font-size:32px}
  .musabaqa-program-grid{gap:10px}
  .musabaqa-program-section,.musabaqa-committee{border-radius:16px}
  .musabaqa-program-section>header{padding:20px 17px 16px}
  .musabaqa-program-section>header h2{font-size:31px}
  .musabaqa-program-list{padding:6px}
  .musabaqa-program-list article{grid-template-columns:32px minmax(0,1fr) 26px;gap:9px;min-height:70px;padding:10px 9px}
  .musabaqa-program-list article>b{width:31px;height:31px}
  .musabaqa-program-list h3{font-size:15px}
  .musabaqa-committee{margin-top:10px;padding:20px 14px}
  .musabaqa-committee>header{grid-template-columns:1fr;gap:13px;margin-bottom:14px;padding:0 3px 17px}
  .musabaqa-committee>header h2{font-size:39px}
  .musabaqa-committee>div{grid-template-columns:1fr;gap:7px}
  .musabaqa-committee article{min-height:0;padding:15px}
  .musabaqa-committee h3{margin-top:18px}

  .tab-program:before{content:"";position:absolute;inset:2px 4px 1px;border:1.5px solid currentColor;border-radius:3px}
  .tab-program:after{content:"";position:absolute;left:7px;right:7px;top:7px;height:1.5px;background:currentColor;box-shadow:0 4px 0 currentColor,0 8px 0 currentColor}
}

/* Laptop navigation and programme proportions. */
@media(min-width:901px) and (max-width:1180px){
  body:not(.page-admin) .site-header{width:calc(100% - 24px)!important;grid-template-columns:minmax(155px,1fr) auto auto!important;gap:8px!important}
  body:not(.page-admin) .site-logo{gap:8px}
  body:not(.page-admin) .site-logo img{width:36px;height:36px}
  body:not(.page-admin) .site-logo b{font-size:10px}
  body:not(.page-admin) .site-logo small{font-size:6px}
  body:not(.page-admin) .site-nav a{padding-inline:10px!important}
  body.page-musabaqa .musabaqa-plan{padding-top:102px}
  .musabaqa-program-grid{grid-template-columns:minmax(330px,.8fr) minmax(430px,1.2fr)}
  .musabaqa-committee>div{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Tablet header: keep every route reachable without a hidden hamburger. */
@media(min-width:561px) and (max-width:900px){
  body:not(.page-admin) .site-header{
    left:10px!important;
    right:auto!important;
    width:calc(100% - 20px)!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    gap:10px!important;
    padding:7px 8px!important;
  }
  body:not(.page-admin) .site-logo{gap:7px}
  body:not(.page-admin) .site-logo img{width:34px;height:34px;padding:5px}
  body:not(.page-admin) .site-logo b{font-size:9px}
  body:not(.page-admin) .site-logo small{display:none}
  body:not(.page-admin) .site-nav,
  body:not(.page-admin) .site-nav.open{
    position:static!important;
    width:100%!important;
    min-width:0!important;
    min-height:40px!important;
    display:flex!important;
    justify-content:flex-end!important;
    gap:2px!important;
    overflow-x:auto!important;
    padding:3px!important;
    border:1px solid rgba(255,255,255,.08)!important;
    border-radius:10px!important;
    background:rgba(255,255,255,.035)!important;
    scrollbar-width:none;
  }
  body:not(.page-admin) .site-nav::-webkit-scrollbar{display:none}
  body:not(.page-admin) .site-nav a{
    height:34px!important;
    min-height:34px!important;
    flex:0 0 auto!important;
    padding:0 8px!important;
    border-radius:8px!important;
    font-size:7px!important;
    opacity:1!important;
    transform:none!important;
    animation:none!important;
  }
  body:not(.page-admin) .menu-toggle{display:none!important}
  body.page-musabaqa .musabaqa-plan{padding-top:92px}
  .musabaqa-plan-hero h1{font-size:68px}
  .musabaqa-program-section>header{padding-inline:21px}
}

@media(max-width:560px){
  body:not(.page-admin) .site-nav{display:none!important}
  body.page-musabaqa .site-header{position:fixed!important}

  body.page-home .site-footer.home-institution-footer{padding-bottom:70px!important}
}

@media(max-width:400px){
  body.page-musabaqa .musabaqa-plan{padding-inline:1px}
  .musabaqa-plan-hero h1{font-size:clamp(45px,14vw,52px)}
  .musabaqa-plan-stats{gap:7px}
  .musabaqa-plan-stats span{padding:13px 11px}
  .musabaqa-plan-stats strong{font-size:29px}
  .musabaqa-program-section>header>span{display:none}
  .musabaqa-program-list article{grid-template-columns:30px minmax(0,1fr);padding-inline:8px}
  .musabaqa-program-list article>span{display:none}
  .musabaqa-source-note{font-size:7px}
}

/* Home story chapter: final alignment and animated verse card. */
body.page-home .home-story {
  width: min(1180px, calc(100% - 44px));
  max-width: 1180px;
  min-height: 0;
  margin: 24px auto 0;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  align-items: stretch;
  padding: 0;
}

body.page-home .home-story-visual {
  width: 100%;
  max-width: none;
  min-height: 600px;
  aspect-ratio: auto;
  align-self: stretch;
}

body.page-home .home-story-content {
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: clamp(40px, 5vw, 68px);
}

body.page-home .home-story-content h2 {
  max-width: 11.5ch;
}

body.page-home .home-story-copy {
  max-width: 58ch;
  margin: 0;
}

body.page-home .home-story-verse {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 28px 0 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(89, 223, 123, .25);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(8, 20, 13, .96), rgba(4, 12, 8, .98));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}

body.page-home .home-story-verse::before,
body.page-home .home-story-verse::after {
  display: none !important;
}

html body.page-home .home-story-verse .home-story-verse-head,
body.page-home .home-story-verse-head,
.home-story-verse-head,
.home-story-verse header {
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-flow: row nowrap !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  gap: 12px;
  padding: 16px 24px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  background: rgba(255, 255, 255, .015) !important;
}

html body.page-home .home-story-verse .home-story-verse-head span,
body.page-home .home-story-verse-head span,
.home-story-verse-head span,
.home-story-verse header span {
  display: block !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  color: rgba(255, 255, 255, .6) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body.page-home .home-story-verse .home-story-verse-head b,
body.page-home .home-story-verse-head b,
.home-story-verse-head b,
.home-story-verse header b {
  background: rgba(89, 223, 123, .1) !important;
  border: 1px solid rgba(89, 223, 123, .25) !important;
  padding: 4px 12px !important;
  border-radius: 99px !important;
  color: #59df7b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  word-wrap: normal !important;
  overflow-wrap: normal !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 0 0 auto !important;
  max-width: none !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

body.page-home .home-story-verse > p[dir="rtl"] {
  min-height: 0 !important;
  padding: 36px 20px 30px !important;
  font-family: "Amiri Quran", "Amiri", "Scheherazade New", "Noto Naskh Arabic", serif !important;
  font-size: clamp(20px, 2.2vw, 32px) !important;
  font-weight: 700 !important;
  line-height: 1.8 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  color: #59df7b !important;
  text-shadow: none !important;
}

body.page-home .home-story-verse > p[dir="rtl"] > span {
  display: inline !important;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  white-space: nowrap !important;
  color: #59df7b !important;
  font-family: "Amiri Quran", "Amiri", "Scheherazade New", "Noto Naskh Arabic", serif !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  line-height: inherit !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  text-shadow: none !important;
}

body.page-home .home-story-verse > p[dir="rtl"] > span:first-child,
body.page-home .home-story-verse > p[dir="rtl"] > span:last-child {
  color: #59df7b !important;
  text-shadow: none !important;
}

body.page-home .home-story-verse > footer,
.home-story-verse > footer,
.home-story-verse footer {
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 16px;
  padding: 16px 24px !important;
  border-top: 1px solid rgba(255, 255, 255, .08) !important;
  background: rgba(0, 0, 0, .2) !important;
}

body.page-home .home-story-verse > footer span,
.home-story-verse > footer span,
.home-story-verse footer span {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none;
  padding: 0;
  border: 0;
  color: rgba(255, 255, 255, .85) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  font-style: normal !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.page-home .home-story-verse > footer cite,
.home-story-verse > footer cite,
.home-story-verse footer cite {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  margin: 0 0 0 auto !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  background: rgba(89, 223, 123, .1) !important;
  border: 1px solid rgba(89, 223, 123, .22) !important;
  color: #59df7b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  word-wrap: normal !important;
  overflow-wrap: normal !important;
  max-width: none !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
}

@keyframes verseWordIn {
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@media(max-width:900px) {
  body.page-home .home-story {
    width: calc(100% - 28px);
    grid-template-columns: minmax(240px, .82fr) minmax(0, 1.18fr);
  }
  body.page-home .home-story-visual { min-height: 560px; }
  body.page-home .home-story-content { padding: 38px 32px; }
  body.page-home .home-story-content h2 { font-size: clamp(38px, 5.5vw, 50px); }
  html body.page-home .home-story-verse .home-story-verse-head, body.page-home .home-story-verse-head, .home-story-verse-head, .home-story-verse header { display: flex !important; flex-flow: row nowrap !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 14px 18px !important; gap: 10px !important; }
  html body.page-home .home-story-verse .home-story-verse-head span, body.page-home .home-story-verse-head span, .home-story-verse-head span, .home-story-verse header span { display: block !important; flex: 1 1 0% !important; min-width: 0 !important; max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: none !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  html body.page-home .home-story-verse .home-story-verse-head b, body.page-home .home-story-verse-head b, .home-story-verse-head b, .home-story-verse header b { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; margin: 0 0 0 auto !important; white-space: nowrap !important; word-break: keep-all !important; word-wrap: normal !important; overflow-wrap: normal !important; max-width: none !important; width: auto !important; height: auto !important; line-height: 1 !important; flex-shrink: 0 !important; }
  html body.page-home .home-story-verse > footer, body.page-home .home-story-verse > footer, .home-story-verse > footer, .home-story-verse footer { display: flex !important; flex-flow: row nowrap !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; gap: 10px !important; padding: 14px 18px !important; }
  html body.page-home .home-story-verse > footer span, body.page-home .home-story-verse > footer span, .home-story-verse > footer span, .home-story-verse footer span { display: block !important; flex: 1 1 0% !important; min-width: 0 !important; max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  html body.page-home .home-story-verse > footer cite, body.page-home .home-story-verse > footer cite, .home-story-verse > footer cite, .home-story-verse footer cite { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; margin: 0 0 0 auto !important; white-space: nowrap !important; word-break: keep-all !important; word-wrap: normal !important; overflow-wrap: normal !important; max-width: none !important; width: auto !important; height: auto !important; line-height: 1 !important; flex-shrink: 0 !important; }
}

@media(max-width:700px) {
  body.page-home .home-story {
    width: 100%;
    grid-template-columns: 1fr;
    margin-top: 12px;
  }
  body.page-home .home-story-visual { min-height: 300px; }
  body.page-home .home-story-content { padding: 30px 20px 24px; }
  body.page-home .home-story-verse { margin-top: 24px; border-radius: 18px; }
  html body.page-home .home-story-verse .home-story-verse-head, body.page-home .home-story-verse-head, .home-story-verse-head, .home-story-verse header { display: flex !important; flex-flow: row nowrap !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 12px 14px !important; gap: 8px !important; }
  html body.page-home .home-story-verse .home-story-verse-head span, body.page-home .home-story-verse-head span, .home-story-verse-head span, .home-story-verse header span { display: block !important; flex: 1 1 0% !important; min-width: 0 !important; max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: none !important; font-size: 7.5px !important; letter-spacing: .12em !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  html body.page-home .home-story-verse .home-story-verse-head b, body.page-home .home-story-verse-head b, .home-story-verse-head b, .home-story-verse header b { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; margin: 0 0 0 auto !important; font-size: 8px !important; padding: 3px 10px !important; letter-spacing: .12em !important; white-space: nowrap !important; word-break: keep-all !important; word-wrap: normal !important; overflow-wrap: normal !important; max-width: none !important; width: auto !important; height: auto !important; line-height: 1 !important; flex-shrink: 0 !important; }
  body.page-home .home-story-verse > p[dir="rtl"] { gap: 0 .28em !important; padding: 24px 14px 20px !important; font-size: clamp(20px, 5.5vw, 26px) !important; line-height: 1.75 !important; }
  html body.page-home .home-story-verse > footer, body.page-home .home-story-verse > footer, .home-story-verse > footer, .home-story-verse footer { display: flex !important; flex-flow: row nowrap !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; gap: 8px !important; padding: 12px 14px !important; }
  html body.page-home .home-story-verse > footer span, body.page-home .home-story-verse > footer span, .home-story-verse > footer span, .home-story-verse footer span { display: block !important; flex: 1 1 0% !important; min-width: 0 !important; max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; font-size: 9.5px !important; line-height: 1.35 !important; letter-spacing: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  html body.page-home .home-story-verse > footer cite, body.page-home .home-story-verse > footer cite, .home-story-verse > footer cite, .home-story-verse footer cite { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; margin: 0 0 0 auto !important; padding: 4px 8px !important; font-size: 7px !important; letter-spacing: .08em !important; white-space: nowrap !important; word-break: keep-all !important; word-wrap: normal !important; overflow-wrap: normal !important; max-width: none !important; width: auto !important; height: auto !important; line-height: 1 !important; flex-shrink: 0 !important; }
}

@media(prefers-reduced-motion:reduce) {
  body.page-home .home-story-verse > p[dir="rtl"] > span {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none !important;
  }
}

.site-motion-disabled body.page-home .home-story-verse > p[dir="rtl"] > span,
html.performance-lite body.page-home .home-story-verse > p[dir="rtl"] > span {
  opacity: 1;
  filter: none;
  transform: none;
  animation: none !important;
}

/* ==========================================================================
   PARTICIPANTS & LIVE PROGRAM REDESIGN (Modern Institutional Theme)
   ========================================================================== */

body:not(.page-admin) .participant-shell,
body:not(.page-admin) .schedule-shell {
  padding-top: 100px !important;
}

body:not(.page-admin) .participant-title,
body:not(.page-admin) .schedule-head {
  align-items: end !important;
  margin-bottom: 30px !important;
}

body:not(.page-admin) .participant-title h1,
body:not(.page-admin) .students-page-hero h1,
body:not(.page-admin) .schedule-head h1 {
  font-family: 'Ubuntu', sans-serif !important;
  font-size: clamp(58px, 8.5vw, 92px) !important;
  font-weight: 700 !important;
  letter-spacing: -.048em !important;
  line-height: .84 !important;
  color: #fff !important;
  margin: 4px 0 12px 0 !important;
}

body:not(.page-admin) .participant-title span,
body:not(.page-admin) .clock-block span {
  color: var(--modern-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

body:not(.page-admin) .clock-block strong {
  font-family: "Ubuntu", sans-serif !important;
  font-weight: 800 !important;
  font-size: 38px !important;
  color: var(--modern-accent) !important;
  text-shadow: 0 0 20px rgba(89, 223, 123, 0.3) !important;
}

/* Live Speaker Showcase Panel */
body:not(.page-admin) .speaker-card {
  position: relative !important;
  min-height: 480px !important;
  padding: 32px !important;
  border: 1px solid var(--modern-line-strong) !important;
  border-radius: 28px !important;
  background: rgba(8, 20, 13, 0.82) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(89, 223, 123, 0.15) !important;
  backdrop-filter: blur(24px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  overflow: hidden !important;
}

body:not(.page-admin) .speaker-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(circle at top left, rgba(89, 223, 123, 0.15), transparent 65%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

body:not(.page-admin) .speaker-card > * {
  position: relative !important;
  z-index: 1 !important;
}

body:not(.page-admin) .live-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  border: 1px solid rgba(89, 223, 123, 0.3) !important;
  border-radius: 99px !important;
  background: rgba(89, 223, 123, 0.1) !important;
  color: var(--modern-accent) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  width: max-content !important;
}

body:not(.page-admin) .live-label i {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--modern-accent) !important;
  box-shadow: 0 0 10px var(--modern-accent) !important;
  animation: pulse-green 1.5s infinite !important;
}

@keyframes pulse-green {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.6; }
}

body:not(.page-admin) .speaker-card > div {
  margin: auto 0 !important;
  padding: 24px 0 !important;
}

body:not(.page-admin) .speaker-card p {
  color: rgba(140, 224, 148, 0.8) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

body:not(.page-admin) .speaker-card h2 {
  font-family: 'Ubuntu', sans-serif !important;
  font-size: clamp(36px, 4.2vw, 56px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -.03em !important;
  color: #fff !important;
  text-transform: capitalize !important;
  margin: 0 !important;
  overflow-wrap: break-word !important;
}

body:not(.page-admin) .speaker-card footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 20px 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 18px !important;
  background: rgba(0, 0, 0, 0.25) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  margin-top: 16px !important;
}

body:not(.page-admin) .speaker-card footer strong {
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  color: var(--modern-accent) !important;
  letter-spacing: -.02em !important;
}

body:not(.page-admin) .speaker-card footer span {
  color: var(--modern-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Right-Hand Participant Roster Panel */
body:not(.page-admin) .participant-list {
  padding: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 28px !important;
  background: rgba(8, 20, 13, 0.6) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

body:not(.page-admin) .list-head h2 {
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  color: #fff !important;
}

body:not(.page-admin) .list-head span {
  padding: 4px 10px !important;
  border-radius: 99px !important;
  background: rgba(89, 223, 123, 0.1) !important;
  color: var(--modern-accent) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

body:not(.page-admin) .participant-search {
  height: 48px !important;
  margin: 4px 0 6px !important;
  border: 1px solid var(--modern-line) !important;
  border-radius: 14px !important;
  background: rgba(0, 0, 0, 0.4) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body:not(.page-admin) .participant-search:focus-within {
  border-color: var(--modern-accent) !important;
  box-shadow: 0 0 0 3px rgba(89, 223, 123, 0.15) !important;
}

body:not(.page-admin) .participant-search input {
  font-size: 13px !important;
  color: #fff !important;
}

body:not(.page-admin) .participant-search button {
  background: transparent !important;
  color: var(--modern-muted) !important;
  transition: color 0.2s ease !important;
}

body:not(.page-admin) .participant-search button:hover {
  color: var(--modern-accent) !important;
}

body:not(.page-admin) .participant-program-filter {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 6px !important;
}

body:not(.page-admin) .participant-program-filter > span {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--modern-muted) !important;
}

body:not(.page-admin) .participant-program-filter select {
  height: 42px !important;
  padding: 0 14px !important;
  border: 1px solid var(--modern-line) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

body:not(.page-admin) .participant-results-scroll {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  max-height: 480px !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
}

body:not(.page-admin) .participant-row {
  min-height: 74px !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

body:not(.page-admin) .participant-row:hover {
  transform: translateY(-2px) scale(1.005) !important;
  border-color: rgba(89, 223, 123, 0.3) !important;
  background: rgba(89, 223, 123, 0.07) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25) !important;
}

body:not(.page-admin) .participant-row.active {
  transform: translateX(4px) !important;
  border-color: var(--modern-accent) !important;
  background: linear-gradient(90deg, rgba(89, 223, 123, 0.15), rgba(89, 223, 123, 0.03)) !important;
  box-shadow: 0 8px 24px rgba(89, 223, 123, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

body:not(.page-admin) .participant-row time {
  font-family: "Ubuntu", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--modern-muted) !important;
}

body:not(.page-admin) .participant-row.active time {
  color: var(--modern-accent) !important;
}

body:not(.page-admin) .participant-row span strong {
  font-family: "Ubuntu", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-transform: capitalize !important;
}

body:not(.page-admin) .participant-row span small {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin-top: 2px !important;
}

body:not(.page-admin) .participant-row b {
  width: 36px !important;
  height: 36px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  background: rgba(0, 0, 0, 0.3) !important;
  font-family: "Ubuntu", sans-serif !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  color: #fff !important;
}

body:not(.page-admin) .participant-row.active b {
  border-color: var(--modern-accent) !important;
  background: var(--modern-accent) !important;
  color: #07100b !important;
  box-shadow: 0 0 12px rgba(89, 223, 123, 0.4) !important;
}

body:not(.page-admin) .reporting-note {
  margin-top: 8px !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  font-size: 11px !important;
  color: var(--modern-muted) !important;
}

/* ==========================================================================
   ALL STUDENTS (COLLEGE MASTER ROSTER) DIRECTORY REDESIGN
   ========================================================================== */

body:not(.page-admin) .public-student-directory {
  margin: 40px 0 60px !important;
  padding: 36px !important;
  border: 1px solid var(--modern-line-strong) !important;
  border-radius: 32px !important;
  background: rgba(8, 20, 13, 0.78) !important;
  backdrop-filter: blur(24px) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(89, 223, 123, 0.15) !important;
}

body:not(.page-admin) .public-student-directory > header {
  min-height: auto !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin-bottom: 24px !important;
  padding: 12px 4px 28px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body:not(.page-admin) .public-student-directory > header .overline {
  margin: 0 0 10px !important;
  color: var(--modern-accent) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

body:not(.page-admin) .public-student-directory > header h2 {
  font-family: "Ubuntu", sans-serif !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(44px, 6vw, 76px) !important;
  font-weight: 800 !important;
  line-height: .92 !important;
  letter-spacing: -.04em !important;
}

body:not(.page-admin) .public-student-directory > header p:last-child {
  margin: 14px 0 0 !important;
  color: var(--modern-muted) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

body:not(.page-admin) .public-student-directory > header > strong {
  display: grid !important;
  justify-items: end !important;
  align-self: flex-end !important;
  margin-bottom: 4px !important;
  font-family: "Ubuntu", sans-serif !important;
  font-weight: 800 !important;
  color: var(--modern-accent) !important;
  font-size: 44px !important;
  line-height: .85 !important;
  text-shadow: 0 0 20px rgba(89, 223, 123, 0.3) !important;
}

body:not(.page-admin) .public-student-directory > header > strong small {
  margin-top: 8px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

body:not(.page-admin) .public-student-filters {
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) 200px !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
}

body:not(.page-admin) .public-student-filters label {
  display: grid !important;
  gap: 8px !important;
}

body:not(.page-admin) .public-student-filters label > span {
  color: var(--modern-muted) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

body:not(.page-admin) .public-student-filters input,
body:not(.page-admin) .public-student-filters select {
  width: 100% !important;
  height: 48px !important;
  padding: 0 16px !important;
  border: 1px solid var(--modern-line) !important;
  border-radius: 14px !important;
  outline: 0 !important;
  background: rgba(0, 0, 0, 0.4) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body:not(.page-admin) .public-student-filters input:focus,
body:not(.page-admin) .public-student-filters select:focus {
  border-color: var(--modern-accent) !important;
  box-shadow: 0 0 0 3px rgba(89, 223, 123, 0.15) !important;
}

body:not(.page-admin) .public-student-grid {
  max-height: 760px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  overflow-y: auto !important;
  padding-right: 6px !important;
}

body:not(.page-admin) .public-student-grid article {
  content-visibility: auto !important;
  contain-intrinsic-size: 110px !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 85px minmax(0, 1fr) !important;
  gap: 16px !important;
  padding: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease !important;
}

body:not(.page-admin) .public-student-grid article:hover {
  transform: translateY(-3px) scale(1.008) !important;
  border-color: rgba(89, 223, 123, 0.3) !important;
  background: rgba(89, 223, 123, 0.06) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(89, 223, 123, 0.1) !important;
}

body:not(.page-admin) .public-student-grid article > b {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: max-content !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(89, 223, 123, 0.25) !important;
  border-radius: 12px !important;
  background: rgba(89, 223, 123, 0.08) !important;
  color: var(--modern-accent) !important;
  font-family: "Ubuntu", sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
}

body:not(.page-admin) .public-student-grid article > div {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

body:not(.page-admin) .public-student-grid h3 {
  overflow: hidden !important;
  margin: 0 0 6px !important;
  font-family: "Ubuntu", sans-serif !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-transform: capitalize !important;
}

body:not(.page-admin) .public-student-grid article p {
  overflow: hidden !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 12px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-transform: capitalize !important;
}

body:not(.page-admin) .public-student-grid article p span {
  font-size: 13px !important;
  color: #fff !important;
}

body:not(.page-admin) .public-student-grid footer {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--modern-text) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

body:not(.page-admin) .public-student-grid footer i {
  margin-left: auto !important;
  padding: 4px 10px !important;
  border-radius: 99px !important;
  border: 1px solid rgba(89, 223, 123, 0.3) !important;
  background: rgba(89, 223, 123, 0.12) !important;
  color: var(--modern-accent) !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

body:not(.page-admin) .public-student-grid footer i.inactive,
body:not(.page-admin) .public-student-grid footer i.left {
  border-color: rgba(255, 100, 100, 0.3) !important;
  background: rgba(255, 100, 100, 0.1) !important;
  color: #ffaaaa !important;
}

body:not(.page-admin) .public-student-grid footer i.graduated {
  border-color: rgba(100, 175, 255, 0.3) !important;
  background: rgba(100, 175, 255, 0.1) !important;
  color: #a9d2ff !important;
}

/* --- SIMPLE POWERED ANIMATIONS & MICRO-INTERACTIONS --- */

@keyframes poweredFadeSlideUp {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes poweredAmbientGlow {
  0%, 100% {
    transform: scale(1) translate3d(0, 0, 0);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.15) translate3d(12px, 12px, 0);
    opacity: 1;
  }
}

@keyframes poweredActivePulse {
  0%, 100% {
    box-shadow: 0 8px 24px rgba(89, 223, 123, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  50% {
    box-shadow: 0 8px 30px rgba(89, 223, 123, 0.38), 0 0 20px rgba(89, 223, 123, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
}

/* Staggered Entrance Animations for Directory Components */
body:not(.page-admin) .participant-title {
  animation: poweredFadeSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both !important;
}
body:not(.page-admin) .speaker-card {
  animation: poweredFadeSlideUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both !important;
}
body:not(.page-admin) .participant-list {
  animation: poweredFadeSlideUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both !important;
}
body:not(.page-admin) .directory-chapter-heading,
body:not(.page-admin) .public-student-directory {
  animation: poweredFadeSlideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.32s both !important;
}

/* Ambient Energy Glow on Active Speaker Card */
body:not(.page-admin) .speaker-card::before {
  animation: poweredAmbientGlow 7s ease-in-out infinite !important;
  transform-origin: top left !important;
}

/* Enhanced Powered Hover & Active States for Participant Roster Rows */
body:not(.page-admin) .participant-row:hover {
  transform: translate3d(6px, -2px, 0) scale(1.008) !important;
  border-color: rgba(89, 223, 123, 0.45) !important;
  background: rgba(89, 223, 123, 0.085) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.4), 0 0 18px rgba(89, 223, 123, 0.18) !important;
}

body:not(.page-admin) .participant-row.active {
  animation: poweredActivePulse 3s infinite ease-in-out !important;
}

/* Enhanced Powered Hover Transitions for Student Directory Cards */
body:not(.page-admin) .public-student-grid article:hover {
  transform: translate3d(0, -5px, 0) scale(1.012) !important;
  border-color: rgba(89, 223, 123, 0.45) !important;
  background: linear-gradient(135deg, rgba(89, 223, 123, 0.09), rgba(255, 255, 255, 0.03)) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45), 0 0 22px rgba(89, 223, 123, 0.15), inset 0 1px 0 rgba(89, 223, 123, 0.2) !important;
}


@media(max-width: 700px) {
  body:not(.page-admin) .public-student-directory {
    padding: 20px !important;
    border-radius: 24px !important;
  }
  body:not(.page-admin) .public-student-filters {
    grid-template-columns: 1fr !important;
  }
  body:not(.page-admin) .public-student-grid {
    grid-template-columns: 1fr !important;
    max-height: 640px !important;
  }
}

/* August 2026 visual refresh: Qur'anic typography, chromatic teams and
   a stronger but restrained navigation motion system. */
:root {
  --festival-blue: #389cf5;
  --festival-magenta: #c400f5;
  --festival-yellow: #bced16;
  --festival-lime: #8fe312;
  --arabic-display-font: "Amiri Quran", "Amiri", "Scheherazade New", "Noto Naskh Arabic", serif;
}

body.page-home .home-story-verse {
  isolation: isolate;
  border: 1px solid rgba(89, 223, 123, .25);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(8, 20, 13, .96), rgba(4, 12, 8, .98));
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}

body.page-home .home-story-verse::before,
body.page-home .home-story-verse::after {
  display: none !important;
}

html body.page-home .home-story-verse .home-story-verse-head {
  padding: 16px 24px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  background: rgba(255, 255, 255, .015) !important;
}

html body.page-home .home-story-verse .home-story-verse-head span {
  color: rgba(255, 255, 255, .6) !important;
}

html body.page-home .home-story-verse .home-story-verse-head b {
  width: auto !important;
  height: auto !important;
  margin-left: auto !important;
  padding: 4px 12px !important;
  border-color: rgba(89, 223, 123, .25) !important;
  border-radius: 99px !important;
  background: rgba(89, 223, 123, .1) !important;
  color: #59df7b !important;
  box-shadow: none !important;
}

body.page-home .home-story-verse > p[dir="rtl"] {
  min-height: 0 !important;
  padding: 36px 20px 30px !important;
  font-family: var(--arabic-display-font) !important;
  font-size: clamp(19px, 2.3vw, 29px) !important;
  font-weight: 700 !important;
  line-height: 1.75 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  color: #59df7b !important;
  text-shadow: none !important;
}

body.page-home .home-story-verse > p[dir="rtl"] > span {
  display: inline !important;
  font-family: var(--arabic-display-font) !important;
  font-size: inherit !important;
  font-style: normal !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  color: #59df7b !important;
  text-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
}

body.page-home .home-story-verse > p[dir="rtl"] > span:first-child,
body.page-home .home-story-verse > p[dir="rtl"] > span:last-child {
  color: #59df7b !important;
  text-shadow: none !important;
}

body.page-home .home-story-verse:hover > p[dir="rtl"] > span:first-child,
body.page-home .home-story-verse:hover > p[dir="rtl"] > span:last-child {
  color: #59df7b !important;
  transform: none !important;
}

html body.page-home .home-story-verse > footer {
  width: 100% !important;
  margin: 0 !important;
  padding: 16px 24px !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 0;
}

html body.page-home .home-story-verse > footer span::before {
  content: none;
}

body.page-home .home-musabaqa-prayer > span {
  color: #69ed89 !important;
  font-family: var(--arabic-display-font) !important;
  font-size: clamp(32px, 3.4vw, 42px) !important;
  font-weight: 400 !important;
  line-height: 1.62 !important;
  letter-spacing: 0 !important;
  font-feature-settings: "liga" 1, "calt" 1;
  text-shadow: 0 0 24px rgba(89, 223, 123, .2);
}

body:not(.page-admin) .festival-date {
  min-width: 154px !important;
  padding: 8px 11px !important;
  border: 1px solid rgba(89, 223, 123, .13);
  border-radius: 11px;
  background: rgba(89, 223, 123, .045);
  text-align: left !important;
}

body:not(.page-admin) .festival-date span {
  display: block;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, .38) !important;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body:not(.page-admin) .festival-date b {
  display: block;
  color: #fff;
  font-size: 9px !important;
  line-height: 1.1;
  white-space: nowrap;
}

/* Team colors now behave as identities rather than small decorative dots. */
body.page-scoreboard .leader-feature {
  isolation: isolate;
  border-top: 4px solid var(--team);
  background:
    radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--team) 28%, transparent), transparent 45%),
    linear-gradient(160deg, color-mix(in srgb, var(--team) 14%, #101318), #050a08 72%) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--team) 45%, transparent);
}

body.page-scoreboard .leader-feature::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 240px;
  height: 240px;
  right: -115px;
  bottom: -120px;
  border: 1px solid color-mix(in srgb, var(--team) 24%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 44px color-mix(in srgb, var(--team) 4%, transparent), 0 0 0 88px color-mix(in srgb, var(--team) 2%, transparent);
}

body.page-scoreboard .leader-live,
body.page-scoreboard .leader-advantage {
  border-color: color-mix(in srgb, var(--team) 32%, rgba(255, 255, 255, .12));
  background: color-mix(in srgb, var(--team) 9%, rgba(255, 255, 255, .025));
}

body.page-scoreboard .leader-live,
body.page-scoreboard .leader-score-block strong,
body.page-scoreboard .leader-advantage strong {
  color: color-mix(in srgb, var(--team) 76%, #fff);
}

body.page-scoreboard .leader-feature .score-dual-bar i {
  background: linear-gradient(90deg, var(--team), color-mix(in srgb, var(--team) 58%, #fff)) !important;
  box-shadow: 0 0 20px color-mix(in srgb, var(--team) 48%, transparent) !important;
}

body.page-scoreboard .ranking-row {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 92px;
  border-color: color-mix(in srgb, var(--team) 25%, rgba(255, 255, 255, .09)) !important;
  border-top: 3px solid var(--team) !important;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--team) 13%, transparent), transparent 50%),
    linear-gradient(115deg, color-mix(in srgb, var(--team) 8%, #0b0d0c), rgba(255, 255, 255, .018)) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--team) 18%, transparent), 0 12px 30px rgba(0, 0, 0, .15) !important;
}

body.page-scoreboard .ranking-row::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 -35%;
  width: 30%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--team) 14%, transparent), transparent);
  transform: skewX(-18deg);
  transition: left .7s cubic-bezier(.16, 1, .3, 1);
}

body.page-scoreboard .ranking-row:hover {
  transform: translateY(-4px) scale(1.008) !important;
  border-color: color-mix(in srgb, var(--team) 58%, rgba(255, 255, 255, .12)) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .32), 0 0 25px color-mix(in srgb, var(--team) 12%, transparent) !important;
}

body.page-scoreboard .ranking-row:hover::after { left: 130%; }

body.page-scoreboard .ranking-row .team-signal {
  border-color: color-mix(in srgb, var(--team) 55%, rgba(255, 255, 255, .12)) !important;
  background: color-mix(in srgb, var(--team) 13%, #0a0d0b) !important;
  box-shadow: 0 0 22px color-mix(in srgb, var(--team) 12%, transparent);
}

body.page-scoreboard .ranking-row .score-dual-bar i {
  background: linear-gradient(90deg, var(--team), color-mix(in srgb, var(--team) 60%, #fff)) !important;
  box-shadow: 0 0 13px color-mix(in srgb, var(--team) 52%, transparent) !important;
}

/* High-impact, low-complexity navbar motion. */
body:not(.page-admin) .site-header {
  isolation: isolate;
  overflow: visible !important;
  animation: augustHeaderIn .72s cubic-bezier(.16, 1, .3, 1) both;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), border-color .35s ease, background .35s ease, box-shadow .35s ease !important;
}

body:not(.page-admin) .site-header::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: -28%;
  width: 18%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(111, 244, 145, .12), transparent);
  transform: skewX(-24deg);
  animation: augustHeaderSweep 1.1s .45s cubic-bezier(.16, 1, .3, 1) both;
  border-radius: 18px;
}

body:not(.page-admin) .site-header > * {
  position: relative;
  z-index: 1;
}

body:not(.page-admin) .site-header.is-scrolled {
  transform: translateY(-3px);
  border-color: rgba(89, 223, 123, .22) !important;
  background: rgba(3, 12, 7, .94) !important;
  box-shadow: 0 19px 60px rgba(0, 0, 0, .4), 0 0 0 1px rgba(89, 223, 123, .035) !important;
}

@media(min-width: 1181px) {
  body:not(.page-admin) .site-header {
    width: min(1200px, calc(100% - 32px)) !important;
    max-width: 1200px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
}

body:not(.page-admin) .site-logo img {
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease !important;
}

body:not(.page-admin) .site-logo:hover img {
  transform: rotate(-5deg) scale(1.07);
  box-shadow: 0 8px 26px rgba(89, 223, 123, .2);
}

@media(min-width: 760px) {
  body:not(.page-admin) .site-nav a {
    will-change: transform;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), color .25s ease, background .25s ease, box-shadow .3s ease !important;
  }

  body:not(.page-admin) .site-nav a::before,
  body:not(.page-admin) .site-nav a::after {
    display: none !important;
    content: none !important;
  }

  body:not(.page-admin) .site-nav a:hover {
    color: #fff !important;
    background: rgba(9, 174, 70, .16) !important;
    border-color: rgba(9, 174, 70, .3) !important;
    box-shadow: 0 2px 10px rgba(9, 174, 70, .2) !important;
    transform: translateY(-1px);
  }

  body:not(.page-admin) .site-nav a.active {
    color: #fff !important;
    background: linear-gradient(135deg, #09ae46, #068033) !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 18px rgba(9, 174, 70, .6), inset 0 1px 0 rgba(255, 255, 255, .3) !important;
    transform: none;
    animation: none;
  }

  body:not(.page-admin) .site-nav a:active { transform: translateY(0) scale(.96); }
}

@keyframes augustHeaderIn {
  from { opacity: 0; transform: translateY(-18px) scale(.985); filter: blur(7px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes augustHeaderSweep {
  from { left: -28%; }
  to { left: 118%; }
}

@keyframes augustNavActive {
  0%, 100% { box-shadow: 0 9px 24px rgba(68, 224, 107, .22), inset 0 1px 0 rgba(255, 255, 255, .3); }
  50% { box-shadow: 0 11px 34px rgba(68, 224, 107, .4), 0 0 18px rgba(68, 224, 107, .13), inset 0 1px 0 rgba(255, 255, 255, .38); }
}

@media(max-width: 700px) {
  body.page-home .home-story-verse {
    border-radius: 18px;
  }
  html body.page-home .home-story-verse .home-story-verse-head {
    padding: 14px 16px !important;
  }
  html body.page-home .home-story-verse .home-story-verse-head b {
    width: auto !important;
    height: auto !important;
    padding: 5px 10px !important;
  }
  body.page-home .home-story-verse > p[dir="rtl"] {
    min-height: 170px;
    padding: 27px 14px 25px !important;
    font-size: clamp(25px, 7.4vw, 33px) !important;
    line-height: 1.62 !important;
  }
  html body.page-home .home-story-verse > footer {
    margin: 0 !important;
    padding: 13px 14px !important;
  }
  body.page-home .home-musabaqa-prayer > span {
    font-size: clamp(30px, 8.8vw, 38px) !important;
  }
  body.page-scoreboard .ranking-row { min-height: 78px; }
}

@media(prefers-reduced-motion: reduce) {
  body:not(.page-admin) .site-header,
  body:not(.page-admin) .site-header::before,
  body:not(.page-admin) .site-nav a.active {
    animation: none !important;
  }
}

/* Professional access hub and site-wide scrolling performance. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  overscroll-behavior-y: auto;
}

body {
  background-attachment: scroll !important;
  overscroll-behavior-y: auto;
}

body:not(.page-admin) .site-header {
  background: rgba(5, 14, 9, .97) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.page-home .home-access {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 85% 15%, rgba(46, 160, 80, .14), transparent 45%),
    linear-gradient(150deg, rgba(8, 22, 14, .88), rgba(4, 13, 8, .95)) !important;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, .38),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

body.page-home .home-access::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: inherit;
  background-image:
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
  background-size: 42px 42px;
  box-shadow: none;
  opacity: .35;
  pointer-events: none;
}

body.page-home .home-access::after {
  display: none !important;
  content: none !important;
}

body.page-home .home-access > * {
  position: relative;
  z-index: 1;
}

body.page-home .home-access > header {
  border-bottom-color: rgba(255, 255, 255, .08);
}

body.page-home .home-access > header > span {
  border-left: none !important;
  padding-left: 0 !important;
  color: rgba(238, 247, 240, .65);
}

body.page-home .home-access-grid .feature-card {
  min-height: 152px !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: all .28s cubic-bezier(.16, 1, .3, 1) !important;
}

body.page-home .home-access-grid .feature-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(105, 231, 135, .35) !important;
  background: linear-gradient(145deg, rgba(105, 231, 135, .09), rgba(12, 30, 20, .96)) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, .32), 0 0 24px rgba(105, 231, 135, 0.12), inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}

body.page-home .home-access-grid .feature-card .card-icon {
  border-color: rgba(105, 231, 135, .25);
  background: rgba(105, 231, 135, .08);
  color: #56e47a;
}

body.page-home .home-access-grid .feature-card > b {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  color: #8bf0a2;
}

body.page-scoreboard .leaderboard-status,
body.page-home .home-footer-location,
body.page-review .review-card,
body.page-participants .speaker-card,
body.page-schedule .schedule-column {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@supports (content-visibility: auto) {
  body.page-home .home-platform-statement,
  body.page-home .home-musabaqa-about,
  body.page-home .home-story,
  body.page-home .home-access,
  body.page-home .home-event-highlights,
  body.page-scoreboard .leaderboard-glass,
  body.page-schedule .schedule-column,
  body.page-participants .participant-layout,
  body.page-participants .public-student-directory,
  body.page-musabaqa .musabaqa-program-section,
  body.page-musabaqa .musabaqa-committee,
  body.page-review .review-shell {
    content-visibility: auto;
    contain-intrinsic-size: auto 620px;
  }
}

html.nextgen-motion-ready body .motion-item:not(.motion-in) {
  filter: none !important;
  clip-path: none !important;
  transform: translate3d(var(--motion-x, 0), 22px, 0) scale(.988) !important;
}

html.nextgen-motion-ready body .motion-item.motion-in {
  filter: none !important;
  clip-path: none !important;
  transition:
    opacity .58s cubic-bezier(.16, 1, .3, 1) var(--motion-delay, 0ms),
    transform .72s cubic-bezier(.16, 1, .3, 1) var(--motion-delay, 0ms),
    border-color .24s ease,
    box-shadow .24s ease !important;
}

html.universal-text-motion body .universal-text-enter {
  filter: none !important;
  transform: translate3d(0, 16px, 0) !important;
  transition:
    opacity .5s cubic-bezier(.22, 1, .36, 1) var(--universal-text-delay, 0ms),
    transform .62s cubic-bezier(.22, 1, .36, 1) var(--universal-text-delay, 0ms) !important;
}

html.universal-text-motion body .universal-text-enter.universal-text-in {
  transform: none !important;
}

@media(max-width: 700px), (hover: none) {
  html {
    scroll-padding-top: 76px;
    scrollbar-width: none !important;
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    display: none !important;
  }
  body.page-home .home-access {
    border-radius: 22px !important;
  }
  body.page-home .home-access::after {
    border-radius: 22px 0 0 22px;
  }
  html.nextgen-motion-ready body .motion-item:not(.motion-in) {
    transform: translate3d(0, 14px, 0) !important;
  }
}

/* Arabic team identity */
:root {
  --team-arabic-font: "Reem Kufi", "Ubuntu", "Noto Naskh Arabic", sans-serif;
}

.team-name-ar,
.team-name-input,
.team-name-select {
  font-family: var(--team-arabic-font) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.team-name-ar {
  direction: rtl;
  unicode-bidi: isolate;
  line-height: 1.3 !important;
}

body.page-scoreboard .leader-identity-copy h2.team-name-ar {
  font-size: clamp(38px, 4.2vw, 54px) !important;
  text-align: left;
}

body.page-scoreboard .ranking-team h3.team-name-ar {
  font-size: 20px !important;
  text-align: left;
}

.team-name-input {
  font-size: 17px !important;
  text-align: right;
}

.team-name-select {
  font-size: 15px !important;
}

body.page-participants .team-name-ar,
body.page-admin .team-name-ar {
  display: inline-block;
}

@media(max-width: 700px) {
  body.page-scoreboard .leader-identity-copy h2.team-name-ar {
    font-size: 40px !important;
  }

  body.page-scoreboard .ranking-team h3.team-name-ar {
    font-size: 16px !important;
  }
}

/* Professional, performance-first scoreboard boxes. */
body.page-scoreboard .leaderboard-status {
  border-color: rgba(255, 255, 255, .1);
  background: #0a1710;
  box-shadow: none;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.page-scoreboard .leaderboard-glass {
  contain: layout paint;
  grid-template-columns: minmax(290px, .76fr) minmax(0, 1.24fr);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 28px;
  background: #07110c !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .34);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.page-scoreboard .leaderboard-glass::before {
  display: none;
}

body.page-scoreboard .leader-feature {
  isolation: isolate;
  min-height: 520px;
  padding: 30px;
  border: 0 !important;
  border-right: 1px solid rgba(255, 255, 255, .09) !important;
  background: #09140e !important;
  box-shadow: none !important;
  animation: scoreboardPanelIn .58s cubic-bezier(.16, 1, .3, 1) both;
}

body.page-scoreboard .leader-feature::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0 !important;
  width: 4px;
  background: var(--team) !important;
  opacity: 1 !important;
  pointer-events: none;
}

body.page-scoreboard .leader-feature::after {
  display: none !important;
}

body.page-scoreboard .leader-feature-top {
  padding-bottom: 18px;
  border-color: rgba(255, 255, 255, .09);
}

body.page-scoreboard .leader-rank b {
  color: #fff;
}

body.page-scoreboard .leader-live {
  border: 1px solid color-mix(in srgb, var(--team) 34%, rgba(255, 255, 255, .1));
  background: color-mix(in srgb, var(--team) 8%, #0b1510);
  color: color-mix(in srgb, var(--team) 72%, #fff);
  box-shadow: none;
}

body.page-scoreboard .leader-identity {
  gap: 18px;
}

body.page-scoreboard .leader-avatar {
  width: 78px;
  height: 78px;
  border: 1px solid color-mix(in srgb, var(--team) 42%, rgba(255, 255, 255, .12));
  border-radius: 18px;
  background: color-mix(in srgb, var(--team) 10%, #0b1510);
  box-shadow: none;
}

body.page-scoreboard .leader-avatar b {
  font-family: var(--team-arabic-font);
  color: var(--team);
  font-size: 32px;
  font-weight: 600;
}

body.page-scoreboard .leader-identity-copy p {
  color: rgba(255, 255, 255, .42);
}

body.page-scoreboard .leader-identity-copy h2.team-name-ar {
  margin-top: 2px;
  color: #fff;
  font-size: clamp(46px, 4.6vw, 62px) !important;
  line-height: 1.18 !important;
}

body.page-scoreboard .team-color-label {
  color: color-mix(in srgb, var(--team) 72%, #fff) !important;
  font-family: "Ubuntu", sans-serif !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

body.page-scoreboard .leader-identity-copy > .team-color-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
}

body.page-scoreboard .team-color-label i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--team);
}

body.page-scoreboard .leader-performance {
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: #0c1912;
  box-shadow: none;
}

body.page-scoreboard .leader-advantage {
  border-color: rgba(255, 255, 255, .09);
  background: transparent;
}

body.page-scoreboard .leader-score-block strong,
body.page-scoreboard .leader-advantage strong {
  color: #fff;
  text-shadow: none;
}

body.page-scoreboard .score-dual-bar,
body.page-scoreboard .leader-score-bar {
  height: 8px;
  border: 0;
  background: rgba(255, 255, 255, .08);
  box-shadow: none;
}

body.page-scoreboard .score-dual-bar i,
body.page-scoreboard .leader-feature .score-dual-bar i,
body.page-scoreboard .ranking-row .score-dual-bar i {
  background: var(--team) !important;
  box-shadow: none !important;
}

body.page-scoreboard .ranking-panel {
  padding: 28px 26px 24px;
  background: #07110c;
}

body.page-scoreboard .ranking-panel > header {
  padding: 2px 8px 18px;
}

body.page-scoreboard .ranking-list {
  gap: 10px;
}

body.page-scoreboard .ranking-row {
  position: relative;
  isolation: isolate;
  contain: layout paint;
  min-height: 94px;
  grid-template-columns: 34px 38px minmax(0, 1fr) 62px;
  gap: 13px;
  overflow: hidden;
  padding: 15px 17px;
  border: 1px solid color-mix(in srgb, var(--team) 24%, rgba(255, 255, 255, .09)) !important;
  border-top-width: 1px !important;
  border-radius: 16px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--team) 8%, #0c1711), #0a1410 42%) !important;
  box-shadow: none !important;
  transform: translate3d(0, 0, 0);
  animation: scoreboardCardIn .52s cubic-bezier(.16, 1, .3, 1) var(--delay) both;
  transition: transform .28s cubic-bezier(.16, 1, .3, 1), border-color .24s ease, background-color .24s ease !important;
}

body.page-scoreboard .ranking-row::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 13px auto 13px 0;
  width: 3px;
  border-radius: 0 99px 99px 0;
  background: var(--team);
}

body.page-scoreboard .ranking-row::after {
  display: none !important;
}

body.page-scoreboard .ranking-row:hover {
  transform: translate3d(4px, 0, 0) !important;
  border-color: color-mix(in srgb, var(--team) 54%, rgba(255, 255, 255, .12)) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--team) 12%, #0c1711), #0a1410 48%) !important;
  box-shadow: none !important;
}

body.page-scoreboard .ranking-row.is-leading {
  border-color: color-mix(in srgb, var(--team) 46%, rgba(255, 255, 255, .1)) !important;
}

body.page-scoreboard .ranking-position {
  color: rgba(255, 255, 255, .38);
  font-size: 10px;
}

body.page-scoreboard .ranking-row.is-leading .ranking-position {
  color: var(--team);
}

body.page-scoreboard .ranking-row .team-signal {
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--team) 48%, rgba(255, 255, 255, .09)) !important;
  border-radius: 11px;
  background: color-mix(in srgb, var(--team) 8%, #0d1812) !important;
  box-shadow: none;
}

body.page-scoreboard .team-signal i {
  width: 9px;
  height: 9px;
  border: 0;
  background: var(--team);
  box-shadow: none;
}

body.page-scoreboard .ranking-team > div:first-child {
  align-items: center;
}

body.page-scoreboard .ranking-team h3.team-name-ar {
  display: inline-block;
  color: #fff;
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

body.page-scoreboard .ranking-team > div:first-child .team-color-label {
  color: color-mix(in srgb, var(--team) 68%, #fff) !important;
}

body.page-scoreboard .ranking-score {
  min-width: 58px;
  color: #fff;
  font-size: 32px;
  font-weight: 700;
}

body.page-scoreboard .ranking-panel > footer {
  padding-top: 22px;
}

@keyframes scoreboardPanelIn {
  from { opacity: 0; transform: translate3d(-14px, 0, 0); }
}

@keyframes scoreboardCardIn {
  from { opacity: 0; transform: translate3d(14px, 0, 0); }
}

@media(max-width: 760px) {
  body.page-scoreboard .leaderboard-glass {
    grid-template-columns: 1fr;
    border-radius: 20px;
  }

  body.page-scoreboard .leader-feature {
    min-height: 390px;
    padding: 21px 19px 22px;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .09) !important;
  }

  body.page-scoreboard .leader-avatar {
    width: 62px;
    height: 62px;
    border-radius: 15px;
  }

  body.page-scoreboard .leader-avatar b {
    font-size: 26px;
  }

  body.page-scoreboard .leader-identity-copy h2.team-name-ar {
    font-size: 42px !important;
  }

  body.page-scoreboard .ranking-panel {
    padding: 16px 11px 17px;
  }

  body.page-scoreboard .ranking-row {
    min-height: 78px;
    grid-template-columns: 24px 32px minmax(0, 1fr) 44px;
    gap: 9px;
    padding: 11px 10px;
    border-radius: 13px;
  }

  body.page-scoreboard .ranking-row .team-signal {
    width: 31px;
    height: 31px;
  }

  body.page-scoreboard .ranking-team h3.team-name-ar {
    font-size: 19px !important;
  }

  body.page-scoreboard .ranking-team > div:first-child .team-color-label {
    display: none;
  }

  body.page-scoreboard .ranking-score {
    min-width: 42px;
    font-size: 25px;
  }

  body.page-scoreboard .ranking-score-bar {
    height: 7px;
    margin-top: 7px;
  }
}

@media(prefers-reduced-motion: reduce) {
  body.page-scoreboard .leader-feature,
  body.page-scoreboard .ranking-row {
    animation: none !important;
    transform: none !important;
  }
}

/* Reference-matched scoreboard and campus-backed programme plan. */
body.page-scoreboard .scoreboard-experience {
  padding: 112px 0 76px;
}

body.page-scoreboard .leaderboard-header {
  display: none;
}

body.page-scoreboard .leaderboard-glass {
  width: min(1080px, 100%);
  min-height: 520px;
  margin-inline: auto;
  grid-template-columns: minmax(340px, .74fr) minmax(0, 1.26fr);
  border-color: rgba(55, 159, 74, .42);
  border-radius: 30px;
  background: rgba(3, 17, 9, .96) !important;
  box-shadow: 0 26px 64px rgba(0, 0, 0, .38);
}

body.page-scoreboard .leader-feature {
  min-height: 520px;
  border-right-color: rgba(69, 169, 82, .22) !important;
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--team) 15%, #0b1b0b), #061108 72%) !important;
}

body.page-scoreboard .leader-feature::before,
body.page-scoreboard .ranking-row::before {
  display: none !important;
}

body.page-scoreboard .leader-avatar {
  border-color: color-mix(in srgb, var(--team) 52%, rgba(255, 255, 255, .1));
  border-radius: 20px;
  background: color-mix(in srgb, var(--team) 12%, #0b1b0d);
}

body.page-scoreboard .leader-identity-copy h2.team-name-ar {
  font-size: clamp(48px, 4.4vw, 60px) !important;
}

body.page-scoreboard .leader-identity-copy > span {
  color: rgba(255, 255, 255, .38);
  font-family: "Ubuntu", sans-serif !important;
  font-size: 8px;
  letter-spacing: 0;
  text-transform: none;
}

body.page-scoreboard .leader-performance {
  border-color: color-mix(in srgb, var(--team) 24%, rgba(255, 255, 255, .08));
  background: rgba(6, 24, 11, .72);
}

body.page-scoreboard .ranking-panel {
  padding: 28px;
  background: rgba(2, 15, 8, .78);
}

body.page-scoreboard .ranking-row {
  min-height: 89px;
  grid-template-columns: 40px 40px minmax(0, 1fr) 58px;
  border-color: color-mix(in srgb, var(--team) 22%, rgba(255, 255, 255, .08)) !important;
  border-radius: 16px;
  background: rgba(5, 23, 12, .72) !important;
}

body.page-scoreboard .ranking-row.is-leading {
  border-color: color-mix(in srgb, var(--team) 54%, rgba(255, 255, 255, .08)) !important;
  background: color-mix(in srgb, var(--team) 8%, rgba(5, 23, 12, .86)) !important;
}

body.page-scoreboard .ranking-row:hover {
  transform: translate3d(3px, 0, 0) !important;
  background: color-mix(in srgb, var(--team) 7%, rgba(7, 26, 14, .92)) !important;
}

body.page-scoreboard .ranking-team h3.team-name-ar {
  font-size: 23px !important;
}

body.page-scoreboard .ranking-score-bar {
  height: 7px;
}

body.page-musabaqa,body.page-program-plan {
  --page-image: url("../kauzariyya9.png");
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(4, 10, 7, .72), rgba(3, 8, 5, .92)),
    linear-gradient(90deg, rgba(4, 12, 7, .78), rgba(4, 12, 7, .55)),
    var(--page-image) center / cover fixed !important;
}

body.page-musabaqa::before,body.page-program-plan::before {
  content: "";
  position: fixed;
  inset: 0;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 10, 7, .68), rgba(3, 8, 5, .92)),
    var(--page-image) center / cover no-repeat !important;
  filter: none !important;
}

body.page-musabaqa .musabaqa-plan-hero {
  border-bottom-color: rgba(255, 255, 255, .16);
}

body.page-musabaqa .musabaqa-plan-hero h1 em {
  color: #8fe99f;
  font-style: normal;
}

body.page-musabaqa .musabaqa-plan-hero > div:first-child > p:last-child {
  color: rgba(255, 255, 255, .66);
}

body.page-musabaqa .musabaqa-plan-stats span {
  border-color: rgba(88, 210, 117, .18);
  background: rgba(3, 20, 10, .88);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .2);
}

body.page-musabaqa .musabaqa-program-section,
body.page-musabaqa .musabaqa-committee {
  border-color: rgba(82, 194, 106, .2);
  background: rgba(3, 20, 10, .86);
  box-shadow: 0 22px 54px rgba(0, 0, 0, .24);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.page-musabaqa .musabaqa-program-section > header {
  border-bottom-color: rgba(255, 255, 255, .1);
  background: linear-gradient(110deg, rgba(23, 97, 43, .3), rgba(3, 20, 10, .32));
}

body.page-musabaqa .musabaqa-program-list article {
  border-bottom-color: rgba(255, 255, 255, .075);
  background: rgba(2, 14, 7, .16);
}

body.page-musabaqa .musabaqa-program-list article:hover {
  background: rgba(32, 118, 53, .18);
}

body.page-musabaqa .musabaqa-committee article {
  border-color: rgba(255, 255, 255, .085);
  background: rgba(2, 14, 7, .3);
}

@media(max-width: 760px) {
  body.page-scoreboard .scoreboard-experience {
    padding-top: 88px;
  }

  body.page-scoreboard .leaderboard-glass {
    min-height: 0;
    grid-template-columns: 1fr;
    border-radius: 20px;
  }

  body.page-scoreboard .leader-feature {
    min-height: 390px;
  }

  body.page-scoreboard .ranking-panel {
    padding: 15px 10px 17px;
  }

  body.page-scoreboard .ranking-row {
    min-height: 76px;
    grid-template-columns: 23px 31px minmax(0, 1fr) 43px;
  }

  body.page-scoreboard .ranking-team h3.team-name-ar {
    font-size: 18px !important;
  }

  body.page-musabaqa,body.page-program-plan {
    --page-image: url("../kauzariyya9.png");
    background:
      linear-gradient(180deg, rgba(4, 10, 7, .72), rgba(3, 8, 5, .92)),
      linear-gradient(90deg, rgba(4, 12, 7, .78), rgba(4, 12, 7, .55)),
      var(--page-image) center / cover no-repeat !important;
  }

  body.page-musabaqa::before,body.page-program-plan::before {
    content: "";
    position: fixed;
    inset: 0;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(4, 10, 7, .68), rgba(3, 8, 5, .92)),
      var(--page-image) center / cover no-repeat !important;
  }

  body.page-musabaqa .musabaqa-program-section,
  body.page-musabaqa .musabaqa-committee {
    background: rgba(3, 20, 10, .92);
  }
}

/* 2026 participant stage desk, unified display headings, and Bismillah. */
#react-root :is(h1, h2, h3):not([lang="ar"]),
.site-footer :is(h1, h2, h3):not([lang="ar"]) {
  font-family: "Ubuntu", sans-serif !important;
}

#react-root :is(h1, h2):not([lang="ar"]),
#react-root :is(h1, h2):not([lang="ar"]) em,
.site-footer :is(h1, h2):not([lang="ar"]) {
  letter-spacing: -.048em !important;
}

#react-root :is(h1, h2, h3):not([lang="ar"]) em {
  font-family: inherit !important;
}

body.page-home .home-musabaqa-prayer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-inline: 20px !important;
  background:
    radial-gradient(circle at 50% 15%, rgba(78, 232, 131, .09), transparent 42%),
    linear-gradient(145deg, rgba(3, 18, 9, .98), rgba(2, 12, 7, .96)) !important;
}

body.page-home .home-musabaqa-prayer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent, rgba(78, 232, 131, .72), transparent) top / 72% 1px no-repeat,
    radial-gradient(circle at 50% 0, rgba(78, 232, 131, .12), transparent 52%);
  pointer-events: none;
}

body.page-home .home-musabaqa-prayer > .bismillah-mark {
  display: block !important;
  margin: 0 auto;
  color: #4ee883 !important;
  font-family: "Noto Naskh Arabic", "Amiri", serif !important;
  font-size: clamp(25px, 2.55vw, 34px) !important;
  font-weight: 700 !important;
  line-height: 1.38 !important;
  text-align: center;
  text-shadow: 0 0 28px rgba(78, 232, 131, .13);
  white-space: nowrap;
}

body.page-home .home-musabaqa-prayer > p {
  max-width: 44ch;
  margin-inline: auto !important;
}

body.page-participants .participant-shell {
  width: min(1180px, 100%);
  padding: 118px 0 92px !important;
}

body.page-participants .participant-title {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 42px !important;
  align-items: end !important;
  margin: 0 0 30px !important;
  padding: 0 3px 28px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
}

body.page-participants .participant-heading-copy {
  min-width: 0;
}

body.page-participants .participant-heading-copy > .overline {
  margin-bottom: 13px;
}

body.page-participants .participant-title h1 {
  max-width: 10ch;
  margin: 0 !important;
  color: #fff !important;
  font-family: "Ubuntu", sans-serif !important;
  font-size: clamp(60px, 8vw, 96px) !important;
  font-weight: 800 !important;
  letter-spacing: -.062em !important;
  line-height: .82 !important;
}

body.page-participants .participant-title h1 em {
  color: #77e992;
  font-style: normal;
}

body.page-participants .participant-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 23px;
}

body.page-participants .participant-event-meta > span {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, .105);
  border-radius: 999px;
  background: rgba(4, 16, 9, .66);
  color: rgba(240, 255, 244, .68) !important;
  font-size: 8px !important;
  font-weight: 750 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.page-participants .participant-event-meta > span:first-child {
  border-color: rgba(78, 232, 131, .24);
  color: #a6f4b9 !important;
}

body.page-participants .participant-event-meta i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ee883;
  box-shadow: 0 0 12px rgba(78, 232, 131, .85);
}

body.page-participants .clock-block {
  min-width: 212px;
  display: grid;
  justify-items: end;
  gap: 3px;
  padding: 18px 20px;
  border: 1px solid rgba(78, 232, 131, .17);
  border-radius: 17px;
  background: rgba(3, 17, 8, .75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  text-align: right;
}

body.page-participants .clock-block small {
  color: rgba(255, 255, 255, .4);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body.page-participants .clock-block strong {
  color: #fff !important;
  font-family: "Ubuntu", sans-serif !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  letter-spacing: -.045em;
  line-height: 1.05;
  text-shadow: none !important;
}

body.page-participants .clock-block > span {
  color: #77e992 !important;
  font-size: 9px !important;
  font-weight: 700 !important;
}

body.page-participants .participant-stage-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.16fr) minmax(380px, .84fr) !important;
  gap: 18px !important;
  align-items: stretch;
}

body.page-participants .participant-live-card,
body.page-participants .participant-list {
  min-height: clamp(570px, 66vh, 680px) !important;
  border-radius: 26px !important;
}

body.page-participants .participant-live-card {
  position: relative !important;
  isolation: isolate;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding: clamp(25px, 3.2vw, 38px) !important;
  overflow: hidden !important;
  border: 1px solid rgba(78, 232, 131, .28) !important;
  background:
    linear-gradient(150deg, rgba(6, 29, 15, .92), rgba(3, 15, 8, .9) 61%, rgba(2, 11, 6, .96)) !important;
  box-shadow: 0 32px 78px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .055) !important;
  backdrop-filter: none !important;
}

body.page-participants .participant-live-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background:
    radial-gradient(circle at 16% 15%, rgba(78, 232, 131, .17), transparent 34%),
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px) !important;
  background-size: auto, 38px 38px, 38px 38px !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

body.page-participants .participant-live-card::after {
  content: "";
  position: absolute;
  top: 11%;
  right: -165px;
  z-index: -1;
  width: 390px;
  height: 390px;
  border: 1px solid rgba(78, 232, 131, .11);
  border-radius: 50%;
  box-shadow:
    0 0 0 55px rgba(78, 232, 131, .025),
    0 0 0 110px rgba(78, 232, 131, .018);
}

body.page-participants .speaker-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

body.page-participants .live-label {
  min-height: 30px;
  padding: 0 12px !important;
  border-color: rgba(78, 232, 131, .32) !important;
  background: rgba(78, 232, 131, .1) !important;
  color: #72ef91 !important;
  font-size: 8px !important;
  letter-spacing: .13em !important;
}

body.page-participants .live-label i {
  width: 7px !important;
  height: 7px !important;
  background: #4ee883 !important;
}

body.page-participants .stage-sequence {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .46);
  font: 750 9px/1 "Ubuntu", sans-serif;
  letter-spacing: .08em;
}

body.page-participants .stage-sequence > i {
  width: 22px;
  height: 1px;
  background: rgba(255, 255, 255, .2);
}

body.page-participants .participant-live-card > .speaker-card-main {
  margin: auto 0 !important;
  padding: 55px 0 38px !important;
}

body.page-participants .speaker-card-main > p {
  margin: 0 0 13px !important;
  color: #77e992 !important;
  font-size: 9px !important;
  letter-spacing: .15em !important;
}

body.page-participants .speaker-card-main > h2 {
  max-width: 10ch;
  margin: 0 !important;
  color: #fff !important;
  font-family: "Ubuntu", sans-serif !important;
  font-size: clamp(52px, 6vw, 82px) !important;
  font-weight: 800 !important;
  letter-spacing: -.06em !important;
  line-height: .91 !important;
  text-transform: capitalize !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none;
}

body.page-participants .speaker-identifiers {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 23px !important;
  padding: 0 !important;
}

body.page-participants .speaker-identifiers > span,
body.page-participants .speaker-identifiers > b {
  min-height: 29px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .105);
  border-radius: 8px;
  background: rgba(0, 0, 0, .2);
  color: rgba(255, 255, 255, .68);
  font-size: 8px !important;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.page-participants .speaker-identifiers > b[lang="ar"] {
  color: #d9ffe3;
  font-family: var(--team-arabic-font, "Noto Naskh Arabic"), serif !important;
  font-size: 13px !important;
  letter-spacing: 0;
  text-transform: none;
}

body.page-participants .participant-live-card > .speaker-cue-board {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 15px;
  background: rgba(255, 255, 255, .09);
}

body.page-participants .speaker-cue-board > div {
  min-width: 0;
  display: grid;
  gap: 7px;
  padding: 15px 16px;
  background: rgba(2, 12, 6, .83);
}

body.page-participants .speaker-cue-board span {
  color: rgba(255, 255, 255, .38);
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

body.page-participants .speaker-cue-board strong {
  overflow: hidden;
  color: #f3fff6;
  font: 750 13px/1.2 "Ubuntu", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-participants .participant-live-card > .up-next-cue {
  min-height: 72px;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  margin: 12px 0 0 !important;
  padding: 11px 13px !important;
  border: 1px solid rgba(244, 201, 115, .18);
  border-radius: 15px;
  background: linear-gradient(90deg, rgba(244, 201, 115, .08), rgba(255, 255, 255, .025));
}

body.page-participants .up-next-label {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 7px;
  background: rgba(244, 201, 115, .12);
  color: #f4c973;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}

body.page-participants .up-next-cue > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

body.page-participants .up-next-cue > div strong,
body.page-participants .up-next-cue > div small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-participants .up-next-cue > div strong {
  color: #fff;
  font: 750 12px/1.2 "Ubuntu", sans-serif;
}

body.page-participants .up-next-cue > div small {
  color: rgba(255, 255, 255, .42);
  font-size: 7px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

body.page-participants .up-next-cue > time {
  color: #f4c973;
  font: 800 14px/1 "Ubuntu", sans-serif;
}

body.page-participants .up-next-cue.queue-clear {
  border-color: rgba(78, 232, 131, .15);
  background: rgba(78, 232, 131, .045);
}

body.page-participants .queue-ready-mark {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(78, 232, 131, .12);
  color: #4ee883;
}

body.page-participants .participant-empty-stage {
  display: grid;
  align-content: center;
  min-height: 100%;
  margin: auto 0 !important;
  padding: 40px 0 !important;
}

body.page-participants .participant-empty-stage > span {
  color: #72ef91;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

body.page-participants .participant-empty-stage h2 {
  max-width: 10ch;
  margin: 14px 0;
  font-size: clamp(42px, 6vw, 72px);
  line-height: .94;
}

body.page-participants .participant-empty-stage p {
  color: rgba(255, 255, 255, .52);
  font-size: 11px;
}

body.page-participants .participant-list {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 13px !important;
  padding: 24px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  background:
    radial-gradient(circle at 100% 0, rgba(78, 232, 131, .09), transparent 31%),
    linear-gradient(160deg, rgba(6, 22, 12, .95), rgba(3, 13, 7, .94)) !important;
  box-shadow: 0 28px 72px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
  backdrop-filter: none !important;
}

body.page-participants .participant-list::before {
  content: "";
  position: absolute;
  inset: 0 13% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, #4ee883, transparent);
}

body.page-participants .participant-list-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, .085);
}

body.page-participants .participant-list-head .overline {
  margin: 0 0 5px;
  font-size: 7px;
}

body.page-participants .participant-list-head h2 {
  margin: 0;
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.04em !important;
  line-height: 1;
}

body.page-participants .participant-list-head > strong {
  display: grid;
  justify-items: end;
  color: #79ec95;
  font: 800 26px/1 "Ubuntu", sans-serif;
}

body.page-participants .participant-list-head > strong small {
  margin-top: 4px;
  color: rgba(255, 255, 255, .34);
  font-size: 6px;
  font-weight: 750;
  letter-spacing: .11em;
  text-transform: uppercase;
}

body.page-participants .participant-roster-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.page-participants .participant-roster-summary > span {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 7px;
  background: rgba(255, 255, 255, .025);
  color: rgba(255, 255, 255, .48);
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.page-participants .participant-roster-summary > .is-live {
  border-color: rgba(78, 232, 131, .18);
  color: #78ea94;
}

body.page-participants .participant-roster-summary i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ee883;
  box-shadow: 0 0 8px #4ee883;
}

body.page-participants .participant-roster-controls {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(150px, .8fr);
  gap: 8px;
}

body.page-participants .participant-roster-controls .participant-search {
  height: 45px !important;
  margin: 0 !important;
  border-radius: 11px !important;
  background: rgba(1, 8, 4, .52) !important;
  box-shadow: none !important;
}

body.page-participants .participant-roster-controls .participant-search input {
  padding-inline: 12px !important;
  font-size: 9px !important;
}

body.page-participants .participant-roster-controls .participant-search button {
  width: 44px !important;
  border-left: 1px solid rgba(255, 255, 255, .07);
}

body.page-participants .participant-roster-controls .participant-program-filter {
  position: relative;
  display: block !important;
  margin: 0 !important;
}

body.page-participants .participant-roster-controls .participant-program-filter > span {
  position: absolute;
  top: 6px;
  left: 12px;
  z-index: 1;
  font-size: 5px !important;
  letter-spacing: .12em !important;
  pointer-events: none;
}

body.page-participants .participant-roster-controls .participant-program-filter select {
  width: 100% !important;
  height: 45px !important;
  padding: 12px 28px 0 11px !important;
  border-radius: 11px !important;
  background-color: rgba(1, 8, 4, .52) !important;
  font-size: 8px !important;
}

body.page-participants .participant-results-scroll {
  flex: 1 1 auto !important;
  min-height: 0;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 2px 3px 4px 0 !important;
  overflow-y: auto !important;
  border: 0 !important;
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 12px), transparent);
}

body.page-participants .participant-row {
  flex: 0 0 auto;
  min-height: 70px !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) auto !important;
  gap: 11px !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 10px 11px !important;
  border: 1px solid rgba(255, 255, 255, .075) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, .025) !important;
  cursor: default !important;
  transform: none !important;
  animation: none !important;
}

body.page-participants .participant-row:hover {
  border-color: rgba(255, 255, 255, .15) !important;
  background: rgba(255, 255, 255, .045) !important;
  box-shadow: none !important;
  transform: translateX(2px) !important;
}

body.page-participants .participant-row.is-live {
  border-color: rgba(78, 232, 131, .6) !important;
  background: linear-gradient(90deg, rgba(78, 232, 131, .17), rgba(78, 232, 131, .045)) !important;
  box-shadow: inset 3px 0 0 #4ee883 !important;
}

body.page-participants .participant-row.is-next {
  border-color: rgba(244, 201, 115, .21) !important;
  background: linear-gradient(90deg, rgba(244, 201, 115, .07), rgba(255, 255, 255, .02)) !important;
}

body.page-participants .participant-row > span {
  min-width: 0;
}

body.page-participants .participant-order {
  width: 34px;
  height: 34px;
  display: grid !important;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 10px;
  background: rgba(0, 0, 0, .22);
  color: rgba(255, 255, 255, .5);
  font: 800 9px/1 "Ubuntu", sans-serif;
}

body.page-participants .participant-row.is-live .participant-order {
  border-color: #4ee883;
  background: #4ee883;
  color: #061009;
}

body.page-participants .participant-person {
  display: grid !important;
  gap: 5px !important;
}

body.page-participants .participant-person > strong {
  overflow: hidden;
  color: #f7fff9 !important;
  font: 750 12px/1.1 "Ubuntu", sans-serif !important;
  text-overflow: ellipsis;
  text-transform: none !important;
  white-space: nowrap;
}

body.page-participants .participant-person > small {
  overflow: hidden;
  color: rgba(255, 255, 255, .38) !important;
  font-size: 6px !important;
  font-weight: 700;
  letter-spacing: .07em !important;
  text-overflow: ellipsis;
  text-transform: uppercase !important;
  white-space: nowrap;
}

body.page-participants .participant-call {
  display: grid !important;
  justify-items: end;
  gap: 5px !important;
}

body.page-participants .participant-call > time {
  color: rgba(255, 255, 255, .72) !important;
  font: 800 10px/1 "Ubuntu", sans-serif !important;
}

body.page-participants .participant-call > small {
  color: rgba(255, 255, 255, .32) !important;
  font-size: 6px !important;
  font-weight: 800;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

body.page-participants .participant-row.is-live .participant-call > time,
body.page-participants .participant-row.is-live .participant-call > small {
  color: #79ec95 !important;
}

body.page-participants .participant-row.is-next .participant-call > small {
  color: #f4c973 !important;
}

body.page-participants .participant-roster-empty {
  min-height: 150px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  padding: 25px;
  border: 1px dashed rgba(255, 255, 255, .1);
  border-radius: 14px;
  color: rgba(255, 255, 255, .42);
  text-align: center;
}

body.page-participants .participant-roster-empty strong {
  color: #fff;
  font-size: 12px;
}

body.page-participants .participant-roster-empty span {
  font-size: 8px;
}

body.page-participants .reporting-note {
  min-height: 43px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 !important;
  padding: 9px 10px !important;
  border: 1px solid rgba(78, 232, 131, .1) !important;
  border-radius: 11px !important;
  background: rgba(78, 232, 131, .035) !important;
  color: rgba(255, 255, 255, .4) !important;
  font-size: 7px !important;
  line-height: 1.45;
}

body.page-participants .reporting-note > i {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(78, 232, 131, .1);
  color: #70e98e;
  font-style: normal;
  font-weight: 850;
}

body.page-participants .public-student-directory {
  margin: 54px 0 0 !important;
  padding: clamp(24px, 3.4vw, 38px) !important;
  border-color: rgba(255, 255, 255, .105) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 100% 0, rgba(78, 232, 131, .075), transparent 27%),
    linear-gradient(155deg, rgba(5, 20, 11, .94), rgba(3, 13, 7, .94)) !important;
  box-shadow: 0 28px 76px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
  backdrop-filter: none !important;
}

body.page-participants .student-directory-head {
  padding: 0 0 25px !important;
}

body.page-participants .student-directory-head h2 {
  font-size: clamp(43px, 5.6vw, 70px) !important;
}

body.page-participants .student-directory-head > strong {
  padding: 13px 15px;
  border: 1px solid rgba(78, 232, 131, .15);
  border-radius: 13px;
  background: rgba(78, 232, 131, .05);
  font-size: 33px !important;
  text-shadow: none !important;
}

body.page-participants .public-student-grid {
  gap: 10px !important;
}

body.page-participants .public-student-grid article {
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .026) !important;
}

body.page-participants .public-student-grid article:hover {
  border-color: rgba(78, 232, 131, .24) !important;
  background: rgba(78, 232, 131, .05) !important;
  box-shadow: 0 13px 30px rgba(0, 0, 0, .24) !important;
  transform: translateY(-2px) !important;
}

@media(max-width: 980px) {
  body.page-participants .participant-stage-layout {
    grid-template-columns: 1fr !important;
  }

  body.page-participants .participant-live-card,
  body.page-participants .participant-list {
    min-height: 560px !important;
  }

  body.page-participants .participant-list {
    max-height: 690px;
  }
}

@media(max-width: 700px) {
  body.page-home .home-musabaqa-prayer > .bismillah-mark {
    font-size: clamp(23px, 7.4vw, 31px) !important;
  }

  body.page-participants .participant-shell {
    padding: 94px 0 84px !important;
  }

  body.page-participants .participant-title {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding-bottom: 21px !important;
  }

  body.page-participants .participant-title h1 {
    font-size: clamp(49px, 15vw, 69px) !important;
  }

  body.page-participants .clock-block {
    min-width: 0;
    width: 100%;
    grid-template-columns: 1fr auto;
    justify-items: start;
    align-items: center;
    padding: 13px 15px;
    text-align: left;
  }

  body.page-participants .clock-block small {
    grid-column: 1;
  }

  body.page-participants .clock-block strong {
    grid-column: 1;
    font-size: 29px !important;
  }

  body.page-participants .clock-block > span {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: end;
  }

  body.page-participants .participant-live-card,
  body.page-participants .participant-list {
    min-height: 0 !important;
    border-radius: 20px !important;
  }

  body.page-participants .participant-live-card {
    padding: 21px !important;
  }

  body.page-participants .participant-live-card > .speaker-card-main {
    padding: 70px 0 52px !important;
  }

  body.page-participants .speaker-card-main > h2 {
    font-size: clamp(46px, 13.5vw, 66px) !important;
  }

  body.page-participants .participant-list {
    max-height: none;
    padding: 19px !important;
  }

  body.page-participants .participant-results-scroll {
    max-height: min(56svh, 510px) !important;
  }

  body.page-participants .public-student-directory {
    margin-top: 24px !important;
    padding: 20px !important;
    border-radius: 20px !important;
  }

  body.page-participants .student-directory-head {
    display: grid !important;
    gap: 18px !important;
    align-items: start !important;
  }

  body.page-participants .student-directory-head > strong {
    justify-items: start !important;
    justify-self: start;
  }

  body.page-participants .public-student-filters,
  body.page-participants .public-student-grid {
    grid-template-columns: 1fr !important;
  }
}

@media(max-width: 520px) {
  body.page-participants .participant-event-meta > span {
    min-height: 28px;
    padding-inline: 9px;
    font-size: 6px !important;
  }

  body.page-participants .speaker-card-head {
    align-items: flex-start;
  }

  body.page-participants .participant-live-card > .speaker-card-main {
    padding: 57px 0 43px !important;
  }

  body.page-participants .speaker-card-main > p {
    font-size: 7px !important;
  }

  body.page-participants .speaker-card-main > h2 {
    font-size: clamp(39px, 11vw, 52px) !important;
  }

  body.page-participants .speaker-identifiers {
    margin-top: 18px !important;
  }

  body.page-participants .participant-live-card > .speaker-cue-board {
    grid-template-columns: 1fr 1fr;
  }

  body.page-participants .speaker-cue-board > div:last-child {
    grid-column: 1 / -1;
  }

  body.page-participants .participant-live-card > .up-next-cue {
    grid-template-columns: auto minmax(0, 1fr);
  }

  body.page-participants .up-next-cue > time,
  body.page-participants .queue-ready-mark {
    grid-column: 2;
    justify-self: start;
  }

  body.page-participants .participant-roster-controls {
    grid-template-columns: 1fr;
  }

  body.page-participants .participant-row {
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding-inline: 9px !important;
  }

  body.page-participants .participant-order {
    width: 31px;
    height: 31px;
  }

  body.page-participants .participant-person > strong {
    font-size: 11px !important;
  }
}

/* Admin command center · operational dashboard */
body.page-admin .admin-command-bar {
  display: grid;
  grid-template-columns: minmax(210px, 1.35fr) minmax(125px, .7fr) minmax(145px, .85fr) auto;
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 20px 55px rgba(0, 0, 0, .2);
}

body.page-admin .admin-command-bar > div,
body.page-admin .admin-command-bar > button {
  min-height: 66px;
  padding: 13px 16px;
  border: 0;
  background: linear-gradient(145deg, rgba(8, 21, 13, .96), rgba(4, 12, 7, .92));
}

body.page-admin .admin-command-bar small {
  display: block;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, .38);
  font: 800 7px/1.2 Ubuntu, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body.page-admin .admin-command-bar strong {
  color: #fff;
  font: 800 11px/1.25 Ubuntu, sans-serif;
}

body.page-admin .admin-command-status {
  display: flex;
  align-items: center;
  gap: 11px;
}

body.page-admin .admin-command-status > i {
  position: relative;
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #4ee883;
  box-shadow: 0 0 0 6px rgba(78, 232, 131, .1), 0 0 20px rgba(78, 232, 131, .55);
}

body.page-admin .admin-command-status > i::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid rgba(78, 232, 131, .35);
  border-radius: inherit;
  animation: adminStatusPulse 1.8s ease-out infinite;
}

body.page-admin .admin-command-time strong {
  color: #73ef98;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

body.page-admin .admin-command-bar > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-width: 192px;
  color: #d7ffe3;
  font: 800 9px/1.2 Ubuntu, sans-serif;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

body.page-admin .admin-command-bar > button:hover {
  background: linear-gradient(145deg, rgba(20, 72, 36, .96), rgba(8, 35, 17, .94));
  color: #fff;
}

body.page-admin .admin-command-bar > button span {
  color: #4ee883;
  font-size: 17px;
}

@keyframes adminStatusPulse {
  to { transform: scale(1.75); opacity: 0; }
}

body.page-admin .admin-operations-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body.page-admin .overview-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.page-admin .admin-operations-card {
  min-width: 0;
  min-height: 340px;
  padding: 19px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 19px;
  background:
    radial-gradient(circle at 100% 0, rgba(78, 232, 131, .08), transparent 34%),
    linear-gradient(145deg, rgba(7, 18, 11, .82), rgba(4, 10, 7, .58));
  box-shadow: 0 22px 58px rgba(0, 0, 0, .2);
}

body.page-admin .admin-operations-card > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 19px;
}

body.page-admin .admin-operations-card > header h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(19px, 2vw, 24px);
}

body.page-admin .admin-operations-card > header button {
  padding: 0;
  border: 0;
  background: none;
  color: #8ce094;
  font: 800 8px/1 Ubuntu, sans-serif;
  white-space: nowrap;
  cursor: pointer;
}

body.page-admin .admin-health-total {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid rgba(78, 232, 131, .15);
  border-radius: 13px;
  background: rgba(78, 232, 131, .055);
}

body.page-admin .admin-health-total > strong {
  color: #fff;
  font-size: 38px;
  line-height: 1;
}

body.page-admin .admin-health-total > span {
  display: grid;
  color: rgba(255, 255, 255, .76);
  font: 800 9px/1.35 Ubuntu, sans-serif;
}

body.page-admin .admin-health-total small {
  margin-top: 3px;
  color: #65d987;
  font-size: 7px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

body.page-admin .admin-program-state-list {
  display: grid;
  gap: 15px;
  margin-top: 22px;
}

body.page-admin .admin-program-state-list > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
  align-items: center;
}

body.page-admin .admin-program-state-list span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, .65);
  font: 700 9px/1.2 Ubuntu, sans-serif;
}

body.page-admin .admin-program-state-list span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #819087;
}

body.page-admin .admin-program-state-list span i.complete { background: #6d8a78; }
body.page-admin .admin-program-state-list span i.live { background: #4ee883; box-shadow: 0 0 11px rgba(78, 232, 131, .7); }
body.page-admin .admin-program-state-list span i.upcoming { background: #e7bd62; }

body.page-admin .admin-program-state-list > div > b {
  color: #fff;
  font-size: 11px;
}

body.page-admin .admin-program-state-list em {
  grid-column: 1 / -1;
  height: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, .06);
}

body.page-admin .admin-program-state-list em i {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: #6d8a78;
}

body.page-admin .admin-program-state-list em i.live { background: linear-gradient(90deg, #23ad52, #66f08c); }
body.page-admin .admin-program-state-list em i.upcoming { background: linear-gradient(90deg, #a67824, #e7bd62); }

body.page-admin .admin-channel-list,
body.page-admin .admin-activity-list {
  display: grid;
  gap: 7px;
}

body.page-admin .admin-channel-list > button {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 11px;
  background: rgba(255, 255, 255, .025);
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}

body.page-admin .admin-channel-list > button:hover {
  border-color: rgba(78, 232, 131, .28);
  background: rgba(78, 232, 131, .06);
}

body.page-admin .admin-channel-list > button > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8a524e;
}

body.page-admin .admin-channel-list > button > i.enabled {
  background: #4ee883;
  box-shadow: 0 0 10px rgba(78, 232, 131, .5);
}

body.page-admin .admin-channel-list span {
  min-width: 0;
  display: grid;
}

body.page-admin .admin-channel-list strong,
body.page-admin .admin-activity-list strong {
  overflow: hidden;
  color: #fff;
  font: 800 9px/1.3 Ubuntu, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-admin .admin-channel-list small,
body.page-admin .admin-activity-list small {
  margin-top: 2px;
  overflow: hidden;
  color: rgba(255, 255, 255, .35);
  font: 600 7px/1.3 Ubuntu, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-admin .admin-channel-list > button > b {
  min-width: 30px;
  padding: 5px 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .5);
  font: 900 7px/1 Ubuntu, sans-serif;
  text-align: center;
}

body.page-admin .admin-channel-list > button:has(> i.enabled) > b {
  background: rgba(78, 232, 131, .12);
  color: #70ed95;
}

body.page-admin .admin-activity-list article {
  min-height: 49px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
}

body.page-admin .admin-activity-list article > i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(78, 232, 131, .09);
  color: #72e894;
  font-style: normal;
}

body.page-admin .admin-activity-list article > i.review {
  background: rgba(231, 189, 98, .09);
  color: #e7bd62;
}

body.page-admin .admin-activity-list article > span {
  min-width: 0;
  display: grid;
}

body.page-admin .admin-activity-list time {
  grid-column: 2;
  margin-top: -7px;
  color: rgba(255, 255, 255, .25);
  font: 600 6px/1.2 Ubuntu, sans-serif;
}

body.page-admin .admin-activity-empty {
  min-height: 190px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  color: rgba(255, 255, 255, .3);
  text-align: center;
}

body.page-admin .admin-activity-empty span { color: #4ee883; font-size: 28px; }
body.page-admin .admin-activity-empty p { max-width: 22ch; margin: 0; font-size: 9px; line-height: 1.6; }

body.page-admin .admin-readiness-card {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) minmax(260px, .9fr);
  gap: 20px;
  align-items: center;
  padding: 20px 22px;
  border: 1px solid rgba(78, 232, 131, .18);
  border-radius: 19px;
  background:
    linear-gradient(90deg, rgba(78, 232, 131, .07), transparent 38%),
    rgba(5, 13, 8, .72);
  box-shadow: 0 22px 55px rgba(0, 0, 0, .18);
}

body.page-admin .admin-readiness-score {
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#4ee883 var(--readiness), rgba(255, 255, 255, .07) 0);
  box-shadow: 0 0 35px rgba(78, 232, 131, .1);
}

body.page-admin .admin-readiness-score::before {
  content: "";
  grid-area: 1 / 1;
  width: 67px;
  height: 67px;
  border-radius: inherit;
  background: #07100a;
}

body.page-admin .admin-readiness-score span {
  z-index: 1;
  grid-area: 1 / 1;
  display: grid;
  justify-items: center;
}

body.page-admin .admin-readiness-score strong { color: #fff; font-size: 17px; }
body.page-admin .admin-readiness-score small { color: #70ed95; font: 800 6px Ubuntu, sans-serif; letter-spacing: .11em; text-transform: uppercase; }
body.page-admin .admin-readiness-copy h2 { margin: 2px 0 5px; color: #fff; font-size: 20px; }
body.page-admin .admin-readiness-copy > p:last-child { max-width: 58ch; margin: 0; color: rgba(255, 255, 255, .4); font-size: 9px; line-height: 1.5; }

body.page-admin .admin-attention-list {
  display: grid;
  gap: 6px;
}

body.page-admin .admin-attention-list > span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 29px;
  padding: 6px 9px;
  border: 1px solid rgba(231, 189, 98, .1);
  border-radius: 8px;
  background: rgba(231, 189, 98, .045);
  color: rgba(255, 255, 255, .58);
  font: 700 7px/1.3 Ubuntu, sans-serif;
}

body.page-admin .admin-attention-list i {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(231, 189, 98, .12);
  color: #e7bd62;
  font-style: normal;
  font-weight: 900;
}

body.page-admin .admin-attention-list > span.clear {
  border-color: rgba(78, 232, 131, .12);
  background: rgba(78, 232, 131, .05);
  color: #8be7a5;
}

body.page-admin .admin-attention-list > span.clear i {
  background: rgba(78, 232, 131, .12);
  color: #4ee883;
}

/* Team profile workspace */
body.page-admin .team-manager-workspace {
  display: grid;
  gap: 15px;
}

body.page-admin .team-manager-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 17px;
  background: rgba(5, 13, 8, .68);
}

body.page-admin .team-manager-toolbar h2 {
  margin: 1px 0 4px;
  color: #fff;
  font-size: 25px;
}

body.page-admin .team-manager-toolbar p:last-child {
  margin: 0;
  color: rgba(255, 255, 255, .42);
  font-size: 9px;
}

body.page-admin .team-manager-toolbar > label {
  width: min(250px, 100%);
  display: grid;
  gap: 6px;
}

body.page-admin .team-manager-toolbar > label > span {
  color: rgba(255, 255, 255, .42);
  font: 800 7px Ubuntu, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body.page-admin .team-arabic-select,
body.page-admin .arabic-class-select,
body.page-participants .arabic-class-select {
  font-family: Cairo, "Noto Naskh Arabic", sans-serif !important;
}

body.page-admin .team-arabic-select {
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid rgba(78, 232, 131, .3);
  border-radius: 11px;
  outline: 0;
  background: #07110b;
  color: #fff;
  font-size: 13px;
}

body.page-admin .team-arabic-select option:not(:first-child),
body.page-admin .arabic-class-select option:not(:first-child),
body.page-participants .arabic-class-select option:not(:first-child) {
  direction: rtl;
}

body.page-admin .team-image-controls {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
}

body.page-admin .team-image-controls .team-image-upload {
  grid-column: auto;
}

body.page-admin .team-image-remove {
  justify-self: start;
  padding: 7px 10px;
  border: 1px solid rgba(255, 118, 118, .2);
  border-radius: 8px;
  background: rgba(255, 90, 90, .06);
  color: #ff9a9a;
  font: 800 8px/1 Ubuntu, sans-serif;
  cursor: pointer;
}

body.page-admin .team-image-remove:hover {
  border-color: rgba(255, 118, 118, .4);
  background: rgba(255, 90, 90, .12);
}

body.page-admin .team-image-default {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: rgba(255, 255, 255, .38);
  font: 700 8px/1.2 Ubuntu, sans-serif;
}

body.page-admin .team-image-default i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--team);
  box-shadow: 0 0 10px var(--team);
}

body.page-admin .college-student-meta > span:first-child {
  font-family: Cairo, "Noto Naskh Arabic", sans-serif;
}

@media(max-width: 1100px) {
  body.page-admin .admin-operations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-admin .admin-activity-center {
    grid-column: 1 / -1;
    min-height: 260px;
  }

  body.page-admin .admin-command-bar {
    grid-template-columns: 1.3fr .7fr .8fr;
  }

  body.page-admin .admin-command-bar > button {
    grid-column: 1 / -1;
    min-height: 48px;
  }
}

@media(max-width: 759px) {
  body.page-admin .admin-command-bar {
    grid-template-columns: 1fr 1fr;
    border-radius: 14px;
  }

  body.page-admin .overview-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-admin .admin-command-status,
  body.page-admin .admin-command-bar > button {
    grid-column: 1 / -1;
  }

  body.page-admin .admin-command-bar > div {
    min-height: 58px;
    padding: 11px 12px;
  }

  body.page-admin .admin-operations-grid {
    grid-template-columns: 1fr;
  }

  body.page-admin .admin-operations-card,
  body.page-admin .admin-activity-center {
    grid-column: auto;
    min-height: 0;
    padding: 16px;
  }

  body.page-admin .admin-readiness-card {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    padding: 17px;
  }

  body.page-admin .admin-readiness-score {
    width: 68px;
    height: 68px;
  }

  body.page-admin .admin-readiness-score::before {
    width: 56px;
    height: 56px;
  }

  body.page-admin .admin-attention-list {
    grid-column: 1 / -1;
  }

  body.page-admin .team-manager-toolbar {
    display: grid;
    align-items: start;
    padding: 16px;
  }

  body.page-admin .team-manager-toolbar > label {
    width: 100%;
  }
}

@media(prefers-reduced-motion: reduce) {
  body.page-admin .admin-command-status > i::after { animation: none; }
}

/* Admin command center v2 */
body.page-admin .admin-workspace-head{
  position:sticky;
  z-index:80;
  top:82px;
  min-height:112px;
  margin-bottom:16px;
  padding:16px 17px 16px 20px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:18px;
  background:linear-gradient(120deg,rgba(5,18,10,.94),rgba(7,13,9,.86));
  box-shadow:0 18px 55px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter:blur(18px);
}
body.page-admin .admin-workspace-head h1{font-size:clamp(34px,4vw,46px)!important}
body.page-admin .admin-head-breadcrumb{
  margin-left:5px;
  color:rgba(255,255,255,.3);
  font-size:7px;
  letter-spacing:.09em;
  text-transform:uppercase;
}
body.page-admin .admin-sidebar{
  border-color:rgba(85,232,121,.16)!important;
  background:linear-gradient(180deg,rgba(4,20,9,.95),rgba(3,12,7,.92))!important;
  box-shadow:0 24px 80px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
body.page-admin .admin-sidebar nav button{position:relative;overflow:hidden}
body.page-admin .admin-sidebar nav button::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  border-radius:0 4px 4px 0;
  background:#54e57a;
  transform:scaleY(0);
  transition:transform .2s ease;
}
body.page-admin .admin-sidebar nav button.active::after{transform:scaleY(1)}
body.page-admin .admin-sidebar nav button.active{
  background:linear-gradient(90deg,rgba(61,218,101,.18),rgba(61,218,101,.07))!important;
  box-shadow:none!important;
}
body.page-admin .admin-head-actions{position:relative}
.admin-notification-wrap{position:relative;flex:none}
.admin-notification-trigger{
  position:relative;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.13);
  border-radius:10px;
  background:rgba(255,255,255,.035);
  color:#8ceaa4;
  font-size:17px;
  cursor:pointer;
}
.admin-notification-trigger:hover,.admin-notification-trigger[aria-expanded=true]{border-color:rgba(78,232,131,.4);background:rgba(78,232,131,.1)}
.admin-notification-trigger>b{
  position:absolute;
  top:-5px;
  right:-5px;
  min-width:18px;
  height:18px;
  display:grid;
  place-items:center;
  padding:0 4px;
  border:2px solid #071009;
  border-radius:99px;
  background:#f0bd51;
  color:#171006;
  font-size:7px;
}
.admin-notification-panel{
  position:absolute;
  z-index:2500;
  top:50px;
  right:0;
  width:min(390px,calc(100vw - 30px));
  overflow:hidden;
  border:1px solid rgba(111,238,142,.25);
  border-radius:17px;
  background:#071009;
  box-shadow:0 35px 100px rgba(0,0,0,.66);
}
.admin-notification-panel>header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:15px;
  padding:17px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.admin-notification-panel h2{margin:0;color:#fff;font-size:22px}
.admin-notification-panel>header>span{padding:5px 7px;border-radius:99px;background:rgba(78,232,131,.09);color:#7be397;font-size:7px;font-weight:900;text-transform:uppercase}
.admin-notification-panel>div{max-height:390px;overflow-y:auto;padding:7px}
.admin-notification-panel>div>button{
  width:100%;
  min-height:64px;
  display:grid;
  grid-template-columns:32px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:8px;
  border:0;
  border-radius:11px;
  background:transparent;
  color:#fff;
  text-align:left;
  cursor:pointer;
}
.admin-notification-panel>div>button:hover{background:rgba(78,232,131,.08)}
.admin-notification-panel button>i{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:rgba(95,168,255,.1);color:#8ac4ff;font-size:9px;font-style:normal;font-weight:900}
.admin-notification-panel button>i.warning{background:rgba(255,183,65,.1);color:#ffc266}
.admin-notification-panel button>i.success{background:rgba(78,232,131,.1);color:#81e99c}
.admin-notification-panel button>span{min-width:0;display:grid;gap:4px}
.admin-notification-panel button strong,.admin-notification-panel button small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-notification-panel button strong{font-size:9px}.admin-notification-panel button small{color:rgba(255,255,255,.34);font-size:7px}
.admin-notification-panel button>b{color:#7ee399;font-size:12px}
.admin-notification-panel>div>p{margin:0;padding:45px 15px;color:rgba(255,255,255,.38);font-size:9px;text-align:center}

/* Official results */
.result-control-workspace{display:grid;gap:15px;padding-bottom:45px}
.result-control-top{display:grid;grid-template-columns:minmax(360px,1fr) minmax(220px,.42fr);gap:13px;align-items:stretch}
.result-publish-form,.result-summary-stack article,.result-published-list{
  border:1px solid rgba(255,255,255,.11);
  background:linear-gradient(145deg,rgba(7,20,12,.9),rgba(5,11,8,.72));
  box-shadow:0 22px 65px rgba(0,0,0,.25);
}
.result-publish-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:21px;border-radius:20px}
.result-publish-form>header{grid-column:1/-1;display:grid;grid-template-columns:46px minmax(0,1fr);gap:12px;align-items:center;margin-bottom:3px}
.result-publish-form>header>span{width:46px;height:46px;display:grid;place-items:center;border:1px solid rgba(78,232,131,.2);border-radius:13px;background:rgba(78,232,131,.08);color:#7de798;font-size:18px}
.result-publish-form h2,.result-published-list h2{margin:0;color:#fff;font-size:27px}
.result-publish-form>header p:last-child{margin:5px 0 0;color:rgba(255,255,255,.36);font-size:8px;line-height:1.5}
.result-publish-form label{min-width:0;display:grid;gap:6px}
.result-publish-form label>span,.result-published-list label>span{color:rgba(255,255,255,.43);font-size:8px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.result-publish-form input,.result-publish-form select,.result-published-list select{
  width:100%;
  height:46px;
  min-width:0;
  padding:0 11px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  outline:0;
  background:#0a1510;
  color:#fff;
  font-size:9px;
}
.result-publish-form input:focus,.result-publish-form select:focus,.result-published-list select:focus{border-color:#51e278;box-shadow:0 0 0 3px rgba(78,232,131,.08)}
.result-number-fields{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.result-publish-preview{grid-column:1/-1;min-height:66px;display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px;border:1px solid rgba(78,232,131,.12);border-radius:12px;background:rgba(78,232,131,.04)}
.result-publish-preview>span{height:8px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.07)}
.result-publish-preview>span i{width:var(--progress);height:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,#25b551,#6bed8c);transition:width .25s ease}
.result-publish-preview>div{min-width:0;display:grid;gap:4px}.result-publish-preview strong,.result-publish-preview small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.result-publish-preview strong{color:#fff;font-size:9px}.result-publish-preview small{color:rgba(255,255,255,.34);font-size:7px}
.result-publish-preview>b{color:#fff;font-size:22px}.result-publish-form>.button{grid-column:1/-1;width:100%;min-height:48px}
.result-summary-stack{display:grid;grid-template-rows:repeat(3,1fr);gap:9px}
.result-summary-stack article{display:grid;align-content:space-between;padding:17px;border-radius:15px}
.result-summary-stack span{color:rgba(255,255,255,.4);font-size:8px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.result-summary-stack strong{color:#fff;font-size:33px;line-height:1}.result-summary-stack small{color:#79dc94;font-size:8px}
.result-published-list{padding:21px;border-radius:20px}
.result-published-list>header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.result-published-list>header>label{width:min(230px,40%);display:grid;gap:6px}
.result-table-head,.result-table-body>article{display:grid;grid-template-columns:70px minmax(150px,1fr) minmax(150px,.9fr) 90px 120px;gap:11px;align-items:center}
.result-table-head{min-height:33px;padding:0 12px;color:rgba(255,255,255,.28);font-size:7px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.result-table-body{display:grid;gap:7px}
.result-table-body>article{position:relative;overflow:hidden;min-height:72px;padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.025)}
.result-table-body>article::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--team)}
.result-table-body>article>b{color:#8feaa7;font-size:16px}.result-table-body article>div{min-width:0;display:grid;gap:4px}
.result-table-body article strong,.result-table-body article small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.result-table-body article strong{color:#fff;font-size:9px}.result-table-body article small{color:rgba(255,255,255,.34);font-size:7px}
.result-table-body article>em{color:#fff;font-size:20px;font-style:normal;font-weight:900}.result-table-body article>em small{margin-left:3px;font-size:7px}
.result-table-body article>span{display:flex;gap:5px;justify-content:flex-end}
.result-table-body article>span button{min-height:31px;padding:0 9px;border:1px solid rgba(255,255,255,.1);border-radius:7px;background:rgba(255,255,255,.035);color:#fff;font-size:7px;cursor:pointer}
.result-table-body article>span button:hover{border-color:rgba(78,232,131,.34);background:rgba(78,232,131,.08)}
.result-table-body article>span button.danger{border-color:rgba(255,105,105,.15);color:#ffaaaa}.result-empty{min-height:240px!important}

/* Score management with undo history */
.score-management-workspace{display:grid;gap:14px;padding-bottom:45px}
.score-management-hero{display:grid;grid-template-columns:minmax(240px,.75fr) minmax(460px,1.25fr);gap:20px;align-items:center;padding:21px;border:1px solid rgba(255,255,255,.11);border-radius:20px;background:linear-gradient(120deg,rgba(8,29,14,.88),rgba(5,12,8,.72));box-shadow:0 22px 65px rgba(0,0,0,.24)}
.score-management-hero h2{margin:0;color:#fff;font-size:30px}.score-management-hero>div:first-child>p:last-child{margin:7px 0 0;color:rgba(255,255,255,.4);font-size:9px;line-height:1.6}
.score-management-hero>div:last-child{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.score-management-hero article{min-height:88px;display:grid;align-content:space-between;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.025)}
.score-management-hero article span{color:rgba(255,255,255,.35);font-size:7px;font-weight:900;text-transform:uppercase}.score-management-hero article strong{overflow:hidden;color:#fff;font-size:24px;text-overflow:ellipsis;white-space:nowrap}.score-management-hero article small{color:#75dc91;font-size:7px}
.score-management-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:13px;align-items:start}
.score-management-layout>.score-editor-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.score-history-panel{position:sticky;top:210px;overflow:hidden;border:1px solid rgba(255,255,255,.11);border-radius:18px;background:linear-gradient(145deg,rgba(7,18,11,.9),rgba(5,11,8,.72));box-shadow:0 20px 60px rgba(0,0,0,.24)}
.score-history-panel>header{display:flex;align-items:flex-start;justify-content:space-between;padding:17px;border-bottom:1px solid rgba(255,255,255,.08)}
.score-history-panel h2{margin:0;color:#fff;font-size:21px}.score-history-panel>header>span{min-width:25px;padding:5px;border-radius:99px;background:rgba(78,232,131,.09);color:#78e596;font-size:8px;text-align:center}
.score-history-panel>div{max-height:535px;display:grid;gap:5px;overflow-y:auto;padding:7px}
.score-history-panel article{min-height:58px;display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:9px;align-items:center;padding:8px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(255,255,255,.02)}
.score-history-panel article>i{width:7px;height:7px;border-radius:50%;background:var(--team);box-shadow:0 0 10px var(--team)}
.score-history-panel article>span{min-width:0;display:grid;gap:4px}.score-history-panel article strong,.score-history-panel article small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.score-history-panel article strong{color:#fff;font-size:12px}.score-history-panel article small{color:rgba(255,255,255,.34);font-size:7px}
.score-history-panel article button{min-height:29px;padding:0 8px;border:1px solid rgba(78,232,131,.18);border-radius:7px;background:rgba(78,232,131,.06);color:#82e99c;font-size:7px;font-weight:900;cursor:pointer}
.score-history-panel article button:hover{border-color:rgba(78,232,131,.4);color:#fff}
.score-history-empty{min-height:220px;display:grid;place-content:center;justify-items:center;padding:20px;text-align:center}.score-history-empty>span{color:#74df90;font-size:28px}.score-history-empty strong{margin-top:9px;color:#fff;font-size:11px}.score-history-empty small{margin-top:5px;color:rgba(255,255,255,.32);font-size:7px}

/* Bulk student operations */
.student-bulk-toolbar{min-height:58px;display:grid;grid-template-columns:auto auto minmax(110px,1fr) minmax(130px,1fr) auto;gap:7px;align-items:end;margin-bottom:11px;padding:8px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.025)}
.student-bulk-toolbar.active{border-color:rgba(78,232,131,.24);background:rgba(78,232,131,.055)}
.student-bulk-toolbar>button{height:38px;padding:0 10px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(255,255,255,.035);color:#fff;font-size:7px;font-weight:900;cursor:pointer}
.student-bulk-toolbar .bulk-select-all{display:flex;align-items:center;gap:6px}
.student-bulk-toolbar .bulk-select-all i{width:16px;height:16px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:5px;color:#071009;font-size:7px;font-style:normal}
.student-bulk-toolbar .bulk-select-all i.checked{border-color:#5be57f;background:#5be57f}
.student-bulk-toolbar>span{align-self:center;display:grid;color:rgba(255,255,255,.38);font-size:7px;text-align:center}.student-bulk-toolbar>span strong{color:#fff;font-size:14px}
.student-bulk-toolbar label{display:grid;gap:5px}.student-bulk-toolbar label>span{color:rgba(255,255,255,.35);font-size:7px;font-weight:900;text-transform:uppercase}
.student-bulk-toolbar select{width:100%;height:38px;min-width:0;padding:0 8px;border:1px solid rgba(255,255,255,.1);border-radius:8px;outline:0;background:#0b1510;color:#fff;font-size:8px}
.student-bulk-toolbar .bulk-apply{border-color:rgba(78,232,131,.25);background:rgba(78,232,131,.1);color:#8ceda5}.student-bulk-toolbar .bulk-apply:disabled{cursor:default;opacity:.3}
.college-student-list article{grid-template-columns:28px 72px minmax(140px,1fr) minmax(140px,.72fr) auto!important}
.college-student-list article.selected{border-color:rgba(78,232,131,.42)!important;background:rgba(78,232,131,.09)!important}
.student-row-select{width:22px;height:22px;display:grid!important;place-items:center;position:relative;cursor:pointer}
.student-row-select input{position:absolute;opacity:0}.student-row-select i{width:20px;height:20px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.17);border-radius:6px;color:transparent;font-size:8px;font-style:normal}
.student-row-select input:checked+i{border-color:#5be57f;background:#5be57f;color:#071009}

@media(max-width:1100px){
  .score-management-layout{grid-template-columns:1fr}.score-history-panel{position:relative;top:auto}.score-history-panel>div{max-height:300px}
  .student-bulk-toolbar{grid-template-columns:auto auto 1fr 1fr}.student-bulk-toolbar .bulk-apply{grid-column:3/-1}
}
@media(max-width:900px){
  .result-control-top{grid-template-columns:1fr}.result-summary-stack{grid-template-columns:repeat(3,1fr);grid-template-rows:none}
  .score-management-hero{grid-template-columns:1fr}.score-management-layout>.score-editor-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .result-table-head{display:none}.result-table-body>article{grid-template-columns:55px minmax(130px,1fr) minmax(120px,.8fr) 75px}.result-table-body article>span{grid-column:2/-1;justify-content:flex-start}
}
@media(max-width:759px){
  body.page-admin .admin-sidebar nav{grid-template-columns:repeat(11,minmax(64px,1fr))!important}
  body.page-admin .admin-workspace-head{position:relative;top:auto;min-height:0;display:grid!important;grid-template-columns:1fr;gap:13px;padding:15px;border-radius:16px}
  body.page-admin .admin-workspace-head>div:first-child{width:100%;min-width:0}
  body.page-admin .admin-head-actions{width:100%;display:grid!important;grid-template-columns:32px 32px minmax(0,1fr) auto;gap:7px;justify-items:stretch}
  body.page-admin .admin-head-actions>.admin-search-trigger,body.page-admin .admin-head-actions>.admin-notification-wrap{width:32px}
  body.page-admin .admin-head-actions>.admin-preview-link{width:100%;min-width:0}
  body.page-admin .admin-head-actions>.button{min-width:68px}
  .admin-head-breadcrumb{display:none}.admin-notification-trigger{width:32px;height:32px}.admin-notification-panel{position:fixed;top:74px;right:10px}
  .result-publish-form,.result-published-list{padding:16px;border-radius:17px}.result-publish-form{grid-template-columns:1fr}.result-publish-form>header,.result-number-fields,.result-publish-preview,.result-publish-form>.button{grid-column:1}
  .result-summary-stack{grid-template-columns:1fr}.result-published-list>header{align-items:flex-start}.result-published-list>header>label{width:48%}
  .result-table-body>article{grid-template-columns:43px minmax(0,1fr) 68px}.result-table-body article>div:nth-of-type(2){grid-column:2}.result-table-body article>em{grid-column:3;grid-row:1/3}.result-table-body article>span{grid-column:2/-1}
  .score-management-hero{padding:16px;border-radius:17px}.score-management-hero>div:last-child{grid-template-columns:1fr}.score-management-layout>.score-editor-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .student-bulk-toolbar{grid-template-columns:1fr 1fr}.student-bulk-toolbar>span{order:-1}.student-bulk-toolbar label{grid-column:span 1}.student-bulk-toolbar .bulk-apply{grid-column:1/-1}
  .college-student-list article{grid-template-columns:24px 62px minmax(0,1fr) auto!important}.college-student-meta{grid-column:3!important}.college-student-list .row-actions{grid-column:4!important;grid-row:1/3!important}
}
@media(max-width:500px){
  .result-publish-preview{grid-template-columns:1fr auto}.result-publish-preview>span{grid-column:1/-1}.result-published-list>header{display:grid}.result-published-list>header>label{width:100%}
  .result-table-body>article{grid-template-columns:38px minmax(0,1fr) 60px;padding:9px 8px}
  .score-management-layout>.score-editor-grid{grid-template-columns:1fr!important}.score-management-hero article{min-height:72px}
  .student-bulk-toolbar{grid-template-columns:1fr}.student-bulk-toolbar>*{grid-column:1!important}.college-student-list article{grid-template-columns:24px minmax(0,1fr) auto!important}.college-student-list article>b{grid-column:2}.college-student-name{grid-column:2}.college-student-meta{grid-column:2!important}.college-student-list .row-actions{grid-column:3!important;grid-row:1/5!important}
}

/* Judging control room */
.judging-workspace{display:grid;gap:14px;padding-bottom:50px}
.judging-command-hero{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(520px,1.28fr);gap:22px;align-items:center;padding:24px;border:1px solid rgba(255,255,255,.11);border-radius:22px;background:radial-gradient(circle at 12% 20%,rgba(67,217,111,.14),transparent 34%),linear-gradient(125deg,rgba(7,26,13,.94),rgba(5,11,8,.76));box-shadow:0 24px 75px rgba(0,0,0,.28)}
.judging-command-hero h2{margin:0;color:#fff;font-size:32px;letter-spacing:-.04em}.judging-command-hero>div:first-child>p:last-child{max-width:470px;margin:8px 0 0;color:rgba(255,255,255,.43);font-size:9px;line-height:1.7}
.judging-command-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.judging-command-metrics article{min-height:96px;display:grid;align-content:space-between;padding:13px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.025)}
.judging-command-metrics span{color:rgba(255,255,255,.35);font-size:7px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.judging-command-metrics strong{color:#fff;font-size:29px;line-height:1}.judging-command-metrics small{color:#77df94;font-size:7px}
.judging-integrity-alert{min-height:58px;display:flex;align-items:center;gap:11px;padding:10px 15px;border:1px solid rgba(143,227,18,.22);border-radius:14px;background:rgba(143,227,18,.065)}.judging-integrity-alert>i{width:30px;height:30px;display:grid;place-items:center;border-radius:99px;background:rgba(143,227,18,.13);color:#8fe312;font-size:11px;font-style:normal;font-weight:900}.judging-integrity-alert>span{display:grid;gap:3px}.judging-integrity-alert strong{color:#ffffff;font-size:9px}.judging-integrity-alert small{color:rgba(255,255,255,.5);font-size:7px}
.judging-setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;align-items:start}.judging-setup-card,.judge-score-desk,.judge-score-ledger{overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:linear-gradient(145deg,rgba(7,18,11,.91),rgba(5,11,8,.74));box-shadow:0 20px 60px rgba(0,0,0,.22)}
.judging-setup-card>header,.judge-score-ledger>header{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.08)}.judging-setup-card h2,.judge-score-ledger h3{margin:0;color:#fff;font-size:22px}.judging-setup-card header small{display:block;margin-top:4px;color:rgba(255,255,255,.34);font-size:7px}
.judging-setup-card>header>button{min-height:34px;padding:0 11px;border:1px solid rgba(78,232,131,.22);border-radius:9px;background:rgba(78,232,131,.07);color:#8deaa6;font-size:7px;font-weight:900;cursor:pointer}.judging-setup-card>header>button:hover{border-color:rgba(78,232,131,.5);color:#fff}
.judging-inline-form{display:grid;gap:10px;padding:15px 18px;border-bottom:1px solid rgba(78,232,131,.12);background:rgba(78,232,131,.025)}.judging-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.judging-inline-form label{display:grid;gap:5px}.judging-inline-form label>span,.judge-score-form label>span,.judge-score-desk>header label>span{color:rgba(255,255,255,.38);font-size:7px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.judging-inline-form input,.judging-inline-form select,.judging-inline-form textarea,.judge-score-form input,.judge-score-form select,.judge-score-form textarea,.judge-score-desk>header select{width:100%;min-width:0;border:1px solid rgba(255,255,255,.1);border-radius:9px;outline:0;background:#0a1510;color:#fff;font-size:8px}.judging-inline-form input,.judging-inline-form select,.judge-score-form input,.judge-score-form select,.judge-score-desk>header select{height:40px;padding:0 10px}.judging-inline-form textarea,.judge-score-form textarea{resize:vertical;padding:10px;line-height:1.5}
.judging-inline-form input:focus,.judging-inline-form select:focus,.judging-inline-form textarea:focus,.judge-score-form input:focus,.judge-score-form select:focus,.judge-score-form textarea:focus,.judge-score-desk>header select:focus{border-color:#54e17a;box-shadow:0 0 0 3px rgba(78,232,131,.07)}.judging-inline-form>.button{width:100%;min-height:43px}.judging-check{display:flex!important;align-items:center;gap:8px}.judging-check input{width:15px;height:15px}.judging-check span{text-transform:none!important}
.judging-record-list{max-height:420px;display:grid;gap:6px;overflow:auto;padding:8px}.judging-record-list article{min-height:72px;display:grid;grid-template-columns:65px minmax(0,1fr) 82px auto;gap:10px;align-items:center;padding:10px;border:1px solid rgba(255,255,255,.075);border-radius:12px;background:rgba(255,255,255,.022)}.judging-record-list article.inactive{opacity:.48}.judging-record-list article>b{overflow:hidden;color:#73e390;font-size:8px;text-overflow:ellipsis}.judging-record-list article>span{min-width:0;display:grid;gap:4px}.judging-record-list article strong,.judging-record-list article small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.judging-record-list article strong{color:#fff;font-size:9px}.judging-record-list article small{color:rgba(255,255,255,.34);font-size:7px}.judging-record-list article>em{display:grid;gap:3px;color:#fff;font-size:12px;font-style:normal;font-weight:900;text-align:right}.judging-record-list article>em small{font-size:6px;font-weight:500}.judging-record-list article>div{display:flex;gap:5px}.judging-record-list button,.judge-score-table button{min-height:29px;padding:0 8px;border:1px solid rgba(255,255,255,.1);border-radius:7px;background:rgba(255,255,255,.035);color:#fff;font-size:7px;cursor:pointer}.judging-record-list button.danger,.judge-score-table button.danger{border-color:rgba(255,105,105,.15);color:#ffaaaa}.judge-avatar{width:34px;height:34px;display:grid!important;place-items:center;border-radius:10px;background:rgba(78,232,131,.1);font-size:9px!important}.judging-empty{min-height:120px;display:grid;place-items:center;margin:0;padding:20px;color:rgba(255,255,255,.3);font-size:8px;text-align:center}
.judge-score-desk>header{min-height:93px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 21px;border-bottom:1px solid rgba(255,255,255,.08)}.judge-score-desk>header h2{margin:0;color:#fff;font-size:27px}.judge-score-desk>header>div>span{display:block;margin-top:5px;color:rgba(255,255,255,.38);font-size:8px}.judge-score-desk>header label{width:min(310px,40%);display:grid;gap:6px}
.judge-score-layout{display:grid;grid-template-columns:minmax(300px,.62fr) minmax(440px,1.38fr);gap:0;border-bottom:1px solid rgba(255,255,255,.08)}.judge-score-form{display:grid;gap:10px;padding:19px;border-right:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.012)}.judge-score-form label{display:grid;gap:6px}.judge-score-form-head{display:flex;align-items:center;gap:10px;margin-bottom:2px}.judge-score-form-head>span{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(78,232,131,.2);border-radius:10px;background:rgba(78,232,131,.065);color:#71df8e;font-size:8px}.judge-score-form-head>div{display:grid;gap:3px}.judge-score-form-head strong{color:#fff;font-size:13px}.judge-score-form-head small{color:rgba(255,255,255,.34);font-size:7px}.judge-score-input>span{display:flex;justify-content:space-between}.judge-score-input>span small{color:#70df8e;font-size:7px}.judge-score-input input{height:60px;color:#fff;font-size:24px;font-weight:900}.judge-score-form>.button{width:100%;min-height:48px}.judge-score-blocker{margin:0;color:#ffc5a8;font-size:7px;line-height:1.5}
.judge-live-ranking{min-width:0;padding:19px}.judge-live-ranking>header{display:flex;justify-content:space-between;gap:12px;margin-bottom:13px}.judge-live-ranking h3{margin:0;color:#fff;font-size:22px}.judge-live-ranking>header>span,.judge-score-ledger>header>span{align-self:center;padding:6px 9px;border-radius:99px;background:rgba(78,232,131,.07);color:#7fe79a;font-size:7px}.judge-live-ranking>div{display:grid;gap:6px}.judge-live-ranking article{min-height:66px;display:grid;grid-template-columns:32px 7px minmax(0,1fr) 78px;gap:10px;align-items:center;padding:9px 11px;border:1px solid rgba(255,255,255,.075);border-radius:11px;background:rgba(255,255,255,.02)}.judge-live-ranking article>b{color:rgba(255,255,255,.34);font-size:10px}.judge-live-ranking article>i{width:7px;height:7px;border-radius:50%;background:var(--team);box-shadow:0 0 10px var(--team)}.judge-live-ranking article>span{min-width:0;display:grid;gap:4px}.judge-live-ranking article>span strong,.judge-live-ranking article>span small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.judge-live-ranking article>span strong{color:#fff;font-size:9px}.judge-live-ranking article>span small{color:rgba(255,255,255,.34);font-size:7px}.judge-live-ranking article>span em{height:3px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.07)}.judge-live-ranking article>span em i{height:100%;display:block;border-radius:inherit;background:#57df7a}.judge-live-ranking article>strong{color:#fff;font-size:18px;text-align:right}.judge-live-ranking article>strong small{margin-left:2px;color:rgba(255,255,255,.3);font-size:6px}.judge-live-ranking>footer{margin-top:12px;color:rgba(255,255,255,.3);font-size:7px;line-height:1.6}
.judge-score-ledger{margin:13px}.judge-score-table{padding:8px}.judge-score-table-head,.judge-score-table>article{display:grid;grid-template-columns:1fr 1fr 1fr 70px 100px 64px;gap:9px;align-items:center}.judge-score-table-head{min-height:29px;padding:0 9px;color:rgba(255,255,255,.27);font-size:6px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.judge-score-table>article{min-height:61px;padding:9px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(255,255,255,.02)}.judge-score-table article>span{min-width:0;display:grid;gap:3px}.judge-score-table article strong,.judge-score-table article small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.judge-score-table article strong{color:#fff;font-size:8px}.judge-score-table article small,.judge-score-table time{color:rgba(255,255,255,.32);font-size:6px}.judge-score-table article>b{color:#7ce397;font-size:14px}.judge-score-table article>b small{color:rgba(255,255,255,.3);font-size:6px}
@media(max-width:1180px){.judging-command-hero{grid-template-columns:1fr}.judging-setup-grid{grid-template-columns:1fr}.judge-score-layout{grid-template-columns:360px minmax(0,1fr)}}
@media(max-width:900px){.judging-command-metrics{grid-template-columns:repeat(2,1fr)}.judge-score-layout{grid-template-columns:1fr}.judge-score-form{border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}.judge-score-table-head{display:none}.judge-score-table>article{grid-template-columns:1fr 1fr 70px 64px}.judge-score-table article>span:nth-child(3),.judge-score-table article>time{grid-column:span 1}}
@media(max-width:759px){body.page-admin .admin-sidebar nav{grid-template-columns:repeat(12,minmax(64px,1fr))!important}.judging-command-hero{padding:17px;border-radius:17px}.judging-command-hero h2{font-size:27px}.judge-score-desk>header{align-items:flex-start;display:grid}.judge-score-desk>header label{width:100%}.judging-record-list article{grid-template-columns:52px minmax(0,1fr) 68px}.judging-record-list article>div{grid-column:2/-1}.judge-score-ledger{margin:8px}.judge-score-table>article{grid-template-columns:1fr 66px}.judge-score-table article>span:nth-child(2),.judge-score-table article>span:nth-child(3){grid-column:1}.judge-score-table article>b{grid-column:2;grid-row:1}.judge-score-table article>time{grid-column:1}.judge-score-table article>button{grid-column:2}}
@media(max-width:500px){.judging-command-metrics{grid-template-columns:1fr 1fr}.judging-form-grid{grid-template-columns:1fr}.judging-record-list article{grid-template-columns:46px minmax(0,1fr)}.judging-record-list article>em{grid-column:2;text-align:left}.judging-record-list article>div{grid-column:2}.judge-live-ranking{padding:13px}.judge-live-ranking article{grid-template-columns:25px 6px minmax(0,1fr) 61px}.judge-score-form{padding:14px}}

/* One consistent editorial typeface across the complete platform. */
body,
body *:not(svg):not(path):not(circle):not(rect):not(line):not(polyline):not(polygon){
  font-family:"Ubuntu",Arial,sans-serif!important;
}
body [lang="ar"],
body [lang="ar"] *,
body [dir="rtl"],
body [dir="rtl"] *,
body .team-name-ar,
body .team-name-input,
body .team-name-select,
body .team-arabic-select,
body .arabic-class-select{
  font-family:"Noto Naskh Arabic","Ubuntu",serif!important;
}

/* Institutional Impact & Stats Counter Section */
.home-stats-counter {
  margin-top: 36px;
  margin-bottom: 36px;
}
.home-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.home-stat-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  border: 1px solid var(--modern-line);
  border-radius: 20px;
  background: var(--modern-surface);
  box-shadow: var(--modern-shadow);
  backdrop-filter: blur(12px);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.home-stat-card:hover {
  transform: translateY(-5px);
  border-color: var(--modern-line-strong);
  background: var(--modern-accent-soft);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
}
.stat-card-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(89, 223, 123, 0.14);
  color: var(--modern-accent);
  box-shadow: inset 0 0 14px rgba(89, 223, 123, 0.2);
}
.stat-card-icon svg {
  width: 26px;
  height: 26px;
}
.stat-card-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stat-number {
  color: #fff;
  font: 900 clamp(26px, 2.5vw, 36px)/1.05 "Ubuntu", "Ubuntu", sans-serif;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff, #86efac);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-label {
  color: #e2f7e7;
  font-size: 13px;
  font-weight: 800;
}
.stat-desc {
  color: var(--modern-muted);
  font-size: 11px;
}

/* Event Schedule Details Banner (Matching Reference Image 2) */
.home-schedule-banner {
  margin-top: 48px;
  margin-bottom: 48px;
}
.schedule-banner-container {
  position: relative;
  min-height: 340px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
  padding: clamp(28px, 5vw, 54px);
  border: 1px solid var(--modern-line);
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(15, 28, 20, 0.88), rgba(6, 14, 10, 0.94));
  box-shadow: var(--modern-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(18px);
  overflow: hidden;
}
.schedule-banner-left {
  position: relative;
  z-index: 2;
}
.schedule-banner-overline {
  margin: 0 0 10px;
  color: var(--modern-accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.schedule-banner-title {
  margin: 0 0 12px;
  color: #ffffff;
  font: 900 clamp(32px, 4.5vw, 52px)/1.04 "Ubuntu", sans-serif;
  letter-spacing: -0.03em;
}
.schedule-banner-zigzag {
  color: var(--modern-accent);
  margin: 10px 0 16px;
}
.schedule-banner-copy {
  margin: 0 0 24px;
  color: var(--modern-muted);
  font-size: 14px;
  line-height: 1.65;
  max-width: 440px;
}
.schedule-banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 12px;
  background: var(--modern-accent);
  color: #07100b;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.schedule-banner-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(89, 223, 123, 0.35);
}
.schedule-banner-right {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
}
.schedule-bubbles-visual {
  position: relative;
  width: 320px;
  height: 280px;
}
.schedule-bubble {
  position: absolute;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}
/* Bubble 1: Foreground Coral/Orange (Matching Image 2 04th May SATURDAY) */
.bubble-day1 {
  z-index: 2;
  left: 20px;
  bottom: 10px;
  width: 195px;
  height: 195px;
  background: linear-gradient(135deg, #ff6b57, #ff8c42);
  box-shadow: 0 22px 60px rgba(255, 107, 87, 0.45);
}
.bubble-day1:hover {
  transform: scale(1.08) translateY(-6px);
  box-shadow: 0 28px 75px rgba(255, 107, 87, 0.65);
}
/* Bubble 2: Background Sky Blue/Cyan (Matching Image 2 05th May SUNDAY) */
.bubble-day2 {
  z-index: 1;
  right: 10px;
  top: 10px;
  width: 185px;
  height: 185px;
  background: linear-gradient(135deg, #7ad3ff, #829fff);
  box-shadow: 0 20px 50px rgba(122, 211, 255, 0.38);
}
.bubble-day2:hover {
  transform: scale(1.08) translateY(-6px);
  box-shadow: 0 28px 70px rgba(122, 211, 255, 0.55);
}
.bubble-date {
  font: 900 clamp(20px, 2.2vw, 26px)/1 "Ubuntu", sans-serif;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.bubble-day {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.9;
}

@media(max-width: 900px) {
  .home-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .schedule-banner-container {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .schedule-bubbles-visual {
    margin: 0 auto;
  }
}
@media(max-width: 560px) {
  .home-stats-grid {
    grid-template-columns: 1fr;
  }
  .schedule-bubbles-visual {
    width: 260px;
    height: 230px;
  }
  .bubble-day1 {
    width: 155px;
    height: 155px;
    left: 10px;
  }
  .bubble-day2 {
    width: 145px;
    height: 145px;
    right: 0;
  }
}

/* Admin command center redesign · July 2026 */
html:has(body.page-admin) {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  scrollbar-gutter: stable;
}

body.page-admin {
  --admin-surface: rgba(8, 17, 12, .9);
  --admin-surface-soft: rgba(11, 22, 15, .72);
  --admin-border: rgba(222, 255, 231, .105);
  --admin-muted: rgba(229, 242, 233, .48);
  --admin-green: #5be57f;
  --admin-green-soft: #9af0af;
  background:
    radial-gradient(circle at 72% 8%, rgba(65, 191, 99, .13), transparent 25rem),
    linear-gradient(180deg, rgba(5, 10, 7, .82), rgba(3, 7, 5, .97)),
    var(--page-image) center / cover fixed;
  color: #f4faf6;
}

body.page-admin .site-footer { display: none; }
body.page-admin main {
  width: min(1540px, calc(100% - 40px));
  max-width: none;
  overflow: visible;
}

body.page-admin .admin-control-shell {
  width: 100%;
  max-width: none;
  grid-template-columns: 226px minmax(0, 1fr);
  gap: 22px;
  padding: 94px 0 56px;
}

body.page-admin .admin-sidebar {
  top: 94px;
  height: calc(100vh - 112px) !important;
  min-height: 560px !important;
  padding: 15px 12px 13px;
  overflow: hidden;
  border: 1px solid var(--admin-border);
  border-radius: 22px;
  background:
    radial-gradient(circle at 24% 0, rgba(91, 229, 127, .12), transparent 15rem),
    linear-gradient(180deg, rgba(11, 24, 16, .97), rgba(5, 11, 8, .96));
  box-shadow: 0 26px 80px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .035);
  backdrop-filter: blur(24px);
}

body.page-admin .admin-sidebar::before {
  inset: 18px auto 18px 0;
  background: linear-gradient(transparent, rgba(91, 229, 127, .75), transparent);
}

body.page-admin .admin-side-brand {
  gap: 11px;
  margin: 0 3px;
  padding: 5px 4px 17px;
  border-color: rgba(255, 255, 255, .08);
}

body.page-admin .admin-side-brand img {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  box-shadow: 0 9px 22px rgba(0, 0, 0, .25);
}

body.page-admin .admin-side-brand strong { font-size: 14px; letter-spacing: .01em; }
body.page-admin .admin-side-brand small { margin-top: 3px; color: rgba(190, 230, 201, .47); font-size: 6px; }

body.page-admin .admin-sidebar nav {
  display: block;
  min-height: 0;
  margin: 8px -2px 8px 0;
  padding: 0 5px 10px 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(91, 229, 127, .35) transparent;
}

body.page-admin .admin-nav-label {
  margin: 15px 9px 6px;
  color: rgba(215, 237, 221, .31);
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

body.page-admin .admin-sidebar nav button {
  position: relative;
  min-height: 39px;
  margin-bottom: 3px;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: rgba(226, 239, 230, .55);
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

body.page-admin .admin-sidebar nav button:hover {
  transform: translateX(2px);
  border-color: rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .045);
  color: #fff;
}

body.page-admin .admin-sidebar nav button.active {
  border-color: rgba(91, 229, 127, .16);
  background: linear-gradient(90deg, rgba(91, 229, 127, .17), rgba(91, 229, 127, .055)) !important;
  color: #fff;
}

body.page-admin .admin-sidebar nav button::after {
  inset: 8px auto 8px -1px;
  width: 3px;
  border-radius: 0 4px 4px 0;
}

body.page-admin .admin-sidebar nav b {
  color: #7ce998;
  font-size: 13px;
  font-weight: 500;
}

body.page-admin .admin-sidebar nav span { font-size: 9px; letter-spacing: .01em; }
body.page-admin .admin-sidebar nav small { background: rgba(255, 255, 255, .055); color: rgba(255, 255, 255, .43); font-size: 6px; }

body.page-admin .admin-identity {
  margin: auto 2px 0;
  padding: 10px;
  border-color: rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .025);
}

body.page-admin .admin-identity > span {
  width: 32px;
  height: 32px;
  background: linear-gradient(145deg, rgba(91, 229, 127, .19), rgba(91, 229, 127, .07));
  font-size: 9px;
}

body.page-admin .admin-home-link { margin-top: 5px; padding: 8px; color: rgba(255, 255, 255, .38); font-size: 8px; }
body.page-admin .admin-workspace { min-width: 0; }

body.page-admin .admin-workspace-head {
  top: 84px;
  min-height: 103px;
  gap: 24px;
  margin-bottom: 14px;
  padding: 15px 16px 15px 20px;
  border: 1px solid var(--admin-border);
  border-radius: 18px;
  background: linear-gradient(115deg, rgba(7, 17, 11, .95), rgba(8, 15, 11, .9));
  box-shadow: 0 18px 54px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .03);
  backdrop-filter: blur(24px);
}

body.page-admin .admin-workspace-head::before {
  content: "";
  position: absolute;
  inset: 18px auto 18px 0;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--admin-green);
}

body.page-admin .admin-workspace-head h1 {
  margin: 3px 0 0;
  background: none;
  color: #f8fcf9;
  font-size: clamp(31px, 3.1vw, 43px);
  letter-spacing: -.035em;
}

body.page-admin .admin-workspace-head > div:first-child > p:last-child {
  margin-top: 7px;
  color: var(--admin-muted);
  font-size: 8px;
}

body.page-admin .admin-head-actions { gap: 7px; }
body.page-admin .admin-search-trigger,
body.page-admin .admin-notification-trigger,
body.page-admin .admin-preview-link,
body.page-admin .admin-workspace-head .button {
  min-height: 38px;
  border-color: rgba(255, 255, 255, .1);
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
}

body.page-admin .admin-notification-trigger { width: 38px; height: 38px; }
body.page-admin .admin-workspace-head .button { min-width: 62px; padding-inline: 12px; }

body.page-admin .admin-overview { gap: 14px; padding-bottom: 22px; }
body.page-admin .admin-command-bar {
  position: relative;
  grid-template-columns: minmax(205px, 1.3fr) minmax(110px, .6fr) minmax(140px, .75fr) auto;
  border-color: var(--admin-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 16px 45px rgba(0, 0, 0, .2);
}

body.page-admin .admin-command-bar > div,
body.page-admin .admin-command-bar > button {
  min-height: 57px;
  padding: 11px 14px;
  background: linear-gradient(145deg, rgba(9, 20, 13, .94), rgba(5, 12, 8, .94));
}

body.page-admin .admin-command-time strong { font-size: 15px; }
body.page-admin .admin-command-bar > button { min-width: 166px; }

body.page-admin .admin-event-hero {
  position: relative;
  min-height: 238px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 175px;
  gap: 30px;
  align-items: center;
  overflow: hidden;
  padding: 30px 34px;
  border: 1px solid rgba(102, 236, 137, .19);
  border-radius: 24px;
  background:
    linear-gradient(105deg, rgba(10, 51, 23, .95), rgba(7, 26, 14, .9) 52%, rgba(5, 14, 9, .94)),
    var(--page-image) center 45% / cover;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .04);
}

body.page-admin .admin-event-hero::before {
  content: "";
  position: absolute;
  right: -70px;
  top: -130px;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(115, 238, 146, .1);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(91, 229, 127, .025), 0 0 0 110px rgba(91, 229, 127, .018);
}

body.page-admin .admin-event-hero > * { position: relative; z-index: 1; }
body.page-admin .admin-event-state {
  width: max-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 27px;
  padding: 6px 9px;
  border: 1px solid rgba(125, 237, 151, .18);
  border-radius: 99px;
  background: rgba(4, 13, 7, .38);
  color: #c7f7d1;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.page-admin .admin-event-state > i {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--admin-green);
  box-shadow: 0 0 12px rgba(91, 229, 127, .7);
}

body.page-admin .admin-event-state > span {
  overflow: hidden;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, .13);
  color: rgba(255, 255, 255, .42);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-admin .admin-event-hero h2 {
  max-width: 750px;
  margin: 5px 0 9px;
  color: #fff;
  font-size: clamp(35px, 4vw, 56px);
  line-height: .96;
  letter-spacing: -.04em;
}

body.page-admin .admin-event-hero-copy > p:not(.overline) {
  max-width: 680px;
  margin: 0;
  color: rgba(230, 247, 234, .57);
  font-size: 9px;
  line-height: 1.55;
}

body.page-admin .admin-event-hero-copy > p strong { color: #a6f2b8; }
body.page-admin .admin-event-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 19px; }
body.page-admin .admin-event-actions button,
body.page-admin .admin-event-actions a {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 9px;
  background: rgba(255, 255, 255, .045);
  color: #effaf2;
  font-size: 8px;
  font-weight: 900;
  cursor: pointer;
}

body.page-admin .admin-event-actions button {
  border-color: rgba(91, 229, 127, .35);
  background: var(--admin-green);
  color: #071009;
}

body.page-admin .admin-event-actions span { font-size: 13px; }
body.page-admin .admin-hero-readiness { display: grid; justify-items: center; gap: 13px; }
body.page-admin .admin-hero-readiness .admin-readiness-score { width: 108px; height: 108px; }
body.page-admin .admin-hero-readiness .admin-readiness-score::before { width: 88px; height: 88px; background: #082010; }
body.page-admin .admin-hero-readiness .admin-readiness-score strong { font-size: 22px; }
body.page-admin .admin-hero-readiness > p { display: grid; gap: 3px; margin: 0; text-align: center; }
body.page-admin .admin-hero-readiness > p strong { color: #fff; font-size: 9px; }
body.page-admin .admin-hero-readiness > p span { color: rgba(255, 255, 255, .39); font-size: 7px; }

body.page-admin .overview-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

body.page-admin .overview-metric {
  position: relative;
  min-width: 0;
  min-height: 122px;
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 8px 10px;
  align-content: center;
  padding: 15px;
  border: 1px solid var(--admin-border);
  border-radius: 16px;
  outline: 0;
  background: linear-gradient(145deg, rgba(11, 23, 15, .86), rgba(6, 13, 9, .8));
  color: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .16);
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

body.page-admin .overview-metric:hover,
body.page-admin .overview-metric:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--metric) 47%, transparent);
  background: linear-gradient(145deg, color-mix(in srgb, var(--metric) 10%, #0a1710), #07100b);
}

body.page-admin .overview-metric::after { opacity: .045; }
body.page-admin .overview-metric > span {
  width: 35px;
  height: 35px;
  grid-row: 1;
  border: 1px solid color-mix(in srgb, var(--metric) 22%, transparent);
  border-radius: 10px;
  font-size: 13px;
}

body.page-admin .overview-metric > div { min-width: 0; display: grid; gap: 2px; align-items: start; }
body.page-admin .overview-metric strong { overflow: hidden; font-size: 25px; text-overflow: ellipsis; white-space: nowrap; }
body.page-admin .overview-metric small { padding: 0; overflow: hidden; color: rgba(255, 255, 255, .58); font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
body.page-admin .overview-metric > p { grid-column: 1 / -1; margin: 0; color: rgba(255, 255, 255, .31); font-size: 7px; }
body.page-admin .overview-metric > i { position: absolute; right: 12px; bottom: 11px; color: color-mix(in srgb, var(--metric) 70%, white); font-size: 9px; font-style: normal; opacity: .55; }

body.page-admin .admin-focus-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: 12px;
}

body.page-admin .admin-focus-card,
body.page-admin .admin-event-flow {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--admin-border);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(9, 21, 13, .88), rgba(5, 12, 8, .8));
  box-shadow: 0 20px 55px rgba(0, 0, 0, .19);
}

body.page-admin .admin-focus-card > header,
body.page-admin .admin-event-flow > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

body.page-admin .admin-focus-card h2,
body.page-admin .admin-event-flow h2 { margin: 1px 0 0; color: #fff; font-size: 23px; }
body.page-admin .admin-focus-card > header > span,
body.page-admin .admin-event-flow > header > button {
  flex: none;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 99px;
  background: rgba(255, 255, 255, .035);
  color: rgba(255, 255, 255, .45);
  font-size: 6px;
  font-weight: 900;
  text-transform: uppercase;
}

body.page-admin .admin-focus-card > header > span.live {
  border-color: rgba(91, 229, 127, .2);
  background: rgba(91, 229, 127, .1);
  color: #84ee9f;
}

body.page-admin .admin-now-card > article {
  min-height: 72px;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(91, 229, 127, .15);
  border-radius: 13px;
  background: linear-gradient(90deg, rgba(91, 229, 127, .075), rgba(255, 255, 255, .02));
}

body.page-admin .admin-now-card time { color: #8af0a4; font-size: 16px; font-weight: 900; }
body.page-admin .admin-now-card article > div { min-width: 0; display: grid; gap: 4px; }
body.page-admin .admin-now-card article strong,
body.page-admin .admin-now-card article small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.page-admin .admin-now-card article strong { color: #fff; font-size: 11px; }
body.page-admin .admin-now-card article small { color: rgba(255, 255, 255, .37); font-size: 7px; }
body.page-admin .admin-now-card article > i { padding: 5px 7px; border-radius: 99px; background: rgba(91, 229, 127, .09); color: #82e99d; font-size: 6px; font-style: normal; font-weight: 900; text-transform: uppercase; }
body.page-admin .admin-now-card > footer { display: flex; gap: 7px; margin-top: 10px; }
body.page-admin .admin-now-card > footer button {
  flex: 1;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 9px;
  background: rgba(255, 255, 255, .03);
  color: rgba(255, 255, 255, .72);
  font-size: 7px;
  font-weight: 900;
  cursor: pointer;
}

body.page-admin .admin-now-card > footer button:first-child { border-color: rgba(91, 229, 127, .23); background: rgba(91, 229, 127, .09); color: #a2efb4; }
body.page-admin .admin-focus-empty { min-height: 72px; display: grid; place-items: center; border: 1px dashed rgba(255, 255, 255, .1); border-radius: 13px; color: var(--admin-muted); font-size: 8px; }

body.page-admin .admin-action-queue > div { display: grid; gap: 5px; }
body.page-admin .admin-action-queue > div > button,
body.page-admin .admin-queue-clear {
  width: 100%;
  min-height: 49px;
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, .065);
  border-radius: 10px;
  background: rgba(255, 255, 255, .02);
  color: #fff;
  text-align: left;
  cursor: pointer;
}

body.page-admin .admin-action-queue > div > button:hover { border-color: rgba(91, 229, 127, .22); background: rgba(91, 229, 127, .055); }
body.page-admin .admin-action-queue button > i,
body.page-admin .admin-queue-clear > i {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 186, 72, .1);
  color: #ffc36b;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
}

body.page-admin .admin-action-queue button > i.info { background: rgba(91, 167, 255, .1); color: #91c7ff; }
body.page-admin .admin-action-queue button > span,
body.page-admin .admin-queue-clear > span { min-width: 0; display: grid; gap: 3px; }
body.page-admin .admin-action-queue button strong,
body.page-admin .admin-action-queue button small,
body.page-admin .admin-queue-clear strong,
body.page-admin .admin-queue-clear small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.page-admin .admin-action-queue button strong,
body.page-admin .admin-queue-clear strong { font-size: 8px; }
body.page-admin .admin-action-queue button small,
body.page-admin .admin-queue-clear small { color: rgba(255, 255, 255, .33); font-size: 6px; }
body.page-admin .admin-action-queue button > b { color: #89e9a0; font-size: 6px; }
body.page-admin .admin-queue-clear > i { background: rgba(91, 229, 127, .1); color: #89eca1; }

body.page-admin .overview-bento { gap: 12px; }
body.page-admin .admin-live-standings,
body.page-admin .admin-program-pulse {
  border-color: var(--admin-border);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(9, 21, 13, .88), rgba(5, 12, 8, .8));
}

body.page-admin .admin-live-standings article,
body.page-admin .admin-program-pulse article { transition: background .18s ease, transform .18s ease; }
body.page-admin .admin-live-standings article:hover,
body.page-admin .admin-program-pulse article:hover { transform: translateX(2px); background: rgba(255, 255, 255, .055); }
body.page-admin .admin-program-empty { min-height: 180px; display: grid; place-items: center; color: rgba(255, 255, 255, .35); font-size: 8px; text-align: center; }

body.page-admin .admin-event-flow { padding: 20px; }
body.page-admin .admin-event-flow > header > button {
  border: 0;
  background: none;
  color: #87e9a0;
  cursor: pointer;
}

body.page-admin .admin-event-flow > div {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

body.page-admin .admin-event-flow > div > button {
  min-width: 0;
  min-height: 104px;
  display: grid;
  align-content: space-between;
  gap: 6px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 12px;
  background: rgba(255, 255, 255, .022);
  color: #fff;
  text-align: left;
  cursor: pointer;
}

body.page-admin .admin-event-flow > div > button:hover { border-color: rgba(91, 229, 127, .25); background: rgba(91, 229, 127, .05); }
body.page-admin .admin-event-flow > div > button.live { border-color: rgba(91, 229, 127, .32); background: rgba(91, 229, 127, .075); }
body.page-admin .admin-event-flow > div > button.complete { opacity: .68; }
body.page-admin .admin-event-flow button > span { display: flex; align-items: center; justify-content: space-between; }
body.page-admin .admin-event-flow button > span b { color: rgba(255, 255, 255, .25); font-size: 7px; }
body.page-admin .admin-event-flow button > span i { padding: 4px 5px; border-radius: 99px; background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .42); font-size: 5px; font-style: normal; text-transform: uppercase; }
body.page-admin .admin-event-flow button.live > span i { background: rgba(91, 229, 127, .12); color: #89eca2; }
body.page-admin .admin-event-flow button > strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
body.page-admin .admin-event-flow button > small { overflow: hidden; color: rgba(255, 255, 255, .31); font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
body.page-admin .admin-event-flow button > em { height: 3px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .055); }
body.page-admin .admin-event-flow button > em i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #31bb58, #75e990); }

body.page-admin .admin-operations-grid { gap: 12px; }
body.page-admin .admin-operations-card {
  min-height: 320px;
  border-color: var(--admin-border);
  background: linear-gradient(145deg, rgba(9, 20, 13, .86), rgba(5, 12, 8, .78));
}

body.page-admin .admin-readiness-card {
  border-color: var(--admin-border);
  background: linear-gradient(90deg, rgba(91, 229, 127, .055), transparent 40%), rgba(7, 16, 10, .8);
}

body.page-admin .quick-actions {
  border-color: var(--admin-border);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(9, 20, 13, .86), rgba(5, 12, 8, .78));
}

body.page-admin .quick-actions > div:last-child { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.page-admin .quick-actions button,
body.page-admin .quick-actions a {
  min-height: 44px;
  border-color: rgba(255, 255, 255, .075);
  background: rgba(255, 255, 255, .025);
  font-size: 8px;
}

body.page-admin .admin-notification-panel,
body.page-admin .admin-command-search {
  border-color: rgba(112, 235, 143, .22);
  background: rgba(6, 14, 9, .985);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .65);
}

body.page-admin .admin-notification-panel > div,
body.page-admin .admin-command-results,
body.page-admin .student-records-scroll,
body.page-admin .college-student-list,
body.page-admin .admin-live-program-list {
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(91, 229, 127, .45) rgba(255, 255, 255, .035);
}

@media(max-width: 1280px) {
  body.page-admin .overview-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.page-admin .overview-metric { min-height: 106px; }
  body.page-admin .admin-event-flow > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.page-admin .quick-actions > div:last-child { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media(max-width: 1040px) and (min-width: 760px) {
  body.page-admin main { width: calc(100% - 26px); }
  body.page-admin .admin-control-shell { grid-template-columns: 186px minmax(0, 1fr); gap: 14px; }
  body.page-admin .admin-sidebar { width: auto; padding-inline: 10px; }
  body.page-admin .admin-sidebar nav span { font-size: 8px; }
  body.page-admin .admin-workspace-head { position: relative; top: auto; }
  body.page-admin .admin-head-actions { flex-wrap: wrap; justify-content: flex-end; }
  body.page-admin .admin-event-hero { grid-template-columns: minmax(0, 1fr) 135px; padding: 25px; }
  body.page-admin .admin-focus-grid,
  body.page-admin .overview-bento { grid-template-columns: 1fr; }
  body.page-admin .admin-event-flow > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.page-admin .quick-actions > div:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media(max-width: 759px) {
  html:has(body.page-admin) { scroll-padding-top: 74px; }
  body.page-admin { background-attachment: scroll; }
  body.page-admin main { width: calc(100% - 18px); margin-inline: 9px; }
  body.page-admin .admin-control-shell { display: block !important; padding: 77px 0 38px; }
  body.page-admin .admin-sidebar {
    position: sticky;
    z-index: 75;
    top: 68px;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 9px;
    padding: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 14px;
    background: rgba(6, 15, 9, .94);
    scrollbar-width: none;
  }

  body.page-admin .admin-sidebar::before,
  body.page-admin .admin-side-brand,
  body.page-admin .admin-identity,
  body.page-admin .admin-home-link,
  body.page-admin .admin-nav-label { display: none; }
  body.page-admin .admin-sidebar nav {
    width: max-content;
    min-width: 100%;
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  body.page-admin .admin-sidebar nav button {
    width: 64px;
    min-height: 48px;
    flex: 0 0 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    margin: 0;
    padding: 5px;
    text-align: center;
    transform: none;
  }

  body.page-admin .admin-sidebar nav button::after { inset: auto 10px -1px; width: auto; height: 3px; transform: scaleX(0); }
  body.page-admin .admin-sidebar nav button.active::after { transform: scaleX(1); }
  body.page-admin .admin-sidebar nav b { font-size: 12px; }
  body.page-admin .admin-sidebar nav span { font-size: 6px; }
  body.page-admin .admin-sidebar nav small { display: none; }
  body.page-admin .admin-workspace-head {
    position: relative;
    top: auto;
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
    border-radius: 15px;
  }

  body.page-admin .admin-workspace-head::before { inset-block: 14px; }
  body.page-admin .admin-workspace-head h1 { font-size: clamp(29px, 9vw, 38px); }
  body.page-admin .admin-workspace-head > div:first-child > p:last-child { white-space: normal; }
  body.page-admin .admin-head-actions { width: 100%; grid-template-columns: 34px 34px minmax(0, 1fr) 64px; }
  body.page-admin .admin-search-trigger,
  body.page-admin .admin-notification-trigger,
  body.page-admin .admin-preview-link,
  body.page-admin .admin-workspace-head .button { min-height: 34px; }
  body.page-admin .admin-notification-trigger { width: 34px; height: 34px; }
  body.page-admin .admin-command-bar { grid-template-columns: 1fr 1fr; }
  body.page-admin .admin-command-status,
  body.page-admin .admin-command-bar > button { grid-column: 1 / -1; }
  body.page-admin .admin-command-bar > button { min-width: 0; min-height: 42px; }
  body.page-admin .admin-event-hero {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 23px 19px;
    border-radius: 20px;
  }

  body.page-admin .admin-event-state { margin-bottom: 22px; }
  body.page-admin .admin-event-hero h2 { font-size: clamp(35px, 11vw, 48px); }
  body.page-admin .admin-hero-readiness { grid-template-columns: 80px minmax(0, 1fr); justify-items: start; }
  body.page-admin .admin-hero-readiness .admin-readiness-score { width: 78px; height: 78px; }
  body.page-admin .admin-hero-readiness .admin-readiness-score::before { width: 64px; height: 64px; }
  body.page-admin .admin-hero-readiness > p { text-align: left; }
  body.page-admin .overview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.page-admin .overview-metric { min-height: 105px; padding: 13px; }
  body.page-admin .admin-focus-grid,
  body.page-admin .overview-bento { grid-template-columns: 1fr; }
  body.page-admin .admin-focus-card,
  body.page-admin .admin-event-flow { padding: 16px; border-radius: 16px; }
  body.page-admin .admin-event-flow > div { grid-template-columns: 1fr 1fr; }
  body.page-admin .admin-operations-grid { grid-template-columns: 1fr; }
  body.page-admin .admin-operations-card { min-height: 0; }
  body.page-admin .admin-readiness-card { grid-template-columns: 68px minmax(0, 1fr); }
  body.page-admin .quick-actions > div:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media(max-width: 480px) {
  body.page-admin .admin-head-actions { display: grid !important; }
  body.page-admin .admin-preview-link { padding-inline: 8px; font-size: 7px; }
  body.page-admin .admin-command-date strong { font-size: 9px; }
  body.page-admin .admin-event-state > span { display: none; }
  body.page-admin .admin-event-actions { display: grid; grid-template-columns: 1fr; }
  body.page-admin .admin-event-actions button,
  body.page-admin .admin-event-actions a { justify-content: space-between; }
  body.page-admin .overview-metrics { grid-template-columns: 1fr 1fr; gap: 6px; }
  body.page-admin .overview-metric { grid-template-columns: 31px minmax(0, 1fr); min-height: 99px; padding: 11px; }
  body.page-admin .overview-metric > span { width: 31px; height: 31px; }
  body.page-admin .overview-metric strong { font-size: 22px; }
  body.page-admin .admin-now-card > article { grid-template-columns: 1fr auto; }
  body.page-admin .admin-now-card time { grid-column: 1 / -1; }
  body.page-admin .admin-now-card > footer { display: grid; }
  body.page-admin .admin-event-flow > div { grid-template-columns: 1fr; }
  body.page-admin .admin-event-flow > div > button { min-height: 91px; }
  body.page-admin .quick-actions > div:last-child { grid-template-columns: 1fr; }
}

@media(prefers-reduced-motion: reduce) {
  html:has(body.page-admin),
  body.page-admin *,
  body.page-admin *::before,
  body.page-admin *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* =====================================================================
   Kauzariyya 2026 interface system
   Ubuntu typography, restrained navigation, two-day deck, four-team race
   ===================================================================== */
:root {
  --kz-ink: #f6f8f3;
  --kz-muted: #a7b2a9;
  --kz-deep: #061009;
  --kz-surface: #0a1710;
  --kz-surface-raised: #0e1d14;
  --kz-green: #69e787;
  --kz-green-deep: #17612d;
  --kz-cream: #f1f0e7;
  --kz-line: rgba(228, 243, 232, .11);
}

html body,
html body button,
html body input,
html body select,
html body textarea,
html body label,
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
  font-family: "Ubuntu", "Segoe UI", Arial, sans-serif !important;
}

html body .team-name-ar,
html body [lang="ar"]:not(.bismillah-mark) {
  font-family: "Noto Naskh Arabic", "Amiri", serif !important;
}

html body .bismillah-mark,
html body .home-story-verse [lang="ar"] {
  font-family: "Amiri Quran", "Amiri", "Noto Naskh Arabic", serif !important;
}

html body .page-loader-copy strong,
html body .page-loader-copy span {
  font-family: "Ubuntu", "Segoe UI", Arial, sans-serif !important;
}

body {
  color: var(--kz-ink);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body .overline {
  color: var(--kz-green);
  font-weight: 700;
}

/* Professional compact capsule navigation */
@media(min-width: 760px) {
  body .site-header,
  body.page-home .site-header,
  body.page-admin .site-header,
  body:not(.page-home):not(.page-admin) .site-header {
    min-height: 64px !important;
    padding: 7px 10px 7px 12px !important;
    border-color: rgba(225, 242, 230, .1) !important;
    border-radius: 19px !important;
    background: rgba(5, 13, 8, .84) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .3), inset 0 1px rgba(255, 255, 255, .035) !important;
    backdrop-filter: blur(22px) saturate(125%) !important;
  }

  body .site-nav,
  body.page-home .site-nav,
  body.page-admin .site-nav,
  body .site-nav.open {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 4px 6px !important;
    border: 1px solid rgba(9, 174, 70, .25) !important;
    border-radius: 9999px !important;
    background: rgba(2, 12, 6, .85) !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .08), 0 4px 16px rgba(0, 0, 0, .3) !important;
    overflow: visible !important;
  }

  body .site-nav a,
  body.page-home .site-nav a,
  body.page-admin .site-nav a {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 16px !important;
    color: rgba(255, 255, 255, .78) !important;
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    background: transparent !important;
    opacity: 0;
    transform: translateY(4px);
    animation: kzNavEnter .42s cubic-bezier(.2, .8, .2, 1) forwards;
    transition: all .22s ease !important;
  }

  body .site-nav a::before,
  body .site-nav a::after {
    display: none !important;
    content: none !important;
  }

  body .site-nav a:hover,
  body.page-home .site-nav a:hover,
  body.page-admin .site-nav a:hover {
    color: #fff !important;
    background: rgba(9, 174, 70, .16) !important;
    border-color: rgba(9, 174, 70, .3) !important;
    box-shadow: 0 2px 10px rgba(9, 174, 70, .2) !important;
    transform: translateY(-1px);
  }

  body .site-nav a.active,
  body.page-home .site-nav a.active,
  body.page-admin .site-nav a.active {
    color: #fff !important;
    background: linear-gradient(135deg, #09ae46, #068033) !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 18px rgba(9, 174, 70, .6), inset 0 1px 0 rgba(255, 255, 255, .3) !important;
    opacity: 1 !important;
    animation: kzNavActiveIn .34s cubic-bezier(.2, .8, .2, 1) both !important;
  }
}

@keyframes kzNavEnter {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes kzNavActiveIn {
  from { opacity: .45; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(-1px); }
}

/* Dynamic two-day festival deck */
body.page-home .home-schedule-banner {
  position: relative;
  overflow: hidden;
  margin-top: 26px;
  padding: 0 !important;
  border: 1px solid rgba(118, 235, 144, .18);
  border-radius: 28px;
  background:
    radial-gradient(circle at 77% 35%, rgba(105, 231, 135, .13), transparent 28%),
    linear-gradient(120deg, rgba(5, 24, 12, .98), rgba(8, 18, 12, .94));
  box-shadow: 0 30px 90px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .035);
}

body.page-home .home-schedule-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 18, 10, .92), rgba(5, 18, 10, .58)),
    url("../kauzariyya7.webp") center 38% / cover;
  opacity: .18;
}

body.page-home .schedule-banner-container {
  position: relative;
  z-index: 1;
  min-height: 520px;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(480px, 1.18fr);
  align-items: center;
  gap: 30px;
  padding: clamp(38px, 5vw, 66px);
}

body.page-home .schedule-banner-left {
  position: relative;
  z-index: 3;
  max-width: 500px;
  padding: 0;
}

body.page-home .schedule-banner-overline {
  margin: 0 0 14px;
  color: var(--kz-green);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

body.page-home .schedule-banner-title {
  margin: 0;
  color: #fff;
  font-size: clamp(44px, 5.4vw, 70px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.045em;
}

body.page-home .schedule-banner-copy {
  max-width: 45ch;
  margin: 22px 0 0;
  color: rgba(236, 246, 238, .58);
  font-size: 12px;
  line-height: 1.72;
}

body.page-home .schedule-banner-btn {
  width: max-content;
  min-height: 45px;
  margin-top: 27px;
  padding: 0 17px;
  border: 1px solid rgba(119, 238, 147, .24);
  border-radius: 11px;
  background: var(--kz-green);
  color: #071109;
  box-shadow: 0 12px 30px rgba(37, 181, 72, .18);
}

body.page-home .schedule-banner-right {
  min-width: 0;
  display: grid;
  place-items: center;
}

/* Legacy schedule card overrides replaced by clean flex/grid layout in site.css */

body.page-home .schedule-deck-mark {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 5px solid #07150c;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 13px 34px rgba(0, 0, 0, .38);
  transform: translate(-50%, -50%) rotate(3deg);
}

body.page-home .schedule-deck-mark img { width: 36px; height: 36px; object-fit: contain; }

@keyframes kzDayOneFloat {
  0%, 100% { transform: rotate(-5deg) translate3d(0, 0, 0); }
  50% { transform: rotate(-4deg) translate3d(0, -7px, 0); }
}
@keyframes kzDayTwoFloat {
  0%, 100% { transform: rotate(5deg) translate3d(0, 0, 0); }
  50% { transform: rotate(4deg) translate3d(0, 8px, 0); }
}

/* Four-team public championship board */
body.page-scoreboard .scoreboard-experience {
  width: min(1220px, 100%);
  padding: 118px 22px 100px;
}

body.page-scoreboard .leaderboard-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .58fr);
  align-items: end;
  margin-bottom: 26px;
}

body.page-scoreboard .leaderboard-header h1 {
  font-size: clamp(58px, 7vw, 90px);
  font-weight: 700;
  letter-spacing: -.06em;
}

body.page-scoreboard .leaderboard-header h1 em {
  color: var(--kz-green);
  font-style: normal;
}

body.page-scoreboard .scoreboard-four-board {
  overflow: hidden;
  border: 1px solid rgba(232, 245, 235, .12);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 0, rgba(105, 231, 135, .075), transparent 32%),
    linear-gradient(145deg, rgba(7, 17, 11, .96), rgba(4, 10, 7, .94));
  box-shadow: 0 32px 100px rgba(0, 0, 0, .36), inset 0 1px rgba(255, 255, 255, .035);
}

body.page-scoreboard .scoreboard-board-head,
body.page-scoreboard .scoreboard-board-footer {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 24px;
  border-bottom: 1px solid var(--kz-line);
  color: rgba(236, 246, 238, .48);
  font-size: 9px;
}

body.page-scoreboard .scoreboard-board-head > div,
body.page-scoreboard .scoreboard-board-footer > span {
  display: flex;
  align-items: center;
  gap: 9px;
}

body.page-scoreboard .scoreboard-board-head strong { color: #fff; font-size: 11px; }
body.page-scoreboard .scoreboard-live-dot,
body.page-scoreboard .scoreboard-board-footer i {
  width: 8px;
  height: 8px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--kz-green);
  color: #061009;
  font-size: 6px;
  font-style: normal;
  box-shadow: 0 0 0 6px rgba(105, 231, 135, .08), 0 0 16px rgba(105, 231, 135, .4);
}

body.page-scoreboard .scoreboard-team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, .08);
}

body.page-scoreboard .scoreboard-team-card {
  position: relative;
  min-width: 0;
  min-height: 455px;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 17px;
  overflow: hidden;
  padding: 20px 20px 17px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--team) 7%, #09130d), #07100b 45%);
  opacity: 0;
  transform: translateY(14px);
  animation: kzTeamCardIn .52s var(--delay) cubic-bezier(.2, .8, .2, 1) forwards;
  transition: background .24s ease;
}

body.page-scoreboard .scoreboard-team-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--team);
  box-shadow: 0 0 18px color-mix(in srgb, var(--team) 55%, transparent);
}

body.page-scoreboard .scoreboard-team-card:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--team) 11%, #09130d), #07100b 48%);
}

body.page-scoreboard .scoreboard-team-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body.page-scoreboard .scoreboard-card-rank {
  color: rgba(255, 255, 255, .38);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
}

body.page-scoreboard .scoreboard-card-state {
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--team) 24%, transparent);
  border-radius: 99px;
  background: color-mix(in srgb, var(--team) 7%, transparent);
  color: color-mix(in srgb, var(--team) 55%, white);
  font-size: 7px;
  font-weight: 700;
  text-transform: uppercase;
}

body.page-scoreboard .scoreboard-card-chart {
  min-height: 225px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  column-gap: 17px;
  align-items: end;
  padding: 10px 2px 0;
}

body.page-scoreboard .scoreboard-card-chart > span {
  position: relative;
  grid-row: 1 / 3;
  width: 32px;
  height: 100%;
  min-height: 215px;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(255, 255, 255, .045);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .045);
}

body.page-scoreboard .scoreboard-card-chart > span i {
  position: absolute;
  inset: auto 0 0;
  height: var(--score-height);
  border-radius: 10px 10px 7px 7px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--team) 80%, white), var(--team));
  box-shadow: 0 -8px 24px color-mix(in srgb, var(--team) 25%, transparent);
  transform: scaleY(0);
  transform-origin: bottom;
  animation: kzScoreColumn 1s calc(var(--delay) + .2s) cubic-bezier(.16, 1, .3, 1) forwards;
}

body.page-scoreboard .scoreboard-card-chart > b {
  color: #fff;
  font-size: clamp(50px, 5.2vw, 72px);
  line-height: .78;
  letter-spacing: -.065em;
}

body.page-scoreboard .scoreboard-card-chart > small {
  align-self: start;
  margin-top: 8px;
  color: rgba(255, 255, 255, .38);
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body.page-scoreboard .scoreboard-card-team {
  min-width: 0;
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
}

body.page-scoreboard .scoreboard-team-mark {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--team) 25%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--team) 8%, transparent);
}

body.page-scoreboard .scoreboard-team-mark i {
  width: 11px;
  height: 11px;
  border-radius: 4px;
  background: var(--team);
  box-shadow: 0 0 16px color-mix(in srgb, var(--team) 55%, transparent);
}

body.page-scoreboard .scoreboard-card-team > div { min-width: 0; display: grid; }
body.page-scoreboard .scoreboard-card-team small {
  overflow: hidden;
  color: rgba(255, 255, 255, .34);
  font-size: 7px;
  letter-spacing: .11em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

body.page-scoreboard .scoreboard-card-team h2 {
  overflow: hidden;
  margin: 1px 0 0;
  color: #fff;
  font-size: 27px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-scoreboard .scoreboard-team-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .38);
  font-size: 7px;
}

body.page-scoreboard .scoreboard-team-card > footer i {
  color: color-mix(in srgb, var(--team) 62%, white);
  font-size: 11px;
  font-style: normal;
}

body.page-scoreboard .scoreboard-board-footer {
  border-top: 1px solid var(--kz-line);
  border-bottom: 0;
}
body.page-scoreboard .scoreboard-board-footer time { color: #fff; font-weight: 500; }

@keyframes kzTeamCardIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes kzScoreColumn {
  to { transform: scaleY(1); }
}

/* Admin: new four-team championship control feature */
body.page-admin {
  --admin-green: var(--kz-green);
  --admin-border: rgba(226, 243, 231, .1);
}

body.page-admin .admin-sidebar nav span { font-size: 10px; font-weight: 500; }
body.page-admin .admin-workspace-head > div:first-child > p:last-child { font-size: 9px; }
body.page-admin .admin-event-hero-copy > p:not(.overline) { font-size: 10px; }
body.page-admin .overview-metric small { font-size: 7px; }
body.page-admin .overview-metric > p { font-size: 8px; }

body.page-admin .admin-championship-control {
  overflow: hidden;
  border: 1px solid var(--admin-border);
  border-radius: 21px;
  background:
    radial-gradient(circle at 84% 0, rgba(105, 231, 135, .08), transparent 28%),
    linear-gradient(145deg, rgba(9, 21, 13, .92), rgba(5, 12, 8, .88));
  box-shadow: 0 22px 60px rgba(0, 0, 0, .2);
}

body.page-admin .admin-championship-control > header {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 17px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

body.page-admin .admin-championship-control > header h2 {
  margin: 2px 0 3px;
  color: #fff;
  font-size: 24px;
  letter-spacing: -.025em;
}

body.page-admin .admin-championship-control > header > div:first-child > span {
  color: rgba(255, 255, 255, .37);
  font-size: 8px;
}

body.page-admin .admin-championship-control > header > div:last-child {
  flex: none;
  display: flex;
  gap: 7px;
}

body.page-admin .admin-championship-control > header button {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 9px;
  background: rgba(255, 255, 255, .035);
  color: rgba(255, 255, 255, .72);
  font-size: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

body.page-admin .admin-championship-control > header button:hover {
  transform: translateY(-2px);
  border-color: rgba(105, 231, 135, .28);
}

body.page-admin .admin-championship-control > header button.primary {
  border-color: rgba(105, 231, 135, .28);
  background: var(--kz-green);
  color: #071109;
  font-weight: 700;
}

body.page-admin .admin-championship-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, .07);
}

body.page-admin .admin-championship-grid > button {
  position: relative;
  min-width: 0;
  min-height: 154px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  gap: 11px 9px;
  align-items: center;
  padding: 16px;
  border: 0;
  background: linear-gradient(150deg, color-mix(in srgb, var(--team) 7%, #09130d), #07100b 58%);
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: background .2s ease;
}

body.page-admin .admin-championship-grid > button:hover {
  background: linear-gradient(150deg, color-mix(in srgb, var(--team) 12%, #09130d), #07100b 62%);
}

body.page-admin .admin-championship-grid > button::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--team);
}

body.page-admin .admin-championship-rank {
  align-self: start;
  color: rgba(255, 255, 255, .32);
  font-size: 8px;
  font-weight: 700;
}

body.page-admin .admin-championship-team {
  min-width: 0;
  align-self: start;
  display: grid;
}

body.page-admin .admin-championship-team small {
  overflow: hidden;
  color: color-mix(in srgb, var(--team) 58%, white);
  font-size: 6px;
  letter-spacing: .1em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

body.page-admin .admin-championship-team strong {
  overflow: hidden;
  margin-top: 2px;
  color: #fff;
  font-size: 20px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-admin .admin-championship-score {
  align-self: start;
  display: grid;
  justify-items: end;
}

body.page-admin .admin-championship-score strong {
  font-size: 26px;
  line-height: .9;
}

body.page-admin .admin-championship-score small {
  margin-top: 5px;
  color: rgba(255, 255, 255, .32);
  font-size: 6px;
  text-transform: uppercase;
}

body.page-admin .admin-championship-track {
  position: relative;
  grid-column: 1 / -1;
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, .055);
}

body.page-admin .admin-championship-track i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--team-progress);
  border-radius: inherit;
  background: var(--team);
  box-shadow: 0 0 12px color-mix(in srgb, var(--team) 42%, transparent);
}

body.page-admin .admin-championship-control > footer {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  color: rgba(255, 255, 255, .38);
  font-size: 7px;
}

body.page-admin .admin-championship-control > footer > span {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.page-admin .admin-championship-control > footer > span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kz-green);
  box-shadow: 0 0 10px rgba(105, 231, 135, .55);
}

body.page-admin .admin-championship-control > footer a {
  color: #91eca6;
  font-weight: 500;
}

@media(max-width: 980px) {
  body.page-home .schedule-banner-container {
    grid-template-columns: minmax(0, .78fr) minmax(390px, 1.22fr);
    gap: 15px;
    padding: 42px 32px;
  }
  body.page-home .schedule-day-deck { transform: scale(.9); }
  body.page-scoreboard .scoreboard-team-grid,
  body.page-admin .admin-championship-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media(max-width: 759px) {
  body.page-home .home-schedule-banner {
    width: calc(100% - 24px);
    margin: 22px auto;
    border-radius: 23px;
  }

  body.page-home .schedule-banner-container {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 32px 22px 25px;
  }

  body.page-home .schedule-banner-title { font-size: clamp(42px, 13vw, 60px); }
  body.page-home .schedule-banner-copy { font-size: 10px; }
  body.page-home .schedule-banner-right { overflow: hidden; margin-inline: -12px; }
  body.page-home .schedule-day-deck {
    width: min(100%, 470px);
    height: 325px;
    transform: none;
  }

  body.page-home .schedule-day-card {
    width: min(45vw, 196px);
    height: 242px;
    padding: 17px;
    border-radius: 22px;
  }
  body.page-home .schedule-day-card.day-1 { left: 5%; }
  body.page-home .schedule-day-card.day-2 { right: 5%; }
  body.page-home .schedule-day-card > strong > b { font-size: 64px; }
  body.page-home .schedule-day-card > strong > span { font-size: 16px; }
  body.page-home .schedule-deck-mark { width: 46px; height: 46px; border-radius: 14px; }
  body.page-home .schedule-deck-mark img { width: 30px; height: 30px; }

  body.page-scoreboard .scoreboard-experience { padding: 92px 12px 88px; }
  body.page-scoreboard .leaderboard-header { grid-template-columns: 1fr; }
  body.page-scoreboard .leaderboard-header h1 { font-size: clamp(49px, 16vw, 70px); }
  body.page-scoreboard .scoreboard-four-board { border-radius: 21px; }
  body.page-scoreboard .scoreboard-board-head,
  body.page-scoreboard .scoreboard-board-footer { min-height: 56px; padding: 0 15px; }
  body.page-scoreboard .scoreboard-team-card {
    min-height: 360px;
    padding: 16px 13px 14px;
  }
  body.page-scoreboard .scoreboard-card-chart { min-height: 170px; grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; }
  body.page-scoreboard .scoreboard-card-chart > span { width: 24px; min-height: 165px; }
  body.page-scoreboard .scoreboard-card-chart > b { font-size: clamp(39px, 12vw, 57px); }
  body.page-scoreboard .scoreboard-card-team { grid-template-columns: 29px minmax(0, 1fr); gap: 8px; }
  body.page-scoreboard .scoreboard-team-mark { width: 29px; height: 29px; border-radius: 9px; }
  body.page-scoreboard .scoreboard-card-team h2 { font-size: 21px; }
  body.page-scoreboard .scoreboard-card-state { font-size: 6px; }
  body.page-scoreboard .scoreboard-team-card > footer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  body.page-admin .admin-sidebar nav span { font-size: 7px; }
  body.page-admin .admin-championship-control { border-radius: 17px; }
  body.page-admin .admin-championship-control > header {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    padding: 17px;
  }
  body.page-admin .admin-championship-control > header > div:last-child { width: 100%; }
  body.page-admin .admin-championship-control > header button { flex: 1; justify-content: space-between; }
  body.page-admin .admin-championship-grid > button { min-height: 140px; padding: 13px; }
  body.page-admin .admin-championship-control > footer { padding: 0 15px; }
}

@media(max-width: 430px) {
  body.page-home .schedule-day-deck { height: 294px; }
  body.page-home .schedule-day-card {
    width: 46%;
    height: 220px;
    padding: 14px;
  }
  body.page-home .schedule-day-card.day-1 { left: 2%; }
  body.page-home .schedule-day-card.day-2 { right: 2%; }
  body.page-home .schedule-day-card > strong { gap: 6px; }
  body.page-home .schedule-day-card > strong > b { font-size: 52px; }
  body.page-home .schedule-day-card > strong > span { font-size: 14px; }
  body.page-home .schedule-day-card footer { font-size: 8px; }
  body.page-scoreboard .scoreboard-board-head > span { display: none; }
  body.page-scoreboard .scoreboard-board-footer > span:first-child { display: none; }
  body.page-scoreboard .scoreboard-card-chart { min-height: 145px; }
  body.page-scoreboard .scoreboard-card-chart > span { min-height: 140px; }
  body.page-scoreboard .scoreboard-team-card { min-height: 325px; }
  body.page-scoreboard .scoreboard-card-state { max-width: 65px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.page-scoreboard .scoreboard-card-team { grid-template-columns: 1fr; }
  body.page-scoreboard .scoreboard-team-mark { display: none; }
  body.page-admin .admin-championship-control > header > div:last-child { display: grid; grid-template-columns: 1fr; }
  body.page-admin .admin-championship-grid > button {
    min-height: 126px;
    grid-template-columns: 23px minmax(0, 1fr) auto;
    padding: 11px;
  }
  body.page-admin .admin-championship-team strong { font-size: 17px; }
  body.page-admin .admin-championship-score strong { font-size: 22px; }
  body.page-admin .admin-championship-control > footer > span { display: none; }
  body.page-admin .admin-championship-control > footer { justify-content: flex-end; }
}

@media(prefers-reduced-motion: reduce) {
  body .site-nav a,
  body.page-home .schedule-day-card,
  body.page-scoreboard .scoreboard-team-card,
  body.page-scoreboard .scoreboard-card-chart > span i {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}

/* Simple scoreboard: four clear team cards without chart-heavy decoration. */
body.page-scoreboard .scoreboard-four-board {
  border-radius: 22px;
  background: rgba(5, 13, 8, .96);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

body.page-scoreboard .scoreboard-team-card {
  min-height: 310px;
  grid-template-rows: auto auto 1fr auto auto;
  gap: 18px;
  padding: 22px;
  background: #07100b;
  transition: background .2s ease;
}

body.page-scoreboard .scoreboard-team-card:hover {
  background: #09140d;
}

body.page-scoreboard .scoreboard-team-card::before {
  height: 3px;
  box-shadow: none;
}

body.page-scoreboard .scoreboard-card-state {
  padding: 0;
  border: 0;
  background: none;
  color: color-mix(in srgb, var(--team) 60%, white);
}

body.page-scoreboard .scoreboard-card-team {
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
}

body.page-scoreboard .scoreboard-team-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

body.page-scoreboard .scoreboard-card-team h2 {
  font-size: 25px;
}

body.page-scoreboard .scoreboard-simple-score {
  align-self: end;
  display: flex;
  align-items: end;
  gap: 8px;
}

body.page-scoreboard .scoreboard-simple-score strong {
  color: #fff;
  font-size: clamp(58px, 5.5vw, 78px);
  line-height: .78;
  letter-spacing: -.065em;
}

body.page-scoreboard .scoreboard-simple-score span {
  padding-bottom: 3px;
  color: rgba(255, 255, 255, .38);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body.page-scoreboard .scoreboard-simple-progress {
  position: relative;
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255, 255, 255, .07);
}

body.page-scoreboard .scoreboard-simple-progress i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--team);
}

body.page-scoreboard .scoreboard-team-card > footer {
  min-height: 18px;
  padding-top: 0;
  border-top: 0;
}

@media(max-width: 759px) {
  body.page-scoreboard .scoreboard-team-card {
    min-height: 265px;
    gap: 14px;
    padding: 16px 14px;
  }
  body.page-scoreboard .scoreboard-simple-score strong {
    font-size: clamp(45px, 14vw, 62px);
  }
  body.page-scoreboard .scoreboard-card-team h2 { font-size: 21px; }
}

@media(max-width: 430px) {
  body.page-scoreboard .scoreboard-team-card {
    min-height: 245px;
    padding: 14px 12px;
  }
  body.page-scoreboard .scoreboard-card-team { grid-template-columns: 1fr; }
  body.page-scoreboard .scoreboard-simple-score strong { font-size: 48px; }
}

/* =====================================================================
   Usable admin workspace and simplified lower home page
   ===================================================================== */
body.page-admin main {
  width: min(1480px, calc(100% - 40px));
  margin-inline: auto;
}

body.page-admin .admin-control-shell {
  width: 100%;
  max-width: none;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 92px 0 48px;
}

body.page-admin .admin-sidebar {
  position: sticky;
  top: 86px;
  width: 100%;
  height: calc(100vh - 104px) !important;
  min-height: 520px !important;
  padding: 17px 14px 14px;
  border-radius: 18px;
  background: rgba(5, 17, 9, .97);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
  backdrop-filter: none;
}

body.page-admin .admin-sidebar::before { display: none; }

body.page-admin .admin-side-brand {
  min-height: 64px;
  gap: 12px;
  margin: 0;
  padding: 3px 4px 16px;
}

body.page-admin .admin-side-brand img {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  box-shadow: none;
}

body.page-admin .admin-side-brand strong { font-size: 15px; }
body.page-admin .admin-side-brand small { font-size: 7px; }

body.page-admin .admin-sidebar nav {
  flex: 1;
  margin: 8px -3px 8px 0;
  padding: 0 4px 8px 0;
  scrollbar-width: none;
}

body.page-admin .admin-sidebar nav::-webkit-scrollbar { display: none !important; }

body.page-admin .admin-nav-label {
  margin: 14px 10px 6px;
  font-size: 7px;
  letter-spacing: .13em;
}

body.page-admin .admin-sidebar nav button {
  min-height: 44px;
  margin-bottom: 3px;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 0 10px;
  border-radius: 9px;
}

body.page-admin .admin-sidebar nav button:hover { transform: none; }
body.page-admin .admin-sidebar nav button::after {
  inset: 9px auto 9px 0;
  width: 2px;
}

body.page-admin .admin-sidebar nav b { font-size: 14px; }
body.page-admin .admin-sidebar nav span {
  font-size: 11px;
  font-weight: 500;
}
body.page-admin .admin-sidebar nav small {
  min-width: 24px;
  padding: 4px 6px;
  font-size: 7px;
}

body.page-admin .admin-identity {
  min-height: 58px;
  margin: auto 0 0;
  padding: 10px 11px;
  border-radius: 11px;
}

body.page-admin .admin-identity > span {
  width: 34px;
  height: 34px;
  font-size: 9px;
}
body.page-admin .admin-identity strong { font-size: 11px; }
body.page-admin .admin-identity small { font-size: 7px; }
body.page-admin .admin-home-link {
  margin-top: 6px;
  padding: 9px 10px 3px;
  font-size: 9px;
}

body.page-admin .admin-workspace {
  width: 100%;
  min-width: 0;
}

body.page-admin .admin-workspace-head {
  position: relative !important;
  top: auto !important;
  min-height: 92px;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
  padding: 14px 16px 14px 20px;
  border-radius: 15px;
  background: rgba(6, 16, 10, .96);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .2);
  backdrop-filter: none;
}

body.page-admin .admin-workspace-head::before {
  inset: 17px auto 17px 0;
  width: 2px;
}

body.page-admin .admin-workspace-head h1 {
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1;
}

body.page-admin .admin-workspace-head > div:first-child > p:last-child {
  font-size: 10px;
  line-height: 1.45;
}

body.page-admin .admin-head-actions {
  flex-wrap: nowrap;
  gap: 7px;
}

body.page-admin .admin-search-trigger,
body.page-admin .admin-notification-trigger,
body.page-admin .admin-preview-link,
body.page-admin .admin-workspace-head .button {
  min-height: 40px;
}

body.page-admin .admin-overview {
  gap: 16px;
}

body.page-admin .admin-command-bar {
  grid-template-columns: minmax(220px, 1.2fr) minmax(130px, .55fr) minmax(150px, .65fr) auto;
  border-radius: 12px;
  box-shadow: none;
}

body.page-admin .admin-command-bar > div,
body.page-admin .admin-command-bar > button {
  min-height: 60px;
  padding: 12px 15px;
}

body.page-admin .admin-command-bar small { font-size: 8px; }
body.page-admin .admin-command-bar strong { font-size: 11px; }

body.page-admin .admin-event-hero {
  min-height: 210px;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 26px;
  padding: 27px 30px;
  border-radius: 18px;
  box-shadow: 0 18px 54px rgba(0, 0, 0, .22);
}

body.page-admin .admin-event-hero::before { display: none; }
body.page-admin .admin-event-state { margin-bottom: 20px; font-size: 8px; }
body.page-admin .admin-event-hero h2 {
  font-size: clamp(34px, 3.6vw, 50px);
}
body.page-admin .admin-event-hero-copy > p:not(.overline) { font-size: 10px; }
body.page-admin .admin-event-actions button,
body.page-admin .admin-event-actions a {
  min-height: 40px;
  font-size: 9px;
}

body.page-admin .overview-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body.page-admin .overview-metric {
  min-height: 108px;
  padding: 15px;
  border-radius: 13px;
  box-shadow: none;
}

body.page-admin .overview-metric:hover,
body.page-admin .overview-metric:focus-visible { transform: none; }
body.page-admin .overview-metric strong { font-size: 28px; }
body.page-admin .overview-metric small { font-size: 8px; }
body.page-admin .overview-metric > p { font-size: 8px; }

body.page-admin .admin-focus-card,
body.page-admin .admin-event-flow,
body.page-admin .admin-live-standings,
body.page-admin .admin-program-pulse,
body.page-admin .admin-operations-card,
body.page-admin .admin-readiness-card,
body.page-admin .quick-actions,
body.page-admin .admin-championship-control {
  border-radius: 15px;
  box-shadow: none;
}

/* Remove the large boxed-card treatment from the event highlights. */
body.page-home .home-event-highlights {
  margin-top: 72px;
  padding: 0 !important;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.page-home .home-event-highlights > header {
  max-width: 820px;
  margin-bottom: 30px;
}

body.page-home .home-event-highlights > div {
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, .11);
  border-bottom: 1px solid rgba(255, 255, 255, .11);
}

body.page-home .home-event-highlights article {
  min-height: 205px;
  padding: 26px 24px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, .09);
  border-radius: 0;
  background: transparent;
  transition: none !important;
}

body.page-home .home-event-highlights article:first-child { border-left: 0; }
body.page-home .home-event-highlights article:hover {
  transform: none !important;
  border-color: rgba(255, 255, 255, .09);
  background: transparent;
}

body.page-home .home-event-highlights article > span {
  width: 34px;
  height: 34px;
  margin-bottom: 28px;
  border-radius: 9px;
}

/* Borderless, static campus location section. */
body.page-home .home-footer-location {
  width: min(1120px, 100%);
  max-width: 1120px;
  min-height: 0;
  grid-template-columns: minmax(300px, 460px) minmax(0, 1fr);
  gap: clamp(34px, 6vw, 76px);
  margin: 42px auto 12px;
  padding: 54px 0 44px;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .11) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.page-home .home-footer-location .footer-location-map {
  width: 100%;
  height: 270px;
  aspect-ratio: auto;
  overflow: hidden !important;
  border: 0;
  border-radius: 16px !important;
  clip-path: none;
  background: #dfe5e1;
  box-shadow: none;
  transform: none !important;
  transition: none !important;
}

body.page-home .home-footer-location .footer-location-map:hover {
  border-color: transparent;
  transform: none !important;
}

body.page-home .home-footer-location .footer-location-map iframe {
  inset: 0;
  width: 100%;
  height: 100%;
  filter: saturate(.65) brightness(.78) contrast(1.05);
}

body.page-home .home-footer-location .footer-pulse-copy {
  padding: 0;
}

body.page-home .home-footer-location .footer-pulse-copy > h2 {
  font-size: clamp(44px, 5vw, 64px);
}

body.page-home .home-footer-location .footer-directions-link {
  min-height: 46px;
  margin-top: 20px;
  padding: 10px 24px;
  border-radius: 9999px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), 0 0 20px rgba(86, 228, 122, 0.15) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important;
}

body.page-home .home-footer-location .footer-directions-link:hover,
body.page-home .home-footer-location .footer-directions-link:focus-visible {
  transform: translateY(-4px) scale(1.04) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45), 0 0 32px rgba(86, 228, 122, 0.35) !important;
}

html.nextgen-motion-ready body.page-home .home-footer-location.motion-item,
html.nextgen-motion-ready body.page-home .home-footer-location.motion-depth {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
  transition: none !important;
}

@media(max-width: 1180px) and (min-width: 760px) {
  body.page-admin main { width: calc(100% - 24px); }
  body.page-admin .admin-control-shell {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 16px;
  }
  body.page-admin .admin-sidebar { padding-inline: 11px; }
  body.page-admin .admin-sidebar nav span { font-size: 10px; }
  body.page-admin .admin-workspace-head {
    align-items: flex-start;
    flex-direction: column;
  }
  body.page-admin .admin-head-actions { width: 100%; }
  body.page-admin .admin-command-bar { grid-template-columns: 1fr 1fr; }
  body.page-admin .admin-command-status,
  body.page-admin .admin-command-bar > button { grid-column: 1 / -1; }
}

@media(max-width: 759px) {
  body.page-admin main {
    width: calc(100% - 16px);
    margin-inline: 8px;
  }

  body.page-admin .admin-control-shell {
    display: block !important;
    padding: 76px 0 36px;
  }

  body.page-admin .admin-sidebar {
    top: 66px;
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 10px;
    padding: 6px;
    border-radius: 12px;
  }

  body.page-admin .admin-sidebar nav {
    width: max-content;
    min-width: 100%;
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
  }

  body.page-admin .admin-sidebar nav button {
    width: 76px;
    min-height: 51px;
    flex: 0 0 76px;
    padding: 5px;
  }

  body.page-admin .admin-sidebar nav span { font-size: 8px; }
  body.page-admin .admin-workspace-head {
    min-height: 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    padding: 15px;
  }
  body.page-admin .admin-head-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 38px 38px minmax(0, 1fr) 62px;
  }
  body.page-admin .overview-metrics { grid-template-columns: 1fr 1fr; }

  body.page-home .home-event-highlights {
    width: calc(100% - 24px);
    margin: 52px auto 0;
  }
  body.page-home .home-event-highlights > div {
    grid-template-columns: 1fr 1fr;
  }
  body.page-home .home-event-highlights article {
    min-height: 180px;
    padding: 22px 16px;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
  }
  body.page-home .home-event-highlights article:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, .08);
  }

  body.page-home .home-footer-location {
    width: calc(100% - 28px);
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 30px auto 0;
    padding: 36px 0 28px;
  }
  body.page-home .home-footer-location .footer-location-map {
    width: 100%;
    height: 230px;
    border-radius: 14px !important;
  }
}

@media(max-width: 430px) {
  body.page-admin .overview-metrics { grid-template-columns: 1fr; }
  body.page-admin .admin-head-actions {
    grid-template-columns: 36px 36px minmax(0, 1fr);
  }
  body.page-admin .admin-workspace-head .button { display: none; }
  body.page-home .home-event-highlights > div { grid-template-columns: 1fr; }
  body.page-home .home-event-highlights article,
  body.page-home .home-event-highlights article:nth-child(odd) {
    min-height: 158px;
    border-right: 0;
  }
  body.page-home .home-footer-location .footer-location-map { height: 205px; }
}

/* Outfit typography across every page, retaining readable Arabic faces. */
html body,
html body *:not(svg):not(path) {
  font-family: "Ubuntu", "Segoe UI", Arial, sans-serif !important;
}

html body .team-name-ar,
html body [lang="ar"]:not(.bismillah-mark) {
  font-family: "Noto Naskh Arabic", "Amiri", serif !important;
}

html body .bismillah-mark,
html body .home-story-verse [lang="ar"] {
  font-family: "Amiri Quran", "Amiri", "Noto Naskh Arabic", serif !important;
}

/* Minimal four-column chart inspired by the supplied reference. */
body.page-scoreboard .scoreboard-four-board {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 24px;
  background: rgba(5, 13, 8, .96);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .24);
}

body.page-scoreboard .scoreboard-board-head {
  min-height: 62px;
  padding: 0 22px;
}

body.page-scoreboard .scoreboard-team-grid {
  position: relative;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 18px 14px 22px;
  background:
    repeating-linear-gradient(to top, rgba(255, 255, 255, .055) 0 1px, transparent 1px 72px),
    transparent;
}

body.page-scoreboard .scoreboard-bar-team {
  min-width: 0;
  min-height: 410px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  padding: 10px 18px 16px;
  border-right: 1px solid rgba(255, 255, 255, .075);
  opacity: 0;
  transform: translateY(8px);
  animation: kzTeamCardIn .4s var(--delay) ease forwards;
}

body.page-scoreboard .scoreboard-bar-team:last-child { border-right: 0; }

body.page-scoreboard .scoreboard-bar-team > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

body.page-scoreboard .scoreboard-bar-team .scoreboard-card-state {
  padding: 0;
  border: 0;
  background: none;
  color: color-mix(in srgb, var(--team) 65%, white);
  font-size: 7px;
}

body.page-scoreboard .scoreboard-bar-plot {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

body.page-scoreboard .scoreboard-bar-plot > div {
  display: flex;
  align-items: end;
  gap: 5px;
  margin-bottom: 10px;
}

body.page-scoreboard .scoreboard-bar-plot strong {
  color: #fff;
  font-size: clamp(38px, 4.2vw, 58px);
  line-height: .8;
  letter-spacing: -.055em;
}

body.page-scoreboard .scoreboard-bar-plot > div span {
  padding-bottom: 2px;
  color: rgba(255, 255, 255, .4);
  font-size: 7px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.page-scoreboard .scoreboard-vertical-bar {
  position: relative;
  width: min(58px, 44%);
  height: clamp(18px, var(--bar-size), 220px);
  overflow: hidden;
  border-radius: 9px 9px 4px 4px;
  background: var(--team);
  transform: scaleY(0);
  transform-origin: bottom;
  animation: kzScoreColumn .75s calc(var(--delay) + .12s) cubic-bezier(.16, 1, .3, 1) forwards;
}

body.page-scoreboard .scoreboard-vertical-bar i {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .13), transparent 55%);
}

body.page-scoreboard .scoreboard-bar-team .scoreboard-card-team {
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

body.page-scoreboard .scoreboard-bar-team .scoreboard-team-mark {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 8px;
}

body.page-scoreboard .scoreboard-bar-team .scoreboard-team-mark i {
  width: 9px;
  height: 9px;
}

body.page-scoreboard .scoreboard-bar-team .scoreboard-card-team h2 {
  font-size: 23px;
}

body.page-scoreboard .scoreboard-board-footer {
  min-height: 52px;
}

/* Rounded bordered chapters requested for highlights and map. */
body.page-home .home-event-highlights {
  padding: clamp(24px, 3vw, 34px) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 24px !important;
  background: rgba(5, 16, 9, .72) !important;
}

body.page-home .home-footer-location .footer-location-map {
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 18px !important;
}

@media(max-width: 759px) {
  body.page-scoreboard .scoreboard-team-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 12px 6px 16px;
  }
  body.page-scoreboard .scoreboard-bar-team {
    min-height: 330px;
    gap: 10px;
    padding: 8px 7px 12px;
  }
  body.page-scoreboard .scoreboard-bar-plot { min-height: 210px; }
  body.page-scoreboard .scoreboard-vertical-bar {
    width: min(40px, 48%);
    height: clamp(16px, var(--bar-size), 155px);
    border-radius: 7px 7px 3px 3px;
  }
  body.page-scoreboard .scoreboard-bar-plot strong {
    font-size: clamp(30px, 9vw, 43px);
  }
  body.page-scoreboard .scoreboard-bar-team .scoreboard-card-team {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  body.page-scoreboard .scoreboard-bar-team .scoreboard-team-mark { display: none; }
  body.page-scoreboard .scoreboard-bar-team .scoreboard-card-team h2 { font-size: 18px; }
  body.page-scoreboard .scoreboard-bar-team .scoreboard-card-team small { font-size: 6px; }
  body.page-scoreboard .scoreboard-bar-team .scoreboard-card-state { display: none; }
  body.page-home .home-event-highlights {
    padding: 22px 18px !important;
    border-radius: 20px !important;
  }
  body.page-home .home-footer-location .footer-location-map {
    border-radius: 16px !important;
  }
}

@media(max-width: 430px) {
  body.page-scoreboard .scoreboard-bar-team { min-height: 300px; padding-inline: 5px; }
  body.page-scoreboard .scoreboard-bar-plot { min-height: 185px; }
  body.page-scoreboard .scoreboard-vertical-bar {
    width: 31px;
    height: clamp(14px, var(--bar-size), 135px);
  }
  body.page-scoreboard .scoreboard-bar-plot strong { font-size: 32px; }
  body.page-scoreboard .scoreboard-bar-plot > div span { display: none; }
  body.page-scoreboard .scoreboard-bar-team .scoreboard-card-team h2 { font-size: 16px; }
}

@media(prefers-reduced-motion: reduce) {
  body.page-scoreboard .scoreboard-bar-team,
  body.page-scoreboard .scoreboard-vertical-bar {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}

/* High-specificity type lock so legacy page rules cannot replace Outfit. */
html#outfit-type#outfit-type body *:not(svg):not(path) {
  font-family: "Ubuntu", "Segoe UI", Arial, sans-serif !important;
}

html#outfit-type#outfit-type body [lang="ar"],
html#outfit-type#outfit-type body [lang="ar"] * {
  font-family: "Noto Naskh Arabic", "Amiri", serif !important;
}

html#outfit-type#outfit-type body .bismillah-mark,
html#outfit-type#outfit-type body .home-story-verse [lang="ar"],
html#outfit-type#outfit-type body .home-story-verse [lang="ar"] * {
  font-family: "Amiri Quran", "Amiri", "Noto Naskh Arabic", serif !important;
}

/* Circular, fully interactive Google Maps presentation. */
body.page-home .home-footer-location {
  width: min(1180px, calc(100% - 40px));
  grid-template-columns: minmax(340px, 500px) minmax(0, 1fr);
  gap: clamp(42px, 7vw, 92px);
  align-items: center;
}

body.page-home .home-footer-location .footer-location-map {
  width: min(100%, 500px);
  height: auto;
  aspect-ratio: 1;
  justify-self: center;
  overflow: hidden !important;
  border: 2px solid rgba(255, 255, 255, .58) !important;
  border-radius: 50% !important;
  clip-path: circle(50%);
  background: #d9ddda;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
  isolation: isolate;
}

body.page-home .home-footer-location .footer-location-map iframe {
  position: absolute;
  inset: -2%;
  width: 104%;
  height: 104%;
  max-width: none;
  border: 0;
  pointer-events: auto;
  filter: grayscale(.28) saturate(.7) brightness(.78) contrast(1.08);
}

body.page-home .home-footer-location .footer-location-map::after {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 58%, rgba(2, 12, 7, .28) 100%);
  pointer-events: none;
}

@media(max-width: 820px) {
  body.page-home .home-footer-location {
    width: min(100% - 28px, 620px);
    grid-template-columns: 1fr;
    gap: 30px;
  }

  body.page-home .home-footer-location .footer-location-map {
    width: min(100%, 430px);
    height: auto;
    border-radius: 50% !important;
  }
}

@media(max-width: 430px) {
  body.page-home .home-footer-location .footer-location-map {
    width: min(100%, 340px);
    height: auto;
  }
}

/* Event highlights: independent cards instead of divider lines. */
body.page-home .home-event-highlights {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.page-home .home-event-highlights > div {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  border: 0;
}

body.page-home .home-event-highlights article,
body.page-home .home-event-highlights article:first-child,
body.page-home .home-event-highlights article:nth-child(odd) {
  min-height: 226px;
  overflow: hidden;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 0%, rgba(89, 223, 123, .12), transparent 38%),
    linear-gradient(145deg, rgba(13, 29, 19, .88), rgba(5, 15, 9, .82));
  box-shadow:
    0 20px 48px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .045);
  transition: transform .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease !important;
}

body.page-home .home-event-highlights article::before {
  content: "";
  position: absolute;
  width: 132px;
  height: 132px;
  right: -76px;
  bottom: -80px;
  border-radius: 50%;
  background: rgba(89, 223, 123, .07);
  filter: blur(2px);
  pointer-events: none;
}

body.page-home .home-event-highlights article:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(89, 223, 123, .34);
  background:
    radial-gradient(circle at 12% 0%, rgba(89, 223, 123, .18), transparent 40%),
    linear-gradient(145deg, rgba(15, 37, 22, .94), rgba(5, 16, 9, .9));
  box-shadow:
    0 26px 58px rgba(0, 0, 0, .3),
    0 0 0 1px rgba(89, 223, 123, .05),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}

body.page-home .home-event-highlights article > span {
  width: 42px;
  height: 42px;
  margin-bottom: 32px;
  border: 1px solid rgba(89, 223, 123, .16);
  border-radius: 12px;
  background: rgba(89, 223, 123, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

body.page-home .home-event-highlights article > small {
  top: 27px;
  right: 25px;
  color: rgba(255, 255, 255, .28);
  font-size: 9px;
  letter-spacing: .12em;
}

body.page-home .home-event-highlights article h3 {
  margin-bottom: 12px;
  font-size: clamp(20px, 1.8vw, 24px);
}

body.page-home .home-event-highlights article p {
  max-width: 29ch;
  color: rgba(255, 255, 255, .62);
}

@media(max-width: 900px) {
  body.page-home .home-event-highlights > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

@media(max-width: 600px) {
  body.page-home .home-event-highlights {
    width: calc(100% - 24px);
  }

  body.page-home .home-event-highlights > div {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body.page-home .home-event-highlights article,
  body.page-home .home-event-highlights article:first-child,
  body.page-home .home-event-highlights article:nth-child(odd) {
    min-height: 188px;
    padding: 21px 20px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 17px;
  }

  body.page-home .home-event-highlights article > span {
    margin-bottom: 24px;
  }
}

/* Keep the requested Ubuntu typography without changing the restored layout. */
html#ubuntu-type#ubuntu-type body,
html#ubuntu-type#ubuntu-type body *:not(svg):not(path) {
  font-family: "Ubuntu", "Segoe UI", Arial, sans-serif !important;
}

html#ubuntu-type#ubuntu-type body [lang="ar"],
html#ubuntu-type#ubuntu-type body [lang="ar"] * {
  font-family: "Noto Naskh Arabic", serif !important;
}

html#ubuntu-type#ubuntu-type body .bismillah-mark {
  font-family: "Noto Naskh Arabic", serif !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

/* Participant roster and student directory · compact public pages */
body.page-students {
  --page-image: url("../kauzariyya2.png");
  background:
    linear-gradient(180deg, rgba(4, 10, 7, .48), rgba(3, 8, 5, .82)),
    linear-gradient(90deg, rgba(4, 12, 7, .65), rgba(4, 12, 7, .35)),
    var(--page-image) center / cover fixed !important;
}

body.page-students::before {
  background:
    linear-gradient(180deg, rgba(4, 10, 7, .38), rgba(3, 8, 5, .82)),
    var(--page-image) center / cover no-repeat !important;
}

body:not(.page-admin) .site-header,
body.page-home .site-header,
body:not(.page-home):not(.page-admin) .site-header {
  top: 10px !important;
  margin: 10px auto 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 18px !important;
  min-height: 56px !important;
  height: 56px !important;
}

body:not(.page-admin) .site-header.is-scrolled {
  transform: none !important;
}

body.page-participants .participant-shell.participant-directory-page {
  width: min(1180px, 100%);
  padding: 96px 0 74px !important;
}

body.page-participants .participant-directory-page .participant-title {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 28px !important;
  margin: 0 0 24px !important;
  padding: 0 0 28px 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.page-participants .participant-directory-page .participant-heading-copy > .overline {
  margin: 0 0 8px !important;
}

body.page-participants .participant-directory-page .participant-title h1 {
  max-width: none !important;
  margin: 0 !important;
}

body.page-participants .participant-directory-page .participant-heading-copy > p:last-child {
  max-width: 55ch;
  margin: 11px 0 0;
  color: rgba(238, 247, 240, .58);
  font-size: 12px;
  line-height: 1.65;
}

body.page-participants .participant-page-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(94px, 1fr)) auto;
  gap: 7px;
}

body.page-participants .participant-page-summary > span,
body.page-participants .participant-page-summary > a {
  min-height: 70px;
  display: grid;
  align-content: center;
  padding: 12px 15px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 13px;
  background: rgba(255, 255, 255, .026);
}

body.page-participants .participant-page-summary > span strong {
  color: #fff;
  font-size: 24px;
  line-height: 1;
}

body.page-participants .participant-page-summary > span small {
  margin-top: 6px;
  color: rgba(255, 255, 255, .42);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.page-participants .participant-page-summary > a {
  grid-template-columns: auto auto;
  align-items: center;
  gap: 12px;
  min-width: 128px;
  border-color: rgba(105, 231, 135, .2);
  background: rgba(105, 231, 135, .09);
  color: #8bf0a2;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}

body.page-participants .participant-page-summary > a:hover {
  border-color: rgba(105, 231, 135, .42);
  background: rgba(105, 231, 135, .14);
}

body.page-participants .participant-directory-page .participant-stage-layout {
  display: grid !important;
  grid-template-columns: minmax(0, .86fr) minmax(440px, 1.14fr) !important;
  align-items: start !important;
  gap: 16px !important;
}

body.page-participants .participant-directory-page .participant-live-card,
body.page-participants .participant-directory-page .participant-list {
  min-height: 0 !important;
  height: auto !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 20px !important;
  background: linear-gradient(150deg, rgba(7, 22, 12, .97), rgba(4, 14, 8, .96)) !important;
  box-shadow: 0 20px 52px rgba(0, 0, 0, .25) !important;
  backdrop-filter: none !important;
}

body.page-participants .participant-directory-page .participant-live-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding: 24px !important;
  overflow: hidden !important;
}

body.page-participants .participant-directory-page .participant-live-card::before,
body.page-participants .participant-directory-page .participant-live-card::after,
body.page-participants .participant-directory-page .participant-list::before {
  display: none !important;
  content: none !important;
  animation: none !important;
}

body.page-participants .participant-directory-page .live-label {
  min-height: 28px;
  font-size: 7px !important;
}

body.page-participants .participant-directory-page .stage-sequence {
  font-size: 10px;
}

body.page-participants .participant-directory-page .participant-live-card > .speaker-card-main {
  margin: 0 !important;
  padding: 38px 0 31px !important;
}

body.page-participants .participant-directory-page .speaker-card-main > p {
  margin: 0 0 10px !important;
  font-size: 8px !important;
}

body.page-participants .participant-directory-page .speaker-card-main > h2 {
  max-width: 13ch !important;
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(32px, 4.3vw, 48px) !important;
  font-weight: 700 !important;
  letter-spacing: -.045em !important;
  line-height: .98 !important;
}

body.page-participants .participant-directory-page .speaker-identifiers {
  margin-top: 17px !important;
}

body.page-participants .participant-directory-page .speaker-identifiers > span,
body.page-participants .participant-directory-page .speaker-identifiers > b {
  min-height: 28px;
  font-size: 7px !important;
}

body.page-participants .participant-directory-page .participant-live-card > .speaker-cue-board {
  margin: 0 !important;
  border-radius: 12px;
}

body.page-participants .participant-directory-page .speaker-cue-board > div {
  padding: 13px;
}

body.page-participants .participant-directory-page .speaker-cue-board strong {
  font-size: 12px;
}

body.page-participants .participant-directory-page .participant-live-card > .up-next-cue {
  min-height: 66px;
  margin-top: 10px !important;
  border-radius: 12px;
}

body.page-participants .participant-directory-page .participant-list {
  gap: 12px !important;
  padding: 22px !important;
  overflow: hidden !important;
}

body.page-participants .participant-directory-page .participant-list-head {
  padding-bottom: 13px;
}

body.page-participants .participant-directory-page .participant-list-head h2 {
  font-size: 24px;
}

body.page-participants .participant-directory-page .participant-list-head > strong {
  font-size: 24px;
}

body.page-participants .participant-directory-page .participant-roster-controls {
  grid-template-columns: minmax(0, 1.25fr) minmax(150px, .75fr);
}

body.page-participants .participant-directory-page .participant-results-scroll {
  flex: initial !important;
  max-height: 430px !important;
  padding-bottom: 1px !important;
  mask-image: none !important;
}

body.page-participants .participant-directory-page .participant-row {
  min-height: 62px !important;
  border-radius: 11px !important;
}

body.page-participants .participant-directory-page .participant-row:hover {
  transform: translateX(2px) !important;
  box-shadow: none !important;
}

body.page-participants .participant-directory-page .participant-empty-stage {
  min-height: 310px;
}

body.page-participants .participant-directory-page .participant-empty-stage h2 {
  font-size: clamp(30px, 4vw, 44px);
}

body.page-students main {
  width: min(1180px, 100%);
}

body.page-students .all-students-page {
  width: 100%;
  padding: 96px 0 74px;
}

body.page-students .students-page-hero {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 28px !important;
  padding: 0 0 28px 0 !important;
  margin: 0 0 24px 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.page-students .students-page-hero h1 {
  font-family: "Ubuntu", sans-serif !important;
  margin: 4px 0 12px 0 !important;
  color: #fff !important;
  font-size: clamp(58px, 8.5vw, 98px) !important;
  font-weight: 700 !important;
  line-height: .84 !important;
}

body.page-students .students-page-hero > div:first-child > p:last-child {
  max-width: 56ch;
  margin: 12px 0 0;
  color: rgba(238, 247, 240, .58);
  font-size: 12px;
  line-height: 1.65;
}

body.page-students .students-page-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  gap: 7px;
}

body.page-students .students-page-stats > span {
  min-height: 70px;
  display: grid;
  align-content: center;
  padding: 12px 15px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 13px;
  background: rgba(255, 255, 255, .026);
}

body.page-students .students-page-stats strong {
  color: #fff;
  font-size: 24px;
  line-height: 1;
}

body.page-students .students-page-stats small {
  margin-top: 6px;
  color: rgba(255, 255, 255, .42);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.page-students .all-students-page .public-student-directory {
  margin: 16px 0 0 !important;
  padding: 26px !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 20px !important;
  background: linear-gradient(150deg, rgba(7, 22, 12, .97), rgba(4, 14, 8, .96)) !important;
  box-shadow: 0 20px 52px rgba(0, 0, 0, .25) !important;
  backdrop-filter: none !important;
}

body.page-students .all-students-page .student-directory-head {
  margin: 0 0 20px !important;
  padding: 0 0 20px !important;
}

body.page-students .all-students-page .student-directory-head h2 {
  font-size: clamp(28px, 3.4vw, 38px) !important;
  line-height: 1 !important;
}

body.page-students .all-students-page .student-directory-head p:last-child {
  margin-top: 8px !important;
  font-size: 11px !important;
}

body.page-students .all-students-page .student-directory-head > strong {
  padding: 11px 13px;
  border: 1px solid rgba(105, 231, 135, .16);
  border-radius: 12px;
  background: rgba(105, 231, 135, .06);
  font-size: 27px !important;
  text-shadow: none !important;
}

body.page-students .all-students-page .public-student-filters {
  grid-template-columns: minmax(240px, 1fr) 210px !important;
  gap: 10px !important;
  margin-bottom: 18px !important;
}

body.page-students .all-students-page .public-student-filters input,
body.page-students .all-students-page .public-student-filters select {
  height: 44px !important;
  border-radius: 11px !important;
  font-size: 12px !important;
}

body.page-students .all-students-page .public-student-grid {
  max-height: 660px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 10px !important;
  padding-bottom: 40px !important;
  scrollbar-width: thin !important;
  scrollbar-color: #4ee883 rgba(4, 16, 9, 0.9) !important;
}

body.page-students .all-students-page .public-student-grid article {
  min-height: 118px !important;
  grid-template-columns: 68px minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 15px !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, .025) !important;
  animation: poweredFadeSlideUp .4s cubic-bezier(.16, 1, .3, 1) var(--student-delay, 0ms) both;
}

body.page-students .all-students-page .public-student-grid article:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(105, 231, 135, .25) !important;
  background: rgba(105, 231, 135, .05) !important;
  box-shadow: none !important;
}

body.page-students .all-students-page .public-student-grid article > b {
  padding-inline: 7px !important;
  border-radius: 9px !important;
  font-size: 10px !important;
}

body.page-students .all-students-page .public-student-grid h3 {
  font-size: 14px !important;
}

body.page-students .all-students-page .public-student-grid article p,
body.page-students .all-students-page .public-student-grid footer {
  font-size: 10px !important;
}

body.page-students .all-students-page .public-student-grid footer {
  gap: 6px 10px !important;
  padding-top: 11px !important;
}

body.page-students .all-students-page .public-student-grid footer i {
  padding: 3px 7px !important;
  font-size: 7px !important;
}

body.page-students .student-directory-pagination {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

body.page-students .student-directory-pagination > div {
  display: flex;
  justify-content: center;
  gap: 5px;
}

body.page-students .student-directory-pagination button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 9px;
  background: rgba(255, 255, 255, .03);
  color: rgba(255, 255, 255, .7);
  font-size: 10px;
  cursor: pointer;
}

body.page-students .student-directory-pagination button:hover:not(:disabled),
body.page-students .student-directory-pagination button.active {
  border-color: #69e787;
  background: #69e787;
  color: #071109;
}

body.page-students .student-directory-pagination button:disabled {
  opacity: .3;
  cursor: default;
}

body.page-students .student-directory-pagination > span {
  color: rgba(255, 255, 255, .42);
  font-size: 9px;
  white-space: nowrap;
}

body.page-students .public-student-empty {
  grid-column: 1 / -1;
}

@media(max-width: 980px) {
  body.page-participants .participant-directory-page .participant-title,
  body.page-students .students-page-hero {
    grid-template-columns: 1fr !important;
  }

  body.page-participants .participant-page-summary {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(130px, .8fr);
  }

  body.page-participants .participant-directory-page .participant-stage-layout {
    grid-template-columns: 1fr !important;
  }

  body.page-participants .participant-directory-page .participant-list {
    max-height: none !important;
  }

  body.page-participants .participant-directory-page .participant-results-scroll {
    max-height: 520px !important;
  }

  body.page-students .students-page-stats {
    width: 100%;
  }

  body.page-students .all-students-page .public-student-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media(max-width: 700px) {
  body.page-students {
    --page-image: url("../kauzariyya2.png") !important;
    background-image:
      linear-gradient(180deg, rgba(4, 12, 7, 0.72) 0%, rgba(3, 8, 5, 0.88) 100%),
      url("../kauzariyya2.png") !important;
    background-position: center top !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
  }

  body:not(.page-admin) .site-header,
  body.page-home .site-header,
  body:not(.page-home):not(.page-admin) .site-header {
    top: 10px !important;
    margin: 10px auto 0 !important;
    border-radius: 18px !important;
    min-height: 56px !important;
  }

  body.page-participants .participant-shell.participant-directory-page,
  body.page-students .all-students-page {
    padding: 76px 0 76px !important;
  }

  body.page-participants .participant-directory-page .participant-title,
  body.page-students .students-page-hero {
    gap: 19px !important;
    padding: 20px !important;
    border-radius: 16px !important;
  }

  body.page-participants .participant-directory-page .participant-title h1,
  body.page-students .students-page-hero h1 {
    font-size: clamp(42px, 11vw, 64px) !important;
  }

  body.page-participants .participant-page-summary {
    grid-template-columns: 1fr 1fr;
  }

  body.page-participants .participant-page-summary > a {
    grid-column: 1 / -1;
    min-height: 48px;
  }

  body.page-participants .participant-page-summary > span,
  body.page-students .students-page-stats > span {
    min-height: 62px;
    padding: 10px 12px;
  }

  body.page-participants .participant-directory-page .participant-live-card,
  body.page-participants .participant-directory-page .participant-list,
  body.page-students .all-students-page .public-student-directory {
    padding: 18px !important;
    border-radius: 16px !important;
  }

  body.page-participants .participant-directory-page .participant-live-card > .speaker-card-main {
    padding: 31px 0 26px !important;
  }

  body.page-participants .participant-directory-page .speaker-card-main > h2 {
    font-size: clamp(31px, 10vw, 43px) !important;
  }

  body.page-participants .participant-directory-page .participant-roster-controls,
  body.page-students .all-students-page .public-student-filters {
    grid-template-columns: 1fr !important;
  }

  body.page-students .students-page-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.page-students .all-students-page .public-student-grid {
    grid-template-columns: 1fr !important;
  }

  body.page-students .student-directory-pagination {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  body.page-students .student-directory-pagination > span {
    display: none;
  }

  .mobile-tabbar,
  body:not(.page-home):not(.page-admin) .mobile-tabbar {
    padding-inline: 3px !important;
  }

  .mobile-tabbar a {
    font-size: 7px !important;
  }

  .mobile-tabbar a::before {
    max-width: calc(100% - 4px);
  }

  .mobile-tabbar a.active::before {
    width: 46px !important;
  }

  .mobile-tabbar .tab-glyph {
    width: 16px;
    height: 14px;
  }
}

@media(max-width: 430px) {
  body.page-participants .participant-directory-page .participant-live-card > .speaker-cue-board {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.page-participants .participant-directory-page .speaker-cue-board > div:last-child {
    grid-column: auto !important;
  }

  body.page-participants .participant-directory-page .speaker-cue-board > div {
    padding: 10px 8px;
  }

  body.page-participants .participant-directory-page .speaker-cue-board strong {
    font-size: 10px;
  }

  body.page-students .students-page-stats strong {
    font-size: 20px;
  }

  body.page-students .students-page-stats small {
    font-size: 6px;
  }
}

@media(prefers-reduced-motion: reduce) {
  body.page-students .all-students-page .public-student-grid article {
    animation: none !important;
  }
}

/* Kauzariyya brand theme · Dosis English type and institutional green */
:root {
  --kz-brand: #008c4a;
  --kz-brand-hover: #00a257;
  --kz-brand-deep: #006c39;
  --kz-mint: #83e28f;
  --kz-brand-soft: rgba(0, 140, 74, .14);
  --kz-brand-line: rgba(0, 163, 86, .38);
  --green: var(--kz-brand);
  --modern-accent: var(--kz-brand);
  --modern-accent-soft: var(--kz-brand-soft);
  --modern-line-strong: var(--kz-brand-line);
  --home-green: var(--kz-brand);
  --home-green-soft: var(--kz-mint);
  --kz-green: var(--kz-brand);
  --kz-green-deep: var(--kz-brand-deep);
  --admin-green: var(--kz-brand);
  --admin-green-soft: var(--kz-mint);
}

html#kauzariyya-theme body {
  font-family: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

html#kauzariyya-theme body [lang="ar"],
html#kauzariyya-theme body [lang="ar"] *,
html#kauzariyya-theme body [dir="rtl"],
html#kauzariyya-theme body [dir="rtl"] *,
html#kauzariyya-theme body .team-name-ar,
html#kauzariyya-theme body .team-name-input,
html#kauzariyya-theme body .team-name-select,
html#kauzariyya-theme body .team-arabic-select,
html#kauzariyya-theme body .arabic-class-select,
html#kauzariyya-theme body .bismillah-mark {
  font-family: "Noto Naskh Arabic", serif !important;
}

html#kauzariyya-theme body .bismillah-mark {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

html#kauzariyya-theme body {
  accent-color: var(--kz-brand);
}

html#kauzariyya-theme body h1,
html#kauzariyya-theme body h1 *,
html#kauzariyya-theme body h2,
html#kauzariyya-theme body h2 *,
html#kauzariyya-theme body h3,
html#kauzariyya-theme body h3 *,
html#kauzariyya-theme body h4,
html#kauzariyya-theme body h4 *,
html#kauzariyya-theme body h5,
html#kauzariyya-theme body h5 *,
html#kauzariyya-theme body h6,
html#kauzariyya-theme body h6 *,
html#kauzariyya-theme body .hero-content h1,
html#kauzariyya-theme body .hero-content h1 *,
html#kauzariyya-theme body .page-hero h1,
html#kauzariyya-theme body .page-hero h1 *,
html#kauzariyya-theme body .schedule-head h1,
html#kauzariyya-theme body .schedule-head h1 *,
html#kauzariyya-theme body .section-heading h2,
html#kauzariyya-theme body .section-heading h2 *,
html#kauzariyya-theme body .leaderboard-header h1,
html#kauzariyya-theme body .leaderboard-header h1 *,
html#kauzariyya-theme body .leader-identity-copy h2,
html#kauzariyya-theme body .leader-identity-copy h2 *,
html#kauzariyya-theme body .signup-card h1,
html#kauzariyya-theme body .signup-card h1 *,
html#kauzariyya-theme body .home-footer-utility h2,
html#kauzariyya-theme body .home-footer-utility h2 *,
html#kauzariyya-theme body .footer-pulse-copy h2,
html#kauzariyya-theme body .footer-pulse-copy h2 *,
html#kauzariyya-theme body .schedule-banner-title,
html#kauzariyya-theme body .schedule-banner-title *,
html#kauzariyya-theme body .home-redesign-copy h1,
html#kauzariyya-theme body .home-redesign-copy h1 *,
html#kauzariyya-theme body .musabaqa-title,
html#kauzariyya-theme body .musabaqa-hero h1,
html#kauzariyya-theme body .students-hero h1,
html#kauzariyya-theme body .review-hero h1,
html#kauzariyya-theme body .scoreboard-title,
html#kauzariyya-theme body .admin-title,
html#kauzariyya-theme body .home-event-highlights h3 {
  font-family: "Ubuntu", sans-serif !important;
}

html#kauzariyya-theme body:not(.page-admin) h1,
html#kauzariyya-theme body:not(.page-admin) h2 {
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

html#kauzariyya-theme body .overline,
html#kauzariyya-theme body .home-hero-eyebrow,
html#kauzariyya-theme body .home-story-kicker,
html#kauzariyya-theme body.page-home h1 em,
html#kauzariyya-theme body.page-home h2 em,
html#kauzariyya-theme body.page-scoreboard h1 em,
html#kauzariyya-theme body.page-schedule h1 em,
html#kauzariyya-theme body.page-musabaqa h1 em {
  color: var(--kz-mint) !important;
}

html#kauzariyya-theme body .button:not(.button-ghost):not(.danger),
html#kauzariyya-theme body button[type="submit"]:not(.danger),
html#kauzariyya-theme body .button-review-submit,
html#kauzariyya-theme body.page-schedule .schedule-tabs button.active,
html#kauzariyya-theme body.page-admin .admin-event-actions button:first-child,
html#kauzariyya-theme body.page-admin .admin-championship-control > header button.primary,
html#kauzariyya-theme body.page-admin .admin-command-bar > button,
html#kauzariyya-theme body.page-admin .bulk-apply,
html#kauzariyya-theme body.page-students .student-directory-pagination button.active,
html#kauzariyya-theme body.page-students .student-directory-pagination button:hover:not(:disabled) {
  border-color: var(--kz-brand) !important;
  background: var(--kz-brand) !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(0, 108, 57, .24) !important;
}

html#kauzariyya-theme body .button:not(.button-ghost):not(.danger):hover,
html#kauzariyya-theme body button[type="submit"]:not(.danger):hover,
html#kauzariyya-theme body .button-review-submit:hover,
html#kauzariyya-theme body.page-admin .admin-event-actions button:first-child:hover,
html#kauzariyya-theme body.page-admin .admin-championship-control > header button.primary:hover {
  border-color: var(--kz-brand-hover) !important;
  background: var(--kz-brand-hover) !important;
  color: #fff !important;
}

@media(min-width: 760px) {
  html#kauzariyya-theme body:not(.page-admin) .site-nav a.active,
  html#kauzariyya-theme body.page-home .site-nav a.active,
  html#kauzariyya-theme body.page-admin .site-nav a.active {
    color: #fff !important;
    background: linear-gradient(135deg, #09ae46, #068033) !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 18px rgba(9, 174, 70, .6), inset 0 1px 0 rgba(255, 255, 255, .3) !important;
  }
}

html#kauzariyya-theme body .mobile-tabbar a.active {
  color: var(--kz-mint) !important;
}

html#kauzariyya-theme body .mobile-tabbar a.active::before {
  background: linear-gradient(135deg, rgba(0, 140, 74, .34), rgba(0, 140, 74, .13)) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 163, 86, .22) !important;
}

html#kauzariyya-theme body .rating-buttons button.active,
html#kauzariyya-theme body .rating-buttons button:hover {
  border-color: var(--kz-brand) !important;
  background: var(--kz-brand-soft) !important;
  color: var(--kz-mint) !important;
}

html#kauzariyya-theme body input:focus,
html#kauzariyya-theme body select:focus,
html#kauzariyya-theme body textarea:focus {
  border-color: var(--kz-brand) !important;
  box-shadow: 0 0 0 3px rgba(0, 140, 74, .16) !important;
}

html#kauzariyya-theme body a:focus-visible,
html#kauzariyya-theme body button:focus-visible,
html#kauzariyya-theme body input:focus-visible,
html#kauzariyya-theme body select:focus-visible,
html#kauzariyya-theme body textarea:focus-visible {
  outline: 2px solid var(--kz-mint) !important;
  outline-offset: 3px;
}

html#kauzariyya-theme body .participant-page-summary > a,
html#kauzariyya-theme body .footer-directions-link,
html#kauzariyya-theme body .reporting-note,
html#kauzariyya-theme body .status-pill.live {
  border-color: var(--kz-brand-line) !important;
  background-color: var(--kz-brand-soft) !important;
  color: var(--kz-mint) !important;
}

html#kauzariyya-theme .page-loader-mark {
  border-color: rgba(0, 163, 86, .38) !important;
  background: rgba(0, 140, 74, .15) !important;
}

html#kauzariyya-theme .page-loader-mark::after {
  border-color: rgba(0, 163, 86, .42) !important;
}

html#kauzariyya-theme .page-loader-progress i {
  background: linear-gradient(90deg, var(--kz-brand-deep), var(--kz-mint)) !important;
}

html#kauzariyya-theme .page-loader-copy strong,
html#kauzariyya-theme .page-loader-copy span {
  font-family: "Ubuntu", "Arial Narrow", Arial, sans-serif !important;
}

html#kauzariyya-theme {
  scrollbar-color: rgba(255, 255, 255, .18) transparent !important;
}

html#kauzariyya-theme *::-webkit-scrollbar-thumb {
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .18) !important;
  background-clip: padding-box !important;
}

html#kauzariyya-theme.scrolljs-ready {
  scroll-behavior: auto !important;
}

html#kauzariyya-theme.scrolljs-ready .participant-results-scroll,
html#kauzariyya-theme.scrolljs-ready .student-records-scroll,
html#kauzariyya-theme.scrolljs-ready .college-student-list {
  scroll-behavior: auto !important;
}

body.page-students .students-page-stats {
  grid-template-columns: repeat(4, minmax(82px, 1fr));
}

body.page-students .all-students-page .public-student-filters {
  grid-template-columns: minmax(240px, 1fr) minmax(160px, 210px) minmax(150px, 190px) !important;
}

@media(max-width: 700px) {
  body.page-students .students-page-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.page-students .all-students-page .public-student-filters {
    grid-template-columns: 1fr !important;
  }
}

@media(prefers-reduced-motion: reduce) {
  html#kauzariyya-theme {
    scroll-behavior: auto !important;
  }
}

/* Keep the participant card box completely static without any motion, tilt, or pulse animations. */
html#kauzariyya-theme body.page-participants .speaker-card,
html#kauzariyya-theme body.page-participants .participant-live-card,
html#kauzariyya-theme.nextgen-motion-ready body.page-participants .speaker-card,
html#kauzariyya-theme.nextgen-motion-ready body.page-participants .participant-live-card {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
  animation: none !important;
  transition: none !important;
  will-change: auto !important;
}

html#kauzariyya-theme body.page-participants .speaker-card *,
html#kauzariyya-theme body.page-participants .participant-live-card *,
html#kauzariyya-theme.universal-text-motion body.page-participants .speaker-card *,
html#kauzariyya-theme.universal-text-motion body.page-participants .participant-live-card * {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
  transition: none !important;
  will-change: auto !important;
}

/* ==========================================================================
   MINIMALIST & ULTRA-CLEAN REDESIGN: PARTICIPANTS & ALL STUDENTS PAGES
   ========================================================================== */

/* 1. HERO HEADERS - UNBOXED & GIANT DISPLAY TYPOGRAPHY */
html#kauzariyya-theme body.page-participants .participant-directory-page .participant-title,
html#kauzariyya-theme body.page-participants .participant-title,
html#kauzariyya-theme body.page-students .students-page-hero {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 0 28px 0 !important;
}

html#kauzariyya-theme body.page-participants .participant-title h1,
html#kauzariyya-theme body.page-students .students-page-hero h1 {
  font-family: "Ubuntu", sans-serif !important;
  font-size: clamp(58px, 8.5vw, 98px) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.04em !important;
  line-height: 0.84 !important;
}

html#kauzariyya-theme body.page-participants .participant-page-summary > span,
html#kauzariyya-theme body.page-students .students-page-stats > span {
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  padding: 10px 16px !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}

html#kauzariyya-theme body.page-participants .participant-page-summary > span:hover,
html#kauzariyya-theme body.page-students .students-page-stats > span:hover {
  border-color: rgba(89, 223, 123, 0.25) !important;
  background: rgba(89, 223, 123, 0.04) !important;
}

html#kauzariyya-theme body.page-participants .participant-page-summary > a {
  border: 1px solid rgba(89, 223, 123, 0.2) !important;
  border-radius: 12px !important;
  background: rgba(89, 223, 123, 0.08) !important;
  color: var(--kz-mint) !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

html#kauzariyya-theme body.page-participants .participant-page-summary > a:hover {
  background: var(--kz-brand) !important;
  color: #ffffff !important;
  border-color: var(--kz-brand) !important;
}

/* 2. PARTICIPANTS STAGE CARD & ROSTER LIST */
html#kauzariyya-theme body.page-participants .speaker-card,
html#kauzariyya-theme body.page-participants .participant-live-card {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  background: rgba(14, 23, 17, 0.75) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(20px) !important;
  padding: 24px !important;
}

html#kauzariyya-theme body.page-participants .speaker-card-main > p {
  color: var(--kz-mint) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

html#kauzariyya-theme body.page-participants .speaker-card-main > h2 {
  font-size: clamp(28px, 3.2vw, 42px) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 4px 0 12px !important;
}

html#kauzariyya-theme body.page-participants .speaker-identifiers span,
html#kauzariyya-theme body.page-participants .speaker-identifiers b {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 99px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  padding: 4px 12px !important;
  font-size: 11px !important;
}

html#kauzariyya-theme body.page-participants .speaker-cue-board {
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  overflow: hidden !important;
}

html#kauzariyya-theme body.page-participants .up-next-cue {
  border: 1px solid rgba(89, 223, 123, 0.12) !important;
  border-radius: 12px !important;
  background: rgba(89, 223, 123, 0.04) !important;
  padding: 12px 16px !important;
}

html#kauzariyya-theme body.page-participants .participant-list {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  background: rgba(14, 23, 17, 0.75) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(20px) !important;
  padding: 20px !important;
}

/* Overridden by master control panel at bottom of file */

html#kauzariyya-theme body.page-participants .participant-row {
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  padding: 10px 14px !important;
  transition: all 0.2s ease !important;
}

html#kauzariyya-theme body.page-participants .participant-row:hover {
  border-color: rgba(89, 223, 123, 0.25) !important;
  background: rgba(89, 223, 123, 0.04) !important;
}

html#kauzariyya-theme body.page-participants .participant-row.is-live {
  border-color: rgba(89, 223, 123, 0.35) !important;
  background: rgba(89, 223, 123, 0.08) !important;
  box-shadow: inset 3px 0 0 var(--kz-brand) !important;
}

/* 3. STUDENTS PAGE DIRECTORY & CARDS */
html#kauzariyya-theme body.page-students .all-students-page .public-student-directory {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  background: rgba(14, 23, 17, 0.75) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(20px) !important;
  padding: 24px !important;
}

html#kauzariyya-theme body.page-students .all-students-page .public-student-filters input,
html#kauzariyya-theme body.page-students .all-students-page .public-student-filters select {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  background: rgba(0, 0, 0, 0.3) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  padding: 0 12px !important;
}

html#kauzariyya-theme body.page-students .all-students-page .public-student-grid article {
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  padding: 14px !important;
  transition: all 0.2s ease !important;
}

html#kauzariyya-theme body.page-students .all-students-page .public-student-grid article:hover {
  border-color: rgba(89, 223, 123, 0.25) !important;
  background: rgba(89, 223, 123, 0.04) !important;
  transform: translateY(-2px) !important;
}

html#kauzariyya-theme body.page-students .all-students-page .public-student-grid article > b {
  border: 1px solid rgba(89, 223, 123, 0.2) !important;
  border-radius: 8px !important;
  background: rgba(89, 223, 123, 0.08) !important;
  color: var(--kz-mint) !important;
  font-weight: 700 !important;
}

html#kauzariyya-theme body.page-students .all-students-page .public-student-grid h3 {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

html#kauzariyya-theme body.page-students .student-directory-pagination button {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

html#kauzariyya-theme body.page-students .student-directory-pagination button.active,
html#kauzariyya-theme body.page-students .student-directory-pagination button:hover:not(:disabled) {
  border-color: var(--kz-brand) !important;
  background: var(--kz-brand) !important;
  color: #ffffff !important;
}

/* 4. LIGHTWEIGHT ANIMATIONS & TRANSITIONS */
@keyframes simpleFadeUp {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes softPulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(89, 223, 123, 0.4);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(89, 223, 123, 0);
  }
}

html#kauzariyya-theme body.page-participants .participant-directory-page .participant-title,
html#kauzariyya-theme body.page-students .students-page-hero {
  animation: simpleFadeUp 0.4s ease-out both !important;
}

html#kauzariyya-theme body.page-participants .speaker-card,
html#kauzariyya-theme body.page-participants .participant-live-card {
  animation: simpleFadeUp 0.4s ease-out 0.05s both !important;
}

html#kauzariyya-theme body.page-participants .participant-list {
  animation: simpleFadeUp 0.4s ease-out 0.1s both !important;
}

html#kauzariyya-theme body.page-students .all-students-page .public-student-directory {
  animation: simpleFadeUp 0.4s ease-out 0.05s both !important;
}

html#kauzariyya-theme body.page-participants .live-label i {
  animation: softPulseGlow 2s infinite ease-in-out !important;
}

html#kauzariyya-theme body.page-participants .participant-row,
html#kauzariyya-theme body.page-students .all-students-page .public-student-grid article {
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease !important;
}

@media(prefers-reduced-motion: reduce) {
  html#kauzariyya-theme body.page-participants .participant-directory-page .participant-title,
  html#kauzariyya-theme body.page-students .students-page-hero,
  html#kauzariyya-theme body.page-participants .speaker-card,
  html#kauzariyya-theme body.page-participants .participant-live-card,
  html#kauzariyya-theme body.page-participants .participant-list,
  html#kauzariyya-theme body.page-students .all-students-page .public-student-directory,
  html#kauzariyya-theme body.page-participants .live-label i {
    animation: none !important;
  }
}

/* ==========================================================================
   Simple, Clean Redesign for Event Highlights Section
   ========================================================================== */
html#kauzariyya-theme body.page-home .home-event-highlights {
  margin-top: 36px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html#kauzariyya-theme body.page-home .home-event-highlights > header {
  margin-bottom: 28px !important;
}

html#kauzariyya-theme body.page-home .home-event-highlights > header .overline {
  color: #4ee883 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

html#kauzariyya-theme body.page-home .home-event-highlights > header h2 {
  max-width: 22ch !important;
  font-size: clamp(28px, 3.8vw, 44px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
}

html#kauzariyya-theme body.page-home .home-event-highlights > div {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  border: none !important;
}

html#kauzariyya-theme body.page-home .home-event-highlights article,
html#kauzariyya-theme body.page-home .home-event-highlights article:first-child,
html#kauzariyya-theme body.page-home .home-event-highlights article:nth-child(odd) {
  position: relative !important;
  min-height: 200px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  background: rgba(10, 24, 16, 0.6) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden !important;
}

html#kauzariyya-theme body.page-home .home-event-highlights article::before {
  display: none !important;
}

html#kauzariyya-theme body.page-home .home-event-highlights article:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(78, 232, 131, 0.45) !important;
  background: rgba(14, 34, 23, 0.8) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(78, 232, 131, 0.1) !important;
}

html#kauzariyya-theme body.page-home .home-event-highlights article .highlight-card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 24px !important;
  width: 100% !important;
}

html#kauzariyya-theme body.page-home .home-event-highlights article .highlight-card-head > span,
html#kauzariyya-theme body.page-home .home-event-highlights article > span {
  width: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  border-radius: 12px !important;
  background: rgba(78, 232, 131, 0.12) !important;
  border: 1px solid rgba(78, 232, 131, 0.25) !important;
  color: #4ee883 !important;
}

html#kauzariyya-theme body.page-home .home-event-highlights article .highlight-card-head > span svg,
html#kauzariyya-theme body.page-home .home-event-highlights article > span svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #4ee883 !important;
}

html#kauzariyya-theme body.page-home .home-event-highlights article small,
html#kauzariyya-theme body.page-home .home-event-highlights article .highlight-card-head small {
  position: static !important;
  color: rgba(255, 255, 255, 0.35) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}

html#kauzariyya-theme body.page-home .home-event-highlights article h3 {
  margin: 0 0 8px 0 !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
}

html#kauzariyya-theme body.page-home .home-event-highlights article p {
  margin: 0 !important;
  max-width: none !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

@media (max-width: 992px) {
  html#kauzariyya-theme body.page-home .home-event-highlights > div {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
}

@media (max-width: 576px) {
  html#kauzariyya-theme body.page-home .home-event-highlights > div {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  html#kauzariyya-theme body.page-home .home-event-highlights article,
  html#kauzariyya-theme body.page-home .home-event-highlights article:first-child,
  html#kauzariyya-theme body.page-home .home-event-highlights article:nth-child(odd) {
    min-height: auto !important;
    padding: 20px !important;
  }
}

/* Social icon border/shadow resets — now handled by the unified
   "Modern Minimal Social Icons" block below (≈line 11558+). */

/* ==========================================================================
   Global Site-Wide Ubuntu Font Application Across All Pages & Headings
   ========================================================================== */
html, body,
p, span, div, a, button, input, select, textarea, label, li, small, strong, em, b,
article, section, header, footer, nav, table, td, th, caption, figcaption, blockquote {
  font-family: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.musabaqa-title, .scoreboard-title, .admin-title, .leaderboard-header h1,
.home-redesign-copy h1, .schedule-head h1, .participant-title h1, .review-copy h1,
.hero-content h1, .page-hero h1 {
  font-family: "Ubuntu", sans-serif !important;
}

html#kauzariyya-theme body h1 em,
html#kauzariyya-theme body h2 em,
html#kauzariyya-theme body h3 em,
html#kauzariyya-theme body h1 span,
html#kauzariyya-theme body h2 span,
html#kauzariyya-theme body h3 span {
  font-family: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Sacred Qur'anic verses & Arabic script */
[lang="ar"], [dir="rtl"], .bismillah-mark, .home-story-verse p {
  font-family: "Amiri Quran", "Amiri", "Noto Naskh Arabic", serif !important;
}

/* ==========================================================================
   Modern & Simple Redesign for Students & Participants Page (Scrollable Grid)
   ========================================================================== */

/* Directory Wrapper Panel */
html#kauzariyya-theme body .public-student-directory,
html#kauzariyya-theme body .participant-stage-layout {
  background: rgba(10, 24, 16, 0.6) !important;
  border: 1px solid rgba(78, 232, 131, 0.18) !important;
  border-radius: 24px !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35) !important;
  padding: 28px !important;
}

/* Directory Header */
html#kauzariyya-theme body .public-student-directory > header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-bottom: 20px !important;
  margin-bottom: 20px !important;
}

/* Search and Filter Inputs */
html#kauzariyya-theme body .public-student-filters {
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) 180px 180px !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}

html#kauzariyya-theme body .public-student-filters input,
html#kauzariyya-theme body .public-student-filters select {
  height: 48px !important;
  padding: 0 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  backdrop-filter: blur(8px) !important;
  transition: all 0.2s ease !important;
}

html#kauzariyya-theme body .public-student-filters input:focus,
html#kauzariyya-theme body .public-student-filters select:focus {
  border-color: #4ee883 !important;
  background: rgba(78, 232, 131, 0.06) !important;
  box-shadow: 0 0 0 3px rgba(78, 232, 131, 0.15) !important;
  outline: none !important;
}

/* Continuous Scroll Student Grid */
html#kauzariyya-theme body .public-student-grid {
  max-height: 660px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 10px !important;
  padding-bottom: 40px !important;
  scrollbar-width: thin !important;
  scrollbar-color: #4ee883 rgba(4, 16, 9, 0.9) !important;
}

/* Student Cards */
html#kauzariyya-theme body .public-student-grid article {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(12px) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, background 0.25s ease !important;
}

html#kauzariyya-theme body .public-student-grid article:hover {
  border-color: rgba(78, 232, 131, 0.4) !important;
  background: rgba(78, 232, 131, 0.06) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25), 0 0 20px rgba(78, 232, 131, 0.1) !important;
}

html#kauzariyya-theme body .public-student-grid article > b {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  background: rgba(78, 232, 131, 0.15) !important;
  color: #4ee883 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 10px !important;
}

html#kauzariyya-theme body .public-student-grid h3 {
  margin: 0 0 4px 0 !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

html#kauzariyya-theme body .public-student-grid article p {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 12px !important;
}

html#kauzariyya-theme body .public-student-grid footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 12px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 11px !important;
}

html#kauzariyya-theme body .public-student-grid footer i {
  padding: 3px 10px !important;
  border-radius: 100px !important;
  background: rgba(78, 232, 131, 0.15) !important;
  color: #4ee883 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Hide legacy pagination completely */
.student-directory-pagination {
  display: none !important;
}

/* Responsive Handling & Mobile Visibility Overrides */
@media (max-width: 1024px) {
  html#kauzariyya-theme body .public-student-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  /* Force visibility of summary stats and headers on mobile */
  html#kauzariyya-theme body .participant-title,
  html#kauzariyya-theme body .students-page-hero {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html#kauzariyya-theme body .participant-page-summary,
  html#kauzariyya-theme body .students-page-stats {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html#kauzariyya-theme body .participant-page-summary > span,
  html#kauzariyya-theme body .students-page-stats > span {
    flex: 1 1 45% !important;
    min-width: 120px !important;
    padding: 12px 14px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
  }

  html#kauzariyya-theme body .public-student-directory,
  html#kauzariyya-theme body .participant-stage-layout {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  html#kauzariyya-theme body .public-student-grid {
    grid-template-columns: 1fr !important;
    max-height: 580px !important;
  }

  html#kauzariyya-theme body .public-student-filters {
    grid-template-columns: 1fr !important;
  }

  /* Ensure card details & tags are fully visible on mobile */
  html#kauzariyya-theme body .public-student-grid article p span {
    display: inline-block !important;
  }

  html#kauzariyya-theme body .up-next-cue,
  html#kauzariyya-theme body .speaker-cue-board {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Smooth Entrance Micro-animations for Mobile & Desktop */
@keyframes fadeInUpMobile {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html#kauzariyya-theme body .public-student-grid article,
html#kauzariyya-theme body .participant-row,
html#kauzariyya-theme body .speaker-card {
  animation: fadeInUpMobile 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Remove green border line under schedule-tabs (Image 1 request) */
html#kauzariyya-theme body .schedule-tabs,
body.page-schedule .schedule-tabs,
.schedule-tabs {
  border-bottom: none !important;
  box-shadow: none !important;
}
html#kauzariyya-theme body .schedule-tabs::after,
body.page-schedule .schedule-tabs::after,
.schedule-tabs::after {
  display: none !important;
}

/* White & Green Themed Headings (Identical to Schedule page) */
html#kauzariyya-theme body .participant-title h1,
html#kauzariyya-theme body .students-page-hero h1,
html#kauzariyya-theme body .schedule-head h1,
html#kauzariyya-theme body .participant-heading-copy h1,
.participant-title h1,
.students-page-hero h1,
.schedule-head h1 {
  font-family: "Ubuntu", sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(58px, 8.5vw, 92px) !important;
  line-height: 0.84 !important;
  letter-spacing: -0.04em !important;
  color: #ffffff !important;
  margin: 4px 0 12px 0 !important;
}

html#kauzariyya-theme body .participant-title h1 em,
html#kauzariyya-theme body .students-page-hero h1 em,
html#kauzariyya-theme body .schedule-head h1 em,
html#kauzariyya-theme body .participant-heading-copy h1 em,
.participant-title h1 em,
.students-page-hero h1 em,
.schedule-head h1 em {
  color: #4ee883 !important;
  font-style: normal !important;
  display: inline-block !important;
}

/* Green dot overline tag */
html#kauzariyya-theme body .participant-title .overline,
html#kauzariyya-theme body .students-page-hero .overline,
html#kauzariyya-theme body .schedule-head .overline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #4ee883 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

html#kauzariyya-theme body .overline-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background-color: #4ee883 !important;
  box-shadow: 0 0 8px rgba(78, 232, 131, 0.9) !important;
  display: inline-block !important;
}

/* Remove card background box from participant-title & students-page-hero (identical to schedule-head) */
html#kauzariyya-theme body .participant-title,
html#kauzariyya-theme body .students-page-hero,
body.page-participants .participant-directory-page .participant-title,
.participant-title,
.students-page-hero {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 0 24px 0 !important;
}

/* ==========================================================================
   Master Site-Wide Ultra-Reliable Scroll Engine (Desktop & Mobile)
   ========================================================================== */

html,
html#kauzariyya-theme {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100vh !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
}

body,
html#kauzariyya-theme body,
body:not(.page-admin) {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  height: auto !important;
  min-height: 100vh !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

#react-root,
main,
body main,
body:not(.page-admin) main,
.page-shell,
.section-wrap,
.participant-shell,
.all-students-page,
.public-student-directory,
.schedule-grid,
.musabaqa-plan-shell,
.home-story,
.leaderboard-glass,
.review-shell {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  height: auto !important;
  max-height: none !important;
  min-height: auto !important;
  touch-action: pan-y !important;
}

/* Mobile Responsive Adjustments (Max Width 768px) */
@media (max-width: 768px) {
  /* Page Containers Bottom Padding for Mobile Tab Bar */
  main,
  .section-wrap,
  .musabaqa-plan-shell,
  .participant-shell,
  .all-students-page,
  .schedule-grid,
  .scoreboard-experience {
    padding-bottom: 120px !important;
  }

  /* Unconstrain grid containers for fluid page scroll */
  html#kauzariyya-theme body .public-student-grid {
    max-height: 520px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 8px !important;
    grid-template-columns: 1fr !important;
  }
  html#kauzariyya-theme body .participant-stage-layout,
  html#kauzariyya-theme body .musabaqa-program-list {
    max-height: none !important;
    overflow: visible !important;
    padding-right: 0 !important;
    grid-template-columns: 1fr !important;
  }

  /* Compact Responsive Mobile Hero Titles */
  html#kauzariyya-theme body .participant-title h1,
  html#kauzariyya-theme body .students-page-hero h1,
  html#kauzariyya-theme body .schedule-head h1,
  html#kauzariyya-theme body .musabaqa-plan-hero h1,
  .participant-title h1,
  .students-page-hero h1,
  .schedule-head h1 {
    font-size: clamp(34px, 8.5vw, 56px) !important;
    line-height: 0.95 !important;
  }

  /* Mobile Stat & Bento Cards */
  html#kauzariyya-theme body .musabaqa-plan-hero,
  html#kauzariyya-theme body .students-page-hero,
  html#kauzariyya-theme body .participant-title {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Mobile Program Section Lists */
  html#kauzariyya-theme body .musabaqa-program-list article,
  html#kauzariyya-theme body .participant-row {
    padding: 12px 14px !important;
    min-height: 64px !important;
    gap: 10px !important;
  }

  /* Fixed Glassmorphic Mobile Navigation Bar */
  .mobile-tabbar,
  body:not(.page-home):not(.page-admin) .mobile-tabbar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    height: 64px !important;
    padding: 4px 8px !important;
    background: rgba(8, 18, 12, 0.92) !important;
    border-top: 1px solid rgba(78, 232, 131, 0.2) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5) !important;
  }

  .mobile-tabbar a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 6px 8px !important;
    border-radius: 12px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
  }

  .mobile-tabbar a.active {
    background: rgba(78, 232, 131, 0.18) !important;
    color: #4ee883 !important;
    font-weight: 700 !important;
  }

  .mobile-tabbar a.active .tab-glyph {
    filter: drop-shadow(0 0 6px rgba(78, 232, 131, 0.8)) !important;
  }

/* ==========================================================================
   Global Site-Wide Typography & Master Scroll Engine (DynaPuff Headings & Ubuntu Sentences)
   ========================================================================== */

/* Headings Typography (DynaPuff Font) */
h1, h2, h3, h4, h5, h6,
h1 *, h2 *, h3 *, h4 *, h5 *, h6 *,
html#kauzariyya-theme body h1,
html#kauzariyya-theme body h2,
html#kauzariyya-theme body h3,
html#kauzariyya-theme body h4,
html#kauzariyya-theme body h5,
html#kauzariyya-theme body h6,
html#kauzariyya-theme body .participant-title h1,
html#kauzariyya-theme body .students-page-hero h1,
html#kauzariyya-theme body .schedule-head h1,
html#kauzariyya-theme body .review-hero h1,
.hero-content h1,
.page-hero h1,
.schedule-head h1,
.musabaqa-plan-hero h1,
.section-heading h2,
.leaderboard-header h1,
.leader-identity-copy h2,
.signup-card h1,
.musabaqa-title,
.musabaqa-hero h1,
.students-hero h1,
.students-page-hero h1,
.participant-title h1,
.review-hero h1,
.review-copy h1,
.scoreboard-title,
.admin-title,
.home-event-highlights h3 {
  font-family: "Ubuntu", sans-serif !important;
  font-weight: 700 !important;
}

/* Sentences & Body Text (Ubuntu Font) */
body, p, span, a, li, b, strong, button, input, select, textarea, label, div, section, article {
  font-family: "Ubuntu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Master Site-Wide Window & Mouse Wheel Scroll Engine */
html,
html#kauzariyya-theme {
  scroll-behavior: smooth !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100vh !important;
  -webkit-overflow-scrolling: touch !important;
}

body,
html#kauzariyya-theme body,
body:not(.page-admin) {
  min-height: 100vh !important;
  height: auto !important;
  overflow: visible !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  touch-action: pan-y !important;
}

#react-root,
main,
body main,
body:not(.page-admin) main,
.page-shell,
.section-wrap,
.participant-shell,
.all-students-page,
.public-student-directory,
.schedule-grid,
.musabaqa-plan-shell,
.home-story,
.leaderboard-glass,
.review-shell {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  height: auto !important;
  max-height: none !important;
  min-height: auto !important;
}

/* Unbox header background containers & match giant Schedule hero heading layout */
body.page-schedule .schedule-head,
body.page-participants .participant-directory-page .participant-title,
body.page-participants .participant-title,
body.page-students .students-page-hero,
body.page-musabaqa .musabaqa-plan-hero,
html#kauzariyya-theme body .schedule-head,
html#kauzariyya-theme body .participant-title,
html#kauzariyya-theme body .students-page-hero,
html#kauzariyya-theme body .musabaqa-plan-hero,
.schedule-head,
.participant-title,
.students-page-hero,
.musabaqa-plan-hero {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 0 32px 0 !important;
  margin: 52px 0 28px 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 32px !important;
}

/* Giant Bold White Display Typography (Fredoka / Plus Jakarta Sans Display) */
body.page-schedule .schedule-head h1,
body.page-participants .participant-directory-page .participant-title h1,
body.page-participants .participant-title h1,
body.page-students .students-page-hero h1,
body.page-musabaqa .musabaqa-plan-hero h1,
html#kauzariyya-theme body .schedule-head h1,
html#kauzariyya-theme body .participant-title h1,
html#kauzariyya-theme body .students-page-hero h1,
html#kauzariyya-theme body .musabaqa-plan-hero h1,
.schedule-head h1,
.participant-title h1,
.students-page-hero h1,
.musabaqa-plan-hero h1 {
  font-family: 'Ubuntu', sans-serif !important;
  font-size: clamp(58px, 8.5vw, 98px) !important;
  font-weight: 700 !important;
  line-height: 0.84 !important;
  letter-spacing: -0.04em !important;
  color: #ffffff !important;
  margin: 4px 0 12px 0 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.65) !important;
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* High-Contrast Emerald Green Accent Text */
body.page-schedule .schedule-head h1 em,
body.page-participants .participant-directory-page .participant-title h1 em,
body.page-participants .participant-title h1 em,
body.page-students .students-page-hero h1 em,
body.page-musabaqa .musabaqa-plan-hero h1 em,
html#kauzariyya-theme body .schedule-head h1 em,
html#kauzariyya-theme body .participant-title h1 em,
html#kauzariyya-theme body .students-page-hero h1 em,
html#kauzariyya-theme body .musabaqa-plan-hero h1 em,
.schedule-head h1 em,
.participant-title h1 em,
.students-page-hero h1 em,
.musabaqa-plan-hero h1 em {
  color: #59df7b !important;
  font-style: normal !important;
  display: inline-block !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: 0 0 30px rgba(89, 223, 123, 0.4) !important;
  animation: none !important;
  transition: none !important;
  transform: none !important;
}

/* Disable reveal animations for Musabaqa Plan Header */
.musabaqa-plan-hero,
.musabaqa-plan-hero *,
.musabaqa-plan-hero h1,
.musabaqa-plan-hero h1 em {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Glowing Green Category Badge */
body.page-schedule .schedule-head .overline,
body.page-participants .participant-title .overline,
body.page-students .students-page-hero .overline,
html#kauzariyya-theme body .schedule-head .overline,
html#kauzariyya-theme body .participant-title .overline,
html#kauzariyya-theme body .students-page-hero .overline,
.schedule-head .overline,
.participant-title .overline,
.students-page-hero .overline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #59df7b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

/* Clean Unboxed Sub-text Description */
body.page-schedule .schedule-head p,
body.page-participants .participant-title p,
body.page-students .students-page-hero p,
html#kauzariyya-theme body .schedule-head p,
html#kauzariyya-theme body .participant-title p,
html#kauzariyya-theme body .students-page-hero p,
.schedule-head p,
.participant-title p,
.students-page-hero p {
  color: rgba(220, 235, 225, 0.75) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  max-width: 480px !important;
  margin: 0 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

/* Mobile & Tablet Responsiveness */
@media (max-width: 900px) {
  body.page-schedule .schedule-head,
  body.page-participants .participant-directory-page .participant-title,
  body.page-participants .participant-title,
  body.page-students .students-page-hero,
  html#kauzariyya-theme body .schedule-head,
  html#kauzariyya-theme body .participant-title,
  html#kauzariyya-theme body .students-page-hero,
  .schedule-head,
  .participant-title,
  .students-page-hero {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 18px !important;
    padding: 0 0 20px 0 !important;
    margin-bottom: 20px !important;
  }

  body.page-schedule .schedule-head h1,
  body.page-participants .participant-directory-page .participant-title h1,
  body.page-participants .participant-title h1,
  body.page-students .students-page-hero h1,
  html#kauzariyya-theme body .schedule-head h1,
  html#kauzariyya-theme body .participant-title h1,
  html#kauzariyya-theme body .students-page-hero h1,
  .schedule-head h1,
  .participant-title h1,
  .students-page-hero h1 {
    font-size: clamp(42px, 11vw, 64px) !important;
    line-height: 0.88 !important;
  }
}

/* ==========================================================================
   SIMPLE & MODERN STAGE LAYOUT (RUNNING ORDER & LIVE PARTICIPANT DESK)
   ========================================================================== */
html#kauzariyya-theme body .participant-stage-layout,
body.page-participants .participant-stage-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
}

/* Left Card: Live Stage Card */
html#kauzariyya-theme body.page-participants .speaker-card,
html#kauzariyya-theme body.page-participants .participant-live-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 28px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 24px !important;
  background: linear-gradient(160deg, rgba(8, 22, 14, 0.88), rgba(4, 12, 8, 0.94)) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

html#kauzariyya-theme body.page-participants .participant-live-card::before,
html#kauzariyya-theme body.page-participants .participant-live-card::after {
  display: none !important;
}

html#kauzariyya-theme body.page-participants .speaker-card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
}

html#kauzariyya-theme body.page-participants .live-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  border: 1px solid rgba(78, 232, 131, 0.3) !important;
  border-radius: 99px !important;
  background: rgba(78, 232, 131, 0.12) !important;
  color: #4ee883 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

html#kauzariyya-theme body.page-participants .live-label i {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #4ee883 !important;
  box-shadow: 0 0 10px #4ee883 !important;
}

html#kauzariyya-theme body.page-participants .stage-sequence {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}

html#kauzariyya-theme body.page-participants .participant-live-card > .speaker-card-main {
  margin: 16px 0 24px !important;
  padding: 0 !important;
}

html#kauzariyya-theme body.page-participants .speaker-card-main > p {
  margin: 0 0 8px 0 !important;
  color: #4ee883 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

html#kauzariyya-theme body.page-participants .speaker-card-main > h2 {
  margin: 0 0 16px 0 !important;
  color: #ffffff !important;
  font-size: clamp(34px, 4vw, 54px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.08 !important;
  text-transform: none !important;
}

html#kauzariyya-theme body.page-participants .speaker-identifiers {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 14px !important;
}

html#kauzariyya-theme body.page-participants .speaker-identifiers > span,
html#kauzariyya-theme body.page-participants .speaker-identifiers > b {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

html#kauzariyya-theme body.page-participants .speaker-identifiers > b[lang="ar"] {
  color: #4ee883 !important;
  font-size: 15px !important;
  border-color: rgba(78, 232, 131, 0.25) !important;
  background: rgba(78, 232, 131, 0.08) !important;
}

html#kauzariyya-theme body.page-participants .participant-live-card > .speaker-cue-board {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
  padding: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.025) !important;
}

html#kauzariyya-theme body.page-participants .speaker-cue-board > div {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 0 !important;
  background: transparent !important;
}

html#kauzariyya-theme body.page-participants .speaker-cue-board span {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

html#kauzariyya-theme body.page-participants .speaker-cue-board strong {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

html#kauzariyya-theme body.page-participants .participant-live-card > .up-next-cue {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-top: auto !important;
  padding: 14px 18px !important;
  border: 1px solid rgba(78, 232, 131, 0.2) !important;
  border-radius: 16px !important;
  background: rgba(78, 232, 131, 0.06) !important;
}

html#kauzariyya-theme body.page-participants .up-next-label {
  padding: 4px 10px !important;
  border-radius: 6px !important;
  background: rgba(78, 232, 131, 0.15) !important;
  color: #4ee883 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

html#kauzariyya-theme body.page-participants .up-next-cue > div strong {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

html#kauzariyya-theme body.page-participants .up-next-cue > div small {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 10px !important;
}

html#kauzariyya-theme body.page-participants .up-next-cue > time {
  color: #4ee883 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

/* Right Panel: Clean Roster List */
html#kauzariyya-theme body.page-participants .participant-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 26px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 24px !important;
  background: linear-gradient(160deg, rgba(8, 22, 14, 0.88), rgba(4, 12, 8, 0.94)) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

html#kauzariyya-theme body.page-participants .participant-list::before {
  display: none !important;
}

html#kauzariyya-theme body.page-participants .participant-list-head {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin-bottom: 4px !important;
}

html#kauzariyya-theme body.page-participants .participant-list-head .overline {
  color: #4ee883 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

html#kauzariyya-theme body.page-participants .participant-list-head h2 {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

html#kauzariyya-theme body.page-participants .participant-list-head > strong {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  color: #4ee883 !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

html#kauzariyya-theme body.page-participants .participant-list-head > strong small {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* Legacy participant roster controls overridden by master control panel at end of file */

html#kauzariyya-theme body.page-participants .participant-search button {
  width: 44px !important;
  height: 100% !important;
  background: rgba(78, 232, 131, 0.14) !important;
  color: #4ee883 !important;
  border: none !important;
}

html#kauzariyya-theme body.page-participants .participant-program-filter select {
  height: 46px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(78, 232, 131, 0.22) !important;
  border-radius: 12px !important;
  background: rgba(6, 18, 11, 0.92) !important;
  color: #ffffff !important;
  font-size: 13px !important;
}

html#kauzariyya-theme body.page-participants .participant-results-scroll {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  max-height: 520px !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(78, 232, 131, 0.3) transparent !important;
}

/* Individual Participant Rows */
html#kauzariyya-theme body.page-participants .participant-row {
  min-height: 64px !important;
  display: grid !important;
  grid-template-columns: 42px 1fr auto !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 12px 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  transition: all 0.2s ease !important;
}

html#kauzariyya-theme body.page-participants .participant-row:hover {
  border-color: rgba(78, 232, 131, 0.3) !important;
  background: rgba(78, 232, 131, 0.05) !important;
}

html#kauzariyya-theme body.page-participants .participant-row.is-live {
  border-left: 4px solid #4ee883 !important;
  border-color: rgba(78, 232, 131, 0.35) !important;
  background: rgba(78, 232, 131, 0.08) !important;
}

html#kauzariyya-theme body.page-participants .participant-row.is-next {
  border-left: 4px solid #8fe312 !important;
  border-color: rgba(143, 227, 18, 0.3) !important;
  background: rgba(143, 227, 18, 0.05) !important;
}

html#kauzariyya-theme body.page-participants .participant-order {
  width: 36px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

html#kauzariyya-theme body.page-participants .participant-row.is-live .participant-order {
  background: rgba(78, 232, 131, 0.18) !important;
  border-color: rgba(78, 232, 131, 0.4) !important;
  color: #4ee883 !important;
}

html#kauzariyya-theme body.page-participants .participant-row.is-next .participant-order {
  background: rgba(143, 227, 18, 0.18) !important;
  border-color: rgba(143, 227, 18, 0.4) !important;
  color: #8fe312 !important;
}

html#kauzariyya-theme body.page-participants .participant-person > strong {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

html#kauzariyya-theme body.page-participants .participant-person > small {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

html#kauzariyya-theme body.page-participants .participant-call {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 2px !important;
}

html#kauzariyya-theme body.page-participants .participant-call > time {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

html#kauzariyya-theme body.page-participants .participant-row.is-live .participant-call > time,
html#kauzariyya-theme body.page-participants .participant-row.is-live .participant-call > small {
  color: #4ee883 !important;
  font-weight: 800 !important;
}

html#kauzariyya-theme body.page-participants .participant-row.is-next .participant-call > time,
html#kauzariyya-theme body.page-participants .participant-row.is-next .participant-call > small {
  color: #8fe312 !important;
  font-weight: 800 !important;
}

html#kauzariyya-theme body.page-participants .participant-call > small {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

@media (max-width: 900px) {
  html#kauzariyya-theme body .participant-stage-layout,
  body.page-participants .participant-stage-layout {
    grid-template-columns: 1fr !important;
  }
}

/* Universal Mandatory Override for Special Elite Font Across Entire Application */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button, input, select, textarea {
  font-family: 'Ubuntu', sans-serif !important;
}

[lang="ar"], [dir="rtl"], .bismillah-mark, .arabic-team-name, .team-row-name {
  font-family: 'Noto Naskh Arabic', 'Amiri', 'Traditional Arabic', serif !important;
}

/* ==========================================================================
   Full Admin Customization Setup - Team Colors, Identity & Theme Control
   ========================================================================== */

body.page-admin .team-preset-palette-bar {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: radial-gradient(circle at 0% 0%, rgba(143, 227, 18, 0.08), transparent 50%), rgba(8, 18, 12, 0.85);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.team-preset-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.team-preset-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: 6px;
}

.team-preset-title i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8fe312;
  box-shadow: 0 0 10px #8fe312;
}

.preset-chip-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}

.preset-chip-button:hover {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.preset-dots {
  display: flex;
  gap: 3px;
}

.preset-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: block;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}

.team-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.team-color-chips-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 4px;
}

.color-swatch-chip {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.color-swatch-chip:hover {
  transform: scale(1.2);
  border-color: #fff;
}

.color-swatch-chip.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--team, #8fe312), 0 0 10px var(--team, #8fe312);
}

.team-live-mockup {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--team, #8fe312) 30%, rgba(255, 255, 255, 0.1));
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--team, #8fe312) 18%, rgba(10, 20, 14, 0.95)), rgba(5, 10, 7, 0.95));
  box-shadow: inset 0 0 20px color-mix(in srgb, var(--team, #8fe312) 10%, transparent);
}

.team-live-mockup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.mockup-badge {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--team, #8fe312);
  background: color-mix(in srgb, var(--team, #8fe312) 20%, transparent);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--team, #8fe312) 40%, transparent);
}

.mockup-team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mockup-team-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mockup-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--team, #8fe312);
  box-shadow: 0 0 12px var(--team, #8fe312);
}

.mockup-name {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
}

.mockup-score {
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  padding: 4px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.team-score-quick-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.team-score-quick-row button {
  flex: 1;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.team-score-quick-row button:hover {
  background: color-mix(in srgb, var(--team, #8fe312) 30%, rgba(255, 255, 255, 0.15));
  border-color: var(--team, #8fe312);
}

.admin-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
}

.admin-modal-card {
  width: min(520px, 100%);
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(12, 24, 18, 0.96), rgba(6, 14, 10, 0.98));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.admin-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.admin-modal-header h2 {
  margin: 0;
  color: #fff;
  font-size: 22px;
}

.admin-modal-close {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

.admin-modal-form {
  display: grid;
  gap: 16px;
}

.notice-banner-preview {
  margin-top: 10px;
  padding: 12px 18px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.notice-banner-preview.tone-info {
  background: rgba(56, 156, 245, 0.15);
  border: 1px solid rgba(56, 156, 245, 0.35);
  color: #70baff;
}

.notice-banner-preview.tone-warning {
  background: rgba(255, 213, 0, 0.15);
  border: 1px solid rgba(255, 213, 0, 0.35);
  color: #ffe45e;
}

.notice-banner-preview.tone-success {
  background: rgba(143, 227, 18, 0.15);
  border: 1px solid rgba(143, 227, 18, 0.35);
  color: #a6f238;
}

}

/* ========================================================================
   Kauzariyya Admin OS · unified professional control room
   This final layer intentionally owns the complete admin shell.
   ======================================================================== */
html:has(body.page-admin) {
  background: #07100a !important;
  scroll-padding-top: 108px;
}

body.page-admin {
  --admin-accent: var(--site-accent, #008c4a);
  --admin-accent-bright: color-mix(in srgb, var(--admin-accent) 70%, #8ef0a7);
  --admin-bg: #07100a;
  --admin-sidebar-bg: #07170d;
  --admin-panel: #0d1b12;
  --admin-panel-raised: #112219;
  --admin-panel-soft: #0a160f;
  --admin-line: rgba(220, 245, 226, .11);
  --admin-line-strong: rgba(121, 225, 146, .28);
  --admin-text: #f4f8f5;
  --admin-copy: #aebbb1;
  --admin-dim: #708077;
  min-height: 100svh;
  background:
    radial-gradient(circle at 88% 3%, color-mix(in srgb, var(--admin-accent) 16%, transparent), transparent 27rem),
    linear-gradient(180deg, #09130d 0, var(--admin-bg) 38rem) !important;
  color: var(--admin-text);
}

body.page-admin::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 42%, #000);
  mask-image: linear-gradient(90deg, transparent, #000 42%, #000);
  opacity: .45;
  pointer-events: none;
}

body.page-admin > .site-header,
body.page-admin .mobile-tabbar,
body.page-admin > .site-footer,
body.page-admin .motion-aurora { display: none !important; }

body.page-admin main {
  width: 100% !important;
  max-width: none !important;
  min-height: 100svh;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

body.page-admin #react-root { min-height: 100svh; }

body.page-admin .admin-control-shell {
  width: 100% !important;
  max-width: none !important;
  min-height: 100svh;
  display: grid !important;
  grid-template-columns: 252px minmax(0, 1fr) !important;
  gap: 0 !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.page-admin .admin-sidebar {
  position: sticky !important;
  top: 0 !important;
  z-index: 320;
  width: 252px !important;
  height: 100svh !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column;
  padding: 20px 14px 14px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-right: 1px solid var(--admin-line) !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 16% 0, color-mix(in srgb, var(--admin-accent) 18%, transparent), transparent 19rem),
    var(--admin-sidebar-bg) !important;
  box-shadow: 18px 0 55px rgba(0, 0, 0, .18) !important;
  backdrop-filter: none !important;
}

body.page-admin .admin-sidebar::before { display: none !important; }

body.page-admin .admin-side-brand {
  min-height: 66px;
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 3px 13px !important;
  padding: 0 5px 18px !important;
  border-bottom: 1px solid var(--admin-line) !important;
}

body.page-admin .admin-side-brand img {
  width: 42px !important;
  height: 42px !important;
  padding: 6px;
  border-radius: 12px !important;
  background: #f2faf4;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--admin-accent) 23%, transparent) !important;
}

body.page-admin .admin-side-brand strong {
  color: #fff;
  font-size: 14px !important;
  font-weight: 750 !important;
  letter-spacing: -.01em;
}

body.page-admin .admin-side-brand small {
  margin-top: 4px !important;
  color: var(--admin-accent-bright) !important;
  font-size: 6px !important;
  font-weight: 800;
  letter-spacing: .15em;
}

body.page-admin .admin-sidebar nav {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0;
  flex: 1;
  display: block !important;
  margin: 0 !important;
  padding: 0 4px 12px 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: color-mix(in srgb, var(--admin-accent) 36%, transparent) transparent !important;
}

body.page-admin .admin-nav-label {
  margin: 17px 11px 6px !important;
  padding: 0 !important;
  color: var(--admin-dim) !important;
  font-size: 7px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
}

body.page-admin .admin-nav-label:first-child { margin-top: 3px !important; }

body.page-admin .admin-sidebar nav button {
  width: 100% !important;
  min-height: 42px !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0,1fr) auto !important;
  gap: 8px !important;
  align-items: center;
  margin: 2px 0 !important;
  padding: 0 10px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #96a59b !important;
  box-shadow: none !important;
  text-align: left;
  transform: none !important;
}

body.page-admin .admin-sidebar nav button:hover {
  border-color: rgba(255,255,255,.055) !important;
  background: rgba(255,255,255,.035) !important;
  color: #e7eee9 !important;
}

body.page-admin .admin-sidebar nav button.active {
  border-color: color-mix(in srgb, var(--admin-accent) 38%, transparent) !important;
  background: color-mix(in srgb, var(--admin-accent) 16%, transparent) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 var(--admin-accent-bright) !important;
}

body.page-admin .admin-sidebar nav button::after { display: none !important; }
body.page-admin .admin-sidebar nav button > b {
  color: var(--admin-accent-bright) !important;
  font-size: 13px !important;
  font-weight: 500;
  text-align: center;
}
body.page-admin .admin-sidebar nav button > span { font-size: 10px !important; font-weight: 650 !important; }
body.page-admin .admin-sidebar nav button > small {
  min-width: 23px !important;
  padding: 3px 6px !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.045) !important;
  color: #9aaba0 !important;
  font-size: 7px !important;
}

body.page-admin .admin-identity {
  min-height: 58px !important;
  display: flex;
  gap: 10px;
  align-items: center;
  margin: auto 0 0 !important;
  padding: 10px !important;
  border: 1px solid var(--admin-line) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.025) !important;
}

body.page-admin .admin-identity > span {
  width: 34px !important;
  height: 34px !important;
  border: 1px solid color-mix(in srgb, var(--admin-accent) 40%, transparent) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--admin-accent) 14%, transparent) !important;
  color: var(--admin-accent-bright) !important;
  font-size: 9px !important;
}
body.page-admin .admin-identity strong { font-size: 10px !important; }
body.page-admin .admin-identity small { color: var(--admin-dim) !important; font-size: 7px !important; }
body.page-admin .admin-home-link {
  margin: 6px 0 0 !important;
  padding: 9px !important;
  color: var(--admin-dim) !important;
  font-size: 8px !important;
}
body.page-admin .admin-home-link:hover { color: var(--admin-accent-bright) !important; }

body.page-admin .admin-workspace {
  width: 100% !important;
  min-width: 0;
  padding: 24px clamp(20px, 2.7vw, 42px) 56px !important;
}

body.page-admin .admin-workspace-head {
  position: sticky !important;
  top: 14px !important;
  z-index: 250;
  min-height: 82px !important;
  display: grid !important;
  grid-template-columns: minmax(280px, 1fr) auto !important;
  gap: 18px !important;
  align-items: center !important;
  margin: 0 0 20px !important;
  padding: 13px 14px 13px 20px !important;
  border: 1px solid var(--admin-line) !important;
  border-radius: 15px !important;
  background: rgba(9, 22, 14, .94) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.27), inset 0 1px 0 rgba(255,255,255,.035) !important;
  backdrop-filter: blur(20px) !important;
}

body.page-admin .admin-workspace-head::before { display: none !important; }
body.page-admin .admin-head-copy { min-width: 0; }
body.page-admin .admin-workspace-head .overline {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 6px !important;
  color: var(--admin-copy) !important;
  font-size: 7px !important;
  letter-spacing: .12em !important;
}
body.page-admin .admin-head-breadcrumb { color: var(--admin-accent-bright) !important; }
body.page-admin .admin-workspace-head h1 {
  margin: 0 !important;
  color: var(--admin-text) !important;
  font-size: clamp(25px, 2.6vw, 36px) !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
body.page-admin .admin-head-copy > p:last-child {
  margin: 6px 0 0 !important;
  overflow: hidden;
  color: var(--admin-dim) !important;
  font-size: 8px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.page-admin .admin-head-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 7px !important;
  align-items: center;
  justify-content: flex-end;
}

body.page-admin :is(.admin-search-trigger,.admin-refresh-trigger,.admin-notification-trigger,.admin-preview-link,.admin-lock-button,.admin-global-save) {
  min-height: 38px !important;
  height: 38px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 11px !important;
  border: 1px solid var(--admin-line) !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,.035) !important;
  color: #b4c0b7 !important;
  box-shadow: none !important;
  font-size: 8px !important;
  font-weight: 750 !important;
  text-decoration: none;
  cursor: pointer;
}

body.page-admin :is(.admin-search-trigger,.admin-refresh-trigger,.admin-notification-trigger,.admin-preview-link,.admin-lock-button):hover {
  border-color: var(--admin-line-strong) !important;
  background: rgba(255,255,255,.065) !important;
  color: #fff !important;
}

body.page-admin .admin-refresh-trigger,
body.page-admin .admin-notification-trigger,
body.page-admin .admin-lock-button {
  width: 38px;
  padding: 0 !important;
  font-size: 13px !important;
}

body.page-admin .admin-lock-button { width: auto; padding-inline: 11px !important; font-size: 8px !important; }
body.page-admin .admin-global-save {
  min-width: 116px;
  border-color: color-mix(in srgb, var(--admin-accent) 70%, #b6f1c4) !important;
  background: var(--admin-accent) !important;
  color: #fff !important;
  box-shadow: 0 10px 25px color-mix(in srgb, var(--admin-accent) 24%, transparent) !important;
}
body.page-admin .admin-global-save:hover { filter: brightness(1.1); }
body.page-admin .admin-global-save.saved {
  border-color: rgba(255,255,255,.1) !important;
  background: rgba(255,255,255,.05) !important;
  color: #8fb69a !important;
  box-shadow: none !important;
}
body.page-admin .admin-global-save kbd,
body.page-admin .admin-search-trigger kbd {
  padding: 3px 5px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 5px;
  background: rgba(0,0,0,.15);
  color: rgba(255,255,255,.56);
  font-size: 6px !important;
}
body.page-admin .admin-mobile-menu { display: none; }
body.page-admin .admin-sidebar-backdrop { display: none; }

body.page-admin .admin-toast {
  top: 18px !important;
  z-index: 2600 !important;
  padding: 11px 15px !important;
  border: 1px solid var(--admin-line-strong) !important;
  border-radius: 10px !important;
  background: #12301d !important;
  color: #eaffef !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.4) !important;
  font-size: 9px !important;
}
body.page-admin .admin-toast.error { border-color: rgba(255,112,112,.3) !important; background: #351313 !important; }

body.page-admin .admin-saving-overlay { z-index: 3000 !important; background: rgba(3,9,5,.68) !important; backdrop-filter: blur(8px); }
body.page-admin .admin-saving-dialog {
  border-color: var(--admin-line-strong) !important;
  border-radius: 15px !important;
  background: #0c1d12 !important;
}

body.page-admin :is(
  .admin-command-bar,.admin-event-hero,.overview-metric,.admin-championship-control,
  .admin-focus-card,.admin-live-standings,.admin-program-pulse,.admin-event-flow,
  .admin-operations-card,.admin-readiness-card,.quick-actions,.score-management-hero,
  .score-editor,.score-history-panel,.judging-command-hero,.judging-setup-card,
  .judge-score-desk,.judge-score-form,.judge-live-ranking,.judge-score-ledger,
  .result-publish-form,.result-summary-stack article,.result-published-list,
  .team-preset-palette-bar,.team-manager-toolbar,.team-control-card,
  .program-form,.program-admin-list,.college-student-form,.college-student-directory,
  .review-admin-summary,.review-admin-card,.visitor-log-card,.admin-report-kpis article,
  .admin-report-card,.admin-export-center,.settings-card
) {
  border-color: var(--admin-line) !important;
  border-radius: 15px !important;
  background-color: var(--admin-panel) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.page-admin :is(
  .overview-metric,.team-control-card,.score-editor,.review-admin-card,.visitor-log-card,
  .admin-report-kpis article,.admin-report-card,.settings-card
):hover { border-color: var(--admin-line-strong) !important; transform: none !important; }

body.page-admin .admin-overview { gap: 15px !important; }
body.page-admin .admin-command-bar {
  overflow: hidden;
  border: 1px solid var(--admin-line) !important;
  background: var(--admin-panel-soft) !important;
}
body.page-admin .admin-command-bar > * { border-color: var(--admin-line) !important; }
body.page-admin .admin-command-bar > button { background: color-mix(in srgb, var(--admin-accent) 78%, #062011) !important; }

body.page-admin .admin-event-hero {
  min-height: 210px !important;
  padding: clamp(24px, 3vw, 36px) !important;
  background:
    radial-gradient(circle at 90% 16%, color-mix(in srgb, var(--admin-accent) 22%, transparent), transparent 18rem),
    linear-gradient(120deg, #10271a, var(--admin-panel)) !important;
}
body.page-admin .admin-event-hero h2 { max-width: 20ch; font-size: clamp(31px, 4vw, 50px) !important; letter-spacing: -.04em !important; }
body.page-admin .admin-event-actions button:first-child { background: var(--admin-accent) !important; }

body.page-admin .overview-metrics { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 10px !important; }
body.page-admin .overview-metric { min-height: 114px !important; padding: 16px !important; }
body.page-admin .overview-metric > span { border-radius: 10px !important; }
body.page-admin .overview-metric > i { color: var(--admin-dim) !important; }

body.page-admin .quick-actions > div:last-child { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }

body.page-admin :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea) {
  border-color: var(--admin-line) !important;
  border-radius: 9px !important;
  background: #08140d !important;
  color: #f3f7f4 !important;
  box-shadow: none !important;
}
body.page-admin :is(input,select,textarea):focus {
  border-color: color-mix(in srgb, var(--admin-accent) 70%, #a8edb9) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-accent) 16%, transparent) !important;
}
body.page-admin select option { background: #0b1910; color: #fff; }

body.page-admin .team-manager-workspace { display: grid; gap: 15px; padding-bottom: 30px; }
body.page-admin .team-preset-palette-bar {
  display: flex !important;
  gap: 12px !important;
  padding: 13px 15px !important;
  background: var(--admin-panel-soft) !important;
}
body.page-admin .team-preset-group { gap: 7px; }
body.page-admin .team-preset-title { color: var(--admin-copy) !important; font-size: 8px !important; }
body.page-admin .team-preset-title i { background: var(--admin-accent-bright) !important; box-shadow: none !important; }
body.page-admin .preset-chip-button {
  min-height: 34px;
  padding: 0 10px !important;
  border-color: var(--admin-line) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.025) !important;
  font-size: 8px !important;
}
body.page-admin .preset-chip-button:hover { border-color: var(--admin-line-strong) !important; transform: none !important; }
body.page-admin .team-toolbar-actions .button { min-height: 36px !important; border-radius: 8px !important; font-size: 8px !important; }

body.page-admin .team-manager-toolbar {
  min-height: 112px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 20px 22px !important;
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--admin-accent) 12%, transparent), transparent 42%),
    var(--admin-panel) !important;
}
body.page-admin .team-manager-toolbar h2 { margin: 4px 0 7px !important; font-size: clamp(24px,3vw,35px) !important; }
body.page-admin .team-manager-toolbar p:last-child { max-width: 680px; margin: 0; color: var(--admin-copy) !important; font-size: 9px !important; }
body.page-admin .team-manager-toolbar > label { width: min(230px,100%); }

body.page-admin .team-manager-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 13px !important; }
body.page-admin .team-control-card {
  gap: 12px !important;
  padding: 19px !important;
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--team) 9%, transparent), transparent 38%),
    var(--admin-panel) !important;
}
body.page-admin .team-control-card::before { height: 2px !important; }
body.page-admin .team-control-card > header { min-height: 52px; }
body.page-admin .team-control-card > header h2 { font-size: 22px !important; }
body.page-admin .team-control-card > header > strong { font-size: 27px !important; }
body.page-admin .team-image-controls {
  grid-column: 1 / -1;
  min-height: 60px;
  border-color: var(--admin-line) !important;
  border-radius: 10px !important;
  background: rgba(0,0,0,.12) !important;
}
body.page-admin .team-control-stats { border-color: var(--admin-line) !important; }
body.page-admin .team-control-card input { height: 43px !important; }
body.page-admin .team-color-chips-row { gap: 6px !important; overflow-x: auto; padding-bottom: 3px; }
body.page-admin .color-swatch-chip { width: 20px !important; height: 20px !important; flex: 0 0 20px; }
body.page-admin .team-live-mockup {
  margin-top: 1px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
body.page-admin .team-score-quick-row button { height: 30px !important; border-radius: 7px !important; }
body.page-admin .team-score-quick-row button {
  border: 1px solid var(--admin-line) !important;
  background: rgba(255,255,255,.04) !important;
  color: #dce6df !important;
  box-shadow: none !important;
}
body.page-admin .team-score-quick-row button:hover {
  border-color: color-mix(in srgb, var(--team) 55%, transparent) !important;
  background: color-mix(in srgb, var(--team) 14%, transparent) !important;
}
body.page-admin .team-live-mockup {
  min-height: 68px;
  border: 1px solid color-mix(in srgb, var(--team) 26%, var(--admin-line)) !important;
  background: color-mix(in srgb, var(--team) 7%, #09150e) !important;
}
body.page-admin .team-live-mockup-header { display: flex !important; margin-bottom: 9px !important; }
body.page-admin .team-live-mockup-header > span:last-child { color: var(--admin-dim) !important; font-size: 7px !important; }
body.page-admin .mockup-badge { padding: 3px 7px !important; font-size: 7px !important; }
body.page-admin .mockup-team-row { display: flex !important; }
body.page-admin .team-control-card .button.danger {
  border-color: rgba(255,107,107,.2) !important;
  background: rgba(255,80,80,.07) !important;
  color: #ffaaaa !important;
}

body.page-admin .settings-workspace { gap: 14px !important; }
body.page-admin .settings-card { padding: 21px !important; }
body.page-admin .settings-savebar {
  bottom: 14px !important;
  border-color: var(--admin-line-strong) !important;
  border-radius: 13px !important;
  background: rgba(11, 28, 17, .94) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.35) !important;
}

body.page-admin .admin-report-kpis { gap: 9px !important; }
body.page-admin .admin-report-grid { gap: 12px !important; }
body.page-admin .visitor-logs-grid { gap: 10px !important; }
body.page-admin .visitor-log-card { padding: 13px !important; }

body.page-admin .admin-login-shell {
  min-height: 100svh;
  padding: 22px !important;
}
body.page-admin .admin-login-card {
  width: min(440px, 100%);
  padding: 34px !important;
  border: 1px solid var(--admin-line) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 82% 0, color-mix(in srgb, var(--admin-accent) 18%, transparent), transparent 16rem),
    var(--admin-panel) !important;
  box-shadow: 0 32px 90px rgba(0,0,0,.35) !important;
}
body.page-admin .admin-login-card img { width: 74px !important; }
body.page-admin .admin-login-card h1 { font-size: clamp(34px,7vw,49px) !important; letter-spacing: -.045em !important; }
body.page-admin .admin-login-form input { height: 50px !important; }

body.page-admin .site-announcement.tone-success { border-color: rgba(83,210,117,.3); }
body.page-admin .site-announcement.tone-warning { border-color: rgba(255,190,75,.3); }

body:not(.page-admin) .site-announcement.tone-success {
  border-color: color-mix(in srgb, var(--site-accent, #008c4a) 50%, transparent);
  background: color-mix(in srgb, var(--site-accent, #008c4a) 24%, #07140c);
}
body:not(.page-admin) .site-announcement.tone-success > i {
  background: var(--site-accent, #008c4a);
  color: #fff;
}
body:not(.page-admin) .site-announcement.tone-warning {
  border-color: rgba(255,185,63,.42);
  background: rgba(48,31,8,.94);
}
body:not(.page-admin) .site-announcement.tone-warning > i {
  background: #ffb93f;
  color: #241501;
}

@media(max-width: 1280px) {
  body.page-admin .admin-control-shell { grid-template-columns: 218px minmax(0,1fr) !important; }
  body.page-admin .admin-sidebar {
    width: 218px !important;
    padding-inline: 11px !important;
    background: var(--admin-panel) !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3) !important;
  }
  body.page-admin .admin-head-copy > p:last-child { display: none; }
}

/* ========================================================================
   Kauzariyya Modern Redesign System & Clean Animations
   ======================================================================== */

/* 1. Scoreboard (Team Standings) Glass Container & Ranking Cards */
.scoreboard-container-box,
body .scoreboard-container-box {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px solid rgba(78, 232, 131, 0.28) !important;
  border-radius: 28px !important;
  background: linear-gradient(150deg, rgba(3, 24, 13, 0.94) 0%, rgba(2, 14, 8, 0.98) 100%) !important;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(78, 232, 131, 0.18) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  padding: clamp(24px, 4vw, 44px) !important;
  margin-top: 24px !important;
}

.scoreboard-leader-card,
body .scoreboard-leader-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  border: 1px solid color-mix(in srgb, var(--team, #56e47a) 40%, rgba(255, 255, 255, 0.15)) !important;
  background: linear-gradient(135deg, 
    color-mix(in srgb, var(--team, #144d28) 75%, #05140b) 0%, 
    color-mix(in srgb, var(--team, #0b2d17) 45%, #020a05) 60%, 
    #020804 100%
  ) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 30px color-mix(in srgb, var(--team, #56e47a) 25%, transparent) !important;
  padding: 32px !important;
}

.scoreboard-team-row,
body .scoreboard-team-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 22px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, 
    color-mix(in srgb, var(--team, #56e47a) 16%, rgba(5, 20, 11, 0.92)) 0%, 
    rgba(3, 11, 7, 0.96) 100%
  ) !important;
  border: 1px solid color-mix(in srgb, var(--team, #56e47a) 35%, rgba(255, 255, 255, 0.1)) !important;
  border-left: 5px solid var(--team, #56e47a) !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.scoreboard-team-row:hover,
body .scoreboard-team-row:hover {
  transform: translateY(-3px) scale(1.01) !important;
  border-color: color-mix(in srgb, var(--team, #56e47a) 60%, rgba(255, 255, 255, 0.3)) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 20px color-mix(in srgb, var(--team, #56e47a) 20%, transparent) !important;
}

/* 2. Participants Page Stage Desk & Running Order Box Redesign */
.participant-stage-layout,
body.page-participants .participant-stage-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr) !important;
  gap: 24px !important;
  align-items: start !important;
  margin-top: 28px !important;
}

body.page-participants .participant-live-card,
body.page-participants .speaker-card {
  position: relative !important;
  padding: 32px !important;
  border: 1px solid rgba(78, 232, 131, 0.3) !important;
  border-radius: 26px !important;
  background: linear-gradient(150deg, rgba(6, 24, 15, 0.92) 0%, rgba(2, 10, 5, 0.98) 100%) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45), 0 0 30px rgba(78, 232, 131, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  animation: spotlightGlowPulse 6s ease-in-out infinite alternate;
}

@keyframes spotlightGlowPulse {
  0% {
    border-color: rgba(78, 232, 131, 0.28);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45), 0 0 20px rgba(78, 232, 131, 0.12);
  }
  100% {
    border-color: rgba(78, 232, 131, 0.5);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55), 0 0 38px rgba(78, 232, 131, 0.25);
  }
}

body.page-participants .speaker-card-head.spotlight-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 22px !important;
}

body.page-participants .spotlight-head .live-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(78, 232, 131, 0.4) !important;
  background: rgba(78, 232, 131, 0.14) !important;
  color: #4ee883 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

body.page-participants .spotlight-head .live-label i {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #4ee883 !important;
  box-shadow: 0 0 12px #4ee883 !important;
  animation: neonDotGlow 1.8s ease-in-out infinite !important;
}

body.page-participants .spotlight-clock {
  padding: 6px 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(0, 0, 0, 0.45) !important;
  color: #ffffff !important;
  font-family: "Ubuntu Mono", "SFMono-Regular", monospace !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
}

body.page-participants .speaker-card-main.spotlight-hero h2 {
  font-family: 'Ubuntu', sans-serif !important;
  font-size: clamp(34px, 4.5vw, 56px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  color: #ffffff !important;
  margin: 10px 0 16px !important;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

body.page-participants .speaker-identifiers.spotlight-tags {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-bottom: 24px !important;
}

body.page-participants .spotlight-tags span {
  padding: 6px 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
}

body.page-participants .spotlight-tags b.team-name-ar {
  padding: 6px 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(78, 232, 131, 0.35) !important;
  background: rgba(78, 232, 131, 0.14) !important;
  color: #4ee883 !important;
  font-family: "Noto Naskh Arabic", serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body.page-participants .speaker-cue-board.spotlight-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 24px !important;
}

body.page-participants .spotlight-stat {
  padding: 14px 16px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(0, 0, 0, 0.35) !important;
}

body.page-participants .spotlight-stat span {
  display: block !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

body.page-participants .spotlight-stat strong {
  display: block !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

body.page-participants .up-next-cue.spotlight-up-next {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 16px 20px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  background: linear-gradient(135deg, rgba(34, 24, 6, 0.88), rgba(16, 10, 2, 0.95)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

body.page-participants .participant-list {
  position: relative !important;
  padding: 28px !important;
  border: 1px solid rgba(78, 232, 131, 0.3) !important;
  border-radius: 26px !important;
  background: linear-gradient(150deg, rgba(6, 24, 15, 0.92) 0%, rgba(2, 10, 5, 0.98) 100%) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45), 0 0 30px rgba(78, 232, 131, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

body.page-participants .participant-row {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 14px 18px !important;
  margin-bottom: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.page-participants .participant-row:hover {
  transform: translateX(4px) !important;
  border-color: rgba(78, 232, 131, 0.3) !important;
  background: rgba(78, 232, 131, 0.06) !important;
}

body.page-participants .participant-row.is-live {
  border-left: 5px solid #4ee883 !important;
  border-color: rgba(78, 232, 131, 0.4) !important;
  background: linear-gradient(90deg, rgba(78, 232, 131, 0.14), rgba(78, 232, 131, 0.04)) !important;
  box-shadow: 0 4px 18px rgba(78, 232, 131, 0.15) !important;
}

body.page-participants .participant-row.is-next {
  border-left: 5px solid #f59e0b !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.14), rgba(245, 158, 11, 0.04)) !important;
}

/* 3. Hide Google Map from Review Page */
body.page-review .footer-location-map,
body.page-review .home-footer-location {
  display: none !important;
}

body.page-admin .judging-inline-form:hover,
body.page-admin .judge-score-form:hover,
body.page-admin .result-publish-form:hover,
body.page-admin .team-control-card:hover {
  border-color: var(--admin-line-strong) !important;
}

body.page-admin input,
body.page-admin select,
body.page-admin textarea {
  border: 1px solid var(--admin-line) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--admin-text) !important;
}

body.page-admin input:focus,
body.page-admin select:focus,
body.page-admin textarea:focus {
  border-color: var(--admin-accent) !important;
  box-shadow: 0 0 0 3px rgba(89, 223, 123, 0.18) !important;
}

body.page-admin .button.primary,
body.page-admin button[type="submit"] {
  background: linear-gradient(135deg, #1b8a47, #59df7b) !important;
  color: #040906 !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 20px rgba(89, 223, 123, 0.25) !important;
  transition: all 0.2s ease !important;
}

body.page-admin .button.primary:hover,
body.page-admin button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 25px rgba(89, 223, 123, 0.35) !important;
}

@media(max-width: 759px) {
  body.page-admin .admin-control-shell { display: block !important; }
  body.page-admin .admin-sidebar {
    width: 100% !important;
    height: auto !important;
    position: relative !important;
    top: 0 !important;
    margin-bottom: 16px !important;
  }
}

@media(max-width: 980px) {
  body.page-admin .admin-control-shell { display: block !important; }
  body.page-admin .admin-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 1500 !important;
    width: min(286px, 86vw) !important;
    height: 100svh !important;
    padding: 18px 13px 13px !important;
    border-right-color: var(--admin-line-strong) !important;
    box-shadow: 25px 0 80px rgba(0,0,0,.48) !important;
    transform: translateX(-104%) !important;
    transition: transform .28s cubic-bezier(.2,.8,.2,1) !important;
  }
  body.page-admin .admin-sidebar.mobile-open { transform: translateX(0) !important; }
  body.page-admin .admin-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: block;
    border: 0;
    background: rgba(2,8,4,.68);
    backdrop-filter: blur(5px);
  }
  body.page-admin .admin-workspace { padding: 14px 14px 44px !important; }
  body.page-admin .admin-workspace-head {
    top: 8px !important;
    grid-template-columns: 38px minmax(0,1fr) !important;
    gap: 12px !important;
    padding-left: 12px !important;
  }
  body.page-admin .admin-mobile-menu {
    width: 38px;
    height: 38px;
    display: grid;
    place-content: center;
    gap: 4px;
    padding: 0;
    border: 1px solid var(--admin-line);
    border-radius: 9px;
    background: rgba(255,255,255,.035);
  }
  body.page-admin .admin-mobile-menu span { width: 15px; height: 1px; display: block; background: #d9e6dd; }
  body.page-admin .admin-head-actions { grid-column: 1 / -1; justify-content: flex-start; }
  body.page-admin .admin-search-trigger { margin-left: auto; }
  body.page-admin .overview-metrics { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  body.page-admin .team-manager-grid { grid-template-columns: 1fr !important; }
  body.page-admin .team-preset-palette-bar { align-items: flex-start !important; flex-direction: column !important; }
  body.page-admin .team-toolbar-actions { width: 100%; }
  body.page-admin .team-manager-toolbar { align-items: flex-start; flex-direction: column; }
  body.page-admin .team-manager-toolbar > label { width: 100%; }
}

@media(max-width: 640px) {
  body.page-admin { overflow-x: hidden !important; }
  body.page-admin .admin-workspace { padding: 8px 8px 36px !important; }
  body.page-admin .admin-workspace-head {
    min-height: 0 !important;
    margin-bottom: 10px !important;
    padding: 10px !important;
    border-radius: 12px !important;
  }
  body.page-admin .admin-workspace-head h1 { font-size: 23px !important; }
  body.page-admin .admin-workspace-head .overline { font-size: 6px !important; }
  body.page-admin .admin-head-actions { gap: 5px !important; }
  body.page-admin .admin-search-trigger {
    width: 38px !important;
    padding: 0 !important;
    font-size: 0 !important;
  }
  body.page-admin .admin-search-trigger > span { font-size: 16px !important; }
  body.page-admin .admin-global-save { min-width: 102px !important; padding-inline: 9px !important; }
  body.page-admin .admin-global-save kbd { display: none; }
  body.page-admin .admin-lock-button { display: none !important; }
  body.page-admin .admin-notification-panel { position: fixed !important; inset: 104px 8px auto !important; width: auto !important; }
  body.page-admin .admin-command-bar { grid-template-columns: 1fr 1fr !important; }
  body.page-admin .admin-command-status,
  body.page-admin .admin-command-bar > button { grid-column: 1 / -1 !important; }
  body.page-admin .admin-event-hero { grid-template-columns: 1fr !important; padding: 21px !important; }
  body.page-admin .admin-hero-readiness { justify-self: start; }
  body.page-admin .overview-metrics { grid-template-columns: 1fr 1fr !important; gap: 7px !important; }
  body.page-admin .overview-metric { min-height: 104px !important; padding: 12px !important; }
  body.page-admin .overview-metric strong { font-size: 25px !important; }
  body.page-admin .quick-actions > div:last-child { grid-template-columns: 1fr !important; }
  body.page-admin .team-preset-group { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 3px; }
  body.page-admin .team-preset-title { flex: 0 0 auto; }
  body.page-admin .preset-chip-button { flex: 0 0 auto; }
  body.page-admin .team-toolbar-actions .button { flex: 1; }
  body.page-admin :is(.team-manager-workspace,.team-manager-grid,.team-preset-palette-bar,.team-manager-toolbar) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body.page-admin .team-manager-workspace {
    grid-template-columns: minmax(0,1fr) !important;
    overflow: hidden !important;
  }
  body.page-admin .team-manager-grid { overflow: hidden !important; }
  body.page-admin .team-preset-palette-bar { overflow: hidden !important; }
  body.page-admin .team-toolbar-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 7px; }
  body.page-admin .team-manager-toolbar { overflow: hidden !important; }
  body.page-admin .team-manager-toolbar > label,
  body.page-admin .team-manager-toolbar select { width: 100% !important; min-width: 0 !important; }
  body.page-admin .team-control-card { grid-template-columns: 1fr !important; padding: 15px !important; }
  body.page-admin .team-control-card,
  body.page-admin .team-control-card > * { width: 100%; min-width: 0 !important; max-width: 100%; }
  body.page-admin .team-control-card > header { grid-template-columns: 46px minmax(0,1fr) auto !important; }
  body.page-admin .team-control-card > header > div { min-width: 0 !important; }
  body.page-admin .team-control-card > header h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.page-admin .team-color-field { grid-template-columns: 43px minmax(0,1fr) !important; }
  body.page-admin .team-control-card > header,
  body.page-admin .team-image-controls,
  body.page-admin .team-control-stats,
  body.page-admin .team-color-chips-row,
  body.page-admin .team-live-mockup { grid-column: 1 !important; }
  body.page-admin .settings-workspace { grid-template-columns: 1fr !important; }
  body.page-admin .settings-savebar { padding: 11px !important; }
  body.page-admin .settings-savebar > div { display: none; }
  body.page-admin .settings-savebar .button { width: 100%; }
  body.page-admin .admin-login-shell { padding: 12px !important; }
  body.page-admin .admin-login-card { padding: 26px 20px !important; }
}

/* ========================================================================
   Kauzariyya Admin · simple interface
   A quiet, flat visual layer that keeps the full control-room feature set.
   ======================================================================== */
html:has(body.page-admin) { background: #f5f7f5 !important; }

body.page-admin {
  --admin-accent: var(--site-accent, #168044);
  --admin-accent-bright: #a8dfb8;
  --admin-bg: #f5f7f5;
  --admin-sidebar-bg: #153d26;
  --admin-panel: #ffffff;
  --admin-panel-raised: #ffffff;
  --admin-panel-soft: #f8faf8;
  --admin-line: #dde5df;
  --admin-line-strong: #b9c9bd;
  --admin-text: #17231a;
  --admin-copy: #526158;
  --admin-dim: #758179;
  color-scheme: light;
  background: var(--admin-bg) !important;
  color: var(--admin-text) !important;
}

body.page-admin::before { display: none !important; }

body.page-admin .admin-control-shell {
  grid-template-columns: 240px minmax(0, 1fr) !important;
}

body.page-admin .admin-sidebar {
  width: 240px !important;
  padding: 18px 12px 12px !important;
  border-right: 0 !important;
  background: var(--admin-sidebar-bg) !important;
  box-shadow: none !important;
}

body.page-admin .admin-side-brand {
  min-height: 60px;
  margin-bottom: 10px !important;
  padding: 0 6px 14px !important;
  border-color: rgba(255,255,255,.12) !important;
}

body.page-admin .admin-side-brand img {
  width: 38px !important;
  height: 38px !important;
  padding: 5px;
  border-radius: 9px !important;
  box-shadow: none !important;
}

body.page-admin .admin-side-brand strong { font-size: 14px !important; }
body.page-admin .admin-side-brand small {
  color: #b8d7c1 !important;
  font-size: 9px !important;
  letter-spacing: .1em;
}

body.page-admin .admin-nav-label {
  margin: 16px 10px 6px !important;
  color: rgba(255,255,255,.48) !important;
  font-size: 9px !important;
  letter-spacing: .12em !important;
}

body.page-admin .admin-sidebar nav button {
  min-height: 40px !important;
  grid-template-columns: 26px minmax(0,1fr) auto !important;
  margin: 2px 0 !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 7px !important;
  color: rgba(255,255,255,.72) !important;
}

body.page-admin .admin-sidebar nav button:hover {
  background: rgba(255,255,255,.07) !important;
  color: #fff !important;
}

body.page-admin .admin-sidebar nav button.active {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.page-admin .admin-sidebar nav button > b {
  color: #bde0c6 !important;
  font-size: 14px !important;
}

body.page-admin .admin-sidebar nav button > span {
  font-size: 12px !important;
  font-weight: 600 !important;
}

body.page-admin .admin-sidebar nav button > small {
  border: 0 !important;
  background: rgba(255,255,255,.09) !important;
  color: rgba(255,255,255,.65) !important;
  font-size: 9px !important;
}

body.page-admin .admin-identity {
  min-height: 54px !important;
  padding: 9px !important;
  border-color: rgba(255,255,255,.12) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.05) !important;
}

body.page-admin .admin-identity > span {
  border: 0 !important;
  border-radius: 7px !important;
  background: rgba(255,255,255,.11) !important;
  color: #fff !important;
}

body.page-admin .admin-identity strong { color: #fff !important; font-size: 11px !important; }
body.page-admin .admin-identity small,
body.page-admin .admin-home-link { color: rgba(255,255,255,.52) !important; font-size: 9px !important; }

body.page-admin .admin-workspace {
  padding: 22px clamp(18px, 2.5vw, 36px) 48px !important;
  color: var(--admin-text) !important;
}

body.page-admin .admin-workspace-head {
  top: 10px !important;
  min-height: 72px !important;
  margin-bottom: 18px !important;
  padding: 12px 14px 12px 18px !important;
  border-color: var(--admin-line) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.97) !important;
  box-shadow: 0 1px 3px rgba(19,45,28,.06) !important;
  backdrop-filter: none !important;
}

body.page-admin .admin-workspace-head .overline {
  margin-bottom: 4px !important;
  color: var(--admin-dim) !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
}

body.page-admin .admin-head-breadcrumb { color: #237044 !important; }
body.page-admin .admin-workspace-head h1 {
  color: var(--admin-text) !important;
  font-size: clamp(24px, 2.4vw, 31px) !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
}

body.page-admin .admin-head-copy > p:last-child {
  margin-top: 5px !important;
  color: var(--admin-dim) !important;
  font-size: 11px !important;
}

/* Ensure Admin Dashboard is sleek, dark themed & aligned */
body.page-admin {
  --admin-bg: #07100a;
  --admin-sidebar-bg: #07170d;
  --admin-panel: #0d1b12;
  --admin-panel-raised: #112219;
  --admin-panel-soft: #0a160f;
  --admin-line: rgba(220, 245, 226, 0.11);
  --admin-line-strong: rgba(121, 225, 146, 0.28);
  --admin-text: #f4f8f5;
  --admin-copy: #aebbb1;
  --admin-dim: #708077;
  background: radial-gradient(circle at 88% 3%, rgba(143, 227, 18, 0.12), transparent 27rem), linear-gradient(180deg, #09130d 0, #07100a 38rem) !important;
  color: #f4f8f5 !important;
}

body.page-admin .admin-control-shell {
  display: grid !important;
  grid-template-columns: 250px minmax(0, 1fr) !important;
  min-height: 100vh !important;
  padding-top: 0 !important;
  gap: 0 !important;
}

body.page-admin .admin-sidebar {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  width: 250px !important;
  min-width: 250px !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 20px 14px 14px !important;
  border-right: 1px solid rgba(220, 245, 226, 0.11) !important;
  background: #07170d !important;
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.3) !important;
  z-index: 300 !important;
}

body.page-admin .admin-sidebar nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex: 1 !important;
  overflow-y: auto !important;
}

body.page-admin .admin-sidebar nav button {
  width: 100% !important;
  min-height: 42px !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #aebbb1 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

body.page-admin .admin-sidebar nav button:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
}

body.page-admin .admin-sidebar nav button.active {
  background: rgba(143, 227, 18, 0.15) !important;
  border-color: rgba(143, 227, 18, 0.3) !important;
  color: #ffffff !important;
  box-shadow: inset 3px 0 0 #8fe312 !important;
}

body.page-admin .admin-sidebar nav b {
  color: #8fe312 !important;
  font-size: 14px !important;
}

body.page-admin .overview-metric,
body.page-admin .admin-championship-control,
body.page-admin .admin-focus-card,
body.page-admin .quick-actions,
body.page-admin .team-control-card,
body.page-admin .settings-card,
body.page-admin .admin-operations-card,
body.page-admin .admin-readiness-card,
body.page-admin .admin-report-card,
body.page-admin .admin-report-kpis article,
body.page-admin .college-student-directory,
body.page-admin .college-student-form,
body.page-admin .program-form,
body.page-admin .program-admin-list {
  background-color: #0d1b12 !important;
  border: 1px solid rgba(220, 245, 226, 0.11) !important;
  border-radius: 16px !important;
  color: #f4f8f5 !important;
}

body.page-admin :is(h1, h2, h3, h4, strong) {
  color: #ffffff !important;
}

body.page-admin :is(p, small, span, label) {
  color: #aebbb1;
}

body.page-admin .overline {
  color: #8fe312 !important;
}

body.page-admin :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) {
  border-color: rgba(220, 245, 226, 0.15) !important;
  background: #08140d !important;
  color: #ffffff !important;
  border-radius: 10px !important;
}

body.page-admin :is(input, select, textarea):focus {
  border-color: #8fe312 !important;
  box-shadow: 0 0 0 3px rgba(143, 227, 18, 0.15) !important;
}

body.page-admin select option {
  background: #0b1910 !important;
  color: #ffffff !important;
}

/* ========================================================================
   Redesigned Google Maps Button & Animated Social Media Icons
   ======================================================================== */

.footer-directions-link,
html#kauzariyya-theme body .footer-directions-link,
body.page-home .home-footer-location .footer-directions-link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 22px !important;
  padding: 14px 28px !important;
  border-radius: 99px !important;
  border: 1.5px solid rgba(143, 227, 18, 0.45) !important;
  background: linear-gradient(135deg, rgba(143, 227, 18, 0.18), rgba(8, 26, 15, 0.9)) !important;
  color: #8fe312 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  backdrop-filter: blur(14px) !important;
  box-shadow: 0 8px 24px rgba(143, 227, 18, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.footer-directions-link:hover,
html#kauzariyya-theme body .footer-directions-link:hover,
body.page-home .home-footer-location .footer-directions-link:hover {
  transform: translateY(-3px) scale(1.03) !important;
  border-color: #8fe312 !important;
  background: linear-gradient(135deg, #8fe312, #59df7b) !important;
  color: #07100b !important;
  box-shadow: 0 14px 35px rgba(143, 227, 18, 0.45) !important;
}

.footer-directions-link b,
html#kauzariyya-theme body .footer-directions-link b {
  display: inline-block !important;
  font-size: 14px !important;
  transition: transform 0.3s ease !important;
}

.footer-directions-link:hover b,
html#kauzariyya-theme body .footer-directions-link:hover b {
  transform: translate(3px, -3px) !important;
}

/* ========================================================================
   Modern Minimal Social Icons — Clean Circles + Brand Glow + Animations
   ======================================================================== */

/* Entrance: icons slide up & fade in with stagger */
@keyframes socialEntrance {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.85);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Subtle idle breathing — very gentle, not distracting */
@keyframes socialBreathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* Glow ring pulse on hover (via ::after pseudo-element) */
@keyframes socialRingPulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* Gentle Floating & Breathing Glow Animation for Social Icons */
@keyframes socialIconFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes socialIconGlowPulse {
  0%, 100% {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 8px 22px var(--brand-glow, rgba(78, 232, 131, 0.35));
  }
}

/* Minimalist Social Icons — Pure Logos, No Background Box, Simple Hover */
.simple-social-icons,
.home-institution-footer .simple-social-icons {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Minimalist Icon Links — No background box, no borders, no animation loops */
.simple-social-icons a,
.home-institution-footer .simple-social-icons a,
body.page-home .home-institution-footer .simple-social-icons a,
body.page-review .home-institution-footer .simple-social-icons a,
.social-link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 4px !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
  color: rgba(255, 255, 255, 0.78) !important;
  opacity: 1 !important;
  animation: none !important;
  transition: opacity 0.25s ease, transform 0.25s ease, color 0.25s ease !important;
}

/* Kill all pseudo-element borders & ring outlines */
.simple-social-icons a::before,
.simple-social-icons a::after,
.social-link::before,
.social-link::after {
  display: none !important;
  content: none !important;
  border: none !important;
  opacity: 0 !important;
}

/* Individual Brand Native Colors (always active on default) */
.simple-social-icons a.facebook, .social-link.facebook { color: #1877F2 !important; }
.simple-social-icons a.youtube, .social-link.youtube { color: #FF0000 !important; }
.simple-social-icons a.whatsapp, .social-link.whatsapp { color: #25D366 !important; }

/* Footer WhatsApp tile: muted navy square with an emerald outline mark. */
.simple-social-icons a.whatsapp,
html#kauzariyya-theme body .simple-social-icons a.whatsapp {
  width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: #283345 !important;
  box-shadow: none !important;
  color: #24d879 !important;
  opacity: 1 !important;
  animation: none !important;
}
.simple-social-icons a.whatsapp svg {
  width: 27px !important;
  height: 27px !important;
  fill: none !important;
  stroke: #24d879 !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.simple-social-icons a.whatsapp:hover,
html#kauzariyya-theme body .simple-social-icons a.whatsapp:hover {
  background: #303d51 !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.24) !important;
}
.simple-social-icons a.x-social, .social-link.x-social { color: #FFFFFF !important; }
.simple-social-icons a.instagram, .social-link.instagram { color: #E4405F !important; }

/* Simple hover interaction: gentle lift without glow */
.simple-social-icons a:hover,
.home-institution-footer .simple-social-icons a:hover,
body.page-home .home-institution-footer .simple-social-icons a:hover,
body.page-review .home-institution-footer .simple-social-icons a:hover,
.social-link:hover {
  animation: none !important;
  transform: translateY(-3px) scale(1.08) !important;
  box-shadow: none !important;
  background: transparent !important;
  filter: none !important;
}

.simple-social-icons a:active,
.social-link:active {
  transform: scale(0.95) !important;
}

/* Clean SVG Icon Sizing (22px) */
.simple-social-icons a svg,
.social-link svg {
  width: 28px !important;
  height: 28px !important;
  display: block !important;
  transition: transform 0.2s ease, filter 0.2s ease !important;
}

/* Floating animation keyframes */
@keyframes socialFloatWave {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-4px) rotate(1.8deg);
  }
}

/* Universal Pure Emerald Green (#4ee883) Theme for All Headings, Overlines, Labels, and Buttons */
.overline,
.overline-dot,
.home-hero-eyebrow,
.schedule-banner-overline,
.participant-title .overline,
.students-page-hero .overline,
.schedule-head .overline,
.home-visitor-greeting strong,
.home-story-kicker,
.home-redesign-copy h1 em,
.home-redesign-copy h1 span,
html#kauzariyya-theme body .overline,
html#kauzariyya-theme body .overline-dot,
html#kauzariyya-theme body .home-hero-eyebrow,
html#kauzariyya-theme body .home-story-kicker,
html#kauzariyya-theme body.page-home h1 em,
html#kauzariyya-theme body.page-home h1 span,
html#kauzariyya-theme body.page-home h2 em,
html#kauzariyya-theme body.page-scoreboard h1 em,
html#kauzariyya-theme body.page-schedule h1 em,
/* Universal Pure Emerald Green (#4ee883) Theme for All Headings, Overlines, Labels, and Buttons */
.overline,
.overline-dot,
.home-hero-eyebrow,
.schedule-banner-overline,
.participant-title .overline,
.students-page-hero .overline,
.schedule-head .overline,
.home-visitor-greeting strong,
.home-story-kicker,
.home-redesign-copy h1 em,
.home-redesign-copy h1 span,
html#kauzariyya-theme body .overline,
html#kauzariyya-theme body .overline-dot,
html#kauzariyya-theme body .home-hero-eyebrow,
html#kauzariyya-theme body .home-story-kicker,
html#kauzariyya-theme body.page-home h1 em,
html#kauzariyya-theme body.page-home h1 span,
html#kauzariyya-theme body.page-home h2 em,
html#kauzariyya-theme body.page-scoreboard h1 em,
html#kauzariyya-theme body.page-schedule h1 em,
html#kauzariyya-theme body.page-musabaqa h1 em,
html#kauzariyya-theme body.page-home .home-event-highlights > header .overline {
  color: #4ee883 !important;
}

html#kauzariyya-theme body .button:not(.danger):not(.button-ghost),
html#kauzariyya-theme body button[type="submit"]:not(.danger):not(.button-ghost) {
  border-color: #4ee883 !important;
  background: linear-gradient(135deg, #4ee883, #22c55e) !important;
  color: #05160b !important;
  font-weight: 700 !important;
}

/* ========================================================================
   1. Small, Modern, Animated Navbar (Image 2 Design)
   ======================================================================== */
/* Cleaned up redundant header block */

/* Base 3D Schedule Cards */
.schedule-3d-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  backdrop-filter: blur(16px) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.card-3d-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  border-radius: 8px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

/* Card 1 - Emerald Green */
.schedule-3d-card.card-3d-emerald,
html#kauzariyya-theme body .schedule-3d-card.card-3d-emerald {
  border: 1.5px solid rgba(78, 232, 131, 0.5) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(78, 232, 131, 0.18), transparent 60%),
    linear-gradient(145deg, rgba(6, 22, 12, 0.94), rgba(3, 12, 6, 0.98)) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 28px rgba(78, 232, 131, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.schedule-3d-card.card-3d-emerald:hover,
html#kauzariyya-theme body .schedule-3d-card.card-3d-emerald:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: #4ee883 !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 45px rgba(78, 232, 131, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.schedule-3d-card.card-3d-emerald .card-3d-badge,
html#kauzariyya-theme body .schedule-3d-card.card-3d-emerald .card-3d-badge {
  background: rgba(78, 232, 131, 0.22) !important;
  color: #4ee883 !important;
  border: 1px solid rgba(78, 232, 131, 0.45) !important;
}

/* Card 2 - Restored Vibrant Amber/Orange (Image 1 Design) */
.schedule-3d-card.card-3d-amber,
html#kauzariyya-theme body .schedule-3d-card.card-3d-amber {
  border: 1.5px solid rgba(245, 158, 11, 0.65) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(245, 158, 11, 0.3), transparent 65%),
    linear-gradient(145deg, rgba(38, 22, 5, 0.96), rgba(18, 10, 2, 0.98)) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 32px rgba(245, 158, 11, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.schedule-3d-card.card-3d-amber:hover,
html#kauzariyya-theme body .schedule-3d-card.card-3d-amber:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: #f59e0b !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 50px rgba(245, 158, 11, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.schedule-3d-card.card-3d-amber .card-3d-badge,
html#kauzariyya-theme body .schedule-3d-card.card-3d-amber .card-3d-badge {
  background: rgba(245, 158, 11, 0.25) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.55) !important;
}

/* Card 3 - Vibrant Blue */
.schedule-3d-card.card-3d-blue,
html#kauzariyya-theme body .schedule-3d-card.card-3d-blue {
  border: 1.5px solid rgba(59, 130, 246, 0.65) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(59, 130, 246, 0.3), transparent 65%),
    linear-gradient(145deg, rgba(5, 15, 38, 0.96), rgba(2, 6, 18, 0.98)) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 32px rgba(59, 130, 246, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.schedule-3d-card.card-3d-blue:hover,
html#kauzariyya-theme body .schedule-3d-card.card-3d-blue:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 50px rgba(59, 130, 246, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.schedule-3d-card.card-3d-blue .card-3d-badge,
html#kauzariyya-theme body .schedule-3d-card.card-3d-blue .card-3d-badge {
  background: rgba(59, 130, 246, 0.25) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(59, 130, 246, 0.55) !important;
}

.card-3d-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  background: rgba(0, 0, 0, 0.45) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
}

.card-3d-number {
  font-size: 54px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1 !important;
}

.card-3d-date-meta strong {
  display: block !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.card-3d-date-meta small {
  display: block !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-top: 2px !important;
}

.card-3d-foot {
  padding-top: 16px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 13px !important;
}

/* ========================================================================
   3. Students Page Hero Banner with kauzariyya2.png
   ======================================================================== */
.students-hero-banner {
  position: relative !important;
  width: 100% !important;
  height: 240px !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  margin-bottom: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.students-hero-banner img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.students-hero-banner .banner-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(4, 15, 8, 0.2), rgba(4, 15, 8, 0.85)) !important;
}

/* ========================================================================
   4. Admin Sidebar Independent Scrolling & Sticky Layout (Image 3)
   ======================================================================== */
body.page-admin .admin-sidebar {
  position: sticky !important;
  top: 0 !important;
  z-index: 320 !important;
  width: 252px !important;
  height: 100vh !important;
  max-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 16px 12px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(78, 232, 131, 0.3) transparent !important;
  border-right: 1px solid var(--admin-line) !important;
  background: var(--admin-sidebar-bg) !important;
}

/* ========================================================================
   5. Open in Google Maps Button (Image 1 Previous Design)
   ======================================================================== */
.footer-directions-link,
html#kauzariyya-theme body .footer-directions-link,
body.page-home .home-footer-location .footer-directions-link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 22px !important;
  padding: 12px 28px !important;
  border-radius: 99px !important;
  border: 1.5px solid rgba(78, 232, 131, 0.45) !important;
  background: rgba(8, 22, 11, 0.92) !important;
  color: #4ee883 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.footer-directions-link:hover,
html#kauzariyya-theme body .footer-directions-link:hover,
body.page-home .home-footer-location .footer-directions-link:hover {
  transform: translateY(-2px) scale(1.02) !important;
  border-color: #4ee883 !important;
  background: rgba(14, 38, 20, 0.96) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(78, 232, 131, 0.35) !important;
}

.footer-directions-link b,
html#kauzariyya-theme body .footer-directions-link b {
  display: inline-block !important;
  font-size: 14px !important;
  color: #4ee883 !important;
  transition: transform 0.3s ease !important;
}

.footer-directions-link:hover b,
html#kauzariyya-theme body .footer-directions-link:hover b {
  transform: translate(3px, -3px) !important;
  color: #ffffff !important;
}

/* ========================================================================
   6. Ultra-Modern Event Highlights Cards Redesign
   ======================================================================== */
html#kauzariyya-theme body.page-home .home-event-highlights,
.home-event-highlights {
  margin-top: 56px !important;
  padding: 48px 36px !important;
  border-radius: 32px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(4, 12, 7, 0.65) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

html#kauzariyya-theme body.page-home .home-event-highlights > header,
.home-event-highlights > header {
  margin-bottom: 36px !important;
}

html#kauzariyya-theme body.page-home .home-event-highlights > header .overline,
.home-event-highlights > header .overline {
  color: #4ee883 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
}

html#kauzariyya-theme body.page-home .home-event-highlights > header h2,
.home-event-highlights > header h2 {
  max-width: 24ch !important;
  color: #ffffff !important;
  font-size: clamp(28px, 3.8vw, 44px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
}

html#kauzariyya-theme body.page-home .home-event-highlights > div,
.home-event-highlights > div {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  border: none !important;
}

@media (max-width: 1024px) {
  html#kauzariyya-theme body.page-home .home-event-highlights > div,
  .home-event-highlights > div {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  html#kauzariyya-theme body.page-home .home-event-highlights > div,
  .home-event-highlights > div {
    grid-template-columns: 1fr !important;
  }
}

html#kauzariyya-theme body.page-home .home-event-highlights article,
html#kauzariyya-theme body.page-home .home-event-highlights article:first-child,
html#kauzariyya-theme body.page-home .home-event-highlights article:nth-child(odd),
.home-event-highlights article {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  padding: 30px 24px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(78, 232, 131, 0.3) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(78, 232, 131, 0.15), transparent 60%),
    linear-gradient(145deg, rgba(8, 26, 15, 0.9), rgba(4, 12, 7, 0.96)) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(16px) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html#kauzariyya-theme body.page-home .home-event-highlights article:hover,
.home-event-highlights article:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: #4ee883 !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65), 0 0 35px rgba(78, 232, 131, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

html#kauzariyya-theme body.page-home .home-event-highlights article .highlight-card-head,
.home-event-highlights article .highlight-card-head {
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 22px !important;
  border-radius: 14px !important;
  background: rgba(78, 232, 131, 0.14) !important;
  border: 1px solid rgba(78, 232, 131, 0.4) !important;
  color: #4ee883 !important;
  box-shadow: 0 4px 16px rgba(78, 232, 131, 0.25) !important;
}

html#kauzariyya-theme body.page-home .home-event-highlights article .highlight-card-head svg,
.home-event-highlights article .highlight-card-head svg {
  width: 24px !important;
  height: 24px !important;
  stroke: #4ee883 !important;
  stroke-width: 2.2 !important;
}

html#kauzariyya-theme body.page-home .home-event-highlights article h3,
.home-event-highlights article h3 {
  margin: 0 0 10px 0 !important;
  color: #ffffff !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

html#kauzariyya-theme body.page-home .home-event-highlights article p,
.home-event-highlights article p {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.68) !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}

/* ========================================================================
   7. Sleek Compact Kauzariyya Capsule Navbar with White Spreading Wave
   ======================================================================== */
@keyframes whiteSpreadRipple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.85;
  }
  60% {
    transform: translate(-50%, -50%) scale(2.6);
    opacity: 0.35;
  }
  100% {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0;
  }
}

@keyframes activeWhitePulse {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 0.7;
  }
  50% {
    transform: translate(-50%, -50%) scale(2.2);
    opacity: 0.25;
  }
  100% {
    transform: translate(-50%, -50%) scale(3.2);
    opacity: 0;
  }
}

/* Unify header container styling across all pages */
html#kauzariyya-theme body:not(.page-admin) .site-header,
body:not(.page-admin) .site-header,
.site-header {
  position: sticky !important;
  top: 12px !important;
  z-index: 1000 !important;
  width: min(1200px, calc(100% - 32px)) !important;
  max-width: 1200px !important;
  min-height: 56px !important;
  height: auto !important;
  margin: 12px auto 0 !important;
  padding: 6px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(4, 14, 8, 0.92) !important;
  backdrop-filter: blur(22px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(120%) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  transition: background 0.3s ease, box-shadow 0.3s ease !important;
  transform: none !important;
}

/* Global Page Content Clearance for Fixed Navbar */
body:not(.page-admin) .musabaqa-plan,
body:not(.page-admin) .all-students-page,
body:not(.page-admin) .participant-directory-page,
body:not(.page-admin) .scoreboard-experience,
body:not(.page-admin) .schedule-page,
body:not(.page-admin) .review-page {
  padding-top: 104px !important;
}

body:not(.page-admin) .musabaqa-plan-hero {
  margin-top: 52px !important;
  padding-top: 0 !important;
}

html#kauzariyya-theme body .site-logo,
html#kauzariyya-theme body:not(.page-admin) .site-logo,
.site-logo {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  text-decoration: none !important;
}

html#kauzariyya-theme body .site-logo img,
html#kauzariyya-theme body:not(.page-admin) .site-logo img,
.site-logo img {
  width: 34px !important;
  height: 34px !important;
  object-fit: contain !important;
  padding: 3px !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  transition: transform 0.25s ease !important;
  flex-shrink: 0 !important;
}

html#kauzariyya-theme body .site-logo:hover img,
.site-logo:hover img {
  transform: scale(1.04) !important;
}

html#kauzariyya-theme body .site-logo span,
html#kauzariyya-theme body:not(.page-admin) .site-logo span,
.site-logo span {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  line-height: 1.1 !important;
  min-width: 0 !important;
}

html#kauzariyya-theme body .site-logo b,
html#kauzariyya-theme body:not(.page-admin) .site-logo b,
.site-logo b {
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
}

html#kauzariyya-theme body .site-logo small,
html#kauzariyya-theme body:not(.page-admin) .site-logo small,
.site-logo small {
  color: rgba(255, 255, 255, 0.48) !important;
  font-size: 8px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}

html#kauzariyya-theme body:not(.page-admin) .site-nav,
body:not(.page-admin) .site-nav,
.site-nav {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 3px 4px !important;
  border: 1px solid rgba(9, 174, 70, 0.25) !important;
  border-radius: 9999px !important;
  background: rgba(2, 12, 6, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  flex: 0 1 auto !important;
}

html#kauzariyya-theme body:not(.page-admin) .site-nav a,
body:not(.page-admin) .site-nav a,
.site-nav a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 32px !important;
  padding: 0 11px !important;
  border-radius: 9999px !important;
  border: 1px solid transparent !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  background: transparent !important;
  transition: all 0.22s ease !important;
}

/* Remove unwanted pseudo-element overlays */
html#kauzariyya-theme body .site-nav a::before,
html#kauzariyya-theme body .site-nav a::after,
.site-nav a::before,
.site-nav a::after {
  display: none !important;
  content: none !important;
}

/* Hover state for inactive links */
html#kauzariyya-theme body:not(.page-admin) .site-nav a:not(.active):hover,
body:not(.page-admin) .site-nav a:not(.active):hover,
.site-nav a:not(.active):hover {
  color: #ffffff !important;
  background: rgba(9, 174, 70, 0.16) !important;
  border-color: rgba(9, 174, 70, 0.3) !important;
  box-shadow: 0 2px 10px rgba(9, 174, 70, 0.2) !important;
}

/* Active Nav Button */
html#kauzariyya-theme body:not(.page-admin) .site-nav a.active,
body:not(.page-admin) .site-nav a.active,
.site-nav a.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #09ae46, #068033) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 18px rgba(9, 174, 70, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* Redesigned Header Actions */
body:not(.page-admin) .header-account-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

body:not(.page-admin) .festival-date {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
  padding: 3px 9px !important;
  height: 34px !important;
  border: 1px solid rgba(9, 174, 70, 0.22) !important;
  border-radius: 10px !important;
  background: rgba(9, 174, 70, 0.06) !important;
  text-align: left !important;
  transition: all 0.2s ease !important;
}

body:not(.page-admin) .festival-date span {
  display: block !important;
  margin: 0 0 1px 0 !important;
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 6.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

body:not(.page-admin) .festival-date b {
  display: block !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
}

body:not(.page-admin) .visitor-logout,
body:not(.page-admin) .visitor-logout-floating {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  height: 38px !important;
  padding: 4px 14px 4px 5px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transition: all 0.22s ease !important;
}

body:not(.page-admin) .visitor-logout:hover,
body:not(.page-admin) .visitor-logout-floating:hover {
  border-color: rgba(9, 174, 70, 0.45) !important;
  background: rgba(9, 174, 70, 0.12) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(9, 174, 70, 0.2) !important;
}

body:not(.page-admin) .logout-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: rgba(9, 174, 70, 0.18) !important;
  color: #0bbd4c !important;
  border: 1px solid rgba(9, 174, 70, 0.3) !important;
  transition: all 0.2s ease !important;
}

body:not(.page-admin) .logout-icon svg {
  width: 14px !important;
  height: 14px !important;
  stroke: #0bbd4c !important;
}

body:not(.page-admin) .visitor-logout:hover .logout-icon {
  background: #09ae46 !important;
  color: #ffffff !important;
}

body:not(.page-admin) .visitor-logout:hover .logout-icon svg {
  stroke: #ffffff !important;
}

body:not(.page-admin) .logout-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  line-height: 1.1 !important;
}

body:not(.page-admin) .logout-copy small {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 7.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body:not(.page-admin) .logout-copy strong {
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* ========================================================================
   8. Admin Dashboard Stationary Left Sidebar & Refined Workspace
   ======================================================================== */
body.page-admin {
  background: #040e07 !important;
  color: #e2f7e9 !important;
}

body.page-admin .admin-control-shell {
  display: block !important;
  position: relative !important;
  padding-left: 256px !important;
  width: 100% !important;
  min-height: 100vh !important;
}

body.page-admin .admin-sidebar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 500 !important;
  width: 256px !important;
  height: 100vh !important;
  max-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 20px 14px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(78, 232, 131, 0.3) transparent !important;
  border-right: 1px solid rgba(78, 232, 131, 0.18) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 197, 94, 0.12), transparent 18rem),
    #05150a !important;
  box-shadow: 12px 0 40px rgba(0, 0, 0, 0.45) !important;
}

body.page-admin .admin-workspace {
  width: 100% !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 28px 32px 60px !important;
}

body.page-admin .admin-sidebar nav button {
  width: 100% !important;
  min-height: 42px !important;
  margin-bottom: 4px !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: all 0.22s ease !important;
}

body.page-admin .admin-sidebar nav button:hover {
  color: #ffffff !important;
  background: rgba(34, 197, 94, 0.12) !important;
  border-color: rgba(34, 197, 94, 0.25) !important;
}

body.page-admin .admin-sidebar nav button.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(28, 126, 59, 0.5), rgba(15, 70, 32, 0.7)) !important;
  border: 1px solid rgba(78, 232, 131, 0.45) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(28, 126, 59, 0.3) !important;
}

@media (max-width: 900px) {
  body.page-admin .admin-control-shell {
    padding-left: 0 !important;
  }
  body.page-admin .admin-sidebar {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
  }
}

/* ========================================================================
   9. Students Page Clean Hero & Scroll Button
   ======================================================================== */
.students-hero-banner {
  display: none !important;
}

.students-hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin-top: 24px !important;
}

.students-scroll-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 28px !important;
  border-radius: 99px !important;
  border: 1.5px solid rgba(78, 232, 131, 0.45) !important;
  background: linear-gradient(135deg, #1c7e3b, #15803d) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(28, 126, 59, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.students-scroll-btn:hover {
  transform: translateY(-2px) scale(1.02) !important;
  border-color: #4ee883 !important;
  box-shadow: 0 10px 28px rgba(28, 126, 59, 0.5), 0 0 20px rgba(78, 232, 131, 0.3) !important;
}

.students-scroll-btn b {
  display: inline-block !important;
  font-size: 14px !important;
  color: #4ee883 !important;
  transition: transform 0.3s ease !important;
}

.students-scroll-btn:hover b {
  transform: translateY(3px) !important;
  color: #ffffff !important;
}

/* ========================================================================
   Students Directory Box - Guaranteed Internal Scrollbar
   ======================================================================== */
html#kauzariyya-theme body.page-students .all-students-page,
body.page-students .all-students-page,
.all-students-page {
  display: flex !important;
  flex-direction: column !important;
  gap: 28px !important;
  width: 100% !important;
  max-width: 1220px !important;
  margin: 0 auto !important;
  padding-bottom: 60px !important;
}

html#kauzariyya-theme body.page-students .public-student-directory,
body.page-students .public-student-directory,
.all-students-page .public-student-directory {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 820px !important;
  min-height: 720px !important;
  max-height: 85vh !important;
  border-radius: 24px !important;
  border: 1.5px solid rgba(78, 232, 131, 0.35) !important;
  background: rgba(4, 18, 10, 0.96) !important;
  backdrop-filter: blur(24px) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  overflow: hidden !important;
  margin-bottom: 48px !important;
}

html#kauzariyya-theme body.page-students .student-directory-head,
body.page-students .student-directory-head,
.all-students-page .student-directory-head {
  flex-shrink: 0 !important;
  padding: 24px 28px 14px !important;
  border-bottom: 1px solid rgba(78, 232, 131, 0.12) !important;
}

html#kauzariyya-theme body.page-students .public-student-filters,
body.page-students .public-student-filters,
.all-students-page .public-student-filters {
  flex-shrink: 0 !important;
  padding: 16px 28px !important;
  border-bottom: 1px solid rgba(78, 232, 131, 0.1) !important;
  background: rgba(0, 0, 0, 0.25) !important;
}

html#kauzariyya-theme body.page-students .public-student-grid,
html#kauzariyya-theme body .public-student-grid,
body.page-students .public-student-grid,
.all-students-page .public-student-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 16px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 640px !important;
  max-height: 660px !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  padding: 20px 28px 48px !important;
  scrollbar-width: thin !important;
  scrollbar-color: #4ee883 rgba(4, 16, 9, 0.9) !important;
}

html#kauzariyya-theme body.page-students .public-student-grid::-webkit-scrollbar,
body.page-students .public-student-grid::-webkit-scrollbar,
.all-students-page .public-student-grid::-webkit-scrollbar {
  width: 9px !important;
  display: block !important;
}

html#kauzariyya-theme body.page-students .public-student-grid::-webkit-scrollbar-track,
body.page-students .public-student-grid::-webkit-scrollbar-track,
.all-students-page .public-student-grid::-webkit-scrollbar-track {
  background: rgba(4, 16, 9, 0.9) !important;
  border-radius: 99px !important;
}

html#kauzariyya-theme body.page-students .public-student-grid::-webkit-scrollbar-thumb,
body.page-students .public-student-grid::-webkit-scrollbar-thumb,
.all-students-page .public-student-grid::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4ee883, #1c7e3b) !important;
  border-radius: 99px !important;
  border: 2px solid rgba(4, 16, 9, 0.95) !important;
  box-shadow: 0 0 10px rgba(78, 232, 131, 0.5) !important;
}

html#kauzariyya-theme body.page-students .public-student-grid::-webkit-scrollbar-thumb:hover,
body.page-students .public-student-grid::-webkit-scrollbar-thumb:hover,
.all-students-page .public-student-grid::-webkit-scrollbar-thumb:hover {
  background: #4ee883 !important;
}

/* ========================================================================
   Social Icons — Responsive Mobile Override (complements block ≈line 11554+)
   ======================================================================== */
@media (max-width: 600px) {
  .simple-social-icons a,
  .home-institution-footer .simple-social-icons a,
  body.page-home .home-institution-footer .simple-social-icons a,
  body.page-review .home-institution-footer .simple-social-icons a,
  .social-link {
    width: 38px !important;
    height: 38px !important;
  }
  .simple-social-icons a svg,
  .social-link svg {
    width: 17px !important;
    height: 17px !important;
  }
  .simple-social-icons,
  .home-institution-footer .simple-social-icons {
    gap: 10px !important;
  }
}

/* Mobile home schedule: use the same refined emerald glass surface as the
   Edathala location card while preserving the desktop schedule design. */
@media (max-width: 560px) {
  html body.page-home .home-schedule-3d-deck,
  html#kauzariyya-theme body.page-home .home-schedule-3d-deck {
    width: calc(100% + 20px) !important;
    max-width: none !important;
    box-sizing: border-box !important;
    margin: 24px 0 32px -10px !important;
    padding: 24px 18px !important;
    border: 1px solid rgba(142, 237, 167, .18) !important;
    border-radius: 28px !important;
    background: 
      radial-gradient(circle at 10% 0%, rgba(78, 232, 131, .15), transparent 50%),
      linear-gradient(165deg, rgba(8, 26, 17, .92), rgba(2, 8, 5, .98)) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255,255,255,.06) !important;
    backdrop-filter: blur(12px) !important;
  }

  html body.page-home .schedule-3d-head,
  html#kauzariyya-theme body.page-home .schedule-3d-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
  }

  html body.page-home .schedule-3d-copy h2#home-schedule-3d-title,
  html#kauzariyya-theme body.page-home .schedule-3d-copy h2#home-schedule-3d-title {
    font-size: clamp(26px, 8vw, 32px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
  }

  html body.page-home .schedule-3d-action-btn,
  html#kauzariyya-theme body.page-home .schedule-3d-action-btn {
    width: max-content !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 22px !important;
    border: 1px solid rgba(78, 232, 131, .3) !important;
    background: rgba(78, 232, 131, .08) !important;
    color: #56e47a !important;
    font-size: 10px !important;
    border-radius: 12px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  html body.page-home .schedule-3d-grid,
  html#kauzariyya-theme body.page-home .schedule-3d-grid {
    gap: 14px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  html body.page-home .schedule-3d-card,
  html#kauzariyya-theme body.page-home .schedule-3d-card {
    min-height: auto !important;
    padding: 18px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
  }

  html body.page-home .schedule-3d-card .card-3d-inner,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-inner {
    min-height: auto !important;
  }

  html body.page-home .schedule-3d-card .card-3d-head,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-head {
    margin-bottom: 12px !important;
  }

  html body.page-home .schedule-3d-card .card-3d-body,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-body {
    margin: 0 0 12px 0 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 12px !important;
  }

  html body.page-home .schedule-3d-card .card-3d-number,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-number {
    font-size: 38px !important;
    margin: 0 !important;
  }

  html body.page-home .schedule-3d-card .card-3d-foot,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-foot {
    font-size: 10px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
}

/* Reduced motion: disable all social icon animations */
@media (prefers-reduced-motion: reduce) {
  .simple-social-icons a,
  .social-link {
    animation: none !important;
    transition: none !important;
  }
  .simple-social-icons a:after,
  .social-link:after {
    animation: none !important;
    display: none !important;
  }
}

/* ========================================================================
   10. Redesigned Participant Roster & Live Stage Bento Grid Layout
   ======================================================================== */
html#kauzariyya-theme body .participant-stage-layout,
body.page-participants .participant-stage-layout {
  display: grid !important;
  grid-template-columns: minmax(360px, 440px) minmax(0, 1fr) !important;
  gap: 28px !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  align-items: stretch !important;
}

/* Left Card: Live Participant Stage Glass Box */
html#kauzariyya-theme body.page-participants .speaker-card,
html#kauzariyya-theme body.page-participants .participant-live-card,
body.page-participants .participant-live-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 28px !important;
  border: 1px solid rgba(78, 232, 131, 0.28) !important;
  border-radius: 24px !important;
  background: rgba(4, 18, 10, 0.88) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

html#kauzariyya-theme body.page-participants .speaker-card-head,
body.page-participants .speaker-card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 24px !important;
}

html#kauzariyya-theme body.page-participants .live-label,
body.page-participants .live-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 16px !important;
  border: 1px solid rgba(54, 218, 118, 0.45) !important;
  border-radius: 99px !important;
  background: rgba(54, 218, 118, 0.15) !important;
  color: #4ee883 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

html#kauzariyya-theme body.page-participants .live-label i,
body.page-participants .live-label i {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #36da76 !important;
  box-shadow: 0 0 10px #36da76 !important;
}

html#kauzariyya-theme body.page-participants .stage-sequence,
body.page-participants .stage-sequence {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html#kauzariyya-theme body.page-participants .speaker-card-main,
body.page-participants .speaker-card-main {
  margin-bottom: 20px !important;
}

html#kauzariyya-theme body.page-participants .speaker-card-main p,
body.page-participants .speaker-card-main p {
  color: #4ee883 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

html#kauzariyya-theme body.page-participants .speaker-card-main h2,
body.page-participants .speaker-card-main h2 {
  font-size: clamp(32px, 3.8vw, 44px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 16px !important;
  word-break: break-word !important;
}

html#kauzariyya-theme body.page-participants .speaker-identifiers,
body.page-participants .speaker-identifiers {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
}

html#kauzariyya-theme body.page-participants .speaker-identifiers > span,
html#kauzariyya-theme body.page-participants .speaker-identifiers > b,
body.page-participants .speaker-identifiers > span,
body.page-participants .speaker-identifiers > b {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

html#kauzariyya-theme body.page-participants .participant-live-card > .speaker-cue-board,
body.page-participants .speaker-cue-board {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin-bottom: 20px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  background: rgba(0, 0, 0, 0.3) !important;
  overflow: hidden !important;
}

html#kauzariyya-theme body.page-participants .speaker-cue-board > div,
body.page-participants .speaker-cue-board > div {
  padding: 14px 12px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  text-align: center !important;
}

html#kauzariyya-theme body.page-participants .speaker-cue-board > div span,
body.page-participants .speaker-cue-board > div span {
  font-size: 8px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  display: block !important;
  margin-bottom: 4px !important;
}

html#kauzariyya-theme body.page-participants .speaker-cue-board > div strong,
body.page-participants .speaker-cue-board > div strong {
  font-size: 14px !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  display: block !important;
}

html#kauzariyya-theme body.page-participants .speaker-cue-board > div:last-child,
body.page-participants .speaker-cue-board > div:last-child {
  border-right: none !important;
}

html#kauzariyya-theme body.page-participants .participant-live-card > .up-next-cue,
body.page-participants .up-next-cue {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 14px 18px !important;
  border: 1px solid rgba(244, 201, 115, 0.32) !important;
  border-radius: 16px !important;
  background: rgba(244, 201, 115, 0.06) !important;
}

html#kauzariyya-theme body.page-participants .up-next-label,
body.page-participants .up-next-label {
  padding: 4px 10px !important;
  border-radius: 6px !important;
  background: rgba(244, 201, 115, 0.18) !important;
  color: #f4c973 !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

html#kauzariyya-theme body.page-participants .up-next-cue > time,
body.page-participants .up-next-cue > time {
  color: #f4c973 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

/* Right Card: Running Order Roster Glass Box */
html#kauzariyya-theme body.page-participants .participant-list,
body.page-participants .participant-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  padding: 28px !important;
  border: 1px solid rgba(78, 232, 131, 0.28) !important;
  border-radius: 24px !important;
  background: rgba(4, 18, 10, 0.88) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

html#kauzariyya-theme body.page-participants .participant-list-head,
body.page-participants .participant-list-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

html#kauzariyya-theme body.page-participants .participant-list-head .overline,
body.page-participants .participant-list-head .overline {
  color: #4ee883 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

html#kauzariyya-theme body.page-participants .participant-list-head h2,
body.page-participants .participant-list-head h2 {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

html#kauzariyya-theme body.page-participants .participant-list-head strong,
body.page-participants .participant-list-head strong {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 6px 14px !important;
  border-radius: 12px !important;
  background: rgba(78, 232, 131, 0.12) !important;
  border: 1px solid rgba(78, 232, 131, 0.35) !important;
  color: #4ee883 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

/* Overridden by master control panel at bottom of file */

/* Item 1 (Active / First in Queue) */
html#kauzariyya-theme body.page-participants .participant-row.is-live,
body.page-participants .participant-row.is-live {
  border: 1.5px solid #36da76 !important;
  border-radius: 16px !important;
  background: rgba(54, 218, 118, 0.1) !important;
  box-shadow: 0 4px 20px rgba(54, 218, 118, 0.2) !important;
  padding: 14px 18px !important;
}

html#kauzariyya-theme body.page-participants .participant-row.is-live .participant-order,
body.page-participants .participant-row.is-live .participant-order {
  background: #36da76 !important;
  border: none !important;
  color: #041208 !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
}

html#kauzariyya-theme body.page-participants .participant-row.is-live .participant-call small,
body.page-participants .participant-row.is-live .participant-call small {
  color: #36da76 !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
}

/* Item 2 (Second in Queue) */
html#kauzariyya-theme body.page-participants .participant-row.is-next,
body.page-participants .participant-row.is-next {
  border: 1px solid rgba(244, 201, 115, 0.4) !important;
  border-radius: 16px !important;
  background: rgba(244, 201, 115, 0.05) !important;
  padding: 14px 18px !important;
}

html#kauzariyya-theme body.page-participants .participant-row.is-next .participant-order,
body.page-participants .participant-row.is-next .participant-order {
  background: rgba(244, 201, 115, 0.15) !important;
  border: 1px solid rgba(244, 201, 115, 0.4) !important;
  color: #f4c973 !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
}

html#kauzariyya-theme body.page-participants .participant-row.is-next .participant-call small,
body.page-participants .participant-row.is-next .participant-call small {
  color: #f4c973 !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
}

/* Waiting Items */
html#kauzariyya-theme body.page-participants .participant-row.is-waiting,
body.page-participants .participant-row.is-waiting {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  padding: 14px 18px !important;
  transition: all 0.2s ease !important;
}

html#kauzariyya-theme body.page-participants .participant-row.is-waiting:hover,
body.page-participants .participant-row.is-waiting:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(78, 232, 131, 0.3) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Responsive layout override for tablet & mobile */
@media (max-width: 980px) {
  html#kauzariyya-theme body .participant-stage-layout,
  body.page-participants .participant-stage-layout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* Student Chess Number Rule Banner & Settings Preview */
.chess-number-rule-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: rgba(78, 232, 131, 0.07);
  border: 1px solid rgba(78, 232, 131, 0.22);
}
.chess-number-rule-banner .rule-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chess-number-rule-banner .rule-info span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #4ee883;
}
.chess-number-rule-banner .rule-info strong {
  font-size: 13px;
  color: #ffffff;
  font-weight: 600;
}
.chess-number-rule-banner .rule-info code {
  background: rgba(78, 232, 131, 0.15);
  color: #4ee883;
  padding: 2px 6px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 12px;
}
.chess-number-rule-banner .rule-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chess-number-preview-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(78, 232, 131, 0.08);
  border: 1px solid rgba(78, 232, 131, 0.25);
  margin-top: 4px;
}
.chess-number-preview-badge b {
  font-size: 16px;
  font-weight: 800;
  color: #4ee883;
  letter-spacing: 0.04em;
  font-family: monospace;
}
.chess-number-preview-badge small {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   NAVBAR, BUTTON & SCROLLBAR OVERRIDES - USER REFINEMENTS
   1. Remove vertical green scrollbar line & navbar green borders
   2. Remove space between navbar and top edge
   3. Add interactive click press animations for all buttons
   4. Add modern hover effects
   5. Resize navbar and interactive elements for optimum balance
   ========================================================================== */

/* 1. Remove vertical green scrollbar line across all browsers */
html, body, * {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {
  background: transparent !important;
  border: none !important;
}

/* Neutralize mobile phone mockup frame line if present */
@media (max-width: 560px) {
  body::after {
    border-color: rgba(255, 255, 255, 0.12) !important;
  }
}

/* ==========================================================================
   UNIFIED NAVBAR DESIGN — CLASSIC FLOATING GLASS CARD LAYOUT & ALIGNMENT
   ========================================================================== */

/* ── Top Header Shell (100% Unified across Home, Schedule, Review, Scores, Participants, Students) ─ */
html body .site-header,
html body.page-home .site-header,
html body.page-schedule .site-header,
html body.page-review .site-header,
html body.page-scoreboard .site-header,
html body.page-participants .site-header,
html body.page-students .site-header,
html body.page-program-plan .site-header,
html body:not(.page-admin) .site-header,
body .site-header {
  position: sticky !important;
  top: 12px !important;
  z-index: 1000 !important;
  width: min(1240px, calc(100% - 32px)) !important;
  max-width: 1240px !important;
  min-height: 56px !important;
  height: 56px !important;
  margin: 12px auto 0 !important;
  padding: 6px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 18px !important;
  background: rgba(4, 14, 8, 0.92) !important;
  backdrop-filter: blur(22px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(120%) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  transition: background 0.3s ease, box-shadow 0.3s ease !important;
  transform: none !important;
  overflow: visible !important;
}

/* ── Left: Site Logo & Branding ──────────────────────────────── */
html body .site-logo,
html body.page-home .site-logo,
html body:not(.page-admin) .site-logo {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  text-decoration: none !important;
}

html body .site-logo img {
  width: 36px !important;
  height: 36px !important;
  padding: 3px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
}

html body .site-logo span {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  min-width: 0 !important;
}

html body .site-logo b {
  display: block !important;
  color: #ffffff !important;
  font-family: "Plus Jakarta Sans", "Ubuntu", sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body .site-logo small {
  display: block !important;
  color: rgba(255, 255, 255, 0.52) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ── Middle: Centered Navigation Capsule ─────────────────────── */
html body .site-nav,
html body.page-home .site-nav,
html body.page-schedule .site-nav,
html body.page-review .site-nav,
html body.page-scoreboard .site-nav,
html body.page-participants .site-nav,
html body.page-students .site-nav,
html body.page-program-plan .site-nav,
html body:not(.page-admin) .site-nav {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  margin: 0 auto !important;
  padding: 3px 4px !important;
  border: 1px solid rgba(78, 232, 131, 0.22) !important;
  border-radius: 9999px !important;
  background: rgba(2, 12, 6, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.06), 0 4px 14px rgba(0, 0, 0, 0.25) !important;
  flex: 0 1 auto !important;
}

html body .site-nav a,
html body.page-home .site-nav a,
html body.page-schedule .site-nav a,
html body.page-review .site-nav a,
html body.page-scoreboard .site-nav a,
html body.page-participants .site-nav a,
html body.page-students .site-nav a,
html body.page-program-plan .site-nav a,
html body:not(.page-admin) .site-nav a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 32px !important;
  padding: 0 12px !important;
  border: 1px solid transparent !important;
  border-radius: 9999px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  background: transparent !important;
  opacity: 1 !important;
  transform: none !important;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

html body .site-nav a:hover {
  color: #ffffff !important;
  background: rgba(78, 232, 131, 0.14) !important;
  border-color: rgba(78, 232, 131, 0.28) !important;
  transform: translateY(-1px) !important;
}

html body .site-nav a.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #09ae46 0%, #068033 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(9, 174, 70, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

/* ── Right: Festival Date & Account Actions ──────────────────── */
html body .header-account-actions,
html body.page-home .header-account-actions,
html body:not(.page-admin) .header-account-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

html body .site-header .festival-date,
html body:not(.page-admin) .site-header .festival-date,
body .festival-date {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 4px 10px !important;
  border: 1px solid rgba(78, 232, 131, 0.38) !important;
  border-radius: 12px !important;
  background: rgba(78, 232, 131, 0.08) !important;
  text-align: right !important;
  white-space: nowrap !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body .site-header .festival-date span,
html body:not(.page-admin) .site-header .festival-date span,
body .festival-date span {
  display: block !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 7.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

html body .site-header .festival-date b,
html body:not(.page-admin) .site-header .festival-date b,
body .festival-date b {
  display: block !important;
  color: #4ee883 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  margin-top: 1px !important;
  white-space: nowrap !important;
}

html body .site-header .visitor-logout,
html body .site-header .visitor-logout-floating,
html body:not(.page-admin) .site-header .visitor-logout-floating,
body .visitor-logout,
body .visitor-logout-floating {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  height: 36px !important;
  padding: 0 12px 0 8px !important;
  border: 1px solid rgba(78, 232, 131, 0.38) !important;
  border-radius: 9999px !important;
  background: rgba(78, 232, 131, 0.1) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transition: all 0.2s ease !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body .site-header .visitor-logout:hover,
html body .site-header .visitor-logout-floating:hover,
body .visitor-logout-floating:hover {
  border-color: rgba(78, 232, 131, 0.65) !important;
  background: rgba(78, 232, 131, 0.22) !important;
  box-shadow: 0 0 18px rgba(78, 232, 131, 0.35) !important;
  transform: translateY(-1px) !important;
}

html body .site-header.is-scrolled {
  background: rgba(4, 14, 8, 0.94) !important;
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* ── Responsive: narrower screens (760px to 1280px) ───────────── */
@media(min-width: 760px) and (max-width: 1280px) {
  html body .site-header,
  html body.page-home .site-header,
  html body:not(.page-admin) .site-header {
    width: calc(100% - 24px) !important;
    gap: 8px !important;
    padding: 5px 10px !important;
  }

  html body .site-logo span small {
    display: none !important;
  }

  html body .site-nav a,
  html body.page-home .site-nav a {
    padding: 0 8px !important;
    font-size: 11px !important;
    height: 30px !important;
  }
}

@media(prefers-reduced-motion: reduce) {
  html body .site-nav a {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ── Participant spotlight card redesign ── */
@keyframes spotlight-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.82); }
}

body.page-participants .participant-spotlight,
html#kauzariyya-theme body.page-participants .participant-spotlight {
  position: relative !important;
  isolation: isolate !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  min-height: clamp(540px, 64vh, 660px) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(78, 232, 131, 0.22) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%, rgba(78, 232, 131, 0.14), transparent 58%),
    linear-gradient(168deg, rgba(7, 24, 14, 0.94) 0%, rgba(3, 12, 7, 0.97) 100%) !important;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(78, 232, 131, 0.06) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

body.page-participants .participant-spotlight::before,
body.page-participants .participant-spotlight::after,
html#kauzariyya-theme body.page-participants .participant-spotlight::before,
html#kauzariyya-theme body.page-participants .participant-spotlight::after {
  display: none !important;
}

body.page-participants .participant-spotlight .spotlight-accent,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-accent {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  border-radius: 28px 0 0 28px !important;
  background: linear-gradient(180deg, #4ee883 0%, rgba(78, 232, 131, 0.35) 55%, rgba(78, 232, 131, 0.08) 100%) !important;
  box-shadow: 0 0 24px rgba(78, 232, 131, 0.45) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

body.page-participants .participant-spotlight > *:not(.spotlight-accent),
html#kauzariyya-theme body.page-participants .participant-spotlight > *:not(.spotlight-accent) {
  position: relative !important;
  z-index: 1 !important;
}

body.page-participants .participant-spotlight .spotlight-head,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 22px 26px 0 30px !important;
}

body.page-participants .participant-spotlight .live-label,
html#kauzariyya-theme body.page-participants .participant-spotlight .live-label {
  min-height: 32px !important;
  padding: 0 14px 0 12px !important;
  border: 1px solid rgba(78, 232, 131, 0.38) !important;
  border-radius: 999px !important;
  background: rgba(78, 232, 131, 0.1) !important;
  color: #6ef59a !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

body.page-participants .participant-spotlight .live-label i,
html#kauzariyya-theme body.page-participants .participant-spotlight .live-label i {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #4ee883 !important;
  box-shadow: 0 0 12px rgba(78, 232, 131, 0.9) !important;
  animation: spotlight-pulse 2.4s ease-in-out infinite !important;
}

body.page-participants .participant-spotlight .spotlight-clock,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-clock {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 72px !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, 0.28) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font: 700 13px/1 "Ubuntu Mono", "SFMono-Regular", monospace !important;
  letter-spacing: 0.06em !important;
  font-variant-numeric: tabular-nums !important;
}

body.page-participants .participant-spotlight .spotlight-hero,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-hero {
  position: relative !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 28px 26px 22px 30px !important;
  overflow: hidden !important;
}

body.page-participants .participant-spotlight .spotlight-watermark,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-watermark {
  position: absolute !important;
  top: 50% !important;
  right: -6px !important;
  transform: translateY(-58%) !important;
  color: rgba(78, 232, 131, 0.07) !important;
  font: 800 clamp(120px, 18vw, 168px)/0.82 "Ubuntu", sans-serif !important;
  letter-spacing: -0.06em !important;
  pointer-events: none !important;
  user-select: none !important;
}

body.page-participants .participant-spotlight .spotlight-program,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-program {
  position: relative !important;
  margin: 0 0 10px !important;
  color: #4ee883 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

body.page-participants .participant-spotlight .speaker-card-main > h2,
html#kauzariyya-theme body.page-participants .participant-spotlight .speaker-card-main > h2 {
  position: relative !important;
  max-width: none !important;
  margin: 0 !important;
  color: #fff !important;
  font: 800 clamp(36px, 4.6vw, 56px)/1.02 "Ubuntu", sans-serif !important;
  letter-spacing: -0.03em !important;
  text-transform: none !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

body.page-participants .participant-spotlight .spotlight-tags,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-tags {
  position: relative !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 18px !important;
  padding: 0 !important;
}

body.page-participants .participant-spotlight .spotlight-tags > span,
body.page-participants .participant-spotlight .spotlight-tags > b,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-tags > span,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-tags > b {
  min-height: 30px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

body.page-participants .participant-spotlight .spotlight-tags > b[lang="ar"],
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-tags > b[lang="ar"] {
  color: #b8ffd0 !important;
  border-color: rgba(78, 232, 131, 0.28) !important;
  background: rgba(78, 232, 131, 0.1) !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.page-participants .participant-spotlight .spotlight-stats,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 22px 18px 26px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

body.page-participants .participant-spotlight .spotlight-stat,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-stat {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
  padding: 14px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  background: rgba(0, 0, 0, 0.22) !important;
  text-align: left !important;
}

body.page-participants .participant-spotlight .spotlight-stat span,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-stat span {
  display: block !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.42) !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

body.page-participants .participant-spotlight .spotlight-stat strong,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-stat strong {
  display: block !important;
  overflow: hidden !important;
  color: #f4fff8 !important;
  font: 700 15px/1.15 "Ubuntu", sans-serif !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.page-participants .participant-spotlight .spotlight-up-next,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-up-next {
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 16px 22px 18px 26px !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(244, 201, 115, 0.06), rgba(244, 201, 115, 0.02)),
    rgba(0, 0, 0, 0.18) !important;
}

body.page-participants .participant-spotlight .spotlight-up-next.queue-clear,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-up-next.queue-clear {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  background:
    linear-gradient(180deg, rgba(78, 232, 131, 0.06), rgba(78, 232, 131, 0.02)),
    rgba(0, 0, 0, 0.18) !important;
}

body.page-participants .participant-spotlight .spotlight-next-order,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-next-order {
  width: 34px !important;
  height: 34px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(244, 201, 115, 0.45) !important;
  border-radius: 50% !important;
  background: rgba(244, 201, 115, 0.12) !important;
  color: #f4c973 !important;
  font: 800 11px/1 "Ubuntu", sans-serif !important;
  letter-spacing: 0.04em !important;
}

body.page-participants .participant-spotlight .up-next-label,
html#kauzariyya-theme body.page-participants .participant-spotlight .up-next-label {
  min-height: 28px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  background: rgba(244, 201, 115, 0.16) !important;
  color: #f4c973 !important;
  font-size: 8px !important;
  font-weight: 850 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
}

body.page-participants .participant-spotlight .spotlight-next-copy,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-next-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 3px !important;
}

body.page-participants .participant-spotlight .spotlight-next-copy strong,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-next-copy strong {
  overflow: hidden !important;
  color: #fff !important;
  font: 700 13px/1.25 "Ubuntu", sans-serif !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.page-participants .participant-spotlight .spotlight-next-copy small,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-next-copy small {
  overflow: hidden !important;
  color: rgba(255, 255, 255, 0.44) !important;
  font-size: 9px !important;
  letter-spacing: 0.05em !important;
  text-overflow: ellipsis !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

body.page-participants .participant-spotlight .spotlight-up-next > time,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-up-next > time {
  color: #f4c973 !important;
  font: 800 15px/1 "Ubuntu Mono", "SFMono-Regular", monospace !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.04em !important;
}

body.page-participants .participant-spotlight .queue-ready-mark,
html#kauzariyya-theme body.page-participants .participant-spotlight .queue-ready-mark {
  width: 32px !important;
  height: 32px !important;
  border: 1px solid rgba(78, 232, 131, 0.35) !important;
  background: rgba(78, 232, 131, 0.12) !important;
  color: #4ee883 !important;
}

@media (max-width: 980px) {
  body.page-participants .participant-spotlight .spotlight-stats,
  html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-stats {
    grid-template-columns: 1fr !important;
    margin-inline: 18px !important;
  }

  body.page-participants .participant-spotlight .spotlight-up-next,
  html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-up-next {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    padding-inline: 18px !important;
  }

  body.page-participants .participant-spotlight .spotlight-next-order,
  html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-next-order {
    display: none !important;
  }
}

@media (max-width: 640px) {
  body.page-participants .participant-spotlight .speaker-card-main > h2,
  html#kauzariyya-theme body.page-participants .participant-spotlight .speaker-card-main > h2 {
    font-size: clamp(30px, 9vw, 40px) !important;
  }

  body.page-participants .participant-spotlight .spotlight-watermark,
  html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-watermark {
    font-size: 96px !important;
    right: -2px !important;
  }
}


/* ========================================================================
   Mobile Responsive Enhancements — Modern Layout, Box Placement & Nav Animations
   ======================================================================== */

/* 1. Mobile Navbar Icon Animations ONLY (Structure & Layout Untouched) */
@keyframes mobileNavIconPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0px transparent);
  }
  50% {
    transform: scale(1.16);
    filter: drop-shadow(0 0 8px rgba(78, 232, 131, 0.75));
  }
}

.mobile-tabbar a .tab-glyph,
.mobile-tabbar a svg,
.mobile-tabbar a i {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease !important;
}

.mobile-tabbar a:hover .tab-glyph,
.mobile-tabbar a:hover svg,
.mobile-tabbar a:active .tab-glyph,
.mobile-tabbar a:active svg {
  transform: translateY(-2px) scale(1.18) !important;
  filter: drop-shadow(0 0 6px rgba(78, 232, 131, 0.6)) !important;
}

.mobile-tabbar a.active .tab-glyph,
.mobile-tabbar a.active svg {
  animation: mobileNavIconPulse 3s ease-in-out infinite !important;
}


/* 2. Responsive Layout, Box Sizes & Placements on Mobile (≤ 768px & ≤ 480px) */

@media (max-width: 768px) {
  /* Global Container Padding on Mobile */
  body main,
  .section-wrap,
  .page-hero {
    padding-inline: 16px !important;
  }

  /* Home Hero Section Box & Typography */
  .home-redesign-hero {
    padding: 24px 16px 18px !important;
  }

  .home-redesign-copy h1,
  body.page-home .home-redesign-copy h1 {
    font-size: clamp(48px, 14.5vw, 76px) !important;
    line-height: 0.92 !important;
    font-weight: 900 !important;
    margin-bottom: 14px !important;
  }

  .home-hero-intro {
    font-size: 14px !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
  }

  /* Signup Gate Card Box Placement */
  .signup-card,
  html body .signup-card {
    width: min(100%, 420px) !important;
    max-height: calc(100svh - 32px) !important;
    padding: 28px 22px !important;
    border-radius: 24px !important;
  }

  .signup-card h1 {
    font-size: clamp(32px, 8vw, 42px) !important;
    line-height: 1.05 !important;
  }

  .signup-card form input {
    height: 50px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
  }

  .signup-card form .button {
    min-height: 48px !important;
    border-radius: 12px !important;
  }

  /* 3D Schedule Deck Cards Placement & Box Sizes */
  .home-schedule-3d-deck {
    margin-top: 24px !important;
    padding-inline: 16px !important;
  }

  .schedule-3d-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .schedule-3d-card {
    min-height: 190px !important;
    padding: 20px 22px !important;
    border-radius: 20px !important;
  }

  .card-3d-number {
    font-size: clamp(34px, 8vw, 46px) !important;
  }

  .card-3d-date-meta strong {
    font-size: 15px !important;
  }

  .card-3d-date-meta small {
    font-size: 10px !important;
  }


  /* Feature Cards & Event Highlights Grid */
  .home-event-highlights > div {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .home-event-highlights article {
    padding: 18px 20px !important;
    border-radius: 16px !important;
  }

  .home-access-grid,
  .home-access {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .feature-card {
    min-height: 135px !important;
    padding: 16px 18px !important;
    border-radius: 18px !important;
  }

  /* Festival Status Strip Layout */
  .festival-status-strip {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border-radius: 18px !important;
  }

  .festival-status-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  /* Musabaqa About & Prayer Box Placement */
  .home-musabaqa-about {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .home-about-copy,
  .home-musabaqa-prayer {
    padding: 22px 20px !important;
    border-radius: 20px !important;
  }

  .home-story {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .home-story-visual img {
    border-radius: 20px !important;
    max-height: 220px !important;
    object-fit: cover !important;
  }
}

/* Extra Small Mobile Devices (≤ 480px) */
@media (max-width: 480px) {
  body main,
  .section-wrap,
  .page-hero {
    padding-inline: 12px !important;
  }

  .signup-card,
  html body .signup-card {
    padding: 22px 16px !important;
    border-radius: 20px !important;
  }

  .signup-card form input {
    height: 46px !important;
    font-size: 14px !important;
  }

  .schedule-3d-card {
    padding: 16px 18px !important;
    min-height: 175px !important;
  }

  body.page-scoreboard .scoreboard-bento-card {
    padding: 18px 16px !important;
  }

  body.page-scoreboard .scoreboard-page-stats {
    grid-template-columns: 1fr !important;
  }
}


/* ========================================================================
   Kauzariyya Animated Background & Enhanced Modern Button Animations
   ======================================================================== */

/* Keyframe Animations for Kauzariyya Background */
@keyframes kauzariyyaAuroraDrift {
  0% {
    transform: translate(0%, 0%) scale(1);
    opacity: 0.65;
  }
  33% {
    transform: translate(6%, -8%) scale(1.15);
    opacity: 0.85;
  }
  66% {
    transform: translate(-7%, 5%) scale(0.92);
    opacity: 0.7;
  }
  100% {
    transform: translate(0%, 0%) scale(1);
    opacity: 0.65;
  }
}

@keyframes kauzariyyaGlowPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.5;
    filter: blur(80px);
  }
  50% {
    transform: scale(1.22);
    opacity: 0.85;
    filter: blur(100px);
  }
}

@keyframes kauzariyyaLatticeSpin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.05);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* Override static building photo backgrounds with Animated Kauzariyya Theme */
.signup-gate,
html body .signup-gate {
  position: fixed !important;
  inset: 0 !important;
  z-index: 4600 !important;
  isolation: isolate !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
  background: #030c07 !important;
}

.signup-backdrop,
html body .signup-backdrop {
  position: absolute !important;
  inset: -10% !important;
  z-index: 1 !important;
  background-image:
    radial-gradient(ellipse 65% 55% at 20% 25%, rgba(78, 232, 131, 0.28) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 80% 75%, rgba(212, 175, 55, 0.18) 0%, transparent 65%),
    radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.22) 0%, transparent 70%),
    linear-gradient(155deg, #020905 0%, #061c10 45%, #020804 100%) !important;
  filter: none !important;
  animation: kauzariyyaAuroraDrift 18s ease-in-out infinite alternate !important;
}

.signup-backdrop::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: radial-gradient(rgba(78, 232, 131, 0.15) 1.5px, transparent 1.5px) !important;
  background-size: 32px 32px !important;
  opacity: 0.35 !important;
  pointer-events: none !important;
}

/* Ambient Floating Orbs */
.signup-ambient-mesh {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.signup-ambient-mesh .mesh-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.signup-ambient-mesh .mesh-orb-1 {
  top: 10%;
  left: 15%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(78, 232, 131, 0.3) 0%, rgba(78, 232, 131, 0) 70%);
  animation: kauzariyyaGlowPulse 12s ease-in-out infinite alternate;
}

.signup-ambient-mesh .mesh-orb-2 {
  bottom: 12%;
  right: 12%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.22) 0%, rgba(212, 175, 55, 0) 70%);
  animation: kauzariyyaGlowPulse 15s ease-in-out infinite 2s alternate;
}

.signup-ambient-mesh .mesh-orb-3 {
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0) 75%);
  animation: kauzariyyaAuroraDrift 22s ease-in-out infinite alternate;
}

.signup-ambient-mesh .mesh-star-pattern {
  position: absolute;
  top: -30%;
  right: -20%;
  width: 900px;
  height: 900px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%234ee883' stroke-width='0.4' stroke-opacity='0.12'%3E%3Cpolygon points='50,0 100,50 50,100 0,50'/%3E%3Cpolygon points='50,15 85,50 50,85 15,50'/%3E%3Ccircle cx='50' cy='50' r='35'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100px 100px;
  opacity: 0.6;
  animation: kauzariyyaLatticeSpin 140s linear infinite;
  pointer-events: none;
}

/* Glassmorphic Signup Card Refinement */
.signup-card,
html body .signup-card {
  position: relative !important;
  z-index: 5 !important;
  background: rgba(4, 18, 10, 0.82) !important;
  border: 1px solid rgba(78, 232, 131, 0.32) !important;
  border-radius: 28px !important;
  box-shadow:
    0 35px 90px rgba(0, 0, 0, 0.7),
    0 0 50px rgba(78, 232, 131, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  padding: 42px 38px !important;
}

.signup-card h1 span {
  color: #ffffff !important;
}

.signup-card h1 em {
  color: #4ee883 !important;
  background: linear-gradient(135deg, #4ee883 0%, #a8ffb2 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.signup-card input {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(78, 232, 131, 0.3) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.signup-card input:focus {
  border-color: #4ee883 !important;
  box-shadow: 0 0 0 4px rgba(78, 232, 131, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}


/* ── GLOBAL SIMPLE & ELEGANT BUTTON & SELECT HOVER ANIMATIONS ───── */

.button,
button,
a.button,
input[type="submit"],
.button-review-submit,
.schedule-3d-action-btn,
.custom-select-trigger,
.role-chip-btn {
  position: relative !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
}

/* Simple Clean Hover Effect */
.button:hover:not(:disabled),
button:hover:not(:disabled),
a.button:hover:not(:disabled),
input[type="submit"]:hover:not(:disabled),
.button-review-submit:hover:not(:disabled),
.schedule-3d-action-btn:hover:not(:disabled),
.custom-select-trigger:hover:not(:disabled),
.role-chip-btn:hover:not(:disabled),
.signup-card form .button:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  border-color: rgba(78, 232, 131, 0.5) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), 0 0 10px rgba(78, 232, 131, 0.15) !important;
}

/* Remove complex sheen flare sweep */
.button::after,
button::after,
a.button::after,
input[type="submit"]::after,
.button-review-submit::after,
.schedule-3d-action-btn::after,
.custom-select-trigger::after,
.signup-card form .button::after {
  content: none !important;
}

/* Hover effect on arrow icon inside buttons */
.button:hover:not(:disabled) span.btn-arrow,
button:hover:not(:disabled) span.btn-arrow,
a.button:hover:not(:disabled) span.btn-arrow,
.button:hover:not(:disabled) svg,
button:hover:not(:disabled) svg {
  transform: translateX(3px) !important;
  transition: transform 0.2s ease !important;
}

/* Tactile Spring Compression Click Animation (Active State) */
.button:active:not(:disabled),
button:active:not(:disabled),
a.button:active:not(:disabled),
input[type="submit"]:active:not(:disabled),
.button-review-submit:active:not(:disabled),
.schedule-3d-action-btn:active:not(:disabled),
.custom-select-trigger:active:not(:disabled),
.role-chip-btn:active:not(:disabled),
.signup-card form .button:active:not(:disabled) {
  transform: translateY(0px) scale(0.98) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  transition: transform 0.08s ease, box-shadow 0.08s ease !important;
}

/* Clean Simple Custom Select Menu & Option Hover */
.custom-select-menu,
html body .custom-select-menu {
  background: rgba(6, 18, 11, 0.96) !important;
  border: 1px solid rgba(78, 232, 131, 0.25) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
  border-radius: 12px !important;
  padding: 6px !important;
}

.custom-select-option,
html body .custom-select-option {
  padding: 8px 12px !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.85) !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.custom-select-option:hover,
html body .custom-select-option:hover {
  background: rgba(78, 232, 131, 0.14) !important;
  color: #ffffff !important;
}

.custom-select-option.selected,
html body .custom-select-option.selected {
  background: rgba(78, 232, 131, 0.2) !important;
  color: #4ee883 !important;
  font-weight: 700 !important;
}

/* Specific styling for primary light button in signup card */
.signup-card form .button-light {
  background: linear-gradient(135deg, #4ee883 0%, #34d399 100%) !important;
  color: #03140a !important;
  font-weight: 800 !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 8px 24px rgba(78, 232, 131, 0.3) !important;
}

/* ========================================================================
   Mobile Responsive kauzariyya2.png Background, Pill Header & Single-Box Navbar
   ======================================================================== */

/* 1. Single Box Only for Active Mobile Navbar Icon (Eliminate Double Green Box) */
.mobile-tabbar a::before,
.mobile-tabbar a::after,
.mobile-tabbar a.active::before,
.mobile-tabbar a.active::after,
html#kauzariyya-theme body .mobile-tabbar a::before,
html#kauzariyya-theme body .mobile-tabbar a::after,
html#kauzariyya-theme body .mobile-tabbar a.active::before,
html#kauzariyya-theme body .mobile-tabbar a.active::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* Ensure inner glyph container has no secondary background shape */
.mobile-tabbar a .tab-glyph,
.mobile-tabbar a.active .tab-glyph,
.mobile-tabbar a .tab-glyph-svg,
.mobile-tabbar a.active .tab-glyph-svg {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Transparent Glass active state for mobile navigation tab */
.mobile-tabbar a.active,
html#kauzariyya-theme body .mobile-tabbar a.active {
  position: relative !important;
  background: rgba(78, 232, 131, 0.12) !important;
  border: 1px solid rgba(78, 232, 131, 0.42) !important;
  border-radius: 18px !important;
  color: #4ee883 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 16px rgba(78, 232, 131, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  padding: 6px 12px !important;
}

.mobile-tabbar a.active svg,
html#kauzariyya-theme body .mobile-tabbar a.active svg {
  color: #4ee883 !important;
  filter: drop-shadow(0 0 6px rgba(78, 232, 131, 0.6)) !important;
}

/* 2. Mobile Viewport Layout & kauzariyya2.png Background (≤ 768px) */
@media (max-width: 768px) {
  body,
  body.page-students,
  body.page-home,
  body.page-musabaqa,
  body.page-scoreboard,
  body.page-schedule,
  body.page-participants,
  body.page-review {
    background-image: linear-gradient(180deg, rgba(5, 16, 9, 0.72) 0%, rgba(3, 10, 6, 0.88) 100%), url("../kauzariyya2.png") !important;
    background-position: center top !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
  }
}

/* Mobile Responsive Engine for Location Footer */
@media (max-width: 860px) {
  html#kauzariyya-theme body .home-footer-location,
  body.page-home .home-footer-location,
  body.page-review .home-footer-location,
  .home-footer-location {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
    padding: 24px 20px !important;
    width: calc(100% - 24px) !important;
    margin: 28px auto 40px !important;
    border-radius: 26px !important;
    background: radial-gradient(circle at 10% 10%, rgba(78, 232, 131, 0.12) 0%, transparent 60%),
                linear-gradient(165deg, rgba(8, 28, 17, 0.94) 0%, rgba(3, 14, 8, 0.97) 100%) !important;
    border: 1px solid rgba(78, 232, 131, 0.25) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  html#kauzariyya-theme body .footer-pulse-copy,
  .footer-pulse-copy {
    order: 1 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  html#kauzariyya-theme body .home-footer-location .footer-location-map,
  .home-footer-location .footer-location-map {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 180px !important;
    aspect-ratio: auto !important;
    border-radius: 18px !important;
    clip-path: inset(0 round 18px) !important;
    margin: 4px 0 0 0 !important;
    border: 1px solid rgba(78, 232, 131, 0.3) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4) !important;
  }

  html#kauzariyya-theme body .footer-pulse-copy > h2,
  .footer-pulse-copy > h2 {
    font-size: clamp(30px, 8vw, 42px) !important;
    line-height: 1.06 !important;
    margin-bottom: 10px !important;
  }

  html#kauzariyya-theme body .footer-pulse-copy > p:not(.overline),
  .footer-pulse-copy > p:not(.overline) {
    font-size: 13px !important;
    line-height: 1.55 !important;
    margin-bottom: 18px !important;
    max-width: 100% !important;
  }

  html#kauzariyya-theme body .footer-directions-link,
  .footer-directions-link {
    width: max-content !important;
    min-width: auto !important;
    height: 48px !important;
    padding: 0 24px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 768px) {
  /* 3. Top Header Bar Layout on Mobile (< 768px) */
  html body .site-header,
  html body.page-home .site-header,
  html body:not(.page-admin) .site-header {
    position: sticky !important;
    top: 8px !important;
    z-index: 1000 !important;
    width: calc(100% - 16px) !important;
    max-width: 100% !important;
    margin: 8px auto 12px !important;
    padding: 6px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: rgba(8, 20, 13, 0.94) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
    overflow: visible !important;
  }

  html body .site-logo {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }

  html body .site-logo img {
    width: 30px !important;
    height: 30px !important;
    padding: 2px !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
  }

  html body .site-logo span b {
    color: #ffffff !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body .site-logo span small {
    display: none !important;
  }

  html body .site-header .site-nav {
    display: none !important;
  }

  /* Account Actions, Festival Date & Sign Out on Mobile */
  html body .site-header .header-account-actions,
  html body.page-home .site-header .header-account-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  html body .site-header .festival-date,
  html body.page-home .site-header .festival-date {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 2px 7px !important;
    border: 1px solid rgba(78, 232, 131, 0.28) !important;
    border-radius: 9px !important;
    background: rgba(78, 232, 131, 0.08) !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  html body .site-header .festival-date span,
  html body.page-home .site-header .festival-date span {
    display: block !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 6px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
  }

  html body .site-header .festival-date b,
  html body.page-home .site-header .festival-date b {
    display: block !important;
    color: #4ee883 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
  }

  html body .site-header .visitor-logout,
  html body .site-header .visitor-logout-floating {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    height: 30px !important;
    padding: 0 8px !important;
    border: 1px solid rgba(78, 232, 131, 0.35) !important;
    border-radius: 9px !important;
    background: rgba(78, 232, 131, 0.12) !important;
    color: #ffffff !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
  }

  html body .site-header .visitor-logout .logout-copy,
  html body .site-header .visitor-logout-floating .logout-copy,
  body .visitor-logout .logout-copy,
  body .visitor-logout-floating .logout-copy,
  html body .site-header .visitor-logout .logout-copy strong,
  html body .site-header .visitor-logout-floating .logout-copy strong,
  body .visitor-logout .logout-copy strong,
  body .visitor-logout-floating .logout-copy strong {
    display: none !important;
  }
}

/* ========================================================================
   Clean & Professional Kauzariyya Stage Directory — Participant Roster Page
   ======================================================================== */

body.page-participants,
html#kauzariyya-theme body.page-participants {
  background-color: #060907 !important;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(78, 232, 131, 0.09), transparent 60%),
    linear-gradient(180deg, rgba(6, 12, 8, 0.94) 0%, rgba(3, 8, 5, 0.98) 100%) !important;
}

/* 1. Page Shell & Layout Grid */
body.page-participants .participant-shell,
html#kauzariyya-theme body.page-participants .participant-shell {
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding-top: 86px !important;
  padding-bottom: 70px !important;
}

body.page-participants .participant-stage-layout,
html#kauzariyya-theme body.page-participants .participant-stage-layout {
  display: grid !important;
  grid-template-columns: minmax(340px, 1.08fr) minmax(320px, 1fr) !important;
  gap: 24px !important;
  align-items: start !important;
}

/* 2. Hero Header Block */
body.page-participants .participant-title,
html#kauzariyya-theme body.page-participants .participant-title {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin-bottom: 20px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.page-participants .participant-heading-copy h1,
html#kauzariyya-theme body.page-participants .participant-heading-copy h1 {
  margin: 6px 0 !important;
  color: #ffffff !important;
  font: 800 clamp(54px, 7vw, 86px)/0.92 "Ubuntu", sans-serif !important;
  letter-spacing: -0.035em !important;
  text-transform: capitalize !important;
}

body.page-participants .participant-heading-copy h1 em,
html#kauzariyya-theme body.page-participants .participant-heading-copy h1 em {
  font-style: normal !important;
  background: linear-gradient(135deg, #4ee883 0%, #a8ffc4 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

body.page-participants .participant-heading-copy p,
html#kauzariyya-theme body.page-participants .participant-heading-copy p {
  color: rgba(238, 247, 240, 0.68) !important;
  font-size: 15px !important;
  margin: 6px 0 0 !important;
}

body.page-participants .participant-page-summary,
html#kauzariyya-theme body.page-participants .participant-page-summary {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 12px 8px 16px !important;
  border: 1.5px solid rgba(78, 232, 131, 0.32) !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at 85% 20%, rgba(78, 232, 131, 0.16), transparent 70%), rgba(6, 18, 11, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

body.page-participants .participant-page-summary .summary-pill,
html#kauzariyya-theme body.page-participants .participant-page-summary .summary-pill {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  color: #ffffff !important;
  transition: all 0.25s ease !important;
}

body.page-participants .participant-page-summary .summary-pill:hover,
html#kauzariyya-theme body.page-participants .participant-page-summary .summary-pill:hover {
  background: rgba(78, 232, 131, 0.12) !important;
  border-color: rgba(78, 232, 131, 0.35) !important;
  transform: translateY(-1px) !important;
}

body.page-participants .participant-page-summary .summary-pill svg,
html#kauzariyya-theme body.page-participants .participant-page-summary .summary-pill svg {
  color: #4ee883 !important;
  filter: drop-shadow(0 0 6px rgba(78, 232, 131, 0.5)) !important;
}

body.page-participants .participant-page-summary .summary-pill strong,
html#kauzariyya-theme body.page-participants .participant-page-summary .summary-pill strong {
  color: #4ee883 !important;
  font-family: "Ubuntu", sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

body.page-participants .participant-page-summary .summary-pill small,
html#kauzariyya-theme body.page-participants .participant-page-summary .summary-pill small {
  display: block !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

body.page-participants .participant-page-summary a,
html#kauzariyya-theme body.page-participants .participant-page-summary a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 20px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(78, 232, 131, 0.25), rgba(78, 232, 131, 0.1)) !important;
  border: 1.5px solid rgba(78, 232, 131, 0.45) !important;
  color: #4ee883 !important;
  font-family: "Ubuntu", sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(78, 232, 131, 0.18) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.page-participants .participant-page-summary a:hover,
html#kauzariyya-theme body.page-participants .participant-page-summary a:hover {
  background: #4ee883 !important;
  color: #041007 !important;
  border-color: #4ee883 !important;
  box-shadow: 0 6px 20px rgba(78, 232, 131, 0.45) !important;
  transform: translateY(-1px) !important;
}

/* Category Tab Filters Navigation Track */
body.page-participants .participant-category-tabs,
html#kauzariyya-theme body.page-participants .participant-category-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 24px !important;
  padding: 6px !important;
  border: 1.5px solid rgba(78, 232, 131, 0.22) !important;
  border-radius: 999px !important;
  background: rgba(4, 14, 8, 0.8) !important;
  backdrop-filter: blur(20px) !important;
  width: fit-content !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.page-participants .participant-category-tabs .cat-tab,
html#kauzariyya-theme body.page-participants .participant-category-tabs .cat-tab {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 8px 18px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-family: "Ubuntu", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.page-participants .participant-category-tabs .cat-tab:hover,
html#kauzariyya-theme body.page-participants .participant-category-tabs .cat-tab:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

body.page-participants .participant-category-tabs .cat-tab.active,
html#kauzariyya-theme body.page-participants .participant-category-tabs .cat-tab.active {
  border-color: rgba(78, 232, 131, 0.45) !important;
  background: linear-gradient(135deg, rgba(78, 232, 131, 0.26), rgba(78, 232, 131, 0.12)) !important;
  color: #4ee883 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 16px rgba(78, 232, 131, 0.2) !important;
}

body.page-participants .participant-category-tabs .cat-tab .cat-count,
html#kauzariyya-theme body.page-participants .participant-category-tabs .cat-tab .cat-count {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

body.page-participants .participant-category-tabs .cat-tab.active .cat-count,
html#kauzariyya-theme body.page-participants .participant-category-tabs .cat-tab.active .cat-count {
  background: #4ee883 !important;
  color: #041007 !important;
}

/* 3. Left Stage Spotlight Speaker Card Redesign (Simple, Modern, Clean) */
body.page-participants .participant-spotlight,
html#kauzariyya-theme body.page-participants .participant-spotlight {
  position: relative !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  background: rgba(12, 22, 15, 0.85) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  overflow: hidden !important;
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

body.page-participants .participant-spotlight .spotlight-head,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body.page-participants .participant-spotlight .spotlight-status-group,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-status-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.page-participants .participant-spotlight .live-label,
html#kauzariyya-theme body.page-participants .participant-spotlight .live-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  border: 1px solid rgba(78, 232, 131, 0.35) !important;
  border-radius: 999px !important;
  background: rgba(78, 232, 131, 0.1) !important;
  color: #4ee883 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

body.page-participants .participant-spotlight .live-label.is-viewing,
html#kauzariyya-theme body.page-participants .participant-spotlight .live-label.is-viewing {
  border-color: rgba(0, 229, 255, 0.35) !important;
  background: rgba(0, 229, 255, 0.1) !important;
  color: #00e5ff !important;
}

body.page-participants .participant-spotlight .live-pulse,
html#kauzariyya-theme body.page-participants .participant-spotlight .live-pulse {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  box-shadow: 0 0 8px currentColor !important;
}

body.page-participants .participant-spotlight .reset-live-btn,
html#kauzariyya-theme body.page-participants .participant-spotlight .reset-live-btn {
  padding: 3px 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

body.page-participants .participant-spotlight .reset-live-btn:hover,
html#kauzariyya-theme body.page-participants .participant-spotlight .reset-live-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

body.page-participants .participant-spotlight .spotlight-clock,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-clock {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.3) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: 'Ubuntu Mono', monospace !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
}

body.page-participants .participant-spotlight .spotlight-program-tag,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-program-tag {
  display: inline-block !important;
  padding: 3px 12px !important;
  border-radius: 999px !important;
  background: rgba(78, 232, 131, 0.12) !important;
  border: 1px solid rgba(78, 232, 131, 0.25) !important;
  color: #4ee883 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

body.page-participants .participant-spotlight .speaker-card-main > h2,
html#kauzariyya-theme body.page-participants .participant-spotlight .speaker-card-main > h2 {
  color: #ffffff !important;
  font: 800 clamp(28px, 3.8vw, 42px)/1.1 "Ubuntu", sans-serif !important;
  letter-spacing: -0.02em !important;
  margin: 4px 0 12px !important;
  text-transform: capitalize !important;
}

body.page-participants .participant-spotlight .spotlight-tags,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}

body.page-participants .participant-spotlight .spotlight-tags > span,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-tags > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

body.page-participants .participant-spotlight .spotlight-tags .badge-team,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-tags .badge-team {
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 3px 12px !important;
}

body.page-participants .participant-spotlight .spotlight-tags .team-dot,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-tags .team-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  display: inline-block !important;
}

body.page-participants .participant-spotlight .spotlight-stats,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}

body.page-participants .participant-spotlight .spotlight-stat,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-stat {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

body.page-participants .participant-spotlight .spotlight-stat span,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-stat span {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

body.page-participants .participant-spotlight .spotlight-stat strong,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-stat strong {
  color: #ffffff !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
}

body.page-participants .participant-spotlight .spotlight-up-next,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-up-next {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

body.page-participants .participant-spotlight .up-next-label,
html#kauzariyya-theme body.page-participants .participant-spotlight .up-next-label {
  color: #f4c973 !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

body.page-participants .participant-spotlight .spotlight-next-left strong,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-next-left strong {
  display: block !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin-top: 2px !important;
}

body.page-participants .participant-spotlight .spotlight-up-next time,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-up-next time {
  color: #f4c973 !important;
  font-family: 'Ubuntu Mono', monospace !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

/* 4. Right Running Order Panel Redesign (Clean, Simple, Professional) */
body.page-participants .participant-list,
html#kauzariyya-theme body.page-participants .participant-list {
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  background: rgba(12, 22, 15, 0.85) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  padding: 24px !important;
}

body.page-participants .participant-list-head,
html#kauzariyya-theme body.page-participants .participant-list-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
}

body.page-participants .participant-list-head h2,
html#kauzariyya-theme body.page-participants .participant-list-head h2 {
  margin: 0 !important;
  color: #ffffff !important;
  font: 800 24px/1.1 "Ubuntu", sans-serif !important;
  letter-spacing: -0.02em !important;
}

body.page-participants .participant-list-head .scheduled-badge,
html#kauzariyya-theme body.page-participants .participant-list-head .scheduled-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  border: 1px solid rgba(78, 232, 131, 0.3) !important;
  border-radius: 999px !important;
  background: rgba(78, 232, 131, 0.1) !important;
  color: #4ee883 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

body.page-participants .participant-list-head .badge-pulse-dot,
html#kauzariyya-theme body.page-participants .participant-list-head .badge-pulse-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #4ee883 !important;
  box-shadow: 0 0 6px #4ee883 !important;
}

/* Controls: Search & Select Filter */
body.page-participants .participant-roster-controls,
html#kauzariyya-theme body.page-participants .participant-roster-controls {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}

body.page-participants .participant-search,
html#kauzariyya-theme body.page-participants .participant-search {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.page-participants .participant-search input::placeholder,
html#kauzariyya-theme body.page-participants .participant-search input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

body.page-participants .participant-search .clear-search-btn,
html#kauzariyya-theme body.page-participants .participant-search .clear-search-btn {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 12px !important;
  cursor: pointer !important;
  padding: 4px !important;
}

/* 5. Participant Roster Item Rows */
body.page-participants .participant-row,
html#kauzariyya-theme body.page-participants .participant-row {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 38px 1fr auto !important;
  gap: 12px !important;
  align-items: center !important;
  margin: 6px 0 !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

body.page-participants .participant-row:hover,
html#kauzariyya-theme body.page-participants .participant-row:hover {
  background: rgba(78, 232, 131, 0.06) !important;
  border-color: rgba(78, 232, 131, 0.28) !important;
}

body.page-participants .participant-row.active,
html#kauzariyya-theme body.page-participants .participant-row.active {
  border: 1px solid #4ee883 !important;
  background: rgba(78, 232, 131, 0.12) !important;
  box-shadow: 0 4px 16px rgba(78, 232, 131, 0.15) !important;
}

/* Order Badge Capsule */
body.page-participants .participant-row .participant-order,
html#kauzariyya-theme body.page-participants .participant-row .participant-order {
  width: 36px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font: 700 12px/1 "Ubuntu", sans-serif !important;
}

body.page-participants .participant-row.is-live .participant-order,
html#kauzariyya-theme body.page-participants .participant-row.is-live .participant-order {
  border: none !important;
  background: #4ee883 !important;
  color: #03140a !important;
  font-weight: 800 !important;
}

body.page-participants .participant-row.is-next .participant-order,
html#kauzariyya-theme body.page-participants .participant-row.is-next .participant-order {
  border: 1px solid rgba(244, 201, 115, 0.4) !important;
  background: rgba(244, 201, 115, 0.15) !important;
  color: #f4c973 !important;
}

/* Person Meta */
body.page-participants .participant-row .participant-person strong,
html#kauzariyya-theme body.page-participants .participant-row .participant-person strong {
  display: block !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: capitalize !important;
}

body.page-participants .participant-row .participant-person small,
html#kauzariyya-theme body.page-participants .participant-row .participant-person small {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 11px !important;
}

body.page-participants .participant-row .dot-sep,
html#kauzariyya-theme body.page-participants .participant-row .dot-sep {
  color: rgba(255, 255, 255, 0.3) !important;
  font-size: 8px !important;
}

body.page-participants .participant-row .team-pill-inline,
html#kauzariyya-theme body.page-participants .participant-row .team-pill-inline {
  font-weight: 700 !important;
}

/* Call Time & Status */
body.page-participants .participant-row .participant-call,
html#kauzariyya-theme body.page-participants .participant-row .participant-call {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 2px !important;
}

body.page-participants .participant-row .participant-call time,
html#kauzariyya-theme body.page-participants .participant-row .participant-call time {
  color: #ffffff !important;
  font-family: 'Ubuntu Mono', monospace !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body.page-participants .participant-row .state-pill,
html#kauzariyya-theme body.page-participants .participant-row .state-pill {
  padding: 2px 7px !important;
  border-radius: 5px !important;
  font-size: 8.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

body.page-participants .participant-row.is-live .state-pill,
html#kauzariyya-theme body.page-participants .participant-row.is-live .state-pill {
  background: rgba(78, 232, 131, 0.16) !important;
  color: #4ee883 !important;
}

body.page-participants .participant-row.is-next .state-pill,
html#kauzariyya-theme body.page-participants .participant-row.is-next .state-pill {
  background: rgba(244, 201, 115, 0.16) !important;
  color: #f4c973 !important;
}

body.page-participants .participant-row.is-waiting .state-pill,
html#kauzariyya-theme body.page-participants .participant-row.is-waiting .state-pill {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

/* Empty State */
body.page-participants .participant-roster-empty,
html#kauzariyya-theme body.page-participants .participant-roster-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 36px 20px !important;
  text-align: center !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  gap: 6px !important;
}

body.page-participants .participant-roster-empty strong,
html#kauzariyya-theme body.page-participants .participant-roster-empty strong {
  color: #ffffff !important;
  font-size: 15px !important;
}

body.page-participants .participant-roster-empty span,
html#kauzariyya-theme body.page-participants .participant-roster-empty span {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 12.5px !important;
}

body.page-participants .participant-roster-empty .reset-filters-btn,
html#kauzariyya-theme body.page-participants .participant-roster-empty .reset-filters-btn {
  margin-top: 8px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  background: rgba(78, 232, 131, 0.14) !important;
  border: 1px solid rgba(78, 232, 131, 0.3) !important;
  color: #4ee883 !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

body.page-participants .participant-spotlight .spotlight-up-next,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-up-next {
  display: grid !important;
  grid-template-columns: auto auto 1fr auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 18px !important;
  border: 1px solid rgba(244, 201, 115, 0.3) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(244, 201, 115, 0.1) 0%, rgba(0, 0, 0, 0.35) 100%) !important;
}

body.page-participants .participant-spotlight .spotlight-next-order,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-next-order {
  width: 28px !important;
  height: 28px !important;
  border-radius: 9px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(244, 201, 115, 0.2) !important;
  color: #f4c973 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

body.page-participants .participant-spotlight .up-next-label,
html#kauzariyya-theme body.page-participants .participant-spotlight .up-next-label {
  color: #f4c973 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  white-space: nowrap !important;
}

body.page-participants .participant-spotlight .spotlight-next-copy strong,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-next-copy strong {
  display: block !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body.page-participants .participant-spotlight .spotlight-next-copy small,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-next-copy small {
  display: block !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 10px !important;
}

body.page-participants .participant-spotlight .spotlight-up-next time,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-up-next time {
  color: #f4c973 !important;
  font-family: 'Ubuntu Mono', monospace !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

/* 4. Right Running Order Panel Redesign */
body.page-participants .participant-list,
html#kauzariyya-theme body.page-participants .participant-list {
  padding: 26px !important;
  border: 1px solid rgba(78, 232, 131, 0.28) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(ellipse 90% 40% at 50% 0%, rgba(78, 232, 131, 0.12), transparent 70%),
    linear-gradient(165deg, rgba(6, 20, 11, 0.95) 0%, rgba(3, 10, 6, 0.98) 100%) !important;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  overflow: visible !important;
}

body.page-participants .participant-list-head,
html#kauzariyya-theme body.page-participants .participant-list-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
  padding-top: 2px !important;
}

body.page-participants .participant-list-head h2,
html#kauzariyya-theme body.page-participants .participant-list-head h2 {
  margin: 0 !important;
  color: #ffffff !important;
  font: 800 26px/1.08 "Ubuntu", sans-serif !important;
  letter-spacing: -0.02em !important;
}

body.page-participants .participant-list-head .scheduled-badge,
html#kauzariyya-theme body.page-participants .participant-list-head .scheduled-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  border: 1px solid rgba(78, 232, 131, 0.35) !important;
  border-radius: 999px !important;
  background: rgba(78, 232, 131, 0.12) !important;
  color: #4ee883 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  box-shadow: 0 0 14px rgba(78, 232, 131, 0.2) !important;
  flex-shrink: 0 !important;
  letter-spacing: 0.06em !important;
}

body.page-participants .participant-list-head .badge-pulse-dot,
html#kauzariyya-theme body.page-participants .participant-list-head .badge-pulse-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #4ee883 !important;
  box-shadow: 0 0 8px #4ee883 !important;
}

/* Roster Controls & Search */
body.page-participants .participant-roster-controls,
html#kauzariyya-theme body.page-participants .participant-roster-controls {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
}

/* Overridden by master control panel styling at end of file */

body.page-participants .participant-search input::placeholder,
html#kauzariyya-theme body.page-participants .participant-search input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

body.page-participants .participant-search .clear-search-btn,
html#kauzariyya-theme body.page-participants .participant-search .clear-search-btn {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 12px !important;
  cursor: pointer !important;
  padding: 4px !important;
  margin-left: 6px !important;
  transition: color 0.2s ease !important;
}

body.page-participants .participant-search .clear-search-btn:hover,
html#kauzariyya-theme body.page-participants .participant-search .clear-search-btn:hover {
  color: #ffffff !important;
}

/* 5. Participant Roster Row Redesign */
body.page-participants .participant-row,
html#kauzariyya-theme body.page-participants .participant-row {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 44px 1fr auto !important;
  gap: 14px !important;
  align-items: center !important;
  margin: 10px 0 !important;
  padding: 12px 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

body.page-participants .participant-row:hover,
html#kauzariyya-theme body.page-participants .participant-row:hover {
  transform: translateX(6px) !important;
  border-color: rgba(78, 232, 131, 0.45) !important;
  background: linear-gradient(90deg, rgba(78, 232, 131, 0.14) 0%, rgba(78, 232, 131, 0.04) 100%) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

body.page-participants .participant-row.active,
html#kauzariyya-theme body.page-participants .participant-row.active {
  border: 1.5px solid #4ee883 !important;
  background: linear-gradient(90deg, rgba(78, 232, 131, 0.22) 0%, rgba(78, 232, 131, 0.08) 100%) !important;
  box-shadow: 0 8px 28px rgba(78, 232, 131, 0.28) !important;
}

/* Order Badge */
body.page-participants .participant-row .participant-order,
html#kauzariyya-theme body.page-participants .participant-row .participant-order {
  width: 40px !important;
  height: 40px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font: 800 13px/1 "Ubuntu", sans-serif !important;
}

/* Active First-in-Queue Row */
body.page-participants .participant-row.is-live,
html#kauzariyya-theme body.page-participants .participant-row.is-live {
  border: 1.5px solid rgba(78, 232, 131, 0.55) !important;
  background: linear-gradient(90deg, rgba(78, 232, 131, 0.2) 0%, rgba(78, 232, 131, 0.06) 100%) !important;
  box-shadow: 0 8px 28px rgba(78, 232, 131, 0.22) !important;
}

body.page-participants .participant-row.is-live .participant-order,
html#kauzariyya-theme body.page-participants .participant-row.is-live .participant-order {
  border: none !important;
  background: linear-gradient(135deg, #4ee883 0%, #15803d 100%) !important;
  color: #03140a !important;
  font-weight: 900 !important;
  box-shadow: 0 0 16px rgba(78, 232, 131, 0.6) !important;
}

/* Second / Up Next Row */
body.page-participants .participant-row.is-next,
html#kauzariyya-theme body.page-participants .participant-row.is-next {
  border: 1px solid rgba(244, 201, 115, 0.4) !important;
  background: linear-gradient(90deg, rgba(244, 201, 115, 0.14) 0%, rgba(244, 201, 115, 0.03) 100%) !important;
}

body.page-participants .participant-row.is-next .participant-order,
html#kauzariyya-theme body.page-participants .participant-row.is-next .participant-order {
  border: 1px solid rgba(244, 201, 115, 0.5) !important;
  background: rgba(244, 201, 115, 0.16) !important;
  color: #f4c973 !important;
}

/* Participant Meta & Person Info */
body.page-participants .participant-row .participant-person,
html#kauzariyya-theme body.page-participants .participant-row .participant-person {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

body.page-participants .participant-row .participant-person strong,
html#kauzariyya-theme body.page-participants .participant-row .participant-person strong {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

body.page-participants .participant-row .participant-person small,
html#kauzariyya-theme body.page-participants .participant-row .participant-person small {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

body.page-participants .participant-row .dot-sep,
html#kauzariyya-theme body.page-participants .participant-row .dot-sep {
  color: rgba(255, 255, 255, 0.3) !important;
  font-size: 9px !important;
}

body.page-participants .participant-row .team-pill-inline,
html#kauzariyya-theme body.page-participants .participant-row .team-pill-inline {
  font-weight: 700 !important;
}

/* Call Time & Status Label */
body.page-participants .participant-row .participant-call,
html#kauzariyya-theme body.page-participants .participant-row .participant-call {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 3px !important;
}

body.page-participants .participant-row .participant-call time,
html#kauzariyya-theme body.page-participants .participant-row .participant-call time {
  color: #ffffff !important;
  font-family: 'Ubuntu Mono', monospace !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

body.page-participants .participant-row .state-pill,
html#kauzariyya-theme body.page-participants .participant-row .state-pill {
  padding: 2px 8px !important;
  border-radius: 6px !important;
  font-size: 9px !important;
  font-weight: 850 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body.page-participants .participant-row.is-live .state-pill,
html#kauzariyya-theme body.page-participants .participant-row.is-live .state-pill {
  background: rgba(78, 232, 131, 0.2) !important;
  color: #4ee883 !important;
}

body.page-participants .participant-row.is-next .state-pill,
html#kauzariyya-theme body.page-participants .participant-row.is-next .state-pill {
  background: rgba(244, 201, 115, 0.2) !important;
  color: #f4c973 !important;
}

body.page-participants .participant-row.is-waiting .state-pill,
html#kauzariyya-theme body.page-participants .participant-row.is-waiting .state-pill {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Hover Spotlight Cue Tag */
body.page-participants .participant-row .spotlight-hover-cue,
html#kauzariyya-theme body.page-participants .participant-row .spotlight-hover-cue {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  background: #4ee883 !important;
  color: #03140a !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease !important;
}

body.page-participants .participant-row:hover .spotlight-hover-cue,
html#kauzariyya-theme body.page-participants .participant-row:hover .spotlight-hover-cue {
  opacity: 1 !important;
}

body.page-participants .participant-row:hover .participant-call,
html#kauzariyya-theme body.page-participants .participant-row:hover .participant-call {
  opacity: 0.15 !important;
}

/* Roster Empty State */
body.page-participants .participant-roster-empty,
html#kauzariyya-theme body.page-participants .participant-roster-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 42px 24px !important;
  text-align: center !important;
  border: 1px stroke rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  background: rgba(0, 0, 0, 0.25) !important;
  gap: 8px !important;
}

body.page-participants .participant-roster-empty .empty-icon-wrap,
html#kauzariyya-theme body.page-participants .participant-roster-empty .empty-icon-wrap {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.4) !important;
  margin-bottom: 4px !important;
}

body.page-participants .participant-roster-empty strong,
html#kauzariyya-theme body.page-participants .participant-roster-empty strong {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

body.page-participants .participant-roster-empty span,
html#kauzariyya-theme body.page-participants .participant-roster-empty span {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 13px !important;
}

body.page-participants .participant-roster-empty .reset-filters-btn,
html#kauzariyya-theme body.page-participants .participant-roster-empty .reset-filters-btn {
  margin-top: 10px !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  background: rgba(78, 232, 131, 0.16) !important;
  border: 1px solid rgba(78, 232, 131, 0.35) !important;
  color: #4ee883 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

body.page-participants .participant-roster-empty .reset-filters-btn:hover,
html#kauzariyya-theme body.page-participants .participant-roster-empty .reset-filters-btn:hover {
  background: rgba(78, 232, 131, 0.28) !important;
  color: #ffffff !important;
}

/* Responsive Grid Adjustments for Mobile & Tablet */
@media (max-width: 900px) {
  body.page-participants .participant-stage-layout,
  html#kauzariyya-theme body.page-participants .participant-stage-layout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  body.page-participants .participant-title,
  html#kauzariyya-theme body.page-participants .participant-title {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  body.page-participants .participant-category-tabs,
  html#kauzariyya-theme body.page-participants .participant-category-tabs {
    width: 100% !important;
  }
}

/* Enforce kauzariyya2.png for Students Page in Mobile Responsive View */
@media (max-width: 768px) {
  body.page-students,
  html#kauzariyya-theme body.page-students {
    --page-image: url("../kauzariyya2.png") !important;
    background-image:
      linear-gradient(180deg, rgba(5, 16, 9, 0.72) 0%, rgba(3, 10, 6, 0.88) 100%),
      url("../kauzariyya2.png") !important;
    background-position: center top !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
  }

  body.page-students::before,
  html#kauzariyya-theme body.page-students::before {
    background-image:
      linear-gradient(180deg, rgba(5, 16, 9, 0.72) 0%, rgba(3, 10, 6, 0.88) 100%),
      url("../kauzariyya2.png") !important;
    background-position: center top !important;
    background-size: cover !important;
  }
}

/* Guarantee Festival Date and Sign Out Button Visibility & Green Theme (Matching Image 2) */
html body .site-header .header-account-actions,
html body:not(.page-admin) .site-header .header-account-actions,
html#kauzariyya-theme body .site-header .header-account-actions,
body .header-account-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  justify-self: end !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body .site-header .festival-date,
html body:not(.page-admin) .site-header .festival-date,
html#kauzariyya-theme body .site-header .festival-date,
body .festival-date {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
  padding: 4px 10px !important;
  border: 1px solid rgba(78, 232, 131, 0.38) !important;
  border-radius: 12px !important;
  background: rgba(78, 232, 131, 0.08) !important;
  text-align: right !important;
  white-space: nowrap !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body .site-header .festival-date span,
html body:not(.page-admin) .site-header .festival-date span,
body .festival-date span {
  display: block !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 7.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

html body .site-header .festival-date b,
html body:not(.page-admin) .site-header .festival-date b,
body .festival-date b {
  display: block !important;
  color: #4ee883 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  margin-top: 1px !important;
  white-space: nowrap !important;
}

/* Green Theme Sign Out Button (Perfect Pill Layout & Clean Text Alignment) */
html body .site-header .visitor-logout,
html body .site-header .visitor-logout-floating,
html body:not(.page-admin) .site-header .visitor-logout-floating,
body .visitor-logout,
body .visitor-logout-floating {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  height: 36px !important;
  padding: 0 12px 0 8px !important;
  border: 1px solid rgba(78, 232, 131, 0.38) !important;
  border-radius: 9999px !important;
  background: rgba(78, 232, 131, 0.1) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transition: all 0.2s ease !important;
  visibility: visible !important;
  opacity: 1 !important;
}

html body .site-header .visitor-logout:hover,
html body .site-header .visitor-logout-floating:hover,
body .visitor-logout-floating:hover {
  border-color: rgba(78, 232, 131, 0.65) !important;
  background: rgba(78, 232, 131, 0.22) !important;
  color: #ffffff !important;
  box-shadow: 0 0 18px rgba(78, 232, 131, 0.35) !important;
  transform: translateY(-1px) !important;
}

html body .site-header .visitor-logout span.logout-icon,
html body .site-header .visitor-logout-floating span.logout-icon,
body .visitor-logout-floating span.logout-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: rgba(78, 232, 131, 0.18) !important;
  border: 1px solid rgba(78, 232, 131, 0.35) !important;
  color: #4ee883 !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .site-header .visitor-logout span.logout-icon svg,
html body .site-header .visitor-logout-floating span.logout-icon svg,
body .visitor-logout-floating span.logout-icon svg {
  width: 13px !important;
  height: 13px !important;
  stroke: #4ee883 !important;
  fill: none !important;
}

@media (min-width: 769px) {
  html body .site-header .visitor-logout span.logout-copy,
  html body .site-header .visitor-logout-floating span.logout-copy,
  body .visitor-logout-floating span.logout-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  html body .site-header .visitor-logout .logout-copy small,
  html body .site-header .visitor-logout-floating .logout-copy small,
  body .visitor-logout-floating .logout-copy small {
    display: none !important;
  }

  html body .site-header .visitor-logout .logout-copy strong,
  html body .site-header .visitor-logout-floating .logout-copy strong,
  body .visitor-logout-floating .logout-copy strong {
    display: block !important;
    color: #ffffff !important;
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Mobile Responsive Sizing & Typography Tuning for Hero & Event Schedule Box */
@media (max-width: 768px) {
  /* 1. Hero Title Sizing (Bigger Heading on Mobile) */
  html body .home-hero-title,
  html body .hero-title,
  html body.page-home .home-hero h1,
  body.page-home .home-hero-title {
    font-size: clamp(40px, 11vw, 58px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.03em !important;
    font-weight: 900 !important;
  }

  html body .home-hero-overline,
  html body .hero-overline {
    font-size: 10px !important;
    letter-spacing: 0.2em !important;
    margin-bottom: 8px !important;
  }

  /* 2. Top Header Bar Layout Override for Mobile Responsive View */
  html body .site-header,
  html body.page-home .site-header,
  html body:not(.page-admin) .site-header,
  body .site-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    width: calc(100% - 20px) !important;
    max-width: 540px !important;
    margin: 8px auto 16px !important;
    padding: 7px 10px !important;
    gap: 6px !important;
    z-index: 1000 !important;
  }

  html body .site-logo,
  body .site-logo {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }

  html body .site-logo span small,
  body .site-logo span small {
    display: none !important;
  }

  html body .site-logo span b,
  body .site-logo span b {
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  html body .site-header .header-account-actions,
  html body:not(.page-admin) .site-header .header-account-actions,
  body .header-account-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html body .site-header .festival-date,
  body .festival-date {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 3px 8px !important;
    border: 1px solid rgba(78, 232, 131, 0.35) !important;
    border-radius: 10px !important;
    background: rgba(78, 232, 131, 0.08) !important;
    text-align: right !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html body .site-header .festival-date span,
  body .festival-date span {
    display: block !important;
    font-size: 6.5px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
  }

  html body .site-header .festival-date b,
  body .festival-date b {
    display: block !important;
    font-size: 9px !important;
    color: #4ee883 !important;
    font-weight: 800 !important;
  }

  html body .site-header .visitor-logout,
  html body .site-header .visitor-logout-floating,
  body .visitor-logout,
  body .visitor-logout-floating {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    height: 32px !important;
    padding: 0 9px !important;
    border: 1px solid rgba(78, 232, 131, 0.35) !important;
    border-radius: 10px !important;
    background: rgba(78, 232, 131, 0.1) !important;
    color: #ffffff !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .animated-wave-ribbon-bg {
    display: none !important;
  }

  /* 3. Schedule Box Responsive Container (Image 2) */
  .home-schedule-3d-deck,
  html#kauzariyya-theme body .home-schedule-3d-deck {
    margin: 20px auto 32px !important;
    padding: 22px 16px !important;
    border-radius: 26px !important;
    width: calc(100% - 20px) !important;
    max-width: 520px !important;
  }

  /* Box Header Text: Information of Event Schedules */
  .schedule-3d-head,
  html#kauzariyya-theme body .schedule-3d-head {
    margin-bottom: 18px !important;
    gap: 12px !important;
  }

  .schedule-3d-copy .overline,
  html#kauzariyya-theme body .schedule-3d-copy .overline {
    font-size: 9.5px !important;
    letter-spacing: 0.16em !important;
    margin-bottom: 4px !important;
  }

  .schedule-3d-copy h2#home-schedule-3d-title,
  html#kauzariyya-theme body .schedule-3d-copy h2#home-schedule-3d-title {
    font-size: clamp(23px, 6.5vw, 30px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
  }

  .schedule-3d-action-btn,
  html#kauzariyya-theme body .schedule-3d-action-btn {
    padding: 7px 14px !important;
    font-size: 10.5px !important;
    border-radius: 999px !important;
    gap: 6px !important;
  }

  /* Box Cards Grid */
  .schedule-3d-grid,
  html#kauzariyya-theme body .schedule-3d-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .schedule-3d-card,
  html#kauzariyya-theme body .schedule-3d-card {
    min-height: auto !important;
    padding: 18px 20px !important;
    border-radius: 20px !important;
  }

  /* Sleek Badges (DAY 01, 12 PROGRAMMES) */
  .card-3d-head,
  html#kauzariyya-theme body .card-3d-head {
    margin-bottom: 12px !important;
  }

  .card-3d-badge,
  html#kauzariyya-theme body .card-3d-badge {
    font-size: 9.5px !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
  }

  .card-3d-pill,
  html#kauzariyya-theme body .card-3d-pill {
    font-size: 9px !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
  }

  /* Date Number BIGGER ("18", "19") */
  .card-3d-number,
  html#kauzariyya-theme body .card-3d-number {
    font-size: 52px !important;
    font-weight: 900 !important;
    line-height: 0.9 !important;
    letter-spacing: -0.04em !important;
  }

  .card-3d-date-meta strong,
  html#kauzariyya-theme body .card-3d-date-meta strong {
    font-size: 16px !important;
    line-height: 1.1 !important;
  }

  .card-3d-date-meta small,
  html#kauzariyya-theme body .card-3d-date-meta small {
    font-size: 9.5px !important;
    letter-spacing: 0.08em !important;
  }

  .card-3d-foot,
  html#kauzariyya-theme body .card-3d-foot {
    margin-top: 14px !important;
    padding-top: 10px !important;
    font-size: 12.5px !important;
  }
}

/* Globally remove green wavy background line from schedule deck box */
.animated-wave-ribbon-bg,
.flowing-sine-wave,
.glowing-wave-path,
.home-schedule-3d-deck svg,
.home-schedule-3d-deck .animated-wave-ribbon-bg {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* ==========================================================================
   GLOBAL 100% UNIFIED NAVBAR SPECIFICATION (Home, Schedule, Review, Scores, etc.)
   ========================================================================== */
@media(min-width: 760px) {
  html body .site-header,
  html body.page-home .site-header,
  html body.page-schedule .site-header,
  html body.page-review .site-header,
  html body.page-scoreboard .site-header,
  html body.page-participants .site-header,
  html body.page-students .site-header,
  html body.page-program-plan .site-header,
  html body:not(.page-admin) .site-header,
  body:not(.page-admin) .site-header,
  body .site-header {
    position: sticky !important;
    top: 12px !important;
    z-index: 1000 !important;
    width: min(1240px, calc(100% - 32px)) !important;
    max-width: 1240px !important;
    min-height: 56px !important;
    height: 56px !important;
    margin: 12px auto 0 !important;
    padding: 6px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 18px !important;
    background: rgba(4, 14, 8, 0.92) !important;
    backdrop-filter: blur(22px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(120%) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    transition: background 0.3s ease, box-shadow 0.3s ease !important;
    transform: none !important;
    overflow: visible !important;
  }

  html body .site-header .site-logo,
  html body.page-schedule .site-header .site-logo,
  html body.page-review .site-header .site-logo,
  html body:not(.page-admin) .site-header .site-logo {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    padding-right: 0 !important;
    text-decoration: none !important;
  }

  html body .site-header .site-logo img {
    width: 36px !important;
    height: 36px !important;
    padding: 3px !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
  }

  html body .site-header .site-nav,
  html body.page-schedule .site-header .site-nav,
  html body.page-review .site-header .site-nav,
  html body:not(.page-admin) .site-header .site-nav {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    margin: 0 auto !important;
    padding: 3px 4px !important;
    border: 1px solid rgba(78, 232, 131, 0.22) !important;
    border-radius: 9999px !important;
    background: rgba(2, 12, 6, 0.85) !important;
    backdrop-filter: blur(16px) !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.06), 0 4px 14px rgba(0, 0, 0, 0.25) !important;
    flex: 0 1 auto !important;
  }

  html body .site-header .site-nav a,
  html body.page-schedule .site-header .site-nav a,
  html body.page-review .site-header .site-nav a,
  html body:not(.page-admin) .site-header .site-nav a {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    padding: 0 12px !important;
    border: 1px solid transparent !important;
    border-radius: 9999px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    background: transparent !important;
    opacity: 1 !important;
    transform: none !important;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  html body .site-header .site-nav a:hover {
    color: #ffffff !important;
    background: rgba(78, 232, 131, 0.14) !important;
    border-color: rgba(78, 232, 131, 0.28) !important;
    transform: translateY(-1px) !important;
  }

  html body .site-header .site-nav a.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #09ae46 0%, #068033 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 16px rgba(9, 174, 70, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  }

  html body .site-header .header-account-actions,
  html body.page-schedule .site-header .header-account-actions,
  html body.page-review .site-header .header-account-actions,
  html body:not(.page-admin) .site-header .header-account-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }

  html body .site-header .festival-date,
  html body.page-schedule .site-header .festival-date,
  html body.page-review .site-header .festival-date {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 4px 10px !important;
    border: 1px solid rgba(78, 232, 131, 0.38) !important;
    border-radius: 12px !important;
    background: rgba(78, 232, 131, 0.08) !important;
    text-align: right !important;
    white-space: nowrap !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html body .site-header .visitor-logout,
  html body .site-header .visitor-logout-floating,
  html body.page-schedule .site-header .visitor-logout-floating,
  html body.page-review .site-header .visitor-logout-floating {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    height: 36px !important;
    padding: 0 12px 0 8px !important;
    border: 1px solid rgba(78, 232, 131, 0.38) !important;
    border-radius: 9999px !important;
    background: rgba(78, 232, 131, 0.1) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    transition: all 0.2s ease !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Ensure main top padding is 0 across all public pages so SiteHeader sits at top: 12px */
html body:not(.page-admin) main {
  padding-top: 0 !important;
}

html body.page-schedule .schedule-head,
html body.page-review .review-shell,
html body.page-participants .participant-shell,
html body.page-students .students-page-hero,
html body.page-musabaqa .musabaqa-plan {
  padding-top: 42px !important;
  margin-top: 14px !important;
}

/* ==========================================================================
   KAUZARIYYA PARTICIPANTS PAGE REDESIGN — CLEAN, MODERN & CRISP UBUNTU STYLE
   ========================================================================== */

/* Page-Wide Ubuntu Typography for Participants Page */
body.page-participants,
body.page-participants *,
html#kauzariyya-theme body.page-participants,
html#kauzariyya-theme body.page-participants * {
  font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

body.page-participants time,
body.page-participants .spotlight-clock,
body.page-participants .participant-call time,
html#kauzariyya-theme body.page-participants time {
  font-family: 'Ubuntu Mono', monospace !important;
}

body.page-participants [lang="ar"],
html#kauzariyya-theme body.page-participants [lang="ar"] {
  font-family: 'Amiri', 'Tajawal', 'Ubuntu', sans-serif !important;
}

/* Page Top Header */
body.page-participants .participant-title h1,
html#kauzariyya-theme body.page-participants .participant-title h1 {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: clamp(36px, 4.8vw, 54px) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
}

body.page-participants .participant-title .overline,
html#kauzariyya-theme body.page-participants .participant-title .overline {
  color: #4ee883 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

/* Overall Page Layout Container */
body.page-participants .participant-stage-layout,
html#kauzariyya-theme body.page-participants .participant-stage-layout {
  display: grid !important;
  grid-template-columns: minmax(350px, 1.1fr) minmax(330px, 1fr) !important;
  gap: 24px !important;
  align-items: start !important;
  margin-top: 16px !important;
}

/* Left Spotlight Live Card */
body.page-participants .participant-spotlight,
html#kauzariyya-theme body.page-participants .participant-spotlight {
  position: relative !important;
  padding: 28px 26px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(78, 232, 131, 0.25) !important;
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(78, 232, 131, 0.1), transparent 65%),
    linear-gradient(165deg, rgba(6, 20, 11, 0.95) 0%, rgba(3, 10, 5, 0.98) 100%) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  overflow: hidden !important;
}

/* Glowing Emerald Left Border Accent */
body.page-participants .participant-spotlight .spotlight-accent,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-accent {
  width: 4px !important;
  background: linear-gradient(180deg, #4ee883 0%, rgba(78, 232, 131, 0.4) 60%, transparent 100%) !important;
  box-shadow: 0 0 16px #4ee883 !important;
  border-radius: 99px !important;
}

/* Spotlight Header Bar */
body.page-participants .participant-spotlight .spotlight-head,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 22px !important;
}

body.page-participants .participant-spotlight .live-label,
html#kauzariyya-theme body.page-participants .participant-spotlight .live-label {
  padding: 5px 14px 5px 10px !important;
  border: 1px solid rgba(78, 232, 131, 0.35) !important;
  border-radius: 999px !important;
  background: rgba(78, 232, 131, 0.12) !important;
  color: #4ee883 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body.page-participants .participant-spotlight .spotlight-clock,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-clock {
  padding: 5px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.45) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  font-family: 'Ubuntu Mono', monospace !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* Hero Content inside Spotlight */
body.page-participants .participant-spotlight .spotlight-program,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-program {
  color: #4ee883 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}

body.page-participants .participant-spotlight .speaker-card-main > h2,
html#kauzariyya-theme body.page-participants .participant-spotlight .speaker-card-main > h2 {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: clamp(30px, 3.8vw, 44px) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.015em !important;
  margin: 0 0 16px !important;
}

/* Identifier Pills Row */
body.page-participants .participant-spotlight .spotlight-tags,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-tags {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-bottom: 22px !important;
}

body.page-participants .participant-spotlight .spotlight-tags > span,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-tags > span {
  padding: 5px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.35) !important;
  color: #e0e0e0 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

body.page-participants .participant-spotlight .spotlight-tags > b[lang="ar"],
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-tags > b[lang="ar"] {
  padding: 4px 16px !important;
  border: 1px solid rgba(78, 232, 131, 0.35) !important;
  border-radius: 999px !important;
  background: rgba(78, 232, 131, 0.12) !important;
  color: #4ee883 !important;
  font-family: 'Amiri', 'Ubuntu', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* 3-Column Stats Grid */
body.page-participants .participant-spotlight .spotlight-stats,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  margin-top: 20px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

body.page-participants .participant-spotlight .spotlight-stat,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-stat {
  padding: 12px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  background: rgba(0, 0, 0, 0.38) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

body.page-participants .participant-spotlight .spotlight-stat span,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-stat span {
  color: rgba(255, 255, 255, 0.45) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

body.page-participants .participant-spotlight .spotlight-stat strong,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-stat strong {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* Up Next Bottom Cue */
body.page-participants .participant-spotlight .spotlight-up-next,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-up-next {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-top: 18px !important;
  padding: 12px 16px !important;
  border: 1px solid rgba(244, 201, 115, 0.25) !important;
  border-radius: 14px !important;
  background: rgba(244, 201, 115, 0.05) !important;
}

body.page-participants .participant-spotlight .spotlight-next-order,
html#kauzariyya-theme body.page-participants .participant-spotlight .spotlight-next-order {
  width: 30px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(244, 201, 115, 0.35) !important;
  border-radius: 50% !important;
  background: rgba(244, 201, 115, 0.15) !important;
  color: #f4c973 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

body.page-participants .participant-spotlight .up-next-label,
html#kauzariyya-theme body.page-participants .participant-spotlight .up-next-label {
  padding: 3px 8px !important;
  border-radius: 6px !important;
  background: rgba(244, 201, 115, 0.18) !important;
  color: #f4c973 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* Right Running Order Panel */
body.page-participants .participant-list,
html#kauzariyya-theme body.page-participants .participant-list {
  padding: 26px 24px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  background: rgba(4, 14, 8, 0.85) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

body.page-participants .participant-list-head h2,
html#kauzariyya-theme body.page-participants .participant-list-head h2 {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

body.page-participants .participant-list-head strong,
html#kauzariyya-theme body.page-participants .participant-list-head strong {
  padding: 5px 14px !important;
  border: 1px solid rgba(78, 232, 131, 0.3) !important;
  border-radius: 999px !important;
  background: rgba(78, 232, 131, 0.12) !important;
  color: #4ee883 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* Roster Rows */
body.page-participants .participant-row,
html#kauzariyya-theme body.page-participants .participant-row {
  border-radius: 14px !important;
  padding: 12px 16px !important;
  margin: 8px 0 !important;
  font-family: 'Ubuntu', sans-serif !important;
}

body.page-participants .participant-row .participant-person strong,
html#kauzariyya-theme body.page-participants .participant-row .participant-person strong {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

body.page-participants .participant-row .participant-person small,
html#kauzariyya-theme body.page-participants .participant-row .participant-person small {
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

body.page-participants .participant-row.is-live,
html#kauzariyya-theme body.page-participants .participant-row.is-live {
  border: 1px solid rgba(78, 232, 131, 0.45) !important;
  background: rgba(78, 232, 131, 0.1) !important;
}

body.page-participants .participant-row.is-live .participant-order,
html#kauzariyya-theme body.page-participants .participant-row.is-live .participant-order {
  background: #36d96b !important;
  color: #040e08 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
}

body.page-participants .participant-row.is-next,
html#kauzariyya-theme body.page-participants .participant-row.is-next {
  border: 1px solid rgba(230, 160, 40, 0.35) !important;
  background: rgba(230, 160, 40, 0.05) !important;
}

body.page-participants .participant-row.is-next .participant-order,
html#kauzariyya-theme body.page-participants .participant-row.is-next .participant-order {
  border: 1px solid rgba(230, 160, 40, 0.35) !important;
  background: rgba(230, 160, 40, 0.18) !important;
  color: #e6a028 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
}

/* Footer Social Icons — ONLY Pure Original Brand Colors, NO Background Box, NO Border, NO Shadow, NO Animations */
.simple-social-icons,
.home-institution-footer .simple-social-icons {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.simple-social-icons a,
.home-institution-footer .simple-social-icons a,
.social-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  padding: 4px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  animation: none !important;
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
}

.simple-social-icons a::before,
.simple-social-icons a::after,
.social-link::before,
.social-link::after {
  display: none !important;
  content: none !important;
}

/* Preserved SVG native brand colors and gradients */

.simple-social-icons a:hover,
.home-institution-footer .simple-social-icons a:hover,
.social-link:hover {
  animation: none !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
  background: transparent !important;
  opacity: 1 !important;
}

/* Scoreboard Header Outside Container Box */
body.page-scoreboard .scoreboard-box-header,
.scoreboard-box-header {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 28px !important;
  margin-bottom: 32px !important;
  padding: 0 4px !important;
}

body.page-scoreboard .scoreboard-container-box,
.scoreboard-container-box {
  padding: clamp(24px, 4vw, 40px) !important;
  border-radius: 28px !important;
}

/* ==========================================================================
   Heading Typography Upgrade & Selective Emerald Glow
   ========================================================================== */

/* 1. Global Powerful Geometric Sans Headings */
h1, h2, h3, h4, h5, h6,
.home-redesign-copy h1,
.schedule-head h1,
.participant-title h1,
.students-page-hero h1,
.leaderboard-header h1,
.review-copy h1,
.scoreboard-box-header h1,
.home-footer-identity h2 {
  font-family: 'Ubuntu', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
}

h1,
.home-redesign-copy h1,
.schedule-head h1,
.participant-title h1,
.students-page-hero h1 {
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
}

/* 2. Selective Soft Green Glow on GREEN Headings / Green Highlights Only (Reduced Intensity) */
h1 em, h2 em, h3 em, h4 em,
.home-redesign-copy h1 em,
.schedule-head h1 em,
.participant-title h1 em,
.students-page-hero h1 em,
.leaderboard-header h1 em,
.review-copy h1 em,
.home-institution-footer .home-footer-identity h2 em,
body.page-scoreboard .leaderboard-header h1 em,
.overline-dot + span,
span.green-text-glow,
em.green-text-glow {
  color: #4ee883 !important;
  text-shadow: 0 0 8px rgba(78, 232, 131, 0.24), 0 0 18px rgba(78, 232, 131, 0.12) !important;
}

/* All Page Headings Ubuntu font-family style */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
header h1, header h2, header h3,
section h1, section h2, section h3,
article h1, article h2, article h3,
.hero-title, .section-heading, .page-heading, .card-title, .modal-title {
  font-family: 'Ubuntu', sans-serif !important;
}

/* ==========================================================================
   KAUZARIYYA ULTIMATE PARTICIPANTS PAGE & TEAM SETUP ROSTER REDESIGN
   ========================================================================== */

/* 1. Team Setup Filter Bar (Clean Floating Team Pills on Students Page) */
.all-students-page .student-directory-head,
body.page-students .student-directory-head {
  border-bottom: none !important;
}

.team-filter-bar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 4px !important;
  margin-bottom: 18px !important;
  padding: 12px 28px !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.team-filter-label {
  display: none !important;
}

.team-filter-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
}

.team-filter-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 20px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(8, 22, 14, 0.7) !important;
  color: #e2e8f0 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.team-filter-pill:hover {
  border-color: rgba(78, 232, 131, 0.45) !important;
  background: rgba(78, 232, 131, 0.12) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}

.team-filter-pill.active {
  border-color: var(--team-pill-color, #4ee883) !important;
  background: linear-gradient(135deg, rgba(78, 232, 131, 0.22) 0%, rgba(78, 232, 131, 0.08) 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(78, 232, 131, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.team-filter-pill small {
  padding: 3px 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.team-filter-pill.active small {
  background: var(--team-pill-color, #4ee883) !important;
  color: #04100a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Hide old modal trigger buttons cleanly if any remain */
.group-modal-trigger-btn {
  display: none !important;
}

/* 2. Modern Kauzariyya Participants Page Layout & Box Design */
body.page-participants .participant-directory-page,
html#kauzariyya-theme body.page-participants .participant-directory-page {
  padding-top: 10px !important;
}

body.page-participants .participant-stage-layout,
html#kauzariyya-theme body.page-participants .participant-stage-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) !important;
  gap: 28px !important;
  align-items: start !important;
}

@media (max-width: 1024px) {
  body.page-participants .participant-stage-layout,
  html#kauzariyya-theme body.page-participants .participant-stage-layout {
    grid-template-columns: 1fr !important;
  }
}

/* Left Card: Live Desk Spotlight (First In Queue Box) */
body.page-participants .participant-live-card,
html#kauzariyya-theme body.page-participants .participant-live-card {
  position: relative !important;
  overflow: hidden !important;
  padding: 32px 28px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(78, 232, 131, 0.28) !important;
  background: linear-gradient(155deg, rgba(8, 28, 18, 0.96) 0%, rgba(3, 14, 9, 0.98) 100%) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(78, 232, 131, 0.2), 0 0 45px rgba(78, 232, 131, 0.08) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

body.page-participants .participant-live-card:hover {
  border-color: rgba(78, 232, 131, 0.45) !important;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(78, 232, 131, 0.3), 0 0 55px rgba(78, 232, 131, 0.16) !important;
}

/* Glowing Accent Bar on Left Edge */
body.page-participants .participant-live-card::before,
html#kauzariyya-theme body.page-participants .participant-live-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 5px !important;
  background: linear-gradient(180deg, #4ee883 0%, #36d96b 50%, #389cf5 100%) !important;
  box-shadow: 0 0 16px rgba(78, 232, 131, 0.8) !important;
  border-radius: 4px 0 0 4px !important;
}

/* Header Bar */
body.page-participants .spotlight-head,
html#kauzariyya-theme body.page-participants .spotlight-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 24px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.page-participants .spotlight-head .live-label,
html#kauzariyya-theme body.page-participants .spotlight-head .live-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(78, 232, 131, 0.35) !important;
  background: rgba(78, 232, 131, 0.12) !important;
  color: #4ee883 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body.page-participants .spotlight-head .live-pulse,
html#kauzariyya-theme body.page-participants .spotlight-head .live-pulse {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #36d96b !important;
  box-shadow: 0 0 10px #36d96b !important;
}

body.page-participants .spotlight-clock,
html#kauzariyya-theme body.page-participants .spotlight-clock {
  padding: 6px 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(0, 0, 0, 0.45) !important;
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

/* Hero Section */
body.page-participants .spotlight-program-tag,
html#kauzariyya-theme body.page-participants .spotlight-program-tag {
  display: inline-block !important;
  margin-bottom: 8px !important;
  color: #4ee883 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

body.page-participants .spotlight-hero h2,
html#kauzariyya-theme body.page-participants .spotlight-hero h2 {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: clamp(26px, 3.5vw, 36px) !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.03em !important;
  margin: 0 0 16px 0 !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6) !important;
}

body.page-participants .spotlight-tags,
html#kauzariyya-theme body.page-participants .spotlight-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 24px !important;
}

body.page-participants .spotlight-tags > span,
html#kauzariyya-theme body.page-participants .spotlight-tags > span {
  padding: 6px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(0, 0, 0, 0.35) !important;
  color: #e2e8f0 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

body.page-participants .spotlight-tags .badge-team,
html#kauzariyya-theme body.page-participants .spotlight-tags .badge-team {
  border-color: rgba(78, 232, 131, 0.4) !important;
  background: rgba(78, 232, 131, 0.14) !important;
  color: #4ee883 !important;
  font-family: 'Amiri', 'Ubuntu', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* 3-Column Key Info Grid */
body.page-participants .spotlight-stats,
html#kauzariyya-theme body.page-participants .spotlight-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 24px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

body.page-participants .spotlight-stat,
html#kauzariyya-theme body.page-participants .spotlight-stat {
  padding: 14px 16px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  transition: border-color 0.2s ease, transform 0.2s ease !important;
}

body.page-participants .spotlight-stat:hover {
  border-color: rgba(78, 232, 131, 0.28) !important;
  transform: translateY(-1px) !important;
}

body.page-participants .spotlight-stat span,
html#kauzariyya-theme body.page-participants .spotlight-stat span {
  color: rgba(255, 255, 255, 0.45) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

body.page-participants .spotlight-stat strong,
html#kauzariyya-theme body.page-participants .spotlight-stat strong {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

/* Up Next Card */
body.page-participants .spotlight-up-next,
html#kauzariyya-theme body.page-participants .spotlight-up-next {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 14px 18px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(244, 201, 115, 0.3) !important;
  background: linear-gradient(90deg, rgba(244, 201, 115, 0.08) 0%, rgba(244, 201, 115, 0.03) 100%) !important;
}

body.page-participants .spotlight-next-order,
html#kauzariyya-theme body.page-participants .spotlight-next-order {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  border: 1px solid rgba(244, 201, 115, 0.4) !important;
  background: rgba(244, 201, 115, 0.18) !important;
  color: #f4c973 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

body.page-participants .up-next-label,
html#kauzariyya-theme body.page-participants .up-next-label {
  padding: 4px 10px !important;
  border-radius: 8px !important;
  background: rgba(244, 201, 115, 0.2) !important;
  color: #f4c973 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body.page-participants .spotlight-next-copy strong,
html#kauzariyya-theme body.page-participants .spotlight-next-copy strong {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  display: block !important;
}

body.page-participants .spotlight-next-copy small,
html#kauzariyya-theme body.page-participants .spotlight-next-copy small {
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11px !important;
}

body.page-participants .spotlight-up-next time,
html#kauzariyya-theme body.page-participants .spotlight-up-next time {
  color: #f4c973 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

/* Right Card: Running Order Panel Box */
body.page-participants .participant-list,
html#kauzariyya-theme body.page-participants .participant-list {
  padding: 28px 26px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(4, 16, 10, 0.92) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

body.page-participants .participant-list-head,
html#kauzariyya-theme body.page-participants .participant-list-head {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.page-participants .participant-list-head .overline,
html#kauzariyya-theme body.page-participants .participant-list-head .overline {
  color: #4ee883 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

body.page-participants .participant-list-head h2,
html#kauzariyya-theme body.page-participants .participant-list-head h2 {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  margin: 0 !important;
}

body.page-participants .scheduled-badge,
html#kauzariyya-theme body.page-participants .scheduled-badge {
  padding: 6px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(78, 232, 131, 0.35) !important;
  background: rgba(78, 232, 131, 0.12) !important;
  color: #4ee883 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
}

/* Controls */
body.page-participants .participant-roster-controls,
html#kauzariyya-theme body.page-participants .participant-roster-controls {
  display: flex !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}

@media (max-width: 640px) {
  body.page-participants .participant-roster-controls,
  html#kauzariyya-theme body.page-participants .participant-roster-controls {
    flex-direction: column !important;
  }
}

body.page-participants .participant-search,
html#kauzariyya-theme body.page-participants .participant-search {
  position: relative !important;
  flex: 1 !important;
}

body.page-participants .participant-search input,
html#kauzariyya-theme body.page-participants .participant-search input {
  width: 100% !important;
  padding: 12px 42px 12px 16px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(0, 0, 0, 0.45) !important;
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 13px !important;
  outline: none !important;
  transition: border-color 0.2s ease !important;
}

body.page-participants .participant-search input:focus,
html#kauzariyya-theme body.page-participants .participant-search input:focus {
  border-color: rgba(78, 232, 131, 0.5) !important;
  box-shadow: 0 0 12px rgba(78, 232, 131, 0.15) !important;
}

body.page-participants .participant-search button,
html#kauzariyya-theme body.page-participants .participant-search button {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.5) !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
}

body.page-participants .participant-search button svg {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  fill: none !important;
}

body.page-participants .participant-program-filter,
html#kauzariyya-theme body.page-participants .participant-program-filter {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.page-participants .participant-program-filter span,
html#kauzariyya-theme body.page-participants .participant-program-filter span {
  color: rgba(255, 255, 255, 0.45) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* Roster Scroll List */
body.page-participants .participant-results-scroll,
html#kauzariyya-theme body.page-participants .participant-results-scroll {
  max-height: 480px !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
}

body.page-participants .participant-results-scroll::-webkit-scrollbar {
  width: 6px !important;
}

body.page-participants .participant-results-scroll::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3) !important;
  border-radius: 999px !important;
}

body.page-participants .participant-results-scroll::-webkit-scrollbar-thumb {
  background: rgba(78, 232, 131, 0.3) !important;
  border-radius: 999px !important;
}

body.page-participants .participant-results-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(78, 232, 131, 0.6) !important;
}

/* Roster Item Rows */
body.page-participants .participant-row,
html#kauzariyya-theme body.page-participants .participant-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 14px 18px !important;
  margin-bottom: 10px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.025) !important;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

body.page-participants .participant-row:hover,
html#kauzariyya-theme body.page-participants .participant-row:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(78, 232, 131, 0.25) !important;
  transform: translateX(2px) !important;
}

body.page-participants .participant-row .participant-order,
html#kauzariyya-theme body.page-participants .participant-row .participant-order {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body.page-participants .participant-row .participant-person,
html#kauzariyya-theme body.page-participants .participant-row .participant-person {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

body.page-participants .participant-row .participant-person strong,
html#kauzariyya-theme body.page-participants .participant-row .participant-person strong {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

body.page-participants .participant-row .participant-person small,
html#kauzariyya-theme body.page-participants .participant-row .participant-person small {
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

body.page-participants .participant-row .participant-call,
html#kauzariyya-theme body.page-participants .participant-row .participant-call {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 4px !important;
}

body.page-participants .participant-row .participant-call time,
html#kauzariyya-theme body.page-participants .participant-row .participant-call time {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

body.page-participants .participant-row .state-pill,
html#kauzariyya-theme body.page-participants .participant-row .state-pill {
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* First Place Row (is-live) */
body.page-participants .participant-row.is-live,
html#kauzariyya-theme body.page-participants .participant-row.is-live {
  border: 1px solid rgba(78, 232, 131, 0.55) !important;
  background: linear-gradient(90deg, rgba(78, 232, 131, 0.18) 0%, rgba(78, 232, 131, 0.05) 100%) !important;
  box-shadow: 0 6px 20px rgba(78, 232, 131, 0.15) !important;
}

body.page-participants .participant-row.is-live .participant-order,
html#kauzariyya-theme body.page-participants .participant-row.is-live .participant-order {
  background: #36d96b !important;
  border-color: #36d96b !important;
  color: #04100a !important;
  font-weight: 900 !important;
  box-shadow: 0 0 10px rgba(54, 217, 107, 0.4) !important;
}

body.page-participants .participant-row.is-live .participant-call time,
html#kauzariyya-theme body.page-participants .participant-row.is-live .participant-call time {
  color: #4ee883 !important;
}

body.page-participants .participant-row.is-live .state-pill.state-is-live,
html#kauzariyya-theme body.page-participants .participant-row.is-live .state-pill.state-is-live {
  background: #36d96b !important;
  color: #04100a !important;
  font-weight: 900 !important;
}

/* Second Place Row (is-next) */
body.page-participants .participant-row.is-next,
html#kauzariyya-theme body.page-participants .participant-row.is-next {
  border: 1px solid rgba(244, 201, 115, 0.45) !important;
  background: linear-gradient(90deg, rgba(244, 201, 115, 0.14) 0%, rgba(244, 201, 115, 0.04) 100%) !important;
}

body.page-participants .participant-row.is-next .participant-order,
html#kauzariyya-theme body.page-participants .participant-row.is-next .participant-order {
  border: 1px solid rgba(244, 201, 115, 0.4) !important;
  background: rgba(244, 201, 115, 0.2) !important;
  color: #f4c973 !important;
  font-weight: 800 !important;
}

body.page-participants .participant-row.is-next .state-pill.state-is-next,
html#kauzariyya-theme body.page-participants .participant-row.is-next .state-pill.state-is-next {
  border: 1px solid rgba(244, 201, 115, 0.4) !important;
  background: rgba(244, 201, 115, 0.18) !important;
  color: #f4c973 !important;
}

/* Waiting / Scheduled Rows */
body.page-participants .participant-row.is-waiting .state-pill.state-is-waiting,
html#kauzariyya-theme body.page-participants .participant-row.is-waiting .state-pill.state-is-waiting {
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Social Icons - Clean Transparent Background-Free Vector Icons */
.simple-social-icons a,
.home-institution-footer .simple-social-icons a,
body.page-home .home-institution-footer .simple-social-icons a,
body.page-review .home-institution-footer .simple-social-icons a,
.social-link,
.x-social {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

.simple-social-icons a::before,
.simple-social-icons a::after,
.social-link::before,
.social-link::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.simple-social-icons a svg circle[fill="#000000"],
.simple-social-icons a svg circle[fill="#000"],
.simple-social-icons a.x-social svg circle,
.x-social svg circle {
  display: none !important;
}

/* Redesigned Participants Page - Modern Sleek UI Extensions */

/* Category Filter Tabs */
.participant-category-tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 28px 0;
  flex-wrap: wrap;
}

.cat-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Ubuntu', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.cat-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  transform: translateY(-1px);
}

.cat-tab.active {
  background: rgba(78, 232, 131, 0.14);
  border-color: rgba(78, 232, 131, 0.45);
  color: #4ee883;
  box-shadow: 0 4px 16px rgba(78, 232, 131, 0.15);
}

.cat-tab .cat-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-weight: 600;
}

.cat-tab.active .cat-count {
  background: rgba(78, 232, 131, 0.25);
  color: #4ee883;
}

/* Header Summary Pills */
body.page-participants .participant-page-summary {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.summary-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
}

.summary-pill strong {
  color: #4ee883;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
}

.summary-pill small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Spotlight Header Status Group & Reset Button */
.spotlight-status-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.spotlight-head .live-label.is-viewing {
  border-color: rgba(56, 156, 245, 0.45) !important;
  background: rgba(56, 156, 245, 0.15) !important;
  color: #389cf5 !important;
}

.spotlight-head .live-label.is-viewing .live-pulse {
  background: #389cf5 !important;
  box-shadow: 0 0 10px #389cf5 !important;
/* High-Priority Ultra-Modern Glassmorphic Redesign Overrides for Participants Page */

/* Containers: Spotlight Card & Running Order Panel */
body.page-participants .participant-live-card,
html#kauzariyya-theme body.page-participants .participant-live-card,
body.page-participants .participant-list,
html#kauzariyya-theme body.page-participants .participant-list {
  border-radius: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: linear-gradient(150deg, rgba(14, 22, 18, 0.85) 0%, rgba(9, 15, 12, 0.92) 100%) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 40px rgba(78, 232, 131, 0.03) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

body.page-participants .participant-live-card::before,
html#kauzariyya-theme body.page-participants .participant-live-card::before {
  width: 3px !important;
  background: linear-gradient(180deg, #4ee883 0%, rgba(56, 156, 245, 0.7) 100%) !important;
  box-shadow: 0 0 12px rgba(78, 232, 131, 0.6) !important;
  border-radius: 3px 0 0 3px !important;
}

body.page-participants .participant-live-card::after,
html#kauzariyya-theme body.page-participants .participant-live-card::after {
  opacity: 0.1 !important;
  border-color: rgba(78, 232, 131, 0.08) !important;
}

/* Header & Status Labels */
body.page-participants .spotlight-head,
html#kauzariyya-theme body.page-participants .spotlight-head {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  padding-bottom: 18px !important;
}

body.page-participants .live-label,
html#kauzariyya-theme body.page-participants .live-label {
  padding: 5px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(78, 232, 131, 0.3) !important;
  background: rgba(78, 232, 131, 0.1) !important;
  color: #4ee883 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
}

body.page-participants .spotlight-clock {
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  letter-spacing: 0.04em !important;
}

/* Main Hero Typography & Program Pill */
body.page-participants .spotlight-program-tag {
  display: inline-block !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(78, 232, 131, 0.25) !important;
  background: rgba(78, 232, 131, 0.08) !important;
  color: #4ee883 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
}

body.page-participants .speaker-card-main > h2 {
  font-size: clamp(40px, 4.8vw, 64px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
  color: #ffffff !important;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Tags / Badges below name */
body.page-participants .spotlight-tags {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 16px !important;
  flex-wrap: wrap !important;
}

body.page-participants .badge-category,
body.page-participants .badge-code,
body.page-participants .badge-team {
  padding: 6px 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

body.page-participants .badge-team {
  border-color: rgba(78, 232, 131, 0.2) !important;
  background: rgba(78, 232, 131, 0.06) !important;
  color: #4ee883 !important;
}

/* Details Cue Board (3 Stat Cards) */
body.page-participants .participant-live-card > .speaker-cue-board {
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border-radius: 18px !important;
  padding: 4px !important;
  gap: 4px !important;
}

body.page-participants .speaker-cue-board > div,
body.page-participants .spotlight-stat {
  padding: 16px 18px !important;
  border-radius: 14px !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
}

body.page-participants .speaker-cue-board span,
body.page-participants .spotlight-stat span {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

body.page-participants .speaker-cue-board strong,
body.page-participants .spotlight-stat strong {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin-top: 4px !important;
}

/* Up Next Banner */
body.page-participants .participant-live-card > .up-next-cue {
  border: 1px solid rgba(244, 201, 115, 0.2) !important;
  background: linear-gradient(90deg, rgba(244, 201, 115, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
  border-radius: 18px !important;
  padding: 14px 18px !important;
  margin-top: 16px !important;
}

body.page-participants .up-next-label {
  background: rgba(244, 201, 115, 0.15) !important;
  color: #f4c973 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
}

/* Right Panel: Search Controls */
body.page-participants .participant-roster-controls .participant-search {
  height: 48px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

body.page-participants .participant-roster-controls .participant-search input {
  font-size: 13px !important;
  color: #ffffff !important;
}

body.page-participants .participant-roster-controls .participant-search input::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

body.page-participants .participant-roster-controls .participant-program-filter select {
  height: 48px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background-color: rgba(255, 255, 255, 0.035) !important;
  font-size: 12px !important;
  color: #ffffff !important;
}

/* Running Order Roster Items */
body.page-participants .participant-row {
  min-height: 64px !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: rgba(255, 255, 255, 0.025) !important;
  margin-bottom: 8px !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

body.page-participants .participant-row:hover {
  border-color: rgba(78, 232, 131, 0.35) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

body.page-participants .participant-row.is-live,
body.page-participants .participant-row.active {
  border-color: rgba(78, 232, 131, 0.55) !important;
  background: linear-gradient(90deg, rgba(78, 232, 131, 0.14) 0%, rgba(78, 232, 131, 0.02) 100%) !important;
  box-shadow: 0 4px 20px rgba(78, 232, 131, 0.12), inset 3px 0 0 #4ee883 !important;
}

body.page-participants .participant-order {
  width: 36px !important;
  height: 36px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body.page-participants .participant-row.is-live .participant-order {
  border-color: rgba(78, 232, 131, 0.5) !important;
  background: rgba(78, 232, 131, 0.2) !important;
  color: #4ee883 !important;
}

body.page-participants .participant-row.is-next .participant-order {
  border-color: rgba(244, 201, 115, 0.5) !important;
  background: rgba(244, 201, 115, 0.2) !important;
  color: #f4c973 !important;
}

body.page-participants .participant-person > strong {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

body.page-participants .participant-person > small {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

body.page-participants .participant-call time {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body.page-participants .state-pill.state-is-live {
  background: rgba(78, 232, 131, 0.15) !important;
  color: #4ee883 !important;
  border: 1px solid rgba(78, 232, 131, 0.35) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
}

body.page-participants .state-pill.state-is-next {
  background: rgba(244, 201, 115, 0.15) !important;
  color: #f4c973 !important;
  border: 1px solid rgba(244, 201, 115, 0.35) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
}

body.page-participants .state-pill.state-is-waiting {
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
}

/* ==========================================================================
   ULTIMATE MOBILE RESPONSIVE DESIGN OVERHAUL (Navbar, Date, Signout & Headings)
   ========================================================================== */

@media (max-width: 768px) {
  /* 1. Main Content Layout Top Padding Fix for Fixed Header */
  html body:not(.page-admin) main {
    padding-top: 80px !important;
  }

  html body.page-scoreboard .scoreboard-experience,
  html body.page-participants .participant-shell,
  html body.page-schedule .schedule-shell,
  html body.page-students .all-students-page,
  html body.page-review .review-shell,
  html body.page-program-plan .program-plan-shell,
  html body.page-home .home-shell {
    padding-top: 32px !important;
    margin-top: 0 !important;
  }

  /* 2. Top Header Bar Mobile Fit & Zero Overflow Clipping */
  html body .site-header,
  html body.page-home .site-header,
  html body.page-scoreboard .site-header,
  html body.page-participants .site-header,
  html body.page-schedule .site-header,
  html body.page-students .site-header,
  html body.page-review .site-header,
  html body:not(.page-admin) .site-header,
  body .site-header {
    position: fixed !important;
    top: 8px !important;
    left: 0 !important;
    right: 0 !important;
    width: calc(100% - 16px) !important;
    max-width: 580px !important;
    min-height: 46px !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 6px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    border: 1px solid rgba(78, 232, 131, 0.3) !important;
    border-radius: 16px !important;
    background: rgba(4, 14, 8, 0.95) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    z-index: 2000 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Logo Sizing on Mobile */
  html body .site-logo,
  body .site-logo {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 50% !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .site-logo img,
  body .site-logo img {
    width: 28px !important;
    height: 28px !important;
    padding: 2px !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
  }

  html body .site-logo span b,
  body .site-logo span b {
    display: block !important;
    color: #ffffff !important;
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 120px !important;
  }

  html body .site-logo span small,
  body .site-logo span small {
    display: none !important;
  }

  /* Header Account Actions Container (Date + Signout Pill) */
  html body .site-header .header-account-actions,
  html body:not(.page-admin) .site-header .header-account-actions,
  body .header-account-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    max-width: 55% !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Festival Date Box Sizing on Mobile */
  html body .site-header .festival-date,
  body .festival-date {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 2px 7px !important;
    border: 1px solid rgba(78, 232, 131, 0.35) !important;
    border-radius: 9px !important;
    background: rgba(78, 232, 131, 0.08) !important;
    text-align: right !important;
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html body .site-header .festival-date span,
  body .festival-date span {
    display: block !important;
    font-size: 6px !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
  }

  html body .site-header .festival-date b,
  body .festival-date b {
    display: block !important;
    font-size: 9px !important;
    color: #4ee883 !important;
    font-weight: 800 !important;
    font-family: 'Ubuntu Mono', monospace !important;
    line-height: 1.1 !important;
    margin-top: 1px !important;
    white-space: nowrap !important;
  }

  /* Sign Out Button Sizing on Mobile (Icon-Only Circular Button) */
  html body .site-header .visitor-logout,
  html body .site-header .visitor-logout-floating,
  body .visitor-logout,
  body .visitor-logout-floating {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    gap: 0 !important;
    border: 1px solid rgba(78, 232, 131, 0.4) !important;
    border-radius: 50% !important;
    background: rgba(78, 232, 131, 0.12) !important;
    color: #ffffff !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  }

  html body .site-header .visitor-logout span.logout-icon,
  body .visitor-logout-floating span.logout-icon {
    display: grid !important;
    place-items: center !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: rgba(78, 232, 131, 0.2) !important;
    border: 1px solid rgba(78, 232, 131, 0.35) !important;
    color: #4ee883 !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .site-header .visitor-logout span.logout-icon svg,
  body .visitor-logout-floating span.logout-icon svg {
    width: 11px !important;
    height: 11px !important;
    stroke: #4ee883 !important;
    stroke-width: 2.4 !important;
    fill: none !important;
  }

  html body .site-header .visitor-logout .logout-copy,
  html body .site-header .visitor-logout-floating .logout-copy,
  body .visitor-logout .logout-copy,
  body .visitor-logout-floating .logout-copy,
  html body .site-header .visitor-logout .logout-copy strong,
  body .visitor-logout-floating .logout-copy strong {
    display: none !important;
  }

  /* 3. Mobile Page Headings & Typography (Scoreboard, Participants, Schedule, etc.) */
  .scoreboard-box-header,
  .participant-title,
  .schedule-head,
  .students-page-hero,
  .review-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin: 0 0 20px 0 !important;
    padding: 0 0 16px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .scoreboard-live-badge,
  .participant-heading-copy .overline,
  .schedule-head .overline,
  .students-page-hero .overline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 12px !important;
    border: 1px solid rgba(78, 232, 131, 0.35) !important;
    border-radius: 999px !important;
    background: rgba(78, 232, 131, 0.12) !important;
    color: #4ee883 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    margin-bottom: 2px !important;
  }

  .scoreboard-live-badge i,
  .overline-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #4ee883 !important;
    box-shadow: 0 0 10px #4ee883 !important;
    display: inline-block !important;
  }

  .scoreboard-box-title,
  .participant-heading-copy h1,
  .schedule-head h1,
  .students-page-hero h1,
  .review-head h1 {
    font: 900 clamp(54px, 6.8vw, 84px)/0.94 "Ubuntu", sans-serif !important;
    letter-spacing: -0.035em !important;
    color: #ffffff !important;
    margin: 4px 0 !important;
  }

  .scoreboard-box-title .title-accent,
  .participant-heading-copy h1 em,
  .schedule-head h1 em,
  .students-page-hero h1 em {
    background: linear-gradient(135deg, #4ee883 0%, #a8ffc4 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    font-style: normal !important;
    text-shadow: 0 0 20px rgba(78, 232, 131, 0.2) !important;
  }

  .scoreboard-box-subtitle,
  .participant-heading-copy p,
  .schedule-head p,
  .students-page-hero p {
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: rgba(238, 247, 240, 0.72) !important;
    margin: 0 !important;
    max-width: 44ch !important;
  }
}

/* 4. Ultra-Compact Mobile Screens (< 380px) Sizing Guarantee */
@media (max-width: 380px) {
  html body .site-header,
  body .site-header {
    width: calc(100% - 12px) !important;
    padding: 5px 8px !important;
    gap: 4px !important;
  }

  html body .site-logo span b,
  body .site-logo span b {
    max-width: 90px !important;
    font-size: 10px !important;
  }

  html body .site-header .festival-date,
  body .festival-date {
    padding: 2px 5px !important;
  }

  html body .site-header .festival-date span,
  body .festival-date span {
    font-size: 5.5px !important;
  }

  html body .site-header .festival-date b,
  body .festival-date b {
    font-size: 8px !important;
  }

  html body .site-header .visitor-logout,
  body .visitor-logout-floating {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 50% !important;
  }

  html body .site-header .visitor-logout .logout-copy,
  body .visitor-logout-floating .logout-copy,
  html body .site-header .visitor-logout .logout-copy strong,
  body .visitor-logout-floating .logout-copy strong {
    display: none !important;
  }
}

/* Premium Modern Welcome Badge Pill Redesign */
.home-visitor-greeting-card,
body.page-home .home-visitor-greeting-card,
.home-visitor-greeting,
body.page-home .home-visitor-greeting {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 0 24px 0 !important;
  padding: 8px 18px 8px 14px !important;
  border-radius: 999px !important;
  border: 1.5px solid rgba(78, 232, 131, 0.4) !important;
  background: linear-gradient(135deg, rgba(12, 28, 18, 0.95) 0%, rgba(4, 14, 8, 0.98) 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 0 24px rgba(78, 232, 131, 0.15) !important;
  white-space: nowrap !important;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.home-visitor-greeting-card:hover,
body.page-home .home-visitor-greeting:hover {
  border-color: rgba(78, 232, 131, 0.65) !important;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 0 32px rgba(78, 232, 131, 0.25) !important;
  transform: translateY(-1px) !important;
}

.home-visitor-greeting-card .greeting-live-dot,
.home-visitor-greeting .greeting-live-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #4ee883 !important;
  box-shadow: 0 0 10px #4ee883, 0 0 18px rgba(78, 232, 131, 0.7) !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

.home-visitor-greeting-card .greeting-label,
.home-visitor-greeting .greeting-label {
  color: rgba(238, 247, 240, 0.75) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-right: 2px !important;
}

.home-visitor-greeting-card .greeting-user-name,
.home-visitor-greeting-card strong,
.home-visitor-greeting strong {
  color: #4ee883 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 16px rgba(78, 232, 131, 0.3) !important;
  margin-right: 4px !important;
}

.home-visitor-greeting-card .greeting-role-badge,
.home-visitor-greeting-card .visitor-role-pill,
.home-visitor-greeting .visitor-role-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 13px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(78, 232, 131, 0.45) !important;
  background: linear-gradient(135deg, rgba(78, 232, 131, 0.2), rgba(78, 232, 131, 0.08)) !important;
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: lowercase !important;
  margin-left: 6px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Full-Screen Pure Intro Video Experience */
.video-intro-screen,
html body .video-intro-screen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #000000 !important;
  opacity: 1 !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.video-intro-screen.is-fading {
  opacity: 0 !important;
  transform: scale(1.02) !important;
  pointer-events: none !important;
}

.video-intro-player {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  background: #000000 !important;
}

.video-intro-overlay {
  position: absolute !important;
  top: 24px !important;
  left: 24px !important;
  z-index: 10000000 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.video-intro-sound-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.video-intro-sound-toggle:hover {
  background: rgba(78, 232, 131, 0.2) !important;
  border-color: rgba(78, 232, 131, 0.45) !important;
  color: #4ee883 !important;
}

.video-intro-skip {
  position: fixed !important;
  bottom: 28px !important;
  right: 28px !important;
  z-index: 10000000 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.video-intro-skip:hover {
  background: rgba(78, 232, 131, 0.25) !important;
  border-color: #4ee883 !important;
  color: #4ee883 !important;
  transform: translateY(-2px) !important;
}

/* Guarantee 100% web content isolation while intro video or signup gate is active */
body:has(.video-intro-screen) .site-header,
body:has(.video-intro-screen) .site-footer,
body:has(.video-intro-screen) .mobile-tabbar,
body:has(.video-intro-screen) main > *:not(#react-root),
body:has(.video-intro-screen) .home-video-bg,
body:has(.video-intro-screen) footer,
body:has(.animated-intro-screen) .site-header,
body:has(.animated-intro-screen) .site-footer,
body:has(.animated-intro-screen) .mobile-tabbar,
body:has(.animated-intro-screen) main > *:not(#react-root),
body:has(.animated-intro-screen) .home-video-bg,
body:has(.animated-intro-screen) footer {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Animated Intro Screen (Replacing Video Intro) */
.animated-intro-screen,
html body .animated-intro-screen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999999 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: #040906 !important;
  opacity: 1 !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.animated-intro-screen.is-fading {
  opacity: 0 !important;
  transform: scale(1.04) !important;
  pointer-events: none !important;
}

.animated-intro-mesh {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.intro-orb-1 {
  position: absolute !important;
  top: 35% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 450px !important;
  height: 450px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(78, 232, 131, 0.25) 0%, rgba(78, 232, 131, 0) 70%) !important;
  animation: introPulse 2s ease-in-out infinite alternate !important;
}

@keyframes introPulse {
  0% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

.animated-intro-content {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 0 24px !important;
}

.animated-intro-logo-wrap {
  position: relative !important;
  width: 76px !important;
  height: 76px !important;
  margin-bottom: 22px !important;
  display: grid !important;
  place-items: center !important;
}

.intro-brand-logo {
  width: 58px !important;
  height: 58px !important;
  object-fit: contain !important;
  position: relative !important;
  z-index: 2 !important;
}

.intro-logo-ring {
  position: absolute !important;
  inset: -6px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(78, 232, 131, 0.4) !important;
  box-shadow: 0 0 24px rgba(78, 232, 131, 0.5) !important;
  animation: introRingSpin 4s linear infinite !important;
}

@keyframes introRingSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.intro-eyebrow {
  color: rgba(78, 232, 131, 0.9) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

.intro-main-title {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: clamp(32px, 6vw, 48px) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  margin-bottom: 24px !important;
}

.intro-main-title em {
  font-style: normal !important;
  color: #4ee883 !important;
  text-shadow: 0 0 20px rgba(78, 232, 131, 0.4) !important;
}

.intro-user-welcome-card {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(78, 232, 131, 0.35) !important;
  background: rgba(10, 24, 16, 0.9) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.intro-welcome-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #4ee883 !important;
  box-shadow: 0 0 10px #4ee883 !important;
}

.intro-welcome-label {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 12.5px !important;
}

.intro-welcome-name {
  color: #4ee883 !important;
  font-weight: 800 !important;
  font-size: 13px !important;
}

.intro-welcome-role {
  padding: 2px 9px !important;
  border-radius: 999px !important;
  background: rgba(78, 232, 131, 0.18) !important;
  border: 1px solid rgba(78, 232, 131, 0.4) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

.animated-intro-skip-btn {
  position: absolute !important;
  bottom: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 20px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(12px) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

/* ==========================================================================
   ULTRA-MODERN CLEAN SIGNUP GATE & ROLE SELECTION CARDS REDESIGN
   ========================================================================== */
.signup-gate,
html body .signup-gate {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999999 !important;
  display: grid !important;
  place-items: center !important;
  padding: 20px !important;
  background: #040906 !important;
  overflow-y: auto !important;
}

.signup-card,
html body .signup-card {
  width: min(520px, calc(100% - 24px)) !important;
  padding: 32px 28px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(78, 232, 131, 0.3) !important;
  background: rgba(8, 20, 13, 0.92) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.signup-card h1 {
  font: 900 clamp(32px, 5.5vw, 44px)/1.04 "Ubuntu", sans-serif !important;
  letter-spacing: -0.035em !important;
  color: #ffffff !important;
  margin: 6px 0 10px !important;
}

.signup-card h1 em {
  font-style: normal !important;
  background: linear-gradient(135deg, #4ee883 0%, #a8ffc4 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Role Chips Grid (Compact Text-Only Pill Chips) */
.role-chips-grid,
.role-cards-grid,
html body .signup-card .role-chips-grid,
html body .signup-card .role-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  margin-top: 10px !important;
  margin-bottom: 18px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 520px) {
  .role-chips-grid,
  .role-cards-grid,
  html body .signup-card .role-chips-grid,
  html body .signup-card .role-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

.role-chip-btn,
.role-card-btn,
html body .signup-card button.role-chip-btn,
html body .signup-card .role-chip-btn,
html body .signup-card button.role-card-btn,
html body .signup-card .role-card-btn {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 44px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  border: 1.5px solid rgba(78, 232, 131, 0.3) !important;
  background: rgba(10, 26, 17, 0.95) !important;
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  text-align: center !important;
  outline: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.15s !important;
}

.role-chip-btn:hover,
.role-card-btn:hover,
html body .signup-card .role-chip-btn:hover,
html body .signup-card .role-card-btn:hover {
  border-color: #4ee883 !important;
  background: rgba(16, 38, 25, 0.98) !important;
  color: #4ee883 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), 0 0 14px rgba(78, 232, 131, 0.18) !important;
}

.role-chip-btn.active,
.role-card-btn.active,
html body .signup-card .role-chip-btn.active,
html body .signup-card .role-card-btn.active {
  border-color: #4ee883 !important;
  background: #4ee883 !important;
  color: #031208 !important;
  font-weight: 800 !important;
  box-shadow: 0 0 16px rgba(78, 232, 131, 0.45) !important;
}
  background: linear-gradient(135deg, rgba(78, 232, 131, 0.22) 0%, rgba(12, 32, 20, 0.95) 100%) !important;
  box-shadow: 0 8px 28px rgba(78, 232, 131, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.role-card-head,
html body .signup-card .role-card-head {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.role-card-emoji,
html body .signup-card .role-card-emoji {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(78, 232, 131, 0.14) !important;
  border: 1px solid rgba(78, 232, 131, 0.3) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.role-card-badge,
html body .signup-card .role-card-badge {
  padding: 3px 9px !important;
  border-radius: 999px !important;
  background: #4ee883 !important;
  color: #031208 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 0 12px rgba(78, 232, 131, 0.6) !important;
  flex-shrink: 0 !important;
}

.role-card-body,
html body .signup-card .role-card-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 3px !important;
  width: 100% !important;
  text-align: left !important;
}

.role-card-name,
html body .signup-card .role-card-name {
  display: block !important;
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
}

.role-card-sub,
html body .signup-card .role-card-sub {
  display: block !important;
  color: rgba(238, 247, 240, 0.62) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

.signup-submit-btn,
html body .signup-submit-btn {
  width: 100% !important;
  min-height: 52px !important;
  margin-top: 18px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #0cb84b 0%, #068033 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 8px 24px rgba(9, 174, 70, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.signup-submit-btn:hover,
html body .signup-submit-btn:hover {
  background: linear-gradient(135deg, #4ee883 0%, #0cb84b 100%) !important;
  color: #031208 !important;
  border-color: #4ee883 !important;
  box-shadow: 0 14px 38px rgba(78, 232, 131, 0.55), 0 0 24px rgba(78, 232, 131, 0.35) !important;
  transform: translateY(-2px) !important;
}

.signup-submit-btn .btn-arrow,
html body .signup-submit-btn .btn-arrow {
  display: inline-block !important;
  font-size: 18px !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.signup-submit-btn:hover .btn-arrow,
html body .signup-submit-btn:hover .btn-arrow {
  transform: translateX(4px) !important;
}

/* Showing count badge styling for All Students page */
.showing-badge,
html body .showing-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  background: rgba(78, 232, 131, 0.1) !important;
  border: 1px solid rgba(78, 232, 131, 0.28) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-family: 'Ubuntu', sans-serif !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

.showing-badge strong,
html body .showing-badge strong {
  color: #4ee883 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.showing-badge small,
html body .showing-badge small {
  color: rgba(238, 247, 240, 0.7) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

/* ==========================================================================
   MINIMALIST SIMPLE REDESIGN: SUMMARY BAR, SPOTLIGHT & ROSTER LIST
   ========================================================================== */

/* Equal 50/50 Desktop Grid Layout & Equal Box Heights */
@media (min-width: 901px) {
  body.page-participants .participant-stage-layout,
  html#kauzariyya-theme body.page-participants .participant-stage-layout {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 20px !important;
  }

  body.page-participants .participant-live-card,
  html#kauzariyya-theme body.page-participants .participant-live-card,
  body.page-participants .participant-list,
  html#kauzariyya-theme body.page-participants .participant-list {
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }

  /* Make list scroll container fill available space so box height matches Spotlight card exactly */
  body.page-participants .participant-results-scroll,
  html#kauzariyya-theme body.page-participants .participant-results-scroll {
    flex: 1 1 0px !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
  }
}

/* 1. MINIMAL INLINE SUMMARY BAR (Image 1 - Clean & Unboxed) */
body.page-participants .participant-page-summary,
html#kauzariyya-theme body.page-participants .participant-page-summary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Minimal Summary Pills */
body.page-participants .participant-page-summary .summary-pill,
html#kauzariyya-theme body.page-participants .participant-page-summary .summary-pill {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

body.page-participants .participant-page-summary .summary-pill:hover {
  background: rgba(78, 232, 131, 0.1) !important;
  border-color: rgba(78, 232, 131, 0.3) !important;
  transform: none !important;
  box-shadow: none !important;
}

body.page-participants .participant-page-summary .summary-pill svg {
  color: #4ee883 !important;
  stroke: #4ee883 !important;
  width: 14px !important;
  height: 14px !important;
  filter: none !important;
}

body.page-participants .participant-page-summary .summary-pill div {
  display: flex !important;
  align-items: baseline !important;
  gap: 5px !important;
}

body.page-participants .participant-page-summary .summary-pill strong {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

body.page-participants .participant-page-summary .summary-pill small {
  color: rgba(255, 255, 255, 0.6) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* Minimal "All Directory" Button */
body.page-participants .participant-page-summary a.button,
html#kauzariyya-theme body.page-participants .participant-page-summary a.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  background: rgba(78, 232, 131, 0.1) !important;
  border: 1px solid rgba(78, 232, 131, 0.3) !important;
  color: #4ee883 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

body.page-participants .participant-page-summary a.button:hover {
  background: #4ee883 !important;
  color: #041409 !important;
  border-color: #4ee883 !important;
  box-shadow: none !important;
  transform: none !important;
}

body.page-participants .participant-page-summary a.button b {
  font-size: 12px !important;
}

/* Category Filter Tabs Bar Redesign (Image 2 - Clean & Unboxed) */
body.page-participants .participant-category-tabs,
html#kauzariyya-theme body.page-participants .participant-category-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  margin-bottom: 24px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

body.page-participants .participant-category-tabs .cat-tab,
html#kauzariyya-theme body.page-participants .participant-category-tabs .cat-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

body.page-participants .participant-category-tabs .cat-tab:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}

body.page-participants .participant-category-tabs .cat-tab.active,
html#kauzariyya-theme body.page-participants .participant-category-tabs .cat-tab.active {
  background: rgba(78, 232, 131, 0.12) !important;
  border-color: rgba(78, 232, 131, 0.4) !important;
  color: #4ee883 !important;
}

body.page-participants .participant-category-tabs .cat-tab .cat-count,
html#kauzariyya-theme body.page-participants .participant-category-tabs .cat-tab .cat-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

body.page-participants .participant-category-tabs .cat-tab.active .cat-count {
  background: #4ee883 !important;
  color: #03140a !important;
}


/* 2. STREAMLINED SPOTLIGHT CARD (Left Box) */
body.page-participants .participant-live-card,
html#kauzariyya-theme body.page-participants .participant-live-card {
  position: relative !important;
  overflow: hidden !important;
  padding: 22px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(8, 18, 12, 0.88) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-sizing: border-box !important;
}

body.page-participants .participant-live-card::before,
html#kauzariyya-theme body.page-participants .participant-live-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  background: #4ee883 !important;
  border-radius: 3px 0 0 3px !important;
}

/* Card Header */
body.page-participants .spotlight-head,
html#kauzariyya-theme body.page-participants .spotlight-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 38px !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.page-participants .live-label,
html#kauzariyya-theme body.page-participants .live-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(78, 232, 131, 0.3) !important;
  background: rgba(78, 232, 131, 0.1) !important;
  color: #4ee883 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}

body.page-participants .live-pulse {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #36d96b !important;
}

body.page-participants .spotlight-clock,
html#kauzariyya-theme body.page-participants .spotlight-clock {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* Hero Section */
body.page-participants .spotlight-program-tag,
html#kauzariyya-theme body.page-participants .spotlight-program-tag {
  display: inline-block !important;
  color: #4ee883 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

body.page-participants .spotlight-hero h2,
html#kauzariyya-theme body.page-participants .spotlight-hero h2 {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: clamp(22px, 3.5vw, 32px) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  margin: 0 0 12px 0 !important;
  text-shadow: none !important;
}

body.page-participants .spotlight-tags,
html#kauzariyya-theme body.page-participants .spotlight-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 18px !important;
}

body.page-participants .spotlight-tags > span,
html#kauzariyya-theme body.page-participants .spotlight-tags > span {
  padding: 4px 10px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* 3-Column Stats Grid */
body.page-participants .spotlight-stats,
html#kauzariyya-theme body.page-participants .spotlight-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 18px !important;
}

body.page-participants .spotlight-stat,
html#kauzariyya-theme body.page-participants .spotlight-stat {
  padding: 10px 8px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: rgba(0, 0, 0, 0.35) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  box-shadow: none !important;
  transition: background 0.2s ease !important;
}

body.page-participants .spotlight-stat:hover {
  background: rgba(78, 232, 131, 0.08) !important;
  border-color: rgba(78, 232, 131, 0.25) !important;
  transform: none !important;
  box-shadow: none !important;
}

body.page-participants .spotlight-stat span {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 8.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body.page-participants .spotlight-stat strong {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

/* Up Next Sub-Card Redesign (Image 1 - Clean & Minimal) */
body.page-participants .spotlight-up-next,
html#kauzariyya-theme body.page-participants .spotlight-up-next {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

body.page-participants .spotlight-up-next:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(78, 232, 131, 0.3) !important;
}

body.page-participants .up-next-label {
  display: inline-block !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  background: rgba(78, 232, 131, 0.15) !important;
  border: 1px solid rgba(78, 232, 131, 0.3) !important;
  color: #4ee883 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body.page-participants .spotlight-next-left strong {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

body.page-participants .spotlight-up-next time {
  color: rgba(255, 255, 255, 0.9) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}



/* ==========================================================================
   3. SIMPLE STREAMLINED RUNNING ORDER LIST (Image 2 - Clean & Unboxed Rows)
   ========================================================================== */

body.page-participants .participant-list,
html#kauzariyya-theme body.page-participants .participant-list {
  position: relative !important;
  overflow: hidden !important;
  padding: 22px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(8, 18, 12, 0.88) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-sizing: border-box !important;
}

/* List Header */
body.page-participants .participant-list-head,
html#kauzariyya-theme body.page-participants .participant-list-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 38px !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.page-participants .participant-list-head .overline {
  color: #4ee883 !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin: 0 0 2px 0 !important;
}

body.page-participants .participant-list-head h2 {
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  margin: 0 !important;
}

body.page-participants .scheduled-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(78, 232, 131, 0.3) !important;
  background: rgba(78, 232, 131, 0.1) !important;
  color: #4ee883 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

body.page-participants .scheduled-badge .badge-pulse-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #36d96b !important;
  box-shadow: none !important;
}

/* Roster Controls */
/* Overridden by master control panel at end of file */

body.page-participants .participant-search input:focus {
  border-color: rgba(78, 232, 131, 0.4) !important;
  box-shadow: none !important;
  outline: none !important;
}

body.page-participants .custom-select-trigger {
  padding: 8px 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(78, 232, 131, 0.3) !important;
  background: rgba(78, 232, 131, 0.08) !important;
  color: #4ee883 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* Roster List Scroll Container */
body.page-participants .participant-results-scroll {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex: 1 1 auto !important;
  max-height: 420px !important;
  overflow-y: auto !important;
  padding-right: 2px !important;
}

/* Simple Unboxed Roster Items (Image 2 - No Heavy Glowing Borders!) */
body.page-participants .participant-row,
html#kauzariyya-theme body.page-participants .participant-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  background: rgba(255, 255, 255, 0.015) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}

body.page-participants .participant-row:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-bottom-color: rgba(78, 232, 131, 0.2) !important;
  transform: none !important;
  box-shadow: none !important;
}

body.page-participants .participant-row:active {
  background: rgba(78, 232, 131, 0.08) !important;
  transform: none !important;
}

/* Active / Spotlighted Row */
body.page-participants .participant-row.active,
html#kauzariyya-theme body.page-participants .participant-row.active {
  background: rgba(78, 232, 131, 0.08) !important;
  border-left: 3px solid #4ee883 !important;
  border-bottom-color: rgba(78, 232, 131, 0.2) !important;
  box-shadow: none !important;
}

/* Index Tile */
body.page-participants .participant-order,
html#kauzariyya-theme body.page-participants .participant-order {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

body.page-participants .participant-row.is-live .participant-order {
  background: rgba(78, 232, 131, 0.18) !important;
  border-color: rgba(78, 232, 131, 0.35) !important;
  color: #4ee883 !important;
  box-shadow: none !important;
}

body.page-participants .participant-row.is-next .participant-order {
  background: rgba(244, 201, 115, 0.18) !important;
  border-color: rgba(244, 201, 115, 0.35) !important;
  color: #f4c973 !important;
  box-shadow: none !important;
}

/* Name & Metadata */
body.page-participants .participant-person strong {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

body.page-participants .participant-person small {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 10.5px !important;
}

/* Right Side Time & Minimal State Label */
body.page-participants .participant-time-badge time {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
}

body.page-participants .participant-state-label {
  padding: 2px 6px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 8.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

body.page-participants .participant-row.is-live .participant-state-label {
  border-color: rgba(78, 232, 131, 0.35) !important;
  background: rgba(78, 232, 131, 0.12) !important;
  color: #4ee883 !important;
}

body.page-participants .participant-row.is-next .participant-state-label {
  border-color: rgba(244, 201, 115, 0.35) !important;
  background: rgba(244, 201, 115, 0.12) !important;
  color: #f4c973 !important;
}


/* Mobile Queries */
@media (max-width: 900px) {
  body.page-participants .participant-title {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
}

@media (max-width: 650px) {
  body.page-participants .participant-page-summary {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }

  body.page-participants .participant-live-card,
  body.page-participants .participant-list {
    padding: 18px 14px !important;
    border-radius: 14px !important;
  }

  body.page-participants .participant-row {
    padding: 8px 10px !important;
    gap: 10px !important;
  }
}



/* 1. TOP SUMMARY BAR REDESIGN (Refined Balanced Radii - Image 3) */
body.page-participants .participant-page-summary,
html#kauzariyya-theme body.page-participants .participant-page-summary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 10px !important;
  border-radius: 14px !important;
  background: rgba(6, 24, 15, 0.8) !important;
  border: 1px solid rgba(78, 232, 131, 0.28) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 20px rgba(78, 232, 131, 0.06) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

body.page-participants .participant-page-summary:hover {
  border-color: rgba(78, 232, 131, 0.48) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 28px rgba(78, 232, 131, 0.12) !important;
}

/* Summary Pills inside Top Bar (Refined 10px Radius) */
body.page-participants .participant-page-summary .summary-pill,
html#kauzariyya-theme body.page-participants .participant-page-summary .summary-pill {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.page-participants .participant-page-summary .summary-pill:hover {
  background: rgba(78, 232, 131, 0.14) !important;
  border-color: rgba(78, 232, 131, 0.35) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3), 0 0 15px rgba(78, 232, 131, 0.2) !important;
}

body.page-participants .participant-page-summary .summary-pill:active {
  transform: translateY(0) scale(0.97) !important;
}

body.page-participants .participant-page-summary .summary-pill svg {
  color: #4ee883 !important;
  stroke: #4ee883 !important;
  flex-shrink: 0 !important;
  filter: drop-shadow(0 0 6px rgba(78, 232, 131, 0.5)) !important;
  transition: transform 0.25s ease !important;
}

body.page-participants .participant-page-summary .summary-pill:hover svg {
  transform: scale(1.12) rotate(-4deg) !important;
}

body.page-participants .participant-page-summary .summary-pill div {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 6px !important;
}

body.page-participants .participant-page-summary .summary-pill strong {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}

body.page-participants .participant-page-summary .summary-pill small {
  color: #4ee883 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

/* "All Directory" Button in Summary Bar (Refined 10px Radius) */
body.page-participants .participant-page-summary a.button,
html#kauzariyya-theme body.page-participants .participant-page-summary a.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 9px 18px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(78, 232, 131, 0.22) 0%, rgba(36, 180, 90, 0.3) 100%) !important;
  border: 1px solid rgba(78, 232, 131, 0.42) !important;
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.page-participants .participant-page-summary a.button:hover {
  background: linear-gradient(135deg, #4ee883 0%, #10b981 100%) !important;
  border-color: #4ee883 !important;
  color: #03140a !important;
  box-shadow: 0 10px 28px rgba(78, 232, 131, 0.45), 0 0 20px rgba(78, 232, 131, 0.3) !important;
  transform: translateY(-2px) !important;
}

body.page-participants .participant-page-summary a.button:active {
  transform: translateY(0) scale(0.96) !important;
}

body.page-participants .participant-page-summary a.button b {
  display: inline-block !important;
  font-size: 13px !important;
  transition: transform 0.25s ease !important;
}

body.page-participants .participant-page-summary a.button:hover b {
  transform: translate(3px, -3px) !important;
}

/* Category Tab Filter Pills (Refined 10px Radius) */
body.page-participants .participant-category-tabs .cat-tab,
html#kauzariyya-theme body.page-participants .participant-category-tabs .cat-tab {
  border-radius: 10px !important;
}


/* 2. LIVE DESK SPOTLIGHT CARD REDESIGN (Refined 20px Card Radius) */
body.page-participants .participant-live-card,
html#kauzariyya-theme body.page-participants .participant-live-card {
  position: relative !important;
  overflow: hidden !important;
  padding: 26px 24px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(78, 232, 131, 0.25) !important;
  background: radial-gradient(circle at 85% 0%, rgba(18, 55, 34, 0.5) 0%, rgba(6, 20, 13, 0.95) 70%),
              linear-gradient(165deg, rgba(8, 28, 18, 0.94) 0%, rgba(2, 12, 7, 0.98) 100%) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 40px rgba(78, 232, 131, 0.05) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  transition: border-color 0.35s ease, box-shadow 0.35s ease !important;
}

body.page-participants .participant-live-card:hover {
  border-color: rgba(78, 232, 131, 0.45) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 50px rgba(78, 232, 131, 0.14) !important;
}

/* Left Accent Indicator Bar */
body.page-participants .participant-live-card::before,
html#kauzariyya-theme body.page-participants .participant-live-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  background: linear-gradient(180deg, #4ee883 0%, #00e5ff 60%, #3b82f6 100%) !important;
  box-shadow: 0 0 16px rgba(78, 232, 131, 0.8) !important;
  border-radius: 4px 0 0 4px !important;
}

/* Card Header (Refined 8px Radius Badges) */
body.page-participants .spotlight-head,
html#kauzariyya-theme body.page-participants .spotlight-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.page-participants .live-label,
html#kauzariyya-theme body.page-participants .live-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(78, 232, 131, 0.4) !important;
  background: rgba(78, 232, 131, 0.14) !important;
  color: #4ee883 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 12px rgba(78, 232, 131, 0.15) !important;
  transition: all 0.2s ease !important;
}

body.page-participants .live-label:hover {
  background: rgba(78, 232, 131, 0.22) !important;
}

body.page-participants .live-pulse,
html#kauzariyya-theme body.page-participants .live-pulse {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #36d96b !important;
  box-shadow: 0 0 10px #36d96b !important;
  animation: pulseDot 2s infinite ease-in-out !important;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.25); }
}

body.page-participants .spotlight-clock,
html#kauzariyya-theme body.page-participants .spotlight-clock {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 14px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(0, 0, 0, 0.55) !important;
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
}

/* Reset Button (Refined 8px Radius) */
body.page-participants .reset-live-btn,
html#kauzariyya-theme body.page-participants .reset-live-btn {
  padding: 5px 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e2e8f0 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

body.page-participants .reset-live-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

/* Hero Info Tag & Title */
body.page-participants .spotlight-program-tag,
html#kauzariyya-theme body.page-participants .spotlight-program-tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(78, 232, 131, 0.35) !important;
  background: rgba(78, 232, 131, 0.1) !important;
  color: #4ee883 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}

body.page-participants .spotlight-hero h2,
html#kauzariyya-theme body.page-participants .spotlight-hero h2 {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: clamp(24px, 3.8vw, 36px) !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em !important;
  margin: 0 0 14px 0 !important;
  word-break: break-word !important;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.7) !important;
}

body.page-participants .spotlight-tags,
html#kauzariyya-theme body.page-participants .spotlight-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
}

body.page-participants .spotlight-tags > span,
html#kauzariyya-theme body.page-participants .spotlight-tags > span {
  padding: 5px 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: rgba(0, 0, 0, 0.45) !important;
  color: #e2e8f0 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  transition: all 0.2s ease !important;
}

body.page-participants .spotlight-tags > span:hover {
  border-color: rgba(78, 232, 131, 0.4) !important;
  background: rgba(78, 232, 131, 0.1) !important;
}

/* 3-Column Key Info Stats Grid (Refined 12px Radius) */
body.page-participants .spotlight-stats,
html#kauzariyya-theme body.page-participants .spotlight-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

body.page-participants .spotlight-stat,
html#kauzariyya-theme body.page-participants .spotlight-stat {
  padding: 12px 10px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  background: linear-gradient(145deg, rgba(0, 0, 0, 0.45) 0%, rgba(10, 28, 18, 0.4) 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  user-select: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.page-participants .spotlight-stat:hover {
  border-color: rgba(78, 232, 131, 0.4) !important;
  background: linear-gradient(145deg, rgba(78, 232, 131, 0.12) 0%, rgba(5, 22, 14, 0.6) 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 16px rgba(78, 232, 131, 0.15) !important;
}

body.page-participants .spotlight-stat:active {
  transform: translateY(0) scale(0.97) !important;
}

body.page-participants .spotlight-stat span,
html#kauzariyya-theme body.page-participants .spotlight-stat span {
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body.page-participants .spotlight-stat strong,
html#kauzariyya-theme body.page-participants .spotlight-stat strong {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
}

body.page-participants .spotlight-stat:hover strong {
  color: #4ee883 !important;
}

/* Up Next Card (Refined 12px Radius - Image 1 & 2 Concept) */
body.page-participants .spotlight-up-next,
html#kauzariyya-theme body.page-participants .spotlight-up-next {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(244, 201, 115, 0.35) !important;
  background: linear-gradient(95deg, rgba(244, 201, 115, 0.1) 0%, rgba(244, 201, 115, 0.03) 100%) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(244, 201, 115, 0.15) !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.page-participants .spotlight-up-next:hover {
  border-color: rgba(244, 201, 115, 0.6) !important;
  background: linear-gradient(95deg, rgba(244, 201, 115, 0.18) 0%, rgba(244, 201, 115, 0.08) 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), 0 0 18px rgba(244, 201, 115, 0.2) !important;
}

body.page-participants .spotlight-up-next:active {
  transform: translateY(0) scale(0.98) !important;
}

body.page-participants .up-next-label,
html#kauzariyya-theme body.page-participants .up-next-label {
  padding: 4px 8px !important;
  border-radius: 6px !important;
  background: rgba(244, 201, 115, 0.22) !important;
  color: #f4c973 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body.page-participants .spotlight-next-left strong,
html#kauzariyya-theme body.page-participants .spotlight-next-left strong {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  display: block !important;
}

body.page-participants .spotlight-up-next time,
html#kauzariyya-theme body.page-participants .spotlight-up-next time {
  color: #f4c973 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(244, 201, 115, 0.25) !important;
}


/* ==========================================================================
   3. RUNNING ORDER LIST BOX REDESIGN (Image 2 Concept)
   ========================================================================== */

body.page-participants .participant-list,
html#kauzariyya-theme body.page-participants .participant-list {
  position: relative !important;
  overflow: hidden !important;
  padding: 26px 24px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(78, 232, 131, 0.25) !important;
  background: linear-gradient(165deg, rgba(8, 28, 18, 0.94) 0%, rgba(2, 12, 7, 0.98) 100%) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 40px rgba(78, 232, 131, 0.05) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-sizing: border-box !important;
}

/* List Header */
body.page-participants .participant-list-head,
html#kauzariyya-theme body.page-participants .participant-list-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
}

body.page-participants .participant-list-head .overline,
html#kauzariyya-theme body.page-participants .participant-list-head .overline {
  color: #4ee883 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin: 0 0 2px 0 !important;
}

body.page-participants .participant-list-head h2,
html#kauzariyya-theme body.page-participants .participant-list-head h2 {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}

body.page-participants .scheduled-badge,
html#kauzariyya-theme body.page-participants .scheduled-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(78, 232, 131, 0.4) !important;
  background: rgba(78, 232, 131, 0.12) !important;
  color: #4ee883 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(78, 232, 131, 0.1) !important;
}

body.page-participants .scheduled-badge .badge-pulse-dot,
html#kauzariyya-theme body.page-participants .scheduled-badge .badge-pulse-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #36d96b !important;
  box-shadow: 0 0 8px #36d96b !important;
}

/* Overridden by master control panel at end of file */

body.page-participants .participant-search input,
html#kauzariyya-theme body.page-participants .participant-search input {
  width: 100% !important;
  padding: 10px 14px 10px 38px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(0, 0, 0, 0.45) !important;
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 12.5px !important;
  transition: all 0.2s ease !important;
}

body.page-participants .participant-search input:focus,
html#kauzariyya-theme body.page-participants .participant-search input:focus {
  border-color: rgba(78, 232, 131, 0.5) !important;
  background: rgba(0, 0, 0, 0.65) !important;
  box-shadow: 0 0 16px rgba(78, 232, 131, 0.2) !important;
  outline: none !important;
}

body.page-participants .participant-search .search-icon,
html#kauzariyya-theme body.page-participants .participant-search .search-icon {
  position: absolute !important;
  left: 12px !important;
  color: rgba(255, 255, 255, 0.45) !important;
}

/* CustomSelect Dropdown Styling */
body.page-participants .custom-select-trigger,
html#kauzariyya-theme body.page-participants .custom-select-trigger {
  padding: 10px 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(78, 232, 131, 0.35) !important;
  background: rgba(78, 232, 131, 0.1) !important;
  color: #4ee883 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  transition: all 0.2s ease !important;
}

body.page-participants .custom-select-trigger:hover {
  background: rgba(78, 232, 131, 0.2) !important;
  border-color: #4ee883 !important;
}

/* Participant List Scroll & Items (Image 2 Concept) */
body.page-participants .participant-results-scroll,
html#kauzariyya-theme body.page-participants .participant-results-scroll {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  max-height: 440px !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
}

/* Item Rows */
body.page-participants .participant-row,
html#kauzariyya-theme body.page-participants .participant-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.page-participants .participant-row:hover {
  border-color: rgba(78, 232, 131, 0.35) !important;
  background: rgba(78, 232, 131, 0.08) !important;
  transform: translateX(4px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3) !important;
}

body.page-participants .participant-row:active {
  transform: translateX(2px) scale(0.985) !important;
}

/* Active / Spotlighted Row */
body.page-participants .participant-row.active,
html#kauzariyya-theme body.page-participants .participant-row.active {
  border-color: #4ee883 !important;
  background: rgba(78, 232, 131, 0.15) !important;
  box-shadow: 0 0 20px rgba(78, 232, 131, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Order Index Tile (Refined 10px Radius Box) */
body.page-participants .participant-order,
html#kauzariyya-theme body.page-participants .participant-order {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(0, 0, 0, 0.5) !important;
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

/* First Place (#01 Tile) */
body.page-participants .participant-row.is-live .participant-order,
html#kauzariyya-theme body.page-participants .participant-row.is-live .participant-order {
  border-color: rgba(78, 232, 131, 0.5) !important;
  background: linear-gradient(135deg, #4ee883 0%, #10b981 100%) !important;
  color: #03140a !important;
  box-shadow: 0 4px 12px rgba(78, 232, 131, 0.4) !important;
}

/* Second Place (#02 Tile) */
body.page-participants .participant-row.is-next .participant-order,
html#kauzariyya-theme body.page-participants .participant-row.is-next .participant-order {
  border-color: rgba(244, 201, 115, 0.5) !important;
  background: linear-gradient(135deg, #f4c973 0%, #d97706 100%) !important;
  color: #1a0f02 !important;
  box-shadow: 0 4px 12px rgba(244, 201, 115, 0.3) !important;
}

/* Person Name & Subtitle Info */
body.page-participants .participant-person,
html#kauzariyya-theme body.page-participants .participant-person {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

body.page-participants .participant-person strong,
html#kauzariyya-theme body.page-participants .participant-person strong {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

body.page-participants .participant-person small,
html#kauzariyya-theme body.page-participants .participant-person small {
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* Item Right Side Info (Time + Status Pill) */
body.page-participants .participant-time-badge,
html#kauzariyya-theme body.page-participants .participant-time-badge {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 4px !important;
}

body.page-participants .participant-time-badge time,
html#kauzariyya-theme body.page-participants .participant-time-badge time {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}

body.page-participants .participant-state-label,
html#kauzariyya-theme body.page-participants .participant-state-label {
  padding: 3px 8px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

body.page-participants .participant-row.is-live .participant-state-label {
  border-color: rgba(78, 232, 131, 0.4) !important;
  background: rgba(78, 232, 131, 0.18) !important;
  color: #4ee883 !important;
}

body.page-participants .participant-row.is-next .participant-state-label {
  border-color: rgba(244, 201, 115, 0.4) !important;
  background: rgba(244, 201, 115, 0.18) !important;
  color: #f4c973 !important;
}


/* ==========================================================================
   4. MOBILE RESPONSIVE MEDIA QUERIES
   ========================================================================== */

@media (max-width: 900px) {
  body.page-participants .participant-title {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  body.page-participants .participant-page-summary {
    width: 100% !important;
    justify-content: space-between !important;
    border-radius: 14px !important;
  }
}

@media (max-width: 650px) {
  body.page-participants .participant-page-summary,
  html#kauzariyya-theme body.page-participants .participant-page-summary {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 14px !important;
    width: 100% !important;
  }

  body.page-participants .participant-page-summary .summary-pill,
  html#kauzariyya-theme body.page-participants .participant-page-summary .summary-pill {
    padding: 9px 12px !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 10px !important;
  }

  body.page-participants .participant-page-summary a.button,
  html#kauzariyya-theme body.page-participants .participant-page-summary a.button {
    grid-column: 1 / -1 !important;
    width: max-content !important;
    margin: 4px auto 0 !important;
    padding: 10px 22px !important;
    border-radius: 12px !important;
  }

  body.page-participants .participant-live-card,
  html#kauzariyya-theme body.page-participants .participant-live-card,
  body.page-participants .participant-list,
  html#kauzariyya-theme body.page-participants .participant-list {
    padding: 20px 16px !important;
    border-radius: 16px !important;
  }

  body.page-participants .participant-row,
  html#kauzariyya-theme body.page-participants .participant-row {
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  body.page-participants .participant-order,
  html#kauzariyya-theme body.page-participants .participant-order {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    font-size: 12px !important;
  }
}

/* Single Column Layout & Running Order Full Width */
body.page-participants .participant-stage-layout,
html#kauzariyya-theme body.page-participants .participant-stage-layout,
body.page-participants .participant-stage-layout.single-column-layout {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.page-participants .participant-list,
html#kauzariyya-theme body.page-participants .participant-list {
  width: 100% !important;
  max-width: 100% !important;
  padding: 24px 22px !important;
}

/* Overridden by master control panel at end of file */

body.page-participants .participant-results-scroll,
html#kauzariyya-theme body.page-participants .participant-results-scroll {
  padding-top: 4px !important;
  overflow-y: auto !important;
}

/* ==========================================================================
   SIMPLE, MODERN & ANIMATED SUMMARY BAR REDESIGN
   ========================================================================== */

/* Unboxed Clean Container */
body.page-participants .participant-page-summary,
html#kauzariyya-theme body.page-participants .participant-page-summary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Modern Glass Metric Pills */
body.page-participants .participant-page-summary .summary-pill,
html#kauzariyya-theme body.page-participants .participant-page-summary .summary-pill {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 16px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Pill Hover State */
body.page-participants .participant-page-summary .summary-pill:hover,
html#kauzariyya-theme body.page-participants .participant-page-summary .summary-pill:hover {
  background: linear-gradient(135deg, rgba(78, 232, 131, 0.18) 0%, rgba(16, 185, 129, 0.08) 100%) !important;
  border-color: rgba(78, 232, 131, 0.5) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(78, 232, 131, 0.25) !important;
}

/* Pill Active / Click Spring Animation */
body.page-participants .participant-page-summary .summary-pill:active,
html#kauzariyya-theme body.page-participants .participant-page-summary .summary-pill:active {
  transform: translateY(1px) scale(0.95) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.08s ease, box-shadow 0.08s ease !important;
}

/* Icon Styling & Micro-Animation */
body.page-participants .participant-page-summary .summary-pill svg,
html#kauzariyya-theme body.page-participants .participant-page-summary .summary-pill svg {
  color: #4ee883 !important;
  stroke: #4ee883 !important;
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  filter: drop-shadow(0 0 6px rgba(78, 232, 131, 0.5)) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.page-participants .participant-page-summary .summary-pill:hover svg {
  transform: scale(1.2) rotate(-6deg) !important;
}

/* Typography inside Pill */
body.page-participants .participant-page-summary .summary-pill div,
html#kauzariyya-theme body.page-participants .participant-page-summary .summary-pill div {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
}

body.page-participants .participant-page-summary .summary-pill strong,
html#kauzariyya-theme body.page-participants .participant-page-summary .summary-pill strong {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}

body.page-participants .participant-page-summary .summary-pill small,
html#kauzariyya-theme body.page-participants .participant-page-summary .summary-pill small {
  color: #4ee883 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

/* Compact & Reduced "All Directory ↗" Button */
body.page-participants .participant-page-summary a.button,
html#kauzariyya-theme body.page-participants .participant-page-summary a.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 6px 13px !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, rgba(78, 232, 131, 0.2) 0%, rgba(16, 185, 129, 0.28) 100%) !important;
  border: 1px solid rgba(78, 232, 131, 0.4) !important;
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  cursor: pointer !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  height: auto !important;
}

/* Button Hover State */
body.page-participants .participant-page-summary a.button:hover,
html#kauzariyya-theme body.page-participants .participant-page-summary a.button:hover {
  background: linear-gradient(135deg, #4ee883 0%, #10b981 100%) !important;
  border-color: #4ee883 !important;
  color: #03140a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(78, 232, 131, 0.4), 0 0 16px rgba(78, 232, 131, 0.25) !important;
}

/* Button Active / Click Spring Animation */
body.page-participants .participant-page-summary a.button:active,
html#kauzariyya-theme body.page-participants .participant-page-summary a.button:active {
  transform: translateY(1px) scale(0.95) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.08s ease, box-shadow 0.08s ease !important;
}

/* Arrow Icon Shift Animation */
body.page-participants .participant-page-summary a.button b,
html#kauzariyya-theme body.page-participants .participant-page-summary a.button b {
  display: inline-block !important;
  font-size: 11.5px !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.page-participants .participant-page-summary a.button:hover b {
  transform: translate(3px, -3px) scale(1.1) !important;
}

/* ==========================================================================
   REDUCED SIZE & ANIMATED CATEGORY TABS BAR REDESIGN
   ========================================================================== */

body.page-participants .participant-category-tabs,
html#kauzariyya-theme body.page-participants .participant-category-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 22px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Compact Category Tab Pill */
body.page-participants .participant-category-tabs .cat-tab,
html#kauzariyya-theme body.page-participants .participant-category-tabs .cat-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 5px 12px !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  user-select: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Category Tab Hover State */
body.page-participants .participant-category-tabs .cat-tab:hover,
html#kauzariyya-theme body.page-participants .participant-category-tabs .cat-tab:hover {
  background: rgba(78, 232, 131, 0.12) !important;
  border-color: rgba(78, 232, 131, 0.4) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3), 0 0 14px rgba(78, 232, 131, 0.2) !important;
}

/* Category Tab Active / Click Spring Animation */
body.page-participants .participant-category-tabs .cat-tab:active,
html#kauzariyya-theme body.page-participants .participant-category-tabs .cat-tab:active {
  transform: translateY(1px) scale(0.95) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
  transition: transform 0.08s ease, box-shadow 0.08s ease !important;
}

/* Selected Active Tab State */
body.page-participants .participant-category-tabs .cat-tab.active,
html#kauzariyya-theme body.page-participants .participant-category-tabs .cat-tab.active {
  background: linear-gradient(135deg, rgba(78, 232, 131, 0.22) 0%, rgba(16, 185, 129, 0.3) 100%) !important;
  border-color: #4ee883 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(78, 232, 131, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Compact Count Badge */
body.page-participants .participant-category-tabs .cat-tab .cat-count,
html#kauzariyya-theme body.page-participants .participant-category-tabs .cat-tab .cat-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  transition: all 0.2s ease !important;
}

body.page-participants .participant-category-tabs .cat-tab:hover .cat-count {
  border-color: rgba(78, 232, 131, 0.4) !important;
  color: #4ee883 !important;
}

body.page-participants .participant-category-tabs .cat-tab.active .cat-count,
html#kauzariyya-theme body.page-participants .participant-category-tabs .cat-tab.active .cat-count {
  background: #4ee883 !important;
  border-color: #4ee883 !important;
  color: #03140a !important;
  font-weight: 900 !important;
  box-shadow: 0 2px 6px rgba(78, 232, 131, 0.4) !important;
}

/* ==========================================================================
   FULLY ROUNDED PILL BUTTONS & RUNNING ORDER LIST UPGRADE
   ========================================================================== */

/* Fully Rounded Pill "All Directory ↗" Button */
body.page-participants .participant-page-summary a.button,
html#kauzariyya-theme body.page-participants .participant-page-summary a.button {
  border-radius: 9999px !important;
  padding: 7px 18px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, rgba(78, 232, 131, 0.25) 0%, rgba(16, 185, 129, 0.35) 100%) !important;
  border: 1px solid rgba(78, 232, 131, 0.45) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

body.page-participants .participant-page-summary a.button:hover,
html#kauzariyya-theme body.page-participants .participant-page-summary a.button:hover {
  background: linear-gradient(135deg, #4ee883 0%, #10b981 100%) !important;
  border-color: #4ee883 !important;
  color: #03140a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(78, 232, 131, 0.45), 0 0 20px rgba(78, 232, 131, 0.3) !important;
}

body.page-participants .participant-page-summary a.button:active,
html#kauzariyya-theme body.page-participants .participant-page-summary a.button:active {
  transform: translateY(1px) scale(0.95) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}

/* Fully Rounded Category Tab Pills */
body.page-participants .participant-category-tabs .cat-tab,
html#kauzariyya-theme body.page-participants .participant-category-tabs .cat-tab {
  border-radius: 9999px !important;
  padding: 6px 15px !important;
  font-size: 11.5px !important;
}

body.page-participants .participant-category-tabs .cat-tab .cat-count,
html#kauzariyya-theme body.page-participants .participant-category-tabs .cat-tab .cat-count {
  border-radius: 9999px !important;
}

/* Fully Rounded Search Bar Input & Dropdown Button */
body.page-participants .participant-search input,
html#kauzariyya-theme body.page-participants .participant-search input {
  border-radius: 9999px !important;
  padding: 11px 18px 11px 42px !important;
  font-size: 13px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(0, 0, 0, 0.5) !important;
}

body.page-participants .custom-select-trigger,
html#kauzariyya-theme body.page-participants .custom-select-trigger {
  border-radius: 9999px !important;
  padding: 10px 20px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  background: rgba(78, 232, 131, 0.12) !important;
  border: 1px solid rgba(78, 232, 131, 0.4) !important;
  color: #4ee883 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.page-participants .custom-select-trigger:hover,
html#kauzariyya-theme body.page-participants .custom-select-trigger:hover {
  background: rgba(78, 232, 131, 0.25) !important;
  border-color: #4ee883 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(78, 232, 131, 0.3) !important;
}

body.page-participants .custom-select-trigger:active,
html#kauzariyya-theme body.page-participants .custom-select-trigger:active {
  transform: translateY(1px) scale(0.96) !important;
}

/* Fix Row Clipping & Add Proper Controls Gap */
body.page-participants .participant-list,
html#kauzariyya-theme body.page-participants .participant-list {
  padding: 26px 24px !important;
}

/* Overridden by master control panel at end of file */

body.page-participants .participant-results-scroll,
html#kauzariyya-theme body.page-participants .participant-results-scroll {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  padding-right: 4px !important;
  max-height: 540px !important;
  overflow-y: auto !important;
}

/* Upgraded Participant Row Cards */
body.page-participants .participant-row,
html#kauzariyya-theme body.page-participants .participant-row {
  border-radius: 16px !important;
  padding: 14px 20px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.page-participants .participant-row:hover {
  border-color: rgba(78, 232, 131, 0.45) !important;
  background: rgba(78, 232, 131, 0.1) !important;
  transform: translateX(4px) translateY(-2px) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4), 0 0 20px rgba(78, 232, 131, 0.18) !important;
}

body.page-participants .participant-row:active {
  transform: scale(0.985) !important;
  transition: transform 0.08s ease !important;
}

/* Circle Order Tile Badge */
body.page-participants .participant-order,
html#kauzariyya-theme body.page-participants .participant-order {
  border-radius: 9999px !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
}

/* ==========================================================================
   FEATURE SPOTLIGHT BOX (1st & 2nd Participant Spotlight)
   ========================================================================== */

.stage-queue-feature-box {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr !important;
  gap: 14px !important;
  margin-bottom: 24px !important;
  width: 100% !important;
}

@media (max-width: 768px) {
  .stage-queue-feature-box {
    grid-template-columns: 1fr !important;
  }
}

.queue-spotlight-card {
  position: relative !important;
  padding: 16px 18px !important;
  border-radius: 18px !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}

/* 1st Participant Spotlight (First in Queue - Emerald Highlight) */
.first-participant-card {
  background: radial-gradient(circle at 100% 0%, rgba(78, 232, 131, 0.18) 0%, rgba(10, 32, 20, 0.9) 70%) !important;
  border: 1px solid rgba(78, 232, 131, 0.45) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 20px rgba(78, 232, 131, 0.1) !important;
}

.first-participant-card:hover {
  border-color: #4ee883 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 28px rgba(78, 232, 131, 0.25) !important;
}

/* 2nd Participant Spotlight (Up Next - Amber/Gold Highlight) */
.second-participant-card {
  background: radial-gradient(circle at 100% 0%, rgba(244, 201, 115, 0.15) 0%, rgba(26, 20, 8, 0.9) 70%) !important;
  border: 1px solid rgba(244, 201, 115, 0.35) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.second-participant-card:hover {
  border-color: #f4c973 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 24px rgba(244, 201, 115, 0.2) !important;
}

.queue-spotlight-card:active {
  transform: translateY(1px) scale(0.97) !important;
}

/* Badges */
.spotlight-card-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  width: max-content !important;
}

.first-badge {
  background: rgba(78, 232, 131, 0.18) !important;
  border: 1px solid rgba(78, 232, 131, 0.4) !important;
  color: #4ee883 !important;
}

.second-badge {
  background: rgba(244, 201, 115, 0.18) !important;
  border: 1px solid rgba(244, 201, 115, 0.4) !important;
  color: #f4c973 !important;
}

/* Card Body */
.spotlight-card-body {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.spotlight-card-main {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.spotlight-name {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  letter-spacing: -0.02em !important;
}

.spotlight-name-sm {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
}

.spotlight-meta-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
}

.spotlight-category-pill,
.spotlight-code-badge {
  padding: 3px 8px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(0, 0, 0, 0.45) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
}

.spotlight-team-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  border: 1px solid !important;
  font-family: 'Amiri', 'Tajawal', 'Ubuntu', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
}

/* Card Right Side Info */
.spotlight-card-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 2px !important;
  flex-shrink: 0 !important;
}

.spotlight-time-label {
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.spotlight-time-value {
  color: #4ee883 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
}

.spotlight-time-value.alt-color {
  color: #f4c973 !important;
}

/* ==========================================================================
   CLEAN 2-COLUMN STAGE LAYOUT & LEFT SPOTLIGHT BOX (FULL HEIGHT)
   ========================================================================== */

body.page-participants .participant-stage-layout,
html#kauzariyya-theme body.page-participants .participant-stage-layout,
body.page-participants .participant-stage-layout.two-column-layout {
  display: grid !important;
  grid-template-columns: 1.55fr 1fr !important;
  gap: 24px !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 960px) {
  body.page-participants .participant-stage-layout,
  html#kauzariyya-theme body.page-participants .participant-stage-layout,
  body.page-participants .participant-stage-layout.two-column-layout {
    grid-template-columns: 1fr !important;
  }
}

/* Left Sidebar Stage Spotlight Card Box - Full Height Stretch */
body.page-participants .participant-left-box,
html#kauzariyya-theme body.page-participants .participant-left-box {
  position: relative !important;
  padding: 24px 20px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(78, 232, 131, 0.28) !important;
  background: radial-gradient(circle at 90% 0%, rgba(18, 55, 34, 0.4) 0%, rgba(5, 18, 11, 0.95) 75%),
              linear-gradient(165deg, rgba(8, 28, 18, 0.95) 0%, rgba(2, 12, 7, 0.98) 100%) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 0 40px rgba(78, 232, 131, 0.05) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 16px !important;
  height: 100% !important;
  min-height: 100% !important;
}

/* Left Box Header */
.participant-left-header {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  margin-bottom: 2px !important;
}

.participant-left-header .overline {
  color: #4ee883 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

.participant-left-header h2 {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}

/* Vertical Feature Box inside Left Column */
.stage-queue-feature-box.vertical-queue-box {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 14px !important;
  grid-template-columns: none !important;
  margin-bottom: 0 !important;
  width: 100% !important;
  flex: 1 !important;
}

/* Order Index Tile & Top Row */
.spotlight-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-bottom: 2px !important;
}

.spotlight-order-tile {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 10px !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

.tile-first {
  background: linear-gradient(135deg, #4ee883 0%, #10b981 100%) !important;
  color: #03140a !important;
  box-shadow: 0 4px 12px rgba(78, 232, 131, 0.4) !important;
}

.tile-second {
  background: linear-gradient(135deg, #f4c973 0%, #d97706 100%) !important;
  color: #1a0f02 !important;
  box-shadow: 0 4px 12px rgba(244, 201, 115, 0.3) !important;
}

.tile-third {
  background: linear-gradient(135deg, #c084fc 0%, #9333ea 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(192, 132, 252, 0.3) !important;
}

/* 3rd Participant Card Styling */
.third-participant-card {
  background: radial-gradient(circle at 100% 0%, rgba(192, 132, 252, 0.14) 0%, rgba(20, 10, 30, 0.9) 70%) !important;
  border: 1px solid rgba(192, 132, 252, 0.35) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.third-participant-card:hover {
  border-color: #c084fc !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 24px rgba(192, 132, 252, 0.25) !important;
}

.third-badge {
  background: rgba(192, 132, 252, 0.18) !important;
  border: 1px solid rgba(192, 132, 252, 0.4) !important;
  color: #c084fc !important;
}

.spotlight-time-value.neutral-color {
  color: #c084fc !important;
}

/* ==========================================================================
   SIMPLE & ULTRA-CLEAN CATEGORY TABS REDESIGN
   ========================================================================== */

body.page-participants .participant-category-tabs,
html#kauzariyya-theme body.page-participants .participant-category-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 24px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Simple Clean Tab */
body.page-participants .participant-category-tabs .cat-tab,
html#kauzariyya-theme body.page-participants .participant-category-tabs .cat-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  user-select: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Inactive Tab Hover */
body.page-participants .participant-category-tabs .cat-tab:hover:not(.active),
html#kauzariyya-theme body.page-participants .participant-category-tabs .cat-tab:hover:not(.active) {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

/* Click Animation */
body.page-participants .participant-category-tabs .cat-tab:active,
html#kauzariyya-theme body.page-participants .participant-category-tabs .cat-tab:active {
  transform: translateY(1px) scale(0.96) !important;
}

/* Active Selected Tab */
body.page-participants .participant-category-tabs .cat-tab.active,
html#kauzariyya-theme body.page-participants .participant-category-tabs .cat-tab.active {
  background: #4ee883 !important;
  border-color: #4ee883 !important;
  color: #03140a !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 14px rgba(78, 232, 131, 0.35) !important;
}

/* Minimal Count Text */
body.page-participants .participant-category-tabs .cat-tab .cat-count,
html#kauzariyya-theme body.page-participants .participant-category-tabs .cat-tab .cat-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: auto !important;
  height: auto !important;
  padding: 1px 6px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  transition: all 0.2s ease !important;
}

body.page-participants .participant-category-tabs .cat-tab:hover:not(.active) .cat-count {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.15) !important;
}

body.page-participants .participant-category-tabs .cat-tab.active .cat-count,
html#kauzariyya-theme body.page-participants .participant-category-tabs .cat-tab.active .cat-count {
  background: rgba(3, 20, 10, 0.2) !important;
  border-color: transparent !important;
  color: #03140a !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

/* Single Person Spotlight Card (Ultra Clean & Simple) */
.single-spotlight-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding: 24px 22px !important;
  border-radius: 20px !important;
  background: radial-gradient(circle at 100% 0%, rgba(78, 232, 131, 0.2) 0%, rgba(8, 28, 18, 0.95) 75%) !important;
  border: 1px solid rgba(78, 232, 131, 0.4) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 25px rgba(78, 232, 131, 0.1) !important;
  flex: 1 !important;
  box-sizing: border-box !important;
}

.spotlight-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.spotlight-order-pill {
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  background: linear-gradient(135deg, #4ee883 0%, #10b981 100%) !important;
  color: #03140a !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 14px rgba(78, 232, 131, 0.4) !important;
}

.spotlight-live-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 4px 10px !important;
  border-radius: 9999px !important;
  background: rgba(78, 232, 131, 0.15) !important;
  border: 1px solid rgba(78, 232, 131, 0.35) !important;
  color: #4ee883 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.spotlight-hero-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.spotlight-program-name {
  color: #4ee883 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.spotlight-hero-name {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  letter-spacing: -0.03em !important;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.6) !important;
}

.spotlight-hero-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 4px !important;
}

.spotlight-hero-badges .badge-item {
  padding: 4px 10px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(0, 0, 0, 0.45) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.spotlight-footer-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.spotlight-footer-meta .meta-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.spotlight-footer-meta .meta-block small {
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.spotlight-footer-meta .meta-block strong {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 20px !important;
  font-weight: 900 !important;
}

/* ==========================================================================
   EXACT REFERENCE DESIGN MATCH (USER SCREENSHOT)
   ========================================================================== */

/* Left Big Stage Card */
body.page-participants .participant-left-box,
html#kauzariyya-theme body.page-participants .participant-left-box {
  position: relative !important;
  padding: 36px 38px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(78, 232, 131, 0.22) !important;
  background: radial-gradient(circle at 90% 0%, rgba(18, 55, 34, 0.35) 0%, rgba(6, 20, 13, 0.96) 75%),
              linear-gradient(165deg, rgba(8, 28, 18, 0.96) 0%, rgba(2, 12, 7, 0.98) 100%) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  min-height: 520px !important;
  box-sizing: border-box !important;
}

.spotlight-top-badge {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

.live-spotlight-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  background: rgba(78, 232, 131, 0.15) !important;
  border: 1px solid rgba(78, 232, 131, 0.35) !important;
  color: #4ee883 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.spotlight-hero-center {
  margin-top: auto !important;
  margin-bottom: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.spotlight-hero-category {
  color: #4ee883 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.spotlight-hero-giant-name {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: clamp(38px, 4.5vw, 54px) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em !important;
  margin: 0 !important;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}

/* Right Column (Participants Box) */
body.page-participants .participant-list,
html#kauzariyya-theme body.page-participants .participant-list {
  position: relative !important;
  padding: 26px 28px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(78, 232, 131, 0.22) !important;
  background: radial-gradient(circle at 10% 0%, rgba(18, 55, 34, 0.3) 0%, rgba(6, 20, 13, 0.96) 75%),
              linear-gradient(165deg, rgba(8, 28, 18, 0.96) 0%, rgba(2, 12, 7, 0.98) 100%) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-sizing: border-box !important;
}

.participant-column-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
}

.participant-column-head .column-title {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

.speakers-count-badge {
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  background: rgba(78, 232, 131, 0.18) !important;
  border: 1px solid rgba(78, 232, 131, 0.35) !important;
  color: #4ee883 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

/* Overridden by master control panel at end of file */

body.page-participants .participant-search,
html#kauzariyya-theme body.page-participants .participant-search {
  position: relative !important;
  width: 100% !important;
}

body.page-participants .participant-search input,
html#kauzariyya-theme body.page-participants .participant-search input {
  width: 100% !important;
  padding: 10px 38px 10px 42px !important;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 13px !important;
  box-sizing: border-box !important;
}

body.page-participants .participant-search input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

body.page-participants .participant-search .search-icon {
  position: absolute !important;
  left: 14px !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: rgba(255, 255, 255, 0.5) !important;
  pointer-events: none !important;
  width: 15px !important;
  height: 15px !important;
  z-index: 5 !important;
}

.filter-overline {
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
  display: block !important;
}

body.page-participants .custom-select-trigger,
html#kauzariyya-theme body.page-participants .custom-select-trigger {
  border-radius: 12px !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 12px 16px !important;
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* Rows Matching Screenshot */
body.page-participants .participant-row,
html#kauzariyya-theme body.page-participants .participant-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 18px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin-bottom: 10px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

body.page-participants .participant-row:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  transform: translateX(3px) !important;
}

.row-time {
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: rgba(255, 255, 255, 0.6) !important;
  width: 54px !important;
  flex-shrink: 0 !important;
}

.row-details {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  flex: 1 !important;
  margin: 0 14px !important;
}

.row-name {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

.row-sub {
  color: rgba(255, 255, 255, 0.5) !important;
  font-family: 'Ubuntu', 'Tajawal', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
}

.row-team {
  color: rgba(255, 255, 255, 0.7) !important;
}

.row-code {
  color: rgba(255, 255, 255, 0.45) !important;
}

.row-sep {
  color: rgba(255, 255, 255, 0.3) !important;
}

.row-order-tile {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 10px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 900 !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

/* Active Selected Row (Uniform Background Fill - No Gradient Split Line) */
body.page-participants .participant-row.active,
html#kauzariyya-theme body.page-participants .participant-row.active,
body:not(.page-admin) .participant-row.active {
  background: rgba(78, 232, 131, 0.1) !important;
  background-image: none !important;
  border: 1px solid #4ee883 !important;
  box-shadow: 0 0 24px rgba(78, 232, 131, 0.25), inset 0 0 12px rgba(78, 232, 131, 0.08) !important;
}

body.page-participants .participant-row::before,
body.page-participants .participant-row::after {
  display: none !important;
  content: none !important;
}

body.page-participants .participant-row.active .row-time {
  color: #4ee883 !important;
}

body.page-participants .participant-row.active .row-order-tile {
  background: #4ee883 !important;
  border-color: #4ee883 !important;
  color: #03140a !important;
  font-weight: 900 !important;
  box-shadow: 0 2px 8px rgba(78, 232, 131, 0.4) !important;
}

/* ==========================================================================
   INCREASED 1ST BOX WIDTH & REDUCED 2ND BOX WIDTH
   ========================================================================== */

@media (min-width: 961px) {
  body.page-participants .participant-stage-layout.two-column-layout,
  html#kauzariyya-theme body.page-participants .participant-stage-layout.two-column-layout {
    display: grid !important;
    grid-template-columns: 1.55fr 1fr !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* 1st Box (Left Spotlight Card) Expanded Width */
body.page-participants .participant-left-box,
html#kauzariyya-theme body.page-participants .participant-left-box {
  width: 100% !important;
  max-width: 100% !important;
  padding: 38px 42px !important;
}

/* 2nd Box (Right Participants Panel) Compact Width */
body.page-participants .participant-list,
html#kauzariyya-theme body.page-participants .participant-list {
  width: 100% !important;
  max-width: 100% !important;
  padding: 24px 24px !important;
}

/* Hero Giant Name Sizing for Expanded Box */
.spotlight-hero-giant-name {
  font-size: clamp(38px, 4vw, 56px) !important;
  word-break: break-word !important;
  line-height: 1.1 !important;
}

/* Student Details Above Name */
.spotlight-top-details {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

.spotlight-program-pill {
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  background: rgba(78, 232, 131, 0.18) !important;
  border: 1px solid rgba(78, 232, 131, 0.4) !important;
  color: #4ee883 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.spotlight-category-pill,
.spotlight-code-pill {
  padding: 4px 10px !important;
  border-radius: 8px !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.spotlight-team-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 12px !important;
  border-radius: 8px !important;
  border: 1px solid !important;
  font-family: 'Amiri', 'Tajawal', 'Ubuntu', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

/* Student Details Below Name */
.spotlight-bottom-details {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 16px !important;
}

/* ==========================================================================
   PERFECTLY ALIGNED CATEGORY FILTER TABS REDESIGN
   ========================================================================== */

/* Outer Container - Completely Transparent & Aligned */
body.page-participants .participant-category-tabs,
html#kauzariyya-theme body.page-participants .participant-category-tabs,
body:not(.page-admin) .participant-category-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 0 !important;
  margin-bottom: 28px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Tab Pill Base */
body.page-participants .participant-category-tabs .cat-tab,
html#kauzariyya-theme body.page-participants .participant-category-tabs .cat-tab,
body:not(.page-admin) .participant-category-tabs .cat-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 18px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  user-select: none !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  margin: 0 !important;
}

/* Hover State */
body.page-participants .participant-category-tabs .cat-tab:hover:not(.active),
html#kauzariyya-theme body.page-participants .participant-category-tabs .cat-tab:hover:not(.active) {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

/* Active Selected Tab */
body.page-participants .participant-category-tabs .cat-tab.active,
html#kauzariyya-theme body.page-participants .participant-category-tabs .cat-tab.active,
body:not(.page-admin) .participant-category-tabs .cat-tab.active {
  background: #4ee883 !important;
  border-color: #4ee883 !important;
  color: #03140a !important;
  font-weight: 900 !important;
  box-shadow: 0 6px 20px rgba(78, 232, 131, 0.38) !important;
  transform: none !important;
}

/* Count Badge inside Inactive Tab */
body.page-participants .participant-category-tabs .cat-tab .cat-count,
html#kauzariyya-theme body.page-participants .participant-category-tabs .cat-tab .cat-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.09) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  transition: all 0.2s ease !important;
}

body.page-participants .participant-category-tabs .cat-tab:hover:not(.active) .cat-count {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* Count Badge inside Active Selected Tab */
body.page-participants .participant-category-tabs .cat-tab.active .cat-count,
html#kauzariyya-theme body.page-participants .participant-category-tabs .cat-tab.active .cat-count {
  background: rgba(3, 20, 10, 0.22) !important;
  border: none !important;
  color: #03140a !important;
  font-weight: 900 !important;
}

/* Decorative Background Mesh & Footer for Stage Box */
.spotlight-bg-mesh {
  position: absolute !important;
  top: -40px !important;
  right: -40px !important;
  width: 260px !important;
  height: 260px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(78, 232, 131, 0.15) 0%, rgba(78, 232, 131, 0) 70%) !important;
  pointer-events: none !important;
}

.spotlight-card-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 18px !important;
  margin-top: 24px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.09) !important;
  width: 100% !important;
}

.spotlight-card-footer .footer-meta-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.spotlight-card-footer .footer-meta-item small {
  color: rgba(255, 255, 255, 0.45) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.spotlight-card-footer .footer-meta-item strong {
  color: #4ee883 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 19px !important;
  font-weight: 900 !important;
}

.footer-meta-divider {
  width: 1px !important;
  height: 28px !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Minimal, Modern Glass Team Badge (Simple & Professional Redesign) */
.spotlight-team-pill.team-name-ar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 4px 14px !important;
  height: 28px !important;
  line-height: 1 !important;
  border-radius: 9999px !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  font-family: 'Amiri', 'Tajawal', 'Ubuntu', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  box-sizing: border-box !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.spotlight-team-pill .team-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

.spotlight-category-pill,
.spotlight-code-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 5px 12px !important;
  height: 28px !important;
  line-height: 1 !important;
  border-radius: 9999px !important;
  box-sizing: border-box !important;
}

/* Dropdown & Control Panel Modernization (Image 3 Fix) */
.filter-overline {
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
  display: block !important;
}

body.page-participants .custom-select-trigger,
html#kauzariyya-theme body.page-participants .custom-select-trigger {
  border-radius: 14px !important;
  background: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
/* ==========================================================================
   PARTICIPANTS COMPACT MODERN CONTROL PANEL (100% SEARCH + 50/50 CATEGORY & PROGRAM)
   ========================================================================== */

/* Outer Controls Container: Compact Gap & Spacing */
html#kauzariyya-theme body.page-participants .participant-roster-controls,
html#kauzariyya-theme body .participant-roster-controls,
body.page-participants .participant-roster-controls,
body:not(.page-admin) .participant-roster-controls,
.participant-roster-controls {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Rows Structure */
html#kauzariyya-theme body.page-participants .controls-row,
html#kauzariyya-theme body .participant-roster-controls .controls-row,
.participant-roster-controls .controls-row {
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

html#kauzariyya-theme body.page-participants .controls-row.search-row,
html#kauzariyya-theme body .participant-roster-controls .controls-row.search-row,
.participant-roster-controls .controls-row.search-row {
  width: 100% !important;
}

/* 50% / 50% Half-Width Side-by-Side Category and Program Boxes in ONE Line */
html#kauzariyya-theme body.page-participants .controls-row.filters-row,
html#kauzariyya-theme body .participant-roster-controls .controls-row.filters-row,
.participant-roster-controls .controls-row.filters-row,
.filters-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-end !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

html#kauzariyya-theme body.page-participants .controls-row.filters-row .control-group,
html#kauzariyya-theme body .participant-roster-controls .controls-row.filters-row .control-group,
.participant-roster-controls .controls-row.filters-row .control-group,
.filters-row .control-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  flex: 1 1 0% !important;
  width: 50% !important;
  max-width: 50% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Compact Sleek Overline Label with Glowing Dot */
html#kauzariyya-theme body.page-participants .filter-overline,
html#kauzariyya-theme body .participant-roster-controls .filter-overline,
.participant-roster-controls .filter-overline,
.filter-overline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  color: #4ee883 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin: 0 0 1px 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

html#kauzariyya-theme body.page-participants .filter-overline .overline-dot,
html#kauzariyya-theme body .participant-roster-controls .filter-overline .overline-dot,
.participant-roster-controls .filter-overline .overline-dot {
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: #4ee883 !important;
  box-shadow: 0 0 6px rgba(78, 232, 131, 0.8) !important;
  display: inline-block !important;
}

/* Search Form Wrapper - Completely Removes Double Outer Box / Border Artifacts */
html#kauzariyya-theme body.page-participants .participant-search,
html#kauzariyya-theme body .participant-search,
body.page-participants .participant-search,
body:not(.page-admin) .participant-search,
form.participant-search,
.participant-search {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}

/* Input Base Styling (Compact 38px Height, Sleek Border Radius, Dark Glass) */
html#kauzariyya-theme body.page-participants .participant-search input,
html#kauzariyya-theme body .participant-search input,
body.page-participants .participant-search input,
.participant-search input,
html#kauzariyya-theme body.page-participants .custom-select-trigger,
html#kauzariyya-theme body .custom-select-trigger,
body.page-participants .custom-select-trigger,
.custom-select-trigger {
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  outline: none !important;
}

html body.page-participants .participant-roster-controls .participant-search input,
html body .participant-roster-controls .participant-search input,
body.page-participants .participant-roster-controls .participant-search input,
body.page-participants .participant-search input,
body .participant-search input,
.participant-search input {
  padding-left: 42px !important;
  padding-right: 36px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  padding-inline: 42px 36px !important;
  padding-inline-start: 42px !important;
  padding-inline-end: 36px !important;
}

html#kauzariyya-theme body.page-participants .custom-select-wrap,
.custom-select-wrap {
  width: 100% !important;
  position: relative !important;
}

html#kauzariyya-theme body.page-participants .custom-select-trigger,
html#kauzariyya-theme body .custom-select-trigger,
.custom-select-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  cursor: pointer !important;
  user-select: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.custom-select-label {
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.custom-select-arrow {
  color: #4ee883 !important;
  font-size: 11px !important;
  margin-left: 6px !important;
  transition: transform 0.2s ease !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

.custom-select-wrap.is-open .custom-select-arrow {
  transform: rotate(180deg) !important;
}

/* Hide CSS pseudo element arrow to avoid double arrow artifact */
html#kauzariyya-theme body .custom-select-trigger::after,
.custom-select-trigger::after {
  display: none !important;
  content: none !important;
}

/* Search Icon Positioning */
html body.page-participants .participant-roster-controls .participant-search .search-icon,
html body .participant-roster-controls .participant-search .search-icon,
body.page-participants .participant-roster-controls .participant-search .search-icon,
body.page-participants .participant-search .search-icon,
body .participant-search .search-icon,
.participant-search .search-icon {
  position: absolute !important;
  left: 14px !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: rgba(255, 255, 255, 0.45) !important;
  pointer-events: none !important;
  transition: color 0.2s ease !important;
  margin: 0 !important;
  width: 15px !important;
  height: 15px !important;
  z-index: 5 !important;
}

html#kauzariyya-theme body.page-participants .participant-search .clear-search-btn,
.participant-search .clear-search-btn {
  position: absolute !important;
  right: 12px !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: none !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.5) !important;
  cursor: pointer !important;
  font-size: 11px !important;
  padding: 3px 5px !important;
  line-height: 1 !important;
  transition: color 0.15s ease !important;
}

.participant-search .clear-search-btn:hover {
  color: #ff5555 !important;
}

.participant-search input:focus + .search-icon {
  color: #4ee883 !important;
}

/* Hover Elevation & Glow */
html#kauzariyya-theme body.page-participants .participant-search input:hover,
html#kauzariyya-theme body .participant-search input:hover,
.participant-search input:hover,
html#kauzariyya-theme body.page-participants .custom-select-trigger:hover,
html#kauzariyya-theme body .custom-select-trigger:hover,
.custom-select-trigger:hover {
  background: rgba(78, 232, 131, 0.08) !important;
  border-color: rgba(78, 232, 131, 0.4) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), 0 0 12px rgba(78, 232, 131, 0.15) !important;
}

/* Tactile Click Animation */
html#kauzariyya-theme body.page-participants .participant-search input:active,
html#kauzariyya-theme body .participant-search input:active,
.participant-search input:active,
html#kauzariyya-theme body.page-participants .custom-select-trigger:active,
html#kauzariyya-theme body .custom-select-trigger:active,
.custom-select-trigger:active {
  transform: translateY(1px) scale(0.99) !important;
  border-color: #4ee883 !important;
  box-shadow: 0 2px 8px rgba(78, 232, 131, 0.3) !important;
}

/* Focus / Open Dropdown Glowing Border State */
html#kauzariyya-theme body.page-participants .participant-search input:focus,
html#kauzariyya-theme body .participant-search input:focus,
.participant-search input:focus,
html#kauzariyya-theme body .custom-select-wrap.is-open .custom-select-trigger,
.custom-select-wrap.is-open .custom-select-trigger {
  border-color: #4ee883 !important;
  background: rgba(6, 22, 14, 0.9) !important;
  box-shadow: 0 0 16px rgba(78, 232, 131, 0.3) !important;
}

/* ==========================================================================
   KAUZARIYYA THEMED SPOTLIGHT STAGE CARD REDESIGN
   ========================================================================== */
html body.page-participants .participant-left-box,
html body .participant-left-box,
body.page-participants .participant-left-box,
.participant-left-box {
  position: relative !important;
  padding: 32px 36px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(78, 232, 131, 0.22) !important;
  background: radial-gradient(circle at 15% 15%, rgba(78, 232, 131, 0.12) 0%, transparent 55%),
              radial-gradient(circle at 85% 85%, rgba(37, 174, 83, 0.08) 0%, transparent 60%),
              linear-gradient(160deg, rgba(6, 22, 14, 0.92) 0%, rgba(3, 12, 7, 0.96) 100%) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 35px rgba(78, 232, 131, 0.04) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 20px !important;
}

html body.page-participants .participant-left-box .live-spotlight-badge,
.participant-left-box .live-spotlight-badge,
.live-spotlight-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  background: rgba(78, 232, 131, 0.1) !important;
  border: 1px solid rgba(78, 232, 131, 0.3) !important;
  color: #4ee883 !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  box-shadow: 0 2px 12px rgba(78, 232, 131, 0.15) !important;
}

html body.page-participants .participant-left-box .spotlight-hero-category,
.participant-left-box .spotlight-hero-category,
.spotlight-hero-category {
  color: rgba(78, 232, 131, 0.9) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 4px !important;
}

html body.page-participants .participant-left-box .spotlight-hero-giant-name,
.participant-left-box .spotlight-hero-giant-name,
.spotlight-hero-giant-name {
  font-family: 'Plus Jakarta Sans', 'Ubuntu', sans-serif !important;
  font-size: clamp(30px, 3.8vw, 46px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;
  word-break: break-word !important;
  margin: 6px 0 16px 0 !important;
}

html body.page-participants .participant-left-box .spotlight-bottom-details,
.participant-left-box .spotlight-bottom-details,
.spotlight-bottom-details {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 14px !important;
}

html body.page-participants .participant-left-box .spotlight-category-pill,
html body.page-participants .participant-left-box .spotlight-code-pill,
.spotlight-category-pill,
.spotlight-code-pill {
  padding: 5px 12px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
}

html body.page-participants .participant-left-box .spotlight-team-pill,
.spotlight-team-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 5px 14px !important;
  border-radius: 8px !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  font-family: 'Amiri', 'Tajawal', 'Ubuntu', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
}

html body.page-participants .participant-left-box .spotlight-card-footer,
.participant-left-box .spotlight-card-footer,
.spotlight-card-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 18px !important;
  margin-top: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* ==========================================================================
   REDESIGNED PARTICIPANT ROSTER ITEM CARDS (ROUNDED BORDER & GREEN GLOW)
   ========================================================================== */
html#kauzariyya-theme body.page-participants .participant-row,
html#kauzariyya-theme body .participant-row,
body.page-participants .participant-row,
.participant-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  margin-bottom: 10px !important;
  border-radius: 16px !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

html#kauzariyya-theme body.page-participants .participant-row:hover,
html#kauzariyya-theme body .participant-row:hover,
.participant-row:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(78, 232, 131, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* Active / Live Speaker Box Card (Neon Green Border & Glow like Image 2) */
html#kauzariyya-theme body.page-participants .participant-row.active,
html#kauzariyya-theme body.page-participants .participant-row.is-live,
html#kauzariyya-theme body .participant-row.active,
body.page-participants .participant-row.active,
.participant-row.active {
  background: rgba(4, 18, 10, 0.85) !important;
  border: 1.5px solid #4ee883 !important;
  box-shadow: 0 0 18px rgba(78, 232, 131, 0.3), inset 0 0 12px rgba(78, 232, 131, 0.06) !important;
  border-radius: 16px !important;
}

/* Row Time Badge */
html#kauzariyya-theme body.page-participants .participant-row .row-time,
.participant-row .row-time {
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: rgba(255, 255, 255, 0.45) !important;
  min-width: 48px !important;
  padding-right: 12px !important;
  flex-shrink: 0 !important;
}

html#kauzariyya-theme body.page-participants .participant-row.active .row-time,
.participant-row.active .row-time {
  color: #4ee883 !important;
  text-shadow: 0 0 8px rgba(78, 232, 131, 0.4) !important;
}

/* Row Details */
.participant-row .row-details {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.participant-row .row-name {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.participant-row .row-sub {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
}

/* Order Tile Badge on Right */
html#kauzariyya-theme body.page-participants .participant-row .row-order-tile,
.participant-row .row-order-tile,
.participant-row .participant-order {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 8px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
}

html#kauzariyya-theme body.page-participants .participant-row.active .row-order-tile,
.participant-row.active .row-order-tile,
.participant-row.active .participant-order {
  background: #36d96b !important;
  border-color: #36d96b !important;
  color: #040e08 !important;
  box-shadow: 0 0 12px rgba(54, 217, 107, 0.5) !important;
}

/* ==========================================================================
   Comprehensive Mobile Responsive Design Overhaul (Phone & Tablet Optimization)
   ========================================================================== */

/* 1. Home Page Hero Heading Optimization - Bigger & High Impact on Mobile */
@media (max-width: 768px) {
  body.page-home .home-redesign-copy h1,
  html#kauzariyya-theme body.page-home .home-redesign-copy h1,
  body.page-home .home-hero h1,
  .home-redesign-copy h1 {
    font-size: clamp(48px, 14.5vw, 76px) !important;
    line-height: 0.94 !important;
    letter-spacing: -0.035em !important;
    font-weight: 900 !important;
    text-align: center !important;
    margin-top: 8px !important;
    margin-bottom: 14px !important;
  }

  body.page-home .home-hero-intro,
  .home-hero-intro {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    text-align: center !important;
    max-width: 92% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* 2. Top Navigation Bar Mobile Optimization - Fit All Elements Without Overflow */
@media (max-width: 768px) {
  body .site-header,
  body.page-home .site-header,
  body.page-admin .site-header,
  html#kauzariyya-theme body .site-header,
  .site-header {
    position: sticky !important;
    top: 6px !important;
    z-index: 1000 !important;
    width: calc(100% - 16px) !important;
    max-width: 100% !important;
    margin: 6px auto 16px !important;
    padding: 6px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
  }

  .site-logo {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  .site-logo img {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }

  .site-logo span {
    min-width: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .site-logo b {
    font-size: 11px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #ffffff !important;
  }

  .site-logo small {
    display: none !important;
  }

  .header-account-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
  }

  .festival-date {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 7px !important;
    border-radius: 8px !important;
    background: rgba(78, 232, 131, 0.08) !important;
    border: 1px solid rgba(78, 232, 131, 0.22) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .festival-date span {
    display: none !important;
  }

  .festival-date b {
    font-size: 9.5px !important;
    color: #4ee883 !important;
    font-weight: 800 !important;
  }

  .visitor-logout-floating,
  .visitor-logout {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    height: 32px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .visitor-logout .logout-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .visitor-logout .logout-icon svg {
    width: 14px !important;
    height: 14px !important;
  }

  .visitor-logout .logout-copy,
  .visitor-logout-floating .logout-copy,
  .visitor-logout .logout-copy small,
  .visitor-logout .logout-copy strong {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .festival-date {
    display: flex !important;
  }
  .visitor-logout-floating,
  .visitor-logout {
    padding: 0 !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 50% !important;
  }
}

/* 3. Participants & Live Stage Mobile Responsiveness - Single Column Full-Width Stacking */
@media (max-width: 960px) {
  body.page-participants .participant-stage-layout,
  body.page-participants .participant-layout,
  body.page-participants .two-column-layout,
  html#kauzariyya-theme body.page-participants .participant-stage-layout,
  html#kauzariyya-theme body.page-participants .participant-layout,
  .participant-stage-layout,
  .participant-layout,
  .two-column-layout {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.page-participants .participant-left-box,
  body.page-participants .speaker-card,
  body.page-participants .participant-live-card,
  html#kauzariyya-theme body.page-participants .participant-left-box,
  html#kauzariyya-theme body.page-participants .speaker-card,
  .participant-left-box,
  .speaker-card,
  .participant-live-card {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    padding: 24px 20px !important;
    box-sizing: border-box !important;
    border-radius: 22px !important;
  }

  body.page-participants .participant-left-box h2,
  body.page-participants .speaker-card h2,
  .speaker-card h2 {
    font-size: clamp(32px, 8vw, 48px) !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.08 !important;
  }

  body.page-participants .participant-list,
  html#kauzariyya-theme body.page-participants .participant-list,
  .participant-list {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 16px !important;
    box-sizing: border-box !important;
    border-radius: 22px !important;
  }

  .participant-roster-controls {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .participant-roster-controls .controls-row.filters-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .participant-roster-controls .controls-row.filters-row .control-group {
    flex: 1 1 0% !important;
    width: 50% !important;
    max-width: 50% !important;
    min-width: 0 !important;
  }

  .participant-results-scroll {
    max-height: 580px !important;
    width: 100% !important;
  }

  .participant-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 60px !important;
    padding: 12px 14px !important;
    box-sizing: border-box !important;
  }

  .participant-row .row-time {
    min-width: 44px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    flex-shrink: 0 !important;
  }

  .participant-row .row-details {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    overflow: hidden !important;
  }

  .participant-row .row-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
  }

  .participant-row .row-sub {
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .participant-row .row-order-tile {
    min-width: 34px !important;
    height: 34px !important;
    flex-shrink: 0 !important;
  }
}

/* 4. Scoreboard Page Mobile Optimization */
@media (max-width: 768px) {
  body.page-scoreboard .leaderboard-header h1,
  .leaderboard-header h1 {
    font-size: clamp(40px, 12vw, 62px) !important;
    line-height: 0.95 !important;
    text-align: center !important;
  }

  body.page-scoreboard .leader-identity-copy h2,
  .leader-identity-copy h2 {
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1.05 !important;
  }

  body.page-scoreboard .ranking-row,
  .ranking-row {
    padding: 12px 14px !important;
    gap: 10px !important;
    border-radius: 14px !important;
  }

  body.page-scoreboard .team-logo-mark,
  .team-logo-mark {
    width: 38px !important;
    height: 38px !important;
  }
}

/* 5. Schedule 3D Cards Mobile Optimization */
@media (max-width: 768px) {
  .home-schedule-3d-deck,
  html#kauzariyya-theme body .home-schedule-3d-deck {
    width: calc(100% - 16px) !important;
    padding: 20px 14px !important;
    margin: 20px auto 32px !important;
    border-radius: 22px !important;
    box-sizing: border-box !important;
  }

  .schedule-3d-head,
  html#kauzariyya-theme body .schedule-3d-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }

  .schedule-3d-action-btn,
  html#kauzariyya-theme body .schedule-3d-action-btn {
    width: 100% !important;
    justify-content: center !important;
    height: 44px !important;
    font-size: 12px !important;
  }

  .schedule-3d-grid,
  html#kauzariyya-theme body .schedule-3d-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .schedule-3d-card,
  html#kauzariyya-theme body .schedule-3d-card {
    width: 100% !important;
    padding: 20px 18px !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
  }
  .participant-left-box {
    padding: 18px 14px !important;
  }

  .schedule-3d-card {
    padding: 16px 14px !important;
  }
}

/* ==========================================================================
   PAGE-SPECIFIC HEADING ALIGNMENT & SPACING FIXES
   ========================================================================== */

/* 1. Scoreboard – Better heading alignment & spacing */
body.page-scoreboard .scoreboard-experience,
html#kauzariyya-theme body.page-scoreboard .scoreboard-experience {
  padding-top: 28px !important;
}

body.page-scoreboard .scoreboard-box-header,
html#kauzariyya-theme body .scoreboard-box-header {
  padding-left: 8px !important;
}

body.page-scoreboard .scoreboard-box-title,
html#kauzariyya-theme body .scoreboard-box-title {
  font-size: clamp(40px, 6vw, 68px) !important;
  line-height: 0.94 !important;
  letter-spacing: -0.03em !important;
}

body.page-scoreboard .scoreboard-live-badge,
html#kauzariyya-theme body .scoreboard-live-badge {
  margin-bottom: 14px !important;
}

@media (max-width: 768px) {
  body.page-scoreboard .scoreboard-box-header,
  html#kauzariyya-theme body .scoreboard-box-header {
    padding-left: 4px !important;
    gap: 12px !important;
  }

  body.page-scoreboard .scoreboard-box-title,
  html#kauzariyya-theme body .scoreboard-box-title {
    font-size: clamp(36px, 10vw, 52px) !important;
    line-height: 0.96 !important;
  }

  body.page-scoreboard .scoreboard-box-subtitle,
  html#kauzariyya-theme body .scoreboard-box-subtitle {
    text-align: left !important;
    font-size: 11px !important;
    max-width: 100% !important;
  }
}

/* 2. Programme Plan – Fix hero text clipping / overflow visibility */
body.page-musabaqa .musabaqa-plan-hero,
html#kauzariyya-theme body.page-musabaqa .musabaqa-plan-hero,
.musabaqa-plan-hero {
  overflow: visible !important;
  padding-top: 16px !important;
}

body.page-musabaqa .musabaqa-plan-hero h1,
html#kauzariyya-theme body .musabaqa-plan-hero h1 {
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;
  max-width: 100% !important;
  word-break: normal !important;
}

body.page-musabaqa .musabaqa-plan-hero > div:first-child > p:last-child,
html#kauzariyya-theme body .musabaqa-plan-hero > div:first-child > p:last-child {
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;
  max-width: 100% !important;
}

body.page-musabaqa .musabaqa-plan-stats,
html#kauzariyya-theme body .musabaqa-plan-stats {
  overflow: visible !important;
}

@media (max-width: 768px) {
  body.page-musabaqa .musabaqa-plan-hero,
  html#kauzariyya-theme body .musabaqa-plan-hero {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 12px 0 22px !important;
  }

  body.page-musabaqa .musabaqa-plan-hero h1,
  html#kauzariyya-theme body .musabaqa-plan-hero h1 {
    font-size: clamp(38px, 10vw, 52px) !important;
    max-width: 100% !important;
    line-height: 0.88 !important;
  }

  body.page-musabaqa .musabaqa-plan-hero > div:first-child > p:last-child {
    font-size: 11px !important;
    margin-top: 14px !important;
    max-width: 100% !important;
  }

  body.page-musabaqa .musabaqa-plan-stats {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  body.page-musabaqa .musabaqa-plan-stats span {
    min-width: 0 !important;
  }
}

/* 3. Review Page – Add gap between heading and top header navbar */
body.page-review .review-shell,
html#kauzariyya-theme body.page-review .review-shell {
  padding-top: clamp(30px, 6vw, 60px) !important;
  margin-top: 0 !important;
}

body.page-review .review-copy,
html#kauzariyya-theme body .review-copy {
  padding-top: 20px !important;
}

@media (max-width: 768px) {
  body.page-review .review-shell,
  html#kauzariyya-theme body.page-review .review-shell {
    padding-top: 24px !important;
    gap: 22px !important;
  }

  body.page-review .review-copy h1,
  html#kauzariyya-theme body .review-copy h1 {
    font-size: clamp(34px, 9vw, 48px) !important;
    line-height: 0.92 !important;
  }

  body.page-review .review-copy > p:last-child {
    font-size: 12px !important;
    max-width: 100% !important;
    margin-top: 16px !important;
  }
}

/* ==========================================================================
   GLOBAL PAGE HEADING LEFT MARGIN (10px) – ALL PAGES
   ========================================================================== */
body.page-scoreboard .scoreboard-box-header,
html#kauzariyya-theme body.page-scoreboard .scoreboard-box-header {
  padding-left: 10px !important;
}

body.page-scoreboard .scoreboard-experience,
html#kauzariyya-theme body.page-scoreboard .scoreboard-experience {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

body.page-participants .participant-title,
html#kauzariyya-theme body .participant-title {
  padding-left: 10px !important;
}

body.page-musabaqa .musabaqa-plan-hero,
html#kauzariyya-theme body .musabaqa-plan-hero {
  padding-left: 10px !important;
}

body.page-review .review-copy,
html#kauzariyya-theme body .review-copy {
  padding-left: 10px !important;
}

body.page-schedule .schedule-head,
html#kauzariyya-theme body .schedule-head {
  padding-left: 10px !important;
}

body.page-students .all-students-page > header,
body.page-students .public-student-directory > header,
html#kauzariyya-theme body.page-students .all-students-page > header {
  padding-left: 10px !important;
}

/* ==========================================================================
   MUSABAQA PLAN STATS BOX OVERFLOW FIX (15 PROGRAMMES / 08 COMMITTEE ROLES)
   ========================================================================== */
html body .musabaqa-plan-stats,
html#kauzariyya-theme body .musabaqa-plan-stats,
body.page-musabaqa .musabaqa-plan-stats,
.musabaqa-plan-stats {
  display: flex !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

html body .musabaqa-plan-stats span,
html#kauzariyya-theme body .musabaqa-plan-stats span,
body.page-musabaqa .musabaqa-plan-stats span,
.musabaqa-plan-stats span {
  flex: 1 1 0% !important;
  min-width: 115px !important;
  max-width: 170px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 16px 10px !important;
  border-radius: 16px !important;
  background: rgba(3, 20, 10, 0.92) !important;
  border: 1px solid rgba(78, 232, 131, 0.25) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

html body .musabaqa-plan-stats span strong,
html#kauzariyya-theme body .musabaqa-plan-stats span strong,
body.page-musabaqa .musabaqa-plan-stats span strong,
.musabaqa-plan-stats span strong {
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: clamp(28px, 4.5vw, 40px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
  text-align: center !important;
  display: block !important;
}

html body .musabaqa-plan-stats span small,
html#kauzariyya-theme body .musabaqa-plan-stats span small,
body.page-musabaqa .musabaqa-plan-stats span small,
.musabaqa-plan-stats span small {
  color: rgba(255, 255, 255, 0.75) !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: clamp(7.5px, 1.9vw, 9px) !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  line-height: 1.2 !important;
}

@media (max-width: 768px) {
  html body .musabaqa-plan-stats,
  html#kauzariyya-theme body .musabaqa-plan-stats,
  body.page-musabaqa .musabaqa-plan-stats,
  .musabaqa-plan-stats {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    gap: 10px !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
  }

  html body .musabaqa-plan-stats span,
  html#kauzariyya-theme body .musabaqa-plan-stats span,
  body.page-musabaqa .musabaqa-plan-stats span,
  .musabaqa-plan-stats span {
    flex: 1 1 50% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 14px 10px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  html body .musabaqa-plan-stats span strong,
  html#kauzariyya-theme body .musabaqa-plan-stats span strong,
  body.page-musabaqa .musabaqa-plan-stats span strong,
  .musabaqa-plan-stats span strong {
    font-size: clamp(26px, 7vw, 32px) !important;
    margin-bottom: 4px !important;
  }

  html body .musabaqa-plan-stats span small,
  html#kauzariyya-theme body .musabaqa-plan-stats span small,
  body.page-musabaqa .musabaqa-plan-stats span small,
  .musabaqa-plan-stats span small {
    font-size: clamp(7.5px, 2.2vw, 8.5px) !important;
    letter-spacing: 0.01em !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }
}

html body.page-participants .participant-empty-stage h2,
html body .participant-empty-stage h2,
.participant-empty-stage h2 {
  max-width: 100% !important;
  font-size: clamp(24px, 6vw, 42px) !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  line-height: 1.15 !important;
}

/* ==========================================================================
   PARTICIPANTS PAGE MOBILE & TABLET RESPONSIVE OVERHAUL
   ========================================================================== */

@media (max-width: 1024px) {
  /* Force Single Full-Width Column Stacking for Main Layout */
  html body.page-participants .participant-stage-layout,
  html body.page-participants .participant-layout,
  html body.page-participants .two-column-layout,
  html body .participant-stage-layout,
  html body .participant-layout,
  html body .two-column-layout,
  html#kauzariyya-theme body.page-participants .participant-stage-layout,
  html#kauzariyya-theme body.page-participants .participant-layout,
  html#kauzariyya-theme body .participant-stage-layout,
  html#kauzariyya-theme body .participant-layout,
  .participant-stage-layout,
  .participant-layout,
  .two-column-layout {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
  }

  /* Left Column Spotlight Card ("SPEAKING NOW") Mobile Enhancements */
  html body.page-participants .participant-left-box,
  html body .participant-left-box,
  html#kauzariyya-theme body.page-participants .participant-left-box,
  html#kauzariyya-theme body .participant-left-box,
  .participant-left-box {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    padding: 22px 18px !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* Participant Name Typography - No Middle Word Splitting */
  html body.page-participants .participant-left-box .spotlight-hero-giant-name,
  html body .participant-left-box .spotlight-hero-giant-name,
  .spotlight-hero-giant-name {
    font-size: clamp(24px, 6.5vw, 38px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.015em !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    margin: 8px 0 14px 0 !important;
  }

  /* Details Pills Row */
  html body.page-participants .participant-left-box .spotlight-bottom-details,
  html body .participant-left-box .spotlight-bottom-details,
  .spotlight-bottom-details {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }

  /* Spotlight Card Footer */
  html body.page-participants .participant-left-box .spotlight-card-footer,
  html body .participant-left-box .spotlight-card-footer,
  .spotlight-card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 16px !important;
    margin-top: 16px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  /* Right Column Participants Roster Panel Mobile Enhancements */
  html body.page-participants .participant-list,
  html body .participant-list,
  html#kauzariyya-theme body.page-participants .participant-list,
  html#kauzariyya-theme body .participant-list,
  .participant-list {
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px 14px !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
  }

  /* Column Header */
  html body.page-participants .participant-column-head,
  html body .participant-column-head,
  .participant-column-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-bottom: 14px !important;
  }

  .participant-column-head .column-title {
    font-size: 13.5px !important;
    letter-spacing: 0.1em !important;
  }

  /* Search & Filter Controls */
  .participant-roster-controls {
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }

  .participant-roster-controls .controls-row.search-row,
  .participant-roster-controls .controls-row.filters-row {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .participant-roster-controls .controls-row.filters-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
  }

  .participant-roster-controls .controls-row.filters-row .control-group {
    flex: 1 1 0% !important;
    width: 50% !important;
    min-width: 0 !important;
  }

  .participant-results-scroll {
    max-height: 520px !important;
    width: 100% !important;
    overflow-y: auto !important;
  }

  /* Participant Rows - Full Width Content Display */
  html body.page-participants .participant-row,
  html body .participant-row,
  html#kauzariyya-theme body .participant-row,
  .participant-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 58px !important;
    padding: 12px 14px !important;
    margin-bottom: 8px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }

  .participant-row .row-time {
    min-width: 46px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    flex-shrink: 0 !important;
  }

  .participant-row .row-details {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    overflow: hidden !important;
  }

  .participant-row .row-name {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .participant-row .row-sub {
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
  }

  .participant-row .row-order-tile {
    min-width: 34px !important;
    height: 34px !important;
    flex-shrink: 0 !important;
    border-radius: 9px !important;
    font-size: 12px !important;
  }

  /* Participants Title Page Header Summary Pills on Mobile */
  html body.page-participants .participant-title,
  html body .participant-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
  }

  html body.page-participants .participant-page-summary,
  html body .participant-page-summary {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
  }

  html body.page-participants .participant-page-summary .summary-pill,
  html body .participant-page-summary .summary-pill {
    flex: 1 1 0% !important;
    min-width: 130px !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  html body.page-participants .participant-page-summary .button-ghost-sm,
  html body .participant-page-summary .button-ghost-sm {
    width: 100% !important;
    justify-content: center !important;
    height: 40px !important;
    margin-top: 4px !important;
  }
}

/* ==========================================================================
   1. SCOREBOARD HEADING LEFT ALIGNMENT (IMAGE 1)
   ========================================================================== */
html body.page-scoreboard .scoreboard-box-header,
html body .scoreboard-box-header,
html#kauzariyya-theme body .scoreboard-box-header,
.scoreboard-box-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  width: 100% !important;
  gap: 12px !important;
  margin-bottom: 28px !important;
}

html body.page-scoreboard .scoreboard-box-title-group,
html body .scoreboard-box-title-group,
html#kauzariyya-theme body .scoreboard-box-title-group,
.scoreboard-box-title-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  width: 100% !important;
}

html body.page-scoreboard .scoreboard-box-title,
html body .scoreboard-box-title,
html#kauzariyya-theme body .scoreboard-box-title,
.scoreboard-box-title {
  text-align: left !important;
}

html body.page-scoreboard .scoreboard-box-subtitle,
html body .scoreboard-box-subtitle,
html#kauzariyya-theme body .scoreboard-box-subtitle,
.scoreboard-box-subtitle {
  text-align: left !important;
  max-width: 600px !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  html body.page-scoreboard .scoreboard-box-header,
  html body .scoreboard-box-header,
  html#kauzariyya-theme body .scoreboard-box-header,
  .scoreboard-box-header {
    align-items: flex-start !important;
    text-align: left !important;
    padding-left: 0 !important;
  }

  html body.page-scoreboard .scoreboard-box-subtitle,
  html body .scoreboard-box-subtitle,
  .scoreboard-box-subtitle {
    text-align: left !important;
  }
}

/* ==========================================================================
   2. EDATHALA LOCATION – GLASSMORPHIC CARD DESIGN (PREVIOUS DESIGN)
   ========================================================================== */

/* Desktop: 2-column grid with map on left, copy on right */
html#kauzariyya-theme body .home-footer-location,
body.page-home .home-footer-location,
.home-footer-location {
  display: grid !important;
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr) !important;
  gap: clamp(30px, 5vw, 60px) !important;
  align-items: center !important;
  width: min(1100px, calc(100% - 40px)) !important;
  max-width: 1100px !important;
  margin: 40px auto 20px !important;
  padding: 40px 36px !important;
  border-radius: 28px !important;
  background: radial-gradient(circle at 10% 10%, rgba(78, 232, 131, 0.10) 0%, transparent 55%),
              linear-gradient(165deg, rgba(8, 28, 17, 0.92) 0%, rgba(3, 14, 8, 0.96) 100%) !important;
  border: 1px solid rgba(78, 232, 131, 0.22) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

html#kauzariyya-theme body .footer-pulse-copy,
body.page-home .footer-pulse-copy,
.footer-pulse-copy {
  order: initial !important;
  width: 100% !important;
  padding: 0 !important;
}

html#kauzariyya-theme body .footer-pulse-copy > h2,
body.page-home .footer-pulse-copy > h2,
.footer-pulse-copy > h2 {
  font-size: clamp(34px, 5.5vw, 52px) !important;
  line-height: 1.06 !important;
  margin-bottom: 12px !important;
}

html#kauzariyya-theme body .footer-pulse-copy > p:not(.overline),
body.page-home .footer-pulse-copy > p:not(.overline),
.footer-pulse-copy > p:not(.overline) {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.68) !important;
  margin-bottom: 20px !important;
}

html#kauzariyya-theme body .footer-location-map,
body.page-home .home-footer-location .footer-location-map,
.home-footer-location .footer-location-map {
  order: initial !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 260px !important;
  aspect-ratio: auto !important;
  border-radius: 18px !important;
  border: 1px solid rgba(78, 232, 131, 0.25) !important;
  clip-path: inset(0 round 18px) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4) !important;
  margin: 0 !important;
  background: #dfe5e1 !important;
  overflow: hidden !important;
}

html#kauzariyya-theme body .footer-location-map iframe,
body.page-home .home-footer-location .footer-location-map iframe {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  filter: saturate(0.65) brightness(0.78) contrast(1.05) !important;
}

html#kauzariyya-theme body .footer-location-map::after,
.home-footer-location .footer-location-map::after {
  display: none !important;
}

/* Google Maps Button – Match Edathala card style */
html#kauzariyya-theme body .footer-directions-link,
body.page-home .footer-directions-link,
.footer-directions-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 28px !important;
  border-radius: 99px !important;
  border: 1.5px solid rgba(78, 232, 131, 0.45) !important;
  background: linear-gradient(135deg, #1c7e3b, #15803d) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(28, 126, 59, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html#kauzariyya-theme body .footer-directions-link:hover,
body.page-home .footer-directions-link:hover,
.footer-directions-link:hover {
  transform: translateY(-2px) scale(1.02) !important;
  border-color: #4ee883 !important;
  background: linear-gradient(135deg, #25a34e, #1c7e3b) !important;
  box-shadow: 0 10px 28px rgba(28, 126, 59, 0.5), 0 0 20px rgba(78, 232, 131, 0.3) !important;
}

/* Mobile: single-column stacking with glassmorphic card */
@media (max-width: 860px) {
  html#kauzariyya-theme body .home-footer-location,
  body.page-home .home-footer-location,
  .home-footer-location {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
    padding: 24px 20px !important;
    width: calc(100% - 24px) !important;
    margin: 28px auto 40px !important;
    border-radius: 26px !important;
  }

  html#kauzariyya-theme body .footer-pulse-copy,
  .footer-pulse-copy {
    order: 1 !important;
  }

  html#kauzariyya-theme body .home-footer-location .footer-location-map,
  .home-footer-location .footer-location-map {
    order: 2 !important;
    height: 180px !important;
  }

  html#kauzariyya-theme body .footer-directions-link,
  .footer-directions-link {
    width: 100% !important;
    justify-content: center !important;
    height: 48px !important;
  }
}

/* HIDE entire location section from Review page */
body.page-review .home-footer-location,
body.page-review .home-footer-pulse,
html#kauzariyya-theme body.page-review .home-footer-location {
  display: none !important;
}

/* ==========================================================================
   3. "ALL DIRECTORY" BUTTON – MATCH "EXPLORE STUDENT DIRECTORY" STYLE
   ========================================================================== */
html body.page-participants .participant-page-summary a,
html body .participant-page-summary a,
html body .button-ghost-sm,
html#kauzariyya-theme body .participant-page-summary a,
.participant-page-summary a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 12px 28px !important;
  border-radius: 99px !important;
  border: 1.5px solid rgba(78, 232, 131, 0.45) !important;
  background: linear-gradient(135deg, #1c7e3b, #15803d) !important;
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(28, 126, 59, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html body.page-participants .participant-page-summary a:hover,
html body .participant-page-summary a:hover,
html body .button-ghost-sm:hover,
html#kauzariyya-theme body .participant-page-summary a:hover,
.participant-page-summary a:hover {
  transform: translateY(-2px) scale(1.02) !important;
  border-color: #4ee883 !important;
  background: linear-gradient(135deg, #25a34e, #1c7e3b) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 28px rgba(28, 126, 59, 0.5), 0 0 20px rgba(78, 232, 131, 0.3) !important;
}

html body.page-participants .participant-page-summary a b,
html body .participant-page-summary a b,
html body .button-ghost-sm b {
  display: inline-block !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  color: #4ee883 !important;
  transition: transform 0.3s ease !important;
}

html body.page-participants .participant-page-summary a:hover b,
html body .participant-page-summary a:hover b,
html body .button-ghost-sm:hover b {
  color: #ffffff !important;
}

/* ==========================================================================
   4. STATS BOX GAP – More spacing between the number and label
   ========================================================================== */
html body .musabaqa-plan-stats span strong,
html#kauzariyya-theme body .musabaqa-plan-stats span strong,
body.page-musabaqa .musabaqa-plan-stats span strong,
.musabaqa-plan-stats span strong {
  margin-bottom: 8px !important;
}

/* ==========================================================================
   5. HOME LOCATION CARD - compact circular map treatment
   ========================================================================== */
html#kauzariyya-theme body.page-home .home-footer-location,
body.page-home .home-footer-location {
  position: relative !important;
  isolation: isolate !important;
  display: grid !important;
  grid-template-columns: clamp(260px, 26vw, 380px) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(28px, 4.5vw, 62px) !important;
  width: min(1160px, calc(100% - 34px)) !important;
  max-width: 1160px !important;
  min-height: 0 !important;
  margin: clamp(24px, 3.5vw, 38px) auto 20px !important;
  padding: clamp(17px, 2.4vw, 28px) clamp(18px, 3vw, 36px) !important;
  border: 1px solid rgba(122, 240, 154, 0.26) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(145deg, rgba(9, 43, 23, 0.96), rgba(3, 18, 10, 0.985) 56%, rgba(2, 12, 7, 0.98)) !important;
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.075) !important;
  overflow: hidden !important;
  text-align: left !important;
}

html#kauzariyya-theme body.page-home .home-footer-location::before,
body.page-home .home-footer-location::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  z-index: -1 !important;
  border-radius: 25px !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.045), transparent 32%),
    linear-gradient(180deg, rgba(126, 244, 158, 0.055), transparent 58%) !important;
  pointer-events: none !important;
}

html#kauzariyya-theme body.page-home .home-footer-location .footer-location-map,
body.page-home .home-footer-location .footer-location-map {
  order: initial !important;
  justify-self: center !important;
  width: clamp(250px, 25vw, 360px) !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 2px solid rgba(236, 241, 237, 0.78) !important;
  border-radius: 50% !important;
  clip-path: circle(50% at 50% 50%) !important;
  background: #d8ddd9 !important;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.36),
    0 0 0 7px rgba(255, 255, 255, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
  transform: translateZ(0) !important;
}

html#kauzariyya-theme body.page-home .home-footer-location .footer-location-map:hover,
body.page-home .home-footer-location .footer-location-map:hover {
  transform: translateY(-3px) translateZ(0) !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.42),
    0 0 0 8px rgba(112, 239, 150, 0.075),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22) !important;
}

html#kauzariyya-theme body.page-home .home-footer-location .footer-location-map iframe,
body.page-home .home-footer-location .footer-location-map iframe {
  position: absolute !important;
  inset: -42px !important;
  width: calc(100% + 84px) !important;
  height: calc(100% + 84px) !important;
  max-width: none !important;
  border: 0 !important;
  filter: grayscale(1) saturate(0.26) brightness(0.9) contrast(1.08) !important;
  pointer-events: auto !important;
}

html#kauzariyya-theme body.page-home .home-footer-location .footer-location-map::after,
body.page-home .home-footer-location .footer-location-map::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 44%),
    radial-gradient(circle at 50% 58%, transparent 48%, rgba(4, 15, 9, 0.2) 100%) !important;
  pointer-events: none !important;
}

html#kauzariyya-theme body.page-home .home-footer-location .footer-pulse-copy,
body.page-home .home-footer-location .footer-pulse-copy {
  width: min(100%, 540px) !important;
  padding: 0 !important;
}

html#kauzariyya-theme body.page-home .home-footer-location .footer-pulse-copy > .overline,
body.page-home .home-footer-location .footer-pulse-copy > .overline {
  margin: 0 0 10px !important;
  color: #84f0a0 !important;
  font-size: 8px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.18em !important;
}

html#kauzariyya-theme body.page-home .home-footer-location .footer-pulse-copy > h2,
body.page-home .home-footer-location .footer-pulse-copy > h2 {
  margin: 0 0 14px !important;
  color: #f7fff8 !important;
  font-size: clamp(32px, 3.8vw, 48px) !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
}

html#kauzariyya-theme body.page-home .home-footer-location .footer-pulse-copy > p:not(.overline),
body.page-home .home-footer-location .footer-pulse-copy > p:not(.overline) {
  max-width: 470px !important;
  margin: 0 !important;
  color: rgba(242, 255, 246, 0.7) !important;
  font-size: 12.5px !important;
  line-height: 1.62 !important;
}

html#kauzariyya-theme body.page-home .home-footer-location .footer-directions-link,
body.page-home .home-footer-location .footer-directions-link {
  width: max-content !important;
  min-width: 0 !important;
  min-height: 44px !important;
  height: auto !important;
  margin-top: 20px !important;
  padding: 7px 18px 7px 9px !important;
  gap: 10px !important;
  border: 1px solid rgba(111, 240, 150, 0.42) !important;
  border-radius: 999px !important;
  background: rgba(6, 25, 13, 0.72) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.11) !important;
  color: #ffffff !important;
  font-size: 10.5px !important;
  letter-spacing: 0.09em !important;
}

html#kauzariyya-theme body.page-home .home-footer-location .footer-directions-link:hover,
body.page-home .home-footer-location .footer-directions-link:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(132, 240, 160, 0.82) !important;
  background: rgba(10, 45, 24, 0.88) !important;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.38),
    0 0 24px rgba(90, 229, 123, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

html#kauzariyya-theme body.page-home .home-footer-location .footer-directions-link .btn-gmap-badge,
body.page-home .home-footer-location .footer-directions-link .btn-gmap-badge {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
}

@media (max-width: 760px) {
  html#kauzariyya-theme body.page-home .home-footer-location,
  body.page-home .home-footer-location {
    grid-template-columns: 98px minmax(0, 1fr) !important;
    gap: 14px !important;
    width: calc(100% - 24px) !important;
    margin: 24px auto 26px !important;
    padding: 15px !important;
    border-radius: 22px !important;
  }

  html#kauzariyya-theme body.page-home .home-footer-location::before,
  body.page-home .home-footer-location::before {
    border-radius: 21px !important;
  }

  html#kauzariyya-theme body.page-home .home-footer-location .footer-location-map,
  body.page-home .home-footer-location .footer-location-map {
    width: 96px !important;
  }

  html#kauzariyya-theme body.page-home .home-footer-location .footer-pulse-copy > h2,
  body.page-home .home-footer-location .footer-pulse-copy > h2 {
    margin-bottom: 10px !important;
    font-size: clamp(27px, 7.8vw, 36px) !important;
    line-height: 1 !important;
  }

  html#kauzariyya-theme body.page-home .home-footer-location .footer-pulse-copy > p:not(.overline),
  body.page-home .home-footer-location .footer-pulse-copy > p:not(.overline) {
    font-size: 11px !important;
    line-height: 1.5 !important;
  }

  html#kauzariyya-theme body.page-home .home-footer-location .footer-directions-link,
  body.page-home .home-footer-location .footer-directions-link {
    min-height: 40px !important;
    margin-top: 15px !important;
    padding-right: 15px !important;
    font-size: 9px !important;
    letter-spacing: 0.08em !important;
  }
}

@media (max-width: 520px) {
  html#kauzariyya-theme body.page-home .home-footer-location,
  body.page-home .home-footer-location {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 18px !important;
    width: calc(100% - 20px) !important;
    margin-top: 22px !important;
    padding: 18px 14px 22px !important;
    border-radius: 24px !important;
    background:
      linear-gradient(155deg, rgba(8, 39, 22, 0.96), rgba(3, 17, 10, 0.99) 58%, rgba(2, 11, 7, 0.98)) !important;
    box-shadow:
      0 18px 44px rgba(0, 0, 0, 0.38),
      inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    text-align: center !important;
  }

  html#kauzariyya-theme body.page-home .home-footer-location::before,
  body.page-home .home-footer-location::before {
    border-radius: 23px !important;
  }

  html#kauzariyya-theme body.page-home .home-footer-location .footer-location-map,
  body.page-home .home-footer-location .footer-location-map {
    width: min(282px, calc(100vw - 70px)) !important;
    max-width: 100% !important;
    border-width: 2px !important;
    border-color: rgba(245, 247, 245, 0.82) !important;
    box-shadow:
      0 14px 34px rgba(0, 0, 0, 0.36),
      0 0 0 8px rgba(255, 255, 255, 0.045),
      inset 0 0 0 1px rgba(255, 255, 255, 0.22) !important;
  }

  html#kauzariyya-theme body.page-home .home-footer-location .footer-location-map iframe,
  body.page-home .home-footer-location .footer-location-map iframe {
    inset: -40px !important;
    width: calc(100% + 80px) !important;
    height: calc(100% + 80px) !important;
    filter: grayscale(1) saturate(0.25) brightness(0.76) contrast(1.12) !important;
  }

  html#kauzariyya-theme body.page-home .home-footer-location .footer-location-map::after,
  body.page-home .home-footer-location .footer-location-map::after {
    background:
      radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.03), transparent 34%),
      radial-gradient(circle at 50% 55%, transparent 50%, rgba(2, 8, 5, 0.28) 100%) !important;
  }

  html#kauzariyya-theme body.page-home .home-footer-location .footer-pulse-copy,
  body.page-home .home-footer-location .footer-pulse-copy {
    display: grid !important;
    justify-items: center !important;
    width: 100% !important;
    text-align: center !important;
  }

  html#kauzariyya-theme body.page-home .home-footer-location .footer-pulse-copy > h2,
  body.page-home .home-footer-location .footer-pulse-copy > h2 {
    font-size: clamp(31px, 10vw, 40px) !important;
  }

  html#kauzariyya-theme body.page-home .home-footer-location .footer-pulse-copy > p:not(.overline),
  body.page-home .home-footer-location .footer-pulse-copy > p:not(.overline) {
    max-width: 28rem !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
  }

  html#kauzariyya-theme body.page-home .home-footer-location .footer-directions-link,
  body.page-home .home-footer-location .footer-directions-link {
    width: min(100%, 260px) !important;
    justify-content: center !important;
  }
}

@media (max-width: 380px) {
  html#kauzariyya-theme body.page-home .home-footer-location .footer-location-map,
  body.page-home .home-footer-location .footer-location-map {
    width: min(246px, calc(100vw - 62px)) !important;
  }
}

/* Final footer refinements: keep the map colorful, make the circular treatment
   transparent outside the map, and keep the social row compact but legible. */
html#kauzariyya-theme body.page-home .home-footer-location,
body.page-home .home-footer-location {
  gap: clamp(18px, 2.8vw, 34px) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html#kauzariyya-theme body.page-home .home-footer-location::before,
body.page-home .home-footer-location::before {
  display: none !important;
}

/* Keep the mobile navbar in the same top-centered position on every public
   page, including home when its content is rendered after the header. */
@media (max-width: 768px) {
  html body .site-header {
    position: fixed !important;
    top: 12px !important;
    left: 50% !important;
    right: auto !important;
    width: calc(100% - 24px) !important;
    max-width: 580px !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    z-index: 3000 !important;
  }
}

/* Schedule tabs: match the compact emerald glass controls used elsewhere. */
@media (max-width: 560px) {
  html body.page-schedule .schedule-tabs,
  html#kauzariyya-theme body.page-schedule .schedule-tabs {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 22px !important;
    padding: 4px !important;
    gap: 3px !important;
    overflow-x: auto !important;
    border: 1px solid rgba(78, 232, 131, .30) !important;
    border-radius: 14px !important;
    background: rgba(4, 14, 8, .92) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  html body.page-schedule .schedule-tabs button,
  html#kauzariyya-theme body.page-schedule .schedule-tabs button {
    flex: 1 0 auto !important;
    min-width: 68px !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: rgba(239, 255, 243, .62) !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    transition: transform .18s ease, color .18s ease, background .18s ease, border-color .18s ease !important;
  }

  html body.page-schedule .schedule-tabs button:hover,
  html#kauzariyya-theme body.page-schedule .schedule-tabs button:hover {
    color: #f4fff6 !important;
    background: rgba(78, 232, 131, .10) !important;
    transform: translateY(-1px) !important;
  }

  html body.page-schedule .schedule-tabs button.active,
  html#kauzariyya-theme body.page-schedule .schedule-tabs button.active {
    border-color: rgba(111, 241, 151, .58) !important;
    background: linear-gradient(135deg, #168344, #0c5d2c) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 14px rgba(12, 93, 44, .35), inset 0 1px 0 rgba(255,255,255,.16) !important;
  }

  html body.page-schedule .schedule-tabs button:active,
  html#kauzariyya-theme body.page-schedule .schedule-tabs button:active {
    transform: scale(.96) !important;
  }
}

html#kauzariyya-theme body.page-home .home-footer-location .footer-location-map,
body.page-home .home-footer-location .footer-location-map {
  background: transparent !important;
}

html#kauzariyya-theme body.page-home .home-footer-location .footer-location-map iframe,
body.page-home .home-footer-location .footer-location-map iframe {
  filter: saturate(1.12) brightness(1.02) contrast(1.03) !important;
}

html#kauzariyya-theme body.page-home .home-footer-location .footer-location-map::after,
body.page-home .home-footer-location .footer-location-map::after {
  background: radial-gradient(circle at 50% 58%, transparent 52%, rgba(0, 0, 0, 0.08) 100%) !important;
}

html#kauzariyya-theme body.page-home .site-footer.simple-social-footer.home-institution-footer,
body.page-home .site-footer.simple-social-footer.home-institution-footer {
  min-height: 0 !important;
  margin-top: 26px !important;
  padding-top: 34px !important;
  padding-bottom: 30px !important;
  gap: 14px !important;
}

html#kauzariyya-theme body.page-home .home-institution-footer > .simple-social-icons,
body.page-home .home-institution-footer > .simple-social-icons {
  gap: 10px !important;
}

html#kauzariyya-theme body.page-home .home-institution-footer > .simple-social-icons a,
body.page-home .home-institution-footer > .simple-social-icons a {
  width: 44px !important;
  height: 44px !important;
}

html#kauzariyya-theme body.page-home .home-institution-footer > .simple-social-icons svg,
body.page-home .home-institution-footer > .simple-social-icons svg {
  width: 28px !important;
  height: 28px !important;
}

@media (max-width: 600px) {
  html#kauzariyya-theme body.page-home .site-footer.simple-social-footer.home-institution-footer,
  body.page-home .site-footer.simple-social-footer.home-institution-footer {
    margin-top: 20px !important;
    margin-bottom: 34px !important;
    padding: 28px 18px 24px !important;
    gap: 14px !important;
  }

  html#kauzariyya-theme body.page-home .home-institution-footer > .simple-social-icons,
  body.page-home .home-institution-footer > .simple-social-icons {
    gap: 8px !important;
  }

  html#kauzariyya-theme body.page-home .home-institution-footer > .simple-social-icons a,
  body.page-home .home-institution-footer > .simple-social-icons a {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 10px !important;
  }

  html#kauzariyya-theme body.page-home .home-institution-footer > .simple-social-icons svg,
  body.page-home .home-institution-footer > .simple-social-icons svg {
    width: 25px !important;
    height: 25px !important;
  }
}

@media (max-width: 600px) {
  html#kauzariyya-theme body.page-home .home-institution-footer > .simple-social-icons,
  body.page-home .home-institution-footer > .simple-social-icons {
    justify-content: flex-start !important;
    gap: 8px !important;
    padding-inline: 0 !important;
  }

  html#kauzariyya-theme body.page-home .home-institution-footer > .simple-social-icons a,
  body.page-home .home-institution-footer > .simple-social-icons a {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 10px !important;
  }

  html#kauzariyya-theme body.page-home .home-institution-footer > .simple-social-icons svg,
  body.page-home .home-institution-footer > .simple-social-icons svg {
    width: 25px !important;
    height: 25px !important;
  }
}

/* Match the participant "All Directory" action to the students directory CTA. */
html#kauzariyya-theme body.page-participants .participant-page-summary > a.button.button-ghost-sm,
body.page-participants .participant-page-summary > a.button.button-ghost-sm,
html body.page-participants .participant-page-summary > a.button-ghost-sm {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 50px !important;
  height: 50px !important;
  padding: 12px 26px !important;
  border: 1.5px solid rgba(78, 232, 131, 0.45) !important;
  border-radius: 99px !important;
  background:
    linear-gradient(135deg, rgba(37, 163, 78, 0.98), rgba(21, 128, 61, 0.98)) !important;
  color: #ffffff !important;
  font-family: 'Ubuntu', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  text-transform: none !important;
  text-decoration: none !important;
  box-shadow:
    0 8px 24px rgba(28, 126, 59, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  justify-self: stretch !important;
}

html#kauzariyya-theme body.page-participants .participant-page-summary > a.button.button-ghost-sm::before,
body.page-participants .participant-page-summary > a.button.button-ghost-sm::before {
  display: none !important;
}

html#kauzariyya-theme body.page-participants .participant-page-summary > a.button.button-ghost-sm:hover,
body.page-participants .participant-page-summary > a.button.button-ghost-sm:hover,
html body.page-participants .participant-page-summary > a.button-ghost-sm:hover {
  transform: translateY(-2px) scale(1.02) !important;
  border-color: #4ee883 !important;
  background: linear-gradient(135deg, #25a34e, #1c7e3b) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 28px rgba(28, 126, 59, 0.5), 0 0 20px rgba(78, 232, 131, 0.3) !important;
}

html#kauzariyya-theme body.page-participants .participant-page-summary > a.button.button-ghost-sm b,
body.page-participants .participant-page-summary > a.button.button-ghost-sm b,
html body.page-participants .participant-page-summary > a.button-ghost-sm b {
  display: inline-block !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  transform: none !important;
}

@media (max-width: 760px) {
  html#kauzariyya-theme body.page-participants .participant-page-summary > a.button.button-ghost-sm,
  body.page-participants .participant-page-summary > a.button.button-ghost-sm,
  html body.page-participants .participant-page-summary > a.button-ghost-sm {
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    padding: 12px 24px !important;
    justify-self: stretch !important;
  }
}

/* Keep the Musabaqa stat labels inside the mobile viewport. */
@media (max-width: 768px) {
  html#kauzariyya-theme body.page-musabaqa .musabaqa-plan-stats,
  body.page-musabaqa .musabaqa-plan-stats,
  html body.page-musabaqa .musabaqa-plan-stats {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: stretch !important;
    overflow: hidden !important;
  }

  html#kauzariyya-theme body.page-musabaqa .musabaqa-plan-stats span,
  body.page-musabaqa .musabaqa-plan-stats span,
  html body.page-musabaqa .musabaqa-plan-stats span {
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
    padding: 13px 8px !important;
    align-items: center !important;
    text-align: center !important;
  }

  html#kauzariyya-theme body.page-musabaqa .musabaqa-plan-stats span small,
  body.page-musabaqa .musabaqa-plan-stats span small,
  html body.page-musabaqa .musabaqa-plan-stats span small {
    max-width: 8.5em !important;
    margin-inline: auto !important;
    font-size: clamp(7px, 2vw, 8px) !important;
    letter-spacing: 0 !important;
    line-height: 1.15 !important;
  }
}

/* Final mobile polish: explicit tap feedback, clearer page breathing room,
   and a more structured schedule card stack. */
@keyframes mobileNavTap {
  0% { transform: scale(1) translateY(0); filter: drop-shadow(0 0 0 transparent); }
  24% { transform: scale(.84) translateY(2px); filter: drop-shadow(0 0 2px rgba(78, 232, 131, .25)); }
  52% { transform: scale(1.28) translateY(-4px); filter: drop-shadow(0 0 12px rgba(78, 232, 131, .9)); }
  78% { transform: scale(.96) translateY(1px); filter: drop-shadow(0 0 7px rgba(78, 232, 131, .55)); }
  100% { transform: scale(1) translateY(0); filter: drop-shadow(0 0 0 transparent); }
}

@keyframes mobileNavTapBox {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-2px) scale(.96); }
  65% { transform: translateY(0) scale(1.035); }
}

.mobile-tabbar a.tap-animate {
  animation: mobileNavTapBox .56s cubic-bezier(.2, .8, .2, 1) both !important;
}

.mobile-tabbar a.tap-animate .tab-glyph-svg {
  animation: mobileNavTap .56s cubic-bezier(.2, .8, .2, 1) both !important;
}

.mobile-tabbar a.tap-animate .tab-glyph-svg svg {
  animation: none !important;
}

@media (max-width: 560px) {
  /* Fixed top header → page content gap */
  html body.page-schedule .schedule-head,
  html body.page-participants .participant-shell,
  html body.page-review .review-shell {
    padding-top: 30px !important;
    margin-top: 0 !important;
  }

  /* Schedule tabs and cards */
  html body.page-schedule .schedule-tabs,
  html#kauzariyya-theme body.page-schedule .schedule-tabs {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 14px !important;
    padding: 4px !important;
    gap: 4px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    border-radius: 14px !important;
    background: rgba(4, 16, 9, .72) !important;
    border: 1px solid rgba(78, 232, 131, .22) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px rgba(0,0,0,.22) !important;
  }

  html body.page-schedule .schedule-tabs::-webkit-scrollbar { display: none; }

  html body.page-schedule .schedule-tabs button,
  html#kauzariyya-theme body.page-schedule .schedule-tabs button {
    flex: 1 0 auto !important;
    min-width: 72px !important;
    min-height: 34px !important;
    padding: 7px 12px !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: rgba(235, 255, 240, .66) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
  }

  html body.page-schedule .schedule-tabs button.active,
  html#kauzariyya-theme body.page-schedule .schedule-tabs button.active {
    color: #06150b !important;
    background: linear-gradient(135deg, #4ee883, #9bffb5) !important;
    box-shadow: 0 5px 16px rgba(78, 232, 131, .24) !important;
  }

  html body.page-schedule .schedule-grid,
  html#kauzariyya-theme body.page-schedule .schedule-grid {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.page-schedule .schedule-column,
  html#kauzariyya-theme body.page-schedule .schedule-column {
    margin: 0 !important;
    border: 1px solid rgba(78, 232, 131, .34) !important;
    border-radius: 18px !important;
    background:
      linear-gradient(145deg, rgba(8, 42, 22, .9), rgba(3, 18, 10, .92)) !important;
    box-shadow: 0 18px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08) !important;
    overflow: hidden !important;
  }

  html body.page-schedule .schedule-column:not(.mobile-active) {
    display: none !important;
  }

  html body.page-schedule .schedule-column > header,
  html#kauzariyya-theme body.page-schedule .schedule-column > header {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 58px !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
    background: linear-gradient(90deg, rgba(78,232,131,.14), rgba(78,232,131,.03)) !important;
  }

  html body.page-schedule .schedule-column > header > span {
    display: grid !important;
    place-items: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 9px !important;
    color: #082013 !important;
    background: #4ee883 !important;
    font-size: 10px !important;
    font-weight: 900 !important;
  }

  html body.page-schedule .schedule-column > header h2 {
    margin: 0 !important;
    color: #fff !important;
    font-size: 16px !important;
    line-height: 1.05 !important;
  }

  html body.page-schedule .schedule-column > header small {
    color: rgba(234,255,239,.56) !important;
    font-size: 8px !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
    text-align: right !important;
  }

  html body.page-schedule .schedule-row,
  html#kauzariyya-theme body.page-schedule .schedule-row {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 72px !important;
    padding: 13px 14px !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    background: rgba(0,0,0,.08) !important;
  }

  html body.page-schedule .schedule-row:first-of-type { border-top: 0 !important; }

  html body.page-schedule .schedule-row time {
    color: #a6ffc0 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: -.02em !important;
  }

  html body.page-schedule .schedule-row h3 {
    margin: 0 0 3px !important;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  html body.page-schedule .schedule-row p {
    margin: 0 !important;
    color: rgba(234,255,239,.6) !important;
    font-size: 9px !important;
    line-height: 1.25 !important;
  }

  html body.page-schedule .schedule-row > small {
    color: rgba(234,255,239,.62) !important;
    font-size: 8px !important;
    white-space: nowrap !important;
  }

  html body.page-schedule .schedule-row.live {
    background: linear-gradient(90deg, rgba(78,232,131,.14), rgba(78,232,131,.03)) !important;
    box-shadow: inset 3px 0 0 #4ee883 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-tabbar a.tap-animate,
  .mobile-tabbar a.tap-animate .tab-glyph-svg {
    animation: none !important;
  }
}

/* Map finish: retain the map color, but add a restrained dark treatment so
   labels stay readable and the map does not look overly bright. */
html#kauzariyya-theme body.page-home .home-footer-location,
body.page-home .home-footer-location {
  padding: clamp(14px, 2vw, 24px) !important;
  border: 1px solid rgba(142, 237, 167, .22) !important;
  border-radius: 24px !important;
  background: linear-gradient(145deg, rgba(7, 20, 12, .78), rgba(2, 9, 5, .88)) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

html#kauzariyya-theme body.page-home .home-footer-location .footer-location-map,
body.page-home .home-footer-location .footer-location-map {
  border-color: rgba(245, 248, 246, .9) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.38), 0 0 0 6px rgba(255,255,255,.035), inset 0 0 0 1px rgba(255,255,255,.2) !important;
}

html#kauzariyya-theme body.page-home .home-footer-location .footer-location-map iframe,
body.page-home .home-footer-location .footer-location-map iframe {
  filter: saturate(.86) brightness(.8) contrast(1.08) !important;
}

html#kauzariyya-theme body.page-home .home-footer-location .footer-location-map::after,
body.page-home .home-footer-location .footer-location-map::after {
  display: block !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.24)),
    radial-gradient(circle at 50% 48%, transparent 44%, rgba(0,0,0,.34) 100%) !important;
}

/* Restore the compact, two-card home schedule treatment shown in the reference. */
@media (max-width: 560px) {
  html body.page-home .home-schedule-3d-deck,
  html#kauzariyya-theme body.page-home .home-schedule-3d-deck {
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px auto 30px !important;
    padding: 16px 10px !important;
    border-radius: 20px !important;
    background: linear-gradient(145deg, rgba(5, 22, 12, .86), rgba(2, 10, 6, .94)) !important;
    border-color: rgba(78,232,131,.24) !important;
    box-shadow: 0 18px 38px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.07) !important;
  }

  html body.page-home .schedule-3d-head,
  html#kauzariyya-theme body.page-home .schedule-3d-head {
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  html body.page-home .schedule-3d-copy .overline,
  html#kauzariyya-theme body.page-home .schedule-3d-copy .overline {
    margin-bottom: 4px !important;
    font-size: 8px !important;
  }

  html body.page-home .schedule-3d-copy h2#home-schedule-3d-title,
  html#kauzariyya-theme body.page-home .schedule-3d-copy h2#home-schedule-3d-title {
    font-size: clamp(22px, 7vw, 29px) !important;
    line-height: 1.03 !important;
  }

  html body.page-home .schedule-3d-action-btn,
  html#kauzariyya-theme body.page-home .schedule-3d-action-btn {
    width: 100% !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 5px 10px !important;
    font-size: 8px !important;
    letter-spacing: .1em !important;
  }

  html body.page-home .schedule-3d-grid,
  html#kauzariyya-theme body.page-home .schedule-3d-grid {
    gap: 10px !important;
  }

  html body.page-home .schedule-3d-card,
  html#kauzariyya-theme body.page-home .schedule-3d-card {
    min-height: 160px !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    transform: none !important;
    animation: none !important;
  }

  html body.page-home .schedule-3d-card .card-3d-inner,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-inner {
    min-height: 136px !important;
    padding: 0 !important;
  }

  html body.page-home .schedule-3d-card .card-3d-head,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-head {
    margin: 0 !important;
  }

  html body.page-home .schedule-3d-card .card-3d-badge,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-pill {
    padding: 3px 7px !important;
    font-size: 7px !important;
    letter-spacing: .08em !important;
  }

  html body.page-home .schedule-3d-card .card-3d-body,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-body {
    gap: 10px !important;
    margin: 14px 0 9px !important;
  }

  html body.page-home .schedule-3d-card .card-3d-number,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-number {
    font-size: 44px !important;
  }

  html body.page-home .schedule-3d-card .card-3d-date-meta strong,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-date-meta strong {
    font-size: 12px !important;
  }

  html body.page-home .schedule-3d-card .card-3d-date-meta small,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-date-meta small {
    font-size: 7px !important;
  }

  html body.page-home .schedule-3d-card .card-3d-foot,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-foot {
    margin-top: 0 !important;
    padding-top: 8px !important;
    font-size: 8px !important;
  }
}

/* Final schedule-page mobile layout correction */
@media (max-width: 560px) {
  html body.page-schedule main,
  html#kauzariyya-theme body.page-schedule main {
    padding-top: 88px !important;
    padding-bottom: 85px !important;
  }

  html body.page-schedule .schedule-head,
  html#kauzariyya-theme body.page-schedule .schedule-head {
    display: grid !important;
    gap: 14px !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
  }

  html body.page-schedule .schedule-head h1,
  html#kauzariyya-theme body.page-schedule .schedule-head h1 {
    display: block !important;
    margin: 0 !important;
    font-size: 42px !important;
    line-height: .88 !important;
  }

  html body.page-schedule .schedule-head > p,
  html#kauzariyya-theme body.page-schedule .schedule-head > p {
    margin: 0 !important;
  }

  html body.page-schedule .schedule-head + .schedule-tabs,
  html#kauzariyya-theme body.page-schedule .schedule-head + .schedule-tabs {
    margin-top: 0 !important;
  }

  html body.page-schedule .schedule-tabs,
  html#kauzariyya-theme body.page-schedule .schedule-tabs {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 auto 20px !important;
    padding: 4px !important;
    gap: 4px !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    border-radius: 12px !important;
    background: rgba(0,0,0,.3) !important;
    box-shadow: none !important;
    overflow-x: auto !important;
  }

  html body.page-schedule .schedule-tabs button,
  html#kauzariyya-theme body.page-schedule .schedule-tabs button {
    flex: 1 1 auto !important;
    min-width: 76px !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    background: none !important;
    color: rgba(255,255,255,.58) !important;
    font-size: 9px !important;
  }

  html body.page-schedule .schedule-tabs button.active,
  html#kauzariyya-theme body.page-schedule .schedule-tabs button.active {
    background: #4ee883 !important;
    color: #071008 !important;
    box-shadow: none !important;
  }

  html body.page-schedule .schedule-day-container,
  html#kauzariyya-theme body.page-schedule .schedule-day-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Match the reference footer icons: native logos, no oversized boxes, even spacing. */
@media (max-width: 600px) {
  .simple-social-icons {
    gap: 12px !important;
  }

  .simple-social-icons a,
  .home-institution-footer .simple-social-icons a {
    width: auto !important;
    height: auto !important;
    min-width: 20px !important;
    min-height: 20px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .simple-social-icons a svg,
  .home-institution-footer .simple-social-icons a svg {
    width: 20px !important;
    height: 20px !important;
  }
}

/* Home mobile header: align it with the other public pages and leave a clear
   breathing space before the hero content. Desktop header styling is unchanged. */
@media (max-width: 768px) {
  html body.page-home .site-header {
    position: fixed !important;
    top: 12px !important;
    left: 50% !important;
    right: auto !important;
    width: calc(100% - 24px) !important;
    max-width: 580px !important;
    min-height: 48px !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    border-color: rgba(78, 232, 131, .30) !important;
    border-radius: 16px !important;
    background: rgba(4, 14, 8, .95) !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
    overflow: hidden !important;
  }

  html body.page-home main {
    padding-top: 84px !important;
  }

  html body.page-home .home-redesign-hero {
    min-height: calc(100svh - 84px) !important;
    padding-top: 24px !important;
  }

  /* Button motion is deliberately tactile; disable any shine/sweep overlay. */
  html body:not(.page-admin) :is(.button, button, a.button, .schedule-3d-action-btn)::before,
  html body:not(.page-admin) :is(.button, button, a.button, .schedule-3d-action-btn)::after {
    content: none !important;
    animation: none !important;
  }

  html body:not(.page-admin) :is(.button, button, a.button, .schedule-3d-action-btn) {
    transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s ease, border-color .18s ease, background-color .18s ease !important;
  }

  html body:not(.page-admin) :is(.button, button, a.button, .schedule-3d-action-btn):hover:not(:disabled) {
    transform: translateY(-2px) scale(1.01) !important;
  }

  html body:not(.page-admin) :is(.button, button, a.button, .schedule-3d-action-btn):active:not(:disabled) {
    transform: translateY(0) scale(.96) !important;
  }
}

/* Higher-contrast location card: keep the map readable while making the
   container distinct from the dark campus background. */
html#kauzariyya-theme body.page-home .home-footer-location,
body.page-home .home-footer-location {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border-color: rgba(111, 241, 151, .52) !important;
  background:
    radial-gradient(circle at 16% 6%, rgba(78, 232, 131, .24), transparent 36%),
    radial-gradient(circle at 92% 100%, rgba(18, 126, 61, .22), transparent 42%),
    linear-gradient(135deg, rgba(10, 42, 24, .97), rgba(3, 17, 9, .98) 58%, rgba(2, 12, 7, .99)) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .52), 0 0 0 1px rgba(78, 232, 131, .10), inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}

html#kauzariyya-theme body.page-home .home-footer-location::before,
body.page-home .home-footer-location::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, rgba(78, 232, 131, .10), transparent 46%) !important;
}

html#kauzariyya-theme body.page-home .home-footer-location .footer-location-map,
body.page-home .home-footer-location .footer-location-map {
  border-color: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .48), 0 0 0 6px rgba(78, 232, 131, .10) !important;
}

html#kauzariyya-theme body.page-home .footer-pulse-copy > h2,
body.page-home .footer-pulse-copy > h2 {
  color: #f4fff6 !important;
  text-shadow: 0 4px 20px rgba(0, 0, 0, .34) !important;
}

html#kauzariyya-theme body.page-home .footer-pulse-copy > p:not(.overline),
body.page-home .footer-pulse-copy > p:not(.overline) {
  color: rgba(239, 255, 243, .86) !important;
}

html#kauzariyya-theme body.page-home .footer-directions-link,
body.page-home .footer-directions-link {
  border-color: rgba(111, 241, 151, .72) !important;
  background: linear-gradient(135deg, #15803d, #0d5d2d) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(7, 88, 39, .42), inset 0 1px 0 rgba(255, 255, 255, .20) !important;
}

/* Mobile schedule card: a stronger, more legible version of the event panel. */
@media (max-width: 560px) {
  html body.page-home .home-schedule-3d-deck,
  html#kauzariyya-theme body.page-home .home-schedule-3d-deck {
    padding: 18px 14px !important;
    border: 1px solid rgba(111, 241, 151, .48) !important;
    border-radius: 22px !important;
    background:
      radial-gradient(circle at 10% 0%, rgba(78, 232, 131, .22), transparent 38%),
      radial-gradient(circle at 100% 100%, rgba(18, 126, 61, .15), transparent 48%),
      linear-gradient(145deg, rgba(8, 37, 20, .97), rgba(2, 14, 7, .98)) !important;
    box-shadow: 0 20px 46px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
  }

  html body.page-home .schedule-3d-copy .overline,
  html#kauzariyya-theme body.page-home .schedule-3d-copy .overline {
    color: #75f5a1 !important;
    font-size: 8.5px !important;
    letter-spacing: .14em !important;
  }

  html body.page-home .schedule-3d-copy h2#home-schedule-3d-title,
  html#kauzariyya-theme body.page-home .schedule-3d-copy h2#home-schedule-3d-title {
    font-size: clamp(24px, 8vw, 30px) !important;
    line-height: 1.03 !important;
    text-shadow: 0 3px 16px rgba(0, 0, 0, .32) !important;
  }

  html body.page-home .schedule-3d-action-btn,
  html#kauzariyya-theme body.page-home .schedule-3d-action-btn {
    min-height: 34px !important;
    height: 34px !important;
    border-color: rgba(111, 241, 151, .56) !important;
    background: rgba(3, 28, 13, .84) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
  }

  html body.page-home .schedule-3d-grid,
  html#kauzariyya-theme body.page-home .schedule-3d-grid {
    gap: 12px !important;
  }

  html body.page-home .schedule-3d-card,
  html#kauzariyya-theme body.page-home .schedule-3d-card {
    min-height: 170px !important;
    padding: 15px !important;
    border-radius: 17px !important;
  }

  html body.page-home .schedule-3d-card.card-3d-emerald,
  html#kauzariyya-theme body.page-home .schedule-3d-card.card-3d-emerald {
    border-color: rgba(111, 241, 151, .62) !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.14) !important;
  }

  html body.page-home .schedule-3d-card.card-3d-amber,
  html#kauzariyya-theme body.page-home .schedule-3d-card.card-3d-amber {
    border-color: rgba(251, 191, 36, .70) !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.14) !important;
  }

  html body.page-home .schedule-3d-card .card-3d-number,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-number {
    font-size: 48px !important;
  }

  html body.page-home .schedule-3d-card .card-3d-date-meta strong,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-date-meta strong {
    font-size: 12px !important;
  }

  html body.page-home .schedule-3d-card .card-3d-foot,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-foot {
    padding-top: 9px !important;
    font-size: 8px !important;
    line-height: 1.35 !important;
  }
}

/* Location section: remove the surrounding background box while retaining
   the map and content layout. */
html#kauzariyya-theme body.page-home .home-footer-location,
body.page-home .home-footer-location {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html#kauzariyya-theme body.page-home .home-footer-location::before,
body.page-home .home-footer-location::before {
  display: none !important;
}

/* Final phone-only cascade: preserve desktop while resolving the mobile
   schedule-panel and review-heading spacing after all legacy overrides. */
@media (max-width: 560px) {
  html body.page-home .home-schedule-3d-deck,
  html#kauzariyya-theme body.page-home .home-schedule-3d-deck {
    width: calc(100% + 24px) !important;
    margin: 24px 0 34px -12px !important;
    padding: 18px 12px 14px !important;
    border: 1px solid rgba(118, 244, 161, .38) !important;
    border-radius: 20px !important;
    background:
      radial-gradient(circle at 8% 0%, rgba(78, 232, 131, .20), transparent 40%),
      radial-gradient(circle at 100% 100%, rgba(29, 118, 63, .16), transparent 45%),
      linear-gradient(145deg, rgba(7, 31, 17, .98), rgba(2, 12, 6, .98)) !important;
  }

  html body.page-home .schedule-3d-head,
  html#kauzariyya-theme body.page-home .schedule-3d-head {
    gap: 11px !important;
    margin-bottom: 13px !important;
  }

  html body.page-home .schedule-3d-copy .overline,
  html#kauzariyya-theme body.page-home .schedule-3d-copy .overline {
    font-size: 8px !important;
    letter-spacing: .15em !important;
  }

  html body.page-home .schedule-3d-copy h2#home-schedule-3d-title,
  html#kauzariyya-theme body.page-home .schedule-3d-copy h2#home-schedule-3d-title {
    font-size: clamp(23px, 7.5vw, 29px) !important;
    line-height: 1.04 !important;
  }

  html body.page-home .schedule-3d-action-btn,
  html#kauzariyya-theme body.page-home .schedule-3d-action-btn {
    min-height: 36px !important;
    height: 36px !important;
    padding: 7px 12px !important;
    border-color: rgba(118, 244, 161, .54) !important;
    background: rgba(2, 24, 11, .88) !important;
    font-size: 8px !important;
    letter-spacing: .12em !important;
  }

  html body.page-home .schedule-3d-grid,
  html#kauzariyya-theme body.page-home .schedule-3d-grid {
    gap: 10px !important;
  }

  html body.page-home .schedule-3d-card,
  html#kauzariyya-theme body.page-home .schedule-3d-card {
    min-height: 158px !important;
    padding: 13px 12px !important;
    border-radius: 16px !important;
  }

  html body.page-home .schedule-3d-card .card-3d-inner,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-inner {
    min-height: 130px !important;
  }

  html body.page-home .schedule-3d-card .card-3d-head,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-head {
    margin-bottom: 0 !important;
  }

  html body.page-home .schedule-3d-card .card-3d-badge,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-badge,
  html body.page-home .schedule-3d-card .card-3d-pill,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-pill {
    font-size: 7px !important;
  }

  html body.page-home .schedule-3d-card .card-3d-body,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-body {
    gap: 9px !important;
    margin: 11px 0 7px !important;
  }

  html body.page-home .schedule-3d-card .card-3d-number,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-number {
    font-size: 44px !important;
  }

  html body.page-home .schedule-3d-card .card-3d-date-meta strong,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-date-meta strong {
    font-size: 12px !important;
  }

  html body.page-home .schedule-3d-card .card-3d-date-meta small,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-date-meta small {
    font-size: 7px !important;
  }

  html body.page-home .schedule-3d-card .card-3d-foot,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-foot {
    padding-top: 8px !important;
    font-size: 8px !important;
    line-height: 1.3 !important;
  }

  html body.page-review .review-shell,
  html#kauzariyya-theme body.page-review .review-shell {
    padding-top: 52px !important;
    margin-top: 0 !important;
  }
}

/* Schedule uses the same fixed, centered mobile header as every other
   public page. This is last so older schedule-specific rules cannot offset it. */
@media (max-width: 768px) {
  html body.page-schedule .site-header,
  html#kauzariyya-theme body.page-schedule .site-header {
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-width: none !important;
    min-height: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    transform: none !important;
    z-index: 3000 !important;
  }

  html body.page-schedule .site-header .site-nav,
  html#kauzariyya-theme body.page-schedule .site-header .site-nav {
    display: none !important;
  }

  html body.page-schedule .site-header .site-logo,
  html#kauzariyya-theme body.page-schedule .site-header .site-logo {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-right: 0 !important;
  }

  html body.page-schedule .site-header .header-account-actions,
  html#kauzariyya-theme body.page-schedule .site-header .header-account-actions {
    display: flex !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }
}

/* Final mobile title spacing: clear the fixed navbar with a visibly calm gap. */
@media (max-width: 768px) {
  html body.page-scoreboard .scoreboard-experience,
  html#kauzariyya-theme body.page-scoreboard .scoreboard-experience {
    padding-top: 104px !important;
  }

  html body.page-schedule main,
  html#kauzariyya-theme body.page-schedule main {
    padding-top: 122px !important;
  }

  html body.page-musabaqa .musabaqa-plan,
  html#kauzariyya-theme body.page-musabaqa .musabaqa-plan {
    padding-top: 76px !important;
  }

  html body.page-review .review-shell,
  html#kauzariyya-theme body.page-review .review-shell {
    padding-top: 92px !important;
  }
}

/* Keep the Edathala copy readable on small screens while the map action
   uses the compact, centered treatment from the Student Directory control. */
@media (max-width: 520px) {
  html#kauzariyya-theme body.page-home .home-footer-location,
  body.page-home .home-footer-location {
    align-items: stretch !important;
    justify-items: stretch !important;
    text-align: left !important;
  }

  html#kauzariyya-theme body.page-home .home-footer-location .footer-pulse-copy,
  body.page-home .home-footer-location .footer-pulse-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-items: initial !important;
    text-align: left !important;
  }

  html#kauzariyya-theme body.page-home .home-footer-location .footer-pulse-copy > :is(.overline, h2, p),
  body.page-home .home-footer-location .footer-pulse-copy > :is(.overline, h2, p) {
    width: 100% !important;
    text-align: left !important;
  }

  html#kauzariyya-theme body.page-home .home-footer-location .footer-directions-link,
  body.page-home .home-footer-location .footer-directions-link {
    align-self: center !important;
    width: min(100%, 210px) !important;
    min-width: 0 !important;
    min-height: 42px !important;
    margin-top: 16px !important;
    padding: 10px 16px !important;
    justify-content: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    border-color: rgba(78, 232, 131, .45) !important;
    background: linear-gradient(135deg, #1c7e3b, #15803d) !important;
    color: #ffffff !important;
    font-size: 10px !important;
    letter-spacing: .04em !important;
    box-shadow: 0 6px 20px rgba(28, 126, 59, .35), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
  }

  html#kauzariyya-theme body.page-home .home-footer-location .footer-directions-link .btn-gmap-badge,
  body.page-home .home-footer-location .footer-directions-link .btn-gmap-badge {
    display: none !important;
  }

  html#kauzariyya-theme body.page-home .home-footer-location .footer-directions-link .btn-gmap-label,
  body.page-home .home-footer-location .footer-directions-link .btn-gmap-label {
    white-space: nowrap !important;
  }

  html#kauzariyya-theme body.page-home .home-footer-location .footer-directions-link .btn-gmap-arrow,
  body.page-home .home-footer-location .footer-directions-link .btn-gmap-arrow {
    margin-left: 1px !important;
    color: #4ee883 !important;
  }
}

/* Mobile participant directory action: match the compact students CTA. */
@media (max-width: 760px) {
  html#kauzariyya-theme body.page-participants .participant-page-summary > a.button.button-ghost-sm,
  body.page-participants .participant-page-summary > a.button.button-ghost-sm,
  html body.page-participants .participant-page-summary > a.button-ghost-sm {
    align-self: flex-start !important;
    width: min(100%, 220px) !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 10px 18px !important;
    border: 1.5px solid rgba(78, 232, 131, .45) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #1c7e3b, #15803d) !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    box-shadow: 0 6px 20px rgba(28, 126, 59, .35), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
  }

  html#kauzariyya-theme body.page-participants .participant-page-summary > a.button.button-ghost-sm b,
  body.page-participants .participant-page-summary > a.button.button-ghost-sm b,
  html body.page-participants .participant-page-summary > a.button-ghost-sm b {
    display: inline-block !important;
    color: #4ee883 !important;
    font-size: 13px !important;
  }
}

/* Final mobile alignment for the roster heading and schedule session picker. */
@media (max-width: 768px) {
  html body.page-participants .participant-shell,
  html#kauzariyya-theme body.page-participants .participant-shell {
    padding-top: 10px !important;
    margin-top: 0 !important;
  }

  html body.page-schedule .schedule-tabs,
  html#kauzariyya-theme body.page-schedule .schedule-tabs {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: min(calc(100% - 48px), 420px) !important;
    max-width: none !important;
    min-height: 54px !important;
    margin: 0 auto 20px !important;
    padding: 5px !important;
    gap: 2px !important;
    overflow: visible !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 16px !important;
    background: rgba(3, 19, 11, .94) !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .07) !important;
  }

  html body.page-schedule .schedule-tabs button,
  html#kauzariyya-theme body.page-schedule .schedule-tabs button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 4px 3px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: rgba(247, 255, 249, .72) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }

  html body.page-schedule .schedule-tabs button.active,
  html#kauzariyya-theme body.page-schedule .schedule-tabs button.active {
    background: linear-gradient(135deg, #07994b, #08743a) !important;
    color: #06150c !important;
    box-shadow: 0 4px 12px rgba(1, 92, 41, .32), inset 0 1px 0 rgba(255, 255, 255, .16) !important;
  }
}

/* Mobile home schedule: compact event planner rather than a scaled desktop deck. */
@media (max-width: 560px) {
  html body.page-home .home-schedule-3d-deck,
  html#kauzariyya-theme body.page-home .home-schedule-3d-deck {
    width: calc(100% - 24px) !important;
    max-width: 420px !important;
    margin: 28px auto 34px !important;
    padding: 18px 14px 14px !important;
    border: 1px solid rgba(108, 239, 145, .3) !important;
    border-radius: 18px !important;
    background:
      linear-gradient(180deg, rgba(9, 42, 24, .96), rgba(3, 16, 9, .98)) !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .09) !important;
  }

  html body.page-home .schedule-3d-head,
  html#kauzariyya-theme body.page-home .schedule-3d-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
  }

  html body.page-home .schedule-3d-copy .overline,
  html#kauzariyya-theme body.page-home .schedule-3d-copy .overline {
    margin: 0 0 7px !important;
    color: #7bf2a1 !important;
    font-size: 8px !important;
    letter-spacing: .14em !important;
  }

  html body.page-home .schedule-3d-copy h2#home-schedule-3d-title,
  html#kauzariyya-theme body.page-home .schedule-3d-copy h2#home-schedule-3d-title {
    max-width: 14ch !important;
    margin: 0 !important;
    font-size: 27px !important;
    line-height: 1.03 !important;
    letter-spacing: 0 !important;
  }

  html body.page-home .schedule-3d-action-btn,
  html#kauzariyya-theme body.page-home .schedule-3d-action-btn {
    display: flex !important;
    width: 100% !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 14px !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 1px solid rgba(124, 242, 161, .5) !important;
    border-radius: 10px !important;
    background: rgba(3, 28, 13, .74) !important;
    color: #ecfff1 !important;
    font-size: 9px !important;
    letter-spacing: .1em !important;
  }

  html body.page-home .schedule-3d-action-btn b,
  html#kauzariyya-theme body.page-home .schedule-3d-action-btn b {
    color: #65ea92 !important;
    font-size: 15px !important;
  }

  html body.page-home .schedule-3d-grid,
  html#kauzariyya-theme body.page-home .schedule-3d-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  html body.page-home .schedule-3d-card,
  html#kauzariyya-theme body.page-home .schedule-3d-card {
    min-height: 128px !important;
    padding: 13px !important;
    border-radius: 14px !important;
    transform: none !important;
  }

  html body.page-home .schedule-3d-card.card-3d-emerald,
  html#kauzariyya-theme body.page-home .schedule-3d-card.card-3d-emerald {
    border-color: rgba(101, 234, 146, .4) !important;
    background: linear-gradient(135deg, rgba(10, 56, 29, .96), rgba(4, 27, 14, .98)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  }

  html body.page-home .schedule-3d-card.card-3d-amber,
  html#kauzariyya-theme body.page-home .schedule-3d-card.card-3d-amber {
    border-color: rgba(245, 186, 63, .48) !important;
    background: linear-gradient(135deg, rgba(78, 48, 8, .96), rgba(35, 20, 3, .98)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  }

  html body.page-home .schedule-3d-card .card-3d-inner,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-inner {
    min-height: 100px !important;
  }

  html body.page-home .schedule-3d-card .card-3d-head,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-head {
    margin-bottom: 8px !important;
  }

  html body.page-home .schedule-3d-card .card-3d-badge,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-badge,
  html body.page-home .schedule-3d-card .card-3d-pill,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-pill {
    padding: 3px 7px !important;
    font-size: 7px !important;
    line-height: 1 !important;
  }

  html body.page-home .schedule-3d-card .card-3d-body,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-body {
    gap: 8px !important;
    margin: 4px 0 7px !important;
  }

  html body.page-home .schedule-3d-card .card-3d-number,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-number {
    font-size: 40px !important;
    line-height: .88 !important;
  }

  html body.page-home .schedule-3d-card .card-3d-date-meta strong,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-date-meta strong {
    font-size: 11px !important;
  }

  html body.page-home .schedule-3d-card .card-3d-date-meta small,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-date-meta small {
    font-size: 6.5px !important;
    letter-spacing: .08em !important;
  }

  html body.page-home .schedule-3d-card .card-3d-foot,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-foot {
    margin-top: 0 !important;
    padding-top: 7px !important;
    font-size: 7px !important;
    line-height: 1.25 !important;
  }
}

/* Keep the Scoreboard mobile heading at the same visual distance as Schedule. */
@media (max-width: 768px) {
  html body.page-scoreboard .scoreboard-experience,
  html#kauzariyya-theme body.page-scoreboard .scoreboard-experience {
    padding-top: 80px !important;
  }

  html body.page-scoreboard .scoreboard-live-badge,
  html#kauzariyya-theme body.page-scoreboard .scoreboard-live-badge,
  html body.page-scoreboard .scoreboard-live-badge i,
  html#kauzariyya-theme body.page-scoreboard .scoreboard-live-badge i {
    color: #4ee883 !important;
  }

  html body.page-scoreboard .scoreboard-live-badge i,
  html#kauzariyya-theme body.page-scoreboard .scoreboard-live-badge i {
    background: #4ee883 !important;
    box-shadow: 0 0 10px rgba(78, 232, 131, .82) !important;
  }

  html body.page-scoreboard .scoreboard-box-title .title-accent,
  html#kauzariyya-theme body.page-scoreboard .scoreboard-box-title .title-accent {
    color: #4ee883 !important;
    background: none !important;
    -webkit-text-fill-color: #4ee883 !important;
    text-shadow: 0 0 18px rgba(78, 232, 131, .24) !important;
  }
}

/* Final schedule-page mobile layout correction: force the header and nav to stack,
   create a small visual gap between heading and tabs, and make the tab-row width
   exactly fill the schedule content box width. */
@media (max-width: 560px) {
  html body.page-schedule .schedule-head,
  html#kauzariyya-theme body.page-schedule .schedule-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    min-height: auto !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
  }

  html body.page-schedule .schedule-head h1,
  html#kauzariyya-theme body.page-schedule .schedule-head h1 {
    font-size: clamp(40px, 12.5vw, 56px) !important;
    line-height: 0.94 !important;
    margin-bottom: 0 !important;
  }

  html body.page-schedule .schedule-head > p,
  html#kauzariyya-theme body.page-schedule .schedule-head > p {
    margin: 0 !important;
    max-width: 100% !important;
  }

  html body.page-schedule .schedule-head + .schedule-tabs,
  html#kauzariyya-theme body.page-schedule .schedule-head + .schedule-tabs {
    margin-top: 10px !important;
  }

  html body.page-schedule .schedule-tabs,
  html#kauzariyya-theme body.page-schedule .schedule-tabs {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 0 0 14px !important;
    padding: 4px !important;
    box-sizing: border-box !important;
    overflow-x: visible !important;
    border-radius: 12px !important;
  }

  html body.page-schedule .schedule-tabs button,
  html#kauzariyya-theme body.page-schedule .schedule-tabs button {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    white-space: nowrap !important;
  }
}

/* Give the schedule title a little breathing room below the fixed mobile nav
   and carry the emerald accent into the session header. */
@media (max-width: 560px) {
  html body.page-schedule main,
  html#kauzariyya-theme body.page-schedule main {
    padding-top: 104px !important;
  }

  html body.page-schedule .schedule-column > header,
  html#kauzariyya-theme body.page-schedule .schedule-column > header {
    background: linear-gradient(100deg, rgba(19, 122, 61, .82), rgba(7, 73, 35, .72)) !important;
  }

  html body.page-schedule .schedule-column > header > span,
  html#kauzariyya-theme body.page-schedule .schedule-column > header > span {
    background: #4ee883 !important;
    color: #062411 !important;
    box-shadow: 0 4px 12px rgba(78, 232, 131, .3) !important;
  }
}

/* Use the same mobile social-icon sizing and spacing on the review footer
   as on the home footer. */
@media (max-width: 600px) {
  html body.page-review .home-institution-footer > .simple-social-icons,
  html#kauzariyya-theme body.page-review .home-institution-footer > .simple-social-icons {
    justify-content: flex-start !important;
    gap: 8px !important;
    padding-inline: 0 !important;
  }

  html body.page-review .home-institution-footer > .simple-social-icons a,
  html#kauzariyya-theme body.page-review .home-institution-footer > .simple-social-icons a {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
  }

  html body.page-review .home-institution-footer > .simple-social-icons svg,
  html#kauzariyya-theme body.page-review .home-institution-footer > .simple-social-icons svg {
    width: 25px !important;
    height: 25px !important;
  }
}

@keyframes home-map-action-pulse {
  0%, 100% {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 20px rgba(86, 228, 122, .15), inset 0 1px 0 rgba(255, 255, 255, .2);
  }
  50% {
    box-shadow: 0 12px 34px rgba(0, 0, 0, .5), 0 0 28px rgba(86, 228, 122, .42), inset 0 1px 0 rgba(255, 255, 255, .28);
  }
}

/* On phones, retain the desktop map action's outlined pill, icon and motion,
   while pinning it to the left edge of the content column. */
@media (max-width: 520px) {
  html body.page-home .home-footer-location .footer-directions-link,
  html#kauzariyya-theme body.page-home .home-footer-location .footer-directions-link {
    align-self: flex-start !important;
    width: min(100%, 290px) !important;
    min-height: 48px !important;
    margin: 20px 0 0 !important;
    padding: 10px 22px 10px 12px !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(86, 228, 122, .4) !important;
    background: linear-gradient(135deg, rgba(8, 28, 16, .88), rgba(4, 16, 10, .95)) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 20px rgba(86, 228, 122, .15), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    letter-spacing: .03em !important;
    animation: home-map-action-pulse 2.6s ease-in-out infinite !important;
  }

  html body.page-home .home-footer-location .footer-directions-link .btn-gmap-badge,
  html#kauzariyya-theme body.page-home .home-footer-location .footer-directions-link .btn-gmap-badge {
    display: flex !important;
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
  }

  html body.page-home .home-footer-location .footer-directions-link .btn-gmap-label,
  html#kauzariyya-theme body.page-home .home-footer-location .footer-directions-link .btn-gmap-label {
    font-size: 13px !important;
    letter-spacing: .03em !important;
  }

  html body.page-home .home-footer-location .footer-directions-link .btn-gmap-arrow,
  html#kauzariyya-theme body.page-home .home-footer-location .footer-directions-link .btn-gmap-arrow {
    margin-left: auto !important;
    color: #56e47a !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.page-home .home-footer-location .footer-directions-link,
  html#kauzariyya-theme body.page-home .home-footer-location .footer-directions-link {
    animation: none !important;
  }
}

/* Keep the review action visually consistent with the participant directory
   action, and give that directory action a little more room on mobile. */
@media (max-width: 760px) {
  html body.page-participants .participant-page-summary > a.button.button-ghost-sm,
  html#kauzariyya-theme body.page-participants .participant-page-summary > a.button.button-ghost-sm {
    width: min(100%, 260px) !important;
  }

  html body.page-review .button-review-submit,
  html#kauzariyya-theme body.page-review .button-review-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: min(100%, 260px) !important;
    min-height: 42px !important;
    height: 42px !important;
    margin: 4px auto 0 !important;
    padding: 10px 18px !important;
    justify-self: center !important;
    border: 1.5px solid rgba(78, 232, 131, .45) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #1c7e3b, #15803d) !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    box-shadow: 0 6px 20px rgba(28, 126, 59, .35), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
  }

  html body.page-review .button-review-submit b,
  html#kauzariyya-theme body.page-review .button-review-submit b {
    color: #4ee883 !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }
}

/* Home schedule — phone-only visual refresh. Desktop keeps its existing deck. */
@media (max-width: 560px) {
  html body.page-home .home-schedule-3d-deck,
  html#kauzariyya-theme body.page-home .home-schedule-3d-deck {
    width: calc(100% + 24px) !important;
    margin: 28px 0 36px -12px !important;
    padding: 20px 16px 18px !important;
    border: 1px solid rgba(117, 242, 159, .36) !important;
    border-radius: 22px !important;
    background:
      radial-gradient(circle at 100% 0%, rgba(101, 234, 146, .15), transparent 34%),
      linear-gradient(155deg, rgba(8, 42, 23, .98), rgba(3, 17, 9, .99)) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .1) !important;
  }

  html body.page-home .schedule-3d-head,
  html#kauzariyya-theme body.page-home .schedule-3d-head {
    gap: 14px !important;
    margin-bottom: 16px !important;
  }

  html body.page-home .schedule-3d-copy .overline,
  html#kauzariyya-theme body.page-home .schedule-3d-copy .overline {
    width: max-content !important;
    margin: 0 0 9px !important;
    padding: 5px 8px !important;
    border: 1px solid rgba(117, 242, 159, .24) !important;
    border-radius: 999px !important;
    background: rgba(78, 232, 131, .08) !important;
    color: #8af4ad !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
  }

  html body.page-home .schedule-3d-copy h2#home-schedule-3d-title,
  html#kauzariyya-theme body.page-home .schedule-3d-copy h2#home-schedule-3d-title {
    max-width: 12ch !important;
    font-size: clamp(28px, 9vw, 34px) !important;
    font-weight: 800 !important;
    line-height: .98 !important;
    letter-spacing: -.025em !important;
    text-wrap: balance !important;
  }

  html body.page-home .schedule-3d-action-btn,
  html#kauzariyya-theme body.page-home .schedule-3d-action-btn {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(117, 242, 159, .48) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(14, 70, 36, .94), rgba(5, 35, 18, .96)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .11), 0 8px 18px rgba(0, 0, 0, .18) !important;
    color: #f2fff5 !important;
    font-size: 9px !important;
    letter-spacing: .09em !important;
  }

  html body.page-home .schedule-3d-action-btn b,
  html#kauzariyya-theme body.page-home .schedule-3d-action-btn b {
    color: #76ef9d !important;
  }

  html body.page-home .schedule-3d-grid,
  html#kauzariyya-theme body.page-home .schedule-3d-grid {
    gap: 12px !important;
  }

  html body.page-home .schedule-3d-card,
  html#kauzariyya-theme body.page-home .schedule-3d-card {
    min-height: 148px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    transform: none !important;
  }

  html body.page-home .schedule-3d-card.card-3d-emerald,
  html#kauzariyya-theme body.page-home .schedule-3d-card.card-3d-emerald {
    border-color: rgba(101, 234, 146, .44) !important;
    background: linear-gradient(135deg, rgba(11, 73, 37, .96), rgba(4, 34, 17, .99)) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .1) !important;
  }

  html body.page-home .schedule-3d-card.card-3d-amber,
  html#kauzariyya-theme body.page-home .schedule-3d-card.card-3d-amber {
    border-color: rgba(247, 190, 67, .46) !important;
    background: linear-gradient(135deg, rgba(83, 52, 10, .96), rgba(39, 24, 4, .99)) !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .1) !important;
  }

  html body.page-home .schedule-3d-card .card-3d-inner,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-inner {
    min-height: 148px !important;
    padding: 14px !important;
  }

  html body.page-home .schedule-3d-card .card-3d-badge,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-badge {
    padding: 4px 8px !important;
    border-radius: 999px !important;
    font-size: 8px !important;
    letter-spacing: .1em !important;
  }

  html body.page-home .schedule-3d-card .card-3d-pill,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-pill {
    padding: 4px 7px !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, .2) !important;
    color: rgba(255, 255, 255, .74) !important;
    font-size: 7px !important;
    letter-spacing: .08em !important;
  }

  html body.page-home .schedule-3d-card .card-3d-body,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-body {
    gap: 11px !important;
    margin: 10px 0 8px !important;
  }

  html body.page-home .schedule-3d-card .card-3d-number,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-number {
    font-size: 47px !important;
    letter-spacing: -.05em !important;
  }

  html body.page-home .schedule-3d-card .card-3d-date-meta strong,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-date-meta strong {
    font-size: 13px !important;
  }

  html body.page-home .schedule-3d-card .card-3d-date-meta small,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-date-meta small {
    margin-top: 4px !important;
    font-size: 7px !important;
    letter-spacing: .07em !important;
  }

  html body.page-home .schedule-3d-card .card-3d-foot,
  html#kauzariyya-theme body.page-home .schedule-3d-card .card-3d-foot {
    padding-top: 8px !important;
    color: rgba(244, 255, 247, .78) !important;
    font-size: 8px !important;
    line-height: 1.3 !important;
  }
}

/* Give the paired mobile actions a more confident, easier-to-tap width. */
@media (max-width: 760px) {
  html body.page-participants .participant-page-summary > a.button.button-ghost-sm,
  html#kauzariyya-theme body.page-participants .participant-page-summary > a.button.button-ghost-sm,
  html body.page-review .button-review-submit,
  html#kauzariyya-theme body.page-review .button-review-submit {
    width: min(100%, 300px) !important;
  }
}

/* Carry the refined review action through to laptop and desktop layouts. */
html body.page-review .button-review-submit,
html#kauzariyya-theme body.page-review .button-review-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: min(100%, 380px) !important;
  min-height: 42px !important;
  height: 42px !important;
  margin: 4px auto 0 !important;
  padding: 10px 18px !important;
  justify-self: center !important;
  border: 1.5px solid rgba(78, 232, 131, .45) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #1c7e3b, #15803d) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  box-shadow: 0 6px 20px rgba(28, 126, 59, .35), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}

html body.page-review .button-review-submit b,
html#kauzariyya-theme body.page-review .button-review-submit b {
  color: #4ee883 !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

@media (max-width: 760px) {
  html body.page-review .button-review-submit,
  html#kauzariyya-theme body.page-review .button-review-submit {
    width: min(100%, 300px) !important;
  }
}

/* ==========================================================================
   Bigger & Better Single-Day Schedule Panels & Rich Cards
   ========================================================================== */
html body.page-schedule .schedule-day-panel,
html#kauzariyya-theme body.page-schedule .schedule-day-panel {
  display: none !important;
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.page-schedule .schedule-day-panel.active,
html body.page-schedule .schedule-day-panel.mobile-active,
html#kauzariyya-theme body.page-schedule .schedule-day-panel.active,
html#kauzariyya-theme body.page-schedule .schedule-day-panel.mobile-active {
  display: block !important;
}

.schedule-day-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  margin-bottom: 24px !important;
  padding: 24px 28px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, rgba(78, 232, 131, 0.12), rgba(6, 24, 14, 0.88)) !important;
  border: 1px solid rgba(78, 232, 131, 0.28) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35) !important;
}

.day-header-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.day-header-badge {
  display: inline-block !important;
  align-self: flex-start !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  background: #4ee883 !important;
  color: #06180d !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
}

.day-header-info h2 {
  margin: 4px 0 0 !important;
  color: #fff !important;
  font-size: clamp(24px, 4vw, 34px) !important;
  font-weight: 900 !important;
}

.day-header-date {
  margin: 0 !important;
  color: rgba(200, 255, 215, 0.75) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

.day-header-count {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 90px !important;
  padding: 12px 18px !important;
  border-radius: 14px !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(78, 232, 131, 0.2) !important;
}

.day-header-count strong {
  color: #4ee883 !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.day-header-count small {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-top: 4px !important;
}

.schedule-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)) !important;
  gap: 18px !important;
  width: 100% !important;
}

@media (max-width: 768px) {
  .schedule-cards-grid {
    grid-template-columns: 1fr !important;
  }
  .schedule-day-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 18px 20px !important;
  }
  .day-header-count {
    align-self: flex-start !important;
    flex-direction: row !important;
    gap: 8px !important;
    padding: 6px 12px !important;
  }
  .day-header-count strong {
    font-size: 18px !important;
  }
}

.schedule-card-rich {
  display: flex !important;
  gap: 16px !important;
  padding: 20px 22px !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(12, 28, 18, 0.88), rgba(6, 16, 10, 0.94)) !important;
  border: 1px solid rgba(78, 232, 131, 0.18) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.25s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.schedule-card-rich:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(78, 232, 131, 0.5) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(78, 232, 131, 0.15) !important;
}

.schedule-card-rich.live {
  border-color: #4ee883 !important;
  background: linear-gradient(145deg, rgba(18, 48, 28, 0.95), rgba(8, 24, 14, 0.98)) !important;
  box-shadow: 0 12px 35px rgba(78, 232, 131, 0.22) !important;
}

.schedule-card-rich.live::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 5px !important;
  background: #4ee883 !important;
  box-shadow: 0 0 12px #4ee883 !important;
}

.card-rich-side {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 78px !important;
  padding: 10px 8px !important;
  border-radius: 12px !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(78, 232, 131, 0.15) !important;
  align-self: flex-start !important;
}

.card-rich-time {
  color: #4ee883 !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
}

.card-rich-duration {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  margin-top: 4px !important;
  text-transform: uppercase !important;
}

.card-rich-main {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.card-rich-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 6px !important;
}

.card-rich-order {
  color: rgba(255, 255, 255, 0.35) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.live-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 2px 8px !important;
  border-radius: 99px !important;
  background: rgba(78, 232, 131, 0.2) !important;
  border: 1px solid #4ee883 !important;
  color: #4ee883 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0.05em !important;
}

.live-pulse {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #4ee883 !important;
  box-shadow: 0 0 6px #4ee883 !important;
  animation: pulseLive 1.5s infinite !important;
}

.card-rich-title {
  margin: 0 0 8px !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

.card-rich-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}

.card-rich-venue,
.card-rich-category {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

.card-rich-venue {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(230, 245, 235, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.card-rich-category {
  background: rgba(78, 232, 131, 0.09) !important;
  color: #9fe8b4 !important;
  border: 1px solid rgba(78, 232, 131, 0.18) !important;
}

.schedule-empty-rich {
  grid-column: 1 / -1 !important;
  padding: 48px 24px !important;
  text-align: center !important;
  border-radius: 18px !important;
  background: rgba(10, 22, 15, 0.5) !important;
  border: 1px dashed rgba(78, 232, 131, 0.25) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 15px !important;
}

/* ── Event Live! Stunning Banner ────────────────────────────── */
.countdown-container-live {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 1.2rem 0 !important;
    width: auto !important;
}

.event-live-banner {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    padding: 16px 42px !important;
    border-radius: 9999px !important;
    background: radial-gradient(circle at 20% 20%, rgba(16, 185, 129, 0.35) 0%, rgba(6, 24, 15, 0.95) 80%),
                linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(4, 15, 9, 0.98) 100%) !important;
    border: 1.5px solid rgba(78, 232, 131, 0.65) !important;
    box-shadow: 0 0 45px rgba(78, 232, 131, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    animation: eventLiveGlow 2.5s infinite ease-in-out !important;
}

.live-dot-pulse {
    width: 15px !important;
    height: 15px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.95) !important;
    animation: livePulseDot 1.6s infinite cubic-bezier(0.66, 0, 0, 1) !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

.live-text-glow {
    font-family: 'Plus Jakarta Sans', 'Ubuntu', sans-serif !important;
    font-size: clamp(24px, 4.5vw, 38px) !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
    background: linear-gradient(135deg, #ffffff 0%, #a7f3d0 45%, #34d399 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-transform: uppercase !important;
    text-shadow: 0 4px 25px rgba(16, 185, 129, 0.5) !important;
}

/* ==========================================================================
   STUNNING GLASSMORPHISM DASHBOARD HEADER STYLES
   ========================================================================== */
.site-header,
body.page-home .site-header {
  position: sticky !important;
  top: 16px !important;
  z-index: 100 !important;
  width: min(1240px, calc(100% - 32px)) !important;
  margin: 16px auto 24px auto !important;
  padding: 10px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: rgba(6, 18, 12, 0.72) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(52, 211, 153, 0.28) !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Site Logo */
.site-logo {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  text-decoration: none !important;
  transition: transform 0.25s ease !important;
}

.site-logo:hover {
  transform: translateY(-1px) scale(1.01) !important;
}

.site-logo img {
  width: 44px !important;
  height: 44px !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  padding: 4px !important;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(245, 158, 11, 0.18)) !important;
  border: 1px solid rgba(52, 211, 153, 0.4) !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25) !important;
}

.site-logo span {
  display: flex !important;
  flex-direction: column !important;
}

.site-logo span b {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: -0.4px !important;
  line-height: 1.1 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

.site-logo span small {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #34d399 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  margin-top: 2px !important;
}

/* Navigation Links Bar */
.site-nav {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(3, 10, 6, 0.55) !important;
  padding: 5px 8px !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(10px) !important;
}

.site-nav a {
  padding: 9px 20px !important;
  border-radius: 9999px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  letter-spacing: 0.2px !important;
}

.site-nav a:hover {
  color: #ffffff !important;
  background: rgba(16, 185, 129, 0.12) !important;
}

.site-nav a.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.35) 0%, rgba(6, 40, 24, 0.85) 100%) !important;
  border: 1px solid rgba(52, 211, 153, 0.5) !important;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* Account Actions & Festival Date Pill */
.header-account-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.header-account-actions .festival-date {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  padding: 6px 14px !important;
  background: rgba(16, 185, 129, 0.1) !important;
  border: 1px solid rgba(52, 211, 153, 0.25) !important;
  border-radius: 14px !important;
}

.header-account-actions .festival-date span {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

.header-account-actions .festival-date b {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #fbbf24 !important;
}

.header-account-actions .visitor-logout-floating {
  background: rgba(239, 68, 68, 0.14) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  color: #fca5a5 !important;
  padding: 9px 18px !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.header-account-actions .visitor-logout-floating:hover {
  background: rgba(239, 68, 68, 0.28) !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3) !important;
}

@media (max-width: 860px) {
  .site-header,
  body.page-home .site-header {
    width: calc(100% - 20px) !important;
    padding: 8px 14px !important;
  }
  .site-logo span small {
    display: none !important;
  }
  .header-account-actions .festival-date {
    display: none !important;
  }
}