/*
 * Chrome identity bar and the pre-authentication login panel (§21.1, §24.1).
 * Tokens come from base.css; no colour is written in hard here beyond those tokens.
 */

.app-identity {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

.app-identity-name { font-size: 14px; font-weight: 600; color: var(--im-ink); }

.app-identity-form { margin: 0; }

.app-identity-link {
    border: none;
    background: transparent;
    color: var(--im-ink-soft);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}

.app-identity-link:hover { color: var(--im-red); }

/* ---------- Login panel ---------- */

.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--im-bg);
}

.login-panel {
    width: 360px;
    max-width: 92vw;
    padding: 32px 28px;
    background: var(--im-surface);
    border: 1px solid var(--im-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}

.login-form { display: flex; flex-direction: column; gap: 16px; }

.login-submit { margin-top: 4px; }