*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --brand:       #2E7DC4;
      --brand-dark:  #1E5F9A;
      --brand-light: #EAF3FB;
      --text-dark:   #1A2332;
      --text-mid:    #4A5568;
      --text-soft:   #8FA3B8;
      --border:      #D6E4F0;
      --bg:          #EEF3F9;
      --card-bg:     #FFFFFF;
      --radius:      14px;
      --shadow:      0 8px 40px rgba(46,125,196,.10);
    }

    html, body {
      min-height: 100%;
      font-family: 'DM Sans', sans-serif;
      background: var(--bg);
      color: var(--text-dark);
    }

    /* ---------- gradient blob background ---------- */
    body {
      background:
        radial-gradient(ellipse 60% 55% at 10% 90%, rgba(46,125,196,.18) 0%, transparent 70%),
        radial-gradient(ellipse 50% 45% at 90% 10%, rgba(100,181,246,.14) 0%, transparent 65%),
        #EEF3F9;
    }

    /* ---------- top nav ---------- */
    .navbar {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 18px 24px;
      position: relative;
    }

    .navbar .back-btn {
      position: absolute;
      left: 24px;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-dark);
      display: flex;
      align-items: center;
      padding: 6px;
      border-radius: 50%;
      transition: background .2s;
    }
    .navbar .back-btn:hover { background: rgba(0,0,0,.06); }

    .navbar .logo {
      font-family: 'Sora', sans-serif;
      font-size: 1.35rem;
      font-weight: 700;
      color: var(--brand);
      letter-spacing: -.5px;
    }

    /* ---------- page layout ---------- */
    .page {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      padding: 20px 16px 60px;
    }

    /* ---------- card ---------- */
    .card {
      background: var(--card-bg);
      border-radius: 22px;
      box-shadow: var(--shadow);
      padding: 44px 40px 38px;
      width: 100%;
      max-width: 480px;
      animation: fadeUp .45s ease both;
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .card-title {
      font-family: 'Sora', sans-serif;
      font-size: 1.75rem;
      font-weight: 700;
      color: var(--text-dark);
      text-align: center;
      margin-bottom: 6px;
    }

    .card-sub {
      text-align: center;
      color: var(--text-mid);
      font-size: .93rem;
      margin-bottom: 28px;
    }

    /* ---------- role toggle ---------- */
    .role-toggle {
      display: flex;
      background: #F0F5FA;
      border-radius: 50px;
      padding: 4px;
      margin-bottom: 28px;
      gap: 4px;
    }

    .role-toggle input[type="radio"] { display: none; }

    .role-toggle label {
      flex: 1;
      text-align: center;
      padding: 10px 0;
      border-radius: 50px;
      font-size: .9rem;
      font-weight: 500;
      color: var(--text-mid);
      cursor: pointer;
      transition: background .22s, color .22s, box-shadow .22s;
      user-select: none;
    }

    .role-toggle input:checked + label {
      background: var(--brand);
      color: #fff;
      box-shadow: 0 3px 12px rgba(46,125,196,.35);
    }

    /* ---------- form fields ---------- */
    .field { margin-bottom: 18px; }

    .field label {
      display: block;
      font-size: .82rem;
      font-weight: 600;
      color: var(--text-mid);
      margin-bottom: 7px;
      letter-spacing: .02em;
    }

    .input-wrap {
      position: relative;
      display: flex;
      align-items: center;
    }

    .input-wrap .icon {
      position: absolute;
      left: 14px;
      color: var(--text-soft);
      pointer-events: none;
      display: flex;
    }

    .input-wrap input {
      width: 100%;
      padding: 13px 14px 13px 42px;
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      font-family: 'DM Sans', sans-serif;
      font-size: .93rem;
      color: var(--text-dark);
      background: #FAFCFF;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
    }

    .input-wrap input::placeholder { color: var(--text-soft); }

    .input-wrap input:focus {
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(46,125,196,.13);
      background: #fff;
    }

    /* eye toggle for password */
    .eye-btn {
      position: absolute;
      right: 12px;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-soft);
      display: flex;
      padding: 4px;
      border-radius: 6px;
      transition: color .2s;
    }
    .eye-btn:hover { color: var(--brand); }

    /* ---------- register button ---------- */
    .btn-register {
      display: block;
      width: 100%;
      padding: 15px;
      margin-top: 8px;
      background: var(--brand);
      color: #fff;
      border: none;
      border-radius: var(--radius);
      font-family: 'Sora', sans-serif;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      letter-spacing: .02em;
      transition: background .2s, transform .15s, box-shadow .2s;
      box-shadow: 0 4px 18px rgba(46,125,196,.30);
    }

    .btn-register:hover {
      background: var(--brand-dark);
      transform: translateY(-1px);
      box-shadow: 0 6px 22px rgba(46,125,196,.40);
    }

    .btn-register:active { transform: translateY(0); }

    /* ---------- login link ---------- */
    .login-link {
      text-align: center;
      margin-top: 20px;
      font-size: .88rem;
      color: var(--text-mid);
    }

    .login-link a {
      color: var(--brand);
      font-weight: 600;
      text-decoration: none;
    }
    .login-link a:hover { text-decoration: underline; }

    /* ---------- error messages ---------- */
    .error-msg {
      color: #E53E3E;
      font-size: .78rem;
      margin-top: 5px;
      display: none;
    }
    .field.has-error .input-wrap input { border-color: #E53E3E; }
    .field.has-error .error-msg { display: block; }

    /* ---------- flash messages (EJS) ---------- */
    /* ===== Flash Messages ===== */

.flash{
  width:100%;
  padding:14px 16px;
  border-radius:12px;
  margin-bottom:18px;
  font-size:14px;
  font-weight:500;
  text-align:center;
}

.flash.success{
  background:#e7f8ec;
  color:#1c8c4c;
  border:1px solid #b7ebc9;
}

.flash.error{
  background:#ffe8e8;
  color:#d62828;
  border:1px solid #ffb3b3;
}

    /* ---------- responsive ---------- */
    @media (max-width: 520px) {
      .card {
        padding: 34px 22px 30px;
        border-radius: 18px;
      }
      .card-title { font-size: 1.45rem; }
    }

    @media (max-width: 360px) {
      .card { padding: 28px 16px 26px; }
    }