:root { color-scheme:light; --brand:#1976bd; --ink:#142239; --install-height:48px; }
* { box-sizing:border-box; }
html,body { margin:0; width:100%; height:100%; height:100dvh; background:#f5f7fb; color:var(--ink); font-family:system-ui,-apple-system,sans-serif; }
body { overflow:hidden; }
a { color:#1265a4; text-underline-offset:3px; }
button,.button { font:inherit; cursor:pointer; color:#fff; background:var(--brand); border:0; border-radius:12px; padding:12px 18px; min-height:44px; }
[hidden] { display:none!important; }
#install-bar { position:fixed; z-index:5; top:env(safe-area-inset-top,0px); left:env(safe-area-inset-left,0px); right:env(safe-area-inset-right,0px); height:var(--install-height); padding:0 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; background:white; border-bottom:1px solid #e2e9f0; font-size:13px; }
#install-bar span { font-weight:700; }
#install-bar a { padding:10px 0; }
#flutter-host { position:fixed; top:calc(env(safe-area-inset-top,0px) + var(--install-height)); right:env(safe-area-inset-right,0px); bottom:env(safe-area-inset-bottom,0px); left:env(safe-area-inset-left,0px); overflow:hidden; }
body.standalone { --install-height:0px; }
body.standalone #install-bar { display:none; }
#loading { position:fixed; z-index:4; inset:0; padding:calc(32px + env(safe-area-inset-top,0px)) 22px calc(24px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; text-align:center; background:#f5f7fb; }
#loading img { object-fit:contain; border-radius:30px; }
#loading h1 { font-size:clamp(22px,6vw,30px); margin:0; }
#loading p { margin:0; line-height:1.65; max-width:440px; }
#loading a { margin-top:8px; }
.spinner { width:30px; height:30px; border:3px solid #d6e8f6; border-top-color:var(--brand); border-radius:50%; animation:spin 1s linear infinite; margin:8px; }
@keyframes spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .spinner { animation:none; } }
#update-notice { position:fixed; z-index:20; bottom:calc(16px + env(safe-area-inset-bottom,0px)); left:max(12px,env(safe-area-inset-left,0px)); right:max(12px,env(safe-area-inset-right,0px)); max-width:620px; margin:auto; padding:16px; background:#fff; border:1px solid #bbd6ec; border-radius:16px; box-shadow:0 8px 30px #14223924; line-height:1.6; }
#update-notice button { display:block; margin-top:10px; }
.guide { overflow:auto; padding:calc(26px + env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) calc(30px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px)); }
.guide main { max-width:650px; margin:0 auto; }
.guide header { text-align:center; }
.guide img { width:120px; height:120px; border-radius:26px; }
.guide h1 { font-size:28px; }
.guide p,.guide li { line-height:1.85; }
.guide li { margin-bottom:12px; }
.guide .button { display:inline-block; text-decoration:none; }
.guide .card { background:white; border:1px solid #e2e9f0; border-radius:20px; padding:22px; margin:20px 0; }