.personnel-hero{background:radial-gradient(circle at 83% 15%,rgba(86,227,159,.24),transparent 30%),linear-gradient(120deg,#091d39,#153d62 58%,#087f5b);border-radius:22px;padding:32px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:24px;box-shadow:0 20px 45px rgba(8,61,82,.22)}.personnel-hero h1{font-size:32px;margin:12px 0 6px}.personnel-hero p{margin:0;color:#c9e2e5;font-size:15px}.personnel-filter{display:flex;align-items:end;gap:12px}.personnel-filter label{font-size:12px;color:#cde1e5;display:flex;flex-direction:column;gap:6px}.personnel-filter select,.personnel-filter a{height:44px;border:1px solid rgba(255,255,255,.24);border-radius:11px;padding:0 15px;font:600 14px Sarabun;background:rgba(255,255,255,.12);color:#fff}.personnel-filter select option{color:#172033}.personnel-filter a{display:flex;align-items:center;text-decoration:none}.personnel-freshness{display:flex;justify-content:space-between;padding:12px 5px 0;color:#667085;font-size:12px}.personnel-freshness span:first-child{color:#079455}.personnel-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:16px}.personnel-kpis article{background:#fff;border:1px solid var(--line);border-radius:17px;padding:18px;display:flex;gap:13px;align-items:flex-start;box-shadow:0 6px 20px rgba(15,35,70,.045);position:relative;overflow:hidden}.personnel-kpis article:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:4px;background:var(--kpi)}.personnel-kpis .indigo{--kpi:#465fff;--soft:#eef2ff}.personnel-kpis .green{--kpi:#12b76a;--soft:#ecfdf3}.personnel-kpis .violet{--kpi:#7a5af8;--soft:#f4f0ff}.personnel-kpis .orange{--kpi:#f79009;--soft:#fff7e8}.personnel-kpis .rose{--kpi:#f04438;--soft:#fff1f0}.personnel-kpi-icon{width:43px;height:43px;border-radius:13px;display:grid;place-items:center;background:var(--soft);color:var(--kpi);font-size:20px;flex:0 0 auto}.personnel-kpis small{font-size:12px;color:#667085}.personnel-kpis strong{display:block;font-size:26px;line-height:1.1;margin:7px 0 5px}.personnel-kpis p{font-size:10.5px;color:#98a2b3;margin:0}.personnel-kpis .status-good{color:#079455}.personnel-kpis .status-watch{color:#b54708}.personnel-kpis .status-critical{color:#d92d20}.personnel-grid{display:grid;gap:16px;margin-top:16px}.personnel-grid.main-row{grid-template-columns:.85fr 1.15fr}.personnel-grid.insight-row{grid-template-columns:.68fr 1.32fr}.personnel-grid.final-row{grid-template-columns:1fr 1fr}.personnel-panel{border-radius:18px;padding:22px}.personnel-panel .panel-header h2{font-size:19px}.personnel-panel .panel-header p{font-size:12px}.personnel-donut-layout{display:flex;align-items:center;gap:24px;margin-top:20px}.personnel-donut{width:205px;height:205px;position:relative;flex:0 0 auto}.personnel-donut>div{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}.personnel-donut>div strong{font-size:28px}.personnel-donut>div span{font-size:11px;color:#98a2b3}.personnel-donut-layout ul{list-style:none;padding:0;margin:0;flex:1}.personnel-donut-layout li{display:grid;grid-template-columns:9px 1fr auto;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid #f2f4f7;font-size:12px}.personnel-donut-layout li i{width:9px;height:9px;border-radius:50%;background:var(--dot)}:root{--chart-1:#465fff;--chart-2:#12b76a;--chart-3:#7a5af8;--chart-4:#f79009;--chart-5:#f04438;--chart-6:#06aed4}.personnel-chart{height:270px;margin-top:18px}.personnel-chart.tall{height:315px}.ratio-badge{padding:6px 11px;border-radius:20px;font-size:11px}.ratio-badge.good{background:#ecfdf3;color:#067647}.ratio-badge.watch{background:#fff7e8;color:#b54708}.ratio-badge.critical{background:#fef3f2;color:#b42318}.ratio-badge.neutral{background:#f2f4f7;color:#475467}.ratio-visual{width:205px;height:205px;border-radius:50%;margin:25px auto 16px;background:conic-gradient(from 225deg,#12b76a 0 33%,#f79009 33% 66%,#f04438 66% calc(var(--ratio)*.75%),#edf1f6 0);position:relative;display:grid;place-items:center;clip-path:polygon(0 0,100% 0,100% 85%,50% 65%,0 85%)}.ratio-visual:after{content:"";position:absolute;inset:18px;background:#fff;border-radius:50%}.ratio-visual div{position:relative;z-index:1;text-align:center;margin-top:-15px}.ratio-visual strong{display:block;font-size:40px;color:#172033}.ratio-visual span{font-size:11px;color:#667085}.ratio-scale{display:flex;justify-content:space-between;font-size:10px;color:#98a2b3}.subject-panel .panel-header a{font-size:11px;text-decoration:none;color:#465fff;font-weight:700}.retirement-total{font-size:19px;color:#f79009}.personnel-links{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:9px;margin-top:16px}.personnel-links>div{grid-row:span 3;padding:10px}.personnel-links>div span,.personnel-links>div strong{display:block}.personnel-links>div span{color:#667085;font-size:12px}.personnel-links>div strong{font-size:20px;margin-top:4px}.personnel-links a{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:12px;border:1px solid #edf0f5;border-radius:11px;text-decoration:none;color:#344054;font-size:13px;font-weight:600}.personnel-links a:hover{border-color:#b9c4ff;background:#f8f9ff}.personnel-links a span{color:#12b76a}.personnel-links a b{color:#98a2b3}
@media(max-width:1350px){.personnel-kpis{grid-template-columns:repeat(3,1fr)}.personnel-links{grid-template-columns:1fr 1fr 1fr}.personnel-links>div{grid-row:auto;grid-column:1/-1}}@media(max-width:1050px){.personnel-grid.main-row,.personnel-grid.insight-row,.personnel-grid.final-row{grid-template-columns:1fr}.personnel-kpis{grid-template-columns:1fr 1fr}.personnel-hero{align-items:flex-start;flex-direction:column}}@media(max-width:640px){.personnel-hero{padding:24px 20px}.personnel-hero h1{font-size:27px}.personnel-filter{width:100%;flex-wrap:wrap}.personnel-filter label,.personnel-filter select,.personnel-filter a{flex:1}.personnel-freshness{flex-direction:column;gap:5px}.personnel-kpis{grid-template-columns:1fr}.personnel-donut-layout{flex-direction:column}.personnel-donut-layout ul{width:100%}.personnel-links{grid-template-columns:1fr}.personnel-chart{height:300px}.personnel-panel{padding:17px}}