/* Offline controls follow the deployed exhibition palette and composition. */
#offline-toggle { position: fixed; z-index: 40; top: var(--pad); right: calc(var(--pad) + 64px); width: auto; min-width: 106px; padding: 0 16px; display: flex; gap: 9px; font-size: 12px; letter-spacing: .06em; }
#offline-toggle svg { width: 18px; height: 18px; }
#offline-panel { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; background: #17130fc9; }
.offline-sheet { position: relative; width: min(480px,100%); max-height: calc(100dvh - 48px); overflow-y: auto; padding: 32px; border: 1px solid #eac49a40; border-radius: 18px; background: #33281e; color: #fff0d7; box-shadow: 0 24px 80px #0005; }
.offline-sheet h2 { margin: 0 48px 18px 0; font-size: 24px; font-weight: 400; letter-spacing: .12em; }
.offline-sheet p { margin: 0 0 16px; font-size: 14px; line-height: 1.8; }
#offline-close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; }
.offline-help { color: #e0c5a2; }
.offline-help small { display: block; margin-top: 8px; font-size: 12px; line-height: 1.7; }
.offline-meter { margin: 24px 0; }
#offline-progress { display: block; width: 100%; height: 5px; border: 0; border-radius: 3px; overflow: hidden; accent-color: #eac49a; background: #fff1; }
#offline-progress::-webkit-progress-bar { background: #fff1; }
#offline-progress::-webkit-progress-value { background: #eac49a; }
#offline-progress::-moz-progress-bar { background: #eac49a; }
#offline-count { display: block; margin-bottom: 10px; font-size: 14px; font-variant-numeric: tabular-nums; }
#offline-status { min-height: 26px; margin-top: 12px; margin-bottom: 0; color: #e0c5a2; font-size: 12px; overflow-wrap: anywhere; }
.offline-actions { display: flex; gap: 12px; }
.offline-actions button { min-height: 46px; padding: 0 18px; border-radius: 8px; border: 1px solid #eac49a55; font-size: 14px; }
#offline-save { flex: 1; color: #33281e; background: #eac49a; }
#offline-clear { display: block; margin: 20px auto 0; min-height: 36px; padding: 0 10px; color: #cdb08d; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
@media(max-width:767px) { #offline-toggle { min-width: 48px; width: 48px; padding: 0; justify-content: center; } #offline-toggle > span { display: none; } .offline-sheet { padding: 28px 24px; } }