:root {
  --bg-main: #f3f6f8;
  --bg-sidebar: #26333a;
  --bg-sidebar-strong: #152127;
  --panel: #ffffff;
  --panel-soft: #f7f9fb;
  --line: #d3dae2;
  --line-strong: #bfc8d3;
  --text: #1f2933;
  --muted: #66717f;
  --accent: #28a745;
  --accent-dark: #1d8234;
  --forti-red: #e5231f;
  --accent-soft: #fff0f1;
  --up: #138a43;
  --down: #c62828;
  --unknown: #a36400;
  --shadow: 0 6px 18px rgba(22, 27, 33, 0.08);
  --star-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 2 2.9 6.1 6.7.9-4.9 4.7 1.2 6.7L12 17.2l-5.9 3.2 1.2-6.7L2.4 9l6.7-.9L12 2Z'/%3E%3C/svg%3E");
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Inter", "Space Grotesk", "Trebuchet MS", sans-serif;
  color: var(--text);
  background: var(--bg-main);
  overflow-x: hidden;
  padding-top: 3.62rem;
}

body.auth-locked {
  overflow: hidden;
}

/* ── LOGIN SCREEN ─────────────────────────────────────── */
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: #eef2f7;
  overflow: hidden;
}

.login-screen.hidden {
  display: none;
}

/* Background decorative layers */
.login-bg-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.login-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px);
  background-size: 40px 40px;
}

.login-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.22;
}

.login-bg-glow-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, #a8d5b5, transparent 70%);
  top: -160px;
  left: -160px;
}

.login-bg-glow-2 {
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, #b8d0e8, transparent 70%);
  bottom: -120px;
  right: -120px;
}

/* Split container */
.login-split {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(900px, 100%);
  min-height: 530px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.07),
    0 8px 24px rgba(0,0,0,0.08),
    0 32px 72px rgba(0,0,0,0.12);
}

/* ── LEFT HERO PANEL ───────────────────────────────────── */
.login-hero {
  flex: 0 0 44%;
  display: flex;
  flex-direction: column;
  padding: 2.5rem 2rem;
  background: linear-gradient(155deg, #1a5c2a 0%, #1e7a36 45%, #155220 100%);
  color: #e8f5ec;
  position: relative;
  overflow: hidden;
}

.login-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.login-hero::after {
  content: "";
  position: absolute;
  bottom: -80px;
  right: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  pointer-events: none;
}

.login-hero-top {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: auto;
  position: relative;
  z-index: 1;
}

.login-hero-brand-mark {
  width: 2.8rem;
  height: 2.8rem;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #e5231f;
  color: #fff;
  font-weight: 900;
  font-size: 1.3rem;
  letter-spacing: -0.03em;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

.login-hero-brand-text strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.02em;
}

.login-hero-brand-text span {
  display: block;
  font-size: 0.73rem;
  color: rgba(255,255,255,0.6);
  margin-top: 0.1rem;
}

.login-hero-body {
  padding: 2.5rem 0;
  position: relative;
  z-index: 1;
}

.login-hero-title {
  margin: 0 0 1.5rem;
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.2;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.login-hero-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.login-hero-features li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.83rem;
  color: rgba(255,255,255,0.75);
}

.lhf-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7deca0;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(125,236,160,0.5);
}

.login-hero-foot {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.38);
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.12);
  position: relative;
  z-index: 1;
}

/* ── RIGHT FORM PANEL ──────────────────────────────────── */
.login-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.8rem 2.4rem;
  background: #ffffff;
  gap: 0;
}

.login-panel-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.login-panel-logo .brand-mark {
  width: 2.8rem;
  height: 2.8rem;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: #e5231f;
  color: #fff;
  font-weight: 900;
  font-size: 1.3rem;
  box-shadow: 0 3px 10px rgba(229,35,31,0.25);
}

.login-panel-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.01em;
}

.login-panel-sub {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: #9ca3af;
}

.login-fields {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.login-field {
  display: grid;
  gap: 0.38rem;
}

.login-field-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.login-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.login-input-icon {
  position: absolute;
  left: 0.8rem;
  width: 1rem;
  height: 1rem;
  color: #9ca3af;
  pointer-events: none;
  flex-shrink: 0;
}

.login-input-wrap input {
  width: 100%;
  min-height: 2.6rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.55rem 2.8rem 0.55rem 2.4rem;
  background: #f9fafb;
  color: #111827;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}

.login-input-wrap input::placeholder {
  color: #c4c9d4;
}

.login-input-wrap input:focus {
  border-color: #28a745;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(40,167,69,0.1);
}

.login-pw-toggle {
  position: absolute;
  right: 0.7rem;
  background: none;
  border: none;
  padding: 0.2rem;
  cursor: pointer;
  color: #9ca3af;
  display: grid;
  place-items: center;
  transition: color 0.15s;
}

.login-pw-toggle:hover {
  color: #374151;
}

.login-pw-toggle svg {
  width: 1rem;
  height: 1rem;
}

.login-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.7rem;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #28a745, #1e8c38);
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: filter 0.18s, transform 0.12s, box-shadow 0.18s;
  box-shadow: 0 4px 16px rgba(40,167,69,0.28);
  margin-bottom: 0.9rem;
}

.login-submit:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 22px rgba(40,167,69,0.38);
}

.login-submit:active {
  transform: translateY(1px);
  filter: brightness(0.96);
}

.login-submit svg {
  width: 1rem;
  height: 1rem;
}

.login-footer-note {
  text-align: center;
  font-size: 0.72rem;
  color: #c4c9d4;
  margin: 0;
}

/* Responsive: stack on small screens */
@media (max-width: 640px) {
  .login-split { flex-direction: column; min-height: unset; }
  .login-hero { display: none; }
  .login-panel { padding: 2rem 1.5rem; }
}

button,
input,
select {
  font: inherit;
}

.app-frame {
  min-height: calc(100vh - 3.62rem);
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 3.62rem;
  height: calc(100vh - 3.62rem);
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0)),
    linear-gradient(180deg, #2d3b43 0%, #18242b 100%);
  color: #ffffff;
  border-right: 1px solid #12171c;
}

.brand-block {
  display: none;
  min-height: 3.65rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.95rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.brand-mark {
  width: 2.55rem;
  height: 1.55rem;
  display: inline-grid;
  place-items: center;
  border-radius: 3px;
  background: var(--forti-red);
  color: #ffffff;
  font-weight: 800;
}

.brand-block strong,
.brand-block small {
  display: block;
}

.brand-block small {
  margin-top: 0.08rem;
  color: #b8c0ca;
  font-size: 0.75rem;
}

.nav-list {
  padding: 0.42rem 0;
  display: grid;
  gap: 0;
}

.nav-favorite {
  min-height: 2.4rem;
}

.nav-item {
  display: flex;
  align-items: center;
  min-height: 2.36rem;
  border-radius: 0;
  color: #eef3f6;
  text-decoration: none;
  padding: 0.46rem 0.95rem;
  font-size: 0.9rem;
  font-weight: 650;
  position: relative;
}

.nav-item:hover,
.nav-item.active {
  background: linear-gradient(90deg, #259f43, #1c8c38);
  color: #ffffff;
}

.nav-item:not(.nav-favorite)::after {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  margin-left: auto;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  opacity: 0.82;
  transform: rotate(45deg);
}

.nav-item.active::after {
  border: 0;
  width: 0.74rem;
  height: 0.74rem;
  background: currentColor;
  mask: var(--star-icon) center / contain no-repeat;
  -webkit-mask: var(--star-icon) center / contain no-repeat;
  transform: none;
}

.nav-icon {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='4' width='16' height='16' rx='2' fill='black'/%3E%3C/svg%3E");
  width: 1rem;
  height: 1rem;
  display: inline-block;
  margin-right: 0.65rem;
  background: currentColor;
  mask: var(--icon) center / contain no-repeat;
  -webkit-mask: var(--icon) center / contain no-repeat;
  opacity: 0.9;
}

.icon-favorites {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 2 2.9 6.1 6.7.9-4.9 4.7 1.2 6.7L12 17.2l-5.9 3.2 1.2-6.7L2.4 9l6.7-.9L12 2Z'/%3E%3C/svg%3E");
}

.icon-dashboard {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h7v7H4V4Zm9 0h7v4h-7V4ZM4 13h7v7H4v-7Zm9-3h7v10h-7V10Z'/%3E%3C/svg%3E");
}

.icon-interfaces {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 3h10v5h2v6a5 5 0 0 1-4 4.9V22h-6v-3.1A5 5 0 0 1 5 14V8h2V3Zm2 2v3h6V5H9Zm-2 5v4a3 3 0 0 0 3 3h4a3 3 0 0 0 3-3v-4H7Z'/%3E%3C/svg%3E");
}

.icon-firewall {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v6c0 5 3.4 9.7 8 11 4.6-1.3 8-6 8-11V5l-8-3Zm0 4 4 1.5V11c0 2.8-1.6 5.5-4 6.8V6Z'/%3E%3C/svg%3E");
}

.icon-dhcp {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 4h4v4h-4V4Zm-7 9h4v4H3v-4Zm14 0h4v4h-4v-4ZM11 8h2v3h6v2H5v-2h6V8Zm-7 9h2v3h12v-3h2v5H4v-5Z'/%3E%3C/svg%3E");
}

.icon-dns {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm0 2c1 1.1 1.8 2.4 2.2 4H9.8C10.2 7.4 11 6.1 12 5ZM5.3 13A7.4 7.4 0 0 1 5 11h3a11 11 0 0 0 0 2H5.3Zm1 2H8.4c.3 1 .7 1.9 1.2 2.7A7.1 7.1 0 0 1 6.3 15Zm2.1-6H6.3a7.1 7.1 0 0 1 3.3-2.7C9.1 7.1 8.7 8 8.4 9ZM12 19c-1-1.1-1.8-2.4-2.2-4h4.4c-.4 1.6-1.2 2.9-2.2 4Zm2.7-6H9.3a9 9 0 0 1 0-2h5.4a9 9 0 0 1 0 2Zm-.3 4.7c.5-.8.9-1.7 1.2-2.7h2.1a7.1 7.1 0 0 1-3.3 2.7ZM16 13a11 11 0 0 0 0-2h3c.1.3.1.7.1 1s0 .7-.1 1h-3Zm-.4-4c-.3-1-.7-1.9-1.2-2.7A7.1 7.1 0 0 1 17.7 9h-2.1Z'/%3E%3C/svg%3E");
}

.icon-routing {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 7h12l-3-3 1.4-1.4L20 8l-5.6 5.4L13 12l3-3H4V7Zm16 10H8l3 3-1.4 1.4L4 16l5.6-5.4L11 12l-3 3h12v2Z'/%3E%3C/svg%3E");
}

.icon-wan {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 12h4l2-7 4 14 2-7h6v2h-4.5L13 22 9 8l-1 6H3v-2Z'/%3E%3C/svg%3E");
}

.icon-pppoe {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 6h14v10H5V6Zm2 2v6h10V8H7Zm1 10h8v2H8v-2Zm-4-2h2v3H4v-3Zm14 0h2v3h-2v-3Z'/%3E%3C/svg%3E");
}

.icon-monitor {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 4h18v12H3V4Zm2 2v8h14V6H5Zm5 12h4v2h4v2H6v-2h4v-2Z'/%3E%3C/svg%3E");
}

.icon-log {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h9l5 5v15H6V2Zm8 2v5h4l-4-5ZM8 12h8v2H8v-2Zm0 4h8v2H8v-2Z'/%3E%3C/svg%3E");
}

.icon-status {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 3 6v6c0 5 3.8 8.6 9 10 5.2-1.4 9-5 9-10V6l-9-4Zm0 4 5 2.2V12c0 2.8-2 5.1-5 6.2V6Z'/%3E%3C/svg%3E");
}

.icon-security {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v6c0 5.1 3.3 9.4 8 11 4.7-1.6 8-5.9 8-11V5l-8-3Zm-1 6h2v4h4v2h-4v4h-2v-4H7v-2h4V8Z'/%3E%3C/svg%3E");
}

.icon-network {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 3h2v5h4v4h4v2h-4v4h-4v3h-2v-3H7v-4H3v-2h4V8h4V3Zm-2 7v6h6v-6H9Z'/%3E%3C/svg%3E");
}

.icon-users {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Zm8 1a3 3 0 1 1 0 6 3 3 0 0 1 0-6ZM2 20c.5-4 3.2-6 7-6s6.5 2 7 6H2Zm13.8-6.8c3.1.2 5.2 2 5.7 5.3h-3.7a7.8 7.8 0 0 0-2-5.3Z'/%3E%3C/svg%3E");
}

.icon-wifi {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 18.5 9.5 16a3.5 3.5 0 0 1 5 0L12 18.5Zm-5-5A7 7 0 0 1 17 13.5L15.5 15a5 5 0 0 0-7 0L7 13.5Zm-4-4A12.7 12.7 0 0 1 21 9.5L19.5 11a10.6 10.6 0 0 0-15 0L3 9.5ZM12 22l-1.6-1.6a2.2 2.2 0 0 1 3.2 0L12 22Z'/%3E%3C/svg%3E");
}

.icon-policy {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 4h11l3 3v13H5V4Zm2 2v12h10V9h-3V6H7Zm2 5h6v2H9v-2Zm0 4h6v2H9v-2Z'/%3E%3C/svg%3E");
}

.icon-profiles {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 10V7a5 5 0 0 1 10 0v3h2v11H5V10h2Zm2 0h6V7a3 3 0 0 0-6 0v3Zm2 4v3h2v-3h-2Z'/%3E%3C/svg%3E");
}

.icon-vpn {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h16v10H4V5Zm2 2v6h12V7H6Zm1 10h10v2h3v2H4v-2h3v-2Z'/%3E%3C/svg%3E");
}

.icon-auth {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 12a5 5 0 1 1 5-5 5 5 0 0 1-5 5Zm0 2c3.8 0 6.6 2 7 6H2c.4-4 3.2-6 7-6Zm8.5-7H22v2h-1.5v1.5h-2V9H17V7h.5Zm-2 0A3.5 3.5 0 1 1 19 10.5 3.5 3.5 0 0 1 15.5 7Z'/%3E%3C/svg%3E");
}

.icon-system {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 2 2 3 3.5-.7.8 3.5 3.1 1.7-1.7 3.1.7 3.5-3.5.8-1.7 3.1-3.1-1.7-3.5.7-.8-3.5-3.1-1.7 1.7-3.1-.7-3.5 3.5-.8L12 2Zm0 7a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z'/%3E%3C/svg%3E");
}

.icon-fabric {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 3h2v4h4v4h4v2h-4v4h-4v4h-2v-4H7v-4H3v-2h4V7h4V3Zm-2 6v6h6V9H9Z'/%3E%3C/svg%3E");
}

.sidebar-foot {
  margin-top: auto;
  padding: 0.9rem 1rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #c9d1da;
  font-size: 0.78rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.45rem 0.75rem;
  align-items: center;
}

.sidebar-foot span,
.sidebar-foot strong {
  display: block;
}

.sidebar-foot strong {
  color: #ffffff;
  font-size: 1rem;
  letter-spacing: 0.02rem;
}

.collapse-link {
  grid-column: 1 / -1;
  color: #cbd3dc;
  padding-left: 1.05rem;
  position: relative;
}

.collapse-link::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-left: 1.5px solid #2fac4c;
  border-bottom: 1.5px solid #2fac4c;
  transform: translateY(-50%) rotate(45deg);
}

.shell {
  width: 100%;
  margin: 0;
  padding: 0 1rem 1.2rem;
  min-width: 0;
}

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  height: 3.62rem;
  min-height: 3.62rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1rem;
  margin: 0;
  background: linear-gradient(180deg, #11181d, #071016);
  border: 0;
  box-shadow: 0 5px 18px rgba(10, 16, 20, 0.22);
  color: #ffffff;
}

.topbar-left,
.topbar-tools {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.topbar-brand {
  width: 9.4rem;
  min-height: 2.5rem;
  display: grid;
  align-content: center;
  line-height: 1;
}

.topbar-brand strong {
  color: #ffffff;
  font-size: 1.18rem;
  letter-spacing: 0.02rem;
}

.topbar-brand strong::first-letter {
  color: var(--forti-red);
}

.topbar-brand small {
  margin-top: 0.14rem;
  color: #b8c4ce;
  font-size: 0.62rem;
  letter-spacing: 0.03rem;
}

.topbar-device {
  min-width: 8rem;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  padding-left: 1rem;
  line-height: 1.2;
}

.topbar-device strong,
.topbar-device span {
  display: block;
}

.topbar-device strong {
  font-size: 0.86rem;
}

.topbar-device span {
  margin-top: 0.22rem;
  font-size: 0.78rem;
  font-weight: 800;
}

.topbar-tools {
  justify-content: flex-end;
}

.icon-button {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  display: grid;
  place-items: center;
}

.search-button {
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  background: transparent;
  position: relative;
}

.search-button::before {
  content: "";
  position: absolute;
  width: 0.78rem;
  height: 0.78rem;
  border: 2px solid #d9e1e7;
  border-radius: 50%;
  left: 0.56rem;
  top: 0.5rem;
}

.search-button::after {
  content: "";
  position: absolute;
  width: 0.55rem;
  height: 2px;
  background: #d9e1e7;
  transform: rotate(45deg);
  left: 1.25rem;
  top: 1.42rem;
}

.icon-button span,
.icon-button span::before,
.icon-button span::after {
  content: "";
  width: 1.05rem;
  height: 2px;
  display: block;
  background: #d9e1e7;
}

.icon-button span::before {
  transform: translateY(-6px);
}

.icon-button span::after {
  transform: translateY(4px);
}

.eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  font-size: 0.72rem;
  color: #9fb0bc;
  font-weight: 800;
}

h1 {
  margin: 0.18rem 0 0;
  font-size: clamp(1.08rem, 2vw, 1.32rem);
  line-height: 1.12;
  letter-spacing: 0;
}

.topbar-status {
  min-width: 7rem;
  min-height: 2.32rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  padding: 0.22rem 0.56rem;
  text-align: right;
}

.topbar-status span {
  display: none;
  color: #aebbc5;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.topbar-status strong {
  display: block;
  margin-top: 0.05rem;
  color: var(--text);
}

.poll-control {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.poll-control select,
.history-control select,
.chart-range-select {
  width: 100%;
  min-height: 1.8rem;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #ffffff;
  color: var(--text);
  padding: 0.2rem 0.42rem;
  font-size: 0.86rem;
  font-weight: 800;
}

.fixed-poll strong {
  min-height: 1.8rem;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #ffffff;
  color: var(--text);
  padding: 0.2rem 0.58rem;
  font-size: 0.86rem;
  line-height: 1;
}

.chart-range-select {
  width: auto;
  min-width: 4.7rem;
  min-height: 1.65rem;
  border-radius: 4px;
  padding: 0.14rem 1.45rem 0.14rem 0.42rem;
  font-size: 0.76rem;
}

.topbar .poll-control select {
  border-color: rgba(255, 255, 255, 0.16);
  background: #101a21;
  color: #ffffff;
  min-height: 1.9rem;
}

.toolbar-button,
.admin-menu {
  min-height: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  padding: 0.3rem 0.65rem;
  font-size: 0.84rem;
  font-weight: 750;
}

.topbar-tools .toolbar-button:not(.danger-toolbar) {
  background: rgba(255, 255, 255, 0.04);
}

.topbar-tools #server-restart,
.topbar-tools #config-backup,
.topbar-tools #config-restore,
.topbar-tools #system-reboot {
  max-width: 2.2rem;
  min-width: 2.2rem;
  overflow: hidden;
  white-space: nowrap;
  color: transparent;
  position: relative;
}

.topbar-tools #server-restart::after,
.topbar-tools #config-backup::after,
.topbar-tools #config-restore::after,
.topbar-tools #system-reboot::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  left: 50%;
  top: 50%;
  background: #ffffff;
  transform: translate(-50%, -50%);
  mask: var(--tool-icon) center / contain no-repeat;
  -webkit-mask: var(--tool-icon) center / contain no-repeat;
}

