:root {
  --is-bg: #eef2f8;
  --is-surface: rgba(255, 255, 255, .72);
  --is-surface-strong: rgba(255, 255, 255, .9);
  --is-surface-soft: rgba(248, 250, 255, .64);
  --is-border: rgba(255, 255, 255, .88);
  --is-line: rgba(78, 91, 126, .1);
  --is-text: #141823;
  --is-muted: #687287;
  --is-blue: #3578f6;
  --is-cyan: #55d7f6;
  --is-violet: #7868f5;
  --is-shadow: 0 24px 70px rgba(43, 54, 86, .13);
  --is-shadow-soft: 0 12px 38px rgba(48, 58, 88, .09);
  --is-radius: 22px;
}

html,
body,
#app {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: Inter, "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont,
    "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html.is-portal #app *,
html.is-portal #app *::before,
html.is-portal #app *::after {
  box-sizing: border-box;
}

html.is-portal:not(.dark) body {
  color-scheme: light;
  color: var(--is-text);
  background:
    var(--is-login-bg),
    radial-gradient(circle at 8% -8%, rgba(99, 179, 255, .3), transparent 31rem),
    radial-gradient(circle at 95% 4%, rgba(163, 126, 255, .22), transparent 34rem),
    radial-gradient(circle at 72% 104%, rgba(91, 222, 239, .16), transparent 32rem),
    linear-gradient(135deg, #edf1f8 0%, #f7f8fc 48%, #e9edf5 100%);
  background-attachment: fixed;
  background-size: cover;
}

html.is-portal:not(.dark) body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, .28), transparent 42%),
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, .64), transparent 44rem);
}

::selection {
  color: #fff;
  background: color-mix(in srgb, var(--is-accent), transparent 20%);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(94, 107, 139, .3);
  background-clip: padding-box;
}

/* Refined portal loading screen */
#interstellar-boot {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  color: #171b26;
  background:
    radial-gradient(circle at 50% 42%, rgba(105, 155, 255, .2), transparent 24rem),
    linear-gradient(145deg, #f7f9fd, #e9eef7);
  transition: opacity .42s ease, visibility .42s ease;
}

html.is-marketing #interstellar-boot {
  color: #f8faff;
  background:
    radial-gradient(circle at 50% 44%, rgba(76, 100, 255, .23), transparent 24rem),
    #070812;
}

#interstellar-boot.is-ready {
  opacity: 0;
  visibility: hidden;
}

.is-boot-mark {
  position: relative;
  width: 86px;
  height: 86px;
  animation: is-float 3.2s ease-in-out infinite;
}

.is-boot-mark::after {
  position: absolute;
  inset: 25%;
  z-index: -1;
  content: "";
  border-radius: 50%;
  background: #7185ff;
  filter: blur(28px);
  opacity: .36;
}

.is-boot-mark img { display: block; width: 100%; height: 100%; }

.is-boot-copy {
  display: grid;
  justify-items: center;
  gap: 4px;
  letter-spacing: .025em;
}

.is-boot-copy strong { font-size: 22px; font-weight: 680; }
.is-boot-copy span { color: #7a8499; font-size: 13px; }
html.is-marketing .is-boot-copy span { color: #98a2c3; }

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

/* Xboard portal: Apple-inspired light glass system */
html.is-portal:not(.dark) .n-layout,
html.is-portal:not(.dark) .n-layout-scroll-container,
html.is-portal:not(.dark) .n-layout-content,
html.is-portal:not(.dark) .ant-layout,
html.is-portal:not(.dark) .ant-layout-content {
  color: var(--is-text) !important;
  background: transparent !important;
}

/* Xboard may restore its saved dark mode after the theme has loaded. These
   utility containers must remain light or they visually fight the glass layer. */
html.is-portal:not(.dark) #app,
html.is-portal:not(.dark) #app .n-config-provider,
html.is-portal:not(.dark) #app .flex-1.overflow-hidden,
html.is-portal:not(.dark) #app .cus-scroll-y {
  color: var(--is-text) !important;
  background-color: transparent !important;
}

html.is-portal:not(.dark) #app .cus-scroll-y {
  background:
    radial-gradient(circle at 94% 0, rgba(151, 125, 255, .11), transparent 28rem),
    radial-gradient(circle at 6% 0, rgba(86, 185, 255, .12), transparent 25rem) !important;
}

