:root,
html,
html.light,
html[data-theme="light"] {
  color-scheme: light !important;

  --background: 210 40% 98%;
  --foreground: 222.2 47.4% 11.2%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 47.4% 11.2%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 47.4% 11.2%;
  --primary: 20.5 90.2% 48.2%;
  --primary-foreground: 60 9.1% 97.8%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 20.5 90.2% 48.2%;

  --p: 49.12% 0.3096 275.75;
  --pc: 98% 0.01 275.75;
  --s: 69.71% 0.329 342.55;
  --sc: 98.71% 0.0106 342.55;
  --a: 76.76% 0.184 183.61;
  --ac: 15.352% 0.0368 183.61;
  --n: 32.1785% 0.02476 255.701624;
  --nc: 98% 0.004 250;
  --b1: 100% 0 0;
  --b2: 97.5% 0.003 247;
  --b3: 94% 0.006 247;
  --bc: 27.8078% 0.029596 256.847952;

  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(97.5% 0.003 247);
  --color-base-300: oklch(94% 0.006 247);
  --color-base-content: oklch(27.8078% 0.029596 256.847952);
  --color-primary: oklch(61% 0.22 35);
  --color-primary-content: oklch(98% 0.01 35);
  --color-secondary: oklch(69.71% 0.329 342.55);
  --color-secondary-content: oklch(98.71% 0.0106 342.55);
  --color-accent: oklch(76.76% 0.184 183.61);
  --color-accent-content: oklch(15.352% 0.0368 183.61);
  --color-neutral: oklch(32.1785% 0.02476 255.701624);
  --color-neutral-content: oklch(98% 0.004 250);
  --root-bg: var(--color-base-100);
  --page-grid-color: rgba(15, 23, 42, .075);
  --soft-panel: 20.5 90.2% 48.2%;
}

html.dark,
html[data-theme="dark"] {
  color-scheme: dark !important;

  --background: 0 0% 3.9%;
  --foreground: 0 0% 98%;
  --card: 0 0% 3.9%;
  --card-foreground: 0 0% 98%;
  --popover: 0 0% 3.9%;
  --popover-foreground: 0 0% 98%;
  --primary: 20.5 90.2% 48.2%;
  --primary-foreground: 60 9.1% 97.8%;
  --secondary: 12 6.5% 15.1%;
  --secondary-foreground: 60 9.1% 97.8%;
  --muted: 12 6.5% 15.1%;
  --muted-foreground: 24 5.4% 63.9%;
  --accent: 12 6.5% 15.1%;
  --accent-foreground: 60 9.1% 97.8%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 60 9.1% 97.8%;
  --border: 12 0% 14%;
  --input: 12 5% 11.5%;
  --ring: 20.5 90.2% 48.2%;

  --p: 65.69% 0.196 275.75;
  --pc: 13.138% 0.0392 275.75;
  --s: 74.8% 0.26 342.55;
  --sc: 14.96% 0.052 342.55;
  --a: 74.51% 0.167 183.61;
  --ac: 14.902% 0.0334 183.61;
  --n: 31.3815% 0.021108 254.139175;
  --nc: 74.6477% 0.0216 264.435964;
  --b1: 25.3267% 0.015896 252.417568;
  --b2: 23.2607% 0.013807 253.100675;
  --b3: 21.1484% 0.01165 254.087939;
  --bc: 74.6477% 0.0216 264.435964;

  --color-base-100: oklch(0% 0 0);
  --color-base-200: oklch(19% 0 0);
  --color-base-300: oklch(22% 0 0);
  --color-base-content: oklch(87.609% 0 0);
  --color-primary: oklch(61% 0.22 35);
  --color-primary-content: oklch(98% 0.01 35);
  --color-secondary: oklch(35% 0 0);
  --color-secondary-content: oklch(100% 0 0);
  --color-accent: oklch(35% 0 0);
  --color-accent-content: oklch(100% 0 0);
  --color-neutral: oklch(35% 0 0);
  --color-neutral-content: oklch(100% 0 0);
  --root-bg: var(--color-base-100);
  --page-grid-color: rgba(255, 255, 255, .06);
  --soft-panel: 20.5 90.2% 48.2%;
}

html,
body {
  background-color: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
}

