#app{height:100%;display:flex;flex-direction:column;overflow:hidden;position:relative}
/* Topnav */
.topnav{height:56px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;padding:0 24px;flex-shrink:0;z-index:50;box-shadow:var(--shadow-sm)}
.logo{font-family:'Fraunces',serif;font-size:20px;font-weight:700;color:var(--cocoa-d);cursor:pointer;display:flex;align-items:center;gap:8px;flex-shrink:0;letter-spacing:-.3px}
.logo-mark{width:32px;height:32px;background:linear-gradient(135deg,var(--mint),var(--mint-l));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px}
.nav-pills{display:flex;gap:2px;margin-left:8px}
.npill{height:34px;padding:0 14px;border-radius:var(--r-pill);font-size:13px;font-weight:500;cursor:pointer;border:none;background:transparent;color:var(--on-surface-muted);transition:all .15s}
.npill:hover{background:var(--warm);color:var(--cocoa-d)}
.npill.on{background:var(--yellow-l);color:var(--cocoa-d);font-weight:600}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.notif-btn{position:relative;width:36px;height:36px;border-radius:50%;background:var(--warm);border:1.5px solid var(--border-md);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--cocoa);transition:all .15s}
.notif-btn:hover{background:var(--warm2)}
.notif-dot{position:absolute;top:5px;right:5px;width:8px;height:8px;background:var(--rose);border-radius:50%;border:2px solid var(--surface)}
.post-btn{background:var(--peach-l);color:var(--cocoa-d);border:none;border-radius:var(--r-pill);padding:8px 16px;font-family:var(--font);font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .15s}
.post-btn:hover{box-shadow:var(--shadow)}
.user-btn{width:34px;height:34px;border-radius:50%;background:var(--warm2);border:2px solid var(--mint-l);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--cocoa);transition:all .15s}
.main{flex:1;overflow:hidden;display:flex;min-height:0}
.page{display:none;width:100%;height:100%;overflow:hidden}
.page.on{display:flex}
/* LOGIN */