/* Shared button treatment for Lamatna.
   Keeps each button's existing color while unifying shape, depth, and press states. */
:root{
  --lamatna-btn-border:#111;
  --lamatna-btn-radius:10px;
  --lamatna-btn-bottom:6px;
  --lamatna-btn-shadow:0 2px 0 rgba(0,0,0,.25);
  --lamatna-btn-highlight:rgba(255,255,255,.28);
  --lamatna-btn-glint:rgba(255,255,255,.42);
  --lamatna-btn-skew:-4deg;
  --lamatna-btn-unskew:4deg;
}

:where(html, body, button, input, textarea, select){
  font-family:'Cairo',sans-serif;
}

:where(
  button,
  [role="button"],
  .nav-icon-btn,
  .admin-btn,
  .btn-choose,
  .btn-ready,
  .modal-btn-choose,
  .input-modal-btn,
  .auth-btn,
  .btn-save,
  .btn-cancel,
  .btn-back,
  .store-price,
  .coupon-btn,
  .contact-btn,
  .promo-admin-btn,
  .nav-btn,
  .clear-btn,
  .bulk-btn,
  .bulk-clear,
  .bulk-sel-all,
  .btn-import-confirm,
  .btn-import-upload,
  .btn-import-cancel,
  .dashboard-card-btn,
  .pay-fallback-btn,
  .selection-play-btn,
  .selection-clear-btn,
  .selection-collapse-btn,
  .smart-action-btn,
  .randomize-btn,
  .quick-play-toggle,
  .display-mode-btn,
  .category-type-tab,
  .resume-game-btn,
  .subcat-group-toggle-btn,
  .helpers-carousel-btn,
  .mobile-nav-link
):not(.unstyled):not(.no-button-style){
  box-sizing:border-box !important;
  font-family:'Cairo',sans-serif !important;
  font-synthesis:none;
  border-color:var(--lamatna-btn-border) !important;
  border-style:solid !important;
  border-width:3px 3px var(--lamatna-btn-bottom) !important;
  border-radius:var(--lamatna-btn-radius) !important;
  box-shadow:var(--lamatna-btn-shadow) !important;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transform:skewX(var(--lamatna-btn-skew));
  transition:transform .12s ease, filter .18s ease, box-shadow .18s ease, border-width .12s ease !important;
  letter-spacing:0 !important;
}

:where(
  button,
  [role="button"],
  .nav-icon-btn,
  .admin-btn,
  .btn-choose,
  .btn-ready,
  .modal-btn-choose,
  .input-modal-btn,
  .auth-btn,
  .btn-save,
  .btn-cancel,
  .btn-back,
  .store-price,
  .coupon-btn,
  .contact-btn,
  .promo-admin-btn,
  .nav-btn,
  .clear-btn,
  .bulk-btn,
  .bulk-clear,
  .bulk-sel-all,
  .btn-import-confirm,
  .btn-import-upload,
  .btn-import-cancel,
  .dashboard-card-btn,
  .pay-fallback-btn,
  .selection-play-btn,
  .selection-clear-btn,
  .selection-collapse-btn,
  .smart-action-btn,
  .randomize-btn,
  .quick-play-toggle,
  .display-mode-btn,
  .category-type-tab,
  .resume-game-btn,
  .subcat-group-toggle-btn,
  .helpers-carousel-btn,
  .mobile-nav-link
):not(.unstyled):not(.no-button-style) > *{
  position:relative;
  z-index:2;
  transform:skewX(var(--lamatna-btn-unskew));
}

:where(
  button,
  [role="button"],
  .nav-icon-btn,
  .admin-btn,
  .btn-choose,
  .btn-ready,
  .modal-btn-choose,
  .input-modal-btn,
  .auth-btn,
  .btn-save,
  .btn-cancel,
  .btn-back,
  .store-price,
  .coupon-btn,
  .contact-btn,
  .promo-admin-btn,
  .nav-btn,
  .clear-btn,
  .bulk-btn,
  .bulk-clear,
  .bulk-sel-all,
  .btn-import-confirm,
  .btn-import-upload,
  .btn-import-cancel,
  .dashboard-card-btn,
  .pay-fallback-btn,
  .selection-play-btn,
  .selection-clear-btn,
  .selection-collapse-btn,
  .smart-action-btn,
  .randomize-btn,
  .quick-play-toggle,
  .display-mode-btn,
  .category-type-tab,
  .resume-game-btn,
  .subcat-group-toggle-btn,
  .helpers-carousel-btn,
  .mobile-nav-link
):not(.unstyled):not(.no-button-style)::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  left:0;
  height:4px;
  background:var(--lamatna-btn-highlight);
  pointer-events:none;
  z-index:1;
}

