*{box-sizing:border-box}
@view-transition{navigation:none}
::view-transition-old(root),
::view-transition-new(root){
    animation-duration:0s;
    animation-timing-function:ease
}
html{width:100%;min-height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
    margin:0;min-height:100vh;
    background:linear-gradient(180deg,#f8fafc 0%,#f1f5f9 30%,#e2e8f0 100%);
    color:#1e293b;
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
    -webkit-tap-highlight-color:transparent;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
body.blank-page{padding-bottom:76px}
.bottom-tabs{
    position:fixed;left:0;right:0;bottom:0;z-index:200;
    background:linear-gradient(180deg,rgba(255,255,255,0.98) 0%,rgba(248,250,252,0.96) 100%);
    border-top:1px solid rgba(0,0,0,0.04);
    box-shadow:0 -2px 12px rgba(0,0,0,0.035),0 -1px 0 rgba(255,255,255,0.6) inset
}
.bottom-tab-inner{
    width:100%;max-width:720px;margin:0 auto;
    padding:6px 14px calc(6px + env(safe-area-inset-bottom));
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px
}
.bottom-tab{
    min-width:0;height:36px;display:flex;align-items:center;justify-content:center;
    border:1px solid rgba(0,0,0,0.02);
    border-radius:12px;
    color:#64748b;
    text-decoration:none;font-size:11px;font-weight:600;
    background:rgba(255,255,255,0.6);
    box-shadow:0 1px 3px rgba(0,0,0,0.02),0 1px 0 rgba(255,255,255,0.8) inset;
    user-select:none;touch-action:manipulation;
    transition:color .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
    letter-spacing:-0.2px
}
.bottom-tab:hover{
    color:#334155;
    background:rgba(255,255,255,0.85);
    box-shadow:0 4px 12px rgba(0,0,0,0.06),0 1px 0 rgba(255,255,255,0.9) inset;
    transform:translateY(-1px)
}
.bottom-tab.active{
    border:1px solid rgba(59,130,246,0.15);
    background:linear-gradient(135deg,rgba(59,130,246,0.12) 0%,rgba(37,99,235,0.08) 100%);
    color:#2563eb;
    box-shadow:0 6px 20px rgba(59,130,246,0.12),0 1px 0 rgba(255,255,255,0.8) inset,0 -1px 0 rgba(59,130,246,0.1) inset
}
@media (prefers-reduced-motion:reduce){
    ::view-transition-old(root),
    ::view-transition-new(root){animation-duration:0s}
    .bottom-tab{transition:none}
    .bottom-tab:hover{transform:none}
}