/* ── Appex CUUSD — Login Page ───────────────────────────────── */

/* ── Reset & base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Instrument Sans', sans-serif;
    background: #0c0e14;
    color: #e4e6f0;
}

/* ── Design tokens ──────────────────────────────────────────── */
:root {
    --bg:       #0c0e14;
    --surface:  #13161f;
    --surface2: #1a1e2b;
    --border2:  rgba(255,255,255,0.12);
    --text:     #e4e6f0;
    --muted:    #6b7090;
    --amber:    #C8902A;
    --radius:    12px;
    --radius-sm: 8px;
    --display: 'Syne', sans-serif;
    --body:    'Instrument Sans', sans-serif;
}

/* ── Page layout ────────────────────────────────────────────── */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

.login-page::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(200,144,42,0.1), transparent);
    pointer-events: none;
}

.login-wrap { width: 100%; max-width: 440px; position: relative; z-index: 1; }

/* ── Logo ───────────────────────────────────────────────────── */
.login-logo { text-align: center; margin-bottom: 36px; }
.login-logo p { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* ── Login card ─────────────────────────────────────────────── */
.login-card {
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: var(--radius);
    padding: 28px;
}

.login-card h3      { font-family: var(--display); font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.login-card > p     { font-size: 13px; color: var(--muted); margin-bottom: 20px; }

/* ── Form ───────────────────────────────────────────────────── */
.form-group { margin-bottom: 14px; }

.form-group label {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 6px;
    font-weight: 500;
    letter-spacing: .3px;
}

.form-group input {
    width: 100%;
    padding: 10px 14px;
    background: var(--surface2);
    border: 1px solid var(--border2);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    font-family: var(--body);
    outline: none;
    transition: border .15s;
}

.form-group input:focus { border-color: var(--amber); }

.brand-stripe {
    height: 2px;
    background: linear-gradient(90deg, #B85C7A, #C8902A, #7A9060);
    border-radius: 2px;
    margin-bottom: 16px;
    opacity: .7;
}

/* ── Button ─────────────────────────────────────────────────── */
.btn-login {
    width: 100%;
    padding: 12px;
    border-radius: var(--radius-sm);
    background: var(--amber);
    border: none;
    color: white;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--display);
    cursor: pointer;
    letter-spacing: .3px;
    transition: all .15s;
}

.btn-login:hover { background: #a87420; }

/* ── Links ───────────────────────────────────────────────────── */
a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Code ────────────────────────────────────────────────────── */
code {
    display: block;
    background: var(--surface2);
    border: 1px solid var(--border2);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    letter-spacing: 0.15em;
    font-size: 0.85rem;
    color: var(--text);
    word-break: break-all;
    margin-bottom: 1rem;
}

/* ── Alert box ───────────────────────────────────────────────── */
.alert-error {
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.4);
    border-radius: var(--radius-sm);
    color: #f87171;
    font-size: 13px;
    padding: 10px 14px;
    margin-bottom: 14px;
}

/* ── Validation ─────────────────────────────────────────────── */
.text-danger { color: #f87171; font-size: 12px; margin-top: 6px; display: block; }

a.forgot-password {
    float: right;
    font-family: var(--body);
    font-size: 13px;
    color: var(--muted);
    text-decoration: none;
}
a.forgot-password:hover {
    color: var(--amber);
}