.beta-portal {
  min-height: 100vh;
  color: #17243a;
  background:
    radial-gradient(circle at 12% 4%, rgba(37, 99, 235, .16), transparent 32rem),
    radial-gradient(circle at 90% 12%, rgba(255, 105, 43, .13), transparent 28rem),
    #f4f7fb;
}

.portal-header {
  width: min(1120px, calc(100% - 40px));
  min-height: 84px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.portal-brand img { width: 154px; }
.portal-header > span {
  padding: 7px 13px;
  color: #9a3412;
  background: #fff0e8;
  border: 1px solid #fdba96;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .04em;
}

.portal-main { width: min(960px, calc(100% - 40px)); margin: 24px auto 72px; }
.portal-hero { max-width: 760px; margin: 0 auto 42px; text-align: center; }
.portal-kicker { margin: 0 0 12px; color: #1756cf; font-size: .78rem; font-weight: 950; letter-spacing: .18em; }
.portal-kicker i { width: 8px; height: 8px; margin-right: 8px; display: inline-block; background: #ff692b; border-radius: 50%; }
.portal-hero h1 { margin: 0; color: #08172d; font-size: clamp(2rem, 6vw, 3.8rem); letter-spacing: -.04em; }
.portal-hero > p:not(.portal-kicker) { max-width: 640px; margin: 18px auto 0; color: #52627a; line-height: 1.9; }
.account-note {
  margin: 24px auto 0;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #19335d;
  background: #edf4ff;
  border: 1px solid #bdd3ff;
  border-radius: 14px;
  font-size: .86rem;
  line-height: 1.6;
}
.account-note strong { white-space: nowrap; }
.account-note span { text-align: left; }

.portal-section { margin-top: 26px; }
.portal-section__heading { margin: 0 0 12px; display: flex; align-items: baseline; gap: 14px; }
.portal-section__heading p, .support-panel__label { margin: 0; color: #2563eb; font-size: .7rem; font-weight: 950; letter-spacing: .16em; }
.portal-section__heading h2 { margin: 0; color: #17243a; font-size: 1.15rem; }

.entry-card, .login-card, .support-panel {
  background: rgba(255, 255, 255, .96);
  border: 1px solid #dbe4f0;
  border-radius: 22px;
  box-shadow: 0 18px 55px rgba(17, 39, 75, .08);
}
.entry-card {
  padding: 26px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  border-color: #f7c8af;
}
.entry-card__number {
  width: 50px; height: 50px;
  display: grid; place-items: center;
  color: #fff; background: linear-gradient(135deg, #f4511e, #ff8a38);
  border-radius: 16px;
  font-weight: 950;
}
.entry-card__label, .login-card__module { color: #d94816; font-size: .72rem; font-weight: 950; letter-spacing: .08em; }
.entry-card h3, .login-card h3 { margin: 5px 0 8px; color: #08172d; font-size: 1.3rem; }
.entry-card p, .login-card p, .support-panel p { margin: 0; color: #5d6d82; font-size: .87rem; line-height: 1.75; }
.entry-card__caution { margin-top: 8px !important; color: #7c4a35 !important; font-size: .76rem !important; }
.entry-card__button { white-space: nowrap; }

.login-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.login-card { padding: 26px; display: flex; flex-direction: column; min-height: 270px; }
.login-card--editor { border-top: 5px solid #2563eb; }
.login-card--manager { border-top: 5px solid #7c3aed; }
.login-card--manager .login-card__module { color: #6d28d9; }
.login-card p { flex: 1; }
.login-card__button { margin-top: 22px; color: #fff; background: #2563eb; }
.login-card--manager .login-card__button { background: #6d28d9; }
.password-help { margin: 14px 0 0; color: #65758a; text-align: center; font-size: .84rem; }
.password-help a { color: #1756cf; font-weight: 900; }

.support-panel { padding: 24px 26px; display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.support-panel h2 { margin: 5px 0 8px; color: #08172d; font-size: 1.15rem; }
.support-panel .button { flex: 0 0 auto; }
.portal-links { margin-top: 24px; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; }
.portal-links a { color: #40516a; font-size: .8rem; font-weight: 800; }

.portal-footer {
  padding: 28px 20px;
  color: #aebbd0;
  background: #050d1a;
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: .75rem;
}
.portal-footer p, .portal-footer small { margin: 0; }

@media (max-width: 760px) {
  .portal-header, .portal-main { width: calc(100% - 28px); }
  .portal-header { min-height: 70px; }
  .portal-brand img { width: 128px; }
  .portal-main { margin-top: 12px; }
  .portal-hero { margin-bottom: 34px; }
  .account-note { align-items: flex-start; flex-direction: column; gap: 3px; text-align: left; }
  .entry-card { grid-template-columns: auto 1fr; padding: 20px; gap: 14px; }
  .entry-card__button { grid-column: 1 / -1; width: 100%; }
  .login-grid { grid-template-columns: 1fr; }
  .login-card { min-height: 0; padding: 22px; }
  .login-card p { min-height: auto; }
  .support-panel { align-items: stretch; flex-direction: column; padding: 22px; }
  .support-panel .button { width: 100%; }
  .portal-footer { align-items: center; flex-direction: column; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}