/* Public client action palette.
   Red is reserved for buying a plan; everyday actions use blue, pale blue,
   amber (destructive/reset) and green (success).  This file is intentionally
   independent from the main bundle so a palette change never replaces app JS. */
.client-auth-shell,
.client-app-shell {
  --client-accent: #3b82f6;
  --client-accent-dark: #2563eb;
  --client-accent-soft: #dbeafe;
  --monet-a: 207, 229, 255;
  --monet-b: 235, 221, 250;
  --monet-c: 213, 241, 232;
  --monet-d: 255, 232, 220;
  --monet-dark-a: 38, 61, 91;
  --monet-dark-b: 70, 51, 86;
  --monet-dark-c: 34, 73, 66;
  --monet-dark-d: 78, 56, 62;
  --monet-shadow: 76, 91, 138;
}

/* A transform on an ancestor changes the containing block of fixed children.
   The old production entrance animation kept translateY(0) after finishing,
   which made the wallpaper pseudo-element scroll with the whole document. */
.client-auth-shell.page-enter,
.client-app-shell.page-enter {
  animation: client-shell-fade 0.28s ease both !important;
  transform: none !important;
}

@keyframes client-shell-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* The deployed client bundle can predate the document-canvas wallpaper hook.
   Keep a self-contained fixed layer on the signed-in shell so the artwork is
   never lost when HTML/body theme classes are absent. */
.client-app-shell::before {
  display: block !important;
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(16, 8, 12, 0.26), rgba(18, 18, 23, 0.34)),
    var(--client-bg-image, url("/assets/client-anime-bg.jpg")) center / cover no-repeat,
    #14233a !important;
  background-attachment: fixed !important;
}

.client-app-shell--light::before {
  background:
    linear-gradient(180deg, rgba(226, 237, 250, 0.05), rgba(174, 194, 218, 0.18)),
    linear-gradient(180deg, rgba(255, 252, 248, 0.02), rgba(226, 233, 242, 0.07)),
    var(--client-bg-image, url("/assets/client-anime-bg-21.jpg")) center / cover no-repeat,
    #f6f7fb !important;
  background-attachment: fixed !important;
}

/* Avoid painting the same image twice after the newer document-level hook is
   present in a future bundle. */
html.client-background-active .client-app-shell::before {
  display: none !important;
}

/* Login and verification are ordinary actions, not purchase actions. */
.client-auth-card .auth-tabs button.active {
  color: #fff;
  background: var(--client-accent) !important;
}

.client-auth-card .primary.action-button {
  color: #fff;
  background: linear-gradient(135deg, var(--client-accent), var(--client-accent-dark)) !important;
  border-color: var(--client-accent) !important;
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.24);
}

.client-auth-card .email-code-row .secondary.action-button {
  color: #dbeafe;
  background: rgba(37, 99, 235, 0.18);
  border-color: rgba(96, 165, 250, 0.46);
}

.client-auth-card .email-code-row .secondary.action-button:not(:disabled):hover {
  background: rgba(37, 99, 235, 0.28);
  border-color: rgba(147, 197, 253, 0.72);
}

/* Everyday client controls. */
.client-hero-notice span,
.client-hero-dots span:first-child,
.client-node-toggle[aria-checked="true"] > i {
  background: var(--client-accent) !important;
}

.client-hero-arrow.active,
.client-app-shell .panel-title svg,
.client-bottom-nav button.active {
  color: var(--client-accent) !important;
}

.client-node-toggle[aria-checked="true"] {
  border-color: rgba(96, 165, 250, 0.7) !important;
}

.client-dark-panel .usage-bar span {
  background: linear-gradient(90deg, var(--client-accent), #38bdf8) !important;
}

.client-start-actions .primary.action-button {
  color: #fff;
  background: linear-gradient(135deg, var(--client-accent), var(--client-accent-dark)) !important;
  border-color: var(--client-accent) !important;
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.22);
}

.client-start-actions .secondary.action-button,
.client-guide-links--backup a,
.client-guide-links--backup a:nth-child(2) {
  color: #1e40af !important;
  background: var(--client-accent-soft) !important;
  border-color: #bfdbfe !important;
}

.client-start-actions .subscription-reset-button {
  color: #fde68a !important;
  background: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(251, 191, 36, 0.5) !important;
}

.client-import-tabs .active {
  border-color: var(--client-accent) !important;
}

.client-guide-card li::marker {
  color: var(--client-accent);
}

.client-guide-links a {
  color: #fff;
  background: rgba(37, 99, 235, 0.88) !important;
  border-color: rgba(147, 197, 253, 0.42) !important;
}

.client-guide-links a:nth-child(2) {
  color: #dbeafe;
  background: rgba(59, 130, 246, 0.13) !important;
}

/* Light theme keeps translucent surfaces and stronger button contrast. */
.client-auth-shell--light .client-auth-card .email-code-row .secondary.action-button {
  color: #1d4ed8;
  background: #eaf3ff;
  border-color: #93c5fd;
}