.topbar-tools #server-restart {
  --tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m4 17 5-5-5-5 1.4-1.4L12 12l-6.6 6.4L4 17Zm8 1h8v2h-8v-2Z'/%3E%3C/svg%3E");
}

.topbar-tools #config-backup {
  --tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 3h2v10l3-3 1.4 1.4L12 17l-5.4-5.6L8 10l3 3V3ZM5 19h14v2H5v-2Z'/%3E%3C/svg%3E");
}

.topbar-tools #config-restore {
  --tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 21h2V11l3 3 1.4-1.4L12 7l-5.4 5.6L8 14l3-3v10ZM5 3h14v2H5V3Z'/%3E%3C/svg%3E");
}

.topbar-tools #system-reboot {
  --tool-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 2h2v11h-2V2Zm-4.2 4.8 1.4 1.4a6 6 0 1 0 7.6 0l1.4-1.4a8 8 0 1 1-10.4 0Z'/%3E%3C/svg%3E");
}

a.toolbar-button {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.danger-toolbar {
  border-color: rgba(229, 35, 31, 0.35);
  color: #ffd8d8;
}

.admin-menu {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}

.admin-menu::after {
  content: "";
  width: 0.36rem;
  height: 0.36rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.8;
  transform: translateY(-0.12rem) rotate(45deg);
}

.dashboard-poll-control {
  min-width: 5.5rem;
}

.summary-strip {
  margin-top: 0.85rem;
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.summary-box {
  min-height: 4.25rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 5px 18px rgba(22, 27, 33, 0.06);
  padding: 0.78rem 0.9rem;
}

.summary-box span {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.summary-box strong {
  display: block;
  margin-top: 0.18rem;
  font-size: 1.45rem;
}

.panel {
  margin-top: 0.5rem;
  background: var(--panel);
  border: 1px solid #cfd7df;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(20, 28, 36, 0.045);
  overflow: hidden;
}

.dashboard-area {
  margin-top: 0.4rem;
}

.page-view {
  display: none;
}

.page-view.active-page {
  display: block;
  animation: pageIn 0.16s ease-out;
}

.dashboard-title-row {
  min-height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0 0.65rem;
}

.dashboard-title-row h2 {
  margin: 0;
  font-size: 1.12rem;
}

.dashboard-title-row p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.dashboard-widget-actions {
  margin-top: 0.42rem;
  display: flex;
  align-items: center;
  gap: 0.36rem;
}

.add-widget-button {
  min-height: 2rem;
}

.compact-select {
  width: 2.2rem;
  min-width: 2.2rem;
  padding-left: 0.32rem;
  padding-right: 0.32rem;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.5rem;
}

.widget {
  min-width: 0;
  min-height: 9rem;
  border: 1px solid #cfd7df;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(20, 28, 36, 0.045);
  padding: 0.58rem 0.62rem;
  overflow: hidden;
}

.widget-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.42rem;
}

.widget-head h3 {
  margin: 0;
  color: #111827;
  font-size: 0.92rem;
  line-height: 1.15;
}

.widget-head button {
  border: 0;
  background: transparent;
  color: #1d2934;
  font-weight: 900;
  letter-spacing: 0.06rem;
  cursor: pointer;
}

.widget-info,
.widget-license {
  grid-column: span 3;
  min-height: 14.85rem;
}

.widget-resources {
  grid-column: span 6;
  min-height: 14.85rem;
}

.widget-network {
  grid-column: span 4;
  min-height: 15.15rem;
}

.widget-traffic {
  grid-column: span 5;
  min-height: 16.55rem;
}

.traffic-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.46rem;
  padding: 0.56rem 0.62rem 0.58rem;
}

.traffic-head {
  align-items: center;
  margin-bottom: 0;
}

.traffic-head select {
  min-height: 1.75rem;
  border: 1px solid #c4ccd5;
  border-radius: 4px;
  background: #ffffff;
  color: #1f2933;
  padding: 0.16rem 1.65rem 0.16rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 750;
}

.traffic-chart-shell {
  min-height: 10.7rem;
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.traffic-panel .traffic-chart {
  height: 10.7rem;
  background:
    linear-gradient(#edf2f6 1px, transparent 1px) 0 0 / 100% 20%,
    linear-gradient(90deg, #edf2f6 1px, transparent 1px) 0 0 / 20% 100%;
}

.traffic-panel .traffic-chart .chart-line {
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.traffic-panel .traffic-chart .chart-area {
  opacity: 0.1;
}

.traffic-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.72rem;
  margin-top: 0.18rem;
  font-size: 0.72rem;
}

.traffic-legend span {
  min-width: 0;
  min-height: 1.25rem;
  display: inline-grid;
  grid-template-columns: 0.62rem auto;
  align-items: center;
  gap: 0.38rem;
}

.traffic-legend span::before {
  grid-column: 1;
  margin: 0;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
}

.traffic-legend strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.74rem;
}

.widget-apps {
  grid-column: span 3;
  min-height: 15.15rem;
}

.widget-sessions {
  grid-column: span 4;
  min-height: 12.75rem;
}

.widget-policy {
  grid-column: span 8;
  min-height: 12.75rem;
}

.info-list {
  display: grid;
  gap: 0.42rem;
  margin: 0;
}

.info-list div {
  display: grid;
  grid-template-columns: 6.2rem minmax(0, 1fr);
  gap: 0.5rem;
}

.info-list dt {
  color: #4b5865;
  font-size: 0.78rem;
}

.info-list dd {
  margin: 0;
  color: #111827;
  font-size: 0.82rem;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.license-list {
  display: grid;
  gap: 0.36rem;
}

.license-row,
.policy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.78rem;
}

.license-row strong {
  color: var(--up);
}

.license-meter {
  height: 0.42rem;
  margin-top: 0.58rem;
  border-radius: 999px;
  background: #e6ebf0;
  overflow: hidden;
}

.license-meter span {
  display: block;
  width: 0%;
  height: 100%;
  background: #38a9e5;
}

.network-map {
  position: relative;
  height: calc(100% - 1.7rem);
  min-height: 13rem;
  display: grid;
  grid-template-columns: minmax(5.8rem, 0.95fr) minmax(4rem, 0.58fr) minmax(8.6rem, 1.2fr);
  grid-template-rows: minmax(6.3rem, 1fr) minmax(4.35rem, auto);
  grid-template-areas:
    "internet core wan"
    ". lan lan";
  gap: 0.78rem 0.95rem;
  align-items: center;
  padding: 0.35rem 0.15rem 0.15rem;
}

.network-links {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.network-link {
  fill: none;
  stroke: #97a6b4;
  stroke-width: 0.7;
  vector-effect: non-scaling-stroke;
}

.network-link.primary-link {
  stroke: #1c9a46;
}

.network-link.secondary-link,
.network-link.lan-drop {
  stroke: #9aa7b3;
}

.network-link-dot {
  fill: #354450;
  stroke: #f8fafc;
  stroke-width: 0.45;
  vector-effect: non-scaling-stroke;
}

.network-node,
.wan-stack div,
.lan-row div {
  position: relative;
  z-index: 1;
  border: 1px solid #cfd8e2;
  border-radius: 4px;
  background: #fbfcfd;
  min-height: 3.45rem;
  padding: 0.52rem 0.58rem;
  text-align: center;
  font-size: 0.78rem;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.04);
}

.internet-node {
  grid-area: internet;
  justify-self: center;
  width: min(100%, 7.4rem);
}

.network-node strong,
.wan-stack strong,
.lan-row strong {
  display: block;
  color: #101820;
  font-size: 0.78rem;
}

.network-node span,
.wan-stack span,
.lan-row span {
  display: block;
  margin-top: 0.25rem;
  color: #334155;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.net-badge {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 600;
  padding: 0.07rem 0.38rem;
  border-radius: 3px;
  margin-top: 0.22rem;
  background: rgba(148,163,184,0.18);
  color: #64748b;
  text-transform: capitalize;
  letter-spacing: 0.02em;
}

.network-core {
  grid-area: core;
  justify-self: center;
  width: 3.8rem;
  height: 2.5rem;
  border-radius: 5px;
  background: #152129;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  box-shadow: inset 0 0 0 1px #2a3b44;
}

.network-core span {
  width: 0.45rem;
  height: 1.35rem;
  border-radius: 2px;
  background: #24d061;
}

.wan-stack {
  grid-area: wan;
  width: 100%;
  display: grid;
  gap: 0.75rem;
}

.lan-row {
  grid-area: lan;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  align-self: end;
}

.mini-chart-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.traffic-chart,
.session-chart {
  width: 100%;
  height: 10.2rem;
  overflow: visible;
  background:
    linear-gradient(#edf2f6 1px, transparent 1px) 0 0 / 100% 25%,
    linear-gradient(90deg, #edf2f6 1px, transparent 1px) 0 0 / 16.666% 100%;
}

.session-chart {
  height: 9.1rem;
}

.traffic-chart .chart-line,
.session-chart .chart-line,
.traffic-chart polyline,
.session-chart polyline {
  fill: none;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.traffic-chart .chart-area,
.session-chart .chart-area {
  stroke: none;
  pointer-events: none;
}

.traffic-chart text,
.session-chart text {
  fill: #66717f;
  font-size: 10px;
  font-weight: 700;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.78);
  stroke-width: 3px;
}

.traffic-chart .chart-unit-label {
  font-size: 8px;
  font-weight: 800;
}

.traffic-chart .chart-time-label {
  font-size: 10px;
  font-weight: 700;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.35rem;
  font-size: 0.75rem;
}

.chart-legend span::before,
.app-list span::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  display: inline-block;
  border-radius: 2px;
  background: var(--series-color, #29a352);
  margin-right: 0.32rem;
}

.app-summary {
  display: grid;
  grid-template-columns: 8.2rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
}

.app-donut {
  width: 8.2rem;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle closest-side, #ffffff 61%, transparent 63%),
    conic-gradient(#4e73df 0 28%, #2bb4b8 28% 52%, #f6a21a 52% 67%, #ef5b5b 67% 78%, #94a3b8 78% 100%);
}

.app-donut strong,
.app-donut span {
  grid-area: 1 / 1;
}

.app-donut strong {
  transform: translateY(-0.35rem);
  font-size: 1.05rem;
}

.app-donut span {
  transform: translateY(0.92rem);
  color: var(--muted);
  font-size: 0.72rem;
}

.app-list {
  display: grid;
  gap: 0.5rem;
  font-size: 0.78rem;
}

.app-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem;
}

.policy-list {
  display: grid;
  gap: 0.46rem;
}

.policy-row {
  grid-template-columns: 1.1fr 1fr 1fr 3rem;
  border-bottom: 1px solid #edf1f5;
  padding-bottom: 0.34rem;
}

.policy-bar {
  height: 0.45rem;
  border-radius: 999px;
  background: #e7edf2;
  overflow: hidden;
}

.policy-bar span {
  display: block;
  height: 100%;
  background: #52b56a;
}

.panel-header {
  min-height: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.68rem 0.8rem;
  background: #ffffff;
  border-bottom: 1px solid var(--line);
}

.panel-header h2 {
  margin: 0;
  color: #111827;
  font-size: 0.98rem;
  line-height: 1.15;
}

.panel-title {
  min-width: 0;
}

.system-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.55rem;
}

.secondary-button,
.danger-button {
  min-height: 2.2rem;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  padding: 0.35rem 0.75rem;
}

.secondary-button {
  border: 1px solid var(--line-strong);
  background: #ffffff;
  color: var(--text);
}

.secondary-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.danger-button {
  border: 1px solid rgba(198, 40, 40, 0.35);
  background: #fff7f7;
  color: var(--down);
}

.danger-button:hover {
  border-color: var(--down);
  background: #fff1f1;
}

.secondary-button:disabled,
.danger-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.panel-header p,
#meta,
#system-meta,
#firewall-meta,
#dhcp-meta,
#dns-meta,
#routing-meta,
#wan-meta,
#pppoe-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
  text-align: right;
  overflow-wrap: anywhere;
}

#meta.syncing {
  opacity: 0.62;
}

.error-banner {
  margin: 0.85rem 1rem 0;
  border-radius: 6px;
  border: 1px solid rgba(198, 40, 40, 0.25);
  background: #fff2f2;
  color: var(--down);
  padding: 0.65rem 0.75rem;
  font-size: 0.9rem;
}

.hidden {
  display: none;
}

.table-wrap {
  background: #ffffff;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.forti-interface-shell {
  background: #ffffff;
}

.forti-device-panel {
  min-height: 6.9rem;
  display: flex;
  align-items: stretch;
  gap: 0.9rem;
  padding: 0.55rem 0.62rem;
  border-bottom: 1px solid #bfc8d3;
  background: #ffffff;
}

.forti-device-logo {
  width: 10rem;
  display: grid;
  align-content: start;
  gap: 0.12rem;
  padding: 0.4rem;
  border: 1px solid #b8c7be;
  background: #e4f1ea;
}

.forti-device-logo strong {
  color: #1f2933;
  font-size: 0.98rem;
  letter-spacing: 0;
}

.forti-device-logo span {
  color: #111827;
  font-size: 0.7rem;
}

.forti-port-map {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr));
  align-content: start;
  gap: 0.35rem;
  padding: 0.45rem;
  border: 1px solid #b8c7be;
  background: #d9ebe2;
}

