:root{
    --primary: #1a73e8;
    --bg: #f5f7fb;
    --card-bg: #ffffff;
    --muted: #5f6368;
    --success: #0f9d58;
    --danger: #d93025;
}
*{box-sizing:border-box}
body{
    font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: #202124;
    margin: 24px;
}
.site-wrapper{max-width:1200px;margin:0 auto}
#app{max-width:1100px;margin:0 auto;padding:0 12px}
.site-title{ text-align:center; color:var(--primary); margin:0 0 18px; font-weight:500; font-size:22px }
.grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.card{ background: var(--card-bg); border-radius: 12px; padding: 18px; border-top: 4px solid var(--primary); transition: transform .18s ease, box-shadow .18s ease; position: relative; box-shadow: 0 1px 3px rgba(60,64,67,0.08), 0 4px 8px rgba(60,64,67,0.06); min-height:120px }
.card:hover{ transform: translateY(-6px); box-shadow: 0 6px 16px rgba(60,64,67,0.12); }
.sym{ font-size:20px; font-weight:500; color:var(--primary); margin-bottom:6px }
.tag{ background: rgba(26,115,232,0.08); color:var(--primary); padding:4px 10px; border-radius:999px; font-size:12px; font-weight:500 }
.meaning{ font-size:13px; color:#3c4043; margin:10px 0; background:#f1f3f4; padding:10px; border-radius:8px }
.metric{ display:flex; justify-content:space-between; margin-top:10px; font-size:14px; border-bottom:1px solid #e8eaed; padding:8px 0 }
.win{ color:var(--success); font-weight:600 }
.loss{ color:var(--danger); font-weight:600 }
.update-time{ position:absolute; top:10px; right:12px; font-size:12px; color:var(--muted) }
.hold-days{ color:var(--primary); font-weight:600 }

/* 偏离（dev）视觉样式 */
.card-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-header .left{display:flex;align-items:center;gap:10px}
.dev-pill{min-width:64px;text-align:center;padding:6px 10px;border-radius:999px;font-weight:600;background:transparent;color:var(--muted);border:1px solid transparent}
.dev-positive{color:var(--success);background:rgba(15,157,88,0.08);border-color:rgba(15,157,88,0.12)}
.dev-negative{color:var(--danger);background:rgba(217,48,37,0.06);border-color:rgba(217,48,37,0.12)}
.dev-neutral{color:var(--muted);background:rgba(60,64,67,0.04);}

/* 更明显的标签与数字 */
.metric span:first-child{color:#5f6368}
.metric span:last-child{font-weight:700}
.meaning{line-height:1.45}

@media (max-width:420px){
    .grid{ grid-template-columns: 1fr }
}
 
.tabs{ display:flex; gap:8px; align-items:center; margin:14px 0 }
.tab-btn{ cursor:pointer }
.tab-active{ background: rgba(26,115,232,0.18); color:#1558d6 }
.hidden{ display: none }
.toolbar{ display:flex; gap:10px; align-items:center; margin:10px 0; flex-wrap: wrap }
.toolbar input[type="text"]{ flex:1; min-width:200px; padding:8px 10px; border:1px solid #e8eaed; border-radius:8px; font-size:14px; background:#fff }
.toolbar select{ padding:8px 10px; border:1px solid #e8eaed; border-radius:8px; font-size:14px; background:#fff }
.footer{ text-align:center; margin-top:20px; color:#5f6368; font-size:12px }
.hero{ background: radial-gradient(1200px 280px at 20% -40%, rgba(26,115,232,0.25), transparent), linear-gradient(135deg, rgba(26,115,232,0.08), rgba(0,0,0,0)); border-radius: 14px; padding: 22px; border: 1px solid rgba(26,115,232,0.22); box-shadow: 0 8px 24px rgba(26,115,232,0.18); margin-bottom: 16px }
.hero-title{ font-size:24px; font-weight:700; color:#1a73e8 }
.hero-subtitle{ font-size:14px; color:#3c4043; margin-top:6px }
.chart-card canvas{ width:100%; height:200px; display:block }