:root {
  color-scheme: dark;
  --bg: #101923;
  --surface: #16222e;
  --surface2: #1a2936;
  --line: #2b3b49;
  --ink: #edf3f5;
  --muted: #93a5b5;
  --accent: #79d3bc;
  --accent-bg: #1e423e;
  --danger: #f4a5ab;
  --amber: #f0cd8c;
  --radius: 12px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font:
    14px/1.55 "Segoe UI",
    system-ui,
    sans-serif;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  outline-offset: 4px;
}
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid #3b4e5d;
  border-radius: 7px;
  background: #21333f;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s;
}
button:hover {
  background: #2c4452;
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
button.primary,
.primary {
  background: var(--accent);
  color: #102c28;
  border-color: var(--accent);
  font-weight: 650;
}
.primary:hover {
  background: #a0e5d4;
}
button.quiet {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
button.small {
  font-size: 12px;
  min-height: 30px;
  padding: 5px 9px;
}
a {
  color: var(--accent);
  text-underline-offset: 3px;
}
input,
select,
textarea {
  width: 100%;
  min-height: 42px;
  background: #111e29;
  color: var(--ink);
  border: 1px solid #3b4b59;
  border-radius: 7px;
  padding: 10px 12px;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
}
input[type="checkbox"] {
  width: auto;
  min-height: 0;
  accent-color: var(--accent);
  vertical-align: middle;
  margin-right: 9px;
}
label {
  display: block;
  font-size: 12px;
  font-weight: 550;
  color: #becdd7;
  margin: 14px 0;
}
label input,
label select,
label textarea {
  display: block;
  margin-top: 6px;
}
label:has(input[type="checkbox"]) {
  font-size: 13px;
}
label input[type="checkbox"] {
  display: inline;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1 {
  font-size: 30px;
  letter-spacing: -0.8px;
  line-height: 1.2;
  margin-bottom: 0;
}
h2 {
  font-size: 20px;
  letter-spacing: -0.35px;
  line-height: 1.3;
  margin-bottom: 12px;
}
h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
}
p {
  margin-bottom: 12px;
}
small,
.muted {
  color: var(--muted);
}
small {
  font-size: 11px;
}
strong {
  font-weight: 650;
}
.eyebrow {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 1.6px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 9px;
}
.wordmark {
  display: block;
  font-size: 35px;
  letter-spacing: -2px;
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
}
.wordmark span {
  display: block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2.8px;
  color: var(--accent);
  margin-top: 11px;
}
.login {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
}
.login-story {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 55px 8%;
  background:
    radial-gradient(ellipse at 10% 70%, #24534e80, transparent 60%), #14262d;
  border-right: 1px solid var(--line);
}
.login-story h1 {
  font-size: clamp(35px, 4.4vw, 66px);
  letter-spacing: -2.7px;
  margin: 22px 0;
}
.login-story p {
  max-width: 420px;
  font-size: 17px;
  color: #b0c7ce;
}
.login-story .eyebrow {
  color: #8edcc7;
}
.login-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.login-pills span {
  border: 1px solid #42615f;
  border-radius: 50px;
  padding: 6px 12px;
  font-size: 11px;
  color: #bed6d3;
}
.login-side {
  display: grid;
  place-items: center;
  padding: 40px;
}
.login-card {
  width: min(385px, 100%);
}
.login-card h2 {
  font-size: 29px;
  letter-spacing: -0.9px;
  margin: 12px 0;
}
.login-card label {
  margin-top: 24px;
}
.login-card button {
  width: 100%;
  margin: 20px 0;
}
.login-card small {
  display: block;
  text-align: center;
}
.error {
  color: var(--danger);
}
aside {
  position: fixed;
  width: 220px;
  inset: 0 auto 0 0;
  padding: 30px 18px;
  background: #13202a;
  border-right: 1px solid var(--line);
  z-index: 3;
}
aside .wordmark {
  margin: 0 14px 40px;
}
.nav-label {
  font-size: 9px;
  letter-spacing: 1.7px;
  color: #718898;
  margin: 22px 14px 12px;
}
nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
nav button {
  justify-content: flex-start;
  text-align: left;
  background: transparent;
  border: 0;
  color: #9cafbc;
  padding: 11px 13px;
  border-radius: 7px;
  font-size: 13px;
}
nav button:hover {
  background: #1c303b;
}
nav button.active {
  color: var(--accent);
  background: #214039;
}
nav svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  flex-shrink: 0;
}
.aside-bottom {
  position: absolute;
  bottom: 25px;
  left: 32px;
  color: #a8b9c3;
  font-size: 11px;
}
.aside-bottom small {
  display: block;
  margin-top: 5px;
}
.version-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 7px;
}
main {
  margin-left: 220px;
  padding: 32px 38px;
  max-width: 2200px;
  min-width: 0;
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 25px;
}
.header-actions,
.toolbar,
.actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.header-actions button {
  font-size: 12px;
}
.header-actions select {
  width: 210px;
  min-height: 38px;
  font-size: 12px;
}
.notice {
  background: #1a2c32;
  color: #a4c5c5;
  border: 1px solid #2c454a;
  border-radius: 8px;
  padding: 11px 15px;
  font-size: 12px;
  margin-bottom: 22px;
}
.notice:empty {
  display: none;
}
.error-banner {
  background: #44292e;
  border: 1px solid #795054;
  color: #ffc4ca;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 14px;
}
.error-banner:empty,
.error:empty {
  display: none;
}
.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px;
  margin: 20px 0 26px;
}
.card,
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.card {
  padding: 20px;
}
.card .metric-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.card strong {
  display: block;
  font-size: 34px;
  letter-spacing: -1px;
  line-height: 1.2;
  margin: 12px 0 6px;
}
.card small {
  display: block;
}
.panel {
  padding: 22px;
  margin-bottom: 20px;
}
.panel-heading,
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.panel-heading h2,
.section-heading h2 {
  margin: 0;
}
.section-heading {
  margin: 8px 0 22px;
}
.section-heading p {
  margin: 5px 0 0;
}
.split {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 20px;
}
.equal {
  grid-template-columns: 1fr 1fr;
}
.toolbar {
  margin-bottom: 18px;
  justify-content: space-between;
}
.toolbar .filters {
  display: flex;
  gap: 8px;
  flex: 1;
  flex-wrap: wrap;
}
.toolbar input {
  width: 280px;
  max-width: 100%;
}
.toolbar select {
  width: 200px;
}
.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #14202b;
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 12px;
}
th {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: #1c2d39;
  color: #9bb0bf;
  font-weight: 650;
  white-space: nowrap;
}
td,
th {
  padding: 14px 16px;
  border-bottom: 1px solid #283a47;
  vertical-align: middle;
}
tr:last-child td {
  border-bottom: 0;
}
td:first-child {
  min-width: 135px;
}
tbody tr:hover {
  background: #192e3a;
}
td strong {
  font-size: 13px;
}
td small {
  display: block;
  margin-top: 4px;
}
.actions {
  flex-wrap: nowrap;
}
.actions button {
  font-size: 11px;
  white-space: nowrap;
  min-height: 31px;
  padding: 5px 9px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 4px;
  padding: 3px 7px;
  background: #293c49;
  color: #bbced9;
  font-size: 10px;
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}
.online,
.active,
.succeeded,
.observed,
.snmp-observed {
  background: #1c4037;
  color: #92dcc4;
}
.los,
.failed,
.suspended,
.collection-failed,
.stale {
  background: #4d2e36;
  color: #f7b6bf;
}
.power-off,
.offline,
.retrying,
.queued,
.leased,
.blocked {
  background: #4b4028;
  color: #efd49c;
}
.empty {
  padding: 40px !important;
  text-align: center;
  color: var(--muted);
}
.empty-state {
  padding: 52px 22px;
  text-align: center;
}
.empty-state svg {
  width: 35px;
  height: 35px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.2;
  margin-bottom: 12px;
}
.empty-state h2 {
  margin-bottom: 8px;
}
.empty-state p {
  max-width: 440px;
  margin: 0 auto 20px;
  color: var(--muted);
}
.profile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.profile-card {
  padding: 23px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.profile-card .eyebrow {
  color: var(--accent);
}
.profile-card p {
  font-size: 12px;
  color: var(--muted);
  min-height: 70px;
}
.profile-card .badge {
  margin: 0 4px 4px 0;
}
.check-list {
  list-style: none;
  padding: 0;
  margin: 12px 0;
}
.check-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 15px;
  font-size: 12px;
}
.check-list li:last-child {
  border: 0;
}
.check-list .done {
  color: var(--accent);
}
.device-banner {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  margin: 4px 0 20px;
}
.device-banner h2 {
  font-size: 26px;
  margin-bottom: 5px;
}
.device-banner p {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
  overflow: auto;
}
.tabs button {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  white-space: nowrap;
  color: var(--muted);
  padding: 11px 18px;
}
.tabs button.active {
  border-bottom-color: var(--accent);
  color: var(--accent);
}
.setup-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
.setup-step {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 16px;
  font-size: 12px;
}
.setup-step strong {
  display: block;
  margin-bottom: 5px;
}
.setup-step small {
  display: block;
  min-height: 33px;
}
.setup-step button {
  margin-top: 12px;
}
.signal {
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.value-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.value-list div {
  min-width: 0;
}
.value-list span {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 3px;
}
.value-list strong {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.usage-row {
  margin: 16px 0;
}
.usage-row p {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin: 0 0 7px;
}
meter {
  width: 100%;
  height: 8px;
  border-radius: 6px;
}
meter::-webkit-meter-bar {
  background: #2a414a;
  border: 0;
}
meter::-webkit-meter-optimum-value {
  background: var(--accent);
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  margin: 16px 0;
}
.legend span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
}
.legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.legend .red {
  background: var(--danger);
}
.legend .amber {
  background: var(--amber);
}
.health-ring {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 20px 4px;
}
.health-ring svg {
  width: 130px;
  height: 130px;
  transform: rotate(-90deg);
}
.ring-total {
  font-size: 30px;
  font-weight: 650;
}
.ring-label {
  font-size: 11px;
  color: var(--muted);
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  padding: 15px 0;
}
.main-footer {
  margin-top: 35px;
  border-top: 1px solid var(--line);
  padding: 18px 0 0;
  display: flex;
  justify-content: space-between;
  color: #6f8494;
  font-size: 9px;
  letter-spacing: 1px;
}
.main-footer span {
  letter-spacing: 0;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}
.form-section {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-top: 20px;
}
.form-section h3 {
  color: var(--accent);
  font-size: 12px;
}
.form-section p,
.field-hint {
  font-size: 11px;
  color: var(--muted);
}
.form-section:first-child {
  margin-top: 0;
  border: 0;
  padding-top: 0;
}
.profile-description {
  border-left: 2px solid var(--accent);
  background: #1a3034;
  padding: 10px 14px;
  color: #bed8d3;
  font-size: 12px;
}
.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
  margin-bottom: 20px;
}
.dialog-head h2 {
  font-size: 23px;
  margin: 0;
}
.icon-close {
  font-size: 25px;
  line-height: 1;
  width: 33px;
  min-height: 33px;
  padding: 0;
  flex-shrink: 0;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  margin-top: 22px;
  padding-top: 18px;
}
dialog {
  width: min(760px, calc(100% - 28px));
  max-height: 90dvh;
  overflow: auto;
  border: 1px solid #475967;
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  padding: 26px;
}
dialog::backdrop {
  background: #050b12bd;
  backdrop-filter: blur(3px);
}
pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #0f1b25;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font:
    12px/1.5 ui-monospace,
    monospace;
}
textarea {
  min-height: 120px;
}
details {
  position: relative;
}
summary {
  cursor: pointer;
  list-style: none;
  color: var(--muted);
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12px;
}
details[open] .menu {
  position: absolute;
  right: 0;
  top: 35px;
  z-index: 5;
  background: #20333f;
  box-shadow: 0 8px 25px #0006;
  border: 1px solid #42606f;
  padding: 7px;
  display: grid;
  gap: 4px;
  min-width: 180px;
  border-radius: 7px;
}
.menu button {
  justify-content: flex-start;
  border: 0;
  background: transparent;
  font-size: 12px;
}
.back-button {
  margin-bottom: 20px;
}
.profile-picker {
  margin-bottom: 20px;
}
[hidden] {
  display: none !important;
}
@media (min-width: 1600px) {
  main {
    padding: 35px 45px;
  }
  .cards {
    gap: 20px;
  }
}
@media (max-width: 1150px) {
  main {
    padding: 25px 24px;
  }
  .profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-header {
    align-items: flex-start;
  }
  .header-actions {
    max-width: 330px;
    justify-content: flex-end;
  }
  .split {
    grid-template-columns: 1fr;
  }
  .setup-steps {
    gap: 8px;
  }
}
@media (max-width: 800px) {
  aside {
    width: 180px;
    padding: 25px 10px;
  }
  aside .wordmark {
    font-size: 29px;
    margin-left: 10px;
  }
  main {
    margin-left: 180px;
    padding: 22px 18px;
  }
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-header {
    flex-direction: column;
    gap: 16px;
  }
  .header-actions {
    max-width: none;
    width: 100%;
    justify-content: flex-start;
  }
  .setup-steps {
    grid-template-columns: 1fr;
  }
  .setup-step small {
    min-height: 0;
  }
  .setup-step {
    padding: 14px;
  }
  .profile-grid {
    grid-template-columns: 1fr;
  }
  .login {
    grid-template-columns: 1fr 1fr;
  }
  .login-story {
    padding: 40px 25px;
  }
  .login-story h1 {
    font-size: 38px;
  }
  .login-side {
    padding: 28px;
  }
}
@media (max-width: 600px) {
  aside {
    position: static;
    width: 100%;
    padding: 19px 14px 10px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  aside .wordmark {
    font-size: 26px;
    margin: 0 6px 19px;
  }
  aside .wordmark span {
    margin-top: 8px;
    font-size: 8px;
  }
  .aside-bottom,
  .nav-label {
    display: none;
  }
  nav {
    flex-direction: row;
    overflow: auto;
    gap: 3px;
    max-width: 100%;
  }
  nav button {
    white-space: nowrap;
    font-size: 12px;
    padding: 9px 11px;
  }
  nav svg {
    width: 15px;
    height: 15px;
  }
  main {
    margin: 0;
    padding: 22px 14px;
  }
  .header-actions select {
    width: 100%;
  }
  .header-actions button {
    font-size: 11px;
  }
  h1 {
    font-size: 27px;
  }
  .cards {
    gap: 9px;
  }
  .card {
    padding: 16px;
  }
  .card strong {
    font-size: 30px;
  }
  .panel {
    padding: 17px;
  }
  .section-heading {
    align-items: flex-start;
  }
  .section-heading button {
    font-size: 11px;
  }
  .toolbar input,
  .toolbar select {
    width: 100%;
  }
  .toolbar .filters {
    width: 100%;
    flex-basis: 100%;
  }
  .profile-grid {
    grid-template-columns: 1fr;
  }
  .device-banner {
    align-items: flex-start;
    flex-direction: column;
  }
  .tabs button {
    padding: 10px 14px;
    font-size: 12px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .value-list {
    gap: 13px;
  }
  .main-footer span {
    display: none;
  }
  .login {
    display: block;
  }
  .login-story {
    padding: 28px;
  }
  .login-story > div,
  .login-story > small {
    display: none;
  }
  .login-side {
    padding: 36px 25px;
    min-height: 70dvh;
  }
  .login-card h2 {
    font-size: 27px;
  }
  dialog {
    padding: 20px;
  }
  .health-ring {
    gap: 18px;
  }
  td,
  th {
    padding: 12px;
  }
  .actions {
    gap: 5px;
  }
}

.operation-panel {
  border-color: #317d72;
  margin-bottom: 22px;
  min-width: 0;
}
.operation-panel select {
  max-width: 100%;
  margin: 8px 0 14px;
}
.operation-log {
  background: #09121c;
  color: #cbe9e3;
  max-height: 310px;
  min-height: 130px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 16px;
  font-size: 12px;
  line-height: 1.6;
  border: 1px solid #2a4550;
  border-radius: 10px;
}
.operation-panel small {
  display: block;
  margin-top: 7px;
}
.log-follow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.log-follow input {
  width: auto;
}
.port-discovery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.port-discovery-grid strong {
  font-size: 26px;
  display: block;
  margin-top: 7px;
}

.ont-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  margin: 8px 0 10px;
}
.ont-filters label {
  margin: 0;
  min-width: 120px;
  font-size: 11px;
  color: var(--muted);
}
.ont-filters select,
.ont-filters input {
  padding: 8px 10px;
  min-height: 36px;
  margin: 4px 0 0;
  font-size: 12px;
}
.ont-filters .ont-query {
  flex: 1;
  min-width: 220px;
}
.ont-grid table {
  font-size: 12px;
}
.ont-grid td,
.ont-grid th {
  padding: 7px 10px;
  line-height: 1.3;
}
.ont-grid td small {
  font-size: 10px;
  margin-top: 3px;
  line-height: 1.25;
}
.ont-grid th {
  font-size: 10px;
  letter-spacing: 0.06em;
}
.ont-grid .badge {
  padding: 3px 6px;
  font-size: 10px;
  white-space: nowrap;
}
.ont-grid td:nth-child(3) {
  max-width: 240px;
  min-width: 150px;
}
.ont-description,
.ont-model {
  display: block;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ont-grid td:nth-child(2),
.ont-grid td:nth-child(5),
.ont-grid td:nth-child(6) {
  white-space: nowrap;
}
.mono {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
}
.ont-scope {
  min-width: 130px;
  margin-bottom: 8px;
}
.ont-scope small,
.ont-scope strong {
  display: block;
}
@media (max-width: 600px) {
  .ont-filters label {
    flex: 1;
    min-width: 130px;
  }
  .ont-filters .ont-query {
    min-width: 100%;
  }
  .pagination {
    flex-wrap: wrap;
    gap: 8px;
  }
}

.badge.signal-low,
.badge.signal-high {
  background: #583f1c;
  color: #ffd58b;
}

.operation-panel .panel-heading {
  flex-wrap: wrap;
}
.operation-panel .panel-heading > div {
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 700px) {
  .operation-panel .panel-heading {
    flex-direction: column;
    align-items: flex-start;
  }
  .operation-panel .panel-heading .actions {
    width: 100%;
    justify-content: flex-start;
  }
}
.operation-panel .panel-heading .actions {
  flex-wrap: wrap;
}

.profile-catalogue td,
.profile-catalogue th {
  padding: 9px 12px;
  font-size: 12px;
  vertical-align: top;
}
.profile-catalogue td:last-child {
  max-width: 620px;
  white-space: normal;
  line-height: 1.45;
}
.ont-grid td:nth-child(4) .badge {
  margin: 2px 2px 2px 0;
}

.compact-setup {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px;
}
.compact-setup small {
  display: block;
  margin-top: 5px;
}
.setting-check {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 12px 0;
}
.setting-check input[type="checkbox"] {
  width: auto;
}
.reconciled-ports {
  margin-top: 18px;
}
@media (max-width: 700px) {
  .compact-setup {
    flex-direction: column;
    align-items: stretch;
  }
}

dialog:has(.setup-editor) {
  width: min(1080px, calc(100% - 28px));
}
.setup-editor {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 28px;
}
.setup-editor > section {
  min-width: 0;
}
.setup-editor > section + section {
  border-left: 1px solid var(--line);
  padding-left: 24px;
}
.setup-editor label {
  font-size: 12px;
}
.setup-editor input,
.setup-editor select {
  min-height: 36px;
  padding: 8px;
}
.setup-editor .form-section {
  margin-top: 14px;
  padding-top: 12px;
}
.setup-editor summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
}
#setupFingerprint {
  overflow-wrap: anywhere;
}
@media (max-width: 760px) {
  .setup-editor {
    grid-template-columns: 1fr;
  }
  .setup-editor > section + section {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 16px 0 0;
  }
}

