/*
  GYANEXIS product experience layer
  ---------------------------------------------------------------------------
  A deliberately small token and interaction system which sits above the
  legacy page styles. It keeps individual screen layouts intact while giving
  the whole platform one visual, responsive, and accessible language.
*/

:root {
  --gx-primary: #1554d1;
  --gx-primary-strong: #0b3b9d;
  --gx-primary-soft: #eaf1ff;
  --gx-gold: #e8ae19;
  --gx-gold-strong: #b77905;
  --gx-gold-soft: #fff7df;
  --gx-ink: #121826;
  --gx-heading: #101728;
  --gx-text: #253047;
  --gx-muted: #66738a;
  --gx-surface: #ffffff;
  --gx-surface-subtle: #f6f8fc;
  --gx-line: rgba(27, 44, 79, .14);
  --gx-success: #087f5b;
  --gx-success-soft: #e7f8f1;
  --gx-warning: #a15c00;
  --gx-warning-soft: #fff5d7;
  --gx-danger: #c3374a;
  --gx-danger-soft: #fff0f2;
  --gx-radius-sm: 10px;
  --gx-radius-md: 16px;
  --gx-radius-lg: 24px;
  --gx-space-1: 4px;
  --gx-space-2: 8px;
  --gx-space-3: 12px;
  --gx-space-4: 16px;
  --gx-space-5: 24px;
  --gx-space-6: 32px;
  --gx-space-7: 48px;
  --gx-shadow-soft: 0 3px 12px rgba(15, 31, 60, .06);
  --gx-shadow-card: 0 12px 30px rgba(15, 31, 60, .10);
  --gx-shadow-elevated: 0 20px 48px rgba(15, 31, 60, .16);
  --gx-ease: cubic-bezier(.2, .7, .25, 1);
  --gx-fast: 140ms;
  --gx-medium: 220ms;
}

html { scroll-behavior: smooth; }
body {
  color: var(--gx-text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection { color: #fff; background: var(--gx-primary); }
:where(button, a, input, select, textarea, summary, [role="button"]) { -webkit-tap-highlight-color: transparent; }
:where(button, [role="button"], input, select, textarea) { min-height: 44px; }
:where(button, [role="button"]) { touch-action: manipulation; }
:where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid rgba(21, 84, 209, .36) !important;
  outline-offset: 3px;
}

/* Keyboard users get a reliable way to skip lengthy chrome. */
.gx-skip-link {
  position: fixed;
  z-index: 10000;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  color: #fff;
  background: var(--gx-primary-strong);
  transform: translateY(-160%);
  transition: transform var(--gx-fast) var(--gx-ease);
}
.gx-skip-link:focus { transform: translateY(0); }

/* Shared elevated surfaces — intentionally quiet, so data and actions lead. */
:where(.card, .panel, .section, .tab-content, .auth-box, .glass-panel, .modal-content, .popup-card, .forgot-card, .support-inline-panel, .stat-card, .reward-card, .result-card) {
  border-color: var(--gx-line) !important;
  box-shadow: var(--gx-shadow-soft);
}
:where(.card, .panel, .reward-card, .stat-card, .result-card):not(.no-hover):hover {
  border-color: rgba(21, 84, 209, .24) !important;
  box-shadow: var(--gx-shadow-card);
}

/* A consistent action hierarchy for reused buttons. Individual semantic colors
   are preserved by allowing their own explicit success/danger classes below. */
:where(.btn, .action-btn, .submit-btn, .login-btn, .confirm-btn, .popup-btn, .home-btn, .contact-button, .forgot-btn.primary) {
  min-height: 44px;
  border-radius: 12px !important;
  font-weight: 750 !important;
  letter-spacing: .005em;
  transition: transform var(--gx-fast) var(--gx-ease), box-shadow var(--gx-fast) var(--gx-ease), background var(--gx-fast) var(--gx-ease), border-color var(--gx-fast) var(--gx-ease) !important;
}
:where(.btn, .action-btn, .submit-btn, .login-btn, .confirm-btn, .popup-btn, .home-btn, .contact-button, .forgot-btn.primary):hover:not(:disabled) {
  transform: translateY(-1px);
}
:where(button, .btn, .action-btn):disabled,
:where(button, .btn, .action-btn)[aria-busy="true"] { cursor: wait; opacity: .64; }
.gx-button-loading { position: relative; color: transparent !important; pointer-events: none; }
.gx-button-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--gx-primary);
  border-right-color: transparent;
  border-radius: 50%;
  animation: gx-spin 700ms linear infinite;
}

/* Forms should communicate focus, invalidity, and recovery beyond color alone. */
:where(input, select, textarea) {
  border-color: var(--gx-line) !important;
  border-radius: var(--gx-radius-sm) !important;
  color: var(--gx-ink);
  background-color: rgba(255, 255, 255, .96);
}
:where(input, select, textarea)::placeholder { color: #8490a5; opacity: 1; }
:where(input, select, textarea):focus {
  border-color: var(--gx-primary) !important;
  box-shadow: 0 0 0 4px rgba(21, 84, 209, .12) !important;
}
:where(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--gx-danger) !important;
  box-shadow: 0 0 0 4px rgba(195, 55, 74, .10) !important;
}
.gx-field-error {
  display: block;
  margin-top: 6px;
  color: var(--gx-danger);
  font-size: .82rem;
  font-weight: 650;
}

