.offline-panel { margin-bottom: 16px; }
.backup-status-pill { display:inline-flex;align-items:center;gap:8px;min-height:38px;border:1px solid rgba(16,135,107,.2);border-radius:99px;padding:8px 14px;color:#0a7d5e;background:linear-gradient(135deg,#e8fbf5,#effcf9);box-shadow:0 7px 20px rgba(12,121,91,.09),inset 0 1px rgba(255,255,255,.9);font-size:10px;font-weight:830;white-space:nowrap;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.backup-status-pill:hover{transform:translateY(-1px);box-shadow:0 11px 24px rgba(12,121,91,.14),inset 0 1px rgba(255,255,255,.95)}
.backup-status-pill>i{width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:#84969c;box-shadow:0 0 0 5px rgba(132,150,156,.09)}
.backup-status-shield{font-size:17px;line-height:1;filter:saturate(.86)}
.backup-status-pill.ready{border-color:rgba(0,183,125,.22);color:#007d5c;background:linear-gradient(135deg,#e4faf3,#f2fdfa)}
.backup-status-pill.ready>i{background:#00b97d;box-shadow:0 0 0 5px rgba(0,185,125,.09);animation:backup-status-pulse 1.9s ease-in-out infinite}
.backup-status-pill.warning{border-color:rgba(211,144,36,.26);color:#9c681c;background:#fff8e9}
.backup-status-pill.warning>i{background:#d6942e;box-shadow:0 0 0 5px rgba(214,148,46,.1)}
.backup-status-pill.inactive{border-color:#dce8e7;color:#667d86;background:#f7faf9}
.cloud-backup-card.is-highlighted{animation:cloud-card-highlight 1.5s ease both}
@keyframes backup-status-pulse{0%,100%{box-shadow:0 0 0 4px rgba(0,185,125,.08)}50%{box-shadow:0 0 0 8px rgba(0,185,125,0)}}
@keyframes cloud-card-highlight{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 4px rgba(20,177,156,.14),0 18px 42px rgba(19,117,125,.13)}}
.offline-status { display: inline-flex; align-items: center; gap: 7px; border-radius: 99px; padding: 7px 10px; color: #117e73; background: #e7f8f5; font-size: 9px; font-weight: 800; }
.offline-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(17,126,115,.12); }
.offline-grid { display: grid; grid-template-columns: minmax(280px,.8fr) minmax(320px,1.2fr); gap: 18px; margin-top: 19px; }
.offline-card { border: 1px solid #e1ecea; border-radius: 16px; padding: 18px; background: #fbfefd; }
.offline-card h3 { margin: 0 0 5px; color: #173b50; font-size: 14px; }
.offline-card > p { margin: 0 0 15px; color: #718892; font-size: 9px; line-height: 1.5; }
.offline-backup-card { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(260px,1fr) auto; align-items: center; gap: 16px; background: linear-gradient(120deg,#f7fcff,#f4fbf9); }
.offline-backup-copy p { max-width: 720px; margin: 0; color: #718892; font-size: 9px; line-height: 1.55; }
.offline-backup-card .offline-actions { margin-top: 0; }
.cloud-backup-card { grid-column: 1 / -1; padding: 22px; overflow: hidden; background: radial-gradient(circle at 100% 0,rgba(67,190,230,.13),transparent 34%),linear-gradient(135deg,#f7fcff,#f4fbfd 58%,#f5fbf9); }
.cloud-backup-heading { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 14px; margin-bottom: 19px; }
.cloud-backup-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 15px; color: #fff; background: linear-gradient(145deg,#0d73b5,#16aed1); box-shadow: 0 12px 28px rgba(13,115,181,.2); font-size: 22px; }
.cloud-backup-heading .eyebrow { margin: 0 0 4px; color: #1689bc; font-size: 7px; }
.cloud-backup-heading h3 { margin: 0; font-size: 17px; letter-spacing: -.35px; }
.cloud-backup-heading p:not(.eyebrow) { max-width: 690px; margin: 5px 0 0; color: #6b838e; font-size: 9px; line-height: 1.5; }
.cloud-backup-state { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; border-radius: 99px; padding: 8px 11px; font-size: 8px; font-weight: 900; }
.cloud-backup-state i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px currentColor; opacity: .65; }
.cloud-backup-state.inactive { color: #73858d; background: #eaf0f2; }
.cloud-backup-state.ready { color: #0b8c77; background: #ddf7ef; }
.cloud-backup-fields { display: grid; grid-template-columns: .85fr 1.15fr 1fr; gap: 11px; }
.cloud-backup-fields label { display: grid; gap: 6px; color: #647c85; font-size: 8px; font-weight: 800; letter-spacing: .35px; text-transform: uppercase; }
.cloud-backup-fields input,.cloud-backup-fields select { width: 100%; min-width: 0; border: 1px solid #d7e7e8; border-radius: 10px; padding: 10px 11px; outline: 0; color: #21475d; background: rgba(255,255,255,.92); font: inherit; font-size: 10px; text-transform: none; }
.cloud-backup-fields input:focus,.cloud-backup-fields select:focus { border-color: #1599c5; box-shadow: 0 0 0 3px rgba(21,153,197,.11); }
.cloud-backup-fields .cloud-secret-field { grid-column: span 2; }
.cloud-backup-fields small { color: #84979e; font-size: 7px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.cloud-backup-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.cloud-backup-summary div { border: 1px solid #deecee; border-radius: 11px; padding: 10px 12px; background: rgba(255,255,255,.72); }
.cloud-backup-summary span,.cloud-backup-summary strong { display: block; }
.cloud-backup-summary span { color: #80939b; font-size: 7px; }
.cloud-backup-summary strong { margin-top: 4px; color: #21495e; font-size: 10px; }
.cloud-backup-actions { align-items: center; }
.cloud-disable-button { margin-left: auto; border: 0; padding: 9px; color: #a34b51; background: transparent; cursor: pointer; font-size: 9px; font-weight: 800; }
.cloud-security-note { display: flex; align-items: center; gap: 7px; margin: 11px 0 0; color: #557782; font-size: 8px; }
.cloud-security-note span { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; color: #0f8876; background: #dbf5ee; font-weight: 900; }
.offline-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.offline-fields label { display: grid; gap: 6px; color: #647c85; font-size: 8px; font-weight: 800; letter-spacing: .35px; text-transform: uppercase; }
.offline-fields label:first-child { grid-column: 1 / -1; }
.offline-fields input { width: 100%; border: 1px solid #dce8e6; border-radius: 10px; padding: 10px 11px; outline: 0; color: #21475d; background: #fff; font: inherit; font-size: 10px; text-transform: none; }
.offline-fields input:focus { border-color: #16a99f; box-shadow: 0 0 0 3px rgba(22,169,159,.11); }
.offline-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.offline-primary,.offline-secondary,.offline-file-label { display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; padding: 10px 12px; cursor: pointer; font-size: 10px; font-weight: 800; }
.offline-primary { border: 0; color: #fff; background: linear-gradient(100deg,#118b83,#20bcae); }
.offline-secondary,.offline-file-label { border: 1px solid #d8e7e4; color: #326b70; background: #fff; }
.cloud-mac-download { text-decoration: none; }
.offline-file-label input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.offline-feedback { min-height: 16px; margin: 10px 0 0; color: #467b78; font-size: 9px; line-height: 1.45; }
.offline-feedback.error { color: #b9484d; font-weight: 700; }
.offline-feedback.success { color: #117e73; font-weight: 700; }
.offline-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-bottom: 14px; }
.offline-summary div { border: 1px solid #e5efed; border-radius: 12px; padding: 11px; background: #fff; }
.offline-summary span,.offline-summary strong { display: block; }
.offline-summary span { color: #7b9096; font-size: 8px; }
.offline-summary strong { margin-top: 5px; color: #194657; font-size: 14px; letter-spacing: -.4px; }
.offline-procedure { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: exchange-step; }
.offline-procedure li { display: flex; align-items: flex-start; gap: 9px; color: #617b84; font-size: 9px; line-height: 1.45; counter-increment: exchange-step; }
.offline-procedure li::before { display: grid; flex: 0 0 auto; width: 20px; height: 20px; place-items: center; border-radius: 7px; color: #117e73; background: #e5f7f3; font-size: 8px; font-weight: 900; content: counter(exchange-step); }
body.offline-mode .secure-login { display: none !important; }
body.offline-mode .demo-dot { background: #4bd3c4; box-shadow: 0 0 0 4px rgba(75,211,196,.12); }
.android-station-link { display: none; }
.android-pad-app .android-station-link { display: flex; }
.pad-update-dialog h2 { margin: 0; max-width: 390px; font-size: 22px; letter-spacing: -.8px; }
.pad-update-dialog > p:not(.eyebrow) { color: #6d818a; font-size: 11px; }
@media(max-width:920px){.offline-grid{grid-template-columns:1fr}.offline-summary{grid-template-columns:repeat(3,1fr)}.offline-backup-card{grid-template-columns:1fr}.cloud-backup-fields{grid-template-columns:1fr 1fr}.cloud-backup-fields .cloud-secret-field{grid-column:span 1}.admin-header{align-items:flex-start}.header-actions{flex-wrap:wrap;justify-content:flex-end}.backup-status-pill{order:3}}
@media(max-width:540px){.offline-fields,.offline-summary,.cloud-backup-fields,.cloud-backup-summary{grid-template-columns:1fr}.offline-fields label:first-child{grid-column:auto}.cloud-backup-heading{grid-template-columns:auto 1fr}.cloud-backup-state{grid-column:1/-1;justify-self:start}.offline-actions{flex-direction:column}.offline-primary,.offline-secondary,.offline-file-label{width:100%}.cloud-disable-button{margin-left:0}.cloud-backup-fields .cloud-secret-field{grid-column:auto}.header-actions{display:grid;justify-items:end}.backup-status-pill{grid-column:1/-1;order:0;max-width:100%;padding-inline:11px;font-size:9px}}