/* kptVPN 2026 shell — floating top navigation inspired by the spatial rhythm
   of dev.grpe.fun, rebuilt for a data-heavy Telegram Mini App. */

:root {
  --v3-bg: #06110c;
  --v3-panel: rgba(13, 29, 21, .82);
  --v3-panel-solid: #0d1d15;
  --v3-panel-2: #11271c;
  --v3-line: rgba(102, 255, 163, .12);
  --v3-line-hot: rgba(71, 238, 137, .3);
  --v3-green: #35e47d;
  --v3-green-2: #16b85d;
  --v3-ink: #f1fff6;
  --v3-muted: #8ca99a;
  --v3-shadow: 0 20px 70px rgba(0, 0, 0, .32);
  --v3-max: 1180px;
  --v3-visible-width: min(100vw, var(--visual-viewport-width, 100vw));
  --v3-top-edge: 18px;
  --v3-top-height: 58px;
}

html, body, #app { width: 100%; min-width: 0; min-height: 100%; }
body {
  overflow-x: clip;
  background:
    radial-gradient(circle at 76% 2%, rgba(53, 228, 125, .12), transparent 30rem),
    radial-gradient(circle at 8% 38%, rgba(22, 184, 93, .07), transparent 26rem),
    var(--v3-bg);
  background-attachment: fixed;
}
body::before { opacity: .018; }

.kv-shell {
  width: 100%;
  min-height: 100dvh;
  padding-top: calc(88px + var(--safe-top));
  overflow-x: clip;
  background: transparent;
  color: var(--v3-ink);
}

