:root {
      color-scheme: light;
      --aup-navy: #072b4c;
      --aup-navy-deep: #041c32;
      --aup-blue: #0b5f9e;
      --aup-gold: #f0b323;
      --ink: #173047;
      --muted: #627386;
      --surface: #ffffff;
      --line: #dfe7ee;
      --success: #157347;
      --danger: #b42318;
      --shadow: 0 24px 70px rgba(2, 24, 43, .25), 0 8px 20px rgba(2, 24, 43, .12);
    }

    * { box-sizing: border-box; }

    html { min-width: 320px; }

    body {
      margin: 0;
      min-height: 100vh;
      overflow-x: hidden;
      color: #fff;
      font-family: Arial, sans-serif;
      background:
        radial-gradient(circle at 12% 18%, rgba(240, 179, 35, .20), transparent 24rem),
        radial-gradient(circle at 80% 0%, rgba(38, 139, 205, .28), transparent 35rem),
        linear-gradient(135deg, #04192c 0%, #07375e 52%, #0a5488 100%);
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .22;
      background-image:
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: linear-gradient(to bottom right, #000, transparent 72%);
    }

    button, input { font: inherit; }

    button, a { -webkit-tap-highlight-color: transparent; }

    .page-shell {
      position: relative;
      z-index: 1;
      min-height: 100vh;
      display: grid;
      grid-template-rows: auto 1fr auto;
      padding: clamp(.45rem, 1vw, .85rem) clamp(1.25rem, 3vw, 3rem) clamp(.8rem, 1.5vw, 1.35rem);
      overflow-x: hidden;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: .85rem;
      width: fit-content;
      color: inherit;
      text-decoration: none;
    }

    .footer-brand-link {
      position: relative;
      color: inherit;
      font-weight: 700;
      text-decoration: none;
    }

    .footer-tooltip {
      position: absolute;
      bottom: calc(100% + .65rem);
      left: 0;
      z-index: 4;
      width: max-content;
      max-width: min(330px, calc(100vw - 2.5rem));
      padding: .62rem .78rem;
      border: 1px solid rgba(255,216,113,.4);
      border-radius: 10px;
      color: #fff;
      background: rgba(4,28,50,.94);
      box-shadow: 0 12px 28px rgba(0,12,28,.26);
      font-size: .78rem;
      font-weight: 650;
      line-height: 1.4;
      opacity: 0;
      pointer-events: none;
      transform: translateY(5px);
      transition: opacity .2s ease, transform .2s ease;
    }

    .footer-brand-link:hover .footer-tooltip,
    .footer-brand-link:focus-visible .footer-tooltip { opacity: 1; transform: translateY(0); }

    .brand-mark {
      position: relative;
      display: block;
      flex: 0 0 auto;
      width: 46px;
      height: 46px;
      min-width: 46px;
      min-height: 46px;
      max-width: 46px;
      max-height: 46px;
      aspect-ratio: 1 / 1;
      box-sizing: border-box;
      padding: 2px;
      border: 2px solid rgba(255,216,113,.96);
      border-radius: 50%;
      background: rgba(255,255,255,.94);
      box-shadow: 0 0 0 3px rgba(255,255,255,.15), 0 0 14px rgba(240,179,35,.58), 0 7px 20px rgba(0,12,28,.24);
    }

    .brand-seal { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: contain; }

    .brand-name {
      display: block;
      font-family: Arial, sans-serif;
      font-size: clamp(1.15rem, 2vw, 1.45rem);
      font-weight: 700;
      line-height: 1.05;
    }

    .brand-name span { color: var(--aup-gold); }

    .brand-copy {
      display: grid;
      align-content: center;
      min-height: 46px;
    }

    .brand-subtitle {
      display: block;
      margin-top: .08rem;
      color: rgba(255,255,255,.68);
      font-size: .72rem;
      line-height: 1.15;
      letter-spacing: .04em;
      text-transform: none;
    }

    .announcements-list { display: grid; gap: .85rem; }

    .announcement-card {
      padding: 1rem;
      border: 1px solid #dce7ee;
      border-left: 4px solid var(--aup-gold);
      border-radius: 14px;
      color: #42576a;
      background: #f8fafc;
    }

    .announcement-card-heading {
      display: flex;
      align-items: center;
      gap: .7rem;
      margin-bottom: .75rem;
    }

    .announcement-card-icon {
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      width: 36px;
      height: 36px;
      border-radius: 11px;
      color: var(--aup-navy);
      background: var(--aup-gold);
    }

    .announcement-card-icon svg { width: 18px; height: 18px; }
    .announcement-card h3 {
      margin: 0;
      color: var(--aup-navy);
      font-family: Arial, sans-serif;
      font-size: 1.04rem;
      line-height: 1.3;
    }
    .announcement-card p { margin: 0; font-size: .9rem; line-height: 1.55; }
    .announcement-card p + p { margin-top: .68rem; }
    .announcement-date { font-weight: 700; text-decoration: underline; text-decoration-color: var(--aup-gold); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }

    .announcement-card-highlight {
      border-color: rgba(240,179,35,.7);
      color: rgba(255,255,255,.9);
      background: linear-gradient(145deg, #082f4d, #0d4f76);
      box-shadow: 0 12px 28px rgba(7,42,70,.16);
    }

    .announcement-card-highlight h3 { margin-bottom: .45rem; color: var(--aup-gold); font-weight: 400; }

    .tutorial-list { display: grid; gap: .7rem; }

    .tutorial-item {
      overflow: hidden;
      border: 1px solid #d8e4ec;
      border-radius: 13px;
      color: #42576a;
      background: #f8fafc;
    }

    .tutorial-item[open] { border-color: #c8dce8; background: #fff; box-shadow: 0 7px 18px rgba(7,43,76,.07); }

    .tutorial-item summary {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: .72rem;
      align-items: center;
      padding: .82rem .9rem;
      color: var(--aup-navy);
      cursor: pointer;
      list-style: none;
    }

    .tutorial-item summary::-webkit-details-marker { display: none; }
    .tutorial-item summary::after { content: "+"; color: var(--aup-blue); font-size: 1.15rem; font-weight: 800; }
    .tutorial-item[open] summary::after { content: "−"; }
    .tutorial-item summary strong { display: block; font-size: .9rem; line-height: 1.3; }
    .tutorial-item summary small { display: block; margin-top: .12rem; color: #708091; font-size: .74rem; line-height: 1.35; }

    .tutorial-number {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      color: var(--aup-navy);
      background: var(--aup-gold);
      font-size: .78rem;
      font-weight: 850;
    }

    .tutorial-item ol { margin: 0; padding: .1rem 1.15rem 1rem 2.55rem; color: #4e6274; font-size: .86rem; line-height: 1.55; }
    .tutorial-item li + li { margin-top: .48rem; }

    .tutorial-tip {
      margin: -.2rem .9rem .95rem;
      padding: .7rem .78rem;
      border-left: 3px solid var(--aup-gold);
      border-radius: 8px;
      color: #526779;
      background: #fff8dc;
      font-size: .8rem;
      line-height: 1.5;
    }

    .welcome {
      align-self: start;
      width: min(700px, 80vw);
      padding: clamp(1.25rem, 2.6vw, 2.4rem) 0 clamp(2rem, 4vw, 3.5rem);
    }

    .eyebrow {
      display: flex;
      align-items: center;
      gap: .65rem;
      margin: 0 0 1.15rem;
      color: var(--aup-gold);
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .15em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      content: "";
      width: 2.4rem;
      height: 2px;
      background: currentColor;
    }

    h1 {
      max-width: 650px;
      margin: 0;
      font-family: Arial, sans-serif;
      font-size: clamp(2.65rem, 6vw, 5.4rem);
      font-weight: 500;
      letter-spacing: -.055em;
      line-height: .95;
      text-wrap: balance;
    }

    h1 em {
      color: var(--aup-gold);
      font-style: normal;
    }

    .verse-rotator {
      position: relative;
      max-width: 610px;
      min-height: 8.5rem;
      margin-top: 1.6rem;
      overflow: hidden;
    }

    .welcome-copy {
      position: absolute;
      inset: 0 auto auto 0;
      width: 100%;
      max-width: 590px;
      margin: 0;
      color: rgba(255,255,255,.78);
      font-family: Arial, sans-serif;
      font-size: clamp(1.05rem, 2.1vw, 1.35rem);
      line-height: 1.7;
      opacity: 0;
      transform: translateY(18px);
      animation: verse-cycle 18s ease-in-out infinite;
    }

    .welcome-copy:nth-child(2) { animation-delay: 9s; }

    @keyframes verse-cycle {
      0% { opacity: 0; transform: translateY(18px); }
      7%, 42% { opacity: 1; transform: translateY(0); }
      49%, 100% { opacity: 0; transform: translateY(-18px); }
    }

    .welcome-copy cite {
      display: block;
      margin-top: .75rem;
      color: rgba(255,255,255,.58);
      font-family: Arial, sans-serif;
      font-size: .78rem;
      font-style: normal;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .page-footer {
      position: fixed;
      left: clamp(1.25rem, 3vw, 3rem);
      bottom: clamp(.8rem, 1.5vw, 1.35rem);
      z-index: 2;
      max-width: calc(100vw - 2rem);
      color: rgba(255,255,255,.55);
      font-size: clamp(.58rem, 1.5vw, .78rem);
      line-height: 1.35;
      text-align: left;
      white-space: nowrap;
    }

    .login-dock {
      position: fixed;
      right: clamp(1rem, 3vw, 2.5rem);
      bottom: clamp(1rem, 3vw, 2.5rem);
      z-index: 20;
      width: min(390px, calc(100vw - 2rem));
      color: var(--ink);
      filter: drop-shadow(0 18px 42px rgba(0, 10, 25, .26));
    }

    .login-panel {
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      transform: translateY(18px) scale(.985);
      transform-origin: bottom right;
      pointer-events: none;
      border: 1px solid rgba(255,255,255,.75);
      border-bottom: 0;
      border-radius: 22px 22px 0 0;
      background: rgba(255,255,255,.98);
      box-shadow: var(--shadow);
      transition: max-height .46s cubic-bezier(.2,.78,.22,1), opacity .25s ease, transform .42s cubic-bezier(.2,.78,.22,1);
    }

    .login-dock.is-open .login-panel {
      max-height: min(82vh, 760px);
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }

    .panel-accent { height: 5px; background: linear-gradient(90deg, var(--aup-gold), #ffd771); }

    .panel-inner {
      max-height: calc(min(82vh, 760px) - 5px);
      overflow-y: auto;
      padding: 1.55rem 1.55rem 1.35rem;
      scrollbar-width: thin;
      scrollbar-color: #b8c6d1 transparent;
    }

    .panel-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 1.35rem;
    }

    .panel-actions { display: flex; align-items: center; gap: .5rem; }

    .help-button {
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      width: 38px;
      height: 38px;
      padding: 0;
      border: 1px solid #ead18d;
      border-radius: 50%;
      color: var(--aup-navy);
      background: #fff3c4;
      font-family: Arial, sans-serif;
      font-size: 1.08rem;
      font-weight: 800;
      text-decoration: none;
      cursor: pointer;
      transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    }

    .help-button:hover { background: #ffe99a; transform: translateY(-1px); box-shadow: 0 5px 12px rgba(112,78,0,.14); }

    .panel-kicker {
      margin: 0 0 .28rem;
      color: var(--aup-blue);
      font-size: .75rem;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .panel-title {
      margin: 0;
      color: var(--aup-navy);
      font-family: Arial, sans-serif;
      font-size: 1.75rem;
      line-height: 1.1;
    }

    .panel-heading {
      display: flex;
      align-items: flex-start;
      gap: .7rem;
    }

    .back-button {
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      width: 36px;
      height: 36px;
      margin-top: .15rem;
      padding: 0;
      border: 1px solid #d8e2ea;
      border-radius: 50%;
      color: var(--aup-blue);
      background: #fff;
      cursor: pointer;
      transition: background .2s ease, border-color .2s ease, transform .2s ease;
    }

    .back-button:hover { border-color: #bed1df; background: #edf5fa; transform: translateX(-2px); }
    .back-button svg { width: 18px; height: 18px; }

    .account-view[hidden] { display: none; }

    .account-view.is-entering { animation: view-in .28s cubic-bezier(.2,.78,.22,1) both; }

    @keyframes view-in {
      from { opacity: 0; transform: translateX(14px); }
      to { opacity: 1; transform: translateX(0); }
    }

    .view-intro {
      margin: -.35rem 0 1.2rem;
      color: var(--muted);
      font-size: .88rem;
      line-height: 1.55;
    }

    .close-button {
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      width: 38px;
      height: 38px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      color: #43596c;
      background: #eef3f7;
      cursor: pointer;
      transition: background .2s ease, transform .2s ease;
    }

    .close-button:hover { background: #e2eaf0; transform: rotate(4deg); }
    .close-button svg { width: 18px; height: 18px; }

    .field { display: block; margin-bottom: 1rem; }

    .field-label {
      display: block;
      margin-bottom: .42rem;
      color: #34495d;
      font-size: .88rem;
      font-weight: 750;
    }

    .field-label small { color: #728293; font-size: .7rem; font-weight: 600; letter-spacing: 0; text-transform: none; }

    .field-format { display: block; margin-top: .35rem; color: #728293; font-size: .72rem; line-height: 1.35; }

    .input-wrap { position: relative; }

    .input-icon {
      position: absolute;
      top: 50%;
      left: .9rem;
      width: 18px;
      height: 18px;
      color: #7c8c9b;
      transform: translateY(-50%);
      pointer-events: none;
    }

    .field-input {
      width: 100%;
      min-height: 48px;
      padding: .8rem 2.9rem .8rem 2.75rem;
      border: 1px solid #cbd7e0;
      border-radius: 12px;
      outline: 0;
      color: var(--ink);
      font-size: 1rem;
      background: #f9fbfc;
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .field-input::placeholder { color: #92a0ad; }

    .field-input:focus {
      border-color: var(--aup-blue);
      background: #fff;
      box-shadow: 0 0 0 4px rgba(11, 95, 158, .12);
    }

    .password-toggle {
      position: absolute;
      top: 50%;
      right: .5rem;
      width: 38px;
      height: 38px;
      padding: 0;
      border: 0;
      border-radius: 9px;
      color: #637689;
      background: transparent;
      transform: translateY(-50%);
      cursor: pointer;
    }

    .password-toggle:hover { color: var(--aup-blue); background: #eaf2f8; }
    .password-toggle svg { width: 19px; height: 19px; }

    .form-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin: .15rem 0 1.2rem;
    }

    .remember {
      display: inline-flex;
      align-items: center;
      gap: .48rem;
      color: #54687a;
      font-size: .86rem;
      cursor: pointer;
    }

    .remember input { width: 17px; height: 17px; accent-color: var(--aup-blue); }

    .text-link {
      color: var(--aup-blue);
      font-size: .86rem;
      font-weight: 750;
      text-underline-offset: 3px;
    }

    .link-button {
      padding: 0;
      border: 0;
      color: var(--aup-blue);
      font: inherit;
      font-weight: 750;
      text-decoration: underline;
      text-underline-offset: 3px;
      background: transparent;
      cursor: pointer;
    }

    .link-button:hover { color: var(--aup-navy); }

    .login-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .65rem;
      width: 100%;
      min-height: 50px;
      padding: .8rem 1rem;
      border: 0;
      border-radius: 12px;
      color: #fff;
      font-weight: 800;
      background: linear-gradient(135deg, var(--aup-blue), var(--aup-navy));
      box-shadow: 0 9px 20px rgba(7, 43, 76, .22);
      cursor: pointer;
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .login-button:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(7, 43, 76, .28); }
    .login-button:active { transform: translateY(1px); }
    .login-button:disabled { opacity: .55; transform: none; box-shadow: none; cursor: not-allowed; }
    .login-button svg { width: 18px; height: 18px; }
    .login-button.is-loading { opacity: .82; cursor: wait; }
    .login-button.is-loading svg { display: none; }
    .login-button.is-loading::after {
      content: "";
      width: 18px;
      height: 18px;
      border: 2px solid rgba(255,255,255,.4);
      border-top-color: currentColor;
      border-radius: 50%;
      animation: button-spinner .7s linear infinite;
    }

    @keyframes button-spinner { to { transform: rotate(360deg); } }

    .consent {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: .55rem;
      align-items: flex-start;
      margin: .2rem 0 1rem;
      color: #54687a;
      font-size: .8rem;
      line-height: 1.45;
    }

    .consent input { width: 17px; height: 17px; margin-top: .1rem; accent-color: var(--aup-blue); }

    .password-rules {
      margin: -.2rem 0 1rem;
      padding: .75rem .85rem;
      border: 1px solid #dce7ee;
      border-radius: 11px;
      color: #5b6f80;
      font-size: .78rem;
      line-height: 1.5;
      background: #f6f9fb;
    }

    .password-rules strong { color: #31495d; }

    .password-strength {
      margin: -.35rem 0 1rem;
      padding: .8rem .85rem;
      border: 1px solid #dce6ed;
      border-radius: 12px;
      background: #f7fafc;
    }

    .password-strength-heading {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: .45rem;
      color: #536779;
      font-size: .76rem;
      font-weight: 700;
    }

    .password-strength-heading strong { color: var(--danger); }
    .password-strength[data-level="fair"] .password-strength-heading strong { color: #9a6700; }
    .password-strength[data-level="good"] .password-strength-heading strong { color: var(--aup-blue); }
    .password-strength[data-level="strong"] .password-strength-heading strong { color: var(--success); }

    .password-strength-track { height: 6px; overflow: hidden; border-radius: 999px; background: #dce5eb; }
    .password-strength-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--danger); transition: width .22s ease, background .22s ease; }
    .password-strength[data-level="weak"] .password-strength-track span { width: 20%; }
    .password-strength[data-level="fair"] .password-strength-track span { width: 45%; background: #d89400; }
    .password-strength[data-level="good"] .password-strength-track span { width: 72%; background: var(--aup-blue); }
    .password-strength[data-level="strong"] .password-strength-track span { width: 100%; background: var(--success); }

    .password-requirements {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .3rem .75rem;
      margin: .65rem 0 0;
      padding: 0;
      color: #657789;
      font-size: .7rem;
      line-height: 1.35;
      list-style: none;
    }

    .password-requirements li::before { content: "○"; margin-right: .32rem; font-weight: 900; }
    .password-requirements li.is-met { color: var(--success); }
    .password-requirements li.is-met::before { content: "✓"; }

    .password-match-status { min-height: 1.05rem; margin: -.45rem 0 .75rem; color: var(--danger); font-size: .76rem; font-weight: 700; }
    .password-match-status.is-match { color: var(--success); }

    #forgotView.is-complete > .view-intro,
    #forgotView.is-complete > .password-reset-steps,
    #forgotView.is-complete > .panel-footer,
    #forgotView.is-complete #prototypeForgot > :not(#forgotVerification) { display: none; }
    #forgotView.is-complete #forgotVerification { margin: 0; padding: 0; border: 0; }

    #signupView.is-complete > .view-intro,
    #signupView.is-complete > .panel-footer,
    #signupView.is-complete #prototypeSignup > :not(#signupConfirmation) { display: none; }

    .form-status {
      min-height: 1.25rem;
      margin: .65rem 0 0;
      color: var(--success);
      font-size: .82rem;
      font-weight: 650;
      text-align: center;
    }

    .panel-footer {
      padding-top: 1rem;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: .82rem;
      line-height: 1.45;
      text-align: center;
    }

    .panel-footer a { color: var(--aup-blue); font-weight: 750; }

    .announcement-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: .45rem 1rem;
    }

    .login-legal-link {
      display: block;
      margin-top: .45rem;
    }

    .announcement-new {
      display: inline-flex;
      align-items: center;
      gap: .28rem;
      margin-left: .34rem;
      padding: .08rem .38rem;
      border-radius: 999px;
      color: #613d00;
      background: #ffe39a;
      font-size: .64rem;
      font-weight: 850;
      letter-spacing: .06em;
      line-height: 1.45;
      vertical-align: .12rem;
    }

    .announcement-new::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #c4492d;
      box-shadow: 0 0 0 3px rgba(196,73,45,.15);
      animation: new-pulse 1.8s ease-in-out infinite;
    }

    @keyframes new-pulse { 50% { transform: scale(.75); opacity: .55; } }

    .terms-consent {
      display: grid;
      gap: .8rem;
      margin-top: 1rem;
      padding: 1rem;
      border: 1px solid #d6e3eb;
      border-radius: 13px;
      background: #f3f7fa;
    }

    .terms-consent .consent { margin: 0; }
    .terms-consent .login-button { margin-top: 0; }
    .terms-consent-status { min-height: 1.2rem; margin: -.25rem 0 0; color: var(--danger); font-size: .8rem; text-align: center; }

    .signup-notice-card {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: .8rem;
      padding: 1rem;
      border: 1px solid #dce7ee;
      border-left: 4px solid var(--aup-gold);
      border-radius: 14px;
      background: #f8fafc;
      color: #42576a;
    }

    .signup-notice-card p { margin: 0; font-size: .9rem; line-height: 1.62; }

    .signup-notice-icon {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      color: var(--aup-navy);
      background: #fff3c4;
      box-shadow: inset 0 0 0 1px rgba(220,170,18,.35);
    }

    .signup-notice-icon svg { width: 19px; height: 19px; }
    .signup-notice-consent { margin: 1rem 0 .75rem; }
    #signupNoticeStatus { color: var(--danger); }

    .verify-student-button {
      margin-top: .15rem;
      color: var(--aup-navy);
      border: 1px solid #cbdce7;
      background: #eef5f9;
      box-shadow: none;
    }

    .verify-student-button:hover { box-shadow: 0 8px 18px rgba(7,43,76,.12); }

    .signup-completion {
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px solid var(--line);
    }

    .signup-completion[hidden] { display: none; }

    .signup-step { display: grid; gap: .85rem; }
    .signup-step[hidden] { display: none; }

    .signup-step + .signup-step {
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px solid var(--line);
    }

    .verification-code-intro {
      margin: 0;
      color: #52697b;
      font-size: .86rem;
      line-height: 1.5;
    }

    .verification-code-input {
      font-variant-numeric: tabular-nums;
      letter-spacing: .18em;
      font-weight: 750;
    }

    .password-reset-steps {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: .45rem;
      margin: 0 0 1.15rem;
      padding: 0;
      list-style: none;
    }

    .password-reset-steps li {
      display: grid;
      justify-items: center;
      gap: .35rem;
      min-width: 0;
      color: #8493a0;
      text-align: center;
    }

    .password-reset-steps span {
      display: grid;
      place-items: center;
      width: 30px;
      height: 30px;
      border: 1px solid #ccd8e1;
      border-radius: 50%;
      color: #667989;
      background: #eef3f6;
      font-size: .78rem;
      font-weight: 850;
    }

    .password-reset-steps small { font-size: .68rem; font-weight: 750; line-height: 1.25; }
    .password-reset-steps li.is-active { color: var(--aup-navy); }
    .password-reset-steps li.is-active span { border-color: var(--aup-gold); color: var(--aup-navy); background: #fff3c4; box-shadow: 0 0 0 3px rgba(240,179,35,.13); }
    .password-reset-steps li.is-complete { color: var(--success); }
    .password-reset-steps li.is-complete span { border-color: var(--success); color: #fff; background: var(--success); }

    .backend-confirmation {
      display: grid;
      justify-items: center;
      gap: .75rem;
      padding: 1.25rem 1rem;
      border: 1px solid #bcdcc8;
      border-radius: 14px;
      color: #245f3d;
      background: #edf8f1;
      text-align: center;
    }

    .backend-confirmation[hidden] { display: none; }
    .backend-confirmation-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #fff; background: var(--success); box-shadow: 0 0 0 5px rgba(21,115,71,.11); }
    .backend-confirmation-icon svg { width: 25px; height: 25px; }
    .backend-confirmation h3 { margin: .15rem 0 0; color: #17482c; font-family: Arial, sans-serif; font-size: 1.15rem; }
    .backend-confirmation p { margin: 0; color: #3e6650; font-size: .88rem; line-height: 1.55; }
    .backend-confirmation .login-button { margin-top: .25rem; }

    #loginView.is-complete > #prototypeLogin,
    #loginView.is-complete > .panel-footer { display: none; }

    #changeView.is-complete > .view-intro,
    #changeView.is-complete > #prototypeChange,
    #changeView.is-complete > .panel-footer { display: none; }

    .login-confirmation { margin-top: 0; }
    .login-countdown { color: var(--aup-navy) !important; font-weight: 750; }
    .login-countdown strong {
      display: inline-grid;
      place-items: center;
      min-width: 2rem;
      height: 2rem;
      margin: 0 .18rem;
      border-radius: 50%;
      color: var(--aup-navy);
      background: #fff3c4;
      box-shadow: inset 0 0 0 1px rgba(220,170,18,.35), 0 0 0 4px rgba(240,179,35,.1);
      font-size: 1rem;
      font-variant-numeric: tabular-nums;
    }

    .verify-code-button { margin-top: 0; }

    .verified-student-card {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: .75rem;
      align-items: center;
      margin-bottom: 1rem;
      padding: .85rem .95rem;
      border: 1px solid #bcdcc8;
      border-radius: 12px;
      color: #245f3d;
      background: #edf8f1;
    }

    .verified-student-icon {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      color: #fff;
      background: var(--success);
    }

    .verified-student-icon svg { width: 18px; height: 18px; }
    .verified-student-card small { display: block; margin-bottom: .1rem; font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
    .verified-student-card strong { display: block; color: #17482c; font-size: .98rem; }

    .legal-copy {
      color: #42576a;
      font-size: .9rem;
      line-height: 1.62;
    }

    .legal-copy > p { margin: -.3rem 0 1rem; }

    .legal-read-instruction {
      display: flex;
      align-items: center;
      gap: .55rem;
      margin: 0 0 1rem;
      padding: .72rem .85rem;
      border: 1px solid #d8e5ed;
      border-radius: 11px;
      color: #52697b;
      background: #f4f8fb;
      font-size: .82rem;
      font-weight: 700;
      line-height: 1.45;
    }

    .legal-read-instruction::before {
      content: "↓";
      display: grid;
      place-items: center;
      flex: 0 0 24px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      color: #fff;
      background: var(--aup-blue);
    }

    .legal-read-instruction.is-complete {
      color: #23633d;
      border-color: #bcdcc8;
      background: #edf8f1;
    }

    .legal-read-instruction.is-complete::before { content: "✓"; background: var(--success); }
    .legal-read-marker { height: 1px; }

    .legal-section {
      margin-bottom: .75rem;
      padding: .9rem 1rem;
      border: 1px solid #dde7ee;
      border-left: 3px solid var(--aup-gold);
      border-radius: 12px;
      background: #f8fafc;
    }

    .legal-section h3 {
      margin: 0 0 .38rem;
      color: var(--aup-navy);
      font-family: Arial, sans-serif;
      font-size: 1rem;
      line-height: 1.3;
    }

    .legal-section p { margin: 0; }
    .legal-section p + p { margin-top: .7rem; }
    .legal-section ul { margin: .45rem 0 .7rem; padding-left: 1.25rem; }
    .legal-section li + li { margin-top: .22rem; }
    .legal-section a { color: var(--aup-blue); font-weight: 750; }

    .legal-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: .35rem .8rem;
    }

    .prototype-note {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .4rem;
      margin-top: .7rem;
      color: #84919d;
      font-size: .72rem;
    }

    .prototype-note svg { width: 13px; height: 13px; }

    .dock-toggle {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      width: 100%;
      min-height: 72px;
      padding: .75rem 1rem .75rem 1.1rem;
      border: 0;
      border-radius: 18px;
      color: #fff;
      background: linear-gradient(135deg, var(--aup-navy) 0%, #0c4d7d 100%);
      box-shadow: 0 15px 35px rgba(0, 14, 31, .28);
      cursor: pointer;
      transition: border-radius .25s ease, transform .2s ease, box-shadow .2s ease;
    }

    .login-dock.is-open .dock-toggle {
      border-radius: 0 0 18px 18px;
      box-shadow: 0 15px 35px rgba(0, 14, 31, .22);
    }

    .dock-toggle:hover { transform: translateY(-1px); box-shadow: 0 18px 40px rgba(0, 14, 31, .34); }
    .login-dock.is-open .dock-toggle:hover { transform: none; }

    .toggle-leading { display: flex; align-items: center; gap: .78rem; text-align: left; }

    .toggle-icon {
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      width: 44px;
      height: 44px;
      border-radius: 13px;
      color: var(--aup-gold);
      background: rgba(255,255,255,.12);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
    }

    .toggle-icon svg { width: 21px; height: 21px; }
    .toggle-title { display: block; font-size: .97rem; font-weight: 800; }
    .toggle-subtitle { display: block; margin-top: .12rem; color: rgba(255,255,255,.68); font-size: .72rem; }

    .chevron {
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      color: var(--aup-navy);
      background: var(--aup-gold);
      transition: transform .35s cubic-bezier(.2,.78,.22,1);
    }

    .chevron svg { width: 18px; height: 18px; }
    .login-dock.is-open .chevron { transform: rotate(180deg); }

    .scrim {
      position: fixed;
      inset: 0;
      z-index: 10;
      visibility: hidden;
      opacity: 0;
      background: rgba(2, 17, 30, .48);
      backdrop-filter: blur(3px);
      transition: opacity .25s ease, visibility .25s ease;
    }

    .scrim.is-visible { visibility: visible; opacity: 1; }

    :focus-visible { outline: 3px solid rgba(240,179,35,.9); outline-offset: 3px; }
    .account-view[tabindex="-1"]:focus-visible { outline: none; }

    @media (max-width: 720px) {
      .page-shell { grid-template-rows: auto auto 1fr auto; padding: .7rem 1.15rem 7rem; }
      .welcome { width: 100%; padding: 1.8rem 0 5rem; }
      h1 { font-size: clamp(2.45rem, 13vw, 3.8rem); }
      .welcome-copy { font-size: 1.05rem; line-height: 1.6; }
      .page-footer { display: block; left: .75rem; bottom: .45rem; padding: 0; font-size: clamp(.52rem, 2.55vw, .66rem); }
      .brand-mark { width: 46px; }

      .login-dock {
        right: 0;
        bottom: 0;
        width: 100%;
        filter: none;
      }

      .login-panel {
        max-height: 0;
        transform: translateY(28px);
        transform-origin: bottom center;
        border: 0;
        border-radius: 24px 24px 0 0;
      }

      .login-dock.is-open .login-panel { max-height: min(82vh, 700px); }
      .panel-inner {
        max-height: calc(min(82vh, 700px) - 5px);
        padding: 1.35rem 1.15rem max(1.25rem, env(safe-area-inset-bottom));
      }
      .dock-toggle { min-height: 70px; border-radius: 20px 20px 0 0; padding-bottom: max(.75rem, env(safe-area-inset-bottom)); }
      .login-dock.is-open .dock-toggle { border-radius: 0; }
      .toggle-subtitle { display: none; }
      .password-requirements { grid-template-columns: 1fr; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
      .welcome-copy { position: static; opacity: 1; transform: none; }
      .welcome-copy + .welcome-copy { display: none; }
      .verse-rotator { min-height: 0; overflow: visible; }
    }

/* myAUPlifebook PWA installer */
.pwa-install-button{position:fixed;left:1rem;bottom:1rem;z-index:60;display:flex;align-items:center;gap:.65rem;max-width:min(310px,calc(100vw - 2rem));padding:.72rem .9rem;border:1px solid rgba(240,179,35,.58);border-radius:15px;color:#fff;background:rgba(7,43,76,.96);box-shadow:0 12px 30px rgba(0,12,28,.3);font:inherit;text-align:left;cursor:pointer;backdrop-filter:blur(10px)}
.pwa-install-button:hover,.pwa-install-button:focus-visible{transform:translateY(-1px);box-shadow:0 14px 34px rgba(0,12,28,.38),0 0 0 2px rgba(240,179,35,.18)}
.pwa-install-button[hidden],.pwa-installed .pwa-install-button{display:none!important}
.pwa-install-icon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:11px;color:#072b4c;background:#f0b323;font-size:1.45rem;font-weight:900;line-height:1}
.pwa-install-button strong,.pwa-install-button small{display:block}.pwa-install-button strong{font-size:.82rem}.pwa-install-button small{margin-top:.12rem;color:rgba(255,255,255,.7);font-size:.67rem;font-weight:600}
.pwa-install-dialog{width:min(440px,calc(100vw - 2rem));padding:0;border:1px solid rgba(240,179,35,.42);border-radius:22px;color:#fff;background:#072b4c;box-shadow:0 24px 70px rgba(0,12,28,.5)}
.pwa-install-dialog::backdrop{background:rgba(2,17,30,.65);backdrop-filter:blur(4px)}
.pwa-install-dialog-inner{position:relative;padding:1.5rem;text-align:center}.pwa-install-dialog img{border-radius:18px}.pwa-install-dialog h2{margin:.8rem 0 .6rem;color:#fff;font-size:1.35rem}.pwa-install-dialog p{margin:.65rem 0;color:rgba(255,255,255,.78);font-size:.86rem;line-height:1.55}.pwa-install-dialog em{color:#ffd871;font-style:normal;font-weight:800}
.pwa-dialog-close{position:absolute;top:.7rem;right:.8rem;width:36px;height:36px;border:0;border-radius:50%;color:#fff;background:rgba(255,255,255,.09);font-size:1.5rem;cursor:pointer}.pwa-dialog-done{margin-top:.65rem;padding:.7rem 1.2rem;border:0;border-radius:11px;color:#072b4c;background:#f0b323;font-weight:900;cursor:pointer}
@media(max-width:720px){.pwa-install-button{left:.75rem;bottom:5rem;max-width:calc(100vw - 1.5rem);padding:.62rem .72rem}.pwa-install-icon{width:34px;height:34px;flex-basis:34px}}

/* PWA installer compact card — shared original/modern layout */
.pwa-install-button{left:13px!important;right:auto!important;bottom:14px!important;padding:9px 14px!important;border:1px solid #d6a919!important;border-radius:15px!important;background:#062b4b!important;gap:11px!important;box-shadow:0 10px 28px rgba(0,12,28,.28)!important}
.pwa-install-icon{width:38px!important;height:38px!important;flex-basis:38px!important;border-radius:11px!important;background:#f6b914!important;color:#062b4b!important}
.pwa-install-button strong{font-size:.82rem!important;line-height:1.15!important}.pwa-install-button small{margin-top:.14rem!important;color:rgba(255,255,255,.82)!important;font-size:.67rem!important;font-weight:500!important;line-height:1.15!important}


/* Login validation / privacy flow */
.login-privacy-note{color:var(--muted);font-size:.72rem;line-height:1.35}
.login-validating-spinner{display:inline-block;width:14px;height:14px;margin-right:.4rem;border:2px solid rgba(7,43,76,.2);border-top-color:var(--aup-navy);border-radius:50%;vertical-align:-2px;animation:loginSpin .7s linear infinite}
@keyframes loginSpin{to{transform:rotate(360deg)}}
.auto-proceed-choice{display:flex;align-items:flex-start;gap:.55rem;margin:.85rem 0;color:var(--text);font-size:.78rem;line-height:1.4;text-align:left}
.auto-proceed-choice input{margin-top:.18rem;accent-color:var(--aup-navy)}
.login-proceed-button{margin-top:.7rem;width:100%}
.login-auto-note{margin:.55rem 0 0;color:var(--success);font-size:.72rem;font-weight:700}

/* Login validation spinner: deliberately prominent and continuously animated while authentication is in progress. */
.login-validating-spinner{
  display:inline-block!important;width:26px!important;height:26px!important;margin-right:.55rem!important;
  border:4px solid rgba(7,43,76,.18)!important;border-top-color:#f0b323!important;border-right-color:#0b5f9e!important;
  border-radius:50%!important;vertical-align:-7px!important;animation:loginSpin .65s linear infinite!important;
  box-shadow:0 0 0 2px rgba(240,179,35,.08),0 0 12px rgba(240,179,35,.28);
}
@keyframes loginSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}


/* v34 — PWA install prompt gently leaves after 60 seconds */
[data-pwa-install]{
  transition: opacity .5s ease, transform .5s ease, visibility .5s ease;
}
[data-pwa-install].myalb-install-auto-hide{
  opacity:0 !important;
  transform:translateY(10px) !important;
  visibility:hidden !important;
  pointer-events:none !important;
}


/* v38 — native device/system UI typography */
html, body, button, input, select, textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}