[hidden] { display: none !important; }
.auth-panel { min-height: 100dvh; display: grid; place-items: center; padding: 28px 18px; background: radial-gradient(ellipse at 30% 0, #e2ebd8, #f5f5ed 60%); }
.auth-card { width: 100%; max-width: 460px; padding: 38px; border-radius: 26px; background: #fffefa; box-shadow: 0 16px 70px #284e4010; border: 1px solid #dce3d4; }
.auth-card h1 { font-size: clamp(26px, 5vw, 36px); line-height: 1.15; margin: 20px 0 14px; }
.auth-card > p { color: #6e7c63; line-height: 1.6; }
.auth-card form { margin-top: 28px; }
.auth-card .brand-mark { text-decoration: none; }
.sync-panel { position: sticky; top: 0; margin-left: 218px; min-height: 35px; padding: 8px 28px; background: #eaf0e3; color: #315b48; z-index: 25; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; }
.sync-panel[data-kind="offline"], .sync-panel[data-kind="error"], .sync-panel[data-kind="conflict"] { background: #fbedd3; color: #785f30; }
.sync-panel button { background: transparent; border: 0; text-decoration: underline; cursor: pointer; color: inherit; font: inherit; }
@media (max-width: 970px) { .sync-panel { margin-left: 0; } }
@media (max-width: 720px) { .sync-panel { padding: 8px 18px; font-size: 11px; } .sync-panel button { min-height: 36px; } .auth-card { padding: 28px 22px; } .auth-card input { font-size: 16px; } }
@media (min-width: 381px) and (max-width: 720px) { .anchor-item { display: block; } .anchor-item > span { display: block; margin-bottom: 6px; } .anchor-item strong { font-size: 14px; } }