.setup-editor label {
  margin: 8px 0;
}
.setup-editor .profile-description {
  padding: 8px 10px;
  font-size: 11px;
}
.setup-editor .form-grid {
  gap: 0 12px;
}
.setup-editor .setup-credentials input[type="checkbox"] {
  min-height: 0;
}

.signal-chart {
  width: 100%;
  height: auto;
  min-height: 160px;
  background: #0e1a24;
  border-radius: 8px;
  margin: 12px 0;
}
.signal-chart text {
  fill: #a8becd;
  font-size: 11px;
}
.muted-alert {
  background: #46515d;
  color: #d6dee6;
}
.badge.signal-drop,
.badge.signal-rise,
.badge.signal-trend-drop,
.badge.signal-trend-rise {
  background: #654c22;
  color: #ffe3a5;
}
dialog:has(.signal-detail) {
  width: min(1000px, calc(100% - 28px));
}
.signal-detail .actions {
  flex-wrap: wrap;
}

.ont-open {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  min-height: 0;
  width: 100%;
  font-size: inherit;
  color: var(--ink);
}
.ont-open:hover {
  color: var(--accent);
  background: none;
}
.ont-open small {
  margin-top: 3px;
}
.ont-grid td {
  padding-top: 10px;
  padding-bottom: 10px;
}
.delivery-icon {
  float: left;
  margin: 0 9px 0 0;
  padding: 4px;
  min-height: 26px;
  width: 28px;
  color: #8495a4;
  background: transparent;
  border: 0;
}
.delivery-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
.delivery-icon.sent {
  color: #76d4a3;
}
.delivery-icon.failed {
  color: #f28b89;
}
.delivery-icon.pending {
  color: #efc574;
}
.compact-settings {
  max-width: 1300px;
}
.compact-settings .settings-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 16px;
}
.compact-settings label {
  margin: 8px 0;
}
.compact-settings input,
.compact-settings select {
  min-height: 35px;
  padding: 7px 9px;
}
.compact-settings details {
  margin: 12px 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.compact-settings .setting-check {
  display: inline-flex;
  margin-right: 20px;
}
.compact-settings .panel {
  padding: 14px;
}
.compact-settings section {
  margin-bottom: 16px;
}
.compact-settings .form-grid {
  max-width: 1150px;
}
.compact-signal .signal-values {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0;
}
.compact-signal .signal-chart {
  min-height: 140px;
  max-height: 230px;
}
.compact-signal .tabs {
  margin: 12px 0;
}
.compact-signal .panel-heading small {
  display: block;
  margin-top: 4px;
}
.compact-signal .empty {
  padding: 14px;
}
dialog:has(.compact-signal) {
  width: min(840px, calc(100% - 28px));
}
@media (max-width: 760px) {
  .compact-settings .settings-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .compact-settings .settings-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .panel-heading,
  .section-heading {
    flex-wrap: wrap;
    min-width: 0;
  }
  .panel-heading .actions,
  .section-heading .actions {
    flex-wrap: wrap;
    min-width: 0;
  }
}
.profile-reg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 210px;
}
.profile-reg-actions button {
  font-size: 11px;
  padding: 6px 9px;
}
.profile-builtin {
  margin-top: 24px;
}
.profile-builtin summary {
  margin-bottom: 14px;
}
.profile-description small {
  display: block;
  margin-top: 5px;
}
.badge.published {
  background: #1f463b;
  color: #a8ebd6;
}
.badge.draft {
  background: #574723;
  color: #ffe0a1;
}
.badge.retired {
  background: #2c3943;
  color: #acbcc8;
}

