*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,sans-serif;background:#f3f6fb;color:#0b1d3a}
body{height:100dvh;display:flex;flex-direction:column}.topbar{height:68px;flex:0 0 68px;background:linear-gradient(135deg,#0b1d3a,#1e3c72);color:#fff;display:flex;align-items:center;gap:12px;padding:8px 14px;box-shadow:0 3px 12px #0002}
.brand-icon{width:46px;height:46px;border-radius:12px;border:2px solid #ffd700}.topbar strong{display:block;font-size:17px;letter-spacing:1.2px}.topbar span{display:block;font-size:11px;color:#e8edf7;margin-top:3px}
.install{margin-left:auto;border:0;border-radius:9px;background:#ffd700;color:#0b1d3a;font-weight:700;padding:11px 13px}.hidden{display:none!important}
main{position:relative;flex:1;min-height:0;background:#fff}iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#fff;z-index:1;color:#1e3c72;font-weight:700}
.spinner{width:42px;height:42px;border:5px solid #e7edf6;border-top-color:#ffd700;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.notice,.offline{max-width:560px;margin:30px auto;padding:22px;border:1px solid #d6dfec;border-radius:16px;background:#fff;box-shadow:0 8px 24px #0b1d3a12;line-height:1.5}
.notice h1,.offline h2{margin-top:0}.notice code{overflow-wrap:anywhere}.offline{position:absolute;inset:20px auto auto;z-index:2;text-align:center}
.offline button{background:#1e3c72;color:#fff;border:0;border-radius:9px;padding:12px 18px;font-weight:700}
footer{height:30px;flex:0 0 30px;background:#0b1d3a;color:#dce5f4;text-align:center;padding:8px;font-size:10px}
@media(min-width:900px){.topbar{padding-inline:24px}main{max-width:1200px;width:100%;margin:0 auto;box-shadow:0 0 20px #0b1d3a12}body{background:#e9eef6}}