.app-loading{position:fixed;inset:0;z-index:20000;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f7f8f5;color:#1c2119;padding:28px;text-align:center;font-family:'DM Sans',sans-serif}
.loading-wordmark{font-size:32px;letter-spacing:-1.5px;font-weight:800;color:#1b5e20;border-bottom:2px solid #79a96a;padding-bottom:4px}
.app-loading p{font-size:16px;color:#646b60;max-width:32ch;line-height:1.6}
#app-loading-recovery button{border:0;border-radius:10px;background:#1b5e20;color:white;font:inherit;padding:12px 20px;cursor:pointer}
#app-loading-recovery a{display:block;color:#1b5e20;margin-top:20px}
.no-script{position:fixed;inset:0;z-index:20001;background:#f7f8f5;display:grid;place-content:center;gap:20px;padding:28px;font:18px/1.6 sans-serif}
.sync-status{position:fixed;right:20px;bottom:18px;z-index:900;max-width:calc(100vw - 40px);border:1px solid #e3e6df;border-radius:12px;background:#fff;color:#646b60;padding:9px 14px;font:13px/1.5 'DM Sans',sans-serif;box-shadow:0 2px 12px #1c211908;display:flex;align-items:center;gap:10px}
.sync-status[hidden]{display:none}
.sync-status[data-state="error"],.sync-status[data-state="offline"]{color:#8a5a3b}
.sync-status button{font:inherit;font-weight:700;color:#1b5e20;border:0;background:none;cursor:pointer;min-height:32px;padding:2px 4px}
.sync-status button:focus-visible{outline:2px solid #1b5e20;outline-offset:3px}
.sync-status{flex-wrap:wrap}
.sync-status>span{flex:1 1 240px;min-width:0;overflow-wrap:anywhere}
.sync-comparison{margin:18px 0;max-height:32vh;overflow:auto;border:1px solid var(--border,#e3e6df);border-radius:12px;padding:0 14px}
.sync-comparison section{padding:12px 0;overflow-wrap:anywhere}
.sync-comparison section+section{border-top:1px solid var(--border,#e3e6df)}
.sync-comparison h3{margin:0 0 8px;font-size:15px}
.sync-comparison p{margin:6px 0;font-size:14px;line-height:1.5}
.has-sample-banner .sync-status{bottom:72px}
@media(max-width:700px){.sync-status{bottom:calc(78px + env(safe-area-inset-bottom));right:12px;max-width:calc(100vw - 24px)}.has-sample-banner .sync-status{bottom:calc(128px + env(safe-area-inset-bottom))}}