:root{
  --forest:#073f31;
  --forest-2:#052f25;
  --forest-3:#0d5a43;
  --orange:#f46818;
  --orange-2:#ff8a1f;
  --amber:#f6a401;
  --cream:#fff8ee;
  --cream-2:#fff3df;
  --paper:#fffdf8;
  --line:#f0cfaa;
  --text:#2b130b;
  --muted:#7b5a44;
  --green:#2fa26b;
  --blue:#2f7de1;
  --red:#ef3e2f;
  --purple:#7e4bd1;
  --shadow:0 16px 36px rgba(115,70,32,.12);
  --shadow-strong:0 24px 60px rgba(70,39,20,.22);
  --radius:26px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Nunito,'Plus Jakarta Sans',system-ui,sans-serif;color:var(--text);background:linear-gradient(135deg,#ffd6aa 0%,#fff6e8 33%,#ffe188 100%);overflow:hidden}
body:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 12% 8%,rgba(255,255,255,.72),transparent 22%),radial-gradient(circle at 82% 18%,rgba(255,228,97,.58),transparent 28%),radial-gradient(circle at 70% 92%,rgba(255,119,32,.14),transparent 30%);pointer-events:none;z-index:0}
button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}.hidden{display:none!important}.bg-leaf{position:fixed;z-index:0;pointer-events:none;filter:drop-shadow(0 10px 10px rgba(133,70,20,.2));opacity:.5;animation:leafDrift 12s linear infinite}.bg-leaf.l1{left:16%;top:8%;font-size:36px}.bg-leaf.l2{right:2%;top:13%;font-size:38px;animation-duration:15s}.bg-leaf.l3{right:8%;bottom:7%;font-size:34px;animation-duration:13s}.toast{position:fixed;right:22px;bottom:22px;z-index:100;background:var(--forest);color:#fff;border-radius:18px;padding:14px 18px;box-shadow:var(--shadow-strong);font-weight:900;max-width:360px}.toast.bad{background:#a83120}.btn{border:0;border-radius:16px;display:inline-flex;gap:9px;align-items:center;justify-content:center;font-weight:900;padding:13px 16px;white-space:nowrap;transition:.18s ease}.btn:hover{transform:translateY(-1px)}.btn:disabled{opacity:.72;cursor:not-allowed;transform:none}.btn.primary{background:linear-gradient(135deg,var(--orange),#e54c12);color:#fff;box-shadow:0 12px 24px rgba(244,104,24,.25)}.btn.soft{background:#fff8ee;border:1px solid var(--line);color:#6e3b18}.btn.ghost{background:#fff4df;border:1px solid var(--line);color:#5f2c13}.btn.mini{font-size:13px;padding:9px 12px;border-radius:13px;background:#fff6e8;border:1px solid var(--line);color:#6e3b18}.btn.full{width:100%}.inline-status,.form-status{border-radius:14px;padding:10px 12px;background:#fff1d9;border:1px solid #efca9f;color:#7b4b22;font-weight:800}.login-page{position:relative;z-index:1;min-height:100vh;display:grid;place-items:center;padding:28px}.login-shell{width:min(980px,100%);display:grid;grid-template-columns:1fr 410px;gap:22px;align-items:stretch}.login-visual,.login-card{background:rgba(255,253,248,.86);border:1px solid rgba(255,255,255,.7);box-shadow:var(--shadow-strong);border-radius:34px;padding:28px;backdrop-filter:blur(14px)}.login-visual{background:linear-gradient(160deg,var(--forest),#074f3a 55%,#3a220e);color:#fff;overflow:hidden;position:relative}.brand-row{display:flex;align-items:center;gap:14px}.brand-row img{width:60px;height:60px;display:block}.brand-row b{display:block;font-size:28px;line-height:1;font-weight:1000;color:#fff}.brand-row span{display:block;font-size:14px;font-weight:900;color:#ffe5bf}.login-mascot{display:block;width:260px;max-width:95%;margin:30px auto 16px;animation:mascotBob 3.8s ease-in-out infinite;filter:drop-shadow(0 20px 24px rgba(0,0,0,.25))}.login-note{border-radius:22px;padding:18px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.18)}.login-note b,.login-note span{display:block}.login-note span{color:#ffe5bf;margin-top:4px}.login-card h1{font-size:48px;margin:0 0 8px}.login-card p{color:var(--muted);margin:0 0 20px}.login-card label{display:block;font-weight:900;margin:14px 0 6px}.login-card input{width:100%;height:52px;border-radius:16px;border:1px solid var(--line);padding:0 14px;background:#fffdfa;outline:none}.login-card input:focus{box-shadow:0 0 0 4px rgba(244,104,24,.14)}.app{position:relative;z-index:1;height:100vh;display:grid;grid-template-columns:278px minmax(0,1fr);gap:18px;padding:18px;overflow:hidden}.sidebar{height:calc(100vh - 36px);border-radius:32px;background:radial-gradient(circle at 85% 2%,rgba(255,146,48,.16),transparent 20%),linear-gradient(180deg,#074f3a 0%,#064232 46%,#32180b 100%);box-shadow:var(--shadow-strong);padding:22px 18px;display:flex;flex-direction:column;position:relative;overflow:hidden}.sidebar:before{content:"🍁";position:absolute;right:18px;top:78px;font-size:42px;opacity:.7;transform:rotate(-16deg)}.side-brand img{width:58px;height:58px}.side-brand b{font-size:27px}.side-brand span{font-size:13px}.side-nav{display:grid;gap:10px;margin-top:25px}.side-nav button{border:0;background:transparent;color:#fff6e6;text-align:left;border-radius:18px;padding:13px 14px;display:flex;align-items:center;gap:14px;font-weight:1000;letter-spacing:-.2px;transition:.18s ease;position:relative}.side-nav button svg{width:24px;height:24px;color:#ffc45d}.side-nav button.active,.side-nav button:hover{background:linear-gradient(135deg,var(--orange),#f27b12);box-shadow:0 16px 30px rgba(244,104,24,.28);transform:translateX(3px)}.side-nav button.active svg,.side-nav button:hover svg{color:#fff}
.mascot-panel{margin-top:auto;position:relative;border-radius:24px;padding:10px 12px 12px;min-height:292px;overflow:hidden;background:radial-gradient(circle at 50% 30%,rgba(255,164,44,.22),transparent 40%),linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,155,44,.14));border:1px solid rgba(255,202,138,.36);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 36px rgba(0,0,0,.18)}
.mascot-panel:before{content:"";position:absolute;inset:auto 0 0 0;height:95px;background:linear-gradient(180deg,transparent,rgba(255,117,23,.22));pointer-events:none}
.garda-mascot{position:absolute;left:50%;top:-8px;width:235px;max-width:calc(100% - 12px);height:205px;transform:translateX(-50%);z-index:2;filter:drop-shadow(0 18px 22px rgba(0,0,0,.22))}
.garda-mascot svg{width:100%;height:100%;overflow:visible}
.garda-body{animation:gardaBob 3.2s ease-in-out infinite;transform-origin:50% 95%;transform-box:fill-box}
.garda-right-arm{animation:gardaWave 2.6s ease-in-out infinite;transform-origin:181px 178px;transform-box:view-box}
.garda-hand{animation:gardaHand 2.6s ease-in-out infinite;transform-origin:206px 119px;transform-box:view-box}
.garda-eyes{animation:gardaBlink 5s infinite;transform-origin:130px 110px;transform-box:view-box}
.garda-helmet{animation:gardaHelmet 3.2s ease-in-out infinite;transform-origin:50% 100%;transform-box:fill-box}
.mouth-warning,.mouth-alert{display:none}
.mood-warning .mouth-happy,.mood-danger .mouth-happy{display:none}
.mood-warning .mouth-warning{display:block}
.mood-danger .mouth-alert{display:block}
.mood-warning .garda-brows{transform:translateY(-2px);transform-box:fill-box}
.mood-danger .garda-brows{transform:translateY(2px) rotate(-1deg);transform-box:fill-box}
.mood-danger .garda-right-arm,.mood-danger .garda-hand{animation-duration:1.3s}
.mood-card{position:absolute;left:13px;right:13px;bottom:14px;display:flex;gap:8px;align-items:center;justify-content:space-between;border-radius:18px;background:linear-gradient(180deg,#fff7e6,#fff2d3);border:1px solid #f7ca92;padding:12px 12px;box-shadow:0 10px 22px rgba(0,0,0,.14);z-index:4}
.mood-card b{display:block;font-size:18px}.mood-card small{display:block;font-size:12px;line-height:1.15;color:#76451d}.mood-card span{display:inline-flex;gap:5px;align-items:center;background:#d9f1c9;color:#1e7c3f;border-radius:999px;padding:6px 9px;font-size:12px;font-weight:1000}.mood-warning .mood-card span{background:#fff0bd;color:#9b6400}.mood-danger .mood-card span{background:#ffe0da;color:#c43121}.spark{position:absolute;color:#ffd15a;text-shadow:0 4px 10px rgba(0,0,0,.25);animation:spark 1.6s ease-in-out infinite;z-index:2}.spark.s1{left:20px;top:60px}.spark.s2{right:28px;top:48px;animation-delay:.5s}.spark.s3{right:45px;top:130px;animation-delay:1s}.system-card{margin-top:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,202,138,.26);border-radius:20px;padding:14px 16px;display:flex;gap:12px;align-items:center;color:#fff}.status-dot{width:24px;height:24px;border-radius:999px;background:#6fd353;box-shadow:0 0 0 6px rgba(111,211,83,.12);display:inline-block}.system-card b{display:block}.system-card small{display:block;color:#ffe7c3;margin-top:3px}.main{height:calc(100vh - 36px);min-width:0;display:flex;flex-direction:column;gap:12px;overflow:hidden}.topbar{background:rgba(255,253,248,.88);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.72);border-radius:32px;padding:22px 26px;box-shadow:var(--shadow);display:grid;grid-template-columns:minmax(300px,1fr) minmax(680px,auto);gap:16px;align-items:center}.title-block h1{font-size:36px;line-height:1.05;margin:0;letter-spacing:-1.1px}.title-block p{margin:8px 0 0;color:#744c35;font-size:16px;font-weight:900}.top-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}.system-pill{height:47px;border-radius:15px;border:1px solid #c8e8bc;background:#eff9e8;color:#148147;padding:0 15px;display:inline-flex;align-items:center;gap:8px;font-weight:1000;font-size:13px;white-space:nowrap}.system-pill span{width:10px;height:10px;border-radius:50%;background:#28a961;box-shadow:0 0 0 4px rgba(40,169,97,.14)}.search-box{height:47px;width:360px;min-width:220px;border-radius:16px;border:1px solid var(--line);background:#fffaf1;display:flex;align-items:center;gap:8px;padding:0 10px}.search-box svg{width:19px;height:19px;color:#8a5b34}.search-box input{border:0;background:transparent;outline:0;min-width:0;flex:1;font-weight:900}.search-box button{border:0;background:#f2d2a5;width:28px;height:28px;border-radius:11px;font-weight:1000;color:#6a3512}.bell{position:relative;width:47px;height:47px;display:grid;place-items:center;border-radius:16px;background:#fff8ee;border:1px solid var(--line);color:#b06a14}.bell i{position:absolute;right:-3px;top:-7px;background:#f13c2e;color:#fff;border-radius:999px;min-width:22px;height:22px;display:grid;place-items:center;font-size:12px;font-style:normal;font-weight:1000}.user-badge{height:48px;display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:#fff8ee;border-radius:17px;padding:7px 10px;white-space:nowrap}.user-badge span{font-size:26px}.user-badge b{font-size:14px;line-height:1;display:block}.user-badge small{display:block;color:#7a5b45;font-size:12px;margin-top:2px}.status-strip{height:44px;display:grid;grid-template-columns:1fr auto auto;align-items:center;border-radius:20px;background:rgba(255,248,235,.9);border:1px solid rgba(255,255,255,.6);box-shadow:0 8px 20px rgba(126,82,33,.08);padding:0 16px;color:#7b593f;font-weight:1000}.process-panel{min-height:54px;border-radius:20px;background:#fff8ec;border:1px solid var(--line);box-shadow:0 10px 24px rgba(120,76,27,.08);display:flex;align-items:center;gap:12px;padding:12px 16px}.process-panel b{display:block;font-size:15px}.process-panel small{display:block;color:#795f4a}.pulse-dot{width:13px;height:13px;border-radius:999px;background:#2fa26b;box-shadow:0 0 0 0 rgba(47,162,107,.5);animation:pulse 1.2s infinite}.page-stage{flex:1;min-height:0;overflow:auto;padding-right:8px}.page-stage::-webkit-scrollbar{width:10px}.page-stage::-webkit-scrollbar-thumb{background:#f17a26;border-radius:999px}.page{display:none;animation:pageIn .22s ease}.page.active{display:block}.kpi-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:14px}.kpi-card{position:relative;overflow:hidden;min-height:132px;border-radius:22px;background:rgba(255,253,248,.92);border:1px solid var(--line);box-shadow:var(--shadow);display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:center;padding:18px 18px;transition:.18s ease}.kpi-card:hover{transform:translateY(-2px)}.kpi-card>i{position:absolute;right:15px;bottom:11px;font-style:normal;font-size:30px;opacity:.72;transform:rotate(-18deg)}.kpi-icon{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;color:#fff}.kpi-card.danger .kpi-icon{background:#ffe0da;color:#e63b2f}.kpi-card.amber .kpi-icon{background:#ffe8bf;color:#f68c05}.kpi-card.green .kpi-icon{background:#dff5cf;color:#2e8c3a}.kpi-card.purple .kpi-icon{background:#eee0ff;color:#7e4bd1}.kpi-card.check .kpi-icon{background:#d8f2d5;color:#2f9b37}.kpi-card span{display:block;font-weight:1000;color:#6f543f;font-size:14px}.kpi-card b{font-size:36px;line-height:1;display:block;margin:7px 0}.kpi-card small{font-weight:900;color:#664734}.kpi-card em{font-style:normal;color:#f02e25}.mini-progress{height:7px;border-radius:999px;background:#eddcc5;overflow:hidden;margin-top:8px}.mini-progress span{height:100%;display:block;background:linear-gradient(90deg,var(--orange),#ffae00);border-radius:999px;width:0}.dashboard-grid{display:grid;grid-template-columns:minmax(500px,1.35fr) minmax(360px,.85fr) minmax(330px,.8fr);gap:14px}.card{position:relative;background:rgba(255,253,248,.93);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:24px;padding:16px;min-width:0;overflow:hidden}.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.card-head h2{font-size:22px;margin:0;line-height:1.1;letter-spacing:-.4px}.card-head span{display:block;margin-top:4px;color:#d9550e;font-weight:900;font-size:13px}.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.filters select,.card-head select{height:39px;border-radius:13px;border:1px solid var(--line);background:#fffaf1;padding:0 12px;font-weight:900;font-size:13px;outline:0}.real-map{width:100%;height:290px;border-radius:18px;overflow:hidden;border:1px solid #e6caa6;background:#dfe8dc;z-index:1}.real-map.tall{height:380px}.leaflet-container{font-family:Nunito,system-ui,sans-serif}.leaflet-marker-icon{filter:drop-shadow(0 9px 7px rgba(0,0,0,.22))}.pin{width:38px;height:46px;border-radius:20px 20px 20px 4px;transform:rotate(-45deg);display:grid;place-items:center;border:4px solid #fff;box-shadow:0 10px 18px rgba(0,0,0,.24)}.pin span{transform:rotate(45deg);color:#fff;font-size:15px;font-weight:1000}.pin.green{background:#2fa26b}.pin.amber{background:#f6a401}.pin.red{background:#ef3e2f}.map-legend{display:flex;gap:18px;align-items:center;margin-top:11px;font-weight:900;color:#573921}.map-legend span{display:flex;gap:8px;align-items:center}.map-legend i{width:14px;height:14px;border-radius:50%;display:inline-block}.map-legend .green{background:#2fa26b}.map-legend .amber{background:#f6a401}.map-legend .red{background:#ef3e2f}.trend-card,.action-card{min-height:365px}.chart-wrap{height:283px;position:relative}.donut-zone{height:285px;display:grid;grid-template-columns:210px 1fr;gap:16px;align-items:center}.status-legend{display:grid;gap:12px}.status-legend div{display:grid;grid-template-columns:18px 1fr auto;gap:9px;align-items:center;font-weight:900}.status-legend i{width:15px;height:15px;border-radius:50%;display:block}.wide-btn{width:100%;height:46px;border-radius:16px;border:1px solid #f2cda3;background:#fff3df;color:#734015;font-weight:1000;transition:.18s}.wide-btn:hover{background:#ffe0bd}.danger-text{color:#c43722}.latest-card{grid-column:span 2}.late-card{grid-column:span 1}.tabs{display:flex;gap:8px;margin-bottom:10px}.tabs button{border:1px solid #efd3b0;background:#fff4e7;border-radius:12px;padding:9px 14px;font-weight:1000;color:#6a4b36}.tabs button.active{background:var(--orange);color:#fff;border-color:var(--orange);box-shadow:0 10px 18px rgba(244,104,24,.16)}.table-zone{overflow:auto;max-height:270px}.data-table{width:100%;border-collapse:collapse;font-size:13px}.data-table th,.data-table td{padding:11px 10px;border-bottom:1px solid #f1dcc4;text-align:left;vertical-align:top}.data-table th{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:#6f513b;background:#fff5e8;position:sticky;top:0;z-index:1}.data-table tr:hover td{background:#fff9f0}.badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:6px 10px;font-weight:1000;font-size:12px}.badge.open,.badge.overdue,.badge.kritis,.badge.tinggi{background:#ffe1dc;color:#cc3829}.badge.progress,.badge.sedang,.badge.waspada{background:#ffedcf;color:#b86b02}.badge.closed,.badge.selesai,.badge.rendah,.badge.aman{background:#dff2d8;color:#2b8a48}.page-grid{display:grid;grid-template-columns:minmax(420px,.9fr) minmax(600px,1.3fr);gap:14px}.page-grid.inspection-layout{grid-template-columns:minmax(650px,1.2fr) minmax(500px,1fr)}.form-card,.table-card{min-height:calc(100vh - 190px);max-height:calc(100vh - 190px);overflow:auto}.data-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.data-form .full{grid-column:1/-1}.data-form label,.master-form label,.small-form label{display:block;font-size:13px;font-weight:1000;color:#704b31}.data-form input,.data-form select,.data-form textarea,.master-form input,.master-form select,.small-form input,.small-form select{width:100%;margin-top:6px;border:1px solid var(--line);background:#fffaf1;border-radius:15px;min-height:44px;padding:10px 12px;outline:none;font-weight:900}.data-form textarea{min-height:90px;resize:vertical}.data-form input:focus,.data-form select:focus,.data-form textarea:focus{box-shadow:0 0 0 4px rgba(244,104,24,.12)}.helper{display:block;color:#815f45;font-weight:800;margin-top:6px;font-size:12px}.form-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px}.gps-row{display:grid;grid-template-columns:1fr 1fr auto;gap:8px}.photo-preview img{max-width:140px;max-height:110px;margin-top:8px;border-radius:12px;border:1px solid var(--line)}.checklist-box{background:#fff6e8;border:1px solid var(--line);border-radius:18px;padding:14px}.checklist-row{display:grid;grid-template-columns:1fr 150px 124px 120px;gap:10px;align-items:center;background:#fffdf8;border:1px solid #f1d6b4;border-radius:15px;padding:10px;margin-top:8px}.qty-control{display:grid;grid-template-columns:32px 1fr 32px;gap:5px}.qty-control button{border:0;background:#f2d3a7;border-radius:10px;font-weight:1000}.cat-input{display:none;grid-column:1/-1}.cat-input.active{display:block}.area-grid{display:grid;grid-template-columns:minmax(640px,1.2fr) minmax(420px,.8fr);gap:14px}.master-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.master-form .full{grid-column:1/-1}.small-form{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end}.list-card{margin-top:12px;display:grid;gap:8px}.list-row{border:1px solid #efd3b0;background:#fff9ef;border-radius:14px;padding:10px;display:flex;justify-content:space-between;gap:10px;align-items:center}.list-row b{display:block}.list-row small{color:#805b40;font-weight:800}.table-actions{display:flex;gap:6px}.icon-btn{border:0;border-radius:10px;background:#fff0d8;color:#7a3a14;font-weight:1000;padding:6px 8px}.footer{display:flex;justify-content:center;color:#8a6a4a;font-weight:900;padding:14px}.empty{padding:24px;text-align:center;color:#8a6a4a;font-weight:900;background:#fff7e8;border:1px dashed #efd3b0;border-radius:16px}
@media(max-width:1500px){.app{grid-template-columns:254px 1fr;gap:14px;padding:14px}.sidebar{height:calc(100vh - 28px);padding:18px 14px}.main{height:calc(100vh - 28px)}.topbar{grid-template-columns:1fr;align-items:start}.top-actions{justify-content:flex-start;flex-wrap:wrap}.search-box{width:420px}.dashboard-grid{grid-template-columns:minmax(520px,1fr) minmax(330px,.8fr)}.action-card{grid-column:span 1}.latest-card{grid-column:span 1}.late-card{grid-column:span 1}.kpi-row{grid-template-columns:repeat(3,1fr)}.donut-zone{grid-template-columns:190px 1fr}.form-card,.table-card{max-height:none;min-height:auto}.page-grid,.page-grid.inspection-layout,.area-grid{grid-template-columns:1fr}}
@media(max-width:980px){html,body{overflow:auto}.app{height:auto;min-height:100vh;grid-template-columns:1fr;overflow:visible}.sidebar{height:auto;position:relative}.main{height:auto;overflow:visible}.page-stage{overflow:visible}.top-actions{align-items:stretch}.search-box{width:100%}.kpi-row{grid-template-columns:1fr}.dashboard-grid{grid-template-columns:1fr}.latest-card,.late-card{grid-column:auto}.data-form,.master-form,.small-form{grid-template-columns:1fr}.checklist-row{grid-template-columns:1fr}.gps-row{grid-template-columns:1fr}.login-shell{grid-template-columns:1fr}}
@keyframes mascotBob{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-8px) rotate(1deg)}}@keyframes spark{0%,100%{transform:scale(.75);opacity:.45}50%{transform:scale(1.1);opacity:1}}@keyframes leafDrift{0%{transform:translateY(-30px) rotate(0)}100%{transform:translateY(120px) rotate(220deg)}}@keyframes pulse{to{box-shadow:0 0 0 12px rgba(47,162,107,0)}}@keyframes pageIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.spinner{width:16px;height:16px;border-radius:50%;border:3px solid rgba(255,255,255,.45);border-top-color:#fff;display:inline-block;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}


/* v16 mascot and data layout fixes */
.animated-mascot img{background:radial-gradient(circle at 50% 40%, rgba(255,208,92,.22), transparent 54%), linear-gradient(180deg,rgba(4,65,49,.08),rgba(255,122,24,.12));}
.animated-mascot:after{content:"";position:absolute;inset:8px 10px auto auto;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle,#ffd15a 0 5px,transparent 6px),radial-gradient(circle at 70% 25%,#ff7c18 0 4px,transparent 5px);opacity:.7;animation:moodOrbit 5s ease-in-out infinite;pointer-events:none;}
.mascot-panel .mood-card{z-index:3}.mascot-panel img{z-index:2}.mascot-panel .spark{z-index:4}
@keyframes mascotTilt{0%,100%{filter:drop-shadow(0 16px 18px rgba(0,0,0,.20))}50%{filter:drop-shadow(0 24px 22px rgba(0,0,0,.25))}}
@keyframes moodOrbit{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-12px,8px) rotate(22deg)}}
.data-form,.master-form,.small-form{min-width:0}.data-form>*{min-width:0}.leaflet-container{font-family:Plus Jakarta Sans,Nunito,sans-serif}.chart-card canvas,.donut-card canvas{display:block;width:100%!important;height:100%!important}.custom-pin .pin{animation:pinBounce 1.8s ease-in-out infinite}.custom-pin .pin.red{animation-duration:1.1s}@keyframes pinBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}


