/* Auth page layout & form styling — shared by login.html and register.html.
   Each page's own <style> block carries only its page-specific overrides
   (brand copy sizing, invite badge, invalid-invite state, toggle-button sizing). */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
    font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
    background: var(--cs-page-bg, var(--color-bg));
    color: var(--cs-text, var(--color-ink));
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    min-height: 100vh;
}

/* ── Brand panel ─────────────────────────────────────────── */
.cs-login-brand {
    background: var(--cs-sidebar);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 64px;
    position: relative;
    overflow: hidden;
}
.cs-login-brand::before {
    content: '';
    position: absolute;
    width: 480px; height: 480px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    top: -180px; right: -160px;
}
.cs-login-brand::after {
    content: '';
    position: absolute;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    bottom: -140px; left: -100px;
}
.cs-login-brand > * { position: relative; z-index: 1; }
.cs-login-wordmark {
    display: flex; align-items: center; gap: 10px;
    font-size: 20px; font-weight: 700; letter-spacing: 0.2px; margin-bottom: 40px;
}
.cs-login-wordmark i { color: var(--cs-accent-bg); font-size: 18px; }
.cs-login-brand h1 { font-size: 32px; font-weight: 700; line-height: 1.25; margin: 0 0 14px; text-wrap: balance; }
.cs-login-brand p.cs-login-tagline {
    font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.72);
    max-width: 380px; margin: 0 0 32px;
}

/* ── Form panel ──────────────────────────────────────────── */
.cs-login-formside {
    display: flex; align-items: center; justify-content: center;
    padding: 32px;
    background:
        radial-gradient(circle at 15% 15%, var(--cs-accent-bg) 0%, transparent 40%),
        radial-gradient(circle at 85% 85%, var(--cs-accent-bg) 0%, transparent 42%),
        var(--cs-page-bg, var(--color-bg));
}
.login-card {
    background: var(--cs-card, #fff);
    border: 1px solid var(--cs-border, var(--color-border));
    border-radius: var(--radius-lg, 12px);
    padding: 40px 36px;
    width: 100%;
    max-width: 380px;
    box-shadow: var(--shadow-card);
    transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.login-card:hover {
    border-color: var(--cs-accent);
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-strong, 0 8px 24px rgba(15,107,98,0.14));
}
.login-card h2 { font-size: 21px; font-weight: 700; margin: 0 0 4px; color: var(--cs-text, var(--color-ink)); }
.login-card p.cs-login-sub { font-size: 14px; color: var(--cs-muted, var(--color-ink-muted)); margin: 0 0 26px; }

.cs-field { margin-bottom: 18px; }
.cs-field label {
    display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px;
    color: var(--cs-muted, var(--color-ink-muted));
    text-transform: uppercase; letter-spacing: 0.4px;
}
.cs-field-control { position: relative; }
.cs-field-control i.cs-field-icon {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    color: var(--cs-muted, var(--color-ink-muted)); font-size: 14px; pointer-events: none;
}
.cs-field-control input {
    width: 100%; padding: 11px 12px 11px 38px; border-radius: 8px; font-size: 14.5px;
    border: 1px solid var(--cs-border, var(--color-border));
    background: var(--cs-page-bg, #fafbfc);
    color: var(--cs-text, var(--color-ink));
    transition: border-color 150ms ease, background 150ms ease;
}
.cs-field-control input:focus {
    outline: none;
    border-color: var(--cs-accent);
    background: var(--cs-card, #fff);
}
.cs-field-hint { font-size: 12px; color: var(--cs-muted, var(--color-ink-muted)); margin-top: 5px; }

.cs-toggle-pw {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    color: var(--cs-muted, var(--color-ink-muted)); font-size: 14px;
}
.cs-toggle-pw:hover { color: var(--cs-accent); }

.login-card button[type="submit"] {
    width: 100%; padding: 12px; border: none; border-radius: 8px; margin-top: 6px;
    background: var(--cs-accent); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
    transition: background 150ms ease;
}
.login-card button[type="submit"]:hover { background: var(--cs-accent-hover); }

.login-error {
    background: var(--cs-low-bg); color: var(--cs-low);
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 18px;
}
.login-error i { font-size: 13px; }

@media (max-width: 860px) {
    body { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); }
    .cs-login-brand { padding: 32px 24px; }
    .cs-login-wordmark { font-size: 17px; margin-bottom: 24px; }
    .cs-login-tagline { display: none; }
}
@media (max-width: 560px) {
    body { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); }
    .cs-login-brand { padding: 24px 12px; align-items: center; }
    .cs-login-wordmark { flex-direction: column; gap: 8px; margin-bottom: 0; font-size: 13px; text-align: center; }
    .cs-login-brand h1 { font-size: 15px; margin-top: 10px; text-align: center; }
}