:root{--bg-page: #fafbfa;--bg-card: #ffffff;--bg-card-hover: #f3f5f4;--bg-elevated: #ffffff;--fg-primary: #0f1613;--fg-secondary: #4a5550;--fg-tertiary: #6b7872;--fg-muted: #a8b3af;--accent: #10b981;--accent-hover: #059669;--accent-soft: #d1fae5;--status-ok: #059669;--status-warn: #d97706;--status-fault: #dc2626;--status-info: #2563eb;--status-idle: #9ca3af;--line: #eaedec;--focus-ring: #10b98166;--shadow-card: 0 1px 2px rgba(15, 22, 19, 0.04), 0 2px 8px rgba(15, 22, 19, 0.04);--shadow-card-hover: 0 2px 4px rgba(15, 22, 19, 0.06), 0 8px 24px rgba(15, 22, 19, 0.06);--shadow-popover: 0 4px 8px rgba(15, 22, 19, 0.08), 0 16px 32px rgba(15, 22, 19, 0.08)}:root{--font-sans: 'Bai Jamjuree', ui-sans-serif, system-ui, sans-serif;--fw-regular: 400;--fw-medium: 500;--fw-semibold: 600;--fw-bold: 700;--fw-extrabold: 800}:root{--space-0: 0px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--space-20: 80px}:root{--radius-xs: 4px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-full: 9999px}:root{--ease-out: cubic-bezier(.2, .8, .2, 1);--ease-in-out: cubic-bezier(.4, 0, .2, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--dur-fast: 120ms;--dur-med: 220ms;--dur-slow: 360ms}html{font-family:var(--font-sans);scroll-behavior:smooth;scroll-padding-top:5rem}body{margin:0;min-height:100vh;background:var(--bg-page);color:var(--fg-primary);font-family:var(--font-sans)}.tnum{font-variant-numeric:tabular-nums}:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.card{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-6);transition:background var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);box-shadow:var(--shadow-card)}.card--hoverable:hover{background:var(--bg-card-hover);box-shadow:var(--shadow-card-hover)}.card--elevated{background:var(--bg-elevated)}.card--flush{padding:0}.stat-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:var(--space-2);min-height:132px;justify-content:space-between;transition:background var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}.stat-card__label{font-size:11px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.08em;color:var(--fg-tertiary);display:flex;align-items:center;gap:var(--space-2)}.stat-card__icon{color:var(--accent);font-size:12px}.stat-card__value{font-size:28px;font-weight:var(--fw-extrabold);color:var(--fg-primary);line-height:1}.stat-card__delta{font-size:12px;font-weight:var(--fw-medium);color:var(--fg-tertiary)}.stat-card__delta--up{color:var(--status-ok)}.stat-card__delta--down{color:var(--status-fault)}.stat-card--accent{background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, var(--bg-card)) 0%, var(--bg-card) 100%)}.metric-chip{background:var(--bg-card-hover);border-radius:var(--radius-md);padding:18px 20px;display:flex;flex-direction:column;gap:4px;transition:background var(--dur-fast) var(--ease-out)}.metric-chip:hover{background:var(--bg-elevated)}.metric-chip__label,.info-label{font-size:11px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.08em;color:var(--fg-tertiary);margin-bottom:4px}.metric-chip__value,.metric-value{font-size:28px;font-weight:var(--fw-extrabold);line-height:1;font-variant-numeric:tabular-nums;color:var(--fg-primary)}.metric-chip__sub,.metric-sub{font-size:12px;color:var(--fg-tertiary);margin-top:2px}.metric-chip--warn .metric-chip__label,.metric-chip--warn .metric-chip__value{color:var(--status-warn)}.metric-chip--fault .metric-chip__label,.metric-chip--fault .metric-chip__value{color:var(--status-fault)}.section-title{font-size:12px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.12em;color:var(--fg-tertiary);margin-bottom:var(--space-5);display:flex;align-items:center;gap:var(--space-2)}.section-title__icon{color:var(--accent);font-size:11px}.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--radius-full);font-size:11px;font-weight:var(--fw-bold);letter-spacing:.05em;text-transform:uppercase}.badge__dot{width:6px;height:6px;border-radius:50%;display:inline-block;background:currentColor}.badge--ok{background:color-mix(in srgb, var(--status-ok) 15%, transparent);color:var(--status-ok)}.badge--warn{background:color-mix(in srgb, var(--status-warn) 15%, transparent);color:var(--status-warn)}.badge--fault{background:color-mix(in srgb, var(--status-fault) 18%, transparent);color:var(--status-fault)}.badge--info{background:color-mix(in srgb, var(--status-info) 15%, transparent);color:var(--status-info)}.badge--idle{background:color-mix(in srgb, var(--status-idle) 15%, transparent);color:var(--fg-secondary)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--radius-sm);font-size:14px;font-weight:var(--fw-semibold);cursor:pointer;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);border:none;white-space:nowrap}.btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.btn--primary{background:var(--accent);color:#022c22}.btn--primary:hover{background:var(--accent-hover)}.btn--secondary{background:var(--bg-card-hover);color:var(--fg-primary)}.btn--secondary:hover{background:var(--bg-elevated)}.btn--ghost{background:rgba(0,0,0,0);color:var(--fg-secondary)}.btn--ghost:hover{background:var(--bg-card-hover);color:var(--fg-primary)}.btn--danger{background:var(--status-fault);color:#fff}.btn--danger:hover{background:#dc2626}.btn--sm{height:32px;padding:0 12px;font-size:13px}.btn--lg{height:48px;padding:0 24px;font-size:15px}.btn--icon-only{width:40px;padding:0}.table{width:100%;border-collapse:collapse;font-size:13px;color:var(--fg-primary)}.table thead th{text-align:left;padding:14px 16px;font-size:11px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.08em;color:var(--fg-tertiary);background:rgba(0,0,0,0)}.table tbody td{padding:14px 16px;vertical-align:middle}.table tbody tr{transition:background var(--dur-fast) var(--ease-out)}.table tbody tr:nth-child(odd){background:color-mix(in srgb, var(--bg-card-hover) 50%, transparent)}.table tbody tr:hover{background:var(--bg-card-hover)}.table--flush{margin:calc(var(--space-6)*-1)}.chart-card{padding:var(--space-6)}.chart-card__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4)}.chart-card__title{font-size:16px;font-weight:var(--fw-semibold);color:var(--fg-primary)}.chart-card__sub{font-size:11px;color:var(--fg-tertiary)}.chart-card__body{padding:0}.input{background:var(--bg-card-hover);color:var(--fg-primary);border:none;border-radius:var(--radius-sm);height:40px;padding:0 12px;font-size:14px;font-family:inherit;width:100%;transition:background var(--dur-fast) var(--ease-out)}.input::placeholder{color:var(--fg-muted)}.input:focus-visible{outline:2px solid var(--focus-ring);outline-offset:0;background:var(--bg-elevated)}.input--search{padding-left:36px}.progress,.soc-track{width:100%;height:8px;background:var(--bg-card-hover);border-radius:var(--radius-full);overflow:hidden}.progress__fill,.soc-fill{height:100%;border-radius:var(--radius-full);background:var(--accent);transition:width var(--dur-slow) var(--ease-out)}.progress--lg{height:12px}.progress--sm{height:4px}.live-dot,.health-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);animation:live-pulse 2s ease-in-out infinite}@keyframes live-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(0.9)}}@media(prefers-reduced-motion: reduce){.live-dot,.health-dot{animation:none}}.tel-badge{display:inline-block;padding:2px 9px;border-radius:var(--radius-full);font-size:11px;font-weight:var(--fw-bold);letter-spacing:.04em}.tel-badge-standard{background:color-mix(in srgb, var(--status-info) 15%, transparent);color:var(--status-info)}.tel-badge-deep{background:color-mix(in srgb, #6366f1 15%, transparent);color:#6366f1}.tel-payload{font-size:11px;color:var(--fg-secondary);word-break:break-all;overflow-wrap:break-word;white-space:pre-wrap;line-height:1.5}.nav-section-label{font-size:11px;font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.08em;color:var(--fg-tertiary);padding:0 12px;margin-top:var(--space-4);margin-bottom:var(--space-2);display:block}.nav-item{display:flex;align-items:center;font-size:13px;font-weight:var(--fw-medium);padding:10px 12px;border-radius:var(--radius-md);color:var(--fg-secondary);text-decoration:none;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);position:relative}.nav-item:hover{background:var(--bg-card-hover);color:var(--fg-primary)}.nav-item:hover .nav-item__icon{color:var(--accent-hover)}.nav-item__icon{color:var(--accent);font-size:16px;width:20px;text-align:center;flex-shrink:0}.nav-item--active{background:var(--accent-soft);color:var(--fg-primary)}.nav-item--active .nav-item__icon{color:var(--accent)}.nav-item--active::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:20px;background:var(--accent);border-radius:2px}.hvr-float{display:inline-block;vertical-align:middle;transform:translateZ(0);transition:transform var(--dur-fast) var(--ease-spring)}.hvr-float:hover,.hvr-float:focus,.hvr-float:active{transform:translateY(-3px)}.hvr-sink{display:inline-block;vertical-align:middle;transform:translateZ(0);transition:transform var(--dur-fast) var(--ease-out)}.hvr-sink:hover,.hvr-sink:focus,.hvr-sink:active{transform:translateY(3px)}.hvr-grow{display:inline-block;vertical-align:middle;transform:translateZ(0);transition:transform var(--dur-fast) var(--ease-out)}.hvr-grow:hover,.hvr-grow:focus,.hvr-grow:active{transform:scale(1.06)}.hvr-shrink{display:inline-block;vertical-align:middle;transform:translateZ(0);transition:transform var(--dur-fast) var(--ease-out)}.hvr-shrink:hover,.hvr-shrink:focus,.hvr-shrink:active{transform:scale(0.94)}@keyframes hvr-push-keyframe{50%{transform:scale(0.95)}100%{transform:scale(1)}}.hvr-push{display:inline-block;vertical-align:middle;transform:translateZ(0)}.hvr-push:hover,.hvr-push:focus,.hvr-push:active{animation:hvr-push-keyframe var(--dur-fast) linear 1}@keyframes hvr-pop-keyframe{50%{transform:scale(1.08)}}.hvr-pop{display:inline-block;vertical-align:middle;transform:translateZ(0)}.hvr-pop:hover,.hvr-pop:focus,.hvr-pop:active{animation:hvr-pop-keyframe var(--dur-fast) linear 1}@keyframes hvr-pulse-keyframe{25%{transform:scale(1.04)}75%{transform:scale(0.96)}}.hvr-pulse{display:inline-block;vertical-align:middle;transform:translateZ(0)}.hvr-pulse:hover,.hvr-pulse:focus,.hvr-pulse:active{animation:hvr-pulse-keyframe 1s linear infinite}@keyframes hvr-pulse-grow-keyframe{to{transform:scale(1.06)}}.hvr-pulse-grow{display:inline-block;vertical-align:middle;transform:translateZ(0)}.hvr-pulse-grow:hover,.hvr-pulse-grow:focus,.hvr-pulse-grow:active{animation:hvr-pulse-grow-keyframe .3s linear infinite alternate}.hvr-underline-from-left{display:inline-block;vertical-align:middle;position:relative;overflow:hidden}.hvr-underline-from-left:before{content:"";position:absolute;z-index:-1;left:0;right:100%;bottom:0;background:var(--accent);height:2px;transition:right var(--dur-fast) var(--ease-out)}.hvr-underline-from-left:hover:before,.hvr-underline-from-left:focus:before,.hvr-underline-from-left:active:before{right:0}.hvr-underline-from-center{display:inline-block;vertical-align:middle;position:relative;overflow:hidden}.hvr-underline-from-center:before{content:"";position:absolute;z-index:-1;left:50%;right:50%;bottom:0;background:var(--accent);height:2px;transition:left var(--dur-fast) var(--ease-out),right var(--dur-fast) var(--ease-out)}.hvr-underline-from-center:hover:before,.hvr-underline-from-center:focus:before,.hvr-underline-from-center:active:before{left:0;right:0}.hvr-sweep-to-right{display:inline-block;vertical-align:middle;position:relative;transform:translateZ(0);transition:color var(--dur-fast) var(--ease-out)}.hvr-sweep-to-right:before{content:"";position:absolute;z-index:-1;inset:0;background:color-mix(in srgb, var(--accent) 20%, transparent);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--dur-fast) var(--ease-out)}.hvr-sweep-to-right:hover:before,.hvr-sweep-to-right:focus:before,.hvr-sweep-to-right:active:before{transform:scaleX(1)}.hvr-radial-out{display:inline-block;vertical-align:middle;position:relative;overflow:hidden;transform:translateZ(0)}.hvr-radial-out:before{content:"";position:absolute;z-index:-1;top:50%;left:50%;width:20px;height:20px;border-radius:50%;background:color-mix(in srgb, var(--bg-card-hover) 80%, transparent);transform:translate(-50%, -50%) scale(0);transition:transform var(--dur-fast) var(--ease-out)}.hvr-radial-out:hover:before,.hvr-radial-out:focus:before,.hvr-radial-out:active:before{transform:translate(-50%, -50%) scale(12)}@media(prefers-reduced-motion: reduce){[class*=hvr-]{transition:none !important;animation:none !important;transform:none !important}}.badge-dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0}.badge-info{background:color-mix(in srgb, var(--status-ok) 15%, transparent);color:var(--status-ok)}.badge-info .badge-dot{background:var(--status-ok)}.badge-fault{background:color-mix(in srgb, var(--status-fault) 18%, transparent);color:var(--status-fault)}.badge-fault .badge-dot{background:var(--status-fault)}.badge-error{background:color-mix(in srgb, var(--status-fault) 18%, transparent);color:var(--status-fault)}.badge-error .badge-dot{background:var(--status-fault)}.badge-warning{background:color-mix(in srgb, var(--status-warn) 15%, transparent);color:var(--status-warn)}.badge-warning .badge-dot{background:var(--status-warn)}.event-row{cursor:pointer;transition:background var(--dur-fast) var(--ease-out)}.event-row:hover{background:var(--bg-card-hover)}.detail-row{background:var(--bg-elevated)}.detail-row.hidden{display:none}.toggle-icon{transition:transform .2s ease;color:var(--fg-muted)}.toggle-icon.open{transform:rotate(180deg);color:var(--accent)}.raw-payload{font-family:"Courier New",monospace;font-size:12px;background:#111827;color:#d1fae5;border-radius:10px;padding:16px;overflow-x:auto;white-space:pre-wrap;word-break:break-all;line-height:1.6;max-height:240px;overflow-y:auto}.filter-pill{padding:4px 13px;border-radius:999px;font-size:12px;font-weight:600;cursor:pointer;background:var(--bg-card-hover);color:var(--fg-secondary);border:none;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}.filter-pill.active,.filter-pill:hover{background:var(--fg-primary);color:var(--bg-card)}#map{border-radius:16px;z-index:0}.leaflet-popup-content-wrapper{border-radius:12px !important;padding:0 !important;box-shadow:0 8px 24px rgba(0,0,0,.15),0 2px 8px rgba(0,0,0,.08) !important;border:1px solid var(--line) !important;overflow:hidden}.leaflet-popup-content{margin:0 !important;min-width:220px}.leaflet-popup-tip{box-shadow:0 4px 8px rgba(0,0,0,.1) !important}.popup-card{padding:16px 18px;font-family:"Bai Jamjuree",sans-serif}.popup-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.popup-name{font-size:14px;font-weight:800;color:var(--fg-primary);letter-spacing:-0.01em}.popup-reg{font-size:11px;font-weight:600;color:var(--fg-tertiary)}.popup-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.04em}.popup-badge-online{background:color-mix(in srgb, var(--status-ok) 15%, transparent);color:var(--status-ok)}.popup-badge-offline{background:var(--bg-card-hover);color:var(--fg-secondary)}.popup-badge-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}.popup-field{display:flex;justify-content:space-between;align-items:center;padding:5px 0}.popup-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}.popup-value{font-size:12px;font-weight:600;color:var(--fg-primary);font-variant-numeric:tabular-nums}.popup-link{display:block;margin-top:10px;padding:7px 0;text-align:center;font-size:11px;font-weight:700;color:#022c22;background:var(--accent);border-radius:8px;text-decoration:none;letter-spacing:.02em;transition:background var(--dur-fast) var(--ease-out)}.popup-link:hover{background:var(--accent-hover)}.map-legend{position:absolute;bottom:24px;left:24px;z-index:1000;background:var(--bg-elevated);border-radius:12px;padding:12px 16px;box-shadow:var(--shadow-card);font-size:11px;font-weight:600;color:var(--fg-secondary);display:flex;align-items:center;gap:14px}.legend-item{display:flex;align-items:center;gap:5px}.legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.stat-chip{background:var(--bg-card-hover);border-radius:10px;padding:16px;display:flex;align-items:center;gap:14px;transition:background var(--dur-fast) var(--ease-out)}.stat-chip:hover{background:var(--bg-elevated)}.stat-chip-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px}.action-btn{background:var(--bg-card);border:1.5px solid var(--line);border-radius:12px;padding:20px 16px;display:flex;flex-direction:column;align-items:center;gap:10px;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);cursor:pointer;width:100%}.action-btn:hover{border-color:var(--accent);box-shadow:0 4px 16px color-mix(in srgb, var(--accent) 12%, transparent)}.badge-active{background:color-mix(in srgb, var(--status-ok) 15%, transparent);color:var(--status-ok);border:1px solid color-mix(in srgb, var(--status-ok) 30%, transparent)}.badge-inactive{background:color-mix(in srgb, var(--status-fault) 15%, transparent);color:var(--status-fault);border:1px solid color-mix(in srgb, var(--status-fault) 30%, transparent)}.badge-pill{display:inline-flex;align-items:center;padding:3px 12px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.04em}.modal-input{width:100%;padding:9px 12px;font-size:13px;border:1.5px solid var(--line);border-radius:8px;background:var(--bg-card-hover);color:var(--fg-primary);outline:none;transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}.modal-input:focus{border-color:var(--accent);background:var(--bg-elevated)}.modal-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-tertiary);margin-bottom:6px}.modal-field{display:flex;flex-direction:column}@keyframes fm-pulse{0%,100%{opacity:1}50%{opacity:.4}}.fm-pulse{animation:fm-pulse 2s ease-in-out infinite}#fm-input{transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}#fm-input:focus{outline:none}#fm-input::placeholder{color:var(--fg-muted)}.fm-fault-row{transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}