/* === vx-balanced-v21.css === */

/* VX Balanced UX V21 — keep existing visuals, only slightly compact */

/* Tariff-colored full header background restored. */
body.vx-authenticated .header-lite{
  background:linear-gradient(90deg,#211d0b 0%,#3b300e 52%,#211d0b 100%)!important;
  box-shadow:0 8px 28px rgba(233,190,68,.10)!important;
}
body.vx-authenticated .header-pro{
  background:linear-gradient(90deg,#092218 0%,#103924 52%,#092218 100%)!important;
  box-shadow:0 8px 28px rgba(68,213,137,.10)!important;
}
body.vx-authenticated .header-ultra{
  background:linear-gradient(90deg,#1d1230 0%,#3b2268 52%,#1d1230 100%)!important;
  box-shadow:0 8px 30px rgba(135,89,232,.14)!important;
}

/* Generic inline instruction: compact, but normal button size. */
.vxInstructionInlineV21,
.vxDashTopActionsV21 button,
.vxBotHeadActionsV21 button{
  min-height:34px;
  padding:6px 10px;
  border-radius:9px;
  font-size:11px;
}
.vxBotHeadActionsV21,.vxDashTopActionsV21{display:flex;align-items:center;gap:7px;flex:0 0 auto}

/* Dashboard: preserve original hero/content; shave just a little vertical air. */
.vxDashTopline--v21{padding-top:0!important;gap:12px!important}
.vxDashTopline--v21 h3{font-size:22px!important;margin-top:2px!important}
.vxDashTopline--v21 p{font-size:10.5px!important}
.vxDashTopActionsV21 button{border:1px solid rgba(121,145,178,.24);background:#111c2a;color:#cbd8e7}

/* Logs: keep current page layout, only a modest page header + smaller retention card. */
#tab-logs .vxPageHeadV21{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 0 9px;padding:2px 2px 0
}
#tab-logs .vxPageHeadV21 h3{margin:0 0 2px;font-size:20px}
#tab-logs .vxPageHeadV21 p{margin:0;font-size:10px}
#tab-logs .vxLogsRetentionNotice--v21{
  margin-bottom:10px!important;padding:8px 10px!important;border-radius:10px!important;font-size:11px!important
}
#tab-logs .vxLogsRetentionNotice--v21 span{font-size:10.5px}

/* Tickets: only slightly tighter; keep the original header/card feel. */
#tab-tickets .vxTickets__header{gap:10px!important;padding-top:10px!important;padding-bottom:10px!important}
#tab-tickets .vxTickets__controls{gap:7px!important}
#tab-tickets .vxTickets__controls .vxSel,
#tab-tickets .vxTickets__controls .vxInp,
#tab-tickets .vxTickets__controls .vxBtn{min-height:35px!important}

/* Empty favorites: only then make the block small. Populated favorites are unchanged. */
#vx-sidebar-favorites.vxFavoritesEmptyV21{
  min-height:0!important;
  max-height:37px!important;
  padding:5px 8px!important;
  overflow:hidden!important;
}
#vx-sidebar-favorites.vxFavoritesEmptyV21 .vxSidebarFavoritesTitle{margin:0!important;font-size:9px!important}
#vx-sidebar-favorites.vxFavoritesEmptyV21 .vxFavoriteEmpty{display:none!important}
#vx-sidebar-favorites.vxFavoritesEmptyV21 .vxSidebarFavoritesList{min-height:0!important;max-height:10px!important}

/* Licenses: keep the Hero and cards. Just scale them down 10–15%, not into a toolbar. */
.vxLicenseHero{padding:22px!important;border-radius:19px!important}
.vxLicenseHero h1{font-size:clamp(25px,3.6vw,38px)!important;margin-bottom:6px!important}
.vxLicenseHero p{font-size:12px!important;line-height:1.5!important}
.vxLicenseTabs{margin-top:16px!important}
.vxLicenseTab{min-height:36px!important;padding:7px 12px!important;font-size:11px!important}
.vxLicenseInstructionV21{margin-left:auto!important}
.vxLicenseSummary{gap:9px!important}
.vxLicenseStat{padding:13px!important;border-radius:14px!important}
.vxLicenseStat strong{font-size:21px!important;margin-top:5px!important}
.vxLicenseStat small{font-size:10px!important}
.vxLicenseGrid{gap:10px!important;grid-template-columns:repeat(auto-fill,minmax(275px,1fr))!important}
.vxLicenseCard{padding:15px!important;border-radius:15px!important}
.vxLicenseCard h3{font-size:16px!important}
.vxLicensePills{margin-top:10px!important}
.vxLicenseActions{margin-top:11px!important}
.vxLicenseActions button,.vxLicenseActions a{min-height:35px!important;padding:7px 10px!important;font-size:11px!important}
.vxLicenseIp{padding:15px!important;border-radius:15px!important}
.vxLicenseIpChip{padding:6px 9px!important}

/* Integrations: preserve existing header/desktop card; modestly tighten spacing only. */
#tab-integrations .vxBotIntegrationHead{gap:12px!important}
#tab-integrations .vxBotIntegrationHead h3{margin-bottom:4px!important}
#tab-integrations .vxBotChannelTabs{margin-top:14px!important}
#tab-integrations .vxDesktopIntegrationCard{padding:12px 14px!important;gap:12px!important;margin-bottom:10px!important}
#tab-integrations .vxDesktopIntegrationIcon{width:42px!important;height:42px!important}
#tab-integrations .vxDesktopIntegrationCopy p{font-size:10.5px!important;line-height:1.35!important}
#tab-integrations .vxDesktopIntegrationFacts{gap:5px!important;margin-top:5px!important}
#tab-integrations .vxDesktopIntegrationFacts span{padding:4px 7px!important;font-size:9px!important}

/* RCON lazy sections look like normal cards, only collapsed initially. */
.vxRconHistoryLazy{padding-top:12px!important;padding-bottom:12px!important}
.vxRconHistoryLazy [data-rcon-history-body]:not([hidden]){margin-top:10px;overflow:auto}

@media(max-width:780px){
  .vxDashTopActionsV21,.vxBotHeadActionsV21{width:100%;justify-content:flex-end}
  .vxLicenseInstructionV21{margin-left:0!important}
}


/* V21.1: empty Favorites must be almost flat.
   vx-user-extras.js already toggles .empty on the actual block. */
#vx-sidebar-favorites.empty,
#vx-sidebar-favorites.vxFavoritesEmptyV21{
  display:block!important;
  min-height:0!important;
  height:23px!important;
  max-height:23px!important;
  padding:2px 7px!important;
  margin-top:4px!important;
  margin-bottom:3px!important;
  border-radius:7px!important;
  overflow:hidden!important;
}
#vx-sidebar-favorites.empty .vxSidebarFavoritesTitle,
#vx-sidebar-favorites.vxFavoritesEmptyV21 .vxSidebarFavoritesTitle{
  margin:0!important;
  padding:0!important;
  min-height:0!important;
  height:18px!important;
  line-height:18px!important;
  font-size:8px!important;
  opacity:.72!important;
}
#vx-sidebar-favorites.empty .vxSidebarFavoritesList,
#vx-sidebar-favorites.vxFavoritesEmptyV21 .vxSidebarFavoritesList{
  display:none!important;
  min-height:0!important;
  height:0!important;
  max-height:0!important;
  margin:0!important;
  padding:0!important;
}
#vx-sidebar-favorites.empty .vxFavoriteEmpty,
#vx-sidebar-favorites.vxFavoritesEmptyV21 .vxFavoriteEmpty{
  display:none!important;
}


