@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#061327;--nav:#07172f;--panel:#0d2442;--panel2:#102c50;--stroke:#1c4166;--text:#edf7ff;--muted:#8caecc;--accent:#28a8ff;--accent2:#5bd7ff;--green:#37d5aa;--warn:#ffcb69;--danger:#ff7a94;--radius:17px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse 1000px 700px at 75% -30%,#153e72 0,transparent 75%),var(--bg);font:14px/1.55 'Plus Jakarta Sans',Inter,system-ui,Arial,sans-serif;color:var(--text)}a{color:#81d6ff;text-decoration:none}a:hover{color:#fff}button,input,textarea,select{font:inherit}button{cursor:pointer}h1,h2,h3,p{margin-top:0}h1{font-size:25px}h2{font-size:26px;letter-spacing:-.7px}h3{font-size:16px;letter-spacing:-.25px}small{font-size:11px}label{display:grid;gap:8px;font-weight:600;font-size:12px;margin:12px 0;color:#c5d9ef}input,textarea,select{width:100%;background:#081a33;border:1px solid #285078;color:var(--text);border-radius:10px;padding:12px 13px;outline:none;transition:.2s;min-width:0}select{cursor:pointer}input:focus,textarea:focus,select:focus{border-color:#42b8ff;box-shadow:0 0 0 3px #28a8ff26}input::placeholder,textarea::placeholder{color:#6385a5}input[type=checkbox]{width:auto;accent-color:#29aeff;min-width:17px;height:17px}.app-shell{display:flex;min-height:100vh}.sidebar{width:260px;flex:0 0 260px;background:linear-gradient(180deg,#081b37,#06162a);border-right:1px solid var(--stroke);padding:25px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:10}.logo{display:flex;align-items:center;gap:11px;color:#fff;font-weight:800;letter-spacing:.15px;padding:0 11px 30px;font-size:17px}.logo b{color:var(--accent2)}.logo small{font-size:8px;letter-spacing:2px;color:#6798b9;display:block;font-weight:700}.star,.brand-mark{background:linear-gradient(135deg,#71e0ff,#2175ef);border-radius:14px;color:#fff;display:grid;place-items:center;box-shadow:0 5px 26px #13a8ff33}.star{font-size:26px;width:43px;height:43px}.side-caption{font-size:10px;color:#688eae;letter-spacing:1.7px;margin:9px 13px 15px;font-weight:800}.sidebar nav{display:grid;gap:5px}.sidebar nav a{display:flex;gap:14px;align-items:center;padding:12px 15px;border-radius:11px;color:#8faeca;font-weight:600;font-size:13px;transition:.2s}.sidebar nav a:hover,.sidebar nav a.selected{background:linear-gradient(90deg,#1461a955,#103a6755);color:#fff}.sidebar nav a.selected{box-shadow:inset 3px 0 #26b8ff}.sidebar nav a:first-letter{font-size:18px}.sidebar-bottom{margin-top:auto;border:1px solid var(--stroke);background:#0a223e;border-radius:13px;padding:12px;display:flex;align-items:center;gap:10px}.sidebar-bottom>a{margin-left:auto;color:#9bc9df;font-size:20px}.avatar{background:#1d6fb1;color:white;width:35px;height:35px;border-radius:11px;display:grid;place-items:center;font-weight:800}.identity{display:grid;min-width:0}.identity strong{font-size:12px;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.identity small{color:var(--muted);letter-spacing:1px}.main-area{flex:1;min-width:0;display:flex;flex-direction:column}.topbar{height:92px;border-bottom:1px solid #153353;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(20px,4vw,55px);background:#071b325c}.topbar small{letter-spacing:1.5px;color:#6997b7;font-weight:800}.topbar h1{font-size:20px;margin:1px 0}.top-actions{display:flex;align-items:center;gap:18px;color:#9fbcd4}.top-avatar{width:37px;height:37px}.menu-btn{display:none}.content{width:100%;max-width:1550px;margin:0 auto;padding:32px clamp(18px,3vw,45px);flex:1}.footer{color:#668bad;padding:20px;text-align:center;font-size:11px;border-top:1px solid #173251}.footer span{color:#62c6ff}.page-intro{display:flex;justify-content:space-between;margin-bottom:22px}.page-intro h2{margin:7px 0 3px}.page-intro p,.muted{color:var(--muted)}.page-intro p{margin:0}.eyebrow{font-size:10px;color:#4dceff;font-weight:800;letter-spacing:1.55px}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;margin:20px 0 22px}.metric{background:linear-gradient(145deg,#123457,#0b2240);border:1px solid #1e4773;padding:19px 21px;border-radius:var(--radius);position:relative;overflow:hidden}.metric::after{content:'✦';position:absolute;font-size:80px;color:#2fb5ff0b;right:-7px;top:-23px}.metric small{color:#a3c4df;display:block}.metric strong{display:block;font-size:31px;line-height:1.3;margin:8px 0 8px;letter-spacing:-1px}.metric strong em{font-size:13px;color:var(--muted);font-style:normal}.metric span{color:#68baf3;font-size:11px}.metric-link{color:inherit}.metric-link:hover{border-color:#42b8ff}.inventory-metrics{grid-template-columns:repeat(5,minmax(0,1fr))}.inventory-metrics .metric strong{font-size:26px}.columns{display:grid;gap:20px;align-items:start}.columns.two{grid-template-columns:1fr 1fr}.columns.two-thirds{grid-template-columns:minmax(0,1.65fr) minmax(290px,1fr)}.panel{background:linear-gradient(145deg,#0d2747,#0a1e38);border:1px solid var(--stroke);border-radius:var(--radius);padding:23px;min-width:0;margin-bottom:20px;box-shadow:0 15px 30px #0000000a}.panel h3{margin-bottom:15px}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}.panel-title h3{margin:0}.panel-title>a{font-size:12px;font-weight:700}.brand-stock{padding:13px 0;border-bottom:1px solid #1b3b5d}.brand-stock:last-child{border-bottom:none}.brand-stock>div:first-child{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:9px}.brand-stock strong{font-size:12px}.brand-stock small{color:var(--muted);text-align:right}.progress{height:7px;background:#163656;border-radius:20px;overflow:hidden}.progress i{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,#238fff,#56ddfd)}.rank-row{display:flex;align-items:center;gap:13px;padding:11px 0;border-bottom:1px solid #1d3d5d}.rank-row:last-child{border:0}.rank-pos{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:#164875;color:#a6e3ff;font-size:11px;font-weight:800}.rank-row b{flex:1;font-size:12px}.rank-row strong{font-size:12px;color:#51d9ff}.btn{background:#183a60;border:1px solid #28537a;color:#eaf8ff;padding:11px 16px;border-radius:10px;font-weight:800;font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.2s;white-space:nowrap}.btn:hover{transform:translateY(-1px);color:white;border-color:#49baff}.btn.primary{background:linear-gradient(110deg,#1875df,#22b4ff);border:1px solid #3caef8;box-shadow:0 5px 16px #138afb2a;color:#fff}.btn.outline,.btn.ghost{background:transparent;border-color:#2b5b86;color:#a4ddff}.btn.danger{background:#5e253e;border-color:#8c3153;color:#ffd4e0}.btn.small{padding:7px 9px;font-size:10px}.btn.full{width:100%;margin-top:10px}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.status{display:inline-block;border-radius:7px;padding:4px 7px;text-transform:uppercase;font-weight:800;font-size:9px;letter-spacing:.4px;white-space:nowrap}.status.success{color:#7dffdd;background:#14634f77}.status.info{color:#9adfff;background:#17629377}.status.warning{color:#ffdd97;background:#78552677}.status.danger{color:#ffa4b8;background:#7a304677}.status.muted{color:#a4b6ca;background:#43546b55}.table-wrap{overflow:auto;max-width:100%}table{width:100%;border-collapse:collapse;font-size:12px;text-align:left}th{color:#92b8d5;background:#15335260;font-size:10px;text-transform:uppercase;letter-spacing:.7px;font-weight:800}th,td{padding:13px 12px;border-bottom:1px solid #1a3a5a;vertical-align:middle}td{color:#dbeefb}tr:hover td{background:#ffffff03}.block{display:block}.inline-actions{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap}.inline-actions form{margin:0}.alert{border:1px solid #2b8b9d;background:#1261763e;border-radius:10px;padding:12px 17px;margin-bottom:18px;color:#aeedff}.alert.error{background:#7d2b3655;color:#ffd9e1;border-color:#ab3a55}.notice{padding:13px 15px;background:#123c6659;border-radius:10px;color:#9bc8ea;font-size:12px;margin-top:18px}.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px 15px}.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer}.field-title{margin-top:18px;color:#c5d9ef;font-size:12px;font-weight:700}.toolbar{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:18px}.toolbar label{margin:0;min-width:220px}.toolbar .btn{margin-top:auto;height:44px}.filters{background:#0b2747;border:1px solid #244a71;padding:17px;border-radius:var(--radius)}.compact-select{max-width:180px;padding:7px}.active-number{padding:18px;background:#102e53;border:1px solid #306ba0;border-radius:13px;margin:15px 0}.number-line{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:13px 0}.number-line strong{font-size:27px;letter-spacing:.8px}.empty-number{padding:30px 16px;text-align:center;background:#112c4b;border:1px dashed #2b658f;border-radius:13px}.empty-number p{color:var(--muted)}.big-icon{font-size:40px;color:#76dfff}.task-stack{min-width:0}.task-panel{padding:22px}.task-head{display:flex;justify-content:space-between;gap:10px}.task-head h3{margin:6px 0}.task-links{margin:17px 0}.link-input-row{display:flex;gap:8px}.link-slot{margin-bottom:12px}.link-slot label{display:flex;align-items:center;gap:8px;margin:0 0 6px}.side-panels .panel{position:relative}.achievement{padding:12px;border-radius:10px;background:#143859;border:1px solid #24577d;margin:8px 0;font-size:12px;font-weight:700}.podium{display:flex;gap:14px;justify-content:center;margin:20px 0 25px;flex-wrap:wrap}.podium-card{min-width:140px;flex:1;text-align:center;background:linear-gradient(145deg,#153f6b,#0d2b50);border:1px solid #2a5d89;border-radius:14px;padding:20px 12px;display:grid;gap:7px;justify-items:center}.podium-card:first-child{border-color:#b29338;box-shadow:0 0 20px #b2933820}.medal{font-size:35px}.podium-count{font-size:19px;color:#70ddff;font-weight:800}.truncate-link{display:block;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.narrow{max-width:600px}hr{border:0;border-top:1px solid #245176;margin:25px 0}.login-body{display:grid;min-height:100vh;place-items:center;padding:22px;background:radial-gradient(circle at 50% 10%,#174c82,#08182f 60%)}.auth-card{background:linear-gradient(145deg,#103359,#081d39);padding:36px;border:1px solid #2c5b83;border-radius:23px;width:100%;max-width:420px;box-shadow:0 25px 100px #0006;text-align:center}.auth-card .brand-mark{width:58px;height:58px;font-size:35px;margin:0 auto 16px}.auth-card h1{font-size:23px;letter-spacing:-.8px;margin:8px 0}.auth-card h1 span{color:#65d4ff}.auth-card p{color:var(--muted);font-size:12px}.auth-card form{text-align:left;margin:25px 0 17px}.auth-card small{color:#6e9fbc}.auth-card label{margin-bottom:18px}.install-card{max-width:650px}.install-card .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.install-card .full{grid-column:1/-1}
@media(max-width:1120px){.metric-grid,.inventory-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.columns.two-thirds{grid-template-columns:1fr}.side-panels{display:grid;grid-template-columns:1fr 1fr;gap:16px}.side-panels .panel{margin-bottom:0}}@media(max-width:800px){.sidebar{position:fixed;transform:translateX(-100%);transition:.25s;box-shadow:10px 0 40px #0005}.sidebar-open .sidebar{transform:translateX(0)}.menu-btn{display:block;background:none;border:1px solid #285078;border-radius:8px;color:white;padding:8px 12px;font-size:18px;margin-right:14px}.topbar{justify-content:flex-start;height:77px;padding:14px 18px}.top-actions{margin-left:auto}.today{display:none}.content{padding:22px 15px}.columns.two{grid-template-columns:1fr}.side-panels{grid-template-columns:1fr}.panel{padding:17px}.page-intro h2{font-size:22px}}@media(max-width:520px){.metric-grid,.inventory-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.metric{padding:13px}.metric strong{font-size:25px}.metric span{font-size:10px}.page-intro{display:block}.panel{margin-bottom:13px}.number-line strong{font-size:20px}.link-input-row{gap:5px}.link-input-row .btn{padding:10px}.install-card .form-grid{grid-template-columns:1fr}.podium-card{min-width:95px}.check-grid{grid-template-columns:1fr}.auth-card{padding:22px}.top-avatar{display:none}}

.grid-weights{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.user-awards{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}@media(max-width:650px){.grid-weights{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* JOBDESK STAR 4 — Premium Midnight / Electric Blue refresh */
:root{--bg:#030b19;--nav:#061226;--panel:#091a32;--panel2:#0c2546;--stroke:#20446c;--text:#f2f8ff;--muted:#9db9d7;--accent:#2196ff;--accent2:#52caff}
body{background:radial-gradient(ellipse 950px 560px at 70% -20%,#12417b 0%,transparent 72%),#030b19}
.sidebar{background:linear-gradient(180deg,#06152c,#030b19)}
.topbar{background:#06172ce8;border-bottom-color:#1b416c}
.panel{background:linear-gradient(145deg,#0c2443,#07182f);border-color:#24517d;box-shadow:0 12px 35px #00000030}
.metric{background:linear-gradient(135deg,#123a68,#091c37);border-color:#2864a0}
.btn.primary{background:linear-gradient(110deg,#126ce5,#21b2ff);border-color:#56c9ff;box-shadow:0 7px 20px #087af644}
.btn.primary:hover{filter:brightness(1.13)}
input,textarea,select{background:#06162d;border-color:#28547e}
input:focus,textarea:focus,select:focus{border-color:#3bb8ff;box-shadow:0 0 0 3px #259fff2b}
.status{font-size:10px;letter-spacing:.25px;padding:6px 9px;border-radius:8px;border:1px solid transparent}
.status.muted{background:#26364b;color:#d0d8e4;border-color:#526174}
.status.info{background:#103d76;color:#76caff;border-color:#287dce}
.status.success{background:#0b4c3e;color:#78f4ca;border-color:#218f74}
.status.danger{background:#642237;color:#ff9eaf;border-color:#ad4260}
.status.warning{background:#5a421b;color:#ffda8d;border-color:#9a7433}
.login-body{background:radial-gradient(circle at 50% 12%,#155092,#030b19 66%)}
.auth-card{background:linear-gradient(145deg,#0c2c53,#06172d);border-color:#326a9e}
@media(max-width:520px){.status{font-size:9px;padding:5px 7px;white-space:normal;text-align:center}}

/* JOBDESK STAR 4 - Monitoring Jobdesk & visual polish */
:root{--radius:16px}
.content{max-width:1540px}
.page-intro{align-items:center;gap:16px}
.heading-glow{color:#38bbff;text-shadow:0 0 22px #35bfff70}
.panel{box-shadow:0 12px 32px #00000023}
.metric-jump{font-size:11px;color:#7ed8ff;display:block;margin-top:10px;position:relative;z-index:1}
.monitor-filters{display:grid;grid-template-columns:minmax(165px,.9fr) minmax(170px,1fr) minmax(170px,1fr) auto auto;align-items:end;gap:12px}
.monitor-filters label{min-width:0;width:100%}
.monitor-filters button,.monitor-filters a{height:44px}
.monitor-metrics{margin-top:17px}
.monitor-panel .panel-title{align-items:center;margin-bottom:18px}
.monitor-subtext{font-size:12px;margin:3px 0 0}
.jobdesk-monitor-table{min-width:760px}
.jobdesk-monitor-table th{padding:14px}
.jobdesk-monitor-table td{padding:16px 14px}
.jobdesk-monitor-table .btn{font-size:11px}
.brand-pill{display:inline-block;background:#103358;border:1px solid #275783;border-radius:8px;color:#a9d8fa;padding:6px 10px;font-size:11px;font-weight:700}
.table-progress-meta{display:flex;justify-content:space-between;font-size:11px;margin-bottom:7px;gap:12px}
.table-progress-meta span{color:#8fb9dc}
.monitor-progress{height:7px;min-width:115px}
.monitor-active-row td{background:#12447a4a}
.empty-monitor{text-align:center;padding:38px 18px!important;color:#dcefff}
.empty-monitor-symbol{font-size:33px;color:#63c9ff;margin-bottom:7px}
.empty-monitor p{margin:5px 0 0;color:#93b3cf}
.detail-panel{scroll-margin-top:18px;border-color:#3476b5}
.detail-title{align-items:center;flex-wrap:wrap;margin-bottom:18px}
.detail-title h3{font-size:20px;margin:6px 0}
.detail-task-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.detail-task-card{min-width:0;border:1px solid #28537b;background:linear-gradient(155deg,#102c4d,#081b32);border-radius:13px;padding:17px}
.detail-task-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.detail-task-head h4{font-size:14px;line-height:1.5;margin:6px 0 0;overflow-wrap:anywhere}
.detail-task-meta{display:flex;gap:8px 14px;flex-wrap:wrap;color:#9abbd8;font-size:10px;margin:12px 0}
.detail-link-list{display:grid;gap:8px}
.detail-link-row{display:grid;grid-template-columns:54px minmax(0,1fr);align-items:start;gap:9px;border:1px solid #244769;background:#071a33;padding:10px;border-radius:9px;font-size:11px}
.detail-link-label{color:#8eaeca;font-weight:800}
.detail-link-row a{overflow-wrap:anywhere;word-break:break-word;line-height:1.6}
.sidebar nav a{min-height:41px}
@media(max-width:1180px){.monitor-filters{grid-template-columns:repeat(3,minmax(0,1fr))}.monitor-filters button,.monitor-filters a{width:100%}}
@media(max-width:900px){.detail-task-grid{grid-template-columns:1fr}}
@media(max-width:650px){.monitor-filters{grid-template-columns:1fr 1fr}.monitor-filters label:first-of-type{grid-column:1/-1}.page-intro{align-items:flex-start;flex-direction:column}.detail-task-card{padding:14px}.detail-task-head{align-items:flex-start}.monitor-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Patch: progress tugas Owner jelas dan tidak menempel */
.jobdesk-monitor-table th:nth-child(3),.jobdesk-monitor-table td:nth-child(3){min-width:210px;width:25%}
.jobdesk-monitor-table .table-progress-box{width:100%;min-width:175px;max-width:300px}
.jobdesk-monitor-table .table-progress-meta{display:flex!important;align-items:center;justify-content:space-between!important;flex-wrap:nowrap!important;gap:18px!important;width:100%;margin:0 0 9px!important;font-size:12px;line-height:1.5}
.jobdesk-monitor-table .table-progress-meta strong{color:#f0f8ff;font-size:12px;white-space:nowrap;font-weight:800}
.jobdesk-monitor-table .table-progress-meta span{color:#59c9ff;font-size:12px;font-weight:800;white-space:nowrap;text-align:right;margin-left:auto}
.jobdesk-monitor-table .monitor-progress{width:100%;height:9px;min-width:0;border-radius:99px;background:#1a3c5e}
.jobdesk-monitor-table .monitor-progress i{background:linear-gradient(90deg,#168ef2,#48caff);box-shadow:0 0 10px #18aaff55}