.mobile-root { --mobile-bg:#f8fafc; --mobile-surface:#fff; --mobile-text:#0f172a; --mobile-muted:#64748b; --mobile-border:#e2e8f0; --mobile-primary:#2563eb; --mobile-danger:#b91c1c; }
.mobile-root, .mobile-root * { box-sizing:border-box; }
body.mobile-body { margin:0; background:#f8fafc; color:#0f172a; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; }
body.mobile-body .app-shell[hidden] { display:none !important; }
.mobile-root { min-height:100dvh; padding:env(safe-area-inset-top) 1rem calc(4.75rem + env(safe-area-inset-bottom)); }
.mobile-app { width:100%; max-width:48rem; margin:0 auto; }
.mobile-card { background:var(--mobile-surface); border:1px solid var(--mobile-border); border-radius:.75rem; padding:1rem; }
.mobile-grid { display:grid; gap:.75rem; grid-template-columns:repeat(2,minmax(0,1fr)); }
.mobile-list { display:grid; gap:.625rem; margin:0; padding:0; list-style:none; }
.mobile-header { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:1rem 0 .5rem; }
.mobile-eyebrow { margin:0; color:var(--mobile-muted); font-size:.72rem; letter-spacing:.08em; }
.mobile-header h1 { margin:.2rem 0 0; font-size:1.35rem; }
.mobile-refresh,.mobile-search button,.mobile-login { border:0; border-radius:.5rem; background:var(--mobile-primary); color:#fff; padding:.55rem .8rem; font:inherit; cursor:pointer; text-decoration:none; }
.mobile-search { display:flex; gap:.5rem; margin:.5rem 0 1rem; }
.mobile-search input { flex:1; min-width:0; border:1px solid var(--mobile-border); border-radius:.5rem; padding:.65rem .75rem; font:inherit; background:#fff; }
.mobile-updated { display:flex; justify-content:space-between; align-items:center; gap:.5rem; color:var(--mobile-muted); font-size:.75rem; margin:0 0 .75rem; }
.mobile-updated button { border:0; background:none; color:var(--mobile-primary); padding:0; cursor:pointer; font:inherit; }
.mobile-summary { margin-bottom:1rem; }
.mobile-summary strong { display:block; margin-top:.35rem; font-size:1.15rem; }
.mobile-list-item { width:100%; display:flex; align-items:center; justify-content:space-between; gap:.75rem; border:1px solid var(--mobile-border); border-radius:.65rem; background:var(--mobile-surface); padding:.8rem; text-align:left; color:inherit; font:inherit; cursor:pointer; }
.mobile-list-item span { min-width:0; display:grid; gap:.25rem; }
.mobile-list-item strong,.mobile-list-item small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mobile-list-item small { color:var(--mobile-muted); }
.mobile-list-item b { white-space:nowrap; font-size:.9rem; }
.mobile-detail { display:grid; gap:.75rem; }
.mobile-back { justify-self:start; border:0; background:none; color:var(--mobile-primary); padding:0; font:inherit; cursor:pointer; }
.mobile-detail h2 { margin-top:0; font-size:1.15rem; }
.mobile-detail dl { display:flex; justify-content:space-between; gap:1rem; margin:.55rem 0; border-bottom:1px solid var(--mobile-border); padding-bottom:.45rem; }
.mobile-detail dt { color:var(--mobile-muted); word-break:break-all; }
.mobile-detail dd { margin:0; text-align:right; word-break:break-word; }
.mobile-login-handoff { margin:20vh auto 0; text-align:center; max-width:24rem; }
.mobile-login-handoff p { color:var(--mobile-muted); }
.mobile-muted { color:var(--mobile-muted); }
.mobile-loading,.mobile-empty,.mobile-error { padding:2.5rem 1rem; text-align:center; color:var(--mobile-muted); }
.mobile-error { color:var(--mobile-danger); }
.mobile-bottom-nav { position:fixed; z-index:10; right:0; bottom:0; left:0; display:grid; grid-template-columns:repeat(4,1fr); min-height:3.75rem; padding:.375rem .5rem calc(.375rem + env(safe-area-inset-bottom)); background:rgba(255,255,255,.96); border-top:1px solid var(--mobile-border); box-shadow:0 -2px 12px rgba(15,23,42,.06); backdrop-filter:blur(10px); }
.mobile-bottom-nav a,.mobile-bottom-nav button { border:0; background:transparent; color:var(--mobile-muted); text-decoration:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.125rem; font:inherit; font-size:.75rem; min-height:2.75rem; cursor:pointer; }
.mobile-bottom-nav [aria-current="page"] { color:var(--mobile-primary); font-weight:600; }
@media (min-width:640px) { .mobile-root { padding-right:1.5rem; padding-left:1.5rem; } .mobile-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }