@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
* { box-sizing:border-box; margin:0; padding:0; }
html { min-height:100%; }
body { min-height:100%; background:#f5f7fb; color:#1f2937; font-family:'Manrope', Arial, sans-serif; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
input { font:inherit; }
:root { --bg:#f5f7fb; --surface:#ffffff; --text:#1f2937; --muted:#6b7280; --line:#e5e7eb; --accent:#f1890a; --accent-dark:#d97706; --success:#16a34a; --danger:#dc2626; --shadow:0 18px 40px rgba(15,23,42,.08); --radius:26px; }
.auth-page { min-height:100vh; padding:32px 16px; display:flex; align-items:center; justify-content:center; }
.auth-shell { width:100%; max-width:1180px; display:grid; grid-template-columns:minmax(0,540px) minmax(0,540px); background:var(--surface); border:1px solid rgba(241,137,10,.12); border-radius:32px; overflow:hidden; box-shadow:var(--shadow); }
.auth-side { background:linear-gradient(135deg, rgba(241,137,10,.12), rgba(245,247,251,1)); padding:48px; display:flex; flex-direction:column; justify-content:space-between; gap:32px; }
.auth-side-top { display:flex; flex-direction:column; gap:22px; }
.auth-logo { display:inline-flex; align-items:center; }
.auth-logo img { width:auto; max-width:260px; height:auto; display:block; }
.auth-side-badge { width:max-content; padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.78); border:1px solid rgba(241,137,10,.18); font-size:13px; font-weight:700; color:#9a5d07; }
.auth-side-title { font-size:34px; line-height:1.15; font-weight:800; color:#111827; }
.auth-side-text { color:#4b5563; font-size:16px; line-height:1.7; }
.auth-side-list { display:grid; gap:14px; }
.auth-side-item { display:flex; align-items:flex-start; gap:12px; color:#374151; font-size:15px; line-height:1.6; }
.auth-side-dot { width:12px; height:12px; flex:0 0 12px; margin-top:7px; border-radius:999px; background:var(--accent); }
.auth-card { padding:48px; display:flex; align-items:center; justify-content:center; background:#fff; }
.auth-card-inner { width:100%; max-width:420px; display:flex; flex-direction:column; gap:22px; }
.auth-head { display:flex; flex-direction:column; gap:8px; }
.auth-title { font-size:30px; line-height:1.2; font-weight:800; color:#111827; }
.auth-subtitle { color:var(--muted); font-size:15px; line-height:1.65; }
.auth-form { display:flex; flex-direction:column; gap:16px; }
.auth-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.auth-field { display:flex; flex-direction:column; gap:8px; }
.auth-label { font-size:14px; font-weight:700; color:#374151; }
.auth-input { width:100%; height:54px; padding:0 16px; border:1px solid #d1d5db; border-radius:16px; background:#fff; color:#111827; outline:none; transition:border-color .2s ease, box-shadow .2s ease; }
.auth-input:focus { border-color:rgba(241,137,10,.9); box-shadow:0 0 0 4px rgba(241,137,10,.12); }
.auth-check-row { display:flex; align-items:flex-start; gap:12px; }
.auth-check-input { width:18px; height:18px; margin-top:2px; accent-color:var(--accent); }
.auth-check-label { color:#374151; font-size:14px; line-height:1.65; }
.auth-inline-link { color:var(--accent-dark); font-weight:800; background:none; border:0; padding:0; }
.auth-button { width:100%; height:56px; border:0; border-radius:16px; background:var(--accent); color:#fff; font-size:16px; font-weight:800; transition:transform .2s ease, background .2s ease; }
.auth-button:hover { background:var(--accent-dark); transform:translateY(-1px); }
.auth-button-secondary { width:100%; height:56px; display:inline-flex; align-items:center; justify-content:center; gap:12px; border:1px solid #d1d5db; border-radius:16px; background:#fff; color:#111827; font-size:15px; font-weight:800; }
.auth-button-secondary:hover { border-color:#9ca3af; }
.auth-google-icon { width:20px; height:20px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:#fff; color:#ea4335; font-weight:800; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.auth-divider { position:relative; text-align:center; color:#9ca3af; font-size:13px; font-weight:700; }
.auth-divider::before { content:''; position:absolute; top:50%; left:0; width:100%; height:1px; background:#e5e7eb; transform:translateY(-50%); }
.auth-divider span { position:relative; padding:0 14px; background:#fff; }
.auth-foot { display:flex; flex-direction:column; gap:12px; text-align:center; }
.auth-foot-text { color:#6b7280; font-size:14px; line-height:1.6; }
.auth-link-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; color:var(--accent-dark); font-size:14px; font-weight:800; }
.auth-link-inline { color:var(--accent-dark); font-size:14px; font-weight:800; }
.auth-alert { padding:14px 16px; border-radius:16px; font-size:14px; line-height:1.6; }
.auth-alert-error { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; }
.auth-alert-success { background:#f0fdf4; border:1px solid #bbf7d0; color:#166534; }
.auth-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.modal-overlay { position:fixed; inset:0; z-index:1200; display:none; align-items:center; justify-content:center; padding:16px; background:rgba(17,24,39,.55); }
.modal-overlay.is-active { display:flex; }
.modal-box { width:100%; max-width:720px; max-height:min(88vh,920px); display:flex; flex-direction:column; background:#fff; border-radius:24px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.2); }
.modal-head { padding:22px 22px 18px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid #e5e7eb; }
.modal-title { font-size:22px; font-weight:800; color:#111827; }
.modal-close { width:42px; height:42px; border:1px solid #d1d5db; border-radius:14px; background:#fff; color:#111827; font-size:22px; line-height:1; }
.modal-body { padding:24px 22px; overflow:auto; display:flex; flex-direction:column; gap:18px; }
.modal-section { display:flex; flex-direction:column; gap:10px; }
.modal-section-title { font-size:16px; font-weight:800; color:#111827; }
.modal-text { color:#4b5563; font-size:14px; line-height:1.8; }
.modal-foot { padding:18px 22px 22px; border-top:1px solid #e5e7eb; display:flex; justify-content:flex-end; }
.modal-approve { min-width:220px; height:52px; border:0; border-radius:16px; background:var(--accent); color:#fff; font-size:15px; font-weight:800; }
.modal-approve:hover { background:var(--accent-dark); }
@media (max-width:980px) { .auth-shell { grid-template-columns:1fr; } }
@media (max-width:980px) { .auth-side { padding:36px 26px; } }
@media (max-width:980px) { .auth-card { padding:36px 26px; } }
@media (max-width:640px) { .auth-page { padding:12px; } }
@media (max-width:640px) { .auth-shell { border-radius:24px; } }
@media (max-width:640px) { .auth-side { padding:28px 20px; } }
@media (max-width:640px) { .auth-card { padding:28px 20px; } }
@media (max-width:640px) { .auth-row { grid-template-columns:1fr; } }
@media (max-width:640px) { .auth-title { font-size:26px; } }
@media (max-width:640px) { .auth-side-title { font-size:28px; } }