/* Glassmorphism Theme (portal)
   Goals:
   - One consistent "glass" system: background light, translucent surfaces, subtle highlight, no heavy shadows.
   - Use Naive UI CSS vars where possible to avoid chasing internal DOM changes.
*/

:root {
  /* Brand (keep system green) */
  --brand-color: #18a058 !important;
  --brand-color-hover: #36ad6a !important;
  --brand-color-pressed: #0c7a43 !important;

  /* Base tokens used by app CSS */
  --page-bg: transparent !important;
  --card-bg: transparent !important;
  --text-color: rgba(15, 23, 42, 0.92) !important;
  --text-color-strong: rgba(15, 23, 42, 0.96) !important;
  --muted-text-color: rgba(15, 23, 42, 0.62) !important;
  --border-color: rgba(255, 255, 255, 0.42) !important;
  --radius: 18px !important;

  /* Selection / tags */
  --selection-bg: rgba(24, 160, 88, 0.12) !important;
  --selection-bg-hover: rgba(24, 160, 88, 0.16) !important;
  --selection-border: rgba(24, 160, 88, 0.42) !important;

  /* Glass system */
  --glass-blur: 16px;
  --glass-sat: 160%;
  --glass-1: rgba(255, 255, 255, 0.26); /* main surfaces */
  --glass-2: rgba(255, 255, 255, 0.34); /* hover/raised */
  --glass-3: rgba(255, 255, 255, 0.18); /* subtle blocks inside cards */
  --glass-border-1: rgba(255, 255, 255, 0.46);
  --glass-border-2: rgba(255, 255, 255, 0.62);
  --glass-highlight: rgba(255, 255, 255, 0.55);
  --glass-shadow: none;

  /* Muted blocks (used by some pages) */
  --surface-muted: rgba(255, 255, 255, 0.18) !important;
  --surface-muted-hover: rgba(255, 255, 255, 0.24) !important;
}

/* Force light even if browser/OS prefers dark (theme-level; avoids surprises in theme dev). */
html {
  color-scheme: light;
}

html,
body {
  height: 100%;
}

body {
  color: var(--text-color) !important;
  background:
    radial-gradient(900px 700px at 10% 8%, rgba(24, 160, 88, 0.18), transparent 58%),
    radial-gradient(900px 700px at 90% 10%, rgba(56, 189, 248, 0.18), transparent 58%),
    radial-gradient(1000px 800px at 45% 96%, rgba(236, 72, 153, 0.10), transparent 62%),
    linear-gradient(180deg, #f8fafc 0%, #eef2ff 46%, #f8fafc 100%) !important;
  background-attachment: fixed;
}

/* Subtle noise/texture to avoid "flat blur" look (kept very light). */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.11;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.20) 2px, rgba(255, 255, 255, 0.20) 3px),
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(15, 23, 42, 0.05) 2px, rgba(15, 23, 42, 0.05) 3px);
}

#app {
  position: relative;
  z-index: 1;
}

/* Let the global background shine through. */
.main-layout,
.content,
.n-layout,
.n-layout-scroll-container {
  background: transparent !important;
}

/* ===== Layout (header / sider) ===== */
.logo {
  background: transparent !important;
}

.n-layout-header {
  position: relative;
  z-index: 5;
  /* Make header/sider/card share the same "glass" density to reduce visible layering/seams. */
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.18)) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

.n-layout-sider {
  position: relative;
  z-index: 4;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.18)) !important;
  border-right: 0 !important; /* avoid top-left border "cross" */
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

/* Some NaiveUI layout pieces may paint their own background; force transparent so only body + glass surfaces show. */
.n-layout-content {
  background: transparent !important;
}

/* Naive internal containers may paint their own background; keep transparent. */
.n-layout-sider-scroll-container {
  background: transparent !important;
}

/* Sidebar brand block: align with header height to remove the "step" on top. */
.brand {
  height: 50px !important;
}

