:root {
  --navy: #201f1d;
  --navy-deep: #faf9f8;
  --teal: #d45b28;
  --mint: #d45b28;
  --ink: #201f1d;
  --muted: #77726e;
  --line: #e5e2df;
  --surface: #faf9f8;
  --white: #fff;
  font-family: "DM Sans", sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; background: var(--surface); }

button, input { font: inherit; }
button { cursor: pointer; }

.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 1.04fr) minmax(500px, .96fr); }

.brand-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(34px, 5vw, 72px);
  color: var(--ink);
  background: linear-gradient(145deg, #fff, #f7f3ef);
  border-right: 1px solid var(--line);
}

.brand-panel::after {
  content: "";
  position: absolute;
  width: 430px; height: 430px;
  right: -255px; bottom: 10%;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  box-shadow: 0 0 0 72px rgba(255,255,255,.025), 0 0 0 144px rgba(255,255,255,.02);
}

.brand { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 13px; color: inherit; text-decoration: none; font: 800 23px/1 "Manrope", sans-serif; letter-spacing: .08em; }
.brand-mark { width: 41px; height: 41px; display: flex; align-items: flex-end; gap: 3px; padding: 9px; background: var(--mint); border-radius: 7px; }
.brand-mark span { display: block; width: 6px; border-radius: 4px; background: white; }
.brand-mark span:nth-child(1) { height: 10px; }
.brand-mark span:nth-child(2) { height: 16px; }
.brand-mark span:nth-child(3) { height: 23px; }

.brand-copy { position: relative; z-index: 1; margin: auto 0 46px; max-width: 660px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--teal); font-size: 13px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 25px; height: 2px; background: var(--mint); }
.brand-copy h1 { margin: 25px 0 22px; font: 700 clamp(40px, 4.4vw, 68px)/1.08 "Manrope", sans-serif; letter-spacing: -.045em; }
.brand-copy p { max-width: 550px; margin: 0; color: var(--muted); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.7; }

