/* Modular nav CSS (self-contained) */
:root{ --text:#0d0d0d; --nav-bg:rgba(0,0,0,0.92); --nav-active:#10a37f; --nav-inactive:#8e8e93; --border:#e4e4e7; --header-bg:rgba(255,255,255,0.8); }
@media (prefers-color-scheme: dark){ :root{ --text:#ececec; --border:#27272a; --header-bg:rgba(23,23,23,0.8); } }

/* Header (sticky to top) */
.appbar{ background:var(--header-bg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--border); padding:12px16px; display:flex; align-items:center; justify-content:center; position:sticky; position:-webkit-sticky; top:0; z-index:900; }
.title{ font-size:16px; font-weight:600; color:var(--text); letter-spacing:-0.02em; }
.header-controls{ position:absolute; right:16px; display:flex; gap:8px; align-items:center; }
.settings-btn{ background:transparent; border:2px solid transparent; color:var(--text); width:32px; height:32px; border-radius:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s ease; font-size:18px; line-height:1; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",sans-serif; }
.settings-btn:hover{ background:rgba(16,163,127,0.1); border-color:rgba(16,163,127,0.3); }
.settings-btn.active{ color:var(--nav-active); background:rgba(16,163,127,0.15); border:2px solid var(--nav-active); }

/* Bottom nav (fixed to bottom) */
.bottom-nav{ background:var(--nav-bg); color:#fff; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-top:1px solid rgba(255,255,255,0.08); padding:10px calc(env(safe-area-inset-right) +8px) calc(env(safe-area-inset-bottom) +10px) calc(env(safe-area-inset-left) +8px); position:fixed; left:0; right:0; bottom:0; z-index:950; width:100%; }
.nav-inner{ max-width:768px; margin:0 auto; display:flex; justify-content:space-around; align-items:center; }
.nav-item{ background:transparent; border:0; color:var(--nav-inactive); padding:12px16px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; min-width:70px; transition:all .2s ease; border-radius:12px; text-decoration:none; }
.nav-item.active{ color:var(--nav-active); background:rgba(16,163,127,0.15); border:2px solid var(--nav-active); }
.nav-icon{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; transition:all .3s ease; position:relative; font-size:32px; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",sans-serif; }
.nav-icon-emoji{ display:flex; align-items:center; justify-content:center; font-size:32px; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",sans-serif; }
.nav-label{ font-size:12px; font-weight:500; letter-spacing:0.02em; }