/* Portal / 购买授权：手机端产品卡片改为两列（仅主题覆盖，不改系统源码）。 */
@media (max-width: 768px) {
  .shop-container .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .shop-container .product-item {
    padding: 12px !important;
  }

  .shop-container .product-header {
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: flex-start !important;
  }

  .shop-container .product-name {
    display: block !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 14px !important;
  }

  .shop-container .price-amount {
    font-size: 22px !important;
  }

  .shop-container .product-desc {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

/* ===== Menu (glass-only selected state; no theme color fill) ===== */
.n-menu {
  background: transparent !important;
}

.n-menu-item-content {
  border-radius: 14px;
  margin: 4px 10px;
  background: transparent !important;
}

.n-menu-item-content::before,
.n-menu-item-content::after {
  background: transparent !important;
}

.n-menu-item-content:hover {
  background: rgba(255, 255, 255, 0.18) !important;
}

.n-menu-item-content--selected {
  background: rgba(255, 255, 255, 0.24) !important;
  border: 1px solid rgba(255, 255, 255, 0.56) !important;
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 8px)) saturate(var(--glass-sat));
  backdrop-filter: blur(calc(var(--glass-blur) - 8px)) saturate(var(--glass-sat));
}

.n-menu-item-content--selected :is(.n-menu-item-content__icon, .n-menu-item-content__text) {
  color: var(--text-color-strong) !important;
  font-weight: 600;
}

.n-menu-item-content--selected:hover {
  background: rgba(255, 255, 255, 0.28) !important;
}

/* ===== Common glass surfaces ===== */
.n-card,
.n-modal,
.n-drawer,
.n-popover,
.n-message,
.n-notification,
.n-dropdown {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

.n-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.18)) !important;
  border: 1px solid var(--glass-border-1) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--glass-shadow) !important; /* user prefers no outer shadows */
}

/* ===== Modal / dialog readability (MyLicenses: "更换授权") =====
   The glass dialog is on top of already-glass cards; make it a bit more opaque to keep labels/disabled fields readable. */
.n-modal-mask {
  background-color: rgba(15, 23, 42, 0.22) !important;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.n-dialog {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.60), rgba(255, 255, 255, 0.42)) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: calc(var(--radius) + 2px) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18) !important;
}

.n-dialog :is(.n-dialog__title, .n-dialog__icon, .n-dialog__close) {
  color: var(--text-color-strong) !important;
}

.n-dialog .n-form-item-label {
  color: rgba(15, 23, 42, 0.72) !important;
}

.n-dialog :is(.n-input, .n-base-selection, .n-input-number) {
  --n-color: rgba(255, 255, 255, 0.28) !important;
  --n-color-focus: rgba(255, 255, 255, 0.28) !important;
  --n-placeholder-color: rgba(15, 23, 42, 0.48) !important;
  --n-border: 1px solid rgba(255, 255, 255, 0.66) !important;
  --n-border-hover: 1px solid rgba(255, 255, 255, 0.78) !important;
}

.n-dialog .n-input--disabled {
  opacity: 1 !important;
  --n-text-color-disabled: rgba(15, 23, 42, 0.62) !important;
  --n-placeholder-color: rgba(15, 23, 42, 0.42) !important;
}

/* ===== Inputs / selects ===== */
.n-input,
.n-base-selection,
.n-input-number,
.n-date-picker,
.n-time-picker {
  --n-color: rgba(255, 255, 255, 0.18) !important;
  --n-color-focus: rgba(255, 255, 255, 0.18) !important;
  --n-text-color: var(--text-color) !important;
  --n-placeholder-color: rgba(15, 23, 42, 0.38) !important;
  --n-caret-color: var(--brand-color) !important;

  --n-border: 1px solid rgba(255, 255, 255, 0.52) !important;
  --n-border-hover: 1px solid rgba(255, 255, 255, 0.66) !important;
  --n-border-focus: 1px solid rgba(24, 160, 88, 0.55) !important;

  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.52) !important;
  border-radius: 14px !important;
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 6px)) saturate(var(--glass-sat));
  backdrop-filter: blur(calc(var(--glass-blur) - 6px)) saturate(var(--glass-sat));
}

/* Clear inner solid backgrounds (Naive internal structure varies by component). */
.n-input :is(.n-input__input-el, .n-input__textarea-el, .n-input__textarea, .n-input-wrapper),
.n-input textarea,
.n-input-number :is(.n-input__input-el, .n-input-wrapper),
.n-base-selection :is(.n-base-selection-label, .n-base-selection-input, .n-base-selection-tags, .n-base-selection-tag-wrapper) {
  background: transparent !important;
}