.forti-port {
  min-width: 0;
  min-height: 3.2rem;
  display: grid;
  place-items: center;
  gap: 0.12rem;
  border: 1px solid #9ea7af;
  border-radius: 0;
  background: #eceff1;
  color: #1f2933;
  cursor: pointer;
  padding: 0.18rem;
  font-size: 0.66rem;
}

.forti-port span {
  width: 1rem;
  height: 1rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid #8b949e;
  background: #ffffff;
  font-size: 0.62rem;
  line-height: 1;
}

.forti-port strong {
  max-width: 100%;
  font-size: 0.65rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forti-port small {
  max-width: 100%;
  color: #52606d;
  font-size: 0.56rem;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.forti-port.admin-up.link-up span {
  border-color: #008b22;
  background: #0bb642;
  color: #ffffff;
}

.forti-port.admin-down span,
.forti-port.link-down span {
  border-color: #a5a5a5;
  background: #cfd4d9;
  color: #48515c;
}

.forti-port.selected {
  outline: 2px solid #008d1e;
  outline-offset: 1px;
  background: #f5fff6;
}

.forti-interface-toolbar {
  min-height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid #c7cdd2;
  background: #f6f6f6;
}

.forti-toolbar-left,
.forti-view-tabs,
.forti-edit-footer {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.forti-tool-button,
.forti-view-tabs button,
.forti-edit-footer button {
  min-height: 1.8rem;
  border: 1px solid #b9bfc5;
  border-radius: 0;
  background: #ffffff;
  color: #202428;
  cursor: pointer;
  padding: 0.22rem 0.58rem;
  font-size: 0.82rem;
  font-weight: 500;
}

.forti-tool-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.forti-tool-button.primary-tool,
.forti-view-tabs button.active,
.forti-edit-footer .forti-ok-button {
  border-color: #008d1e;
  background: #008d1e;
  color: #ffffff;
  font-weight: 800;
}

.interface-bridge-panel {
  display: grid;
  gap: 0.72rem;
  padding: 0.72rem 0.8rem;
  border-bottom: 1px solid var(--line);
  background: #f8fbf9;
}

.interface-bridge-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.interface-bridge-head h3 {
  margin: 0;
  font-size: 0.92rem;
}

.interface-bridge-head p {
  margin: 0.18rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.interface-bridge-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(10rem, 1fr));
  gap: 0.58rem;
  align-items: end;
}

.interface-bridge-grid label:not(.forti-check-row) {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.interface-bridge-grid input,
.interface-bridge-grid select {
  width: 100%;
  min-height: 2.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #ffffff;
  color: var(--text);
  padding: 0.34rem 0.52rem;
  font-size: 0.84rem;
  font-weight: 700;
}

.interface-bridge-grid select[multiple] {
  min-height: 6.8rem;
}

.interface-bridge-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.48rem;
}

.danger-tool {
  border-color: rgba(198, 40, 40, 0.35);
  background: #fff7f7;
  color: var(--down);
}

.bridge-inline-check {
  flex: 0 0 auto;
}

.interface-safety-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 0.62rem;
  padding: 0.72rem 0.8rem;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.interface-status-card,
.interface-topology-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 0.68rem;
  min-width: 0;
}

.interface-topology-panel {
  margin: 0;
  border-width: 0 0 1px;
  border-radius: 0;
  padding: 0.72rem 0.8rem;
}

.interface-status-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.52rem;
}

.interface-status-card-head strong {
  min-width: 0;
  color: var(--text);
  font-size: 0.86rem;
}

.interface-status-lines {
  display: grid;
  gap: 0.36rem;
  min-width: 0;
}

.interface-status-lines > div {
  display: grid;
  grid-template-columns: minmax(5.5rem, 0.45fr) minmax(0, 1fr);
  gap: 0.54rem;
  align-items: start;
  min-width: 0;
}

.interface-status-lines span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.interface-status-lines strong {
  min-width: 0;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.preview-warning strong {
  color: var(--down);
}

.interface-topology {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.55rem;
}

.topology-node {
  display: grid;
  gap: 0.42rem;
  min-width: 0;
  border: 1px solid #dfe5e9;
  border-radius: 8px;
  background: #f8fafb;
  padding: 0.62rem;
}

.topology-node > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 0.58rem;
  min-width: 0;
}

.topology-node strong,
.topology-node span,
.topology-node small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.topology-node small,
.topology-node span {
  color: var(--muted);
}

.topology-bridge {
  border-color: rgba(0, 141, 30, 0.32);
  background: #f5fbf6;
}

.topology-ppp {
  border-color: rgba(30, 94, 173, 0.28);
  background: #f6f9fe;
}

.topology-port-list,
.interface-mini-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
}

.topology-port,
.interface-mini-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.3rem;
  border-radius: 999px;
  padding: 0.16rem 0.42rem;
  font-size: 0.64rem;
  font-weight: 900;
  border: 1px solid transparent;
}

.topology-port.state-up {
  border-color: rgba(0, 141, 30, 0.25);
  background: #eaf7ed;
  color: #08751d;
}

.topology-port.state-down {
  border-color: rgba(198, 40, 40, 0.25);
  background: #fff0f0;
  color: var(--down);
}

.topology-port.state-unknown {
  border-color: #d8dee4;
  background: #f3f5f7;
  color: var(--muted);
}

.interface-mini-badges {
  margin-top: 0.24rem;
}

.interface-mini-badge.management {
  background: #fff7e0;
  border-color: #e7bd4c;
  color: #7a5600;
}

.interface-mini-badge.route {
  background: #eaf2ff;
  border-color: #a9c8ef;
  color: #174f91;
}

.forti-status-icon.is-management {
  box-shadow: 0 0 0 3px rgba(231, 189, 76, 0.28);
}

.forti-edit-panel {
  border-bottom: 1px solid #c7cdd2;
  background: #ffffff;
}

.forti-edit-title,
.forti-edit-section {
  min-height: 1.65rem;
  display: flex;
  align-items: center;
  padding: 0.25rem 0.6rem;
  background: #eeeeee;
  color: #1f2933;
  font-size: 0.86rem;
  font-weight: 600;
}

.forti-edit-body {
  display: grid;
  gap: 0.55rem;
  padding: 0.75rem 0.6rem 0.95rem;
}

.forti-edit-row {
  display: grid;
  grid-template-columns: 7.4rem minmax(0, 17rem);
  align-items: center;
  gap: 0.7rem;
  font-size: 0.84rem;
}

.forti-edit-row > span {
  color: #1f2933;
}

.forti-edit-row input,
.forti-edit-row select {
  width: 100%;
  min-height: 1.55rem;
  border: 1px solid #aeb4ba;
  border-radius: 0;
  background: #ffffff;
  padding: 0.12rem 0.36rem;
  font-size: 0.82rem;
}

.forti-edit-row strong {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-width: 0;
  font-size: 0.84rem;
  font-weight: 500;
}

.forti-access-grid {
  display: grid;
  grid-template-columns: repeat(5, max-content);
  gap: 0.28rem 1.1rem;
  padding-left: 3rem;
}

.forti-access-grid label,
.forti-check-row {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #1f2933;
  font-size: 0.84rem;
}

.forti-access-grid input,
.forti-check-row input {
  width: 0.85rem;
  height: 0.85rem;
  accent-color: #008d1e;
}

.forti-edit-footer {
  justify-content: center;
  min-height: 2.35rem;
  border-top: 1px solid #eeeeee;
  background: #f4f4f4;
  padding: 0.32rem;
}

.forti-edit-footer button {
  min-width: 7.5rem;
}

.forti-interface-table table {
  min-width: 1020px;
}

.forti-interface-table th,
.forti-interface-table td {
  border: 1px solid #dedede;
  border-left: 0;
  padding: 0.24rem 0.42rem;
  color: #202428;
  font-size: 0.82rem;
  vertical-align: middle;
}

.forti-interface-table th {
  height: 1.75rem;
  background: #f3f3f3;
  color: #33383e;
  font-size: 0.82rem;
  font-weight: 500;
  text-transform: none;
}

.forti-group-row td {
  border-color: #7d8c98;
  background: #7d8c98;
  color: #ffffff;
  font-weight: 800;
}

.forti-interface-table tbody tr.selected-row {
  background: #e7f4e8;
}

.interface-name-link {
  border: 0;
  background: transparent;
  color: #2b3339;
  cursor: pointer;
  padding: 0;
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.18rem;
}

.forti-status-icon {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-grid;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.forti-status-icon span {
  width: 0.78rem;
  height: 0.78rem;
  border-radius: 50%;
  display: block;
  position: relative;
}

.forti-status-icon.is-up span {
  background: #008d1e;
}

.forti-status-icon.is-down span {
  background: #e52620;
}

.forti-status-icon span::after {
  content: "";
  position: absolute;
  inset: 0.22rem 0.18rem auto;
  height: 0.24rem;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(-45deg);
}

.forti-status-icon.is-down span::after {
  inset: 0.24rem 0.2rem auto;
  width: 0.38rem;
  height: 0.38rem;
  border: 0;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(45deg);
}

.forti-status-icon:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.access-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.18rem;
}

.access-tag {
  display: inline-flex;
  align-items: center;
  min-height: 1rem;
  background: #e9edf3;
  color: #1f2933;
  padding: 0 0.18rem;
  font-size: 0.75rem;
}

.ip-netmask,
.type-label,
.ref-link {
  color: #0b4f9c;
  font-weight: 500;
  text-decoration: none;
}

table {
  width: 100%;
  min-width: 940px;
  border-collapse: collapse;
}

th,
td {
  border-bottom: 1px solid #e7ebf0;
  padding: 0.58rem 0.68rem;
  text-align: left;
  vertical-align: top;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

th {
  background: #f5f7f9;
  color: #455160;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

tbody tr {
  transition:
    background-color 0.45s ease,
    opacity 0.22s ease,
    transform 0.22s ease;
}

tbody tr:hover {
  background: #f9fbfc;
}

tbody tr.row-enter {
  animation: rowIn 0.25s ease;
  animation-delay: calc(var(--row-index, 0) * 24ms);
  animation-fill-mode: both;
}

tbody tr.row-updated {
  background: #fff6f6;
}

tbody tr.row-leaving {
  opacity: 0;
  transform: translateY(4px);
}

.placeholder {
  color: var(--muted);
  text-align: center;
  font-style: italic;
  padding: 1.1rem;
}

.state-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  min-height: 1.45rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  padding: 0.14rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.state-pill::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: currentColor;
}

.state-up {
  color: var(--up);
  background: #eefaf3;
}

.state-down {
  color: var(--down);
  background: #fff1f1;
}

.state-unknown {
  color: var(--unknown);
  background: #fff8ea;
}

.address-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 0.8rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.muted {
  color: var(--muted);
}

.interface-real-name {
  display: block;
  margin-top: 0.14rem;
  color: var(--muted);
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 0.72rem;
  line-height: 1.25;
}

.interface-card-brand,
.interface-card-model,
.interface-card-model-detail,
.interface-link-speed {
  display: inline-block;
  line-height: 1.3;
}

.interface-card-brand,
.interface-card-model {
  max-width: 15rem;
  overflow-wrap: anywhere;
}

.interface-card-brand {
  font-weight: 700;
}

.interface-card-model-detail {
  display: block;
  margin-top: 0.12rem;
  color: var(--muted);
}

.interface-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.42rem;
}

.interface-toggle {
  min-width: 4.6rem;
  min-height: 1.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  border: 1px solid #c7d0da;
  border-radius: 999px;
  background: #f7f9fb;
  color: var(--text);
  cursor: pointer;
  padding: 0.18rem 0.48rem 0.18rem 0.24rem;
  font-size: 0.7rem;
  font-weight: 800;
}

.interface-toggle.is-on {
  border-color: rgba(19, 138, 67, 0.35);
  background: #eefaf3;
  color: var(--up);
}

.interface-toggle.is-off {
  border-color: rgba(198, 40, 40, 0.35);
  background: #fff7f7;
  color: var(--down);
}

.toggle-track {
  width: 2rem;
  height: 1.08rem;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #b7c1cc;
  padding: 0.14rem;
  transition: background-color 0.16s ease;
}

.toggle-thumb {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(20, 28, 36, 0.22);
  transform: translateX(0);
  transition: transform 0.16s ease;
}

.interface-toggle.is-on .toggle-track {
  background: var(--up);
}

.interface-toggle.is-on .toggle-thumb {
  transform: translateX(0.92rem);
}

.toggle-label {
  min-width: 1.35rem;
  text-align: left;
}

.interface-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.interface-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.interface-actions small {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 0.68rem;
  text-transform: uppercase;
}

.metric-grid,
.control-grid,
.status-detail {
  padding: 1rem;
}

.system-resources {
  margin: 1rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(22, 27, 33, 0.06);
}

.resources-header {
  min-height: 3.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.9rem;
}

.resource-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: end;
  gap: 0.55rem;
}

.resource-toolbar .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  text-align: center;
  white-space: nowrap;
}

.history-control {
  display: grid;
  gap: 0.2rem;
  min-width: 5.8rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.42rem;
  padding: 0.05rem 0.15rem 0.15rem;
}

.resource-item {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 0.32rem;
  text-align: center;
}

.resource-item > span {
  color: #111827;
  font-size: 0.78rem;
  font-weight: 800;
}

