/* ========================================================================== */
/* MARGA.NET OS - router workspace and dashboard                              */
/* This layer is intentionally namespaced so legacy pages keep their behavior. */
/* ========================================================================== */

body.marga-router-os {
  --os-bg: #030b18;
  --os-bg-deep: #020814;
  --os-panel: #071426;
  --os-panel-soft: #0b1c33;
  --os-panel-raised: #0d2039;
  --os-border: rgba(84, 139, 198, 0.28);
  --os-border-soft: rgba(101, 142, 187, 0.2);
  --os-text: #f7f9ff;
  --os-muted: #91a8cf;
  --os-blue: #2aa8ff;
  --os-cyan: #22d3ee;
  --os-green: #19d69b;
  --os-purple: #9767ff;
  --os-orange: #f7a60a;
  --os-pink: #f03a9d;
  min-width: 0;
  overflow-x: hidden;
  color: var(--os-text);
  background:
    radial-gradient(circle at 55% -18%, rgba(38, 91, 180, 0.13), transparent 35%),
    linear-gradient(180deg, var(--os-bg) 0%, var(--os-bg-deep) 100%) !important;
}

/* Large Hotspot user lists: keep the browser light without changing RouterOS data. */
body.marga-router-os .marga-user-search-form {
  position: relative;
  display: flex;
  min-width: 0;
}

body.marga-router-os .marga-user-search-form #filterTable {
  width: 100%;
  min-width: 0;
  padding-right: 34px !important;
}

body.marga-router-os .marga-user-search-submit {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 32px;
  padding: 0;
  border: 0;
  border-left: 1px solid rgba(89, 121, 167, 0.28);
  border-radius: 0 6px 6px 0;
  background: rgba(22, 45, 77, 0.9);
  color: #71d7ff;
  cursor: pointer;
}

body.marga-router-os .marga-user-search-submit:hover {
  background: rgba(27, 68, 108, 0.95);
}

body.marga-router-os .marga-user-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
  padding: 8px 10px;
  border: 1px solid rgba(75, 107, 151, 0.28);
  border-radius: 8px;
  background: rgba(10, 25, 47, 0.62);
  color: #93a9c7;
  font-size: 10px;
}

body.marga-router-os .marga-user-pager-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

body.marga-router-os .marga-user-pager .btn {
  min-height: 28px;
  padding: 6px 9px;
  font-size: 9px;
}

body.marga-router-os .marga-user-page-number {
  min-width: 76px;
  color: #d5e4f7;
  font-weight: 700;
  text-align: center;
}

body.marga-router-os .marga-user-pager-disabled {
  opacity: 0.42;
  cursor: default;
  pointer-events: none;
}

body.marga-router-os .marga-user-search-result {
  color: #70d8ff;
}

@media screen and (max-width: 640px) {
  body.marga-router-os .marga-user-pager {
    align-items: stretch;
    flex-direction: column;
    padding: 7px;
  }

  body.marga-router-os .marga-user-pager-summary {
    text-align: center;
  }

  body.marga-router-os .marga-user-pager-actions {
    justify-content: space-between;
  }

  body.marga-router-os .marga-user-pager .btn {
    padding: 6px 7px;
  }
}

body.marga-router-os,
body.marga-router-os button,
body.marga-router-os input,
body.marga-router-os select,
body.marga-router-os textarea {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

body.marga-router-os *,
body.marga-router-os *::before,
body.marga-router-os *::after {
  box-sizing: border-box;
}

/* Header ------------------------------------------------------------------- */

body.marga-router-os .marga-os-header {
  position: fixed !important;
  z-index: 1200 !important;
  top: 0;
  right: 0;
  left: 0;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100% !important;
  height: 92px !important;
  min-height: 92px;
  padding: 0 clamp(20px, 3vw, 44px) !important;
  border-bottom: 1px solid rgba(90, 126, 174, 0.24) !important;
  color: var(--os-text);
  background:
    radial-gradient(circle at 69% -60%, rgba(57, 100, 194, 0.16), transparent 37%),
    rgba(3, 11, 25, 0.96) !important;
  box-shadow: 0 12px 36px rgba(0, 4, 13, 0.2) !important;
  backdrop-filter: blur(16px);
}

body.marga-router-os .marga-os-header-branding,
body.marga-router-os .marga-os-header-actions {
  display: flex;
  align-items: center;
  min-width: 0;
}

body.marga-router-os .marga-os-brand {
  display: inline-flex;
  align-items: center;
  gap: 17px;
  min-width: 0;
  color: var(--os-text) !important;
  text-decoration: none !important;
}

body.marga-router-os .marga-os-brand-mark {
  position: relative;
  display: inline-grid;
  flex: 0 0 58px;
  place-items: center;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border: 1px solid rgba(76, 122, 178, 0.4);
  border-radius: 17px;
  color: #fff;
  background:
    radial-gradient(circle at 24% 10%, rgba(170, 75, 255, 0.32), transparent 42%),
    linear-gradient(145deg, #12162d, #07182a 70%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 10px 28px rgba(0, 5, 16, 0.32);
  font-size: 31px;
  font-weight: 900;
  letter-spacing: -3px;
}

body.marga-router-os .marga-os-brand-mark::before {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 22px;
  height: 22px;
  border-top: 2px solid rgba(177, 86, 255, 0.78);
  border-left: 2px solid rgba(177, 86, 255, 0.78);
  border-radius: 7px 0 0;
  content: none;
}

body.marga-router-os .marga-os-brand-mark img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

body.marga-router-os .marga-os-brand-copy {
  display: grid;
  min-width: 0;
  line-height: 1.12;
}

body.marga-router-os .marga-os-brand-copy strong {
  overflow: visible;
  color: #fff;
  font-size: clamp(23px, 2vw, 29px);
  font-weight: 800;
  letter-spacing: -0.7px;
  white-space: nowrap;
}

body.marga-router-os .marga-os-brand-copy small {
  margin-top: 6px;
  color: #bdcbea;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1px;
  white-space: nowrap;
}

body.marga-router-os .marga-os-current-page,
body.marga-router-os #brand.mikhmon-integrity-brand,
body.marga-router-os .marga-os-legacy-nav-control {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.marga-router-os .marga-os-header-actions {
  gap: 12px;
}

body.marga-router-os .marga-os-online {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-right: 8px;
  padding: 0 14px;
  border-radius: 14px;
  color: #a7b9d8;
  background: rgba(5, 19, 37, 0.58);
  font-size: 15px;
  font-weight: 500;
}

body.marga-router-os .marga-os-online i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #15d99b;
  box-shadow: 0 0 0 8px rgba(21, 217, 155, 0.09), 0 0 18px rgba(21, 217, 155, 0.44);
}

body.marga-router-os .marga-os-router-switcher {
  display: inline-flex;
  flex: 0 0 136px;
  width: 136px;
  height: 42px;
  min-width: 0;
  margin: 0;
}

body.marga-router-os .marga-os-router-switcher select {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
  margin: 0 !important;
  padding: 0 28px 0 11px !important;
  overflow: hidden;
  border: 1px solid rgba(86, 128, 180, 0.3) !important;
  border-radius: 11px !important;
  color: #dce8f8 !important;
  background: #0a1a30 !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
  font-size: 12px !important;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease;
}

body.marga-router-os .marga-os-router-switcher select:hover,
body.marga-router-os .marga-os-router-switcher select:focus-visible {
  border-color: rgba(74, 166, 255, 0.58) !important;
  background: #0d2340 !important;
  outline: none;
}

@media screen and (max-width: 1024px) {
  body.marga-router-os .marga-os-router-switcher {
    flex-basis: 108px;
    width: 108px;
    height: 40px;
  }

  body.marga-router-os .marga-os-router-switcher select {
    padding-right: 24px !important;
    padding-left: 9px !important;
    font-size: 11px !important;
  }
}

@media screen and (max-width: 480px) {
  body.marga-router-os .marga-os-router-switcher {
    flex-basis: 94px;
    width: 94px;
    height: 38px;
  }

  body.marga-router-os .marga-os-router-switcher select {
    padding-right: 21px !important;
    padding-left: 8px !important;
    border-radius: 10px !important;
    font-size: 10px !important;
  }
}

@media screen and (max-width: 360px) {
  body.marga-router-os .marga-os-router-switcher {
    flex-basis: 82px;
    width: 82px;
    height: 32px;
  }

  body.marga-router-os .marga-os-router-switcher select {
    padding-right: 18px !important;
    padding-left: 7px !important;
    font-size: 9px !important;
  }
}

@media screen and (min-width: 1025px) {
  body.marga-router-os .marga-os-router-switcher {
    flex-basis: 132px;
    width: 132px;
    height: 34px;
  }

  body.marga-router-os .marga-os-router-switcher select {
    border-radius: 9px !important;
    font-size: 11px !important;
  }
}

body.marga-router-os .marga-os-icon-button {
  position: relative;
  display: inline-grid !important;
  flex: 0 0 52px;
  place-items: center;
  width: 52px !important;
  min-width: 52px;
  height: 52px !important;
  min-height: 52px;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(74, 116, 169, 0.3) !important;
  border-radius: 16px !important;
  color: #b8c9e7 !important;
  background: linear-gradient(145deg, rgba(13, 28, 53, 0.94), rgba(5, 17, 35, 0.96)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04) !important;
  cursor: pointer;
  font-size: 20px !important;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease, background 160ms ease;
}

body.marga-router-os .marga-os-icon-button:hover,
body.marga-router-os .marga-os-icon-button:focus-visible {
  border-color: rgba(78, 161, 255, 0.62) !important;
  color: #fff !important;
  background: linear-gradient(145deg, rgba(20, 46, 83, 0.96), rgba(7, 24, 46, 0.98)) !important;
  outline: none;
  transform: translateY(-1px);
}

body.marga-router-os .marga-os-icon-button.is-loading i {
  animation: margaOsSpin 700ms linear infinite;
}

body.marga-router-os .marga-os-notification-button {
  border-color: rgba(129, 73, 173, 0.38) !important;
  background: linear-gradient(145deg, rgba(51, 22, 67, 0.94), rgba(9, 19, 39, 0.96)) !important;
}

body.marga-router-os .marga-os-notification-dot {
  position: absolute;
  top: -5px;
  right: -3px;
  width: 18px;
  height: 18px;
  border: 3px solid #071122;
  border-radius: 50%;
  background: #ff344c;
  box-shadow: 0 4px 12px rgba(255, 52, 76, 0.34);
}

body.marga-router-os .marga-os-more {
  position: relative;
  padding-left: 12px;
  border-left: 1px solid rgba(117, 143, 183, 0.22);
}

body.marga-router-os .marga-os-header-menu[hidden] {
  display: none !important;
}

body.marga-router-os .marga-os-header-menu {
  position: absolute;
  z-index: 1250;
  top: calc(100% + 14px);
  right: 0;
  display: grid;
  width: min(320px, calc(100vw - 24px));
  gap: 10px;
  padding: 17px;
  border: 1px solid rgba(79, 131, 192, 0.38);
  border-radius: 18px;
  color: var(--os-text);
  background: #071426;
  box-shadow: 0 24px 64px rgba(0, 4, 14, 0.58), inset 0 1px rgba(255, 255, 255, 0.05);
}

body.marga-router-os .marga-os-menu-title {
  display: grid;
  gap: 3px;
  padding: 0 2px 11px;
  border-bottom: 1px solid rgba(96, 135, 182, 0.2);
}

body.marga-router-os .marga-os-menu-title strong {
  color: #f7f9ff;
  font-size: 15px;
}

body.marga-router-os .marga-os-menu-title small {
  overflow: hidden;
  color: var(--os-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.marga-router-os .marga-os-menu-field {
  display: grid;
  gap: 7px;
  color: #9eb2d2;
  font-size: 12px;
  font-weight: 650;
}

body.marga-router-os .marga-os-menu-field > span {
  display: flex;
  align-items: center;
  gap: 7px;
}

body.marga-router-os .marga-os-menu-field select {
  display: block !important;
  width: 100% !important;
  height: 42px !important;
  min-height: 42px;
  margin: 0 !important;
  padding: 0 34px 0 12px !important;
  border: 1px solid rgba(86, 128, 180, 0.28) !important;
  border-radius: 11px !important;
  color: #eaf1ff !important;
  background: #0b1c33 !important;
  font-size: 13px !important;
}

body.marga-router-os .marga-os-menu-runtime {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid rgba(86, 128, 180, 0.2);
  border-radius: 10px;
  color: var(--os-muted);
  background: rgba(10, 28, 51, 0.76);
  font-size: 12px;
}

body.marga-router-os .marga-os-menu-runtime strong {
  margin-left: auto;
  color: #dbe8ff;
}

body.marga-router-os .marga-os-menu-action {
  display: flex !important;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
  width: 100% !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1px solid rgba(82, 126, 180, 0.22) !important;
  border-radius: 11px !important;
  color: #cbd9ef !important;
  background: rgba(11, 28, 51, 0.88) !important;
  box-shadow: none !important;
  text-align: left;
  text-decoration: none !important;
  cursor: pointer;
  font-size: 13px !important;
  font-weight: 650;
}

body.marga-router-os .marga-os-menu-action:hover {
  border-color: rgba(59, 156, 255, 0.48) !important;
  color: #fff !important;
}

body.marga-router-os .marga-os-menu-action--danger {
  color: #ff9ba8 !important;
}

/* Router drawer ------------------------------------------------------------ */

body.marga-router-os #sidenav.sidenav {
  z-index: 1600 !important;
  width: min(300px, calc(100vw - 38px)) !important;
  padding-top: 0 !important;
  border-right: 1px solid rgba(74, 127, 188, 0.28) !important;
  color: #dce8fb;
  background: #061225 !important;
  box-shadow: 28px 0 70px rgba(0, 4, 15, 0.52) !important;
  transform: translateX(-105%);
  transition: transform 220ms ease !important;
}

body.marga-router-os.marga-os-menu-open #sidenav.sidenav {
  transform: translateX(0);
}

body.marga-router-os .marga-sidebar-branding {
  position: sticky;
  z-index: 2;
  top: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 10px;
  min-height: 82px;
  margin: 0 0 10px !important;
  padding: 14px 12px 14px 15px !important;
  border-bottom: 1px solid rgba(89, 128, 176, 0.2);
  background: #071426;
}

body.marga-router-os .marga-mobile-sidebar-logo {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid rgba(83, 142, 216, 0.28);
  border-radius: 11px;
  color: #dbeaff;
  background: rgba(13, 35, 65, 0.9);
}

body.marga-router-os .marga-mobile-sidebar-logo img.marga-mikrotik-symbol {
  display: block;
  width: 24px;
  height: 27px;
  object-fit: contain;
  opacity: 0.92;
  filter: invert(1);
}

body.marga-router-os .marga-mobile-sidebar-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

body.marga-router-os .marga-mobile-sidebar-copy strong,
body.marga-router-os .marga-mobile-sidebar-copy small {
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.marga-router-os .marga-mobile-sidebar-copy strong {
  color: #f2f7ff;
  font-size: 14px;
  font-weight: 760;
  line-height: 1.1;
}

body.marga-router-os .marga-mobile-sidebar-copy small {
  color: #7f94b3;
  font-size: 9px;
  font-weight: 550;
  line-height: 1.2;
  letter-spacing: 0;
}

body.marga-router-os .marga-os-drawer-close {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(93, 134, 184, 0.27);
  border-radius: 11px;
  color: #b9cae4;
  background: #0b1c33;
  cursor: pointer;
}

body.marga-router-os .marga-os-drawer-overlay {
  position: fixed;
  z-index: 1550;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  visibility: hidden;
  opacity: 0;
  background: rgba(0, 5, 15, 0.7);
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease;
}

body.marga-router-os.marga-os-menu-open .marga-os-drawer-overlay {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

body.marga-router-os #sidenav a,
body.marga-router-os #sidenav .dropdown-btn {
  min-height: 44px;
  border-radius: 10px;
}

body.marga-router-os .marga-desktop-sidebar-header,
body.marga-router-os .marga-desktop-router-card,
body.marga-router-os .marga-desktop-sidebar-profile,
body.marga-router-os .marga-desktop-only {
  display: none;
}

body.marga-router-os .marga-sidebar-menu-scroll {
  display: contents;
}

@media screen and (max-width: 1024px) {
  body.marga-router-os.marga-os-menu-open .marga-sidebar-menu-scroll > a,
  body.marga-router-os.marga-os-menu-open .marga-sidebar-menu-scroll > .dropdown-btn {
    display: block !important;
  }

  body.marga-router-os.marga-os-menu-open #sidenav .dropdown-container.menu-open {
    display: block !important;
  }
}

/* Page shell and dock ------------------------------------------------------ */

body.marga-router-os #main {
  width: 100% !important;
  min-height: 100vh;
  margin: 0 !important;
  padding: 112px clamp(12px, 2vw, 28px) calc(118px + env(safe-area-inset-bottom)) !important;
  background: transparent !important;
  transition: none !important;
}

/* The legacy shell starts content hidden and reveals it with a jQuery fade.
   MARGA.NET OS is server-rendered, so keep it fully visible at every viewport. */
body.marga-router-os #loading {
  display: none !important;
}