.n-input:focus-within,
.n-base-selection:focus-within,
.n-input-number:focus-within {
  box-shadow: 0 0 0 3px rgba(24, 160, 88, 0.14) !important;
}

/* ===== Select / dropdown panels ===== */
/* NSelect menu (the dropdown panel you marked in red). */
.n-base-select-menu {
  --n-color: rgba(255, 255, 255, 0.26) !important;
  --n-option-text-color: var(--text-color) !important;
  --n-option-text-color-active: rgba(12, 122, 67, 0.98) !important;
  --n-option-text-color-pressed: var(--text-color-strong) !important;
  --n-option-check-color: var(--brand-color) !important;

  --n-option-color-pending: rgba(255, 255, 255, 0.20) !important;
  --n-option-color-active: rgba(24, 160, 88, 0.12) !important;
  --n-option-color-active-pending: rgba(24, 160, 88, 0.18) !important;

  --n-action-divider-color: rgba(255, 255, 255, 0.26) !important;
  --n-action-text-color: var(--muted-text-color) !important;
  --n-group-header-text-color: var(--muted-text-color) !important;

  background: linear-gradient(135deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.18)) !important;
  border: 1px solid rgba(255, 255, 255, 0.52) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 4px)) saturate(var(--glass-sat));
  backdrop-filter: blur(calc(var(--glass-blur) - 4px)) saturate(var(--glass-sat));
}

/* NPopover wrapper used by select/dropdown/tooltip. */
.n-popover:not(.n-popover--raw) {
  --n-color: rgba(255, 255, 255, 0.26) !important;
  --n-text-color: var(--text-color) !important;
  --n-divider-color: rgba(255, 255, 255, 0.26) !important;
  --n-box-shadow: none !important;
  border: 1px solid rgba(255, 255, 255, 0.48) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
}

.n-dropdown-menu {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.18)) !important;
  border: 1px solid rgba(255, 255, 255, 0.52) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 4px)) saturate(var(--glass-sat));
  backdrop-filter: blur(calc(var(--glass-blur) - 4px)) saturate(var(--glass-sat));
}

/* ===== Buttons ===== */
.n-button--tertiary-type {
  --n-color: rgba(255, 255, 255, 0.18) !important;
  --n-color-hover: rgba(255, 255, 255, 0.24) !important;
  --n-color-pressed: rgba(255, 255, 255, 0.28) !important;
  --n-color-focus: rgba(255, 255, 255, 0.24) !important;
  --n-border: 1px solid rgba(255, 255, 255, 0.50) !important;
  --n-border-hover: 1px solid rgba(255, 255, 255, 0.68) !important;
  --n-border-pressed: 1px solid rgba(255, 255, 255, 0.76) !important;
  --n-text-color: var(--text-color) !important;
}

.n-button--primary-type {
  --n-color: rgba(24, 160, 88, 0.78) !important;
  --n-color-hover: rgba(24, 160, 88, 0.86) !important;
  --n-color-pressed: rgba(24, 160, 88, 0.92) !important;
  --n-color-focus: rgba(24, 160, 88, 0.86) !important;
  --n-border: 1px solid rgba(24, 160, 88, 0.34) !important;
  --n-border-hover: 1px solid rgba(24, 160, 88, 0.44) !important;
  --n-border-pressed: 1px solid rgba(24, 160, 88, 0.52) !important;
  --n-text-color: #ffffff !important;
  --n-text-color-hover: #ffffff !important;
  --n-text-color-pressed: #ffffff !important;
  --n-text-color-focus: #ffffff !important;
}

/* Renew button on "我的授权": `<n-button tertiary type="primary" ...>` */
.n-button--primary-type.n-button--tertiary-type {
  --n-color: rgba(24, 160, 88, 0.10) !important;
  --n-color-hover: rgba(24, 160, 88, 0.14) !important;
  --n-color-pressed: rgba(24, 160, 88, 0.18) !important;
  --n-color-focus: rgba(24, 160, 88, 0.14) !important;

  --n-border: 1px solid rgba(24, 160, 88, 0.32) !important;
  --n-border-hover: 1px solid rgba(24, 160, 88, 0.42) !important;
  --n-border-pressed: 1px solid rgba(24, 160, 88, 0.50) !important;
  --n-border-focus: 1px solid rgba(24, 160, 88, 0.42) !important;

  --n-text-color: rgba(12, 122, 67, 0.98) !important;
  --n-text-color-hover: rgba(12, 122, 67, 0.98) !important;
  --n-text-color-pressed: rgba(12, 122, 67, 0.98) !important;
  --n-text-color-focus: rgba(12, 122, 67, 0.98) !important;
}