.process-preview { position: relative; z-index: 1; max-width: 590px; padding: 22px 25px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 18px 45px rgba(45,35,29,.08); }
.preview-head { display: flex; justify-content: space-between; margin-bottom: 20px; color: var(--ink); font-size: 13px; font-weight: 600; }
.live { color: var(--teal); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.live i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; background: var(--mint); border-radius: 50%; box-shadow: 0 0 0 4px rgba(52,211,163,.12); }
.preview-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.preview-stats div { display: flex; flex-direction: column; gap: 5px; }
.preview-stats strong { font: 700 24px/1 "Manrope", sans-serif; }
.preview-stats span { color: var(--muted); font-size: 11px; }
.progress { height: 4px; margin-top: 20px; background: #eeeae6; border-radius: 9px; overflow: hidden; }
.progress span { display: block; width: 68%; height: 100%; background: linear-gradient(90deg, var(--teal), var(--mint)); }
.copyright { position: relative; z-index: 1; margin: 26px 0 0; color: #76999c; font-size: 12px; }

.form-panel { display: flex; align-items: center; justify-content: center; padding: 42px clamp(30px, 7vw, 105px); background: white; }
.form-wrap { width: 100%; max-width: 440px; }
.mobile-brand { display: none; color: var(--navy); margin-bottom: 45px; }
.welcome-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 24px; color: var(--teal); background: #eaf8f4; border-radius: 12px; font-size: 21px; font-weight: 700; }
.form-wrap h2 { margin: 0 0 10px; font: 700 clamp(30px, 3vw, 40px)/1.15 "Manrope", sans-serif; letter-spacing: -.035em; color: #0b3036; }
.form-wrap header p { margin: 0 0 38px; color: var(--muted); font-size: 15px; }
.field { margin-bottom: 21px; }
.field label, .label-row { font-size: 13px; font-weight: 700; }
.label-row { display: flex; justify-content: space-between; align-items: center; }
.text-button { padding: 0; border: 0; background: none; color: var(--teal); font-size: 12px; font-weight: 700; }
.input-wrap { position: relative; margin-top: 9px; }
.input-wrap input { width: 100%; height: 54px; padding: 0 48px; color: var(--ink); border: 1px solid var(--line); border-radius: 11px; outline: none; background: #fcfdfd; transition: border-color .2s, box-shadow .2s; }
.input-wrap input::placeholder { color: #a7b3b4; }
.input-wrap input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(8,125,120,.1); }
.input-icon { position: absolute; z-index: 1; left: 17px; top: 50%; transform: translateY(-50%); width: 20px; color: #7a8b8d; font-weight: 600; }
.input-icon.lock { width: 14px; height: 13px; border: 1.8px solid #7a8b8d; border-radius: 3px; }
.input-icon.lock::before { content: ""; position: absolute; left: 2px; top: -8px; width: 7px; height: 8px; border: 1.8px solid #7a8b8d; border-bottom: 0; border-radius: 6px 6px 0 0; }
.toggle-password { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; background: transparent; }
.toggle-password span { position: absolute; left: 7px; top: 11px; width: 20px; height: 12px; border: 1.7px solid #879697; border-radius: 50%; }
.toggle-password span::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 5px; border: 1.5px solid #879697; border-radius: 50%; }
.toggle-password[aria-pressed="true"] span::before { content: ""; position: absolute; left: -2px; top: 4px; width: 24px; height: 1.5px; background: #879697; transform: rotate(-40deg); }
.remember { display: inline-flex; align-items: center; gap: 9px; color: #52676a; font-size: 13px; cursor: pointer; }
.remember input { width: 17px; height: 17px; accent-color: var(--teal); }
.form-message { min-height: 20px; margin: 11px 0 3px; color: #b43b3b; font-size: 13px; }
.form-message.success { color: var(--teal); }
.submit-button { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 54px; padding: 0 22px; border: 0; border-radius: 7px; color: white; background: linear-gradient(115deg, #d45b28, #b9471b); box-shadow: 0 12px 25px rgba(212,91,40,.2); font-weight: 700; transition: transform .2s, box-shadow .2s, opacity .2s; }
.submit-button:hover { transform: translateY(-1px); box-shadow: 0 15px 30px rgba(8,125,120,.28); }
.submit-button:disabled { cursor: wait; opacity: .65; transform: none; }
.form-wrap footer { margin-top: 32px; padding-top: 25px; border-top: 1px solid #edf1f1; color: #849092; text-align: center; font-size: 12px; }
.form-wrap footer a { color: var(--teal); font-weight: 700; text-decoration: none; }
.logged-in { text-align: center; padding: 35px 0; }
.success-mark { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 50%; background: #e5f8f1; color: var(--teal); font-size: 30px; }
.logged-in h3 { font: 700 28px "Manrope"; margin: 0 0 8px; }
.logged-in p { color: var(--muted); margin: 0 0 28px; }
.social-divider{display:flex;align-items:center;gap:12px;margin:24px 0 16px;color:#94a1a2;font-size:10px;text-transform:uppercase;letter-spacing:.08em}.social-divider::before,.social-divider::after{content:"";height:1px;flex:1;background:#e6eceb}.social-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.social-button{height:46px;border:1px solid #dce5e4;border-radius:10px;color:#385155;background:#fff;font-weight:700}.social-button strong{margin-right:7px;color:#112f34}.signup-call{text-align:center;color:#7c8b8d;font-size:12px;margin:20px 0 0}.signup-call button{border:0;color:var(--teal);background:transparent;font-weight:700}.signup-dialog{width:min(440px,calc(100% - 28px));padding:0;border:0;border-radius:15px;box-shadow:0 30px 80px rgba(4,39,45,.28)}.signup-dialog::backdrop{background:rgba(3,31,36,.6);backdrop-filter:blur(3px)}.signup-dialog form{padding:28px}.signup-head{display:flex;justify-content:space-between;align-items:start}.signup-head h2{margin:8px 0 4px;font:700 24px "Manrope"}.signup-head .eyebrow{color:var(--teal);font-size:9px}.signup-head>button{width:32px;height:32px;border:0;border-radius:8px;background:#edf2f1;font-size:19px}.signup-dialog form>p{margin:0 0 20px;color:#758689;font-size:12px}.signup-dialog label{display:block;margin:12px 0;color:#294448;font-size:11px;font-weight:700}.signup-dialog input{display:block;width:100%;height:44px;margin-top:6px;padding:0 12px;border:1px solid #dce5e4;border-radius:8px;outline:none}.signup-dialog input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(8,125,120,.1)}

@media (max-width: 900px) {
  .login-shell { grid-template-columns: 1fr; }
  .brand-panel { display: none; }
  .form-panel { min-height: 100vh; padding: 35px 24px; }
  .mobile-brand { display: inline-flex; }
}

.social-actions { grid-template-columns: 1fr; }
.social-button { display: flex; align-items: center; justify-content: center; border-radius: 7px; color: #383431; text-decoration: none; }
.social-button strong { color: var(--teal); }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }