/* Shared look: CI blue, soft paper cards and open space. Dashboards keep a plain header so the numbers come first.
   Only screen UI is styled here; printable tickets and certificates retain their layout. */
@media screen {
  .auth { position: relative; isolation: isolate; padding-top: 64px; padding-bottom: 48px; background: radial-gradient(ellipse at 12% 12%, #dff1fc, transparent 48%), linear-gradient(135deg, #f5fafc, #eef6fb); }
  .auth__card { border-color: #d6e6ef; border-radius: 26px; box-shadow: 0 24px 65px rgba(1,79,119,.08); }
  .auth__mark { padding: 10px; width: 70px; border-radius: 18px; background: #e8f5fc; }
  .auth__card > .eyebrow { margin-top: 6px; font-size: 12.5px; letter-spacing: .04em; }
  .auth__card h1 { font-size: 30px; line-height: 1.35; }
  .auth__card > .muted { line-height: 1.8; }
  .auth__pitch { position: relative; overflow: hidden; padding: 40px 34px; border-radius: 26px; background: linear-gradient(145deg, #0b719e, #014f77 65%); color: #fff; box-shadow: 0 24px 60px rgba(1,79,119,.1); }
  .auth__pitch h1 { position: relative; color: #fff; }
  .auth__pitch .eyebrow { color: #a9e4ff; font-size: 12.5px; }
  .auth__pitch .eyebrow::before { background: #a9e4ff; }
  .auth__pitch .bullets { position: relative; z-index: 1; color: #e4f6ff; }
  .auth__pitch .bullets li::before { background: #99ddff; }
  .auth__pitch .muted { color: #c4e7fa; }
  .auth__pitch a { color: #fff; }
  .dash { padding-top: 36px; }
  .dash-head > div { min-width: 0; }
  .dpanel, .panel:not(.facts), .table-wrap, .member-item, .success__card { border-color: #dce8ee; border-radius: 22px; box-shadow: 0 4px 18px rgba(1,79,119,.035); }
  .stat { border-radius: 20px; box-shadow: 0 4px 18px rgba(1,79,119,.035); }
  .stat:not(.stat--alert) { border-color: #dce8ee; background: linear-gradient(140deg, #fff 60%, #edf7fc); }
  .stat b { color: var(--blue); }
  .stat--alert b { color: #b54708; }
  .table thead th { background: #eaf4fa; color: var(--blue); }
  .table tbody tr:hover { background: #f5fafc; }
  .dash-nav { background: #f8fcfe; }
  .field input:not([type=checkbox]):not([type=radio]):not([aria-invalid=true]), .field textarea, .field select { border-color: #d6e4ec; background: #fcfeff; }
  .field input:focus, .field textarea:focus, .field select:focus { background: #fff; border-color: var(--sky); }
  .member-item__ticket { padding-left: 24px; border-left: 1px dashed #c8dfea; }
  .member-item { padding: 28px; }
  .member-item h2 { line-height: 1.45; }
  .member-claim { background: #edf7fc; }
  .profile__card { background: linear-gradient(160deg, #e7f4fc, #fff 65%); }
  .community-spark { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 18px; background: #e5f3fb; color: var(--blue); font: 400 38px var(--en); }
  .community-note { display: flex; align-items: center; gap: 22px; padding: 26px 30px; margin-bottom: 48px; border: 1px solid #d1e7f3; border-radius: 22px; background: #e5f3fb; }
  .community-note__icon { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px 18px 18px 4px; background: #fff; color: var(--blue); font: 400 34px var(--en); }
  .community-note h2 { color: var(--blue); font-size: 22px; line-height: 1.4; }
  .community-note p { margin-top: 6px; color: #496574; font-size: 15px; line-height: 1.8; }
  .community-note__sign { flex: none; margin-left: auto; font: 600 12px var(--en); letter-spacing: 1px; color: var(--blue); }
  .legal-hero { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(125deg, #014f77, #0d6b99); }
  .legal-card { border-color: #dce8ee; border-radius: 22px; box-shadow: 0 4px 18px rgba(1,79,119,.035); }
  .legal-jump a:hover { background: #e5f3fb; }
  .success { padding: 36px 0 0; }
  .success__card { box-shadow: 0 14px 40px rgba(1,79,119,.06); }
  .ticket { border-radius: 26px; box-shadow: 0 20px 55px rgba(1,79,119,.1); }
  .ticket__head { background: linear-gradient(125deg, #014f77, #0d6b99); }
  .ticket__stub { background: #f0f8fc; }
  .d-hero .by { width: fit-content; max-width: 100%; gap: 12px; padding: 0; margin-top: 24px; border: 0; border-radius: 0; background: transparent; text-align: left; }
  .d-hero .by .avatar { width: 44px; height: 44px; border: 2px solid rgba(255,255,255,.7); }
  .by__info { display: flex; flex-direction: column; min-width: 0; gap: 2px; line-height: 1.45; overflow-wrap: anywhere; }
  .by__label { font-size: 12px; color: rgba(255,255,255,.72); }
  .by__name { font-size: 16px; font-weight: 600; color: #fff; }
  .by__detail { margin-top: 3px; font-size: 13px; color: rgba(255,255,255,.85); }
  .d-main .teacher { padding: 18px; border-radius: 18px; background: #edf7fc; }
  .book { border-color: #d4e6f0; border-radius: 24px; }
  .book__share .btn { border-radius: 999px; }
  .org-perk { transition: transform .2s, box-shadow .2s; }
  .org-perk:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(1,79,119,.07); }
  .contact-line { transition: transform .2s; }
  .contact-line:hover { transform: translateY(-3px); }
  .cert-page { background: #edf6fb; }
  .cert-toolbar { background: linear-gradient(125deg, #014f77, #0d6b99); }
}
@media screen and (max-width: 720px) {
  .auth { padding-top: 32px; padding-bottom: 32px; }
  .auth__card { padding: 28px 22px; }
  .auth__card h1 { font-size: 26px; }
  .auth__pitch { padding: 30px 24px; }
  .dash-head .btn { max-width: 100%; }
  .community-note { align-items: flex-start; padding: 22px; gap: 16px; margin-bottom: 32px; }
  .community-note__icon { width: 46px; height: 50px; font-size: 28px; }
  .community-note h2 { font-size: 19px; }
  .community-note p { font-size: 14px; }
  .community-note__sign { display: none; }
  .d-main .teacher { padding: 14px; }
  .d-hero .by { font-size: 14px; line-height: 1.7; }
}
@media screen and (max-width: 640px) {
  .member-item__ticket { padding-left: 0; padding-top: 18px; border-left: 0; border-top: 1px dashed #c8dfea; }
  .member-item { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .org-perk, .contact-line { transition: none; }
  .org-perk:hover, .contact-line:hover { transform: none; }
}

/* Login: a centered welcome block above clearly aligned form fields. */
.auth--login .auth__intro{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;margin-bottom:8px}
.auth--login .auth__mark{display:block;flex:none;margin:0 auto 4px}
.auth--login .auth__intro .eyebrow{display:flex;justify-content:center;margin:0;font-size:12.5px;letter-spacing:.04em}
.auth--login .auth__intro h1{margin:0;font-size:clamp(26px,4vw,30px);line-height:1.4;text-wrap:balance}
.auth--login .auth__intro .muted{margin:0;max-width:34ch;font-size:15px;line-height:1.8;text-wrap:pretty}
.auth--login .field{text-align:left;width:100%}