:root{--bg:#f4f7fb;--panel:#fff;--ink:#17223b;--muted:#70809b;--line:#e0e7f0;--primary:#22c7a0;--primary2:#18b6dc;--danger:#fa6177;--side:#101a30;--side2:#172743}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,"Noto Sans Thai",sans-serif}.sidebar{position:fixed;inset:0 auto 0 0;width:244px;background:linear-gradient(180deg,var(--side),var(--side2));padding:26px 16px;color:#fff;display:flex;flex-direction:column;z-index:5}.brand{display:flex;gap:10px;align-items:center;font-size:23px;font-weight:800;padding:0 10px 35px}.brand img{width:36px;height:36px}.nav{border:0;background:transparent;color:#c5d2e6;text-align:left;padding:15px 14px;border-radius:11px;margin:4px 0;font:700 16px inherit;cursor:pointer;display:flex;gap:13px;align-items:center}.nav:hover{background:#ffffff12;color:#fff}.nav.active{background:var(--primary);color:#fff;box-shadow:0 8px 18px #0003}.side-bottom{margin-top:auto;border-top:1px solid #ffffff22;padding:20px 10px 5px}.side-bottom small{color:#aac0dc}.colors{display:flex;gap:8px;flex-wrap:wrap;margin:11px 0 15px}.colors button{width:25px;height:25px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #90a3be;cursor:pointer}.colors button:nth-child(1){background:#22c7a0}.colors button:nth-child(2){background:#2988f5}.colors button:nth-child(3){background:#8155e7}.colors button:nth-child(4){background:#f38b24}.colors button:nth-child(5){background:#e94e72}.colors button:nth-child(6){background:#19a99d}.mode{border:1px solid #ffffff35;background:#ffffff15;color:#fff;padding:10px;border-radius:9px;width:100%;font-weight:700;cursor:pointer}main{margin-left:244px;min-height:100vh;padding:30px 38px 64px}.topbar{display:flex;justify-content:space-between;align-items:start;margin-bottom:28px}.eyebrow{font-size:12px;letter-spacing:1.6px;font-weight:800;color:var(--primary2);margin:0 0 6px}.topbar h1{margin:0;font-size:30px}.live{color:var(--primary);font-size:13px;font-weight:800;display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--panel);border-radius:99px;box-shadow:0 4px 15px #2033540d}.live i{height:9px;width:9px;border-radius:50%;background:var(--primary)}.live span{color:var(--muted);font-weight:500}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.metric,.card,.map-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 22px #21395b0a}.metric{padding:21px;position:relative;overflow:hidden}.metric:after{content:"";position:absolute;right:-25px;bottom:-35px;width:105px;height:105px;border-radius:50%;background:var(--primary);opacity:.08}.metric span,.metric em{display:block;color:var(--muted);font-size:13px;font-style:normal}.metric strong{font-size:36px;display:block;margin:10px 0 5px;color:var(--primary2)}.metric.success strong{color:var(--primary)}.metric.danger strong{color:var(--danger)}.metric.accent strong{font-size:28px;color:var(--ink)}.card{padding:24px}.usage-card{margin-top:18px}.card-head,.section-head{display:flex;justify-content:space-between;align-items:center;gap:16px}.card h2,.section-head h2{font-size:19px;margin:0 0 6px}.card p,.section-head p{color:var(--muted);font-size:13px;margin:0}.periods button{border:0;border-radius:8px;background:#edf2f8;color:#5f6f89;padding:9px 12px;margin-left:5px;font-weight:700;cursor:pointer}.periods button.active{background:var(--primary2);color:#fff}.chart{height:345px;margin-top:8px}.chart svg{width:100%;height:100%;overflow:visible}.legend{display:flex;gap:23px;color:var(--muted);font-size:13px;margin:0 0 0 65px}.legend span:before{content:"";display:inline-block;width:26px;height:3px;vertical-align:middle;margin-right:7px;background:var(--primary)}.legend .used-line:before{background:var(--danger)}.lower-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.donuts{display:flex;justify-content:space-around;align-items:center;height:155px}.donut{width:118px;height:118px;border-radius:50%;display:grid;place-content:center;text-align:center;background:conic-gradient(var(--primary) 0deg,#e8edf3 0deg);position:relative}.donut:before{content:"";position:absolute;inset:13px;border-radius:50%;background:var(--panel)}.donut b,.donut span{position:relative;z-index:1}.donut b{font-size:22px}.donut span{font-size:12px;color:var(--muted);margin-top:4px}.progress{display:grid;grid-template-columns:125px 1fr 45px;align-items:center;gap:10px;margin:23px 0;font-size:13px}.progress>div{height:11px;border-radius:10px;background:#e7edf3;overflow:hidden}.progress i{height:100%;display:block;background:var(--primary);border-radius:10px}.progress:nth-of-type(2) i{background:var(--danger)}.hint{margin-top:28px!important}.page{display:none}.page.active{display:block}.section-head{margin-bottom:18px}.map-summary{padding:12px 15px;background:var(--panel);border-radius:12px;color:var(--muted)}.map-summary b{color:var(--primary);font-size:21px}.map-summary b:last-child{color:var(--danger)}.map-summary span{margin:0 8px}.map-card{padding:24px;display:grid;gap:12px;min-height:540px;align-content:center}.map-row{display:grid;gap:9px}.spot{min-height:68px;border:0;border-radius:10px;color:#fff;font-size:16px;font-weight:800;cursor:default;box-shadow:inset 0 -4px #0002}.spot.free{background:var(--primary)}.spot.used{background:var(--danger)}.spot.unknown{background:#9dacbf}.report-grid{display:grid;grid-template-columns:repeat(2,minmax(220px,390px));gap:18px}.report-card button{margin-top:24px;border:0;background:var(--primary2);color:#fff;border-radius:10px;padding:13px 18px;font-size:15px;font-weight:800;cursor:pointer}.report-card .secondary{background:var(--danger)}.error{padding:15px;margin-top:18px;border-radius:10px;background:#ffe4e8;color:#b52a42}@media(max-width:900px){.sidebar{width:72px;padding:20px 10px}.brand span,.nav span,.side-bottom{display:none}.brand{padding:0 8px 30px}.nav{justify-content:center;font-size:20px}.nav.active{padding:15px 8px}main{margin-left:72px;padding:24px}.metric-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){main{margin:0;padding:18px}.sidebar{position:static;width:100%;height:auto;display:flex;flex-direction:row;align-items:center;gap:5px;padding:11px}.brand{padding:0;margin-right:auto}.brand span{display:inline}.nav{margin:0;padding:9px;font-size:15px}.nav span{display:none}.topbar{margin-top:20px}.topbar h1{font-size:24px}.live span{display:none}.metric-grid,.lower-grid,.report-grid{grid-template-columns:1fr}.card-head,.section-head{align-items:flex-start;flex-direction:column}.chart{height:260px}.map-card{padding:12px;min-height:auto}.map-row{gap:4px}.spot{min-height:42px;font-size:11px}.periods{white-space:nowrap}}