/* คลาสเสริมที่หน้าจอใช้และไม่อยู่ใน components.css/screens.css */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.kpi { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-card); padding: var(--space-3) var(--space-4); }
.kpi .v { font-family: var(--font-head); font-size: var(--fs-xl); font-weight: 600; color: var(--c-primary); font-variant-numeric: tabular-nums; }
.bar-track { background: var(--c-surface-alt); border-radius: 6px; flex: 1; height: 10px; overflow: hidden; }
.bar { height: 10px; border-radius: 6px; background: var(--c-accent); }
.trend { display: flex; align-items: flex-end; gap: 2px; height: 120px; }
.tcol { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.tbar { width: 100%; background: var(--c-accent); border-radius: 3px 3px 0 0; min-height: 1px; }
.tlbl { line-height: 1.2; margin-top: 2px; }
.menurow { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); }
.list-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--c-line); }
.list-item.active { border-color: var(--c-primary); background: var(--c-accent-soft); }
.search .input { padding-right: 48px; }
.search .clear { position: absolute; right: 0; top: 0; }
.demo { border-style: dashed; }
.card + .card { margin-top: var(--space-3); }
.card.col { gap: var(--space-2); }
.banner.small { font-size: var(--fs-sm); }
select.input { width: auto; max-width: 100%; }
.dialog .field, .sheet .field { display: flex; flex-direction: column; gap: 4px; }
.page-head .btn.sm { flex: none; }
@media (min-width: 768px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 768px) { .page-head { margin-top: 0; } }