/* Online Users Stats — ใช้สีจากธีม (ถ้ามี) เพื่อให้กลมกลืน */
.uos-stats, .uos-badge, .uos-online, .uos-widget, .uos-dash {
	--uos-accent: var(--accent, #2f6b85);
	--uos-accent-2: #d0862b;
	--uos-soft: var(--accent-soft, #e6eef2);
	--uos-surface: var(--surface, #ffffff);
	--uos-bg: var(--bg, #f6f5f1);
	--uos-border: var(--border, #e3e1da);
	--uos-text: var(--text, #2d3236);
	--uos-muted: var(--muted, #6b7378);
	--uos-ok: #2e9e5b;
	--uos-mono: var(--mono, ui-monospace, SFMono-Regular, Consolas, monospace);
}

.uos-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--uos-ok); vertical-align: middle; flex: none; }

/* ---------- ตัวเลขออนไลน์ (shortcode) ---------- */
.uos-online { display: inline-flex; align-items: center; gap: .45em; flex-wrap: wrap; }
.uos-online b { font-weight: 700; color: var(--uos-text); }
.uos-sep { color: var(--uos-muted); }

/* ---------- ป้ายมุมจอ ---------- */
.uos-badge {
	position: fixed; bottom: 14px; left: 14px; z-index: 9990;
	padding: .35em .85em; font-size: 13px; line-height: 1.5;
	background: var(--uos-surface); color: var(--uos-muted);
	border: 1px solid var(--uos-border); border-radius: 999px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .07); text-decoration: none !important;
}
.uos-badge--right { left: auto; right: 14px; }
a.uos-badge:hover { border-color: var(--uos-accent); color: var(--uos-text); }
@media print { .uos-badge { display: none; } }

/* ---------- วิดเจ็ต ---------- */
.uos-widget { list-style: none; margin: 0; padding: 0; }
.uos-widget li { display: flex; justify-content: space-between; align-items: center; gap: .5em; padding: .35em 0; border-bottom: 1px dashed var(--uos-border); }
.uos-widget li:last-child { border-bottom: 0; }
.uos-widget li > span { color: var(--uos-muted); display: inline-flex; align-items: center; gap: .4em; }
.uos-widget-more { margin: .6em 0 0; font-size: .9em; }

/* ---------- หน้าสถิติ ---------- */
.uos-stats { color: var(--uos-text); font-size: 15px; line-height: 1.6; }
.uos-stats * { box-sizing: border-box; }
.uos-stats h2.uos-h { font-size: 1.05rem; margin: 0 0 .8em; display: flex; align-items: center; gap: .45em; flex-wrap: wrap; }
.uos-stats h2.uos-h small { font-weight: 400; color: var(--uos-muted); font-size: .85em; }

.uos-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.uos-card {
	display: flex; flex-direction: column; gap: .15em; padding: .9rem 1rem;
	background: var(--uos-surface); border: 1px solid var(--uos-border); border-radius: 8px;
}
.uos-card--now { border-color: var(--uos-accent); background: var(--uos-soft); }
.uos-card-label { font-size: .85em; color: var(--uos-muted); display: inline-flex; align-items: center; gap: .4em; }
.uos-card-num { font-size: 1.75rem; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; }
.uos-card--now .uos-card-num { color: var(--uos-accent); }
.uos-card-sub { font-size: .78em; color: var(--uos-muted); }

.uos-box { background: var(--uos-surface); border: 1px solid var(--uos-border); border-radius: 8px; padding: 1.1rem 1.2rem; margin-bottom: 1.2rem; }
.uos-box-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; flex-wrap: wrap; }
.uos-grid-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.2rem; }
.uos-grid-2 > .uos-box { margin-bottom: 1.2rem; }

.uos-records { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; }
.uos-rec { display: flex; flex-direction: column; gap: .1em; padding: .75rem .9rem; border-radius: 6px; background: var(--uos-bg); border-left: 3px solid var(--uos-accent-2); }
.uos-rec-label { font-size: .82em; color: var(--uos-muted); }
.uos-rec-num { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.uos-rec-num small { font-size: .6em; font-weight: 400; color: var(--uos-muted); }
.uos-rec-when { font-size: .8em; color: var(--uos-muted); }

.uos-tabs { display: inline-flex; border: 1px solid var(--uos-border); border-radius: 6px; overflow: hidden; }
.uos-tabs a { padding: .3em .85em; font-size: .88em; color: var(--uos-text); text-decoration: none !important; border-right: 1px solid var(--uos-border); }
.uos-tabs a:last-child { border-right: 0; }
.uos-tabs a:hover { background: var(--uos-soft); }
.uos-tabs a.is-active { background: var(--uos-accent); color: #fff; }

.uos-legend { display: flex; gap: 1.2em; font-size: .82em; color: var(--uos-muted); margin: .4em 0 .2em; flex-wrap: wrap; }
.uos-key { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: .4em; vertical-align: -1px; }
.uos-key--bar { background: var(--uos-accent); opacity: .85; }
.uos-key--line { height: 3px; vertical-align: 3px; background: var(--uos-accent-2); }

.uos-chart-wrap { width: 100%; }
.uos-chart { display: block; width: 100%; height: auto; overflow: visible; }
.uos-grid { stroke: var(--uos-border); stroke-width: 1; }
.uos-ax { fill: var(--uos-muted); font-size: 11px; font-family: inherit; }
.uos-bar { fill: var(--uos-accent); opacity: .85; }
.uos-hit { fill: transparent; }
.uos-col:hover .uos-bar { opacity: 1; }
.uos-col:hover .uos-hit { fill: var(--uos-soft); opacity: .5; }
.uos-line { fill: none; stroke: var(--uos-accent-2); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.uos-pt { fill: var(--uos-surface); stroke: var(--uos-accent-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

.uos-details { margin-top: .6rem; }
.uos-details summary { cursor: pointer; color: var(--uos-accent); font-size: .9em; }

.uos-table-wrap { overflow-x: auto; margin-top: .4rem; }
.uos-stats table.uos-table { width: 100%; min-width: 560px; border-collapse: collapse; margin: 0; font-size: .9em; }
.uos-stats .uos-table th, .uos-stats .uos-table td { padding: .45em .6em; border: 0; border-bottom: 1px solid var(--uos-border); text-align: left; vertical-align: top; }
.uos-stats .uos-table th { background: var(--uos-soft); font-weight: 600; white-space: nowrap; }
.uos-stats .uos-table tbody tr:nth-child(even) { background: transparent; }
.uos-stats .uos-table tbody tr:hover { background: var(--uos-bg); }
.uos-stats .uos-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.uos-mono { font-family: var(--uos-mono); font-size: .92em; white-space: nowrap; }
.uos-muted { color: var(--uos-muted); }
.uos-member { color: var(--uos-accent); font-weight: 600; }
.uos-page a { color: var(--uos-text); }
.uos-page { min-width: 12em; }

.uos-pages { margin: 0; padding-left: 1.3em; }
.uos-pages li { padding: .35em 0; border-bottom: 1px dashed var(--uos-border); }
.uos-pages li:last-child { border-bottom: 0; }
.uos-pages a { color: var(--uos-text); }
.uos-pill { display: inline-block; margin-left: .4em; padding: 0 .55em; font-size: .78em; border-radius: 999px; background: var(--uos-soft); color: var(--uos-accent); white-space: nowrap; }

.uos-empty { color: var(--uos-muted); margin: .3em 0; }
.uos-foot { font-size: .8em; color: var(--uos-muted); }

@media (max-width: 900px) {
	.uos-grid-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
	.uos-card-num { font-size: 1.45rem; }
	.uos-box { padding: .9rem; }
}

/* ---------- แอดมิน ---------- */
.uos-admin .uos-stats { margin-top: 1rem; max-width: 1280px; }
.uos-dash { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; text-align: center; }
.uos-dash strong { display: block; font-size: 1.6rem; line-height: 1.3; }
.uos-dash span { font-size: 12px; color: #646970; display: inline-flex; align-items: center; gap: .3em; }