.resource-item small {
  min-height: 1rem;
  color: #111827;
  font-size: 0.76rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.donut-gauge {
  --value: 0;
  --gauge-color: var(--up);
  width: 4.62rem;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle closest-side, #ffffff 68%, transparent 70%),
    conic-gradient(var(--gauge-color) calc(var(--value) * 1%), #e5e7eb 0);
}

.donut-gauge strong {
  color: #111827;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
}

.gauge-blue {
  --gauge-color: #2563eb;
}

.gauge-green {
  --gauge-color: #2aa85a;
}

.gauge-teal {
  --gauge-color: #0ea5a4;
}

.sparkline {
  width: 100%;
  height: 1.72rem;
  overflow: visible;
}

.sparkline polyline {
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.spark-blue polyline {
  stroke: #2563eb;
}

.spark-teal polyline {
  stroke: #0ea5a4;
}

.spark-orange polyline {
  stroke: #f59e0b;
}

.metric-grid {
  display: none;
}

.metric-card,
.compact-row,
.profile-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
  min-width: 0;
}

.metric-card {
  padding: 0.85rem;
}

.metric-primary {
  border-left: 4px solid var(--accent);
}

.metric-card span,
.compact-row span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.metric-card strong {
  display: block;
  margin-top: 0.16rem;
  font-size: clamp(1.25rem, 2vw, 1.8rem);
}

.metric-card small,
.compact-row small {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.system-detail-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  padding: 0.8rem;
  min-width: 0;
}

.detail-card-head {
  min-height: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin-bottom: 0.55rem;
}

.detail-card-head h3 {
  margin: 0;
  font-size: 0.88rem;
}

.detail-card-head span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-align: right;
  text-transform: uppercase;
}

.compact-list {
  display: grid;
  gap: 0.5rem;
}

.compact-row {
  padding: 0.65rem;
}

.compact-row strong {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.systemlog-grid {
  display: grid;
  gap: 0.85rem;
}

.service-log-card {
  min-height: 28rem;
}

.service-log-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.service-log-toolbar select,
.service-log-toolbar button {
  min-height: 2.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #ffffff;
  color: var(--text);
  padding: 0.35rem 0.6rem;
  font-size: 0.82rem;
  font-weight: 800;
}

.service-log-toolbar button {
  cursor: pointer;
}

.disk-page-card {
  padding: 0.95rem;
}

.disk-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

.disk-summary-box {
  min-height: 4.4rem;
  background: var(--panel-soft);
}

.disk-summary-box strong {
  font-size: 1.08rem;
}

.disk-list {
  gap: 0.62rem;
}

.reservation-row {
  position: relative;
  padding-right: 5.2rem;
}

.reservation-row button {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  min-height: 1.8rem;
  transform: translateY(-50%);
  border: 1px solid rgba(198, 40, 40, 0.35);
  border-radius: 6px;
  background: #fff7f7;
  color: var(--down);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 800;
}

.text-up {
  color: var(--up);
}

.text-down {
  color: var(--down);
}

.text-unknown {
  color: var(--unknown);
}

.mini-bar {
  width: 100%;
  height: 0.38rem;
  border-radius: 999px;
  background: #e2e7ed;
  overflow: hidden;
  margin-top: 0.35rem;
}

.mini-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.disk-row {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfcfd;
}

.disk-row {
  display: grid;
  gap: 0.5rem;
  padding: 0.68rem;
}

.disk-row-head,
.disk-row-meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.disk-row-head {
  justify-content: space-between;
}

.disk-row strong {
  display: block;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.2;
}

.disk-row small {
  display: block;
  margin-top: 0.18rem;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.disk-row-meta {
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
}

.usage-bar {
  height: 0.46rem;
  margin-top: 0;
}

.usage-up span {
  background: var(--up);
}

.usage-warning span {
  background: var(--unknown);
}

.usage-down span {
  background: var(--down);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.2rem;
  min-height: 1.55rem;
  padding: 0.18rem 0.52rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-up {
  border-color: rgba(19, 138, 67, 0.24);
  background: rgba(19, 138, 67, 0.1);
  color: var(--up);
}

.status-warning {
  border-color: rgba(163, 100, 0, 0.24);
  background: rgba(245, 158, 11, 0.12);
  color: var(--unknown);
}

.status-down {
  border-color: rgba(198, 40, 40, 0.22);
  background: rgba(198, 40, 40, 0.1);
  color: var(--down);
}

.control-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.62rem;
  align-items: end;
  background: #fbfcfd;
  border-bottom: 1px solid var(--line);
}

.interface-address-grid {
  border-bottom: 1px solid var(--line);
}

.control-grid label {
  display: grid;
  gap: 0.26rem;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.control-grid input,
.control-grid select,
.control-grid button,
.profile-actions button {
  min-height: 2.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #ffffff;
  color: var(--text);
}

.control-grid input,
.control-grid select {
  width: 100%;
  padding: 0.36rem 0.5rem;
  font-size: 0.84rem;
}

.control-grid select[multiple] {
  min-height: 8.8rem;
  padding: 0.28rem;
}

.control-grid select[multiple] option {
  padding: 0.22rem 0.28rem;
}

.firewall-zone-editor {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.6rem;
}

.firewall-zone-editor-head {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto;
  gap: 0.6rem;
  align-items: end;
}

.firewall-zone-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.firewall-zone-row {
  display: grid;
  gap: 0.38rem;
  min-width: 0;
}

.firewall-zone-mode {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.5rem;
  gap: 0.45rem;
  align-items: center;
}

.firewall-zone-mode span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.firewall-zone-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 2rem;
}

.firewall-zone-row-head strong {
  color: var(--text);
  font-size: 0.84rem;
}

.firewall-zone-row-head button {
  min-height: 1.85rem;
  padding: 0 0.5rem;
}

.control-grid input:focus,
.control-grid select:focus {
  outline: 2px solid rgba(215, 25, 32, 0.2);
  border-color: var(--accent);
}

.check-row {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  align-self: center;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 650;
  text-transform: none;
}

.check-row input {
  width: 1rem;
  min-height: 1rem;
  accent-color: var(--accent);
}

.control-actions {
  grid-column: span 4;
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  align-items: center;
  padding-top: 0.05rem;
}

.wide-field {
  grid-column: span 4;
}

.control-actions button {
  min-width: 6.4rem;
  border-color: var(--line-strong);
  background: #ffffff;
  color: var(--text);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 800;
  transition:
    background-color 0.16s ease,
    transform 0.16s ease;
}

.control-actions button:first-child {
  border-color: transparent;
  background: var(--accent);
  color: #ffffff;
}

.control-actions button:hover {
  border-color: var(--accent);
  background: #fff7f7;
  color: var(--accent);
  transform: translateY(-1px);
}

.control-actions button:first-child:hover {
  border-color: transparent;
  background: var(--accent-dark);
  color: #ffffff;
}

#dhcp-form .control-actions button:first-child {
  border-color: transparent;
  background: var(--accent);
  color: #ffffff;
}

#firewall-form .control-actions button:first-child {
  border-color: transparent;
  background: var(--accent);
  color: #ffffff;
}

#interface-address-form .control-actions button:first-child {
  border-color: transparent;
  background: var(--accent);
  color: #ffffff;
}

#dhcp-form .control-actions button:first-child:hover {
  background: var(--accent-dark);
  color: #ffffff;
}

#firewall-form .control-actions button:first-child:hover {
  background: var(--accent-dark);
  color: #ffffff;
}

#interface-address-form .control-actions button:first-child:hover {
  background: var(--accent-dark);
  color: #ffffff;
}

#interface-address-flush {
  border-color: rgba(198, 40, 40, 0.35);
  background: #fff7f7;
  color: var(--down);
}

#firewall-add-policy {
  border-color: var(--line-strong);
  background: #ffffff;
  color: var(--text);
}

#firewall-new-policy {
  border-color: var(--line-strong);
  background: #ffffff;
  color: var(--text);
}

#firewall-stop {
  border-color: rgba(198, 40, 40, 0.35);
  background: #fff7f7;
  color: var(--down);
}

#dhcp-stop {
  border-color: rgba(198, 40, 40, 0.35);
  background: #fff7f7;
  color: var(--down);
}

#dns-stop {
  border-color: rgba(198, 40, 40, 0.35);
  background: #fff7f7;
  color: var(--down);
}

.firewall-policy-card {
  grid-column: 1 / -1;
}

.firewall-policy-list {
  margin-top: 0.72rem;
  display: grid;
  gap: 0.55rem;
}

.firewall-policy-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1.1fr) minmax(7rem, 0.85fr) minmax(7rem, 0.85fr) auto minmax(16rem, auto);
  gap: 0.55rem;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  padding: 0.56rem 0.62rem;
  font-size: 0.82rem;
  min-width: 0;
}

.firewall-policy-row.editing {
  border-color: rgba(215, 25, 32, 0.42);
  background: #fffafa;
}

.firewall-policy-row strong,
.firewall-policy-row span {
  overflow-wrap: anywhere;
}

.firewall-policy-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
}

.firewall-policy-actions button {
  min-height: 2rem;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #ffffff;
  color: var(--text);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.24rem 0.55rem;
}

.firewall-policy-actions button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.firewall-policy-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.firewall-policy-actions button[data-firewall-delete-policy] {
  border-color: rgba(198, 40, 40, 0.35);
  background: #fff7f7;
  color: var(--down);
}

.lease-list {
  margin-top: 0.72rem;
}

.dhcp-health-card {
  grid-column: 1 / -1;
}

.health-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.72rem;
}

.health-row {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.58rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fbfcfd;
  padding: 0.58rem 0.62rem;
}

.health-row strong,
.health-row small {
  display: block;
}

.health-row strong {
  color: var(--text);
  font-size: 0.82rem;
}

.health-row small {
  margin-top: 0.12rem;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.health-row > span:last-child {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.health-dot {
  width: 0.68rem;
  height: 0.68rem;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 3px rgba(102, 113, 127, 0.1);
}

.health-ok .health-dot {
  background: var(--up);
  box-shadow: 0 0 0 3px rgba(19, 138, 67, 0.12);
}

.health-warning .health-dot,
.health-unknown .health-dot {
  background: var(--unknown);
  box-shadow: 0 0 0 3px rgba(163, 100, 0, 0.12);
}

.health-error .health-dot {
  background: var(--down);
  box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.1);
}

.dhcp-lease-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
}

.dhcp-lease-table th,
.dhcp-lease-table td {
  border-bottom: 1px solid #e7ebf0;
  padding: 0.42rem 0.45rem;
  font-size: 0.78rem;
  text-align: left;
}

.dhcp-lease-table th {
  background: #f5f7f9;
  color: var(--muted);
  font-weight: 850;
  text-transform: uppercase;
}

.dhcp-ping-pill {
  min-width: 5.4rem;
  justify-content: center;
}

.status-detail {
  padding-top: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  background: #ffffff;
}

.empty-detail {
  grid-column: 1 / -1;
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  color: var(--muted);
  padding: 0.85rem;
  text-align: center;
}

.profile-card {
  border: 1px solid #d6dde5;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(20, 28, 36, 0.035);
  padding: 0.68rem;
}

.log-bottom-card {
  grid-column: 1 / -1;
  order: 99;
}

.profile-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.profile-grid {
  margin-top: 0.7rem;
  display: grid;
  grid-template-columns: 5.8rem minmax(0, 1fr);
  gap: 0.4rem 0.65rem;
  font-size: 0.84rem;
}

.profile-grid span {
  color: var(--muted);
}

.profile-grid strong {
  font-weight: 550;
  overflow-wrap: anywhere;
}

.profile-actions {
  margin-top: 0.72rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.48rem;
}

.profile-actions button {
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.24rem 0.62rem;
}

.profile-actions button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.profile-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.profile-actions button[data-pppoe-edit] {
  border-color: rgba(32, 40, 50, 0.25);
  background: #ffffff;
  color: var(--text);
}

.profile-actions button[data-pppoe-delete] {
  border-color: rgba(198, 40, 40, 0.35);
  background: #fff7f7;
  color: var(--down);
}

.profile-interface-switch {
  margin-top: 0.72rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: end;
}

.profile-interface-switch label {
  display: grid;
  gap: 0.28rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.profile-interface-switch select,
.profile-interface-switch button {
  min-height: 2.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
}

.profile-interface-switch select {
  width: 100%;
  padding: 0.35rem 0.5rem;
}

.profile-interface-switch button {
  cursor: pointer;
  padding: 0.25rem 0.68rem;
  font-weight: 800;
}

.profile-interface-switch button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.profile-warning {
  margin-top: 0.7rem;
  border: 1px solid rgba(163, 100, 0, 0.28);
  border-radius: 6px;
  background: #fff8ea;
  color: var(--unknown);
  padding: 0.55rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.35;
}

.status-note {
  margin-top: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.58rem 0.68rem;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.38;
  overflow-wrap: anywhere;
}

.status-note-error {
  border-color: rgba(220, 38, 38, 0.34);
  background: #fff1f1;
  color: #b91c1c;
}

.status-note-success {
  border-color: rgba(22, 163, 74, 0.34);
  background: #edfdf3;
  color: #137d3b;
}

.status-note-info {
  border-color: rgba(37, 99, 235, 0.26);
  background: #eff6ff;
  color: #1d4ed8;
}

.log-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
  margin-top: 0.72rem;
}

.log-filter-button {
  min-height: 1.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #ffffff;
  color: var(--text);
  padding: 0.18rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 850;
  cursor: pointer;
}

.log-filter-button span {
  color: var(--muted);
  font-weight: 800;
}

.log-filter-button.active {
  border-color: var(--accent);
  background: #edfdf3;
  color: var(--accent-dark);
}

.log-list {
  margin: 0.72rem 0 0;
  padding-left: 1rem;
  color: var(--muted);
  font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 0.76rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.scroll-log-list {
  max-height: 22rem;
  overflow-y: auto;
  padding-right: 0.45rem;
}

.log-entry {
  margin: 0.12rem 0;
  padding: 0.08rem 0.2rem;
  border-left: 3px solid transparent;
  border-radius: 3px;
}

.log-error {
  border-left-color: #dc2626;
  background: #fff1f1;
  color: #b91c1c;
  font-weight: 750;
}

.log-warning {
  border-left-color: #d97706;
  background: #fff7e6;
  color: #9a5b00;
  font-weight: 750;
}

.log-success {
  border-left-color: #16a34a;
  background: #edfdf3;
  color: #137d3b;
}

.log-info {
  border-left-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
}

.log-neutral {
  color: #475569;
}

@keyframes rowIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 980px) {
  .app-frame {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    display: block;
  }

  .brand-block {
    display: flex;
    min-height: 3.8rem;
  }

  .nav-list {
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    padding-top: 0;
    scrollbar-width: thin;
  }

  .nav-item {
    flex: 0 0 auto;
    min-height: 2.2rem;
    white-space: nowrap;
  }

  .sidebar-foot {
    display: none;
  }

  .shell {
    width: 100%;
  }

  .topbar {
    margin-left: -0.85rem;
    margin-right: -0.85rem;
  }

  .topbar-tools {
    flex-wrap: wrap;
  }

  .forti-device-panel,
  .forti-interface-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .forti-device-logo {
    width: 100%;
  }

  .forti-port-map {
    grid-template-columns: repeat(auto-fill, minmax(4.3rem, 1fr));
  }

  .forti-view-tabs {
    overflow-x: auto;
  }

  .dashboard-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .widget-info,
  .widget-license,
  .widget-resources,
  .widget-network,
  .widget-traffic,
  .widget-apps,
  .widget-sessions,
  .widget-policy {
    grid-column: span 6;
  }

  .resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .disk-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .control-grid,
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .control-actions {
    grid-column: span 2;
  }

  .status-detail {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body {
    padding-top: 6.75rem;
  }

  .app-frame {
    min-height: calc(100vh - 6.75rem);
  }

  .shell {
    width: 100%;
    padding: 0.65rem 0.65rem max(1rem, env(safe-area-inset-bottom));
  }

  .topbar {
    height: 6.75rem;
    min-height: 6.75rem;
    align-items: stretch;
    flex-direction: column;
    justify-content: center;
    border-radius: 0;
    gap: 0.35rem;
    margin: 0;
    overflow: hidden;
    padding: 0.4rem 0.65rem;
  }

  .topbar-left,
  .topbar-tools {
    width: 100%;
  }

  .topbar-left {
    gap: 0.55rem;
  }

  .topbar-brand {
    width: 8.2rem;
  }

  .topbar-device {
    min-width: 6.5rem;
    padding-left: 0.75rem;
  }

  .topbar-tools {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0.42rem;
    overflow-x: auto;
    padding-bottom: 0.08rem;
  }

  .topbar-status {
    flex: 0 0 auto;
    min-width: 5.35rem;
    width: auto;
    padding: 0.16rem 0.36rem;
    text-align: left;
  }

  .topbar-tools .toolbar-button,
  .topbar-tools .admin-menu {
    min-height: 2rem;
    padding: 0.25rem 0.45rem;
  }

  .topbar-tools #server-restart,
  .topbar-tools #config-backup,
  .topbar-tools #config-restore {
    max-width: 2.05rem;
    min-width: 2.05rem;
  }

  .topbar-tools .danger-toolbar {
    min-width: 4.1rem;
  }

  .brand-block {
    display: none;
  }

  .nav-list {
    padding: 0.35rem 0.5rem;
  }

  .summary-strip {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  .dashboard-title-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .widget-info,
  .widget-license,
  .widget-resources,
  .widget-network,
  .widget-traffic,
  .widget-apps,
  .widget-sessions,
  .widget-policy {
    grid-column: 1;
  }

  .network-map,
  .app-summary {
    grid-template-columns: 1fr;
  }

  .network-map {
    grid-template-rows: none;
    grid-template-areas:
      "internet"
      "core"
      "wan"
      "lan";
    padding: 0;
  }

  .network-links {
    display: none;
  }

  .traffic-head {
    align-items: stretch;
    flex-direction: column;
    gap: 0.5rem;
  }

  .traffic-chart-shell {
    min-height: 10.1rem;
  }

  .traffic-panel .traffic-chart {
    height: 10rem;
  }

  .lan-row {
    grid-template-columns: 1fr;
  }

  .policy-row,
  .info-list div {
    grid-template-columns: 1fr;
  }

  .summary-box {
    min-height: 3.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .summary-box strong {
    margin-top: 0;
    font-size: 1.25rem;
  }

  .panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.28rem;
  }

  .panel-header p,
  #meta,
  #system-meta,
  #firewall-meta,
  #dhcp-meta,
  #pppoe-meta {
    text-align: left;
    font-size: 0.8rem;
  }

  .metric-grid,
  .control-grid,
  .status-detail {
    padding: 0.78rem;
  }

  .system-resources {
    margin: 0.78rem;
  }

  .resources-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .resource-toolbar {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
    align-items: end;
  }

  .history-control {
    min-width: 0;
  }

  #system-meta {
    grid-column: 1 / -1;
  }

  .resource-toolbar .secondary-button {
    width: 100%;
  }

  .dashboard-poll-control {
    width: 100%;
  }

  .resource-toolbar > .secondary-button {
    display: none;
  }

  .system-actions {
    justify-content: flex-start;
  }

  .metric-grid,
  .control-grid {
    grid-template-columns: 1fr;
  }

  .resource-grid {
    grid-template-columns: 1fr;
  }

  .disk-summary-grid {
    grid-template-columns: 1fr;
  }

  .control-actions {
    grid-column: span 1;
  }

  .control-actions button {
    flex: 1 1 8rem;
  }

  .health-list {
    grid-template-columns: 1fr;
  }

  .forti-edit-row {
    grid-template-columns: 1fr;
    gap: 0.22rem;
  }

  .forti-access-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-left: 0;
  }

  .forti-edit-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .forti-edit-footer button {
    width: 100%;
  }

  .table-wrap {
    overflow: visible;
  }

  table,
  thead,
  tbody,
  tr,
  th,
  td {
    display: block;
  }

  table {
    min-width: 0;
  }

  thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  tbody {
    display: grid;
    gap: 0.65rem;
    padding: 0.78rem;
  }

  tbody tr {
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #ffffff;
    overflow: hidden;
  }

  td {
    display: grid;
    grid-template-columns: minmax(5.8rem, 34%) minmax(0, 1fr);
    gap: 0.7rem;
    align-items: start;
    border-bottom: 1px solid #edf0f4;
    padding: 0.62rem 0.68rem;
    font-size: 0.86rem;
  }

  td:last-child {
    border-bottom: 0;
  }

  td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
  }

  .placeholder {
    display: block;
    border: 0;
  }

  .placeholder::before {
    content: none;
  }

  .state-pill {
    width: fit-content;
  }

  .profile-card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-grid {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .profile-interface-switch {
    grid-template-columns: 1fr;
  }

  .reservation-row {
    padding-right: 0.65rem;
  }

  .reservation-row button {
    position: static;
    transform: none;
    margin-top: 0.45rem;
    width: fit-content;
  }

  .firewall-policy-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}