/* V22 — ticket counters */
.vxTicketCounters{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:5px;
}
.vxTicketCounters span{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 6px;
  border:1px solid rgba(137,156,184,.16);
  border-radius:7px;
  background:rgba(255,255,255,.025);
  color:#8491a4;
  font-size:9px;
  line-height:1;
}
.vxTicketCounters b{color:#dbe4f0;font-size:10px}
.vxTicketCounters .is-open b{color:#72d99c}
.vxTicketCounters .is-closed b{color:#e2ba69}
.vxTicketCounters .is-archived b{color:#98a5b8}

/* V22 — renew each renewable module without turning cards into toolbars. */
.vxLicenseModuleRenew{
  display:inline-flex;
  align-items:center;
  margin-left:5px;
  padding:2px 5px;
  border:1px solid rgba(139,164,255,.24);
  border-radius:6px;
  background:rgba(109,134,238,.08);
  color:#bac8ff!important;
  font-size:8px;
  font-weight:850;
  line-height:1.2;
  text-decoration:none!important;
  white-space:nowrap;
}
.vxLicenseModuleRenew:hover{
  border-color:rgba(139,164,255,.42);
  background:rgba(109,134,238,.14);
}
.vxLicenseModuleIncluded{font-size:8px;color:#7f8b9e}

/* V22 fallback: JS also stamps body[data-vx-plan].
   This guarantees the visible cabinet header follows the active project plan. */
body.vx-authenticated[data-vx-plan="LITE"] > header:not(.vx-public-header){
  background:linear-gradient(90deg,#211d0b 0%,#3b300e 52%,#211d0b 100%)!important;
}
body.vx-authenticated[data-vx-plan="PRO"] > header:not(.vx-public-header){
  background:linear-gradient(90deg,#092218 0%,#103924 52%,#092218 100%)!important;
}
body.vx-authenticated[data-vx-plan="ULTRA"] > header:not(.vx-public-header){
  background:linear-gradient(90deg,#1d1230 0%,#3b2268 52%,#1d1230 100%)!important;
}


/* V23 — clickable ticket counters + compact New/Replies badges */
.vxTicketCounters button{
  min-height:0!important;
  margin:0!important;
  padding:3px 6px!important;
  border:1px solid rgba(137,156,184,.16)!important;
  border-radius:7px!important;
  background:rgba(255,255,255,.025)!important;
  color:#8491a4!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:600!important;
  box-shadow:none!important;
  transform:none!important;
}
.vxTicketCounters button:hover{
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(137,156,184,.30)!important;
}
.vxTicketCounters button.is-active{
  background:rgba(105,132,239,.13)!important;
  border-color:rgba(123,151,255,.40)!important;
  color:#dce4ff!important;
}
.vxTicketCounters .is-new{
  border-color:rgba(93,213,150,.20);
  background:rgba(65,184,124,.055);
}
.vxTicketCounters .is-new b{color:#72d99c}
.vxTicketCounters .is-reply{
  border-color:rgba(113,144,255,.22);
  background:rgba(91,117,221,.06);
}
.vxTicketCounters .is-reply b{color:#aebdff}

/* === vx-integration-v27.css === */

.vxV27{margin-top:18px;border-top:1px solid rgba(148,163,184,.18);padding-top:16px}
.vxV27Header,.vxV27CardTitle{display:flex;align-items:center;justify-content:space-between;gap:12px}
.vxV27Header h3{margin:0;font-size:18px}.vxV27Header p{margin:4px 0 0;color:var(--muted,#94a3b8);font-size:13px}
.vxV27Grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.vxV27Card{border:1px solid rgba(148,163,184,.18);background:rgba(15,23,42,.36);border-radius:14px;padding:14px;min-width:0}
.vxV27CardTitle{margin-bottom:10px}.vxV27CardTitle b{display:block}.vxV27CardTitle small{display:block;color:var(--muted,#94a3b8);margin-top:2px}
.vxV27PreviewHead{font-weight:800;margin-bottom:10px}.vxV27MessageMock{border:1px solid rgba(148,163,184,.18);border-radius:10px;padding:10px;margin:8px 0;background:rgba(2,6,23,.45)}
.vxV27EmbedMock{border-left:4px solid var(--vx-v27-accent,#5865F2);padding:8px 10px}.vxV27EmbedMock b{display:block;margin-bottom:5px}.vxV27EmbedMock img{display:block;max-width:100%;max-height:150px;object-fit:cover;border-radius:8px;margin-top:8px}
.vxV27MessageMock button{margin-top:9px}.vxV27FlowArrow{text-align:center;color:var(--muted,#94a3b8);font-size:12px}
.vxV27SelectMock{margin-top:8px;border:1px solid rgba(148,163,184,.2);border-radius:8px;overflow:hidden}.vxV27SelectOption{padding:8px 10px;border-bottom:1px solid rgba(148,163,184,.12)}.vxV27SelectOption:last-child{border-bottom:0}.vxV27SelectOption b,.vxV27SelectOption span{display:block}.vxV27SelectOption span{font-size:12px;color:var(--muted,#94a3b8);margin-top:2px}
.vxV27Pre{white-space:pre-wrap;margin-top:5px}.vxV27AuditItem{padding:9px 0;border-bottom:1px solid rgba(148,163,184,.12)}.vxV27AuditItem:last-child{border-bottom:0}.vxV27AuditTop{display:flex;justify-content:space-between;gap:8px}.vxV27AuditTop time{font-size:11px;color:var(--muted,#94a3b8);white-space:nowrap}
.vxV27Diff{display:grid;grid-template-columns:minmax(90px,.7fr) minmax(0,1fr) 18px minmax(0,1fr);gap:5px;align-items:start;font-size:11px;margin-top:6px}.vxV27Diff code{overflow-wrap:anywhere}.vxV27Diff span{overflow-wrap:anywhere;color:var(--muted,#94a3b8)}.vxV27Diff i{text-align:center}
.vxV27MetricGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.vxV27MetricGrid>div{border:1px solid rgba(148,163,184,.14);border-radius:9px;padding:9px}.vxV27MetricGrid span{display:block;font-size:11px;color:var(--muted,#94a3b8)}.vxV27MetricGrid b{display:block;font-size:18px;margin-top:3px}
.vxV27Hourly{height:125px;display:grid;grid-template-columns:repeat(24,1fr);gap:3px;align-items:end;margin-top:8px;padding-top:8px}.vxV27Hourly>div{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px}.vxV27Hourly i{display:block;width:100%;min-height:3px;border-radius:3px 3px 0 0;background:currentColor;opacity:.75}.vxV27Hourly span{font-size:8px;color:var(--muted,#94a3b8)}
.vxV27StatsFoot{font-size:12px;color:var(--muted,#94a3b8);margin-top:10px}.vxV27Locked,.vxV27Error,.vxV27Empty{padding:16px;border:1px dashed rgba(148,163,184,.25);border-radius:10px;color:var(--muted,#94a3b8)}.vxV27Locked b,.vxV27Locked span{display:block}.vxV27Locked b{color:inherit;font-size:16px;margin-bottom:4px}.vxV27Error{color:#fca5a5}
.vxV27Toggle{display:flex!important;align-items:center;gap:8px;margin:8px 0}.vxV27Card label:not(.vxV27Toggle){display:block;margin:8px 0}.vxV27Card select{width:100%;margin-top:5px}
@media(max-width:980px){.vxV27Grid{grid-template-columns:1fr}.vxV27MetricGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Integration history: lazy loading + server-side pagination */
.vxV27AuditList{min-width:0}
.vxV27AuditPager{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;margin-top:4px;border-top:1px solid rgba(148,163,184,.12)}
.vxV27AuditPager span{font-size:12px;color:var(--muted,#94a3b8);text-align:center}
.vxV27AuditPager button{white-space:nowrap}
.vxV27AuditPager button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:560px){.vxV27AuditPager{flex-wrap:wrap}.vxV27AuditPager span{order:-1;flex:1 0 100%}.vxV27AuditPager button{flex:1}}

/* === vx-bot-pro-tools-v1.css === */
.vxProToolsHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}.vxProToolsBadge{padding:5px 9px;border-radius:999px;border:1px solid rgba(139,92,246,.4);background:rgba(139,92,246,.12);color:#d8ccff;font-size:11px;font-weight:800}.vxGiveGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}.vxGiveGrid .wide{grid-column:1/-1}.vxGiveField{display:flex;flex-direction:column;gap:6px}.vxGiveField>span{font-size:12px;font-weight:700}.vxGiveField small{opacity:.7;line-height:1.35}.vxGiveDest{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.vxGiveDest>label{border:1px solid #27344a;border-radius:12px;padding:10px;background:rgba(255,255,255,.025)}.vxGiveNotice{margin-top:12px;padding:10px 12px;border:1px solid rgba(125,102,255,.28);border-radius:12px;background:rgba(125,102,255,.08);font-size:12px;line-height:1.45}.vxGiveList{display:flex;flex-direction:column;gap:9px;margin-top:12px}.vxGiveItem{border:1px solid #253044;border-radius:12px;padding:11px;background:rgba(255,255,255,.025)}.vxGiveItemTop{display:flex;justify-content:space-between;gap:10px}.vxGiveMeta{display:flex;gap:7px;flex-wrap:wrap;margin-top:7px;font-size:11px;opacity:.78}.vxGiveActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.vxGivePager{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:10px}.vxSelfPreview{margin-top:12px;border:1px solid rgba(88,101,242,.35);border-radius:14px;background:linear-gradient(180deg,rgba(88,101,242,.09),rgba(255,255,255,.02));padding:14px}.vxSelfPreviewBtns{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.vxSelfPreviewBtns span{padding:7px 10px;border:1px solid #31405c;border-radius:8px;font-size:12px}.vxProLocked{padding:18px;border:1px solid rgba(239,68,68,.25);border-radius:14px;background:rgba(239,68,68,.06)}@media(max-width:800px){.vxGiveGrid,.vxGiveDest{grid-template-columns:1fr}.vxGiveGrid .wide{grid-column:auto}}
.vxGiveChecks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.vxGiveChecks label{padding:10px;border:1px solid #27344a;border-radius:10px;background:rgba(255,255,255,.02);font-size:12px}.vxGiveDest .is-disabled{opacity:.55}.vxGiveDest .is-disabled select{cursor:not-allowed}.vxGiveWinners{margin-top:9px;padding:9px 10px;border-radius:10px;background:rgba(34,197,94,.07);border:1px solid rgba(34,197,94,.18);font-size:12px}.vxGiveWinners code{font-size:11px}.vxGiveParticipants{margin-top:10px;padding:10px;border:1px solid #26354b;border-radius:10px;background:rgba(8,14,24,.65)}.vxGiveParticipantHead{margin-bottom:7px}.vxGiveParticipantList{display:flex;flex-direction:column;gap:5px;max-height:330px;overflow:auto}.vxGiveParticipantList>div{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.025);font-size:12px}.vxGiveParticipantList code{font-size:11px}.vxGiveParticipantList small{opacity:.6}.vxGiveError{color:#ff8c8c;font-size:12px}@media(max-width:800px){.vxGiveChecks{grid-template-columns:1fr}.vxGiveParticipantList>div{grid-template-columns:1fr}.vxGiveParticipantList code,.vxGiveParticipantList small{display:block}}

/* Giveaway optional embed image */
.vxGiveImageRow{display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,auto) auto;gap:8px;align-items:center;margin-top:6px}
.vxGiveImageRow input[type=file]{min-width:0}
.vxGiveImagePreview{margin-top:10px;padding:10px;border:1px solid rgba(130,160,205,.22);border-radius:10px;background:rgba(7,13,21,.38)}
.vxGiveImagePreview>div{display:flex;align-items:flex-start;gap:10px}.vxGiveImagePreview img{display:block;object-fit:cover;border-radius:8px;border:1px solid rgba(255,255,255,.1)}
.vxGiveImagePreview .is-large img{width:min(100%,520px);max-height:260px}.vxGiveImagePreview .is-small img{width:96px;height:96px}.vxGiveImagePreview span{font-size:12px;color:#91a5bd}
@media(max-width:760px){.vxGiveImageRow{grid-template-columns:1fr}.vxGiveImageRow button{margin-left:0}}

/* Giveaway checkbox alignment */
.vxGiveCheck,
.vxGiveChecks label,
.vxGiveDest label > div{
  display:flex;
  align-items:center;
  gap:8px;
  line-height:1.35;
}
.vxGiveCheck input[type="checkbox"],
.vxGiveChecks input[type="checkbox"],
.vxGiveDest input[type="checkbox"]{
  appearance:auto;
  width:16px;
  height:16px;
  min-width:16px;
  min-height:16px;
  max-width:16px;
  max-height:16px;
  flex:0 0 16px;
  margin:0;
  padding:0;
  vertical-align:middle;
}
.vxGiveChecks label{
  min-height:42px;
}