:root {
 --primary:#0b6b62;--primary-dark:#064e47;--primary-soft:#e8f7f4;--accent:#18a999;--navy:#123a4a;
 --bg:#f4f8f8;--surface:#fff;--surface-soft:#f8fbfb;--text:#16312f;--muted:#667a77;--line:#dce8e6;
 --danger:#b42318;--danger-soft:#fff0ef;--success-soft:#e8f8f3;--shadow-sm:0 3px 12px rgba(15,65,59,.06);
 --shadow-md:0 16px 42px rgba(15,65,59,.10);--radius-sm:10px;--radius-md:16px;--radius-lg:22px
}
*{box-sizing:border-box}html{color-scheme:light;scroll-behavior:smooth}
body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:16px;line-height:1.55;color:var(--text);background:radial-gradient(circle at 100% 0,rgba(24,169,153,.08),transparent 28rem),var(--bg);-webkit-font-smoothing:antialiased}
a{color:var(--primary);text-underline-offset:3px}h1,h2,h3{line-height:1.2;letter-spacing:-.025em}h1{margin:0 0 .55rem;font-size:clamp(1.65rem,3vw,2.3rem)}h2{margin:0 0 1rem;font-size:clamp(1.2rem,2vw,1.5rem)}h3{margin:0 0 .55rem;font-size:1.08rem}p{margin:.45rem 0 1rem}code{padding:.12rem .38rem;border-radius:6px;color:var(--navy);background:#edf4f3}
.login-page{min-height:100vh;display:grid;place-items:center;padding:28px 18px;background:radial-gradient(circle at 12% 18%,rgba(40,205,184,.24),transparent 24rem),radial-gradient(circle at 88% 84%,rgba(20,92,111,.22),transparent 27rem),linear-gradient(145deg,#063d3b,#0b6b62 52%,#123a4a)}
.card{position:relative;width:min(100%,460px);padding:40px;overflow:hidden;background:rgba(255,255,255,.98);border:1px solid rgba(255,255,255,.7);border-radius:var(--radius-lg);box-shadow:0 28px 80px rgba(0,30,29,.28)}
.card::before{content:"K";display:grid;place-items:center;width:52px;height:52px;margin-bottom:24px;color:#fff;font-size:1.4rem;font-weight:850;border-radius:15px;background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:0 10px 25px rgba(11,107,98,.25)}
.brand{margin:0 0 6px;color:var(--navy);font-size:1.9rem}.subtitle{margin:0 0 26px;color:var(--muted)}
label{display:block;margin:15px 0 7px;font-size:.9rem;font-weight:750;color:#294c48}
input,select,textarea{width:100%;min-height:46px;padding:11px 13px;color:var(--text);background:var(--surface);border:1px solid #cbdad8;border-radius:var(--radius-sm);font:inherit;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
textarea{width:180px;min-height:86px;resize:vertical}.wide-textarea{width:100%;min-height:112px}input::placeholder,textarea::placeholder{color:#8da09d}input:hover,select:hover,textarea:hover{border-color:#a9c4c0}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(24,169,153,.13)}input:disabled,textarea:disabled,select:disabled{color:#526662;background:#eef3f2;cursor:not-allowed}input[type="file"]{padding:8px;background:var(--surface-soft)}
button,.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 17px;color:#fff;background:linear-gradient(135deg,var(--primary),#0c7d72);border:0;border-radius:var(--radius-sm);box-shadow:0 5px 14px rgba(11,107,98,.17);font:inherit;font-weight:760;line-height:1.15;text-align:center;text-decoration:none;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
button:hover,.button:hover{color:#fff;background:linear-gradient(135deg,var(--primary-dark),var(--primary));box-shadow:0 8px 18px rgba(11,107,98,.22);transform:translateY(-1px)}button:focus-visible,.button:focus-visible,a:focus-visible{outline:3px solid rgba(24,169,153,.35);outline-offset:3px}.full{width:100%;margin-top:24px}.button-small{min-height:36px;padding:8px 11px;font-size:.84rem}.button-danger{background:var(--danger);box-shadow:none}.button-danger:hover{background:#8f1d14}
.alert{padding:13px 15px;margin:14px 0;border:1px solid transparent;border-radius:var(--radius-sm)}.alert-danger{color:#8d2018;background:var(--danger-soft);border-color:#ffd4cf}.alert-success{color:var(--primary-dark);background:var(--success-soft);border-color:#c8eee3}
.topbar{position:relative;z-index:20;min-height:72px;padding:14px max(4%,calc((100% - 1180px)/2));display:flex;align-items:center;justify-content:space-between;gap:24px;color:#fff;background:linear-gradient(105deg,#064e47,var(--primary) 62%,#126477);box-shadow:0 7px 24px rgba(6,78,71,.16)}
.topbar strong{display:flex;align-items:center;gap:11px;font-size:1.02rem;letter-spacing:-.01em}.topbar strong::before{content:"K";display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border:1px solid rgba(255,255,255,.25);border-radius:11px;background:rgba(255,255,255,.14);font-weight:850}.topbar span,.userbar{font-size:.92rem;color:rgba(255,255,255,.9)}.topbar a{color:#fff;font-weight:700;text-decoration:none}.topbar a:hover{text-decoration:underline}
.nav{position:sticky;top:0;z-index:15;display:flex;gap:5px;padding:9px max(4%,calc((100% - 1180px)/2));overflow-x:auto;background:rgba(255,255,255,.94);border-bottom:1px solid rgba(205,223,220,.9);box-shadow:var(--shadow-sm);backdrop-filter:blur(14px);scrollbar-width:thin}.nav a{flex:0 0 auto;padding:9px 11px;color:#315652;border-radius:9px;font-size:.84rem;font-weight:720;text-decoration:none;transition:color .16s ease,background .16s ease}.nav a:hover{color:var(--primary-dark);background:var(--primary-soft)}.nav-toggle{display:none;min-height:38px;padding:8px 11px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.28);box-shadow:none}
.container{width:min(1180px,92%);margin:34px auto 56px}.welcome{position:relative;padding:clamp(24px,4vw,38px);overflow:hidden;color:#fff;background:linear-gradient(120deg,#123a4a,#0b6b62 68%,#18a999);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.welcome::after{content:"";position:absolute;right:-55px;bottom:-85px;width:240px;height:240px;border:36px solid rgba(255,255,255,.08);border-radius:50%}.welcome h1{position:relative;z-index:1;margin-top:14px}.welcome p{position:relative;z-index:1;margin-bottom:0;color:rgba(255,255,255,.82)}.welcome .badge{color:#eafffa;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.18)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:18px;margin-top:22px}.menu-card,.panel,.kpi{background:var(--surface);border:1px solid rgba(211,226,223,.82);box-shadow:var(--shadow-sm)}.menu-card{position:relative;min-height:190px;padding:23px;display:flex;flex-direction:column;align-items:flex-start;border-radius:var(--radius-md);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.menu-card::before{content:"";width:38px;height:5px;margin-bottom:20px;border-radius:99px;background:linear-gradient(90deg,var(--primary),var(--accent))}.menu-card:hover{transform:translateY(-3px);border-color:#b9d9d4;box-shadow:0 15px 34px rgba(15,65,59,.11)}.menu-card p{flex:1;color:var(--muted)}
.badge{display:inline-flex;align-items:center;min-height:30px;padding:5px 10px;color:var(--primary-dark);background:var(--primary-soft);border:1px solid #d0eee8;border-radius:999px;font-size:.79rem;font-weight:780}.small{color:var(--muted);font-size:.84rem}
.page-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:0 0 20px}.page-head>div:last-child{display:flex;flex-wrap:wrap;gap:8px}.page-head h1{margin-bottom:.2rem}.panel{padding:clamp(18px,3vw,25px);margin-bottom:22px;overflow-x:auto;border-radius:var(--radius-md)}.panel>:first-child{margin-top:0}.panel>:last-child{margin-bottom:0}
table{width:100%;min-width:720px;border-collapse:separate;border-spacing:0}th,td{padding:13px 12px;text-align:left;vertical-align:top;border-bottom:1px solid #e4eceb}th{color:#335854;background:#edf7f5;font-size:.82rem;font-weight:790;letter-spacing:.015em}th:first-child{border-radius:9px 0 0 9px}th:last-child{border-radius:0 9px 9px 0}tbody tr{transition:background .14s ease}tbody tr:hover,table>tr:not(:first-child):hover{background:#f7fbfa}tr:last-child td{border-bottom:0}
.actions{display:flex;flex-wrap:wrap;gap:7px}.inline-form{display:inline}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 20px}.form-grid .span-2{grid-column:span 2}.weight-ok,.category-good{color:#08775f;font-weight:780}.weight-bad,.category-low{color:var(--danger);font-weight:780}
.progress,.bar-track{overflow:hidden;background:#e4eeec;border-radius:999px}.progress{height:10px}.progress span,.bar-fill{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:inherit}.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:20px 0}.kpi{padding:21px;border-radius:var(--radius-md)}.kpi-value{display:block;margin-top:8px;color:var(--primary);font-size:clamp(1.65rem,4vw,2.2rem);font-weight:850}.bar-row{display:grid;grid-template-columns:minmax(135px,1fr) 3fr 55px;align-items:center;gap:11px;margin:13px 0}.bar-track{height:14px}.assessment-table{min-width:1450px}.assessment-table textarea{width:175px}
@media print{.topbar,.nav,.nav-toggle,.no-print,button,.button{display:none!important}body{background:#fff}.container{width:100%;margin:0}.panel,.kpi,.welcome{color:#111;background:#fff;box-shadow:none;border:1px solid #ddd}}
@media(max-width:760px){body{font-size:15px}.topbar{min-height:66px;padding:12px 4%;align-items:center}.topbar strong{font-size:.92rem}.topbar strong::before{width:34px;height:34px;flex-basis:34px}.topbar span,.userbar{display:none}.nav-toggle{display:inline-flex}.nav{position:relative;top:auto;display:none;padding:8px 4% 13px;flex-direction:column;overflow:visible}.nav.is-open{display:flex}.nav a{width:100%;padding:11px 12px}.container{width:min(94%,680px);margin:24px auto 42px}.page-head{align-items:flex-start;flex-direction:column}.page-head>div:last-child{width:100%}.page-head>div:last-child .button{flex:1 1 auto}.form-grid{grid-template-columns:1fr}.form-grid .span-2{grid-column:span 1}.panel{padding:18px}.panel:has(table)::after{content:"Geser tabel ke samping untuk melihat kolom lainnya";display:block;margin-top:12px;color:var(--muted);font-size:.8rem}.actions{min-width:145px}.bar-row{grid-template-columns:1fr 45px}.bar-row .bar-track{grid-column:1/-1;grid-row:2}textarea,.assessment-table textarea{width:150px}}
@media(max-width:480px){.login-page{padding:16px}.card{padding:28px 22px;border-radius:18px}.card::before{width:46px;height:46px;margin-bottom:20px}.welcome{padding:24px 21px}.grid{grid-template-columns:1fr}.menu-card{min-height:165px}button,.button{min-height:43px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

/* Dashboard grafik hasil kinerja */
.chart-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin:22px 0}.chart-panel{overflow:hidden}.chart-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}.chart-heading h2{margin-bottom:4px}.chart-heading p{margin:0}.donut-layout{display:grid;grid-template-columns:minmax(180px,.8fr) minmax(220px,1.2fr);align-items:center;gap:26px}.donut-chart{width:min(220px,100%);aspect-ratio:1;margin:auto;display:grid;place-items:center;border-radius:50%;background:var(--donut-background);box-shadow:inset 0 0 0 1px rgba(10,70,64,.05);position:relative}.donut-chart::after{content:"";position:absolute;width:61%;height:61%;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(10,70,64,.05)}.donut-center{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;line-height:1.15}.donut-center strong{font-size:2rem;color:var(--navy)}.donut-center span{margin-top:5px;color:var(--muted);font-size:.82rem}.chart-legend{display:grid;gap:9px}.legend-row{display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:9px;padding-bottom:8px;border-bottom:1px solid #edf2f1}.legend-row:last-child{border-bottom:0}.legend-dot{width:10px;height:10px;border-radius:3px;background:var(--legend-color)}.legend-row strong,.status-chart-label strong{font-size:.9rem}.legend-row small,.status-chart-label small{color:var(--muted);font-weight:600}.status-chart-row{margin:0 0 16px}.status-chart-row:last-child{margin-bottom:0}.status-chart-label{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px;font-size:.88rem}.status-chart-row .bar-track{height:12px}.status-chart-row:nth-of-type(3n+1) .bar-fill{background:linear-gradient(90deg,#123a4a,#26758a)}.status-chart-row:nth-of-type(3n+2) .bar-fill{background:linear-gradient(90deg,#0b6b62,#18a999)}.status-chart-row:nth-of-type(3n) .bar-fill{background:linear-gradient(90deg,#d99b2b,#f2c666)}.unit-chart-scroll{overflow-x:auto;padding:8px 2px 4px}.unit-chart{min-width:max(660px,calc(var(--unit-count)*92px));height:330px;padding:18px 10px 0;display:grid;grid-template-columns:repeat(var(--unit-count),minmax(74px,1fr));gap:16px;align-items:end;border-bottom:1px solid var(--line);background:repeating-linear-gradient(to top,transparent 0,transparent calc(25% - 1px),#eaf0ef 25%)}.unit-column{height:100%;display:grid;grid-template-rows:26px 1fr 54px;align-items:end;text-align:center}.unit-column>strong{align-self:start;color:var(--primary);font-size:.82rem}.unit-bar-track{height:100%;display:flex;align-items:flex-end;justify-content:center}.unit-bar{width:min(48px,72%);min-height:3px;border-radius:9px 9px 3px 3px;background:linear-gradient(180deg,var(--accent),var(--primary));box-shadow:0 8px 16px rgba(11,107,98,.14);transition:filter .18s ease,transform .18s ease}.unit-column:hover .unit-bar{filter:saturate(1.2);transform:scaleX(1.06)}.unit-column>span{align-self:start;padding-top:9px;overflow:hidden;color:#46615e;font-size:.72rem;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.chart-empty{padding:48px 20px;text-align:center;color:var(--muted);background:var(--surface-soft);border:1px dashed var(--line);border-radius:var(--radius-sm)}
@media(max-width:900px){.chart-grid{grid-template-columns:1fr}.donut-layout{grid-template-columns:minmax(170px,.7fr) minmax(220px,1.3fr)}}
@media(max-width:560px){.chart-heading{align-items:flex-start}.donut-layout{grid-template-columns:1fr}.donut-chart{width:190px}.chart-legend{width:100%}.unit-chart{height:290px}.chart-grid{margin-top:18px}}