[data-route="home"] *{box-sizing:border-box}
html[data-route="home"]{
    --ivory:#f5efe4;
    --ivory-deep:#efe2d4;
    --cherry:#b64856;
    --cherry-soft:#d36a77;
    --cherry-muted:#bf6f7a;
    --charcoal:#24222a;
    --charcoal-soft:#3a363f;
    --text-main:#19181e;
    --text-sub:#5d5a61;
    --ok:#16a085;
    --bad:#d64545;
    --safe-top:env(safe-area-inset-top, 0px);
    --safe-right:env(safe-area-inset-right, 0px);
    --safe-bottom:env(safe-area-inset-bottom, 0px);
    --safe-left:env(safe-area-inset-left, 0px);

}
html[data-route="home"]{
    background-color:#f5efe4;}
html[data-route="home"] body{
    background-color: var(--ivory);
    color: var(--text-main);
    font-family: "Avenir Next", "Trebuchet MS", "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
    background-image:
        radial-gradient(130% 110% at 20% 22%, rgba(250, 244, 235, 0.88) 0%, rgba(247, 236, 223, 0.58) 35%, rgba(243, 229, 214, 0.28) 60%, rgba(244, 233, 216, 0) 100%),
        linear-gradient(150deg, rgba(244, 234, 217, 0.94), rgba(250, 239, 223, 0.84));
    background-repeat: no-repeat;
    background-size: cover;
    isolation:isolate;}
[data-route="home"] :focus-visible{
    outline:2px solid var(--cherry);
    outline-offset:2px;
}
[data-route="home"] .page{
    z-index:2;}
[data-route="home"] .mobile-shell{
    z-index:2;}
[data-route="home"] .market-glass{
    border:1px solid rgba(36,34,42,0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 12px 30px rgba(28, 20, 18, 0.12);
    color: var(--charcoal);
    z-index: 110;}
[data-route="home"] .indices,
[data-route="home"] .indices-bottom,
[data-route="home"] .clocks {color:var(--text-sub)}
[data-route="home"] .indices b,
[data-route="home"] .indices-bottom b,
[data-route="home"] .clocks b{
    color: var(--charcoal);
    letter-spacing:0.2px;
}
[data-route="home"] .market-rail small{
    color: var(--ok);
}
[data-route="home"] .market-rail .indices [class*="pos-up"],
[data-route="home"] .market-rail .indices-bottom [class*="pos-up"]{
    color: var(--ok);
}
[data-route="home"] .container{
    text-align:center;
    z-index:100;}
[data-route="home"] .hero-title{
    letter-spacing:1px;
    font-weight:700;
    color:#18171d;
    text-shadow:0 2px 14px rgba(255, 255, 255, 0.45);}
[data-route="home"] .subtitle{
    margin:8px auto 20px;
    font-size:18px;
    color: var(--cherry);
    letter-spacing:0.5px;
}
[data-route="home"] .stock{
    border:1px solid rgba(68, 54, 52, 0.18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 12px 44px rgba(32, 24, 30, 0.18);}
[data-route="home"] .stock h2{
    color:var(--charcoal);
    letter-spacing:1px;}
[data-route="home"] .price{
    font-weight:800;
    color:var(--charcoal-soft);}
[data-route="home"] .after{
    color: var(--text-sub);}
[data-route="home"] .change{
    font-weight:600;}
[data-route="home"] .time{
    color: var(--text-sub);}
[data-route="home"] .portfolio-btn,
[data-route="home"] .buttons > a:not(.news-btn),
[data-route="home"] .news-btn,
[data-route="home"] .floating-btn{
    border:1px solid rgba(48, 39, 45, 0.18);
    border-radius:999px;
    background: rgba(255,255,255,0.65);
    color: var(--charcoal);
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
    cursor:pointer;
    text-decoration:none;
}
[data-route="home"] .portfolio-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:34px;
    padding:0 16px;
    font-size:13px;
    color: var(--text-main);
    background: rgba(255,255,255,0.74);
}
[data-route="home"] .buttons > a:not(.news-btn){
    font-size:16px;
}
[data-route="home"] .buttons > a:not(.news-btn){
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--charcoal);
    border-color:rgba(255,255,255,0.25);
    color:#f9f6f1;
    font-weight:600;
    letter-spacing:.3px;
}
[data-route="home"] .news-btn{
    width:var(--circular-icon-btn-size);
    height:var(--circular-icon-btn-size);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    box-shadow:0 8px 20px rgba(21, 15, 17, 0.14);
}
[data-route="home"] .news-btn svg{
    width:24px;
    height:24px;
    display:block;
    fill:currentColor;
}
/* 2026-09-11 修复：深色实心按钮（Blog）hover 时被下方统一规则改成白底，
   但字色仍为近白 #f9f6f1，造成「白底白字、按钮消失」；触屏返回后 hover 粘滞更明显。
   先给深色按钮单独的 hover 底色，再用 (hover:hover) 收窄通用 hover，避免触屏粘滞。 */
[data-route="home"] .buttons > a:not(.news-btn){
    -webkit-tap-highlight-color: transparent;
}
[data-route="home"] .buttons > a:not(.news-btn):hover,
[data-route="home"] .buttons > a:not(.news-btn):active{
    background:var(--charcoal-soft);
    border-color:rgba(255,255,255,0.42);
    color:#f9f6f1;
}
@media (hover:hover) and (pointer:fine){
[data-route="home"] .portfolio-btn:hover,
[data-route="home"] .buttons > a:hover,
[data-route="home"] .news-btn:hover,
[data-route="home"] .floating-btn:hover,
[data-route="home"] .circle-btn:hover,
[data-route="home"] .circle-btn-2:hover{
    transform:scale(1.03);
    border-color:rgba(48, 39, 45, 0.35);
    background:rgba(255,255,255,0.82);
}
}
[data-route="home"] .floating-btn,
[data-route="home"] .circle-btn,
[data-route="home"] .circle-btn-2,
[data-route="home"] :is(#portfolioTrigger, [data-fit-id="portfolioTrigger"]){
    width:var(--circular-icon-btn-size);
    height:var(--circular-icon-btn-size);
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    overflow:hidden;
    z-index:112;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
[data-route="home"] .floating-btn{
    background: rgba(249, 242, 232, 0.8);}
[data-route="home"] .circle-btn,
[data-route="home"] .circle-btn-2{
    background:rgba(250, 244, 235, 0.74);}
[data-route="home"] .floating-btn img{
    width:100%;
    height:100%;
    display:block;
    border-radius:inherit;
    object-fit:cover;
}
[data-route="home"] .circle-btn img,
[data-route="home"] .circle-btn-2 img{
    width:28px;
    height:28px;
    object-fit:cover;
}
[data-route="home"] .portfolio-panel{
    background:rgba(252,246,238,.98);
    border:1px solid rgba(34, 29, 34, 0.16);
    border-radius:18px;
    box-shadow:0 16px 36px rgba(21, 12, 17, 0.16);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow:hidden;
    opacity:0;
    transition:opacity .2s ease, transform .2s ease;
    z-index:111;}
[data-route="home"] .portfolio-panel.open{
    flex-direction:column;
    opacity:1;
}
[data-route="home"] .portfolio-summary{padding:12px 15px 8px; text-align:center;}
[data-route="home"] .portfolio-summary .total-label{font-size:11px;color: var(--text-sub);margin-bottom:2px}
[data-route="home"] .portfolio-summary .total-pnl{font-size:22px;font-weight:700;line-height:1.2}
[data-route="home"] .portfolio-summary .pct{font-size:12px;margin-top:2px}
[data-route="home"] .portfolio-content{flex:1 1 auto;min-height:0;padding:4px 13px 14px;overflow-y:auto;max-height:none;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch}
[data-route="home"] .portfolio-row,
[data-route="home"] .closed-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px 0;
    font-size:12px;
}
[data-route="home"] .portfolio-row .sym,
[data-route="home"] .closed-row .sym{width:42px;font-weight:600;color:var(--charcoal);font-size:12px}
[data-route="home"] .portfolio-row .info,
[data-route="home"] .closed-row .info{flex:1;text-align:right;color:var(--text-sub);font-size:11px}
[data-route="home"] .portfolio-row .pnl,
[data-route="home"] .closed-row .pnl{width:64px;text-align:right;font-weight:600;font-size:12px}
[data-route="home"] .portfolio-row .pnl-pct,
[data-route="home"] .closed-row .pnl-pct{margin-top:1px;font-size:10px;font-weight:500}
[data-route="home"] .portfolio-section{margin-top:14px;padding-top:12px;border-top:1px solid rgba(0,0,0,0.06)}
[data-route="home"] .portfolio-section-title{font-size:11px;color:#868086;margin-bottom:4px}
[data-route="home"] .portfolio-total-row{display:flex;justify-content:space-between;font-size:13px;font-weight:700;padding:6px 0 2px}
[data-route="home"] .buttons > a:focus-visible,
[data-route="home"] .news-btn:focus-visible,
[data-route="home"] .portfolio-btn:focus-visible,
[data-route="home"] :is(#portfolioTrigger, [data-fit-id="portfolioTrigger"]):focus-visible{
    outline:2px solid var(--cherry);
    outline-offset:2px;
}