/* Shared soft materials for the learning, dashboard, arena and account-entry UI.
   Component geometry, access states and interactive behavior stay local. */
body.cybox-premium-ui {
  --cy-premium-face: rgba(38, 43, 47, .96);
  --cy-premium-base: rgba(25, 29, 34, .94);
  --cy-premium-rim: rgba(144, 163, 154, .17);
  --cy-premium-highlight: rgba(221, 231, 225, .28);
  --cy-premium-shadow: 0 2px 5px #00000014, 0 14px 36px -18px #00000080, inset 0 1px 0 #ffffff0b;
  --cy-premium-hover-shadow: 0 4px 8px #0000001c, 0 22px 42px -20px #000000a0, 0 0 0 1px rgba(var(--cy-ui-accent-rgb, 90,201,166), .16), inset 0 1px 0 #ffffff14;
  --cy-premium-glass: rgba(30, 34, 39, .86);
  --cy-premium-field: rgba(18, 22, 26, .62);
  --cy-premium-motion: 220ms cubic-bezier(.2,.75,.25,1);
  --cy-premium-press: 140ms cubic-bezier(.2,.9,.35,1.2);
}
html[data-cy-color-scheme="light"] body.cybox-premium-ui,
html body.cybox-premium-ui:is(.auth-site-page, .hello-page, .cybox-auth-register) {
  --cy-premium-face: rgba(255, 255, 253, .96);
  --cy-premium-base: rgba(247, 247, 242, .91);
  --cy-premium-rim: rgba(114, 126, 113, .23);
  --cy-premium-highlight: rgba(255, 255, 255, .96);
  --cy-premium-shadow: 0 2px 4px #252b2010, 0 16px 36px -22px #353e3140, inset 0 1px 0 #fff;
  --cy-premium-hover-shadow: 0 4px 8px #252b200c, 0 24px 44px -22px #353e3152, 0 0 0 1px rgba(var(--cy-ui-accent-rgb, 8,102,79), .14), inset 0 1px 0 #fff;
  --cy-premium-glass: rgba(255, 255, 252, .85);
  --cy-premium-field: rgba(255, 255, 253, .76);
}
@layer cybox-design-consistency {
  /* A fine gradient edge and a layered ambient shadow share one material. */
  html body.cybox-premium-ui :is(
    .account-learning-card, .account-picker-course,
    .hw-card, .empty-hw-card, .hw-ai-review-section, .hw-ai-review-chip,
    .index-grade-card, .recent-snapshot-card, .teacher-grade-card,
    .index-attendance, .timeboard-card, .luxe-card,
    .arena-language-card, .arena-rank-card, .arena-achievements-block,
    .arena-center-screen, .arena-result-stats,
    .fr-friend, .fr-request, .promo-card,
    .login-card, .recovery-card, .login-form-panel, .recovery-form-panel, .hello-option-card, .hello-interest-card,
    .auth-card, .register-card
  ) {
    border: 1px solid transparent !important;
    background: linear-gradient(155deg, var(--cy-premium-face), var(--cy-premium-base)) padding-box,
      linear-gradient(135deg, var(--cy-premium-highlight), var(--cy-premium-rim) 52%, var(--cy-premium-highlight)) border-box !important;
    box-shadow: var(--cy-premium-shadow) !important;
    background-clip: padding-box, border-box !important;
  }
  /* Blur belongs to floating chrome, rather than every item in a long list. */
  html body.cybox-premium-ui :is(.navbar-custom, .profile-workspace-sidebar, .arena-header) {
    background: var(--cy-premium-glass) !important;
    border-color: var(--cy-premium-rim) !important;
    box-shadow: var(--cy-premium-shadow) !important;
    -webkit-backdrop-filter: blur(18px) saturate(115%) !important;
    backdrop-filter: blur(18px) saturate(115%) !important;
  }
  html body.cybox-premium-ui :is(.hw-ai-review-dialog, .login-form-panel, .recovery-form-panel) {
    border-color: var(--cy-premium-rim) !important;
    box-shadow: 0 8px 24px #10151018, 0 36px 90px -30px #10151044, inset 0 1px 0 var(--cy-premium-highlight) !important;
  }
  html body.cybox-premium-ui :is(.login-card, .recovery-card, .login-form-panel, .recovery-form-panel, .auth-card) {
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
  }
  html body.cybox-premium-ui :is(#profile-workspace-overlay, #dr-overlay, #promo-overlay) {
    --pw-icon-ink: var(--cy-ui-icon-ink);
    --pw-icon-soft: var(--cy-ui-icon-surface);
  }
  /* Existing rounded, neutral icon tiles are the common graphical vocabulary. */
  html body.cybox-premium-ui :is(.main-menu .menu-icon, .hw-tab-btn__icon, .hw-desc-icon, .pw-section-icon, .admin-currency-title-ico) {
    background: var(--cy-ui-icon-surface, #eceae3) !important;
    border: 1px solid var(--cy-ui-icon-border, #dedfd9) !important;
    color: var(--cy-ui-icon-ink, #536278) !important;
    -webkit-text-fill-color: currentColor !important;
    box-shadow: var(--cy-ui-icon-shadow, inset 0 1px 0 #fff, 0 2px 0 #d7d6cf, 0 4px 8px #292f2510) !important;
  }
  html body.cybox-premium-ui :is(.main-menu .menu-icon, .hw-tab-btn__icon, .hw-desc-icon, .pw-section-icon) svg {
    color: inherit !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  html body.cybox-premium-ui :is(.hw-tab-btn__icon)::before { display: none !important; }

  /* Currency images keep their original Gems/Points artwork, just like the
     topbar. Their img src and .icon-gems/.icon-points backgrounds own the asset. */
}

/* Small, predictable responses; translation is independent of existing transforms
   used for positioned buttons, sliders and lesson plates. */
html body.cybox-premium-ui :is(button, a.btn, .menu-link, [role="tab"], .hello-option-card, .hello-interest-card) {
  transition: color var(--cy-premium-motion), background-color var(--cy-premium-motion),
    border-color var(--cy-premium-motion), box-shadow var(--cy-premium-motion),
    opacity var(--cy-premium-motion), transform var(--cy-premium-motion), translate var(--cy-premium-press);
}
html body.cybox-premium-ui :is(.account-learning-card, .account-picker-course, .hw-card, .index-grade-card, .arena-language-card, .arena-rank-card) {
  transition: box-shadow var(--cy-premium-motion), border-color var(--cy-premium-motion), transform var(--cy-premium-motion);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html body.cybox-premium-ui :is(button, a.btn, .menu-link):not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-disabled):hover {
    translate: 0 -1px;
  }
  @layer cybox-design-consistency {
    html body.cybox-premium-ui :is(.account-learning-card, .account-picker-course, .hw-card, .index-grade-card, .arena-language-card, .arena-rank-card):hover {
      box-shadow: var(--cy-premium-hover-shadow) !important;
    }
  }
}
html body.cybox-premium-ui :is(button, a.btn, .menu-link):not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-disabled):active {
  translate: 0 1px;
}
html body.cybox-premium-ui :is(button, a, input, select, textarea, [tabindex="0"]):focus-visible {
  outline: 2px solid var(--cy-ui-accent, #08664f);
  outline-offset: 4px;
}
html body.cybox-premium-ui :is(input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea) {
  transition: border-color var(--cy-premium-motion), box-shadow var(--cy-premium-motion), background-color var(--cy-premium-motion);
}
html body.cybox-premium-ui :is(input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea):focus-visible {
  box-shadow: 0 0 0 4px rgba(var(--cy-ui-accent-rgb, 8,102,79), .1);
}
@media (prefers-reduced-motion: reduce) {
  html body.cybox-premium-ui :is(button, a.btn, .menu-link, [role="tab"], input, select, textarea,
    .hello-option-card, .hello-interest-card, .account-learning-card, .account-picker-course,
    .hw-card, .index-grade-card, .arena-language-card, .arena-rank-card) {
    transition: none !important;
    translate: none !important;
  }
}
@media (forced-colors: active) {
  html body.cybox-premium-ui :is(.account-learning-card, .account-picker-course, .hw-card, .arena-card, .hw-ai-review-section) {
    border: 1px solid CanvasText !important;
    background: Canvas !important;
    box-shadow: none !important;
  }
}

/* Account entry forms use the same quiet floating material as learning cards. */
html body.cybox-premium-ui :is(.login-form-panel, .recovery-form-panel) {
  box-sizing: border-box;
  max-width: 480px;
  padding: clamp(20px, 3vw, 32px);
  border-radius: 32px;
}
@layer cybox-design-consistency {
  html body.cybox-premium-ui .hello-radio:checked + :is(.hello-option-card, .hello-interest-card) {
    border-color: var(--cy-ui-accent, #08664f) !important;
    box-shadow: 0 0 0 3px rgba(var(--cy-ui-accent-rgb, 8,102,79), .12), var(--cy-premium-shadow) !important;
  }
}