@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@500;700&family=Plus+Jakarta+Sans:wght@500;700;800&family=Space+Grotesk:wght@500;700&display=swap");

@layer reset, tokens, base, components, pages;

@layer tokens {
  :root {
    color-scheme: dark;
    --bg: #000e25;
    --bg-deep: #001533;
    --bg-bright: #012550;
    --surface: rgba(1, 31, 69, 0.86);
    --surface-strong: rgba(4, 43, 90, 0.92);
    --ink: #dbe5ff;
    --muted: #99abd1;
    --line: rgba(54, 72, 104, 0.42);
    --red: #ff8d8f;
    --red-deep: #be0930;
    --gold: #ffd709;
    --danger: #ff716c;
    --success: #7bfeb8;
  }
}

@layer reset {
  * {
    box-sizing: border-box;
  }

  html,
  body {
    width: 100%;
    min-width: 100%;
    min-height: 100%;
  }

  html {
    text-size-adjust: 100%;
  }

  body {
    margin: 0;
  }
}

@layer base {
  body {
    min-width: 100vw;
    min-height: 100vh;
    overflow-x: hidden;
    font-family: "Plus Jakarta Sans", sans-serif;
    color: var(--ink);
    background:
      radial-gradient(circle at 15% 15%, rgba(255, 141, 143, 0.14), transparent 24%),
      radial-gradient(circle at 85% 18%, rgba(255, 215, 9, 0.14), transparent 18%),
      radial-gradient(circle at 72% 78%, rgba(123, 254, 184, 0.1), transparent 16%),
      linear-gradient(145deg, var(--bg), var(--bg-deep) 52%, var(--bg-bright));
  }

  h1 {
    margin: 0 0 18px;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(2.6rem, 6vw, 4.8rem);
    line-height: 0.95;
    text-shadow: 0 2px 12px rgba(0, 14, 37, 0.4);
  }
}

@layer components {
  .page-shell {
    width: 100vw;
    min-height: 100vh;
    position: relative;
    z-index: 1;
  }

  .content-panel {
    display: grid;
    gap: 20px;
  }

  .hero-panel {
    padding: 12px 8px;
  }

  .hero-panel-wide {
    width: min(760px, 100%);
  }

  .form-panel,
  .session-panel {
    width: min(520px, 100%);
    padding: clamp(20px, 4vw, 32px);
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 18%),
      var(--surface);
    box-shadow:
      0 26px 80px rgba(0, 0, 0, 0.36),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
  }

  .accent-panel {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 20%),
      var(--surface-strong);
  }

  .panel-head {
    margin-bottom: 18px;
  }

  .panel-head h2,
  .session-panel h2 {
    margin: 0 0 8px;
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(1.35rem, 3vw, 1.7rem);
  }

  .panel-head p,
  .session-text,
  .switch-text {
    color: var(--muted);
  }

  .eyebrow {
    margin: 0 0 14px;
    color: var(--gold);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .lead,
  .panel-head p,
  .session-text,
  .switch-text,
  .feedback {
    margin: 0;
    font-size: clamp(0.98rem, 2vw, 1.1rem);
    line-height: 1.6;
  }

  .actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 24px;
  }

  .auth-form {
    display: grid;
    gap: 12px;
  }

  .auth-form label,
  .session-details dt {
    color: var(--muted);
    font-family: "Be Vietnam Pro", sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
  }

  .auth-form input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(100, 118, 153, 0.28);
    border-radius: 8px;
    background: rgba(1, 37, 80, 0.7);
    color: var(--ink);
    font: inherit;
  }

  .auth-form input:focus {
    outline: 2px solid rgba(255, 141, 143, 0.2);
    border-color: rgba(255, 141, 143, 0.6);
  }

  .password-field {
    position: relative;
  }

  .password-field input {
    padding-right: 56px;
  }

  .password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 40px;
    height: 40px;
    padding: 0;
    transform: translateY(-50%);
    border: 1px solid rgba(100, 118, 153, 0.22);
    border-radius: 8px;
    background: rgba(1, 37, 80, 0.86);
    color: var(--muted);
    font-size: 1rem;
    cursor: pointer;
  }

  .password-toggle .ph {
    font-size: 1.1rem;
  }

  .password-toggle.is-visible {
    color: var(--gold);
  }

  button {
    min-height: 44px;
    padding: 13px 16px;
    border: 0;
    border-radius: 8px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
  }

  .primary-action,
  .primary-link {
    color: #fff9f0;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 36%),
      linear-gradient(180deg, var(--red), var(--red-deep));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.24),
      0 14px 28px rgba(190, 9, 48, 0.25);
  }

  .secondary-action,
  .secondary-link {
    color: var(--gold);
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 40%),
      rgba(1, 37, 80, 0.92);
  }

  .primary-link,
  .secondary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
  }

  .danger-action {
    width: 100%;
    color: var(--danger);
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 34%),
      rgba(159, 5, 25, 0.2);
  }

  .status-badge {
    display: inline-block;
    margin: 0 0 12px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(123, 254, 184, 0.12);
    color: var(--success);
    font-size: 0.84rem;
    font-weight: 700;
  }

  .session-details {
    display: grid;
    gap: 14px;
    margin: 24px 0;
  }

  .session-details div {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(54, 72, 104, 0.24);
  }

  .session-details dd {
    margin: 6px 0 0;
    font-size: 1rem;
    font-weight: 700;
  }

  .feedback {
    min-height: 28px;
    padding: 8px 2px 0;
  }

  .feedback[data-kind="error"] {
    color: var(--danger);
  }

  .feedback[data-kind="success"] {
    color: var(--success);
  }

  .switch-text a {
    color: var(--gold);
  }

  @media (max-width: 560px) {
    body {
      min-width: 0;
    }

    .page-shell {
      width: 100%;
    }

    .actions-row,
    .primary-link,
    .secondary-link,
    .auth-form button {
      width: 100%;
    }

    .auth-form input {
      min-height: 48px;
      font-size: 1rem;
    }
  }
}