.n-button--primary-type.n-button--tertiary-type :is(.n-button__content, .n-button__icon, .n-icon) {
  color: rgba(12, 122, 67, 0.98) !important;
}

/* Naive UI `secondary` is a boolean prop -> class `.n-button--secondary`. */
.n-button--secondary {
  /* Use Naive vars instead of hard background, so `type + secondary` can still control color. */
  --n-color: rgba(255, 255, 255, 0.18) !important;
  --n-color-hover: rgba(255, 255, 255, 0.24) !important;
  --n-color-pressed: rgba(255, 255, 255, 0.28) !important;
  --n-color-focus: rgba(255, 255, 255, 0.24) !important;

  --n-border: 1px solid rgba(255, 255, 255, 0.52) !important;
  --n-border-hover: 1px solid rgba(255, 255, 255, 0.68) !important;
  --n-border-pressed: 1px solid rgba(255, 255, 255, 0.76) !important;
  --n-border-focus: 1px solid rgba(255, 255, 255, 0.68) !important;

  --n-text-color: var(--text-color) !important;
  --n-text-color-hover: var(--text-color) !important;
  --n-text-color-pressed: var(--text-color) !important;
  --n-text-color-focus: var(--text-color) !important;
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 10px)) saturate(var(--glass-sat));
  backdrop-filter: blur(calc(var(--glass-blur) - 10px)) saturate(var(--glass-sat));
}