body.marga-router-os #main > .main-container {
  display: block !important;
  visibility: visible !important;
  width: min(1400px, 100%) !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  opacity: 1 !important;
  animation: none !important;
  transition: none !important;
}

body.marga-router-os .marga-os-dock {
  position: fixed !important;
  z-index: 1400 !important;
  right: 50% !important;
  bottom: calc(16px + env(safe-area-inset-bottom)) !important;
  left: auto !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: min(920px, calc(100vw - 34px)) !important;
  height: 88px !important;
  min-height: 88px;
  padding: 9px !important;
  border: 1px solid rgba(72, 112, 169, 0.36) !important;
  border-radius: 25px !important;
  background:
    linear-gradient(180deg, rgba(10, 24, 48, 0.97), rgba(4, 14, 31, 0.98)) !important;
  box-shadow: 0 22px 70px rgba(0, 3, 12, 0.5), inset 0 1px rgba(255, 255, 255, 0.045) !important;
  transform: translateX(50%);
  backdrop-filter: blur(18px);
}

body.marga-router-os .marga-os-dock a {
  display: flex !important;
  align-items: center;
  flex-direction: column;
  gap: 7px;
  justify-content: center;
  min-width: 0;
  min-height: 68px;
  padding: 8px 5px !important;
  border: 1px solid transparent;
  border-radius: 19px;
  color: #8198c2 !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

body.marga-router-os .marga-os-dock a i {
  font-size: 24px;
  line-height: 1;
}

body.marga-router-os .marga-os-dock a span {
  overflow: hidden;
  max-width: 100%;
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.marga-router-os .marga-os-dock a:hover {
  color: #dfeaff !important;
  transform: translateY(-1px);
}

body.marga-router-os .marga-os-dock a.active {
  border-color: rgba(105, 127, 255, 0.65);
  color: #fff !important;
  background: linear-gradient(135deg, #4c3fd1 0%, #1377da 100%) !important;
  box-shadow: 0 10px 25px rgba(31, 82, 221, 0.3), inset 0 1px rgba(255, 255, 255, 0.18);
}

/* Dashboard layout --------------------------------------------------------- */

body.marga-router-os .marga-os-dashboard {
  display: grid;
  width: 100% !important;
  max-width: 1400px !important;
  gap: 22px;
  margin: 0 auto !important;
  padding: 0 !important;
  color: var(--os-text);
}

body.marga-router-os .marga-os-dashboard a {
  -webkit-tap-highlight-color: transparent;
}

body.marga-router-os .marga-os-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
}

body.marga-router-os .marga-os-panel,
body.marga-router-os .marga-os-service-panel,
body.marga-router-os .marga-os-shortcuts {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--os-border);
  border-radius: 22px;
  background:
    radial-gradient(circle at 95% 0%, rgba(31, 109, 207, 0.12), transparent 32%),
    linear-gradient(145deg, rgba(8, 25, 47, 0.99), rgba(5, 17, 33, 0.99));
  box-shadow: 0 16px 38px rgba(0, 5, 17, 0.22), inset 0 1px rgba(255, 255, 255, 0.035);
}

body.marga-router-os .marga-os-panel {
  min-height: 410px;
  padding: 24px;
}

body.marga-router-os .marga-os-panel::before,
body.marga-router-os .marga-os-service-panel::before,
body.marga-router-os .marga-os-shortcuts::before {
  position: absolute;
  top: 0;
  right: 15%;
  left: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(116, 184, 255, 0.42), transparent);
  content: "";
}

body.marga-router-os .marga-os-panel--overview {
  border-color: rgba(26, 141, 238, 0.64);
  background:
    radial-gradient(circle at 92% 4%, rgba(28, 107, 255, 0.24), transparent 36%),
    linear-gradient(145deg, #071a32, #061325 70%);
}

body.marga-router-os .marga-os-panel--overview::after {
  position: absolute;
  top: -30px;
  right: -34px;
  width: 150px;
  height: 150px;
  opacity: 0.28;
  background-image: radial-gradient(circle, #168cff 1.2px, transparent 1.4px);
  background-size: 12px 12px;
  mask-image: linear-gradient(135deg, #000, transparent 72%);
  content: "";
  pointer-events: none;
}

body.marga-router-os .marga-os-panel--resources {
  border-color: rgba(20, 173, 135, 0.5);
  background:
    radial-gradient(circle at 98% 0%, rgba(9, 193, 140, 0.18), transparent 36%),
    linear-gradient(145deg, #061c2a, #061524 72%);
}

body.marga-router-os .marga-os-section-heading,
body.marga-router-os .marga-os-service-heading,
body.marga-router-os .marga-os-shortcuts-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}

body.marga-router-os .marga-os-section-heading {
  gap: 13px;
  min-height: 43px;
  margin-bottom: 18px;
}

body.marga-router-os .marga-os-section-heading h2,
body.marga-router-os .marga-os-service-heading h2,
body.marga-router-os .marga-os-shortcuts-heading h2 {
  margin: 0;
  color: #f9fbff;
  font-size: 21px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.35px;
}

body.marga-router-os .marga-os-heading-icon,
body.marga-router-os .marga-os-service-icon,
body.marga-router-os .marga-os-shortcuts-icon {
  display: inline-grid;
  flex: 0 0 43px;
  place-items: center;
  width: 43px;
  height: 43px;
  border: 1px solid rgba(46, 144, 238, 0.25);
  border-radius: 13px;
  color: #48b8ff;
  background: rgba(8, 55, 98, 0.72);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
  font-size: 19px;
}

body.marga-router-os .marga-os-panel--resources .marga-os-heading-icon {
  border-color: rgba(23, 197, 149, 0.22);
  color: #24d7a1;
  background: rgba(3, 77, 67, 0.58);
}

body.marga-router-os .marga-os-clock-card {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  min-height: 176px;
  padding: 22px;
  border: 1px solid rgba(41, 128, 219, 0.38);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(8, 31, 58, 0.96), rgba(5, 20, 39, 0.96));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.03);
}

body.marga-router-os .marga-os-clock-card::after {
  position: absolute;
  top: 50%;
  right: 22px;
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border: 1px solid rgba(50, 173, 255, 0.12);
  border-radius: 50%;
  color: rgba(50, 173, 255, 0.24);
  background: rgba(15, 72, 125, 0.12);
  content: "\f017";
  font-family: FontAwesome;
  font-size: 25px;
  transform: translateY(-50%);
  pointer-events: none;
}

body.marga-router-os .marga-os-clock-card > span {
  color: #32adff;
  font-size: 14px;
  font-weight: 600;
}

body.marga-router-os .marga-os-clock-card > strong {
  margin-top: 13px;
  color: #fff;
  font-size: clamp(40px, 4.2vw, 54px);
  font-weight: 780;
  line-height: 1;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 5px 24px rgba(31, 111, 220, 0.14);
}

body.marga-router-os .marga-os-clock-card > small {
  margin-top: 14px;
  color: #a9bde1;
  font-size: 14px;
  font-weight: 500;
}

body.marga-router-os .marga-os-overview-minis {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

body.marga-router-os .marga-os-info-card {
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr);
  align-content: center;
  align-items: center;
  min-height: 112px;
  padding: 15px;
  border: 1px solid rgba(126, 84, 222, 0.42);
  border-left-color: #9b55ff;
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(26, 18, 61, 0.72), rgba(9, 18, 38, 0.92));
}

body.marga-router-os .marga-os-info-card--uptime {
  border-color: rgba(235, 157, 14, 0.38);
  border-left-color: #f2a400;
  background: linear-gradient(145deg, rgba(48, 32, 8, 0.55), rgba(9, 19, 35, 0.92));
}

body.marga-router-os .marga-os-info-icon {
  display: inline-grid;
  grid-row: 1 / span 2;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: #ab76ff;
  background: rgba(74, 39, 148, 0.36);
  font-size: 16px;
}

body.marga-router-os .marga-os-info-card--uptime .marga-os-info-icon {
  color: #ffb20e;
  background: rgba(136, 78, 0, 0.34);
}

body.marga-router-os .marga-os-info-card small {
  align-self: end;
  color: #9fb2d4;
  font-size: 13px;
  font-weight: 500;
}

body.marga-router-os .marga-os-info-card strong {
  align-self: start;
  min-width: 0;
  margin-top: 7px;
  overflow-wrap: anywhere;
  color: #b17aff;
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 750;
}

body.marga-router-os .marga-os-info-card--uptime strong {
  color: #fff;
}

/* Resource gauges --------------------------------------------------------- */

body.marga-router-os .marga-os-resources-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  min-height: 156px;
  padding: 19px 12px 15px;
  border: 1px solid rgba(51, 106, 153, 0.23);
  border-radius: 18px;
  background: rgba(6, 28, 47, 0.72);
}

body.marga-router-os .marga-os-resource {
  --os-gauge-color: #2ad4b4;
  display: flex;
  align-items: center;
  flex-direction: column;
  min-width: 0;
  text-align: center;
}

body.marga-router-os .marga-os-resource--ram {
  --os-gauge-color: #17dda3;
}

body.marga-router-os .marga-os-resource--storage {
  --os-gauge-color: #35adff;
}

body.marga-router-os .marga-os-gauge {
  position: relative;
  width: 82px;
  height: 82px;
}

body.marga-router-os .marga-os-gauge svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}

body.marga-router-os .marga-os-gauge circle {
  fill: none;
  stroke-width: 4;
}

body.marga-router-os .marga-os-gauge-track {
  stroke: rgba(64, 92, 128, 0.33);
}

body.marga-router-os .marga-os-gauge-value {
  stroke: var(--os-gauge-color);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--os-gauge-color), transparent 45%));
  transition: stroke-dashoffset 900ms cubic-bezier(0.2, 0.78, 0.2, 1);
}

body.marga-router-os .marga-os-gauge.is-ready .marga-os-gauge-value {
  stroke-dashoffset: calc(100 - var(--os-gauge-value));
}

body.marga-router-os .marga-os-gauge strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 20px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

body.marga-router-os .marga-os-resource > span {
  margin-top: 4px;
  color: #a9bfe5;
  font-size: 14px;
  font-weight: 650;
}

body.marga-router-os .marga-os-resource > small {
  display: block;
  width: 100%;
  margin-top: 5px;
  overflow: hidden;
  color: #7f96bb;
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.marga-router-os .marga-os-uptime-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.75fr) minmax(120px, 1.25fr);
  align-items: center;
  gap: 18px;
  min-height: 75px;
  margin-top: 12px;
  padding: 13px 17px;
  border: 1px solid rgba(50, 111, 164, 0.32);
  border-radius: 14px;
  background: rgba(5, 22, 40, 0.72);
}

body.marga-router-os .marga-os-uptime-row div {
  display: grid;
  gap: 5px;
}

body.marga-router-os .marga-os-uptime-row small,
body.marga-router-os .marga-os-system-meta small {
  color: #94a9cc;
  font-size: 12px;
}

body.marga-router-os .marga-os-uptime-row strong,
body.marga-router-os .marga-os-system-meta strong {
  overflow: hidden;
  color: #f7f9ff;
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.marga-router-os .marga-os-uptime-row svg {
  width: 100%;
  height: 43px;
  overflow: visible;
}

body.marga-router-os .marga-os-line,
body.marga-router-os .marga-os-line-glow {
  fill: none;
  stroke: #13d49a;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

body.marga-router-os .marga-os-line-glow {
  opacity: 0.32;
  stroke-width: 7;
  filter: blur(3px);
}

body.marga-router-os .marga-os-system-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

body.marga-router-os .marga-os-system-meta article {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(54, 109, 160, 0.28);
  border-radius: 13px;
  background: rgba(5, 22, 40, 0.7);
}

body.marga-router-os .marga-os-system-meta article > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

body.marga-router-os .marga-os-meta-icon {
  display: inline-grid;
  flex: 0 0 35px;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 10px;
  color: #1bd7aa;
  background: rgba(5, 85, 76, 0.42);
  font-size: 16px;
}

body.marga-router-os .marga-os-system-meta article:last-child .marga-os-meta-icon {
  color: #4bb8ff;
  background: rgba(8, 69, 118, 0.42);
}

/* Service panels ---------------------------------------------------------- */

body.marga-router-os .marga-os-services {
  display: grid;
  gap: 22px;
}

body.marga-router-os .marga-os-service-panel {
  padding: 22px;
}

body.marga-router-os .marga-os-service-heading {
  justify-content: space-between;
  min-height: 50px;
  margin-bottom: 17px;
}

body.marga-router-os .marga-os-service-heading > div,
body.marga-router-os .marga-os-shortcuts-heading > div {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

body.marga-router-os .marga-os-service-heading > a {
  display: inline-grid;
  place-items: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(70, 112, 166, 0.32);
  border-radius: 13px;
  color: #a9bde0 !important;
  background: rgba(6, 20, 39, 0.58);
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 600;
}

body.marga-router-os .marga-os-service-heading > a:hover {
  border-color: rgba(56, 154, 255, 0.58);
  color: #fff !important;
}

body.marga-router-os .marga-os-service-panel--hotspot .marga-os-service-icon {
  color: #51bcff;
}

body.marga-router-os .marga-os-service-panel--pppoe .marga-os-service-icon {
  border-color: rgba(130, 85, 228, 0.25);
  color: #a273ff;
  background: rgba(50, 30, 111, 0.53);
}

body.marga-router-os .marga-os-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

body.marga-router-os .marga-os-metric {
  --os-metric-color: 42, 168, 255;
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-content: start;
  min-width: 0;
  min-height: 165px;
  overflow: hidden;
  padding: 20px;
  border: 1px solid rgba(var(--os-metric-color), 0.32);
  border-radius: 18px;
  color: var(--os-text) !important;
  background:
    radial-gradient(circle at 94% 12%, rgba(var(--os-metric-color), 0.1), transparent 34%),
    linear-gradient(145deg, rgba(8, 29, 51, 0.96), rgba(6, 20, 38, 0.97));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.032);
  text-decoration: none !important;
  transition: border-color 180ms ease, transform 180ms ease, background 180ms ease;
}

body.marga-router-os .marga-os-metric:hover,
body.marga-router-os .marga-os-metric:focus-visible {
  border-color: rgba(var(--os-metric-color), 0.6);
  background:
    radial-gradient(circle at 94% 12%, rgba(var(--os-metric-color), 0.15), transparent 38%),
    linear-gradient(145deg, rgba(10, 36, 63, 0.98), rgba(7, 23, 42, 0.98));
  outline: none;
  transform: translateY(-2px);
}

body.marga-router-os .marga-os-metric--green { --os-metric-color: 25, 214, 155; }
body.marga-router-os .marga-os-metric--orange { --os-metric-color: 247, 166, 10; }
body.marga-router-os .marga-os-metric--pink { --os-metric-color: 240, 58, 157; }
body.marga-router-os .marga-os-metric--cyan { --os-metric-color: 34, 211, 238; }
body.marga-router-os .marga-os-metric--purple { --os-metric-color: 151, 103, 255; }

body.marga-router-os .marga-os-metric-icon {
  position: relative;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(var(--os-metric-color), 0.54);
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(145deg, rgba(var(--os-metric-color), 0.9), rgba(var(--os-metric-color), 0.48));
  box-shadow: 0 8px 20px rgba(var(--os-metric-color), 0.17), inset 0 1px rgba(255, 255, 255, 0.18);
  font-size: 21px;
}

body.marga-router-os .marga-os-metric-copy {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  min-width: 0;
  padding: 1px 0 0 12px;
}

body.marga-router-os .marga-os-metric-copy small {
  width: 100%;
  overflow: hidden;
  color: #9eb4d8;
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.marga-router-os .marga-os-metric-copy strong {
  max-width: 100%;
  margin-top: 19px;
  overflow-wrap: anywhere;
  color: #fff;
  font-size: clamp(28px, 3.2vw, 41px);
  font-weight: 760;
  line-height: 1;
  letter-spacing: -0.6px;
}

body.marga-router-os .marga-os-metric-copy > span {
  margin-top: 9px;
  color: #94a9cf;
  font-size: 14px;
  line-height: 1.25;
}

body.marga-router-os .marga-os-pattern {
  position: absolute;
  z-index: 1;
  right: 20px;
  bottom: 22px;
  display: block;
  width: 120px;
  height: 68px;
  opacity: 0.15;
  color: rgb(var(--os-metric-color));
  pointer-events: none;
}

body.marga-router-os .marga-os-pattern--bars {
  background: repeating-linear-gradient(90deg, transparent 0 8px, currentColor 8px 13px);
  clip-path: polygon(0 100%, 0 72%, 10% 72%, 10% 52%, 21% 52%, 21% 63%, 32% 63%, 32% 39%, 43% 39%, 43% 58%, 54% 58%, 54% 22%, 65% 22%, 65% 42%, 76% 42%, 76% 8%, 87% 8%, 87% 31%, 100% 31%, 100% 100%);
}

body.marga-router-os .marga-os-pattern--wave::before,
body.marga-router-os .marga-os-pattern--wave::after {
  position: absolute;
  inset: 16px 0 auto;
  height: 34px;
  border-top: 5px solid currentColor;
  border-radius: 50%;
  content: "";
  transform: rotate(-7deg);
}

body.marga-router-os .marga-os-pattern--wave::after {
  inset: 30px 0 auto 24px;
  transform: rotate(8deg);
}

body.marga-router-os .marga-os-pattern--user::before,
body.marga-router-os .marga-os-pattern--ticket::before {
  position: absolute;
  right: 5px;
  bottom: -5px;
  color: currentColor;
  content: "\f2bd";
  font-family: FontAwesome;
  font-size: 70px;
}

body.marga-router-os .marga-os-pattern--ticket::before {
  content: "\f145";
  transform: rotate(-12deg);
}

/* Shortcuts and original operational modules ------------------------------ */

body.marga-router-os .marga-os-shortcuts {
  padding: 20px 22px;
}

body.marga-router-os .marga-os-shortcuts-heading {
  justify-content: space-between;
  margin-bottom: 16px;
}

body.marga-router-os .marga-os-shortcuts-heading > span {
  color: #8299bf;
  font-size: 12px;
}

body.marga-router-os .marga-os-shortcuts-icon {
  color: #f6b52b;
  background: rgba(106, 68, 4, 0.34);
}

body.marga-router-os .marga-os-shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

body.marga-router-os .marga-os-shortcuts-grid a {
  display: flex;
  align-items: center;
  gap: 9px;
  justify-content: center;
  min-width: 0;
  min-height: 52px;
  padding: 9px;
  border: 1px solid rgba(70, 111, 161, 0.23);
  border-radius: 13px;
  color: #aabddd !important;
  background: rgba(9, 27, 49, 0.72);
  text-decoration: none !important;
  font-size: 12px;
  font-weight: 650;
}

body.marga-router-os .marga-os-shortcuts-grid a:hover {
  border-color: rgba(51, 158, 255, 0.47);
  color: #fff !important;
}

body.marga-router-os .marga-os-shortcuts-grid i {
  color: #5ab9ff;
  font-size: 17px;
}

body.marga-router-os .marga-os-operations {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(310px, 0.7fr);
  gap: 22px;
  min-width: 0;
}

body.marga-router-os .marga-os-operations .marga-dashboard-main,
body.marga-router-os .marga-os-operations .marga-dashboard-aside {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start;
  width: 100% !important;
  min-width: 0;
  gap: 18px;
}

body.marga-router-os .marga-os-operations .card,
body.marga-router-os .marga-os-operations .marga-income-card {
  overflow: hidden;
  border: 1px solid rgba(74, 115, 166, 0.28) !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, rgba(8, 26, 47, 0.97), rgba(5, 18, 35, 0.98)) !important;
  box-shadow: 0 15px 34px rgba(0, 5, 17, 0.2), inset 0 1px rgba(255, 255, 255, 0.03) !important;
}

body.marga-router-os .marga-os-operations .card-header {
  min-height: 66px !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid rgba(79, 119, 168, 0.2) !important;
  background: rgba(8, 27, 49, 0.64) !important;
}

body.marga-router-os .marga-os-operations .card-header h3,
body.marga-router-os .marga-os-operations .card-header h3 a {
  color: #eff5ff !important;
  font-size: 16px !important;
  font-weight: 700;
}

body.marga-router-os .marga-chart-card #trafficMonitor {
  min-height: 310px !important;
}

body.marga-router-os .marga-os-operations .marga-income-card {
  position: relative;
  min-height: 0;
  padding: 0 !important;
  border-color: rgba(217, 144, 20, 0.88) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(34, 211, 238, 0.1), transparent 35%),
    linear-gradient(145deg, #101c31, #0a1528) !important;
  box-shadow: 0 14px 30px rgba(0, 5, 17, 0.24), inset 0 1px rgba(255, 255, 255, 0.04) !important;
}

body.marga-router-os .marga-os-operations .marga-income-card::before {
  display: block !important;
  position: absolute;
  top: -1px;
  left: 12px;
  width: 66px;
  height: 2px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, #22d3ee, #f59e0b);
  content: "";
}

body.marga-router-os #r_4.marga-income-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  align-items: stretch;
  gap: 14px;
}