html.is-portal:not(.dark) #app .flex.items-center.bg-white {
  border-bottom: 1px solid rgba(255, 255, 255, .78) !important;
  color: var(--is-text) !important;
  background: rgba(255, 255, 255, .7) !important;
  box-shadow: 0 10px 38px rgba(51, 62, 94, .06);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
}

html.is-portal:not(.dark) #app .flex.items-center.bg-white * {
  color: inherit;
}

html.is-portal:not(.dark) .n-layout-sider,
html.is-portal:not(.dark) .ant-layout-sider {
  border-right: 1px solid rgba(255, 255, 255, .72) !important;
  background: rgba(244, 247, 252, .7) !important;
  box-shadow: 18px 0 54px rgba(50, 61, 92, .08);
  -webkit-backdrop-filter: blur(30px) saturate(145%);
  backdrop-filter: blur(30px) saturate(145%);
}

html.is-portal:not(.dark) .n-layout-header,
html.is-portal:not(.dark) .ant-layout-header {
  border-bottom: 1px solid rgba(255, 255, 255, .72) !important;
  color: var(--is-text) !important;
  background: rgba(255, 255, 255, .64) !important;
  box-shadow: 0 10px 40px rgba(56, 65, 94, .05);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
}

html.is-portal:not(.dark) .n-layout-header *,
html.is-portal:not(.dark) .ant-layout-header * {
  color: inherit;
}

html.is-portal:not(.dark) .n-card,
html.is-portal:not(.dark) .ant-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--is-border) !important;
  border-radius: var(--is-radius) !important;
  color: var(--is-text) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .46), transparent 52%),
    var(--is-surface) !important;
  box-shadow: var(--is-shadow);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
}

html.is-portal:not(.dark) .n-card::before,
html.is-portal:not(.dark) .ant-card::before {
  position: absolute;
  inset: 0 12% auto;
  height: 1px;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .98), transparent);
}

html.is-portal:not(.dark) .n-card-header,
html.is-portal:not(.dark) .n-card__content,
html.is-portal:not(.dark) .n-card__footer,
html.is-portal:not(.dark) .ant-card-head,
html.is-portal:not(.dark) .ant-card-body,
html.is-portal:not(.dark) .ant-card-actions {
  position: relative;
  color: var(--is-text) !important;
  background: transparent !important;
  border-color: var(--is-line) !important;
}

html.is-portal:not(.dark) .n-card-header__main,
html.is-portal:not(.dark) .n-card p,
html.is-portal:not(.dark) .n-card h1,
html.is-portal:not(.dark) .n-card h2,
html.is-portal:not(.dark) .n-card h3,
html.is-portal:not(.dark) .n-card h4,
html.is-portal:not(.dark) .ant-card-head-title,
html.is-portal:not(.dark) .ant-card p,
html.is-portal:not(.dark) .ant-card h1,
html.is-portal:not(.dark) .ant-card h2,
html.is-portal:not(.dark) .ant-card h3,
html.is-portal:not(.dark) .ant-card h4 {
  color: var(--is-text) !important;
}

html.is-portal:not(.dark) .n-card .text-white {
  color: var(--is-text) !important;
}

html.is-portal:not(.dark) .n-card .text-gray-500,
html.is-portal:not(.dark) .n-card .text-gray-500-500 {
  color: var(--is-muted) !important;
}

html.is-portal:not(.dark) .n-text-depth-3,
html.is-portal:not(.dark) .n-card small,
html.is-portal:not(.dark) .ant-typography-secondary {
  color: var(--is-muted) !important;
}