/* One compact centered navigation capsule, like the reference. */
.kv-side {
  position: fixed;
  inset: calc(var(--v3-top-edge) + var(--safe-top)) auto auto calc(var(--v3-visible-width) / 2);
  z-index: 50;
  width: max-content;
  max-width: calc(var(--v3-visible-width) - var(--v3-top-edge) - var(--v3-top-edge));
  height: var(--v3-top-height);
  padding: 7px 9px 7px 11px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 3px;
  border: 1px solid var(--v3-line);
  border-radius: 999px;
  background: rgba(8, 20, 13, .8);
  box-shadow: 0 12px 44px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter: blur(20px) saturate(1.2);
  transform: translateX(-50%);
}
.kv-side > .kv-brand {
  flex: 0 0 auto;
  width: auto;
  gap: 8px;
  padding: 0 10px 0 2px;
}
.kv-brand span { font: 800 18px/1 Inter, Manrope, sans-serif; letter-spacing: -.04em; }
.kv-mark { width: 30px; height: 30px; }
.kv-side-label, .kv-side-sep { display: none; }
.kv-side-nav {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  overflow: visible;
  scrollbar-width: none;
}
.kv-side-nav::-webkit-scrollbar { display: none; }
.kv-side-link {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 10px;
  gap: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #acc6b7;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease, transform .2s ease, border-color .2s ease;
}
.kv-side-link .icon { display: none; }
.kv-side-link:hover { color: #fff; background: rgba(255,255,255,.05); transform: none; }
.kv-side-link.is-active {
  color: #031108;
  border-color: rgba(112,255,168,.5);
  background: linear-gradient(135deg, #52ef8c, var(--v3-green));
  box-shadow: 0 8px 24px rgba(53,228,125,.18), inset 0 1px 0 rgba(255,255,255,.4);
}
.kv-side-link.is-active:hover {
  color: #031108;
  background: linear-gradient(135deg, #52ef8c, var(--v3-green));
  transform: none;
}
.kv-side-link.is-active .icon { color: #052e16; }
.kv-side-admin, .kv-side-admin .icon { color: #8cf7b5 !important; }
.kv-side-admin.is-active { color: #031108 !important; }

.kv-user {
  flex: 0 0 auto;
  width: auto;
  justify-content: flex-end;
  gap: 7px;
  margin: 0 0 0 3px;
  padding: 0 0 0 7px;
  border: 0;
}
.kv-avatar {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(93,255,155,.22);
  background: linear-gradient(135deg, #214d35, #0d2c1d);
  font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.kv-user-text { display: none; }
.kv-user .kv-icon-btn { width: 34px; height: 34px; }

.kv-top {
  display: none;
}
.kv-top-title { display: none; }
.kv-top-actions {
  position: relative;
  flex: 0 0 auto;
  width: auto;
  margin-left: 3px;
  padding-left: 7px;
  display: flex;
  justify-content: center;
  gap: 2px;
  border-left: 1px solid var(--v3-line);
}
.kv-icon-btn, .kv-icon-btn--boxed, .kv-lang {
  height: 42px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #afc8b9;
}
.kv-icon-btn, .kv-icon-btn--boxed { width: 42px; }
.kv-icon-btn .icon { width: 19px; height: 19px; }
.kv-icon-btn:hover, .kv-lang:hover {
  border-color: var(--v3-line);
  background: rgba(255,255,255,.05);
  color: #fff;
}
.kv-lang { padding: 0 12px; font-size: 12px; }
.kv-lang[aria-expanded="true"] { border-color: var(--v3-line-hot); background: rgba(53,228,125,.09); color: #fff; }
.kv-lang[aria-expanded="true"] .icon { transform: rotate(180deg); }
.kv-lang .icon { transition: transform .2s ease; }
.kv-language-menu {
  position: absolute;
  top: calc(100% + 13px);
  right: 0;
  z-index: 70;
  width: 178px;
  padding: 6px;
  border: 1px solid var(--v3-line);
  border-radius: 16px;
  background: rgba(8,20,13,.98);
  box-shadow: var(--v3-shadow);
  backdrop-filter: blur(20px);
}
.kv-language-menu[hidden] { display: none; }
.kv-language-menu button {
  width: 100%;
  min-height: 42px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #bad0c2;
  font: 600 13px/1 Inter, Manrope, sans-serif;
  cursor: pointer;
}
.kv-language-menu button:hover { background: rgba(255,255,255,.05); color: #fff; }
.kv-language-menu button[aria-checked="true"] { background: rgba(53,228,125,.1); color: #8cf7b5; }
.kv-language-menu button[aria-checked="true"]::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--v3-green);
  box-shadow: 0 0 10px rgba(53,228,125,.65);
}
.kv-language-menu button[aria-checked="true"] span { margin-right: auto; }
.kv-language-menu small { margin-left: auto; color: #6f8d7d; font-size: 10px; }
.kv-bell::after { top: 8px; right: 8px; width: 7px; height: 7px; background: var(--v3-green); }
.kv-mtop, .kv-bottom, .kv-sheet { display: none; }

/* Content frame. */
.kv-shell .kv-main {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 24px 20px 60px;
}
.kv-shell .kv-main > #page-content {
  width: min(var(--v3-max), 100%);
  max-width: var(--v3-max);
  min-width: 0;
  margin-inline: auto;
  container: cabinet-v3 / inline-size;
}
#page-content > * { min-width: 0; }

/* Dashboard: expressive bento cards, but still dense enough for a cabinet. */
.kd { gap: 16px; margin: 0 0 24px; }
.kd-hello { padding: 10px 4px 6px; }
.kd-hello h2 {
  max-width: 760px;
  font: 760 clamp(30px, 4vw, 48px)/1.02 Inter, Manrope, sans-serif;
  letter-spacing: -.02em;
}
.kd-hello h2::after { content: ""; display: inline-block; width: .18em; height: .18em; margin-left: .08em; border-radius: 50%; background: var(--v3-green); box-shadow: 0 0 20px rgba(53,228,125,.75); vertical-align: baseline; }
.kd-hello-meta { margin-top: 12px; }
.kd-handle { color: var(--v3-muted); font: 500 15px/1.2 Inter, sans-serif; }
.kd-badge, .kd-chip {
  border: 1px solid rgba(93,255,155,.16);
  border-radius: 999px;
  background: rgba(53,228,125,.075);
  color: #9df7bd;
}
.kd-chip--zone.kd-zone-warning { border-color: rgba(251,191,36,.25); background: rgba(251,191,36,.1); color: #fcd34d; }
.kd-chip--zone.kd-zone-danger { border-color: rgba(251,146,60,.25); background: rgba(251,146,60,.1); color: #fdba74; }
.kd-chip--zone.kd-zone-critical { border-color: rgba(248,113,113,.25); background: rgba(248,113,113,.1); color: #fca5a5; }
.light .kd-chip, html[data-theme="light"] .kd-chip {
  border-color: rgba(4,120,87,.22);
  background: rgba(16,185,129,.1);
  color: #065f46;
}
.light .kd-chip--zone.kd-zone-normal, html[data-theme="light"] .kd-chip--zone.kd-zone-normal { --kd-zone: #059669; }
.light .kd-chip--zone.kd-zone-warning, html[data-theme="light"] .kd-chip--zone.kd-zone-warning { --kd-zone: #d97706; border-color: rgba(217,119,6,.28); background: rgba(245,158,11,.12); color: #92400e; }
.light .kd-chip--zone.kd-zone-danger, html[data-theme="light"] .kd-chip--zone.kd-zone-danger { --kd-zone: #ea580c; border-color: rgba(234,88,12,.28); background: rgba(249,115,22,.12); color: #9a3412; }
.light .kd-chip--zone.kd-zone-critical, html[data-theme="light"] .kd-chip--zone.kd-zone-critical { --kd-zone: #dc2626; border-color: rgba(220,38,38,.28); background: rgba(239,68,68,.1); color: #991b1b; }
.kd-grid { grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr); gap: 14px; }
.kd-card {
  padding: 24px;
  border: 1px solid var(--v3-line);
  border-radius: 22px;
  background: linear-gradient(155deg, rgba(20,46,32,.9), rgba(8,21,14,.88));
  box-shadow: 0 18px 60px -42px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.035);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
a.kd-card:hover {
  transform: translateY(-4px);
  border-color: var(--v3-line-hot);
  box-shadow: 0 24px 65px -38px rgba(0,0,0,.9), 0 0 32px rgba(53,228,125,.04);
}
.kd-sub {
  border-color: rgba(93,255,155,.2);
  background:
    radial-gradient(circle at 88% 12%, rgba(53,228,125,.2), transparent 15rem),
    linear-gradient(140deg, #133a28, #0a2015 74%);
}
.kd-crest {
  width: 80px;
  top: 18px;
  right: 20px;
  opacity: .9;
  overflow: visible;
  filter: drop-shadow(0 9px 18px rgba(53,228,125,.16));
  transform: translateZ(0);
}
.kd-sub .kd-sub-head { padding-right: 92px; }
.kd-label { color: #bdd4c6; font-size: 13px; }
.kd-sub-name {
  margin: 20px 0 28px;
  padding-right: 90px;
  font: 780 clamp(30px,4vw,44px)/1.04 Inter, Manrope, sans-serif;
  letter-spacing: -.02em;
}
.kd-sub-stats { padding: 20px 0; border-color: var(--v3-line); }
.kd-stat-icon, .kd-tile-icon {
  border: 1px solid rgba(93,255,155,.1);
  border-radius: 13px;
  background: rgba(53,228,125,.08);
  color: #65ef9a;
}
.kd-stat small, .kd-mini small, .kd-mini em { color: var(--v3-muted); }
.kd-btn { border-radius: 13px; }
.kd-btn--ghost { border-color: rgba(93,255,155,.2); background: rgba(4,18,10,.28); }
.kd-btn--primary {
  color: #031108 !important;
  background: linear-gradient(135deg, #54ed8b, var(--v3-green));
  box-shadow: 0 12px 30px -18px rgba(53,228,125,.8);
}
.kd-btn--primary:hover { background: #5df59a; }
.kd-big { font: 800 clamp(42px,5vw,64px)/.95 Inter, sans-serif; letter-spacing: -.025em; }
.kd-of { color: var(--v3-muted); }
.kd-bar { height: 8px; background: rgba(130,172,147,.14); }
.kd-bar span { background: var(--v3-green); box-shadow: 0 0 18px rgba(53,228,125,.4); }
.kd-devices { padding: 18px 22px; }
.kd-row { gap: 14px; }
.kd-mini { padding: 22px; }
.kd-more { color: var(--v3-green); }

/* Animated connect-device CTAs.
   Smoothness rules: the blurred glow is painted once and only its opacity and
   transform animate (GPU-composited); no box-shadow or filter keyframes.  The
   only repaint per frame is the 1px rotating border, which is cheap. */
@property --connect-glow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes connect-border-flow { to { --connect-glow-angle: 360deg; } }
@keyframes connect-glow-pulse {
  0%, 100% { opacity: .38; transform: scale(.97); }
  50% { opacity: .78; transform: scale(1.02); }
}
@keyframes connect-sheen {
  0%, 30% { transform: translate3d(-120%,0,0); opacity: 0; }
  40% { opacity: 1; }
  70%, 100% { transform: translate3d(120%,0,0); opacity: 0; }
}

/* Connect-device row button ("Подключить устройство · 0 из 2"): static border,
   only a soft sheen passes over it. Overrides the motion.css kill-switch. */
.connect-device-glow.connect-device-glow {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(53,228,125,.32) !important;
  background: linear-gradient(135deg, rgba(14,42,29,.96), rgba(8,29,19,.96)) !important;
  box-shadow: 0 8px 26px -14px rgba(53,228,125,.45);
  animation: none !important;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease !important;
}
.connect-device-glow.connect-device-glow::before { display: none !important; }
.connect-device-glow.connect-device-glow::after {
  content: "";
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(171,255,207,.12) 45%, rgba(255,255,255,.22) 50%, rgba(171,255,207,.1) 55%, transparent 70%);
  pointer-events: none;
  will-change: transform, opacity;
  animation: connect-sheen 4.5s cubic-bezier(.45,0,.25,1) infinite !important;
}
.connect-device-glow > * { position: relative; z-index: 1; }
.connect-device-glow:not(:disabled):hover {
  transform: translate3d(0,-2px,0);
  border-color: rgba(53,228,125,.55) !important;
  box-shadow: 0 14px 30px -14px rgba(53,228,125,.6);
}
.connect-device-glow:not(:disabled):active { transform: scale(.99); }
.light .connect-device-glow.connect-device-glow {
  border-color: rgba(4,120,87,.28) !important;
  background: linear-gradient(135deg, rgba(247,255,250,.98), rgba(236,250,241,.98)) !important;
  box-shadow: 0 8px 24px -16px rgba(4,120,87,.35);
}
.light .connect-device-glow.connect-device-glow::after {
  background: linear-gradient(105deg, transparent 30%, rgba(4,120,87,.06) 43%, rgba(6,78,59,.16) 50%, rgba(4,120,87,.05) 57%, transparent 70%);
}

/* Dashboard primary CTA (the green "Подключить устройство" button). */
.kv-main .kd-btn--primary {
  --connect-glow-angle: 0deg;
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: 1px solid transparent !important;
  color: #031108 !important;
  background-color: #35e47d !important;
  background-image:
    linear-gradient(135deg, #55ef8d, #2ee477) padding-box,
    conic-gradient(from var(--connect-glow-angle), #35e47d, #d1ffe1, #16b85d, #74f7a4, #35e47d) border-box !important;
  box-shadow: 0 10px 26px -12px rgba(53,228,125,.7), inset 0 1px 0 rgba(255,255,255,.42);
  animation: connect-border-flow 5s linear infinite;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease !important;
}
/* Soft halo: static blur, animated only via opacity/transform. */
.kv-main .kd-btn--primary::before {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: -2;
  border-radius: 18px;
  background: rgba(53,228,125,.55);
  filter: blur(14px);
  pointer-events: none;
  will-change: opacity, transform;
  animation: connect-glow-pulse 3s ease-in-out infinite;
}
/* Sheen is clipped by its own rounded box, so the button can keep overflow visible for the halo. */
.kv-main .kd-btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%) no-repeat;
  background-size: 50% 100%;
  clip-path: inset(0 round 12px);
  pointer-events: none;
  will-change: background-position;
  animation: primary-cta-sheen 4s cubic-bezier(.45,0,.25,1) infinite;
}
.kv-main .kd-btn--primary > * { position: relative; z-index: 1; }
.kv-main .kd-btn--primary:hover,
.kv-main .kd-btn--primary:focus-visible,
.kv-main .kd-btn--primary:visited {
  color: #031108 !important;
  background-color: #35e47d !important;
  background-image:
    linear-gradient(135deg, #65f49a, #35e47d) padding-box,
    conic-gradient(from var(--connect-glow-angle), #35e47d, #e1ffeb, #16b85d, #8effb8, #35e47d) border-box !important;
}
.kv-main .kd-btn--primary:hover {
  transform: translate3d(0,-2px,0);
  box-shadow: 0 14px 30px -12px rgba(53,228,125,.85), inset 0 1px 0 rgba(255,255,255,.5);
}
.kv-main .kd-btn--primary:active { transform: scale(.98); }
@keyframes primary-cta-sheen {
  0%, 30% { background-position: -100% 0; }
  70%, 100% { background-position: 200% 0; }
}

/* Shared motion language for the rest of the cabinet actions. */
.kv-main :is(.kd-btn--ghost, .kd-buy, .btn, .btn-primary, .btn-secondary, .btn-danger) {
  position: relative;
  overflow: hidden;
  backface-visibility: hidden;
  will-change: transform, box-shadow;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, filter .2s ease !important;
}
.kv-main :is(.kd-btn--ghost, .kd-buy, .btn, .btn-primary, .btn-secondary, .btn-danger)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.16) 48%, transparent 76%);
  transform: translateX(-130%);
  transition: transform .65s cubic-bezier(.2,.75,.2,1);
  pointer-events: none;
}
.kv-main :is(.kd-btn--ghost, .kd-buy, .btn, .btn-primary, .btn-secondary, .btn-danger) > * { position: relative; z-index: 1; }
.kv-main :is(.kd-btn--ghost, .kd-buy, .btn, .btn-primary, .btn-secondary, .btn-danger):hover {
  transform: translateY(-2px);
  border-color: rgba(83,239,143,.42);
  box-shadow: 0 10px 26px -14px rgba(53,228,125,.42), 0 0 18px rgba(53,228,125,.07);
}
.kv-main :is(.kd-btn--ghost, .kd-buy, .btn, .btn-primary, .btn-secondary, .btn-danger):hover::after { transform: translateX(130%); }
.kv-main :is(.kd-btn--ghost, .kd-buy, .btn, .btn-primary, .btn-secondary, .btn-danger):active { transform: translateY(0) scale(.98); }

/* "Управлять подпиской": accented border, periodic sheen and a nudging arrow.
   Only transform/opacity animate, so it stays smooth. */
.kv-main .kd-btn--ghost {
  border: 1px solid rgba(53,228,125,.42) !important;
  box-shadow: 0 8px 22px -16px rgba(53,228,125,.55);
}
.kv-main .kd-btn--ghost::after {
  background: linear-gradient(105deg, transparent 30%, rgba(171,255,207,.1) 44%, rgba(255,255,255,.2) 50%, rgba(171,255,207,.08) 56%, transparent 70%);
  will-change: transform, opacity;
  animation: connect-sheen 4.5s cubic-bezier(.45,0,.25,1) infinite;
}
.kv-main .kd-btn--ghost svg {
  will-change: transform;
  animation: ghost-arrow-nudge 2.2s ease-in-out infinite;
}
.kv-main .kd-sub:hover .kd-btn--ghost,
.kv-main .kd-btn--ghost:hover {
  border-color: rgba(53,228,125,.7) !important;
  box-shadow: 0 12px 26px -14px rgba(53,228,125,.6);
}
@keyframes ghost-arrow-nudge {
  0%, 55%, 100% { transform: translateX(0); }
  70% { transform: translateX(4px); }
  85% { transform: translateX(0); }
}
.light .kv-main .kd-btn--ghost, html[data-theme="light"] .kv-main .kd-btn--ghost {
  border-color: #047857 !important;
  color: #064e3b;
  box-shadow: 0 8px 22px -16px rgba(4,120,87,.5);
}
.light .kv-main .kd-btn--ghost::after, html[data-theme="light"] .kv-main .kd-btn--ghost::after {
  background: linear-gradient(105deg, transparent 30%, rgba(4,120,87,.06) 43%, rgba(6,78,59,.14) 50%, rgba(4,120,87,.05) 57%, transparent 70%);
}
.light .kv-main .kd-sub:hover .kd-btn--ghost, .light .kv-main .kd-btn--ghost:hover {
  border-color: #065f46 !important;
  box-shadow: 0 12px 26px -14px rgba(4,120,87,.55);
}
@media (prefers-reduced-motion: reduce) {
  .kv-main .kd-btn--ghost::after, .kv-main .kd-btn--ghost svg { animation: none !important; }
}

/* Shared legacy pages adopt the same system without rewriting every renderer. */
.kv-main .bento-card,
.kv-main .bento-card-hover,
.kv-main .card,
.clone-shell [class*="rounded-2xl"][class*="border-dark-700"],
.clone-shell [class*="rounded-xl"][class*="border-dark-700"] {
  border-color: var(--v3-line);
  border-radius: 20px;
  background-color: rgba(13,29,21,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.kv-main .btn-primary {
  border-radius: 12px;
  color: #031108;
  background: var(--v3-green);
  box-shadow: 0 10px 30px -18px rgba(53,228,125,.8);
}
.kv-main input, .kv-main textarea, .kv-main select {
  border-color: var(--v3-line);
  border-radius: 13px;
  background: rgba(5,18,11,.72);
}
.kv-main input:focus, .kv-main textarea:focus, .kv-main select:focus {
  border-color: rgba(53,228,125,.44);
  box-shadow: 0 0 0 4px rgba(53,228,125,.07);
}

/* Light mode keeps the same spatial design. */
html.light body, html[data-theme="light"] body {
  background:
    radial-gradient(circle at 76% 2%, rgba(22,184,93,.12), transparent 30rem),
    #eef8f1;
}
.light .kv-shell { color: #102b1b; }
.light .kv-side, .light .kv-top, .light .kv-mtop {
  border-color: rgba(4,120,87,.13);
  background: rgba(255,255,255,.84);
  box-shadow: 0 12px 40px rgba(31,79,50,.1);
}
.light .kv-language-menu { border-color: rgba(4,120,87,.13); background: rgba(255,255,255,.98); }
.light .kv-language-menu button { color: #486657; }
.light .kv-language-menu button:hover { color: #123e25; background: rgba(4,120,87,.06); }
.light .kv-side-link { color: #486657; }
.light .kv-side-link:hover { color: #123e25; background: rgba(4,120,87,.06); }
.light .kv-side-link.is-active { color: #052e16; }
.light .kd-card, .light .kv-main .card, .light .kv-main .bento-card { background: rgba(255,255,255,.86); }
.light .kv-main .bento-card-hover,
.light .clone-shell [class*="rounded-2xl"][class*="border-dark-700"],
.light .clone-shell [class*="rounded-xl"][class*="border-dark-700"],
html[data-theme="light"] .clone-shell [class*="rounded-2xl"][class*="border-dark-700"],
html[data-theme="light"] .clone-shell [class*="rounded-xl"][class*="border-dark-700"] {
  border-color: rgba(4,120,87,.13);
  background-color: rgba(255,255,255,.86);
  box-shadow: 0 6px 24px -16px rgba(6,78,59,.25);
}
.light .kd-sub { background: radial-gradient(circle at 88% 12%,rgba(53,228,125,.2),transparent 15rem),linear-gradient(140deg,#dcf8e7,#fff 75%); }
.light .kd-label { color: #365e47; }
.light .kd-handle, .light .kd-stat small, .light .kd-mini small, .light .kd-mini em { color: #678475; }


.light .kv-brand,
.light .kv-brand span,
html[data-theme="light"] .kv-brand,
html[data-theme="light"] .kv-brand span { color: #123624; }
.light .kv-top-actions,
html[data-theme="light"] .kv-top-actions { border-left-color: rgba(4,120,87,.13); }
.light .kv-icon-btn, .light .kv-lang, .light .kv-user .kv-icon-btn,
html[data-theme="light"] .kv-icon-btn, html[data-theme="light"] .kv-lang, html[data-theme="light"] .kv-user .kv-icon-btn { color: #4a6659; }
.light .kv-icon-btn:hover, .light .kv-lang:hover,
html[data-theme="light"] .kv-icon-btn:hover, html[data-theme="light"] .kv-lang:hover { color: #123e25; background: rgba(4,120,87,.06); }
.light .kv-lang[aria-expanded="true"],
html[data-theme="light"] .kv-lang[aria-expanded="true"] { border-color: rgba(4,120,87,.2); background: rgba(4,120,87,.08); color: #065f46; box-shadow: inset 0 0 0 1px rgba(4,120,87,.12); }
.light .kv-avatar,
html[data-theme="light"] .kv-avatar { border-color: rgba(4,120,87,.18); background: linear-gradient(145deg, #e8fbef, #cfeede); color: #0f5132; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.light .kv-bell::after, html[data-theme="light"] .kv-bell::after { box-shadow: 0 0 0 2px rgba(255,255,255,.9); }
.light .kv-language-menu button[aria-checked="true"],
html[data-theme="light"] .kv-language-menu button[aria-checked="true"] { background: rgba(4,120,87,.1); color: #065f46; }
.light .kv-language-menu small, html[data-theme="light"] .kv-language-menu small { color: #6c8a7b; }
.light .kv-main input, .light .kv-main textarea, .light .kv-main select,
html[data-theme="light"] .kv-main input, html[data-theme="light"] .kv-main textarea, html[data-theme="light"] .kv-main select { border-color: rgba(4,120,87,.14); background: rgba(255,255,255,.96); color: #173727; }
.light .kv-main input::placeholder, .light .kv-main textarea::placeholder,
html[data-theme="light"] .kv-main input::placeholder, html[data-theme="light"] .kv-main textarea::placeholder { color: #7d978a; }
.light .kv-main input:focus, .light .kv-main textarea:focus, .light .kv-main select:focus,
html[data-theme="light"] .kv-main input:focus, html[data-theme="light"] .kv-main textarea:focus, html[data-theme="light"] .kv-main select:focus { border-color: rgba(4,120,87,.32); box-shadow: 0 0 0 4px rgba(4,120,87,.08); }
.light .kv-main .clone-glass-card, .light .kv-main .clone-glass-border,
html[data-theme="light"] .kv-main .clone-glass-card, html[data-theme="light"] .kv-main .clone-glass-border { border-color: rgba(4,120,87,.12); }
.light .kv-main .notice, html[data-theme="light"] .kv-main .notice { background: #ffffff; border-color: rgba(4,120,87,.12); color: #496658; }
.light .kv-main [role=tablist],
html[data-theme="light"] .kv-main [role=tablist] { box-shadow: inset 0 0 0 1px rgba(4,120,87,.08); }
.light .kv-main [data-gift-mode], .light .kv-main [data-gift-tab],
html[data-theme="light"] .kv-main [data-gift-mode], html[data-theme="light"] .kv-main [data-gift-tab] { color: #678475; }
.light .kv-main [data-gift-mode][aria-pressed="true"], .light .kv-main [data-gift-tab][aria-selected="true"],
html[data-theme="light"] .kv-main [data-gift-mode][aria-pressed="true"], html[data-theme="light"] .kv-main [data-gift-tab][aria-selected="true"] { color: #ffffff; }
.light .kv-main button:disabled, html[data-theme="light"] .kv-main button:disabled { opacity: .65; }
.light .kv-main .shadow-lg, html[data-theme="light"] .kv-main .shadow-lg { box-shadow: 0 12px 28px rgba(4,120,87,.12); }

/* Compact shell starts earlier than the old layout: seven cabinet sections no
   longer have to squeeze into a half-visible Telegram Desktop WebView. */
@media (max-width: 1250px) {
  .kv-shell { padding-top: calc(82px + var(--safe-top)); }
  .kv-side, .kv-top { display: none; }
  .kv-mtop {
    position: fixed;
    inset: calc(12px + var(--safe-top)) 12px auto;
    z-index: 55;
    height: 56px;
    padding: 0 8px 0 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--v3-line);
    border-radius: 999px;
    background: rgba(8,20,13,.88);
    box-shadow: 0 12px 44px rgba(0,0,0,.3);
    backdrop-filter: blur(20px) saturate(1.2);
  }
  .kv-mtop .kv-brand { gap: 8px; }
  .kv-mtop .kv-brand span { font-size: 18px; }
  .kv-mtop .kv-mark { width: 30px; height: 30px; }
  .kv-shell .kv-main { width: 100%; margin: 0; padding: 16px 16px 48px; }
  .kv-bottom { display: none; }
  .kv-sheet:not([hidden]) {
    position: fixed;
    inset: calc(78px + var(--safe-top)) 12px auto;
    z-index: 54;
    display: grid;
    gap: 16px;
    max-height: calc(100dvh - 94px - var(--safe-top) - var(--safe-bottom));
    overflow-y: auto;
    padding: 16px;
    border: 1px solid var(--v3-line);
    border-radius: 22px;
    background: rgba(8,20,13,.97);
    box-shadow: var(--v3-shadow);
    backdrop-filter: blur(22px);
  }
  .kv-sheet-user { display: flex; align-items: center; gap: 11px; padding: 0 2px 4px; }
  .kv-sheet-user .kv-user-text { display: block; }
  .kv-sheet-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .kv-sheet-link {
    min-width: 0;
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 13px;
    border: 1px solid var(--v3-line);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
    color: #b4ccbe;
    font-size: 13px;
  }
  .kv-sheet-link .icon { width: 19px; height: 19px; }
  .kv-sheet-link .icon { display: block; }
  .kv-sheet-link.is-active { border-color: rgba(53,228,125,.35); background: rgba(53,228,125,.1); color: #88f5ae; }
  .kv-sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .kv-chip {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 13px;
    border: 1px solid var(--v3-line);
    border-radius: 999px;
    background: rgba(255,255,255,.03);
    color: #b4ccbe;
  }
}

/* Wins over the legacy visualViewport fallback loaded before this redesign. */
html.compact-viewport .kv-bottom { display: none; }
html.compact-viewport .kv-shell .kv-main {
  width: 100%;
  margin-left: 0;
  padding: 16px 16px 48px;
}
html.compact-viewport .kv-mtop {
  inset: calc(12px + var(--safe-top)) 12px auto;
  height: 56px;
  padding: 0 8px 0 13px;
  border-radius: 999px;
}
html.compact-viewport .kv-sheet:not([hidden]) {
  inset: calc(78px + var(--safe-top)) 12px auto;
  max-height: calc(100dvh - 94px - var(--safe-top) - var(--safe-bottom));
  border: 1px solid var(--v3-line);
  border-radius: 22px;
}

@container cabinet-v3 (max-width: 860px) {
  .kd { display: flex; flex-direction: column; }
  .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; }
}

@media (max-width: 620px) {
  .kv-shell .kv-main { padding-inline: 13px; }
  .kd-hello { padding-inline: 2px; }
  .kd-hello h2 { font-size: clamp(27px, 9vw, 38px); }
  .kd-grid, .kd-row, .kd-row--two { grid-template-columns: minmax(0,1fr); }
  .kd-card { padding: 18px; border-radius: 18px; }
  .kd-sub-name { padding-right: 58px; font-size: 30px; }
  .kd-crest { width: 54px; right: 14px; }
  .kd-sub .kd-sub-head { padding-right: 58px; }
  .kd-stat-icon { display: none; }
  .kd-stat + .kd-stat { padding-left: 12px; }
  .kd-devices { align-items: flex-start; flex-wrap: wrap; }
  .kd-device-actions { width: 100%; }
  .kd-device-actions .kd-btn, .kd-device-actions .kd-buy { width: 100%; }
  .kd-mini { flex-direction: row; }
}

@media (max-width: 380px) {
  .kv-sheet-nav { grid-template-columns: minmax(0,1fr); }
  .kd-card { padding: 15px; }
  .kd-stat strong { font-size: 16px; }
  .kd-stat small { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .kv-shell *, .kv-shell *::before, .kv-shell *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .connect-device-glow.connect-device-glow,
  .connect-device-glow.connect-device-glow::after {
    animation: none !important;
  }
  .kv-main .kd-btn--primary, .kv-main .kd-btn--primary::before, .kv-main .kd-btn--primary::after {
    animation: none !important;
  }
}


@media (max-width: 1250px) {
  .light .kv-sheet, html[data-theme="light"] .kv-sheet { border-color: rgba(4,120,87,.13); background: rgba(255,255,255,.98); box-shadow: 0 22px 54px rgba(31,79,50,.12); }
  .light .kv-sheet-link, html[data-theme="light"] .kv-sheet-link { border-color: rgba(4,120,87,.12); background: rgba(4,120,87,.03); color: #486657; }
  .light .kv-sheet-link.is-active, html[data-theme="light"] .kv-sheet-link.is-active { border-color: rgba(4,120,87,.2); background: rgba(4,120,87,.08); color: #065f46; }
  .light .kv-chip, html[data-theme="light"] .kv-chip { border-color: rgba(4,120,87,.12); background: rgba(4,120,87,.03); color: #486657; }
}

@media (max-width: 639px) { .kv-badge-spacer { display: none !important; } }

/* Header profile: Telegram photo inside the avatar, profile + logout at the end of the header. */
.kv-avatar { position: relative; overflow: hidden; flex: 0 0 auto; text-decoration: none; }
.kv-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; opacity: 0; transition: opacity .2s ease; }
.kv-avatar.has-photo .kv-avatar-img { opacity: 1; }
.kv-side > .kv-user { margin-left: 3px; padding-left: 9px; border-left: 1px solid var(--v3-line); }
.kv-side > .kv-user .kv-avatar:hover { border-color: var(--v3-line-hot); }
.kv-mtop-actions { display: flex; align-items: center; gap: 4px; }
.kv-mtop-actions .kv-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(93,255,155,.22); background: linear-gradient(135deg, #214d35, #0d2c1d); color: #d9ffe8; font-size: 13px; font-weight: 700; }
.kv-mtop-actions .kv-icon-btn { width: 40px; height: 40px; }
html[data-theme="light"] .kv-side > .kv-user { border-left-color: rgba(4,120,87,.13); }
html[data-theme="light"] .kv-mtop-actions .kv-avatar { border-color: rgba(4,120,87,.18); background: linear-gradient(145deg, #e8fbef, #cfeede); color: #0f5132; }
@media (max-width: 360px) { .kv-mtop .kv-brand span { display: none; } }

/* User-side #modal: the Tailwind reset zeroes dialog padding (admin dialogs use .am-modal). */
dialog#modal:not(.am-modal) { width: calc(100% - 32px); max-width: 448px; padding: 20px; }
dialog#modal:not(.am-modal) .modal-title { margin-bottom: 14px; gap: 12px; }
dialog#modal:not(.am-modal) .modal-title h2 { font-size: 18px; font-weight: 600; line-height: 1.3; }
dialog#modal:not(.am-modal) .btn-primary { border-radius: 12px; color: #031108; background: var(--v3-green); }