body.marga-router-os #r_4.marga-income-dashboard-grid > .marga-income-card {
  height: 100%;
  margin: 0 !important;
  box-sizing: border-box;
}

body.marga-router-os .marga-os-operations .marga-pppoe-income-card {
  border-color: rgba(34, 211, 238, 0.68) !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(139, 92, 246, 0.15), transparent 38%),
    linear-gradient(145deg, #101c31, #0a1528) !important;
}

body.marga-router-os .marga-os-operations .marga-pppoe-income-card::before {
  background: linear-gradient(90deg, #22d3ee, #8b5cf6);
}

body.marga-router-os .marga-income-shell {
  box-sizing: border-box;
  padding: 9px 10px 10px;
}

body.marga-router-os .marga-income-header {
  display: flex;
  min-height: 35px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 1px 7px;
}

body.marga-router-os .marga-income-heading {
  display: grid;
  gap: 2px;
  min-width: 0;
}

body.marga-router-os .marga-income-heading span {
  color: #22d3ee;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1;
}

body.marga-router-os .marga-income-heading strong {
  overflow: hidden;
  color: #f8fafc;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.marga-router-os .marga-income-report {
  flex: 0 0 auto;
  color: #9cabc0;
  font-size: 9px;
  font-weight: 700;
}

body.marga-router-os a.marga-income-report:hover {
  color: #67e8f9 !important;
}

body.marga-router-os .marga-income-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

body.marga-router-os .marga-income-metric {
  display: flex;
  min-width: 0;
  min-height: 64px;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: 7px 9px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 9px;
  background: rgba(8, 27, 43, 0.84);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

body.marga-router-os .marga-income-metric > span {
  overflow: hidden;
  color: #9aabc0;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.marga-router-os .marga-income-metric > strong {
  display: block;
  overflow: hidden;
  margin: 3px 0 2px;
  color: #e2e8f0;
  font-size: clamp(15px, 1.45vw, 20px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.marga-router-os .marga-income-metric > small {
  overflow: hidden;
  color: #8796aa;
  font-size: 8px;
  font-weight: 500;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.marga-router-os .marga-income-metric.is-voucher-today {
  border-color: rgba(16, 185, 129, 0.68);
  background: linear-gradient(145deg, rgba(7, 63, 58, 0.52), rgba(8, 34, 44, 0.9));
}

body.marga-router-os .marga-income-metric.is-voucher-today > strong {
  color: #47e8ae;
}

body.marga-router-os .marga-income-metric.is-voucher-month {
  border-color: rgba(6, 182, 212, 0.72);
  background: linear-gradient(145deg, rgba(4, 66, 83, 0.56), rgba(8, 36, 53, 0.92));
}

body.marga-router-os .marga-income-metric.is-voucher-month > strong {
  color: #38d9f5;
}

body.marga-router-os .marga-income-metric.is-income-today {
  border-color: rgba(234, 179, 8, 0.7);
  background: linear-gradient(145deg, rgba(79, 62, 14, 0.48), rgba(32, 38, 43, 0.92));
}

body.marga-router-os .marga-income-metric.is-income-today > strong {
  color: #ffd34e;
}

body.marga-router-os .marga-income-metric.is-income-month {
  border-color: rgba(139, 92, 246, 0.72);
  background: linear-gradient(145deg, rgba(64, 38, 95, 0.54), rgba(29, 29, 57, 0.94));
}

body.marga-router-os .marga-income-metric.is-income-month > strong {
  color: #d49aff;
}

body.marga-router-os .marga-income-metric.is-pppoe-customers {
  border-color: rgba(56, 189, 248, 0.66);
  background: linear-gradient(145deg, rgba(7, 57, 83, 0.54), rgba(8, 31, 50, 0.92));
}

body.marga-router-os .marga-income-metric.is-pppoe-customers > strong {
  color: #67d8ff;
}

body.marga-router-os .marga-income-metric.is-pppoe-paid {
  border-color: rgba(16, 185, 129, 0.68);
  background: linear-gradient(145deg, rgba(7, 63, 58, 0.52), rgba(8, 34, 44, 0.9));
}

body.marga-router-os .marga-income-metric.is-pppoe-paid > strong {
  color: #47e8ae;
}

body.marga-router-os .marga-income-metric.is-pppoe-unpaid {
  border-color: rgba(245, 158, 11, 0.7);
  background: linear-gradient(145deg, rgba(79, 62, 14, 0.48), rgba(32, 38, 43, 0.92));
}

body.marga-router-os .marga-income-metric.is-pppoe-unpaid > strong {
  color: #ffd34e;
}

body.marga-router-os .marga-income-metric.is-pppoe-income {
  border-color: rgba(139, 92, 246, 0.72);
  background: linear-gradient(145deg, rgba(64, 38, 95, 0.54), rgba(29, 29, 57, 0.94));
}

body.marga-router-os .marga-income-metric.is-pppoe-income > strong {
  color: #d49aff;
}

body.marga-router-os .marga-income-loading {
  grid-column: 1 / -1;
  display: flex;
  min-height: 135px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #9aabc0;
  font-size: 11px;
}

body.marga-router-os .marga-income-loading .fa-spin {
  color: #22d3ee;
}

@media screen and (max-width: 420px) {
  body.marga-router-os #r_4.marga-income-dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.marga-router-os .marga-income-shell {
    padding: 8px;
  }

  body.marga-router-os .marga-income-metrics {
    gap: 6px;
  }

  body.marga-router-os .marga-income-metric {
    min-height: 60px;
    padding: 7px 8px;
  }

  body.marga-router-os .marga-income-metric > strong {
    font-size: 15px;
  }
}

body.marga-router-os .marga-log-card .overflow {
  max-height: 390px;
}

body.marga-router-os .marga-log-card table {
  color: #b9c9e2;
}

body.marga-router-os .marga-log-stack {
  display: grid;
  min-width: 0;
  align-content: start;
  grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
  grid-auto-rows: max-content;
  align-items: stretch;
  gap: 14px;
}

body.marga-router-os .marga-log-stack > .marga-log-card {
  min-width: 0;
  height: 100%;
  align-self: stretch;
}

body.marga-router-os .marga-pppoe-log-card .card-body {
  height: auto !important;
  min-height: 0 !important;
}

body.marga-router-os .marga-pppoe-log-card .overflow {
  height: auto !important;
  max-height: 190px !important;
}

body.marga-router-os .marga-pppoe-log-card .marga-log-empty {
  height: 76px !important;
  max-height: 76px !important;
}

body.marga-router-os .marga-pppoe-log-card .card-header h3 a > i {
  color: #a78bfa;
}

/* Responsive -------------------------------------------------------------- */

@media screen and (max-width: 1280px) {
  body.marga-router-os .marga-os-panel {
    padding: 20px;
  }

  body.marga-router-os .marga-os-resource > small {
    font-size: 10px;
  }

  body.marga-router-os .marga-os-operations {
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.7fr);
  }
}

@media screen and (max-width: 1024px) {
  body.marga-router-os .marga-os-header {
    padding: 0 22px !important;
  }

  body.marga-router-os .marga-os-panel {
    min-height: 390px;
    padding: 18px;
  }

  body.marga-router-os .marga-os-clock-card {
    min-height: 160px;
  }

  body.marga-router-os .marga-os-metric {
    min-height: 155px;
  }

  body.marga-router-os .marga-os-shortcuts-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.marga-router-os .marga-os-operations {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media screen and (max-width: 768px) {
  body.marga-router-os .marga-os-header {
    height: 76px !important;
    min-height: 76px;
    padding: 0 14px !important;
  }

  body.marga-router-os .marga-os-brand {
    gap: 10px;
  }

  body.marga-router-os .marga-os-brand-mark {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    font-size: 25px;
  }

  body.marga-router-os .marga-os-brand-mark::before {
    top: 7px;
    left: 7px;
    width: 18px;
    height: 18px;
  }

  body.marga-router-os .marga-os-brand-copy strong {
    font-size: 19px;
  }

  body.marga-router-os .marga-os-brand-copy small {
    margin-top: 3px;
    font-size: 10px;
  }

  body.marga-router-os .marga-os-header-actions {
    gap: 7px;
  }

  body.marga-router-os .marga-os-online {
    width: 32px;
    min-height: 40px;
    margin-right: 0;
    padding: 0;
    background: transparent;
  }

  body.marga-router-os .marga-os-online span {
    display: none;
  }

  body.marga-router-os .marga-os-icon-button {
    flex-basis: 42px;
    width: 42px !important;
    min-width: 42px;
    height: 42px !important;
    min-height: 42px;
    border-radius: 13px !important;
    font-size: 17px !important;
  }

  body.marga-router-os .marga-os-more {
    padding-left: 0;
    border-left: 0;
  }

  body.marga-router-os #main {
    padding: 92px 10px calc(104px + env(safe-area-inset-bottom)) !important;
  }

  body.marga-router-os .marga-os-dashboard {
    gap: 10px;
  }

  body.marga-router-os .marga-os-overview-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  body.marga-router-os .marga-os-panel {
    min-height: 0;
    padding: 18px;
    border-radius: 19px;
  }

  body.marga-router-os .marga-os-services {
    gap: 14px;
  }

  body.marga-router-os .marga-os-service-panel,
  body.marga-router-os .marga-os-shortcuts {
    padding: 17px;
    border-radius: 19px;
  }

  body.marga-router-os .marga-os-section-heading h2,
  body.marga-router-os .marga-os-service-heading h2,
  body.marga-router-os .marga-os-shortcuts-heading h2 {
    font-size: 18px;
  }

  body.marga-router-os .marga-os-clock-card > strong {
    font-size: clamp(38px, 12vw, 52px);
  }

  body.marga-router-os .marga-os-metric {
    min-height: 145px;
    padding: 16px;
  }

  body.marga-router-os .marga-os-metric-copy strong {
    margin-top: 16px;
    font-size: clamp(27px, 8vw, 37px);
  }

  body.marga-router-os .marga-os-pattern {
    right: 12px;
    width: 92px;
  }

  body.marga-router-os .marga-os-dock {
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    width: calc(100vw - 16px) !important;
    height: 78px !important;
    min-height: 78px;
    padding: 7px !important;
    border-radius: 22px !important;
  }

  body.marga-router-os .marga-os-dock a {
    gap: 5px;
    min-height: 62px;
    padding: 6px 2px !important;
    border-radius: 16px;
  }

  body.marga-router-os .marga-os-dock a i {
    font-size: 21px;
  }

  body.marga-router-os .marga-os-dock a span {
    font-size: 10px;
  }
}

@media screen and (max-width: 480px) {
  body.marga-router-os #main {
    padding: 84px 6px calc(92px + env(safe-area-inset-bottom)) !important;
  }

  body.marga-router-os .marga-os-dashboard,
  body.marga-router-os .marga-os-services {
    gap: 10px;
  }

  body.marga-router-os .marga-os-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body.marga-router-os .marga-os-panel {
    min-height: 0;
    padding: 10px;
    border-radius: 16px;
  }

  body.marga-router-os .marga-os-section-heading {
    gap: 6px;
    min-height: 30px;
    margin-bottom: 9px;
  }

  body.marga-router-os .marga-os-section-heading h2 {
    font-size: 12px;
    letter-spacing: -0.2px;
    white-space: nowrap;
  }

  body.marga-router-os .marga-os-heading-icon {
    flex-basis: 29px;
    width: 29px;
    height: 29px;
    border-radius: 9px;
    font-size: 12px;
  }

  body.marga-router-os .marga-os-clock-card {
    min-height: 102px;
    padding: 11px;
    border-radius: 14px;
  }

  body.marga-router-os .marga-os-clock-card::after {
    right: 8px;
    width: 32px;
    height: 32px;
    font-size: 15px;
  }

  body.marga-router-os .marga-os-clock-card > span {
    font-size: 9px;
  }

  body.marga-router-os .marga-os-clock-card > strong {
    margin-top: 9px;
    font-size: 26px;
  }

  body.marga-router-os .marga-os-clock-card > small {
    margin-top: 9px;
    font-size: 9px;
    line-height: 1.3;
  }

  body.marga-router-os .marga-os-brand-copy strong {
    font-size: 17px;
    letter-spacing: -0.4px;
  }

  body.marga-router-os .marga-os-brand-copy small {
    font-size: 9px;
  }

  body.marga-router-os .marga-os-online {
    display: inline-flex;
    width: 24px;
    min-height: 39px;
  }

  body.marga-router-os .marga-os-online i {
    width: 10px;
    height: 10px;
  }

  body.marga-router-os .marga-os-header-actions {
    gap: 5px;
  }

  body.marga-router-os .marga-os-icon-button {
    flex-basis: 39px;
    width: 39px !important;
    min-width: 39px;
    height: 39px !important;
    min-height: 39px;
  }

  body.marga-router-os .marga-os-overview-minis {
    gap: 6px;
    margin-top: 6px;
  }

  body.marga-router-os .marga-os-info-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-content: center;
    justify-items: start;
    min-height: 78px;
    padding: 7px;
    border-radius: 12px;
  }

  body.marga-router-os .marga-os-info-icon {
    grid-row: auto;
    width: 22px;
    height: 22px;
    margin-bottom: 4px;
    border-radius: 7px;
    font-size: 10px;
  }

  body.marga-router-os .marga-os-info-card small {
    font-size: 8px;
  }

  body.marga-router-os .marga-os-info-card strong {
    margin-top: 3px;
    font-size: 9px;
    line-height: 1.15;
    white-space: nowrap;
  }

  body.marga-router-os .marga-os-resources-grid {
    min-height: 100px;
    gap: 2px;
    padding: 9px 2px 7px;
    border-radius: 13px;
  }

  body.marga-router-os .marga-os-gauge {
    width: 44px;
    height: 44px;
  }

  body.marga-router-os .marga-os-gauge strong {
    font-size: 12px;
  }

  body.marga-router-os .marga-os-resource > span {
    margin-top: 3px;
    font-size: 8px;
  }

  body.marga-router-os .marga-os-resource > small {
    margin-top: 3px;
    font-size: 7px;
  }

  body.marga-router-os .marga-os-uptime-row {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 5px;
    min-height: 44px;
    margin-top: 6px;
    padding: 6px 7px;
    border-radius: 10px;
  }

  body.marga-router-os .marga-os-uptime-row div {
    gap: 2px;
  }

  body.marga-router-os .marga-os-uptime-row small,
  body.marga-router-os .marga-os-system-meta small {
    font-size: 7px;
  }

  body.marga-router-os .marga-os-uptime-row strong {
    font-size: 9px;
  }

  body.marga-router-os .marga-os-uptime-row svg {
    height: 25px;
  }

  body.marga-router-os .marga-os-system-meta {
    gap: 5px;
    margin-top: 5px;
  }

  body.marga-router-os .marga-os-system-meta article {
    gap: 5px;
    min-height: 40px;
    padding: 5px;
    border-radius: 9px;
  }

  body.marga-router-os .marga-os-meta-icon {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    font-size: 10px;
  }

  body.marga-router-os .marga-os-system-meta strong {
    overflow: visible;
    font-size: 7.5px;
    line-height: 1.15;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.marga-router-os .marga-os-service-heading > a {
    min-height: 32px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: 9px;
  }

  body.marga-router-os .marga-os-service-panel,
  body.marga-router-os .marga-os-shortcuts {
    padding: 12px;
    border-radius: 16px;
  }

  body.marga-router-os .marga-os-service-heading {
    min-height: 36px;
    margin-bottom: 10px;
  }

  body.marga-router-os .marga-os-service-heading > div,
  body.marga-router-os .marga-os-shortcuts-heading > div {
    gap: 8px;
  }

  body.marga-router-os .marga-os-service-heading h2,
  body.marga-router-os .marga-os-shortcuts-heading h2 {
    font-size: 16px;
  }

  body.marga-router-os .marga-os-service-icon,
  body.marga-router-os .marga-os-shortcuts-icon {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 14px;
  }

  body.marga-router-os .marga-os-metric-grid {
    gap: 8px;
  }

  body.marga-router-os .marga-os-metric {
    grid-template-columns: 36px minmax(0, 1fr);
    min-height: 96px;
    padding: 10px;
    border-radius: 14px;
  }

  body.marga-router-os .marga-os-metric-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 15px;
  }

  body.marga-router-os .marga-os-metric-copy {
    padding-left: 7px;
  }

  body.marga-router-os .marga-os-metric-copy small {
    font-size: 9px;
  }

  body.marga-router-os .marga-os-metric-copy strong {
    margin-top: 11px;
    font-size: 20px;
  }

  body.marga-router-os .marga-os-metric-copy > span {
    margin-top: 5px;
    font-size: 9px;
  }

  body.marga-router-os .marga-os-pattern {
    right: 5px;
    bottom: 7px;
    width: 52px;
    height: 36px;
  }

  body.marga-router-os .marga-os-shortcuts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.marga-router-os .marga-os-shortcuts-heading > span {
    display: none;
  }

  body.marga-router-os .marga-os-shortcuts-heading {
    margin-bottom: 10px;
  }

  body.marga-router-os .marga-os-dock {
    bottom: calc(6px + env(safe-area-inset-bottom)) !important;
    width: calc(100vw - 12px) !important;
    height: 70px !important;
    min-height: 70px;
    padding: 5px !important;
    border-radius: 19px !important;
  }

  body.marga-router-os .marga-os-dock a {
    gap: 4px;
    min-height: 58px;
    padding: 5px 1px !important;
    border-radius: 14px;
  }

  body.marga-router-os .marga-os-dock a i {
    font-size: 19px;
  }

  body.marga-router-os .marga-os-dock a span {
    font-size: 8px;
  }
}

@media screen and (max-width: 380px) {
  body.marga-router-os .marga-os-header {
    padding: 0 9px !important;
  }

  body.marga-router-os .marga-os-brand-mark {
    flex-basis: 41px;
    width: 41px;
    height: 41px;
    font-size: 22px;
  }

  body.marga-router-os .marga-os-brand-copy strong {
    font-size: 15px;
  }

  body.marga-router-os .marga-os-brand-copy small {
    display: none;
  }

  body.marga-router-os .marga-os-panel {
    padding: 8px;
    border-radius: 14px;
  }

  body.marga-router-os .marga-os-section-heading {
    gap: 5px;
    min-height: 26px;
    margin-bottom: 7px;
  }

  body.marga-router-os .marga-os-section-heading h2 {
    font-size: 11px;
  }

  body.marga-router-os .marga-os-heading-icon {
    flex-basis: 25px;
    width: 25px;
    height: 25px;
    border-radius: 8px;
    font-size: 10px;
  }

  body.marga-router-os .marga-os-clock-card {
    min-height: 80px;
    padding: 9px;
    border-radius: 11px;
  }

  body.marga-router-os .marga-os-clock-card > strong {
    margin-top: 7px;
    font-size: 22px;
    letter-spacing: 0;
  }

  body.marga-router-os .marga-os-clock-card > small {
    margin-top: 7px;
    font-size: 8px;
  }

  body.marga-router-os .marga-os-overview-minis {
    gap: 5px;
    margin-top: 4px;
  }

  body.marga-router-os .marga-os-info-card {
    min-height: 58px;
    padding: 6px;
  }

  body.marga-router-os .marga-os-info-icon {
    width: 20px;
    height: 20px;
    margin-bottom: 3px;
    font-size: 9px;
  }

  body.marga-router-os .marga-os-resources-grid {
    min-height: 68px;
    padding: 4px 1px;
  }

  body.marga-router-os .marga-os-gauge {
    width: 34px;
    height: 34px;
  }

  body.marga-router-os .marga-os-resource > span {
    margin-top: 2px;
    font-size: 7px;
  }

  body.marga-router-os .marga-os-resource > small {
    margin-top: 2px;
    font-size: 6.5px;
  }

  body.marga-router-os .marga-os-uptime-row {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 3px;
    min-height: 32px;
    margin-top: 3px;
    padding: 3px 5px;
  }

  body.marga-router-os .marga-os-uptime-row small {
    font-size: 6.5px;
  }

  body.marga-router-os .marga-os-uptime-row strong {
    font-size: 8px;
  }

  body.marga-router-os .marga-os-uptime-row svg {
    height: 18px;
  }

  body.marga-router-os .marga-os-system-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
    margin-top: 3px;
  }

  body.marga-router-os .marga-os-system-meta article {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 3px;
    min-height: 30px;
    padding: 3px;
  }

  body.marga-router-os .marga-os-system-meta article > div {
    gap: 2px;
  }

  body.marga-router-os .marga-os-meta-icon {
    flex-basis: 16px;
    width: 16px;
    height: 16px;
    font-size: 7px;
  }

  body.marga-router-os .marga-os-system-meta small,
  body.marga-router-os .marga-os-system-meta strong {
    font-size: 6.5px;
    line-height: 1.05;
  }
}

@media screen and (max-width: 360px) {
  body.marga-router-os .marga-os-header {
    height: 64px !important;
    min-height: 64px;
    padding: 0 6px !important;
  }

  body.marga-router-os .marga-os-brand {
    gap: 6px;
  }

  body.marga-router-os .marga-os-brand-mark {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 19px;
  }

  body.marga-router-os .marga-os-brand-mark::before {
    top: 5px;
    left: 5px;
    width: 14px;
    height: 14px;
  }

  body.marga-router-os .marga-os-brand-copy strong {
    font-size: 12px;
    letter-spacing: -0.25px;
  }

  body.marga-router-os .marga-os-online {
    display: none;
  }

  body.marga-router-os .marga-os-header-actions {
    gap: 3px;
  }

  body.marga-router-os .marga-os-icon-button {
    flex-basis: 32px;
    width: 32px !important;
    min-width: 32px;
    height: 32px !important;
    min-height: 32px;
    border-radius: 10px !important;
    font-size: 14px !important;
  }

  body.marga-router-os #main {
    padding-top: 72px !important;
  }

  body.marga-router-os .marga-os-overview-grid,
  body.marga-router-os .marga-os-metric-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.marga-router-os .marga-os-metric {
    min-height: 132px;
  }

  body.marga-router-os .marga-os-dock a span {
    font-size: 7px;
  }
}