html.is-portal:not(.dark) .n-button,
html.is-portal:not(.dark) .ant-btn {
  min-height: 38px;
  border-radius: 12px !important;
  font-weight: 620 !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

html.is-portal:not(.dark) .n-button--default-type {
  color: #4f596d !important;
  background-color: transparent !important;
}

html.is-portal:not(.dark) .n-button--default-type::before {
  background: transparent !important;
}

html.is-portal:not(.dark) .n-button:hover,
html.is-portal:not(.dark) .ant-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.025);
}

html.is-portal:not(.dark) .n-button--primary-type,
html.is-portal:not(.dark) .n-button--info-type,
html.is-portal:not(.dark) .ant-btn-primary {
  border: 0 !important;
  color: #fff !important;
  background: linear-gradient(118deg, #347cf5, #6874f7 58%, #8269ef) !important;
  box-shadow: 0 10px 26px rgba(74, 105, 232, .28) !important;
}

html.is-portal:not(.dark) .n-button--primary-type::before,
html.is-portal:not(.dark) .n-button--info-type::before {
  background: linear-gradient(118deg, #347cf5, #6874f7 58%, #8269ef) !important;
}

html.is-portal:not(.dark) .n-button--primary-type *,
html.is-portal:not(.dark) .n-button--info-type *,
html.is-portal:not(.dark) .ant-btn-primary * {
  color: #fff !important;
}

html.is-portal:not(.dark) .n-input,
html.is-portal:not(.dark) .n-input-wrapper,
html.is-portal:not(.dark) .n-base-selection,
html.is-portal:not(.dark) .n-input-number,
html.is-portal:not(.dark) .ant-input,
html.is-portal:not(.dark) .ant-input-affix-wrapper,
html.is-portal:not(.dark) .ant-select-selector {
  border-radius: 12px !important;
  color: var(--is-text) !important;
  background: rgba(255, 255, 255, .7) !important;
  box-shadow: inset 0 0 0 1px rgba(84, 97, 131, .1) !important;
}

html.is-portal:not(.dark) .n-input {
  --n-border: 1px solid rgba(82, 96, 133, .1) !important;
  --n-border-hover: 1px solid rgba(61, 117, 238, .5) !important;
  --n-text-color: var(--is-text) !important;
  --n-placeholder-color: #98a1b3 !important;
}

html.is-portal:not(.dark) .n-input__input-el,
html.is-portal:not(.dark) .n-input__textarea-el {
  color: var(--is-text) !important;
  caret-color: #4e76ef !important;
}

html.is-portal:not(.dark) .n-menu,
html.is-portal:not(.dark) .ant-menu {
  color: var(--is-muted) !important;
  background: transparent !important;
}

html.is-portal:not(.dark) .n-menu-item-content,
html.is-portal:not(.dark) .ant-menu-item {
  margin: 4px 11px !important;
  border-radius: 13px !important;
  color: #687287 !important;
}

html.is-portal:not(.dark) .n-menu-item-content *,
html.is-portal:not(.dark) .ant-menu-item * {
  color: inherit !important;
}

html.is-portal:not(.dark) .n-menu-item-content:hover,
html.is-portal:not(.dark) .ant-menu-item:hover {
  color: #273247 !important;
  background: rgba(255, 255, 255, .66) !important;
}

html.is-portal:not(.dark) .n-menu-item-content--selected,
html.is-portal:not(.dark) .ant-menu-item-selected {
  color: #3269dc !important;
  background:
    linear-gradient(110deg, rgba(84, 144, 255, .15), rgba(126, 102, 247, .1)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(88, 126, 238, .11),
    0 8px 20px rgba(82, 104, 184, .08);
}

html.is-portal:not(.dark) .n-menu-item-content--selected::before {
  border: 0 !important;
  border-radius: 13px !important;
  background: transparent !important;
}

html.is-portal:not(.dark) .n-menu-item-group-title,
html.is-portal:not(.dark) .ant-menu-item-group-title {
  color: #939bad !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: .04em;
}

html.is-portal:not(.dark) .n-progress-graph-line-rail {
  background: rgba(79, 92, 124, .11) !important;
}

html.is-portal:not(.dark) .n-progress-graph-line-fill {
  background: linear-gradient(90deg, var(--is-cyan), #5f8df8, var(--is-violet)) !important;
  box-shadow: 0 0 14px rgba(87, 137, 245, .22);
}

html.is-portal:not(.dark) .n-tag,
html.is-portal:not(.dark) .ant-tag {
  border-radius: 999px !important;
}

html.is-portal:not(.dark) .n-modal,
html.is-portal:not(.dark) .n-drawer-content,
html.is-portal:not(.dark) .n-popover,
html.is-portal:not(.dark) .ant-modal-content,
html.is-portal:not(.dark) .ant-drawer-content,
html.is-portal:not(.dark) .ant-popover-inner {
  border: 1px solid rgba(255, 255, 255, .86) !important;
  border-radius: 20px !important;
  color: var(--is-text) !important;
  background: rgba(250, 252, 255, .88) !important;
  box-shadow: 0 28px 90px rgba(36, 45, 72, .2) !important;
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  backdrop-filter: blur(30px) saturate(150%);
}

html.is-portal:not(.dark) .n-data-table,
html.is-portal:not(.dark) .n-data-table-wrapper,
html.is-portal:not(.dark) .n-data-table-base-table-body,
html.is-portal:not(.dark) .ant-table,
html.is-portal:not(.dark) .ant-table-container,
html.is-portal:not(.dark) .ant-table-content {
  color: var(--is-text) !important;
  background: transparent !important;
}

html.is-portal:not(.dark) .n-data-table-th,
html.is-portal:not(.dark) .ant-table-thead > tr > th {
  color: #667085 !important;
  background: rgba(242, 245, 251, .76) !important;
}

html.is-portal:not(.dark) .n-data-table-td,
html.is-portal:not(.dark) .ant-table-tbody > tr > td {
  border-color: var(--is-line) !important;
  color: var(--is-text) !important;
  background: transparent !important;
}

html.is-portal:not(.dark) .n-tabs-tab,
html.is-portal:not(.dark) .ant-tabs-tab {
  color: #717b90 !important;
}

html.is-portal:not(.dark) .n-tabs-tab--active,
html.is-portal:not(.dark) .ant-tabs-tab-active {
  color: #3e6fdc !important;
}

html.is-portal:not(.dark) .n-tabs-bar,
html.is-portal:not(.dark) .ant-tabs-ink-bar {
  background: linear-gradient(90deg, #4297f5, #766cf0) !important;
}

html.is-portal:not(.dark) .n-list-item,
html.is-portal:not(.dark) .ant-list-item {
  border-color: var(--is-line) !important;
  color: var(--is-text) !important;
}

html.is-portal:not(.dark) .n-list {
  color: var(--is-text) !important;
  background: transparent !important;
}

html.is-portal:not(.dark) .n-list-item:hover {
  background: rgba(239, 243, 250, .72) !important;
}

html.is-portal:not(.dark) .n-alert {
  border-radius: 14px !important;
  color: #40506b !important;
  background: rgba(231, 239, 255, .75) !important;
}

html.is-portal:not(.dark) .n-radio-button {
  color: #687287 !important;
  background: rgba(255, 255, 255, .68) !important;
}

html.is-portal:not(.dark) .n-radio-button--checked {
  color: #fff !important;
  background: linear-gradient(115deg, #3c85f4, #7071ef) !important;
}

html.is-portal:not(.dark) a {
  text-underline-offset: 3px;
}

/* Dark mode keeps Xboard's native state and adds a restrained glass finish. */
html.is-portal.dark body {
  color-scheme: dark;
  color: #f2f4fa;
  background:
    radial-gradient(circle at 10% -6%, rgba(45, 123, 255, .18), transparent 32rem),
    radial-gradient(circle at 96% 3%, rgba(132, 74, 244, .16), transparent 34rem),
    linear-gradient(135deg, #090a0f, #11131b 52%, #0a0c12);
  background-attachment: fixed;
}

html.is-portal.dark body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  background: radial-gradient(circle at 50% 16%, rgba(255, 255, 255, .035), transparent 42rem);
}

html.is-portal.dark #interstellar-boot {
  color: #f7f8fc;
  background:
    radial-gradient(circle at 50% 43%, rgba(92, 108, 255, .2), transparent 24rem),
    #090a0f;
}

html.is-portal.dark #app,
html.is-portal.dark #app .n-config-provider,
html.is-portal.dark #app .flex-1.overflow-hidden {
  color: #f2f4fa !important;
  background-color: transparent !important;
}

html.is-portal.dark #app .cus-scroll-y {
  color: #f2f4fa !important;
  background:
    radial-gradient(circle at 94% 0, rgba(137, 88, 255, .08), transparent 30rem),
    radial-gradient(circle at 8% 0, rgba(63, 154, 255, .07), transparent 26rem),
    rgba(8, 9, 13, .72) !important;
}

html.is-portal.dark #app .flex.items-center.bg-white {
  border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
  color: #f2f4fa !important;
  background: rgba(17, 18, 24, .7) !important;
  box-shadow: 0 12px 42px rgba(0, 0, 0, .16);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
  backdrop-filter: blur(26px) saturate(140%);
}

html.is-portal.dark #app .flex.items-center.bg-white * {
  color: inherit;
}

html.is-portal.dark .n-layout-sider,
html.is-portal.dark .ant-layout-sider {
  border-right: 1px solid rgba(255, 255, 255, .07) !important;
  background: rgba(13, 15, 22, .78) !important;
  box-shadow: 18px 0 58px rgba(0, 0, 0, .18);
  -webkit-backdrop-filter: blur(28px) saturate(135%);
  backdrop-filter: blur(28px) saturate(135%);
}

html.is-portal.dark .n-card,
html.is-portal.dark .ant-card {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  border-radius: var(--is-radius) !important;
  color: #f4f6fb !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .035), transparent 50%),
    rgba(24, 26, 35, .76) !important;
  box-shadow: 0 24px 72px rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  backdrop-filter: blur(22px) saturate(130%);
}

html.is-portal.dark .n-card-header,
html.is-portal.dark .n-card__content,
html.is-portal.dark .n-card__footer,
html.is-portal.dark .n-card-header__main,
html.is-portal.dark .n-card p,
html.is-portal.dark .n-card h1,
html.is-portal.dark .n-card h2,
html.is-portal.dark .n-card h3,
html.is-portal.dark .n-card h4,
html.is-portal.dark .n-card .text-white {
  color: #f4f6fb !important;
  background: transparent !important;
}

html.is-portal.dark .n-card .text-gray-500,
html.is-portal.dark .n-card .text-gray-500-500,
html.is-portal.dark .n-text-depth-3 {
  color: #9aa4b8 !important;
}

html.is-portal.dark .n-menu-item-content {
  color: #9ba5b8 !important;
}

html.is-portal.dark .n-menu-item-content:hover {
  color: #f5f7fc !important;
  background: rgba(255, 255, 255, .055) !important;
}

html.is-portal.dark .n-menu-item-content--selected {
  color: #b7c9ff !important;
  background: linear-gradient(105deg, rgba(75, 119, 246, .22), rgba(123, 82, 237, .13)) !important;
  box-shadow: inset 0 0 0 1px rgba(122, 147, 255, .13);
}

html.is-portal.dark .n-menu-item-content *,
html.is-portal.dark .n-menu-item-content--selected * {
  color: inherit !important;
}

html.is-portal.dark .n-list,
html.is-portal.dark .n-list-item {
  border-color: rgba(255, 255, 255, .075) !important;
  color: #eef1f7 !important;
  background: transparent !important;
}

html.is-portal.dark .n-list-item:hover {
  background: rgba(255, 255, 255, .045) !important;
}

html.is-portal.dark .n-input,
html.is-portal.dark .n-input-wrapper,
html.is-portal.dark .n-base-selection,
html.is-portal.dark .n-input-number {
  border-radius: 12px !important;
  color: #f3f5fa !important;
  background: rgba(255, 255, 255, .055) !important;
}

html.is-portal.dark .n-data-table,
html.is-portal.dark .n-data-table-wrapper,
html.is-portal.dark .n-data-table-base-table-body {
  color: #edf0f7 !important;
  background: transparent !important;
}

html.is-portal.dark .n-data-table-th {
  color: #aeb6c7 !important;
  background: rgba(255, 255, 255, .045) !important;
}

html.is-portal.dark .n-data-table-td {
  border-color: rgba(255, 255, 255, .07) !important;
  color: #edf0f7 !important;
  background: transparent !important;
}

html.is-portal.dark .n-progress-graph-line-rail {
  background: rgba(255, 255, 255, .1) !important;
}

html.is-portal.dark .n-progress-graph-line-fill {
  background: linear-gradient(90deg, #55d8f6, #5689f7, #8669f2) !important;
}

/* Keep utility pages composed on wide desktop screens. Xboard's content
   column otherwise expands indefinitely when the sidebar is collapsed. */
@media (min-width: 1280px) {
  html.is-portal {
    --is-content-max: 1180px;
  }

  html.is-portal[data-portal-route="dashboard"] {
    --is-content-max: 1120px;
  }

  html.is-portal[data-portal-route="plan"],
  html.is-portal[data-portal-route="node"] {
    --is-content-max: 1040px;
  }

  html.is-portal[data-portal-route="profile"] {
    --is-content-max: 1100px;
  }

  html.is-portal #app .cus-scroll-y {
    align-items: center;
    padding: clamp(20px, 1.8vw, 30px) !important;
  }

  html.is-portal #app .cus-scroll-y > * {
    width: 100% !important;
    max-width: var(--is-content-max) !important;
    margin-right: auto;
    margin-left: auto;
    flex-shrink: 0;
  }

  html.is-portal #app .n-card-header {
    padding: 16px 22px !important;
  }

  html.is-portal #app .n-card__content {
    padding-right: 22px;
    padding-bottom: 18px;
    padding-left: 22px;
  }

  html.is-portal #app .n-data-table-th {
    height: 44px !important;
    padding: 9px 14px !important;
  }

  html.is-portal #app .n-data-table-td {
    height: 48px !important;
    padding: 10px 14px !important;
  }

  html.is-portal #app .n-data-table-empty {
    padding: 28px 0 !important;
  }

  html.is-portal #app .n-empty {
    transform: scale(.9);
  }

  /* Profile becomes a balanced settings dashboard instead of four stretched
     rows. Wallet spans the top, while security and preferences share a grid. */
  html.is-portal[data-portal-route="profile"] #app .cus-scroll-y {
    display: grid !important;
    grid-template-columns: minmax(0, 1.3fr) minmax(330px, .7fr);
    grid-template-rows: auto auto auto;
    gap: 18px;
    align-content: start;
  }

  html.is-portal[data-portal-route="profile"] #app .cus-scroll-y > .n-card {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    align-self: stretch;
  }

  html.is-portal[data-portal-route="profile"] #app .cus-scroll-y > .n-card:nth-of-type(1) {
    grid-column: 1 / -1;
  }

  html.is-portal[data-portal-route="profile"] #app .cus-scroll-y > .n-card:nth-of-type(2) {
    grid-column: 1;
    grid-row: 2 / 4;
  }

  html.is-portal[data-portal-route="profile"] #app .cus-scroll-y > .n-card:nth-of-type(3) {
    grid-column: 2;
    grid-row: 2;
  }

  html.is-portal[data-portal-route="profile"] #app .cus-scroll-y > .n-card:nth-of-type(4) {
    grid-column: 2;
    grid-row: 3;
  }

  html.is-portal[data-portal-route="profile"] #app .cus-scroll-y > .n-back-top-placeholder {
    display: none !important;
  }

  html.is-portal[data-portal-route="profile"] #app .n-input {
    width: 100% !important;
    max-width: 560px !important;
  }

  /* Plan cards contain very little information and should not become banners. */
  html.is-portal[data-portal-route="plan"] #app .n-card.n-card--hoverable {
    max-width: 470px !important;
  }

  /* Traffic should use the page scroll. The stock fixed-height card clips the
     month table and creates an unnecessary nested viewport. */
  html.is-portal[data-portal-route="traffic"] #app .cus-scroll-y > .n-card {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    flex: none !important;
  }

  html.is-portal[data-portal-route="traffic"] #app .n-card__content,
  html.is-portal[data-portal-route="traffic"] #app .n-data-table {
    height: auto !important;
    overflow: visible !important;
  }
}

