:root{
  --winbox-bg:#e6e8e9;
  --winbox-panel:#f4f6f7;
  --winbox-panel-soft:#eef1f3;
  --winbox-header-blue:#e9ecef;
  --winbox-border:#c9cdd0;
  --winbox-border-dark:#aeb6bc;
  --winbox-text:#111820;
  --winbox-muted:#4f5b66;
  --winbox-accent:#1d7ff0;
  --winbox-font:"Inter", "Segoe UI", Tahoma, Arial, sans-serif;
  --app-font-family:var(--winbox-font);
  --mz-bg:var(--winbox-bg);
  --mz-panel:var(--winbox-panel);
  --mz-panel-2:var(--winbox-panel-soft);
  --mz-border:var(--winbox-border);
  --mz-text:var(--winbox-text);
  --mz-muted:var(--winbox-muted);
  --mz-blue:var(--winbox-accent);
  --mz-blue-soft:var(--winbox-header-blue);
  --mz-green:#19a65a;
  --mz-red:#d93a3a;
  --mz-yellow:#f2a900;
  --bg:var(--mz-bg);
  --panel:var(--mz-panel);
  --line:var(--mz-border);
  --ink:var(--mz-text);
  --muted:var(--mz-muted);
  --blue:var(--mz-blue);
  --nav:#101827;
  --nav2:#182235;
  --green:var(--mz-green);
  --amber:var(--mz-yellow);
  --red:var(--mz-red);
  --mz-font-ui:"Inter", "Segoe UI", Tahoma, Arial, sans-serif;
  --font-ui:var(--mz-font-ui);
  --font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", "Courier New", monospace;
}
*{box-sizing:border-box}
button,input,select,textarea,table{font-family:var(--app-font-family, var(--font-ui));font-size:11px;line-height:1.2}
.page-title{font-size:17px;line-height:1.1;font-weight:800;color:var(--winbox-text);letter-spacing:0}
.section-title{font-size:12px;font-weight:800;line-height:1.15;text-transform:uppercase;letter-spacing:.03em;color:#173a63}
.card-title{font-size:12px;font-weight:800;line-height:1.15;color:#173a63}
.text-label{display:block;font-size:10px;text-transform:uppercase;font-weight:800;letter-spacing:.04em;color:var(--winbox-muted)}
.text-value{display:block;font-size:12px;line-height:1.25;color:#0f172a}
.text-muted{color:var(--muted);font-size:11px;line-height:1.3}
.text-code{font-family:var(--font-mono)}
html{min-width:320px}
body{margin:0;background:var(--winbox-bg);color:var(--winbox-text);font-family:var(--app-font-family, var(--winbox-font));font-size:11px;line-height:1.25;min-height:100vh}
.login-body{display:grid;place-items:center;padding:18px}
.topbar{
  position:relative;
  z-index:60;
  background:var(--winbox-panel);
  color:var(--winbox-text);
  padding:12px 16px;
  border-bottom:1px solid var(--winbox-border);
  box-shadow:0 6px 16px rgba(15,23,42,.05);
  backdrop-filter:blur(8px);
}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;gap:14px;max-width:1440px;margin:0 auto}
.brand{font-size:16px;font-weight:800;letter-spacing:0}
.brand-link{display:inline-flex;align-items:center;gap:10px;color:#102033;text-decoration:none}
.brand-logo{display:block;max-height:38px;width:auto;max-width:170px;flex:0 0 auto;object-fit:contain}
.topbar-meta{display:flex;align-items:flex-end;flex-direction:column;gap:6px}
.license-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid #cfe0f3;
  background:#fff;
  color:#0f172a;
  font-size:10px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
.topbar-subtitle{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#64748b}
.steady-navbar{
  position:relative;
  z-index:55;
  isolation:isolate;
  display:flex;
  gap:4px;
  align-items:center;
  flex-wrap:nowrap;
  justify-content:flex-start;
  max-width:1440px;
  width:calc(100vw - 24px);
  margin:8px auto 8px;
  padding:6px;
  border:0;
  border-radius:10px;
  background:#f8fbff;
  box-shadow:0 10px 26px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.65);
  overflow:visible;
}
.nav-button{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:31px;
  padding:6px 10px;
  border:1px solid var(--winbox-border);
  border-radius:4px;
  background:var(--winbox-panel);
  color:var(--winbox-text);
  text-decoration:none;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  white-space:nowrap;
  line-height:1.1;
  flex:0 0 auto;
  width:auto;
  max-width:max-content;
  clip-path:polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.nav-button.nav-button-topology{
  padding:6px 9px;
  font-size:10px;
  letter-spacing:.01em;
}
.nav-button:hover{
  background:var(--winbox-panel-soft);
  border-color:var(--winbox-border-dark);
}
.nav-button.active{
  background:var(--winbox-header-blue);
  border-color:var(--winbox-border-dark);
  color:var(--winbox-text);
  box-shadow:none;
}
.nav-button.active::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:-4px;
  height:5px;
  border-radius:999px;
  background:linear-gradient(180deg,#3b82f6,#1d4ed8);
  transform:skewX(-18deg);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset;
}
.nav-button.active,
.nav-button:hover{
  clip-path:polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.nav-button-dashboard.active,
.nav-button-clients.active,
.nav-button-map.active,
.nav-button-billing.active,
.nav-button-collections.active,
.nav-button-jobs.active,
.nav-button-activation.active,
.nav-button-network.active,
.nav-button-topology.active,
.nav-button-osp.active,
.nav-button-reports.active,
.nav-button-users.active,
.nav-button-settings.active{
  background:linear-gradient(180deg,#2f89ff,#1e64d6);
  color:#fff;
  border-color:#1e64d6;
}
.top-account-btn{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  white-space:nowrap;
  cursor:pointer;
  min-height:31px;
  height:31px;
  padding:6px 10px;
  flex:0 0 auto;
}
.nav-account-caret{
  font-size:10px;
  line-height:1;
}
.account-dropdown-portal{
  display:none;
  position:fixed;
  top:0;
  left:0;
  z-index:999999;
  min-width:180px;
  padding:8px;
  border:1px solid var(--winbox-border);
  border-radius:8px;
  background:var(--winbox-panel);
  box-shadow:0 8px 18px rgba(15,23,42,.10);
  overflow:visible;
}
.account-dropdown-portal.open{
  display:block;
}
.account-dropdown-portal a,
.account-dropdown-portal button{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:flex-start;
  min-height:31px;
  padding:5px 8px;
  border:1px solid transparent;
  border-radius:4px;
  background:transparent;
  color:var(--winbox-text);
  text-decoration:none;
  font-size:11px;
  font-weight:700;
  text-transform:none;
  line-height:1.1;
  cursor:pointer;
}
.account-dropdown-portal a:hover,
.account-dropdown-portal button:hover{
  background:var(--winbox-header-blue);
  border-color:var(--winbox-border-dark);
}
.nav-dropdown-form{
  margin:0;
}
.nav-dropdown-danger{
  color:#b91c1c;
  text-transform:none;
}
.nav-dropdown-danger:hover{
  background:#fef2f2;
  border-color:#fecaca;
  color:#991b1b;
}
.navbar-logout-form{display:none}
.navbar-logout-form .navbar-logout-btn{min-height:32px;padding:7px 10px;font-size:11px;line-height:1.1}
.module-link-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
.module-link-card{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:12px 13px;
  border:1px solid #d7e5f3;
  border-radius:8px;
  background:#fff;
  box-shadow:0 1px 1px rgba(15,23,42,.04);
  color:#173a63;
  text-decoration:none;
}
.module-link-card strong{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.module-link-card span{
  font-size:12px;
  color:#5f79a0;
}
.billing-cockpit-page{
  font-size:12px;
  padding-top:4px;
  max-width:1440px;
  width:calc(100vw - 24px);
}
.billing-compact-sections{
  margin-top:4px;
}
.billing-overview-hero{
  padding-bottom:12px;
}
.billing-cockpit-page .billing-cockpit-hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  padding:8px 0 12px;
  margin-bottom:10px;
  border-bottom:2px solid rgba(5,157,245,.58);
}
.billing-cockpit-page .billing-cockpit-hero h1{
  margin:0;
  font-size:20px;
  line-height:1.1;
  color:#0f172a;
}
.billing-cockpit-page .billing-cockpit-hero .hero-subtitle{
  margin-top:5px;
  font-size:11px;
  max-width:760px;
}
.billing-cockpit-hero-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.billing-mini-btn{
  min-height:30px;
  padding:6px 10px;
  font-size:10px;
}
.billing-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-bottom:10px;
}
.billing-overview-kpis{
  grid-template-columns:repeat(6,minmax(0,1fr));
}
.billing-kpi-card{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px 11px;
  border:1px solid rgba(5,157,245,.16);
  border-top:2px solid rgba(5,157,245,.72);
  border-radius:8px;
  background:#fff;
  box-shadow:0 1px 1px rgba(15,23,42,.04);
}
.billing-kpi-card span{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#64748b;
}
.billing-kpi-label{
  min-height:24px;
}
.billing-kpi-card strong{
  font-size:16px;
  line-height:1.1;
  color:#0f172a;
}
.billing-kpi-value{
  display:block;
  min-height:22px;
}
.billing-kpi-card small{
  font-size:11px;
  line-height:1.25;
  color:#64748b;
}
.billing-workspace{
  display:grid;
  grid-template-columns:minmax(560px,1fr) minmax(500px,620px);
  align-items:start;
  gap:8px;
  margin-bottom:10px;
}
.billing-ledger-panel{
  flex:1 1 auto;
  min-width:0;
}
.billing-sidebar-panel,
.billing-sidebar-panel-sticky{
  align-self:start;
}
.billing-sidebar-panel{
  width:auto;
  min-width:0;
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:0;
  overflow:visible;
  padding:0;
}
.billing-sidebar-sticky{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.billing-workspace-inline .billing-ledger-panel{
  flex:1 1 auto;
}
.billing-ledger-toolbar{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px 10px 7px;
}
.billing-ledger-search{
  width:100%;
  min-height:30px;
  height:30px;
  padding:5px 8px;
  border:1px solid #cfe0ef;
  border-radius:8px;
  background:#fff;
  font-size:12px;
}
.billing-ledger-filters{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.billing-ledger-filter{
  min-height:28px;
  padding:5px 10px;
  border:1px solid #cfe0ef;
  border-radius:999px;
  background:#f8fbff;
  color:#17324d;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.billing-ledger-filter.is-active{
  background:#dff0ff;
  border-color:#67a9e5;
  color:#17324d;
}
.billing-ledger-table-shell{
  overflow:auto;
  border-top:1px solid #e3edf7;
}
.billing-ledger-table{
  width:100%;
  border-collapse:collapse;
  min-width:660px;
}
.billing-ledger-table th,
.billing-ledger-table td{
  padding:6px 7px;
  border-bottom:1px solid #e6eef7;
  font-size:11px;
  text-align:left;
  vertical-align:middle;
}
.billing-ledger-index{
  width:42px;
  text-align:center !important;
}
.billing-ledger-index strong{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:999px;
  background:#dff0ff;
  border:1px solid #91c2ef;
  color:#17324d;
  font-size:10px;
  font-weight:900;
}
.billing-ledger-table th{
  position:sticky;
  top:0;
  z-index:1;
  background:#f8fbff;
  color:#45607b;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.billing-ledger-table td .badge{
  font-size:9px;
  padding:2px 5px;
  min-height:18px;
}
.billing-ledger-subtext{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:3px;
  color:#64748b;
  font-size:10px;
  line-height:1.2;
}
.billing-ledger-subtext span{
  white-space:nowrap;
}
.billing-ledger-table tr:hover td{
  background:#f9fcff;
}
.billing-ledger-select{
  min-height:26px;
  padding:4px 7px;
  font-size:10px;
}
.billing-sidebar-sticky{
  position:sticky;
  top:6px;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px 8px 10px;
  max-height:none;
  overflow:visible;
}
.billing-sidebar-sticky::-webkit-scrollbar{width:8px}
.billing-sidebar-sticky::-webkit-scrollbar-thumb{background:#c6d6e7;border-radius:999px}
.billing-selected-panel .billing-panel-title,
.billing-action-center .billing-panel-title,
.billing-recent-payments .billing-panel-title{
  padding:4px 8px;
}
.billing-selected-panel .billing-panel-title h2,
.billing-action-center .billing-panel-title h2,
.billing-recent-payments .billing-panel-title h2{
  font-size:12px;
}
.billing-selected-panel .billing-panel-title p,
.billing-action-center .billing-panel-title p,
.billing-recent-payments .billing-panel-title p{
  font-size:11px;
}
.billing-action-center-panel-inline{
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
.billing-summary-grid{
  grid-template-columns:repeat(auto-fit,minmax(125px,1fr));
  gap:8px;
  align-items:stretch;
  grid-auto-rows:auto;
}
.billing-summary-grid > div{
  min-height:72px;
  padding:10px 10px 9px;
  min-width:0;
  overflow:visible;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.billing-due-date-card{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:4px 10px;
  align-items:start;
  min-height:auto;
  min-width:0;
  padding:10px;
  border:1px solid #d8e5f4;
  border-radius:8px;
  background:#f9fcff;
}
.billing-due-date-card span,
.billing-due-date-card small,
.billing-due-date-card strong{
  display:block;
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.billing-due-date-card span{
  grid-column:1 / -1;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#64748b;
}
.billing-due-date-card strong{
  grid-column:1 / -1;
  font-size:13px;
  color:#0f172a;
  line-height:1.15;
}
.billing-due-date-card small{
  grid-column:1 / 2;
  color:#5f6f86;
  font-size:10px;
  line-height:1.15;
}
.billing-due-date-actions{
  grid-column:2 / 3;
  grid-row:3 / 5;
  align-self:end;
  margin-top:0;
  display:flex;
  justify-content:flex-end;
  width:auto;
}
.billing-due-date-actions .btn{
  min-height:24px;
  height:24px;
  padding:3px 7px;
  font-size:10px;
}
.billing-summary-grid > div span,
.billing-summary-grid > div strong{
  overflow-wrap:anywhere;
  word-break:break-word;
}
.billing-selected-panel{
  overflow:visible;
  padding-bottom:12px;
}
.billing-due-date-editor{
  margin:6px 0 0;
}
.billing-due-date-editor-card{
  padding:8px;
  border:1px solid #d8e5f4;
  border-radius:8px;
  background:#f8fbff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.billing-due-date-editor-head{
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:flex-start;
  margin-bottom:6px;
}
.billing-due-date-editor-head h3{
  margin:0;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:#173a63;
}
.billing-due-date-editor-head p{
  margin:2px 0 0;
  font-size:10px;
  color:#5f6f86;
}
.billing-due-date-editor-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:6px;
}
.billing-due-date-editor-grid label{
  display:flex;
  flex-direction:column;
  gap:3px;
  font-size:10px;
  font-weight:800;
  color:#5f6f86;
  text-transform:uppercase;
}
.billing-due-date-editor-grid input,
.billing-due-date-editor-grid select{
  min-height:28px;
  height:28px;
  padding:4px 7px;
  font-size:11px;
}
.billing-due-date-editor-actions{
  display:flex;
  justify-content:flex-end;
  gap:6px;
  margin-top:6px;
}
.billing-due-date-editor-actions .btn{
  min-height:28px;
  height:28px;
  padding:4px 8px;
  font-size:10px;
}
.billing-recent-payments{
  overflow:visible;
}
.billing-recent-payments-below{
  margin-top:6px;
}
.billing-action-warning{
  margin:4px 8px 0;
}
.billing-action-center{
  padding-bottom:2px;
}
.billing-action-tabs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(86px,1fr));
  gap:4px;
  margin:0 6px 4px;
}
.billing-action-tab{
  min-height:28px;
  padding:3px 8px;
  border:1px solid #9cc7ea;
  border-radius:8px;
  background:linear-gradient(180deg,#fbfdff 0%,#f1f8ff 100%);
  color:#24405e;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.03em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
  width:100%;
}
.billing-action-tab.is-active{
  background:linear-gradient(180deg,#ffffff 0%,#dff0ff 100%);
  border-color:#63a8e6;
  box-shadow:0 0 0 1px rgba(99,168,230,.2) inset,0 10px 18px rgba(28,87,159,.12);
}
.billing-action-tab.is-danger.is-active{
  background:linear-gradient(180deg,#fff6f6 0%,#ffe5e5 100%);
  border-color:#d66;
  color:#7a1f1f;
}
.billing-action-tabpanes{
  border-top:1px solid rgba(153,198,230,.45);
  margin:0 6px;
  padding-top:5px;
}
.billing-action-pane{
  display:none;
  padding-bottom:2px;
}
.billing-action-pane.is-active{
  display:block;
}
.billing-action-pane .stack-form,
.billing-action-pane .profile-action-block{
  margin:0;
}
.billing-action-pane .profile-field-grid-three-up{grid-template-columns:repeat(2,minmax(0,1fr))}
.billing-action-pane .billing-profile-grid,
.billing-action-pane .billing-payment-grid{
  grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
}
.billing-action-pane .billing-profile-grid > label,
.billing-action-pane .billing-payment-grid > label{
  min-width:0;
}
.billing-action-pane .billing-field-notes{
  grid-column:1 / -1;
}
.billing-action-pane .profile-payment-actions{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(98px,1fr));
  gap:5px;
}
.billing-action-pane .profile-payment-actions .btn{
  width:100%;
}
.billing-action-pane .subsection-card-title{
  font-size:12px;
  margin-bottom:2px;
}
.billing-action-pane .section-note,
.billing-action-pane .notice{
  font-size:11px;
  margin-bottom:3px;
}
.billing-action-pane label{
  font-size:10px;
}
.billing-action-pane input,
.billing-action-pane select,
.billing-action-pane textarea{
  min-height:28px;
  height:28px;
  padding:4px 7px;
  font-size:11px;
}
.billing-action-pane textarea{
  min-height:38px;
  height:38px;
}
.billing-action-pane .profile-field-grid{
  gap:3px;
}
.billing-action-pane .profile-field-grid label{
  font-size:9px;
}
.billing-action-pane .toolbar-row{
  margin-top:4px;
}
.billing-action-pane .btn{
  min-height:28px;
  height:28px;
  padding:4px 8px;
  font-size:11px;
}
.billing-action-pane .notice{
  border-radius:8px;
  border:1px solid #d9e8f7;
  background:#f8fbff;
}
.billing-action-pane .panel{
  border-radius:10px;
}
.billing-action-center-shell .billing-action-pane[data-billing-pane="high-risk"] .panel-title{margin-bottom:6px}
.billing-action-center-shell .billing-action-pane[data-billing-pane="high-risk"] .panel-title h2{font-size:11px}
.billing-action-center-shell .billing-action-pane[data-billing-pane="high-risk"] .panel-title span{font-size:10px}
.billing-sidebar-panel .billing-panel{
  margin:0;
}
.billing-sidebar-panel .billing-action-center-shell{
  margin:0;
}
.billing-sidebar-panel .billing-selected-panel,
.billing-sidebar-panel .billing-recent-payments{
  margin:0;
}
.billing-dashboard-grid{
  align-items:start;
}
.billing-panel{
  background:#fff;
  border:1px solid #d7e5f3;
  border-top:2px solid rgba(5,157,245,.58);
  border-radius:10px;
  box-shadow:0 1px 2px rgba(19,57,96,.06);
  overflow:hidden;
}
.billing-panel-primary{
  border-top-color:rgba(5,157,245,.82);
}
.billing-panel-title{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
  border-bottom:1px solid #e3edf7;
  background:#f9fcff;
}
.billing-panel-title h2{
  margin:0;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:#173a63;
}
.billing-panel-title p{
  margin:4px 0 0;
  font-size:12px;
  line-height:1.35;
  color:#64748b;
}
.billing-panel-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-end;
}
.billing-snapshot-list{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  padding:10px 12px 0;
}
.billing-snapshot-list div{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:9px 10px;
  border:1px solid #e3edf7;
  border-radius:8px;
  background:#f9fcff;
}
.billing-snapshot-list span{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#64748b;
}
.billing-snapshot-list strong{
  font-size:13px;
  color:#0f172a;
}
.billing-control-list{
  display:grid;
  gap:8px;
  padding:10px 12px 12px;
}
.billing-control-row{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:9px 10px;
  border:1px solid #e3edf7;
  border-radius:8px;
  background:#fff;
  color:#173a63;
  text-decoration:none;
}
.billing-control-row strong{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.billing-control-row span{
  font-size:11px;
  color:#64748b;
}
.billing-control-disabled{
  border-style:dashed;
  background:#f8fbff;
  pointer-events:none;
}
.billing-client-list{
  display:grid;
  gap:5px;
  padding:7px 8px 7px;
}
.billing-client-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:5px;
  align-items:start;
  padding:6px 8px;
  border:1px solid #e3edf7;
  border-radius:8px;
  background:#fff;
}
.billing-payment-history-row{
  align-items:stretch;
}
.billing-client-row > div{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.billing-client-row strong{
  display:block;
  font-size:11px;
  color:#173a63;
  word-break:break-word;
}
.billing-client-row span{
  display:block;
  font-size:10px;
  color:#64748b;
  word-break:break-word;
}
.billing-client-row div:nth-child(2) strong,
.billing-client-row div:nth-child(3) strong{
  font-size:11px;
  color:#0f172a;
}
.billing-client-action{
  justify-self:end;
  align-self:center;
}
.billing-payment-history-action{
  justify-self:end;
  align-self:end;
}
.billing-client-action .btn{
  min-height:28px;
  height:28px;
  padding:4px 7px;
  font-size:10px;
  white-space:nowrap;
}
.billing-client-empty{
  padding:10px 12px 12px;
  color:#64748b;
  font-size:12px;
}
.app-main{max-width:1440px;width:calc(100vw - 36px);margin:0 auto;padding:8px 0 14px}
.card{background:var(--winbox-panel);border:1px solid var(--winbox-border);border-radius:6px;padding:10px;box-shadow:none;margin-bottom:10px;overflow:hidden}
.card h2{margin:0 0 9px;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:#173a63;background:var(--winbox-panel-soft);padding:8px 10px;border-radius:4px;border:1px solid var(--winbox-border)}
.panel{background:var(--winbox-panel);border:1px solid var(--winbox-border);border-radius:6px;padding:10px;box-shadow:none;margin-bottom:10px;overflow:hidden}
.panel-title{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px;border-bottom:1px solid var(--winbox-border);padding-bottom:8px}
.panel-title h2{margin:0;font-size:12px;line-height:1.2;text-transform:uppercase;letter-spacing:.03em;color:#173a63;background:transparent;padding:0;border:0;border-radius:0}
.panel-title span{color:var(--winbox-muted);font-size:10px;font-weight:800;text-transform:uppercase;white-space:nowrap;line-height:1.2}
.panel-title.dark-title{background:var(--winbox-header-blue);border-bottom:0;border-radius:6px;padding:9px 10px;margin:-10px -10px 10px}
.panel-title.dark-title h2{color:var(--winbox-text)}
.panel-title.dark-title span{color:var(--winbox-text)}
.page-hero{display:grid;gap:10px}
.page-hero h1{margin:0;font-size:20px;color:#0f172a;line-height:1.15}
.hero-subtitle{margin:4px 0 0;color:#64748b;font-size:12px;line-height:1.35}
.eyebrow{margin:0 0 4px;color:#1e3a8a;text-transform:uppercase;font-size:10px;font-weight:800;letter-spacing:.08em}
.breadcrumbs{font-size:11px;color:#64748b;text-transform:uppercase;font-weight:800;letter-spacing:.04em}
.profile-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.profile-toolbar{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.profile-grid{display:grid;gap:10px}
.two-column-layout{grid-template-columns:repeat(2,minmax(0,1fr))}
.profile-column{display:grid;gap:10px;min-width:0}
.profile-card{margin-bottom:0}
.profile-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.profile-form .settings-list{margin-top:0}
.profile-form-actions{margin-top:10px}
.clients-list-page,.client-profile-page{background:#f4f7fb}
.clients-list-page .app-main,.client-profile-page .app-main{padding-top:8px}
.clients-list-page .panel,.client-profile-page .panel{background:#fff}
.clients-list-page .panel-title.dark-title,.client-profile-page .panel-title.dark-title{background:#162033}
.clients-list-page .client-actions,.client-profile-page .profile-form-actions{display:flex;flex-wrap:wrap}
.profile-actions-stack{display:grid;gap:10px}
.profile-action-block{border:1px solid #d8e5f4;border-radius:8px;padding:10px;background:#f9fcff}
.subsection-card-title{margin:0 0 8px;color:#173a63;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.client-profile-page{
  font-family:var(--app-font-family, var(--winbox-font));
  font-size:11px;
  line-height:1.2;
}
.client-profile-page,
.client-profile-page *{
  font-family:var(--font-ui);
}
.client-profile-page .topbar,
.client-profile-page .steady-navbar{
  font-family:inherit;
}
.client-profile-page .app-main{
  width:min(98vw,1560px);
  max-width:1560px;
  padding-bottom:12px;
}
.profile-shell-tight{
  padding:7px 8px;
  margin-bottom:8px;
}
.profile-header-shell{
  padding:8px 10px;
  font-family:inherit;
}
.profile-header-shell,
.profile-header-shell *{
  font-family:var(--font-ui);
}
.profile-shell-tight .profile-title-row{
  align-items:flex-end;
}
.profile-shell-tight .profile-toolbar{
  gap:6px;
}
.profile-shell-tight .hero-subtitle{
  font-size:10px;
}
.profile-header-shell .breadcrumbs{
  font-size:10px;
  line-height:1.1;
  color:#5f6f86;
  letter-spacing:.03em;
  font-weight:800;
}
.profile-header-shell .eyebrow{
  font-size:10px;
  margin:0 0 4px;
  font-weight:800;
}
.profile-header-shell h1{
  font-size:15px;
  line-height:1.08;
  margin:0;
  font-weight:800;
}
.profile-header-shell .hero-subtitle{
  margin-top:3px;
  font-size:10px;
  line-height:1.15;
  font-weight:700;
}
.profile-header-shell .profile-toolbar .btn,
.profile-header-shell .profile-toolbar .badge{
  min-height:30px;
  height:30px;
  padding:6px 10px;
  font-size:10px;
}
.profile-header-shell .profile-toolbar .badge{
  line-height:1.1;
  font-family:var(--font-ui);
}
.profile-grid-tight{
  gap:8px;
}
.profile-layout-2{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(360px,0.95fr);
  gap:10px;
  width:100%;
  align-items:start;
}
.profile-column{
  gap:8px;
  min-width:0;
}
.client-profile-page .profile-main{
  width:min(98vw,1560px);
  max-width:1560px;
}
.profile-header-shell,
.profile-card{
  width:100%;
  max-width:100%;
}
.profile-location-panel{
  width:100%;
  grid-column:1 / -1;
  margin-top:2px;
}
.client-profile-page .profile-grid{
  width:100%;
}
.client-profile-page .profile-column,
.client-profile-page .summary-grid,
.client-profile-page .profile-field-grid,
.client-profile-page .settings-list,
.client-profile-page .table-shell{
  width:100%;
}
.client-profile-page .panel{
  min-width:0;
}
.compact-card{
  padding:8px;
  margin-bottom:0;
}
.compact-card .panel-title{
  margin-bottom:8px;
  padding-bottom:5px;
}
.compact-card .panel-title.dark-title{
  margin:-8px -8px 8px;
  padding:8px 9px;
}
.compact-card .notice{
  margin-bottom:8px;
  padding:7px 8px;
  font-size:10px;
}
.profile-field-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px;
}
.profile-field-grid-three-up{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.profile-field-grid > div,
.profile-field-grid > label{
  background:#f8fbff;
  border:1px solid #e1ebf7;
  border-radius:7px;
  padding:8px;
}
.profile-field-grid span{
  font-size:10px;
  line-height:1.1;
}
.profile-field-grid strong{
  font-size:12px;
  line-height:1.2;
}
.profile-field-grid label{
  gap:2px;
  font-size:10px;
}
.profile-field-grid input,
.profile-field-grid textarea,
.profile-field-grid select{
  min-height:30px;
  padding:6px 8px;
  font-size:12px;
  margin-top:2px;
}
.profile-field-grid textarea{
  min-height:46px;
}
.profile-field-grid-location{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.profile-field-grid-location label:nth-child(1),
.profile-field-grid-location label:nth-child(6){
  grid-column:span 3;
}
.profile-field-grid-location > label{
  grid-column:span 1 !important;
}
.profile-field-grid-location > .coordinate-card{
  grid-column:1 / -1;
}
.coordinate-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px;
  border:1px solid #dbe7f5;
  border-radius:8px;
  background:#f8fbff;
  min-width:0;
}
.coordinate-card-top{
  display:flex;
  gap:8px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}
.coordinate-combined{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.coordinate-combined span{
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#56708f;
}
.coordinate-combined strong{
  font-size:12px;
  line-height:1.2;
  color:#173a63;
  word-break:break-word;
}
.coordinate-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.coordinate-edit-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
}
.coordinate-edit-grid label{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:10px;
}
.coordinate-edit-grid input{
  min-height:28px;
  padding:5px 8px;
  font-size:11px;
}
.coordinate-preview{
  padding:6px 8px;
  border:1px dashed #c9d9eb;
  border-radius:7px;
  background:#fff;
  font-size:10px;
  color:#4f6480;
  word-break:break-word;
}
.port-summary-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:8px;
}
.port-summary-grid > div{
  background:#f8fbff;
  border:1px solid #d6e3f2;
  border-radius:6px;
  padding:8px;
  min-height:58px;
}
.port-summary-grid span{
  display:block;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#64748b;
  margin-bottom:4px;
}
.port-summary-grid strong{
  display:block;
  font-size:11px;
  color:#0f172a;
}
.status-pill{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:700;
  line-height:1;
  text-transform:capitalize;
  border:1px solid transparent;
}
.status-vacant{background:#edf2f7;color:#475569;border-color:#cbd5e1}
.status-online{background:#e8f8ef;color:#166534;border-color:#b7e4c7}
.status-offline{background:#fff7ed;color:#c2410c;border-color:#fed7aa}
.status-expired{background:#fee2e2;color:#b91c1c;border-color:#fecaca}
.status-available{background:#e8f8ef;color:#166534;border-color:#b7e4c7}
.status-occupied{background:#fff1f2;color:#be123c;border-color:#fecdd3}
.status-reserved{background:#f5f3ff;color:#6d28d9;border-color:#ddd6fe}
.status-damaged{background:#fee2e2;color:#b91c1c;border-color:#fecaca}
.status-inactive{background:#edf2f7;color:#475569;border-color:#cbd5e1}
.port-status-form{display:inline-block}
.port-status-form .btn{width:auto;min-width:0}
.profile-field-grid-billing{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.profile-field-grid-billing.profile-field-grid-three-up label:nth-child(3){
  grid-column:span 3;
}
.profile-field-grid-payment{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.profile-mini-form{
  gap:8px;
}
.profile-summary-grid-tight{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px;
}
.profile-summary-grid-tight .card{
  padding:8px;
  margin:0;
  border-radius:7px;
}
.profile-summary-grid-tight span{
  font-size:10px;
}
.profile-summary-grid-tight strong{
  font-size:12px;
}
.profile-actions-stack .stack-form{
  gap:5px;
}
.profile-payment-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.profile-payment-actions .btn{
  flex:1 1 180px;
}
.profile-actions-stack .btn{
  min-height:30px;
  height:30px;
  padding:6px 10px;
  font-size:10px;
}
.profile-page-table th,
.profile-page-table td{
  padding:6px 8px;
  font-size:10px;
  line-height:1.08;
}
.profile-page-table th{
  font-size:10px;
}
.client-profile-page .table-shell{
  border-radius:7px;
}
.client-profile-page table{
  font-size:10px;
}
.client-profile-page th,
.client-profile-page td{
  padding:6px 8px;
}
.client-profile-page .btn{
  min-height:30px;
  height:30px;
  padding:6px 10px;
  font-size:10px;
}
.client-profile-page input,
.client-profile-page textarea,
.client-profile-page select{
  min-height:30px;
  padding:6px 8px;
  font-size:12px;
}
.client-profile-page [data-editable-field="true"]{
  transition:background-color .12s ease,border-color .12s ease,box-shadow .12s ease,color .12s ease;
}
.client-profile-page[data-profile-mode="view"] [data-editable-field="true"]{
  background:#f6f8fb;
  border-color:#d5e1ef;
  color:#334155;
}
.client-profile-page[data-profile-mode="edit"] [data-editable-field="true"]{
  background:#fff;
  border-color:#7fb6f0;
  box-shadow:0 0 0 2px rgba(59,130,246,.08);
  color:#0f172a;
  cursor:text;
}
.client-profile-page[data-profile-mode="edit"] [data-editable-field="true"]:focus{
  border-color:#3b82f6;
  box-shadow:0 0 0 2px rgba(59,130,246,.18);
  outline:none;
}
.client-profile-page[data-profile-mode="edit"] textarea[data-editable-field="true"]{
  background:#fffefc;
}
.client-profile-page[data-profile-mode="edit"] select[data-editable-field="true"]{
  background:#fff;
}
.client-profile-page .profile-toolbar .btn{
  min-height:30px;
  height:30px;
}
.client-profile-page .profile-toolbar .badge{
  height:30px;
}
.client-profile-page .profile-card,
.client-profile-page .compact-card,
.client-profile-page .profile-header-shell{
  font-family:var(--font-ui);
}
.client-profile-page .panel-title.dark-title h2,
.client-profile-page .subsection-card-title{
  font-family:var(--font-ui);
  font-size:11px;
  letter-spacing:.03em;
}
.client-profile-page .profile-field-grid span,
.client-profile-page .settings-list span,
.client-profile-page .summary-grid span{
  font-size:10px;
  line-height:1.1;
}
.client-profile-page .profile-field-grid strong,
.client-profile-page .settings-list strong,
.client-profile-page .summary-grid strong{
  font-size:12px;
  line-height:1.2;
  font-family:var(--font-ui);
}
.client-profile-page .profile-field-grid input,
.client-profile-page .profile-field-grid textarea,
.client-profile-page .profile-field-grid select{
  font-family:var(--font-ui);
  font-size:12px;
}
.client-profile-page .profile-field-grid-three-up > label,
.client-profile-page .profile-field-grid-three-up > div{
  min-width:0;
}
.client-profile-page .profile-toolbar .btn,
.client-profile-page .profile-actions-stack .btn,
.client-profile-page .profile-form-actions .btn{
  font-family:var(--font-ui);
  font-size:10px;
}
.client-profile-page .mono,
.client-profile-page .code-value,
.client-profile-page .account-number,
.client-profile-page .pppoe-username,
.client-profile-page .reference-number,
.client-profile-page .receipt-number,
.client-profile-page .settings-key,
.client-profile-page .copy-block,
.client-profile-page .command-box{
  font-family:var(--font-ui);
}
.profile-grid-tight{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.profile-field-grid-three{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.profile-location-panel{
  margin-top:2px;
}
.profile-location-note{
  margin:0 0 7px;
  color:#64748b;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.profile-location-fields{
  margin-bottom:8px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.profile-location-fields input[name="coordinates"]{
  font-family:var(--font-ui);
  letter-spacing:.02em;
}
.profile-map-wrap{
  margin-top:8px;
  border:1px solid #dbe8f5;
  border-radius:8px;
  overflow:hidden;
  background:#f7fbff;
}
.profile-map-empty{
  min-height:120px;
  display:grid;
  place-items:center;
  gap:6px;
  text-align:center;
  padding:18px;
  color:#52657e;
  font-size:10px;
  border-top:1px solid #dbe8f5;
  background:linear-gradient(180deg,#fbfdff,#f4f8fd);
}
.profile-map-empty strong{
  font-size:12px;
  color:#173a63;
}
.profile-map-stack{
  margin-top:6px;
}
.profile-map-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:8px 9px;
  border:1px solid #dbe8f5;
  border-radius:8px 8px 0 0;
  background:#f7fbff;
}
.profile-map-toolbar-label{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.profile-map-toolbar-label strong{
  font-size:11px;
  color:#173a63;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.profile-map-toolbar-label span{
  font-size:10px;
  color:#63768f;
  line-height:1.2;
}
.profile-map-toolbar-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.profile-map-actionbar{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin:0 0 8px;
}
.profile-map-stack #client-profile-map-empty{
  margin-top:0;
  z-index:2;
  position:relative;
  pointer-events:none;
}
.profile-map-preview{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border:1px solid #dbe8f5;
  border-radius:8px;
  background:linear-gradient(180deg,#f8fbff,#eef5fb);
  min-height:84px;
}
.profile-map-preview-pin{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e2efff;
  font-size:18px;
  flex:0 0 auto;
}
.profile-map-preview-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.profile-map-preview-copy strong{
  font-size:11px;
  color:#173a63;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.profile-map-preview-copy span{
  font-size:10px;
  color:#5f6f86;
  word-break:break-word;
}
@media (max-width:1050px){
  .client-profile-page .app-main,
  .client-profile-page .profile-main{
    width:min(98vw,1560px);
    max-width:1560px;
  }
  .profile-layout-2{
    grid-template-columns:1fr;
  }
  .profile-grid-tight{
    grid-template-columns:1fr;
  }
  .profile-summary-grid-tight{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .profile-location-panel{
    grid-column:1 / -1;
  }
}
@media (max-width:760px){
  .profile-shell-tight{
    padding:7px 8px;
  }
  .profile-header-shell{
    padding:8px;
  }
  .profile-title-row{
    flex-direction:column;
    align-items:flex-start;
  }
  .profile-header-shell h1{
    font-size:14px;
  }
  .profile-toolbar{
    width:100%;
    justify-content:flex-start;
  }
  .profile-header-shell .profile-toolbar .btn,
  .profile-header-shell .profile-toolbar .badge{
    width:auto;
  }
  .profile-toolbar .btn,
  .profile-toolbar .badge{
    width:auto;
  }
  .profile-grid-tight,
  .profile-layout-2,
  .profile-summary-grid-tight,
  .profile-field-grid,
  .profile-field-grid-three,
  .profile-field-grid-location,
  .profile-field-grid-billing,
  .profile-field-grid-payment{
    grid-template-columns:1fr;
  }
  .profile-field-grid-location label:nth-child(1),
  .profile-field-grid-location label:nth-child(6),
  .profile-field-grid-billing label:nth-child(3){
    grid-column:auto;
  }
  .profile-actions-stack .btn,
  .client-profile-page .profile-toolbar .btn{
    width:100%;
  }
  .client-profile-page .app-main,
  .client-profile-page .profile-main{
    width:calc(100vw - 20px);
    max-width:none;
  }
  .profile-map-frame,
  .profile-map-empty{
    min-height:180px;
    height:auto;
  }
}
@media (max-width:560px){
  .profile-map-empty{
    min-height:160px;
  }
  .profile-map-actionbar .btn,
  .profile-map-toolbar-actions .btn{
    width:100%;
  }
}
.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 10px}
.summary-grid .card{margin:0;background:var(--winbox-panel);padding:9px 10px;border-radius:6px;border:1px solid var(--winbox-border)}
.summary-grid span{display:block;color:#5d6979;font-size:10px;text-transform:uppercase;font-weight:800;margin-bottom:4px;letter-spacing:0;line-height:1.2}
.summary-grid strong{display:block;font-size:13px;line-height:1.25;color:#0f172a;word-break:break-word}
form.stack{display:grid;gap:10px}
label{display:grid;gap:5px;font-size:10px;text-transform:uppercase;font-weight:800;color:var(--winbox-muted);line-height:1.2}
input,textarea,select{width:100%;border:1px solid var(--winbox-border);border-radius:5px;background:#fff;padding:7px 8px;font-size:11px;min-height:30px;color:var(--ink);line-height:1.25}
textarea{resize:vertical}
.btn,.action-btn{display:inline-flex;align-items:center;justify-content:center;min-height:29px;padding:6px 10px;border:1px solid var(--winbox-border-dark);border-radius:5px;background:var(--blue);color:#fff;text-decoration:none;font-size:11px;font-weight:800;text-transform:uppercase;line-height:1.1;cursor:pointer;white-space:nowrap}
.btn.secondary,.action-btn.secondary{
  background:var(--winbox-panel);
  border:1px solid var(--winbox-border);
  color:var(--winbox-text);
  box-shadow:none;
}
.btn.secondary:hover,.action-btn.secondary:hover{
  background:var(--winbox-panel-soft);
}
.dashboard-quicklinks .btn.secondary,
.dashboard-panel-blue .btn.secondary,
.dashboard-panel-teal .btn.secondary,
.dashboard-panel-indigo .btn.secondary,
.dashboard-panel-green .btn.secondary,
.dashboard-panel-red .btn.secondary{
  background:var(--winbox-panel);
  border-color:var(--winbox-border);
  color:var(--winbox-text);
}
.dashboard-quicklinks .btn.secondary:hover,
.dashboard-panel-blue .btn.secondary:hover,
.dashboard-panel-teal .btn.secondary:hover,
.dashboard-panel-indigo .btn.secondary:hover,
.dashboard-panel-green .btn.secondary:hover,
.dashboard-panel-red .btn.secondary:hover{
  background:#e7f1fb;
}
.btn.danger,.action-btn.danger{background:var(--red)}
.notice{margin:0 0 9px;padding:9px 10px;border-radius:7px;border:1px solid var(--winbox-border);background:var(--winbox-header-blue);color:var(--winbox-text);font-size:11px}
.notice.warning{border-color:var(--winbox-border-dark);background:var(--winbox-panel-soft);color:var(--winbox-text)}
.notice.success{border-color:var(--winbox-border-dark);background:#ecfdf5;color:#166534}
.notice.error{border-color:var(--winbox-border-dark);background:#fef2f2;color:#991b1b}
.table-shell{border:1px solid var(--winbox-border);border-radius:6px;overflow:auto;background:var(--winbox-panel)}
table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid #dde3e7;padding:6px 8px;text-align:left;font-size:11px;vertical-align:top}
th{background:var(--winbox-panel-soft);color:var(--winbox-text);text-transform:uppercase;font-size:10px;font-weight:800;letter-spacing:0;white-space:nowrap}
td{min-width:80px}
.badge{display:inline-flex;align-items:center;min-height:22px;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:800;text-transform:uppercase;line-height:1.1;letter-spacing:.02em;border:1px solid var(--winbox-border)}
.badge.pending{background:#fef3c7;color:#92400e}
.badge.approved,.badge.active{background:rgba(133,255,33,.16);border:1px solid rgba(133,255,33,.55);color:#14532d}
.badge.rejected,.badge.suspended{background:#fee2e2;color:#991b1b}
.badge.expired{background:#e5e7eb;color:#374151}
.badge.readonly{background:#dbeafe;color:#1d4ed8}
.badge.info{background:rgba(186,230,253,.90);color:#075985}
.badge.ok{background:rgba(196,242,219,.90);color:#166534}
.badge.warn{background:rgba(255,236,191,.90);color:#8a5310}
.badge.muted{background:#eef2f7;color:#475569}
.badge.matched{background:#dbeafe;color:#075985}
.badge.duplicate{background:#fecaca;color:#7f1d1d}
.filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.toolbar-row{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.section-note{color:var(--muted);font-size:12px;line-height:1.35;margin:0}
.section-note-heading{margin:12px 0 8px;font-weight:800;letter-spacing:.03em;color:#173a63;text-transform:uppercase}
.muted{color:var(--muted);font-size:12px;line-height:1.35;margin:0 0 8px}
.footer{padding:14px 12px;text-align:center;color:#667085;font-size:12px}
.login-shell{max-width:440px;margin:28px auto 0}
.login-card{padding:18px 20px}
.login-brand{text-align:center;margin-bottom:18px}
.login-logo{display:block;max-width:160px;max-height:90px;width:auto;height:auto;object-fit:contain;margin:0 auto 12px auto}
.login-title{margin:0;font-size:20px;font-weight:800;line-height:1.25;color:#0f172a}
.login-subtitle{margin:6px 0 0;font-size:12px;color:#64748b}
.login-card .btn{width:100%;margin-top:6px}
.login-card .stack{gap:9px}
.ui-preview-note{margin-bottom:12px;text-align:center}
.compact-gap{gap:8px}
.portal-body{background:var(--winbox-bg);color:var(--winbox-text);font-family:var(--winbox-font)}
.portal-shell{max-width:980px}
.portal-card{max-width:840px;margin:16px auto 0}
.portal-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:16px 16px 12px;
  margin-bottom:12px;
  border:1px solid rgba(13,55,106,.14);
  border-radius:14px;
  background:
    radial-gradient(circle at top left, rgba(191,219,254,.45), transparent 30%),
    linear-gradient(180deg,#ffffff 0%,#f6f9fe 100%);
  box-shadow:0 10px 28px rgba(13,55,106,.06);
}
.portal-kicker{
  margin:0 0 6px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#4f6680;
}
.portal-hero h1{
  margin:0;
  font-size:26px;
  line-height:1.1;
  color:#0f172a;
}
.portal-lead{
  margin:9px 0 0;
  color:#42556d;
  font-size:13px;
  max-width:54ch;
}
.portal-hero-chip{
  min-width:160px;
  padding:11px 13px;
  border-radius:13px;
  border:1px solid rgba(13,55,106,.14);
  background:#fff;
  box-shadow:0 10px 24px rgba(13,55,106,.08);
}
.portal-hero-chip span{
  display:block;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#60728b;
}
.portal-hero-chip strong{
  display:block;
  margin-top:4px;
  font-size:14px;
  color:#102033;
}
.portal-ribbon{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  margin:0 0 12px;
  border-radius:999px;
  background:linear-gradient(180deg,#a11d1d 0%,#851717 100%);
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 8px 18px rgba(153,27,27,.16);
}
.portal-status-strip{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  margin:12px 0;
  border-radius:14px;
  border:1px solid rgba(211,77,77,.18);
  background:linear-gradient(180deg,#fff6f6 0%,#fffdfd 100%);
  box-shadow:0 8px 20px rgba(153,27,27,.05);
}
.portal-status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:78px;
  padding:8px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.portal-status-badge.is-warning{
  background:#fee2e2;
  color:#991b1b;
}
.portal-status-copy strong{
  display:block;
  font-size:14px;
  color:#111827;
  margin-bottom:4px;
}
.portal-status-copy span{
  display:block;
  font-size:12px;
  color:#5b708a;
  line-height:1.45;
}
.portal-status-amount{
  text-align:right;
}
.portal-status-amount span{
  display:block;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#7f1d1d;
}
.portal-status-amount strong{
  display:block;
  margin-top:4px;
  font-size:18px;
  color:#991b1b;
}
.portal-alert-banner{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  margin:12px 0;
  border:1px solid rgba(153,27,27,.18);
  border-radius:14px;
  background:linear-gradient(180deg,#fff1f1 0%,#fffdfd 100%);
  box-shadow:0 8px 20px rgba(153,27,27,.05);
}
.portal-alert-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  background:#b91c1c;
  color:#fff;
  font-weight:900;
  flex:0 0 auto;
}
.portal-alert-copy strong{
  display:block;
  font-size:14px;
  color:#7f1d1d;
  margin-bottom:3px;
}
.portal-alert-copy span{
  display:block;
  font-size:12px;
  color:#7f1d1d;
  line-height:1.45;
}
.portal-restore-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:12px 0;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(13,55,106,.14);
  background:#fff;
  box-shadow:0 10px 24px rgba(13,55,106,.06);
}
.portal-restore-cta strong{
  display:block;
  font-size:13px;
  color:#102033;
  margin-bottom:4px;
}
.portal-restore-cta span{
  display:block;
  font-size:12px;
  color:#4b5f78;
  line-height:1.45;
}
.portal-receipt-note{
  display:block;
  font-size:12px;
  color:#4b5f78;
  font-weight:600;
}
.portal-support-panel{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.portal-support-panel > div{
  padding:12px 13px;
  border-radius:12px;
  border:1px solid #dbe7f5;
  background:#f8fbff;
}
.portal-support-panel strong{
  display:block;
  margin-bottom:4px;
  font-size:12px;
  color:#0f172a;
}
.portal-support-panel span{
  display:block;
  font-size:12px;
  color:#4b5f78;
  line-height:1.45;
}
.portal-help-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:12px 0;
}
.portal-help-card{
  padding:12px 13px;
  border-radius:12px;
  border:1px solid #dbe7f5;
  background:#f8fbff;
}
.portal-help-card strong{
  display:block;
  margin-bottom:4px;
  font-size:12px;
  color:#0f172a;
}
.portal-help-card span{
  display:block;
  font-size:12px;
  color:#4b5f78;
  line-height:1.45;
}
.portal-lookup-form{
  margin-top:10px;
}
.portal-field-label{
  display:block;
  margin-bottom:5px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#5b708a;
}
.portal-primary-btn{min-height:42px;font-weight:800}
.portal-card h2{background:var(--winbox-header-blue);border-color:var(--winbox-border);color:var(--winbox-text)}
.bill-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:9px 0}
.bill-grid > div,.bill-grid > label{background:var(--winbox-panel);border:1px solid var(--winbox-border);border-radius:6px;padding:9px}
.bill-grid span{display:block;color:var(--winbox-muted);font-size:10px;text-transform:uppercase;font-weight:800;margin-bottom:5px}
.bill-grid strong{font-size:12px;word-break:break-word}
.bill-summary-hero{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin:10px 0 8px;
}
.bill-account-primary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:10px;
}
.bill-account-primary > div{
  background:#eef5ff;
  border:1px solid #cfe0f7;
  border-radius:10px;
  padding:12px;
}
.expired-lookup-steps{
  display:grid;
  gap:6px;
  margin:0 0 10px;
}
.expired-lookup-steps div{
  background:#f0f7ff;
  border:1px solid #d6e5f7;
  border-radius:8px;
  padding:8px 10px;
  font-size:12px;
  font-weight:700;
  color:#16324f;
}
.expired-step{
  display:grid;
  gap:3px;
}
.expired-step strong{font-size:12px}
.expired-step span{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#48607a}
.expired-step small{font-size:11px;color:#5f748b}
.expired-debug-meta{
  display:grid;
  gap:8px;
  margin-bottom:10px;
}
.expired-debug-meta > div{
  border:1px solid #d6e5f7;
  background:#f8fbff;
  border-radius:8px;
  padding:8px 10px;
}
.expired-debug-meta pre{
  margin:6px 0 0;
  white-space:pre-wrap;
  word-break:break-word;
  font-size:11px;
}
.bill-summary-hero > div{
  background:#f8fbff;
  border:1px solid #dbe7f5;
  border-radius:8px;
  padding:10px;
}
.bill-summary-hero span{
  display:block;
  color:var(--winbox-muted);
  font-size:10px;
  text-transform:uppercase;
  font-weight:800;
  margin-bottom:5px;
}
.bill-summary-hero strong{
  display:block;
  font-size:13px;
  word-break:break-word;
  color:#102033;
}
.bill-focus-card{
  padding:10px;
  border:1px solid rgba(13,55,106,.16);
  border-radius:10px;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  box-shadow:0 8px 22px rgba(13,55,106,.06);
}
.portal-actions{display:flex;justify-content:flex-end;margin-top:10px}
.portal-actions-stack{flex-direction:column;align-items:stretch}
.payment-option-panel{border:1px solid var(--winbox-border);background:var(--winbox-panel-soft);border-radius:8px;padding:12px;box-shadow:none}
.payment-option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.payment-option-form{display:flex;flex-direction:column;gap:8px}
.payment-amount-field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#0b1f3a}
.payment-amount-field input{width:100%}
.settings-list.compact{grid-template-columns:repeat(3,minmax(0,1fr))}
.payment-option-form .btn[disabled]{opacity:.65;cursor:not-allowed}
.proof-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.proof-grid label{gap:6px}
.proof-grid input,.proof-grid textarea{background:#fff}
.payment-grid label{gap:6px}
.payment-grid input,.payment-grid select{background:#fff}
table .toolbar-row{align-items:center}
.public-kicker{margin:0 0 8px;color:#526071;font-size:13px}
.login-card{padding:14px}
.login-card .btn{width:100%}
.noc-page{padding-top:6px}
.dashboard-shell{position:relative;display:grid;gap:7px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px;margin-bottom:10px;box-shadow:0 18px 48px rgba(19,57,96,.08)}
.dashboard-shell-accent{background:linear-gradient(180deg,#ffffff 0%, #f8fbff 100%)}
.dashboard-hero-shell{border:1px solid rgba(36,107,254,.18);box-shadow:0 22px 58px rgba(36,107,254,.10),0 1px 2px rgba(15,23,42,.04)}
.dashboard-glass-hero{
  background:
    linear-gradient(135deg, rgba(255,255,255,.90), rgba(255,255,255,.56)),
    radial-gradient(circle at 10% 0%, rgba(191,219,254,.58), transparent 30%),
    radial-gradient(circle at 100% 10%, rgba(167,243,208,.42), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(251,191,36,.26), transparent 26%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.dashboard-glass-hero .dashboard-head-pill,
.dashboard-glass-hero .dashboard-banner-card,
.dashboard-glass-hero .noc-status-strip div{
  background:rgba(255,255,255,.84);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.dashboard-glass-hero .dashboard-banner-card{
  box-shadow:0 14px 32px rgba(94,126,170,.14), inset 0 1px 0 rgba(255,255,255,.70);
}
.dashboard-glass-hero .noc-status-strip div{
  box-shadow:0 10px 22px rgba(94,126,170,.08), inset 0 1px 0 rgba(255,255,255,.58);
}
.dashboard-head{display:flex;justify-content:space-between;gap:10px;align-items:center;text-align:left}
.dashboard-hero-head{padding-bottom:0;justify-content:flex-start;width:100%}
.dashboard-head > div{width:100%;text-align:left}
.dashboard-head h1{margin:0;font-size:18px;line-height:1.1;color:#0b1f3a}
.dashboard-lede{margin:4px 0 0;max-width:760px;color:#51647a;font-size:11px;line-height:1.25}
.dashboard-head-meta{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.dashboard-head-pill{background:#f8fbff;border:1px solid #e1ebf7;border-radius:8px;padding:8px 10px;min-width:110px}
.dashboard-head-pill span{display:block;color:#1e3a8a;font-size:10px;text-transform:uppercase;font-weight:800;margin-bottom:3px}
.dashboard-head-pill strong{display:block;color:#0b1f3a;font-size:13px}
.dashboard-banner-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.dashboard-banner-card{border:1px solid #d8e5f4;border-radius:8px;padding:7px 9px;background:#fff;box-shadow:0 8px 18px rgba(15,23,42,.05);min-height:52px}
.dashboard-banner-card span{display:block;font-size:8px;text-transform:uppercase;font-weight:800;letter-spacing:.08em;margin-bottom:3px}
.dashboard-banner-card strong{display:block;font-size:10.5px;line-height:1.2;color:#0b1f3a}
.dashboard-banner-card.banner-blue{background:linear-gradient(180deg,rgba(245,250,255,.96),rgba(255,255,255,.99));border-color:rgba(158,197,242,.26)}
.dashboard-banner-card.banner-green{background:linear-gradient(180deg,rgba(246,252,248,.96),rgba(255,255,255,.99));border-color:rgba(160,223,186,.24)}
.dashboard-banner-card.banner-amber{background:linear-gradient(180deg,rgba(255,248,234,.96),rgba(255,255,255,.99));border-color:rgba(245,188,87,.24)}
.dashboard-banner-card.banner-red{background:linear-gradient(180deg,rgba(255,232,232,.98),rgba(255,255,255,.99));border-color:rgba(239,68,68,.28)}
.banner-blue{background:linear-gradient(180deg,rgba(36,107,254,.12),rgba(255,255,255,.96));border-color:rgba(36,107,254,.20)}
.banner-blue span{color:#1d4ed8}
.banner-green{background:linear-gradient(180deg,rgba(22,163,74,.12),rgba(255,255,255,.96));border-color:rgba(22,163,74,.20)}
.banner-green span{color:#166534}
.banner-amber{background:linear-gradient(180deg,rgba(245,158,11,.12),rgba(255,255,255,.96));border-color:rgba(245,158,11,.20)}
.banner-amber span{color:#92400e}
.banner-red{background:linear-gradient(180deg,rgba(239,68,68,.16),rgba(255,255,255,.96));border-color:rgba(239,68,68,.26)}
.banner-red span{color:#b91c1c}
.dashboard-hero-compact .dashboard-banner-row{display:none}
.dashboard-panel-glow{box-shadow:0 10px 28px rgba(36,107,254,.08)}
.dashboard-summary-section{border:1px solid #d8e5f4;border-radius:12px;padding:7px;background:linear-gradient(180deg,#ffffff 0%, #f9fcff 100%)}
.dashboard-glass-summary{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(235,245,255,.84), rgba(235,245,255,.62));
  border-color: rgba(145, 193, 245, .48);
  box-shadow:
    0 28px 56px rgba(94, 126, 170, .14),
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 0 0 1px rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.dashboard-glass-summary:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg, rgba(255,255,255,.55), transparent 22%, transparent 72%, rgba(255,255,255,.22));
  pointer-events:none;
}
.dashboard-glass-summary > *{
  position:relative;
  z-index:1;
}
.dashboard-summary-title{padding-bottom:5px;margin-bottom:6px;border-bottom:1px solid #e2eaf5}
.dashboard-kpi-grid .noc-kpi{position:relative;overflow:hidden}
.dashboard-kpi-grid .noc-kpi:before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:6px;
  background:#d6e8ff;
}
.dashboard-kpi-grid .noc-kpi{
  min-height:58px;
  box-shadow:0 10px 20px rgba(15,23,42,.05);
  background:rgba(255,255,255,.84);
  border-color: rgba(214, 229, 244, .88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.dashboard-kpi-grid .noc-kpi span{
  color:#476786;
}
.dashboard-kpi-grid .noc-kpi strong{
  font-size:15px;
  color:#10314f;
}
.dashboard-kpi-grid .noc-kpi.wide{
  background:rgba(255,255,255,.84);
}
.dashboard-kpi-grid .noc-kpi.kpi-pastel-blue{background:linear-gradient(180deg,rgba(226,240,255,.98),rgba(247,251,255,.95));border-color:#8ebfff}
.dashboard-kpi-grid .noc-kpi.kpi-pastel-mint{background:linear-gradient(180deg,rgba(223,250,239,.98),rgba(248,255,251,.95));border-color:#66e0b5}
.dashboard-kpi-grid .noc-kpi.kpi-pastel-slate{background:linear-gradient(180deg,rgba(236,243,250,.98),rgba(250,252,255,.95));border-color:#a8b8c9}
.dashboard-kpi-grid .noc-kpi.kpi-pastel-rose{background:linear-gradient(180deg,rgba(255,228,236,.98),rgba(255,248,251,.95));border-color:#ff8fb4}
.dashboard-kpi-grid .noc-kpi.kpi-pastel-sand{background:linear-gradient(180deg,rgba(255,240,210,.98),rgba(255,252,243,.95));border-color:#ffc94d}
.dashboard-kpi-grid .noc-kpi.kpi-pastel-lilac{background:linear-gradient(180deg,rgba(238,227,255,.98),rgba(252,248,255,.95));border-color:#c18bff}
.dashboard-kpi-grid .noc-kpi.kpi-pastel-peach{background:linear-gradient(180deg,rgba(255,232,218,.98),rgba(255,250,246,.95));border-color:#ff9f66}
.dashboard-kpi-grid .noc-kpi.kpi-pastel-blue:before{background:linear-gradient(180deg,#2f89ff,#74bbff)!important}
.dashboard-kpi-grid .noc-kpi.kpi-pastel-mint:before{background:linear-gradient(180deg,#00b67a,#42d7a0)!important}
.dashboard-kpi-grid .noc-kpi.kpi-pastel-slate:before{background:linear-gradient(180deg,#7187a3,#a3b3c5)!important}
.dashboard-kpi-grid .noc-kpi.kpi-pastel-rose:before{background:linear-gradient(180deg,#ef3d7f,#ff7aa8)!important}
.dashboard-kpi-grid .noc-kpi.kpi-pastel-sand:before{background:linear-gradient(180deg,#e6a700,#ffd257)!important}
.dashboard-kpi-grid .noc-kpi.kpi-pastel-lilac:before{background:linear-gradient(180deg,#7d4dff,#b58cff)!important}
.dashboard-kpi-grid .noc-kpi.kpi-pastel-peach:before{background:linear-gradient(180deg,#ff7433,#ffab73)!important}
.dashboard-panel-blue{border-top:3px solid var(--blue)}
.dashboard-panel-teal{border-top:3px solid var(--teal)}
.dashboard-panel-indigo{border-top:3px solid #5b7cfa}
.dashboard-panel-amber{border-top:3px solid var(--amber)}
.dashboard-panel-green{border-top:3px solid var(--green)}
.dashboard-panel-red{border-top:3px solid var(--red)}
.dashboard-panel-neutral{border-top:3px solid #7c8aa5}
.dashboard-panel-glow .dashboard-panel-title h2,
.dashboard-summary-title h2{font-size:11px}
.dashboard-panel-glow .dashboard-panel-title span,
.dashboard-summary-title span{color:#6b7a90;font-size:10px}
.noc-hero{position:relative;display:block;background:transparent;border:0;border-radius:0;color:#0b1f3a;padding:0;margin-bottom:0;box-shadow:none;overflow:visible}
.noc-hero.dashboard-hero{grid-template-columns:1fr}
.noc-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(255,255,255,.38),rgba(5,157,245,.03),transparent);opacity:.55;pointer-events:none}
.noc-hero:after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;background:rgba(5,157,245,.55);border-radius:999px 999px 0 0}
.noc-eyebrow{position:relative;margin:0 0 4px;color:#1e3a8a;text-transform:uppercase;font-size:10px;font-weight:800;letter-spacing:.08em}
.noc-hero h1{position:relative;margin:0;font-size:20px;line-height:1.15;letter-spacing:0;color:#0b1f3a}
.noc-status-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.noc-status-strip div{position:relative;background:rgba(255,255,255,.72);border:1px solid rgba(5,157,245,.16);border-radius:7px;padding:8px;color:#0b1f3a;box-shadow:inset 0 1px 0 rgba(255,255,255,.70)}
.dashboard-server-select{display:grid;gap:4px}
.dashboard-server-select form{margin:0}
.dashboard-server-select select{
  width:100%;
  min-height:24px;
  padding:4px 7px;
  border:1px solid #b8c7d8;
  border-radius:4px;
  background:linear-gradient(180deg,#ffffff,#edf2f7);
  color:#102033;
  font-size:10.5px;
  font-weight:400;
  font-family:Inter, "Segoe UI", Tahoma, Arial, sans-serif;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
.winbox-router-select{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:0;
  margin-right:auto;
}
.winbox-router-select .winbox-titlebar-right{
  margin:0;
}
.winbox-router-select form{
  margin:0;
}
.winbox-router-select select{
  min-width:160px;
  width:auto;
}
.noc-status-strip span,.noc-kpi span,.noc-mini-grid span{display:block;color:#6b7a90;font-size:10px;text-transform:uppercase;font-weight:800;margin-bottom:4px;letter-spacing:0}
.noc-status-strip span{color:#1e3a8a}
.noc-status-strip strong{display:block;color:#0b1f3a;font-size:12px;line-height:1.2;word-break:break-word}
.winbox-panel{
  overflow:hidden;
  border:1px solid #9aa7b7;
  border-top:4px solid #c9cdd0;
  background:linear-gradient(180deg,#f7f8fa 0%,#eef2f6 100%);
  box-shadow:0 10px 24px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.8);
  font-family:Inter, "Segoe UI", Tahoma, Arial, sans-serif;
}
.winbox-titlebar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:6px 8px;
  background:linear-gradient(180deg,#e9edf2,#dfe5eb);
  border-bottom:1px solid #b6c0cb;
  color:#152033;
}
.winbox-titlebar-left{display:flex;align-items:center;gap:6px;min-width:0}
.winbox-titlebar-rightside{margin-left:auto;justify-content:flex-end}
.winbox-titlebar-left strong{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em}
.winbox-titlebar-right{font-size:9.5px;text-transform:uppercase;color:#627084;font-weight:800;white-space:nowrap}
.winbox-dot{width:8px;height:8px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.15)}
.winbox-dot.red{background:#ff5f57}
.winbox-dot.yellow{background:#febc2e}
.winbox-dot.green{background:#28c840}
.winbox-body{padding:8px}
.winbox-line{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 6px;
  color:#102033;
  font-size:10.5px;
  line-height:1.2;
  font-weight:400;
}
.winbox-label{
  color:#4b5d73;
  font-size:8.5px;
  text-transform:uppercase;
  font-weight:600;
  letter-spacing:.05em;
}
.winbox-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  margin-right:4px;
  color:#4f83c2;
  line-height:1;
  vertical-align:middle;
  background-repeat:no-repeat;
  background-position:center;
  background-size:13.5px 13.5px;
}
.winbox-ico-status{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%234f83c2' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='4.25'/%3E%3Cpath d='M6 4.1v1.2'/%3E%3Cpath d='M6 7.2h.01'/%3E%3C/svg%3E");}
.winbox-ico-mikrotik{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%234f83c2' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.2 8.8c.9-2.3 2.2-4 3.8-4s2.9 1.7 3.8 4'/%3E%3Cpath d='M3.3 7.3c.6-1.2 1.4-2.1 2.7-2.1s2.1.9 2.7 2.1'/%3E%3Cpath d='M4.5 6.1c.3-.5.8-.9 1.5-.9s1.2.4 1.5.9'/%3E%3Ccircle cx='6' cy='9.1' r='0.5' fill='%234f83c2' stroke='none'/%3E%3C/svg%3E");}
.winbox-ico-identity{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%234f83c2' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6.1a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z'/%3E%3Cpath d='M2.8 10c.5-1.8 1.8-2.9 3.2-2.9S8.7 8.2 9.2 10'/%3E%3C/svg%3E");}
.winbox-ico-uptime{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%234f83c2' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='4.25'/%3E%3Cpath d='M6 3.4v2.7l1.8 1.1'/%3E%3C/svg%3E");}
.winbox-ico-memory{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%234f83c2' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.2' y='3' width='7.6' height='5.5' rx='0.8'/%3E%3Cpath d='M3.4 2.2v.8M4.8 2.2v.8M6.2 2.2v.8M7.6 2.2v.8M8.8 2.2v.8M3.4 8.8v.8M4.8 8.8v.8M6.2 8.8v.8M7.6 8.8v.8M8.8 8.8v.8'/%3E%3C/svg%3E");}
.winbox-ico-cpu{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%234f83c2' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='6' height='6' rx='0.9'/%3E%3Cpath d='M4.1 1.9v1.1M6 1.9v1.1M7.9 1.9v1.1M4.1 9v1.1M6 9v1.1M7.9 9v1.1M1.9 4.1h1.1M1.9 6h1.1M1.9 7.9h1.1M9 4.1h1.1M9 6h1.1M9 7.9h1.1'/%3E%3C/svg%3E");}
.winbox-ico-load{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%234f83c2' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.2 9.2h7.6'/%3E%3Cpath d='M3.2 7.9V6.6M5.1 7.9V5.4M7 7.9V4.1M8.9 7.9V3.2'/%3E%3C/svg%3E");}
.winbox-ico-arch{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%234f83c2' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.9V4.4L6 2.3l3 2.1v4.5'/%3E%3Cpath d='M4 7.7V5.1M6 7.7V4.7M8 7.7V5.7'/%3E%3Cpath d='M2.8 9.5h6.4'/%3E%3C/svg%3E");}
.winbox-ico-board{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%234f83c2' stroke-width='1.05' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.1' y='2.1' width='7.8' height='7.8' rx='0.9'/%3E%3Cpath d='M4 4h4M4 6h4M4 8h2.2'/%3E%3Cpath d='M3.1 3.1h.01M8.9 3.1h.01M3.1 8.9h.01M8.9 8.9h.01'/%3E%3C/svg%3E");}
.winbox-ico-version{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%234f83c2' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 2.6h3.2M4.6 2.6v6.8M8 4.2v5.2'/%3E%3Cpath d='M8 4.2h1M8 9.4h1'/%3E%3C/svg%3E\");}
.winbox-line strong{
  color:#102033;
  font-size:11.5px;
  font-weight:400;
}
.winbox-line span{
  font-size:10.5px;
  color:#102033;
  font-weight:400;
}
.winbox-sep{
  color:#90a0b3!important;
  font-weight:400!important;
}
.winbox-status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:18px;
  padding:2px 7px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:9.5px;
  font-weight:600;
  text-transform:uppercase;
}
.winbox-status-pill .winbox-ico{
  width:13px;
  height:13px;
  margin-right:3px;
}
.winbox-status-pill.ok{background:#d8f5df;border-color:#9ed4ad;color:#2e7a43}
.winbox-status-pill.danger{background:#ffe1e1;border-color:#f1aaaa;color:#9a1f1f}
.winbox-footer-meta{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:5px;
  margin-top:5px;
  padding-top:3px;
  border-top:1px solid #c9d3dd;
  font-family:Inter, "Segoe UI", Tahoma, Arial, sans-serif;
  flex-wrap:wrap;
}
.winbox-footer-spacer{
  flex:1 1 auto;
  min-width:10px;
}
.winbox-footer-meta span{
  color:#4b5d73;
  font-size:8.5px;
  text-transform:uppercase;
  font-weight:600;
  letter-spacing:.05em;
}
.winbox-footer-meta strong{
  color:#102033;
  font-size:10.5px;
  font-weight:400;
}
.winbox-footer-sync{
  margin-left:auto;
  text-align:right;
}
.status-badge{display:inline-flex!important;align-items:center;justify-content:center;width:max-content;min-height:22px;padding:3px 8px;border-radius:999px;font-size:10px;text-transform:uppercase;font-weight:900}
.status-badge.ok{background:rgba(196,242,219,.72);border:1px solid rgba(153,219,180,.55);color:#4a8b65}
.status-badge.info{background:rgba(209,233,255,.82);border:1px solid rgba(146,196,255,.50);color:#1e5a88}
.status-badge.warn{background:rgba(255,236,191,.82);border:1px solid rgba(248,205,116,.50);color:#8a5310}
.status-badge.danger{background:rgba(255,214,214,.82);border:1px solid rgba(240,153,153,.50);color:#9a1f1f}
.noc-kpi-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-bottom:10px}
.noc-kpi{background:#fff;border:1px solid #d8e5f4;border-left:4px solid #60a5fa;border-radius:8px;padding:10px;min-height:72px;box-shadow:0 1px 2px rgba(15,23,42,.035)}
.noc-kpi.wide{border-left-color:#2563eb}
.noc-kpi strong{display:block;color:#0f172a;font-size:18px;line-height:1.1;word-break:break-word}
.dashboard-btn-requests,
.dashboard-btn-jobs,
.dashboard-btn-sync,
.dashboard-btn-proofs{
  box-shadow:none!important;
  border-width:1px!important;
}
.dashboard-btn-requests{
  background:#ddd6fe!important;
  color:#4c1d95!important;
  border-color:#a78bfa!important;
}
.dashboard-btn-requests:hover{
  background:#c4b5fd!important;
  color:#4c1d95!important;
}
.dashboard-btn-jobs{
  background:#bbf7d0!important;
  color:#14532d!important;
  border-color:#86efac!important;
}
.dashboard-btn-jobs:hover{
  background:#a7f3d0!important;
  color:#14532d!important;
}
.dashboard-btn-sync{
  background:#bfdfff!important;
  color:#0f3b82!important;
  border:1px solid #7db7ff!important;
  box-shadow:none!important;
}
.dashboard-btn-sync:hover{
  background:#a7d3ff!important;
  color:#0f3b82!important;
  box-shadow:none!important;
}
.dashboard-btn-proofs{
  background:#fed7aa!important;
  color:#7c2d12!important;
  border-color:#fdba74!important;
}
.dashboard-btn-proofs:hover{
  background:#fdba74!important;
  color:#7c2d12!important;
}
.client-location-modal{
  position:fixed;
  inset:0;
  z-index:1200;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.client-location-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.38);
}
.client-location-modal-card{
  position:relative;
  z-index:1;
  width:min(1120px, 100%);
  max-height:calc(100vh - 36px);
  overflow:auto;
  background:#fff;
  border:1px solid #d8e5f4;
  border-radius:12px;
  box-shadow:0 24px 64px rgba(15,23,42,.22);
  padding:14px;
}
.client-location-picker-card{
  width:min(1240px, 100%);
}
.client-location-summary{
  margin-bottom:12px;
}
.client-location-picker-map{
  height:460px;
  margin-top:12px;
}
.client-location-hidden-label{
  display:none !important;
}
.client-location-modal-card .billing-cycle-filter{
  margin-top:10px;
}
.client-card[role="button"]{
  cursor:pointer;
}
.client-search-field{
  position:relative;
}
.client-search-suggestions{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  margin-top:6px;
  background:#fff;
  border:1px solid #d8e5f4;
  border-radius:12px;
  box-shadow:0 16px 36px rgba(15,23,42,.14);
  z-index:1205;
  overflow:hidden;
}
.client-search-suggestion{
  display:block;
  width:100%;
  text-align:left;
  padding:10px 12px;
  border:0;
  background:#fff;
  color:#173a63;
  cursor:pointer;
}
.client-search-suggestion:hover,
.client-search-suggestion.is-active{
  background:#f0fdf4;
  border-color:#86efac;
  box-shadow:0 0 0 1px rgba(34,197,94,.12);
}
.pppoe-search-result-card{
  background:#f0fdf4;
  border:1px solid #86efac;
  border-left:4px solid #22c55e;
  color:#064e3b;
  box-shadow:0 1px 0 rgba(34,197,94,.08);
}
.pppoe-search-result-card:hover,
.pppoe-search-result-card.is-match,
.pppoe-search-result-card.is-active{
  background:#dcfce7;
  border-color:#4ade80;
  box-shadow:0 0 0 1px rgba(34,197,94,.12);
}
.pppoe-search-result-name{
  color:#166534;
  font-weight:700;
}
  background:#eef6ff;
}
.client-search-empty{
  cursor:default;
  color:#64748b;
  padding:10px 12px;
  text-align:left;
}
.client-search-suggestion strong{
  display:block;
  font-size:13px;
  margin-bottom:2px;
}
.client-search-suggestion span{
  display:block;
  font-size:12px;
  color:#64748b;
}
.clients-search-note{
  margin-top:8px;
}
.clients-search-count{
  margin:0 0 10px;
}
.client-list-empty-state{
  margin-top:8px;
}
.client-map-canvas{
  width:100%;
  height:500px;
  border:1px solid #d8e5f4;
  border-radius:12px;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
.map-popup{
  font-size:12px;
  line-height:1.35;
  color:#0b1f3a;
}
.map-popup strong{
  display:inline-block;
  margin-bottom:4px;
}
.client-map-shell{
  position:relative;
}
.client-map-selected-panel{
  position:absolute;
  top:12px;
  right:12px;
  z-index:700;
  width:min(320px, calc(100vw - 36px));
  max-width:320px;
  display:none;
  gap:8px;
  padding:10px;
  border:1px solid #cfe0f3;
  border-radius:14px;
  background:rgba(248,251,255,.96);
  box-shadow:0 14px 30px rgba(15,23,42,.16);
  backdrop-filter:blur(12px);
  cursor:default;
}
.client-map-selected-panel.is-visible{
  display:grid;
}
.client-map-selected-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  cursor:move;
}
.client-map-selected-panel-kicker{
  color:#3b82f6;
  font-size:10px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.client-map-selected-panel-title{
  color:#0f172a;
  font-size:14px;
  font-weight:900;
  line-height:1.2;
}
.client-map-selected-panel-close{
  width:24px;
  height:24px;
  border:1px solid #c7d8ea;
  border-radius:8px;
  background:#fff;
  color:#475569;
  font-size:16px;
  line-height:1;
  cursor:pointer;
}
.client-map-selected-panel-close:hover{
  background:#eff6ff;
  border-color:#93c5fd;
}
.client-map-selected-panel-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
}
.client-map-selected-panel-grid > div,
.client-map-popup-grid > div{
  display:grid;
  gap:2px;
  padding:6px 7px;
  border:1px solid #dbe7f5;
  border-radius:9px;
  background:#fff;
}
.client-map-selected-panel-grid span,
.client-map-popup-grid span{
  color:#6b7280;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.client-map-selected-panel-grid strong,
.client-map-popup-grid strong{
  color:#0f172a;
  font-size:12px;
  font-weight:800;
}
.client-map-popup{
  width:min(300px, 100%);
  display:grid;
  gap:6px;
}
.client-map-popup-title{
  color:#0f172a;
  font-size:14px;
  font-weight:900;
  line-height:1.15;
}
.client-map-popup-meta{
  display:flex;
  flex-wrap:wrap;
  gap:5px 8px;
  color:#475569;
  font-size:11px;
}
.client-map-popup-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
}
.client-map-popup-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.btn-xs{
  min-height:24px;
  padding:4px 8px;
  font-size:11px;
  line-height:1.1;
}
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 7px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  line-height:1.1;
  border:1px solid transparent;
}
.badge.is-good{background:#dcfce7;color:#166534;border-color:#86efac;}
.badge.is-warning{background:#fef3c7;color:#92400e;border-color:#fcd34d;}
.badge.is-critical{background:#fee2e2;color:#991b1b;border-color:#fca5a5;}
.badge.is-unknown{background:#e2e8f0;color:#334155;border-color:#cbd5e1;}
.network-map-page{
  display:grid;
  gap:10px;
}
.network-map-hero{
  grid-template-columns:minmax(0,1fr);
  gap:8px;
  align-items:start;
}
.network-map-page .network-map-hero > div{
  width:100%;
  min-width:0;
}
.network-map-page .network-map-hero .network-map-hero-copy{
  max-width:none;
}
.topology-tree-network-page .coverage-hero{
  grid-template-columns:minmax(0,1fr);
  gap:8px;
  align-items:start;
}
.topology-tree-network-page .coverage-hero-copy{
  width:100%;
  max-width:none;
  margin:0;
}
.topology-tree-network-page .coverage-status-strip{
  width:100%;
  margin:0;
}
.network-map-status-strip{
  grid-template-columns:repeat(7,minmax(0,1fr));
}
.network-map-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,360px);
  gap:10px;
  align-items:start;
}
.network-map-main{
  display:grid;
  gap:10px;
}
.network-map-sidebar{
  display:grid;
  gap:10px;
  position:sticky;
  top:8px;
}
.network-map-filter-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}
.network-map-filter-grid label{
  background:#f8fbff;
  border:1px solid #e1ebf7;
  border-radius:8px;
  padding:7px 8px;
  color:#334155;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}
.network-map-filter-grid input,
.network-map-filter-grid select{
  margin-top:4px;
  min-height:28px;
  width:100%;
}
.network-map-filter-actions{
  grid-column:1/-1;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  justify-content:flex-start;
  align-items:center;
}
.network-map-layer-actions{
  margin-top:8px;
}
.network-map-layer-actions .btn{
  min-height:26px;
  padding:4px 7px;
  font-size:9px;
}
.network-map-legend{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px 8px;
  margin-bottom:8px;
}
.network-map-legend div{
  display:flex;
  gap:6px;
  align-items:center;
  padding:5px 7px;
  border:1px solid #e1ebf7;
  border-radius:8px;
  background:#f8fbff;
}
.network-map-legend strong{
  font-size:10px;
  color:#173a63;
  font-weight:800;
}
.network-map-selected-head{
  display:grid;
  gap:2px;
  padding:7px 8px;
  border:1px solid #dbe7f5;
  border-radius:8px;
  background:#f8fbff;
  margin-bottom:8px;
}
.network-map-selected-head strong{
  font-size:12px;
  font-weight:800;
  color:#102033;
}
.network-map-selected-head span{
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#5f83b0;
  font-weight:800;
}
.network-map-selected-grid{
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.network-map-selected-grid > div{
  display:grid;
  gap:2px;
  padding:6px 7px;
  border:1px solid #e1ebf7;
  border-radius:8px;
  background:#fff;
}
.network-map-selected-grid span{
  font-size:7px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#7b8da5;
  font-weight:800;
}
.network-map-selected-grid strong{
  font-size:10px;
  color:#102033;
  line-height:1.2;
}
.network-map-selected-actions{
  margin-top:8px;
}
.network-map-summary-panel .settings-list.compact > div{
  min-height:0;
  padding:7px 8px;
}
.network-map-refresh-form{
  margin-top:8px;
  display:flex;
  justify-content:flex-start;
}
.network-map-canvas{
  min-height:620px;
  height:620px;
}
@media (max-width: 1100px){
  .network-map-layout{
    grid-template-columns:1fr;
  }
  .network-map-sidebar{
    position:static;
  }
}
@media (max-width: 900px){
  .network-map-hero{
    grid-template-columns:1fr;
  }
  .network-map-status-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .network-map-filter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 760px){
  .network-map-status-strip{
    grid-template-columns:1fr;
  }
  .network-map-filter-grid{
    grid-template-columns:1fr;
  }
  .network-map-legend{
    grid-template-columns:1fr;
  }
  .network-map-canvas{
    height:360px;
    min-height:360px;
  }
}
@media (max-width: 760px){
  .client-map-canvas{height:360px}
}
.billing-cycle-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:end}
.billing-cycle-filter label{min-width:140px;max-width:180px}
.billing-cycle-filter input{margin-top:4px}
.billing-cycle-confirm-filter{margin-bottom:10px}
.billing-cycle-confirm-form{display:grid;gap:10px}
.billing-cycle-confirm-form label{background:#f8fbff;border:1px solid #e1ebf7;border-radius:7px;padding:8px;color:#334155;font-size:11px;font-weight:800;text-transform:uppercase}
.billing-cycle-confirm-form input[type=text]{margin-top:4px}
.billing-cycle-confirm-form .checkbox-row{display:flex;align-items:center;gap:8px;text-transform:none;font-size:12px}
.billing-cycle-confirm-form .checkbox-row input[type=checkbox]{margin:0}
.billing-cycle-confirm-actions .btn{font-weight:600!important}
.billing-preview-table{width:100%;min-width:1320px;table-layout:auto}
.billing-preview-table th,.billing-preview-table td{vertical-align:middle;white-space:nowrap}
.billing-preview-table td:nth-child(12){white-space:normal;min-width:220px}
.billing-preview-kpis .noc-kpi strong{font-size:16px}
.billing-cycles-page .noc-panel{margin-bottom:10px}
.dashboard-panel-title{display:flex;justify-content:space-between;align-items:center;gap:8px}
.dashboard-panel-title span{white-space:nowrap}
.dashboard-glass-summary .dashboard-summary-title h2,
.dashboard-glass-summary .dashboard-summary-title span{
  text-shadow:0 1px 0 rgba(255,255,255,.65);
}
.dashboard-glass-summary .dashboard-summary-title h2,
.dashboard-glass-summary .dashboard-summary-title span,
.dashboard-glass-summary .noc-kpi span,
.dashboard-glass-summary .noc-kpi strong{
  color:#173a63;
}
.dashboard-glass-summary .text-green,
.dashboard-glass-summary .text-amber,
.dashboard-glass-summary .text-red{
  color:#173a63!important;
}
.dashboard-glass-summary .noc-kpi{
  border-left:0!important;
}
.dashboard-glass-summary .noc-kpi.wide{
  border-left:0!important;
}
.text-green{color:#15803d!important}.text-amber{color:#b45309!important}.text-red{color:#b91c1c!important}
.noc-two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:8px}
.noc-panel{background:linear-gradient(180deg,#ffffff 0%, #fbfdff 100%);border:1px solid #d8e5f4;border-radius:9px;padding:7px;box-shadow:0 10px 24px rgba(15,23,42,.05);overflow:hidden}
.noc-panel-title{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px;border-bottom:1px solid #e2eaf5;padding-bottom:6px}
.noc-panel-title h2{margin:0;color:#10213d;background:transparent;padding:0;border-radius:0;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
.noc-panel-title span{color:#5f83b0;font-size:9px;font-weight:800;text-transform:uppercase;white-space:nowrap}
.noc-mini-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:6px}
.noc-mini-grid div{background:#f8fbff;border:1px solid #e1ebf7;border-radius:7px;padding:6px 7px;min-height:48px}
.noc-mini-grid strong{display:block;color:#0f172a;font-size:11px;line-height:1.2;word-break:break-word}
.portal-command{border-top:3px solid #60a5fa}
.alarm-list{display:grid;gap:5px}
.alarm-row{display:grid;gap:2px;border:1px solid #dbeafe;background:#eff6ff;color:#1e3a8a;border-radius:7px;padding:6px 7px}
.alarm-row strong{font-size:10px;text-transform:uppercase}
.alarm-row span{font-size:9px;color:inherit}
.alarm-row.warning{border-color:#fde68a;background:#fffbeb;color:#92400e}
.alarm-row.danger{border-color:#fecaca;background:#fef2f2;color:#991b1b}
.alarm-row.ok{border-color:#bbf7d0;background:#ecfdf5;color:#166534}
.noc-footnote{margin:0 0 8px;padding:7px 9px;border:1px solid #bfdbfe;border-radius:8px;background:#eff6ff;color:#1e3a8a;font-size:10px;font-weight:700}
.pppoe-ops-page .pppoe-hero{background:rgba(5,157,245,.03);border-color:rgba(5,157,245,.18);color:#0b1f3a}
.pppoe-kpi-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.pppoe-main-grid{grid-template-columns:minmax(360px,.95fr) minmax(420px,1.05fr)}
.selected-client-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.selected-client-grid div{min-height:58px}
.command-panel{border-top:3px solid #2563eb}
.command-safety-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-bottom:9px}
.command-safety-grid div{background:#f8fbff;border:1px solid #dbeafe;border-radius:7px;padding:8px}
.command-safety-grid strong{display:block;color:#10213d;font-size:12px;text-transform:uppercase;margin-bottom:3px}
.command-safety-grid span{display:block;color:#5d6979;font-size:12px}
.command-actions{align-items:center}
.command-actions form{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.command-actions select{max-width:190px}
.pppoe-manual-tools{margin-top:9px;padding-top:9px;border-top:1px solid #e2eaf5}
.pppoe-reconcile-panel{display:grid;gap:8px}
.pppoe-reconcile-kpis{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:0}
.pppoe-reconcile-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:end;
}
.pppoe-reconcile-actions .pppoe-router-select{
  display:grid;
  gap:4px;
  min-width:220px;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  color:#5f6e82;
}
.pppoe-reconcile-actions .pppoe-router-select select{
  min-height:30px;
}
.pppoe-reconcile-table-shell{
  max-height:none;
}
.pppoe-reconcile-table{
  width:100%;
  min-width:0;
  table-layout:fixed;
}
.pppoe-reconcile-table thead th{
  font-size:10px;
  padding-top:8px;
  padding-bottom:8px;
}
.pppoe-reconcile-table td{
  vertical-align:top;
  white-space:normal;
  word-break:break-word;
}
.pppoe-reconcile-table td strong{
  display:block;
  font-size:11px;
  line-height:1.25;
}
.pppoe-reconcile-table .muted{
  font-size:10px;
  color:var(--mz-muted);
  margin-top:2px;
}
.pppoe-reconcile-table .toolbar-row{
  justify-content:flex-start;
}
.pppoe-locked-display{display:grid;gap:3px;align-content:center;min-width:170px;padding:7px 10px;border:1px solid rgba(5,157,245,.16);border-radius:7px;background:rgba(5,157,245,.03)}
.pppoe-locked-display span{font-size:10px;text-transform:uppercase;color:#1e3a8a;font-weight:800}
.pppoe-locked-display strong{font-size:12px;color:#0b1f3a;white-space:nowrap}
.pppoe-table-shell td:nth-child(8){font-weight:800}
.pppoe-row.is-selected{background:rgba(5,157,245,.06);outline:2px solid rgba(5,157,245,.45);box-shadow:inset 3px 0 0 rgba(5,157,245,.65)}
.pppoe-selected-badge{display:inline-flex;align-items:center;padding:3px 7px;border-radius:999px;background:rgba(133,255,33,.16);border:1px solid rgba(133,255,33,.55);color:#14532d;font-size:10px;font-weight:600}
#selected-pppoe-client{scroll-margin-top:90px}
.pppoe-ops-page .noc-panel{margin-bottom:10px}
.pppoe-ops-page .selected-subscriber-panel .noc-mini-grid{gap:6px}
.pppoe-ops-page .selected-subscriber-panel .noc-mini-grid div{min-height:54px;padding:7px}
.pppoe-ops-page .selected-subscriber-panel .noc-mini-grid strong{font-size:14px}
.pppoe-ops-page .command-panel .command-safety-grid div{padding:8px}

/* Coverage map page overrides */
.client-map-page .client-map-coverage-canvas{
  width:100%;
  height:560px;
  min-height:560px;
}
.client-map-page .leaflet-container{
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  background:#e9f1fa;
}
.client-map-page .leaflet-container img,
.client-map-page .leaflet-tile{
  max-width:none !important;
  max-height:none !important;
}
.client-map-page .leaflet-tile-container img{
  width:256px;
  height:256px;
}
.client-map-page .leaflet-pane,
.client-map-page .leaflet-map-pane,
.client-map-page .leaflet-tile-pane,
.client-map-page .leaflet-overlay-pane{
  width:100%;
  height:100%;
}
.coverage-map-panel{
  padding-bottom:10px;
}
.coverage-map-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 10px;
}
.coverage-map-actions .btn.is-active{
  background:#173a63;
  border-color:#173a63;
  color:#fff;
}
.coverage-map-actions .btn.secondary.is-active{
  background:#173a63;
  border-color:#173a63;
  color:#fff;
}
.coverage-legend-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:8px;
  margin-bottom:8px;
}
.coverage-legend-grid div{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 9px;
  border:1px solid #dbe5f4;
  border-radius:8px;
  background:#f8fbff;
  color:#173a63;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
}
.legend-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
  flex:0 0 auto;
}
.legend-dot-green{background:#22c55e}
.legend-dot-pink{background:#ec4899}
.legend-dot-gray{background:#94a3b8}
.legend-dot-orange{background:#f59e0b}
.legend-dot-nap{background:#2563eb}
.legend-dot-blue-square{
  background:#2563eb;
  border-radius:2px;
}
.legend-dot-purple-diamond{
  background:#7c3aed;
  border-radius:2px;
  transform:rotate(45deg);
}
.legend-dot-red-star{
  background:#ef4444;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.legend-line{
  width:18px;
  height:3px;
  border-radius:999px;
  display:inline-block;
  flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(255,255,255,.75), 0 1px 2px rgba(15,23,42,.18);
}
.legend-line-pink{background:#d946ef}
.legend-line-blue{background:#2563eb}
.legend-line-red{background:#ef4444}
.map-popup-section{
  display:grid;
  gap:3px;
  margin:6px 0 4px;
  padding:6px 7px;
  border:1px solid #e2eaf5;
  border-radius:7px;
  background:#f8fbff;
}
.map-popup-section-label{
  color:#173a63;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.map-popup-subtitle{
  color:#173a63;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.03em;
  margin-top:4px;
}
.client-map-page .map-line-tooltip{
  border:1px solid #cfddee;
  background:#fff;
  color:#173a63;
  font-size:10px;
  font-weight:800;
  padding:3px 7px;
  border-radius:999px;
  box-shadow:0 2px 8px rgba(15,23,42,.12);
}
.client-map-page .coverage-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:8px;
  align-items:start;
  width:100%;
  margin-left:0;
  margin-right:0;
}
.client-map-page .coverage-hero-copy{
  width:100%;
  max-width:none;
  margin:0;
}
.client-map-page .coverage-status-strip{
  width:100%;
  margin:0;
}
.coverage-status-strip{
  grid-template-columns:repeat(8,minmax(0,1fr));
}
.coverage-summary-grid{
  align-items:start;
}
.port-map-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:8px;
  margin-top:6px;
  margin-bottom:10px;
}
.port-list-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:6px;
}
.port-list-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  padding:8px 10px;
  border:1px solid #d8e5f4;
  border-radius:10px;
  background:linear-gradient(180deg,#f8fbff 0%, #ffffff 100%);
}
.port-list-node{
  font-size:13px;
  font-weight:900;
  color:#0f172a;
  letter-spacing:.02em;
}
.port-list-subtitle{
  margin-top:2px;
  font-size:10px;
  color:#64748b;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.port-list-capacity{
  display:grid;
  justify-items:end;
  gap:2px;
}
.port-list-capacity span{
  font-size:9px;
  color:#64748b;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:.04em;
}
.port-list-capacity strong{
  font-size:13px;
  color:#0f172a;
}
.port-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.port-line{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  padding:8px 10px;
  border:1px solid #d8e5f4;
  border-radius:10px;
  background:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.port-line.status-available{border-left:4px solid #16a34a;background:#fbfffc}
.port-line.status-occupied{border-left:4px solid #f97316;background:#fffaf4}
.port-line.status-reserved{border-left:4px solid #8b5cf6;background:#fbf8ff}
.port-line.status-damaged{border-left:4px solid #dc2626;background:#fff8f8}
.port-line.status-inactive{border-left:4px solid #64748b;background:#f8fafc}
.port-line-main{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  flex:1 1 auto;
}
.port-line-title{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
}
.port-line-title strong{
  font-size:12px;
  font-weight:900;
  color:#0f172a;
}
.port-line-label{
  font-size:11px;
  font-weight:800;
  color:#173a63;
}
.port-line-client{
  font-size:11px;
  font-weight:800;
  color:#0f172a;
}
.port-line-submeta{
  font-size:10px;
  color:#64748b;
  line-height:1.25;
}
.port-line-actions{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  gap:6px;
  flex-wrap:wrap;
  min-width:240px;
}
.port-inline-assign{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  min-width:260px;
}
.port-inline-assign select{
  min-width:220px;
  max-width:320px;
  min-height:28px;
  padding:4px 8px;
  border:1px solid #cddae8;
  border-radius:7px;
  background:#fff;
  color:#0f172a;
  font-size:10px;
}
.port-inline-assign .btn{
  min-height:28px;
  padding:4px 10px;
  font-size:10px;
}
.port-line-lock{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:4px 8px;
  font-size:10px;
}
.lock-panel{
  display:flex;
  flex-wrap:wrap;
  gap:6px 8px;
  align-items:center;
  margin-top:8px;
  padding:8px 9px;
  border:1px solid #f2c7c7;
  border-radius:8px;
  background:#fff8f8;
}
.lock-panel strong{
  font-size:11px;
  color:#7f1d1d;
}
.lock-panel .section-note{
  width:100%;
  margin:0;
}
.port-label-cell{
  display:grid;
  gap:4px;
}
.port-label-display{
  font-size:11px;
  font-weight:800;
  color:#173a63;
  word-break:break-word;
}
.port-label-cell input,
.port-notes-input{
  width:100%;
  min-height:28px;
  padding:5px 7px;
  font-size:11px;
}
.port-label-form{
  display:inline-flex;
  align-items:center;
}
.port-label-form .btn{
  width:auto;
  min-width:0;
}
.topology-tree-page{
  display:grid;
  gap:10px;
}
.topology-tree-root{
  display:grid;
  gap:10px;
}
.topology-node-card{
  border:1px solid #d7e5f3;
  border-radius:10px;
  background:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.05);
  overflow:hidden;
}
.topology-noc-card{
  border-left:4px solid #16203a;
}
.topology-lcp-card{
  margin:8px 0 0 18px;
  border-left:4px solid #6d28d9;
}
.topology-nap-card{
  margin:8px 0 0 18px;
  border-left:4px solid #2563eb;
}
.topology-node-header{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  padding:8px 10px;
  border-bottom:1px solid #e5edf6;
  background:linear-gradient(180deg,#fff,#f8fbff);
}
.topology-node-header h3,
.topology-node-header h4,
.topology-node-header h5{
  margin:0;
  color:#102033;
  line-height:1.1;
}
.topology-node-header h3{font-size:14px}
.topology-node-header h4{font-size:13px}
.topology-node-header h5{font-size:12px}
.topology-node-kicker{
  font-size:9px;
  font-weight:900;
  color:#56708f;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:4px;
}
.topology-node-name{
  margin-top:3px;
  font-size:10px;
  font-weight:700;
  color:#47607c;
}
.topology-node-meta{
  margin-top:4px;
  font-size:9px;
  color:#6b7f97;
  line-height:1.25;
}
.topology-node-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:flex-start;
}
.topology-node-actions .btn{
  min-height:24px;
  height:24px;
  padding:3px 7px;
  font-size:9px;
}
.topology-branch-list{
  display:grid;
  gap:8px;
  padding:8px;
}
.topology-lock-row{
  display:flex;
  gap:6px;
  align-items:flex-start;
  flex-wrap:wrap;
  margin-top:6px;
  font-size:10px;
  color:#7f1d1d;
}
.topology-port-summary{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(82px,1fr));
  gap:5px;
  padding:0 8px 8px;
}
.topology-port-summary > div{
  border:1px solid #e1ebf7;
  border-radius:7px;
  padding:5px 6px;
  background:#f8fbff;
}
.topology-port-summary span{
  display:block;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#64748b;
  margin-bottom:3px;
}
.topology-port-summary strong{
  display:block;
  font-size:10px;
  color:#0f172a;
}
.topology-port-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  gap:5px;
  padding:0 8px 8px;
}
.topology-port-box{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:6px;
  border:1px solid #d8e5f4;
  border-radius:8px;
  background:#fff;
  box-shadow:0 1px 1px rgba(15,23,42,.04);
  min-height:72px;
}
.topology-port-box.status-vacant,
.topology-port-box.status-available{border-left:4px solid #94a3b8;background:#f8fafc}
.topology-port-box.status-online,
.topology-port-box.status-occupied{border-left:4px solid #16a34a;background:#f1fff5}
.topology-port-box.status-offline{border-left:4px solid #f97316;background:#fff7ef}
.topology-port-box.status-expired{border-left:4px solid #dc2626;background:#fff6f6}
.topology-port-box.status-reserved{border-left:4px solid #8b5cf6;background:#faf5ff}
.topology-port-box.status-damaged{border-left:4px solid #f97316;background:#fff7ef}
.topology-port-box.status-inactive{border-left:4px solid #64748b;background:#f8fafc}
.topology-port-head{
  display:flex;
  justify-content:space-between;
  gap:4px;
  align-items:flex-start;
}
.topology-port-number{
  font-size:9px;
  font-weight:900;
  color:#102033;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.topology-port-label{
  font-size:10px;
  font-weight:800;
  color:#173a63;
  line-height:1.2;
  word-break:break-word;
}
.topology-port-submeta{
  font-size:8px;
  color:#64748b;
  line-height:1.2;
  word-break:break-word;
}
.topology-port-actions{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-top:auto;
}
.topology-port-actions .btn{
  width:100%;
  min-height:22px;
  height:22px;
  padding:2px 5px;
  font-size:8px;
}
.topology-empty-note{
  margin:0 8px 8px;
}
.topology-toolbar{
  display:grid;
  gap:6px;
  padding:7px 9px;
  border:1px solid #d7e5f3;
  border-radius:10px;
  background:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.topology-toolbar-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.topology-toolbar-actions .btn{
  min-height:22px;
  height:22px;
  padding:2px 7px;
  font-size:8px;
}
.topology-toolbar-note{
  font-size:9px;
  color:#47607c;
  line-height:1.25;
}
.topology-tree-page .coverage-status-strip{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:5px;
}
.topology-tree-page .coverage-status-strip > div{
  padding:5px 7px;
  border-radius:8px;
}
.topology-layout{
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  gap:8px;
  align-items:start;
}
.topology-tree-sidebar,
.topology-detail-pane{
  min-width:0;
}
.topology-tree-sidebar{
  display:grid;
  gap:8px;
  padding:6px;
  border:1px solid #d7e5f3;
  border-radius:10px;
  background:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  position:sticky;
  top:8px;
}
.topology-sidebar-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
}
.topology-sidebar-head h2{
  margin:2px 0 0;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:#173a63;
}
.topology-tree-list{
  display:grid;
  gap:5px;
}
.topology-tree-noc-block{
  display:grid;
  gap:2px;
  padding-left:1px;
}
.topology-tree-lcp-block{
  display:grid;
  gap:2px;
  padding-left:10px;
  border-left:1px dashed #c8d6ea;
}
.topology-tree-children{
  display:grid;
  gap:3px;
  margin-left:6px;
}
.topology-tree-children-tight{
  gap:3px;
}
.topology-tree-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:5px;
}
.topology-tree-code{
  font-size:9px;
  font-weight:900;
  color:#102033;
  line-height:1.15;
  word-break:break-word;
}
.topology-tree-name{
  font-size:8px;
  color:#5f7188;
  line-height:1.15;
  word-break:break-word;
  margin-left:1px;
}
.topology-tree-noc-row .topology-tree-code{
  color:#13233f;
}
.topology-tree-root-link,
.topology-tree-child-link,
.topology-tree-nap-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  width:100%;
  padding:4px 5px;
  border:1px solid #dbe7f5;
  border-radius:7px;
  background:#f8fbff;
  color:#173a63;
  text-decoration:none;
  box-shadow:0 1px 1px rgba(15,23,42,.03);
  min-width:0;
}
.topology-tree-root-link.is-selected,
.topology-tree-child-link.is-selected,
.topology-tree-nap-link.is-selected{
  border-color:#2563eb;
  background:#eef5ff;
  box-shadow:0 0 0 1px rgba(37,99,235,.12);
}
.topology-tree-level-tag{
  display:inline-flex;
  align-items:center;
  padding:2px 5px;
  border-radius:999px;
  background:#e9f1fb;
  color:#5a708d;
  font-size:6px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}
.topology-tree-nap-code{
  font-size:8px;
  font-weight:900;
  word-break:break-word;
}
.topology-detail-pane{
  display:grid;
  gap:8px;
}
.topology-tree-page .noc-hero{
  padding:8px 10px;
}
.topology-tree-page .coverage-hero-copy h1{
  font-size:18px;
}
.topology-tree-page .coverage-status-strip{
  gap:6px;
}
.topology-tree-page .coverage-status-strip > div{
  padding:6px 8px;
}
.topology-detail-card{
  display:grid;
  gap:8px;
  padding:8px;
  border:1px solid #d7e5f3;
  border-radius:10px;
  background:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.topology-detail-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.topology-detail-title{
  font-size:16px;
  font-weight:900;
  color:#102033;
  line-height:1.1;
}
.topology-detail-path{
  margin-top:2px;
  font-size:10px;
  color:#5f7188;
}
.topology-detail-summary{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:6px;
  font-size:10px;
  font-family:Inter,"Segoe UI",Tahoma,Arial,sans-serif;
  color:#47607c;
}
.topology-detail-summary span,
.topology-detail-meta-row span{
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:8px;
  font-weight:400;
  color:#7b8da5;
  display:block;
  margin-bottom:1px;
}
.topology-detail-summary strong,
.topology-detail-meta-row strong{
  font-size:11px;
  font-weight:500;
  color:#102033;
}
.topology-detail-actions{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  justify-content:flex-end;
  font-family:Inter,"Segoe UI",Tahoma,Arial,sans-serif;
}
.topology-detail-actions .btn{
  min-height:24px;
  height:24px;
  padding:3px 8px;
  font-size:9px;
}
.topology-cleanup-form{
  display:inline-flex;
  margin:0;
}
.topology-cleanup-form .btn{
  min-height:24px;
  height:24px;
  padding:3px 8px;
  font-size:9px;
}
.btn:disabled,
.btn[disabled]{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
}
.topology-delete-reason{
  display:block;
  margin-top:2px;
  font-size:8px;
  line-height:1.2;
  color:#7b8da5;
  max-width:180px;
}
.topology-delete-state{
  display:block;
  margin-top:2px;
  font-size:8px;
  line-height:1.2;
  color:#355b93;
  font-weight:800;
}
.topology-delete-state-allowed{
  color:#1f7a42;
}
.topology-cleanup-review-summary{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:6px;
  margin-top:8px;
}
.topology-cleanup-review-summary > div{
  display:grid;
  gap:2px;
  padding:7px 8px;
  border:1px solid #dbe7f5;
  border-radius:8px;
  background:#f8fbff;
}
.topology-cleanup-review-summary span{
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#7b8da5;
  font-weight:900;
}
.topology-cleanup-review-summary strong{
  font-size:13px;
  color:#102033;
  line-height:1.1;
}
.topology-cleanup-review-table-wrap{
  margin-top:8px;
  overflow:auto;
}
.topology-cleanup-review-table{
  width:100%;
  min-width:560px;
  border-collapse:collapse;
  font-size:10px;
}
.topology-cleanup-review-table th,
.topology-cleanup-review-table td{
  padding:6px 7px;
  border-bottom:1px solid #e4edf6;
  text-align:left;
  vertical-align:top;
}
.topology-cleanup-review-table th{
  color:#5f83b0;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:8px;
  font-weight:900;
}
.profile-optical-card{
  margin-top:8px;
  padding:10px;
  border:1px solid #dbe7f5;
  border-radius:10px;
  background:linear-gradient(180deg,#ffffff 0%, #f8fbff 100%);
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.profile-optical-grid{
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:6px;
}
.profile-optical-grid > div{
  display:grid;
  gap:2px;
  padding:7px 8px;
  border:1px solid #e1ebf7;
  border-radius:8px;
  background:#fff;
}
.profile-optical-grid span{
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#7b8da5;
  font-weight:900;
}
.profile-optical-grid strong{
  font-size:11px;
  color:#102033;
  line-height:1.2;
}
.topology-port-table-actions .topology-port-action-form,
.topology-selected-port-actions .topology-cleanup-form{
  display:inline;
  margin:0;
}
.profile-toolbar-form,
.client-action-form{
  display:inline-flex;
  margin:0;
}
.profile-toolbar-form .btn,
.client-action-form .btn{
  min-height:24px;
  height:24px;
  padding:3px 8px;
  font-size:9px;
}
.topology-detail-meta-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:6px;
  padding:8px;
  border:1px solid #e1ebf7;
  border-radius:8px;
  background:#f8fbff;
  font-family:Inter,"Segoe UI",Tahoma,Arial,sans-serif;
}
.topology-detail-meta-row > div{
  min-width:0;
}
.topology-detail-children{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
}
.topology-detail-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 7px;
  border:1px solid #dbe7f5;
  border-radius:999px;
  background:#f8fbff;
  color:#173a63;
  text-decoration:none;
  font-size:9px;
  font-weight:500;
  font-family:Inter,"Segoe UI",Tahoma,Arial,sans-serif;
}
.topology-detail-chip em{
  font-style:normal;
  color:#7b8da5;
  font-size:8px;
  font-weight:400;
}
.topology-port-focus{
  display:grid;
  gap:6px;
  padding:8px;
  border:1px solid #dbe7f5;
  border-radius:8px;
  background:#f8fbff;
}
.topology-port-focus-head{
  display:flex;
  justify-content:space-between;
  gap:6px;
  align-items:center;
}
.topology-port-focus-head strong{
  font-size:11px;
  color:#102033;
}
.topology-port-focus-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:6px;
}
.topology-port-focus-grid span{
  display:block;
  font-size:8px;
  text-transform:uppercase;
  color:#7b8da5;
  letter-spacing:.03em;
  margin-bottom:1px;
}
.topology-port-focus-grid strong{
  font-size:10px;
  color:#102033;
}
.topology-port-focus-grid a{
  color:#246bfe;
  text-decoration:none;
  font-weight:800;
}
.topology-port-grid-diagram{
  grid-template-columns:repeat(auto-fit,minmax(92px,1fr));
  gap:5px;
  padding:0;
}
.topology-port-box-diagram{
  min-height:50px;
  padding:4px 5px 4px;
  border-radius:7px;
  box-shadow:none;
  gap:1px;
}
.topology-port-box-diagram.is-selected{
  border-color:#2563eb;
  box-shadow:0 0 0 1px rgba(37,99,235,.12);
}
.topology-port-box-diagram .topology-port-head{
  align-items:center;
}
.topology-port-box-diagram .topology-port-label{
  font-size:9px;
  line-height:1.15;
}
.topology-port-box-diagram .topology-port-submeta{
  font-size:8px;
  line-height:1.1;
}
.topology-port-mini-links{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  font-size:8px;
  margin-top:1px;
}
.topology-port-mini-links a{
  color:#246bfe;
  text-decoration:none;
  font-weight:800;
}
.topology-port-mini-links a:hover{
  text-decoration:underline;
}
.topology-summary-hero{
  grid-template-columns:minmax(280px,1fr) minmax(280px,1fr);
  align-items:end;
}
.topology-summary-strip{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px;
  width:100%;
}
.topology-summary-strip > div{
  display:grid;
  gap:2px;
  padding:6px 7px;
  border:1px solid #d7e5f3;
  border-radius:8px;
  background:linear-gradient(180deg,#ffffff 0%, #f8fbff 100%);
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.topology-summary-strip > div:first-child{
  border-color:#8ebfff;
  background:linear-gradient(180deg,#eef5ff 0%, #ffffff 100%);
  box-shadow:0 1px 3px rgba(47,137,255,.10);
}
.topology-summary-strip span{
  font-size:7px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#7b8da5;
  font-weight:900;
}
.topology-summary-strip strong{
  font-size:12px;
  line-height:1.1;
  color:#102033;
}
.topology-router-select-card{
  display:grid;
  gap:3px;
}
.topology-router-select-card form{
  margin:0;
}
.topology-router-select-card select{
  width:100%;
  min-width:0;
  height:28px;
  min-height:28px;
  padding:4px 8px;
  border:1px solid #c7ddf6;
  border-radius:7px;
  background:#fff;
  font-size:11px;
  color:#102033;
}
.topology-layout-dashboard{
  grid-template-columns:minmax(280px, 320px) minmax(0, 1fr);
  gap:8px;
}
.topology-tree-sidebar-dashboard{
  padding:6px;
  gap:6px;
}
.topology-tree-search-wrap{
  display:grid;
  gap:3px;
}
.topology-tree-search-label{
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#7b8da5;
  font-weight:900;
}
.topology-tree-search{
  width:100%;
  height:26px;
  min-height:26px;
  padding:3px 7px;
  border:1px solid #d6e2f0;
  border-radius:8px;
  background:#f8fbff;
  font-size:11px;
  color:#102033;
}
.topology-tree-root-label{
  display:inline-flex;
  align-items:center;
  padding:2px 7px;
  border-radius:999px;
  background:#eaf2ff;
  color:#355b93;
  font-size:8px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
  width:max-content;
}
.topology-tree-branch{
  display:grid;
  gap:3px;
}
.topology-tree-row{
  display:flex;
  align-items:center;
  gap:4px;
  min-width:0;
  position:relative;
}
.topology-tree-row-actions{
  display:inline-flex;
  align-items:center;
  gap:3px;
  margin-left:auto;
  flex:0 0 auto;
}
.topology-inline-action-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:18px;
  height:18px;
  padding:0 6px;
  border:1px solid #c7ddf6;
  border-radius:999px;
  background:#edf5ff;
  color:#2456a8;
  font-size:7px;
  font-weight:900;
  text-decoration:none;
  line-height:1;
  white-space:nowrap;
}
.topology-inline-action-btn:hover{
  background:#deebff;
  border-color:#7fb2ff;
  color:#173a63;
}
.topology-tree-row-parent,
.topology-tree-row-child,
.topology-tree-row-nap{
  width:100%;
}
.topo-chevron-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  padding:0;
  border:1px solid #b8cbe4;
  border-radius:6px;
  background:linear-gradient(180deg,#ffffff 0%, #eff6ff 100%);
  color:#2f5f9d;
  font-size:12px;
  font-weight:900;
  line-height:1;
  flex:0 0 auto;
  cursor:pointer;
  box-shadow:0 1px 1px rgba(15,23,42,.04);
  position:relative;
}
.topo-chevron-btn span{
  display:block;
  width:0;
  height:0;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  border-left:6px solid #2f5f9d;
  transform:translateX(1px);
}
.topo-chevron-btn.tree-toggle.is-expanded span,
.topology-tree-branch.is-expanded > .topology-tree-row-parent .topo-chevron-btn span,
.topology-tree-child-block.is-expanded > .topology-tree-row-child .topo-chevron-btn span,
.topology-tree-nap-block.is-expanded > .topology-tree-row-nap .topo-chevron-btn span{
  border-left-color:transparent;
  border-top:6px solid #1d4ed8;
  border-right:6px solid transparent;
  border-bottom:0;
  transform:translateY(1px);
}
.topo-chevron-btn:hover{
  background:linear-gradient(180deg,#f8fbff 0%, #eaf3ff 100%);
  border-color:#7fb2ff;
  box-shadow:0 0 0 2px rgba(37,99,235,.08);
}
.topo-chevron-btn.is-expanded,
.topology-tree-branch.is-expanded > .topology-tree-row-parent .topo-chevron-btn,
.topology-tree-child-block.is-expanded > .topology-tree-row-child .topo-chevron-btn,
.topology-tree-nap-block.is-expanded > .topology-tree-row-nap .topo-chevron-btn{
  background:linear-gradient(180deg,#eef5ff 0%, #dfeaff 100%);
  border-color:#5b8ee8;
  color:#1d4ed8;
  box-shadow:0 0 0 1px rgba(37,99,235,.12);
}
.topo-chevron-btn.tree-toggle-spacer{
  visibility:hidden;
}
.topology-tree-row::before{
  content:'';
  position:absolute;
  left:10px;
  top:50%;
  width:9px;
  height:1px;
  background:#c7d6ea;
  transform:translateY(-50%);
}
.topology-tree-child-block,
.topology-tree-nap-block{
  display:grid;
  gap:4px;
  padding-left:10px;
  border-left:1px solid #d7e5f3;
  margin-left:12px;
}
.topology-tree-branch.is-collapsed > .topology-tree-children,
.topology-tree-child-block.is-collapsed > .topology-tree-children,
.topology-tree-nap-block.is-collapsed > .topology-tree-port-mini-list{
  display:none;
}
.topology-tree-branch.is-expanded > .topology-tree-row-parent::before,
.topology-tree-child-block.is-expanded > .topology-tree-row-child::before,
.topology-tree-nap-block.is-expanded > .topology-tree-row-nap::before{
  background:#9ebce4;
}
.topology-tree-nap-block.is-selected > .topology-tree-nap-link{
  border-color:#2563eb;
  background:#eef5ff;
  box-shadow:0 0 0 1px rgba(37,99,235,.12);
}
.topology-tree-badge-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#dbe7f5;
  color:#355b93;
  font-size:8px;
  font-weight:900;
  line-height:1;
}
.topology-tree-capacity-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background:#eaf8ef;
  color:#21713f;
  font-size:8px;
  font-weight:900;
  line-height:1;
}
.tree-status-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(255,255,255,.7);
}
.tree-status-dot-lcp{background:#7c3aed}
.tree-status-dot-nap{background:#2563eb}
.tree-status-dot-occupied{background:#16a34a}
.tree-status-dot-available{background:#94a3b8}
.topology-tree-port-mini-list{
  display:grid;
  gap:3px;
  margin-left:8px;
  padding-left:8px;
  border-left:1px solid #d7e5f3;
}
.topology-tree-port-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:4px;
  margin-left:8px;
  padding-left:8px;
  border-left:1px solid #d7e5f3;
}
.topology-tree-port-card{
  display:grid;
  gap:2px;
  padding:5px 6px;
  border:1px solid #dfe7f2;
  border-radius:8px;
  background:#f8fbff;
  color:#173a63;
  text-decoration:none;
  min-width:0;
  box-shadow:0 1px 1px rgba(15,23,42,.03);
}
.topology-tree-port-card.status-online{border-left:4px solid #16a34a;background:#f1fff5}
.topology-tree-port-card.status-offline{border-left:4px solid #f97316;background:#fff7ef}
.topology-tree-port-card.status-expired{border-left:4px solid #dc2626;background:#fff6f6}
.topology-tree-port-card.status-reserved{border-left:4px solid #8b5cf6;background:#faf5ff}
.topology-tree-port-card.status-vacant{border-left:4px solid #94a3b8;background:#fafcff}
.topology-tree-port-card.is-selected{
  border-color:#2563eb;
  box-shadow:0 0 0 1px rgba(37,99,235,.12);
}
.topology-tree-port-card-head{
  display:flex;
  justify-content:space-between;
  gap:4px;
  align-items:flex-start;
}
.topology-tree-port-mini-label{
  font-size:8px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:#102033;
}
.topology-tree-port-card-client{
  font-size:9px;
  font-weight:800;
  line-height:1.15;
  color:#173a63;
  word-break:break-word;
}
.topology-tree-port-card-submeta{
  font-size:8px;
  line-height:1.15;
  color:#64748b;
  word-break:break-word;
}
.topology-tree-port-empty{
  display:flex;
  gap:4px;
  align-items:center;
  flex-wrap:wrap;
  padding:5px 6px;
  border:1px dashed #cfd9e6;
  border-radius:8px;
  background:#f8fbff;
  font-size:9px;
  color:#475569;
}
.topology-tree-port-empty a{
  color:#246bfe;
  text-decoration:none;
  font-weight:800;
}
.topology-tree-port-row{
  display:flex;
  align-items:center;
  gap:5px;
  padding:3px 6px;
  border:1px solid #e0e9f4;
  border-radius:6px;
  background:#f8fbff;
  color:#173a63;
  text-decoration:none;
  font-size:9px;
  line-height:1.2;
  min-width:0;
}
.topology-tree-port-row.is-selected{
  border-color:#2563eb;
  background:#eef5ff;
  box-shadow:0 0 0 1px rgba(37,99,235,.12);
}
.topology-tree-port-mini-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.topology-tree-sidebar.is-collapsed .topology-tree-children,
.topology-tree-sidebar.is-collapsed .topology-tree-port-mini-list{
  display:none;
}
.topology-collapse-btn{
  justify-self:start;
  min-height:24px;
  height:24px;
  padding:3px 8px;
  font-size:9px;
}
.topology-tree-control-row{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}
.topology-detail-pane-dashboard{
  display:grid;
  gap:8px;
}
.topology-dashboard-card{
  display:grid;
  gap:8px;
}
.topology-detail-head-dashboard{
  align-items:flex-start;
}
.topology-detail-meta-row-dashboard{
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.topology-mini-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
  padding:8px;
  border:1px solid #dfe8f3;
  border-radius:8px;
  background:#f8fbff;
}
.topology-mini-stats > div{
  display:grid;
  gap:2px;
}
.topology-mini-stats span{
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#7b8da5;
  font-weight:900;
}
.topology-mini-stats strong{
  font-size:12px;
  color:#102033;
}
.topology-generation-strip{
  display:flex;
  align-items:flex-start;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.topology-generation-form .btn{
  min-height:28px;
  height:28px;
  padding:4px 10px;
  font-size:10px;
}
.topology-generation-note{
  padding:6px 10px;
  margin:0;
  font-size:11px;
  line-height:1.35;
}
.topology-port-table-wrap{
  overflow-x:auto;
  border:1px solid #d8e5f4;
  border-radius:8px;
  background:#fff;
}
.topology-port-table{
  width:100%;
  min-width:760px;
  border-collapse:collapse;
  font-family:Inter,"Segoe UI",Tahoma,Arial,sans-serif;
}
.topology-port-table th,
.topology-port-table td{
  padding:6px 8px;
  border-bottom:1px solid #e8eef6;
  vertical-align:top;
  font-size:10px;
  line-height:1.25;
}
.topology-port-table th{
  background:#f3f8ff;
  color:#56708d;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:8px;
  font-weight:400;
  font-family:Inter,"Segoe UI",Tahoma,Arial,sans-serif;
}
.topology-port-row.is-selected{
  background:#eef5ff;
}
.topology-port-cell-port{
  min-width:88px;
}
.topology-port-link{
  color:#173a63;
  font-weight:400;
  text-decoration:none;
}
.topology-port-label-text{
  color:#6b7f97;
  font-size:8px;
  line-height:1.25;
  margin-top:2px;
}
.topology-port-cell-subscriber strong,
.topology-port-last-seen div:first-child{
  font-size:10px;
  color:#102033;
  font-weight:400;
}
.topology-port-submeta{
  color:#6b7f97;
  font-size:8px;
  line-height:1.2;
  font-family:Inter,"Segoe UI",Tahoma,Arial,sans-serif;
  font-weight:400;
}
.topology-port-table-actions{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}
.topology-port-table-actions a{
  color:#246bfe;
  text-decoration:none;
  font-size:11px;
  font-weight:400;
  font-family:Tahoma,"Segoe UI",Arial,sans-serif;
  letter-spacing:0;
}
.topology-selected-port-panel{
  display:grid;
  gap:6px;
  padding:6px;
  border:1px solid #d8e5f4;
  border-radius:10px;
  background:linear-gradient(180deg,#fff 0%, #f8fbff 100%);
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  font-family:Inter,"Segoe UI",Tahoma,Arial,sans-serif;
}
.topology-selected-port-head{
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:flex-start;
}
.topology-selected-port-title{
  font-size:13px;
  font-weight:400;
  color:#102033;
  line-height:1.1;
}
.topology-selected-port-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  gap:4px;
}
.topology-selected-port-grid > div{
  padding:4px 5px;
  border:1px solid #e2eaf5;
  border-radius:8px;
  background:#fff;
}
.topology-selected-port-grid span{
  display:block;
  font-size:6px;
  text-transform:uppercase;
  color:#7b8da5;
  letter-spacing:.04em;
  margin-bottom:1px;
  font-weight:400;
}
.topology-selected-port-grid strong{
  font-size:8px;
  color:#102033;
  word-break:break-word;
  font-weight:400;
}
.topology-selected-port-actions{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
.topology-selected-port-actions .btn{
  min-height:20px;
  height:20px;
  padding:1px 6px;
  font-size:9px;
  font-family:Tahoma,"Segoe UI",Arial,sans-serif;
  font-weight:400;
  letter-spacing:0;
}
.topology-selected-port-empty{
  margin:0;
}
.topology-diagram{
  display:grid;
  gap:14px;
}
.topology-diagram-block{
  display:grid;
  justify-items:center;
  gap:8px;
  padding:8px 6px 12px;
  border:1px solid #d7e5f3;
  border-radius:12px;
  background:linear-gradient(180deg,#fff 0%, #f7fbff 100%);
  box-shadow:0 1px 2px rgba(15,23,42,.05);
}
.topology-diagram-node{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:10px;
  width:min(100%, 880px);
  border:1px solid #d7e5f3;
  border-radius:10px;
  padding:8px 10px;
  box-shadow:0 1px 1px rgba(15,23,42,.04);
  background:#fff;
}
.topology-diagram-noc{
  width:min(100%, 540px);
  background:linear-gradient(180deg,#15213a 0%, #101827 100%);
  border-color:#243147;
  color:#f8fbff;
}
.topology-diagram-lcp{
  width:min(100%, 620px);
  background:linear-gradient(180deg,#f6f8ff 0%, #edf2ff 100%);
  border-left:4px solid #6d28d9;
}
.topology-diagram-nap{
  width:min(100%, 860px);
  background:linear-gradient(180deg,#f8fbff 0%, #f3f8ff 100%);
  border-left:4px solid #2563eb;
}
.topology-diagram-node-body{
  min-width:0;
  display:grid;
  gap:2px;
}
.topology-diagram-kicker{
  font-size:8px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#7b8da5;
}
.topology-diagram-noc .topology-diagram-kicker{
  color:#c8d6ea;
}
.topology-diagram-code{
  font-size:14px;
  font-weight:900;
  line-height:1.1;
  color:#102033;
  word-break:break-word;
}
.topology-diagram-noc .topology-diagram-code{
  color:#fff;
}
.topology-diagram-name{
  font-size:10px;
  font-weight:700;
  color:#47607c;
  line-height:1.2;
  word-break:break-word;
}
.topology-diagram-noc .topology-diagram-name{
  color:#cfe0f7;
}
.topology-diagram-meta{
  font-size:9px;
  color:#6b7f97;
  line-height:1.25;
  word-break:break-word;
}
.topology-diagram-noc .topology-diagram-meta{
  color:#a8bbd6;
}
.topology-diagram-actions{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  gap:5px;
  flex-wrap:wrap;
  margin-left:auto;
}
.topology-diagram-actions .btn{
  min-height:22px;
  height:22px;
  padding:2px 6px;
  font-size:8px;
  line-height:1.1;
}
.topology-diagram-connector{
  width:2px;
  min-height:18px;
  background:linear-gradient(180deg,rgba(37,99,235,.85),rgba(37,99,235,.18));
  border-radius:999px;
}
.topology-diagram-connector-small{
  min-height:12px;
}
.topology-lcp-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:12px;
  width:100%;
}
.topology-lcp-column{
  display:grid;
  justify-items:center;
  gap:8px;
}
.topology-nap-stack{
  display:grid;
  gap:10px;
  width:100%;
}
.topology-nap-panel{
  display:grid;
  gap:8px;
  width:100%;
  padding:8px 8px 10px;
  border:1px solid #d7e5f3;
  border-radius:10px;
  background:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.topology-port-grid-diagram{
  grid-template-columns:repeat(auto-fit,minmax(92px,1fr));
  gap:6px;
  padding:0;
}
.topology-port-box-diagram{
  min-height:60px;
  padding:6px 6px 5px;
  border-radius:8px;
  box-shadow:none;
  gap:2px;
}
.topology-port-box-diagram .topology-port-head{
  align-items:center;
}
.topology-port-actions-inline{
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  margin-top:2px;
}
.topology-port-actions-inline .btn{
  width:auto;
  min-width:0;
}
.topology-port-actions-inline .port-status-form{
  margin:0;
}
.port-tile{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px;
  border:1px solid #d8e5f4;
  border-radius:9px;
  background:linear-gradient(180deg,#fff 0%, #f8fbff 100%);
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  min-width:0;
}
.port-tile.status-available{border-left:4px solid #16a34a}
.port-tile.status-occupied{border-left:4px solid #f97316}
.port-tile.status-reserved{border-left:4px solid #8b5cf6}
.port-tile.status-damaged{border-left:4px solid #dc2626}
.port-tile.status-inactive{border-left:4px solid #64748b}
.port-tile-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:6px;
}
.port-tile-number{
  font-size:11px;
  font-weight:900;
  color:#0f172a;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.port-tile-label{
  font-size:11px;
  font-weight:800;
  color:#173a63;
  line-height:1.2;
  word-break:break-word;
}
.port-tile-meta{
  display:grid;
  gap:2px;
}
.port-tile-meta span{
  color:#64748b;
  font-size:9px;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:.03em;
}
.port-tile-meta strong{
  color:#0f172a;
  font-size:10px;
  line-height:1.25;
  word-break:break-word;
}
.port-tile-notes{
  padding:6px 7px;
  border-radius:6px;
  border:1px solid #e2eaf5;
  background:#fff;
  color:#475569;
  font-size:10px;
  line-height:1.3;
  word-break:break-word;
}
.port-tile-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:2px;
}
.port-tile-actions .btn{
  min-height:24px;
  padding:4px 8px;
  font-size:10px;
}
.port-tile-lock{
  display:block;
  margin:0;
  padding:7px 8px;
  font-size:10px;
  line-height:1.25;
}
.port-detail-disclosure{
  margin-top:10px;
  border:1px solid #d8e5f4;
  border-radius:8px;
  background:#fff;
  overflow:hidden;
}
.port-detail-disclosure > summary{
  cursor:pointer;
  list-style:none;
  padding:8px 10px;
  background:#eef5fb;
  color:#173a63;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.port-detail-disclosure > summary::-webkit-details-marker{
  display:none;
}
.port-detail-disclosure .table-shell{
  border:0;
  border-radius:0;
}
.wizard-steps-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-bottom:10px;
}
.wizard-step-card{
  margin-bottom:0;
}
.wizard-step-card.is-locked{
  opacity:.92;
  border-color:#d8e5f4;
}
.wizard-step-card.is-active{
  border-color:#b9d6f2;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}
.wizard-step-card.is-current{
  border-color:#3b82f6;
  box-shadow:0 12px 28px rgba(59,130,246,.12);
}
.wizard-sequence-panel{
  display:grid;
  gap:8px;
}
.wizard-sequence-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:5px;
}
.wizard-sequence-step{
  display:grid;
  gap:2px;
  padding:7px 8px;
  border:1px solid #d8e5f4;
  border-radius:8px;
  background:#f8fbff;
  box-shadow:0 1px 2px rgba(15,23,42,.03);
  color:#102033;
  text-decoration:none;
}
.wizard-sequence-step:focus-visible{
  outline:2px solid #3b82f6;
  outline-offset:2px;
}
.wizard-sequence-step span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:999px;
  background:#dbeafe;
  color:#173a63;
  font-size:10px;
  font-weight:900;
}
.wizard-sequence-step strong{
  font-size:11px;
  color:#102033;
}
.wizard-sequence-step small{
  font-size:9px;
  color:#64748b;
  line-height:1.2;
}
.wizard-sequence-step.is-active{
  border-color:#93c5fd;
  background:#eff6ff;
}
.wizard-sequence-step.is-current{
  border-color:#3b82f6;
  background:#eaf2ff;
  box-shadow:0 8px 18px rgba(59,130,246,.12);
}
.wizard-sequence-step.is-complete span{
  background:#16a34a;
  color:#fff;
}
.wizard-step-head{
  display:flex;
  gap:6px;
  align-items:flex-start;
  margin-bottom:6px;
}
.wizard-step-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:8px;
  background:#173a63;
  color:#fff;
  font-size:11px;
  font-weight:900;
  flex:0 0 auto;
}
.wizard-step-copy{
  flex:1 1 auto;
  min-width:0;
}
.wizard-select-form{
  display:grid;
  gap:6px;
}
.wizard-select-form label{
  font-size:10px;
}
.wizard-select-form select{
  width:100%;
  margin-top:4px;
}
.wizard-form{
  display:grid;
  gap:6px;
}
.wizard-form .job-field-grid{
  margin-bottom:0;
}
.wizard-form .coverage-map-actions{
  margin-bottom:0;
}
.wizard-form .coordinate-card{
  margin:0;
}
.wizard-form .notice{
  margin-bottom:0;
}
.wizard-port-chip-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(82px,1fr));
  gap:5px;
  margin:5px 0 8px;
}
.wizard-port-chip{
  display:grid;
  gap:1px;
  padding:6px 7px;
  border:1px solid #d8e5f4;
  border-radius:8px;
  background:#f8fbff;
  color:#102033;
  text-decoration:none;
  box-shadow:0 1px 2px rgba(15,23,42,.03);
  min-height:54px;
}
.wizard-port-chip strong{
  font-size:11px;
  font-weight:900;
}
.wizard-port-chip span{
  font-size:10px;
  font-weight:800;
  color:#173a63;
  line-height:1.15;
  word-break:break-word;
}
.wizard-port-chip small{
  font-size:9px;
  color:#64748b;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:.03em;
}
.wizard-port-chip.status-occupied{border-left:4px solid #f97316;background:#fff8ef}
.wizard-port-chip.status-available{border-left:4px solid #22c55e;background:#f0fff4}
.wizard-port-chip.status-reserved{border-left:4px solid #8b5cf6;background:#faf5ff}
.wizard-port-chip.status-damaged{border-left:4px solid #dc2626;background:#fff5f5}
.wizard-port-chip.status-inactive{border-left:4px solid #64748b;background:#f8fafc}
.wizard-port-chip.is-selected{
  outline:2px solid #3b82f6;
  outline-offset:1px;
}
@media (max-width:1050px){
  .wizard-steps-grid{
    grid-template-columns:1fr;
  }
  .wizard-sequence-strip{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media (max-width:1050px){
  .client-map-page .client-map-coverage-canvas{
    height:420px;
    min-height:420px;
  }
  .coverage-legend-grid,
  .coverage-status-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .port-map-grid{
    grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  }
  .topology-port-grid{
    grid-template-columns:repeat(auto-fit,minmax(90px,1fr));
  }
  .topology-layout,
  .topology-layout-dashboard{
    grid-template-columns:260px minmax(0,1fr);
  }
  .topology-summary-hero{
    grid-template-columns:1fr;
  }
  .topology-summary-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .topology-mini-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:760px){
  .client-map-page .client-map-coverage-canvas{
    height:360px;
    min-height:360px;
  }
  .coverage-legend-grid,
  .coverage-status-strip{
    grid-template-columns:1fr;
  }
  .port-map-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .port-line{
    flex-direction:column;
  }
  .port-line-actions{
    width:100%;
    min-width:0;
  }
  .port-inline-assign{
    width:100%;
    min-width:0;
  }
  .port-inline-assign select{
    width:100%;
    min-width:0;
    max-width:none;
  }
  .port-inline-assign .btn{
    width:100%;
  }
  .port-label-form{
    width:100%;
  }
  .port-label-form .btn{
    width:100%;
  }
  .topology-tree-page .noc-hero{
    grid-template-columns:1fr;
  }
  .topology-layout,
  .topology-layout-dashboard{
    grid-template-columns:1fr;
  }
  .topology-tree-sidebar{
    position:static;
  }
  .topology-tree-sidebar-dashboard{
    position:static;
  }
  .topology-tree-root-link,
  .topology-tree-child-link,
  .topology-tree-nap-link{
    padding:4px 5px;
  }
  .topology-tree-row{
    gap:4px;
  }
  .topo-chevron-btn{
    width:21px;
    height:21px;
    font-size:11px;
  }
  .topology-detail-head{
    flex-direction:column;
  }
  .topology-detail-actions{
    width:100%;
    justify-content:flex-start;
  }
  .topology-detail-actions .btn{
    width:auto;
  }
  .wizard-sequence-strip{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .topology-port-grid-diagram{
    grid-template-columns:repeat(auto-fit,minmax(84px,1fr));
  }
  .topology-port-box-diagram{
    min-height:52px;
    padding:4px 4px 3px;
  }
  .topology-summary-strip{
    grid-template-columns:1fr 1fr;
  }
  .topology-port-table{
    min-width:680px;
  }
}
@media (max-width:480px){
  .port-map-grid{
    grid-template-columns:1fr;
  }
  .topology-port-grid-diagram{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .topology-detail-meta-row{
    grid-template-columns:1fr;
  }
  .topology-summary-strip{
    grid-template-columns:1fr;
  }
  .topology-mini-stats{
    grid-template-columns:1fr 1fr;
  }
  .wizard-sequence-strip{
    grid-template-columns:1fr;
  }
  .topology-tree-control-row{
    flex-direction:column;
    align-items:stretch;
  }
  .topology-tree-control-row .topology-collapse-btn{
    width:100%;
  }
}
.map-marker-node{
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:none;
}
.map-marker-shape{
  display:block;
  box-sizing:border-box;
  border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(15,23,42,.2), 0 4px 10px rgba(15,23,42,.18);
}
.map-marker-square{
  width:14px;
  height:14px;
  background:#2563eb;
}
.map-marker-diamond{
  width:14px;
  height:14px;
  background:#7c3aed;
  transform:rotate(45deg);
}
.map-marker-star{
  width:18px;
  height:18px;
  background:#ef4444;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.coverage-map-actions .btn.is-toggle-active{
  background:#173a63;
  border-color:#173a63;
  color:#fff;
}
.coverage-map-actions .btn.secondary.is-toggle-active{
  background:#173a63;
  border-color:#173a63;
  color:#fff;
}
.badge.danger{background:#ffedd5;color:#c2410c}
.job-orders-page{padding-top:4px}
.job-orders-shell{display:grid;gap:10px}
.job-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:20;background:linear-gradient(180deg,rgba(246,249,252,.98),rgba(246,249,252,.92));backdrop-filter:blur(8px)}
.job-header-copy{min-width:0}
.job-header-copy .page-title{margin:0;font-size:24px;line-height:1.1}
.job-header-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.job-filters-panel{position:sticky;top:72px;z-index:18}
.job-filter-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr)) auto;gap:8px;align-items:end}
.job-filter-grid label,.job-details-grid label,.job-modal-section label{background:#f8fbff;border:1px solid #e1ebf7;border-radius:7px;padding:7px;color:#334155;font-size:11px;font-weight:800;text-transform:uppercase}
.job-filter-grid input,.job-filter-grid select,.job-details-grid input,.job-details-grid select,.job-details-grid textarea,.job-modal-section input,.job-modal-section select,.job-modal-section textarea{margin-top:4px;width:100%;font-size:12px;padding:7px 8px}
.job-filter-actions{display:flex;gap:7px;align-items:end;flex-wrap:wrap}
.job-summary-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.job-summary-row .noc-kpi{padding:9px 10px;min-height:unset}
.job-summary-row .noc-kpi strong{font-size:18px}
.job-workspace{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,.95fr);gap:10px;align-items:start}
.job-queue-panel,.job-details-panel{min-width:0}
.sticky-panel-title{position:sticky;top:150px;z-index:15;background:#f6f9fc;padding-bottom:8px}
.job-queue-shell{max-height:calc(100vh - 290px);overflow:auto}
.job-queue-table{width:100%;min-width:1220px;table-layout:auto}
.job-queue-table th,.job-queue-table td{white-space:nowrap;vertical-align:middle}
.job-queue-table tbody tr[data-job-row]{cursor:pointer}
.job-queue-table td:nth-child(5){max-width:220px;overflow:hidden;text-overflow:ellipsis}
.job-queue-table td:nth-child(3){min-width:160px}
.job-action-row,.job-details-actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.job-inline-form{display:inline-flex;margin:0}
.job-inline-form .btn{min-height:30px;height:30px;padding:6px 10px}
.job-details-stack{display:grid;gap:10px}
.job-details-hero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.job-details-hero div{padding:8px 9px;border:1px solid #e1ebf7;border-radius:8px;background:#f8fbff}
.job-details-hero span{display:block;font-size:10px;text-transform:uppercase;font-weight:800;color:#64748b;margin-bottom:4px}
.job-details-hero strong{font-size:13px;color:#10213d}
.job-details-form,.job-modal-form{display:grid;gap:10px}
.job-details-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.job-wide{grid-column:1/-1}
.job-details-actions-secondary{padding-top:2px;border-top:1px solid #e4ebf3}
.job-empty-state{min-height:220px;display:flex;align-items:center;justify-content:center;text-align:center}
.job-modal{position:fixed;inset:0;z-index:1000}
.job-modal-backdrop{position:absolute;inset:0;background:rgba(8,15,30,.55)}
.job-modal-card{position:absolute;right:18px;top:18px;bottom:18px;width:min(760px,calc(100vw - 36px));overflow:auto;background:#f6f9fc;border:1px solid #d8e3ef;border-radius:14px;box-shadow:0 24px 80px rgba(15,23,42,.26);padding:14px}
.job-modal-section{display:grid;gap:8px;margin-top:10px}
.job-modal-section h3{margin:0;color:#173a63;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.job-modal-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px}
.job-modal-actions .btn{min-width:140px}
.job-orders-page .btn.secondary{background:#fff}
.job-hero{grid-template-columns:minmax(260px,.75fr) minmax(520px,1.25fr)}
.job-status-strip{grid-template-columns:repeat(6,minmax(0,1fr))}
.job-kpi-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.job-panel{margin-bottom:8px}
.job-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:8px;align-items:start}
.job-form{display:grid;gap:8px}
.job-field-grid,.job-technical-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.job-field-grid label,.job-technical-grid label{background:#f8fbff;border:1px solid #e1ebf7;border-radius:7px;padding:7px;color:#334155;font-size:11px;font-weight:800;text-transform:uppercase}
.job-field-grid input,.job-field-grid select,.job-field-grid textarea,.job-technical-grid input,.job-technical-grid select,.job-technical-grid textarea{margin-top:4px;width:100%;font-size:12px;padding:7px 8px}
.job-wide{grid-column:1/-1}
.fieldops-details{border:1px solid rgba(5,157,245,.16);border-radius:10px;background:rgba(5,157,245,.03);margin-top:8px;overflow:hidden}
.fieldops-details summary{cursor:pointer;padding:10px 12px;font-weight:600;color:#0b1f3a;list-style-position:inside}
.fieldops-details[open] summary{border-bottom:1px solid rgba(5,157,245,.14)}
.fieldops-details .job-technical-grid{padding:8px}
.fieldops-details .section-note{padding:0 10px 10px;margin:0}
.fieldops-edit-empty{min-height:auto;padding:12px;margin:0}
.job-filter-row{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.job-filter{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:5px 10px;border:1px solid rgba(5,157,245,.18);border-radius:999px;background:rgba(5,157,245,.03);color:#075985;font-size:12px;font-weight:400;line-height:1;white-space:nowrap;cursor:default;font-family:Tahoma,"Segoe UI",Arial,sans-serif}
.job-filter.active{background:rgba(133,255,33,.16);border-color:rgba(133,255,33,.55);color:#14532d}
.job-add-button{margin-left:auto;font-weight:400!important;height:30px;min-height:30px;padding:6px 10px;font-family:Tahoma,"Segoe UI",Arial,sans-serif;font-size:12px}
.job-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.job-table{width:100%;min-width:980px;table-layout:auto}
.job-table th,.job-table td{vertical-align:middle;white-space:nowrap}
.job-table td:nth-child(6){max-width:220px;overflow:hidden;text-overflow:ellipsis}
.job-time-stack{display:grid;gap:2px;font-size:11px;color:#475569;line-height:1.2}
.job-actions{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;min-width:max-content}
.job-actions form{display:inline-flex;margin:0}
.job-actions .btn,.job-actions button,.job-actions a{font-weight:400!important;white-space:nowrap;height:30px;min-height:30px;padding:6px 10px;font-size:12px;line-height:1;display:inline-flex;align-items:center;justify-content:center;font-family:Tahoma,"Segoe UI",Arial,sans-serif;letter-spacing:0}
.staff-create-form{
  display:grid;
  gap:8px;
  margin-top:10px;
}
.staff-workbench{
  display:grid;
  grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:8px;
  align-items:start;
  margin-bottom:8px;
}
.staff-info-grid{
  margin-bottom:8px;
}
.staff-hero{
  margin-bottom:8px;
}
.staff-status-strip{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.staff-panel-access,
.staff-panel-quick{
  min-width:0;
}
.staff-create-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.staff-create-grid label{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  align-self:stretch;
  padding:8px;
  border:1px solid #e1ebf7;
  border-radius:8px;
  background:#f8fbff;
  color:#334155;
  font-size:11px;
  font-weight:400;
  font-family:Tahoma,"Segoe UI",Arial,sans-serif;
}
.staff-create-grid input,
.staff-create-grid select{
  min-height:30px;
  height:30px;
  padding:5px 8px;
  font-size:12px;
  font-family:Tahoma,"Segoe UI",Arial,sans-serif;
}
.staff-create-notes{
  grid-column:1 / -1;
}
.staff-create-grid textarea{
  min-height:72px;
  resize:vertical;
  padding:7px 8px;
  font-size:12px;
  line-height:1.35;
  font-family:Tahoma,"Segoe UI",Arial,sans-serif;
}
.staff-create-form .form-actions{
  justify-content:flex-end;
}
.staff-create-form .btn{
  min-height:30px;
  height:30px;
  padding:6px 10px;
  font-size:12px;
  font-family:Tahoma,"Segoe UI",Arial,sans-serif;
  font-weight:400;
}
.staff-access-summary{
  margin-top:10px;
}
.staff-access-summary .settings-role-summary-card{
  max-width:100%;
}
.staff-access-summary .settings-role-summary-count{
  width:100%;
  white-space:normal;
  line-height:1.4;
  padding:4px 7px;
}
.staff-account-list{
  display:grid;
  gap:8px;
}
.staff-account-row{
  display:block;
  padding:10px 12px;
  border:1px solid #e3ecf7;
  border-radius:10px;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  box-shadow:0 1px 0 rgba(15,23,42,.03);
}
.staff-account-row > summary{
  list-style:none;
}
.staff-account-row > summary::-webkit-details-marker{
  display:none;
}
.staff-account-summary{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  cursor:pointer;
}
.staff-account-row[open]{
  background:linear-gradient(180deg,#ffffff 0%,#f3f8ff 100%);
}
.staff-account-main{
  display:grid;
  gap:3px;
}
.staff-account-main strong{
  font-size:14px;
  font-weight:700;
}
.staff-account-meta strong{
  font-size:13px;
  font-weight:400;
  color:#0f172a;
  font-family:Tahoma,"Segoe UI",Arial,sans-serif;
}
.staff-account-main span{
  font-size:11px;
  font-weight:400;
  color:#64748b;
  font-family:Tahoma,"Segoe UI",Arial,sans-serif;
}
.staff-account-meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
.staff-account-row .staff-inline-form{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  width:100%;
  padding-top:10px;
  border-top:1px solid #e7eef7;
}
.staff-inline-form{
  align-items:start;
}
.staff-inline-form label{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  font-size:11px;
  font-weight:400;
  color:#475569;
  font-family:Tahoma,"Segoe UI",Arial,sans-serif;
}
.staff-inline-form span{
  font-weight:400;
}
.staff-inline-form select{
  min-width:0;
  min-height:30px;
  height:30px;
  padding:5px 8px;
  font-size:12px;
  font-weight:400;
  font-family:Tahoma,"Segoe UI",Arial,sans-serif;
}
.staff-inline-form textarea{
  min-width:0;
  min-height:72px;
  resize:vertical;
  padding:7px 8px;
  font-size:12px;
  line-height:1.35;
  font-family:Tahoma,"Segoe UI",Arial,sans-serif;
}
.staff-inline-password input{
  min-width:0;
  min-height:30px;
  height:30px;
  padding:5px 8px;
  font-size:12px;
  font-weight:400;
  font-family:Tahoma,"Segoe UI",Arial,sans-serif;
}
.staff-inline-notes{
  grid-column:1 / -1;
}
.staff-inline-form .btn{
  grid-column:1 / -1;
  justify-self:end;
  min-height:30px;
  height:30px;
  padding:6px 10px;
  font-size:12px;
  font-weight:400;
  font-family:Tahoma,"Segoe UI",Arial,sans-serif;
}
.staff-role-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid #dbe7f5;
  background:#f8fbff;
  color:#0f172a;
  font-size:11px;
  font-weight:400;
  font-family:Tahoma,"Segoe UI",Arial,sans-serif;
  text-transform:capitalize;
}
.staff-role-admin{background:#e0f2fe;border-color:#7dd3fc;color:#075985}
.staff-role-supervisor{background:#ede9fe;border-color:#c4b5fd;color:#6d28d9}
.staff-role-technician{background:#ecfeff;border-color:#67e8f9;color:#0f766e}
.staff-role-cashier{background:#fef3c7;border-color:#fcd34d;color:#92400e}
.staff-role-csr{background:#dcfce7;border-color:#86efac;color:#166534}
.staff-role-staff{background:#f1f5f9;border-color:#cbd5e1;color:#334155}
.staff-plain-page{
  max-width:1180px;
  margin:0 auto;
  padding:8px 0 14px;
}
.staff-plain-header,
.staff-plain-block{
  margin-bottom:8px;
  padding:6px 0;
  border-bottom:1px solid #eef3f8;
}
.staff-plain-block-tight{
  margin-bottom:6px;
  padding-bottom:6px;
}
.staff-plain-header{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  padding-top:0;
}
.staff-plain-kicker{
  margin:0 0 3px;
  color:#64748b;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.staff-plain-header h1{
  margin:0;
  font-size:22px;
  line-height:1.15;
  color:#102033;
}
.staff-plain-note,
.staff-plain-text{
  margin:5px 0 0;
  color:#52657a;
  font-size:12px;
  line-height:1.45;
}
.staff-plain-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(92px,1fr));
  gap:4px;
  min-width:min(480px,100%);
}
.staff-plain-stats div{
  padding:0;
}
.staff-plain-stats span,
.staff-plain-block-head span,
.staff-plain-list span,
.staff-plain-account span{
  display:block;
  color:#64748b;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.staff-plain-stats strong,
.staff-plain-list strong,
.staff-plain-account strong{
  display:block;
  margin-top:2px;
  color:#102033;
  font-size:13px;
}
.staff-plain-block-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:baseline;
  margin-bottom:6px;
}
.staff-plain-block-head h2{
  margin:0;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#102033;
}
.staff-plain-access{
  margin:8px 0 0;
  color:#102033;
  font-size:12px;
}
.staff-plain-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
}
.staff-plain-form label,
.staff-plain-edit label{
  display:flex;
  flex-direction:column;
  gap:4px;
  color:#52657a;
  font-size:11px;
  font-weight:600;
}
.staff-plain-form input,
.staff-plain-form select,
.staff-plain-form textarea,
.staff-plain-edit input,
.staff-plain-edit select,
.staff-plain-edit textarea{
  min-height:32px;
  padding:6px 8px;
  border:1px solid #cfd9e6;
  border-radius:8px;
  background:#fff;
  color:#102033;
  font-size:12px;
}
.staff-plain-notes{grid-column:1 / -1}
.staff-plain-actions{
  grid-column:1 / -1;
  display:flex;
  justify-content:flex-end;
}
.staff-plain-list{
  display:grid;
  gap:2px;
}
.staff-plain-list div{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:4px 0;
  border-bottom:1px solid #eef3f8;
}
.staff-plain-accounts{
  display:grid;
  gap:4px;
}
.staff-plain-account{
  padding:4px 0;
  border-bottom:1px solid #eef3f8;
}
.staff-plain-account summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
.staff-plain-account summary::-webkit-details-marker{
  display:none;
}
.staff-plain-account-main{
  display:grid;
  gap:2px;
}
.staff-plain-account-meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.staff-plain-edit{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  margin-top:6px;
  padding-top:6px;
  border-top:1px solid #eef3f8;
}
.staff-plain-account-readonly{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
.staff-plain-account-readonly .staff-plain-account-main{
  flex:1 1 auto;
}
.staff-plain-account-readonly .staff-plain-account-meta{
  flex:0 0 auto;
}
.staff-plain-account .staff-plain-actions{
  margin-top:2px;
}
@media (max-width: 900px){
  .staff-plain-header{
    flex-direction:column;
  }
  .staff-plain-stats{
    min-width:0;
    width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .staff-plain-form,
  .staff-plain-edit{
    grid-template-columns:1fr;
  }
  .staff-plain-account summary,
  .staff-plain-account-readonly{
    align-items:flex-start;
    flex-direction:column;
  }
  .staff-plain-account-meta{
    justify-content:flex-start;
  }
}
@media (max-width: 640px){
  .staff-plain-page{
    padding-top:4px;
  }
  .staff-plain-stats{
    grid-template-columns:1fr;
  }
}
.staff-role-unassigned{background:#f8fafc;border-color:#e2e8f0;color:#64748b}
.settings-roles-card{
  margin-top:10px;
}
.settings-roles-form{
  display:grid;
  gap:10px;
}
.settings-role-legend{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.settings-role-legend span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border:1px solid #dbe7f5;
  border-radius:999px;
  background:#f8fbff;
  color:#5f6f86;
  font-size:9px;
  line-height:1.1;
}
.settings-role-legend strong{
  color:#17324d;
  font-weight:700;
}
.settings-role-summary-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
}
.settings-role-summary-card{
  padding:7px 8px;
  border:1px solid #dbe7f5;
  border-radius:8px;
  background:#f8fbff;
  display:grid;
  gap:2px;
}
.settings-role-summary-card strong{
  color:#17324d;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.settings-role-summary-count{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:2px 6px;
  border-radius:999px;
  background:#eaf4ff;
  border:1px solid #cfe2f8;
  color:#0f3b73;
  font-size:9px;
  font-weight:700;
  line-height:1.1;
}
.settings-role-summary-count-inline{
  margin:3px 0 2px;
}
.settings-role-summary-card span{
  color:#64748b;
  font-size:9px;
  line-height:1.25;
}
.settings-roles-presets{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.settings-roles-grid-wrap{
  overflow-x:auto;
}
.settings-roles-grid{
  width:100%;
  min-width:1220px;
  border-collapse:separate;
  border-spacing:0;
  font-family:Tahoma,"Segoe UI",Arial,sans-serif;
}
.settings-roles-grid th,
.settings-roles-grid td{
  padding:7px 8px;
  border-bottom:1px solid #e4edf6;
  text-align:center;
  vertical-align:middle;
  font-size:10px;
}
.settings-roles-grid th{
  position:sticky;
  top:0;
  background:#f3f8ff;
  color:#5f7188;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-weight:400;
}
.settings-roles-grid td:first-child,
.settings-roles-grid th:first-child{
  text-align:left;
  min-width:132px;
  font-weight:700;
  color:#17324d;
}
.settings-roles-grid th:nth-child(2),
.settings-roles-grid td:nth-child(2){
  min-width:120px;
}
.settings-role-desc{
  margin-top:2px;
  color:#64748b;
  font-size:9px;
  line-height:1.25;
  font-weight:400;
  max-width:180px;
}
.settings-permission-matrix-cell{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px;
  min-width:170px;
}
.settings-permission-toggle{
  display:flex;
  align-items:center;
  gap:5px;
  padding:3px 5px;
  border:1px solid #dbe7f5;
  border-radius:6px;
  background:#fff;
  font-size:9px;
  color:#5f6f86;
}
.settings-permission-toggle input{
  margin:0;
  width:12px;
  height:12px;
  accent-color:#0A74F5;
}
.settings-permission-toggle span{
  white-space:nowrap;
}
.settings-roles-grid tbody tr:nth-child(even){
  background:#fbfdff;
}
.settings-role-check{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:18px;
}
.settings-role-check input{
  width:16px;
  height:16px;
  accent-color:#0A74F5;
}
.settings-role-select{
  width:100%;
  min-width:72px;
  min-height:22px;
  padding:2px 4px;
  border:1px solid #c9d9ea;
  border-radius:6px;
  background:#ffffff;
  color:#17324d;
  font-size:9px;
  line-height:1;
  font-family:Tahoma,"Segoe UI",Arial,sans-serif;
}
.settings-role-select:disabled{
  background:#f5f7fa;
  color:#6b7a8f;
}
.settings-roles-grid td:has(input:checked){
  background:#eaf4ff;
}
.settings-roles-grid tr:has(input:checked){
  background:#f6fbff;
}
.settings-role-row-actions{
  display:flex;
  gap:4px;
  justify-content:flex-start;
  align-items:center;
}
.settings-role-row-actions .settings-action-link{
  min-height:22px;
  padding:3px 7px;
  font-size:9px;
}
@media (max-width:1180px){
  .settings-role-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .settings-role-summary-grid{grid-template-columns:1fr}
  .settings-roles-grid th:nth-child(2),
  .settings-roles-grid td:nth-child(2){display:none}
  .settings-permission-matrix-cell{grid-template-columns:1fr}
}
.job-form-grid .noc-panel,
.job-panel{
  padding:8px;
  border-radius:10px;
}
.job-form-grid .noc-panel-title,
.job-panel .noc-panel-title{
  margin-bottom:8px;
  padding-bottom:5px;
}
.job-form-grid .noc-panel-title h2,
.job-panel .noc-panel-title h2{
  font-size:13px;
}
.job-form-grid .noc-panel-title span,
.job-panel .noc-panel-title span{
  font-size:10px;
}
.job-kpi-grid,
.job-status-strip{
  gap:6px;
}
.job-kpi-grid .noc-kpi,
.job-status-strip div{
  padding:7px 8px;
  border-radius:8px;
}
.activation-page{
  box-sizing:border-box;
}
body.activation-surface .admin-page,
body.activation-surface .app-main,
body.activation-surface .page-shell,
body.activation-surface .content-shell{
  box-sizing:border-box;
}
body.activation-surface{
  background:var(--winbox-bg);
  color:var(--winbox-text);
}
.activation-page .noc-hero{
  width:100%;
  box-sizing:border-box;
  margin-bottom:6px;
  padding:8px 10px;
  border:1px solid var(--winbox-border);
  border-radius:10px;
  background:var(--winbox-panel);
  box-shadow:none;
}
.activation-page .noc-hero > div{
  display:grid;
  gap:2px;
  width:100%;
  max-width:none;
}
.activation-page .noc-hero .noc-eyebrow{
  margin:0;
}
.activation-page .noc-hero h1{
  font-size:16px;
  line-height:1.2;
}
.activation-page .noc-hero .hero-subtitle{
  margin-top:0;
  font-size:11px;
  line-height:1.3;
  color:var(--winbox-muted);
  max-width:100%;
}
.activation-status-strip{
  display:none;
}
.activation-status-strip div{
  padding:8px 9px;
  border-radius:8px;
  background:var(--winbox-panel-soft);
  border:1px solid var(--winbox-border);
}
.activation-status-strip span{
  margin-bottom:2px;
  font-size:10px;
  text-transform:uppercase;
  font-weight:800;
  color:var(--winbox-muted);
}
.activation-status-strip strong{
  font-size:12px;
  color:var(--winbox-text);
}
.activation-kpi-grid{
  width:100%;
  box-sizing:border-box;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:5px;
  margin-bottom:5px;
}
.activation-page .noc-kpi{
  padding:5px 6px;
  min-height:44px;
  background:var(--winbox-panel);
  border:1px solid var(--winbox-border);
  box-shadow:none;
}
.activation-page .noc-kpi span{
  margin-bottom:3px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0;
  color:var(--winbox-muted);
}
.activation-page .noc-kpi strong{
  font-size:12px;
}
.activation-workspace{
  width:100%;
  max-width:1440px;
  margin:0 auto;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(560px,1.12fr);
  gap:6px;
  align-items:start;
}
.activation-page .activation-panel{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.activation-panel{
  margin-bottom:0;
}
.activation-request-panel{
  width:100%;
  min-width:0;
}
.activation-request-panel,
.activation-form-panel{
  height:100%;
}
.activation-form-panel{
  width:100%;
}
.activation-page .noc-panel{
  padding:5px 6px;
  background:var(--winbox-panel);
  border:1px solid var(--winbox-border);
  box-shadow:none;
}
.activation-hero{
  align-items:start;
  gap:5px;
}
.activation-hero-meta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px;
  min-width:0;
}
.activation-hero-chip{
  display:grid;
  gap:2px;
  padding:5px 6px;
  border:1px solid var(--winbox-border);
  border-radius:8px;
  background:var(--winbox-panel-soft);
  min-width:0;
}
.activation-hero-chip span{
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--winbox-muted);
  font-weight:800;
}
.activation-hero-chip strong{
  font-size:10px;
  color:var(--winbox-text);
  word-break:break-word;
}
.activation-field-hint{
  margin-top:3px;
  font-size:9px;
  color:var(--winbox-muted);
  text-transform:none;
  font-weight:700;
  letter-spacing:0;
}
.activation-page .noc-panel-title{
  margin-bottom:6px;
  padding-bottom:6px;
  background:var(--winbox-panel-soft);
  border-bottom:1px solid var(--winbox-border);
}
.activation-page .noc-panel-title h2{
  font-size:12px;
}
.activation-page .noc-panel-title span{
  font-size:10px;
}
.activation-toolbar{
  display:grid;
  gap:3px;
  margin-bottom:5px;
}
.activation-workflow-strip{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  align-items:center;
}
.activation-workflow-strip span{
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:3px 7px;
  border:1px solid var(--winbox-border);
  border-radius:999px;
  background:var(--winbox-panel-soft);
  color:var(--winbox-text);
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.activation-toolbar-note{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  align-items:center;
  padding:4px 6px;
  border:1px solid var(--winbox-border);
  border-radius:7px;
  background:var(--winbox-panel-soft);
  color:var(--winbox-muted);
  font-size:10px;
  font-weight:700;
  line-height:1.25;
}
.activation-toolbar-note strong{
  text-transform:uppercase;
  font-size:9px;
  letter-spacing:.03em;
  color:var(--winbox-text);
}
.activation-table-shell{
  width:100%;
  overflow:auto;
  border:1px solid var(--winbox-border);
  border-radius:8px;
  background:var(--winbox-panel);
  max-height:66vh;
}
.activation-table{
  width:100%;
  table-layout:fixed;
}
.activation-table thead th{
  position:sticky;
  top:0;
  z-index:2;
  padding:5px 5px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0;
  color:var(--winbox-muted);
  border-bottom:1px solid var(--winbox-border);
  background:var(--winbox-panel-soft);
}
.activation-table td{
  padding:4px 5px;
  font-size:9px;
  vertical-align:top;
  white-space:normal;
  word-break:break-word;
  line-height:1.25;
  border-bottom:1px solid #dde5ec;
}
.activation-table tbody tr.is-selected{
  background:#eef6ff;
}
.activation-table tbody tr:hover{
  background:#f7fbff;
}
.activation-table td strong{
  display:block;
  font-size:8px;
  color:var(--winbox-text);
}
.activation-cell-subline{
  margin-top:1px;
  font-size:7px;
  color:var(--winbox-muted);
  word-break:break-word;
}
.activation-col-date{width:11%}
.activation-col-client{width:17%}
.activation-col-area{width:15%}
.activation-col-plan{width:13%}
.activation-col-router{width:13%}
.activation-col-tech{width:10%}
.activation-col-status{width:9%}
.activation-col-actions{width:12%}
.activation-actions{
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:wrap;
  min-width:0;
}
.activation-actions form{
  display:inline-flex;
  margin:0;
}
.activation-actions .btn,
.activation-actions a{
  height:22px;
  min-height:22px;
  padding:2px 5px;
  font-size:8px;
  line-height:1;
}
.activation-actions .icon-btn{
  min-width:22px;
  width:22px;
  padding:0;
  justify-content:center;
  font-size:10px;
  font-weight:800;
}
.activation-actions .btn[disabled]{
  opacity:.55;
}
.activation-form-panel{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.activation-form{
  display:grid;
  gap:1px;
  min-height:0;
}
.activation-form-section{
  display:grid;
  gap:1px;
  padding:3px 3px;
  border:1px solid var(--winbox-border);
  border-radius:8px;
  background:var(--winbox-panel-soft);
}
.activation-form-section-title{
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--winbox-text);
  padding-bottom:2px;
  border-bottom:1px solid var(--winbox-border);
}
.activation-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
}
.activation-form-grid label{
  background:var(--winbox-panel-soft);
  border:1px solid var(--winbox-border);
  border-radius:7px;
  padding:2px 3px;
  color:var(--winbox-text);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  line-height:1.2;
}
.activation-form-grid input,
.activation-form-grid select,
.activation-form-grid textarea{
  margin-top:2px;
  width:100%;
  font-size:9px;
  padding:1px 3px;
  min-height:16px;
  line-height:1.2;
  box-sizing:border-box;
}
.activation-form-grid textarea{
  min-height:16px;
}
.activation-wide{
  grid-column:1/-1;
}
.activation-form-section:nth-of-type(1) .activation-form-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.activation-form-section:nth-of-type(2) .activation-form-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.activation-form-section:nth-of-type(3) .activation-form-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.activation-form-panel .activation-next-step{
  margin-top:0;
}
.activation-form-actions{
  justify-content:flex-start;
  margin-top:0;
}
.activation-form-panel .notice.warning{
  margin:0;
  padding:4px 6px;
  line-height:1.2;
}
.activation-hero .hero-subtitle{
  max-width:760px;
}
.activation-hero-meta{
  align-self:start;
}
.activation-hero .hero-subtitle{
  max-width:760px;
}
.activation-next-step .notice{
  margin:0;
  background:var(--winbox-panel-soft);
  border-color:var(--winbox-border);
}
.payment-proofs-page{padding-top:6px}
.proof-hero{grid-template-columns:minmax(260px,.75fr) minmax(520px,1.25fr)}
.proof-status-strip{grid-template-columns:repeat(6,minmax(0,1fr))}
.proof-kpi-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.proof-panel{margin-bottom:10px}
.proof-filter-row{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 9px}
.proof-filter{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:5px 10px;border:1px solid rgba(5,157,245,.18);border-radius:999px;background:rgba(5,157,245,.03);color:#075985;font-size:11px;font-weight:500;line-height:1;white-space:nowrap;cursor:default}
.proof-filter.active{background:rgba(133,255,33,.16);border-color:rgba(133,255,33,.55);color:#14532d}
.proof-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.proof-table{width:100%;min-width:1180px;table-layout:auto}
.proof-table th,.proof-table td{vertical-align:middle;white-space:nowrap}
.proof-table td:nth-child(8),.proof-table td:nth-child(9){max-width:180px;overflow:hidden;text-overflow:ellipsis}
.proof-table td:last-child{min-width:250px;white-space:normal}
.proof-action-cell{min-width:280px}
.proof-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0;max-width:100%;margin:0}
.proof-actions-compact{align-items:flex-start}
.proof-actions select{height:30px;min-height:30px;padding:5px 8px;font-size:11px}
.proof-actions input[type=number]{width:96px;height:30px;min-height:30px;padding:5px 8px;font-size:11px}
.proof-actions .btn,.proof-actions button{font-weight:500!important;white-space:nowrap;height:30px;min-height:30px;padding:6px 10px;font-size:11px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.proof-print-btn{align-self:flex-start}
.proof-actions-stack{display:grid;gap:6px;justify-items:start;max-width:100%}
.proof-inline-label{display:grid;gap:4px;color:#334155;font-size:10px;font-weight:800;text-transform:uppercase}
.proof-inline-label select,.proof-inline-label input[type=number]{min-width:100px;height:30px;min-height:30px;padding:5px 8px;font-size:11px}
.proof-actions-stack .badge.approved{align-self:start}
.settings-page{padding-top:6px}
.settings-hero{grid-template-columns:minmax(260px,.75fr) minmax(520px,1.25fr)}
.settings-status-strip{grid-template-columns:repeat(6,minmax(0,1fr))}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:10px}
.settings-panel{margin-bottom:0}
.settings-list{display:grid;gap:7px}
.settings-list div{display:grid;grid-template-columns:minmax(150px,.55fr) minmax(0,1fr);gap:8px;align-items:center;background:#f8fbff;border:1px solid #e1ebf7;border-radius:7px;padding:8px;min-width:0}
.settings-list span{color:#6b7a90;font-size:10px;text-transform:uppercase;font-weight:800;letter-spacing:0}
.settings-list strong{color:#0f172a;font-size:12px;line-height:1.25;word-break:break-word}
.settings-list .settings-link{font-size:11px;font-weight:800}
.billing-cycles-page .portal-shell{
  max-width:1280px;
  width:calc(100vw - 32px);
}
.due-date-rules-page{
  width:100%;
  display:grid;
  gap:12px;
}
.due-date-rules-page .noc-panel{margin-bottom:0}
.due-date-rules-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:12px 14px;
  border:1px solid #d8e5f4;
  border-radius:12px;
  background:linear-gradient(180deg,#ffffff 0%, #f8fbff 100%);
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}
.due-date-rules-header-copy{min-width:0;display:grid;gap:4px}
.due-date-rules-header h1{margin:0;font-size:20px;line-height:1.1;letter-spacing:0;text-transform:uppercase}
.due-date-rules-header .hero-subtitle{margin-top:0;max-width:760px}
.due-date-rules-header-meta{
  display:grid;
  gap:6px;
  justify-items:end;
  text-align:right;
  min-width:160px;
}
.due-date-rules-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:4px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
  border:1px solid transparent;
}
.due-date-rules-badge.is-live{background:#dcfce7;color:#166534;border-color:#86efac}
.due-date-rules-header-meta strong{
  color:#10213d;
  font-size:12px;
  line-height:1.2;
  word-break:break-word;
}
.due-date-rules-header-meta span{
  color:#64748b;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.due-date-rules-overview{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.due-date-rule-card{
  display:grid;
  gap:10px;
  margin:0;
  padding:12px;
  border:1px solid #d8e5f4;
  border-radius:12px;
  background:linear-gradient(180deg,#ffffff 0%, #fcfeff 100%);
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}
.due-date-rule-card .noc-panel-title{
  align-items:center;
  margin-bottom:0;
  padding-bottom:7px;
}
.due-date-rule-card .noc-panel-title > div{min-width:0}
.due-date-rule-card .noc-panel-title h2{font-size:13px}
.due-date-rule-card .noc-panel-title span{
  white-space:normal;
  line-height:1.25;
}
.due-date-default-card{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.due-date-default-card > div{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:8px;
  border:1px solid #dfeaf6;
  border-radius:8px;
  background:#f8fbff;
  min-width:0;
}
.due-date-default-card span,
.due-date-rule-form-grid label,
.due-date-rule-form-note,
.due-date-note{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.due-date-default-card span{color:#64748b}
.due-date-default-card strong{
  font-size:12px;
  line-height:1.25;
  color:#0f172a;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.priority-explainer-inline{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
}
.priority-explainer-inline div{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.priority-explainer-inline strong{
  width:24px;
  height:24px;
  flex:none;
}
.priority-explainer-inline span{
  font-size:11px;
  font-weight:800;
  line-height:1.2;
}
.due-date-note,
.due-date-rule-form-note,
.due-date-rules-footer-note{
  margin-top:0;
  padding:8px 9px;
  border:1px dashed #d9e6f4;
  border-radius:8px;
  background:#f8fbff;
  line-height:1.35;
  color:#5f6f86;
}
.due-date-rules-workspace{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(340px,390px);
  gap:10px;
  align-items:start;
}
.due-date-rules-table-card,
.due-date-rule-editor-card{
  align-content:start;
}
.due-date-rule-editor-card{margin-bottom:0}
.due-date-editor-switch{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.due-date-editor-tab{
  min-height:26px;
  height:26px;
  padding:3px 8px;
  border:1px solid #cfe0f3;
  border-radius:999px;
  background:#f8fbff;
  color:#17324d;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.due-date-editor-tab.is-active{
  background:#0A74F5;
  border-color:#0A74F5;
  color:#fff;
}
.due-date-editor-pill{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:3px 8px;
  border-radius:999px;
  background:#eef6ff;
  border:1px solid #cfe0f3;
  color:#17324d;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.due-date-editor-section[hidden]{display:none}
.due-date-rule-form{margin:0;gap:10px}
.due-date-rule-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.due-date-rule-form-grid label{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:8px;
  border:1px solid #dfeaf6;
  border-radius:8px;
  background:#f8fbff;
  color:#5f6f86;
}
.due-date-rule-form-grid input,
.due-date-rule-form-grid select{
  min-width:0;
  min-height:28px;
  height:28px;
  padding:4px 7px;
  font-size:11px;
  text-transform:none;
}
.due-date-rule-form-grid label[data-custom-day-wrap][hidden],
.due-date-rule-form-grid label[data-group-custom-wrap][hidden],
.due-date-rule-form-grid label[data-default-custom-wrap][hidden]{display:none}
.due-date-rule-form-actions{
  justify-content:flex-end;
  gap:6px;
  margin-top:0;
}
.due-date-rule-form-actions .btn{
  min-height:28px;
  height:28px;
  padding:4px 8px;
  font-size:10px;
}
.due-date-rules-table-shell{
  overflow-x:visible;
}
.due-date-rules-table{
  width:100%;
  min-width:0;
  table-layout:fixed;
}
.due-date-rules-table col.due-date-col-type{width:16%}
.due-date-rules-table col.due-date-col-target{width:28%}
.due-date-rules-table col.due-date-col-duedate{width:16%}
.due-date-rules-table col.due-date-col-grace{width:10%}
.due-date-rules-table col.due-date-col-status{width:12%}
.due-date-rules-table col.due-date-col-actions{width:18%}
.due-date-rules-table thead th{
  font-size:10px;
  padding-top:8px;
  padding-bottom:8px;
  white-space:normal;
}
.due-date-rules-table td{
  font-size:11px;
  vertical-align:top;
  white-space:normal;
  word-break:break-word;
}
.due-date-rules-table td .badge{
  min-height:20px;
}
.due-date-rule-actions{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
}
.due-date-rule-actions .btn{
  min-height:26px;
  height:26px;
  padding:3px 7px;
  font-size:10px;
}
.due-date-rule-inline-form{
  margin:0;
  display:inline-flex;
}
.due-date-rules-footer-note{
  margin-top:0;
}
.settings-form-panel{margin-top:10px}
.settings-form{display:grid;gap:10px}
.settings-toggle{display:grid;grid-template-columns:16px 1fr;gap:10px;align-items:flex-start;background:#f8fbff;border:1px solid #e1ebf7;border-radius:8px;padding:9px 10px}
.settings-toggle input[type=checkbox]{width:16px;height:16px;margin-top:2px}
.settings-toggle strong{display:block;color:#0f172a;font-size:12px;line-height:1.25}
.settings-toggle em{display:block;margin-top:2px;color:#5f83b0;font-style:normal;font-size:11px;line-height:1.3}
.settings-form-actions{display:flex;justify-content:flex-end}
.settings-save-btn{border:1px solid #cfe2f8;background:#eff6ff;color:#0f172a;border-radius:8px;padding:8px 13px;font-size:12px;font-weight:700}
.settings-link{color:#075985;text-decoration:none;font-weight:700}
.settings-theme-card{gap:10px}
.settings-theme-form{display:grid;gap:8px}
.settings-theme-grid{
  display:grid;
  grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr);
  gap:8px;
  align-items:stretch;
}
.settings-theme-field{
  display:grid;
  gap:4px;
  min-width:0;
}
.settings-theme-field span{
  color:#5f6e82;
  font-size:10px;
  font-weight:800;
  letter-spacing:0;
  text-transform:uppercase;
}
.settings-theme-field select{
  min-height:30px;
  padding:6px 8px;
  border:1px solid #c9cdd0;
  border-radius:7px;
  background:#fff;
  color:#111820;
  font-family:var(--app-font-family, var(--winbox-font));
}
.settings-theme-preview{
  display:grid;
  gap:5px;
  align-content:start;
  padding:9px 10px;
  border:1px solid var(--winbox-border);
  border-radius:8px;
  background:var(--winbox-panel-soft);
  min-width:0;
}
.settings-theme-preview-label{
  font-size:10px;
  font-weight:800;
  color:#4f5b66;
  letter-spacing:0;
  text-transform:uppercase;
}
.settings-theme-preview strong{
  display:block;
  font-size:11px;
  line-height:1.25;
  font-weight:400;
}
.settings-theme-preview-btn{
  justify-self:start;
  height:28px;
  padding:0 10px;
  border:1px solid var(--winbox-border-dark);
  border-radius:7px;
  background:var(--winbox-panel);
  color:var(--winbox-text);
  font-family:var(--app-font-family, var(--winbox-font));
  font-size:11px;
  font-weight:700;
}
.settings-theme-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.settings-theme-save,
.settings-theme-reset{
  height:28px;
  min-height:28px;
  padding:0 11px;
  border-radius:7px;
}
.settings-theme-note{
  margin:0;
  color:var(--winbox-muted);
  font-size:10px;
  line-height:1.25;
}
.settings-dashboard-page{
  width:calc(100vw - 30px);
  max-width:1440px;
  padding-top:6px;
  display:grid;
  gap:8px;
}
.settings-collapsible-card{
  padding:0;
  overflow:hidden;
}
.settings-collapsible-card > summary{
  list-style:none;
}
.settings-collapsible-card > summary::-webkit-details-marker{
  display:none;
}
.settings-collapsible-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  cursor:pointer;
  border-bottom:1px solid #e5eef7;
}
.settings-collapsible-summary h2{
  margin:0;
}
.settings-collapsible-card[open] .settings-collapsible-summary{
  background:linear-gradient(180deg,#fbfdff 0%,#f4f8fe 100%);
}
.settings-collapsible-card .section-note,
.settings-collapsible-card .settings-role-legend,
.settings-collapsible-card .settings-role-summary-grid,
.settings-collapsible-card .settings-roles-form{
  margin-left:14px;
  margin-right:14px;
}
.settings-collapsible-card .section-note{
  margin-top:12px;
}
.settings-advanced-tools{
  margin-top:2px;
}
.settings-collapsible-body{
  display:grid;
  gap:7px;
  padding:0 14px 14px;
}
.settings-card-nested{
  padding:10px;
  box-shadow:none;
}
.settings-card-nested .settings-card-head{
  margin-bottom:8px;
}
.settings-advanced-footer{
  display:flex;
  justify-content:flex-end;
  padding-top:2px;
}
.dashboard-warning-strip{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  overflow-x:auto;
  padding:8px 9px;
  border-radius:10px;
  border:1px solid #dbe7f5;
  background:linear-gradient(180deg,#fbfdff 0%,#f4f8fe 100%);
  scrollbar-width:thin;
}
.dashboard-warning-strip::-webkit-scrollbar{height:8px}
.dashboard-warning-strip::-webkit-scrollbar-thumb{background:#c6d6e7;border-radius:999px}
.dashboard-warning-item{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  min-height:42px;
  padding:7px 10px;
  border:1px solid #e3ecf7;
  border-radius:8px;
  background:#fff;
  text-decoration:none;
  color:inherit;
  flex:1 1 0;
  min-width:0;
}
.dashboard-warning-item strong{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#17324d;
}
.dashboard-warning-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  border-radius:4px;
  background:#eaf3ff;
  color:#1d64d6;
  font-size:10px;
  line-height:1;
  flex:0 0 auto;
}
.dashboard-warning-item > span{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  font-size:10px;
  line-height:1.2;
  color:#475569;
}
.dashboard-warning-summary{
  flex:1.35 1 0;
}
.dashboard-warning-line{
  flex-wrap:wrap;
}
.dashboard-warning-sep{
  color:#9aacbf;
  flex:0 0 auto;
}
.dashboard-warning-jump{
  margin-left:auto;
  color:#0a74f5;
  text-decoration:none;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  white-space:nowrap;
}
.dashboard-warning-meta,
.dashboard-warning-links,
.dashboard-warning-selected{
  min-width:170px;
}
.dashboard-warning-selected span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dashboard-pill-links{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  align-items:center;
}
.dashboard-pill-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:20px;
  padding:1px 7px;
  border-radius:999px;
  border:1px solid #cfe0f3;
  background:#eef6ff;
  color:#0a74f5;
  text-decoration:none;
  font-size:9px;
  white-space:nowrap;
}
.dashboard-warning-item:hover{
  border-color:#cfe0f3;
  box-shadow:0 1px 0 rgba(15,23,42,.04);
}
.dashboard-warning-item.warning{
  border-color:#f3d5a7;
  background:#fff8ee;
}
.dashboard-warning-item.ok{
  border-color:#cfe8d1;
  background:#f4fbf4;
}
.dashboard-warning-meta .status-badge,
.dashboard-summary-section .status-badge{
  min-height:20px;
  padding:2px 7px;
  font-size:9px;
}
.dashboard-warning-meta .status-badge.ok,
.dashboard-summary-section .status-badge.ok{
  background:#e8f8ef;
  border-color:#b7e4c7;
  color:#166534;
}
.dashboard-warning-meta .status-badge.warn,
.dashboard-summary-section .status-badge.warn{
  background:#fff6d8;
  border-color:#f0d488;
  color:#8a5310;
}
.dashboard-warning-meta .status-badge.danger,
.dashboard-summary-section .status-badge.danger{
  background:#ffe1e1;
  border-color:#f1b7b7;
  color:#9a1f1f;
}
.dashboard-activity-list{
  display:grid;
  gap:5px;
}
.dashboard-logs-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin:0 0 10px;
}
.dashboard-logs-card{
  display:grid;
  gap:3px;
  padding:8px 10px;
  border:1px solid #d8e3ef;
  border-radius:10px;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  color:#17324d;
  text-decoration:none;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.dashboard-logs-card:hover{
  border-color:#b8c8db;
  background:#f3f8ff;
}
.dashboard-logs-card span{
  font-size:9.5px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#6b7c93;
}
.dashboard-logs-card strong{
  font-size:12px;
  line-height:1.2;
  font-weight:600;
  color:#17324d;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dashboard-logs-card em{
  font-size:9.5px;
  color:#627287;
  font-style:normal;
  line-height:1.25;
}
.dashboard-activity-row{
  display:grid;
  grid-template-columns:128px minmax(0,1fr);
  gap:7px;
  align-items:start;
  padding:6px 8px;
  border:1px solid #e3ecf7;
  border-radius:8px;
  background:#fff;
}
.dashboard-activity-time{
  font-size:9.5px;
  color:#64748b;
  line-height:1.25;
}
.dashboard-activity-body{
  display:grid;
  gap:2px;
}
.dashboard-activity-body strong{
  font-size:10.5px;
  font-weight:600;
  color:#17324d;
}
.dashboard-activity-body span{
  font-size:10.5px;
  color:#475569;
  line-height:1.25;
}
.dashboard-activity-empty{
  padding:10px;
  border:1px dashed #dbe7f5;
  border-radius:8px;
  background:#fbfdff;
  color:#64748b;
  font-size:11px;
}
.coverage-hero-compact{
  padding-top:8px;
  padding-bottom:8px;
}
.coverage-health-strip{
  padding:10px;
}
.coverage-health-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.coverage-health-grid-inline{
  margin-bottom:8px;
}
.coverage-health-grid div{
  display:grid;
  gap:4px;
  min-height:46px;
  padding:6px 7px;
  border:1px solid #dbe5f4;
  border-radius:8px;
  background:#f8fbff;
}
.coverage-health-grid span{
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
  color:#6b7280;
  letter-spacing:.04em;
}
.coverage-health-grid strong{
  font-size:11px;
  color:#17324d;
  line-height:1.15;
}
.coverage-prep-grid{
  align-items:start;
}
.coverage-legend-compact{
  padding:10px;
}
.coverage-map-panel-compact,
.coverage-filter-panel,
.coverage-table-panel{
  padding-top:10px;
}
.coverage-map-panel-compact{
  padding-bottom:12px;
}
.coverage-map-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin:0 0 8px;
}
.coverage-map-toolbar-item{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  min-height:20px;
  padding:0;
  border:1px solid #d7e3f0;
  border-radius:999px;
  background:#f8fbff;
  color:#4b6280;
  font-size:0;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.coverage-map-toolbar-item[title]{cursor:help}
.coverage-map-toolbar-item::before{
  content:"";
  display:block;
  width:10px;
  height:10px;
  border-radius:2px;
  background:#4b6280;
}
.coverage-map-toolbar-road::before{
  width:12px;
  height:8px;
  border-radius:2px;
  background:
    linear-gradient(90deg, transparent 0 3px, #4b6280 3px 5px, transparent 5px 7px, #4b6280 7px 9px, transparent 9px 12px),
    #4b6280;
}
.coverage-map-toolbar-sat::before{
  width:10px;
  height:10px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #4b6280 0 2px, transparent 2px), conic-gradient(from 0deg, #4b6280 0 20%, transparent 20% 40%, #4b6280 40% 60%, transparent 60% 80%, #4b6280 80% 100%);
}
.coverage-map-toolbar-pins::before{
  width:8px;
  height:10px;
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  background:#4b6280;
}
.coverage-map-toolbar-lines::before{
  width:12px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,#4b6280 0 100%);
  box-shadow:0 -4px 0 #4b6280, 0 4px 0 #4b6280;
}
.coverage-legend-title{
  margin-bottom:6px;
}
.coverage-legend-title span{
  display:block;
}
.coverage-table-collapse{
  display:block;
}
.coverage-table-collapse summary{
  list-style:none;
  cursor:pointer;
}
.coverage-table-collapse summary::-webkit-details-marker{
  display:none;
}
.coverage-table-collapse[open] > .table-shell{
  margin-top:8px;
}
.compact-toggle-panel{
  display:block;
  margin:0 0 10px;
}
.compact-toggle-panel > summary{
  cursor:pointer;
  list-style:none;
}
.compact-toggle-panel > summary::-webkit-details-marker{
  display:none;
}
.compact-toggle-panel[open] > summary{
  margin-bottom:8px;
}
.coverage-table-collapse:not([open]) > .table-shell{
  display:none;
}
.coverage-table-collapse:not([open]){
  padding-bottom:8px;
}
.coverage-table-collapse .noc-panel-title{
  margin-bottom:0;
}
.coverage-table-collapse .noc-panel-title h2{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.coverage-table-collapse .noc-panel-title h2:after{
  content:"▾";
  font-size:10px;
  color:#6b7a90;
}
.coverage-table-collapse:not([open]) .noc-panel-title h2:after{
  content:"▸";
}
.coverage-map-actions-compact{
  gap:5px;
  margin-top:0;
}
.coverage-map-actions-compact .btn{
  min-height:26px;
  padding:4px 7px;
  font-size:9px;
}
.client-map-shell{
  position:relative;
  overflow:visible;
}
.client-map-legend-overlay{
  position:absolute;
  top:6px;
  right:6px;
  z-index:1200;
  width:min(190px, 26%);
  pointer-events:none;
}
.coverage-legend-overlay-grid{
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  box-shadow:none;
  backdrop-filter:none;
  position:relative;
  z-index:1201;
}
.coverage-legend-overlay-grid div{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(148,163,184,.45);
  border-radius:6px;
  padding:1px 3px;
  box-shadow:none;
  display:flex;
  align-items:center;
  gap:2px;
  min-height:12px;
  margin:0;
}
.coverage-legend-overlay-grid strong{
  color:#0b1f3a;
  text-shadow:0 1px 2px rgba(255,255,255,.78);
  font-size:6px;
  line-height:.78;
  white-space:nowrap;
}
.coverage-legend-overlay-grid .legend-dot,
.coverage-legend-overlay-grid .legend-line{
  box-shadow:0 1px 2px rgba(255,255,255,.55);
  transform:scale(.5);
  transform-origin:left center;
}
.coverage-legend-overlay-grid .legend-row-online strong,
.coverage-legend-overlay-grid .legend-row-offline strong{line-height:.78}
.coverage-summary-grid-compact{
  gap:8px;
}
.coverage-status-strip{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px;
}
.coverage-status-strip > div{
  min-height:48px;
  padding:7px 8px;
}
.coverage-status-strip > div span{
  font-size:9px;
}
.coverage-status-strip > div strong{
  font-size:12px;
}
.coverage-legend-grid{
  gap:5px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.coverage-legend-grid div{
  min-height:26px;
  padding:4px 6px;
}
.coverage-legend-grid strong{
  font-size:9px;
}
.client-map-page .coverage-map-legend-panel,
.client-map-page .coverage-filter-panel{
  min-height:100%;
}
.client-map-page .coverage-map-panel-compact .client-map-shell{
  margin-top:4px;
}
.client-map-page .coverage-legend-note{
  margin-top:8px;
}
.client-map-page .client-map-canvas.network-map-canvas,
.client-map-page .client-map-coverage-canvas{
  height:680px;
  min-height:680px;
}
.client-map-page .client-map-selected-panel{
  width:min(280px, calc(100vw - 30px));
  max-width:280px;
  padding:8px;
}
.coverage-table-collapse summary + .table-shell{
  margin-top:8px;
}
.settings-dashboard-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding:10px 12px;
  border:1px solid var(--winbox-border);
  border-radius:8px;
  background:var(--winbox-panel);
  box-shadow:none;
}
.settings-dashboard-header-copy{min-width:0;display:grid;gap:3px}
.settings-dashboard-header h1{margin:0;font-size:17px;line-height:1.15;letter-spacing:0;text-transform:uppercase;font-weight:600}
.settings-dashboard-header .hero-subtitle{margin-top:0;max-width:760px}
.settings-dashboard-header-meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
  align-items:center;
  min-width:0;
}
.settings-status-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.settings-status-card,
.settings-card{
  margin:0;
  padding:10px;
  border:1px solid var(--winbox-border);
  border-radius:8px;
  background:var(--winbox-panel);
  box-shadow:none;
  display:grid;
  gap:7px;
  align-content:start;
}
.settings-status-card-head,
.settings-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
  min-width:0;
}
.settings-status-card-head span,
.settings-card-kicker{
  margin:0;
  color:#64748b;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.settings-card-head h2{
  margin:2px 0 0;
  font-size:12px;
  line-height:1.2;
  font-weight:600;
}
.settings-card-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:3px 8px;
  border-radius:999px;
  background:#eef6ff;
  border:1px solid #cfe0f3;
  color:#17324d;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  white-space:nowrap;
}
.settings-status-card-value{
  font-size:12px;
  font-weight:600;
  line-height:1.25;
  color:#0f172a;
  word-break:break-word;
}
.settings-status-card-note{
  color:#64748b;
  font-size:10px;
  line-height:1.35;
  min-height:0;
}
.settings-status-card-actions,
.settings-card-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}
.settings-action-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:4px 9px;
  border-radius:7px;
  border:1px solid var(--winbox-border);
  background:var(--winbox-panel-soft);
  color:var(--winbox-text);
  text-decoration:none;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1;
  cursor:pointer;
}
.settings-action-link:hover{background:#eaf4ff}
.settings-action-link.is-disabled,
.settings-action-link:disabled{
  opacity:.6;
  cursor:not-allowed;
  pointer-events:none;
}
.settings-main-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  align-items:start;
}
.settings-card{gap:7px}
.settings-fact-list{
  display:grid;
  gap:5px;
}
.settings-fact{
  display:grid;
  grid-template-columns:minmax(138px,.56fr) minmax(0,1fr);
  gap:6px;
  align-items:center;
  padding:6px 0;
  border-bottom:1px solid #e7eff7;
  min-width:0;
}
.settings-fact:last-child{border-bottom:0;padding-bottom:0}
.settings-fact span{
  color:#64748b;
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.settings-fact strong{
  color:#0f172a;
  font-size:10px;
  line-height:1.3;
  word-break:break-word;
}
.settings-footer-note{
  padding:9px 11px;
  border:1px dashed var(--winbox-border);
  border-radius:8px;
  background:var(--winbox-panel-soft);
  color:var(--winbox-muted);
  font-size:10px;
  line-height:1.35;
}
.settings-footer-note p{margin:0}
.settings-copy-btn{font:inherit}
.settings-copy-btn:disabled{opacity:.75}
body.billing-cockpit-surface,
body.settings-surface,
body.billing-cycles-page{
  --mz-bg:#e7edf2;
  --mz-panel:#f8fafc;
  --mz-panel-2:#eef4f8;
  --mz-border:#b9c9d8;
  --mz-border-blue:#5aa7e8;
  --mz-text:#102033;
  --mz-muted:#5b6b7d;
  --mz-blue:#1d7ff0;
  --mz-blue-soft:#dcecff;
  --mz-green:#19a65a;
  --mz-red:#d93a3a;
  --mz-yellow:#f2a900;
  --font-ui:"Inter", "Segoe UI", Tahoma, Arial, sans-serif;
  background:var(--mz-bg);
  color:var(--mz-text);
  font-size:12px;
}
body.billing-cockpit-surface .app-main,
body.settings-surface .app-main,
body.billing-cycles-page .portal-shell{
  background:transparent;
}
body.billing-cockpit-surface .billing-panel,
body.billing-cockpit-surface .billing-kpi-card,
body.billing-cockpit-surface .billing-action-center-shell,
body.billing-cockpit-surface .billing-action-center-panel,
body.settings-surface .noc-panel,
body.settings-surface .settings-status-card,
body.settings-surface .settings-card,
body.billing-cycles-page .noc-panel,
body.billing-cycles-page .due-date-rule-card,
body.billing-cycles-page .due-date-rule-editor-card,
body.billing-cycles-page .due-date-rules-table-card{
  background:var(--mz-panel) !important;
  border:1px solid var(--mz-border) !important;
  box-shadow:none !important;
  border-radius:8px !important;
}
body.billing-cockpit-surface .billing-panel-title,
body.billing-cockpit-surface .billing-action-center .billing-panel-title,
body.billing-cycles-page .noc-panel-title,
body.billing-cycles-page .due-date-rule-card .noc-panel-title,
body.settings-surface .noc-panel-title,
body.settings-surface .settings-card-head,
body.settings-surface .settings-status-card-head{
  background:var(--mz-panel-2) !important;
  border-color:var(--mz-border) !important;
}
body.billing-cockpit-surface .billing-action-center-shell{
  background:var(--mz-panel) !important;
  border:1px solid var(--mz-border) !important;
  border-top:2px solid var(--mz-border-blue) !important;
  box-shadow:none !important;
  padding:7px !important;
}
body.billing-cockpit-surface .billing-action-center-shell::before{
  background:linear-gradient(90deg,rgba(90,167,232,.28),rgba(90,167,232,0)) !important;
}
body.billing-cockpit-surface .billing-action-center-panel .panel-title{
  background:var(--mz-panel-2) !important;
}
body.billing-cockpit-surface .billing-action-tab{
  background:var(--mz-panel-2) !important;
  border-color:var(--mz-border) !important;
  color:var(--mz-text) !important;
  box-shadow:none !important;
}
body.billing-cockpit-surface .billing-action-tab.is-active{
  background:var(--mz-blue-soft) !important;
  border-color:var(--mz-border-blue) !important;
  color:var(--mz-text) !important;
}
body.billing-cockpit-surface .billing-action-tab.is-danger.is-active{
  background:#fff1f1 !important;
  border-color:var(--mz-red) !important;
  color:#7a1f1f !important;
}
body.billing-cockpit-surface .btn:not(.secondary):not(.danger){
  background:var(--mz-blue) !important;
  border:1px solid var(--mz-blue) !important;
  color:#fff !important;
  box-shadow:none !important;
}
body.billing-cockpit-surface .btn.secondary{
  background:var(--mz-panel-2) !important;
  border:1px solid var(--mz-border) !important;
  color:var(--mz-text) !important;
  box-shadow:none !important;
}
body.billing-cockpit-surface .btn.danger{
  background:#fff1f1 !important;
  border:1px solid #f0b2b2 !important;
  color:#8f1f1f !important;
  box-shadow:none !important;
}
body.billing-cockpit-surface input,
body.billing-cockpit-surface select,
body.billing-cockpit-surface textarea,
body.settings-surface input,
body.settings-surface select,
body.settings-surface textarea,
body.billing-cycles-page input,
body.billing-cycles-page select,
body.billing-cycles-page textarea{
  min-height:30px;
  padding:5px 7px;
  font-size:11px;
  border:1px solid var(--mz-border);
  border-radius:5px;
  background:#fff;
  color:var(--mz-text);
  box-shadow:none;
}
body.billing-cockpit-surface table,
body.settings-surface table,
body.billing-cycles-page table{
  font-size:11px;
}
body.billing-cockpit-surface th,
body.billing-cockpit-surface td,
body.settings-surface th,
body.settings-surface td,
body.billing-cycles-page th,
body.billing-cycles-page td{
  font-size:11px;
}
body.billing-cockpit-surface .billing-ledger-table th,
body.billing-cockpit-surface .billing-ledger-table td{
  border-color:#d6e0ea;
}
body.settings-surface .settings-action-link{
  background:var(--mz-panel-2);
  border-color:var(--mz-border);
  color:var(--mz-text);
}
body.billing-cycles-page .due-date-rules-header,
body.billing-cycles-page .due-date-rule-card,
body.billing-cycles-page .due-date-rule-editor-card,
body.billing-cycles-page .due-date-rules-table-card{
  background:var(--mz-panel) !important;
  border-color:var(--mz-border) !important;
  box-shadow:none !important;
}
body.billing-cycles-page .due-date-rules-badge.is-live{
  background:var(--mz-blue-soft);
  color:var(--mz-text);
  border-color:var(--mz-border);
}
body.billing-cycles-page .due-date-rule-form-grid label{
  background:var(--mz-panel-2);
  border-color:var(--mz-border);
}
body.billing-cycles-page .due-date-rule-form-actions .btn,
body.billing-cycles-page .due-date-rule-actions .btn{
  background:var(--mz-panel-2);
  border:1px solid var(--mz-border);
  color:var(--mz-text);
  box-shadow:none;
}
body.billing-cycles-page .due-date-rules-table thead th{
  background:var(--mz-panel-2);
  color:var(--mz-text);
  border-color:var(--mz-border);
}
body.billing-cycles-page .due-date-rules-table td{
  border-color:#d6e0ea;
}
.clients-page{padding-top:6px}
.clients-hero{grid-template-columns:minmax(260px,.72fr) minmax(560px,1.28fr)}
.clients-status-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
.clients-filter-panel{margin-bottom:10px}
.clients-filter-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr)) auto;gap:8px;align-items:end}
.clients-filter-grid label{background:#f8fbff;border:1px solid #e1ebf7;border-radius:7px;padding:7px;color:#334155;font-size:11px;font-weight:800;text-transform:uppercase}
.clients-filter-grid input,.clients-filter-grid select{margin-top:4px;width:100%;font-size:12px;padding:7px 8px}
.clients-filter-actions{display:flex;gap:6px;flex-wrap:wrap}
.clients-filter-actions .btn{font-weight:500!important;height:30px;min-height:30px;padding:6px 10px}
.clients-table-wrap,.report-table-wrap{margin-top:8px;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.clients-table{width:100%;min-width:1380px;table-layout:auto}
.clients-table th,.clients-table td{vertical-align:middle;padding:7px 8px;line-height:1.2}
.clients-table th{white-space:nowrap}
.clients-table td{white-space:nowrap}
.clients-table td.client-name,.clients-table td.address-cell{white-space:normal;max-width:180px}
.clients-table th.client-name,.clients-table th.address-cell{white-space:normal}
.clients-table td.status-cell,.clients-table td.balance-cell,.clients-table td.payment-cell,.clients-table td.sync-cell,.clients-table td.contact-number,.clients-table td.profile-cell,.clients-table td.router-name,.clients-table td.pppoe-username,.clients-table td.account-number{white-space:nowrap}
.clients-table .badge{font-size:10px;padding:3px 6px;min-height:20px}
.client-actions{display:flex;flex-wrap:nowrap;gap:6px;min-width:max-content}
.client-actions .btn{font-weight:500!important;height:30px;min-height:30px;padding:6px 10px;white-space:nowrap}
.client-card-list{display:grid;gap:8px}
.client-card{border:1px solid rgba(5,157,245,.16);background:rgba(5,157,245,.03);border-radius:10px;padding:9px 10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.65)}
.client-card.is-selected{border:2px solid rgba(56,189,248,.92);background:#eaf8ff;box-shadow:0 10px 26px rgba(56,189,248,.16),inset 0 1px 0 rgba(255,255,255,.86)}
.client-card.is-preview-selected{border:2px dashed rgba(56,189,248,.72);background:rgba(56,189,248,.06);box-shadow:0 8px 20px rgba(56,189,248,.10),inset 0 1px 0 rgba(255,255,255,.82)}
.client-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px}
.client-card-title-wrap{display:flex;flex:1 1 auto;align-items:flex-start;justify-content:space-between;gap:10px}
.client-card-title{font-size:16px;font-weight:900;line-height:1.15;color:#08203d;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.client-card-badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.client-card-identity{margin-bottom:7px;padding:7px 9px;border-radius:8px;border:1px solid rgba(98,168,255,.18);background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(247,251,255,.96))}
.client-card-identity-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:#0f2745;line-height:1.3}
.client-card-identity-line span{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:#4c6f93}
.client-card-identity-line strong{display:inline;font-size:12px}
.identity-sep{color:#94a3b8;font-size:11px}
.client-card-billing-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr) minmax(180px,auto);gap:8px;align-items:stretch;margin-bottom:7px}
.billing-plan-pill,.billing-due-pill,.billing-balance-pill{display:flex;flex-direction:column;gap:4px;padding:8px 9px;border-radius:9px;border:1px solid rgba(98,168,255,.18);background:linear-gradient(180deg,rgba(245,250,255,.94),rgba(255,255,255,.99));min-width:0}
.billing-plan-pill{background:linear-gradient(180deg,rgba(237,245,255,.96),rgba(255,255,255,.99));border-color:rgba(102,143,255,.20)}
.billing-due-pill{background:linear-gradient(180deg,rgba(245,251,255,.96),rgba(255,255,255,.99));border-color:rgba(92,170,248,.20)}
.billing-balance-pill{justify-self:end;align-items:flex-end;text-align:right;min-width:190px;background:linear-gradient(180deg,rgba(255,250,242,.98),rgba(255,255,255,.99));border-color:rgba(245,158,11,.20)}
.billing-plan-pill span,.billing-due-pill span,.billing-balance-pill span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:#4c6f93}
.billing-plan-pill strong,.billing-due-pill strong,.billing-balance-pill strong{display:block;font-size:13px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.billing-balance-pill strong{font-size:16px;line-height:1.1}
.client-card-secondary-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding-top:6px;margin-top:1px;border-top:1px solid rgba(5,157,245,.10);font-size:12px;color:#24415f}
.client-card-secondary-line span{display:inline;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:#4c6f93}
.client-card-secondary-line strong{display:inline;font-size:12px;font-weight:700;white-space:nowrap}
.client-card-main,.client-card-sub{display:none}
.client-card span{display:block;font-size:10px;text-transform:uppercase;color:#1e3a8a}
.client-card strong{display:block;font-size:12px;color:#0b1f3a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.client-card-selected-badge{display:inline-flex;align-items:center;height:20px;padding:3px 7px;border-radius:999px;background:rgba(56,189,248,.16);border:1px solid rgba(56,189,248,.44);color:#075985;font-size:10px;font-weight:700;line-height:1;margin-right:6px;vertical-align:middle}
.client-card.is-preview-selected{transform:translateY(-1px)}
.client-location-editor-panel[data-location-mode="view"] .client-location-save-btn,
.client-location-editor-panel[data-location-mode="view"] .client-location-cancel-btn{
  display:none;
}
.client-location-editor-panel[data-location-mode="view"] .client-location-picker-btn{
  display:none;
}
.client-location-editor-panel[data-location-mode="edit"] .client-location-save-btn,
.client-location-editor-panel[data-location-mode="edit"] .client-location-cancel-btn,
.client-location-editor-panel[data-location-mode="edit"] .client-location-picker-btn{
  display:inline-flex;
}
.client-location-editor-panel [data-editable-field="true"][readonly]{
  background:#f8fbff;
  color:#334155;
}
.client-location-editor-panel [data-editable-field="true"]:disabled{
  background:#f8fbff;
  color:#334155;
}
.client-card .badge{font-size:10px;padding:3px 6px;min-height:20px}
.client-card .client-actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.client-card .client-actions a,.client-card .client-actions button{font-weight:600!important;font-size:10px;height:27px;padding:5px 8px;white-space:nowrap}
.client-card .client-actions .client-action-profile{
  background:#BFDBFE;
  border-color:#60A5FA;
  color:#0F3B73;
}
.client-card .client-actions .client-action-profile:hover,
.client-card .client-actions .client-action-profile:focus-visible{
  background:#93C5FD;
  border-color:#3B82F6;
  color:#0F3B73;
}
.client-card .client-actions .client-action-map{
  background:#BBF7D0;
  border-color:#4ADE80;
  color:#14532D;
}
.client-card .client-actions .client-action-map:hover,
.client-card .client-actions .client-action-map:focus-visible{
  background:#86EFAC;
  border-color:#22C55E;
  color:#14532D;
}
.client-card .client-actions .client-action-subscriber{
  background:#DDD6FE;
  border-color:#A78BFA;
  color:#3B0764;
}
.client-card .client-actions .client-action-subscriber:hover,
.client-card .client-actions .client-action-subscriber:focus-visible{
  background:#C4B5FD;
  border-color:#8B5CF6;
  color:#3B0764;
}
.client-card .client-actions .client-action-proofs{
  background:#FED7AA;
  border-color:#FB923C;
  color:#7C2D12;
}
.client-card .client-actions .client-action-proofs:hover,
.client-card .client-actions .client-action-proofs:focus-visible{
  background:#FDBA74;
  border-color:#F97316;
  color:#7C2D12;
}
.client-card .client-actions .client-action-jobs{
  background:#FEF08A;
  border-color:#FACC15;
  color:#713F12;
}
.client-card .client-actions .client-action-jobs:hover,
.client-card .client-actions .client-action-jobs:focus-visible{
  background:#FDE047;
  border-color:#EAB308;
  color:#713F12;
}
.client-card .client-actions .client-action-archive{
  background:#EEF2FF;
  border-color:#A5B4FC;
  color:#3730A3;
}
.client-profile-page .danger-zone-card{
  border:1px solid #FCA5A5;
  background:#FFF1F2;
}
.client-profile-page .danger-zone-card .panel-title h2{
  color:#991B1B;
}
.client-profile-page .danger-zone-card .notice.warning{
  background:#FEF2F2;
  border-color:#FCA5A5;
  color:#7F1D1D;
}
.client-profile-page .danger-zone-form{
  gap:10px;
}
.client-profile-page .danger-zone-form label{
  display:grid;
  gap:6px;
  color:#7F1D1D;
  font-weight:700;
}
.client-profile-page .danger-zone-form input[type=text]{
  border-color:#FCA5A5;
  background:#FFF;
}
.client-profile-page .danger-zone-form .btn.danger{
  width:max-content;
}
.client-card .client-actions .client-action-delete{
  background:#FEE2E2;
  border-color:#FCA5A5;
  color:#991B1B;
}
.client-card .badge.active{background:#DCFCE7;border-color:#86EFAC;color:#166534}
.client-card .badge.expired{background:#FFEDD5;border-color:#FDBA74;color:#9A3412}
.client-card .badge.readonly{background:#E5E7EB;border-color:#CBD5E1;color:#334155}
.client-card .badge.pending{background:#EFF6FF;border-color:#BFDBFE;color:#1D4ED8}
.client-card .badge.danger{background:#FEF3C7;border-color:#FCD34D;color:#92400E}
.client-card .balance-state-paid{color:#166534}
.client-card .balance-state-due{color:#C2410C}
.client-card .balance-state-neutral{color:#64748B}
.client-card .due-state-neutral{color:#64748B}
.client-card .due-state-future{color:#2563EB}
.client-card .due-state-soon{color:#D97706}
.client-card .due-state-overdue{color:#DC2626}
#selected-client{scroll-margin-top:90px}
.clients-profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:10px}
.clients-profile-grid .wide{grid-column:1/-1}
.clients-profile-grid .noc-panel{margin-bottom:0}
.clients-profile-grid .settings-list div{padding:7px 8px}
.clients-profile-grid .settings-list span{font-size:9px}
.clients-profile-grid .settings-list strong{font-size:12px}
.clients-selected-summary-panel{
  position:static;
}
.loaded-profile-overlay{
  position:fixed;
  top:76px;
  left:50%;
  transform:translateX(-50%);
  width:min(1180px, calc(100vw - 32px));
  max-height:calc(100vh - 100px);
  overflow:hidden;
  z-index:2200;
  background:rgba(255,255,255,.98);
  border:1px solid #c7e8ff;
  border-radius:14px;
  box-shadow:0 24px 70px rgba(15,23,42,.22);
  backdrop-filter:blur(10px);
}
.loaded-profile-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.35);
  backdrop-filter:blur(2px);
  z-index:2100;
}
.loaded-profile-modal-header{
  position:sticky;
  top:0;
  z-index:2;
  background:rgba(255,255,255,.98);
  border-bottom:1px solid #dbeafe;
  padding:12px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.loaded-profile-modal-body{
  max-height:calc(100vh - 190px);
  overflow-y:auto;
  padding:14px;
}
.loaded-profile-overlay .client-loaded-profile-shell{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  gap:10px;
}
.loaded-profile-overlay .section-anchor{
  padding:10px;
  border:1px solid #e3edf8;
  border-radius:12px;
  background:#fff;
  margin-bottom:10px;
}
.loaded-profile-overlay .subsection-title{
  margin-bottom:8px;
}
.loaded-profile-overlay .legacy-summary-card{
  margin-bottom:10px;
}
.loaded-profile-overlay .legacy-summary-card.wide{
  grid-column:1/-1;
}
.loaded-profile-overlay .client-location-editor-form .toolbar-row{
  flex-wrap:wrap;
}
.loaded-profile-overlay .client-location-editor-form .toolbar-row label{
  flex:1 1 180px;
}
.loaded-profile-overlay .report-table-wrap{
  max-height:220px;
}
.loaded-profile-overlay .client-profile-actions{
  margin-top:12px;
}
.loaded-profile-overlay .client-profile-actions .btn{
  min-width:0;
}
.legacy-client-editor-panel{
  border-color:#cfddee;
  background:linear-gradient(180deg,#f9fbff,#ffffff);
}
.legacy-editor-shell{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);
  gap:10px;
  align-items:start;
}
.legacy-editor-left,.legacy-editor-right{
  min-width:0;
}
.legacy-summary-card{
  border:1px solid #d7e3f2;
  border-radius:8px;
  background:#fff;
  overflow:hidden;
  margin-bottom:10px;
  box-shadow:0 1px 0 rgba(15,23,42,.03);
}
.legacy-summary-card-title{
  background:#172033;
  color:#fff;
  padding:8px 10px;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.legacy-balance-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  margin:0;
  padding:8px;
}
.legacy-history-list{
  display:grid;
  gap:6px;
  padding:8px;
}
.legacy-history-list div{
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  gap:8px;
  align-items:center;
  background:#f8fbff;
  border:1px solid #e1ebf7;
  border-radius:7px;
  padding:7px 8px;
}
.legacy-history-list span{
  color:#6b7a90;
  font-size:10px;
  text-transform:uppercase;
  font-weight:800;
}
.legacy-history-list strong{
  font-size:12px;
  color:#0f172a;
  word-break:break-word;
}
.legacy-editor-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  margin-bottom:8px;
}
.legacy-editor-actions{
  margin-bottom:8px;
  flex-wrap:wrap;
  align-items:center;
}
.clients-selected-summary-grid{
  grid-template-columns:repeat(6,minmax(0,1fr));
}
.clients-selected-summary-grid div{
  min-height:52px;
}
.clients-selected-summary-grid strong{
  font-size:13px;
}
.client-profile-form{
  gap:8px;
}
.client-profile-form [data-profile-field="true"]{
  min-height:32px;
  padding:6px 8px;
  font-size:12px;
}
.client-profile-form .noc-mini-grid{
  gap:6px;
}
.client-profile-form .noc-mini-grid div{
  min-height:50px;
}
.client-profile-delete-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px 10px;
  align-items:end;
  margin-top:2px;
}
.client-profile-delete-label{
  margin:0;
}
.client-profile-delete-row input{
  margin-top:3px;
}
.client-profile-delete-note{
  align-self:center;
  color:#7c3a2a;
  font-size:11px;
  line-height:1.2;
}
.client-profile-form .btn{
  min-height:30px;
  height:30px;
  padding:6px 10px;
  font-size:10px;
}
.client-profile-form .btn.secondary{
  background:linear-gradient(180deg,#edf3fb,#e5edf8);
  border:1px solid #c7d4e5;
  color:#1f3b63;
}
.client-profile-form .btn.secondary:hover{
  background:linear-gradient(180deg,#e5edf8,#dbe8f5);
}
.selected-client-panel-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}
.selected-client-panel-actions span{font-size:12px;line-height:1.2}
.selected-client-close-btn{
  background:#f3f4f6;
  border:1px solid #d1d5db;
  color:#374151;
  height:28px;
  min-height:28px;
  padding:5px 10px;
}
.selected-client-close-btn:hover,
.selected-client-close-btn:focus-visible{
  background:#e5e7eb;
  border-color:#cbd5e1;
  color:#111827;
}
.selected-client-placeholder{min-height:72px;display:flex;align-items:center}
.client-profile-actions .btn{
  min-width:0;
}
.client-profile-actions .btn.danger{
  background:linear-gradient(180deg,#fff1f2,#ffe4e6);
  border:1px solid #fda4af;
  color:#9f1239;
  box-shadow:none;
}
.client-profile-actions .btn.danger:hover{
  background:linear-gradient(180deg,#ffe4e6,#fecdd3);
}
.clients-page .noc-panel-title h2{
  font-size:12px;
}
.clients-page .noc-panel-title span{
  font-size:10px;
}
.clients-page,
.clients-page *{
  font-family:var(--font-ui);
}
.clients-page .clients-hero h1,
.clients-page .noc-panel-title h2,
.clients-page .legacy-summary-card-title{
  font-family:var(--font-ui);
}
.clients-page .settings-list strong{
  font-size:12px;
  line-height:1.2;
}
.clients-page .settings-list div{
  padding:6px 8px;
}
.clients-page .settings-list span,
.clients-page .noc-mini-grid span,
.clients-page .legacy-history-list span,
.clients-page .client-card span,
.clients-page .client-profile-delete-label{
  font-size:10px;
  line-height:1.1;
}
.clients-page .client-card strong,
.clients-page .noc-mini-grid strong,
.clients-page .legacy-history-list strong,
.clients-page .client-profile-form [data-profile-field="true"],
.clients-page .client-profile-form input,
.clients-page .client-profile-form select{
  font-size:12px;
  line-height:1.2;
}
.clients-page .client-profile-form .legacy-editor-actions .btn,
.clients-page .client-profile-form .legacy-editor-actions .btn.secondary{
  font-size:10px;
  height:30px;
}
.clients-page .client-profile-delete-note{
  font-size:10px;
}
.clients-page .client-profile-delete-label input{
  font-family:var(--font-mono);
  font-size:12px;
}
.clients-page .report-table th,
.clients-page .report-table td{
  padding:6px 8px;
}
.reports-page{padding-top:6px}
.reports-hero{grid-template-columns:minmax(260px,.7fr) minmax(560px,1.3fr)}
.reports-status-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
.reports-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:10px}
.report-panel{margin-bottom:0}
.report-panel.wide{grid-column:1/-1}
.reports-filter-panel{margin-bottom:10px}
.reports-filter-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) auto;gap:8px;align-items:end}
.reports-filter-grid label{background:#f8fbff;border:1px solid #e1ebf7;border-radius:7px;padding:7px;color:#334155;font-size:11px;font-weight:800;text-transform:uppercase}
.reports-filter-grid input,.reports-filter-grid select{margin-top:4px;width:100%;font-size:12px;padding:7px 8px}
.reports-filter-actions{display:flex;gap:6px;flex-wrap:wrap}
.reports-filter-actions .btn{font-weight:500!important;height:30px;min-height:30px;padding:6px 10px}
.report-table-wrap{margin-top:8px;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.report-table{width:100%;min-width:420px;table-layout:auto}
.report-table th,.report-table td{vertical-align:middle;white-space:nowrap}
.router-form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:stretch;margin-bottom:10px}
.router-form-grid .card,.router-form-grid .panel{min-width:0;margin-bottom:0}
.router-panel{background:rgba(5,157,245,.03);border-color:#d8e5f4}
.router-panel h2{background:#10213d}
.router-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:7px 0}
.router-fields > label{padding:8px;min-width:0}
.router-form-grid input,.router-form-grid select,.router-form-grid textarea,.router-form-grid button{max-width:100%}
.form-actions,.button-row,.router-actions{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.router-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.router-table{width:100%;min-width:1100px;table-layout:auto}
.router-table th,.router-table td{vertical-align:middle;white-space:nowrap}
.router-table td.router-id,.router-table td.router-name,.router-table td.router-host,.router-table td.router-protocol,.router-table td.router-port,.router-table td.router-enabled,.router-table td.router-password,.router-table td.router-rotated{white-space:nowrap}
.router-name{min-width:120px;word-break:keep-all;overflow-wrap:normal}
.router-host{min-width:110px}
.router-password-cell{min-width:260px}
.router-actions-cell{min-width:300px}
.router-password-form,.router-password-update{display:flex;gap:6px;align-items:center;flex-wrap:nowrap;max-width:100%;min-width:260px}
.router-password-form input[type=password]{width:150px;min-width:130px;max-width:170px;height:30px;font-size:12px;padding:6px 8px}
.router-password-form .btn,.router-password-update button,.router-actions button,.router-actions a{font-weight:500!important;white-space:nowrap;height:30px;min-height:30px;padding:6px 10px;font-size:11px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.router-actions{display:flex;gap:6px;flex-wrap:nowrap;min-width:max-content;align-items:center}
.router-actions form{display:inline-flex;gap:6px;align-items:center;flex-wrap:nowrap;max-width:100%;margin:0}
.router-actions .btn{min-width:auto}
.router-actions-compact .btn,.router-actions-compact button,.router-actions-compact a{font-weight:500!important;padding:6px 9px;font-size:10px}
.router-table .mono,.router-table .nowrap{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.router-table td.router-host,.router-table td.router-name,.router-table td.router-protocol,.router-table td.router-port,.router-table td.router-enabled,.router-table td.router-password,.router-table td.router-rotated{font-size:11px}
.router-table td.router-actions-cell{white-space:normal}
.router-table td.router-actions-cell .router-actions{flex-wrap:wrap}
.router-table td.router-actions-cell .router-actions form{flex:0 0 auto}
.router-table td.router-actions-cell .router-actions .btn{width:auto}
.router-table .badge{font-size:10px;padding:3px 6px;min-height:20px}
.routers-page .app-main{padding-top:8px}
.routers-page{
  font-family:var(--app-font-family, var(--winbox-font));
}
.routers-page *,
.routers-page input,
.routers-page select,
.routers-page textarea,
.routers-page button,
.routers-page table,
.routers-page .btn{
  font-family:var(--app-font-family, var(--winbox-font));
}
.routers-page .card h2{font-size:12px;padding:7px 9px}
.routers-page .muted,
.routers-page .section-note{font-size:11px}
.routers-page .router-panel,
.routers-page .table-shell{font-size:11px}
.routers-page .router-fields label{font-size:10px}
.routers-page .router-fields input,
.routers-page .router-fields select,
.routers-page .router-fields textarea{
  font-size:12px;
  padding:7px 8px;
  min-height:30px;
}
.routers-page .routers-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 10px;
}
.routers-page .routers-toggle.is-active{
  background:var(--winbox-accent-strong);
  color:#fff;
}
.routers-page .routers-test-status{
  margin:10px 0 12px;
}
.routers-page .routers-test-status .notice{
  margin-bottom:0;
}
.routers-page [hidden]{
  display:none !important;
}
.routers-page .router-actions-compact .btn,
.routers-page .router-actions-compact button,
.routers-page .router-actions-compact a{
  font-size:9px;
  padding:5px 8px;
  min-height:28px;
}
.routers-page .router-table th,
.routers-page .router-table td{
  font-size:10px;
  padding:5px 7px;
}
.routers-page .router-table .badge{
  font-size:9px;
  padding:2px 5px;
}
.routers-page .router-password-form input[type=password]{
  font-size:11px;
  height:28px;
}
.dashboard-quicklinks-panel,
.dashboard-summary-section,
.dashboard-shell-accent + .noc-panel,
.dashboard-shell-accent + .summary-section{
  margin-bottom:14px;
}
.dashboard-panel-blue,
.dashboard-panel-teal,
.dashboard-panel-indigo,
.dashboard-panel-green,
.dashboard-panel-red,
.dashboard-panel-neutral{
  margin-bottom:14px;
}
@media (max-width:1180px){.billing-overview-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:980px){.summary-grid,.filters{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar-inner,.app-main,.steady-navbar{max-width:100%;width:calc(100vw - 24px)}.table-shell{max-width:100%}.billing-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.billing-workspace{grid-template-columns:1fr}.billing-sidebar-panel{width:100%;min-width:0}.billing-sidebar-sticky{position:static}}
@media (max-width:980px){.billing-compact-sections{grid-template-columns:1fr}}
@media (max-width:980px){.billing-snapshot-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .router-form-grid,.job-form-grid{grid-template-columns:1fr}
  .router-form-grid .card,.router-form-grid .panel{padding:10px}
  .button-row,.form-actions{display:flex;flex-wrap:wrap;gap:8px}
  .button-row button,.form-actions button,.button-row a,.form-actions a{flex:1 1 auto;min-width:120px}
  .router-actions{flex-wrap:wrap}
  .router-actions button,.router-actions a{flex:0 0 auto;min-width:auto}
  .router-password-form{flex-wrap:nowrap}
  .router-password-form input[type=password]{flex:0 0 150px;max-width:170px}
  .router-password-form button{flex:0 0 auto}
  .router-table{min-width:1100px}
  .module-link-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .billing-cockpit-page .billing-cockpit-hero{align-items:flex-start;flex-direction:column}
  .billing-overview-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1180px){.noc-two-col,.pppoe-main-grid,.settings-grid,.reports-grid,.clients-profile-grid{grid-template-columns:1fr}.noc-status-strip{grid-template-columns:repeat(3,minmax(0,1fr))}.noc-kpi-grid,.pppoe-kpi-grid,.job-kpi-grid,.proof-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.command-safety-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.job-status-strip,.proof-status-strip,.settings-status-strip,.reports-status-strip,.clients-status-strip{grid-template-columns:repeat(3,minmax(0,1fr))}.reports-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.clients-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.legacy-editor-shell{grid-template-columns:1fr}.legacy-editor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1180px){.billing-cycles-page .portal-shell{width:calc(100vw - 24px)}.due-date-rules-header{flex-direction:column}.due-date-rules-header-meta{justify-items:start;text-align:left}.due-date-rules-overview{grid-template-columns:1fr}.due-date-rules-workspace{grid-template-columns:1fr}.priority-explainer-inline{grid-template-columns:repeat(2,minmax(0,1fr))}.activation-workspace{grid-template-columns:1fr}}
@media (max-width:1180px){
  .loaded-profile-overlay{
    top:72px;
    width:calc(100vw - 18px);
    max-height:calc(100vh - 90px);
  }
  .loaded-profile-overlay .client-loaded-profile-shell{grid-template-columns:1fr}
}
@media (max-width:760px){.noc-kpi-grid,.pppoe-kpi-grid,.job-kpi-grid,.proof-kpi-grid,.noc-mini-grid,.selected-client-grid,.noc-status-strip,.job-status-strip,.proof-status-strip,.settings-status-strip,.reports-status-strip,.clients-status-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.noc-hero h1{font-size:19px}.noc-panel-title{display:grid}.noc-panel-title span{white-space:normal}.noc-kpi strong{font-size:18px}.dashboard-quicklinks .btn{width:calc(50% - 4px)}.command-actions form{width:100%}.command-actions select{max-width:none}.settings-list div{grid-template-columns:1fr;gap:3px}.reports-filter-grid,.clients-filter-grid{grid-template-columns:1fr}.reports-filter-actions .btn,.clients-filter-actions .btn{width:auto}.client-actions{min-width:0}.client-card-header{flex-direction:column}.client-card-title-wrap{width:100%;flex-direction:column;align-items:flex-start}.client-card-badges{justify-content:flex-start}.client-card-billing-grid{grid-template-columns:1fr;gap:6px}.billing-balance-pill{justify-self:stretch;align-items:flex-start;text-align:left;min-width:0}.billing-balance-pill strong{font-size:15px}.client-card-secondary-line{flex-direction:column;align-items:flex-start;gap:4px}.payment-option-grid,.settings-list.compact{grid-template-columns:1fr}.proof-actions{flex-wrap:wrap}.proof-table td:last-child{min-width:0;white-space:normal}.router-table{min-width:980px}.router-actions-compact{flex-wrap:wrap}.router-password-form{flex-wrap:wrap}.router-password-form input[type=password]{flex:1 1 150px;max-width:100%}.legacy-editor-grid,.legacy-balance-grid{grid-template-columns:1fr}.legacy-history-list div{grid-template-columns:1fr}.client-profile-form .btn{width:100%}}
@media (max-width:1100px){.job-workspace{grid-template-columns:1fr}.sticky-panel-title{top:132px}.job-queue-shell{max-height:none}.job-modal-card{right:8px;left:8px;width:auto}}
@media (max-width:760px){.job-header{position:static}.job-filters-panel{position:static}.job-filter-grid,.job-summary-row,.job-details-hero,.job-details-grid{grid-template-columns:1fr}.job-header-actions,.job-filter-actions,.job-details-actions,.job-modal-actions{justify-content:stretch}.job-header-actions .btn,.job-filter-actions .btn,.job-details-actions .btn,.job-details-actions .job-inline-form,.job-modal-actions .btn{width:100%}.job-queue-table{min-width:980px}.job-modal-card{top:8px;bottom:8px;padding:12px}.sticky-panel-title{top:0}}
@media print{
  body{background:#fff!important}
  .navbar,.footer,.job-header-actions,.job-filters-panel,.job-summary-row,.job-queue-panel,.job-modal,.flash,.notice,.job-details-actions-secondary,.job-details-actions .btn.secondary[data-open-job-modal],.job-details-actions .btn.danger,.job-details-actions .btn.secondary:last-child{display:none!important}
  .job-orders-shell{display:block}
  .job-workspace{display:block}
  .job-details-panel{display:block!important;border:0;box-shadow:none;background:#fff}
  .job-header{position:static;background:#fff;backdrop-filter:none;border:0;padding:0 0 8px;margin:0 0 8px}
  .job-details-panel .noc-panel-title,.job-details-panel .job-details-stack,.job-details-panel .job-details-form{display:block}
  .job-details-panel .job-details-hero{grid-template-columns:repeat(3,minmax(0,1fr))}
  .job-details-panel input,.job-details-panel select,.job-details-panel textarea{border:0;background:transparent;padding:0;box-shadow:none}
  .job-details-panel .job-details-grid label{border:0;background:transparent;padding:0}
  .job-details-panel .btn{display:none!important}
  .job-details-panel .badge{border:1px solid #999;color:#000;background:#fff}
  .job-details-panel .job-details-actions{display:none}
  .job-details-panel .job-empty-state{display:block;min-height:auto}
  .job-details-panel .sticky-panel-title{position:static;background:#fff;padding:0;margin-bottom:8px}
}
@media (max-width:760px){.bill-account-primary{grid-template-columns:1fr}.bill-summary-hero{grid-template-columns:1fr}.bill-focus-card{padding:8px}}
@media (max-width:760px){
  .portal-hero{flex-direction:column}
  .portal-hero-chip{width:100%}
  .portal-ribbon{width:100%;justify-content:center}
  .portal-alert-banner,.portal-restore-cta{flex-direction:column;align-items:flex-start}
  .portal-support-panel{grid-template-columns:1fr}
  .portal-status-strip{grid-template-columns:1fr;justify-items:start}
  .portal-status-amount{text-align:left}
  .portal-help-grid{grid-template-columns:1fr}
  .portal-card{margin-top:12px}
}
@media (max-width:760px){.billing-cycles-page .portal-shell{width:calc(100vw - 14px)}.due-date-rules-page{gap:10px}.due-date-rules-header,.due-date-rule-card{padding:10px}.due-date-rules-header{gap:8px}.due-date-rules-overview{grid-template-columns:1fr}.due-date-rules-workspace{grid-template-columns:1fr}.due-date-default-card{grid-template-columns:1fr}.priority-explainer-inline{grid-template-columns:1fr}.due-date-rule-form-grid{grid-template-columns:1fr}.due-date-rule-form-grid label{min-width:0}.due-date-rule-form-actions{justify-content:stretch}.due-date-rule-form-actions .btn,.due-date-rule-form-actions .btn.secondary{width:100%}.due-date-rules-table col.due-date-col-type,.due-date-rules-table col.due-date-col-target,.due-date-rules-table col.due-date-col-duedate,.due-date-rules-table col.due-date-col-grace,.due-date-rules-table col.due-date-col-status,.due-date-rules-table col.due-date-col-actions{width:auto}.activation-status-strip{grid-template-columns:1fr}.activation-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.activation-form-grid{grid-template-columns:1fr}.activation-form-grid label{min-width:0}.activation-selected-card{grid-template-columns:1fr}.activation-form-actions{justify-content:stretch}.activation-form-actions .btn,.activation-form-actions .btn.secondary{width:100%}.activation-next-step-actions .btn,.activation-next-step-actions a{width:100%}}
/* Activation Center modern shell overrides */
body.activation-surface{background:#edf2f7;color:var(--winbox-text)}
.activation-page{
  margin:0;
  box-sizing:border-box;
  width:100%;
  min-width:0;
  display:grid;
  gap:7px;
}
.activation-header-card,.activation-page .noc-hero{width:100%;box-sizing:border-box;margin-bottom:6px;padding:9px 10px;border:1px solid #d9e4f1;border-radius:10px;background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);box-shadow:0 10px 24px rgba(15,23,42,.06)}
.activation-header-card{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.activation-section-label,.activation-page .noc-hero .noc-eyebrow{margin:0 0 4px;color:#1e3a8a;text-transform:uppercase;font-size:10px;font-weight:800;letter-spacing:.08em}
.activation-header-card h1,.activation-page .noc-hero h1{margin:0;font-size:18px;line-height:1.1}
.activation-header-card .hero-subtitle,.activation-page .noc-hero .hero-subtitle{margin-top:4px;font-size:11px;line-height:1.25;color:var(--winbox-muted);max-width:760px}
.activation-kpi-grid{gap:8px;margin-bottom:8px}
.activation-page .noc-kpi{padding:10px;border-radius:8px;min-height:72px;background:#fff;border:1px solid #d9e4f1;box-shadow:0 8px 18px rgba(15,23,42,.05)}
.activation-page .noc-kpi span{font-size:10px;text-transform:uppercase;letter-spacing:0;color:var(--winbox-muted);margin-bottom:4px}
.activation-page .noc-kpi strong{font-size:18px;line-height:1;color:#10213d}
.activation-workspace{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:10px;align-items:start}
.activation-panel-card{background:#fff;border:1px solid #d9e4f1;border-radius:10px;box-shadow:0 10px 24px rgba(15,23,42,.06);padding:10px}
.activation-page .noc-panel{padding:10px;background:#fff;border:1px solid #d9e4f1;box-shadow:0 10px 24px rgba(15,23,42,.06);border-radius:10px}
.activation-hero{gap:10px}
.activation-hero-meta{gap:6px}
.activation-hero-chip{padding:8px 10px;border:1px solid #d9e4f1;border-radius:10px;background:#f8fbff}
.activation-toolbar{display:grid;gap:8px}
.activation-tabs{display:flex;flex-wrap:wrap;gap:6px}
.activation-tab{
  appearance:none;
  border:1px solid #d9e4f1;
  background:#f8fbff;
  color:#1f3c5b;
  border-radius:999px;
  padding:7px 11px;
  min-height:30px;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  cursor:pointer;
}
.activation-tab.is-active{
  background:#2563eb;
  border-color:#2563eb;
  color:#fff;
  box-shadow:0 8px 18px rgba(37,99,235,.18);
}
.activation-toolbar-note{display:flex;align-items:center;gap:6px;padding:7px 9px;border-radius:10px;background:#f8fbff;border:1px solid #d9e4f1;color:#1f3c5b;font-size:11px}
.activation-form{display:grid;gap:8px}
.activation-form-section{display:grid;gap:8px;padding:0}
.activation-form-section-card{
  padding:10px;
  border:1px solid #e1ebf7;
  border-radius:12px;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);
}
.activation-form-grid{gap:8px}
.activation-form-grid label{display:grid;gap:4px;padding:8px 9px;border:1px solid #d9e4f1;border-radius:10px;background:#f8fbff;font-size:10px;min-width:0}
.activation-form-grid input,.activation-form-grid select,.activation-form-grid textarea{padding:8px 9px;font-size:12px;min-height:38px;border-radius:9px}
.activation-form-grid textarea{min-height:84px}
.activation-form-actions{gap:7px;padding-top:2px}
.activation-queue-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.activation-request-card{
  position:relative;
  display:grid;
  gap:8px;
  padding:10px 10px 10px 12px;
  border:1px solid #d9e4f1;
  border-radius:10px;
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);
  box-shadow:0 8px 18px rgba(15,23,42,.05);
  overflow:hidden;
}
.activation-request-card::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:linear-gradient(180deg,#60a5fa 0%,#2563eb 100%);
}
.activation-request-card.activation-status-approved::before,
.activation-request-card.activation-status-pppoe-created::before{
  background:linear-gradient(180deg,#38bdf8 0%,#2563eb 100%);
}
.activation-request-card.activation-status-installed::before{
  background:linear-gradient(180deg,#22c55e 0%,#16a34a 100%);
}
.activation-request-card.activation-status-cancelled::before,
.activation-request-card.activation-status-failed::before,
.activation-request-card.activation-status-rejected::before{
  background:linear-gradient(180deg,#f87171 0%,#dc2626 100%);
}
.activation-request-card.activation-status-for-approval::before,
.activation-request-card.activation-status-pending::before,
.activation-request-card.activation-status-new::before{
  background:linear-gradient(180deg,#94a3b8 0%,#64748b 100%);
}
.activation-request-card.is-selected{
  border-color:#93c5fd;
  box-shadow:0 12px 26px rgba(30,64,175,.12);
}
.activation-request-card.is-selected::before{
  background:linear-gradient(180deg,#f59e0b 0%,#ef4444 100%);
}
.activation-request-card-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
.activation-request-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.activation-card-label{margin:0 0 4px;color:#64748b;font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:800}
.activation-request-card h3{margin:0;font-size:15px;color:#10213d}
.activation-request-card .badge{
  font-size:9px;
  min-height:20px;
  padding:2px 7px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.activation-card-subline{margin:4px 0 0;color:#64748b;font-size:11px}
.activation-request-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.activation-request-meta div{
  padding:9px 10px;
  border-radius:12px;
  background:#f8fbff;
  border:1px solid #e1ebf7;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
.activation-request-meta span{display:block;margin-bottom:3px;color:#64748b;font-size:10px;text-transform:uppercase;font-weight:800;letter-spacing:.04em}
.activation-request-meta strong{display:block;color:#10213d;font-size:12px;line-height:1.25}
.activation-request-meta small{display:block;margin-top:2px;color:#64748b;font-size:10px}
.activation-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding-top:2px;
  border-top:1px solid #e5eef8;
}
.activation-actions .btn,.activation-actions a{min-height:30px;height:30px;padding:6px 10px;border-radius:10px;font-size:11px}
.activation-empty-state{min-height:180px;display:grid;place-items:center;text-align:center;padding:18px 14px;border:1px dashed #cbd5e1;border-radius:12px;background:#fbfdff}
.activation-empty-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#eaf2ff;color:#1e3a8a;font-size:20px;margin-bottom:6px}
.activation-empty-state h3{margin:0;font-size:14px;color:#10213d}
.activation-empty-state p{margin:5px 0 0;max-width:320px;color:#64748b;font-size:11px;line-height:1.35}
@media (max-width:1024px){
  .activation-workspace{grid-template-columns:1fr}
  .activation-queue-grid{grid-template-columns:1fr}
  .activation-header-card{flex-direction:column}
}
@media (max-width:760px){
  .activation-header-card,.activation-page .noc-panel,.activation-panel-card{padding:12px;border-radius:14px}
  .activation-header-card h1{font-size:20px}
  .activation-hero-meta{grid-template-columns:1fr}
  .activation-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .activation-workspace{grid-template-columns:1fr}
  .activation-form-grid,.activation-request-meta{grid-template-columns:1fr}
  .activation-request-card-head{flex-direction:column}
  .activation-actions .btn,.activation-actions a{flex:1 1 calc(50% - 6px)}
  .activation-tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:2px;
    -webkit-overflow-scrolling:touch;
  }
  .activation-tab{
    flex:0 0 auto;
    white-space:nowrap;
  }
}
@media (max-width:760px){
  .loaded-profile-overlay{
    top:64px;
    width:calc(100vw - 10px);
    max-height:calc(100vh - 74px);
    border-radius:12px;
  }
  .loaded-profile-modal-body{
    max-height:calc(100vh - 150px);
    padding:10px;
  }
}
@media (max-width:640px){
  body{font-size:13px}
  .login-body{padding:14px}
  .topbar{padding:8px 10px}
  .app-main,.steady-navbar{width:calc(100vw - 14px)}
  .summary-grid,.filters,.bill-grid,.proof-grid,.payment-grid,.router-fields,.job-field-grid,.job-technical-grid{grid-template-columns:1fr}
  .topbar-inner{align-items:flex-start;flex-direction:column;gap:8px}
  .topbar-meta{align-items:flex-start}
  .brand-link{align-items:center}
  .brand-logo{max-height:30px;max-width:140px}
  .license-chip{font-size:9px;padding:4px 8px;max-width:100%}
  .steady-navbar{align-items:center}
  .module-link-grid{grid-template-columns:1fr}
  .billing-kpi-grid,.billing-overview-kpis,.billing-snapshot-list,.billing-summary-grid{grid-template-columns:1fr}
  .billing-client-row{grid-template-columns:1fr}
  .billing-ledger-table{min-width:980px}
  .portal-actions{justify-content:stretch}
  .portal-actions .btn{width:100%}
  .portal-primary-btn{width:100%}
  .card{padding:9px}
  .toolbar-row{align-items:stretch}
  .toolbar-row > *{flex:1 1 160px}
  .router-actions > *{flex:0 0 auto}
  .btn,.action-btn{width:100%}
  .router-actions .btn,.router-password-form .btn,.job-actions .btn,.proof-actions .btn{width:auto}
  th,td{font-size:11px;padding:6px 7px}
  .login-shell{margin-top:0}
  .login-card{padding:14px}
  .login-brand{margin-bottom:14px}
  .login-logo{max-width:150px;max-height:72px;margin:0 auto 10px auto}
  .login-title{font-size:18px}
  .login-subtitle{font-size:12px}
  .noc-kpi-grid,.pppoe-kpi-grid,.job-kpi-grid,.proof-kpi-grid,.noc-mini-grid,.selected-client-grid,.noc-status-strip,.job-status-strip,.proof-status-strip,.settings-status-strip,.reports-status-strip,.clients-status-strip,.command-safety-grid{grid-template-columns:1fr}
  .dashboard-shell,.noc-panel{padding:9px}
  .dashboard-head{flex-direction:column}
  .dashboard-head-meta{justify-content:flex-start}
  .dashboard-quicklinks{gap:6px}
  .dashboard-quicklinks .btn{width:100%}
  .noc-kpi{min-height:60px}
  .router-table{min-width:900px}
  .router-table th,.router-table td{padding:6px 7px}
  .router-password-cell{min-width:220px}
  .router-actions-cell{min-width:220px}
  .job-table{min-width:900px}
  .proof-table{min-width:0}
  .report-table{min-width:360px}
  .clients-table{min-width:980px}
  .router-form-grid{gap:10px}
  .router-form-grid label{font-size:11px}
  .router-form-grid input,.router-form-grid select{font-size:13px;padding:8px 9px}
  .job-filter,.proof-filter{flex:1 1 calc(50% - 8px)}
  .job-add-button{margin-left:0;width:100%}
  .clients-filter-actions .btn{width:100%}
  .client-card-main,.client-card-sub{grid-template-columns:1fr}
  .client-card-main .client-card-balance{grid-column:auto;justify-self:stretch;text-align:left;min-width:0}
  .client-card-main .client-card-balance span,.client-card-main .client-card-balance strong{text-align:left}
  .client-card-main .client-card-balance strong{font-size:15px}
  .client-card .client-actions a,.client-card .client-actions button{flex:1 1 auto}
  .payment-option-grid{grid-template-columns:1fr}
  .settings-list.compact{grid-template-columns:1fr}
  .proof-actions{width:100%}
  .proof-actions select,.proof-actions input[type=number]{width:100%;min-width:0}
  .proof-table td:last-child{min-width:0;white-space:normal}
  .router-actions-compact{gap:5px}
  .router-actions-compact .btn,.router-actions-compact button,.router-actions-compact a{width:auto}
}

.receipt-page{background:var(--winbox-bg);min-height:100vh;margin:0;color:var(--winbox-text);font-family:var(--winbox-font)}
.receipt-paper{width:80mm;max-width:100%;margin:0 auto;background:#fff;color:#111827;padding:9px;font-family:"Courier New",monospace;font-size:11.5px;line-height:1.3;box-shadow:0 0 0 1px rgba(15,23,42,.08)}
.brand{font-size:15px}
.topbar-subtitle{font-size:11px}
.nav-button{font-size:11px}
.nav-button.nav-button-topology{font-size:10px}
.page-hero h1,
.noc-hero h1,
.profile-header-shell h1,
.login-title{font-size:17px;line-height:1.1}
.hero-subtitle,
.section-note,
.muted,
.breadcrumbs{font-size:11px}
.panel-title h2,
.card h2,
.noc-panel-title h2,
.dashboard-summary-title h2,
.subsection-card-title{font-size:12px}
.panel-title span,
.noc-panel-title span{font-size:10px}
label{font-size:10px}
input,textarea,select{font-size:11px;line-height:1.25}
.btn,.action-btn{font-size:11px}
th,td{font-size:11px}
.badge,
.status-badge{font-size:10px}
.settings-list span,
.noc-status-strip span,
.noc-kpi span,
.noc-mini-grid span{font-size:10px}
.settings-list strong,
.summary-grid strong,
.noc-status-strip strong,
.noc-mini-grid strong,
.client-card strong{font-size:12px}
.noc-kpi strong{font-size:17px}
.client-profile-page{font-size:11px;line-height:1.25}
.client-profile-page .hero-subtitle{font-size:11px}
.client-profile-page .settings-list span{font-size:10px}
.client-profile-page .settings-list strong{font-size:12px}
.routers-page .section-note,
.routers-page .router-fields label,
.reports-filter-grid label,
.clients-filter-grid label,
.job-field-grid label,
.job-technical-grid label,
.proof-inline-label,
.proof-filter,
.job-filter,
.billing-cycle-confirm-form label,
.command-safety-grid span{font-size:11px}
.routers-page .router-fields input,
.routers-page .router-fields select,
.reports-filter-grid input,
.reports-filter-grid select,
.clients-filter-grid input,
.clients-filter-grid select,
.job-field-grid input,
.job-field-grid select,
.job-field-grid textarea,
.job-technical-grid input,
.job-technical-grid select,
.job-technical-grid textarea{font-size:13px}
.receipt-paper{font-family:"Courier New",Consolas,monospace}
.mono,.code-value,.account-number,.pppoe-username,.reference-number,.receipt-number,.settings-key,.copy-block,.command-box{font-family:var(--font-mono)}
.settings-page .settings-list strong,.clients-page .settings-list strong,.pppoe-ops-page .settings-list strong,.reports-page .settings-list strong,.dashboard-page .settings-list strong{font-family:var(--font-mono)}
.client-card .nowrap,.pppoe-row td:nth-child(1),.pppoe-row td:nth-child(3),.pppoe-row td:nth-child(4),.pppoe-row td:nth-child(5),.pppoe-row td:nth-child(8),.report-table td:nth-child(3),.report-table td:nth-child(4),.report-table td:nth-child(5),.receipt-row strong{font-family:var(--font-mono)}
.clients-page,
.client-profile-page,
.network-map-page,
.topology-tree-page{
  font-size:14px;
  line-height:1.42;
}
.network-map-page,
.topology-tree-page{
  font-family:var(--app-font-family, var(--winbox-font));
}
.clients-page .page-hero h1,
.client-profile-page .profile-header-shell h1,
.network-map-page .noc-hero h1,
.topology-tree-page .noc-hero h1{
  font-size:18px;
  line-height:1.12;
}
.clients-page .hero-subtitle,
.clients-page .section-note,
.client-profile-page .hero-subtitle,
.client-profile-page .section-note,
.network-map-page .section-note,
.topology-tree-page .section-note{
  font-size:12px;
  line-height:1.35;
}
.clients-page .panel-title h2,
.client-profile-page .panel-title.dark-title h2,
.network-map-page .noc-panel-title h2,
.topology-tree-page .noc-panel-title h2,
.topology-tree-page .topology-sidebar-head h2{
  font-size:13px;
  line-height:1.15;
}
.clients-page .panel-title span,
.client-profile-page .panel-title span,
.network-map-page .noc-panel-title span,
.topology-tree-page .noc-panel-title span,
.topology-tree-page .topology-toolbar-note{
  font-size:11px;
  line-height:1.3;
}
.clients-page .summary-grid span,
.clients-page .client-card span,
.clients-page .clients-filter-grid label,
.client-profile-page .profile-field-grid span,
.client-profile-page .settings-list span,
.client-profile-page .summary-grid span,
.network-map-page .network-map-filter-grid label,
.network-map-page .network-map-selected-head span,
.network-map-page .network-map-legend strong,
.topology-tree-page .topology-tree-code,
.topology-tree-page .topology-tree-name,
.topology-tree-page .topology-port-number,
.topology-tree-page .topology-port-submeta,
.topology-tree-page .topology-node-meta{
  font-size:11px;
  line-height:1.22;
}
.clients-page .summary-grid strong,
.clients-page .client-card strong,
.client-profile-page .profile-field-grid strong,
.client-profile-page .settings-list strong,
.client-profile-page .summary-grid strong,
.network-map-page .network-map-selected-head strong,
.network-map-page .network-map-selected-grid strong,
.topology-tree-page .topology-node-header h3,
.topology-tree-page .topology-node-header h4,
.topology-tree-page .topology-node-header h5,
.topology-tree-page .topology-port-label,
.topology-tree-page .topology-port-summary strong{
  font-size:13px;
  line-height:1.22;
}
.clients-page .client-card .client-actions a,
.clients-page .client-card .client-actions button,
.client-profile-page .profile-toolbar .btn,
.client-profile-page .profile-actions-stack .btn,
.client-profile-page .profile-form-actions .btn,
.network-map-page .network-map-selected-actions .btn,
.topology-tree-page .topology-node-actions .btn,
.topology-tree-page .topology-port-actions .btn,
.topology-tree-page .topology-toolbar-actions .btn{
  font-size:11px;
}
.clients-page .clients-filter-grid input,
.clients-page .clients-filter-grid select,
.client-profile-page input,
.client-profile-page textarea,
.client-profile-page select,
.network-map-page .network-map-filter-grid input,
.network-map-page .network-map-filter-grid select{
  font-size:13px;
}
.clients-page .clients-table th,
.clients-page .clients-table td,
.client-profile-page th,
.client-profile-page td,
.network-map-page .network-map-selected-grid > div,
.topology-tree-page .topology-port-summary > div{
  font-size:11px;
}
.network-map-page .network-map-selected-grid span,
.topology-tree-page .topology-port-summary span{
  font-size:9px;
}
.topology-tree-page .topology-port-actions .btn{
  min-height:24px;
  height:24px;
  padding:3px 6px;
}
.topology-tree-page .topology-node-actions .btn,
.topology-tree-page .topology-toolbar-actions .btn{
  min-height:26px;
  height:26px;
  padding:4px 8px;
}
.clients-page .client-card span,
.client-profile-page .profile-field-grid span,
.client-profile-page .settings-list span,
.client-profile-page .summary-grid span{
  color:#60738f;
}
.network-map-page .network-map-selected-grid strong,
.network-map-page .network-map-selected-head strong,
.topology-tree-page .topology-port-label,
.topology-tree-page .topology-node-header h3,
.topology-tree-page .topology-node-header h4,
.topology-tree-page .topology-node-header h5{
  color:#0f172a;
}
.dashboard-page .page-hero h1,
.clients-page .page-hero h1,
.client-profile-page .profile-header-shell h1,
.noc-page .noc-hero h1,
.login-title,
.public-kicker{
  font-size:20px;
  line-height:1.15;
  font-weight:700;
}
.dashboard-page .summary-grid span,
.clients-page .card span,
.client-profile-page .card span,
.noc-page .noc-kpi span,
.noc-page .noc-mini-grid span,
.client-map-page .client-map-selected-panel span,
.topology-tree-page .topology-node-meta,
.topology-tree-page .topology-port-submeta{
  font-size:10px;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:.04em;
  color:#64748b;
  line-height:1.2;
}
.dashboard-page .summary-grid strong,
.clients-page .card strong,
.client-profile-page .card strong,
.client-profile-page .settings-list strong,
.client-profile-page .profile-field-grid strong,
.client-map-page .client-map-selected-panel strong,
.noc-page .noc-kpi strong,
.noc-page .noc-mini-grid strong,
.topology-tree-page .topology-node-header strong,
.topology-tree-page .topology-port-summary strong{
  font-size:13px;
  line-height:1.25;
  font-weight:600;
  color:#0f172a;
}
.dashboard-page .module-link-card strong,
.clients-page .client-card-title,
.client-profile-page .profile-title-row h1,
.client-profile-page .subsection-card-title,
.noc-page .noc-panel-title h2,
.topology-tree-page .topology-node-header h3,
.topology-tree-page .topology-node-header h4,
.topology-tree-page .topology-node-header h5{
  font-size:14px;
  line-height:1.2;
  font-weight:700;
}
.dashboard-page .module-link-card span,
.clients-page .client-card-secondary-line,
.client-profile-page .section-note,
.client-profile-page .hero-subtitle,
.client-map-page .section-note,
.topology-tree-page .topology-toolbar-note{
  font-size:9px;
  line-height:1.25;
  color:#64748b;
}
.receipt-center{text-align:center}
.receipt-row{display:flex;justify-content:space-between;gap:8px;margin:2px 0}
.receipt-divider{border-top:1px dashed #111827;margin:8px 0}
@media print{body *{visibility:hidden}.receipt-paper,.receipt-paper *{visibility:visible}.receipt-paper{position:absolute;left:0;top:0;width:80mm;box-shadow:none;margin:0}.no-print{display:none!important}@page{size:80mm auto;margin:3mm}}

/* Final typography normalization for admin UI */
.app-main, .app-main *{font-family:var(--font-ui)}
.app-main .page-title,
.app-main .noc-hero h1,
.app-main .page-hero h1,
.app-main .profile-header-shell h1,
.app-main .login-title,
.app-main .public-kicker{font-size:17px;line-height:1.1;font-weight:700}
.app-main .section-title,
.app-main .panel-title h2,
.app-main .noc-panel-title h2,
.app-main .dashboard-summary-title h2,
.app-main .subsection-card-title{font-size:12px;line-height:1.15;font-weight:700}
.app-main .card-title,
.app-main .client-card-title,
.app-main .module-link-card strong{font-size:12px;line-height:1.15;font-weight:700}
.app-main .text-label,
.app-main label,
.app-main .summary-grid span,
.app-main .noc-status-strip span,
.app-main .noc-kpi span,
.app-main .noc-mini-grid span,
.app-main .client-card span,
.app-main .settings-list span,
.app-main .bill-grid span,
.app-main .topology-node-meta,
.app-main .topology-port-submeta,
.app-main .proof-inline-label,
.app-main .billing-cycle-confirm-form label,
.app-main .job-field-grid label,
.app-main .job-technical-grid label,
.app-main .reports-filter-grid label,
.app-main .clients-filter-grid label{font-size:10px;line-height:1.2;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#64748b}
.app-main .text-value,
.app-main .summary-grid strong,
.app-main .noc-kpi strong,
.app-main .noc-mini-grid strong,
.app-main .settings-list strong,
.app-main .profile-field-grid strong,
.app-main .client-map-selected-panel strong,
.app-main .topology-port-summary strong,
.app-main .network-map-selected-grid strong,
.app-main .bill-grid strong,
.app-main .client-card-identity-line strong,
.app-main .billing-plan-pill strong,
.app-main .billing-due-pill strong,
.app-main .billing-balance-pill strong{font-size:12px;line-height:1.25;font-weight:600;color:#0f172a}
.app-main .text-muted,
.app-main .hero-subtitle,
.app-main .section-note,
.app-main .muted,
.app-main .topology-toolbar-note,
.app-main .dashboard-lede{font-size:11px;line-height:1.3;color:#64748b}
.app-main .text-code,
.app-main .account-number,
.app-main .pppoe-username,
.app-main .code-value,
.app-main .reference-number,
.app-main .receipt-number,
.app-main .topology-tree-code,
.app-main .topology-port-number,
.app-main .topology-port-label,
.app-main .client-map-selected-panel .text-code{font-family:var(--font-mono);font-size:11px;line-height:1.2;font-weight:600}
.app-main .btn,
.app-main .action-btn{font-size:11px;line-height:1.1;font-weight:700}
.app-main .badge,
.app-main .status-badge{font-size:10px;line-height:1.1;font-weight:700}
.app-main th,
.app-main td{font-size:11px;line-height:1.25}
.app-main .client-card-title{letter-spacing:0}
.app-main .dashboard-banner-card span{font-size:10px;font-weight:800}
.app-main .dashboard-banner-card strong{font-size:11px;font-weight:700}
.app-main .noc-kpi strong{font-size:17px;font-weight:700}
.app-main .client-card .client-actions a,
.app-main .client-card .client-actions button,
.app-main .profile-toolbar .btn,
.app-main .profile-actions-stack .btn,
.app-main .profile-form-actions .btn,
.app-main .network-map-selected-actions .btn,
.app-main .topology-node-actions .btn,
.app-main .topology-port-actions .btn,
.app-main .topology-toolbar-actions .btn,
.app-main .coverage-map-actions .btn{font-size:11px;font-weight:700;line-height:1.1}
.app-main .billing-balance-pill strong{font-size:13px}
.app-main .client-card-secondary-line,
.app-main .client-card-secondary-line strong{font-size:11px;line-height:1.3}
.app-main .client-card-secondary-line span{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}

/* Admin visual polish system */
.admin-page{background:var(--mz-bg)}
.admin-page .app-main{padding-top:6px}
.admin-section,
.admin-card,
.admin-panel,
.noc-panel,
.panel,
.card,
.profile-header-shell,
.page-hero,
.dashboard-shell,
.client-map-shell,
.coverage-map-panel,
.coverage-map-legend-panel{
  background:#fff;
  border:1px solid #dbeafe;
  border-radius:12px;
  box-shadow:0 2px 10px rgba(15,23,42,.04);
}
.admin-section,
.admin-card,
.admin-panel,
.noc-panel,
.panel{
  padding:12px;
  margin-bottom:11px;
}
.admin-card-header,
.panel-title,
.noc-panel-title,
.dashboard-summary-title{
  margin-bottom:10px;
}
.admin-card-title,
.panel-title h2,
.noc-panel-title h2,
.dashboard-summary-title h2{
  font-size:14px;
  line-height:1.2;
  font-weight:700;
}
.admin-grid,
.noc-two-col,
.profile-layout-2,
.profile-field-grid,
.noc-kpi-grid,
.summary-grid,
.clients-filter-grid,
.coverage-map-actions{
  gap:11px;
}
.admin-row,
.toolbar-row,
.profile-actions-stack,
.client-actions,
.coverage-map-actions{
  gap:8px;
}
.admin-meta,
.section-note,
.hero-subtitle,
.dashboard-lede,
.muted{
  font-size:12px;
  line-height:1.35;
}
.admin-actions .btn,
.admin-button,
.admin-button-secondary,
.btn,
.action-btn{
  min-height:30px;
  padding:6px 10px;
  font-size:11px;
  font-weight:700;
  border-radius:8px;
}
.admin-button-danger,
.btn.danger,
.action-btn.danger{
  background:#dc2626;
}
.admin-badge,
.badge,
.status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:20px;
  padding:2px 8px;
  font-size:10px;
  font-weight:700;
  border-radius:999px;
}
.admin-table,
table{
  font-size:12px;
}
.admin-table th,
.admin-table td,
th,
td{
  padding:7px 9px;
  line-height:1.3;
}
.admin-kpi,
.noc-kpi,
.card,
.billing-plan-pill,
.billing-due-pill,
.billing-balance-pill{
  border-radius:12px;
}
.client-card{
  padding:12px;
  border-radius:12px;
  border-color:#dbeafe;
  background:#fff;
}
.client-card-header{
  margin-bottom:8px;
}
.client-card-title{
  font-size:14px;
  font-weight:700;
  line-height:1.2;
}
.client-card-identity,
.billing-plan-pill,
.billing-due-pill,
.billing-balance-pill{
  border-radius:10px;
  box-shadow:none;
}
.client-card-billing-grid{
  gap:10px;
}
.client-card .client-actions a,
.client-card .client-actions button{
  min-height:30px;
  padding:6px 10px;
  font-size:11px;
  border-radius:8px;
}
.client-card .badge,
.client-card .client-card-selected-badge{
  min-height:20px;
  font-size:10px;
}
.client-card .client-actions{
  margin-top:8px;
}
.client-card .client-actions .client-action-archive{
  display:none;
}
.pppoe-search-result-card,
.client-search-suggestion{
  border-radius:10px;
  padding:9px 10px;
}
.pppoe-search-result-card strong,
.client-search-suggestion strong{
  font-size:13px;
  line-height:1.2;
}
.pppoe-search-result-card span,
.client-search-suggestion span{
  font-size:11px;
  line-height:1.25;
}
.client-map-page .client-map-selected-panel,
.client-map-page .coverage-map-legend-panel,
.topology-tree-page .noc-panel{
  padding:12px;
}
.client-map-page .client-map-selected-panel .client-map-selected-panel-title{
  font-size:13px;
  font-weight:600;
}
.topology-tree-page .topology-node-header h3,
.topology-tree-page .topology-node-header h4,
.topology-tree-page .topology-node-header h5,
.topology-tree-page .topology-port-label{
  font-size:13px;
  line-height:1.2;
  font-weight:500;
}
.topology-tree-page .topology-tree-level-tag-iconized{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.topology-tree-page .topology-tree-level-icon{
  width:11px;
  height:11px;
  display:inline-block;
  border-radius:3px;
  background:linear-gradient(180deg,#4ea3ff 0%, #2563eb 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), 0 0 0 1px rgba(37,99,235,.15);
  position:relative;
  flex:0 0 11px;
}
.topology-tree-page .topology-tree-level-icon::before,
.topology-tree-page .topology-tree-level-icon::after{
  content:"";
  position:absolute;
  background:rgba(255,255,255,.92);
  border-radius:1px;
}
.topology-tree-page .topology-tree-level-icon::before{
  width:5px;
  height:1px;
  left:3px;
  top:3px;
  box-shadow:0 3px 0 rgba(255,255,255,.92);
}
.topology-tree-page .topology-tree-level-icon::after{
  width:1px;
  height:5px;
  left:5px;
  top:2px;
}
.topology-tree-page .topology-tree-node-icon{
  width:10px;
  height:10px;
  display:inline-block;
  flex:0 0 10px;
  border-radius:2px;
  background:linear-gradient(180deg,#8bb7ff 0%, #3b82f6 100%);
  position:relative;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
}
.topology-tree-page .topology-tree-node-icon-lcp::before,
.topology-tree-page .topology-tree-node-icon-nap::before{
  content:"";
  position:absolute;
  inset:2px 2px auto auto;
  width:4px;
  height:4px;
  border-radius:1px;
  background:rgba(255,255,255,.95);
}
.topology-tree-page .topology-tree-node-icon-lcp{
  background:linear-gradient(180deg,#7dd3fc 0%, #0ea5e9 100%);
}
.topology-tree-page .topology-tree-node-icon-nap{
  background:linear-gradient(180deg,#a5b4fc 0%, #6366f1 100%);
}
.topology-tree-page .topology-port-summary strong,
.topology-tree-page .topology-node-meta{
  font-size:11px;
  line-height:1.25;
  font-weight:400;
  font-family:Inter,"Segoe UI",Tahoma,Arial,sans-serif;
}
.dashboard-page .dashboard-banner-card,
.dashboard-page .noc-panel,
.dashboard-page .noc-kpi{
  border-radius:12px;
}

@media (max-width:1180px){
  .settings-dashboard-page{width:calc(100vw - 24px)}
  .settings-dashboard-header{flex-direction:column}
  .settings-dashboard-header-meta{justify-content:flex-start}
  .settings-status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .settings-main-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:760px){
  .settings-dashboard-page{width:calc(100vw - 14px);gap:8px}
  .settings-dashboard-header{padding:10px}
  .settings-status-grid,.settings-main-grid{grid-template-columns:1fr}
  .settings-status-card,.settings-card{padding:10px}
  .settings-fact{grid-template-columns:1fr;gap:3px}
  .settings-card-actions,.settings-status-card-actions{align-items:stretch}
  .settings-action-link{width:100%}
  .settings-theme-grid{grid-template-columns:1fr}
  .settings-theme-actions{flex-direction:column}
  .settings-theme-save,
  .settings-theme-reset{width:100%}
}

/* WinBox global font and surface normalization */
html, body, body *, button, input, select, textarea, table, .btn, .action-btn, .badge, .status-badge, .nav-button, .nav-link, .card, .panel, .portal-body, .receipt-page, .login-body{
  font-family:var(--app-font-family, var(--winbox-font))!important;
}
body,
.portal-body,
.receipt-page,
.login-body,
.admin-page,
.dashboard-page,
.clients-page,
.clients-list-page,
.client-profile-page,
.billing-cockpit-surface,
.billing-cycles-page,
.settings-surface,
.activation-page,
.pppoe-ops-page,
.reports-page,
.network-map-page,
.topology-tree-page,
.routers-page{
  background:var(--winbox-bg)!important;
  color:var(--winbox-text);
  font-family:var(--app-font-family, var(--winbox-font));
  font-size:11px;
  line-height:1.25;
}
button,
input,
select,
textarea,
table,
.btn,
.action-btn{
  font-size:11px;
  line-height:1.25;
}
label,
.badge,
.status-badge,
.small,
.text-muted,
.helper-text,
.section-note,
.hero-subtitle,
.breadcrumbs,
.topbar-subtitle,
.panel-title span,
.noc-panel-title span{
  font-size:10px;
  line-height:1.25;
}
.panel-title h2,
.card-title,
.section-title,
.card h2,
.noc-panel-title h2,
.dashboard-summary-title h2,
.subsection-card-title{
  font-size:12px;
  font-weight:700;
  line-height:1.2;
}
.page-title,
h1{
  font-size:17px;
  line-height:1.1;
}
body .card,
body .panel,
body .noc-panel,
body .billing-panel,
body .billing-kpi-card,
body .billing-action-center-shell,
body .billing-action-center-panel,
body .settings-card,
body .settings-status-card,
body .due-date-rule-card,
body .due-date-rule-editor-card,
body .due-date-rules-table-card,
body .portal-card,
body .payment-option-panel{
  background:var(--winbox-panel)!important;
  border:1px solid var(--winbox-border)!important;
  box-shadow:none!important;
}
body .panel-title,
body .card h2,
body .noc-panel-title,
body .settings-card-head,
body .settings-status-card-head,
body .billing-panel-title,
body .billing-action-center .billing-panel-title,
body .due-date-rules-header,
body .due-date-rule-card .noc-panel-title{
  background:var(--winbox-panel-soft)!important;
  border-color:var(--winbox-border)!important;
}
body .nav-button{
  background:var(--winbox-panel);
  border:1px solid var(--winbox-border);
  color:var(--winbox-text);
}
body .nav-button.active{
  background:var(--winbox-header-blue);
  border-color:var(--winbox-border-dark);
  color:var(--winbox-text);
  box-shadow:none;
}
body .nav-dropdown{
  background:var(--winbox-panel);
  border:1px solid var(--winbox-border);
  box-shadow:none;
}
body .nav-dropdown a,
body .nav-dropdown .nav-dropdown-action{
  color:var(--winbox-text);
}
body .nav-dropdown a:hover,
body .nav-dropdown .nav-dropdown-action:hover{
  background:var(--winbox-header-blue);
  border-color:var(--winbox-border-dark);
}

/* Global Inter typography override */
html,
body,
button,
input,
select,
textarea,
table,
.btn,
.badge,
.status-badge,
.card,
.panel,
.nav-button,
.nav-link,
.portal-body,
.receipt-page,
.login-body{
  font-family:var(--app-font-family, var(--winbox-font))!important;
}
body{
  font-size:11px;
  line-height:1.25;
  font-weight:400;
}
button,
input,
select,
textarea,
table,
.btn{
  font-size:11px;
  line-height:1.25;
  font-weight:400;
}
label,
.badge,
.small,
.text-muted,
.helper-text{
  font-size:10px;
  line-height:1.25;
  font-weight:400;
}
.panel-title,
.card-title,
.section-title,
.card h2,
.noc-panel-title h2,
.dashboard-summary-title h2,
.subsection-card-title{
  font-size:12px;
  line-height:1.2;
  font-weight:700;
}
.page-title,
h1{
  font-size:17px;
  line-height:1.1;
  font-weight:700;
}
.nav-button,
.nav-dropdown a,
.nav-dropdown .nav-dropdown-action{
  font-family:var(--app-font-family, var(--winbox-font))!important;
  font-size:11px;
  font-weight:700;
}

.network-map-editor{
  margin-top:12px;
  padding:10px;
  border:1px solid var(--winbox-border);
  border-radius:10px;
  background:var(--winbox-panel-soft);
}
.network-route-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.network-route-grid label,
.network-route-summary{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.network-route-summary{
  margin-top:8px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.network-route-list{
  margin-top:10px;
  display:grid;
  gap:6px;
  max-height:220px;
  overflow:auto;
}
.network-route-list-item{
  text-align:left;
  border:1px solid var(--winbox-border);
  background:var(--winbox-panel);
  border-radius:8px;
  padding:8px;
  color:var(--winbox-text);
  display:flex;
  flex-direction:column;
  gap:3px;
}
.network-route-list-item strong{
  font-size:11px;
}
.network-route-list-item span{
  font-size:10px;
  opacity:.9;
}

/* OSP topology */
.osp-page{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.osp-hero,
.osp-toolbar,
.osp-summary-grid,
.osp-panel{
  max-width:1440px;
  width:calc(100vw - 30px);
  margin:0 auto;
}
.osp-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border:1px solid var(--winbox-border);
  border-radius:10px;
  background:linear-gradient(180deg,#f7fbff,#eef4fb);
  box-shadow:0 10px 26px rgba(15,23,42,.08);
}
.osp-eyebrow{
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#2563eb;
  margin-bottom:4px;
}
.osp-hero-copy h1{
  margin:0;
  font-size:20px;
  line-height:1.05;
}
.osp-hero-copy p{
  margin:6px 0 0;
  font-size:11px;
  line-height:1.35;
  color:var(--muted);
  max-width:780px;
}
.osp-hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:flex-start;
  justify-content:flex-end;
}
.osp-hero-chip{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:170px;
  padding:8px 10px;
  border:1px solid var(--winbox-border);
  border-radius:8px;
  background:rgba(255,255,255,.72);
}
.osp-hero-chip span,
.osp-summary-card span,
.osp-panel-note span,
.osp-summary-kicker{
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--winbox-muted);
}
.osp-hero-chip strong,
.osp-summary-card strong{
  font-size:13px;
  font-weight:900;
  line-height:1.15;
}
.osp-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
}
.osp-search-form{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:8px;
  flex:1 1 660px;
}
.osp-search-label{
  flex:1 1 360px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.osp-search-label span{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--winbox-muted);
}
.osp-search-label input{
  min-height:31px;
}
.osp-toolbar-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.osp-tree-btn{
  min-width:110px;
}
.osp-summary-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
}
.osp-summary-card{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px 12px;
  border:1px solid var(--winbox-border);
  border-radius:8px;
  background:var(--winbox-panel);
  box-shadow:0 6px 16px rgba(15,23,42,.05);
}
.osp-summary-card small{
  font-size:10px;
  color:var(--muted);
}
.osp-panel{
  padding:12px;
  border:1px solid var(--winbox-border);
  border-radius:10px;
  background:var(--winbox-panel);
  box-shadow:0 10px 22px rgba(15,23,42,.06);
}
.osp-panel-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  margin-bottom:10px;
}
.osp-panel-head h2{
  margin:0;
  font-size:14px;
  line-height:1.1;
}
.osp-panel-head span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:11px;
}
.osp-panel-note{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:3px;
  min-width:88px;
  padding:8px 10px;
  border:1px solid var(--winbox-border);
  border-radius:8px;
  background:var(--winbox-panel-soft);
}
.osp-panel-note strong{
  font-size:16px;
  font-weight:900;
  line-height:1;
}
.osp-mgmt-panel,
.osp-port-panel{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.osp-mgmt-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
}
.osp-mgmt-card{
  border:1px solid var(--winbox-border);
  border-radius:9px;
  background:var(--winbox-panel-soft);
  overflow:hidden;
}
.osp-mgmt-card > summary{
  list-style:none;
  cursor:pointer;
  padding:9px 11px;
  font-size:11px;
  font-weight:900;
  color:#173a63;
  background:linear-gradient(180deg,#fbfdff,#eef4fb);
  border-bottom:1px solid var(--winbox-border);
}
.osp-mgmt-card > summary::-webkit-details-marker{
  display:none;
}
.osp-mgmt-card[open] > summary{
  background:linear-gradient(180deg,#f4f8fe,#e8f1fb);
}
.osp-mgmt-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:10px;
}
.osp-mgmt-form label{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--winbox-muted);
}
.osp-mgmt-form input,
.osp-mgmt-form select,
.osp-mgmt-form textarea{
  width:100%;
  min-width:0;
}
.osp-wide-field{
  grid-column:1 / -1;
}
.osp-selected-port-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:11px;
  border:1px solid var(--winbox-border);
  border-radius:9px;
  background:linear-gradient(180deg,#fbfdff,#f2f7fd);
}
.osp-selected-port-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.osp-selected-port-head strong{
  font-size:12px;
  line-height:1.1;
}
.osp-selected-port-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.osp-selected-port-summary div{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
  padding:8px;
  border:1px solid var(--winbox-border);
  border-radius:8px;
  background:#fff;
}
.osp-selected-port-summary span{
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--winbox-muted);
}
.osp-selected-port-summary strong{
  font-size:11px;
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.osp-port-action-form{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.osp-port-action-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.osp-port-unassign-form{
  margin-top:-2px;
}
.osp-client-search,
.osp-client-select{
  width:100%;
  min-width:0;
}
.osp-port-card.is-selected{
  outline:2px solid rgba(37,99,235,.28);
  box-shadow:0 0 0 3px rgba(37,99,235,.08), 0 4px 10px rgba(15,23,42,.04);
}
.osp-tree{
  display:grid;
  gap:10px;
}
.osp-branch{
  border:1px solid var(--winbox-border);
  border-radius:9px;
  background:var(--winbox-panel-soft);
  overflow:hidden;
}
.osp-branch > summary{
  list-style:none;
}
.osp-branch > summary::-webkit-details-marker{
  display:none;
}
.osp-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  cursor:pointer;
}
.osp-summary-main{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.osp-summary-main strong{
  font-size:12px;
  line-height:1.1;
}
.osp-summary-main small{
  font-size:10px;
  color:var(--muted);
}
.osp-summary-meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
}
.osp-meta-chip,
.osp-port-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:2px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
.osp-meta-chip{
  border:1px solid var(--winbox-border);
  background:#fff;
  color:#173a63;
}
.osp-router-summary,
.osp-olt-summary,
.osp-pon-summary,
.osp-node-summary{
  background:linear-gradient(180deg,#f8fbff,#edf4fb);
}
.osp-children{
  padding:10px 10px 12px 16px;
  border-top:1px solid var(--winbox-border);
  display:grid;
  gap:10px;
}
.osp-empty-state,
.osp-empty-inline{
  padding:10px 12px;
  border:1px dashed var(--winbox-border-dark);
  border-radius:8px;
  background:#fff;
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}
.osp-empty-state{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:10px;
}
.osp-empty-state strong{
  font-size:12px;
  color:var(--winbox-text);
}
.osp-port-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:8px;
}
.osp-port-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px;
  border:1px solid var(--winbox-border);
  border-radius:8px;
  background:#fff;
  box-shadow:0 4px 10px rgba(15,23,42,.04);
}
.osp-port-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.osp-port-head strong{
  font-size:11px;
  line-height:1.1;
}
.osp-port-status{
  min-height:20px;
  padding:2px 7px;
}
.osp-port-online{ border-color:rgba(25,166,90,.24); background:rgba(25,166,90,.08); }
.osp-port-offline{ border-color:rgba(217,58,58,.24); background:rgba(217,58,58,.08); }
.osp-port-expired{ border-color:rgba(242,169,0,.28); background:rgba(242,169,0,.10); }
.osp-port-vacant{ border-color:rgba(148,163,184,.28); background:rgba(148,163,184,.10); }
.osp-port-status-online{ color:#15803d; background:rgba(25,166,90,.14); border:1px solid rgba(25,166,90,.25); }
.osp-port-status-offline{ color:#b91c1c; background:rgba(217,58,58,.14); border:1px solid rgba(217,58,58,.25); }
.osp-port-status-expired{ color:#a16207; background:rgba(242,169,0,.16); border:1px solid rgba(242,169,0,.28); }
.osp-port-status-vacant{ color:#475569; background:rgba(148,163,184,.14); border:1px solid rgba(148,163,184,.28); }
.osp-port-client{
  display:flex;
  align-items:flex-start;
  gap:8px;
  min-width:0;
}
.osp-port-avatar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  flex:0 0 auto;
  font-size:11px;
  font-weight:900;
  color:#fff;
  background:linear-gradient(180deg,#64748b,#334155);
}
.osp-port-avatar-online{ background:linear-gradient(180deg,#2fbf71,#1a8f4e); }
.osp-port-avatar-offline{ background:linear-gradient(180deg,#ef7d54,#d94828); }
.osp-port-avatar-expired{ background:linear-gradient(180deg,#f5c443,#c79100); }
.osp-port-avatar-vacant{ background:linear-gradient(180deg,#94a3b8,#64748b); }
.osp-port-client-copy{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.osp-port-client-copy strong,
.osp-port-client-copy span{
  font-size:10px;
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.osp-port-client-copy strong{
  font-size:11px;
  color:#0f172a;
}
.osp-port-actions{
  display:flex;
  gap:6px;
}
.osp-mini-btn{
  min-height:26px;
  padding:4px 8px;
  font-size:10px;
}
.osp-mini-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
}

@media (max-width: 1180px){
  .osp-summary-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .osp-mgmt-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px){
  .osp-hero,
  .osp-toolbar,
  .osp-summary-grid,
  .osp-panel{
    width:calc(100vw - 16px);
  }
  .osp-hero{
    flex-direction:column;
  }
  .osp-hero-meta{
    width:100%;
    justify-content:flex-start;
  }
  .osp-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .osp-search-form{
    flex-direction:column;
    align-items:stretch;
  }
  .osp-search-label{
    flex-basis:auto;
  }
  .osp-port-grid{
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  }
  .osp-mgmt-grid,
  .osp-selected-port-summary,
  .osp-port-action-grid{
    grid-template-columns:1fr;
  }
}

/* OSP topology tree compact view */
.osp-topology-page{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.osp-topology-hero,
.osp-topology-toolbar,
.osp-topology-summary,
.osp-topology-tree,
.osp-topology-empty{
  max-width:1440px;
  width:calc(100vw - 30px);
  margin:0 auto;
}
.osp-topology-hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding:12px 14px;
  border:1px solid var(--winbox-border);
  border-radius:10px;
  background:linear-gradient(180deg,#f7fbff,#eef4fb);
  box-shadow:0 10px 26px rgba(15,23,42,.08);
}
.osp-topology-eyebrow{
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#2563eb;
  margin-bottom:4px;
}
.osp-topology-hero-copy h1{
  margin:0;
  font-size:20px;
  line-height:1.05;
}
.osp-topology-hero-copy p{
  margin:6px 0 0;
  font-size:11px;
  line-height:1.35;
  color:var(--muted);
  max-width:760px;
}
.osp-topology-hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:flex-start;
  justify-content:flex-end;
}
.osp-topology-chip{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:160px;
  padding:8px 10px;
  border:1px solid var(--winbox-border);
  border-radius:8px;
  background:rgba(255,255,255,.75);
}
.osp-topology-chip span{
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--winbox-muted);
}
.osp-topology-chip strong{
  font-size:12px;
  font-weight:900;
  line-height:1.15;
}
.osp-topology-chip.small{
  min-width:auto;
  padding:2px 7px;
  border-radius:999px;
}
.osp-olt-sync-strip{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 10px;
}
.osp-olt-sync-strip-single .osp-olt-sync-card{
  flex:1 1 100%;
}
.osp-olt-sync-strip-dashboard .osp-olt-sync-card{
  flex:1 1 280px;
}
.osp-olt-sync-card{
  flex:1 1 320px;
  min-width:280px;
  border:1px solid var(--winbox-border);
  background:var(--winbox-panel);
  border-radius:6px;
  padding:6px 8px;
  box-shadow:none;
}
.osp-olt-sync-head{
  display:flex;
  align-items:center;
  gap:6px;
  justify-content:space-between;
  min-width:0;
  margin-bottom:4px;
}
.osp-olt-sync-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  color:var(--winbox-text);
}
.osp-olt-sync-status{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:1px 7px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  white-space:nowrap;
}
.osp-olt-sync-status.is-online{
  color:#166534;
  background:#dcfce7;
  border-color:#86efac;
}
.osp-olt-sync-status.is-offline{
  color:#991b1b;
  background:#fee2e2;
  border-color:#fca5a5;
}
.osp-olt-sync-status.is-stale{
  color:#92400e;
  background:#fef3c7;
  border-color:#fcd34d;
}
.osp-olt-sync-status.is-disabled,
.osp-olt-sync-status.is-unknown{
  color:#475569;
  background:#e2e8f0;
  border-color:#cbd5e1;
}
.osp-olt-sync-meta{
  display:flex;
  flex-wrap:wrap;
  gap:4px 8px;
  color:var(--winbox-muted);
  font-size:10px;
  line-height:1.25;
}
.osp-olt-sync-meta span{
  display:inline-flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
}
.osp-create-router-prompt{
  margin-top:6px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.osp-unlinked-olts{
  margin:0 0 10px;
  border:1px solid var(--winbox-border);
  background:var(--winbox-panel);
  border-radius:6px;
  padding:8px 10px;
}
.osp-unlinked-olts-head{
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:#173a63;
  margin-bottom:6px;
}
.osp-unlinked-olts-list{
  display:grid;
  gap:6px;
}
.osp-unlinked-olt-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  justify-content:space-between;
  padding:6px 8px;
  border:1px solid var(--winbox-border);
  border-radius:6px;
  background:var(--winbox-panel-soft);
}
.osp-unlinked-olt-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}
.osp-unlinked-olt-main strong,
.osp-unlinked-olt-main small{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.osp-unlinked-olt-main small{
  color:var(--winbox-muted);
  font-size:10px;
}
.osp-unlinked-olt-meta{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
  color:var(--winbox-muted);
  font-size:10px;
}
.osp-unlinked-olt-actions{
  display:flex;
  gap:4px;
  margin-left:auto;
}
.osp-topology-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
}
.osp-topology-search{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:8px;
  flex:1 1 660px;
}
.osp-topology-search-field{
  flex:1 1 360px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.osp-topology-search-field span{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--winbox-muted);
}
.osp-topology-search-field input{
  min-height:31px;
}
.osp-topology-toolbar-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.osp-topology-tree-btn{
  min-width:112px;
}
.osp-topology-summary{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
}
.osp-topology-summary-card{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px 12px;
  border:1px solid var(--winbox-border);
  border-radius:8px;
  background:var(--winbox-panel);
  box-shadow:0 6px 16px rgba(15,23,42,.05);
}
.osp-topology-summary-card span{
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--winbox-muted);
}
.osp-topology-summary-card strong{
  font-size:13px;
  font-weight:900;
  line-height:1.15;
}
.osp-topology-summary-card small{
  font-size:10px;
  color:var(--muted);
}
.osp-topology-empty{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px 12px;
  border:1px dashed var(--winbox-border-dark);
  border-radius:8px;
  background:#fff;
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}
.osp-topology-empty strong{
  font-size:12px;
  color:var(--winbox-text);
}
.osp-topology-tree{
  display:grid;
  gap:10px;
}
.osp-topology-branch{
  border:1px solid var(--winbox-border);
  border-radius:9px;
  background:var(--winbox-panel-soft);
  overflow:hidden;
}
.osp-topology-branch > summary{
  list-style:none;
  cursor:pointer;
}
.osp-topology-branch > summary::-webkit-details-marker{
  display:none;
}
.osp-topology-branch-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
}
.osp-topology-branch-main{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.osp-topology-kicker{
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#2563eb;
}
.osp-topology-branch-main strong{
  font-size:12px;
  line-height:1.1;
}
.osp-topology-branch-main small{
  font-size:10px;
  color:var(--muted);
}
.osp-topology-branch-meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
}
.osp-topology-children{
  padding:10px 10px 12px 16px;
  border-top:1px solid var(--winbox-border);
  display:grid;
  gap:10px;
}
.osp-topology-empty-inline{
  padding:10px 12px;
  border:1px dashed var(--winbox-border-dark);
  border-radius:8px;
  background:#fff;
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}
.osp-topology-port-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(184px,1fr));
  gap:8px;
}
.osp-topology-port-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px;
  border:1px solid var(--winbox-border);
  border-radius:8px;
  background:#fff;
  box-shadow:0 4px 10px rgba(15,23,42,.04);
}
.osp-topology-port-card.is-selected{
  outline:2px solid rgba(37,99,235,.28);
  box-shadow:0 0 0 3px rgba(37,99,235,.08), 0 4px 10px rgba(15,23,42,.04);
}
.osp-topology-port-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.osp-topology-port-head strong{
  font-size:11px;
  line-height:1.1;
}
.osp-topology-port-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:20px;
  padding:2px 7px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
.osp-topology-port-badge-online{ color:#15803d; background:rgba(25,166,90,.14); border:1px solid rgba(25,166,90,.25); }
.osp-topology-port-badge-offline{ color:#b91c1c; background:rgba(217,58,58,.14); border:1px solid rgba(217,58,58,.25); }
.osp-topology-port-badge-expired{ color:#a16207; background:rgba(242,169,0,.16); border:1px solid rgba(242,169,0,.28); }
.osp-topology-port-badge-manual{ color:#1d4ed8; background:rgba(59,130,246,.14); border:1px solid rgba(59,130,246,.26); }
.osp-topology-port-badge-vacant{ color:#475569; background:rgba(148,163,184,.14); border:1px solid rgba(148,163,184,.28); }
.osp-topology-port-body{
  display:flex;
  align-items:flex-start;
  gap:8px;
  min-width:0;
}
.osp-topology-port-avatar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  flex:0 0 auto;
  font-size:11px;
  font-weight:900;
  color:#fff;
  background:linear-gradient(180deg,#64748b,#334155);
}
.osp-topology-port-avatar-online{ background:linear-gradient(180deg,#2fbf71,#1a8f4e); }
.osp-topology-port-avatar-offline{ background:linear-gradient(180deg,#ef7d54,#d94828); }
.osp-topology-port-avatar-expired{ background:linear-gradient(180deg,#f5c443,#c79100); }
.osp-topology-port-avatar-manual{ background:linear-gradient(180deg,#60a5fa,#2563eb); }
.osp-topology-port-avatar-vacant{ background:linear-gradient(180deg,#94a3b8,#64748b); }
.osp-topology-port-manual{ border-color:rgba(59,130,246,.26); background:#f8fbff; }
.osp-topology-port-copy{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.osp-topology-port-copy strong,
.osp-topology-port-copy span{
  font-size:10px;
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.osp-topology-port-copy strong{
  font-size:11px;
  color:#0f172a;
}
.osp-topology-optical-line{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.osp-topology-optical-reading{
  font-size:10px;
  line-height:1.25;
  color:#334155;
  white-space:nowrap;
}
.osp-topology-optical-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:18px;
  padding:1px 6px;
  border-radius:999px;
  font-size:9px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
.osp-topology-optical-badge-good{ color:#15803d; background:rgba(25,166,90,.14); border:1px solid rgba(25,166,90,.25); }
.osp-topology-optical-badge-warning{ color:#a16207; background:rgba(242,169,0,.16); border:1px solid rgba(242,169,0,.28); }
.osp-topology-optical-badge-critical{ color:#b91c1c; background:rgba(217,58,58,.14); border:1px solid rgba(217,58,58,.25); }
.osp-topology-optical-badge-too-high{ color:#1d4ed8; background:rgba(59,130,246,.14); border:1px solid rgba(59,130,246,.26); }
.osp-topology-optical-badge-no-signal{ color:#475569; background:rgba(100,116,139,.12); border:1px solid rgba(100,116,139,.28); }
.osp-topology-optical-badge-no-reading{ color:#475569; background:rgba(148,163,184,.14); border:1px solid rgba(148,163,184,.28); }
.osp-topology-port-actions{
  display:flex;
  gap:6px;
}
.osp-topology-mini-btn{
  min-height:26px;
  padding:4px 8px;
  font-size:10px;
}

.osp-topology-assign-page{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.osp-assign-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);
  gap:10px;
  align-items:start;
}
.osp-assign-stack,
.osp-assign-sidebar{
  display:grid;
  gap:10px;
  min-width:0;
}
.osp-assign-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  border:1px solid var(--winbox-border);
  border-radius:9px;
  background:var(--winbox-panel);
  box-shadow:0 6px 16px rgba(15,23,42,.05);
}
.osp-assign-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.osp-assign-card-head h2{
  margin:2px 0 0;
  font-size:13px;
  line-height:1.15;
}
.osp-assign-summary-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.osp-assign-summary-item{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:8px 10px;
  border:1px solid var(--winbox-border);
  border-radius:8px;
  background:#fff;
}
.osp-assign-summary-item span,
.osp-assign-path-item span{
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--winbox-muted);
}
.osp-assign-summary-item strong,
.osp-assign-path-item strong{
  font-size:11px;
  line-height:1.3;
}
.osp-assign-note{
  padding:8px 10px;
  border:1px dashed var(--winbox-border-dark);
  border-radius:8px;
  background:#fff;
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}
.osp-assign-form{
  display:grid;
  gap:8px;
}
.osp-assign-field{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.osp-assign-field span{
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--winbox-muted);
}
.osp-assign-field input,
.osp-assign-field select,
.osp-assign-field textarea{
  width:100%;
  min-height:31px;
}
.osp-assign-field textarea{
  min-height:72px;
  resize:vertical;
}
.osp-assign-status-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.osp-assign-status-option{
  display:flex;
  align-items:center;
  gap:6px;
  justify-content:center;
  cursor:pointer;
}
.osp-assign-status-option input{
  margin:0;
}
.osp-assign-status-option.is-online{ color:#15803d; }
.osp-assign-status-option.is-offline{ color:#b91c1c; }
.osp-assign-status-option.is-expired{ color:#a16207; }
.osp-assign-status-option.is-manual{ color:#1d4ed8; }
.osp-assign-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.osp-assign-path-list{
  display:grid;
  gap:8px;
}
.osp-assign-path-item{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:8px 10px;
  border:1px solid var(--winbox-border);
  border-radius:8px;
  background:#fff;
}
.osp-assign-sibling-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.osp-assign-sibling{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:8px 10px;
  border:1px solid var(--winbox-border);
  border-radius:8px;
  background:#fff;
}
.osp-assign-sibling strong{
  font-size:11px;
}
.osp-assign-sibling span{
  font-size:10px;
  color:var(--muted);
}
@media (max-width: 1180px){
  .osp-topology-summary{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .osp-assign-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width: 760px){
  .osp-topology-hero,
  .osp-topology-toolbar,
  .osp-topology-summary,
  .osp-topology-tree,
  .osp-topology-empty{
    width:calc(100vw - 16px);
  }
  .osp-topology-hero{
    flex-direction:column;
  }
  .osp-topology-hero-meta{
    width:100%;
    justify-content:flex-start;
  }
  .osp-topology-summary{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .osp-topology-search{
    flex-direction:column;
    align-items:stretch;
  }
  .osp-topology-search-field{
    flex-basis:auto;
  }
  .osp-topology-port-grid{
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  }
  .osp-topology-port-actions{
    flex-direction:column;
  }
  .osp-assign-summary-grid,
  .osp-assign-status-grid,
  .osp-assign-sibling-grid{
    grid-template-columns:1fr;
  }
}

.osp-tree-page{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-family:"Inter", "Segoe UI", Arial, sans-serif;
  font-size:12px;
  line-height:1.2;
}
.osp-tree-page .osp-topology-eyebrow{
  font-size:10px;
  letter-spacing:.12em;
}
.osp-tree-wrap{
  width:100%;
  max-width:none;
  overflow-x:auto;
  overflow-y:visible;
}
.osp-tree{
  width:max-content;
  min-width:1050px;
  font-family:"Inter", "Segoe UI", sans-serif;
  font-size:12.5px;
  line-height:1.45;
}
.osp-line{
  display:flex;
  align-items:center;
  min-height:22px;
  white-space:nowrap;
  font-weight:700;
}
.osp-meta{
  min-height:20px;
  white-space:nowrap;
  color:#475569;
  font-size:12px;
}
.osp-used{
  margin-left:16px;
  font-weight:700;
}
.osp-spacer{
  height:8px;
}
.level-core{ padding-left:0; }
.level-core-meta{ padding-left:18px; }
.level-ac{ padding-left:24px; }
.level-ac-meta{ padding-left:42px; }
.level-olt{ padding-left:48px; }
.level-olt-meta{ padding-left:66px; }
.level-pon{ padding-left:72px; }
.level-pon-meta{ padding-left:90px; }
.level-nap{ padding-left:96px; }
.level-nap-meta{ padding-left:114px; }
.osp-tree-header,
.osp-tree-toolbar,
.osp-tree-stats,
.osp-tree-empty{
  width:calc(100vw - 30px);
  max-width:1440px;
  margin:0 auto;
}
.osp-tree-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.osp-tree-title h1{
  margin:2px 0 4px;
  font-size:18px;
  line-height:1.1;
}
.osp-tree-title p{
  margin:0;
  color:var(--muted);
  font-size:11px;
}
.osp-tree-scope{
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
}
.osp-tree-scope strong{
  color:var(--winbox-text);
}
.osp-tree-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.osp-tree-search{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  min-width:0;
}
.osp-tree-search input{
  width:min(560px, 100%);
  min-height:28px;
  font-size:12px;
}
.osp-tree-toolbar-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.osp-tree-btn{
  min-height:28px;
  padding:4px 10px;
  font-size:11px;
}
.osp-tree-stats{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  color:var(--muted);
  font-size:11px;
}
.osp-tree-optical-stats{
  width:calc(100vw - 30px);
  max-width:1440px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  color:#334155;
  font-size:11px;
}
.osp-tree-optical-inline{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin:2px 0 0 18px;
}
.osp-tree-optical-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px 7px;
  border-radius:999px;
  border:1px solid #d8e5f4;
  background:#fff;
  font-size:10px;
  line-height:1;
  color:#334155;
  white-space:nowrap;
}
.osp-tree-optical-chip strong{
  font-size:10px;
  font-weight:700;
  color:#0f172a;
}
.osp-tree-optical-good{
  border-color:rgba(25,166,90,.24);
  background:rgba(25,166,90,.08);
}
.osp-tree-optical-warning{
  border-color:rgba(242,169,0,.28);
  background:rgba(242,169,0,.10);
}
.osp-tree-optical-critical{
  border-color:rgba(217,58,58,.24);
  background:rgba(217,58,58,.08);
}
.osp-tree-optical-too-high{
  border-color:rgba(59,130,246,.26);
  background:rgba(59,130,246,.08);
}
.osp-tree-optical-no-reading{
  border-color:rgba(148,163,184,.28);
  background:rgba(148,163,184,.08);
}
.osp-tree-optical-no-onu{
  border-color:rgba(203,213,225,.9);
  background:rgba(241,245,249,.92);
}
.osp-tree-optical-no-signal{
  border-color:rgba(100,116,139,.30);
  background:rgba(100,116,139,.10);
}
.osp-tree-optical-note{
  color:#64748b;
  font-size:10px;
}
.osp-olt-health-line,
.osp-olt-health-summary{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 6px;
  margin:4px 0 0 18px;
  color:#475569;
  font-size:10px;
  line-height:1.2;
}
.osp-olt-health-summary{
  margin:0;
}
.osp-olt-health-badge,
.osp-olt-health-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 7px;
  border-radius:999px;
  border:1px solid transparent;
  white-space:nowrap;
}
.osp-olt-health-badge.is-online{
  color:#166534;
  background:#dcfce7;
  border-color:#86efac;
}
.osp-olt-health-badge.is-offline{
  color:#7f1d1d;
  background:#fee2e2;
  border-color:#fca5a5;
}
.osp-olt-health-chip{
  color:#334155;
  background:#f8fafc;
  border-color:#dbe4ee;
}
.osp-olt-health-chip.is-stale{
  color:#92400e;
  background:#fef3c7;
  border-color:#fcd34d;
}
.osp-olt-health-error{
  color:#7f1d1d;
  max-width:280px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.osp-tree-client-note{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 6px;
  margin-left:8px;
  color:#64748b;
  font-size:10px;
  line-height:1.2;
}
.osp-tree-client-note-label{
  color:#64748b;
  font-weight:600;
}
.osp-tree-client-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 7px;
  border-radius:999px;
  border:1px solid transparent;
  white-space:nowrap;
}
.osp-tree-client-online{
  color:#166534;
  background:#dcfce7;
  border-color:#86efac;
}
.osp-tree-client-offline{
  color:#7f1d1d;
  background:#fee2e2;
  border-color:#fca5a5;
}
.osp-tree-client-expired{
  color:#854d0e;
  background:#fef3c7;
  border-color:#fcd34d;
}
.osp-tree-client-unknown{
  color:#475569;
  background:#e2e8f0;
  border-color:#cbd5e1;
}
.osp-tree-stats strong{
  color:var(--winbox-text);
  font-weight:800;
}
.osp-tree-empty,
.osp-tree-empty-inline{
  padding:6px 0;
  color:var(--muted);
  font-size:11px;
}
.osp-tree-manage{
  width:calc(100vw - 30px);
  max-width:1440px;
  margin:0 auto;
  display:grid;
  gap:8px;
  padding:4px 0 8px;
}
.osp-manage-section{
  border-top:1px dotted rgba(148,163,184,.55);
  padding-top:4px;
}
.osp-manage-section > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:baseline;
  gap:8px;
  font-size:12px;
  font-weight:700;
  color:#0f172a;
  margin:0 0 6px;
}
.osp-manage-section > summary::-webkit-details-marker{
  display:none;
}
.osp-manage-section > summary small{
  font-weight:400;
  color:#64748b;
}
.osp-manage-form{
  display:grid;
  gap:6px;
}
.osp-manage-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:6px 8px;
}
.osp-manage-grid label{
  display:grid;
  gap:3px;
  font-size:11px;
  color:#475569;
}
.osp-manage-grid label span{
  font-weight:700;
  color:#334155;
}
.osp-manage-grid input,
.osp-manage-grid select{
  min-height:28px;
  font-size:12px;
  padding:4px 8px;
}
.osp-manage-grid textarea{
  min-height:56px;
  font-size:12px;
  padding:4px 8px;
  resize:vertical;
}
.osp-manage-grid .osp-manage-textarea{
  grid-column:1 / -1;
}
.osp-manage-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}
.osp-inline-action-form{
  display:flex;
  margin-top:6px;
}
.osp-tree-actions{
  display:inline-flex;
  gap:4px;
  margin-left:auto;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.osp-tree-mini-btn{
  min-height:20px;
  padding:2px 6px;
  font-size:10px;
  line-height:1;
}
.osp-hsgq-page{
  gap:10px;
}
.osp-hsgq-scope-form{
  display:flex;
  align-items:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.osp-hsgq-scope-field{
  display:grid;
  gap:4px;
  font-size:11px;
  color:#475569;
}
.osp-hsgq-scope-field span{
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#64748b;
}
.osp-hsgq-scope-field select{
  min-width:220px;
  min-height:28px;
  font-size:12px;
}
.osp-hsgq-message{
  width:calc(100vw - 30px);
  max-width:1440px;
  margin:0 auto;
  padding:6px 10px;
  border:1px solid var(--winbox-border);
  border-radius:8px;
  font-size:11px;
  line-height:1.35;
  background:#fff;
}
.osp-hsgq-message.is-success{
  border-color:rgba(25,166,90,.22);
  background:rgba(25,166,90,.06);
  color:#166534;
}
.osp-hsgq-message.is-error{
  border-color:rgba(217,58,58,.24);
  background:rgba(217,58,58,.06);
  color:#991b1b;
}
.osp-hsgq-panel{
  width:calc(100vw - 30px);
  max-width:1440px;
  margin:0 auto;
  border:1px solid var(--winbox-border);
  border-radius:10px;
  background:#fff;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
  padding:10px 12px;
}
.osp-hsgq-form{
  display:grid;
  gap:8px;
}
.osp-hsgq-field{
  display:grid;
  gap:4px;
}
.osp-hsgq-field label{
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#64748b;
}
.osp-hsgq-select{
  min-width:240px;
  min-height:28px;
  font-size:12px;
}
.osp-hsgq-textarea{
  width:100%;
  min-height:160px;
  resize:vertical;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;
  line-height:1.45;
}
.osp-hsgq-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.osp-hsgq-scope-hint{
  padding:6px 8px;
  border:1px solid rgba(148,163,184,.35);
  border-radius:8px;
  background:#f8fafc;
  color:#334155;
  font-size:11px;
  line-height:1.35;
}
.osp-hsgq-scope-box{
  display:grid;
  gap:4px;
  padding:8px 10px;
  border:1px solid rgba(148,163,184,.35);
  border-radius:10px;
  background:linear-gradient(180deg, rgba(248,250,252,.96), rgba(255,255,255,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.osp-hsgq-scope-box-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:baseline;
  justify-content:space-between;
  font-size:11px;
  line-height:1.35;
  color:#334155;
}
.osp-hsgq-scope-box-row span{
  color:#64748b;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.osp-hsgq-scope-box-row strong{
  color:#0f172a;
  font-weight:800;
}
.osp-hsgq-scope-box-note{
  font-size:11px;
  line-height:1.35;
  color:#475569;
}
.osp-hsgq-summary{
  width:calc(100vw - 30px);
  max-width:1440px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.osp-hsgq-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid #d8e5f4;
  background:#fff;
  font-size:10px;
  line-height:1;
  color:#334155;
  white-space:nowrap;
}
.osp-hsgq-chip strong{
  font-size:10px;
  font-weight:800;
  color:#0f172a;
}
.osp-hsgq-panel-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  margin:0 0 8px;
}
.osp-hsgq-panel-head h2{
  margin:0;
  font-size:13px;
}
.osp-hsgq-panel-head small{
  color:#64748b;
  font-size:10px;
}
.osp-hsgq-table-shell{
  overflow:auto;
}
.osp-hsgq-table{
  width:100%;
  border-collapse:collapse;
  font-size:11px;
}
.osp-hsgq-table th,
.osp-hsgq-table td{
  padding:5px 6px;
  border-bottom:1px solid rgba(148,163,184,.2);
  text-align:left;
  white-space:nowrap;
}
.osp-hsgq-table th{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#64748b;
}
.osp-hsgq-table tr.is-matched{
  background:rgba(25,166,90,.04);
}
.osp-hsgq-table tr.is-unmatched{
  background:rgba(217,58,58,.03);
}
.osp-hsgq-table td:nth-child(3),
.osp-hsgq-table td:nth-child(4),
.osp-hsgq-table td:nth-child(5){
  max-width:220px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.osp-hsgq-table td:nth-child(2){
  max-width:70px;
}
.osp-tree-port-actions-row{
  margin-left:120px;
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  padding:2px 0 4px;
}
.osp-tree-inline-form{
  display:inline-flex;
  margin:0;
}
.osp-tree-port-actions{
  justify-self:end;
}
.osp-tree-port-actions .osp-tree-mini-btn{
  margin-left:0;
}
.osp-tree-root{
  display:grid;
  gap:2px;
}
.osp-tree-branch{
  margin:0;
  padding:0;
  border:0;
}
.osp-tree-branch > summary{
  list-style:none;
}
.osp-tree-branch > summary::-webkit-details-marker{
  display:none;
}
.osp-tree-level{
  font-weight:800;
  color:#2563eb;
  text-transform:uppercase;
  letter-spacing:.06em;
  white-space:nowrap;
}
.osp-tree-name{
  min-width:0;
  font-weight:700;
  color:#0f172a;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.osp-tree-edit-link{
  color:#0f172a;
  text-decoration:none;
}
.osp-tree-edit-link:hover,
.osp-tree-edit-link:focus-visible{
  text-decoration:underline;
}
.osp-tree-meta{
  min-width:0;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.osp-tree-children{
  padding-left:16px;
  border-left:1px dotted rgba(148,163,184,.55);
  margin-left:8px;
  display:grid;
  gap:1px;
}
.osp-tree-branch-router > .osp-tree-children{
  padding-left:12px;
}
.osp-tree-ports{
  display:grid;
  gap:0;
  padding:0 0 1px 0;
}
.osp-map-onu-page{
  gap:10px;
}
.osp-map-onu-panel{
  width:calc(100vw - 30px);
  max-width:1440px;
  margin:0 auto;
  border:1px solid var(--winbox-border);
  border-radius:10px;
  background:#fff;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
  padding:10px 12px;
}
.osp-map-onu-grid{
  display:grid;
  gap:8px;
}
.osp-map-onu-summary{
  display:grid;
  gap:4px;
  font-size:11px;
  color:#334155;
}
.osp-map-onu-summary strong{
  color:#0f172a;
}
.osp-map-onu-controls{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:flex-end;
}
.osp-map-onu-controls label{
  display:grid;
  gap:4px;
  font-size:11px;
  color:#475569;
}
.osp-map-onu-controls input[type="search"],
.osp-map-onu-controls select{
  min-height:28px;
  min-width:220px;
  font-size:12px;
}
.osp-map-onu-table-shell{
  overflow:auto;
}
.osp-map-onu-table{
  width:100%;
  border-collapse:collapse;
  font-size:11px;
}
.osp-map-onu-table th,
.osp-map-onu-table td{
  padding:5px 6px;
  border-bottom:1px solid rgba(148,163,184,.2);
  text-align:left;
  white-space:nowrap;
}
.osp-map-onu-table th{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#64748b;
}
.osp-map-onu-table tr.is-selected{
  background:rgba(37,99,235,.06);
}
.osp-map-onu-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.osp-map-onu-manage-form{
  display:grid;
  gap:8px;
}
.osp-map-onu-manage-grid{
  display:grid;
  gap:6px;
}
.osp-map-onu-manage-grid label{
  display:grid;
  gap:4px;
  font-size:11px;
  color:#475569;
}
.osp-map-onu-manage-grid input[type="search"]{
  min-height:28px;
  font-size:12px;
}
@media (max-width: 760px){
  .osp-map-onu-controls input[type="search"],
  .osp-map-onu-controls select{
    min-width:0;
    width:100%;
  }
}
.osp-port-row,
.osp-tree-port-row{
  display:grid;
  grid-template-columns:70px 28px 340px 280px 130px;
  column-gap:12px;
  align-items:center;
  min-height:22px;
  width:max-content;
  min-width:930px;
  white-space:nowrap;
  margin-left:120px;
  padding:0;
  border-radius:0;
  font-size:12.5px;
}
.osp-port-row:hover,
.osp-tree-port-row:hover{
  background:rgba(15,23,42,.025);
}
.osp-tree-port-row.is-vacant,
.osp-port-row.is-vacant{
  grid-template-columns:70px 28px 340px 280px 130px;
}
.osp-port-no,
.osp-tree-port-no{
  color:#1e293b;
  font-weight:400;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.osp-status-icon,
.osp-tree-port-icon{
  text-align:center;
  font-size:12px;
}
.osp-account,
.osp-client,
.osp-optical,
.osp-tree-port-account,
.osp-tree-port-client,
.osp-tree-port-reading,
.osp-tree-port-status{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.osp-account,
.osp-tree-port-account{
  color:#0f172a;
}
.osp-client,
.osp-tree-port-client{
  color:#0f172a;
}
.osp-optical,
.osp-tree-port-reading{
  color:#334155;
  width:130px;
  max-width:130px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1px;
  white-space:normal;
}
.osp-tree-port-status{
  color:#64748b;
}
.osp-tree-optical-value{
  display:block;
  width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.osp-tree-mapping-note{
  display:block;
  width:100%;
  font-size:11px;
  line-height:1.15;
  color:#64748b;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.osp-client-onu-map-page .osp-client-onu-map-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr);
  gap:12px;
  align-items:start;
  width:100%;
}
.osp-client-onu-map-page .osp-client-onu-map-panel{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  padding:12px;
  border:1px solid #dbe3ef;
  border-radius:14px;
  background:#fff;
}
.osp-client-onu-map-page .osp-client-onu-map-trace-hint{
  margin:4px 0 0;
  font-size:11px;
  line-height:1.35;
  color:#64748b;
}
.osp-client-onu-map-page .osp-client-onu-map-search{
  display:flex;
  gap:8px;
  align-items:center;
}
.osp-client-onu-map-page .osp-client-onu-map-search input{
  width:100%;
  min-width:0;
}
.osp-client-onu-map-page .osp-client-onu-map-table-shell{
  overflow:auto;
  border:1px solid #dbe3ef;
  border-radius:12px;
  background:#fff;
}
.osp-client-optical-list-page .osp-client-optical-list-table-shell{
  overflow:auto;
  border:1px solid #dbe3ef;
  border-radius:12px;
  background:#fff;
  max-height:calc(100vh - 290px);
}
.osp-client-optical-list-page .osp-client-optical-list-table{
  width:100%;
  min-width:0;
  table-layout:auto;
}
.osp-client-optical-list-page .osp-client-optical-list-table col.osp-client-optical-col-client{ width:11%; }
.osp-client-optical-list-page .osp-client-optical-list-table col.osp-client-optical-col-onu-mac{ width:9%; }
.osp-client-optical-list-page .osp-client-optical-list-table col.osp-client-optical-col-caller{ width:8%; }
.osp-client-optical-list-page .osp-topology-hero-meta{
  gap:4px;
}
.osp-client-optical-list-page .osp-topology-chip{
  min-width:120px;
  padding:6px 8px;
  gap:2px;
}
.osp-client-optical-list-page .osp-topology-chip span{
  font-size:9px;
}
.osp-client-optical-list-page .osp-topology-chip strong{
  font-size:11px;
  font-weight:400;
}
.osp-client-optical-list-page .osp-client-optical-list-table thead th{
  position:sticky;
  top:0;
  z-index:3;
  background:#123f7a;
  color:#ffffff;
  border-bottom:1px solid #0b2d5c;
  box-shadow:none;
}
.osp-client-optical-list-page .osp-client-optical-sortable{
  padding:0;
}
.osp-client-optical-list-page .osp-client-optical-sort-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  width:100%;
  padding:4px 5px;
  color:#ffffff;
  text-decoration:none;
  white-space:nowrap;
}
.osp-client-optical-list-page .osp-client-optical-sortable.is-active .osp-client-optical-sort-link{
  color:#ffffff;
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  font-weight:400;
}
.osp-client-optical-list-page .osp-client-optical-sort-arrow{
  display:inline-flex;
  min-width:10px;
  justify-content:center;
  font-size:9px;
  line-height:1;
  color:#ffffff;
}
.osp-client-optical-list-page .osp-client-optical-sortable.is-active .osp-client-optical-sort-arrow{
  color:#ffffff;
  font-weight:400;
}
.osp-client-optical-list-page .osp-client-optical-list-table thead th,
.osp-client-optical-list-page .osp-client-optical-list-table tbody td{
  overflow:hidden;
  text-overflow:ellipsis;
}
.client-onu-filter-apply {
  background: #123f7a;
  border-color: #0b2d5c;
  color: #ffffff;
}
.client-onu-filter-apply:hover {
  background: #0b2d5c;
  border-color: #08254c;
  color: #ffffff;
}
.osp-client-optical-list-page .osp-client-optical-list-table th,
.osp-client-optical-list-page .osp-client-optical-list-table td{
  padding:3px 4px;
  font-size:10px;
  line-height:1.15;
}
.osp-client-optical-list-page .osp-client-optical-list-table thead th a{
  color:#ffffff;
}
.osp-client-optical-list-page .osp-client-optical-list-table thead th a:visited{
  color:#ffffff;
}
.osp-client-optical-list-page .osp-client-optical-list-table thead th a:hover{
  color:#ffffff;
}
.osp-client-optical-list-page .osp-client-optical-list-table thead th .osp-client-optical-sort-arrow{
  color:#ffffff;
}
.osp-client-optical-list-page .osp-client-optical-list-table thead th .osp-client-optical-sort-link{
  color:#ffffff;
}
.osp-client-optical-list-page .osp-client-optical-cell-priority{
  text-align:center;
}
.osp-client-optical-list-page .osp-client-optical-main-cell{
  display:flex;
  flex-direction:column;
  gap:0;
  min-width:0;
}
.osp-client-optical-list-page .osp-client-optical-main-cell strong,
.osp-client-optical-list-page .osp-client-optical-main-cell small{
  display:block;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.osp-client-optical-list-page .osp-client-optical-main-cell strong{
  font-size:12px;
  font-weight:400;
  color:#0f172a;
  line-height:1.05;
}
.osp-client-optical-list-page .osp-client-optical-main-cell small{
  font-size:9px;
  color:#64748b;
  line-height:1.05;
}
.osp-client-optical-list-page .osp-client-optical-cell-clip,
.osp-client-optical-list-page .osp-client-optical-cell-compact,
.osp-client-optical-list-page .osp-client-optical-cell-stack{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.osp-client-optical-list-page .osp-client-optical-cell-stack{
    white-space:normal;
    padding-top:2px;
    padding-bottom:2px;
  }
.osp-client-optical-list-page .osp-client-optical-auto-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:6px;
  padding:1px 6px;
  border-radius:999px;
  border:1px solid #0b5ed7;
  background:#123f7a;
  color:#fff;
  font-size:9px;
  font-weight:700;
  line-height:1;
  vertical-align:middle;
  white-space:nowrap;
}
.osp-client-optical-list-page .osp-client-optical-auto-badge-likely{
  background:#1d6fa3;
  border-color:#155a87;
}
.osp-client-optical-list-page .osp-client-optical-badge{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:1px 5px;
  border-radius:999px;
  font-size:10px;
  line-height:1.2;
  white-space:nowrap;
  border:1px solid transparent;
}
.osp-client-optical-list-page .osp-client-optical-priority-alert{
  color:#b91c1c;
  background:#fee2e2;
  border-color:#fca5a5;
  min-width:12px;
  justify-content:center;
}
.osp-client-optical-list-page .osp-client-optical-priority-conflict{
  color:#991b1b;
  background:#fecaca;
  border-color:#f87171;
  min-width:12px;
  justify-content:center;
}
.osp-client-optical-list-page .osp-client-optical-priority-mapped{
  color:#166534;
  background:#dcfce7;
  border-color:#86efac;
  min-width:12px;
  justify-content:center;
}
.osp-client-optical-list-page .osp-client-optical-priority-likely{
  color:#155e75;
  background:#cffafe;
  border-color:#67e8f9;
  min-width:12px;
  justify-content:center;
}
.osp-client-optical-list-page .osp-client-optical-priority-unmapped{
  color:#475569;
  background:#e2e8f0;
  border-color:#cbd5e1;
  min-width:12px;
  justify-content:center;
}
.osp-client-optical-list-page .osp-client-optical-ppp-online,
.osp-client-optical-list-page .osp-client-optical-onu-online{
  color:#15803d;
  background:rgba(25,166,90,.14);
  border-color:rgba(25,166,90,.25);
}
.osp-client-optical-list-page .osp-client-optical-ppp-offline,
.osp-client-optical-list-page .osp-client-optical-onu-offline{
  color:#b91c1c;
  background:rgba(217,58,58,.14);
  border-color:rgba(217,58,58,.25);
}
.osp-client-optical-list-page .osp-client-optical-ppp-expired{
  color:#a16207;
  background:rgba(242,169,0,.16);
  border-color:rgba(242,169,0,.28);
}
.osp-client-optical-list-page .osp-client-optical-ppp-unknown,
.osp-client-optical-list-page .osp-client-optical-onu-unknown,
.osp-client-optical-list-page .osp-client-optical-onu-no-onu{
  color:#475569;
  background:rgba(148,163,184,.14);
  border-color:rgba(148,163,184,.28);
}
.osp-client-optical-list-page .osp-client-optical-badge-online{
  color:#15803d;
  background:rgba(25,166,90,.14);
  border-color:rgba(25,166,90,.25);
}
.osp-client-optical-list-page .osp-client-optical-badge-offline{
  color:#b91c1c;
  background:rgba(217,58,58,.14);
  border-color:rgba(217,58,58,.25);
}
.osp-client-optical-list-page .osp-client-optical-badge-expired{
  color:#a16207;
  background:rgba(242,169,0,.16);
  border-color:rgba(242,169,0,.28);
}
.osp-client-optical-list-page .osp-client-optical-badge-unknown{
  color:#475569;
  background:rgba(148,163,184,.14);
  border-color:rgba(148,163,184,.28);
}
.osp-client-optical-list-page .osp-client-optical-confidence-exact{
  color:#166534;
  background:#dcfce7;
  border-color:#86efac;
}
.osp-client-optical-list-page .osp-client-optical-confidence-likely{
  color:#155e75;
  background:#cffafe;
  border-color:#67e8f9;
}
.osp-client-optical-list-page .osp-client-optical-confidence-suspect{
  color:#7f1d1d;
  background:#fee2e2;
  border-color:#fca5a5;
}
.osp-client-optical-list-page .osp-client-optical-confidence-unknown{
  color:#475569;
  background:#e2e8f0;
  border-color:#cbd5e1;
}
.osp-client-optical-list-page .osp-client-optical-optical-good{
  color:#15803d;
  background:rgba(25,166,90,.14);
  border-color:rgba(25,166,90,.25);
}
.osp-client-optical-list-page .osp-client-optical-optical-warning{
  color:#a16207;
  background:rgba(242,169,0,.16);
  border-color:rgba(242,169,0,.28);
}
.osp-client-optical-list-page .osp-client-optical-optical-critical{
  color:#b91c1c;
  background:rgba(217,58,58,.14);
  border-color:rgba(217,58,58,.25);
}
.osp-client-optical-list-page .osp-client-optical-optical-too-high{
  color:#1d4ed8;
  background:rgba(59,130,246,.14);
  border-color:rgba(59,130,246,.26);
}
.osp-client-optical-list-page .osp-client-optical-optical-no-signal{
  color:#475569;
  background:rgba(100,116,139,.12);
  border-color:rgba(100,116,139,.28);
}
.osp-client-optical-list-page .osp-client-optical-optical-no-reading,
.osp-client-optical-list-page .osp-client-optical-optical-no-onu{
  color:#475569;
  background:rgba(148,163,184,.14);
  border-color:rgba(148,163,184,.28);
}
.osp-client-optical-list-page .osp-client-optical-mapping-mapped{
  color:#0f766e;
  background:rgba(13,148,136,.12);
  border-color:rgba(13,148,136,.24);
}
.osp-client-optical-list-page .osp-client-optical-mapping-unmapped{
  color:#475569;
  background:rgba(148,163,184,.14);
  border-color:rgba(148,163,184,.28);
}
.osp-client-optical-list-page .osp-client-optical-mapping-suspect,
.osp-client-optical-list-page .osp-client-optical-mapping-likely-match{
  color:#a16207;
  background:rgba(242,169,0,.16);
  border-color:rgba(242,169,0,.28);
}
.osp-client-optical-list-page .osp-client-optical-mapping-conflict{
  color:#b91c1c;
  background:rgba(217,58,58,.14);
  border-color:rgba(217,58,58,.25);
}
.osp-client-optical-list-page .osp-client-optical-stale{
  display:inline-flex;
  margin-left:4px;
  padding:1px 5px;
  border-radius:999px;
  background:rgba(148,163,184,.14);
  border:1px solid rgba(148,163,184,.28);
  color:#475569;
  font-size:9px;
  line-height:1;
  white-space:nowrap;
}
.osp-client-optical-list-page .osp-client-optical-match-hint{
  margin-top:3px;
  font-size:9px;
  color:#a16207;
}
.osp-client-optical-list-page .osp-client-optical-match-hint .osp-client-optical-badge{
  margin-left:4px;
}
.osp-client-optical-list-page .osp-client-optical-actions{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  align-items:center;
  justify-content:flex-start;
}
.osp-client-optical-list-page .osp-client-optical-actions .btn{
  min-height:15px;
  min-width:15px;
  padding:0 2px;
  font-size:9px;
  line-height:1.15;
  text-align:center;
}
.osp-client-optical-list-page .osp-client-optical-actions .osp-tree-inline-form{
  display:inline-flex;
}
.osp-client-optical-list-page .osp-client-optical-checkbox-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  font-size:10px;
  color:#334155;
}
.osp-client-optical-list-page .osp-client-optical-checkbox-row label{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.osp-client-optical-list-page tbody tr.is-alert{
  background:rgba(217,58,58,.03);
}
.osp-client-optical-list-page tbody tr.is-suspect,
.osp-client-optical-list-page tbody tr.is-likely-match{
  background:rgba(242,169,0,.04);
}
.osp-client-optical-list-page tbody tr.is-conflict{
  background:rgba(217,58,58,.06);
}
.osp-client-optical-list-page tbody tr.is-stale{
  opacity:.96;
}
.osp-client-optical-list-page tbody tr.is-unmapped td{
  color:#64748b;
}
.osp-client-optical-list-page tbody tr td{
  vertical-align:top;
}
.osp-client-onu-map-page .osp-client-onu-map-table{
  width:max-content;
  min-width:100%;
}
.osp-client-onu-map-page .osp-client-onu-map-table td,
.osp-client-onu-map-page .osp-client-onu-map-table th{
  white-space:nowrap;
}
.osp-client-onu-map-page .osp-client-onu-map-table tr.is-likely-caller-match{
  background:rgba(59,130,246,.08);
}
.osp-client-onu-map-page .osp-client-onu-map-table tr.is-suspect-caller-match{
  background:rgba(251,191,36,.08);
}
.osp-client-onu-map-page .osp-client-onu-map-table tr.is-exact-caller-match{
  background:rgba(14,165,233,.08);
}
.osp-client-onu-map-page .osp-client-onu-map-table tr.is-exact-caller-match td{
  font-weight:600;
}
.osp-client-onu-map-page .osp-client-onu-map-table tr.is-unknown-caller-match{
  background:rgba(148,163,184,.06);
}
.osp-client-onu-map-page .osp-client-onu-map-confidence,
.osp-client-onu-map-page .osp-client-onu-map-confidence{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 7px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:10px;
  line-height:1.2;
  white-space:nowrap;
}
.osp-client-onu-map-page .osp-client-onu-map-confidence-exact{
  color:#166534;
  background:#dcfce7;
  border-color:#86efac;
}
.osp-client-onu-map-page .osp-client-onu-map-confidence-likely{
  color:#155e75;
  background:#cffafe;
  border-color:#67e8f9;
}
.osp-client-onu-map-page .osp-client-onu-map-confidence-suspect{
  color:#7f1d1d;
  background:#fee2e2;
  border-color:#fca5a5;
}
.osp-client-onu-map-page .osp-client-onu-map-confidence-unknown{
  color:#475569;
  background:#e2e8f0;
  border-color:#cbd5e1;
}
.osp-client-onu-map-page .osp-client-onu-map-auto-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:6px;
  padding:1px 6px;
  border-radius:999px;
  border:1px solid #0b5ed7;
  background:#123f7a;
  color:#fff;
  font-size:9px;
  font-weight:700;
  line-height:1;
  vertical-align:middle;
  white-space:nowrap;
}
.osp-client-onu-map-page .osp-client-onu-map-auto-badge-likely{
  background:#1d6fa3;
  border-color:#155a87;
}
.osp-onu-live-monitor-page .osp-client-optical-list-table-shell{
  overflow:auto;
  border:1px solid #dbe3ef;
  border-radius:12px;
  background:#fff;
  max-height:calc(100vh - 290px);
  margin-bottom:12px;
}
.osp-onu-live-monitor-page .osp-client-optical-list-table{
  width:100%;
  min-width:0;
  table-layout:auto;
}
.osp-onu-live-monitor-page .osp-client-optical-list-table thead th{
  position:sticky;
  top:0;
  z-index:3;
  background:#123f7a;
  color:#ffffff;
  border-bottom:1px solid #0b2d5c;
}
.osp-onu-live-monitor-page .osp-client-optical-list-table thead th,
.osp-onu-live-monitor-page .osp-client-optical-list-table tbody td{
  padding:4px 5px;
  font-size:10px;
  line-height:1.15;
  overflow:hidden;
  text-overflow:ellipsis;
}
.osp-onu-live-monitor-page .osp-client-optical-list-table tbody td{
  vertical-align:top;
}
.osp-onu-live-monitor-page .osp-client-optical-list-table thead th a{
  color:#ffffff;
}
.osp-onu-live-monitor-page .osp-client-optical-list-table thead th .osp-client-optical-sort-arrow{
  color:#ffffff;
}
.osp-onu-live-monitor-page .osp-client-optical-list-table tbody tr.is-alert{
  background:rgba(217,58,58,.04);
}
.osp-onu-live-monitor-page .osp-live-monitor-section-title{
  padding:6px 8px;
  font-size:11px;
  font-weight:700;
  color:#0f172a;
  background:#f8fafc;
  border-bottom:1px solid #dbe3ef;
}
.osp-onu-live-monitor-page .osp-onu-live-monitor-shell{
  margin-bottom:12px;
}
.osp-onu-live-monitor-page .osp-onu-live-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:1px 5px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:9px;
  line-height:1.2;
  white-space:nowrap;
  vertical-align:middle;
}
.osp-onu-live-monitor-page .osp-onu-live-secondary,
.osp-client-optical-list-page .osp-client-optical-secondary{
  margin-top:2px;
  font-size:9px;
  color:#64748b;
  white-space:nowrap;
}
.osp-onu-live-monitor-page .osp-client-optical-main-cell{
  display:flex;
  flex-direction:column;
  gap:0;
  min-width:0;
}
.osp-onu-live-monitor-page .osp-client-optical-main-cell strong,
.osp-onu-live-monitor-page .osp-client-optical-main-cell small{
  display:block;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.osp-onu-live-monitor-page .osp-client-optical-main-cell strong{
  font-size:11px;
  font-weight:400;
  color:#0f172a;
  line-height:1.05;
}
.osp-onu-live-monitor-page .osp-client-optical-main-cell small{
  font-size:9px;
  color:#64748b;
  line-height:1.05;
}
.osp-onu-live-monitor-page .osp-client-optical-status-stack{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.osp-client-optical-list-page .osp-client-optical-status-stack{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.osp-onu-live-monitor-page .osp-onu-live-badge-alarm-active,
.osp-onu-live-monitor-page .osp-onu-live-badge-offline,
.osp-client-optical-list-page .osp-client-optical-live-alarm-active,
.osp-client-optical-list-page .osp-client-optical-live-alarm-offline,
.osp-client-optical-list-page .osp-client-optical-live-alarm-active,
.osp-client-optical-list-page .osp-client-optical-live-alarm-offline,
.osp-client-optical-list-page .osp-client-optical-live-alarm-recovering{
  color:#991b1b;
  background:#fee2e2;
  border-color:#fca5a5;
}
.osp-onu-live-monitor-page .osp-onu-live-badge-alarm-recovered{
  color:#166534;
  background:#dcfce7;
  border-color:#86efac;
}
.osp-client-optical-list-page .osp-client-optical-live-alarm-recovering{
  color:#7c2d12;
  background:#ffedd5;
  border-color:#fdba74;
}
.osp-onu-live-monitor-page .osp-onu-live-badge-online,
.osp-client-optical-list-page .osp-client-optical-olt-online{
  color:#166534;
  background:#dcfce7;
  border-color:#86efac;
}
.osp-onu-live-monitor-page .osp-onu-live-badge-no-signal,
.osp-client-optical-list-page .osp-client-optical-olt-no-signal{
  color:#a16207;
  background:#fef3c7;
  border-color:#fde68a;
}
.osp-onu-live-monitor-page .osp-onu-live-badge-unknown,
.osp-client-optical-list-page .osp-client-optical-olt-unknown{
  color:#475569;
  background:#e2e8f0;
  border-color:#cbd5e1;
}
.osp-onu-live-monitor-page .osp-onu-live-badge-good{
  color:#166534;
  background:#dcfce7;
  border-color:#86efac;
}
.osp-onu-live-monitor-page .osp-onu-live-badge-warning{
  color:#a16207;
  background:#fef3c7;
  border-color:#fde68a;
}
.osp-onu-live-monitor-page .osp-onu-live-badge-critical{
  color:#991b1b;
  background:#fee2e2;
  border-color:#fca5a5;
}
.osp-onu-live-monitor-page .osp-onu-live-badge-stale{
  color:#7c2d12;
  background:#ffedd5;
  border-color:#fdba74;
}
.osp-onu-live-monitor-page .osp-onu-live-badge-no-reading{
  color:#475569;
  background:#e2e8f0;
  border-color:#cbd5e1;
}
.osp-onu-live-monitor-page .osp-onu-live-badge-recovered{
  color:#155e75;
  background:#cffafe;
  border-color:#67e8f9;
}
.osp-onu-live-monitor-page .osp-onu-live-badge-pending{
  color:#7c2d12;
  background:#ffedd5;
  border-color:#fdba74;
}
.osp-onu-live-monitor-page .osp-onu-live-badge-running{
  color:#1d4ed8;
  background:#dbeafe;
  border-color:#93c5fd;
}
.osp-onu-live-monitor-page .osp-onu-live-badge-success{
  color:#166534;
  background:#dcfce7;
  border-color:#86efac;
}
.osp-onu-live-monitor-page .osp-onu-live-badge-error{
  color:#991b1b;
  background:#fee2e2;
  border-color:#fca5a5;
}
.osp-onu-live-monitor-page .osp-onu-live-actions{
  gap:3px;
}
.osp-onu-live-monitor-page .osp-onu-live-actions .btn{
  min-height:16px;
  min-width:16px;
  padding:0 3px;
  font-size:9px;
  line-height:1.1;
}
.osp-client-onu-map-page .osp-client-onu-map-summary{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin:0 0 12px;
}
.osp-client-onu-map-page .osp-client-onu-map-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  padding:8px 10px;
  border:1px solid #dbe3ef;
  border-radius:12px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(6px);
  box-shadow:0 8px 24px rgba(15,23,42,.06);
  z-index:2;
}
.osp-client-onu-map-page .osp-client-onu-map-actions-top{
  position:sticky;
  top:8px;
}
.osp-client-onu-map-page .osp-client-onu-map-actions-bottom{
  position:sticky;
  bottom:8px;
  justify-content:flex-end;
}
.osp-client-onu-map-page .osp-client-onu-map-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.osp-client-onu-map-page .osp-client-onu-map-override{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:#475569;
}
.osp-client-onu-map-page .osp-client-onu-map-note{
  font-size:11px;
  color:#64748b;
  margin-top:-4px;
}
.osp-client-onu-map-page .osp-client-onu-map-footer{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.osp-client-onu-map-page .osp-client-onu-map-subhead{
  margin-top:8px;
}
.osp-client-onu-map-page .osp-client-onu-map-table-shell table th:nth-child(5),
.osp-client-onu-map-page .osp-client-onu-map-table-shell table td:nth-child(5){
  min-width:180px;
}
.osp-client-onu-map-page .osp-client-onu-map-table-shell table th:nth-child(1),
.osp-client-onu-map-page .osp-client-onu-map-table-shell table td:nth-child(1){
  width:52px;
}
@media (max-width: 1100px){
  .osp-manage-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .osp-client-onu-map-page .osp-client-onu-map-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width: 760px){
  .osp-tree-header,
  .osp-tree-toolbar,
  .osp-tree-stats,
  .osp-tree-root,
  .osp-tree-empty{
    width:calc(100vw - 16px);
  }
  .osp-tree-wrap{
    overflow-x:auto;
  }
  .osp-tree-header{
    flex-direction:column;
    align-items:flex-start;
  }
  .osp-tree-manage{
    width:calc(100vw - 16px);
  }
  .osp-manage-grid{
    grid-template-columns:1fr;
  }
  .osp-port-row,
  .osp-tree-port-row{
    min-width:930px;
  }
}
@media (max-width: 900px){
  .activation-hero{
    grid-template-columns:1fr;
    gap:6px;
  }
  .activation-hero-meta{
    grid-template-columns:1fr;
  }
  .activation-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .activation-workspace{
    grid-template-columns:1fr;
  }
  .activation-table-shell{
    overflow-x:auto;
    max-height:none;
    -webkit-overflow-scrolling:touch;
  }
  .activation-table{
    min-width:980px;
  }
  .activation-form-section:nth-of-type(1) .activation-form-grid,
  .activation-form-section:nth-of-type(2) .activation-form-grid,
  .activation-form-section:nth-of-type(3) .activation-form-grid{
    grid-template-columns:1fr;
  }
  .activation-form-actions{
    justify-content:stretch;
  }
  .activation-form-actions .btn,
  .activation-form-actions .btn.secondary{
    width:100%;
  }
  .activation-toolbar{
    gap:5px;
  }
}
@media (max-width: 640px){
  .activation-page .noc-panel,
  .activation-page .noc-panel-title,
  .activation-page .noc-kpi,
  .activation-page .activation-panel{
    padding-left:6px;
    padding-right:6px;
  }
  .activation-hero{
    gap:4px;
  }
  .activation-hero-meta{
    gap:4px;
  }
  .activation-hero-chip:nth-child(3){
    display:none;
  }
  .activation-hero-chip{
    padding:4px 5px;
  }
  .activation-page .noc-kpi span,
  .activation-hero-chip span,
  .activation-toolbar-note strong,
  .activation-toolbar-note,
  .activation-workflow-strip span{
    font-size:8px;
  }
  .activation-page .noc-kpi strong{
    font-size:11px;
  }
  .activation-table thead th,
  .activation-table td{
    padding:4px 4px;
  }
  .activation-table td strong{
    font-size:8px;
  }
  .activation-actions{
    gap:3px;
  }
  .activation-actions .icon-btn{
    width:20px;
    min-width:20px;
  }
  .activation-page .noc-kpi-grid{
    gap:4px;
  }
  .activation-table{
    min-width:1080px;
  }
}

.map-coverage-page .map-coverage-layout{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:14px;
}
.map-coverage-page .map-coverage-sidebar{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.map-coverage-page .map-coverage-filter-form,
.map-coverage-page .map-coverage-side-list{
  display:grid;
  gap:10px;
}
.map-coverage-page .map-coverage-filter-form label,
.map-coverage-page .map-coverage-side-item{
  display:grid;
  gap:5px;
}
.map-coverage-page .map-coverage-side-item{
  text-align:left;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.15);
  background:rgba(15,23,42,.72);
  color:#e2e8f0;
}
.map-coverage-page .map-coverage-map-shell{
  min-height:720px;
}
.map-coverage-page .map-coverage-canvas{
  min-height:680px;
}
.map-coverage-page .coverage-selected-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.map-coverage-page .coverage-selected-grid > div{
  background:rgba(15,23,42,.58);
  border:1px solid rgba(148,163,184,.12);
  border-radius:10px;
  padding:8px 10px;
}
.map-coverage-page .coverage-selected-grid span{
  display:block;
  color:#94a3b8;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.map-coverage-icon .map-coverage-pin{
  width:16px;
  height:16px;
  border-radius:50%;
  display:inline-block;
  border:2px solid rgba(15,23,42,.95);
  box-shadow:0 0 0 2px rgba(255,255,255,.12);
}
@media (max-width: 980px){
  .map-coverage-page .map-coverage-layout{
    grid-template-columns:1fr;
  }
  .map-coverage-page .coverage-selected-grid{
    grid-template-columns:1fr;
  }
}

/* Activation Center responsive overrides */
body.activation-surface{
  overflow-x:hidden;
}
.activation-page{
  min-width:0;
}
.activation-page .noc-hero,
.activation-page .noc-panel,
.activation-page .noc-kpi{
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
.activation-page .noc-hero .activation-hero-meta,
.activation-page .activation-kpi-grid,
.activation-page .activation-workspace,
.activation-page .activation-queue-grid,
.activation-page .activation-request-meta,
.activation-page .activation-form-grid{
  min-width:0;
}
.activation-page .activation-workspace{
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
}
.activation-page .activation-form-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.activation-page .activation-form-grid label{
  min-width:0;
}
.activation-page .activation-form-grid input,
.activation-page .activation-form-grid select,
.activation-page .activation-form-grid textarea{
  width:100%;
  min-height:44px;
  box-sizing:border-box;
}
.activation-page .activation-form-grid textarea{
  min-height:100px;
}
.activation-page .activation-form-actions{
  gap:8px;
}
.activation-page .activation-form-actions .btn,
.activation-page .activation-form-actions .btn.secondary{
  min-height:44px;
}
.activation-page .activation-queue-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.activation-page .activation-request-card{
  min-width:0;
  overflow:hidden;
}
.activation-page .activation-request-card-top,
.activation-page .activation-actions,
.activation-page .activation-toolbar{
  min-width:0;
}
.activation-page .activation-request-title,
.activation-page .activation-request-subtitle,
.activation-page .activation-request-meta strong,
.activation-page .activation-request-meta small{
  overflow-wrap:anywhere;
  word-break:break-word;
}
.activation-page .activation-workflow-strip{
  display:flex;
  gap:6px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  padding-bottom:2px;
}
.activation-page .activation-workflow-strip span{
  flex:0 0 auto;
}
.activation-page .activation-toolbar-note{
  min-width:0;
}
@media (max-width: 1024px){
  .activation-page .noc-hero,
  .activation-page .noc-panel{
    padding:10px;
  }
  .activation-page .noc-kpi{
    padding:8px 9px;
  }
  .activation-page .activation-workspace{
    gap:10px;
  }
  .activation-page .activation-kpi-grid{
    gap:8px;
  }
}
@media (max-width: 768px){
  .activation-page{
    padding-top:4px;
  }
  .activation-page .activation-hero{
    grid-template-columns:1fr;
  }
  .activation-page .activation-hero-meta{
    grid-template-columns:1fr;
  }
  .activation-page .activation-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .activation-page .activation-workspace{
    grid-template-columns:1fr;
  }
  .activation-page .activation-form-grid{
    grid-template-columns:1fr;
  }
  .activation-page .activation-queue-grid{
    grid-template-columns:1fr;
  }
  .activation-page .activation-form-actions{
    flex-direction:column;
  }
  .activation-page .activation-form-actions .btn,
  .activation-page .activation-form-actions .btn.secondary{
    width:100%;
  }
}
@media (max-width: 480px){
  .activation-page .noc-hero,
  .activation-page .noc-panel,
  .activation-page .noc-kpi{
    padding:8px;
    border-radius:12px;
  }
  .activation-page .activation-kpi-grid{
    grid-template-columns:1fr;
  }
  .activation-page .activation-hero h1{
    font-size:18px;
  }
  .activation-page .activation-form-grid input,
  .activation-page .activation-form-grid select,
  .activation-page .activation-form-grid textarea{
    min-height:44px;
    font-size:14px;
  }
  .activation-page .activation-form-grid label{
    font-size:11px;
  }
  .activation-page .activation-actions{
    gap:6px;
  }
  .activation-page .activation-actions .btn,
  .activation-page .activation-actions a{
    min-height:40px;
  }
  .activation-page .activation-request-card{
    padding:10px;
  }
}