@charset "UTF-8";

/* src/styles.scss */
:root {
  --bg: #040a20;
  --navy-950: #060f2c;
  --navy-900: #0d2258;
  --navy-800: #0a2e86;
  --blue-700: #10368f;
  --blue-600: #1450c8;
  --blue-400: #5aa8ff;
  --blue-ice: #8fc8ff;
  --gold-600: #b87d14;
  --gold-500: #dca028;
  --gold-400: #f0c850;
  --gold-300: #f0dc64;
  --red-500: #ff3b30;
  --red-700: #b90f11;
  --text: #f2f9ff;
  --muted: #93aed4;
  --panel: rgb(13 34 88 / 78%);
  --border: rgb(47 111 224 / 38%);
  --shadow-blue: 0 0 32px rgb(47 111 224 / 34%);
  --shadow-gold: 0 0 35px rgb(220 160 40 / 26%);
  --team-blue: #1a55cc;
  --team-blue-deep: #0a2e86;
  --team-blue-edge: #5aa8ff;
  --team-red: #a92118;
  --team-red-deep: #5d0708;
  --team-red-edge: #ff754f;
  --ok: #34d399;
  --bad: #ff6f66;
  --gold: var(--gold-500);
  --gold-deep: var(--gold-600);
  --accent: var(--gold-400);
  --line: rgb(47 111 224 / 40%);
  --surface-2: rgb(6 15 44 / 82%);
  --radius: 16px;
  --radius-pill: 999px;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
html,
body {
  min-block-size: 100%;
  margin: 0;
  font-family:
    Inter,
    "Cairo",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: var(--text);
  background: var(--bg);
}
button,
input,
select {
  font: inherit;
}
button {
  color: inherit;
}
h1,
h2,
h3 {
  line-height: 1.1;
  text-wrap: balance;
  margin: 0;
}
a {
  color: var(--gold-400);
}
.app-shell {
  min-block-size: 100dvh;
  inline-size: 100%;
  position: relative;
}
.stage-bg {
  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(47, 111, 224, 0.35),
      transparent 34%),
    radial-gradient(
      circle at 15% 30%,
      rgba(47, 111, 224, 0.2),
      transparent 26%),
    radial-gradient(
      circle at 85% 24%,
      rgba(255, 182, 35, 0.14),
      transparent 24%),
    linear-gradient(
      180deg,
      #0d2258 0%,
      #060f2c 52%,
      #02061a 100%);
  background-attachment: fixed;
}
.stage-bg::before,
.stage-bg::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.stage-bg::before {
  background-image:
    radial-gradient(
      circle,
      rgba(47, 111, 224, 0.62) 0 2px,
      transparent 2.8px);
  background-size: 28px 28px;
  opacity: 0.15;
  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      black 22%,
      black 88%,
      transparent 100%);
  mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      black 22%,
      black 88%,
      transparent 100%);
}
.stage-bg::after {
  background:
    linear-gradient(
      105deg,
      transparent 0 16%,
      rgba(47, 111, 224, 0.12) 17%,
      transparent 21%),
    linear-gradient(
      75deg,
      transparent 0 77%,
      rgba(255, 199, 72, 0.09) 78%,
      transparent 82%);
}
.stage-lights {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    conic-gradient(
      from 196deg at 15% 0%,
      transparent 0 4deg,
      rgba(47, 111, 224, 0.2) 7deg,
      transparent 12deg),
    conic-gradient(
      from 156deg at 85% 0%,
      transparent 0 4deg,
      rgba(255, 192, 64, 0.18) 7deg,
      transparent 12deg);
  opacity: 0.75;
}
.glass-panel {
  background:
    linear-gradient(
      180deg,
      rgba(13, 34, 88, 0.88),
      rgba(4, 10, 32, 0.9));
  border: 1px solid var(--border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 60px rgba(0, 0, 0, 0.35),
    var(--shadow-blue);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.eyebrow {
  margin: 28px 0 6px;
  font-size: 12px;
  letter-spacing: 0.22em;
  font-weight: 800;
  color: var(--gold-400);
  text-transform: uppercase;
}
.muted {
  color: var(--muted);
}
.error {
  color: var(--bad);
}
.btn,
button,
.button {
  border: 0;
  border-radius: 14px;
  min-block-size: 48px;
  padding: 0 20px;
  font-weight: 800;
  cursor: pointer;
  background: rgba(13, 34, 88, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}
.btn:hover:not(:disabled),
button:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.07);
}
.btn:active:not(:disabled),
button:active:not(:disabled) {
  transform: translateY(0) scale(0.99);
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-lg {
  min-block-size: 58px;
  font-size: 17px;
}
.btn-gold {
  color: #201300;
  background:
    linear-gradient(
      180deg,
      #f0dc64 0%,
      #f0c850 48%,
      #dca028 74%,
      #b87d14 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 8px 26px rgba(220, 160, 40, 0.32),
    0 0 0 1px rgba(240, 220, 100, 0.5);
}
.btn-blue {
  background:
    linear-gradient(
      180deg,
      #1450c8,
      #0a2e86);
  border: 1px solid #5aa8ff;
  box-shadow: 0 0 20px rgba(47, 111, 224, 0.28);
}
.btn-ghost {
  background: rgba(13, 34, 88, 0.7);
  border: 1px solid rgba(90, 168, 255, 0.35);
}
.btn-danger {
  background:
    linear-gradient(
      180deg,
      #b0221b,
      #6d0a0b);
  border: 1px solid #ff754f;
}
.btn-icon {
  margin-inline-end: 10px;
}
.split-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
:focus-visible {
  outline: 3px solid var(--gold-400);
  outline-offset: 3px;
}
label {
  font-size: 13px;
  color: #d7e5ff;
  font-weight: 800;
}
input,
select,
textarea {
  inline-size: 100%;
  max-inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 50px;
  padding: 0 15px;
  color: white;
  background: rgba(6, 15, 44, 0.82);
  border: 1px solid rgba(90, 168, 255, 0.35);
  border-radius: 12px;
  outline: none;
}
input::placeholder {
  color: rgba(159, 181, 214, 0.7);
}
input:focus,
select:focus {
  border-color: #5aa8ff;
  box-shadow: 0 0 0 3px rgba(90, 168, 255, 0.12);
}
input[type=checkbox] {
  inline-size: auto;
  min-block-size: 0;
}
.segmented {
  display: flex;
  min-inline-size: 0;
  gap: 10px;
  padding: 5px;
  background: rgba(6, 15, 44, 0.55);
  border: 1px solid rgba(90, 168, 255, 0.2);
  border-radius: 14px;
  flex-wrap: wrap;
}
.segment {
  flex: 1 1 5rem;
  min-inline-size: 0;
  min-block-size: 44px;
  border: 1px solid transparent;
  background: rgba(16, 54, 143, 0.62);
  border-radius: 10px;
  cursor: pointer;
  padding-inline: 12px;
}
.segment.active {
  color: #0a2e86;
  background:
    linear-gradient(
      180deg,
      #f2f9ff,
      #8fc8ff);
  border-color: #8fc8ff;
  font-weight: 900;
}
.tabular {
  font-variant-numeric: tabular-nums;
}
.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(
      circle,
      #f0c850 0 3px,
      transparent 3px),
    radial-gradient(
      circle,
      #1450c8 0 3px,
      transparent 3px),
    radial-gradient(
      circle,
      #ff4a61 0 3px,
      transparent 3px);
  background-size:
    90px 90px,
    110px 110px,
    130px 130px;
  background-position:
    0 0,
    20px 30px,
    70px 10px;
  opacity: 0.52;
}
.marquee {
  position: relative;
}
.marquee::before {
  --bulb:
    radial-gradient(
      
      circle at center,
      #fff4cc 0 1.5px,
      #f0c850 1.5px 2.9px,
      rgb(184 125 20 / 55%) 2.9px 3.4px,
      transparent 3.6px );
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    var(--bulb),
    var(--bulb),
    var(--bulb),
    var(--bulb);
  background-position:
    top left,
    bottom left,
    left top,
    right top;
  background-repeat:
    repeat-x,
    repeat-x,
    repeat-y,
    repeat-y;
  background-size:
    26px 8px,
    26px 8px,
    8px 26px,
    8px 26px;
  filter: drop-shadow(0 0 5px rgba(255, 205, 90, 0.65));
  animation: marquee-glow 2.6s ease-in-out infinite;
}
@keyframes marquee-glow {
  50% {
    opacity: 0.6;
  }
}
.auth-page {
  min-block-size: calc(100dvh - 8rem);
  display: grid;
  place-items: center;
  padding-block: clamp(16px, 4vh, 48px);
}
.auth-card {
  inline-size: 100%;
  max-inline-size: 26rem;
  padding: clamp(22px, 4vw, 34px);
  border-radius: 22px;
  display: grid;
  gap: 22px;
}
.auth-head {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}
.auth-logo {
  inline-size: min(190px, 60%);
  block-size: auto;
  margin-block-end: 4px;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.4));
}
.auth-head h1 {
  font-size: clamp(24px, 3.4vw, 30px);
  letter-spacing: -0.01em;
}
.auth-sub {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  text-wrap: balance;
}
.auth-form {
  display: grid;
  gap: 18px;
}
.field {
  display: grid;
  gap: 7px;
}
.field > label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.field-hint,
.field-error {
  font-size: 12.5px;
  line-height: 1.4;
  margin: 0;
}
.field-hint {
  color: var(--muted);
}
.field-error {
  color: var(--bad);
  font-weight: 700;
}
input[aria-invalid=true] {
  border-color: var(--bad);
}
input[aria-invalid=true]:focus {
  box-shadow: 0 0 0 3px rgba(255, 111, 102, 0.18);
}
.password-wrap {
  position: relative;
  display: grid;
}
.password-wrap input {
  padding-inline-end: 4.25rem;
}
.password-toggle {
  position: absolute;
  inset-block: 5px;
  inset-inline-end: 5px;
  min-block-size: 0;
  padding-inline: 13px;
  font-size: 12.5px;
  font-weight: 800;
  border-radius: 9px;
  background: rgba(16, 54, 143, 0.7);
  border: 1px solid var(--line);
  color: var(--blue-ice);
}
.auth-alert {
  margin: 0;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
  color: #ffd9d5;
  background: rgba(169, 33, 24, 0.26);
  border: 1px solid rgba(255, 117, 79, 0.45);
}
.auth-alt {
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.auth-alt a {
  font-weight: 800;
}
.auth-back {
  margin: 0;
  text-align: center;
  font-size: 13px;
}
.auth-back a {
  color: var(--muted);
  text-decoration: none;
}
.auth-back a::before {
  content: "\2190";
  margin-inline-end: 6px;
}
[dir=rtl] .auth-back a::before {
  content: "\2192";
}
.auth-back a:hover {
  color: var(--gold-400);
  text-decoration: underline;
}
@media (max-width: 480px) {
  .auth-page {
    min-block-size: 0;
    place-items: start stretch;
    padding-block: 8px;
  }
}
.card,
.panel {
  background:
    linear-gradient(
      180deg,
      rgba(13, 34, 88, 0.88),
      rgba(4, 10, 32, 0.9));
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 60px rgba(0, 0, 0, 0.35),
    var(--shadow-blue);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.primary {
  color: #201300;
  background:
    linear-gradient(
      180deg,
      #f0dc64 0%,
      #f0c850 48%,
      #dca028 74%,
      #b87d14 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 8px 26px rgba(220, 160, 40, 0.32),
    0 0 0 1px rgba(240, 220, 100, 0.5);
}
.ghost {
  background: rgba(13, 34, 88, 0.7);
  border: 1px solid rgba(90, 168, 255, 0.35);
}
.page {
  max-inline-size: 72rem;
  margin-inline: auto;
  padding: clamp(14px, 2.5vw, 28px);
}
.stack {
  display: grid;
  gap: 14px;
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* angular:styles/global:styles */
/*# sourceMappingURL=styles.css.map */