.bg-background {
  background-color: hsl(var(--background)) !important;
  background-image:
    linear-gradient(var(--page-grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--page-grid-color) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
  background-position: -1px -1px !important;
}

.text-foreground {
  color: hsl(var(--foreground)) !important;
}

.bg-card,
.card,
.modal-box {
  background-color: hsl(var(--card)) !important;
  color: hsl(var(--card-foreground)) !important;
}

.bg-muted,
.bg-secondary,
.input,
.textarea,
.select {
  background-color: hsl(var(--muted)) !important;
  color: hsl(var(--foreground)) !important;
}

.border,
.border-border,
.input,
.textarea,
.select,
.card {
  border-color: hsl(var(--border)) !important;
}

.bg-gradient-to-r,
.bg-gradient-to-l,
.bg-gradient-to-t,
.bg-gradient-to-b,
.bg-gradient-to-br,
.bg-gradient-to-bl,
.bg-gradient-to-tr,
.bg-gradient-to-tl {
  background-image: none !important;
  background-color: hsl(var(--soft-panel) / .08) !important;
}

.from-primary\/20,
.from-primary\/10,
.to-primary\/5 {
  --tw-gradient-from: transparent !important;
  --tw-gradient-to: transparent !important;
  --tw-gradient-stops: transparent, transparent !important;
}

.bg-primary\/10.blur-3xl,
.bg-primary\/5.blur-3xl {
  display: none !important;
}

/* Mobile browser viewport/safe-area fix for the dashboard drawer.
   The logout button lives in the bottom account block of this drawer. */
@media (max-width: 767px) {
  html,
  body {
    min-height: 100%;
    overscroll-behavior-y: none;
  }

  .fixed.left-0[class*="w-[280px]"][class*="p-0"] {
    top: 0 !important;
    bottom: auto !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100svh !important;
    max-height: 100svh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  @supports (height: 100dvh) {
    .fixed.left-0[class*="w-[280px]"][class*="p-0"] {
      height: 100dvh !important;
      max-height: 100dvh !important;
    }
  }

  @supports (-webkit-touch-callout: none) {
    html,
    body {
      min-height: -webkit-fill-available;
    }

    .fixed.left-0[class*="w-[280px]"][class*="p-0"] {
      height: -webkit-fill-available !important;
      max-height: -webkit-fill-available !important;
    }
  }

  .fixed.left-0[class*="w-[280px]"][class*="p-0"] aside.flex {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
  }

  .fixed.left-0[class*="w-[280px]"][class*="p-0"] aside.flex > nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .5rem;
  }

  .fixed.left-0[class*="w-[280px]"][class*="p-0"] aside.flex > div:last-child {
    flex: 0 0 auto !important;
    padding-bottom: max(1rem, calc(1rem + env(safe-area-inset-bottom))) !important;
    background: hsl(var(--card) / .96);
  }

  @supports (height: 100dvh) {
    .fixed.left-0[class*="w-[280px]"][class*="p-0"] {
      height: 100dvh !important;
      max-height: 100dvh !important;
    }
  }
}

/* Dashboard motion layer: nonlinear, transform-only effects for the static Next export. */
:root {
  --motion-ease-out: cubic-bezier(.16, 1, .3, 1);
  --motion-ease-pop: cubic-bezier(.2, .9, .2, 1.18);
  --motion-ease-glide: cubic-bezier(.34, 1.56, .64, 1);
  --motion-card-shadow: 0 14px 40px hsl(var(--primary) / .10), 0 1px 0 hsl(var(--foreground) / .04);
}

html.dark,
html[data-theme="dark"] {
  --motion-card-shadow: 0 18px 48px hsl(var(--primary) / .16), 0 1px 0 hsl(var(--foreground) / .06);
}

@keyframes eb-page-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(.985);
    filter: blur(8px);
  }
  62% {
    opacity: 1;
    transform: translate3d(0, -2px, 0) scale(1.002);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes eb-card-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(.96);
  }
  70% {
    opacity: 1;
    transform: translate3d(0, -3px, 0) scale(1.008);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes eb-soft-shimmer {
  0% {
    transform: translate3d(-120%, 0, 0) skewX(-18deg);
    opacity: 0;
  }
  18% {
    opacity: .7;
  }
  46% {
    opacity: .22;
  }
  100% {
    transform: translate3d(140%, 0, 0) skewX(-18deg);
    opacity: 0;
  }
}

@keyframes eb-grid-drift {
  0% {
    background-position: -1px -1px, -1px -1px;
  }
  43% {
    background-position: 17px 9px, 7px 19px;
  }
  100% {
    background-position: 27px 27px, 27px 27px;
  }
}

@keyframes eb-icon-breathe {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    box-shadow: 0 0 0 0 hsl(var(--primary) / .18);
  }
  46% {
    transform: translate3d(0, -1px, 0) scale(1.045);
    box-shadow: 0 0 0 9px hsl(var(--primary) / 0);
  }
}