@media (max-width: 760px) {
  :root {
    --is-radius: 16px;
    --is-mobile-gutter: 12px;
  }

  html.is-portal,
  html.is-portal body,
  html.is-portal #app {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  html.is-portal:not(.dark) body {
    background:
      radial-gradient(circle at 12% 0, rgba(99, 179, 255, .24), transparent 22rem),
      radial-gradient(circle at 95% 12%, rgba(163, 126, 255, .18), transparent 24rem),
      #eef2f8;
  }

  /* Mobile shell: keep the header usable and give every page the same
     breathing room, regardless of the utility classes emitted by Xboard. */
  html.is-portal #app .flex.items-center.bg-white {
    position: sticky;
    top: 0;
    z-index: 20;
    width: 100%;
    min-height: 56px !important;
    padding-right: var(--is-mobile-gutter) !important;
    padding-left: var(--is-mobile-gutter) !important;
  }

  html.is-portal #app .flex.items-center.bg-white > * {
    min-width: 0;
  }

  html.is-portal #app .cus-scroll-y {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: var(--is-mobile-gutter) var(--is-mobile-gutter)
      calc(24px + env(safe-area-inset-bottom)) !important;
    gap: 12px !important;
    overflow-x: hidden !important;
  }

  html.is-portal #app .cus-scroll-y > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    flex-shrink: 0;
  }

  html.is-portal #app .cus-scroll-y > .n-card {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  html.is-portal:not(.dark) .n-card,
  html.is-portal:not(.dark) .ant-card {
    box-shadow: 0 14px 40px rgba(45, 55, 86, .11);
  }

  html.is-portal .n-card,
  html.is-portal .ant-card {
    max-width: 100% !important;
    border-radius: var(--is-radius) !important;
  }

  html.is-portal #app .n-card-header {
    min-height: 52px !important;
    padding: 13px 15px !important;
  }

  html.is-portal #app .n-card-header__main {
    min-width: 0;
    font-size: 16px !important;
    line-height: 1.35;
  }

  html.is-portal #app .n-card__content {
    width: 100%;
    min-width: 0;
    padding: 15px !important;
  }

  html.is-portal #app .n-card__footer {
    padding: 13px 15px !important;
  }

  html.is-portal #app .n-button,
  html.is-portal #app .ant-btn {
    min-height: 40px;
  }

  html.is-portal #app .n-input,
  html.is-portal #app .n-base-selection,
  html.is-portal #app .n-input-number {
    max-width: 100% !important;
  }

  /* Inline desktop grids are the main cause of squeezed profile, order and
     subscription cards on phones. Top-level grids become a single column. */
  html.is-portal #app .cus-scroll-y > .grid,
  html.is-portal #app .cus-scroll-y > .n-grid,
  html.is-portal #app .n-card__content > .grid,
  html.is-portal #app .n-card__content > .n-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html.is-portal #app .n-card__content .flex.justify-between,
  html.is-portal #app .n-card__content .flex.justify-end {
    gap: 10px;
    flex-wrap: wrap;
  }

  /* Data tables retain readable columns and scroll inside their card instead
     of widening the entire application viewport. */
  html.is-portal #app .n-data-table,
  html.is-portal #app .n-data-table-wrapper,
  html.is-portal #app .n-data-table-base-table,
  html.is-portal #app .n-data-table-base-table-body,
  html.is-portal #app .ant-table-wrapper,
  html.is-portal #app .ant-table-container,
  html.is-portal #app .ant-table-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html.is-portal #app .n-data-table-base-table-body,
  html.is-portal #app .ant-table-content {
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  html.is-portal #app .n-data-table-table,
  html.is-portal #app .ant-table {
    min-width: 540px;
  }

  html.is-portal #app .n-data-table-th,
  html.is-portal #app .n-data-table-td {
    height: 44px !important;
    padding: 9px 11px !important;
    white-space: nowrap;
  }

  html.is-portal #app .n-data-table-empty {
    padding: 22px 0 !important;
  }

  html.is-portal #app .n-empty {
    transform: scale(.88);
  }

  html.is-portal #app .n-tabs-nav-scroll-content {
    min-width: max-content;
  }

  html.is-portal #app .n-tabs-nav-scroll-wrapper {
    overflow-x: auto;
    scrollbar-width: none;
  }

  html.is-portal #app .n-tabs-nav-scroll-wrapper::-webkit-scrollbar {
    display: none;
  }

  html.is-portal[data-portal-route="profile"] #app .cus-scroll-y,
  html.is-portal[data-portal-route="traffic"] #app .cus-scroll-y {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
  }

  html.is-portal[data-portal-route="profile"] #app .n-input {
    width: 100% !important;
  }

  html.is-portal[data-portal-route="traffic"] #app .cus-scroll-y > .n-card,
  html.is-portal[data-portal-route="invite"] #app .cus-scroll-y > .n-card {
    height: auto !important;
    overflow: visible !important;
    flex: none !important;
  }

  html.is-portal:not(.dark) .n-layout-header,
  html.is-portal:not(.dark) .ant-layout-header {
    -webkit-backdrop-filter: blur(20px) saturate(145%);
    backdrop-filter: blur(20px) saturate(145%);
  }

  html.is-portal.dark .n-card,
  html.is-portal.dark .ant-card {
    box-shadow: 0 16px 44px rgba(0, 0, 0, .24);
  }
}

