/* Thẻ chỉ số + biểu đồ kiểu Pulse (dùng chung bộ thẻ với Server Town): chip màu, số lớn, hàng số phụ, biểu đồ chấm, donut, treemap, danh sách thanh. */
.tone-blue { --c: var(--blue); --s: var(--blue-s); --d: var(--blue-d); }
.tone-green { --c: var(--green); --s: var(--green-s); --d: var(--green-d); }
.tone-red { --c: var(--red); --s: var(--red-s); --d: var(--red-d); }
.tone-orange { --c: var(--orange); --s: var(--orange-s); --d: var(--orange-d); }
.tone-teal { --c: var(--teal); --s: var(--teal-s); --d: var(--teal-d); }
.tone-yellow { --c: var(--yellow); --s: var(--yellow-s); --d: var(--yellow-d); }
.tone-purple { --c: var(--purple); --s: var(--purple-s); --d: var(--purple-d); }
.tone-gray { --c: var(--gray); --s: var(--gray-s); --d: var(--gray-d); }

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.page > .grid + .grid, .page > .card + .grid, .page > .grid + .card, .page > .card + .card { margin-top: 16px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
@media (max-width: 1180px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grid, .grid.two, .grid.wide-left { grid-template-columns: minmax(0, 1fr); } }

.card { background: var(--card); border-radius: 14px; padding: 15px 18px 16px; min-width: 0; }
.card.is-link { cursor: pointer; transition: background 0.15s; }
.card.is-link:hover { background: var(--card-hover); }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; min-height: 26px; }
.chip { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--s); flex: none; }
.chip svg { width: 15px; height: 15px; fill: none; stroke: var(--c); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card-title { font-size: 14px; font-weight: 600; color: var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-head .aside { margin-left: auto; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.card-head .aside a { color: var(--blue); text-decoration: none; font-weight: 600; }
.card-head .chev { margin-left: auto; color: var(--ink-3); width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
.card-head .aside + .chev { margin-left: 4px; }
.kicker { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.big-row { display: flex; align-items: center; gap: 10px; margin: 1px 0 12px; }
.big { display: flex; align-items: baseline; gap: 3px; min-width: 0; }
.big b { font-size: 34px; line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.big small { font-size: 16px; font-weight: 500; color: var(--ink-2); }
.big.is-empty b { color: var(--ink-3); }
.badge { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--s); color: var(--c); }
.badge.inline { margin-left: 0; }
.stats { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.stats span { display: block; font-size: 11.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats b { display: block; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats small { display: block; font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats.big-stats b { font-size: 15px; }

/* Biểu đồ chấm: mỗi cột = một khoảng thời gian, chấm sáng = giá trị; chấm nhạt = trống / chưa có số */
.dots { position: relative; background: var(--s); border-radius: 10px; padding: 9px 10px; }
.dots svg { display: block; width: 100%; }
.dots .e { fill: var(--d); }
.dots .n { fill: var(--d); opacity: 0.4; }
.dots .t-green { fill: var(--green); } .dots .t-red { fill: var(--red); } .dots .t-orange { fill: var(--orange); }
.dots .t-yellow { fill: var(--yellow); } .dots .t-blue { fill: var(--blue); } .dots .t-teal { fill: var(--teal); }
.dots .t-purple { fill: var(--purple); } .dots .t-gray { fill: var(--gray); }
.dots .t-soft { fill: var(--c); opacity: 0.42; }
.dots .dots-note { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11.5px; color: var(--ink-2); text-align: center; padding: 0 12px; pointer-events: none; }
.dots .dots-note span { background: color-mix(in srgb, var(--s) 82%, transparent); padding: 2px 8px; border-radius: 6px; }
.axis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-3); margin-top: 7px; font-variant-numeric: tabular-nums; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-left: auto; font-size: 12px; color: var(--ink-2); }
.legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; background: var(--k); vertical-align: 1px; }

/* Donut + chú thích (kiểu "Memory by Type") */
.donut-row { display: flex; align-items: center; gap: 22px; }
.donut { position: relative; width: 112px; height: 112px; flex: none; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 11; }
.donut .track { stroke: var(--d, var(--line)); }
.donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut-center b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.donut-center small { font-size: 10.5px; color: var(--ink-2); }
.donut-center.is-long b { font-size: 15px; }
.key-list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.key-list div { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.key-list i { width: 8px; height: 8px; border-radius: 50%; background: var(--k); flex: none; }
.key-list span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.key-list b { font-weight: 500; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* Treemap (kiểu "Memory by App"): ô trắng trên thẻ xám */
.treemap { position: relative; height: 182px; width: calc(100% + 6px); margin-bottom: -6px; }   /* ô chừa 6px phải / dưới làm khe */
.treemap .tm { position: absolute; background: var(--tile); border-radius: 9px; padding: 8px 9px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; cursor: default; }
.treemap .tm i { width: 18px; height: 18px; border-radius: 5px; background: var(--k); display: grid; place-items: center; color: #fff; font-style: normal; font-size: 8.5px; font-weight: 700; }
.treemap .tm b { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.treemap .tm small { display: block; font-size: 11px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.treemap .tm.is-tiny b, .treemap .tm.is-tiny small { display: none; }

/* Danh sách thanh (kiểu "Energy by App" / "Cores") */
.bar-list { display: flex; flex-direction: column; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 2px 9px; align-items: center; }
.bar-row.no-icon { grid-template-columns: minmax(0, 1fr) auto; }
.bar-row > i { grid-row: span 2; width: 20px; height: 20px; border-radius: 5px; background: var(--k, var(--c)); display: grid; place-items: center; color: #fff; font-style: normal; font-size: 8.5px; font-weight: 700; align-self: start; }
.bar-row > span { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row > b { font-size: 12.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-row > .bar { grid-column: 1 / -1; height: 4px; border-radius: 3px; background: var(--d); overflow: hidden; }
.bar-row > i ~ .bar { grid-column: 2 / -1; }
.bar-row > .bar u { display: block; height: 100%; border-radius: 3px; background: var(--k, var(--c)); }
.bar-row.is-link { cursor: pointer; }
.bar-row.is-link:hover > span { color: var(--blue); }
.bar-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
@media (max-width: 760px) { .bar-cols { grid-template-columns: minmax(0, 1fr); } }
.meter-row { display: grid; grid-template-columns: minmax(70px, 0.9fr) minmax(0, 1.4fr) 52px; gap: 10px; align-items: center; font-size: 12.5px; }
.meter-row + .meter-row { margin-top: 8px; }
.meter-row span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meter-row .bar { height: 6px; border-radius: 4px; background: var(--d); overflow: hidden; }
.meter-row .bar u { display: block; height: 100%; background: var(--k, var(--c)); border-radius: 4px; }
.meter-row b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.sub-title { font-size: 11.5px; font-weight: 600; color: var(--ink-2); margin: 12px 0 8px; }
.sub-title:first-child { margin-top: 0; }

/* Dải nhiều màu (kiểu thanh Memory) */
.seg-bar { display: flex; height: 8px; border-radius: 5px; overflow: hidden; gap: 2px; background: var(--d); margin: 2px 0 14px; }
.seg-bar u { display: block; height: 100%; background: var(--k); }

/* Danh sách khoá – giá trị (kiểu "Activity" / "Details") */
.kv { display: flex; flex-direction: column; gap: 7px; }
.kv div { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.kv span { color: var(--ink-2); white-space: nowrap; }
.kv b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv b.wrap { white-space: normal; }
.note { font-size: 12px; color: var(--ink-2); margin: 10px 0 0; }
.empty { font-size: 12.5px; color: var(--ink-2); padding: 6px 0; }
.state-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--k); margin-right: 6px; vertical-align: 0; flex: none; }

/* Thẻ lớn của trang chi tiết (kiểu "Processor Load"): số lúc này bên trái, hàng số phụ bên phải, biểu đồ bên dưới */
.hero { display: flex; align-items: flex-end; gap: 32px; margin-bottom: 14px; }
.hero .big b { font-size: 40px; }
.hero .stats { flex: 1; margin: 0 0 4px; }
.hero-extra { margin-bottom: 12px; }
@media (max-width: 760px) { .hero { flex-direction: column; align-items: stretch; gap: 10px; } .hero .stats { --n: 2 !important; } }
[data-go]:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }
.treemap .tm.is-link { cursor: pointer; transition: box-shadow 0.15s; }
.treemap .tm.is-link:hover { box-shadow: inset 0 0 0 2px var(--k); }
.meter-row.is-link { cursor: pointer; border-radius: 6px; }
.meter-row.is-link:hover span { color: var(--blue); }
[data-scope]:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }