/* ============================================================
   STEP TO TOPPERS — LAUNCH UI STANDARD v4.5
   Reference: batches.php > Register Free
   Geometry only is standardized; theme colors remain page/theme driven.
   ============================================================ */
:root{
  --stt-ui-build:4.5;
  /* EDIT THESE MASTER VALUES ONLY — all standard controls inherit them. */
  --stt-control-height:45px;
  --stt-control-radius:8px;
  --stt-control-font:12.5px;
  --stt-control-weight:700;
  --stt-control-padding-x:14px;
  --stt-control-gap:6px;
  --stt-icon-control-size:var(--stt-control-height);
  --stt-footer-center-size:60px;
  --stt-pwa-fab-size:52px;
  --stt-field-border:#dbe2ea;
  --stt-field-bg:#fff;
  --stt-focus:var(--theme-accent,var(--brand-blue,var(--a,#007bff)));
}

/* Roboto for UI text, without corrupting icon-font glyphs. */
html,body,
body *:not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fa-classic){
  font-family:'Roboto',Arial,sans-serif!important;
}
.fa,.fas,.fa-solid,.fa-classic{font-family:"Font Awesome 6 Free"!important;font-weight:900!important;font-style:normal!important}
.far,.fa-regular{font-family:"Font Awesome 6 Free"!important;font-weight:400!important;font-style:normal!important}
.fab,.fa-brands{font-family:"Font Awesome 6 Brands"!important;font-weight:400!important;font-style:normal!important}

/* Standard text buttons/tabs. Width and colors remain contextual. */
:is(
  .page-home .class-cta,.page-home .view-batches,.page-home .support-cta,.page-home .fx-main-btn,.page-home .mini-btn,.page-home .batch-btn,.page-home .review-btn,.page-home .path-cta a,
  .page-dashboard .dash-btn,
  .page-batches .cat-tab,.page-batches .tab,.page-batches .actions .btn,.page-batches .detail-btn,
  .page-tests .library-tab,.page-tests .test-btn,.page-tests .auth-gate-actions button,.page-tests .subject-open-btn,.page-tests .subject-option,
  .page-profile .answer-review-btn,.page-profile .action-btn,
  .page-edit-profile .btn,.page-edit-profile .back,
  .page-wallet .btn,
  .page-syllabus .back,
  .page-result .btn,.page-result .weak-topic-actions a,
  .page-exam .btn-action,.page-exam .btn-m-cancel,.page-exam .btn-m-submit,
  .auth-overlay .auth-tab,.auth-overlay .auth-submit,
  .admin-ui .btn,
  .advertiser-ui .btn,.advertiser-login-ui .btn
){
  box-sizing:border-box!important;
  height:var(--stt-control-height)!important;
  min-height:var(--stt-control-height)!important;
  max-height:var(--stt-control-height)!important;
  padding:0 var(--stt-control-padding-x)!important;
  border-radius:var(--stt-control-radius)!important;
  font-size:var(--stt-control-font)!important;
  font-weight:var(--stt-control-weight)!important;
  line-height:1.2!important;
  gap:var(--stt-control-gap)!important;
  align-items:center!important;
  justify-content:center!important;
  vertical-align:middle!important;
}

/* Form fields use the same 45px geometry everywhere. */
:is(
  body[class*="page-"] main,
  .auth-overlay,
  .admin-ui,
  .advertiser-ui,
  .advertiser-login-ui
) :is(input,select):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]){
  box-sizing:border-box!important;
  height:var(--stt-control-height)!important;
  min-height:var(--stt-control-height)!important;
  max-height:var(--stt-control-height)!important;
  border-radius:var(--stt-control-radius)!important;
  font-size:var(--stt-control-font)!important;
  line-height:1.2!important;
}
:is(body[class*="page-"] main,.auth-overlay,.admin-ui,.advertiser-ui,.advertiser-login-ui) input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
:is(body[class*="page-"] main,.auth-overlay,.admin-ui,.advertiser-ui,.advertiser-login-ui) select{
  padding-top:0!important;
  padding-bottom:0!important;
}
:is(body[class*="page-"] main,.auth-overlay,.admin-ui,.advertiser-ui,.advertiser-login-ui) input[type="file"]{
  padding:6px 8px!important;
}
:is(body[class*="page-"] main,.auth-overlay,.admin-ui,.advertiser-ui,.advertiser-login-ui) input[type="color"]{
  padding:4px!important;
}
:is(body[class*="page-"] main,.auth-overlay,.admin-ui,.advertiser-ui,.advertiser-login-ui) textarea{
  box-sizing:border-box!important;
  min-height:90px!important;
  border-radius:var(--stt-control-radius)!important;
  font-size:var(--stt-control-font)!important;
  line-height:1.45!important;
  padding:11px 12px!important;
}
:is(body[class*="page-"] main,.auth-overlay,.admin-ui,.advertiser-ui,.advertiser-login-ui) :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]){
  outline:none;
}
:is(body[class*="page-"] main,.auth-overlay,.admin-ui,.advertiser-ui,.advertiser-login-ui) :is(input,select,textarea):focus{
  border-color:var(--stt-focus)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--stt-focus) 13%,transparent)!important;
}
input[type="checkbox"],input[type="radio"]{font-family:initial!important}