@media screen and (max-width: 300px) {
  body.marga-router-os .marga-os-dock a span {
    font-size: 6px;
    letter-spacing: -0.15px;
  }
}

/* Compact Hotspot and PPPoE cards on phones. */
@media screen and (max-width: 480px) {
  body.marga-router-os .marga-os-services {
    gap: 6px;
  }

  body.marga-router-os .marga-os-service-panel {
    padding: 8px;
    border-radius: 13px;
  }

  body.marga-router-os .marga-os-service-heading {
    min-height: 26px;
    margin-bottom: 6px;
  }

  body.marga-router-os .marga-os-service-heading > div {
    gap: 6px;
  }

  body.marga-router-os .marga-os-service-heading h2 {
    font-size: 12px;
  }

  body.marga-router-os .marga-os-service-icon {
    flex-basis: 24px;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 10px;
  }

  body.marga-router-os .marga-os-service-heading > a {
    min-height: 24px;
    padding: 0 7px;
    border-radius: 7px;
    font-size: 7px;
  }

  body.marga-router-os .marga-os-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  body.marga-router-os .marga-os-metric {
    grid-template-columns: 26px minmax(0, 1fr);
    min-height: 70px;
    padding: 7px;
    border-radius: 10px;
  }

  body.marga-router-os .marga-os-metric-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 11px;
  }

  body.marga-router-os .marga-os-metric-copy {
    padding-left: 5px;
  }

  body.marga-router-os .marga-os-metric-copy small {
    font-size: 7px;
  }

  body.marga-router-os .marga-os-metric-copy strong {
    margin-top: 5px;
    font-size: 16px;
  }

  body.marga-router-os .marga-os-metric-copy > span {
    margin-top: 3px;
    font-size: 7px;
  }

  body.marga-router-os .marga-os-pattern {
    right: 3px;
    bottom: 4px;
    width: 35px;
    height: 25px;
  }
}

/* Desktop workspace ------------------------------------------------------- */
/* Keep the phone experience intact while giving wide screens a permanent
   navigation rail, compact top bar, and denser multi-column dashboard. */
