/* ═══ RESET & BASE ═══ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;font-family:'DM Sans',sans-serif;background:var(--earth);color:var(--text);overflow:hidden;position:fixed;width:100%}
.screen{position:fixed;inset:0;display:none;flex-direction:column;background:var(--cream)}
.screen.active{display:flex}

/* ═══ TOP BAR ═══ */
.topbar{background:var(--white);border-bottom:1px solid var(--sand);padding:0 20px;height:56px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;padding-top:env(safe-area-inset-top,0)}
.topbar-logo{font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--earth);font-weight:400}
.topbar-logo span{color:var(--hay);font-style:italic}
.topbar-barn{font-size:10px;color:var(--text-muted);letter-spacing:0.06em;margin-top:1px}
.topbar-user{display:flex;align-items:center;gap:8px}
.topbar-avatar{width:30px;height:30px;border-radius:50%;background:var(--hay);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;color:var(--earth);flex-shrink:0}
.topbar-name{font-size:11px;color:var(--text-muted)}
.logout-btn{font-size:11px;color:var(--text-muted);background:none;border:none;cursor:pointer;padding:4px 8px}

/* ═══ PANELS ═══ */
.panels{flex:1;overflow:hidden;position:relative}
.panel{position:absolute;inset:0;overflow-y:auto;padding:20px 16px calc(var(--nav-h) + var(--safe-bottom) + 20px);display:none;-webkit-overflow-scrolling:touch}
.panel.active{display:block}

/* ═══ BOTTOM NAV ═══ */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:calc(var(--nav-h) + var(--safe-bottom));background:var(--white);border-top:1px solid var(--sand);display:flex;align-items:flex-start;padding-top:10px;padding-bottom:var(--safe-bottom);z-index:50}
.nav-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;padding:4px 0;border:none;background:none;color:var(--text-muted);transition:color 0.15s}
.nav-tab.active{color:var(--earth)}
.nav-tab-icon{font-size:20px;line-height:1}
.nav-tab-label{font-size:9px;letter-spacing:0.04em;font-weight:400}
.nav-tab.active .nav-tab-label{font-weight:500}
.nav-indicator{width:4px;height:4px;border-radius:50%;background:var(--hay);opacity:0;transition:opacity 0.15s;margin-top:2px}
.nav-tab.active .nav-indicator{opacity:1}

/* ═══ SECTION HEADINGS ═══ */
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.section-title{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--earth);font-weight:400}
.section-sub{font-size:12px;color:var(--text-muted);margin-top:2px}