:root,
[data-theme="light"] {
  color-scheme: light;
  --ink: #071820;
  --ink-soft: #3d5a66;
  --foam: #e6f2f4;
  --mist: #cfe4e9;
  --sea: #0c7a84;
  --sea-deep: #07545c;
  --sea-soft: rgba(12, 122, 132, 0.14);
  --signal: #e09a12;
  --signal-ink: #2f2200;
  --signal-soft: rgba(224, 154, 18, 0.18);
  --danger: #c0392b;
  --danger-soft: rgba(176, 48, 48, 0.1);
  --success: #145c3c;
  --success-soft: rgba(31, 138, 91, 0.12);
  --radius: 18px;
  --shadow: 0 22px 60px rgba(7, 24, 32, 0.14);
  --font-display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --max: 1180px;
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
  --text-md: clamp(0.9375rem, 0.9rem + 0.22vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  --text-xl: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
  --text-display: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-body: 1.6;
  --tracking-tight: -0.02em;
  --tracking-normal: -0.006em;
  --tracking-wide: 0.06em;
  --space-page: clamp(0.85rem, 2.2vw, 1.5rem);
  --muted: var(--ink-soft);
  --text-muted: var(--ink-soft);
  --bg: #d9ecef;

  --surface: rgba(255, 255, 255, 0.78);
  --surface-solid: #ffffff;
  --surface-2: rgba(247, 251, 252, 0.92);
  --surface-3: rgba(7, 24, 32, 0.045);
  --border: rgba(7, 24, 32, 0.08);
  --border-strong: rgba(7, 24, 32, 0.14);
  --topbar-bg: rgba(245, 251, 252, 0.72);
  --workspace-bg:
    radial-gradient(ellipse 55% 45% at 100% -10%, rgba(12, 122, 132, 0.22), transparent 58%),
    radial-gradient(ellipse 45% 40% at -5% 100%, rgba(224, 154, 18, 0.14), transparent 52%),
    radial-gradient(ellipse 40% 30% at 55% 20%, rgba(12, 122, 132, 0.08), transparent 60%),
    linear-gradient(165deg, #eaf5f7 0%, #d9ecef 48%, #e7f1f3 100%);
  --hero-bg:
    linear-gradient(135deg, rgba(12, 122, 132, 0.14), transparent 48%),
    linear-gradient(180deg, #ffffff 0%, #f1f8f9 100%);
  --sidebar-bg:
    radial-gradient(ellipse 90% 55% at 0% 0%, rgba(12, 122, 132, 0.32), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(224, 154, 18, 0.1), transparent 50%),
    linear-gradient(185deg, #101f27 0%, #0a151c 100%);
  --sidebar-text: #e8f2f4;
  --sidebar-muted: rgba(232, 242, 244, 0.45);
  --sidebar-link: rgba(232, 242, 244, 0.78);
  --input-bg: rgba(255, 255, 255, 0.92);
  --input-border: rgba(7, 24, 32, 0.14);
  --chip-sea-bg: rgba(12, 122, 132, 0.14);
  --chip-sea-fg: #0b6670;
  --chip-signal-bg: rgba(224, 154, 18, 0.18);
  --chip-signal-fg: #8a5a00;
  --menu-shadow: 0 24px 50px rgba(7, 24, 32, 0.16);
  --scrim: rgba(8, 16, 22, 0.55);
  --notice-info-bg: rgba(224, 154, 18, 0.14);
  --notice-info-border: rgba(224, 154, 18, 0.35);
  --notice-info-fg: #5c3d00;
  --notice-success-bg: rgba(31, 138, 91, 0.12);
  --notice-success-border: rgba(31, 138, 91, 0.28);
  --notice-success-fg: #145c3c;
  --notice-error-bg: rgba(176, 48, 48, 0.1);
  --notice-error-border: rgba(176, 48, 48, 0.28);
  --notice-error-fg: #8a1f1f;
  --card-shine: linear-gradient(135deg, rgba(255, 255, 255, 0.55), transparent 42%);
  --card-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 18px 40px rgba(7, 24, 32, 0.08);
}

[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f2f7fa;
  --ink-soft: #b8cad4;
  --foam: #0a1118;
  --mist: #1a2832;
  --sea: #52d0db;
  --sea-deep: #9ae8ef;
  --sea-soft: rgba(82, 208, 219, 0.2);
  --signal: #f5c44a;
  --signal-ink: #211805;
  --signal-soft: rgba(245, 196, 74, 0.18);
  --danger: #f47a6e;
  --danger-soft: rgba(244, 122, 110, 0.16);
  --success: #78d9a8;
  --success-soft: rgba(120, 217, 168, 0.16);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  --muted: #9db0bc;
  --text-muted: #9db0bc;
  --bg: #0a1118;

  --surface: rgba(24, 34, 42, 0.9);
  --surface-solid: #1a2530;
  --surface-2: rgba(30, 42, 52, 0.94);
  --surface-3: rgba(255, 255, 255, 0.07);
  --border: rgba(232, 238, 242, 0.15);
  --border-strong: rgba(232, 238, 242, 0.24);
  --topbar-bg: rgba(12, 18, 26, 0.88);
  --workspace-bg:
    radial-gradient(ellipse 55% 42% at 100% -8%, rgba(82, 208, 219, 0.22), transparent 55%),
    radial-gradient(ellipse 45% 38% at -8% 105%, rgba(245, 196, 74, 0.12), transparent 50%),
    radial-gradient(ellipse 35% 28% at 45% 30%, rgba(82, 208, 219, 0.09), transparent 60%),
    linear-gradient(165deg, #0c141c 0%, #0a1118 55%, #0e161e 100%);
  --hero-bg:
    linear-gradient(135deg, rgba(82, 208, 219, 0.16), transparent 48%),
    linear-gradient(180deg, #1a2832 0%, #1a2530 100%);
  --sidebar-bg:
    radial-gradient(ellipse 90% 55% at 0% 0%, rgba(82, 208, 219, 0.28), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(245, 196, 74, 0.1), transparent 50%),
    linear-gradient(185deg, #0f181f 0%, #0a1016 100%);
  --sidebar-text: #eef5f7;
  --sidebar-muted: rgba(238, 245, 247, 0.62);
  --sidebar-link: rgba(238, 245, 247, 0.9);
  --input-bg: rgba(16, 24, 32, 0.96);
  --input-border: rgba(232, 238, 242, 0.22);
  --chip-sea-bg: rgba(82, 208, 219, 0.18);
  --chip-sea-fg: #a8edf3;
  --chip-signal-bg: rgba(245, 196, 74, 0.18);
  --chip-signal-fg: #f8dc8e;
  --menu-shadow: 0 24px 50px rgba(0, 0, 0, 0.55);
  --scrim: rgba(0, 0, 0, 0.68);
  --notice-info-bg: rgba(245, 196, 74, 0.14);
  --notice-info-border: rgba(245, 196, 74, 0.34);
  --notice-info-fg: #f8dc8e;
  --notice-success-bg: rgba(120, 217, 168, 0.14);
  --notice-success-border: rgba(120, 217, 168, 0.34);
  --notice-success-fg: #a8e8c8;
  --notice-error-bg: rgba(244, 122, 110, 0.14);
  --notice-error-border: rgba(244, 122, 110, 0.34);
  --notice-error-fg: #f5aaa2;
  --card-shine: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 42%);
  --card-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 22px 48px rgba(0, 0, 0, 0.4);
}


*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-md, 1rem);
  color: var(--ink);
  background: var(--foam);
  line-height: var(--leading-body, 1.6);
  letter-spacing: var(--tracking-normal, -0.006em);
  min-height: 100vh;
  text-wrap: pretty;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  display: block;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(100% - 2rem, var(--max));
  margin: 0 auto;
  padding: 1.25rem 0;
  pointer-events: none;
}

.site-header a,
.site-header .btn,
.site-header button {
  pointer-events: auto;
}

.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  letter-spacing: var(--tracking-wide, 0.06em);
  text-transform: uppercase;
}

.brand span {
  color: var(--sea);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 0;
  border-radius: 999px;
  padding: 0.75rem 1.25rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm, 0.9375rem);
  letter-spacing: -0.01em;
  line-height: 1.25;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--border-strong);
}

.btn-ghost:hover {
  background: var(--surface-3);
}

.btn-primary {
  background: var(--sea);
  color: #fff;
  box-shadow: 0 10px 24px rgba(14, 124, 134, 0.28);
}

.btn-primary:hover {
  background: var(--sea-deep);
}

.btn-signal {
  background: var(--signal);
  color: var(--signal-ink);
  box-shadow: 0 10px 24px rgba(232, 163, 23, 0.28);
}

.btn-signal:hover {
  filter: brightness(1.05);
}

.btn-danger {
  background: var(--danger);
  color: #fff;
  box-shadow: 0 10px 24px rgba(192, 57, 43, 0.28);
}

.btn-danger:hover {
  filter: brightness(1.05);
}

.btn-block {
  width: 100%;
}

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 85% 15%, rgba(14, 124, 134, 0.22), transparent 55%),
    radial-gradient(ellipse 55% 45% at 10% 80%, rgba(232, 163, 23, 0.16), transparent 50%),
    linear-gradient(160deg, #eef6f7 0%, #dceef1 42%, #c5e0e6 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(11, 31, 42, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 31, 42, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent);
  pointer-events: none;
  animation: gridDrift 28s linear infinite;
}

.hero-visual {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.orbit {
  position: absolute;
  right: -8%;
  top: 12%;
  width: min(58vw, 640px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(14, 124, 134, 0.25);
  animation: spin 48s linear infinite;
}

.orbit::before,
.orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--sea);
}

.orbit::before {
  width: 14px;
  height: 14px;
  top: 12%;
  left: 18%;
  box-shadow: 0 0 0 8px rgba(14, 124, 134, 0.12);
}

.orbit::after {
  width: 10px;
  height: 10px;
  bottom: 22%;
  right: 16%;
  background: var(--signal);
  box-shadow: 0 0 0 8px rgba(232, 163, 23, 0.14);
}

.hero-inner {
  position: relative;
  z-index: 30;
  width: min(100% - 2rem, var(--max));
  margin: 0 auto;
  padding: 7.5rem 0 4.5rem;
  pointer-events: auto;
}

.hero-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: var(--tracking-tight, -0.02em);
  margin: 0 0 1.1rem;
  max-width: 12ch;
  animation: rise 0.8s ease both;
}

.hero-brand-link {
  position: relative;
  z-index: 5;
  color: inherit;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.hero-brand-link:hover {
  opacity: 0.88;
  transform: translateY(-2px);
}

.hero-brand-link:focus-visible {
  outline: 3px solid rgba(14, 124, 134, 0.45);
  outline-offset: 6px;
  border-radius: 8px;
}

.hero-brand em {
  font-style: normal;
  color: var(--sea);
}

.hero-copy {
  max-width: 34rem;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  color: var(--ink-soft);
  margin: 0 0 1.75rem;
  animation: rise 0.8s ease 0.12s both;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  animation: rise 0.8s ease 0.24s both;
}

.auth-shell {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  background:
    radial-gradient(ellipse 70% 50% at 20% 10%, rgba(14, 124, 134, 0.18), transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 90%, rgba(232, 163, 23, 0.14), transparent 50%),
    linear-gradient(160deg, #eef6f7, #d7e8ec);
}

.auth-panel {
  width: min(100%, 440px);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(11, 31, 42, 0.08);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--shadow);
  padding: 2rem 1.5rem;
  animation: rise 0.55s ease both;
}

.auth-panel h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2rem);
  margin: 0.35rem 0 0.35rem;
  letter-spacing: -0.02em;
}

.auth-panel .lede {
  margin: 0 0 1.4rem;
  color: var(--ink-soft);
}

.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: 100%;
  background: #fff;
  color: #1f1f1f;
  border: 1px solid rgba(11, 31, 42, 0.16);
  box-shadow: 0 1px 2px rgba(11, 31, 42, 0.06);
  text-decoration: none;
  font-weight: 700;
}

.btn-google:hover {
  background: #f8fafb;
  border-color: rgba(11, 31, 42, 0.28);
  color: #1f1f1f;
}

.btn-google-icon {
  flex: 0 0 auto;
}

.auth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  margin: 1.1rem 0 1.2rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  background: rgba(11, 31, 42, 0.12);
}

.auth-divider span {
  white-space: nowrap;
}

.auth-form-locked {
  opacity: 0.55;
  pointer-events: none;
}

.auth-brand {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--ink);
}

.auth-brand span {
  color: var(--sea);
}

.auth-role {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.65rem;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: rgba(14, 124, 134, 0.12);
  color: var(--sea-deep);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Employee / staff auth ? distinct from owner card auth */
.staff-shell {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.15fr);
  background: #f4f0e8;
}

.staff-rail {
  position: relative;
  color: #f4f0e8;
  background:
    linear-gradient(165deg, rgba(232, 163, 23, 0.18), transparent 42%),
    linear-gradient(200deg, #142028 0%, #0b1f2a 55%, #163039 100%);
  overflow: hidden;
}

.staff-rail::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(244, 240, 232, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 240, 232, 0.05) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(180deg, black, transparent 85%);
  pointer-events: none;
}

.staff-rail-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  min-height: 100%;
  padding: clamp(1.5rem, 4vw, 3rem);
  animation: rise 0.6s ease both;
}

.staff-kicker {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide, 0.06em);
  text-transform: uppercase;
  color: var(--signal);
}

.staff-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: var(--tracking-wide, 0.06em);
  text-transform: uppercase;
  color: #fff;
}

.staff-logo span {
  color: var(--signal);
}

.staff-rail-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0.35rem 0 0;
  max-width: 12ch;
}

.staff-rail-copy {
  margin: 0;
  max-width: 28ch;
  color: rgba(244, 240, 232, 0.78);
  font-size: 1rem;
}

.staff-points {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.staff-points li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(244, 240, 232, 0.88);
}

.staff-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 1px;
  background: var(--signal);
}

.staff-shell .staff-main {
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  background:
    radial-gradient(ellipse 60% 40% at 90% 10%, rgba(232, 163, 23, 0.16), transparent 55%),
    linear-gradient(180deg, #f7f3eb 0%, #ebe4d6 100%);
}

.staff-card {
  width: min(100%, 460px);
  background: #fffdf8;
  border: 1px solid rgba(20, 32, 40, 0.1);
  border-radius: 6px;
  box-shadow: 0 16px 40px rgba(20, 32, 40, 0.1);
  padding: 1.75rem 1.4rem;
  color: #142028;
  animation: rise 0.55s ease 0.08s both;
}

.staff-card-wide {
  width: min(100%, 520px);
}

.staff-badge {
  display: inline-flex;
  margin-bottom: 0.7rem;
  padding: 0.3rem 0.7rem;
  border-radius: 4px;
  background: #142028;
  color: var(--signal);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide, 0.06em);
  text-transform: uppercase;
}

.staff-card h1 {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3.5vw, 2rem);
  margin: 0 0 0.35rem;
  letter-spacing: -0.02em;
  color: #142028;
}

.staff-card .lede {
  margin: 0 0 1.35rem;
  color: #4a5560;
}

.staff-card .form-group {
  margin-bottom: 1.15rem;
}

.staff-card .form-group label {
  color: #142028;
  font-size: 0.92rem;
  font-weight: 800;
  margin-bottom: 0.45rem;
}

.staff-card .form-control {
  border-radius: 8px;
  border: 2px solid rgba(20, 32, 40, 0.28);
  background: #ffffff;
  color: #142028;
  padding: 0.95rem 1.05rem;
  font-size: 1.05rem;
  font-weight: 700;
  box-shadow: inset 0 1px 2px rgba(20, 32, 40, 0.05);
}

.staff-card .form-control::placeholder {
  color: rgba(20, 32, 40, 0.4);
  font-weight: 600;
  opacity: 1;
}

.staff-card .form-control:hover {
  border-color: rgba(20, 32, 40, 0.42);
}

.staff-card .form-control:focus {
  border-color: #c48a12;
  box-shadow: 0 0 0 4px rgba(232, 163, 23, 0.24);
  outline: none;
}

.staff-card .join-code-input {
  font-size: 1.35rem;
  letter-spacing: 0.42em;
  font-weight: 800;
}

.staff-card .password-field .password-input {
  padding-right: 3rem;
}

.staff-card .password-toggle {
  color: #4a5560;
}

.staff-card .password-toggle:hover {
  color: #142028;
  background: rgba(20, 32, 40, 0.08);
}

.btn-staff {
  background: #142028;
  color: #fffdf8;
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(20, 32, 40, 0.22);
}

.btn-staff:hover {
  background: #1d303b;
  filter: none;
}

.staff-footer {
  color: #4a5560;
}

.staff-footer a {
  color: #8a5a00;
}

.join-code-input {
  letter-spacing: 0.35em;
  font-weight: 800;
  font-size: 1.15rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.code-status {
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-soft);
}

.code-status.is-ok {
  color: #1f8a5b;
}

.code-status.is-bad {
  color: var(--danger);
}

.code-status.is-pending {
  color: #8a5a00;
}

.join-code-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  background: #142028;
  color: #f4f0e8;
}

.join-code-banner .label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal);
}

.join-code-value {
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: 0.28em;
  font-variant-numeric: tabular-nums;
  user-select: all;
}

.join-code-banner p {
  margin: 0;
  max-width: 28rem;
  color: rgba(244, 240, 232, 0.78);
  font-size: 0.92rem;
}

.join-code-actions {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
}

.notice {
  border-radius: 6px;
  padding: 0.9rem 1rem;
  margin-bottom: 1.15rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.45;
}

.notice-info {
  background: var(--notice-info-bg);
  border: 1px solid var(--notice-info-border);
  color: var(--notice-info-fg);
}

.notice-success {
  background: var(--notice-success-bg);
  border: 1px solid var(--notice-success-border);
  color: var(--notice-success-fg);
}

.notice-error {
  background: var(--notice-error-bg);
  border: 1px solid var(--notice-error-border);
  color: var(--notice-error-fg);
}

.pending-meta {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1.35rem;
  padding: 1rem;
  border: 1px solid rgba(20, 32, 40, 0.1);
  border-radius: 6px;
  background: #f7f3eb;
}

.pending-meta .meta-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 0.2rem;
}

.pending-meta .meta-value {
  font-weight: 700;
  color: #142028;
}

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

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

@media (min-width: 1100px) {
  .module-grid-8 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.staff-sidebar-action {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.9rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.staff-app .staff-sidebar .staff-sidebar-action:hover,
.staff-app .staff-sidebar .staff-sidebar-action.active {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.panel-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.panel-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.panel-head-row h2 {
  margin: 0;
}

.field-hint {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  line-height: 1.35;
  opacity: 0.72;
}

.mikrotik-onboard-modal {
  place-items: end center;
  padding: 0;
  overflow: hidden;
}

.mikrotik-onboard-panel {
  --modal-ink: #eef6f8;
  --modal-ink-soft: rgba(238, 246, 248, 0.82);
  --modal-muted: rgba(238, 246, 248, 0.64);
  --modal-border: rgba(255, 255, 255, 0.12);
  --modal-border-strong: rgba(255, 255, 255, 0.2);
  --modal-surface: rgba(255, 255, 255, 0.05);
  --modal-surface-2: rgba(255, 255, 255, 0.09);
  --modal-signal: #7ddea0;
  --modal-sea: #52d0db;

  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 32rem);
  max-width: 100%;
  max-height: min(94dvh, 100%);
  height: auto;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px 22px 0 0;
  background:
    radial-gradient(ellipse 80% 50% at 100% -10%, rgba(46, 204, 113, 0.18), transparent 55%),
    radial-gradient(ellipse 60% 45% at -5% 0%, rgba(82, 208, 219, 0.2), transparent 52%),
    linear-gradient(185deg, #1a3742 0%, #12252e 42%, #0d171d 100%);
  color: var(--modal-ink);
  box-shadow:
    0 -18px 48px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.mikrotik-onboard-panel::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 0.28rem;
  margin: 0.5rem auto 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  flex: 0 0 auto;
}

.role-modal-panel.mikrotik-onboard-panel {
  overflow: hidden;
  width: min(100%, 32rem);
  max-height: min(94dvh, 100%);
  padding: 0;
}

.mikrotik-onboard-head {
  flex: 0 0 auto;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0;
  padding: 1rem 1.15rem 1rem;
  border-bottom: 1px solid var(--modal-border, rgba(255, 255, 255, 0.08));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(8, 16, 22, 0.12));
}

.mikrotik-onboard-head .role-modal-close {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 12px;
  border: 1px solid var(--modal-border, rgba(255, 255, 255, 0.14));
  background: rgba(255, 255, 255, 0.05);
}

.mikrotik-onboard-title-block {
  min-width: 0;
  flex: 1 1 auto;
}

.mikrotik-onboard-progress {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  width: min(100%, 12rem);
  margin: 0 0 0.7rem;
}

.mikrotik-onboard-progress-seg {
  height: 0.3rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.mikrotik-onboard-progress-seg.is-active,
.mikrotik-onboard-progress-seg.is-done {
  background: linear-gradient(90deg, #2ecc71, #52d0db);
  box-shadow: 0 0 14px rgba(46, 204, 113, 0.35);
}

.mikrotik-onboard-head .role-modal-kicker {
  margin-bottom: 0.25rem;
  color: var(--modal-signal, #7ddea0);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 800;
}

.mikrotik-onboard-head h2 {
  margin: 0;
  font-size: clamp(1.15rem, 3.6vw, 1.4rem);
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--modal-ink, #eef6f8);
}

.mikrotik-onboard-sub {
  margin: 0.4rem 0 0;
  font-size: clamp(0.8rem, 2.5vw, 0.9rem);
  line-height: 1.45;
  color: var(--modal-ink-soft, rgba(232, 242, 244, 0.78));
  max-width: 44ch;
}

.mikrotik-onboard-process {
  margin: 0 0 1rem;
  padding: 0.75rem 0.85rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
}

.mikrotik-onboard-process[hidden] {
  display: none !important;
}

.mikrotik-onboard-process-heading {
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(232, 242, 244, 0.65);
}

.mikrotik-onboard-process-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.mikrotik-onboard-process-item {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
  font-size: 0.78rem;
  line-height: 1.35;
}

.mikrotik-onboard-process-icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.05rem;
  border-radius: 999px;
  border: 2px solid currentColor;
  opacity: 0.9;
}

.mikrotik-onboard-process-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.mikrotik-onboard-process-label {
  font-weight: 700;
}

.mikrotik-onboard-process-msg {
  font-size: 0.72rem;
  opacity: 0.88;
  word-break: break-word;
}

.mikrotik-onboard-process-item.is-waiting,
.mikrotik-onboard-process-item.is-checking {
  color: #cbd5e1;
}

.mikrotik-onboard-process-item.is-checking .mikrotik-onboard-process-icon {
  animation: mikrotik-discover-pulse 1.25s ease-out infinite;
}

.mikrotik-onboard-process-item.is-ok {
  color: #bbf7d0;
}

.mikrotik-onboard-process-item.is-ok .mikrotik-onboard-process-icon {
  background: rgba(46, 204, 113, 0.25);
  border-color: rgba(46, 204, 113, 0.85);
  box-shadow: inset 0 0 0 4px rgba(46, 204, 113, 0.35);
}

.mikrotik-onboard-process-item.is-fail {
  color: #fecaca;
}

.mikrotik-onboard-process-item.is-fail .mikrotik-onboard-process-icon {
  border-color: rgba(231, 76, 60, 0.9);
  background: rgba(231, 76, 60, 0.15);
}

.mikrotik-onboard-process-item.is-warn {
  color: #fde68a;
}

.mikrotik-onboard-process-item.is-warn .mikrotik-onboard-process-icon {
  border-color: rgba(241, 196, 15, 0.85);
  background: rgba(241, 196, 15, 0.12);
}

.mikrotik-onboard-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1rem 1.15rem 1.1rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

/* Floating loading overlay on Connect / Onboard popup */
.mikrotik-onboard-loading {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background:
    radial-gradient(ellipse 55% 45% at 50% 40%, rgba(82, 208, 219, 0.14), transparent 60%),
    rgba(6, 12, 18, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: mikrotik-onboard-loading-in 0.22s ease;
}

.mikrotik-onboard-loading[hidden] {
  display: none !important;
}

.mikrotik-onboard-modal.is-loading .mikrotik-onboard-panel {
  pointer-events: none;
}

.mikrotik-onboard-modal.is-loading .mikrotik-onboard-loading {
  pointer-events: auto;
}

@keyframes mikrotik-onboard-loading-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.mikrotik-onboard-loading-card {
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  width: min(100%, 16.5rem);
  padding: 1.45rem 1.25rem 1.3rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(82, 208, 219, 0.16), transparent 55%),
    linear-gradient(180deg, rgba(28, 44, 54, 0.96), rgba(14, 22, 30, 0.98));
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-align: center;
  animation: mikrotik-onboard-loading-float 2.8s ease-in-out infinite;
}

@keyframes mikrotik-onboard-loading-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

.mikrotik-onboard-loading-orb {
  position: relative;
  width: 4.4rem;
  height: 4.4rem;
  display: grid;
  place-items: center;
  margin-bottom: 0.15rem;
}

.mikrotik-onboard-loading-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #52d0db;
  border-right-color: rgba(82, 208, 219, 0.35);
  animation: mikrotik-onboard-spin 0.9s linear infinite;
}

.mikrotik-onboard-loading-ring.is-slow {
  inset: 0.35rem;
  border-top-color: #2ecc71;
  border-right-color: rgba(46, 204, 113, 0.3);
  animation-duration: 1.35s;
  animation-direction: reverse;
}

.mikrotik-onboard-loading-core {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 14px;
  color: #9ae8ef;
  background:
    linear-gradient(145deg, rgba(82, 208, 219, 0.28), rgba(46, 204, 113, 0.16));
  box-shadow:
    0 0 24px rgba(82, 208, 219, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  animation: mikrotik-onboard-core-pulse 1.8s ease-in-out infinite;
}

@keyframes mikrotik-onboard-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes mikrotik-onboard-core-pulse {
  0%,
  100% {
    box-shadow:
      0 0 18px rgba(82, 208, 219, 0.28),
      inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  }
  50% {
    box-shadow:
      0 0 30px rgba(46, 204, 113, 0.42),
      inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  }
}

.mikrotik-onboard-loading-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: #eef6f8;
}

.mikrotik-onboard-loading-sub {
  margin: 0;
  max-width: 22ch;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(238, 246, 248, 0.68);
}

@media (prefers-reduced-motion: reduce) {
  .mikrotik-onboard-loading-card,
  .mikrotik-onboard-loading-ring,
  .mikrotik-onboard-loading-core {
    animation: none;
  }
}

.mikrotik-discover-live {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.mikrotik-discover-pulse {
  flex: 0 0 auto;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: #2ecc71;
  box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.55);
  animation: mikrotik-pulse 1.6s ease-out infinite;
}

.mikrotik-discover-live:has(.mikrotik-discover-status.is-error) .mikrotik-discover-pulse {
  background: #ff8e8e;
  box-shadow: none;
  animation: none;
}

@keyframes mikrotik-pulse {
  0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(46, 204, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

.mikrotik-discover-refresh {
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  cursor: pointer;
  line-height: 1;
  font-size: 0.85rem;
}

.mikrotik-discover-refresh:hover {
  background: rgba(255, 255, 255, 0.1);
}

.mikrotik-discover-refresh:disabled {
  opacity: 0.55;
  cursor: wait;
}

.mikrotik-discover-status {
  margin: 0;
  max-width: 7.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(232, 242, 244, 0.72);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mikrotik-discover-status.is-error {
  color: #ffb4b4;
}

.mikrotik-discover-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #2ecc71;
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.25);
}

.mikrotik-discover-ip {
  font-size: 0.72rem;
  font-weight: 700;
  color: #9af0bc;
  font-variant-numeric: tabular-nums;
}

.mikrotik-host-field {
  position: relative;
  z-index: 22;
}

.mikrotik-host-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.28rem;
}

.mikrotik-host-label-row label {
  margin-bottom: 0 !important;
}

.mikrotik-host-combo {
  position: relative;
  display: grid;
}

.mikrotik-host-combo .mikrotik-host-input {
  padding-right: 2.5rem;
}

.mikrotik-host-toggle {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(232, 242, 244, 0.7);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
}

.mikrotik-host-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.mikrotik-host-picker {
  display: grid;
  gap: 0.25rem;
  max-height: 10rem;
  overflow-x: hidden;
  overflow-y: auto;
  margin-top: 0.4rem;
  padding: 0.35rem;
  border-radius: 10px;
  border: 1px solid rgba(46, 204, 113, 0.28);
  background: rgba(8, 18, 24, 0.92);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
  scrollbar-width: thin;
}

.mikrotik-host-picker[hidden] {
  display: none !important;
}

.mikrotik-host-empty {
  margin: 0;
  padding: 0.65rem 0.55rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(232, 242, 244, 0.62);
}

.mikrotik-host-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.6rem;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #e8f2f4;
  text-align: left;
  cursor: pointer;
}

.mikrotik-host-option.is-new {
  border-color: rgba(46, 204, 113, 0.4);
  background: rgba(46, 204, 113, 0.1);
}

.mikrotik-host-option.is-new .mikrotik-discover-dot {
  background: #2ecc71;
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.25);
}

.mikrotik-host-option.is-new .mikrotik-discover-ip {
  color: #9af0bc;
}

.mikrotik-host-option.is-new:hover,
.mikrotik-host-option.is-new.is-selected {
  border-color: #2ecc71;
  background: rgba(46, 204, 113, 0.2);
}

.mikrotik-host-option.is-onboarded {
  border-color: rgba(231, 76, 60, 0.45);
  background: rgba(231, 76, 60, 0.12);
}

.mikrotik-host-option.is-onboarded .mikrotik-discover-dot {
  background: #e74c3c;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.25);
}

.mikrotik-host-option.is-onboarded .mikrotik-discover-ip {
  color: #ffb4b4;
}

.mikrotik-host-option.is-onboarded:hover,
.mikrotik-host-option.is-onboarded.is-selected {
  border-color: #e74c3c;
  background: rgba(231, 76, 60, 0.22);
}

.mikrotik-host-option-text {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.mikrotik-host-option-text strong {
  font-size: 0.84rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mikrotik-host-badge {
  flex: 0 0 auto;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.mikrotik-host-option.is-new .mikrotik-host-badge {
  background: rgba(46, 204, 113, 0.22);
  color: #9af0bc;
}

.mikrotik-host-option.is-onboarded .mikrotik-host-badge {
  background: rgba(231, 76, 60, 0.22);
  color: #ffb4b4;
}

.mikrotik-host-hint {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(232, 242, 244, 0.58);
}

.mikrotik-tunnel-card {
  margin: 0 0 1.05rem;
  padding: 1rem 1.05rem 1.05rem;
  border-radius: 18px;
  border: 1px solid rgba(125, 222, 160, 0.28);
  background:
    linear-gradient(165deg, rgba(28, 78, 62, 0.38), rgba(16, 48, 38, 0.22) 55%, rgba(12, 28, 34, 0.14));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mikrotik-tunnel-card.is-awaiting-payment {
  border-color: rgba(14, 165, 233, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 3px rgba(14, 165, 233, 0.1);
}

.mikrotik-tunnel-card.is-optional {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
}

.mikrotik-tunnel-head {
  margin-bottom: 0.95rem;
}

.mikrotik-section-label {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7ddea0;
}

.mikrotik-tunnel-lead {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(232, 242, 244, 0.7);
}

.mikrotik-tunnel-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 0 0 0.85rem;
}

.mikrotik-tunnel-rail-item {
  display: block;
  padding: 0.42rem 0.35rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
  color: rgba(232, 242, 244, 0.55);
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.mikrotik-tunnel-rail-item.is-active {
  border-color: rgba(56, 189, 248, 0.45);
  background: linear-gradient(145deg, rgba(14, 165, 233, 0.28), rgba(59, 130, 246, 0.16));
  color: #dbeafe;
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.12);
}

.mikrotik-tunnel-rail-item.is-done {
  border-color: rgba(46, 204, 113, 0.35);
  background: rgba(46, 204, 113, 0.14);
  color: #b8f5cd;
}

.mikrotik-tunnel-sop {
  margin: 0.65rem 0 0.85rem;
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.12);
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.82);
}

.mikrotik-tunnel-sop summary {
  cursor: pointer;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

.mikrotik-tunnel-sop-list {
  margin: 0.55rem 0 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.35rem;
}

.mikrotik-tunnel-sop-note {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  opacity: 0.85;
}

.mikrotik-tunnel-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.mikrotik-tunnel-step {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.85rem 0.9rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.14);
  opacity: 0.72;
  transition: opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.mikrotik-tunnel-step.is-active {
  opacity: 1;
  border-color: rgba(125, 222, 160, 0.34);
  background:
    linear-gradient(145deg, rgba(46, 204, 113, 0.12), rgba(12, 122, 132, 0.08) 55%, rgba(0, 0, 0, 0.1));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}

.mikrotik-tunnel-step.is-done {
  opacity: 1;
  border-color: rgba(125, 222, 160, 0.18);
  background: rgba(46, 204, 113, 0.06);
}

.mikrotik-tunnel-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  margin-top: 0.1rem;
  border-radius: 999px;
  border: 1px solid rgba(125, 222, 160, 0.45);
  background: rgba(46, 204, 113, 0.12);
  color: #9af0bc;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.mikrotik-tunnel-step.is-active .mikrotik-tunnel-step-num {
  background: linear-gradient(145deg, #2ecc71, #0c7a84);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.16);
}

.mikrotik-tunnel-step.is-done .mikrotik-tunnel-step-num {
  font-size: 0;
  background: rgba(46, 204, 113, 0.28);
  border-color: rgba(46, 204, 113, 0.55);
  color: #fff;
}

.mikrotik-tunnel-step.is-done .mikrotik-tunnel-step-num::after {
  content: "\2713";
  font-size: 0.72rem;
}

.mikrotik-tunnel-step-body {
  min-width: 0;
}

.mikrotik-tunnel-step-head {
  margin: 0 0 0.7rem;
}

.mikrotik-tunnel-step-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f2faf6;
  line-height: 1.25;
}

.mikrotik-tunnel-step-desc {
  margin: 0.28rem 0 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: rgba(232, 242, 244, 0.62);
  max-width: 46ch;
}

.mikrotik-tunnel-step-body > label,
.mikrotik-tunnel-phone-label {
  display: block;
  margin: 0 0 0.4rem;
  font-size: 0.74rem;
  font-weight: 700;
  color: rgba(232, 242, 244, 0.78);
}

.mikrotik-tunnel-phone-label {
  margin-top: 0.7rem;
}

.mikrotik-tunnel-fee-note {
  margin: 0.45rem 0 0;
  font-size: 0.74rem;
  line-height: 1.4;
  color: rgba(232, 242, 244, 0.62);
}

.mikrotik-tunnel-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
}

#mikrotik-tunnel-generate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.55rem;
  padding-inline: 1rem;
  white-space: nowrap;
}

#mikrotik-tunnel-generate.is-busy {
  cursor: wait;
}

.mikrotik-tunnel-btn-spinner,
.mikrotik-tunnel-paywait-spinner {
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-top-color: #fff;
  animation: mikrotik-spin 0.75s linear infinite;
  flex: 0 0 auto;
}

.mikrotik-tunnel-paywait {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 0.85rem;
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  border: 1px solid rgba(14, 165, 233, 0.35);
  background:
    linear-gradient(145deg, rgba(14, 165, 233, 0.16), rgba(14, 165, 233, 0.06));
  animation: mikrotik-paywait-in 0.28s ease both;
}

.mikrotik-tunnel-paywait[hidden] {
  display: none !important;
}

.mikrotik-tunnel-paywait-spinner {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  border-color: rgba(125, 211, 252, 0.35);
  border-top-color: #7dd3fc;
}

.mikrotik-tunnel-paywait-copy {
  min-width: 0;
}

.mikrotik-tunnel-paywait-copy strong {
  display: block;
  margin: 0 0 0.2rem;
  font-size: 0.9rem;
  color: #e8f7ff;
}

.mikrotik-tunnel-paywait-copy p {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(232, 242, 244, 0.72);
}

@keyframes mikrotik-spin {
  to { transform: rotate(360deg); }
}

@keyframes mikrotik-paywait-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.mikrotik-tunnel-script-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  font-size: 0.76rem;
  font-weight: 650;
  color: rgba(232, 242, 244, 0.8);
}

.mikrotik-tunnel-peer-panel {
  margin-top: 0.75rem;
  padding: 0.75rem 0.85rem;
  border-radius: 14px;
  border: 1px solid rgba(232, 120, 90, 0.35);
  background: rgba(120, 40, 24, 0.22);
}

.mikrotik-tunnel-peer-panel[hidden] {
  display: none !important;
}

.mikrotik-tunnel-peer-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.45rem;
  font-size: 0.78rem;
  color: rgba(255, 220, 210, 0.95);
}

.mikrotik-tunnel-peer-lead {
  margin: 0 0 0.55rem;
  font-size: 0.74rem;
  line-height: 1.45;
  color: rgba(255, 230, 220, 0.78);
}

.mikrotik-tunnel-peer-block {
  margin: 0;
  max-height: 9rem;
  overflow: auto;
  padding: 0.65rem 0.7rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.28);
  font-size: 0.7rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-all;
  color: rgba(232, 242, 244, 0.88);
}

.mikrotik-tunnel-status,
.mikrotik-tunnel-tip {
  margin: 0.85rem 0 0;
  padding: 0.8rem 0.85rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.16);
  font-size: 0.76rem;
  line-height: 1.45;
  color: rgba(232, 242, 244, 0.72);
}

.mikrotik-tunnel-step-body > .mikrotik-tunnel-status,
.mikrotik-tunnel-step-body > .mikrotik-tunnel-tip,
.mikrotik-tunnel-check-panel > .mikrotik-tunnel-tip {
  margin-top: 0.7rem;
}

.mikrotik-tunnel-status[hidden],
.mikrotik-tunnel-tip[hidden] {
  display: none !important;
}

.mikrotik-tunnel-tip-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.4rem;
}

.mikrotik-tunnel-tip-icon {
  flex: 0 0 auto;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06);
  opacity: 0.9;
}

.mikrotik-tunnel-tip-title {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: inherit;
}

.mikrotik-tunnel-tip-lead {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: inherit;
  opacity: 0.92;
}

.mikrotik-tunnel-tip-steps {
  margin: 0.65rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.4rem;
  counter-reset: tip-step;
}

.mikrotik-tunnel-tip-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: start;
  margin: 0;
  padding: 0.45rem 0.55rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.4;
  color: inherit;
  counter-increment: tip-step;
}

.mikrotik-tunnel-tip-steps li::before {
  content: counter(tip-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.05rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1;
}

.mikrotik-tunnel-status.is-error,
.mikrotik-tunnel-tip.is-error {
  color: #ffc9c9;
  border-color: rgba(255, 133, 133, 0.28);
  background: rgba(192, 57, 43, 0.14);
}

.mikrotik-tunnel-status.is-ok,
.mikrotik-tunnel-tip.is-ok {
  color: #b8f5d0;
  border-color: rgba(46, 204, 113, 0.28);
  background: rgba(46, 204, 113, 0.1);
}

.mikrotik-tunnel-tip.is-warn {
  color: #d7f2ff;
  border-color: rgba(56, 189, 248, 0.32);
  background: linear-gradient(145deg, rgba(14, 165, 233, 0.14), rgba(12, 122, 132, 0.1));
}

.mikrotik-tunnel-status code,
.mikrotik-tunnel-tip code {
  font-size: 0.7rem;
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.28);
}

.mikrotik-tunnel-script {
  margin: 0;
  max-height: 10.5rem;
  overflow: auto;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.35);
  color: #d7ffe8;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.mikrotik-tunnel-ip-row {
  display: grid;
  gap: 0.65rem;
}

.mikrotik-tunnel-address {
  margin: 0;
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  border: 1px solid rgba(46, 204, 113, 0.28);
  background: rgba(46, 204, 113, 0.1);
  color: #9af0bc;
  font-size: 0.84rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

.mikrotik-tunnel-address-block {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.mikrotik-tunnel-address-note {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(148, 163, 184, 0.95);
}

.mikrotik-tunnel-copy {
  flex: 0 0 auto;
  white-space: nowrap;
}

.mikrotik-tunnel-check-panel {
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
}

.mikrotik-tunnel-verify-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  padding: 0.75rem 0.85rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.mikrotik-tunnel-verify-icon {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  border: 2px solid currentColor;
  opacity: 0.95;
}

.mikrotik-tunnel-verify-title {
  display: block;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.25;
}

.mikrotik-tunnel-verify-sub {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.72rem;
  opacity: 0.88;
}

.mikrotik-tunnel-verify-banner.is-waiting {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(148, 163, 184, 0.1);
  color: #cbd5e1;
}

.mikrotik-tunnel-verify-banner.is-checking {
  border-color: rgba(56, 189, 248, 0.35);
  background: rgba(14, 165, 233, 0.12);
  color: #dbeafe;
}

.mikrotik-tunnel-verify-banner.is-checking .mikrotik-tunnel-verify-icon {
  animation: mikrotik-discover-pulse 1.25s ease-out infinite;
}

.mikrotik-tunnel-verify-banner.is-ready {
  border-color: rgba(46, 204, 113, 0.4);
  background: linear-gradient(145deg, rgba(46, 204, 113, 0.22), rgba(16, 185, 129, 0.1));
  color: #d1fae5;
}

.mikrotik-tunnel-verify-banner.is-ready .mikrotik-tunnel-verify-icon {
  background: rgba(46, 204, 113, 0.25);
  box-shadow: inset 0 0 0 6px rgba(46, 204, 113, 0.35);
}

.mikrotik-tunnel-verify-banner.is-error {
  border-color: rgba(231, 76, 60, 0.38);
  background: linear-gradient(145deg, rgba(231, 76, 60, 0.2), rgba(192, 57, 43, 0.1));
  color: #fecaca;
}

.mikrotik-tunnel-verify-banner.is-warn {
  border-color: rgba(241, 196, 15, 0.35);
  background: rgba(241, 196, 15, 0.12);
  color: #fde68a;
}

.mikrotik-tunnel-verify-hint {
  margin: 0;
  padding: 0.45rem 0.6rem;
  border-radius: 10px;
  border-left: 3px solid rgba(56, 189, 248, 0.55);
  background: rgba(14, 165, 233, 0.08);
  font-size: 0.72rem;
  line-height: 1.4;
  color: rgba(232, 242, 244, 0.78);
}

.mikrotik-tunnel-verify-hint[hidden] {
  display: none !important;
}

.mikrotik-tunnel-check-row.is-compact {
  justify-content: center;
}

.mikrotik-tunnel-check-row.is-compact .mikrotik-tunnel-check-now {
  width: 100%;
  max-width: 14rem;
}

.mikrotik-tunnel-tip.is-compact .mikrotik-tunnel-tip-lead {
  margin-bottom: 0;
}

.mikrotik-tunnel-check-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.mikrotik-tunnel-check {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  flex: 1 1 12rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(232, 242, 244, 0.82);
}

.mikrotik-tunnel-check-dot {
  flex: 0 0 auto;
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 999px;
  background: #f4c95d;
  box-shadow: 0 0 0 4px rgba(244, 201, 93, 0.12);
}

.mikrotik-tunnel-check.is-checking .mikrotik-tunnel-check-dot {
  background: #38bdf8;
  animation: mikrotik-discover-pulse 1.25s ease-out infinite;
}

.mikrotik-tunnel-check.is-ready {
  color: #b8f5d0;
}

.mikrotik-tunnel-check.is-ready .mikrotik-tunnel-check-dot {
  background: #2ecc71;
  box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.14);
}

.mikrotik-tunnel-check.is-error {
  color: #ffc9c9;
}

.mikrotik-tunnel-check.is-error .mikrotik-tunnel-check-dot {
  background: #ff8585;
  box-shadow: 0 0 0 4px rgba(255, 133, 133, 0.12);
}

.mikrotik-tunnel-meters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.mikrotik-tunnel-meter {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.mikrotik-tunnel-meter-label {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(232, 242, 244, 0.55);
}

.mikrotik-tunnel-meter-value {
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(232, 242, 244, 0.88);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mikrotik-tunnel-meter.is-checking {
  border-color: rgba(56, 189, 248, 0.28);
  background: rgba(14, 165, 233, 0.1);
}

.mikrotik-tunnel-meter.is-checking .mikrotik-tunnel-meter-value {
  color: #bae6fd;
}

.mikrotik-tunnel-meter.is-ready {
  border-color: rgba(46, 204, 113, 0.28);
  background: rgba(46, 204, 113, 0.1);
}

.mikrotik-tunnel-meter.is-ready .mikrotik-tunnel-meter-value {
  color: #9af0bc;
}

.mikrotik-tunnel-meter.is-error {
  border-color: rgba(231, 76, 60, 0.28);
  background: rgba(231, 76, 60, 0.1);
}

.mikrotik-tunnel-meter.is-error .mikrotik-tunnel-meter-value {
  color: #ffb4b4;
}

.mikrotik-tunnel-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
}

.mikrotik-tunnel-checklist.is-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

.mikrotik-verify-outcome {
  display: grid;
  gap: 0.45rem;
  margin: 0.55rem 0 0;
}

.mikrotik-verify-outcome[hidden] {
  display: none !important;
}

.mikrotik-verify-outcome-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.mikrotik-verify-outcome-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.mikrotik-verify-outcome-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.mikrotik-verify-outcome-details[hidden] {
  display: none !important;
}

.mikrotik-verify-outcome-col {
  padding: 0.55rem 0.6rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.12);
  min-width: 0;
}

.mikrotik-verify-outcome-col.is-ok {
  border-color: rgba(46, 204, 113, 0.28);
}

.mikrotik-verify-outcome-col.is-fail {
  border-color: rgba(231, 76, 60, 0.28);
}

.mikrotik-verify-outcome-heading {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.4rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
}

.mikrotik-verify-outcome-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
}

.mikrotik-verify-outcome-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.4rem;
  align-items: start;
  font-size: 0.72rem;
  line-height: 1.35;
}

.mikrotik-verify-outcome-list li strong {
  display: block;
  font-weight: 700;
}

.mikrotik-verify-outcome-list li span,
.mikrotik-verify-outcome-line span {
  display: block;
  margin-top: 0.08rem;
  opacity: 0.88;
  word-break: break-word;
}

.mikrotik-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  flex: 0 0 auto;
  color: rgba(148, 163, 184, 0.95);
  background: rgba(148, 163, 184, 0.14);
}

.mikrotik-status-icon.is-ok {
  color: #16a34a;
  background: rgba(22, 163, 74, 0.14);
}

.mikrotik-status-icon.is-fail {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.16);
}

.mikrotik-status-icon.is-warn {
  color: #d97706;
  background: rgba(217, 119, 6, 0.16);
}

.mikrotik-status-icon.is-waiting {
  color: rgba(148, 163, 184, 0.95);
  background: rgba(148, 163, 184, 0.14);
}

.mikrotik-tunnel-checklist-item .mikrotik-status-icon {
  margin-top: 0.1rem;
}

.mikrotik-tunnel-checklist[hidden] {
  display: none !important;
}

.mikrotik-tunnel-checklist-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.45rem;
  align-items: start;
  padding: 0.48rem 0.55rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.14);
}

.mikrotik-tunnel-checklist.is-compact .mikrotik-tunnel-checklist-item {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 2.1rem;
}

.mikrotik-tunnel-checklist-dot {
  width: 0.62rem;
  height: 0.62rem;
  margin-top: 0.28rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.8);
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.12);
}

.mikrotik-tunnel-checklist.is-compact .mikrotik-tunnel-checklist-dot {
  margin-top: 0;
}

.mikrotik-tunnel-checklist-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  color: rgba(232, 242, 244, 0.92);
}

.mikrotik-tunnel-checklist-message {
  display: block;
  grid-column: 2;
  margin-top: 0.08rem;
  font-size: 0.66rem;
  line-height: 1.35;
  color: rgba(232, 242, 244, 0.62);
}

.mikrotik-tunnel-checklist.is-compact .mikrotik-tunnel-checklist-message {
  grid-column: 1 / -1;
  margin-left: 1.05rem;
  margin-top: 0;
}

.mikrotik-tunnel-checklist-item.is-ok {
  border-color: rgba(46, 204, 113, 0.28);
  background: rgba(46, 204, 113, 0.08);
}

.mikrotik-tunnel-checklist-item.is-ok .mikrotik-tunnel-checklist-dot {
  background: #2ecc71;
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.16);
}

.mikrotik-tunnel-checklist-item.is-fail {
  border-color: rgba(231, 76, 60, 0.32);
  background: rgba(231, 76, 60, 0.1);
}

.mikrotik-tunnel-checklist-item.is-fail .mikrotik-tunnel-checklist-dot {
  background: #e74c3c;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.14);
}

.mikrotik-tunnel-checklist-item.is-warn {
  border-color: rgba(241, 196, 15, 0.28);
  background: rgba(241, 196, 15, 0.08);
}

.mikrotik-tunnel-checklist-item.is-warn .mikrotik-tunnel-checklist-dot {
  background: #f1c40f;
  box-shadow: 0 0 0 3px rgba(241, 196, 15, 0.14);
}

.mikrotik-tunnel-checklist-item.is-waiting {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.mikrotik-tunnel-checklist-item.is-waiting .mikrotik-tunnel-checklist-dot {
  background: rgba(148, 163, 184, 0.75);
}

.mikrotik-tunnel-checklist-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.45rem;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mikrotik-tunnel-checklist-body {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.mikrotik-tunnel-checklist-label {
  display: block;
  font-size: 0.76rem;
  font-weight: 750;
  line-height: 1.35;
  color: rgba(232, 242, 244, 0.92);
}

.mikrotik-tunnel-checklist-label .mikrotik-tunnel-checklist-badge {
  margin-left: 0.35rem;
  vertical-align: middle;
}

.mikrotik-tunnel-checklist-message {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: rgba(232, 242, 244, 0.68);
}

.mikrotik-tunnel-checklist-item.is-ok {
  border-color: rgba(46, 204, 113, 0.28);
  background: rgba(46, 204, 113, 0.08);
}

.mikrotik-tunnel-checklist-item.is-ok .mikrotik-tunnel-checklist-badge {
  color: #b8f5cd;
  background: rgba(46, 204, 113, 0.22);
}

.mikrotik-tunnel-checklist-item.is-fail {
  border-color: rgba(231, 76, 60, 0.32);
  background: rgba(231, 76, 60, 0.1);
}

.mikrotik-tunnel-checklist-item.is-fail .mikrotik-tunnel-checklist-badge {
  color: #ffc4c4;
  background: rgba(231, 76, 60, 0.24);
}

.mikrotik-tunnel-checklist-item.is-warn {
  border-color: rgba(241, 196, 15, 0.28);
  background: rgba(241, 196, 15, 0.08);
}

.mikrotik-tunnel-checklist-item.is-warn .mikrotik-tunnel-checklist-badge {
  color: #ffe6a0;
  background: rgba(241, 196, 15, 0.22);
}

.mikrotik-tunnel-checklist-item.is-waiting {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.mikrotik-tunnel-checklist-item.is-waiting .mikrotik-tunnel-checklist-badge {
  color: rgba(232, 242, 244, 0.72);
  background: rgba(255, 255, 255, 0.08);
}

.mikrotik-tunnel-check-detail {
  margin: 0;
  font-size: 0.7rem;
  color: rgba(232, 242, 244, 0.58);
}

.mikrotik-tunnel-check-now {
  flex: 0 0 auto;
  min-height: 2.35rem;
  padding-inline: 0.95rem;
  white-space: nowrap;
}

.mikrotik-tunnel-setup {
  margin-top: 0.15rem;
}

@media (max-width: 479px) {
  .mikrotik-tunnel-actions {
    grid-template-columns: 1fr;
  }

  #mikrotik-tunnel-generate,
  .mikrotik-tunnel-check-now,
  .mikrotik-tunnel-ip-row .btn {
    width: 100%;
  }

  .mikrotik-tunnel-meters {
    grid-template-columns: 1fr;
  }

  .mikrotik-tunnel-checklist.is-compact {
    grid-template-columns: 1fr;
  }

  .mikrotik-verify-outcome-details {
    grid-template-columns: 1fr;
  }

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

  .mikrotik-tunnel-step {
    grid-template-columns: 1.65rem minmax(0, 1fr);
    padding: 0.75rem 0.7rem;
    gap: 0.55rem;
  }

  .mikrotik-tunnel-check-row {
    align-items: stretch;
  }

  .mikrotik-tunnel-check {
    flex-basis: 100%;
  }
}

.mikrotik-connect-status {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.85rem 0 0;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.4;
  color: rgba(232, 242, 244, 0.88);
}

.mikrotik-connect-status.is-busy::before {
  content: "";
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  border: 2px solid rgba(82, 208, 219, 0.25);
  border-top-color: #52d0db;
  animation: mikrotik-onboard-spin 0.75s linear infinite;
}

.mikrotik-connect-status.is-error {
  border-color: rgba(255, 154, 143, 0.42);
  background: rgba(244, 122, 110, 0.16);
  color: #ffe8e4;
}

.mikrotik-connect-status.is-ok {
  border-color: rgba(46, 204, 113, 0.38);
  background: rgba(46, 204, 113, 0.14);
  color: #b8f5d0;
}

.mikrotik-connected-banner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 0.95rem;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(46, 204, 113, 0.35);
  background: rgba(46, 204, 113, 0.12);
}

.mikrotik-connected-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  background: #2ecc71;
  box-shadow: 0 0 0 4px rgba(46, 204, 113, 0.2);
}

.mikrotik-connected-banner strong {
  display: block;
  font-size: 0.9rem;
  color: #eafff2;
}

.mikrotik-connected-banner p {
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
  color: rgba(232, 242, 244, 0.68);
}

.mikrotik-onboard-panel .password-toggle {
  color: rgba(232, 242, 244, 0.65);
}

.mikrotik-onboard-panel .password-toggle:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.mikrotik-section-label {
  margin: 0.35rem 0 0.15rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(232, 242, 244, 0.78);
}

.mikrotik-section-hint {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: rgba(232, 242, 244, 0.55);
}

.mikrotik-section-hint.is-warning {
  color: #f0c674;
}

.mikrotik-required-mark {
  color: #f07178;
  font-weight: 700;
}

#id_mikrotik_host_onboard.is-required-ip {
  border-color: rgba(240, 198, 116, 0.65);
}

.mikrotik-wifi-block {
  padding-top: 0.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .mikrotik-onboard-panel .password-toggle {
  color: var(--ink-soft);
}

[data-theme="light"] .mikrotik-onboard-panel .password-toggle:hover {
  color: var(--sea-deep);
  background: rgba(14, 124, 134, 0.08);
}

[data-theme="light"] .mikrotik-section-label {
  color: #1b7a45;
}

[data-theme="light"] .mikrotik-section-hint {
  color: var(--ink-soft);
}

[data-theme="light"] .mikrotik-section-hint.is-warning {
  color: #9a6b00;
}

[data-theme="light"] #id_mikrotik_host_onboard.is-required-ip {
  border-color: rgba(154, 107, 0, 0.55);
}

[data-theme="light"] .mikrotik-wifi-block {
  border-top-color: var(--border);
}

.mikrotik-onboard-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
}

.mikrotik-onboard-form .form-grid.mikrotik-simple-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.mikrotik-onboard-form .field {
  min-width: 0;
  max-width: 100%;
}

.mikrotik-onboard-form .field label {
  display: block;
  margin-bottom: 0.28rem;
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  color: rgba(232, 242, 244, 0.78);
}

.mikrotik-onboard-form .form-control {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 2.45rem;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(8, 18, 24, 0.55);
  color: #e8f2f4;
  font-size: 0.88rem;
}

.mikrotik-onboard-form .form-control::placeholder {
  color: rgba(232, 242, 244, 0.38);
}

.mikrotik-onboard-form .form-control:focus {
  border-color: rgba(61, 184, 194, 0.75);
  box-shadow: 0 0 0 3px rgba(61, 184, 194, 0.18);
}

.mikrotik-model-select {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mikrotik-model-field {
  position: relative;
  z-index: 25;
}

.mikrotik-model-trigger {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.mikrotik-model-trigger.is-open {
  border-color: rgba(46, 204, 113, 0.55);
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.16);
}

.mikrotik-model-trigger-thumb {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 1.85rem;
  border-radius: 6px;
  background: #f4f7f8;
  overflow: hidden;
}

.mikrotik-model-trigger-thumb[hidden] {
  display: none !important;
}

.mikrotik-model-trigger-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mikrotik-model-trigger-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}

.mikrotik-model-trigger-caret {
  flex: 0 0 auto;
  opacity: 0.65;
  font-size: 0.85rem;
  transition: transform 0.15s ease;
}

.mikrotik-model-trigger.is-open .mikrotik-model-trigger-caret {
  transform: rotate(180deg);
}

.mikrotik-model-picker {
  display: grid;
  gap: 0.2rem;
  max-height: 9.5rem;
  overflow-x: hidden;
  overflow-y: auto;
  margin-top: 0.4rem;
  padding: 0.35rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 18, 24, 0.88);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
  scrollbar-width: thin;
}

.mikrotik-model-picker[hidden] {
  display: none !important;
}

.mikrotik-model-option {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin: 0;
  padding: 0.45rem 0.55rem;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.mikrotik-model-option:hover {
  background: rgba(255, 255, 255, 0.06);
}

.mikrotik-model-option.is-selected {
  border-color: #2ecc71;
  background: rgba(46, 204, 113, 0.14);
}

.mikrotik-model-option:active {
  transform: scale(0.995);
}

.mikrotik-model-thumb {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 2.55rem;
  border-radius: 8px;
  background: #f4f7f8;
  overflow: hidden;
}

.mikrotik-model-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.15rem;
}

.mikrotik-model-name {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.25;
  color: rgba(232, 242, 244, 0.95);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mikrotik-onboard-actions {
  flex: 0 0 auto;
  z-index: 5;
  display: flex;
  flex-wrap: nowrap;
  justify-content: stretch;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  max-width: 100%;
  padding: 0.8rem 1.05rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 18, 24, 0.96);
  backdrop-filter: blur(10px);
}

.mikrotik-onboard-actions[hidden] {
  display: none !important;
}

.mikrotik-onboard-actions .btn {
  min-height: 2.5rem;
  padding-inline: 1rem;
  flex: 1 1 0;
  min-width: 0;
}

.mikrotik-onboard-actions .btn-ghost {
  color: #eef6f8;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}

.mikrotik-onboard-actions .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.mikrotik-onboard-actions .btn-primary {
  flex: 1.35 1 0;
  box-shadow: 0 12px 28px rgba(12, 122, 132, 0.35);
}

.mikrotik-coords {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: #9af0bc;
  font-variant-numeric: tabular-nums;
}

.mikrotik-location-field {
  position: relative;
  z-index: 20;
}

.mikrotik-location-combo {
  position: relative;
}

.mikrotik-location-hint {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(232, 242, 244, 0.62);
}

.mikrotik-location-suggest {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 0.2rem);
  display: none;
  gap: 0.15rem;
  max-width: 100%;
  max-height: 10rem;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.3rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #102028;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.mikrotik-location-suggest.is-open {
  display: grid;
}

.mikrotik-location-suggest[hidden] {
  display: none !important;
}

.mikrotik-location-option {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #e8f2f4;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mikrotik-location-option:hover,
.mikrotik-location-option.is-active {
  background: rgba(255, 255, 255, 0.08);
}

@media (min-width: 480px) {
  .mikrotik-onboard-form .form-grid.mikrotik-simple-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem 0.65rem;
  }

  .mikrotik-onboard-form .field-span-2 {
    grid-column: 1 / -1;
  }
}

@media (min-width: 640px) {
  .mikrotik-onboard-modal {
    place-items: center;
    justify-items: center;
    align-items: center;
    padding: max(1rem, env(safe-area-inset-top)) 1.25rem max(1rem, env(safe-area-inset-bottom));
  }

  .mikrotik-onboard-panel,
  .role-modal-panel.mikrotik-onboard-panel {
    width: min(100%, 34rem);
    max-width: 34rem;
    max-height: min(88vh, 46rem);
    margin: 0 auto;
    border-radius: 20px;
    box-shadow:
      0 28px 64px rgba(0, 0, 0, 0.42),
      0 0 0 1px rgba(255, 255, 255, 0.06);
    animation: mikrotik-modal-in 0.26s ease;
  }

  .mikrotik-onboard-panel::before {
    display: none;
  }
}

@media (min-width: 900px) {
  .mikrotik-onboard-panel,
  .role-modal-panel.mikrotik-onboard-panel {
    width: min(100%, 40rem);
    max-width: 40rem;
    max-height: min(86vh, 48rem);
  }

  .mikrotik-onboard-head {
    padding: 1.2rem 1.45rem 1.05rem;
  }

  .mikrotik-onboard-head h2 {
    font-size: 1.4rem;
  }

  .mikrotik-onboard-sub {
    font-size: 0.9rem;
    max-width: 48ch;
  }

  .mikrotik-onboard-scroll {
    padding: 1.15rem 1.45rem 1.2rem;
  }

  .mikrotik-onboard-form .form-grid.mikrotik-simple-grid {
    gap: 0.9rem 0.85rem;
  }

  .mikrotik-onboard-form .field label {
    font-size: 0.8rem;
    margin-bottom: 0.35rem;
  }

  .mikrotik-onboard-form .form-control {
    min-height: 2.75rem;
    padding: 0.7rem 0.95rem;
    font-size: 0.95rem;
  }

  .mikrotik-host-picker,
  .mikrotik-model-picker {
    max-height: 13rem;
  }

  .mikrotik-onboard-actions {
    gap: 0.7rem;
    justify-content: flex-end;
    padding: 1rem 1.45rem 1.2rem;
  }

  .mikrotik-onboard-actions .btn {
    flex: 0 0 auto;
    min-width: 7.75rem;
    min-height: 2.6rem;
  }

  .mikrotik-onboard-actions .btn-primary {
    min-width: 10rem;
  }
}

@media (min-width: 720px) and (max-width: 899px) {
  .mikrotik-onboard-head {
    padding: 1.05rem 1.25rem 0.95rem;
  }

  .mikrotik-onboard-scroll {
    padding: 1rem 1.25rem 1.05rem;
  }

  .mikrotik-onboard-actions {
    gap: 0.65rem;
    justify-content: flex-end;
    padding: 0.9rem 1.25rem 1.05rem;
  }

  .mikrotik-onboard-actions .btn {
    flex: 0 0 auto;
    min-width: 7.5rem;
    min-height: 2.55rem;
  }

  .mikrotik-onboard-actions .btn-primary {
    min-width: 9.5rem;
  }
}

@keyframes mikrotik-modal-in {
  from {
    opacity: 0.65;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Onboard / Connect modal follows page theme */
[data-theme="light"] .mikrotik-onboard-panel {
  background:
    radial-gradient(ellipse 70% 45% at 100% 0%, rgba(46, 204, 113, 0.12), transparent 55%),
    radial-gradient(ellipse 55% 40% at 0% 0%, rgba(14, 124, 134, 0.1), transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #f3f7f8 100%);
  color: var(--ink);
  border-color: rgba(11, 31, 42, 0.08);
  box-shadow:
    0 -18px 40px rgba(11, 31, 42, 0.14),
    0 0 0 1px rgba(11, 31, 42, 0.08);
}

[data-theme="light"] .mikrotik-onboard-panel::before {
  background: rgba(11, 31, 42, 0.18);
}

[data-theme="light"] .mikrotik-onboard-head {
  border-bottom-color: rgba(11, 31, 42, 0.08);
  background: rgba(255, 255, 255, 0.7);
}

[data-theme="light"] .mikrotik-onboard-head .role-modal-kicker {
  color: #1b7a45;
}

[data-theme="light"] .mikrotik-onboard-head h2 {
  color: var(--ink);
}

[data-theme="light"] .mikrotik-onboard-sub,
[data-theme="light"] .mikrotik-location-hint,
[data-theme="light"] .mikrotik-host-hint,
[data-theme="light"] .mikrotik-tunnel-lead,
[data-theme="light"] .mikrotik-tunnel-status,
[data-theme="light"] .mikrotik-tunnel-tip,
[data-theme="light"] .mikrotik-tunnel-script-bar,
[data-theme="light"] .mikrotik-tunnel-fee-note,
[data-theme="light"] .mikrotik-tunnel-step-desc {
  color: var(--ink-soft);
}

[data-theme="light"] .mikrotik-onboard-progress-seg {
  background: rgba(11, 31, 42, 0.1);
}

[data-theme="light"] .mikrotik-onboard-progress-seg.is-active,
[data-theme="light"] .mikrotik-onboard-progress-seg.is-done {
  background: linear-gradient(90deg, #1b7a45, #0c7a84);
  box-shadow: none;
}

[data-theme="light"] .mikrotik-tunnel-card {
  border-color: rgba(27, 122, 69, 0.24);
  background:
    linear-gradient(165deg, rgba(46, 204, 113, 0.1), rgba(46, 204, 113, 0.04) 55%, #fff);
}

[data-theme="light"] .mikrotik-tunnel-card.is-awaiting-payment {
  border-color: rgba(14, 165, 233, 0.4);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.08);
}

[data-theme="light"] .mikrotik-tunnel-card.is-optional {
  border-color: var(--border);
  background: rgba(20, 40, 50, 0.03);
}

[data-theme="light"] .mikrotik-section-label {
  color: #1b7a45;
}

[data-theme="light"] .mikrotik-tunnel-step {
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.72);
}

[data-theme="light"] .mikrotik-tunnel-step.is-active {
  border-color: rgba(27, 122, 69, 0.28);
  background: linear-gradient(145deg, rgba(46, 204, 113, 0.1), #fff);
  box-shadow: 0 8px 20px rgba(11, 31, 42, 0.06);
}

[data-theme="light"] .mikrotik-tunnel-step.is-done {
  border-color: rgba(27, 122, 69, 0.16);
  background: rgba(46, 204, 113, 0.06);
}

[data-theme="light"] .mikrotik-tunnel-step-title {
  color: var(--ink);
}

[data-theme="light"] .mikrotik-tunnel-step-body > label,
[data-theme="light"] .mikrotik-tunnel-phone-label {
  color: var(--ink);
}

[data-theme="light"] .mikrotik-tunnel-paywait {
  border-color: rgba(14, 165, 233, 0.28);
  background: linear-gradient(145deg, rgba(14, 165, 233, 0.1), rgba(14, 165, 233, 0.04));
}

[data-theme="light"] .mikrotik-tunnel-paywait-copy strong {
  color: #0c4a6e;
}

[data-theme="light"] .mikrotik-tunnel-paywait-copy p {
  color: var(--ink-soft);
}

[data-theme="light"] .mikrotik-tunnel-paywait-spinner {
  border-color: rgba(14, 165, 233, 0.25);
  border-top-color: #0284c7;
}

[data-theme="light"] .mikrotik-tunnel-btn-spinner {
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
}

[data-theme="light"] .mikrotik-tunnel-status,
[data-theme="light"] .mikrotik-tunnel-tip {
  border-color: var(--border);
  background: rgba(20, 40, 50, 0.03);
}

[data-theme="light"] .mikrotik-tunnel-status.is-error,
[data-theme="light"] .mikrotik-tunnel-tip.is-error {
  color: #9c2b22;
  border-color: rgba(192, 57, 43, 0.25);
  background: rgba(192, 57, 43, 0.08);
}

[data-theme="light"] .mikrotik-tunnel-status.is-ok,
[data-theme="light"] .mikrotik-tunnel-tip.is-ok,
[data-theme="light"] .mikrotik-tunnel-address {
  color: #1b7a45;
}

[data-theme="light"] .mikrotik-tunnel-address-note {
  color: #64748b;
}

[data-theme="light"] .mikrotik-tunnel-status.is-ok,
[data-theme="light"] .mikrotik-tunnel-tip.is-ok {
  border-color: rgba(27, 122, 69, 0.22);
  background: rgba(46, 204, 113, 0.08);
}

[data-theme="light"] .mikrotik-tunnel-tip.is-warn {
  color: #0c4a6e;
  border-color: rgba(14, 165, 233, 0.28);
  background: linear-gradient(145deg, rgba(14, 165, 233, 0.1), rgba(14, 165, 233, 0.04));
}

[data-theme="light"] .mikrotik-tunnel-tip-steps li {
  background: rgba(11, 31, 42, 0.04);
}

[data-theme="light"] .mikrotik-tunnel-tip-steps li::before {
  background: rgba(11, 31, 42, 0.08);
}

[data-theme="light"] .mikrotik-tunnel-check-panel {
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.7);
}

[data-theme="light"] .mikrotik-tunnel-rail-item {
  border-color: var(--border);
  background: rgba(20, 40, 50, 0.04);
  color: var(--muted);
}

[data-theme="light"] .mikrotik-tunnel-rail-item.is-active {
  border-color: rgba(14, 165, 233, 0.35);
  background: rgba(14, 165, 233, 0.12);
  color: #0c4a6e;
}

[data-theme="light"] .mikrotik-tunnel-rail-item.is-done {
  border-color: rgba(39, 174, 96, 0.28);
  background: rgba(39, 174, 96, 0.1);
  color: #1b7a45;
}

[data-theme="light"] .mikrotik-tunnel-verify-banner.is-waiting {
  color: var(--muted);
}

[data-theme="light"] .mikrotik-tunnel-verify-banner.is-checking {
  color: #0c4a6e;
}

[data-theme="light"] .mikrotik-tunnel-verify-banner.is-ready {
  color: #1b7a45;
}

[data-theme="light"] .mikrotik-tunnel-verify-banner.is-error {
  color: #9c2b22;
}

[data-theme="light"] .mikrotik-tunnel-verify-hint {
  color: var(--ink-soft);
  background: rgba(14, 165, 233, 0.08);
}

[data-theme="light"] .mikrotik-tunnel-check {
  color: var(--ink);
}

[data-theme="light"] .mikrotik-tunnel-meter {
  border-color: var(--border);
  background: rgba(11, 31, 42, 0.03);
}

[data-theme="light"] .mikrotik-tunnel-meter-label {
  color: var(--ink-soft);
}

[data-theme="light"] .mikrotik-tunnel-meter-value {
  color: var(--ink);
}

[data-theme="light"] .mikrotik-tunnel-meter.is-checking {
  border-color: rgba(14, 165, 233, 0.28);
  background: rgba(14, 165, 233, 0.08);
}

[data-theme="light"] .mikrotik-tunnel-meter.is-checking .mikrotik-tunnel-meter-value {
  color: #0c4a6e;
}

[data-theme="light"] .mikrotik-tunnel-meter.is-ready {
  border-color: rgba(27, 122, 69, 0.22);
  background: rgba(46, 204, 113, 0.08);
}

[data-theme="light"] .mikrotik-tunnel-meter.is-ready .mikrotik-tunnel-meter-value {
  color: #1b7a45;
}

[data-theme="light"] .mikrotik-tunnel-meter.is-error {
  border-color: rgba(192, 57, 43, 0.25);
  background: rgba(192, 57, 43, 0.08);
}

[data-theme="light"] .mikrotik-tunnel-meter.is-error .mikrotik-tunnel-meter-value {
  color: #9c2b22;
}

[data-theme="light"] .mikrotik-tunnel-checklist-item {
  border-color: var(--border);
  background: rgba(20, 40, 50, 0.03);
}

[data-theme="light"] .mikrotik-tunnel-checklist-label {
  color: var(--ink);
}

[data-theme="light"] .mikrotik-tunnel-checklist-message {
  color: var(--muted);
}

[data-theme="light"] .mikrotik-tunnel-checklist-item.is-ok {
  border-color: rgba(39, 174, 96, 0.28);
  background: rgba(39, 174, 96, 0.08);
}

[data-theme="light"] .mikrotik-tunnel-checklist-item.is-ok .mikrotik-tunnel-checklist-dot {
  background: #27ae60;
}

[data-theme="light"] .mikrotik-tunnel-checklist-item.is-fail .mikrotik-tunnel-checklist-dot {
  background: #c0392b;
}

[data-theme="light"] .mikrotik-tunnel-checklist-item.is-warn .mikrotik-tunnel-checklist-dot {
  background: #d68910;
}

[data-theme="light"] .mikrotik-tunnel-script {
  border-color: var(--border);
  background: rgba(11, 31, 42, 0.04);
  color: #16303a;
}

[data-theme="light"] .mikrotik-tunnel-status code,
[data-theme="light"] .mikrotik-tunnel-tip code {
  background: rgba(11, 31, 42, 0.06);
}

[data-theme="light"] .mikrotik-connect-status {
  border-color: var(--border);
  background: rgba(20, 40, 50, 0.03);
  color: var(--ink);
}

[data-theme="light"] .mikrotik-connect-status.is-error {
  border-color: rgba(192, 57, 43, 0.25);
  background: rgba(192, 57, 43, 0.08);
  color: #9c2b22;
}

[data-theme="light"] .mikrotik-connected-banner {
  border-color: rgba(27, 122, 69, 0.28);
  background: rgba(46, 204, 113, 0.1);
}

[data-theme="light"] .mikrotik-connected-banner strong {
  color: #1a2b33;
}

[data-theme="light"] .mikrotik-connected-banner p {
  color: var(--ink-soft);
}

[data-theme="light"] .mikrotik-discover-status {
  color: var(--ink-soft);
}

[data-theme="light"] .mikrotik-discover-refresh {
  color: var(--ink);
  border-color: var(--border);
  background: #fff;
}

[data-theme="light"] .mikrotik-host-toggle {
  color: var(--ink-soft);
}

[data-theme="light"] .mikrotik-host-toggle:hover {
  background: rgba(20, 32, 40, 0.06);
  color: var(--ink);
}

[data-theme="light"] .mikrotik-host-picker {
  border-color: rgba(27, 122, 69, 0.25);
  background: #fff;
  box-shadow: 0 10px 22px rgba(11, 31, 42, 0.1);
}

[data-theme="light"] .mikrotik-host-empty {
  color: var(--ink-soft);
}

[data-theme="light"] .mikrotik-host-option {
  color: var(--ink);
}

[data-theme="light"] .mikrotik-host-option.is-new {
  border-color: rgba(27, 122, 69, 0.35);
  background: rgba(46, 204, 113, 0.1);
}

[data-theme="light"] .mikrotik-host-option.is-onboarded {
  border-color: rgba(192, 57, 43, 0.35);
  background: rgba(231, 76, 60, 0.1);
}

[data-theme="light"] .mikrotik-host-option.is-new .mikrotik-host-badge {
  color: #1b7a45;
  background: rgba(46, 204, 113, 0.18);
}

[data-theme="light"] .mikrotik-host-option.is-onboarded .mikrotik-host-badge {
  color: #9c2b22;
  background: rgba(231, 76, 60, 0.16);
}

[data-theme="light"] .mikrotik-host-option.is-onboarded .mikrotik-discover-ip {
  color: #c0392b;
}

[data-theme="light"] .mikrotik-onboard-form .field label {
  color: var(--ink);
}

[data-theme="light"] .mikrotik-onboard-form .form-control {
  border-color: var(--border-strong);
  background: #fff;
  color: var(--ink);
}

[data-theme="light"] .mikrotik-onboard-form .form-control::placeholder {
  color: rgba(74, 101, 115, 0.7);
}

[data-theme="light"] .mikrotik-model-picker {
  border-color: var(--border);
  background: #fff;
  box-shadow: 0 10px 22px rgba(11, 31, 42, 0.1);
}

[data-theme="light"] .mikrotik-model-option:hover {
  background: rgba(20, 40, 50, 0.05);
}

[data-theme="light"] .mikrotik-model-option.is-selected {
  border-color: #1b7a45;
  background: rgba(46, 204, 113, 0.12);
}

[data-theme="light"] .mikrotik-model-name {
  color: #1a2b33;
}

[data-theme="light"] .mikrotik-coords {
  color: #1b7a45;
}

[data-theme="light"] .mikrotik-location-suggest {
  background: #fff;
  border-color: var(--border);
}

[data-theme="light"] .mikrotik-location-option {
  color: var(--ink);
}

[data-theme="light"] .mikrotik-location-option:hover,
[data-theme="light"] .mikrotik-location-option.is-active {
  background: rgba(20, 32, 40, 0.06);
}

[data-theme="light"] .mikrotik-onboard-actions {
  border-top-color: rgba(11, 31, 42, 0.08);
  background: rgba(244, 248, 249, 0.96);
}

[data-theme="light"] .mikrotik-onboard-actions .btn-ghost {
  color: var(--ink);
  background: transparent;
  border-color: var(--border);
}

[data-theme="light"] .mikrotik-onboard-loading {
  background:
    radial-gradient(ellipse 55% 45% at 50% 40%, rgba(12, 122, 132, 0.1), transparent 60%),
    rgba(244, 248, 249, 0.72);
}

[data-theme="light"] .mikrotik-onboard-loading-card {
  border-color: var(--border-strong);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(12, 122, 132, 0.1), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f3f7f8 100%);
  box-shadow: 0 20px 44px rgba(11, 31, 42, 0.14);
}

[data-theme="light"] .mikrotik-onboard-loading-core {
  color: var(--sea-deep);
  background: linear-gradient(145deg, rgba(12, 122, 132, 0.16), rgba(46, 204, 113, 0.12));
  box-shadow:
    0 0 18px rgba(12, 122, 132, 0.18),
    inset 0 0 0 1px rgba(11, 31, 42, 0.08);
}

[data-theme="light"] .mikrotik-onboard-loading-ring {
  border-top-color: var(--sea);
  border-right-color: rgba(12, 122, 132, 0.25);
}

[data-theme="light"] .mikrotik-onboard-loading-ring.is-slow {
  border-top-color: #1b7a45;
  border-right-color: rgba(27, 122, 69, 0.25);
}

[data-theme="light"] .mikrotik-onboard-loading-title {
  color: var(--ink);
}

[data-theme="light"] .mikrotik-onboard-loading-sub {
  color: var(--ink-soft);
}

[data-theme="light"] .mikrotik-onboard-actions .btn-ghost:hover {
  background: rgba(11, 31, 42, 0.05);
  border-color: var(--border-strong);
}

[data-theme="light"] .mikrotik-connect-status.is-busy::before {
  border-color: rgba(12, 122, 132, 0.22);
  border-top-color: var(--sea);
}


@media (max-width: 639px) {
  .mikrotik-onboard-panel,
  .role-modal-panel.mikrotik-onboard-panel {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 18px 18px 0 0;
    max-height: min(96dvh, 100%);
  }

  .mikrotik-onboard-head {
    padding: 0.7rem 0.95rem 0.75rem;
  }

  .mikrotik-onboard-scroll {
    padding: 0.75rem 0.95rem 0.85rem;
  }

  .mikrotik-onboard-actions {
    padding-inline: 0.95rem;
  }

  .mikrotik-tunnel-actions {
    grid-template-columns: 1fr;
  }

  .mikrotik-tunnel-script-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .mikrotik-tunnel-copy,
  .mikrotik-tunnel-actions .btn {
    width: 100%;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .mikrotik-onboard-modal {
    place-items: center;
    padding: 0.5rem;
  }

  .mikrotik-onboard-panel,
  .role-modal-panel.mikrotik-onboard-panel {
    width: min(100%, 40rem);
    max-height: min(96dvh, 100%);
    border-radius: 14px;
  }

  .mikrotik-onboard-panel::before {
    display: none;
  }

  .mikrotik-onboard-head,
  .mikrotik-onboard-scroll,
  .mikrotik-onboard-actions {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }

  .mikrotik-tunnel-script {
    max-height: 5.5rem;
  }
}

.client-app .staff-sidebar-meta-label {
  letter-spacing: 0.06em;
}

.staff-sidebar-nav-stack {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 0.85rem;
}

.staff-sidebar-nav-main {
  display: grid;
  gap: 0.2rem;
  align-content: start;
  flex: 1 1 auto;
}

.staff-sidebar-nav-before-meta {
  display: grid;
  gap: 0.2rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex: 0 0 auto;
}

.staff-sidebar-nav-end {
  display: grid;
  gap: 0.2rem;
  flex: 0 0 auto;
}

.staff-sidebar-nav-main + .staff-sidebar-nav-end {
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.staff-sidebar-nav-stack .staff-sidebar-meta {
  flex: 0 0 auto;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.client-sidebar-nav a {
  font-size: 0.9rem;
  line-height: 1.25;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

.client-sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.client-sidebar-link-label {
  flex: 1 1 auto;
  min-width: 0;
}

.client-sidebar-badge {
  flex: 0 0 auto;
  min-width: 1.35rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(232, 242, 244, 0.88);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.client-sidebar-link.active .client-sidebar-badge {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.client-sidebar-logout {
  margin: 0;
}

.client-sidebar-logout button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.9rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.client-sidebar-pause-form {
  margin: 0;
}

.client-sidebar-pause-btn.is-paused {
  color: #fcd34d;
}

.client-sidebar-link.is-danger {
  color: var(--danger, #c0392b);
}

.client-sidebar-link.is-danger:hover,
.client-sidebar-link.is-danger.active {
  color: var(--danger, #c0392b);
  background: var(--danger-soft, rgba(176, 48, 48, 0.1));
}

.client-sidebar-pause-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.staff-sidebar-logout {
  margin: 0;
}

.staff-sidebar-modal-trigger {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.65rem 1rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.staff-app .staff-sidebar .staff-sidebar-modal-trigger:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.staff-sidebar-logout button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.65rem 1rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.client-app .staff-sidebar .client-sidebar-logout button:hover,
.staff-app .staff-sidebar .client-sidebar-logout button:hover,
.staff-app .staff-sidebar .staff-sidebar-logout button:hover,
.client-app .staff-sidebar .client-sidebar-pause-btn:hover:not(:disabled),
.staff-app .staff-sidebar .client-sidebar-pause-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.module-highlights {
  display: grid;
  gap: 0.65rem;
}

@media (min-width: 720px) {
  .module-highlights {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.module-highlight {
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--sea) 8%, transparent), transparent 60%),
    var(--surface);
  border: 1px solid var(--border);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.module-highlight:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--sea) 30%, var(--border));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--sea) 10%, transparent);
}

.module-card {
  display: grid;
  gap: 0.45rem;
  padding: 1.2rem 1.15rem;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid rgba(11, 31, 42, 0.08);
  box-shadow: 0 8px 24px rgba(11, 31, 42, 0.04);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

a.module-card:hover {
  transform: translateY(-2px);
  border-color: rgba(14, 124, 134, 0.35);
}

.module-card h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin: 0;
  letter-spacing: -0.02em;
}

.module-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.module-kicker {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sea);
}

.module-card.is-soon .module-kicker {
  color: #8a5a00;
}

.module-cta {
  margin-top: 0.35rem;
  font-weight: 800;
  color: var(--sea-deep);
}

.module-card.is-soon {
  opacity: 0.72;
}

.module-card.is-soon .module-cta {
  color: #8a5a00;
}

.staff-module-grid {
  margin-top: 0.25rem;
}

[data-theme="dark"] .module-card {
  background: var(--surface);
  border-color: var(--border);
}

[data-theme="dark"] a.module-card:hover {
  border-color: rgba(61, 184, 194, 0.4);
}

[data-theme="dark"] .module-card h2 {
  color: var(--ink);
}

.module-banner .module-kicker {
  display: inline-block;
  margin-bottom: 0.35rem;
}

.staff-workspace {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--workspace-bg);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.staff-workspace::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(12, 122, 132, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12, 122, 132, 0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black, transparent 75%);
  opacity: 0.55;
}

[data-theme="dark"] .staff-workspace::before {
  background-image:
    linear-gradient(rgba(69, 196, 207, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(69, 196, 207, 0.045) 1px, transparent 1px);
  opacity: 0.4;
}

.staff-workspace > * {
  position: relative;
  z-index: 1;
}

.staff-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.35rem;
  border-bottom: 1px solid var(--border);
  background: var(--topbar-bg);
  backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 20;
}

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

.staff-topbar-right {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 0 0 auto;
}

.staff-topbar-kicker {
  margin: 0 0 0.1rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sea);
}

.staff-topbar-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.15;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.theme-toggle:hover {
  border-color: rgba(14, 124, 134, 0.4);
  box-shadow: 0 0 0 4px var(--sea-soft);
}

.theme-toggle:active {
  transform: scale(0.96);
}

.theme-toggle svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}

.theme-toggle .icon-moon {
  display: none;
}

[data-theme="dark"] .theme-toggle .icon-sun {
  display: none;
}

[data-theme="dark"] .theme-toggle .icon-moon {
  display: block;
}

.staff-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0.55rem;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
}

.staff-nav-toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
}

.staff-nav-close {
  display: none;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.staff-nav-scrim {
  display: none;
}

.staff-app .staff-main {
  flex: 1;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  display: block;
  place-items: unset;
  padding: 0.75rem 1rem 1.1rem;
  background: transparent;
  overflow-x: clip;
}

.staff-app .main.staff-main {
  padding: 0.75rem 1rem 1.1rem;
}

.staff-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1rem;
  padding: 0 0 0.85rem;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
}

[data-theme="dark"] .staff-hero {
  box-shadow: none;
}

.staff-hero-compact {
  align-items: center;
}

.staff-hero-kicker {
  margin: 0 0 0.3rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sea);
}

.staff-hero-copy h2 {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.staff-hero-copy p {
  margin: 0;
  max-width: 48ch;
  color: var(--ink-soft);
  font-weight: 600;
}

.staff-hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}

.staff-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.staff-pill-sea {
  background: var(--chip-sea-bg);
  color: var(--chip-sea-fg);
}

.staff-pill-signal {
  background: var(--chip-signal-bg);
  color: var(--chip-signal-fg);
}

.staff-panel {
  animation: staffFadeUp 0.5s ease 0.06s both;
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.panel-head h2 {
  margin: 0;
}

.panel-sub {
  margin: 0.25rem 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 600;
}

.role-highlight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.role-highlight-card {
  padding: 1rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.role-highlight-card:hover {
  transform: translateY(-2px);
  border-color: rgba(14, 124, 134, 0.28);
  box-shadow: var(--menu-shadow);
}

.role-highlight-index {
  display: inline-block;
  margin-bottom: 0.45rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--sea);
}

.role-highlight-card p {
  margin: 0;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}

.profile-section {
  margin-bottom: 1.35rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--border);
}

.profile-section:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}

@keyframes staffFadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.account-menu {
  position: relative;
  flex: 0 0 auto;
}

.account-menu-trigger {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  max-width: min(280px, 70vw);
  margin: 0;
  padding: 0.35rem 0.55rem 0.35rem 0.35rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.account-menu-trigger:hover,
.account-menu.is-open .account-menu-trigger {
  border-color: rgba(14, 124, 134, 0.4);
  box-shadow: 0 0 0 4px var(--sea-soft);
}

.account-menu-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 auto;
}

.account-menu-avatar-fallback {
  display: inline-grid;
  place-items: center;
  background: #142028;
  color: #9ee7ef;
  font-size: 0.78rem;
  font-weight: 800;
}

.account-menu-copy {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
  text-align: left;
}

.account-menu-name {
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu-meta {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu-caret {
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.2rem;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg) translate(-1px, -1px);
  flex: 0 0 auto;
}

.account-menu-panel {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  width: min(300px, calc(100vw - 1.5rem));
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--menu-shadow);
  z-index: 30;
  animation: staffFadeUp 0.2s ease;
}

.account-menu-panel[hidden] {
  display: none !important;
}

.account-menu-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.account-menu-head .account-menu-avatar {
  width: 2.4rem;
  height: 2.4rem;
}

.account-menu-head strong {
  display: block;
  font-size: 0.92rem;
  line-height: 1.2;
}

.account-menu-head p {
  margin: 0.15rem 0 0;
  font-size: 0.72rem;
  color: var(--ink-soft);
}

.account-menu-roles {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
}

.account-menu-session {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 0.65rem;
  padding: 0.65rem 0.7rem;
  border-radius: 12px;
  background: var(--surface-3);
}

.account-session-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.74rem;
}

.account-session-row span {
  color: var(--ink-soft);
  flex: 0 0 auto;
}

.account-session-row strong {
  text-align: right;
  font-weight: 700;
  line-height: 1.3;
  word-break: break-word;
}

.role-identity-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.role-chip {
  display: inline-flex;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
  margin: 0;
  padding: 0.22rem 0.5rem;
  border-radius: 4px;
  background: var(--chip-signal-bg);
  color: var(--chip-signal-fg);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.role-chip-login {
  background: var(--chip-sea-bg);
  color: var(--chip-sea-fg);
}

.role-chip-view {
  background: var(--chip-signal-bg);
  color: var(--chip-signal-fg);
}

.role-view-hint {
  flex: 0 0 4.2rem;
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.2;
  color: var(--ink-soft);
}

.account-menu-action {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(232, 163, 23, 0.4);
  border-radius: 10px;
  background: rgba(232, 163, 23, 0.12);
  color: #8a5a00;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}

.account-menu-action:hover {
  background: rgba(232, 163, 23, 0.2);
}

.account-menu-links {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.15rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border);
}

.account-menu-links a,
.account-menu-link-btn,
.account-menu-logout button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.6rem 0.75rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.account-menu-links a:hover,
.account-menu-link-btn:hover,
.account-menu-logout button:hover,
.account-menu-links a.is-active {
  background: var(--sea-soft);
  color: var(--sea-deep);
}

.account-menu-logout button {
  color: var(--notice-error-fg);
}

.account-menu-logout button:hover {
  background: var(--danger-soft);
  color: var(--notice-error-fg);
}

.profile-panel {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

[data-theme="dark"] .profile-panel {
  box-shadow: none;
  background: transparent;
}

.staff-app .panel.staff-panel {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

[data-theme="dark"] .staff-app .panel.staff-panel {
  box-shadow: none;
  background: transparent;
}

.profile-photo-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.15rem;
}

.profile-photo-preview {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 auto;
  border: 3px solid rgba(14, 124, 134, 0.18);
}

.profile-photo-fallback {
  display: inline-grid;
  place-items: center;
  background: #142028;
  color: #9ee7ef;
  font-size: 1.2rem;
  font-weight: 800;
}

.profile-section-title {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
}

.profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.35rem;
}

.field-error {
  margin-top: 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--notice-error-fg);
}

.flash-stack {
  display: none;
}

.toast-host {
  position: fixed;
  top: 1.15rem;
  right: 1.15rem;
  z-index: 80;
  display: grid;
  gap: 0.75rem;
  width: min(100% - 1.5rem, 24.5rem);
  pointer-events: none;
}

.toast {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.85rem;
  align-items: start;
  padding: 0.95rem 1rem 1.05rem;
  border-radius: 16px;
  border: 1px solid transparent;
  background: var(--surface);
  box-shadow:
    0 18px 40px rgba(11, 31, 42, 0.16),
    0 2px 8px rgba(11, 31, 42, 0.08);
  overflow: hidden;
  pointer-events: auto;
  transform-origin: top right;
  animation: toastIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.toast.is-leaving {
  animation: toastOut 0.3s ease forwards;
}

.toast-icon {
  width: 2.55rem;
  height: 2.55rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  flex: 0 0 auto;
}

.toast-svg {
  width: 1.55rem;
  height: 1.55rem;
  overflow: visible;
}

.toast-ring,
.toast-tri,
.toast-check,
.toast-x,
.toast-bang {
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.toast-dot {
  stroke: none;
}

.toast-copy {
  min-width: 0;
  padding-top: 0.1rem;
}

.toast-title {
  margin: 0 0 0.2rem;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.toast-text {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.45;
}

.toast-dismiss {
  margin: -0.2rem -0.15rem 0 0;
  width: 1.7rem;
  height: 1.7rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.toast-dismiss:hover {
  background: var(--surface-3);
  color: var(--ink);
}

.toast-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  transform-origin: left center;
  animation: toastProgress linear forwards;
  animation-duration: inherit;
}

.toast[data-toast-ms="5200"] .toast-progress {
  animation-duration: 5200ms;
}

.toast.is-paused .toast-progress {
  animation-play-state: paused;
}

.toast-success {
  border-color: color-mix(in srgb, var(--success) 28%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--success) 12%, var(--surface)), var(--surface) 55%);
}

.toast-success .toast-icon {
  background: var(--success-soft);
  color: var(--success);
  animation: toastGlowSuccess 1.8s ease-in-out infinite;
}

.toast-success .toast-title { color: var(--success); }
.toast-success .toast-ring,
.toast-success .toast-check { stroke: var(--success); }
.toast-success .toast-progress { background: var(--success); }
.toast-success .toast-ring {
  stroke-dasharray: 126;
  stroke-dashoffset: 126;
  animation: toastDraw 0.55s ease forwards;
}
.toast-success .toast-check {
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: toastDraw 0.45s ease 0.28s forwards;
}

.toast-error {
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--danger) 12%, var(--surface)), var(--surface) 55%);
}

.toast-error .toast-icon {
  background: var(--danger-soft);
  color: var(--danger);
  animation: toastShake 0.7s ease 0.15s both, toastGlowError 1.6s ease-in-out 0.7s infinite;
}

.toast-error .toast-title { color: var(--danger); }
.toast-error .toast-ring,
.toast-error .toast-x { stroke: var(--danger); }
.toast-error .toast-progress { background: var(--danger); }
.toast-error .toast-ring {
  stroke-dasharray: 126;
  stroke-dashoffset: 126;
  animation: toastDraw 0.5s ease forwards;
}
.toast-error .toast-x {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: toastDraw 0.35s ease 0.22s forwards;
}

.toast-warning {
  border-color: color-mix(in srgb, var(--signal) 35%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--signal) 16%, var(--surface)), var(--surface) 55%);
}

.toast-warning .toast-icon {
  background: var(--signal-soft);
  color: var(--signal-ink);
  animation: toastBuzz 0.85s ease 0.1s both, toastGlowWarn 1.7s ease-in-out 0.8s infinite;
}

.toast-warning .toast-title { color: var(--signal-ink); }
.toast-warning .toast-tri,
.toast-warning .toast-bang { stroke: var(--signal-ink); }
.toast-warning .toast-dot { fill: var(--signal-ink); }
.toast-warning .toast-progress { background: var(--signal); }
.toast-warning .toast-tri {
  stroke-dasharray: 110;
  stroke-dashoffset: 110;
  animation: toastDraw 0.5s ease forwards;
}
.toast-warning .toast-bang,
.toast-warning .toast-dot {
  opacity: 0;
  animation: toastFadeIn 0.3s ease 0.35s forwards;
}

.toast-info,
.toast-debug {
  border-color: color-mix(in srgb, var(--sea) 30%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--sea) 12%, var(--surface)), var(--surface) 55%);
}

.toast-info .toast-icon,
.toast-debug .toast-icon {
  background: var(--sea-soft);
  color: var(--sea-deep);
  animation: toastPulse 1.8s ease-in-out infinite;
}

.toast-info .toast-title,
.toast-debug .toast-title { color: var(--sea-deep); }
.toast-info .toast-ring,
.toast-info .toast-bang,
.toast-debug .toast-ring,
.toast-debug .toast-bang { stroke: var(--sea-deep); }
.toast-info .toast-dot,
.toast-debug .toast-dot { fill: var(--sea-deep); }
.toast-info .toast-progress,
.toast-debug .toast-progress { background: var(--sea); }
.toast-info .toast-ring,
.toast-debug .toast-ring {
  stroke-dasharray: 126;
  stroke-dashoffset: 126;
  animation: toastDraw 0.5s ease forwards;
}
.toast-info .toast-bang,
.toast-info .toast-dot,
.toast-debug .toast-bang,
.toast-debug .toast-dot {
  opacity: 0;
  animation: toastFadeIn 0.3s ease 0.28s forwards;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(-12px) translateX(18px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
  }
}

@keyframes toastOut {
  to {
    opacity: 0;
    transform: translateY(-8px) translateX(16px) scale(0.96);
  }
}

@keyframes toastProgress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@keyframes toastDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes toastFadeIn {
  to { opacity: 1; }
}

@keyframes toastShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px) rotate(-4deg); }
  40% { transform: translateX(3px) rotate(3deg); }
  60% { transform: translateX(-2px) rotate(-2deg); }
  80% { transform: translateX(2px) rotate(1deg); }
}

@keyframes toastBuzz {
  0%, 100% { transform: translateY(0) rotate(0); }
  20% { transform: translateY(-2px) rotate(-8deg); }
  40% { transform: translateY(1px) rotate(7deg); }
  60% { transform: translateY(-1px) rotate(-5deg); }
  80% { transform: translateY(0) rotate(3deg); }
}

@keyframes toastPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--sea) 35%, transparent); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 8px transparent; }
}

@keyframes toastGlowSuccess {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 30%, transparent); }
  50% { box-shadow: 0 0 0 8px transparent; }
}

@keyframes toastGlowError {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 35%, transparent); }
  50% { box-shadow: 0 0 0 8px transparent; }
}

@keyframes toastGlowWarn {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 40%, transparent); }
  50% { box-shadow: 0 0 0 8px transparent; }
}

.toast-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.toast-action-btn {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--border-strong) 80%, transparent);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  background: color-mix(in srgb, var(--surface-2, #f8fafc) 88%, transparent);
  color: var(--text, #0f172a);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.toast-action-btn:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--sea) 35%, var(--border-strong));
  background: color-mix(in srgb, var(--sea) 8%, var(--surface));
}

.toast-error .toast-action-btn {
  border-color: color-mix(in srgb, var(--danger) 28%, var(--border-strong));
  color: var(--danger);
}

.toast-success .toast-action-btn {
  border-color: color-mix(in srgb, var(--success) 28%, var(--border-strong));
  color: var(--success);
}

@media (max-width: 640px) {
  .toast-host {
    top: auto;
    bottom: 0.75rem;
    right: 0.65rem;
    left: auto;
    width: min(100% - 1.3rem, 17.5rem);
    gap: 0.5rem;
  }

  .toast {
    transform-origin: bottom right;
    gap: 0.55rem;
    padding: 0.65rem 0.7rem 0.75rem;
    border-radius: 12px;
    box-shadow:
      0 10px 24px rgba(11, 31, 42, 0.14),
      0 1px 4px rgba(11, 31, 42, 0.08);
  }

  .toast-icon {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 8px;
  }

  .toast-svg {
    width: 1.1rem;
    height: 1.1rem;
  }

  .toast-title {
    margin-bottom: 0.1rem;
    font-size: 0.78rem;
  }

  .toast-text {
    font-size: 0.74rem;
    line-height: 1.35;
  }

  .toast-dismiss {
    width: 1.35rem;
    height: 1.35rem;
    font-size: 1rem;
  }

  .toast-progress {
    height: 2px;
  }
}

body.role-modal-open,
body.staff-nav-lock {
  overflow: hidden;
}

.role-modal[hidden] {
  display: none !important;
}

.role-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  z-index: 1200;
  display: grid;
  place-items: end center;
  padding: 0;
  margin: 0;
  transform: none !important;
  filter: none !important;
}

.role-modal-backdrop {
  position: fixed;
  inset: 0;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background: rgba(8, 16, 22, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.role-modal-panel {
  /* Local tokens: panels stay dark even when the page theme is light */
  --modal-ink: #eef6f8;
  --modal-ink-soft: rgba(238, 246, 248, 0.82);
  --modal-muted: rgba(238, 246, 248, 0.66);
  --modal-border: rgba(255, 255, 255, 0.12);
  --modal-border-strong: rgba(255, 255, 255, 0.2);
  --modal-surface: rgba(255, 255, 255, 0.05);
  --modal-surface-2: rgba(255, 255, 255, 0.08);
  --modal-signal: #f0c14d;
  --modal-danger: #ff9a8f;
  --modal-danger-ink: #ffe8e4;
  --modal-danger-soft: rgba(244, 122, 110, 0.18);
  --modal-danger-border: rgba(255, 154, 143, 0.42);
  --modal-danger-btn: #e85d4f;

  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: min(92vh, 720px);
  overflow: auto;
  margin: 0;
  padding: 1.25rem 1.2rem 1.35rem;
  border: 1px solid var(--modal-border);
  border-radius: 22px 22px 0 0;
  background:
    radial-gradient(ellipse 70% 48% at 100% -8%, rgba(232, 163, 23, 0.18), transparent 55%),
    radial-gradient(ellipse 50% 40% at -5% 0%, rgba(14, 124, 134, 0.16), transparent 52%),
    linear-gradient(185deg, #1a3340 0%, #14262f 48%, #0e1a21 100%);
  color: var(--modal-ink);
  box-shadow:
    0 -18px 48px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: role-modal-up 0.28s ease;
}

@keyframes role-modal-up {
  from {
    transform: translateY(18px);
    opacity: 0.7;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.role-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.role-modal-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--modal-signal, #f0c14d);
}

.role-modal-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--modal-ink, #eef6f8);
  letter-spacing: -0.02em;
}

.role-modal-sub {
  margin: 0.55rem 0 0;
  max-width: 42ch;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--modal-ink-soft, rgba(238, 246, 248, 0.82));
}

.role-modal-close {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--modal-border, rgba(255, 255, 255, 0.14));
  border-radius: 999px;
  background: var(--modal-surface, rgba(255, 255, 255, 0.06));
  color: var(--modal-ink, #fff);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.role-modal-close:hover {
  background: var(--modal-surface-2, rgba(255, 255, 255, 0.12));
  border-color: var(--modal-border-strong, rgba(255, 255, 255, 0.28));
}

.role-modal-close:active {
  transform: scale(0.96);
}

/* ?? Role switch modal ?? */
.role-switch-modal .role-modal-backdrop {
  background: rgba(6, 12, 18, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.role-switch-panel.role-modal-panel {
  display: flex;
  flex-direction: column;
  width: min(580px, 100%);
  max-height: min(92dvh, 760px);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(ellipse 70% 45% at 100% -8%, rgba(232, 163, 23, 0.18), transparent 55%),
    radial-gradient(ellipse 55% 40% at -8% 0%, rgba(14, 124, 134, 0.22), transparent 52%),
    linear-gradient(185deg, #1a3742 0%, #12252e 48%, #0d171d 100%);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #e8f2f4;
}

.role-switch-head {
  flex: 0 0 auto;
  margin: 0;
  padding: 1.2rem 1.25rem 1.05rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
}

.role-switch-head-main {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  min-width: 0;
  flex: 1 1 auto;
}

.role-switch-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 15px;
  color: #f0c14d;
  background:
    linear-gradient(145deg, rgba(232, 163, 23, 0.28), rgba(14, 124, 134, 0.16));
  box-shadow:
    inset 0 0 0 1px rgba(232, 163, 23, 0.35),
    0 8px 20px rgba(0, 0, 0, 0.22);
}

.role-switch-head-copy {
  min-width: 0;
}

.role-switch-modal .role-modal-kicker {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0.4rem;
  padding: 0.22rem 0.58rem;
  border: 1px solid rgba(232, 163, 23, 0.38);
  border-radius: 999px;
  background: rgba(232, 163, 23, 0.14);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: #f0c14d;
}

.role-switch-modal .role-modal-head h2 {
  font-size: clamp(1.2rem, 3.5vw, 1.5rem);
  letter-spacing: -0.03em;
}

.role-switch-modal .role-modal-sub {
  max-width: 42ch;
  color: rgba(232, 242, 244, 0.7);
}

.role-switch-modal .role-modal-close {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0;
}

.role-switch-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.role-switch-body {
  display: grid;
  gap: 0.85rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 1.05rem 1.25rem 0.35rem;
  scrollbar-width: thin;
}

.role-switch-section-label {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(232, 242, 244, 0.48);
}

.role-switch-grid {
  display: grid;
  gap: 0.55rem;
}

.role-switch-option {
  display: block;
  cursor: pointer;
}

.role-switch-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.role-switch-option-body {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.78rem 0.85rem;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.role-switch-option-icon {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 11px;
  color: rgba(232, 242, 244, 0.85);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.role-switch-option-copy {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.role-switch-option-label {
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.role-switch-option-path {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: rgba(232, 242, 244, 0.48);
  word-break: break-all;
  line-height: 1.35;
}

.role-switch-option-check {
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  color: transparent;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.role-switch-option:hover .role-switch-option-body {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}

.role-switch-option.is-selected .role-switch-option-body,
.role-switch-option:has(input:checked) .role-switch-option-body,
.role-switch-option:has(input:focus-visible) .role-switch-option-body {
  border-color: rgba(82, 208, 219, 0.55);
  background:
    linear-gradient(135deg, rgba(14, 124, 134, 0.22), rgba(232, 163, 23, 0.1));
  box-shadow:
    0 0 0 1px rgba(82, 208, 219, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: none;
}

.role-switch-option.is-selected .role-switch-option-icon,
.role-switch-option:has(input:checked) .role-switch-option-icon {
  color: #9ae8ef;
  background: rgba(14, 124, 134, 0.28);
  box-shadow: inset 0 0 0 1px rgba(82, 208, 219, 0.35);
}

.role-switch-option.is-selected .role-switch-option-check,
.role-switch-option:has(input:checked) .role-switch-option-check {
  color: #0a151c;
  background: #52d0db;
  border-color: #52d0db;
  transform: scale(1.05);
}

.role-switch-option[data-role="client"].is-selected .role-switch-option-body,
.role-switch-option[data-role="client"]:has(input:checked) .role-switch-option-body {
  border-color: rgba(232, 163, 23, 0.55);
  background:
    linear-gradient(135deg, rgba(232, 163, 23, 0.18), rgba(14, 124, 134, 0.12));
  box-shadow:
    0 0 0 1px rgba(232, 163, 23, 0.2),
    0 10px 24px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.role-switch-option[data-role="client"].is-selected .role-switch-option-icon,
.role-switch-option[data-role="client"]:has(input:checked) .role-switch-option-icon {
  color: #f0c14d;
  background: rgba(232, 163, 23, 0.22);
  box-shadow: inset 0 0 0 1px rgba(232, 163, 23, 0.4);
}

.role-switch-option[data-role="client"].is-selected .role-switch-option-check,
.role-switch-option[data-role="client"]:has(input:checked) .role-switch-option-check {
  color: #211805;
  background: #f0c14d;
  border-color: #f0c14d;
}

.role-switch-client-picker {
  margin-top: 0.15rem;
  padding: 1rem 1.05rem;
  border: 1.5px solid rgba(232, 163, 23, 0.32);
  border-radius: 16px;
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(232, 163, 23, 0.14), transparent 55%),
    rgba(8, 18, 24, 0.45);
  animation: role-switch-picker-in 0.22s ease;
}

@keyframes role-switch-picker-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.role-switch-client-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}

.role-switch-client-icon {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 8px;
  color: #f0c14d;
  background: rgba(232, 163, 23, 0.16);
}

.role-switch-client-label {
  display: block;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(232, 242, 244, 0.78);
}

.role-switch-client-select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  background: rgba(6, 14, 20, 0.88);
  color: #e8f2f4;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.role-switch-client-select:focus {
  outline: none;
  border-color: rgba(232, 163, 23, 0.55);
  box-shadow: 0 0 0 3px rgba(232, 163, 23, 0.18);
}

.role-switch-client-hint {
  margin: 0.55rem 0 0;
  font-size: 0.78rem;
  color: rgba(232, 242, 244, 0.55);
  line-height: 1.4;
}

.role-switch-client-hint code {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  padding: 0.08rem 0.35rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(232, 242, 244, 0.78);
}

.role-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.7rem;
  margin-top: 1.25rem;
}

.role-switch-actions {
  flex: 0 0 auto;
  margin: 0;
  padding: 1rem 1.25rem 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.18), transparent);
}

.role-modal-actions .btn-ghost {
  color: var(--modal-ink, #fff);
  background: var(--modal-surface, rgba(255, 255, 255, 0.06));
  border-color: var(--modal-border-strong, rgba(255, 255, 255, 0.22));
}

.role-modal-actions .btn-ghost:hover {
  background: var(--modal-surface-2, rgba(255, 255, 255, 0.1));
  border-color: rgba(255, 255, 255, 0.32);
}

.role-modal-actions .btn-danger {
  background: var(--modal-danger-btn, #e85d4f);
  color: #fff;
  box-shadow: 0 10px 24px rgba(232, 93, 79, 0.32);
}

.role-modal-actions .btn-danger:hover {
  filter: brightness(1.06);
}

.role-switch-actions .btn-primary {
  min-width: 8.5rem;
  box-shadow: 0 12px 28px rgba(14, 124, 134, 0.35);
}

.role-switch-actions .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .role-switch-panel.role-modal-panel {
  --modal-ink: var(--ink);
  --modal-ink-soft: var(--ink-soft);
  --modal-muted: color-mix(in srgb, var(--ink-soft) 88%, transparent);
  --modal-border: var(--border);
  --modal-border-strong: var(--border-strong);
  --modal-surface: color-mix(in srgb, var(--ink) 3%, var(--surface-solid));
  --modal-surface-2: color-mix(in srgb, var(--ink) 5%, var(--surface-solid));
  --modal-signal: #a06a00;
  --modal-danger: var(--danger);
  --modal-danger-ink: color-mix(in srgb, var(--danger) 88%, #1a0a08);
  --modal-danger-soft: var(--danger-soft);
  --modal-danger-border: color-mix(in srgb, var(--danger) 32%, var(--border));
  --modal-danger-btn: var(--danger);
  color: var(--ink);
  border-color: color-mix(in srgb, var(--sea) 18%, var(--border));
  background:
    radial-gradient(ellipse 70% 45% at 100% -8%, rgba(224, 154, 18, 0.12), transparent 55%),
    radial-gradient(ellipse 55% 40% at -8% 0%, rgba(12, 122, 132, 0.14), transparent 52%),
    linear-gradient(185deg, #f4fafb 0%, #e7f2f4 48%, #f7fbfc 100%);
  box-shadow:
    0 28px 70px rgba(7, 24, 32, 0.18),
    0 0 0 1px rgba(7, 24, 32, 0.06);
}

[data-theme="light"] .role-switch-head {
  border-bottom-color: var(--border);
  background: color-mix(in srgb, var(--surface-solid) 55%, transparent);
}

[data-theme="light"] .role-switch-modal .role-modal-sub,
[data-theme="light"] .role-switch-section-label,
[data-theme="light"] .role-switch-option-path,
[data-theme="light"] .role-switch-client-hint {
  color: var(--ink-soft);
}

[data-theme="light"] .role-switch-option-body {
  border-color: var(--border-strong);
  background: color-mix(in srgb, var(--surface-solid) 80%, transparent);
  box-shadow: none;
}

[data-theme="light"] .role-switch-option-icon {
  color: var(--sea-deep);
  background: var(--sea-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sea) 18%, transparent);
}

[data-theme="light"] .role-switch-option-check {
  border-color: var(--border-strong);
}

[data-theme="light"] .role-switch-option:hover .role-switch-option-body {
  border-color: color-mix(in srgb, var(--sea) 28%, var(--border-strong));
  background: color-mix(in srgb, var(--sea) 6%, var(--surface-solid));
}

[data-theme="light"] .role-switch-option.is-selected .role-switch-option-body,
[data-theme="light"] .role-switch-option:has(input:checked) .role-switch-option-body {
  border-color: color-mix(in srgb, var(--sea) 45%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--sea) 12%, white), color-mix(in srgb, var(--signal) 8%, white));
  box-shadow: 0 8px 20px rgba(7, 24, 32, 0.08);
}

[data-theme="light"] .role-switch-option.is-selected .role-switch-option-check,
[data-theme="light"] .role-switch-option:has(input:checked) .role-switch-option-check {
  color: #fff;
  background: var(--sea);
  border-color: var(--sea);
}

[data-theme="light"] .role-switch-client-picker {
  border-color: color-mix(in srgb, var(--signal) 35%, var(--border));
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(224, 154, 18, 0.1), transparent 55%),
    color-mix(in srgb, var(--signal) 6%, var(--surface-solid));
}

[data-theme="light"] .role-switch-client-select {
  background: var(--input-bg);
  color: var(--ink);
  border-color: var(--input-border);
}

[data-theme="light"] .role-switch-client-hint code {
  background: var(--surface-3);
  color: var(--ink-soft);
}

[data-theme="light"] .role-switch-actions {
  border-top-color: var(--border);
  background: color-mix(in srgb, var(--surface-solid) 70%, transparent);
}

[data-theme="light"] .role-switch-actions .btn-ghost {
  color: var(--ink);
  background: transparent;
  border-color: var(--border-strong);
}

[data-theme="light"] .role-switch-actions .btn-danger {
  background: var(--danger);
  box-shadow: 0 10px 24px rgba(192, 57, 43, 0.22);
}

@media (min-width: 720px) {
  .role-modal {
    place-items: center;
    padding: 1.5rem;
  }

  .role-modal-panel {
    border-radius: 22px;
    animation: role-modal-scale 0.24s ease;
  }

  @keyframes role-modal-scale {
    from {
      transform: translateY(10px) scale(0.98);
      opacity: 0.7;
    }
    to {
      transform: none;
      opacity: 1;
    }
  }

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

  .role-switch-panel.role-modal-panel {
    border-radius: 24px;
  }
}

@media (max-width: 720px) {
  .module-grid {
    grid-template-columns: 1fr;
  }
}


.staff-sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--sidebar-text);
}

.staff-sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.staff-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.staff-brand-logo {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
}

.staff-brand span {
  color: #5fd0d8;
}

.staff-nav-label {
  margin: 0.25rem 0.4rem 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sidebar-muted);
}

.staff-sidebar nav {
  gap: 0.3rem;
}

.staff-sidebar nav a {
  position: relative;
  padding: 0.78rem 0.9rem;
  border-radius: 12px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.staff-sidebar nav a:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

.staff-sidebar nav a.active {
  background: rgba(14, 124, 134, 0.28);
  color: #fff;
  box-shadow: inset 3px 0 0 #5fd0d8;
}

.staff-sidebar-meta {
  margin-top: auto;
  display: grid;
  gap: 0.2rem;
  padding: 0.9rem 0.95rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.staff-sidebar-meta-label {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(232, 242, 244, 0.45);
}

.staff-sidebar-meta strong {
  font-size: 0.88rem;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-sidebar-meta span {
  font-size: 0.78rem;
  color: rgba(232, 242, 244, 0.62);
}

.role-stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.role-stat-value {
  font-size: 1.15rem !important;
  line-height: 1.25;
}

.staff-app .stat {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: staffFadeUp 0.45s ease both;
}

.staff-app .stat:nth-child(2) { animation-delay: 0.04s; }
.staff-app .stat:nth-child(3) { animation-delay: 0.08s; }
.staff-app .stat:nth-child(4) { animation-delay: 0.12s; }

.staff-app .stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(11, 31, 42, 0.08);
}

.role-highlights {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.55rem;
}

.role-highlights li {
  font-weight: 600;
  color: var(--ink-soft);
}

@media (max-width: 960px) {
  .role-stat-grid {
    grid-template-columns: 1fr 1fr;
  }

  .role-highlight-grid {
    grid-template-columns: 1fr;
  }
}



.staff-card .flag-select-trigger:hover,
.staff-card .flag-select.is-open .flag-select-trigger {
  border-color: #c48a12;
  box-shadow: 0 0 0 4px rgba(232, 163, 23, 0.18);
}

.staff-card .password-rules li.is-ok {
  color: #1f8a5b;
}

@media (max-width: 860px) {
  .staff-shell {
    grid-template-columns: 1fr;
  }

  .staff-rail {
    min-height: auto;
  }

  .staff-rail-inner {
    padding: 1.5rem 1.25rem 1.25rem;
  }

  .staff-rail-title {
    max-width: none;
  }

  .staff-points {
    display: none;
  }
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.35rem;
}

.form-control {
  width: 100%;
  border: 1.5px solid var(--input-border);
  border-radius: 12px;
  padding: 0.85rem 0.95rem;
  font: inherit;
  background: var(--input-bg);
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus {
  outline: none;
  border-color: var(--sea);
  box-shadow: 0 0 0 4px var(--sea-soft);
}

.text-upper {
  text-transform: uppercase;
}

.text-lower {
  text-transform: lowercase;
}

.phone-row {
  display: grid;
  grid-template-columns: minmax(132px, 0.9fr) minmax(0, 1.5fr);
  gap: 0.55rem;
  align-items: start;
}

.phone-local {
  min-width: 0;
}

.flag-select {
  position: relative;
}

.flag-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border: 1.5px solid rgba(11, 31, 42, 0.14);
  border-radius: 12px;
  padding: 0.72rem 0.7rem;
  background: #fff;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.flag-select-trigger:hover,
.flag-select.is-open .flag-select-trigger {
  border-color: var(--sea);
  box-shadow: 0 0 0 4px rgba(14, 124, 134, 0.15);
}

.flag-img {
  width: 28px;
  height: 21px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(11, 31, 42, 0.12);
  flex-shrink: 0;
}

.flag-select-dial {
  font-weight: 700;
  font-size: 0.92rem;
  flex: 1;
  text-align: left;
}

.flag-select-caret {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--ink-soft);
  flex-shrink: 0;
}

.flag-select-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  width: min(320px, 78vw);
  background: #fff;
  border: 1px solid rgba(11, 31, 42, 0.1);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.flag-select-search {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(11, 31, 42, 0.08);
  padding: 0.75rem 0.9rem;
  font: inherit;
  outline: none;
}

.flag-select-list {
  max-height: 240px;
  overflow: auto;
}

.flag-select-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border: 0;
  background: transparent;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  text-align: left;
}

.flag-select-option:hover,
.flag-select-option.is-selected {
  background: rgba(14, 124, 134, 0.08);
}

.flag-select-name {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 600;
}

.flag-select-code {
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-weight: 700;
}

.password-field {
  position: relative;
}

.password-field .password-input {
  padding-right: 2.75rem;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 0.55rem;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  padding: 0.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 8px;
}

.password-toggle:hover {
  color: var(--sea-deep);
  background: rgba(14, 124, 134, 0.08);
}

.password-input.is-valid {
  border-color: #1f8a5b;
}

.password-input.is-invalid {
  border-color: var(--danger);
}

.password-rules {
  list-style: none;
  margin: 0.65rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

.password-rules.is-active {
  opacity: 1;
}

.password-rules li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-weight: 600;
}

.password-rules li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  border: 1.5px solid rgba(11, 31, 42, 0.2);
  background: #fff;
}

.password-rules li.is-ok {
  color: #1f8a5b;
}

.password-rules li.is-ok::before {
  border-color: #1f8a5b;
  background: #1f8a5b;
  box-shadow: inset 0 0 0 2px #fff;
}

.password-rules li.is-bad {
  color: var(--danger);
}

.password-rules li.is-bad::before {
  border-color: var(--danger);
}

@media (max-width: 480px) {
  .phone-row {
    grid-template-columns: 1fr;
  }

  .flag-select-menu {
    width: 100%;
  }
}

.errorlist {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  color: var(--danger);
  font-size: 0.85rem;
}

.non-field-errors {
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.2);
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
  margin-bottom: 1rem;
  color: var(--danger);
  font-size: 0.9rem;
}

.auth-footer {
  margin-top: 1.25rem;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.auth-footer a {
  color: var(--sea-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.photo-upload {
  display: grid;
  gap: 0.65rem;
}

.photo-preview {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 1.5px dashed rgba(11, 31, 42, 0.2);
  background:
    linear-gradient(135deg, rgba(14, 124, 134, 0.12), rgba(232, 163, 23, 0.12))
    center / cover no-repeat;
  background-color: #fff;
}

.photo-preview.has-image {
  border-style: solid;
  border-color: rgba(14, 124, 134, 0.35);
}

.form-file {
  padding: 0.55rem;
}

.field-hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.sidebar-profile {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.35rem 0.4rem;
}

.sidebar-profile img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.25);
}

.sidebar-profile span {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(232, 242, 244, 0.9);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell {
  min-height: 100svh;
  height: 100svh;
  height: 100dvh;
  max-height: 100dvh;
  display: grid;
  grid-template-columns: 250px 1fr;
  overflow: hidden;
}

.staff-app {
  position: relative;
}

.sidebar {
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  padding: 1.35rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.sidebar .brand {
  color: #fff;
  padding: 0 0.4rem;
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sidebar a {
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  color: var(--sidebar-link);
  font-weight: 600;
}

.sidebar a:hover,
.sidebar a.active {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.sidebar-foot {
  margin-top: auto;
}

.staff-app .staff-sidebar {
  background: var(--sidebar-bg) !important;
  color: var(--sidebar-text);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.staff-app .staff-sidebar .brand,
.staff-app .staff-sidebar .brand span {
  color: #fff;
}

.staff-app .staff-sidebar .staff-brand span {
  color: #5fd0d8;
}

.staff-app .staff-sidebar nav a {
  color: var(--sidebar-link);
}

.staff-app .staff-sidebar nav a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.staff-app .staff-sidebar nav a.active {
  background: rgba(61, 184, 194, 0.22);
  color: #fff;
  box-shadow: inset 3px 0 0 #5fd0d8;
}

.staff-app .staff-sidebar-meta {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.staff-app .staff-sidebar-meta-label {
  color: var(--sidebar-muted);
}

.staff-app .staff-sidebar-meta strong {
  color: #fff;
}

.staff-app .staff-sidebar-meta span {
  color: rgba(232, 242, 244, 0.65);
}

[data-theme="dark"] .staff-app .staff-sidebar {
  background:
    radial-gradient(ellipse 80% 50% at 0% 0%, rgba(61, 184, 194, 0.2), transparent 55%),
    linear-gradient(180deg, #101920 0%, #0a1015 100%) !important;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04);
}

.main {
  padding: 0.75rem 1rem 1.1rem;
  background: transparent;
  width: 100%;
  max-width: none;
}

.app-shell > .main {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.page-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  margin: 0 0 0.2rem;
  letter-spacing: -0.02em;
}

.page-sub {
  margin: 0 0 1rem;
  color: var(--ink-soft);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.85rem 0.95rem;
  box-shadow: none;
}

[data-theme="dark"] .stat {
  box-shadow: none;
}

.stat .label {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat .value {
  font-family: var(--font-display);
  font-size: 1.85rem;
  margin-top: 0.35rem;
  color: var(--ink);
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.05rem;
  box-shadow: none;
}

[data-theme="dark"] .panel {
  box-shadow: none;
}

.app-shell .panel {
  max-width: none;
}

.panel h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 0 0 0.85rem;
  color: var(--ink);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm, 0.9375rem);
  line-height: 1.45;
}

.table th,
.table td {
  text-align: left;
  padding: 0.7rem 0.35rem;
  border-bottom: 1px solid var(--border);
}

.table th {
  font-size: var(--text-xs, 0.75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

.empty {
  color: var(--ink-soft);
  padding: 0.5rem 0;
}

.badge {
  display: inline-flex;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--sea-soft);
  color: var(--sea-deep);
}

.badge-success {
  background: var(--success-soft);
  color: var(--success);
}

.badge-info {
  background: var(--sea-soft);
  color: var(--sea-deep);
}

.badge-warn {
  background: var(--signal-soft);
  color: var(--chip-signal-fg);
}

.table tr.is-reversed-lead-payment td {
  opacity: 0.9;
}

.clients-dash {
  --clients-tone: #0e7c86;
  --clients-tone-soft: color-mix(in srgb, #0e7c86 16%, transparent);
  --clients-tone-strong: #0b6b74;
}

.clients-dash:not(.ops-page) {
  display: grid;
  gap: 0;
  width: min(100%, var(--max));
  max-width: var(--max);
  min-width: 0;
  margin-inline: auto;
}

.clients-dash.is-tab-pppoe {
  --clients-tone: #0e7c86;
  --clients-tone-soft: color-mix(in srgb, #0e7c86 16%, transparent);
  --clients-tone-strong: #0b6b74;
}

.clients-dash.is-tab-static {
  --clients-tone: #c27803;
  --clients-tone-soft: color-mix(in srgb, #c27803 16%, transparent);
  --clients-tone-strong: #a16207;
}

.clients-dash.is-tab-hotspot {
  --clients-tone: #059669;
  --clients-tone-soft: color-mix(in srgb, #059669 16%, transparent);
  --clients-tone-strong: #047857;
}

.clients-workspace {
  display: grid;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--clients-tone) 18%, var(--border-strong, var(--border)));
  border-radius: 18px;
  background: var(--surface-solid, var(--surface));
  box-shadow: var(--card-shadow, 0 14px 34px color-mix(in srgb, var(--ink) 8%, transparent));
  overflow: hidden;
}

.clients-workspace-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
  padding: 1rem 1.15rem 0.95rem;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--clients-tone) 8%, transparent), transparent 70%);
}

.clients-workspace-title {
  min-width: 0;
}

.clients-workspace-title h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.02rem + 0.45vw, 1.45rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--ink);
}

.clients-workspace-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  margin: 0.45rem 0 0;
  font-size: 0.84rem;
  color: var(--ink-soft);
}

.clients-workspace-summary strong {
  color: var(--ink);
  font-weight: 800;
}

.clients-workspace-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 750;
  background: color-mix(in srgb, var(--pill-tone, var(--clients-tone)) 12%, transparent);
  color: var(--pill-tone, var(--clients-tone));
}

.clients-workspace-pill.tone-pppoe { --pill-tone: #0e7c86; }
.clients-workspace-pill.tone-static { --pill-tone: #c27803; }
.clients-workspace-pill.tone-hotspot { --pill-tone: #059669; }
.clients-workspace-pill.tone-pending { --pill-tone: #b45309; }

.clients-hero-btn.is-pending-link {
  border-color: color-mix(in srgb, #b45309 35%, transparent);
  color: #b45309;
}

.clients-seg-item.tone-pending { --tab-tone: #b45309; }

.clients-list-table-action-stack {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

.clients-list-table-action.is-primary {
  background: color-mix(in srgb, var(--sea, #0e7c86) 14%, transparent);
  color: var(--sea, #0e7c86);
  font-weight: 700;
}

.clients-workspace-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.clients-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.7rem 1.15rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--ink-soft) 5%, transparent);
}

.clients-seg-item {
  --tab-tone: var(--clients-tone);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex: 0 1 auto;
  min-width: 8.75rem;
  min-height: 2.55rem;
  padding: 0.4rem 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-solid, var(--surface));
  color: inherit;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 750;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.clients-seg-item.tone-pppoe { --tab-tone: #0e7c86; }
.clients-seg-item.tone-static { --tab-tone: #c27803; }
.clients-seg-item.tone-hotspot { --tab-tone: #059669; }

.clients-seg-item:hover,
.clients-seg-item:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--tab-tone) 32%, var(--border));
  background: color-mix(in srgb, var(--tab-tone) 8%, var(--surface));
  color: var(--tab-tone);
  outline: none;
  text-decoration: none;
}

.clients-seg-item.is-active {
  border-color: color-mix(in srgb, var(--tab-tone) 42%, var(--border));
  background: color-mix(in srgb, var(--tab-tone) 14%, var(--surface));
  color: var(--tab-tone);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tab-tone) 16%, transparent);
}

.clients-seg-ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 0.45rem;
  color: var(--tab-tone);
  background: color-mix(in srgb, var(--tab-tone) 12%, transparent);
}

.clients-seg-ico svg {
  width: 14px;
  height: 14px;
}

.clients-seg-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clients-seg-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45rem;
  padding: 0.08rem 0.38rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  background: color-mix(in srgb, var(--ink-soft) 12%, transparent);
}

.clients-seg-item.is-active .clients-seg-count {
  background: color-mix(in srgb, var(--tab-tone) 18%, transparent);
  color: var(--tab-tone);
}

.clients-workspace-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.7rem 0.85rem;
  padding: 0.9rem 1.15rem 0.7rem;
}

.clients-workspace-tools .clients-router-filter {
  flex: 0 1 17rem;
  width: min(100%, 17rem);
  max-width: 18rem;
  min-width: 0;
}

.clients-workspace-tools .clients-sort-filter {
  flex: 0 1 13rem;
  width: min(100%, 13rem);
  max-width: 15rem;
}

.clients-workspace-tools .clients-search-field {
  flex: 1 1 16rem;
  width: min(100%, 28rem);
  max-width: 28rem;
  min-width: 0;
}

.clients-workspace-tools .clients-search {
  width: 100%;
  max-width: none;
  flex: none;
  min-width: 0;
}

.clients-search-field {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
}

.clients-workspace-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
  padding: 0 1.15rem 0.75rem;
}

.clients-workspace-meta:not(:has(.clients-status-hint)):not(:has(.clients-search-meta:not([hidden]))) {
  display: none;
}

.clients-workspace .clients-status-hint {
  margin: 0;
}

.clients-workspace .clients-search-meta {
  margin: 0;
}

.clients-workspace .clients-list-host {
  padding: 0 1.15rem 1.15rem;
  overflow: visible;
}

.clients-list-table-identity {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  max-width: 100%;
}

.clients-list-table .clients-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 0.6rem;
  font-size: 0.8rem;
}

.clients-list-table-stack {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  justify-items: start;
}

@keyframes clientsRise {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes clientsIconPop {
  0% { transform: scale(0.86); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes clientsShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

@keyframes clientsPulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.55; }
}

@keyframes clientsSurfGlow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success, #059669) 0%, transparent); }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--success, #059669) 18%, transparent); }
}

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

.clients-dash-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--clients-tone) 18%, var(--border));
  background: color-mix(in srgb, var(--clients-tone) 5%, var(--surface));
  box-shadow: none;
  animation: none;
  min-width: 0;
}

.clients-dash-hero-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  flex: 1 1 auto;
}

.clients-dash-hero-copy {
  min-width: 0;
}

.clients-dash-hero-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.7rem;
  color: #fff;
  background: var(--clients-tone);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--clients-tone) 22%, transparent);
  animation: none;
}

.clients-dash-hero-mark svg {
  width: 18px;
  height: 18px;
}

.clients-dash-kicker {
  margin: 0 0 0.15rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clients-tone);
}

.clients-dash-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
}

.clients-dash-lead {
  display: block;
  margin: 0.28rem 0 0;
  max-width: 42rem;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.clients-dash-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.clients-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.4rem;
}

.clients-hero-btn svg {
  flex: 0 0 auto;
}

.clients-dash-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  min-width: 0;
}

.clients-dash-stat {
  --stat-tone: var(--clients-tone);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: none;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
  animation: none;
}

.clients-dash-stat.tone-total { --stat-tone: #0e7c86; }
.clients-dash-stat.tone-pppoe { --stat-tone: #0e7c86; }
.clients-dash-stat.tone-static { --stat-tone: #c27803; }
.clients-dash-stat.tone-hotspot { --stat-tone: #059669; }

.clients-dash-stat:hover,
.clients-dash-stat:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--stat-tone) 35%, var(--border));
  background: color-mix(in srgb, var(--stat-tone) 6%, var(--surface));
  outline: none;
  text-decoration: none;
}

.clients-dash-stat::before {
  display: none;
}

.clients-dash-stat.is-active {
  border-color: color-mix(in srgb, var(--stat-tone) 40%, var(--border));
  background: color-mix(in srgb, var(--stat-tone) 12%, var(--surface));
  color: var(--stat-tone);
}

.clients-dash-stat.is-active .clients-dash-stat-ico {
  transform: none;
  box-shadow: none;
}

.clients-dash-stat-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.6rem;
  color: var(--stat-tone);
  background: color-mix(in srgb, var(--stat-tone) 12%, transparent);
  transition: none;
}

.clients-dash-stat-ico svg {
  width: 15px;
  height: 15px;
}

.clients-dash-stat:hover .clients-dash-stat-ico {
  transform: none;
}

.clients-dash-stat-label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.clients-dash-stat.is-active .clients-dash-stat-label {
  color: var(--stat-tone);
}

.clients-dash-stat-value {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}

.clients-dash-stat.is-active .clients-dash-stat-value {
  color: var(--stat-tone);
}

.clients-dash-stat-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  min-width: 0;
}

.clients-dash-panel {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  animation: clientsRise 0.5s ease both 0.12s;
}

.staff-app .panel.staff-panel.clients-dash-panel {
  padding: 0.75rem 0.85rem 0.9rem;
}

.clients-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.55rem;
  min-width: 0;
  max-width: 100%;
}

.clients-toolbar-copy {
  min-width: 0;
  flex: 1 1 14rem;
}

.clients-toolbar-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.65rem 0.75rem;
  flex: 1 1 18rem;
  justify-content: flex-end;
  min-width: 0;
  max-width: 100%;
}

.clients-router-filter {
  display: grid;
  gap: 0.28rem;
  min-width: min(100%, 13.5rem);
  flex: 1 1 12rem;
  max-width: 18rem;
}

.clients-router-filter-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.clients-router-select {
  position: relative;
}

.clients-router-filter-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border);
  border-radius: 0.65rem;
  background:
    linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%) right 0.85rem top 0.9rem / 0.35rem 0.35rem no-repeat,
    linear-gradient(135deg, transparent 50%, var(--ink-soft) 50%) right 0.55rem top 0.9rem / 0.35rem 0.35rem no-repeat,
    var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 0.52rem 2rem 0.52rem 0.75rem;
  cursor: pointer;
}

.clients-router-filter-select:focus {
  outline: 2px solid color-mix(in srgb, var(--clients-tone, #0e7c86) 45%, transparent);
  outline-offset: 1px;
  border-color: color-mix(in srgb, var(--clients-tone, #0e7c86) 55%, var(--border));
}

.clients-filter-clear {
  margin-left: auto;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--clients-tone, #0e7c86);
  text-decoration: none;
}

.clients-filter-clear:hover {
  text-decoration: underline;
}

.clients-toolbar-copy h2 {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.98rem;
  flex-wrap: wrap;
}

.clients-toolbar-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45rem;
  padding: 0.1rem 0.42rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--clients-tone);
  background: var(--clients-tone-soft);
  border: 1px solid color-mix(in srgb, var(--clients-tone) 22%, transparent);
}

.clients-toolbar-ico {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 0.45rem;
  color: var(--clients-tone);
  background: var(--clients-tone-soft);
}

.clients-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 12rem;
  max-width: 22rem;
  min-width: 0;
}

.clients-search-icon {
  position: absolute;
  left: 0.85rem;
  display: inline-flex;
  color: var(--clients-tone);
  pointer-events: none;
  transition: transform 0.2s ease, color 0.2s ease;
}

.clients-search:focus-within .clients-search-icon {
  transform: scale(1.08);
  color: var(--clients-tone-strong);
}

.clients-search-input {
  width: 100%;
  height: 2.5rem;
  padding: 0.5rem 2.2rem 0.5rem 2.35rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--clients-tone) 26%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--clients-tone) 7%, var(--surface)), var(--surface));
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 5%, transparent) inset;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.clients-search-input::placeholder {
  color: color-mix(in srgb, var(--ink-soft) 85%, transparent);
}

.clients-search-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--clients-tone) 58%, var(--border));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--clients-tone) 18%, transparent),
    0 1px 0 color-mix(in srgb, #fff 5%, transparent) inset;
}

.clients-search-clear {
  position: absolute;
  right: 0.45rem;
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink-soft) 12%, transparent);
  color: var(--ink-soft);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.clients-search-clear:hover,
.clients-search-clear:focus-visible {
  background: color-mix(in srgb, var(--clients-tone) 16%, transparent);
  color: var(--clients-tone);
  transform: rotate(90deg);
  outline: none;
}

.clients-search-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  max-width: 100%;
  margin: 0 0 0.55rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--clients-tone-strong);
  background: var(--clients-tone-soft);
  animation: clientsRise 0.25s ease both;
}

.clients-search-meta-ico {
  display: inline-flex;
}

.clients-list-host {
  position: relative;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.clients-list-host.is-search-loading::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--clients-tone) 75%, transparent),
    transparent
  );
  background-size: 200% 100%;
  animation: clientsShimmer 0.9s linear infinite;
  z-index: 2;
}

.clients-list-host.is-search-loading {
  opacity: 0.78;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.clients-type-row.is-search-hidden,
.clients-list-item.is-search-hidden,
.clients-list-table-row.is-search-hidden {
  display: none !important;
}

.clients-local-empty[hidden] {
  display: none !important;
}

.clients-dash-table-shell {
  margin-top: 0.2rem;
}

.clients-dash-empty {
  display: grid;
  gap: 0.3rem;
  justify-items: start;
  margin-top: 0.2rem;
  padding: 0.95rem 0.85rem;
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--clients-tone) 35%, var(--border));
  background:
    radial-gradient(80% 80% at 0% 0%, var(--clients-tone-soft), transparent 60%),
    color-mix(in srgb, var(--clients-tone) 5%, transparent);
  animation: clientsRise 0.35s ease both;
}

.clients-dash-empty-ico {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.1rem;
  border-radius: 0.75rem;
  color: var(--clients-tone);
  background: color-mix(in srgb, var(--clients-tone) 12%, transparent);
}

.clients-dash-empty-title {
  margin: 0;
  font-weight: 750;
  color: var(--ink);
}

.clients-dash-empty-copy {
  margin: 0 0 0.45rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.clients-dash-empty .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.clients-surf-badge {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  min-width: 0;
  justify-content: center;
  margin-top: 0;
  padding: 0.18rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.clients-surf-badge.is-checking {
  background: color-mix(in srgb, var(--ink-soft) 14%, transparent);
  color: var(--ink-soft);
}

.clients-surf-badge.is-surfing {
  background: var(--success-soft);
  color: var(--success);
  animation: clientsSurfGlow 1.8s ease-in-out infinite;
}

.clients-surf-badge.is-not-surfing {
  background: color-mix(in srgb, var(--signal) 16%, transparent);
  color: var(--chip-signal-fg, var(--signal));
}

.clients-surf-badge.is-disconnected {
  background: color-mix(in srgb, var(--danger, #b42318) 16%, transparent);
  color: var(--danger, #b42318);
}

.clients-surf-badge.is-expired {
  background: color-mix(in srgb, #b45309 18%, transparent);
  color: #b45309;
}

.clients-surf-badge.is-device-online {
  background: color-mix(in srgb, #2563eb 16%, transparent);
  color: #1d4ed8;
}

.clients-surf-badge.is-device-offline {
  background: color-mix(in srgb, var(--ink-soft) 14%, transparent);
  color: var(--ink-soft);
}

.clients-surf-badge.clients-conn-badge {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  max-width: 11rem;
  text-align: left;
  line-height: 1.2;
  white-space: normal;
}

.clients-conn-badge .clients-conn-mikrotik {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.clients-conn-badge .clients-conn-wifi {
  font-size: 0.9em;
  font-weight: 600;
  opacity: 0.88;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

[data-theme="light"] .clients-surf-badge.is-device-online {
  background: color-mix(in srgb, #2563eb 12%, transparent);
  color: #1d4ed8;
}

[data-theme="light"] .clients-surf-badge.is-expired {
  background: color-mix(in srgb, #d97706 14%, transparent);
  color: #b45309;
}

.clients-status-cell {
  white-space: nowrap;
}

.clients-panel .panel-sub {
  margin: 0.12rem 0 0;
  font-size: 0.82rem;
}

.client-type-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.85rem 0 1rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink-soft) 8%, transparent);
  border: 1px solid var(--border);
}

.client-type-tab {
  --tab-tone: var(--clients-tone);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  text-decoration: none;
  color: inherit;
  opacity: 0.78;
  transition: background 0.18s ease, opacity 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.client-type-tab.tone-pppoe { --tab-tone: #0e7c86; }
.client-type-tab.tone-static { --tab-tone: #c27803; }
.client-type-tab.tone-hotspot { --tab-tone: #059669; }

.client-type-tab:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--tab-tone) 10%, transparent);
}

.client-type-tab.is-active {
  opacity: 1;
  color: var(--tab-tone);
  background: color-mix(in srgb, var(--tab-tone) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tab-tone) 34%, transparent);
  transform: translateY(-1px);
}

.client-type-tab-ico {
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  color: var(--tab-tone);
  background: color-mix(in srgb, var(--tab-tone) 14%, transparent);
  transition: transform 0.18s ease;
}

.client-type-tab:hover .client-type-tab-ico,
.client-type-tab.is-active .client-type-tab-ico {
  transform: scale(1.08);
}

.client-type-tab-label {
  font-size: 0.92rem;
  font-weight: 700;
}

.client-type-tab-count {
  min-width: 1.5rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  text-align: center;
  background: color-mix(in srgb, var(--ink-soft) 14%, transparent);
}

.client-type-tab.is-active .client-type-tab-count {
  background: color-mix(in srgb, var(--tab-tone) 22%, transparent);
  color: var(--tab-tone);
}

.clients-type-table .clients-row-actions {
  width: 1%;
}

.clients-type-row {
  --row-tone: var(--clients-tone);
  animation: clientsRise 0.4s ease both;
  animation-delay: calc(0.04s + (min(var(--row-i, 0), 12) * 0.03s));
}

.clients-type-row.tone-pppoe { --row-tone: #0e7c86; }
.clients-type-row.tone-static { --row-tone: #c27803; }
.clients-type-row.tone-hotspot { --row-tone: #059669; }

.clients-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.clients-list-item {
  --row-tone: var(--clients-tone);
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0.65rem 0.75rem 0.65rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--row-tone) 14%, var(--border));
  border-radius: 14px;
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--row-tone) 6%, transparent), transparent 62%),
    var(--surface);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 4%, transparent) inset,
    0 1px 2px color-mix(in srgb, var(--row-tone) 6%, transparent);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  animation: clientsRise 0.35s ease both;
  animation-delay: calc(0.02s + (min(var(--row-i, 0), 12) * 0.02s));
}

.clients-list-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(180deg, var(--row-tone), color-mix(in srgb, var(--row-tone) 40%, #e8a317));
  opacity: 0.85;
}

.clients-list-item:hover,
.clients-list-item:focus-within {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--row-tone) 32%, var(--border));
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 4%, transparent) inset,
    0 12px 24px color-mix(in srgb, var(--row-tone) 12%, transparent);
}

.clients-list-item.tone-pppoe { --row-tone: #0e7c86; }
.clients-list-item.tone-static { --row-tone: #c27803; }
.clients-list-item.tone-hotspot { --row-tone: #059669; }

.clients-list-primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  min-width: 0;
}

.clients-list-identity {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  flex: 1 1 auto;
  color: inherit;
  text-decoration: none;
}

.clients-list-subline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.45rem;
  margin-top: 0.08rem;
  font-size: 0.76rem;
  color: var(--ink-soft);
}

.clients-account-inline,
.clients-plan-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
}

.clients-plan-inline {
  opacity: 0.85;
}

.clients-list-open {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--row-tone) 24%, var(--border));
  background: color-mix(in srgb, var(--row-tone) 8%, transparent);
  color: var(--row-tone);
  font-size: 0.76rem;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.clients-list-open:hover,
.clients-list-open:focus-visible {
  background: color-mix(in srgb, var(--row-tone) 16%, transparent);
  border-color: color-mix(in srgb, var(--row-tone) 40%, var(--border));
  outline: none;
  text-decoration: none;
}

.clients-list-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px solid color-mix(in srgb, var(--row-tone) 10%, var(--border));
}

.clients-hotspot-status {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.35rem;
  flex: 1 1 100%;
}

.clients-status-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.18rem;
  min-width: 0;
  padding: 0.28rem 0.42rem;
  border-radius: 0.55rem;
  border: 1px solid color-mix(in srgb, var(--row-tone) 12%, var(--border));
  background: color-mix(in srgb, var(--row-tone) 4%, var(--surface));
}

.clients-status-pill-label {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--row-tone);
  opacity: 0.9;
}

.clients-status-pill .clients-surf-badge {
  align-self: stretch;
  justify-content: flex-start;
  min-width: 5.5rem;
}

.clients-status-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  margin: 0 0 0.55rem;
  padding: 0.35rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--clients-tone) 18%, var(--border));
  background: color-mix(in srgb, var(--clients-tone) 5%, transparent);
  font-size: 0.74rem;
  font-weight: 650;
  color: var(--ink-soft);
}

.clients-status-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.clients-status-legend-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  flex: 0 0 auto;
}

.clients-status-legend-dot.is-surfing {
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent);
}

.clients-status-legend-dot.is-connected {
  background: #2563eb;
  box-shadow: 0 0 0 3px color-mix(in srgb, #2563eb 18%, transparent);
}

.clients-status-legend-dot.is-idle {
  background: color-mix(in srgb, var(--ink-soft) 55%, transparent);
}

.clients-dash.is-tab-hotspot .clients-dash-panel {
  border-color: color-mix(in srgb, var(--clients-tone) 20%, var(--border));
  background:
    radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, var(--clients-tone) 8%, transparent), transparent 55%),
    var(--surface);
}

.clients-dash.is-tab-hotspot .clients-toolbar-ico {
  animation: clientsIconPop 0.55s ease both;
}

.clients-list-chip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.35rem;
  max-width: 100%;
  font-size: 0.74rem;
  color: var(--ink-soft);
}

.clients-list-chip--text strong {
  font-weight: 650;
  color: var(--ink);
}

.clients-list-chip-label {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--row-tone);
}

.clients-list-chip--router {
  gap: 0.35rem;
}

.clients-list-chip--router .clients-router-name {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  margin: 0;
  font-size: 0.74rem;
  font-weight: 650;
}

.clients-list-chip--router .mikrotik-link-status {
  font-size: 0.72rem;
}

.clients-list .clients-avatar {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.65rem;
  font-size: 0.82rem;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--row-tone) 18%, transparent);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.clients-list-identity:hover .clients-avatar,
.clients-list-identity:focus-visible .clients-avatar {
  transform: scale(1.06) rotate(-3deg);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--row-tone) 24%, transparent);
}

.clients-list .clients-name {
  font-size: 0.88rem;
  line-height: 1.25;
}

.clients-list .clients-phone {
  font-size: 0.76rem;
}

.clients-list .clients-pppoe-secret {
  margin-top: 0;
}

.clients-list .clients-secret-toggle {
  width: 1.45rem;
  height: 1.45rem;
}

.clients-list .clients-account-status {
  font-size: 0.72rem;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--row-tone) 16%, var(--border));
  background: color-mix(in srgb, var(--row-tone) 6%, transparent);
}

.clients-name-link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.clients-avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.8rem;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(145deg, var(--row-tone), color-mix(in srgb, var(--row-tone) 65%, #0b1f2a));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--row-tone) 22%, transparent);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.clients-name-stack {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.clients-name-link:hover .clients-avatar,
.clients-name-link:focus-visible .clients-avatar {
  transform: scale(1.06) rotate(-3deg);
  box-shadow: 0 10px 18px color-mix(in srgb, var(--row-tone) 28%, transparent);
}

.clients-name-link:hover .clients-name,
.clients-name-link:focus-visible .clients-name {
  color: var(--row-tone);
  text-decoration: none;
}

.clients-type-table td {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 960px) {
  .clients-workspace-head,
  .clients-seg,
  .clients-workspace-tools,
  .clients-workspace-meta,
  .clients-workspace .clients-list-host {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }

  .clients-seg {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .clients-seg-item {
    min-width: 0;
    width: 100%;
    padding: 0.45rem 0.5rem;
  }

  .clients-workspace-tools .clients-router-filter,
  .clients-workspace-tools .clients-sort-filter,
  .clients-workspace-tools .clients-search-field {
    flex: 1 1 14rem;
    width: auto;
    max-width: none;
  }

  .clients-search-input,
  .clients-router-filter-select {
    min-height: 2.6rem;
  }

  .clients-pagination {
    justify-content: space-between;
  }

  .clients-pagination .btn {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
    min-height: 2.5rem;
  }
}

@media (max-width: 720px) {
  .clients-workspace {
    border-radius: 16px;
  }

  .clients-workspace-head {
    flex-direction: column;
    align-items: stretch;
    padding-top: 0.9rem;
    padding-bottom: 0.85rem;
  }

  .clients-workspace-actions {
    width: 100%;
    justify-content: stretch;
  }

  .clients-workspace-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 2.55rem;
  }

  .clients-workspace-tools {
    padding-top: 0.8rem;
  }

  .clients-workspace-tools .clients-router-filter,
  .clients-workspace-tools .clients-sort-filter,
  .clients-workspace-tools .clients-search-field {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
  }

  .clients-search-meta {
    width: 100%;
    border-radius: 12px;
  }

  .clients-filter-clear {
    margin-left: 0;
  }

  .clients-dash-empty .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .clients-seg-ico {
    display: none;
  }

  .clients-seg-item {
    flex-direction: column;
    gap: 0.18rem;
    min-height: 3.15rem;
    padding: 0.45rem 0.35rem;
    font-size: 0.78rem;
  }

  .clients-workspace-summary {
    font-size: 0.8rem;
  }
}

.clients-status-hint {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  color: var(--ink-soft);
}

/* Simple clients table listing */
.clients-list-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  contain: inline-size;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.clients-list-table {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 0.82rem;
}

.clients-list-table th,
.clients-list-table td {
  padding: 0.45rem 0.65rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.clients-list-table th {
  background: var(--surface-3, color-mix(in srgb, var(--ink-soft) 6%, var(--surface)));
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.clients-list-table th:first-child,
.clients-list-table td:first-child {
  width: 28%;
  min-width: 12rem;
  white-space: normal;
}

.clients-list-table th:nth-child(2),
.clients-list-table td:nth-child(2) {
  width: 16%;
  min-width: 8rem;
}

.clients-list-table .clients-list-table-actions-col {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.clients-list-table .clients-surf-badge,
.clients-list-table .clients-list-table-action {
  white-space: nowrap;
}

.clients-list-table-row {
  --row-tone: var(--clients-tone);
}

.clients-list-table tbody tr:last-child td {
  border-bottom: none;
}

.clients-list-table tbody tr:hover td {
  background: color-mix(in srgb, var(--clients-tone) 4%, var(--surface));
}

.clients-list-table-name {
  display: block;
  font-weight: 650;
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clients-list-table-phone {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.76rem;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clients-list-table-phone.is-featured {
  display: inline-flex;
  align-items: center;
  margin-top: 0;
  padding: 0.28rem 0.55rem;
  border-radius: 0.55rem;
  border: 1px solid color-mix(in srgb, var(--clients-tone, #059669) 28%, var(--border));
  background: color-mix(in srgb, var(--clients-tone, #059669) 12%, transparent);
  color: var(--clients-tone-strong, #047857);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
  max-width: 100%;
}

.clients-list-table-phone.is-featured:hover,
.clients-list-table-phone.is-featured:focus-visible {
  border-color: color-mix(in srgb, var(--clients-tone, #059669) 45%, var(--border));
  background: color-mix(in srgb, var(--clients-tone, #059669) 18%, transparent);
  outline: none;
}

.clients-list-table-phone.is-empty {
  color: var(--ink-soft);
  font-weight: 600;
  opacity: 0.65;
}

.clients-list-table-mac {
  display: block;
  margin-top: 0.18rem;
  color: var(--ink-soft);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.68rem;
  font-weight: 550;
  letter-spacing: 0.02em;
  opacity: 0.72;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clients-list-table-wrap.is-hotspot-table .clients-list-table-name {
  font-size: 0.95rem;
}

.clients-list-table-wrap.is-hotspot-table .clients-list-table-name.is-secondary {
  margin-top: 0.28rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.clients-list-table-client-cell.is-hotspot-identity .clients-name-stack {
  gap: 0.12rem;
  min-width: 0;
}

.clients-list-table-client-cell.is-hotspot-identity .clients-list-table-phone.is-featured {
  margin-top: 0;
  font-size: 1rem;
  letter-spacing: 0.015em;
}

.clients-list-table-phone-cell {
  white-space: nowrap;
  min-width: 8.5rem;
}

.clients-list-table-period {
  display: block;
  margin-top: 0.12rem;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1.35;
  white-space: normal;
  max-width: 16rem;
}

.clients-list-table-wrap.is-hotspot-table .clients-list-used-pct {
  font-size: 0.9rem;
}

.clients-dash.is-tab-hotspot .clients-workspace-head {
  background:
    radial-gradient(ellipse 55% 120% at 0% -20%, color-mix(in srgb, #059669 18%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, #059669 8%, transparent), transparent 70%);
}

.clients-dash.is-tab-hotspot .clients-seg-item.tone-hotspot.is-active {
  box-shadow: 0 10px 22px color-mix(in srgb, #059669 18%, transparent);
}

.clients-list-table-client-cell {
  white-space: normal;
  min-width: 0;
  max-width: 100%;
}

.clients-list-table-account-cell {
  white-space: normal;
  min-width: 0;
  max-width: 100%;
}

.clients-list-table-used-cell {
  min-width: 5.5rem;
  max-width: 7.5rem;
  white-space: normal;
}

.clients-list-used {
  display: grid;
  gap: 0.28rem;
  min-width: 4.5rem;
}

.clients-list-used-pct {
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  letter-spacing: 0.01em;
}

.clients-list-used-track {
  display: block;
  height: 0.28rem;
  border-radius: 999px;
  background: var(--surface-3, color-mix(in srgb, var(--ink-soft) 10%, var(--surface)));
  overflow: hidden;
}

.clients-list-used-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cat-billing), var(--cat-overview));
}

.clients-list-used.is-ending .clients-list-used-pct {
  color: #c06512;
}

.clients-list-used.is-ending .clients-list-used-track > span {
  background: linear-gradient(90deg, var(--cat-billing), #e67e22);
}

.clients-list-used.is-spent .clients-list-used-pct {
  color: var(--cat-invoices, #c0392b);
}

.clients-list-used.is-spent .clients-list-used-track > span {
  background: linear-gradient(90deg, #e67e22, var(--cat-invoices));
}

.clients-list-table-account {
  display: block;
  font-weight: 650;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clients-list-table-plan {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.76rem;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clients-list-table-account-cell .clients-account-status {
  display: inline-flex;
  margin-top: 0.2rem;
}

.clients-list-table-name:hover,
.clients-list-table-name:focus-visible {
  color: var(--clients-tone);
  text-decoration: underline;
  outline: none;
}

.clients-list-table-link {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
}

.client-app .staff-main {
  overflow-x: hidden;
  max-width: 100%;
}

.client-app .staff-main > .client-detail-page.client-cmd {
  width: 100%;
  max-width: min(100%, 76rem);
  min-width: 0;
  overflow-x: clip;
}

.clients-list-table-link:hover {
  text-decoration: underline;
}

.clients-list-table-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
}

.clients-list-table-action {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--clients-tone);
  text-decoration: none;
}

button.clients-list-table-action {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.clients-list-table-action:hover {
  text-decoration: underline;
}

.clients-list-table .clients-surf-badge {
  font-size: 0.68rem;
  padding: 0.12rem 0.35rem;
}

.clients-list-table .clients-account-status {
  font-size: 0.68rem;
  padding: 0.12rem 0.35rem;
}

.clients-mikrotik-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  max-width: 100%;
}

.clients-mikrotik-cell .clients-list-table-link {
  min-width: 0;
}

.clients-list-table td[data-label="MikroTik"] .mikrotik-link-status {
  display: inline-flex;
  margin: 0;
  flex: 0 0 auto;
  gap: 0;
  font-size: 0;
  line-height: 0;
}

.clients-list-table td[data-label="MikroTik"] .mikrotik-link-status.is-checking .mikrotik-link-dot {
  display: block;
}

.clients-list-table td[data-label="Remote"] .mikrotik-link-status {
  display: inline-flex;
  margin-left: 0;
  margin-top: 0;
}

.clients-list-table td[data-label="Remote"] .mikrotik-link-status.is-checking .mikrotik-link-dot {
  display: block;
}

.clients-list-table .mikrotik-link-status {
  display: inline-flex;
  margin-left: 0;
  margin-top: 0;
  font-size: 0.68rem;
}

.clients-list-table .clients-remote-status.is-unavailable {
  color: var(--ink-soft, #8a9aa3);
}

.clients-list-table .clients-remote-status.is-unavailable .mikrotik-link-dot {
  background: #8a9aa3;
  box-shadow: none;
}

.clients-dash .mikrotik-link-status.is-limited .mikrotik-link-dot {
  animation: clientsPulseDot 1.4s ease-in-out infinite;
}

.clients-list-table .clients-pppoe-secret {
  display: inline-flex;
  margin-left: 0;
  vertical-align: middle;
}

.clients-list-table .clients-secret-toggle {
  width: 1.25rem;
  height: 1.25rem;
}

.clients-dash-empty {
  padding: 0.65rem 0.55rem;
  border-radius: 8px;
}

.clients-dash-empty-ico {
  display: none;
}

.clients-toolbar-copy h2 {
  font-size: 1rem;
}

.clients-toolbar-count {
  font-size: 0.7rem;
  min-width: 1.3rem;
  padding: 0.08rem 0.4rem;
}

.clients-panel-sub {
  font-size: 0.78rem;
}

.clients-search-input {
  height: 2.5rem;
  font-size: 0.88rem;
}

.clients-router-filter-select {
  font-size: 0.86rem;
  min-height: 2.5rem;
  padding: 0.45rem 2rem 0.45rem 0.75rem;
}

@media (max-width: 960px) {
  .clients-list-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
    border-radius: 0;
    contain: none;
  }

  .clients-list-table {
    min-width: 0 !important;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
  }

  .clients-list-table thead {
    display: none;
  }

  .clients-list-table tbody {
    display: grid;
    gap: 0.75rem;
  }

  .clients-list-table tbody tr.clients-list-table-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin: 0;
    padding: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--clients-tone) 18%, var(--border));
    border-radius: 14px;
    background:
      linear-gradient(165deg, color-mix(in srgb, var(--clients-tone) 6%, transparent), transparent 58%),
      var(--surface);
    box-shadow: 0 1px 0 color-mix(in srgb, #fff 5%, transparent) inset;
  }

  .clients-list-table tbody tr.clients-list-table-row:hover td {
    background: transparent;
  }

  .clients-list-table th,
  .clients-list-table td {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.28rem;
    width: auto !important;
    min-width: 0 !important;
    padding: 0.5rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--clients-tone) 10%, var(--border));
    border-radius: 10px;
    background: color-mix(in srgb, var(--clients-tone) 4%, var(--surface));
    font-size: 0.86rem;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .clients-list-table td::before {
    content: attr(data-label);
    max-width: none;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  .clients-list-table td.clients-list-table-client-cell,
  .clients-list-table td.clients-list-table-actions-col {
    grid-column: 1 / -1;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
  }

  .clients-list-table td.clients-list-table-phone-cell,
  .clients-list-table td.clients-list-table-client-cell.is-hotspot-identity {
    grid-column: 1 / -1;
    border-color: color-mix(in srgb, var(--clients-tone) 28%, var(--border));
    background: color-mix(in srgb, var(--clients-tone) 10%, var(--surface));
  }

  .clients-list-table td.clients-list-table-phone-cell .clients-list-table-phone.is-featured,
  .clients-list-table td.clients-list-table-client-cell.is-hotspot-identity .clients-list-table-phone.is-featured {
    font-size: 1.12rem;
  }

  .clients-list-table td.clients-list-table-client-cell {
    padding-bottom: 0.15rem;
  }

  .clients-list-table td.clients-list-table-client-cell.is-hotspot-identity {
    padding-bottom: 0.55rem;
  }

  .clients-list-table td.clients-list-table-client-cell::before,
  .clients-list-table td.clients-list-table-actions-col::before {
    display: none;
  }

  .clients-list-table td.clients-list-table-actions-col {
    padding-top: 0.2rem;
  }

  .clients-list-table .clients-list-table-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.55rem 0.75rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--clients-tone) 28%, var(--border));
    background: color-mix(in srgb, var(--clients-tone) 10%, transparent);
    color: var(--clients-tone);
    font-size: 0.86rem;
    font-weight: 750;
    text-decoration: none;
  }

  .clients-list-table .clients-list-table-action:hover,
  .clients-list-table .clients-list-table-action:focus-visible {
    background: color-mix(in srgb, var(--clients-tone) 16%, transparent);
    text-decoration: none;
    outline: none;
  }

  .clients-list-table-name,
  .clients-list-table-phone,
  .clients-list-table-account,
  .clients-list-table-plan,
  .clients-list-table-mono,
  .clients-list-table-link {
    white-space: normal;
    text-overflow: unset;
    overflow: visible;
  }

  .clients-list-table-stack,
  .clients-list-table td[data-label="MikroTik"] .clients-mikrotik-cell,
  .clients-list-table td[data-label="Remote"] .mikrotik-link-status,
  .clients-list-table td[data-label="PPPoE"] .clients-pppoe-secret {
    justify-items: start;
    justify-content: flex-start;
    margin: 0;
  }

  .clients-list-table .clients-avatar {
    width: 2.35rem;
    height: 2.35rem;
    font-size: 0.9rem;
  }

  .clients-list-table-name {
    font-size: 0.98rem;
    font-weight: 750;
  }

  .clients-list-table .clients-surf-badge {
    font-size: 0.74rem;
    padding: 0.22rem 0.5rem;
  }

  .clients-list-table .mikrotik-link-status {
    display: inline-flex;
    margin-top: 0.1rem;
  }
}

@media (max-width: 520px) {
  .clients-workspace-head,
  .clients-seg,
  .clients-workspace-tools,
  .clients-workspace-meta,
  .clients-workspace .clients-list-host {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .clients-list-table tbody tr.clients-list-table-row {
    padding: 0.75rem;
    gap: 0.4rem;
  }

  .clients-list-table td {
    padding: 0.45rem 0.5rem;
  }

  .clients-list-meta {
    gap: 0.25rem;
  }

  .clients-list-chip--text {
    flex: 1 1 100%;
  }
}

.clients-cell-value {
  min-width: 0;
}

.clients-name {
  display: block;
  font-weight: 700;
}

.clients-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  margin-top: 0;
  font-size: 0.82rem;
  opacity: 0.78;
  color: var(--ink-soft);
}

.clients-phone svg {
  flex: 0 0 auto;
  opacity: 0.85;
}

.clients-account-number,
.clients-router-name {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.clients-account-number svg,
.clients-router-name svg {
  flex: 0 0 auto;
  color: var(--row-tone, var(--clients-tone));
  opacity: 0.9;
}

.clients-account-cell {
  min-width: 8.5rem;
}

.clients-account-number {
  display: block;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.clients-account-plan {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.84rem;
  opacity: 0.78;
}

.clients-account-status {
  display: inline-flex;
  margin-top: 0.35rem;
}

.clients-pppoe-cell {
  min-width: 9rem;
}

.clients-pppoe-user {
  display: block;
  font-weight: 650;
}

.clients-pppoe-secret {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.2rem;
  flex-wrap: nowrap;
}

.clients-pppoe-secret .mikrotik-secret-mask,
.clients-pppoe-secret .mikrotik-secret-value {
  font-size: 0.84rem;
}

.clients-secret-toggle {
  position: static;
  transform: none;
  width: 1.65rem;
  height: 1.65rem;
  flex: 0 0 auto;
}

.clients-pppoe-pass-none {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  opacity: 0.65;
}

.clients-router-cell {
  min-width: 9.5rem;
}

.clients-router-name {
  display: block;
  font-weight: 650;
  color: inherit;
  text-decoration: none;
  margin-bottom: 0.25rem;
}

.clients-router-name:hover,
.clients-router-name:focus-visible {
  text-decoration: underline;
}

.clients-router-none {
  opacity: 0.65;
  font-size: 0.88rem;
}

.clients-row-actions {
  text-align: right;
  white-space: nowrap;
}

.clients-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--row-tone, var(--clients-tone)) 28%, var(--border));
  background: color-mix(in srgb, var(--row-tone, var(--clients-tone)) 10%, transparent);
  color: var(--row-tone, var(--clients-tone));
  font-size: 0.84rem;
  font-weight: 750;
  text-decoration: none;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.clients-view-btn svg {
  transition: transform 0.18s ease;
}

.clients-view-btn:hover,
.clients-view-btn:focus-visible {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--row-tone, var(--clients-tone)) 18%, transparent);
  border-color: color-mix(in srgb, var(--row-tone, var(--clients-tone)) 45%, var(--border));
  color: var(--row-tone, var(--clients-tone));
  outline: none;
  text-decoration: none;
}

.clients-view-btn:hover svg,
.clients-view-btn:focus-visible svg {
  transform: translateX(2px);
}

.clients-dash .mikrotik-link-status.is-connected .mikrotik-link-dot {
  animation: clientsPulseDot 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .clients-dash-hero,
  .clients-dash-hero-mark,
  .clients-dash-stat,
  .clients-dash-panel,
  .clients-type-row,
  .clients-list-item,
  .clients-search-meta,
  .clients-dash-empty,
  .clients-surf-badge.is-surfing,
  .clients-list-host.is-search-loading::after,
  .clients-dash .mikrotik-link-status.is-connected .mikrotik-link-dot,
  .clients-dash .mikrotik-link-status.is-limited .mikrotik-link-dot {
    animation: none !important;
  }

  .clients-dash-stat:hover,
  .clients-dash-stat:focus-visible,
  .clients-seg-item:hover,
  .clients-seg-item:focus-visible,
  .clients-view-btn:hover,
  .clients-view-btn:focus-visible,
  .clients-name-link:hover .clients-avatar,
  .clients-list-identity:hover .clients-avatar,
  .clients-search-clear:hover,
  .clients-list-item:hover,
  .clients-list-item:focus-within {
    transform: none;
  }
}

.client-detail-page {
  width: 100%;
  min-width: 0;
}

.client-detail-page > .panel {
  margin-bottom: 0.85rem;
}

.client-detail-page > .panel:last-child {
  margin-bottom: 0;
}

.client-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  opacity: 1;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.client-back-link:hover,
.client-back-link:focus-visible {
  opacity: 1;
  color: var(--sea);
  border-color: color-mix(in srgb, var(--sea) 35%, var(--border));
  background: var(--sea-soft);
  transform: translateX(-2px);
  text-decoration: none;
  outline: none;
}

.client-user-profile {
  z-index: 40;
}

.client-user-avatar {
  background: rgba(56, 189, 248, 0.18);
  color: #7dd3fc;
  font-weight: 800;
  font-size: 0.85rem;
}

[data-theme="light"] .client-user-avatar {
  background: rgba(14, 116, 144, 0.12);
  color: #0e7490;
}

.client-user-avatar-lg {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1rem;
}

.client-user-profile-panel {
  width: min(92vw, 24rem);
  max-height: min(78vh, 36rem);
  overflow: auto;
  padding-bottom: 0.85rem;
}

.client-user-profile-session {
  padding-top: 0.15rem;
}

/* Chips in the account menu stretch to fill their row; in this profile
   popup they read better hugging the value column like the other rows. */
.client-user-profile-panel .role-identity-row {
  justify-content: space-between;
  gap: 0.6rem;
}

.client-user-profile-panel .role-view-hint {
  flex: 0 0 auto;
}

.client-user-profile-panel .role-chip,
.client-user-profile-panel .mikrotik-link-status {
  flex: 0 0 auto;
  margin-left: auto;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
}

.client-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 0.6rem;
}

.client-hero-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
  padding-right: 0.35rem;
}

.client-profile-open {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex: 1 1 18rem;
  min-width: 0;
  margin: 0;
  padding: 0.55rem 0.75rem 0.55rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 0.85rem;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.client-profile-open:hover,
.client-profile-open:focus-visible {
  border-color: rgba(14, 124, 134, 0.35);
  background: var(--surface-2);
  box-shadow: 0 0 0 4px var(--sea-soft);
  outline: none;
}

.client-profile-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 2.9rem;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.18);
  color: #7dd3fc;
  font-size: 1.15rem;
  font-weight: 800;
}

[data-theme="light"] .client-profile-avatar {
  background: rgba(14, 116, 144, 0.12);
  color: #0e7490;
}

.client-profile-identity {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
  flex: 1 1 auto;
}

.client-profile-kicker {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
}

.client-profile-name {
  font-size: clamp(1.1rem, 3.2vw, 1.35rem);
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.client-profile-account {
  margin: 0;
  color: var(--muted, #64748b);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.client-profile-open-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  margin-left: 0.35rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted, #64748b);
  white-space: nowrap;
}

.client-profile-open:hover .client-profile-open-hint,
.client-profile-open.is-open .client-profile-open-hint {
  border-color: rgba(14, 124, 134, 0.4);
  color: inherit;
}

.client-profile-open.is-open {
  border-color: rgba(14, 124, 134, 0.35);
  background: var(--surface-2);
  box-shadow: 0 0 0 4px var(--sea-soft);
}

.client-detail-page .mikrotik-detail-toolbar {
  align-items: flex-start;
  gap: 0.65rem 1rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.85rem;
}

.client-detail-page .mikrotik-detail-toolbar-copy {
  min-width: 0;
}

.client-detail-page .mikrotik-detail-toolbar-copy h2 {
  font-size: clamp(1.02rem, 2.4vw, 1.18rem);
  line-height: 1.25;
}

.client-detail-page .mikrotik-detail-kicker {
  margin-bottom: 0.15rem;
}

.client-detail-page .panel-sub {
  margin: 0.3rem 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
  max-width: 60ch;
}

.client-detail-page .mikrotik-detail-actions {
  align-items: center;
  gap: 0.5rem 0.65rem;
}

.client-detail-page .btn {
  min-height: 2.5rem;
}

.client-live-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0.35rem 0 0;
}

.client-live-fact {
  min-width: 0;
  padding: 0.4rem 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

.client-live-fact dt {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}

.client-live-fact dd {
  margin: 0.25rem 0 0;
}

.client-live-fact strong {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.client-live-fact span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  line-height: 1.35;
  opacity: 0.6;
  overflow-wrap: anywhere;
}

.client-live-empty-text {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  opacity: 0.7;
}

.client-access-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.client-access-card {
  min-width: 0;
  padding: 0.4rem 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

.client-access-label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}

.client-access-value {
  margin: 0.3rem 0 0;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.client-access-value a {
  color: inherit;
}

.client-access-hint {
  margin: 0.2rem 0 0;
  font-size: 0.74rem;
  line-height: 1.35;
  opacity: 0.6;
  overflow-wrap: anywhere;
}

.client-access-note {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  opacity: 0.65;
}

.client-router-password-form {
  margin: 0 0 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.12));
  border-radius: 12px;
}

.client-router-credentials-form {
  margin-top: 1rem;
}

.client-router-credentials-title {
  margin: 0 0 0.25rem;
  font-size: 0.92rem;
  font-weight: 700;
}

.client-router-credentials-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  gap: 0.65rem 0.75rem;
  align-items: end;
}

@media (max-width: 900px) {
  .client-router-credentials-grid {
    grid-template-columns: 1fr 1fr;
  }

  .client-router-credentials-actions {
    grid-column: 1 / -1;
  }

  .client-router-credentials-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .client-router-credentials-grid {
    grid-template-columns: 1fr;
  }
}

.client-router-credentials-grid .form-field {
  margin: 0;
}

.client-router-credentials-grid .form-field label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
}

.client-router-credentials-grid .password-field {
  position: relative;
}

.client-router-credentials-grid .password-field .form-control {
  width: 100%;
  padding-right: 2.5rem;
}

.client-router-credentials-grid .password-field .password-toggle {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
}

.client-router-credentials-actions {
  display: flex;
  align-items: flex-end;
}

.client-router-password-form label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
}

.client-router-password-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.client-router-password-row .password-field {
  position: relative;
  flex: 1 1 240px;
  min-width: 0;
}

.client-router-password-row .password-field .form-control {
  width: 100%;
  padding-right: 2.5rem;
}

.client-router-password-row .password-field .password-toggle {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
}

.client-router-password-row .form-control {
  flex: 1 1 240px;
  min-width: 0;
}

.client-usage-panel {
  margin-bottom: 1.25rem;
}

.client-cpe-prep {
  margin: 0.75rem 0 0;
  font-size: 0.86rem;
  opacity: 0.85;
}

.client-cpe-prep summary {
  cursor: pointer;
  font-weight: 650;
}

.client-cpe-prep ol {
  margin: 0.45rem 0 0;
  padding-left: 1.2rem;
}

.client-cpe-prep li {
  margin: 0.15rem 0;
}

/* Three headline metrics: flow them fluidly instead of inheriting the
   shared 3/2/1 column steps, which strand the third card on tablets. */
.client-usage-panel .client-usage-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  margin-top: 0;
}

.client-usage-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95em;
  letter-spacing: 0.01em;
}

.client-usage-panel.is-online [data-metric="session"] .mikrotik-live-value {
  color: #1f8a5b;
}

.client-usage-panel.is-offline [data-metric="session"] .mikrotik-live-value {
  color: #c0392b;
}

.client-billing-analysis {
  margin-bottom: 1rem;
}

.client-package-period {
  margin-bottom: 0.75rem;
}

.client-package-period + .client-usage-panel {
  margin-top: 0;
}

.client-cpe-connect-form {
  display: inline-flex;
  margin: 0;
}

.client-cpe-unlock {
  margin: 0.85rem 0 0;
  padding: 0.95rem 1rem;
  border-radius: 0.75rem;
  background: rgba(192, 57, 43, 0.1);
  border: 1px solid rgba(192, 57, 43, 0.28);
}

.client-cpe-unlock-title {
  margin: 0 0 0.55rem;
  font-weight: 700;
  color: #c0392b;
}

.client-cpe-unlock-steps {
  margin: 0 0 0.75rem 1.1rem;
  padding: 0;
  line-height: 1.45;
  font-size: 0.92rem;
}

.client-cpe-unlock-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.client-cpe-unlock-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  margin-top: 0.65rem;
}

.client-subscription-banner {
  margin: 0 0 0.9rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 0.7rem;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.45;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.85rem;
  align-items: center;
}

.client-subscription-banner::before {
  content: "";
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

.client-subscription-banner.is-active {
  background: rgba(31, 138, 91, 0.1);
  border-color: rgba(31, 138, 91, 0.28);
  color: #1f8a5b;
}

.client-subscription-banner.is-blocked {
  background: rgba(192, 57, 43, 0.1);
  border-color: rgba(192, 57, 43, 0.28);
  color: #c0392b;
}

.client-subscription-banner.is-paused {
  background: rgba(180, 120, 20, 0.12);
  border-color: rgba(180, 120, 20, 0.32);
  color: #8a5a00;
}

.client-subscription-banner a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

.renew-page {
  min-height: 100vh;
  margin: 0;
  position: relative;
  font-family: var(--font-body);
  color: #142033;
}

.renew-page-bg {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(31, 111, 235, 0.35), transparent 42%),
    radial-gradient(circle at 80% 0%, rgba(20, 90, 140, 0.4), transparent 40%),
    linear-gradient(165deg, #0f2744 0%, #163a5c 48%, #0c1b2c 100%);
  z-index: 0;
}

.renew-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}

.renew-popup {
  width: min(100%, 26rem);
  border: 0;
  border-radius: 1rem;
  padding: 1.5rem 1.4rem 1.2rem;
  background: #f7f9fc;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.35);
  color: #142033;
}

.renew-popup::backdrop {
  background: rgba(6, 16, 28, 0.55);
}

.renew-popup-brand {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: var(--tracking-wide, 0.06em);
  text-transform: uppercase;
  color: #3d5a80;
  margin-bottom: 0.55rem;
}

.renew-popup h1 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4vw, 1.65rem);
  font-weight: 700;
  letter-spacing: var(--tracking-tight, -0.02em);
  line-height: 1.2;
  margin: 0 0 0.7rem;
}

.renew-popup p {
  margin: 0 0 0.7rem;
  line-height: 1.55;
  font-size: 0.98rem;
}

.renew-period,
.renew-hint,
.renew-account {
  font-size: 0.9375rem;
  color: #4d5f78;
}

.renew-popup-ok {
  width: 100%;
  margin-top: 0.55rem;
}

.client-usage-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  gap: 0;
  margin: 0;
}

.client-usage-stat {
  min-width: 0;
  padding: 0.45rem 0.55rem 0.5rem 0;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

.client-usage-stat span {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.6;
  margin-bottom: 0.25rem;
}

.client-usage-stat strong {
  display: block;
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.client-billing-analysis .client-usage-stats {
  margin-bottom: 1.25rem;
}

.client-billing-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.client-billing-subhead {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  font-weight: 750;
}

@media (max-width: 900px) {
  .client-billing-split {
    grid-template-columns: 1fr;
  }
}

.clients-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 720px) {
  .client-hero-status {
    width: 100%;
    margin-left: 0;
    padding-left: 0.6rem;
  }

  .client-detail-page .mikrotik-detail-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .client-detail-page .mikrotik-detail-actions {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }

  .client-detail-page .mikrotik-detail-actions .btn {
    flex: 1 1 9rem;
  }
}

@media (max-width: 520px) {
  .client-profile-open {
    flex-wrap: wrap;
    gap: 0.7rem;
  }

  .client-profile-avatar {
    flex-basis: 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
  }

  .client-profile-open-hint {
    width: 100%;
    margin-left: 0;
    justify-content: center;
  }

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

  .client-live-facts {
    grid-template-columns: 1fr;
  }
}

.client-detail-rows {
  margin-top: 1rem;
}

.client-detail-router {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
}

.client-detail-router a {
  color: inherit;
}

.clients-router-host {
  opacity: 0.7;
  font-weight: 500;
  font-size: 0.9em;
}

.client-secret {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
}

.clients-empty {
  padding: 1.25rem 0.15rem 0.35rem;
}

.clients-empty-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 750;
}

.clients-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 1.15rem;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--clients-tone, #0e7c86) 4%, var(--surface));
  flex-wrap: wrap;
}

.clients-pagination .btn {
  min-width: 6.5rem;
  border-radius: 999px;
  font-weight: 700;
}

.clients-pagination-meta {
  font-size: 0.84rem;
  font-weight: 650;
  color: var(--ink-soft);
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink-soft) 8%, transparent);
}

@media (max-width: 720px) {
  .client-type-tab {
    justify-content: space-between;
    min-width: 7.5rem;
  }
}

.mikrotik-link-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.01em;
}

.mikrotik-link-spinner {
  display: none;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  border: 2px solid rgba(138, 154, 163, 0.35);
  border-top-color: #5b8fa8;
  flex: 0 0 auto;
  animation: mk-spin 0.7s linear infinite;
}

.mikrotik-link-status.is-checking .mikrotik-link-spinner {
  display: inline-block;
}

.mikrotik-link-status.is-checking .mikrotik-link-dot {
  display: none;
}

.mikrotik-link-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #8a9aa3;
  flex: 0 0 auto;
}

.mikrotik-link-status.is-checking .mikrotik-link-dot {
  background: #8a9aa3;
  box-shadow: 0 0 0 0 rgba(138, 154, 163, 0.5);
  animation: mikrotik-status-pulse 1.2s ease-out infinite;
}

.mikrotik-link-status.is-connected {
  color: #1f8a5b;
}

.mikrotik-link-status.is-connected .mikrotik-link-dot {
  background: #2ecc71;
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.18);
}

.mikrotik-link-status.is-disconnected {
  color: #c0392b;
}

.mikrotik-link-status.is-disconnected .mikrotik-link-dot {
  background: #e74c3c;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.16);
}

.mikrotik-link-status.is-limited {
  color: #d68910;
}

.mikrotik-link-status.is-limited .mikrotik-link-dot {
  background: #f39c12;
  box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.2);
}

.mikrotik-link-status.is-auth-failed {
  color: #e67e22;
}

.mikrotik-link-status.is-auth-failed .mikrotik-link-dot {
  background: #e67e22;
  box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.2);
}

.mikrotik-link-status.is-reachable {
  color: #2980b9;
}

.mikrotik-link-status.is-reachable .mikrotik-link-dot {
  background: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.18);
}

@keyframes mikrotik-status-pulse {
  0% { box-shadow: 0 0 0 0 rgba(138, 154, 163, 0.45); }
  70% { box-shadow: 0 0 0 6px rgba(138, 154, 163, 0); }
  100% { box-shadow: 0 0 0 0 rgba(138, 154, 163, 0); }
}

[data-theme="light"] .mikrotik-link-status.is-connected {
  color: #1a7a4c;
}

[data-theme="light"] .mikrotik-link-status.is-disconnected {
  color: #b03a2e;
}

[data-theme="light"] .mikrotik-link-status.is-limited {
  color: #b45309;
}

.badge-muted {
  background: var(--surface-3);
  color: var(--ink-soft);
}

.org-page {
  width: 100%;
  max-width: none;
  margin: 0;
}

.org-edit {
  width: min(100%, 42rem);
  margin: 0 auto;
  animation: rise 0.45s ease both;
}

.org-edit-panel .org-edit-grid + .org-edit-grid {
  margin-top: 0.95rem;
}

.org-edit-panel .form-group + .org-edit-grid {
  margin-top: 0.95rem;
}

.org-edit-intro {
  margin-bottom: 1.35rem;
}

.org-edit-back {
  display: inline-flex;
  margin-bottom: 1rem;
  color: var(--sea-deep);
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
}

.org-edit-back:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.org-edit-hero {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
}

.org-edit-avatar,
.org-edit-photo-preview {
  width: 4.75rem;
  height: 4.75rem;
  border-radius: 18px;
  object-fit: cover;
  flex: 0 0 auto;
  border: 2px solid color-mix(in srgb, var(--sea) 22%, transparent);
}

.org-edit-avatar-fallback {
  display: inline-grid;
  place-items: center;
  background: linear-gradient(145deg, var(--sea), var(--sea-deep));
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
}

.org-edit-hero-copy {
  min-width: 0;
  flex: 1;
}

.org-edit-kicker {
  margin: 0 0 0.2rem;
  color: var(--sea-deep);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.org-edit-hero-copy h2 {
  margin: 0 0 0.65rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.55rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.org-edit-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
  margin-bottom: 0.55rem;
}

.org-edit-meta-item {
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 600;
}

.org-edit-owner {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.4;
}

.org-edit-owner span {
  display: inline-block;
  margin-left: 0.35rem;
  opacity: 0.85;
}

.org-edit-form {
  display: grid;
  gap: 1rem;
}

.org-edit-panel {
  padding: 1.25rem 1.3rem 1.35rem;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sea) 4%, var(--surface)), var(--surface));
}

.org-edit-panel-head {
  margin-bottom: 1.1rem;
}

.org-edit-panel-head h3 {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.org-edit-panel-head p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.4;
}

.org-edit-panel--credentials {
  border-color: color-mix(in srgb, var(--sea) 24%, var(--border-strong));
  background:
    radial-gradient(ellipse 70% 55% at 0% 0%, color-mix(in srgb, var(--sea) 9%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--sea) 4%, var(--surface)), var(--surface));
}

.org-edit-credentials-code {
  margin-bottom: 1rem;
}

.org-edit-credentials-code .form-group {
  display: grid;
  gap: 0.45rem;
}

.org-edit-code-input-wrap {
  width: min(100%, 14rem);
}

.org-edit-code-input-wrap .join-code-input {
  width: 100%;
  min-height: 3rem;
  text-align: center;
  font-size: 1.25rem;
  letter-spacing: 0.38em;
  border-radius: 12px;
}

.org-edit-panel--credentials .join-code-input.password-input {
  letter-spacing: 0.28em;
  font-size: 1.05rem;
  text-align: center;
}

/* Employee self-service profile */
.emp-profile-shell {
  width: min(100%, 760px);
  margin: 0 auto;
  animation: uiRise 0.45s var(--ease-out) both;
}

.emp-profile-intro {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 1.15rem;
}

.emp-profile-kicker {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--sea);
}

.emp-profile-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.emp-profile-lead {
  margin: 0;
  max-width: 36rem;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.emp-profile-back {
  display: inline-flex;
  margin-top: 0.35rem;
  color: var(--sea-deep);
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
}

.emp-profile-back:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.emp-profile-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 1.25rem 1.35rem;
  margin-bottom: 1.15rem;
  background:
    radial-gradient(ellipse 70% 80% at 0% 0%, color-mix(in srgb, var(--sea) 18%, transparent), transparent 55%),
    radial-gradient(ellipse 50% 60% at 100% 100%, color-mix(in srgb, var(--signal) 12%, transparent), transparent 50%),
    var(--surface-solid, var(--surface));
}

.emp-profile-hero-main {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  min-width: 0;
}

.emp-profile-avatar,
.emp-profile-photo-preview {
  width: 84px;
  height: 84px;
  border-radius: 22px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--sea) 22%, transparent);
}

.emp-profile-avatar-fallback,
.emp-profile-photo-preview.emp-profile-avatar-fallback {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--sea-deep);
  background: color-mix(in srgb, var(--sea) 14%, var(--surface-solid));
  border: 1px solid color-mix(in srgb, var(--sea) 28%, transparent);
}

.emp-profile-hero-copy {
  min-width: 0;
}

.emp-profile-hero-copy h3 {
  margin: 0.2rem 0 0.55rem;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.55rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  word-break: break-word;
}

.emp-profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.emp-profile-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--surface-solid) 80%, var(--sea) 8%);
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.2;
}

.emp-profile-chip--status {
  border-color: transparent;
}

.emp-profile-signin-aside {
  min-width: min(220px, 100%);
  padding: 0.95rem 1.05rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--sea) 22%, transparent);
  background: color-mix(in srgb, var(--sea) 8%, var(--surface-solid));
  text-align: center;
}

.emp-profile-signin-label {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.emp-profile-signin-code {
  display: block;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  font-variant-numeric: tabular-nums;
  color: var(--sea-deep);
}

.emp-profile-signin-hint {
  margin: 0.45rem 0 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.4;
}

.emp-profile-form {
  display: grid;
  gap: 1rem;
}

.emp-profile-card {
  padding: clamp(1.1rem, 2.5vw, 1.35rem);
  animation: uiRise 0.45s var(--ease-out) both;
}

.emp-profile-form > .emp-profile-card:nth-child(2) { animation-delay: 0.04s; }
.emp-profile-form > .emp-profile-card:nth-child(3) { animation-delay: 0.08s; }
.emp-profile-form > .emp-profile-card:nth-child(4) { animation-delay: 0.12s; }
.emp-profile-form > .emp-profile-card:nth-child(5) { animation-delay: 0.16s; }

.emp-profile-card--identity {
  border-color: color-mix(in srgb, var(--sea) 22%, var(--border-strong));
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, color-mix(in srgb, var(--sea) 8%, transparent), transparent 58%),
    var(--surface-solid, var(--surface));
}

.emp-profile-card--contact {
  border-color: color-mix(in srgb, var(--signal) 18%, var(--border-strong));
  background:
    radial-gradient(ellipse 70% 55% at 100% 0%, color-mix(in srgb, var(--signal) 7%, transparent), transparent 55%),
    var(--surface-solid, var(--surface));
}

.emp-profile-card--security {
  border-color: color-mix(in srgb, var(--sea) 20%, var(--border-strong));
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--sea) 6%, var(--surface-solid)), var(--surface-solid));
}

.emp-profile-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border);
}

.emp-profile-card-head h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 0.96rem + 0.25vw, 1.15rem);
  letter-spacing: var(--tracking-tight);
}

.emp-profile-card-head p {
  margin: 0.3rem 0 0;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.emp-profile-card-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 11px;
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--surface-3) 70%, transparent);
  color: var(--ink-soft);
}

.emp-profile-card-icon--photo {
  border-color: color-mix(in srgb, var(--signal) 24%, transparent);
  background: color-mix(in srgb, var(--signal) 10%, var(--surface-solid));
  color: color-mix(in srgb, var(--signal) 72%, var(--ink));
}

.emp-profile-card-icon--identity {
  border-color: color-mix(in srgb, var(--sea) 28%, transparent);
  background: color-mix(in srgb, var(--sea) 12%, var(--surface-solid));
  color: var(--sea-deep);
}

.emp-profile-card-icon--contact {
  border-color: color-mix(in srgb, var(--signal) 26%, transparent);
  background: color-mix(in srgb, var(--signal) 10%, var(--surface-solid));
  color: color-mix(in srgb, var(--signal) 72%, var(--ink));
}

.emp-profile-card-icon--security {
  border-color: color-mix(in srgb, var(--sea) 28%, transparent);
  background: color-mix(in srgb, var(--sea) 12%, var(--surface-solid));
  color: var(--sea-deep);
}

.emp-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1rem;
}

.emp-profile-photo-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.95rem 1rem;
  border-radius: 16px;
  border: 1px dashed color-mix(in srgb, var(--sea) 28%, var(--border-strong));
  background: color-mix(in srgb, var(--sea) 5%, var(--surface-solid));
}

.emp-profile-photo-picker {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.emp-profile-photo-btn {
  cursor: pointer;
  margin: 0;
}

.emp-profile-photo-hint {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.emp-profile-form .org-edit-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.emp-profile-card--security .join-code-input {
  text-align: center;
  letter-spacing: 0.28em;
  font-size: 1.05rem;
}

.emp-profile-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1rem;
  flex-wrap: wrap;
}

.emp-profile-actions--sticky {
  position: sticky;
  bottom: 0.75rem;
  z-index: 5;
  margin-top: 0.15rem;
  padding: 0.85rem 1rem;
  border-radius: 16px;
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--surface-solid, #fff) 88%, transparent);
  box-shadow: 0 12px 36px color-mix(in srgb, var(--ink) 14%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

.emp-profile-actions-hint {
  margin: 0;
  flex: 1 1 auto;
  min-width: min(100%, 12rem);
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.4;
}

.emp-profile-actions-buttons {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-left: auto;
}

.emp-profile-actions--sticky .btn-primary {
  min-width: min(100%, 11rem);
}

@media (max-width: 720px) {
  .emp-profile-hero {
    align-items: flex-start;
    padding: 1.1rem;
  }

  .emp-profile-hero-main {
    width: 100%;
  }

  .emp-profile-avatar,
  .emp-profile-photo-preview {
    width: 72px;
    height: 72px;
    border-radius: 18px;
  }

  .emp-profile-signin-aside {
    width: 100%;
  }

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

  .emp-profile-actions--sticky {
    flex-direction: column;
    align-items: stretch;
    bottom: 0.5rem;
    padding: 0.75rem;
  }

  .emp-profile-actions-hint {
    text-align: center;
  }

  .emp-profile-actions-buttons {
    margin-left: 0;
    width: 100%;
  }

  .emp-profile-actions--sticky .btn {
    width: 100%;
    justify-content: center;
  }
}

[data-theme="dark"] .emp-profile-signin-aside,
[data-theme="dark"] .emp-profile-card--identity,
[data-theme="dark"] .emp-profile-card--contact,
[data-theme="dark"] .emp-profile-card--security {
  background: color-mix(in srgb, var(--surface-solid) 92%, #000 8%);
}

[data-theme="dark"] .emp-profile-actions--sticky {
  background: color-mix(in srgb, var(--surface-solid) 82%, transparent);
}

.org-edit-photo {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.org-edit-photo-fields {
  flex: 1;
  min-width: 0;
  position: relative;
}

.org-edit-file {
  display: grid;
  gap: 0.35rem;
  cursor: pointer;
}

.org-edit-file-btn {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.55rem 0.9rem;
  border: 1.5px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 700;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.org-edit-file:hover .org-edit-file-btn {
  border-color: var(--sea);
  background: var(--sea-soft);
}

.org-edit-file-hint {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
}

.org-edit-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.package-image-upload {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.package-image-preview {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
}

[data-theme="light"] .package-image-preview {
  border-color: rgba(16, 36, 44, 0.1);
  background: rgba(16, 36, 44, 0.04);
}

.package-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.package-image-preview-empty {
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.55;
}

.package-image-fields {
  position: relative;
  min-width: 12rem;
  flex: 1 1 12rem;
}

/* Package register / edit modals reuse the PPPoE modal shell */
.pppoe-grid textarea.form-control {
  min-height: 5.25rem;
  resize: vertical;
  line-height: 1.45;
}

.pppoe-grid .package-active-check {
  margin: 0;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  align-items: center;
}

.pppoe-grid .package-active-check input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: #0e7c86;
  flex: 0 0 auto;
}

.pppoe-grid .package-image-upload {
  margin-top: 0.15rem;
}

[data-theme="light"] .pppoe-grid .package-active-check {
  border-color: rgba(11, 31, 42, 0.1);
  background: rgba(11, 31, 42, 0.03);
}

.package-router-check-list {
  margin-top: 0.55rem;
}

.package-router-check-list ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.4rem 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.package-router-check-list li {
  margin: 0;
}

.package-router-check-list label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.1rem;
  padding: 0.4rem 0.65rem;
  border-radius: 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.88rem;
  font-weight: 650;
  cursor: pointer;
  width: 100%;
}

[data-theme="light"] .package-router-check-list label {
  border-color: rgba(11, 31, 42, 0.1);
  background: rgba(11, 31, 42, 0.03);
}

.package-router-check-list input {
  width: 1rem;
  height: 1rem;
  accent-color: #0e7c86;
  flex: 0 0 auto;
}

.package-router-scope {
  display: inline-block;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--ink-soft, #5b6b82);
}

.package-router-scope.is-all {
  color: #0e7c86;
}

/* Billing dashboard ? Collect payment (STK) modal */
#billing-stk-pay-modal .pppoe-panel {
  position: relative;
}

.billing-stk-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin: 0;
}

.billing-stk-summary-item {
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem 0.85rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="light"] .billing-stk-summary-item {
  border-color: rgba(11, 31, 42, 0.1);
  background: rgba(11, 31, 42, 0.03);
}

.billing-stk-summary-span {
  grid-column: 1 / -1;
}

.billing-stk-summary-item dt {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft, #8aa0b2);
}

.billing-stk-summary-item dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: var(--ink, #f4fbfc);
  overflow-wrap: anywhere;
}

[data-theme="light"] .billing-stk-summary-item dd {
  color: #0b1f2a;
}

.billing-stk-status-text {
  margin: 0;
  padding: 0.75rem 0.85rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(14, 124, 134, 0.28);
  background: rgba(14, 124, 134, 0.1);
  color: var(--ink-soft, #cfe7ea);
  font-size: 0.88rem;
  line-height: 1.45;
  font-weight: 650;
}

.billing-stk-status-text.is-error {
  border-color: rgba(220, 80, 80, 0.35);
  background: rgba(220, 80, 80, 0.12);
  color: #fca5a5;
}

[data-theme="light"] .billing-stk-status-text {
  color: #0e5c64;
}

[data-theme="light"] .billing-stk-status-text.is-error {
  color: #b42318;
}

.billing-stk-waiting {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  border-radius: inherit;
  background: rgba(8, 16, 22, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.billing-stk-waiting[hidden] {
  display: none !important;
}

.billing-stk-waiting-card {
  width: min(100%, 18.5rem);
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  padding: 1.25rem 1.1rem;
  border-radius: 1rem;
  border: 1px solid rgba(45, 212, 191, 0.28);
  background: rgba(16, 28, 35, 0.96);
  text-align: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.billing-stk-spinner {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  border: 2.5px solid rgba(45, 212, 191, 0.25);
  border-top-color: #2dd4bf;
  animation: billing-stk-spin 0.8s linear infinite;
}

@keyframes billing-stk-spin {
  to { transform: rotate(360deg); }
}

.billing-stk-waiting-live {
  margin: 0.15rem 0 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2dd4bf;
}

.billing-stk-waiting-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 750;
  color: #f4fbfc;
}

.billing-stk-waiting-copy {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.4;
  color: rgba(232, 242, 244, 0.72);
}

@media (prefers-reduced-motion: reduce) {
  .billing-stk-spinner { animation: none; border-top-color: #2dd4bf; }
}

/* Billing dashboard page */
.billing-dash {
  --billing-tone: #0e7c86;
  --billing-tone-soft: color-mix(in srgb, #0e7c86 16%, transparent);
  overflow-x: clip;
}

.billing-dash:not(.ops-page) {
  display: grid;
  gap: 0;
  width: min(100%, var(--max));
  max-width: var(--max);
  min-width: 0;
  margin-inline: auto;
  padding-bottom: 1.25rem;
}

.billing-workspace {
  display: grid;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--billing-tone) 18%, var(--border-strong, var(--border)));
  border-radius: 18px;
  background: var(--surface-solid, var(--surface));
  box-shadow: var(--card-shadow, 0 14px 34px color-mix(in srgb, var(--ink) 8%, transparent));
  overflow: hidden;
}

.billing-workspace-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
  padding: 1.15rem 1.2rem 1.05rem;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(ellipse 55% 90% at 0% -10%, color-mix(in srgb, var(--billing-tone) 22%, transparent), transparent 58%),
    radial-gradient(ellipse 40% 70% at 100% 110%, color-mix(in srgb, var(--signal) 12%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--billing-tone) 8%, transparent), transparent 70%);
}

.billing-workspace-title {
  min-width: 0;
}

.billing-workspace-brand {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  min-width: 0;
}

.billing-workspace-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--billing-tone) 28%, var(--border));
  background: color-mix(in srgb, var(--billing-tone) 12%, var(--surface));
  color: var(--billing-tone);
}

.billing-workspace-kicker {
  margin: 0 0 0.2rem;
  color: var(--billing-tone);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.billing-workspace-title h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.55vw, 1.65rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--ink);
}

.billing-workspace-lead {
  margin: 0.4rem 0 0;
  max-width: 42rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.45;
}

.billing-workspace-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  margin: 0.65rem 0 0;
  font-size: 0.84rem;
  color: var(--ink-soft);
}

.billing-workspace-summary strong {
  color: var(--ink);
  font-weight: 800;
}

.billing-workspace-pill {
  --pill-tone: var(--billing-tone);
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--pill-tone) 28%, var(--border));
  background: color-mix(in srgb, var(--pill-tone) 12%, transparent);
  color: var(--pill-tone);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.billing-workspace-pill.tone-active { --pill-tone: #059669; }
.billing-workspace-pill.tone-warn { --pill-tone: #c27803; }
.billing-workspace-pill.tone-invoice { --pill-tone: #0e7c86; }

.billing-workspace-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  flex: 0 0 auto;
}

.billing-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.billing-hero-btn svg {
  flex: 0 0 auto;
}

.billing-dash-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  padding: 0.95rem 1.15rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--billing-tone) 3%, transparent);
}

.billing-dash-stat {
  --stat-tone: var(--billing-tone);
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0.85rem 0.9rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--stat-tone) 18%, var(--border));
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--stat-tone) 10%, transparent), transparent 62%),
    var(--surface-solid, var(--surface));
  min-width: 0;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.billing-dash-stat.tone-total { --stat-tone: #0e7c86; }
.billing-dash-stat.tone-good { --stat-tone: #059669; }
.billing-dash-stat.tone-warn { --stat-tone: #c27803; }
.billing-dash-stat.tone-invoice { --stat-tone: #0369a1; }
.billing-dash-stat.is-warn { --stat-tone: #c27803; }

.billing-dash-stat:hover {
  border-color: color-mix(in srgb, var(--stat-tone) 40%, var(--border));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--stat-tone) 12%, transparent);
  transform: translateY(-1px);
}

.billing-dash-stat-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--stat-tone) 14%, transparent);
  color: var(--stat-tone);
  flex: 0 0 auto;
}

.billing-dash-stat-body {
  min-width: 0;
  flex: 1 1 auto;
}

.billing-dash-stat-label {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.billing-dash-stat-value {
  margin: 0.28rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.billing-dash-stat-money {
  font-size: clamp(1rem, 1.8vw, 1.3rem);
}

.billing-section {
  display: grid;
  gap: 0.9rem;
  padding: 1.05rem 1.15rem 1.15rem;
  border-bottom: 1px solid var(--border);
  min-width: 0;
}

.billing-section.is-last {
  border-bottom: 0;
}

.billing-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
}

.billing-section-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.billing-section-sub {
  margin: 0.28rem 0 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.45;
  max-width: 54ch;
  overflow-wrap: anywhere;
}

.billing-section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.billing-attention-filter {
  margin: 0;
}

.billing-attention-filter-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.billing-attention-filter-caption {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
}

.billing-attention-select {
  appearance: none;
  min-width: 9.5rem;
  padding: 0.38rem 2rem 0.38rem 0.7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--billing-tone) 28%, var(--border));
  background:
    linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%) calc(100% - 14px) calc(50% - 2px) / 5px 5px no-repeat,
    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%) calc(100% - 9px) calc(50% - 2px) / 5px 5px no-repeat,
    color-mix(in srgb, var(--billing-tone) 8%, var(--surface, #fff));
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.billing-attention-select:focus {
  outline: 2px solid color-mix(in srgb, var(--billing-tone) 45%, transparent);
  outline-offset: 2px;
}

.billing-count-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--billing-tone) 28%, var(--border));
  background: color-mix(in srgb, var(--billing-tone) 10%, transparent);
  color: var(--billing-tone);
  font-size: 0.75rem;
  font-weight: 750;
  white-space: nowrap;
}

.billing-dash-revenue {
  gap: 1rem;
}

.billing-dash-range-filter {
  --urf-tone: var(--billing-tone);
  min-width: 0;
}

.billing-dash-range-filter .usage-range-filter {
  margin: 0;
}

.billing-revenue-filter {
  display: grid;
  gap: 0.75rem;
  padding: 0.8rem 0.9rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 88%, var(--billing-tone) 12%);
  min-width: 0;
}

.billing-revenue-modes {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.22rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-solid, var(--surface));
  width: fit-content;
  max-width: 100%;
}

.billing-revenue-mode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.42rem 0.85rem;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.billing-revenue-mode input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.billing-revenue-mode.is-active {
  border-color: color-mix(in srgb, var(--billing-tone) 35%, var(--border));
  background: color-mix(in srgb, var(--billing-tone) 14%, var(--surface));
  color: var(--ink);
}

.billing-revenue-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.7rem;
  min-width: 0;
}

.billing-revenue-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.7rem;
  min-width: 0;
  flex: 1 1 auto;
}

.billing-revenue-panel[hidden] {
  display: none !important;
}

.billing-revenue-field {
  display: grid;
  gap: 0.28rem;
  min-width: min(12rem, 100%);
  flex: 1 1 12rem;
}

.billing-revenue-field label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.billing-revenue-field input[type="date"],
.billing-revenue-field input[type="month"],
.billing-revenue-field input[type="number"],
.billing-revenue-field select {
  width: 100%;
  max-width: 100%;
  min-height: 2.4rem;
  padding: 0.42rem 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--input-border, var(--border));
  background: var(--input-bg, var(--surface));
  color: var(--ink);
  font: inherit;
  box-sizing: border-box;
}

.billing-revenue-actions {
  display: flex;
  align-items: end;
  padding-bottom: 0.02rem;
  flex: 0 0 auto;
}

.billing-revenue-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.billing-revenue-card {
  --card-tone: #0e7c86;
  position: relative;
  overflow: hidden;
  padding: 0.95rem 1rem 0.95rem 1.05rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--card-tone) 18%, var(--border));
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--card-tone) 10%, transparent), transparent 58%),
    var(--surface-solid, var(--surface));
  min-width: 0;
}

.billing-revenue-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-tone) 85%, #fff), var(--card-tone));
}

.billing-revenue-card.is-total { --card-tone: #0e7c86; }
.billing-revenue-card.is-pppoe { --card-tone: #0369a1; }
.billing-revenue-card.is-hotspot { --card-tone: #c27803; }

.billing-revenue-meta {
  margin: 0.35rem 0 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.billing-service-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.billing-service-pppoe {
  color: #0369a1;
  background: color-mix(in srgb, #0ea5e9 14%, transparent);
  border-color: color-mix(in srgb, #0ea5e9 35%, var(--border));
}

.billing-service-hotspot {
  color: #b45309;
  background: color-mix(in srgb, #f59e0b 16%, transparent);
  border-color: color-mix(in srgb, #f59e0b 40%, var(--border));
}

.billing-service-static {
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--ink-soft) 8%, transparent);
}

.billing-dash-table-shell {
  margin-top: 0.1rem;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.billing-dash-table {
  width: 100%;
  min-width: 52rem;
  table-layout: fixed;
  border-collapse: collapse;
}

.billing-dash-table th,
.billing-dash-table td {
  vertical-align: middle;
  min-width: 0;
  padding: 0.75rem 0.85rem;
  overflow: hidden;
}

.billing-dash-table thead th {
  white-space: nowrap;
  text-align: left;
}

.billing-dash-table tbody td {
  border-top: 1px solid var(--border);
}

.billing-dash-stack {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.billing-dash-cell-primary {
  display: block;
  min-width: 0;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.billing-dash-cell-secondary {
  display: block;
  min-width: 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.billing-dash-client {
  display: grid;
  gap: 0.12rem;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.billing-dash-client:hover .billing-dash-cell-primary,
.billing-dash-client:hover strong {
  color: var(--sea, #0e7c86);
}

.billing-dash-plan {
  font-weight: 700;
}

.billing-dash-period .billing-dash-cell-primary {
  font-variant-numeric: tabular-nums;
}

.billing-dash-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: center;
  width: 100%;
  max-width: 9.5rem;
}

.billing-dash-progress-track {
  height: 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink-soft) 18%, transparent);
  overflow: hidden;
}

.billing-dash-progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0e7c86, #e8a317);
}

.billing-dash-progress-fill.is-expired {
  background: linear-gradient(90deg, #ef4444, #f59e0b);
}

.billing-dash-progress-label {
  font-size: 0.78rem;
  font-weight: 750;
  color: var(--ink-soft);
  min-width: 2.4rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.billing-dash-badge-due {
  background: color-mix(in srgb, #e8a317 18%, transparent);
  color: #c98512;
}

.billing-dash-col-status,
.billing-dash-col-service,
.billing-dash-col-method,
.billing-dash-col-action {
  white-space: nowrap;
}

.billing-dash-col-amount {
  text-align: right;
  white-space: nowrap;
}

.billing-dash-table thead th:nth-child(4) {
  text-align: inherit;
}

.billing-dash-table-payments thead th:nth-child(4) {
  text-align: right;
}

.billing-dash-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  white-space: nowrap;
}

.billing-dash-ref,
.billing-dash-table .org-code {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 650;
}

.billing-dash-muted {
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Attention table columns */
.billing-dash-table-attention .col-client,
.billing-dash-table-attention th:nth-child(1),
.billing-dash-table-attention td:nth-child(1) {
  width: 22%;
}

.billing-dash-table-attention .col-package,
.billing-dash-table-attention th:nth-child(2),
.billing-dash-table-attention td:nth-child(2) {
  width: 20%;
}

.billing-dash-table-attention .col-period,
.billing-dash-table-attention th:nth-child(3),
.billing-dash-table-attention td:nth-child(3) {
  width: 18%;
}

.billing-dash-table-attention .col-used,
.billing-dash-table-attention th:nth-child(4),
.billing-dash-table-attention td:nth-child(4) {
  width: 16%;
}

.billing-dash-table-attention .col-status,
.billing-dash-table-attention th:nth-child(5),
.billing-dash-table-attention td:nth-child(5) {
  width: 12%;
}

.billing-dash-table-attention .col-action,
.billing-dash-table-attention th:nth-child(6),
.billing-dash-table-attention td:nth-child(6) {
  width: 12%;
}

/* Payments table columns */
.billing-dash-table-payments .col-date,
.billing-dash-table-payments th:nth-child(1),
.billing-dash-table-payments td:nth-child(1) {
  width: 11%;
}

.billing-dash-table-payments .col-customer,
.billing-dash-table-payments th:nth-child(2),
.billing-dash-table-payments td:nth-child(2) {
  width: 18%;
}

.billing-dash-table-payments .col-service,
.billing-dash-table-payments th:nth-child(3),
.billing-dash-table-payments td:nth-child(3) {
  width: 9%;
}

.billing-dash-table-payments .col-amount,
.billing-dash-table-payments th:nth-child(4),
.billing-dash-table-payments td:nth-child(4) {
  width: 10%;
}

.billing-dash-table-payments .col-method,
.billing-dash-table-payments th:nth-child(5),
.billing-dash-table-payments td:nth-child(5) {
  width: 10%;
}

.billing-dash-table-payments .col-phone,
.billing-dash-table-payments th:nth-child(6),
.billing-dash-table-payments td:nth-child(6) {
  width: 12%;
}

.billing-dash-table-payments .col-ref,
.billing-dash-table-payments th:nth-child(7),
.billing-dash-table-payments td:nth-child(7) {
  width: 14%;
}

.billing-dash-table-payments .col-invoice,
.billing-dash-table-payments th:nth-child(8),
.billing-dash-table-payments td:nth-child(8) {
  width: 16%;
}

.billing-dash-account {
  display: block;
  max-width: 100%;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  word-break: break-all;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.35;
}

.billing-dash-cell-secondary.billing-dash-account {
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}

.billing-dash-col-phone .billing-dash-account {
  color: var(--ink);
}

.billing-dash-empty {
  display: grid;
  gap: 0.25rem;
  justify-items: start;
  padding: 1.15rem 1rem;
  border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--border) 90%, var(--billing-tone));
  background: color-mix(in srgb, var(--billing-tone) 5%, transparent);
}

.billing-dash-empty-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink);
}

.billing-dash-empty-copy {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

[data-theme="dark"] .billing-workspace-mark,
[data-theme="dark"] .billing-workspace-kicker {
  color: var(--sea);
}

/* Tablet */
@media (max-width: 1100px) {
  .billing-dash-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .billing-dash-table {
    min-width: 48rem;
  }
}

@media (max-width: 960px) {
  .billing-workspace-head {
    flex-direction: column;
    align-items: stretch;
  }

  .billing-workspace-actions {
    width: 100%;
  }

  .billing-workspace-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .billing-revenue-cards {
    grid-template-columns: 1fr;
  }

  .billing-section-actions {
    width: 100%;
  }

  .billing-section-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .org-table-shell.billing-dash-table-shell {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .billing-dash-table {
    width: 100%;
    min-width: 0 !important;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0 0.75rem;
  }

  .billing-dash-table colgroup {
    display: none;
  }

  .billing-dash-table thead {
    display: none;
  }

  .billing-dash-table tbody {
    display: grid;
    gap: 0.75rem;
  }

  .billing-dash-table tbody tr {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-strong, var(--border));
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface-solid, var(--surface)) 92%, transparent);
    box-shadow: var(--card-shadow, 0 8px 20px rgba(11, 31, 42, 0.04));
  }

  .billing-dash-table tbody tr.is-expired {
    border-left: 3px solid #ef4444;
  }

  .billing-dash-table tbody tr.is-due {
    border-left: 3px solid #e8a317;
  }

  .billing-dash-table tbody tr:hover td {
    background: transparent;
  }

  .billing-dash-table th,
  .billing-dash-table td {
    display: grid;
    grid-template-columns: minmax(5.5rem, 34%) minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0.55rem 0;
    border: 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    overflow: visible;
  }

  .billing-dash-table td:last-child {
    border-bottom: 0;
    padding-top: 0.75rem;
    padding-bottom: 0;
  }

  .billing-dash-table td::before {
    content: attr(data-label);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    align-self: start;
    padding-top: 0.15rem;
  }

  .billing-dash-table td[data-label="Client"],
  .billing-dash-table td[data-label="Customer"] {
    grid-template-columns: 1fr;
    gap: 0.3rem;
    padding-top: 0;
    padding-bottom: 0.7rem;
    margin-bottom: 0.1rem;
  }

  .billing-dash-table td[data-label="Client"]::before,
  .billing-dash-table td[data-label="Customer"]::before,
  .billing-dash-table td[data-label="Action"]::before {
    display: none;
  }

  .billing-dash-table td > * {
    min-width: 0;
    justify-self: end;
    text-align: right;
  }

  .billing-dash-table td[data-label="Client"] > *,
  .billing-dash-table td[data-label="Customer"] > * {
    justify-self: start;
    text-align: left;
  }

  .billing-dash-table td[data-label="Action"] {
    grid-template-columns: 1fr;
  }

  .billing-dash-table td[data-label="Action"] .btn {
    width: 100%;
    justify-content: center;
    justify-self: stretch;
  }

  .billing-dash-cell-primary,
  .billing-dash-cell-secondary,
  .billing-dash-ref,
  .billing-dash-table .org-code {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    overflow-wrap: anywhere;
  }

  .billing-dash-stack,
  .billing-dash-client,
  .billing-dash-progress {
    width: 100%;
    max-width: none;
    justify-items: end;
  }

  .billing-dash-client {
    justify-items: start;
  }

  .billing-dash-col-amount {
    text-align: inherit;
  }

  .billing-dash-table-payments thead th:nth-child(4) {
    text-align: left;
  }
}

/* Phone */
@media (max-width: 720px) {
  .billing-workspace-head,
  .billing-dash-stats,
  .billing-section {
    padding-left: 0.95rem;
    padding-right: 0.95rem;
  }

  .billing-dash-stats {
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
  }

  .billing-dash-stat,
  .billing-revenue-card {
    padding: 0.8rem 0.85rem;
  }

  .billing-revenue-filter {
    padding: 0.7rem 0.75rem;
  }

  .billing-revenue-modes {
    width: 100%;
  }

  .billing-revenue-mode {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 0;
  }

  .billing-revenue-picker {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .billing-revenue-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .billing-revenue-panel[hidden] {
    display: none !important;
  }

  .billing-revenue-field {
    min-width: 0;
    flex: none;
  }

  .billing-revenue-actions {
    width: 100%;
  }

  .billing-revenue-actions .btn {
    width: 100%;
  }

  .billing-dash-empty {
    padding: 1rem 0.85rem;
  }

  #billing-stk-pay-modal .pppoe-panel {
    width: min(100%, 28rem);
    max-height: min(92vh, 40rem);
  }

  #billing-stk-pay-modal .pppoe-foot {
    flex-wrap: wrap;
  }

  #billing-stk-pay-modal .pppoe-foot .btn {
    flex: 1 1 auto;
  }
}

@media (max-width: 480px) {
  .billing-dash-stats {
    grid-template-columns: 1fr;
  }

  .billing-revenue-mode {
    flex: 1 1 100%;
  }

  .billing-dash-stat-value {
    font-size: 1.3rem;
  }

  .billing-dash-stat-money {
    font-size: 1.1rem;
  }
}


/* ?? Packages page ?? */
.packages-page {
  /* layout: see .ops-page shared block */
}

.packages-hero-main {
  display: flex;
  align-items: flex-start;
  gap: 0.95rem;
  min-width: 0;
  flex: 1 1 auto;
}

.packages-hero-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border-radius: 16px;
  color: var(--sea, #0e7c86);
  background: color-mix(in srgb, var(--sea) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sea) 24%, transparent);
}

.packages-hero-copy {
  min-width: 0;
}

.packages-kicker {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sea, #0e7c86);
}

.packages-title {
  margin: 0 0 0.35rem;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.packages-lead {
  margin: 0;
  max-width: 52ch;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}

.packages-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 0 0 auto;
  align-items: flex-start;
}

.packages-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.packages-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.packages-stat {
  --stat-tone: var(--sea, #0e7c86);
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 4.5rem;
  padding: 1rem 1.05rem;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--stat-tone) 18%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--stat-tone) 10%, transparent), transparent 55%),
    color-mix(in srgb, var(--surface) 94%, var(--stat-tone) 6%);
  box-shadow: var(--card-shadow, 0 8px 20px rgba(11, 31, 42, 0.04));
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  animation: clientsRise 0.4s ease both;
  animation-delay: calc(0.04s + (var(--i, 0) * 0.05s));
}

.packages-stat.tone-total { --stat-tone: #0e7c86; }
.packages-stat.tone-pppoe { --stat-tone: #0e7c86; }
.packages-stat.tone-hotspot { --stat-tone: #059669; }
.packages-stat.tone-active { --stat-tone: #059669; }
.packages-stat.tone-good { --stat-tone: #059669; }
.packages-stat.tone-warn { --stat-tone: #c27803; }
.packages-stat.tone-suspended { --stat-tone: #d68910; }
.packages-stat.tone-static { --stat-tone: #c27803; }
.packages-stat.tone-invoice { --stat-tone: #0369a1; }

/* Shared ops workspace pages (shell, hero, stats, panels) */
.ops-page,
.packages-page,
.mikrotik-page,
.mikrotik-transfer.ops-page,
.mikrotik-import.ops-page,
.billing-dash.ops-page,
.clients-dash.ops-page,
.leads-page,
.audits-page,
.referral-page,
.shop-page,
.client-detail-page.ops-page,
.clients-usage-page.ops-page,
.clients-general-usage-page.ops-page,
.clients-attempted-page.ops-page,
.client-usage-analysis-page.ops-page,
.module-page.ops-page,
.team-page.ops-page {
  display: grid;
  gap: 1.1rem;
  width: min(100%, var(--max, 76rem));
  max-width: var(--max, 76rem);
  min-width: 0;
  margin-inline: auto;
  padding-bottom: 1.5rem;
}

.account-page-shell.ops-page,
.access-settings-shell.ops-page {
  width: min(100%, var(--max, 76rem));
  max-width: var(--max, 76rem);
  margin-inline: auto;
}

.clients-usage-workspace.ops-panel,
.leads-board.ops-panel,
.leads-workspace.ops-panel,
.referral-share-card.ops-panel,
.referral-list-card.ops-panel,
.panel.staff-panel.ops-panel {
  border-radius: 18px;
}

.referral-share-card.ops-panel,
.referral-list-card.ops-panel {
  border: 0;
  box-shadow: none;
  animation: none;
}

.packages-stat.is-active-audit,
a.packages-stat.is-active-audit {
  border-color: color-mix(in srgb, var(--stat-tone) 55%, var(--border));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--stat-tone) 16%, transparent);
}

.clients-usage-overview-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.clients-attempted-overview-stats,
.referral-overview-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Attempted connections — Leads-aligned board */
.clients-attempted-page {
  --attempted-accent: #059669;
}

.clients-attempted-board.ops-panel {
  display: grid;
  gap: 0.9rem;
  min-width: 0;
  padding: 1.05rem 1.1rem 1.15rem;
  border-radius: 18px;
  overflow: visible;
  animation: clients-usage-rise 0.38s ease both;
  animation-delay: 0.06s;
}

.clients-attempted-board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.55rem 1rem;
  min-width: 0;
}

.clients-attempted-board-kicker {
  margin: 0 0 0.22rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--attempted-accent) 72%, var(--ink-soft));
}

.clients-attempted-board-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.clients-attempted-board-head p {
  margin: 0.28rem 0 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.45;
  max-width: 40rem;
}

.clients-attempted-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45rem;
  height: 1.45rem;
  margin-left: 0.35rem;
  padding: 0 0.42rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--attempted-accent) 14%, var(--surface));
  color: #047857;
  border: 1px solid color-mix(in srgb, var(--attempted-accent) 22%, var(--border));
  font-size: 0.74rem;
  font-weight: 800;
  vertical-align: middle;
}

[data-theme="dark"] .clients-attempted-count {
  color: #6ee7b7;
}

.clients-attempted-toolbar {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.75rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 88%, transparent);
}

.clients-attempted-seg {
  display: flex;
  gap: 0.35rem;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 0.05rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.clients-attempted-seg-item {
  appearance: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-solid, #fff) 70%, transparent);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.clients-attempted-seg-label {
  line-height: 1.2;
}

.clients-attempted-seg-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 800;
}

.clients-attempted-seg-item.is-active .clients-attempted-seg-count {
  background: color-mix(in srgb, var(--attempted-accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--attempted-accent) 28%, var(--border));
  color: #047857;
}

[data-theme="dark"] .clients-attempted-seg-item.is-active .clients-attempted-seg-count {
  color: #6ee7b7;
}

.clients-attempted-days {
  padding-top: 0.15rem;
  border-top: 1px dashed color-mix(in srgb, var(--border) 85%, transparent);
}

.clients-attempted-tries {
  font-variant-numeric: tabular-nums;
  font-size: 0.98rem;
  letter-spacing: -0.02em;
}

.clients-attempted-page .clients-attempted-table td.is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.clients-attempted-page .clients-attempted-table th.is-num {
  text-align: right;
}

.clients-attempted-seg-item:hover,
.clients-attempted-seg-item:focus-visible {
  border-color: color-mix(in srgb, var(--attempted-accent) 40%, var(--border));
  color: var(--ink);
  outline: none;
}

.clients-attempted-seg-item.is-active {
  border-color: color-mix(in srgb, var(--attempted-accent) 45%, var(--border));
  background: color-mix(in srgb, var(--attempted-accent) 14%, var(--surface));
  color: #047857;
}

[data-theme="dark"] .clients-attempted-seg-item.is-active {
  color: #6ee7b7;
}

.clients-attempted-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  min-width: 0;
}

.clients-attempted-pill {
  --pill-tone: var(--attempted-accent);
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--pill-tone) 28%, var(--border));
  background: color-mix(in srgb, var(--pill-tone) 10%, transparent);
  color: color-mix(in srgb, var(--pill-tone) 78%, var(--ink));
  font-size: 0.74rem;
  font-weight: 750;
  white-space: nowrap;
}

.clients-attempted-pill.tone-warn { --pill-tone: #c27803; }
.clients-attempted-pill.tone-alert { --pill-tone: #dc2626; }

.clients-attempted-table-shell {
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
}

.clients-attempted-page .clients-attempted-table th {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 70%, transparent);
}

.clients-attempted-page .clients-attempted-table tbody td {
  vertical-align: middle;
  padding: 0.78rem 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: transparent;
  transition: background 0.14s ease;
}

.clients-attempted-page .clients-attempted-table tbody tr:last-child td {
  border-bottom: 0;
}

.clients-attempted-page .clients-attempted-table tbody tr:hover td {
  background: color-mix(in srgb, var(--attempted-accent) 6%, transparent);
}

.clients-attempted-when {
  width: 6.75rem;
}

.clients-attempted-when-date {
  display: block;
  font-weight: 750;
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.25;
}

.clients-attempted-when-time {
  display: block;
  margin-top: 0.1rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
}

.clients-attempted-event {
  --evt-tone: #0e7c86;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--evt-tone) 28%, var(--border));
  background: color-mix(in srgb, var(--evt-tone) 12%, transparent);
  color: color-mix(in srgb, var(--evt-tone) 82%, var(--ink));
  font-size: 0.74rem;
  font-weight: 750;
  line-height: 1.25;
  white-space: nowrap;
}

.clients-attempted-event.is-portal_hit,
.clients-attempted-event.is-portal { --evt-tone: #0e7c86; }
.clients-attempted-event.is-payment_started { --evt-tone: #c27803; }
.clients-attempted-event.is-payment_success { --evt-tone: #059669; }
.clients-attempted-event.is-payment_failed,
.clients-attempted-event.is-payment_cancelled,
.clients-attempted-event.is-failed { --evt-tone: #dc2626; }
.clients-attempted-event.is-authorized,
.clients-attempted-event.is-surfing { --evt-tone: #047857; }
.clients-attempted-event.is-paid_not_surfing { --evt-tone: #b45309; }

.clients-attempted-phone,
.clients-attempted-pkg-link {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.clients-attempted-phone:hover,
.clients-attempted-pkg-link:hover {
  color: var(--attempted-accent);
  text-decoration: underline;
}

.clients-attempted-muted {
  color: var(--ink-soft);
  font-weight: 600;
}

.clients-attempted-empty {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 2rem 1.25rem;
  border: 1px dashed color-mix(in srgb, var(--attempted-accent) 28%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--attempted-accent) 4%, transparent);
  text-align: center;
}

.clients-attempted-empty-ico {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.35rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--attempted-accent) 24%, var(--border));
  background: color-mix(in srgb, var(--attempted-accent) 10%, var(--surface));
  color: var(--attempted-accent);
}

.clients-attempted-empty strong {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--ink);
}

.clients-attempted-empty p {
  margin: 0;
  max-width: 28rem;
  color: var(--ink-soft);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .clients-attempted-board.ops-panel {
    padding: 0.9rem 0.85rem 1rem;
  }

  .clients-attempted-when {
    width: auto;
  }
}

.packages-stat-value--sm {
  font-size: clamp(0.95rem, 2.5vw, 1.15rem);
  letter-spacing: 0.04em;
  word-break: break-all;
}

@media (max-width: 900px) {
  .clients-attempted-overview-stats,
  .referral-overview-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.access-settings-hero .packages-hero-actions {
  align-items: center;
}

.shop-hero-aside {
  display: grid;
  gap: 0.15rem;
  justify-items: end;
  text-align: right;
  min-width: 5.5rem;
}

.ops-panel,
.packages-group,
.mikrotik-fleet,
.clients-workspace,
.billing-workspace,
.audits-shell {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--sea, #0e7c86) 18%, var(--border-strong, var(--border)));
  border-radius: 18px;
  background: var(--surface-solid, var(--surface));
  box-shadow: var(--card-shadow, 0 14px 34px color-mix(in srgb, var(--ink) 8%, transparent));
  overflow: hidden;
}

.clients-workspace {
  border-color: color-mix(in srgb, var(--clients-tone, #0e7c86) 18%, var(--border-strong, var(--border)));
}

.billing-workspace {
  border-color: color-mix(in srgb, var(--billing-tone, #0e7c86) 18%, var(--border-strong, var(--border)));
}

.billing-workspace.ops-panel > .billing-section:first-child {
  padding-top: 1rem;
}

.mikrotik-fleet {
  border-color: color-mix(in srgb, var(--mikrotik-tone, #0e7c86) 18%, var(--border-strong, var(--border)));
}

.ops-hero,
.packages-hero,
.mikrotik-hero,
.leads-hero,
.referral-hero,
.audits-hero,
.access-settings-hero,
.shop-hero,
.mk-page-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 1.25rem 1.35rem;
  border-radius: calc(var(--radius, 14px) + 6px);
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--sea, #0e7c86) 18%, transparent), transparent 42%),
    radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, #059669 12%, transparent), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, #fff), var(--surface));
  box-shadow: var(--shadow, 0 10px 28px rgba(0, 0, 0, 0.12));
}

.ops-stats,
.packages-stats,
.mikrotik-stats,
.clients-overview-stats,
.billing-overview-stats {
  display: grid;
  gap: 0.75rem;
}

.ops-stats,
.packages-stats,
.mikrotik-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.clients-overview-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .clients-overview-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.billing-overview-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mikrotik-stat,
.packages-stat {
  --stat-tone: var(--sea, #0e7c86);
}

.mikrotik-hosted-readiness {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 16px;
  border: 1px solid rgba(231, 76, 60, 0.28);
  background: rgba(231, 76, 60, 0.06);
}

.mikrotik-hosted-readiness.is-ready {
  border-color: rgba(46, 204, 113, 0.35);
  background: rgba(46, 204, 113, 0.07);
}

.mikrotik-hosted-readiness-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0;
}

.mikrotik-hosted-readiness-summary {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.mikrotik-hosted-readiness-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
}

.mikrotik-hosted-readiness-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}

.mikrotik-hosted-readiness-state {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  opacity: 0.88;
}

.mikrotik-hosted-readiness-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.mikrotik-hosted-readiness-details {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mikrotik-hosted-readiness-details[hidden] {
  display: none !important;
}

.mikrotik-hosted-readiness-lead {
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
  line-height: 1.45;
  opacity: 0.88;
  max-width: 52ch;
}

.mikrotik-hosted-readiness-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.mikrotik-hosted-readiness-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.12);
}

.mikrotik-hosted-readiness-body strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 750;
}

.mikrotik-hosted-readiness-body span {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.74rem;
  line-height: 1.4;
  opacity: 0.9;
}

.mikrotik-hosted-readiness-foot {
  margin: 0.75rem 0 0;
  font-size: 0.74rem;
  line-height: 1.45;
  opacity: 0.88;
}

.mikrotik-hosted-readiness-foot.is-ok {
  color: rgba(46, 204, 113, 0.95);
}

@media (max-width: 900px) {
  .billing-overview-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .ops-hero,
  .packages-hero,
  .mikrotik-hero,
  .leads-hero,
  .referral-hero,
  .mk-page-hero {
    flex-direction: column;
    padding: 1rem 1.05rem;
  }

  .packages-hero-actions,
  .mikrotik-hero-actions,
  .billing-workspace-actions,
  .clients-workspace-actions,
  .leads-hero-actions,
  .referral-hero-main + .referral-hero-stats {
    width: 100%;
  }

  .ops-stats,
  .packages-stats,
  .mikrotik-stats,
  .clients-overview-stats,
  .billing-overview-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .packages-hero-actions .btn,
  .mikrotik-hero-actions .btn,
  .clients-workspace-actions .btn,
  .billing-workspace-actions .btn {
    flex: 1 1 auto;
    width: 100%;
    justify-content: center;
  }
}

a.packages-stat:hover,
a.packages-stat:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--stat-tone) 45%, var(--border));
  box-shadow: 0 14px 30px color-mix(in srgb, var(--stat-tone) 14%, transparent);
  outline: none;
}

.packages-stat-ico {
  display: grid;
  place-items: center;
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 13px;
  color: var(--stat-tone);
  background: color-mix(in srgb, var(--stat-tone) 16%, transparent);
  flex: 0 0 auto;
}

.packages-stat-text {
  min-width: 0;
  flex: 1 1 auto;
}

.packages-stat-label {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.packages-stat-value {
  margin: 0.2rem 0 0;
  font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.65rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.packages-stat-jump {
  margin-left: auto;
  color: color-mix(in srgb, var(--stat-tone) 70%, transparent);
  font-size: 0.85rem;
  font-weight: 700;
  opacity: 0.7;
}

.packages-jump {
  display: none;
  gap: 0.5rem;
  position: sticky;
  top: 0.65rem;
  z-index: 4;
  padding: 0.35rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-solid, var(--surface)) 88%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px rgba(11, 31, 42, 0.08);
}

.packages-jump-link {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 750;
  color: var(--ink-soft);
  transition: background 0.15s ease, color 0.15s ease;
}

.packages-jump-link.tone-pppoe:hover,
.packages-jump-link.tone-pppoe:focus-visible {
  color: #0e7c86;
  background: color-mix(in srgb, #0e7c86 12%, transparent);
  outline: none;
}

.packages-jump-link.tone-hotspot:hover,
.packages-jump-link.tone-hotspot:focus-visible {
  color: #059669;
  background: color-mix(in srgb, #059669 12%, transparent);
  outline: none;
}

.packages-groups {
  display: grid;
  gap: 1.15rem;
}

.packages-group {
  --group-tone: var(--sea, #0e7c86);
  overflow: hidden;
  scroll-margin-top: 5.5rem;
  border-left: 3px solid color-mix(in srgb, var(--group-tone) 55%, transparent);
}

.packages-group.tone-pppoe { --group-tone: #0e7c86; }
.packages-group.tone-hotspot { --group-tone: #059669; }

.packages-group-head {
  margin-bottom: 1rem;
  padding-bottom: 0.95rem;
  border-bottom: 1px solid var(--border);
}

.packages-group-title-row {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}

.packages-group-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.packages-group-ico {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 12px;
  color: var(--group-tone);
  background: color-mix(in srgb, var(--group-tone) 14%, transparent);
  flex: 0 0 auto;
}

.packages-group-head h2 {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  font-size: 1.08rem;
  line-height: 1.25;
}

.packages-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.55rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--group-tone);
  background: color-mix(in srgb, var(--group-tone) 16%, transparent);
}

.packages-group .panel-sub {
  margin: 0.3rem 0 0;
  max-width: 48ch;
}

.packages-table-shell {
  border-radius: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.packages-table {
  min-width: 0;
  width: 100%;
}

.packages-table th,
.packages-table td {
  padding: 0.85rem 0.85rem;
  font-size: 0.86rem;
  vertical-align: middle;
}

.packages-table thead th {
  white-space: nowrap;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.package-row {
  --row-tone: var(--sea, #0e7c86);
  animation: clientsRise 0.4s ease both;
  animation-delay: calc(0.04s + (min(var(--row-i, 0), 12) * 0.03s));
}

.package-row.tone-pppoe { --row-tone: #0e7c86; }
.package-row.tone-hotspot { --row-tone: #059669; }

.package-row-name {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.package-row-meta {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.package-row-title {
  display: block;
  font-size: 0.94rem;
  font-weight: 750;
  line-height: 1.25;
  word-break: break-word;
}

.package-row-desc {
  display: block;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.35;
}

.package-speed-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--row-tone, var(--sea));
  background: color-mix(in srgb, var(--row-tone, var(--sea)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--row-tone, var(--sea)) 22%, transparent);
  white-space: nowrap;
}

.package-speed-unit {
  margin-left: 0.1rem;
  font-size: 0.68rem;
  font-weight: 750;
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.package-price {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28rem;
  font-size: 0.98rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.package-price-currency {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.package-period {
  color: var(--ink-soft);
  font-weight: 600;
  white-space: nowrap;
}

.package-fup-chip {
  display: inline-block;
  margin-top: 0.2rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: #7a4a12;
  background: rgba(245, 166, 35, 0.16);
  border: 1px solid rgba(245, 166, 35, 0.28);
  white-space: normal;
  max-width: 16rem;
  line-height: 1.25;
}

[data-theme="dark"] .package-fup-chip,
:root:not([data-theme="light"]) .package-fup-chip {
  color: #f6d39a;
  background: rgba(245, 166, 35, 0.14);
  border-color: rgba(245, 166, 35, 0.3);
}

.package-duration-custom {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.package-duration-custom .package-duration-every {
  color: var(--ink-soft);
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
}

.package-duration-custom input.form-control {
  width: 5.5rem;
  min-width: 4.5rem;
  flex: 0 0 auto;
}

.package-duration-custom .package-duration-unit {
  flex: 1 1 8rem;
  min-width: 8rem;
}

.package-cell-stack {
  display: grid;
  gap: 0.35rem;
  justify-items: start;
  align-content: center;
}

.package-cell-stack .package-period {
  font-size: 0.8rem;
  white-space: normal;
}

.package-row-actions {
  white-space: nowrap;
  text-align: right;
}

.package-row-action-group {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
}

.package-row-actions .btn {
  min-width: 4.25rem;
  padding-inline: 0.65rem;
}

.package-offer-link {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.3;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.package-offer-link.is-on {
  color: #1f6f8b;
  background: rgba(56, 163, 196, 0.14);
  border-color: rgba(56, 163, 196, 0.35);
}

.package-offer-link.is-off {
  color: #6b7c93;
  background: rgba(107, 124, 147, 0.1);
  border-color: rgba(107, 124, 147, 0.28);
}

.package-offer-link:hover,
.package-offer-link:focus-visible {
  border-color: rgba(56, 163, 196, 0.55);
  background: rgba(56, 163, 196, 0.2);
  color: #155e75;
  outline: none;
}

[data-theme="dark"] .package-offer-link.is-on,
:root:not([data-theme="light"]) .package-offer-link.is-on {
  color: #8ef5e0;
  background: rgba(46, 230, 199, 0.12);
  border-color: rgba(46, 230, 199, 0.35);
}

[data-theme="dark"] .package-offer-link.is-off,
:root:not([data-theme="light"]) .package-offer-link.is-off {
  color: #9eb0c8;
  background: rgba(158, 176, 200, 0.08);
  border-color: rgba(158, 176, 200, 0.22);
}

[data-theme="dark"] .package-offer-link:hover,
[data-theme="dark"] .package-offer-link:focus-visible,
:root:not([data-theme="light"]) .package-offer-link:hover,
:root:not([data-theme="light"]) .package-offer-link:focus-visible {
  color: #b8fff0;
  background: rgba(46, 230, 199, 0.18);
  border-color: rgba(46, 230, 199, 0.5);
}

.package-offer-box .field-hint {
  margin-top: 0.35rem;
}

/* ?? Package offer modal ?? */
.package-offer-modal {
  place-items: center;
  padding: 1rem;
  z-index: 1300;
}

.package-offer-modal .role-modal-backdrop {
  background: var(--scrim, rgba(8, 16, 22, 0.72));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.package-offer-modal .package-offer-panel {
  width: min(100%, 32rem);
  max-width: calc(100vw - 1.5rem);
  max-height: min(92dvh, 40rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  padding: 0;
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--sea) 24%, var(--border));
  background:
    radial-gradient(ellipse 80% 50% at 100% -10%, rgba(232, 163, 23, 0.12), transparent 55%),
    radial-gradient(ellipse 60% 45% at -5% 0%, rgba(14, 124, 134, 0.18), transparent 52%),
    linear-gradient(185deg, #1a3742 0%, #12252e 45%, #0d171d 100%);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.07);
}

.package-offer-modal .role-modal-kicker {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0.4rem;
  padding: 0.22rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--signal) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--signal) 14%, transparent);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--signal);
}

.package-offer-modal .role-modal-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 3.6vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.package-offer-modal .role-modal-sub {
  color: var(--ink-soft);
}

.package-offer-modal .role-modal-close {
  border-color: var(--border-strong);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink);
}

.package-offer-modal .role-modal-close:hover {
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}

.package-offer-modal .package-offer-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.package-offer-head {
  flex: 0 0 auto;
  align-items: flex-start;
  gap: 0.85rem;
  margin: 0;
  padding: 1.15rem 1.2rem 1rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-solid) 8%, transparent);
}

.package-offer-head-main {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  min-width: 0;
  flex: 1 1 auto;
}

.package-offer-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 14px;
  color: var(--signal);
  background: color-mix(in srgb, var(--signal) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--signal) 28%, transparent);
}

.package-offer-head .role-modal-sub {
  max-width: 34ch;
}

.package-offer-body {
  display: grid;
  gap: 0.95rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 1.15rem 1.2rem 0.35rem;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--sea) 55%, transparent) transparent;
}

.package-offer-target {
  display: grid;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-3, rgba(255, 255, 255, 0.04)) 80%, transparent);
}

.package-offer-target-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.package-offer-target strong {
  font-size: 1rem;
  font-weight: 780;
  letter-spacing: -0.02em;
  word-break: break-word;
}

.package-offer-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 0.95rem 1rem;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--sea, #0e7c86) 22%, var(--border));
  background: color-mix(in srgb, var(--sea, #0e7c86) 8%, transparent);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.package-offer-modal.is-offer-on .package-offer-toggle {
  border-color: color-mix(in srgb, var(--sea, #0e7c86) 45%, var(--border));
  background: color-mix(in srgb, var(--sea, #0e7c86) 14%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sea, #0e7c86) 12%, transparent);
}

.package-offer-toggle-copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.package-offer-toggle-copy strong {
  font-size: 0.95rem;
  font-weight: 760;
  letter-spacing: -0.01em;
}

.package-offer-toggle-copy span {
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.4;
}

.package-offer-switch {
  position: relative;
  flex: 0 0 auto;
  width: 2.85rem;
  height: 1.65rem;
}

.package-offer-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.package-offer-switch-ui {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink-soft) 28%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink-soft) 20%, var(--border));
  transition: background 0.18s ease, border-color 0.18s ease;
}

.package-offer-switch-ui::after {
  content: "";
  position: absolute;
  top: 0.18rem;
  left: 0.18rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  transition: transform 0.18s ease;
}

.package-offer-switch input:checked + .package-offer-switch-ui {
  background: color-mix(in srgb, var(--sea, #0e7c86) 78%, #059669);
  border-color: transparent;
}

.package-offer-switch input:checked + .package-offer-switch-ui::after {
  transform: translateX(1.15rem);
}

.package-offer-switch input:focus-visible + .package-offer-switch-ui {
  outline: 2px solid color-mix(in srgb, var(--sea, #0e7c86) 55%, transparent);
  outline-offset: 2px;
}

.package-offer-config {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-solid, var(--surface)) 88%, transparent);
}

.package-offer-config[hidden] {
  display: none !important;
}

.package-offer-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
}

.package-offer-preview-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.85rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--chip-sea-fg, #0b6670);
  background: var(--chip-sea-bg, rgba(12, 122, 132, 0.14));
  border: 1px solid color-mix(in srgb, var(--sea) 35%, transparent);
}

[data-theme="dark"] .package-offer-preview-badge {
  color: #8ef5e0;
  background: rgba(46, 230, 199, 0.12);
  border-color: rgba(46, 230, 199, 0.35);
}

[data-theme="dark"] .package-offer-target {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(232, 238, 242, 0.12);
}

[data-theme="dark"] .package-offer-config {
  background: rgba(8, 16, 22, 0.35);
  border-color: rgba(232, 238, 242, 0.12);
}

[data-theme="dark"] .package-offer-step {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(232, 238, 242, 0.16);
  color: #eef4f7;
}

[data-theme="dark"] .package-offer-stepper .form-control {
  background: rgba(8, 16, 22, 0.55);
  border-color: rgba(232, 238, 242, 0.16);
  color: #eef4f7;
}

[data-theme="dark"] .package-offer-head,
[data-theme="dark"] .package-offer-actions {
  background: rgba(8, 16, 22, 0.22);
  border-color: rgba(232, 238, 242, 0.1);
}

.package-offer-preview-note {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
}

.package-offer-count-field label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.84rem;
  font-weight: 720;
}

.package-offer-stepper {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) 2.6rem;
  gap: 0.45rem;
  align-items: center;
}

.package-offer-step {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  margin: 0;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--border-strong, var(--border));
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.package-offer-step:hover,
.package-offer-step:focus-visible {
  border-color: color-mix(in srgb, var(--sea, #0e7c86) 45%, var(--border));
  background: color-mix(in srgb, var(--sea, #0e7c86) 12%, transparent);
  color: var(--sea, #0e7c86);
  outline: none;
}

.package-offer-stepper .form-control {
  height: 2.6rem;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  border-color: var(--border-strong, var(--border));
  background: var(--input-bg, var(--surface-solid));
  color: var(--ink);
}

.package-offer-count-field .field-hint {
  margin-top: 0.45rem;
  font-size: 0.8rem;
  line-height: 1.4;
}

.package-offer-actions {
  flex: 0 0 auto;
  margin: 0;
  padding: 1rem 1.2rem 1.15rem;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-solid) 6%, transparent);
}

[data-theme="light"] .package-offer-modal .package-offer-panel {
  border-color: rgba(11, 31, 42, 0.08);
  background:
    radial-gradient(ellipse 70% 45% at 100% 0%, rgba(232, 163, 23, 0.1), transparent 55%),
    radial-gradient(ellipse 55% 40% at 0% 0%, rgba(14, 124, 134, 0.1), transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #f3f7f8 100%);
  color: var(--ink);
  box-shadow:
    0 -18px 48px rgba(11, 31, 42, 0.18),
    0 0 0 1px rgba(11, 31, 42, 0.06);
}

[data-theme="light"] .package-offer-modal .role-modal-kicker {
  border-color: rgba(160, 106, 0, 0.28);
  background: rgba(232, 163, 23, 0.12);
  color: #a06a00;
}

[data-theme="light"] .package-offer-modal .role-modal-close {
  border-color: var(--border-strong);
  background: rgba(11, 31, 42, 0.04);
  color: var(--ink);
}

[data-theme="light"] .package-offer-modal .role-modal-close:hover {
  background: rgba(11, 31, 42, 0.08);
}

[data-theme="light"] .package-offer-head {
  border-bottom-color: rgba(11, 31, 42, 0.08);
  background: rgba(255, 255, 255, 0.72);
}

[data-theme="light"] .package-offer-mark {
  color: #a06a00;
  background: rgba(232, 163, 23, 0.12);
  box-shadow: inset 0 0 0 1px rgba(160, 106, 0, 0.22);
}

[data-theme="light"] .package-offer-target {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(11, 31, 42, 0.08);
}

[data-theme="light"] .package-offer-toggle {
  border-color: rgba(14, 124, 134, 0.22);
  background: rgba(14, 124, 134, 0.06);
}

[data-theme="light"] .package-offer-modal.is-offer-on .package-offer-toggle {
  border-color: rgba(14, 124, 134, 0.38);
  background: rgba(14, 124, 134, 0.1);
  box-shadow: 0 0 0 1px rgba(14, 124, 134, 0.08);
}

[data-theme="light"] .package-offer-config {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(11, 31, 42, 0.08);
}

[data-theme="light"] .package-offer-preview-badge {
  color: var(--chip-sea-fg);
  background: var(--chip-sea-bg);
  border-color: color-mix(in srgb, var(--sea) 28%, transparent);
}

[data-theme="light"] .package-offer-step {
  background: #fff;
  border-color: var(--border-strong);
}

[data-theme="light"] .package-offer-step:hover,
[data-theme="light"] .package-offer-step:focus-visible {
  border-color: rgba(14, 124, 134, 0.4);
  background: rgba(14, 124, 134, 0.08);
  color: #0e7c86;
}

[data-theme="light"] .package-offer-stepper .form-control {
  background: #fff;
  border-color: var(--border-strong);
}

[data-theme="light"] .package-offer-actions {
  border-top-color: rgba(11, 31, 42, 0.08);
  background: rgba(255, 255, 255, 0.72);
}

[data-theme="light"] .package-offer-modal .role-modal-actions .btn-ghost {
  color: var(--ink);
  border-color: var(--border-strong);
  background: transparent;
}

[data-theme="light"] .package-offer-modal .role-modal-actions .btn-ghost:hover {
  background: rgba(11, 31, 42, 0.05);
}

[data-theme="dark"] .package-offer-modal .role-modal-actions .btn-ghost {
  color: #e8f2f4;
  border-color: rgba(255, 255, 255, 0.22);
}

@media (max-width: 520px) {
  .package-offer-modal {
    place-items: end center;
    padding: 0;
  }

  .package-offer-modal .package-offer-panel {
    width: 100%;
    max-width: 100%;
    max-height: 94dvh;
    border-radius: 18px 18px 0 0;
  }

  .package-offer-head-main {
    gap: 0.7rem;
  }

  .package-offer-mark {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 12px;
  }

  .package-offer-toggle {
    align-items: flex-start;
    padding: 0.85rem 0.9rem;
  }

  .package-offer-config {
    padding: 0.9rem;
  }

  .package-offer-actions {
    flex-direction: column-reverse;
  }

  .package-offer-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

.package-row.is-suspended {
  opacity: 0.72;
}

.package-delete-btn {
  color: #ff9b8d;
}

.package-delete-btn:hover {
  color: #ffb4a8;
  border-color: rgba(231, 76, 60, 0.45);
  background: rgba(231, 76, 60, 0.1);
}

[data-theme="light"] .package-delete-btn {
  color: #b03030;
}

[data-theme="light"] .package-delete-btn:hover {
  color: #8a1f1f;
  border-color: rgba(176, 48, 48, 0.35);
  background: rgba(176, 48, 48, 0.08);
}

.package-row-thumb {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--row-tone, var(--sea)) 20%, transparent);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--row-tone, var(--sea)) 10%, transparent);
}

.package-row-thumb-empty {
  display: inline-grid;
  place-items: center;
  background: color-mix(in srgb, var(--row-tone, var(--sea)) 14%, transparent);
  color: var(--row-tone, var(--sea));
  font-size: 0.85rem;
  font-weight: 800;
}

[data-theme="light"] .package-row-thumb {
  border-color: rgba(16, 36, 44, 0.1);
}

.packages-empty {
  display: grid;
  gap: 0.35rem;
  justify-items: start;
  margin-top: 0.15rem;
  padding: 1.4rem 1.2rem;
  border-radius: 16px;
  border: 1px dashed color-mix(in srgb, var(--border) 85%, var(--group-tone, var(--sea)));
  background: color-mix(in srgb, var(--group-tone, var(--sea)) 6%, transparent);
}

.packages-empty-ico {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 0.2rem;
  border-radius: 12px;
  color: var(--group-tone, var(--sea));
  background: color-mix(in srgb, var(--group-tone, var(--sea)) 14%, transparent);
}

.packages-empty-title {
  margin: 0;
  font-weight: 750;
  color: var(--ink);
}

.packages-empty-copy {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  max-width: 36ch;
}

.packages-empty-btn {
  margin-top: 0.55rem;
}

.packages-page .package-router-scope {
  max-width: 11rem;
}

/* Packages table ? cards on smaller screens */
@media (max-width: 960px) {
  .packages-jump {
    display: flex;
  }

  .packages-group {
    scroll-margin-top: 4.25rem;
  }

  .org-table-shell.packages-table-shell {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .packages-table {
    width: 100%;
    min-width: 0 !important;
    border-collapse: separate;
    border-spacing: 0 0.75rem;
  }

  .packages-table thead {
    display: none;
  }

  .packages-table tbody {
    display: grid;
    gap: 0.85rem;
  }

  .packages-table tr.package-row {
    display: grid;
    gap: 0.05rem;
    margin: 0;
    padding: 1rem 1.05rem;
    border: 1px solid var(--border-strong, var(--border));
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface-solid, var(--surface)) 94%, transparent);
    box-shadow: var(--card-shadow, 0 8px 20px rgba(11, 31, 42, 0.04));
    border-left: 3px solid color-mix(in srgb, var(--row-tone) 72%, transparent);
  }

  .packages-table tr.package-row:hover td {
    background: transparent;
  }

  .packages-table th,
  .packages-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    width: 100%;
    min-width: 0 !important;
    padding: 0.5rem 0;
    border: 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
  }

  .packages-table td:last-child {
    border-bottom: 0;
    padding-top: 0.8rem;
    padding-bottom: 0;
  }

  .packages-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 38%;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  .packages-table td[data-label="Package"] {
    display: grid;
    gap: 0.3rem;
    padding-top: 0;
    padding-bottom: 0.75rem;
    margin-bottom: 0.15rem;
    border-bottom: 1px solid color-mix(in srgb, var(--row-tone) 18%, var(--border));
  }

  .packages-table td[data-label="Package"]::before {
    display: none;
  }

  .packages-table td[data-label="Package"] .package-row-name {
    width: 100%;
  }

  .packages-table td[data-label="Actions"]::before {
    display: none;
  }

  .packages-table td[data-label="Actions"] .package-row-action-group {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    justify-content: stretch;
  }

  .packages-table td[data-label="Actions"] .btn {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    justify-content: center;
  }

  .packages-table td > * {
    min-width: 0;
    text-align: right;
  }

  .packages-table td[data-label="Package"] > * {
    text-align: left;
  }

  .packages-table td[data-label="Offer"] .package-offer-link {
    max-width: min(14rem, 62vw);
  }

  .packages-page .package-router-scope {
    max-width: min(14rem, 58vw);
  }
}

@media (max-width: 720px) {
  .packages-hero {
    flex-direction: column;
    align-items: stretch;
    padding: 1.1rem 1.05rem;
  }

  .packages-hero-actions {
    width: 100%;
  }

  .packages-hero-actions .btn {
    flex: 1 1 calc(50% - 0.35rem);
    justify-content: center;
  }

  .packages-stats {
    grid-template-columns: 1fr;
  }

  .packages-stat {
    min-height: 4.1rem;
  }
}

@media (max-width: 560px) {
  .packages-page {
    gap: 0.9rem;
  }

  .packages-hero-main {
    gap: 0.7rem;
  }

  .packages-hero-mark {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 13px;
  }

  .packages-title {
    font-size: 1.2rem;
  }

  .packages-lead {
    font-size: 0.9rem;
  }

  .packages-hero-actions {
    flex-direction: column;
  }

  .packages-hero-actions .btn {
    flex: 1 1 auto;
    width: 100%;
  }

  .packages-table tr.package-row {
    padding: 0.9rem 0.9rem;
    border-radius: 16px;
  }

  .packages-table td[data-label="Actions"] .package-row-action-group {
    grid-template-columns: 1fr;
  }

  .packages-table td[data-label="Actions"] .btn {
    width: 100%;
    min-height: 2.45rem;
  }

  .packages-empty {
    padding: 1.2rem 1rem;
  }
}

@media (min-width: 721px) and (max-width: 960px) {
  .packages-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Service type radios (register + edit package) */
.package-service-type-label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink);
}

.package-service-type-toggle {
  width: 100%;
}

.package-service-type-toggle > div,
.package-service-type-toggle > ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.package-service-type-toggle > div > div,
.package-service-type-toggle > ul > li,
.package-service-type-toggle label {
  margin: 0;
}

.package-service-type-toggle label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  min-height: 2.65rem;
  padding: 0.55rem 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--border-strong, var(--border));
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  font-size: 0.92rem;
  font-weight: 750;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.package-service-type-toggle input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.package-service-type-toggle label:has(input:checked) {
  color: var(--sea, #0e7c86);
  border-color: color-mix(in srgb, var(--sea, #0e7c86) 55%, var(--border));
  background: color-mix(in srgb, var(--sea, #0e7c86) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sea, #0e7c86) 28%, transparent);
}

.package-service-type-toggle label:has(input[value="hotspot"]:checked) {
  color: #059669;
  border-color: color-mix(in srgb, #059669 55%, var(--border));
  background: color-mix(in srgb, #059669 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #059669 28%, transparent);
}

.package-service-type-toggle label:hover {
  border-color: color-mix(in srgb, var(--sea, #0e7c86) 35%, var(--border));
}

.package-service-type-toggle label:has(input:focus-visible) {
  outline: 2px solid color-mix(in srgb, var(--sea, #0e7c86) 55%, transparent);
  outline-offset: 2px;
}

/* Package register/edit wizard (PPPoE vs Hotspot, single vs multi device) */
.package-type-wizard {
  position: relative;
  z-index: 0;
  border: 1px solid color-mix(in srgb, var(--sea, #0e7c86) 18%, var(--border));
  border-radius: 14px;
  padding: 1rem 1.05rem;
  background: color-mix(in srgb, var(--sea, #0e7c86) 5%, var(--surface));
}

.package-type-wizard .package-type-tabs {
  position: relative;
  z-index: 2;
}

.package-wizard-step {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
}

.package-type-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.package-type-tabs-compact {
  margin-bottom: 0.35rem;
}

.package-type-tab {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 3.1rem;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  border: 1.5px solid var(--border-strong, var(--border));
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  cursor: pointer;
  text-align: left;
  pointer-events: auto;
  touch-action: manipulation;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.package-type-tab:hover {
  border-color: color-mix(in srgb, var(--sea, #0e7c86) 35%, var(--border));
}

.package-type-tab.is-active {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sea, #0e7c86) 25%, transparent);
}

.package-type-tab.tone-pppoe.is-active {
  color: #0e7c86;
  border-color: color-mix(in srgb, #0e7c86 55%, var(--border));
  background: color-mix(in srgb, #0e7c86 12%, transparent);
}

.package-type-tab.tone-hotspot.is-active {
  color: #059669;
  border-color: color-mix(in srgb, #059669 55%, var(--border));
  background: color-mix(in srgb, #059669 12%, transparent);
}

.package-type-tabs-compact .package-type-tab.is-active {
  color: #059669;
  border-color: color-mix(in srgb, #059669 50%, var(--border));
  background: color-mix(in srgb, #059669 10%, transparent);
}

.package-type-tab-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.package-type-tab-copy {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.package-type-tab-copy strong {
  font-size: 0.88rem;
  line-height: 1.2;
}

.package-type-tab-copy small {
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--muted, #64748b);
  font-weight: 500;
}

.package-hotspot-device-step {
  position: relative;
  z-index: 2;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
}

.package-wizard-hint {
  margin-top: 0.35rem !important;
}

.package-service-type-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

.package-hotspot-other-panel {
  padding: 0.85rem 0.95rem;
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, #059669 28%, var(--border));
  background: color-mix(in srgb, #059669 6%, var(--surface));
}

.package-subsection-title {
  margin: 0 0 0.35rem;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--ink);
}

/* Clients: roomy column floors */
.org-table-clients th:nth-child(1),
.org-table-clients td:nth-child(1) { min-width: 13.5rem; }
.org-table-clients th:nth-child(2),
.org-table-clients td:nth-child(2) { min-width: 12rem; }
.org-table-clients th:nth-child(3),
.org-table-clients td:nth-child(3) { min-width: 9.5rem; }
.org-table-clients th:nth-child(4),
.org-table-clients td:nth-child(4) { min-width: 7.5rem; }
.org-table-clients th:nth-child(5),
.org-table-clients td:nth-child(5) { min-width: 7.5rem; }
.org-table-clients th:nth-child(6),
.org-table-clients td:nth-child(6),
.org-table-clients th:nth-child(7),
.org-table-clients td:nth-child(7) {
  min-width: 5.5rem;
  text-align: center;
}
.org-table-clients th:nth-child(8),
.org-table-clients td:nth-child(8) { min-width: 7rem; }
.org-table-clients th:nth-child(9),
.org-table-clients td:nth-child(9) { min-width: 9.5rem; }

.org-page-responsive {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.org-page-responsive .org-search-bar,
.org-page-responsive .org-table-shell {
  max-width: 100%;
  min-width: 0;
}

.org-page-responsive .org-table-shell {
  width: fit-content;
}

.org-page-responsive .org-search-input {
  width: 100%;
  max-width: min(28rem, 100%);
}

.org-table.org-table-clients-responsive {
  width: max-content;
  max-width: 100%;
  min-width: 0;
}

.org-table-clients.org-table-clients-responsive th:nth-child(n),
.org-table-clients.org-table-clients-responsive td:nth-child(n) {
  min-width: 0;
}

@media (min-width: 1101px) {
  .org-table-clients.org-table-clients-responsive th,
  .org-table-clients.org-table-clients-responsive td {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }

  .org-table-clients.org-table-clients-responsive th:nth-child(6),
  .org-table-clients.org-table-clients-responsive td:nth-child(6),
  .org-table-clients.org-table-clients-responsive th:nth-child(7),
  .org-table-clients.org-table-clients-responsive td:nth-child(7),
  .org-table-clients.org-table-clients-responsive th:nth-child(9),
  .org-table-clients.org-table-clients-responsive td:nth-child(9) {
    white-space: nowrap;
  }
}

@media (max-width: 1100px) {
  .org-page-responsive .org-search-input {
    max-width: none;
  }

  .org-page-responsive .org-table-shell {
    width: 100%;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .org-table.org-table-clients-responsive {
    width: 100%;
    min-width: 0 !important;
    border-collapse: separate;
    border-spacing: 0 0.75rem;
  }

  .org-table-clients-responsive thead {
    display: none;
  }

  .org-table-clients-responsive tbody {
    display: grid;
    gap: 0.75rem;
  }

  .org-table-clients-responsive tr.org-client-row {
    display: grid;
    gap: 0.1rem;
    margin: 0;
    padding: 0.95rem 1rem;
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface-solid, var(--surface)) 92%, transparent);
    box-shadow: var(--card-shadow, 0 8px 20px rgba(11, 31, 42, 0.04));
  }

  .org-table-clients-responsive tr.org-client-row:hover td {
    background: transparent;
  }

  .org-table-clients-responsive th,
  .org-table-clients-responsive td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    width: 100%;
    min-width: 0 !important;
    padding: 0.45rem 0;
    border: 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    text-align: left;
  }

  .org-table-clients-responsive td:last-child {
    border-bottom: 0;
    padding-top: 0.75rem;
    padding-bottom: 0;
  }

  .org-table-clients-responsive td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 38%;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  .org-table-clients-responsive td > * {
    min-width: 0;
    text-align: right;
  }

  .org-table-clients-responsive td[data-label="Organization"] {
    display: grid;
    gap: 0.3rem;
    padding-top: 0;
    padding-bottom: 0.7rem;
    margin-bottom: 0.15rem;
  }

  .org-table-clients-responsive td[data-label="Organization"]::before {
    display: none;
  }

  .org-table-clients-responsive td[data-label="Organization"] .org-identity,
  .org-table-clients-responsive td[data-label="Organization"] .org-identity strong {
    text-align: left;
  }

  .org-table-clients-responsive td[data-label="Owner"] .org-owner {
    justify-items: end;
    text-align: right;
  }

  .org-table-clients-responsive td[data-label="Actions"]::before {
    display: none;
  }

  .org-table-clients-responsive td[data-label="Actions"] .org-actions-icons {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 520px) {
  .org-page-responsive .org-page-header h2 {
    font-size: 1.08rem;
  }

  .org-table-clients-responsive tr.org-client-row {
    padding: 0.85rem;
  }
}

.org-identity {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.org-identity img,
.org-identity span[aria-hidden="true"] {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  flex: 0 0 auto;
  object-fit: cover;
}

.org-identity span[aria-hidden="true"] {
  display: inline-grid;
  place-items: center;
  background: var(--sea-soft);
  color: var(--sea-deep);
  font-size: 0.8rem;
  font-weight: 800;
}

.org-identity strong {
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.org-owner {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.org-owner strong {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.org-owner small {
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.org-code {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border);
  background: var(--surface-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.org-status {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.org-status-registered {
  background: var(--sea-soft);
  color: var(--sea-deep);
}

.org-status-lead {
  background: var(--sea-soft);
  color: var(--sea-deep);
}

.org-status-queued {
  background: color-mix(in srgb, var(--sea) 16%, transparent);
  color: var(--sea-deep);
}

.org-status-assigned {
  background: color-mix(in srgb, #c9851a 18%, transparent);
  color: #8a5a0a;
}

.org-status-installed {
  background: var(--surface-3);
  color: var(--text-2);
}

.org-status-new {
  background: var(--sea-soft);
  color: var(--sea-deep);
}

.org-status-in_progress {
  background: color-mix(in srgb, #c9851a 18%, transparent);
  color: #8a5a0a;
}

.org-status-allocated {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success);
}

.org-status-allocated_open {
  background: color-mix(in srgb, var(--sea) 16%, transparent);
  color: var(--sea-deep);
}

.org-status-allocated_closed {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success);
}

.org-status-active {
  background: var(--success-soft);
  color: var(--success);
}

.org-status-suspended {
  background: var(--signal-soft);
  color: var(--chip-signal-fg);
}

.org-status-inactive {
  background: var(--surface-3);
  color: var(--ink-soft);
}

.org-status-pending_approval {
  background: var(--surface-3);
  color: var(--ink-soft);
}

.org-status-burned {
  background: var(--danger-soft);
  color: var(--danger);
}

/* HR: roomy column floors */
.org-table-hr th:nth-child(1),
.org-table-hr td:nth-child(1) { min-width: 14rem; }
.org-table-hr th:nth-child(2),
.org-table-hr td:nth-child(2) { min-width: 11rem; }
.org-table-hr th:nth-child(3),
.org-table-hr td:nth-child(3) { min-width: 9.5rem; }
.org-table-hr th:nth-child(4),
.org-table-hr td:nth-child(4) { min-width: 7.5rem; }
.org-table-hr th:nth-child(5),
.org-table-hr td:nth-child(5) { min-width: 9rem; }
.org-table-hr th:nth-child(6),
.org-table-hr td:nth-child(6) { min-width: 8.5rem; }
.org-table-hr th:nth-child(7),
.org-table-hr td:nth-child(7) { min-width: 7rem; }
.org-table-hr th:nth-child(8),
.org-table-hr td:nth-child(8) { min-width: 9.5rem; }

.org-metric {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
}

.org-date {
  color: var(--ink-soft);
  font-weight: 600;
  white-space: nowrap;
}

.org-empty {
  margin: 0;
  padding: 1.25rem 0;
  border-top: 1px solid var(--border);
  color: var(--ink-soft);
  font-weight: 600;
}

.org-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  white-space: nowrap;
}

.org-actions a,
.org-actions button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--sea-deep);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.org-actions a:hover,
.org-actions button:hover {
  color: var(--ink);
}

.org-actions .org-action-danger {
  color: var(--danger, #b42318);
}

.org-actions .org-action-warn {
  color: var(--chip-signal-fg, #b54708);
}

.org-actions .org-action-success {
  color: #15803d;
}

.lead-ticket-actions {
  gap: 0.35rem;
}

.lead-action-muted {
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
}

.org-actions-icons {
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
}

.org-actions-icons form {
  margin: 0;
  display: inline-flex;
}

.org-actions-icons .org-action-icon {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 0.5rem;
  background: var(--surface-2);
  color: var(--ink-soft);
  text-decoration: none;
  line-height: 0;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.org-actions-icons .org-action-icon:hover,
.org-actions-icons .org-action-icon:focus-visible {
  color: var(--ink);
  border-color: var(--ink-soft);
  background: var(--surface);
  outline: none;
}

.org-actions-icons .org-action-warn {
  color: #b45309;
}

.org-actions-icons .org-action-warn:hover,
.org-actions-icons .org-action-warn:focus-visible {
  color: #92400e;
  border-color: rgba(180, 83, 9, 0.45);
  background: rgba(180, 83, 9, 0.08);
}

.org-actions-icons .org-action-success {
  color: #15803d;
}

.org-actions-icons .org-action-success:hover,
.org-actions-icons .org-action-success:focus-visible {
  color: #166534;
  border-color: rgba(21, 128, 61, 0.45);
  background: rgba(21, 128, 61, 0.08);
}

.org-actions-icons .org-action-danger {
  color: var(--danger, #b42318);
}

.org-actions-icons .org-action-danger:hover,
.org-actions-icons .org-action-danger:focus-visible {
  color: #912018;
  border-color: rgba(180, 35, 24, 0.4);
  background: rgba(180, 35, 24, 0.08);
}

.org-delete-box {
  display: grid;
  gap: 1rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--border);
  max-width: 40rem;
}

.org-delete-box p {
  margin: 0;
  color: var(--ink-soft);
  font-weight: 600;
  line-height: 1.5;
}

.org-delete-warn {
  color: var(--danger) !important;
}

.org-delete-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Confirm/delete content inside always-dark role modals */
.role-modal .org-delete-box {
  gap: 0.85rem;
  margin: 0;
  padding: 1rem 1.05rem;
  max-width: none;
  border: 1px solid var(--modal-border, rgba(255, 255, 255, 0.12));
  border-radius: 14px;
  background: var(--modal-surface, rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.role-modal .org-delete-box p {
  color: var(--modal-ink-soft, rgba(238, 246, 248, 0.82));
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.55;
}

.role-modal .org-delete-box strong {
  color: var(--modal-ink, #eef6f8);
  font-weight: 800;
}

.role-modal .org-delete-warn {
  display: block;
  margin: 0;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--modal-danger-border, rgba(255, 154, 143, 0.42));
  border-radius: 12px;
  background: var(--modal-danger-soft, rgba(244, 122, 110, 0.18));
  color: var(--modal-danger-ink, #ffe8e4) !important;
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.45;
}

.role-modal .org-delete-warn strong {
  color: var(--modal-danger, #ff9a8f);
}

.cc-page {
  width: min(100%, 58rem);
  max-width: 58rem;
  min-width: 0;
  margin-inline: auto;
  display: grid;
  gap: 1.15rem;
}

.cc-hero,
.cc-delete-hero,
.cc-card,
.cc-delete-panel,
.cc-delete-banner {
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 18px;
  background: var(--surface-solid, var(--surface));
  box-shadow: var(--card-shadow, 0 10px 24px color-mix(in srgb, var(--ink) 6%, transparent));
}

.cc-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  padding: 1.15rem 1.2rem 1.2rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sea) 10%, transparent), transparent 72%),
    var(--surface-solid, var(--surface));
}

.cc-hero-copy,
.cc-delete-hero .cc-identity > div {
  min-width: 0;
}

.cc-kicker {
  margin: 0 0 0.3rem;
  color: var(--sea-deep, var(--sea));
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cc-hero h2,
.cc-delete-hero h2,
.cc-card h3,
.cc-delete-panel h3 {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: -0.03em;
  color: var(--ink);
}

.cc-hero h2,
.cc-delete-hero h2 {
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.55rem);
}

.cc-hero p,
.cc-delete-hero p,
.cc-delete-panel p,
.cc-card p {
  margin: 0.3rem 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
}

.cc-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.cc-stat {
  min-width: 5.5rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--sea) 18%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--sea) 8%, var(--surface));
}

.cc-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}

.cc-stat span {
  display: block;
  margin-top: 0.28rem;
  color: var(--ink-soft);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cc-toolbar {
  min-width: 0;
  display: flex;
  justify-content: center;
}

.cc-search {
  width: 100%;
  max-width: none;
  padding: 0.78rem 0.95rem;
  border: 1.5px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  outline: none;
}

.cc-search:focus {
  border-color: var(--sea);
  box-shadow: 0 0 0 3px var(--sea-soft);
}

.cc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.cc-card {
  display: grid;
  gap: 0.9rem;
  min-width: 0;
  padding: 1rem 1.05rem 1.05rem;
}

.cc-card-top,
.cc-delete-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.cc-delete-hero {
  padding: 1.15rem 1.2rem;
}

.cc-identity {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  min-width: 0;
}

.cc-identity img,
.cc-identity span[aria-hidden="true"] {
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  flex: 0 0 auto;
  object-fit: cover;
}

.cc-identity span[aria-hidden="true"] {
  display: inline-grid;
  place-items: center;
  background: var(--sea-soft);
  color: var(--sea-deep);
  font-size: 1rem;
  font-weight: 800;
}

.cc-card h3 {
  font-size: 1.05rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.cc-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 0.85rem;
  margin: 0;
}

.cc-meta dt {
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cc-meta dd {
  margin: 0.2rem 0 0;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.cc-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.cc-metrics span {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28rem;
  padding: 0.32rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sea) 10%, var(--surface-2, var(--surface)));
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 700;
}

.cc-metrics strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.92rem;
}

.cc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.cc-actions form {
  margin: 0;
}

.cc-action {
  min-height: 2.15rem;
  padding: 0.4rem 0.75rem;
}

.cc-action-warn {
  color: #b45309;
}

.cc-action-success {
  color: var(--success, #047857);
}

.cc-action-danger {
  color: var(--danger, #b42318);
}

.cc-empty {
  margin: 0;
  padding: 1.1rem 0.2rem;
  color: var(--ink-soft);
  font-weight: 600;
  text-align: center;
}

.cc-delete-banner {
  padding: 0.95rem 1.05rem;
  border-color: color-mix(in srgb, var(--danger, #b42318) 35%, var(--border));
  background: color-mix(in srgb, var(--danger, #b42318) 8%, var(--surface));
}

.cc-delete-banner strong {
  color: var(--danger, #b42318);
  font-size: 0.95rem;
}

.cc-delete-panel {
  padding: 1.05rem 1.1rem 1.15rem;
}

.cc-delete-panel header {
  margin-bottom: 0.85rem;
}

.cc-delete-list,
.cc-keep-list {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cc-delete-item,
.cc-keep-list li {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2, var(--surface));
}

.cc-delete-item.is-empty {
  opacity: 0.72;
}

.cc-delete-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.cc-delete-item-head span {
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 800;
}

.cc-delete-item-head strong {
  color: var(--sea-deep, var(--sea));
  font-family: var(--font-display);
  font-size: 1rem;
}

.cc-delete-item.is-empty .cc-delete-item-head strong {
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 700;
}

.cc-delete-item p,
.cc-keep-list li {
  color: var(--ink-soft);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.45;
}

.cc-delete-samples {
  overflow-wrap: anywhere;
}

.cc-delete-keep .cc-keep-list li {
  background: color-mix(in srgb, var(--success, #047857) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--success, #047857) 18%, var(--border));
}

.cc-delete-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.staff-app .staff-main:has(> .cc-delete-page) {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100dvh - 5.75rem);
  padding-top: 1.15rem;
  padding-bottom: 1.6rem;
}

.cc-delete-page {
  width: min(100%, 46rem);
  margin: 0 auto;
  display: grid;
  gap: 0.85rem;
  justify-items: stretch;
}

.cc-delete-back {
  justify-self: start;
  color: var(--sea-deep, var(--sea));
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}

.cc-delete-back:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.cc-delete-shell {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 22px;
  background: var(--surface-solid, var(--surface));
  box-shadow: var(--card-shadow, 0 16px 40px color-mix(in srgb, var(--ink) 10%, transparent));
}

.cc-delete-page .cc-delete-hero,
.cc-delete-page .cc-delete-banner,
.cc-delete-page .cc-delete-section,
.cc-delete-page .cc-delete-actions {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.cc-delete-page .cc-delete-hero {
  align-items: center;
  padding: 1.15rem 1.2rem 1.05rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--danger, #b42318) 8%, transparent), transparent 78%),
    var(--surface-solid, var(--surface));
}

.cc-delete-page .cc-delete-banner {
  margin: 0 1.15rem;
  border: 1px solid color-mix(in srgb, var(--danger, #b42318) 28%, var(--border));
  border-radius: 14px;
}

.cc-delete-section {
  padding: 1.05rem 1.2rem 0.35rem;
}

.cc-delete-section header {
  margin-bottom: 0.8rem;
}

.cc-delete-section h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.cc-delete-page .cc-delete-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.cc-delete-none {
  margin: 0.85rem 0 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.45;
}

.cc-delete-page .cc-delete-keep {
  padding-top: 0.9rem;
}

.cc-delete-page .cc-keep-list {
  gap: 0.45rem;
}

.cc-delete-page .cc-delete-actions {
  justify-content: flex-end;
  margin: 0.95rem 0 0;
  padding: 0.95rem 1.15rem 1.15rem;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 80%, transparent);
}

@media (min-width: 900px) {
  .cc-card {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.15fr) auto;
    grid-template-areas:
      "top metrics actions"
      "meta metrics actions";
    align-items: center;
    column-gap: 1.1rem;
    row-gap: 0.45rem;
    padding: 0.85rem 1rem;
  }

  .cc-card-top {
    grid-area: top;
    align-items: center;
    margin: 0;
  }

  .cc-meta {
    grid-area: meta;
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    gap: 0.35rem 0.85rem;
  }

  .cc-metrics {
    grid-area: metrics;
    justify-content: flex-end;
  }

  .cc-actions {
    grid-area: actions;
    flex-direction: column;
    align-items: stretch;
    min-width: 7.25rem;
  }

  .cc-action {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 840px) {
  .cc-hero,
  .cc-delete-hero,
  .cc-card-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .cc-search {
    max-width: none;
  }

  .cc-meta {
    grid-template-columns: 1fr;
  }

  .cc-delete-page .cc-delete-list,
  .cc-delete-page .cc-delete-actions {
    grid-template-columns: 1fr;
  }

  .cc-delete-page .cc-delete-actions {
    justify-content: stretch;
  }

  .cc-delete-page .cc-delete-actions .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

.cc-edit-modal {
  z-index: 1250;
}

.cc-edit-modal .role-modal-backdrop {
  background: color-mix(in srgb, #081016 72%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cc-edit-panel.role-modal-panel {
  display: flex;
  flex-direction: column;
  width: min(100%, 34rem);
  max-height: min(94dvh, 44rem);
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--surface-solid, var(--surface));
  box-shadow: 0 -12px 36px color-mix(in srgb, var(--ink) 14%, transparent);
}

.cc-edit-section {
  display: grid;
  gap: 0.75rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}

.cc-edit-section-head {
  display: grid;
  gap: 0.25rem;
}

.cc-edit-section-title {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cc-edit-section-hint {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.45;
}

.cc-edit-body .password-field {
  position: relative;
}

.cc-edit-body .password-field .password-input {
  padding-right: 2.75rem;
}

.cc-edit-body .field-hint {
  margin: 0.35rem 0 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.4;
}

.cc-edit-panel.role-modal-panel::before {
  content: "";
  flex: 0 0 auto;
  width: 2.25rem;
  height: 0.22rem;
  margin: 0.45rem auto 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 14%, transparent);
}

.cc-edit-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.05rem 0.8rem;
  border-bottom: 1px solid var(--border);
}

.cc-edit-head-copy {
  min-width: 0;
}

.cc-edit-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}

.cc-edit-sub {
  margin: 0.2rem 0 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
}

.cc-edit-close {
  color: var(--ink);
  border-color: var(--border-strong, var(--border));
  background: var(--surface-2, var(--surface));
}

.cc-edit-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.cc-edit-body {
  display: grid;
  gap: 0.8rem;
  min-height: 0;
  padding: 0.9rem 1.05rem 0.35rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.cc-edit-photo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cc-edit-photo-preview {
  width: 3.75rem;
  height: 3.75rem;
  flex: 0 0 auto;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-strong, var(--border));
  background: var(--sea-soft);
}

.cc-edit-photo-preview img,
.cc-edit-photo-preview span {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cc-edit-photo-preview span {
  display: grid;
  place-items: center;
  color: var(--sea-deep);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
}

.cc-edit-photo-fields {
  min-width: 0;
}

.cc-edit-file {
  display: grid;
  gap: 0.35rem;
  cursor: pointer;
}

.cc-edit-file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.15rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 10px;
  background: var(--surface-2, var(--surface));
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 700;
}

.cc-edit-file:hover .cc-edit-file-btn {
  border-color: color-mix(in srgb, var(--sea) 40%, var(--border));
}

.cc-edit-file-hint {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
}

.cc-edit-form .account-photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.cc-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}

.cc-edit-body .form-group {
  margin: 0;
}

.cc-edit-body label {
  display: block;
  margin-bottom: 0.28rem;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
}

.cc-edit-body .form-control {
  width: 100%;
  min-height: 2.5rem;
}

.cc-edit-foot {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 1.05rem 0.95rem;
  border-top: 1px solid var(--border);
  background: var(--surface-solid, var(--surface));
}

@media (min-width: 720px) {
  .cc-edit-modal {
    place-items: center;
    padding: 1.25rem;
  }

  .cc-edit-panel.role-modal-panel {
    border-radius: 18px;
    max-height: min(88dvh, 38rem);
  }

  .cc-edit-panel.role-modal-panel::before {
    display: none;
  }
}

@media (max-width: 640px) {
  .cc-edit-grid {
    grid-template-columns: 1fr;
  }

  .cc-edit-foot {
    justify-content: stretch;
  }

  .cc-edit-foot .btn {
    flex: 1 1 calc(50% - 0.3rem);
  }
}

@media (max-width: 960px) {
  .org-page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .org-table th,
  .org-table td {
    padding: 1rem 1.15rem;
  }
}



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

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

@keyframes gridDrift {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 48px 48px, 48px 48px;
  }
}

@media (max-width: 960px) {
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .app-shell:not(.staff-app) {
    grid-template-columns: 1fr;
  }

  .app-shell:not(.staff-app) .sidebar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
  }

  .app-shell:not(.staff-app) .sidebar nav {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }

  .app-shell:not(.staff-app) .sidebar-foot {
    margin-top: 0;
    margin-left: auto;
  }

  .staff-app {
    grid-template-columns: 1fr;
  }

  .staff-nav-toggle {
    display: inline-flex;
    flex-shrink: 0;
  }

  .staff-nav-close {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
  }

  .staff-nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: var(--scrim);
    backdrop-filter: blur(2px);
  }

  .staff-nav-scrim[hidden] {
    display: none !important;
  }

  .staff-app .staff-sidebar,
  .staff-app aside.sidebar.staff-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(300px, 88vw);
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 1.15rem;
    padding: 1.2rem 1.05rem 1.35rem;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-105%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.28s ease, visibility 0.28s ease;
    box-shadow: 18px 0 40px rgba(0, 0, 0, 0.28);
  }

  .staff-app.nav-open .staff-sidebar,
  .staff-app.nav-open aside.sidebar.staff-sidebar {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }

  .staff-app .staff-sidebar nav {
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
  }

  .staff-app .staff-sidebar-meta {
    margin-top: auto;
  }

  .staff-workspace {
    width: 100%;
    min-height: 0;
    height: 100%;
  }

  .staff-topbar {
    padding: 0.75rem 1rem;
  }

  .staff-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.15rem 1.1rem;
  }

  .staff-hero-badges {
    justify-content: flex-start;
  }

  .account-menu-copy {
    display: none;
  }

  .account-menu-trigger {
    padding: 0.3rem;
  }

  .account-menu-caret {
    display: none;
  }
}

@media (max-width: 640px) {
  html {
    font-size: 13px;
  }

  body {
    line-height: 1.45;
  }

  .site-header {
    width: min(100% - 1.25rem, var(--max));
  }

  .hero-inner {
    width: min(100% - 1.25rem, var(--max));
    padding-top: 6.5rem;
    padding-bottom: 3.25rem;
  }

  .btn {
    padding: 0.55rem 0.9rem;
    font-size: 0.82rem;
  }

  .brand {
    font-size: 1rem;
  }

  .staff-topbar-kicker,
  .staff-hero-kicker,
  .staff-nav-label,
  .staff-sidebar-meta-label {
    font-size: 0.58rem;
  }

  .staff-topbar-heading {
    font-size: 0.95rem;
  }

  .staff-hero {
    padding: 0.95rem 0.9rem;
    margin-bottom: 0.95rem;
  }

  .staff-hero-copy h2 {
    font-size: 1.15rem;
  }

  .staff-hero-copy p,
  .page-sub,
  .panel-sub {
    font-size: 0.8rem;
  }

  .staff-pill {
    font-size: 0.62rem;
    padding: 0.25rem 0.5rem;
  }

  .stat {
    padding: 0.85rem 0.9rem;
  }

  .stat .label {
    font-size: 0.64rem;
  }

  .stat .value,
  .role-stat-value {
    font-size: 0.95rem !important;
  }

  .panel {
    padding: 0.95rem;
  }

  .panel h2,
  .profile-section-title {
    font-size: 0.95rem;
  }

  .role-highlight-card {
    padding: 0.8rem 0.85rem;
  }

  .role-highlight-index {
    font-size: 0.62rem;
  }

  .role-highlight-card p {
    font-size: 0.82rem;
  }

  .form-group label {
    font-size: 0.75rem;
  }

  .form-control {
    padding: 0.7rem 0.8rem;
    font-size: 0.85rem;
  }

  .notice {
    font-size: 0.8rem;
    padding: 0.7rem 0.8rem;
  }

  .account-menu-name {
    font-size: 0.74rem;
  }

  .account-menu-meta,
  .account-session-row,
  .role-view-hint {
    font-size: 0.62rem;
  }

  .account-menu-links a,
  .account-menu-link-btn,
  .account-menu-logout button {
    font-size: 0.78rem;
    padding: 0.5rem 0.65rem;
  }

  .role-chip {
    font-size: 0.58rem;
    padding: 0.18rem 0.4rem;
  }

  .staff-sidebar nav a {
    font-size: 0.85rem;
    padding: 0.65rem 0.75rem;
  }

  .staff-sidebar-meta strong {
    font-size: 0.8rem;
  }

  .staff-sidebar-meta span {
    font-size: 0.7rem;
  }

  .stat-grid,
  .role-stat-grid {
    grid-template-columns: 1fr;
    gap: 0.7rem;
    margin-bottom: 1rem;
  }

  .main {
    padding: 0.7rem 0.75rem 1rem;
  }

  .staff-app .staff-main,
  .staff-app .main.staff-main {
    padding: 0.7rem 0.75rem 1rem;
  }

  .profile-photo-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .orbit {
    opacity: 0.45;
    right: -30%;
    top: 0;
  }
}

/* MikroTik list page shell (aligned with packages page) */
.mikrotik-page {
  --mikrotik-tone: #0e7c86;
  /* layout: see .ops-page shared block */
}

.mikrotik-hero-main {
  display: flex;
  align-items: flex-start;
  gap: 0.95rem;
  min-width: 0;
  flex: 1 1 auto;
}

.mikrotik-hero-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border-radius: 16px;
  color: var(--mikrotik-tone);
  background: color-mix(in srgb, var(--mikrotik-tone) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mikrotik-tone) 24%, transparent);
}

.mikrotik-hero-copy {
  min-width: 0;
}

.mikrotik-kicker {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mikrotik-tone);
}

.mikrotik-title {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.mikrotik-lead {
  margin: 0;
  max-width: 48ch;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.5;
}

.mikrotik-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 0 0 auto;
  align-items: flex-start;
}

.mikrotik-stat {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 4.25rem;
  padding: 0.95rem 1.05rem;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--stat-tone, var(--mikrotik-tone)) 18%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--stat-tone, var(--mikrotik-tone)) 10%, transparent), transparent 55%),
    color-mix(in srgb, var(--surface) 94%, var(--stat-tone, var(--mikrotik-tone)) 6%);
  box-shadow: var(--card-shadow, 0 8px 20px rgba(11, 31, 42, 0.04));
  animation: clientsRise 0.4s ease both;
  animation-delay: calc(0.04s + (var(--i, 0) * 0.05s));
}

.mikrotik-stat.tone-total { --stat-tone: #0e7c86; }
.mikrotik-stat.tone-active { --stat-tone: #059669; }
.mikrotik-stat.tone-suspended { --stat-tone: #d68910; }

.mikrotik-stat-ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 13px;
  color: var(--stat-tone);
  background: color-mix(in srgb, var(--stat-tone) 16%, transparent);
}

.mikrotik-stat-text {
  min-width: 0;
  flex: 1 1 auto;
}

.mikrotik-stat-label {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.mikrotik-stat-value {
  margin: 0.2rem 0 0;
  font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.65rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1;
}

.mikrotik-fleet {
  display: grid;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--mikrotik-tone) 18%, var(--border-strong, var(--border)));
  border-radius: 18px;
  background: var(--surface-solid, var(--surface));
  box-shadow: var(--card-shadow, 0 14px 34px color-mix(in srgb, var(--ink) 8%, transparent));
  overflow: hidden;
}

.mikrotik-fleet-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--mikrotik-tone) 3.5%, transparent);
}

.mikrotik-fleet-toolbar .mikrotik-search {
  flex: 1 1 16rem;
  max-width: 22rem;
  min-width: min(100%, 12rem);
}

.mikrotik-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  white-space: nowrap;
  min-height: 2.4rem;
}

.mikrotik-hero-btn .mikrotik-btn-spinner {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 28%, transparent);
  border-top-color: currentColor;
  animation: mk-spin 0.7s linear infinite;
}

.mikrotik-hero-btn.is-busy > svg:not(.mikrotik-btn-spinner) {
  display: none;
}

.mikrotik-router-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.55rem;
  min-width: 0;
}

.mikrotik-router-account-pill {
  display: none;
  font-size: 0.68rem;
  padding: 0.12rem 0.45rem;
}

.mikrotik-router-location {
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mikrotik-search {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.55rem;
  padding: 0.35rem 0.75rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--mikrotik-tone) 20%, var(--border));
  background: var(--surface-solid, var(--surface));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 4%, transparent);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mikrotik-search:focus-within {
  border-color: color-mix(in srgb, var(--mikrotik-tone) 45%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mikrotik-tone) 16%, transparent);
}

.mikrotik-search-icon {
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  flex: 0 0 auto;
}

.mikrotik-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
}

.mikrotik-search-input::placeholder {
  color: color-mix(in srgb, var(--ink-soft) 82%, transparent);
}

.mikrotik-fleet-meta {
  padding: 0 1.15rem;
}

.mikrotik-fleet-meta:not(:has(.mikrotik-search-meta:not([hidden]))) {
  display: none;
}

.mikrotik-search-meta {
  margin: 0.65rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.mikrotik-fleet-body {
  padding: 0.95rem 1.15rem 1.15rem;
  min-width: 0;
}

.mikrotik-fleet-empty-search {
  display: grid;
  gap: 0.3rem;
  justify-items: start;
  margin-top: 0.35rem;
  padding: 1.25rem 1.1rem;
  border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--border) 85%, var(--mikrotik-tone));
  background: color-mix(in srgb, var(--mikrotik-tone) 5%, transparent);
}

.mikrotik-fleet-empty-search[hidden] {
  display: none !important;
}

.mikrotik-router-row.is-search-hidden {
  display: none !important;
}

.mikrotik-empty {
  display: grid;
  gap: 0.4rem;
  justify-items: start;
  margin: 0;
  padding: 1.7rem 1.25rem;
  border-radius: 16px;
  border: 1px dashed color-mix(in srgb, var(--border) 85%, var(--sea));
  background: color-mix(in srgb, var(--sea) 6%, transparent);
}

.mikrotik-empty-ico {
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  margin-bottom: 0.15rem;
  border-radius: 12px;
  color: var(--sea);
  background: color-mix(in srgb, var(--sea) 14%, transparent);
}

.mikrotik-empty-title {
  margin: 0;
  font-weight: 750;
  color: var(--ink);
}

.mikrotik-empty-copy {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  max-width: 40ch;
  line-height: 1.5;
}

.mikrotik-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.55rem;
}

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

.mikrotik-wifi-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--chip-sea-fg);
  background: var(--chip-sea-bg);
  border: 1px solid color-mix(in srgb, var(--sea) 18%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mikrotik-router-identity {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.mikrotik-router-thumb {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 3.1rem;
  height: 2.45rem;
  border-radius: 12px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--sea) 10%, transparent), transparent 70%),
    color-mix(in srgb, var(--surface-2) 88%, var(--sea) 12%);
  border: 1px solid color-mix(in srgb, var(--sea) 16%, var(--border));
  overflow: hidden;
}

.mikrotik-router-thumb img {
  max-width: 84%;
  max-height: 78%;
  object-fit: contain;
}

.mikrotik-meta-sep {
  opacity: 0.45;
}

.mikrotik-router-clients {
  font-variant-numeric: tabular-nums;
  color: inherit;
  text-decoration: none;
}
a.mikrotik-router-clients:hover {
  color: #0e7c86;
  text-decoration: underline;
}

.mikrotik-row-actions {
  flex-wrap: wrap;
  gap: 0.4rem;
}

.mikrotik-cell-text {
  display: inline-block;
  max-width: 14rem;
  overflow-wrap: anywhere;
}

/* MikroTik router list + detail */
.mikrotik-router-name {
  color: inherit;
  font-weight: 750;
  text-decoration: none;
  letter-spacing: -0.015em;
  transition: color 0.15s ease;
}

.mikrotik-router-name:hover {
  color: var(--sea, #0c7a84);
  text-decoration: none;
}

.mikrotik-router-primary {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
}

.mikrotik-router-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.4rem;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1.35;
}

.mikrotik-router-model,
.mikrotik-router-serial {
  min-width: 0;
  word-break: break-word;
}

.mikrotik-router-serial {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.mikrotik-router-connection {
  display: grid;
  gap: 0.28rem;
  justify-items: start;
  align-content: start;
  min-width: 0;
}

.mikrotik-router-host {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

@media (min-width: 1101px) {
  .mikrotik-router-account-pill {
    display: none !important;
  }
}

.mikrotik-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.38rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--sea) 28%, var(--border-strong));
  border-radius: 999px;
  background: color-mix(in srgb, var(--sea) 10%, var(--surface-2));
  color: var(--sea-deep, #07545c);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

[data-theme="dark"] .mikrotik-view-btn {
  color: var(--sea);
}

.mikrotik-view-btn:hover,
.mikrotik-view-btn:focus-visible {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--sea) 45%, var(--border-strong));
  background: color-mix(in srgb, var(--sea) 16%, var(--surface));
  outline: none;
  transform: translateY(-1px);
}

.mikrotik-detail-panel {
  overflow: hidden;
}

.mikrotik-detail-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
  margin-bottom: 1.15rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .mikrotik-detail-toolbar {
  border-bottom-color: rgba(16, 36, 44, 0.1);
}

.mikrotik-detail-toolbar-copy h2 {
  margin: 0;
  font-size: 1.25rem;
}

.mikrotik-router-profile {
  z-index: 40;
}

.mikrotik-router-profile-avatar {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  flex: 0 0 auto;
}

[data-theme="light"] .mikrotik-router-profile-avatar {
  background: rgba(16, 36, 44, 0.05);
  border-color: rgba(16, 36, 44, 0.1);
}

.mikrotik-router-profile-avatar img {
  max-width: 78%;
  max-height: 70%;
  object-fit: contain;
}

.mikrotik-router-profile-avatar-lg {
  width: 2.5rem;
  height: 2.5rem;
}

.mikrotik-router-profile-panel {
  width: min(92vw, 24rem);
  max-height: min(78vh, 36rem);
  overflow: auto;
  padding-bottom: 0.85rem;
}

.mikrotik-router-profile-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  padding: 0 0 0.75rem;
}

.mikrotik-router-profile-facts {
  display: none !important;
}

.mikrotik-router-profile-session {
  padding-top: 0.35rem;
  max-height: min(55vh, 26rem);
  overflow: auto;
}

.mikrotik-router-profile-group {
  margin: 0.85rem 0 0.35rem;
  padding: 0;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}

.mikrotik-router-profile-group:first-child {
  margin-top: 0.35rem;
}

.mikrotik-router-profile .account-session-row strong {
  text-align: right;
  max-width: 14rem;
  overflow-wrap: anywhere;
}

.mikrotik-router-profile .is-warn {
  color: var(--danger);
}

.mikrotik-detail-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .mikrotik-detail-hero {
  border-bottom-color: rgba(16, 36, 44, 0.1);
}

.mikrotik-detail-thumb {
  display: grid;
  place-items: center;
  width: 6.5rem;
  height: 4.75rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

[data-theme="light"] .mikrotik-detail-thumb {
  background: rgba(16, 36, 44, 0.04);
  border-color: rgba(16, 36, 44, 0.1);
}

.mikrotik-detail-thumb img {
  max-width: 88%;
  max-height: 88%;
  object-fit: contain;
}

.mikrotik-detail-hero-copy {
  flex: 1 1 14rem;
  min-width: 0;
}

.mikrotik-detail-kicker {
  margin: 0 0 0.2rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.65;
}

.mikrotik-detail-hero-copy h2 {
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
}

.mikrotik-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  margin: 0;
  font-size: 0.92rem;
  opacity: 0.9;
}

.mikrotik-detail-sep {
  opacity: 0.45;
}

.mikrotik-detail-actions {
  margin-left: auto;
}

/* MikroTik list uses shared org-table / staff-panel patterns */
.org-table-shell.mikrotik-table-shell,
.org-table-shell:has(.org-table-mikrotik) {
  max-width: 100%;
  min-width: 0;
}

.mikrotik-table-shell {
  border-radius: 14px;
  overflow: auto;
}

.mikrotik-fleet-body .mikrotik-table-shell {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 40%, transparent);
}

.mikrotik-router-primary,
.mikrotik-router-connection,
.org-table-mikrotik td:not([data-label="Actions"]) {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.org-table-mikrotik {
  width: 100%;
}

.org-table-mikrotik thead th {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--mikrotik-tone, var(--sea)) 5%, transparent);
}

.org-table-mikrotik tbody tr.mikrotik-router-row {
  animation: clientsRise 0.35s ease both;
  animation-delay: calc(0.05s + (var(--i, 0) * 0.035s));
  transition: background 0.15s ease;
}

.org-table-mikrotik tbody tr.mikrotik-router-row:hover td {
  background: color-mix(in srgb, var(--sea) 5%, transparent);
}

@media (min-width: 1101px) {
  .org-table-mikrotik {
    min-width: 44rem;
  }

  .org-table-mikrotik th:nth-child(1),
  .org-table-mikrotik td:nth-child(1) { min-width: 14rem; }
  .org-table-mikrotik th:nth-child(2),
  .org-table-mikrotik td:nth-child(2) { min-width: 11rem; }
  .org-table-mikrotik th:nth-child(4),
  .org-table-mikrotik td:nth-child(4) { min-width: 13rem; }
}

.mikrotik-router-row.is-suspended {
  background: color-mix(in srgb, var(--signal-soft) 55%, transparent);
}

.mikrotik-reconnect-btn .mikrotik-reconnect-icon {
  display: block;
  flex: 0 0 auto;
}

.mikrotik-reconnect-btn.is-busy .mikrotik-reconnect-icon {
  animation: mikrotik-reconnect-spin 0.9s linear infinite;
}

@keyframes mikrotik-reconnect-spin {
  to { transform: rotate(360deg); }
}

.org-actions-icons .mikrotik-reconnect-btn {
  width: 2.15rem;
  min-width: 2.15rem;
  overflow: hidden;
}

.org-actions-icons .mikrotik-reconnect-btn .mikrotik-reconnect-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.org-actions-icons .mikrotik-reconnect-btn.is-needed:not(.is-compact) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: auto;
  min-width: 0;
  height: 2.15rem;
  padding: 0 0.7rem 0 0.55rem;
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--signal, #e09a12) 45%, var(--border-strong));
  color: #9a6700;
  background: color-mix(in srgb, var(--signal, #e09a12) 14%, var(--surface-solid, #fff));
  overflow: visible;
}

.org-actions-icons .mikrotik-reconnect-btn.is-needed:not(.is-compact) .mikrotik-reconnect-label {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  overflow: visible;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  line-height: 1;
}

.org-actions-icons .mikrotik-reconnect-btn.is-needed {
  border-color: color-mix(in srgb, var(--signal, #e09a12) 45%, var(--border-strong));
  color: #9a6700;
}

.org-actions-icons .mikrotik-reconnect-btn.is-busy,
.org-actions-icons .mikrotik-reconnect-btn:disabled {
  opacity: 0.75;
  pointer-events: none;
}

.mikrotik-reconnect-hint {
  margin: 0.85rem 0 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

.mikrotik-reconnect-hint.is-ok {
  color: #34d399;
}

.mikrotik-reconnect-hint.is-error {
  color: #f87171;
}

.mikrotik-restart-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(245, 158, 11, 0.34);
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(245, 158, 11, 0.08));
  color: #fcd34d;
  font-size: 0.875rem;
  line-height: 1.5;
}

.mikrotik-restart-warning p {
  margin: 0;
}

.mikrotik-restart-warning-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.mikrotik-restart-warning-title {
  margin: 0 0 0.2rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fde68a;
}

.mikrotik-restart-warning-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  margin-top: 0.05rem;
  border-radius: 10px;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.18);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.28);
}

.mikrotik-restart-modal .mikrotik-restart-panel {
  display: flex;
  flex-direction: column;
  width: min(100%, 26.5rem);
  max-width: min(26.5rem, calc(100vw - 1.5rem));
  overflow: hidden;
  padding: 0;
  background:
    radial-gradient(ellipse 70% 50% at 100% 0%, rgba(245, 158, 11, 0.14), transparent 55%),
    radial-gradient(ellipse 55% 40% at 0% 100%, rgba(239, 68, 68, 0.08), transparent 50%),
    linear-gradient(185deg, #1a3742 0%, #12252e 45%, #0d171d 100%);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.07);
}

.mikrotik-restart-head {
  align-items: flex-start;
  gap: 0.85rem;
  margin: 0;
  padding: 1.2rem 1.25rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.mikrotik-restart-head-main {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  flex: 1 1 auto;
}

.mikrotik-restart-head-copy {
  min-width: 0;
}

.mikrotik-restart-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 15px;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.14);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.28);
}

.mikrotik-restart-modal .role-modal-kicker {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0.35rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.12);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #fbbf24;
}

.mikrotik-restart-modal .role-modal-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3.6vw, 1.38rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.mikrotik-restart-desc,
.mikrotik-restart-modal .role-modal-sub {
  max-width: none;
  margin: 0;
  color: rgba(232, 242, 244, 0.74);
  font-size: 0.9rem;
  line-height: 1.5;
}

.mikrotik-restart-emph {
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  color: inherit;
}

.mikrotik-restart-body {
  display: grid;
  gap: 0.95rem;
  padding: 1.1rem 1.25rem 0.45rem;
}

/* Beat .mikrotik-action-modal .mikrotik-action-panel .mikrotik-confirm-check light-text override */
.mikrotik-action-modal .mikrotik-restart-panel .mikrotik-restart-confirm,
.mikrotik-restart-confirm {
  margin: 0;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(232, 242, 244, 0.94);
  font-size: 0.9rem;
  line-height: 1.45;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.mikrotik-restart-confirm:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.07);
}

.mikrotik-restart-confirm:has(input:checked) {
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.1);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.12);
  color: rgba(254, 243, 199, 0.98);
}

.mikrotik-restart-confirm input {
  margin-top: 0.18rem;
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  accent-color: #f59e0b;
  cursor: pointer;
}

.mikrotik-restart-confirm span {
  color: inherit;
}

.mikrotik-restart-error {
  margin: 0;
}

.mikrotik-restart-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
  margin: 0;
  padding: 0.95rem 1.25rem 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.14);
}

.mikrotik-restart-actions .mikrotik-restart-cancel {
  min-width: 5.5rem;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(232, 242, 244, 0.9);
}

.mikrotik-restart-actions .mikrotik-restart-cancel:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
}

.mikrotik-restart-actions .mikrotik-restart-submit {
  min-width: 8.5rem;
  font-weight: 700;
}

.mikrotik-restart-actions .mikrotik-restart-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

[data-theme="light"] .mikrotik-restart-modal .mikrotik-restart-panel {
  --modal-ink: var(--ink);
  --modal-ink-soft: var(--ink-soft);
  background:
    radial-gradient(ellipse 70% 45% at 100% 0%, rgba(245, 158, 11, 0.09), transparent 55%),
    radial-gradient(ellipse 50% 35% at 0% 0%, rgba(14, 124, 134, 0.06), transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #f6f9fa 100%);
  color: var(--ink);
  box-shadow:
    0 22px 56px rgba(11, 31, 42, 0.2),
    0 0 0 1px rgba(11, 31, 42, 0.07);
}

[data-theme="light"] .mikrotik-restart-modal .role-modal-head h2 {
  color: var(--ink);
}

[data-theme="light"] .mikrotik-restart-head {
  border-bottom-color: rgba(11, 31, 42, 0.08);
  background: rgba(255, 255, 255, 0.85);
}

[data-theme="light"] .mikrotik-restart-mark {
  color: #b45309;
  background: rgba(245, 158, 11, 0.12);
  box-shadow: inset 0 0 0 1px rgba(180, 83, 9, 0.2);
}

[data-theme="light"] .mikrotik-restart-modal .role-modal-kicker {
  border-color: rgba(160, 106, 0, 0.26);
  background: rgba(232, 163, 23, 0.12);
  color: #92400e;
}

[data-theme="light"] .mikrotik-restart-desc,
[data-theme="light"] .mikrotik-restart-modal .role-modal-sub {
  color: var(--ink-soft);
}

[data-theme="light"] .mikrotik-restart-emph {
  color: var(--ink);
}

[data-theme="light"] .mikrotik-restart-modal .role-modal-close {
  border-color: var(--border-strong);
  background: rgba(11, 31, 42, 0.04);
  color: var(--ink);
}

[data-theme="light"] .mikrotik-restart-warning {
  border-color: rgba(180, 83, 9, 0.26);
  background:
    linear-gradient(135deg, rgba(251, 191, 36, 0.16), rgba(245, 158, 11, 0.08));
  color: #7c2d12;
}

[data-theme="light"] .mikrotik-restart-warning-title {
  color: #9a3412;
}

[data-theme="light"] .mikrotik-restart-warning-icon {
  color: #b45309;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 1px rgba(180, 83, 9, 0.2);
}

[data-theme="light"] .mikrotik-action-modal .mikrotik-restart-panel .mikrotik-restart-confirm,
[data-theme="light"] .mikrotik-restart-confirm {
  border-color: rgba(11, 31, 42, 0.12);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(11, 31, 42, 0.04);
}

[data-theme="light"] .mikrotik-restart-confirm:hover {
  border-color: rgba(11, 31, 42, 0.18);
  background: #fff;
}

[data-theme="light"] .mikrotik-restart-confirm:has(input:checked) {
  border-color: rgba(180, 83, 9, 0.4);
  background: rgba(255, 251, 235, 0.95);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.12);
  color: var(--ink);
}

[data-theme="light"] .mikrotik-restart-actions {
  border-top-color: rgba(11, 31, 42, 0.08);
  background: rgba(246, 249, 250, 0.95);
}

[data-theme="light"] .mikrotik-restart-actions .mikrotik-restart-cancel {
  border-color: rgba(11, 31, 42, 0.14);
  background: #fff;
  color: var(--ink);
}

[data-theme="light"] .mikrotik-restart-actions .mikrotik-restart-cancel:hover {
  border-color: rgba(11, 31, 42, 0.22);
  background: rgba(11, 31, 42, 0.03);
}

@media (min-width: 40rem) {
  .mikrotik-action-modal.pppoe-modal .mikrotik-restart-panel {
    width: min(100%, 26.5rem);
    max-width: min(26.5rem, calc(100vw - 2.5rem));
    border-radius: 20px;
  }
}

.mikrotik-restart-btn {
  border-color: color-mix(in srgb, #f59e0b 35%, var(--border-strong, rgba(15, 23, 42, 0.12)));
  color: #92400e;
}

.mikrotik-restart-btn:hover:not(:disabled) {
  border-color: color-mix(in srgb, #f59e0b 55%, var(--border-strong, rgba(15, 23, 42, 0.12)));
  background: color-mix(in srgb, #f59e0b 8%, var(--surface-2, #fff));
}

/* MikroTik delete confirmation modal */
.mikrotik-delete-modal .mikrotik-delete-panel {
  display: flex;
  flex-direction: column;
  width: min(100%, 26.5rem);
  max-width: min(26.5rem, calc(100vw - 1.5rem));
  overflow: hidden;
  padding: 0;
  background:
    radial-gradient(ellipse 70% 50% at 100% 0%, rgba(239, 68, 68, 0.16), transparent 55%),
    radial-gradient(ellipse 55% 40% at 0% 100%, rgba(244, 122, 110, 0.08), transparent 50%),
    linear-gradient(185deg, #1a3742 0%, #12252e 45%, #0d171d 100%);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.07);
}

.mikrotik-delete-head {
  align-items: flex-start;
  gap: 0.85rem;
  margin: 0;
  padding: 1.2rem 1.25rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.mikrotik-delete-head-main {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  flex: 1 1 auto;
}

.mikrotik-delete-head-copy {
  min-width: 0;
}

.mikrotik-delete-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 15px;
  color: #fb7185;
  background: rgba(244, 63, 94, 0.14);
  box-shadow: inset 0 0 0 1px rgba(251, 113, 133, 0.3);
}

.mikrotik-delete-modal .role-modal-kicker {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0.35rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid rgba(251, 113, 133, 0.35);
  border-radius: 999px;
  background: rgba(244, 63, 94, 0.12);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #fb7185;
}

.mikrotik-delete-modal .role-modal-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3.6vw, 1.38rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.mikrotik-delete-desc,
.mikrotik-delete-modal .role-modal-sub {
  max-width: none;
  margin: 0;
  color: rgba(232, 242, 244, 0.74);
  font-size: 0.9rem;
  line-height: 1.5;
}

.mikrotik-delete-emph {
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  color: inherit;
}

.mikrotik-delete-body {
  display: grid;
  gap: 0.95rem;
  padding: 1.1rem 1.25rem 0.45rem;
}

.mikrotik-delete-target {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
}

.mikrotik-delete-target-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(232, 242, 244, 0.55);
}

.mikrotik-delete-target strong {
  font-size: 1.02rem;
  font-weight: 800;
  color: rgba(254, 242, 242, 0.98);
  line-height: 1.3;
  word-break: break-word;
}

.mikrotik-delete-host {
  font-size: 0.86rem;
  font-weight: 600;
  color: rgba(232, 242, 244, 0.68);
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

.mikrotik-delete-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(251, 113, 133, 0.34);
  background:
    linear-gradient(135deg, rgba(244, 63, 94, 0.16), rgba(239, 68, 68, 0.08));
  color: #fecdd3;
  font-size: 0.875rem;
  line-height: 1.5;
}

.mikrotik-delete-warning[hidden] {
  display: none !important;
}

.mikrotik-delete-warning p {
  margin: 0;
}

.mikrotik-delete-warning-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.mikrotik-delete-warning-title {
  margin: 0 0 0.2rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fecaca;
}

.mikrotik-delete-warning-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  margin-top: 0.05rem;
  border-radius: 10px;
  color: #fb7185;
  background: rgba(244, 63, 94, 0.18);
  box-shadow: inset 0 0 0 1px rgba(251, 113, 133, 0.28);
}

.mikrotik-action-modal .mikrotik-delete-panel .mikrotik-delete-confirm,
.mikrotik-delete-confirm {
  margin: 0;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(232, 242, 244, 0.94);
  font-size: 0.9rem;
  line-height: 1.45;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.mikrotik-delete-confirm:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.07);
}

.mikrotik-delete-confirm:has(input:checked) {
  border-color: rgba(251, 113, 133, 0.5);
  background: rgba(244, 63, 94, 0.1);
  box-shadow: inset 0 0 0 1px rgba(251, 113, 133, 0.12);
  color: rgba(254, 226, 226, 0.98);
}

.mikrotik-delete-confirm input {
  margin-top: 0.18rem;
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  accent-color: #f43f5e;
  cursor: pointer;
}

.mikrotik-delete-confirm span {
  color: inherit;
}

.mikrotik-delete-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
  margin: 0;
  padding: 0.95rem 1.25rem 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.14);
}

.mikrotik-delete-actions .mikrotik-delete-cancel {
  min-width: 5.5rem;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(232, 242, 244, 0.9);
}

.mikrotik-delete-actions .mikrotik-delete-cancel:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
}

.mikrotik-delete-actions .mikrotik-delete-submit {
  min-width: 8.5rem;
  font-weight: 700;
}

.mikrotik-delete-actions .mikrotik-delete-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Password + suspend list modals (match delete / restart polish) */
.mikrotik-password-head,
.mikrotik-suspend-head {
  align-items: flex-start;
  gap: 0.85rem;
  margin: 0;
  padding: 1.2rem 1.25rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.mikrotik-password-head-main,
.mikrotik-suspend-head-main {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  flex: 1 1 auto;
}

.mikrotik-password-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 15px;
  color: #5eead4;
  background: rgba(14, 124, 134, 0.18);
  box-shadow: inset 0 0 0 1px rgba(45, 212, 191, 0.28);
}

.mikrotik-suspend-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 15px;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.14);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.28);
}

.mikrotik-suspend-mark.is-activate {
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.14);
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.28);
}

.mikrotik-password-modal .role-modal-kicker {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0.35rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid rgba(45, 212, 191, 0.32);
  border-radius: 999px;
  background: rgba(14, 124, 134, 0.14);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #5eead4;
}

.mikrotik-suspend-modal .role-modal-kicker {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0.35rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.12);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #fbbf24;
}

.mikrotik-password-modal .role-modal-head h2,
.mikrotik-suspend-modal .role-modal-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 3.6vw, 1.38rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.mikrotik-password-desc,
.mikrotik-suspend-desc,
.mikrotik-password-modal .role-modal-sub,
.mikrotik-suspend-modal .role-modal-sub {
  max-width: none;
  margin: 0;
  color: rgba(232, 242, 244, 0.74);
  font-size: 0.9rem;
  line-height: 1.5;
}

.mikrotik-password-body,
.mikrotik-suspend-body {
  display: grid;
  gap: 0.95rem;
  padding: 1.1rem 1.25rem 0.45rem;
}

.mikrotik-action-modal .mikrotik-password-panel .mikrotik-suspend-confirm,
.mikrotik-suspend-confirm {
  margin: 0;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(232, 242, 244, 0.94);
  font-size: 0.9rem;
  line-height: 1.45;
}

.mikrotik-suspend-confirm:has(input:checked) {
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.1);
}

.mikrotik-password-actions,
.mikrotik-suspend-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
  margin: 0;
  padding: 0.95rem 1.25rem 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.14);
}

[data-theme="light"] .mikrotik-password-desc,
[data-theme="light"] .mikrotik-suspend-desc {
  color: var(--ink-soft);
}

[data-theme="light"] .mikrotik-password-head,
[data-theme="light"] .mikrotik-suspend-head {
  border-bottom-color: rgba(11, 31, 42, 0.08);
  background: rgba(255, 255, 255, 0.85);
}

[data-theme="light"] .mikrotik-password-mark {
  color: #0f766e;
  background: rgba(14, 124, 134, 0.1);
}

[data-theme="light"] .mikrotik-suspend-mark {
  color: #b45309;
  background: rgba(245, 158, 11, 0.12);
}

[data-theme="light"] .mikrotik-suspend-mark.is-activate {
  color: #047857;
  background: rgba(16, 185, 129, 0.12);
}

[data-theme="light"] .mikrotik-action-modal .mikrotik-password-panel .mikrotik-delete-target,
[data-theme="light"] .mikrotik-action-modal .mikrotik-suspend-panel .mikrotik-delete-target {
  border-color: var(--border);
  background: rgba(11, 31, 42, 0.03);
}

[data-theme="light"] .mikrotik-action-modal .mikrotik-suspend-panel .mikrotik-suspend-confirm {
  border-color: var(--border);
  background: rgba(11, 31, 42, 0.03);
  color: var(--ink);
}

[data-theme="light"] .mikrotik-delete-modal .mikrotik-delete-panel {
  --modal-ink: var(--ink);
  --modal-ink-soft: var(--ink-soft);
  background:
    radial-gradient(ellipse 70% 45% at 100% 0%, rgba(244, 63, 94, 0.08), transparent 55%),
    radial-gradient(ellipse 50% 35% at 0% 0%, rgba(14, 124, 134, 0.05), transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #f8fafb 100%);
  color: var(--ink);
  box-shadow:
    0 22px 56px rgba(11, 31, 42, 0.2),
    0 0 0 1px rgba(11, 31, 42, 0.07);
}

[data-theme="light"] .mikrotik-delete-modal .role-modal-head h2 {
  color: var(--ink);
}

[data-theme="light"] .mikrotik-delete-head {
  border-bottom-color: rgba(11, 31, 42, 0.08);
  background: rgba(255, 255, 255, 0.85);
}

[data-theme="light"] .mikrotik-delete-mark {
  color: #be123c;
  background: rgba(244, 63, 94, 0.1);
  box-shadow: inset 0 0 0 1px rgba(190, 18, 60, 0.2);
}

[data-theme="light"] .mikrotik-delete-modal .role-modal-kicker {
  border-color: rgba(190, 18, 60, 0.22);
  background: rgba(244, 63, 94, 0.08);
  color: #9f1239;
}

[data-theme="light"] .mikrotik-delete-desc,
[data-theme="light"] .mikrotik-delete-modal .role-modal-sub {
  color: var(--ink-soft);
}

[data-theme="light"] .mikrotik-delete-emph {
  color: var(--ink);
}

[data-theme="light"] .mikrotik-delete-modal .role-modal-close {
  border-color: var(--border-strong);
  background: rgba(11, 31, 42, 0.04);
  color: var(--ink);
}

[data-theme="light"] .mikrotik-delete-target {
  border-color: rgba(11, 31, 42, 0.1);
  background: #fff;
  box-shadow: 0 1px 2px rgba(11, 31, 42, 0.04);
}

[data-theme="light"] .mikrotik-delete-target-label {
  color: rgba(11, 31, 42, 0.5);
}

[data-theme="light"] .mikrotik-delete-target strong {
  color: var(--ink);
}

[data-theme="light"] .mikrotik-delete-host {
  color: var(--ink-soft);
}

[data-theme="light"] .mikrotik-delete-warning {
  border-color: rgba(190, 18, 60, 0.22);
  background:
    linear-gradient(135deg, rgba(254, 226, 226, 0.95), rgba(255, 241, 242, 0.9));
  color: #7f1d1d;
}

[data-theme="light"] .mikrotik-delete-warning-title {
  color: #9f1239;
}

[data-theme="light"] .mikrotik-delete-warning-icon {
  color: #be123c;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 1px rgba(190, 18, 60, 0.18);
}

[data-theme="light"] .mikrotik-action-modal .mikrotik-delete-panel .mikrotik-delete-confirm,
[data-theme="light"] .mikrotik-delete-confirm {
  border-color: rgba(11, 31, 42, 0.12);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(11, 31, 42, 0.04);
}

[data-theme="light"] .mikrotik-delete-confirm:hover {
  border-color: rgba(11, 31, 42, 0.18);
  background: #fff;
}

[data-theme="light"] .mikrotik-delete-confirm:has(input:checked) {
  border-color: rgba(190, 18, 60, 0.4);
  background: rgba(255, 241, 242, 0.95);
  box-shadow: inset 0 0 0 1px rgba(244, 63, 94, 0.1);
  color: var(--ink);
}

[data-theme="light"] .mikrotik-delete-actions {
  border-top-color: rgba(11, 31, 42, 0.08);
  background: rgba(246, 249, 250, 0.95);
}

[data-theme="light"] .mikrotik-delete-actions .mikrotik-delete-cancel {
  border-color: rgba(11, 31, 42, 0.14);
  background: #fff;
  color: var(--ink);
}

[data-theme="light"] .mikrotik-delete-actions .mikrotik-delete-cancel:hover {
  border-color: rgba(11, 31, 42, 0.22);
  background: rgba(11, 31, 42, 0.03);
}

@media (min-width: 40rem) {
  .mikrotik-action-modal.pppoe-modal .mikrotik-delete-panel {
    width: min(100%, 26.5rem);
    max-width: min(26.5rem, calc(100vw - 2.5rem));
    border-radius: 20px;
  }
}

.mikrotik-auto-restore-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  border: 1px solid var(--border-strong);
  background: var(--surface-3);
  color: var(--muted);
  max-width: 100%;
}

.mikrotik-auto-restore-badge.is-hidden {
  display: none;
}

.mikrotik-auto-restore-badge.is-ok {
  border-color: color-mix(in srgb, var(--success) 45%, var(--border-strong));
  background: var(--success-soft);
  color: var(--success);
}

.mikrotik-auto-restore-badge.is-fail {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border-strong));
  background: var(--danger-soft);
  color: var(--danger);
}

.mikrotik-auto-restore-icon {
  font-size: 0.8rem;
  line-height: 1;
  opacity: 0.85;
}

.mikrotik-router-profile-status .mikrotik-auto-restore-badge,
.mk-detail-hero-status .mikrotik-auto-restore-badge {
  margin-top: 0;
}

.workspace-auto-restore-note {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
}

.workspace-auto-restore-note.is-ok {
  color: #047857;
}

.workspace-auto-restore-note.is-fail {
  color: #b91c1c;
}

.mikrotik-unlock-box {
  margin: 0.75rem 0 0;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(248, 113, 113, 0.35);
  border-radius: 10px;
  background: rgba(127, 29, 29, 0.18);
}

.mikrotik-unlock-title {
  margin: 0 0 0.45rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fecaca;
}

.mikrotik-unlock-copy {
  margin: 0.55rem 0 0.65rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #fecaca;
  opacity: 0.92;
}

.mikrotik-unlock-commands {
  margin: 0 0 0.65rem;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  color: #fef2f2;
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-x: auto;
}

[data-theme="light"] .mikrotik-unlock-box {
  background: #fff1f2;
  border-color: #fecdd3;
}

[data-theme="light"] .mikrotik-unlock-title,
[data-theme="light"] .mikrotik-unlock-copy {
  color: #9f1239;
}

[data-theme="light"] .mikrotik-unlock-commands {
  background: #fff;
  color: #881337;
  border: 1px solid #fecdd3;
}

[data-theme="dark"] .org-actions-icons .mikrotik-reconnect-btn.is-needed,
[data-theme="dark"] .org-actions-icons .mikrotik-reconnect-btn.is-needed:not(.is-compact) {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(251, 191, 36, 0.12);
}

[data-theme="light"] .org-actions-icons .mikrotik-reconnect-btn.is-needed,
[data-theme="light"] .org-actions-icons .mikrotik-reconnect-btn.is-needed:not(.is-compact) {
  color: #b45309;
  border-color: rgba(180, 83, 9, 0.35);
  background: rgba(224, 154, 18, 0.12);
}

[data-theme="light"] .mikrotik-reconnect-hint.is-ok {
  color: #047857;
}

[data-theme="light"] .mikrotik-reconnect-hint.is-error {
  color: #b91c1c;
}

/* Stack MikroTik routers as cards ? no horizontal scroll on small / mid screens */
@media (max-width: 1100px) {
  .org-table-shell.mikrotik-table-shell,
  .org-table-shell:has(.org-table-mikrotik),
  .mikrotik-fleet-body .mikrotik-table-shell {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .org-table-mikrotik {
    width: 100%;
    min-width: 0 !important;
    border-collapse: separate;
    border-spacing: 0 0.75rem;
  }

  .org-table-mikrotik thead {
    display: none;
  }

  .org-table-mikrotik tbody {
    display: grid;
    gap: 0.85rem;
  }

  .org-table-mikrotik tr.mikrotik-router-row {
    display: grid;
    gap: 0.1rem;
    margin: 0;
    padding: 1rem 1.05rem;
    border: 1px solid var(--border-strong);
    border-radius: 18px;
    background:
      linear-gradient(160deg, color-mix(in srgb, var(--sea) 7%, transparent), transparent 42%),
      color-mix(in srgb, var(--surface-solid, var(--surface)) 94%, transparent);
    box-shadow: var(--card-shadow, 0 8px 20px rgba(11, 31, 42, 0.04));
  }

  .org-table-mikrotik tr.mikrotik-router-row:hover td {
    background: transparent;
  }

  .org-table-mikrotik th,
  .org-table-mikrotik td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    width: 100%;
    min-width: 0 !important;
    padding: 0.48rem 0;
    border: 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
  }

  .org-table-mikrotik td:last-child {
    border-bottom: 0;
    padding-top: 0.8rem;
    padding-bottom: 0;
  }

  .org-table-mikrotik td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 38%;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  .org-table-mikrotik td > * {
    min-width: 0;
    text-align: right;
  }

  .org-table-mikrotik td[data-label="Router"] {
    display: grid;
    gap: 0.3rem;
    padding-top: 0;
    padding-bottom: 0.8rem;
    margin-bottom: 0.15rem;
    border-bottom: 1px solid color-mix(in srgb, var(--sea) 14%, var(--border));
  }

  .org-table-mikrotik td[data-label="Router"]::before {
    display: none;
  }

  .org-table-mikrotik td[data-label="Router"] .mikrotik-router-identity,
  .org-table-mikrotik td[data-label="Router"] .mikrotik-router-primary,
  .org-table-mikrotik td[data-label="Router"] .mikrotik-router-name,
  .org-table-mikrotik td[data-label="Router"] .mikrotik-router-meta,
  .org-table-mikrotik td[data-label="Router"] .lead-location-line {
    text-align: left;
  }

  .org-table-mikrotik td[data-label="Router"] .mikrotik-router-name {
    font-size: 1.08rem;
  }

  .org-table-mikrotik td[data-label="Router"] .mikrotik-router-thumb {
    width: 3.4rem;
    height: 2.65rem;
  }

  .org-table-mikrotik td[data-label="Status"] .mikrotik-router-connection {
    display: grid;
    justify-items: end;
    gap: 0.28rem;
  }

  .org-table-mikrotik td[data-label="Status"] .mikrotik-link-status {
    justify-content: flex-end;
  }

  .org-table-mikrotik td[data-label="Account"],
  .org-table-mikrotik th.mikrotik-col-account {
    display: none !important;
  }

  .mikrotik-router-account-pill {
    display: inline-flex;
  }

  .org-table-mikrotik td[data-label="Actions"]::before {
    display: none;
  }

  .org-table-mikrotik td[data-label="Actions"] .org-actions-icons,
  .org-table-mikrotik td[data-label="Actions"] .mikrotik-row-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .org-table-mikrotik td[data-label="Actions"] .mikrotik-view-btn {
    margin-left: auto;
  }
}

@media (max-width: 720px) {
  .mikrotik-hero {
    flex-direction: column;
    padding: 1rem 1.05rem;
  }

  .mikrotik-hero-actions {
    width: 100%;
  }

  .mikrotik-hero-actions .btn {
    flex: 1 1 calc(50% - 0.3rem);
    justify-content: center;
  }

  .mikrotik-stats {
    grid-template-columns: 1fr;
  }

  .mikrotik-fleet-toolbar {
    padding: 0.8rem 1rem;
  }

  .mikrotik-fleet-toolbar .mikrotik-search {
    max-width: none;
    width: 100%;
  }

  .mikrotik-fleet-body {
    padding: 0.85rem 1rem 1rem;
  }

  .mikrotik-fleet-meta {
    padding: 0 1rem;
  }
}

@media (max-width: 560px) {
  .mikrotik-fleet {
    border-radius: 16px;
  }

  .mikrotik-title {
    font-size: 1.2rem;
  }

  .mikrotik-lead {
    font-size: 0.84rem;
  }

  .mikrotik-hero-actions {
    flex-direction: column;
  }

  .mikrotik-hero-actions .btn {
    flex: 1 1 auto;
    width: 100%;
  }

  .mikrotik-empty {
    padding: 1.25rem 1rem;
  }
}

@media (max-width: 520px) {
  .org-table-mikrotik tr.mikrotik-router-row {
    padding: 0.9rem 0.9rem;
  }

  .org-table-mikrotik td[data-label="Status"] {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
  }

  .org-table-mikrotik td[data-label="Status"]::before {
    max-width: none;
  }

  .org-table-mikrotik td[data-label="Status"] .mikrotik-router-connection {
    justify-items: start;
    text-align: left;
  }

  .org-table-mikrotik td[data-label="Status"] .mikrotik-link-status {
    justify-content: flex-start;
  }

  .org-table-mikrotik td[data-label="Actions"] .org-actions-icons,
  .org-table-mikrotik td[data-label="Actions"] .mikrotik-row-actions {
    width: 100%;
  }

  .org-table-mikrotik td[data-label="Actions"] .org-action-icon {
    flex: 1 1 calc(20% - 0.35rem);
    min-width: 2.4rem;
  }

  .org-table-mikrotik td[data-label="Actions"] .mikrotik-view-btn {
    flex: 1 1 100%;
    justify-content: center;
    margin-left: 0;
    margin-top: 0.15rem;
  }
}

@media (min-width: 721px) and (max-width: 960px) {
  .mikrotik-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.mikrotik-detail-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem 1.5rem;
}

.mikrotik-detail-section h3 {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
}

.mikrotik-detail-map-link {
  color: var(--accent, #2bb0b8);
  text-decoration: none;
}

.mikrotik-detail-map-link:hover {
  text-decoration: underline;
}

.mikrotik-secret {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.mikrotik-secret-mask,
.mikrotik-secret-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
}

.mikrotik-secret-toggle {
  border: 0;
  background: transparent;
  color: var(--accent, #2bb0b8);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.mikrotik-secret-toggle:hover {
  text-decoration: underline;
}

@media (max-width: 800px) {
  .mikrotik-detail-sections {
    grid-template-columns: 1fr;
  }

  .mikrotik-detail-actions {
    margin-left: 0;
    width: 100%;
  }
}

.mikrotik-detail-panel .is-warn {
  color: #ff8a7a;
}

.mikrotik-action-modal .mikrotik-action-panel,
.client-action-modal .mikrotik-action-panel {
  width: min(100%, 30rem);
  max-width: 100%;
  max-height: min(94dvh, 40rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border-radius: 20px 20px 0 0;
}

.mikrotik-action-modal .mikrotik-action-panel .role-modal-head,
.client-action-modal .mikrotik-action-panel .role-modal-head {
  flex: 0 0 auto;
  margin: 0;
  padding: 1.2rem 1.25rem 1rem;
  border-bottom: 1px solid var(--modal-border, rgba(255, 255, 255, 0.1));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
}

.mikrotik-action-modal .mikrotik-action-panel .role-modal-actions,
.client-action-modal .mikrotik-action-panel .role-modal-actions {
  flex: 0 0 auto;
  margin: 0;
  padding: 1rem 1.25rem 1.2rem;
  border-top: 1px solid var(--modal-border, rgba(255, 255, 255, 0.1));
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.22), transparent);
}

@media (min-width: 640px) {
  .mikrotik-action-modal,
  .client-action-modal:not(.pppoe-modal) {
    place-items: center;
    padding: 1.25rem;
  }

  .mikrotik-action-modal .mikrotik-action-panel,
  .client-action-modal .mikrotik-action-panel {
    width: min(100%, 30rem);
    max-width: 30rem;
    border-radius: 20px;
  }
}

@media (max-width: 639px) {
  .mikrotik-action-modal .mikrotik-action-panel,
  .client-action-modal .mikrotik-action-panel {
    width: 100%;
    margin: 0;
  }
}

.mikrotik-action-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.mikrotik-action-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 1.1rem 1.25rem 1.15rem;
  display: grid;
  align-content: start;
  gap: 0.85rem;
}

/* MikroTik action modals ? match Register PPPoE / client popup polish */
.mikrotik-action-modal.pppoe-modal {
  place-items: end center;
  padding: 0;
  align-content: end;
  box-sizing: border-box;
}

.mikrotik-action-modal.pppoe-modal .role-modal-backdrop {
  background: rgba(6, 14, 20, 0.66);
}

.mikrotik-action-modal.pppoe-modal .pppoe-panel {
  width: min(100%, 40rem);
  max-width: 100%;
  max-height: min(94dvh, 100%);
  margin: 0;
}

/* Compact Wi?Fi dialogs ? tighter than the full edit sheet */
#mikrotik-credentials-modal .pppoe-panel,
#mikrotik-wifi-modal .pppoe-panel {
  width: min(100%, 28rem);
  max-height: min(92dvh, 36rem);
}

.mikrotik-action-modal.pppoe-modal .pppoe-head {
  margin-bottom: 0;
}

.mikrotik-action-modal.pppoe-modal .pppoe-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 3.6vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.mikrotik-action-modal.pppoe-modal .pppoe-body.mikrotik-action-scroll {
  padding: 1rem 1.1rem 1.15rem;
  display: grid;
  gap: 1.05rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(14, 124, 134, 0.55) transparent;
}

.mikrotik-action-modal.pppoe-modal .pppoe-body.mikrotik-action-scroll::-webkit-scrollbar {
  width: 8px;
}

.mikrotik-action-modal.pppoe-modal .pppoe-body.mikrotik-action-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(14, 124, 134, 0.45);
}

.mikrotik-action-modal.pppoe-modal .pppoe-foot {
  flex-wrap: wrap;
  gap: 0.65rem;
}

.mikrotik-action-modal.pppoe-modal .pppoe-foot .btn {
  flex: 1 1 auto;
  min-width: min(100%, 8rem);
}

.mikrotik-action-modal .mikrotik-action-panel .mikrotik-confirm-check {
  color: var(--modal-ink-soft, rgba(232, 242, 244, 0.88));
}

.mikrotik-action-modal.pppoe-modal .pppoe-panel .mikrotik-confirm-check {
  color: var(--modal-ink-soft, rgba(232, 242, 244, 0.88));
}

[data-theme="light"] .mikrotik-action-modal.pppoe-modal .pppoe-panel .mikrotik-confirm-check {
  color: var(--ink);
}

@media (min-width: 40rem) {
  /* Higher specificity than base .mikrotik-action-modal.pppoe-modal so
     these sheets center like other role/pppoe modals on tablet+ desktop. */
  .mikrotik-action-modal.pppoe-modal {
    place-items: center;
    align-content: center;
    padding: 1.25rem;
  }

  .mikrotik-action-modal.pppoe-modal .pppoe-panel {
    width: min(100%, 40rem);
    max-width: min(40rem, calc(100vw - 2.5rem));
    max-height: min(88dvh, 46rem);
    border-radius: 22px;
  }

  #mikrotik-credentials-modal .pppoe-panel,
  #mikrotik-wifi-modal .pppoe-panel {
    width: min(100%, 28rem);
    max-width: min(28rem, calc(100vw - 2.5rem));
    max-height: min(88dvh, 36rem);
  }

  .mikrotik-action-modal.pppoe-modal .pppoe-body.mikrotik-action-scroll {
    padding: 1.25rem 1.5rem 1.4rem;
    gap: 1.2rem;
  }

  .mikrotik-action-modal.pppoe-modal .pppoe-foot .btn {
    flex: 0 0 auto;
  }
}

@media (max-width: 39.99rem) {
  .mikrotik-action-modal.pppoe-modal .pppoe-panel,
  #mikrotik-credentials-modal .pppoe-panel,
  #mikrotik-wifi-modal .pppoe-panel {
    width: 100%;
    max-width: 100%;
    border-radius: 22px 22px 0 0;
  }

  .mikrotik-action-modal.pppoe-modal .pppoe-foot {
    justify-content: stretch;
  }

  .mikrotik-action-modal.pppoe-modal .pppoe-foot .btn {
    flex: 1 1 calc(50% - 0.35rem);
  }
}

.mikrotik-confirm-check {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0.35rem 0 0.5rem;
  font-size: 0.92rem;
  line-height: 1.4;
  cursor: pointer;
}

.mikrotik-form-banner {
  margin: 0 0 0.85rem;
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  background: rgba(231, 76, 60, 0.12);
  border: 1px solid rgba(231, 76, 60, 0.28);
  color: #ff8a7a;
  font-size: 0.88rem;
  line-height: 1.4;
}

[data-theme="light"] .mikrotik-form-banner {
  color: #a83226;
  background: rgba(192, 57, 43, 0.08);
}

.mikrotik-wifi-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.mikrotik-wifi-pill.is-on {
  color: var(--success);
  background: var(--success-soft);
  border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
}

.mikrotik-wifi-pill.is-off {
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
}

.mikrotik-wifi-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  cursor: pointer;
  user-select: none;
  margin-top: 0.15rem;
}

.mikrotik-wifi-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.mikrotik-wifi-switch-track {
  position: relative;
  width: 2.55rem;
  height: 1.4rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.45);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.mikrotik-wifi-switch-track::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 2px;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.28);
  transition: transform 0.2s ease;
}

.mikrotik-wifi-switch input:checked + .mikrotik-wifi-switch-track {
  background: rgba(14, 124, 134, 0.85);
  border-color: rgba(14, 124, 134, 0.95);
}

.mikrotik-wifi-switch input:checked + .mikrotik-wifi-switch-track::after {
  transform: translateX(1.05rem);
}

.mikrotik-wifi-switch-text {
  min-width: 1.6rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-soft);
}

/* Access settings (PPPoE / Hotspot) */
.access-settings-shell {
  --access-tone: var(--sea);
  --access-tone-soft: color-mix(in srgb, var(--access-tone) 12%, transparent);
  width: 100%;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.access-settings-shell[data-access-mode="pppoe"] {
  --access-tone: #0e7c86;
}

.access-settings-shell[data-access-mode="hotspot"] {
  --access-tone: #059669;
}

.access-settings-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.95rem 1.15rem;
  flex-wrap: wrap;
  margin-bottom: 0.15rem;
  padding: 1.15rem 1.25rem;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--access-tone) 26%, var(--border));
  background:
    radial-gradient(ellipse 90% 110% at 0% -10%, color-mix(in srgb, var(--access-tone) 22%, transparent), transparent 58%),
    radial-gradient(ellipse 60% 80% at 100% 110%, color-mix(in srgb, var(--signal) 10%, transparent), transparent 52%),
    linear-gradient(165deg, color-mix(in srgb, var(--access-tone) 6%, var(--surface-solid, var(--surface))), var(--surface-solid, var(--surface)));
  box-shadow: var(--card-shadow);
  position: relative;
  overflow: hidden;
}

.access-settings-hero::after {
  content: "";
  position: absolute;
  inset: auto -12% -40% auto;
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--access-tone) 16%, transparent), transparent 70%);
  pointer-events: none;
}

.access-settings-hero-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 14px;
  color: var(--access-tone);
  background: color-mix(in srgb, var(--access-tone) 14%, var(--surface-solid, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--access-tone) 28%, var(--border));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent);
  position: relative;
  z-index: 1;
}

.access-settings-hero-copy {
  min-width: 0;
  flex: 1 1 14rem;
  position: relative;
  z-index: 1;
}

.access-settings-intro {
  margin-bottom: 0.15rem;
}

.access-settings-title {
  margin: 0.15rem 0 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.2rem + 0.75vw, 1.8rem);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.access-settings-hero .client-page-lead {
  margin: 0;
  max-width: 36rem;
}

.access-settings-hero .mikrotik-wifi-pill {
  position: relative;
  z-index: 1;
  align-self: center;
}

.access-settings-tabs {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
  margin: 1rem 0 1.2rem;
  padding: 0.28rem;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--access-tone) 16%, var(--border));
  background: color-mix(in srgb, var(--surface-3) 70%, transparent);
}

.access-settings-tabs .client-type-tab {
  justify-content: center;
  min-height: 2.7rem;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
}

.access-settings-stack {
  display: grid;
  gap: 1rem;
}

.access-settings-banner,
.access-settings-notice {
  margin: 0;
}

.access-control-card,
.access-form-card {
  display: grid;
  gap: 1rem;
}

.access-settings-shell .access-control-card,
.access-settings-shell .access-form-card {
  border-color: color-mix(in srgb, var(--access-tone) 12%, var(--border));
}

.access-settings-shell .settings-policy-panel.is-policy-on {
  border-color: color-mix(in srgb, var(--access-tone) 32%, var(--border));
  box-shadow:
    var(--card-shadow),
    inset 0 0 0 1px color-mix(in srgb, var(--access-tone) 10%, transparent);
}

.access-control-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem 1rem;
  flex-wrap: wrap;
}

.access-control-head-main {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  min-width: 0;
  flex: 1 1 16rem;
}

.access-section-index {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  margin-top: 0.1rem;
  border-radius: 11px;
  background: color-mix(in srgb, var(--access-tone) 14%, transparent);
  color: var(--access-tone);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  line-height: 1;
  border: 1px solid color-mix(in srgb, var(--access-tone) 22%, transparent);
}

.access-section-label {
  margin: 0 0 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--access-tone) 72%, var(--muted));
}

.access-control-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.04rem, 0.98rem + 0.28vw, 1.18rem);
  letter-spacing: var(--tracking-tight);
  line-height: 1.25;
}

.access-control-head p:not(.access-section-label) {
  margin: 0.3rem 0 0;
  max-width: 38rem;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.4;
}

.access-toggle-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1rem;
  padding: 0.95rem 1.05rem;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--access-tone) 18%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--access-tone) 8%, transparent), transparent 55%),
    color-mix(in srgb, var(--surface-solid, var(--surface)) 92%, transparent);
}

.access-toggle-bar--secondary {
  margin-top: 0.75rem;
  align-items: flex-start;
}

.access-toggle-bar--secondary .field-hint {
  flex: 1 1 12rem;
  margin: 0;
  max-width: 36rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.settings-policy-panel.is-policy-on .access-toggle-bar {
  border-color: color-mix(in srgb, var(--access-tone) 36%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--access-tone) 16%, transparent), transparent 60%),
    color-mix(in srgb, var(--access-tone) 8%, var(--surface-solid, var(--surface)));
}

.access-inline-save {
  margin-left: auto;
}

.access-metric-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 0.6rem;
}

.access-metric {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.8rem 0.85rem;
  border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--access-tone) 14%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--access-tone) 7%, transparent), transparent 70%),
    color-mix(in srgb, var(--surface-3) 70%, transparent);
}

.access-metric span {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.access-metric strong {
  font-size: 0.96rem;
  line-height: 1.25;
  color: var(--ink);
  word-break: break-word;
}

.access-metric--wide {
  grid-column: 1 / -1;
}

.access-callout {
  margin: 0;
  padding: 0.8rem 0.95rem;
  border-radius: 12px;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--ink);
}

.access-callout.is-warning {
  border: 1px solid color-mix(in srgb, #c27803 35%, var(--border));
  background: color-mix(in srgb, #c27803 10%, var(--surface-solid, var(--surface)));
  color: color-mix(in srgb, #c27803 55%, var(--ink));
}

.access-callout.is-info {
  border: 1px solid color-mix(in srgb, var(--access-tone) 28%, var(--border));
  background: color-mix(in srgb, var(--access-tone) 8%, var(--surface-solid, var(--surface)));
}

.access-field-group {
  margin-top: 0.15rem;
  padding: 1rem;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--access-tone) 20%, var(--border));
  background: color-mix(in srgb, var(--access-tone) 5%, transparent);
}

.access-field-group-label {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.access-field-group-label span {
  font-weight: 550;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.access-field-group-help {
  margin: 0 0 0.9rem;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.4;
}

.access-advert-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.access-advert-slot {
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--access-tone) 16%, var(--border));
  background: var(--surface-solid, var(--surface));
}

.access-advert-slot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.access-advert-slot-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0.15rem 0.55rem;
  border-radius: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--access-tone);
  background: color-mix(in srgb, var(--access-tone) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--access-tone) 22%, transparent);
}

.access-advert-slot-fields {
  display: grid;
  gap: 0.7rem;
}

.access-ad-preview {
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0.8rem;
  border: 1px solid color-mix(in srgb, var(--access-tone) 18%, var(--border));
  background: color-mix(in srgb, var(--access-tone) 8%, transparent);
}

.access-ad-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.access-ad-preview--empty {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--access-tone) 6%, transparent), transparent 55%),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 6px,
      color-mix(in srgb, var(--access-tone) 5%, transparent) 6px,
      color-mix(in srgb, var(--access-tone) 5%, transparent) 7px
    );
}

.access-action-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.15rem;
}

.access-action-copy {
  min-width: 0;
  flex: 1 1 14rem;
}

.access-action-copy h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: var(--tracking-tight);
}

.access-action-copy p {
  margin: 0.28rem 0 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.4;
}

.access-settings-stats {
  margin-top: 0.15rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.access-settings-stats .account-summary-item strong {
  font-size: 0.98rem;
  line-height: 1.3;
  word-break: break-word;
}

.access-toggle-row {
  margin-bottom: 0;
}

.access-toggle-row--choice {
  margin-top: 0.15rem;
}

.access-push-card .account-card-head {
  margin-bottom: 0.95rem;
}

.access-push-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.85rem;
}

.access-push-form .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.access-push-form .settings-policy-hint {
  flex: 1 1 14rem;
  margin: 0;
}

.access-settings-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1rem;
}

.access-settings-shell .account-page-actions--sticky.access-settings-actions {
  position: sticky;
  bottom: 0.75rem;
  z-index: 20;
  margin-top: 0.35rem;
  padding: 0.95rem 1.05rem;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--access-tone) 26%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--access-tone) 12%, transparent), transparent 55%),
    color-mix(in srgb, var(--surface-solid, var(--surface)) 90%, transparent);
  box-shadow:
    var(--card-shadow),
    0 12px 36px color-mix(in srgb, var(--ink) 12%, transparent);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}

.access-settings-actions-copy {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 12rem;
}

.access-settings-actions-copy strong {
  font-size: 0.95rem;
  color: var(--ink);
}

.access-settings-actions-copy span {
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.35;
}

.access-preview-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.access-preview-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex-shrink: 0;
}

.access-settings-shell .mikrotik-wifi-switch-track {
  width: 3.1rem;
  height: 1.7rem;
}

.access-settings-shell .mikrotik-wifi-switch-track::after {
  width: 1.3rem;
  height: 1.3rem;
}

.access-settings-shell .mikrotik-wifi-switch input:checked + .mikrotik-wifi-switch-track::after {
  transform: translateX(1.25rem);
}

.access-settings-shell .mikrotik-wifi-switch-text {
  min-width: 2.5rem;
  font-size: 0.9rem;
  font-weight: 650;
}

.access-settings-shell .settings-policy-switch {
  gap: 0.75rem;
}

.settings-policy-panel {
  display: grid;
  gap: 0.95rem;
}

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

.settings-policy-head h2 {
  margin: 0.15rem 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}

.settings-policy-copy {
  margin: 0;
  max-width: 42rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.45;
}

.settings-policy-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.15rem;
  padding: 0.95rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(14, 124, 134, 0.04);
}

.settings-policy-panel.is-policy-on .settings-policy-form {
  border-color: rgba(14, 124, 134, 0.28);
  background: rgba(14, 124, 134, 0.08);
}

.settings-policy-hint {
  margin: 0;
  flex: 1 1 14rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.4;
}

.settings-policy-banner {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(14, 124, 134, 0.28);
  background: rgba(14, 124, 134, 0.08);
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.4;
}

.access-settings-shell .settings-policy-banner {
  margin-bottom: 0;
}

.access-apply-all {
  display: grid;
  gap: 0.55rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--access-tone) 24%, var(--border));
  background: color-mix(in srgb, var(--access-tone) 6%, var(--surface-solid, var(--surface)));
}

.access-apply-all-label {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  cursor: pointer;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.35;
}

.access-apply-all-label input {
  margin-top: 0.2rem;
  flex: 0 0 auto;
}

.access-apply-all-label span {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.access-apply-all-label small {
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.4;
}

.stk-live-panel {
  margin: 0 0 1rem;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel, rgba(255, 255, 255, 0.03));
}

.stk-live-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.stk-live-panel-head h3 {
  margin: 0.15rem 0 0;
  font-size: 1.05rem;
  line-height: 1.35;
}

.stk-live-meta {
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.stk-live-checks {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.stk-live-checks li {
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  font-size: 0.9rem;
  line-height: 1.35;
}

.stk-live-checks li strong {
  display: inline-block;
  min-width: 8.5rem;
  margin-right: 0.35rem;
}

.stk-live-checks li.is-ok {
  border-color: rgba(46, 204, 113, 0.28);
  background: rgba(46, 204, 113, 0.08);
}

.stk-live-checks li.is-bad {
  border-color: var(--notice-error-border);
  background: var(--notice-error-bg);
  color: var(--notice-error-fg);
}

.stk-live-panel[data-status="ok"] {
  border-color: rgba(46, 204, 113, 0.35);
}

.stk-live-panel[data-status="incomplete"],
.stk-live-panel[data-status="inactive"],
.stk-live-panel[data-status="checking"] {
  border-color: rgba(210, 160, 40, 0.35);
}

.stk-live-panel[data-status="invalid"],
.stk-live-panel[data-status="unreachable"],
.stk-live-panel[data-status="error"] {
  border-color: var(--notice-error-border);
}

.settings-policy-stats {
  margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hotspot-settings-form {
  display: grid;
  gap: 1rem;
}

.hotspot-settings-form .account-card-span {
  grid-column: 1 / -1;
}

.hotspot-settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.15rem 0 0.35rem;
}

.hotspot-push-form {
  margin-top: 0.25rem;
}

.access-settings-shell .hotspot-settings-form > .account-card,
.access-settings-shell .access-settings-stack > .account-card,
.access-settings-shell .access-settings-hero,
.access-settings-shell .access-settings-tabs {
  animation: uiRise 0.45s var(--ease-out) both;
}

.access-settings-shell .access-settings-hero { animation-delay: 0.02s; }
.access-settings-shell .access-settings-tabs { animation-delay: 0.05s; }
.access-settings-shell .hotspot-settings-form > .account-card:nth-child(1),
.access-settings-shell .access-settings-stack > .account-card:nth-child(1) { animation-delay: 0.08s; }
.access-settings-shell .hotspot-settings-form > .account-card:nth-child(2),
.access-settings-shell .access-settings-stack > .account-card:nth-child(2) { animation-delay: 0.11s; }
.access-settings-shell .hotspot-settings-form > .account-card:nth-child(3),
.access-settings-shell .access-settings-stack > .account-card:nth-child(3) { animation-delay: 0.14s; }
.access-settings-shell .hotspot-settings-form > .account-card:nth-child(4),
.access-settings-shell .access-settings-stack > .account-card:nth-child(4) { animation-delay: 0.17s; }
.access-settings-shell .hotspot-settings-form > .account-card:nth-child(5),
.access-settings-shell .access-settings-stack > .account-card:nth-child(5) { animation-delay: 0.2s; }
.access-settings-shell .hotspot-settings-form > .account-card:nth-child(6),
.access-settings-shell .access-settings-stack > .account-card:nth-child(6) { animation-delay: 0.23s; }

@media (max-width: 720px) {
  .settings-policy-stats,
  .hotspot-settings-form .settings-policy-stats,
  .access-settings-stats {
    grid-template-columns: 1fr;
  }

  .access-settings-shell {
    max-width: 100%;
  }

  .access-settings-hero {
    padding: 1rem;
  }

  .access-settings-hero-mark {
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 12px;
  }

  .access-settings-hero .mikrotik-wifi-pill {
    width: 100%;
    justify-content: center;
  }

  .access-settings-tabs {
    margin: 0.75rem 0 1rem;
  }

  .access-settings-tabs .client-type-tab {
    flex: 1 1 0;
    min-width: 0;
  }

  .access-toggle-bar,
  .access-toggle-row,
  .settings-policy-form {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }

  .access-inline-save {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }

  .access-toggle-bar .mikrotik-wifi-switch,
  .access-toggle-row .mikrotik-wifi-switch,
  .settings-policy-form .mikrotik-wifi-switch {
    min-height: 2.85rem;
    padding: 0.35rem 0;
  }

  .access-toggle-row .settings-policy-hint,
  .settings-policy-form .settings-policy-hint {
    flex-basis: auto;
  }

  .access-action-card {
    flex-direction: column;
    align-items: stretch;
  }

  .access-push-form {
    flex-direction: column;
    align-items: stretch;
  }

  .access-push-form .btn {
    width: 100%;
    justify-content: center;
  }

  .access-settings-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .access-settings-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .access-settings-shell .account-page-actions--sticky.access-settings-actions {
    bottom: 0.5rem;
  }

  .access-preview-btn,
  .access-preview-actions {
    width: 100%;
  }

  .access-preview-actions {
    justify-content: stretch;
  }

  .access-preview-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .access-voucher-grid,
  .access-link-grid,
  .access-advert-slots {
    grid-template-columns: 1fr;
  }

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

  .access-metric--wide {
    grid-column: 1 / -1;
  }

  .access-control-head {
    flex-direction: column;
  }

  .access-control-head-main {
    width: 100%;
  }
}

@media (min-width: 721px) and (max-width: 900px) {
  .access-settings-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .access-advert-slots {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .access-settings-shell .hotspot-settings-form > .account-card,
  .access-settings-shell .access-settings-stack > .account-card,
  .access-settings-shell .access-settings-hero,
  .access-settings-shell .access-settings-tabs {
    animation: none;
  }
}

[data-theme="light"] .mikrotik-wifi-pill.is-on {
  color: var(--success);
  background: var(--success-soft);
}

[data-theme="light"] .mikrotik-wifi-pill.is-off {
  color: var(--danger);
  background: var(--danger-soft);
}

.mikrotik-wifi-off-note strong {
  font-weight: 500;
  opacity: 0.85;
}

.mikrotik-live {
  margin: 0 0 1.35rem;
  padding: 1rem 0 1.2rem;
  border-bottom: 1px solid var(--border);
}

.mikrotik-live-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  margin-bottom: 0.95rem;
}

.mikrotik-live-head h3 {
  margin: 0 0 0.2rem;
  font-size: 1rem;
}

.mikrotik-live-sub {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

.mikrotik-live-stamp {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}

.mikrotik-live-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.mikrotik-live-card {
  padding: 0.85rem 0.9rem 0.8rem;
  border-radius: 14px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface-solid) 96%, var(--sea) 4%),
      color-mix(in srgb, var(--surface-2) 92%, transparent)
    );
  border: 1px solid var(--border);
  box-shadow: var(--card-shadow);
  min-width: 0;
  min-height: 6.4rem;
}

.mikrotik-live.is-offline .mikrotik-live-card[data-metric="status"] {
  border-color: rgba(231, 76, 60, 0.35);
}

.mikrotik-live.is-online .mikrotik-live-card[data-metric="status"] {
  border-color: rgba(46, 204, 113, 0.35);
}

.mikrotik-live-card-speed {
  border-color: color-mix(in srgb, var(--sea) 32%, var(--border));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--sea) 12%, var(--surface-solid)),
      color-mix(in srgb, var(--surface-solid) 94%, transparent)
    );
}

.mikrotik-live-label {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.mikrotik-live-value {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
}

.mikrotik-live-hint {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.35;
}

.mikrotik-meter {
  margin-top: 0.55rem;
  height: 0.35rem;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}

.mikrotik-meter > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #1aa7b0, #2ecc71);
  transition: width 0.45s ease;
}

.mikrotik-meter.is-hot > span {
  background: linear-gradient(90deg, #f39c12, #e74c3c);
}

.mikrotik-live-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem 1rem;
  margin-top: 0.9rem;
}

.mikrotik-live-fact {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.55rem 0.15rem;
}

.mikrotik-live-fact span {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.mikrotik-live-fact strong {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mikrotik-uplink {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.mikrotik-uplink-head {
  margin-bottom: 0.75rem;
}

.mikrotik-uplink-head h3 {
  margin: 0 0 0.2rem;
  font-size: 1rem;
}

.mikrotik-uplink-sub {
  margin: 0;
  font-size: 0.86rem;
  opacity: 0.72;
  line-height: 1.4;
}

.mikrotik-uplink-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.mikrotik-uplink-grid-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.mikrotik-uplink-card {
  min-width: 0;
  padding: 0.85rem 0.9rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.mikrotik-uplink-card-provider {
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.28);
}

[data-theme="light"] .mikrotik-uplink-card {
  background: rgba(16, 36, 44, 0.03);
  border-color: rgba(16, 36, 44, 0.08);
}

[data-theme="light"] .mikrotik-uplink-card-provider {
  background: rgba(14, 116, 144, 0.08);
  border-color: rgba(14, 116, 144, 0.22);
}

.mikrotik-uplink-value {
  font-size: 1.05rem !important;
  word-break: break-word;
}

@media (max-width: 1100px) {
  .mikrotik-uplink-grid-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .mikrotik-uplink-grid,
  .mikrotik-uplink-grid-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mikrotik-clean-uplink {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .mikrotik-clean-uplink {
  border-top-color: rgba(16, 36, 44, 0.1);
}

.mikrotik-clean-uplink-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.mikrotik-clean-uplink-head h3 {
  margin: 0 0 0.2rem;
  font-size: 1rem;
}

.mikrotik-clean-uplink-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.mikrotik-clean-uplink-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1rem;
  margin-top: 0.95rem;
}

.mikrotik-clean-uplink-form {
  margin-top: 1.15rem;
  display: grid;
  gap: 0.9rem;
}

.mikrotik-clean-uplink-note {
  margin: 0;
  font-size: 0.84rem;
  opacity: 0.72;
  line-height: 1.4;
  max-width: 36rem;
}

.mikrotik-clean-mode-fieldset {
  border: 0;
  margin: 0 0 1rem;
  padding: 0;
}

.mikrotik-clean-mode-fieldset legend {
  margin: 0 0 0.55rem;
  font-size: 0.84rem;
  font-weight: 600;
  opacity: 0.85;
}

.mikrotik-clean-mode-option {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  margin: 0 0 0.55rem;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1.35;
}

.mikrotik-clean-mode-option:has(input:checked) {
  border-color: rgba(56, 189, 248, 0.45);
  background: rgba(56, 189, 248, 0.1);
}

[data-theme="light"] .mikrotik-clean-mode-option {
  border-color: rgba(16, 36, 44, 0.1);
  background: rgba(16, 36, 44, 0.03);
}

[data-theme="light"] .mikrotik-clean-mode-option:has(input:checked) {
  border-color: rgba(14, 116, 144, 0.35);
  background: rgba(14, 116, 144, 0.08);
}

.mikrotik-clean-mode-option input {
  margin-top: 0.15rem;
}

.field-hint {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  opacity: 0.68;
  line-height: 1.35;
}

@media (max-width: 1100px) {
  .mikrotik-clean-uplink-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .mikrotik-clean-uplink-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .mikrotik-uplink-grid,
  .mikrotik-uplink-grid-5 {
    grid-template-columns: 1fr;
  }
}

.mikrotik-live-empty {
  padding: 1.15rem 1rem;
  border-radius: 14px;
  border: 1px dashed rgba(231, 76, 60, 0.35);
  background: rgba(231, 76, 60, 0.06);
}

.mikrotik-live-empty strong {
  display: block;
  margin-bottom: 0.25rem;
}

.mikrotik-live-empty p {
  margin: 0;
  opacity: 0.75;
  font-size: 0.9rem;
}

.mikrotik-live-blocked {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1rem;
  padding: 1rem 1.05rem;
  border-radius: 16px;
  border: 1px solid rgba(243, 156, 18, 0.28);
  background:
    radial-gradient(ellipse 70% 90% at 0% 0%, rgba(243, 156, 18, 0.16), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
}

[data-theme="light"] .mikrotik-live-blocked {
  background:
    radial-gradient(ellipse 70% 90% at 0% 0%, rgba(243, 156, 18, 0.14), transparent 55%),
    linear-gradient(180deg, #fff8ef, #fff);
  border-color: rgba(192, 120, 20, 0.22);
}

.mikrotik-live-blocked[hidden] {
  display: none;
}

.mikrotik-live-blocked-icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  font-weight: 800;
  color: #f0b45a;
  background: rgba(243, 156, 18, 0.16);
  border: 1px solid rgba(243, 156, 18, 0.3);
  flex: 0 0 auto;
}

.mikrotik-live-blocked strong {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.98rem;
}

.mikrotik-live-blocked p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
  max-width: 36rem;
}

.mikrotik-live-blocked .btn {
  margin-left: auto;
}

.mikrotik-notice-modal .mikrotik-notice-panel {
  position: relative;
  width: min(100% - 1.25rem, 26rem);
  max-width: 26rem;
  overflow: hidden;
  padding: 0;
}

.mikrotik-notice-glow {
  position: absolute;
  inset: -20% auto auto -10%;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(243, 156, 18, 0.28), transparent 68%);
  pointer-events: none;
}

.mikrotik-notice-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.15rem 1.15rem 0.35rem;
}

.mikrotik-notice-badge {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  color: #f0b45a;
  background: rgba(243, 156, 18, 0.14);
  border: 1px solid rgba(243, 156, 18, 0.28);
  animation: mikrotik-notice-pulse 1.8s ease-in-out infinite;
}

@keyframes mikrotik-notice-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.25); }
  50% { transform: scale(1.03); box-shadow: 0 0 0 10px rgba(243, 156, 18, 0); }
}

.mikrotik-notice-body {
  padding: 0.35rem 1.2rem 0.4rem;
}

.mikrotik-notice-kicker {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  font-weight: 700;
}

.mikrotik-notice-body h2 {
  margin: 0 0 0.45rem;
  font-size: 1.2rem;
  line-height: 1.25;
}

.mikrotik-notice-text {
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
  opacity: 0.85;
  line-height: 1.45;
}

.mikrotik-notice-reason {
  margin: 0;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  font-size: 0.88rem;
  line-height: 1.45;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .mikrotik-notice-reason {
  background: rgba(16, 36, 44, 0.04);
  border-color: rgba(16, 36, 44, 0.08);
}

.mikrotik-notice-actions {
  padding: 0.85rem 1.15rem 1.15rem;
}

.mikrotik-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-left: auto;
}

@media (max-width: 960px) {
  .mikrotik-live-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 560px) {
  .mikrotik-live-grid,
  .mikrotik-live-facts {
    grid-template-columns: 1fr;
  }
}

.mikrotik-ports-panel .panel-sub {
  margin: 0.25rem 0 0;
}

.mikrotik-ports-host {
  color: var(--ink-soft);
  font-weight: 500;
}

.mikrotik-ports-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(185, 64, 64, 0.35);
  background: rgba(185, 64, 64, 0.08);
}

.mikrotik-ports-error p {
  margin: 0;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.4;
}

.mikrotik-ports-table-wrap {
  margin-top: 1rem;
}

.mikrotik-ports-table .mikrotik-port-name {
  display: block;
  font-size: 0.95rem;
}

.mikrotik-ports-table .mikrotik-port-comment {
  display: block;
  margin-top: 0.15rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.mikrotik-port-type {
  display: inline-flex;
  align-items: center;
  min-height: 1.45rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(148, 163, 184, 0.1);
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: lowercase;
}

.mikrotik-port-role-form {
  margin: 0;
}

.mikrotik-port-role-select {
  min-width: 10.5rem;
  max-width: 100%;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface, #fff);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
}

.mikrotik-port-role-select:focus {
  outline: 2px solid rgba(14, 124, 134, 0.35);
  outline-offset: 1px;
}

.mikrotik-port-actions {
  white-space: nowrap;
}

.mikrotik-port-actions form {
  margin: 0;
}

.mikrotik-ports-table tr.is-disabled {
  opacity: 0.72;
}

.btn-sm {
  padding: 0.35rem 0.7rem;
  font-size: 0.82rem;
}

@media (max-width: 720px) {
  .mikrotik-port-role-select {
    min-width: 0;
    width: 100%;
  }
}

.mikrotik-uplink-mode-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(14, 124, 134, 0.28);
  background: rgba(14, 124, 134, 0.08);
}

.mikrotik-uplink-mode-label {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mikrotik-uplink-mode-banner strong {
  display: block;
  font-size: 1rem;
}

.mikrotik-uplink-mode-meta {
  display: block;
  margin-top: 0.2rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.mikrotik-uplink-config-panel {
  margin-top: 1.25rem;
}

.mikrotik-uplink-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.mikrotik-uplink-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 1rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(148, 163, 184, 0.06);
}

.mikrotik-uplink-card h3 {
  margin: 0;
  font-size: 1.05rem;
}

.mikrotik-uplink-card > p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.45;
}

.mikrotik-uplink-field {
  display: grid;
  gap: 0.3rem;
}

.mikrotik-uplink-field span {
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 700;
}

.mikrotik-uplink-field input,
.mikrotik-uplink-field select {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface, #fff);
  color: var(--ink);
  font-size: 0.9rem;
}

.mikrotik-uplink-fieldset {
  margin: 0;
  padding: 0.65rem 0.75rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.mikrotik-uplink-fieldset legend {
  padding: 0 0.35rem;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 700;
}

.mikrotik-uplink-check-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 0.75rem;
}

.mikrotik-uplink-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
}

.mikrotik-uplink-card .btn {
  align-self: flex-start;
  margin-top: 0.25rem;
}

.mikrotik-uplink-step {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.45;
}

.mikrotik-uplink-role-block {
  display: grid;
  gap: 0.4rem;
}

.mikrotik-uplink-role-label {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.mikrotik-uplink-port-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mikrotik-uplink-port-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(148, 163, 184, 0.12);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
}

.mikrotik-uplink-port-chip.is-primary {
  background: rgba(14, 124, 134, 0.14);
  border-color: rgba(14, 124, 134, 0.35);
  color: var(--sea-deep, #0e7c86);
}

.mikrotik-uplink-port-chip.is-backup {
  background: rgba(180, 120, 20, 0.12);
  border-color: rgba(180, 120, 20, 0.35);
  color: #8a5a00;
}

.mikrotik-uplink-empty,
.mikrotik-uplink-hint,
.mikrotik-uplink-warn {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
}

.mikrotik-uplink-empty {
  color: var(--ink-soft);
}

.mikrotik-uplink-hint {
  color: var(--ink-soft);
}

.mikrotik-uplink-warn {
  color: #b94040;
}

.mikrotik-uplink-card .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 900px) {
  .mikrotik-uplink-config-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .mikrotik-uplink-check-list {
    grid-template-columns: 1fr;
  }
}


/* Friendly MikroTik ports workspace */
.mikrotik-ports-head {
  align-items: flex-start;
  gap: 1rem;
}

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

.mikrotik-ports-auto-form {
  margin: 0;
}

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

.mikrotik-ports-summary-card {
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(148, 163, 184, 0.08);
}

.mikrotik-ports-summary-card.is-internet {
  border-color: rgba(37, 150, 190, 0.35);
  background: rgba(37, 150, 190, 0.1);
}

.mikrotik-ports-summary-card.is-customers {
  border-color: rgba(46, 160, 110, 0.35);
  background: rgba(46, 160, 110, 0.1);
}

.mikrotik-ports-summary-card.is-unused {
  border-color: rgba(148, 163, 184, 0.35);
}

.mikrotik-ports-summary-label {
  display: block;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mikrotik-ports-summary-card strong {
  display: block;
  margin-top: 0.25rem;
  font-size: 1.05rem;
  line-height: 1.25;
}

.mikrotik-ports-summary-card p {
  margin: 0.3rem 0 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1.35;
}

.mikrotik-ports-hint {
  margin: 0.85rem 0 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.45;
}

.mikrotik-ports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
}

.mikrotik-port-card {
  display: grid;
  gap: 0.75rem;
  padding: 0.95rem 1rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface, rgba(15, 23, 42, 0.35));
}

.mikrotik-port-card.is-up {
  box-shadow: inset 3px 0 0 rgba(46, 160, 110, 0.85);
}

.mikrotik-port-card.is-down {
  box-shadow: inset 3px 0 0 rgba(148, 163, 184, 0.55);
}

.mikrotik-port-card.is-disabled {
  opacity: 0.72;
  box-shadow: inset 3px 0 0 rgba(185, 64, 64, 0.75);
}

.mikrotik-port-card.role-wan {
  border-color: rgba(37, 150, 190, 0.45);
}

.mikrotik-port-card.role-lan {
  border-color: rgba(46, 160, 110, 0.4);
}

.mikrotik-port-card-head,
.mikrotik-port-card-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
}

.mikrotik-port-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  margin-top: 0.35rem;
}

.mikrotik-port-bridge {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
}

.mikrotik-port-uplink {
  color: var(--accent, #0b6e4f);
  font-size: 0.78rem;
  font-weight: 700;
}

.mikrotik-port-role-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.mikrotik-port-role-pick-form {
  margin: 0;
}

.mikrotik-port-role-pick {
  min-height: 2rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.mikrotik-port-role-pick:hover:not(:disabled) {
  border-color: rgba(37, 150, 190, 0.5);
}

.mikrotik-port-role-pick.is-active.role-wan,
.mikrotik-port-role-pick.is-active[class*=role-wan] {
  border-color: rgba(37, 150, 190, 0.55);
  background: rgba(37, 150, 190, 0.18);
  color: var(--ink);
}

.mikrotik-port-role-pick.is-active.role-lan {
  border-color: rgba(46, 160, 110, 0.55);
  background: rgba(46, 160, 110, 0.18);
}

.mikrotik-port-role-pick.is-active.role-unused,
.mikrotik-port-role-pick.is-active.role-none {
  border-color: rgba(148, 163, 184, 0.55);
  background: rgba(148, 163, 184, 0.16);
}

.mikrotik-port-role-pick.is-active.role-wan_backup,
.mikrotik-port-role-pick.is-active.role-bond {
  border-color: rgba(217, 119, 6, 0.55);
  background: rgba(217, 119, 6, 0.16);
}

.mikrotik-port-role-pick:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.mikrotik-port-advanced {
  border-top: 1px dashed var(--border);
  padding-top: 0.45rem;
}

.mikrotik-port-advanced summary {
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 700;
}

.mikrotik-port-advanced .mikrotik-port-role-picks {
  margin-top: 0.5rem;
}

.mikrotik-port-current-role {
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 700;
}

.mikrotik-port-bond-note {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.mikrotik-uplink-advanced > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
}

.mikrotik-uplink-advanced > summary::-webkit-details-marker {
  display: none;
}

.mikrotik-uplink-advanced > summary .panel-sub {
  display: block;
  margin-top: 0.2rem;
}

.mikrotik-uplink-advanced[open] > summary {
  margin-bottom: 1rem;
}

.mikrotik-uplink-advanced .mikrotik-uplink-config-grid {
  margin-top: 0;
}

@media (max-width: 900px) {
  .mikrotik-ports-summary {
    grid-template-columns: 1fr;
  }

  .mikrotik-ports-head {
    flex-direction: column;
  }

  .mikrotik-ports-head-actions {
    width: 100%;
    justify-content: stretch;
  }

  .mikrotik-ports-head-actions .btn,
  .mikrotik-ports-auto-form {
    flex: 1 1 auto;
  }

  .mikrotik-ports-auto-form .btn {
    width: 100%;
  }
}

/* ?? MikroTik Clean uplink + Ports (shared modern shell) ?? */
.mk-page {
  animation: mk-page-in 0.45s ease both;
}

.mk-page:not(.ops-page) {
  display: grid;
  gap: 1rem;
  width: min(100%, 68rem);
  margin: 0 auto;
}

.mk-page.ops-page {
  width: min(100%, var(--max, 76rem));
  max-width: var(--max, 76rem);
}

@keyframes mk-page-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.mk-page-hero {
  /* base hero chrome: see .ops-hero shared block */
  padding: 1.15rem 1.25rem;
  border-radius: calc(var(--radius, 14px) + 6px);
}

.mk-page-hero.is-on {
  background:
    linear-gradient(135deg, var(--success-soft), transparent 48%),
    var(--surface);
}

.mk-page-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sea);
}

.mk-page-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.15;
}

.mk-page-lead {
  margin: 0.45rem 0 0;
  max-width: 40rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.45;
}

.mk-page-hero-status,
.mk-ports-hero-actions {
  display: grid;
  gap: 0.45rem;
  justify-items: end;
  flex: 0 0 auto;
}

.mk-ports-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.mk-page-hero-meta {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
  text-align: right;
}

.mk-host-chip {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--chip-sea-fg);
  background: var(--chip-sea-bg);
}

.mk-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink-soft);
}

.mk-status-pill.is-on {
  color: var(--success);
  background: var(--success-soft);
  border-color: transparent;
}

.mk-status-pill.is-off {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: transparent;
}

.mk-status-pill.is-muted {
  color: var(--ink-soft);
}

.mk-status-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
}

.mk-status-pill.is-on .mk-status-dot {
  animation: mk-pulse 1.8s ease-out infinite;
}

@keyframes mk-pulse {
  0% { box-shadow: 0 0 0 0 rgba(31, 138, 91, 0.45); }
  70% { box-shadow: 0 0 0 8px rgba(31, 138, 91, 0); }
  100% { box-shadow: 0 0 0 0 rgba(31, 138, 91, 0); }
}

.mk-surface {
  padding: 1.15rem 1.25rem 1.35rem;
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(11, 31, 42, 0.05);
}

[data-theme="dark"] .mk-surface {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}

.mk-clean-surface.is-policy-on {
  border-color: rgba(31, 138, 91, 0.28);
}

/* MikroTik router detail (overview) ? compact modern layout */
.mk-detail-page {
  width: min(100%, 64rem);
  display: grid;
  gap: 0.85rem;
}

.mk-detail-hero {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.25rem;
  padding: 1rem 1.15rem;
}

.mk-detail-hero.is-online {
  background:
    linear-gradient(135deg, var(--success-soft), transparent 46%),
    var(--surface);
}

.mk-detail-hero.is-offline {
  background:
    linear-gradient(135deg, var(--danger-soft), transparent 46%),
    var(--surface);
}

.mk-detail-hero.is-suspended {
  background:
    linear-gradient(135deg, rgba(243, 156, 18, 0.14), transparent 46%),
    var(--surface);
}

.mk-detail-hero-main {
  display: flex;
  align-items: center;
  gap: 0.85rem 1rem;
  flex: 1 1 16rem;
  min-width: 0;
}

.mk-detail-hero-thumb {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 4.25rem;
  height: 3.25rem;
  padding: 0.3rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}

.mk-detail-hero-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.mk-detail-hero-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  margin-bottom: 0.35rem;
}

.mk-detail-back {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ink-soft);
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.mk-detail-back:hover {
  color: var(--ink);
  border-color: var(--border-strong);
}

.mk-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  margin-top: 0.35rem;
  font-size: 0.88rem;
}

.mk-detail-meta .mk-host-chip {
  margin-left: 0;
}

.mk-detail-location {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.mk-detail-hero .mk-page-title {
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
}

.mk-detail-hero-status {
  display: none;
}

.mk-detail-link-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.65rem;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.mk-detail-link-pill.is-connected {
  color: var(--success);
  background: var(--success-soft);
  border-color: transparent;
}

.mk-detail-link-pill.is-disconnected {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: transparent;
}

.mk-detail-link-pill.is-checking {
  color: var(--ink-soft);
}

.mk-detail-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  flex: 0 0 auto;
}

.mk-detail-hero-actions .btn {
  min-height: 2.15rem;
}

.mk-detail-quicknav {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.2rem;
  padding: 0.25rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.mk-detail-quicklink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 2.05rem;
  padding: 0.3rem 0.75rem;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  border: 0;
  background: transparent;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}

.mk-detail-quicklink:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  transform: none;
}

.mk-detail-quicklink.is-active {
  color: var(--chip-sea-fg);
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(11, 31, 42, 0.08);
  border-color: transparent;
}

[data-theme="dark"] .mk-detail-quicklink.is-active {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.mk-setup-page {
  width: min(100%, 52rem);
  display: grid;
  gap: 0.85rem;
}

.mk-setup-stack {
  display: grid;
  gap: 0.85rem;
}

.mk-setup-card {
  padding: 1.1rem 1.15rem 1.2rem;
}

.mk-setup-card-head {
  margin-bottom: 0.85rem;
}

.mk-setup-card-sub {
  margin: 0.25rem 0 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

.mk-setup-form {
  display: grid;
  gap: 0.85rem;
}

.mk-setup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.15rem;
}

.mk-setup-card[data-focus] {
  border-color: color-mix(in srgb, var(--sea) 35%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sea) 16%, transparent);
}

.mk-detail-surface.mikrotik-live {
  margin: 0;
  border-bottom: 0;
  padding: 1rem 1.1rem 1.15rem;
}

.mk-detail-surface > .mikrotik-live-loading,
.mk-detail-surface > .mikrotik-live-head,
.mk-detail-surface > .mk-detail-facts,
.mk-detail-surface > .mikrotik-live-blocked,
.mk-detail-surface > .mk-detail-metrics {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

.mk-detail-surface > .mikrotik-live-loading {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.mk-detail-section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.25;
}

.mk-detail-stamp {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.mk-detail-live-head {
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

.mk-detail-live-head .mikrotik-live-sub {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.mk-detail-facts,
.mk-detail-facts-sr,
.mk-detail-metrics-sr {
  display: none !important;
}

.mk-detail-metrics {
  display: grid;
  gap: 0.65rem;
  padding-bottom: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mk-detail-metric {
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  min-height: 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.mk-detail-metric:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border-strong);
}

.mk-detail-metric .mikrotik-live-label {
  margin-bottom: 0.25rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mk-detail-metric .mikrotik-live-value {
  font-size: clamp(1.15rem, 2.4vw, 1.35rem);
  line-height: 1.2;
}

.mk-detail-metric .mikrotik-live-hint:not([hidden]) {
  margin-top: 0.25rem;
  font-size: 0.75rem;
}

.mk-detail-metric .mikrotik-meter {
  margin-top: 0.45rem;
}

.mk-detail-uplink {
  padding-top: 1rem !important;
  margin-top: 0.95rem;
  border-top: 1px solid var(--border);
}

.mk-detail-uplink-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  margin-bottom: 0.75rem;
}

.mk-detail-uplink-head .mikrotik-uplink-sub {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.mk-detail-uplink-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0;
}

.mk-detail-uplink-item {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.mk-detail-uplink-item dt {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.mk-detail-uplink-item dd {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--ink);
  line-height: 1.3;
  word-break: break-word;
}

.mk-detail-surface.mikrotik-live.is-online {
  border-color: rgba(31, 138, 91, 0.22);
}

.mk-detail-surface.mikrotik-live.is-offline {
  border-color: rgba(192, 57, 43, 0.18);
}

.mk-detail-analytics {
  display: grid;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
}

.mk-detail-analytics-block {
  display: grid;
  gap: 0.75rem;
  padding-top: 0.15rem;
}

.mk-detail-analytics-block + .mk-detail-analytics-block {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.mk-detail-analytics-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem 1rem;
}

.mk-detail-analytics-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.mk-detail-analytics-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.85rem;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.mk-detail-analytics-chip strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.mk-detail-chart-wrap {
  position: relative;
  height: clamp(9rem, 22vw, 11.5rem);
}

.mk-detail-analytics-subtitle {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.mk-detail-health-drops {
  display: grid;
  gap: 0.45rem;
}

.mk-detail-drop-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.mk-detail-drop {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 0.65rem;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.mk-detail-drop.is-now {
  border-color: color-mix(in srgb, var(--warn) 45%, var(--border));
  background: color-mix(in srgb, var(--warn) 8%, var(--surface-2));
}

.mk-detail-drop-time {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.mk-detail-drop-title {
  margin: 0;
  font-size: 0.84rem;
  color: var(--ink);
}

.mk-detail-drop-meta {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.mk-detail-setup-card {
  display: grid;
  gap: 0.65rem;
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--sea-soft) 45%, transparent), transparent 72%),
    var(--surface-2);
}

.mk-detail-setup-mode {
  margin: 0.15rem 0 0;
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  font-weight: 750;
  color: var(--ink);
}

.mk-detail-setup-status,
.mk-detail-setup-health {
  margin: 0;
}

.mk-detail-setup-health.is-ok {
  color: var(--success);
}

.mk-detail-setup-health.is-warn {
  color: var(--warn);
}

.mk-detail-analytics-loading {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.mk-detail-kpi-row {
  margin-top: 0.15rem;
}

@media (max-width: 900px) {
  .mk-detail-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mk-detail-uplink-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .mk-detail-hero {
    flex-direction: column;
    align-items: stretch;
  }

  .mk-detail-hero-main {
    width: 100%;
  }

  .mk-detail-hero-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mk-detail-hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .mk-detail-quicknav {
    padding: 0.2rem;
  }

  .mk-detail-quicklink {
    flex: 0 0 auto;
  }

  .mk-detail-live-head {
    flex-direction: column;
    align-items: stretch;
  }

  .mk-detail-stamp {
    align-self: flex-start;
  }

  .mk-detail-uplink-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .mk-detail-hero-thumb {
    width: 3.5rem;
    height: 2.75rem;
  }

  .mk-detail-hero-actions {
    grid-template-columns: 1fr;
  }

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

  .mk-detail-uplink-list {
    grid-template-columns: 1fr;
  }
}

.mk-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-size: 0.9rem;
  line-height: 1.4;
  animation: mk-page-in 0.35s ease both;
}

.mk-job-banner {
  margin-bottom: 1rem;
}

.mk-job-banner strong {
  margin-right: 0.35rem;
}

.mk-banner.is-success {
  background: var(--notice-success-bg);
  border-color: var(--notice-success-border);
  color: var(--notice-success-fg);
}

.mk-banner.is-info {
  background: var(--notice-info-bg);
  border-color: var(--notice-info-border);
  color: var(--notice-info-fg);
}

.mk-banner.is-warn,
.mk-banner.is-danger {
  background: var(--notice-error-bg);
  border-color: var(--notice-error-border);
  color: var(--notice-error-fg);
}

.mk-job-progress {
  position: fixed;
  inset: 0;
  z-index: 1250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(8, 12, 20, 0.55);
  animation: mk-page-in 0.35s ease both;
}

.mk-job-progress-card {
  width: min(24rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid var(--border);
  background: var(--surface-elevated, var(--surface));
  box-shadow: var(--shadow-lg, 0 16px 48px rgba(8, 12, 20, 0.22));
  overflow-x: hidden;
  overflow-y: auto;
}

.mk-job-progress.is-info .mk-job-progress-card {
  border-color: var(--notice-info-border);
}

.mk-job-progress.is-success .mk-job-progress-card {
  border-color: var(--notice-success-border);
}

.mk-job-progress.is-warn .mk-job-progress-card,
.mk-job-progress.is-danger .mk-job-progress-card {
  border-color: var(--notice-error-border);
}

.mk-job-progress-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.95rem 1rem 0.65rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04) 0%,
    transparent 100%
  );
}

.mk-job-progress-head-copy {
  min-width: 0;
}

.mk-job-progress-head strong {
  display: block;
  font-size: 0.95rem;
  line-height: 1.35;
}

.mk-job-progress-sub {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--text-muted, #64748b);
}

.mk-job-progress-spinner {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.1rem;
  border-radius: 50%;
  border: 2px solid rgba(59, 130, 246, 0.18);
  border-top-color: var(--accent, #2563eb);
  animation: mk-job-spin 0.75s linear infinite;
}

.mk-job-progress-spinner[hidden] {
  display: none;
}

@keyframes mk-job-spin {
  to {
    transform: rotate(360deg);
  }
}

.mk-job-progress-steps {
  list-style: none;
  margin: 0;
  padding: 0.55rem 0.85rem 0.35rem;
  display: grid;
  gap: 0.35rem;
}

.mk-job-progress-step {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--text-muted, #64748b);
}

.mk-job-progress-step-label {
  flex: 1 1 auto;
  min-width: 0;
}

.mk-job-progress-step-icon {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.05rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

.mk-job-progress-step.is-done {
  color: var(--text, inherit);
}

.mk-job-progress-step.is-done .mk-job-progress-step-icon {
  background: var(--notice-success-bg, rgba(34, 197, 94, 0.14));
  color: var(--notice-success-fg, #15803d);
}

.mk-job-progress-step.is-active {
  color: var(--text, inherit);
  font-weight: 600;
}

.mk-job-progress-step.is-active .mk-job-progress-step-icon {
  background: rgba(59, 130, 246, 0.12);
}

.mk-job-progress-step.is-pending .mk-job-progress-step-icon {
  border: 1.5px solid var(--border);
  color: transparent;
}

.mk-job-progress-step.is-skipped {
  opacity: 0.72;
}

.mk-job-progress-step.is-skipped .mk-job-progress-step-icon {
  background: rgba(148, 163, 184, 0.14);
  color: var(--text-muted, #64748b);
}

.mk-job-progress-step.is-failed {
  color: var(--notice-error-fg, #b91c1c);
  font-weight: 600;
}

.mk-job-progress-step.is-failed .mk-job-progress-step-icon {
  background: var(--notice-error-bg, rgba(239, 68, 68, 0.12));
  color: var(--notice-error-fg, #b91c1c);
}

.mk-job-progress-dot {
  display: block;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--accent, #2563eb);
  animation: mk-job-pulse 1.1s ease-in-out infinite;
}

@keyframes mk-job-pulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.mk-job-progress-detail {
  margin: 0;
  padding: 0.45rem 1rem 0.95rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-muted, #64748b);
  border-top: 1px solid var(--border);
  background: rgba(148, 163, 184, 0.06);
}

.mk-job-progress.is-success .mk-job-progress-detail {
  color: var(--notice-success-fg, #15803d);
  background: var(--notice-success-bg, rgba(34, 197, 94, 0.08));
}

.mk-job-progress.is-danger .mk-job-progress-detail,
.mk-job-progress.is-warn .mk-job-progress-detail {
  color: var(--notice-error-fg, #b91c1c);
  background: var(--notice-error-bg, rgba(239, 68, 68, 0.08));
}

.mk-uplink-prompt-copy {
  flex: 1 1 12rem;
  min-width: 0;
}

.mk-uplink-prompt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.mk-uplink-risk-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(8, 12, 20, 0.55);
}

.mk-uplink-risk-dialog {
  position: fixed;
  z-index: 1210;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(32rem, calc(100vw - 2rem));
  padding: 1.1rem 1.15rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-elevated, var(--surface));
  box-shadow: var(--shadow-lg, 0 12px 40px rgba(0, 0, 0, 0.2));
}

.mk-uplink-risk-title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.mk-uplink-risk-list {
  margin: 0.65rem 0 0.85rem;
  padding-left: 1.15rem;
  font-size: 0.88rem;
  line-height: 1.45;
}

.mk-uplink-risk-confirm {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  margin: 0.75rem 0;
  font-size: 0.88rem;
  line-height: 1.4;
}

.mk-uplink-risk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.mk-wan-recovery {
  margin-top: 0.85rem;
  padding: 0.75rem 0.8rem;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--border);
  background: var(--surface, #f8fafc);
}

.mk-wan-recovery-copy {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.55rem;
}

.mk-wan-recovery-script {
  margin: 0;
  max-height: 11rem;
  overflow: auto;
  padding: 0.65rem 0.7rem;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--border);
  background: #0f172a;
  color: #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.45;
  white-space: pre;
  user-select: all;
}

.mk-wan-recovery-dialog {
  width: min(40rem, calc(100vw - 2rem));
}

.client-app .staff-main:has(> .mk-recovery-page) {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mk-recovery-page {
  width: min(100%, 52rem);
  max-width: 52rem;
  margin-inline: auto;
  display: grid;
  gap: 0.85rem;
  align-self: center;
}

.mk-recovery-hero {
  align-items: center;
  border-color: color-mix(in srgb, var(--sea) 28%, var(--border));
  background:
    radial-gradient(ellipse 80% 120% at 100% 0%, color-mix(in srgb, var(--signal) 16%, transparent), transparent 55%),
    radial-gradient(ellipse 70% 100% at 0% 100%, color-mix(in srgb, var(--sea) 22%, transparent), transparent 50%),
    linear-gradient(135deg, color-mix(in srgb, var(--sea) 10%, var(--surface)), var(--surface));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 16px 36px color-mix(in srgb, var(--sea) 10%, transparent);
}

.mk-recovery-hero .mk-page-lead {
  max-width: 36rem;
}

.mk-recovery-kicker {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--signal) 18%, var(--surface));
  color: var(--chip-signal-fg);
  border: 1px solid color-mix(in srgb, var(--signal) 35%, transparent);
}

.mk-recovery-count {
  margin: 0;
  flex: 0 0 auto;
  align-self: center;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--chip-sea-fg);
  background: var(--chip-sea-bg);
  border: 1px solid color-mix(in srgb, var(--sea) 25%, transparent);
}

.mk-recovery-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.mk-recovery-steps li {
  position: relative;
  margin: 0;
  padding: 0.55rem 0.45rem 0.55rem 2rem;
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--card-shadow);
}

.mk-recovery-steps li::before {
  content: counter(recovery-step);
  counter-increment: recovery-step;
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(145deg, var(--sea), var(--sea-deep));
}

.mk-recovery-steps li:nth-child(2)::before {
  background: linear-gradient(145deg, #3b82f6, #1d4ed8);
}

.mk-recovery-steps li:nth-child(3)::before {
  background: linear-gradient(145deg, var(--signal), #b45309);
}

.mk-recovery-steps li:nth-child(4)::before {
  background: linear-gradient(145deg, #22c55e, var(--success));
}

.mk-recovery-steps {
  counter-reset: recovery-step;
}

.mk-recovery-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.mk-recovery-item {
  --recovery-accent: var(--sea);
  --recovery-accent-deep: var(--sea-deep);
  --recovery-accent-soft: var(--sea-soft);
  --recovery-accent-fg: var(--chip-sea-fg);
  scroll-margin-top: 5rem;
}

.mk-recovery-item--management {
  --recovery-accent: var(--sea);
  --recovery-accent-deep: var(--sea-deep);
  --recovery-accent-soft: var(--sea-soft);
  --recovery-accent-fg: var(--chip-sea-fg);
}

.mk-recovery-item--single_wan {
  --recovery-accent: #2563eb;
  --recovery-accent-deep: #1d4ed8;
  --recovery-accent-soft: rgba(37, 99, 235, 0.14);
  --recovery-accent-fg: #1e40af;
}

.mk-recovery-item--uplink {
  --recovery-accent: var(--signal);
  --recovery-accent-deep: #b45309;
  --recovery-accent-soft: var(--signal-soft);
  --recovery-accent-fg: var(--chip-signal-fg);
}

.mk-recovery-item--open_surfing {
  --recovery-accent: #16a34a;
  --recovery-accent-deep: var(--success);
  --recovery-accent-soft: var(--success-soft);
  --recovery-accent-fg: var(--success);
}

[data-theme="dark"] .mk-recovery-item--single_wan {
  --recovery-accent-fg: #93c5fd;
}

[data-theme="dark"] .mk-recovery-item--open_surfing {
  --recovery-accent-fg: #86efac;
}

.mk-recovery-card {
  overflow: hidden;
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid color-mix(in srgb, var(--recovery-accent) 22%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--recovery-accent) 6%, var(--surface)), var(--surface));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 12px 28px color-mix(in srgb, var(--recovery-accent) 8%, transparent);
}

.mk-recovery-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0.95rem;
  border-bottom: 1px solid color-mix(in srgb, var(--recovery-accent) 14%, var(--border));
  background: color-mix(in srgb, var(--recovery-accent) 5%, var(--surface));
}

.mk-recovery-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(145deg, var(--recovery-accent), var(--recovery-accent-deep));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--recovery-accent) 35%, transparent);
}

.mk-recovery-title {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}

.mk-recovery-code {
  position: relative;
  border: none;
  border-radius: 0;
  background: #0f172a;
  overflow: hidden;
}

.mk-recovery-code::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--recovery-accent), color-mix(in srgb, var(--recovery-accent) 40%, #fff));
  opacity: 0.85;
}

[data-theme="dark"] .mk-recovery-code {
  background: #060a12;
}

.mk-recovery-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.15rem;
  padding-inline: 0.95rem;
  white-space: nowrap;
  flex-shrink: 0;
  color: #fff;
  border: none;
  background: linear-gradient(145deg, var(--recovery-accent), var(--recovery-accent-deep));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--recovery-accent) 32%, transparent);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.mk-recovery-copy:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--recovery-accent) 38%, transparent);
}

.mk-recovery-copy:active {
  transform: translateY(1px);
}

.mk-recovery-copy-icon {
  display: inline-flex;
  line-height: 0;
}

.mk-recovery-copy.is-copied {
  background: linear-gradient(145deg, #22c55e, var(--success));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--success) 35%, transparent);
}

.mk-recovery-copy.is-copied .mk-recovery-copy-icon {
  opacity: 0.9;
}

.mk-recovery-script {
  margin: 0;
  max-height: min(16rem, 40vh);
  overflow: auto;
  padding: 0.9rem 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(0.68rem, 1.5vw, 0.76rem);
  line-height: 1.55;
  white-space: pre;
  word-break: normal;
  color: #e2e8f0;
  background: transparent;
  cursor: text;
  user-select: all;
  -webkit-overflow-scrolling: touch;
}

.mk-recovery-script:focus {
  outline: none;
}

.mk-recovery-script:focus-visible {
  outline: 2px solid var(--recovery-accent);
  outline-offset: -2px;
}

@media (max-width: 760px) {
  .mk-recovery-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .mk-recovery-page {
    gap: 0.7rem;
  }

  .mk-recovery-hero {
    flex-direction: column;
    align-items: stretch;
  }

  .mk-recovery-count {
    align-self: flex-start;
  }

  .mk-recovery-steps {
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
  }

  .mk-recovery-steps li {
    font-size: 0.74rem;
    padding-left: 1.85rem;
  }

  .mk-recovery-card-head {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 0.55rem 0.65rem;
    padding: 0.75rem 0.85rem;
  }

  .mk-recovery-copy {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
  }

  .mk-recovery-script {
    max-height: min(14rem, 36vh);
    font-size: 0.68rem;
    padding: 0.8rem 0.85rem;
  }
}

.mk-banner[hidden],
.mk-job-progress[hidden],
.mk-loading[hidden],
.mk-empty[hidden],
.mk-ports-grid[hidden],
.mk-uplink-config[hidden],
.mk-ports-assign[hidden],
.mk-stat-grid[hidden],
.mk-assigned-loading[hidden],
.mk-assigned-uplink-overview[hidden],
.mk-assigned-kpi-row[hidden],
.mk-assigned-clients-section[hidden],
.mk-assigned-notice[hidden],
.mk-assigned-switch-hint[hidden],
.mk-assigned-empty[hidden],
.mk-router-analysis-error[hidden],
[data-assigned-live-pill][hidden],
[data-assigned-error][hidden] {
  display: none !important;
}

.mk-stat-grid {
  display: grid;
  gap: 0.75rem;
}

.mk-stat-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mk-stat-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mk-stat {
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, var(--surface-2), var(--surface));
  min-width: 0;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.mk-stat:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
}

.mk-stat.is-internet {
  box-shadow: inset 3px 0 0 var(--sea);
}

.mk-stat.is-customers {
  box-shadow: inset 3px 0 0 var(--success);
}

.mk-stat.is-unused {
  box-shadow: inset 3px 0 0 var(--ink-soft);
}

.mk-stat-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.mk-stat-value {
  margin: 0.4rem 0 0.2rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.mk-stat-value-sm {
  font-size: 0.98rem;
}

.mk-stat-hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
  line-height: 1.35;
}

.mk-clean-form {
  margin-top: 1.25rem;
  display: grid;
  gap: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--border);
}

.mk-mode-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.mk-mode-fieldset legend {
  margin: 0 0 0.65rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink);
}

.mk-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.mk-mode-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  margin: 0;
  padding: 0.95rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.mk-mode-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.mk-mode-card:has(input:checked) {
  border-color: rgba(14, 124, 134, 0.45);
  background: var(--sea-soft);
  box-shadow: 0 0 0 1px rgba(14, 124, 134, 0.12);
}

.mk-mode-card input {
  margin-top: 0.2rem;
  accent-color: var(--sea);
}

.mk-mode-card-body {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.mk-mode-card-title {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.98rem;
}

.mk-mode-card-copy {
  font-size: 0.84rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

.mk-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1rem;
}

.mk-field-span {
  grid-column: 1 / -1;
}

.mk-checks {
  display: grid;
  gap: 0.65rem;
}

.mk-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  margin: 0;
  padding: 0.85rem 0.95rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
}

.mk-check.is-required {
  border-color: rgba(14, 124, 134, 0.28);
}

.mk-check.is-locked {
  cursor: default;
  opacity: 0.95;
  border-color: rgba(14, 124, 134, 0.22);
  background: color-mix(in srgb, var(--sea) 6%, var(--surface-2));
}

.mk-check-locked-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  border-radius: 999px;
  background: var(--sea);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}

.mk-check input {
  margin-top: 0.2rem;
  accent-color: var(--sea);
}

.mk-check strong {
  display: block;
  color: var(--ink);
  font-size: 0.9rem;
}

.mk-check small {
  display: block;
  margin-top: 0.2rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.4;
}

.mk-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.1rem;
}

.mk-action-btn {
  min-height: 2.6rem;
  padding-inline: 1.2rem;
}

.mk-help-note {
  margin: 0;
  max-width: 38rem;
  font-size: 0.84rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

.mk-help-note.is-warn {
  color: var(--notice-error-fg);
}

.mk-assigned-ports-page {
  display: grid;
  gap: 0.85rem;
}

.mk-assigned-ports-surface {
  display: grid;
  gap: 1rem;
}

.mk-assigned-ports-page .mk-router-analysis {
  margin-top: 0;
  padding: 0;
  border: none;
  background: transparent;
  gap: 1.15rem;
}

.mk-ports-page {
  gap: 1rem;
}

.mk-ports-overview {
  display: grid;
  gap: 0.85rem;
  padding: 1rem 1.05rem 1.1rem;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  animation: mk-page-in 0.45s ease both;
}

.mk-ports-summary-inline {
  margin: 0;
}

.mk-ports-summary-inline .mk-stat {
  padding: 0.65rem 0.75rem;
}

.mk-ports-summary-inline .mk-stat-value {
  font-size: 0.95rem;
}

.mk-ports-summary-inline .mk-stat-hint {
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mk-ports-overview .mk-ports-map {
  padding: 0.85rem 0.9rem 0.95rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 80% at 0% 0%, var(--sea-soft), transparent 55%),
    var(--surface-1, var(--surface));
}

.mk-ports-overview .mk-uplink-config {
  margin-top: 0;
  padding: 0.85rem 0.9rem 0.95rem;
  border-radius: 14px;
}

.mk-ports-face-details {
  margin-top: 0.15rem;
}

.mk-ports-face-details > summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--ink-soft);
  list-style: none;
}

.mk-ports-face-details > summary::-webkit-details-marker {
  display: none;
}

.mk-ports-face-details > summary::before {
  content: "? ";
  display: inline-block;
  transition: transform 0.15s ease;
}

.mk-ports-face-details[open] > summary::before {
  transform: rotate(90deg);
}

.mk-ports-face-details .mk-ports-face {
  margin-top: 0.65rem;
}

.mk-uplink-status-stack {
  display: grid;
  gap: 0.55rem;
}

.mk-uplink-status-stack .mk-uplink-recommendation,
.mk-uplink-status-stack .mk-uplink-setup-status {
  margin: 0;
}

.mk-port-card.is-compact {
  gap: 0.55rem;
  padding: 0.75rem 0.85rem;
}

.mk-port-card-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
}

.mk-port-role-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--border) 45%, transparent);
}

.mk-port-role-pill.role-wan {
  color: var(--sea);
  background: var(--sea-soft);
}

.mk-port-role-pill.role-lan {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, transparent);
}

.mk-port-role-pill.role-wan_backup,
.mk-port-role-pill.role-bond {
  color: var(--warn, #9a6700);
  background: color-mix(in srgb, var(--warn, #e8a317) 14%, transparent);
}

.mk-port-controls {
  margin-top: 0.1rem;
}

.mk-port-controls > summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--sea);
  list-style: none;
}

.mk-port-controls > summary::-webkit-details-marker {
  display: none;
}

.mk-port-controls-body {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--border);
}

.mk-port-card.is-compact .mk-port-card-foot {
  border-top: 0;
  padding-top: 0;
  justify-content: flex-end;
}

.mk-port-card.is-compact:not(:has(.mk-port-controls[open])) .mk-port-card-foot {
  margin-top: -0.15rem;
}

.mk-port-disable {
  font-size: 0.78rem;
}

.mk-ports-assign-head {
  gap: 0.15rem;
}

.mk-uplink-config-prominent {
  border: 1px solid color-mix(in srgb, var(--sea) 35%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sea-soft) 55%, transparent), transparent 55%),
    var(--surface-1, var(--surface));
}

.mk-ports-health-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.mk-ports-health-actions .btn {
  margin: 0;
}

.mk-ports-overview .mk-uplink-config-prominent {
  margin-top: 0;
}

.mk-ports-health-title {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  color: var(--ink);
}

.mk-ports-health-primary {
  margin: 0;
}

.mk-ports-health-more {
  margin-top: 0.45rem;
  font-size: 0.88rem;
}

.mk-ports-health-more > summary {
  cursor: pointer;
  color: var(--ink-soft);
  font-weight: 650;
  list-style: none;
}

.mk-ports-health-more > summary::-webkit-details-marker {
  display: none;
}

.mk-ports-health-more > p {
  margin: 0.35rem 0 0;
  color: var(--ink-soft);
}

.mk-goal-switch-single {
  display: grid;
  gap: 0.35rem;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  border: 1px dashed var(--border);
  background: color-mix(in srgb, var(--surface-1, var(--surface)) 80%, transparent);
}

.mk-goal-switch-single .mk-help-note {
  margin: 0;
  font-size: 0.8rem;
}

.mk-ports-surface {
  display: grid;
  gap: 1rem;
}

.mk-ports-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  position: sticky;
  top: 0.65rem;
  z-index: 5;
  padding: 0.35rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
}

.mk-ports-step {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 11px;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.mk-ports-step:hover {
  background: var(--surface-2);
  border-color: var(--border);
}

.mk-ports-step-num {
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--sea);
  background: var(--sea-soft);
}

.mk-ports-step-copy {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}

.mk-ports-step-copy strong {
  font-size: 0.86rem;
  font-weight: 750;
  color: var(--ink);
  line-height: 1.2;
}

.mk-ports-step-copy em {
  font-style: normal;
  font-size: 0.72rem;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mk-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--success) 28%, var(--border));
}

.mk-live-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent);
  animation: mk-live-pulse 1.6s ease-out infinite;
}

@keyframes mk-live-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 45%, transparent); }
  70% { box-shadow: 0 0 0 0.45rem transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.mk-assigned-section {
  display: grid;
  gap: 0.75rem;
  padding: 1rem 1.05rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface-1, var(--surface));
}

.mk-assigned-client-cards {
  display: none;
  gap: 0.75rem;
}

.mk-assigned-client-cards.is-group {
  display: grid;
}

.mk-assigned-client-card {
  display: grid;
  gap: 0.65rem;
  padding: 0.9rem 0.95rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.mk-assigned-client-card.is-offline {
  opacity: 0.82;
}

.mk-assigned-client-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.mk-assigned-client-card-name {
  font-size: 0.98rem;
}

.mk-assigned-status-chip {
  flex: 0 0 auto;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, transparent);
}

.mk-assigned-client-card.is-offline .mk-assigned-status-chip {
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--border) 55%, transparent);
}

.mk-assigned-client-meta {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 0.75rem;
}

.mk-assigned-client-meta > div {
  min-width: 0;
}

.mk-assigned-client-meta dt {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.mk-assigned-client-meta dd {
  margin: 0.1rem 0 0;
  font-size: 0.88rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.mk-assigned-group-table {
  display: none;
}

@media (min-width: 901px) {
  .mk-assigned-client-cards.is-group {
    display: none;
  }

  .mk-assigned-group-table {
    display: block;
  }
}

.mk-ports-hero {
  margin: -0.15rem -0.15rem 0;
  padding: 0.15rem 0.15rem 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.mk-inline-form {
  margin: 0;
}

.mk-ports-map {
  display: grid;
  gap: 1rem;
  padding: 1rem 1.05rem 1.15rem;
  border-radius: 18px;
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 80% at 0% 0%, var(--sea-soft), transparent 55%),
    radial-gradient(90% 70% at 100% 100%, var(--success-soft), transparent 50%),
    var(--surface-2);
  animation: mk-page-in 0.45s ease both;
}

.mk-ports-map-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
}

.mk-ports-map-head-copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.mk-section-step {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sea);
}

.mk-ports-map-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 750;
  color: var(--ink);
}

.mk-ports-map-caption {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.mk-router-analysis {
  margin-top: 1.25rem;
  padding: 1.1rem 1.15rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  display: grid;
  gap: 1rem;
}

.mk-router-analysis-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.mk-router-analysis-title {
  margin: 0.15rem 0 0;
  font-size: 1.15rem;
}

.mk-router-analysis-summary {
  font-size: 0.875rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.mk-router-isp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem;
}

.mk-router-isp-card {
  padding: 0.85rem 0.95rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  display: grid;
  gap: 0.35rem;
}

.mk-router-isp-card.is-slow {
  border-color: color-mix(in srgb, var(--warn) 55%, var(--border));
  background: color-mix(in srgb, var(--warn) 8%, var(--surface-2));
}

.mk-router-isp-card.is-sidelined {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
  opacity: 0.85;
}

.mk-router-isp-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.mk-router-isp-index {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.mk-router-isp-status {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--success);
}

.mk-router-isp-card.is-slow .mk-router-isp-status {
  color: var(--warn);
}

.mk-router-isp-card.is-sidelined .mk-router-isp-status {
  color: var(--danger);
}

.mk-router-isp-name {
  font-size: 0.95rem;
}

.mk-router-isp-foot {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.mk-router-analysis-clients-head {
  display: grid;
  gap: 0.2rem;
}

.mk-router-analysis-subtitle {
  margin: 0;
  font-size: 1rem;
}

.mk-router-analysis-table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.mk-router-analysis-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.mk-router-analysis-table th,
.mk-router-analysis-table td {
  padding: 0.55rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.mk-router-analysis-table th {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--surface-2);
}

.mk-router-analysis-table tr:last-child td {
  border-bottom: none;
}

.mk-router-analysis-table tr.is-offline td {
  color: var(--ink-soft);
}

.mk-router-analysis-table tr.is-slow-isp td:nth-child(6) {
  color: var(--warn);
}

.mk-muted {
  color: var(--ink-soft);
}

.mk-auto-balance-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  user-select: none;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.mk-auto-balance-toggle:hover {
  border-color: color-mix(in srgb, var(--sea) 28%, var(--border));
}

.mk-auto-balance-toggle-copy {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}

.mk-auto-balance-toggle-label {
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--ink);
  line-height: 1.2;
}

.mk-auto-balance-toggle-hint {
  font-size: 0.68rem;
  color: var(--ink-soft);
  line-height: 1.25;
}

.mk-auto-balance-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: 0;
}

.mk-auto-balance-switch-track {
  position: relative;
  flex: 0 0 auto;
  width: 2.55rem;
  height: 1.4rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.45);
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.mk-auto-balance-switch-track::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 2px;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.28);
  transition: transform 0.2s ease;
}

.mk-auto-balance-toggle input:checked + .mk-auto-balance-switch-track {
  background: rgba(14, 124, 134, 0.85);
  border-color: rgba(14, 124, 134, 0.95);
}

.mk-auto-balance-toggle input:checked + .mk-auto-balance-switch-track::after {
  transform: translateX(1.05rem);
}

.mk-auto-balance-toggle input:focus-visible + .mk-auto-balance-switch-track {
  outline: 2px solid color-mix(in srgb, var(--sea) 55%, transparent);
  outline-offset: 2px;
}

.mk-auto-balance-toggle.is-on {
  border-color: color-mix(in srgb, var(--sea) 45%, var(--border));
  background: color-mix(in srgb, var(--sea) 12%, var(--surface-2));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sea) 10%, transparent);
}

.mk-auto-balance-toggle.is-on .mk-auto-balance-toggle-label {
  color: color-mix(in srgb, var(--sea) 82%, var(--ink));
}

.mk-auto-balance-toggle input:disabled + .mk-auto-balance-switch-track {
  opacity: 0.55;
  cursor: wait;
}

.mk-auto-balance-toggle:has(input:disabled) {
  opacity: 0.85;
  cursor: wait;
}

.mk-assigned-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.65rem;
}

.mk-assigned-kpi {
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--sea-soft) 55%, transparent), transparent 70%),
    var(--surface-2);
  display: grid;
  gap: 0.25rem;
}

.mk-assigned-kpi-label {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.mk-assigned-kpi-value {
  margin: 0;
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.mk-assigned-port-rates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.85rem;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.mk-assigned-port-rates em {
  font-style: normal;
  color: var(--ink-soft);
  margin-right: 0.25rem;
}

.mk-assigned-usage-bar {
  height: 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 80%, transparent);
  overflow: hidden;
}

.mk-assigned-usage-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sea), color-mix(in srgb, var(--sea) 65%, #34d399));
}

.mk-assigned-port-card.is-lan {
  border-color: color-mix(in srgb, var(--success) 35%, var(--border));
}

.mk-assigned-lan-grid,
.mk-router-isp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  gap: 0.75rem;
}

.mk-assigned-port-groups {
  display: grid;
  gap: 1rem;
  margin-bottom: 0.35rem;
}

.mk-assigned-port-group {
  display: grid;
  gap: 0.65rem;
  padding: 0.85rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.mk-assigned-port-group-head h4 {
  margin: 0;
  font-size: 0.98rem;
}

.mk-assigned-client-link {
  color: var(--sea);
  text-decoration: none;
  font-weight: 650;
}

.mk-assigned-client-link:hover {
  text-decoration: underline;
}

.mk-assigned-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mk-assigned-balance-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.mk-assigned-balance-copy {
  flex: 1 1 16rem;
  min-width: 0;
}

.mk-assigned-balance-copy p {
  margin: 0.25rem 0 0;
}

.mk-assigned-balance-stats {
  margin: 0.45rem 0 0;
  padding-left: 1.1rem;
}

.mk-assigned-balance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.mk-assigned-port-map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.mk-assigned-map-col {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}

.mk-assigned-map-stack {
  display: grid;
  gap: 0.65rem;
}

.mk-assigned-port-clients {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-muted, #667085);
}

.mk-assigned-port-group-isp {
  border-left: 3px solid var(--sea, #0d6e6e);
}

.mk-assigned-port-group-lan {
  border-left: 3px solid var(--border-strong, #98a2b3);
}

/* Live clients (assigned ports) layout */
.mk-assigned-ports-page .mk-assigned-hero .mk-page-lead {
  max-width: 36rem;
}

.mk-assigned-top-panel {
  display: grid;
  gap: 0.85rem;
}

.mk-assigned-loading {
  display: grid;
  gap: 1rem;
  padding: 1rem 1.05rem 1.15rem;
  border-radius: 16px;
  border: 1px dashed var(--border-strong);
  background: var(--surface-2);
}

.mk-assigned-uplink-overview {
  display: grid;
  gap: 0.75rem;
  padding: 0.95rem 1rem 1.05rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background:
    radial-gradient(140% 90% at 0% 0%, color-mix(in srgb, var(--sea-soft) 55%, transparent), transparent 58%),
    var(--surface);
  box-shadow: 0 1px 2px rgba(11, 31, 42, 0.04);
}

.mk-assigned-uplink-overview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
}

.mk-assigned-uplink-overview-kicker {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.mk-assigned-uplink-overview-title {
  margin: 0.15rem 0 0;
  font-size: 1.05rem;
  line-height: 1.2;
}

.mk-assigned-uplink-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 0.65rem;
}

.mk-assigned-overview-card {
  display: grid;
  gap: 0.35rem;
  padding: 0.75rem 0.82rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2, var(--surface));
  min-height: 6.5rem;
}

.mk-assigned-overview-card.is-up {
  border-top: 3px solid rgba(13, 110, 110, 0.55);
}

.mk-assigned-overview-card.is-slow {
  border-top: 3px solid rgba(234, 179, 8, 0.75);
}

.mk-assigned-overview-card.is-off {
  border-top: 3px solid rgba(148, 163, 184, 0.75);
}

.mk-assigned-overview-card.is-offline-summary {
  border-top: 3px solid rgba(59, 130, 246, 0.55);
}

.mk-assigned-overview-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.45rem;
}

.mk-assigned-overview-card-title {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.25;
}

.mk-assigned-overview-card-stat {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted, #64748b);
}

.mk-assigned-overview-card-stat strong {
  color: var(--sea, #0d6e6e);
  font-size: 1.05rem;
}

.mk-assigned-overview-card-meta {
  margin: 0;
  font-size: 0.74rem;
  color: var(--ink-soft);
}

.mk-assigned-loading-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.mk-assigned-loading-skeleton {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.mk-assigned-skeleton-col {
  min-height: 9.5rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(
    110deg,
    color-mix(in srgb, var(--border) 35%, transparent) 8%,
    color-mix(in srgb, var(--surface) 80%, transparent) 18%,
    color-mix(in srgb, var(--border) 35%, transparent) 33%
  );
  background-size: 200% 100%;
  animation: mk-assigned-shimmer 1.35s ease-in-out infinite;
}

.mk-assigned-skeleton-col.is-short {
  min-height: 7rem;
}

@keyframes mk-assigned-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.mk-assigned-ports-page .mk-assigned-kpi-row {
  animation: mk-page-in 0.35s ease both;
}

.mk-assigned-ports-page .mk-assigned-kpi {
  min-height: 5.25rem;
  box-shadow: 0 1px 2px rgba(11, 31, 42, 0.04);
}

.mk-assigned-ports-page .mk-assigned-kpi-value {
  font-size: clamp(1.35rem, 3vw, 1.65rem);
  letter-spacing: -0.02em;
}

.mk-assigned-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2, var(--surface));
  box-shadow: 0 1px 2px rgba(11, 31, 42, 0.04);
}

.mk-assigned-notice .btn {
  flex: 0 0 auto;
}

.mk-assigned-notice.is-action {
  border-color: var(--notice-info-border);
  background: var(--notice-info-bg);
}

.mk-assigned-notice.is-info {
  border-color: rgba(13, 110, 110, 0.22);
  background: rgba(13, 110, 110, 0.06);
}

.mk-assigned-notice.is-applying {
  border-color: var(--notice-info-border);
  background: var(--notice-info-bg);
}

.mk-assigned-notice-copy {
  flex: 1 1 14rem;
  min-width: 0;
}

.mk-assigned-notice-copy strong {
  display: block;
  font-size: 0.95rem;
  line-height: 1.35;
}

.mk-assigned-notice-copy p {
  margin: 0.25rem 0 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink-soft, var(--text-muted));
}

.mk-assigned-uplink-board-wrap {
  position: relative;
  margin: 0 -0.15rem;
  padding: 0 0.15rem;
}

.mk-assigned-uplink-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr));
  gap: 0.85rem;
  align-items: start;
}

.mk-assigned-uplink-col {
  display: flex;
  flex-direction: column;
  min-height: 8.5rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface-elevated, var(--surface));
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(11, 31, 42, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.mk-assigned-uplink-col:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(11, 31, 42, 0.08);
}

.mk-assigned-uplink-col.is-up {
  border-top: 3px solid rgba(34, 197, 94, 0.75);
}

.mk-assigned-uplink-col.is-slow {
  border-top: 3px solid rgba(234, 179, 8, 0.85);
  background: rgba(234, 179, 8, 0.04);
}

.mk-assigned-uplink-col.is-off {
  border-top: 3px solid rgba(100, 116, 139, 0.55);
  opacity: 0.88;
}

.mk-assigned-uplink-col.is-offline-col {
  border-top: 3px solid rgba(100, 116, 139, 0.45);
}

.mk-assigned-uplink-col.is-unknown-col {
  border-top: 3px solid rgba(234, 88, 12, 0.55);
}

.mk-assigned-uplink-col[data-uplink-index="0"] {
  border-top-color: rgba(13, 110, 110, 0.75);
}

.mk-assigned-uplink-col[data-uplink-index="1"] {
  border-top-color: rgba(234, 88, 12, 0.75);
}

.mk-assigned-uplink-col[data-uplink-index="2"] {
  border-top-color: rgba(79, 70, 229, 0.75);
}

.mk-assigned-uplink-col-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.55rem 0.75rem;
  padding: 0.78rem 0.85rem 0.62rem;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2, var(--surface)) 92%, transparent), var(--surface-2, var(--surface)));
}

.mk-assigned-uplink-col-head-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.mk-assigned-uplink-status {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 1.55rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mk-assigned-uplink-status.is-up {
  color: #15803d;
  background: color-mix(in srgb, #22c55e 14%, transparent);
  border: 1px solid color-mix(in srgb, #22c55e 28%, transparent);
}

.mk-assigned-uplink-status.is-slow {
  color: #a16207;
  background: color-mix(in srgb, #eab308 16%, transparent);
  border: 1px solid color-mix(in srgb, #eab308 30%, transparent);
}

.mk-assigned-uplink-status.is-off {
  color: #475569;
  background: color-mix(in srgb, #64748b 12%, transparent);
  border: 1px solid color-mix(in srgb, #64748b 24%, transparent);
}

.mk-assigned-uplink-col-title {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--sea, #0d6e6e);
  overflow-wrap: anywhere;
}

.mk-assigned-uplink-col-meta {
  margin: 0.2rem 0 0;
  font-size: 0.74rem;
  color: var(--text-muted, #64748b);
}

.mk-assigned-uplink-col-body {
  display: grid;
  gap: 0.45rem;
  padding: 0.6rem;
  align-content: start;
}

.mk-assigned-uplink-col-body .mk-assigned-client-simple {
  padding: 0.62rem 0.68rem;
}

.mk-assigned-client-simple-uplink {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  margin: 0.15rem 0 0;
  font-size: 0.76rem;
  color: var(--text-muted, #64748b);
}

.mk-assigned-client-simple-uplink-current {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.mk-assigned-client-simple-uplink strong {
  color: var(--sea, #0d6e6e);
  font-weight: 700;
}

.mk-assigned-uplink-switch {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.mk-assigned-uplink-switch-form {
  flex: 1 1 100%;
  min-width: 0;
}

.mk-assigned-uplink-switch-select {
  flex: 1 1 7rem;
  min-width: 0;
  min-height: 1.75rem;
  padding: 0.18rem 0.5rem;
  font-size: 0.72rem;
}

.mk-assigned-uplink-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(13, 110, 110, 0.32);
  background: rgba(13, 110, 110, 0.08);
  color: var(--sea, #0d6e6e);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}

.mk-assigned-uplink-switch-arrow {
  font-weight: 800;
}

.mk-assigned-uplink-switch-btn:hover:not(:disabled) {
  background: rgba(13, 110, 110, 0.16);
  border-color: rgba(13, 110, 110, 0.45);
}

.mk-assigned-uplink-switch-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.mk-assigned-uplink-switch-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.mk-assigned-client-move {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px dashed rgba(13, 110, 110, 0.18);
}

.mk-assigned-client-move-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
}

.mk-assigned-switch-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.mk-assigned-switch-select {
  flex: 1 1 9rem;
  min-width: 0;
  min-height: 2rem;
  border-radius: 999px;
  border: 1px solid rgba(13, 110, 110, 0.28);
  background: var(--surface-elevated, #fff);
  color: inherit;
  padding: 0.28rem 0.65rem;
  font-size: 0.78rem;
}

.mk-assigned-switch-submit {
  flex: 0 0 auto;
}

.mk-assigned-client-simple .mk-assigned-switch-chips {
  margin-top: 0;
  gap: 0.25rem;
}

.mk-assigned-client-simple .mk-assigned-switch-chip {
  padding: 0.22rem 0.5rem;
  font-size: 0.72rem;
}

.mk-assigned-uplink-col-empty {
  margin: 0.35rem 0;
  font-size: 0.8rem;
  color: var(--text-muted, #64748b);
  text-align: center;
}

.mk-assigned-pinned-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.16rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--sea, #0d6e6e);
  background: rgba(13, 110, 110, 0.12);
  border: 1px solid rgba(13, 110, 110, 0.22);
  white-space: nowrap;
}

.mk-assigned-client-row {
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-elevated, var(--surface));
}

.mk-assigned-client-row.is-online {
  border-color: rgba(34, 197, 94, 0.24);
}

.mk-assigned-client-row.is-offline {
  opacity: 0.78;
}

.mk-assigned-client-row-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
}

.mk-assigned-client-row-id {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.mk-assigned-client-row-name {
  font-size: 0.95rem;
}

.mk-assigned-client-row-account {
  font-size: 0.74rem;
  color: var(--text-muted, #64748b);
}

.mk-assigned-client-row-isp {
  margin: 0.4rem 0 0;
  font-size: 0.84rem;
  color: var(--text-muted, #64748b);
}

.mk-assigned-client-row-isp strong {
  color: var(--sea, #0d6e6e);
  font-weight: 700;
}

.mk-assigned-switch-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.mk-assigned-switch-chip {
  appearance: none;
  border: 1px solid rgba(13, 110, 110, 0.28);
  background: rgba(13, 110, 110, 0.08);
  color: var(--sea, #0d6e6e);
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
  min-height: 2rem;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.mk-assigned-switch-chip:active:not(:disabled) {
  transform: scale(0.98);
}

.mk-assigned-switch-chip:hover:not(:disabled) {
  background: rgba(13, 110, 110, 0.14);
  border-color: rgba(13, 110, 110, 0.42);
}

.mk-assigned-switch-chip:disabled {
  opacity: 0.55;
  cursor: wait;
}

.mk-assigned-status-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2, var(--surface));
}

.mk-assigned-status-card.is-action {
  border-color: var(--notice-info-border);
  background: var(--notice-info-bg);
}

.mk-assigned-status-card.is-ok {
  border-color: var(--notice-success-border);
  background: var(--notice-success-bg);
}

.mk-assigned-status-card.is-applying {
  border-color: var(--notice-info-border);
  background: linear-gradient(
    135deg,
    var(--notice-info-bg) 0%,
    var(--surface-2, var(--surface)) 100%
  );
}

.mk-assigned-status-copy {
  flex: 1 1 16rem;
  min-width: 0;
}

.mk-assigned-status-kicker {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
}

.mk-assigned-status-copy strong {
  display: block;
  font-size: 1rem;
  line-height: 1.35;
}

.mk-assigned-status-copy p {
  margin: 0.35rem 0 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink-soft, var(--text-muted));
}

.mk-assigned-status-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.mk-assigned-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  margin-bottom: 0.75rem;
}

.mk-assigned-section-head-copy {
  min-width: 0;
  flex: 1 1 14rem;
}

.mk-assigned-section-title {
  margin: 0;
  font-size: clamp(1rem, 2.2vw, 1.12rem);
  line-height: 1.3;
}

.mk-assigned-section-head .mk-help-note {
  margin: 0.25rem 0 0;
}

.mk-assigned-board-hint {
  display: none;
  margin: 0;
  flex: 0 0 auto;
  font-size: 0.76rem;
  opacity: 0.85;
}

.mk-assigned-ports-page .mk-assigned-section {
  margin-top: 0.15rem;
}

.mk-assigned-flow {
  padding: 0.95rem 1rem 1.05rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 80% at 0% 0%, var(--sea-soft, rgba(13, 110, 110, 0.08)), transparent 55%),
    var(--surface-1, var(--surface));
}

.mk-assigned-ports-page .mk-assigned-port-map {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
}

.mk-assigned-map-label {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
}

.mk-assigned-map-arrow {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sea, #0d6e6e);
  text-align: center;
  padding: 0 0.15rem;
}

.mk-assigned-flow-card {
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-elevated, var(--surface));
}

.mk-assigned-flow-card.is-isp {
  border-color: rgba(13, 110, 110, 0.25);
}

.mk-assigned-flow-card.is-lan {
  border-color: var(--border);
}

.mk-assigned-flow-card.is-slow {
  border-color: var(--notice-error-border);
  opacity: 0.92;
}

.mk-assigned-flow-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.mk-assigned-flow-kind {
  font-size: 0.72rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #64748b);
}

.mk-assigned-flow-status {
  font-size: 0.72rem;
  font-weight: 650;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}

.mk-assigned-flow-card.is-slow .mk-assigned-flow-status {
  background: var(--notice-error-bg);
  color: var(--notice-error-fg);
}

.mk-assigned-flow-name {
  display: block;
  font-size: 1rem;
  line-height: 1.25;
}

.mk-assigned-flow-meta {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted, #64748b);
}

.mk-assigned-flow-clients {
  margin: 0.45rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.mk-assigned-flow-clients li {
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 550;
  color: var(--ink);
  background: color-mix(in srgb, var(--border) 45%, transparent);
}

.mk-assigned-flow-clients-more {
  color: var(--text-muted, #64748b);
  font-weight: 500;
  background: transparent !important;
  padding-left: 0 !important;
}

.mk-assigned-flow-card[data-uplink-index="0"] {
  border-left: 3px solid rgba(13, 110, 110, 0.55);
}

.mk-assigned-flow-card[data-uplink-index="1"] {
  border-left: 3px solid rgba(234, 88, 12, 0.55);
}

.mk-assigned-flow-card[data-uplink-index="2"] {
  border-left: 3px solid rgba(79, 70, 229, 0.55);
}

.mk-assigned-client-uplink {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-top: 0.55rem;
}

.mk-assigned-uplink-label {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
}

.mk-assigned-uplink-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sea, #0d6e6e);
  background: rgba(13, 110, 110, 0.12);
  border: 1px solid rgba(13, 110, 110, 0.22);
}

.mk-assigned-uplink-badge[data-uplink-index="1"] {
  color: #c2410c;
  background: rgba(234, 88, 12, 0.12);
  border-color: rgba(234, 88, 12, 0.25);
}

.mk-assigned-uplink-badge[data-uplink-index="2"] {
  color: #4338ca;
  background: rgba(79, 70, 229, 0.12);
  border-color: rgba(79, 70, 229, 0.25);
}

.mk-assigned-uplink-hint {
  font-size: 0.72rem;
  color: var(--text-muted, #64748b);
}

.mk-assigned-uplink-hint.is-live {
  color: var(--success, #16a34a);
  font-weight: 600;
}

.mk-assigned-path-label {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
  margin-right: 0.25rem;
}

.mk-assigned-clients-section {
  display: grid;
  gap: 0.65rem;
}

.mk-assigned-client-list,
.mk-assigned-uplink-board {
  width: 100%;
}

.mk-assigned-client-simple {
  padding: 0.72rem 0.78rem;
  border-radius: 13px;
  border: 1px solid var(--border);
  background: var(--surface-elevated, var(--surface));
  transition: border-color 0.15s ease, background 0.15s ease;
}

.mk-assigned-client-simple.is-online {
  border-color: rgba(34, 197, 94, 0.28);
  background:
    linear-gradient(180deg, color-mix(in srgb, #22c55e 5%, transparent), transparent 42%),
    var(--surface-elevated, var(--surface));
}

.mk-assigned-client-simple.is-offline {
  opacity: 0.82;
}

.mk-assigned-client-simple-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.mk-assigned-client-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 750;
  color: var(--sea, #0d6e6e);
  background: color-mix(in srgb, var(--sea) 12%, var(--surface-2, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--sea) 22%, var(--border));
}

.mk-assigned-client-simple.is-offline .mk-assigned-client-avatar {
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--border) 35%, transparent);
  border-color: var(--border);
}

.mk-assigned-client-simple-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.mk-assigned-client-simple-name {
  display: block;
  font-size: 0.92rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.mk-assigned-client-simple-phone {
  margin: 0.12rem 0 0;
  font-size: 0.78rem;
  color: var(--text-muted, #64748b);
  font-variant-numeric: tabular-nums;
}

.mk-assigned-client-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--border) 35%, transparent);
}

.mk-assigned-client-simple.is-online .mk-assigned-client-status {
  color: #15803d;
  background: color-mix(in srgb, #22c55e 12%, transparent);
}

.mk-assigned-client-status-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: currentColor;
}

.mk-assigned-client-simple.is-online .mk-assigned-client-status-dot {
  box-shadow: 0 0 0 0 color-mix(in srgb, #22c55e 45%, transparent);
  animation: mk-live-pulse 1.6s ease-out infinite;
}

.mk-assigned-client-status-text {
  display: none;
}

.mk-assigned-client-simple-account {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  color: var(--text-muted, #64748b);
}

.mk-assigned-client-simple-path {
  margin: 0.45rem 0 0;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--sea, #0d6e6e);
}

.mk-assigned-client-simple-speed {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted, #64748b);
  font-variant-numeric: tabular-nums;
}

.mk-assigned-isp-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px dashed rgba(100, 116, 139, 0.22);
}

.mk-assigned-isp-switch-label {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #64748b);
}

.mk-assigned-isp-switch-select {
  min-width: 7.5rem;
  max-width: 100%;
  padding: 0.28rem 0.45rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-elevated, var(--surface));
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text, #0f172a);
}

.mk-assigned-isp-switch-btn {
  white-space: nowrap;
}

.mk-assigned-uplink-badge[data-uplink-pinned="1"] {
  box-shadow: inset 0 0 0 1px rgba(13, 110, 110, 0.35);
}

.mk-assigned-empty {
  text-align: center;
  padding: 1.5rem 0.85rem;
  border-radius: 14px;
  border: 1px dashed var(--border);
  background: var(--surface-2);
}

@media (min-width: 721px) {
  .mk-assigned-board-hint {
    display: none;
  }
}

@media (max-width: 1024px) and (min-width: 721px) {
  .mk-assigned-uplink-board {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr));
  }
}

@media (max-width: 900px) {
  .mk-assigned-uplink-board-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    padding-bottom: 0.35rem;
  }

  .mk-assigned-uplink-board {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    min-width: min(100%, 100%);
    width: max-content;
    max-width: none;
    padding-right: 0.35rem;
  }

  .mk-assigned-uplink-col {
    flex: 0 0 min(82vw, 18.5rem);
    scroll-snap-align: start;
  }

  .mk-assigned-uplink-col:hover {
    transform: none;
  }
}

@media (max-width: 900px) {
  .mk-assigned-board-hint {
    display: block;
    width: 100%;
  }
}

@media (max-width: 720px) {
  .mk-assigned-ports-page .mk-assigned-port-map {
    grid-template-columns: 1fr;
  }

  .mk-assigned-map-arrow {
    transform: rotate(90deg);
    padding: 0.15rem 0;
  }

  .mk-assigned-loading-skeleton {
    grid-template-columns: 1fr;
  }

  .mk-assigned-ports-page .mk-assigned-kpi-row {
    grid-template-columns: 1fr;
  }

  .mk-assigned-notice {
    flex-direction: column;
    align-items: stretch;
  }

  .mk-assigned-notice .btn {
    width: 100%;
    justify-content: center;
  }

  .mk-assigned-uplink-col-head {
    flex-wrap: wrap;
  }

  .mk-assigned-hero-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .mk-assigned-uplink-switch-form {
    display: grid;
    grid-template-columns: 1fr auto;
    width: 100%;
  }

  .mk-assigned-uplink-switch:not(.mk-assigned-uplink-switch-form) {
    display: grid;
    width: 100%;
  }

  .mk-assigned-uplink-switch-btn {
    width: 100%;
    justify-content: center;
    min-height: 2rem;
  }
}

@media (max-width: 420px) {
  .mk-assigned-uplink-col {
    flex-basis: min(88vw, 18.5rem);
  }

  .mk-assigned-client-simple-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 0.6rem;
    row-gap: 0.2rem;
  }

  .mk-assigned-client-avatar {
    grid-row: 1 / span 2;
  }

  .mk-assigned-client-status {
    grid-column: 2;
    justify-self: start;
    margin-left: 0;
  }

  .mk-assigned-client-status-text {
    display: inline;
  }
}

.mk-goal-select-field select {
  min-height: 2.75rem;
  font-size: 1rem;
  font-weight: 650;
}

.mk-ports-flow {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 0.95fr) auto minmax(0, 1.1fr);
  align-items: stretch;
  gap: 0.55rem 0.35rem;
}

.mk-flow-stage {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.85rem 0.9rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.mk-flow-stage.is-internet {
  border-color: rgba(14, 124, 134, 0.35);
}

.mk-flow-stage.is-router {
  border-color: rgba(12, 122, 132, 0.45);
  background:
    linear-gradient(160deg, var(--sea-soft), transparent 60%),
    var(--surface);
}

.mk-flow-stage.is-customers {
  border-color: rgba(31, 138, 91, 0.35);
}

.mk-flow-stage-label {
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.mk-flow-stage-body {
  display: grid;
  gap: 0.55rem;
  min-height: 3.2rem;
  align-content: start;
}

.mk-flow-empty {
  margin: 0;
  font-size: 0.84rem;
  color: var(--ink-soft);
  line-height: 1.35;
}

.mk-flow-group {
  display: grid;
  gap: 0.4rem;
}

.mk-flow-group-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-soft);
}

.mk-flow-group-label.is-backup {
  color: #b45309;
}

.mk-flow-group-label.is-working {
  color: var(--success);
}

.mk-flow-group-label.is-failed {
  color: var(--danger);
}

.mk-flow-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.mk-flow-chip-row.is-dashed .mk-flow-chip {
  border-style: dashed;
}

.mk-flow-chip-row.is-active-row .mk-flow-chip.is-active-path {
  box-shadow: 0 0 0 2px var(--success-soft), 0 8px 18px rgba(20, 92, 60, 0.12);
}

.mk-flow-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  min-height: 2rem;
  padding: 0.3rem 0.65rem 0.3rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  cursor: pointer;
  text-align: left;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.mk-flow-chip:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  box-shadow: 0 8px 18px rgba(11, 31, 42, 0.08);
}

.mk-flow-chip-led {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #94a3b8;
  flex: 0 0 auto;
}

.mk-flow-chip.is-up .mk-flow-chip-led {
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success-soft);
}

.mk-flow-chip.is-down .mk-flow-chip-led {
  background: #94a3b8;
}

.mk-flow-chip.is-disabled .mk-flow-chip-led {
  background: var(--danger);
}

.mk-flow-chip.is-missing {
  opacity: 0.7;
}

.mk-flow-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mk-flow-chip-extra {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
}

.mk-flow-chip.role-wan,
.mk-flow-chip.role-wan.is-primary {
  border-color: rgba(14, 124, 134, 0.45);
  background: var(--sea-soft);
  color: var(--chip-sea-fg);
}

.mk-flow-chip.role-lan {
  border-color: rgba(31, 138, 91, 0.4);
  background: var(--success-soft);
  color: var(--success);
}

.mk-flow-chip.role-bond,
.mk-flow-chip.role-wan_backup {
  border-color: rgba(232, 163, 23, 0.45);
  background: var(--signal-soft);
  color: var(--chip-signal-fg);
}

.mk-flow-chip.role-unused {
  background: var(--surface-3);
  color: var(--ink-soft);
}

.mk-flow-chip.is-active-path {
  border-style: solid;
  border-color: rgba(31, 138, 91, 0.55);
  background: var(--success-soft);
  color: var(--success);
}

.mk-flow-chip.is-active-path .mk-flow-chip-extra {
  color: var(--success);
}

.mk-flow-chip.is-active-path .mk-flow-chip-led {
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success-soft);
}

.mk-flow-chip.is-failed {
  opacity: 0.78;
  border-style: dashed;
  border-color: rgba(192, 57, 43, 0.4);
  background: var(--danger-soft);
  color: var(--danger);
}

.mk-flow-chip.is-failed .mk-flow-chip-extra {
  color: var(--danger);
}

.mk-flow-chip.is-standby {
  opacity: 0.85;
}

.mk-flow-connector.is-on-backup .mk-flow-connector-line {
  background: linear-gradient(90deg, rgba(31, 138, 91, 0.3), rgba(31, 138, 91, 0.85));
}

.mk-flow-connector.is-on-backup .mk-flow-connector-pulse {
  background: var(--success);
}

.mk-flow-merge {
  display: grid;
  gap: 0.25rem;
  justify-items: start;
  margin-top: 0.15rem;
}

.mk-flow-merge-line {
  width: 100%;
  max-width: 8rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(232, 163, 23, 0.15), rgba(232, 163, 23, 0.85));
}

.mk-flow-merge-label {
  font-size: 0.75rem;
  font-weight: 750;
  color: var(--chip-signal-fg);
}

.mk-flow-router-card {
  display: grid;
  gap: 0.2rem;
  padding: 0.35rem 0.15rem;
}

.mk-flow-router-card.is-live .mk-flow-router-health {
  color: var(--sea);
}

.mk-flow-router-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
}

.mk-flow-router-mode,
.mk-flow-router-health {
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--ink-soft);
}

.mk-flow-parked {
  display: grid;
  gap: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px dashed var(--border);
}

.mk-flow-connector {
  position: relative;
  align-self: center;
  width: 1.6rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
}

.mk-flow-connector-line {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(12, 122, 132, 0.2), rgba(12, 122, 132, 0.55));
}

.mk-flow-connector.is-dashed .mk-flow-connector-line {
  background: repeating-linear-gradient(
    90deg,
    rgba(232, 163, 23, 0.75) 0 6px,
    transparent 6px 10px
  );
}

.mk-flow-connector.is-bond .mk-flow-connector-line {
  height: 5px;
  background: linear-gradient(90deg, rgba(232, 163, 23, 0.35), rgba(12, 122, 132, 0.7));
}

.mk-flow-connector-pulse {
  position: absolute;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--sea);
  opacity: 0;
  transform: translateX(-0.55rem);
}

.mk-flow-connector.is-live .mk-flow-connector-pulse {
  opacity: 1;
  animation: mk-flow-pulse 1.4s ease-in-out infinite;
}

.mk-flow-connector[data-flow-connector="lan"] .mk-flow-connector-line {
  background: linear-gradient(90deg, rgba(31, 138, 91, 0.25), rgba(31, 138, 91, 0.7));
}

.mk-flow-connector[data-flow-connector="lan"] .mk-flow-connector-pulse {
  background: var(--success);
}

@keyframes mk-flow-pulse {
  0% { transform: translateX(-0.65rem); opacity: 0.15; }
  35% { opacity: 1; }
  100% { transform: translateX(0.65rem); opacity: 0.1; }
}

.mk-ports-face-wrap {
  display: grid;
  gap: 0.55rem;
  padding-top: 0.15rem;
  border-top: 1px solid var(--border);
}

.mk-ports-face-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.85rem;
}

.mk-ports-face-label .mk-help-note {
  margin: 0;
}

.mk-ports-face {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.65rem;
  padding: 0.75rem 0.85rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(11, 31, 42, 0.04), transparent 40%),
    var(--surface);
}

.mk-port-jack {
  display: grid;
  justify-items: center;
  gap: 0.28rem;
  width: 4.4rem;
  padding: 0.35rem 0.2rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 10px;
  transition: transform 0.15s ease, background 0.15s ease;
}

.mk-port-jack:hover,
.mk-port-jack:focus-visible {
  transform: translateY(-2px);
  background: var(--surface-2);
  outline: none;
}

.mk-port-jack-shell {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2rem;
  border-radius: 0.35rem 0.35rem 0.55rem 0.55rem;
  border: 1.5px solid rgba(11, 31, 42, 0.35);
  background: linear-gradient(180deg, #1f2a33 0%, #0f171d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.mk-port-jack-slot {
  width: 1.35rem;
  height: 0.85rem;
  border-radius: 0.15rem;
  background: #05090c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.mk-port-jack-led {
  position: absolute;
  top: 0.22rem;
  right: 0.22rem;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: #64748b;
}

.mk-port-jack.is-up .mk-port-jack-led {
  background: #34d399;
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.85);
}

.mk-port-jack.is-down .mk-port-jack-led {
  background: #94a3b8;
}

.mk-port-jack.is-disabled .mk-port-jack-led {
  background: #f87171;
  box-shadow: 0 0 6px rgba(248, 113, 113, 0.7);
}

.mk-port-jack.role-wan .mk-port-jack-shell {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 2px rgba(14, 124, 134, 0.35);
}

.mk-port-jack.role-lan .mk-port-jack-shell {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 2px rgba(31, 138, 91, 0.35);
}

.mk-port-jack.role-bond .mk-port-jack-shell,
.mk-port-jack.role-wan_backup .mk-port-jack-shell {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 2px rgba(232, 163, 23, 0.4);
}

.mk-port-jack-name {
  font-size: 0.72rem;
  font-weight: 750;
  color: var(--ink);
  text-align: center;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.mk-port-jack-role {
  font-size: 0.64rem;
  font-weight: 650;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mk-port-card.is-focus {
  border-color: var(--sea);
  box-shadow: 0 0 0 3px var(--sea-soft), 0 12px 28px rgba(11, 31, 42, 0.1);
}

@media (max-width: 900px) {
  .mk-ports-flow {
    grid-template-columns: 1fr;
  }

  .mk-flow-connector {
    width: 100%;
    height: 1.35rem;
  }

  .mk-flow-connector-line {
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, rgba(12, 122, 132, 0.2), rgba(12, 122, 132, 0.55));
  }

  .mk-flow-connector.is-dashed .mk-flow-connector-line {
    background: repeating-linear-gradient(
      180deg,
      rgba(232, 163, 23, 0.75) 0 6px,
      transparent 6px 10px
    );
  }

  .mk-flow-connector.is-bond .mk-flow-connector-line {
    width: 5px;
    height: 100%;
  }

  .mk-flow-connector[data-flow-connector="lan"] .mk-flow-connector-line {
    background: linear-gradient(180deg, rgba(31, 138, 91, 0.25), rgba(31, 138, 91, 0.7));
  }

  .mk-flow-connector.is-live .mk-flow-connector-pulse {
    animation-name: mk-flow-pulse-vert;
  }

  @keyframes mk-flow-pulse-vert {
    0% { transform: translateY(-0.45rem); opacity: 0.15; }
    35% { opacity: 1; }
    100% { transform: translateY(0.45rem); opacity: 0.1; }
  }
}

.mk-uplink-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background:
    linear-gradient(90deg, var(--sea-soft), transparent 55%),
    var(--surface-2);
}

.mk-uplink-strip-compact {
  flex: 1 1 16rem;
  max-width: 28rem;
  padding: 0.7rem 0.85rem;
  margin-left: auto;
}

.mk-uplink-strip-copy {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.mk-uplink-strip-copy strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
}

.mk-uplink-strip-meta {
  font-size: 0.84rem;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.mk-uplink-health {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.mk-uplink-health.is-ok {
  color: var(--sea);
}

.mk-uplink-health.is-warn {
  color: #b45309;
}

.mk-loading,
.mk-empty {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.25rem 1rem;
  border-radius: 14px;
  border: 1px dashed var(--border-strong);
  background: var(--surface-2);
}

.mk-loading-pulse {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 3px solid var(--sea-soft);
  border-top-color: var(--sea);
  animation: mk-spin 0.8s linear infinite;
  flex: 0 0 auto;
}

@keyframes mk-spin {
  to { transform: rotate(360deg); }
}

.mk-loading-title {
  margin: 0 0 0.2rem;
  font-weight: 700;
  color: var(--ink);
}

.mk-ports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 0.75rem;
}

.mk-port-card {
  display: grid;
  gap: 0.8rem;
  padding: 1rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  animation: mk-page-in 0.4s ease both;
}

.mk-port-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: 0 12px 28px rgba(11, 31, 42, 0.08);
}

.mk-port-card.is-up {
  box-shadow: inset 3px 0 0 var(--success);
}

.mk-port-card.is-down {
  box-shadow: inset 3px 0 0 rgba(148, 163, 184, 0.7);
}

.mk-port-card.is-disabled {
  opacity: 0.78;
  box-shadow: inset 3px 0 0 var(--danger);
}

.mk-port-card.role-wan {
  border-color: rgba(14, 124, 134, 0.4);
}

.mk-port-card.role-lan {
  border-color: rgba(31, 138, 91, 0.35);
}

.mk-port-card.role-wan_backup,
.mk-port-card.role-bond {
  border-color: rgba(232, 163, 23, 0.4);
}

.mk-port-card-head,
.mk-port-card-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
}

.mk-port-card-foot {
  align-items: center;
  padding-top: 0.15rem;
  border-top: 1px solid var(--border);
}

.mk-port-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
}

.mk-port-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  margin-top: 0.35rem;
}

.mk-port-type,
.mk-port-bridge,
.mk-port-comment {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-weight: 600;
}

.mk-port-uplink {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--chip-sea-fg);
  background: var(--chip-sea-bg);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
}

.mk-port-auto {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--chip-ok-fg, #0d5c2e);
  background: var(--chip-ok-bg, #d8f5e4);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
}

.mk-port-card.is-auto-managed .mk-role-picks.is-auto {
  opacity: 0.88;
}

.mk-port-auto-note {
  margin: 0 0 0.35rem;
}

.mk-port-inet {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
}

.mk-port-inet.is-ok {
  color: var(--chip-ok-fg, #0d5c2e);
  background: var(--chip-ok-bg, #d8f5e4);
}

.mk-port-inet.is-warn {
  color: var(--notice-warn-fg, #7a4d00);
  background: var(--notice-warn-bg, #fff4d6);
}

.mk-port-inet.is-block {
  color: var(--notice-error-fg);
  background: var(--notice-error-bg, #fde8e8);
}

.mk-port-role-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-soft);
}

.mk-role-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.mk-role-form {
  margin: 0;
}

.mk-role-pick {
  min-height: 2.15rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mk-role-pick:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--surface-3);
}

.mk-role-pick.is-active.role-wan {
  background: var(--sea-soft);
  border-color: transparent;
  color: var(--chip-sea-fg);
}

.mk-role-pick.is-active.role-lan {
  background: var(--success-soft);
  border-color: transparent;
  color: var(--success);
}

.mk-role-pick.is-active.role-unused,
.mk-role-pick.is-active.role-none {
  background: var(--surface-3);
  color: var(--ink-soft);
}

.mk-role-pick.is-active.role-wan_backup,
.mk-role-pick.is-active.role-bond {
  background: var(--signal-soft);
  border-color: transparent;
  color: var(--chip-signal-fg);
}

.mk-role-pick:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.mk-port-more {
  margin: 0;
}

.mk-port-more > summary {
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--sea);
  list-style: none;
}

.mk-port-more > summary::-webkit-details-marker {
  display: none;
}

.mk-port-more[open] > summary {
  margin-bottom: 0.45rem;
}

.mk-uplink-config {
  margin-top: 0.35rem;
  padding: 1.1rem 1rem 1.15rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(12, 122, 132, 0.06), transparent 42%),
    var(--surface-2);
  display: grid;
  gap: 1rem;
}

.mk-uplink-config-head {
  display: grid;
  gap: 0.25rem;
}

.mk-uplink-config-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--ink);
}

.mk-balance-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.15rem;
}

.mk-balance-weights-details {
  margin-top: 0.35rem;
}

.mk-balance-weights-details > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
}

.mk-balance-weights-details > summary::-webkit-details-marker {
  display: none;
}

.mk-balance-weights-details > summary::before {
  content: "?";
  font-size: 0.85rem;
  color: var(--ink-muted, #667085);
  transition: transform 0.15s ease;
}

.mk-balance-weights-details[open] > summary::before {
  transform: rotate(90deg);
}

.mk-balance-weights-details[open] > summary {
  margin-bottom: 0.65rem;
}

.mk-balance-weights {
  display: grid;
  gap: 0.55rem;
}

.mk-balance-weight-row.is-preferred {
  padding: 0.35rem 0.45rem;
  border-radius: 10px;
  background: var(--sea-soft);
}

.mk-help-note.is-suggest {
  color: var(--chip-signal-fg, #5a4a00);
  background: var(--signal-soft, #fff8e6);
  padding: 0.35rem 0.5rem;
  border-radius: 0.35rem;
}

.mk-port-card.is-pending-setup {
  outline: 1px dashed var(--notice-warn-fg, #9a6700);
  outline-offset: 2px;
}

.mk-help-note.is-ok {
  color: var(--sea);
  font-weight: 650;
}

.mk-balance-weight-row {
  display: grid;
  grid-template-columns: minmax(4.5rem, 7rem) minmax(5rem, 8rem) auto;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.mk-balance-weight-port {
  font-weight: 700;
  color: var(--ink);
}

.mk-balance-weight-row input {
  width: 100%;
  min-height: 2.4rem;
  padding: 0.4rem 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--ink);
  font: inherit;
  font-weight: 650;
}

.mk-goal-select-field {
  max-width: 36rem;
}

.mk-goal-select-field select {
  min-height: 2.75rem;
  font-weight: 600;
}

.mk-goal-select-hint {
  margin: -0.35rem 0 0;
}

.mk-uplink-setup-status {
  margin: 0.75rem 0 0;
}

.mk-uplink-recommendation {
  margin: 0.75rem 0 0;
  display: grid;
  gap: 0.75rem;
}

.mk-uplink-recommendation-copy strong {
  display: block;
  margin-bottom: 0.25rem;
}

.mk-uplink-recommendation-copy p {
  margin: 0;
}

.mk-uplink-recommendation-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.mk-uplink-candidate-list {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.mk-uplink-candidate-list[hidden] {
  display: none;
}

.mk-uplink-candidate {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.45rem;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  background: color-mix(in srgb, currentColor 6%, transparent);
  font-size: 0.92rem;
}

.mk-uplink-candidate.is-ok {
  color: #1f9d63;
}

.mk-uplink-candidate.is-wait {
  color: #b7791f;
}

.mk-uplink-candidate.is-down {
  color: #9b2c2c;
}

.mk-uplink-candidate-role {
  font-weight: 600;
}

.mk-uplink-candidate-status {
  opacity: 0.9;
  font-size: 0.85em;
}

.mk-banner.mk-uplink-recommendation.is-ok {
  border-color: color-mix(in srgb, #1f9d63 35%, transparent);
  background: color-mix(in srgb, #1f9d63 12%, transparent);
}

.mk-banner.mk-uplink-recommendation.is-warn {
  border-color: color-mix(in srgb, #b7791f 35%, transparent);
  background: color-mix(in srgb, #b7791f 12%, transparent);
}

.mk-uplink-setup-status strong {
  display: block;
  margin-bottom: 0.25rem;
}

.mk-uplink-setup-status p {
  margin: 0;
}

.mk-uplink-setup-status ul {
  margin: 0.45rem 0 0;
  padding-left: 1.15rem;
}

.mk-uplink-setup-status ul[hidden] {
  display: none;
}

.mk-banner.mk-uplink-setup-status.is-ok {
  border-color: color-mix(in srgb, #1f9d63 35%, transparent);
  background: color-mix(in srgb, #1f9d63 12%, transparent);
}

.mk-goal-picks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.mk-goal-card {
  display: grid;
  gap: 0.35rem;
  align-content: start;
  text-align: left;
  margin: 0;
  padding: 0.9rem 0.95rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease,
    background 0.18s ease;
}

.mk-goal-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(11, 31, 42, 0.07);
}

.mk-goal-card.is-selected {
  border-color: rgba(12, 122, 132, 0.55);
  background: linear-gradient(180deg, var(--sea-soft), var(--surface));
  box-shadow: 0 0 0 1px rgba(12, 122, 132, 0.2);
}

.mk-goal-card-kicker {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.mk-goal-card.is-selected .mk-goal-card-kicker {
  color: var(--sea);
}

.mk-goal-card-title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
}

.mk-goal-card-copy {
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.mk-goal-panel {
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  animation: mk-page-in 0.35s ease both;
}

.mk-goal-panel[hidden] {
  display: none !important;
}

.mk-goal-panel-body {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
}

.mk-goal-steps {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.35rem;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.45;
}

.mk-goal-steps li::marker {
  color: var(--sea);
  font-weight: 700;
}

.mk-goal-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.mk-goal-fields > summary {
  grid-column: 1 / -1;
  cursor: pointer;
  list-style: none;
}

.mk-goal-fields > summary::-webkit-details-marker {
  display: none;
}

.mk-goal-fields-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  grid-column: 1 / -1;
}

.mk-goal-role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.mk-goal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.9rem;
}

.mk-ports-assign {
  display: grid;
  gap: 0.85rem;
}

.mk-ports-assign-head {
  display: grid;
  gap: 0.2rem;
}

.mk-ports-assign-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink);
}

.mk-details > summary {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  cursor: pointer;
  list-style: none;
  padding-bottom: 0.35rem;
}

.mk-details > summary::-webkit-details-marker {
  display: none;
}

.mk-details-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
}

.mk-details-sub {
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.mk-details[open] > summary {
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.85rem;
}

.mk-uplink-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.mk-uplink-panel-balance {
  grid-column: 1 / -1;
}

.mk-chip.is-balance {
  background: var(--success-soft);
  color: var(--success);
}

.mk-flow-connector.is-balance .mk-flow-connector-line {
  height: 5px;
  background: linear-gradient(
    90deg,
    rgba(31, 138, 91, 0.35),
    rgba(12, 122, 132, 0.75),
    rgba(31, 138, 91, 0.35)
  );
}

.mk-flow-connector.is-balance .mk-flow-connector-pulse {
  background: var(--success);
}

.mk-flow-group.is-balance .mk-flow-group-label.is-working {
  color: var(--success);
}

.mk-flow-share-bars {
  display: flex;
  width: 100%;
  height: 0.45rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-3);
  gap: 2px;
}

.mk-flow-share-seg {
  min-width: 0.35rem;
  background: linear-gradient(90deg, var(--sea), var(--success));
  opacity: 0.9;
  transition: flex 0.45s ease;
}

.mk-flow-share-seg:nth-child(2) {
  background: linear-gradient(90deg, var(--success), #34d399);
}

.mk-flow-share-seg:nth-child(3) {
  background: linear-gradient(90deg, var(--chip-signal-fg), var(--signal-soft));
}

.mk-flow-chip .mk-flow-chip-extra {
  font-variant-numeric: tabular-nums;
}

.mk-uplink-panel {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 1rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.mk-uplink-panel h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
}

.mk-role-block {
  display: grid;
  gap: 0.4rem;
}

.mk-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mk-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.8rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--chip-sea-bg);
  color: var(--chip-sea-fg);
}

.mk-chip-sub {
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.85;
}

.mk-chip.is-primary {
  background: var(--sea-soft);
}

.mk-chip.is-backup {
  background: var(--signal-soft);
  color: var(--chip-signal-fg);
}

.mk-field {
  display: grid;
  gap: 0.35rem;
  margin: 0;
}

.mk-field > span {
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--ink-soft);
}

.mk-field input,
.mk-field select,
.mk-clean-form .input,
.mk-clean-form input[type="text"] {
  width: 100%;
  min-height: 2.5rem;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--ink);
  font: inherit;
}

.mk-field input:focus,
.mk-field select:focus,
.mk-clean-form .input:focus,
.mk-clean-form input[type="text"]:focus {
  outline: 2px solid var(--sea-soft);
  border-color: var(--sea);
}

.mk-ports-error {
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.mk-ports-error-copy {
  flex: 1;
  min-width: 0;
}

.mk-ports-api-recovery {
  margin-top: 0.65rem;
}

.mk-form-banner {
  margin: 0;
}

@media (max-width: 960px) {
  .mk-stat-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mk-uplink-config-grid,
  .mk-goal-picks,
  .mk-goal-fields,
  .mk-goal-role-grid {
    grid-template-columns: 1fr;
  }

  .mk-uplink-strip-compact {
    max-width: none;
    margin-left: 0;
    width: 100%;
  }

  .mk-ports-steps {
    top: 0.4rem;
  }
}

@media (max-width: 900px) {
  .mk-assigned-client-cards:not([hidden]) {
    display: grid;
  }

  .mk-assigned-all-table-wrap,
  .mk-assigned-group-table {
    display: none !important;
  }

  .mk-assigned-clients-table thead {
    display: none;
  }

  .mk-assigned-clients-table,
  .mk-assigned-clients-table tbody,
  .mk-assigned-clients-table tr,
  .mk-assigned-clients-table td {
    display: block;
    width: 100%;
  }

  .mk-assigned-clients-table tr {
    margin-bottom: 0.75rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-2);
  }

  .mk-assigned-clients-table td {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
  }

  .mk-assigned-clients-table td:last-child {
    border-bottom: none;
  }

  .mk-assigned-clients-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  .mk-assigned-clients-table td .mk-assigned-num {
    white-space: normal;
    text-align: right;
  }
}

@media (max-width: 720px) {
  .mk-page-hero,
  .mk-ports-hero {
    flex-direction: column;
  }

  .mk-page-hero-status,
  .mk-ports-hero-actions {
    width: 100%;
    justify-items: start;
    justify-content: stretch;
  }

  .mk-ports-hero-actions .btn,
  .mk-inline-form,
  .mk-inline-form .btn {
    flex: 1 1 auto;
  }

  .mk-inline-form .btn,
  .mk-ports-hero-actions > .btn {
    width: 100%;
  }

  .mk-ports-hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .mk-ports-steps {
    grid-template-columns: 1fr;
    position: static;
  }

  .mk-ports-step-copy em {
    white-space: normal;
  }

  .mk-mode-grid,
  .mk-form-grid,
  .mk-stat-grid-3 {
    grid-template-columns: 1fr;
  }

  .mk-page-hero-meta {
    text-align: left;
  }

  .mk-surface {
    padding: 1rem;
  }

  .mk-actions-row {
    flex-direction: column;
    align-items: stretch;
  }

  .mk-action-btn {
    width: 100%;
  }

  .mk-assigned-client-meta {
    grid-template-columns: 1fr 1fr;
  }

  .mk-balance-weight-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .mk-ports-map,
  .mk-uplink-config,
  .mk-ports-assign,
  .mk-assigned-section {
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  .mk-goal-actions {
    display: grid;
    gap: 0.45rem;
  }

  .mk-goal-actions .btn {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .mk-ports-hero-actions {
    grid-template-columns: 1fr;
  }

  .mk-stat-grid-4 {
    grid-template-columns: 1fr;
  }

  .mk-role-pick {
    flex: 1 1 calc(50% - 0.4rem);
    text-align: center;
  }

  .mk-assigned-kpi-row {
    grid-template-columns: 1fr 1fr;
  }

  .mk-assigned-client-meta {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mk-page,
  .mk-port-card,
  .mk-banner,
  .mk-status-pill.is-on .mk-status-dot,
  .mk-loading-pulse,
  .mk-stat,
  .mk-mode-card,
  .mk-assigned-skeleton-col,
  .mk-assigned-client-simple.is-online .mk-assigned-client-status-dot,
  .mk-assigned-uplink-col {
    animation: none !important;
    transition: none !important;
  }
}

.pkg-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  max-width: 28rem;
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: #fff;
  z-index: 9999;
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.pkg-toast-show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.pkg-toast-success { background: #16a34a; }
.pkg-toast-error   { background: #dc2626; }
.pkg-toast-info    { background: #2563eb; }

/* My account ? company profile, packages, Daraja */
.account-page-shell {
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.account-page-shell--wide {
  max-width: min(1120px, 100%);
}

.account-page-intro {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.account-page-kicker {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--sea);
}

.account-page-shell > .client-page-lead,
.account-page-intro .client-page-lead {
  text-align: left;
  margin: 0;
  max-width: 40rem;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.account-page {
  display: grid;
  gap: 1.15rem;
  width: 100%;
}

.account-page > .account-card,
.account-page-form > .account-card,
.account-page > .account-status-card {
  animation: uiRise 0.45s var(--ease-out) both;
}

.account-page > .account-card:nth-child(1),
.account-page-form > .account-card:nth-child(1) { animation-delay: 0.04s; }
.account-page > .account-card:nth-child(2),
.account-page-form > .account-card:nth-child(2) { animation-delay: 0.08s; }
.account-page > .account-card:nth-child(3),
.account-page-form > .account-card:nth-child(3) { animation-delay: 0.12s; }

.account-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 1.35rem 1.4rem;
  background:
    radial-gradient(ellipse 70% 80% at 0% 0%, color-mix(in srgb, var(--sea) 18%, transparent), transparent 55%),
    radial-gradient(ellipse 50% 60% at 100% 100%, color-mix(in srgb, var(--signal) 12%, transparent), transparent 50%),
    var(--surface-solid, var(--surface));
}

.account-hero-main {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  min-width: 0;
}

.account-hero-avatar,
.account-hero-avatar-fallback {
  width: 84px;
  height: 84px;
  border-radius: 22px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--sea) 22%, transparent);
}

.account-hero-avatar-fallback {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--sea-deep);
  background: color-mix(in srgb, var(--sea) 14%, var(--surface-solid));
  border: 1px solid color-mix(in srgb, var(--sea) 28%, transparent);
}

.account-hero-copy {
  min-width: 0;
}

.account-hero-copy h2 {
  margin: 0.2rem 0 0.55rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.65rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  word-break: break-word;
}

.account-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.account-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--surface-solid) 80%, var(--sea) 8%);
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.2;
}

.account-chip--sea {
  border-color: color-mix(in srgb, var(--sea) 30%, transparent);
  background: var(--chip-sea-bg);
  color: var(--chip-sea-fg);
}

.account-hero-aside {
  min-width: min(220px, 100%);
  padding: 0.95rem 1.05rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--sea) 22%, transparent);
  background: color-mix(in srgb, var(--sea) 8%, var(--surface-solid));
}

.account-hero-aside-label {
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.account-hero-aside strong {
  display: block;
  font-size: 1.02rem;
  line-height: 1.3;
  word-break: break-word;
}

.account-page-form {
  display: grid;
  gap: 1.15rem;
}

.account-page-shell--edit {
  max-width: min(760px, 100%);
}

.account-page-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}

.account-hero--compact {
  padding: 1.05rem 1.2rem;
}

.account-hero-title-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.account-edit-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--signal) 34%, transparent);
  background: color-mix(in srgb, var(--signal) 12%, var(--surface-solid));
  color: color-mix(in srgb, var(--signal) 78%, var(--ink));
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.account-card--credentials {
  border-color: color-mix(in srgb, var(--sea) 26%, var(--border-strong));
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, color-mix(in srgb, var(--sea) 10%, transparent), transparent 58%),
    var(--surface-solid, var(--surface));
}

.account-card--company {
  border-color: color-mix(in srgb, var(--signal) 20%, var(--border-strong));
  background:
    radial-gradient(ellipse 70% 55% at 100% 0%, color-mix(in srgb, var(--signal) 8%, transparent), transparent 55%),
    var(--surface-solid, var(--surface));
}

.account-card-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  margin-top: 0.05rem;
  border-radius: 11px;
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--surface-3) 70%, transparent);
  color: var(--ink-soft);
}

.account-card-icon--login {
  border-color: color-mix(in srgb, var(--sea) 28%, transparent);
  background: color-mix(in srgb, var(--sea) 12%, var(--surface-solid));
  color: var(--sea-deep);
}

.account-card-icon--company {
  border-color: color-mix(in srgb, var(--signal) 26%, transparent);
  background: color-mix(in srgb, var(--signal) 10%, var(--surface-solid));
  color: color-mix(in srgb, var(--signal) 72%, var(--ink));
}

.account-form-blocks {
  display: grid;
  gap: 0.85rem;
}

.account-form-block {
  display: grid;
  gap: 0.85rem;
  padding: 1rem 1.05rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-3) 45%, transparent);
}

.account-form-block-title {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.account-form-block-lead {
  margin: -0.35rem 0 0;
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.45;
}

.account-form-block-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1rem;
}

.account-form-block-grid .field-span-2 {
  grid-column: 1 / -1;
}

.account-form-block--signin {
  border-color: color-mix(in srgb, var(--sea) 22%, var(--border));
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--sea) 7%, var(--surface-solid)), color-mix(in srgb, var(--surface-3) 50%, transparent));
}

.account-form-block--security {
  border-color: color-mix(in srgb, var(--signal) 18%, var(--border));
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--signal) 5%, var(--surface-solid)), color-mix(in srgb, var(--surface-3) 50%, transparent));
}

.account-code-field {
  display: grid;
  gap: 0.45rem;
  justify-items: center;
  text-align: center;
}

.account-code-field > label {
  width: 100%;
  text-align: left;
}

.account-code-field .field-hint,
.account-code-field .field-error {
  width: 100%;
  text-align: left;
}

.account-code-input-wrap {
  width: min(100%, 15rem);
}

.account-page-form .account-code-input-wrap .join-code-input {
  width: 100%;
  min-height: 3.1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--sea) 35%, var(--border-strong));
  background: var(--surface-solid, #fff);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent);
  font-size: 1.35rem;
  letter-spacing: 0.42em;
}

.account-page-form .account-form-block--security .join-code-input {
  letter-spacing: 0.28em;
  font-size: 1.05rem;
  text-align: center;
}

.account-page-actions-hint {
  margin: 0;
  flex: 1 1 auto;
  min-width: min(100%, 12rem);
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.4;
}

.account-page-actions-buttons {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.account-page-actions--sticky {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1rem;
  flex-wrap: wrap;
}

.account-card {
  padding: clamp(1.1rem, 2.5vw, 1.45rem);
}

.account-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
  padding-bottom: 0.95rem;
  border-bottom: 1px solid var(--border);
}

.account-card-head-main {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  min-width: 0;
}

.account-step {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-top: 0.1rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--sea) 14%, transparent);
  color: var(--sea-deep);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 750;
  line-height: 1;
}

.account-card-head h2,
.account-card-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
  letter-spacing: var(--tracking-tight);
}

.account-card-head p {
  margin: 0.35rem 0 0;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  max-width: 42rem;
}

.account-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.1rem;
}

.account-page .account-session-rows {
  display: grid;
  gap: 0.55rem;
  margin: 0;
}

.account-page .account-session-row {
  display: grid;
  grid-template-columns: minmax(7rem, 34%) minmax(0, 1fr);
  gap: 0.65rem 1rem;
  align-items: center;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-3) 70%, transparent);
  font-size: var(--text-sm);
}

.account-page .account-session-row span {
  color: var(--ink-soft);
  font-weight: 600;
}

.account-page .account-session-row strong {
  text-align: left;
  font-weight: 700;
  color: var(--ink);
  word-break: break-word;
}

.account-receive-field {
  margin-bottom: 0.35rem;
}

.account-receive-label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 700;
  font-size: var(--text-sm);
}

.account-receive-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 0.7rem;
}

.account-receive-option {
  position: relative;
  display: grid;
  gap: 0.4rem;
  text-align: left;
  padding: 1.05rem 1.1rem;
  border-radius: 16px;
  border: 1px solid var(--border-strong);
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--surface-solid) 92%, var(--sea) 6%), var(--surface-solid));
  color: inherit;
  cursor: pointer;
  transition:
    border-color var(--dur-fast) ease,
    background var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-out);
}

.account-receive-option:hover,
.account-receive-option:focus-visible {
  border-color: color-mix(in srgb, var(--sea) 45%, transparent);
  background: color-mix(in srgb, var(--sea) 7%, var(--surface-solid));
  outline: none;
  transform: translateY(-1px);
}

.account-receive-option.is-selected {
  border-color: color-mix(in srgb, var(--sea) 55%, transparent);
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--sea) 14%, var(--surface-solid)), var(--surface-solid));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--sea) 18%, transparent),
    0 10px 24px color-mix(in srgb, var(--sea) 12%, transparent);
}

.account-receive-option.is-selected::after {
  content: "";
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--sea);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sea) 22%, transparent);
}

.account-receive-option-title {
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 1.02rem;
  letter-spacing: var(--tracking-tight);
  padding-right: 1.2rem;
}

.account-receive-option-copy {
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.4;
}

.account-photo-field {
  grid-column: 1 / -1;
}

.account-photo-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.95rem 1rem;
  border-radius: 16px;
  border: 1px dashed color-mix(in srgb, var(--sea) 28%, var(--border-strong));
  background: color-mix(in srgb, var(--sea) 5%, var(--surface-solid));
}

.account-photo-row .org-edit-photo-preview,
.account-photo-row .org-edit-avatar-fallback {
  width: 72px;
  height: 72px;
  border-radius: 18px;
}

.account-photo-picker {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.account-photo-btn {
  cursor: pointer;
  margin: 0;
}

.account-photo-hint {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.account-photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.account-status-card {
  padding: clamp(1.1rem, 2.5vw, 1.4rem);
}

.account-status-card[data-ready="1"] {
  border-color: color-mix(in srgb, var(--success) 40%, transparent);
  background:
    radial-gradient(ellipse 55% 70% at 100% 0%, color-mix(in srgb, var(--success) 12%, transparent), transparent 55%),
    var(--surface-solid, var(--surface));
}

.account-status-card[data-enabled="1"][data-ready="0"] {
  border-color: color-mix(in srgb, var(--signal) 42%, transparent);
  background:
    radial-gradient(ellipse 55% 70% at 100% 0%, color-mix(in srgb, var(--signal) 14%, transparent), transparent 55%),
    var(--surface-solid, var(--surface));
}

.account-status-card[data-enabled="0"] {
  border-color: var(--border-strong);
}

.account-status-link {
  margin: 0.95rem 0 0;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.account-status-link a {
  font-weight: 700;
  color: var(--sea);
  text-decoration: none;
}

.account-status-link a:hover {
  text-decoration: underline;
}

.account-daraja-card .field-hint[data-daraja-blocked-hint] {
  margin-top: 0.55rem;
}

.account-daraja-card.is-daraja-on,
.comms-channel-card.is-channel-on {
  border-color: color-mix(in srgb, var(--sea) 40%, transparent);
  box-shadow:
    var(--card-shadow),
    0 0 0 1px color-mix(in srgb, var(--sea) 12%, transparent);
}

.comms-channel-body {
  margin-top: 1.15rem;
  display: grid;
  gap: 1.15rem;
}

.comms-fetch-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: start;
}

.comms-fetch-row [data-comms-fetch-select] {
  grid-column: 1 / -1;
}

.comms-fetch-status.is-error,
[data-comms-fetch-status].is-error {
  color: var(--danger, #b42318);
}

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

.comms-summary-grid .account-summary-item {
  align-content: start;
}

.comms-summary-grid .mikrotik-wifi-pill {
  justify-self: start;
  margin-top: 0.15rem;
}


.comms-channel-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 1rem;
}

.comms-channel-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.1rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-solid, #fff);
  font-size: 0.78rem;
}

.comms-channel-pill span {
  color: var(--ink-soft);
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.comms-channel-pill strong {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
}

.comms-channel-pill.is-ready {
  border-color: color-mix(in srgb, var(--success, #1f8a5b) 35%, var(--border));
  background: color-mix(in srgb, var(--success, #1f8a5b) 8%, var(--surface-solid));
}

.comms-channel-pill.is-warn {
  border-color: color-mix(in srgb, var(--signal, #c47b1a) 35%, var(--border));
  background: color-mix(in srgb, var(--signal, #c47b1a) 8%, var(--surface-solid));
}

.comms-panel-head {
  margin: 0 0 1rem;
}

.comms-panel-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: var(--tracking-tight);
}

.comms-panel-head p {
  margin: 0.25rem 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.comms-events-list-wrap {
  display: grid;
  gap: 1.4rem;
}

.comms-events-section-bar h3 {
  margin: 0 0 0.55rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.comms-events-section-bar p {
  margin: -0.25rem 0 0.75rem;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.45;
  max-width: 54rem;
}

.comms-events-subsection {
  display: grid;
  gap: 0.55rem;
  margin-top: 1rem;
}

.comms-events-subsection:first-of-type {
  margin-top: 0.35rem;
}

.comms-events-subsection-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.comms-catalog-wrap {
  display: grid;
  gap: 1.5rem;
}

.comms-catalog-table {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-solid, #fff);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 3%, transparent);
}

.comms-catalog-head {
  display: none;
}

.comms-catalog-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comms-catalog-item {
  margin: 0;
  border-bottom: 1px solid var(--border);
}

.comms-catalog-item:last-child {
  border-bottom: 0;
}

.comms-catalog-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.85rem 1rem;
  align-items: start;
  padding: 1rem 1.1rem;
}

.comms-catalog-item:hover {
  background: color-mix(in srgb, var(--sea) 5%, transparent);
}

.comms-catalog-trigger {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
}

.comms-catalog-trigger strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.comms-catalog-when,
.comms-catalog-includes,
.comms-catalog-recipient {
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.45;
}

.comms-catalog-recipient {
  font-weight: 650;
  color: color-mix(in srgb, var(--sea-deep, #0e7c86) 80%, var(--ink));
}

.comms-catalog-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
  align-content: flex-start;
  max-width: 14rem;
}

.comms-channel-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-3, #f3f5f7);
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.comms-channel-chip.is-sms {
  color: #075985;
  background: color-mix(in srgb, #0ea5e9 14%, transparent);
  border-color: color-mix(in srgb, #0ea5e9 28%, var(--border));
}

.comms-channel-chip.is-email {
  color: #1e40af;
  background: color-mix(in srgb, #3b82f6 14%, transparent);
  border-color: color-mix(in srgb, #3b82f6 28%, var(--border));
}

.comms-channel-chip.is-whatsapp {
  color: #166534;
  background: color-mix(in srgb, #22c55e 14%, transparent);
  border-color: color-mix(in srgb, #22c55e 28%, var(--border));
}

.comms-channel-chip.is-off {
  opacity: 0.7;
}

@media (min-width: 901px) {
  .comms-catalog-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 12rem 4.5rem;
    gap: 0.85rem 1rem;
    align-items: center;
    padding: 0.55rem 1.1rem;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-3) 70%, transparent);
    color: var(--ink-soft);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .comms-catalog-row {
    grid-template-columns: minmax(0, 1fr) 12rem 4.5rem;
    align-items: center;
  }

  .comms-catalog-channels {
    max-width: none;
    justify-content: flex-start;
  }

  .comms-catalog-row .comms-event-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 900px) {
  .comms-catalog-row {
    grid-template-columns: 1fr auto;
  }

  .comms-catalog-channels {
    grid-column: 1 / -1;
    justify-content: flex-start;
    max-width: none;
  }
}

.comms-event-table {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow-x: auto;
  overflow-y: visible;
  background: var(--surface-solid, #fff);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 3%, transparent);
}

.comms-event-table-head {
  display: none;
}

.comms-event-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comms-event {
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  position: relative;
  transition: background 0.15s ease;
}

.comms-event:last-child {
  border-bottom: 0;
}

.comms-event.is-enabled {
  background: color-mix(in srgb, var(--sea) 4%, transparent);
}

.comms-event:hover {
  background: color-mix(in srgb, var(--surface-solid) 94%, var(--sea) 4%);
}

.comms-event.is-enabled:hover {
  background: color-mix(in srgb, var(--sea) 8%, transparent);
}

.comms-event-row {
  display: grid;
  grid-template-columns: minmax(14rem, 1.7fr) minmax(12rem, 15rem) 8.5rem minmax(10rem, 11.5rem);
  gap: 0.75rem 1rem;
  align-items: center;
  padding: 0.95rem 1.15rem;
  min-width: 40rem;
}

.comms-event-trigger {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  min-width: 0;
  max-width: 100%;
}

.comms-event-trigger strong {
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.35;
  color: var(--ink);
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}

.comms-event-state {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.comms-event-state.is-on {
  color: var(--sea-deep);
  background: color-mix(in srgb, var(--sea) 16%, transparent);
}

.comms-event-state.is-off {
  color: var(--ink-soft);
  background: var(--surface-3);
}

.comms-event-field {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
  max-width: 100%;
}

.comms-event-label {
  display: none;
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.comms-control,
.comms-multi-toggle {
  width: 100%;
  min-height: 2.4rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.65rem;
  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface-solid));
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.comms-control:hover,
.comms-multi-toggle:hover {
  border-color: color-mix(in srgb, var(--sea) 35%, var(--border-strong));
}

.comms-control:focus,
.comms-multi-toggle:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--sea) 55%, var(--border-strong));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sea) 16%, transparent);
}

.comms-control--static {
  display: inline-flex;
  align-items: center;
  color: var(--ink-soft);
  border-style: dashed;
  background: transparent;
}

.comms-multi {
  position: relative;
  min-width: 0;
  max-width: 100%;
}

.comms-multi-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  text-align: left;
  cursor: pointer;
}

.comms-multi-toggle [data-comms-multi-summary] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-soft);
}

.comms-multi.has-value .comms-multi-toggle [data-comms-multi-summary] {
  color: var(--ink);
}

.comms-multi-caret {
  flex: 0 0 auto;
  opacity: 0.7;
}

.comms-multi.is-open .comms-multi-toggle {
  border-color: color-mix(in srgb, var(--sea) 55%, var(--border-strong));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sea) 16%, transparent);
}

.comms-multi-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.35rem);
  left: 0;
  width: 15.5rem;
  max-width: min(15.5rem, 80vw);
  max-height: 16rem;
  overflow: auto;
  padding: 0.35rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.75rem;
  background: var(--surface-solid, #fff);
  box-shadow:
    0 12px 28px color-mix(in srgb, var(--ink) 12%, transparent),
    0 2px 6px color-mix(in srgb, var(--ink) 6%, transparent);
}

.comms-multi-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.55rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 0.86rem;
}

.comms-multi-option:hover {
  background: color-mix(in srgb, var(--sea) 8%, transparent);
}

.comms-multi-option input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--sea);
}

.comms-multi-empty {
  margin: 0;
  padding: 0.65rem;
  color: var(--ink-soft);
  font-size: 0.84rem;
}

.comms-event-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  width: 100%;
  min-width: 0;
}

.comms-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.65rem;
  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface-solid));
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.comms-icon-btn:hover {
  color: var(--sea-deep);
  border-color: color-mix(in srgb, var(--sea) 40%, var(--border-strong));
  background: color-mix(in srgb, var(--sea) 10%, var(--surface-solid));
}

.comms-message-panel {
  width: min(48rem, 100%);
  max-width: 48rem;
  max-height: min(96vh, 960px);
  padding: 1.35rem 1.35rem 1.5rem;
  border-radius: 22px;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

#comms-message-modal.role-modal {
  place-items: center;
  padding: 1rem;
}

#comms-message-modal .role-modal-panel.comms-message-panel {
  width: min(48rem, calc(100vw - 2rem));
}

.comms-message-panel.is-channel-email {
  background:
    radial-gradient(ellipse 70% 48% at 100% -8%, rgba(59, 130, 246, 0.2), transparent 55%),
    radial-gradient(ellipse 50% 40% at -5% 0%, rgba(14, 124, 134, 0.14), transparent 52%),
    linear-gradient(185deg, #1a3340 0%, #14262f 48%, #0e1a21 100%);
}

.comms-message-panel.is-channel-sms {
  background:
    radial-gradient(ellipse 70% 48% at 100% -8%, rgba(56, 189, 248, 0.16), transparent 55%),
    radial-gradient(ellipse 50% 40% at -5% 0%, rgba(148, 163, 184, 0.12), transparent 52%),
    linear-gradient(185deg, #1a3340 0%, #14262f 48%, #0e1a21 100%);
}

.comms-message-panel.is-channel-whatsapp {
  background:
    radial-gradient(ellipse 70% 48% at 100% -8%, rgba(37, 211, 102, 0.18), transparent 55%),
    radial-gradient(ellipse 50% 40% at -5% 0%, rgba(0, 168, 132, 0.16), transparent 52%),
    linear-gradient(185deg, #1a3340 0%, #14262f 48%, #0e1a21 100%);
}

.comms-preview-head {
  margin-bottom: 0.85rem;
}

.comms-preview-sub {
  max-width: 46ch;
}

.comms-message-body {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.55;
  color: inherit;
  font-size: 0.92rem;
}

.comms-preview-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 1rem;
}

.comms-preview-tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid color-mix(in srgb, var(--modal-ink, var(--ink)) 18%, transparent);
  background: color-mix(in srgb, var(--modal-ink, var(--ink)) 6%, transparent);
  color: color-mix(in srgb, var(--modal-ink, var(--ink)) 72%, transparent);
  min-height: 2.2rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.comms-preview-tab-icon {
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 14%, transparent);
  font-size: 0.68rem;
  font-weight: 800;
}

.comms-preview-tab:hover {
  color: var(--modal-ink, var(--ink));
  border-color: color-mix(in srgb, var(--sea) 40%, transparent);
}

.comms-preview-tab.is-active {
  color: #0b1220;
  background: var(--modal-signal, #f0c14d);
  border-color: color-mix(in srgb, var(--modal-signal, #f0c14d) 70%, #fff);
  transform: translateY(-1px);
}

.comms-message-panel.is-channel-email .comms-preview-tab[data-comms-preview-tab="email"].is-active {
  background: #60a5fa;
  border-color: #93c5fd;
}

.comms-message-panel.is-channel-sms .comms-preview-tab[data-comms-preview-tab="sms"].is-active {
  background: #7dd3fc;
  border-color: #bae6fd;
}

.comms-message-panel.is-channel-whatsapp .comms-preview-tab[data-comms-preview-tab="whatsapp"].is-active {
  background: #4ade80;
  border-color: #86efac;
}

.comms-preview-empty {
  margin: 0;
  padding: 0.9rem 1rem;
  border-radius: 0.75rem;
  border: 1px dashed color-mix(in srgb, var(--modal-ink, var(--ink)) 22%, transparent);
  color: color-mix(in srgb, var(--modal-ink, var(--ink)) 72%, transparent);
  font-size: 0.9rem;
  line-height: 1.5;
}

.comms-preview-pane {
  min-width: 0;
}

.comms-device-stage {
  display: grid;
  justify-items: center;
  gap: 0.7rem;
}

.comms-preview-footnote {
  margin: 0;
  text-align: center;
  font-size: 0.76rem;
  color: var(--modal-muted, rgba(238, 246, 248, 0.66));
}

/* ?? Email client mock ?? */
.comms-device--email {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  overflow: hidden;
  background: #f4f7fb;
  color: #1f2937;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.comms-mail-chrome {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.8rem;
  background: linear-gradient(180deg, #e8eef5 0%, #d9e2ec 100%);
  border-bottom: 1px solid #c9d4e0;
}

.comms-mail-traffic {
  display: inline-flex;
  gap: 0.35rem;
}

.comms-mail-traffic span {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 999px;
  background: #ff5f57;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

.comms-mail-traffic span:nth-child(2) { background: #febc2e; }
.comms-mail-traffic span:nth-child(3) { background: #28c840; }

.comms-mail-chrome-title {
  font-size: 0.74rem;
  font-weight: 700;
  color: #5b6b7c;
  letter-spacing: 0.02em;
}

.comms-mail-toolbar {
  display: flex;
  gap: 0.45rem;
  padding: 0.55rem 0.85rem;
  background: #fff;
  border-bottom: 1px solid #e5ebf2;
}

.comms-mail-toolbar span {
  width: 1.55rem;
  height: 0.7rem;
  border-radius: 999px;
  background: #e8eef5;
}

.comms-mail-header {
  display: flex;
  gap: 0.75rem;
  padding: 0.95rem 1rem 0.55rem;
  background: #fff;
}

.comms-mail-avatar {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  background: linear-gradient(145deg, #0e7c86, #1a3340);
  color: #eef6f8;
  font-weight: 800;
  font-size: 0.95rem;
}

.comms-mail-meta {
  min-width: 0;
  flex: 1;
}

.comms-mail-from-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.comms-mail-from-row strong {
  font-size: 0.95rem;
  color: #111827;
}

.comms-mail-from-row time {
  flex: 0 0 auto;
  font-size: 0.72rem;
  color: #6b7280;
}

.comms-mail-address,
.comms-mail-to {
  font-size: 0.78rem;
  color: #6b7280;
}

.comms-mail-subject {
  margin: 0;
  padding: 0.15rem 1rem 0.85rem;
  background: #fff;
  border-bottom: 1px solid #e5ebf2;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.25;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.comms-mail-card {
  margin: 0.95rem;
  padding: 1.05rem 1.05rem 0.9rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e5ebf2;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  display: grid;
  gap: 0.85rem;
}

.comms-mail-brand {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0e7c86;
}

.comms-mail-card .comms-message-body {
  color: #1f2937;
  font-size: 1rem;
}

.comms-mail-cta a,
.comms-mail-cta span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.45rem 1rem;
  border-radius: 0.65rem;
  background: #0e7c86;
  color: #fff !important;
  font-weight: 700;
  font-size: 0.86rem;
  text-decoration: none !important;
}

.comms-mail-footer {
  padding-top: 0.55rem;
  border-top: 1px solid #eef2f7;
  font-size: 0.72rem;
  color: #9aa6b2;
}

/* ?? Shared phone shell ?? */
.comms-device--phone {
  width: min(100%, 24rem);
}

.comms-phone-bezel {
  position: relative;
  border-radius: 2rem;
  padding: 0.55rem 0.45rem 0.7rem;
  background:
    linear-gradient(160deg, #2a3340 0%, #111827 42%, #0b1220 100%);
  box-shadow:
    0 22px 44px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.comms-phone-notch {
  position: absolute;
  top: 0.62rem;
  left: 50%;
  transform: translateX(-50%);
  width: 6.2rem;
  height: 1.05rem;
  border-radius: 999px;
  background: #05070c;
  z-index: 2;
}

.comms-phone-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 1.05rem 0.35rem;
  color: #111827;
  font-size: 0.72rem;
  font-weight: 750;
}

.comms-phone-status--wa {
  color: #e9edef;
  background: #1f2c34;
  padding-top: 0.7rem;
}

.comms-phone-signal {
  letter-spacing: 0.04em;
  opacity: 0.8;
}

.comms-phone-home {
  width: 7.5rem;
  height: 0.28rem;
  margin: 0.55rem auto 0.1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}

/* ?? SMS Messages app ?? */
.comms-device--sms .comms-phone-bezel {
  background:
    linear-gradient(160deg, #3a4250 0%, #1f2937 45%, #0f172a 100%);
}

.comms-device--sms .comms-phone-status {
  background: #f2f2f7;
  color: #111827;
  border-radius: 1.45rem 1.45rem 0 0;
  margin: 0.15rem 0.2rem 0;
  padding-top: 0.75rem;
}

.comms-sms-head {
  display: grid;
  grid-template-columns: 1.5rem 1fr 1.5rem;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0.2rem;
  padding: 0.35rem 0.7rem 0.65rem;
  background: #f2f2f7;
  border-bottom: 1px solid #e2e2ea;
}

.comms-sms-back,
.comms-sms-info {
  color: #007aff;
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 500;
}

.comms-sms-info {
  justify-self: end;
  font-size: 1rem;
}

.comms-sms-contact {
  display: grid;
  justify-items: center;
  gap: 0.08rem;
  text-align: center;
}

.comms-sms-avatar {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: #8e8e93;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
}

.comms-sms-contact strong {
  font-size: 0.84rem;
  color: #111827;
}

.comms-sms-contact small {
  font-size: 0.66rem;
  color: #8e8e93;
}

.comms-sms-thread {
  margin: 0 0.2rem;
  min-height: 18rem;
  padding: 0.95rem 0.85rem 1.1rem;
  background:
    linear-gradient(180deg, #ffffff 0%, #f7f7fa 100%);
  display: grid;
  align-content: start;
  gap: 0.65rem;
}

.comms-sms-day {
  margin: 0;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8e8e93;
}

.comms-sms-bubble {
  justify-self: start;
  max-width: 88%;
  padding: 0.55rem 0.7rem 0.4rem;
  border-radius: 1.15rem 1.15rem 1.15rem 0.35rem;
  background: #e9e9eb;
  color: #111827;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.comms-sms-bubble .comms-message-body {
  color: #111827;
  font-size: 0.98rem;
  line-height: 1.45;
}

.comms-sms-bubble time {
  display: block;
  margin-top: 0.3rem;
  text-align: right;
  font-size: 0.64rem;
  color: #8e8e93;
}

.comms-sms-composer {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0.2rem;
  padding: 0.45rem 0.55rem 0.55rem;
  background: #f2f2f7;
  border-top: 1px solid #e2e2ea;
  border-radius: 0 0 1.35rem 1.35rem;
}

.comms-sms-composer > span {
  flex: 1;
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  padding: 0 0.8rem;
  border: 1px solid #d1d1d6;
  border-radius: 999px;
  background: #fff;
  color: #8e8e93;
  font-size: 0.82rem;
}

.comms-sms-composer button {
  width: 1.85rem;
  height: 1.85rem;
  border: 0;
  border-radius: 999px;
  background: #c7c7cc;
  color: #fff;
  font-weight: 800;
  pointer-events: none;
}

/* ?? WhatsApp chat ?? */
.comms-wa-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0.2rem;
  padding: 0.35rem 0.55rem 0.55rem;
  background: #1f2c34;
  color: #e9edef;
}

.comms-wa-back {
  font-size: 1.35rem;
  line-height: 1;
  color: #e9edef;
}

.comms-wa-avatar {
  display: inline-grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 999px;
  background: #00a884;
  color: #06251d;
  font-weight: 800;
  font-size: 0.85rem;
}

.comms-wa-contact {
  min-width: 0;
  flex: 1;
}

.comms-wa-contact strong {
  display: block;
  font-size: 0.9rem;
  line-height: 1.15;
}

.comms-wa-contact small {
  display: block;
  font-size: 0.68rem;
  color: rgba(233, 237, 239, 0.65);
}

.comms-wa-actions {
  display: inline-flex;
  gap: 0.55rem;
}

.comms-wa-actions span {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 0.2rem;
  border: 1.5px solid rgba(233, 237, 239, 0.75);
}

.comms-wa-actions span:last-child {
  border-radius: 999px;
}

.comms-wa-thread {
  margin: 0 0.2rem;
  min-height: 18rem;
  padding: 0.85rem 0.75rem 1.1rem;
  display: grid;
  align-content: start;
  gap: 0.65rem;
  background-color: #0b141a;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.03) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 42%, rgba(255, 255, 255, 0.025) 0 1px, transparent 1.5px),
    radial-gradient(circle at 38% 78%, rgba(255, 255, 255, 0.03) 0 1px, transparent 1.5px),
    linear-gradient(180deg, #0e1a21 0%, #0b141a 100%);
  background-size: 48px 48px, 56px 56px, 40px 40px, auto;
}

.comms-wa-day {
  margin: 0.15rem 0 0.2rem;
  text-align: center;
}

.comms-wa-day span {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(31, 44, 52, 0.92);
  color: rgba(233, 237, 239, 0.72);
  font-size: 0.68rem;
  font-weight: 650;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.comms-wa-bubble {
  justify-self: end;
  max-width: 86%;
  padding: 0.45rem 0.55rem 0.28rem 0.65rem;
  border-radius: 0.55rem 0.15rem 0.55rem 0.55rem;
  background: #005c4b;
  color: #e9edef;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.25);
  position: relative;
}

.comms-wa-bubble .comms-message-body {
  color: #e9edef;
  font-size: 0.98rem;
  line-height: 1.45;
  padding-right: 0.15rem;
}

.comms-wa-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.2rem;
}

.comms-wa-meta time {
  font-size: 0.62rem;
  color: rgba(233, 237, 239, 0.62);
}

.comms-wa-ticks {
  font-size: 0.68rem;
  color: #53bdeb;
  letter-spacing: -0.08em;
  line-height: 1;
}

.comms-wa-composer {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0.2rem;
  padding: 0.4rem 0.45rem 0.5rem;
  background: #1f2c34;
  border-radius: 0 0 1.35rem 1.35rem;
}

.comms-wa-plus {
  display: inline-grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  color: rgba(233, 237, 239, 0.7);
  font-size: 1.2rem;
  font-weight: 500;
}

.comms-wa-input {
  flex: 1;
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  padding: 0 0.8rem;
  border-radius: 999px;
  background: #2a3942;
  color: rgba(233, 237, 239, 0.45);
  font-size: 0.82rem;
}

.comms-wa-mic {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  background: #00a884;
  box-shadow: inset 0 0 0 5px rgba(6, 37, 29, 0.25);
}

@media (max-width: 560px) {
  .comms-message-panel {
    max-width: 100%;
  }

  .comms-device--phone {
    width: min(100%, 21rem);
  }

  .comms-sms-thread,
  .comms-wa-thread {
    min-height: 15rem;
  }
}

@media (min-width: 901px) {
  .comms-event-table-head {
    display: grid;
    grid-template-columns: minmax(14rem, 1.7fr) minmax(12rem, 15rem) 8.5rem minmax(10rem, 11.5rem);
    gap: 0.75rem 1rem;
    align-items: center;
    padding: 0.65rem 1.15rem;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-3) 70%, transparent);
    color: var(--ink-soft);
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    min-width: 40rem;
  }
}

@media (max-width: 900px) {
  .comms-event-row {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-width: 0;
    padding: 0.85rem 0.85rem;
  }

  .comms-event-table-head {
    display: none !important;
  }

  .comms-event-trigger,
  .comms-event-actions {
    grid-column: 1 / -1;
  }

  .comms-event-label {
    display: block;
  }

  .comms-event-actions {
    justify-content: flex-start;
  }

  .comms-multi-panel {
    width: min(15.5rem, 100%);
  }
}

@media (max-width: 560px) {
  .comms-event-row {
    grid-template-columns: 1fr;
  }
}

.account-daraja-body {
  margin-top: 1.15rem;
  display: grid;
  gap: 1.15rem;
}

.account-subsection {
  padding: 1rem 1.05rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-3) 65%, transparent);
}

.account-subsection h4 {
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-size: 0.98rem;
  letter-spacing: var(--tracking-tight);
}

.account-subsection > p {
  margin: 0 0 0.85rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.4;
}

.account-readonly {
  display: flex;
  align-items: center;
  min-height: 2.55rem;
  margin: 0;
  padding: 0.6rem 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--surface-3) 80%, transparent);
  font-weight: 700;
}

.account-page-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.account-page-actions--sticky {
  position: sticky;
  bottom: 0.75rem;
  z-index: 5;
  margin-top: 0.25rem;
  padding: 0.85rem 1rem;
  border-radius: 16px;
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--surface-solid, #fff) 88%, transparent);
  box-shadow: 0 12px 36px color-mix(in srgb, var(--ink) 14%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

.account-page-actions--sticky .account-page-actions-buttons {
  margin-left: auto;
}

.account-page-actions--sticky .btn-primary {
  min-width: min(100%, 12rem);
}

.account-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.account-summary-item {
  display: grid;
  gap: 0.35rem;
  padding: 0.95rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-3) 55%, transparent);
  min-width: 0;
}

.account-summary-item span {
  display: block;
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.account-summary-item strong {
  font-size: 0.98rem;
  line-height: 1.3;
  word-break: break-word;
}

.account-hero-lead {
  margin: 0.35rem 0 0.65rem;
  max-width: 36rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.45;
}

.account-hero--comms {
  align-items: flex-start;
}

.account-hero-edit,
.account-hero-cancel {
  margin-top: 0.75rem;
}

.account-hero-aside .account-hero-edit {
  display: inline-flex;
  margin-top: 0.85rem;
}

.account-page-shell--comms {
  max-width: min(1320px, 100%);
}

.account-page-shell--edit .account-hero {
  border-radius: 18px;
}

.account-summary-item.is-ready {
  border-color: color-mix(in srgb, var(--success, #1f8a5b) 28%, var(--border));
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--success, #1f8a5b) 10%, var(--surface-solid)), var(--surface-solid));
}

.account-summary-item.is-warn {
  border-color: color-mix(in srgb, var(--signal) 26%, var(--border));
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--signal) 8%, var(--surface-solid)), var(--surface-solid));
}

.comms-events-col h3 {
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: var(--tracking-tight);
}

.comms-event {
  transition: background 0.15s ease;
}

.comms-event:hover {
  background: color-mix(in srgb, var(--surface-solid) 94%, var(--sea) 4%);
}

.comms-event.is-enabled:hover {
  background: color-mix(in srgb, var(--sea) 8%, transparent);
}

.account-package-groups {
  display: grid;
  gap: 1rem;
  margin-top: 0;
}

.account-package-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  margin-bottom: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border);
}

.account-package-group-head h2,
.account-package-group-head h3 {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
  letter-spacing: var(--tracking-tight);
}

.account-package-group-head p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.4;
}

.account-package-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.55rem;
  height: 1.55rem;
  margin-left: 0.35rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 750;
  vertical-align: middle;
  color: var(--chip-sea-fg);
  background: var(--chip-sea-bg);
}

.account-packages-panel .panel-head-row {
  margin-bottom: 1rem;
  padding-bottom: 0.95rem;
  border-bottom: 1px solid var(--border);
}

.account-packages-panel .org-table-shell,
.account-packages-panel .table-scroll,
.account-packages-panel .packages-table-shell,
.account-package-group .org-table-shell,
.account-package-group .table-scroll,
.account-package-group .packages-table-shell {
  border-radius: 14px;
}

.account-packages-panel .packages-empty,
.account-package-group .packages-empty {
  --group-tone: var(--sea, #0e7c86);
}

.account-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex: 0 0 auto;
}

.account-package-group.tone-pppoe {
  border-color: color-mix(in srgb, var(--sea) 22%, var(--border));
  background:
    radial-gradient(ellipse 70% 55% at 0% 0%, color-mix(in srgb, var(--sea) 8%, transparent), transparent 55%),
    var(--surface-solid, var(--surface));
}

.account-package-group.tone-hotspot {
  border-color: color-mix(in srgb, var(--signal) 18%, var(--border));
  background:
    radial-gradient(ellipse 70% 55% at 100% 0%, color-mix(in srgb, var(--signal) 7%, transparent), transparent 55%),
    var(--surface-solid, var(--surface));
}

.account-package-group.tone-hotspot .account-package-count {
  color: color-mix(in srgb, var(--signal) 78%, var(--ink));
  background: color-mix(in srgb, var(--signal) 12%, var(--surface-solid));
}

.account-status-card.is-ready {
  border-color: color-mix(in srgb, var(--success, #1f8a5b) 26%, var(--border));
}

.account-status-card.is-warn {
  border-color: color-mix(in srgb, var(--signal) 24%, var(--border));
}

.account-payments-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.account-status-link {
  margin: 0.95rem 0 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.45;
}

.account-status-link a {
  font-weight: 650;
  color: var(--sea-deep, var(--sea));
}

/* Account ? Packages / payments overview */
.account-payments-page {
  --payments-tone: var(--sea, #0e7c86);
}

.account-payments-hero {
  animation: clientsRise 0.42s ease both;
}

.account-payments-status {
  --status-tone: var(--payments-tone);
  overflow: hidden;
  padding: 1.15rem 1.2rem 1.2rem;
  border-left: 3px solid color-mix(in srgb, var(--status-tone) 55%, transparent);
  animation: clientsRise 0.42s ease both;
  animation-delay: 0.06s;
}

.account-payments-status.is-ready {
  --status-tone: var(--success, #1f8a5b);
  border-color: color-mix(in srgb, var(--status-tone) 28%, var(--border));
  background:
    radial-gradient(ellipse 55% 80% at 100% 0%, color-mix(in srgb, var(--status-tone) 12%, transparent), transparent 58%),
    var(--surface-solid, var(--surface));
}

.account-payments-status.is-warn {
  --status-tone: var(--signal, #c45c26);
  border-color: color-mix(in srgb, var(--status-tone) 28%, var(--border));
  background:
    radial-gradient(ellipse 55% 80% at 100% 0%, color-mix(in srgb, var(--status-tone) 12%, transparent), transparent 58%),
    var(--surface-solid, var(--surface));
}

.account-payments-status-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem 1.15rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding-bottom: 0.95rem;
  border-bottom: 1px solid var(--border);
}

.account-payments-status-brand {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  min-width: 0;
  flex: 1 1 16rem;
}

.account-payments-status-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 12px;
  color: var(--status-tone);
  background: color-mix(in srgb, var(--status-tone) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--status-tone) 22%, transparent);
}

.account-payments-status-copy {
  min-width: 0;
}

.account-payments-status-copy h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.18rem);
  letter-spacing: var(--tracking-tight);
  line-height: 1.25;
}

.account-payments-status-copy p {
  margin: 0.3rem 0 0;
  max-width: 46rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.45;
}

.account-payments-status-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.account-payments-status-cta {
  white-space: nowrap;
}

.account-payments-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
}

.account-payments-metric {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.9rem 0.95rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-3) 55%, transparent);
}

.account-payments-metric span {
  display: block;
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.account-payments-metric strong {
  font-size: 0.98rem;
  font-weight: 750;
  line-height: 1.3;
  word-break: break-word;
}

.account-payments-metric.is-ready {
  border-color: color-mix(in srgb, var(--success, #1f8a5b) 28%, var(--border));
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--success, #1f8a5b) 10%, var(--surface-solid)), var(--surface-solid));
}

.account-payments-metric.is-warn {
  border-color: color-mix(in srgb, var(--signal) 26%, var(--border));
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--signal) 8%, var(--surface-solid)), var(--surface-solid));
}

@media (max-width: 960px) {
  .account-payments-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .account-payments-status {
    padding: 1rem 0.95rem 1.05rem;
  }

  .account-payments-status-head {
    flex-direction: column;
    align-items: stretch;
  }

  .account-payments-status-actions {
    width: 100%;
  }

  .account-payments-status-actions .mikrotik-wifi-pill {
    margin-right: auto;
  }

  .account-payments-status-cta {
    flex: 1 1 auto;
    justify-content: center;
  }

  .account-payments-metrics {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 900px) {
  .account-summary-grid,
  .account-payments-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 720px) {
  .account-page-shell {
    max-width: 100%;
  }

  .account-hero {
    align-items: flex-start;
    padding: 1.1rem;
    flex-direction: column;
  }

  .account-hero-main {
    width: 100%;
  }

  .account-hero-avatar,
  .account-hero-avatar-fallback {
    width: 64px;
    height: 64px;
    border-radius: 16px;
  }

  .account-hero-aside {
    width: 100%;
  }

  .account-hero-cancel,
  .account-hero--comms > .btn {
    width: 100%;
    justify-content: center;
  }

  .account-hero-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .account-hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .account-card-grid,
  .account-form-block-grid,
  .account-summary-grid,
  .account-payments-summary,
  .account-receive-options,
  .comms-events-grid {
    grid-template-columns: 1fr;
  }

  .account-form-block {
    padding: 0.85rem 0.9rem;
  }

  .account-page-form .account-code-input-wrap .join-code-input {
    font-size: 1.15rem;
    letter-spacing: 0.28em;
    min-height: 2.85rem;
  }

  .account-page-actions--sticky {
    bottom: 0.5rem;
    padding: 0.75rem;
    flex-direction: column;
    align-items: stretch;
  }

  .account-page-actions-hint {
    text-align: center;
  }

  .account-page-actions--sticky .account-page-actions-buttons {
    margin-left: 0;
    width: 100%;
  }

  .account-page-actions--sticky .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .account-card-head-main {
    flex-wrap: wrap;
  }

  .account-card-head {
    flex-direction: column;
  }

  .account-page .account-session-row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-page > .account-card,
  .account-page-form > .account-card,
  .account-receive-option {
    animation: none;
    transition: none;
  }
}

/* ISP Acc. Settings */
.account-chip--warn {
  border-color: color-mix(in srgb, var(--signal, #c45c26) 36%, transparent);
  background: color-mix(in srgb, var(--signal, #c45c26) 12%, var(--surface-solid, #fff));
  color: color-mix(in srgb, var(--signal, #c45c26) 72%, var(--ink));
}

.isp-settings-aside-meta {
  display: block;
  margin-top: 0.35rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.35;
  word-break: break-word;
}

.isp-settings-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.isp-settings-code-item {
  border-color: color-mix(in srgb, var(--sea) 28%, transparent);
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--sea) 12%, transparent),
      color-mix(in srgb, var(--surface-3) 55%, transparent)
    );
}

.isp-settings-code {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
}

.account-session-row .isp-settings-code {
  font-size: 1.05rem;
  letter-spacing: 0.12em;
}

.isp-settings-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.isp-settings-link {
  display: grid;
  gap: 0.4rem;
  padding: 1.05rem 1.1rem;
  border-radius: 16px;
  border: 1px solid var(--border-strong);
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--sea) 8%, transparent),
      color-mix(in srgb, var(--surface-3) 60%, transparent)
    );
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.2s var(--ease-out, ease),
    transform 0.2s var(--ease-out, ease),
    background 0.2s var(--ease-out, ease);
}

.isp-settings-link:hover,
.isp-settings-link:focus-visible {
  border-color: color-mix(in srgb, var(--sea) 40%, transparent);
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--sea) 14%, transparent),
      color-mix(in srgb, var(--surface-3) 50%, transparent)
    );
  transform: translateY(-1px);
  outline: none;
}

.isp-settings-link strong {
  font-family: var(--font-display);
  font-size: 0.98rem;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}

.isp-settings-link span {
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .isp-settings-summary,
  .isp-settings-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .isp-settings-summary,
  .isp-settings-links {
    grid-template-columns: 1fr;
  }
}

/* ?? Register PPPoE client modal ?? */
.pppoe-modal {
  place-items: end center;
  padding: 0;
}

.pppoe-modal .role-modal-backdrop {
  background: rgba(6, 14, 20, 0.66);
  backdrop-filter: blur(6px);
}

.role-modal-panel.pppoe-panel {
  display: flex;
  flex-direction: column;
  width: min(100%, 40rem);
  max-width: 100%;
  max-height: min(94dvh, 46rem);
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 22px 22px 0 0;
  background:
    radial-gradient(ellipse 80% 50% at 100% -10%, rgba(232, 163, 23, 0.16), transparent 55%),
    radial-gradient(ellipse 60% 45% at -5% 0%, rgba(14, 124, 134, 0.2), transparent 52%),
    linear-gradient(185deg, #1a3742 0%, #12252e 45%, #0d171d 100%);
  box-shadow:
    0 -18px 48px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.07);
}

.pppoe-panel::before {
  content: "";
  flex: 0 0 auto;
  width: 2.5rem;
  height: 0.28rem;
  margin: 0.5rem auto 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
}

.pppoe-head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding: 0.8rem 1.1rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(8, 16, 22, 0.28), rgba(8, 16, 22, 0.1));
}

.pppoe-head-text {
  min-width: 0;
}

.pppoe-kicker {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0.45rem;
  padding: 0.22rem 0.55rem;
  border: 1px solid rgba(232, 163, 23, 0.35);
  border-radius: 999px;
  background: rgba(232, 163, 23, 0.14);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f0b93a;
}

.pppoe-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 3.6vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.pppoe-sub {
  margin: 0.3rem 0 0;
  max-width: 52ch;
  font-size: clamp(0.78rem, 2.5vw, 0.88rem);
  line-height: 1.45;
  color: rgba(232, 242, 244, 0.64);
}

.pppoe-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #e8f2f4;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.pppoe-close:hover {
  background: rgba(255, 255, 255, 0.14);
}

.pppoe-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.pppoe-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 1.1rem 1.15rem;
  display: grid;
  gap: 1.05rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

.pppoe-body::-webkit-scrollbar {
  width: 8px;
}

.pppoe-body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.pppoe-banner {
  margin: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(231, 76, 60, 0.32);
  border-radius: 12px;
  background: rgba(231, 76, 60, 0.12);
  color: #ff9b8d;
  font-size: 0.88rem;
  line-height: 1.4;
}

.pppoe-section {
  min-width: 0;
  padding: 0.9rem 0.95rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
}

.pppoe-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(232, 242, 244, 0.6);
}

.pppoe-section-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.pppoe-optional {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(232, 242, 244, 0.42);
}

.pppoe-collapse {
  padding-bottom: 0.9rem;
}

.pppoe-collapse-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(232, 242, 244, 0.6);
}

.pppoe-collapse-summary::-webkit-details-marker {
  display: none;
}

.pppoe-collapse-summary:hover,
.pppoe-collapse[open] > .pppoe-collapse-summary {
  color: rgba(232, 242, 244, 0.86);
}

.pppoe-collapse-summary:focus-visible {
  outline: 2px solid rgba(232, 163, 23, 0.7);
  outline-offset: 4px;
  border-radius: 6px;
}

.pppoe-rule {
  flex: 1 1 auto;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.pppoe-chevron {
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}

.pppoe-collapse[open] .pppoe-chevron {
  transform: rotate(180deg);
}

.pppoe-collapse[open] > .pppoe-collapse-summary {
  margin-bottom: 0.75rem;
}

.pppoe-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.pppoe-label-row label {
  margin-bottom: 0.3rem;
}

.pppoe-mini-btn {
  flex: 0 0 auto;
  padding: 0.15rem 0.5rem;
  border: 1px solid rgba(232, 163, 23, 0.38);
  border-radius: 999px;
  background: rgba(232, 163, 23, 0.12);
  color: #f0b93a;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.pppoe-mini-btn:hover {
  background: rgba(232, 163, 23, 0.22);
  border-color: rgba(232, 163, 23, 0.6);
}

.pppoe-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  min-width: 0;
}

.pppoe-grid[hidden],
[data-period-mode][hidden] {
  display: none !important;
}

.pppoe-grid > .field {
  min-width: 0;
}

.pppoe-grid label {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  color: rgba(232, 242, 244, 0.8);
}

.pppoe-grid .form-control {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 18, 24, 0.55);
  color: #e8f2f4;
  font-size: 0.95rem;
}

.pppoe-grid .form-control::placeholder {
  color: rgba(232, 242, 244, 0.34);
}

.pppoe-grid .form-control:focus {
  border-color: rgba(232, 163, 23, 0.7);
  box-shadow: 0 0 0 3px rgba(232, 163, 23, 0.18);
}

.pppoe-select {
  position: relative;
}

.pppoe-select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.95rem;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.32rem;
  border-right: 2px solid rgba(232, 242, 244, 0.55);
  border-bottom: 2px solid rgba(232, 242, 244, 0.55);
  transform: rotate(45deg);
  pointer-events: none;
}

.pppoe-select select.form-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
  cursor: pointer;
}

.pppoe-select select.form-control option {
  background: #12252e;
  color: #e8f2f4;
}

.pppoe-grid .password-field .form-control {
  padding-right: 2.9rem;
}

.pppoe-grid .password-toggle {
  color: rgba(232, 242, 244, 0.6);
}

.pppoe-grid .password-toggle:hover {
  color: #f0b93a;
  background: rgba(232, 163, 23, 0.12);
}

.pppoe-grid .field-hint {
  margin: 0.3rem 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(232, 242, 244, 0.5);
  opacity: 1;
}

.pppoe-grid .field-error {
  color: #ff9b8d;
}

.pppoe-grid-hint {
  grid-column: 1 / -1;
  margin: 0 !important;
}

.pppoe-foot {
  flex: 0 0 auto;
  display: flex;
  gap: 0.65rem;
  padding: 0.85rem 1.1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 16, 22, 0.55);
}

.pppoe-foot .btn {
  flex: 1 1 auto;
  padding: 0.7rem 1.1rem;
}

.pppoe-foot .btn-ghost {
  color: var(--modal-ink, #e8f2f4);
  background: var(--modal-surface, rgba(255, 255, 255, 0.06));
  border-color: var(--modal-border-strong, rgba(255, 255, 255, 0.22));
}

.pppoe-foot .btn-ghost:hover {
  background: var(--modal-surface-2, rgba(255, 255, 255, 0.1));
  border-color: rgba(255, 255, 255, 0.32);
}

.pppoe-foot .btn-danger {
  background: var(--modal-danger-btn, #e85d4f);
  color: #fff;
  box-shadow: 0 10px 24px rgba(232, 93, 79, 0.28);
}

.pppoe-foot .btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

@media (min-width: 34rem) {
  .pppoe-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem 0.75rem;
  }

  .pppoe-grid .field-span-2 {
    grid-column: 1 / -1;
  }

  .pppoe-foot {
    justify-content: flex-end;
  }

  .pppoe-foot .btn {
    flex: 0 0 auto;
    min-width: 8rem;
  }
}

@media (min-width: 40rem) {
  .pppoe-modal {
    place-items: center;
    padding: 1.25rem;
  }

  .role-modal-panel.pppoe-panel {
    border-radius: 22px;
  }

  .pppoe-panel::before {
    display: none;
  }

  .pppoe-head {
    padding: 1.15rem 1.5rem 1rem;
  }

  .pppoe-body {
    padding: 1.25rem 1.5rem 1.4rem;
    gap: 1.2rem;
  }

  .pppoe-foot {
    padding: 1rem 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .role-modal-panel.pppoe-panel {
    animation: none;
  }
}

[data-theme="light"] .role-modal-panel.pppoe-panel {
  --modal-ink: var(--ink);
  --modal-ink-soft: var(--ink-soft);
  --modal-muted: color-mix(in srgb, var(--ink-soft) 88%, transparent);
  --modal-border: var(--border);
  --modal-border-strong: var(--border-strong);
  --modal-surface: color-mix(in srgb, var(--ink) 3%, var(--surface-solid));
  --modal-surface-2: color-mix(in srgb, var(--ink) 5%, var(--surface-solid));
  --modal-signal: #a06a00;
  --modal-danger: var(--danger);
  --modal-danger-ink: color-mix(in srgb, var(--danger) 88%, #1a0a08);
  --modal-danger-soft: var(--danger-soft);
  --modal-danger-border: color-mix(in srgb, var(--danger) 32%, var(--border));
  --modal-danger-btn: var(--danger);
  background:
    radial-gradient(ellipse 70% 45% at 100% 0%, rgba(232, 163, 23, 0.1), transparent 55%),
    radial-gradient(ellipse 55% 40% at 0% 0%, rgba(14, 124, 134, 0.1), transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #f3f7f8 100%);
  color: var(--ink);
  box-shadow:
    0 -18px 48px rgba(11, 31, 42, 0.18),
    0 0 0 1px rgba(11, 31, 42, 0.06);
}

[data-theme="light"] .pppoe-panel::before {
  background: rgba(11, 31, 42, 0.18);
}

[data-theme="light"] .pppoe-head {
  border-bottom-color: rgba(11, 31, 42, 0.08);
  background: rgba(255, 255, 255, 0.7);
}

[data-theme="light"] .pppoe-kicker {
  border-color: rgba(160, 106, 0, 0.28);
  background: rgba(232, 163, 23, 0.12);
  color: #a06a00;
}

[data-theme="light"] .pppoe-sub,
[data-theme="light"] .pppoe-section-title,
[data-theme="light"] .pppoe-collapse-summary,
[data-theme="light"] .pppoe-grid .field-hint {
  color: var(--ink-soft);
}

[data-theme="light"] .pppoe-section {
  border-color: rgba(11, 31, 42, 0.08);
  background: rgba(255, 255, 255, 0.7);
}

[data-theme="light"] .pppoe-section-title::after,
[data-theme="light"] .pppoe-rule {
  background: rgba(11, 31, 42, 0.1);
}

[data-theme="light"] .pppoe-collapse-summary:hover,
[data-theme="light"] .pppoe-collapse[open] > .pppoe-collapse-summary {
  color: var(--ink);
}

[data-theme="light"] .pppoe-mini-btn {
  border-color: rgba(160, 106, 0, 0.35);
  background: rgba(232, 163, 23, 0.14);
  color: #8a5b00;
}

[data-theme="light"] .pppoe-mini-btn:hover {
  background: rgba(232, 163, 23, 0.24);
}

[data-theme="light"] .pppoe-optional {
  color: rgba(74, 101, 115, 0.7);
}

[data-theme="light"] .pppoe-close {
  border-color: var(--border-strong);
  background: rgba(11, 31, 42, 0.04);
  color: var(--ink);
}

[data-theme="light"] .pppoe-close:hover {
  background: rgba(11, 31, 42, 0.08);
}

[data-theme="light"] .pppoe-grid label {
  color: var(--ink);
}

[data-theme="light"] .pppoe-grid .form-control {
  border-color: var(--border-strong);
  background: #fff;
  color: var(--ink);
}

[data-theme="light"] .pppoe-grid .form-control::placeholder {
  color: rgba(74, 101, 115, 0.62);
}

[data-theme="light"] .pppoe-select::after {
  border-color: var(--ink-soft);
}

[data-theme="light"] .pppoe-select select.form-control option {
  background: #fff;
  color: var(--ink);
}

[data-theme="light"] .pppoe-grid .password-toggle {
  color: var(--ink-soft);
}

[data-theme="light"] .pppoe-grid .password-toggle:hover {
  color: var(--sea-deep);
  background: rgba(14, 124, 134, 0.08);
}

[data-theme="light"] .pppoe-body::-webkit-scrollbar-thumb {
  background: rgba(11, 31, 42, 0.18);
}

[data-theme="light"] .pppoe-foot {
  border-top-color: rgba(11, 31, 42, 0.08);
  background: rgba(244, 248, 249, 0.96);
}

[data-theme="light"] .pppoe-foot .btn-ghost {
  color: var(--ink);
  background: transparent;
  border-color: var(--border-strong);
}

[data-theme="light"] .pppoe-foot .btn-danger {
  background: var(--danger);
  box-shadow: 0 10px 24px rgba(192, 57, 43, 0.22);
}

[data-theme="light"] .pppoe-grid .field-error {
  color: var(--notice-error-fg);
}

[data-theme="light"] .pppoe-banner {
  color: #8a1f1f;
  border-color: rgba(176, 48, 48, 0.28);
  background: rgba(176, 48, 48, 0.08);
}

/* Client register / edit modal ? section layout */
.pppoe-head-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.45rem;
}

.pppoe-head-badges .pppoe-kicker {
  margin: 0;
}

.pppoe-kicker--edit {
  border-color: rgba(14, 124, 134, 0.42);
  background: rgba(14, 124, 134, 0.16);
  color: #5ec4cf;
}

.pppoe-service-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(232, 242, 244, 0.72);
}

.pppoe-modal--edit .role-modal-panel.pppoe-panel {
  background:
    radial-gradient(ellipse 75% 48% at 100% -8%, rgba(14, 124, 134, 0.2), transparent 55%),
    radial-gradient(ellipse 55% 42% at -5% 0%, rgba(232, 163, 23, 0.12), transparent 52%),
    linear-gradient(185deg, #1a3742 0%, #12252e 45%, #0d171d 100%);
}

.pppoe-section-head {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 0.85rem;
}

.pppoe-section-head-text {
  flex: 1 1 auto;
  min-width: 0;
}

.pppoe-section-head .pppoe-section-title {
  margin: 0;
}

.pppoe-section-head .pppoe-section-title::after {
  display: none;
}

.pppoe-section-desc {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(232, 242, 244, 0.52);
}

.pppoe-section-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(232, 242, 244, 0.88);
}

.pppoe-section-icon--profile {
  background: rgba(14, 124, 134, 0.18);
  border-color: rgba(14, 124, 134, 0.35);
  color: #6fd4de;
}

.pppoe-section-icon--connection {
  background: rgba(232, 163, 23, 0.16);
  border-color: rgba(232, 163, 23, 0.34);
  color: #f0b93a;
}

.pppoe-section-icon--remote {
  background: rgba(99, 132, 255, 0.16);
  border-color: rgba(99, 132, 255, 0.34);
  color: #9eb4ff;
}

.pppoe-section-icon--network {
  background: rgba(46, 204, 113, 0.14);
  border-color: rgba(46, 204, 113, 0.32);
  color: #7ee2a8;
}

.pppoe-step-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  border: 1px solid rgba(232, 163, 23, 0.42);
  background: rgba(232, 163, 23, 0.14);
  font-size: 0.72rem;
  font-weight: 800;
  color: #f0b93a;
}

.pppoe-status-badge {
  flex: 0 0 auto;
  align-self: center;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(46, 204, 113, 0.38);
  background: rgba(46, 204, 113, 0.12);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7ee2a8;
}

.pppoe-status-badge--prefill {
  border-color: rgba(99, 132, 255, 0.38);
  background: rgba(99, 132, 255, 0.14);
  color: #aebfff;
}

.pppoe-section--credentials {
  border-color: rgba(232, 163, 23, 0.16);
  background:
    linear-gradient(135deg, rgba(232, 163, 23, 0.06), transparent 55%),
    rgba(255, 255, 255, 0.03);
}

.pppoe-section--remote {
  border-color: rgba(99, 132, 255, 0.18);
  background:
    linear-gradient(135deg, rgba(99, 132, 255, 0.07), transparent 55%),
    rgba(255, 255, 255, 0.03);
}

.pppoe-section--network {
  border-color: rgba(46, 204, 113, 0.16);
}

.pppoe-credential-panel {
  padding: 0.85rem 0.9rem 0.15rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.14);
}

.pppoe-credential-panel .pppoe-grid {
  gap: 0.7rem 0.75rem;
}

.pppoe-foot-btn-label {
  display: inline-block;
}

@media (min-width: 40rem) {
  .role-modal-panel.pppoe-panel {
    width: min(100%, 42rem);
    max-height: min(92dvh, 48rem);
  }
}

[data-theme="light"] .pppoe-kicker--edit {
  border-color: rgba(14, 124, 134, 0.28);
  background: rgba(14, 124, 134, 0.1);
  color: var(--sea-deep);
}

[data-theme="light"] .pppoe-service-chip {
  border-color: rgba(11, 31, 42, 0.1);
  background: rgba(11, 31, 42, 0.04);
  color: var(--ink-soft);
}

[data-theme="light"] .pppoe-section-desc {
  color: rgba(74, 101, 115, 0.88);
}

[data-theme="light"] .pppoe-section-icon {
  border-color: rgba(11, 31, 42, 0.08);
  background: rgba(11, 31, 42, 0.04);
  color: var(--ink);
}

[data-theme="light"] .pppoe-section-icon--profile {
  background: rgba(14, 124, 134, 0.1);
  border-color: rgba(14, 124, 134, 0.22);
  color: var(--sea-deep);
}

[data-theme="light"] .pppoe-section-icon--connection {
  background: rgba(232, 163, 23, 0.1);
  border-color: rgba(232, 163, 23, 0.24);
  color: #9a6a00;
}

[data-theme="light"] .pppoe-section-icon--remote {
  background: rgba(66, 99, 235, 0.08);
  border-color: rgba(66, 99, 235, 0.2);
  color: #3f56c7;
}

[data-theme="light"] .pppoe-section-icon--network {
  background: rgba(46, 160, 92, 0.08);
  border-color: rgba(46, 160, 92, 0.2);
  color: #248a4a;
}

[data-theme="light"] .pppoe-step-badge {
  border-color: rgba(232, 163, 23, 0.28);
  background: rgba(232, 163, 23, 0.1);
  color: #9a6a00;
}

[data-theme="light"] .pppoe-status-badge {
  border-color: rgba(46, 160, 92, 0.24);
  background: rgba(46, 160, 92, 0.08);
  color: #248a4a;
}

[data-theme="light"] .pppoe-status-badge--prefill {
  border-color: rgba(66, 99, 235, 0.22);
  background: rgba(66, 99, 235, 0.08);
  color: #3f56c7;
}

[data-theme="light"] .pppoe-section--credentials,
[data-theme="light"] .pppoe-section--remote {
  background:
    linear-gradient(135deg, rgba(11, 31, 42, 0.03), transparent 55%),
    rgba(255, 255, 255, 0.72);
  border-color: rgba(11, 31, 42, 0.08);
}

[data-theme="light"] .pppoe-credential-panel {
  border-color: rgba(11, 31, 42, 0.07);
  background: rgba(244, 248, 249, 0.92);
}

[data-theme="light"] .pppoe-modal--edit .role-modal-panel.pppoe-panel {
  background:
    radial-gradient(ellipse 70% 45% at 100% 0%, rgba(14, 124, 134, 0.1), transparent 55%),
    radial-gradient(ellipse 55% 40% at 0% 0%, rgba(232, 163, 23, 0.08), transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #f3f7f8 100%);
}

/* ==========================================================================
   Client detail ? advanced cards with categories & icons
   ========================================================================== */

.client-detail-page {
  --cat-overview: #3db8c2;
  --cat-overview-soft: rgba(61, 184, 194, 0.14);
  --cat-billing: #e8a317;
  --cat-billing-soft: rgba(232, 163, 23, 0.16);
  --cat-live: #2ecc71;
  --cat-live-soft: rgba(46, 204, 113, 0.14);
  --cat-access: #4f8cff;
  --cat-access-soft: rgba(79, 140, 255, 0.14);
  --cat-vouchers: #2ec4b6;
  --cat-vouchers-soft: rgba(46, 196, 182, 0.16);
  --cat-router: #9b7bff;
  --cat-router-soft: rgba(155, 123, 255, 0.16);
  --cat-invoices: #ef6b5e;
  --cat-invoices-soft: rgba(239, 107, 94, 0.14);
  --card-radius: 16px;
  --tile-radius: 12px;
}

[data-theme="light"] .client-detail-page {
  --cat-overview: #0e7c86;
  --cat-overview-soft: rgba(14, 124, 134, 0.12);
  --cat-billing: #b45309;
  --cat-billing-soft: rgba(232, 163, 23, 0.16);
  --cat-live: #1f8a5b;
  --cat-live-soft: rgba(31, 138, 91, 0.12);
  --cat-access: #2563eb;
  --cat-access-soft: rgba(37, 99, 235, 0.12);
  --cat-vouchers: #0f766e;
  --cat-vouchers-soft: rgba(15, 118, 110, 0.12);
  --cat-router: #6d28d9;
  --cat-router-soft: rgba(109, 40, 217, 0.12);
  --cat-invoices: #c0392b;
  --cat-invoices-soft: rgba(192, 57, 43, 0.1);
}

/* Section cards ---------------------------------------------------------- */

.client-detail-page > .panel {
  --section-accent: var(--cat-overview);
  --section-soft: var(--cat-overview-soft);
  position: relative;
  margin-bottom: 0.85rem;
  padding: 1rem 1.05rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--section-soft), transparent 55%),
    linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 10px 28px rgba(8, 16, 22, 0.08);
  overflow: hidden;
}

[data-theme="dark"] .client-detail-page > .panel {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 14px 34px rgba(0, 0, 0, 0.28);
}

.client-detail-page > .panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--section-accent), transparent 78%);
  opacity: 0.95;
  pointer-events: none;
}

.client-detail-page > .panel[data-cat="overview"] {
  --section-accent: var(--cat-overview);
  --section-soft: var(--cat-overview-soft);
}

.client-detail-page > .panel[data-cat="billing"] {
  --section-accent: var(--cat-billing);
  --section-soft: var(--cat-billing-soft);
}

.client-detail-page > .panel[data-cat="vouchers"] {
  --section-accent: var(--cat-vouchers);
  --section-soft: var(--cat-vouchers-soft);
}

.client-detail-page > .panel[data-cat="live"] {
  --section-accent: var(--cat-live);
  --section-soft: var(--cat-live-soft);
}

.client-detail-page > .panel[data-cat="access"] {
  --section-accent: var(--cat-access);
  --section-soft: var(--cat-access-soft);
}

.client-detail-page > .panel[data-cat="router"] {
  --section-accent: var(--cat-router);
  --section-soft: var(--cat-router-soft);
}

.client-detail-page > .panel[data-cat="invoices"] {
  --section-accent: var(--cat-invoices);
  --section-soft: var(--cat-invoices-soft);
}

.client-detail-page > .panel:last-child {
  margin-bottom: 0;
}

.client-detail-page > .panel.is-fetching::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--section-accent), transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: client-scan 1.15s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes client-scan {
  from { background-position: -40% 0; }
  to { background-position: 140% 0; }
}

/* Category jump nav ------------------------------------------------------ */

.client-cat-nav {
  display: flex;
  gap: 0.45rem;
  margin: 0 0 0.95rem;
  padding: 0.35rem 0 0.65rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  position: sticky;
  top: 0;
  z-index: 6;
  background: color-mix(in srgb, var(--foam) 88%, transparent);
  backdrop-filter: blur(10px);
}

.client-cat-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  padding: 0.42rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: 0 4px 14px rgba(8, 16, 22, 0.06);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.client-cat-nav-item:hover,
.client-cat-nav-item:focus-visible {
  outline: none;
  transform: translateY(-1px);
}

.client-cat-nav-item.is-overview:hover,
.client-cat-nav-item.is-overview:focus-visible { background: var(--cat-overview-soft); color: var(--cat-overview); border-color: transparent; }
.client-cat-nav-item.is-billing:hover,
.client-cat-nav-item.is-billing:focus-visible { background: var(--cat-billing-soft); color: var(--cat-billing); border-color: transparent; }
.client-cat-nav-item.is-vouchers:hover,
.client-cat-nav-item.is-vouchers:focus-visible { background: var(--cat-vouchers-soft); color: var(--cat-vouchers); border-color: transparent; }
.client-cat-nav-item.is-live:hover,
.client-cat-nav-item.is-live:focus-visible { background: var(--cat-live-soft); color: var(--cat-live); border-color: transparent; }
.client-cat-nav-item.is-access:hover,
.client-cat-nav-item.is-access:focus-visible { background: var(--cat-access-soft); color: var(--cat-access); border-color: transparent; }
.client-cat-nav-item.is-router:hover,
.client-cat-nav-item.is-router:focus-visible { background: var(--cat-router-soft); color: var(--cat-router); border-color: transparent; }
.client-cat-nav-item.is-invoices:hover,
.client-cat-nav-item.is-invoices:focus-visible { background: var(--cat-invoices-soft); color: var(--cat-invoices); border-color: transparent; }

.client-cat-nav-item .client-cat-ico {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 0.45rem;
  background: var(--surface-3);
  color: inherit;
}

.client-cat-nav-item.is-overview .client-cat-ico { background: var(--cat-overview-soft); color: var(--cat-overview); }
.client-cat-nav-item.is-billing .client-cat-ico { background: var(--cat-billing-soft); color: var(--cat-billing); }
.client-cat-nav-item.is-vouchers .client-cat-ico { background: var(--cat-vouchers-soft); color: var(--cat-vouchers); }
.client-cat-nav-item.is-live .client-cat-ico { background: var(--cat-live-soft); color: var(--cat-live); }
.client-cat-nav-item.is-access .client-cat-ico { background: var(--cat-access-soft); color: var(--cat-access); }
.client-cat-nav-item.is-router .client-cat-ico { background: var(--cat-router-soft); color: var(--cat-router); }
.client-cat-nav-item.is-invoices .client-cat-ico { background: var(--cat-invoices-soft); color: var(--cat-invoices); }

/* Section category labels ------------------------------------------------ */

.client-cat {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.35rem;
  padding: 0.22rem 0.6rem 0.22rem 0.22rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.client-cat-ico {
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 0.45rem;
  flex: 0 0 auto;
}

.client-cat-billing { color: var(--cat-billing); background: var(--cat-billing-soft); }
.client-cat-billing .client-cat-ico { background: rgba(255, 255, 255, 0.22); color: var(--cat-billing); }
.client-cat-vouchers { color: var(--cat-vouchers); background: var(--cat-vouchers-soft); }
.client-cat-vouchers .client-cat-ico { background: rgba(255, 255, 255, 0.22); color: var(--cat-vouchers); }
.client-cat-live { color: var(--cat-live); background: var(--cat-live-soft); }
.client-cat-live .client-cat-ico { background: rgba(255, 255, 255, 0.22); color: var(--cat-live); }
.client-cat-access { color: var(--cat-access); background: var(--cat-access-soft); }
.client-cat-access .client-cat-ico { background: rgba(255, 255, 255, 0.22); color: var(--cat-access); }
.client-cat-router { color: var(--cat-router); background: var(--cat-router-soft); }
.client-cat-router .client-cat-ico { background: rgba(255, 255, 255, 0.22); color: var(--cat-router); }
.client-cat-invoices { color: var(--cat-invoices); background: var(--cat-invoices-soft); }
.client-cat-invoices .client-cat-ico { background: rgba(255, 255, 255, 0.22); color: var(--cat-invoices); }

.client-live-pulse {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: currentColor;
  animation: client-pulse 2.1s ease-out infinite;
}

@keyframes client-pulse {
  0% { box-shadow: 0 0 0 0 currentColor; opacity: 0.9; }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.client-detail-page .mikrotik-detail-toolbar {
  margin-bottom: 0.75rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border);
  gap: 0.5rem 0.9rem;
}

.client-detail-page .mikrotik-detail-toolbar-copy h2 {
  font-size: 1.08rem;
}

.client-detail-page .panel-sub {
  margin-top: 0.25rem;
  font-size: 0.84rem;
}

.client-detail-page .mikrotik-live-stamp {
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

.client-detail-page .btn {
  min-height: 2.3rem;
}

.client-detail-page .btn-ghost {
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
}

.client-detail-page .btn-primary {
  background: linear-gradient(135deg, #0c7a84 0%, #07545c 100%);
  color: #fff;
  border: 1px solid #064850;
  box-shadow: 0 10px 22px rgba(7, 84, 92, 0.28);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

.client-detail-page .btn-primary:hover {
  background: linear-gradient(135deg, #0a6a72 0%, #064850 100%);
  color: #fff;
}

[data-theme="dark"] .client-detail-page .btn-primary {
  background: linear-gradient(135deg, #1aa0ab 0%, #0c7a84 100%);
  border-color: #0e8a94;
  color: #fff;
}

/* Hero ------------------------------------------------------------------- */

.client-hero {
  display: grid;
  gap: 0.75rem;
}

.client-hero-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.9rem;
}

.client-hero .client-profile-open {
  padding: 0.35rem 0.5rem 0.35rem 0.35rem;
  border-radius: 0.95rem;
}

.client-hero .client-profile-avatar {
  width: 2.7rem;
  height: 2.7rem;
  flex-basis: 2.7rem;
  font-size: 1.1rem;
  background: linear-gradient(140deg, var(--cat-overview), var(--sea-deep));
  color: #fff;
  box-shadow: 0 0 0 4px var(--cat-overview-soft), 0 10px 22px rgba(14, 124, 134, 0.22);
}

.client-hero .client-profile-name {
  font-size: clamp(1.1rem, 2.8vw, 1.32rem);
}

.client-hero .client-profile-open-hint {
  padding: 0.32rem 0.7rem;
  font-size: 0.74rem;
}

/* Metric / detail tiles (cards) ------------------------------------------ */

.client-kv-list,
.client-kv-row,
.client-detail-page .client-usage-stats,
.client-detail-page .client-live-facts,
.client-detail-page .client-access-grid,
.client-detail-page .client-usage-grid,
.client-detail-page .mikrotik-live-grid {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 0.55rem;
  border-top: 0;
  background: transparent;
}

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

.client-kv-row,
.client-detail-page .client-usage-stats,
.client-detail-page .client-live-facts,
.client-detail-page .client-access-grid,
.client-detail-page .client-usage-grid,
.client-detail-page .mikrotik-live-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
}

.client-kv,
.client-detail-page .client-usage-stat,
.client-detail-page .client-live-fact,
.client-detail-page .client-access-card,
.client-detail-page .mikrotik-live-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  align-items: start;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0.75rem 0.8rem 0.8rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--tile-radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 55%),
    var(--surface);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

[data-theme="light"] .client-kv,
[data-theme="light"] .client-detail-page .client-usage-stat,
[data-theme="light"] .client-detail-page .client-live-fact,
[data-theme="light"] .client-detail-page .client-access-card,
[data-theme="light"] .client-detail-page .mikrotik-live-card {
  background: linear-gradient(180deg, #fff, var(--surface-2));
  box-shadow: 0 6px 16px rgba(11, 31, 42, 0.04);
}

.client-kv:hover,
.client-detail-page .client-usage-stat:hover,
.client-detail-page .client-live-fact:hover,
.client-detail-page .client-access-card:hover,
.client-detail-page .mikrotik-live-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--section-accent) 45%, var(--border-strong));
  box-shadow: 0 12px 24px rgba(8, 16, 22, 0.1);
}

.client-kv-list .client-kv {
  border-bottom: 1px solid var(--border-strong);
}

.client-kv dt,
.client-detail-page .client-usage-stat span,
.client-detail-page .client-live-fact dt,
.client-detail-page .client-access-label,
.client-detail-page .mikrotik-live-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.78;
}

.client-row-ico {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 0.5rem;
  flex: 0 0 auto;
  background: var(--surface-3);
  color: var(--ink-soft);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

[data-cat="overview"] .client-row-ico,
[data-hero-chip] .client-row-ico {
  background: var(--cat-overview-soft);
  color: var(--cat-overview);
}

[data-cat="billing"] .client-row-ico {
  background: var(--cat-billing-soft);
  color: var(--cat-billing);
}

[data-cat="live"] .client-row-ico {
  background: var(--cat-live-soft);
  color: var(--cat-live);
}

[data-cat="live"] [data-ico="down"] .client-row-ico {
  background: rgba(79, 140, 255, 0.14);
  color: #4f8cff;
}

[data-cat="live"] [data-ico="up"] .client-row-ico {
  background: rgba(232, 163, 23, 0.16);
  color: #e8a317;
}

[data-cat="access"] .client-row-ico {
  background: var(--cat-access-soft);
  color: var(--cat-access);
}

[data-cat="router"] .client-row-ico {
  background: var(--cat-router-soft);
  color: var(--cat-router);
}

[data-cat="invoices"] .client-row-ico {
  background: var(--cat-invoices-soft);
  color: var(--cat-invoices);
}

[data-cat="invoices"] [data-ico="paid"] .client-row-ico {
  background: var(--cat-live-soft);
  color: var(--cat-live);
}

[data-cat="invoices"] [data-ico="pending"] .client-row-ico {
  background: var(--cat-billing-soft);
  color: var(--cat-billing);
}

.client-kv dd,
.client-detail-page .client-live-fact dd {
  margin: 0;
  min-width: 0;
}

.client-kv strong,
.client-hero-chip-value,
.client-detail-page .client-usage-stat strong,
.client-detail-page .client-live-fact strong,
.client-detail-page .client-access-value,
.client-detail-page .mikrotik-live-value {
  display: block;
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.client-kv dd > span,
.client-detail-page .client-live-fact span,
.client-detail-page .client-access-hint,
.client-detail-page .mikrotik-live-hint {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.72rem;
  line-height: 1.35;
  opacity: 0.55;
}

.client-kv.is-good strong,
.client-usage-panel.is-online [data-metric="session"] .mikrotik-live-value {
  color: var(--cat-live);
}

.client-kv.is-bad strong,
.client-usage-panel.is-offline [data-metric="session"] .mikrotik-live-value {
  color: var(--cat-invoices);
}

.client-kv.is-idle strong {
  color: var(--cat-billing);
}

.client-kv.is-good,
.client-usage-panel.is-online [data-metric="session"] {
  border-color: color-mix(in srgb, var(--cat-live) 40%, var(--border-strong));
}

.client-kv.is-bad,
.client-usage-panel.is-offline [data-metric="session"] {
  border-color: color-mix(in srgb, var(--cat-invoices) 40%, var(--border-strong));
}

.client-meter {
  height: 0.28rem;
  margin: 0.4rem 0 0.15rem;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}

.client-meter > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cat-overview), var(--cat-live));
  transition: width 0.45s ease;
}

.client-meter.is-hot > span {
  background: linear-gradient(90deg, var(--cat-billing), var(--cat-invoices));
}

.client-period-progress {
  display: grid;
  gap: 0.3rem;
  margin: 0 0 0.7rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--tile-radius);
  background: var(--surface);
}

.client-period-progress-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  font-size: 0.76rem;
  font-weight: 700;
  opacity: 0.75;
}

.client-period-progress-pct {
  font-variant-numeric: tabular-nums;
}

.client-period-track {
  height: 0.4rem;
  border-radius: 999px;
  border: 0;
  background: var(--surface-3);
  overflow: hidden;
}

.client-period-track > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cat-billing), var(--cat-overview));
  transition: width 0.55s ease;
}

.client-period-progress.is-ending .client-period-track > span {
  background: linear-gradient(90deg, var(--cat-billing), #e67e22);
}

.client-period-progress.is-spent .client-period-track > span {
  background: linear-gradient(90deg, #e67e22, var(--cat-invoices));
}

.client-subscription-banner {
  margin: 0 0 0.7rem;
  padding: 0.55rem 0.8rem;
  border-radius: 0.75rem;
  font-size: 0.84rem;
}

.client-access-note {
  margin: 0.7rem 0 0;
  font-size: 0.78rem;
}

.client-router-password-form {
  margin: 0 0 0.75rem;
  padding: 0.75rem 0.85rem;
  border-radius: var(--tile-radius);
  border: 1px solid var(--signal-soft);
  background: linear-gradient(180deg, var(--signal-soft), transparent);
}

.client-detail-page .clients-table-wrap {
  margin-top: 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--tile-radius);
  background: var(--surface);
  overflow: hidden;
}

.client-detail-page .table th,
.client-detail-page .table td {
  padding: 0.55rem 0.75rem;
}

.client-detail-page .table tbody tr:hover {
  background: var(--surface-3);
}

.client-billing-analysis .client-usage-stats {
  margin-bottom: 0.95rem;
}

.client-billing-subhead {
  margin: 0.8rem 0 0.45rem;
  font-size: 0.9rem;
}

.client-billing-split > div {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--tile-radius);
  background: var(--surface);
}

@media (max-width: 900px) {
  .client-kv-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .client-detail-page > .panel {
    padding: 0.85rem 0.8rem 0.9rem;
    border-radius: 14px;
  }

  .client-cat-nav {
    margin-left: -0.1rem;
    margin-right: -0.1rem;
    padding-left: 0.1rem;
    padding-right: 0.1rem;
  }

  .client-kv-row,
  .client-detail-page .client-usage-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-kv,
  .client-detail-page .client-usage-stat,
  .client-detail-page .client-live-fact,
  .client-detail-page .client-access-card,
  .client-detail-page .mikrotik-live-card {
    padding: 0.65rem 0.7rem 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-detail-page > .panel.is-fetching::after,
  .client-live-pulse {
    animation: none;
  }

  .client-meter > span,
  .client-period-track > span,
  .client-kv,
  .client-detail-page .client-usage-stat,
  .client-cat-nav-item {
    transition: none;
  }

  .client-kv:hover,
  .client-detail-page .client-usage-stat:hover,
  .client-cat-nav-item:hover {
    transform: none;
  }
}

/* Usage analysis charts -------------------------------------------------- */

.client-usage-analysis-page {
  width: min(100%, 78rem);
  max-width: 78rem;
  margin-inline: auto;
  gap: 0;
  overflow-x: clip;
}

.client-usage-analysis-page .client-cat-nav-item.is-active {
  background: var(--cat-live-soft);
  color: var(--cat-live);
  border-color: transparent;
}

.client-usage-analysis-page.is-service-hotspot .clients-usage-workspace-head {
  background:
    radial-gradient(ellipse 55% 90% at 0% -10%, color-mix(in srgb, #059669 20%, transparent), transparent 58%),
    radial-gradient(ellipse 42% 70% at 100% 110%, color-mix(in srgb, var(--signal) 12%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, #059669 7%, transparent), transparent 72%);
}

.client-usage-analysis-page.is-service-hotspot .clients-usage-workspace-mark {
  border-color: color-mix(in srgb, #059669 28%, var(--border));
  background: color-mix(in srgb, #059669 12%, var(--surface));
  color: #059669;
}

.client-usage-analysis-page.is-service-hotspot .clients-usage-workspace-kicker,
.client-usage-analysis-page.is-service-hotspot .clients-usage-section-kicker {
  color: #059669;
}

.client-usage-analysis-page .client-usage-toolbar {
  align-items: stretch;
}

.client-usage-analysis-page .client-usage-range-wrap {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.client-usage-analysis-page .usage-range-filter {
  width: 100%;
}

.client-usage-analysis-page .clients-usage-stat-grid {
  margin: 0.85rem 0 0;
  gap: 0.7rem;
}

.client-usage-analysis-page .client-usage-stat {
  border-radius: 14px;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.client-usage-analysis-page .client-usage-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--cat-live, #2ecc71) 12%, transparent);
}

.client-usage-insight {
  margin: 0;
  padding: 0.8rem 1rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--cat-live, #2ecc71) 22%, var(--border-strong));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cat-live, #2ecc71) 12%, transparent), transparent 70%),
    color-mix(in srgb, var(--surface-2, var(--surface)) 88%, transparent);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
}

.client-usage-insight[data-tracking="empty"],
.client-usage-insight[data-tracking="warming"] {
  border-color: color-mix(in srgb, var(--warn, #e8a317) 35%, var(--border-strong));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--warn, #e8a317) 14%, transparent), transparent 70%),
    color-mix(in srgb, var(--surface-2, var(--surface)) 88%, transparent);
}

.client-usage-stat[data-stat="status"].is-online {
  border-color: color-mix(in srgb, #1faa5b 28%, var(--border-strong));
  background: color-mix(in srgb, #1faa5b 7%, var(--surface));
}

.client-usage-stat[data-stat="status"].is-online strong {
  color: #1faa5b;
}

.client-usage-stat[data-stat="status"].is-offline {
  border-color: color-mix(in srgb, #c0392b 28%, var(--border-strong));
  background: color-mix(in srgb, #c0392b 6%, var(--surface));
}

.client-usage-stat[data-stat="status"].is-offline strong {
  color: #c0392b;
}

.client-usage-stat[data-stat="status"].is-blocked {
  border-color: color-mix(in srgb, #d68910 30%, var(--border-strong));
  background: color-mix(in srgb, #d68910 7%, var(--surface));
}

.client-usage-stat[data-stat="status"].is-blocked strong {
  color: #d68910;
}

.client-usage-stat[data-stat="status"].is-waiting strong {
  color: var(--muted, #64748b);
}

.client-usage-access-section {
  border-top: 1px solid var(--border);
}

.client-usage-devices-section {
  margin-top: 1.25rem;
}

.client-usage-devices-section .clients-usage-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
}

.client-usage-devices-tools {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
}

.client-usage-devices-section.is-fetching [data-usage-devices-stamp] {
  opacity: 0.72;
}

.client-usage-devices-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin: 0 0 0.85rem;
  padding: 0.75rem 0.95rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, #e74c3c 36%, var(--border-strong));
  background: color-mix(in srgb, #e74c3c 10%, transparent);
  color: var(--text);
}

.client-usage-devices-alert[hidden] {
  display: none !important;
}

.client-usage-devices-alert p {
  margin: 0;
  flex: 1 1 14rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
}

.client-usage-devices-alert-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.client-usage-devices-alert.is-password {
  border-color: color-mix(in srgb, #e8a317 40%, var(--border-strong));
  background: color-mix(in srgb, #e8a317 12%, transparent);
}

.client-usage-devices-shell {
  margin-top: 0.75rem;
}

.client-usage-devices-table tr.is-online td:first-child {
  font-weight: 650;
}

.client-usage-devices-table tr.is-offline td {
  opacity: 0.78;
}

.client-usage-access-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
}

.clients-usage-section-kicker-billing {
  color: var(--cat-billing, #b45309);
}

.clients-usage-section-kicker-billing .clients-usage-section-ico {
  background: color-mix(in srgb, var(--cat-billing, #b45309) 14%, transparent);
}

.client-usage-access-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.client-usage-access-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 750;
  color: var(--ink-soft);
}

.client-usage-access-legend span {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #4f8cff;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent);
}

.client-usage-access-legend .is-payment { background: #4f8cff; color: #4f8cff; }
.client-usage-access-legend .is-start { background: #2ecc71; color: #2ecc71; }
.client-usage-access-legend .is-end { background: #9b59b6; color: #9b59b6; }
.client-usage-access-legend .is-blocked { background: #e74c3c; color: #e74c3c; }

.client-usage-access-alert {
  margin: 0 0 0.85rem;
  padding: 0.75rem 0.95rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, #e8a317 40%, var(--border-strong));
  background: color-mix(in srgb, #e8a317 12%, transparent);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
}

.client-usage-access-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0 0 1rem;
}

.client-usage-access-facts > div {
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 4%, transparent), transparent 55%),
    color-mix(in srgb, var(--surface-2, var(--surface)) 90%, transparent);
  min-width: 0;
}

[data-theme="light"] .client-usage-access-facts > div {
  background: linear-gradient(180deg, #fff, var(--surface-2));
}

.client-usage-access-facts dt {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
}

.client-usage-access-facts dd {
  margin: 0.28rem 0 0;
  font-size: 0.92rem;
  font-weight: 750;
  color: var(--text);
  line-height: 1.3;
  word-break: break-word;
}

.client-usage-access-fact-now dd {
  color: var(--cat-billing, #b45309);
}

.client-usage-timeline {
  --tl-rail: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0.15rem 0 0.25rem;
  display: grid;
  gap: 0;
  position: relative;
}

.client-usage-timeline::before {
  content: "";
  position: absolute;
  top: 0.55rem;
  bottom: 0.55rem;
  left: calc(var(--tl-rail) / 2);
  width: 2px;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--border-strong) 85%, transparent);
  pointer-events: none;
}

.client-usage-timeline-item {
  display: grid;
  grid-template-columns: var(--tl-rail) minmax(6.5rem, 8.5rem) auto minmax(0, 1fr);
  gap: 0.35rem 0.7rem;
  align-items: center;
  padding: 0.55rem 0.35rem 0.55rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  min-width: 0;
}

.client-usage-timeline-item + .client-usage-timeline-item {
  border-top: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
}

.client-usage-timeline-item:hover {
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 55%, transparent);
  border-radius: 10px;
  box-shadow: none;
  transform: none;
}

.client-usage-timeline-rail {
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  align-self: stretch;
}

.client-usage-timeline-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: currentColor;
  color: #4f8cff;
  border: 2px solid var(--surface-solid, var(--surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 35%, transparent);
}

.client-usage-timeline-item.is-start .client-usage-timeline-dot { color: #2ecc71; }
.client-usage-timeline-item.is-payment .client-usage-timeline-dot { color: #4f8cff; }
.client-usage-timeline-item.is-blocked .client-usage-timeline-dot,
.client-usage-timeline-item.is-warn .client-usage-timeline-dot { color: #e74c3c; }
.client-usage-timeline-item.is-end .client-usage-timeline-dot { color: #9b59b6; }

.client-usage-timeline-item.is-early {
  background: color-mix(in srgb, #e74c3c 6%, transparent);
  border-radius: 10px;
}

.client-usage-timeline-item.is-future {
  opacity: 0.7;
}

.client-usage-timeline-time {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted, #64748b);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.client-usage-timeline-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.55rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 28%, var(--border));
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: #4f8cff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.client-usage-timeline-item.is-start .client-usage-timeline-badge { color: #1f8a5b; }
.client-usage-timeline-item.is-payment .client-usage-timeline-badge { color: #2563eb; }
.client-usage-timeline-item.is-blocked .client-usage-timeline-badge,
.client-usage-timeline-item.is-warn .client-usage-timeline-badge { color: #c0392b; }
.client-usage-timeline-item.is-end .client-usage-timeline-badge { color: #7c3aed; }

.client-usage-timeline-detail {
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--ink-soft);
  min-width: 0;
  overflow-wrap: anywhere;
}

.client-usage-timeline-empty {
  padding: 1rem 1.05rem;
  border: 1px dashed var(--border-strong);
  border-radius: 14px;
  color: var(--muted, #64748b);
  font-size: 0.9rem;
  text-align: center;
}

.client-usage-empty {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: clamp(1.4rem, 4vw, 2rem) 1.1rem;
  border: 1px dashed color-mix(in srgb, var(--cat-live, #2ecc71) 28%, var(--border-strong));
  border-radius: 16px;
  text-align: center;
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, color-mix(in srgb, var(--cat-live, #2ecc71) 10%, transparent), transparent 70%),
    color-mix(in srgb, var(--surface-2, var(--surface)) 85%, transparent);
}

.client-usage-empty-ico {
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  margin-bottom: 0.25rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--cat-live, #2ecc71) 24%, var(--border));
  background: color-mix(in srgb, var(--cat-live, #2ecc71) 10%, var(--surface));
  color: var(--cat-live, #1f8a5b);
}

.client-usage-empty-title {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.client-usage-empty-text {
  margin: 0;
  max-width: 28rem;
  opacity: 0.75;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.client-usage-chart-error {
  margin: 0 0 0.85rem;
  padding: 0.75rem 0.95rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, #c0392b 35%, var(--border-strong));
  background: color-mix(in srgb, #c0392b 10%, transparent);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
}

.client-usage-chart-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.client-usage-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.client-usage-chart-card {
  min-width: 0;
  padding: 1rem 1.05rem 1.1rem;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 50%),
    var(--surface);
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 35%, transparent) inset;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.client-usage-chart-card:hover {
  border-color: color-mix(in srgb, var(--sea) 28%, var(--border-strong));
  box-shadow: 0 14px 28px color-mix(in srgb, #0b1f2a 8%, transparent);
  transform: translateY(-1px);
}

[data-theme="light"] .client-usage-chart-card {
  background: linear-gradient(180deg, #fff, var(--surface-2));
}

.client-usage-chart-card-wide {
  grid-column: 1 / -1;
}

.client-usage-chart-card header h3 {
  margin: 0.2rem 0 0.25rem;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.client-usage-chart-card header p:last-child {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  opacity: 0.68;
}

.client-usage-chart-wrap {
  position: relative;
  height: clamp(200px, 28vw, 240px);
  margin-top: 0.75rem;
}

.client-usage-chart-wrap-tall {
  height: clamp(220px, 32vw, 270px);
}

@media (max-width: 1100px) {
  .client-usage-analysis-page .clients-usage-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .client-usage-chart-grid {
    grid-template-columns: 1fr;
  }

  .client-usage-chart-card-wide {
    grid-column: auto;
  }

  .client-usage-access-facts {
    grid-template-columns: 1fr;
  }

  .client-usage-access-head {
    align-items: flex-start;
  }
}

@media (max-width: 720px) {
  .client-usage-timeline-item {
    grid-template-columns: var(--tl-rail) minmax(0, 1fr);
    grid-template-areas:
      "rail time"
      "rail badge"
      "rail detail";
    gap: 0.2rem 0.65rem;
    padding: 0.65rem 0.2rem 0.65rem 0;
  }

  .client-usage-timeline-rail { grid-area: rail; }
  .client-usage-timeline-time { grid-area: time; }
  .client-usage-timeline-badge {
    grid-area: badge;
    justify-self: start;
  }
  .client-usage-timeline-detail { grid-area: detail; }

  .client-usage-analysis-page .clients-usage-stat-grid {
    grid-template-columns: 1fr;
  }

  .client-usage-analysis-page .client-usage-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .client-usage-analysis-page .clients-usage-stamp {
    margin-left: 0;
    align-self: flex-start;
  }

  .client-usage-chart-wrap,
  .client-usage-chart-wrap-tall {
    height: 220px;
  }
}

@media (max-width: 480px) {
  .client-usage-chart-wrap,
  .client-usage-chart-wrap-tall {
    height: 200px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-usage-analysis-page .client-usage-stat,
  .client-usage-analysis-page .client-usage-chart-card {
    transition: none;
  }

  .client-usage-analysis-page .client-usage-stat:hover,
  .client-usage-analysis-page .client-usage-chart-card:hover {
    transform: none;
  }
}

.clients-general-usage-page {
  width: min(100%, 92rem);
  max-width: 92rem;
  margin-inline: auto;
  gap: 0;
  overflow-x: clip;
}

.clients-usage-workspace {
  display: grid;
  min-width: 0;
  gap: 0;
  border: 1px solid color-mix(in srgb, var(--cat-live, #2ecc71) 14%, var(--border-strong, var(--border)));
  border-radius: 18px;
  background: var(--surface-solid, var(--surface));
  box-shadow: var(--card-shadow, 0 10px 28px color-mix(in srgb, var(--ink) 6%, transparent));
  overflow: clip;
  animation: clients-usage-rise 0.38s ease both;
}

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

.clients-usage-workspace-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem 1.15rem;
  flex-wrap: wrap;
  padding: clamp(0.95rem, 1.8vw, 1.2rem) clamp(1rem, 2vw, 1.35rem);
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cat-live, #2ecc71) 6%, transparent), transparent 85%);
}

.clients-general-usage-page.is-tab-hotspot .clients-usage-workspace-head {
  background:
    linear-gradient(180deg, color-mix(in srgb, #059669 6%, transparent), transparent 85%);
}

.clients-usage-workspace-title {
  min-width: 0;
  flex: 1 1 18rem;
}

.clients-usage-workspace-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.clients-usage-workspace-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--cat-live, #2ecc71) 22%, var(--border));
  background: color-mix(in srgb, var(--cat-live, #2ecc71) 10%, var(--surface));
  color: var(--cat-live, #1f8a5b);
}

.clients-general-usage-page.is-tab-hotspot .clients-usage-workspace-mark {
  border-color: color-mix(in srgb, #059669 22%, var(--border));
  background: color-mix(in srgb, #059669 10%, var(--surface));
  color: #059669;
}

.clients-usage-workspace-kicker {
  margin: 0 0 0.12rem;
  color: var(--cat-live, #1f8a5b);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.clients-general-usage-page.is-tab-hotspot .clients-usage-workspace-kicker {
  color: #059669;
}

.clients-usage-workspace-title h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.22rem, 1.05rem + 0.55vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--ink);
}

.clients-usage-workspace-lead {
  margin: 0.35rem 0 0;
  max-width: 46rem;
  color: var(--ink-soft);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.4;
}

.clients-usage-workspace-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.7rem 0 0;
}

.clients-usage-pill {
  --pill-tone: var(--sea);
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.62rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--pill-tone) 28%, var(--border));
  background: color-mix(in srgb, var(--pill-tone) 12%, transparent);
  color: var(--pill-tone);
  font-size: 0.72rem;
  font-weight: 750;
  white-space: nowrap;
}

.clients-usage-pill.tone-pppoe { --pill-tone: #0e7c86; }
.clients-usage-pill.tone-hotspot { --pill-tone: #059669; }
.clients-usage-pill.tone-range { --pill-tone: var(--cat-live, #1f8a5b); }
.clients-usage-pill.tone-router { --pill-tone: #0369a1; }

.clients-usage-workspace-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  flex: 0 0 auto;
}

.clients-usage-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* Unified filters / controls */
.clients-usage-control-deck {
  display: grid;
  gap: 0.7rem;
  padding: 0.85rem clamp(1rem, 2vw, 1.35rem) 0.95rem;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2, var(--surface)) 70%, transparent), transparent);
}

.clients-usage-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--cat-live, #2ecc71) 3.5%, transparent);
}

.clients-usage-control-deck .clients-usage-toolbar {
  padding: 0;
  border: 0;
  background: transparent;
  gap: 0.65rem 0.85rem;
}

.clients-general-usage-page .clients-general-usage-tabs {
  margin: 0;
  flex: 1 1 auto;
}

.clients-usage-router-filter {
  flex: 0 1 15rem;
  margin: 0;
  min-width: min(100%, 11.5rem);
}

.clients-usage-stamp {
  margin-left: auto;
  align-self: center;
}

.clients-general-usage-page .clients-general-usage-router-note,
.clients-general-usage-page .clients-general-usage-widen-note {
  margin: 0;
}

.clients-usage-range-nav {
  margin: 0.75rem 1.15rem 0;
  padding: 0;
  position: static;
  top: auto;
  z-index: auto;
  background: transparent;
  backdrop-filter: none;
}

.clients-usage-range-wrap,
.client-usage-range-wrap {
  margin: 0.75rem 1.15rem 0;
  padding: 0;
}

.clients-usage-control-deck .clients-usage-range-wrap {
  margin: 0;
}

.clients-general-usage-page .clients-usage-range-wrap .usage-range-filter {
  border-radius: 14px;
  padding: 0.5rem 0.6rem;
}

.client-usage-analysis-page .client-usage-toolbar .client-usage-range-wrap {
  margin: 0;
}

/* Usage range filter ? compact single-bar control */
.usage-range-filter {
  --urf-tone: var(--cat-live, #1f8a5b);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  padding: 0.45rem 0.55rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--urf-tone) 18%, var(--border));
  background: color-mix(in srgb, var(--surface-solid, var(--surface)) 92%, var(--urf-tone) 8%);
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.usage-range-filter .urf-modes {
  display: inline-flex;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  gap: 0.15rem;
  padding: 0.18rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-solid, var(--surface));
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.usage-range-filter .urf-modes::-webkit-scrollbar {
  display: none;
}

.usage-range-filter .urf-mode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.38rem 0.72rem;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background 0.14s ease, color 0.14s ease;
}

.usage-range-filter .urf-mode input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.usage-range-filter .urf-mode.is-active {
  background: color-mix(in srgb, var(--urf-tone) 16%, var(--surface));
  color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--urf-tone) 28%, transparent);
}

.usage-range-filter .urf-mode:hover:not(.is-active) {
  color: var(--ink);
  background: color-mix(in srgb, var(--urf-tone) 6%, transparent);
}

.usage-range-filter .urf-controls {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.55rem;
  min-width: 0;
}

.usage-range-filter .urf-panel {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  min-width: 0;
}

.usage-range-filter .urf-panel[hidden] {
  display: none !important;
}

.usage-range-filter .urf-panel-period {
  flex-wrap: nowrap;
}

.usage-range-filter .urf-field {
  display: flex;
  flex: 1 1 8.5rem;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  margin: 0;
  padding: 0.2rem 0.35rem 0.2rem 0.55rem;
  border-radius: 9px;
  border: 1px solid var(--input-border, var(--border));
  background: var(--input-bg, var(--surface-solid, var(--surface)));
  cursor: text;
}

.usage-range-filter .urf-label {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.usage-range-filter .urf-field input,
.usage-range-filter .urf-field select {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 2rem;
  padding: 0.2rem 0.25rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  box-sizing: border-box;
}

.usage-range-filter .urf-field input:focus,
.usage-range-filter .urf-field select:focus {
  outline: none;
}

.usage-range-filter .urf-field:focus-within {
  border-color: color-mix(in srgb, var(--urf-tone) 45%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--urf-tone) 14%, transparent);
}

.usage-range-filter .urf-range-sep {
  flex: 0 0 auto;
  color: var(--ink-soft);
  font-weight: 600;
  line-height: 1;
  opacity: 0.7;
}

.usage-range-filter .urf-apply {
  flex: 0 0 auto;
  min-height: 2.35rem;
  padding-inline: 1rem;
  border-radius: 999px;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--urf-tone) 22%, transparent);
}

@media (max-width: 720px) {
  .usage-range-filter {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    padding: 0.55rem;
  }

  .usage-range-filter .urf-modes {
    width: 100%;
    justify-content: space-between;
  }

  .usage-range-filter .urf-mode {
    flex: 1 1 0;
    padding-inline: 0.4rem;
    font-size: 0.76rem;
  }

  .usage-range-filter .urf-controls {
    width: 100%;
  }

  .usage-range-filter .urf-panel-period {
    flex-wrap: wrap;
  }

  .usage-range-filter .urf-range-sep {
    display: none;
  }

  .usage-range-filter .urf-field {
    flex: 1 1 calc(50% - 0.3rem);
  }

  .usage-range-filter .urf-apply {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .usage-range-filter .urf-field {
    flex: 1 1 100%;
  }
}

.clients-usage-overview,
.clients-usage-charts {
  padding: clamp(1rem, 1.8vw, 1.25rem) clamp(1rem, 2vw, 1.35rem);
  border-top: 1px solid var(--border);
}

.clients-general-usage-page .clients-usage-overview {
  border-top: 0;
  background: color-mix(in srgb, var(--cat-live, #2ecc71) 2.5%, transparent);
}

.clients-general-usage-page.is-tab-hotspot .clients-usage-overview {
  background: color-mix(in srgb, #059669 2.5%, transparent);
}

.clients-usage-section-head {
  margin-bottom: 0.85rem;
}

.clients-usage-section-head-inline {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.clients-usage-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.3rem;
  color: var(--cat-live, #1f8a5b);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.clients-usage-section-ico {
  display: inline-grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--cat-live, #2ecc71) 14%, transparent);
  color: inherit;
}

.clients-usage-section-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 0.96rem + 0.25vw, 1.18rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.clients-usage-fup-panel {
  margin: 0;
  padding: clamp(1rem, 1.8vw, 1.25rem) clamp(1rem, 2vw, 1.35rem);
  border-top: 1px solid var(--border);
}

.clients-usage-fup-summary {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--ink-soft);
}

.clients-usage-fup-summary span {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel-border, #d8dde6) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--panel-border, #d8dde6) 70%, transparent);
}

.clients-usage-fup-empty {
  margin: 0;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--panel-border, #d8dde6) 80%, transparent);
  color: var(--ink-soft);
  font-size: 0.9rem;
  background: color-mix(in srgb, var(--panel, #fff) 92%, transparent);
}

.clients-usage-fup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
}

.clients-usage-fup-card {
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--panel-border, #d8dde6) 78%, transparent);
  background: color-mix(in srgb, var(--panel, #fff) 96%, transparent);
  overflow: hidden;
}

.clients-usage-fup-card.is-mid {
  border-color: color-mix(in srgb, #f59e0b 34%, var(--panel-border, #d8dde6));
}

.clients-usage-fup-card.is-near {
  border-color: color-mix(in srgb, #f59e0b 55%, var(--panel-border, #d8dde6));
  background: color-mix(in srgb, #f59e0b 7%, var(--panel, #fff));
}

.clients-usage-fup-card.is-hit {
  border-color: color-mix(in srgb, #ef4444 55%, var(--panel-border, #d8dde6));
  background: color-mix(in srgb, #ef4444 8%, var(--panel, #fff));
}

.clients-usage-fup-card-link {
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem 0.9rem 0.8rem;
  color: inherit;
  text-decoration: none;
}

.clients-usage-fup-card-link:hover,
.clients-usage-fup-card-link:focus-visible {
  background: color-mix(in srgb, var(--accent, #2563eb) 5%, transparent);
}

.clients-usage-fup-card-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.65rem;
  align-items: center;
}

.clients-usage-fup-card-copy {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.clients-usage-fup-card-copy strong {
  font-size: 0.92rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clients-usage-fup-card-copy span {
  font-size: 0.74rem;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clients-usage-fup-card-pct strong {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.clients-usage-fup-track {
  height: 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel-border, #d8dde6) 70%, transparent);
  overflow: hidden;
}

.clients-usage-fup-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  transition: width 0.35s ease;
}

.clients-usage-fup-card.is-mid .clients-usage-fup-fill {
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
}

.clients-usage-fup-card.is-near .clients-usage-fup-fill {
  background: linear-gradient(90deg, #fb923c, #ea580c);
}

.clients-usage-fup-card.is-hit .clients-usage-fup-fill {
  background: linear-gradient(90deg, #f87171, #dc2626);
}

.clients-usage-fup-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.74rem;
  color: var(--ink-soft);
}

.clients-usage-fup-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.clients-usage-fup-badge.is-near {
  color: #9a3412;
  background: rgba(249, 115, 22, 0.16);
}

.clients-usage-fup-badge.is-hit {
  color: #991b1b;
  background: rgba(239, 68, 68, 0.16);
}

.clients-usage-fup-cell {
  display: grid;
  gap: 0.18rem;
  min-width: 4.5rem;
}

.clients-usage-fup-cell strong {
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
}

.clients-usage-fup-cell small {
  color: var(--ink-soft);
  font-size: 0.7rem;
}

.clients-usage-fup-mini-track {
  display: block;
  height: 0.28rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel-border, #d8dde6) 70%, transparent);
  overflow: hidden;
}

.clients-usage-fup-mini-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #22c55e;
}

.clients-usage-fup-cell.is-near .clients-usage-fup-mini-fill {
  background: #ea580c;
}

.clients-usage-fup-cell.is-hit .clients-usage-fup-mini-fill {
  background: #dc2626;
}

.clients-usage-fup-na {
  color: var(--ink-soft);
}

[data-theme="dark"] .clients-usage-fup-badge.is-near,
:root:not([data-theme="light"]) .clients-usage-fup-badge.is-near {
  color: #fdba74;
  background: rgba(249, 115, 22, 0.18);
}

[data-theme="dark"] .clients-usage-fup-badge.is-hit,
:root:not([data-theme="light"]) .clients-usage-fup-badge.is-hit {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.2);
}

.clients-usage-section-meta {
  margin: 0.22rem 0 0;
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.4;
}

.clients-general-usage-page .clients-usage-stat-grid {
  margin: 0;
  gap: 0.65rem;
}

.clients-general-usage-page .client-usage-stat {
  border-radius: 14px;
  padding: 0.7rem 0.75rem 0.75rem;
  border-color: color-mix(in srgb, var(--border-strong) 80%, transparent);
  box-shadow: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.clients-general-usage-page .client-usage-stat:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--cat-live, #2ecc71) 28%, var(--border-strong));
  box-shadow: none;
  background: color-mix(in srgb, var(--surface) 92%, var(--cat-live, #2ecc71) 8%);
}

.clients-general-usage-page .client-usage-stat dd span {
  font-size: 0.72rem;
  opacity: 0.72;
}

.clients-general-usage-page .clients-usage-chart-grid {
  gap: 0.75rem;
}

.clients-general-usage-page .client-usage-chart-card {
  border-radius: 14px;
  padding: 0.9rem 0.95rem 1rem;
  border-color: color-mix(in srgb, var(--border-strong) 85%, transparent);
  box-shadow: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.clients-general-usage-page .client-usage-chart-card:hover {
  border-color: color-mix(in srgb, var(--sea) 24%, var(--border-strong));
  box-shadow: none;
  transform: none;
}

.clients-general-usage-page .client-usage-chart-card header h3 {
  font-size: 0.98rem;
  margin-top: 0.15rem;
}

.clients-general-usage-page .client-usage-chart-wrap {
  height: clamp(190px, 24vw, 230px);
  margin-top: 0.65rem;
}

.clients-general-usage-page .clients-usage-users-panel {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  padding: clamp(1rem, 1.8vw, 1.25rem) clamp(1rem, 2vw, 1.35rem);
  background: transparent;
  gap: 0.85rem;
}

.clients-general-usage-page .clients-usage-users-shell {
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--users-tone, var(--sea)) 12%, var(--border));
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 55%, transparent);
  overflow: hidden;
  padding: 0.55rem;
}

.clients-usage-users-list {
  display: grid;
  gap: 0.5rem;
}

.clients-usage-user-card {
  --row-tone: var(--users-tone);
  display: grid;
  gap: 0.7rem;
  padding: 0.8rem 0.9rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--users-tone));
  background: var(--surface-solid, var(--surface));
  animation: clientsRise 0.35s ease both;
  animation-delay: calc(0.03s + (var(--i, 0) * 0.025s));
  transition: border-color 0.15s ease, background 0.15s ease;
}

.clients-usage-user-card:hover {
  border-color: color-mix(in srgb, var(--users-tone) 28%, var(--border));
  background: color-mix(in srgb, var(--users-tone) 3.5%, var(--surface));
}

.clients-usage-user-card-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "rank identity actions"
    "rank badges actions";
  gap: 0.35rem 0.75rem;
  align-items: center;
}

.clients-usage-user-card-top .clients-usage-rank {
  grid-area: rank;
  align-self: start;
  margin-top: 0.15rem;
}

.clients-usage-user-card-top .clients-usage-user-link {
  grid-area: identity;
}

.clients-usage-user-badges {
  grid-area: badges;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  min-width: 0;
}

.clients-usage-user-card-top .clients-usage-row-actions {
  grid-area: actions;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  justify-content: flex-start;
}

.clients-usage-track-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

.clients-usage-track-link {
  margin: 0;
  padding: 0.15rem 0.4rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 650;
  cursor: pointer;
  text-decoration: none;
}

.clients-usage-track-link:hover,
.clients-usage-track-link:focus-visible {
  color: var(--users-tone);
  background: color-mix(in srgb, var(--users-tone) 10%, transparent);
  outline: none;
}

.clients-usage-user-metrics {
  display: grid;
  grid-template-columns: minmax(7rem, 1.35fr) repeat(3, minmax(5.5rem, 1fr)) auto minmax(6.5rem, 0.9fr);
  gap: 0.45rem 0.55rem;
  align-items: stretch;
  padding: 0.55rem 0.6rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--users-tone) 4%, var(--surface-2, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--users-tone) 8%, var(--border));
}

.clients-usage-users-panel.tone-hotspot .clients-usage-user-metrics {
  grid-template-columns: minmax(7rem, 1.35fr) repeat(3, minmax(5.5rem, 1fr)) auto auto minmax(6.5rem, 0.9fr);
}

.clients-usage-metric {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.15rem 0.2rem;
}

.clients-usage-metric.is-compact {
  justify-items: start;
  align-content: start;
}

.clients-usage-metric-label {
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.85;
}

.clients-usage-metric .clients-usage-data-cell {
  min-width: 0;
  max-width: none;
  gap: 0.28rem;
}

.clients-usage-metric .clients-usage-data-value {
  font-size: 0.92rem;
}

.clients-usage-metric .clients-usage-rate-cell strong {
  font-size: 0.84rem;
  line-height: 1.25;
}

.clients-usage-metric .clients-usage-rate-cell small:empty {
  display: none;
}

.clients-usage-user-card .clients-usage-online-ratio {
  display: inline-flex;
  margin: 0;
  padding: 0.16rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink-soft) 8%, transparent);
  font-size: 0.7rem;
  font-weight: 700;
}

.clients-usage-user-card .clients-usage-user-name {
  font-size: 0.94rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.015em;
}

.clients-usage-user-card .clients-usage-level {
  min-width: 0;
  padding: 0.16rem 0.5rem;
  font-size: 0.68rem;
}

.clients-usage-loading-row {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px dashed color-mix(in srgb, var(--users-tone) 18%, var(--border));
  background: color-mix(in srgb, var(--users-tone) 4%, transparent);
}

@media (max-width: 1100px) {
  .clients-usage-user-metrics,
  .clients-usage-users-panel.tone-hotspot .clients-usage-user-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .clients-usage-metric.is-data {
    grid-column: 1 / -1;
  }

  .clients-usage-metric.is-track {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .clients-usage-user-card-top {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "rank identity"
      "rank badges"
      "actions actions";
  }

  .clients-usage-user-card-top .clients-usage-row-actions {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .clients-usage-user-metrics,
  .clients-usage-users-panel.tone-hotspot .clients-usage-user-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .clients-usage-user-metrics,
  .clients-usage-users-panel.tone-hotspot .clients-usage-user-metrics {
    grid-template-columns: 1fr;
  }

  .clients-usage-metric.is-data,
  .clients-usage-metric.is-track {
    grid-column: auto;
  }
}

[data-theme="dark"] .clients-usage-workspace-mark,
[data-theme="dark"] .clients-usage-workspace-kicker,
[data-theme="dark"] .clients-usage-section-kicker {
  color: var(--sea);
}

@media (max-width: 900px) {
  .clients-usage-workspace-head {
    flex-direction: column;
    align-items: stretch;
  }

  .clients-usage-workspace-actions {
    justify-content: flex-start;
  }

  .clients-usage-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .clients-usage-stamp {
    margin-left: 0;
  }

  .clients-usage-router-filter {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 640px) {
  .clients-usage-workspace-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .clients-usage-workspace-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .clients-usage-range-nav {
    margin-inline: 0;
  }

  .clients-general-usage-page .clients-general-usage-router-note,
  .clients-general-usage-page .clients-general-usage-widen-note {
    margin-inline: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clients-usage-workspace,
  .clients-general-usage-page .client-usage-stat,
  .clients-general-usage-page .client-usage-chart-card {
    animation: none;
  }

  .clients-general-usage-page .client-usage-stat:hover,
  .clients-general-usage-page .client-usage-chart-card:hover {
    transform: none;
  }
}

.clients-general-usage-page .clients-general-usage-tabs {
  margin: 0;
}

.clients-general-usage-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.65rem 1rem;
  margin: 0 0 0.75rem;
}

.clients-general-usage-tools .clients-router-filter {
  flex: 1 1 14rem;
  max-width: 22rem;
  margin: 0;
}

.clients-general-usage-router-note {
  flex: 1 1 100%;
  margin: 0;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  font-size: 0.84rem;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--sea) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--sea) 14%, var(--border));
}

.clients-general-usage-router-note strong {
  color: var(--ink);
}

.clients-general-usage-router-note a {
  margin-left: 0.35rem;
  font-weight: 700;
  color: var(--sea);
  text-decoration: none;
}

.clients-general-usage-router-note a:hover,
.clients-general-usage-router-note a:focus-visible {
  text-decoration: underline;
}

.clients-usage-tracking-panel {
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, #0e7c86 14%, var(--border));
  background: color-mix(in srgb, #0e7c86 5%, var(--surface));
  overflow: clip;
}

.clients-usage-tracking-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 1rem;
  padding: 0.65rem 0.85rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.clients-usage-tracking-summary::-webkit-details-marker {
  display: none;
}

.clients-usage-tracking-summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.45rem;
  height: 0.45rem;
  margin-left: auto;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg);
  transition: transform 0.16s ease;
  opacity: 0.7;
}

.clients-usage-tracking-panel[open] .clients-usage-tracking-summary::after {
  transform: rotate(225deg);
  margin-top: 0.2rem;
}

.clients-usage-tracking-summary-copy {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
  min-width: 0;
}

.clients-usage-tracking-summary-copy strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
}

.clients-usage-tracking-summary-hint {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 500;
}

.clients-usage-tracking-kicker {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #0e7c86;
}

.clients-usage-tracking-body {
  display: grid;
  gap: 0.65rem;
  padding: 0 0.85rem 0.85rem;
  border-top: 1px solid color-mix(in srgb, #0e7c86 10%, var(--border));
}

.clients-usage-tracking-copy h2 {
  margin: 0.2rem 0 0;
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--ink);
}

.clients-usage-tracking-lead,
.clients-usage-tracking-hint {
  margin: 0;
  max-width: 44rem;
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.45;
}

.clients-usage-tracking-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-start;
}

.clients-usage-tracking-status {
  margin: 0;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  background: color-mix(in srgb, #0e7c86 12%, transparent);
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 600;
}

.clients-usage-tracking-status.is-error {
  background: color-mix(in srgb, #b91c1c 12%, transparent);
  color: #991b1b;
}

.clients-usage-track-cell {
  display: grid;
  gap: 0.12rem;
  min-width: 7.5rem;
}

.clients-usage-track-cell strong {
  font-size: 0.84rem;
  color: var(--ink);
}

.clients-usage-track-cell small {
  color: var(--ink-soft);
  font-size: 0.72rem;
}

.clients-usage-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  justify-content: flex-end;
}

.clients-usage-track-btn {
  padding: 0.3rem 0.55rem !important;
  font-size: 0.75rem !important;
}

.clients-usage-user-card .clients-usage-downtime,
.clients-usage-user-card .clients-usage-gadgets {
  min-width: 1.6rem;
  height: 1.6rem;
  font-size: 0.78rem;
}

.clients-usage-renew-dialog {
  width: min(26rem, calc(100vw - 1.5rem));
  padding: 0;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
}

.clients-usage-renew-dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
}

.clients-usage-renew-form {
  display: grid;
  gap: 0.9rem;
  padding: 1.1rem 1.15rem 1rem;
}

.clients-usage-renew-head h3 {
  margin: 0;
  font-size: 1.05rem;
}

.clients-usage-renew-head p {
  margin: 0.35rem 0 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.4;
}

.clients-usage-renew-field {
  display: grid;
  gap: 0.35rem;
  font-size: 0.84rem;
  font-weight: 650;
}

.clients-usage-renew-field input {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--border-strong, var(--border));
  background: var(--surface-2, var(--surface));
  color: var(--ink);
  font: inherit;
}

.clients-usage-renew-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
}

@media (max-width: 820px) {
  .clients-usage-tracking-actions {
    justify-content: flex-start;
  }

  .clients-usage-tracking-summary-hint {
    width: 100%;
  }
}

.clients-general-usage-page .clients-general-usage-widen-note {
  margin: 0;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  background: var(--cat-live-soft, rgba(46, 204, 113, 0.12));
  color: var(--text, inherit);
  font-size: 0.84rem;
}

@media (max-width: 720px) {
  .clients-general-usage-tools {
    flex-direction: column;
    align-items: stretch;
  }

  .clients-general-usage-tools .clients-router-filter {
    max-width: none;
    width: 100%;
  }
}

/* General usage ? simple table layout */
.clients-usage-table-page .clients-usage-workspace-brand {
  display: none;
}

.clients-usage-view-tabs {
  margin: 0;
  flex: 0 1 auto;
}

.clients-usage-visual-panel {
  padding: clamp(1rem, 1.8vw, 1.25rem) clamp(1rem, 2vw, 1.35rem);
  border-top: 1px solid var(--border);
}

.clients-usage-insights-panel {
  padding: clamp(1rem, 1.8vw, 1.25rem) clamp(1rem, 2vw, 1.35rem);
  border-top: 1px solid var(--border);
}

.clients-usage-insights-panel[hidden],
.clients-usage-visual-panel[hidden],
.clients-usage-table-panel[hidden] {
  display: none !important;
}

.clients-usage-visual-grid,
.clients-usage-insights-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.clients-usage-visual-grid .client-usage-chart-card.is-wide,
.clients-usage-insights-grid .client-usage-chart-card.is-wide {
  grid-column: 1 / -1;
}

.clients-usage-visual-grid .client-usage-chart-wrap.is-tall,
.clients-usage-insights-grid .client-usage-chart-wrap.is-tall {
  height: clamp(280px, 42vw, 440px);
}

@media (max-width: 900px) {
  .clients-usage-visual-grid,
  .clients-usage-insights-grid {
    grid-template-columns: 1fr;
  }
}

.clients-usage-tracking-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
}

.clients-usage-tracking-inline .clients-usage-tracking-hint {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.clients-usage-tracking-inline .clients-usage-tracking-status {
  margin: 0;
  width: 100%;
  font-size: 0.82rem;
}

.clients-usage-tracking-inline .clients-usage-tracking-status.is-error {
  color: var(--danger, #b42318);
}

.clients-usage-summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.65rem 1rem;
  padding: 0.85rem clamp(1rem, 2vw, 1.35rem);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 55%, transparent);
}

.clients-usage-summary-item {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.clients-usage-summary-label {
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.clients-usage-summary-item strong {
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.clients-usage-summary-item small {
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 500;
}

.clients-usage-table-panel {
  --users-tone: var(--sea, #0e7c86);
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 0.9rem clamp(1rem, 2vw, 1.35rem) 1.15rem;
  gap: 0.75rem;
}

.clients-usage-table-panel.tone-pppoe { --users-tone: #0e7c86; }
.clients-usage-table-panel.tone-hotspot { --users-tone: #059669; }

.clients-usage-table-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.clients-usage-table-head h2 {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.clients-usage-table-head .panel-sub {
  margin: 0.2rem 0 0;
}

.clients-usage-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-solid, var(--surface));
}

.clients-usage-data-table {
  width: 100%;
  min-width: 52rem;
  border-collapse: collapse;
  table-layout: auto;
}

.clients-usage-data-table th,
.clients-usage-data-table td {
  padding: 0.55rem 0.7rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}

.clients-usage-data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-3, color-mix(in srgb, var(--ink-soft) 6%, var(--surface)));
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.clients-usage-data-table th.is-rank,
.clients-usage-data-table td.is-rank {
  width: 2.4rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.clients-usage-data-table th.is-actions,
.clients-usage-data-table td.is-actions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.clients-usage-data-table tbody tr:last-child td {
  border-bottom: none;
}

.clients-usage-data-table tbody tr:hover td {
  background: color-mix(in srgb, var(--users-tone) 5%, var(--surface));
}

.clients-usage-table-client {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.clients-usage-table-client:hover strong {
  color: var(--users-tone);
}

.clients-usage-table-client .clients-avatar {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.5rem;
  flex: 0 0 auto;
  font-size: 0.72rem;
}

.clients-usage-table-client-copy {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.clients-usage-table-client-copy strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.clients-usage-table-client-copy span {
  color: var(--ink-soft);
  font-size: 0.74rem;
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clients-usage-data-table .clients-surf-badge {
  display: inline-flex;
  margin-right: 0.35rem;
  vertical-align: middle;
}

.clients-usage-data-table .clients-usage-level {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 80%, transparent);
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

.clients-usage-data-table .clients-usage-level.is-high {
  border-color: color-mix(in srgb, #dc2626 30%, var(--border));
  background: color-mix(in srgb, #dc2626 10%, transparent);
  color: #b91c1c;
}

.clients-usage-data-table .clients-usage-level.is-medium {
  border-color: color-mix(in srgb, #d97706 30%, var(--border));
  background: color-mix(in srgb, #d97706 10%, transparent);
  color: #b45309;
}

.clients-usage-data-table .clients-usage-level.is-low {
  border-color: color-mix(in srgb, #059669 30%, var(--border));
  background: color-mix(in srgb, #059669 10%, transparent);
  color: #047857;
}

.clients-usage-data-value {
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  white-space: nowrap;
}

.clients-usage-rate-stack {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.clients-usage-rate-stack strong {
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
}

.clients-usage-rate-stack small {
  color: var(--ink-soft);
  font-size: 0.72rem;
  white-space: nowrap;
}

.clients-usage-data-table .clients-usage-downtime.is-warn {
  color: #b45309;
  font-weight: 750;
}

.clients-usage-data-table .clients-usage-gadgets.is-active {
  color: var(--users-tone);
  font-weight: 750;
}

.clients-usage-table-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.25rem 0.55rem;
}

.clients-usage-table-actions a,
.clients-usage-table-actions button {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--users-tone);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.clients-usage-table-actions a:hover,
.clients-usage-table-actions button:hover {
  text-decoration: underline;
}

.clients-usage-empty-row td,
.clients-usage-loading-row td {
  padding: 1.25rem 0.9rem;
  color: var(--ink-soft);
  text-align: center;
  font-size: 0.88rem;
}

@media (max-width: 900px) {
  .clients-usage-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
    border-radius: 0;
  }

  .clients-usage-data-table {
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0 0.7rem;
  }

  .clients-usage-data-table thead {
    display: none;
  }

  .clients-usage-data-table,
  .clients-usage-data-table tbody,
  .clients-usage-data-table tr,
  .clients-usage-data-table td {
    display: block;
    width: 100%;
  }

  .clients-usage-data-table tbody {
    display: grid;
    gap: 0.7rem;
  }

  .clients-usage-data-row {
    padding: 0.85rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--users-tone, var(--sea)) 14%, var(--border));
    border-radius: 14px;
    background: var(--surface-solid, var(--surface));
    box-shadow: var(--card-shadow, 0 8px 20px color-mix(in srgb, var(--ink) 5%, transparent));
  }

  .clients-usage-data-table tbody tr:hover td {
    background: transparent;
  }

  .clients-usage-data-table td {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    align-items: start;
    gap: 0.55rem;
    padding: 0.32rem 0;
    border: 0;
  }

  .clients-usage-data-table td::before {
    content: attr(data-label);
    color: var(--ink-soft);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding-top: 0.2rem;
  }

  .clients-usage-data-table td.is-rank {
    display: none;
  }

  .clients-usage-data-table td[data-label="Client"] {
    grid-template-columns: 1fr;
    padding-bottom: 0.55rem;
    margin-bottom: 0.2rem;
    border-bottom: 1px solid var(--border);
  }

  .clients-usage-data-table td[data-label="Client"]::before {
    display: none;
  }

  .clients-usage-data-table td[data-label="Status"] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    padding-bottom: 0.45rem;
  }

  .clients-usage-data-table td[data-label="Status"]::before {
    display: none;
  }

  .clients-usage-data-table td.is-actions {
    grid-template-columns: 1fr;
    padding-top: 0.55rem;
    margin-top: 0.15rem;
    border-top: 1px solid var(--border);
  }

  .clients-usage-data-table td.is-actions::before {
    display: none;
  }

  .clients-usage-table-actions {
    width: 100%;
    justify-content: stretch;
  }

  .clients-usage-table-actions a,
  .clients-usage-table-actions button {
    flex: 1 1 auto;
    min-height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.75rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--users-tone, var(--sea)) 28%, var(--border));
    background: color-mix(in srgb, var(--users-tone, var(--sea)) 8%, var(--surface));
    text-decoration: none;
  }

  .clients-usage-table-actions a:hover,
  .clients-usage-table-actions button:hover {
    text-decoration: none;
    background: color-mix(in srgb, var(--users-tone, var(--sea)) 14%, var(--surface));
  }

  .clients-usage-table-client-copy span {
    white-space: normal;
  }

  .clients-usage-empty-row,
  .clients-usage-loading-row {
    padding: 1rem;
    border: 1px dashed var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-2, var(--surface)) 70%, transparent);
    box-shadow: none;
  }

  .clients-usage-empty-row td,
  .clients-usage-loading-row td {
    display: block;
    text-align: left;
    padding: 0;
  }

  .clients-usage-empty-row td::before,
  .clients-usage-loading-row td::before {
    display: none;
  }
}

/* PPPoE / Hotspot users ranking table */
.clients-usage-users-panel {
  --users-tone: var(--sea, #0e7c86);
  margin-top: 0.85rem;
  gap: 1rem;
}

.clients-usage-users-panel.tone-pppoe { --users-tone: #0e7c86; }
.clients-usage-users-panel.tone-hotspot { --users-tone: #059669; }

.clients-usage-users-head {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem 1.25rem;
}

.clients-usage-users-sort {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  margin-left: auto;
}

.clients-usage-users-sort-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.clients-usage-users-sort-select {
  appearance: none;
  min-width: 11.5rem;
  padding: 0.45rem 2rem 0.45rem 0.7rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--users-tone) 22%, var(--line, #d5dee4));
  background:
    linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%) calc(100% - 14px) calc(50% - 2px) / 5px 5px no-repeat,
    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%) calc(100% - 9px) calc(50% - 2px) / 5px 5px no-repeat,
    color-mix(in srgb, var(--users-tone) 6%, var(--panel, #fff));
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
}

.clients-usage-users-sort-select:focus {
  outline: 2px solid color-mix(in srgb, var(--users-tone) 45%, transparent);
  outline-offset: 1px;
}

.clients-usage-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.clients-usage-sort-btn:hover,
.clients-usage-sort-btn.is-active {
  color: color-mix(in srgb, var(--users-tone) 82%, var(--ink));
}

.clients-usage-sort-ind {
  display: inline-grid;
  place-items: center;
  min-width: 0.85rem;
  font-size: 0.78rem;
  font-weight: 800;
  opacity: 0.85;
}

@media (max-width: 720px) {
  .clients-usage-users-sort {
    width: 100%;
    margin-left: 0;
  }

  .clients-usage-users-sort-select {
    flex: 1 1 auto;
    min-width: 0;
  }
}

.clients-usage-users-title-row {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  min-width: 0;
}

.clients-usage-users-ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 12px;
  color: var(--users-tone);
  background: color-mix(in srgb, var(--users-tone) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--users-tone) 18%, transparent);
}

.clients-usage-users-copy h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem;
  margin: 0 0 0.25rem;
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.clients-usage-users-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.55rem;
  height: 1.4rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  color: color-mix(in srgb, var(--users-tone) 85%, #000);
  background: color-mix(in srgb, var(--users-tone) 16%, transparent);
}

.clients-usage-users-copy .panel-sub {
  margin: 0;
}

.clients-usage-users-shell {
  border-radius: 16px;
  overflow: auto;
}

.clients-usage-users-table {
  min-width: 0;
}

.clients-usage-users-table thead th {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ink-soft);
  white-space: nowrap;
}

.clients-usage-user-row {
  --row-tone: var(--users-tone);
  animation: clientsRise 0.35s ease both;
  animation-delay: calc(0.04s + (var(--i, 0) * 0.03s));
  transition: background 0.15s ease;
}

.clients-usage-users-table tbody tr.clients-usage-user-row:hover td {
  background: color-mix(in srgb, var(--users-tone) 5%, transparent);
}

.clients-usage-rank {
  display: inline-grid;
  place-items: center;
  min-width: 1.85rem;
  height: 1.85rem;
  padding: 0 0.35rem;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  background: var(--surface-3, rgba(11, 31, 42, 0.06));
  border: 1px solid var(--border);
}

.clients-usage-rank.is-top-1 {
  color: #92400e;
  background: linear-gradient(145deg, #fde68a, #fcd34d);
  border-color: #f59e0b;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}

.clients-usage-rank.is-top-2 {
  color: #475569;
  background: linear-gradient(145deg, #f1f5f9, #cbd5e1);
  border-color: #94a3b8;
}

.clients-usage-rank.is-top-3 {
  color: #9a3412;
  background: linear-gradient(145deg, #fed7aa, #fdba74);
  border-color: #fb923c;
}

.clients-usage-user-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.clients-usage-user-link .clients-avatar {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 0.7rem;
  font-size: 0.85rem;
}

.clients-usage-user-link:hover .clients-usage-user-name,
.clients-usage-user-link:focus-visible .clients-usage-user-name {
  color: var(--users-tone);
}

.clients-usage-user-copy {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.clients-usage-user-name {
  font-size: 0.92rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.clients-usage-user-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.35rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1.35;
}

.clients-usage-user-account {
  font-variant-numeric: tabular-nums;
}

.clients-usage-user-devices {
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.clients-usage-user-devices.is-active {
  color: var(--users-tone, #0f766e);
}

.clients-usage-user-sep {
  opacity: 0.45;
}

.clients-usage-level {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.5rem;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.clients-usage-level.is-high {
  color: #b42318;
  background: rgba(231, 76, 60, 0.14);
  border-color: rgba(231, 76, 60, 0.22);
}

.clients-usage-level.is-medium {
  color: #9a6700;
  background: rgba(232, 163, 23, 0.18);
  border-color: rgba(232, 163, 23, 0.28);
}

.clients-usage-level.is-low {
  color: #027a48;
  background: rgba(46, 204, 113, 0.16);
  border-color: rgba(46, 204, 113, 0.24);
}

.clients-usage-level.is-idle {
  color: var(--ink-soft);
  background: var(--surface-3, rgba(11, 31, 42, 0.08));
  border-color: var(--border);
}

.clients-usage-data-cell {
  display: grid;
  gap: 0.35rem;
  min-width: 6.5rem;
  max-width: 9.5rem;
}

.clients-usage-data-value {
  font-size: 0.9rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.clients-usage-data-bar {
  display: block;
  height: 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--users-tone) 10%, var(--border));
  overflow: hidden;
}

.clients-usage-data-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--users-tone) 70%, #fff), var(--users-tone));
  transition: width 0.35s ease;
}

.clients-usage-rate-cell {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.clients-usage-rate-cell strong {
  display: block;
  font-size: 0.84rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.clients-usage-rate-cell small {
  display: block;
  font-size: 0.74rem;
  font-weight: 650;
  color: var(--ink-soft);
}

.clients-usage-downtime {
  display: inline-grid;
  place-items: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  background: var(--surface-3, rgba(11, 31, 42, 0.06));
}

.clients-usage-downtime.is-warn {
  color: #b45309;
  background: rgba(232, 163, 23, 0.16);
}

.clients-usage-gadgets {
  display: inline-grid;
  place-items: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  background: var(--surface-3, rgba(11, 31, 42, 0.06));
}

.clients-usage-gadgets.is-active {
  color: #047857;
  background: rgba(46, 204, 113, 0.16);
}

.clients-usage-online {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 750;
}

.clients-usage-online-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex: 0 0 auto;
}

.clients-usage-online.is-on {
  color: #047857;
}

.clients-usage-online.is-on .clients-usage-online-dot {
  background: #2ecc71;
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.18);
}

.clients-usage-online.is-off {
  color: var(--ink-soft);
}

.clients-usage-online.is-off .clients-usage-online-dot {
  background: #94a3b8;
}

.clients-general-usage-page .clients-usage-online.clients-surf-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 750;
  line-height: 1.2;
}

.clients-general-usage-page .clients-usage-online.clients-surf-badge.is-surfing {
  color: #047857;
  background: rgba(46, 204, 113, 0.16);
}

.clients-general-usage-page .clients-usage-online.clients-surf-badge.is-not-surfing {
  color: #b45309;
  background: rgba(232, 163, 23, 0.16);
}

.clients-general-usage-page .clients-usage-online.clients-surf-badge.is-disconnected,
.clients-general-usage-page .clients-usage-online.clients-surf-badge.is-offline {
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--ink-soft) 12%, transparent);
}

.clients-general-usage-page .clients-usage-online.clients-surf-badge.is-expired {
  color: #b91c1c;
  background: rgba(239, 68, 68, 0.14);
}

.clients-general-usage-page .clients-usage-live-rate strong {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.clients-general-usage-page .clients-usage-live-rate small {
  display: block;
  margin-top: 0.15rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.clients-usage-online-ratio {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.clients-usage-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.38rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--users-tone) 28%, var(--border-strong));
  border-radius: 999px;
  background: color-mix(in srgb, var(--users-tone) 10%, var(--surface-2));
  color: color-mix(in srgb, var(--users-tone) 85%, #000);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

[data-theme="dark"] .clients-usage-view-btn {
  color: var(--users-tone);
}

.clients-usage-view-btn:hover,
.clients-usage-view-btn:focus-visible {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--users-tone) 45%, var(--border-strong));
  background: color-mix(in srgb, var(--users-tone) 16%, var(--surface));
  outline: none;
  transform: translateY(-1px);
}

.clients-usage-users-empty {
  display: grid;
  gap: 0.4rem;
  justify-items: center;
  text-align: center;
  padding: 1.55rem 1.25rem;
  border-radius: 16px;
  border: 1px dashed color-mix(in srgb, var(--border) 85%, var(--users-tone, var(--sea)));
  background: color-mix(in srgb, var(--users-tone, var(--sea)) 6%, transparent);
}

.clients-usage-users-empty-ico {
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  margin-bottom: 0.15rem;
  border-radius: 12px;
  color: var(--users-tone, var(--sea));
  background: color-mix(in srgb, var(--users-tone, var(--sea)) 14%, transparent);
}

.clients-usage-users-empty-title {
  margin: 0;
  font-weight: 750;
  color: var(--ink);
}

.clients-usage-users-empty-copy {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  max-width: 42ch;
  line-height: 1.5;
}

.mikrotik-live-stamp.is-loading {
  opacity: 0.9;
  color: var(--sea, #0e7c86);
}

.clients-usage-loading-row td {
  padding: 0.85rem 1rem !important;
  text-align: center;
  border-bottom: none !important;
  background: color-mix(in srgb, var(--users-tone, var(--sea)) 6%, transparent);
}

.clients-usage-loading-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--ink-soft);
}

.clients-usage-loading-copy::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--users-tone, var(--sea)) 35%, transparent);
  border-top-color: var(--users-tone, var(--sea));
  animation: clients-usage-spin 0.7s linear infinite;
}

@keyframes clients-usage-spin {
  to { transform: rotate(360deg); }
}

@media (min-width: 1101px) {
  .clients-usage-users-table {
    min-width: 68rem;
  }

  .clients-usage-users-table th:nth-child(1),
  .clients-usage-users-table td:nth-child(1) { width: 3rem; }
  .clients-usage-users-table th:nth-child(2),
  .clients-usage-users-table td:nth-child(2) { min-width: 14rem; }
  .clients-usage-users-table th:last-child,
  .clients-usage-users-table td:last-child { width: 1%; white-space: nowrap; }
}

@media (max-width: 1100px) {
  .clients-usage-users-shell {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .clients-usage-users-table {
    width: 100%;
    min-width: 0 !important;
    border-collapse: separate;
    border-spacing: 0 0.75rem;
  }

  .clients-usage-users-table thead {
    display: none;
  }

  .clients-usage-users-table tbody {
    display: grid;
    gap: 0.85rem;
  }

  .clients-usage-users-table tr.clients-usage-user-row {
    display: grid;
    gap: 0.1rem;
    margin: 0;
    padding: 1rem 1.05rem;
    border: 1px solid var(--border-strong);
    border-radius: 18px;
    background:
      linear-gradient(160deg, color-mix(in srgb, var(--users-tone) 7%, transparent), transparent 42%),
      color-mix(in srgb, var(--surface-solid, var(--surface)) 94%, transparent);
    box-shadow: var(--card-shadow, 0 8px 20px rgba(11, 31, 42, 0.04));
  }

  .clients-usage-users-table tr.clients-usage-user-row:hover td {
    background: transparent;
  }

  .clients-usage-users-table th,
  .clients-usage-users-table td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    width: 100%;
    min-width: 0 !important;
    padding: 0.48rem 0;
    border: 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
  }

  .clients-usage-users-table td:last-child {
    border-bottom: 0;
    padding-top: 0.75rem;
  }

  .clients-usage-users-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 38%;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  .clients-usage-users-table td[data-label=""]::before,
  .clients-usage-users-table td[data-label="#"]::before {
    display: none;
  }

  .clients-usage-users-table td > * {
    min-width: 0;
    text-align: right;
  }

  .clients-usage-users-table td[data-label="Client"] {
    display: grid;
    gap: 0.3rem;
    padding-top: 0;
    padding-bottom: 0.8rem;
    margin-bottom: 0.15rem;
    border-bottom: 1px solid color-mix(in srgb, var(--users-tone) 14%, var(--border));
  }

  .clients-usage-users-table td[data-label="Client"]::before {
    display: none;
  }

  .clients-usage-users-table td[data-label="Client"] .clients-usage-user-link,
  .clients-usage-users-table td[data-label="Client"] .clients-usage-user-copy,
  .clients-usage-users-table td[data-label="Client"] .clients-usage-user-name,
  .clients-usage-users-table td[data-label="Client"] .clients-usage-user-meta {
    text-align: left;
  }

  .clients-usage-users-table td[data-label="Client"] .clients-usage-user-link {
    width: 100%;
  }

  .clients-usage-users-table td[data-label="#"] {
    position: absolute;
    top: 0.85rem;
    right: 1rem;
    width: auto;
    padding: 0;
    border: 0;
  }

  .clients-usage-users-table tr.clients-usage-user-row {
    position: relative;
    padding-top: 2.35rem;
  }

  .clients-usage-users-table td[data-label="Data used"] .clients-usage-data-cell {
    margin-left: auto;
    text-align: right;
  }

  .clients-usage-users-table td[data-label="Status"] {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
  }

  .clients-usage-users-table td[data-label=""] {
    justify-content: stretch;
  }

  .clients-usage-users-table td[data-label=""]::before {
    display: none;
  }

  .clients-usage-users-table td[data-label=""] .clients-usage-view-btn {
    width: 100%;
    justify-content: center;
  }

  .clients-usage-users-table tr[data-empty-row] td {
    display: block;
    padding: 0;
    border: 0;
  }

  .clients-usage-users-table tr[data-empty-row] td::before {
    display: none;
  }
}

@media (max-width: 520px) {
  .clients-usage-users-table tr.clients-usage-user-row {
    padding: 0.9rem 0.9rem;
    padding-top: 2.2rem;
  }

  .clients-usage-users-table td[data-label="Peak"],
  .clients-usage-users-table td[data-label="Lowest"] {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
  }

  .clients-usage-users-table td[data-label="Peak"]::before,
  .clients-usage-users-table td[data-label="Lowest"]::before {
    max-width: none;
  }

  .clients-usage-users-table td[data-label="Peak"] .clients-usage-rate-cell,
  .clients-usage-users-table td[data-label="Lowest"] .clients-usage-rate-cell {
    text-align: left;
  }
}

/* Legacy aliases kept for any cached markup */
.clients-general-usage-page .clients-general-usage-table-panel {
  margin-top: 0.85rem;
}

.clients-general-usage-page .clients-general-usage-rank {
  font-weight: 700;
  width: 2.5rem;
  color: var(--text-muted, #64748b);
}

.clients-general-usage-table td strong {
  display: block;
  font-size: 0.9rem;
}

.clients-general-usage-table td small {
  display: block;
  margin-top: 0.12rem;
  opacity: 0.65;
  font-size: 0.75rem;
}

/* Client router + Wi?Fi (combined page) ---------------------------------- */

.client-cpe-access-page {
  width: min(100%, 76rem);
  max-width: 76rem;
  margin-inline: auto;
  display: grid;
  gap: 0;
  overflow-x: clip;
}

.client-cpe-workspace {
  display: grid;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--cat-access, #4f8cff) 18%, var(--border-strong, var(--border)));
  border-radius: 20px;
  background: var(--surface-solid, var(--surface));
  box-shadow: var(--card-shadow, 0 14px 34px color-mix(in srgb, var(--ink) 8%, transparent));
  overflow: clip;
  animation: client-cpe-rise 0.42s ease both;
}

@keyframes client-cpe-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.client-cpe-workspace-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9rem 1.25rem;
  flex-wrap: wrap;
  padding: clamp(1.05rem, 2.2vw, 1.35rem) clamp(1.05rem, 2.2vw, 1.35rem) 1rem;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(ellipse 55% 90% at 0% -10%, color-mix(in srgb, var(--cat-access, #4f8cff) 22%, transparent), transparent 58%),
    radial-gradient(ellipse 42% 70% at 100% 110%, color-mix(in srgb, var(--sea) 12%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--cat-access, #4f8cff) 7%, transparent), transparent 72%);
}

.client-cpe-workspace-title {
  min-width: 0;
  flex: 1 1 18rem;
}

.client-cpe-workspace-brand {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  min-width: 0;
}

.client-cpe-avatar {
  display: grid;
  place-items: center;
  width: 3.35rem;
  height: 3.35rem;
  flex: 0 0 auto;
  border-radius: 1rem;
  background: linear-gradient(145deg, var(--cat-access, #4f8cff), color-mix(in srgb, var(--cat-access, #4f8cff) 35%, #1e3a8a));
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--cat-access, #4f8cff) 16%, transparent),
    0 14px 28px color-mix(in srgb, var(--cat-access, #4f8cff) 22%, transparent);
}

.client-cpe-workspace-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.25rem;
  color: var(--cat-access, #2563eb);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.client-cpe-workspace-copy h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.client-cpe-workspace-lead {
  margin: 0.4rem 0 0;
  max-width: 42rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.45;
}

.client-cpe-workspace-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.7rem 0 0;
}

.client-cpe-pill {
  --pill-tone: var(--cat-access, #2563eb);
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.62rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--pill-tone) 28%, var(--border));
  background: color-mix(in srgb, var(--pill-tone) 12%, transparent);
  color: var(--pill-tone);
  font-size: 0.72rem;
  font-weight: 750;
  white-space: nowrap;
}

.client-cpe-pill.tone-service { --pill-tone: var(--sea, #0e7c86); }
.client-cpe-pill.tone-account { --pill-tone: var(--ink-soft); }
.client-cpe-pill.tone-nas { --pill-tone: #6366f1; }
.client-cpe-pill.tone-tunnel { --pill-tone: #059669; }
.client-cpe-pill.tone-lan { --pill-tone: #0369a1; }

.client-cpe-workspace-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  justify-content: flex-end;
}

.client-cpe-hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.client-cpe-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.75rem 1.15rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--cat-access, #4f8cff) 3.5%, transparent);
}

.client-cpe-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.05rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-solid, var(--surface));
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 750;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.client-cpe-link:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--cat-access, #4f8cff) 32%, var(--border));
}

.client-cpe-link.is-current {
  color: var(--cat-access, #2563eb);
  border-color: color-mix(in srgb, var(--cat-access, #4f8cff) 32%, var(--border));
  background: color-mix(in srgb, var(--cat-access, #4f8cff) 12%, var(--surface-solid, var(--surface)));
}

.client-cpe-body {
  display: grid;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.3rem) clamp(1.05rem, 2.2vw, 1.35rem);
}

.client-cpe-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0;
}

.client-cpe-fact {
  --fact-tone: var(--cat-access, #4f8cff);
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0;
  padding: 0.9rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--fact-tone) 18%, var(--border));
  border-radius: 14px;
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--fact-tone) 10%, transparent), transparent 62%),
    var(--surface-2, var(--surface));
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.client-cpe-fact[data-ico="nas"] { --fact-tone: #0e7c86; }
.client-cpe-fact[data-ico="lock"] { --fact-tone: #6366f1; }
.client-cpe-fact[data-ico="wifi"] { --fact-tone: #059669; }
.client-cpe-fact[data-ico="shield"] { --fact-tone: #2563eb; }

.client-cpe-fact:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--fact-tone) 40%, var(--border));
  box-shadow: 0 12px 24px color-mix(in srgb, var(--fact-tone) 12%, transparent);
}

.client-cpe-fact-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  flex: 0 0 auto;
  border-radius: 10px;
  background: color-mix(in srgb, var(--fact-tone) 14%, transparent);
  color: var(--fact-tone);
}

.client-cpe-fact-body {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.client-cpe-fact-label {
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.client-cpe-fact-body strong {
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
  color: var(--ink);
}

.client-cpe-fact-body em {
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1.35;
}

.client-cpe-credentials {
  margin: 0;
  padding: 1rem 1.05rem 1.1rem;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cat-access, #4f8cff) 5%, transparent), transparent 3rem),
    var(--surface-solid, var(--surface));
}

.client-cpe-credentials-kicker {
  margin: 0 0 0.2rem;
  color: var(--cat-access, #2563eb);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.client-cpe-credentials .client-router-credentials-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.client-cpe-credentials-hint {
  margin: 0.35rem 0 0.9rem;
}

.client-cpe-stage {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  background: color-mix(in srgb, var(--cat-access, #4f8cff) 2.5%, transparent);
}

.client-cpe-unavailable {
  display: grid;
  gap: 0.4rem;
  justify-items: start;
  margin: 1.1rem 1.15rem 1.25rem;
  padding: 1.2rem 1.1rem;
  border: 1.5px dashed color-mix(in srgb, var(--cat-access, #4f8cff) 28%, var(--border-strong));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-2) 85%, transparent);
}

.client-cpe-unavailable strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
}

.client-cpe-unavailable p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.45;
}

.client-cpe-access-page .client-cpe-hero {
  flex: 0 0 auto;
}

.client-cpe-access-page .client-cpe-tab-nav {
  margin-top: 1rem;
  margin-bottom: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.client-cpe-access-page.is-router-tab {
  min-height: calc(100vh - 7rem);
}

.client-cpe-access-page .client-cpe-toolbar-actions {
  flex-wrap: wrap;
}

.client-cpe-access-page.is-connected .client-router-hero .client-kv-list,
.client-cpe-access-page.is-connected .client-cpe-facts,
.client-cpe-access-page.is-connected .client-cpe-credentials {
  display: none;
}

.client-cpe-access-page.is-connected .client-cpe-body {
  padding-bottom: 0;
}

[data-theme="dark"] .client-cpe-workspace-kicker,
[data-theme="dark"] .client-cpe-credentials-kicker {
  color: var(--sea);
}

@media (max-width: 960px) {
  .client-cpe-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .client-cpe-workspace-head {
    flex-direction: column;
    align-items: stretch;
  }

  .client-cpe-workspace-actions {
    justify-content: flex-start;
  }

  .client-cpe-access-page .mikrotik-detail-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
  }

  .client-cpe-access-page .client-cpe-toolbar-actions,
  .client-cpe-access-page .mikrotik-detail-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .client-cpe-access-page .client-router-password-row {
    flex-direction: column;
    align-items: stretch;
  }

  .client-cpe-access-page .client-router-password-row .btn {
    width: 100%;
  }

  .client-cpe-access-page .client-router-credentials-grid {
    grid-template-columns: 1fr;
  }

  .client-cpe-access-page .client-router-credentials-actions .btn,
  .client-cpe-workspace-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .client-cpe-workspace-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .client-cpe-facts {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-cpe-workspace,
  .client-cpe-fact {
    animation: none;
  }

  .client-cpe-fact:hover {
    transform: none;
  }
}

/* Client Wi?Fi settings -------------------------------------------------- */

.client-wifi-settings-page .client-wifi-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1rem;
}

.client-wifi-edit-form .password-field {
  position: relative;
}

.client-wifi-edit-form .password-field .password-toggle {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 720px) {
  .client-wifi-settings-page .client-wifi-form-grid {
    grid-template-columns: 1fr;
  }
}

/* Client router remote access ------------------------------------------- */

/* Client router access ? polished workspace shell -------------------- */

.client-router-simple-shell,
.client-router-workspace {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: calc(100vh - 7rem);
  border: 1px solid color-mix(in srgb, var(--cat-access, #4f8cff) 18%, var(--border-strong, var(--border)));
  border-radius: 20px;
  background: var(--surface-solid, var(--surface));
  box-shadow: var(--card-shadow, 0 14px 34px color-mix(in srgb, var(--ink) 8%, transparent));
  overflow: clip;
  animation: client-cpe-rise 0.42s ease both;
}

.client-router-workspace-head,
.client-router-simple-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9rem 1.25rem;
  padding: clamp(1.05rem, 2.2vw, 1.4rem) clamp(1.05rem, 2.2vw, 1.4rem) 1.05rem;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(ellipse 55% 90% at 0% -10%, color-mix(in srgb, var(--cat-access, #4f8cff) 22%, transparent), transparent 58%),
    radial-gradient(ellipse 42% 70% at 100% 110%, color-mix(in srgb, var(--sea) 12%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--cat-access, #4f8cff) 7%, transparent), transparent 72%);
}

.client-router-workspace-brand {
  display: flex;
  align-items: flex-start;
  gap: 0.95rem;
  min-width: 0;
  flex: 1 1 18rem;
}

.client-router-avatar {
  display: grid;
  place-items: center;
  width: 3.35rem;
  height: 3.35rem;
  flex: 0 0 auto;
  border-radius: 1rem;
  background: linear-gradient(145deg, var(--cat-access, #4f8cff), color-mix(in srgb, var(--cat-access, #4f8cff) 35%, #1e3a8a));
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--cat-access, #4f8cff) 16%, transparent),
    0 14px 28px color-mix(in srgb, var(--cat-access, #4f8cff) 22%, transparent);
}

.client-router-workspace-copy {
  min-width: 0;
}

.client-router-simple-back {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0.35rem;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 650;
  transition: color 0.15s ease;
}

.client-router-simple-back:hover {
  color: var(--cat-access, #2563eb);
}

.client-router-workspace-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.28rem;
  color: var(--cat-access, #2563eb);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.client-router-kicker-ico {
  display: inline-grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--cat-access, #4f8cff) 14%, transparent);
  color: var(--cat-access, #2563eb);
}

.client-router-workspace-head h1,
.client-router-simple-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--ink);
}

.client-router-simple-status {
  margin: 0.4rem 0 0;
  max-width: 42rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.45;
}

.client-router-workspace-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.75rem 0 0;
}

.client-router-pill {
  --pill-tone: var(--cat-access, #2563eb);
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.62rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--pill-tone) 28%, var(--border));
  background: color-mix(in srgb, var(--pill-tone) 12%, transparent);
  color: var(--pill-tone);
  font-size: 0.72rem;
  font-weight: 750;
  white-space: nowrap;
}

.client-router-pill.tone-service { --pill-tone: var(--sea, #0e7c86); }
.client-router-pill.tone-account { --pill-tone: var(--ink-soft); }
.client-router-pill.tone-nas { --pill-tone: #6366f1; }
.client-router-pill.tone-tunnel { --pill-tone: #059669; }
.client-router-pill.tone-lan { --pill-tone: #0369a1; }

.client-router-simple-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.client-router-stamp {
  min-height: 2rem;
}

.client-router-newtab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.client-router-simple-creds {
  display: grid;
  grid-template-columns: minmax(12rem, 0.9fr) minmax(0, 1.6fr);
  gap: 1rem 1.25rem;
  align-items: end;
  margin: 0;
  padding: 1.05rem clamp(1.05rem, 2.2vw, 1.35rem);
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cat-access, #4f8cff) 5%, transparent), transparent 3.5rem),
    var(--surface-solid, var(--surface));
}

.client-router-creds-copy {
  min-width: 0;
}

.client-router-creds-kicker {
  margin: 0 0 0.2rem;
  color: var(--cat-access, #2563eb);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.client-router-creds-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.client-router-creds-hint {
  margin: 0.35rem 0 0;
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.4;
}

.client-router-creds-hint strong {
  color: var(--cat-access, #2563eb);
  font-weight: 750;
}

.client-router-creds-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) auto;
  gap: 0.75rem 0.85rem;
  align-items: end;
}

.client-router-simple-creds .form-field {
  margin: 0;
}

.client-router-simple-creds .form-field label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.client-router-simple-creds .form-control {
  min-height: 2.55rem;
  border-radius: 12px;
}

.client-router-simple-creds .password-field {
  position: relative;
}

.client-router-simple-creds .password-field .form-control {
  padding-right: 2.6rem;
}

.client-router-simple-creds .password-field .password-toggle {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
}

.client-router-simple-creds .btn-primary {
  min-height: 2.55rem;
  padding-inline: 1.1rem;
  border-radius: 12px;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--cat-access, #4f8cff) 18%, transparent);
}

.client-router-simple .client-router-stage {
  flex: 1 1 auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, color-mix(in srgb, var(--cat-access, #4f8cff) 8%, transparent), transparent 70%),
    color-mix(in srgb, var(--surface-2, var(--surface)) 88%, transparent);
}

.client-router-access-page.is-connected .client-router-simple-creds {
  display: none;
}

.client-router-access-page.is-connected:has([data-router-error]:not([hidden])) .client-router-simple-creds {
  display: grid;
}

.client-router-access-page.is-connected .client-router-workspace-summary {
  opacity: 0.85;
}

.client-router-connecting {
  display: flex;
  align-items: flex-start;
  gap: 0.95rem;
  flex-wrap: wrap;
}

.client-router-connecting-mark {
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  flex: 0 0 auto;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--cat-access, #4f8cff) 28%, var(--border));
  background: color-mix(in srgb, var(--cat-access, #4f8cff) 12%, var(--surface));
  color: var(--cat-access, #2563eb);
  animation: client-router-glow 1.6s ease-in-out infinite;
}

.client-router-connecting-pulse {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  padding-top: 0.55rem;
}

.client-router-connecting-pulse span {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--cat-access, #4f8cff);
  opacity: 0.35;
  animation: client-router-dot 1.1s ease-in-out infinite;
}

.client-router-connecting-pulse span:nth-child(2) { animation-delay: 0.15s; }
.client-router-connecting-pulse span:nth-child(3) { animation-delay: 0.3s; }

@keyframes client-router-glow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cat-access, #4f8cff) 0%, transparent); }
  50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--cat-access, #4f8cff) 12%, transparent); }
}

@keyframes client-router-dot {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

.client-router-connecting[hidden],
.client-router-error[hidden],
.client-router-frame[hidden],
.client-router-error-steps[hidden],
.client-router-error-actions[hidden],
.client-router-error-guide-label[hidden],
[data-router-fix-nas][hidden] {
  display: none !important;
}

.client-router-error {
  display: grid;
  gap: 1rem;
  width: min(100%, 40rem);
  margin: 0 auto;
  padding: clamp(1.15rem, 2.4vw, 1.5rem);
  border: 1px solid color-mix(in srgb, var(--danger, #b42318) 18%, var(--border-strong));
  border-radius: 18px;
  background:
    radial-gradient(ellipse 70% 60% at 0% 0%, color-mix(in srgb, var(--danger, #b42318) 8%, transparent), transparent 55%),
    var(--surface-solid, var(--surface));
  box-shadow: var(--card-shadow, 0 12px 28px color-mix(in srgb, var(--ink) 7%, transparent));
}

.client-router-error-head {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.client-router-error-mark {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--danger, #b42318) 28%, var(--border));
  background: color-mix(in srgb, var(--danger, #b42318) 10%, var(--surface));
  color: var(--danger, #b42318);
}

.client-router-error-copy {
  min-width: 0;
}

.client-router-error-kicker {
  margin: 0 0 0.2rem;
  color: var(--danger, #b42318);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.client-router-error-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--ink);
}

.client-router-error-path {
  margin: 0.35rem 0 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
  font-weight: 550;
  line-height: 1.4;
}

.client-router-error-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0;
  padding: 0.85rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--danger, #b42318) 22%, var(--border));
  border-left: 3px solid var(--danger, #b42318);
  border-radius: 12px;
  background: color-mix(in srgb, var(--danger, #b42318) 8%, var(--surface-solid, var(--surface)));
  color: color-mix(in srgb, var(--danger, #b42318) 82%, var(--ink));
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.45;
}

.client-router-error-banner::before {
  content: "";
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.4rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger, #b42318) 14%, transparent);
}

.client-router-error-body {
  display: grid;
  gap: 0.85rem;
}

.client-router-error-guide-label {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.client-router-error-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.client-router-error-steps li {
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  margin: 0;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 2.5%, var(--surface-solid, var(--surface)));
}

.client-router-error-step-num {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cat-access, #4f8cff) 24%, var(--border));
  background: color-mix(in srgb, var(--cat-access, #4f8cff) 10%, var(--surface));
  color: var(--cat-access, #2563eb);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

.client-router-error-step-text {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
  padding-top: 0.15rem;
}

.client-router-error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0.15rem 0 0;
}

.client-router-error-actions .btn {
  min-height: 2.45rem;
  border-radius: 12px;
}

.client-router-error-actions .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.client-router-error-detail {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 550;
  line-height: 1.4;
}

.client-router-error-banner {
  margin-bottom: 0;
}

.client-router-unavailable {
  margin: 1.15rem clamp(1.05rem, 2.2vw, 1.35rem) 1.35rem;
  justify-items: center;
  text-align: center;
}

.client-router-unavailable-mark {
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  margin-bottom: 0.2rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--cat-access, #4f8cff) 28%, var(--border));
  background: color-mix(in srgb, var(--cat-access, #4f8cff) 12%, var(--surface));
  color: var(--cat-access, #2563eb);
}

.client-router-stage.is-live {
  background: #0b1220;
}

.client-router-stage.is-failed {
  min-height: 0;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 2.5vw, 1.75rem);
  background:
    radial-gradient(ellipse 65% 50% at 50% 20%, color-mix(in srgb, var(--danger, #b42318) 6%, transparent), transparent 70%),
    color-mix(in srgb, var(--surface-2, var(--surface)) 90%, transparent);
}

.client-router-stage.is-live .client-router-frame {
  background: #fff;
}

[data-theme="dark"] .client-router-workspace-kicker,
[data-theme="dark"] .client-router-creds-kicker,
[data-theme="dark"] .client-router-creds-hint strong,
[data-theme="dark"] .client-router-kicker-ico,
[data-theme="dark"] .client-router-error-step-num {
  color: var(--sea);
}

[data-theme="dark"] .client-router-error-kicker,
[data-theme="dark"] .client-router-error-mark {
  color: #f87171;
}

@media (max-width: 900px) {
  .client-router-simple-creds {
    grid-template-columns: 1fr;
  }

  .client-router-creds-fields {
    grid-template-columns: 1fr;
  }

  .client-router-simple-creds .btn {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .client-router-workspace-head,
  .client-router-simple-head {
    flex-direction: column;
    align-items: stretch;
  }

  .client-router-simple-actions {
    justify-content: flex-start;
  }

  .client-router-simple-actions .btn,
  .client-router-newtab {
    flex: 1 1 auto;
    justify-content: center;
  }

  .client-router-connecting-pulse {
    margin-left: 0;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-router-workspace,
  .client-router-simple-shell,
  .client-router-connecting-mark,
  .client-router-connecting-pulse span {
    animation: none;
  }
}

.client-router-access-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: calc(100vh - 7rem);
}

.client-router-access-page .client-hero {
  flex: 0 0 auto;
  transition: opacity 0.2s ease, max-height 0.25s ease;
}

.client-router-access-page.is-connected .client-router-hero .client-kv-list {
  display: none;
}

.client-router-stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: min(70vh, 720px);
  padding: 0;
  overflow: hidden;
}

.client-router-stage.is-live {
  min-height: calc(100vh - 11rem);
}

.client-router-stage.is-live .client-router-error {
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--line, #d9e0e6);
  border-radius: 0;
  background: color-mix(in srgb, var(--panel, #fff) 92%, var(--warn, #f5a524) 8%);
  box-shadow: none;
}

.client-router-connecting {
  padding: 1.4rem 1.25rem 1.6rem;
}

.client-router-connecting-title {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
}

.client-router-steps {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  line-height: 1.55;
  color: var(--ink-soft);
}

.client-router-steps li {
  position: relative;
  padding: 0.35rem 0 0.35rem 1.55rem;
}

.client-router-steps li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.7rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--line, #c9d0d8);
}

.client-router-steps li.is-active {
  color: var(--ink);
  font-weight: 600;
}

.client-router-steps li.is-active::before {
  background: var(--sea, #0d9488);
  box-shadow: 0 0 0 3px var(--sea-soft, rgba(13, 148, 136, 0.22));
}

.client-router-steps li.is-done::before {
  background: var(--sea, #0d9488);
}

.client-router-steps li.is-fail {
  color: var(--danger, #b42318);
  font-weight: 600;
}

.client-router-steps li.is-fail::before {
  background: var(--danger, #b42318);
}

.client-router-frame {
  flex: 1 1 auto;
  width: 100%;
  min-height: min(70vh, 720px);
  border: 0;
  background: #fff;
}

.client-router-stage.is-live .client-router-frame {
  min-height: calc(100vh - 11rem);
}

.client-router-access-page .mikrotik-secret {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  .client-cpe-access-page .mikrotik-detail-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
  }

  .client-cpe-access-page .client-cpe-toolbar-actions,
  .client-cpe-access-page .mikrotik-detail-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .client-cpe-access-page .client-router-password-row {
    flex-direction: column;
    align-items: stretch;
  }

  .client-cpe-access-page .client-router-password-row .btn {
    width: 100%;
  }

  .client-cpe-access-page .client-router-credentials-grid {
    grid-template-columns: 1fr;
  }

  .client-cpe-access-page .client-router-credentials-actions .btn {
    width: 100%;
  }

  .client-router-access-page .mikrotik-detail-actions {
    flex-wrap: wrap;
  }

  .client-router-stage,
  .client-router-frame,
  .client-router-stage.is-live .client-router-frame {
    min-height: 60vh;
  }
}

/* ==========================================================================
   Global UI System Polish ? uniformity, motion, color, responsive
   Applies across app shells, auth, landing, and shared components.
   ========================================================================== */

:root,
[data-theme="light"],
[data-theme="dark"] {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
  --dur-fast: 0.18s;
  --dur: 0.28s;
  --dur-slow: 0.45s;
  --focus-ring: 0 0 0 3px var(--sea-soft);
  --panel-radius: 16px;
  --stat-radius: 14px;
}

::selection {
  background: color-mix(in srgb, var(--sea) 35%, transparent);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--sea);
  outline-offset: 2px;
}

.btn:focus-visible,
.theme-toggle:focus-visible,
.staff-nav-toggle:focus-visible,
.account-menu-trigger:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring), 0 0 0 1px var(--sea);
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Smooth themed scrollbars (app surfaces) */
.staff-workspace,
.app-shell > .main,
.staff-app .staff-sidebar,
.account-menu-panel,
.role-modal-panel,
.pppoe-panel {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--sea) 45%, transparent) transparent;
}

.staff-workspace::-webkit-scrollbar,
.app-shell > .main::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.staff-workspace::-webkit-scrollbar-thumb,
.app-shell > .main::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--sea) 40%, transparent);
  border-radius: 999px;
}

/* ??? Page content entrance ??? */
.staff-app .staff-main > *:not(.role-modal) {
  animation: uiRise 0.5s var(--ease-out) both;
}

.staff-app .staff-main > *:nth-child(1) { animation-delay: 0.02s; }
.staff-app .staff-main > *:nth-child(2) { animation-delay: 0.06s; }
.staff-app .staff-main > *:nth-child(3) { animation-delay: 0.1s; }
.staff-app .staff-main > *:nth-child(4) { animation-delay: 0.14s; }
.staff-app .staff-main > *:nth-child(5) { animation-delay: 0.18s; }
.staff-app .staff-main > *:nth-child(6) { animation-delay: 0.22s; }

/* Keep client detail free of transform so fixed modals cover the viewport */
.staff-app .staff-main > .client-detail-page,
.staff-app .staff-main > .role-modal {
  animation: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}

@keyframes uiRise {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.client-page-lead,
.page-sub.client-page-lead {
  margin: 0 0 1.15rem;
  max-width: 62ch;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-soft);
}

.stack-gap {
  margin-top: 1rem;
}

.stack-gap-lg {
  margin-top: 1.25rem;
}

/* ??? Elevated stats ??? */
.stat-grid {
  gap: 0.85rem;
}

.staff-app .stat,
.app-shell .stat {
  position: relative;
  overflow: hidden;
  border-radius: var(--stat-radius);
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--sea) 8%, transparent), transparent 55%),
    var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 4%, transparent) inset;
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) ease;
}

.staff-app .stat::before,
.app-shell .stat::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--sea), var(--signal));
  opacity: 0.85;
  border-radius: 3px 0 0 3px;
}

.staff-app .stat:hover,
.app-shell .stat:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--sea) 35%, var(--border));
  box-shadow: 0 14px 32px color-mix(in srgb, var(--sea) 12%, transparent);
}

.staff-app .stat .value,
.app-shell .stat .value {
  letter-spacing: -0.03em;
  color: var(--ink);
}

.staff-app .stat .value:not(.stat-value-text):not(.role-stat-value),
.app-shell .stat .value:not(.stat-value-text):not(.role-stat-value) {
  background: linear-gradient(135deg, var(--ink) 20%, color-mix(in srgb, var(--sea) 70%, var(--ink)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

[data-theme="dark"] .staff-app .stat .value:not(.stat-value-text):not(.role-stat-value),
[data-theme="dark"] .app-shell .stat .value:not(.stat-value-text):not(.role-stat-value) {
  background: linear-gradient(135deg, #fff 15%, var(--sea));
  -webkit-background-clip: text;
  background-clip: text;
}

.staff-app .stat:nth-child(5) { animation-delay: 0.16s; }
.staff-app .stat:nth-child(6) { animation-delay: 0.2s; }

/* ??? Panels ??? */
.staff-app .panel,
.app-shell .panel {
  position: relative;
  border-radius: var(--panel-radius);
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--sea) 8%), var(--surface));
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 5%, transparent) inset;
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease;
}

[data-theme="dark"] .staff-app .panel,
[data-theme="dark"] .app-shell .panel {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, #1a3038), var(--surface));
}

.staff-app .panel:hover,
.app-shell .panel:hover {
  border-color: color-mix(in srgb, var(--sea) 28%, var(--border));
  box-shadow: 0 12px 36px color-mix(in srgb, var(--ink) 6%, transparent);
}

.panel-head-row {
  align-items: center;
  margin-bottom: 0.85rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.panel-head-row h2 {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

.panel-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

/* ??? Tables ??? */
.table-scroll,
.clients-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

.table-scroll .table,
.clients-table-wrap .table {
  margin: 0;
  min-width: 36rem;
}

.table-scroll .table th,
.table-scroll .table td,
.clients-table-wrap .table th,
.clients-table-wrap .table td {
  padding: 0.75rem 0.85rem;
  border-bottom-color: var(--border);
  white-space: nowrap;
}

.table-scroll .table th,
.clients-table-wrap .table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  font-weight: 800;
}

.table-scroll .table tbody tr,
.clients-table-wrap .table tbody tr,
.staff-app .table tbody tr {
  transition: background var(--dur-fast) ease;
}

.table-scroll .table tbody tr:hover,
.clients-table-wrap .table tbody tr:hover,
.staff-app .table tbody tr:hover {
  background: var(--sea-soft);
}

.table-scroll .table tbody tr:last-child td,
.clients-table-wrap .table tbody tr:last-child td {
  border-bottom: 0;
}

/* ??? Buttons ??? */
.btn {
  position: relative;
  overflow: hidden;
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-fast) ease,
    box-shadow var(--dur) ease,
    filter var(--dur-fast) ease,
    border-color var(--dur-fast) ease;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.18), transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.55s var(--ease-out);
  pointer-events: none;
}

.btn:hover::after {
  transform: translateX(120%);
}

.btn-primary {
  background: linear-gradient(135deg, #0c7a84 0%, #07545c 100%);
  color: #fff;
}

.btn-signal {
  background: linear-gradient(135deg, var(--signal) 0%, color-mix(in srgb, var(--signal) 75%, #c07800) 100%);
}

.btn-sm {
  padding: 0.45rem 0.85rem;
  font-size: 0.8rem;
}

/* ??? Badges ??? */
.badge {
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.badge:hover {
  transform: translateY(-1px);
}

/* ??? Forms ??? */
.form-control,
input.form-control,
select.form-control,
textarea.form-control {
  border-radius: 12px;
  transition:
    border-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease,
    background var(--dur-fast) ease;
}

.form-control:hover {
  border-color: color-mix(in srgb, var(--sea) 35%, var(--input-border));
}

.form-control:focus {
  border-color: var(--sea);
  box-shadow: var(--focus-ring);
  outline: none;
}

/* ??? Topbar / sidebar polish ??? */
.staff-topbar {
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--border);
  transition: background var(--dur) ease, border-color var(--dur) ease;
}

.staff-topbar-heading {
  letter-spacing: -0.03em;
}

.staff-sidebar nav a,
.staff-sidebar .staff-sidebar-action,
.client-sidebar-nav a,
.client-sidebar-nav .staff-sidebar-action,
.client-sidebar-nav .client-sidebar-pause-btn {
  position: relative;
  border-radius: 12px;
  transition:
    background var(--dur-fast) ease,
    color var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) ease;
}

.staff-sidebar nav a:hover,
.staff-sidebar .staff-sidebar-action:hover,
.client-sidebar-nav a:hover,
.client-sidebar-nav .staff-sidebar-action:hover,
.client-sidebar-nav .client-sidebar-pause-btn:hover:not(:disabled) {
  transform: translateX(2px);
}

.staff-sidebar nav a.active,
.client-sidebar-nav a.active,
.staff-sidebar .staff-sidebar-action.active,
.client-sidebar-nav .staff-sidebar-action.active {
  background: linear-gradient(135deg, rgba(14, 124, 134, 0.35), rgba(232, 163, 23, 0.12));
  box-shadow: inset 3px 0 0 var(--signal);
}

.theme-toggle {
  transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast) ease;
}

.theme-toggle:hover {
  transform: rotate(-12deg) scale(1.05);
}

.account-menu-panel {
  animation: uiMenuIn 0.22s var(--ease-out) both;
  border-radius: 16px;
  border: 1px solid var(--border-strong);
}

@keyframes uiMenuIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ??? Auth shells: theme-aware ??? */
[data-theme="dark"] .auth-shell {
  background:
    radial-gradient(ellipse 70% 50% at 20% 10%, rgba(61, 184, 194, 0.16), transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 90%, rgba(240, 185, 58, 0.1), transparent 50%),
    linear-gradient(160deg, #0d1419, #0b1217);
}

[data-theme="dark"] .auth-panel {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border-color: var(--border);
  color: var(--ink);
}

[data-theme="dark"] .auth-role {
  background: var(--sea-soft);
  color: var(--sea);
}

.auth-panel {
  transition: transform var(--dur) ease, box-shadow var(--dur) ease;
}

.auth-panel:hover {
  transform: translateY(-2px);
}

.auth-footer a {
  color: var(--sea);
  font-weight: 700;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) ease;
}

.auth-footer a:hover {
  color: var(--sea-deep);
}

[data-theme="dark"] .staff-shell {
  background: #0b1217;
}

[data-theme="dark"] .staff-shell .staff-main {
  background:
    radial-gradient(ellipse 60% 40% at 90% 10%, rgba(240, 185, 58, 0.1), transparent 55%),
    linear-gradient(180deg, #121a20 0%, #0b1217 100%);
}

[data-theme="dark"] .staff-card {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ink);
  box-shadow: var(--shadow);
}

[data-theme="dark"] .staff-card h1,
[data-theme="dark"] .staff-card .form-group label {
  color: var(--ink);
}

[data-theme="dark"] .staff-card .lede {
  color: var(--ink-soft);
}

[data-theme="dark"] .staff-card .form-control {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--ink);
}

[data-theme="dark"] .staff-card .form-control:focus {
  border-color: var(--signal);
  box-shadow: 0 0 0 4px var(--signal-soft);
}

[data-theme="dark"] .staff-badge {
  background: color-mix(in srgb, var(--sea) 25%, #101820);
  color: var(--signal);
}

/* Soften staff-shell cream toward brand foam in light mode */
.staff-shell {
  background: linear-gradient(180deg, #f2f7f8 0%, #e8f0f2 100%);
}

.staff-shell .staff-main {
  background:
    radial-gradient(ellipse 60% 40% at 90% 10%, rgba(232, 163, 23, 0.12), transparent 55%),
    radial-gradient(ellipse 50% 35% at 0% 100%, rgba(14, 124, 134, 0.08), transparent 50%),
    linear-gradient(180deg, #f7fbfc 0%, #eef4f6 100%);
}

.staff-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--panel-radius);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.staff-card h1 {
  color: var(--ink);
}

.staff-card .lede {
  color: var(--ink-soft);
}

.staff-card .form-group label {
  color: var(--ink);
}

.staff-card .form-control {
  border-color: var(--input-border);
  background: var(--input-bg);
  color: var(--ink);
}

.staff-badge {
  border-radius: 999px;
}

/* ??? Landing hero polish ??? */
.hero-ctas .btn {
  min-width: 7.5rem;
}

.hero-copy {
  text-wrap: pretty;
}

/* ??? Empty states ??? */
.empty {
  display: grid;
  place-items: center;
  gap: 0.35rem;
  padding: 1.35rem 1rem;
  border-radius: 12px;
  border: 1px dashed var(--border-strong);
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
  text-align: center;
  font-weight: 600;
}

/* ??? Notices ??? */
.notice {
  border-radius: 12px;
  animation: uiRise 0.4s var(--ease-out) both;
}

/* ??? Renew page brand align ??? */
.renew-page {
  color: var(--ink, #0b1f2a);
}

.renew-page-bg {
  background:
    radial-gradient(ellipse 70% 50% at 15% 10%, rgba(14, 124, 134, 0.4), transparent 50%),
    radial-gradient(ellipse 55% 40% at 90% 0%, rgba(232, 163, 23, 0.22), transparent 45%),
    linear-gradient(165deg, #0b1f2a 0%, #0e3a42 48%, #09141a 100%);
}

.renew-popup {
  border-radius: 1.15rem;
  background: #f7fbfc;
  border: 1px solid rgba(14, 124, 134, 0.12);
}

.renew-popup-brand {
  color: #0e7c86;
  font-weight: 800;
}

.renew-pay {
  background: rgba(14, 124, 134, 0.1) !important;
}

.renew-pay-title {
  color: #0e7c86 !important;
}

/* ??? Safe areas + denser mobile ??? */
@supports (padding: max(0px)) {
  .staff-app .staff-main,
  .staff-app .main.staff-main {
    padding-bottom: max(1.1rem, env(safe-area-inset-bottom));
  }

  .staff-topbar {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
}

@media (max-width: 960px) {
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .panel-head-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .panel-head-actions {
    width: 100%;
  }

  .panel-head-actions .btn {
    flex: 1 1 auto;
  }
}

@media (max-width: 640px) {
  .staff-app .stat::before,
  .app-shell .stat::before {
    width: 2px;
  }

  .staff-app .stat:hover,
  .app-shell .stat:hover,
  .staff-app .panel:hover,
  .app-shell .panel:hover {
    transform: none;
    box-shadow: none;
  }

  .table-scroll .table,
  .clients-table-wrap .table {
    min-width: 30rem;
    font-size: 0.85rem;
  }

  .btn::after {
    display: none;
  }

  .grid-2.stack-gap,
  .grid-2 {
    gap: 0.85rem;
  }
}

@media (max-width: 420px) {
  .stat-grid,
  .role-stat-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .staff-app .staff-main > *,
  .staff-app .stat,
  .staff-panel,
  .auth-panel,
  .staff-card,
  .account-menu-panel,
  .btn::after,
  .notice {
    animation: none !important;
    transition: none !important;
  }

  .staff-app .stat:hover,
  .app-shell .stat:hover,
  .auth-panel:hover,
  .btn:hover {
    transform: none;
  }
}

/* ==========================================================================
   Second-pass polish ? client detail, org admin, shared nav chrome
   ========================================================================== */

/* Client detail: sticky category rail + active section */
.client-detail-page {
  scroll-behavior: smooth;
}

.client-cat-nav {
  top: 0;
  margin-bottom: 1rem;
  padding: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 6%, transparent);
  width: fit-content;
  max-width: 100%;
}

[data-theme="dark"] .client-cat-nav {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.client-cat-nav-item.is-active {
  transform: none;
  box-shadow: 0 6px 16px color-mix(in srgb, currentColor 16%, transparent);
}

.client-cat-nav-item.is-overview.is-active {
  background: var(--cat-overview-soft);
  color: var(--cat-overview);
  border-color: color-mix(in srgb, var(--cat-overview) 28%, transparent);
}

.client-cat-nav-item.is-billing.is-active {
  background: var(--cat-billing-soft);
  color: var(--cat-billing);
  border-color: color-mix(in srgb, var(--cat-billing) 28%, transparent);
}

.client-cat-nav-item.is-vouchers.is-active {
  background: var(--cat-vouchers-soft);
  color: var(--cat-vouchers);
  border-color: color-mix(in srgb, var(--cat-vouchers) 28%, transparent);
}

.client-cat-nav-item.is-live.is-active {
  background: var(--cat-live-soft);
  color: var(--cat-live);
  border-color: color-mix(in srgb, var(--cat-live) 28%, transparent);
}

.client-cat-nav-item.is-access.is-active {
  background: var(--cat-access-soft);
  color: var(--cat-access);
  border-color: color-mix(in srgb, var(--cat-access) 28%, transparent);
}

.client-cat-nav-item.is-router.is-active {
  background: var(--cat-router-soft);
  color: var(--cat-router);
  border-color: color-mix(in srgb, var(--cat-router) 28%, transparent);
}

.client-cat-nav-item.is-invoices.is-active {
  background: var(--cat-invoices-soft);
  color: var(--cat-invoices);
  border-color: color-mix(in srgb, var(--cat-invoices) 28%, transparent);
}

.client-cat-nav-item.is-active .client-cat-ico {
  border-color: color-mix(in srgb, currentColor 45%, transparent);
  background: color-mix(in srgb, currentColor 18%, var(--surface));
}

[data-client-tab-panel][hidden] {
  display: none !important;
}

[data-client-tab-panel]:not([hidden]) {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  visibility: visible;
}

/* Force readable icons, links, and detail copy on client detail */
.client-detail-page {
  color: var(--ink);
}

.client-detail-page .client-back-link {
  color: var(--ink);
  border-color: var(--border-strong);
  background: var(--surface-solid, #fff);
  font-weight: 800;
}

.client-detail-page .client-page-lead,
.client-detail-page .page-sub {
  color: var(--ink-soft);
  opacity: 1;
  font-weight: 650;
}

.client-detail-page a:not(.btn):not(.client-cat-nav-item):not(.org-action-icon) {
  color: #0a5c64;
  font-weight: 750;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.15em;
}

[data-theme="dark"] .client-detail-page a:not(.btn):not(.client-cat-nav-item):not(.org-action-icon) {
  color: #7dd3fc;
}

.client-detail-page .client-profile-kicker,
.client-detail-page .client-profile-account,
.client-detail-page .client-profile-open-hint {
  color: var(--ink-soft);
  opacity: 1;
}

.client-detail-page .client-profile-name {
  color: var(--ink);
}

.client-detail-page .client-profile-avatar {
  background: #0c7a84;
  color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, #0c7a84 22%, transparent);
}

.client-detail-page .client-profile-open-hint {
  color: var(--ink);
  border-color: var(--border-strong);
  background: var(--surface-solid, #fff);
}

.client-detail-page .mikrotik-link-status {
  color: var(--ink);
  font-weight: 800;
}

.client-detail-page .mikrotik-link-status.is-checking {
  color: var(--ink-soft);
}

.client-detail-page .client-kv dt,
.client-detail-page .client-usage-stat span,
.client-detail-page .client-live-fact dt,
.client-detail-page .client-access-label,
.client-detail-page .mikrotik-live-label {
  opacity: 1;
  color: var(--ink-soft);
  font-weight: 800;
}

.client-detail-page .client-kv strong,
.client-detail-page .client-hero-chip-value,
.client-detail-page .client-usage-stat strong,
.client-detail-page .client-live-fact strong,
.client-detail-page .client-access-value,
.client-detail-page .mikrotik-live-value {
  color: var(--ink);
  opacity: 1;
}

.client-detail-page .client-kv dd > span,
.client-detail-page .client-live-fact span,
.client-detail-page .client-access-hint,
.client-detail-page .mikrotik-live-hint,
.client-detail-page .panel-sub {
  opacity: 1;
  color: var(--ink-soft);
  font-weight: 650;
}

.client-detail-page .client-row-ico,
.client-detail-page .client-cat-ico {
  opacity: 1;
  visibility: visible;
}

.client-detail-page .client-row-ico svg,
.client-detail-page .client-cat-ico svg,
.client-detail-page .client-cat-nav-item .client-cat-ico svg {
  opacity: 1;
  visibility: visible;
  fill: currentColor;
  color: inherit;
  filter: none;
}

.client-detail-page [data-cat="overview"] .client-row-ico,
.client-detail-page [data-hero-chip] .client-row-ico {
  background: #d8f1f3;
  color: #07545c;
  border-color: #0c7a84;
}

.client-detail-page [data-cat="billing"] .client-row-ico {
  background: #fef3c7;
  color: #92400e;
  border-color: #d97706;
}

.client-detail-page [data-cat="live"] .client-row-ico {
  background: #d1fae5;
  color: #065f46;
  border-color: #059669;
}

.client-detail-page [data-cat="access"] .client-row-ico {
  background: #dbeafe;
  color: #1e40af;
  border-color: #2563eb;
}

.client-detail-page [data-cat="router"] .client-row-ico {
  background: #ede9fe;
  color: #5b21b6;
  border-color: #7c3aed;
}

.client-detail-page [data-cat="invoices"] .client-row-ico {
  background: #fee2e2;
  color: #991b1b;
  border-color: #dc2626;
}

.client-detail-page .client-cat-nav-item .client-cat-ico {
  border-width: 1.5px;
}

.client-detail-page .client-cat-nav-item.is-overview .client-cat-ico {
  background: #d8f1f3;
  color: #07545c;
  border-color: #0c7a84;
}

.client-detail-page .client-cat-nav-item.is-billing .client-cat-ico {
  background: #fef3c7;
  color: #92400e;
  border-color: #d97706;
}

.client-detail-page .client-cat-nav-item.is-invoices .client-cat-ico {
  background: #fee2e2;
  color: #991b1b;
  border-color: #dc2626;
}

.client-detail-page .org-status {
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  font-weight: 800;
}

.client-detail-page .org-status-active {
  background: #d1fae5;
  color: #065f46;
}

.client-detail-page h2,
.client-detail-page .mikrotik-detail-toolbar-copy h2 {
  color: var(--ink);
}

.client-detail-page > .panel {
  scroll-margin-top: 4.5rem;
  opacity: 1;
  transform: none;
  animation: none;
}

.client-detail-page > .panel:nth-of-type(1),
.client-detail-page > .panel:nth-of-type(2),
.client-detail-page > .panel:nth-of-type(3),
.client-detail-page > .panel:nth-of-type(4),
.client-detail-page > .panel:nth-of-type(5),
.client-detail-page > .panel:nth-of-type(6) {
  animation: none;
  animation-delay: 0s;
}

.client-detail-page .client-hero {
  border-radius: 18px;
}

.client-detail-page .client-kv {
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.client-detail-page .client-kv:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--section-accent, var(--sea)) 35%, var(--border));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--section-accent, var(--sea)) 10%, transparent);
}

.client-profile-open {
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.client-profile-open:hover {
  transform: translateY(-1px);
}

/* Client detail ? visibility, contrast, responsive polish */
.client-detail-page > .client-page-lead {
  margin: -0.25rem 0 0.95rem;
  max-width: 48rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.45;
}

.client-detail-page > .panel {
  border-color: var(--border-strong);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--section-soft), transparent 55%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface-solid, var(--surface)) 96%, transparent),
      var(--surface-2)
    );
}

.client-detail-page .client-kv dt,
.client-detail-page .client-usage-stat span,
.client-detail-page .mikrotik-live-label {
  opacity: 1;
  color: var(--ink-soft);
  font-weight: 800;
}

.client-detail-page .client-kv strong,
.client-detail-page .client-hero-chip-value,
.client-detail-page .mikrotik-live-value,
.client-detail-page .client-usage-stat strong {
  color: var(--ink);
}

.client-detail-page .client-kv dd > span,
.client-detail-page .mikrotik-live-hint,
.client-detail-page .client-access-hint {
  opacity: 1;
  color: var(--ink-soft);
  font-weight: 600;
}

.client-detail-page .mikrotik-live-stamp {
  opacity: 1;
  color: var(--ink-soft);
  font-weight: 700;
}

.client-detail-page .panel-sub {
  color: var(--ink-soft);
  font-weight: 600;
}

.client-detail-page .client-subscription-banner {
  border: 1px solid transparent;
  font-weight: 700;
  line-height: 1.4;
}

.client-detail-page .client-subscription-banner.is-active {
  border-color: color-mix(in srgb, var(--cat-live) 35%, var(--border));
  background: var(--cat-live-soft);
  color: var(--cat-live);
}

.client-detail-page .client-subscription-banner.is-blocked {
  border-color: color-mix(in srgb, var(--cat-invoices) 35%, var(--border));
  background: var(--cat-invoices-soft);
  color: var(--cat-invoices);
}

.client-detail-page .client-subscription-banner.is-paused {
  border-color: color-mix(in srgb, #b47814 35%, var(--border));
  background: color-mix(in srgb, #b47814 12%, transparent);
  color: #8a5a00;
}

.client-detail-page .client-hero-status .org-status {
  font-size: 0.78rem;
}

.client-section-cta {
  margin-top: 0.85rem;
  width: 100%;
  justify-content: flex-start;
}

/* Icons ? solid high-contrast chips (wins over soft color-mix) */
.client-detail-page .client-row-ico,
.client-detail-page .client-cat-ico,
.client-detail-page .client-cat-nav-item .client-cat-ico {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 0.55rem;
  border: 1.5px solid currentColor;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  opacity: 1;
}

.client-detail-page .client-row-ico svg,
.client-detail-page .client-cat-ico svg,
.client-detail-page .client-cat-nav-item .client-cat-ico svg {
  width: 1.05rem;
  height: 1.05rem;
  display: block;
  opacity: 1;
  filter: none;
  fill: currentColor;
}

.client-detail-page [data-cat="overview"] .client-row-ico,
.client-detail-page [data-hero-chip] .client-row-ico,
.client-detail-page .client-cat-overview .client-cat-ico,
.client-detail-page .client-cat-nav-item.is-overview .client-cat-ico {
  background: #d8f1f3;
  color: #07545c;
  border-color: #0c7a84;
}

.client-detail-page [data-cat="billing"] .client-row-ico,
.client-detail-page .client-cat-billing .client-cat-ico,
.client-detail-page .client-cat-nav-item.is-billing .client-cat-ico {
  background: #fef3c7;
  color: #92400e;
  border-color: #d97706;
}

.client-detail-page [data-cat="vouchers"] .client-row-ico,
.client-detail-page .client-cat-vouchers .client-cat-ico,
.client-detail-page .client-cat-nav-item.is-vouchers .client-cat-ico {
  background: #ccfbf1;
  color: #0f766e;
  border-color: #14b8a6;
}

.client-detail-page [data-cat="live"] .client-row-ico,
.client-detail-page .client-cat-live .client-cat-ico {
  background: #d1fae5;
  color: #065f46;
  border-color: #059669;
}

.client-detail-page [data-cat="live"] [data-ico="down"] .client-row-ico {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #2563eb;
}

.client-detail-page [data-cat="live"] [data-ico="up"] .client-row-ico {
  background: #ffedd5;
  color: #c2410c;
  border-color: #ea580c;
}

.client-detail-page [data-cat="access"] .client-row-ico,
.client-detail-page .client-cat-access .client-cat-ico {
  background: #dbeafe;
  color: #1e40af;
  border-color: #2563eb;
}

.client-detail-page [data-cat="router"] .client-row-ico,
.client-detail-page .client-cat-router .client-cat-ico {
  background: #ede9fe;
  color: #5b21b6;
  border-color: #7c3aed;
}

.client-detail-page [data-cat="invoices"] .client-row-ico,
.client-detail-page .client-cat-invoices .client-cat-ico,
.client-detail-page .client-cat-nav-item.is-invoices .client-cat-ico {
  background: #fee2e2;
  color: #991b1b;
  border-color: #dc2626;
}

.client-detail-page [data-cat="invoices"] [data-ico="paid"] .client-row-ico {
  background: #d1fae5;
  color: #065f46;
  border-color: #059669;
}

.client-detail-page [data-cat="invoices"] [data-ico="pending"] .client-row-ico {
  background: #fef3c7;
  color: #92400e;
  border-color: #d97706;
}

.client-detail-page .mikrotik-secret-toggle,
.client-detail-page .password-toggle {
  color: var(--ink);
  opacity: 1;
}

.client-detail-page .mikrotik-secret-toggle svg,
.client-detail-page .password-toggle svg {
  opacity: 1;
  color: var(--ink);
}

.org-actions-icons .org-action-icon {
  width: 2.15rem;
  height: 2.15rem;
  color: var(--ink);
  background: var(--surface-solid, #fff);
  border-color: color-mix(in srgb, var(--ink) 22%, var(--border-strong));
  box-shadow: 0 1px 2px color-mix(in srgb, #000 8%, transparent);
}

.org-actions-icons .org-action-icon svg {
  width: 1.05rem;
  height: 1.05rem;
  opacity: 1;
}

.org-actions-icons .org-action-warn {
  color: #c2410c;
  background: #ffedd5;
  border-color: #ea580c;
}

.org-actions-icons .org-action-success {
  color: #15803d;
  background: #dcfce7;
  border-color: #16a34a;
}

.org-actions-icons .org-action-danger {
  color: #b91c1c;
  background: #fee2e2;
  border-color: #dc2626;
}

[data-theme="dark"] .org-actions-icons .org-action-icon {
  color: #e8eef2;
  background: color-mix(in srgb, #fff 10%, var(--surface-2));
  border-color: color-mix(in srgb, #fff 22%, var(--border));
}

.client-detail-table-shell {
  margin-top: 0.55rem;
  max-width: 100%;
}

.client-detail-page .org-table-client-billing,
.client-detail-page .org-table-client-devices {
  min-width: 0;
}

.client-detail-page .org-table-client-billing th,
.client-detail-page .org-table-client-billing td,
.client-detail-page .org-table-client-devices th,
.client-detail-page .org-table-client-devices td {
  padding: 0.75rem 0.9rem;
  font-size: 0.86rem;
}

.org-status-paid {
  background: var(--success-soft);
  color: var(--success);
}

.org-status-pending {
  background: var(--signal-soft);
  color: var(--chip-signal-fg, #b45309);
}

.org-status-overdue {
  background: var(--danger-soft);
  color: var(--danger);
}

.org-status-draft,
.org-status-cancelled {
  background: var(--surface-3);
  color: var(--ink-soft);
}

.client-detail-page .client-billing-split > div {
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 3%, transparent), transparent 50%),
    var(--surface);
  border-color: var(--border-strong);
}

.client-detail-page .client-access-note {
  color: var(--ink-soft);
  font-weight: 600;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .client-detail-page .client-kv-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .client-detail-page > .client-page-lead {
    font-size: 0.88rem;
    margin-bottom: 0.8rem;
  }

  .client-cat-nav {
    border-radius: 16px;
    gap: 0.35rem;
  }

  .client-detail-page .client-kv-list,
  .client-detail-page .client-kv-row,
  .client-detail-page .client-usage-stats {
    grid-template-columns: 1fr;
  }

  .client-detail-page .mikrotik-detail-actions {
    flex-wrap: wrap;
  }

  .client-detail-page .mikrotik-detail-actions .btn {
    flex: 1 1 calc(50% - 0.35rem);
    min-width: 0;
    justify-content: center;
  }

  .client-profile-open-hint {
    width: 100%;
    justify-content: center;
    margin-left: 0;
  }

  .client-detail-table-shell {
    border-radius: 14px;
  }

  .client-detail-page:not(.client-billing-page) .org-table-client-billing,
  .client-detail-page .org-table-client-devices {
    min-width: 32rem;
  }
}

@media (max-width: 480px) {
  .client-detail-page > .panel {
    padding: 0.8rem 0.75rem 0.85rem;
  }

  .client-detail-page .mikrotik-detail-toolbar-copy h2 {
    font-size: 1.05rem;
  }

  .client-cat-nav-item {
    padding: 0.4rem 0.65rem;
    font-size: 0.72rem;
  }

  .client-detail-page .mikrotik-detail-actions .btn {
    flex: 1 1 100%;
  }
}

/* Client detail package modals - full-viewport overlay + compact panel */
.client-action-modal.pppoe-modal {
  place-items: center;
  padding: 1rem;
  z-index: 1300;
  align-content: center;
  justify-content: center;
}

.client-action-modal.pppoe-modal .role-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 14, 20, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.client-action-modal.pppoe-modal .role-modal-panel.pppoe-panel {
  display: flex;
  flex-direction: column;
  width: min(100%, 32rem);
  max-height: min(92dvh, 40rem);
  min-height: 0;
  height: auto;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* Register PPPoE - constrained panel + scrollable body */
.client-action-modal.pppoe-modal.pppoe-modal--register .role-modal-panel.pppoe-panel {
  width: min(100%, 34rem);
  max-height: min(90dvh, 44rem);
  min-height: 0;
}

.client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-panel::before {
  display: none;
}

.client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  gap: 0.85rem;
  padding: 0.9rem 1.1rem 1rem;
  scrollbar-gutter: stable;
}

.client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-head,
.client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-foot {
  flex: 0 0 auto;
}

.client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-head {
  align-items: center;
  padding: 0.95rem 1.1rem;
  gap: 0.65rem;
}

.client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-head-badges {
  display: none;
}

.client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-kicker {
  margin: 0 0 0.25rem;
}

.client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-head h2 {
  font-size: clamp(1.05rem, 3.2vw, 1.25rem);
}

.client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-sub {
  display: none;
}

.client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-section {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-section--slim + .pppoe-section--slim {
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-section-head {
  display: none;
}

.client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-section-title {
  margin: 0 0 0.65rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

.client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-section-title::after {
  display: none;
}

.client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-grid {
  gap: 0.7rem;
}

.client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-grid .form-control {
  min-height: 2.55rem;
  padding: 0.55rem 0.8rem;
  border-radius: 10px;
  font-size: 0.92rem;
}

.client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-serial-list {
  display: grid;
  gap: 0.55rem;
}

.client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-serial-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.45rem;
  align-items: end;
}

.client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-serial-row .field {
  margin: 0;
}

.client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-serial-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.55rem;
  height: 2.55rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(232, 242, 244, 0.72);
  cursor: pointer;
}

.client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-serial-remove:hover {
  color: #fff;
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.12);
}

[data-theme="light"] .client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-serial-remove {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(15, 23, 42, 0.03);
  color: rgba(15, 23, 42, 0.55);
}

.client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-grid .form-control.text-upper::placeholder {
  text-transform: none;
}

.client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-grid label {
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 650;
}

.client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-note {
  margin: 0;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  border: 1px solid rgba(232, 163, 23, 0.28);
  background: rgba(232, 163, 23, 0.1);
  color: rgba(232, 242, 244, 0.82);
  font-size: 0.78rem;
  line-height: 1.35;
}

.client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-advanced {
  margin: 0;
  padding: 0.15rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-advanced > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  list-style: none;
  cursor: pointer;
  padding: 0.7rem 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(232, 242, 244, 0.82);
}

.client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-advanced > summary::-webkit-details-marker {
  display: none;
}

.client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-advanced-hint {
  font-size: 0.72rem;
  font-weight: 550;
  color: rgba(232, 242, 244, 0.48);
}

.client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-advanced[open] > summary {
  margin-bottom: 0.55rem;
}

.client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-foot {
  gap: 0.55rem;
  padding: 0.75rem 1.1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

.client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-foot .btn {
  min-height: 2.55rem;
  padding: 0.6rem 1rem;
}

.client-action-modal.pppoe-modal .pppoe-body {
  padding-top: 1rem;
  padding-bottom: 1.05rem;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
}

.client-action-modal.pppoe-modal .pppoe-section:last-child {
  margin-bottom: 0;
}

.client-action-modal.pppoe-modal .pppoe-select select,
.client-action-modal.pppoe-modal .pppoe-body input[type="date"],
.client-action-modal.pppoe-modal .pppoe-body input[type="time"],
.client-action-modal.pppoe-modal .pppoe-body input[type="text"] {
  min-height: 2.65rem;
}

.client-action-modal.pppoe-modal [data-period-mode][hidden] {
  display: none !important;
}

[data-theme="light"] .client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-section--slim + .pppoe-section--slim,
[data-theme="light"] .client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-advanced {
  border-top-color: rgba(11, 31, 42, 0.08);
}

[data-theme="light"] .client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-advanced > summary {
  color: var(--ink);
}

[data-theme="light"] .client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-advanced-hint {
  color: var(--ink-soft);
}

[data-theme="light"] .client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-note {
  border-color: rgba(160, 106, 0, 0.22);
  background: rgba(232, 163, 23, 0.1);
  color: var(--ink);
}

[data-theme="light"] .client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-body {
  scrollbar-color: rgba(11, 31, 42, 0.28) transparent;
}

@media (min-width: 720px) {
  .client-action-modal.pppoe-modal {
    place-items: center;
    padding: 1.25rem;
  }

  .client-action-modal.pppoe-modal .role-modal-panel.pppoe-panel {
    border-radius: 20px;
    max-height: min(88dvh, 42rem);
    min-height: 0;
  }

  .client-action-modal.pppoe-modal.pppoe-modal--register .role-modal-panel.pppoe-panel {
    width: min(100%, 38rem);
    max-height: min(88dvh, 46rem);
  }

  .client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-head {
    padding: 1rem 1.35rem;
  }

  .client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-body {
    padding: 1rem 1.35rem 1.15rem;
    gap: 0.95rem;
  }

  .client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-foot {
    padding: 0.85rem 1.35rem;
  }

  .client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-grid .field-span-2,
  .client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-note {
    grid-column: 1 / -1;
  }

  .client-action-modal.pppoe-modal .pppoe-panel::before {
    display: none;
  }
}

@media (min-width: 960px) {
  .client-action-modal.pppoe-modal.pppoe-modal--register .role-modal-panel.pppoe-panel {
    width: min(100%, 40rem);
  }
}

@media (max-width: 719px) {
  .client-action-modal.pppoe-modal {
    place-items: end center;
    padding: 0;
  }

  .client-action-modal.pppoe-modal.pppoe-modal--register .role-modal-panel.pppoe-panel {
    width: 100%;
    max-height: 92dvh;
    min-height: 0;
    border-radius: 18px 18px 0 0;
  }

  .client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-body {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-grid {
    grid-template-columns: 1fr;
  }

  .client-action-modal.pppoe-modal .pppoe-foot {
    padding-bottom: max(0.85rem, env(safe-area-inset-bottom, 0px));
  }

  .client-action-modal.pppoe-modal .pppoe-foot .btn {
    flex: 1 1 auto;
  }
}

/* Billing package register / edit — compact popup (account payments) */
.client-action-modal.pppoe-modal.pppoe-modal--package .role-modal-panel.pppoe-panel {
  width: min(100%, 28rem);
  max-height: min(92dvh, 40rem);
}

.client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-panel::before {
  display: none;
}

.client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-head,
.client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-foot {
  flex: 0 0 auto;
}

.client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-head {
  align-items: center;
  padding: 0.9rem 1.15rem;
  border-bottom: 1px solid var(--modal-border, rgba(255, 255, 255, 0.08));
}

.client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-head h2 {
  margin: 0;
  font-size: clamp(1.05rem, 3vw, 1.18rem);
  line-height: 1.25;
}

.client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-body {
  flex: 1 1 auto;
  min-height: 0;
  gap: 0.85rem;
  padding: 0.95rem 1.15rem 1rem;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-section {
  padding: 0;
  border: 0;
  background: transparent;
}

.client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-section-title,
.client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-kicker,
.client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-sub {
  display: none;
}

.client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-grid {
  gap: 0.75rem;
}

.client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-grid .form-control {
  min-height: 2.55rem;
  padding: 0.55rem 0.8rem;
  font-size: 0.92rem;
  border-radius: 11px;
}

.client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-grid label {
  margin-bottom: 0.28rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--modal-ink, var(--ink, #e8f2f4));
}

.client-action-modal.pppoe-modal.pppoe-modal--package .field-hint {
  margin-top: 0.28rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--modal-ink-soft, var(--ink-soft, rgba(232, 242, 244, 0.64)));
}

.client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-advanced {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--modal-border, rgba(255, 255, 255, 0.08));
}

.client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-advanced > summary {
  padding: 0.65rem 0;
  font-size: 0.8rem;
  color: var(--modal-ink, var(--ink, #e8f2f4));
}

.client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-advanced-hint {
  color: var(--modal-muted, var(--ink-soft, rgba(232, 242, 244, 0.55)));
}

.client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-advanced .pppoe-grid {
  padding-bottom: 0.45rem;
}

.client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-foot--package {
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.75rem 1.15rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--modal-border, rgba(255, 255, 255, 0.08));
}

.client-action-modal.pppoe-modal.pppoe-modal--package .package-foot-active {
  margin: 0;
  font-size: 0.86rem;
  color: var(--modal-ink, var(--ink, #e8f2f4));
}

.client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-foot-actions {
  display: flex;
  gap: 0.55rem;
  flex: 1 1 auto;
  justify-content: flex-end;
}

.client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-foot-actions .btn {
  flex: 0 1 auto;
  min-width: 5.75rem;
  padding: 0.6rem 0.95rem;
  font-size: 0.9rem;
}

/* Service type tabs — inherit global wizard styles; only size tweaks here */
.client-action-modal.pppoe-modal.pppoe-modal--package .package-type-wizard {
  padding: 0.75rem;
  border-radius: 14px;
}

.client-action-modal.pppoe-modal.pppoe-modal--package .package-type-tabs {
  gap: 0.5rem;
}

.client-action-modal.pppoe-modal.pppoe-modal--package .package-type-tab {
  min-height: 2.65rem;
  padding: 0.5rem 0.65rem;
  justify-content: center;
  color: var(--ink-soft, rgba(232, 242, 244, 0.78));
}

.client-action-modal.pppoe-modal.pppoe-modal--package .package-type-tab-ico {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 9px;
}

.client-action-modal.pppoe-modal.pppoe-modal--package .package-type-tab-label {
  font-size: 0.86rem;
  font-weight: 750;
  color: inherit;
}

.client-action-modal.pppoe-modal.pppoe-modal--package .package-type-tab.tone-pppoe:not(.is-active) {
  color: color-mix(in srgb, var(--sea, #0e7c86) 72%, var(--ink-soft, #64748b));
}

.client-action-modal.pppoe-modal.pppoe-modal--package .package-type-tab.tone-hotspot:not(.is-active) {
  color: color-mix(in srgb, #059669 72%, var(--ink-soft, #64748b));
}

.client-action-modal.pppoe-modal.pppoe-modal--package .package-hotspot-device-step {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
}

.client-action-modal.pppoe-modal.pppoe-modal--package .package-type-tabs-compact .package-type-tab {
  min-height: 2.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  justify-content: flex-start;
  padding: 0.5rem 0.65rem;
}

.client-action-modal.pppoe-modal.pppoe-modal--package .package-type-tabs-compact .package-type-tab .package-type-tab-copy {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.client-action-modal.pppoe-modal.pppoe-modal--package .package-type-tabs-compact .package-type-tab .package-type-tab-copy strong {
  font-size: 0.82rem;
  line-height: 1.2;
}

.client-action-modal.pppoe-modal.pppoe-modal--package .package-type-tabs-compact .package-type-tab .package-type-tab-copy small {
  font-size: 0.68rem;
  line-height: 1.3;
  color: var(--ink-soft, rgba(232, 242, 244, 0.58));
  font-weight: 500;
}

.client-action-modal.pppoe-modal.pppoe-modal--package .package-hotspot-device-step .package-wizard-step {
  margin-bottom: 0.45rem;
}

.client-action-modal.pppoe-modal.pppoe-modal--package .package-inline-label {
  margin: 0 0 0.45rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft, rgba(232, 242, 244, 0.62));
}

.client-action-modal.pppoe-modal.pppoe-modal--package .package-image-upload--compact {
  display: grid;
  gap: 0.5rem;
}

.client-action-modal.pppoe-modal.pppoe-modal--package .package-image-preview--compact {
  min-height: 0;
}

.client-action-modal.pppoe-modal.pppoe-modal--package .package-image-preview--compact img {
  max-height: 4.75rem;
  width: auto;
  border-radius: 8px;
}

/* Billing period — single horizontal row */
.client-action-modal.pppoe-modal.pppoe-modal--package .package-billing-period label {
  display: block;
}

.client-action-modal.pppoe-modal.pppoe-modal--package .package-duration-custom {
  display: grid;
  grid-template-columns: auto 4.25rem minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.1rem;
}

.client-action-modal.pppoe-modal.pppoe-modal--package .package-duration-custom .package-duration-every {
  font-size: 0.84rem;
  font-weight: 650;
  color: var(--modal-ink-soft, var(--ink-soft, rgba(232, 242, 244, 0.72)));
  white-space: nowrap;
}

.client-action-modal.pppoe-modal.pppoe-modal--package .package-duration-custom .form-control {
  width: 100%;
  min-width: 0;
  text-align: center;
}

.client-action-modal.pppoe-modal.pppoe-modal--package .package-duration-unit {
  min-width: 0;
}

.client-action-modal.pppoe-modal.pppoe-modal--package .package-duration-unit select.form-control {
  width: 100%;
}

.client-action-modal.pppoe-modal.pppoe-modal--package .package-duration-custom.is-hours-only {
  grid-template-columns: auto 4.25rem auto;
}

.client-action-modal.pppoe-modal.pppoe-modal--package .package-duration-hours-label {
  font-size: 0.84rem;
  font-weight: 650;
  color: var(--modal-ink-soft, var(--ink-soft, rgba(232, 242, 244, 0.72)));
  white-space: nowrap;
}

.client-action-modal.pppoe-modal.pppoe-modal--package .package-hotspot-multi-pricing {
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, #059669 30%, var(--border, rgba(255, 255, 255, 0.14)));
  background: color-mix(in srgb, #059669 7%, transparent);
}

.client-action-modal.pppoe-modal.pppoe-modal--package .package-multi-formula {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--modal-ink-soft, var(--ink-soft, rgba(232, 242, 244, 0.72)));
}

.client-action-modal.pppoe-modal.pppoe-modal--package [data-package-billing-field][hidden] {
  display: none !important;
}

.client-action-modal.pppoe-modal.pppoe-modal--package .package-hotspot-multi-pricing .pppoe-grid {
  gap: 0.65rem;
}

.client-action-modal.pppoe-modal.pppoe-modal--package [data-package-price-wrap][hidden] {
  display: none !important;
}

[data-theme="light"] .client-action-modal.pppoe-modal.pppoe-modal--package .package-hotspot-multi-pricing {
  border-color: color-mix(in srgb, #059669 28%, var(--border));
  background: color-mix(in srgb, #059669 6%, var(--surface-solid, #fff));
}

[data-theme="light"] .client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-head {
  border-bottom-color: rgba(11, 31, 42, 0.08);
}

[data-theme="light"] .client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-advanced {
  border-top-color: rgba(11, 31, 42, 0.08);
}

[data-theme="light"] .client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-body {
  scrollbar-color: rgba(11, 31, 42, 0.22) transparent;
}

[data-theme="light"] .client-action-modal.pppoe-modal.pppoe-modal--package .package-type-tab {
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--surface-solid, #fff) 96%, transparent);
  border-color: var(--border-strong);
}

[data-theme="light"] .client-action-modal.pppoe-modal.pppoe-modal--package .package-type-tab.tone-pppoe:not(.is-active) {
  color: color-mix(in srgb, #0e7c86 78%, var(--ink-soft));
}

[data-theme="light"] .client-action-modal.pppoe-modal.pppoe-modal--package .package-type-tab.tone-hotspot:not(.is-active) {
  color: color-mix(in srgb, #059669 78%, var(--ink-soft));
}

[data-theme="light"] .client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-panel::before {
  background: rgba(11, 31, 42, 0.18);
}

@media (min-width: 34rem) {
  .client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-foot--package {
    flex-wrap: nowrap;
  }

  .client-action-modal.pppoe-modal.pppoe-modal--package .package-foot-active {
    flex: 0 1 auto;
  }

  .client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-foot-actions {
    flex: 0 0 auto;
  }
}

@media (min-width: 720px) {
  .client-action-modal.pppoe-modal.pppoe-modal--package {
    place-items: center;
    padding: 1rem;
  }

  .client-action-modal.pppoe-modal.pppoe-modal--package .role-modal-panel.pppoe-panel {
    width: min(100%, 32rem);
    max-height: min(88dvh, 38rem);
    border-radius: 18px;
  }

  .client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-head {
    padding: 1rem 1.25rem;
  }

  .client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-body {
    padding: 1rem 1.25rem 1.1rem;
  }

  .client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-foot--package {
    padding: 0.85rem 1.25rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 1024px) {
  .client-action-modal.pppoe-modal.pppoe-modal--package .role-modal-panel.pppoe-panel {
    width: min(100%, 34rem);
  }
}

@media (max-width: 719px) {
  .client-action-modal.pppoe-modal.pppoe-modal--package {
    place-items: end center;
    padding: 0;
  }

  .client-action-modal.pppoe-modal.pppoe-modal--package .role-modal-panel.pppoe-panel {
    width: 100%;
    max-height: min(94dvh, 100%);
    border-radius: 18px 18px 0 0;
  }

  .client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-panel::before {
    display: block;
    width: 2.25rem;
    height: 0.25rem;
    margin: 0.45rem auto 0;
    border-radius: 999px;
    background: var(--modal-border-strong, rgba(255, 255, 255, 0.22));
  }

  .client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-grid {
    grid-template-columns: 1fr;
  }

  .client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-foot-actions {
    width: 100%;
  }

  .client-action-modal.pppoe-modal.pppoe-modal--package .pppoe-foot-actions .btn {
    flex: 1 1 0;
  }
}

@media (max-width: 22rem) {
  .client-action-modal.pppoe-modal.pppoe-modal--package .package-duration-custom {
    grid-template-columns: auto 3.5rem minmax(0, 1fr);
    gap: 0.4rem;
  }
}

@media (max-width: 23.99rem) {
  .client-action-modal.pppoe-modal.pppoe-modal--register .pppoe-grid {
    grid-template-columns: 1fr;
  }
}

/* Org admin pages */
.org-page {
  animation: uiRise 0.4s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

.org-page-count {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--sea) 10%, transparent), transparent 60%),
    var(--surface);
}

.org-search-bar {
  position: relative;
  max-width: 32rem;
}

.org-search-bar::before {
  content: "";
  position: absolute;
  left: 0.95rem;
  top: 50%;
  width: 0.9rem;
  height: 0.9rem;
  transform: translateY(-50%);
  border: 2px solid var(--ink-soft);
  border-radius: 50%;
  opacity: 0.55;
  pointer-events: none;
  box-shadow: 0.35rem 0.35rem 0 -0.28rem var(--ink-soft);
}

.org-search-input {
  max-width: none;
  padding-left: 2.45rem;
  border-radius: 999px;
  border-width: 1.5px;
  background: var(--surface);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.org-search-input:focus {
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px var(--sea-soft), 0 10px 24px color-mix(in srgb, var(--sea) 10%, transparent);
}

.org-table-shell {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 32px color-mix(in srgb, var(--ink) 5%, transparent);
}

.org-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  backdrop-filter: blur(8px);
}

.org-table tbody tr {
  transition: background 0.15s ease, transform 0.15s ease;
}

.org-table tbody tr:hover td {
  background: color-mix(in srgb, var(--sea) 8%, var(--surface));
}

.org-actions-icons .org-action-icon {
  border-radius: 10px;
  transition:
    color 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.org-actions-icons .org-action-icon:hover,
.org-actions-icons .org-action-icon:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--sea) 12%, transparent);
  border-color: color-mix(in srgb, var(--sea) 40%, var(--border));
  color: var(--sea);
}

.org-code {
  display: inline-flex;
  padding: 0.22rem 0.55rem;
  border-radius: 8px;
  background: var(--surface-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

.org-identity img,
.org-identity span[aria-hidden="true"] {
  border-radius: 12px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sea) 12%, transparent);
}

@media (max-width: 720px) {
  .client-cat-nav {
    border-radius: 16px;
    padding: 0.35rem;
  }

  .client-detail-page > .panel {
    scroll-margin-top: 5.5rem;
  }

  .client-detail-page .client-kv:hover {
    transform: none;
    box-shadow: none;
  }

  .org-page-header {
    align-items: flex-start;
  }

  .org-search-bar {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-detail-page > .panel,
  .org-page,
  .client-back-link,
  .client-detail-page .client-kv,
  .org-actions-icons .org-action-icon {
    animation: none !important;
    transition: none !important;
  }

  .client-back-link:hover,
  .client-detail-page .client-kv:hover,
  .org-actions-icons .org-action-icon:hover {
    transform: none;
  }
}

/* ==========================================================================
   Professional visual system ? typography, cards, motion, responsive
   ========================================================================== */

:root,
[data-theme="light"],
[data-theme="dark"] {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
  --dur-fast: 0.16s;
  --dur: 0.32s;
  --dur-slow: 0.55s;
  --panel-radius: 20px;
  --stat-radius: 18px;
}

/* ?? Typography ?? */
h1, h2, h3, h4,
.page-title,
.staff-topbar-heading,
.panel h2,
.panel-head-row h2,
.auth-panel h1,
.staff-card h1,
.hero-brand,
.staff-hero-copy h2,
.org-page-header h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tight, -0.02em);
  line-height: var(--leading-tight, 1.2);
  text-wrap: balance;
}

.page-title {
  font-size: var(--text-xl);
  margin: 0 0 0.35rem;
}

.page-sub,
.client-page-lead,
.panel-sub,
.lede {
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-body, 1.6);
  letter-spacing: var(--tracking-normal, -0.006em);
  color: var(--ink-soft);
}

.staff-topbar-kicker,
.staff-nav-label,
.staff-hero-kicker,
.auth-role,
.staff-badge,
.label,
.stat .label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide, 0.06em);
  text-transform: uppercase;
}

.staff-topbar-heading {
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem);
  font-weight: 700;
}

.panel h2,
.panel-head-row h2 {
  font-size: var(--text-lg);
  font-weight: 700;
}

.stat .value {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);
  font-weight: 700;
  letter-spacing: var(--tracking-tight, -0.02em);
  line-height: 1.1;
}

/* ?? Workspace atmosphere ?? */
.staff-app .staff-main,
.staff-app .main.staff-main {
  padding: var(--space-page);
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

.staff-topbar {
  padding: 0.95rem var(--space-page);
  border-bottom-color: color-mix(in srgb, var(--border) 80%, transparent);
  background: var(--topbar-bg);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
}

/* ?? Premium cards / panels ?? */
.staff-app .panel,
.app-shell .panel,
.staff-panel,
.staff-app .stat,
.app-shell .stat,
.role-highlight-card,
.module-highlight,
.auth-panel,
.staff-card,
.org-table-shell,
.clients-table-wrap,
.table-scroll {
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}

.staff-app .panel,
.app-shell .panel,
.staff-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--panel-radius);
  border: 1px solid var(--border-strong);
  background:
    var(--card-shine),
    linear-gradient(165deg, color-mix(in srgb, var(--surface-solid, var(--surface)) 92%, var(--sea) 8%), var(--surface-solid, var(--surface)));
  box-shadow: var(--card-shadow);
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) ease;
}

[data-theme="dark"] .staff-app .panel,
[data-theme="dark"] .app-shell .panel,
[data-theme="dark"] .staff-panel {
  background:
    var(--card-shine),
    linear-gradient(165deg, color-mix(in srgb, #1a2630 88%, var(--sea) 12%), var(--surface-solid, #141c22));
}

.staff-app .panel::after,
.app-shell .panel::after,
.staff-panel::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--sea), var(--signal));
  opacity: 0.9;
  border-radius: 3px 0 0 3px;
  z-index: 1;
}

.staff-app .panel:hover,
.app-shell .panel:hover,
.staff-panel:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--sea) 40%, var(--border));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 24px 50px color-mix(in srgb, var(--sea) 14%, transparent);
}

.panel-head-row {
  position: relative;
  z-index: 2;
  margin-bottom: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border);
}

/* ?? Stats as elevated metric cards ?? */
.stat-grid {
  gap: clamp(0.7rem, 1.5vw, 1rem);
}

.staff-app .stat,
.app-shell .stat {
  position: relative;
  overflow: hidden;
  border-radius: var(--stat-radius);
  padding: clamp(0.95rem, 2vw, 1.2rem) clamp(1rem, 2vw, 1.25rem);
  border: 1px solid var(--border-strong);
  background:
    var(--card-shine),
    radial-gradient(120% 90% at 100% 0%, var(--sea-soft), transparent 55%),
    var(--surface-solid, var(--surface));
  box-shadow: var(--card-shadow);
  transition:
    transform var(--dur) var(--ease-spring),
    box-shadow var(--dur) var(--ease-out),
    border-color var(--dur) ease;
}

.staff-app .stat::before,
.app-shell .stat::before {
  content: "";
  position: absolute;
  right: -18%;
  top: -40%;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--signal-soft), transparent 68%);
  pointer-events: none;
}

.staff-app .stat:hover,
.app-shell .stat:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: color-mix(in srgb, var(--sea) 45%, var(--border));
  box-shadow: 0 22px 44px color-mix(in srgb, var(--sea) 16%, transparent);
}

.staff-app .stat .label,
.app-shell .stat .label {
  position: relative;
  z-index: 1;
  opacity: 0.82;
}

.staff-app .stat .value,
.app-shell .stat .value {
  position: relative;
  z-index: 1;
  margin-top: 0.45rem;
}

/* ?? Highlight / quick cards ?? */
.role-highlight-card,
.module-highlight {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--border-strong);
  background:
    var(--card-shine),
    linear-gradient(160deg, var(--surface-solid, var(--surface)), var(--surface-2));
  box-shadow: var(--card-shadow);
  transition:
    transform var(--dur) var(--ease-spring),
    border-color var(--dur) ease,
    box-shadow var(--dur) ease;
}

.role-highlight-card:hover,
.module-highlight:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--sea) 42%, var(--border));
  box-shadow: 0 20px 40px color-mix(in srgb, var(--sea) 14%, transparent);
}

.role-highlight-index {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: var(--tracking-wide, 0.06em);
}

.role-highlight-card p,
.module-highlight {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* ?? Motion ?? */
@keyframes proRise {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes proFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.staff-app .staff-main > * {
  animation: proRise 0.58s var(--ease-out) both;
}

.staff-app .staff-main > *:nth-child(1) { animation-delay: 0.03s; }
.staff-app .staff-main > *:nth-child(2) { animation-delay: 0.08s; }
.staff-app .staff-main > *:nth-child(3) { animation-delay: 0.13s; }
.staff-app .staff-main > *:nth-child(4) { animation-delay: 0.18s; }
.staff-app .staff-main > *:nth-child(5) { animation-delay: 0.23s; }
.staff-app .staff-main > *:nth-child(6) { animation-delay: 0.28s; }

.staff-app .stat {
  animation: proRise 0.55s var(--ease-out) both;
}

.staff-app .stat:nth-child(1) { animation-delay: 0.05s; }
.staff-app .stat:nth-child(2) { animation-delay: 0.1s; }
.staff-app .stat:nth-child(3) { animation-delay: 0.15s; }
.staff-app .stat:nth-child(4) { animation-delay: 0.2s; }
.staff-app .stat:nth-child(5) { animation-delay: 0.25s; }
.staff-app .stat:nth-child(6) { animation-delay: 0.3s; }

.btn {
  letter-spacing: -0.01em;
  font-weight: 800;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--sea) 12%, transparent);
}

.btn-ghost {
  box-shadow: none;
  backdrop-filter: blur(8px);
}

.btn-primary {
  background: linear-gradient(135deg, #0c7a84 0%, #07545c 100%);
  color: #fff;
  border: 1px solid #064850;
  box-shadow: 0 14px 30px rgba(7, 84, 92, 0.28);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, #1aa0ab 0%, #0c7a84 100%);
  border-color: #0e8a94;
  color: #fff;
}

.btn-signal {
  background: linear-gradient(135deg, color-mix(in srgb, var(--signal) 90%, #fff), var(--signal));
  color: var(--signal-ink);
}

.btn:hover {
  transform: translateY(-2px);
}

/* ?? Auth / landing ?? */
.auth-shell {
  background:
    radial-gradient(ellipse 70% 50% at 15% 5%, rgba(12, 122, 132, 0.28), transparent 55%),
    radial-gradient(ellipse 55% 40% at 95% 90%, rgba(224, 154, 18, 0.18), transparent 50%),
    linear-gradient(160deg, #e4f3f5, #cfe6eb);
}

[data-theme="dark"] .auth-shell {
  background:
    radial-gradient(ellipse 70% 50% at 15% 5%, rgba(69, 196, 207, 0.2), transparent 55%),
    radial-gradient(ellipse 55% 40% at 95% 90%, rgba(242, 188, 66, 0.12), transparent 50%),
    linear-gradient(160deg, #0a1218, #070d12);
}

.auth-panel,
.staff-card {
  border-radius: 22px !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--card-shadow), var(--shadow) !important;
  backdrop-filter: blur(18px) saturate(1.25);
}

.hero {
  background:
    radial-gradient(ellipse 80% 60% at 85% 15%, rgba(12, 122, 132, 0.28), transparent 55%),
    radial-gradient(ellipse 55% 45% at 10% 80%, rgba(224, 154, 18, 0.2), transparent 50%),
    linear-gradient(160deg, #e8f5f7 0%, #d4ebef 42%, #bcdfe6 100%);
}

[data-theme="dark"] .hero {
  background:
    radial-gradient(ellipse 80% 60% at 85% 15%, rgba(69, 196, 207, 0.22), transparent 55%),
    radial-gradient(ellipse 55% 45% at 10% 80%, rgba(242, 188, 66, 0.12), transparent 50%),
    linear-gradient(160deg, #0c151c 0%, #091018 50%, #0b141a 100%);
}

.hero-brand {
  font-weight: 800;
  letter-spacing: -0.045em;
}

.hero-copy {
  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.2rem);
  font-weight: 500;
  max-width: 38ch;
  line-height: 1.55;
}

/* ?? Tables ?? */
.table-scroll,
.clients-table-wrap,
.org-table-shell {
  border-radius: 18px;
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--surface-solid, var(--surface)) 88%, transparent);
  box-shadow: var(--card-shadow);
}

.table th,
.org-table th {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
}

.table td,
.org-table td {
  font-size: var(--text-sm);
  font-weight: 600;
}

/* ?? Client detail cards ?? */
.client-detail-page > .panel {
  border-radius: 20px;
  box-shadow: var(--card-shadow);
}

.client-cat-nav {
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--surface-solid, var(--surface)) 78%, transparent);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: var(--card-shadow);
}

/* ?? Empty states ?? */
.empty {
  border-radius: 16px;
  border: 1.5px dashed color-mix(in srgb, var(--sea) 28%, var(--border-strong));
  background:
    radial-gradient(ellipse 80% 80% at 50% 0%, var(--sea-soft), transparent 65%),
    color-mix(in srgb, var(--surface-2) 85%, transparent);
  font-size: var(--text-sm);
  padding: 1.5rem 1.1rem;
}

/* ?? Responsive ?? */
@media (max-width: 1100px) {
  .stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .staff-app .panel:hover,
  .app-shell .panel:hover,
  .staff-panel:hover,
  .staff-app .stat:hover,
  .app-shell .stat:hover,
  .role-highlight-card:hover,
  .module-highlight:hover {
    transform: none;
  }

  .panel-head-row {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .panel-head-actions {
    width: 100%;
  }

  .panel-head-actions .btn {
    flex: 1 1 auto;
    min-height: 2.7rem;
  }
}

@media (max-width: 640px) {
  html {
    font-size: 15px;
  }

  :root,
  [data-theme="light"],
  [data-theme="dark"] {
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-md: 0.9375rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-display: clamp(1.85rem, 8vw, 2.5rem);
    --space-page: 0.85rem;
  }

  body {
    font-size: var(--text-md);
    line-height: 1.55;
    letter-spacing: -0.004em;
  }

  .staff-app .staff-main,
  .staff-app .main.staff-main {
    padding: 0.85rem;
  }

  .staff-topbar {
    padding: 0.75rem 0.85rem;
  }

  .staff-topbar-kicker,
  .staff-hero-kicker,
  .staff-nav-label,
  .staff-sidebar-meta-label,
  .stat .label,
  .label,
  .auth-role,
  .staff-badge {
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
  }

  .staff-topbar-heading {
    font-size: 1.05rem;
  }

  .page-title,
  .panel h2,
  .panel-head-row h2,
  .org-page-header h2,
  .profile-section-title {
    font-size: 1.1rem;
  }

  .page-sub,
  .client-page-lead,
  .panel-sub,
  .lede,
  .staff-hero-copy p {
    font-size: 0.875rem;
  }

  .staff-app .panel,
  .app-shell .panel,
  .staff-panel {
    border-radius: 14px;
    padding: 0.9rem;
  }

  .staff-app .panel::after,
  .app-shell .panel::after,
  .staff-panel::after {
    width: 2px;
  }

  .stat-grid,
  .role-stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
  }

  .staff-app .stat,
  .app-shell .stat {
    padding: 0.75rem 0.8rem;
    border-radius: 12px;
  }

  .staff-app .stat .value,
  .app-shell .stat .value,
  .role-stat-value {
    font-size: 1.25rem !important;
  }

  .table,
  .table-scroll .table,
  .clients-table-wrap .table,
  .org-table {
    font-size: 0.875rem;
  }

  .table th,
  .org-table th {
    font-size: 0.6875rem;
  }

  .btn {
    min-height: 2.5rem;
    padding: 0.55rem 0.95rem;
    font-size: 0.875rem;
  }

  .btn-sm {
    min-height: 2.15rem;
    padding: 0.4rem 0.7rem;
    font-size: 0.8125rem;
  }

  .form-group label {
    font-size: 0.8125rem;
  }

  .form-control {
    padding: 0.65rem 0.8rem;
    font-size: 1rem;
  }

  .badge,
  .org-status,
  .staff-pill {
    font-size: 0.6875rem;
    padding: 0.2rem 0.5rem;
  }

  .account-menu-name {
    font-size: 0.8125rem;
  }

  .account-menu-meta,
  .account-session-row,
  .role-view-hint {
    font-size: 0.75rem;
  }

  .account-menu-links a,
  .account-menu-link-btn,
  .account-menu-logout button {
    font-size: 0.875rem;
    padding: 0.5rem 0.65rem;
  }

  .staff-sidebar nav a,
  .staff-sidebar .staff-sidebar-action,
  .client-sidebar-nav a {
    font-size: 0.9rem;
    padding: 0.6rem 0.7rem;
  }

  .staff-sidebar-meta strong {
    font-size: 0.875rem;
  }

  .staff-sidebar-meta span {
    font-size: 0.75rem;
  }

  .client-cat-nav-item {
    font-size: 0.75rem;
    padding: 0.35rem 0.55rem;
  }

  .role-highlight-card p,
  .module-highlight {
    font-size: 0.875rem;
  }

  .empty,
  .notice {
    font-size: 0.875rem;
    padding: 0.9rem 0.85rem;
  }

  .brand {
    font-size: 1rem;
  }

  .hero-brand {
    font-size: clamp(2.1rem, 11vw, 2.9rem);
  }

  .hero-copy {
    font-size: 0.95rem;
  }

  .auth-panel h1,
  .staff-card h1 {
    font-size: 1.35rem;
  }

  .hero-inner {
    padding-top: 5.5rem;
    padding-bottom: 2.5rem;
  }

  .hero-ctas {
    display: grid;
    gap: 0.55rem;
  }

  .hero-ctas .btn {
    width: 100%;
  }
}

@media (max-width: 420px) {
  html {
    font-size: 14.5px;
  }

  :root,
  [data-theme="light"],
  [data-theme="dark"] {
    --text-xs: 0.72rem;
    --text-sm: 0.85rem;
    --text-md: 0.9375rem;
    --text-lg: 1.1rem;
    --text-xl: 1.3rem;
  }

  body {
    font-size: var(--text-md);
  }

  .stat-grid,
  .role-stat-grid {
    grid-template-columns: 1fr;
  }

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

  .staff-topbar-heading {
    font-size: 1rem;
  }

  .staff-app .stat .value,
  .app-shell .stat .value,
  .role-stat-value {
    font-size: 1.2rem !important;
  }

  .panel h2,
  .panel-head-row h2,
  .page-title {
    font-size: 1.05rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .staff-app .staff-main > *,
  .staff-app .stat,
  .staff-workspace::before,
  .btn::after {
    animation: none !important;
  }

  .staff-app .panel:hover,
  .staff-app .stat:hover,
  .btn:hover {
    transform: none;
  }
}

/* Sales lead + customer registration */
.staff-app .panel.staff-panel.staff-panel-solid {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: clamp(1rem, 2.2vw, 1.45rem);
  border: 1px solid var(--border-strong, var(--border));
  border-radius: var(--panel-radius, 20px);
  background:
    var(--card-shine, none),
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--surface-solid, var(--surface)) 92%, var(--sea) 8%),
      var(--surface-solid, var(--surface))
    );
  box-shadow: var(--card-shadow, 0 14px 34px color-mix(in srgb, var(--ink) 8%, transparent));
  overflow: hidden;
}

.staff-app .panel.staff-panel:has(.sales-reg-type-grid),
.staff-app .panel.staff-panel.staff-panel-solid:has(.lead-register-form) {
  width: min(100%, 42rem);
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.staff-app .staff-main > .staff-panel-solid + .staff-panel-solid,
.staff-app .staff-main > .staff-panel + .staff-panel-solid,
.staff-app .staff-main > .staff-panel-solid + .staff-panel {
  margin-top: 1.25rem;
}

.lead-register-form {
  display: grid;
  gap: 1.15rem;
  width: 100%;
  max-width: 100%;
}

.lead-form-grid {
  gap: 1rem 1.1rem;
}

.staff-app .lead-form-grid label,
.staff-app .lead-field-label {
  font-size: var(--text-xs, 0.75rem);
  font-weight: 700;
  letter-spacing: var(--tracking-wide, 0.06em);
  text-transform: uppercase;
  color: var(--ink-soft, color-mix(in srgb, var(--ink) 68%, transparent));
}

.lead-form-section {
  margin: 0;
  padding: 0 0 1.1rem;
  border-bottom: 1px solid var(--border);
}

.lead-form-section:last-of-type {
  padding-bottom: 0;
  border-bottom: 0;
}

.lead-form-section .profile-section-title {
  margin-bottom: 0.85rem;
}

.lead-form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.lead-form-actions .btn-primary {
  min-width: 11rem;
  min-height: 2.75rem;
}

.lead-location-line {
  display: block;
  margin-top: 0.2rem;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  font-size: 0.78rem;
}

.lead-maps-link {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  max-width: 18rem;
  color: inherit;
  text-decoration: none;
  border-radius: 8px;
  padding: 0.15rem 0.2rem;
  margin: -0.15rem -0.2rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.lead-maps-link:hover,
.lead-maps-link:focus-visible {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  outline: none;
}

.lead-maps-link .lead-maps-label {
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.lead-maps-link .lead-location-line {
  text-decoration: none;
}

.sales-reg-type-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.sales-reg-type-card {
  position: relative;
  display: grid;
  gap: 0.35rem;
  cursor: pointer;
  min-height: 7.5rem;
}

.sales-reg-type-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sales-reg-type-card.is-selected,
.sales-reg-type-card:has(input:checked) {
  border-color: color-mix(in srgb, var(--sea) 42%, var(--border));
  box-shadow: 0 16px 34px color-mix(in srgb, var(--sea) 14%, transparent);
  transform: translateY(-2px);
}

.sales-reg-type-copy {
  font-size: 0.86rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}

.sales-reg-layout {
  display: grid;
  gap: 1.25rem;
  width: min(100%, 70rem);
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  align-items: start;
}

.sales-reg-layout > .staff-panel-solid:has(.lead-register-form) {
  width: min(100%, 42rem);
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.sales-reg-layout > .staff-panel-solid:not(:has(.lead-register-form)) {
  width: min(100%, 26rem);
  max-width: 26rem;
  margin-left: auto;
  margin-right: auto;
}

/* ?? Leads workspace (card-first, non-stretching) ?? */
.leads-page {
  --leads-gap: 1rem;
  --leads-radius: 16px;
  --leads-accent: var(--sea, #0c7a84);
  display: grid;
  gap: var(--leads-gap);
  width: 100%;
  max-width: 74rem;
  min-width: 0;
  margin: 0 auto;
  overflow-x: clip;
  box-sizing: border-box;
}

.leads-hero {
  position: relative;
  display: grid;
  gap: 1rem;
  padding: 1.15rem 1.2rem 1.2rem;
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--leads-accent));
  border-radius: calc(var(--leads-radius) + 2px);
  background:
    radial-gradient(ellipse 55% 80% at 0% 0%, color-mix(in srgb, var(--leads-accent) 18%, transparent), transparent 58%),
    radial-gradient(ellipse 40% 60% at 100% 0%, color-mix(in srgb, #38bdf8 10%, transparent), transparent 50%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, #fff), var(--surface));
  box-shadow: 0 10px 28px -22px color-mix(in srgb, var(--ink) 35%, transparent);
  overflow: hidden;
  animation: leads-fade-up 0.45s ease both;
}

.leads-hero::after {
  content: "";
  position: absolute;
  inset: auto -12% -40% auto;
  width: 14rem;
  height: 14rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--leads-accent) 14%, transparent), transparent 68%);
  pointer-events: none;
}

.leads-hero-top {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem 1.1rem;
  min-width: 0;
}

.leads-hero-main {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  min-width: 0;
  flex: 1 1 18rem;
}

.leads-hero-mark {
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 auto;
  border-radius: 14px;
  color: var(--leads-accent);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--leads-accent) 18%, transparent), transparent),
    color-mix(in srgb, var(--surface-2, var(--surface)) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--leads-accent) 28%, var(--border));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent);
}

.leads-hero-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.leads-hero-kicker,
.leads-board-kicker {
  margin: 0 0 0.22rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--leads-accent) 72%, var(--ink-soft));
}

.leads-hero-copy h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3.4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--ink);
}

.leads-hero-lead {
  margin: 0.4rem 0 0;
  max-width: 38rem;
  color: var(--ink-soft);
  font-size: 0.93rem;
  line-height: 1.5;
}

.leads-hero-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.leads-billing-btn {
  border-radius: 999px;
  font-weight: 700;
}

.leads-pulse {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  min-width: 0;
}

.leads-pulse-item {
  min-width: 0;
  padding: 0.8rem 0.85rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  background: color-mix(in srgb, var(--surface-solid, var(--surface)) 78%, transparent);
  backdrop-filter: blur(6px);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  animation: leads-fade-up 0.5s ease both;
}

.leads-pulse-item:nth-child(2) { animation-delay: 0.05s; }
.leads-pulse-item:nth-child(3) { animation-delay: 0.1s; }

.leads-pulse-item:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--leads-accent) 35%, var(--border));
  box-shadow: 0 8px 18px -14px color-mix(in srgb, var(--ink) 40%, transparent);
}

.leads-pulse-label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.leads-pulse-value {
  margin: 0.28rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.8vw, 1.7rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.leads-pulse-meta {
  margin: 0.28rem 0 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.35;
}

.leads-pulse-item.is-hot {
  border-color: color-mix(in srgb, #ea580c 28%, var(--border));
  background:
    linear-gradient(160deg, color-mix(in srgb, #fb923c 12%, transparent), transparent 55%),
    color-mix(in srgb, var(--surface-solid, var(--surface)) 78%, transparent);
}

.leads-pulse-item.is-hot .leads-pulse-value { color: #c2410c; }

.leads-pulse-item.is-earn {
  border-color: color-mix(in srgb, var(--leads-accent) 30%, var(--border));
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--leads-accent) 12%, transparent), transparent 55%),
    color-mix(in srgb, var(--surface-solid, var(--surface)) 78%, transparent);
}

.leads-pulse-item.is-earn .leads-pulse-value { color: var(--sea-deep, #07545c); }

[data-theme="dark"] .leads-pulse-item.is-hot .leads-pulse-value { color: #fdba74; }
[data-theme="dark"] .leads-pulse-item.is-earn .leads-pulse-value { color: #9ae8ef; }

.leads-board {
  display: grid;
  gap: 0.9rem;
  min-width: 0;
  padding: 1.05rem 1.1rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--leads-radius) + 2px);
  background: var(--surface);
  box-shadow: 0 10px 28px -24px color-mix(in srgb, var(--ink) 30%, transparent);
  animation: leads-fade-up 0.55s ease both;
  animation-delay: 0.08s;
}

.leads-board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.55rem 1rem;
  min-width: 0;
}

.leads-board-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.leads-board-head p {
  margin: 0.28rem 0 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.45;
  max-width: 40rem;
}

.leads-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45rem;
  height: 1.45rem;
  margin-left: 0.35rem;
  padding: 0 0.42rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--leads-accent) 14%, var(--surface));
  color: var(--sea-deep, #07545c);
  border: 1px solid color-mix(in srgb, var(--leads-accent) 22%, var(--border));
  font-size: 0.74rem;
  font-weight: 800;
  vertical-align: middle;
}

[data-theme="dark"] .leads-count { color: #9ae8ef; }

.leads-toolbar {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.75rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 88%, transparent);
}

.leads-search {
  position: relative;
  display: block;
  min-width: 0;
}

.leads-search-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  pointer-events: none;
  opacity: 0.75;
}

.leads-search input {
  width: 100%;
  max-width: 100%;
  min-height: 2.55rem;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-solid, #fff) 88%, transparent);
  color: var(--ink);
  padding: 0.5rem 0.9rem 0.5rem 2.35rem;
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.leads-search input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--leads-accent) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--leads-accent) 16%, transparent);
}

.leads-seg {
  display: flex;
  gap: 0.35rem;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 0.05rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.leads-seg button {
  appearance: none;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-solid, #fff) 70%, transparent);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.leads-seg button:hover,
.leads-seg button:focus-visible {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--leads-accent) 42%, var(--border));
  background: color-mix(in srgb, var(--leads-accent) 10%, var(--surface));
}

.leads-seg button.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--leads-accent), color-mix(in srgb, var(--leads-accent) 70%, #0369a1));
  box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--leads-accent) 70%, transparent);
}

[data-theme="dark"] .leads-seg button.is-active {
  color: #06262b;
  background: linear-gradient(135deg, #52d0db, #38bdf8);
}

.leads-portal-table-shell {
  margin-top: 0.1rem;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-solid, #fff) 70%, transparent);
}

.leads-page .org-table-leads {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  margin: 0;
}

.leads-page .org-table-leads thead th {
  vertical-align: bottom;
  padding: 0.72rem 0.75rem;
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 94%, transparent);
  border-bottom: 1px solid var(--border);
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.leads-page .org-table-leads th:nth-child(1),
.leads-page .org-table-leads td:nth-child(1) {
  width: 26%;
}

.leads-page .org-table-leads th:nth-child(2),
.leads-page .org-table-leads td:nth-child(2) {
  width: 7.25rem;
}

.leads-page .org-table-leads th:nth-child(3),
.leads-page .org-table-leads td:nth-child(3) {
  width: 8.25rem;
}

.leads-page .org-table-leads th.is-num,
.leads-page .org-table-leads td.is-num {
  width: 4.1rem;
  max-width: 4.1rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.leads-page .org-table-leads th.is-num {
  white-space: normal;
  line-height: 1.15;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  font-size: 0.66rem;
  letter-spacing: 0.03em;
}

.leads-page .org-table-leads td.is-num {
  white-space: nowrap;
  font-weight: 700;
  color: var(--ink-soft);
}

.leads-page .org-table-leads td.is-num.is-total {
  color: var(--ink);
  font-weight: 800;
}

.leads-page .org-table-leads th.leads-when,
.leads-page .org-table-leads td.leads-when {
  width: 6.75rem;
}

.leads-page .org-table-leads tbody td {
  vertical-align: middle;
  padding: 0.78rem 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: transparent;
  transition: background 0.14s ease;
}

.leads-page .org-table-leads tbody tr:last-child td {
  border-bottom: 0;
}

.leads-page .org-table-leads tbody tr:hover td {
  background: color-mix(in srgb, var(--leads-accent) 6%, transparent);
}

.leads-page .org-table-leads .leads-contact-link,
.leads-page .org-table-leads .leads-contact-name {
  display: inline;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.leads-page .org-table-leads .leads-contact-name {
  color: var(--ink);
}

.leads-page .org-table-leads .leads-contact-link {
  color: var(--leads-accent);
  text-decoration: underline;
  text-underline-offset: 0.14em;
  text-decoration-thickness: 1px;
}

.leads-page .org-table-leads .leads-contact-link:hover {
  color: color-mix(in srgb, var(--leads-accent) 72%, #000);
  text-decoration-thickness: 2px;
}

.leads-phone-link {
  color: inherit;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.leads-phone-link:hover {
  color: var(--leads-accent);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.leads-muted {
  color: color-mix(in srgb, var(--ink-soft) 70%, transparent);
}

.leads-page .org-table-leads td.leads-when {
  white-space: nowrap;
  color: var(--ink-soft);
  font-size: 0.84rem;
}

.leads-when-date {
  display: block;
  font-weight: 700;
  color: var(--ink);
  font-size: 0.82rem;
}

.leads-when-time {
  display: block;
  margin-top: 0.12rem;
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}

.leads-portal-row.is-hot td:first-child {
  box-shadow: inset 3px 0 0 #ea580c;
}

.leads-portal-row.is-warm td:first-child {
  box-shadow: inset 3px 0 0 #eab308;
}

.portal-interest-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 0.22rem 0.52rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-soft);
  white-space: nowrap;
}

.portal-interest-badge em {
  font-style: normal;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}

.portal-interest-badge.is-hot {
  color: #9a3412;
  border-color: color-mix(in srgb, #ea580c 45%, var(--border));
  background: color-mix(in srgb, #fb923c 16%, var(--surface));
}

.portal-interest-badge.is-warm {
  color: #854d0e;
  border-color: color-mix(in srgb, #eab308 45%, var(--border));
  background: color-mix(in srgb, #facc15 14%, var(--surface));
}

.portal-interest-badge.is-cold {
  color: color-mix(in srgb, var(--ink-soft) 90%, #64748b);
}

[data-theme="dark"] .portal-interest-badge.is-hot { color: #fdba74; }
[data-theme="dark"] .portal-interest-badge.is-warm { color: #fde68a; }

.leads-mac {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.74rem;
  white-space: nowrap;
}

.leads-empty {
  display: grid;
  justify-items: start;
  gap: 0.35rem;
  padding: 1.6rem 1rem;
  text-align: left;
  border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--border) 90%, var(--leads-accent));
  background:
    radial-gradient(ellipse 50% 80% at 0% 0%, color-mix(in srgb, var(--leads-accent) 8%, transparent), transparent 60%),
    color-mix(in srgb, var(--surface-2, var(--surface)) 80%, transparent);
}

.leads-empty-ico {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.2rem;
  border-radius: 12px;
  color: var(--leads-accent);
  background: color-mix(in srgb, var(--leads-accent) 12%, transparent);
}

.leads-empty strong {
  display: block;
  font-size: 1rem;
  font-weight: 800;
}

.leads-empty p {
  margin: 0;
  max-width: 34rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}

@keyframes leads-fade-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .leads-hero,
  .leads-board,
  .leads-pulse-item {
    animation: none;
  }

  .leads-pulse-item:hover {
    transform: none;
  }
}

@media (max-width: 820px) {
  .leads-pulse {
    grid-template-columns: 1fr;
  }

  .leads-hero-actions {
    width: 100%;
  }

  .leads-hero-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .leads-page {
    gap: 0.75rem;
  }

  .leads-hero,
  .leads-board {
    padding: 0.9rem;
  }

  .leads-hero-main {
    gap: 0.7rem;
  }

  .leads-toolbar {
    padding: 0.65rem;
  }
}

@media (min-width: 48rem) {
  .staff-app .lead-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .staff-app .lead-form-grid .field-span-2,
  .staff-app .lead-form-grid .mikrotik-location-field {
    grid-column: span 2;
  }
}

@media (min-width: 72rem) {
  .sales-reg-layout {
    grid-template-columns: minmax(0, 42rem) minmax(16rem, 26rem);
    justify-content: center;
  }

  .sales-reg-layout > .staff-panel-solid {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }
}

@media (max-width: 900px) {
  .sales-reg-type-grid {
    grid-template-columns: 1fr;
  }

  .sales-reg-type-card {
    min-height: 0;
  }

  .sales-reg-layout > .staff-panel-solid:not(:has(.lead-register-form)) {
    width: min(100%, 42rem);
    max-width: 42rem;
  }

  .lead-form-actions {
    justify-content: stretch;
  }

  .lead-form-actions .btn,
  .lead-form-actions .btn-primary {
    flex: 1 1 auto;
    width: 100%;
  }
}

@media (max-width: 720px) {
  .leads-page .org-table-leads .col-optional {
    display: none !important;
  }

  .staff-app .panel.staff-panel.staff-panel-solid {
    padding: 0.95rem;
  }
}

.sales-reg-type-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 36rem) {
  .sales-reg-type-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sales-reg-type-card {
  display: grid;
  gap: 0.3rem;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.35);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

[data-theme="light"] .sales-reg-type-card {
  background: rgba(248, 250, 252, 0.95);
  border-color: rgba(148, 163, 184, 0.45);
}

.sales-reg-type-card:hover {
  border-color: rgba(56, 189, 248, 0.55);
}

.sales-reg-type-card.is-selected {
  border-color: rgba(56, 189, 248, 0.85);
  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.35);
  background: rgba(14, 116, 144, 0.18);
}

[data-theme="light"] .sales-reg-type-card.is-selected {
  background: rgba(224, 242, 254, 0.9);
}

.sales-reg-type-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sales-reg-type-title {
  font-weight: 700;
  font-size: 0.98rem;
  color: inherit;
}

.sales-reg-type-sub {
  font-size: 0.82rem;
  line-height: 1.35;
  opacity: 0.78;
}

.sales-register-panel {
  width: min(100%, 42rem);
  max-height: min(92dvh, 40rem);
}

.sales-register-modal.client-action-modal.pppoe-modal .role-modal-panel.pppoe-panel {
  width: min(100%, 42rem);
  max-height: min(92dvh, 40rem);
}

.sales-register-modal .pppoe-panel::before {
  display: none;
}

.sales-register-modal .sales-register-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  gap: 0;
}

.sales-register-modal .sales-register-head {
  align-items: flex-start;
  gap: 1rem;
  padding: 1.15rem 1.35rem 1rem;
  border-bottom: 1px solid rgba(11, 31, 42, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 252, 0.92));
}

.sales-register-modal .pppoe-kicker {
  margin: 0 0 0.4rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}

.sales-register-modal .pppoe-head h2 {
  margin: 0;
  font-size: clamp(1.15rem, 2.8vw, 1.35rem);
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--ink);
}

.sales-register-modal .pppoe-sub {
  display: block;
  margin: 0.35rem 0 0;
  max-width: 46ch;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.sales-register-modal .sales-register-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: grid;
  gap: 0;
  padding: 1.15rem 1.35rem 1.35rem;
  scrollbar-gutter: stable;
}

.sales-register-modal .sales-register-section {
  margin: 0;
  padding: 1.1rem 1.15rem 1.2rem;
  border: 1px solid rgba(11, 31, 42, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.sales-register-modal .sales-register-section-head {
  margin: 0 0 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(11, 31, 42, 0.07);
}

.sales-register-modal .sales-register-section-head .pppoe-section-title {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}

.sales-register-modal .sales-register-section-head .pppoe-section-title::after {
  display: none;
}

.sales-register-modal .sales-register-section-desc {
  margin: 0.28rem 0 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.sales-register-modal .sales-register-grid {
  gap: 0.95rem 1rem;
}

.sales-register-modal .sales-register-grid > .field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sales-register-modal .sales-register-grid label,
.staff-app .sales-register-modal .lead-form-grid label {
  margin-bottom: 0.4rem;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-transform: none;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}

.sales-register-modal .sales-register-grid label .req {
  color: #c0392b;
  font-weight: 700;
}

.sales-register-modal .sales-register-grid .form-control {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.7rem 0.9rem;
  border-radius: 11px;
  border: 1.5px solid rgba(11, 31, 42, 0.12);
  background: #fff;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.35;
  box-shadow: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.sales-register-modal .sales-register-grid .form-control::placeholder {
  color: color-mix(in srgb, var(--ink-soft) 72%, transparent);
  text-transform: none;
  letter-spacing: 0;
}

.sales-register-modal .sales-register-grid .form-control:hover {
  border-color: rgba(14, 124, 134, 0.35);
}

.sales-register-modal .sales-register-grid .form-control:focus {
  border-color: var(--sea);
  box-shadow: 0 0 0 3px rgba(14, 124, 134, 0.14);
  outline: none;
}

/* Kill browser autofill blue so fields stay visually consistent */
.sales-register-modal .sales-register-grid .form-control:-webkit-autofill,
.sales-register-modal .sales-register-grid .form-control:-webkit-autofill:hover,
.sales-register-modal .sales-register-grid .form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  box-shadow: 0 0 0 1000px #fff inset;
  transition: background-color 99999s ease-out;
}

.sales-register-modal .sales-reg-contact {
  gap: 0;
}

.sales-register-modal .sales-reg-contact-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0.95rem 1rem;
  align-items: start;
}

.sales-register-modal .sales-reg-phone,
.sales-register-modal .sales-reg-email {
  margin: 0;
  min-width: 0;
}

.sales-register-modal .phone-row--unified {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 2.75rem;
  border: 1.5px solid rgba(11, 31, 42, 0.12);
  border-radius: 11px;
  background: #fff;
  overflow: visible;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.sales-register-modal .phone-row--unified:focus-within {
  border-color: var(--sea);
  box-shadow: 0 0 0 3px rgba(14, 124, 134, 0.14);
}

.sales-register-modal .phone-row--unified .flag-select {
  flex: 0 0 auto;
  width: auto;
  min-width: 7.25rem;
}

.sales-register-modal .phone-row--unified .flag-select-trigger {
  height: 100%;
  min-height: 2.65rem;
  padding: 0 0.7rem;
  border: 0;
  border-right: 1px solid rgba(11, 31, 42, 0.1);
  border-radius: 0;
  background: rgba(11, 31, 42, 0.02);
  box-shadow: none;
}

.sales-register-modal .phone-row--unified .flag-select-trigger:hover,
.sales-register-modal .phone-row--unified .flag-select.is-open .flag-select-trigger {
  border-color: transparent;
  border-right-color: rgba(11, 31, 42, 0.1);
  background: rgba(14, 124, 134, 0.06);
  box-shadow: none;
}

.sales-register-modal .phone-row--unified .form-control {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.65rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.sales-register-modal .phone-row--unified .form-control:hover,
.sales-register-modal .phone-row--unified .form-control:focus {
  border: 0;
  box-shadow: none;
}

.sales-register-modal .phone-row--unified .form-control:-webkit-autofill,
.sales-register-modal .phone-row--unified .form-control:-webkit-autofill:hover,
.sales-register-modal .phone-row--unified .form-control:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px #fff inset;
}

.sales-register-modal .sales-reg-phone-hint {
  margin: 0.45rem 0 0;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.sales-register-modal .mikrotik-location-combo {
  width: 100%;
}

.sales-register-modal .sales-register-foot {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1.35rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(11, 31, 42, 0.08);
  background: rgba(244, 248, 249, 0.96);
}

.sales-register-modal .sales-register-foot .btn {
  flex: 0 0 auto;
  min-height: 2.65rem;
  min-width: 6.5rem;
  padding: 0.65rem 1.15rem;
  font-weight: 650;
}

.sales-register-modal .sales-register-foot .btn-primary {
  min-width: 11.5rem;
}

@media (max-width: 560px) {
  .sales-register-modal .sales-reg-contact-row {
    grid-template-columns: 1fr;
  }

  .sales-register-modal .sales-register-head,
  .sales-register-modal .sales-register-body,
  .sales-register-modal .sales-register-foot {
    padding-left: 1.05rem;
    padding-right: 1.05rem;
  }

  .sales-register-modal .sales-register-section {
    padding: 0.95rem 0.9rem 1.05rem;
  }

  .sales-register-modal .sales-register-foot {
    flex-direction: column-reverse;
  }

  .sales-register-modal .sales-register-foot .btn {
    width: 100%;
  }
}

@media (min-width: 40rem) {
  .sales-register-modal.pppoe-modal {
    place-items: center;
    padding: 1.25rem;
  }

  .sales-register-panel {
    border-radius: 20px;
  }
}

/* Dark theme overrides for sales register modal */
[data-theme="dark"] .sales-register-modal .sales-register-head {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(8, 16, 22, 0.35), rgba(8, 16, 22, 0.12));
}

[data-theme="dark"] .sales-register-modal .pppoe-head h2 {
  color: #e8f2f4;
}

[data-theme="dark"] .sales-register-modal .pppoe-sub,
[data-theme="dark"] .sales-register-modal .sales-register-section-desc,
[data-theme="dark"] .sales-register-modal .sales-reg-phone-hint {
  color: rgba(232, 242, 244, 0.62);
}

[data-theme="dark"] .sales-register-modal .sales-register-section {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: none;
}

[data-theme="dark"] .sales-register-modal .sales-register-section-head {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .sales-register-modal .sales-register-section-head .pppoe-section-title {
  color: rgba(232, 242, 244, 0.58);
}

[data-theme="dark"] .sales-register-modal .sales-register-grid label,
[data-theme="dark"] .staff-app .sales-register-modal .lead-form-grid label {
  color: rgba(232, 242, 244, 0.82);
}

[data-theme="dark"] .sales-register-modal .sales-register-grid .form-control {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(8, 18, 24, 0.55);
  color: #e8f2f4;
}

[data-theme="dark"] .sales-register-modal .sales-register-grid .form-control:-webkit-autofill,
[data-theme="dark"] .sales-register-modal .sales-register-grid .form-control:-webkit-autofill:hover,
[data-theme="dark"] .sales-register-modal .sales-register-grid .form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: #e8f2f4;
  box-shadow: 0 0 0 1000px #12252e inset;
}

[data-theme="dark"] .sales-register-modal .phone-row--unified {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(8, 18, 24, 0.55);
}

[data-theme="dark"] .sales-register-modal .phone-row--unified .flag-select-trigger {
  border-right-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #e8f2f4;
}

[data-theme="dark"] .sales-register-modal .phone-row--unified .form-control:-webkit-autofill,
[data-theme="dark"] .sales-register-modal .phone-row--unified .form-control:-webkit-autofill:hover,
[data-theme="dark"] .sales-register-modal .phone-row--unified .form-control:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px #12252e inset;
}

[data-theme="dark"] .sales-register-modal .sales-register-foot {
  border-top-color: rgba(255, 255, 255, 0.08);
  background: rgba(8, 16, 22, 0.55);
}

/* ??? Lead allocation STK modal ??? */
.lead-stk-modal {
  place-items: end center;
  padding: 0;
  align-items: stretch;
}

.lead-stk-panel {
  position: relative;
  width: 100%;
  max-width: 100%;
  max-height: min(94dvh, 40rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  padding: 1.15rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  border-radius: 20px 20px 0 0;
}

.lead-stk-loading {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(8, 16, 22, 0.72);
  backdrop-filter: blur(4px);
}

.lead-stk-loading[hidden] {
  display: none !important;
}

.lead-stk-loading-card {
  width: min(100%, 18.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 1.15rem 1.1rem;
  border-radius: 16px;
  border: 1px solid rgba(45, 212, 191, 0.28);
  background: rgba(16, 28, 35, 0.96);
  text-align: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.lead-stk-spinner {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  border: 2.5px solid rgba(45, 212, 191, 0.25);
  border-top-color: #2dd4bf;
  animation: lead-stk-spin 0.8s linear infinite;
}

@keyframes lead-stk-spin {
  to { transform: rotate(360deg); }
}

.lead-stk-loading-title {
  margin: 0.25rem 0 0;
  font-size: 1rem;
  font-weight: 750;
  color: #f4fbfc;
}

.lead-stk-loading-text {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.4;
  color: rgba(232, 242, 244, 0.72);
}

.lead-stk-panel.is-waiting .role-modal-close,
.lead-stk-panel.is-waiting [data-close-lead-modal] {
  opacity: 0.35;
  pointer-events: none;
}

.lead-stk-head {
  margin-bottom: 1rem;
  gap: 0.75rem;
}

.lead-stk-head h2 {
  font-size: clamp(1.2rem, 4.2vw, 1.45rem);
}

.lead-stk-head .role-modal-sub {
  max-width: none;
  font-size: 0.88rem;
  color: rgba(232, 242, 244, 0.78);
}

.lead-stk-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.lead-stk-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 0.15rem;
}

.lead-stk-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem 1rem;
  align-items: start;
  margin: 0;
  padding: 0.95rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(160deg, rgba(45, 212, 191, 0.1), transparent 55%),
    rgba(255, 255, 255, 0.045);
}

.lead-stk-summary-item {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
}

.lead-stk-summary-amount {
  text-align: right;
  justify-self: end;
}

.lead-stk-summary-item dt {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(232, 242, 244, 0.55);
}

.lead-stk-summary-item dd {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.3;
  color: #f4fbfc;
  word-break: break-word;
}

.lead-stk-summary-amount dd {
  color: #5eead4;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  font-size: 1.05rem;
  white-space: nowrap;
}

.lead-stk-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.lead-stk-field label,
.lead-stk-tech-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  color: rgba(232, 242, 244, 0.88);
}

.lead-stk-input {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  min-height: 2.85rem;
  padding: 0.8rem 0.95rem;
  border: 1.5px solid rgba(45, 212, 191, 0.42);
  border-radius: 12px;
  background: rgba(8, 18, 24, 0.72);
  color: #f4fbfc;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.lead-stk-input::placeholder {
  color: rgba(232, 242, 244, 0.35);
}

.lead-stk-input:focus {
  border-color: #2dd4bf;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.18);
  background: rgba(8, 18, 24, 0.9);
}

.lead-stk-input:-webkit-autofill,
.lead-stk-input:-webkit-autofill:hover,
.lead-stk-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f4fbfc;
  caret-color: #f4fbfc;
  box-shadow: 0 0 0 1000px #0d1a21 inset;
  transition: background-color 9999s ease-out;
}

.lead-stk-textarea {
  min-height: 6.5rem;
  resize: vertical;
  line-height: 1.45;
  font-variant-numeric: normal;
  letter-spacing: normal;
}

.lead-reverse-person {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0 0 0.65rem;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(45, 212, 191, 0.28);
  background: rgba(45, 212, 191, 0.08);
}

.lead-reverse-person-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(232, 242, 244, 0.55);
}

.lead-reverse-person strong {
  font-size: 0.98rem;
  font-weight: 700;
  color: #f4fbfc;
  word-break: break-word;
}

[data-theme="light"] .lead-reverse-person {
  border-color: rgba(13, 148, 136, 0.25);
  background: rgba(13, 148, 136, 0.08);
}

[data-theme="light"] .lead-reverse-person-label {
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}

[data-theme="light"] .lead-reverse-person strong {
  color: var(--ink);
}

.lead-reverse-submit {
  background: #b42318 !important;
  border-color: #b42318 !important;
}

.lead-reverse-submit:hover,
.lead-reverse-submit:focus-visible {
  filter: brightness(1.06);
}

.lead-stk-tech {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

.lead-stk-check {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0;
  padding: 0.95rem 1rem;
  cursor: pointer;
  color: #f4fbfc;
  user-select: none;
}

.lead-stk-check input {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.15rem 0 0;
  accent-color: #2dd4bf;
}

.lead-stk-check span {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.lead-stk-check strong {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
}

.lead-stk-check small {
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(232, 242, 244, 0.55);
}

.lead-stk-tech-options {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0 1rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  animation: lead-stk-reveal 0.2s ease;
}

.lead-stk-tech-options[hidden] {
  display: none !important;
}

@keyframes lead-stk-reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.lead-stk-tech-label {
  margin-top: 0.75rem;
}

.lead-stk-select-wrap {
  position: relative;
  width: 100%;
}

.lead-stk-select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 0.45rem;
  height: 0.45rem;
  margin-top: -0.28rem;
  border-right: 2px solid rgba(232, 242, 244, 0.7);
  border-bottom: 2px solid rgba(232, 242, 244, 0.7);
  transform: rotate(45deg);
  pointer-events: none;
  z-index: 1;
}

.lead-stk-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  background-image: none !important;
  background-color: rgba(8, 18, 24, 0.85);
  color: #f4fbfc;
  padding-right: 2.5rem;
  cursor: pointer;
  text-overflow: ellipsis;
}

.lead-stk-select::-ms-expand {
  display: none;
}

.lead-stk-select option {
  color: #0f1c22;
  background: #fff;
}

.lead-stk-status {
  margin: 0;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(45, 212, 191, 0.28);
  background: rgba(45, 212, 191, 0.1);
}

.lead-stk-status p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: #99f6e4;
}

.lead-stk-status.is-error {
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.1);
}

.lead-stk-status.is-error p {
  color: #fecaca;
}

.lead-stk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
  padding-top: 0.95rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.lead-stk-actions .btn {
  min-height: 2.7rem;
  flex: 1 1 auto;
}

.lead-stk-actions .btn-primary {
  flex: 1 1 12rem;
}

@media (max-width: 420px) {
  .lead-stk-summary {
    grid-template-columns: 1fr;
  }

  .lead-stk-summary-amount {
    text-align: left;
    justify-self: start;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .lead-stk-actions {
    flex-direction: column-reverse;
  }

  .lead-stk-actions .btn,
  .lead-stk-actions .btn-primary {
    width: 100%;
    flex: none;
  }
}

@media (min-width: 640px) {
  .lead-stk-modal {
    place-items: center;
    align-items: center;
    padding: 1.5rem;
  }

  .lead-stk-panel {
    width: min(100%, 28rem);
    max-width: 28rem;
    border-radius: 22px;
    padding: 1.35rem 1.3rem 1.2rem;
  }

  .lead-stk-actions {
    justify-content: flex-end;
  }

  .lead-stk-actions .btn {
    flex: 0 0 auto;
    min-width: 7.5rem;
  }

  .lead-stk-actions .btn-primary {
    flex: 0 0 auto;
    min-width: 10.5rem;
  }
}

[data-theme="light"] .lead-stk-loading {
  background: rgba(243, 247, 248, 0.78);
}

[data-theme="light"] .lead-stk-loading-card {
  background: #fff;
  border-color: rgba(13, 148, 136, 0.25);
  box-shadow: 0 16px 40px rgba(15, 28, 34, 0.12);
}

[data-theme="light"] .lead-stk-loading-title {
  color: var(--ink);
}

[data-theme="light"] .lead-stk-loading-text {
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}

[data-theme="light"] .lead-stk-panel {
  background:
    radial-gradient(circle at top right, rgba(13, 148, 136, 0.12), transparent 42%),
    linear-gradient(180deg, #ffffff 0%, #f3f7f8 100%);
  color: #0f1c22;
  box-shadow: 0 24px 60px rgba(15, 28, 34, 0.18);
}

[data-theme="light"] .lead-stk-head .role-modal-sub {
  color: color-mix(in srgb, var(--ink) 62%, transparent);
}

[data-theme="light"] .lead-stk-summary {
  border-color: color-mix(in srgb, var(--border-strong, #c9d5d9) 90%, transparent);
  background:
    linear-gradient(160deg, rgba(13, 148, 136, 0.08), transparent 55%),
    #fff;
}

[data-theme="light"] .lead-stk-summary-item dt {
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}

[data-theme="light"] .lead-stk-summary-item dd {
  color: var(--ink);
}

[data-theme="light"] .lead-stk-summary-amount dd {
  color: #0f766e;
}

[data-theme="light"] .lead-stk-field label,
[data-theme="light"] .lead-stk-tech-label {
  color: var(--ink);
}

[data-theme="light"] .lead-stk-input,
[data-theme="light"] .lead-stk-select {
  background-color: #fff;
  color: var(--ink);
  border-color: color-mix(in srgb, #0d9488 55%, var(--border-strong, #c9d5d9));
}

[data-theme="light"] .lead-stk-input:focus,
[data-theme="light"] .lead-stk-select:focus {
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.16);
}

[data-theme="light"] .lead-stk-select-wrap::after {
  border-right-color: color-mix(in srgb, var(--ink) 55%, transparent);
  border-bottom-color: color-mix(in srgb, var(--ink) 55%, transparent);
}

[data-theme="light"] .lead-stk-hint {
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}

[data-theme="light"] .lead-stk-tech {
  border-color: var(--border, #dde6e9);
  background: #fff;
}

[data-theme="light"] .lead-stk-check {
  color: var(--ink);
}

[data-theme="light"] .lead-stk-check small {
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}

[data-theme="light"] .lead-stk-tech-options {
  border-top-color: var(--border, #dde6e9);
}

[data-theme="light"] .lead-stk-status {
  background: rgba(13, 148, 136, 0.08);
  border-color: rgba(13, 148, 136, 0.25);
}

[data-theme="light"] .lead-stk-status p {
  color: #0f766e;
}

[data-theme="light"] .lead-stk-actions {
  border-top-color: var(--border, #dde6e9);
}

[data-theme="light"] .lead-stk-summary-amount {
  border-top-color: var(--border, #dde6e9);
}


/* IT Support company settings family */
.org-edit--settings {
  width: min(100%, 52rem);
}

.company-settings-page.org-edit--settings:has(.account-page-shell--comms) {
  width: min(100%, 84rem);
}

.company-settings-page .org-edit-intro {
  margin-bottom: 1.5rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--sea) 10%, var(--surface)),
      color-mix(in srgb, var(--sea-deep) 4%, var(--surface)) 55%,
      var(--surface)
    );
}

.company-settings-icon {
  display: inline-grid;
  place-items: center;
  width: 4.75rem;
  height: 4.75rem;
  flex: 0 0 auto;
  border-radius: 18px;
  border: 2px solid color-mix(in srgb, var(--sea) 22%, transparent);
  background: linear-gradient(145deg, var(--sea), var(--sea-deep));
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.company-settings-icon--pay {
  background: linear-gradient(145deg, #0f766e, #115e59);
}

.company-settings-clear {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.company-settings-readonly {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  margin: 0;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--ink) 3%, var(--surface));
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 650;
}

.company-settings-readonly-label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
}

.company-settings-callback-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.company-settings-inline-btn {
  padding: 0.2rem 0.55rem;
  font-size: 0.78rem;
}

.company-settings-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.company-settings-preview-card {
  display: grid;
  gap: 0.35rem;
  padding: 1rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--sea) 5%, var(--surface));
}

.company-settings-preview-label {
  color: var(--sea-deep);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.company-settings-preview-card strong {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.company-settings-preview-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.4;
}

@media (max-width: 820px) {
  .company-settings-preview-grid {
    grid-template-columns: 1fr;
  }
}

[data-theme="dark"] .company-settings-page .org-edit-intro {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--sea) 16%, var(--surface)),
      color-mix(in srgb, var(--sea-deep) 8%, var(--surface)) 55%,
      var(--surface)
    );
}

[data-theme="dark"] .company-settings-preview-card {
  background: color-mix(in srgb, var(--sea) 8%, var(--surface));
}

/* IT Support ? Client settings */
.client-settings-page {
  width: 100%;
  max-width: 56rem;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  padding: 0.35rem 0 1.5rem;
}

.cs-shell {
  width: 100%;
  max-width: 52rem;
  display: grid;
  gap: clamp(1.2rem, 2vw, 1.65rem);
  margin-inline: auto;
}

.cs-hero {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.55rem;
  max-width: 40rem;
  margin-inline: auto;
  width: 100%;
  padding: clamp(1.25rem, 2.4vw, 1.75rem) clamp(1.1rem, 2.5vw, 1.6rem);
  border: 1px solid var(--border-strong);
  border-radius: 24px;
  background:
    radial-gradient(ellipse 55% 90% at 50% -10%, color-mix(in srgb, var(--sea) 22%, transparent), transparent 58%),
    radial-gradient(ellipse 40% 60% at 15% 110%, color-mix(in srgb, var(--signal) 14%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--sea) 7%, var(--surface-solid)), var(--surface-solid));
  box-shadow: var(--card-shadow);
}

.cs-kicker {
  margin: 0;
  color: var(--sea-deep);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cs-title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 1.3rem + 1.2vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.08;
  color: var(--ink);
}

.cs-lead {
  margin: 0;
  max-width: 36rem;
  color: var(--ink-soft);
  font-size: clamp(0.92rem, 0.86rem + 0.25vw, 1.05rem);
  line-height: 1.55;
}

.cs-hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.cs-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.2;
}

.cs-chip.is-live {
  border-color: color-mix(in srgb, var(--success) 28%, transparent);
  background: var(--success-soft);
  color: var(--success);
}

.cs-chip.is-muted,
.cs-chip.is-soft {
  background: color-mix(in srgb, var(--ink) 4%, var(--surface));
  color: var(--ink-soft);
}

.cs-form {
  display: grid;
  gap: 1.35rem;
}

.cs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 16.5rem));
  justify-content: center;
  gap: 0.95rem;
  align-items: start;
}

.cs-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 0.95rem;
  width: 100%;
  min-width: 0;
  height: auto;
  align-self: start;
  padding: 1.15rem 1.1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-solid) 97%, transparent), var(--surface-solid));
  box-shadow: 0 14px 36px rgba(7, 24, 32, 0.06);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease,
    background 180ms ease;
}

.cs-card-glow {
  position: absolute;
  inset: auto -20% -45% auto;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sea) 18%, transparent), transparent 68%);
  pointer-events: none;
  opacity: 0.55;
  transition: opacity 180ms ease, background 180ms ease;
}

.cs-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--sea) 28%, var(--border));
  box-shadow: 0 20px 44px rgba(7, 24, 32, 0.1);
}

.cs-card.is-on {
  border-color: color-mix(in srgb, var(--sea) 42%, transparent);
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--sea) 12%, var(--surface-solid)),
      var(--surface-solid) 52%
    );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sea) 14%, transparent),
    0 20px 44px rgba(7, 24, 32, 0.09);
}

.cs-card.is-on .cs-card-glow {
  opacity: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--sea) 28%, transparent), transparent 70%);
}

.cs-card-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
}

.cs-icon {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  color: var(--sea-deep);
  background: color-mix(in srgb, var(--sea) 14%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.cs-icon.is-fee {
  color: #8a5a00;
  background: var(--signal-soft);
}

.cs-icon.is-referral {
  color: var(--success);
  background: var(--success-soft);
}

.cs-card-body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.45rem;
  align-content: start;
}

.cs-state {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0.14rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cs-card.is-on .cs-state {
  border-color: color-mix(in srgb, var(--sea) 30%, transparent);
  background: color-mix(in srgb, var(--sea) 14%, transparent);
  color: var(--sea-deep);
}

.cs-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 780;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.cs-card-copy {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}

.cs-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
  user-select: none;
}

.cs-switch--solo {
  margin: 0;
}

.cs-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.cs-switch-track {
  position: relative;
  width: 3.05rem;
  height: 1.7rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  transition: background 180ms ease, box-shadow 180ms ease;
}

.cs-switch-track::after {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 8px rgba(7, 24, 32, 0.24);
  transition: transform 180ms ease;
}

.cs-switch input:checked + .cs-switch-track {
  background: linear-gradient(135deg, var(--sea), var(--sea-deep));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sea) 16%, transparent);
}

.cs-switch input:checked + .cs-switch-track::after {
  transform: translateX(1.35rem);
}

.cs-switch input:focus-visible + .cs-switch-track {
  outline: 2px solid color-mix(in srgb, var(--sea) 55%, transparent);
  outline-offset: 3px;
}

.cs-fee-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.45rem;
  padding: 0.9rem 0.95rem;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--signal) 28%, var(--border));
  background: color-mix(in srgb, var(--signal) 10%, var(--surface-solid));
  animation: cs-fee-in 180ms ease;
}

@keyframes cs-fee-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.cs-fee-label {
  margin: 0;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 750;
}

.cs-fee-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
}

.cs-fee-currency {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.55rem;
  padding: 0 0.75rem;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--surface-solid);
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 800;
}

.cs-fee-row .form-control,
.cs-fee-row input {
  width: 100%;
  min-height: 2.55rem;
  text-align: left;
  font-weight: 700;
}

.cs-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  padding-top: 0.15rem;
}

.cs-save {
  min-width: 10.5rem;
}

@media (max-width: 1100px) {
  .cs-grid {
    grid-template-columns: repeat(2, minmax(0, 17rem));
  }
}

@media (max-width: 720px) {
  .cs-grid {
    grid-template-columns: minmax(0, 22rem);
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .cs-shell {
    gap: 1.1rem;
  }

  .cs-hero {
    border-radius: 22px;
    padding: 1.35rem 1.1rem;
  }

  .cs-card {
    border-radius: 20px;
  }

  .cs-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cs-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-card,
  .cs-switch-track,
  .cs-switch-track::after,
  .cs-fee-panel {
    transition: none !important;
    animation: none !important;
  }

  .cs-card:hover {
    transform: none;
  }
}

[data-theme="dark"] .cs-hero {
  background:
    radial-gradient(ellipse 55% 90% at 50% -10%, color-mix(in srgb, var(--sea) 26%, transparent), transparent 58%),
    radial-gradient(ellipse 40% 60% at 15% 110%, color-mix(in srgb, var(--signal) 16%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--sea) 12%, var(--surface-solid)), var(--surface-solid));
}

[data-theme="dark"] .cs-card {
  background: color-mix(in srgb, var(--surface-solid) 96%, transparent);
}

[data-theme="dark"] .cs-card.is-on {
  background:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--sea) 18%, var(--surface-solid)),
      var(--surface-solid) 55%
    );
}

.commission-module-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.65rem;
}

.commission-module-option {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0;
  padding: 0.95rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: color-mix(in srgb, var(--sea) 4%, var(--surface));
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.commission-module-option:hover {
  border-color: color-mix(in srgb, var(--sea) 40%, var(--border-strong));
}

.commission-module-option.is-selected {
  border-color: color-mix(in srgb, var(--sea) 55%, var(--border-strong));
  background: color-mix(in srgb, var(--sea) 10%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sea) 25%, transparent);
}

.commission-module-radio {
  margin-top: 0.2rem;
  accent-color: var(--sea-deep, #0e7c86);
}

.commission-module-option-copy {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.commission-module-option-copy strong {
  font-family: var(--font-display);
  font-size: 0.98rem;
  letter-spacing: -0.02em;
}

.commission-module-option-copy span {
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
}

@media (max-width: 640px) {
  .commission-module-picker {
    grid-template-columns: 1fr;
  }
}

.commission-role-list {
  display: grid;
  gap: 0.75rem;
}

.commission-role-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: color-mix(in srgb, var(--sea) 4%, var(--surface));
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.commission-role-card:hover {
  border-color: color-mix(in srgb, var(--sea) 45%, var(--border-strong));
  background: color-mix(in srgb, var(--sea) 9%, var(--surface));
  transform: translateY(-1px);
}

.commission-role-card-main {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.commission-role-card-label {
  color: var(--sea-deep);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.commission-role-card-main strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.commission-role-card-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  flex: 0 0 auto;
}

.commission-role-card-action {
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 700;
}

@media (max-width: 640px) {
  .commission-role-card {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ??? Network equipment stock modal ??? */
.equipment-stock-modal .role-modal-panel.equipment-stock-panel {
  width: min(100%, 22.5rem);
  max-height: min(88dvh, 30rem);
}

.equipment-stock-head.pppoe-head {
  padding-bottom: 0.65rem;
}

.equipment-stock-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem 1rem 0.25rem;
}

.equipment-stock-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.8rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(155deg, rgba(45, 212, 191, 0.12), transparent 58%),
    rgba(255, 255, 255, 0.045);
}

.equipment-stock-summary-name {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;
  color: #f4fbfc;
  word-break: break-word;
  min-width: 0;
}

.equipment-stock-summary-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(232, 242, 244, 0.55);
}

.equipment-stock-summary-qty-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  flex-shrink: 0;
}

.equipment-stock-summary-qty-wrap strong {
  font-size: 1.2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #5eead4;
  letter-spacing: -0.02em;
  line-height: 1;
}

.equipment-stock-modal.is-stock-out .equipment-stock-summary {
  background:
    linear-gradient(155deg, rgba(248, 113, 113, 0.12), transparent 58%),
    rgba(255, 255, 255, 0.045);
}

.equipment-stock-modal.is-stock-out .equipment-stock-summary-qty-wrap strong {
  color: #fca5a5;
}

.equipment-stock-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

.equipment-stock-choice-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  background: rgba(8, 18, 24, 0.45);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.equipment-stock-choice-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.equipment-stock-choice-card:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
}

.equipment-stock-choice-card.is-selected {
  border-color: rgba(45, 212, 191, 0.55);
  background:
    linear-gradient(165deg, rgba(45, 212, 191, 0.16), transparent 70%),
    rgba(8, 18, 24, 0.65);
}

.equipment-stock-choice-card.is-selected#stock-choice-out {
  border-color: rgba(248, 113, 113, 0.55);
  background:
    linear-gradient(165deg, rgba(248, 113, 113, 0.16), transparent 70%),
    rgba(8, 18, 24, 0.65);
}

.equipment-stock-choice-card strong {
  font-size: 0.86rem;
  font-weight: 750;
  color: #f4fbfc;
}

.equipment-stock-qty-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.equipment-stock-qty-field[hidden] {
  display: none !important;
}

.equipment-stock-qty-field > label {
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  color: rgba(232, 242, 244, 0.88);
}

.equipment-stock-stepper {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) 2.4rem;
  gap: 0.4rem;
  align-items: center;
}

.equipment-stock-step {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: #f4fbfc;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.equipment-stock-step:hover,
.equipment-stock-step:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
  outline: none;
}

.equipment-stock-amount {
  min-height: 2.4rem !important;
  text-align: center;
  font-size: 1.1rem !important;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  border-radius: 10px !important;
}

.equipment-stock-hint {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.3;
  color: rgba(232, 242, 244, 0.58);
}

.equipment-stock-foot {
  gap: 0.5rem;
  padding-top: 0.65rem;
}

.equipment-stock-foot .btn-primary.btn-stock-out {
  background: linear-gradient(180deg, #ef6666, #dc4545);
  border-color: transparent;
  color: #fff;
}

.equipment-stock-foot .btn-primary.btn-stock-out:hover {
  filter: brightness(1.06);
}

[data-theme="light"] .equipment-stock-summary {
  border-color: rgba(15, 40, 48, 0.1);
  background:
    linear-gradient(155deg, rgba(14, 124, 134, 0.1), transparent 58%),
    rgba(15, 40, 48, 0.04);
}

[data-theme="light"] .equipment-stock-summary-label {
  color: rgba(15, 40, 48, 0.5);
}

[data-theme="light"] .equipment-stock-summary-name {
  color: var(--ink);
}

[data-theme="light"] .equipment-stock-summary-qty-wrap strong {
  color: #0e7c86;
}

[data-theme="light"] .equipment-stock-modal.is-stock-out .equipment-stock-summary {
  background:
    linear-gradient(155deg, rgba(220, 69, 69, 0.1), transparent 58%),
    rgba(15, 40, 48, 0.04);
}

[data-theme="light"] .equipment-stock-modal.is-stock-out .equipment-stock-summary-qty-wrap strong {
  color: #c03535;
}

[data-theme="light"] .equipment-stock-choice-card {
  border-color: rgba(15, 40, 48, 0.12);
  background: rgba(255, 255, 255, 0.72);
}

[data-theme="light"] .equipment-stock-choice-card:hover {
  border-color: rgba(15, 40, 48, 0.22);
  background: #fff;
}

[data-theme="light"] .equipment-stock-choice-card.is-selected {
  border-color: rgba(14, 124, 134, 0.45);
  background:
    linear-gradient(165deg, rgba(14, 124, 134, 0.1), transparent 70%),
    #fff;
}

[data-theme="light"] .equipment-stock-choice-card.is-selected#stock-choice-out {
  border-color: rgba(220, 69, 69, 0.45);
  background:
    linear-gradient(165deg, rgba(220, 69, 69, 0.1), transparent 70%),
    #fff;
}

[data-theme="light"] .equipment-stock-choice-card strong {
  color: var(--ink);
}

[data-theme="light"] .equipment-stock-hint,
[data-theme="light"] .equipment-stock-qty-field > label {
  color: var(--ink-soft);
}

[data-theme="light"] .equipment-stock-step {
  border-color: rgba(15, 40, 48, 0.14);
  background: rgba(15, 40, 48, 0.04);
  color: var(--ink);
}

@media (max-width: 420px) {
  .equipment-stock-choice {
    grid-template-columns: 1fr;
  }
}

/* ??? Network equipment action groups ??? */
.equipment-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.equipment-actions-divider {
  display: inline-block;
  width: 1px;
  height: 1.55rem;
  background: var(--border-strong, rgba(255, 255, 255, 0.18));
  flex: 0 0 auto;
}

[data-theme="light"] .equipment-actions-divider {
  background: rgba(15, 40, 48, 0.16);
}

/* ??? Equipment stock serial tracking ??? */
.equipment-stock-serial-required {
  margin: 0;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  border: 1px solid rgba(14, 165, 163, 0.35);
  background: rgba(14, 165, 163, 0.12);
  color: #b6f0ee;
  font-size: 0.78rem;
  line-height: 1.3;
}

.equipment-stock-modal.is-serial-required .equipment-stock-track {
  border-color: rgba(14, 165, 163, 0.4);
  background: rgba(14, 165, 163, 0.08);
}

[data-theme="light"] .equipment-stock-serial-required {
  border-color: rgba(14, 116, 114, 0.28);
  background: rgba(14, 116, 114, 0.08);
  color: #0f4f4d;
}

[data-theme="light"] .equipment-stock-modal.is-serial-required .equipment-stock-track {
  border-color: rgba(14, 116, 114, 0.28);
  background: rgba(14, 116, 114, 0.06);
}

.equipment-stock-track {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0;
  padding: 0.85rem 0.9rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

.equipment-discount-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0;
  padding: 0.85rem 0.9rem;
  min-height: 100%;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 80%, transparent);
  cursor: pointer;
}

.equipment-discount-toggle input {
  margin-top: 0.2rem;
  flex: 0 0 auto;
}

.equipment-discount-toggle span {
  display: grid;
  gap: 0.15rem;
}

.equipment-discount-toggle strong {
  font-size: 0.9rem;
}

.equipment-discount-toggle small {
  color: var(--ink-soft, #5b6b76);
  font-size: 0.78rem;
  line-height: 1.35;
}

[data-equipment-discount-price-wrap][hidden] {
  display: none !important;
}

[data-equipment-discount-calc].is-error {
  color: #e11d48;
}

.equipment-stock-track-verify {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.85rem 0.9rem;
  border-radius: 12px;
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.08);
}

.equipment-stock-track-verify[hidden] {
  display: none !important;
}

.equipment-stock-track-verify-title {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(254, 243, 199, 0.95);
}

.equipment-stock-track-verify-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.equipment-stock-track-verify-row .form-control {
  flex: 1 1 9rem;
  min-width: 0;
  max-width: 12rem;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
}

.equipment-stock-track-verify-row .btn {
  flex: 0 0 auto;
}

.equipment-stock-track-verify-error {
  margin: 0;
  font-size: 0.78rem;
  color: #fca5a5;
}

.equipment-stock-track input {
  margin-top: 0.2rem;
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  accent-color: #2dd4bf;
}

.equipment-stock-track span {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}

.equipment-stock-track strong {
  font-size: 0.9rem;
  color: #f4fbfc;
}

.equipment-stock-track small {
  font-size: 0.76rem;
  line-height: 1.35;
  color: rgba(232, 242, 244, 0.62);
}

.equipment-stock-serials {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.equipment-stock-serials[hidden],
.equipment-stock-track-block[hidden] {
  display: none !important;
}

.equipment-stock-scan-loop {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.65rem;
  border-radius: 12px;
  border: 1px solid rgba(45, 212, 191, 0.28);
  background: linear-gradient(180deg, rgba(45, 212, 191, 0.1), rgba(255, 255, 255, 0.03));
}

.equipment-stock-scan-loop.is-saving {
  border-color: rgba(125, 211, 252, 0.45);
}

.equipment-stock-scan-loop.is-success {
  border-color: rgba(45, 212, 191, 0.55);
}

.equipment-stock-scan-loop.is-error {
  border-color: rgba(248, 113, 113, 0.55);
  background: linear-gradient(180deg, rgba(248, 113, 113, 0.1), rgba(255, 255, 255, 0.03));
}

.equipment-stock-scan-ready {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.55rem;
  row-gap: 0.12rem;
  align-items: center;
}

.equipment-stock-scan-ready-dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  grid-row: 1 / span 2;
  background: #2dd4bf;
  box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.18);
}

.equipment-stock-scan-loop.is-saving .equipment-stock-scan-ready-dot {
  background: #7dd3fc;
  box-shadow: 0 0 0 4px rgba(125, 211, 252, 0.18);
}

.equipment-stock-scan-loop.is-error .equipment-stock-scan-ready-dot {
  background: #f87171;
  box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.18);
}

.equipment-stock-scan-ready strong {
  font-size: 0.92rem;
  color: #ecfeff;
}

.equipment-stock-scan-ready small {
  grid-column: 2;
  font-size: 0.76rem;
  color: rgba(232, 242, 244, 0.62);
}

.equipment-stock-serial-scan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: center;
}

.equipment-stock-serial-scan-field {
  position: relative;
  min-width: 0;
}

.equipment-stock-serial-scan-field .equipment-stock-serial-input {
  padding-right: 3rem;
}

.equipment-stock-camera-btn {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  width: 2.35rem;
  height: 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: rgba(45, 212, 191, 0.16);
  color: #99f6e4;
  cursor: pointer;
}

.equipment-stock-camera-btn:hover,
.equipment-stock-camera-btn:focus-visible {
  background: rgba(45, 212, 191, 0.28);
  color: #ecfeff;
  outline: none;
}

.equipment-stock-modal.is-stock-out .equipment-stock-camera-btn {
  background: rgba(251, 146, 60, 0.18);
  color: #fdba74;
}

@media (max-width: 560px) {
  .equipment-stock-serial-scan {
    grid-template-columns: 1fr;
  }

  .equipment-stock-serial-scan .btn {
    width: 100%;
  }
}

.equipment-stock-camera-modal .equipment-stock-camera-panel {
  width: min(34rem, calc(100vw - 1.5rem));
}

.equipment-stock-camera-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0 1.1rem 0.35rem;
}

.equipment-stock-camera-viewport {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0b1217;
  min-height: 16rem;
  aspect-ratio: 3 / 4;
}

.equipment-stock-camera-video,
.equipment-stock-camera-viewport > video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #0b1217;
  transform: translateZ(0);
}

.equipment-stock-camera-reader {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.equipment-stock-camera-reader video,
.equipment-stock-camera-reader canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.equipment-stock-camera-frame {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 36%;
  bottom: 36%;
  z-index: 3;
  pointer-events: none;
  border: 2px solid rgba(45, 212, 191, 0.9);
  border-radius: 12px;
  box-shadow: none;
  background: transparent;
}

.equipment-stock-camera-frame span {
  display: none;
}

.equipment-stock-camera-gate {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.2rem;
  text-align: center;
  background: rgba(6, 12, 16, 0.88);
}

.equipment-stock-camera-gate[hidden] {
  display: none !important;
}

.equipment-stock-camera-gate p {
  margin: 0;
  max-width: 18rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #ecfeff;
}

.equipment-stock-camera-gate .btn {
  min-width: 12rem;
}

.equipment-stock-camera-status {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(232, 242, 244, 0.72);
}

.allocate-serial-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.65rem;
  max-height: 8rem;
  overflow: auto;
}

.allocate-serial-chip {
  border: 1px solid rgba(45, 212, 191, 0.35);
  background: rgba(45, 212, 191, 0.1);
  color: #99f6e4;
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  font-size: 0.78rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  cursor: pointer;
}

.allocate-serial-chip:hover {
  background: rgba(45, 212, 191, 0.22);
}

[data-theme="light"] .allocate-serial-chip {
  border-color: rgba(13, 148, 136, 0.3);
  background: rgba(13, 148, 136, 0.08);
  color: #0f766e;
}

.inline-form {
  display: inline;
}

.equipment-stock-serial-scan label {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  color: rgba(232, 242, 244, 0.7);
}

.equipment-stock-serial-input {
  width: 100%;
  min-height: 2.7rem !important;
  font-size: 1rem !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.equipment-stock-serial-status {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(153, 246, 228, 0.95);
}

.equipment-stock-serial-status.is-error {
  color: #fca5a5;
}

.equipment-stock-serial-status.is-success {
  color: #99f6e4;
}

.equipment-stock-scanned-panel {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.equipment-stock-scanned-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.equipment-stock-scanned-head span {
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  color: rgba(232, 242, 244, 0.88);
}

.equipment-stock-scanned-head strong {
  min-width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.78rem;
  background: rgba(45, 212, 191, 0.18);
  color: #99f6e4;
}

.equipment-stock-serial-scanned {
  list-style: none;
  margin: 0;
  padding: 0.35rem;
  min-height: 2.75rem;
  max-height: 6.5rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.18);
}

.equipment-stock-serial-empty {
  margin: auto;
  padding: 0.55rem 0.5rem;
  text-align: center;
  font-size: 0.76rem;
  color: rgba(232, 242, 244, 0.55);
}

.equipment-stock-serial-item {
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  padding: 0.45rem 0.55rem;
  border-radius: 9px;
  background: rgba(45, 212, 191, 0.08);
  border: 1px solid rgba(45, 212, 191, 0.16);
}

.equipment-stock-serial-num {
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(232, 242, 244, 0.8);
}

.equipment-stock-serial-code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.84rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #ecfeff;
  letter-spacing: 0.03em;
}

.equipment-stock-serial-mark,
.equipment-stock-serial-remove {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5eead4;
}

.equipment-stock-serial-remove {
  margin: 0;
  padding: 0.2rem 0.4rem;
  border: 0;
  border-radius: 6px;
  background: rgba(248, 113, 113, 0.12);
  color: #fca5a5;
  cursor: pointer;
}

.equipment-stock-serial-remove:hover,
.equipment-stock-serial-remove:focus-visible {
  background: rgba(248, 113, 113, 0.22);
  outline: none;
}

.equipment-stock-amount[readonly] {
  opacity: 0.95;
  cursor: default;
}

.equipment-stock-step:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.equipment-stock-modal .role-modal-panel.equipment-stock-panel {
  max-height: min(88dvh, 30rem);
}

.equipment-stock-modal.is-stock-out .equipment-stock-scan-loop {
  border-color: rgba(251, 146, 60, 0.35);
  background: linear-gradient(180deg, rgba(251, 146, 60, 0.1), rgba(255, 255, 255, 0.03));
}

.equipment-stock-modal.is-stock-out .equipment-stock-scan-ready-dot {
  background: #fb923c;
  box-shadow: 0 0 0 4px rgba(251, 146, 60, 0.18);
}

.equipment-stock-modal.is-stock-out .equipment-stock-scanned-head strong,
.equipment-stock-modal.is-stock-out .equipment-stock-serial-item {
  background: rgba(251, 146, 60, 0.1);
}

.equipment-stock-modal.is-stock-out .equipment-stock-serial-item {
  border-color: rgba(251, 146, 60, 0.2);
}

.equipment-stock-modal.is-stock-out .equipment-stock-serial-mark {
  color: #fdba74;
}

[data-theme="light"] .equipment-stock-track {
  border-color: rgba(15, 40, 48, 0.12);
  background: rgba(15, 40, 48, 0.03);
}

[data-theme="light"] .equipment-stock-track-verify {
  border-color: rgba(180, 120, 20, 0.35);
  background: rgba(251, 191, 36, 0.12);
}

[data-theme="light"] .equipment-stock-track-verify-title {
  color: #92400e;
}

[data-theme="light"] .equipment-stock-track-verify-error {
  color: #b91c1c;
}

[data-theme="light"] .equipment-stock-track strong,
[data-theme="light"] .equipment-stock-scanned-head span,
[data-theme="light"] .equipment-stock-scan-ready strong {
  color: var(--ink);
}

[data-theme="light"] .equipment-stock-track small,
[data-theme="light"] .equipment-stock-scan-ready small,
[data-theme="light"] .equipment-stock-serial-scan label {
  color: var(--ink-soft);
}

[data-theme="light"] .equipment-stock-scan-loop {
  border-color: rgba(13, 148, 136, 0.28);
  background: linear-gradient(180deg, rgba(13, 148, 136, 0.08), rgba(255, 255, 255, 0.7));
}

[data-theme="light"] .equipment-stock-serial-scanned {
  border-color: rgba(15, 40, 48, 0.12);
  background: rgba(15, 40, 48, 0.03);
}

[data-theme="light"] .equipment-stock-serial-empty {
  color: var(--ink-soft);
}

[data-theme="light"] .equipment-stock-serial-item {
  background: rgba(13, 148, 136, 0.08);
  border-color: rgba(13, 148, 136, 0.18);
}

[data-theme="light"] .equipment-stock-serial-code {
  color: var(--ink);
}

[data-theme="light"] .equipment-stock-serial-mark {
  color: #0f766e;
}

[data-theme="light"] .equipment-stock-serial-remove {
  background: rgba(220, 69, 69, 0.1);
  color: #c03535;
}

[data-theme="light"] .equipment-stock-scanned-head strong {
  background: rgba(13, 148, 136, 0.14);
  color: #0f766e;
}

[data-theme="light"] .equipment-stock-serial-status.is-error {
  color: #b91c1c;
}

[data-theme="light"] .equipment-stock-camera-btn {
  background: rgba(13, 148, 136, 0.14);
  color: #0f766e;
}

[data-theme="light"] .equipment-stock-camera-status {
  color: var(--ink-soft);
}

[data-theme="light"] .equipment-stock-modal.is-stock-out .equipment-stock-scan-loop {
  border-color: rgba(234, 88, 12, 0.3);
  background: linear-gradient(180deg, rgba(234, 88, 12, 0.08), rgba(255, 255, 255, 0.7));
}

/* Client detail ? simple layout ------------------------------------------- */

.client-detail-simple {
  width: min(100%, 76rem);
  max-width: 100%;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  padding-inline: clamp(0.35rem, 2vw, 0.75rem);
  display: grid;
  gap: 1rem;
  box-sizing: border-box;
}

/* Client command center ----------------------------------------------------- */
.client-cmd {
  gap: 1rem;
  min-width: 0;
  max-width: 100%;
  animation: client-cmd-rise 0.42s ease both;
}

.client-cmd *,
.client-cmd *::before,
.client-cmd *::after {
  box-sizing: border-box;
}

.client-cmd-identity-copy {
  min-width: 0;
  flex: 1 1 auto;
}

@keyframes client-cmd-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.client-cmd-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
  max-width: 100%;
  min-height: 2rem;
  padding: 0.3rem 0.75rem 0.3rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-solid, var(--surface));
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.client-cmd-back:hover,
.client-cmd-back:focus-visible {
  color: var(--sea);
  border-color: color-mix(in srgb, var(--sea) 32%, var(--border));
  background: color-mix(in srgb, var(--sea) 8%, var(--surface-solid, var(--surface)));
  outline: none;
  text-decoration: none;
}

.client-cmd-back svg {
  flex: 0 0 auto;
  opacity: 0.75;
}

.client-cmd-service-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--sea) 28%, var(--border));
  background: color-mix(in srgb, var(--sea) 12%, transparent);
  color: inherit;
  letter-spacing: 0.06em;
}

.client-cmd.is-hotspot .client-cmd-service-pill {
  border-color: color-mix(in srgb, #059669 30%, var(--border));
  background: color-mix(in srgb, #059669 12%, transparent);
}

.client-cmd-flag-meta {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 4%, var(--surface));
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 750;
}

.client-cmd-deck {
  position: relative;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  border: 1px solid var(--border-strong);
  border-radius: 1.15rem;
  padding: clamp(1rem, 2.2vw, 1.35rem);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sea) 5%, var(--surface-solid, var(--surface))), var(--surface-solid, var(--surface)) 4rem);
  box-shadow: var(--card-shadow);
}

.client-cmd-deck::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 1.15rem 0 0 1.15rem;
  background: linear-gradient(180deg, var(--sea), color-mix(in srgb, var(--sea) 40%, var(--signal)));
  pointer-events: none;
}

.client-cmd-deck-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  margin-bottom: 1.1rem;
}

.client-cmd-identity {
  display: flex;
  align-items: flex-start;
  gap: 0.95rem;
  min-width: 0;
  flex: 1 1 18rem;
}

.client-cmd-avatar {
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  flex: 0 0 auto;
  border-radius: 1.05rem;
  background: linear-gradient(145deg, var(--sea), color-mix(in srgb, var(--sea) 40%, #042a30));
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--sea) 16%, transparent),
    0 14px 28px color-mix(in srgb, var(--sea) 24%, transparent);
}

.client-cmd-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  margin-bottom: 0.2rem;
  color: var(--sea-deep);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[data-theme="dark"] .client-cmd-eyebrow {
  color: var(--sea);
}

.client-cmd-dot {
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.45;
}

.client-cmd-name {
  display: inline;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 1.1vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.15;
  cursor: pointer;
  text-align: left;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.client-cmd-name:hover {
  color: var(--sea);
}

.client-cmd-subline {
  margin: 0.35rem 0 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 550;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.client-cmd-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  margin-top: 0.45rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--sea) 30%, var(--border));
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--sea) 12%, transparent);
  color: var(--sea-deep);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  overflow-wrap: anywhere;
}

[data-theme="dark"] .client-cmd-phone {
  color: var(--sea);
}

.client-cmd-phone:hover,
.client-cmd-phone:focus-visible {
  border-color: color-mix(in srgb, var(--sea) 48%, var(--border));
  background: color-mix(in srgb, var(--sea) 18%, transparent);
  outline: none;
}

.client-cmd.is-hotspot .client-cmd-phone {
  border-color: color-mix(in srgb, #059669 32%, var(--border));
  background: color-mix(in srgb, #059669 14%, transparent);
  color: #047857;
}

[data-theme="dark"] .client-cmd.is-hotspot .client-cmd-phone {
  color: #6ee7b7;
}

.client-cmd-phone-inline {
  color: inherit;
  font-weight: 800;
  text-decoration: none;
}

.client-cmd-phone-inline:hover {
  color: var(--sea);
  text-decoration: underline;
}

.client-cmd.is-hotspot .client-cmd-phone-inline {
  color: #047857;
}

[data-theme="dark"] .client-cmd.is-hotspot .client-cmd-phone-inline {
  color: #6ee7b7;
}

.client-cmd-mac-muted,
.client-cmd-mac-inline {
  color: var(--ink-soft);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.82em;
  font-weight: 550;
  letter-spacing: 0.02em;
  opacity: 0.78;
}

.client-cmd.is-hotspot .client-cmd-deck {
  background:
    linear-gradient(180deg, color-mix(in srgb, #059669 6%, var(--surface-solid, var(--surface))), var(--surface-solid, var(--surface)) 4rem);
}

.client-cmd.is-hotspot .client-cmd-deck::before {
  background: linear-gradient(180deg, #059669, color-mix(in srgb, #059669 40%, var(--signal)));
}

.client-cmd.is-hotspot .client-cmd-avatar {
  background: linear-gradient(145deg, #059669, color-mix(in srgb, #059669 40%, #064e3b));
  box-shadow:
    0 0 0 3px color-mix(in srgb, #059669 16%, transparent),
    0 14px 28px color-mix(in srgb, #059669 24%, transparent);
}

.client-cmd-deck-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
  max-width: min(100%, 34rem);
}

.client-cmd-flags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}

.client-cmd-flag-link {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  padding: 0.2rem 0.7rem;
  border: 1px solid color-mix(in srgb, #059669 30%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, #059669 12%, transparent);
  color: color-mix(in srgb, #059669 85%, var(--ink));
  font: inherit;
  font-size: 0.75rem;
  font-weight: 750;
  cursor: pointer;
}

.client-cmd-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
}

.client-cmd-pause {
  display: inline-flex;
  margin: 0;
}

.client-cmd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.4rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.75rem;
  background: var(--surface-solid, var(--surface));
  color: var(--ink);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 750;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.client-cmd-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--sea) 35%, var(--border-strong));
  box-shadow: 0 10px 20px color-mix(in srgb, #0b1f2a 8%, transparent);
}

.client-cmd-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.client-cmd-btn.is-primary {
  border-color: color-mix(in srgb, var(--sea) 45%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--sea) 88%, #fff), var(--sea));
  color: #fff;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--sea) 28%, transparent);
}

.client-cmd-btn.is-pause {
  border-color: color-mix(in srgb, var(--signal) 35%, var(--border));
  background: color-mix(in srgb, var(--signal) 12%, var(--surface));
  color: color-mix(in srgb, var(--signal) 80%, var(--ink));
}

.client-cmd-btn.is-pause.is-paused {
  border-color: color-mix(in srgb, #059669 35%, var(--border));
  background: color-mix(in srgb, #059669 12%, var(--surface));
  color: color-mix(in srgb, #059669 90%, var(--ink));
}

.client-cmd-btn.is-ghost {
  background: transparent;
}

.client-cmd-btn.is-menu {
  min-width: 2.4rem;
  padding-inline: 0.65rem;
  border-color: var(--border);
  background: var(--surface-2, var(--surface));
  color: var(--ink-soft);
}

.client-cmd-btn.is-menu:hover:not(:disabled) {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--sea) 28%, var(--border));
  background: color-mix(in srgb, var(--ink) 4%, var(--surface));
}

.client-cmd-more.is-open .client-cmd-btn.is-menu {
  color: var(--sea-deep);
  border-color: color-mix(in srgb, var(--sea) 32%, var(--border));
  background: color-mix(in srgb, var(--sea) 10%, var(--surface));
}

[data-theme="dark"] .client-cmd-more.is-open .client-cmd-btn.is-menu {
  color: var(--sea);
}

.client-cmd-more {
  position: relative;
}

.client-cmd-more-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 20;
  min-width: 12.5rem;
  max-width: min(92vw, 16rem);
  padding: 0.35rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.85rem;
  background: var(--surface-solid, var(--surface));
  box-shadow: var(--menu-shadow);
}

/* Floated onto body so parent overflow/transform cannot clip links */
.client-cmd-more-menu.is-floating {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  z-index: 1400;
  max-height: min(70vh, 28rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.client-cmd-more-label {
  margin: 0.15rem 0.55rem 0.25rem;
  color: var(--ink-soft);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.client-cmd-more-divider {
  height: 1px;
  margin: 0.35rem 0.45rem;
  background: var(--border);
}

.client-cmd-more-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cat-billing, #b45309) 14%, transparent);
  color: var(--cat-billing, #b45309);
  font-size: 0.66rem;
  font-weight: 800;
}

.client-cmd-more-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.2rem;
  padding: 0.4rem 0.7rem;
  border: 0;
  border-radius: 0.55rem;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

a.client-cmd-more-item:hover {
  text-decoration: none;
}

.client-cmd-more-item:hover {
  background: var(--surface-3);
}

.client-cmd-more-item.is-danger {
  color: var(--danger);
}

.client-cmd-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

.client-cmd-metrics li {
  --metric-tone: var(--sea);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  overflow: hidden;
  margin: 0;
  padding: 0.9rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--metric-tone) 18%, var(--border));
  border-radius: 1rem;
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--metric-tone) 10%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface-solid, var(--surface)) 88%, transparent);
  backdrop-filter: blur(8px);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.client-cmd-metrics li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75rem;
  bottom: 0.75rem;
  width: 0.22rem;
  border-radius: 999px;
  background: var(--metric-tone);
}

.client-cmd-metrics li[data-hero-chip="subscription"] { --metric-tone: #059669; }
.client-cmd-metrics li[data-hero-chip="session"] { --metric-tone: var(--sea); }
.client-cmd-metrics li[data-hero-chip="throughput"] { --metric-tone: var(--signal); }
.client-cmd-metrics li[data-hero-chip="account"] { --metric-tone: #6366f1; }

.client-cmd-metrics li:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--metric-tone) 40%, var(--border));
  box-shadow: 0 12px 24px color-mix(in srgb, var(--metric-tone) 14%, transparent);
}

.client-cmd-metric-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.05rem;
  height: 2.05rem;
  flex: 0 0 auto;
  border-radius: 10px;
  background: color-mix(in srgb, var(--metric-tone) 14%, transparent);
  color: var(--metric-tone);
}

.client-cmd-metric-body {
  min-width: 0;
  flex: 1 1 auto;
}

.client-cmd-metric-label,
.client-cmd-metrics em {
  display: block;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.client-cmd-metrics strong {
  display: block;
  margin: 0.28rem 0 0.15rem;
  font-family: var(--font-display);
  font-size: clamp(0.98rem, 0.9rem + 0.3vw, 1.12rem);
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.client-cmd-metrics li.is-good strong { color: #059669; }
.client-cmd-metrics li.is-bad strong { color: var(--danger); }
.client-cmd-metrics li.is-idle strong { color: color-mix(in srgb, var(--signal) 80%, var(--ink)); }

.client-cmd-period {
  border: 1px solid var(--border-strong);
  border-radius: 1.15rem;
  padding: 0.95rem 1.05rem 1.05rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sea) 5%, transparent), transparent 3rem),
    var(--surface-solid, var(--surface));
  box-shadow: var(--card-shadow);
}

.client-cmd-period-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  margin-bottom: 0.85rem;
}

.client-cmd-period-kicker {
  margin: 0 0 0.2rem;
  color: var(--sea-deep);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[data-theme="dark"] .client-cmd-period-kicker {
  color: var(--sea);
}

.client-cmd-period-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.client-cmd-banner {
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.85rem;
  border-radius: 0.75rem;
  font-size: 0.88rem;
  font-weight: 650;
}

.client-cmd-period-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.client-cmd-period-facts > div {
  min-width: 0;
}

.client-cmd-period-facts span {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.client-cmd-period-facts strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.client-cmd-progress {
  margin-top: 0.85rem;
}

.client-cmd-workspace {
  margin: 0;
  padding: 0;
  min-width: 0;
  overflow-x: clip;
  overflow-y: visible;
  border: 1px solid var(--border-strong);
  border-radius: 1.25rem;
  background: var(--surface-solid, var(--surface));
  box-shadow: var(--card-shadow);
}

/* Avoid legacy panel overflow clipping sticky tabs / wide tables */
.client-detail-page.client-cmd > .client-cmd-workspace.panel {
  overflow-x: clip;
  overflow-y: visible;
  margin-bottom: 0;
  padding: 0;
}

.client-cmd-workspace::before {
  display: none !important;
}

.client-cmd-tabs {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sea) 7%, transparent), transparent),
    var(--surface-2, var(--surface));
  backdrop-filter: blur(10px);
}

.client-cmd-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.3rem;
  padding: 0.38rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 750;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.client-cmd-tab:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}

.client-cmd-tab.is-active {
  color: var(--sea-deep);
  border-color: color-mix(in srgb, var(--sea) 28%, var(--border));
  background: color-mix(in srgb, var(--sea) 12%, var(--surface-solid, var(--surface)));
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 40%, transparent) inset;
}

[data-theme="dark"] .client-cmd-tab.is-active {
  color: var(--sea);
}

.client-cmd-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, #059669 18%, transparent);
  color: color-mix(in srgb, #059669 90%, var(--ink));
  font-size: 0.7rem;
  font-weight: 800;
}

.client-cmd-panels {
  padding: clamp(1rem, 2.2vw, 1.35rem);
}

.client-cmd-panel[hidden] {
  display: none !important;
}

.client-cmd-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.client-cmd-panel-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.client-cmd-panel-head p {
  margin: 0.25rem 0 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.4;
}

.client-cmd-panel-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.client-cmd-overview-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1rem;
}

.client-cmd-tile {
  border: 1px solid var(--border);
  border-radius: 1.05rem;
  padding: 1rem 1.05rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 6%, transparent), transparent 50%),
    var(--surface-2, var(--surface));
}

.client-cmd-tile.is-accent {
  background:
    radial-gradient(ellipse 80% 70% at 100% 0%, color-mix(in srgb, var(--sea) 14%, transparent), transparent 55%),
    var(--surface-2, var(--surface));
}

.client-cmd-tile-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
}

.client-cmd-tile-head p {
  margin: 0.25rem 0 0.85rem;
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.4;
}

.client-cmd-tile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.95rem;
}

.client-cmd-kv {
  display: grid;
  margin: 0;
  gap: 0;
}

.client-cmd-kv > div {
  display: grid;
  grid-template-columns: minmax(6.5rem, 8rem) minmax(0, 1fr);
  gap: 0.65rem;
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--border);
}

.client-cmd-kv > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.client-cmd-kv dt {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 700;
}

.client-cmd-kv dd {
  margin: 0;
  min-width: 0;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.client-cmd-kv-dense > div {
  padding: 0.72rem 0;
}

.client-cmd-quick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0.45rem;
}

.client-cmd-quick-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  background: var(--surface-solid, var(--surface));
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.client-cmd-quick-item:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--sea) 35%, var(--border));
  box-shadow: 0 10px 20px color-mix(in srgb, #0b1f2a 7%, transparent);
}

.client-cmd-quick-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  flex: 0 0 auto;
  border-radius: 10px;
  background: color-mix(in srgb, var(--sea) 12%, transparent);
  color: var(--sea-deep);
}

[data-theme="dark"] .client-cmd-quick-ico {
  color: var(--sea);
}

.client-cmd-quick-copy {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.client-cmd-quick-item strong {
  font-size: 0.9rem;
  font-weight: 800;
}

.client-cmd-quick-item span {
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1.35;
}

.client-cmd-quick-copy span {
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1.35;
}

.client-cmd-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0;
}

.client-cmd-metric-card {
  margin: 0;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 0.95rem;
  background: var(--surface-2, var(--surface));
}

.client-cmd-metric-card dt {
  margin: 0 0 0.35rem;
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.client-cmd-metric-card dd {
  margin: 0;
  display: grid;
  gap: 0.25rem;
}

.client-cmd-metric-card strong {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.client-cmd-metric-card span {
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.35;
}

.client-cmd-empty {
  margin: 0;
  padding: 1.1rem 1rem;
  border: 1px dashed var(--border-strong);
  border-radius: 0.95rem;
  color: var(--ink-soft);
  background: var(--surface-2, var(--surface));
}

.client-live-breakdown {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.client-live-breakdown-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.55rem 0.85rem;
  margin-bottom: 0.85rem;
}

.client-live-breakdown-head h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
}

.client-live-breakdown-head p {
  margin: 0.2rem 0 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.client-live-breakdown-now {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0.15rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2, var(--surface));
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 750;
}

.client-live-breakdown-now.is-good {
  border-color: color-mix(in srgb, #059669 30%, var(--border));
  background: color-mix(in srgb, #059669 10%, var(--surface));
  color: color-mix(in srgb, #059669 88%, var(--ink));
}

.client-live-breakdown-now.is-idle {
  border-color: color-mix(in srgb, var(--signal) 30%, var(--border));
  background: color-mix(in srgb, var(--signal) 10%, var(--surface));
  color: color-mix(in srgb, var(--signal) 85%, var(--ink));
}

.client-live-breakdown-now.is-bad {
  border-color: color-mix(in srgb, var(--danger) 28%, var(--border));
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  color: var(--danger);
}

.client-live-timeline {
  margin: 0;
  max-height: min(22rem, 52vh);
  overflow: auto;
}

.client-live-timeline .client-usage-timeline-item.is-connected .client-usage-timeline-dot,
.client-live-timeline .client-usage-timeline-item.is-reconnected .client-usage-timeline-dot {
  background: var(--sea);
}

.client-live-timeline .client-usage-timeline-item.is-surfing .client-usage-timeline-dot {
  background: #059669;
}

.client-live-timeline .client-usage-timeline-item.is-dropped .client-usage-timeline-dot,
.client-live-timeline .client-usage-timeline-item.is-blocked .client-usage-timeline-dot {
  background: var(--signal);
}

.client-live-timeline .client-usage-timeline-item.is-connected .client-usage-timeline-badge,
.client-live-timeline .client-usage-timeline-item.is-reconnected .client-usage-timeline-badge {
  color: var(--sea-deep);
}

.client-live-timeline .client-usage-timeline-item.is-surfing .client-usage-timeline-badge {
  color: #059669;
}

.client-live-timeline .client-usage-timeline-item.is-dropped .client-usage-timeline-badge,
.client-live-timeline .client-usage-timeline-item.is-blocked .client-usage-timeline-badge {
  color: color-mix(in srgb, var(--signal) 85%, var(--ink));
}

@media (max-width: 1100px) {
  .client-cmd-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-cmd-overview-grid {
    grid-template-columns: 1fr;
  }

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

  .client-cmd-period-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Tablet */
@media (max-width: 900px) {
  .client-detail-simple.client-cmd {
    width: 100%;
    max-width: 100%;
    padding-inline: 0.55rem;
  }

  .client-cmd-deck-top {
    flex-direction: column;
    align-items: stretch;
  }

  .client-cmd-deck-aside {
    align-items: stretch;
    max-width: none;
    width: 100%;
  }

  .client-cmd-flags,
  .client-cmd-actions {
    justify-content: flex-start;
  }

  .client-cmd-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 0.5rem;
  }

  .client-cmd-actions .client-cmd-pause,
  .client-cmd-actions .client-cmd-btn,
  .client-cmd-actions .client-cmd-more {
    width: 100%;
    min-width: 0;
  }

  .client-cmd-actions .client-cmd-btn {
    width: 100%;
  }

  .client-cmd-actions .client-cmd-more {
    grid-column: 1 / -1;
  }

  .client-cmd-actions .client-cmd-more .client-cmd-btn.is-menu {
    width: 100%;
  }

  .client-cmd-period-head,
  .client-cmd-panel-head {
    flex-direction: column;
    align-items: stretch;
  }

  .client-cmd-panel-tools {
    width: 100%;
    justify-content: flex-start;
  }

  .client-cmd-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
  }

  .client-cmd-tab {
    flex: 0 0 auto;
  }

  .client-cmd-kv > div {
    grid-template-columns: minmax(5.5rem, 7.25rem) minmax(0, 1fr);
  }

  .client-voucher-cards {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr));
  }
}

/* Large phone / small tablet — stack hero metrics so nothing clips */
@media (max-width: 720px) {
  .client-detail-simple.client-cmd {
    padding-inline: 0.65rem;
  }

  .client-cmd-phone {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    font-size: 0.98rem;
  }

  .client-cmd-metrics {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    overflow: visible;
  }

  .client-cmd-metrics li {
    flex: none;
    width: 100%;
    min-width: 0;
  }

  .client-cmd-period-facts,
  .client-cmd-metric-grid {
    grid-template-columns: 1fr;
  }

  .client-cmd-tile-actions .btn {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 0;
    justify-content: center;
  }

  .client-cmd-panels {
    padding: 0.9rem 0.85rem 1.05rem;
  }

  .client-cmd-actions {
    grid-template-columns: 1fr;
  }

  .client-cmd-actions .client-cmd-more {
    grid-column: auto;
  }

  .client-cmd-btn.is-menu::after {
    content: "More";
    font-size: 0.84rem;
    font-weight: 750;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .client-detail-simple.client-cmd {
    gap: 0.8rem;
    padding-inline: 0.7rem;
  }

  .client-cmd-deck {
    border-radius: 1rem;
    padding: 0.9rem 0.85rem;
  }

  .client-cmd-deck::before {
    width: 3px;
    border-radius: 1rem 0 0 1rem;
  }

  .client-cmd-identity {
    gap: 0.7rem;
    flex: 1 1 100%;
    width: 100%;
  }

  .client-cmd-avatar {
    width: 2.85rem;
    height: 2.85rem;
    border-radius: 0.8rem;
    font-size: 1rem;
  }

  .client-cmd-deck-top {
    gap: 0.8rem;
  }

  .client-cmd-flags {
    width: 100%;
  }

  .client-cmd-actions .client-cmd-more-menu {
    left: 0;
    right: auto;
    width: min(100%, 16rem);
  }

  .client-cmd-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: 0;
    padding: 0.6rem 0.65rem;
    gap: 0.25rem;
  }

  .client-cmd-tabs::-webkit-scrollbar {
    display: none;
  }

  .client-cmd-tab {
    flex: 0 0 auto;
    min-height: 2.2rem;
    padding: 0.35rem 0.8rem;
    font-size: 0.82rem;
  }

  .client-cmd-kv > div {
    grid-template-columns: 1fr;
    gap: 0.18rem;
  }

  .client-cmd-quick {
    grid-template-columns: 1fr;
  }

  .client-cmd-tile-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .client-cmd-tile-actions .btn {
    width: 100%;
    flex: none;
  }

  .client-cmd-workspace {
    border-radius: 1rem;
  }

  .client-cmd-period {
    border-radius: 1rem;
    padding: 0.8rem 0.85rem 0.9rem;
  }

  .client-cmd-panels {
    padding: 0.85rem 0.8rem 1rem;
  }

  .client-cmd-panel-tools .btn {
    min-height: 2.2rem;
  }

  .client-live-breakdown-head {
    flex-direction: column;
    align-items: stretch;
  }

  .client-voucher-cards {
    grid-template-columns: 1fr;
  }
}

/* Narrow phones */
@media (max-width: 420px) {
  .client-detail-simple.client-cmd {
    padding-inline: 0.55rem;
    gap: 0.7rem;
  }

  .client-cmd-deck {
    padding: 0.8rem 0.75rem;
  }

  .client-cmd-name {
    font-size: 1.2rem;
  }

  .client-cmd-phone {
    width: 100%;
    justify-content: flex-start;
  }

  .client-cmd-eyebrow .org-code {
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-cmd,
  .client-cmd-metrics li,
  .client-cmd-quick-item,
  .client-cmd-back,
  .client-cmd-btn {
    animation: none;
    transition: none;
  }

  .client-cmd-metrics li:hover,
  .client-cmd-quick-item:hover,
  .client-cmd-btn:hover:not(:disabled) {
    transform: none;
  }
}

/* Legacy simple layout retained for billing/other pages ------------------- */
.client-profile-page {
  gap: 1.15rem;
}

.client-detail-simple > .client-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.84rem;
  font-weight: 650;
  text-decoration: none;
}

.client-detail-simple > .client-back-link:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--sea) 35%, var(--border-strong));
}

.client-detail-simple > .panel::before {
  display: none;
}

.client-detail-simple > .panel {
  padding: clamp(1.05rem, 2.6vw, 1.55rem);
  border-radius: 1.25rem;
  border: 1px solid var(--border-strong);
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 8%, transparent), transparent 42%),
    var(--surface);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 55%, transparent) inset,
    0 16px 36px color-mix(in srgb, #0b1f2a 8%, transparent);
}

[data-theme="light"] .client-detail-simple > .panel {
  background:
    linear-gradient(180deg, #ffffff 0%, #f7fbfc 100%);
}

[data-theme="dark"] .client-detail-simple > .panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 46%),
    var(--surface-solid);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 18px 40px rgba(0, 0, 0, 0.28);
}

.client-simple-tabs {
  display: none;
}

.client-simple-head,
.client-simple-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem 1rem;
  margin-bottom: 1rem;
}

.client-simple-identity {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
}

.client-simple-kicker {
  margin: 0 0 0.2rem;
  color: var(--sea);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.client-simple-meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.45rem;
}

.client-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-2, var(--surface));
  color: var(--ink-soft);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.client-chip.is-service {
  border-color: color-mix(in srgb, var(--sea) 35%, var(--border));
  background: color-mix(in srgb, var(--sea) 12%, transparent);
  color: var(--sea-deep);
}

[data-theme="dark"] .client-chip.is-service {
  color: var(--sea);
}

.client-simple-avatar {
  display: grid;
  place-items: center;
  width: 3.15rem;
  height: 3.15rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: linear-gradient(145deg, var(--sea), color-mix(in srgb, var(--sea) 45%, #062f34));
  color: #fff;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--sea) 18%, transparent),
    0 8px 18px color-mix(in srgb, var(--sea) 22%, transparent);
}

.client-simple-section-head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.client-simple-section-head p,
.client-simple-meta {
  margin: 0.25rem 0 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.client-simple-name {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: clamp(1.2rem, 3.2vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  cursor: pointer;
  text-align: left;
}

.client-simple-name:hover {
  color: var(--sea);
}

.client-simple-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.client-simple-head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.55rem;
  max-width: min(100%, 32rem);
}

.client-package-session-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem 0.65rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  background: var(--surface-2, var(--surface));
}

.client-package-session-label {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.client-package-session-top .client-package-pause-form {
  justify-content: flex-end;
}

.client-package-session-top .client-simple-hint {
  max-width: 18rem;
  text-align: right;
  line-height: 1.35;
}

.client-simple-status {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0 0 1.15rem;
  padding: 0;
  list-style: none;
}

.client-simple-status li {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0.85rem 0.9rem 0.8rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: 1rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 8%, transparent), transparent 62%),
    var(--surface-2, var(--surface));
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 40%, transparent) inset;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.client-simple-status li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0.28rem;
  background: var(--sea);
}

.client-simple-status li[data-hero-chip="subscription"]::before,
.client-simple-status li[data-stat="collected"]::before,
.client-simple-status li[data-stat="paid"]::before {
  background: #059669;
}

.client-simple-status li[data-hero-chip="session"]::before {
  background: var(--sea);
}

.client-simple-status li[data-hero-chip="throughput"]::before,
.client-simple-status li[data-stat="pending"]::before {
  background: var(--signal);
}

.client-simple-status li[data-hero-chip="plan"]::before {
  background: #6366f1;
}

.client-simple-status li[data-stat="overdue"]::before {
  background: var(--danger);
}

.client-simple-status li:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--sea) 32%, var(--border-strong));
  box-shadow: 0 12px 24px color-mix(in srgb, #0b1f2a 8%, transparent);
}

[data-theme="light"] .client-simple-status li {
  background: linear-gradient(180deg, #ffffff, #f4fafb);
}

.client-simple-status span,
.client-simple-status em {
  display: block;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.client-simple-status strong {
  display: block;
  margin: 0.28rem 0 0.12rem;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.client-simple-status li.is-good {
  border-color: color-mix(in srgb, var(--cat-live, #059669) 35%, var(--border));
}
.client-simple-status li.is-bad {
  border-color: color-mix(in srgb, var(--cat-invoices, #dc2626) 35%, var(--border));
}
.client-simple-status li.is-good strong { color: var(--cat-live, #059669); }
.client-simple-status li.is-bad strong { color: var(--cat-invoices, #dc2626); }
.client-simple-status li.is-idle strong { color: var(--cat-billing, #b45309); }

.client-simple-list {
  display: grid;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--surface-2, var(--surface));
}

.client-simple-list + .client-simple-list {
  margin-top: 0.65rem;
}

.client-simple-list > div {
  display: grid;
  grid-template-columns: minmax(6.5rem, 8.5rem) minmax(0, 1fr);
  gap: 0.75rem;
  margin: 0;
  padding: 0.72rem 0.9rem;
  border-bottom: 1px solid var(--border);
}

.client-simple-list > div:last-child {
  border-bottom: 0;
}

.client-simple-list dt {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 700;
}

.client-simple-list dd {
  margin: 0;
  min-width: 0;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.client-simple-list-dense {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.client-simple-list-dense > div {
  grid-template-columns: 7rem minmax(0, 1fr);
  padding: 0.48rem 0;
}

.client-simple-hint:empty {
  display: none;
}

.client-simple-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  align-items: center;
}

.client-action-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.65rem;
  margin: 0 0 1.15rem;
  padding: 0.65rem;
  border: 1px solid var(--border-strong);
  border-radius: 1rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--sea) 6%, transparent), transparent 55%),
    var(--surface-2, var(--surface));
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 35%, transparent) inset,
    0 10px 28px color-mix(in srgb, #0b1f2a 6%, transparent);
}

[data-theme="light"] .client-action-toolbar {
  background: linear-gradient(135deg, #f0fafb 0%, #ffffff 48%, #f8fbfc 100%);
}

.client-action-toolbar-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.client-action-toolbar-group--primary {
  flex: 1 1 auto;
}

.client-action-toolbar-group--danger {
  flex: 0 0 auto;
}

.client-action-toolbar-divider {
  align-self: stretch;
  width: 1px;
  min-height: 2.2rem;
  margin: 0.15rem 0;
  background: var(--border-strong);
  opacity: 0.85;
}

.client-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.55rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.72rem;
  background: var(--surface-solid, var(--surface));
  color: var(--ink);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

.client-action-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--sea) 35%, var(--border-strong));
  box-shadow: 0 8px 18px color-mix(in srgb, #0b1f2a 8%, transparent);
}

.client-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.client-action-btn-icon {
  display: inline-flex;
  flex: 0 0 auto;
  opacity: 0.88;
}

.client-action-btn-label {
  white-space: nowrap;
}

.client-action-btn.is-primary {
  border-color: color-mix(in srgb, var(--sea) 45%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--sea) 92%, #fff), var(--sea));
  color: #fff;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--sea) 28%, transparent);
}

.client-action-btn.is-primary:hover:not(:disabled) {
  filter: brightness(1.04);
  border-color: color-mix(in srgb, var(--sea) 55%, var(--border));
}

.client-action-btn.is-primary .client-action-btn-icon {
  opacity: 1;
}

.client-action-btn.is-pause {
  border-color: color-mix(in srgb, var(--signal) 35%, var(--border));
  background: color-mix(in srgb, var(--signal) 10%, var(--surface));
  color: color-mix(in srgb, var(--signal) 85%, var(--ink));
}

.client-action-btn.is-pause.is-paused {
  border-color: color-mix(in srgb, var(--cat-live, #059669) 35%, var(--border));
  background: color-mix(in srgb, var(--cat-live, #059669) 10%, var(--surface));
  color: color-mix(in srgb, var(--cat-live, #059669) 90%, var(--ink));
}

.client-action-btn.is-danger {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  color: var(--danger);
}

.client-action-btn.is-danger:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--danger) 50%, var(--border));
  background: color-mix(in srgb, var(--danger) 14%, var(--surface));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--danger) 12%, transparent);
}

.client-action-toolbar .client-package-pause-form {
  display: inline-flex;
  margin: 0;
}

.client-delete-modal .pppoe-body {
  display: grid;
  gap: 0.85rem;
}

.client-delete-modal .org-delete-warn.cc-delete-banner {
  display: block;
  margin: 0;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--modal-danger-border, rgba(255, 154, 143, 0.42));
  border-radius: 12px;
  background: var(--modal-danger-soft, rgba(244, 122, 110, 0.18));
  color: var(--modal-danger-ink, #ffe8e4) !important;
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.5;
}

.client-delete-modal .org-delete-warn.cc-delete-banner strong {
  color: var(--modal-danger, #ff9a8f);
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.95rem;
}

.client-delete-modal .cc-delete-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.client-delete-modal .cc-delete-item {
  border-color: var(--modal-border, rgba(255, 255, 255, 0.12));
  background: var(--modal-surface, rgba(255, 255, 255, 0.05));
}

.client-delete-modal .cc-delete-item-head span {
  color: var(--modal-muted, rgba(238, 246, 248, 0.66));
}

.client-delete-modal .cc-delete-item-head strong {
  color: var(--modal-ink, #eef6f8);
}

.client-delete-modal .pppoe-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
}

.client-delete-modal .client-delete-confirm-form {
  margin: 0;
}

.client-detail-simple > .panel.client-simple-panel {
  border-radius: 1.15rem;
  overflow: hidden;
}

.client-detail-simple > .panel.client-simple-panel::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--sea),
    color-mix(in srgb, var(--sea) 55%, #6366f1),
    color-mix(in srgb, var(--sea) 35%, transparent)
  );
}

.client-simple-actions .client-package-pause-form {
  display: inline-flex;
  margin: 0;
}

.client-package-pause-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  margin: 0;
}

.client-package-pause-switch {
  margin-top: 0;
}

.client-simple-actions .btn {
  min-height: 2.45rem;
  border-radius: 0.7rem;
  padding-inline: 1rem;
}

.client-simple-more {
  margin-top: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  background: var(--surface-2, var(--surface));
  overflow: hidden;
}

.client-simple-more > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  padding: 0.8rem 0.95rem;
  cursor: pointer;
  list-style: none;
  font-weight: 750;
}

.client-simple-more > summary::-webkit-details-marker {
  display: none;
}

.client-simple-more[open] > summary {
  border-bottom: 1px solid var(--border);
}

.client-simple-more-meta {
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 600;
}

.client-simple-more-body {
  padding: 0.15rem 0.95rem 0.95rem;
}

.client-simple-more-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  margin: 0.65rem 0 0.35rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.client-simple-subhead {
  margin: 0 0 0.45rem;
  font-size: 0.88rem;
  font-weight: 750;
}

.client-simple-section-title {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

#client-billing {
  margin-top: 0;
  scroll-margin-top: 5.5rem;
}

#client-vouchers {
  margin-top: 0;
  scroll-margin-top: 5.5rem;
}

#client-vouchers + #client-billing {
  margin-top: 0;
}

#client-billing .org-table-client-billing {
  width: 100%;
}

#client-billing .org-table-client-billing th {
  white-space: nowrap;
}

.voucher-code {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  font-weight: 800;
}

.voucher-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.45rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.voucher-status-pill.is-valid {
  border-color: color-mix(in srgb, #059669 40%, var(--border));
  background: color-mix(in srgb, #059669 14%, transparent);
  color: #047857;
}

.voucher-status-pill.is-expired {
  border-color: color-mix(in srgb, #b45309 40%, var(--border));
  background: color-mix(in srgb, #b45309 14%, transparent);
  color: #b45309;
}

.voucher-status-pill.is-invalid {
  border-color: color-mix(in srgb, #dc2626 35%, var(--border));
  background: color-mix(in srgb, #dc2626 12%, transparent);
  color: #b91c1c;
}

[data-theme="dark"] .voucher-status-pill.is-valid {
  color: #6dcea0;
}

[data-theme="dark"] .voucher-status-pill.is-expired {
  color: #f2bc42;
}

[data-theme="dark"] .voucher-status-pill.is-invalid {
  color: #ef6b5e;
}

.voucher-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.voucher-share-actions .btn-sm {
  min-height: 1.85rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
}

.voucher-share-wa {
  background: color-mix(in srgb, #16a34a 14%, transparent);
  border-color: color-mix(in srgb, #16a34a 35%, var(--border));
  color: #15803d;
}

#client-available-vouchers {
  scroll-margin-top: 5.5rem;
}

/* Vouchers tab on client overview — compact, modern panel ------------------- */
.client-vouchers-panel-head {
  align-items: center;
  margin-bottom: 1.15rem;
}

.client-vouchers-panel-intro h3 {
  margin: 0;
}

.client-vouchers-panel-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  margin: 0.35rem 0 0;
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.4;
}

.client-vouchers-stat {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: 0.12rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2, var(--surface));
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 700;
}

.client-vouchers-stat.is-active {
  border-color: color-mix(in srgb, #059669 30%, var(--border));
  background: color-mix(in srgb, #059669 10%, var(--surface));
  color: color-mix(in srgb, #059669 88%, var(--ink));
}

.client-vouchers-history-link {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-solid, var(--surface));
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.client-vouchers-history-link:hover,
.client-vouchers-history-link:focus-visible {
  color: var(--sea);
  border-color: color-mix(in srgb, var(--sea) 32%, var(--border));
  background: color-mix(in srgb, var(--sea) 8%, var(--surface));
  outline: none;
  text-decoration: none;
}

.client-vouchers-empty {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  padding: clamp(1.5rem, 4vw, 2.25rem) 1rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--surface-2, var(--surface));
  text-align: center;
}

.client-vouchers-empty-icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 0.15rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sea) 10%, var(--surface));
  color: var(--sea-deep);
}

[data-theme="dark"] .client-vouchers-empty-icon {
  color: var(--sea);
}

.client-vouchers-empty-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
}

.client-vouchers-empty-copy {
  margin: 0;
  max-width: 34ch;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.45;
}

.client-vouchers-panel .client-voucher-cards-compact {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 0.75rem;
}

.client-vouchers-panel .client-voucher-card {
  gap: 0.55rem;
  padding: 0.9rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 0.95rem;
  background: var(--surface-2, var(--surface));
  box-shadow: none;
}

.client-vouchers-panel .client-voucher-card::before {
  display: none;
}

.client-vouchers-panel .client-voucher-card:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--sea) 32%, var(--border));
  box-shadow: 0 8px 20px color-mix(in srgb, #0b1f2a 6%, transparent);
}

.client-vouchers-panel .client-voucher-code-btn {
  padding: 0.45rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--sea) 18%, var(--border));
  background: var(--surface-solid, var(--surface));
  font-size: clamp(1rem, 2.6vw, 1.25rem);
}

.client-vouchers-panel .client-voucher-code-btn.is-readonly {
  display: block;
  cursor: default;
  opacity: 0.72;
}

.client-vouchers-panel .client-voucher-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--border);
}

.client-vouchers-panel .client-voucher-card-actions .btn {
  min-height: 2rem;
  padding-inline: 0.65rem;
}

@media (max-width: 640px) {
  .client-vouchers-panel-head {
    flex-direction: column;
    align-items: stretch;
  }

  .client-vouchers-panel-head .client-cmd-panel-tools {
    justify-content: flex-start;
  }

  .client-vouchers-panel .client-voucher-card-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .client-vouchers-panel .client-voucher-card-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

.client-voucher-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr));
  gap: 0.85rem;
}

.client-voucher-card {
  position: relative;
  display: grid;
  gap: 0.7rem;
  min-width: 0;
  padding: 1rem 1.05rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--sea) 28%, var(--border-strong));
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--sea) 18%, transparent), transparent 55%),
    linear-gradient(165deg, color-mix(in srgb, var(--sea) 8%, var(--surface)) 0%, var(--surface) 58%);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 45%, transparent) inset,
    0 10px 24px color-mix(in srgb, #0b1f2a 8%, transparent);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.client-voucher-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.1rem;
  bottom: 1.1rem;
  width: 0.28rem;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, var(--sea), #059669);
}

.client-voucher-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--sea) 48%, var(--border-strong));
  box-shadow: 0 16px 32px color-mix(in srgb, var(--sea) 14%, transparent);
}

.client-voucher-card.is-expired,
.client-voucher-card.is-invalid {
  border-color: var(--border-strong);
  background:
    linear-gradient(165deg, var(--surface-2, var(--surface)) 0%, var(--surface) 70%);
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 30%, transparent) inset;
}

.client-voucher-card.is-expired::before {
  background: var(--signal);
}

.client-voucher-card.is-invalid::before {
  background: var(--danger);
}

.client-voucher-card-kicker,
.client-voucher-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
}

.client-voucher-card-kicker span:first-child {
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.client-voucher-code-btn {
  appearance: none;
  border: 0;
  background: color-mix(in srgb, var(--sea) 8%, transparent);
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 0.75rem;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: clamp(1.15rem, 3vw, 1.45rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.1;
  text-align: left;
}

.client-voucher-card.is-expired .client-voucher-code-btn,
.client-voucher-card.is-invalid .client-voucher-code-btn {
  background: var(--surface-3, transparent);
  color: var(--ink-soft);
  text-decoration: line-through;
  cursor: default;
}

.client-voucher-code-btn:hover,
.client-voucher-code-btn:focus-visible {
  color: var(--sea-deep);
}

.client-voucher-card-meta {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1.45;
}

.client-voucher-card-actions {
  padding-top: 0.15rem;
  border-top: 1px dashed color-mix(in srgb, var(--sea) 22%, var(--border));
}

.client-voucher-empty {
  padding: 1.05rem 1.1rem;
  border: 1px dashed var(--border-strong);
  border-radius: 1rem;
  background: var(--surface-2, var(--surface));
}

.client-voucher-empty .client-simple-note {
  margin: 0;
}

/* Client billing page ? vouchers + payments workspace */
.client-billing-page {
  display: grid;
  width: min(100%, 76rem);
  max-width: 76rem;
  gap: clamp(0.9rem, 2vw, 1.25rem);
  overflow-x: clip;
}

.client-billing-page > .client-cat-nav {
  position: static;
  top: auto;
  z-index: auto;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

.client-billing-nav-back {
  margin-left: auto;
}

.client-billing-recharge-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.05rem;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cat-billing, #b45309) 42%, transparent);
  background: linear-gradient(
    145deg,
    var(--cat-billing, #b45309),
    color-mix(in srgb, var(--cat-billing, #b45309) 55%, #7c2d12)
  );
  color: #fff;
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--cat-billing, #b45309) 24%, transparent);
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.client-billing-recharge-btn:hover {
  color: #fff;
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--cat-billing, #b45309) 30%, transparent);
}

.client-billing-recharge-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--cat-billing, #b45309) 65%, #fff);
  outline-offset: 2px;
}

.client-voucher-plan {
  font-weight: 750;
  color: var(--ink);
}

.client-billing-deck {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 1.35rem;
  padding: clamp(1.05rem, 2.4vw, 1.4rem);
  background:
    radial-gradient(ellipse 70% 120% at -8% -30%, color-mix(in srgb, var(--cat-billing, #b45309) 22%, transparent), transparent 55%),
    radial-gradient(ellipse 50% 80% at 108% 120%, color-mix(in srgb, var(--sea) 14%, transparent), transparent 50%),
    linear-gradient(155deg, color-mix(in srgb, var(--cat-billing, #b45309) 7%, var(--surface-solid, var(--surface))), var(--surface-solid, var(--surface)) 55%);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 55%, transparent) inset,
    0 22px 50px color-mix(in srgb, #0b1f2a 10%, transparent);
  animation: client-billing-rise 0.45s ease-out both;
}

.client-billing-deck::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--cat-billing, #b45309), color-mix(in srgb, var(--cat-billing, #b45309) 40%, var(--sea)));
}

.client-billing-deck-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  margin-bottom: 1.05rem;
}

.client-billing-identity {
  display: flex;
  align-items: flex-start;
  gap: 0.95rem;
  min-width: 0;
  flex: 1 1 18rem;
}

.client-billing-avatar {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  flex: 0 0 auto;
  border-radius: 1.05rem;
  background: linear-gradient(145deg, var(--cat-billing, #b45309), color-mix(in srgb, var(--cat-billing, #b45309) 35%, #7c2d12));
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--cat-billing, #b45309) 16%, transparent),
    0 14px 28px color-mix(in srgb, var(--cat-billing, #b45309) 22%, transparent);
}

.client-billing-kicker {
  margin: 0 0 0.35rem;
}

.client-billing-kicker .client-cat {
  margin: 0;
}

.client-billing-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.95rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.client-billing-lead {
  margin: 0.4rem 0 0;
  max-width: 42rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 550;
  line-height: 1.45;
}

.client-billing-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  justify-content: flex-end;
}

.client-billing-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.85rem;
  padding: 0.32rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--ink) 4%, var(--surface-solid, var(--surface)));
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 750;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

.client-billing-chip.is-live {
  border-color: color-mix(in srgb, var(--success, #059669) 28%, transparent);
  background: var(--success-soft, color-mix(in srgb, #059669 12%, transparent));
  color: var(--success, #047857);
}

.client-billing-chip.is-money {
  border-color: color-mix(in srgb, var(--cat-billing, #b45309) 28%, transparent);
  background: color-mix(in srgb, var(--cat-billing, #b45309) 12%, transparent);
  color: color-mix(in srgb, var(--cat-billing, #b45309) 88%, var(--ink));
}

.client-billing-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.client-billing-metrics li {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0.85rem 0.9rem 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--surface-solid, var(--surface)) 72%, transparent);
  backdrop-filter: blur(8px);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.client-billing-metrics li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75rem;
  bottom: 0.75rem;
  width: 0.22rem;
  border-radius: 999px;
  background: var(--sea);
}

.client-billing-metrics li[data-stat="collected"]::after,
.client-billing-metrics li[data-stat="paid"]::after {
  background: #059669;
}

.client-billing-metrics li[data-stat="pending"]::after {
  background: var(--signal);
}

.client-billing-metrics li[data-stat="overdue"]::after {
  background: var(--danger);
}

.client-billing-metrics li:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--sea) 28%, var(--border));
  box-shadow: 0 12px 24px color-mix(in srgb, #0b1f2a 8%, transparent);
}

.client-billing-metric-label,
.client-billing-metrics em {
  display: block;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.client-billing-metrics strong {
  display: block;
  margin: 0.28rem 0 0.15rem;
  font-size: clamp(0.98rem, 0.9rem + 0.35vw, 1.12rem);
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.client-billing-metrics li.is-good strong { color: #059669; }
.client-billing-metrics li.is-bad strong { color: var(--danger); }
.client-billing-metrics li.is-idle strong { color: color-mix(in srgb, var(--signal) 80%, var(--ink)); }

.client-billing-panel {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 1.25rem;
  animation: client-billing-rise 0.5s ease-out both;
}

.client-detail-simple > .panel.client-billing-panel::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--sea),
    color-mix(in srgb, var(--sea) 45%, var(--cat-billing, #b45309)),
    color-mix(in srgb, var(--sea) 35%, transparent)
  );
}

#client-vouchers.client-billing-panel {
  animation-delay: 0.05s;
}

#client-billing.client-billing-panel {
  animation-delay: 0.1s;
}

.client-billing-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem 1.1rem;
  margin-bottom: 1rem;
}

.client-billing-section-head .client-cat {
  margin: 0 0 0.35rem;
}

.client-billing-section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.12rem, 1rem + 0.45vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--ink);
}

.client-billing-section-meta {
  margin: 0.4rem 0 0;
  max-width: 44rem;
  color: var(--ink-soft);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.45;
}

.client-billing-section-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.client-billing-stack {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.client-billing-stack strong {
  font-weight: 750;
  color: var(--ink);
}

.client-billing-stack small {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
}

.client-billing-amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #047857;
}

[data-theme="dark"] .client-billing-amount {
  color: #6ee7b7;
}

.client-billing-method {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--sea) 28%, var(--border));
  background: color-mix(in srgb, var(--sea) 10%, transparent);
  color: var(--sea-deep);
  font-size: 0.76rem;
  font-weight: 750;
  white-space: nowrap;
}

[data-theme="dark"] .client-billing-method {
  color: var(--sea);
}

.client-billing-ref-row {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  max-width: 100%;
}

.client-billing-ref {
  font-weight: 750;
  letter-spacing: 0.02em;
  word-break: break-all;
}

.client-billing-ref-copy {
  flex: 0 0 auto;
  min-height: 1.7rem;
  padding: 0.15rem 0.55rem;
  font-size: 0.72rem;
}

.client-billing-ref-empty {
  color: var(--ink-soft);
}

.client-billing-empty {
  display: grid;
  gap: 0.3rem;
  justify-items: start;
  padding: clamp(1.15rem, 3vw, 1.55rem) clamp(1rem, 2.5vw, 1.25rem);
  border: 1.5px dashed color-mix(in srgb, var(--sea) 28%, var(--border-strong));
  border-radius: 1.1rem;
  background:
    radial-gradient(ellipse 80% 70% at 50% 0%, var(--sea-soft, color-mix(in srgb, var(--sea) 12%, transparent)), transparent 70%),
    color-mix(in srgb, var(--surface-2, var(--surface)) 85%, transparent);
}

.client-billing-page .client-billing-table-shell {
  margin-top: 0.15rem;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--surface-solid, var(--surface)) 94%, transparent);
}

.client-billing-empty strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
}

.client-billing-empty .client-simple-note,
.client-billing-empty .empty {
  margin: 0;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
}

.client-billing-page .client-voucher-cards {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
}

.client-billing-page .org-table-client-billing {
  width: 100%;
  min-width: 0;
}

.client-billing-page .org-table-client-billing th,
.client-billing-page .org-table-client-billing td {
  vertical-align: middle;
}

.client-billing-page .org-table-client-billing tbody tr {
  transition: background 0.15s ease;
}

.client-billing-page .org-table-client-billing tbody tr:hover {
  background: color-mix(in srgb, var(--sea) 5%, transparent);
}

@keyframes client-billing-rise {
  from {
    opacity: 0;
    transform: translateY(0.55rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 960px) {
  .client-billing-deck-top {
    flex-direction: column;
    align-items: stretch;
  }

  .client-billing-hero-meta {
    justify-content: flex-start;
  }

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

  .client-billing-nav-back {
    margin-left: 0;
  }

  .client-billing-page .client-billing-table-shell {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .client-billing-page .org-table-client-billing {
    width: 100%;
    min-width: 0 !important;
    border-collapse: separate;
    border-spacing: 0 0.75rem;
  }

  .client-billing-page .org-table-client-billing thead {
    display: none;
  }

  .client-billing-page .org-table-client-billing tbody {
    display: grid;
    gap: 0.75rem;
  }

  .client-billing-page .org-table-client-billing tbody tr {
    display: grid;
    margin: 0;
    padding: 0.95rem 1.05rem;
    border: 1px solid var(--border-strong, var(--border));
    border-radius: 1.1rem;
    background:
      linear-gradient(165deg, color-mix(in srgb, var(--sea) 5%, var(--surface-solid, var(--surface))), var(--surface-solid, var(--surface)));
    box-shadow: var(--card-shadow);
  }

  .client-billing-page .org-table-client-billing tbody tr:hover {
    background:
      linear-gradient(165deg, color-mix(in srgb, var(--sea) 8%, var(--surface-solid, var(--surface))), var(--surface-solid, var(--surface)));
  }

  .client-billing-page .org-table-client-billing tbody tr:hover td {
    background: transparent;
  }

  .client-billing-page .org-table-client-billing td {
    display: grid;
    grid-template-columns: minmax(5.5rem, 34%) minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.55rem 0;
    border: 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
  }

  .client-billing-page .org-table-client-billing td:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .client-billing-page .org-table-client-billing td::before {
    content: attr(data-label);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  .client-billing-page .org-table-client-billing td > * {
    justify-self: end;
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .client-billing-page .org-table-client-billing td[data-label="Date"] {
    grid-template-columns: 1fr;
    gap: 0.25rem;
    padding-top: 0;
  }

  .client-billing-page .org-table-client-billing td[data-label="Date"]::before {
    display: none;
  }

  .client-billing-page .org-table-client-billing td[data-label="Date"] > * {
    justify-self: start;
    text-align: left;
  }

  .client-billing-page .org-table-client-billing td[data-label="Amount"] .client-billing-amount {
    font-size: 1.05rem;
  }
}

@media (max-width: 720px) {
  .client-billing-page .client-voucher-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .client-billing-page .client-voucher-card-actions .btn {
    justify-content: center;
  }

  .client-billing-section-head {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 560px) {
  .client-billing-identity {
    gap: 0.75rem;
  }

  .client-billing-avatar {
    width: 3rem;
    height: 3rem;
    font-size: 1.1rem;
    border-radius: 0.9rem;
  }

  .client-billing-metrics {
    grid-template-columns: 1fr;
  }

  .client-billing-page .client-voucher-card-actions {
    grid-template-columns: 1fr;
  }

  .client-billing-page .org-table-client-billing td {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .client-billing-page .org-table-client-billing td > * {
    justify-self: start;
    text-align: left;
  }

  .client-billing-chip {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .client-voucher-card:hover,
  .client-billing-metrics li:hover,
  .client-billing-deck,
  .client-billing-panel {
    transform: none;
    animation: none;
  }
}

#client-available-vouchers .client-simple-note a,
#client-vouchers .client-simple-note a {
  font-weight: 700;
}

[data-theme="dark"] .client-voucher-card.is-valid {
  background:
    radial-gradient(circle at 100% 0%, rgba(69, 196, 207, 0.18), transparent 55%),
    linear-gradient(165deg, rgba(18, 40, 44, 0.9), var(--surface-solid) 62%);
}

/* ---- Dedicated vouchers page (teal access-code theme) ------------------ */

.client-vouchers-page {
  --voucher-accent: var(--cat-vouchers, var(--sea));
  --voucher-accent-soft: var(--cat-vouchers-soft, var(--sea-soft));
}

.client-vouchers-page .client-vouchers-deck {
  background:
    radial-gradient(ellipse 75% 120% at -10% -35%, color-mix(in srgb, var(--voucher-accent) 26%, transparent), transparent 58%),
    radial-gradient(ellipse 55% 90% at 110% 115%, color-mix(in srgb, #059669 16%, transparent), transparent 52%),
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--voucher-accent) 9%, var(--surface-solid, var(--surface))),
      var(--surface-solid, var(--surface)) 58%
    );
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 55%, transparent) inset,
    0 22px 50px color-mix(in srgb, var(--voucher-accent) 12%, transparent);
}

.client-vouchers-page .client-vouchers-deck::before {
  background: linear-gradient(
    180deg,
    var(--voucher-accent),
    color-mix(in srgb, var(--voucher-accent) 35%, #059669)
  );
}

.client-vouchers-avatar {
  background: linear-gradient(
    145deg,
    var(--voucher-accent),
    color-mix(in srgb, var(--voucher-accent) 40%, #0f766e)
  ) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--voucher-accent) 18%, transparent),
    0 14px 28px color-mix(in srgb, var(--voucher-accent) 24%, transparent) !important;
}

.client-vouchers-recharge-btn {
  border-color: color-mix(in srgb, var(--voucher-accent) 42%, transparent) !important;
  background: linear-gradient(
    145deg,
    var(--voucher-accent),
    color-mix(in srgb, var(--voucher-accent) 45%, #0f766e)
  ) !important;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--voucher-accent) 26%, transparent) !important;
}

.client-vouchers-recharge-btn:hover {
  box-shadow: 0 14px 28px color-mix(in srgb, var(--voucher-accent) 32%, transparent) !important;
}

.client-vouchers-recharge-btn:focus-visible {
  outline-color: color-mix(in srgb, var(--voucher-accent) 65%, #fff) !important;
}

.client-vouchers-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.client-vouchers-metrics li {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0.85rem 0.9rem 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--voucher-accent) 18%, var(--border));
  border-radius: 1rem;
  background: color-mix(in srgb, var(--surface-solid, var(--surface)) 78%, transparent);
  backdrop-filter: blur(8px);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.client-vouchers-metrics li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75rem;
  bottom: 0.75rem;
  width: 0.22rem;
  border-radius: 999px;
  background: var(--voucher-accent);
}

.client-vouchers-metrics li.is-good::after {
  background: #059669;
}

.client-vouchers-metrics li:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--voucher-accent) 36%, var(--border));
  box-shadow: 0 12px 24px color-mix(in srgb, var(--voucher-accent) 12%, transparent);
}

.client-vouchers-metrics li.is-good strong {
  color: #059669;
}

.client-vouchers-panel::before {
  background: linear-gradient(
    90deg,
    var(--voucher-accent),
    color-mix(in srgb, var(--voucher-accent) 40%, #059669),
    color-mix(in srgb, var(--voucher-accent) 30%, transparent)
  ) !important;
}

.client-vouchers-page .client-voucher-card.is-valid {
  border-color: color-mix(in srgb, var(--voucher-accent) 32%, var(--border-strong));
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--voucher-accent) 22%, transparent), transparent 55%),
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--voucher-accent) 10%, var(--surface)) 0%,
      var(--surface) 58%
    );
}

.client-vouchers-page .client-voucher-card.is-valid::before {
  background: linear-gradient(180deg, var(--voucher-accent), #059669);
}

.client-vouchers-page .client-voucher-card.is-valid:hover {
  border-color: color-mix(in srgb, var(--voucher-accent) 55%, var(--border-strong));
  box-shadow: 0 16px 34px color-mix(in srgb, var(--voucher-accent) 18%, transparent);
}

.client-vouchers-page .client-voucher-code-btn {
  background: color-mix(in srgb, var(--voucher-accent) 12%, transparent);
  border: 1px dashed color-mix(in srgb, var(--voucher-accent) 28%, transparent);
  color: color-mix(in srgb, var(--voucher-accent) 55%, var(--ink));
}

.client-vouchers-page .client-voucher-card.is-valid .client-voucher-code-btn:hover,
.client-vouchers-page .client-voucher-card.is-valid .client-voucher-code-btn:focus-visible {
  background: color-mix(in srgb, var(--voucher-accent) 18%, transparent);
  color: var(--voucher-accent);
  border-style: solid;
}

.client-vouchers-page .client-voucher-card-actions {
  border-top-color: color-mix(in srgb, var(--voucher-accent) 22%, var(--border));
}

.client-vouchers-page .voucher-share-actions .btn-sm:not(.voucher-share-wa):not(.btn-ghost) {
  border-color: color-mix(in srgb, var(--voucher-accent) 30%, var(--border));
  background: color-mix(in srgb, var(--voucher-accent) 10%, transparent);
  color: color-mix(in srgb, var(--voucher-accent) 75%, var(--ink));
}

.client-vouchers-empty {
  display: grid;
  justify-items: start;
  gap: 0.45rem;
  padding: 1.35rem 1.25rem !important;
  border: 1px dashed color-mix(in srgb, var(--voucher-accent) 35%, var(--border-strong)) !important;
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--voucher-accent) 12%, transparent), transparent 55%),
    var(--surface);
}

.client-vouchers-empty-ico {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.25rem;
  border-radius: 0.9rem;
  background: var(--voucher-accent-soft);
  color: var(--voucher-accent);
}

.client-vouchers-empty-link {
  color: var(--voucher-accent);
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

@media (max-width: 720px) {
  .client-vouchers-metrics {
    grid-template-columns: 1fr;
  }
}

/* ---- Extra-device vouchers popup after Hotspot recharge ---------------- */

.client-extra-vouchers-modal .client-extra-vouchers-panel {
  width: min(100%, 28.5rem);
  background:
    radial-gradient(ellipse 85% 55% at 100% -12%, rgba(46, 196, 182, 0.28), transparent 55%),
    radial-gradient(ellipse 70% 50% at -8% 5%, rgba(5, 150, 105, 0.18), transparent 52%),
    linear-gradient(185deg, #14363c 0%, #10282e 42%, #0c1a1f 100%);
  box-shadow:
    0 -18px 48px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(46, 196, 182, 0.18);
}

.client-extra-vouchers-head {
  border-bottom-color: rgba(46, 196, 182, 0.16) !important;
  background: linear-gradient(180deg, rgba(8, 28, 32, 0.45), rgba(8, 28, 32, 0.12)) !important;
}

.client-extra-vouchers-kicker {
  color: #5eead4 !important;
  letter-spacing: 0.08em;
}

.client-extra-vouchers-panel #client-extra-vouchers-title {
  color: #f0fdfa;
}

.client-extra-vouchers-panel [data-extra-vouchers-sub] {
  color: rgba(204, 251, 241, 0.78);
}

.client-extra-vouchers-body {
  display: grid;
  gap: 0.9rem;
  padding-top: 0.95rem;
}

.client-extra-vouchers-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0;
  padding: 0.7rem 0.85rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(94, 234, 212, 0.28);
  background: linear-gradient(
    135deg,
    rgba(15, 118, 110, 0.35),
    rgba(6, 78, 72, 0.22)
  );
  color: #ccfbf1;
  font-size: 0.84rem;
  line-height: 1.4;
}

.client-extra-vouchers-banner p {
  margin: 0;
}

.client-extra-vouchers-banner-ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 0.55rem;
  background: rgba(94, 234, 212, 0.18);
  color: #5eead4;
}

.client-extra-vouchers-list {
  grid-template-columns: 1fr !important;
  gap: 0.75rem !important;
}

.client-extra-voucher-card {
  border-color: rgba(94, 234, 212, 0.32) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(46, 196, 182, 0.22), transparent 55%),
    linear-gradient(165deg, rgba(15, 48, 52, 0.95), rgba(12, 28, 32, 0.92) 62%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 12px 28px rgba(0, 0, 0, 0.28) !important;
}

.client-extra-voucher-card::before {
  background: linear-gradient(180deg, #2ec4b6, #059669) !important;
}

.client-extra-voucher-card .client-voucher-card-kicker span:first-child {
  color: rgba(204, 251, 241, 0.72);
}

.client-extra-voucher-card .client-voucher-code-btn {
  width: 100%;
  border: 1px dashed rgba(94, 234, 212, 0.35);
  background: rgba(15, 118, 110, 0.22);
  color: #f0fdfa;
  font-size: clamp(1.35rem, 4vw, 1.65rem);
  letter-spacing: 0.18em;
  text-align: center;
}

.client-extra-voucher-card .client-voucher-code-btn:hover,
.client-extra-voucher-card .client-voucher-code-btn:focus-visible {
  border-style: solid;
  background: rgba(15, 118, 110, 0.34);
  color: #5eead4;
}

.client-extra-voucher-card .client-voucher-card-meta {
  color: rgba(204, 251, 241, 0.65);
  text-align: center;
}

.client-extra-voucher-card .client-voucher-card-actions {
  border-top-color: rgba(94, 234, 212, 0.18);
  justify-content: center;
}

.client-extra-voucher-card .client-voucher-card-actions .btn-sm {
  border-color: rgba(94, 234, 212, 0.35);
  background: rgba(46, 196, 182, 0.16);
  color: #99f6e4;
}

.client-extra-voucher-card .voucher-status-pill.is-valid {
  border-color: rgba(52, 211, 153, 0.45);
  background: rgba(5, 150, 105, 0.28);
  color: #6ee7b7;
}

.client-extra-vouchers-sms {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  background: rgba(5, 150, 105, 0.2);
  color: #6ee7b7;
  font-size: 0.78rem;
  font-weight: 650;
}

.client-extra-vouchers-foot {
  border-top: 1px solid rgba(46, 196, 182, 0.14);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.18));
}

.client-extra-vouchers-done {
  background: linear-gradient(145deg, #14b8a6, #0f766e) !important;
  border-color: transparent !important;
  box-shadow: 0 10px 22px rgba(15, 118, 110, 0.35);
}

.client-extra-vouchers-done:hover {
  filter: brightness(1.06);
}

[data-theme="light"] .client-extra-vouchers-modal .client-extra-vouchers-panel {
  background:
    radial-gradient(ellipse 85% 55% at 100% -12%, rgba(15, 118, 110, 0.16), transparent 55%),
    radial-gradient(ellipse 70% 50% at -8% 5%, rgba(5, 150, 105, 0.1), transparent 52%),
    linear-gradient(185deg, #f0fdfa 0%, #ecfeff 45%, #f8fafc 100%);
  box-shadow:
    0 -18px 48px rgba(15, 118, 110, 0.12),
    0 0 0 1px rgba(15, 118, 110, 0.14);
}

[data-theme="light"] .client-extra-vouchers-head {
  border-bottom-color: rgba(15, 118, 110, 0.12) !important;
  background: linear-gradient(180deg, rgba(240, 253, 250, 0.9), rgba(240, 253, 250, 0.4)) !important;
}

[data-theme="light"] .client-extra-vouchers-kicker {
  color: #0f766e !important;
}

[data-theme="light"] .client-extra-vouchers-panel #client-extra-vouchers-title {
  color: #134e4a;
}

[data-theme="light"] .client-extra-vouchers-panel [data-extra-vouchers-sub] {
  color: #3d5a66;
}

[data-theme="light"] .client-extra-vouchers-banner {
  border-color: rgba(15, 118, 110, 0.22);
  background: linear-gradient(135deg, rgba(204, 251, 241, 0.85), rgba(236, 253, 245, 0.7));
  color: #115e59;
}

[data-theme="light"] .client-extra-vouchers-banner-ico {
  background: rgba(15, 118, 110, 0.12);
  color: #0f766e;
}

[data-theme="light"] .client-extra-voucher-card {
  border-color: color-mix(in srgb, #0f766e 28%, var(--border-strong)) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(15, 118, 110, 0.12), transparent 55%),
    linear-gradient(165deg, #f0fdfa 0%, #fff 58%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 12px 28px rgba(15, 118, 110, 0.08) !important;
}

[data-theme="light"] .client-extra-voucher-card .client-voucher-card-kicker span:first-child {
  color: var(--ink-soft);
}

[data-theme="light"] .client-extra-voucher-card .client-voucher-code-btn {
  border-color: rgba(15, 118, 110, 0.28);
  background: rgba(15, 118, 110, 0.08);
  color: #134e4a;
}

[data-theme="light"] .client-extra-voucher-card .client-voucher-code-btn:hover,
[data-theme="light"] .client-extra-voucher-card .client-voucher-code-btn:focus-visible {
  background: rgba(15, 118, 110, 0.14);
  color: #0f766e;
}

[data-theme="light"] .client-extra-voucher-card .client-voucher-card-meta {
  color: var(--ink-soft);
}

[data-theme="light"] .client-extra-voucher-card .client-voucher-card-actions .btn-sm {
  border-color: rgba(15, 118, 110, 0.3);
  background: rgba(15, 118, 110, 0.08);
  color: #0f766e;
}

[data-theme="light"] .client-extra-vouchers-sms {
  background: rgba(5, 150, 105, 0.12);
  color: #047857;
}

[data-theme="light"] .client-extra-vouchers-foot {
  border-top-color: rgba(15, 118, 110, 0.12);
  background: linear-gradient(180deg, transparent, rgba(240, 253, 250, 0.65));
}

[data-theme="dark"] .client-vouchers-page .client-voucher-card.is-valid {
  background:
    radial-gradient(circle at 100% 0%, rgba(46, 196, 182, 0.22), transparent 55%),
    linear-gradient(165deg, rgba(14, 42, 44, 0.92), var(--surface-solid) 62%);
}

.voucher-row.is-expired,
.voucher-row.is-invalid {
  opacity: 0.88;
}

.org-table-client-vouchers th:nth-child(5),
.org-table-client-vouchers td:nth-child(5) {
  min-width: 14rem;
}

.client-simple-note {
  margin: 0.95rem 0 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
}

.client-simple-block {
  margin-top: 1.35rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--border);
}

.client-detail-simple .client-billing-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 0.65rem;
}

.client-detail-simple .client-billing-split > div {
  min-width: 0;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  background: var(--surface-2, var(--surface));
}

.client-detail-simple .client-detail-table-shell {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.client-detail-simple .client-meter {
  margin: 0.3rem 0;
}

.client-detail-simple .client-subscription-banner {
  margin: 0 0 0.85rem;
  border-radius: 0.95rem;
  padding: 0.8rem 1rem;
}

.client-detail-simple .org-table-shell {
  border: 1px solid var(--border-strong);
  border-radius: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--surface-2, var(--surface));
}

.client-detail-simple .org-table-client-devices {
  min-width: 32rem;
}

@media (max-width: 640px) {
  .client-detail-page.client-cmd > .client-cmd-workspace.panel {
    padding: 0;
  }

  .client-detail-simple.client-cmd > .client-cmd-workspace.panel {
    padding: 0;
    border-radius: 1rem;
  }
}

.client-detail-simple .org-table-client-billing {
  margin: 0;
}

.client-detail-simple .client-period-progress {
  margin-bottom: 0.75rem;
}

@media (max-width: 900px) {
  .client-simple-status {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-detail-simple .client-billing-split {
    grid-template-columns: 1fr;
  }

  .client-action-toolbar-group--primary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: 1 1 100%;
  }

  .client-action-toolbar-group--primary .client-package-pause-form,
  .client-action-toolbar-group--primary .client-action-btn {
    width: 100%;
  }

  .client-action-toolbar-group--primary .client-action-btn {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .client-detail-simple:not(.client-cmd) {
    padding-inline: 0;
  }

  .client-detail-simple > .panel {
    border-radius: 1rem;
    padding: 0.95rem 0.9rem 1.05rem;
  }

  .client-detail-simple.client-cmd > .client-cmd-workspace.panel {
    padding: 0;
  }

  .client-simple-head {
    flex-direction: column;
    align-items: stretch;
  }

  .client-simple-head-right {
    align-items: stretch;
    max-width: none;
  }

  .client-package-session-top {
    justify-content: flex-start;
  }

  .client-package-session-top .client-package-pause-form {
    justify-content: flex-start;
  }

  .client-package-session-top .client-simple-hint {
    max-width: none;
    text-align: left;
  }

  .client-simple-badges {
    width: 100%;
  }

  .client-simple-status {
    gap: 0.45rem;
  }

  .client-simple-list > div,
  .client-simple-list-dense > div {
    grid-template-columns: 1fr;
    gap: 0.18rem;
  }

  .client-simple-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .client-action-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: 0.55rem;
  }

  .client-action-toolbar-divider {
    width: 100%;
    height: 1px;
    min-height: 0;
    margin: 0;
  }

  .client-action-toolbar-group {
    width: 100%;
  }

  .client-action-toolbar-group--primary,
  .client-action-toolbar-group--danger {
    display: grid;
    grid-template-columns: 1fr;
  }

  .client-action-btn {
    width: 100%;
    justify-content: center;
  }

  .client-delete-modal .cc-delete-list {
    grid-template-columns: 1fr;
  }

  .client-simple-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .client-simple-more > summary {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 420px) {
  .client-simple-status {
    grid-template-columns: 1fr;
  }
}


/* Workspace live dashboard ------------------------------------------------ */
.staff-app:has(.workspace-dash) .staff-main,
.client-app:has(.workspace-dash) .staff-main {
  overflow-x: clip;
  max-width: 100%;
}

.workspace-dash {
  --wd-sea: var(--sea, #0e7c86);
  --wd-ink: color-mix(in srgb, var(--text, #0b1f2a) 92%, transparent);
  --wd-muted: color-mix(in srgb, var(--text, #0b1f2a) 58%, transparent);
  --wd-radius: calc(var(--radius, 14px) + 2px);
  overflow-x: clip;
  box-sizing: border-box;
  animation: workspace-dash-in 0.45s ease both;
}

.workspace-dash:not(.ops-page) {
  display: grid;
  gap: 1rem;
  width: 100%;
  max-width: 80rem;
  min-width: 0;
  margin-inline: auto;
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
}

@keyframes workspace-dash-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.workspace-dash-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.workspace-dash-btn-sm {
  padding: 0.28rem 0.65rem;
  font-size: 0.78rem;
}

.workspace-dash-kpis,
.workspace-dash-stats,
.workspace-dash-stats.has-referral {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.75rem;
  min-width: 0;
}

.workspace-dash-kpis.workspace-network-kpis {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.workspace-client-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

button.packages-stat.workspace-access-stat {
  cursor: pointer;
  font: inherit;
  text-align: left;
  width: 100%;
}

button.packages-stat.workspace-access-stat.is-active {
  border-color: color-mix(in srgb, var(--stat-tone, var(--sea)) 55%, var(--border));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--stat-tone, var(--sea)) 16%, transparent);
}

@media (max-width: 900px) {
  .workspace-client-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .workspace-dash-kpis.workspace-network-kpis {
    grid-template-columns: 1fr;
  }
}

.workspace-dash-kpi,
.workspace-dash-stat {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: 0.9rem 0.95rem 0.85rem;
  border-radius: var(--wd-radius);
  border: 1px solid var(--border-strong, var(--border));
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--surface) 92%, #fff), var(--surface));
  box-shadow: 0 8px 22px rgba(11, 31, 42, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  animation: workspace-stat-in 0.5s ease both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes workspace-stat-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.workspace-dash-kpi:hover,
.workspace-dash-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(11, 31, 42, 0.08);
}

.workspace-dash-kpi::before,
.workspace-dash-stat::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: color-mix(in srgb, var(--wd-sea) 70%, transparent);
}

.workspace-dash-kpi.tone-money::before,
.workspace-dash-stat.tone-money::before { background: #0e7c86; }
.workspace-dash-kpi.tone-danger::before,
.workspace-dash-stat.tone-danger::before { background: #e11d48; }
.workspace-dash-kpi.tone-net::before,
.workspace-dash-stat.tone-net::before { background: #4f8cff; }
.workspace-dash-kpi.tone-warn::before,
.workspace-dash-stat.tone-warn::before { background: #e8a317; }
.workspace-dash-kpi.tone-clients::before,
.workspace-dash-stat.tone-clients::before { background: #2ecc71; }
.workspace-dash-stat.tone-referral::before { background: #0d9488; }

.workspace-dash-stat.tone-money {
  background:
    linear-gradient(160deg, color-mix(in srgb, #0e7c86 14%, transparent), transparent 58%),
    var(--surface);
}

.workspace-dash-kpi.is-hot,
.workspace-dash-stat.is-hot,
.workspace-dash-stat.tone-danger.is-hot,
.workspace-dash-stat.tone-warn.is-hot {
  border-color: color-mix(in srgb, #e11d48 32%, var(--border));
}

.workspace-dash-kpi.is-hot .workspace-dash-kpi-value {
  color: #e11d48;
}

.workspace-dash-kpi.is-good,
.workspace-dash-stat.is-good {
  border-color: color-mix(in srgb, #2ecc71 36%, var(--border));
}

.workspace-dash-kpi.is-good .workspace-dash-kpi-value {
  color: #1f9d55;
}

.workspace-dash-stat-top {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.55rem;
}

.workspace-dash-stat-ico {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  color: var(--wd-sea);
  background: color-mix(in srgb, var(--wd-sea) 14%, transparent);
  flex: 0 0 auto;
}

.workspace-dash-stat.tone-danger .workspace-dash-stat-ico {
  color: #e11d48;
  background: rgba(225, 29, 72, 0.12);
}

.workspace-dash-stat.tone-net .workspace-dash-stat-ico {
  color: #4f8cff;
  background: rgba(79, 140, 255, 0.14);
}

.workspace-dash-stat.tone-warn .workspace-dash-stat-ico {
  color: #c27803;
  background: rgba(232, 163, 23, 0.16);
}

.workspace-dash-stat.tone-clients .workspace-dash-stat-ico {
  color: #1f9d55;
  background: rgba(46, 204, 113, 0.14);
}

.workspace-dash-stat.tone-referral .workspace-dash-stat-ico {
  color: #0f766e;
  background: rgba(13, 148, 136, 0.14);
}

.workspace-dash-stat-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wd-muted);
  line-height: 1.25;
}

.workspace-dash-stat-value {
  margin: 0;
  font-size: clamp(1.2rem, 3.6vw, 1.65rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--wd-ink);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.workspace-dash-stat-meta {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: var(--wd-muted);
  overflow-wrap: anywhere;
}

.workspace-dash-kpi-label {
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--wd-muted);
  line-height: 1.3;
}

.workspace-dash-kpi-value {
  margin: 0;
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--wd-ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.workspace-dash-kpi-value small {
  margin-left: 0.1rem;
  font-size: 0.72em;
  font-weight: 700;
  color: var(--wd-muted);
}

.workspace-dash-kpi-meta {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: var(--wd-muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.workspace-dash-metric-list {
  list-style: none;
  margin: 0.1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.workspace-dash-metric-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.42rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  font-size: 0.88rem;
}

.workspace-dash-metric-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.workspace-dash-metric-list li > span {
  color: var(--wd-muted);
  font-weight: 600;
}

.workspace-dash-metric-list li > strong {
  font-variant-numeric: tabular-nums;
  color: var(--wd-ink);
  font-weight: 750;
  text-align: right;
  font-style: normal;
}

.workspace-dash-metric-list li > strong em {
  font-style: normal;
  font-weight: 650;
  color: var(--wd-muted);
  margin-left: 0.35rem;
}

.workspace-dash-metric-list li.is-hot strong {
  color: #e11d48;
}

.workspace-dash-panel {
  padding: 1.1rem 1.15rem 1.15rem;
  border-radius: calc(var(--wd-radius) + 2px);
  border: 1px solid var(--border);
  min-width: 0;
  max-width: 100%;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, #fff), var(--surface));
  box-shadow: 0 10px 28px rgba(11, 31, 42, 0.045);
}

.workspace-dash-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem 1.1rem;
  margin-bottom: 0.85rem;
  min-width: 0;
}

.workspace-dash-panel-head > div {
  min-width: 0;
  flex: 1 1 auto;
}

.workspace-dash-panel-head h2 {
  margin: 0.15rem 0 0.25rem;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
}

.workspace-dash-panel-kicker {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wd-sea);
}

.workspace-dash-panel-head .panel-sub {
  margin: 0;
  max-width: 46rem;
  color: var(--wd-muted);
  overflow-wrap: anywhere;
}

.workspace-dash-perf-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
  max-width: 100%;
}

.workspace-dash-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 90%, transparent);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--wd-muted);
  white-space: nowrap;
  max-width: 100%;
}

.workspace-dash-chip strong {
  color: var(--wd-ink);
  font-size: 0.92rem;
}

.workspace-dash-chart-wrap {
  position: relative;
  height: clamp(180px, 28vw, 260px);
  margin: 0.25rem 0 0.85rem;
  padding: 0.55rem 0.35rem 0.25rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--wd-sea) 5%, transparent), transparent 40%),
    color-mix(in srgb, var(--surface-2, var(--surface)) 70%, transparent);
  max-width: 100%;
  overflow: hidden;
}

.workspace-dash-chart-wrap canvas {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: 100% !important;
}

.workspace-dash-chart-wrap-compact {
  height: clamp(160px, 24vw, 220px);
  margin-bottom: 0;
}

.workspace-dash-panel-chart-compact .workspace-dash-panel-head {
  margin-bottom: 0.35rem;
}

.workspace-dash-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.95rem;
  min-width: 0;
}

.workspace-dash-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  max-width: 100%;
}

.workspace-dash-more {
  margin: 0.65rem 0 0;
}

.workspace-dash-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.85rem;
  padding: 0.28rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 82%, transparent);
  max-width: 100%;
}

.workspace-dash-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--wd-muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  padding: 0.42rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.workspace-dash-tab:hover {
  color: var(--wd-ink);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.workspace-dash-tab.is-active {
  color: #fff;
  background: var(--wd-sea);
}

.workspace-dash-tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  background: color-mix(in srgb, currentColor 14%, transparent);
}

.workspace-dash-tab.is-active .workspace-dash-tab-count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.workspace-dash-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 0;
  font-size: 0.9rem;
}

.workspace-dash-table th,
.workspace-dash-table td {
  padding: 0.72rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  vertical-align: middle;
}

.workspace-dash-table th {
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wd-muted);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 75%, transparent);
  position: sticky;
  top: 0;
}

.workspace-dash-table .workspace-dash-name-col {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 11rem;
  background: var(--surface);
  box-shadow: 8px 0 12px -8px rgba(11, 31, 42, 0.16);
}

.workspace-dash-table thead .workspace-dash-name-col {
  z-index: 3;
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 92%, #fff);
}

.workspace-dash-table tbody tr:hover .workspace-dash-name-col {
  background: color-mix(in srgb, var(--wd-sea) 6%, var(--surface));
}

.workspace-dash-table tbody tr {
  transition: background 0.15s ease;
}

.workspace-dash-table tbody tr:hover {
  background: color-mix(in srgb, var(--wd-sea) 6%, transparent);
}

.workspace-dash-table tbody tr:last-child td {
  border-bottom: 0;
}

.workspace-dash-client {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  text-decoration: none;
  color: inherit;
}

.workspace-dash-name-col .workspace-dash-client strong,
.workspace-dash-name-col {
  white-space: nowrap;
}

.workspace-dash-table.is-stack td[data-label=""]::before {
  display: none;
}

.workspace-dash-client:hover strong {
  color: var(--wd-sea);
}

.workspace-dash-client small,
.workspace-dash-muted,
.workspace-dash-table small {
  color: var(--wd-muted);
  font-size: 0.78rem;
}

.workspace-dash-plan,
.workspace-dash-time {
  font-weight: 600;
}

.workspace-dash-amount {
  color: var(--wd-sea);
  font-variant-numeric: tabular-nums;
}

.workspace-dash-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.workspace-dash-badge.is-warn {
  color: #9f1239;
  background: rgba(225, 29, 72, 0.12);
}

.workspace-dash-badge.is-danger {
  color: #991b1b;
  background: rgba(239, 68, 68, 0.16);
}

.workspace-fup-attention {
  margin-top: 1rem;
}

.workspace-fup-meter {
  display: grid;
  gap: 0.18rem;
  min-width: 5.5rem;
}

.workspace-fup-meter strong {
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
}

.workspace-fup-meter small {
  color: var(--wd-muted);
  font-size: 0.7rem;
}

.workspace-fup-track {
  display: block;
  height: 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 80%, transparent);
  overflow: hidden;
}

.workspace-fup-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fb923c, #ea580c);
}

.workspace-fup-meter.is-hit .workspace-fup-fill {
  background: linear-gradient(90deg, #f87171, #dc2626);
}

.workspace-dash-table tr.is-fup-near td {
  background: color-mix(in srgb, #f59e0b 5%, transparent);
}

.workspace-dash-table tr.is-fup-hit td {
  background: color-mix(in srgb, #ef4444 6%, transparent);
}

[data-theme="dark"] .workspace-dash-badge.is-danger,
:root:not([data-theme="light"]) .workspace-dash-badge.is-danger {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.2);
}

.workspace-dash-empty {
  padding: 1.5rem 0.75rem 1.1rem;
  text-align: center;
}

.workspace-dash-empty-title {
  margin: 0 0 0.3rem;
  font-weight: 750;
  color: var(--wd-ink);
}

.workspace-dash-empty-copy {
  margin: 0;
  color: var(--wd-muted);
  font-size: 0.88rem;
}

.workspace-dash-router-perf {
  margin-top: 0.35rem;
}

.workspace-dash-drops {
  margin: 0.85rem 0 0.45rem;
  padding: 0.9rem 1rem 0.75rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 70%, transparent);
}

.workspace-dash-drops.has-drops {
  border-color: color-mix(in srgb, #e11d48 28%, var(--border));
  background: color-mix(in srgb, #e11d48 6%, var(--surface));
}

.workspace-dash-drops h3 {
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wd-muted, #64748b);
}

.workspace-dash-drop-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.workspace-dash-drop {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr);
  gap: 0.35rem 0.75rem;
  align-items: start;
}

.workspace-dash-drop-time {
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  font-weight: 800;
  color: #e11d48;
  padding-top: 0.1rem;
}

.workspace-dash-drop.is-now .workspace-dash-drop-time {
  color: #c2410c;
}

.workspace-dash-drop-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 750;
  color: var(--text, #0b1f2a);
}

.workspace-dash-drop-copy,
.workspace-dash-drop-meta,
.workspace-dash-reason {
  margin: 0.2rem 0 0;
  color: var(--wd-muted, #64748b);
  font-size: 0.86rem;
  line-height: 1.4;
}

.workspace-dash-drop-meta {
  font-weight: 650;
}

.workspace-dash-table td.workspace-dash-reason {
  max-width: 22rem;
  white-space: normal;
}

.workspace-dash-health {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 750;
}

.workspace-dash-health.is-good { color: #1f9d55; }
.workspace-dash-health.is-fair { color: #c27803; }
.workspace-dash-health.is-poor { color: #e11d48; }

.workspace-dash-scorebar {
  margin-top: 0.35rem;
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 85%, transparent);
  overflow: hidden;
  max-width: 9rem;
}

.workspace-dash-scorebar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #4f8cff;
}

.workspace-dash-table tr.is-good .workspace-dash-scorebar span { background: #2ecc71; }
.workspace-dash-table tr.is-fair .workspace-dash-scorebar span { background: #e8a317; }
.workspace-dash-table tr.is-poor .workspace-dash-scorebar span,
.workspace-dash-table tr.is-outage td:first-child strong { color: inherit; }

.workspace-dash-table tr.is-poor .workspace-dash-scorebar span { background: #e11d48; }
.workspace-dash-table tr.is-outage td:first-child strong { color: #e11d48; }

[data-theme="dark"] .workspace-dash-panel,
[data-theme="dark"] .workspace-dash-kpi,
[data-theme="dark"] .workspace-dash-stat {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .workspace-dash-table .workspace-dash-name-col {
  background: var(--surface);
  box-shadow: 8px 0 12px -8px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .workspace-dash-table thead .workspace-dash-name-col {
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 88%, #000);
}

[data-theme="dark"] .workspace-dash-table tbody tr:hover .workspace-dash-name-col {
  background: color-mix(in srgb, var(--wd-sea) 12%, var(--surface));
}

[data-theme="dark"] .workspace-dash-badge.is-warn {
  color: #fda4af;
  background: rgba(225, 29, 72, 0.2);
}

@media (max-width: 1200px) {
  .workspace-dash-kpis,
  .workspace-dash-stats,
  .workspace-dash-stats.has-referral {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .workspace-dash-grid {
    grid-template-columns: 1fr;
  }

  .workspace-dash-panel-head {
    flex-direction: column;
    align-items: stretch;
  }

  .workspace-dash-panel-head > .btn,
  .workspace-dash-panel-head > a.btn {
    align-self: flex-start;
  }

  .workspace-dash-perf-summary {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .workspace-dash {
    gap: 0.8rem;
    padding-bottom: 1rem;
  }

  .workspace-dash-kpis,
  .workspace-dash-stats,
  .workspace-dash-stats.has-referral {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }

  .workspace-dash-kpi,
  .workspace-dash-stat {
    padding: 0.8rem 0.8rem 0.75rem;
  }

  .workspace-dash-kpi-value,
  .workspace-dash-stat-value {
    font-size: clamp(1.15rem, 6vw, 1.4rem);
  }

  .workspace-dash-stat-ico {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 8px;
  }

  .workspace-dash-stat-ico svg {
    width: 15px;
    height: 15px;
  }

  .workspace-dash-panel {
    padding: 0.9rem 0.8rem 0.95rem;
  }

  .workspace-dash-panel-head h2 {
    font-size: 1.02rem;
  }

  .workspace-dash-chart-wrap,
  .workspace-dash-chart-wrap-compact {
    height: 190px;
    margin-bottom: 0.65rem;
  }

  .workspace-dash-table {
    font-size: 0.84rem;
  }

  .workspace-dash-table:not(.is-stack) {
    min-width: 22rem;
  }

  .workspace-dash-table th,
  .workspace-dash-table td {
    padding: 0.6rem 0.65rem;
  }

  .workspace-dash-scorebar {
    max-width: 100%;
  }

  .workspace-dash-table.is-stack thead {
    display: none;
  }

  .workspace-dash-table.is-stack,
  .workspace-dash-table.is-stack tbody,
  .workspace-dash-table.is-stack tr,
  .workspace-dash-table.is-stack td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .workspace-dash-table.is-stack tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.2rem 0.75rem;
    padding: 0.85rem 0.8rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  }

  .workspace-dash-table.is-stack td {
    padding: 0.12rem 0;
    border: 0;
  }

  .workspace-dash-table.is-stack td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.12rem;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wd-muted);
  }

  .workspace-dash-table.is-stack td:first-child,
  .workspace-dash-table.is-stack .workspace-dash-name-col,
  .workspace-dash-table.is-stack td.workspace-dash-reason,
  .workspace-dash-table.is-stack td:last-child {
    grid-column: 1 / -1;
  }

  .workspace-dash-table.is-stack .workspace-dash-name-col,
  .workspace-dash-table.is-stack td:first-child {
    position: static;
    box-shadow: none;
    background: transparent;
    min-width: 0;
    white-space: normal;
  }

  .workspace-dash-table.is-stack tbody tr:hover .workspace-dash-name-col,
  .workspace-dash-table.is-stack thead .workspace-dash-name-col {
    background: transparent;
  }

  .workspace-dash-drop {
    grid-template-columns: 3.2rem minmax(0, 1fr);
    gap: 0.2rem 0.6rem;
  }

  .workspace-dash-tabs {
    width: 100%;
  }

  .workspace-dash-tab {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .workspace-dash-kpi-label,
  .workspace-dash-stat-label {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
  }

  .workspace-dash-kpi-meta,
  .workspace-dash-stat-meta {
    font-size: 0.7rem;
  }

  .workspace-dash-chip {
    white-space: normal;
    line-height: 1.3;
  }

  .workspace-dash-empty {
    padding: 1.15rem 0.4rem 0.85rem;
  }

  .workspace-dash-btn,
  .workspace-dash-panel-head > .btn,
  .workspace-dash-panel-head > a.btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 360px) {
  .workspace-dash-kpis,
  .workspace-dash-stats,
  .workspace-dash-stats.has-referral {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-dash,
  .workspace-dash-kpi,
  .workspace-dash-stat {
    animation: none !important;
  }

  .workspace-dash-kpi:hover,
  .workspace-dash-stat:hover {
    transform: none;
  }
}
/* Referrals page */
.referral-page {
  --ref-tone: #0d9488;
  --ref-tone-strong: #0f766e;
  --ref-ink: var(--ink, #0b1f2a);
  --ref-muted: var(--ink-soft, #5b6b76);
  width: 100%;
  max-width: 52rem;
  margin-inline: auto;
  display: grid;
  gap: 1rem;
}

.referral-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
  align-items: start;
  gap: 0.95rem 1.1rem;
  padding: 1.15rem 1.2rem;
  border-radius: calc(var(--radius, 14px) + 6px);
  border: 1px solid color-mix(in srgb, var(--ref-tone) 22%, var(--border));
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--ref-tone) 20%, transparent), transparent 54%),
    linear-gradient(135deg, color-mix(in srgb, var(--ref-tone) 10%, transparent), transparent 48%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, #fff), var(--surface));
  box-shadow: var(--shadow, 0 10px 28px rgba(0, 0, 0, 0.08));
  animation: referralRise 0.45s ease both;
}

.referral-hero-main {
  display: flex;
  align-items: flex-start;
  gap: 0.95rem;
  min-width: 0;
}

.referral-hero-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  color: #fff;
  background: linear-gradient(145deg, var(--ref-tone), var(--ref-tone-strong));
  box-shadow: 0 10px 20px color-mix(in srgb, var(--ref-tone) 28%, transparent);
  animation: referralIconPop 0.55s ease both 0.08s;
}

.referral-kicker {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ref-tone);
}

.referral-title {
  margin: 0 0 0.35rem;
  font-family: var(--font-display, inherit);
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--ref-ink);
}

.referral-lead,
.referral-share-sub {
  margin: 0;
  max-width: 48ch;
  color: var(--ref-muted);
  font-size: 0.96rem;
  line-height: 1.5;
}

.referral-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.referral-stat {
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--ref-tone) 16%, var(--border));
  background: color-mix(in srgb, var(--surface) 88%, #fff);
}

.referral-stat-label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ref-muted);
}

.referral-stat-value {
  margin: 0.25rem 0 0.15rem;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ref-ink);
  line-height: 1.1;
}

.referral-stat-value--code {
  font-size: clamp(0.85rem, 1.6vw, 1.05rem);
  letter-spacing: 0.02em;
  word-break: break-all;
}

.referral-stat-meta {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ref-muted);
}

.referral-share-card,
.referral-list-card {
  padding: 1.05rem 1.15rem 1.15rem;
  border-radius: calc(var(--radius, 14px) + 4px);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 10px 26px rgba(11, 31, 42, 0.05);
  animation: referralRise 0.5s ease both 0.06s;
}

.referral-share-head,
.referral-list-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.referral-share-head h3,
.referral-list-head h3 {
  margin: 0 0 0.25rem;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.referral-live-pill,
.referral-count-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ref-tone) 22%, var(--border));
  background: color-mix(in srgb, var(--ref-tone) 10%, transparent);
  color: var(--ref-tone-strong);
  font-size: 0.78rem;
  font-weight: 700;
}

.referral-live-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ref-tone);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--ref-tone) 45%, transparent);
  animation: referralPulse 1.8s ease-out infinite;
}

.referral-code-stage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  margin-bottom: 0.9rem;
  border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--ref-tone) 35%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ref-tone) 8%, transparent), transparent 60%),
    color-mix(in srgb, var(--surface-2, var(--surface)) 92%, transparent);
}

.referral-code-stage-copy {
  min-width: 0;
}

.referral-label {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ref-muted);
}

.referral-code {
  margin: 0;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  word-break: break-all;
  color: var(--ref-ink);
}

.referral-code-company {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: 1.15rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--ref-ink);
}

.referral-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.55rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.referral-status-pill.is-pending {
  border-color: color-mix(in srgb, #d97706 35%, var(--border));
  background: color-mix(in srgb, #d97706 12%, transparent);
  color: #b45309;
}

.referral-status-pill.is-active {
  border-color: color-mix(in srgb, var(--ref-tone) 35%, var(--border));
  background: color-mix(in srgb, var(--ref-tone) 12%, transparent);
  color: var(--ref-tone-strong);
}

.referral-link-stage {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 1.1rem;
}

.referral-link-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.referral-url-input {
  flex: 1 1 16rem;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88rem;
}

.referral-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.referral-action-btn svg {
  flex: 0 0 auto;
}

.referral-status {
  margin: 0.15rem 0 0;
  min-height: 1.2em;
  font-size: 0.86rem;
  font-weight: 600;
}

.referral-status.is-ok { color: var(--ref-tone-strong); }
.referral-status.is-err { color: #be123c; }

.referral-channels {
  display: grid;
  gap: 0.55rem;
}

.referral-channel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 11.5rem));
  justify-content: start;
  gap: 0.65rem;
  align-items: start;
}

.referral-channel {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  max-width: 11.5rem;
  height: auto;
  align-self: start;
  padding: 0.75rem 0.8rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 90%, transparent);
  color: inherit;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.referral-channel:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--ref-tone) 35%, var(--border));
  box-shadow: 0 8px 18px rgba(11, 31, 42, 0.08);
}

.referral-channel-ico {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  flex: 0 0 auto;
  color: #fff;
}

.referral-channel.is-whatsapp .referral-channel-ico { background: #25d366; }
.referral-channel.is-sms .referral-channel-ico { background: #0ea5e9; }
.referral-channel.is-email .referral-channel-ico { background: #64748b; }
.referral-channel.is-more .referral-channel-ico { background: var(--ref-tone); }

.referral-channel-copy {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.referral-channel-copy strong {
  font-size: 0.92rem;
  letter-spacing: -0.01em;
}

.referral-channel-copy small {
  color: var(--ref-muted);
  font-size: 0.78rem;
}

.referral-table-wrap,
.referral-table-shell {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.referral-table .referral-org-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.referral-org-avatar {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.55rem;
  background: color-mix(in srgb, var(--ref-tone) 16%, transparent);
  color: var(--ref-tone-strong);
  font-size: 0.78rem;
  font-weight: 800;
}

.referral-empty {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: 2rem 1rem;
  text-align: center;
  border-radius: 14px;
  border: 1px dashed var(--border);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 88%, transparent);
}

.referral-empty-ico {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 0.35rem;
  border-radius: 1rem;
  color: var(--ref-tone);
  background: color-mix(in srgb, var(--ref-tone) 12%, transparent);
}

.referral-empty-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 750;
  color: var(--ref-ink);
}

.referral-empty-copy {
  margin: 0;
  max-width: 36ch;
  color: var(--ref-muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

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

@keyframes referralIconPop {
  from { opacity: 0; transform: scale(0.86); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes referralPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ref-tone) 45%, transparent); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

[data-theme="dark"] .referral-hero,
[data-theme="dark"] .referral-share-card,
[data-theme="dark"] .referral-list-card,
[data-theme="dark"] .referral-stat {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

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

  .referral-hero-stats {
    max-width: 28rem;
  }

  .referral-channel-grid {
    grid-template-columns: repeat(2, minmax(0, 12.5rem));
  }

  .referral-channel {
    max-width: 12.5rem;
  }
}

@media (max-width: 560px) {
  .referral-hero,
  .referral-share-card,
  .referral-list-card {
    padding: 1.05rem;
  }

  .referral-code-stage,
  .referral-share-head,
  .referral-list-head {
    flex-direction: column;
    align-items: stretch;
  }

  .referral-channel-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .referral-channel {
    max-width: none;
  }

  .referral-link-controls .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .referral-hero,
  .referral-share-card,
  .referral-list-card,
  .referral-hero-mark,
  .referral-live-dot,
  .referral-channel {
    animation: none !important;
    transition: none !important;
  }

  .referral-channel:hover {
    transform: none;
  }
}

.referral-invite-note {
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, #0d9488 35%, var(--border));
  background: color-mix(in srgb, #0d9488 10%, transparent);
}

.referral-invite-code {
  opacity: 0.85;
  font-weight: 600;
}

.referral-code-group.has-referrer input {
  border-color: color-mix(in srgb, #0d9488 40%, var(--border));
}

.referral-resolved-name {
  color: #0f766e;
  font-weight: 600;
}

/* ?? MikroTik professional loading states ?? */
.mikrotik-page-loader {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(6, 12, 18, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mikrotik-page-loader[hidden] {
  display: none !important;
}

.mikrotik-page-loader-card {
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  min-width: min(100%, 16.5rem);
  padding: 1.45rem 1.35rem 1.3rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(82, 208, 219, 0.16), transparent 55%),
    linear-gradient(180deg, rgba(28, 44, 54, 0.98), rgba(14, 22, 30, 0.98));
  box-shadow:
    0 28px 56px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-align: center;
  animation: mikrotik-onboard-loading-float 2.8s ease-in-out infinite;
}

.mikrotik-page-loader-orb {
  position: relative;
  width: 4.2rem;
  height: 4.2rem;
  display: grid;
  place-items: center;
}

.mikrotik-page-loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #52d0db;
  border-right-color: rgba(82, 208, 219, 0.35);
  animation: mikrotik-onboard-spin 0.9s linear infinite;
}

.mikrotik-page-loader-ring.is-slow {
  inset: 0.32rem;
  border-top-color: #2ecc71;
  border-right-color: rgba(46, 204, 113, 0.3);
  animation-duration: 1.35s;
  animation-direction: reverse;
}

.mikrotik-page-loader-core {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 13px;
  color: #9ae8ef;
  background: linear-gradient(145deg, rgba(82, 208, 219, 0.28), rgba(46, 204, 113, 0.16));
  box-shadow:
    0 0 24px rgba(82, 208, 219, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  animation: mikrotik-onboard-core-pulse 1.8s ease-in-out infinite;
}

.mikrotik-page-spinner,
.mikrotik-btn-spinner {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--sea, #0e7c86) 28%, transparent);
  border-top-color: var(--sea, #0e7c86);
  animation: mk-spin 0.75s linear infinite;
}

.mikrotik-btn-spinner {
  width: 0.95rem;
  height: 0.95rem;
  border-width: 2px;
  display: inline-block;
  vertical-align: -0.12em;
  margin-right: 0.4rem;
}

.mikrotik-btn-spinner[hidden] {
  display: none !important;
}

.mikrotik-page-loader-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  color: #eef6f8;
}

.mikrotik-live-loading-title {
  margin: 0;
  font-weight: 750;
  font-size: 0.98rem;
  color: var(--ink);
}

.mikrotik-page-loader-sub {
  margin: 0;
  max-width: 24ch;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(238, 246, 248, 0.68);
}

.mikrotik-live-loading-sub {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

body.mikrotik-page-loading {
  cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
  .mikrotik-page-loader-card,
  .mikrotik-page-loader-ring,
  .mikrotik-page-loader-core {
    animation: none;
  }
}

#mikrotik-refresh-status,
#mikrotik-live-refresh,
.btn.is-busy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
}

#mikrotik-refresh-status.is-busy,
#mikrotik-live-refresh.is-busy,
.btn.is-busy {
  opacity: 0.85;
  pointer-events: none;
}

.mikrotik-live {
  position: relative;
}

.mikrotik-live-loading {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1rem;
  padding: 1rem 1.05rem;
  border-radius: 14px;
  border: 1px dashed var(--border-strong);
  background: color-mix(in srgb, var(--surface-2) 88%, var(--sea) 4%);
}

.mikrotik-live-loading[hidden] {
  display: none !important;
}

.mikrotik-live.is-loading .mikrotik-live-grid,
.mikrotik-live.is-loading .mikrotik-uplink {
  opacity: 0.45;
  pointer-events: none;
  filter: saturate(0.85);
}

.mikrotik-live .mikrotik-page-spinner {
  flex: 0 0 auto;
}

[data-theme="light"] .mikrotik-page-loader {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
}

[data-theme="light"] .mikrotik-page-loader-card {
  background: #fff;
  border-color: var(--border-strong);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .mikrotik-page-loader-title {
  color: var(--ink);
}

[data-theme="light"] .mikrotik-page-loader-sub {
  color: var(--muted);
}

[data-theme="light"] .mikrotik-page-loader-core {
  color: var(--sea-deep);
  background: linear-gradient(145deg, rgba(12, 122, 132, 0.16), rgba(46, 204, 113, 0.12));
  box-shadow:
    0 0 18px rgba(12, 122, 132, 0.18),
    inset 0 0 0 1px rgba(11, 31, 42, 0.08);
}

[data-theme="light"] .mikrotik-page-loader-ring {
  border-top-color: var(--sea);
  border-right-color: rgba(12, 122, 132, 0.25);
}

[data-theme="light"] .mikrotik-page-loader-ring.is-slow {
  border-top-color: #1b7a45;
  border-right-color: rgba(27, 122, 69, 0.25);
}

[data-theme="light"] .mikrotik-link-spinner {
  border-color: rgba(14, 124, 134, 0.22);
  border-top-color: #0e7c86;
}

@media (prefers-reduced-motion: reduce) {
  .mikrotik-page-spinner,
  .mikrotik-btn-spinner,
  .mikrotik-link-spinner,
  .mk-loading-pulse {
    animation: none;
    border-top-color: var(--sea, #0e7c86);
  }
}



/* Shop ? network equipment catalog */

@keyframes shop-page-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shop-row-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ?? Page shell ????????????????????????????????????????????? */

.shop-page {
  --shop-sea: var(--sea, #0c7a84);
  --shop-sea-deep: var(--sea-deep, #07545c);
  --shop-ink: var(--ink, #071820);
  --shop-muted: var(--ink-soft, #3d5a66);
  --shop-card-w: clamp(11.5rem, 22vw, 15.5rem);
  --shop-fade: var(--surface-solid, #ffffff);
  --shop-shadow: 0 10px 28px rgba(7, 24, 32, 0.06);
  --shop-shadow-hover: 0 18px 40px rgba(7, 24, 32, 0.12);

  display: grid;
  gap: clamp(1rem, 2.4vw, 1.5rem);
  width: 100%;
  max-width: min(86rem, 100%);
  margin-inline: auto;
  min-width: 0;
  padding-bottom: clamp(1.25rem, 3vw, 2rem);
  animation: shop-page-in 0.45s ease both;
}

/* ?? Hero ??????????????????????????????????????????????????? */

.shop-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem 1.75rem;
  padding: clamp(1.25rem, 3vw, 1.85rem) clamp(1.2rem, 3vw, 1.85rem);
  border-radius: calc(var(--radius, 18px) + 4px);
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  background:
    radial-gradient(ellipse 90% 80% at 0% 0%, color-mix(in srgb, var(--shop-sea) 20%, transparent), transparent 55%),
    radial-gradient(ellipse 55% 50% at 100% 110%, color-mix(in srgb, var(--shop-sea) 12%, transparent), transparent 50%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-solid, #fff) 94%, var(--shop-sea)), var(--surface));
  box-shadow: var(--shop-shadow);
  overflow: hidden;
  isolation: isolate;
}

.shop-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--shop-sea) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--shop-sea) 8%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.32;
  mask-image: radial-gradient(ellipse 85% 75% at 25% 15%, #000 18%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.shop-hero-copy,
.shop-hero-aside {
  position: relative;
  z-index: 1;
}

.shop-kicker {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--shop-sea);
}

.shop-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3.2vw, 2.15rem);
  font-weight: 800;
  letter-spacing: var(--tracking-tight, -0.03em);
  line-height: 1.12;
  color: var(--shop-ink);
}

.shop-lead {
  margin: 0.55rem 0 0;
  max-width: 42ch;
  color: var(--shop-muted);
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  line-height: var(--leading-body, 1.6);
}

.shop-hero-aside {
  display: grid;
  gap: 0.15rem;
  justify-items: end;
  text-align: right;
  padding: 0.85rem 1.05rem;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--surface-solid, #fff) 72%, transparent);
  backdrop-filter: blur(10px);
  min-width: 9.5rem;
}

.shop-hero-aside-value {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3vw, 2.1rem);
  font-weight: 800;
  line-height: 1;
  color: var(--shop-ink);
  font-variant-numeric: tabular-nums;
}

.shop-hero-aside-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--shop-muted);
  max-width: 11ch;
  line-height: 1.3;
}

.shop-hero-aside-sale {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  font-weight: 750;
  color: var(--shop-sea-deep);
}

/* ?? Sticky filters ????????????????????????????????????????? */

.shop-filters {
  position: sticky;
  top: 0.55rem;
  z-index: 20;
  display: grid;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  border-radius: calc(var(--radius, 18px));
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 10px 28px rgba(7, 24, 32, 0.07);
}

.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.shop-search {
  position: relative;
  flex: 1 1 18rem;
  min-width: 0;
}

.shop-search-icon {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--shop-muted);
  display: inline-grid;
  place-items: center;
  pointer-events: none;
}

.shop-search-input {
  width: 100%;
  padding: 0.82rem 1rem 0.82rem 2.7rem;
  border-radius: 14px;
  border: 1px solid var(--input-border, var(--border));
  background: var(--input-bg, var(--surface-solid));
  color: var(--shop-ink);
  font: inherit;
  font-size: var(--text-sm, 0.9375rem);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.shop-search-input::placeholder {
  color: color-mix(in srgb, var(--shop-muted) 72%, transparent);
}

.shop-search-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--shop-sea) 45%, var(--border));
  box-shadow: 0 0 0 4px var(--sea-soft, rgba(12, 122, 132, 0.14));
}

.shop-search-btn {
  flex: 0 0 auto;
  min-height: 2.75rem;
  padding-inline: 1.25rem;
}

.shop-categories {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 0.1rem;
  margin-inline: -0.15rem;
  padding-inline: 0.15rem;
  scrollbar-width: none;
}

.shop-categories::-webkit-scrollbar {
  display: none;
}

.shop-category {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 0.48rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 88%, transparent);
  color: var(--shop-muted);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.shop-category:hover {
  color: var(--shop-ink);
  border-color: color-mix(in srgb, var(--shop-sea) 32%, var(--border));
  background: color-mix(in srgb, var(--shop-sea) 7%, var(--surface));
}

.shop-category.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--shop-sea), var(--shop-sea-deep));
  border-color: transparent;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--shop-sea) 28%, transparent);
}

.shop-category-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, currentColor 14%, transparent);
}

.shop-category.is-active .shop-category-count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.shop-results-meta {
  margin: 0;
  color: var(--shop-muted);
  font-size: 0.9rem;
}

.shop-results-meta strong {
  color: var(--shop-ink);
  font-weight: 750;
}

/* ?? Category rows (horizontal aisles) ??????????????????????? */

.shop-rows {
  display: grid;
  gap: clamp(1.35rem, 3vw, 2rem);
  min-width: 0;
}

.shop-row {
  min-width: 0;
  scroll-margin-top: 6rem;
  animation: shop-row-in 0.5s ease both;
  animation-delay: calc(var(--shop-row-i, 0) * 70ms + 80ms);
}

.shop-row-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  padding-inline: 0.15rem;
}

.shop-row-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  min-width: 0;
}

.shop-row-accent {
  flex: 0 0 auto;
  width: 4px;
  height: 2.35rem;
  margin-top: 0.15rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--shop-sea), var(--shop-sea-deep));
}

.shop-row-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-weight: 800;
  letter-spacing: var(--tracking-tight, -0.02em);
  color: var(--shop-ink);
}

.shop-row-sub {
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  color: var(--shop-muted);
}

.shop-row-controls {
  display: none;
  gap: 0.4rem;
  flex: 0 0 auto;
}

.shop-row.is-scrollable .shop-row-controls {
  display: inline-flex;
}

.shop-row-nav {
  appearance: none;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 92%, transparent);
  color: var(--shop-ink);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.shop-row-nav:hover {
  border-color: color-mix(in srgb, var(--shop-sea) 38%, var(--border));
  color: var(--shop-sea);
  background: color-mix(in srgb, var(--shop-sea) 9%, var(--surface));
}

.shop-row-nav:active {
  transform: scale(0.96);
}

.shop-row-nav:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--shop-sea) 45%, transparent);
  outline-offset: 2px;
}

.shop-row-viewport {
  position: relative;
  min-width: 0;
}

.shop-row-viewport::before,
.shop-row-viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0.4rem;
  width: clamp(1.5rem, 4vw, 2.75rem);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.shop-row-viewport::before {
  left: 0;
  background: linear-gradient(90deg, var(--shop-fade) 12%, transparent);
}

.shop-row-viewport::after {
  right: 0;
  background: linear-gradient(270deg, var(--shop-fade) 12%, transparent);
}

.shop-row.has-left .shop-row-viewport::before,
.shop-row.has-right .shop-row-viewport::after {
  opacity: 1;
}

.shop-row-scroller {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.4rem;
  margin-inline: -0.15rem;
  padding-inline: 0.15rem;
}

.shop-row-scroller::-webkit-scrollbar {
  display: none;
}

.shop-row-scroller:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--shop-sea) 40%, transparent);
  outline-offset: 2px;
  border-radius: 10px;
}

.shop-row-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1rem;
  width: max-content;
  min-width: 100%;
  padding-block: 0.2rem;
}

/* ?? Product cards ?????????????????????????????????????????? */

.shop-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: var(--shop-card-w);
  min-width: 0;
  border-radius: calc(var(--radius, 18px) + 2px);
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
  background: var(--surface-solid, var(--surface));
  box-shadow: var(--shop-shadow);
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.shop-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shop-shadow-hover);
  border-color: color-mix(in srgb, var(--shop-sea) 28%, var(--border));
}

.shop-card.is-out {
  opacity: 0.78;
}

.shop-card.is-out:hover {
  transform: none;
}

.shop-card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--shop-sea) 10%, transparent), transparent 55%),
    color-mix(in srgb, var(--surface-2, var(--surface)) 85%, transparent);
  overflow: hidden;
}

.shop-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.shop-card:hover .shop-card-image {
  transform: scale(1.07);
}

.shop-card-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--shop-sea) 48%, var(--shop-muted));
}

.shop-card-badge {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  z-index: 1;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
}

.shop-card-badge-sale {
  background: var(--danger, #c0392b);
  color: #fff;
}

.shop-card-badge-out {
  left: auto;
  right: 0.65rem;
  background: color-mix(in srgb, var(--shop-ink) 78%, transparent);
  color: #fff;
}

.shop-card.is-sale .shop-card-badge-out {
  top: 2.35rem;
}

.shop-card-body {
  display: grid;
  gap: 0.22rem;
  padding: 0.75rem 0.85rem 0.35rem;
  flex: 1 1 auto;
}

.shop-card-type {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--shop-sea);
}

.shop-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: var(--tracking-tight, -0.02em);
  color: var(--shop-ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  min-height: 2.4em;
}

.shop-card-price-row {
  display: grid;
  gap: 0.1rem;
  margin-top: 0.15rem;
}

.shop-card-price {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem;
}

.shop-card-price strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--shop-ink);
  font-variant-numeric: tabular-nums;
}

.shop-card.is-sale .shop-card-price strong {
  color: var(--shop-sea-deep);
}

.shop-card-price-was {
  font-size: 0.78rem;
  color: var(--shop-muted);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.shop-card-save {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--success, #145c3c);
}

.shop-card-foot {
  padding: 0.4rem 0.85rem 0.85rem;
  margin-top: auto;
}

.shop-card-btn {
  width: 100%;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.45rem 0.75rem;
  font-size: 0.84rem;
  font-weight: 700;
  border-radius: 12px;
}

/* ?? Empty state ???????????????????????????????????????????? */

.shop-empty {
  padding: clamp(2.25rem, 6vw, 3.25rem) 1.15rem;
  text-align: center;
  border-radius: calc(var(--radius, 18px));
  border: 1px dashed color-mix(in srgb, var(--border) 92%, transparent);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 72%, transparent);
}

.shop-empty-title {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 750;
  color: var(--shop-ink);
}

.shop-empty-copy {
  margin: 0 0 1.1rem;
  color: var(--shop-muted);
  max-width: 36ch;
  margin-inline: auto;
  line-height: var(--leading-body, 1.6);
}

/* ?? Order modal summary ???????????????????????????????????? */

.shop-order-summary {
  display: grid;
  gap: 0.22rem;
  padding: 0.95rem 1rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 82%, transparent);
  margin-bottom: 0.85rem;
}

.shop-order-label {
  margin: 0.38rem 0 0;
  font-size: 0.67rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--shop-muted);
}

.shop-order-label:first-child {
  margin-top: 0;
}

.shop-order-name,
.shop-order-price {
  margin: 0;
  font-weight: 750;
  color: var(--shop-ink);
}

.shop-order-price {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}

.shop-order-note {
  margin: 0;
  color: var(--shop-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* ?? Responsive ????????????????????????????????????????????? */

@media (max-width: 1200px) {
  .shop-page {
    --shop-card-w: clamp(11rem, 24vw, 14.25rem);
  }
}

@media (max-width: 900px) {
  .shop-page {
    --shop-card-w: clamp(10.75rem, 36vw, 13.5rem);
  }

  .shop-filters {
    position: static;
    top: auto;
    backdrop-filter: none;
    box-shadow: none;
  }

  .shop-row {
    scroll-margin-top: 1rem;
  }

  .shop-hero {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .shop-hero-aside {
    justify-items: start;
    text-align: left;
    width: fit-content;
  }
}

@media (max-width: 720px) {
  .shop-page {
    --shop-card-w: min(12.5rem, 58vw);
    gap: 0.95rem;
  }

  .shop-row-track {
    gap: 0.85rem;
  }

  .shop-card-title {
    font-size: 0.88rem;
    min-height: 2.3em;
  }

  .shop-card-price strong {
    font-size: 0.98rem;
  }
}

@media (max-width: 640px) {
  .shop-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .shop-search-btn {
    width: 100%;
  }

  .shop-hero {
    padding: 1.15rem 1.1rem;
  }

  .shop-row-head {
    align-items: center;
  }

  .shop-row-nav {
    width: 2.15rem;
    height: 2.15rem;
  }

  .shop-card-body {
    padding: 0.65rem 0.75rem 0.3rem;
  }

  .shop-card-foot {
    padding: 0.3rem 0.75rem 0.75rem;
  }
}

@media (max-width: 480px) {
  .shop-page {
    --shop-card-w: min(11.25rem, 72vw);
  }

  .shop-filters {
    padding: 0.75rem 0.8rem;
  }

  .shop-category {
    font-size: 0.78rem;
    padding: 0.42rem 0.78rem;
  }

  .shop-row-track {
    gap: 0.7rem;
  }

  .shop-card-title {
    -webkit-line-clamp: 2;
    font-size: 0.84rem;
  }
}

@media (max-width: 380px) {
  .shop-page {
    --shop-card-w: min(10.5rem, 78vw);
  }

  .shop-row.is-scrollable .shop-row-controls {
    display: none;
  }

  .shop-hero-aside {
    width: 100%;
  }
}

/* ?? Dark theme ????????????????????????????????????????????? */

[data-theme="dark"] .shop-page {
  --shop-fade: var(--surface-solid, #141c22);
  --shop-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
  --shop-shadow-hover: 0 22px 44px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .shop-hero {
  box-shadow: var(--shop-shadow);
}

[data-theme="dark"] .shop-hero::before {
  opacity: 0.2;
}

[data-theme="dark"] .shop-hero-aside {
  background: color-mix(in srgb, var(--surface-solid) 70%, transparent);
}

[data-theme="dark"] .shop-filters {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .shop-card {
  box-shadow: var(--shop-shadow);
}

[data-theme="dark"] .shop-card:hover {
  box-shadow: var(--shop-shadow-hover);
}

[data-theme="dark"] .shop-row-viewport::before {
  background: linear-gradient(90deg, var(--shop-fade) 10%, transparent);
}

[data-theme="dark"] .shop-row-viewport::after {
  background: linear-gradient(270deg, var(--shop-fade) 10%, transparent);
}

[data-theme="dark"] .shop-card-badge-out {
  background: color-mix(in srgb, var(--surface-solid) 72%, var(--shop-ink));
}

/* ?? Reduced motion ????????????????????????????????????????? */

@media (prefers-reduced-motion: reduce) {
  .shop-page,
  .shop-row {
    animation: none;
  }

  .shop-card,
  .shop-card-image,
  .shop-category,
  .shop-row-nav,
  .shop-row-viewport::before,
  .shop-row-viewport::after {
    transition: none;
  }

  .shop-card:hover {
    transform: none;
  }

  .shop-card:hover .shop-card-image {
    transform: none;
  }

  .shop-row-nav:active {
    transform: none;
  }
}

/* IT Support ? Company System Settings hub */
.css-hub-page {
  width: 100%;
  max-width: 58rem;
  margin-inline: auto;
  padding: 0.35rem 0 1.75rem;
}

.css-hub-shell {
  display: grid;
  gap: clamp(1.25rem, 2.2vw, 1.75rem);
}

.css-hub-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.55rem;
  padding: clamp(1.4rem, 2.8vw, 2rem) clamp(1.15rem, 2.6vw, 1.75rem);
  border: 1px solid var(--border-strong);
  border-radius: 24px;
  background:
    radial-gradient(ellipse 60% 95% at 50% -18%, color-mix(in srgb, var(--sea) 24%, transparent), transparent 60%),
    radial-gradient(ellipse 42% 70% at 8% 110%, color-mix(in srgb, var(--signal) 12%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--sea) 8%, var(--surface-solid)), var(--surface-solid));
  box-shadow: var(--card-shadow);
}

.css-hub-hero-mark {
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  margin-bottom: 0.15rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--sea) 28%, var(--border));
  background: color-mix(in srgb, var(--sea) 12%, var(--surface));
  color: var(--sea-deep);
}

.css-hub-kicker {
  margin: 0;
  color: var(--sea-deep);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.css-hub-title {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.35rem + 1.2vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.08;
  color: var(--ink);
}

.css-hub-lead {
  margin: 0;
  max-width: 38rem;
  color: var(--ink-soft);
  font-size: clamp(0.92rem, 0.86rem + 0.25vw, 1.05rem);
  line-height: 1.55;
}

.css-hub-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.2rem;
}

.css-hub-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.2;
}

.css-hub-chip.is-live {
  border-color: color-mix(in srgb, var(--success) 28%, transparent);
  background: var(--success-soft);
  color: var(--success);
}

.css-hub-chip.is-soft {
  background: color-mix(in srgb, var(--ink) 4%, var(--surface));
  color: var(--ink-soft);
}

.css-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.95rem;
}

.css-hub-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.95rem;
  row-gap: 0.85rem;
  align-items: start;
  min-height: 100%;
  padding: 1.15rem 1.15rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-solid);
  box-shadow: var(--card-shadow);
  text-decoration: none;
  color: inherit;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.css-hub-card:hover,
.css-hub-card:focus-visible {
  border-color: color-mix(in srgb, var(--sea) 42%, var(--border));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--ink) 10%, transparent);
  transform: translateY(-2px);
  outline: none;
}

.css-hub-card-glow {
  position: absolute;
  inset: auto -20% -55% auto;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sea) 18%, transparent), transparent 68%);
  pointer-events: none;
}

.css-hub-card-icon {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--sea) 22%, var(--border));
  background: color-mix(in srgb, var(--sea) 10%, var(--surface));
  color: var(--sea-deep);
}

.css-hub-card-body {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.css-hub-card-label {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.2;
}

.css-hub-card-copy {
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.45;
}

.css-hub-card-cta {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.15rem;
  color: var(--sea-deep);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.css-hub-card:hover .css-hub-card-cta svg,
.css-hub-card:focus-visible .css-hub-card-cta svg {
  transform: translateX(2px);
}

.css-hub-card-cta svg {
  transition: transform 160ms ease;
}

[data-theme="dark"] .css-hub-hero {
  background:
    radial-gradient(ellipse 60% 95% at 50% -18%, color-mix(in srgb, var(--sea) 28%, transparent), transparent 60%),
    radial-gradient(ellipse 42% 70% at 8% 110%, color-mix(in srgb, var(--signal) 16%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--sea) 10%, var(--surface-solid)), var(--surface-solid));
}

[data-theme="dark"] .css-hub-card:hover,
[data-theme="dark"] .css-hub-card:focus-visible {
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
}

/* IT Support ? Company themes (payment page previews) */
.css-themes-page {
  width: 100%;
  max-width: 58rem;
  margin-inline: auto;
  padding: 0.35rem 0 1.75rem;
}

.css-themes-shell {
  display: grid;
  gap: clamp(1.1rem, 2vw, 1.5rem);
}

.css-themes-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 0.85rem 1rem;
}

.css-themes-org-form {
  display: grid;
  gap: 0.35rem;
  min-width: min(100%, 18rem);
}

.css-themes-org-form label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.css-themes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.css-themes-card {
  display: grid;
  gap: 0.85rem;
  align-content: start;
  padding: 1.1rem 1.15rem 1.15rem;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  background: var(--surface-solid);
  box-shadow: var(--card-shadow);
}

.css-themes-card-icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--sea) 26%, var(--border));
  background: color-mix(in srgb, var(--sea) 10%, var(--surface-solid));
  color: var(--sea-deep);
}

.css-themes-card-body {
  display: grid;
  gap: 0.35rem;
}

.css-themes-card-body h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.css-themes-card-body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.css-themes-card-meta {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem !important;
  color: color-mix(in srgb, var(--ink) 72%, var(--muted)) !important;
  word-break: break-all;
}

.css-themes-card .btn {
  justify-self: start;
}

.css-themes-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.css-themes-card--paused {
  grid-column: 1 / -1;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, #b45309 8%, var(--surface-solid)),
      var(--surface-solid) 55%
    );
  border-color: color-mix(in srgb, #b45309 28%, var(--border-strong));
}

.css-themes-card--adverts {
  display: grid;
  gap: 0.85rem;
  padding: 1.1rem 1.15rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--sea) 30%, var(--border-strong));
  border-radius: 20px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--sea) 10%, var(--surface-solid)),
      var(--surface-solid) 58%
    );
  box-shadow: var(--card-shadow);
}

.css-themes-adverts-form {
  margin: 0;
}

.css-themes-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 750;
  cursor: pointer;
  user-select: none;
}

.css-themes-toggle input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--sea-deep);
}

.css-themes-card--paused .css-themes-card-icon {
  border-color: color-mix(in srgb, #b45309 34%, var(--border));
  background: color-mix(in srgb, #b45309 12%, var(--surface-solid));
  color: #9a3412;
}

.css-themes-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

@media (max-width: 720px) {
  .css-themes-grid {
    grid-template-columns: 1fr;
  }

  .css-themes-toolbar {
    align-items: stretch;
  }

  .css-themes-org-form {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .css-hub-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .css-hub-card,
  .css-hub-card-cta svg {
    transition: none;
  }

  .css-hub-card:hover,
  .css-hub-card:focus-visible {
    transform: none;
  }
}

/* ==========================================================================
   UI Consistency Pass (appearance only) ? rhythm, cards, forms, responsive
   Does not change markup, JS behavior, or form/action semantics.
   ========================================================================== */

:root,
[data-theme="light"],
[data-theme="dark"] {
  --ui-gap: clamp(0.85rem, 1.6vw, 1.15rem);
  --ui-gap-lg: clamp(1.1rem, 2.2vw, 1.5rem);
  --control-height: 2.65rem;
  --control-radius: 12px;
}

/* Page content rhythm across staff + client shells */
.staff-app .staff-main,
.staff-app .main.staff-main {
  display: flex;
  flex-direction: column;
  gap: var(--ui-gap);
  max-width: 100%;
}

.staff-app .staff-main > .page-sub,
.staff-app .staff-main > .client-page-lead,
.staff-app .main.staff-main > .page-sub,
.staff-app .main.staff-main > .client-page-lead {
  margin-bottom: 0;
}

.staff-app .staff-main > .stack-gap,
.staff-app .main.staff-main > .stack-gap {
  margin-top: 0;
}

/* Role / module launch cards ? align with hub card language */
.role-highlight-grid {
  gap: var(--ui-gap);
}

@media (max-width: 900px) {
  .role-highlight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .role-highlight-grid {
    grid-template-columns: 1fr;
  }
}

.role-highlight-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 0.55rem;
  min-height: 100%;
  padding: 1.15rem 1.15rem 1.05rem;
  border-radius: 18px;
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--sea-soft), transparent 55%),
    var(--surface-solid, var(--surface));
  box-shadow: var(--card-shadow);
  text-decoration: none;
  color: inherit;
  transition:
    border-color var(--dur, 0.28s) ease,
    transform var(--dur, 0.28s) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow var(--dur, 0.28s) ease;
}

.role-highlight-card::before {
  content: "";
  position: absolute;
  inset: auto -18% -55% auto;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sea) 16%, transparent), transparent 70%);
  pointer-events: none;
}

.role-highlight-card:hover,
.role-highlight-card:focus-visible {
  border-color: color-mix(in srgb, var(--sea) 42%, var(--border));
  transform: translateY(-2px);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--ink) 10%, transparent);
  outline: none;
}

.role-highlight-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  margin-bottom: 0.15rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--sea) 24%, var(--border));
  background: color-mix(in srgb, var(--sea) 12%, var(--surface));
  color: var(--sea-deep);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.role-highlight-card p {
  position: relative;
  z-index: 1;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.module-highlights {
  gap: var(--ui-gap);
}

.module-highlight {
  border-radius: 16px;
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 90% at 0% 0%, var(--sea-soft), transparent 55%),
    var(--surface-solid, var(--surface));
  box-shadow: var(--card-shadow);
  color: var(--ink);
}

.module-card {
  background: var(--surface-solid, var(--surface));
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  box-shadow: var(--card-shadow);
  color: var(--ink);
}

a.module-card:hover,
a.module-card:focus-visible {
  border-color: color-mix(in srgb, var(--sea) 40%, var(--border));
  box-shadow: 0 14px 32px color-mix(in srgb, var(--sea) 12%, transparent);
  outline: none;
}

.module-card h2,
.module-card p,
.module-kicker,
.module-cta {
  color: inherit;
}

.module-kicker {
  color: var(--sea-deep);
}

.module-cta {
  color: var(--sea-deep);
}

[data-theme="dark"] .module-kicker,
[data-theme="dark"] .module-cta {
  color: var(--sea);
}

/* Shared control styling for forms that omit .form-control */
.staff-app .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]),
.staff-app .form-group select,
.staff-app .form-group textarea,
.staff-app .field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]),
.staff-app .field select,
.staff-app .field textarea,
.auth-panel .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]),
.auth-panel .form-group select,
.auth-panel .form-group textarea,
.staff-card .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]),
.staff-card .form-group select,
.staff-card .form-group textarea {
  width: 100%;
  min-height: var(--control-height);
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--input-border, var(--border-strong));
  border-radius: var(--control-radius);
  background: var(--input-bg, var(--surface-solid));
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  line-height: 1.35;
  transition:
    border-color var(--dur-fast, 0.16s) ease,
    box-shadow var(--dur-fast, 0.16s) ease,
    background var(--dur-fast, 0.16s) ease;
}

.staff-app .form-group textarea,
.staff-app .field textarea,
.auth-panel .form-group textarea,
.staff-card .form-group textarea {
  min-height: 6.5rem;
  resize: vertical;
}

.staff-app .form-group input:hover,
.staff-app .form-group select:hover,
.staff-app .form-group textarea:hover,
.staff-app .field input:hover,
.staff-app .field select:hover,
.staff-app .field textarea:hover,
.auth-panel .form-group input:hover,
.auth-panel .form-group select:hover,
.auth-panel .form-group textarea:hover,
.staff-card .form-group input:hover,
.staff-card .form-group select:hover,
.staff-card .form-group textarea:hover {
  border-color: color-mix(in srgb, var(--sea) 35%, var(--input-border, var(--border)));
}

.staff-app .form-group input:focus,
.staff-app .form-group select:focus,
.staff-app .form-group textarea:focus,
.staff-app .field input:focus,
.staff-app .field select:focus,
.staff-app .field textarea:focus,
.auth-panel .form-group input:focus,
.auth-panel .form-group select:focus,
.auth-panel .form-group textarea:focus,
.staff-card .form-group input:focus,
.staff-card .form-group select:focus,
.staff-card .form-group textarea:focus {
  border-color: var(--sea);
  box-shadow: var(--focus-ring, 0 0 0 3px var(--sea-soft));
  outline: none;
}

.form-group,
.field {
  display: grid;
  gap: 0.35rem;
}

.form-group label,
.field label,
.form-group > span:first-child,
.field > span:first-child {
  font-size: var(--text-sm, 0.9rem);
  font-weight: 700;
  color: var(--ink);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.form-actions .btn {
  min-height: 2.7rem;
}

/* Account / settings intro alignment */
.account-page-intro {
  padding: 1rem 1.15rem;
  margin-bottom: 0.85rem;
}

.account-page-intro,
.company-settings-page .org-edit-intro {
  border-radius: 18px;
  border: 1px solid var(--border-strong);
  background:
    radial-gradient(ellipse 70% 90% at 0% 0%, var(--sea-soft), transparent 55%),
    var(--surface-solid, var(--surface));
  box-shadow: var(--card-shadow);
}

.account-page-kicker {
  margin: 0 0 0.35rem;
  color: var(--sea-deep);
  font-size: var(--text-xs, 0.75rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

[data-theme="dark"] .account-page-kicker {
  color: var(--sea);
}

[data-theme="dark"] .account-page-form .account-code-input-wrap .join-code-input {
  background: color-mix(in srgb, var(--surface-solid) 92%, #000 8%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}

[data-theme="dark"] .account-form-block,
[data-theme="dark"] .account-form-block--signin,
[data-theme="dark"] .account-form-block--security {
  background: color-mix(in srgb, var(--surface-3) 35%, transparent);
}

[data-theme="dark"] .account-page-actions--sticky {
  background: color-mix(in srgb, var(--surface-solid) 82%, transparent);
}

/* Table shells ? subtle edge fade + denser mobile */
.table-scroll,
.clients-table-wrap,
.org-table-shell {
  position: relative;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--sea) 40%, transparent) transparent;
}

.table-scroll::after,
.clients-table-wrap::after,
.org-table-shell::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 1.75rem;
  pointer-events: none;
  background: linear-gradient(270deg, color-mix(in srgb, var(--surface-solid, var(--surface)) 88%, transparent), transparent);
  opacity: 0.9;
}

@media (min-width: 1100px) {
  .table-scroll::after,
  .clients-table-wrap::after,
  .org-table-shell::after {
    display: none;
  }
}

/* Filter / toolbar chips shared feel */
.billing-revenue-mode,
.workspace-dash-chip,
.css-hub-chip,
.mikrotik-wifi-pill {
  border-radius: 999px;
}

.billing-revenue-modes {
  gap: 0.45rem;
}

/* Notices + empty states density */
.notice,
.empty,
.non-field-errors {
  border-radius: 14px;
}

.non-field-errors {
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.85rem;
  border: 1px solid var(--notice-error-border, rgba(176, 48, 48, 0.28));
  background: var(--notice-error-bg, rgba(176, 48, 48, 0.1));
  color: var(--notice-error-fg, #8a1f1f);
  font-weight: 600;
}

/* Auth panel token alignment (remove leftover hard cream) */
.auth-panel {
  background: color-mix(in srgb, var(--surface-solid, var(--surface)) 92%, transparent);
  color: var(--ink);
  border-color: var(--border-strong);
}

.auth-panel h1 {
  color: var(--ink);
}

.auth-brand {
  color: var(--ink);
}

.auth-brand span {
  color: var(--sea);
}

.staff-shell {
  background: var(--workspace-bg, linear-gradient(180deg, #f2f7f8 0%, #e8f0f2 100%));
}

/* Touch-friendly controls on small screens */
@media (max-width: 640px) {
  .btn,
  .form-actions .btn,
  .panel-head-actions .btn {
    min-height: 2.85rem;
  }

  .role-highlight-card,
  .module-highlight,
  .module-card {
    padding: 1rem;
  }

  .staff-app .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]),
  .staff-app .form-group select,
  .staff-app .field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]),
  .staff-app .field select,
  .auth-panel .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]),
  .auth-panel .form-group select {
    min-height: 2.85rem;
    font-size: 1rem; /* avoid iOS zoom */
  }

  .table-scroll .table,
  .clients-table-wrap .table {
    min-width: 28rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .role-highlight-card,
  .module-highlight,
  .module-card {
    transition: none;
  }

  .role-highlight-card:hover,
  .role-highlight-card:focus-visible,
  .module-highlight:hover,
  a.module-card:hover {
    transform: none;
  }
}

/* ==========================================================================
   MikroTik / network family ? appearance consistency (pass 2)
   ========================================================================== */

.mikrotik-fleet {
  border-radius: 18px;
  border-color: color-mix(in srgb, var(--mikrotik-tone, var(--sea)) 18%, var(--border-strong, var(--border)));
  box-shadow: var(--card-shadow);
}

.mk-page-hero {
  border-radius: 20px;
  border-color: var(--border-strong);
  box-shadow: var(--card-shadow);
}

[data-theme="dark"] .mikrotik-hero {
  border-color: color-mix(in srgb, var(--sea) 22%, var(--border));
}

.mikrotik-table-shell {
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 55%, transparent);
  overflow: auto;
}

.mk-surface,
.mk-banner {
  border-radius: 16px;
  border-color: var(--border);
  box-shadow: var(--card-shadow);
}

@media (max-width: 720px) {
  .mikrotik-fleet-actions .btn {
    min-height: 2.75rem;
  }

  .mikrotik-table-shell {
    border: 0;
    background: transparent;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mikrotik-router-row {
    animation: none !important;
  }
}

/* MikroTik pages ? dual-theme polish (list + detail) */
.mikrotik-account-pill {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.mikrotik-account-pill.is-active {
  color: var(--success);
  background: var(--success-soft);
  border-color: color-mix(in srgb, var(--success) 28%, transparent);
}

.mikrotik-account-pill.is-suspended {
  color: var(--signal);
  background: var(--signal-soft);
  border-color: color-mix(in srgb, var(--signal) 30%, transparent);
}

[data-theme="light"] .mk-page-hero {
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--sea) 16%, transparent), transparent 42%),
    radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--signal) 10%, transparent), transparent 38%),
    linear-gradient(180deg, var(--surface-solid), color-mix(in srgb, var(--surface-solid) 90%, var(--sea) 10%));
}

.mk-detail-hero.is-suspended {
  background:
    linear-gradient(135deg, var(--signal-soft), transparent 46%),
    var(--surface);
}

.mk-detail-hero.is-online {
  background:
    linear-gradient(135deg, var(--success-soft), transparent 48%),
    var(--surface);
}

.mk-detail-hero.is-offline {
  background:
    linear-gradient(135deg, var(--danger-soft), transparent 48%),
    var(--surface);
}

.mk-detail-hero-topline .mikrotik-account-pill {
  min-height: 1.65rem;
  padding: 0.15rem 0.6rem;
  font-size: 0.7rem;
}

.mk-detail-hero-topline .mikrotik-auto-restore-badge {
  min-height: 1.65rem;
  font-size: 0.7rem;
}

.mk-detail-surface.mikrotik-live.is-online {
  border-color: color-mix(in srgb, var(--success) 28%, var(--border));
}

.mk-detail-surface.mikrotik-live.is-offline {
  border-color: color-mix(in srgb, var(--danger) 24%, var(--border));
}

.mikrotik-link-status.is-connected,
.mk-detail-link-pill.mikrotik-link-status.is-connected,
.mk-detail-link-pill.is-connected {
  color: var(--success);
  background: var(--success-soft);
  border-color: transparent;
}

.mikrotik-link-status.is-disconnected,
.mk-detail-link-pill.mikrotik-link-status.is-disconnected,
.mk-detail-link-pill.is-disconnected {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: transparent;
}

.mikrotik-link-status.is-limited,
.mk-detail-link-pill.mikrotik-link-status.is-limited {
  color: var(--signal);
  background: var(--signal-soft);
  border-color: transparent;
}

.mikrotik-link-status.is-auth-failed,
.mikrotik-link-status.is-reachable {
  color: var(--sea);
  background: var(--sea-soft);
  border-color: transparent;
}

.mikrotik-link-status.is-checking,
.mk-detail-link-pill.is-checking {
  color: var(--ink-soft);
  background: var(--surface-2);
  border-color: var(--border);
}

.mikrotik-link-status.is-connected .mikrotik-link-dot {
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 22%, transparent);
}

.mikrotik-link-status.is-disconnected .mikrotik-link-dot {
  background: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent);
}

.mikrotik-link-status.is-limited .mikrotik-link-dot {
  background: var(--signal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 20%, transparent);
}

.mikrotik-tunnel-verify-banner {
  border-color: var(--border);
  background: var(--surface-2);
  color: var(--ink);
}

.mikrotik-tunnel-verify-banner.is-warn {
  border-color: color-mix(in srgb, var(--signal) 35%, var(--border));
  background: var(--notice-info-bg);
  color: var(--notice-info-fg);
}

.mikrotik-tunnel-verify-banner.is-warn .mikrotik-tunnel-verify-sub {
  color: var(--ink-soft);
  opacity: 1;
}

.mikrotik-tunnel-verify-banner.is-warn a {
  color: var(--sea-deep);
  font-weight: 700;
}

[data-theme="dark"] .mikrotik-tunnel-verify-banner.is-warn a {
  color: var(--sea);
}

.mikrotik-tunnel-verify-banner.is-warn code {
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
  background: var(--surface-3);
  color: var(--ink);
  font-size: 0.85em;
}

.mikrotik-detail-map-link {
  color: var(--sea);
  font-weight: 650;
  text-decoration: none;
}

.mikrotik-detail-map-link:hover {
  color: var(--sea-deep);
  text-decoration: underline;
}

[data-theme="dark"] .mikrotik-detail-map-link:hover {
  color: var(--sea-deep);
}

.mikrotik-title,
.mikrotik-kicker,
.mk-page-title {
  color: var(--ink);
}

.mikrotik-kicker,
.mk-page-kicker {
  color: var(--sea);
}


.org-table-mikrotik tbody tr.mikrotik-router-row.is-suspended:hover td {
  background: color-mix(in srgb, var(--signal-soft) 75%, transparent);
}

.mikrotik-live-blocked {
  border-color: color-mix(in srgb, var(--signal) 30%, var(--border));
  background:
    radial-gradient(ellipse 70% 90% at 0% 0%, color-mix(in srgb, var(--signal) 14%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-solid) 96%, var(--signal) 4%), var(--surface-2));
}

.mikrotik-live-blocked-icon {
  color: var(--signal);
  background: var(--signal-soft);
  border-color: color-mix(in srgb, var(--signal) 32%, transparent);
}

.mikrotik-live-blocked strong {
  color: var(--ink);
}

.mk-detail-facts,
.mk-detail-facts-sr,
.mikrotik-router-profile-facts {
  display: none !important;
}

.mk-detail-stamp.is-loading {
  color: var(--sea);
  background: var(--sea-soft);
  border-color: color-mix(in srgb, var(--sea) 24%, var(--border));
}

[data-theme="light"] .mikrotik-page-loader {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
}

[data-theme="light"] .mikrotik-page-loader-card {
  background: #fff;
  border-color: var(--border-strong);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .mikrotik-page-loader-title {
  color: var(--ink);
}

[data-theme="light"] .mikrotik-page-loader-sub {
  color: var(--muted);
}

[data-theme="light"] .mikrotik-page-loader-core {
  color: var(--sea-deep);
  background: linear-gradient(145deg, rgba(12, 122, 132, 0.16), rgba(46, 204, 113, 0.12));
  box-shadow:
    0 0 18px rgba(12, 122, 132, 0.18),
    inset 0 0 0 1px rgba(11, 31, 42, 0.08);
}

[data-theme="light"] .mikrotik-page-loader-ring {
  border-top-color: var(--sea);
  border-right-color: rgba(12, 122, 132, 0.25);
}

[data-theme="light"] .mikrotik-page-loader-ring.is-slow {
  border-top-color: #1b7a45;
  border-right-color: rgba(27, 122, 69, 0.25);
}

[data-theme="light"] .mikrotik-link-spinner {
  border-color: color-mix(in srgb, var(--sea) 22%, transparent);
  border-top-color: var(--sea);
}

[data-theme="dark"] .mikrotik-restart-btn {
  border-color: color-mix(in srgb, var(--signal) 40%, var(--border-strong));
  color: var(--signal);
}

[data-theme="dark"] .mikrotik-restart-btn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--signal) 55%, var(--border-strong));
  background: color-mix(in srgb, var(--signal) 10%, var(--surface-2));
}

/* ==========================================================================
   IT Support ? Company Payment Gateway page
   ========================================================================== */

.pgw-page {
  width: 100%;
  max-width: 56rem;
  margin-inline: auto;
  padding: 0.25rem 0 1.75rem;
}

.pgw-shell {
  display: grid;
  gap: clamp(1rem, 2vw, 1.35rem);
}

.pgw-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: clamp(1.35rem, 2.8vw, 1.9rem) clamp(1.1rem, 2.6vw, 1.7rem);
  border: 1px solid var(--border-strong);
  border-radius: 24px;
  background:
    radial-gradient(ellipse 60% 95% at 50% -18%, color-mix(in srgb, #0f766e 26%, transparent), transparent 60%),
    radial-gradient(ellipse 42% 70% at 8% 110%, color-mix(in srgb, var(--signal) 14%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, #0f766e 8%, var(--surface-solid)), var(--surface-solid));
  box-shadow: var(--card-shadow);
}

.pgw-hero::before {
  content: "";
  position: absolute;
  inset: auto -12% -48% 40%;
  width: 14rem;
  height: 14rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, #0f766e 16%, transparent), transparent 70%);
  pointer-events: none;
}

.pgw-hero-mark {
  display: grid;
  place-items: center;
  width: 3.15rem;
  height: 3.15rem;
  margin-bottom: 0.1rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, #0f766e 30%, var(--border));
  background: color-mix(in srgb, #0f766e 14%, var(--surface));
  color: #0f766e;
}

.pgw-kicker,
.pgw-section-kicker {
  margin: 0;
  color: #0f766e;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pgw-title {
  margin: 0;
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 1.3rem + 1.15vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.08;
  color: var(--ink);
}

.pgw-lead {
  margin: 0;
  max-width: 42rem;
  color: var(--ink-soft);
  font-size: clamp(0.9rem, 0.84rem + 0.22vw, 1.02rem);
  line-height: 1.55;
}

.pgw-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.25rem;
}

.pgw-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.2;
}

.pgw-chip.is-live {
  border-color: color-mix(in srgb, var(--success) 28%, transparent);
  background: var(--success-soft);
  color: var(--success);
}

.pgw-chip.is-soft {
  background: color-mix(in srgb, var(--ink) 4%, var(--surface));
  color: var(--ink-soft);
}

.pgw-live.stk-live-panel {
  margin: 0;
  padding: 1.15rem 1.2rem;
  border-radius: 18px;
  border: 1px solid var(--border-strong);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--sea-soft), transparent 55%),
    var(--surface-solid, var(--surface));
  box-shadow: var(--card-shadow);
}

.pgw-live .stk-live-panel-head h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.pgw-live .stk-live-meta {
  color: var(--ink-soft);
}

.pgw-live .stk-live-checks {
  display: grid;
  gap: 0.45rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
}

.pgw-live .stk-live-checks li {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.pgw-live .stk-live-checks li strong {
  color: var(--ink);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.pgw-live .stk-live-checks li.is-ok {
  border-color: color-mix(in srgb, var(--success) 28%, var(--border));
  background: var(--success-soft);
}

.pgw-live .stk-live-checks li.is-bad {
  border-color: color-mix(in srgb, var(--danger) 28%, var(--border));
  background: var(--danger-soft);
}

.pgw-live[data-status="ok"] {
  border-color: color-mix(in srgb, var(--success) 32%, var(--border));
}

.pgw-live[data-status="checking"],
.pgw-live[data-status="incomplete"],
.pgw-live[data-status="inactive"] {
  border-color: color-mix(in srgb, var(--signal) 28%, var(--border));
}

.pgw-live[data-status="invalid"],
.pgw-live[data-status="unreachable"],
.pgw-live[data-status="error"] {
  border-color: color-mix(in srgb, var(--danger) 32%, var(--border));
}

.pgw-banner.settings-policy-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
  padding: 0.95rem 1.05rem;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--signal) 28%, var(--border));
  background:
    linear-gradient(135deg, var(--signal-soft), transparent 55%),
    var(--surface-solid, var(--surface));
  box-shadow: var(--card-shadow);
}

.pgw-banner-ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--signal) 18%, var(--surface));
  color: var(--chip-signal-fg, #8a5a00);
}

.pgw-banner-body {
  min-width: 0;
  flex: 1;
}

.pgw-banner-body strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--ink);
  font-size: 0.88rem;
}

.pgw-banner-body p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.45;
}

.pgw-banner-line {
  display: block;
  margin-top: 0.35rem;
  word-break: break-all;
}

.pgw-banner-line code {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
}

.pgw-form.org-edit-form {
  gap: 1rem;
}

.pgw-card.org-edit-panel {
  position: relative;
  overflow: hidden;
  padding: 1.15rem 1.2rem 1.2rem;
  border-radius: 18px;
  border: 1px solid var(--border-strong);
  background:
    var(--card-shine),
    linear-gradient(165deg, color-mix(in srgb, var(--surface-solid) 94%, #0f766e 6%), var(--surface-solid));
  box-shadow: var(--card-shadow);
}

.pgw-card::after {
  display: none;
}

.pgw-activate.is-policy-on {
  border-color: color-mix(in srgb, #0f766e 38%, var(--border));
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, #0f766e 14%, transparent), transparent 55%),
    var(--surface-solid);
}

.pgw-card-head {
  margin-bottom: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border);
}

.pgw-card-head-main {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  min-width: 0;
}

.pgw-step {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, #0f766e 28%, var(--border));
  background: color-mix(in srgb, #0f766e 12%, var(--surface));
  color: #0f766e;
  font-size: 0.82rem;
  font-weight: 800;
}

.pgw-card-head h3 {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.pgw-card-head p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.45;
}

.pgw-switch {
  margin-top: 0.15rem;
}

.pgw-fields {
  display: grid;
  gap: 0.95rem;
}

.pgw-fields .form-group label {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink);
}

.pgw-fields .form-group input,
.pgw-fields .form-group select,
.pgw-fields .form-group textarea {
  width: 100%;
  min-height: 2.65rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--input-border, var(--border-strong));
  border-radius: 12px;
  background: var(--input-bg, var(--surface-solid));
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.pgw-fields .form-group input:focus,
.pgw-fields .form-group select:focus,
.pgw-fields .form-group textarea:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px color-mix(in srgb, #0f766e 18%, transparent);
  outline: none;
}

.pgw-readonly-block .company-settings-readonly {
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink) 3.5%, var(--surface));
  font-weight: 700;
}

.pgw-callback-hint .company-settings-inline-btn {
  max-width: 100%;
  white-space: normal;
  text-align: left;
  line-height: 1.35;
  border-radius: 999px;
  font-size: 0.76rem;
}

.pgw-actions.org-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  padding-top: 0.25rem;
}

.pgw-actions .btn {
  min-height: 2.75rem;
}

.pgw-actions .btn-primary {
  min-width: 11rem;
}

[data-theme="dark"] .pgw-hero {
  background:
    radial-gradient(ellipse 60% 95% at 50% -18%, color-mix(in srgb, #2dd4bf 22%, transparent), transparent 60%),
    radial-gradient(ellipse 42% 70% at 8% 110%, color-mix(in srgb, var(--signal) 14%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, #0f766e 12%, var(--surface-solid)), var(--surface-solid));
}

[data-theme="dark"] .pgw-hero-mark,
[data-theme="dark"] .pgw-kicker,
[data-theme="dark"] .pgw-section-kicker,
[data-theme="dark"] .pgw-step {
  color: #5eead4;
}

[data-theme="dark"] .pgw-hero-mark,
[data-theme="dark"] .pgw-step {
  border-color: color-mix(in srgb, #2dd4bf 28%, var(--border));
  background: color-mix(in srgb, #2dd4bf 12%, var(--surface));
}

[data-theme="dark"] .pgw-card.org-edit-panel {
  background:
    var(--card-shine),
    linear-gradient(165deg, color-mix(in srgb, #1a2630 88%, #0f766e 12%), var(--surface-solid));
}

@media (max-width: 720px) {
  .pgw-hero {
    border-radius: 20px;
    text-align: left;
    justify-items: start;
  }

  .pgw-meta {
    justify-content: flex-start;
  }

  .pgw-actions .btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  .pgw-live .stk-live-panel-head,
  .pgw-card .settings-policy-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pgw-fields .form-group input,
  .pgw-fields .form-group select {
    transition: none;
  }
}

/* ==========================================================================
   IT Support ? Company clients (modern polish)
   ========================================================================== */

.cc-page--modern {
  width: min(100%, 62rem);
  max-width: 62rem;
  gap: clamp(1rem, 2vw, 1.35rem);
  padding-bottom: 1.5rem;
}

.cc-page--modern .cc-hero {
  position: relative;
  overflow: hidden;
  align-items: center;
  gap: 1.15rem 1.5rem;
  padding: clamp(1.25rem, 2.6vw, 1.65rem) clamp(1.15rem, 2.4vw, 1.5rem);
  border-radius: 22px;
  background:
    radial-gradient(ellipse 55% 90% at 0% -10%, color-mix(in srgb, var(--sea) 24%, transparent), transparent 58%),
    radial-gradient(ellipse 40% 70% at 100% 110%, color-mix(in srgb, var(--signal) 14%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--sea) 7%, var(--surface-solid)), var(--surface-solid));
  box-shadow: var(--card-shadow);
}

.cc-page--modern .cc-hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -45% 55%;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sea) 16%, transparent), transparent 70%);
  pointer-events: none;
}

.cc-hero-main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 0.95rem;
  min-width: 0;
  flex: 1 1 auto;
}

.cc-hero-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--sea) 28%, var(--border));
  background: color-mix(in srgb, var(--sea) 12%, var(--surface));
  color: var(--sea-deep);
}

.cc-page--modern .cc-kicker {
  letter-spacing: 0.11em;
}

.cc-page--modern .cc-hero h2 {
  font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.95rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.cc-page--modern .cc-hero p {
  max-width: 40rem;
  font-weight: 500;
}

.cc-page--modern .cc-hero-stats {
  position: relative;
  z-index: 1;
  gap: 0.55rem;
}

.cc-page--modern .cc-stat {
  min-width: 5.75rem;
  padding: 0.8rem 0.95rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--sea-soft), transparent 55%),
    var(--surface-solid, var(--surface));
  box-shadow: var(--card-shadow);
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.cc-page--modern .cc-stat:hover {
  transform: translateY(-2px);
}

.cc-page--modern .cc-stat.tone-active {
  border-color: color-mix(in srgb, var(--success) 28%, var(--border));
  background:
    radial-gradient(120% 90% at 100% 0%, var(--success-soft), transparent 55%),
    var(--surface-solid, var(--surface));
}

.cc-page--modern .cc-stat.tone-suspended.is-hot {
  border-color: color-mix(in srgb, var(--danger) 28%, var(--border));
  background:
    radial-gradient(120% 90% at 100% 0%, var(--danger-soft), transparent 55%),
    var(--surface-solid, var(--surface));
}

.cc-page--modern .cc-stat strong {
  font-size: clamp(1.35rem, 1.2rem + 0.5vw, 1.65rem);
  letter-spacing: -0.03em;
}

.cc-search-wrap {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
}

.cc-page--modern .cc-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: stretch;
}

.cc-page--modern .cc-register-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.cc-page--modern .cc-empty-panel .btn {
  margin-top: 0.85rem;
}

.cc-search-ico {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  opacity: 0.7;
  pointer-events: none;
}

.cc-page--modern .cc-search {
  width: 100%;
  min-height: 2.85rem;
  padding: 0.8rem 1rem 0.8rem 2.75rem;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface-solid, var(--surface));
  box-shadow: var(--card-shadow);
  font-size: 0.95rem;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.cc-page--modern .cc-search:focus {
  transform: translateY(-1px);
  border-color: var(--sea);
  box-shadow: 0 0 0 4px var(--sea-soft), 0 12px 28px color-mix(in srgb, var(--sea) 10%, transparent);
}

.cc-page--modern .cc-grid {
  gap: 0.85rem;
}

.cc-page--modern .cc-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 1.05rem 1.1rem 1.1rem;
  background:
    var(--card-shine),
    linear-gradient(165deg, color-mix(in srgb, var(--surface-solid) 94%, var(--sea) 6%), var(--surface-solid));
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.cc-page--modern .cc-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--sea), var(--signal));
  opacity: 0.85;
  border-radius: 3px 0 0 3px;
}

.cc-page--modern .cc-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--sea) 38%, var(--border));
  box-shadow: 0 16px 36px color-mix(in srgb, var(--ink) 10%, transparent);
}

.cc-page--modern .cc-card.is-suspended {
  border-color: color-mix(in srgb, var(--danger) 22%, var(--border));
}

.cc-page--modern .cc-card.is-suspended::before {
  background: linear-gradient(180deg, var(--danger), color-mix(in srgb, var(--danger) 40%, var(--signal)));
}

.cc-page--modern .cc-identity img,
.cc-page--modern .cc-identity span[aria-hidden="true"] {
  width: 3.15rem;
  height: 3.15rem;
  border-radius: 14px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sea) 14%, transparent);
}

.cc-page--modern .cc-identity span[aria-hidden="true"] {
  background: linear-gradient(145deg, var(--sea), var(--sea-deep));
  color: #fff;
}

.cc-page--modern .cc-card h3 {
  font-size: 1.08rem;
  font-weight: 800;
}

.cc-page--modern .cc-meta {
  padding: 0.75rem 0.85rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
}

.cc-page--modern .cc-metrics span {
  padding: 0.38rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--sea) 16%, var(--border));
  background: color-mix(in srgb, var(--sea) 8%, var(--surface));
}

.cc-page--modern .cc-actions {
  gap: 0.5rem;
}

.cc-page--modern .cc-action {
  min-height: 2.35rem;
  border-radius: 11px;
  font-weight: 700;
}

.cc-page--modern .cc-action-warn {
  border-color: color-mix(in srgb, #b45309 28%, var(--border));
  background: color-mix(in srgb, #b45309 8%, var(--surface));
}

.cc-page--modern .cc-action-success {
  border-color: color-mix(in srgb, var(--success) 28%, var(--border));
  background: color-mix(in srgb, var(--success) 8%, var(--surface));
}

.cc-page--modern .cc-action-danger {
  border-color: color-mix(in srgb, var(--danger) 28%, var(--border));
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

.cc-empty-panel {
  display: grid;
  gap: 0.25rem;
  justify-items: center;
  padding: 1.6rem 1.2rem;
  border: 1.5px dashed color-mix(in srgb, var(--sea) 28%, var(--border-strong));
  border-radius: 18px;
  background:
    radial-gradient(ellipse 80% 80% at 50% 0%, var(--sea-soft), transparent 65%),
    color-mix(in srgb, var(--surface-2) 85%, transparent);
}

.cc-empty-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.cc-empty-panel p {
  margin: 0;
  color: var(--ink-soft);
  font-weight: 600;
}

.cc-page--modern .cc-edit-panel.role-modal-panel {
  border-radius: 18px 18px 0 0;
  border: 1px solid var(--border-strong);
  background: var(--surface-solid, var(--surface));
}

[data-theme="dark"] .cc-page--modern .cc-hero {
  background:
    radial-gradient(ellipse 55% 90% at 0% -10%, color-mix(in srgb, var(--sea) 26%, transparent), transparent 58%),
    radial-gradient(ellipse 40% 70% at 100% 110%, color-mix(in srgb, var(--signal) 12%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--sea) 10%, var(--surface-solid)), var(--surface-solid));
}

[data-theme="dark"] .cc-hero-mark {
  color: var(--sea);
}

@media (max-width: 840px) {
  .cc-page--modern .cc-hero {
    flex-direction: column;
    align-items: stretch;
  }

  .cc-page--modern .cc-hero-stats {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cc-page--modern .cc-stat {
    min-width: 0;
    text-align: center;
  }
}

@media (max-width: 560px) {
  .cc-page--modern .cc-hero-stats {
    grid-template-columns: 1fr;
  }

  .cc-page--modern .cc-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .cc-page--modern .cc-action,
  .cc-page--modern .cc-actions form .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-page--modern .cc-stat,
  .cc-page--modern .cc-card,
  .cc-page--modern .cc-search {
    transition: none;
  }

  .cc-page--modern .cc-stat:hover,
  .cc-page--modern .cc-card:hover,
  .cc-page--modern .cc-search:focus {
    transform: none;
  }
}

/* ==========================================================================
   IT Support ? Human resources (modern polish)
   ========================================================================== */

.hr-page {
  width: min(100%, 64rem);
  max-width: 64rem;
  margin-inline: auto;
  display: grid;
  gap: clamp(1rem, 2vw, 1.35rem);
  padding-bottom: 1.5rem;
}

.hr-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.15rem 1.5rem;
  padding: clamp(1.25rem, 2.6vw, 1.65rem) clamp(1.15rem, 2.4vw, 1.5rem);
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  background:
    radial-gradient(ellipse 55% 90% at 0% -10%, color-mix(in srgb, var(--sea) 24%, transparent), transparent 58%),
    radial-gradient(ellipse 40% 70% at 100% 110%, color-mix(in srgb, var(--signal) 14%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--sea) 7%, var(--surface-solid)), var(--surface-solid));
  box-shadow: var(--card-shadow);
}

.hr-hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -45% 55%;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sea) 16%, transparent), transparent 70%);
  pointer-events: none;
}

.hr-hero-main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 0.95rem;
  min-width: 0;
  flex: 1 1 auto;
}

.hr-hero-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--sea) 28%, var(--border));
  background: color-mix(in srgb, var(--sea) 12%, var(--surface));
  color: var(--sea-deep);
}

.hr-kicker {
  margin: 0 0 0.25rem;
  color: var(--sea-deep);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.hr-hero-copy h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.95rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--ink);
}

.hr-hero-copy p {
  margin: 0.35rem 0 0;
  max-width: 40rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.5;
}

.hr-hero-stats {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.hr-stat {
  min-width: 5.5rem;
  padding: 0.8rem 0.95rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--sea-soft), transparent 55%),
    var(--surface-solid, var(--surface));
  box-shadow: var(--card-shadow);
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.hr-stat:hover {
  transform: translateY(-2px);
}

.hr-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.15rem + 0.45vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}

.hr-stat span {
  display: block;
  margin-top: 0.3rem;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hr-stat.tone-active {
  border-color: color-mix(in srgb, var(--success) 28%, var(--border));
  background:
    radial-gradient(120% 90% at 100% 0%, var(--success-soft), transparent 55%),
    var(--surface-solid, var(--surface));
}

.hr-stat.tone-pending.is-soft {
  border-color: color-mix(in srgb, var(--signal) 28%, var(--border));
  background:
    radial-gradient(120% 90% at 100% 0%, var(--signal-soft), transparent 55%),
    var(--surface-solid, var(--surface));
}

.hr-stat.tone-suspended.is-hot {
  border-color: color-mix(in srgb, var(--danger) 28%, var(--border));
  background:
    radial-gradient(120% 90% at 100% 0%, var(--danger-soft), transparent 55%),
    var(--surface-solid, var(--surface));
}

.hr-toolbar {
  min-width: 0;
}

.hr-search-wrap {
  position: relative;
  width: 100%;
}

.hr-search-ico {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  opacity: 0.7;
  pointer-events: none;
  z-index: 1;
}

.hr-page .hr-search.org-search-input,
.hr-page .hr-search {
  width: 100%;
  max-width: none;
  min-height: 2.85rem;
  padding: 0.8rem 1rem 0.8rem 2.75rem;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface-solid, var(--surface));
  box-shadow: var(--card-shadow);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.hr-page .hr-search:focus {
  outline: none;
  transform: translateY(-1px);
  border-color: var(--sea);
  box-shadow: 0 0 0 4px var(--sea-soft), 0 12px 28px color-mix(in srgb, var(--sea) 10%, transparent);
}

.hr-table-shell.org-table-shell {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: var(--surface-solid, var(--surface));
  box-shadow: var(--card-shadow);
}

.hr-table.org-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.hr-table thead th {
  padding: 0.85rem 1rem;
  background: color-mix(in srgb, var(--surface-2) 92%, var(--sea) 8%);
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}

.hr-table tbody td {
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
}

.hr-table tbody tr:last-child td {
  border-bottom: 0;
}

.hr-table tbody tr.hr-row {
  transition: background 0.15s ease;
}

.hr-table tbody tr.hr-row:hover td {
  background: color-mix(in srgb, var(--sea) 7%, var(--surface));
}

.hr-table tbody tr.is-suspended td {
  background: color-mix(in srgb, var(--danger) 4%, transparent);
}

.hr-table tbody tr.is-pending td {
  background: color-mix(in srgb, var(--signal) 5%, transparent);
}

.hr-page .org-identity img,
.hr-page .org-identity span[aria-hidden="true"] {
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 12px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sea) 14%, transparent);
}

.hr-page .org-identity span[aria-hidden="true"] {
  background: linear-gradient(145deg, var(--sea), var(--sea-deep));
  color: #fff;
  font-weight: 800;
}

.hr-page .org-owner strong {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.hr-page .org-owner small {
  color: var(--ink-soft);
  font-weight: 600;
}

.hr-phone {
  color: var(--sea-deep);
  font-weight: 700;
  text-decoration: none;
}

.hr-phone:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.hr-role {
  display: inline-flex;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--sea) 18%, var(--border));
  background: color-mix(in srgb, var(--sea) 8%, var(--surface));
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.hr-page .org-actions-icons .org-action-icon {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.hr-empty {
  display: grid;
  gap: 0.25rem;
  justify-items: center;
  padding: 1.6rem 1.2rem;
  border: 1.5px dashed color-mix(in srgb, var(--sea) 28%, var(--border-strong));
  border-radius: 18px;
  background:
    radial-gradient(ellipse 80% 80% at 50% 0%, var(--sea-soft), transparent 65%),
    color-mix(in srgb, var(--surface-2) 85%, transparent);
  text-align: center;
}

.hr-empty-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.hr-empty p {
  margin: 0;
  color: var(--ink-soft);
  font-weight: 600;
}

[data-theme="dark"] .hr-hero {
  background:
    radial-gradient(ellipse 55% 90% at 0% -10%, color-mix(in srgb, var(--sea) 26%, transparent), transparent 58%),
    radial-gradient(ellipse 40% 70% at 100% 110%, color-mix(in srgb, var(--signal) 12%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--sea) 10%, var(--surface-solid)), var(--surface-solid));
}

[data-theme="dark"] .hr-hero-mark,
[data-theme="dark"] .hr-kicker,
[data-theme="dark"] .hr-phone {
  color: var(--sea);
}

@media (max-width: 900px) {
  .hr-hero {
    flex-direction: column;
    align-items: stretch;
  }

  .hr-hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hr-stat {
    min-width: 0;
    text-align: center;
  }

  .hr-table thead {
    display: none;
  }

  .hr-table,
  .hr-table tbody,
  .hr-table tr,
  .hr-table td {
    display: block;
    width: 100%;
  }

  .hr-table tbody {
    display: grid;
    gap: 0.75rem;
    padding: 0.75rem;
  }

  .hr-table tbody tr.hr-row {
    display: grid;
    gap: 0.65rem;
    padding: 0.95rem 1rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface-solid, var(--surface));
    box-shadow: var(--card-shadow);
  }

  .hr-table tbody tr.hr-row td {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 0.5rem;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent !important;
  }

  .hr-table tbody tr.hr-row td::before {
    content: attr(data-label);
    color: var(--ink-soft);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .hr-table tbody tr.hr-row td[data-label="Employee"] {
    grid-template-columns: 1fr;
  }

  .hr-table tbody tr.hr-row td[data-label="Employee"]::before {
    display: none;
  }

  .hr-table tbody tr.hr-row td[data-label="Actions"] {
    grid-template-columns: 1fr;
    padding-top: 0.35rem;
    border-top: 1px solid var(--border);
  }

  .hr-table tbody tr.hr-row td[data-label="Actions"]::before {
    display: none;
  }

  .hr-page .org-actions-icons {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 560px) {
  .hr-hero-stats {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hr-stat,
  .hr-page .hr-search,
  .hr-table tbody tr.hr-row {
    transition: none;
  }

  .hr-stat:hover,
  .hr-page .hr-search:focus {
    transform: none;
  }
}

/* ==========================================================================
   Customer Support role ? shared modern shell
   ========================================================================== */

.cs-role-page {
  width: min(100%, 72rem);
  max-width: 72rem;
  margin-inline: auto;
  display: grid;
  gap: clamp(1rem, 2vw, 1.35rem);
  padding-bottom: 1.5rem;
}

.cs-role-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.15rem 1.5rem;
  padding: clamp(1.25rem, 2.6vw, 1.65rem) clamp(1.15rem, 2.4vw, 1.5rem);
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  background:
    radial-gradient(ellipse 55% 90% at 0% -10%, color-mix(in srgb, var(--sea) 24%, transparent), transparent 58%),
    radial-gradient(ellipse 40% 70% at 100% 110%, color-mix(in srgb, var(--signal) 14%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--sea) 7%, var(--surface-solid)), var(--surface-solid));
  box-shadow: var(--card-shadow);
}

.cs-role-hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -45% 55%;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sea) 16%, transparent), transparent 70%);
  pointer-events: none;
}

.cs-role-hero-main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 0.95rem;
  min-width: 0;
  flex: 1 1 auto;
}

.cs-role-hero-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--sea) 28%, var(--border));
  background: color-mix(in srgb, var(--sea) 12%, var(--surface));
  color: var(--sea-deep);
}

.cs-role-kicker {
  margin: 0 0 0.25rem;
  color: var(--sea-deep);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.cs-role-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.15rem + 0.85vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--ink);
}

.cs-role-lead {
  margin: 0.35rem 0 0;
  max-width: 42rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.5;
}

.cs-role-lead a {
  color: var(--sea-deep);
  font-weight: 700;
  text-decoration: none;
}

.cs-role-lead a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.cs-role-meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}

.cs-role-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--ink) 4%, var(--surface));
}

.cs-role-chip strong {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
}

.cs-role-chip.is-live {
  border-color: color-mix(in srgb, var(--success) 28%, transparent);
  background: var(--success-soft);
  color: var(--success);
}

.cs-role-chip.is-live strong {
  color: var(--success);
}

.cs-role-chip.is-soft {
  background: color-mix(in srgb, var(--ink) 4%, var(--surface));
  color: var(--ink-soft);
}

.cs-role-chip.is-signal {
  border-color: color-mix(in srgb, var(--signal) 32%, transparent);
  background: var(--chip-signal-bg);
  color: var(--chip-signal-fg);
}

.cs-role-chip.is-signal strong {
  color: var(--chip-signal-fg);
}

.cs-role-notice {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--signal) 35%, var(--border));
  border-radius: 16px;
  background:
    linear-gradient(
      120deg,
      color-mix(in srgb, var(--signal) 14%, var(--surface-solid)),
      color-mix(in srgb, var(--sea) 8%, var(--surface-solid))
    );
  color: inherit;
  text-decoration: none;
  box-shadow: var(--card-shadow);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.cs-role-notice:hover,
.cs-role-notice:focus-visible {
  border-color: color-mix(in srgb, var(--signal) 55%, var(--border));
  transform: translateY(-1px);
}

.cs-role-notice-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--signal) 22%, transparent);
  color: var(--chip-signal-fg);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}

.cs-role-notice-copy {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 auto;
}

.cs-role-notice-copy strong {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.cs-role-notice-copy span {
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.4;
}

.cs-role-notice-cta {
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--chip-signal-fg);
  white-space: nowrap;
}

.cs-role-card-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1;
  min-width: 1.45rem;
  height: 1.45rem;
  padding: 0 0.4rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--signal);
  color: #1a1408;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

.cs-role-card.has-badge {
  border-color: color-mix(in srgb, var(--signal) 28%, var(--border));
}

.cs-role-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 1rem;
  padding: 1.15rem 1.2rem 1.25rem;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background:
    var(--card-shine),
    linear-gradient(165deg, color-mix(in srgb, var(--surface-solid) 94%, var(--sea) 6%), var(--surface-solid));
  box-shadow: var(--card-shadow);
}

.cs-role-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--sea), var(--signal));
  opacity: 0.85;
  border-radius: 3px 0 0 3px;
}

.cs-role-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}

.cs-role-panel-head h3 {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.cs-role-panel-head p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.45;
}

.cs-role-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.cs-role-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 0.55rem;
  min-height: 100%;
  padding: 1.1rem 1.1rem 1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    radial-gradient(120% 90% at 100% 0%, var(--sea-soft), transparent 55%),
    var(--surface-solid, var(--surface));
  box-shadow: var(--card-shadow);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.cs-role-card:hover,
.cs-role-card:focus-visible {
  border-color: color-mix(in srgb, var(--sea) 42%, var(--border));
  transform: translateY(-2px);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--ink) 10%, transparent);
  outline: none;
}

.cs-role-card-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--sea) 24%, var(--border));
  background: color-mix(in srgb, var(--sea) 12%, var(--surface));
  color: var(--sea-deep);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.cs-role-card-label {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
}

.cs-role-card-hint {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.45;
}

.cs-role-card-cta {
  margin-top: 0.15rem;
  color: var(--sea-deep);
  font-size: 0.8rem;
  font-weight: 800;
}

/* Technician dashboard ? field-work accent on the shared role shell */
.tech-role-page .cs-role-hero {
  background:
    radial-gradient(ellipse 55% 90% at 0% -10%, color-mix(in srgb, var(--sea) 22%, transparent), transparent 58%),
    radial-gradient(ellipse 45% 75% at 100% 120%, color-mix(in srgb, var(--signal) 18%, transparent), transparent 55%),
    linear-gradient(165deg, color-mix(in srgb, var(--sea) 8%, var(--surface-solid)), var(--surface-solid));
}

.tech-role-page .cs-role-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tech-role-page .cs-role-card {
  min-height: 10.5rem;
  align-content: start;
}

.tech-role-page .cs-role-card-cta {
  margin-top: auto;
  padding-top: 0.35rem;
}

[data-theme="dark"] .tech-role-page .cs-role-hero {
  background:
    radial-gradient(ellipse 55% 90% at 0% -10%, color-mix(in srgb, var(--sea) 28%, transparent), transparent 58%),
    radial-gradient(ellipse 45% 75% at 100% 120%, color-mix(in srgb, var(--signal) 14%, transparent), transparent 55%),
    linear-gradient(165deg, color-mix(in srgb, var(--sea) 12%, var(--surface-solid)), var(--surface-solid));
}

@media (max-width: 960px) {
  .tech-role-page .cs-role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .tech-role-page .cs-role-grid {
    grid-template-columns: 1fr;
  }

  .tech-role-page .cs-role-card {
    min-height: 0;
  }
}

.cs-role-search-bar.org-search-bar::before {
  display: none;
}

.cs-role-search-wrap {
  position: relative;
  width: 100%;
}

.cs-role-search-ico {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  opacity: 0.7;
  pointer-events: none;
  z-index: 1;
}

.cs-role-page .cs-role-search-wrap .org-search-input,
.cs-role-page .hr-search,
.cs-role-page .org-search-input {
  width: 100%;
  max-width: none;
  min-height: 2.85rem;
  padding: 0.8rem 1rem 0.8rem 2.75rem;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface-solid, var(--surface));
  box-shadow: var(--card-shadow);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.cs-role-page .cs-role-search-wrap .org-search-input:focus,
.cs-role-page .org-search-input:focus {
  outline: none;
  transform: translateY(-1px);
  border-color: var(--sea);
  box-shadow: 0 0 0 4px var(--sea-soft), 0 12px 28px color-mix(in srgb, var(--sea) 10%, transparent);
}

.cs-role-page .org-search-bar:not(:has(.cs-role-search-wrap)) .org-search-input {
  padding-left: 2.75rem;
}

.cs-role-page .org-table-shell {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: var(--surface-solid, var(--surface));
  box-shadow: var(--card-shadow);
}

.cs-role-page .org-table thead th {
  background: color-mix(in srgb, var(--surface-2) 92%, var(--sea) 8%);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.cs-role-page .org-table tbody tr:hover td {
  background: color-mix(in srgb, var(--sea) 7%, var(--surface));
}

.cs-role-page .org-identity span[aria-hidden="true"] {
  background: linear-gradient(145deg, var(--sea), var(--sea-deep));
  color: #fff;
  border-radius: 12px;
}

.cs-role-page .org-action-success.btn,
.cs-role-page .lead-ticket-actions .org-action-success,
.cs-role-page .org-actions .org-action-success:not(.org-action-icon) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding: 0.4rem 0.85rem;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--success) 28%, var(--border));
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
  color: var(--success);
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
}

.cs-role-empty {
  display: grid;
  gap: 0.25rem;
  justify-items: center;
  padding: 1.5rem 1.1rem;
  border: 1.5px dashed color-mix(in srgb, var(--sea) 28%, var(--border-strong));
  border-radius: 16px;
  background:
    radial-gradient(ellipse 80% 80% at 50% 0%, var(--sea-soft), transparent 65%),
    color-mix(in srgb, var(--surface-2) 85%, transparent);
  text-align: center;
}

.cs-role-empty-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.cs-role-empty p {
  margin: 0;
  color: var(--ink-soft);
  font-weight: 600;
}

.cs-role-page .empty,
.cs-role-page .org-empty {
  border-radius: 14px;
  border: 1.5px dashed color-mix(in srgb, var(--sea) 24%, var(--border));
  background: color-mix(in srgb, var(--surface-2) 85%, transparent);
  padding: 1.2rem 1rem;
  text-align: center;
}

[data-theme="dark"] .cs-role-hero {
  background:
    radial-gradient(ellipse 55% 90% at 0% -10%, color-mix(in srgb, var(--sea) 26%, transparent), transparent 58%),
    radial-gradient(ellipse 40% 70% at 100% 110%, color-mix(in srgb, var(--signal) 12%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--sea) 10%, var(--surface-solid)), var(--surface-solid));
}

[data-theme="dark"] .cs-role-hero-mark,
[data-theme="dark"] .cs-role-kicker,
[data-theme="dark"] .cs-role-card-cta,
[data-theme="dark"] .cs-role-lead a {
  color: var(--sea);
}

[data-theme="dark"] .cs-role-card-index {
  color: var(--sea);
  border-color: color-mix(in srgb, var(--sea) 28%, var(--border));
  background: color-mix(in srgb, var(--sea) 14%, var(--surface));
}

[data-theme="dark"] .cs-role-notice {
  background:
    linear-gradient(
      120deg,
      color-mix(in srgb, var(--signal) 18%, var(--surface-solid)),
      color-mix(in srgb, var(--sea) 12%, var(--surface-solid))
    );
}

@media (max-width: 960px) {
  .cs-role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 840px) {
  .cs-role-hero {
    flex-direction: column;
    align-items: stretch;
  }

  .cs-role-meta {
    justify-content: flex-start;
  }

  .cs-role-notice {
    flex-wrap: wrap;
  }

  .cs-role-notice-cta {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .cs-role-grid {
    grid-template-columns: 1fr;
  }

  .cs-role-card:hover,
  .cs-role-card:focus-visible {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-role-card,
  .cs-role-page .org-search-input {
    transition: none;
  }

  .cs-role-card:hover,
  .cs-role-page .org-search-input:focus {
    transform: none;
  }
}

/* ==========================================================================
   Customer Support ? ISP clients (card workspace)
   ========================================================================== */

.cs-isp-page {
  width: min(100%, 64rem);
  max-width: 64rem;
  margin-inline: auto;
  display: grid;
  gap: clamp(1rem, 2vw, 1.35rem);
  padding-bottom: 1.75rem;
}

.cs-isp-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.15rem 1.5rem;
  padding: clamp(1.35rem, 2.8vw, 1.85rem) clamp(1.2rem, 2.5vw, 1.65rem);
  border: 1px solid var(--border-strong);
  border-radius: 24px;
  background:
    radial-gradient(ellipse 58% 95% at 0% -12%, color-mix(in srgb, var(--sea) 26%, transparent), transparent 58%),
    radial-gradient(ellipse 42% 70% at 100% 112%, color-mix(in srgb, var(--signal) 16%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--sea) 8%, var(--surface-solid)), var(--surface-solid));
  box-shadow: var(--card-shadow);
}

.cs-isp-hero::after {
  content: "";
  position: absolute;
  inset: auto -12% -48% 52%;
  width: 14rem;
  height: 14rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sea) 18%, transparent), transparent 70%);
  pointer-events: none;
}

.cs-isp-hero-main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-width: 0;
  flex: 1 1 auto;
}

.cs-isp-hero-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 15px;
  border: 1px solid color-mix(in srgb, var(--sea) 30%, var(--border));
  background: color-mix(in srgb, var(--sea) 14%, var(--surface));
  color: var(--sea-deep);
}

.cs-isp-kicker {
  margin: 0 0 0.28rem;
  color: var(--sea-deep);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cs-isp-hero-copy h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 1.25rem + 1vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.08;
  color: var(--ink);
}

.cs-isp-hero-copy p {
  margin: 0.4rem 0 0;
  max-width: 38rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.5;
}

.cs-isp-stats {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.cs-isp-stat {
  min-width: 5.75rem;
  padding: 0.85rem 1rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--sea-soft), transparent 55%),
    var(--surface-solid, var(--surface));
  box-shadow: var(--card-shadow);
  transition: transform 0.18s ease;
}

.cs-isp-stat:hover {
  transform: translateY(-2px);
}

.cs-isp-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.2rem + 0.5vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}

.cs-isp-stat span {
  display: block;
  margin-top: 0.32rem;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cs-isp-stat.tone-active {
  border-color: color-mix(in srgb, var(--success) 30%, var(--border));
  background:
    radial-gradient(120% 90% at 100% 0%, var(--success-soft), transparent 55%),
    var(--surface-solid, var(--surface));
}

.cs-isp-stat.tone-suspended.is-hot {
  border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
  background:
    radial-gradient(120% 90% at 100% 0%, var(--danger-soft), transparent 55%),
    var(--surface-solid, var(--surface));
}

.cs-isp-toolbar {
  min-width: 0;
}

.cs-isp-search-wrap {
  position: relative;
  width: 100%;
}

.cs-isp-search-ico {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  opacity: 0.72;
  pointer-events: none;
}

.cs-isp-search {
  width: 100%;
  min-height: 3rem;
  padding: 0.85rem 1.1rem 0.85rem 2.85rem;
  border: 1.5px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-solid, var(--surface));
  box-shadow: var(--card-shadow);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.cs-isp-search:focus {
  transform: translateY(-1px);
  border-color: var(--sea);
  box-shadow: 0 0 0 4px var(--sea-soft), 0 14px 30px color-mix(in srgb, var(--sea) 12%, transparent);
}

.cs-isp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

.cs-isp-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 0.95rem;
  padding: 1.15rem 1.2rem 1.15rem;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  background:
    var(--card-shine),
    linear-gradient(165deg, color-mix(in srgb, var(--surface-solid) 94%, var(--sea) 6%), var(--surface-solid));
  box-shadow: var(--card-shadow);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.cs-isp-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--sea), var(--signal));
  opacity: 0.9;
  border-radius: 3px 0 0 3px;
}

.cs-isp-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--sea) 40%, var(--border));
  box-shadow: 0 18px 40px color-mix(in srgb, var(--ink) 11%, transparent);
}

.cs-isp-card.is-suspended {
  border-color: color-mix(in srgb, var(--danger) 24%, var(--border));
}

.cs-isp-card.is-suspended::before {
  background: linear-gradient(180deg, var(--danger), color-mix(in srgb, var(--danger) 45%, var(--signal)));
}

.cs-isp-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
}

.cs-isp-identity {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  min-width: 0;
}

.cs-isp-identity img,
.cs-isp-identity span[aria-hidden="true"] {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 14px;
  flex: 0 0 auto;
  object-fit: cover;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sea) 16%, transparent);
}

.cs-isp-identity span[aria-hidden="true"] {
  display: inline-grid;
  place-items: center;
  background: linear-gradient(145deg, var(--sea), var(--sea-deep));
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
}

.cs-isp-identity h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.cs-isp-identity p {
  margin: 0.25rem 0 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  font-weight: 600;
}

.cs-isp-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 0.9rem;
  margin: 0;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
}

.cs-isp-meta dt {
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cs-isp-meta dd {
  margin: 0.2rem 0 0;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.cs-isp-meta a {
  color: var(--sea-deep);
  text-decoration: none;
}

.cs-isp-meta a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.cs-isp-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.cs-isp-metrics span {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.38rem 0.7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--sea) 18%, var(--border));
  background: color-mix(in srgb, var(--sea) 9%, var(--surface));
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 700;
}

.cs-isp-metrics strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.95rem;
}

.cs-isp-actions {
  display: flex;
  justify-content: stretch;
}

.cs-isp-actions form {
  margin: 0;
  width: 100%;
}

.cs-isp-portal-btn {
  width: 100%;
  min-height: 2.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border-radius: 12px;
  font-weight: 800;
}

.cs-isp-empty {
  display: grid;
  gap: 0.3rem;
  justify-items: center;
  padding: 1.75rem 1.25rem;
  border: 1.5px dashed color-mix(in srgb, var(--sea) 28%, var(--border-strong));
  border-radius: 18px;
  background:
    radial-gradient(ellipse 80% 80% at 50% 0%, var(--sea-soft), transparent 65%),
    color-mix(in srgb, var(--surface-2) 85%, transparent);
  text-align: center;
}

.cs-isp-empty-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.cs-isp-empty p {
  margin: 0;
  color: var(--ink-soft);
  font-weight: 600;
}

[data-theme="dark"] .cs-isp-hero {
  background:
    radial-gradient(ellipse 58% 95% at 0% -12%, color-mix(in srgb, var(--sea) 28%, transparent), transparent 58%),
    radial-gradient(ellipse 42% 70% at 100% 112%, color-mix(in srgb, var(--signal) 14%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--sea) 12%, var(--surface-solid)), var(--surface-solid));
}

[data-theme="dark"] .cs-isp-hero-mark,
[data-theme="dark"] .cs-isp-kicker,
[data-theme="dark"] .cs-isp-meta a {
  color: var(--sea);
}

@media (min-width: 900px) {
  .cs-isp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 840px) {
  .cs-isp-hero {
    flex-direction: column;
    align-items: stretch;
  }

  .cs-isp-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cs-isp-stat {
    min-width: 0;
    text-align: center;
  }

  .cs-isp-meta {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .cs-isp-stats {
    grid-template-columns: 1fr;
  }

  .cs-isp-card:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-isp-stat,
  .cs-isp-card,
  .cs-isp-search {
    transition: none;
  }

  .cs-isp-stat:hover,
  .cs-isp-card:hover,
  .cs-isp-search:focus {
    transform: none;
  }
}

/* ==========================================================================
   Customer Support ? clean list pages (PC/tablet list, mobile cards)
   ========================================================================== */

.cs-list-page {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 1.25rem;
  background: var(--surface-solid, var(--surface));
  box-shadow: var(--card-shadow);
}

.cs-list-page > .cs-workspace-nav {
  border-bottom: 1px solid var(--border);
}

.cs-list-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: clamp(1.15rem, 2.4vw, 1.55rem) clamp(1.05rem, 2.2vw, 1.45rem);
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(ellipse 55% 90% at 0% -10%, color-mix(in srgb, var(--sea) 22%, transparent), transparent 58%),
    radial-gradient(ellipse 40% 70% at 100% 110%, color-mix(in srgb, var(--signal) 12%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--sea) 6%, var(--surface-solid, var(--surface))), var(--surface-solid, var(--surface)));
}

.cs-list-page > .cs-list-toolbar,
.cs-list-page > .cs-list-shell,
.cs-list-page > .cs-list-empty,
.cs-list-page > .cs-list-section {
  margin: clamp(0.95rem, 2vw, 1.2rem) clamp(1.05rem, 2.2vw, 1.45rem);
}

.cs-list-page > .cs-list-toolbar + .cs-list-shell,
.cs-list-page > .cs-list-toolbar + .cs-list-empty,
.cs-list-page > .cs-list-section + .cs-list-section {
  margin-top: 0;
}

.cs-list-page > .cs-list-shell,
.cs-list-page > .cs-list-empty,
.cs-list-page > .cs-list-section:last-child {
  margin-bottom: clamp(1.05rem, 2.2vw, 1.45rem);
}

.cs-list-section {
  display: grid;
  gap: 0.85rem;
  padding: 1rem 1.05rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--surface-solid, var(--surface)) 94%, var(--sea) 6%), var(--surface-solid, var(--surface)));
}

.cs-list-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem 1rem;
}

.cs-list-section-head h3 {
  margin: 0 0 0.2rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.cs-list-section-head p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.4;
}

.cs-list-section > .cs-list-shell,
.cs-list-section > .cs-list-empty {
  margin: 0;
}

.cs-list-section > .cs-list-empty {
  padding: 1.5rem 1rem;
}

.cs-list-head-copy {
  min-width: 0;
}

.cs-list-kicker {
  margin: 0 0 0.2rem;
  color: var(--sea-deep);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cs-list-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--ink);
}

.cs-list-lead {
  margin: 0.35rem 0 0;
  max-width: 46rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.5;
}

.cs-list-count {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-solid, var(--surface)) 88%, transparent);
  box-shadow: var(--card-shadow);
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

.cs-list-count strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
}

.cs-list-count span {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 700;
}

.cs-list-count-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.cs-list-count.is-emphasis {
  border-color: color-mix(in srgb, var(--sea) 35%, var(--border));
  background: color-mix(in srgb, var(--sea-soft, var(--sea)) 55%, var(--surface-solid, var(--surface)));
}

.cs-list-count.is-emphasis strong {
  color: var(--sea-deep, var(--sea));
}

.cs-installed-page .cs-list-section-head h3 {
  letter-spacing: -0.01em;
}

.cs-installed-page .cs-list-actions .cs-list-btn {
  min-width: 5.25rem;
  justify-content: center;
}

.cs-tech-alloc-form-panel {
  margin-bottom: 1.5rem;
}

.cs-tech-alloc-form {
  margin-top: 0.85rem;
}

.cs-tech-alloc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: 0.85rem 1rem;
  align-items: end;
}

.cs-tech-alloc-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.cs-tech-alloc-field label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-2);
}

.cs-tech-alloc-actions {
  display: flex;
  align-items: flex-end;
}

.cs-tech-alloc-row-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin: 0;
  min-width: 12rem;
}

.cs-tech-alloc-row-form .form-control {
  flex: 1 1 8rem;
  min-height: 2.1rem;
  padding: 0.35rem 0.55rem;
  font-size: 0.82rem;
}

.cs-tech-alloc-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  justify-content: flex-end;
}

.cs-tech-alloc-reassign {
  margin: 0;
  min-width: 9.5rem;
}

.cs-tech-alloc-reassign .form-control {
  min-height: 2.1rem;
  padding: 0.35rem 0.55rem;
  font-size: 0.82rem;
}

.cs-list-empty--inset {
  margin-top: 0.75rem;
  padding: 1rem 1.1rem;
  border: 1px dashed color-mix(in srgb, var(--border) 90%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 70%, transparent);
}

@media (max-width: 900px) {
  .cs-tech-alloc-grid {
    grid-template-columns: 1fr;
  }

  .cs-tech-alloc-actions {
    justify-content: stretch;
  }

  .cs-tech-alloc-actions .btn {
    width: 100%;
  }
}

.cs-list-head-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.85rem;
}

/* Raise fault ticket modal ? sheet layout aligned with allocate / PPPoE modals */
.fault-ticket-modal.pppoe-modal .fault-ticket-panel {
  width: min(100%, 34rem);
  max-height: min(94dvh, 42rem);
  background:
    radial-gradient(ellipse 75% 48% at 100% -8%, rgba(232, 163, 23, 0.22), transparent 55%),
    radial-gradient(ellipse 55% 42% at -8% 8%, rgba(220, 90, 50, 0.16), transparent 50%),
    linear-gradient(185deg, #1a3742 0%, #12252e 45%, #0d171d 100%);
}

.fault-ticket-kicker {
  border-color: rgba(232, 163, 23, 0.42);
  background: rgba(232, 163, 23, 0.16);
  color: #f3c35a;
}

.fault-ticket-body {
  display: grid;
  gap: 1.15rem;
  padding: 1rem 1.15rem 0.35rem;
}

@media (min-width: 40rem) {
  .fault-ticket-modal .fault-ticket-body {
    padding: 1.15rem 1.4rem 0.45rem;
  }

  .fault-ticket-modal .fault-ticket-panel {
    border-radius: 22px;
  }
}

.fault-ticket-step {
  display: grid;
  gap: 0.75rem;
  padding: 0.95rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(8, 16, 22, 0.28);
}

.fault-ticket-step-label {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.fault-ticket-step-num {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  border: 1px solid rgba(232, 163, 23, 0.4);
  background: rgba(232, 163, 23, 0.14);
  color: #f3c35a;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

.fault-ticket-step-label h3 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(245, 250, 252, 0.96);
}

.fault-ticket-step-label p {
  margin: 0.18rem 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(232, 242, 244, 0.58);
}

.fault-ticket-field {
  display: grid;
  gap: 0.35rem;
}

.fault-ticket-field label {
  font-size: 0.78rem;
  font-weight: 650;
  color: rgba(232, 242, 244, 0.72);
}

.fault-ticket-optional {
  font-weight: 500;
  opacity: 0.65;
}

.fault-ticket-tech-empty {
  margin: 0;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--border) 80%, var(--signal) 20%);
  background: color-mix(in srgb, var(--ink) 3%, var(--surface));
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.45;
}

.fault-ticket-search-wrap {
  position: relative;
}

.fault-ticket-search-ico {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  color: rgba(232, 242, 244, 0.45);
  pointer-events: none;
}

.fault-ticket-search-input {
  padding-left: 2.55rem !important;
  min-height: 2.7rem;
  border-radius: 12px !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(6, 14, 20, 0.45) !important;
}

.fault-ticket-search-input:focus {
  border-color: rgba(232, 163, 23, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(232, 163, 23, 0.16);
}

.fault-client-results {
  display: grid;
  gap: 0.4rem;
  max-height: 11.5rem;
  overflow: auto;
  padding: 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(6, 14, 20, 0.42);
}

.fault-client-results::-webkit-scrollbar {
  width: 0.4rem;
}

.fault-client-results::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.fault-client-result {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  padding: 0.7rem 0.8rem;
  border: 1px solid transparent;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.fault-client-result:hover,
.fault-client-result:focus-visible {
  background: rgba(232, 163, 23, 0.12);
  border-color: rgba(232, 163, 23, 0.28);
  outline: none;
}

.fault-client-result-main {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.fault-client-result strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: rgba(245, 250, 252, 0.96);
}

.fault-client-result small,
.fault-client-loc,
.fault-client-empty {
  color: rgba(232, 242, 244, 0.58);
  font-size: 0.76rem;
  line-height: 1.35;
}

.fault-client-empty {
  margin: 0;
  padding: 0.85rem 0.7rem;
  text-align: center;
}

.fault-client-status,
.fault-client-selected-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  margin-top: 0.1rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(232, 242, 244, 0.82);
  white-space: nowrap;
}

.fault-client-selected {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0.9rem;
  border-radius: 14px;
  border: 1px solid rgba(232, 163, 23, 0.35);
  background:
    linear-gradient(135deg, rgba(232, 163, 23, 0.14), rgba(232, 163, 23, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.fault-client-selected-avatar {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  border: 1px solid rgba(232, 163, 23, 0.3);
  background: rgba(232, 163, 23, 0.12);
  color: #f3c35a;
}

.fault-client-selected-copy {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.fault-client-selected-copy strong {
  font-size: 0.95rem;
  font-weight: 750;
  color: rgba(245, 250, 252, 0.98);
}

.fault-client-selected-copy small {
  color: rgba(232, 242, 244, 0.62);
  font-size: 0.76rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.fault-client-selected-status {
  justify-self: start;
  margin-top: 0.15rem;
  border-color: rgba(232, 163, 23, 0.35);
  background: rgba(232, 163, 23, 0.14);
  color: #f3c35a;
}

.fault-client-clear {
  align-self: start;
}

.fault-ticket-notes {
  min-height: 6.2rem;
  resize: vertical;
  border-radius: 12px !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(6, 14, 20, 0.45) !important;
}

.fault-ticket-notes:focus {
  border-color: rgba(232, 163, 23, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(232, 163, 23, 0.16);
}

.fault-ticket-foot {
  gap: 0.65rem;
}

@media (max-width: 700px) {
  .cs-list-head-side {
    align-items: stretch;
  }

  .fault-client-selected {
    grid-template-columns: auto 1fr;
  }

  .fault-client-clear {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
}

[data-theme="light"] .fault-ticket-modal.pppoe-modal .fault-ticket-panel {
  background:
    radial-gradient(ellipse 75% 48% at 100% -8%, rgba(232, 163, 23, 0.18), transparent 55%),
    radial-gradient(ellipse 55% 42% at -8% 8%, rgba(220, 90, 50, 0.08), transparent 50%),
    linear-gradient(185deg, #f7fafb 0%, #eef4f6 48%, #e7eef1 100%);
  box-shadow:
    0 -18px 48px rgba(15, 35, 45, 0.12),
    0 0 0 1px rgba(15, 35, 45, 0.08);
}

[data-theme="light"] .fault-ticket-step {
  border-color: rgba(15, 35, 45, 0.08);
  background: rgba(255, 255, 255, 0.72);
}

[data-theme="light"] .fault-ticket-step-label h3 {
  color: #16313b;
}

[data-theme="light"] .fault-ticket-step-label p,
[data-theme="light"] .fault-ticket-field label,
[data-theme="light"] .fault-client-result small,
[data-theme="light"] .fault-client-loc,
[data-theme="light"] .fault-client-empty,
[data-theme="light"] .fault-ticket-tech-empty,
[data-theme="light"] .fault-client-selected-copy small {
  color: rgba(22, 49, 59, 0.62);
}

[data-theme="light"] .fault-ticket-search-input,
[data-theme="light"] .fault-ticket-notes {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(15, 35, 45, 0.12) !important;
  color: #16313b;
}

[data-theme="light"] .fault-client-results {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(15, 35, 45, 0.08);
}

[data-theme="light"] .fault-client-result {
  background: rgba(15, 35, 45, 0.03);
}

[data-theme="light"] .fault-client-result strong,
[data-theme="light"] .fault-client-selected-copy strong {
  color: #16313b;
}

[data-theme="light"] .fault-client-selected {
  background: linear-gradient(135deg, rgba(232, 163, 23, 0.14), rgba(255, 255, 255, 0.85));
}

.cs-list-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cs-list-head .cs-list-toolbar {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.cs-list-search-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.cs-list-search-ico {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-soft);
  opacity: 0.65;
  pointer-events: none;
}

.cs-list-search {
  width: 100%;
  min-height: 2.7rem;
  padding: 0.7rem 1rem 0.7rem 2.65rem;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface-solid, var(--surface));
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cs-list-search:focus {
  border-color: var(--sea);
  box-shadow: 0 0 0 3px var(--sea-soft);
}

.cs-list-shell {
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: var(--surface-solid, var(--surface));
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.cs-list-table {
  width: 100%;
  border-collapse: collapse;
}

.cs-list-table thead th {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 88%, var(--sea) 6%);
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

.cs-list-table tbody td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
}

.cs-list-table tbody tr:last-child td {
  border-bottom: 0;
}

.cs-list-table tbody tr:hover td {
  background: color-mix(in srgb, var(--sea) 5%, transparent);
}

.cs-list-table .cs-list-primary {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.cs-list-table .cs-list-primary strong {
  font-weight: 800;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.cs-list-table .cs-list-primary small,
.cs-list-table .cs-list-muted {
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
}

.cs-list-identity {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.cs-list-identity img,
.cs-list-identity span[aria-hidden="true"] {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 10px;
  flex: 0 0 auto;
  object-fit: cover;
}

.cs-list-identity span[aria-hidden="true"] {
  display: inline-grid;
  place-items: center;
  background: linear-gradient(145deg, var(--sea), var(--sea-deep));
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
}

.cs-list-identity .cs-list-primary {
  flex: 1 1 auto;
}

.cs-list-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.cs-list-actions form {
  margin: 0;
}

.cs-list-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.25rem;
  padding: 0.4rem 0.85rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--sea) 28%, var(--border));
  background: color-mix(in srgb, var(--sea) 10%, var(--surface));
  color: var(--sea-deep);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.cs-list-btn:hover {
  border-color: color-mix(in srgb, var(--sea) 45%, var(--border));
  background: color-mix(in srgb, var(--sea) 16%, var(--surface));
  transform: translateY(-1px);
}

.cs-list-btn.is-primary {
  border-color: transparent;
  background: linear-gradient(135deg, #0c7a84, #07545c);
  color: #fff;
}

.cs-list-empty {
  display: grid;
  gap: 0.35rem;
  justify-items: center;
  padding: 2.25rem 1.35rem;
  border: 1px dashed color-mix(in srgb, var(--sea) 24%, var(--border));
  border-radius: 16px;
  background:
    radial-gradient(ellipse 70% 80% at 50% 0%, color-mix(in srgb, var(--sea) 8%, transparent), transparent 60%),
    color-mix(in srgb, var(--surface-2) 80%, transparent);
  text-align: center;
}

.cs-list-empty strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
}

.cs-list-empty p {
  margin: 0;
  color: var(--ink-soft);
  font-weight: 600;
}

.cs-list-thumb {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 10px;
  object-fit: cover;
  background: var(--surface-2);
  display: block;
}

.cs-list-thumb-empty {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--sea) 10%, var(--surface-2));
  display: block;
}

[data-theme="dark"] .cs-list-kicker,
[data-theme="dark"] .cs-list-btn {
  color: var(--sea);
}

[data-theme="dark"] .cs-list-btn.is-primary {
  color: #fff;
}

/* CS shared workspace nav chips ? mobile page shortcut only.
   Desktop uses the sidebar module links instead. */
.cs-workspace-nav {
  display: none;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.7rem 0.75rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sea) 7%, transparent), transparent),
    var(--surface-2, var(--surface));
}

@media (max-width: 899px) {
  .cs-workspace-nav {
    display: flex;
  }
}

.cs-workspace-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 750;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.cs-workspace-nav-link:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}

.cs-workspace-nav-link.is-active {
  color: var(--sea-deep);
  border-color: color-mix(in srgb, var(--sea) 28%, var(--border));
  background: color-mix(in srgb, var(--sea) 12%, var(--surface-solid, var(--surface)));
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 40%, transparent) inset;
}

[data-theme="dark"] .cs-workspace-nav-link.is-active {
  color: var(--sea);
}

.cs-role-page > .cs-workspace-nav {
  margin: 0 0 0.15rem;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

@media (max-width: 899px) {
  .cs-role-page > .cs-workspace-nav {
    display: flex;
  }
}

.cs-role-page .cs-role-grid {
  grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
}

@media (prefers-reduced-motion: no-preference) {
  .cs-workspace-nav-link,
  .cs-role-card,
  .cs-list-btn {
    transition:
      background 0.18s ease,
      color 0.18s ease,
      border-color 0.18s ease,
      box-shadow 0.18s ease,
      transform 0.18s ease;
  }

  .cs-role-card:hover {
    transform: translateY(-3px);
  }
}

/* Tablet: keep list, allow horizontal scroll when needed */
@media (max-width: 1100px) {
  .cs-list-shell {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cs-list-table {
    min-width: 52rem;
  }

  .cs-list-table.cs-list-table--compact {
    min-width: 40rem;
  }
}

/* Mobile: stack rows as cards */
@media (max-width: 760px) {
  .cs-list-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .cs-list-head .cs-list-toolbar {
    width: 100%;
    justify-content: stretch;
  }

  .cs-list-head .cs-list-toolbar .btn {
    flex: 1 1 auto;
  }

  .cs-workspace-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .cs-workspace-nav-link {
    flex: 0 0 auto;
  }

  .cs-list-shell {
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .cs-list-table,
  .cs-list-table.cs-list-table--compact {
    min-width: 0;
  }

  .cs-list-table thead {
    display: none;
  }

  .cs-list-table,
  .cs-list-table tbody,
  .cs-list-table tr,
  .cs-list-table td {
    display: block;
    width: 100%;
  }

  .cs-list-table tbody {
    display: grid;
    gap: 0.75rem;
  }

  .cs-list-table tbody tr {
    padding: 0.95rem 1rem;
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    background: var(--surface-solid, var(--surface));
    box-shadow: var(--card-shadow);
  }

  .cs-list-table tbody tr:hover td {
    background: transparent;
  }

  .cs-list-table tbody td {
    display: grid;
    grid-template-columns: 7.25rem minmax(0, 1fr);
    gap: 0.55rem;
    align-items: start;
    padding: 0.4rem 0;
    border: 0;
  }

  .cs-list-table tbody td::before {
    content: attr(data-label);
    color: var(--ink-soft);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-top: 0.2rem;
  }

  .cs-list-table tbody td[data-label=""] {
    grid-template-columns: 1fr;
  }

  .cs-list-table tbody td[data-label=""]::before {
    display: none;
  }

  .cs-list-table tbody td.is-primary-cell {
    grid-template-columns: 1fr;
    padding-bottom: 0.55rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--border);
  }

  .cs-list-table tbody td.is-primary-cell::before {
    display: none;
  }

  .cs-list-table tbody td.is-actions-cell {
    grid-template-columns: 1fr;
    padding-top: 0.65rem;
    margin-top: 0.2rem;
    border-top: 1px solid var(--border);
  }

  .cs-list-table tbody td.is-actions-cell::before {
    display: none;
  }

  .cs-list-actions {
    width: 100%;
  }

  .cs-list-actions .cs-list-btn,
  .cs-list-actions .btn {
    flex: 1 1 auto;
    min-height: 2.6rem;
  }

  .cs-list-table .col-optional {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-list-search,
  .cs-workspace-nav-link,
  .cs-list-btn,
  .cs-role-card {
    transition: none;
  }
}

/* ==========================================================================
   Dark mode visibility enhancements
   Improves contrast for text, borders, inputs, and hardcoded light surfaces.
   ========================================================================== */

[data-theme="dark"] .hero::before {
  background-image:
    linear-gradient(rgba(82, 208, 219, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(82, 208, 219, 0.06) 1px, transparent 1px);
  opacity: 0.55;
}

[data-theme="dark"] .staff-workspace::before {
  opacity: 0.5;
}

[data-theme="dark"] .staff-app .stat .label,
[data-theme="dark"] .app-shell .stat .label,
[data-theme="dark"] .stat .label {
  opacity: 0.95;
  color: var(--ink-soft);
}

[data-theme="dark"] .table th {
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
}

[data-theme="dark"] .table tbody tr:hover td {
  background: color-mix(in srgb, var(--sea) 8%, var(--surface));
}

[data-theme="dark"] .table td {
  color: var(--ink);
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] .staff-card .form-control::placeholder,
[data-theme="dark"] .clients-search-input::placeholder,
[data-theme="dark"] .pppoe-grid .form-control::placeholder,
[data-theme="dark"] .mikrotik-onboard-form .form-control::placeholder {
  color: color-mix(in srgb, var(--ink-soft) 78%, transparent);
  opacity: 1;
}

[data-theme="dark"] .btn-ghost {
  border-color: var(--border-strong);
  color: var(--ink);
}

[data-theme="dark"] .btn-ghost:hover {
  background: var(--surface-3);
  border-color: color-mix(in srgb, var(--sea) 40%, var(--border-strong));
}

[data-theme="dark"] .theme-toggle {
  background: var(--surface-solid);
  border-color: var(--border-strong);
  color: var(--ink);
}

[data-theme="dark"] .account-menu-trigger {
  border-color: var(--border-strong);
}

[data-theme="dark"] .flag-select-trigger {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--ink);
}

[data-theme="dark"] .flag-select-menu {
  background: var(--surface-solid);
  border-color: var(--border-strong);
  box-shadow: var(--menu-shadow);
}

[data-theme="dark"] .flag-select-search {
  background: var(--surface-2);
  border-bottom-color: var(--border);
  color: var(--ink);
}

[data-theme="dark"] .flag-select-option:hover,
[data-theme="dark"] .flag-select-option.is-selected {
  background: var(--sea-soft);
}

[data-theme="dark"] .toast {
  box-shadow: var(--menu-shadow);
}

[data-theme="dark"] .toast-error {
  border-color: color-mix(in srgb, #ff8a80 48%, var(--border-strong));
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, #ef4444 22%, var(--surface-solid)),
      color-mix(in srgb, var(--surface-solid) 82%, #1a1012)
    );
}

[data-theme="dark"] .toast-error .toast-title {
  color: #ffb4ab;
}

[data-theme="dark"] .toast-error .toast-text {
  color: #f8ecea;
}

[data-theme="dark"] .toast-error .toast-dismiss {
  color: #ffb4ab;
}

[data-theme="dark"] .toast-error .toast-dismiss:hover {
  background: color-mix(in srgb, #ef4444 22%, transparent);
  color: #ffd6d1;
}

[data-theme="dark"] .toast-success {
  border-color: color-mix(in srgb, #6ee7a0 45%, var(--border-strong));
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, #22c55e 18%, var(--surface-solid)),
      var(--surface-solid)
    );
}

[data-theme="dark"] .toast-success .toast-title {
  color: #9ee8c0;
}

[data-theme="dark"] .toast-success .toast-text {
  color: #e8f5ee;
}

[data-theme="dark"] .toast-warning {
  border-color: color-mix(in srgb, #fbbf24 48%, var(--border-strong));
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, #f59e0b 20%, var(--surface-solid)),
      var(--surface-solid)
    );
}

[data-theme="dark"] .toast-warning .toast-title {
  color: #fde68a;
}

[data-theme="dark"] .toast-warning .toast-text {
  color: #f8f2e4;
}

[data-theme="dark"] .toast-info,
[data-theme="dark"] .toast-debug {
  border-color: color-mix(in srgb, var(--sea) 48%, var(--border-strong));
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--sea) 18%, var(--surface-solid)),
      var(--surface-solid)
    );
}

[data-theme="dark"] .toast-info .toast-title,
[data-theme="dark"] .toast-debug .toast-title {
  color: var(--sea-deep);
}

[data-theme="dark"] .toast-info .toast-text,
[data-theme="dark"] .toast-debug .toast-text {
  color: #e6f4f7;
}

[data-theme="dark"] .pending-meta {
  background: var(--surface-2);
  border-color: var(--border-strong);
}

[data-theme="dark"] .pending-meta .meta-label {
  color: var(--ink-soft);
}

[data-theme="dark"] .pending-meta .meta-value {
  color: var(--ink);
}

[data-theme="dark"] .badge {
  color: var(--chip-sea-fg);
}

[data-theme="dark"] .empty {
  color: var(--ink-soft);
  border-color: color-mix(in srgb, var(--sea) 35%, var(--border-strong));
}

[data-theme="dark"] .staff-main a:not(.btn):not(.client-cat-nav-item):not(.org-action-icon):not(.module-card):not(.brand):not(.staff-sidebar-modal-trigger),
[data-theme="dark"] .panel a:not(.btn):not(.client-cat-nav-item):not(.org-action-icon),
[data-theme="dark"] .auth-panel a:not(.btn) {
  color: var(--sea-deep);
}

[data-theme="dark"] .staff-main a:not(.btn):not(.client-cat-nav-item):not(.org-action-icon):not(.module-card):not(.brand):hover,
[data-theme="dark"] .panel a:not(.btn):not(.client-cat-nav-item):not(.org-action-icon):hover,
[data-theme="dark"] .auth-panel a:not(.btn):hover {
  color: var(--sea);
}

[data-theme="dark"] .staff-topbar-kicker {
  color: var(--sea);
}

[data-theme="dark"] .panel-sub,
[data-theme="dark"] .page-sub,
[data-theme="dark"] .client-page-lead,
[data-theme="dark"] .lede {
  color: var(--ink-soft);
}

[data-theme="dark"] .password-toggle {
  color: var(--ink-soft);
}

[data-theme="dark"] .password-toggle:hover {
  color: var(--ink);
}

[data-theme="dark"] .clients-search-input {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--ink);
}

[data-theme="dark"] .clients-search-clear {
  background: var(--surface-3);
  color: var(--ink-soft);
}

[data-theme="dark"] .clients-search-clear:hover {
  background: var(--sea-soft);
  color: var(--ink);
}

[data-theme="dark"] .account-menu-panel {
  background: var(--surface-solid);
  border-color: var(--border-strong);
}

[data-theme="dark"] .staff-sidebar-meta {
  color: var(--sidebar-muted);
}

[data-theme="dark"] .staff-sidebar-meta strong {
  color: var(--sidebar-text);
}

[data-theme="dark"] select.form-control option {
  background: var(--surface-solid);
  color: var(--ink);
}

/* ?? Technician installations (field work) ?? */
.tech-install-page {
  width: min(100%, 64rem);
  max-width: 64rem;
  margin-inline: auto;
  display: grid;
  gap: clamp(1rem, 2vw, 1.35rem);
  padding: 0.1rem 0 1.75rem;
}

.tech-install-page.cs-role-page {
  width: min(100%, 64rem);
}

.tech-install-hero {
  align-items: stretch;
}

.tech-install-hero-side {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.75rem;
  justify-items: end;
  align-content: center;
}

.tech-install-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  flex-wrap: wrap;
}

.tech-install-kicker {
  margin: 0 0 0.2rem;
  color: var(--sea-deep);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tech-install-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--ink);
}

.tech-install-lead {
  margin: 0.35rem 0 0;
  max-width: 40rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.5;
}

.tech-install-head-actions {
  flex: 0 0 auto;
}

.tech-install-register {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.65rem;
  padding-inline: 1.1rem;
  border-radius: 12px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--sea) 18%, transparent);
}

.tech-install-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.tech-install-block {
  display: grid;
  gap: 0.75rem;
}

.tech-install-block-head {
  display: grid;
  gap: 0.15rem;
}

.tech-install-block-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.tech-install-block-sub {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.4;
}

.tech-install-panel {
  gap: 1.05rem;
}

.tech-install-panel.is-tickets::before {
  background: linear-gradient(180deg, #c27803, var(--signal, #e11d48));
}

.tech-install-panel-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  height: 2.1rem;
  padding: 0 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--sea) 24%, var(--border));
  background: color-mix(in srgb, var(--sea) 10%, var(--surface));
  color: var(--sea-deep);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1;
}

.tech-install-card.is-registered {
  border-color: color-mix(in srgb, var(--sea) 22%, var(--border));
}

.tech-install-stat {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.95rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--sea) 7%, var(--surface-solid, var(--surface))), var(--surface-solid, var(--surface)));
  box-shadow: var(--card-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.tech-install-stat:not(:has(.tech-install-stat-ico)) {
  display: grid;
  gap: 0.1rem;
  align-items: start;
}

.tech-install-stat:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--ink) 8%, transparent);
}

.tech-install-stat.is-assigned {
  border-color: color-mix(in srgb, var(--success, #15803d) 22%, var(--border));
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--success, #15803d) 10%, var(--surface-solid, var(--surface))), var(--surface-solid, var(--surface)));
}

.tech-install-stat.is-open {
  border-color: color-mix(in srgb, #c27803 24%, var(--border));
  background:
    linear-gradient(165deg, color-mix(in srgb, #c27803 12%, var(--surface-solid, var(--surface))), var(--surface-solid, var(--surface)));
}

.tech-install-stat-ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--sea) 24%, var(--border));
  background: color-mix(in srgb, var(--sea) 12%, var(--surface));
  color: var(--sea-deep);
}

.tech-install-stat.is-open .tech-install-stat-ico {
  border-color: color-mix(in srgb, #c27803 30%, var(--border));
  background: color-mix(in srgb, #c27803 14%, var(--surface));
  color: #9a6700;
}

.tech-install-stat.is-assigned .tech-install-stat-ico {
  border-color: color-mix(in srgb, var(--success, #15803d) 28%, var(--border));
  background: color-mix(in srgb, var(--success, #15803d) 12%, var(--surface));
  color: var(--success, #15803d);
}

.tech-install-stat-copy {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.tech-install-stat strong,
.tech-install-stat-copy strong {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.1;
}

.tech-install-stat span,
.tech-install-stat-copy span {
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.tech-install-list {
  display: grid;
  gap: 0.9rem;
}

.tech-install-card {
  position: relative;
  display: grid;
  gap: 0.95rem;
  padding: 1.1rem 1.15rem 1.05rem;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-solid) 96%, var(--sea) 4%), var(--surface-solid, var(--surface)));
  box-shadow: var(--card-shadow);
  border-left: 3px solid color-mix(in srgb, var(--ink-soft) 35%, transparent);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.tech-install-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--ink) 9%, transparent);
  border-color: color-mix(in srgb, var(--sea) 28%, var(--border-strong));
}

.tech-install-card.is-mine {
  border-left-color: var(--success, #15803d);
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--success, #15803d) 7%, transparent), transparent 46%),
    var(--surface-solid, var(--surface));
}

.tech-install-card.is-open {
  border-left-color: #c27803;
  background:
    linear-gradient(120deg, color-mix(in srgb, #c27803 8%, transparent), transparent 46%),
    var(--surface-solid, var(--surface));
}

.tech-install-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
}

.tech-install-card-id {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}

.tech-install-card-id:not(:has(.tech-install-avatar)) {
  display: grid;
  gap: 0.2rem;
}

.tech-install-card-titles {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
}

.tech-install-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--sea) 26%, var(--border));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--sea) 16%, var(--surface)), var(--surface-solid, var(--surface)));
  color: var(--sea-deep);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.tech-install-avatar.is-open {
  border-color: color-mix(in srgb, #c27803 30%, var(--border));
  background: color-mix(in srgb, #c27803 14%, var(--surface));
  color: #9a6700;
}

.tech-install-avatar.is-mine {
  border-color: color-mix(in srgb, var(--success, #15803d) 28%, var(--border));
  background: color-mix(in srgb, var(--success, #15803d) 12%, var(--surface));
  color: var(--success, #15803d);
}

.tech-install-ticket {
  display: inline-flex;
  width: fit-content;
  padding: 0.18rem 0.55rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--sea) 10%, transparent);
  color: var(--sea-deep);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.tech-install-client {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.25;
}

.tech-install-card-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35rem;
}

.tech-install-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2, var(--surface));
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.2;
}

.tech-install-chip.is-yours {
  border-color: color-mix(in srgb, var(--success, #15803d) 30%, var(--border));
  background: color-mix(in srgb, var(--success, #15803d) 12%, transparent);
  color: var(--success, #15803d);
}

.tech-install-chip.is-pool {
  border-color: color-mix(in srgb, #c27803 32%, var(--border));
  background: color-mix(in srgb, #c27803 12%, transparent);
  color: #9a6700;
}

.tech-install-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem 1.1rem;
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  background: color-mix(in srgb, var(--ink) 2.5%, var(--surface-solid, var(--surface)));
}

.tech-install-meta-item {
  display: grid;
  gap: 0.22rem;
  min-width: 0;
}

.tech-install-meta-label {
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tech-install-meta-value,
.tech-install-phone {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.35;
  word-break: break-word;
}

.tech-install-phone {
  color: var(--sea-deep);
  text-decoration: none;
}

.tech-install-phone:hover {
  text-decoration: underline;
}

.tech-install-meta-muted {
  color: var(--ink-soft);
  font-size: 0.86rem;
  font-weight: 550;
}

.tech-install-pppoe-user {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
}

.tech-install-pppoe-secret {
  font-size: 0.9rem;
  font-weight: 650;
}

.tech-install-maps {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.45rem;
  color: var(--sea-deep);
  text-decoration: none;
  max-width: 100%;
}

.tech-install-maps svg {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  opacity: 0.9;
}

.tech-install-maps span {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.tech-install-maps strong {
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.3;
}

.tech-install-maps small {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 550;
  line-height: 1.35;
}

.tech-install-maps:hover strong {
  text-decoration: underline;
}

.tech-install-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.2rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}

.tech-install-card-actions form {
  display: inline;
  margin: 0;
}

.tech-complete-install-form {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.65rem;
  width: 100%;
}

.tech-complete-serial-label {
  flex: 1 1 100%;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-2);
}

.tech-complete-install-form .form-control {
  flex: 1 1 12rem;
  min-width: 10rem;
}

.tech-stock-used {
  display: grid;
  gap: 0.55rem;
  width: 100%;
}

.tech-install-location {
  display: grid;
  gap: 0.55rem;
  width: 100%;
  padding: 0.85rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 70%, transparent);
}

.tech-install-location-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.tech-install-location-head .tech-complete-serial-label {
  flex: 1 1 auto;
  margin: 0;
}

.tech-optional {
  font-weight: 500;
  opacity: 0.7;
}

.tech-install-location-field {
  margin: 0;
}

.tech-install-location-field .mikrotik-location-combo {
  width: 100%;
}

.tech-install-location-field .form-control {
  width: 100%;
  min-width: 0;
}

@media (max-width: 700px) {
  .tech-install-location-head {
    align-items: stretch;
  }

  .tech-install-location-head .btn {
    width: 100%;
  }
}

.tech-stock-used-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.tech-stock-used-head .tech-complete-serial-label {
  flex: 1 1 auto;
  margin: 0;
}

.tech-stock-rows {
  display: grid;
  gap: 0.65rem;
}

.tech-stock-row {
  display: grid;
  gap: 0.45rem;
  padding: 0.7rem 0.75rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--ink) 2%, var(--surface-solid, var(--surface)));
}

.tech-stock-row-main {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-end;
}

.tech-stock-field {
  display: grid;
  gap: 0.22rem;
  flex: 1 1 11rem;
  min-width: 8rem;
}

.tech-stock-field > span {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.tech-stock-qty-field {
  flex: 0 0 5.5rem;
  min-width: 5rem;
}

.tech-stock-remove {
  flex: 0 0 auto;
}

.tech-stock-serial-block {
  display: grid;
  gap: 0.4rem;
}

.tech-stock-serial-block[hidden],
.tech-stock-qty-field[hidden] {
  display: none !important;
}

.tech-stock-serial-results {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tech-stock-serial-result {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--sea-deep) 35%, var(--border));
  background: color-mix(in srgb, var(--sea-deep) 8%, transparent);
  color: var(--sea-deep);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  cursor: pointer;
}

.tech-stock-serial-result:hover,
.tech-stock-serial-result:focus-visible {
  background: color-mix(in srgb, var(--sea-deep) 16%, transparent);
}

.tech-stock-serial-selected {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
}

.tech-stock-serial-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  padding: 0.25rem 0.55rem 0.25rem 0.7rem;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  font-weight: 650;
}

.tech-stock-serial-chip button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.1rem;
}

.tech-stock-serial-empty,
.tech-stock-hint,
.tech-stock-empty {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1.4;
}

.tech-stock-empty a {
  color: var(--sea-deep);
}

.tech-install-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.45rem;
  padding: 0.5rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-2, var(--surface));
  color: var(--ink);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.tech-install-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--ink) 8%, transparent);
}

.tech-install-btn.is-success {
  border-color: color-mix(in srgb, var(--success, #15803d) 30%, var(--border));
  background: color-mix(in srgb, var(--success, #15803d) 12%, var(--surface));
  color: var(--success, #15803d);
}

.tech-install-btn.is-success:hover {
  background: color-mix(in srgb, var(--success, #15803d) 18%, var(--surface));
}

.tech-install-btn.is-warn {
  border-color: color-mix(in srgb, #c27803 32%, var(--border));
  background: color-mix(in srgb, #c27803 12%, var(--surface));
  color: #9a6700;
}

.tech-install-btn.is-danger {
  border-color: color-mix(in srgb, var(--danger, #b42318) 28%, var(--border));
  background: color-mix(in srgb, var(--danger, #b42318) 10%, var(--surface));
  color: var(--danger, #b42318);
}

.tech-install-empty {
  display: grid;
  gap: 0.4rem;
  justify-items: center;
  text-align: center;
  padding: 2.35rem 1.35rem;
  border: 1.5px dashed color-mix(in srgb, var(--sea) 28%, var(--border-strong));
  border-radius: 18px;
  background:
    radial-gradient(ellipse 80% 70% at 50% 0%, var(--sea-soft), transparent 70%),
    var(--surface-solid, var(--surface));
}

.tech-install-empty-mark {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  margin-bottom: 0.2rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--sea) 30%, var(--border));
  background: color-mix(in srgb, var(--sea) 12%, var(--surface));
  color: var(--sea-deep);
}

.tech-install-empty strong {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--ink);
}

.tech-install-empty p {
  margin: 0 0 0.65rem;
  max-width: 28rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.45;
}

@media (max-width: 860px) {
  .tech-install-hero {
    flex-direction: column;
    align-items: stretch;
  }

  .tech-install-hero-side {
    justify-items: stretch;
  }

  .tech-install-hero-side .cs-role-meta {
    justify-content: flex-start;
  }

  .tech-install-register {
    width: 100%;
  }
}

@media (max-width: 720px) {
  .tech-install-stats {
    grid-template-columns: 1fr;
  }

  .tech-install-meta {
    grid-template-columns: 1fr;
  }

  .tech-install-card-actions {
    display: grid;
  }

  .tech-install-card-actions form,
  .tech-install-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tech-install-stat,
  .tech-install-card,
  .tech-install-btn,
  .tech-install-register {
    transition: none;
  }

  .tech-install-stat:hover,
  .tech-install-card:hover,
  .tech-install-btn:hover {
    transform: none;
  }
}

[data-theme="dark"] .tech-install-chip.is-pool,
[data-theme="dark"] .tech-install-stat.is-open .tech-install-stat-ico,
[data-theme="dark"] .tech-install-avatar.is-open {
  color: #f5c451;
}

[data-theme="dark"] .tech-install-btn.is-warn {
  color: #f5c451;
}

[data-theme="dark"] .tech-install-meta {
  background: color-mix(in srgb, var(--ink) 6%, var(--surface-solid, var(--surface)));
}

/* Fault tickets ? same field workspace, warning-leaning empty state */
.tech-fault-page .tech-install-stat.is-open {
  border-color: color-mix(in srgb, var(--signal) 28%, var(--border));
  background: color-mix(in srgb, var(--signal) 8%, var(--surface));
}

.tech-fault-back {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
}

.tech-fault-empty {
  background:
    radial-gradient(ellipse 80% 70% at 50% 0%, color-mix(in srgb, var(--signal) 16%, transparent), transparent 70%),
    var(--surface-solid, var(--surface));
  border-color: color-mix(in srgb, var(--signal) 28%, var(--border-strong));
}

.tech-fault-empty-mark {
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  margin-bottom: 0.25rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--signal) 30%, var(--border));
  background: color-mix(in srgb, var(--signal) 12%, var(--surface));
  color: color-mix(in srgb, var(--signal) 75%, var(--ink));
}

[data-theme="dark"] .tech-fault-empty-mark {
  color: var(--signal);
}

.tech-fault-notice {
  margin: 0 0 1rem;
  cursor: default;
}

.tech-fault-notice:hover,
.tech-fault-notice:focus-visible {
  transform: none;
}

.tech-install-stat.is-alert {
  border-color: color-mix(in srgb, var(--signal) 40%, var(--border));
  background: color-mix(in srgb, var(--signal) 10%, var(--surface));
}

.tech-tickets-tab.is-alert:not(.is-active) {
  border-color: color-mix(in srgb, var(--signal) 40%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--signal) 18%, transparent);
}

.tech-tickets-tab-count.is-alert {
  background: color-mix(in srgb, var(--signal) 28%, transparent);
  color: var(--chip-signal-fg, var(--ink));
  animation: tech-fault-badge-pulse 1.8s ease-in-out infinite;
}

@keyframes tech-fault-badge-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 0%, transparent);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 18%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tech-tickets-tab-count.is-alert {
    animation: none;
  }
}

.tech-tickets-hub-empty {
  margin-top: 0.25rem;
}

.tech-tickets-hub-page .tech-tickets-tabs {
  margin-bottom: 1.35rem;
}

/* Technician tickets ? pending activation / connected */
.tech-tickets-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.1rem;
}

.tech-tickets-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.35rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-muted, var(--muted));
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.tech-tickets-tab:hover {
  border-color: color-mix(in srgb, var(--signal) 35%, var(--border));
  color: var(--ink);
}

.tech-tickets-tab.is-active {
  border-color: color-mix(in srgb, var(--signal) 45%, var(--border));
  background: color-mix(in srgb, var(--signal) 12%, var(--surface));
  color: var(--ink);
}

.tech-tickets-tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.45rem;
  height: 1.45rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  font-size: 0.75rem;
  font-weight: 700;
}

.tech-tickets-tab.is-active .tech-tickets-tab-count {
  background: color-mix(in srgb, var(--signal) 22%, transparent);
}

.tech-tickets-filter-bar {
  margin: 0 0 1rem;
}

.tech-tickets-filter-bar .usage-range-filter {
  margin: 0;
}

/* Network equipment ? technician assigned-gear workspace */
.tech-gear-card-id {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.tech-gear-thumb {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.tech-gear-thumb.is-empty {
  display: grid;
  place-items: center;
  color: var(--sea-deep);
  background: color-mix(in srgb, var(--sea) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--sea) 24%, var(--border));
}

.tech-gear-empty {
  background:
    radial-gradient(ellipse 80% 70% at 50% 0%, color-mix(in srgb, var(--sea) 14%, transparent), transparent 70%),
    var(--surface-solid, var(--surface));
}

.tech-gear-empty-mark {
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  margin-bottom: 0.25rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--sea) 28%, var(--border));
  background: color-mix(in srgb, var(--sea) 12%, var(--surface));
  color: var(--sea-deep);
}

[data-theme="dark"] .tech-gear-thumb.is-empty,
[data-theme="dark"] .tech-gear-empty-mark {
  color: var(--sea);
}



/* ??? My Stock item detail ??? */
.my-stock-item-hero-img {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(15, 40, 48, 0.12);
  background: rgba(15, 40, 48, 0.04);
}

.my-stock-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1rem;
  padding: 0.15rem 0 0.35rem;
}

.my-stock-detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.my-stock-detail-item-wide {
  grid-column: 1 / -1;
}

.my-stock-detail-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.my-stock-detail-item strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  word-break: break-word;
}

.my-stock-serial-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.my-stock-serial-list code {
  display: inline-block;
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  background: rgba(14, 124, 134, 0.1);
  color: #0f766e;
  font-size: 0.82rem;
}

.my-stock-timeline {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.my-stock-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0 0 1rem 0.15rem;
}

.my-stock-timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 0.42rem;
  top: 1rem;
  bottom: 0;
  width: 2px;
  background: rgba(15, 40, 48, 0.12);
}

.my-stock-timeline-dot {
  width: 0.7rem;
  height: 0.7rem;
  margin-top: 0.35rem;
  border-radius: 999px;
  background: #0e7c86;
  box-shadow: 0 0 0 3px rgba(14, 124, 134, 0.16);
}

.my-stock-timeline-item.is-returned .my-stock-timeline-dot,
.my-stock-timeline-item.is-return .my-stock-timeline-dot {
  background: #94a3b8;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.2);
}

.my-stock-timeline-item.is-stock_in .my-stock-timeline-dot {
  background: #0f9f6e;
  box-shadow: 0 0 0 3px rgba(15, 159, 110, 0.18);
}

.my-stock-timeline-item.is-stock_out .my-stock-timeline-dot {
  background: #d97706;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18);
}

.my-stock-timeline-item.is-allocate .my-stock-timeline-dot {
  background: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

.equipment-serial-snapshot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
}

.equipment-serial-chip-list {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.equipment-serial-chip-list li {
  margin: 0;
}

.equipment-serial-chip-list code {
  display: inline-block;
  padding: 0.2rem 0.45rem;
  border-radius: 0.35rem;
  background: color-mix(in srgb, var(--surface-2, #f1f5f9) 88%, transparent);
  font-size: 0.8rem;
}

.my-stock-timeline-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.my-stock-timeline-head strong {
  font-size: 0.92rem;
  color: var(--ink);
}

.my-stock-timeline-head time {
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.my-stock-timeline-meta,
.my-stock-timeline-notes {
  margin: 0.2rem 0 0;
  font-size: 0.84rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

@media (max-width: 640px) {
  .my-stock-detail-grid {
    grid-template-columns: 1fr;
  }
}

.my-stock-serial-units {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.my-stock-serial-card {
  padding: 0.95rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(15, 40, 48, 0.12);
  background: rgba(15, 40, 48, 0.02);
}

.my-stock-serial-card.is-focus {
  border-color: rgba(14, 124, 134, 0.45);
  box-shadow: 0 0 0 3px rgba(14, 124, 134, 0.12);
}

.my-stock-serial-card.is-returned {
  opacity: 0.82;
}

.my-stock-serial-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.my-stock-serial-card-head code {
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.my-stock-serial-movement {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(15, 40, 48, 0.1);
}

.my-stock-serial-movement h4 {
  margin: 0 0 0.55rem;
  font-size: 0.84rem;
  font-weight: 750;
  color: var(--ink);
}

.equipment-stock-report-shell {
  overflow-x: auto;
}

.equipment-stock-report-table {
  min-width: 40rem;
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

.equipment-stock-report-table .col-date {
  width: 18%;
}

.equipment-stock-report-table .col-num {
  width: 11.7%;
}

.equipment-stock-report-table.cs-list-table thead th,
.equipment-stock-report-table.cs-list-table tbody td {
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  padding: 0.7rem 0.45rem;
  box-sizing: border-box;
}

.equipment-stock-report-table.cs-list-table thead th:first-child,
.equipment-stock-report-table.cs-list-table tbody td:first-child {
  text-align: left;
  padding-left: 1rem;
  padding-right: 0.75rem;
}

.equipment-stock-report-table.cs-list-table thead th:last-child,
.equipment-stock-report-table.cs-list-table tbody td:last-child {
  padding-right: 1rem;
}

.equipment-stock-report-table .is-qty-in {
  color: #0f9f6e;
  font-weight: 650;
}

.equipment-stock-report-table .is-qty-out {
  color: #c2410c;
  font-weight: 650;
}

@media (max-width: 760px) {
  .equipment-stock-report-shell .equipment-stock-report-table.cs-list-table thead {
    display: none;
  }

  .equipment-stock-report-shell .equipment-stock-report-table.cs-list-table,
  .equipment-stock-report-shell .equipment-stock-report-table.cs-list-table tbody,
  .equipment-stock-report-shell .equipment-stock-report-table.cs-list-table tr,
  .equipment-stock-report-shell .equipment-stock-report-table.cs-list-table td {
    display: block;
    width: 100%;
  }

  .equipment-stock-report-shell .equipment-stock-report-table.cs-list-table tbody td {
    text-align: right;
    padding: 0.45rem 0;
  }

  .equipment-stock-report-shell .equipment-stock-report-table.cs-list-table tbody td:first-child,
  .equipment-stock-report-shell .equipment-stock-report-table.cs-list-table tbody td:last-child {
    padding-left: 0;
    padding-right: 0;
  }
}

.equipment-page-stack {
  display: grid;
  gap: 1rem;
}

.equipment-allocated-table {
  table-layout: fixed;
  width: 100%;
}

.equipment-allocated-table .col-employee {
  width: auto;
}

.equipment-allocated-table .col-qty {
  width: 5.5rem;
}

.equipment-allocated-table .col-action {
  width: 6.5rem;
}

.equipment-allocated-table th:nth-child(2),
.equipment-allocated-table td:nth-child(2),
.equipment-allocated-table th:nth-child(3),
.equipment-allocated-table td:nth-child(3) {
  text-align: right;
}

.equipment-detail-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(15, 40, 48, 0.1);
}

.equipment-detail-summary .cs-role-title {
  margin: 0.15rem 0 0.35rem;
}

.equipment-detail-summary .cs-role-lead {
  margin: 0.2rem 0 0;
}

.equipment-detail-summary .cs-role-meta {
  margin-left: auto;
}

.equipment-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 1rem 1.5rem;
}

.equipment-detail-intro {
  min-width: 0;
}

.equipment-detail-intro-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.9rem 0 0;
}

.equipment-profile-card {
  width: min(100%, 20rem);
  justify-self: end;
  padding: 0.55rem;
  border-radius: 16px;
  border: 1px solid rgba(15, 40, 48, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(248, 250, 252, 0.92));
  box-shadow: 0 10px 28px rgba(15, 40, 48, 0.06);
  text-align: center;
}

.equipment-profile-card.is-collapsed {
  width: auto;
  max-width: min(100%, 18.5rem);
  padding: 0.35rem;
}

.equipment-profile-toggle {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  margin: 0;
  padding: 0.35rem 0.55rem 0.35rem 0.35rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.equipment-profile-toggle:hover,
.equipment-profile-toggle:focus-visible {
  background: rgba(14, 124, 134, 0.08);
  outline: none;
}

.equipment-profile-toggle-media img,
.equipment-profile-toggle-fallback {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid rgba(14, 124, 134, 0.18);
  background: rgba(14, 124, 134, 0.08);
}

.equipment-profile-toggle-fallback {
  display: grid;
  place-items: center;
  color: #0e7c86;
}

.equipment-profile-toggle-copy {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
  flex: 1 1 auto;
}

.equipment-profile-toggle-label {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
}

.equipment-profile-toggle-copy strong {
  font-size: 0.86rem;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.equipment-profile-toggle-chevron {
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
  flex: 0 0 auto;
  transition: transform 0.18s ease;
}

.equipment-profile-card:not(.is-collapsed) .equipment-profile-toggle-chevron {
  transform: rotate(-135deg);
}

.equipment-profile-card-body {
  padding: 0.55rem 0.5rem 0.55rem;
}

.equipment-profile-card-media {
  display: grid;
  place-items: center;
  margin: 0 auto 0.75rem;
}

.equipment-profile-card-media img,
.equipment-profile-card-fallback {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 999px;
  object-fit: cover;
  border: 3px solid rgba(14, 124, 134, 0.18);
  background: rgba(14, 124, 134, 0.08);
}

.equipment-profile-card-fallback {
  display: grid;
  place-items: center;
  color: #0e7c86;
}

.equipment-profile-card-identity {
  margin-bottom: 0.85rem;
}

.equipment-profile-card-kicker {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
}

.equipment-profile-card-name {
  margin: 0.2rem 0 0.55rem;
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--ink);
}

.equipment-profile-card-facts {
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(15, 40, 48, 0.1);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 0.85rem;
  text-align: left;
}

.equipment-profile-card-facts > div {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.equipment-profile-card-facts > .is-wide {
  grid-column: 1 / -1;
}

.equipment-profile-card-facts dt {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
}

.equipment-profile-card-facts dd code.is-focus {
  padding: 0.1rem 0.35rem;
  border-radius: 0.3rem;
  background: rgba(14, 124, 134, 0.14);
  color: #0e7c86;
}

.my-stock-list-page .cs-list-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.my-stock-serials-table .is-focus-row td {
  background: color-mix(in srgb, var(--sea) 8%, transparent);
}

.my-stock-serials-table code {
  font-size: 0.92rem;
}

.equipment-audit-log-table {
  min-width: 44rem;
}

.equipment-audit-log-table th:nth-child(3),
.equipment-audit-log-table td:nth-child(3) {
  text-align: center;
}

.equipment-audit-type {
  display: inline-block;
  font-weight: 750;
  font-size: 0.82rem;
}

.equipment-audit-type.is-stock_in { color: #0f9f6e; }
.equipment-audit-type.is-stock_out { color: #c2410c; }
.equipment-audit-type.is-allocate { color: #2563eb; }
.equipment-audit-type.is-return { color: #64748b; }

@media (max-width: 860px) {
  .equipment-detail-layout {
    grid-template-columns: 1fr;
  }

  .equipment-profile-card,
  .equipment-profile-card.is-collapsed {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }
}

@media (max-width: 520px) {
  .equipment-profile-card-facts {
    grid-template-columns: 1fr;
  }
}

/* ?? Audits page + dashboard toolbar ?? */
.workspace-dash-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--sea) 8%, transparent), transparent 60%),
    var(--surface);
}
.workspace-dash-toolbar-copy {
  margin: 0;
  color: var(--wd-muted, var(--ink-soft));
  font-size: 0.9rem;
  font-weight: 550;
}
.workspace-dash-toolbar .workspace-dash-btn {
  border-radius: 999px;
  font-weight: 700;
}

.audits-page {
  --au-sea: var(--sea, #0c7a84);
  --au-ink: var(--ink, #0b1f2a);
  --au-muted: var(--ink-soft, #4a6573);
  --au-line: var(--border, rgba(11, 31, 42, 0.1));
  --au-warn: #c27803;
  --au-good: #059669;
  --au-radius: 18px;
  width: min(100%, var(--max, 80rem));
  max-width: var(--max, 80rem);
  margin-inline: auto;
  padding-bottom: max(1.35rem, env(safe-area-inset-bottom));
  animation: audits-in 0.45s ease both;
}
@keyframes audits-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.audits-shell {
  display: grid;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--au-sea) 18%, var(--au-line));
  border-radius: var(--au-radius);
  background: var(--surface-solid, var(--surface));
  box-shadow: var(--card-shadow, 0 14px 34px color-mix(in srgb, var(--au-ink) 8%, transparent));
  overflow: clip;
}

.audits-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.95fr);
  gap: 1.1rem 1.4rem;
  padding: 1.2rem 1.25rem 1.15rem;
  border-bottom: 1px solid var(--au-line);
  background:
    radial-gradient(ellipse 55% 90% at 0% -10%, color-mix(in srgb, var(--au-sea) 22%, transparent), transparent 58%),
    radial-gradient(ellipse 40% 70% at 100% 110%, color-mix(in srgb, var(--signal) 12%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--au-sea) 8%, transparent), transparent 70%);
}
.audits-brand {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  min-width: 0;
}
.audits-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--au-sea) 28%, var(--au-line));
  background: color-mix(in srgb, var(--au-sea) 12%, var(--surface));
  color: var(--au-sea);
}
.audits-kicker {
  margin: 0 0 0.2rem;
  color: var(--au-sea);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.audits-hero h1,
.audits-panel-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--au-ink);
}
.audits-hero h1 {
  font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.85rem);
}
.audits-panel-head h2 {
  margin-top: 0.12rem;
  font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.28rem);
}
.audits-lead,
.audits-panel-sub {
  margin: 0.45rem 0 0;
  max-width: 42rem;
  color: var(--au-muted);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.5;
}
.audits-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  margin: 0.75rem 0 0;
  font-size: 0.84rem;
  color: var(--au-muted);
}
.audits-summary strong { color: var(--au-ink); font-weight: 800; }
.audits-pill {
  --pill-tone: var(--au-sea);
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--pill-tone) 28%, var(--au-line));
  background: color-mix(in srgb, var(--pill-tone) 12%, transparent);
  color: var(--pill-tone);
  font-size: 0.72rem;
  font-weight: 750;
  white-space: nowrap;
}
.audits-pill.tone-warn { --pill-tone: var(--au-warn); }
.audits-pill.tone-good { --pill-tone: var(--au-good); }

.audits-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  align-content: start;
}
.audits-stat {
  --stat-tone: var(--au-sea);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem;
  align-items: start;
  min-width: 0;
  padding: 0.75rem 0.8rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--stat-tone) 22%, var(--au-line));
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  animation: audits-stat-in 0.45s ease both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes audits-stat-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.audits-stat:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--stat-tone) 45%, var(--au-line));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--au-ink) 8%, transparent);
}
.audits-stat.is-active {
  background: color-mix(in srgb, var(--stat-tone) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--stat-tone) 48%, var(--au-line));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stat-tone) 18%, transparent);
}
.audits-stat.tone-pay { --stat-tone: #0e7c86; }
.audits-stat.tone-period { --stat-tone: #0369a1; }
.audits-stat.tone-reg { --stat-tone: #0f766e; }
.audits-stat-ico {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  color: var(--stat-tone);
  background: color-mix(in srgb, var(--stat-tone) 14%, transparent);
}
.audits-stat-body { display: grid; gap: 0.08rem; min-width: 0; }
.audits-stat-label,
.audits-stat-meta,
.audits-field-label {
  margin: 0;
  color: var(--au-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.audits-stat-value {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--au-ink);
  line-height: 1.1;
}
.audits-stat-meta { font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 0.75rem; }

.audits-toolbar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--au-line);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px);
}
.audits-seg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  padding: 0.3rem;
  border-radius: 14px;
  border: 1px solid var(--au-line);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 88%, transparent);
}
.audits-seg-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border-radius: 11px;
  color: var(--au-muted);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.86rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.audits-seg-item:hover { color: var(--au-ink); background: color-mix(in srgb, var(--au-sea) 8%, transparent); }
.audits-seg-item.is-active {
  color: var(--au-sea);
  background: var(--surface);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--au-ink) 8%, transparent);
}
.audits-seg-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.audits-seg-count {
  flex: 0 0 auto;
  min-width: 1.4rem;
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--au-sea) 12%, transparent);
  color: var(--au-sea);
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
}
.audits-seg-item.is-active .audits-seg-count {
  background: color-mix(in srgb, var(--au-sea) 18%, transparent);
}

.audits-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}
.audits-search {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--au-line);
  background: var(--surface);
  color: var(--au-muted);
}
.audits-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--au-ink);
  font: inherit;
  font-size: 0.9rem;
}
.audits-search:focus-within {
  border-color: color-mix(in srgb, var(--au-sea) 45%, var(--au-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--au-sea) 14%, transparent);
}
.audits-filter-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.audits-filter-pill {
  appearance: none;
  border: 1px solid var(--au-line);
  background: var(--surface);
  color: var(--au-muted);
  border-radius: 999px;
  padding: 0.38rem 0.7rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.audits-filter-pill:hover { color: var(--au-ink); }
.audits-filter-pill.is-active {
  color: var(--au-sea);
  border-color: color-mix(in srgb, var(--au-sea) 40%, var(--au-line));
  background: color-mix(in srgb, var(--au-sea) 12%, transparent);
}

.audits-panel {
  padding: 1.05rem 1.15rem 1.25rem;
}
.audits-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 0.95rem;
}
.audits-panel-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}
.audits-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--au-line);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--au-ink);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 90%, transparent);
}
.audits-chip.is-warn {
  color: #a16207;
  border-color: color-mix(in srgb, var(--au-warn) 35%, transparent);
  background: color-mix(in srgb, var(--au-warn) 10%, transparent);
}
.audits-live-count {
  margin: 0;
  color: var(--au-muted);
  font-size: 0.8rem;
  font-weight: 650;
}

.audits-list-shell {
  overflow-x: auto;
  border: 1px solid var(--au-line);
  border-radius: 14px;
  background: var(--surface);
}
.audits-list {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
.audits-list th,
.audits-list td {
  padding: 0.78rem 0.9rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--au-line);
}
.audits-list thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--au-muted);
  background: color-mix(in srgb, var(--au-sea) 7%, var(--surface));
  font-weight: 800;
  white-space: nowrap;
}
.audits-list tbody tr {
  transition: background 0.12s ease;
}
.audits-list tbody tr:hover {
  background: color-mix(in srgb, var(--au-sea) 5%, transparent);
}
.audits-list tbody tr.is-edited {
  background: color-mix(in srgb, var(--au-warn) 7%, transparent);
}
.audits-list tbody tr.is-edited:hover {
  background: color-mix(in srgb, var(--au-warn) 11%, transparent);
}
.audits-list tbody tr[hidden] {
  display: none !important;
}
.audits-list tbody tr:last-child td {
  border-bottom: 0;
}
.audits-list td strong {
  display: block;
  color: var(--au-ink);
  font-weight: 700;
}
.audits-client-link {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--au-ink);
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.audits-client-link:hover { color: var(--au-sea); }
.audits-field-note {
  display: block;
  margin-top: 0.18rem;
  color: var(--au-muted);
  font-size: 0.76rem;
  line-height: 1.35;
}
.audits-username {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.18rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--au-line);
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 90%, transparent);
  color: var(--au-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.audits-delta {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}
.audits-delta.is-hot { color: #a16207; }
.audits-window { font-size: 0.86rem; font-weight: 700; }

.audits-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 780;
  letter-spacing: 0.01em;
}
.audits-badge.is-good {
  color: #047857;
  background: color-mix(in srgb, var(--au-good) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--au-good) 22%, transparent);
}
.audits-badge.is-warn {
  color: #a16207;
  background: color-mix(in srgb, var(--au-warn) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--au-warn) 22%, transparent);
}

.audits-empty,
.audits-empty-filter {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: 2.2rem 1rem;
  text-align: center;
  color: var(--au-muted);
}
.audits-empty-ico {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  margin-bottom: 0.35rem;
  border-radius: 16px;
  color: var(--au-sea);
  background: color-mix(in srgb, var(--au-sea) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--au-sea) 18%, transparent);
}
.audits-empty-title {
  margin: 0;
  color: var(--au-ink);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 780;
}
.audits-empty-copy,
.audits-empty-filter {
  margin: 0;
  max-width: 28rem;
  font-size: 0.9rem;
  line-height: 1.45;
}

[data-theme="dark"] .audits-shell,
[data-theme="dark"] .audits-list-shell,
[data-theme="dark"] .audits-stat,
[data-theme="dark"] .audits-search,
[data-theme="dark"] .audits-filter-pill,
[data-theme="dark"] .workspace-dash-toolbar {
  background: color-mix(in srgb, #101820 92%, transparent);
}
[data-theme="dark"] .audits-toolbar,
[data-theme="dark"] .audits-list thead th {
  background: color-mix(in srgb, #101820 88%, transparent);
}
[data-theme="dark"] .audits-seg-item.is-active {
  background: #16232c;
}

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

@media (max-width: 720px) {
  .audits-shell { border-radius: 14px; }
  .audits-hero,
  .audits-toolbar,
  .audits-panel {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }
  .audits-hero-stats {
    grid-template-columns: 1fr;
  }
  .audits-stat { grid-template-columns: auto 1fr; }
  .audits-seg {
    grid-template-columns: 1fr;
  }
  .audits-seg-item { justify-content: space-between; }
  .audits-filters { width: 100%; }
  .audits-search { flex-basis: 100%; }

  .audits-list {
    min-width: 0;
  }
  .audits-list thead {
    display: none;
  }
  .audits-list tbody tr {
    display: grid;
    gap: 0.55rem;
    padding: 0.9rem 0.85rem;
    border-bottom: 1px solid var(--au-line);
  }
  .audits-list tbody td {
    display: grid;
    grid-template-columns: 7.2rem minmax(0, 1fr);
    gap: 0.45rem;
    align-items: start;
    border: 0;
    padding: 0;
  }
  .audits-list tbody td::before {
    content: attr(data-label);
    color: var(--au-muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
}

@media (prefers-reduced-motion: reduce) {
  .audits-page,
  .audits-stat {
    animation: none;
  }
  .audits-stat:hover {
    transform: none;
  }
}

/* NOC ops console ----------------------------------------------------------- */
.staff-app:has(.noc-console) .staff-main,
.client-app:has(.noc-console) .staff-main {
  overflow-x: clip;
  max-width: 100%;
}

.noc-console {
  --noc-ink: var(--ink, #071820);
  --noc-muted: var(--ink-soft, #3d5a66);
  --noc-line: var(--border-strong, rgba(7, 24, 32, 0.14));
  --noc-crit: var(--danger, #c0392b);
  --noc-maj: #b45309;
  --noc-min: var(--sea-deep, #07545c);
  --noc-ok: var(--success, #145c3c);
  --noc-info: #475569;
  --noc-glow: color-mix(in srgb, var(--sea, #0c7a84) 18%, transparent);
  --noc-panel:
    linear-gradient(165deg, color-mix(in srgb, var(--surface-solid, #fff) 88%, #eaf5f7), var(--surface, rgba(255, 255, 255, 0.78)));
  --noc-radius: calc(var(--radius, 18px) - 2px);
  display: grid;
  gap: 0.9rem;
  width: 100%;
  max-width: 96rem;
  margin-inline: auto;
  min-width: 0;
  padding-bottom: max(1.4rem, env(safe-area-inset-bottom));
  font-family: var(--font-body, "Plus Jakarta Sans", system-ui, sans-serif);
  color: var(--noc-ink);
  animation: noc-in 0.45s ease both;
}

@keyframes noc-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.noc-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.15rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.noc-bar-left,
.noc-bar-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.noc-bar-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--noc-line);
  border-radius: 999px;
  color: var(--noc-muted);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.noc-bar-stat strong {
  color: var(--noc-ink);
  font-weight: 800;
}

.noc-bar-stat.sev-critical strong { color: var(--noc-crit); }
.noc-bar-stat.sev-major strong { color: var(--noc-maj); }

.noc-kicker,
.noc-pane-kicker,
.noc-inspect-label {
  margin: 0;
  color: var(--sea, #0c7a84);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.noc-live-pill,
.noc-clock,
.noc-sev-tag,
.noc-pane-count {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.65rem;
  border: 1px solid var(--noc-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-solid, #fff) 80%, transparent);
  color: var(--noc-muted);
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
}

.noc-live-pill {
  position: relative;
  padding-left: 1.15rem;
  color: var(--sea-deep, #07545c);
  border-color: color-mix(in srgb, var(--sea, #0c7a84) 35%, var(--noc-line));
  background: color-mix(in srgb, var(--sea, #0c7a84) 10%, var(--surface-solid, #fff));
}

.noc-live-pill::before {
  content: "";
  position: absolute;
  left: 0.45rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--sea, #0c7a84);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--sea, #0c7a84) 55%, transparent);
  animation: noc-pulse 1.6s ease-out infinite;
}

@keyframes noc-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sea, #0c7a84) 45%, transparent); }
  70% { box-shadow: 0 0 0 0.45rem transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.noc-metrics {
  display: none;
}

.noc-toolbar .noc-display-toggle,
.noc-filters .noc-display-toggle {
  display: none;
}

.noc-metric {
  flex: 1 0 auto;
  min-width: 7.5rem;
  display: grid;
  gap: 0.2rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--noc-line);
  border-radius: 12px;
  background: var(--noc-panel);
  text-align: left;
  cursor: pointer;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.noc-metric.is-readonly {
  cursor: default;
}

.noc-metric.is-critical { box-shadow: inset 3px 0 0 var(--noc-crit); }
.noc-metric.is-major { box-shadow: inset 3px 0 0 var(--noc-maj); }
.noc-metric.is-minor { box-shadow: inset 3px 0 0 var(--noc-min); }
.noc-metric.is-all { box-shadow: inset 3px 0 0 var(--sea, #0c7a84); }
.noc-metric.tone-ok { box-shadow: inset 3px 0 0 var(--noc-ok); }
.noc-metric.sev-critical { box-shadow: inset 3px 0 0 var(--noc-crit); }
.noc-metric.sev-major { box-shadow: inset 3px 0 0 var(--noc-maj); }

.noc-metric.is-active {
  border-color: color-mix(in srgb, var(--sea, #0c7a84) 45%, var(--noc-line));
  box-shadow:
    inset 3px 0 0 var(--sea, #0c7a84),
    0 0 0 1px color-mix(in srgb, var(--sea, #0c7a84) 20%, transparent);
}

.noc-metric span {
  color: var(--noc-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.noc-metric strong {
  font-family: var(--font-display, "Outfit", system-ui, sans-serif);
  font-size: 1.35rem;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1;
}

.noc-toolbar,
.noc-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.35rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.noc-search {
  position: relative;
  flex: 1 1 14rem;
  min-width: min(100%, 11rem);
  max-width: 22rem;
}

.noc-search::before {
  content: "";
  position: absolute;
  left: 0.8rem;
  top: 50%;
  width: 0.78rem;
  height: 0.78rem;
  border: 1.6px solid currentColor;
  border-radius: 50%;
  color: var(--noc-muted);
  opacity: 0.65;
  transform: translateY(-55%);
  pointer-events: none;
  z-index: 1;
}

.noc-search::after {
  content: "";
  position: absolute;
  left: 1.35rem;
  top: calc(50% + 0.26rem);
  width: 0.36rem;
  height: 1.6px;
  background: currentColor;
  color: var(--noc-muted);
  opacity: 0.65;
  transform: rotate(45deg);
  pointer-events: none;
  z-index: 1;
}

.noc-search input,
.noc-toolbar select,
.noc-filters select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 2.2rem;
  padding: 0.4rem 0.8rem 0.4rem 2.15rem;
  border: 1px solid color-mix(in srgb, var(--noc-line) 85%, transparent);
  border-radius: 10px;
  background: var(--input-bg, var(--surface-solid, #fff));
  color: inherit;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 550;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(7, 24, 32, 0.03);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.noc-toolbar select,
.noc-filters select {
  flex: 0 1 auto;
  width: auto;
  min-width: 8.5rem;
  max-width: 14rem;
  padding: 0.4rem 2rem 0.4rem 0.75rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--noc-muted) 50%),
    linear-gradient(135deg, var(--noc-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 0.95rem) calc(50% - 0.12rem),
    calc(100% - 0.65rem) calc(50% - 0.12rem);
  background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
  background-repeat: no-repeat;
  cursor: pointer;
}

.noc-search input:hover,
.noc-toolbar select:hover,
.noc-filters select:hover {
  border-color: color-mix(in srgb, var(--sea, #0c7a84) 28%, var(--noc-line));
}

.noc-search input:focus,
.noc-toolbar select:focus,
.noc-filters select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--sea, #0c7a84) 55%, var(--noc-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sea, #0c7a84) 16%, transparent);
}

.noc-search input::placeholder {
  color: color-mix(in srgb, var(--noc-muted) 78%, transparent);
}

.noc-check {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  min-height: 2.2rem;
  padding: 0 0.65rem;
  border: 1px solid color-mix(in srgb, var(--noc-line) 85%, transparent);
  border-radius: 10px;
  background: var(--surface-solid, #fff);
  color: var(--noc-muted);
  font-size: 0.78rem;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 1px 2px rgba(7, 24, 32, 0.03);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.noc-check:hover {
  border-color: color-mix(in srgb, var(--sea, #0c7a84) 28%, var(--noc-line));
  color: var(--noc-ink);
}

.noc-check:has(input:checked) {
  border-color: color-mix(in srgb, var(--sea, #0c7a84) 40%, var(--noc-line));
  background: color-mix(in srgb, var(--sea, #0c7a84) 8%, var(--surface-solid, #fff));
  color: var(--sea-deep, #07545c);
}

.noc-check input {
  appearance: none;
  -webkit-appearance: none;
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
  border: 1.5px solid color-mix(in srgb, var(--noc-muted) 55%, var(--noc-line));
  border-radius: 4px;
  background: var(--surface-solid, #fff);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.noc-check input:checked {
  border-color: var(--sea, #0c7a84);
  background-color: var(--sea, #0c7a84);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.2 5 8.7 9.5 3.5'/%3E%3C/svg%3E");
  background-size: 0.7rem 0.7rem;
  background-position: center;
  background-repeat: no-repeat;
}

.noc-check input:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--sea, #0c7a84) 45%, transparent);
  outline-offset: 2px;
}

.noc-toolbar .noc-display-toggle,
.noc-filters .noc-display-toggle,
.noc-filter-actions {
  margin-left: auto;
}

.noc-filter-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.noc-layout,
.noc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.8rem;
  min-height: min(58vh, 36rem);
  align-items: stretch;
}

.noc-detail-panel {
  border: 1px solid var(--noc-line);
  border-radius: var(--noc-radius);
  background: var(--noc-panel);
  box-shadow: var(--card-shadow, 0 18px 40px rgba(7, 24, 32, 0.08));
  overflow: hidden;
}

.noc-detail-panel[hidden] {
  display: none !important;
}

.noc-detail-head {
  padding: 0.75rem 0.95rem;
  border-bottom: 1px solid var(--noc-line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--sea, #0c7a84) 7%, transparent), transparent);
}

.noc-detail-head h2 {
  margin: 0;
  font-family: var(--font-display, "Outfit", system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 750;
}

.noc-detail-panel .noc-inspector-body {
  padding: 0.85rem 0.95rem 1rem;
}

.noc-events-pane {
  min-height: auto;
}

.noc-timeline-compact .noc-tl-body {
  padding: 0.5rem 0.65rem;
}

.noc-timeline-compact .noc-tl-body strong {
  font-size: 0.85rem;
}

.noc-dl-compact {
  margin-bottom: 0.75rem;
  padding: 0.55rem 0.65rem;
}

.noc-dl-compact > div {
  grid-template-columns: 5rem minmax(0, 1fr);
  font-size: 0.82rem;
}

.noc-pane {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--noc-line);
  border-radius: var(--noc-radius);
  background: var(--noc-panel);
  box-shadow: var(--card-shadow, 0 18px 40px rgba(7, 24, 32, 0.08));
  overflow: hidden;
}

.noc-pane-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 0.95rem;
  border-bottom: 1px solid var(--noc-line);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sea, #0c7a84) 7%, transparent), transparent);
}

.noc-pane-head h2 {
  margin: 0;
  font-family: var(--font-display, "Outfit", system-ui, sans-serif);
  font-size: 0.98rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.noc-view-toggle {
  display: inline-flex;
  padding: 0.15rem;
  border: 1px solid var(--noc-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-3, rgba(7, 24, 32, 0.045)) 80%, transparent);
}

.noc-view-toggle button {
  border: 0;
  background: transparent;
  color: var(--noc-muted);
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 750;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.noc-view-toggle button.is-active {
  background: color-mix(in srgb, var(--sea, #0c7a84) 16%, var(--surface-solid, #fff));
  color: var(--sea-deep, #07545c);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset;
}

.noc-alarm-list,
.noc-matrix-body,
.noc-inspector-body,
.noc-timeline-list {
  min-height: 0;
  overflow: auto;
  padding: 0.75rem;
  scrollbar-width: thin;
}

.noc-alarm {
  display: grid;
  gap: 0.4rem;
  width: 100%;
  margin: 0 0 0.6rem;
  padding: 0.8rem 0.85rem;
  border: 1px solid var(--noc-line);
  border-left-width: 3px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, #fff 35%, transparent), transparent 40%),
    color-mix(in srgb, var(--surface-solid, #fff) 88%, transparent);
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.noc-alarm:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(7, 24, 32, 0.07);
}

.noc-alarm.sev-critical { border-left-color: var(--noc-crit); }
.noc-alarm.sev-major { border-left-color: var(--noc-maj); }
.noc-alarm.sev-minor { border-left-color: var(--noc-min); }
.noc-alarm.sev-info { border-left-color: var(--noc-info); }

.noc-alarm.is-selected {
  border-color: color-mix(in srgb, var(--sea, #0c7a84) 40%, var(--noc-line));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sea, #0c7a84) 22%, transparent),
    0 12px 24px rgba(7, 24, 32, 0.08);
}

.noc-alarm.is-acked { opacity: 0.52; filter: grayscale(0.15); }

.noc-alarm h3 {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.noc-alarm p {
  margin: 0;
  color: var(--noc-muted);
  font-size: 0.82rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.noc-alarm-top,
.noc-alarm-meta,
.noc-alarm-actions,
.noc-fleet-meta,
.noc-site-stats,
.noc-tl-top,
.noc-inspect-actions,
.noc-site-top,
.noc-fleet-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.65rem;
  align-items: center;
  justify-content: space-between;
  color: var(--noc-muted);
  font-size: 0.74rem;
}

.noc-sev-tag {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.16rem 0.5rem;
}

.noc-alarm.sev-critical .noc-sev-tag,
.noc-site-card.sev-critical .noc-sev-tag,
.noc-fleet-card.sev-critical .noc-sev-tag,
.noc-inspect-hero.sev-critical .noc-sev-tag,
.noc-tl-item.sev-critical .noc-sev-tag {
  color: var(--noc-crit);
  border-color: color-mix(in srgb, var(--noc-crit) 35%, var(--noc-line));
  background: color-mix(in srgb, var(--noc-crit) 10%, transparent);
}

.noc-alarm.sev-major .noc-sev-tag,
.noc-site-card.sev-major .noc-sev-tag,
.noc-fleet-card.sev-major .noc-sev-tag,
.noc-inspect-hero.sev-major .noc-sev-tag,
.noc-tl-item.sev-major .noc-sev-tag {
  color: var(--noc-maj);
  border-color: color-mix(in srgb, var(--noc-maj) 35%, var(--noc-line));
  background: color-mix(in srgb, var(--noc-maj) 10%, transparent);
}

.noc-alarm.sev-minor .noc-sev-tag,
.noc-site-card.sev-minor .noc-sev-tag,
.noc-fleet-card.sev-minor .noc-sev-tag,
.noc-tl-item.sev-minor .noc-sev-tag {
  color: var(--noc-min);
  border-color: color-mix(in srgb, var(--noc-min) 35%, var(--noc-line));
  background: color-mix(in srgb, var(--noc-min) 10%, transparent);
}

.noc-site-card.sev-ok .noc-sev-tag,
.noc-fleet-card.sev-ok .noc-sev-tag,
.noc-inspect-hero.sev-ok .noc-sev-tag {
  color: var(--noc-ok);
  border-color: color-mix(in srgb, var(--noc-ok) 35%, var(--noc-line));
  background: color-mix(in srgb, var(--noc-ok) 10%, transparent);
}

.noc-site-grid,
.noc-fleet-grid {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}

.noc-site-card,
.noc-fleet-card {
  display: grid;
  gap: 0.45rem;
  padding: 0.8rem;
  border: 1px solid var(--noc-line);
  border-radius: 14px;
  background:
    linear-gradient(160deg, color-mix(in srgb, #fff 40%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface-solid, #fff) 90%, transparent);
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.noc-site-card:hover,
.noc-fleet-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(7, 24, 32, 0.08);
}

.noc-site-card.is-selected,
.noc-fleet-card.is-selected {
  border-color: color-mix(in srgb, var(--sea, #0c7a84) 42%, var(--noc-line));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sea, #0c7a84) 20%, transparent),
    0 12px 24px rgba(7, 24, 32, 0.08);
}

.noc-site-top strong,
.noc-fleet-top strong {
  font-size: 0.92rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.noc-fleet-host {
  color: var(--noc-muted);
  font-size: 0.76rem;
  font-family: var(--font-mono, ui-monospace, monospace);
}

.noc-spark {
  width: 100%;
  max-width: 8.5rem;
  color: var(--noc-ok);
  opacity: 0.95;
}

.noc-spark.tone-warn { color: var(--noc-maj); }
.noc-spark.tone-bad { color: var(--noc-crit); }

.noc-spark-empty {
  color: var(--noc-muted);
  font-size: 0.75rem;
}

.noc-inspect-hero {
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--noc-line);
  border-radius: 14px;
  margin-bottom: 0.8rem;
  border-left-width: 3px;
  background:
    radial-gradient(ellipse 70% 90% at 100% 0%, var(--noc-glow), transparent 55%),
    color-mix(in srgb, var(--surface-solid, #fff) 88%, transparent);
}

.noc-inspect-hero.sev-critical { border-left-color: var(--noc-crit); }
.noc-inspect-hero.sev-major { border-left-color: var(--noc-maj); }
.noc-inspect-hero.sev-minor { border-left-color: var(--noc-min); }
.noc-inspect-hero.sev-ok { border-left-color: var(--noc-ok); }

.noc-inspect-hero > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.noc-inspect-hero strong {
  font-family: var(--font-display, "Outfit", system-ui, sans-serif);
  font-size: 1.05rem;
  font-weight: 750;
}

.noc-inspect-hero p {
  margin: 0.4rem 0 0;
  color: var(--noc-muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

.noc-score {
  margin-left: auto;
  font-family: var(--font-display, "Outfit", system-ui, sans-serif);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--sea-deep, #07545c);
}

.noc-inspect-block { margin-bottom: 0.95rem; }

.noc-dl {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 0.95rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--noc-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-3, rgba(7, 24, 32, 0.045)) 70%, transparent);
}

.noc-dl > div {
  display: grid;
  grid-template-columns: 6.2rem minmax(0, 1fr);
  gap: 0.45rem;
  font-size: 0.84rem;
}

.noc-dl dt {
  margin: 0;
  color: var(--noc-muted);
  font-weight: 650;
}

.noc-dl dd {
  margin: 0;
  color: var(--noc-ink);
  overflow-wrap: anywhere;
}

.noc-impact-list {
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.noc-impact-list li {
  display: grid;
  gap: 0.18rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--noc-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-solid, #fff) 86%, transparent);
}

.noc-impact-list a {
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}

.noc-impact-list a:hover {
  color: var(--sea, #0c7a84);
  text-decoration: underline;
}

.noc-impact-list span {
  color: var(--noc-muted);
  font-size: 0.78rem;
}

.noc-muted { color: var(--noc-muted); font-size: 0.8rem; }

.noc-timeline {
  min-height: 13rem;
  scroll-margin-top: 1rem;
}

.noc-timeline-list {
  display: grid;
  gap: 0.35rem;
}

.noc-tl-item {
  display: grid;
  grid-template-columns: 0.7rem minmax(0, 1fr);
  gap: 0.7rem;
  padding: 0.2rem 0.15rem;
}

.noc-tl-rail {
  width: 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--noc-info) 30%, transparent);
  min-height: 100%;
}

.noc-tl-item.sev-critical .noc-tl-rail { background: var(--noc-crit); }
.noc-tl-item.sev-major .noc-tl-rail { background: var(--noc-maj); }
.noc-tl-item.sev-minor .noc-tl-rail { background: var(--noc-min); }
.noc-tl-item.sev-info .noc-tl-rail { background: var(--sea, #0c7a84); }

.noc-tl-body {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--noc-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-solid, #fff) 88%, transparent);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.noc-tl-body:hover {
  transform: translateX(2px);
  border-color: color-mix(in srgb, var(--sea, #0c7a84) 35%, var(--noc-line));
}

.noc-tl-item.is-current .noc-tl-body {
  border-color: color-mix(in srgb, var(--noc-crit) 30%, var(--noc-line));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--noc-crit) 8%, transparent);
}

.noc-tl-body strong {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.9rem;
  font-weight: 750;
}

.noc-tl-body p {
  margin: 0.25rem 0 0;
  color: var(--noc-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.noc-empty {
  display: grid;
  place-items: center;
  gap: 0.35rem;
  min-height: 10rem;
  padding: 1.4rem 1rem;
  text-align: center;
  border: 1px dashed color-mix(in srgb, var(--sea, #0c7a84) 25%, var(--noc-line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--sea, #0c7a84) 4%, transparent);
}

.noc-empty-title {
  margin: 0;
  font-family: var(--font-display, "Outfit", system-ui, sans-serif);
  font-weight: 750;
  color: var(--noc-ink);
}

.noc-empty-copy {
  margin: 0;
  max-width: 22rem;
  color: var(--noc-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

[data-theme="dark"] .noc-console {
  --noc-panel:
    linear-gradient(165deg, color-mix(in srgb, var(--surface-solid, #1a2530) 92%, #0c7a84), var(--surface, rgba(24, 34, 42, 0.9)));
}

[data-theme="dark"] .noc-live-pill {
  color: var(--sea-deep, #9ae8ef);
}

@media (max-width: 960px) {
  .noc-layout,
  .noc-grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .noc-layout > .noc-pane:first-child {
    min-height: 16rem;
  }
  .noc-layout > .noc-pane:last-child {
    min-height: 14rem;
  }
}

@media (max-width: 820px) {
  .noc-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .noc-bar-left,
  .noc-bar-actions {
    justify-content: flex-start;
  }
  .noc-toolbar,
  .noc-filters {
    flex-direction: column;
    align-items: stretch;
  }
  .noc-search {
    max-width: none;
    width: 100%;
  }
  .noc-toolbar select,
  .noc-filters select,
  .noc-check {
    width: 100%;
    max-width: none;
    justify-content: flex-start;
  }
  .noc-display-toggle {
    margin-left: 0;
    width: 100%;
  }
  .noc-display-toggle button {
    flex: 1 1 50%;
    justify-content: center;
  }
  .noc-dl > div,
  .noc-dl-compact > div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
  .noc-metric {
    min-width: 6.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .noc-console,
  .noc-metric,
  .noc-alarm,
  .noc-site-card,
  .noc-fleet-card,
  .noc-tl-body,
  .noc-live-pill::before {
    animation: none;
    transition: none;
  }
}

/* Shared ops chrome + NOC related modes ------------------------------------ */
.ops-kicker {
  margin: 0 0 0.2rem;
  color: var(--sea, #0c7a84);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ops-surface .mikrotik-fleet-head,
.ops-surface .clients-workspace-head {
  background:
    radial-gradient(ellipse 55% 80% at 0% 0%, color-mix(in srgb, var(--sea, #0c7a84) 16%, transparent), transparent 55%),
    radial-gradient(ellipse 40% 70% at 100% 100%, color-mix(in srgb, var(--signal, #e09a12) 10%, transparent), transparent 50%),
    linear-gradient(180deg, color-mix(in srgb, var(--sea, #0c7a84) 8%, transparent), transparent 78%);
}

.mikrotik-page.ops-surface {
  max-width: 96rem;
  width: 100%;
}

.mikrotik-page.ops-surface .mikrotik-fleet {
  border-radius: calc(var(--radius, 18px) - 2px);
  box-shadow: var(--card-shadow, 0 18px 40px rgba(7, 24, 32, 0.08));
}

.mikrotik-page.ops-surface .mikrotik-fleet-title h1,
.clients-dash.ops-surface .clients-workspace-title h1 {
  font-size: clamp(1.35rem, 1.05rem + 1vw, 1.85rem);
  letter-spacing: -0.02em;
}

.noc-view {
  display: grid;
  gap: 0.75rem;
}

.noc-view[hidden] {
  display: none !important;
}

/* Compact KPI strip ------------------------------------------------------- */
.noc-kpi-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: stretch;
}

.noc-kpi-chip {
  display: inline-grid;
  gap: 0.1rem;
  min-width: 5.5rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--noc-line, var(--border)) 88%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-solid, #fff) 92%, transparent);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.noc-kpi-chip.is-readonly {
  cursor: default;
}

.noc-kpi-chip.is-critical { border-left: 3px solid var(--noc-crit, #c0392b); }
.noc-kpi-chip.is-major { border-left: 3px solid var(--noc-maj, #b45309); }
.noc-kpi-chip.is-minor { border-left: 3px solid var(--noc-min, #07545c); }
.noc-kpi-chip.is-all { border-left: 3px solid var(--sea, #0c7a84); }
.noc-kpi-chip.tone-ok { border-left: 3px solid var(--noc-ok, #145c3c); }
.noc-kpi-chip.sev-critical { border-left: 3px solid var(--noc-crit, #c0392b); }
.noc-kpi-chip.sev-major { border-left: 3px solid var(--noc-maj, #b45309); }

.noc-kpi-chip.is-active {
  border-color: color-mix(in srgb, var(--sea, #0c7a84) 42%, var(--noc-line, var(--border)));
  background: color-mix(in srgb, var(--sea, #0c7a84) 8%, var(--surface-solid, #fff));
}

.noc-kpi-chip span {
  color: var(--noc-muted, #3d5a66);
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.noc-kpi-chip strong {
  font-family: var(--font-display, "Outfit", system-ui, sans-serif);
  font-size: 1.15rem;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.noc-kpi-chip em {
  font-style: normal;
  color: var(--noc-muted, #3d5a66);
  font-size: 0.68rem;
  font-weight: 650;
}

/* Unified stage: one trend + raw lists ------------------------------------ */
.noc-stage {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.noc-trend {
  padding: 0.85rem 1rem 1rem;
  border: 1px solid var(--noc-line, var(--border));
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sea, #0c7a84) 5%, transparent), transparent 55%),
    color-mix(in srgb, var(--surface-solid, #fff) 94%, transparent);
  min-width: 0;
}

.noc-section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.55rem;
}

.noc-section-head h2 {
  margin: 0;
  font-family: var(--font-display, "Outfit", system-ui, sans-serif);
  font-size: 0.95rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.noc-section-head p {
  margin: 0.15rem 0 0;
  color: var(--noc-muted, #3d5a66);
  font-size: 0.74rem;
  line-height: 1.3;
}

.noc-trend-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9.5rem, 12rem);
  gap: 0.75rem 1rem;
  align-items: center;
}

.noc-mix {
  min-width: 0;
}

.noc-chart-tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.25rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--noc-line, var(--border));
  background: color-mix(in srgb, var(--sea, #0c7a84) 8%, transparent);
  color: var(--sea-deep, #07545c);
  font-size: 0.68rem;
  font-weight: 750;
  white-space: nowrap;
}

.noc-chart-wrap {
  position: relative;
  min-height: 8.5rem;
}

.noc-chart-wrap-trend {
  min-height: 11rem;
}

.noc-chart-wrap-mix {
  min-height: 9.5rem;
}

.noc-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

.noc-raw {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  min-width: 0;
  align-items: start;
}

.noc-list-block,
.noc-detail-drawer {
  min-width: 0;
  border: 1px solid var(--noc-line, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-solid, #fff) 94%, transparent);
  overflow: hidden;
}

.noc-list-block > .noc-section-head,
.noc-detail-drawer > .noc-section-head {
  margin: 0;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--noc-line, var(--border));
  background: color-mix(in srgb, var(--sea, #0c7a84) 4%, transparent);
}

.noc-list-block-wide {
  grid-column: 1 / -1;
}

.noc-raw-list,
.noc-list-block .noc-table-wrap,
.noc-list-block .noc-inspector-body,
.noc-detail-drawer .noc-inspector-body {
  max-height: min(42vh, 28rem);
  overflow: auto;
  padding: 0.35rem 0.45rem;
  scrollbar-width: thin;
}

.noc-list-block .noc-table-wrap {
  padding: 0;
}

.noc-list-block .noc-table-wrap .org-table {
  margin: 0;
}

.noc-list-block .noc-table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--surface-2, #f7fbfc) 92%, #fff);
}

/* Flat raw-data rows (less card chrome) ----------------------------------- */
.noc-row-item {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto auto;
  gap: 0.45rem 0.65rem;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.55rem;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--noc-line, var(--border)) 70%, transparent);
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}

.noc-row-item:last-child {
  border-bottom: 0;
}

.noc-row-item:hover,
.noc-row-item.is-selected {
  background: color-mix(in srgb, var(--sea, #0c7a84) 6%, transparent);
}

.noc-row-item.is-acked {
  opacity: 0.55;
}

.noc-row-sev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.35rem;
  padding: 0.12rem 0.4rem;
  border-radius: 6px;
  border: 1px solid var(--noc-line, var(--border));
  color: var(--noc-muted, #3d5a66);
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.noc-row-item.sev-critical .noc-row-sev {
  color: var(--noc-crit, #c0392b);
  border-color: color-mix(in srgb, var(--noc-crit, #c0392b) 35%, var(--noc-line, var(--border)));
  background: color-mix(in srgb, var(--noc-crit, #c0392b) 8%, transparent);
}

.noc-row-item.sev-major .noc-row-sev {
  color: var(--noc-maj, #b45309);
  border-color: color-mix(in srgb, var(--noc-maj, #b45309) 35%, var(--noc-line, var(--border)));
  background: color-mix(in srgb, var(--noc-maj, #b45309) 8%, transparent);
}

.noc-row-item.sev-minor .noc-row-sev,
.noc-row-item.sev-ok .noc-row-sev {
  color: var(--noc-min, #07545c);
  border-color: color-mix(in srgb, var(--noc-min, #07545c) 30%, var(--noc-line, var(--border)));
  background: color-mix(in srgb, var(--noc-min, #07545c) 7%, transparent);
}

.noc-row-main {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}

.noc-row-main strong {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.noc-row-meta {
  color: var(--noc-muted, #3d5a66);
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.noc-row-time,
.noc-row-score {
  color: var(--noc-muted, #3d5a66);
  font-size: 0.72rem;
  font-weight: 650;
  white-space: nowrap;
}

.noc-row-score {
  font-family: var(--font-display, "Outfit", system-ui, sans-serif);
  font-size: 0.84rem;
  font-weight: 750;
  color: var(--sea-deep, #07545c);
}

.noc-row-action {
  appearance: none;
  border: 1px solid var(--noc-line, var(--border));
  border-radius: 8px;
  background: var(--surface-solid, #fff);
  color: var(--noc-muted, #3d5a66);
  min-height: 1.7rem;
  padding: 0.2rem 0.55rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.noc-row-action:hover {
  color: var(--sea-deep, #07545c);
  border-color: color-mix(in srgb, var(--sea, #0c7a84) 35%, var(--noc-line, var(--border)));
}

.noc-detail-drawer[hidden] {
  display: none !important;
}

.noc-detail-drawer {
  grid-column: 1 / -1;
}

.noc-toolbar .noc-display-toggle {
  display: none;
}

@media (max-width: 1100px) {
  .noc-trend-grid {
    grid-template-columns: 1fr minmax(8.5rem, 11rem);
  }
}

@media (max-width: 900px) {
  .noc-raw {
    grid-template-columns: 1fr;
  }
  .noc-list-block-wide {
    grid-column: auto;
  }
}

@media (max-width: 820px) {
  .noc-trend-grid {
    grid-template-columns: 1fr;
  }
  .noc-chart-wrap-trend,
  .noc-chart-wrap-mix {
    min-height: 8.5rem;
  }
  .noc-row-item {
    grid-template-columns: 4.8rem minmax(0, 1fr);
  }
  .noc-row-time,
  .noc-row-score,
  .noc-row-action {
    grid-column: 2;
    justify-self: start;
  }
  .noc-raw-list,
  .noc-list-block .noc-table-wrap,
  .noc-detail-drawer .noc-inspector-body {
    max-height: min(55vh, 24rem);
  }
}

.noc-chart-empty {
  display: grid;
  place-items: center;
  min-height: 7rem;
  margin: 0;
  padding: 0.85rem;
  text-align: center;
  color: var(--noc-muted, var(--ink-soft, #3d5a66));
  font-size: 0.78rem;
  border: 1px dashed color-mix(in srgb, var(--sea, #0c7a84) 22%, var(--noc-line, var(--border)));
  border-radius: 10px;
  background: color-mix(in srgb, var(--sea, #0c7a84) 4%, transparent);
}

.noc-kpi-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.65rem;
}

.noc-kpi {
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 14px;
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--surface-solid, #fff) 88%, #eaf5f7), var(--surface, rgba(255,255,255,0.78)));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--sea, #0c7a84) 45%, transparent);
}

.noc-kpi.sev-critical { box-shadow: inset 3px 0 0 var(--danger, #c0392b); }
.noc-kpi.sev-major { box-shadow: inset 3px 0 0 #b45309; }
.noc-kpi.tone-ok { box-shadow: inset 3px 0 0 var(--success, #145c3c); }

.noc-kpi-label {
  margin: 0;
  color: var(--ink-soft, #3d5a66);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.noc-kpi-value {
  margin: 0.3rem 0 0;
  font-family: var(--font-display, Outfit, system-ui, sans-serif);
  font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.75rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.noc-kpi-value-sm {
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.noc-kpi-meta {
  margin: 0.3rem 0 0;
  color: var(--ink-soft, #3d5a66);
  font-size: 0.78rem;
}

.noc-split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.9fr);
  gap: 0.8rem;
  min-height: min(68vh, 40rem);
  align-items: stretch;
}

.noc-split > .noc-pane {
  min-height: 0;
}

.noc-split-impact {
  grid-template-columns: minmax(14rem, 0.85fr) minmax(0, 1.35fr);
}

.noc-split-perf {
  grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 0.9fr);
  margin-bottom: 0.8rem;
}

.noc-improve-list {
  display: block;
  gap: 0;
  padding: 0.35rem 0.45rem;
  overflow: auto;
  min-height: 0;
}

.noc-improve {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-solid, #fff) 92%, transparent);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--sea, #0c7a84) 35%, transparent);
}

.noc-improve.sev-critical { box-shadow: inset 3px 0 0 var(--danger, #c0392b); }
.noc-improve.sev-major { box-shadow: inset 3px 0 0 #b45309; }
.noc-improve.sev-minor { box-shadow: inset 3px 0 0 #64748b; }

.noc-improve-top {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  color: var(--ink-soft, #3d5a66);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.noc-improve h3 {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.25;
}

.noc-improve p {
  margin: 0.35rem 0 0;
  color: var(--ink-soft, #3d5a66);
  font-size: 0.82rem;
  line-height: 1.35;
}

.noc-improve-action {
  color: var(--ink, #102a33) !important;
  font-weight: 650;
}

.noc-improve .btn {
  margin-top: 0.55rem;
}

.noc-detail-table tr.tone-bad td:first-child,
.noc-detail-table tr.tone-warn td:first-child {
  box-shadow: inset 3px 0 0 #b45309;
}

.noc-detail-table tr.tone-bad td:first-child {
  box-shadow: inset 3px 0 0 var(--danger, #c0392b);
}

.noc-table-wrap {
  min-height: 0;
  overflow: auto;
  padding: 0.65rem;
}

.noc-detail-table {
  width: 100%;
}

.noc-detail-table tr.is-selected td,
.noc-row.is-selected td {
  background: color-mix(in srgb, var(--sea, #0c7a84) 10%, transparent);
}

.noc-detail-table tbody tr {
  cursor: pointer;
}

.noc-detail-table tbody tr:hover td {
  background: color-mix(in srgb, var(--sea, #0c7a84) 6%, transparent);
}

.noc-mini-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.noc-mini-list li {
  display: grid;
  gap: 0.15rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 10px;
  font-size: 0.84rem;
}

.noc-mini-list span {
  color: var(--ink-soft, #3d5a66);
  font-size: 0.78rem;
}

.noc-impact-group.is-button {
  width: 100%;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.noc-impact-group.is-selected {
  outline: 2px solid color-mix(in srgb, var(--sea, #0c7a84) 40%, transparent);
}

.noc-impact-board-body {
  display: grid;
  gap: 0.65rem;
  padding: 0.75rem;
  min-height: 0;
  overflow: auto;
}

@media (max-width: 1100px) {
  .noc-kpi-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .noc-split,
  .noc-split-impact,
  .noc-split-perf {
    grid-template-columns: 1fr;
    min-height: 0;
  }
}

@media (max-width: 820px) {
  .noc-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* IT Support ? platform system performance */
.staff-app:has(.sp-page) .staff-main {
  padding-top: 0.85rem;
}

.sp-page {
  --sp-sea: #0c7a84;
  --sp-line: color-mix(in srgb, var(--border-strong, var(--border)) 88%, transparent);
  --sp-panel: var(--surface, #fff);
  --sp-muted: var(--ink-soft, #3d5a66);
  --sp-radius: 14px;
  --sp-section-gap: 1.25rem;
  display: grid;
  gap: var(--sp-section-gap);
  width: min(100%, 1320px);
  margin-inline: auto;
}

.sp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 0.85rem;
  padding: 0.35rem 0.1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.sp-toolbar-left,
.sp-toolbar-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.55rem;
}

.sp-live {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sp-muted);
  background: color-mix(in srgb, var(--sp-panel) 70%, #94a3b8 30%);
}

.sp-live.is-live {
  color: #0f766e;
  background: color-mix(in srgb, #0f766e 14%, transparent);
}

.sp-live.is-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0f766e;
  box-shadow: 0 0 0 3px color-mix(in srgb, #0f766e 25%, transparent);
}

.sp-clock,
.sp-fleet-chip {
  font-size: 0.78rem;
  color: var(--sp-muted);
}

.sp-fleet-chip {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--sp-line);
  font-weight: 650;
}

.sp-source-chip {
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--sp-line);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--sp-sea);
  background: color-mix(in srgb, var(--sp-sea) 10%, transparent);
}

.sp-search input,
.sp-select {
  height: 2rem;
  padding: 0 0.65rem;
  border: 1px solid var(--sp-line);
  border-radius: 8px;
  background: var(--sp-panel);
  color: inherit;
  font-size: 0.82rem;
}

.sp-search input {
  width: min(14rem, 42vw);
}

.sp-tabs {
  display: none;
}

.sp-refresh {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--sp-line);
  border-radius: 8px;
  background: var(--sp-panel);
  color: var(--sp-sea);
  cursor: pointer;
}

.sp-page.is-refreshing .sp-refresh svg {
  animation: sp-spin 0.8s linear infinite;
}

@keyframes sp-spin {
  to { transform: rotate(360deg); }
}

/* Compact KPI chips ------------------------------------------------------- */
.sp-kpi-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: stretch;
}

.sp-kpi-chip {
  display: inline-grid;
  gap: 0.08rem;
  min-width: 6.5rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--sp-line) 90%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sp-panel) 94%, transparent);
}

.sp-kpi-chip.is-ok {
  border-left: 3px solid #0f766e;
}

.sp-kpi-chip > span {
  color: var(--sp-muted);
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sp-kpi-chip strong {
  font-family: var(--font-display, "Outfit", system-ui, sans-serif);
  font-size: 1.15rem;
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.sp-kpi-chip em {
  font-style: normal;
  color: var(--sp-muted);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.25;
}

.sp-kpis,
.sp-kpi {
  display: none;
}

/* Stage: trend + raw lists ------------------------------------------------ */
.sp-stage {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.sp-trend {
  padding: 0.85rem 1rem 1rem;
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--sp-sea) 5%, transparent), transparent 55%),
    color-mix(in srgb, var(--sp-panel) 96%, transparent);
  min-width: 0;
}

.sp-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.45rem 0.85rem;
  margin-bottom: 0.65rem;
}

.sp-section-kicker {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sp-sea);
}

.sp-section-title {
  margin: 0.1rem 0 0;
  font-family: var(--font-display, "Outfit", system-ui, sans-serif);
  font-size: 1.02rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--ink, #102a32);
}

.sp-section-hint {
  margin: 0.2rem 0 0;
  color: var(--sp-muted);
  font-size: 0.74rem;
  line-height: 1.3;
}

.sp-trend-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9.5rem, 12rem);
  gap: 0.75rem 1rem;
  align-items: center;
  margin-top: 0.55rem;
}

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

.sp-trend-grid-secondary {
  margin-top: 0.75rem;
  opacity: 0.98;
}

.sp-host-gauges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.85rem;
  align-items: flex-start;
  margin-bottom: 0.35rem;
}

.sp-host-pill {
  display: inline-flex;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #0f766e;
  background: color-mix(in srgb, #0f766e 12%, transparent);
}

.sp-host-pill.is-bad {
  color: #c0392b;
  background: color-mix(in srgb, #c0392b 12%, transparent);
}

.sp-gauge {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  padding: 0.45rem 0.55rem 0.55rem;
  border: 1px solid var(--sp-line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sp-panel) 90%, transparent);
  min-width: 5.8rem;
}

.sp-gauge-ring {
  --pct: 0;
  --tone: #0c7a84;
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  text-align: center;
  background:
    radial-gradient(closest-side, var(--sp-panel) 72%, transparent 73% 100%),
    conic-gradient(var(--tone) calc(var(--pct) * 1%), color-mix(in srgb, var(--sp-muted) 18%, transparent) 0);
}

.sp-gauge-ring strong {
  font-family: var(--font-display, "Outfit", system-ui, sans-serif);
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1;
}

.sp-gauge-ring span {
  margin-top: 0.12rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sp-muted);
}

.sp-gauge.is-ok .sp-gauge-ring { --tone: #0f766e; }
.sp-gauge.is-warn .sp-gauge-ring { --tone: #b45309; }
.sp-gauge.is-critical .sp-gauge-ring { --tone: #c0392b; }

.sp-gauge-meta {
  margin: 0;
  text-align: center;
  font-size: 0.68rem;
  color: var(--sp-muted);
  line-height: 1.3;
}

.sp-host-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.55rem 0.65rem 0.75rem;
}

.sp-host-facts > div {
  display: grid;
  gap: 0.08rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--sp-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--sp-panel) 90%, transparent);
  min-width: 7rem;
}

.sp-host-facts span {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--sp-muted);
}

.sp-host-facts strong {
  font-size: 0.8rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-chart {
  position: relative;
  height: 12.5rem;
  min-width: 0;
}

.sp-chart-lg {
  height: 14.5rem;
}

.sp-chart-mix {
  height: 11.5rem;
}

.sp-chart-bar {
  height: 14rem;
}

.sp-chart canvas {
  width: 100% !important;
  height: 100% !important;
}

.sp-raw-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: start;
}

.sp-list-block {
  min-width: 0;
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
  background: color-mix(in srgb, var(--sp-panel) 96%, transparent);
  overflow: hidden;
}

.sp-list-wide {
  grid-column: 1 / -1;
}

.sp-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--sp-line);
  background: color-mix(in srgb, var(--sp-sea) 4%, transparent);
}

.sp-list-head h3 {
  margin: 0;
  font-family: var(--font-display, "Outfit", system-ui, sans-serif);
  font-size: 0.88rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.sp-count {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sp-sea) 12%, transparent);
  color: var(--sp-sea);
}

.sp-table-wrap {
  overflow: auto;
  max-height: min(42vh, 22rem);
}

.sp-list-block .sp-dl {
  padding: 0.55rem 0.65rem 0.75rem;
}

.sp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.sp-table th,
.sp-table td {
  padding: 0.45rem 0.55rem;
  text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--sp-line) 75%, transparent);
  vertical-align: top;
}

.sp-table th {
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--sp-panel) 88%, var(--sp-sea) 12%);
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--sp-muted);
  z-index: 1;
}

.sp-table tbody tr:hover td {
  background: color-mix(in srgb, var(--sp-sea) 6%, transparent);
}

.sp-table .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.74rem;
}

.sp-empty {
  text-align: center;
  color: var(--sp-muted);
  padding: 1rem !important;
}

.sp-tag {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: 1px solid var(--sp-line);
  color: var(--sp-muted);
  background: color-mix(in srgb, var(--sp-panel) 90%, transparent);
}

.sp-tag.is-ok {
  color: #0f766e;
  background: color-mix(in srgb, #0f766e 12%, transparent);
  border-color: color-mix(in srgb, #0f766e 28%, transparent);
}

.sp-tag.is-warn {
  color: #b45309;
  background: color-mix(in srgb, #b45309 12%, transparent);
  border-color: color-mix(in srgb, #b45309 28%, transparent);
}

.sp-tag.is-down {
  color: #c0392b;
  background: color-mix(in srgb, #c0392b 12%, transparent);
  border-color: color-mix(in srgb, #c0392b 28%, transparent);
}

.sp-dl dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  margin: 0;
}

.sp-dl dl > div {
  display: grid;
  gap: 0.08rem;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--sp-line) 70%, transparent);
  border-radius: 0;
  background: transparent;
}

.sp-dl dt {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--sp-muted);
}

.sp-dl dd {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 700;
}

.sp-json-block {
  border: 1px solid var(--sp-line);
  border-radius: var(--sp-radius);
  background: color-mix(in srgb, var(--sp-panel) 96%, transparent);
  overflow: hidden;
}

.sp-json-block summary {
  cursor: pointer;
  padding: 0.65rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--sp-muted);
  list-style: none;
}

.sp-json-block summary::-webkit-details-marker {
  display: none;
}

.sp-json-block[open] summary {
  border-bottom: 1px solid var(--sp-line);
  color: var(--ink, #102a32);
}

.sp-json {
  margin: 0;
  padding: 0.7rem 0.8rem;
  max-height: 280px;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--sp-panel) 90%, var(--sp-sea) 10%);
  font-size: 0.7rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

[data-theme="dark"] .sp-page {
  --sp-panel: color-mix(in srgb, #0f1c22 92%, #0c7a84 8%);
  --sp-line: rgba(148, 163, 184, 0.18);
  --sp-muted: #94a3b8;
}

@media (max-width: 1100px) {
  .sp-trend-grid {
    grid-template-columns: 1fr minmax(8.5rem, 11rem);
  }
  .sp-chart { height: 11.5rem; }
  .sp-chart-lg { height: 13.5rem; }
}

@media (max-width: 900px) {
  .sp-raw-grid { grid-template-columns: 1fr; }
  .sp-list-wide { grid-column: auto; }
  .sp-trend-grid-half { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  .sp-trend-grid,
  .sp-trend-grid-secondary {
    grid-template-columns: 1fr;
  }
  .sp-search input { width: 100%; }
  .sp-toolbar-right { width: 100%; }
  .sp-chart { height: 11rem; }
  .sp-chart-lg,
  .sp-chart-mix { height: 12rem; }
  .sp-dl dl { grid-template-columns: 1fr; }
  .sp-host-facts > div { min-width: calc(50% - 0.4rem); flex: 1 1 calc(50% - 0.4rem); }
}

@media (max-width: 520px) {
  .sp-kpi-chip { min-width: calc(50% - 0.25rem); flex: 1 1 calc(50% - 0.25rem); }
}

/* ?? Public / auth theme toggle (UI consistency) ?? */
.auth-shell,
.staff-shell {
  position: relative;
}

.public-theme-bar {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 30;
}

.public-theme-bar .theme-toggle {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--ink);
}

.site-header .theme-toggle {
  width: 2.35rem;
  height: 2.35rem;
}

.sidebar .brand,
.staff-brand {
  color: var(--sidebar-text, #fff);
}

.sidebar .brand span,
.staff-brand span {
  color: var(--sea, #5fd0d8);
}

@media (max-width: 640px) {
  .public-theme-bar {
    top: 0.75rem;
    right: 0.75rem;
  }
}


/* ========================================================================
   Analytics polish ? compact, responsive, non-stretching charts (v193)
   ======================================================================== */

:root {
  --analytics-max: 72rem;
  --analytics-chart-h: clamp(9.5rem, 18vw, 11.5rem);
  --analytics-chart-h-sm: clamp(8.5rem, 16vw, 10.25rem);
  --analytics-chart-h-rank: clamp(11rem, 22vw, 15rem);
  --analytics-gap: 0.75rem;
}

/* ?? Page shells: stop edge-to-edge stretch ?? */
.workspace-dash {
  max-width: var(--analytics-max);
}

.clients-general-usage-page {
  width: min(100%, var(--analytics-max));
  max-width: var(--analytics-max);
}

.client-usage-analysis-page {
  width: min(100%, 68rem);
  max-width: 68rem;
}

.noc-console {
  max-width: var(--analytics-max);
}

.sp-page {
  width: min(100%, 68rem);
}

/* ?? Workspace: denser KPIs + side-by-side charts ?? */
.workspace-dash-kpis,
.workspace-dash-stats,
.workspace-dash-stats.has-referral {
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.55rem;
}

.workspace-dash-kpi,
.workspace-dash-stat {
  padding: 0.7rem 0.8rem 0.65rem;
}

.workspace-dash-kpi-value,
.workspace-dash-stat-value {
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
}

.workspace-dash-analytics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--analytics-gap);
  align-items: start;
  min-width: 0;
}

.workspace-dash-analytics > .workspace-dash-panel {
  min-width: 0;
  margin: 0;
}

.workspace-dash-chart-wrap {
  height: var(--analytics-chart-h);
  margin: 0.15rem 0 0.55rem;
  padding: 0.4rem 0.3rem 0.2rem;
}

.workspace-dash-chart-wrap-compact {
  height: var(--analytics-chart-h-sm);
  margin-bottom: 0.35rem;
}

.workspace-dash-panel-chart .workspace-dash-panel-head {
  margin-bottom: 0.35rem;
}

.workspace-dash-panel-head-nested {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--line, #d7dee8) 85%, transparent);
}

.workspace-dash-chart-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: inherit;
}

.workspace-dash-panel-chart .panel-sub {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.78rem;
  line-height: 1.35;
}

.workspace-dash-panel-chart h2 {
  font-size: 1.05rem;
}

@media (max-width: 1080px) {
  .workspace-dash-analytics {
    grid-template-columns: 1fr;
  }
}

/* ?? Client / general usage charts ?? */
.client-usage-chart-wrap {
  height: var(--analytics-chart-h);
  margin-top: 0.55rem;
}

.client-usage-chart-wrap-tall,
.client-usage-chart-wrap-compact {
  height: var(--analytics-chart-h-sm);
}

.client-usage-chart-wrap.is-tall,
.clients-usage-visual-grid .client-usage-chart-wrap.is-tall,
.clients-usage-insights-grid .client-usage-chart-wrap.is-tall {
  height: var(--analytics-chart-h-rank);
}

.client-usage-chart-wrap.is-compact-rank {
  height: var(--analytics-chart-h-rank);
}

.client-usage-chart-grid,
.clients-usage-visual-grid,
.clients-usage-insights-grid {
  gap: var(--analytics-gap);
}

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

.clients-usage-insights-grid .clients-usage-chart-card-rank {
  grid-column: auto;
}

@media (min-width: 1100px) {
  .clients-usage-insights-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .clients-usage-insights-grid > .client-usage-chart-card:not(.clients-usage-chart-card-rank) {
    grid-column: span 3;
  }

  .clients-usage-insights-grid > .clients-usage-chart-card-rank {
    grid-column: span 2;
  }
}

.client-usage-chart-card {
  padding: 0.8rem 0.85rem 0.9rem;
  border-radius: 14px;
}

.client-usage-chart-card header h3 {
  font-size: 0.98rem;
}

.client-usage-chart-card header p:last-child {
  font-size: 0.72rem;
}

.clients-usage-summary-strip {
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 0.5rem 0.75rem;
  padding: 0.7rem clamp(0.85rem, 1.6vw, 1.15rem);
}

@media (max-width: 720px) {
  .client-usage-chart-wrap,
  .client-usage-chart-wrap-tall,
  .client-usage-chart-wrap-compact,
  .client-usage-chart-wrap.is-tall,
  .client-usage-chart-wrap.is-compact-rank {
    height: 10.5rem;
  }
}

@media (max-width: 480px) {
  .client-usage-chart-wrap,
  .client-usage-chart-wrap-tall,
  .client-usage-chart-wrap-compact,
  .client-usage-chart-wrap.is-tall,
  .client-usage-chart-wrap.is-compact-rank {
    height: 9.5rem;
  }
}

/* ?? NOC: compact trend / mix ?? */
.noc-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.25rem, 1fr));
  gap: 0.4rem;
}

.noc-kpi-chip {
  min-width: 0;
  padding: 0.4rem 0.55rem;
}

.noc-kpi-chip strong {
  font-size: 1.05rem;
}

.noc-trend {
  padding: 0.7rem 0.85rem 0.85rem;
}

.noc-trend-grid {
  grid-template-columns: minmax(0, 1fr) minmax(7.5rem, 9.5rem);
  gap: 0.55rem 0.75rem;
}

.noc-chart-wrap {
  min-height: 0;
  height: 8.25rem;
}

.noc-chart-wrap-trend {
  min-height: 0;
  height: 9.75rem;
}

.noc-chart-wrap-mix {
  min-height: 0;
  height: 8.5rem;
}

.noc-stage {
  gap: 0.6rem;
}

.noc-raw {
  gap: 0.6rem;
}

@media (max-width: 900px) {
  .noc-trend-grid {
    grid-template-columns: 1fr;
  }

  .noc-chart-wrap-trend,
  .noc-chart-wrap-mix,
  .noc-chart-wrap {
    height: 9rem;
  }
}

/* ?? System performance ?? */
.sp-page {
  --sp-section-gap: 0.95rem;
}

.sp-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: 0.4rem;
}

.sp-trend-grid {
  grid-template-columns: minmax(0, 1fr) minmax(7.5rem, 9.5rem);
  gap: 0.55rem 0.75rem;
}

.sp-chart {
  height: 9.75rem;
}

.sp-chart-lg {
  height: 11rem;
}

.sp-chart-mix {
  height: 9rem;
}

.sp-chart-bar {
  height: 10.5rem;
}

.sp-gauge-ring {
  width: 3.6rem;
  height: 3.6rem;
}

.sp-table-wrap {
  max-height: min(32vh, 16rem);
}

@media (max-width: 900px) {
  .sp-trend-grid,
  .sp-trend-grid-half {
    grid-template-columns: 1fr;
  }

  .sp-chart,
  .sp-chart-lg,
  .sp-chart-mix,
  .sp-chart-bar {
    height: 9.5rem;
  }
}

@media (max-width: 520px) {
  .workspace-dash-kpis,
  .workspace-dash-stats,
  .workspace-dash-stats.has-referral {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .noc-kpi-strip,
  .sp-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-dash-kpi:hover,
  .workspace-dash-stat:hover,
  .client-usage-chart-card:hover {
    transform: none;
  }
}

/* Rank charts: readable bar density for top-12 */
:root {
  --analytics-chart-h-rank: clamp(12rem, 24vw, 16.5rem);
}

/* ==========================================================================
   UI/UX consistency — cross-page responsive layer
   Mobile (≤760px) · Tablet (761–1100px) · Desktop (1101px+)
   ========================================================================== */

/* Safe-area padding for notched phones */
.staff-app .staff-main,
.staff-app .main.staff-main,
.auth-shell {
  padding-bottom: max(var(--space-page, 1rem), env(safe-area-inset-bottom));
}

.staff-topbar {
  padding-top: max(0.75rem, env(safe-area-inset-top));
}

/* Tablet: horizontal scroll for tables not yet in card mode */
@media (max-width: 1100px) and (min-width: 761px) {
  .org-table-shell:not(.billing-dash-table-shell):not(.packages-table-shell):not(.mikrotik-table-shell):not(:has(.org-table-clients-responsive)) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .org-table-shell:not(.billing-dash-table-shell):not(.packages-table-shell):not(.mikrotik-table-shell):not(:has(.org-table-clients-responsive)) .org-table {
    min-width: 36rem;
  }

  .table-scroll .table {
    min-width: 36rem;
  }
}

/* Tablet: stack panel headers and action rows */
@media (max-width: 960px) and (min-width: 641px) {
  .panel-head-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .panel-head-actions {
    width: 100%;
  }

  .panel-head-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

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

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

/* Mobile: generic card-stack for org tables with data-label */
@media (max-width: 760px) {
  .org-table-shell:has(.org-table td[data-label]):not(.billing-dash-table-shell):not(.packages-table-shell):not(.mikrotik-table-shell):not(:has(.org-table-clients-responsive)),
  .table-scroll:has(.table td[data-label]) {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .org-table-shell:has(.org-table td[data-label]):not(.billing-dash-table-shell):not(.packages-table-shell):not(.mikrotik-table-shell):not(:has(.org-table-clients-responsive))::after,
  .table-scroll:has(.table td[data-label])::after {
    display: none;
  }

  .org-table:has(td[data-label]):not(.org-table-clients-responsive):not(.org-table-mikrotik):not(.billing-dash-table):not(.packages-table),
  .table-scroll .table:has(td[data-label]) {
    width: 100%;
    min-width: 0 !important;
    border-collapse: separate;
    border-spacing: 0 0.75rem;
  }

  .org-table:has(td[data-label]):not(.org-table-clients-responsive):not(.org-table-mikrotik):not(.billing-dash-table):not(.packages-table) thead,
  .table-scroll .table:has(td[data-label]) thead {
    display: none;
  }

  .org-table:has(td[data-label]):not(.org-table-clients-responsive):not(.org-table-mikrotik):not(.billing-dash-table):not(.packages-table) tbody,
  .table-scroll .table:has(td[data-label]) tbody {
    display: grid;
    gap: 0.75rem;
  }

  .org-table:has(td[data-label]):not(.org-table-clients-responsive):not(.org-table-mikrotik):not(.billing-dash-table):not(.packages-table) tbody tr,
  .table-scroll .table:has(td[data-label]) tbody tr {
    display: grid;
    gap: 0.1rem;
    padding: 0.95rem 1rem;
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    background: var(--surface-solid, var(--surface));
    box-shadow: var(--card-shadow);
  }

  .org-table:has(td[data-label]):not(.org-table-clients-responsive):not(.org-table-mikrotik):not(.billing-dash-table):not(.packages-table) tbody tr:hover td,
  .table-scroll .table:has(td[data-label]) tbody tr:hover td {
    background: transparent;
  }

  .org-table:has(td[data-label]):not(.org-table-clients-responsive):not(.org-table-mikrotik):not(.billing-dash-table):not(.packages-table) td,
  .table-scroll .table:has(td[data-label]) td {
    display: grid;
    grid-template-columns: 7.25rem minmax(0, 1fr);
    gap: 0.55rem;
    align-items: start;
    padding: 0.4rem 0;
    border: 0;
    white-space: normal;
  }

  .org-table:has(td[data-label]):not(.org-table-clients-responsive):not(.org-table-mikrotik):not(.billing-dash-table):not(.packages-table) td::before,
  .table-scroll .table:has(td[data-label]) td::before {
    content: attr(data-label);
    color: var(--ink-soft);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-top: 0.15rem;
  }

  .org-table:has(td[data-label]):not(.org-table-clients-responsive):not(.org-table-mikrotik):not(.billing-dash-table):not(.packages-table) td[data-label="Name"]::before,
  .org-table:has(td[data-label]):not(.org-table-clients-responsive):not(.org-table-mikrotik):not(.billing-dash-table):not(.packages-table) td[data-label="Employee"]::before,
  .org-table:has(td[data-label]):not(.org-table-clients-responsive):not(.org-table-mikrotik):not(.billing-dash-table):not(.packages-table) td[data-label="Organization"]::before,
  .org-table:has(td[data-label]):not(.org-table-clients-responsive):not(.org-table-mikrotik):not(.billing-dash-table):not(.packages-table) td[data-label="Ticket"]::before,
  .org-table:has(td[data-label]):not(.org-table-clients-responsive):not(.org-table-mikrotik):not(.billing-dash-table):not(.packages-table) td[data-label="Contact"]::before,
  .org-table:has(td[data-label]):not(.org-table-clients-responsive):not(.org-table-mikrotik):not(.billing-dash-table):not(.packages-table) td[data-label="ISP client"]::before,
  .org-table:has(td[data-label]):not(.org-table-clients-responsive):not(.org-table-mikrotik):not(.billing-dash-table):not(.packages-table) td[data-label="Customer"]::before {
    display: none;
  }

  .org-table:has(td[data-label]):not(.org-table-clients-responsive):not(.org-table-mikrotik):not(.billing-dash-table):not(.packages-table) td[data-label="Name"],
  .org-table:has(td[data-label]):not(.org-table-clients-responsive):not(.org-table-mikrotik):not(.billing-dash-table):not(.packages-table) td[data-label="Employee"],
  .org-table:has(td[data-label]):not(.org-table-clients-responsive):not(.org-table-mikrotik):not(.billing-dash-table):not(.packages-table) td[data-label="Organization"],
  .org-table:has(td[data-label]):not(.org-table-clients-responsive):not(.org-table-mikrotik):not(.billing-dash-table):not(.packages-table) td[data-label="Ticket"],
  .org-table:has(td[data-label]):not(.org-table-clients-responsive):not(.org-table-mikrotik):not(.billing-dash-table):not(.packages-table) td[data-label="Contact"],
  .org-table:has(td[data-label]):not(.org-table-clients-responsive):not(.org-table-mikrotik):not(.billing-dash-table):not(.packages-table) td[data-label="ISP client"],
  .org-table:has(td[data-label]):not(.org-table-clients-responsive):not(.org-table-mikrotik):not(.billing-dash-table):not(.packages-table) td[data-label="Customer"] {
    grid-template-columns: 1fr;
    padding-bottom: 0.55rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--border);
  }

  .org-table:has(td[data-label]):not(.org-table-clients-responsive):not(.org-table-mikrotik):not(.billing-dash-table):not(.packages-table) td[data-label="Actions"],
  .table-scroll .table:has(td[data-label]) td[data-label="Actions"] {
    grid-template-columns: 1fr;
    padding-top: 0.65rem;
    margin-top: 0.2rem;
    border-top: 1px solid var(--border);
  }

  .org-table:has(td[data-label]):not(.org-table-clients-responsive):not(.org-table-mikrotik):not(.billing-dash-table):not(.packages-table) td[data-label="Actions"]::before,
  .table-scroll .table:has(td[data-label]) td[data-label="Actions"]::before {
    display: none;
  }

  .auth-shell {
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  }

  .auth-panel {
    width: min(100%, 100%);
  }
}

@media (max-width: 480px) {
  .stat-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   MikroTik workspace — detail, port setup, live clients (responsive layer)
   ========================================================================== */

.staff-app:has(.mk-page) .staff-main,
.client-app:has(.mk-page) .staff-main {
  overflow-x: clip;
  max-width: 100%;
}

.mk-page {
  width: min(100%, 68rem);
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
}

/* Sticky workspace nav on scroll (tablet + desktop) */
@media (min-width: 721px) {
  .mk-detail-quicknav {
    position: sticky;
    top: 0.35rem;
    z-index: 6;
    backdrop-filter: blur(10px);
    background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  }
}

/* Topbar router profile — match account menu on mobile */
@media (max-width: 960px) {
  .mikrotik-router-profile .account-menu-copy,
  .mikrotik-router-profile .account-menu-caret {
    display: none;
  }

  .mikrotik-router-profile-trigger {
    padding: 0.3rem;
  }

  .mikrotik-router-profile-panel {
    width: min(calc(100vw - 1.5rem), 24rem);
    max-height: min(85dvh, 36rem);
  }
}

/* Detail hero — badge row wraps cleanly */
.mk-detail-hero-topline {
  row-gap: 0.35rem;
}

@media (max-width: 640px) {
  .mk-detail-hero-topline .mikrotik-auto-restore-badge {
    max-width: 100%;
  }

  .mk-detail-hero-topline .mikrotik-auto-restore-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 12rem;
  }
}

/* Analytics blocks */
@media (max-width: 720px) {
  .mk-detail-analytics {
    padding: 0.85rem;
  }

  .mk-detail-analytics-head {
    flex-direction: column;
    align-items: stretch;
  }

  .mk-detail-analytics-head .btn {
    width: 100%;
    justify-content: center;
  }

  .mk-detail-analytics-chips {
    width: 100%;
  }

  .mk-detail-analytics-chip {
    flex: 1 1 auto;
    justify-content: center;
  }

  .mk-detail-chart-wrap {
    height: clamp(8.5rem, 38vw, 10.5rem);
  }

  .mk-detail-drop {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .mk-detail-kpi-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 420px) {
  .mk-detail-kpi-row {
    grid-template-columns: 1fr;
  }
}

/* Port setup page */
@media (max-width: 900px) {
  .mk-ports-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  }
}

@media (max-width: 520px) {
  .mk-ports-grid {
    grid-template-columns: 1fr;
  }

  .mk-port-card:hover {
    transform: none;
  }

  .mk-ports-overview .mk-uplink-config-prominent {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Dialogs — bottom sheet on phones */
@media (max-width: 640px) {
  .mk-uplink-risk-dialog,
  .mk-wan-recovery-dialog {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    max-height: min(92dvh, 100%);
    overflow-y: auto;
    border-radius: 1.15rem 1.15rem 0 0;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }

  .mk-uplink-risk-actions,
  .mk-uplink-prompt-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .mk-uplink-risk-actions .btn,
  .mk-uplink-prompt-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .mk-banner {
    flex-direction: column;
    align-items: stretch;
  }

  .mk-banner .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Live clients page */
.mk-assigned-hero-actions {
  align-items: stretch;
}

.mk-assigned-hero-actions .mk-auto-balance-toggle {
  flex: 1 1 100%;
  min-width: min(100%, 16rem);
  justify-content: space-between;
}

.mk-assigned-hero-actions .mk-live-pill {
  align-self: center;
  justify-content: center;
}

@media (max-width: 720px) {
  .mk-assigned-hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .mk-assigned-hero-actions .mk-auto-balance-toggle,
  .mk-assigned-hero-actions .mk-live-pill {
    grid-column: 1 / -1;
  }

  .mk-assigned-hero-actions .mk-auto-balance-toggle {
    width: 100%;
  }

  .mk-assigned-section-head {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
  }

  .mk-assigned-uplink-overview-grid {
    grid-template-columns: 1fr;
  }

  .mk-assigned-ports-page .mk-assigned-section {
    padding: 0.85rem;
  }
}

@media (max-width: 420px) {
  .mk-assigned-hero-actions {
    grid-template-columns: 1fr;
  }

  .mk-assigned-client-simple-head {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mk-assigned-uplink-col:hover,
  .mk-port-card:hover {
    transform: none;
  }
}

/* ==========================================================================
   General usage (/app/clients/usage/) — mobile / tablet responsive layer
   ========================================================================== */

.clients-usage-seg-stack {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.55rem 0.65rem;
  flex: 1 1 auto;
  min-width: 0;
}

.clients-usage-toolbar-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.55rem 0.75rem;
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
}

.clients-general-usage-page .clients-usage-control-deck .clients-seg {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0.2rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-solid, var(--surface));
}

.clients-general-usage-page .clients-usage-control-deck .clients-seg-item {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.2rem;
  padding: 0.35rem 0.7rem;
  border-radius: 9px;
  border-color: transparent;
  background: transparent;
  font-size: 0.8rem;
}

.clients-general-usage-page .clients-usage-control-deck .clients-seg-item.is-active {
  border-color: color-mix(in srgb, var(--tab-tone, var(--sea)) 35%, var(--border));
  background: color-mix(in srgb, var(--tab-tone, var(--sea)) 12%, var(--surface));
  box-shadow: none;
}

.clients-general-usage-page .clients-usage-control-deck .clients-seg-item:hover,
.clients-general-usage-page .clients-usage-control-deck .clients-seg-item:focus-visible {
  transform: none;
}

.clients-general-usage-page .clients-usage-stamp {
  white-space: nowrap;
}

.clients-general-usage-page .clients-usage-uplink-panel {
  margin: 0;
  padding: clamp(1rem, 1.8vw, 1.25rem) clamp(1rem, 2vw, 1.35rem);
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: color-mix(in srgb, var(--surface-2, var(--surface)) 45%, transparent);
  box-shadow: none;
}

.clients-general-usage-page .clients-usage-uplink-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.clients-general-usage-page .clients-usage-section-meta {
  max-width: 42rem;
}

.clients-general-usage-page .clients-usage-fup-panel[hidden] {
  display: none !important;
}

@media (max-width: 1100px) {
  .clients-usage-overview-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .clients-usage-summary-strip {
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  }
}

@media (max-width: 900px) {
  .clients-general-usage-page.ops-page {
    gap: 0.85rem;
    padding-inline: 0;
    width: 100%;
    max-width: 100%;
  }

  .clients-general-usage-page .clients-usage-workspace {
    border-radius: 16px;
  }

  .clients-usage-control-deck {
    padding: 0.75rem 0.85rem 0.85rem;
    gap: 0.65rem;
  }

  .clients-usage-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }

  .clients-usage-seg-stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .clients-general-usage-page .clients-usage-control-deck .clients-seg {
    width: 100%;
  }

  .clients-usage-toolbar-meta {
    width: 100%;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
  }

  .clients-usage-router-filter,
  .clients-general-usage-page .clients-usage-router-filter {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .clients-usage-stamp {
    margin-left: 0;
    align-self: flex-start;
  }

  .clients-usage-section-head-inline {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
  }

  .clients-usage-table-head {
    flex-direction: column;
    align-items: stretch;
  }

  .clients-usage-users-sort {
    width: 100%;
    margin-left: 0;
  }

  .clients-usage-users-sort-select {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }

  .clients-usage-insights-panel,
  .clients-usage-visual-panel,
  .clients-usage-fup-panel,
  .clients-usage-table-panel {
    padding-inline: 0.85rem;
  }

  .clients-usage-summary-strip {
    padding-inline: 0.85rem;
  }
}

@media (max-width: 720px) {
  .clients-usage-overview-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
  }

  .clients-general-usage-page .packages-stat {
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.7rem 0.65rem;
  }

  .clients-general-usage-page .packages-stat-ico {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 9px;
  }

  .clients-general-usage-page .packages-stat-value {
    font-size: 0.98rem;
    letter-spacing: -0.02em;
  }

  .clients-general-usage-page .packages-stat-label {
    font-size: 0.62rem;
  }

  .clients-usage-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    padding: 0.7rem 0.75rem;
  }

  .clients-usage-summary-item {
    padding: 0.55rem 0.6rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
    background: var(--surface-solid, var(--surface));
  }

  .clients-usage-summary-item strong {
    font-size: 0.98rem;
    overflow-wrap: anywhere;
  }

  .clients-usage-summary-item small {
    font-size: 0.7rem;
    line-height: 1.3;
  }

  .clients-usage-seg-stack {
    grid-template-columns: 1fr;
  }

  .clients-general-usage-page .clients-usage-control-deck .clients-seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .clients-general-usage-page .clients-usage-uplink-fields {
    gap: 0.55rem;
  }

  .clients-general-usage-page .clients-usage-uplink-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .clients-general-usage-page .clients-usage-uplink-actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 2.45rem;
  }

  .clients-usage-fup-grid {
    grid-template-columns: 1fr;
  }

  .clients-usage-fup-summary {
    width: 100%;
  }

  .clients-general-usage-page .client-usage-chart-card {
    padding: 0.75rem 0.8rem 0.85rem;
  }

  .clients-general-usage-page .client-usage-chart-card header p:last-child {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (max-width: 560px) {
  .clients-general-usage-page .packages-hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .clients-general-usage-page .packages-hero-actions .btn {
    width: 100%;
    min-height: 2.5rem;
  }

  .clients-usage-overview-stats {
    grid-template-columns: 1fr;
  }

  .clients-general-usage-page .packages-stat {
    flex-direction: row;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 0.85rem;
  }

  .clients-general-usage-page .packages-stat-value {
    font-size: 1.15rem;
  }

  .clients-usage-data-table td {
    grid-template-columns: 5.5rem minmax(0, 1fr);
  }

  .clients-general-usage-page .clients-usage-uplink-actions {
    grid-template-columns: 1fr;
  }

  .clients-usage-renew-dialog {
    width: min(100vw - 1rem, 26rem);
  }
}

@media (max-width: 420px) {
  .clients-usage-summary-strip {
    grid-template-columns: 1fr 1fr;
  }

  .clients-usage-summary-label {
    font-size: 0.62rem;
  }

  .clients-general-usage-page .packages-hero-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clients-general-usage-page .packages-stat:hover,
  .clients-usage-data-row {
    transform: none;
  }
}