/* login.css — sign-in page (light theme, self-contained: domains.css vars not loaded here) */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --bg:      #f5f7fa;
    --surface: #ffffff;
    --border:  #e5e9f0;
    --border2: #d5dbe6;
    --text:    #182234;
    --text2:   #566072;
    --text3:   #8a94a6;
    --accent:  #2f6fed;
    --red:     #dc3a56;
}

body {
    background:
        radial-gradient(1200px 600px at 50% -10%, #eaf0fb 0%, rgba(234,240,251,0) 60%),
        var(--bg) !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    color: var(--text);
}

.container { max-width: 100%; }

.card {
    background: var(--surface);
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(24,34,52,.06), 0 20px 48px rgba(24,34,52,.10);
}

.card-body { padding: 2.75rem 2.5rem !important; }

/* Brand mark above the title */
.card-body h3 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text);
    margin-bottom: 1.75rem !important;
    position: relative;
    padding-top: 64px;
}
.card-body h3::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 48px; height: 48px;
    border-radius: 12px;
    background: var(--accent);
    box-shadow: 0 6px 16px rgba(47,111,237,.35);
}
/* white globe glyph centered on the blue square */
.card-body h3::after {
    content: '';
    position: absolute;
    top: 11px; left: 50%;
    transform: translateX(-50%);
    width: 26px; height: 26px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6'><circle cx='12' cy='12' r='9'/><path d='M3.6 9h16.8M3.6 15h16.8M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18'/></svg>") center / contain no-repeat;
}

.form-control {
    height: auto;
    padding: 12px 14px;
    font-size: 14px;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border2);
    border-radius: 10px;
    transition: border-color .15s, box-shadow .15s;
}
.form-control::placeholder { color: var(--text3); }
.form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(47,111,237,.15);
    outline: none;
}

.btn {
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    background: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    color: #fff !important;
    transition: background .15s, box-shadow .15s;
}
.btn:hover {
    background: #2560d4 !important;
    border-color: #2560d4 !important;
    box-shadow: 0 6px 16px rgba(47,111,237,.30);
}

.alert-danger {
    background: rgba(220,58,86,.10);
    border: 1px solid rgba(220,58,86,.35);
    color: var(--red);
    border-radius: 10px;
    font-size: 13px;
}