/* Central public theme engine. Values come from includes/theme.php. */
:root{
  --app-primary:#7c1f2a;--app-primary-dark:#5f1620;--app-secondary:#243b67;--app-accent:#d4af37;
  --app-bg:#f5f7fb;--app-surface:#fff;--app-text:#1f2937;--app-muted:#6b7280;--app-border:#e5e7eb;
  --app-radius:18px;--app-font:Inter,Arial,Helvetica,sans-serif;
  --app-shadow-sm:0 6px 18px rgba(15,23,42,.07);--app-shadow:0 16px 40px rgba(15,23,42,.10);--app-shadow-lg:0 24px 60px rgba(15,23,42,.15);
}
html,body{font-family:var(--app-font)!important;background:var(--app-bg);color:var(--app-text)}
body{accent-color:var(--app-primary)}
a{transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease}
::selection{background:var(--app-primary);color:#fff}

/* Common surfaces and controls. Keeps legacy class names theme-aware. */
.card,.content-card,.sidebar-card,.news-card,.tournament-card,.gallery-card,.info-card,.form-card,.panel,.box{
  border-color:var(--app-border)!important;
}
.btn,.button,button[type="submit"],input[type="submit"]{font-family:var(--app-font)}
.form-control,input,select,textarea{border-color:var(--app-border);color:var(--app-text)}
.form-control:focus,input:focus,select:focus,textarea:focus{border-color:var(--app-primary)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-primary) 15%,transparent)!important;outline:0}

/* Card variants */
body[data-card-style="soft"] :is(.card,.content-card,.sidebar-card,.news-card,.tournament-card,.gallery-card,.info-card,.form-card){background:var(--app-surface)!important;border-radius:var(--app-radius)!important;box-shadow:var(--app-shadow-sm)!important}
body[data-card-style="bordered"] :is(.card,.content-card,.sidebar-card,.news-card,.tournament-card,.gallery-card,.info-card,.form-card){background:var(--app-surface)!important;border:1px solid var(--app-border)!important;border-radius:calc(var(--app-radius) * .72)!important;box-shadow:none!important}
body[data-card-style="flat"] :is(.card,.content-card,.sidebar-card,.news-card,.tournament-card,.gallery-card,.info-card,.form-card){background:var(--app-surface)!important;border:0!important;border-radius:6px!important;box-shadow:none!important}
body[data-card-style="glass"] :is(.card,.content-card,.sidebar-card,.news-card,.tournament-card,.gallery-card,.info-card,.form-card){background:color-mix(in srgb,var(--app-surface) 78%,transparent)!important;border:1px solid color-mix(in srgb,var(--app-primary) 14%,var(--app-border))!important;border-radius:calc(var(--app-radius) + 5px)!important;box-shadow:var(--app-shadow)!important;backdrop-filter:blur(15px)}
body[data-card-style="premium"] :is(.card,.content-card,.sidebar-card,.news-card,.tournament-card,.gallery-card,.info-card,.form-card){background:linear-gradient(145deg,var(--app-surface),color-mix(in srgb,var(--app-surface) 92%,var(--app-accent)))!important;border:1px solid color-mix(in srgb,var(--app-accent) 26%,var(--app-border))!important;border-radius:calc(var(--app-radius) + 4px)!important;box-shadow:var(--app-shadow)!important}

/* Button variants */
body[data-button-style="rounded"] :is(.btn,.button,button[type="submit"],input[type="submit"]){border-radius:12px!important}
body[data-button-style="pill"] :is(.btn,.button,button[type="submit"],input[type="submit"]){border-radius:999px!important;padding-left:20px!important;padding-right:20px!important}
body[data-button-style="square"] :is(.btn,.button,button[type="submit"],input[type="submit"]){border-radius:4px!important}
body[data-button-style="outline"] :is(.btn,.button,button[type="submit"],input[type="submit"]){background:transparent!important;color:var(--app-primary)!important;border:2px solid var(--app-primary)!important;border-radius:10px!important}

/* Density */
body[data-density="compact"]{--app-section-space:28px;--app-card-pad:16px}
body[data-density="comfortable"]{--app-section-space:44px;--app-card-pad:22px}
body[data-density="spacious"]{--app-section-space:64px;--app-card-pad:30px}

/* Header variants. Existing markup remains reusable. */
body[data-header-style="classic"] .ss-header{background:var(--app-surface)!important;border-bottom:3px solid var(--app-primary)!important;box-shadow:none!important;backdrop-filter:none!important}
body[data-header-style="classic"] .ss-brand-logo{border-radius:50%!important;background:var(--app-surface)!important;color:var(--app-primary)!important;border:2px solid var(--app-primary)!important;box-shadow:none!important}
body[data-header-style="centered"] .ss-brand-row{justify-content:center!important;text-align:center!important}
body[data-header-style="centered"] .ss-brand{max-width:800px!important;justify-content:center!important}
body[data-header-style="centered"] .ss-brand-text{flex:0 1 auto!important}
body[data-header-style="glass"] .ss-header{background:color-mix(in srgb,var(--app-surface) 78%,transparent)!important;border-bottom:1px solid color-mix(in srgb,var(--app-primary) 16%,transparent)!important;backdrop-filter:blur(20px)!important;box-shadow:0 14px 42px rgba(15,23,42,.10)!important}
body[data-header-style="glass"] .ss-menu{background:color-mix(in srgb,var(--app-surface) 82%,transparent)!important;border:1px solid color-mix(in srgb,var(--app-primary) 12%,var(--app-border));border-radius:14px!important;padding:6px 10px!important}
body[data-header-style="compact"] .ss-topbar{display:none!important}
body[data-header-style="compact"] .ss-brand-row{padding:7px 0!important}
body[data-header-style="compact"] .ss-brand-logo{width:46px!important;height:46px!important;min-width:46px!important;border-radius:12px!important}
body[data-header-style="compact"] .ss-brand-title{font-size:20px!important}
body[data-header-style="compact"] .ss-brand-tagline{display:none!important}
body[data-header-style="modern"] .ss-brand-logo{background:linear-gradient(135deg,var(--app-primary),var(--app-secondary))!important}

