:root{--offline-bg:#101823;--offline-line:#26364e;--offline-text:#e6eefb;--offline-muted:#9bb0c9;--offline-blue:#3d8aff;--offline-ready:#83dbac}
.offline-panel{border:1px solid var(--offline-line);background:var(--offline-bg);border-radius:12px;padding:20px 24px;margin:0 0 26px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;color:var(--offline-text)}
.offline-heading{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.offline-heading h2{font-size:17px;font-weight:550;margin:0}.offline-badge{font-size:11px;line-height:24px;color:var(--offline-muted);border:1px solid var(--offline-line);padding:0 9px;border-radius:20px}
.offline-panel p{color:var(--offline-muted);font-size:13px;line-height:1.7;margin:6px 0}.offline-panel .offline-meta{font-size:12px;margin:4px 0 0;min-height:20px;font-variant-numeric:tabular-nums}
.offline-actions{display:flex;align-items:center;gap:10px}.offline-panel button{font:inherit;font-size:13px;min-height:44px;border:1px solid var(--offline-line);border-radius:7px;padding:0 16px;background:transparent;color:var(--offline-text);cursor:pointer;white-space:nowrap}
.offline-panel button.primary{background:var(--offline-blue);border-color:var(--offline-blue);color:#fff}.offline-panel button:hover{filter:brightness(1.15)}.offline-panel button:focus-visible,.offline-panel summary:focus-visible{outline:2px solid var(--offline-text);outline-offset:4px}.offline-panel button:disabled{opacity:.5;cursor:default}
.offline-panel[data-state=ready] .offline-badge{color:var(--offline-ready);border-color:#325746}.offline-panel[data-state=error] .offline-badge{color:#ffca86}
.offline-panel progress{width:100%;height:8px;accent-color:var(--offline-blue);margin:12px 0 4px}
.offline-help{grid-column:1/-1;border-top:1px solid var(--offline-line);padding-top:12px;margin-top:4px;color:var(--offline-muted);font-size:12px;line-height:1.8}.offline-help summary{cursor:pointer;width:fit-content;min-height:26px}.offline-help p{font-size:12px;max-width:880px}
.offline-panel [hidden]{display:none!important}
@media(max-width:900px){.offline-panel{grid-template-columns:1fr;padding:18px}.offline-actions{flex-wrap:wrap;grid-row:2}.offline-panel button{flex:1}.offline-help{grid-row:3}}
@media(display-mode:standalone){body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}}