:where(
  button,
  [role="button"],
  .nav-icon-btn,
  .admin-btn,
  .btn-choose,
  .btn-ready,
  .modal-btn-choose,
  .input-modal-btn,
  .auth-btn,
  .btn-save,
  .btn-cancel,
  .btn-back,
  .store-price,
  .coupon-btn,
  .contact-btn,
  .promo-admin-btn,
  .nav-btn,
  .clear-btn,
  .bulk-btn,
  .bulk-clear,
  .bulk-sel-all,
  .btn-import-confirm,
  .btn-import-upload,
  .btn-import-cancel,
  .dashboard-card-btn,
  .pay-fallback-btn,
  .selection-play-btn,
  .selection-clear-btn,
  .selection-collapse-btn,
  .smart-action-btn,
  .randomize-btn,
  .quick-play-toggle,
  .display-mode-btn,
  .category-type-tab,
  .resume-game-btn,
  .subcat-group-toggle-btn,
  .helpers-carousel-btn,
  .mobile-nav-link
):not(.unstyled):not(.no-button-style)::after{
  content:"";
  position:absolute;
  top:-3px;
  right:-8px;
  width:12px;
  height:8px;
  background:var(--lamatna-btn-glint);
  transform:rotate(40deg);
  pointer-events:none;
  z-index:1;
}

:where(
  button,
  [role="button"],
  .nav-icon-btn,
  .admin-btn,
  .btn-choose,
  .btn-ready,
  .modal-btn-choose,
  .input-modal-btn,
  .auth-btn,
  .btn-save,
  .btn-cancel,
  .btn-back,
  .store-price,
  .coupon-btn,
  .contact-btn,
  .promo-admin-btn,
  .nav-btn,
  .clear-btn,
  .bulk-btn,
  .bulk-clear,
  .bulk-sel-all,
  .btn-import-confirm,
  .btn-import-upload,
  .btn-import-cancel,
  .dashboard-card-btn,
  .pay-fallback-btn,
  .selection-play-btn,
  .selection-clear-btn,
  .selection-collapse-btn,
  .smart-action-btn,
  .randomize-btn,
  .quick-play-toggle,
  .display-mode-btn,
  .category-type-tab,
  .resume-game-btn,
  .subcat-group-toggle-btn,
  .helpers-carousel-btn,
  .mobile-nav-link
):not(.unstyled):not(.no-button-style):hover:not(:disabled):not([aria-disabled="true"]){
  transform:skewX(var(--lamatna-btn-skew)) translateY(-2px);
  filter:brightness(1.05);
  box-shadow:0 4px 0 rgba(0,0,0,.26) !important;
}

:where(
  button,
  [role="button"],
  .nav-icon-btn,
  .admin-btn,
  .btn-choose,
  .btn-ready,
  .modal-btn-choose,
  .input-modal-btn,
  .auth-btn,
  .btn-save,
  .btn-cancel,
  .btn-back,
  .store-price,
  .coupon-btn,
  .contact-btn,
  .promo-admin-btn,
  .nav-btn,
  .clear-btn,
  .bulk-btn,
  .bulk-clear,
  .bulk-sel-all,
  .btn-import-confirm,
  .btn-import-upload,
  .btn-import-cancel,
  .dashboard-card-btn,
  .pay-fallback-btn,
  .selection-play-btn,
  .selection-clear-btn,
  .selection-collapse-btn,
  .smart-action-btn,
  .randomize-btn,
  .quick-play-toggle,
  .display-mode-btn,
  .category-type-tab,
  .resume-game-btn,
  .subcat-group-toggle-btn,
  .helpers-carousel-btn,
  .mobile-nav-link
):not(.unstyled):not(.no-button-style):active:not(:disabled):not([aria-disabled="true"]){
  transform:skewX(var(--lamatna-btn-skew)) translateY(3px);
  border-bottom-width:3px !important;
  box-shadow:0 1px 0 rgba(0,0,0,.2) !important;
}

:where(button, [role="button"]):disabled,
:where(button, [role="button"])[aria-disabled="true"]{
  filter:saturate(.8);
}

@media (max-width:700px){
  :where(button, [role="button"], .nav-icon-btn):not(.unstyled):not(.no-button-style){
    border-bottom-width:5px !important;
  }
}

.back-btn:not(.unstyled):not(.no-button-style){
  box-sizing:border-box !important;
  border-color:var(--lamatna-btn-border) !important;
  border-style:solid !important;
  border-width:3px 3px var(--lamatna-btn-bottom) !important;
  border-radius:var(--lamatna-btn-radius) !important;
  box-shadow:var(--lamatna-btn-shadow) !important;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transform:skewX(var(--lamatna-btn-skew));
  transition:transform .12s ease, filter .18s ease, box-shadow .18s ease, border-width .12s ease !important;
  letter-spacing:0 !important;
}

