.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:.5rem 1rem;padding-bottom:max(.5rem,env(safe-area-inset-bottom,12px));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:.25rem;padding:.5rem .75rem;min-height:48px;min-width:48px;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 .2s cubic-bezier(.34,1.56,.64,1);-webkit-tap-highlight-color:transparent;touch-action:manipulation;.dark &{color:#94a3b899}&:hover{background:#3b82f60d;color:#3b82f6cc;.dark &{background:#3b82f61a;color:#93c5fde6}}&:active{transform:scale(.92)}&.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:tabIndicatorSpring .4s cubic-bezier(.34,1.56,.64,1)}}.app-tabbar__icon{display:block;font-size:1.375rem;line-height:1;transition:transform .3s cubic-bezier(.34,1.56,.64,1);.app-tabbar__btn.active &{transform:scale(1.12)}.app-tabbar__btn:active &{transform:scale(.88)}}.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}}@keyframes tabIndicatorSpring{0%{transform:translate(-50%) scaleX(0);opacity:0}60%{transform:translate(-50%) scaleX(1.15);opacity:1}80%{transform:translate(-50%) scaleX(.95)}to{transform:translate(-50%) scaleX(1);opacity:1}}.tool-nav{position:fixed;bottom:0;left:0;right:0;height:auto;padding:.5rem 1rem;padding-bottom:max(.5rem,env(safe-area-inset-bottom,12px));display:flex;align-items:center;gap:.5rem;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}.tool-nav__btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;padding:.5rem .75rem;min-height:48px;min-width:48px;flex:1 1 0;width:100%;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 .2s cubic-bezier(.34,1.56,.64,1);-webkit-tap-highlight-color:transparent;touch-action:manipulation;.dark &{color:#94a3b899}&:hover{background:#3b82f60d;color:#3b82f6cc;.dark &{background:#3b82f61a;color:#93c5fde6}}&:active{transform:scale(.92)}&.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:tabIndicatorSpring .4s cubic-bezier(.34,1.56,.64,1)}}.tool-nav__icon{display:block;font-size:1.375rem;line-height:1;transition:transform .3s cubic-bezier(.34,1.56,.64,1);.tool-nav__btn.active &{transform:scale(1.12)}.tool-nav__btn:active &{transform:scale(.88)}}.tool-nav__label{display:block;font-size:.75rem;font-weight:500;line-height:1;text-transform:capitalize;opacity:.8;.tool-nav__btn.active &{opacity:1;font-weight:600}}
