/* graph.plathong.net — plain, simple, readable UI */
:root { --accent:#1f6feb; --text:#1f2328; --muted:#59636e; --border:#d1d9e0; --bg:#f6f8fa; --card:#fff; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Thai","Noto Sans",Tahoma,sans-serif;
  font-size:16px; line-height:1.6; }
a { color:var(--accent); }
.main-container { max-width:1000px; margin:0 auto; padding:24px 16px 48px; }
.stats-header { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:20px 24px; margin-bottom:16px; }
.stats-header h3 { margin:0 0 6px; font-size:1.4rem; font-weight:600; color:var(--text); }
.stats-header h3 i { color:var(--accent); }
.stats-header .date-info { color:var(--muted); font-size:1rem; }
.navigation-bar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.nav-link-custom { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border:1px solid var(--border);
  border-radius:6px; background:var(--card); color:var(--text); font-size:.95rem; text-decoration:none; }
.nav-link-custom:hover { border-color:var(--accent); color:var(--accent); text-decoration:none; }
.nav-link-custom.active { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.chart-container, .table-container { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:16px; margin-bottom:16px; }
#chart_div_day, #chart_div_month, #chart_div_year { min-height:380px; }
.table { width:100%; color:var(--text); margin:0; border-collapse:collapse; }
.table thead th { background:#eef2f6; color:var(--text); font-weight:600; border-bottom:2px solid var(--border); border-top:0; padding:10px 12px; }
.table td { padding:8px 12px; border-top:1px solid var(--border); vertical-align:middle; }
.table tbody tr:nth-child(even) { background:#fafbfc; }
.table tbody tr:hover { background:#eef4ff; }
.ads-container { margin:0 0 16px; text-align:center; }
.export-buttons { text-align:right; }
caption.tableexport-caption { caption-side:top; text-align:right; padding:0 0 12px; }
.tableexport-caption button, button.xlsx, button.csv, button.txt {
  font:inherit; font-size:.9rem; padding:6px 12px; margin-left:6px; border:1px solid var(--accent); border-radius:6px;
  background:var(--card); color:var(--accent); cursor:pointer; }
.tableexport-caption button:hover { background:var(--accent); color:#fff; }
@media (max-width:640px) {
  .main-container { padding:12px 10px 32px; }
  .stats-header { padding:16px; }
  .stats-header h3 { font-size:1.2rem; }
  .nav-link-custom { flex:1 1 45%; justify-content:center; }
  #chart_div_day, #chart_div_month, #chart_div_year { min-height:300px; }
  caption.tableexport-caption { text-align:center; }
}
.now-playing { background:var(--card); border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:8px; padding:12px 16px; margin-bottom:16px; }
.now-playing .np-station { font-weight:600; font-size:1.05rem; margin:0; }
.now-playing .np-song { color:var(--muted); margin:2px 0 0; }