:root {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #172b3a;
  background: #f3f6f8;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: not-allowed; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 7px; }
h2 { font-size: 1.12rem; margin-bottom: 8px; }
a { color: #087f8c; }
.muted { color: #718096; }
.small { font-size: .84rem; }
.hidden { display: none !important; }

.login-page {
  display: grid;
  place-items: center;
  padding: 22px;
  background: linear-gradient(140deg, #e6f7f4, #f3f6f8 55%, #e9efff);
}
.login-card {
  width: min(100%, 420px);
  padding: 34px;
  background: white;
  border: 1px solid #e0e8ee;
  border-radius: 18px;
  box-shadow: 0 18px 55px #1b344515;
}
.login-card h1 { text-align: center; }
.login-card > p { text-align: center; }
.brand-icon { text-align: center; font-size: 3rem; margin-bottom: 8px; }
label { display: block; font-weight: 650; font-size: .9rem; margin: 17px 0 7px; }
input, select {
  width: 100%;
  min-height: 43px;
  padding: 10px 12px;
  border: 1px solid #cbd5df;
  border-radius: 9px;
  background: white;
  color: #172b3a;
}
input:focus, select:focus { outline: 2px solid #6bc7ca; border-color: #15969b; }
.btn {
  border: 1px solid #d1dce4;
  border-radius: 9px;
  padding: 9px 13px;
  background: white;
  color: #233b4b;
  font-weight: 650;
}
.btn:hover { filter: brightness(.97); }
.btn.primary { color: white; background: #087f8c; border-color: #087f8c; }
.btn.full { width: 100%; margin-top: 22px; min-height: 46px; }
.btn.danger { background: #c33e47; border-color: #c33e47; color: white; }
.btn.danger-outline { color: #b52e3b; border-color: #e8c4c7; }
.error { color: #b42332; font-size: .9rem; min-height: 1.2em; margin: 12px 0 0; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 14px clamp(14px, 3vw, 32px);
  background: white;
  border-bottom: 1px solid #e0e8ee;
}
.brand { text-decoration: none; color: #173847; font-weight: 800; font-size: 1.05rem; }
.top-actions, .inline-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.user-name { color: #647787; font-size: .9rem; }
.container { max-width: 1440px; margin: auto; padding: 26px clamp(12px, 3vw, 32px) 40px; }
.page-heading, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.page-heading { margin-bottom: 22px; }
.page-heading p, .section-heading p { margin-bottom: 0; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat-card, .panel {
  background: white;
  border: 1px solid #e1e8ed;
  border-radius: 14px;
  box-shadow: 0 3px 12px #19374708;
}
.stat-card { padding: 18px; }
.stat-card span { display: block; color: #718096; font-size: .88rem; margin-bottom: 10px; }
.stat-card strong { font-size: 1.8rem; }
.panel { padding: 21px; margin-bottom: 20px; min-width: 0; }
.panel h2 { margin-bottom: 6px; }
.section-heading { margin-bottom: 18px; }
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 30px; padding: 5px 10px; font-size: .78rem; font-weight: 750;
  white-space: nowrap;
}
.pill.online { background: #e0f7e9; color: #157345; }
.pill.offline { background: #fce8e9; color: #a62b35; }
.pill.pending { background: #fff4d6; color: #845a00; }
.device-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.device-card { min-width: 0; border: 1px solid #dce6ec; border-radius: 12px; padding: 16px; }
.device-card.selected { border-color: #15969b; box-shadow: 0 0 0 2px #15969b1c; }
.device-title { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.device-title h3 { overflow-wrap: anywhere; margin: 0 0 4px; font-size: 1rem; }
.device-id { color: #718096; font-size: .8rem; overflow-wrap: anywhere; }
.device-metrics { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin: 18px 0; }
.metric { background: #f5f8fa; border-radius: 8px; padding: 10px; min-width: 0; }
.metric span { display: block; font-size: .76rem; color: #718096; margin-bottom: 5px; }
.metric strong { overflow-wrap: anywhere; font-size: 1rem; }
.device-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.device-controls .btn { flex: 1; min-width: 90px; }
.empty-state { grid-column: 1 / -1; text-align: center; padding: 35px 10px; color: #718096; }
.notice { padding: 12px 14px; border-radius: 9px; margin-bottom: 16px; overflow-wrap: anywhere; }
.error-notice { color: #922b35; background: #fff0f0; border: 1px solid #f3caca; }
.success-notice { color: #17683e; background: #e8f8ef; border: 1px solid #c4ead3; }
.location-list { display: flex; flex-wrap: wrap; gap: 10px; color: #718096; }
.location-item { padding: 10px 12px; border: 1px solid #e0e8ee; border-radius: 8px; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 720px; font-size: .88rem; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid #e7edf1; white-space: nowrap; }
th { color: #536878; background: #f6f9fb; font-weight: 700; }
tbody tr:last-child td { border-bottom: 0; }
.footer { text-align: center; padding: 12px; color: #81909c; font-size: .82rem; }
@media (max-width: 1050px) {
  .device-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .top-actions { width: 100%; }
  .page-heading, .section-heading { align-items: flex-start; flex-direction: column; }
  .device-grid { grid-template-columns: 1fr; }
  .stats { gap: 9px; }
  .stat-card { padding: 13px; }
  .stat-card strong { font-size: 1.5rem; }
  .panel { padding: 15px; }
  .login-card { padding: 25px; }
  .inline-controls { width: 100%; }
  .inline-controls select { flex: 1; min-width: 150px; }
}