body {
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(115deg, hsl(var(--primary) / .075), transparent 28%, transparent 72%, hsl(var(--primary) / .055)),
    linear-gradient(180deg, transparent, hsl(var(--background)) 72%);
  opacity: .82;
}

.bg-background {
  animation: eb-grid-drift 18s var(--motion-ease-out) infinite alternate;
}

body > div:not([hidden]) {
  animation: eb-page-in .78s var(--motion-ease-out) both;
  transform-origin: 50% 18%;
}

.bg-card,
.card,
.modal-box,
.rounded-lg.border,
.rounded-xl.border,
.rounded-2xl.border {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform: translateZ(0);
  transition:
    transform .42s var(--motion-ease-pop),
    border-color .42s var(--motion-ease-out),
    box-shadow .42s var(--motion-ease-out),
    background-color .42s var(--motion-ease-out);
  will-change: transform;
}

.bg-card::after,
.card::after,
.modal-box::after,
.rounded-lg.border::after,
.rounded-xl.border::after,
.rounded-2xl.border::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  width: 42%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, hsl(var(--primary) / .115), transparent);
  opacity: 0;
  transform: translate3d(-120%, 0, 0) skewX(-18deg);
}

.p-4.md\:p-6 > .mb-6,
.p-4.md\:p-6 > .mb-6 + *,
.p-4.md\:p-6 > .grid,
.p-4.md\:p-6 > .grid + * {
  animation: eb-card-in .72s var(--motion-ease-glide) both;
}

.p-4.md\:p-6 > .mb-6 {
  animation-delay: .02s;
}

.p-4.md\:p-6 > .mb-6 + * {
  animation-delay: .11s;
}

.p-4.md\:p-6 > .grid {
  animation-delay: .2s;
}

.p-4.md\:p-6 > .grid + * {
  animation-delay: .29s;
}

.p-4.md\:p-6 > .grid > *:nth-child(1) {
  animation: eb-card-in .68s var(--motion-ease-glide) .22s both;
}

.p-4.md\:p-6 > .grid > *:nth-child(2) {
  animation: eb-card-in .68s var(--motion-ease-glide) .3s both;
}

.p-4.md\:p-6 > .grid > *:nth-child(3) {
  animation: eb-card-in .68s var(--motion-ease-glide) .38s both;
}

@media (min-width: 768px) {
  .p-4.md\:p-6 > .grid.md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch;
    width: 100%;
  }

  .p-4.md\:p-6 > .grid.md\:grid-cols-3 > * {
    display: flex;
    min-width: 0;
    width: 100%;
  }

  .p-4.md\:p-6 > .grid.md\:grid-cols-3 > * > .rounded-lg.border {
    min-width: 0;
    width: 100%;
  }
}

button,
a,
.btn,
[role="button"],
input,
.input {
  transition:
    transform .28s var(--motion-ease-pop),
    box-shadow .28s var(--motion-ease-out),
    background-color .28s var(--motion-ease-out),
    border-color .28s var(--motion-ease-out),
    color .28s var(--motion-ease-out);
}

.flex.h-10.w-10,
.flex.h-12.w-12 {
  animation: eb-icon-breathe 3.8s var(--motion-ease-out) infinite;
  transition:
    transform .36s var(--motion-ease-pop),
    box-shadow .36s var(--motion-ease-out),
    background-color .36s var(--motion-ease-out);
}

.relative.w-full.overflow-hidden.rounded-full.bg-secondary {
  height: .625rem !important;
  background: hsl(var(--muted)) !important;
  box-shadow: inset 0 0 0 1px hsl(var(--foreground) / .06);
}

.relative.w-full.overflow-hidden.rounded-full.bg-secondary > div {
  min-width: .35rem;
  border-radius: inherit;
  background: linear-gradient(90deg, hsl(var(--primary)), hsl(24 95% 58%)) !important;
  box-shadow: 0 0 0 1px hsl(var(--primary) / .12), 0 0 12px hsl(var(--primary) / .16);
  transition: none !important;
}

.eb-progress-readout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: .125rem 0 .375rem;
  font-size: .6875rem;
  line-height: 1rem;
  color: hsl(var(--muted-foreground));
}

.eb-progress-readout strong {
  color: hsl(var(--foreground));
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.eb-static-progress {
  position: relative;
  width: 100%;
  height: .625rem;
  overflow: hidden;
  border-radius: 999px;
  background: hsl(var(--muted));
  box-shadow: inset 0 0 0 1px hsl(var(--foreground) / .06);
}

.eb-static-progress-fill {
  height: 100%;
  min-width: .35rem;
  border-radius: inherit;
  background: linear-gradient(90deg, hsl(var(--primary)), hsl(24 95% 58%));
  box-shadow: 0 0 0 1px hsl(var(--primary) / .12), 0 0 12px hsl(var(--primary) / .16);
  transition: none;
}

.eb-expiry-progress {
  margin-bottom: .5rem;
}

.eb-connection-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid hsl(var(--border));
}

