@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');

:root { font-family: Inter, 'Noto Sans SC', sans-serif; color: #17213a; background: #f5f7fc; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
a { color: inherit; }

.auth-shell, .trial-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(520px, 53%) 47%; }
.brand-panel { position: relative; overflow: hidden; min-height: 100vh; padding: 52px clamp(48px, 7vw, 142px); color: #fff; background: radial-gradient(circle at 48% 70%, #0d68a6 0, #0b4d80 28%, #072b58 68%, #061e43 100%); }
.brand-panel::before { content: ''; position: absolute; width: 760px; height: 760px; left: -110px; top: 250px; border: 1px solid rgba(123, 214, 255, .18); border-radius: 50%; }
.brand-lockup { position: relative; z-index: 3; display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; font-size: 22px; font-weight: 600; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid #72d7ff; border-radius: 50%; color: #8be5ff; font-size: 20px; font-weight: 700; transform: rotate(-12deg); }
.brand-content { position: relative; z-index: 2; margin-top: clamp(130px, 18vh, 210px); }
.eyebrow { margin: 0 0 22px; color: #a5c8e9; font-size: 11px; font-weight: 600; letter-spacing: .25em; }
.brand-content h1 { margin: 0; color: #fff; font-size: clamp(60px, 5.2vw, 92px); font-weight: 600; line-height: 1.13; letter-spacing: -.06em; }
.brand-content h1 em { color: #71d7ff; font-style: normal; }
.brand-copy { margin: 34px 0 0; color: #c8dff0; font-size: 17px; line-height: 2; }
.trial-visual { position: relative; width: 430px; height: 300px; margin: 2px 0 0 45px; }
.bulb-scene { position: relative; z-index: 2; width: min(440px, 90%); height: 340px; margin: -4px 0 0 18px; display: flex; align-items: center; justify-content: center; }
.bulb-scene img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 35px rgba(41, 187, 255, .24)); }
.brand-footer { position: absolute; z-index: 2; left: clamp(48px, 7vw, 142px); right: 40px; bottom: 34px; display: flex; gap: 28px; color: #b8d5e9; font-size: 11px; }
.brand-footer span::before { content: '✦'; margin-right: 7px; color: #6bdcff; }

.form-panel { position: relative; min-height: 100vh; display: flex; flex-direction: column; padding: 42px clamp(56px, 8vw, 150px); background: #f7f8fc; }
.form-wrap { width: 100%; max-width: 520px; margin: auto; }
.form-heading, .trial-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; margin-bottom: 38px; }
.form-heading h2, .trial-heading h2 { margin: 0 0 12px; color: #18223a; font-size: 42px; line-height: 1.1; letter-spacing: -.05em; }
.form-heading p:not(.eyebrow), .trial-heading p:not(.eyebrow) { margin: 0; color: #8492a7; font-size: 14px; }
.trial-link, .login-link { flex: none; color: #3157e9; font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.secondary-action { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 15px; border: 1px solid #cfdaff; border-radius: 8px; background: #edf2ff; box-shadow: 0 5px 14px rgba(49, 87, 233, .08); transition: border-color .2s, background-color .2s, box-shadow .2s, transform .2s; }
.secondary-action:hover { border-color: #9db1ff; background: #e3eaff; box-shadow: 0 8px 18px rgba(49, 87, 233, .14); transform: translateY(-1px); }
.field { display: block; margin-bottom: 20px; }
.field > span { display: block; margin-bottom: 9px; color: #536177; font-size: 12px; font-weight: 500; }
.field input, .field textarea { width: 100%; height: 55px; padding: 0 17px; border: 1px solid #dbe2ed; border-radius: 7px; outline: none; background: #fff; color: #1b2740; font: inherit; font-size: 14px; transition: .2s; }
.field textarea { height: 112px; padding-top: 15px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #aab5c6; }
.field input:focus, .field textarea:focus { border-color: #4670f4; box-shadow: 0 0 0 3px rgba(70, 112, 244, .1); }
.primary-button { width: 100%; height: 55px; border: 0; border-radius: 7px; color: #fff; background: linear-gradient(105deg, #315fe9, #403fe2); box-shadow: 0 12px 28px rgba(54, 76, 225, .21); cursor: pointer; font: inherit; font-size: 15px; transition: .2s; }
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 15px 32px rgba(54, 76, 225, .3); }
.primary-button:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.message { height: 18px; margin: 12px 0 0; color: #2e8a65; font-size: 12px; }
.message.error { color: #cf5364; }
.form-note { margin-top: 27px; color: #8b97a8; font-size: 12px; text-align: center; }
.form-note a { color: #4663db; text-decoration: none; }
.auth-state { padding: 44px 40px; border: 1px solid #dbe2ed; border-radius: 12px; background: #fff; text-align: center; box-shadow: 0 10px 30px rgba(23, 33, 58, .06); }
.auth-state h2 { margin: 0 0 14px; color: #18223a; font-size: 30px; letter-spacing: -.03em; }
.auth-state .hint { margin: 0 0 28px; color: #8492a7; font-size: 14px; }
.auth-state .account { color: #3157e9; font-weight: 600; }
.legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: auto; padding-top: 30px; color: #a1aabd; font-size: 10px; text-align: center; }

.apply-page { background: #f5f7fc; }
.trial-brand-panel { min-height: 100vh; padding: 48px 60px; }
.trial-brand-copy { position: relative; z-index: 2; margin-top: 160px; }
.trial-brand-copy h1 { max-width: 360px; margin: 0 0 18px; font-size: 44px; line-height: 1.25; }
.trial-brand-copy > p:last-child { color: #bed8ec; font-size: 15px; }
.trial-visual { position: absolute; left: 50%; bottom: 34px; width: min(410px, 88%); height: 390px; margin: 0; transform: translateX(-50%); }
.trial-content { min-height: 100vh; display: flex; flex-direction: column; padding: 42px clamp(55px, 7vw, 130px) 24px; background: #f7f8fc; }
.trial-form-wrap { width: 100%; max-width: 720px; margin: 52px auto 0; }
.trial-heading h2 { font-size: 38px; }
.trial-heading { margin-bottom: 30px; }
.trial-content .field { margin-bottom: 15px; }
.trial-content .field input { height: 49px; }
.trial-content .field textarea { height: 96px; }
.trial-content .primary-button { height: 51px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.trial-footer { padding: 24px 0 4px; color: #99a6b8; font-size: 13px; text-align: center; }
.trial-content-footer { margin-top: auto; }
.legal a, .trial-footer a { color: inherit; text-decoration: none; }
.legal a:hover, .trial-footer a:hover { color: #4663db; }

@media (min-width: 761px) {
  html, body { height: 100%; overflow: hidden; }
  .auth-shell, .trial-shell,
  .brand-panel, .trial-brand-panel,
  .form-panel, .trial-content { height: 100vh; min-height: 0; }
  .brand-content { margin-top: clamp(58px, 10vh, 112px); }
  .brand-content h1 { font-size: clamp(52px, 4.7vw, 82px); }
  .brand-copy { margin-top: 22px; }
  .bulb-scene { height: clamp(210px, 31vh, 310px); }
  .trial-brand-copy { margin-top: clamp(65px, 12vh, 130px); }
  .trial-visual { bottom: 14px; height: clamp(245px, 39vh, 350px); }
  .trial-form-wrap { margin-top: clamp(18px, 4vh, 42px); }
  .trial-heading { margin-bottom: 22px; }
  .trial-footer { padding-top: 12px; }
}

@media (max-width: 980px) {
  .auth-shell, .trial-shell { grid-template-columns: 46% 54%; }
  .brand-panel { padding-left: 45px; padding-right: 35px; }
  .form-panel { padding-left: 48px; padding-right: 48px; }
  .trial-brand-panel { padding: 40px 32px; }
  .trial-brand-copy h1 { font-size: 34px; }
}

@media (max-width: 760px) {
  .auth-shell, .trial-shell { display: block; }
  .brand-panel, .trial-brand-panel { min-height: 350px; padding: 28px; }
  .brand-content, .trial-brand-copy { margin-top: 58px; }
  .brand-content h1 { font-size: 44px; }
  .trial-brand-copy h1 { font-size: 32px; }
  .brand-copy { margin-top: 16px; font-size: 13px; }
  .bulb-scene, .trial-visual { position: absolute; right: -5px; bottom: 0; left: auto; width: 250px; height: 220px; margin: 0; opacity: .82; transform: scale(.78); }
  .brand-footer { display: none; }
  .form-panel, .trial-content { min-height: auto; padding: 28px; }
  .form-wrap, .trial-form-wrap { margin: 65px auto 45px; }
}

@media (max-width: 520px) {
  .form-heading, .trial-heading { display: block; }
  .trial-link, .login-link { display: inline-block; margin-top: 18px; }
  .two-col { grid-template-columns: 1fr; gap: 0; }
  .form-heading h2, .trial-heading h2 { font-size: 34px; }
}