/* Active work + designer KPI Bento — v0.12.0 */
.kanban-active{position:relative;overflow:hidden}
.kanban-active:before{content:"";position:absolute;inset:-1px;pointer-events:none;background:linear-gradient(105deg,transparent 15%,rgba(139,92,246,.12) 42%,rgba(34,211,238,.1) 50%,transparent 72%);transform:translateX(-110%);animation:active-sheen 5s ease-in-out infinite}
.kanban-active>*{position:relative;z-index:1}
.kanban-active .kanban-column-head i{position:relative;box-shadow:0 0 0 0 rgba(139,92,246,.55);animation:active-pulse 1.8s ease-out infinite}
.work-greeting{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px;padding:16px 18px;border:1px solid rgba(139,92,246,.18);border-radius:18px;background:linear-gradient(135deg,rgba(139,92,246,.15),rgba(34,211,238,.07),rgba(20,25,38,.78));box-shadow:0 14px 34px rgba(0,0,0,.1)}.work-greeting h1{margin:4px 0;font-size:clamp(20px,2.5vw,29px)}.work-greeting h1 span{color:#a78bfa}.work-greeting p{margin:0;color:#aeb8cc;font-size:10px}.greeting-state{display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid rgba(16,185,129,.22);border-radius:999px;background:rgba(16,185,129,.08);color:#a7f3d0;font-size:9px;white-space:nowrap}.greeting-state i{width:7px;height:7px;border-radius:50%;background:#10b981;box-shadow:0 0 0 0 rgba(16,185,129,.5);animation:live-pulse 1.6s ease-out infinite}
.kanban-toolbar h2{margin:0;font-size:18px;line-height:1.25}
.kanban-quick{display:grid;grid-template-columns:minmax(180px,1fr) auto;align-items:center;gap:12px;margin:10px 0 0;padding:10px;border:1px solid rgba(139,92,246,.22);border-radius:12px;background:rgba(139,92,246,.07)}
.kanban-live{display:flex;align-items:center;gap:9px;min-width:0}.kanban-live>span:last-child{display:grid;gap:2px;min-width:0}.kanban-live strong{font-size:11px;color:#fff}.kanban-live small{color:#94a3b8;font-size:9px;line-height:1.35}
.live-spinner{width:17px;height:17px;flex:0 0 17px;border:2px solid rgba(167,139,250,.22);border-top-color:#a78bfa;border-right-color:#22d3ee;border-radius:50%;animation:live-spin .9s linear infinite}
.kanban-quick .quick-grid{display:grid;grid-template-columns:repeat(4,minmax(72px,1fr));gap:5px}.kanban-quick .quick-grid button{min-height:32px;padding:5px 8px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:rgba(255,255,255,.07);color:#e8edff;font-size:9px;white-space:nowrap}.kanban-quick .quick-grid button:hover{background:rgba(139,92,246,.24);border-color:rgba(139,92,246,.42)}
.kpi-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:14px}.kpi-head h1{margin:4px 0;font-size:clamp(21px,2.6vw,30px)}.kpi-head p{margin:0;color:#94a3b8;font-size:11px}
.designer-kpi-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.designer-kpi-bento>.glass{min-width:0;padding:13px;border-radius:15px}
.kpi-target-card{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;min-height:126px;background:linear-gradient(145deg,rgba(139,92,246,.18),rgba(20,25,38,.84))!important}.kpi-target-card h2{margin:7px 0 4px;font-size:30px;line-height:1}.kpi-target-card h2 small{margin-left:5px;color:#aeb8cc;font-size:10px}.kpi-target-card p{margin:0;color:#aeb8cc;font-size:9px}.kpi-progress{grid-column:1/-1;height:6px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.08)}.kpi-progress i,.mini-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8b5cf6,#22d3ee)}
.kpi-ring{width:88px;height:88px;padding:8px;border-radius:50%;background:conic-gradient(#8b5cf6 var(--progress),rgba(255,255,255,.08) 0);box-shadow:0 0 26px rgba(139,92,246,.15)}.kpi-ring>span{width:100%;height:100%;display:grid;place-content:center;text-align:center;border-radius:50%;background:#141927}.kpi-ring strong{font-size:18px}.kpi-ring small{color:#94a3b8;font-size:8px}
.kpi-mini{min-height:96px;display:flex;flex-direction:column;justify-content:space-between;gap:4px}.kpi-mini>span{color:#aeb8cc;font-size:8px;text-transform:uppercase;letter-spacing:.08em}.kpi-mini>strong{font-size:21px;line-height:1.1}.kpi-mini>strong small{margin-left:3px;color:#94a3b8;font-size:9px}.kpi-mini>small{color:#94a3b8;font-size:8px}.kpi-mini.violet{background:linear-gradient(145deg,rgba(139,92,246,.13),rgba(20,25,38,.82));box-shadow:inset 0 2px rgba(139,92,246,.55)}.kpi-mini.emerald{background:linear-gradient(145deg,rgba(16,185,129,.12),rgba(20,25,38,.82));box-shadow:inset 0 2px rgba(16,185,129,.55)}.kpi-mini.cyan{background:linear-gradient(145deg,rgba(34,211,238,.11),rgba(20,25,38,.82));box-shadow:inset 0 2px rgba(34,211,238,.55)}.kpi-mini.amber{background:linear-gradient(145deg,rgba(245,158,11,.11),rgba(20,25,38,.82));box-shadow:inset 0 2px rgba(245,158,11,.55)}.mini-bar{height:4px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.08)}
.kpi-analysis{grid-column:span 2}.kpi-analysis .report-table{margin:10px 0 0;border:0;border-radius:11px;background:rgba(10,15,25,.42);box-shadow:none}.kpi-analysis .report-table>div{grid-template-columns:minmax(0,1fr) auto auto;padding:9px 10px;border-color:rgba(255,255,255,.07);font-size:9px}.kpi-analysis .report-table strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpi-analysis .report-table span{color:#aeb8cc}.kpi-longest{grid-column:1/-1}.kpi-long-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:6px;margin-top:10px}.kpi-long-list button{min-width:0;padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:11px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;text-align:left;background:rgba(10,15,25,.42);color:#fff;cursor:pointer}.kpi-long-list button>span{min-width:0;display:grid;gap:2px}.kpi-long-list strong,.kpi-long-list small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpi-long-list strong{font-size:10px}.kpi-long-list small{color:#94a3b8;font-size:8px}.kpi-long-list b{font-size:9px;color:#c4b5fd}.kpi-long-list em{color:#94a3b8;font-style:normal}
[data-theme="light"] .kanban-quick{background:rgba(255,255,255,.62);border-color:rgba(139,92,246,.22)}[data-theme="light"] .kanban-live strong{color:#172033}[data-theme="light"] .kanban-quick .quick-grid button{background:#eef0fa;border-color:#d9deeb;color:#343c52}[data-theme="light"] .kanban-quick .quick-grid button:hover{background:#e8e3ff}[data-theme="light"] .kpi-target-card{background:linear-gradient(145deg,rgba(139,92,246,.13),rgba(255,255,255,.82))!important}[data-theme="light"] .kpi-target-card h2,[data-theme="light"] .kpi-mini>strong{color:#172033}[data-theme="light"] .kpi-ring>span{background:#fff}[data-theme="light"] .kpi-progress,[data-theme="light"] .mini-bar{background:#e4e7ee}[data-theme="light"] .kpi-analysis .report-table,[data-theme="light"] .kpi-long-list button{background:rgba(248,250,252,.82);border-color:#e1e6ee}[data-theme="light"] .kpi-long-list button{color:#172033}
.kanban-card h3{font-size:15px!important;line-height:1.3}.kanban-card[data-job-status="Baru"]{background:linear-gradient(145deg,rgba(59,130,246,.12),rgba(10,15,25,.78))!important;border-color:rgba(96,165,250,.2)!important}.kanban-card[data-job-status="Sedang desain"]{background:linear-gradient(145deg,rgba(139,92,246,.2),rgba(10,15,25,.8))!important;border-color:rgba(167,139,250,.35)!important}.kanban-card[data-job-status="Dijeda"],.kanban-card[data-job-status="Menunggu"]{background:linear-gradient(145deg,rgba(245,158,11,.13),rgba(10,15,25,.78))!important;border-color:rgba(245,158,11,.24)!important}.kanban-card[data-job-status="Preview"]{background:linear-gradient(145deg,rgba(34,211,238,.12),rgba(10,15,25,.78))!important;border-color:rgba(34,211,238,.22)!important}.kanban-card[data-job-status="Selesai"]{background:linear-gradient(145deg,rgba(16,185,129,.12),rgba(10,15,25,.78))!important;border-color:rgba(16,185,129,.22)!important}
[data-theme="light"] .work-greeting{background:linear-gradient(135deg,rgba(139,92,246,.1),rgba(34,211,238,.06),rgba(255,255,255,.84));border-color:rgba(139,92,246,.16)}[data-theme="light"] .work-greeting p{color:#64748b}[data-theme="light"] .greeting-state{color:#047857}[data-theme="light"] .kanban-card[data-job-status="Baru"]{background:linear-gradient(145deg,#eff6ff,#fff)!important}[data-theme="light"] .kanban-card[data-job-status="Sedang desain"]{background:linear-gradient(145deg,#f4f0ff,#fff)!important}[data-theme="light"] .kanban-card[data-job-status="Dijeda"],[data-theme="light"] .kanban-card[data-job-status="Menunggu"]{background:linear-gradient(145deg,#fff8e8,#fff)!important}[data-theme="light"] .kanban-card[data-job-status="Preview"]{background:linear-gradient(145deg,#ecfeff,#fff)!important}[data-theme="light"] .kanban-card[data-job-status="Selesai"]{background:linear-gradient(145deg,#ecfdf5,#fff)!important}[data-theme="light"] .kpi-mini.violet{background:linear-gradient(145deg,#f4f0ff,#fff)}[data-theme="light"] .kpi-mini.emerald{background:linear-gradient(145deg,#ecfdf5,#fff)}[data-theme="light"] .kpi-mini.cyan{background:linear-gradient(145deg,#ecfeff,#fff)}[data-theme="light"] .kpi-mini.amber{background:linear-gradient(145deg,#fff8e8,#fff)}
@keyframes active-pulse{0%{box-shadow:0 0 0 0 rgba(139,92,246,.52)}70%,100%{box-shadow:0 0 0 8px rgba(139,92,246,0)}}
@keyframes live-pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}70%,100%{box-shadow:0 0 0 7px rgba(16,185,129,0)}}
@keyframes live-spin{to{transform:rotate(360deg)}}
@keyframes active-sheen{0%,62%{transform:translateX(-110%)}82%,100%{transform:translateX(110%)}}
/* Desktop job detail: timeline | order information | workflow */
@media(min-width:1001px){
  .detail-sections{grid-template-columns:minmax(250px,.9fr) minmax(270px,1fr) minmax(290px,1.08fr);grid-template-areas:"timeline customer process" "timeline order quality" "timeline summary actions";align-items:start;gap:12px}
  .detail-sections>.detail-section:nth-child(1){grid-area:customer}
  .detail-sections>.detail-section:nth-child(2){grid-area:order}
  .detail-sections>.detail-section:nth-child(3){grid-area:process}
  .detail-sections>.detail-section:nth-child(4){grid-area:quality}
  .detail-sections>.detail-section:nth-child(5){grid-area:summary}
  .detail-sections>.detail-section:nth-child(6){grid-area:actions}
  .detail-sections>.detail-section:nth-child(7){grid-area:timeline;position:sticky;top:74px;max-height:calc(100vh - 96px);overflow:auto}
  .detail-sections>.details-wide{grid-column:auto}
  .detail-sections .timeline{margin-top:10px}
}
@media(max-width:900px){.designer-kpi-bento{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi-target-card{grid-column:1/-1}.kpi-analysis{grid-column:span 1}.kanban-quick{grid-template-columns:1fr}.kanban-quick .quick-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:640px){.work-greeting{align-items:flex-start;padding:13px 14px;border-radius:15px}.work-greeting h1{font-size:20px}.work-greeting p{font-size:9px}.greeting-state{padding:6px 8px;font-size:8px}.kanban-quick{padding:9px}.kanban-quick .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kanban-quick .quick-grid button{white-space:normal}.kpi-head{align-items:start}.designer-kpi-bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.designer-kpi-bento>.glass{padding:12px;border-radius:14px}.kpi-target-card,.kpi-analysis,.kpi-longest{grid-column:1/-1}.kpi-ring{width:74px;height:74px}.kpi-target-card h2{font-size:27px}.kpi-mini{min-height:92px}.kpi-mini>strong{font-size:19px}.kpi-analysis .report-table>div{grid-template-columns:minmax(0,1fr) auto}.kpi-analysis .report-table span:last-child{grid-column:1/-1;text-align:left}.kpi-long-list{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.kanban-active:before,.kanban-active .kanban-column-head i,.live-spinner,.greeting-state i{animation:none}}