.client-auth-shell--light .client-auth-card .email-code-row .secondary.action-button:not(:disabled):hover {
  color: #1e40af;
  background: #dbeafe;
  border-color: #60a5fa;
}

.client-app-shell--light .theme-toggle-button {
  color: #1d4ed8 !important;
  background: rgba(239, 246, 255, 0.8) !important;
  border-color: rgba(147, 197, 253, 0.86) !important;
}

.client-app-shell--light .client-node-toggle[aria-checked="true"] {
  color: #1d4ed8 !important;
  border-color: #93c5fd !important;
}

.client-app-shell--light .client-guide-card-head span,
.client-app-shell--light .client-payment-method-title svg,
.client-app-shell--light .client-payment-method-group-title svg {
  color: #2563eb !important;
}

.client-app-shell--light .client-guide-links a,
.client-app-shell--light .client-start-actions .primary.action-button {
  color: #fff;
  background: rgba(37, 99, 235, 0.88) !important;
  border-color: rgba(147, 197, 253, 0.84) !important;
  box-shadow: 0 14px 32px rgba(37, 99, 235, 0.18);
}

.client-app-shell--light .client-start-actions .secondary.action-button,
.client-app-shell--light .client-guide-links--backup a,
.client-app-shell--light .client-guide-links--backup a:nth-child(2) {
  color: #1e40af !important;
  background: rgba(219, 234, 254, 0.82) !important;
}

.client-app-shell--light .client-start-actions .subscription-reset-button {
  color: #92400e !important;
  background: #fffbeb !important;
  border-color: #f59e0b !important;
}

.client-app-shell--light .client-payment-method-card:hover:not(:disabled),
.client-app-shell--light .client-payment-method-card:focus-visible {
  border-color: #60a5fa !important;
}

/* These are the only public red actions: open plans and buy a plan. */
.client-purchase-shortcut {
  color: #fff;
  background: linear-gradient(135deg, #c40b16, #990007) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 18px 40px rgba(153, 0, 7, 0.24) !important;
}

.client-plan-square .action-button {
  color: #fff !important;
  background: linear-gradient(135deg, #d41420, #a80008) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  box-shadow: 0 10px 22px rgba(127, 0, 7, 0.3);
}

/* ===== Monet-inspired glass palette =====
   The colour lives in the glass rather than on the text: mist blue, water-
   lily green, lilac and warm rose stay translucent so the anime artwork is
   still visible and the content remains easy to read. */
.client-auth-shell--light .client-auth-topbar,
.client-app-shell--light .client-app-topbar {
  background:
    linear-gradient(118deg, rgba(var(--monet-a), 0.5), rgba(var(--monet-b), 0.44) 46%, rgba(var(--monet-c), 0.44)) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 18px 46px rgba(var(--monet-shadow), 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
  -webkit-backdrop-filter: blur(7px) saturate(124%) !important;
  backdrop-filter: blur(7px) saturate(124%) !important;
}

.client-auth-shell--light .client-auth-card {
  background:
    linear-gradient(145deg, rgba(var(--monet-a), 0.54), rgba(var(--monet-b), 0.46) 45%, rgba(var(--monet-c), 0.48)) !important;
  border-color: rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 26px 72px rgba(var(--monet-shadow), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  -webkit-backdrop-filter: blur(8px) saturate(122%) !important;
  backdrop-filter: blur(8px) saturate(122%) !important;
}

.client-app-shell--light .client-dark-panel,
.client-app-shell--light .telegram-proxy-panel,
.client-app-shell--light .client-hero-notice {
  background:
    linear-gradient(135deg, rgba(var(--monet-a), 0.48), rgba(var(--monet-b), 0.42) 48%, rgba(var(--monet-c), 0.4)) !important;
  border-color: rgba(255, 255, 255, 0.68) !important;
  box-shadow: 0 18px 44px rgba(var(--monet-shadow), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
  -webkit-backdrop-filter: blur(7px) saturate(120%) !important;
  backdrop-filter: blur(7px) saturate(120%) !important;
}

/* Give neighbouring glass cards different Monet washes instead of repeating
   one grey-white panel across the whole page. */
.client-app-shell--light #client-subscription {
  background:
    linear-gradient(138deg, rgba(var(--monet-a), 0.5), rgba(var(--monet-b), 0.43) 52%, rgba(var(--monet-c), 0.4)) !important;
}

.client-app-shell--light #client-referrals {
  background:
    linear-gradient(138deg, rgba(var(--monet-b), 0.48), rgba(var(--monet-c), 0.42) 55%, rgba(var(--monet-d), 0.38)) !important;
}

.client-app-shell--light #client-guide {
  background:
    linear-gradient(138deg, rgba(var(--monet-c), 0.47), rgba(var(--monet-a), 0.42) 52%, rgba(var(--monet-d), 0.38)) !important;
}

.client-app-shell--light #client-nodes {
  background:
    linear-gradient(138deg, rgba(var(--monet-a), 0.48), rgba(var(--monet-b), 0.42) 52%, rgba(var(--monet-c), 0.38)) !important;
}

.client-app-shell--light #client-announcements,
.client-app-shell--light #client-admin {
  background:
    linear-gradient(138deg, rgba(var(--monet-d), 0.44), rgba(var(--monet-b), 0.4) 52%, rgba(var(--monet-a), 0.39)) !important;
}

