/* kptVPN emerald theme: global palette + app shell (kv-*) + dashboard hero (kd-*). Loaded after original.css. */

/* ---------- Palette (RGB triplets consumed by the original Tailwind classes) ---------- */
:root {
  --color-accent-50: 236, 253, 245;
  --color-accent-100: 209, 250, 229;
  --color-accent-200: 167, 243, 208;
  --color-accent-300: 110, 231, 183;
  --color-accent-400: 52, 211, 153;
  --color-accent-500: 4, 120, 87;
  --color-accent-600: 6, 95, 70;
  --color-accent-700: 4, 120, 87;
  --color-accent-800: 6, 95, 70;
  --color-accent-900: 6, 78, 59;
  --color-accent-950: 2, 44, 34;
  --color-on-accent: 255, 255, 255;

  --color-dark-50: 241, 248, 245;
  --color-dark-100: 228, 238, 234;
  --color-dark-200: 203, 222, 213;
  --color-dark-300: 174, 200, 189;
  --color-dark-400: 134, 164, 154;
  --color-dark-500: 96, 122, 112;
  --color-dark-600: 63, 88, 77;
  --color-dark-700: 38, 59, 50;
  --color-dark-800: 24, 43, 36;
  --color-dark-850: 18, 35, 29;
  --color-dark-900: 13, 28, 22;
  --color-dark-950: 7, 19, 14;

  /* Light theme maps dark-* onto champagne-*; use clean green-tinted neutrals. */
  --color-champagne-50: 255, 255, 255;
  --color-champagne-100: 247, 251, 248;
  --color-champagne-200: 241, 248, 243;
  --color-champagne-300: 211, 231, 218;
  --color-champagne-400: 169, 199, 181;
  --color-champagne-500: 120, 154, 134;
  --color-champagne-600: 86, 121, 96;
  --color-champagne-700: 54, 86, 63;
  --color-champagne-800: 37, 64, 46;
  --color-champagne-900: 22, 46, 32;
  --color-champagne-950: 13, 33, 21;

  --bento-radius: 20px;
  --kv-side: 288px;
  --kv-card: rgba(var(--color-dark-900), 0.72);
  --kv-line: rgba(var(--color-dark-300), 0.15);
  --kv-text: rgb(var(--color-dark-50));
  --kv-muted: rgb(var(--color-dark-400));
  --kv-soft: rgba(var(--color-accent-500), 0.15);
}
body { background-color: rgb(var(--color-dark-950)); }
html.light body,
html[data-theme="light"] body { background-color: rgb(var(--color-champagne-200)); }
.light { --kv-card: #ffffff; --kv-line: rgba(4, 120, 87, 0.12); }

/* ---------- Shell ---------- */
.kv-shell {
  min-height: 100dvh;
  background:
    radial-gradient(900px 600px at 100% -10%, rgba(var(--color-accent-600), 0.12), transparent 60%),
    rgb(var(--color-dark-950));
}
.kv-brand { display: inline-flex; align-items: center; gap: 14px; color: var(--kv-text); text-decoration: none; }
.kv-brand span { font: 700 27px/1 "Outfit", "Manrope", sans-serif; letter-spacing: -0.4px; }
.kv-mark { width: 40px; height: 40px; }

.kv-side {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: var(--kv-side);
  padding: 26px 14px 20px;
  border-right: 1px solid var(--kv-line);
  background: rgba(var(--color-dark-950), 0.92);
  backdrop-filter: blur(14px);
}
.kv-side > .kv-brand { padding: 0 22px 34px; }
.kv-side-label {
  padding: 0 22px 14px;
  color: var(--kv-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.kv-side-nav { display: grid; gap: 6px; overflow-y: auto; scrollbar-width: none; }
.kv-side-link {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 54px;
  padding: 0 22px;
  border-radius: 14px;
  color: rgb(var(--color-dark-200));
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.kv-side-link .icon { width: 25px; height: 25px; color: rgb(var(--color-dark-300)); }
.kv-side-link:hover { background: rgba(var(--color-accent-500), 0.1); color: var(--kv-text); }
.kv-side-link.is-active {
  background: linear-gradient(135deg, rgb(var(--color-accent-500)), rgb(var(--color-accent-400)));
  color: #fff;
  box-shadow: 0 12px 30px -12px rgba(4, 120, 87, 0.85);
}
.kv-side-link.is-active .icon { color: #fff; }
.kv-side-sep { height: 1px; margin: 14px 12px; background: var(--kv-line); }
.kv-side-admin,
.kv-side-admin .icon { color: #f59e0b !important; }
.kv-side-link.kv-side-admin.is-active { background: rgba(245, 158, 11, 0.14); box-shadow: none; }
.kv-user {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding: 18px 12px 0;
  border-top: 1px solid var(--kv-line);
}
.kv-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--color-accent-400), 0.55);
  background: radial-gradient(circle at 30% 30%, rgba(var(--color-accent-500), 0.55), rgba(var(--color-accent-900), 0.9));
  color: #fff;
  font: 700 22px/1 "Outfit", "Manrope", sans-serif;
  text-decoration: none;
}
.kv-user-text { min-width: 0; flex: 1; }
.kv-user-text strong { display: block; overflow: hidden; color: var(--kv-text); font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.kv-user-text small { display: block; overflow: hidden; margin-top: 3px; color: var(--kv-muted); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.kv-icon-btn {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgb(var(--color-dark-200));
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.kv-icon-btn .icon { width: 24px; height: 24px; }
.kv-icon-btn:hover { background: rgba(var(--color-accent-500), 0.12); color: var(--kv-text); }
.kv-icon-btn--boxed { width: 52px; height: 52px; border: 1px solid var(--kv-line); background: rgba(var(--color-dark-800), 0.6); }
.kv-bell { position: relative; }
.kv-bell::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(var(--color-accent-400));
  box-shadow: 0 0 0 2px rgb(var(--color-dark-950));
}
.kv-top {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 84px;
  margin-left: var(--kv-side);
  padding: 0 36px 0 46px;
  border-bottom: 1px solid var(--kv-line);
  background: rgba(var(--color-dark-950), 0.82);
  backdrop-filter: blur(14px);
}
.kv-top-title { margin: 0; color: var(--kv-text); font: 600 24px/1.2 "Outfit", "Manrope", sans-serif; }
.kv-top-actions { display: flex; align-items: center; gap: 14px; }
.kv-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgb(var(--color-dark-200));
  font: 600 16px/1 "Manrope", sans-serif;
  cursor: pointer;
}
.kv-lang .icon { width: 16px; height: 16px; }
.kv-lang:hover { background: rgba(var(--color-accent-500), 0.12); }
.kv-shell .kv-main {
  margin-left: var(--kv-side);
  padding: 30px 36px 48px 46px;
  max-width: calc(var(--kv-side) + 1320px);
}
.kv-mtop, .kv-bottom, .kv-sheet { display: none; }

/* Pages: make the original cards match the dashboard surface */
.kv-main .bento-card,
.kv-main .bento-card-hover,
.kv-main .card {
  border-radius: 22px;
  border-color: var(--kv-line);
  background: var(--kv-card);
}
.kv-main .btn-primary {
  background: linear-gradient(135deg, rgb(var(--color-accent-500)), rgb(var(--color-accent-400)));
  box-shadow: 0 12px 30px -14px rgba(4, 120, 87, 0.9);
}

@media (max-width: 1023px) {
  .kv-side, .kv-top { display: none; }
  .kv-mtop {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    padding: 0 max(12px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
    border-bottom: 1px solid var(--kv-line);
    background: rgba(var(--color-dark-950), 0.88);
    backdrop-filter: blur(14px);
  }
  .kv-mtop .kv-brand span { font-size: 23px; }
  .kv-mtop .kv-mark { width: 32px; height: 32px; }
  .kv-sheet:not([hidden]) {
    position: fixed;
    inset: 64px 0 auto 0;
    z-index: 45;
    display: grid;
    gap: 16px;
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    padding: 16px 16px 20px;
    border-bottom: 1px solid var(--kv-line);
    background: rgb(var(--color-dark-950));
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
  }
  .kv-sheet-user { display: flex; align-items: center; gap: 12px; }
  .kv-sheet-user .kv-avatar { width: 46px; height: 46px; font-size: 19px; }
  .kv-sheet-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .kv-sheet-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid var(--kv-line);
    background: var(--kv-card);
    color: rgb(var(--color-dark-200));
    font-size: 15px;
    text-decoration: none;
  }
  .kv-sheet-link .icon { width: 21px; height: 21px; }
  .kv-sheet-link.is-active { border-color: rgb(var(--color-accent-500)); color: rgb(var(--color-accent-300)); background: var(--kv-soft); }
  .kv-sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .kv-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--kv-line);
    background: var(--kv-card);
    color: rgb(var(--color-dark-200));
    font: 600 14px/1 "Manrope", sans-serif;
    cursor: pointer;
  }
  .kv-chip .icon { width: 18px; height: 18px; }
  .kv-chip--danger { color: #fb7185; }
  .kv-shell .kv-main {
    margin-left: 0;
    max-width: none;
    padding: calc(64px + 18px) max(16px, env(safe-area-inset-right)) calc(96px + var(--safe-bottom)) max(16px, env(safe-area-inset-left));
  }
  .kv-bottom {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 8px 6px max(10px, var(--safe-bottom));
    border-top: 1px solid var(--kv-line);
    background: rgba(var(--color-dark-950), 0.94);
    backdrop-filter: blur(16px);
  }
  .kv-bottom-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 6px 2px;
    color: rgb(var(--color-dark-300));
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
  }
  .kv-bottom-link .icon { width: 26px; height: 26px; }
  .kv-bottom-link.is-active { color: rgb(var(--color-accent-400)); }
  .kv-bottom-link.is-active .icon { filter: drop-shadow(0 0 8px rgba(4, 120, 87, 0.7)); }
}

/* ---------- Dashboard hero ---------- */
.kd { display: grid; gap: 20px; margin-bottom: 24px; color: var(--kv-text); }
.kd a { color: inherit; text-decoration: none; }
.kd-hello h2 { margin: 0; font: 700 clamp(28px, 3vw, 40px)/1.15 "Outfit", "Manrope", sans-serif; letter-spacing: -0.6px; }
.kd-hello-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.kd-handle { color: rgb(var(--color-dark-300)); font: 500 clamp(18px, 1.8vw, 24px)/1.2 "Outfit", "Manrope", sans-serif; }
.kd-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 99px;
  border: 1px solid rgba(var(--color-accent-400), 0.5);
  background: rgba(var(--color-accent-500), 0.16);
  color: rgb(var(--color-accent-200));
  font-size: 15px;
  font-weight: 600;
}
.light .kd-badge { color: rgb(var(--color-accent-700)); }
.kd-badge .icon { width: 17px; height: 17px; color: rgb(var(--color-accent-400)); }

.kd-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 20px; }
.kd-card {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border-radius: 22px;
  border: 1px solid var(--kv-line);
  background: linear-gradient(160deg, rgba(var(--color-dark-800), 0.55), rgba(var(--color-dark-900), 0.75));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.light .kd-card { background: #fff; box-shadow: 0 6px 24px -14px rgba(6, 78, 59, 0.25); }
a.kd-card { transition: border-color 0.2s, transform 0.2s; }
a.kd-card:hover { border-color: rgba(var(--color-accent-400), 0.4); transform: translateY(-2px); }

.kd-sub {
  display: flex;
  flex-direction: column;
  border-color: rgba(var(--color-accent-400), 0.35);
  background:
    radial-gradient(420px 280px at 100% 0%, rgba(var(--color-accent-500), 0.55), transparent 70%),
    linear-gradient(160deg, rgba(var(--color-accent-800), 0.55), rgba(var(--color-dark-900), 0.9) 70%);
}
.light .kd-sub {
  background:
    radial-gradient(420px 280px at 100% 0%, rgba(var(--color-accent-400), 0.35), transparent 70%),
    linear-gradient(160deg, rgba(var(--color-accent-100), 1), #fff 70%);
}
.kd-crest {
  position: absolute;
  top: 18px;
  right: 26px;
  width: 132px;
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(4, 120, 87, 0.6));
  pointer-events: none;
}
.kd-sub-head { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.kd-label { color: rgb(var(--color-dark-200)); font-size: 20px; font-weight: 500; }
.kd-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}
.kd-chip i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.kd-chip--ok { color: #d1fae5; background: rgba(34, 197, 94, 0.18); }
.kd-chip--ok i { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.light .kd-chip--ok { color: #166534; }
.kd-chip--trial { color: rgb(var(--color-accent-100)); background: rgba(var(--color-accent-500), 0.25); }
.light .kd-chip--trial { color: rgb(var(--color-accent-800)); }
.kd-chip--zone { color: var(--kv-text); background: rgba(var(--color-accent-500), 0.16); }
.kd-zone-normal { --kd-zone: rgb(var(--color-accent-400)); }
.kd-zone-warning { --kd-zone: #fbbf24; }
.kd-zone-danger { --kd-zone: #fb923c; }
.kd-zone-critical { --kd-zone: #f87171; }
.kd-chip--zone i { background: var(--kd-zone); }
.kd-sub-name {
  position: relative;
  margin: 18px 0 26px;
  padding-right: 150px;
  font: 800 clamp(34px, 3.6vw, 54px)/1.05 "Outfit", "Manrope", sans-serif;
  letter-spacing: -1px;
  overflow-wrap: anywhere;
}
.kd-sub-stats {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: auto;
  padding: 26px 0;
  border-top: 1px solid var(--kv-line);
}
.kd-sub-stats--plain { margin-top: 26px; padding-bottom: 0; }
.kd-stat { display: flex; align-items: center; gap: 16px; min-width: 0; }
.kd-stat + .kd-stat { padding-left: 32px; border-left: 1px solid var(--kv-line); }
.kd-stat small { display: block; color: rgb(var(--color-dark-300)); font-size: 15px; }
.kd-stat strong { display: block; margin-top: 4px; font: 700 clamp(18px, 1.8vw, 26px)/1.15 "Outfit", "Manrope", sans-serif; white-space: nowrap; }
.kd-stat-icon,
.kd-tile-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--kv-soft);
  color: rgb(var(--color-accent-300));
}
.light .kd-stat-icon, .light .kd-tile-icon { color: rgb(var(--color-accent-600)); }
.kd-stat-icon .icon, .kd-tile-icon .icon { width: 26px; height: 26px; }
.kd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 26px;
  border-radius: 14px;
  font: 600 17px/1 "Manrope", sans-serif;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.kd-btn .icon { width: 22px; height: 22px; }
.kd-btn--ghost { width: 100%; border: 1px solid rgba(var(--color-accent-400), 0.35); background: rgba(var(--color-dark-950), 0.35); color: var(--kv-text); }
.light .kd-btn--ghost { background: #fff; }
.kd-sub:hover .kd-btn--ghost { border-color: rgba(var(--color-accent-400), 0.7); }
.kd-btn--primary {
  border: 0;
  background: linear-gradient(135deg, rgb(var(--color-accent-500)), rgb(var(--color-accent-400)));
  color: #fff !important;
  box-shadow: 0 14px 34px -14px rgba(4, 120, 87, 0.95);
}
.kd-btn--primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
.kd-btn--sm { width: auto; min-height: 50px; padding: 0 22px; font-size: 16px; }

.kd-traffic { display: flex; flex-direction: column; }
.kd-refresh {
  display: inline-grid;
  place-items: center;
  margin-left: auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--kv-line);
  border-radius: 11px;
  background: transparent;
  color: rgb(var(--color-dark-300));
  cursor: pointer;
}
.kd-refresh .icon { width: 19px; height: 19px; }
.kd-refresh small { font-size: 11px; }
.kd-refresh:disabled { opacity: 0.6; cursor: default; }
.kd-big { margin-top: 22px; font: 800 clamp(44px, 4.6vw, 68px)/1 "Outfit", "Manrope", sans-serif; letter-spacing: -1.5px; }
.kd-of { margin-top: 8px; color: rgb(var(--color-accent-300)); font: 500 clamp(18px, 1.9vw, 26px)/1.2 "Outfit", "Manrope", sans-serif; }
.light .kd-of { color: rgb(var(--color-accent-600)); }
.kd-progress { display: flex; align-items: center; gap: 16px; margin-top: 30px; }
.kd-progress b { min-width: 40px; color: rgb(var(--color-dark-200)); font-size: 17px; font-weight: 600; text-align: right; }
.kd-bar { position: relative; flex: 1; height: 14px; border-radius: 99px; background: rgba(var(--color-dark-600), 0.45); }
.kd-bar span {
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 14px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgb(var(--color-accent-600)), var(--kd-zone));
  box-shadow: 0 0 14px var(--kd-zone);
}

.kd-devices { display: flex; align-items: center; gap: 22px; padding: 22px 26px; }
.kd-devices .kd-tile-icon { width: 66px; height: 66px; border-radius: 16px; border: 1px solid rgba(var(--color-accent-400), 0.35); }
.kd-devices .kd-tile-icon .icon { width: 30px; height: 30px; }
.kd-devices-text { flex: 1; min-width: 0; }
.kd-devices-text strong { display: block; font: 700 24px/1.2 "Outfit", "Manrope", sans-serif; }
.kd-devices-text small { display: block; margin-top: 4px; color: rgb(var(--color-accent-300)); font-size: 17px; }
.light .kd-devices-text small { color: rgb(var(--color-accent-700)); }

.kd-row { display: grid; grid-template-columns: 1fr 1fr 1.55fr; gap: 20px; }
.kd-row--two { grid-template-columns: 1fr 1fr; }
.kd-mini { display: flex; gap: 22px; padding: 26px; }
.kd-mini .kd-tile-icon { width: 58px; height: 58px; border-radius: 15px; }
.kd-mini small { display: block; color: rgb(var(--color-dark-300)); font-size: 17px; }
.kd-mini strong { display: block; margin-top: 8px; font: 700 clamp(28px, 2.6vw, 38px)/1.05 "Outfit", "Manrope", sans-serif; }
.kd-mini em { display: block; margin-top: 6px; color: rgb(var(--color-dark-300)); font-size: 16px; font-style: normal; }
.kd-more { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; color: rgb(var(--color-accent-400)); font-size: 17px; font-weight: 600; }
.light .kd-more { color: rgb(var(--color-accent-600)); }
.kd-more .icon { width: 19px; height: 19px; transition: transform 0.15s; }
.kd-card:hover .kd-more .icon { transform: translateX(3px); }

@media (max-width: 1279px) {
  .kd-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1023px) {
  .kd { display: flex; flex-direction: column; gap: 16px; }
  .kd-grid { display: contents; }
  .kd-hello { order: 0; display: grid; }
  .kd-sub { order: 1; }
  .kd-devices { order: 2; }
  .kd-buy { order: 2; }
  .kd-traffic { order: 3; }
  .kd-row { order: 4; gap: 14px; }
  .kd-card { padding: 22px; border-radius: 20px; }
  .kd-sub-name { padding-right: 110px; }
  .kd-crest { width: 78px; top: 16px; right: 14px; }
  .kd-sub-head { padding-right: 82px; }
  .kd-label { font-size: 17px; }
  .kd-stat + .kd-stat { padding-left: 18px; }
  .kd-stat-icon { width: 46px; height: 46px; }
  .kd-traffic .kd-sub-stats { display: none; }
  .kd-devices { flex-wrap: wrap; }
  .kd-devices .kd-btn { width: 100%; }
  .kd-mini { flex-direction: column; gap: 14px; padding: 20px; }
  .kd-mini .kd-tile-icon { width: 52px; height: 52px; }
  .kd-mini small, .kd-more { font-size: 15px; }
  .kd-mini em { font-size: 14px; }
  .kd-mini strong { font-size: 26px; white-space: nowrap; }
}
@media (max-width: 420px) {
  .kd-stat { gap: 10px; }
  .kd-stat-icon { width: 40px; height: 40px; border-radius: 12px; }
  .kd-stat strong { font-size: 18px; }
  .kd-stat small { font-size: 13px; }
}
.kd-buy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  border-radius: 16px;
  border: 1px dashed rgba(var(--color-accent-400), 0.45);
  color: rgb(var(--color-accent-300)) !important;
  font-weight: 600;
}
.kd-buy:hover { background: rgba(var(--color-accent-500), 0.08); }
.kd-buy .icon { width: 20px; height: 20px; }
.light .kd-buy { color: rgb(var(--color-accent-700)) !important; }

/* Admin users list & other original admin screens: match the shell surface */
.kv-main [class*="rounded-2xl"][class*="border-dark-700"],
.kv-main [class*="rounded-xl"][class*="border-dark-700"] { border-color: var(--kv-line); }

/* Shared fallbacks and light surfaces use the same emerald design tokens. */
:root { --bg: rgb(var(--color-dark-950)); --sidebar: rgb(var(--color-dark-900)); --panel: rgb(var(--color-dark-900)); --panel2: rgb(var(--color-dark-800)); --line: rgba(var(--color-dark-500),.3); --text: rgb(var(--color-dark-50)); --muted: rgb(var(--color-dark-400)); --green: rgb(var(--color-accent-300)); --greenText: #052e16; }
html.light, html[data-theme="light"] { --color-dark-50: 13,33,21; --color-dark-100: 22,49,32; --color-dark-200: 38,63,49; --color-dark-300: 56,85,66; --color-dark-400: 83,111,94; --color-dark-500: 121,147,131; --color-dark-600: 162,189,173; --color-dark-700: 193,215,202; --color-dark-800: 219,234,224; --color-dark-850: 229,240,232; --color-dark-900: 241,248,243; --color-dark-950: 247,251,248; }
.kv-main .btn-primary, .kv-side-link.is-active { background: linear-gradient(135deg, #047857, #065f46); }
.auth-v2 .av-btn--primary { background: #047857; }
.auth-v2 .av-btn--primary:hover { background: #065f46; }
.light .kv-side-admin, .light .kv-side-admin .icon { color: #047857 !important; }
.kv-side-admin, .kv-side-admin .icon { color: #6ee7b7 !important; }

/* Compact cabinet: reduce decorative space while keeping controls comfortable. */
.kd { gap: 14px; margin-bottom: 18px; }
.kd-hello h2 { font-size: clamp(22px,2vw,28px); line-height: 1.25; letter-spacing: -.3px; }
.kd-hello-meta { gap: 9px; margin-top: 6px; }
.kd-handle { font-size: 16px; }
.kd-badge { padding: 4px 10px; font-size: 11px; }
.kd-badge .icon { width: 14px; height: 14px; }
.kd-grid, .kd-row { gap: 14px; }
.kd-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.kd-card { padding: 20px; border-radius: 14px; background: #10221b; box-shadow: 0 4px 18px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.025); }
.kd-sub { border-color: rgba(var(--color-accent-400),.3); background: radial-gradient(340px 180px at 100% 0%,rgba(4,120,87,.22),transparent 70%),linear-gradient(145deg,#10392c,#10221b 75%); }
.light .kd-sub { background: linear-gradient(135deg,#e9f8f0,#fff 80%); border-color: rgba(4,120,87,.24); }
.kd-label { font-size: 13px; font-weight: 600; }
.kd-chip { gap: 6px; padding: 4px 9px; border-radius: 6px; font-size: 11px; }
.kd-chip--ok { background: rgba(52,211,153,.1); color: #a7f3d0; }
.kd-chip--ok i { background: #34d399; box-shadow: none; }
.kd-chip i { width: 7px; height: 7px; }
.kd-sub-head { gap: 8px; }
.kd-sub .kd-sub-head { padding-right: 72px; }
.kd-crest { width: 64px; top: 12px; right: 18px; filter: none; opacity: .9; }
.kd-sub-name { margin: 16px 0 22px; padding-right: 72px; font-size: clamp(26px,2.3vw,32px); line-height: 1.15; letter-spacing: -.4px; }
.kd-sub-stats { padding: 16px 0; }
.kd-sub-stats--plain { margin-top: 16px; padding-bottom: 0; }
.kd-stat { gap: 9px; }
.kd-stat + .kd-stat { padding-left: 16px; }
.kd-stat > div { min-width: 0; }
.kd-stat small { font-size: 12px; }
.kd-stat strong { margin-top: 4px; font-size: 18px; white-space: normal; overflow-wrap: anywhere; }
.kd-stat-icon, .kd-tile-icon { width: 34px; height: 34px; border-radius: 9px; background: rgba(var(--color-accent-500),.12); }
.kd-stat-icon .icon, .kd-tile-icon .icon { width: 20px; height: 20px; }
.kd-btn { min-height: 44px; gap: 9px; padding: 0 16px; border-radius: 10px; font-size: 13px; }
.kd-btn .icon { width: 18px; height: 18px; }
.kd-btn--primary { background: linear-gradient(135deg,#047857,#065f46); box-shadow: 0 4px 12px rgba(4,120,87,.18); }
.kd-btn--primary:hover { background: #065f46; transform: none; filter: none; }
.kd-btn--ghost { background: rgba(var(--color-accent-500),.06); border-color: rgba(var(--color-accent-400),.24); }
.kd-big { margin-top: 18px; font-size: clamp(34px,3vw,40px); letter-spacing: -.7px; }
.kd-of { margin-top: 6px; font-size: 14px; color: rgb(var(--color-dark-300)); }
.kd-progress { gap: 10px; margin-top: 18px; }
.kd-progress b { font-size: 12px; }
.kd-bar { height: 6px; background: rgba(var(--color-dark-400),.15); }
.kd-bar span { min-width: 0; box-shadow: none; background: var(--kd-zone); }
.kd-devices { gap: 14px; padding: 14px 18px; }
.kd-devices .kd-tile-icon { width: 40px; height: 40px; border-radius: 10px; border: 0; }
.kd-devices .kd-tile-icon .icon { width: 22px; height: 22px; }
.kd-devices-text strong { font-size: 16px; }
.kd-devices-text small { margin-top: 4px; font-size: 12px; color: rgb(var(--color-dark-300)); }
.kd-device-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.kd-device-actions .kd-buy { min-height: 44px; padding: 0 8px; border: 0; border-radius: 8px; font-size: 12px; color: rgb(var(--color-dark-200)) !important; }
.kd-device-actions .kd-buy .icon { width: 15px; height: 15px; }
.kd-mini { gap: 14px; padding: 18px; }
.kd-mini > div { min-width: 0; flex: 1; }
.kd-mini .kd-tile-icon { width: 36px; height: 36px; border-radius: 9px; }
.kd-mini small { font-size: 13px; }
.kd-mini strong { margin-top: 7px; font-size: 26px; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
.kd-mini em { margin-top: 4px; font-size: 12px; }
.kd-more { gap: 8px; margin-top: 10px; font-size: 12px; }
.kd-more .icon { width: 15px; height: 15px; }
.kd, .kv-shell { font-variant-numeric: tabular-nums; }
.kd-hello h2, .kd-handle { overflow-wrap: anywhere; text-wrap: pretty; }
.kd-hello-meta:empty { display: none; }
.kv-shell a:focus-visible, .kv-shell button:focus-visible { outline: 2px solid rgb(var(--color-accent-300)); outline-offset: 3px; }
.light .kv-shell a:focus-visible, .light .kv-shell button:focus-visible { outline-color: #047857; }
.kv-side-link.is-active { background: rgba(4,120,87,.2); box-shadow: inset 3px 0 0 #34d399; }
.light .kv-side-link.is-active { background: #e0f2e9; color: #065f46; box-shadow: inset 3px 0 0 #047857; }
.light .kv-side-link.is-active .icon { color: #047857; }
.kv-shell .kv-main > #page-content { max-width: 1200px; margin-inline: auto; }
.kv-main .bento-card, .kv-main .bento-card-hover, .kv-main .card { border-radius: 14px; }
.kv-bottom-link.is-active .icon { filter: none; }
.light .kv-bottom-link.is-active { color: #047857; }
.light .kv-sheet-link.is-active { color: #065f46; }
@media(min-width: 1024px) {
  .kv-shell { --kv-side: 232px; }
  .kv-side { padding: 22px 12px 16px; }
  .kv-side > .kv-brand { padding: 0 12px 24px; }
  .kv-brand { gap: 10px; }
  .kv-brand span { font-size: 23px; }
  .kv-mark { width: 33px; height: 33px; }
  .kv-side-label { margin-bottom: 9px; font-size: 10px; }
  .kv-side-nav { gap: 3px; }
  .kv-side-link { min-height: 42px; padding: 0 12px; gap: 12px; border-radius: 8px; font-size: 14px; }
  .kv-side-link .icon { width: 20px; height: 20px; }
  .kv-side-sep { margin: 10px; }
  .kv-user { gap: 10px; padding: 14px 8px 0; }
  .kv-avatar { width: 40px; height: 40px; font-size: 17px; }
  .kv-user-text strong { font-size: 12px; }
  .kv-user-text small { font-size: 10px; }
  .kv-top { height: 64px; padding: 0 24px; }
  .kv-top-title { font-size: 19px; }
  .kv-top-actions { gap: 8px; }
  .kv-icon-btn, .kv-icon-btn--boxed { width: 38px; height: 38px; border-radius: 10px; }
  .kv-icon-btn .icon { width: 20px; height: 20px; }
  .kv-lang { height: 38px; font-size: 13px; }
  .kv-shell .kv-main { max-width: none; padding: 22px 24px 32px; }
}
@media(max-width: 1023px) {
  .kd { gap: 12px; }
  .kd-sub-name { padding-right: 0; margin-top: 18px; }
  .kd-crest { width: 50px; right: 14px; }
  .kd-sub .kd-sub-head { min-height: 40px; padding-right: 54px; }
  .kd-sub-name { margin-top: 12px; }
  .kd-card { padding: 16px; }
  .kd-mini { gap: 9px; }
  .kd-mini strong { font-size: 23px; }
  .kd-traffic .kd-sub-head { padding-right: 0; }
  .kd-device-actions { width: 100%; flex-direction: column; gap: 4px; }
  .kd-devices .kd-btn { min-height: 44px; }
  .kd-device-actions .kd-buy { width: 100%; min-height: 44px; order: 0; }
}
@media(max-width: 420px) {
  .kd-stat-icon { display: none; }
  .kd-stat strong { font-size: 17px; }
  .kd-stat + .kd-stat { padding-left: 12px; }
  .kd-sub-head .kd-label { font-size: 12px; }
  .kd-row--two { grid-template-columns: minmax(0,1fr); }
  .kd-mini { flex-direction: row; gap: 12px; padding: 16px; }
  .kd-mini .kd-tile-icon { width: 34px; height: 34px; }
  .kd-mini strong { font-size: 24px; }
  .kd-mini .kd-more { margin-top: 7px; }
  .kd-hello h2 { font-size: 22px; }
}

/* Safe areas. --tg-top/--tg-bottom come from telegram-viewport.js in Telegram fullscreen mode, where
   iOS reports env(safe-area-inset-*) as 0 while the status bar and Telegram's buttons cover the page. */
:root { --safe-top: max(env(safe-area-inset-top, 0px), var(--tg-top, 0px)); --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-bottom, 0px)); }
@media (max-width: 1023px) {
  .kv-mtop { height: calc(64px + var(--safe-top)); padding-top: var(--safe-top); }
  .kv-sheet:not([hidden]) { top: calc(64px + var(--safe-top)); max-height: calc(100dvh - 64px - var(--safe-top)); }
  .kv-shell .kv-main { padding-top: calc(64px + 18px + var(--safe-top)); }
}
.public-page { padding-top: calc(40px + var(--safe-top)); }
#toast-host { bottom: calc(25px + var(--safe-bottom)); }
html.tg-fullscreen .boot-v2 { padding-top: var(--safe-top); }

/* --------------------------------------------------------------------------
   Resilient app frame

   Telegram Desktop can mount a Mini App next to the chat list.  In that mode
   the main block used to keep a full-viewport width *in addition* to its left
   margin, so the right column lived outside the visible WebView.  Give every
   shell column an explicit box and let the dashboard react to the width it
   actually receives, rather than only to the browser media-query width.
   -------------------------------------------------------------------------- */
html, body, #app { min-width: 0; max-width: 100%; }
body { width: 100%; overflow-x: clip; }
.kv-shell { width: 100%; min-width: 0; overflow-x: clip; }
.kv-shell .kv-main {
  width: calc(100% - var(--kv-side));
  min-width: 0;
}
.kv-shell .kv-main > #page-content {
  width: 100%;
  min-width: 0;
  container: cabinet-page / inline-size;
}

/* A quieter, more premium surface treatment.  It stays CSS-only and therefore
   remains instant inside Telegram's WebView, including on low-end phones. */
.kv-shell {
  background:
    radial-gradient(900px 620px at 76% -180px, rgba(16, 185, 129, .13), transparent 68%),
    radial-gradient(520px 420px at 18% 92%, rgba(4, 120, 87, .07), transparent 72%),
    rgb(var(--color-dark-950));
}
.kv-side {
  background: linear-gradient(180deg, rgba(8, 28, 20, .98), rgba(4, 19, 13, .98));
  box-shadow: 18px 0 55px rgba(0, 0, 0, .12);
}
.kv-top { box-shadow: 0 12px 30px rgba(0, 0, 0, .08); }
.kd-card {
  border-color: rgba(134, 164, 154, .16);
  background:
    linear-gradient(145deg, rgba(255,255,255,.025), transparent 42%),
    linear-gradient(160deg, rgba(20, 48, 37, .84), rgba(12, 31, 24, .9));
  box-shadow: 0 18px 45px -34px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.035);
}
.kd-sub {
  background:
    radial-gradient(360px 220px at 100% 0%, rgba(16,185,129,.2), transparent 68%),
    linear-gradient(145deg, #113c2e, #0d261d 72%);
}
.kd-btn--primary {
  background: linear-gradient(135deg, #059669, #047857);
  box-shadow: 0 10px 28px -16px rgba(52,211,153,.85);
}
.kd-btn--ghost { backdrop-filter: blur(8px); }
.kd-tile-icon, .kd-stat-icon { border: 1px solid rgba(110,231,183,.08); }
.kd-bar { overflow: hidden; }
.kd-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent);
  pointer-events: none;
}
.light .kv-shell {
  background:
    radial-gradient(860px 560px at 78% -160px, rgba(16,185,129,.12), transparent 68%),
    rgb(var(--color-dark-950));
}
.light .kv-side { background: rgba(255,255,255,.92); }
.light .kd-card { background: rgba(255,255,255,.9); }
.light .kd-sub { background: linear-gradient(140deg,#e4f7ed,#fff 76%); }

/* visualViewport fallback for Telegram Desktop builds whose CSS layout
   viewport is wider than the part of the WebView the person can see. */
html.compact-viewport .kv-side,
html.compact-viewport .kv-top { display: none; }
html.compact-viewport .kv-mtop {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(64px + var(--safe-top));
  padding: var(--safe-top) max(12px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--kv-line);
  background: rgba(5,22,15,.94);
  box-shadow: 0 12px 34px rgba(0,0,0,.16);
}
html.compact-viewport .kv-mtop .kv-brand span { font-size: 23px; }
html.compact-viewport .kv-mtop .kv-mark { width: 32px; height: 32px; }
html.compact-viewport .kv-shell .kv-main {
  width: 100%;
  max-width: none;
  margin-left: 0;
  padding: calc(82px + var(--safe-top)) max(16px, env(safe-area-inset-right)) calc(104px + var(--safe-bottom)) max(16px, env(safe-area-inset-left));
}
html.compact-viewport .kv-bottom {
  position: fixed;
  inset: auto 0 0;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  margin: 0 10px calc(8px + var(--safe-bottom));
  padding: 7px 5px;
  border: 1px solid rgba(134,164,154,.16);
  border-radius: 18px;
  background: rgba(8,29,21,.94);
  box-shadow: 0 18px 50px rgba(0,0,0,.34);
  backdrop-filter: blur(16px);
}
html.compact-viewport .kv-bottom-link {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 6px 2px;
  border-radius: 12px;
  color: rgb(var(--color-dark-300));
  font-size: 12px;
  font-weight: 600;
}
html.compact-viewport .kv-bottom-link .icon { width: 26px; height: 26px; }
html.compact-viewport .kv-bottom-link.is-active { color: rgb(var(--color-accent-400)); background: rgba(16,185,129,.12); }
html.compact-viewport .kv-sheet:not([hidden]) {
  position: fixed;
  inset: calc(64px + var(--safe-top)) 0 auto;
  z-index: 45;
  display: grid;
  gap: 16px;
  max-height: calc(100dvh - 64px - var(--safe-top));
  overflow-y: auto;
  padding: 16px 16px calc(20px + var(--safe-bottom));
  border-bottom: 1px solid var(--kv-line);
  background: rgb(var(--color-dark-950));
  box-shadow: 0 30px 60px rgba(0,0,0,.45);
}
html.compact-viewport .kv-sheet-user { display: flex; align-items: center; gap: 12px; }
html.compact-viewport .kv-sheet-user .kv-avatar { width: 46px; height: 46px; font-size: 19px; }
html.compact-viewport .kv-sheet-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
html.compact-viewport .kv-sheet-link {
  display: flex;
  min-width: 0;
  min-height: 50px;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--kv-line);
  border-radius: 14px;
  background: var(--kv-card);
  color: rgb(var(--color-dark-200));
  font-size: 15px;
}
html.compact-viewport .kv-sheet-link .icon { width: 21px; height: 21px; }
html.compact-viewport .kv-sheet-link.is-active { border-color: rgb(var(--color-accent-500)); color: rgb(var(--color-accent-300)); background: var(--kv-soft); }
html.compact-viewport .kv-sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; }
html.compact-viewport .kv-chip {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--kv-line);
  border-radius: 12px;
  background: var(--kv-card);
  color: rgb(var(--color-dark-200));
}
html.compact-viewport.light .kv-mtop,
html.compact-viewport.light .kv-bottom { background: rgba(255,255,255,.95); }

/* Container fallbacks are intentionally repeated below the viewport rules.
   This protects the dashboard when Telegram reports a desktop-sized layout
   viewport but gives the page a much narrower visible column. */
@container cabinet-page (max-width: 880px) {
  .kd { display: flex; flex-direction: column; gap: 12px; }
  .kd-grid { display: contents; }
  .kd-hello { order: 0; }
  .kd-sub { order: 1; }
  .kd-devices, .kd-buy { order: 2; }
  .kd-traffic { order: 3; }
  .kd-row { order: 4; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kd-card { padding: 18px; }
  .kd-sub-name { padding-right: 64px; }
  .kd-crest { width: 56px; right: 14px; }
  .kd-sub .kd-sub-head { padding-right: 58px; }
  .kd-devices { flex-wrap: wrap; }
  .kd-device-actions { width: 100%; }
  .kd-device-actions .kd-btn { flex: 1; }
}
@container cabinet-page (max-width: 560px) {
  .kd-hello h2 { font-size: clamp(21px, 7vw, 26px); }
  .kd-row, .kd-row--two { grid-template-columns: minmax(0, 1fr); }
  .kd-sub-stats { gap: 0; }
  .kd-stat-icon { display: none; }
  .kd-stat + .kd-stat { padding-left: 12px; }
  .kd-devices { align-items: flex-start; padding: 16px; }
  .kd-devices .kd-tile-icon { width: 36px; height: 36px; }
  .kd-devices-text strong { font-size: 15px; }
  .kd-device-actions { flex-direction: column; }
  .kd-device-actions .kd-btn, .kd-device-actions .kd-buy { width: 100%; }
  .kd-mini { flex-direction: row; padding: 16px; }
}

@media (max-width: 1023px) {
  .kv-shell .kv-main { width: 100%; }
  .kv-mtop {
    background: rgba(5, 22, 15, .94);
    box-shadow: 0 12px 34px rgba(0,0,0,.16);
  }
  .kv-bottom {
    margin: 0 10px calc(8px + var(--safe-bottom));
    padding: 7px 5px;
    border: 1px solid rgba(134,164,154,.16);
    border-radius: 18px;
    background: rgba(8, 29, 21, .94);
    box-shadow: 0 18px 50px rgba(0,0,0,.34);
  }
  .kv-bottom-link { min-width: 0; border-radius: 12px; }
  .kv-bottom-link.is-active { background: rgba(16,185,129,.12); }
  .kv-shell .kv-main { padding-bottom: calc(104px + var(--safe-bottom)); }
  .light .kv-mtop, .light .kv-bottom { background: rgba(255,255,255,.95); }
}

@media (max-width: 380px) {
  .kv-shell .kv-main { padding-inline: 12px; }
  .kd-card { padding: 14px; }
  .kd-sub-name { font-size: 24px; }
  .kd-stat strong { font-size: 16px; }
  .kd-stat small { font-size: 11px; }
  .kv-bottom-link { font-size: 10px; }
  .kv-bottom-link .icon { width: 22px; height: 22px; }
}


.light .brand, html[data-theme="light"] .brand { color: rgb(var(--color-dark-100)); }
.light .card, html[data-theme="light"] .card { box-shadow: 0 10px 26px -18px rgba(6,78,59,.22); }
.light .btn.primary, html[data-theme="light"] .btn.primary { box-shadow: 0 12px 24px -18px rgba(4,120,87,.35); }