:root { --st-ink:#0f172a; --st-side:#0b1f33; --st-accent:#14b8a6; --st-bg:#f3f5f8; }
body { font-family: Inter, "Noto Sans Lao", "Noto Sans Thai", system-ui, sans-serif; background: var(--st-bg); color: var(--st-ink); }
body.plain { min-height: 100vh; background: radial-gradient(circle at 20% 10%, #155e75, #0b1f33 60%); }
.card-hover { transition: transform .15s, box-shadow .15s; } .card-hover:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.shell { display: flex; min-height: 100vh; }
.side { width: 240px; flex: 0 0 240px; background: var(--st-side); color: #fff; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.area-portal .side { background: #12263f; }
.brand { display: flex; gap: .6rem; align-items: center; padding: 1rem; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-mark { width: 38px; height: 38px; border-radius: 10px; background: var(--st-accent); display: grid; place-items: center; font-size: 1.2rem; }
.side-link { display: flex; align-items: center; gap: .7rem; padding: .55rem 1rem; margin: 2px .5rem; border-radius: 8px; color: rgba(255,255,255,.75); text-decoration: none; }
.side-link:hover { background: rgba(255,255,255,.06); color: #fff; } .side-link.active { background: rgba(20,184,166,.18); color: #fff; }
.side-foot { margin-top: auto; padding: 1rem; border-top: 1px solid rgba(255,255,255,.08); }
.main { flex: 1; min-width: 0; }
.topbar { display: flex; align-items: center; gap: .75rem; padding: .8rem 1.25rem; background: #fff; border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; z-index: 1000; }
.content { padding: 1.25rem; }
.card { border: 1px solid #e5e7eb; border-radius: 12px; } .card-header { background: #fff; font-weight: 600; }
.stat .bi { font-size: 1.3rem; } .stat-n { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.map { height: 340px; border-radius: 0 0 12px 12px; } .map-lg { height: 460px; } .card > .map:first-child { border-radius: 12px; }
.dev-icon { width: 38px; height: 38px; border-radius: 10px; display: inline-grid; place-items: center; font-size: 1.15rem; background: #e0f2fe; color: #0369a1; flex: 0 0 38px; }
.kind-tracker { background: #fef3c7; color: #b45309; } .kind-sensor { background: #ede9fe; color: #6d28d9; }
.relays { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; }
.relay-btn { border: 1px solid #d1d5db; background: #f9fafb; border-radius: 12px; padding: .6rem .4rem; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: all .15s; position: relative; z-index: 2; }
.relay-btn .bi { font-size: 1.4rem; color: #9ca3af; } .relay-btn span { font-size: .8rem; font-weight: 600; } .relay-btn small { font-size: .7rem; color: #6b7280; }
.relay-btn.on { background: #ecfdf5; border-color: #10b981; } .relay-btn.on .bi { color: #10b981; }
.relay-btn.busy { opacity: .6; } .relay-btn.busy .bi { animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.tel-chip { display: inline-block; background: #f1f5f9; border-radius: 6px; padding: 1px 7px; margin: 0 4px 4px 0; }
.st-stock { background: #e5e7eb; color: #374151; } .st-active { background: #dcfce7; color: #166534; } .st-suspended { background: #fef3c7; color: #92400e; } .st-retired { background: #fee2e2; color: #991b1b; }
.cmd-queued { background: #e0e7ff; color: #3730a3; } .cmd-sent { background: #fef9c3; color: #854d0e; } .cmd-done { background: #dcfce7; color: #166534; } .cmd-failed, .cmd-expired { background: #fee2e2; color: #991b1b; }
.badge[class*="alert-"] { background: #e5e7eb; color: #111827; }
.alert-offline, .alert-sos, .alert-power_cut, .alert-overspeed { background: #fee2e2 !important; color: #991b1b !important; }
.alert-online, .alert-geofence_enter { background: #dcfce7 !important; color: #166534 !important; }
.alert-geofence_exit, .alert-low_battery { background: #fef3c7 !important; color: #92400e !important; }
.min-w-0 { min-width: 0; }
.dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.3); }
.dot.on { background: #10b981; } .dot.off { background: #9ca3af; }
@media (max-width: 991px) {
  .side { position: fixed; left: -260px; z-index: 1100; transition: left .2s; } .side.open { left: 0; }
  .content { padding: .75rem; } .map-lg { height: 340px; }
}