.supervision-entry-card {
    display:grid;
    width:100%;
    grid-template-columns:48px 1fr auto;
    align-items:center;
    gap:12px;
    padding:14px;
    border:1px solid rgba(55,37,73,.1);
    border-radius:18px;
    color:#372549;
    background:linear-gradient(135deg,#fff 0%,#f3f3e5 100%);
    box-shadow:0 9px 26px rgba(55,37,73,.07);
    cursor:pointer;
    text-align:left;
}
.supervision-entry-card>span:nth-child(2) { display:flex; min-width:0; flex-direction:column; gap:4px; }
.supervision-entry-card strong { font-size:.83rem; }
.supervision-entry-card small { color:#776f7c; font-size:.65rem; line-height:1.4; }
.supervision-entry-icon { display:grid; width:48px; height:48px; place-items:center; border-radius:15px; color:#fff; background:#5d496c; }
.supervision-entry-icon .app-icon { width:25px; height:25px; }
.supervision-entry-arrow { color:#776f7c; font-size:1.8rem; font-weight:300; }
.supervision-content { padding-bottom:32px; }
.supervision-overview,.supervision-detail { display:flex; flex-direction:column; gap:14px; }
.supervision-overview-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:4px 2px 0; }
.supervision-overview-heading h2,.supervision-detail-heading h2 { margin:4px 0; color:#372549; font-size:1.14rem; }
.supervision-overview-heading p { margin:0; color:#776f7c; font-size:.68rem; line-height:1.5; }
.supervision-technician-list,.supervision-breakdown-list { display:flex; flex-direction:column; gap:12px; margin:0; padding:0; list-style:none; }
.supervision-technician-card { padding:15px; border:1px solid rgba(55,37,73,.08); border-radius:20px; background:#fff; box-shadow:0 9px 28px rgba(55,37,73,.055); }
.supervision-technician-heading { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:10px; }
.supervision-technician-heading>div { display:flex; min-width:0; flex-direction:column; gap:3px; }
.supervision-technician-heading strong { overflow:hidden; color:#372549; font-size:.78rem; text-overflow:ellipsis; white-space:nowrap; }
.supervision-technician-heading small { color:#8a838d; font-size:.6rem; }
.supervision-avatar { display:grid; width:42px; height:42px; place-items:center; border-radius:14px; color:#fff; background:#5d496c; font-size:.7rem; font-weight:600; }
.supervision-active-total { display:flex; min-width:46px; flex-direction:column; align-items:flex-end; color:#372549; font-size:1.12rem; font-weight:600; }
.supervision-active-total small { font-size:.53rem; font-weight:400; }
.supervision-count-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; margin-top:14px; }
.supervision-count-grid button { display:flex; min-width:0; min-height:60px; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:6px 2px; border:0; border-radius:12px; color:#5d496c; background:#f6f4f7; cursor:pointer; }
.supervision-count-grid button strong { font-size:1rem; }
.supervision-count-grid button span { overflow:hidden; width:100%; font-size:.5rem; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.supervision-count-grid .status-stopped { color:#8d293f; background:#fbedef; }
.supervision-count-grid .status-in-progress { color:#496244; background:#eef3e7; }
.supervision-count-grid .status-completed { color:#667070; background:#f0f2f2; }
.supervision-inline-back { display:flex; align-self:flex-start; align-items:center; gap:6px; padding:7px 10px; border:0; border-radius:11px; color:#5d496c; background:#ede8f0; cursor:pointer; font-size:.62rem; font-weight:600; }
.supervision-inline-back .app-icon { width:16px; height:16px; }
.supervision-detail-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:0 2px; }
.supervision-detail-heading>div { display:flex; flex-direction:column; }
.supervision-detail-heading small { color:#8a838d; font-size:.61rem; }
.supervision-detail-total { display:grid; width:40px; height:40px; place-items:center; border-radius:14px; color:#fff; background:#5d496c; font-size:.82rem; font-weight:600; }
.supervision-filters { display:flex; gap:7px; overflow-x:auto; padding:2px 1px 6px; scrollbar-width:none; }
.supervision-filters::-webkit-scrollbar { display:none; }
.supervision-filters button { display:flex; flex:0 0 auto; align-items:center; gap:6px; padding:8px 10px; border:1px solid #ddd7e1; border-radius:999px; color:#6b5d73; background:#fff; cursor:pointer; font-size:.58rem; }
.supervision-filters button span { display:grid; min-width:20px; height:20px; place-items:center; border-radius:999px; background:#f2eff4; font-size:.55rem; }
.supervision-filters button.active { border-color:#5d496c; color:#fff; background:#5d496c; }
.supervision-filters button.active span { color:#372549; background:#dfe0b9; }
.supervision-breakdown-list>li { display:flex; flex-direction:column; gap:7px; padding:15px; border:1px solid rgba(55,37,73,.08); border-radius:18px; background:#fff; box-shadow:0 7px 24px rgba(55,37,73,.05); }
.supervision-breakdown-list>li>strong { color:#372549; font-size:.84rem; }
.supervision-breakdown-list>li>span { color:#63596a; font-size:.68rem; line-height:1.4; }
.supervision-breakdown-list>li>small { color:#8a838d; font-size:.61rem; }
.supervision-breakdown-list p { margin:2px 0; padding:9px 10px; border-radius:11px; color:#5d496c; background:#f6f4f7; font-size:.66rem; line-height:1.45; }
.supervision-breakdown-topline { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.supervision-breakdown-topline time { color:#8a838d; font-size:.56rem; }
.supervision-classification { display:flex; flex-wrap:wrap; gap:5px; }
.supervision-classification span { padding:5px 7px; border-radius:8px; color:#5d496c; background:#eeefd8; font-size:.55rem; }
.supervision-timeline { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:2px 0 0; }
.supervision-timeline div { display:flex; min-width:0; flex-direction:column; gap:2px; padding:7px; border-radius:9px; background:#faf9fa; }
.supervision-timeline dt { color:#8a838d; font-size:.51rem; }
.supervision-timeline dd { margin:0; color:#4f4258; font-size:.56rem; line-height:1.35; }
.supervision-follow-up { padding-top:7px; border-top:1px solid #eeeaf0; color:#5d496c!important; }
@media (max-width:380px) {
    .supervision-count-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .supervision-count-grid button span { font-size:.54rem; }
    .supervision-timeline { grid-template-columns:1fr; }
}