.back-btn:not(.unstyled):not(.no-button-style) > *{
  position:relative;
  z-index:2;
  transform:skewX(var(--lamatna-btn-unskew));
}

.back-btn:not(.unstyled):not(.no-button-style)::before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  left:0;
  height:4px;
  background:var(--lamatna-btn-highlight);
  pointer-events:none;
  z-index:1;
}

.back-btn:not(.unstyled):not(.no-button-style)::after{
  content:"";
  position:absolute;
  top:-3px;
  right:-8px;
  width:12px;
  height:8px;
  background:var(--lamatna-btn-glint);
  transform:rotate(40deg);
  pointer-events:none;
  z-index:1;
}

.back-btn:not(.unstyled):not(.no-button-style):hover{
  transform:skewX(var(--lamatna-btn-skew)) translateY(-2px);
  filter:brightness(1.05);
  box-shadow:0 4px 0 rgba(0,0,0,.26) !important;
}

.back-btn:not(.unstyled):not(.no-button-style):active{
  transform:skewX(var(--lamatna-btn-skew)) translateY(3px);
  border-bottom-width:3px !important;
  box-shadow:0 1px 0 rgba(0,0,0,.2) !important;
}

.nav-icon-btn.icon-only,
.theme-btn,
.theme-toggle,
#themeBtn,
.display-mode-btn,
.helpers-carousel-btn,
.selection-collapse-btn,
.subcat-group-toggle-btn,
.input-modal-close,
.modal-close,
.act-btn,
.mobile-menu-toggle,
.dashboard-nav-btn,
#qBankBtn,
.back-btn,
.timer-icon,
.question-report-btn,
.question-report-close,
.notif-del-btn,
.admin-subcat-card-hide,
.subcat-info-badge,
.helpers-carousel-dot{
  --lamatna-icon-btn-size:42px;
  --lamatna-icon-btn-mobile-size:40px;
}

.score-ctrl-btn{
  --lamatna-icon-btn-size:52px;
  --lamatna-icon-btn-mobile-size:42px;
}

.input-modal-close,
.modal-close,
.question-report-close,
.admin-subcat-card-hide,
.helpers-carousel-dot,
.subcat-info-badge{
  --lamatna-icon-btn-size:34px;
  --lamatna-icon-btn-mobile-size:34px;
}

.act-btn,
.notif-del-btn{
  --lamatna-icon-btn-size:38px;
  --lamatna-icon-btn-mobile-size:36px;
}

.display-mode-btn{
  --lamatna-icon-btn-size:30px;
  --lamatna-icon-btn-mobile-size:30px;
  --lamatna-btn-bottom:4px;
}

