*{box-sizing:border-box;margin:0;padding:0;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial}
:root{--bg:#f5f7fa;--card:#fff;--accent:#2b6cb0}
body{background:var(--bg);color:#222}
.container{max-width:1100px;margin:0 auto;padding:20px}
.site-header{background:linear-gradient(90deg, #123c66, #2b6cb0);color:#fff;padding:20px 0}
.site-header h1{margin-bottom:8px}
.site-header nav a{color:rgba(255,255,255,0.9);margin-right:16px;text-decoration:none}
.card{background:var(--card);padding:18px;border-radius:8px;margin:18px 0;box-shadow:0 2px 8px rgba(0,0,0,0.06)}
.grid{display:flex;gap:12px}
.product{flex:1;padding:12px;border-left:4px solid var(--accent)}
.controls{display:flex;gap:12px;margin-bottom:12px}
.controls input, .controls select{padding:8px;border-radius:6px;border:1px solid #ddd}
.data-area{display:flex;gap:12px}
.table-wrap{flex:1}
.table-wrap table{width:100%;border-collapse:collapse}
.table-wrap th, .table-wrap td{padding:8px;border-bottom:1px solid #eee;text-align:left}
.chart-wrap{width:420px;background:#fff;padding:12px;border-radius:8px}
.note{font-size:12px;color:#666;margin-top:10px}
.chg-pos{color:#c00; font-weight:600}
.chg-neg{color:#0a6; font-weight:600}
.site-footer{padding:12px;text-align:center;color:#666;margin-top:18px}

@media(max-width:900px){.data-area{flex-direction:column}.chart-wrap{width:100%}}

.video-grid{display:flex;flex-direction:column;gap:18px}
.video-row{display:flex;gap:16px}
.video-card{background:#fff;border-radius:8px;padding:8px;flex:1;box-shadow:0 2px 6px rgba(0,0,0,0.06)}
.video-card video{width:100%;height:160px;object-fit:cover;border-radius:6px}
.video-meta{padding:8px}
.video-title{font-weight:700;margin-bottom:4px}
.video-date{font-size:12px;color:#666;margin-bottom:6px}
.video-desc{font-size:13px;color:#444}

@media(max-width:900px){.video-row{flex-direction:column}.video-card video{height:220px}}

/* articles */
.article-item{margin-bottom:14px;padding:18px}
.article-title a{color:var(--accent);font-size:20px;text-decoration:none}
.article-title a:hover{text-decoration:underline}
.meta{color:#666;font-size:13px;margin:6px 0}
.category{display:inline-block;background:#eef6ff;color:var(--accent);padding:4px 8px;border-radius:4px;font-size:12px;margin-bottom:8px}
.preview{margin-top:8px;color:#333}
.article-stats{margin-top:10px;font-size:13px;color:#666;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.article-detail > .article-stats span{margin-right:0}
.article-body{margin-top:12px}
.article-detail .article-body{color:#333;line-height:1.75}
.article-praise{text-align:center;padding:32px 16px 12px;margin-top:20px;border-top:1px solid #eee}
.article-praise-hit{display:inline-flex;flex-direction:column;align-items:center;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;outline:none}
.article-praise-hit:focus-visible .article-praise-circle{box-shadow:0 0 0 2px rgba(43,108,176,0.35)}
.article-praise-circle{width:54px;height:54px;border-radius:50%;border:1px solid #d8d8d8;background:#fafafa;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s,transform .12s ease}
.article-praise-hit:active .article-praise-circle{transform:scale(0.94)}
.article-praise-heart{fill:none;stroke:#8a8a8a;stroke-width:1.35;transition:fill .2s,stroke .2s}
.article-praise-hit.is-liked .article-praise-circle{border-color:#fa5151;background:#fff5f5}
.article-praise-hit.is-liked .article-praise-heart{fill:#fa5151;stroke:#fa5151}
.article-praise-label{margin-top:10px;font-size:12px;color:#aeaeae}
.article-praise-hit.is-liked .article-praise-label{color:#888}
.tags{margin-top:10px}
.tag{display:inline-block;background:#f1f5f9;color:#555;padding:6px 10px;border-radius:16px;font-size:12px;margin-right:6px}