.eb-connection-item {
  min-width: 0;
  padding: .625rem .7rem;
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  background: hsl(var(--muted) / .48);
}

.eb-connection-item span {
  display: block;
  margin-bottom: .125rem;
  color: hsl(var(--muted-foreground));
  font-size: .6875rem;
  line-height: 1rem;
}

.eb-connection-item strong {
  display: block;
  overflow: hidden;
  color: hsl(var(--foreground));
  font-size: .8125rem;
  line-height: 1.15rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eb-connection-item.is-ok {
  border-color: hsl(142 71% 45% / .26);
  background: hsl(142 71% 45% / .08);
}

.eb-connection-item.is-ok strong {
  color: hsl(142 71% 35%);
}

.eb-connection-item.is-warning {
  border-color: hsl(0 84% 60% / .24);
  background: hsl(0 84% 60% / .08);
}

.eb-connection-item.is-warning strong {
  color: hsl(0 72% 50%);
}

@media (max-width: 420px) {
  .eb-connection-details {
    grid-template-columns: 1fr;
  }
}

.radial-progress {
  transition: transform .45s var(--motion-ease-pop), filter .45s var(--motion-ease-out);
}

aside.flex,
.fixed.left-0[class*="w-[280px]"][class*="p-0"] {
  animation: eb-page-in .68s var(--motion-ease-out) both;
}

aside nav a,
aside nav button,
aside .menu a {
  transform-origin: left center;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }

  .bg-background {
    animation: none !important;
  }
}

/* Easyboy visible logo and login avatar override (20260706-live2) */
.easyboy-brand-wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  gap: .5rem !important;
}
.easyboy-brand-logo {
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  border-radius: .5rem !important;
  object-fit: cover !important;
  display: inline-block !important;
  vertical-align: middle !important;
}
.easyboy-user-avatar {
  display: block !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  min-width: 2.25rem !important;
  min-height: 2.25rem !important;
  border-radius: 9999px !important;
  object-fit: cover !important;
  flex: 0 0 2.25rem !important;
  background: hsl(var(--muted));
}

/* remove duplicated brand logos from cached dashboard shells */
.easyboy-brand-logo,
.easyboy-brand-wrap > .easyboy-brand-logo {
  display: none !important;
}

/* Site background override (20260706-bgfast1): use a compact preloaded WebP for faster first paint. */
:root {
  --easyboy-page-bg: url("/assets/background-20260707-user2.webp?v=20260707-bg2");
  --easyboy-bg-blur: 4px;
  --easyboy-bg-scale: 1;
  --easyboy-bg-brightness: 100%;
  --easyboy-bg-contrast: 100%;
  --easyboy-bg-saturate: 100%;
  --easyboy-bg-pos-x: 50%;
  --easyboy-bg-pos-y: 50%;
}

html[data-easyboy-bg="login"] {
  --easyboy-bg-blur: 4px;
  --easyboy-bg-scale: 1;
  --easyboy-bg-brightness: 100%;
  --easyboy-bg-contrast: 100%;
  --easyboy-bg-saturate: 100%;
  --easyboy-bg-pos-x: 50%;
  --easyboy-bg-pos-y: 50%;
}

html[data-easyboy-bg="app"] {
  --easyboy-bg-blur: 4px;
  --easyboy-bg-scale: 1;
  --easyboy-bg-brightness: 100%;
  --easyboy-bg-contrast: 100%;
  --easyboy-bg-saturate: 100%;
  --easyboy-bg-pos-x: 50%;
  --easyboy-bg-pos-y: 50%;
}

html,
body {
  min-height: 100%;
  background-color: #fff !important;
}

body {
  background-image: var(--easyboy-page-bg) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}

.bg-background {
  background-color: transparent !important;
  background-image: none !important;
}

.bg-background\/50 {
  background-color: hsl(var(--background) / .68) !important;
  backdrop-filter: blur(10px);
}

.bg-card,
.bg-card\/50,
.bg-card\/80,
.card,
.modal-box {
  background-color: hsl(var(--card) / .86) !important;
  backdrop-filter: blur(14px);
}

/* Brand icon and tighter EasyboyCloud wordmark spacing (20260706-brandico1). */
.easyboy-brand-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  white-space: nowrap;
}