@media screen and (min-width: 1025px) {
  body.marga-router-os {
    --os-desktop-sidebar: 270px;
    --os-desktop-sidebar-collapsed: 76px;
  }

  body.marga-router-os.marga-os-sidebar-collapsed {
    --os-desktop-sidebar: var(--os-desktop-sidebar-collapsed);
  }

  body.marga-router-os .marga-os-header {
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 56px !important;
    min-height: 56px;
    padding: 0 14px !important;
  }

  body.marga-router-os .marga-os-brand {
    gap: 9px;
  }

  body.marga-router-os .marga-os-brand-mark {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 19px;
  }

  body.marga-router-os .marga-os-brand-mark::before {
    top: 5px;
    left: 5px;
    width: 14px;
    height: 14px;
  }

  body.marga-router-os .marga-os-brand-copy strong {
    font-size: 16px;
    letter-spacing: -0.35px;
  }

  body.marga-router-os .marga-os-brand-copy small {
    margin-top: 2px;
    font-size: 8px;
  }

  body.marga-router-os .marga-os-header-actions {
    gap: 8px;
  }

  body.marga-router-os .marga-os-online {
    min-height: 34px;
    margin-right: 4px;
    padding: 0 11px;
    font-size: 13px;
  }

  body.marga-router-os .marga-os-online i {
    width: 9px;
    height: 9px;
  }

  body.marga-router-os .marga-os-icon-button {
    flex-basis: 36px;
    width: 36px !important;
    min-width: 36px;
    height: 36px !important;
    min-height: 36px;
    border-radius: 10px !important;
    font-size: 15px !important;
  }

  body.marga-router-os #sidenav.sidenav {
    z-index: 1300 !important;
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: var(--os-desktop-sidebar) !important;
    height: calc(100vh - 56px) !important;
    margin: 56px 0 0 !important;
    padding: 8px 10px 7px !important;
    overflow: visible;
    border-right: 1px solid rgba(96, 137, 190, 0.2) !important;
    color: #d9e4f5;
    background: linear-gradient(180deg, #071426 0%, #061225 52%, #050f1e 100%) !important;
    box-shadow: 14px 0 36px rgba(0, 4, 15, 0.24) !important;
    transform: translateX(0) !important;
    transition: width 200ms ease, padding 200ms ease, box-shadow 200ms ease !important;
  }

  body.marga-router-os #sidenav .marga-mobile-sidebar-branding {
    display: none !important;
  }

  body.marga-router-os .marga-desktop-sidebar-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    min-height: 40px;
    padding: 0 2px 5px;
    border-bottom: 1px solid rgba(105, 142, 188, 0.14);
  }

  body.marga-router-os .marga-desktop-sidebar-brand {
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: #f7f9fd !important;
    background: transparent !important;
    text-decoration: none !important;
  }

  body.marga-router-os .marga-desktop-sidebar-logo {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border: 1px solid rgba(83, 142, 216, 0.24);
    border-radius: 9px;
    background: rgba(13, 35, 65, 0.86);
  }

  body.marga-router-os .marga-desktop-sidebar-logo img {
    display: block;
    width: 26px;
    height: 26px;
    object-fit: contain;
  }

  body.marga-router-os .marga-desktop-sidebar-logo img.marga-mikrotik-symbol {
    width: 20px;
    height: 23px;
    opacity: 0.9;
    filter: invert(1);
  }

  body.marga-router-os .marga-desktop-sidebar-brand-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  body.marga-router-os .marga-desktop-sidebar-brand-copy strong {
    overflow: hidden;
    font-size: 13px;
    font-weight: 780;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.marga-router-os .marga-desktop-sidebar-brand-copy small {
    overflow: hidden;
    color: #7f94b3;
    font-size: 8px;
    font-weight: 550;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.marga-router-os .marga-desktop-sidebar-collapse {
    display: inline-grid;
    flex: 0 0 30px;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(105, 145, 194, 0.22);
    border-radius: 9px;
    color: #899fbe;
    background: rgba(9, 27, 50, 0.82);
    cursor: pointer;
    transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
  }

  body.marga-router-os .marga-desktop-sidebar-collapse:hover {
    border-color: rgba(64, 154, 255, 0.45);
    color: #d9e9ff;
    background: rgba(18, 48, 83, 0.86);
  }

  body.marga-router-os .marga-desktop-sidebar-collapse i {
    transition: transform 200ms ease;
  }

  body.marga-router-os .marga-desktop-router-card {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 78px;
    margin: 10px 0 12px;
    padding: 10px;
    border: 1px solid rgba(94, 137, 190, 0.22);
    border-radius: 13px;
    background: rgba(9, 28, 52, 0.7);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
  }

  body.marga-router-os .marga-desktop-router-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(54, 143, 234, 0.25);
    border-radius: 10px;
    color: #79aee9;
    background: rgba(18, 57, 99, 0.68);
    font-size: 16px;
  }

  body.marga-router-os .marga-desktop-router-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  body.marga-router-os .marga-desktop-router-copy > small {
    color: #7187a6;
    font-size: 8px;
    font-weight: 720;
    letter-spacing: 0.08em;
  }

  body.marga-router-os .marga-desktop-router-copy > strong {
    overflow: hidden;
    color: #f3f7fd;
    font-size: 13px;
    font-weight: 720;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.marga-router-os .marga-desktop-router-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #8196b4;
    font-size: 9px;
    font-weight: 620;
  }

  body.marga-router-os .marga-desktop-router-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f05b6b;
    box-shadow: 0 0 0 3px rgba(240, 91, 107, 0.1);
  }

  body.marga-router-os .marga-desktop-router-card.is-online .marga-desktop-router-status i {
    background: #20c98b;
    box-shadow: 0 0 0 3px rgba(32, 201, 139, 0.1);
  }

  body.marga-router-os .marga-sidebar-menu-scroll {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: 0 2px 2px 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: rgba(82, 112, 151, 0.42) transparent;
    scrollbar-width: thin;
  }

  body.marga-router-os .marga-sidebar-menu-scroll::-webkit-scrollbar {
    width: 3px;
  }

  body.marga-router-os .marga-sidebar-menu-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(82, 112, 151, 0.42);
  }

  body.marga-router-os #sidenav .marga-nav-label {
    flex: 0 0 auto;
    margin: 5px 9px 2px;
    color: #5f7493;
    font-size: 7px;
    font-weight: 760;
    line-height: 1.2;
    letter-spacing: 0.1em;
  }

  body.marga-router-os #sidenav .marga-desktop-only {
    display: block;
  }

  body.marga-router-os .marga-sidebar-menu-scroll > a,
  body.marga-router-os .marga-sidebar-menu-scroll > .dropdown-btn {
    position: relative;
    display: flex !important;
    flex: 0 0 auto;
    align-items: center;
    width: 100%;
    min-height: 30px !important;
    margin: 0;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #9aacc5 !important;
    background: transparent !important;
    font-size: 12px;
    font-weight: 590;
    line-height: 1.2;
    text-decoration: none !important;
    cursor: pointer;
    transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
  }

  body.marga-router-os .marga-sidebar-menu-scroll > a:hover,
  body.marga-router-os .marga-sidebar-menu-scroll > .dropdown-btn:hover {
    border-color: rgba(85, 135, 191, 0.18);
    color: #e5edf9 !important;
    background: rgba(20, 47, 79, 0.48) !important;
  }

  body.marga-router-os .marga-sidebar-menu-scroll > a.active,
  body.marga-router-os .marga-sidebar-menu-scroll > .dropdown-btn.active {
    border-color: rgba(48, 134, 230, 0.28);
    color: #eaf3ff !important;
    background: rgba(25, 75, 130, 0.34) !important;
  }

  body.marga-router-os .marga-sidebar-item--dashboard.active::before {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: -1px;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: #3d9eff;
    content: "";
  }

  body.marga-router-os #sidenav.sidenav .marga-sidebar-menu-scroll > a > i:first-child,
  body.marga-router-os #sidenav.sidenav .marga-sidebar-menu-scroll > .dropdown-btn > i:first-child {
    flex: 0 0 18px;
    width: 18px !important;
    height: 18px !important;
    margin: 0 8px 0 0 !important;
    color: var(--nav-icon-color, #7186a5) !important;
    border-radius: 0;
    background: transparent !important;
    font-size: 14px !important;
    line-height: 18px !important;
    text-align: center;
    transition: color 180ms ease;
  }

  body.marga-router-os #sidenav.sidenav .marga-sidebar-menu-scroll > a:hover > i:first-child,
  body.marga-router-os #sidenav.sidenav .marga-sidebar-menu-scroll > .dropdown-btn:hover > i:first-child {
    filter: brightness(1.2);
  }

  body.marga-router-os #sidenav.sidenav .marga-sidebar-menu-scroll > a.active > i:first-child,
  body.marga-router-os #sidenav.sidenav .marga-sidebar-menu-scroll > .dropdown-btn.active > i:first-child {
    filter: brightness(1.16);
  }

  body.marga-router-os .marga-sidebar-item--dashboard > i:first-child { --nav-icon-color: #4aa6ff; }
  body.marga-router-os .marga-sidebar-item--hotspot > i:first-child { --nav-icon-color: #22d3ee; }
  body.marga-router-os .marga-sidebar-item--pppoe > i:first-child { --nav-icon-color: #a78bfa; }
  body.marga-router-os .marga-sidebar-item--vouchers > i:first-child { --nav-icon-color: #f472b6; }
  body.marga-router-os .marga-sidebar-item--quick-print > i:first-child { --nav-icon-color: #fb923c; }
  body.marga-router-os .marga-sidebar-item--dhcp > i:first-child { --nav-icon-color: #34d399; }
  body.marga-router-os .marga-sidebar-item--traffic > i:first-child { --nav-icon-color: #38bdf8; }
  body.marga-router-os .marga-sidebar-item--pppoe-finance > i:first-child { --nav-icon-color: #34d399; }
  body.marga-router-os .marga-sidebar-item--report > i:first-child { --nav-icon-color: #facc15; }
  body.marga-router-os .marga-sidebar-item--log > i:first-child { --nav-icon-color: #60a5fa; }
  body.marga-router-os .marga-sidebar-item--system > i:first-child { --nav-icon-color: #2dd4bf; }
  body.marga-router-os .marga-sidebar-item--settings > i:first-child { --nav-icon-color: #c084fc; }
  body.marga-router-os .marga-sidebar-item--about > i:first-child { --nav-icon-color: #94a3b8; }
  body.marga-router-os .marga-sidebar-item--logout > i:first-child { --nav-icon-color: #fb7185; }

  body.marga-router-os #sidenav.sidenav .marga-sidebar-menu-scroll > .marga-sidebar-item > i:first-child {
    color: var(--nav-icon-color) !important;
  }

  body.marga-router-os .marga-sidebar-menu-scroll > .dropdown-btn > .fa-caret-down {
    flex: 0 0 auto;
    width: auto !important;
    height: auto !important;
    margin: 0 0 0 auto !important;
    color: #647a99;
    font-size: 11px !important;
    line-height: 1 !important;
    transition: transform 200ms ease, color 180ms ease;
  }

  body.marga-router-os .marga-sidebar-menu-scroll > .dropdown-btn.active > .fa-caret-down {
    color: #8dbff2;
    transform: rotate(180deg);
  }

  body.marga-router-os .marga-sidebar-menu-scroll > .dropdown-container {
    flex: 0 0 auto;
    margin: 1px 0 3px 9px;
    padding: 2px 0 2px 7px;
    border-left: 1px solid rgba(89, 130, 180, 0.2);
    background: transparent !important;
  }

  body.marga-router-os .marga-sidebar-menu-scroll > .dropdown-container a,
  body.marga-router-os .marga-sidebar-menu-scroll > .dropdown-container .dropdown-btn {
    min-height: 26px;
    margin: 0;
    padding: 2px 7px;
    border-radius: 8px;
    color: #8295b0 !important;
    background: transparent !important;
    font-size: 10px;
    line-height: 1.25;
  }

  body.marga-router-os .marga-sidebar-menu-scroll > .dropdown-container a:hover,
  body.marga-router-os .marga-sidebar-menu-scroll > .dropdown-container .dropdown-btn:hover,
  body.marga-router-os .marga-sidebar-menu-scroll > .dropdown-container a.active,
  body.marga-router-os .marga-sidebar-menu-scroll > .dropdown-container .dropdown-btn.active {
    color: #d5e5f8 !important;
    background: rgba(20, 48, 82, 0.45) !important;
  }

  body.marga-router-os .marga-sidebar-menu-scroll > .dropdown-container i {
    color: #6f86a5 !important;
  }

  body.marga-router-os .marga-sidebar-order-overview { order: 10; }
  body.marga-router-os .marga-sidebar-item--dashboard { order: 20; }
  body.marga-router-os .marga-sidebar-order-services { order: 30; }
  body.marga-router-os .marga-sidebar-item--hotspot { order: 40; }
  body.marga-router-os .marga-sidebar-submenu--hotspot { order: 41; }
  body.marga-router-os .marga-sidebar-item--pppoe { order: 50; }
  body.marga-router-os .marga-sidebar-submenu--pppoe { order: 51; }
  body.marga-router-os .marga-sidebar-item--vouchers { order: 60; }
  body.marga-router-os .marga-sidebar-item--quick-print { order: 70; }
  body.marga-router-os .marga-sidebar-order-monitoring { order: 80; }
  body.marga-router-os .marga-sidebar-item--dhcp { order: 90; }
  body.marga-router-os .marga-sidebar-item--traffic { order: 100; }
  body.marga-router-os .marga-sidebar-item--pppoe-finance { order: 105; }
  body.marga-router-os .marga-sidebar-item--report { order: 110; }
  body.marga-router-os .marga-sidebar-item--log { order: 120; }
  body.marga-router-os .marga-sidebar-submenu--log { order: 121; }
  body.marga-router-os .marga-sidebar-order-system { order: 130; }
  body.marga-router-os .marga-sidebar-item--system { order: 140; }
  body.marga-router-os .marga-sidebar-submenu--system { order: 141; }
  body.marga-router-os .marga-sidebar-item--settings { order: 150; }
  body.marga-router-os .marga-sidebar-submenu--settings { order: 151; }
  body.marga-router-os .marga-sidebar-item--about { order: 160; }
  body.marga-router-os .marga-sidebar-item--logout { order: 170; }

  body.marga-router-os .marga-desktop-sidebar-profile {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 26px;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 44px;
    padding: 6px 6px 2px;
    border-top: 1px solid rgba(101, 139, 187, 0.16);
    background: linear-gradient(180deg, rgba(6, 18, 36, 0), rgba(6, 18, 36, 0.92) 24%);
  }

  body.marga-router-os .marga-desktop-profile-avatar {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(61, 154, 255, 0.36);
    border-radius: 50%;
    color: #ddecff;
    background: rgba(28, 86, 148, 0.48);
    font-size: 11px;
    font-weight: 760;
  }

  body.marga-router-os .marga-desktop-profile-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
  }

  body.marga-router-os .marga-desktop-profile-copy strong,
  body.marga-router-os .marga-desktop-profile-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.marga-router-os .marga-desktop-profile-copy strong {
    color: #dce8f8;
    font-size: 11px;
    font-weight: 680;
  }

  body.marga-router-os .marga-desktop-profile-copy small {
    color: #627795;
    font-size: 7px;
  }

  body.marga-router-os .marga-desktop-profile-toggle {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: #7589a6;
    background: transparent;
    cursor: pointer;
    transition: color 180ms ease, background 180ms ease;
  }

  body.marga-router-os .marga-desktop-profile-toggle:hover,
  body.marga-router-os .marga-desktop-profile-toggle[aria-expanded="true"] {
    color: #d6e6fa;
    background: rgba(25, 62, 103, 0.62);
  }

  body.marga-router-os .marga-desktop-profile-menu {
    position: absolute;
    z-index: 6;
    right: 2px;
    bottom: 52px;
    display: grid;
    width: 190px;
    padding: 6px;
    border: 1px solid rgba(92, 137, 191, 0.26);
    border-radius: 11px;
    background: #091a30;
    box-shadow: 0 16px 40px rgba(0, 4, 15, 0.42);
  }

  body.marga-router-os .marga-desktop-profile-menu[hidden] {
    display: none;
  }

  body.marga-router-os .marga-desktop-profile-menu a {
    display: flex !important;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    margin: 0;
    padding: 0 9px;
    border-radius: 8px;
    color: #a9bad1 !important;
    background: transparent !important;
    font-size: 11px;
    text-decoration: none !important;
  }

  body.marga-router-os .marga-desktop-profile-menu a:hover {
    color: #eef5ff !important;
    background: rgba(24, 63, 107, 0.6) !important;
  }

  body.marga-router-os.marga-os-sidebar-collapsed #sidenav.sidenav {
    padding-right: 9px !important;
    padding-left: 9px !important;
  }

  body.marga-router-os.marga-os-sidebar-collapsed .marga-desktop-sidebar-header {
    display: grid;
    justify-items: center;
    gap: 7px;
    padding-bottom: 9px;
  }

  body.marga-router-os.marga-os-sidebar-collapsed .marga-desktop-sidebar-brand {
    grid-template-columns: 38px;
    justify-content: center;
  }

  body.marga-router-os.marga-os-sidebar-collapsed .marga-desktop-sidebar-brand-copy,
  body.marga-router-os.marga-os-sidebar-collapsed .marga-desktop-router-copy,
  body.marga-router-os.marga-os-sidebar-collapsed .marga-nav-label,
  body.marga-router-os.marga-os-sidebar-collapsed .marga-desktop-profile-copy {
    display: none !important;
  }

  body.marga-router-os.marga-os-sidebar-collapsed .marga-desktop-sidebar-collapse i {
    transform: rotate(180deg);
  }

  body.marga-router-os.marga-os-sidebar-collapsed .marga-desktop-router-card {
    grid-template-columns: 36px;
    justify-content: center;
    min-height: 50px;
    margin: 8px 0;
    padding: 6px;
  }

  body.marga-router-os.marga-os-sidebar-collapsed .marga-desktop-router-icon::after {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 8px;
    height: 8px;
    border: 2px solid #071426;
    border-radius: 50%;
    background: #f05b6b;
    content: "";
  }

  body.marga-router-os.marga-os-sidebar-collapsed .marga-desktop-router-card.is-online .marga-desktop-router-icon::after {
    background: #20c98b;
  }

  body.marga-router-os.marga-os-sidebar-collapsed .marga-sidebar-menu-scroll {
    padding-right: 0;
  }

  body.marga-router-os.marga-os-sidebar-collapsed .marga-sidebar-menu-scroll > a,
  body.marga-router-os.marga-os-sidebar-collapsed .marga-sidebar-menu-scroll > .dropdown-btn {
    justify-content: center;
    min-height: 40px;
    padding: 0;
    font-size: 0;
  }

  body.marga-router-os.marga-os-sidebar-collapsed .marga-sidebar-menu-scroll > a > i:first-child,
  body.marga-router-os.marga-os-sidebar-collapsed .marga-sidebar-menu-scroll > .dropdown-btn > i:first-child {
    margin-right: 0 !important;
  }

  body.marga-router-os.marga-os-sidebar-collapsed .marga-sidebar-menu-scroll > .dropdown-btn > .fa-caret-down,
  body.marga-router-os.marga-os-sidebar-collapsed .marga-sidebar-menu-scroll > .dropdown-container {
    display: none !important;
  }

  body.marga-router-os.marga-os-sidebar-collapsed .marga-desktop-sidebar-profile {
    grid-template-columns: 34px;
    justify-content: center;
    gap: 5px;
    padding-right: 0;
    padding-left: 0;
  }

  body.marga-router-os.marga-os-sidebar-collapsed .marga-desktop-profile-toggle {
    position: absolute;
    right: -1px;
    bottom: 0;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(91, 133, 184, 0.25);
    border-radius: 50%;
    background: #08182c;
    font-size: 10px;
  }

  body.marga-router-os.marga-os-sidebar-collapsed .marga-desktop-profile-menu {
    right: auto;
    bottom: 0;
    left: calc(100% + 10px);
  }

  body.marga-router-os .marga-os-drawer-close,
  body.marga-router-os .marga-os-drawer-overlay,
  body.marga-router-os .marga-os-menu-action[data-os-drawer-toggle],
  body.marga-router-os .marga-os-dock {
    display: none !important;
  }

  body.marga-router-os #main {
    width: calc(100% - var(--os-desktop-sidebar)) !important;
    margin-left: var(--os-desktop-sidebar) !important;
    padding: 72px 18px 28px !important;
    transition: width 200ms ease, margin-left 200ms ease !important;
  }

  body.marga-router-os #main > .main-container,
  body.marga-router-os .marga-os-dashboard {
    width: 100% !important;
    max-width: 1600px !important;
  }

  body.marga-router-os .marga-os-dashboard {
    gap: 14px;
  }

  body.marga-router-os .marga-os-overview-grid,
  body.marga-router-os .marga-os-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.marga-router-os .marga-os-panel {
    min-height: 230px;
    padding: 10px;
    border-radius: 14px;
  }

  body.marga-router-os .marga-os-section-heading {
    gap: 7px;
    min-height: 28px;
    margin-bottom: 6px;
  }

  body.marga-router-os .marga-os-section-heading h2,
  body.marga-router-os .marga-os-service-heading h2,
  body.marga-router-os .marga-os-shortcuts-heading h2 {
    font-size: 14px;
    letter-spacing: -0.2px;
  }

  body.marga-router-os .marga-os-heading-icon,
  body.marga-router-os .marga-os-service-icon,
  body.marga-router-os .marga-os-shortcuts-icon {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 12px;
  }

  body.marga-router-os .marga-os-clock-card {
    min-height: 88px;
    padding: 11px;
    border-radius: 11px;
  }

  body.marga-router-os .marga-os-clock-card > span,
  body.marga-router-os .marga-os-clock-card > small {
    font-size: 10px;
  }

  body.marga-router-os .marga-os-clock-card > strong {
    margin-top: 5px;
    font-size: clamp(29px, 2.5vw, 36px);
  }

  body.marga-router-os .marga-os-clock-card > small {
    margin-top: 5px;
  }

  body.marga-router-os .marga-os-overview-minis {
    gap: 6px;
    margin-top: 6px;
  }

  body.marga-router-os .marga-os-info-card {
    grid-template-columns: 26px minmax(0, 1fr);
    min-height: 58px;
    padding: 7px;
    border-radius: 10px;
  }

  body.marga-router-os .marga-os-info-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 11px;
  }

  body.marga-router-os .marga-os-info-card small {
    font-size: 10px;
  }

  body.marga-router-os .marga-os-info-card strong {
    margin-top: 2px;
    font-size: 13px;
  }

  body.marga-router-os .marga-os-resources-grid {
    min-height: 80px;
    padding: 6px;
    border-radius: 10px;
  }

  body.marga-router-os .marga-os-gauge {
    width: 46px;
    height: 46px;
  }

  body.marga-router-os .marga-os-gauge strong {
    font-size: 12px;
  }

  body.marga-router-os .marga-os-resource > span {
    font-size: 10px;
  }

  body.marga-router-os .marga-os-resource > small {
    margin-top: 2px;
    font-size: 8px;
  }

  body.marga-router-os .marga-os-uptime-row {
    min-height: 42px;
    margin-top: 5px;
    padding: 5px 8px;
    border-radius: 9px;
  }

  body.marga-router-os .marga-os-uptime-row small,
  body.marga-router-os .marga-os-system-meta small {
    font-size: 9px;
  }

  body.marga-router-os .marga-os-uptime-row strong,
  body.marga-router-os .marga-os-system-meta strong {
    font-size: 11px;
  }

  body.marga-router-os .marga-os-uptime-row svg {
    height: 24px;
  }

  body.marga-router-os .marga-os-system-meta {
    gap: 5px;
    margin-top: 5px;
  }

  body.marga-router-os .marga-os-system-meta article {
    min-height: 36px;
    padding: 5px 7px;
    border-radius: 8px;
  }

  body.marga-router-os .marga-os-meta-icon {
    flex-basis: 23px;
    width: 23px;
    height: 23px;
    border-radius: 7px;
    font-size: 10px;
  }

  body.marga-router-os .marga-os-service-panel {
    padding: 10px;
    border-radius: 14px;
  }

  body.marga-router-os .marga-os-service-heading {
    min-height: 28px;
    margin-bottom: 6px;
  }

  body.marga-router-os .marga-os-service-heading > div,
  body.marga-router-os .marga-os-shortcuts-heading > div {
    gap: 8px;
  }

  body.marga-router-os .marga-os-service-heading > a {
    min-height: 26px;
    padding: 0 9px;
    border-radius: 8px;
    font-size: 9px;
  }

  body.marga-router-os .marga-os-metric-grid {
    gap: 6px;
  }

  body.marga-router-os .marga-os-metric {
    grid-template-columns: 30px minmax(0, 1fr);
    min-height: 78px;
    padding: 8px;
    border-radius: 10px;
  }

  body.marga-router-os .marga-os-metric-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 12px;
  }

  body.marga-router-os .marga-os-metric-copy {
    padding-left: 6px;
  }

  body.marga-router-os .marga-os-metric-copy small {
    font-size: 9px;
  }

  body.marga-router-os .marga-os-metric-copy strong {
    margin-top: 6px;
    font-size: clamp(20px, 1.8vw, 24px);
  }

  body.marga-router-os .marga-os-metric-copy > span {
    margin-top: 3px;
    font-size: 9px;
  }

  body.marga-router-os .marga-os-pattern {
    right: 6px;
    bottom: 6px;
    width: 48px;
    height: 30px;
  }

  body.marga-router-os .marga-os-pattern--user::before,
  body.marga-router-os .marga-os-pattern--ticket::before {
    font-size: 34px;
  }

  body.marga-router-os .marga-os-shortcuts {
    padding: 10px 12px;
    border-radius: 16px;
  }

  body.marga-router-os .marga-os-shortcuts-heading {
    margin-bottom: 8px;
  }

  body.marga-router-os .marga-os-shortcuts-grid a {
    min-height: 38px;
    border-radius: 10px;
  }

  body.marga-router-os .marga-os-operations {
    grid-template-areas:
      "traffic activity"
      "income activity";
    grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.8fr);
    align-items: start;
    gap: 10px;
  }

  body.marga-router-os .marga-os-operations .marga-dashboard-main,
  body.marga-router-os .marga-os-operations .marga-dashboard-aside {
    display: contents !important;
  }

  body.marga-router-os .marga-os-operations .marga-chart-card {
    grid-area: traffic !important;
    width: 100% !important;
    min-width: 0;
  }

  body.marga-router-os .marga-os-operations .marga-dashboard-aside > #r_4 {
    grid-area: income !important;
  }

  body.marga-router-os .marga-os-operations .marga-dashboard-aside > #r_3 {
    grid-area: activity !important;
  }

  body.marga-router-os .marga-os-operations .marga-dashboard-aside > #r_4,
  body.marga-router-os .marga-os-operations .marga-dashboard-aside > #r_3 {
    position: relative;
    width: 100% !important;
    min-width: 0;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
  }

  body.marga-router-os .marga-os-operations .card-header {
    min-height: 44px !important;
    padding: 8px 10px !important;
  }

  body.marga-router-os .marga-os-operations .marga-chart-card #trafficMonitor {
    height: 220px !important;
    min-height: 220px !important;
    flex-basis: 220px;
  }

  body.marga-router-os .marga-os-operations #r_4 .marga-income-card,
  body.marga-router-os .marga-os-operations #r_4 .box-group {
    min-height: 88px !important;
  }

  body.marga-router-os .marga-os-operations #r_4 .box-group {
    padding: 12px 14px !important;
  }

  body.marga-router-os .marga-os-operations .marga-log-stack {
    gap: 10px;
  }

  body.marga-router-os .marga-os-operations .marga-log-card:not(.marga-pppoe-log-card) .overflow {
    height: 220px !important;
    max-height: 220px !important;
  }

  body.marga-router-os .marga-os-operations .marga-pppoe-log-card .overflow {
    height: 120px !important;
    max-height: 120px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.marga-router-os *,
  body.marga-router-os *::before,
  body.marga-router-os *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@keyframes margaOsSpin {
  to { transform: rotate(360deg); }
}

/* PPPoE manual finance ---------------------------------------------------- */
body.marga-router-os .marga-pppoe-finance {
  display: grid;
  min-width: 0;
  gap: 14px;
}

body.marga-router-os .marga-finance-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border: 1px solid rgba(34, 211, 238, 0.24);
  border-radius: 16px;
  background:
    radial-gradient(circle at 94% 10%, rgba(34, 211, 238, 0.12), transparent 32%),
    linear-gradient(145deg, rgba(14, 28, 49, 0.98), rgba(8, 19, 35, 0.98));
  box-shadow: 0 12px 28px rgba(0, 5, 17, 0.2);
}

body.marga-router-os .marga-finance-heading > div > span {
  color: #22d3ee;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

body.marga-router-os .marga-finance-heading h2 {
  margin: 4px 0 2px;
  color: #f8fafc;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.15;
}

body.marga-router-os .marga-finance-heading p {
  margin: 0;
  color: #91a3ba;
  font-size: 11px;
}

body.marga-router-os .marga-finance-period-filter {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-end;
  gap: 8px;
}

body.marga-router-os .marga-finance-period-filter label {
  align-self: center;
  color: #a9b8cb;
  font-size: 10px;
  font-weight: 700;
}

body.marga-router-os .marga-finance-period-filter input,
body.marga-router-os .marga-finance-form input,
body.marga-router-os .marga-finance-form select {
  display: block !important;
  box-sizing: border-box;
  min-width: 0;
  min-height: 38px;
  margin: 0 !important;
  padding: 8px 10px;
  float: none !important;
  border: 1px solid rgba(91, 119, 160, 0.32);
  border-radius: 9px;
  outline: 0;
  color: #eef5ff;
  background: rgba(4, 15, 31, 0.82);
  font: inherit;
}

body.marga-router-os .marga-finance-period-filter input {
  width: 142px !important;
}

body.marga-router-os .marga-finance-form input,
body.marga-router-os .marga-finance-form select {
  width: 100% !important;
  max-width: none !important;
}

body.marga-router-os .marga-finance-period-filter input:focus,
body.marga-router-os .marga-finance-form input:focus,
body.marga-router-os .marga-finance-form select:focus {
  border-color: rgba(34, 211, 238, 0.7);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.1);
}

body.marga-router-os .marga-finance-form input[readonly] {
  color: #9fb0c6;
  background: rgba(12, 27, 48, 0.72);
}

body.marga-router-os .marga-finance-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

body.marga-router-os .marga-finance-summary article {
  display: grid;
  min-width: 0;
  min-height: 96px;
  align-content: center;
  box-sizing: border-box;
  padding: 13px 15px;
  overflow: hidden;
  border: 1px solid rgba(74, 115, 166, 0.3);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(13, 31, 54, 0.98), rgba(8, 21, 39, 0.98));
}