.client-app-shell--light .telegram-proxy-panel {
  background:
    linear-gradient(138deg, rgba(var(--monet-a), 0.49), rgba(var(--monet-b), 0.42) 48%, rgba(var(--monet-c), 0.4)) !important;
}

.client-app-shell--light .client-referral-stats > div,
.client-app-shell--light .client-referral-row,
.client-app-shell--light .subscription-account-grid div,
.client-app-shell--light .telegram-proxy-card,
.client-app-shell--light .client-order,
.client-app-shell--light .client-node,
.client-app-shell--light .announcement-row,
.client-app-shell--light .client-guide-card,
.client-app-shell--light .copy-line {
  background: rgba(255, 255, 255, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.58) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 8px 22px rgba(var(--monet-shadow), 0.07);
  -webkit-backdrop-filter: blur(4px) saturate(114%) !important;
  backdrop-filter: blur(4px) saturate(114%) !important;
}

.client-app-shell--light .client-bottom-nav {
  background:
    linear-gradient(105deg, rgba(var(--monet-a), 0.64), rgba(var(--monet-b), 0.58) 48%, rgba(var(--monet-c), 0.6)) !important;
  border-color: rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 18px 44px rgba(var(--monet-shadow), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  -webkit-backdrop-filter: blur(8px) saturate(126%) !important;
  backdrop-filter: blur(8px) saturate(126%) !important;
}

/* Dark mode uses the same colours as moonlit reflections, not flat black. */
.client-auth-shell:not(.client-auth-shell--light) .client-auth-card,
.client-app-shell:not(.client-app-shell--light) .client-app-topbar,
.client-app-shell:not(.client-app-shell--light) .client-dark-panel,
.client-app-shell:not(.client-app-shell--light) .telegram-proxy-panel,
.client-app-shell:not(.client-app-shell--light) .client-hero-notice {
  background:
    linear-gradient(138deg, rgba(var(--monet-dark-a), 0.56), rgba(var(--monet-dark-b), 0.5) 48%, rgba(var(--monet-dark-c), 0.48)) !important;
  border-color: rgba(197, 216, 244, 0.2) !important;
  box-shadow: 0 22px 54px rgba(3, 8, 20, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.09) !important;
  -webkit-backdrop-filter: blur(8px) saturate(122%) !important;
  backdrop-filter: blur(8px) saturate(122%) !important;
}

.client-app-shell:not(.client-app-shell--light) .telegram-proxy-card,
.client-app-shell:not(.client-app-shell--light) .client-order,
.client-app-shell:not(.client-app-shell--light) .client-node,
.client-app-shell:not(.client-app-shell--light) .announcement-row,
.client-app-shell:not(.client-app-shell--light) .subscription-account-grid div,
.client-app-shell:not(.client-app-shell--light) .client-guide-card,
.client-app-shell:not(.client-app-shell--light) .copy-line {
  background: rgba(255, 255, 255, 0.075) !important;
  border-color: rgba(203, 213, 245, 0.15) !important;
  -webkit-backdrop-filter: blur(8px) saturate(116%) !important;
  backdrop-filter: blur(8px) saturate(116%) !important;
}

.client-app-shell:not(.client-app-shell--light) .client-bottom-nav {
  background:
    linear-gradient(110deg, rgba(var(--monet-dark-a), 0.7), rgba(var(--monet-dark-b), 0.66) 50%, rgba(var(--monet-dark-c), 0.66)) !important;
  border-color: rgba(203, 213, 245, 0.2) !important;
  -webkit-backdrop-filter: blur(9px) saturate(126%) !important;
  backdrop-filter: blur(9px) saturate(126%) !important;
}

/* Keep the payment window calm and readable while matching the palette. */
.client-purchase-confirm {
  background:
    linear-gradient(145deg, rgba(var(--monet-dark-a), 0.97), rgba(var(--monet-dark-b), 0.95) 52%, rgba(var(--monet-dark-c), 0.95)) !important;
  border-color: rgba(206, 220, 245, 0.2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(126%) !important;
  backdrop-filter: blur(16px) saturate(126%) !important;
}

@media (max-width: 760px) {
  .client-app-shell--light .client-dark-panel,
  .client-app-shell--light .telegram-proxy-panel,
  .client-app-shell--light .client-hero-notice {
    /* Keep text legible without hiding the artwork on a small display. */
    background:
      linear-gradient(135deg, rgba(var(--monet-a), 0.58), rgba(var(--monet-b), 0.52) 48%, rgba(var(--monet-c), 0.5)) !important;
    border-color: rgba(255, 255, 255, 0.72) !important;
    -webkit-backdrop-filter: blur(7px) saturate(118%) !important;
    backdrop-filter: blur(7px) saturate(118%) !important;
  }
}