/* Screen-specific structure; shared visual foundation is design.css. */
.eyebrow,.help{font-size:.8rem;color:var(--muted)}
.page-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.badge{font-size:.85rem;border:1px solid var(--line);border-radius:20px;padding:6px 10px;color:var(--muted)}
.secondary,.quiet,.tabs button{background:var(--soft);color:var(--ink)}
label{display:block;margin:14px 0 5px}
.identity-card,.subpage,.post-card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:22px;margin:16px 0}
.primary{width:100%;margin:10px 0}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}
.menu-grid button{display:flex;flex-direction:column;align-items:flex-start;text-align:left;background:var(--panel);color:var(--ink);padding:20px}
.menu-grid span{font-size:.8rem;color:var(--muted);font-weight:400;margin-top:5px}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.tabs [aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
#shell-status{font-size:.88rem;padding:12px;border-radius:14px;background:var(--soft)}
.post-card{display:block;width:100%;text-align:left;color:var(--ink);background:var(--panel)}
.post-card p{white-space:pre-wrap}
.post-card small{color:var(--muted)}
#native-recovery-codes{padding:0;list-style:none}
#native-recovery-codes li{font:clamp(.8rem,3.4vw,1rem)/1.6 ui-monospace,monospace;padding:10px;background:var(--soft);margin:6px 0;border-radius:10px;word-break:break-all}
#native-devices{list-style:none;padding:0}
#native-devices li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0}
[hidden]{display:none!important}
:focus-visible{outline:3px solid #b27521;outline-offset:3px}
@media(max-width:360px){
.menu-grid{grid-template-columns:1fr}
.page-header{align-items:flex-start}

}