/* styles.css - minimal modern layout inspired by attachments */
:root{
  --bg:#f6f7f9;
  --muted:#6f7680;
  --accent:#28a463; /* 使用与要求不同但相近的绿色 */
  --panel:#ffffff;
  --brand-dark:#0f3d2e;
  --primary:#0b63a4;
}
*{box-sizing:border-box}
.page-wrap{background:#555;padding:20px 0}
body{font-family:Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;background:var(--bg);margin:0;color:#1f2933;-webkit-font-smoothing:antialiased}
.site-header{background:linear-gradient(180deg,#ffffff,#f7fbf8);border-bottom:1px solid rgba(15,61,46,0.06);max-width:1200px;margin:0 auto;box-shadow:0 1px 0 rgba(16,24,32,0.02)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;gap:18px}
.brand h1{margin:0;font-size:20px;color:var(--brand-dark);letter-spacing:0.6px}
.brand .domain{margin:0;color:var(--muted);font-size:12px}
.main-nav{display:flex;gap:8px;margin-top:0;background:transparent;padding:6px;border-radius:8px}
.main-nav .tab{padding:8px 12px;color:#334155;text-decoration:none;border-radius:8px;background:transparent;border:1px solid transparent;font-weight:600}
.main-nav .tab:hover{background:rgba(40,164,99,0.06)}
.main-nav .tab.active{background:var(--accent);color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(40,164,99,0.12)}
.banner{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;background:linear-gradient(90deg,var(--accent),#1f7a4f);color:#fff;border-radius:10px;margin:12px 0}
.banner-left h2{margin:0;font-size:24px}
.banner-actions .btn{margin-left:8px;padding:10px 14px;border-radius:8px;border:0;background:#fff;color:#333;cursor:pointer;box-shadow:0 2px 6px rgba(16,24,32,0.06)}
/* large banner with decorations */
.banner-large{padding:0;display:flex;align-items:center}
.banner-large .banner-decor{width:84px;height:84px;background:linear-gradient(180deg,rgba(0,0,0,0.06),rgba(255,255,255,0.03));}
.banner-large .banner-center{flex:1;padding:18px 28px;display:flex;flex-direction:column;gap:12px}
.banner-link{display:block;width:100%;height:160px;border-radius:8px;overflow:hidden;box-shadow:inset 0 -20px 60px rgba(0,0,0,0.06)}
.banner-link img{width:100%;height:100%;object-fit:cover;display:block}
.banner-desc{color:rgba(255,255,255,0.95);font-size:15px;line-height:1.6;padding:12px;border-radius:8px;background:linear-gradient(180deg,rgba(0,0,0,0.08),transparent)}
.banner-large .banner-actions{display:flex;gap:10px}
.banner-actions .btn{background:rgba(255,255,255,0.95);border-radius:8px;padding:10px 14px;border:0}

.blue-bar{background:var(--primary);color:#fff;padding:8px 0;border-radius:6px}
.blue-bar .toolbar-inner{max-width:1100px;margin:0 auto;padding:0 16px}
.container{max-width:1200px;margin:20px auto;padding:0 20px;background:transparent}
.intro{background:var(--panel);padding:16px;border-left:6px solid var(--accent);margin-bottom:18px;border-radius:8px;box-shadow:0 6px 18px rgba(16,24,32,0.03)}
.content-grid{display:flex;gap:24px}
.left-col{flex:1}
.right-col{width:300px;position:relative}

/* right side vertical annotations look */
.right-col::before{content:"";position:absolute;right:-36px;top:36px;width:1px;height:70%;background:linear-gradient(180deg,#e6eef6,#f7fbfb);}
.score-table{background:var(--panel);border:1px solid rgba(16,24,32,0.06);padding:12px;max-height:520px;overflow:auto;border-radius:8px}
.table-row{display:flex;align-items:center;padding:10px;border-bottom:1px solid #f1f5f9}
.table-row.table-header{background:#fbfdff;font-weight:700}
.col{padding:0 8px;flex:1}
.col.league{flex:0 0 110px}
.col.time{flex:0 0 70px}
.col.match{flex:2}
.col.score{flex:0 0 90px;text-align:center}
.col.status{flex:0 0 60px;text-align:center}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;color:#fff;font-size:12px;font-weight:600}
.badge.green{background:#28a463}
.badge.purple{background:#7b61d1}
.small-note .note{color:#a33}
.text-blocks{margin-top:16px;display:grid;grid-template-columns:1fr;gap:12px}
.text-card{background:var(--panel);padding:16px;border:1px solid rgba(16,24,32,0.06);border-radius:10px}
.live-iframe-wrap{background:var(--panel);transition:height 280ms ease,min-height 280ms ease;border-radius:10px;overflow:hidden;box-shadow:0 10px 30px rgba(16,24,32,0.06)}
.callout{background:var(--panel);padding:14px;border:1px solid rgba(16,24,32,0.04);margin-bottom:12px;border-radius:8px}
.side-notes .note{background:var(--panel);padding:12px;border:1px solid rgba(16,24,32,0.04);margin-bottom:10px;border-radius:8px}
.site-footer{background:#0b0c0d;color:#fff;padding:28px 0;margin-top:36px}
.footer-top{max-width:1200px;margin:0 auto;padding:12px 20px;display:flex;justify-content:space-between;align-items:center}
.footer-left{color:#d7d7d7}
.footer-right{color:#9aa3ad;font-size:13px}
.footer-sep{max-width:1200px;margin:12px auto;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01))}
.footer-bottom{max-width:1200px;margin:0 auto;padding:12px 20px;color:#c6cacf;display:flex;flex-direction:column;gap:6px}
.copyright{font-size:13px;color:#9aa3ad}
.desc{font-size:13px;color:#bfc6c9;line-height:1.6}
.tabpanel{display:none}
.tabpanel.active{display:block}
@media (max-width:900px){
  .content-grid{flex-direction:column}
  .right-col{width:100%}
  .banner{flex-direction:column;align-items:flex-start;gap:12px}
  .banner-actions{display:flex;flex-wrap:wrap}
  .banner-actions .btn{flex:1 1 auto;margin:6px 0}
  .banner-link{height:140px}
  .topbar{flex-direction:column;align-items:flex-start}
  .footer-top{flex-direction:column;align-items:flex-start;gap:12px}
}

/* stacked cards section */
.stack-cards{display:flex;gap:18px;align-items:flex-start;margin:20px auto;max-width:1200px;padding:0 20px}
.stack-cards .cards-list{flex:1;display:flex;flex-direction:column;gap:16px}
.stack-cards .card{background:var(--panel);padding:18px;border:1px solid rgba(16,24,32,0.06);border-radius:6px;box-shadow:0 6px 16px rgba(16,24,32,0.03)}
.stack-cards .card p{margin:0;color:#2b3440;line-height:1.7}
.stack-tags{width:180px;padding-left:12px;display:flex;flex-direction:column;gap:22px;align-items:flex-end}
.stack-tags .tag{background:transparent;color:#2d9cd6;padding:6px 10px;border-radius:4px;border-left:4px solid #2d9cd6}

@media (max-width:900px){
  .stack-cards{flex-direction:column;padding:0 16px}
  .stack-tags{display:none}
}