/* Footer variants */
body[data-footer-style="classic"] .ss-site-footer{background:var(--app-secondary)!important}
body[data-footer-style="classic"] .ss-footer-card{background:transparent!important;box-shadow:none!important;border-color:rgba(255,255,255,.14)!important}
body[data-footer-style="minimal"] .ss-site-footer{background:var(--app-surface)!important;color:var(--app-text)!important;border-top:1px solid var(--app-border)}
body[data-footer-style="minimal"] .ss-site-footer :is(.ss-footer-site-name,.ss-footer-title,.ss-footer-link,.ss-footer-contact,.ss-footer-tagline){color:var(--app-text)!important}
body[data-footer-style="minimal"] .ss-footer-card{background:transparent!important;border:0!important;box-shadow:none!important}
body[data-footer-style="compact"] .ss-footer-container{padding-top:26px!important;padding-bottom:14px!important}
body[data-footer-style="compact"] .ss-footer-top{gap:12px!important}
body[data-footer-style="compact"] .ss-footer-card{padding:14px!important;border-radius:12px!important}
body[data-footer-style="premium"] .ss-site-footer{background:radial-gradient(circle at 12% 10%,color-mix(in srgb,var(--app-accent) 18%,transparent),transparent 30%),linear-gradient(135deg,var(--app-primary),var(--app-secondary))!important}

/* Layout variants */
body[data-news-layout="list"] .news-grid{display:flex!important;flex-direction:column!important}
body[data-news-layout="list"] .news-card{display:grid!important;grid-template-columns:minmax(180px,260px) 1fr!important;overflow:hidden}
body[data-news-layout="magazine"] .news-grid .news-card:first-child{grid-column:span 2!important;grid-row:span 2!important}
body[data-news-layout="minimal"] .news-card{box-shadow:none!important;border-width:0 0 1px!important;border-radius:0!important}
body[data-tournament-layout="list"] .tournament-grid{display:flex!important;flex-direction:column!important}
body[data-tournament-layout="compact"] .tournament-card{padding:14px!important}
body[data-tournament-layout="overlay"] .tournament-card{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--app-primary),var(--app-secondary))!important;color:#fff!important}