.easyboy-brand-wrap::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 6px;
  border-radius: 6px;
  background: url("/bcobg-7w4xi-001.ico?v=20260706-brandico1") center / cover no-repeat;
  flex: 0 0 24px;
}

.easyboy-brand-wrap .text-primary {
  margin-left: 0 !important;
}

/* Title wordmark image (20260707-cachefix3). */
.easyboy-title-logo {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

.easyboy-title-logo--nav {
  height: 30px !important;
  max-width: 180px !important;
}

.easyboy-title-logo--mobile {
  height: 28px !important;
  max-width: 170px !important;
}

.easyboy-title-logo--login {
  width: min(320px, 86%) !important;
  height: auto !important;
  margin: 0 auto !important;
}

@media (max-width: 767px) {
  .easyboy-title-logo--nav,
  .easyboy-title-logo--mobile {
    height: 26px !important;
    max-width: 150px !important;
  }

  .easyboy-title-logo--login {
    width: min(280px, 88%) !important;
  }
}

/* Slightly soften the page background without affecting page content (20260706-bgsoft0). */
body {
  background-image: none !important;
  background-color: transparent !important;
  isolation: isolate;
}

body::before {
  content: "";
  position: fixed;
  inset: -48px;
  z-index: -1;
  pointer-events: none;
  background-image: var(--easyboy-page-bg) !important;
  background-position: var(--easyboy-bg-pos-x) var(--easyboy-bg-pos-y) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  transform-origin: center center;
  transform: scale(var(--easyboy-bg-scale));
  filter:
    blur(var(--easyboy-bg-blur))
    brightness(var(--easyboy-bg-brightness))
    contrast(var(--easyboy-bg-contrast))
    saturate(var(--easyboy-bg-saturate));
}

/* Set homepage translucent panels to 90% opacity (20260706-trans90). */
.bg-background\/50 {
  background-color: hsl(var(--background) / .90) !important;
}

.bg-card,
.bg-card\/50,
.bg-card\/80,
.card,
.modal-box,
.rounded-lg.border,
.rounded-xl.border,
.rounded-2xl.border {
  background-color: hsl(var(--card) / .90) !important;
  box-shadow:
    0 18px 42px hsl(222.2 47.4% 11.2% / .14),
    0 2px 8px hsl(222.2 47.4% 11.2% / .08) !important;
}

/* Final client import logo sizing from logoDebug tuning (20260706-logo-final1). */
button img[src^="/assets/client-icons/"],
a img[src^="/assets/client-icons/"] {
  width: 29px !important;
  height: 29px !important;
  min-width: 29px !important;
  min-height: 29px !important;
  max-width: 29px !important;
  max-height: 29px !important;
  flex: 0 0 29px !important;
  margin-right: 0 !important;
  padding: 0 !important;
  align-self: center !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  background: transparent !important;
}

button:has(img[src^="/assets/client-icons/"]),
a:has(img[src^="/assets/client-icons/"]) {
  min-height: 43px !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}


/* easyboy-hide-scrollbars-live: hide native scrollbars while preserving scroll */
html,
body,
* {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

button[aria-controls="subscription-qrcode"] {
  display: none !important;
}

#subscription-qrcode {
  position: relative !important;
  overflow: hidden !important;
}

#subscription-qrcode::after {
  content: "悬停查看二维码";
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border-radius: inherit;
  background:
    linear-gradient(135deg, hsl(var(--card) / .94), hsl(var(--background) / .9)),
    radial-gradient(circle at 50% 40%, hsl(var(--primary) / .18), transparent 58%);
  color: hsl(var(--foreground));
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  letter-spacing: 0;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}

#subscription-qrcode:hover::after,
#subscription-qrcode:focus-within::after,
#subscription-qrcode:active::after {
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 1180px), (pointer: coarse), (hover: none) {
  button:has(img[src^="/assets/client-icons/"]),
  a:has(img[src^="/assets/client-icons/"]) {
    display: grid !important;
    grid-template-columns: 90px minmax(0, 1fr) 62px !important;
    align-items: center !important;
    justify-items: center !important;
    text-align: center !important;
    column-gap: 0 !important;
    min-height: 42px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  button img[src^="/assets/client-icons/"],
  a img[src^="/assets/client-icons/"] {
    position: static !important;
    grid-column: 1 !important;
    justify-self: start !important;
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    min-height: 31px !important;
    max-width: 31px !important;
    max-height: 31px !important;
    transform: translateX(8px) !important;
    margin: 0 !important;
  }

  div:has(> button[aria-controls="subscription-qrcode"]),
  div:has(> #subscription-qrcode),
  #subscription-qrcode {
    display: none !important;
  }

  #subscription-qrcode::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}