/* ==================== LOGIN SCREEN ==================== */
/* Colors follow the Lexi design tokens shared with lexi-frontend
   (tailwind brand/ink) and lexi-mobile (src/design/tokens.ts):
   navy #0F172A actions, #F4F4F4 canvas, white cards, #E1E1E1 hairlines. */

/* Neutral page canvas behind the welcome + API key steps (hides the watermark) */
#apiKeyScreen {
    background: #F4F4F4;
}

/* Login card */
.login-container {
    background: #FFFFFF;
    border: 1px solid #E1E1E1;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

/* Input fields */
.input-field {
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input-field:focus {
    outline: none;
    border-color: #64748B;
    box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.15);
}

.input-field:disabled {
    background: #F1F5F9;
    cursor: not-allowed;
}

/* Primary button — Lexi navy */
.login-btn {
    background: #0F172A;
    border-radius: 12px;
    transition: background-color 0.15s ease;
}

.login-btn:hover:not(:disabled) {
    background: #1E293B;
}

.login-btn:focus-visible {
    outline: 2px solid #64748B;
    outline-offset: 2px;
}

.login-btn:disabled {
    background: #94A3B8;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Feature icon chips on the welcome step */
.lx-icon-chip {
    background: #F1F5F9;
    color: #0F172A;
}

/* Account info box on the API key step */
.lx-info {
    background: #F4F4F4;
    border: 1px solid #E1E1E1;
}

/* Inline links — navy, underlined, no bright blue */
.lx-link {
    color: #0F172A;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: #94A3B8;
}

.lx-link:hover {
    text-decoration-color: #0F172A;
}