@media (max-width: 420px) {
  html.is-portal #app .n-card-header {
    padding: 12px 14px !important;
  }

  html.is-portal #app .n-card__content {
    padding: 14px !important;
  }

  html.is-portal #app .n-data-table-table,
  html.is-portal #app .ant-table {
    min-width: 500px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-boot-mark { animation: none; }
  html.is-portal:not(.dark) .n-button,
  html.is-portal:not(.dark) .ant-btn { transition: none !important; }
}

/* The knowledge drawer renders Markdown inside a .markdown-body element. */
html.is-portal .n-drawer .markdown-body {
  max-width: 780px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

html.is-portal .n-drawer .markdown-body h2 {
  margin: 28px 0 12px;
  padding-bottom: 8px;
  font-size: 1.35em;
  line-height: 1.4;
}

html.is-portal .n-drawer .markdown-body p,
html.is-portal .n-drawer .markdown-body ol,
html.is-portal .n-drawer .markdown-body ul,
html.is-portal .n-drawer .markdown-body blockquote {
  margin: 0 0 16px;
}

html.is-portal .n-drawer .markdown-body ol {
  padding-left: 1.8em;
  list-style-type: decimal;
}

html.is-portal .n-drawer .markdown-body ul {
  padding-left: 1.8em;
  list-style-type: disc;
}

html.is-portal .n-drawer .markdown-body li {
  margin: 6px 0;
}

html.is-portal .n-drawer .markdown-body a {
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 2px;
}

html.is-portal.dark .n-drawer .markdown-body a {
  color: #93c5fd;
}