:root{--primary:#2563eb;--primary-hover:#1d4ed8;--success:#10b981;--success-hover:#059669;--danger:#ef4444;--danger-hover:#dc2626;--bg-color:#f3f4f6;--card-bg:#fff;--text-main:#1f2937;--text-muted:#6b7280;--border:#e5e7eb;--nav-height:64px;--bottom-nav-height:70px}html,body{max-width:100vw;overflow-x:hidden}body{background-color:var(--bg-color);color:var(--text-main);padding:0;padding-bottom:calc(var(--bottom-nav-height) + 20px);box-sizing:border-box;margin:0;font-family:Inter,sans-serif;overflow-x:hidden}.navbar{background:var(--card-bg);height:var(--nav-height);border-bottom:1px solid var(--border);z-index:50;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 30px;display:grid;position:sticky;top:0}.logo-section h1{color:var(--primary);align-items:center;gap:8px;margin:0;font-size:1.2rem;font-weight:700;display:flex}.desktop-links{align-items:center;gap:20px;display:flex}.desktop-link{color:var(--text-muted);border-radius:8px;align-items:center;gap:6px;min-height:44px;padding:8px 12px;font-size:.95rem;font-weight:500;text-decoration:none;transition:background .2s,color .2s;display:flex}.desktop-link:hover{color:var(--text-main);background:#f3f4f6}.desktop-link.active{color:var(--primary);background:#eff6ff;font-weight:600}.logout-link{color:#ef4444;cursor:pointer;background:0 0;border:none;border-radius:8px;align-items:center;min-height:44px;margin-left:20px;padding:8px 12px;font-size:.9rem;font-weight:600;text-decoration:none;display:flex}.logout-link:hover{background:#fef2f2}.navbar-right{grid-column:3;justify-content:flex-end;align-items:center;gap:12px;display:flex}.navbar-right a.logout-link{color:#64748b;margin-left:0;padding:8px;font-size:1.3rem;text-decoration:none}.navbar-right .avatar-btn{width:36px;height:36px;color:var(--primary);background:#eff6ff;border:2px solid #e5e7eb;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-size:.85rem;font-weight:700;display:flex;overflow:hidden}.navbar-right .logout-link{color:#ef4444;white-space:nowrap;margin-left:0;font-size:.9rem}.bottom-nav{width:100%;height:var(--bottom-nav-height);border-top:1px solid var(--border);z-index:1000;padding-bottom:env(safe-area-inset-bottom);box-sizing:border-box;background:#fff;display:none;position:fixed;bottom:0;left:0;box-shadow:0 -4px 20px #0000000d}.nav-items-wrapper{grid-template-columns:1fr 1fr 1fr;height:100%;display:grid}.b-nav-item{color:#94a3b8;flex-direction:column;justify-content:center;align-items:center;gap:4px;text-decoration:none;transition:color .2s;display:flex;position:relative}.b-nav-item i{margin-bottom:2px;font-size:1.6rem}.b-nav-item span{font-size:.7rem;font-weight:500}.b-nav-item.active{color:var(--primary)}.b-nav-item.active:before{content:"";background:var(--primary);border-radius:0 0 4px 4px;width:40px;height:3px;position:absolute;top:0}@media (width<=768px){body{padding-bottom:calc(90px + env(safe-area-inset-bottom));background-color:#fff}.desktop-links{display:none}.logout-link{font-size:.8rem}.bottom-nav{display:block}.navbar{padding:0 16px;overflow-x:hidden}}@media (height<=500px) and (orientation:landscape){body{padding-bottom:calc(90px + env(safe-area-inset-bottom))}.container,.dip-container,.dip-settings-container{min-height:100dvh;overflow-y:auto}}