/* Icon-only buttons are square; text buttons keep their natural/current width. */
:where(
  .icon-only,
  .theme-btn,
  .theme-toggle,
  #themeBtn,
  .display-mode-btn,
  .helpers-carousel-btn,
  .selection-collapse-btn,
  .subcat-group-toggle-btn,
  .input-modal-close,
  .modal-close,
  .act-btn,
  .score-ctrl-btn,
  .mobile-menu-toggle,
  .dashboard-nav-btn,
  #qBankBtn,
  .back-btn,
  .timer-icon,
  .question-report-btn,
  .question-report-close,
  .notif-del-btn,
  .admin-subcat-card-hide,
  .subcat-info-badge,
  .helpers-carousel-dot,
  [aria-label]:has(> svg:only-child),
  [aria-label]:has(> i:only-child),
  button:has(> svg:only-child),
  button:has(> i:only-child),
  [role="button"]:has(> svg:only-child),
  [role="button"]:has(> i:only-child)
):not(.unstyled):not(.no-button-style){
  width:var(--lamatna-icon-btn-size, 42px) !important;
  min-width:var(--lamatna-icon-btn-size, 42px) !important;
  max-width:var(--lamatna-icon-btn-size, 42px) !important;
  height:var(--lamatna-icon-btn-size, 42px) !important;
  min-height:var(--lamatna-icon-btn-size, 42px) !important;
  max-height:var(--lamatna-icon-btn-size, 42px) !important;
  aspect-ratio:1 / 1 !important;
  padding:0 !important;
  flex:0 0 var(--lamatna-icon-btn-size, 42px) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

:where(
  .icon-only,
  .theme-btn,
  .theme-toggle,
  #themeBtn,
  .display-mode-btn,
  .helpers-carousel-btn,
  .selection-collapse-btn,
  .subcat-group-toggle-btn,
  .input-modal-close,
  .modal-close,
  .act-btn,
  .score-ctrl-btn,
  .mobile-menu-toggle,
  .dashboard-nav-btn,
  #qBankBtn,
  .back-btn,
  .timer-icon,
  .question-report-btn,
  .question-report-close,
  .notif-del-btn,
  .admin-subcat-card-hide,
  .subcat-info-badge,
  .helpers-carousel-dot,
  [aria-label]:has(> svg:only-child),
  [aria-label]:has(> i:only-child),
  button:has(> svg:only-child),
  button:has(> i:only-child),
  [role="button"]:has(> svg:only-child),
  [role="button"]:has(> i:only-child)
):not(.unstyled):not(.no-button-style) :where(svg, i){
  position:relative;
  z-index:2;
  flex-shrink:0;
}

@media (max-width:700px){
  :where(
    .icon-only,
    .theme-btn,
    .theme-toggle,
    #themeBtn,
    .display-mode-btn,
    .helpers-carousel-btn,
    .selection-collapse-btn,
    .subcat-group-toggle-btn,
    .input-modal-close,
    .modal-close,
    .act-btn,
    .score-ctrl-btn,
    .mobile-menu-toggle,
    .dashboard-nav-btn,
    #qBankBtn,
    .back-btn,
    .timer-icon,
    .question-report-btn,
    .question-report-close,
    .notif-del-btn,
    .admin-subcat-card-hide,
    .subcat-info-badge,
    .helpers-carousel-dot,
    [aria-label]:has(> svg:only-child),
    [aria-label]:has(> i:only-child),
    button:has(> svg:only-child),
    button:has(> i:only-child),
    [role="button"]:has(> svg:only-child),
    [role="button"]:has(> i:only-child)
  ):not(.unstyled):not(.no-button-style){
    width:var(--lamatna-icon-btn-mobile-size, var(--lamatna-icon-btn-size, 40px)) !important;
    min-width:var(--lamatna-icon-btn-mobile-size, var(--lamatna-icon-btn-size, 40px)) !important;
    max-width:var(--lamatna-icon-btn-mobile-size, var(--lamatna-icon-btn-size, 40px)) !important;
    height:var(--lamatna-icon-btn-mobile-size, var(--lamatna-icon-btn-size, 40px)) !important;
    min-height:var(--lamatna-icon-btn-mobile-size, var(--lamatna-icon-btn-size, 40px)) !important;
    max-height:var(--lamatna-icon-btn-mobile-size, var(--lamatna-icon-btn-size, 40px)) !important;
    flex-basis:var(--lamatna-icon-btn-mobile-size, var(--lamatna-icon-btn-size, 40px)) !important;
  }
}

/* Exact dark-mode toggle treatment */
:where(#themeBtn, .theme-btn, .theme-toggle, [onclick*="toggleTheme"]){
  width:42px !important;
  min-width:42px !important;
  height:42px !important;
  min-height:42px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-color:#05070d !important;
  border-style:solid !important;
  border-width:3px 3px 6px !important;
  border-radius:4px !important;
  box-shadow:0 2px 0 rgba(0,0,0,.25) !important;
  transform:skewX(-4deg) rotate(1deg);
  filter:none !important;
  overflow:hidden !important;
}

:where(#themeBtn, .theme-btn, .theme-toggle, [onclick*="toggleTheme"]) > *{
  display:block !important;
  transform:skewX(4deg) rotate(-1deg);
  position:relative;
  z-index:2;
}

:where(#themeBtn, .theme-btn, .theme-toggle, [onclick*="toggleTheme"])::before{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  left:0 !important;
  width:auto !important;
  height:4px !important;
  display:block !important;
  background:rgba(255,255,255,.26) !important;
  border:0 !important;
  border-radius:0 !important;
  transform:none !important;
  box-shadow:none !important;
}

:where(#themeBtn, .theme-btn, .theme-toggle, [onclick*="toggleTheme"])::after{
  content:"" !important;
  position:absolute !important;
  top:4px !important;
  right:5px !important;
  width:10px !important;
  height:5px !important;
  background:rgba(255,255,255,.2) !important;
  transform:rotate(35deg) !important;
  border-radius:1px !important;
  pointer-events:none !important;
}

:where(#themeBtn, .theme-btn, .theme-toggle, [onclick*="toggleTheme"]):hover:not(:disabled){
  transform:skewX(-4deg) rotate(1deg) translateY(-1px) !important;
  box-shadow:0 4px 0 rgba(0,0,0,.26) !important;
}

:where(#themeBtn, .theme-btn, .theme-toggle, [onclick*="toggleTheme"]):active:not(:disabled){
  transform:skewX(-4deg) rotate(1deg) translateY(3px) !important;
  border-bottom-width:3px !important;
  box-shadow:0 1px 0 rgba(0,0,0,.2) !important;
}