/* Offline field workflow: conspicuous but calm, readable without technical terms. */
.offline-state-bar { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; min-height:47px; border:0; border-bottom:1px solid #a3cda7; background:#e9f6e8; color:#24553a; padding:9px 13px; cursor:pointer; font-weight:700; font-size:13px; line-height:1.35; }
.offline-state-bar strong { text-decoration:underline; font-size:12px; margin-left:3px; white-space:nowrap; }
.offline-guide { max-width:720px; margin:0 auto 22px; padding:27px 24px; border:1px solid #dcead9; background:#fff; border-radius:19px; box-shadow:0 8px 34px #204e2710; text-align:center; }
.offline-symbol { display:grid; place-items:center; margin:0 auto 13px; width:66px; height:66px; border-radius:19px; background:#eaf6e9; font-size:35px; }
.offline-guide h2 { font-size:23px; color:#285338; letter-spacing:-.3px; margin:5px 0 9px; }
.offline-guide>p { color:#657d69; font-size:14px; line-height:1.6; max-width:570px; margin:0 auto 19px; }
.offline-count { display:flex; flex-direction:column; gap:5px; align-items:center; background:#f1f8ef; border:1px solid #dce9d9; border-radius:14px; padding:17px; margin:22px 0; color:#22643e; }
.offline-count strong { font-size:36px; line-height:1.1; }
.offline-count span { font-size:13px; font-weight:700; }
.offline-buttons { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.offline-buttons .button { min-height:54px; width:100%; white-space:normal; font-size:14px; line-height:1.35; }
.offline-progress { margin:14px 0 0!important; background:#f7faf6; border:1px solid #e2ede1; border-radius:9px; padding:11px; font-size:12px!important; color:#477354!important; }
.offline-privacy { max-width:720px; margin:20px auto; color:#788877; font-size:12px; line-height:1.6; }
.pending-list { display:grid; gap:10px; margin-top:15px; }
.pending-entry { display:flex; gap:13px; align-items:center; background:#fbfcf8; border:1px solid #e3eae0; border-radius:11px; padding:13px; }
.pending-icon { font-size:23px; flex-shrink:0; }
.pending-entry strong { display:block; color:#214d33; font-size:14px; }
.pending-entry small { display:block; color:#7c8a7b; font-size:12px; line-height:1.45; margin-top:5px; overflow-wrap:anywhere; }
.pending-pip { display:inline-block; color:#9b650c; background:#fff2d6; border:1px solid #f5dfb0; border-radius:99px; font-size:11px; font-weight:750; padding:5px 9px; margin-left:7px; }
:where(.offline-state-bar,.offline-buttons .button):focus-visible { outline:3px solid #24744a; outline-offset:2px; }
@media(max-width:760px){
 .offline-state-bar { flex-wrap:wrap; justify-content:center; font-size:12px; padding:10px 8px; }
 .offline-guide { padding:19px 14px; border-radius:16px; }
 .offline-buttons { grid-template-columns:1fr; gap:9px; }
 .offline-buttons .button { min-height:54px; }
 .offline-guide h2 { font-size:21px; }
 .offline-privacy { padding:0 2px; }
 .pending-entry { padding:12px; }
}
@media print { .offline-state-bar,.offline-guide,.offline-privacy { display:none!important; } }

.offline-backup { max-width:720px; margin:14px auto; text-align:center; }
.offline-backup .button { white-space:normal; min-height:46px; font-size:12px; line-height:1.4; }
.offline-discard { margin-top:10px; display:inline-block; background:#fff6f4; border:1px solid #efcac5; color:#a1463d; padding:10px 12px; border-radius:9px; min-height:44px; font-size:12px; font-weight:800; text-align:left; cursor:pointer; }
.offline-discard:focus-visible { outline:3px solid #ba6558; outline-offset:2px; }
.offline-guide>.button { min-height:50px; margin-top:12px; }

.offline-home-link { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:51px; border:1px solid #cee4cb; border-radius:13px; padding:13px 16px; margin:-9px 0 24px; text-align:left; color:#276542; background:#f1f9ef; font-size:13px; font-weight:800; cursor:pointer; line-height:1.4; }
.offline-home-link>span { font-size:22px; }
.offline-home-link:hover { background:#e5f4e3; }
.offline-home-link:focus-visible { outline:3px solid #53a86c; outline-offset:2px; }
@media(max-width:760px){.offline-home-link { font-size:12px; min-height:55px; }}