/* ZaoGuang VPN custom Luck integration layer. Copyright (c) 2026 ZaoGuang VPN. */
/* Luck theme refinements kept outside the generated bundle so upgrades remain safe. */
html,
body,
#app {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  min-height: 100dvh;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
  overflow-x: clip;
}

#app > *,
.page-container,
.main-content,
.mobile-content,
.dashboard-content {
  min-width: 0 !important;
  max-width: 100% !important;
}

img,
canvas,
video {
  max-width: 100%;
}

/* Generated dialogs use several different class names. Keep all of them
   inside the visual viewport and let short screens scroll their contents. */
:where(.dialog-content, .dialog-container, .modal-container, .purchase-dialog, .subscription-dialog, [role="dialog"]) {
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100dvh - 24px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

/* Modal body sections may scroll vertically, but headers and footers must
   never become independent scroll panes. The former `[role="dialog"] > *`
   rule applied overflow to every direct child and produced nested scrollbars. */
:where(.modal-content, .dialog-body, .modal-body) {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

/* Give the authentication forms enough horizontal room for translated copy.
   The compiled Luck theme caps both cards at 420px, which makes the email
   suffix, verification action and Vietnamese placeholders collide. */
:where(.login-card, .register-card) {
  width: min(520px, calc(100vw - 40px)) !important;
  max-width: 520px !important;
}

:where(.login-card, .register-card) .card-content {
  padding-inline: clamp(30px, 5vw, 52px) !important;
}

:where(.ios-login-container, .ios-register-container) {
  min-height: 100dvh !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

@media (max-width: 600px) {
  :where(.login-card, .register-card) {
    width: calc(100vw - 24px) !important;
    max-width: none !important;
  }

  :where(.login-card, .register-card) .card-content {
    padding-inline: clamp(20px, 6vw, 32px) !important;
  }
}

@media (max-height: 760px) {
  :where(.ios-login-container, .ios-register-container) {
    align-items: flex-start !important;
    padding-block: 12px !important;
  }
}

/* Registration has two compound rows whose fixed icon/domain/action widths
   consume the entire input on small phones. Stack the verification action and
   keep the local-part field deliberately usable instead of letting it resolve
   to zero pixels. */
@media (max-width: 430px) {
  :where(.ios-login-container, .ios-register-container) {
    padding-top: max(58px, calc(env(safe-area-inset-top) + 50px)) !important;
  }

  .email-verify-wrapper {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .email-code-input,
  .send-code-button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .email-code-input .ios-input,
  .email-code-input .n-input-wrapper,
  .email-code-input .n-input__input,
  .email-code-input input {
    width: 100% !important;
    min-width: 6ch !important;
  }

  .send-code-button {
    min-height: 48px !important;
    padding: 12px 16px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 360px) {
  :where(.ios-login-container, .ios-register-container) {
    padding-inline: 8px !important;
  }

  :where(.login-card, .register-card) {
    width: calc(100vw - 16px) !important;
  }

  :where(.login-card, .register-card) .card-content {
    padding-inline: 12px !important;
  }

  .unified-container .email-icon {
    width: auto !important;
    padding-left: 10px !important;
  }

  .unified-container .prefix-input {
    min-width: 70px !important;
    margin-left: 6px !important;
    padding: 8px !important;
  }

  .unified-container .at-symbol {
    margin-inline: 2px !important;
  }

  .unified-container .domain-selector {
    min-width: 72px !important;
    max-width: 86px !important;
    padding-right: 8px !important;
  }

  .register-card .ios-input-wrapper {
    padding-inline: 12px !important;
  }

  .register-card .input-icon {
    margin-right: 8px !important;
  }
}

@media (max-height: 760px) {
  :where(.ios-login-container, .ios-register-container) {
    padding-top: max(58px, calc(env(safe-area-inset-top) + 50px)) !important;
  }
}

.plan-card .plan-features {
  padding: 0 24px 22px !important;
}

.invite-page .code-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.invite-page .code-actions .action-btn-small {
  min-width: 0 !important;
  padding-inline: 8px !important;
  white-space: nowrap !important;
}

/* Keep the order ledger readable at every desktop aspect ratio. The stock
   seven-column grid gives the order type only .2fr and clips the whole table
   because its container uses overflow:hidden. That makes badges and long
   order numbers wrap one character at a time. Let the ledger scroll as one
   unit, give every column a deliberate minimum, and use the same alignment
   rules for its header and body. */
.orders-page[data-v-95571e5b] {
  box-sizing: border-box !important;
  height: 100% !important;
  max-height: 100% !important;
  width: 100% !important;
  min-height: 0 !important;
  min-width: 0 !important;
}

/* The generated orders route uses 100vh even though it is nested below the
   application header. That puts the native horizontal rail below the visible
   shell. Bind the route to the shell's available height and keep the ledger
   as the single two-axis scroll owner. */
.ios-content-container:has(.orders-page[data-v-95571e5b]),
.content-wrapper:has(.orders-page[data-v-95571e5b]) {
  box-sizing: border-box !important;
  height: 100% !important;
  min-height: 0 !important;
  align-items: stretch !important;
}

.content-wrapper:has(.orders-page[data-v-95571e5b]) {
  overflow: hidden !important;
}

.orders-page[data-v-95571e5b] {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

.orders-page[data-v-95571e5b] .filter-tabs[data-v-95571e5b] {
  flex-wrap: nowrap !important;
  max-width: 100% !important;
  padding-bottom: 5px !important;
  overflow-x: auto !important;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, .45) transparent;
}

.orders-page[data-v-95571e5b] .filter-tab[data-v-95571e5b] {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

.orders-table-container[data-v-95571e5b] {
  max-width: 100% !important;
  min-height: 0 !important;
  min-width: 0 !important;
  overflow-x: scroll !important;
  overflow-y: auto !important;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, .55) rgba(226, 232, 240, .55);
}

.orders-table-container[data-v-95571e5b]::-webkit-scrollbar,
.orders-page[data-v-95571e5b] .filter-tabs[data-v-95571e5b]::-webkit-scrollbar {
  height: 9px;
}

.orders-table-container[data-v-95571e5b]::-webkit-scrollbar-track,
.orders-page[data-v-95571e5b] .filter-tabs[data-v-95571e5b]::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(226, 232, 240, .55);
}

.orders-table-container[data-v-95571e5b]::-webkit-scrollbar-thumb,
.orders-page[data-v-95571e5b] .filter-tabs[data-v-95571e5b]::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(100, 116, 139, .55);
}

@media (min-width: 769px) {
  .orders-table[data-v-95571e5b] {
    width: 100% !important;
    min-width: 1180px !important;
  }

  .orders-table[data-v-95571e5b] .table-header[data-v-95571e5b],
  .orders-table[data-v-95571e5b] .table-row[data-v-95571e5b] {
    grid-template-columns: 72px 220px minmax(170px, 1fr) 120px 112px 128px 220px !important;
    gap: 12px !important;
    padding-inline: 16px !important;
  }

  .orders-table[data-v-95571e5b] .table-header[data-v-95571e5b] {
    position: sticky;
    top: 0;
    z-index: 2;
    align-items: center !important;
  }

  .orders-table[data-v-95571e5b] .table-row[data-v-95571e5b] {
    min-height: 68px;
    padding-block: 9px !important;
  }

  .orders-table[data-v-95571e5b] .header-cell[data-v-95571e5b],
  .orders-table[data-v-95571e5b] .table-cell[data-v-95571e5b] {
    min-width: 0 !important;
    line-height: 1.4 !important;
  }

  .orders-table[data-v-95571e5b] .header-cell[data-v-95571e5b]:nth-child(1),
  .orders-table[data-v-95571e5b] .header-cell[data-v-95571e5b]:nth-child(5),
  .orders-table[data-v-95571e5b] .header-cell[data-v-95571e5b]:nth-child(6),
  .orders-table[data-v-95571e5b] .header-cell[data-v-95571e5b]:nth-child(7) {
    text-align: center !important;
  }

  .orders-table[data-v-95571e5b] .header-cell[data-v-95571e5b]:nth-child(2),
  .orders-table[data-v-95571e5b] .header-cell[data-v-95571e5b]:nth-child(3) {
    text-align: start !important;
  }

  .orders-table[data-v-95571e5b] .header-cell[data-v-95571e5b]:nth-child(4) {
    text-align: end !important;
  }

  .orders-table[data-v-95571e5b] .type-info[data-v-95571e5b],
  .orders-table[data-v-95571e5b] .status-info[data-v-95571e5b],
  .orders-table[data-v-95571e5b] .time-info[data-v-95571e5b],
  .orders-table[data-v-95571e5b] .actions[data-v-95571e5b] {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .orders-table[data-v-95571e5b] .actions[data-v-95571e5b] {
    box-sizing: border-box !important;
    min-width: 220px !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow: visible !important;
  }

  .orders-table[data-v-95571e5b] .actions[data-v-95571e5b] > .btn-base[data-v-95571e5b] {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    padding-inline: 12px !important;
    white-space: nowrap !important;
  }

  .orders-table[data-v-95571e5b] .order-info[data-v-95571e5b],
  .orders-table[data-v-95571e5b] .plan-info[data-v-95571e5b] {
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: start !important;
  }

  .orders-table[data-v-95571e5b] .amount-info[data-v-95571e5b] {
    align-items: flex-end !important;
    justify-content: center !important;
    text-align: end !important;
  }

  .orders-table[data-v-95571e5b] .amount-details[data-v-95571e5b] {
    align-items: flex-end !important;
  }

  .orders-table[data-v-95571e5b] .order-number[data-v-95571e5b],
  .orders-table[data-v-95571e5b] .order-type[data-v-95571e5b],
  .orders-table[data-v-95571e5b] .plan-details[data-v-95571e5b],
  .orders-table[data-v-95571e5b] .plan-traffic[data-v-95571e5b],
  .orders-table[data-v-95571e5b] .plan-period[data-v-95571e5b],
  .orders-table[data-v-95571e5b] .plan-deposit[data-v-95571e5b],
  .orders-table[data-v-95571e5b] .plan-amount[data-v-95571e5b],
  .orders-table[data-v-95571e5b] .amount-main[data-v-95571e5b],
  .orders-table[data-v-95571e5b] .amount-discount[data-v-95571e5b],
  .orders-table[data-v-95571e5b] .amount-balance[data-v-95571e5b],
  .orders-table[data-v-95571e5b] .status-badge[data-v-95571e5b],
  .orders-table[data-v-95571e5b] .time-date[data-v-95571e5b],
  .orders-table[data-v-95571e5b] .time-time[data-v-95571e5b] {
    white-space: nowrap !important;
  }

  .orders-table[data-v-95571e5b] .order-number[data-v-95571e5b] {
    word-break: normal !important;
    overflow-wrap: normal !important;
    text-align: start !important;
  }

  .orders-table[data-v-95571e5b] .plan-details[data-v-95571e5b] {
    flex-wrap: nowrap !important;
  }
}

/* The compiled orders stylesheet renders these mobile labels through
   pseudo-elements, so the DOM translator cannot see or replace them. */
@media (max-width: 768px) {
  .orders-table-container[data-v-95571e5b] {
    overflow: visible !important;
  }

  .orders-table[data-v-95571e5b] {
    width: 100% !important;
    min-width: 0 !important;
  }

  html[lang^="vi"] .order-info[data-v-95571e5b]::before {
    content: "Mã đơn hàng" !important;
  }

  html[lang^="vi"] .plan-info[data-v-95571e5b]::before {
    content: "Chi tiết gói" !important;
  }

  html[lang^="vi"] .amount-info[data-v-95571e5b]::before {
    content: "Số tiền thanh toán" !important;
  }

  html[lang^="vi"] .time-info[data-v-95571e5b]::before {
    content: "Thời gian tạo" !important;
  }

  html[lang^="en"] .order-info[data-v-95571e5b]::before {
    content: "Order number" !important;
  }

  html[lang^="en"] .plan-info[data-v-95571e5b]::before {
    content: "Plan details" !important;
  }

  html[lang^="en"] .amount-info[data-v-95571e5b]::before {
    content: "Payment amount" !important;
  }

  html[lang^="en"] .time-info[data-v-95571e5b]::before {
    content: "Created at" !important;
  }

  html[lang="zh-CN"] .order-info[data-v-95571e5b]::before { content: "订单编号" !important; }
  html[lang="zh-CN"] .plan-info[data-v-95571e5b]::before { content: "套餐详情" !important; }
  html[lang="zh-CN"] .amount-info[data-v-95571e5b]::before { content: "支付金额" !important; }
  html[lang="zh-CN"] .time-info[data-v-95571e5b]::before { content: "创建时间" !important; }

  html[lang="zh-TW"] .order-info[data-v-95571e5b]::before { content: "訂單編號" !important; }
  html[lang="zh-TW"] .plan-info[data-v-95571e5b]::before { content: "方案詳情" !important; }
  html[lang="zh-TW"] .amount-info[data-v-95571e5b]::before { content: "付款金額" !important; }
  html[lang="zh-TW"] .time-info[data-v-95571e5b]::before { content: "建立時間" !important; }

  html[lang^="ja"] .order-info[data-v-95571e5b]::before { content: "注文番号" !important; }
  html[lang^="ja"] .plan-info[data-v-95571e5b]::before { content: "プラン詳細" !important; }
  html[lang^="ja"] .amount-info[data-v-95571e5b]::before { content: "支払金額" !important; }
  html[lang^="ja"] .time-info[data-v-95571e5b]::before { content: "作成日時" !important; }

  html[lang^="ko"] .order-info[data-v-95571e5b]::before { content: "주문 번호" !important; }
  html[lang^="ko"] .plan-info[data-v-95571e5b]::before { content: "요금제 상세" !important; }
  html[lang^="ko"] .amount-info[data-v-95571e5b]::before { content: "결제 금액" !important; }
  html[lang^="ko"] .time-info[data-v-95571e5b]::before { content: "생성 시간" !important; }

  html[lang^="fa"] .order-info[data-v-95571e5b]::before { content: "شماره سفارش" !important; }
  html[lang^="fa"] .plan-info[data-v-95571e5b]::before { content: "جزئیات طرح" !important; }
  html[lang^="fa"] .amount-info[data-v-95571e5b]::before { content: "مبلغ پرداخت" !important; }
  html[lang^="fa"] .time-info[data-v-95571e5b]::before { content: "زمان ایجاد" !important; }

  html[lang^="ru"] .order-info[data-v-95571e5b]::before { content: "Номер заказа" !important; }
  html[lang^="ru"] .plan-info[data-v-95571e5b]::before { content: "Детали тарифа" !important; }
  html[lang^="ru"] .amount-info[data-v-95571e5b]::before { content: "Сумма платежа" !important; }
  html[lang^="ru"] .time-info[data-v-95571e5b]::before { content: "Дата создания" !important; }
}

/* Ticket history remains a seven-column NDataTable at every breakpoint. Its
   declared columns need 1020px, so shrinking the table produces unreadable
   headers on tablets and phones. Let the immediate Naive wrapper own the one
   horizontal scrollbar while the page itself remains width-bounded. */
.tickets-page[data-v-7de65899],
.tickets-table[data-v-7de65899] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.tickets-table[data-v-7de65899] .n-data-table-wrapper {
  max-width: 100% !important;
  overflow-x: scroll !important;
  overflow-y: hidden !important;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(71, 85, 105, .72) rgba(226, 232, 240, .75);
  -webkit-overflow-scrolling: touch;
}

.tickets-table[data-v-7de65899] .n-data-table-base-table {
  box-sizing: border-box !important;
  width: max(100%, 1020px) !important;
  min-width: 1020px !important;
  max-width: none !important;
}

.tickets-table[data-v-7de65899] .n-data-table-base-table-body {
  overflow-x: hidden !important;
}

.tickets-table[data-v-7de65899] .n-scrollbar-rail--horizontal {
  display: none !important;
}

.tickets-table[data-v-7de65899] .n-data-table-wrapper::-webkit-scrollbar {
  height: 11px;
}

.tickets-table[data-v-7de65899] .n-data-table-wrapper::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(226, 232, 240, .75);
}

.tickets-table[data-v-7de65899] .n-data-table-wrapper::-webkit-scrollbar-thumb {
  min-width: 40px;
  border: 2px solid rgba(226, 232, 240, .75);
  border-radius: 999px;
  background: rgba(71, 85, 105, .72);
  background-clip: padding-box;
}

.tickets-table[data-v-7de65899] .n-data-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(51, 65, 85, .9);
  background-clip: padding-box;
}

/* Traffic history has a separate mobile-card renderer below 769px. Keep only
   its desktop wrapper scrollable, with enough width for the five fixed-width
   columns and translated headers. The NDataTable stays the content surface,
   so no second inner scrollbar is introduced. */
@media (min-width: 769px) {
  .traffic-details-page[data-v-88d3a2ea],
  .desktop-table[data-v-88d3a2ea] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .desktop-table[data-v-88d3a2ea] {
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(71, 85, 105, .72) rgba(226, 232, 240, .75);
    -webkit-overflow-scrolling: touch;
  }

  .desktop-table[data-v-88d3a2ea] .traffic-table[data-v-88d3a2ea] {
    box-sizing: border-box !important;
    width: max(100%, 640px) !important;
    min-width: 640px !important;
    max-width: none !important;
  }

  .desktop-table[data-v-88d3a2ea] .traffic-table[data-v-88d3a2ea] .n-scrollbar-rail--horizontal {
    display: none !important;
  }

  .desktop-table[data-v-88d3a2ea]::-webkit-scrollbar {
    height: 11px;
  }

  .desktop-table[data-v-88d3a2ea]::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(226, 232, 240, .75);
  }

  .desktop-table[data-v-88d3a2ea]::-webkit-scrollbar-thumb {
    min-width: 40px;
    border: 2px solid rgba(226, 232, 240, .75);
    border-radius: 999px;
    background: rgba(71, 85, 105, .72);
    background-clip: padding-box;
  }

  .desktop-table[data-v-88d3a2ea]::-webkit-scrollbar-thumb:hover {
    background: rgba(51, 65, 85, .9);
    background-clip: padding-box;
  }
}

/* Sidebar branding must never become the flex item's minimum-content width.
   The upstream collapsed state keeps the complete application title inside an
   80px rail; without explicit shrink boundaries that title can push the rail
   wider and its blue badge is then painted outside the visible sidebar. Keep
   every branding layer measurable, scale image logos with their aspect ratio,
   and let long text logos wrap rather than crop at narrow/zoomed widths. */
:where(
  .main-area,
  .mobile-top,
  .sidebar-header,
  .sidebar-header-content,
  .logo-section,
  .logo-section > *,
  .collapsed-logo,
  .app-title-full,
  .text-logo,
  .text-logo-content,
  .brand-text,
  .brand-text-content
) {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.main-area,
.mobile-top {
  box-sizing: border-box !important;
  min-width: 0 !important;
}

.mobile-top {
  width: 100% !important;
}

:where(
  .sidebar-header-content,
  .logo-section,
  .collapsed-logo,
  .text-logo,
  .brand-text
) {
  width: 100% !important;
}

.logo-section {
  overflow: visible !important;
}

.logo-section img.logo-img {
  display: block !important;
  flex: 0 1 auto !important;
  /* A percentage width is required here because the generated image carries
     an inline `max-width: 200px !important`. `width:auto` lets that inline
     maximum become the flex min-content width on 240px split/fold views. */
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-width: min(100%, var(--luck-logo-max-width, 200px)) !important;
  max-height: var(--luck-logo-max-height, 82px) !important;
  max-height: min(var(--luck-logo-max-height, 82px), max(28px, 10dvh)) !important;
  object-fit: contain !important;
  object-position: center center !important;
  aspect-ratio: auto !important;
}

:where(.text-logo-content, .brand-text-content) {
  overflow: visible !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal !important;
  text-align: center !important;
}

/* The expanded brand sits on the sidebar's dark translucent header. Luck's
   stock text-logo color is nearly black, so a server-title fallback can be
   present in the DOM yet look missing. Keep the wordmark readable without
   changing the collapsed badge or image-logo colors. */
.sidebar:not(.collapsed) .logo-section .text-logo-content {
  color: #f8fafc !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35) !important;
}

@media (min-width: 769px) {
  /* Fix the rail itself as well as its declared width. flex min-content sizing
     otherwise allows a long translated/app title to defeat the 80px state. */
  .sidebar.collapsed {
    box-sizing: border-box !important;
    flex: 0 0 80px !important;
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
  }

  .sidebar.collapsed .sidebar-header {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-inline: 8px !important;
  }

  .sidebar.collapsed :where(.sidebar-header-content, .logo-section, .collapsed-logo) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .sidebar.collapsed .logo-section {
    padding: 4px !important;
  }

  .sidebar.collapsed .collapsed-logo {
    padding-inline: 0 !important;
  }

  .sidebar.collapsed .app-title-full {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 5px 2px !important;
    font-size: clamp(7px, .625vw, 9px) !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere;
    word-break: normal !important;
    text-overflow: clip !important;
  }

  /* Expanded navigation labels can be considerably longer in German and
     Russian. The generated 64px item hides overflow while the label keeps its
     min-content width, clipping the last glyphs even on a wide desktop. */
  .sidebar:not(.collapsed) .menu-item {
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 64px !important;
    overflow: visible !important;
  }

  .sidebar:not(.collapsed) .menu-item-content {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .sidebar:not(.collapsed) .menu-label {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal !important;
  }
}

@media (max-width: 768px) {
  .desktop-table[data-v-88d3a2ea] {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    scrollbar-gutter: auto;
  }

  .desktop-table[data-v-88d3a2ea] .traffic-table[data-v-88d3a2ea] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 380px) {
  .dashboard-content {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  :where(
    .user-email-container,
    .user-email-wrapper,
    .user-email-display
  ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }

  :where(.user-email-main, .user-email-domain) {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal !important;
  }

  .plan-card,
  .user-card,
  .order-card,
  .invite-page {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .luck-shell-actions {
    max-width: calc(100vw - 20px);
  }

  .luck-donate-banner {
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-height: 600px) and (orientation: landscape) {
  html,
  body,
  #app {
    min-height: 100dvh;
    height: auto !important;
  }

  body {
    overflow-y: auto !important;
  }

  :where(.dialog-content, .dialog-container, .modal-content, .modal-container, .purchase-dialog, .subscription-dialog, [role="dialog"] > *) {
    max-height: calc(100dvh - 12px) !important;
  }

  .luck-donate-modal {
    align-items: flex-start;
    padding: 6px;
  }

  .luck-donate-modal-card {
    max-height: calc(100dvh - 12px);
  }
}

/* Donation entry point and the small, readable bank-information card that
   accompanies the supplied QR image. */
.luck-shell-actions {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 2200;
  display: flex;
  align-items: center;
  gap: 9px;
}

.luck-donate-banner,
.luck-app-download {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  text-decoration: none;
}

.luck-donate-banner {
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  color: #fff;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  box-shadow: 0 8px 24px rgba(30, 64, 175, .28);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.luck-app-download {
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 999px;
  padding: 9px 14px;
  color: #fff;
  background: linear-gradient(135deg, #10b981, #0ea5e9);
  box-shadow: 0 8px 24px rgba(14, 165, 233, .24);
  font-family: inherit;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
}

.luck-app-download svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.luck-app-download[hidden] {
  display: none !important;
}

.luck-download-toolbar > .luck-app-download {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 15px;
  box-shadow: none;
  white-space: nowrap;
}

.luck-donate-banner:hover,
.luck-app-download:hover {
  filter: brightness(1.05);
}

.luck-donate-banner:focus-visible,
.luck-app-download:focus-visible {
  outline: 3px solid rgba(59, 130, 246, .35);
  outline-offset: 3px;
}

.luck-donate-banner[hidden],
.luck-donate-modal[hidden] {
  display: none !important;
}

/* The generated dashboard uses an inline image for the Clash card and a
   generic document icon in its modal. Both are normalized to one local asset
   by the shell script, which avoids third-party/CSP failures. */
.subscription-icon.clash .subscription-logo,
.luck-clash-dialog-logo {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.subscription-dialog[data-luck-subscription="clash"] .dialog-icon > svg {
  display: none !important;
}

/* Keep the SVG stable while server status and hover state change. The stock
   theme transitions every path, which makes highlighted countries flash when
   their class is refreshed. */
.world-map-container .map-svg .country,
.world-map-container .map-svg .country.has-nodes {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
}

/* The generated map scales active countries by 1.03 and changes their stroke
   from .8px to 2px on hover. Near an island/edge that moves the path out from
   under the pointer, causing an endless hover/unhover loop. Keep the tooltip
   but leave the actual SVG geometry and hit area unchanged. */
.world-map-container .map-svg .country.has-nodes:hover,
.world-map-container .map-svg .country.online:hover,
.world-map-container .map-svg .country.offline:hover,
.world-map-container .map-svg .country.partial:hover {
  transform: none !important;
  filter: none !important;
  stroke-width: 0.8px !important;
}

/* The tooltip is positioned beside the pointer. If it can receive pointer
   events it covers the country path, fires mouseleave, disappears, and then
   immediately triggers mouseenter again. That loop is the visible flicker. */
.world-map-container .country-tooltip {
  pointer-events: none !important;
  animation: none !important;
  transition: none !important;
}

body.luck-donate-open {
  overflow: hidden;
}

.luck-donate-modal {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, .62);
  backdrop-filter: blur(3px);
}

.luck-donate-modal-card {
  position: relative;
  width: min(440px, calc(100vw - 40px));
  max-height: calc(100dvh - 40px);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, .35);
  overflow: hidden;
  overflow-y: auto;
  text-align: center;
}

.luck-donate-modal-content {
  padding: 30px 30px 24px;
}

.luck-donate-modal-content h2 {
  margin: 0;
  color: #1e293b;
  font-size: clamp(20px, 5vw, 25px);
  font-weight: 750;
  line-height: 1.34;
}

.luck-donate-message {
  margin: 12px auto 20px;
  max-width: 330px;
  color: #64748b;
  font-size: 15px;
  line-height: 1.55;
}

.luck-donate-qr {
  display: block;
  width: min(290px, 100%);
  margin: 0 auto;
  height: auto;
  image-rendering: pixelated;
}

.luck-donate-bank {
  display: grid;
  gap: 0;
  margin: 18px auto 0;
  max-width: 330px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  background: #f8fafc;
  text-align: left;
}

.luck-donate-bank > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 10px 13px;
}

.luck-donate-bank > div + div {
  border-top: 1px solid #e2e8f0;
}

.luck-donate-bank dt {
  flex: 0 0 auto;
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}

.luck-donate-bank dd {
  min-width: 0;
  margin: 0;
  color: #1e293b;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-align: right;
}

.luck-donate-thanks {
  margin: 18px 0 0;
  color: #475569;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.luck-donate-actions {
  display: flex;
  justify-content: center;
  padding: 16px 28px 22px;
  border-top: 1px solid #e2e8f0;
}

.luck-donate-close {
  min-width: 116px;
  min-height: 42px;
  padding: 10px 28px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #34c88a, #69bfe8);
  box-shadow: 0 8px 18px rgba(52, 200, 138, .26);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

@media (max-width: 768px) {
  .luck-shell-actions {
    top: 10px;
    right: 10px;
    gap: 6px;
  }

  .luck-donate-banner {
    padding: 9px 13px;
    font-size: 13px;
  }

  .luck-download-toolbar > .luck-app-download {
    position: static;
    inset: auto;
    min-height: 40px;
    padding: 8px 12px;
    font-size: 13px;
  }

  .luck-app-download svg {
    width: 15px;
    height: 15px;
  }

  .luck-donate-modal {
    padding: 14px;
  }

  .luck-donate-modal-card {
    width: min(360px, calc(100vw - 28px));
    max-height: calc(100dvh - 28px);
    border-radius: 18px;
  }

  .luck-donate-modal-content {
    padding: 25px 18px 20px;
  }

  .luck-donate-message {
    margin-bottom: 17px;
    font-size: 14px;
  }

  .luck-donate-qr {
    width: min(260px, 100%);
  }

  .luck-donate-bank {
    margin-top: 15px;
  }

  .luck-donate-bank > div {
    padding: 9px 11px;
  }
}

@media (max-height: 720px) {
  .luck-donate-modal-content {
    padding-top: 19px;
    padding-bottom: 15px;
  }

  .luck-donate-message {
    margin-top: 8px;
    margin-bottom: 12px;
  }

  .luck-donate-qr {
    width: min(210px, 100%);
  }

  .luck-donate-thanks {
    margin-top: 12px;
  }
}

.plan-card .feature-row {
  width: 100% !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
}

.plan-card .feature-item {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 12px 14px !important;
  gap: 11px !important;
}

.plan-card .feature-icon-wrapper {
  width: 32px !important;
  height: 32px !important;
}

.plan-card .feature-info {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.plan-card .feature-label,
.plan-card .feature-value {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.plan-card .feature-label {
  flex: 0 1 auto !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

.plan-card .feature-value {
  flex: 0 1 auto !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: right !important;
}

/* Vue Teleport owns subscription overlays under body. Keep the viewport
   contract explicit so both mobile and desktop-layout dialogs remain
   independent from every scrolling/filtered route shell. */
.subscription-dialog-overlay {
  position: fixed !important;
  inset: 0 !important;
  overscroll-behavior: contain;
}

@media (max-width: 768px) {
  /* Keep the mobile shell inside the viewport. The generated Luck rules keep
     desktop flex rows for the alert/profile blocks, which makes actions and
     translated values overflow on narrow screens. */
  .mobile-content {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .dashboard-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 12px 32px !important;
  }

  .unpaid-order-alert {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px !important;
  }

  .unpaid-order-alert .alert-content {
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .unpaid-order-alert .alert-icon {
    display: none !important;
  }

  .unpaid-order-alert .alert-info {
    width: 100% !important;
    min-width: 0 !important;
  }

  .unpaid-order-alert .alert-title {
    width: 100% !important;
    min-width: 0 !important;
    line-height: 1.45 !important;
  }

  .unpaid-order-alert .alert-details {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .unpaid-order-alert .alert-actions {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: stretch !important;
    gap: 8px !important;
  }

  .unpaid-order-alert .alert-actions > button:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .unpaid-order-alert .alert-actions > button:last-child {
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
  }

  .user-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    overflow: visible !important;
  }

  .user-main-info,
  .user-profile,
  .user-details,
  .user-email-container,
  .subscription-items {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .user-profile {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  .user-profile .avatar-container {
    align-self: center !important;
  }

  .user-email-wrapper {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  .user-subscription-item {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    gap: 8px !important;
  }

  .user-subscription-item .subscription-label {
    flex: 1 1 140px !important;
    min-width: min-content !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
  }

  .user-subscription-item .subscription-value {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 58% !important;
    min-width: min-content !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    text-align: right !important;
  }

  .mobile-bottom-nav .nav-label {
    white-space: nowrap !important;
    font-size: 11px !important;
  }

  .plan-card .plan-features {
    padding: 0 16px 18px !important;
  }

  .plan-card .feature-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .plan-card .feature-item {
    padding: 11px 12px !important;
    gap: 10px !important;
  }

  .plan-card .feature-info {
    gap: 8px !important;
  }

  .invite-page .code-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .invite-page .code-actions > :last-child {
    grid-column: 1 / -1 !important;
  }

}
/* Language and support controls remain reachable at every viewport ratio. */
.luck-language-picker {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 2147482000;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(148, 163, 184, .3);
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 6px 24px rgba(15, 23, 42, .14);
  backdrop-filter: blur(10px);
}
.luck-language-picker select {
  min-width: 0;
  max-width: 132px;
  border: 0;
  outline: 0;
  color: #1f2937;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

/* Persian is the only RTL locale shipped by Luck. Keep document-level flow
   correct while preserving left-to-right entry for protocol data, email,
   passwords, verification codes and order identifiers. */
html[dir="rtl"] .luck-language-picker {
  right: auto;
  left: max(14px, env(safe-area-inset-left));
}

html[dir="rtl"] :where(
  .unified-container,
  .email-verify-wrapper input,
  input[type="email"],
  input[type="password"],
  input[inputmode="numeric"],
  .order-number[data-v-95571e5b],
  .luck-node-flag
) {
  direction: ltr;
}

html[dir="rtl"] .luck-language-picker select {
  direction: rtl;
}

/* Auth pages keep the picker in a reserved safe-area row. Once the app shell
   is mounted it is moved into the real desktop/mobile header, so it no longer
   floats over the account menu or dashboard cards. */
.luck-language-picker.luck-language-picker--inline,
.luck-language-picker.luck-language-picker--mobile,
.luck-language-picker.luck-language-picker--tablet {
  position: static;
  inset: auto;
  z-index: auto;
}

.luck-language-picker.luck-language-picker--inline {
  flex: 0 0 auto;
  padding: 6px 9px;
  box-shadow: none;
}

.luck-language-picker.luck-language-picker--mobile {
  width: 100%;
  max-width: 100%;
  justify-content: flex-start;
  margin-top: 8px;
  padding: 7px 10px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .1);
}

.luck-language-picker.luck-language-picker--mobile select,
.luck-language-picker.luck-language-picker--tablet select {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
}

/* The desktop shell remains active on 769-1180px tablets. Give language its
   own header row there instead of squeezing the title, download/donate actions
   and account menu into one line. */
.header-content.luck-language-host--tablet {
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding-inline: clamp(12px, 2vw, 24px) !important;
}

.luck-language-picker.luck-language-picker--tablet {
  flex: 1 0 100%;
  order: 10;
  width: 100%;
  justify-content: flex-start;
  padding: 7px 10px;
  box-shadow: none;
}
.luck-messenger-support {
  position: fixed;
  inset-inline-end: max(20px, env(safe-area-inset-right), env(safe-area-inset-left));
  bottom: calc(max(24px, env(safe-area-inset-bottom)) + 76px);
  z-index: 2147481999;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 50%;
  color: #fff !important;
  background: #0866ff;
  box-shadow: 0 8px 26px rgba(8, 102, 255, .35);
  font: 800 30px/1 Arial, sans-serif;
  text-decoration: none !important;
  unicode-bidi: isolate;
}
@media (max-width: 520px) {
  .luck-language-picker { top: 8px; right: 8px; padding: 6px 8px; }
  html[dir="rtl"] .luck-language-picker { right: auto; left: 8px; }
  .luck-language-picker select { max-width: 108px; font-size: 13px; }
  .luck-language-picker.luck-language-picker--mobile { padding: 7px 9px; }
  .luck-language-picker.luck-language-picker--mobile select { max-width: none; }
}

/* The stock purchase-warning dialog is capped at 520px, leaving both plan
   headers too narrow once Vietnamese labels are inserted. Give only this
   dialog a little more room and keep the title/badge pair on one line. */
.desktop-modal[data-v-6538462c]:has(.plan-comparison[data-v-7a517f7f]) {
  width: min(640px, calc(100vw - 32px)) !important;
  max-width: min(640px, calc(100vw - 32px)) !important;
}

.plan-comparison[data-v-7a517f7f] .comparison-container[data-v-7a517f7f] {
  align-items: stretch !important;
  gap: 12px !important;
}

.plan-comparison[data-v-7a517f7f] .plan-column[data-v-7a517f7f] {
  min-width: 0 !important;
  padding: 14px !important;
}

.plan-comparison[data-v-7a517f7f] .column-header[data-v-7a517f7f] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
}

.plan-comparison[data-v-7a517f7f] .column-title[data-v-7a517f7f],
.plan-comparison[data-v-7a517f7f] .status-badge[data-v-7a517f7f],
.plan-comparison[data-v-7a517f7f] .arrow-text[data-v-7a517f7f] {
  white-space: nowrap !important;
  text-transform: none !important;
}

.plan-comparison[data-v-7a517f7f] .status-badge[data-v-7a517f7f] {
  min-width: 0 !important;
  padding: 4px 6px !important;
}

.plan-comparison[data-v-7a517f7f] .plan-name[data-v-7a517f7f] {
  overflow-wrap: anywhere !important;
}

.plan-comparison[data-v-7a517f7f] .spec-item[data-v-7a517f7f] {
  gap: 10px !important;
}

.plan-comparison[data-v-7a517f7f] .spec-label[data-v-7a517f7f] {
  white-space: nowrap !important;
}

.plan-comparison[data-v-7a517f7f] .spec-value[data-v-7a517f7f] {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  text-align: right !important;
}

@media (max-width: 680px) {
  .plan-comparison[data-v-7a517f7f] {
    padding: 14px !important;
  }

  .plan-comparison[data-v-7a517f7f] .comparison-container[data-v-7a517f7f] {
    flex-direction: column !important;
  }

  .plan-comparison[data-v-7a517f7f] .plan-column[data-v-7a517f7f] {
    width: 100% !important;
  }

  .plan-comparison[data-v-7a517f7f] .arrow-container[data-v-7a517f7f] {
    min-height: 24px !important;
  }

  .plan-comparison[data-v-7a517f7f] .arrow-container[data-v-7a517f7f]:not(.mobile) .arrow-icon[data-v-7a517f7f] {
    transform: rotate(90deg) !important;
  }
}

/* Dashboard layout: collapse columns before translated labels are squeezed to
   one character per line. The stock card combines a fixed 520px balance row
   with a flexible profile block inside a two-thirds column; on Windows split
   screens, 16:10 laptops and tablets the profile is allowed to shrink almost
   to zero. These rules use the card's own width as the breakpoint and keep
   every label, value and action available. */
.dashboard-content[data-v-3709f5eb],
.main-layout[data-v-3709f5eb],
.left-column[data-v-3709f5eb],
.right-column[data-v-3709f5eb] {
  width: 100% !important;
  min-width: 0 !important;
}

.dashboard-content[data-v-3709f5eb] {
  padding: clamp(12px, 1.8vw, 24px) !important;
  container: luck-dashboard / inline-size;
}

.main-layout[data-v-3709f5eb] {
  display: grid !important;
  /* The traffic/status cards need a real 520px track to keep both their gauge
     and value grid readable. A 300px minimum let the track keep shrinking
     while its fixed inner content was clipped by the page overflow guard. */
  grid-template-columns: minmax(0, 2fr) minmax(520px, 1fr) !important;
  align-items: start !important;
  gap: clamp(14px, 1.6vw, 24px) !important;
}

.notice-section[data-v-3709f5eb] > .section-title[data-v-3709f5eb] {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal !important;
}

.left-column[data-v-3709f5eb],
.right-column[data-v-3709f5eb] {
  display: grid !important;
  align-content: start !important;
  gap: clamp(12px, 1.4vw, 20px) !important;
}

/* A stale named grid area on `.left-bottom` made Grid create an implicit
   second track inside the left dashboard column.  The exact failure scaled
   with the viewport: the profile card measured only 105px at 1366px, 289px
   at 1920px and 797px at 3440px while the downloads block occupied a separate
   track.  Declare the single-track contract explicitly so future generated
   bundle changes cannot recreate that phantom middle column. */
.left-column[data-v-3709f5eb] {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: minmax(0, 1fr) !important;
  align-items: start !important;
}

.left-column[data-v-3709f5eb] > *,
.right-column[data-v-3709f5eb] > * {
  width: 100% !important;
  min-width: 0 !important;
  margin-inline: 0 !important;
}

.left-column[data-v-3709f5eb] > * {
  grid-column: 1 / -1 !important;
}

/* The generated traffic widget keeps a 314px gauge beside a roughly 307px
   statistics grid. Together with its gap and card padding that composition
   needs about 700px; flex-shrink alone only paints the statistics outside the
   card, where the page overflow guard silently clips them. Make the widget
   respond to its own allocated column and progressively move content down
   before any label or value disappears. */
.traffic-dashboard[data-v-3709f5eb] {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
  container: luck-traffic / inline-size;
}

.traffic-dashboard[data-v-3709f5eb] .dashboard-container[data-v-3709f5eb],
.traffic-dashboard[data-v-3709f5eb] .gauge-chart[data-v-3709f5eb],
.traffic-dashboard[data-v-3709f5eb] .gauge-container[data-v-3709f5eb],
.traffic-dashboard[data-v-3709f5eb] .gauge-center[data-v-3709f5eb],
.traffic-dashboard[data-v-3709f5eb] .traffic-stats-grid[data-v-3709f5eb],
.traffic-dashboard[data-v-3709f5eb] .stat-item[data-v-3709f5eb],
.traffic-dashboard[data-v-3709f5eb] .stat-content[data-v-3709f5eb] {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.traffic-dashboard[data-v-3709f5eb] .dashboard-container[data-v-3709f5eb] {
  width: 100% !important;
}

.traffic-dashboard[data-v-3709f5eb] .gauge-container[data-v-3709f5eb] {
  width: 100% !important;
}

.traffic-dashboard[data-v-3709f5eb] .gauge-center[data-v-3709f5eb] {
  width: min(200px, 100%) !important;
}

.traffic-dashboard[data-v-3709f5eb] :where(
  .gauge-percentage[data-v-3709f5eb],
  .gauge-label[data-v-3709f5eb],
  .gauge-sublabel[data-v-3709f5eb]
) {
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.traffic-dashboard[data-v-3709f5eb] .traffic-stats-grid[data-v-3709f5eb] {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.traffic-dashboard[data-v-3709f5eb] :where(
  .stat-label[data-v-3709f5eb],
  .stat-value[data-v-3709f5eb]
) {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

@container luck-traffic (max-width: 700px) {
  .traffic-dashboard[data-v-3709f5eb] .dashboard-container[data-v-3709f5eb] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
  }

  .traffic-dashboard[data-v-3709f5eb] .gauge-chart[data-v-3709f5eb],
  .traffic-dashboard[data-v-3709f5eb] .traffic-stats-grid[data-v-3709f5eb] {
    width: 100% !important;
  }
}

@container luck-traffic (max-width: 380px) {
  .traffic-dashboard[data-v-3709f5eb] .traffic-stats-grid[data-v-3709f5eb] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* One-click Telegram access is the first action inside the dashboard's
   existing subscription-link section. It is injected idempotently after the
   section heading so the generated Vue route remains the single owner of the
   rest of that block. */
.luck-telegram-card-parking[hidden],
.luck-telegram-card[hidden] {
  display: none !important;
}

.luck-telegram-card {
  box-sizing: border-box;
  display: grid;
  container: luck-telegram-card / inline-size;
  width: 100%;
  min-width: 0;
  padding: clamp(17px, 1.7vw, 23px);
  gap: 14px;
  color: #25334d;
  background:
    radial-gradient(circle at 100% 0, rgba(42, 171, 238, .13), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(246, 250, 255, .96));
  border: 1px solid rgba(117, 139, 174, .2);
  border-radius: 20px;
  box-shadow: 0 10px 26px rgba(37, 51, 77, .09);
  overflow: hidden;
  isolation: isolate;
}

.subscription-cards-section > .luck-telegram-card--subscription {
  margin-block: 14px 18px;
}

.luck-telegram-header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.luck-telegram-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #fff;
  background: linear-gradient(145deg, #35b8f0, #218bd5);
  border-radius: 14px;
  box-shadow: 0 7px 16px rgba(33, 139, 213, .24);
}

.luck-telegram-icon svg,
.luck-telegram-primary svg,
.luck-telegram-refresh svg {
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.luck-telegram-heading {
  display: grid;
  justify-items: start;
  min-width: 0;
  gap: 5px;
}

.luck-telegram-heading h2 {
  min-width: 0;
  margin: 0;
  color: inherit;
  font-size: clamp(16px, 1.2vw, 19px);
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: normal;
  word-break: keep-all;
}

.luck-telegram-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 24px;
  padding: 4px 9px;
  color: #64748b;
  background: #eef2f7;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: normal;
  word-break: keep-all;
  white-space: normal;
}

.luck-telegram-card[data-state="linked"] .luck-telegram-status {
  color: #11734b;
  background: #e1f7ec;
}

.luck-telegram-card[data-state="unlinked"] .luck-telegram-status {
  color: #9a5a07;
  background: #fff3d7;
}

.luck-telegram-card[data-state="error"] .luck-telegram-status,
.luck-telegram-card[data-state="unavailable"] .luck-telegram-status {
  color: #a13a43;
  background: #fdebed;
}

.luck-telegram-refresh,
.luck-telegram-primary {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 42px;
  border: 0;
  font: inherit;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.luck-telegram-refresh {
  gap: 7px;
  padding: 9px 11px;
  color: #475569;
  background: rgba(238, 242, 247, .9);
  border: 1px solid rgba(117, 139, 174, .2);
  border-radius: 12px;
  white-space: nowrap;
}

.luck-telegram-refresh svg {
  width: 17px;
  height: 17px;
}

.luck-telegram-refresh:disabled {
  cursor: wait;
  opacity: .62;
}

.luck-telegram-description,
.luck-telegram-reseller-note,
.luck-telegram-footnote,
.luck-telegram-unavailable {
  min-width: 0;
  margin: 0;
  line-height: 1.55;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.luck-telegram-description {
  color: #53627a;
  font-size: 14px;
}

.luck-telegram-reseller-note {
  padding: 10px 12px;
  color: #245b45;
  background: rgba(225, 247, 236, .76);
  border-inline-start: 3px solid #39ad79;
  border-radius: 10px;
  font-size: 13px;
}

.luck-telegram-actions {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.luck-telegram-primary {
  width: 100%;
  gap: 9px;
  padding: 11px 16px;
  color: #fff !important;
  background: linear-gradient(135deg, #2aabee, #2487ca);
  border-radius: 13px;
  box-shadow: 0 8px 18px rgba(36, 135, 202, .22);
  text-align: center;
  overflow-wrap: normal;
  word-break: keep-all;
  white-space: normal;
}

.luck-telegram-primary:hover,
.luck-telegram-refresh:hover:not(:disabled) {
  transform: translateY(-1px);
}

.luck-telegram-primary:hover {
  box-shadow: 0 11px 23px rgba(36, 135, 202, .28);
}

.luck-telegram-primary:focus-visible,
.luck-telegram-refresh:focus-visible {
  outline: 3px solid rgba(42, 171, 238, .3);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .luck-telegram-primary,
  .luck-telegram-refresh {
    transition: none;
  }
}

@media (forced-colors: active) {
  .luck-telegram-card,
  .luck-telegram-icon,
  .luck-telegram-status,
  .luck-telegram-primary,
  .luck-telegram-refresh,
  .luck-telegram-unavailable {
    forced-color-adjust: auto;
    border: 1px solid CanvasText;
  }
}

.luck-telegram-unavailable {
  width: 100%;
  padding: 11px 13px;
  color: #7b4550;
  background: rgba(253, 235, 237, .72);
  border-radius: 12px;
  font-size: 13px;
  text-align: center;
}

.luck-telegram-footnote {
  color: #7b879a;
  font-size: 12px;
  text-align: center;
}

html[dir="rtl"] .luck-telegram-card {
  direction: rtl;
  text-align: start;
}

html:is(.dark, [data-theme="dark"]) .luck-telegram-card,
body:is(.dark, .dark-mode, [data-theme="dark"]) .luck-telegram-card {
  color: #e6edf7;
  background:
    radial-gradient(circle at 100% 0, rgba(42, 171, 238, .15), transparent 42%),
    linear-gradient(145deg, rgba(24, 35, 52, .98), rgba(20, 30, 45, .98));
  border-color: rgba(148, 163, 184, .2);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .24);
}

html:is(.dark, [data-theme="dark"]) .luck-telegram-description,
body:is(.dark, .dark-mode, [data-theme="dark"]) .luck-telegram-description {
  color: #bdc8d8;
}

html:is(.dark, [data-theme="dark"]) .luck-telegram-refresh,
body:is(.dark, .dark-mode, [data-theme="dark"]) .luck-telegram-refresh {
  color: #dce6f3;
  background: rgba(51, 65, 85, .82);
  border-color: rgba(148, 163, 184, .2);
}

html:is(.dark, [data-theme="dark"]) .luck-telegram-footnote,
body:is(.dark, .dark-mode, [data-theme="dark"]) .luck-telegram-footnote {
  color: #9eacc0;
}

@container luck-telegram-card (max-width: 390px) {
  .luck-telegram-header {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 9px;
  }

  .luck-telegram-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .luck-telegram-refresh {
    width: 40px;
    min-height: 40px;
    padding: 0;
  }

  .luck-telegram-refresh span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

@container luck-telegram-card (min-width: 700px) {
  .luck-telegram-card--subscription {
    grid-template-columns: minmax(320px, 1.35fr) minmax(220px, .85fr);
    grid-template-areas:
      "telegram-header telegram-actions"
      "telegram-description telegram-actions"
      "telegram-reseller telegram-footnote";
    align-items: center;
    column-gap: clamp(14px, 2vw, 24px);
    row-gap: 8px;
  }

  .luck-telegram-card--subscription .luck-telegram-header {
    grid-area: telegram-header;
  }

  .luck-telegram-card--subscription .luck-telegram-description {
    grid-area: telegram-description;
  }

  .luck-telegram-card--subscription .luck-telegram-reseller-note {
    grid-area: telegram-reseller;
  }

  .luck-telegram-card--subscription .luck-telegram-actions {
    grid-area: telegram-actions;
  }

  .luck-telegram-card--subscription .luck-telegram-footnote {
    grid-area: telegram-footnote;
  }
}

@media (max-width: 390px) {
  .luck-telegram-card {
    padding: 15px 13px;
    border-radius: 16px;
  }
}

/* Approved compact Telegram treatment: share the subscription title row and
   mirror the Download apps box geometry (32px box padding plus a 40px control
   row and a 16px title-to-cards gap). The generated six-card grid is not
   wrapped or modified. */
.subscription-container[data-v-3709f5eb] {
  padding: 32px !important;
}

.subscription-container[data-v-3709f5eb] :is(h3, .section-title) {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal !important;
}

.subscription-cards-section[data-v-3709f5eb] {
  container: luck-subscription-section / inline-size;
  margin-top: 0 !important;
}

.subscription-cards-section[data-v-3709f5eb] > .luck-subscription-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  margin-bottom: 16px;
}

.luck-subscription-header > .section-title[data-v-3709f5eb] {
  flex: 0 0 auto;
  min-width: 0;
  margin: 0 !important;
  line-height: 1.35 !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  white-space: nowrap;
}

.subscription-cards-section[data-v-3709f5eb] > .luck-subscription-header + .subscription-grid[data-v-3709f5eb] {
  margin-top: 0 !important;
}

.luck-subscription-header > .luck-telegram-card--subscription {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 1 540px;
  gap: 9px;
  width: auto;
  max-width: 540px;
  min-width: 0;
  min-height: 40px;
  padding: 4px 6px 4px 8px;
  color: #334155;
  background: rgba(248, 253, 248, .97);
  border: 1px solid rgba(136, 193, 82, .28);
  border-radius: 999px;
  box-shadow: 0 5px 16px rgba(51, 65, 85, .065);
  overflow: hidden;
  isolation: isolate;
}

.luck-subscription-header .luck-telegram-icon {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  color: #fff;
  background: linear-gradient(135deg, #2aabee, #229ed9);
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(34, 158, 217, .22);
}

.luck-subscription-header .luck-telegram-icon svg {
  width: 17px;
  height: 17px;
}

.luck-subscription-header .luck-telegram-heading {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  gap: 1px;
  line-height: 1.15;
}

.luck-subscription-header .luck-telegram-heading h2 {
  overflow: hidden;
  width: 100%;
  margin: 0;
  color: #263449;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  word-break: keep-all;
  white-space: nowrap;
}

.luck-subscription-header .luck-telegram-description {
  overflow: hidden;
  width: 100%;
  margin: 0;
  color: #718096;
  font-size: 11px;
  line-height: 1.2;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  word-break: keep-all;
  white-space: nowrap;
}

.luck-subscription-header .luck-telegram-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  width: auto;
  max-width: 142px;
  min-height: 0;
  padding: 4px 7px;
  overflow: hidden;
  color: #8a5b12;
  background: #fff8e8;
  border: 1px solid #f4dda7;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  word-break: keep-all;
  white-space: nowrap;
}

.luck-subscription-header .luck-telegram-status::before {
  content: '';
  flex: 0 0 5px;
  width: 5px;
  height: 5px;
  background: currentColor;
  border-radius: 50%;
}

.luck-subscription-header .luck-telegram-card[data-state="linked"] .luck-telegram-status {
  color: #2e6b23;
  background: #eff9e9;
  border-color: #cce7bc;
}

.luck-subscription-header .luck-telegram-card[data-state="loading"] .luck-telegram-status {
  color: #526375;
  background: #f1f5f9;
  border-color: #dce4ec;
}

.luck-subscription-header .luck-telegram-card[data-state="error"] .luck-telegram-status,
.luck-subscription-header .luck-telegram-card[data-state="unavailable"] .luck-telegram-status {
  color: #9a3d48;
  background: #fff1f2;
  border-color: #f5cbd1;
}

.luck-subscription-header .luck-telegram-actions {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
}

.luck-subscription-header .luck-telegram-primary,
.luck-subscription-header .luck-telegram-refresh {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 30px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.luck-subscription-header .luck-telegram-primary {
  width: auto;
  padding: 0 11px;
  color: #fff !important;
  background: linear-gradient(135deg, #88c152, #65aa46);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 4px 11px rgba(101, 170, 70, .2);
  overflow-wrap: normal;
  word-break: keep-all;
  white-space: nowrap;
}

.luck-subscription-header .luck-telegram-primary svg {
  display: none;
}

.luck-subscription-header .luck-telegram-refresh {
  position: relative;
  width: 30px;
  padding: 0;
  color: #64748b;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
}

.luck-subscription-header .luck-telegram-refresh svg {
  width: 14px;
  height: 14px;
}

.luck-subscription-header .luck-telegram-refresh > span,
.luck-subscription-header .luck-telegram-reseller-note,
.luck-subscription-header .luck-telegram-footnote {
  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;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.luck-subscription-header .luck-telegram-unavailable {
  overflow: hidden;
  width: auto;
  max-width: 150px;
  padding: 6px 9px;
  color: #8c4650;
  background: #fff1f2;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1.15;
  text-overflow: ellipsis;
  word-break: keep-all;
  white-space: nowrap;
}

.luck-subscription-header .luck-telegram-primary:hover,
.luck-subscription-header .luck-telegram-refresh:hover:not(:disabled) {
  filter: brightness(1.035);
  transform: translateY(-1px);
}

.luck-subscription-header .luck-telegram-primary:focus-visible,
.luck-subscription-header .luck-telegram-refresh:focus-visible {
  outline: 3px solid rgba(34, 158, 217, .25);
  outline-offset: 2px;
}

html[dir="rtl"] .luck-subscription-header,
html[dir="rtl"] .luck-subscription-header .luck-telegram-card {
  direction: rtl;
  text-align: start;
}

html[dir="rtl"] .luck-subscription-header .luck-telegram-heading {
  align-items: flex-start;
}

@container luck-subscription-section (max-width: 720px) {
  .subscription-cards-section[data-v-3709f5eb] > .luck-subscription-header {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
  }

  .luck-subscription-header > .luck-telegram-card--subscription {
    flex: none;
    justify-content: flex-start;
    width: 100%;
    max-width: none;
    border-radius: 14px;
  }
}

@container luck-subscription-section (max-width: 560px) {
  .luck-subscription-header > .luck-telegram-card--subscription {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    gap: 8px;
    padding: 9px;
  }

  .luck-subscription-header .luck-telegram-icon {
    grid-column: 1;
    grid-row: 1;
  }

  .luck-subscription-header .luck-telegram-heading {
    grid-column: 2;
    grid-row: 1;
  }

  .luck-subscription-header .luck-telegram-refresh {
    grid-column: 3;
    grid-row: 1;
  }

  .luck-subscription-header .luck-telegram-status {
    grid-column: 2 / 4;
    grid-row: 2;
    justify-self: start;
  }

  .luck-subscription-header .luck-telegram-actions {
    grid-column: 1 / 3;
    grid-row: 3;
    width: 100%;
  }

  .luck-subscription-header .luck-telegram-primary,
  .luck-subscription-header .luck-telegram-unavailable {
    width: 100%;
    max-width: none;
  }
}

/* The stock layout assigns `grid-area: left-bottom` to the client/download
   section. Once the parent is converted from its original named-area layout
   to this responsive grid, that stale name creates a second implicit column
   and squeezes the profile card to 34px on a 280px foldable (and roughly
   110px even at 1366px). Reset it so both left-column children occupy normal
   full-width rows. */
.left-bottom[data-v-3709f5eb] {
  grid-area: auto !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Keep the resources CTA with the application cards it describes. The stock
   shell has enough header controls already, and injecting another translated
   label there made laptop/tablet headers collide. The toolbar is created by
   the dashboard shell script and remains a single action at every width. */
.clients-section.luck-download-section[data-v-3709f5eb] {
  container: luck-download-section / inline-size;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
}

.luck-download-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  grid-column: 2;
  grid-row: 1;
  width: auto;
  min-width: 0;
  margin-bottom: 16px;
}

.clients-section.luck-download-section[data-v-3709f5eb] > .section-title[data-v-3709f5eb] {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  margin-bottom: 16px !important;
  line-height: 1.35 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere;
  word-break: normal !important;
}

.clients-section.luck-download-section[data-v-3709f5eb] > :where(.platform-cards, .client-apps) {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}

.luck-download-toolbar > .luck-app-download {
  position: static !important;
  inset: auto !important;
  flex: 0 0 auto;
  max-width: 100%;
  min-height: 40px;
  padding: 9px 15px;
  border-color: rgba(14, 116, 144, .18);
  white-space: nowrap !important;
  writing-mode: horizontal-tb !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

@container luck-download-section (max-width: 520px) {
  .clients-section.luck-download-section[data-v-3709f5eb] {
    grid-template-columns: minmax(0, 1fr) 40px;
    column-gap: 10px;
  }

  .luck-download-toolbar > .luck-app-download {
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 12px;
  }

  .luck-download-toolbar > .luck-app-download .luck-app-download-label {
    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;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

/* The dashboard exposes the same five deterministic OS choices as the
   Resources portal. These rules keep all five on one row when the real Luck
   column is wide, then reduce columns from the section width rather than from
   the browser viewport. */
.clients-section.luck-download-section[data-v-3709f5eb] > .platform-cards[data-v-3709f5eb] {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: stretch;
}

.platform-card.macos[data-v-3709f5eb] {
  color: #334155;
  background: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 100%);
}

.platform-card.linux[data-v-3709f5eb] {
  color: #8a4b12;
  background: linear-gradient(135deg, #fff8e7 0%, #f6c970 100%);
}

.platform-card.macos[data-v-3709f5eb]:hover,
.platform-card.linux[data-v-3709f5eb]:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 16px 48px rgba(51, 65, 85, .24);
}

.platform-card.macos.active[data-v-3709f5eb],
.platform-card.linux.active[data-v-3709f5eb] {
  position: relative;
  transform: translateY(-4px) scale(1.02);
  border: 3px solid #ffd700;
  box-shadow: 0 12px 40px rgba(100, 116, 139, .3);
}

.platform-card[data-luck-platform][data-v-3709f5eb]:focus-visible {
  outline: 3px solid rgba(42, 171, 238, .38);
  outline-offset: 3px;
}

.platform-card[data-luck-platform][data-v-3709f5eb] .platform-name,
.platform-card[data-luck-platform][data-v-3709f5eb] .platform-desc,
.platform-card[data-v-3709f5eb] b {
  min-width: 0 !important;
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal !important;
  writing-mode: horizontal-tb !important;
}

@container luck-download-section (max-width: 900px) {
  .clients-section.luck-download-section[data-v-3709f5eb] > .platform-cards[data-v-3709f5eb] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@container luck-download-section (max-width: 640px) {
  .clients-section.luck-download-section[data-v-3709f5eb] > .platform-cards[data-v-3709f5eb] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@container luck-download-section (max-width: 420px) {
  .clients-section.luck-download-section[data-v-3709f5eb] > .platform-cards[data-v-3709f5eb] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

.user-card[data-v-3709f5eb] {
  width: 100% !important;
  min-width: 0 !important;
  padding: clamp(18px, 2vw, 30px) !important;
  /* The stock avatar has an 80px image plus a white border. When the profile
     column was squeezed, the image was compressed to a thin white crescent
     and leaked outside the green card. Keep all card artwork contained. */
  overflow: hidden !important;
  isolation: isolate;
  container: luck-user-card / inline-size;
}

.user-main-info[data-v-3709f5eb] {
  display: grid !important;
  grid-template-columns: minmax(230px, .85fr) minmax(420px, 1.5fr) !important;
  align-items: start !important;
  gap: clamp(18px, 2vw, 30px) !important;
}

.user-profile[data-v-3709f5eb],
.user-details[data-v-3709f5eb],
.subscription-items[data-v-3709f5eb] {
  width: 100% !important;
  min-width: 0 !important;
}

.user-profile[data-v-3709f5eb] {
  display: grid !important;
  grid-template-columns: 88px minmax(0, 1fr) !important;
  align-items: flex-start !important;
  gap: clamp(14px, 1.5vw, 20px) !important;
}

.user-profile .avatar-container[data-v-3709f5eb] {
  box-sizing: border-box !important;
  flex: 0 0 88px !important;
  width: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  align-self: start !important;
  justify-self: start !important;
}

.user-profile .user-avatar-wrapper[data-v-3709f5eb] {
  box-sizing: border-box !important;
  display: block !important;
  flex: 0 0 88px !important;
  width: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  height: 88px !important;
}

.user-profile .user-avatar-enhanced[data-v-3709f5eb] {
  box-sizing: border-box !important;
  display: block !important;
  flex: none !important;
  width: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  height: 88px !important;
  min-height: 88px !important;
  max-height: 88px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

.user-profile .avatar-status-indicator[data-v-3709f5eb] {
  box-sizing: border-box !important;
  flex: none !important;
}

.user-details[data-v-3709f5eb] {
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
}

.subscription-items[data-v-3709f5eb] {
  display: grid !important;
  gap: 6px !important;
}

.user-subscription-item[data-v-3709f5eb] {
  display: grid !important;
  grid-template-columns: minmax(145px, 1fr) minmax(96px, 45%) !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  min-height: 38px !important;
  padding: 7px 9px !important;
}

.user-subscription-item .subscription-label[data-v-3709f5eb],
.user-subscription-item .subscription-value[data-v-3709f5eb] {
  width: auto !important;
  min-width: min-content !important;
  max-width: 100% !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

.user-subscription-item .subscription-label[data-v-3709f5eb] {
  text-align: start !important;
}

.user-subscription-item .subscription-value[data-v-3709f5eb] {
  min-width: 0 !important;
  justify-self: end !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  text-align: end !important;
}

/* CJK has no spaces between many words. `keep-all` is useful for Vietnamese,
   English and Russian labels, but would make Japanese, Korean and Chinese
   overflow instead of wrapping at a sensible glyph boundary. */
html:is([lang^="zh"], [lang^="ja"], [lang^="ko"]) :where(
  .user-subscription-item .subscription-label[data-v-3709f5eb],
  .balance-card-premium .card-label-premium[data-v-3709f5eb]
) {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.balance-cards-premium[data-v-3709f5eb] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(132px, 1fr)) !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  gap: clamp(10px, 1.2vw, 16px) !important;
  overflow: visible !important;
}

.balance-card-premium[data-v-3709f5eb],
.balance-card-premium.commission-card-wide[data-v-3709f5eb],
.balance-card-premium.account-card-wide[data-v-3709f5eb],
.balance-card-premium.wallet-card-wide[data-v-3709f5eb],
.balance-card-premium.commission-premium[data-v-3709f5eb] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 160px !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.balance-card-premium .card-content-premium[data-v-3709f5eb],
.commission-card-wide .card-content-premium[data-v-3709f5eb],
.account-card-wide .card-content-premium[data-v-3709f5eb],
.wallet-card-wide .card-content-premium[data-v-3709f5eb] {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 12px !important;
  padding: clamp(16px, 1.7vw, 24px) !important;
}

.balance-card-premium .card-label-premium[data-v-3709f5eb],
.balance-card-premium .card-amount[data-v-3709f5eb] {
  min-width: 0 !important;
  margin: 0 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

/* The generated wallet card renders the same recharge action twice: the
   intended floating badge and an unstyled iOS fallback at the bottom. Keep
   the compact badge as the sole visible control on every viewport. */
.wallet-card-wide .ios-card-action[data-v-3709f5eb] {
  display: none !important;
}

.wallet-card-wide .recharge-btn-float[data-v-3709f5eb] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@container luck-user-card (max-width: 800px) {
  .user-main-info[data-v-3709f5eb] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .user-profile[data-v-3709f5eb] {
    align-self: stretch !important;
  }
}

@container luck-user-card (max-width: 520px) {
  .user-profile[data-v-3709f5eb] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .user-profile .avatar-container[data-v-3709f5eb] {
    justify-self: center !important;
  }

  .user-details[data-v-3709f5eb] {
    text-align: center !important;
  }

  .user-email-wrapper[data-v-3709f5eb],
  .user-badges[data-v-3709f5eb] {
    justify-content: center !important;
  }

  .subscription-items[data-v-3709f5eb] {
    text-align: start !important;
  }

  .balance-cards-premium[data-v-3709f5eb] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .balance-card-premium[data-v-3709f5eb],
  .balance-card-premium.commission-card-wide[data-v-3709f5eb],
  .balance-card-premium.account-card-wide[data-v-3709f5eb],
  .balance-card-premium.wallet-card-wide[data-v-3709f5eb] {
    min-height: 116px !important;
  }

  .user-subscription-item[data-v-3709f5eb] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  .user-subscription-item .subscription-value[data-v-3709f5eb] {
    justify-self: start !important;
    text-align: start !important;
  }
}

/* Keep the accepted two-column desktop composition only while both tracks
   have enough readable space. At 1440px of actual post-sidebar dashboard
   width the left content, 520px status track and inter-column gap no longer
   fit safely, so the complete right column moves below the left one. */
@container luck-dashboard (max-width: 1440px) {
  .main-layout[data-v-3709f5eb] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Only legacy browsers without container queries need viewport fallbacks.
   Modern browsers must respond to the actual dashboard/card width after the
   sidebar. The viewport fallback includes the typical desktop sidebar width
   so it reaches the same safe stacking point as the container query. */
@supports not (container-type: inline-size) {
  /* Older WebViews cannot evaluate the component-width queries above. Keep
     their traffic widget readable with conservative viewport fallbacks; a
     vertical composition is preferable to silently clipping the metrics. */
  @media (max-width: 2600px) {
    .traffic-dashboard[data-v-3709f5eb] .dashboard-container[data-v-3709f5eb] {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) !important;
      align-items: stretch !important;
    }

    .traffic-dashboard[data-v-3709f5eb] .gauge-chart[data-v-3709f5eb],
    .traffic-dashboard[data-v-3709f5eb] .traffic-stats-grid[data-v-3709f5eb] {
      width: 100% !important;
    }
  }

  @media (max-width: 430px) {
    .traffic-dashboard[data-v-3709f5eb] .traffic-stats-grid[data-v-3709f5eb] {
      grid-template-columns: minmax(0, 1fr) !important;
    }
  }

  @media (max-width: 1760px) {
    .main-layout[data-v-3709f5eb] {
      grid-template-columns: minmax(0, 1fr) !important;
    }
  }

  @media (max-width: 1500px) {
    .user-main-info[data-v-3709f5eb] {
      grid-template-columns: minmax(0, 1fr) !important;
    }
  }
}

/* Immediately above the mobile breakpoint the expanded sidebar leaves less
   than 560px for both desktop header groups. Put those groups on separate rows
   for this narrow transition band instead of letting the account controls be
   clipped by the main shell. */
@media (min-width: 769px) and (max-width: 840px) {
  .header-content[data-v-3b39f767] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 8px !important;
  }

  .header-left[data-v-3b39f767],
  .header-right[data-v-3b39f767] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .header-right[data-v-3b39f767] {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 620px) {
  .dashboard-content[data-v-3709f5eb] {
    padding: 10px 8px 32px !important;
  }

  .user-card[data-v-3709f5eb] {
    padding: 16px 12px !important;
    border-radius: 16px !important;
  }

  .user-profile[data-v-3709f5eb] {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
  }

  .user-profile .avatar-container[data-v-3709f5eb] {
    justify-self: center !important;
  }

  .balance-cards-premium[data-v-3709f5eb] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .user-subscription-item[data-v-3709f5eb] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  .user-subscription-item .subscription-value[data-v-3709f5eb] {
    justify-self: start !important;
    text-align: start !important;
  }
}

@media (max-width: 390px) {
  .user-profile[data-v-3709f5eb] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .user-profile .avatar-container[data-v-3709f5eb] {
    justify-self: center !important;
  }

  .user-subscription-item[data-v-3709f5eb] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  .user-subscription-item .subscription-value[data-v-3709f5eb] {
    justify-self: start !important;
    text-align: start !important;
  }
}

/* Icon visibility contract. Luck mixes inline SVG, Naive UI icons and remote
   image logos. Keep vector geometry measurable, inherit a deliberate colour
   and never let a flex/grid parent squeeze an icon to zero. Explicit fills
   shipped by an icon are preserved; only currentColor geometry is normalized. */
:where(
  .menu-icon,
  .nav-icon,
  .btn-icon,
  .input-icon,
  .email-icon,
  .choice-icon,
  .chevron-icon,
  .giftcard-icon,
  .breadcrumb-chevron,
  .dialog-icon,
  .header-icon,
  .title-icon,
  .platform-icon,
  .app-icon-wrapper,
  .subscription-icon,
  .payment-method-icon,
  .method-icon,
  .feature-icon-wrapper,
  .stat-icon,
  .card-icon-premium,
  .code-icon,
  .record-icon,
  .country-flag-svg,
  .notice-icon,
  .alert-icon
) {
  box-sizing: border-box;
  flex-shrink: 0 !important;
  isolation: isolate;
}

:where(
  .menu-icon,
  .nav-icon,
  .btn-icon,
  .input-icon,
  .email-icon,
  .choice-icon,
  .chevron-icon,
  .giftcard-icon,
  .breadcrumb-chevron,
  .dialog-icon,
  .header-icon,
  .title-icon,
  .platform-icon,
  .app-icon-wrapper,
  .subscription-icon,
  .payment-method-icon,
  .method-icon,
  .feature-icon-wrapper,
  .stat-icon,
  .card-icon-premium,
  .code-icon,
  .record-icon,
  .country-flag-svg,
  .notice-icon,
  .alert-icon
) :where(svg, .n-icon),
:where(
  .menu-icon,
  .nav-icon,
  .btn-icon,
  .input-icon,
  .email-icon,
  .choice-icon,
  .chevron-icon,
  .giftcard-icon,
  .breadcrumb-chevron,
  .dialog-icon,
  .header-icon,
  .title-icon,
  .platform-icon,
  .subscription-icon,
  .payment-method-icon,
  .method-icon,
  .feature-icon-wrapper,
  .stat-icon,
  .card-icon-premium,
  .code-icon,
  .record-icon,
  .country-flag-svg,
  .notice-icon,
  .alert-icon
) > svg {
  display: block !important;
  flex: 0 0 auto !important;
  max-width: 100%;
  max-height: 100%;
  overflow: visible;
  color: inherit;
  visibility: visible !important;
  opacity: 1 !important;
}

:where(.platform-icon, .title-icon) svg[fill="currentColor"],
:where(.platform-icon, .title-icon) svg[fill="currentColor"] path:not([fill]) {
  fill: currentColor !important;
}

.platform-card.windows .platform-icon { color: #0b66b2 !important; }
.platform-card.android .platform-icon { color: #137a42 !important; }
.platform-card.ios .platform-icon { color: #334bb4 !important; }

:where(.payment-method-icon, .method-icon) {
  color: #334155 !important;
  background-color: #f1f5f9 !important;
}

:where(.ios-login-container, .ios-register-container) :where(.input-icon, .email-icon, .choice-icon) {
  color: #64748b;
}

.app-icon-wrapper {
  color: #334155;
  background: linear-gradient(145deg, #fff 0%, #eef2f7 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(100, 116, 139, .16), 0 4px 12px rgba(15, 23, 42, .12) !important;
}

.app-icon-wrapper .app-icon,
.subscription-icon .subscription-logo,
:where(.payment-method-icon, .method-icon) img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  padding: 3px;
  object-fit: contain !important;
  filter: drop-shadow(0 1px 1px rgba(15, 23, 42, .2));
}

.subscription-icon:is(.clash, .v2ray, .shadowsocks, .singbox, .hiddify) {
  background: linear-gradient(145deg, #fff 0%, #dbe5f0 100%) !important;
}

/* When a configured CDN/client logo fails, the shell marks its existing host
   and exposes a short deterministic badge instead of the browser's blank or
   broken-image glyph. This applies to app, subscription, payment and avatar
   icons without replacing content images such as notices or QR codes. */
[data-luck-icon-fallback] {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  color: #1e3a5f !important;
  background: linear-gradient(145deg, #f8fafc, #dbeafe) !important;
}

[data-luck-icon-fallback] > img {
  display: none !important;
}

[data-luck-icon-fallback]::after {
  content: attr(data-luck-icon-fallback);
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: inherit;
  font-family: "Be Vietnam Pro", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: clamp(10px, 35%, 15px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}

html:is(.dark, [data-theme="dark"]),
body:is(.dark, .dark-mode, [data-theme="dark"]) {
  --luck-icon-surface: #1e293b;
  --luck-icon-foreground: #e2e8f0;
}

html:is(.dark, [data-theme="dark"]) :where(.app-icon-wrapper, .payment-method-icon, .method-icon, [data-luck-icon-fallback]),
body:is(.dark, .dark-mode, [data-theme="dark"]) :where(.app-icon-wrapper, .payment-method-icon, .method-icon, [data-luck-icon-fallback]) {
  color: var(--luck-icon-foreground) !important;
  background: var(--luck-icon-surface) !important;
  box-shadow: inset 0 0 0 1px rgba(226, 232, 240, .24) !important;
}

@media (forced-colors: active) {
  :where(.platform-icon, .title-icon, .menu-icon, .nav-icon, .btn-icon, .input-icon, .dialog-icon, .stat-icon) {
    color: ButtonText !important;
    forced-color-adjust: auto;
  }
}

@media (max-width: 768px) {
  /* The former responsive rule removed the unpaid-order icon completely.
     Keep it compact instead, so icon visibility is consistent on phones. */
  .unpaid-order-alert .alert-icon {
    display: inline-grid !important;
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    place-items: center;
    align-self: flex-start;
  }
}

/* Node table: the upstream route requests /flags/{code}.svg, but the theme
   contains no /flags directory and emoji flags are platform-dependent. The
   asset patcher uses a packaged SVG sprite plus a visible ISO fallback.

   NDataTable's internal horizontal rail is conditional: when the component is
   allowed to shrink to the card width, its 1200px scroll-x contract does not
   reliably produce a usable rail. Keep the desktop table intrinsically wide
   and make the immediate card the single native horizontal scroll owner. This
   keeps translated headers readable without leaking overflow to the page. */
.servers-page[data-v-85145c70],
.servers-container[data-v-85145c70],
.servers-table-container[data-v-85145c70] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.servers-container[data-v-85145c70] {
  padding-inline: clamp(8px, 2vw, 24px) !important;
}

.servers-table-container[data-v-85145c70] {
  overflow-x: scroll !important;
  overflow-y: hidden !important;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(71, 85, 105, .72) rgba(226, 232, 240, .75);
  -webkit-overflow-scrolling: touch;
}

.servers-table-container[data-v-85145c70]::-webkit-scrollbar {
  height: 11px;
}

.servers-table-container[data-v-85145c70]::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(226, 232, 240, .75);
}

.servers-table-container[data-v-85145c70]::-webkit-scrollbar-thumb {
  min-width: 40px;
  border: 2px solid rgba(226, 232, 240, .75);
  border-radius: 999px;
  background: rgba(71, 85, 105, .72);
  background-clip: padding-box;
}

.servers-table-container[data-v-85145c70]::-webkit-scrollbar-thumb:hover {
  background: rgba(51, 65, 85, .9);
  background-clip: padding-box;
}

.compact-table.desktop-table[data-v-85145c70] {
  box-sizing: border-box !important;
  width: max(100%, 1200px) !important;
  min-width: 1200px !important;
  max-width: none !important;
}

.compact-table[data-v-85145c70] .n-data-table-wrapper {
  max-width: none !important;
  overflow-x: hidden !important;
}

.compact-table[data-v-85145c70] .n-data-table-base-table-body {
  max-width: 100% !important;
  overflow-x: hidden !important;
  overscroll-behavior-inline: contain;
}

/* The outer card owns horizontal movement. Suppress the conditional Naive UI
   rail so users never get two competing scrollbars for the same table. */
.compact-table[data-v-85145c70] .n-scrollbar-container {
  padding-bottom: 0 !important;
  overscroll-behavior-inline: contain;
}

.compact-table[data-v-85145c70] .n-scrollbar-rail--horizontal {
  display: none !important;
}

.compact-table[data-v-85145c70] .n-data-table-th,
.compact-table[data-v-85145c70] .n-data-table-td {
  min-width: max-content !important;
  padding: 10px 12px !important;
  vertical-align: middle !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.compact-table[data-v-85145c70] .n-data-table-td > div,
.compact-table[data-v-85145c70] .n-data-table-td > span {
  min-width: 0 !important;
  align-items: center !important;
}

.luck-node-flag {
  position: relative;
  display: inline-grid;
  flex: 0 0 32px;
  width: 32px;
  height: 24px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .45);
  border-radius: 5px;
  background: #f8fafc;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
  line-height: 1;
}

.luck-node-flag > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.luck-node-flag-code {
  position: absolute;
  right: 1px;
  bottom: 1px;
  display: grid;
  min-width: 13px;
  height: 8px;
  padding-inline: 1px;
  place-items: center;
  border-radius: 2px;
  color: #fff;
  background: rgba(15, 23, 42, .76);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 6px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .04em;
}

@media (max-width: 768px) {
  .servers-table-container[data-v-85145c70] {
    margin-inline: 0 !important;
    padding-bottom: 3px !important;
    border-radius: 10px !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    scrollbar-gutter: auto;
  }

  .compact-table.desktop-table[data-v-85145c70] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .compact-table[data-v-85145c70] .n-data-table-th,
  .compact-table[data-v-85145c70] .n-data-table-td {
    padding: 9px 10px !important;
    font-size: 12px !important;
  }
}