/* «Зеркало и задачи» (макет pen.dev OgmEI) */
.mir { gap: 16px; }
.mir-tiles { display: grid; grid-template-columns: 1fr 1.5fr 1fr 1fr; gap: 14px; }
@media (max-width: 1100px) { .mir-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mir-tile { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px; border-radius: 20px; background: var(--ive-bg); min-width: 0; }
.mir-tile__label { font-size: 13px; font-weight: 600; color: var(--ive-ink-2); }
.mir-tile__value { font-size: 26px; line-height: 1.15; font-weight: 800; color: var(--ive-ink); }
.mir-tile__value.is-bad { color: var(--ive-bad-text); }
.mir-tile__note { font-size: 12px; font-weight: 500; color: var(--ive-ink-3); }
.mir-bar { height: 8px; border-radius: 99px; background: var(--ive-bg-2); overflow: hidden; }
.mir-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--ive-green); }
.mir-bar > span.is-low { background: var(--ive-late); }
.mir-bar--thin { height: 6px; flex: none; width: 30%; }
.mir-bar--thin > span { background: var(--ive-pink); }
.mir-use { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.mir-use__label { flex: 1; min-width: 0; color: var(--ive-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mir-use b { flex: none; white-space: nowrap; width: 38px; text-align: right; font-weight: 700; color: var(--ive-ink); }

.mir-tabs a { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.mir-tabs .mir-count { margin-left: 0; background: var(--ive-pink); color: #fff; }

.mir-desc { margin: -4px 0 12px; font-size: 13px; color: var(--ive-ink-3); }
.mir-table { overflow-x: auto; }
.mir-table table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.mir-table thead th { padding: 9px 10px; background: var(--ive-bg-2); font-size: 12px; font-weight: 700; color: var(--ive-ink-3); text-align: left; white-space: nowrap; }
.mir-table thead th:first-child { border-radius: 10px 0 0 10px; }
.mir-table thead th:last-child { border-radius: 0 10px 10px 0; }
.mir-table td { padding: 10px; border-bottom: 1px solid var(--ive-line); color: var(--ive-ink); vertical-align: middle; white-space: nowrap; }
.mir-table tbody tr:last-child td { border-bottom: 0; }
.mir-table td b { font-weight: 600; }
.mir-table td small { display: block; font-size: 11px; color: var(--ive-ink-3); }
.mir-table .r { text-align: right; font-variant-numeric: tabular-nums; }
.mir-table .m { color: var(--ive-ink-2); }
.mir-table .w { white-space: normal; }
.mir-errrow td { padding-top: 0; }
.mir-err { color: var(--ive-bad-text); font-size: 12px; white-space: normal; word-break: break-word; }

.mir-side { display: flex; flex-direction: column; gap: 10px; }
.mir-side .ive-panel__head { padding-bottom: 4px; }
.mir-side .mir-desc { margin: 0; }
.mir-side .mir-table table { font-size: 12px; }
.mir-side .mir-table td, .mir-side .mir-table thead th { padding-inline: 4px; font-size: 12px; }
.mir-login { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--ive-line); font-size: 13px; }
.mir-login p { margin: 0; }
.mir-login .m { color: var(--ive-ink-3); }
.mir-big { font-size: 26px; font-weight: 800; color: var(--ive-ink); }
.mir-big small { font-size: 13px; font-weight: 500; color: var(--ive-ink-3); }
.mir-kv { gap: 0; }
.mir-kv div { padding: 8px 0; border-bottom: 1px solid var(--ive-line); }
.mir-kv div:last-child { border-bottom: 0; }
.mir-kv dt { color: var(--ive-ink-2); }
.mir-kv dd { font-weight: 600; }

.mir-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mir-jobs { grid-template-columns: minmax(0, 1fr) 340px; }
@media (max-width: 1200px) { .mir .ive-cols { grid-template-columns: minmax(0, 1fr); } }
.mir-side .mir-table thead th { font-size: 11px; padding-inline: 3px; }
.mir-use:nth-of-type(2) .mir-bar--thin > span { background: #3B6FE0; }
.mir-use:nth-of-type(3) .mir-bar--thin > span { background: var(--ive-late); }
.mir-use:nth-of-type(4) .mir-bar--thin > span { background: var(--ive-ink-3); }