.uvs-dash{--uvs-blue:#4285f4;--uvs-orange:#f59e48;font-family:inherit;color:#222;background:#fff;max-width:1240px;margin:0 auto 24px;box-sizing:border-box;position:relative}
.uvs-dash *{box-sizing:border-box}
.uvs-dash.uvs-loading .uvs-body{opacity:.45;transition:opacity .15s}

/* ส่วนหัว */
.uvs-head{background:#e9edf6;padding:18px 24px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.uvs-dash .uvs-title{margin:0;padding:0;font-size:1.7rem;font-weight:500;line-height:1.3;color:#2b2f3a}
.uvs-range{position:relative}
.uvs-dash .uvs-range-btn{background:#fff;color:#222;border:0;border-radius:4px;box-shadow:0 2px 5px rgba(0,0,0,.28);padding:14px 22px;font-size:1rem;cursor:pointer;display:flex;gap:12px;align-items:center;font-family:inherit}
.uvs-range-btn:after{content:"";border:5px solid transparent;border-top-color:#555;margin-top:5px}
.uvs-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:50;background:#fff;border-radius:6px;box-shadow:0 6px 24px rgba(0,0,0,.25);padding:14px;width:320px;display:none}
.uvs-pop.open{display:block}
.uvs-presets{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
.uvs-dash .uvs-presets button{background:#f1f3f9;border:1px solid transparent;border-radius:4px;padding:8px;font-size:.9rem;cursor:pointer;color:#222;font-family:inherit}
.uvs-dash .uvs-presets button.on{background:#e3edff;border-color:var(--uvs-blue);color:#1a56c4}
.uvs-custom{display:flex;gap:6px;align-items:center;margin-bottom:12px}
.uvs-dash .uvs-custom input{flex:1;min-width:0;padding:6px;border:1px solid #ccd;border-radius:4px;font-family:inherit}
.uvs-dash .uvs-apply{width:100%;background:var(--uvs-blue);color:#fff;border:0;border-radius:4px;padding:9px;cursor:pointer;font-size:.95rem;font-family:inherit}

/* การ์ดตัวเลข + ตัวกรอง */
.uvs-top{display:flex;gap:16px;flex-wrap:wrap;align-items:stretch;padding:18px 24px 0}
.uvs-kpis{display:flex;gap:16px;flex-wrap:wrap;flex:1 1 640px}
.uvs-kpi{flex:1 1 150px;min-width:140px;background:#fff;border-radius:4px;box-shadow:0 1px 6px rgba(0,0,0,.28);padding:12px 18px;text-align:center}
.uvs-kpi span{display:block;color:#666;font-size:.95rem}
.uvs-kpi b{display:block;font-size:2rem;font-weight:400;line-height:1.3;color:#333}
.uvs-filter{flex:0 1 340px;align-self:flex-start;min-width:240px}
.uvs-dash .uvs-filter select{width:100%;height:56px;padding:0 12px;font-size:1rem;background:#fff;border:0;border-radius:4px;box-shadow:0 1px 6px rgba(0,0,0,.28);font-family:inherit;color:#222}

/* กราฟ */
.uvs-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;padding:18px 24px 24px}
.uvs-card{background:#fff;border:1px solid #e3e6ee;border-radius:8px;padding:14px 18px;min-width:0}
.uvs-card h3{margin:0 0 10px;padding:0;font-size:1.25rem;font-weight:500;color:#2b2f3a}
.uvs-svg{width:100%;height:auto;display:block}
.uvs-svg text{font-family:inherit;fill:#555;font-size:12px}
.uvs-svg .grid{stroke:#e6e8ee;stroke-width:1}
.uvs-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.9rem;color:#444;margin-bottom:6px}
.uvs-legend i,.uvs-pie-legend i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.uvs-pie{display:flex;flex-direction:column;align-items:center;gap:8px}
.uvs-pie svg{width:100%;max-width:260px;height:auto}
.uvs-pie svg text{fill:#222;font-size:14px;text-anchor:middle;font-family:inherit}
.uvs-pie-legend{display:flex;gap:6px 16px;flex-wrap:wrap;justify-content:center;font-size:.9rem;color:#444}
.uvs-pie-legend em{font-style:normal;color:#888;margin-left:4px}

/* รายการอันดับ */
.uvs-list{display:flex;flex-direction:column;gap:9px}
.uvs-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;font-size:.93rem}
.uvs-row a,.uvs-row .nm{color:#222;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uvs-row a:hover{color:var(--uvs-blue);text-decoration:underline}
.uvs-row .ct{color:#444;font-variant-numeric:tabular-nums}
.uvs-row .bar{grid-column:1/-1;height:7px;background:#eef1f7;border-radius:4px;overflow:hidden}
.uvs-row .bar i{display:block;height:100%;background:var(--uvs-blue);border-radius:4px}
.uvs-empty{color:#888;text-align:center;padding:30px 0;font-size:.95rem}
.uvs-err{background:#fdecea;color:#b3261e;padding:12px 24px}

@media (max-width:820px){
  .uvs-grid{grid-template-columns:1fr;padding:14px 12px 18px}
  .uvs-head{padding:14px 12px}.uvs-top{padding:14px 12px 0}
  .uvs-dash .uvs-title{font-size:1.35rem}
  .uvs-filter{flex:1 1 100%}
  .uvs-pop{right:auto;left:0;width:min(320px,calc(100vw - 32px))}
}