/* Admin navigation is a tab-like control and keeps identical geometry. */
.admin-ui .nav a{
  box-sizing:border-box!important;
  height:var(--stt-control-height)!important;
  min-height:var(--stt-control-height)!important;
  max-height:var(--stt-control-height)!important;
  padding:0 var(--stt-control-padding-x)!important;
  border-radius:var(--stt-control-radius)!important;
  font-size:var(--stt-control-font)!important;
  font-weight:var(--stt-control-weight)!important;
  line-height:1.2!important;
  display:flex!important;
  align-items:center!important;
  gap:var(--stt-control-gap)!important;
}

/* Keep icon-only controls intentionally compact. */
:is(.tm-menu-btn,.tm-bell-btn,.drawer-close,.detail-close,.auth-close,.camera,.notice-head button,.review-dot,.center-action-btn,.pwa-install-fab){
  flex-shrink:0;
}

/* Launch-safe interaction: no permanent sweep/shimmer on buttons. */
:is(
  .page-home .class-cta,.page-home .view-batches,.page-home .support-cta,.page-home .fx-main-btn,.page-home .mini-btn,.page-home .batch-btn,.page-home .review-btn,.page-home .path-cta a,
  .page-dashboard .dash-btn,
  .page-batches .cat-tab,.page-batches .tab,.page-batches .btn,.page-batches .detail-btn,
  .page-tests .library-tab,.page-tests .test-btn,.page-tests .auth-gate-actions button,.page-tests .subject-open-btn,.page-tests .subject-option,
  .page-profile .answer-review-btn,.page-profile .action-btn,
  .page-edit-profile .btn,.page-edit-profile .back,
  .page-wallet .btn,.page-syllabus .back,
  .page-result .btn,.page-result .weak-topic-actions a,
  .page-exam .q-bubble.active,.page-exam .btn-action,.page-exam .btn-m-cancel,.page-exam .btn-m-submit,
  .auth-overlay .auth-tab,.auth-overlay .auth-submit,
  .admin-ui .btn,.admin-ui .nav a,
  .advertiser-ui .btn,.advertiser-login-ui .btn,
  .tm-menu-btn,.center-action-btn,.pwa-install-fab
)::after{
  animation:none!important;
  display:none!important;
  content:none!important;
}