.learning-controls {grid-template-columns:repeat(auto-fit,minmax(140px,1fr));align-items:center;margin:16px 0}.learning-summary{display:grid;gap:6px;margin:20px 0 12px}.learning-profile{border-top:1px solid var(--border,#304351);margin-top:16px;padding-top:12px}#learningResults table td,#learningResults table th{padding:8px 12px}#learningResults details{margin:12px 0}#learningResults .actions{flex-wrap:wrap}

.learning-panel .actions {flex-wrap:wrap}.learning-panel small{display:block;overflow-wrap:anywhere}.learning-panel label,.learning-panel input,.learning-panel select{min-width:0;max-width:100%}.badge.parser-verified{background:#20483c;color:#9fe5cb}.badge.needs-review,.badge.captured-unmapped{background:#5c451d;color:#ffdc98}

.badge.signal-warning,.signal-warning{color:#ffc177}.badge.signal-warning{background:#60401d}.badge.signal-critical,.signal-critical{color:#ff9198}.badge.signal-critical{background:#632d38}.signal-normal{color:#8edcc7}.badge.collecting,.badge.queued{background:#224759;color:#9dd9f5}.badge.collection-stalled,.badge.collection-delayed{background:#60401d;color:#ffc177}

.client-search{max-width:480px;margin:0 0 14px}.addon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:12px 0}.addon-grid>label>label{font-size:11px}.security-proof{border-top:1px solid #304351;padding-top:16px;margin-top:18px}.mfa-setup{display:grid;grid-template-columns:210px 1fr;gap:20px;align-items:center}.mfa-qr{background:white;border-radius:8px}.mfa-qr svg{display:block;width:100%;height:auto}.mfa-secret{display:block;overflow-wrap:anywhere;margin-bottom:16px}#mfaStep button{margin:10px 0}#recoveryCodes{user-select:all;max-height:300px;overflow:auto}@media(max-width:600px){.mfa-setup{grid-template-columns:1fr}.mfa-qr{max-width:210px}.client-search{max-width:100%}}

/* v0.20: independent dashboard cards */
.overview-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(320px,1fr);gap:18px;align-items:start}.overview-side{display:grid;gap:18px}.health-scroll{max-height:480px;overflow:auto}.health-scroll thead{position:sticky;top:0;z-index:1;background:#1c303d}.status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0}.status-tile{text-align:left;padding:12px;display:grid;gap:5px}.status-tile strong{font-size:25px}.status-tile.online strong{color:#79d3bc}.status-tile.los strong,.status-tile.signal-critical strong{color:#f68b93}.status-tile.power-off strong,.status-tile.config-fail strong,.status-tile.signal-warning strong{color:#f3c36d}.badge.config-fail{background:#59421e;color:#ffd78d}.optical-stale{color:#f3c36d;font-size:10px}.export-history{margin-top:14px}@media(max-width:1000px){.overview-layout{grid-template-columns:1fr}.status-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.overview-layout > *, .overview-side > * {min-width:0}
.health-scroll {max-width:100%}
.status-tile {min-width:0;overflow-wrap:anywhere}
#platformBackupResults .mono {overflow-wrap:anywhere;white-space:normal}
@media(max-width:1000px){.overview-layout{grid-template-columns:minmax(0,1fr)}}
.overview-layout{margin-bottom:20px}.overview-layout .panel{margin-bottom:0}
.overview-side div.status-tile{background:#20333f;border:1px solid var(--line);border-radius:7px;font-size:13px;line-height:1.45}
.badge.completed{background:#1d493d;color:#a5ead3}
/* Tenant-wide PON outage surface: remains outside routed page content. */
.pon-outage-counter{position:fixed;right:22px;bottom:18px;z-index:45;color:#ffabb4;background:#392a33;border-color:#78525e;font-size:12px;box-shadow:0 8px 22px #0005}
.pon-outage-popup{position:fixed;right:22px;bottom:67px;width:450px;max-width:calc(100vw - 28px);max-height:calc(100dvh - 90px);overflow:auto;z-index:46;background:#152430;color:#e6eef3;border:1px solid #70515d;border-radius:12px;box-shadow:0 14px 45px #0009}
.pon-outage-accent{height:4px;background:#e56d7a}.pon-outage-body{padding:18px 20px}.pon-outage-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.pon-outage-heading button{padding:3px 9px;font-size:22px;min-width:32px}.pon-outage-red{color:#ff9aa3}.pon-outage-popup h2{margin:12px 0 3px;font-size:23px}.pon-outage-popup h2 span{color:#9ab0c0}.pon-outage-muted{color:#9ab0c0;margin:0 0 16px;font-size:13px}.pon-outage-count{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:14px}.pon-outage-count strong{font-size:27px;color:#ff9aa3}.pon-outage-times{display:flex;justify-content:space-between;gap:12px;background:#101e28;padding:10px 12px;border-radius:6px}.pon-outage-times small{display:block;color:#9ab0c0;font-size:11px}.pon-outage-times span{font-size:12px;font-variant-numeric:tabular-nums}.pon-outage-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}.pon-outage-foot{font-size:11px;color:#9ab0c0;margin:12px 0 0}
@media(max-width:600px){.pon-outage-popup{right:14px;bottom:66px;width:calc(100vw - 28px)}.pon-outage-counter{right:14px;bottom:14px}.pon-outage-body{padding:15px}.pon-outage-actions button{flex:1;min-height:42px}}
.badge.partial-collect{background:#62451d;color:#ffdb93}.setup-editor.connection-only{grid-template-columns:minmax(0,1fr)}.setup-editor.connection-only>p{grid-column:1/-1;margin:0}dialog:has(.setup-editor.connection-only){max-width:740px}
.compact-setup .actions{flex-wrap:wrap;min-width:0}.compact-setup>div{min-width:0}
.setup-credentials .field-hint{overflow-wrap:anywhere}

.status-tile{justify-items:center;text-align:center}.status-tile strong{display:block;min-width:0;width:100%;text-align:center;font-variant-numeric:tabular-nums}.olt-row-controls{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;max-width:330px}.olt-control{font-size:11px;padding:4px 7px;min-height:28px;display:inline-flex;gap:5px;align-items:center}.olt-control.monitor-on{color:#9be5d1;border-color:#3b8470}.olt-control.monitor-on>span{animation:monitor-pulse 2.5s ease-in-out infinite}.olt-control.collect-running>span{display:inline-block;animation:collect-spin 1.2s linear infinite}.danger-control{color:#ffb5bc}.interval-help{grid-column:1/-1;margin:0 0 12px}@keyframes monitor-pulse{50%{opacity:.45}}@keyframes collect-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.olt-control>span{animation:none!important}}

#submit.danger-submit{background:#a93546;color:#fff;border-color:#ce5869}
#deviceTable td{padding-top:10px;padding-bottom:10px}#deviceTable td small{margin-top:2px}.olt-row-controls{gap:4px;margin-top:7px}.olt-control{font-size:10px;padding:3px 5px;gap:4px;min-height:28px}#deviceTable .actions a{white-space:nowrap}
/* Unified OLT workspace */
.olt-workspace{min-width:0}.workspace-header{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:-6px 0 10px}.workspace-header .back-button{margin:0;padding:3px 0;font-size:12px}.workspace-header p{font-size:12px;color:var(--muted);margin:5px 0;overflow-wrap:anywhere}.workspace-health{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.workspace-health small{font-size:11px;color:var(--muted)}.workspace-tabs{margin:0 0 16px;gap:2px}.workspace-tabs button{font-size:13px;padding:10px 14px;white-space:nowrap}.workspace-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}.workspace-metric{min-width:0;display:flex;align-items:center;justify-content:space-between;padding:13px 16px;background:var(--surface);border:1px solid var(--line);border-radius:9px}.workspace-metric span{font-size:12px;color:var(--muted)}.workspace-metric strong{font-size:26px;font-variant-numeric:tabular-nums}.workspace-metric.online strong{color:#79d3bc}.workspace-metric.los strong{color:#f68b93}.workspace-metric.power-off strong{color:#f3c36d}.workspace-overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.olt-workspace .panel{padding:16px;margin-bottom:14px}.olt-workspace h2{font-size:16px;margin:0 0 10px}.olt-workspace .panel-heading h2{margin:0}.workspace-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 18px;margin:14px 0 0}.workspace-facts div{min-width:0}.workspace-facts dt{font-size:11px;color:var(--muted);margin-bottom:3px}.workspace-facts dd{font-size:12px;font-weight:600;margin:0;overflow-wrap:anywhere}.workspace-tools{flex-wrap:wrap;margin-top:16px;gap:6px}.workspace-tools button,.workspace-tools a{font-size:11px}.workspace-result{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 15px;border:1px solid var(--line);border-radius:9px;margin:0 0 14px;background:var(--surface)}.workspace-result small{display:block;margin-top:5px;color:var(--muted)}.workspace-result p{flex-basis:100%;margin:0;overflow-wrap:anywhere}.workspace-result strong{font-size:12px}.workspace-evidence{border:1px solid var(--line);border-radius:9px;margin-bottom:14px;padding:12px 15px;background:var(--surface)}.workspace-evidence>summary{cursor:pointer;color:var(--muted);font-size:12px}.workspace-alert-strip{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--line);border-radius:9px;padding:11px 14px;margin-bottom:14px;background:var(--surface)}.workspace-alert-strip strong{font-size:12px}.workspace-alert-strip small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.workspace-alert-strip .actions{flex-wrap:wrap;gap:6px}.workspace-alert-strip button{font-size:11px;padding:7px 10px}.workspace-settings{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:16px}.workspace-settings fieldset{border:0;padding:0;margin:0;min-width:0}.workspace-settings fieldset:disabled{opacity:.7}.workspace-settings .setup-editor{gap:20px;grid-template-columns:repeat(2,minmax(0,1fr))}.workspace-settings .setup-editor.connection-only{grid-template-columns:minmax(0,1fr);max-width:740px}.workspace-settings .setup-editor>section+section{padding-left:20px}.workspace-settings h3{font-size:14px;margin:0 0 9px}.workspace-settings .setup-editor label{font-size:11px;margin:5px 0}.workspace-settings .setup-editor input,.workspace-settings .setup-editor select{font-size:12px;min-height:32px;padding:6px 8px}.workspace-settings .setup-editor input[type=checkbox]{min-height:0}.workspace-settings .form-grid{gap:2px 12px}.workspace-settings .field-hint{font-size:11px;line-height:1.5}.workspace-settings details.form-section{margin-top:12px;padding-top:10px}.workspace-savebar{position:sticky;bottom:12px;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line);background:var(--surface);padding:11px 0 0;margin-top:12px}.workspace-savebar small{font-size:11px;color:var(--muted)}.workspace-savebar .actions{gap:6px;flex-wrap:wrap}.workspace-savebar button{font-size:12px;padding:8px 12px}.workspace-operation-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}.workspace-operation-tabs button{font-size:12px;padding:6px 11px;background:transparent;color:var(--muted)}.workspace-operation-tabs button.active{background:var(--accent-bg);color:var(--accent);border-color:#396255}.olt-workspace .operation-log{height:330px;min-height:210px;max-height:55vh}.olt-workspace .port-discovery-grid .setup-step{padding:10px;min-height:0}.olt-workspace .port-discovery-grid strong{font-size:20px;margin-top:5px}.olt-workspace table td{padding:10px 12px}.olt-workspace table th{padding:9px 12px;font-size:10px}.olt-workspace .section-heading{margin:14px 0 10px}.olt-workspace .section-heading p{font-size:11px}
@media(max-width:900px){.workspace-overview-grid{grid-template-columns:1fr}.workspace-settings .setup-editor{grid-template-columns:minmax(0,1fr)}.workspace-settings .setup-editor>section+section{border-left:0;border-top:1px solid var(--line);padding:16px 0 0}.workspace-alert-strip{flex-wrap:wrap}}@media(max-width:600px){.workspace-header{align-items:flex-start;flex-direction:column;gap:5px}.workspace-health{justify-content:flex-start}.workspace-tabs{overflow-x:auto;max-width:100%;flex-wrap:nowrap}.workspace-tabs button{padding:9px 11px;font-size:12px}.workspace-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.workspace-metric{padding:11px}.workspace-metric strong{font-size:23px}.workspace-settings{padding:12px}.workspace-savebar{bottom:6px;flex-wrap:wrap}.workspace-facts{gap:12px}.workspace-header p{max-width:100%}}

/* v0.22.0 inventory actions and dashboard drill-down */
#deviceTable .olt-row-controls{justify-content:flex-end;flex-wrap:nowrap;margin:0;max-width:none}
#deviceTable .olt-control{width:34px;height:34px;min-width:34px;padding:0;justify-content:center;font-size:17px}
#deviceTable th:last-child,#deviceTable td:last-child{text-align:right;white-space:nowrap;width:1%}
#deviceTable td:first-child a{color:inherit;text-decoration:none}#deviceTable td:first-child a:hover{text-decoration:underline;color:var(--accent)}
button.status-tile{width:100%;background:#20333f;border:1px solid var(--line);border-radius:7px;font-size:13px;line-height:1.45;color:inherit}
button.status-tile:hover{border-color:var(--accent);background:#29414d}button.status-tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.olt-control svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Independent OLT access status; popup never replaces the current view. */
.ping-status{font-size:10px;color:#9bb0bf;display:inline-block;margin-top:4px}.ping-status.reachable{color:#9be5d1}.ping-status.access-lost{color:#ff9ca7}.ping-status.packet-loss,.ping-status.recovering,.ping-status.checking{color:#f3c36d}
.connectivity-popup{position:fixed;z-index:90;right:22px;top:90px;width:360px;max-width:calc(100vw - 24px);background:#172733;border:1px solid #b76800;border-left:5px solid #f3c36d;border-radius:12px;padding:18px;box-shadow:0 14px 50px #0008}.connectivity-popup.critical{border-color:#b45360;border-left-color:#f68b93}.connectivity-popup .panel-heading{gap:12px}.connectivity-popup h2{margin:12px 0 4px}.connectivity-popup p{margin:0 0 14px;color:#9bb0bf}.connectivity-facts{display:grid;gap:8px;font-size:11px;margin:12px 0 16px}.connectivity-facts span{display:flex;justify-content:space-between;gap:12px}.connectivity-facts b{text-align:right}.status-tile.olt-access-lost strong{color:#f68b93}.status-tile.olt-packet-loss strong{color:#f3c36d}
@media(max-width:600px){.connectivity-popup{right:12px;top:12px;padding:14px}}

.job-actions{display:flex;justify-content:flex-end;align-items:center;white-space:nowrap}
.aside-bottom small a{font-size:inherit;color:inherit;text-decoration:none}
.aside-bottom small a:hover{text-decoration:underline}
.compact-settings .actions{flex-wrap:wrap}
.compact-settings .setting-check{max-width:100%}