body.marga-router-os .marga-finance-summary article span,
body.marga-router-os .marga-finance-summary article small {
  overflow: hidden;
  color: #91a3ba;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.marga-router-os .marga-finance-summary article strong {
  overflow: hidden;
  margin: 5px 0 3px;
  color: #f8fafc;
  font-size: clamp(19px, 2vw, 27px);
  font-weight: 800;
  letter-spacing: -0.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.marga-router-os .marga-finance-summary .is-customers { border-color: rgba(59, 130, 246, 0.55); }
body.marga-router-os .marga-finance-summary .is-customers strong { color: #60a5fa; }
body.marga-router-os .marga-finance-summary .is-paid { border-color: rgba(16, 185, 129, 0.55); }
body.marga-router-os .marga-finance-summary .is-paid strong { color: #47e8ae; }
body.marga-router-os .marga-finance-summary .is-unpaid { border-color: rgba(245, 158, 11, 0.55); }
body.marga-router-os .marga-finance-summary .is-unpaid strong { color: #fbbf24; }
body.marga-router-os .marga-finance-summary .is-income { border-color: rgba(139, 92, 246, 0.6); }
body.marga-router-os .marga-finance-summary .is-income strong { color: #d8b4fe; }

body.marga-router-os .marga-finance-entry-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, 0.65fr);
  align-items: stretch;
  gap: 14px;
}

body.marga-router-os .marga-pppoe-finance .card {
  margin: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(74, 115, 166, 0.28) !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, rgba(11, 27, 48, 0.98), rgba(7, 18, 34, 0.98)) !important;
  box-shadow: 0 10px 24px rgba(0, 5, 17, 0.18) !important;
}

body.marga-router-os .marga-pppoe-finance .card-header {
  min-height: 50px;
  padding: 11px 15px;
  border-bottom: 1px solid rgba(74, 115, 166, 0.2);
  background: rgba(12, 29, 51, 0.7);
}

body.marga-router-os .marga-pppoe-finance .card-header h3 {
  margin: 0;
  color: #f2f7ff;
  font-size: 13px;
}

body.marga-router-os .marga-pppoe-finance .card-header h3 i {
  margin-right: 6px;
  color: #22d3ee;
}

body.marga-router-os .marga-pppoe-finance .card-body {
  padding: 14px;
}

body.marga-router-os .marga-finance-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

body.marga-router-os .marga-finance-field {
  display: grid;
  min-width: 0;
  gap: 5px;
}

body.marga-router-os .marga-finance-field.is-wide,
body.marga-router-os .marga-finance-form-actions.is-wide {
  grid-column: 1 / -1;
}

body.marga-router-os .marga-finance-field label {
  display: block;
  width: auto;
  margin: 0;
  float: none;
  color: #9eb0c7;
  font-size: 9px;
  font-weight: 700;
}

body.marga-router-os .marga-finance-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 2px;
}

body.marga-router-os .marga-finance-form-actions small {
  color: #7f90a7;
  font-size: 9px;
}

body.marga-router-os .marga-finance-info-card .card-body {
  height: 100%;
  box-sizing: border-box;
}

body.marga-router-os .marga-finance-info-card ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0 0 0 18px;
  color: #a8b8cc;
  font-size: 10px;
  line-height: 1.45;
}

body.marga-router-os .marga-pppoe-finance .overflow {
  max-height: 52vh;
  border-color: rgba(74, 115, 166, 0.24) !important;
  border-radius: 10px;
}

body.marga-router-os .marga-pppoe-finance table {
  margin: 0;
  color: #b9c9e2;
}

body.marga-router-os .marga-pppoe-finance table th {
  color: #91a8c3;
  background: rgba(11, 29, 48, 0.9);
  font-size: 9px;
  letter-spacing: 0.025em;
}

body.marga-router-os .marga-pppoe-finance table td {
  font-size: 10px;
}

body.marga-router-os .marga-pppoe-finance tr.is-disabled {
  opacity: 0.58;
}

body.marga-router-os .marga-finance-badge {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 800;
}

body.marga-router-os .marga-finance-badge.is-paid {
  border-color: rgba(16, 185, 129, 0.36);
  color: #47e8ae;
  background: rgba(16, 185, 129, 0.11);
}

body.marga-router-os .marga-finance-badge.is-unpaid {
  border-color: rgba(245, 158, 11, 0.36);
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.1);
}

body.marga-router-os .marga-finance-history-card form {
  margin: 0;
}

body.marga-router-os .marga-finance-history-card .btn {
  min-height: 26px;
  padding: 4px 8px;
  font-size: 8px;
}

