:root{--emerald: #0d6e4f;--emerald-light: #15a572;--emerald-dark: #084d38;--emerald-muted: #e6f4ef;--gold: #c9922a;--gold-light: #e8b84b;--gold-muted: #fdf3e0;--ink: #1a1a2e;--ink-soft: #3d4460;--ink-muted: #6b7094;--border: #e4e7f0;--card: #ffffff}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--surface: #f4f6fb;--red: #dc2626;--red-muted: #fef2f2}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Plus Jakarta Sans,sans-serif;background:var(--surface);color:var(--ink);min-height:100vh}.trk-header{background:linear-gradient(135deg,var(--emerald-dark),var(--emerald));padding:20px 16px 24px;position:relative;overflow:hidden}.trk-header:before{content:"";position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:50%;background:#ffffff0d;pointer-events:none}.trk-header:after{content:"";position:absolute;bottom:-50px;left:-20px;width:120px;height:120px;border-radius:50%;background:#c9922a14;pointer-events:none}.trk-header-inner{position:relative;z-index:1}.trk-header-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.trk-brand{display:flex;align-items:center;gap:8px}.trk-brand img{width:28px;height:28px;border-radius:6px;object-fit:contain}.trk-brand-name{font-size:13px;font-weight:700;color:#fffc;letter-spacing:.3px}.trk-live{display:flex;align-items:center;gap:5px;background:#ffffff1f;border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:4px 10px;font-size:11px;font-weight:700;color:#fff;letter-spacing:.6px}.trk-live-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;animation:livepulse 1.5s infinite}@keyframes livepulse{0%,to{box-shadow:0 0 #4ade8080}50%{box-shadow:0 0 0 5px #4ade8000}}.trk-masjid-name{font-size:20px;font-weight:700;color:#fff;line-height:1.2;text-shadow:0 1px 4px rgba(0,0,0,.25)}.trk-periode-name{font-size:13px;color:#ffffffd9;margin-top:4px;text-shadow:0 1px 3px rgba(0,0,0,.2)}.trk-body{padding:16px;display:flex;flex-direction:column;gap:14px;max-width:600px;margin:0 auto}.trk-left-col{display:contents}.rk-section{background:var(--card);border:1.5px solid var(--emerald);border-radius:14px;overflow:hidden;box-shadow:0 4px 20px #0d6e4f1f;margin-bottom:0}.rk-section-head{background:linear-gradient(135deg,var(--emerald-dark),var(--emerald));padding:11px 14px;display:flex;align-items:center;justify-content:space-between}.rk-section-title{font-size:15px;font-weight:600;color:#fff;letter-spacing:.2px}.rk-section-sub{font-size:10px;color:#ffffffa6;margin-top:1px}.rk-grid{display:grid;grid-template-columns:1fr;gap:10px;padding:12px}@media(min-width:480px){.rk-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:900px){.rk-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}}.rk-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:0 0 10px;overflow:hidden}.rk-bhead{display:flex;align-items:center;justify-content:space-between;gap:4px;background:#fff;border-bottom:1px solid var(--border);padding:8px 11px;margin-bottom:10px}.rk-btitle{font-size:12px;font-weight:700;color:var(--ink-soft);line-height:1.3;text-transform:uppercase;letter-spacing:.5px}.rk-btime{font-size:10px;color:var(--emerald);font-weight:700;background:var(--emerald-muted);padding:2px 6px;border-radius:20px;white-space:nowrap}.rk-brow{display:flex;align-items:center;gap:7px;margin-bottom:7px;padding:0 11px}.rk-brow:last-child{margin-bottom:0}.rk-blabel{font-size:11px;font-weight:600;color:var(--ink-soft);width:45px;flex-shrink:0}.rk-bar{flex:1;height:8px;background:var(--border);border-radius:20px;overflow:hidden}.rk-bar-fill{height:100%;background:linear-gradient(90deg,var(--emerald),var(--emerald-light));border-radius:20px;transition:width .4s ease}.rk-bcount{font-size:15px;font-weight:900;min-width:30px;text-align:right;flex-shrink:0;color:var(--emerald);letter-spacing:-.3px}.rk-bcount-total{color:var(--ink-muted);font-weight:500;font-size:12px}.trk-right-col{display:contents}.trk-hewan-cards{display:grid;grid-template-columns:1fr;gap:10px}@media(min-width:480px){.trk-hewan-cards{grid-template-columns:repeat(2,1fr)}}@media(min-width:720px){.trk-hewan-cards{grid-template-columns:repeat(3,1fr)}}@media(min-width:480px)and (max-width:899px){.trk-body{max-width:100%}}@media(min-width:900px){.trk-header{padding:24px 40px 30px}.trk-header-inner{width:100%}.trk-masjid-name{font-size:26px}.trk-body{max-width:100%;padding:28px 40px;display:grid;grid-template-columns:300px 1fr;grid-template-rows:auto;column-gap:24px;row-gap:0;align-items:start}.trk-left-col{display:flex;flex-direction:column;gap:16px;position:sticky;top:20px;grid-column:1;grid-row:1 / 99}.trk-right-col{display:flex;flex-direction:column;gap:14px;grid-column:2}.trk-hewan-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:stretch}.trk-hewan-cards .trk-card{height:100%;display:flex;flex-direction:column}.trk-hewan-cards .trk-card>div:first-child{flex:1}.trk-spacer{height:20px}.trk-footer{padding:10px 40px}}@media(min-width:1200px){.trk-hewan-cards{grid-template-columns:repeat(4,1fr)}}.trk-card{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 2px 8px #0d6e4f0f}.trk-card-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);background:var(--surface)}.trk-card-title{font-size:13px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:7px}.trk-overall{padding:16px}.trk-overall-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}.trk-overall-label{font-size:12px;color:var(--ink-muted)}.trk-overall-pct{font-size:26px;font-weight:800;color:var(--emerald);line-height:1}.trk-bar-track{background:var(--border);border-radius:20px;height:10px;overflow:hidden;margin-bottom:8px}.trk-bar-fill{height:100%;border-radius:20px;background:linear-gradient(90deg,var(--emerald),var(--emerald-light));transition:width .6s ease}.trk-overall-stats{display:flex;gap:8px}.trk-stat-chip{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:20px}.trk-stat-chip.green{background:var(--emerald-muted);color:var(--emerald)}.trk-stat-chip.gold{background:var(--gold-muted);color:var(--gold)}.trk-stat-chip.gray{background:#f3f4f6;color:var(--ink-muted)}.trk-process-list{display:flex;flex-direction:column}.trk-process-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--border)}.trk-process-item:last-child{border-bottom:none}.trk-dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}.trk-dot.done{background:var(--emerald-muted);border:2px solid var(--emerald)}.trk-dot.running{background:var(--gold-muted);border:2px solid var(--gold);animation:tlpulse 2s infinite}.trk-dot.pending{background:#f3f4f6;border:2px solid var(--border)}@keyframes tlpulse{0%,to{box-shadow:0 0 #c9922a4d}50%{box-shadow:0 0 0 5px #c9922a00}}.trk-process-info{flex:1;min-width:0}.trk-process-name{font-size:13px;font-weight:600;color:var(--ink)}.trk-process-waktu{font-size:11px;color:var(--ink-muted);margin-top:2px}.trk-process-badge{font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px;flex-shrink:0}.trk-process-badge.done{background:var(--emerald-muted);color:var(--emerald)}.trk-process-badge.running{background:var(--gold-muted);color:var(--gold)}.trk-process-badge.pending{background:#f3f4f6;color:var(--ink-muted)}.trk-hewan-header{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--card);transition:background .15s}.trk-hewan-header:hover{background:var(--surface)}.trk-hewan-icon{width:34px;height:34px;border-radius:9px;background:var(--emerald-muted);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}.trk-hewan-icon.kambing{background:var(--gold-muted)}@media(min-width:480px)and (max-width:899px){.trk-hewan-icon{display:none}}.trk-hewan-kode{font-size:13px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trk-hewan-jenis{font-size:11px;color:var(--ink-muted);margin-top:1px}.trk-hewan-right{margin-left:auto;display:flex;align-items:center;gap:10px}.trk-mini-bar{width:60px;height:5px;background:var(--border);border-radius:20px;overflow:hidden}.trk-mini-fill{height:100%;border-radius:20px;background:linear-gradient(90deg,var(--emerald),var(--emerald-light));transition:width .5s ease}.trk-hewan-pct{font-size:12px;font-weight:700;color:var(--emerald);min-width:32px;text-align:right}.trk-chevron{font-size:11px;color:var(--ink-muted);transition:transform .2s}.trk-chevron.open{transform:rotate(180deg)}.trk-footer{position:fixed;bottom:0;left:0;right:0;background:var(--ink);color:#fffc;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;padding-bottom:max(10px,calc(10px + env(safe-area-inset-bottom,0px)));font-size:11.5px;z-index:50}.trk-footer-left{display:flex;align-items:center;gap:6px}.trk-refresh-btn{display:flex;align-items:center;gap:5px;background:#ffffff1f;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:5px 10px;color:#fff;font-size:11px;font-weight:600;cursor:pointer;transition:background .2s}.trk-refresh-btn:hover{background:#fff3}.trk-refresh-icon{transition:transform .4s}.trk-refresh-icon.spinning{animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.trk-nodata{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;text-align:center}.trk-spacer{height:56px}