.offline-status { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 18px; color:#20523e; background:#eff8f2; border-bottom:1px solid #c9ddd0; font:500 12px/1.4 Arial,sans-serif; letter-spacing:0; }
.offline-status[hidden], .offline-status button[hidden] { display:none; }
.offline-status[data-mode="pending"] { color:#654b0a; background:#fff8de; border-color:#e6d69a; }
.offline-status[data-mode="error"] { color:#7e2828; background:#fff0ee; border-color:#e7bdb8; }
.offline-status [data-status] { min-width:0; overflow-wrap:anywhere; }
.offline-actions { display:flex; flex-wrap:wrap; gap:5px; justify-content:flex-end; }
.offline-status button, .offline-dialog button { min-height:34px; padding:6px 10px; border:1px solid #bad1dc; border-radius:6px; color:#124b65; background:#fff; font:600 12px/1.3 Arial,sans-serif; cursor:pointer; }
.offline-status button:disabled, .offline-dialog button:disabled { opacity:.5; cursor:wait; }
.offline-dialog { width:min(94%,520px); max-height:85vh; margin:auto; padding:22px; border:1px solid #bad1dc; border-radius:8px; background:#fff; color:#17384b; font:14px/1.5 Arial,sans-serif; box-shadow:0 20px 70px #08203340; }
.offline-dialog::backdrop { background:#08203370; }
.offline-dialog-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 0 16px; }
.offline-dialog-head h2 { margin:0; font-size:18px; }
.offline-dialog-head button { width:34px; padding:0; font-size:24px; }
.offline-dialog [data-content] { display:grid; gap:14px; }
.offline-dialog p { margin:0; overflow-wrap:anywhere; }
.offline-dialog label { display:grid; gap:6px; text-transform:none; font-size:14px; letter-spacing:0; }
.offline-dialog input { width:100%; min-height:44px; padding:9px; border:1px solid #bad1dc; border-radius:6px; color:#17384b; background:#fff; font:16px Arial,sans-serif; }
.offline-dialog [data-message] { margin-top:12px; color:#922b2b; }
.offline-operation { border-bottom:1px solid #d6e1e7; padding-bottom:14px; }
.offline-operation button { margin:8px 8px 0 0; }
.receipt-offline-notice, .offline-report-notice { padding:2mm 0; color:#000; font:600 10px/1.3 Arial,sans-serif; text-align:center; overflow-wrap:anywhere; }
@media (max-width:600px) { .offline-status { padding:8px 12px; flex-wrap:wrap; } .offline-actions { justify-content:flex-start; } }
@media print { .offline-status,.offline-dialog { display:none!important; } .offline-report-notice,.receipt-offline-notice { display:block!important; color:#000!important; } }