.app-layout{--safe-top: env(safe-area-inset-top, 0px);padding-top:var(--safe-top)}.app-main{scrollbar-gutter:stable both-edges;overflow-x:hidden}.app-tabbar{view-transition-name:app-tabbar;position:fixed;bottom:0;left:0;right:0;height:auto;padding:.75rem 1rem;padding-bottom:max(.75rem,env(safe-area-inset-bottom,16px));display:flex;align-items:center;justify-content:center;background:#fffc;backdrop-filter:blur(20px) saturate(180%);border-top:1px solid rgba(255,255,255,.6);box-shadow:0 -2px 15px #00000014;will-change:transform;transform:translateZ(0);.dark &{background:#0f172ad9;border-top-color:#64748b4d;box-shadow:0 -2px 15px #0000004d}z-index:50;transition:background-color .3s ease,border-color .3s ease}.app-tabbar__inner{display:flex;align-items:center;gap:.5rem;width:100%;max-width:56rem}.app-tabbar__btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.375rem;padding:.75rem 1rem;min-height:52px;min-width:52px;flex:1 1 0;min-width:0;border-radius:12px;border:none;background:transparent;cursor:pointer;color:#64748bb3;text-decoration:none;text-align:center;transition:color .2s ease,background-color .2s ease,transform .15s ease;.dark &{color:#94a3b899}&:hover{background:#3b82f60d;color:#3b82f6cc;.dark &{background:#3b82f61a;color:#93c5fde6}}&.active{background:linear-gradient(135deg,#3b82f626,#6366f126);color:#3b82f6;font-weight:600;.dark &{background:linear-gradient(135deg,#3b82f633,#6366f133);color:#93c5fd}}&.active:after{content:"";position:absolute;bottom:0;left:50%;width:32px;height:2px;background:linear-gradient(90deg,#3b82f6,#6366f1);border-radius:1px;transform:translate(-50%) scaleX(1);transform-origin:center;opacity:1;animation:slideIn .3s ease-out}}.app-tabbar__icon{display:block;font-size:1.5rem;line-height:1;transition:transform .2s ease;.app-tabbar__btn.active &{transform:scale(1.1)}.app-tabbar__btn:active &{transform:scale(.95)}}.app-tabbar__label{display:block;font-size:.75rem;font-weight:500;line-height:1;text-transform:capitalize;opacity:.8;.app-tabbar__btn.active &{opacity:1;font-weight:600}}@keyframes slideIn{0%{transform:translate(-50%) scaleX(0);opacity:0}to{transform:translate(-50%) scaleX(1);opacity:1}}