:root{--bg:#f7f7fb;--card:#fff;--text:#20212a;--muted:#6d7180;--accent:#d81b60;--line:#e7e8ee}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:Arial,"Noto Sans Sinhala",sans-serif}
.shell{position:fixed;inset:0;background:var(--bg)}.app-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff;opacity:0;transition:opacity .18s ease}.app-frame.ready{opacity:1}
.loading{position:absolute;inset:0;display:grid;place-items:center;padding:24px;background:linear-gradient(180deg,#fafafe,#f5f6fa);z-index:2}.loading.hidden{display:none}
.loading-card{width:min(420px,100%);background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px;text-align:center;box-shadow:0 16px 45px rgba(0,0,0,.06)}
.mark{width:54px;height:54px;margin:0 auto 14px;border-radius:16px;display:grid;place-items:center;background:#fff0f5;color:var(--accent);font-weight:900;font-size:22px}
.loading h1{font-size:21px;margin:0 0 7px;color:var(--text)}.loading p{margin:0;color:var(--muted);line-height:1.55;font-size:13px}
.spinner{width:28px;height:28px;border:3px solid #eceef3;border-top-color:var(--accent);border-radius:50%;margin:18px auto 0;animation:spin .75s linear infinite}
.error-box{margin-top:16px;padding:12px;border-radius:12px;background:#fff0f1;color:#9d2730;font-size:13px;line-height:1.5;text-align:left}.hidden{display:none!important}
.fallback-link{display:inline-block;margin-top:12px;color:var(--accent);font-weight:700;text-decoration:none}@keyframes spin{to{transform:rotate(360deg)}}