/* Bind QQ quick login: `<n-button type="primary" secondary ...>` */
.n-button--secondary.n-button--primary-type {
  --n-color: rgba(24, 160, 88, 0.62) !important;
  --n-color-hover: rgba(24, 160, 88, 0.72) !important;
  --n-color-pressed: rgba(24, 160, 88, 0.80) !important;
  --n-color-focus: rgba(24, 160, 88, 0.72) !important;

  --n-border: 1px solid rgba(24, 160, 88, 0.34) !important;
  --n-border-hover: 1px solid rgba(24, 160, 88, 0.44) !important;
  --n-border-pressed: 1px solid rgba(24, 160, 88, 0.52) !important;
  --n-border-focus: 1px solid rgba(24, 160, 88, 0.44) !important;

  --n-text-color: #ffffff !important;
  --n-text-color-hover: #ffffff !important;
  --n-text-color-pressed: #ffffff !important;
  --n-text-color-focus: #ffffff !important;
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

.n-button.n-button--secondary.n-button--primary-type,
.n-button.n-button--primary-type.n-button--secondary {
  /* Force paint, even if Naive injects inline vars that don't get overridden as expected. */
  background-color: rgba(24, 160, 88, 0.62) !important;
  border: 1px solid rgba(24, 160, 88, 0.34) !important;
}

.n-button.n-button--secondary.n-button--primary-type:hover,
.n-button.n-button--primary-type.n-button--secondary:hover {
  background-color: rgba(24, 160, 88, 0.72) !important;
  border-color: rgba(24, 160, 88, 0.44) !important;
}

.n-button--secondary.n-button--primary-type :is(.n-button__content, .n-button__icon, .n-icon) {
  color: #ffffff !important;
}

/* Unbind uses `<n-button type="warning" secondary ...>` */
.n-button--secondary.n-button--warning-type {
  --n-color: rgba(245, 158, 11, 0.18) !important;
  --n-color-hover: rgba(245, 158, 11, 0.24) !important;
  --n-color-pressed: rgba(245, 158, 11, 0.30) !important;
  --n-color-focus: rgba(245, 158, 11, 0.24) !important;

  --n-border: 1px solid rgba(245, 158, 11, 0.34) !important;
  --n-border-hover: 1px solid rgba(245, 158, 11, 0.44) !important;
  --n-border-pressed: 1px solid rgba(245, 158, 11, 0.52) !important;
  --n-border-focus: 1px solid rgba(245, 158, 11, 0.44) !important;

  --n-text-color: rgba(180, 83, 9, 0.98) !important;
  --n-text-color-hover: rgba(180, 83, 9, 0.98) !important;
  --n-text-color-pressed: rgba(180, 83, 9, 0.98) !important;
  --n-text-color-focus: rgba(180, 83, 9, 0.98) !important;
}

/* Support chat: keep action buttons aligned with theme palette. */
.support-chat__panel .n-button--warning-type {
  --n-color: rgba(24, 160, 88, 0.10) !important;
  --n-color-hover: rgba(24, 160, 88, 0.14) !important;
  --n-color-pressed: rgba(24, 160, 88, 0.18) !important;
  --n-color-focus: rgba(24, 160, 88, 0.14) !important;

  --n-border: 1px solid rgba(24, 160, 88, 0.32) !important;
  --n-border-hover: 1px solid rgba(24, 160, 88, 0.42) !important;
  --n-border-pressed: 1px solid rgba(24, 160, 88, 0.50) !important;
  --n-border-focus: 1px solid rgba(24, 160, 88, 0.42) !important;

  --n-text-color: rgba(12, 122, 67, 0.98) !important;
  --n-text-color-hover: rgba(12, 122, 67, 0.98) !important;
  --n-text-color-pressed: rgba(12, 122, 67, 0.98) !important;
  --n-text-color-focus: rgba(12, 122, 67, 0.98) !important;
}

.support-chat__panel .n-button--warning-type :is(.n-button__content, .n-button__icon, .n-icon) {
  color: rgba(12, 122, 67, 0.98) !important;
}

.support-chat__panel .n-button--tertiary-type.n-button--error-type {
  --n-color: rgba(239, 68, 68, 0.10) !important;
  --n-color-hover: rgba(239, 68, 68, 0.14) !important;
  --n-color-pressed: rgba(239, 68, 68, 0.18) !important;
  --n-color-focus: rgba(239, 68, 68, 0.14) !important;

  --n-border: 1px solid rgba(239, 68, 68, 0.30) !important;
  --n-border-hover: 1px solid rgba(239, 68, 68, 0.40) !important;
  --n-border-pressed: 1px solid rgba(239, 68, 68, 0.48) !important;
  --n-border-focus: 1px solid rgba(239, 68, 68, 0.40) !important;

  --n-text-color: rgba(185, 28, 28, 0.98) !important;
  --n-text-color-hover: rgba(185, 28, 28, 0.98) !important;
  --n-text-color-pressed: rgba(185, 28, 28, 0.98) !important;
  --n-text-color-focus: rgba(185, 28, 28, 0.98) !important;
}

.support-chat__panel .n-button--tertiary-type.n-button--error-type :is(.n-button__content, .n-button__icon, .n-icon) {
  color: rgba(185, 28, 28, 0.98) !important;
}

/* ===== Alerts (Docs/Downloads/etc.) ===== */
.n-alert {
  /* Notices/announcements: user prefers "no background" blocks. */
  --n-color: transparent !important;
  --n-border: 0px solid transparent !important;
  --n-title-text-color: var(--text-color-strong) !important;
  --n-content-text-color: var(--text-color) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ===== Lists (Downloads) ===== */
.n-list {
  background: transparent !important;
}

.n-list.n-list--bordered {
  border: 0 !important;
}

.n-list-item {
  margin: 10px 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.52) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 6px)) saturate(var(--glass-sat));
  backdrop-filter: blur(calc(var(--glass-blur) - 6px)) saturate(var(--glass-sat));
}

.n-list-item:hover {
  background: rgba(255, 255, 255, 0.24) !important;
  border-color: rgba(255, 255, 255, 0.66) !important;
}

.n-list-item :is(.n-list-item__main, .n-list-item__prefix, .n-list-item__suffix) {
  background: transparent !important;
}

.n-list-item__divider {
  display: none !important;
}

/* ===== Markdown preview (notices/docs) ===== */
.md-preview,
.md-preview .md-editor-preview-wrapper,
.md-preview .md-editor-preview,
.md-preview .md-editor-previewOnly {
  background: transparent !important;
}

