.m11-dashboard-heading { align-items: end; }
.m11-dashboard-tabs {
    position: sticky;
    top: 48px;
    z-index: 30;
    display: flex;
    gap: 2px;
    margin: -3px 0 15px;
    padding: 0 2px;
    overflow-x: auto;
    border-bottom: 1px solid var(--dq-line);
    background: rgba(246,247,249,.96);
    backdrop-filter: blur(8px);
}
.m11-dashboard-tabs a {
    position: relative;
    padding: 8px 10px 9px;
    color: #5d6971;
    text-decoration: none;
    white-space: nowrap;
    font-size: 9px;
    font-weight: 750;
}
.m11-dashboard-tabs a:hover { color: var(--dq-text); background: #fff; }
.m11-dashboard-tabs a.is-active { color: var(--dq-blue); }
.m11-dashboard-tabs a.is-active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--dq-blue); }
.m11-dashboard-section { margin-bottom: 28px; scroll-margin-top: 90px; }
.m11-section-heading { margin-bottom: 9px; }
.m11-kpi-grid { display: grid; gap: 8px; margin-bottom: 10px; }
.m11-kpi-grid-primary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.m11-kpi-grid-compact { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.m11-kpi {
    min-width: 0;
    min-height: 82px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 11px;
    border: 1px solid var(--dq-line);
    border-top: 2px solid #7f8a91;
    border-radius: 7px;
    background: #fff;
    box-shadow: var(--dq-shadow);
}
.m11-kpi span { color: #68737b; font-size: 8px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.m11-kpi strong { margin: 3px 0; color: #20262b; font-size: 23px; line-height: 1; }
.m11-kpi small { overflow: hidden; color: #7b858c; font-size: 8px; line-height: 1.3; }
.m11-kpi.is-attention { border-top-color: var(--dq-escalation); }
.m11-kpi.is-support { border-top-color: var(--dq-support); }
.m11-kpi.is-active { border-top-color: var(--dq-green); }
.m11-kpi.is-priority { border-top-color: var(--dq-priority-high); }
.m11-kpi.is-quality { border-top-color: #8b6bc1; }
.m11-dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 9px; }
.m11-widget-span-2 { grid-column: span 2; }
.m11-widget-full-row { margin-bottom: 9px; }

.m11-stacked-chart { width: 100%; height: 44px; display: flex; overflow: hidden; border-radius: 4px; background: #eceff1; }
.m11-stacked-chart > span { min-width: 0; display: grid; place-items: center; transition: opacity .15s ease; }
.m11-stacked-chart > span:hover { opacity: .86; }
.m11-stacked-chart i { color: inherit; font-size: 9px; font-style: normal; font-weight: 800; }
.m11-stacked-chart .is-completed { background: var(--dq-status-done); color: #fff; }
.m11-stacked-chart .is-progress { background: var(--dq-status-working); color: #44391e; }
.m11-stacked-chart .is-not-started { background: var(--dq-status-waiting); color: #fff; }
.m11-chart-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 9px; }
.m11-chart-legend.is-column { display: grid; gap: 7px; }
.m11-chart-legend span { display: flex; align-items: center; gap: 5px; color: #65717a; font-size: 8px; }
.m11-chart-legend span strong { margin-left: auto; color: #2e373d; }
.m11-chart-legend i { width: 8px; height: 8px; border-radius: 2px; }
.m11-chart-legend i.is-completed { background: var(--dq-status-done); }
.m11-chart-legend i.is-progress { background: var(--dq-status-working); }
.m11-chart-legend i.is-not-started { background: var(--dq-status-waiting); }
.m11-chart-legend i.is-high { background: var(--dq-priority-high); }
.m11-chart-legend i.is-normal { background: #cbd0d5; }

.m11-comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m11-comparison-grid > div { position: relative; min-height: 87px; padding: 10px; border: 1px solid var(--dq-line); border-radius: 6px; background: #fafbfc; }
.m11-comparison-grid span, .m11-comparison-grid small { display: block; color: var(--dq-muted); font-size: 8px; }
.m11-comparison-grid strong { display: block; margin: 6px 0 3px; font-size: 22px; }
.m11-comparison-grid em { position: absolute; right: 8px; top: 8px; padding: 2px 5px; border-radius: 4px; background: #edf0f2; color: #66727a; font-size: 8px; font-style: normal; font-weight: 800; }
.m11-comparison-grid em.is-positive { background: #e1f4ef; color: #1f7467; }
.m11-comparison-grid em.is-negative { background: #fae8e8; color: #a34848; }

.m11-table-wrap { overflow-x: auto; border: 1px solid var(--dq-line); border-radius: 6px; }
.m11-dashboard-table { width: 100%; min-width: 820px; border-collapse: collapse; }
.m11-dashboard-table th, .m11-dashboard-table td { padding: 7px 8px; border-bottom: 1px solid #edf0f2; text-align: left; vertical-align: middle; }
.m11-dashboard-table th { background: #f7f8fa; color: #79838a; font-size: 7px; font-weight: 850; letter-spacing: .045em; text-transform: uppercase; }
.m11-dashboard-table td { font-size: 9px; }
.m11-dashboard-table tbody tr:hover { background: #fafbfd; }
.m11-dashboard-table td small { display: block; margin-top: 1px; color: var(--dq-muted); font-size: 7px; }
.m11-state-tag { display: inline-flex; padding: 3px 6px; border-radius: 4px; font-size: 7px; font-weight: 800; }
.m11-state-tag.is-ready { background: #dcf2ed; color: #176e62; }
.m11-state-tag.is-blocked { background: #f6e4e4; color: #994747; }
.m11-inline-progress { min-width: 100px; display: grid; grid-template-columns: 1fr 28px; align-items: center; gap: 5px; }
.m11-inline-progress::before { content: ""; grid-column: 1; grid-row: 1; height: 5px; border-radius: 3px; background: #e9ecef; }
.m11-inline-progress i { grid-column: 1; grid-row: 1; height: 5px; max-width: 100%; border-radius: 3px; background: var(--dq-green); z-index: 1; }
.m11-inline-progress b { grid-column: 2; font-size: 7px; text-align: right; }

.m11-donut-css { --value: 0; width: 118px; height: 118px; display: grid; place-items: center; margin: 4px auto 10px; border-radius: 50%; background: conic-gradient(var(--dq-priority-high) calc(var(--value) * 1%), #e9ecef 0); }
.m11-donut-css::before { content: ""; grid-area: 1 / 1; width: 78px; height: 78px; border-radius: 50%; background: #fff; }
.m11-donut-css > div { grid-area: 1 / 1; z-index: 1; text-align: center; }
.m11-donut-css strong, .m11-donut-css span { display: block; }
.m11-donut-css strong { font-size: 18px; }
.m11-donut-css span { color: var(--dq-muted); font-size: 7px; }

.m11-ranking-bars { display: grid; gap: 7px; }
.m11-ranking-bars > div { display: grid; grid-template-columns: minmax(110px, 190px) minmax(120px, 1fr) 38px; align-items: center; gap: 8px; }
.m11-ranking-bars > div > span { overflow: hidden; color: #4f5b63; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.m11-ranking-bars > div > div { height: 12px; overflow: hidden; border-radius: 2px; background: #edf0f2; }
.m11-ranking-bars i { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: linear-gradient(90deg, var(--dq-green-dark), var(--dq-green)); }
.m11-ranking-bars strong { font-size: 8px; text-align: right; }
.m11-mini-ranking { display: grid; }
.m11-mini-ranking > div { min-height: 42px; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 7px; border-bottom: 1px solid #edf0f2; }
.m11-mini-ranking > div > span { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #eef1f3; color: #6a757d; font-size: 7px; font-weight: 800; }
.m11-mini-ranking p { min-width: 0; margin: 0; }
.m11-mini-ranking p strong, .m11-mini-ranking p small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m11-mini-ranking p strong { font-size: 9px; }
.m11-mini-ranking p small { color: var(--dq-muted); font-size: 7px; }
.m11-mini-ranking b { font-size: 9px; }

.m11-active-work-grid, .m11-exception-list, .m11-simple-list { display: grid; gap: 4px; }
.m11-active-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m11-active-work-grid a, .m11-exception-list a, .m11-simple-list a { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid #e8ebee; border-radius: 5px; color: inherit; text-decoration: none; background: #fff; }
.m11-active-work-grid a:hover, .m11-exception-list a:hover, .m11-simple-list a:hover { border-color: #b7d9d3; background: #fbfefd; }
.m11-active-work-grid p, .m11-exception-list p, .m11-simple-list p { min-width: 0; flex: 1; margin: 0; }
.m11-active-work-grid p strong, .m11-active-work-grid p small, .m11-exception-list p strong, .m11-exception-list p small, .m11-simple-list p strong, .m11-simple-list p small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m11-active-work-grid p strong, .m11-exception-list p strong, .m11-simple-list p strong { font-size: 8px; }
.m11-active-work-grid p small, .m11-exception-list p small, .m11-simple-list p small { margin-top: 1px; color: var(--dq-muted); font-size: 7px; }
.m11-active-work-grid b { font-size: 9px; white-space: nowrap; }
.m11-exception-list a > b { color: #66727a; font-size: 7px; white-space: nowrap; }
.m11-exception-list em { padding: 2px 4px; border-radius: 3px; background: #f5e1e1; color: #9a4444; font-size: 7px; font-style: normal; }
.m11-simple-list a > span { color: var(--dq-blue); font-size: 7px; font-weight: 800; }
.m11-inline-form { display: inline; }

.m11-big-progress { display: grid; gap: 8px; padding: 8px 2px; }
.m11-big-progress > strong { font-size: 28px; }
.m11-big-progress > span { height: 9px; overflow: hidden; border-radius: 4px; background: #e9ecef; }
.m11-big-progress > span i { display: block; height: 100%; border-radius: inherit; background: var(--dq-green); }
.m11-big-progress small { color: var(--dq-muted); font-size: 8px; }
.m11-score-bars { min-height: 150px; display: flex; align-items: end; justify-content: space-around; gap: 6px; padding: 6px 4px 0; }
.m11-score-bars > div { flex: 1; max-width: 46px; display: grid; grid-template-rows: 14px 110px 14px; gap: 3px; text-align: center; }
.m11-score-bars strong, .m11-score-bars small { font-size: 7px; }
.m11-score-bars > div > span { position: relative; display: flex; align-items: end; justify-content: center; border-radius: 3px 3px 0 0; background: #f0f2f4; }
.m11-score-bars i { width: 70%; min-height: 2px; display: block; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #8b6bc1, var(--dq-blue)); }

.m11-trend-table { min-width: 760px; overflow-x: auto; }
.m11-trend-head, .m11-trend-row { display: grid; grid-template-columns: 80px repeat(6, minmax(70px, 1fr)); gap: 7px; align-items: center; }
.m11-trend-head { padding: 0 7px 6px; color: #7d878e; font-size: 7px; font-weight: 850; text-transform: uppercase; }
.m11-trend-row { min-height: 34px; padding: 5px 7px; border-top: 1px solid #edf0f2; font-size: 8px; }
.m11-trend-row span:nth-child(3) { color: var(--dq-green-dark); font-weight: 800; }

@media (max-width: 1250px) {
    .m11-kpi-grid-primary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .m11-kpi-grid-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .m11-dashboard-tabs { top: 0; }
    .m11-kpi-grid-primary, .m11-kpi-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .m11-dashboard-grid { grid-template-columns: 1fr; }
    .m11-widget-span-2 { grid-column: auto; }
    .m11-active-work-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .m11-kpi-grid-primary, .m11-kpi-grid-compact { grid-template-columns: 1fr; }
}