:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:#172033;background:#f3f5f8;font-synthesis:none}*{box-sizing:border-box}body{margin:0}label{display:grid;gap:5px;font-size:13px;font-weight:700}.loading,.empty{padding:42px;text-align:center;color:#64748b}.shell{min-height:100vh}.top{position:sticky;top:0;z-index:10;background:#172554;color:#fff;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;box-shadow:0 5px 20px #17255422}.brand strong{font-size:18px}.brand small{display:block;color:#c7d2fe;margin-top:2px}.sync{font-size:12px;padding:7px 10px;border-radius:999px;background:#ffffff18}.sync.online{background:#14532d}.sync.offline{background:#991b1b}.nav{display:flex;gap:4px;background:#fff;border-bottom:1px solid #e2e8f0;padding:8px 18px;overflow:auto}.nav button,.btn{border:0;border-radius:9px;padding:9px 13px;background:#e8edf5;color:#1e293b;font-weight:650;cursor:pointer}.nav [data-logout]{margin-left:auto}.nav button.active,.btn.primary{background:#4f46e5;color:#fff}.btn.danger{background:#fee2e2;color:#b91c1c}.btn.small{padding:6px 9px;font-size:12px}.page{width:min(1120px,100%);margin:auto;padding:18px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.toolbar h1{font-size:21px;margin:0}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}.card{background:#fff;border:1px solid #e1e6ee;border-radius:14px;padding:15px;box-shadow:0 3px 12px #0f172a0b}.card.active-job{border:2px solid #4f46e5;box-shadow:0 0 0 4px #4f46e518}.card h3{margin:7px 0;font-size:17px}.muted{color:#64748b}.meta{font-size:12px;color:#64748b;display:flex;gap:8px;flex-wrap:wrap}.badge{display:inline-flex;border-radius:999px;padding:4px 8px;font-size:11px;font-weight:750;background:#e2e8f0}.s-Baru{background:#dbeafe!important;color:#1d4ed8}.s-Sedang-desain{background:#c7d2fe!important;color:#3730a3}.s-Dijeda,.s-Menunggu,.s-Preview{background:#fef3c7!important;color:#92400e}.s-Selesai{background:#dcfce7!important;color:#166534}.s-Dibatalkan{background:#fee2e2!important;color:#991b1b}.actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.form-card{max-width:760px;margin:24px auto;background:#fff;border:1px solid #dde3ed;border-radius:16px;padding:22px;box-shadow:0 14px 35px #0f172a12}.form-card h1,.form-card h2{margin-top:0}.auth{max-width:650px}.auth form{display:grid;gap:12px}.input{width:100%;border:1px solid #cbd5e1;border-radius:9px;padding:10px 11px;background:#fff;font:inherit}.cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}.notice{padding:11px 12px;border-radius:10px;background:#eef2ff;color:#3730a3;font-size:13px;margin:10px 0}.timeline{border-left:2px solid #c7d2fe;margin:12px 4px;padding-left:15px}.event{margin:0 0 12px}.event small{display:block;color:#64748b}.team-row{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-top:10px}.error{background:#fee2e2;color:#991b1b;padding:10px;border-radius:9px;margin:10px 0;font-size:13px}.active-strip{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;background:#eef2ff;border:1px solid #a5b4fc;border-radius:15px;padding:13px;margin-bottom:16px}.active-strip div:first-child{display:grid;gap:3px}.active-strip small,.active-strip span{color:#64748b}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.quick-grid button{border:0;border-radius:8px;background:#f59e0b;color:#fff;padding:7px 9px;font-weight:700}.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.detail-grid p{display:grid;gap:4px}.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:24px}.stats>div{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:12px;display:grid;grid-template-columns:auto 1fr;gap:3px 8px;align-items:center}.stats strong{font-size:22px}.stats small{grid-column:2;color:#64748b}.dot{width:10px;height:10px;border-radius:50%}.month{max-width:180px}@media(max-width:700px){.page{padding:12px}.cols,.detail-grid{grid-template-columns:1fr}.stats{grid-template-columns:repeat(3,1fr)}.active-strip{grid-template-columns:1fr}.top{padding:12px}.brand strong{font-size:16px}}