body { background: var(--bg); }
.shell { max-width: 760px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: .7rem;
  background: var(--navy); color: #fff; padding: calc(.65rem + env(safe-area-inset-top)) 1rem .65rem;
}
.topbar .title { flex: 1; min-width: 0; }
.topbar .title b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .title small { opacity: .75; }
.topbar .back { background: none; border: 0; color: #fff; font-size: 1.6rem; padding: 0 .3rem; cursor: pointer; }
.net { display: flex; align-items: center; gap: .35rem; font-size: .75rem; opacity: .9; white-space: nowrap; }
.net::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; }
.net.off::before { background: #f87171; }
.timer { font-variant-numeric: tabular-nums; background: rgba(255,255,255,.12); padding: .2em .6em; border-radius: 8px; font-size: .85rem; }
.content { flex: 1; padding: 1rem; }
.content.editor { padding-top: 0; padding-bottom: 0; }
.content.editor .pe-tabs { margin: 0 -1rem; padding: .6rem 1rem; }
.bottomnav {
  position: sticky; bottom: 0; z-index: 10; display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
}
.bottomnav a { display: grid; justify-items: center; gap: 2px; padding: .55rem 0; font-size: .72rem; font-weight: 600; color: var(--muted); text-decoration: none; }
.bottomnav a span { font-size: 1.25rem; line-height: 1; }
.bottomnav a.on { color: var(--primary); }
.hello { margin: .3rem 0 1rem; }
.hello small { color: var(--muted); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: .9rem; }
.tile { display: block; text-decoration: none; color: inherit; padding: 1rem; min-height: 112px; }
.tile .ico { font-size: 1.4rem; color: var(--primary); }
.tile b { display: block; margin-top: .3rem; }
.tile small { font-weight: 600; }
.list { display: grid; gap: .6rem; }
.list-item { display: flex; gap: .8rem; align-items: center; text-decoration: none; color: inherit; cursor: pointer; padding: .9rem 1rem; }
.list-item b { display: block; }
.list-item .arrow { color: var(--muted); font-size: 1.3rem; }
.sync-card { display: flex; gap: .8rem; align-items: center; margin-top: .9rem; }
.sync-card.pending { border-color: #f5c27a; background: var(--warn-soft); }
.section-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 1.3rem 0 .6rem; font-weight: 700; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; font-size: .9rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.finish-bar { display: flex; gap: .5rem; }