body{min-height:100vh}.login-bg{min-height:100vh;background:radial-gradient(circle at top,#243447,#111)}
.login-card{width:min(420px,92vw);background:rgba(20,25,32,.94)}.brand-mark{width:72px;height:72px;border-radius:18px;background:#0d6efd;color:white;display:grid;place-items:center;margin:auto;font-size:1.5rem;font-weight:700}
.camera-grid{display:grid;gap:1rem}.camera-grid[data-layout="1"]{grid-template-columns:1fr}.camera-grid[data-layout="2"]{grid-template-columns:repeat(2,1fr)}.camera-grid[data-layout="4"]{grid-template-columns:repeat(2,1fr)}
.camera-grid[data-layout="6"]{grid-template-columns:repeat(3,1fr)}.camera-grid[data-layout="9"]{grid-template-columns:repeat(3,1fr)}.camera-grid[data-layout="16"]{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.camera-grid{grid-template-columns:1fr!important}}.stream-shell{background:#050505;position:relative}.camera-stream{width:100%;height:100%;object-fit:contain}.offline-overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.72);color:white}
.snapshot-thumb{width:100%;aspect-ratio:4/3;object-fit:cover;cursor:pointer}.filter-control{width:auto;min-width:180px}.zone-row{background:var(--bs-tertiary-bg);border-radius:.5rem;padding:.75rem;margin-top:.5rem}

.navbar .container-fluid { gap: .75rem; }
.camera-card { min-width: 0; }
.camera-card .card-header { gap: .5rem; }
.camera-stream { min-height: 180px; }
@media (max-width: 700px) {
  .navbar .container-fluid { align-items: flex-start; }
  .navbar .d-flex { width: 100%; }
  .navbar .form-select { flex: 1 1 90px; }
  .camera-grid { grid-template-columns: 1fr !important; }
  .camera-card .card-footer { flex-direction: column; align-items: stretch; gap: .5rem; }
  .fullscreen-button { width: 100%; }
}

.camera-manager-card input,
.camera-manager-card select {
  min-width: 0;
}
@media (max-width: 700px) {
  .camera-manager-card .card-header {
    align-items: stretch !important;
  }
  .camera-manager-card .card-header > div {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
  }
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.esp32-device button { min-height: 38px; }
@media (max-width: 600px) {
  .grid-2 { grid-template-columns: 1fr; }
}

:root {
  --tm-accent: #4f8cff;
  --tm-panel: rgba(25, 34, 49, .88);
}
.enterprise-nav { backdrop-filter: blur(14px); }
.brand-mark {
  width: 38px; height: 38px; display: inline-grid; place-items: center;
  border-radius: 11px; background: linear-gradient(135deg,#2f6fed,#77a6ff);
  color: white; font-weight: 800; letter-spacing: -.04em;
  box-shadow: 0 8px 26px rgba(47,111,237,.28);
}
.enterprise-hero {
  background:
    radial-gradient(circle at 80% 10%, rgba(79,140,255,.22), transparent 34%),
    linear-gradient(180deg, rgba(18,25,38,.96), rgba(12,18,28,.98));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.eyebrow {
  color: #82aaff; font-size: .73rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: .45rem;
}
.enterprise-summary-card {
  padding: 1.4rem; border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px; background: var(--tm-panel);
  box-shadow: 0 20px 60px rgba(0,0,0,.24);
}
.enterprise-module-card {
  border-color: rgba(255,255,255,.1);
  transition: transform .16s ease, border-color .16s ease;
}
.enterprise-module-card:hover {
  transform: translateY(-3px); border-color: rgba(79,140,255,.6);
}

/* TopMicro Linux Enterprise Platform v4.4 UI */
.enterprise-nav {
  min-height: 66px;
  background: rgba(16, 22, 33, .94) !important;
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .16);
  z-index: 1040;
}
.enterprise-nav .nav-link {
  border-radius: .55rem;
  padding: .45rem .7rem;
}
.enterprise-nav .nav-link:hover {
  background: rgba(79, 140, 255, .12);
}
.brand-copy { line-height: 1.02; }
.enterprise-page-heading {
  background: linear-gradient(180deg, rgba(79,140,255,.08), transparent);
}
.enterprise-breadcrumb {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
  font-weight: 700;
  margin-bottom: .35rem;
}
.module-toolbar {
  background: rgba(20, 28, 41, .72);
  position: relative;
  z-index: 5;
}
.toolbar-control { width: 76px; }
.card {
  border-color: rgba(255,255,255,.095);
  box-shadow: 0 10px 32px rgba(0,0,0,.10);
}
.card-header {
  font-weight: 650;
  background: rgba(255,255,255,.025);
}
main { min-height: calc(100vh - 150px); }
.btn { border-radius: .62rem; }
.form-control, .form-select { border-radius: .62rem; }
pre {
  border-radius: .75rem;
  background: rgba(0,0,0,.18);
  padding: 1rem;
}
@media (max-width: 1199.98px) {
  .enterprise-nav .navbar-collapse {
    padding: .8rem 0 1rem;
  }
  .enterprise-nav .nav-link {
    padding: .65rem .8rem;
  }
}
@media (max-width: 575.98px) {
  .enterprise-page-heading .btn { width: 100%; }
  .module-toolbar .btn { flex: 1 1 auto; }
  .brand-copy small { font-size: .68rem; }
}

/* MQTT Enterprise V9.2 */
.mqtt-table-wrap { max-height: 620px; overflow: auto; }
.mqtt-table-wrap thead { background: var(--bs-body-bg); z-index: 3; }
.mqtt-payload-summary { cursor: pointer; max-width: 480px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* SQLite Manager V9.3 */
.sqlite-grid-wrap { max-height: 650px; overflow: auto; }
.sqlite-grid-wrap thead { position: sticky; top: 0; background: var(--bs-body-bg); z-index: 3; }
.sqlite-cell { max-width: 360px; white-space: pre-wrap; overflow-wrap: anywhere; }