.md-preview .md-editor-preview-wrapper {
  border-radius: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.52) !important;
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 6px)) saturate(var(--glass-sat));
  backdrop-filter: blur(calc(var(--glass-blur) - 6px)) saturate(var(--glass-sat));
}

.md-preview .md-editor-preview-wrapper pre,
.md-preview .md-editor-preview-wrapper code {
  background: rgba(15, 23, 42, 0.06) !important;
}

/* ===== Portal page specifics ===== */
.license-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.16)) !important;
  border: 1px solid rgba(255, 255, 255, 0.42) !important;
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 4px)) saturate(var(--glass-sat));
  backdrop-filter: blur(calc(var(--glass-blur) - 4px)) saturate(var(--glass-sat));
}

.cert-img {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.46) !important;
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 6px)) saturate(var(--glass-sat));
  backdrop-filter: blur(calc(var(--glass-blur) - 6px)) saturate(var(--glass-sat));
}

.license-card .card-header {
  background: transparent !important;
}

.license-card .license-key-box {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) - 6px)) saturate(var(--glass-sat));
  backdrop-filter: blur(calc(var(--glass-blur) - 6px)) saturate(var(--glass-sat));
}

.license-card .license-key-box:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.62) !important;
}

.license-card .agent-badge {
  border-color: rgba(24, 160, 88, 0.28) !important;
  color: rgba(12, 122, 67, 0.96) !important;
  background: rgba(24, 160, 88, 0.12) !important;
  box-shadow: none !important;
}

.license-card .license-key-box:hover .agent-qq {
  color: rgba(12, 122, 67, 0.96) !important;
}

.license-card .card-footer {
  border-top-color: rgba(255, 255, 255, 0.42) !important;
}

/* ===== Dark mode (disabled for now) ===== */
@media (prefers-color-scheme: dark) and (min-width: 999999px) {
  :root {
    --page-bg: transparent !important;
    --card-bg: transparent !important;
    --text-color: rgba(255, 255, 255, 0.92) !important;
    --text-color-strong: rgba(255, 255, 255, 0.96) !important;
    --muted-text-color: rgba(255, 255, 255, 0.78) !important;
    --border-color: rgba(255, 255, 255, 0.14) !important;

    /* Dark mode needs higher opacity to keep contrast and avoid "washed" UI. */
    --glass-1: rgba(16, 20, 38, 0.66);
    --glass-2: rgba(16, 20, 38, 0.76);
    --glass-3: rgba(16, 20, 38, 0.54);
    --glass-border-1: rgba(255, 255, 255, 0.14);
    --glass-border-2: rgba(255, 255, 255, 0.20);
    --glass-highlight: rgba(255, 255, 255, 0.06);

    --surface-muted: rgba(16, 20, 38, 0.44) !important;
    --surface-muted-hover: rgba(16, 20, 38, 0.54) !important;
  }

  body {
    background:
      radial-gradient(900px 700px at 10% 8%, rgba(24, 160, 88, 0.22), transparent 58%),
      radial-gradient(900px 700px at 90% 10%, rgba(56, 189, 248, 0.18), transparent 58%),
      radial-gradient(1000px 800px at 45% 96%, rgba(236, 72, 153, 0.12), transparent 62%),
      linear-gradient(180deg, #070a14 0%, #0b1020 58%, #070a14 100%) !important;
    color-scheme: dark;
  }

  .n-layout-header {
    /* Reduce visible "seam" between header and sider in dark mode. */
    /* Use the same solid surface as sider to avoid a visible "splice" line. */
    background: rgba(16, 20, 38, 0.74) !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  .n-layout-sider {
    background: rgba(16, 20, 38, 0.74) !important;
    border-right: 0 !important;
    box-shadow: none !important;
  }

  /* NaiveUI may paint background on internal containers; keep them transparent. */
  .n-layout-sider-scroll-container,
  .n-layout-header__content {
    background: transparent !important;
  }

  /* Menu readability in dark mode (naive-ui keeps light defaults otherwise). */
  .n-menu {
    --n-item-text-color: rgba(255, 255, 255, 0.86) !important;
    --n-item-text-color-hover: rgba(255, 255, 255, 0.92) !important;
    --n-item-text-color-active: rgba(255, 255, 255, 0.92) !important;
    --n-item-text-color-active-hover: rgba(255, 255, 255, 0.96) !important;

    --n-item-icon-color: rgba(255, 255, 255, 0.84) !important;
    --n-item-icon-color-hover: rgba(255, 255, 255, 0.92) !important;
    --n-item-icon-color-active: rgba(255, 255, 255, 0.92) !important;
    --n-item-icon-color-active-hover: rgba(255, 255, 255, 0.96) !important;

    --n-arrow-color: rgba(255, 255, 255, 0.55) !important;
    --n-arrow-color-hover: rgba(255, 255, 255, 0.82) !important;
    --n-arrow-color-active: rgba(255, 255, 255, 0.82) !important;
    --n-arrow-color-active-hover: rgba(255, 255, 255, 0.92) !important;
  }

  .n-menu-item-content:hover {
    background: rgba(16, 20, 38, 0.52) !important;
  }

  .n-menu-item-content--selected {
    background: rgba(16, 20, 38, 0.58) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  .n-card {
    background: linear-gradient(135deg, rgba(16, 20, 38, 0.72), rgba(16, 20, 38, 0.54)) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    --n-title-text-color: rgba(255, 255, 255, 0.94) !important;
    --n-text-color: rgba(255, 255, 255, 0.90) !important;
  }

  .n-input,
  .n-base-selection,
  .n-input-number,
  .n-date-picker,
  .n-time-picker {
    --n-color: rgba(16, 20, 38, 0.56) !important;
    --n-border: 1px solid rgba(255, 255, 255, 0.14) !important;
    --n-border-hover: 1px solid rgba(255, 255, 255, 0.18) !important;
    --n-border-focus: 1px solid rgba(24, 160, 88, 0.55) !important;
    --n-text-color: rgba(255, 255, 255, 0.92) !important;
    --n-placeholder-color: rgba(255, 255, 255, 0.62) !important;
    background: rgba(16, 20, 38, 0.56) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
  }

  /* Form label readability */
  .n-form-item-label,
  .n-form-item-label__text {
    color: rgba(255, 255, 255, 0.84) !important;
  }

  .md-preview .md-editor-preview-wrapper {
    background: rgba(16, 20, 38, 0.46) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
  }

  .md-preview .md-editor-preview-wrapper pre,
  .md-preview .md-editor-preview-wrapper code {
    background: rgba(0, 0, 0, 0.25) !important;
  }

  .n-button--secondary {
    --n-color: rgba(16, 20, 38, 0.46) !important;
    --n-color-hover: rgba(16, 20, 38, 0.52) !important;
    --n-color-pressed: rgba(16, 20, 38, 0.58) !important;
    --n-color-focus: rgba(16, 20, 38, 0.52) !important;

    --n-border: 1px solid rgba(255, 255, 255, 0.10) !important;
    --n-border-hover: 1px solid rgba(255, 255, 255, 0.14) !important;
    --n-border-pressed: 1px solid rgba(255, 255, 255, 0.18) !important;
    --n-border-focus: 1px solid rgba(255, 255, 255, 0.14) !important;

    --n-text-color: rgba(255, 255, 255, 0.92) !important;
    --n-text-color-hover: rgba(255, 255, 255, 0.92) !important;
    --n-text-color-pressed: rgba(255, 255, 255, 0.92) !important;
    --n-text-color-focus: rgba(255, 255, 255, 0.92) !important;
  }

  /* Text/quaternary buttons are used a lot in header/sider (mobile toggle/close). */
  .n-button--text-type,
  .n-button--quaternary-type {
    --n-text-color: rgba(255, 255, 255, 0.92) !important;
    --n-text-color-hover: rgba(255, 255, 255, 0.96) !important;
    --n-text-color-pressed: rgba(255, 255, 255, 0.96) !important;
    --n-text-color-focus: rgba(255, 255, 255, 0.96) !important;
    --n-color-hover: rgba(255, 255, 255, 0.06) !important;
    --n-color-pressed: rgba(255, 255, 255, 0.10) !important;
    --n-color-focus: rgba(255, 255, 255, 0.08) !important;
  }

  .n-button--primary-type.n-button--tertiary-type {
    --n-color: rgba(24, 160, 88, 0.18) !important;
    --n-color-hover: rgba(24, 160, 88, 0.22) !important;
    --n-color-pressed: rgba(24, 160, 88, 0.26) !important;
    --n-color-focus: rgba(24, 160, 88, 0.22) !important;

    --n-border: 1px solid rgba(24, 160, 88, 0.32) !important;
    --n-border-hover: 1px solid rgba(24, 160, 88, 0.42) !important;
    --n-border-pressed: 1px solid rgba(24, 160, 88, 0.50) !important;
    --n-border-focus: 1px solid rgba(24, 160, 88, 0.42) !important;

    --n-text-color: rgba(255, 255, 255, 0.96) !important;
    --n-text-color-hover: rgba(255, 255, 255, 0.96) !important;
    --n-text-color-pressed: rgba(255, 255, 255, 0.96) !important;
    --n-text-color-focus: rgba(255, 255, 255, 0.96) !important;
  }

  .n-button--primary-type.n-button--tertiary-type :is(.n-button__content, .n-button__icon, .n-icon) {
    color: rgba(255, 255, 255, 0.96) !important;
  }

  .n-base-select-menu {
    --n-color: rgba(16, 20, 38, 0.60) !important;
    --n-option-text-color: rgba(255, 255, 255, 0.92) !important;
    --n-option-text-color-active: rgba(255, 255, 255, 0.96) !important;
    --n-option-text-color-pressed: rgba(255, 255, 255, 0.96) !important;
    --n-option-check-color: var(--brand-color) !important;
    --n-option-color-pending: rgba(255, 255, 255, 0.08) !important;
    --n-option-color-active: rgba(24, 160, 88, 0.22) !important;
    --n-option-color-active-pending: rgba(24, 160, 88, 0.28) !important;
    --n-action-divider-color: rgba(255, 255, 255, 0.10) !important;
    --n-action-text-color: rgba(255, 255, 255, 0.72) !important;
    --n-group-header-text-color: rgba(255, 255, 255, 0.72) !important;
    background: linear-gradient(135deg, rgba(16, 20, 38, 0.68), rgba(16, 20, 38, 0.48)) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
  }

  .n-popover:not(.n-popover--raw) {
    --n-color: rgba(16, 20, 38, 0.62) !important;
    --n-text-color: rgba(255, 255, 255, 0.92) !important;
    --n-divider-color: rgba(255, 255, 255, 0.10) !important;
    --n-box-shadow: none !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
  }

  .n-dropdown-menu {
    background: linear-gradient(135deg, rgba(16, 20, 38, 0.68), rgba(16, 20, 38, 0.48)) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
  }

  .n-alert {
    --n-color: rgba(16, 20, 38, 0.46) !important;
    --n-border: 1px solid rgba(255, 255, 255, 0.10) !important;
    --n-title-text-color: rgba(255, 255, 255, 0.96) !important;
    --n-content-text-color: rgba(255, 255, 255, 0.88) !important;
  }

  .license-card {
    background: linear-gradient(135deg, rgba(16, 20, 38, 0.58), rgba(16, 20, 38, 0.42)) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
  }

  .license-card .license-key-box {
    background: rgba(16, 20, 38, 0.46) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
  }

  .cert-img {
    background: rgba(16, 20, 38, 0.46) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
  }

  .n-modal-mask {
    background-color: rgba(0, 0, 0, 0.52) !important;
  }

  .n-dialog {
    background: linear-gradient(135deg, rgba(16, 20, 38, 0.78), rgba(16, 20, 38, 0.62)) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.48) !important;
  }

  .n-dialog .n-form-item-label {
    color: rgba(255, 255, 255, 0.72) !important;
  }

  .n-dialog :is(.n-input, .n-base-selection, .n-input-number) {
    --n-color: rgba(16, 20, 38, 0.56) !important;
    --n-color-focus: rgba(16, 20, 38, 0.56) !important;
    --n-placeholder-color: rgba(255, 255, 255, 0.44) !important;
    --n-border: 1px solid rgba(255, 255, 255, 0.16) !important;
    --n-border-hover: 1px solid rgba(255, 255, 255, 0.22) !important;
  }

  .n-dialog .n-input--disabled {
    --n-text-color-disabled: rgba(255, 255, 255, 0.66) !important;
    --n-placeholder-color: rgba(255, 255, 255, 0.42) !important;
  }
}