:root {
      --bg1: #0ea5e9;
      --bg2: #22c55e;
      --card-bg: rgba(255,255,255,.08);
      --card-border: rgba(255,255,255,.25);
      --glass: blur(10px);
    }
    html, body {
      height: 100%;
      font-family: 'Noto Sans Thai', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    }
    body {
      background: radial-gradient(1200px 800px at 10% 10%, rgba(255,255,255,.15), transparent) no-repeat,
                  conic-gradient(from 120deg at 30% 20%, rgba(34,197,94,.35), transparent 30%),
                  linear-gradient(135deg, var(--bg1), var(--bg2));
      min-height: 100vh;
      display: grid;
      place-items: center;
    }
    .auth-wrap {
      width: min(92vw, 920px);
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 0;
      border-radius: 18px;
      overflow: hidden;
      background: rgba(255,255,255,.12);
      backdrop-filter: var(--glass);
      border: 1px solid var(--card-border);
      box-shadow: 0 20px 60px rgba(0,0,0,.25);
    }
    @media (max-width: 900px) {
      .auth-wrap { grid-template-columns: 1fr; }
      .hero { display: none; }
    }
    .hero {
      position: relative;
      background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
      padding: 48px;
      color: #fff;
    }
    .hero h1 {
      font-size: clamp(24px, 4vw, 36px);
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 12px;
      text-shadow: 0 2px 8px rgba(0,0,0,.25);
    }
    .hero p { opacity: .95; margin-bottom: 0; }
    .hero .badge {
      background: rgba(255,255,255,.15);
      border: 1px solid rgba(255,255,255,.25);
      backdrop-filter: blur(6px);
    }
    .form-side {
      background: rgba(20,20,24,.45);
      color: #f7f7f7;
      padding: 36px;
      position: relative;
    }
    .card-compact {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 16px;
      padding: 28px;
      backdrop-filter: var(--glass);
    }
    label.small { opacity: .9; }
    .input-group-text { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25); }
    .form-control {
      background: rgba(0,0,0,.25);
      color: #fff;
      border: 1px solid rgba(255,255,255,.25);
    }
    .form-control:focus { box-shadow: 0 0 0 0.2rem rgba(255,255,255,.15); }
    .btn-primary {
      background: linear-gradient(135deg, #2563eb, #1d4ed8);
      border: none;
    }
    .btn-outline-light { border-color: rgba(255,255,255,.6); color: #fff; }
    .subtle { color: rgba(255,255,255,.85); }
    .lang-switch a { color: #fff; text-decoration: none; opacity: .85; }
    .lang-switch a:hover { opacity: 1; text-decoration: underline; }
    .footer-note { color: rgba(255,255,255,.7); font-size: .85rem; }