/* Native and custom dialogs now share a calm, focused presentation. */
:where(.modal, .popup-modal, .forgot-modal, .modal-overlay) { backdrop-filter: blur(3px); }
:where(.modal-content, .popup-card, .forgot-card) {
  max-width: min(560px, calc(100vw - 28px));
  border: 1px solid var(--gx-line) !important;
  border-radius: var(--gx-radius-md) !important;
  box-shadow: var(--gx-shadow-elevated) !important;
}
.modal.active .modal-content, .modal.show .modal-content, .popup-modal.show-popup .popup-card, .forgot-modal.show-forgot .forgot-card {
  animation: gx-dialog-in var(--gx-medium) var(--gx-ease) both;
}

/* Accessible feedback primitive, available to every present and future screen. */
.gx-toast-region {
  position: fixed;
  z-index: 10050;
  right: 18px;
  bottom: 18px;
  display: grid;
  width: min(390px, calc(100vw - 32px));
  gap: 10px;
  pointer-events: none;
}
.gx-toast {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--gx-line);
  border-left: 4px solid var(--gx-primary);
  border-radius: 14px;
  color: var(--gx-ink);
  background: rgba(255, 255, 255, .98);
  box-shadow: var(--gx-shadow-elevated);
  pointer-events: auto;
  animation: gx-toast-in var(--gx-medium) var(--gx-ease) both;
}
.gx-toast--success { border-left-color: var(--gx-success); }
.gx-toast--warning { border-left-color: var(--gx-warning); }
.gx-toast--error { border-left-color: var(--gx-danger); }
.gx-toast__icon { font-weight: 900; color: var(--gx-primary); }
.gx-toast--success .gx-toast__icon { color: var(--gx-success); }
.gx-toast--warning .gx-toast__icon { color: var(--gx-warning); }
.gx-toast--error .gx-toast__icon { color: var(--gx-danger); }
.gx-toast strong, .gx-toast p { display: block; margin: 0; }
.gx-toast p { margin-top: 2px; color: var(--gx-muted); font-size: .88rem; }
.gx-toast button { min-height: 28px; width: 28px; padding: 0; border: 0; color: var(--gx-muted); background: transparent; }

/* Sticky chrome gets a little separation only once it matters. */
.gx-header-scrolled, .sq-header.gx-header-scrolled, .gx-home-header.gx-header-scrolled {
  box-shadow: 0 10px 26px rgba(15, 31, 60, .10) !important;
  border-bottom-color: rgba(21, 84, 209, .16) !important;
}
:where(.sq-link, .gx-home-nav a, .admin-side-link)[aria-current="page"] {
  color: var(--gx-primary) !important;
  font-weight: 800 !important;
}

/* Learning screens: compact hierarchy, readable answers, and state clarity. */
body#quiz-page .option-btn {
  min-height: 58px;
  border-radius: 14px !important;
  border-color: var(--gx-line) !important;
  box-shadow: none !important;
}
body#quiz-page .option-btn:hover:not(:disabled), body#quiz-page .option-btn:focus-visible {
  border-color: var(--gx-primary) !important;
  background: var(--gx-primary-soft) !important;
  transform: translateY(-1px);
}
body#quiz-page .option-btn.correct { color: #075e45; background: var(--gx-success-soft) !important; border-color: rgba(8, 127, 91, .5) !important; }
body#quiz-page .option-btn.incorrect { color: #9d2337; background: var(--gx-danger-soft) !important; border-color: rgba(195, 55, 74, .5) !important; }
body#quiz-page .timer-ring { box-shadow: 0 10px 24px rgba(15, 31, 60, .12), 0 0 0 8px rgba(255,255,255,.72); }
body#quiz-page .timer-ring[data-state="warning"], body#quiz-page .timer-ring.warning { --timer-accent: var(--gx-gold); }
body#quiz-page .timer-ring[data-state="critical"], body#quiz-page .timer-ring.critical { --timer-accent: var(--gx-danger); animation: gx-urgent 1.25s ease-in-out infinite; }
body#quiz-page .progress-fill { background: linear-gradient(90deg, var(--gx-primary), #4c8dff) !important; }
body#quiz-page .result-card { border-radius: 16px !important; }

/* Authentication and data-intensive admin interfaces need an intentionally
   different density. */
body:has(.auth-container) .auth-box, body:has(.auth-wrapper) .auth-box { box-shadow: var(--gx-shadow-elevated) !important; }
.admin-sidebar { border-right-color: rgba(255,255,255,.12); }
.admin-side-link { min-height: 42px; border-radius: 10px !important; }
.admin-side-link.active, .admin-side-link[aria-current="page"] { box-shadow: inset 3px 0 0 var(--gx-gold); }
.table-container { border-radius: var(--gx-radius-sm); }
.data-table th { color: var(--gx-muted); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; }
.data-table tr:hover td { background: rgba(21, 84, 209, .035); }

/* Loading placeholders preserve spatial rhythm when screens opt into them. */
.gx-skeleton { position: relative; overflow: hidden; color: transparent !important; background: #e9edf5 !important; border-color: transparent !important; }
.gx-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent); animation: gx-shimmer 1.25s infinite; }

@keyframes gx-spin { to { transform: rotate(360deg); } }
@keyframes gx-shimmer { to { transform: translateX(100%); } }
@keyframes gx-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes gx-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes gx-urgent { 50% { transform: scale(1.025); box-shadow: 0 10px 28px rgba(195,55,74,.22), 0 0 0 8px rgba(255,255,255,.72); } }

@media (max-width: 760px) {
  :root { --gx-radius-lg: 20px; }
  .gx-toast-region { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  :where(.modal-content, .popup-card, .forgot-card) { max-height: min(82vh, 760px); overflow-y: auto; }
  .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 640px; }
  body#quiz-page .option-btn { min-height: 54px; padding: 13px 14px; }
}

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