/* Central image fallback appearance */
img.app-image-fallback{object-fit:cover!important;background:linear-gradient(135deg,var(--app-primary),var(--app-secondary))!important}
.app-avatar-placeholder{display:grid;place-items:center;background:linear-gradient(135deg,var(--app-primary),var(--app-secondary));color:#fff;border-radius:50%;font-weight:900;letter-spacing:.04em}

/* Preset-specific identity so projects can look materially different. */
body[data-app-theme="heritage"] .ss-brand-title{font-family:Georgia,"Times New Roman",serif!important;letter-spacing:.01em}
body[data-app-theme="heritage"] :is(h1,h2,h3,.section-title){font-family:Georgia,"Times New Roman",serif}
body[data-app-theme="minimal"] .ss-header,body[data-app-theme="minimal"] .ss-site-footer{box-shadow:none!important}
body[data-app-theme="dark_pro"]{color-scheme:dark}
body[data-app-theme="dark_pro"] :is(.ss-header,.card,.content-card,.sidebar-card,.news-card,.tournament-card,.gallery-card){color:var(--app-text)}

@media(max-width:760px){
  body[data-header-style="centered"] .ss-brand{justify-content:flex-start!important;text-align:left!important}
  body[data-news-layout="list"] .news-card{grid-template-columns:1fr!important}
}

/* Late-cascade page-wide theme harmonisation for legacy pages. */
body[data-app-context="public"] :is(.section.alt,.soft-bg,.page-section,.page-wrap,.content-section){background-color:var(--app-bg)!important}
body[data-app-context="public"] :is(h1,h2,h3,h4,.section-title,.page-title){color:var(--app-text)}
body[data-app-context="public"] :is(.badge,.status-pill,.meta-pill){border-color:color-mix(in srgb,var(--app-primary) 24%,var(--app-border))!important}
body[data-app-context="public"] :is(.btn,.button,.read-more,.register-btn){background-color:var(--app-primary);border-color:var(--app-primary)}
body[data-app-context="public"] :is(.btn,.button,.read-more,.register-btn):hover{filter:brightness(.94);transform:translateY(-1px)}
body[data-app-context="public"] .photo-placeholder{background:linear-gradient(135deg,var(--app-primary),var(--app-secondary))!important;color:#fff!important}
body[data-home-layout="modern"] :is(.premium-card,.president-photo-card,.slider-card-item .card){border-radius:calc(var(--app-radius) + 8px)!important;box-shadow:var(--app-shadow)!important}
body[data-home-layout="tournament"] .tournament-list-card{border-left:5px solid var(--app-accent)!important}
body[data-home-layout="news"] .news-card{border-top:4px solid var(--app-primary)!important}
body[data-home-layout="minimal"] :is(.premium-card,.president-photo-card){box-shadow:none!important;border:1px solid var(--app-border)!important}

/* ========================================================================
   Central Action Button System
   Use .btn / .btn-sm / .btn-lg / .btn-light across legacy pages.
   New markup can use .app-btn aliases without page-specific button CSS.
   ======================================================================== */
body[data-app-context="public"] :is(
  a.btn, button.btn, input.btn,
  a.button, button.button,
  .app-btn, .read-more, .register-btn
){
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:44px!important;
  padding:10px 19px!important;
  border:1px solid transparent!important;
  border-radius:12px!important;
  background:var(--app-primary)!important;
  color:#fff!important;
  box-shadow:0 8px 20px color-mix(in srgb,var(--app-primary) 22%,transparent)!important;
  font-family:var(--app-font)!important;
  font-size:14px!important;
  font-weight:800!important;
  line-height:1.15!important;
  text-decoration:none!important;
  text-align:center!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  appearance:none;
  -webkit-appearance:none;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease!important;
}
body[data-app-context="public"] :is(
  a.btn, button.btn, input.btn,
  a.button, button.button,
  .app-btn, .read-more, .register-btn
):hover{
  color:#fff!important;
  text-decoration:none!important;
  filter:brightness(.96);
  transform:translateY(-2px)!important;
  box-shadow:0 12px 26px color-mix(in srgb,var(--app-primary) 28%,transparent)!important;
}
body[data-app-context="public"] :is(.btn,.button,.app-btn).btn-sm,
body[data-app-context="public"] :is(.btn-sm.app-btn,.btn-sm.button){
  min-height:38px!important;
  padding:8px 14px!important;
  font-size:13px!important;
}
body[data-app-context="public"] :is(.btn,.button,.app-btn).btn-lg,
body[data-app-context="public"] :is(.btn-lg.app-btn,.btn-lg.button){
  min-height:50px!important;
  padding:13px 24px!important;
  font-size:16px!important;
}
body[data-app-context="public"] :is(.btn,.button,.app-btn).btn-light{
  background:var(--app-surface)!important;
  color:var(--app-primary)!important;
  border-color:color-mix(in srgb,var(--app-primary) 18%,var(--app-border))!important;
  box-shadow:0 8px 20px rgba(15,23,42,.10)!important;
}
body[data-app-context="public"] :is(.btn,.button,.app-btn).btn-light:hover{
  color:var(--app-primary-dark)!important;
  background:color-mix(in srgb,var(--app-surface) 94%,var(--app-primary))!important;
}
body[data-app-context="public"] :is(.btn,.button,.app-btn).btn-secondary{
  background:var(--app-secondary)!important;
  color:#fff!important;
  box-shadow:0 8px 20px color-mix(in srgb,var(--app-secondary) 22%,transparent)!important;
}
body[data-app-context="public"] :is(.btn,.button,.app-btn).btn-outline{
  background:transparent!important;
  color:var(--app-primary)!important;
  border-color:var(--app-primary)!important;
  box-shadow:none!important;
}
body[data-app-context="public"] :is(.btn,.button,.app-btn):disabled,
body[data-app-context="public"] :is(.btn,.button,.app-btn).disabled{
  opacity:.55!important;
  cursor:not-allowed!important;
  transform:none!important;
  box-shadow:none!important;
  pointer-events:none;
}

/* Button shape remains controlled centrally from Admin > Theme Settings. */
body[data-app-context="public"][data-button-style="rounded"] :is(.btn,.button,.app-btn,.read-more,.register-btn){border-radius:12px!important}
body[data-app-context="public"][data-button-style="pill"] :is(.btn,.button,.app-btn,.read-more,.register-btn){border-radius:999px!important;padding-left:20px!important;padding-right:20px!important}
body[data-app-context="public"][data-button-style="square"] :is(.btn,.button,.app-btn,.read-more,.register-btn){border-radius:5px!important}
body[data-app-context="public"][data-button-style="outline"] :is(.btn,.button,.app-btn,.read-more,.register-btn){
  background:transparent!important;
  color:var(--app-primary)!important;
  border:2px solid var(--app-primary)!important;
  box-shadow:none!important;
}

/* Homepage CTA is a branded component, not a normal white content card. */
body[data-app-context="public"] .cta-card{
  background:linear-gradient(135deg,var(--app-primary),var(--app-secondary))!important;
  color:#fff!important;
  border:0!important;
  border-radius:calc(var(--app-radius) + 6px)!important;
  box-shadow:var(--app-shadow)!important;
  padding:30px 34px!important;
}
body[data-app-context="public"] .cta-card h2{
  color:#fff!important;
  margin:0!important;
  line-height:1.25!important;
}
body[data-app-context="public"] .cta-card .cta-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:24px!important;
}
body[data-app-context="public"] .cta-card .cta-right{
  text-align:right!important;
}
body[data-app-context="public"] .cta-card .cta-right .btn{
  min-width:170px!important;
}

@media(max-width:760px){
  body[data-app-context="public"] .cta-card{
    padding:22px 18px!important;
  }
  body[data-app-context="public"] .cta-card .cta-grid{
    grid-template-columns:1fr!important;
    gap:18px!important;
  }
  body[data-app-context="public"] .cta-card .cta-right{
    text-align:left!important;
    width:100%!important;
  }
  body[data-app-context="public"] .cta-card .cta-right .btn{
    width:100%!important;
    min-width:0!important;
  }
}

/* ========================================================================
   2026 Central Visual Polish
   Keeps brand colors as accents while avoiding heavy two-tone gradients.
   This file is loaded again from the public footer, so these rules are the
   final cascade layer for legacy/page-specific CSS throughout the project.
   ======================================================================== */
:root{
  --app-primary-soft:color-mix(in srgb,var(--app-primary) 9%,#fff);
  --app-primary-softer:color-mix(in srgb,var(--app-primary) 4%,#fff);
  --app-secondary-soft:color-mix(in srgb,var(--app-secondary) 7%,#fff);
  --app-ink:color-mix(in srgb,var(--app-secondary) 68%,#111827);
  --app-hero-border:color-mix(in srgb,var(--app-primary) 24%,var(--app-border));
  --app-hero-shadow:0 18px 48px rgba(15,23,42,.08);
}

/* Header: neutral surface + controlled brand accents. */
body[data-app-context="public"] .ss-topbar{
  background:var(--app-ink)!important;
  color:#fff!important;
  border-bottom:3px solid var(--app-primary)!important;
}
body[data-app-context="public"] .ss-header{
  background:color-mix(in srgb,var(--app-surface) 97%,transparent)!important;
  border-bottom:1px solid var(--app-border)!important;
  box-shadow:0 8px 28px rgba(15,23,42,.07)!important;
}
body[data-app-context="public"] .ss-brand-row{border-bottom-color:var(--app-border)!important}
body[data-app-context="public"] .ss-brand-logo{
  background:var(--app-surface)!important;
  border:1px solid color-mix(in srgb,var(--app-primary) 24%,var(--app-border))!important;
  box-shadow:0 8px 22px rgba(15,23,42,.08)!important;
}
body[data-app-context="public"] .ss-brand-title{color:var(--app-ink)!important}
body[data-app-context="public"] .ss-menu > li > a,
body[data-app-context="public"] .ss-menu > li > .ss-dropdown-toggle{color:var(--app-text)!important}
body[data-app-context="public"] .ss-menu > li > a:hover,
body[data-app-context="public"] .ss-menu > li > a:focus,
body[data-app-context="public"] .ss-menu > li > .ss-dropdown-toggle:hover,
body[data-app-context="public"] .ss-menu > li > .ss-dropdown-toggle:focus,
body[data-app-context="public"] .ss-menu > li.ss-open > a,
body[data-app-context="public"] .ss-menu > li.ss-open > .ss-dropdown-toggle{
  background:var(--app-primary-soft)!important;
  border-color:color-mix(in srgb,var(--app-primary) 18%,var(--app-border))!important;
  color:var(--app-primary-dark)!important;
}
body[data-app-context="public"] .ss-menu > li.ss-register-btn > a{
  background:var(--app-primary)!important;
  color:#fff!important;
  border-color:var(--app-primary)!important;
  box-shadow:0 8px 20px color-mix(in srgb,var(--app-primary) 20%,transparent)!important;
}
body[data-app-context="public"] .ss-menu-toggle{
  background:var(--app-primary)!important;
  box-shadow:0 8px 20px color-mix(in srgb,var(--app-primary) 18%,transparent)!important;
}

/* Unified public hero system. Large surfaces stay light and readable. */
body[data-app-context="public"] :is(
  .page-hero,.accounts-hero,.verify-hero,.champ-list-hero,.district-hero-v2,
  .documents-hero,.election-hero-new,.game-hero,.myas-hero,.news-hero,
  .details-hero,.pio-hero,.results-hero,.tender-hero,.pt-hero,.sports-hero,
  .champ-hero,.hero,.hero.hero-premium,.compact-home-hero
){
  background:linear-gradient(180deg,var(--app-primary-softer) 0%,var(--app-bg) 100%)!important;
  color:var(--app-text)!important;
}
body[data-app-context="public"] :is(
  .page-hero>.container,.accounts-hero-box,.verify-hero-box,.champ-list-hero .hero-box,
  .district-hero-card-v2,.documents-hero-box,.election-hero-inner-new,.game-hero-box,
  .myas-hero-inner,.news-hero-box,.details-hero-box,.pio-hero-box,.results-hero-box,
  .tender-hero-content,.pt-hero .pt-container,.sports-hero-box,.champ-hero-box,
  .hero-box,.hero.hero-premium .hero-grid,.compact-home-hero .compact-hero-shell
){
  background:var(--app-surface)!important;
  color:var(--app-text)!important;
  border:1px solid var(--app-hero-border)!important;
  border-top:4px solid var(--app-primary)!important;
  box-shadow:var(--app-hero-shadow)!important;
  backdrop-filter:none!important;
}
body[data-app-context="public"] :is(
  .page-hero,.accounts-hero,.verify-hero,.champ-list-hero,.district-hero-v2,
  .documents-hero,.election-hero-new,.game-hero,.myas-hero,.news-hero,
  .details-hero,.pio-hero,.results-hero,.tender-hero,.pt-hero,.sports-hero,
  .champ-hero,.hero,.hero.hero-premium,.compact-home-hero
) :is(h1,h2,h3){color:var(--app-ink)!important}
body[data-app-context="public"] :is(
  .page-hero,.accounts-hero,.verify-hero,.champ-list-hero,.district-hero-v2,
  .documents-hero,.election-hero-new,.game-hero,.myas-hero,.news-hero,
  .details-hero,.pio-hero,.results-hero,.tender-hero,.pt-hero,.sports-hero,
  .champ-hero,.hero,.hero.hero-premium,.compact-home-hero
) p{color:var(--app-muted)!important;opacity:1!important}
body[data-app-context="public"] :is(
  .hero-badge,.sports-badge,.game-badge,.news-badge,.tender-badge,.documents-badge,
  .accounts-badge,.verify-badge,.pio-badge,.results-badge,.champ-badge,.myas-badge,
  .election-badge-new,.district-kicker-v2,.district-badge-v2,.hero.hero-premium .badge,
  .pt-hero span,.home-slide-kicker
){
  background:var(--app-primary-soft)!important;
  color:var(--app-primary-dark)!important;
  border:1px solid color-mix(in srgb,var(--app-primary) 16%,var(--app-border))!important;
}
body[data-app-context="public"] :is(
  .sports-stat-card,.hero-stat-card,.hero-stat,.district-hero-badge-v2,
  .myas-hero-panel,.election-hero-card-new,.hero.hero-premium .premium-panel,
  .compact-hero-side
){
  background:var(--app-secondary-soft)!important;
  color:var(--app-text)!important;
  border:1px solid var(--app-border)!important;
  box-shadow:none!important;
}
body[data-app-context="public"] :is(
  .sports-stat-card,.hero-stat-card,.hero-stat,.district-hero-badge-v2,
  .myas-hero-panel,.election-hero-card-new,.hero.hero-premium .premium-panel,
  .compact-hero-side
) :is(span,strong,h2,h3,p){color:var(--app-text)!important}

/* Homepage and site CTAs: white surface with a brand accent instead of a huge gradient. */
body[data-app-context="public"] .cta-card{
  background:var(--app-surface)!important;
  color:var(--app-text)!important;
  border:1px solid var(--app-border)!important;
  border-left:5px solid var(--app-primary)!important;
  box-shadow:0 14px 36px rgba(15,23,42,.07)!important;
}
body[data-app-context="public"] .cta-card h2{color:var(--app-ink)!important}
body[data-app-context="public"] .cta-card p{color:var(--app-muted)!important}

/* Cards and page sections: reduce visual noise, preserve clear hierarchy. */
body[data-app-context="public"] :is(.card,.content-card,.sidebar-card,.news-card,.tournament-card,.gallery-card,.info-card,.form-card,.panel,.box){
  border-color:var(--app-border)!important;
}
body[data-app-context="public"] :is(.news-card,.tournament-card,.gallery-card,.content-card,.form-card){
  box-shadow:0 10px 30px rgba(15,23,42,.055)!important;
}
body[data-app-context="public"] :is(.news-card,.tournament-card,.gallery-card,.content-card,.form-card):hover{
  box-shadow:0 16px 38px rgba(15,23,42,.085)!important;
}

/* Central buttons: solid accent, softer shadows, no accidental tiny pill text. */
body[data-app-context="public"] :is(a.btn,button.btn,input.btn,a.button,button.button,.app-btn,.read-more,.register-btn){
  background:var(--app-primary)!important;
  border-color:var(--app-primary)!important;
  color:#fff!important;
  box-shadow:0 7px 18px color-mix(in srgb,var(--app-primary) 18%,transparent)!important;
}
body[data-app-context="public"] :is(a.btn,button.btn,input.btn,a.button,button.button,.app-btn,.read-more,.register-btn):hover{
  background:var(--app-primary-dark)!important;
  border-color:var(--app-primary-dark)!important;
  box-shadow:0 10px 24px color-mix(in srgb,var(--app-primary) 22%,transparent)!important;
}

/* Footer: professional dark base with a restrained brand accent. */
body[data-app-context="public"] .ss-site-footer{
  background:var(--app-ink)!important;
  border-top:4px solid var(--app-primary)!important;
}
body[data-app-context="public"] .ss-site-footer::before,
body[data-app-context="public"] .ss-site-footer::after{opacity:.35!important}
body[data-app-context="public"] .ss-footer-card{
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(255,255,255,.10)!important;
  box-shadow:none!important;
}
body[data-app-context="public"] .ss-footer-heading::after{background:var(--app-primary)!important}

/* Media placeholders remain branded but lighter than the old 50/50 gradient. */
img.app-image-fallback,.app-avatar-placeholder,.photo-placeholder{
  background:linear-gradient(145deg,var(--app-primary-soft),var(--app-secondary-soft))!important;
  color:var(--app-primary-dark)!important;
}

@media(max-width:760px){
  body[data-app-context="public"] :is(
    .page-hero>.container,.accounts-hero-box,.verify-hero-box,.champ-list-hero .hero-box,
    .district-hero-card-v2,.documents-hero-box,.election-hero-inner-new,.game-hero-box,
    .myas-hero-inner,.news-hero-box,.details-hero-box,.pio-hero-box,.results-hero-box,
    .tender-hero-content,.pt-hero .pt-container,.sports-hero-box,.champ-hero-box,
    .hero-box,.hero.hero-premium .hero-grid,.compact-home-hero .compact-hero-shell
  ){
    border-top-width:3px!important;
    box-shadow:0 10px 28px rgba(15,23,42,.065)!important;
  }
}

/* ========================================================================
   Central Navigation + Button Refinement (2026-08)
   Fixes mobile glass-menu becoming a giant circle and standardises actions.
   ======================================================================== */
:root{
  --app-btn-radius:10px;
  --app-btn-height:42px;
  --app-btn-shadow:0 5px 14px rgba(15,23,42,.08);
  --app-btn-shadow-hover:0 8px 20px rgba(15,23,42,.12);
}

/* Glass is a visual treatment, not a pill-shaped navigation container. */
body[data-app-context="public"][data-header-style="glass"] .ss-menu{
  border-radius:16px!important;
  padding:6px!important;
  border:1px solid color-mix(in srgb,var(--app-primary) 12%,var(--app-border))!important;
  background:color-mix(in srgb,var(--app-surface) 96%,transparent)!important;
  box-shadow:0 8px 24px rgba(15,23,42,.07)!important;
}

/* Unified public action controls. */
body[data-app-context="public"] :is(
  a.btn,button.btn,input.btn,
  a.button,button.button,input.button,
  button[type="submit"],input[type="submit"],
  .app-btn,.read-more,.register-btn
){
  min-height:var(--app-btn-height)!important;
  padding:9px 16px!important;
  border:1px solid var(--app-primary)!important;
  border-radius:var(--app-btn-radius)!important;
  background:var(--app-primary)!important;
  color:#fff!important;
  box-shadow:var(--app-btn-shadow)!important;
  font-family:var(--app-font)!important;
  font-size:14px!important;
  font-weight:750!important;
  line-height:1.2!important;
  letter-spacing:0!important;
  text-decoration:none!important;
  white-space:normal!important;
  cursor:pointer!important;
  vertical-align:middle!important;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease!important;
}
body[data-app-context="public"] :is(
  a.btn,button.btn,input.btn,
  a.button,button.button,input.button,
  button[type="submit"],input[type="submit"],
  .app-btn,.read-more,.register-btn
):hover{
  background:var(--app-primary-dark)!important;
  border-color:var(--app-primary-dark)!important;
  color:#fff!important;
  box-shadow:var(--app-btn-shadow-hover)!important;
  filter:none!important;
  transform:translateY(-1px)!important;
}
body[data-app-context="public"] :is(
  a.btn,button.btn,input.btn,
  a.button,button.button,input.button,
  button[type="submit"],input[type="submit"],
  .app-btn,.read-more,.register-btn
):focus-visible{
  outline:3px solid color-mix(in srgb,var(--app-primary) 20%,transparent)!important;
  outline-offset:2px!important;
}
body[data-app-context="public"] :is(.btn-sm,.app-btn.btn-sm){min-height:34px!important;padding:7px 12px!important;font-size:12.5px!important;border-radius:8px!important}
body[data-app-context="public"] :is(.btn-lg,.app-btn.btn-lg){min-height:48px!important;padding:12px 21px!important;font-size:15.5px!important}

/* Semantic button variants remain semantic instead of being recoloured as primary. */
body[data-app-context="public"] :is(.btn-secondary,.app-btn.btn-secondary){background:var(--app-surface)!important;color:var(--app-text)!important;border-color:var(--app-border)!important;box-shadow:none!important}
body[data-app-context="public"] :is(.btn-secondary,.app-btn.btn-secondary):hover{background:color-mix(in srgb,var(--app-secondary) 6%,var(--app-surface))!important;color:var(--app-text)!important;border-color:color-mix(in srgb,var(--app-secondary) 18%,var(--app-border))!important}
body[data-app-context="public"] :is(.btn-outline,.btn-outline-primary,.app-btn.btn-outline){background:transparent!important;color:var(--app-primary)!important;border-color:color-mix(in srgb,var(--app-primary) 65%,var(--app-border))!important;box-shadow:none!important}
body[data-app-context="public"] :is(.btn-outline,.btn-outline-primary,.app-btn.btn-outline):hover{background:var(--app-primary-soft)!important;color:var(--app-primary-dark)!important;border-color:var(--app-primary)!important}
body[data-app-context="public"] :is(.btn-danger,.app-btn.danger){background:#b42318!important;color:#fff!important;border-color:#b42318!important;box-shadow:0 5px 14px rgba(180,35,24,.14)!important}
body[data-app-context="public"] :is(.btn-danger,.app-btn.danger):hover{background:#912018!important;border-color:#912018!important}
body[data-app-context="public"] .btn-success{background:#16803c!important;border-color:#16803c!important;color:#fff!important;box-shadow:0 5px 14px rgba(22,128,60,.13)!important}
body[data-app-context="public"] .btn-success:hover{background:#116b32!important;border-color:#116b32!important}
body[data-app-context="public"] .btn-warning{background:#b86e00!important;border-color:#b86e00!important;color:#fff!important;box-shadow:0 5px 14px rgba(184,110,0,.13)!important}

/* Admin selected shape remains respected without corrupting mobile navigation. */
body[data-app-context="public"][data-button-style="rounded"] :is(.btn,.button,.app-btn,.read-more,.register-btn,button[type="submit"],input[type="submit"]){border-radius:var(--app-btn-radius)!important}
body[data-app-context="public"][data-button-style="pill"] :is(.btn,.button,.app-btn,.read-more,.register-btn,button[type="submit"],input[type="submit"]){border-radius:999px!important;padding-left:18px!important;padding-right:18px!important}
body[data-app-context="public"][data-button-style="square"] :is(.btn,.button,.app-btn,.read-more,.register-btn,button[type="submit"],input[type="submit"]){border-radius:5px!important}
body[data-app-context="public"][data-button-style="outline"] :is(.btn,.button,.app-btn,.read-more,.register-btn,button[type="submit"],input[type="submit"]){background:transparent!important;color:var(--app-primary)!important;border-color:var(--app-primary)!important;box-shadow:none!important}

@media(max-width:992px){
  /* Mobile menu must always be a normal panel, regardless of selected header style. */
  body[data-app-context="public"] .ss-menu,
  body[data-app-context="public"][data-header-style="glass"] .ss-menu{
    width:100%!important;
    margin-top:8px!important;
    padding:8px!important;
    border:1px solid var(--app-border)!important;
    border-radius:16px!important;
    background:var(--app-surface)!important;
    box-shadow:0 14px 34px rgba(15,23,42,.11)!important;
    backdrop-filter:none!important;
    clip-path:none!important;
    overflow-x:hidden!important;
  }
  body[data-app-context="public"] .ss-menu>li{
    width:100%!important;
    border-radius:0!important;
  }
  body[data-app-context="public"] .ss-menu>li>a,
  body[data-app-context="public"] .ss-menu>li>.ss-dropdown-toggle{
    width:100%!important;
    min-height:46px!important;
    justify-content:space-between!important;
    padding:11px 13px!important;
    border:1px solid var(--app-border)!important;
    border-radius:10px!important;
    background:var(--app-surface)!important;
    color:var(--app-text)!important;
    box-shadow:none!important;
    font-size:14px!important;
    font-weight:750!important;
  }
  body[data-app-context="public"] .ss-menu>li>a:hover,
  body[data-app-context="public"] .ss-menu>li>a:focus,
  body[data-app-context="public"] .ss-menu>li>.ss-dropdown-toggle:hover,
  body[data-app-context="public"] .ss-menu>li>.ss-dropdown-toggle:focus,
  body[data-app-context="public"] .ss-menu>li.ss-open>.ss-dropdown-toggle{
    background:var(--app-primary-soft)!important;
    color:var(--app-primary-dark)!important;
    border-color:color-mix(in srgb,var(--app-primary) 24%,var(--app-border))!important;
  }
  body[data-app-context="public"] .ss-menu>li.ss-register-btn>a{
    justify-content:center!important;
    border-radius:10px!important;
    background:var(--app-primary)!important;
    border-color:var(--app-primary)!important;
    color:#fff!important;
    box-shadow:none!important;
  }
  body[data-app-context="public"] .ss-dropdown,
  body[data-app-context="public"] .ss-dropdown.ss-dropdown-right{
    width:100%!important;
    margin:5px 0 1px!important;
    padding:6px!important;
    border:1px solid var(--app-border)!important;
    border-radius:11px!important;
    background:color-mix(in srgb,var(--app-bg) 60%,var(--app-surface))!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  body[data-app-context="public"] .ss-dropdown a{
    min-height:42px!important;
    display:flex!important;
    align-items:center!important;
    margin:3px 0!important;
    padding:9px 11px!important;
    border:0!important;
    border-radius:8px!important;
    background:transparent!important;
    color:var(--app-text)!important;
    font-size:13.5px!important;
  }
  body[data-app-context="public"] .ss-dropdown a:hover,
  body[data-app-context="public"] .ss-dropdown a:focus{
    background:var(--app-surface)!important;
    color:var(--app-primary-dark)!important;
  }
  body[data-app-context="public"] .ss-menu-toggle{
    min-height:46px!important;
    border-radius:11px!important;
    background:var(--app-primary)!important;
    color:#fff!important;
    border:1px solid var(--app-primary)!important;
    box-shadow:0 6px 16px color-mix(in srgb,var(--app-primary) 14%,transparent)!important;
  }
  body[data-app-context="public"] .ss-menu-toggle :is(.ss-menu-toggle-text,.ss-menu-toggle-arrow){color:#fff!important}
}

@media(max-width:576px){
  body[data-app-context="public"] .ss-menu{border-radius:13px!important;padding:7px!important}
  body[data-app-context="public"] .ss-menu>li>a,
  body[data-app-context="public"] .ss-menu>li>.ss-dropdown-toggle{min-height:44px!important;padding:10px 11px!important;border-radius:9px!important}
  body[data-app-context="public"] :is(a.btn,button.btn,input.btn,a.button,button.button,input.button,button[type="submit"],input[type="submit"],.app-btn,.read-more,.register-btn){min-height:42px!important;padding:9px 14px!important;font-size:13.5px!important}
}

/* Legacy public action classes: shared geometry without destroying semantic colours. */
body[data-app-context="public"] :is(
  .aps-btn,.pdf-btn,.detail-action-btn,.payment-primary-btn,.payment-secondary-btn,
  .payment-result-btn,.district-btn-v2,.district-btn-light-v2,.district-btn-outline-v2,
  .doc-btn-new,.news-action-btn,.myas-btn,.myas-btn-outline,.account-delete-btn,
  .pt-btn,.home-slider-btn,.doc-public-btn,.verify-cert-btn,.gallery-show-all-btn
){
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  min-height:42px!important;
  padding:9px 15px!important;
  border-radius:10px!important;
  font-family:var(--app-font)!important;
  font-size:14px!important;
  font-weight:750!important;
  line-height:1.2!important;
  text-decoration:none!important;
  white-space:normal!important;
  cursor:pointer!important;
  box-shadow:0 4px 12px rgba(15,23,42,.075)!important;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease!important;
}
body[data-app-context="public"] :is(
  .aps-btn,.pdf-btn,.detail-action-btn,.payment-primary-btn,.payment-secondary-btn,
  .payment-result-btn,.district-btn-v2,.district-btn-light-v2,.district-btn-outline-v2,
  .doc-btn-new,.news-action-btn,.myas-btn,.myas-btn-outline,.account-delete-btn,
  .pt-btn,.home-slider-btn,.doc-public-btn,.verify-cert-btn,.gallery-show-all-btn
):hover{transform:translateY(-1px)!important;box-shadow:0 7px 17px rgba(15,23,42,.11)!important;text-decoration:none!important}


/* ========================================================================
   FINAL MOBILE MENU GEOMETRY LOCK
   The mobile navigation must NEVER inherit circular / pill geometry from
   theme presets, glass cards, legacy CSS or button settings.
   ======================================================================== */
@media (max-width:992px){
  html body[data-app-context="public"] .ss-menu-row{
    position:relative!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    border-radius:0!important;
    overflow:visible!important;
  }

  html body[data-app-context="public"] .ss-nav-check:checked ~ .ss-menu,
  html body[data-app-context="public"] .ss-menu,
  html body[data-app-context="public"][data-header-style="glass"] .ss-menu,
  html body[data-app-context="public"][data-card-style="glass"] .ss-menu,
  html body[data-app-context="public"][data-button-style="pill"] .ss-menu{
    display:flex;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:7px!important;

    position:static!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;

    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:calc(100dvh - var(--ss-menu-top,170px) - 12px)!important;
    aspect-ratio:auto!important;

    margin:8px 0 0!important;
    padding:8px!important;

    border:1px solid var(--app-border)!important;
    border-radius:14px!important;
    outline:0!important;

    background:var(--app-surface)!important;
    background-image:none!important;
    box-shadow:0 14px 34px rgba(15,23,42,.11)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;

    clip-path:none!important;
    -webkit-clip-path:none!important;
    mask:none!important;
    -webkit-mask:none!important;
    transform:none!important;

    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }

  html body[data-app-context="public"] .ss-menu::before,
  html body[data-app-context="public"] .ss-menu::after{
    content:none!important;
    display:none!important;
  }

  html body[data-app-context="public"] .ss-menu > li{
    display:block!important;
    position:relative!important;
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    border-radius:10px!important;
    background:transparent!important;
    overflow:visible!important;
    transform:none!important;
  }

  html body[data-app-context="public"] .ss-menu > li > a,
  html body[data-app-context="public"] .ss-menu > li > .ss-dropdown-toggle{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;
    min-width:0!important;
    min-height:46px!important;
    height:auto!important;
    margin:0!important;
    padding:11px 13px!important;
    border:1px solid var(--app-border)!important;
    border-radius:10px!important;
    background:#f8fafc!important;
    color:var(--app-text)!important;
    box-shadow:none!important;
    transform:none!important;
    white-space:normal!important;
  }

  html body[data-app-context="public"] .ss-menu > li.ss-register-btn > a{
    justify-content:center!important;
    background:var(--app-primary)!important;
    border-color:var(--app-primary)!important;
    color:#fff!important;
    border-radius:10px!important;
  }

  html body[data-app-context="public"] .ss-dropdown,
  html body[data-app-context="public"] .ss-dropdown.ss-dropdown-right{
    position:static!important;
    inset:auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    margin:5px 0 0!important;
    padding:6px!important;
    border:1px solid var(--app-border)!important;
    border-radius:10px!important;
    background:var(--app-surface)!important;
    box-shadow:none!important;
    clip-path:none!important;
    transform:none!important;
  }
}

@media (max-width:576px){
  html body[data-app-context="public"] .ss-menu,
  html body[data-app-context="public"][data-header-style="glass"] .ss-menu{
    border-radius:12px!important;
    padding:7px!important;
  }
}


/* ========================================================================
   ABSOLUTE MOBILE MENU SHAPE LOCK
   Works even when an older header does not output data-app-context/theme attrs.
   ======================================================================== */
@media (max-width:992px){
  html body .ss-header .ss-menu-row{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    border-radius:0!important;
    overflow:visible!important;
    clip-path:none!important;
    -webkit-clip-path:none!important;
    transform:none!important;
  }

  html body .ss-header .ss-menu-row>.ss-menu,
  html body .ss-header .ss-nav-check~.ss-menu,
  html body .ss-header .ss-nav-check:checked~.ss-menu{
    position:static!important;
    inset:auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    margin:8px 0 0!important;
    padding:8px!important;
    border:1px solid var(--app-border,#e5e7eb)!important;
    border-radius:12px!important;
    background:var(--app-surface,#fff)!important;
    background-image:none!important;
    box-shadow:0 12px 28px rgba(15,23,42,.10)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    clip-path:none!important;
    -webkit-clip-path:none!important;
    mask:none!important;
    -webkit-mask:none!important;
    transform:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }

  html body .ss-header .ss-menu::before,
  html body .ss-header .ss-menu::after{
    content:none!important;
    display:none!important;
  }

  html body .ss-header .ss-menu>li{
    width:100%!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    border-radius:0!important;
    background:transparent!important;
    overflow:visible!important;
    transform:none!important;
  }

  html body .ss-header .ss-menu>li>a,
  html body .ss-header .ss-menu>li>.ss-dropdown-toggle{
    width:100%!important;
    min-height:46px!important;
    height:auto!important;
    margin:0!important;
    padding:11px 13px!important;
    border-radius:9px!important;
    box-shadow:none!important;
    transform:none!important;
    white-space:normal!important;
  }

  html body .ss-header .ss-menu>li.ss-register-btn>a{
    border-radius:9px!important;
  }

  html body .ss-header .ss-dropdown,
  html body .ss-header .ss-dropdown.ss-dropdown-right{
    position:static!important;
    inset:auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    border-radius:9px!important;
    clip-path:none!important;
    -webkit-clip-path:none!important;
    transform:none!important;
  }
}

/* ========================================================================
   Homepage hero contrast lock
   Keeps the homepage premium hero light, readable and brand-consistent even
   when older page-level styles force white text / translucent dark panels.
   ======================================================================== */
body[data-app-context="public"] .hero.hero-premium.compact-home-hero{
  padding:20px 0 24px!important;
  background:
    radial-gradient(circle at 8% 12%,color-mix(in srgb,var(--app-primary) 7%,transparent),transparent 28%),
    linear-gradient(180deg,var(--app-primary-softer) 0%,var(--app-bg) 100%)!important;
  color:var(--app-text)!important;
}
body[data-app-context="public"] .hero.hero-premium.compact-home-hero::before,
body[data-app-context="public"] .hero.hero-premium.compact-home-hero::after{
  opacity:.45!important;
  border-color:color-mix(in srgb,var(--app-primary) 10%,transparent)!important;
  background:transparent!important;
}
body[data-app-context="public"] .hero.hero-premium.compact-home-hero .compact-hero-shell{
  background:var(--app-surface)!important;
  border:1px solid color-mix(in srgb,var(--app-primary) 20%,var(--app-border))!important;
  border-top:5px solid var(--app-primary)!important;
  border-radius:24px!important;
  box-shadow:0 18px 50px rgba(15,23,42,.09)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
body[data-app-context="public"] .hero.hero-premium.compact-home-hero .compact-hero-shell::before{
  opacity:.35!important;
  background:radial-gradient(circle,color-mix(in srgb,var(--app-primary) 10%,transparent),transparent 68%)!important;
}
body[data-app-context="public"] .hero.hero-premium.compact-home-hero .compact-hero-main{
  background:linear-gradient(145deg,var(--app-primary-softer),var(--app-surface))!important;
  border:1px solid color-mix(in srgb,var(--app-primary) 10%,var(--app-border))!important;
  box-shadow:none!important;
}
body[data-app-context="public"] .hero.hero-premium.compact-home-hero .compact-badge{
  background:var(--app-primary-soft)!important;
  color:var(--app-primary-dark)!important;
  border:1px solid color-mix(in srgb,var(--app-primary) 24%,var(--app-border))!important;
  box-shadow:none!important;
}
body[data-app-context="public"] .hero.hero-premium.compact-home-hero .compact-hero-main h1{
  color:var(--app-ink)!important;
  text-shadow:none!important;
}
body[data-app-context="public"] .hero.hero-premium.compact-home-hero .compact-hero-main p{
  color:var(--app-muted)!important;
  opacity:1!important;
}
body[data-app-context="public"] .hero.hero-premium.compact-home-hero .compact-hero-side{
  background:linear-gradient(180deg,color-mix(in srgb,var(--app-secondary) 5%,#fff),var(--app-surface))!important;
  color:var(--app-text)!important;
  border:1px solid var(--app-border)!important;
  box-shadow:none!important;
}
body[data-app-context="public"] .hero.hero-premium.compact-home-hero .compact-side-kicker{
  color:var(--app-primary-dark)!important;
}
body[data-app-context="public"] .hero.hero-premium.compact-home-hero .compact-side-head h3{
  color:var(--app-ink)!important;
}
body[data-app-context="public"] .hero.hero-premium.compact-home-hero .compact-side-text{
  color:var(--app-muted)!important;
}
body[data-app-context="public"] .hero.hero-premium.compact-home-hero .compact-stat-card{
  background:var(--app-bg)!important;
  color:var(--app-text)!important;
  border:1px solid var(--app-border)!important;
  box-shadow:none!important;
}
body[data-app-context="public"] .hero.hero-premium.compact-home-hero .compact-stat-card::after{
  background:color-mix(in srgb,var(--app-primary) 5%,transparent)!important;
}
body[data-app-context="public"] .hero.hero-premium.compact-home-hero .compact-stat-card:hover,
body[data-app-context="public"] .hero.hero-premium.compact-home-hero .compact-stat-card:focus{
  background:var(--app-primary-soft)!important;
  border-color:color-mix(in srgb,var(--app-primary) 28%,var(--app-border))!important;
  transform:translateY(-2px)!important;
}
body[data-app-context="public"] .hero.hero-premium.compact-home-hero .compact-stat-card strong{
  color:var(--app-ink)!important;
}
body[data-app-context="public"] .hero.hero-premium.compact-home-hero .compact-stat-card span{
  color:var(--app-muted)!important;
}
body[data-app-context="public"] .hero.hero-premium.compact-home-hero .compact-hero-actions .btn{
  box-shadow:0 7px 18px color-mix(in srgb,var(--app-primary) 16%,transparent)!important;
}
body[data-app-context="public"] .hero.hero-premium.compact-home-hero .compact-hero-actions .btn-light{
  background:var(--app-surface)!important;
  color:var(--app-text)!important;
  border:1px solid var(--app-border)!important;
  box-shadow:none!important;
}
body[data-app-context="public"] .hero.hero-premium.compact-home-hero .compact-hero-actions .btn-light:hover{
  background:var(--app-primary-soft)!important;
  color:var(--app-primary-dark)!important;
  border-color:color-mix(in srgb,var(--app-primary) 28%,var(--app-border))!important;
}

@media (max-width:760px){
  body[data-app-context="public"] .hero.hero-premium.compact-home-hero{
    padding:12px 0 16px!important;
  }
  body[data-app-context="public"] .hero.hero-premium.compact-home-hero .compact-hero-shell{
    border-radius:18px!important;
  }
}