@media screen and (max-width: 1024px) {
  body.marga-router-os .marga-finance-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.marga-router-os .marga-finance-entry-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media screen and (max-width: 640px) {
  body.marga-router-os .marga-finance-heading {
    align-items: stretch;
    flex-direction: column;
    padding: 14px;
  }

  body.marga-router-os .marga-finance-period-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body.marga-router-os .marga-finance-period-filter label {
    grid-column: 1 / -1;
  }

  body.marga-router-os .marga-finance-period-filter input {
    width: 100% !important;
  }

  body.marga-router-os .marga-finance-summary,
  body.marga-router-os .marga-finance-form {
    grid-template-columns: minmax(0, 1fr);
  }

  body.marga-router-os .marga-finance-field.is-wide,
  body.marga-router-os .marga-finance-form-actions.is-wide {
    grid-column: auto;
  }

  body.marga-router-os .marga-finance-form-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* PPPoE billing workspace ------------------------------------------------- */
body.marga-router-os .marga-pppoe-finance {
  gap: 18px;
}

body.marga-router-os .marga-pppoe-finance .marga-finance-heading {
  align-items: flex-end;
  padding: 2px 2px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.marga-router-os .marga-finance-title > span {
  color: #5ee7f7;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.13em;
}

body.marga-router-os .marga-finance-title h2 {
  margin: 3px 0 2px;
  font-size: clamp(22px, 2.3vw, 32px);
}

body.marga-router-os .marga-finance-title p {
  margin: 0;
  color: #8294ad;
  font-size: 10px;
}

body.marga-router-os .marga-finance-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
}

body.marga-router-os .marga-finance-button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  margin: 0;
  padding: 7px 11px;
  border: 1px solid rgba(72, 153, 255, 0.62);
  border-radius: 7px;
  color: #e9f4ff;
  background: rgba(11, 31, 57, 0.9);
  font-size: 9px;
  font-weight: 750;
}

body.marga-router-os .marga-finance-button:hover {
  border-color: #3b9cff;
  color: #fff;
}

body.marga-router-os .marga-finance-button.is-primary {
  border-color: #247fff;
  background: linear-gradient(135deg, #4d64ff, #168fe6);
  box-shadow: 0 8px 18px rgba(35, 103, 255, 0.18);
}

body.marga-router-os .marga-finance-period-filter {
  align-items: center;
}

body.marga-router-os .marga-finance-period-filter label {
  align-self: center;
  color: #8fa1ba;
}

body.marga-router-os .marga-finance-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

body.marga-router-os .marga-finance-summary article {
  position: relative;
  min-height: 104px;
  padding: 15px 54px 14px 15px;
  border-color: rgba(73, 101, 140, 0.5);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(19, 36, 61, 0.98), rgba(14, 28, 49, 0.98));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

body.marga-router-os .marga-finance-summary article > span {
  color: #69b8ff;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

body.marga-router-os .marga-finance-summary article > strong {
  margin: 8px 0 7px;
  font-size: clamp(22px, 2.2vw, 30px);
}

body.marga-router-os .marga-finance-summary article > small {
  font-size: 8px;
}

body.marga-router-os .marga-finance-summary article > i {
  position: absolute;
  top: 50%;
  right: 14px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9px;
  color: #b7c7db;
  background: rgba(99, 116, 151, 0.16);
  font-size: 15px;
  transform: translateY(-50%);
}

body.marga-router-os .marga-finance-summary .is-unpaid > i {
  color: #ff6b6b;
  background: rgba(239, 68, 68, 0.18);
}

body.marga-router-os .marga-finance-summary .is-paid > i {
  color: #34e3a4;
  background: rgba(16, 185, 129, 0.17);
}

body.marga-router-os .marga-finance-summary .is-disabled {
  border-color: rgba(245, 158, 11, 0.5);
}

body.marga-router-os .marga-finance-summary .is-disabled > i {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.17);
}

body.marga-router-os .marga-finance-summary .is-unpriced {
  border-color: rgba(234, 179, 8, 0.48);
}

body.marga-router-os .marga-finance-summary .is-unpriced > i {
  color: #facc15;
  background: rgba(234, 179, 8, 0.16);
}

body.marga-router-os .marga-finance-entry-grid {
  display: none !important;
}

body.marga-router-os .marga-finance-entry-grid.is-open {
  display: grid !important;
}

body.marga-router-os .marga-finance-table-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(190px, 250px);
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-bottom: 1px solid rgba(74, 115, 166, 0.22);
  background: rgba(14, 31, 54, 0.84);
}

body.marga-router-os .marga-finance-tabs {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 5px;
}

body.marga-router-os .marga-finance-tabs button {
  min-height: 30px;
  margin: 0;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #9aacbf;
  background: transparent;
  font-size: 8px;
  font-weight: 700;
}

body.marga-router-os .marga-finance-tabs button:hover {
  color: #dbeafe;
  background: rgba(46, 75, 115, 0.25);
}

body.marga-router-os .marga-finance-tabs button.is-active {
  border-color: rgba(106, 112, 255, 0.6);
  color: #fff;
  background: linear-gradient(135deg, #5a63f2, #446ff2);
}

body.marga-router-os .marga-finance-period-nav {
  display: grid;
  grid-template-columns: 30px minmax(110px, 1fr) 30px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(74, 115, 166, 0.34);
  border-radius: 8px;
  background: rgba(12, 29, 51, 0.84);
}

body.marga-router-os .marga-finance-period-nav a {
  display: grid;
  min-height: 32px;
  place-items: center;
  color: #60a5fa !important;
}

body.marga-router-os .marga-finance-period-nav strong {
  overflow: hidden;
  color: #eef6ff;
  font-size: 8px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.marga-router-os .marga-finance-search {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  min-height: 34px;
  border: 1px solid rgba(74, 115, 166, 0.34);
  border-radius: 8px;
  color: #38bdf8;
  background: rgba(18, 41, 70, 0.88);
}

body.marga-router-os .marga-finance-search i {
  text-align: center;
}

body.marga-router-os .marga-finance-search input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 32px;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 6px 9px 6px 0;
  border: 0;
  outline: 0;
  color: #e9f4ff;
  background: transparent;
  font-size: 9px;
}

body.marga-router-os .marga-finance-status-card .card-body {
  padding: 0;
}

body.marga-router-os .marga-finance-status-card .overflow {
  max-height: 62vh;
  border: 0 !important;
  border-radius: 0;
}

body.marga-router-os .marga-finance-status-card table th {
  height: 38px;
  padding: 7px 10px;
  border-color: rgba(74, 115, 166, 0.16) !important;
  color: #68aee8;
  background: linear-gradient(90deg, rgba(21, 48, 78, 0.96), rgba(38, 31, 66, 0.94));
  text-transform: uppercase;
}

body.marga-router-os .marga-finance-status-card table td {
  height: 44px;
  padding: 7px 10px;
  border-color: rgba(74, 115, 166, 0.18) !important;
  color: #aebdd1;
}

body.marga-router-os .marga-finance-status-card tbody tr:hover {
  background: rgba(28, 53, 85, 0.48) !important;
}

body.marga-router-os .marga-finance-invoice-number {
  color: #dbeafe;
  font-size: 9px;
  letter-spacing: 0.025em;
}

body.marga-router-os .marga-finance-badge.is-unpriced {
  border-color: rgba(234, 179, 8, 0.38);
  color: #fde047;
  background: rgba(234, 179, 8, 0.1);
}

body.marga-router-os .marga-finance-inline-form {
  margin: 0;
}

body.marga-router-os .marga-finance-row-action {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0;
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #fff;
  font-size: 8px;
  font-weight: 750;
}

body.marga-router-os .marga-finance-row-action.is-pay {
  border-color: rgba(16, 185, 129, 0.72);
  background: linear-gradient(135deg, #10b981, #06a568);
}

body.marga-router-os .marga-finance-row-action.is-void {
  border-color: rgba(239, 68, 68, 0.55);
  color: #fca5a5;
  background: rgba(127, 29, 29, 0.34);
}

@media screen and (max-width: 1200px) {
  body.marga-router-os .marga-finance-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.marga-router-os .marga-finance-table-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body.marga-router-os .marga-finance-search {
    grid-column: 1 / -1;
  }
}

@media screen and (max-width: 800px) {
  body.marga-router-os .marga-pppoe-finance .marga-finance-heading {
    align-items: stretch;
    flex-direction: column;
  }

  body.marga-router-os .marga-finance-header-actions {
    justify-content: flex-start;
  }

  body.marga-router-os .marga-finance-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.marga-router-os .marga-finance-table-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  body.marga-router-os .marga-finance-search {
    grid-column: auto;
  }

  body.marga-router-os .marga-finance-period-nav {
    max-width: 260px;
  }
}

@media screen and (max-width: 520px) {
  body.marga-router-os .marga-finance-header-actions,
  body.marga-router-os .marga-finance-period-filter {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  body.marga-router-os .marga-finance-period-filter label {
    grid-column: auto;
  }

  body.marga-router-os .marga-finance-period-filter input,
  body.marga-router-os .marga-finance-button,
  body.marga-router-os .marga-finance-period-nav {
    width: 100% !important;
    max-width: none;
  }

  body.marga-router-os .marga-finance-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  body.marga-router-os .marga-finance-summary article {
    min-height: 88px;
  }

  body.marga-router-os .marga-finance-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Compact PPPoE finance --------------------------------------------------- */
body.marga-router-os.marga-pppoe-finance-page .marga-page-intro {
  display: none !important;
}

body.marga-router-os.marga-pppoe-finance-page .marga-pppoe-finance {
  gap: 8px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-heading {
  min-height: 0;
  gap: 10px;
  padding: 0 1px 2px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-title > span {
  font-size: 7px;
  letter-spacing: 0.1em;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-title h2 {
  margin: 1px 0;
  font-size: 20px;
  line-height: 1.05;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-title p {
  font-size: 8px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-header-actions,
body.marga-router-os.marga-pppoe-finance-page .marga-finance-period-filter {
  gap: 5px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-period-filter label {
  font-size: 7px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-period-filter input {
  width: 116px !important;
  min-height: 29px;
  padding: 4px 7px;
  border-radius: 6px;
  font-size: 8px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-button {
  min-height: 29px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 7px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-summary {
  gap: 6px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-summary article {
  min-height: 70px;
  padding: 8px 37px 7px 9px;
  border-radius: 8px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-summary article > span {
  font-size: 7px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-summary article > strong {
  margin: 4px 0 3px;
  font-size: 18px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-summary article > small {
  font-size: 6px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-summary article > i {
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-size: 11px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-pppoe-finance .card {
  border-radius: 8px !important;
}

body.marga-router-os.marga-pppoe-finance-page .marga-pppoe-finance .card-header {
  min-height: 34px;
  padding: 6px 9px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-pppoe-finance .card-header h3 {
  font-size: 9px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-pppoe-finance .card-body {
  padding: 7px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-entry-grid {
  gap: 7px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-form {
  gap: 6px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-field {
  gap: 3px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-field label,
body.marga-router-os.marga-pppoe-finance-page .marga-finance-form-actions small,
body.marga-router-os.marga-pppoe-finance-page .marga-finance-info-card ul {
  font-size: 7px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-form input,
body.marga-router-os.marga-pppoe-finance-page .marga-finance-form select {
  min-height: 30px;
  padding: 4px 7px;
  border-radius: 6px;
  font-size: 8px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-form-actions {
  gap: 6px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-table-toolbar {
  gap: 6px;
  padding: 5px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-tabs {
  gap: 3px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-tabs button {
  min-height: 24px;
  padding: 3px 7px;
  border-radius: 5px;
  font-size: 7px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-period-nav {
  grid-template-columns: 24px minmax(88px, 1fr) 24px;
  border-radius: 6px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-period-nav a {
  min-height: 26px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-period-nav strong {
  font-size: 7px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-search {
  min-height: 27px;
  grid-template-columns: 22px minmax(0, 1fr);
  border-radius: 6px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-search input {
  min-height: 25px;
  padding: 3px 6px 3px 0;
  font-size: 7px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-status-card table th {
  height: 27px;
  padding: 4px 6px;
  font-size: 7px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-status-card table td {
  height: 30px;
  padding: 4px 6px;
  font-size: 8px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-invoice-number {
  font-size: 7px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-badge {
  min-height: 17px;
  padding: 0 5px;
  font-size: 6px;
}

body.marga-router-os.marga-pppoe-finance-page .marga-finance-row-action,
body.marga-router-os.marga-pppoe-finance-page .marga-finance-history-card .btn {
  min-height: 22px;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 6px;
}

@media screen and (max-width: 520px) {
  body.marga-router-os.marga-pppoe-finance-page .marga-finance-period-filter input {
    width: 100% !important;
  }

  body.marga-router-os.marga-pppoe-finance-page .marga-finance-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.marga-router-os.marga-pppoe-finance-page .marga-finance-summary article:last-child {
    grid-column: 1 / -1;
  }
}

/* Phone invoice layout --------------------------------------------------- */
@media screen and (max-width: 640px) {
  body.marga-router-os.marga-pppoe-finance-page .marga-pppoe-finance {
    gap: 5px;
  }

  body.marga-router-os.marga-pppoe-finance-page .marga-finance-heading {
    gap: 6px;
  }

  body.marga-router-os.marga-pppoe-finance-page .marga-finance-title h2 {
    font-size: 17px;
  }

  body.marga-router-os.marga-pppoe-finance-page .marga-finance-title p {
    font-size: 7px;
  }

  body.marga-router-os.marga-pppoe-finance-page .marga-finance-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }

  body.marga-router-os.marga-pppoe-finance-page .marga-finance-summary article {
    min-height: 58px;
    padding: 6px 29px 5px 7px;
    border-radius: 7px;
  }

  body.marga-router-os.marga-pppoe-finance-page .marga-finance-summary article > span {
    font-size: 6px;
  }

  body.marga-router-os.marga-pppoe-finance-page .marga-finance-summary article > strong {
    margin: 3px 0 2px;
    font-size: 15px;
  }

  body.marga-router-os.marga-pppoe-finance-page .marga-finance-summary article > small {
    font-size: 5px;
  }

  body.marga-router-os.marga-pppoe-finance-page .marga-finance-summary article > i {
    right: 6px;
    width: 19px;
    height: 19px;
    border-radius: 5px;
    font-size: 8px;
  }

  body.marga-router-os.marga-pppoe-finance-page .marga-finance-summary article:last-child {
    grid-column: 1 / -1;
    max-width: calc(50% - 2px);
  }

  body.marga-router-os.marga-pppoe-finance-page .marga-finance-info-card {
    display: none !important;
  }

  body.marga-router-os.marga-pppoe-finance-page .marga-finance-table-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 4px;
    border-radius: 7px 7px 0 0;
  }

  body.marga-router-os.marga-pppoe-finance-page .marga-finance-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
  }

  body.marga-router-os.marga-pppoe-finance-page .marga-finance-tabs button {
    min-width: 0;
    min-height: 31px;
    padding: 3px 2px;
    border-radius: 5px;
    font-size: 5px;
    line-height: 1.25;
    white-space: normal;
  }

  body.marga-router-os.marga-pppoe-finance-page .marga-finance-period-nav {
    width: 100%;
    max-width: none;
    grid-template-columns: 22px minmax(0, 1fr) 22px;
  }

  body.marga-router-os.marga-pppoe-finance-page .marga-finance-period-nav a {
    min-height: 25px;
  }

  body.marga-router-os.marga-pppoe-finance-page .marga-finance-search {
    min-height: 25px;
    grid-template-columns: 20px minmax(0, 1fr);
  }

  body.marga-router-os.marga-pppoe-finance-page .marga-finance-search input {
    min-height: 23px;
    font-size: 6px;
  }

  body.marga-router-os.marga-pppoe-finance-page .marga-finance-status-card .overflow {
    max-height: 62vh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.marga-router-os.marga-pppoe-finance-page #financeInvoiceTable,
  body.marga-router-os.marga-pppoe-finance-page #financeInvoiceTable tbody {
    display: block;
    width: 100%;
  }

  body.marga-router-os.marga-pppoe-finance-page #financeInvoiceTable thead {
    display: none;
  }

  body.marga-router-os.marga-pppoe-finance-page #financeInvoiceTable tbody {
    box-sizing: border-box;
    padding: 4px;
  }

  body.marga-router-os.marga-pppoe-finance-page #financeInvoiceTable tr[data-finance-status] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 6px;
    box-sizing: border-box;
    margin: 0 0 4px;
    padding: 7px;
    border: 1px solid rgba(67, 96, 134, 0.48);
    border-radius: 7px;
    background: linear-gradient(145deg, rgba(17, 35, 60, 0.98), rgba(12, 27, 48, 0.98));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
  }

  body.marga-router-os.marga-pppoe-finance-page #financeInvoiceTable tr[data-finance-status]:last-of-type {
    margin-bottom: 0;
  }

  body.marga-router-os.marga-pppoe-finance-page #financeInvoiceTable tr[data-finance-status] > td {
    display: grid;
    height: auto;
    min-height: 13px;
    grid-column: 1 / -1;
    grid-template-columns: 67px minmax(0, 1fr);
    align-items: start;
    gap: 4px;
    padding: 1px 0;
    border: 0 !important;
    color: #75b8f3;
    font-size: 6px;
    line-height: 1.25;
    text-align: right;
    white-space: normal;
  }

  body.marga-router-os.marga-pppoe-finance-page #financeInvoiceTable tr[data-finance-status] > td::before {
    color: #8b9eb8;
    content: attr(data-label) ":";
    text-align: left;
  }

  body.marga-router-os.marga-pppoe-finance-page #financeInvoiceTable .marga-finance-mobile-invoice,
  body.marga-router-os.marga-pppoe-finance-page #financeInvoiceTable .marga-finance-mobile-amount {
    display: block;
    grid-row: 1;
    min-height: 16px;
    padding-bottom: 2px;
  }

  body.marga-router-os.marga-pppoe-finance-page #financeInvoiceTable .marga-finance-mobile-invoice {
    grid-column: 1;
    text-align: left;
  }

  body.marga-router-os.marga-pppoe-finance-page #financeInvoiceTable .marga-finance-mobile-amount {
    grid-column: 2;
    color: #f8fbff;
    text-align: right;
  }

  body.marga-router-os.marga-pppoe-finance-page #financeInvoiceTable .marga-finance-mobile-invoice::before,
  body.marga-router-os.marga-pppoe-finance-page #financeInvoiceTable .marga-finance-mobile-amount::before,
  body.marga-router-os.marga-pppoe-finance-page #financeInvoiceTable .marga-finance-mobile-status::before,
  body.marga-router-os.marga-pppoe-finance-page #financeInvoiceTable .marga-finance-mobile-action::before {
    display: none;
  }

  body.marga-router-os.marga-pppoe-finance-page #financeInvoiceTable .marga-finance-invoice-number {
    color: #eef6ff;
    font-size: 7px;
  }

  body.marga-router-os.marga-pppoe-finance-page #financeInvoiceTable .marga-finance-mobile-status {
    display: flex;
    grid-row: 2;
    align-items: center;
    padding: 0 0 3px;
    text-align: left;
  }

  body.marga-router-os.marga-pppoe-finance-page #financeInvoiceTable .marga-finance-mobile-customer {
    grid-row: 3;
    color: #f2f7ff;
    font-weight: 700;
  }

  body.marga-router-os.marga-pppoe-finance-page #financeInvoiceTable .marga-finance-mobile-username {
    grid-row: 4;
  }

  body.marga-router-os.marga-pppoe-finance-page #financeInvoiceTable .marga-finance-mobile-profile {
    grid-row: 5;
  }

  body.marga-router-os.marga-pppoe-finance-page #financeInvoiceTable .marga-finance-mobile-date {
    grid-row: 6;
  }

  body.marga-router-os.marga-pppoe-finance-page #financeInvoiceTable .marga-finance-mobile-action {
    display: flex;
    grid-row: 7;
    align-items: center;
    justify-content: flex-end;
    padding-top: 3px;
  }

  body.marga-router-os.marga-pppoe-finance-page #financeInvoiceTable .marga-finance-row-action {
    min-height: 26px;
    padding: 3px 7px;
    font-size: 6px;
  }

  body.marga-router-os.marga-pppoe-finance-page #financeInvoiceTable .marga-finance-static-empty,
  body.marga-router-os.marga-pppoe-finance-page #financeFilteredEmpty {
    display: block;
    padding: 10px;
  }

  body.marga-router-os.marga-pppoe-finance-page #financeInvoiceTable .marga-finance-static-empty td,
  body.marga-router-os.marga-pppoe-finance-page #financeFilteredEmpty td {
    display: block;
    height: auto;
    border: 0 !important;
    font-size: 7px;
  }
}

/* Cross-page UI audit refinements ---------------------------------------- */
body.marga-router-os .marga-empty-state-row td {
  height: auto !important;
  padding: 22px 14px !important;
  border: 1px dashed rgba(83, 126, 177, 0.32) !important;
  color: #8ea2bd !important;
  background: rgba(9, 25, 45, 0.5) !important;
  text-align: center !important;
  white-space: normal !important;
}

body.marga-router-os .marga-empty-state-row td::before {
  display: none !important;
}

body.marga-router-os .marga-empty-state-icon {
  display: inline-grid;
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  place-items: center;
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: 10px;
  color: #38bdf8;
  background: rgba(14, 116, 144, 0.12);
}

body.marga-router-os .marga-empty-state-row strong,
body.marga-router-os .marga-empty-state-row small {
  display: block;
}

body.marga-router-os .marga-empty-state-row strong {
  color: #dbeafe;
  font-size: 11px;
}

body.marga-router-os .marga-empty-state-row small {
  margin-top: 4px;
  font-size: 9px;
}

body.marga-router-os .marga-generate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.marga-router-os .marga-generate-actions .btn {
  margin: 0;
}

body.marga-router-os .marga-voucher-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 8px;
  margin: 0;
}

body.marga-router-os .marga-voucher-profile-grid > .col-4 {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}

body.marga-router-os .marga-voucher-profile-grid .box {
  height: 100%;
  min-height: 88px;
  box-sizing: border-box;
  margin: 0 !important;
  content-visibility: auto;
  contain-intrinsic-size: 88px;
}

body.marga-router-os .marga-voucher-profile-grid .box-group {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
}

body.marga-router-os .marga-voucher-profile-grid .box-group > div {
  display: block;
}

body.marga-router-os .marga-voucher-profile-grid .box-group-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  font-size: 14px;
  line-height: 32px;
}

body.marga-router-os .marga-voucher-profile-grid .box-group-area {
  min-width: 0;
  padding: 2px 0 2px 7px;
}

body.marga-router-os .marga-voucher-profile-grid .box-group-area h3 {
  overflow-wrap: anywhere;
  font-size: 9px;
  line-height: 1.28;
}

body.marga-router-os .marga-voucher-profile-grid .box-group-area a {
  font-size: 7px;
  line-height: 1.2;
}

body.marga-router-os .marga-logo-upload-body {
  display: grid;
  gap: 14px;
}

body.marga-router-os .marga-logo-upload-form {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(80, 116, 164, 0.32);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(15, 32, 57, 0.92), rgba(10, 23, 43, 0.9));
}

body.marga-router-os .marga-logo-upload-guide {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.marga-router-os .marga-logo-upload-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border: 1px solid rgba(139, 92, 246, 0.34);
  border-radius: 12px;
  color: #c4b5fd;
  background: rgba(109, 40, 217, 0.16);
  font-size: 18px;
}

body.marga-router-os .marga-logo-upload-guide strong {
  display: block;
  color: #eef4ff;
  font-size: 13px;
}

body.marga-router-os .marga-logo-upload-guide p {
  margin: 5px 0 0;
  color: #91a3bc;
  font-size: 10px;
  line-height: 1.55;
}

body.marga-router-os .marga-logo-upload-guide code {
  color: #67e8f9;
  font-family: inherit;
  font-weight: 700;
}

body.marga-router-os .marga-logo-upload-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, 190px);
  gap: 10px;
}

body.marga-router-os .marga-logo-file-input,
body.marga-router-os .marga-logo-submit {
  min-width: 0;
  min-height: 42px;
  box-sizing: border-box;
  margin: 0;
  border-radius: 10px;
  font: inherit;
}

body.marga-router-os .marga-logo-file-input {
  width: 100%;
  padding: 5px;
  border: 1px solid rgba(79, 112, 158, 0.38);
  color: #9eb0c8;
  background: rgba(5, 16, 32, 0.72);
  font-size: 10px;
}

body.marga-router-os .marga-logo-file-input::file-selector-button {
  min-height: 30px;
  margin-right: 10px;
  padding: 6px 12px;
  border: 0;
  border-radius: 7px;
  color: #eaf5ff;
  background: rgba(62, 83, 149, 0.58);
  font-weight: 700;
  cursor: pointer;
}

body.marga-router-os .marga-logo-submit {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #7258f5, #2bc6e8);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

body.marga-router-os .marga-logo-list {
  margin-top: 0;
}

body.marga-app-page .marga-about-body {
  display: grid;
  gap: 16px;
}

body.marga-app-page .marga-about-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(95, 115, 205, 0.34);
  border-radius: 15px;
  background:
    radial-gradient(circle at 92% 0%, rgba(34, 211, 238, 0.12), transparent 35%),
    linear-gradient(145deg, rgba(31, 35, 78, 0.9), rgba(12, 27, 49, 0.92));
}

body.marga-app-page .marga-about-mark {
  display: block;
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 17px;
  box-shadow: 0 14px 30px rgba(8, 145, 178, 0.18);
}

body.marga-app-page .marga-about-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.marga-app-page .marga-about-kicker {
  color: #7dd3fc;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.12em;
}

body.marga-app-page .marga-about-hero h3 {
  margin: 6px 0 5px;
  color: #f8fbff;
  font-size: 19px;
}

body.marga-app-page .marga-about-hero p {
  max-width: 720px;
  margin: 0;
  color: #9fb0c8;
  font-size: 11px;
  line-height: 1.6;
}

body.marga-app-page .marga-about-services {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

body.marga-app-page .marga-about-services span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid rgba(71, 104, 150, 0.34);
  border-radius: 9px;
  color: #b9c8da;
  background: rgba(9, 28, 50, 0.68);
  font-size: 9px;
  font-weight: 700;
}

body.marga-app-page .marga-about-services i {
  color: #38bdf8;
}

body.marga-app-page .marga-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 12px;
}

body.marga-app-page .marga-about-panel {
  padding: 16px;
  border: 1px solid rgba(71, 104, 150, 0.32);
  border-radius: 14px;
  background: rgba(11, 27, 49, 0.68);
}

body.marga-app-page .marga-about-panel h4 {
  margin: 0 0 13px;
  color: #eef5ff;
  font-size: 12px;
}

body.marga-app-page .marga-about-panel h4 i {
  margin-right: 6px;
  color: #a78bfa;
}

body.marga-app-page .marga-about-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

body.marga-app-page .marga-about-details > div {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border: 1px solid rgba(68, 98, 139, 0.24);
  border-radius: 9px;
  background: rgba(7, 19, 36, 0.48);
}

body.marga-app-page .marga-about-details dt {
  color: #7890ad;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
}

body.marga-app-page .marga-about-details dd {
  margin: 0;
  color: #dce8f7;
  font-size: 10px;
}

body.marga-app-page .marga-about-panel--message p {
  margin: 0 0 12px;
  color: #9fb0c7;
  font-size: 10px;
  line-height: 1.75;
}

body.marga-app-page .marga-about-panel--message p:last-child {
  margin-bottom: 0;
}

body.marga-app-page .marga-about-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid rgba(71, 104, 150, 0.26);
  color: #7388a2;
  font-size: 9px;
}

body.marga-app-page .marga-about-footer strong {
  color: #b5c4d8;
}

@media screen and (max-width: 480px) {
  body.marga-router-os .marga-os-operations .marga-log-stack > .marga-log-card {
    height: auto !important;
    align-self: start;
  }

  body.marga-router-os .marga-os-operations .marga-log-card .card-body {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 8px !important;
  }

  body.marga-router-os .marga-os-operations .marga-log-card .overflow {
    height: 150px !important;
    min-height: 0 !important;
    max-height: 150px !important;
  }

  body.marga-router-os .marga-os-operations .marga-pppoe-log-card .overflow {
    height: 92px !important;
    max-height: 92px !important;
  }

  body.marga-router-os .marga-os-operations .marga-pppoe-log-card .marga-log-empty {
    height: 62px !important;
    max-height: 62px !important;
  }

  body.marga-router-os .marga-generate-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  body.marga-router-os .marga-generate-actions .btn {
    display: inline-flex;
    min-width: 0;
    min-height: 37px;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    font-size: 8px;
    white-space: normal;
  }

  body.marga-router-os .marga-last-generate-table {
    display: block !important;
    width: 100% !important;
  }

  body.marga-router-os .marga-last-generate-table tbody {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  body.marga-router-os .marga-last-generate-table tr {
    display: grid !important;
    min-height: 54px;
    align-content: center;
    gap: 3px;
    padding: 7px;
    border: 1px solid rgba(76, 105, 146, 0.3) !important;
    border-radius: 9px;
    background: rgba(12, 29, 52, 0.72) !important;
  }

  body.marga-router-os .marga-last-generate-table tr:last-child {
    min-height: 0;
    grid-column: 1 / -1;
  }

  body.marga-router-os .marga-last-generate-table td {
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 9px !important;
    text-align: center !important;
  }

  body.marga-router-os .marga-last-generate-table td::before {
    display: none !important;
  }

  body.marga-router-os .marga-last-generate-table td:first-child {
    color: #8296b1;
    font-size: 7px !important;
    font-weight: 700;
    text-transform: uppercase;
  }

  body.marga-router-os .marga-voucher-profile-scroll {
    max-height: 62vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-right: 2px;
  }

  body.marga-router-os .marga-voucher-profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  body.marga-router-os .marga-voucher-profile-grid .box {
    min-height: 72px;
    padding: 6px !important;
    contain-intrinsic-size: 72px;
  }

  body.marga-router-os .marga-voucher-profile-grid .box-group {
    grid-template-columns: 27px minmax(0, 1fr);
  }

  body.marga-router-os .marga-voucher-profile-grid .box-group-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    font-size: 11px;
    line-height: 24px;
  }

  body.marga-router-os .marga-voucher-profile-grid .box-group-area {
    padding-left: 5px;
  }

  body.marga-router-os .marga-voucher-profile-grid .box-group-area h3 {
    font-size: 7.5px;
    line-height: 1.22;
  }

  body.marga-router-os .marga-voucher-profile-grid .box-group-area a {
    font-size: 6.5px;
  }

  body.marga-router-os .marga-logo-upload-form {
    padding: 12px;
  }

  body.marga-router-os .marga-logo-upload-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  body.marga-router-os .marga-logo-submit {
    width: 100%;
  }

  body.marga-app-page .marga-about-hero {
    align-items: flex-start;
    padding: 13px;
  }

  body.marga-app-page .marga-about-mark {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    border-radius: 13px;
  }

  body.marga-app-page .marga-about-hero h3 {
    font-size: 15px;
  }

  body.marga-app-page .marga-about-grid,
  body.marga-app-page .marga-about-details {
    grid-template-columns: minmax(0, 1fr);
  }

  body.marga-app-page .marga-about-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  body.marga-router-os .marga-empty-state-row td {
    display: block !important;
    min-height: 90px !important;
    box-sizing: border-box;
    padding: 16px 10px !important;
  }
}

/* Keep Hotspot Active as a compact data table on phones. */
@media screen and (max-width: 640px) {
  body.marga-router-os .marga-hotspot-active-card .marga-hotspot-active-scroll {
    display: block !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 0 6px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scrollbar-color: rgba(56, 189, 248, 0.55) rgba(10, 25, 47, 0.75);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  body.marga-router-os .marga-hotspot-active-card .marga-hotspot-active-table {
    display: table !important;
    width: max-content !important;
    min-width: 1040px;
    margin: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
  }

  body.marga-router-os .marga-hotspot-active-card .marga-hotspot-active-table thead {
    display: table-header-group !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
  }

  body.marga-router-os .marga-hotspot-active-card .marga-hotspot-active-table tbody {
    display: table-row-group !important;
    width: auto !important;
  }

  body.marga-router-os .marga-hotspot-active-card .marga-hotspot-active-table tr,
  body.marga-router-os .marga-hotspot-active-card .marga-hotspot-active-table tbody tr {
    display: table-row !important;
    width: auto !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent;
  }

  body.marga-router-os .marga-hotspot-active-card .marga-hotspot-active-table th,
  body.marga-router-os .marga-hotspot-active-card .marga-hotspot-active-table td,
  body.marga-router-os .marga-hotspot-active-card .marga-hotspot-active-table tbody td {
    display: table-cell !important;
    width: auto !important;
    min-height: 0 !important;
    box-sizing: border-box;
    padding: 6px 8px !important;
    border-right: 1px solid rgba(80, 105, 153, 0.35) !important;
    border-bottom: 1px solid rgba(80, 105, 153, 0.35) !important;
    border-radius: 0 !important;
    background: rgba(13, 27, 51, 0.72);
    color: #e7f0ff;
    font-size: 8px !important;
    line-height: 1.25;
    text-align: left !important;
    white-space: nowrap !important;
    vertical-align: middle;
  }

  body.marga-router-os .marga-hotspot-active-card .marga-hotspot-active-table th {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    background: #14213d;
    color: #8fc9ff;
    font-size: 7px !important;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  body.marga-router-os .marga-hotspot-active-card .marga-hotspot-active-table td::before {
    display: none !important;
    content: none !important;
  }

  body.marga-router-os .marga-hotspot-active-card .marga-hotspot-active-table th:first-child,
  body.marga-router-os .marga-hotspot-active-card .marga-hotspot-active-table td:first-child {
    position: sticky;
    z-index: 2;
    left: 0;
    width: 25px !important;
    min-width: 25px;
    max-width: 25px;
    padding-right: 5px !important;
    padding-left: 5px !important;
    background: #101c34;
    text-align: center !important;
  }

  body.marga-router-os .marga-hotspot-active-card .marga-hotspot-active-table th:first-child {
    z-index: 3;
    background: #14213d;
  }

  body.marga-router-os .marga-hotspot-active-card .marga-hotspot-active-table tbody tr:hover td {
    background: rgba(23, 48, 81, 0.88);
  }

  body.marga-router-os .marga-hotspot-active-card .marga-hotspot-active-table tbody tr:hover td:first-child {
    background: #173051;
  }
}