@media (max-width: 380px) {
  .shell {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .brand-block {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .nav-list {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* ═══════════════════════════════════════════════════════════
   UI V2 — Style 3: Clean Light / Enterprise
   All rules scoped to body.ui-v2 — no backend files touched
   ═══════════════════════════════════════════════════════════ */
body.ui-v2 {
  --noc-bg:       #f0f2f7;
  --noc-surface:  #ffffff;
  --noc-raised:   #f5f7fb;
  --noc-border:   rgba(59, 90, 152, 0.12);
  --noc-border-m: rgba(59, 90, 152, 0.20);
  --noc-ink:      #334155;
  --noc-ink-dim:  #94a3b8;
  --noc-ink-head: #0f172a;
  --noc-green:    #16a34a;
  --noc-cyan:     #0284c7;
  --noc-amber:    #d97706;
  --noc-red:      #dc2626;
  --noc-shadow:   0 1px 4px rgba(15, 23, 42, 0.08), 0 4px 16px rgba(15, 23, 42, 0.05);
  --noc-glow-g:   0 0 0 3px rgba(22, 163, 74, 0.12);
  --noc-glow-c:   0 0 0 3px rgba(2, 132, 199, 0.12);
  --accent:       #2563eb;
  --accent-light: rgba(37, 99, 235, 0.08);
  font-family: "Inter", system-ui, sans-serif;
  color: var(--noc-ink);
  background-color: var(--noc-bg);
  padding-top: 3.5rem;
}

/* no scanline, no glow corners */
body.ui-v2::before,
body.ui-v2::after {
  display: none;
}

body.ui-v2 .app-frame {
  position: relative;
  z-index: 1;
  grid-template-columns: 256px minmax(0, 1fr);
  min-height: calc(100vh - 3.5rem);
}

/* ── Topbar ── */
body.ui-v2 .topbar {
  background: #ffffff;
  border-bottom: 1px solid var(--noc-border-m);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07);
  height: 3.5rem;
  min-height: 3.5rem;
  color: var(--noc-ink-head);
}

/* toolbar icon masks: invert from white to dark ink */
body.ui-v2 .topbar-tools #server-restart::after,
body.ui-v2 .topbar-tools #config-backup::after,
body.ui-v2 .topbar-tools #config-restore::after,
body.ui-v2 .topbar-tools #system-reboot::after {
  background: var(--noc-ink);
}
body.ui-v2 .topbar-tools .danger-toolbar::after {
  background: var(--noc-red);
}

body.ui-v2 .topbar-brand strong {
  color: var(--accent);
  font-family: "Inter", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

body.ui-v2 .topbar-brand strong::first-letter {
  color: var(--accent);
}

body.ui-v2 .topbar-brand small {
  color: var(--noc-ink-dim);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body.ui-v2 .topbar-device strong {
  color: var(--noc-ink-head);
  font-size: 0.82rem;
  font-weight: 600;
}

body.ui-v2 .topbar-device span {
  color: var(--noc-cyan);
  font-size: 0.7rem;
}

body.ui-v2 .topbar-device {
  border-left-color: var(--noc-border-m);
}

body.ui-v2 .toolbar-button {
  border-radius: 6px;
  border-color: var(--noc-border-m);
  background: #f8fafc;
  color: var(--noc-ink);
  font-size: 0.76rem;
  font-weight: 500;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

body.ui-v2 .toolbar-button:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}

body.ui-v2 .danger-toolbar {
  border-color: rgba(220, 38, 38, 0.3);
  background: rgba(220, 38, 38, 0.05);
  color: var(--noc-red);
}

body.ui-v2 .danger-toolbar:hover {
  border-color: var(--noc-red);
  background: rgba(220, 38, 38, 0.1);
}

body.ui-v2 .admin-menu {
  color: var(--noc-cyan);
  font-size: 0.78rem;
}

body.ui-v2 .icon-button {
  border-color: var(--noc-border-m);
  background: transparent;
}

body.ui-v2 .icon-button:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}

body.ui-v2 .icon-button span,
body.ui-v2 .icon-button span::before,
body.ui-v2 .icon-button span::after {
  background: var(--noc-ink);
}

body.ui-v2 .search-button::before {
  border-color: var(--noc-ink-dim);
}
body.ui-v2 .search-button::after {
  background: var(--noc-ink-dim);
}

/* ── Search bar ── */
body.ui-v2 .quick-search {
  position: relative;
  width: 2.25rem;
  height: 2.1rem;
  border-radius: 6px;
  border: 1px solid var(--noc-border-m);
  background: #f8fafc;
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: width 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

body.ui-v2 .quick-search.expanded,
body.ui-v2 .quick-search:focus-within {
  width: 16rem;
  border-color: var(--accent);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

body.ui-v2 .quick-search .search-button {
  flex: 0 0 2.1rem;
  width: 2.1rem;
  height: 2.1rem;
}

body.ui-v2 #nav-search-input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--noc-ink-head);
  padding-right: 0.6rem;
  font-size: 0.82rem;
  caret-color: var(--accent);
}

body.ui-v2 #nav-search-input::placeholder {
  color: var(--noc-ink-dim);
  font-size: 0.78rem;
}

body.ui-v2 #nav-search-input:focus {
  outline: none;
}

/* ── Sidebar ── */
body.ui-v2 .sidebar {
  top: 3.5rem;
  height: calc(100vh - 3.5rem);
  margin: 0;
  border-radius: 0;
  border-top: 0;
  border-right: 1px solid var(--noc-border-m);
  border-bottom: 0;
  border-left: 0;
  background: #ffffff;
  box-shadow: none;
}

body.ui-v2 .brand-block {
  border-bottom-color: var(--noc-border-m);
}

body.ui-v2 .sidebar-foot {
  border-top-color: var(--noc-border-m);
  color: var(--noc-ink-dim);
}

body.ui-v2 .sidebar-foot strong {
  color: var(--accent);
  font-size: 0.84rem;
}

body.ui-v2 .collapse-link {
  color: var(--noc-ink-dim);
}

body.ui-v2 .collapse-link::before {
  border-color: var(--accent);
}

body.ui-v2 .nav-list {
  padding: 0.5rem 0.5rem;
  gap: 2px;
}

body.ui-v2 .nav-item {
  min-height: 2.3rem;
  border-radius: 8px;
  font-size: 0.83rem;
  font-weight: 500;
  padding: 0.48rem 0.8rem;
  color: #475569;
  position: relative;
  transition: color 0.12s, background 0.12s;
}

body.ui-v2 .nav-item::before {
  display: none;
}

body.ui-v2 .nav-item::after {
  display: none !important;
}

body.ui-v2 .nav-item:hover {
  background: var(--accent-light);
  color: var(--accent);
}

body.ui-v2 .nav-item.active {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 600;
  transform: none;
  box-shadow: none;
}

body.ui-v2 .nav-icon {
  opacity: 0.7;
}

body.ui-v2 .nav-item.active .nav-icon,
body.ui-v2 .nav-item:hover .nav-icon {
  opacity: 1;
}

/* ── Summary strip ── */
body.ui-v2 .summary-strip {
  margin-top: 0.75rem;
  margin-bottom: 0.85rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

body.ui-v2 .summary-box {
  border: 1px solid var(--noc-border);
  border-radius: 10px;
  background: var(--noc-surface);
  box-shadow: var(--noc-shadow);
  min-height: 4.8rem;
  padding: 0.72rem 0.9rem;
  position: relative;
  overflow: hidden;
}

body.ui-v2 .summary-box::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #38bdf8);
  opacity: 1;
  border-radius: 10px 10px 0 0;
}

body.ui-v2 .summary-box span {
  color: var(--noc-ink-dim);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

body.ui-v2 .summary-box strong {
  margin-top: 0.24rem;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--noc-ink-head);
  font-weight: 700;
  line-height: 1.1;
}

/* ── Cards / Widgets / Panels ── */
body.ui-v2 .widget,
body.ui-v2 .panel,
body.ui-v2 .forti-interface-shell,
body.ui-v2 .system-resources,
body.ui-v2 .system-detail-card,
body.ui-v2 .table-wrap {
  border-radius: 10px;
  border-color: var(--noc-border);
  background: var(--noc-surface);
  box-shadow: var(--noc-shadow);
  backdrop-filter: none;
}

body.ui-v2 .widget-head {
  border-bottom-color: var(--noc-border);
}

body.ui-v2 .widget-head h3 {
  color: var(--noc-ink-head);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

body.ui-v2 .panel-header h2,
body.ui-v2 .dashboard-title-row h2 {
  color: var(--noc-ink-head);
  font-size: 1rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
}

body.ui-v2 .panel-header p {
  color: var(--noc-ink-dim);
  font-size: 0.75rem;
}

/* accent top line on cards */
body.ui-v2 .widget::before,
body.ui-v2 .panel::before {
  content: "";
  display: block;
  height: 3px;
  margin: 0;
  background: linear-gradient(90deg, var(--accent) 0%, #38bdf8 60%, transparent 100%);
  opacity: 0.7;
  border-radius: 10px 10px 0 0;
}

/* ── Card stagger animation ── */
body.ui-v2 .dashboard-grid .widget,
body.ui-v2 .panel {
  animation: noc-rise 0.28s ease both;
}

body.ui-v2 .dashboard-grid .widget:nth-child(2) { animation-delay: 0.04s; }
body.ui-v2 .dashboard-grid .widget:nth-child(3) { animation-delay: 0.08s; }
body.ui-v2 .dashboard-grid .widget:nth-child(4) { animation-delay: 0.12s; }
body.ui-v2 .dashboard-grid .widget:nth-child(5) { animation-delay: 0.16s; }
body.ui-v2 .dashboard-grid .widget:nth-child(6) { animation-delay: 0.20s; }
body.ui-v2 .dashboard-grid .widget:nth-child(7) { animation-delay: 0.24s; }
body.ui-v2 .dashboard-grid .widget:nth-child(8) { animation-delay: 0.28s; }
body.ui-v2 .dashboard-grid .widget:nth-child(9) { animation-delay: 0.32s; }

@keyframes noc-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* ── Info list ── */
body.ui-v2 .info-list dt {
  color: var(--noc-ink-dim);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

body.ui-v2 .info-list dd {
  color: var(--noc-ink-head);
  font-size: 0.82rem;
  font-weight: 500;
}

/* ── Resource gauges ── */
body.ui-v2 .donut-gauge {
  background:
    radial-gradient(circle closest-side, var(--noc-surface) 68%, transparent 70%),
    conic-gradient(var(--gauge-color) calc(var(--value) * 1%), #e2e8f0 0);
}

body.ui-v2 .donut-gauge strong {
  color: var(--noc-ink-head);
  font-weight: 700;
}

body.ui-v2 .gauge-blue  { --gauge-color: var(--accent); }
body.ui-v2 .gauge-green { --gauge-color: var(--noc-green); }
body.ui-v2 .gauge-teal  { --gauge-color: var(--noc-cyan); }

body.ui-v2 .resource-item > span {
  color: var(--noc-ink-dim);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

body.ui-v2 .resource-item small {
  color: var(--noc-ink-dim);
  font-size: 0.68rem;
}

/* ── State pills ── */
body.ui-v2 .state-up {
  color: #15803d;
  background: #dcfce7;
  border-color: #86efac;
}

body.ui-v2 .state-down {
  color: #b91c1c;
  background: #fee2e2;
  border-color: #fca5a5;
}

body.ui-v2 .state-unknown {
  color: #92400e;
  background: #fef3c7;
  border-color: #fcd34d;
}

/* ── Tables ── */
body.ui-v2 thead tr {
  background: #f8fafc;
  border-bottom-color: var(--noc-border-m);
}

body.ui-v2 thead th {
  color: var(--noc-ink-dim);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

body.ui-v2 tbody tr:hover {
  background: #f8fafd;
}

body.ui-v2 tbody tr td {
  color: var(--noc-ink);
  font-size: 0.82rem;
  border-bottom-color: var(--noc-border);
}

/* ── Forms / Controls ── */
body.ui-v2 .control-grid {
  background: var(--noc-surface);
  border-bottom-color: var(--noc-border);
}

body.ui-v2 .control-grid label span,
body.ui-v2 .control-grid label > span {
  color: var(--noc-ink-dim);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

body.ui-v2 .control-grid input,
body.ui-v2 .control-grid select {
  background: #f8fafc;
  border-color: var(--noc-border-m);
  color: var(--noc-ink-head);
  font-size: 0.82rem;
  border-radius: 6px;
}

body.ui-v2 .control-grid input:focus,
body.ui-v2 .control-grid select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

body.ui-v2 .control-grid input::placeholder {
  color: var(--noc-ink-dim);
}

body.ui-v2 .control-actions button {
  border-radius: 6px;
  border-color: var(--noc-border-m);
  background: #f8fafc;
  color: var(--noc-ink);
  font-size: 0.78rem;
  font-weight: 500;
}

body.ui-v2 .control-actions button:first-child {
  border-color: rgba(37, 99, 235, 0.35);
  background: var(--accent-light);
  color: var(--accent);
}

body.ui-v2 .control-actions button:hover {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent);
  transform: none;
}

body.ui-v2 .control-actions button:first-child:hover {
  background: rgba(37, 99, 235, 0.14);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Secondary / tool buttons ── */
body.ui-v2 .secondary-button,
body.ui-v2 .forti-tool-button {
  border-radius: 6px;
  border-color: var(--noc-border-m);
  background: #f8fafc;
  color: var(--noc-ink);
  font-size: 0.78rem;
}

body.ui-v2 .secondary-button:hover,
body.ui-v2 .forti-tool-button:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}

body.ui-v2 .primary-tool {
  border-color: rgba(37, 99, 235, 0.35);
  background: var(--accent-light);
  color: var(--accent);
}

body.ui-v2 .primary-tool:hover {
  background: rgba(37, 99, 235, 0.14);
}

/* ── forti-view-tabs ── */
body.ui-v2 .forti-view-tabs button {
  border-radius: 6px;
  border-color: var(--noc-border-m);
  background: #f8fafc;
  color: var(--noc-ink);
}
body.ui-v2 .forti-view-tabs button.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}
body.ui-v2 .forti-view-tabs button:not(.active):hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}

/* ── forti device / port panel ── */
body.ui-v2 .forti-interface-toolbar {
  background: #f8fafc;
  border-bottom-color: var(--noc-border-m);
}
body.ui-v2 .forti-device-logo {
  background: #eff6ff;
  border-color: rgba(37, 99, 235, 0.18);
}
body.ui-v2 .forti-device-logo strong { color: var(--accent); }
body.ui-v2 .forti-device-logo span   { color: var(--noc-ink); }
body.ui-v2 .forti-port-map {
  background: #e8eef8;
  border-color: rgba(37, 99, 235, 0.14);
}
body.ui-v2 .forti-port {
  background: #f5f7fb;
  border-color: #c5cfe0;
  color: var(--noc-ink-head);
}
body.ui-v2 .forti-port.selected {
  outline-color: var(--accent);
  background: #eff6ff;
}
body.ui-v2 .forti-interface-table tbody tr.selected-row {
  background: #eff6ff;
}

/* ── edit section title band ── */
body.ui-v2 .forti-edit-section {
  background: #f1f5f9;
  color: var(--noc-ink-dim);
}
body.ui-v2 .forti-group-row td {
  background: #475569;
  color: #ffffff;
}

/* ── network map ── */
body.ui-v2 .network-core {
  background: linear-gradient(145deg, #2563eb, #1d4ed8);
  width: 4.4rem;
  height: 3.9rem;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(37,99,235,0.32), 0 0 0 4px rgba(37,99,235,0.12);
}
body.ui-v2 .network-core span {
  width: 0.42rem;
  height: 1.5rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.85);
}
body.ui-v2 .network-link {
  stroke: #c8d5e8;
  stroke-width: 1;
}
body.ui-v2 .network-link.primary-link {
  stroke: var(--accent);
  stroke-width: 1.2;
  stroke-opacity: 0.8;
}
body.ui-v2 .network-link.secondary-link,
body.ui-v2 .network-link.lan-drop {
  stroke: #c8d5e8;
  stroke-width: 0.9;
}
body.ui-v2 .network-link-dot {
  fill: var(--accent);
  stroke: #ffffff;
  stroke-width: 0.6;
}
body.ui-v2 .network-node,
body.ui-v2 .wan-stack div,
body.ui-v2 .lan-row div {
  background: var(--noc-surface);
  border: 1px solid var(--noc-border);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(15,23,42,0.06), 0 0 0 1px var(--noc-border);
  transition: box-shadow 0.18s, border-color 0.18s;
}
body.ui-v2 .network-node strong,
body.ui-v2 .wan-stack strong,
body.ui-v2 .lan-row strong {
  color: var(--noc-ink-head);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
body.ui-v2 .network-node span,
body.ui-v2 .wan-stack span,
body.ui-v2 .lan-row span {
  color: var(--noc-ink);
  font-size: 0.75rem;
}
/* node status border-left */
body.ui-v2 .network-node[data-net-state="connected"],
body.ui-v2 .wan-stack div[data-net-state="connected"],
body.ui-v2 .lan-row div[data-net-state="connected"] {
  border-left: 3px solid var(--noc-green);
  border-color: rgba(22,163,74,0.35);
}
body.ui-v2 .network-node[data-net-state="disconnected"],
body.ui-v2 .wan-stack div[data-net-state="disconnected"],
body.ui-v2 .lan-row div[data-net-state="disconnected"] {
  border-left: 3px solid var(--noc-red);
  border-color: rgba(220,38,38,0.25);
}
/* net-badge colors */
body.ui-v2 .net-badge {
  display: block;
  width: fit-content;
  margin-inline: auto;
  margin-top: 0.24rem;
}
body.ui-v2 .net-badge.net-badge-up {
  background: rgba(22,163,74,0.10);
  color: var(--noc-green);
}
body.ui-v2 .net-badge.net-badge-down {
  background: rgba(220,38,38,0.09);
  color: var(--noc-red);
}
body.ui-v2 .net-badge.net-badge-idle {
  background: rgba(100,116,139,0.10);
  color: var(--noc-ink-dim);
}

/* ── checkbox/radio accent ── */
body.ui-v2 .forti-access-grid input,
body.ui-v2 .forti-check-row input,
body.ui-v2 .check-row input {
  accent-color: var(--accent);
}

/* ── interface toggle ── */
body.ui-v2 .interface-toggle {
  border-color: var(--noc-border-m);
  background: #f8fafc;
  color: var(--noc-ink);
}
body.ui-v2 .interface-toggle.is-on {
  border-color: rgba(22,163,74,0.35);
  background: #f0fdf4;
  color: #15803d;
}
body.ui-v2 .interface-toggle.is-on .toggle-track {
  background: #16a34a;
}

/* ── interface table ── */
body.ui-v2 .forti-interface-table th {
  background: #f1f5f9;
  color: var(--noc-ink-dim);
}
body.ui-v2 .forti-interface-table th,
body.ui-v2 .forti-interface-table td {
  border-color: var(--noc-border);
  color: var(--noc-ink);
}
body.ui-v2 .interface-name-link {
  color: var(--accent);
}

/* ── forti edit row inputs ── */
body.ui-v2 .forti-edit-row input,
body.ui-v2 .forti-edit-row select {
  border-radius: 6px;
  background: #f8fafc;
  border-color: var(--noc-border-m);
  color: var(--noc-ink-head);
}
body.ui-v2 .forti-edit-row input:focus,
body.ui-v2 .forti-edit-row select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
body.ui-v2 .forti-edit-footer {
  background: #f8fafc;
  border-top-color: var(--noc-border-m);
}
body.ui-v2 .forti-ok-button {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  border-radius: 6px;
}
body.ui-v2 .forti-ok-button:hover {
  background: #1d4ed8;
}

/* ── Login screen ── */
body.ui-v2 .login-screen {
  background: linear-gradient(135deg, #e0e7ff 0%, #f0f4ff 50%, #e0f2fe 100%);
}

body.ui-v2 .login-panel {
  background: #ffffff;
  border-color: var(--noc-border-m);
  box-shadow: 0 8px 40px rgba(15, 23, 42, 0.12), 0 1px 4px rgba(15, 23, 42, 0.08);
}

body.ui-v2 .login-brand {
  border-bottom-color: var(--noc-border-m);
}

body.ui-v2 .login-brand strong {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: -0.01em;
}

body.ui-v2 .login-brand small,
body.ui-v2 .login-panel p {
  color: var(--noc-ink-dim);
  font-size: 0.72rem;
}

body.ui-v2 .login-panel label {
  color: var(--noc-ink-dim);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

body.ui-v2 .login-panel input {
  background: #f8fafc;
  border-color: var(--noc-border-m);
  color: var(--noc-ink-head);
  font-size: 0.84rem;
  border-radius: 6px;
}

body.ui-v2 .login-panel input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
  outline: none;
}

body.ui-v2 .login-panel button {
  border-radius: 6px;
  border-color: rgba(37, 99, 235, 0.4);
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.15s, box-shadow 0.15s;
}

body.ui-v2 .login-panel button:hover {
  background: #1d4ed8;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3);
}

body.ui-v2 .brand-mark {
  background: var(--accent-light);
  border: 1px solid rgba(37, 99, 235, 0.3);
  color: var(--accent);
}

/* ── Shell ── */
body.ui-v2 .shell {
  padding: 0.8rem 1rem 1.4rem;
}

/* ── Log list ── */
body.ui-v2 .log-entry {
  background: #f8fafc;
  border-color: var(--noc-border);
  color: var(--noc-ink);
  font-size: 0.75rem;
}

body.ui-v2 .log-error   { color: #b91c1c; border-left-color: var(--noc-red);    background: #fff5f5; }
body.ui-v2 .log-warning { color: #92400e; border-left-color: var(--noc-amber);  background: #fffbeb; }
body.ui-v2 .log-success { color: #15803d; border-left-color: var(--noc-green);  background: #f0fdf4; }
body.ui-v2 .log-info    { color: #0369a1; border-left-color: var(--noc-cyan);   background: #f0f9ff; }

/* ── Service log toolbar ── */
body.ui-v2 .service-log-toolbar select,
body.ui-v2 .service-log-toolbar button {
  background: #f8fafc;
  border-color: var(--noc-border-m);
  color: var(--noc-ink);
  font-size: 0.76rem;
  border-radius: 6px;
}

body.ui-v2 .service-log-toolbar button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Compact system cards ── */
body.ui-v2 .system-detail-card {
  background: var(--noc-surface);
  border-color: var(--noc-border);
}

body.ui-v2 .detail-card-head h3 {
  color: var(--noc-ink-head);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

body.ui-v2 .detail-card-head span {
  color: var(--noc-ink-dim);
}

body.ui-v2 .compact-row {
  background: #f8fafc;
  border-color: var(--noc-border);
}

body.ui-v2 .compact-row span {
  color: var(--noc-ink-dim);
  font-size: 0.65rem;
}

body.ui-v2 .compact-row strong {
  color: var(--noc-ink-head);
  font-size: 0.85rem;
  font-weight: 600;
}

body.ui-v2 .disk-row {
  background: #f8fafc;
  border-color: var(--noc-border);
}

body.ui-v2 .disk-row strong {
  color: var(--noc-ink-head);
  font-weight: 600;
}

body.ui-v2 .disk-row small {
  color: var(--noc-ink-dim);
}

body.ui-v2 .mini-bar {
  background: #e2e8f0;
}

body.ui-v2 .mini-bar span {
  background: var(--accent);
}

body.ui-v2 .usage-bar .mini-bar span {
  background: var(--accent);
}

body.ui-v2 .usage-warning .mini-bar span {
  background: var(--noc-amber);
}

body.ui-v2 .usage-down .mini-bar span {
  background: var(--noc-red);
}

/* ── Status badges ── */
body.ui-v2 .status-up {
  color: #15803d;
  background: #dcfce7;
  border-color: #86efac;
}

body.ui-v2 .status-warning {
  color: #92400e;
  background: #fef3c7;
  border-color: #fcd34d;
}

body.ui-v2 .status-down {
  color: #b91c1c;
  background: #fee2e2;
  border-color: #fca5a5;
}

/* ── forti-interface edit panel ── */
body.ui-v2 .forti-edit-panel {
  background: var(--noc-surface);
  border-color: var(--noc-border-m);
}

body.ui-v2 .forti-edit-title {
  background: #f8fafc;
  border-bottom-color: var(--noc-border-m);
  color: var(--noc-ink-head);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

body.ui-v2 .forti-edit-row span {
  color: var(--noc-ink-dim);
  font-size: 0.7rem;
  text-transform: uppercase;
}

/* ── WAN / Firewall policy rows ── */
body.ui-v2 .firewall-policy-row {
  background: #f8fafc;
  border-color: var(--noc-border);
  color: var(--noc-ink);
  font-size: 0.78rem;
}

body.ui-v2 .firewall-policy-row.editing {
  background: var(--accent-light);
  border-color: rgba(37, 99, 235, 0.3);
}

body.ui-v2 .firewall-policy-actions button {
  background: var(--noc-surface);
  border-color: var(--noc-border-m);
  color: var(--noc-ink);
  border-radius: 6px;
}

body.ui-v2 .firewall-policy-actions button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Muted text ── */
body.ui-v2 .muted {
  color: var(--noc-ink-dim);
}

/* ── Dashboard title row ── */
body.ui-v2 .dashboard-title-row {
  border-bottom-color: var(--noc-border);
}

/* ── topbar tools ── */
body.ui-v2 .topbar-tools {
  flex-wrap: wrap;
  row-gap: 0.42rem;
}

/* ═══════════════════════════════════════════════
   Responsive — preserve sidebar drawer behavior
   ═══════════════════════════════════════════════ */
@media (max-width: 980px) {
  body.ui-v2 .app-frame {
    grid-template-columns: 1fr;
  }

  body.ui-v2 .sidebar {
    position: fixed;
    top: 3.5rem;
    left: 0;
    width: min(18rem, 88vw);
    height: calc(100vh - 3.5rem);
    transform: translateX(-105%);
    transition: transform 0.2s ease;
    margin: 0;
    z-index: 30;
    box-shadow: 4px 0 24px rgba(15, 23, 42, 0.1);
  }

  body.ui-v2.nav-open .sidebar {
    transform: translateX(0);
  }

  body.ui-v2.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    z-index: 25;
    animation: none;
    border-radius: 0;
    width: auto;
    height: auto;
    filter: none;
    display: block;
  }

  body.ui-v2 .summary-strip {
    grid-template-columns: 1fr;
  }

  body.ui-v2 .topbar {
    padding: 0 0.7rem;
    height: 3.5rem;
  }

  body.ui-v2 .quick-search.expanded,
  body.ui-v2 .quick-search:focus-within {
    width: min(14rem, 48vw);
  }
}

@media (max-width: 640px) {
  body.ui-v2 .topbar-brand,
  body.ui-v2 .topbar-device {
    display: none;
  }

  body.ui-v2 .topbar-tools {
    justify-content: flex-start;
  }

body.ui-v2 .quick-search.expanded,
body.ui-v2 .quick-search:focus-within {
    width: min(12rem, 68vw);
  }

  body.ui-v2 .shell {
    padding-left: 0.62rem;
    padding-right: 0.62rem;
  }
}

.topbar-tools #server-restart.action-button,
.topbar-tools #system-reboot.action-button {
  max-width: none;
  min-width: 8.8rem;
  color: #ffffff;
  padding-left: 2rem;
  padding-right: 0.78rem;
  text-align: left;
  letter-spacing: 0;
}

.topbar-tools #server-restart.action-button::after,
.topbar-tools #system-reboot.action-button::after {
  left: 0.72rem;
  transform: translateY(-50%);
}

.topbar-tools #server-restart.action-restart {
  border-color: rgba(2, 132, 199, 0.62);
  background: rgba(2, 132, 199, 0.22);
}

.topbar-tools #system-reboot.action-reboot {
  min-width: 8.6rem;
  border-color: rgba(229, 35, 31, 0.7);
  background: rgba(229, 35, 31, 0.26);
  color: #fff3f3;
}

body.ui-v2 .topbar-tools #server-restart.action-button,
body.ui-v2 .topbar-tools #system-reboot.action-button {
  color: var(--noc-ink-head);
}

body.ui-v2 .topbar-tools #server-restart.action-restart {
  border-color: rgba(2, 132, 199, 0.38);
  background: rgba(2, 132, 199, 0.12);
}

body.ui-v2 .topbar-tools #system-reboot.action-reboot {
  border-color: rgba(220, 38, 38, 0.42);
  background: rgba(220, 38, 38, 0.12);
  color: #991b1b;
}

@media (max-width: 740px) {
  .topbar-tools #server-restart.action-button,
  .topbar-tools #system-reboot.action-button {
    min-width: 7.7rem;
    padding-left: 1.85rem;
    padding-right: 0.58rem;
    font-size: 0.76rem;
  }
}

/* ── Toast Notification System ──────────────────────────── */
#toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  min-width: 240px;
  max-width: 380px;
  padding: 0.65rem 1rem;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.28);
  animation: toast-in 0.22s ease forwards;
  background: #1a2232;
  color: #e2e8f0;
  border-left: 4px solid #64748b;
}
.toast.toast-warn  { border-left-color: #ffc040; background: #1c1800; color: #ffe08a; }
.toast.toast-error { border-left-color: #ff4d5a; background: #1c0608; color: #ffa8ad; }
.toast.toast-ok    { border-left-color: #00e682; background: #001c10; color: #a0ffd0; }
.toast.toast-info  { border-left-color: #00d4e8; background: #001c24; color: #9af1ff; }

.toast-icon { font-size: 1em; line-height: 1.4; flex-shrink: 0; }
.toast-body { flex: 1; }
.toast-title { font-weight: 700; margin-bottom: 1px; }
.toast-msg   { opacity: 0.85; }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); max-height: 80px; }
  to   { opacity: 0; transform: translateX(24px); max-height: 0; padding: 0; margin: 0; }
}
.toast.dismissing {
  animation: toast-out 0.2s ease forwards;
}

/* body.ui-v2 toast overrides — light theme */
body.ui-v2 .toast {
  font-family: 'Inter', sans-serif;
  border-radius: 8px;
  background: #ffffff;
  color: #1e293b;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.14), 0 1px 4px rgba(15, 23, 42, 0.08);
}
body.ui-v2 .toast.toast-warn  { border-left-color: #d97706; background: #fffbeb; color: #78350f; }
body.ui-v2 .toast.toast-error { border-left-color: #dc2626; background: #fff5f5; color: #7f1d1d; }
body.ui-v2 .toast.toast-ok    { border-left-color: #16a34a; background: #f0fdf4; color: #14532d; }
body.ui-v2 .toast.toast-info  { border-left-color: #0284c7; background: #f0f9ff; color: #0c4a6e; }

/* ============================================================
   GUI Refresh v2.1 — Gateway Green Brand Theme
   ============================================================ */

/* ── 1. Global accent: gateway green (matches login branding) ── */
body.ui-v2 {
  --accent:       #16a34a;
  --accent-light: rgba(22, 163, 74, 0.08);
  --noc-green:    #15803d;
}

/* ── 2. Topbar: thin green top accent + slightly warmer shadow ── */
body.ui-v2 .topbar {
  border-top: 3px solid var(--accent);
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.10);
}

/* Brand name → green */
body.ui-v2 .topbar-brand strong {
  color: var(--accent);
}

/* ── 3. Sidebar: subtle off-white bg + green-tinted right border ── */
body.ui-v2 .sidebar {
  background: #f8faf9;
  border-right-color: rgba(22, 163, 74, 0.18);
}

/* ── 4. Nav items: green active state with left accent bar ── */
body.ui-v2 .nav-item.active {
  background: rgba(22, 163, 74, 0.10);
  color: #15803d;
  font-weight: 600;
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  padding-left: calc(0.8rem - 3px);
}

body.ui-v2 .nav-item:hover {
  background: rgba(22, 163, 74, 0.06);
  color: #166534;
}

/* Active / hover icon → green tint */
body.ui-v2 .nav-item.active .nav-icon {
  background-color: var(--accent);
  opacity: 1;
}

body.ui-v2 .nav-item:hover .nav-icon {
  background-color: #166534;
  opacity: 1;
}

/* ── 5. Summary strip: color-coded stat cards ── */
/* Card 2 — OPERATIONAL UP → green */
body.ui-v2 .summary-box:nth-child(2) {
  border-color: rgba(22, 163, 74, 0.22);
}
body.ui-v2 .summary-box:nth-child(2)::after {
  background: linear-gradient(90deg, #16a34a 0%, #86efac 60%, transparent 100%);
}
body.ui-v2 .summary-box:nth-child(2) strong {
  color: #15803d;
}

/* Card 3 — OPERATIONAL DOWN → red */
body.ui-v2 .summary-box:nth-child(3) {
  border-color: rgba(220, 38, 38, 0.22);
}
body.ui-v2 .summary-box:nth-child(3)::after {
  background: linear-gradient(90deg, #dc2626 0%, #fca5a5 60%, transparent 100%);
}
body.ui-v2 .summary-box:nth-child(3) strong {
  color: #b91c1c;
}

/* ── 6. Widget top accent line: green gradient ── */
body.ui-v2 .widget::before,
body.ui-v2 .panel::before {
  background: linear-gradient(90deg, var(--accent) 0%, #86efac 55%, transparent 100%);
  opacity: 0.9;
}

/* ── 7. Widget cards: smooth hover lift ── */
body.ui-v2 .widget {
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
body.ui-v2 .widget:hover {
  box-shadow:
    0 4px 20px rgba(15, 23, 42, 0.11),
    0 8px 32px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}

/* ── 8. Widget head label: slightly bolder + tighter tracking ── */
body.ui-v2 .widget-head h3 {
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: #64748b;
}

/* ── 9. Network map core: green gradient ── */
body.ui-v2 .network-core {
  background: linear-gradient(145deg, #16a34a, #15803d);
  box-shadow: 0 4px 20px rgba(22, 163, 74, 0.35), 0 0 0 4px rgba(22, 163, 74, 0.12);
}

body.ui-v2 .network-core span {
  background: rgba(255, 255, 255, 0.88);
}

/* Network primary links → green */
body.ui-v2 .network-link.primary-link {
  stroke: var(--accent);
}
body.ui-v2 .network-link-dot {
  fill: var(--accent);
}

/* ── 10. Service status meter bar: green ── */
body.ui-v2 .license-meter span {
  background: linear-gradient(90deg, var(--accent), #86efac);
}

/* Service status text weights */
body.ui-v2 .text-up      { color: #15803d; font-weight: 600; }
body.ui-v2 .text-down    { color: #b91c1c; font-weight: 600; }
body.ui-v2 .text-unknown { color: #92400e; }

/* ── 11. Login button: green theme ── */
body.ui-v2 .login-panel button {
  background: var(--accent);
  border-color: rgba(22, 163, 74, 0.45);
}
body.ui-v2 .login-panel button:hover {
  background: #15803d;
  box-shadow: 0 4px 16px rgba(22, 163, 74, 0.35);
}
body.ui-v2 .login-panel input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}
body.ui-v2 .brand-mark {
  background: rgba(22, 163, 74, 0.08);
  border-color: rgba(22, 163, 74, 0.30);
  color: var(--accent);
}

/* ── 12. Forti tool/action buttons: green primary ── */
body.ui-v2 .forti-tool-button.primary-tool,
body.ui-v2 .forti-view-tabs button.active,
body.ui-v2 .forti-edit-footer .forti-ok-button {
  background: var(--accent);
  border-color: rgba(22, 163, 74, 0.5);
  color: #ffffff;
}

body.ui-v2 .forti-tool-button.primary-tool:hover,
body.ui-v2 .forti-view-tabs button.active:hover {
  background: #15803d;
}

/* ── 13. Interface toggle ON state: green ── */
body.ui-v2 .interface-toggle.is-on {
  border-color: rgba(22, 163, 74, 0.35);
  background: #f0fdf4;
  color: #15803d;
}

/* ── 14. mini-bar accent fill: green ── */
body.ui-v2 .mini-bar span {
  background: var(--accent);
}

/* ── 15. Port map: green tints ── */
body.ui-v2 .forti-device-logo {
  background: #f0fdf4;
  border-color: rgba(22, 163, 74, 0.22);
}
body.ui-v2 .forti-device-logo strong {
  color: var(--accent);
}
body.ui-v2 .forti-port-map {
  background: #e8f5ec;
  border-color: rgba(22, 163, 74, 0.18);
}
body.ui-v2 .forti-port.selected {
  outline-color: var(--accent);
  background: #f0fdf4;
}

/* ── 16. Dashboard background: slightly green-tinted gray ── */
body.ui-v2 {
  background-color: #f0f4f1;
}

/* ── 17. Summary box numbers: larger ── */
body.ui-v2 .summary-box strong {
  font-size: clamp(1.65rem, 3.2vw, 2.3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* ── 18. Summary box labels: cleaner ── */
body.ui-v2 .summary-box span {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #64748b;
}

/* ── 19. Search button highlight: green ── */
body.ui-v2 .quick-search.expanded,
body.ui-v2 .quick-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}

/* ── 20. Forti interface table: green selected row ── */
body.ui-v2 .forti-interface-table tbody tr.selected-row {
  background: #f0fdf4;
}

/* ── 21. Sidebar foot accent ── */
body.ui-v2 .sidebar-foot strong {
  color: var(--accent);
}

/* ── 22. Collapse link chevron: green ── */
body.ui-v2 .collapse-link::before {
  border-color: var(--accent);
}

/* ── 23. Control grid focus: green ── */
body.ui-v2 .control-grid input:focus,
body.ui-v2 .control-grid select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}

/* ── 24. Primary control action button: green ── */
body.ui-v2 .control-actions button:first-child {
  border-color: rgba(22, 163, 74, 0.35);
  background: rgba(22, 163, 74, 0.08);
  color: var(--accent);
}
body.ui-v2 .control-actions button:first-child:hover {
  background: rgba(22, 163, 74, 0.14);
  border-color: var(--accent);
}

/* ── 25. Topbar toolbar hover: green ── */
body.ui-v2 .toolbar-button:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(22, 163, 74, 0.08);
}

body.ui-v2 .secondary-button:hover,
body.ui-v2 .forti-tool-button:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(22, 163, 74, 0.08);
}

/* ── 26. Net badge UP: green ── */
body.ui-v2 .net-badge.net-badge-up {
  background: rgba(22, 163, 74, 0.10);
  color: var(--noc-green);
}

/* ── 27. WAN node connected state: green left border ── */
body.ui-v2 .network-node[data-net-state="connected"],
body.ui-v2 .wan-stack div[data-net-state="connected"],
body.ui-v2 .lan-row div[data-net-state="connected"] {
  border-left: 3px solid var(--accent);
  border-color: rgba(22, 163, 74, 0.30);
}

/* ── 28. Gauge green: use brand green ── */
body.ui-v2 .gauge-green {
  --gauge-color: var(--accent);
}

/* ============================================================
   Chart redesign — modern clean look
   ============================================================ */

/* ── Chart container: dot grid background ── */
body.ui-v2 .traffic-chart,
body.ui-v2 .session-chart {
  background:
    radial-gradient(circle, rgba(100, 116, 139, 0.22) 1px, transparent 1px)
    0 0 / 36px 34px,
    #ffffff;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--noc-border);
}

/* ── Chart lines: thicker stroke ── */
body.ui-v2 .traffic-chart path.chart-line,
body.ui-v2 .session-chart path.chart-line,
body.ui-v2 .traffic-chart .chart-line,
body.ui-v2 .session-chart .chart-line {
  stroke-width: 2.5;
}

/* ── Chart text labels: muted + clear ── */
body.ui-v2 .traffic-chart text,
body.ui-v2 .session-chart text {
  fill: #94a3b8;
  font-size: 9px;
  font-weight: 700;
  stroke: rgba(255, 255, 255, 0.98);
  stroke-width: 2px;
  paint-order: stroke;
}

/* ── Sparkline: taller + thicker line ── */
body.ui-v2 .sparkline {
  height: 2.2rem;
  border-top: 1px solid var(--noc-border);
  padding-top: 0.18rem;
  margin-top: 0.18rem;
}

body.ui-v2 .sparkline polyline {
  stroke-width: 2;
}

/* ── Donut gauge: slightly larger with surface bg ── */
body.ui-v2 .donut-gauge {
  width: 5rem;
  background:
    radial-gradient(circle closest-side, var(--noc-surface) 66%, transparent 68%),
    conic-gradient(var(--gauge-color) calc(var(--value) * 1%), #e2e8f0 0);
  filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.10));
}

body.ui-v2 .donut-gauge strong {
  font-size: 1.1rem;
  font-weight: 700;
}

/* ── System resources widget: a bit more space ── */
body.ui-v2 .resource-item {
  gap: 0.45rem;
}

body.ui-v2 .resource-item > span {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

body.ui-v2 .resource-item small {
  font-size: 0.67rem;
  color: #64748b;
}

/* ── Chart legend: cleaner pills ── */
body.ui-v2 .chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  background: #f8fafc;
  border: 1px solid var(--noc-border);
  border-radius: 999px;
  padding: 0.1rem 0.5rem 0.1rem 0.28rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--noc-ink);
}

body.ui-v2 .chart-legend span::before {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--series-color, var(--accent));
  flex-shrink: 0;
}

/* ── Traffic legend: same pill style ── */
body.ui-v2 .traffic-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  background: #f8fafc;
  border: 1px solid var(--noc-border);
  border-radius: 999px;
  padding: 0.1rem 0.5rem 0.1rem 0.28rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--noc-ink);
}

body.ui-v2 .traffic-legend span::before {
  border-radius: 50%;
  width: 0.5rem;
  height: 0.5rem;
}

/* ── App donut: whiter hole ── */
body.ui-v2 .app-donut {
  filter: drop-shadow(0 2px 8px rgba(15, 23, 42, 0.12));
}

/* ── Policy bar: green fill ── */
body.ui-v2 .policy-bar span {
  background: linear-gradient(90deg, var(--accent), #86efac);
}

/* ── Sessions chart: slightly taller widget ── */
body.ui-v2 .widget-sessions {
  min-height: 14rem;
}

/* ============================================================
   Network Map v2 — CSS-only vertical-tree topology
   ============================================================ */

/* ── Widget height: tall enough to fit 4 tiers ── */
.widget-network {
  min-height: 22rem;
}

/* ── Container: vertical flex column, all items centered ── */
.nm-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.7rem 1rem 0.9rem;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
}

/* ── Tier rows ── */
.nm-tier {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0.45rem;
}

.nm-tier-inet,
.nm-tier-fw {
  justify-content: center;
}

.nm-tier-wan,
.nm-tier-lan {
  position: relative;
  align-items: flex-start;
  padding-top: 1rem;
}

.nm-tier-wan::before,
.nm-tier-lan::before {
  content: "";
  position: absolute;
  top: 0.34rem;
  left: 0.9rem;
  right: 0.9rem;
  height: 2px;
  border-radius: 999px;
  background: #b8c8d8;
}

.nm-tier-wan::after,
.nm-tier-lan::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 0.34rem;
  background: #b8c8d8;
  transform: translateX(-50%);
}

.nm-tier-wan > .nm-node,
.nm-tier-lan > .nm-node {
  position: relative;
  z-index: 1;
}

.nm-tier-wan > .nm-node::before,
.nm-tier-lan > .nm-node::before {
  content: "";
  position: absolute;
  top: -0.66rem;
  left: 50%;
  width: 2px;
  height: 0.66rem;
  background: #b8c8d8;
  transform: translateX(-50%);
}

/* ── Vertical wire (connects tiers) ── */
.nm-vwire {
  width: 2px;
  height: 0.75rem;
  background: #b8c8d8;
  flex-shrink: 0;
}

/* ── Firewall / Core block ── */
.nm-fw-block {
  width: 3.4rem;
  height: 2.9rem;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  background: linear-gradient(145deg, #16a34a, #15803d);
  box-shadow:
    0 4px 14px rgba(22, 163, 74, 0.32),
    0 0 0 3px rgba(22, 163, 74, 0.12);
  flex-shrink: 0;
}

.nm-fw-block span {
  width: 0.36rem;
  height: 1.15rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.88);
}

/* ── Node cards ── */
.nm-node {
  flex: 1;
  border: 1px solid #cfd7e0;
  border-radius: 8px;
  background: #fbfcfd;
  padding: 0.44rem 0.5rem;
  text-align: center;
  font-size: 0.74rem;
  min-width: 0;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

/* INTERNET node: narrower, doesn't stretch full width */
.nm-node-inet {
  flex: 0 0 auto;
  min-width: 8rem;
  padding: 0.48rem 1rem;
}

.nm-node strong {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #0f172a;
  margin-bottom: 0.14rem;
}

.nm-node span {
  display: block;
  color: #475569;
  font-size: 0.72rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* ── Status border colours ── */
.nm-node[data-net-state="connected"] {
  border-left: 3px solid rgba(22, 163, 74, 0.7);
  background: #f7fdf9;
}

.nm-node[data-net-state="disconnected"] {
  border-left: 3px solid rgba(220, 38, 38, 0.65);
  background: #fff8f8;
}

/* ── body.ui-v2 overrides ── */
body.ui-v2 .widget-network {
  min-height: 22rem;
}

body.ui-v2 .nm-vwire {
  background: var(--noc-border-m);
}

body.ui-v2 .nm-tier-wan::before,
body.ui-v2 .nm-tier-lan::before,
body.ui-v2 .nm-tier-wan::after,
body.ui-v2 .nm-tier-lan::after,
body.ui-v2 .nm-tier-wan > .nm-node::before,
body.ui-v2 .nm-tier-lan > .nm-node::before {
  background: var(--noc-border-m);
}

body.ui-v2 .nm-fw-block {
  background: linear-gradient(145deg, var(--accent), #15803d);
  box-shadow:
    0 4px 14px rgba(22, 163, 74, 0.32),
    0 0 0 3px rgba(22, 163, 74, 0.12);
}

body.ui-v2 .nm-fw-block span {
  background: rgba(255, 255, 255, 0.88);
}

body.ui-v2 .nm-node {
  border-color: var(--noc-border);
  background: var(--noc-surface);
  box-shadow: var(--noc-shadow);
}

body.ui-v2 .nm-node strong {
  color: var(--noc-ink-head);
  font-size: 0.67rem;
  letter-spacing: 0.06em;
}

body.ui-v2 .nm-node span {
  color: var(--noc-ink);
  font-size: 0.72rem;
}

body.ui-v2 .nm-node[data-net-state="connected"] {
  border-left: 3px solid var(--accent);
  background: #f7fdf9;
  box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.14), var(--noc-shadow);
}

body.ui-v2 .nm-node[data-net-state="disconnected"] {
  border-left: 3px solid var(--noc-red);
  background: #fff5f5;
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.12), var(--noc-shadow);
}

/* ── Responsive tweaks ── */
@media (max-width: 900px) {
  .firewall-zone-list,
  .firewall-zone-editor-head {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  body.ui-v2 .nm-tier-wan,
  body.ui-v2 .nm-tier-lan {
    gap: 0.28rem;
  }

  body.ui-v2 .nm-tier-wan::before,
  body.ui-v2 .nm-tier-lan::before {
    left: 0.45rem;
    right: 0.45rem;
  }

  body.ui-v2 .nm-node {
    padding: 0.36rem 0.28rem;
  }

  body.ui-v2 .nm-node strong {
    font-size: 0.62rem;
  }

  body.ui-v2 .nm-node span {
    font-size: 0.66rem;
  }
}

/* ── Production topbar fit fix ───────────────────────────── */
body.ui-v2 .topbar {
  margin: 0;
  overflow: visible;
}

body.ui-v2 .topbar-left {
  flex: 1 1 auto;
  min-width: 0;
}

body.ui-v2 .topbar-tools {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  row-gap: 0;
  min-width: 0;
}

body.ui-v2 .topbar-tools > * {
  flex: 0 0 auto;
}

body.ui-v2 .topbar-tools .toolbar-button,
body.ui-v2 .topbar-tools .admin-menu {
  white-space: nowrap;
}

@media (max-width: 1040px) {
  body.ui-v2 .topbar-device {
    display: none;
  }

  body.ui-v2 .topbar {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  body.ui-v2 .topbar-tools {
    gap: 0.42rem;
  }
}

@media (max-width: 820px) {
  body.ui-v2 .topbar-brand {
    display: none;
  }

  body.ui-v2 .topbar-left {
    flex: 0 1 auto;
  }
}

@media (max-width: 640px) {
  body.ui-v2 {
    padding-top: 6.75rem;
  }

  body.ui-v2 .app-frame {
    min-height: calc(100vh - 6.75rem);
  }

  body.ui-v2 .topbar {
    height: 6.75rem;
    min-height: 6.75rem;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0.42rem;
    padding: 0.45rem 0.65rem 0.5rem;
  }

  body.ui-v2 .topbar-left,
  body.ui-v2 .topbar-tools {
    width: 100%;
  }

  body.ui-v2 .topbar-left {
    flex: 0 0 auto;
    min-height: 2.25rem;
  }

  body.ui-v2 .topbar-tools {
    flex: 0 0 auto;
    justify-content: flex-start;
    min-height: 2.3rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.1rem;
    scrollbar-width: thin;
  }

  body.ui-v2 .topbar-tools::-webkit-scrollbar {
    height: 4px;
  }

  body.ui-v2 .topbar-tools::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.35);
    border-radius: 999px;
  }

  body.ui-v2 .topbar-tools #server-restart.action-button,
  body.ui-v2 .topbar-tools #system-reboot.action-button {
    min-width: 8.45rem;
  }
}

/* ── Responsive GUI redesign: narrow production screens ───── */
body.ui-v2 {
  --mobile-shell-pad: 0.7rem;
  --mobile-card-radius: 8px;
}

body.ui-v2 .page-view {
  min-width: 0;
}

body.ui-v2 .panel,
body.ui-v2 .widget,
body.ui-v2 .system-resources,
body.ui-v2 .profile-card,
body.ui-v2 .metric-card,
body.ui-v2 .system-detail-card,
body.ui-v2 .summary-box {
  min-width: 0;
}

@media (max-width: 980px) {
  body.ui-v2 {
    padding-top: 3.5rem;
  }

  body.ui-v2 .app-frame {
    min-height: calc(100vh - 3.5rem);
  }

  body.ui-v2 .sidebar {
    top: 3.5rem;
    left: 0;
    width: min(20rem, 86vw);
    height: calc(100vh - 3.5rem);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.75rem;
    background: #ffffff;
    transform: translateX(-100%);
  }

  body.ui-v2.nav-open .sidebar {
    transform: translateX(0);
  }

  body.ui-v2 .brand-block {
    display: flex;
    min-height: 3.25rem;
    margin: 0 0 0.6rem;
    border: 1px solid var(--noc-border);
    border-radius: var(--mobile-card-radius);
    background: #f8faf9;
  }

  body.ui-v2 .nav-list {
    display: grid;
    gap: 0.3rem;
    width: 100%;
    padding: 0;
    overflow: visible;
  }

  body.ui-v2 .nav-item {
    width: 100%;
    min-height: 2.55rem;
    justify-content: flex-start;
    white-space: normal;
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
  }

  body.ui-v2 .nav-item.active {
    border-left: 0;
    border-radius: 8px;
    padding-left: 0.7rem;
    box-shadow: inset 3px 0 0 var(--accent);
  }

  body.ui-v2 .sidebar-foot {
    display: grid;
    gap: 0.2rem;
    margin-top: 0.7rem;
    padding-top: 0.7rem;
  }

  body.ui-v2 .summary-strip {
    gap: 0.55rem;
    padding: 0.75rem 0.75rem 0;
  }

  body.ui-v2 .dashboard-grid {
    gap: 0.7rem;
  }
}

@media (max-width: 760px) {
  body.ui-v2 {
    padding-top: 6.15rem;
    background: #eef4f1;
  }

  body.ui-v2 .app-frame {
    min-height: calc(100vh - 6.15rem);
  }

  body.ui-v2 .topbar {
    height: 6.15rem;
    min-height: 6.15rem;
    padding: 0.38rem var(--mobile-shell-pad) 0.45rem;
    gap: 0.36rem;
    border-top-width: 3px;
  }

  body.ui-v2 .topbar-left {
    min-height: 2.1rem;
    gap: 0.45rem;
  }

  body.ui-v2 .icon-button,
  body.ui-v2 .quick-search,
  body.ui-v2 .quick-search .search-button {
    width: 2.25rem;
    height: 2.25rem;
    min-height: 2.25rem;
  }

  body.ui-v2 .quick-search.expanded,
  body.ui-v2 .quick-search:focus-within {
    width: min(13.5rem, calc(100vw - 4.7rem));
  }

  body.ui-v2 .topbar-tools {
    min-height: 2.38rem;
    gap: 0.38rem;
    padding-bottom: 0.12rem;
  }

  body.ui-v2 .toolbar-button,
  body.ui-v2 .admin-menu {
    min-height: 2.15rem;
    border-radius: 7px;
    font-size: 0.78rem;
  }

  body.ui-v2 .topbar-tools #server-restart.action-button,
  body.ui-v2 .topbar-tools #system-reboot.action-button {
    min-width: 8.1rem;
    padding-left: 1.9rem;
  }

  body.ui-v2 .topbar-tools #config-backup,
  body.ui-v2 .topbar-tools #config-restore {
    min-width: 2.25rem;
    max-width: 2.25rem;
  }

  body.ui-v2 .topbar-tools #auth-logout {
    min-width: 4rem;
  }

  body.ui-v2 .admin-menu {
    min-width: 4.2rem;
    text-align: center;
  }

  body.ui-v2 .sidebar {
    top: 6.15rem;
    height: calc(100vh - 6.15rem);
    border-top: 1px solid var(--noc-border);
  }

  body.ui-v2.nav-open::before {
    top: 6.15rem;
  }

  body.ui-v2 .shell {
    padding: 0 var(--mobile-shell-pad) max(1rem, env(safe-area-inset-bottom));
  }

  body.ui-v2 .summary-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.46rem;
    padding: 0.62rem 0 0;
  }

  body.ui-v2 .summary-box {
    min-height: 4.65rem;
    padding: 0.62rem 0.58rem;
    border-radius: var(--mobile-card-radius);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
  }

  body.ui-v2 .summary-box span {
    min-height: 1.7rem;
    font-size: 0.56rem;
    line-height: 1.2;
    letter-spacing: 0.06em;
  }

  body.ui-v2 .summary-box strong {
    margin-top: 0.16rem;
    font-size: 1.55rem;
    line-height: 1;
  }

  body.ui-v2 .dashboard-title-row,
  body.ui-v2 .panel-header,
  body.ui-v2 .resources-header {
    align-items: flex-start;
    gap: 0.58rem;
    padding: 0.74rem 0.72rem;
  }

  body.ui-v2 .dashboard-title-row {
    margin-top: 0.7rem;
    border: 0;
    background: transparent;
    padding-left: 0;
    padding-right: 0;
  }

  body.ui-v2 .dashboard-title-row h2,
  body.ui-v2 .panel-header h2 {
    font-size: 1.02rem;
  }

  body.ui-v2 .dashboard-widget-actions,
  body.ui-v2 .resource-toolbar,
  body.ui-v2 .system-actions,
  body.ui-v2 .service-log-toolbar {
    width: 100%;
    justify-content: flex-start;
    gap: 0.45rem;
  }

  body.ui-v2 .resource-toolbar {
    align-items: stretch;
  }

  body.ui-v2 .secondary-button,
  body.ui-v2 .danger-button,
  body.ui-v2 .control-grid button,
  body.ui-v2 .profile-actions button,
  body.ui-v2 .profile-interface-switch button,
  body.ui-v2 .service-log-toolbar button {
    min-height: 2.25rem;
    border-radius: 7px;
    font-size: 0.8rem;
  }

  body.ui-v2 .dashboard-grid,
  body.ui-v2 .metric-grid,
  body.ui-v2 .control-grid,
  body.ui-v2 .status-detail,
  body.ui-v2 .resource-grid,
  body.ui-v2 .disk-summary-grid,
  body.ui-v2 .health-list,
  body.ui-v2 .systemlog-grid,
  body.ui-v2 .firewall-zone-list,
  body.ui-v2 .firewall-zone-editor-head {
    grid-template-columns: 1fr;
  }

  body.ui-v2 .dashboard-grid {
    gap: 0.65rem;
  }

  body.ui-v2 .widget,
  body.ui-v2 .panel,
  body.ui-v2 .system-resources,
  body.ui-v2 .profile-card,
  body.ui-v2 .system-detail-card {
    border-radius: var(--mobile-card-radius);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
  }

  body.ui-v2 .widget {
    min-height: auto;
    padding: 0.72rem;
  }

  body.ui-v2 .widget-info,
  body.ui-v2 .widget-license,
  body.ui-v2 .widget-resources,
  body.ui-v2 .widget-network,
  body.ui-v2 .widget-traffic,
  body.ui-v2 .widget-apps,
  body.ui-v2 .widget-sessions,
  body.ui-v2 .widget-policy,
  body.ui-v2 .dhcp-health-card,
  body.ui-v2 .firewall-policy-card,
  body.ui-v2 .log-bottom-card {
    grid-column: 1 / -1;
  }

  body.ui-v2 .system-resources {
    margin: 0.65rem 0;
  }

  body.ui-v2 .control-grid,
  body.ui-v2 .status-detail {
    padding: 0.72rem;
    gap: 0.58rem;
  }

  body.ui-v2 .control-grid {
    border-bottom: 1px solid var(--noc-border);
  }

  body.ui-v2 .control-grid label,
  body.ui-v2 .profile-interface-switch label {
    gap: 0.22rem;
    font-size: 0.66rem;
    letter-spacing: 0.05em;
  }

  body.ui-v2 .control-grid input,
  body.ui-v2 .control-grid select,
  body.ui-v2 .profile-interface-switch select,
  body.ui-v2 .service-log-toolbar select {
    min-height: 2.45rem;
    border-radius: 7px;
    font-size: 0.86rem;
  }

  body.ui-v2 .check-row {
    min-height: 2rem;
    display: flex;
    align-items: center;
  }

  body.ui-v2 .control-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.48rem;
  }

  body.ui-v2 .control-actions button {
    width: 100%;
    min-width: 0;
  }

  body.ui-v2 #pppoe-reconnect,
  body.ui-v2 #firewall-add-policy,
  body.ui-v2 #firewall-new-policy {
    grid-column: 1 / -1;
  }

  body.ui-v2 .profile-grid,
  body.ui-v2 .info-list div,
  body.ui-v2 .log-bottom-card dl {
    grid-template-columns: minmax(5.2rem, 34%) minmax(0, 1fr);
  }

  body.ui-v2 .profile-card {
    padding: 0.7rem;
  }

  body.ui-v2 .profile-card-head {
    align-items: flex-start;
  }

  body.ui-v2 .profile-actions,
  body.ui-v2 .firewall-policy-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
  }

  body.ui-v2 .profile-actions button,
  body.ui-v2 .firewall-policy-actions button {
    width: 100%;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
  }

  body.ui-v2 .profile-interface-switch,
  body.ui-v2 .firewall-zone-mode,
  body.ui-v2 .app-summary {
    grid-template-columns: 1fr;
  }

  body.ui-v2 .firewall-policy-row {
    grid-template-columns: 1fr;
    gap: 0.38rem;
    padding: 0.68rem;
  }

  body.ui-v2 .service-log-toolbar select,
  body.ui-v2 .service-log-toolbar button {
    flex: 1 1 9rem;
  }

  body.ui-v2 .log-list {
    padding-left: 0.8rem;
    font-size: 0.72rem;
  }

  body.ui-v2 .scroll-log-list {
    max-height: 18rem;
  }

  body.ui-v2 .table-wrap {
    margin: 0;
    border-radius: 0 0 var(--mobile-card-radius) var(--mobile-card-radius);
    overflow: visible;
  }

  body.ui-v2 table {
    min-width: 0;
  }

  body.ui-v2 .dhcp-lease-table {
    min-width: 0;
  }

  body.ui-v2 table,
  body.ui-v2 thead,
  body.ui-v2 tbody,
  body.ui-v2 tr,
  body.ui-v2 th,
  body.ui-v2 td {
    display: block;
  }

  body.ui-v2 thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  body.ui-v2 tbody {
    display: grid;
    gap: 0.6rem;
    padding: 0.7rem;
  }

  body.ui-v2 tbody tr {
    border: 1px solid var(--noc-border);
    border-radius: var(--mobile-card-radius);
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 1px 8px rgba(15, 23, 42, 0.06);
  }

  body.ui-v2 td {
    display: grid;
    grid-template-columns: minmax(5.5rem, 34%) minmax(0, 1fr);
    gap: 0.62rem;
    align-items: start;
    border-bottom: 1px solid #edf0f4;
    padding: 0.56rem 0.62rem;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
  }

  body.ui-v2 td:last-child {
    border-bottom: 0;
  }

  body.ui-v2 td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  body.ui-v2 td.placeholder {
    display: block;
  }

  body.ui-v2 .forti-device-panel,
  body.ui-v2 .forti-interface-toolbar,
  body.ui-v2 .interface-bridge-head,
  body.ui-v2 .forti-edit-title,
  body.ui-v2 .forti-edit-section {
    flex-direction: column;
    align-items: stretch;
  }

  body.ui-v2 .interface-bridge-panel {
    padding: 0.72rem;
  }

  body.ui-v2 .interface-bridge-grid,
  body.ui-v2 .interface-bridge-actions,
  body.ui-v2 .interface-safety-grid,
  body.ui-v2 .interface-topology {
    grid-template-columns: 1fr;
  }

  body.ui-v2 .interface-bridge-grid {
    display: grid;
  }

  body.ui-v2 .interface-safety-grid,
  body.ui-v2 .interface-topology-panel {
    padding: 0.72rem;
  }

  body.ui-v2 .interface-status-card-head,
  body.ui-v2 .topology-node > div:first-child {
    align-items: flex-start;
  }

  body.ui-v2 .interface-status-lines > div {
    grid-template-columns: minmax(4.8rem, 32%) minmax(0, 1fr);
  }

  body.ui-v2 .interface-bridge-actions {
    display: grid;
    gap: 0.42rem;
  }

  body.ui-v2 .interface-bridge-actions button {
    width: 100%;
  }

  body.ui-v2 .forti-device-panel {
    padding: 0.72rem;
    gap: 0.62rem;
  }

  body.ui-v2 .forti-device-logo {
    width: 100%;
    border-radius: var(--mobile-card-radius);
  }

  body.ui-v2 .forti-port-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }

  body.ui-v2 .forti-interface-toolbar,
  body.ui-v2 .forti-toolbar-left,
  body.ui-v2 .forti-view-tabs,
  body.ui-v2 .forti-edit-footer {
    gap: 0.42rem;
  }

  body.ui-v2 .forti-view-tabs {
    overflow-x: auto;
    padding-bottom: 0.08rem;
  }

  body.ui-v2 .forti-tool-button,
  body.ui-v2 .forti-view-tabs button,
  body.ui-v2 .forti-edit-footer button {
    min-height: 2.25rem;
    white-space: nowrap;
  }

  body.ui-v2 .forti-edit-body,
  body.ui-v2 .forti-edit-row,
  body.ui-v2 .forti-access-grid {
    grid-template-columns: 1fr;
  }

  body.ui-v2 .network-map-v2 {
    min-height: 14rem;
  }

  body.ui-v2 .nm-tier-wan,
  body.ui-v2 .nm-tier-lan {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  body.ui-v2 {
    --mobile-shell-pad: 0.62rem;
  }

  body.ui-v2 .summary-strip {
    gap: 0.38rem;
  }

  body.ui-v2 .summary-box {
    min-height: 4.35rem;
    padding: 0.55rem 0.48rem;
  }

  body.ui-v2 .summary-box span {
    font-size: 0.52rem;
  }

  body.ui-v2 .summary-box strong {
    font-size: 1.38rem;
  }

  body.ui-v2 .panel-header,
  body.ui-v2 .resources-header {
    flex-direction: column;
  }

  body.ui-v2 .panel-header p,
  body.ui-v2 #meta,
  body.ui-v2 #system-meta,
  body.ui-v2 #firewall-meta,
  body.ui-v2 #dhcp-meta,
  body.ui-v2 #dns-meta,
  body.ui-v2 #routing-meta,
  body.ui-v2 #wan-meta,
  body.ui-v2 #pppoe-meta {
    width: 100%;
    text-align: left;
  }

  body.ui-v2 .topbar-tools #auth-logout,
  body.ui-v2 .admin-menu {
    min-width: 3.7rem;
  }

  body.ui-v2 .control-actions,
  body.ui-v2 .profile-actions,
  body.ui-v2 .firewall-policy-actions {
    grid-template-columns: 1fr;
  }

  body.ui-v2 .profile-grid,
  body.ui-v2 .info-list div,
  body.ui-v2 .log-bottom-card dl {
    grid-template-columns: 1fr;
    gap: 0.12rem;
  }

  body.ui-v2 .health-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  body.ui-v2 .health-row > span:last-child {
    grid-column: 2;
  }
}