.backup-banner { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 13px 15px; margin: -20px 0 36px; border: 1px solid #3f3420; border-radius: 14px; background: linear-gradient(90deg, rgba(255,203,105,.09), rgba(255,255,255,.015)); }
.login-view .lead { max-width: 680px; }
.login-view .message { max-width: 680px; }
.backup-banner strong, .backup-banner small { display: block; }
.backup-banner strong { font-size: 13px; }
.backup-banner small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.backup-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--amber); color: var(--amber); box-shadow: 0 0 16px currentColor; animation: backupPulse 1.8s ease-in-out infinite; }
.link-button { display: inline-flex; align-items: center; text-decoration: none; }
.metrics strong#modeValue { font-size: clamp(17px, 2.4vw, 28px); }
.backup-state-panel { min-height: 100%; }
.status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.status-grid > div { min-width: 0; min-height: 104px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(7,7,7,.7); }
.status-grid span, .status-grid small { display: block; color: var(--muted); font-size: 10px; }
.status-grid strong { display: block; margin: 9px 0 5px; font-size: 17px; }
.status-grid code { display: block; margin-top: 10px; color: #ccc; font-size: 10px; line-height: 1.55; overflow-wrap: anywhere; }
.locked-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.locked-feature-grid article { padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.locked-feature-grid strong, .locked-feature-grid span { display: block; }
.locked-feature-grid strong { font-size: 12px; }
.locked-feature-grid span { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.locked-feature-grid .available { color: var(--green); }
.mode-armed .backup-banner { border-color: #31513e; background: linear-gradient(90deg, rgba(115,242,167,.11), rgba(255,255,255,.015)); }
.mode-armed .backup-pulse { background: var(--green); color: var(--green); }
.mode-armed #modeBadge, .mode-armed #writeBadge { color: var(--green); border-color: #31513e; }
.mode-error .backup-pulse { background: var(--red); color: var(--red); }
.mode-error .backup-banner { border-color: #5c3030; }
@keyframes backupPulse { 0%,100% { opacity: .5; transform: scale(.86); } 50% { opacity: 1; transform: scale(1.08); } }
@media (max-width: 650px) { .backup-banner { grid-template-columns: auto 1fr; } .backup-banner .secure-badge { grid-column: 2; justify-self: start; } .status-grid, .locked-feature-grid { grid-template-columns: 1fr; } }