*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#0f0f0d;--ink2:#5a5955;--ink3:#9a9893;
  --bg:#fafaf8;--bg2:#f2f1ee;--bg3:#e8e7e3;
  --accent:#1a4d8f;--accent2:#e8f0fb;
  --danger:#c0392b;--danger-bg:#fde8e8;
  --success:#2d6a1f;--success-bg:#e8f4e4;
  --r:10px;--rl:16px
}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg3);color:var(--ink);min-height:100vh;display:flex;flex-direction:column}
.top-bar{padding:1.25rem 2rem;display:flex;align-items:center;justify-content:space-between}
.logo{font-size:17px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px;text-decoration:none}
.logo-icon{width:30px;height:30px;background:var(--accent);border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px}
.back-link{font-size:13px;color:var(--ink2);text-decoration:none}
.back-link:hover{color:var(--ink)}

.auth-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem}
.auth-card{background:var(--bg);border-radius:var(--rl);border:0.5px solid var(--bg3);padding:2.5rem;width:100%;max-width:420px;box-shadow:0 4px 24px rgba(0,0,0,.06)}

.auth-title{font-size:22px;font-weight:700;margin-bottom:.35rem}
.auth-sub{font-size:13px;color:var(--ink2);margin-bottom:2rem}

/* tabs */
.auth-tabs{display:flex;gap:0;border:1px solid var(--bg3);border-radius:var(--r);overflow:hidden;margin-bottom:1.75rem}
.auth-tab{flex:1;padding:9px;text-align:center;font-size:13px;font-weight:500;cursor:pointer;background:transparent;border:none;color:var(--ink2)}
.auth-tab.active{background:var(--accent);color:#fff}

.field{margin-bottom:1.1rem}
.field label{display:block;font-size:12px;font-weight:500;color:var(--ink2);margin-bottom:.4rem}
.field input{width:100%;padding:10px 12px;border:1px solid var(--bg3);border-radius:var(--r);font-size:14px;background:var(--bg);color:var(--ink);outline:none}
.field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent2)}
.field input::placeholder{color:var(--ink3)}

.btn-auth{width:100%;padding:12px;background:var(--accent);color:#fff;border:none;border-radius:var(--r);font-size:14px;font-weight:600;cursor:pointer;margin-top:.25rem}
.btn-auth:hover{opacity:.9}
.btn-auth:disabled{opacity:.5;cursor:not-allowed}

.auth-msg{padding:10px 14px;border-radius:var(--r);font-size:13px;margin-bottom:1rem;display:none}
.auth-msg.error{background:var(--danger-bg);color:var(--danger)}
.auth-msg.success{background:var(--success-bg);color:var(--success)}

.divider{display:flex;align-items:center;gap:.75rem;margin:1.25rem 0;color:var(--ink3);font-size:12px}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--bg3)}

.terms{font-size:11px;color:var(--ink3);text-align:center;margin-top:1.25rem;line-height:1.6}
.terms a{color:var(--ink2);text-decoration:underline}

.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}

/* trial badge */
.trial-badge{background:var(--accent2);color:var(--accent);font-size:11px;font-weight:500;padding:6px 12px;border-radius:var(--r);text-align:center;margin-bottom:1.5rem}
</style>