/* Stable hover/touch feedback — no large scaling and no layout jump. */
:is(
  .page-home .class-cta,.page-home .view-batches,.page-home .support-cta,.page-home .fx-main-btn,.page-home .mini-btn,.page-home .batch-btn,.page-home .review-btn,.page-home .path-cta a,
  .page-dashboard .dash-btn,
  .page-batches .cat-tab,.page-batches .tab,.page-batches .btn,.page-batches .detail-btn,
  .page-tests .library-tab,.page-tests .test-btn,.page-tests .auth-gate-actions button,.page-tests .subject-open-btn,.page-tests .subject-option,
  .page-profile .answer-review-btn,.page-profile .action-btn,
  .page-edit-profile .btn,.page-edit-profile .back,
  .page-wallet .btn,.page-syllabus .back,
  .page-result .btn,.page-result .weak-topic-actions a,
  .page-exam .btn-action,.page-exam .btn-m-cancel,.page-exam .btn-m-submit,
  .auth-overlay .auth-tab,.auth-overlay .auth-submit,
  .admin-ui .btn,.admin-ui .nav a,
  .advertiser-ui .btn,.advertiser-login-ui .btn
){
  transition:transform .10s ease,box-shadow .14s ease,filter .14s ease,border-color .14s ease!important;
  transform:none!important;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent!important;
}
@media(hover:hover) and (pointer:fine){
  :is(
    .page-home .class-cta,.page-home .view-batches,.page-home .support-cta,.page-home .fx-main-btn,.page-home .mini-btn,.page-home .batch-btn,.page-home .review-btn,.page-home .path-cta a,
    .page-dashboard .dash-btn,
    .page-batches .cat-tab,.page-batches .tab,.page-batches .btn,.page-batches .detail-btn,
    .page-tests .library-tab,.page-tests .test-btn,.page-tests .auth-gate-actions button,.page-tests .subject-open-btn,.page-tests .subject-option,
    .page-profile .answer-review-btn,.page-profile .action-btn,
    .page-edit-profile .btn,.page-edit-profile .back,
    .page-wallet .btn,.page-syllabus .back,
    .page-result .btn,.page-result .weak-topic-actions a,
    .page-exam .btn-action,.page-exam .btn-m-cancel,.page-exam .btn-m-submit,
    .auth-overlay .auth-tab,.auth-overlay .auth-submit,
    .admin-ui .btn,.admin-ui .nav a,
    .advertiser-ui .btn,.advertiser-login-ui .btn
  ):hover{
    transform:translateY(-1px)!important;
    filter:brightness(1.025)!important;
  }
}
:is(
  .page-home .class-cta,.page-home .view-batches,.page-home .support-cta,.page-home .fx-main-btn,.page-home .mini-btn,.page-home .batch-btn,.page-home .review-btn,.page-home .path-cta a,
  .page-dashboard .dash-btn,
  .page-batches .cat-tab,.page-batches .tab,.page-batches .btn,.page-batches .detail-btn,
  .page-tests .library-tab,.page-tests .test-btn,.page-tests .auth-gate-actions button,.page-tests .subject-open-btn,.page-tests .subject-option,
  .page-profile .answer-review-btn,.page-profile .action-btn,
  .page-edit-profile .btn,.page-edit-profile .back,
  .page-wallet .btn,.page-syllabus .back,
  .page-result .btn,.page-result .weak-topic-actions a,
  .page-exam .btn-action,.page-exam .btn-m-cancel,.page-exam .btn-m-submit,
  .auth-overlay .auth-tab,.auth-overlay .auth-submit,
  .admin-ui .btn,.admin-ui .nav a,
  .advertiser-ui .btn,.advertiser-login-ui .btn
):is(:active,.stt-touch-active){
  transform:translateY(1px) scale(var(--stt-touch-scale,.985))!important;
  filter:brightness(.975)!important;
  box-shadow:0 2px 5px rgba(15,23,42,.14)!important;
}

/* Keyboard accessibility. */
:is(button,a,input,select,textarea):focus-visible{
  outline:2px solid color-mix(in srgb,var(--stt-focus) 70%,#fff)!important;
  outline-offset:2px!important;
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* === V4.1 launch hardening: actual rendered controls, one-by-one === */
body.page-tests main .library-tab,
body.page-tests main .test-btn,
body.page-tests main .auth-gate-actions button,
body.page-tests main .subject-open-btn,
body.page-tests main .subject-option,
body.page-batches main .cat-tab,
body.page-batches main .actions .btn,
body.page-batches .detail-btn,
body.page-dashboard main .dash-btn,
body.page-edit-profile main .btn,
body.page-wallet main .btn,
body.page-syllabus main .back,
body.page-result main .btn,
body.page-exam .btn-action,
body.page-exam .btn-m-cancel,
body.page-exam .btn-m-submit{
  height:var(--stt-control-height)!important;
  min-height:var(--stt-control-height)!important;
  max-height:var(--stt-control-height)!important;
  border-radius:var(--stt-control-radius)!important;
  font-size:var(--stt-control-font)!important;
  line-height:1.2!important;
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* True buttons used only as icon controls are 45px squares. */
.tm-menu-btn,.tm-bell-btn,.drawer-close,.notice-head button,.detail-close,.auth-close{
  width:var(--stt-icon-control-size)!important;min-width:var(--stt-icon-control-size)!important;max-width:var(--stt-icon-control-size)!important;
  height:var(--stt-icon-control-size)!important;min-height:var(--stt-icon-control-size)!important;max-height:var(--stt-icon-control-size)!important;
  border-radius:var(--stt-control-radius)!important;padding:0!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  box-sizing:border-box!important;
}

/* User-requested floating circles: preserve circle geometry regardless of theme. */
.center-action-btn{
  width:var(--stt-footer-center-size)!important;min-width:var(--stt-footer-center-size)!important;max-width:var(--stt-footer-center-size)!important;
  height:var(--stt-footer-center-size)!important;min-height:var(--stt-footer-center-size)!important;max-height:var(--stt-footer-center-size)!important;
  aspect-ratio:1/1!important;border-radius:50%!important;padding:0!important;
}
.pwa-install-fab{
  width:var(--stt-pwa-fab-size)!important;min-width:var(--stt-pwa-fab-size)!important;max-width:var(--stt-pwa-fab-size)!important;
  height:var(--stt-pwa-fab-size)!important;min-height:var(--stt-pwa-fab-size)!important;max-height:var(--stt-pwa-fab-size)!important;
  aspect-ratio:1/1!important;border-radius:50%!important;padding:0!important;
}


/* ============================================================
   STEP TO TOPPERS — BUTTON SURFACE SHINE v4.4
   Root-safe: uses button background-position, NOT ::after/::before.
   Applied only when the page explicitly adds .stt-shine-button.
   ============================================================ */
:root{
  --stt-shine-duration:3.8s;
  --stt-shine-highlight:rgba(255,255,255,.72);
  --stt-shine-soft:rgba(255,255,255,.15);
  --stt-touch-scale:.985;
}

/* Explicit home shine + automatic Batches shine on BLUE controls only. */
:is(
  .page-home .stt-shine-button,
  .page-batches .cat-tab.active,
  .page-batches .actions .btn:not(.secondary),
  .page-batches .detail-btn.primary
){
  position:relative!important;
  overflow:hidden!important;
  background-image:
    linear-gradient(112deg,
      transparent 0%,
      transparent 42%,
      var(--stt-shine-soft) 46%,
      var(--stt-shine-highlight) 50%,
      var(--stt-shine-soft) 54%,
      transparent 58%,
      transparent 100%),
    var(--blue-grad-vert)!important;
  background-repeat:no-repeat,no-repeat!important;
  background-size:260% 100%,100% 100%!important;
  background-position:160% 0,0 0!important;
  animation:sttButtonSurfaceShine var(--stt-shine-duration) ease-in-out infinite!important;
}

/* Keep white/secondary Batches surfaces completely clean. */
.page-batches .actions .btn.secondary,
.page-batches .detail-btn.light,
.page-batches .batch,
.page-batches .meta{
  animation:none!important;
}

@keyframes sttButtonSurfaceShine{
  0%,58%{background-position:160% 0,0 0}
  78%{background-position:-65% 0,0 0}
  100%{background-position:-65% 0,0 0}
}

/* Category cards intentionally never receive the shine class. */
.page-home .class-card.category-modern{
  animation:none!important;
}

@media(prefers-reduced-motion:reduce){
  :is(
    .page-home .stt-shine-button,
    .page-batches .cat-tab.active,
    .page-batches .actions .btn:not(.secondary),
    .page-batches .detail-btn.primary
  ){
    animation:none!important;
    background-image:var(--blue-grad-vert)!important;
    background-position:0 0!important;
  }
}
