/* AD VIEW HUB — dark green dashboard-matched login theme */
:root {
    --page: #020b07;
    --panel: #04140d;
    --panel-soft: #061b11;
    --panel-border: #12512f;
    --green: #00ef73;
    --green-light: #56ff9b;
    --green-dark: #00a94f;
    --text: #f5fff8;
    --muted: #91a99b;
    --input: #07180f;
    --radius: 18px;
}
* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body.login-page {
    margin: 0;
    min-height: 100vh;
    background: var(--page);
    color: var(--text);
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
button, input { font: inherit; }
a { color: inherit; }
.login-background { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; background:
    radial-gradient(ellipse at 12% 18%, rgba(0,239,115,.10), transparent 34%),
    radial-gradient(ellipse at 86% 82%, rgba(0,169,79,.10), transparent 34%),
    linear-gradient(135deg, #020b07 0%, #03140b 52%, #020b07 100%);
}
.background-grid { position: absolute; inset: 0; opacity: .17; background-image:
    linear-gradient(rgba(0,239,115,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,239,115,.075) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, black, transparent 95%);
}
.ambient { position: absolute; display: block; border-radius: 50%; filter: blur(90px); opacity: .18; }
.ambient-one { width: 300px; height: 300px; background: #00ef73; top: -160px; left: -100px; }
.ambient-two { width: 380px; height: 380px; background: #007d3b; right: -180px; bottom: -160px; }
.ambient-three { width: 190px; height: 190px; background: #00ef73; left: 48%; top: 42%; opacity: .07; }
.login-layout {
    position: relative; z-index: 1; min-height: 100vh; width: min(1180px, 100%);
    margin: 0 auto; padding: 36px 30px; display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(390px, .85fr);
    align-items: center; gap: clamp(38px, 7vw, 100px);
}
.welcome-panel { min-width: 0; display: flex; flex-direction: column; min-height: 610px; justify-content: space-between; padding: 10px 0; }
.brand-lockup { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; width: fit-content; }
.brand-symbol { width: 47px; height: 47px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    color: #001b0b; background: linear-gradient(145deg, #5aff9b, #00d963); border-radius: 13px;
    box-shadow: 0 0 28px rgba(0,239,115,.20); }
.brand-symbol svg { width: 25px; height: 25px; stroke-width: 2.8; fill: currentColor; }
.brand-copy { display: flex; flex-direction: column; gap: 5px; }
.brand-copy strong { font-size: 23px; font-weight: 900; letter-spacing: -.8px; line-height: 1; }
.brand-copy small { color: #a5c0af; font-size: 9px; font-weight: 700; letter-spacing: 1.25px; }
.welcome-content { max-width: 530px; padding: 45px 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; border: 1px solid rgba(0,239,115,.24); color: var(--green-light);
    background: rgba(0,239,115,.055); padding: 9px 13px; border-radius: 30px; font-size: 10px; font-weight: 800; letter-spacing: 1.4px; }
.status-dot { width: 7px; height: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 12px rgba(0,239,115,.85); }
.welcome-content h1 { margin: 25px 0 18px; font-size: clamp(38px, 4.2vw, 58px); line-height: 1.09; font-weight: 900; letter-spacing: -2.6px; }
.welcome-content h1 span { color: var(--green); }
.welcome-content > p { max-width: 450px; margin: 0; color: #9bb3a4; font-size: 14px; line-height: 1.9; }
.feature-list { display: grid; gap: 14px; margin-top: 32px; }
.feature-item { display: flex; align-items: center; gap: 14px; }
.feature-icon { width: 43px; height: 43px; border: 1px solid #17623a; border-radius: 13px; display: grid; place-items: center; color: var(--green); background: rgba(0,239,115,.055); flex-shrink: 0; }
.feature-icon svg { width: 20px; height: 20px; }
.feature-item > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.feature-item strong { font-size: 12px; font-weight: 800; }
.feature-item small { color: #8fa99a; font-size: 11px; line-height: 1.5; }
.welcome-bottom { display: flex; align-items: center; gap: 12px; color: #648571; font-size: 9px; font-weight: 800; letter-spacing: 1.6px; }
.bottom-line { width: 34px; height: 2px; background: var(--green); border-radius: 3px; }
.form-side { width: 100%; max-width: 470px; justify-self: end; }
.auth-card { position: relative; overflow: hidden; padding: clamp(28px, 4vw, 44px); border: 1px solid #14502f; border-radius: 23px;
    background: linear-gradient(145deg, rgba(5,24,14,.97), rgba(3,16,9,.98)); box-shadow: 0 28px 90px rgba(0,0,0,.38), 0 0 0 1px rgba(0,239,115,.025); }
.auth-card::before { content: ""; position: absolute; height: 3px; left: 0; right: 0; top: 0; background: linear-gradient(90deg, transparent, var(--green), #00a94f, transparent); }
.mobile-brand { display: none; }
.form-heading { text-align: center; margin-bottom: 30px; }
.form-mark { width: 58px; height: 58px; margin: 0 auto 20px; display: grid; place-items: center; color: var(--green); background: rgba(0,239,115,.075); border: 1px solid #17633a; border-radius: 18px; }
.form-mark svg { width: 26px; height: 26px; }
.form-kicker { margin: 0 0 9px; color: var(--green); font-size: 9px; font-weight: 900; letter-spacing: 2px; }
.form-heading h2 { margin: 0; font-size: clamp(23px, 2.2vw, 28px); font-weight: 850; letter-spacing: -.9px; }
.form-subtitle { margin: 10px 0 0; color: #8fa99a; font-size: 12px; line-height: 1.7; }
.form-group { margin-bottom: 21px; }
.form-group label { display: block; margin: 0 0 9px; color: #c0d2c7; font-size: 10px; font-weight: 800; letter-spacing: .7px; }
.label-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.forgot-link { color: var(--green-light); text-decoration: none; font-size: 10px; font-weight: 700; white-space: nowrap; }
.forgot-link:hover, .register-prompt a:hover { color: #a6ffc7; }
.input-wrap { position: relative; }
.field-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: #6f9780; pointer-events: none; transition: color .2s; }
.form-input { display: block; width: 100%; height: 54px; border: 1px solid #17472d; border-radius: 12px; outline: none; padding: 0 48px 0 46px;
    color: #f3fff7; background: #06170e; font-size: 12px; font-weight: 500; transition: border-color .2s, box-shadow .2s, background .2s; }
.form-input::placeholder { color: #668371; opacity: 1; }
.form-input:focus { border-color: var(--green); background: #071b10; box-shadow: 0 0 0 3px rgba(0,239,115,.09); }
.input-wrap:focus-within .field-icon { color: var(--green); }
.password-toggle { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); display: grid; place-items: center; width: 32px; height: 32px; padding: 0; color: #7fa18b; background: transparent; border: 0; border-radius: 8px; cursor: pointer; }
.password-toggle:hover { color: var(--green); background: rgba(0,239,115,.07); }
.password-toggle svg { width: 17px; height: 17px; }
.login-button { position: relative; width: 100%; min-height: 54px; margin-top: 5px; padding: 0 17px; display: flex; align-items: center; justify-content: center; gap: 11px;
    border: 1px solid #39ff8c; border-radius: 12px; background: linear-gradient(100deg, #00e66b, #00b957); color: #00230e;
    box-shadow: 0 8px 25px rgba(0,220,95,.16); font-size: 12px; font-weight: 900; cursor: pointer; transition: transform .2s, box-shadow .2s, filter .2s; }
.login-button > svg { width: 17px; height: 17px; stroke-width: 2.5; }
.login-button .button-arrow { position: absolute; right: 16px; width: 16px; height: 16px; }
.login-button:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 12px 30px rgba(0,220,95,.25); }
.login-button:active { transform: translateY(0); }
.login-button:disabled { opacity: .75; cursor: wait; transform: none; }
.security-note { display: flex; align-items: flex-start; gap: 12px; margin-top: 22px; padding: 14px; border: 1px solid #17452c; border-radius: 12px; background: rgba(0,239,115,.035); }
.security-icon { width: 30px; height: 30px; display: grid; place-items: center; flex-shrink: 0; border-radius: 9px; color: var(--green); background: rgba(0,239,115,.09); }
.security-icon svg { width: 16px; height: 16px; }
.security-note > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.security-note strong { font-size: 10px; font-weight: 800; }
.security-note small { color: #8da898; font-size: 10px; line-height: 1.6; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 18px; }
.auth-divider span { height: 1px; flex: 1; background: #173b28; }
.auth-divider small { color: #658572; font-size: 9px; font-weight: 800; letter-spacing: 1.4px; }
.register-prompt { text-align: center; color: #9bb3a4; font-size: 11px; line-height: 1.8; }
.register-prompt a { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; color: var(--green-light); font-weight: 800; text-decoration: none; }
.register-prompt a svg { width: 13px; height: 13px; }
.auth-legal { margin: 22px 0 0; color: #557361; text-align: center; font-size: 9px; line-height: 1.7; }
.login-error { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin: 0 0 20px; border: 1px solid rgba(255,93,93,.35); border-radius: 11px; background: rgba(255,67,67,.08); color: #ffaaaa; font-size: 11px; line-height: 1.5; }
.login-error svg { width: 17px; height: 17px; flex-shrink: 0; }
.page-footer { margin-top: 18px; color: #5f7d6b; text-align: center; font-size: 9px; letter-spacing: .2px; }
.loading-spinner { width: 16px; height: 16px; border: 2px solid rgba(0,35,14,.3); border-top-color: #00230e; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) {
    .login-layout { grid-template-columns: minmax(0, .9fr) minmax(360px, 1fr); gap: 35px; padding: 28px 22px; }
    .welcome-panel { min-height: 560px; }
    .welcome-content h1 { font-size: clamp(35px, 4.5vw, 48px); letter-spacing: -1.8px; }
    .brand-copy strong { font-size: 19px; }
    .brand-copy small { font-size: 8px; letter-spacing: .7px; }
    .auth-card { padding: 30px 25px; }
}
@media (max-width: 700px) {
    .login-layout { display: flex; justify-content: center; padding: 24px 16px 18px; min-height: 100svh; }
    .welcome-panel { display: none; }
    .form-side { max-width: 460px; margin: auto; }
    .auth-card { padding: 30px clamp(21px, 6vw, 34px); border-radius: 20px; }
    .mobile-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 28px; color: #f3fff7; font-size: 15px; font-weight: 900; letter-spacing: .2px; }
    .mobile-brand .brand-symbol { width: 37px; height: 37px; border-radius: 11px; }
    .mobile-brand .brand-symbol svg { width: 20px; height: 20px; }
    .form-heading { margin-bottom: 26px; }
    .form-mark { width: 52px; height: 52px; margin-bottom: 16px; border-radius: 16px; }
    .page-footer { margin-top: 14px; }
}
@media (max-width: 380px) {
    .login-layout { padding: 14px 10px; }
    .auth-card { padding: 25px 18px; }
    .form-heading h2 { font-size: 22px; }
    .form-input { height: 51px; font-size: 11px; padding-left: 42px; }
    .field-icon { left: 13px; }
    .register-prompt a { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}


/* Registration page additions — shares the login page's green/black theme */
.register-card { padding-top: 34px; padding-bottom: 30px; }
.register-card .form-heading { margin-bottom: 24px; }
.register-card .form-mark { margin-bottom: 15px; }
.register-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.register-grid .span-2 { grid-column: 1 / -1; }
.register-card .form-group { margin-bottom: 17px; }
.register-card .form-input, .register-card .form-select { height: 51px; }
.register-card .form-select {
    display: block; width: 100%; border: 1px solid #17472d; border-radius: 12px;
    outline: none; padding: 0 32px 0 38px; color: #f3fff7; background: #06170e;
    font-family: inherit; font-size: 11px; font-weight: 600; appearance: none;
    transition: border-color .2s, box-shadow .2s;
}
.register-card .form-select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(0,239,115,.09); }
.register-card .select-wrap { position: relative; width: 132px; flex: 0 0 132px; }
.register-card .select-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #6f9780; pointer-events: none; width: 15px; height: 15px; }
.register-card .select-caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #6f9780; pointer-events: none; }
.register-card .phone-row { display: flex; align-items: center; gap: 10px; }
.register-card .phone-row .input-wrap { min-width: 0; flex: 1; }
.register-card .phone-row .form-input { padding-left: 42px; padding-right: 12px; }
.register-card .section-divider { display: flex; align-items: center; gap: 12px; margin: 23px 0 20px; }
.register-card .section-divider span { flex: 1; height: 1px; background: #173b28; }
.register-card .section-divider p { margin: 0; color: #6d927b; font-size: 9px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; }
.register-card .form-input[readonly] { color: #d9fbe5; background: #071a10; cursor: default; }
.register-card .form-input.sponsor-verified { color: var(--green-light); border-color: #16864b; background: rgba(0,239,115,.045); }
.register-card .form-input.sponsor-invalid { color: #ffaaaa; border-color: #a33c3c; background: rgba(255,67,67,.06); }
.register-card .form-input.sponsor-verified + .field-icon { color: var(--green); }
.register-card .register-info { display: flex; align-items: flex-start; gap: 11px; margin-top: 18px; padding: 13px 14px; border: 1px solid #17452c; border-radius: 12px; background: rgba(0,239,115,.035); color: #9bb9a5; font-size: 10px; line-height: 1.65; }
.register-card .register-info svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--green); }
.register-card .login-button { margin-top: 8px; }
.register-card .form-heading h2 { font-size: clamp(22px, 2.1vw, 27px); }
.register-card .register-legal { margin: 18px 0 0; color: #557361; text-align: center; font-size: 9px; line-height: 1.7; }
@media (max-width: 700px) {
    .register-card { padding-top: 26px; padding-bottom: 25px; }
    .register-grid { grid-template-columns: 1fr; gap: 0; }
    .register-grid .span-2 { grid-column: auto; }
    .register-card .select-wrap { width: 122px; flex-basis: 122px; }
}
@media (max-width: 380px) {
    .register-card .phone-row { gap: 7px; }
    .register-card .select-wrap { width: 108px; flex-basis: 108px; }
    .register-card .form-select { padding-left: 32px; font-size: 10px; }
    .register-card .phone-row .form-input { padding-left: 37px; }
}


/* Registration success / Thank You page */
.thankyou-layout { align-items: center; }
.thankyou-card { padding: clamp(27px, 3.5vw, 39px); }
.success-heading { text-align: center; margin-bottom: 27px; }
.success-icon { width: 66px; height: 66px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%;
    border: 1px solid rgba(0,239,115,.55); color: #001b0b; background: linear-gradient(145deg, #62ffa0, #00d963);
    box-shadow: 0 0 0 7px rgba(0,239,115,.055), 0 0 32px rgba(0,239,115,.18); }
.success-icon svg { width: 31px; height: 31px; stroke-width: 3; }
.success-heading h2 { margin: 0; color: #f4fff7; font-size: clamp(22px, 2.4vw, 28px); font-weight: 900; letter-spacing: -.9px; }
.success-heading .form-subtitle { margin-top: 10px; }
.success-heading .form-subtitle strong { color: #e8fff0; }
.credentials-heading { display: flex; align-items: center; gap: 11px; margin: 0 0 13px; }
.credentials-heading-icon { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #175b35; border-radius: 11px; color: var(--green); background: rgba(0,239,115,.06); flex-shrink: 0; }
.credentials-heading-icon svg { width: 18px; height: 18px; }
.credentials-heading > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.credentials-heading strong { color: #effff4; font-size: 12px; font-weight: 850; }
.credentials-heading small { color: #83a58f; font-size: 10px; line-height: 1.5; }
.credential-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; margin-bottom: 10px; padding: 14px 14px 14px 16px; border: 1px solid #17472d; border-radius: 12px; background: #06170e; }
.credential-copy { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cred-label { color: #83a58f; font-size: 9px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.credential-value { color: var(--green-light); font-size: 15px; font-weight: 850; letter-spacing: .2px; overflow-wrap: anywhere; }
.password-value { color: #f1fff5; font-size: 13px; font-weight: 650; }
.copy-btn { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #20563a; border-radius: 10px; color: #9ac8aa; background: #0a2114; cursor: pointer; transition: .2s ease; }
.copy-btn svg { width: 16px; height: 16px; }
.copy-btn:hover, .copy-btn.copied { color: #001b0b; border-color: var(--green); background: var(--green); }
.copy-btn:disabled { opacity: .4; cursor: not-allowed; }
.credential-warning { display: flex; align-items: flex-start; gap: 11px; margin: 17px 0 19px; padding: 14px; border: 1px solid rgba(255,190,71,.26); border-radius: 12px; background: rgba(255,190,71,.045); }
.warning-icon { width: 30px; height: 30px; display: grid; place-items: center; flex-shrink: 0; border-radius: 9px; color: #ffcc70; background: rgba(255,190,71,.08); }
.warning-icon svg { width: 17px; height: 17px; }
.credential-warning > span:last-child { display: flex; flex-direction: column; gap: 5px; }
.credential-warning strong { color: #ffcc70; font-size: 10px; line-height: 1.5; }
.credential-warning small { color: #a8b8ad; font-size: 10px; line-height: 1.65; }
.thankyou-cta { text-decoration: none; }
.support-line { margin-top: 20px; text-align: center; color: #89a895; font-size: 11px; }
.support-line a { color: var(--green-light); font-weight: 800; text-decoration: none; margin-left: 4px; }
.support-line a:hover { color: #b2ffcd; }
.thankyou-card .register-legal { margin-top: 18px; }
.copy-toast { position: fixed; z-index: 50; left: 50%; bottom: 24px; transform: translate(-50%, 12px); padding: 11px 16px; border: 1px solid #17633a; border-radius: 10px; background: #071b10; color: var(--green-light); font-size: 11px; font-weight: 800; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; box-shadow: 0 10px 35px rgba(0,0,0,.3); }
.copy-toast.visible { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 700px) {
    .thankyou-layout { padding-top: 18px; padding-bottom: 18px; }
    .thankyou-card { padding: 25px 21px; }
    .success-heading { margin-bottom: 23px; }
    .credential-value { font-size: 14px; }
}