.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: linear-gradient(145deg, #eef3f7, #f8fafc 55%, #e7eef4);
}

.auth-card {
    width: min(430px, 100%);
    display: grid;
    gap: 24px;
    padding: 34px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-surface);
    box-shadow: 0 24px 70px rgba(15, 31, 48, 0.12);
}

.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-brand > div { display: grid; gap: 2px; }
.auth-brand strong { color: var(--color-primary); font-size: 18px; }
.auth-brand span:last-child { color: var(--color-text-muted); font-size: 12px; }
.auth-brand .brand-mark { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.auth-card h1 { margin: 4px 0 7px; font-size: 30px; }
.auth-card p { margin: 0; color: var(--color-text-muted); }
.auth-card > small { color: var(--color-text-muted); text-align: center; }
.auth-link { color: var(--color-primary); font-size: 13px; font-weight: 650; text-align: center; }
.auth-form { display: grid; gap: 16px; }
.auth-form label { display: grid; gap: 7px; font-size: 13px; font-weight: 700; }
.auth-form label small { color: var(--color-text-muted); font-weight: 400; }
.auth-form input { width: 100%; }
.auth-form .button { min-height: 44px; margin-top: 4px; }
.auth-notice, .auth-error { padding: 12px 14px; border-radius: var(--radius-small); font-size: 13px; line-height: 1.5; }
.auth-notice { border: 1px solid #c7d5df; background: #eef5f8; color: #29495d; }
.auth-error { border: 1px solid #d7a3a6; background: #fff1f1; color: #842f34; }
.supplier-share-card { width: min(680px, 100%); }
.supplier-share-files { display: grid; gap: 10px; }
.supplier-share-files a { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: 10px; color: var(--color-text); text-decoration: none; }
.supplier-share-files a:hover { border-color: var(--color-primary); background: var(--color-surface-muted); }
.supplier-share-files a > span { display: grid; gap: 4px; min-width: 0; }
.supplier-share-files strong { overflow-wrap: anywhere; }
.supplier-share-files small { color: var(--color-text-muted); }
.supplier-share-files b { color: var(--color-primary); font-size: 12px; }

@media (max-width: 520px) {
    .auth-card { padding: 26px 22px; }
}