@keyframes gardaBob{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-7px) rotate(.8deg)}}
@keyframes gardaWave{0%,100%{transform:rotate(-4deg)}20%{transform:rotate(10deg)}45%{transform:rotate(-8deg)}70%{transform:rotate(8deg)}}
@keyframes gardaHand{0%,100%{transform:rotate(0deg)}35%{transform:rotate(13deg)}65%{transform:rotate(-9deg)}}
@keyframes gardaBlink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}98%{transform:scaleY(1)}}
@keyframes gardaHelmet{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* v19: safer dashboard sizing + peta dan chart tidak saling tumpuk */
.dashboard-grid{align-items:stretch}
.map-card .card-head{align-items:center}
.map-card .filters{min-width:360px}
.map-card .filters select{min-width:130px}
.real-map{min-height:300px}
.chart-wrap canvas,.donut-zone canvas{display:block;width:100%!important;height:100%!important}
.donut-zone{grid-template-columns:minmax(180px,220px) minmax(120px,1fr)}
.leaflet-container{background:#dfe8dc!important}
.master-form select[data-building] option{font-weight:800}
@media(max-width:1280px){
  .dashboard-grid{grid-template-columns:1fr}
  .latest-card,.late-card{grid-column:span 1}
  .map-card .filters{min-width:0}
  .donut-zone{grid-template-columns:1fr}
}


/* v20 visual/pro map fixes */
.status-strip{gap:28px;grid-template-columns:minmax(0,1fr) auto auto;white-space:nowrap}.status-strip span:nth-child(2){justify-self:center}.status-strip span:last-child{justify-self:end}.topbar{overflow:visible}.title-block h1{max-width:560px}.real-map{height:330px;background:#e9eadb}.map-card .card-head{align-items:flex-start}.filters select{min-width:138px}.filters .btn{height:39px}.pro-mascot-panel{min-height:312px;padding:12px 12px 14px;background:radial-gradient(circle at 50% 24%,rgba(255,183,72,.22),transparent 44%),linear-gradient(180deg,rgba(255,255,255,.10),rgba(9,56,42,.16));}
.pro-garda{position:absolute;left:50%;top:8px;width:230px;max-width:calc(100% - 8px);height:218px;transform:translateX(-50%);z-index:3;filter:drop-shadow(0 20px 24px rgba(0,0,0,.24))}.pro-garda svg{width:100%;height:100%;overflow:visible}.pro-bob{animation:proBob 3.4s ease-in-out infinite;transform-origin:50% 92%;transform-box:fill-box}.pro-arm-wave{animation:proWave 2.7s ease-in-out infinite;transform-origin:178px 184px;transform-box:view-box}.pro-hand{animation:proHand 2.7s ease-in-out infinite;transform-origin:216px 126px;transform-box:view-box}.pro-eyes{animation:proBlink 4.8s linear infinite;transform-origin:130px 112px;transform-box:view-box}.pro-helmet{animation:proHelmet 3.4s ease-in-out infinite;transform-origin:50% 100%;transform-box:fill-box}.pro-badge-pulse{animation:proBadge 1.9s ease-in-out infinite}.pro-signal{animation:proSignal 3s ease-in-out infinite}.pro-mouth-warning,.pro-mouth-alert{display:none}.mood-warning .pro-mouth-happy,.mood-danger .pro-mouth-happy{display:none}.mood-warning .pro-mouth-warning{display:block}.mood-danger .pro-mouth-alert{display:block}.mood-warning .pro-visor{fill:#3f2a0c}.mood-danger .pro-visor{fill:#421414}.mood-warning .pro-eyes circle{fill:#ffd15a}.mood-danger .pro-eyes circle{fill:#ff7b61}.pro-mood-card{bottom:12px;left:12px;right:12px;top:auto;background:linear-gradient(135deg,#fff7e8,#ffe6bf);box-shadow:0 14px 28px rgba(0,0,0,.14)}.pro-mood-card b{font-size:18px}.pro-mood-card small{font-size:12.5px}.pro-mood-card span{font-size:12px}.login-mascot{object-fit:contain;border-radius:26px;background:linear-gradient(180deg,rgba(255,244,226,.15),rgba(244,104,24,.10))}
@keyframes proBob{0%,100%{transform:translateY(0) rotate(-.25deg)}50%{transform:translateY(-7px) rotate(.45deg)}}@keyframes proWave{0%,100%{transform:rotate(-4deg)}24%{transform:rotate(9deg)}48%{transform:rotate(-7deg)}72%{transform:rotate(7deg)}}@keyframes proHand{0%,100%{transform:rotate(0)}35%{transform:rotate(12deg)}68%{transform:rotate(-8deg)}}@keyframes proBlink{0%,93%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}97%{transform:scaleY(1)}}@keyframes proHelmet{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}@keyframes proBadge{0%,100%{filter:brightness(1)}50%{filter:brightness(1.22)}}@keyframes proSignal{0%,100%{opacity:.45;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
@media(max-width:1500px){.topbar{grid-template-columns:1fr}.title-block h1{max-width:none}.top-actions{justify-content:flex-start}.dashboard-grid{grid-template-columns:minmax(520px,1fr) minmax(360px,.9fr)}.trend-card,.action-card{min-height:360px}.real-map{height:360px}}
@media(max-width:980px){.status-strip{grid-template-columns:1fr;gap:6px;height:auto;padding:12px 16px}.status-strip span:nth-child(2),.status-strip span:last-child{justify-self:start}.pro-garda{position:relative;display:block;margin:0 auto;height:220px;top:auto}.pro-mascot-panel{min-height:auto}.pro-mood-card{position:relative;margin-top:8px}}

/* v21: mascot asset yang lebih proper + chart empty state lebih rapi */
.mascot-panel-v21{
  min-height:330px;
  padding:14px 14px 16px;
  overflow:hidden;
  position:relative;
  background:
    radial-gradient(circle at 46% 22%,rgba(255,185,82,.24),transparent 42%),
    radial-gradient(circle at 70% 45%,rgba(47,162,107,.20),transparent 32%),
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(9,56,42,.22));
}
.mascot-panel-v21 .spark{z-index:5;text-shadow:0 4px 12px rgba(255,183,50,.55)}
.mascot-figure-v21{
  position:absolute;
  left:50%;top:8px;
  width:224px;height:188px;
  margin:0;
  transform:translateX(-50%);
  z-index:3;
  border-radius:26px;
  overflow:hidden;
  filter:drop-shadow(0 24px 28px rgba(0,0,0,.28));
  animation:mascotFloatV21 3.6s ease-in-out infinite;
}
.mascot-figure-v21 img{
  width:100%;height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
  transform:scale(1.015);
}
.mascot-figure-v21:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(255,255,255,.16),transparent 32%,transparent 65%,rgba(255,141,31,.12));
  mix-blend-mode:screen;pointer-events:none;
}
.mascot-figure-v21:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:42px;
  background:linear-gradient(0deg,rgba(2,49,37,.58),transparent);
  pointer-events:none;
}
.blink-mask{
  position:absolute;display:block;z-index:4;
  width:23px;height:3px;border-radius:999px;
  background:#2a170d;
  opacity:0;transform:scaleX(.8);
  animation:mascotBlinkV21 5.4s linear infinite;
}
.blink-mask.left{left:91px;top:92px}.blink-mask.right{left:129px;top:92px}
.wave-line{
  position:absolute;z-index:4;display:block;border:3px solid #ffe8a6;border-left:0;border-bottom:0;border-radius:50%;opacity:.0;
  animation:wavePingV21 2.5s ease-in-out infinite;
}
.wave-line.w1{right:20px;top:70px;width:32px;height:32px;animation-delay:.2s}
.wave-line.w2{right:8px;top:52px;width:50px;height:50px;animation-delay:.55s}
.mascot-caption-v21{
  left:12px;right:12px;bottom:12px;top:auto;
  z-index:6;
  background:linear-gradient(135deg,#fff9ed,#ffe8bd);
  border:1px solid rgba(255,199,124,.88);
  box-shadow:0 18px 28px rgba(37,16,7,.18);
}
.mascot-caption-v21 b{font-size:18px;letter-spacing:-.02em}
.mascot-caption-v21 small{font-size:12px;line-height:1.25;color:#714625;max-width:128px}
.mascot-caption-v21 span{font-size:12px;min-width:74px;text-align:center}
.mascot-bg-leaves{position:absolute;inset:0;z-index:1;pointer-events:none}
.mascot-bg-leaves i{position:absolute;width:17px;height:17px;background:#f16b18;border-radius:2px 12px 2px 12px;opacity:.85;box-shadow:0 3px 8px rgba(0,0,0,.12);animation:leafFloatV21 7s ease-in-out infinite}
.mascot-bg-leaves i:nth-child(1){left:18px;top:78px;transform:rotate(18deg)}
.mascot-bg-leaves i:nth-child(2){right:22px;top:98px;background:#ff9f1a;animation-delay:1.2s}
.mascot-bg-leaves i:nth-child(3){left:28px;bottom:78px;background:#c84518;animation-delay:2.1s}
.mascot-bg-leaves i:nth-child(4){right:34px;bottom:62px;background:#d55d19;animation-delay:3.4s}
.mascot-orbit{position:absolute;border:1px dashed rgba(255,193,98,.44);border-radius:999px;z-index:0;pointer-events:none;animation:orbitV21 16s linear infinite}.mascot-orbit.o1{width:170px;height:170px;left:30px;top:30px}.mascot-orbit.o2{width:120px;height:120px;right:20px;top:65px;animation-direction:reverse;animation-duration:11s}
.mood-warning .mascot-caption-v21 span{background:#fff0ca;color:#a26000}.mood-danger .mascot-caption-v21 span{background:#ffe0dc;color:#ce2f23}.mood-danger .mascot-figure-v21{animation-duration:2.3s}.mood-danger .wave-line{border-color:#ffb199}.mood-warning .wave-line{border-color:#ffe385}
@keyframes mascotFloatV21{0%,100%{transform:translateX(-50%) translateY(0) rotate(-.4deg)}50%{transform:translateX(-50%) translateY(-8px) rotate(.6deg)}}
@keyframes mascotBlinkV21{0%,93%,100%{opacity:0;transform:scaleY(1)}95%,96%{opacity:.95;transform:scaleY(1)}}
@keyframes wavePingV21{0%{opacity:0;transform:scale(.75) rotate(-8deg)}35%{opacity:.85}100%{opacity:0;transform:scale(1.18) rotate(-8deg)}}
@keyframes leafFloatV21{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(8px,-9px) rotate(24deg)}}
@keyframes orbitV21{to{transform:rotate(360deg)}}

/* v21 chart polish */
.chart-wrap{height:278px;position:relative;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,249,240,.18));}
.donut-zone{min-height:260px;align-items:center;gap:18px}.donut-zone canvas{max-width:220px;margin:auto}.status-legend div{border-radius:14px;padding:8px 10px;background:rgba(255,255,255,.46);border:1px solid rgba(240,207,170,.62)}
.trend-card,.action-card{overflow:hidden}.trend-card .card-head,.action-card .card-head{margin-bottom:12px}.chart-empty-note{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#805b40;font-weight:900;pointer-events:none}.chart-empty-note b{display:block;font-size:18px;color:#2b130b}.chart-empty-note small{display:block;margin-top:4px;color:#8b684f;font-weight:800}.login-mascot{object-fit:cover;object-position:center center;border-radius:28px;box-shadow:0 22px 42px rgba(26,9,2,.18)}
@media(max-width:980px){.mascot-figure-v21{position:relative;top:auto;left:auto;transform:none;margin:0 auto}.mascot-caption-v21{position:relative;margin-top:12px}.mascot-panel-v21{min-height:auto}}


/* v22: autumn flying leaves animation layer */
.flying-leaves,
.leaf-burst-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:2;
  contain:layout paint style;
}
.leaf-burst-layer{z-index:8;}
.flying-leaf{
  position:absolute;
  left:var(--leaf-left,50vw);
  top:var(--leaf-top,-12vh);
  width:var(--leaf-size,18px);
  height:calc(var(--leaf-size,18px) * .92);
  background:var(--leaf-color,#ef6b1f);
  opacity:var(--leaf-opacity,.62);
  border-radius:4px 14px 4px 14px;
  filter:drop-shadow(0 10px 8px rgba(95,44,9,.16));
  transform-origin:50% 65%;
  animation:
    leafFlight var(--leaf-duration,17s) linear var(--leaf-delay,0s) infinite,
    leafSway var(--leaf-sway-duration,3.8s) ease-in-out var(--leaf-delay,0s) infinite;
  will-change:transform,opacity;
}
.flying-leaf::after{
  content:"";
  position:absolute;
  left:50%;top:10%;bottom:7%;
  width:1.5px;
  border-radius:999px;
  background:rgba(255,250,230,.62);
  transform:translateX(-50%) rotate(var(--leaf-vein-rot, -16deg));
  transform-origin:bottom center;
}
.flying-leaf.type-maple{
  border-radius:0;
  clip-path:polygon(50% 0,59% 23%,81% 8%,72% 34%,100% 35%,76% 52%,91% 75%,64% 64%,55% 100%,46% 68%,18% 82%,30% 59%,0 49%,32% 37%,18% 14%,41% 27%);
}
.flying-leaf.type-maple::after{height:62%;top:26%;bottom:auto;}
.flying-leaf.type-long{
  width:calc(var(--leaf-size,18px) * .75);
  height:calc(var(--leaf-size,18px) * 1.35);
  border-radius:70% 6% 70% 6%;
}
.flying-leaf.type-round{
  width:calc(var(--leaf-size,18px) * 1.05);
  height:calc(var(--leaf-size,18px) * .88);
  border-radius:50% 16% 50% 16%;
}
.flying-leaf.type-tiny{
  width:calc(var(--leaf-size,18px) * .62);
  height:calc(var(--leaf-size,18px) * .55);
  border-radius:45% 8% 45% 8%;
  opacity:calc(var(--leaf-opacity,.62) * .75);
}
.flying-leaf.soft-blur{filter:blur(.2px) drop-shadow(0 8px 8px rgba(95,44,9,.13));}
@keyframes leafFlight{
  0%{transform:translate3d(0,-16vh,0) rotate(var(--leaf-rot-start,0deg)) scale(var(--leaf-scale,1)); opacity:0;}
  7%{opacity:var(--leaf-opacity,.62);}
  34%{transform:translate3d(var(--leaf-mid-x, 7vw),36vh,0) rotate(calc(var(--leaf-rot-start,0deg) + 145deg)) scale(var(--leaf-scale,1));}
  68%{transform:translate3d(var(--leaf-mid2-x, -4vw),78vh,0) rotate(calc(var(--leaf-rot-start,0deg) + 300deg)) scale(var(--leaf-scale,1)); opacity:var(--leaf-opacity,.62);}
  100%{transform:translate3d(var(--leaf-end-x, 12vw),118vh,0) rotate(calc(var(--leaf-rot-start,0deg) + 520deg)) scale(var(--leaf-scale,1)); opacity:0;}
}
@keyframes leafSway{
  0%,100%{margin-left:0;}
  50%{margin-left:var(--leaf-sway,26px);}
}
.burst-leaf{
  position:fixed;
  left:var(--burst-x,50vw);
  top:var(--burst-y,50vh);
  width:var(--burst-size,16px);
  height:calc(var(--burst-size,16px) * .92);
  background:var(--burst-color,#ef6b1f);
  border-radius:4px 14px 4px 14px;
  opacity:.92;
  filter:drop-shadow(0 8px 8px rgba(84,36,8,.18));
  animation:leafBurst .95s cubic-bezier(.2,.9,.24,1) forwards;
  clip-path:var(--burst-clip, none);
  will-change:transform,opacity;
}
.burst-leaf::after{
  content:"";
  position:absolute;
  left:50%;top:13%;bottom:8%;width:1px;border-radius:999px;
  background:rgba(255,250,230,.68);
  transform:translateX(-50%) rotate(-16deg);
}
@keyframes leafBurst{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(.75);opacity:0;}
  12%{opacity:1;}
  100%{transform:translate3d(var(--burst-dx,60px),var(--burst-dy,-70px),0) rotate(var(--burst-rot,260deg)) scale(.25);opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .flying-leaf,.burst-leaf{animation:none!important;display:none!important;}
}


/* v24: chart shape fix + calmer autumn animation */
.donut-zone{
  grid-template-columns:220px minmax(150px,1fr) !important;
  align-items:center !important;
  gap:22px !important;
  min-height:250px !important;
  overflow:visible !important;
}
.donut-zone canvas#statusChart,
.donut-card canvas#statusChart,
#statusChart{
  width:220px !important;
  height:220px !important;
  min-width:220px !important;
  max-width:220px !important;
  min-height:220px !important;
  max-height:220px !important;
  aspect-ratio:1 / 1 !important;
  flex:0 0 220px !important;
  object-fit:contain !important;
  display:block !important;
  margin:0 auto !important;
  transform:none !important;
}
.status-legend{
  min-width:0 !important;
  align-self:center !important;
  gap:10px !important;
}
.status-legend div{
  display:grid !important;
  grid-template-columns:16px minmax(70px,1fr) auto !important;
  gap:10px !important;
  align-items:center !important;
  white-space:normal !important;
}
.action-card{overflow:visible !important;}
.chart-wrap{height:278px !important;overflow:hidden !important;}
.chart-wrap canvas#trendChart{width:100% !important;height:100% !important;display:block !important;}
.flying-leaves{opacity:.66 !important;z-index:1 !important;}
.flying-leaf{filter:drop-shadow(0 5px 6px rgba(95,44,9,.08)) !important;}
.bg-leaf{opacity:.14 !important;filter:blur(.1px) drop-shadow(0 6px 8px rgba(133,70,20,.08)) !important;}
.burst-leaf{opacity:.55 !important;}
.mascot-bg-leaves i{opacity:.46 !important;}
@media(max-width:980px){
  .donut-zone{grid-template-columns:1fr !important;justify-items:center !important;}
  .status-legend{width:100% !important;}
}
@media (prefers-reduced-motion: reduce){
  .flying-leaf,.burst-leaf,.bg-leaf{display:none !important;}
}


/* v25: balanced autumn leaves — reduced but not removed */
.flying-leaves{
  opacity:.92 !important;
  z-index:2 !important;
}
.flying-leaf{
  filter:drop-shadow(0 7px 9px rgba(95,44,9,.12)) !important;
}
.bg-leaf{
  opacity:.22 !important;
  filter:blur(.05px) drop-shadow(0 7px 9px rgba(133,70,20,.10)) !important;
}
.burst-leaf{
  opacity:.68 !important;
  animation-duration:.82s !important;
}
.mascot-bg-leaves i{
  opacity:.58 !important;
}
@media(max-width:760px){
  .flying-leaves{opacity:.62 !important;}
  .flying-leaf:nth-child(n+9){display:none !important;}
}
@media (prefers-reduced-motion: reduce){
  .flying-leaf,.burst-leaf,.bg-leaf{display:none !important;}
}