/* ============================================================
   杞硸 (LiquidGlass) 路 鐢ㄦ埛涓績缇庡寲澧炲己  v1.0
   鐢ㄦ硶锛氭湰鏂囦欢鐢?dashboard.blade.php / index.html 灏鹃儴鏍峰紡琛ㄥ紩鍏ワ紝
        鍏ㄩ儴涓鸿鐩栧紡鏍峰紡锛屼笉鏀瑰姩涓婚鍘熸湁 JS/CSS锛屽彲鏁存枃浠跺垹闄ゅ洖婊氥€?   閫傞厤锛氫寒鑹?/ 鏆楄壊锛坔tml.dark锛夛紝骞惰窡闅忛潰鏉夸富棰樿壊 var(--primary-color)
   ============================================================ */

/* ---------- 0. 璁捐浠ょ墝 ---------- */
:root {
  --fjj-radius-card: 22px;
  --fjj-radius-input: 14px;
  --fjj-radius-btn: 12px;
  --fjj-accent: var(--primary-color, #111827);
  --fjj-aurora-1: rgba(99, 102, 241, .20);
  --fjj-aurora-2: rgba(56, 189, 248, .16);
  --fjj-aurora-3: rgba(236, 72, 153, .13);
  --fjj-aurora-4: rgba(16, 185, 129, .12);
  --fjj-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 14px 32px -16px rgba(16, 24, 40, .16);
  --fjj-shadow-hover: 0 2px 6px rgba(16, 24, 40, .06), 0 26px 52px -22px rgba(16, 24, 40, .26);
  --fjj-hairline: linear-gradient(140deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, .55));
  --fjj-card-bg: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .72));
}

html.dark {
  --fjj-aurora-1: rgba(99, 102, 241, .32);
  --fjj-aurora-2: rgba(56, 189, 248, .24);
  --fjj-aurora-3: rgba(168, 85, 247, .26);
  --fjj-aurora-4: rgba(16, 185, 129, .20);
  --fjj-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 18px 40px -18px rgba(0, 0, 0, .75);
  --fjj-shadow-hover: 0 2px 8px rgba(0, 0, 0, .55), 0 30px 60px -22px rgba(0, 0, 0, .85);
  --fjj-hairline: linear-gradient(140deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, .10));
  --fjj-card-bg: linear-gradient(180deg, rgba(30, 41, 59, .72), rgba(23, 33, 48, .62));
}

/* ---------- 1. 鏋佸厜鑳屾櫙 ---------- */
body.modern-app {
  background-color: #f7f8fc;
  background-image:
    radial-gradient(40rem 26rem at 4% -14%, var(--fjj-aurora-1), transparent 62%),
    radial-gradient(36rem 24rem at 104% -6%, var(--fjj-aurora-2), transparent 60%),
    radial-gradient(34rem 24rem at 98% 110%, var(--fjj-aurora-3), transparent 62%),
    radial-gradient(32rem 22rem at -8% 108%, var(--fjj-aurora-4), transparent 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

html.dark body.modern-app {
  background-color: #0b1020;
  background-image:
    radial-gradient(40rem 26rem at 4% -14%, var(--fjj-aurora-1), transparent 62%),
    radial-gradient(36rem 24rem at 104% -6%, var(--fjj-aurora-2), transparent 60%),
    radial-gradient(34rem 24rem at 98% 110%, var(--fjj-aurora-3), transparent 62%),
    radial-gradient(32rem 22rem at -8% 108%, var(--fjj-aurora-4), transparent 60%);
}

/* ---------- 2. 椤舵爮 ---------- */
/* 搴旂敤鏍瑰鍣ㄥ師鏈嚜甯︿竴灞?linear-gradient锛堟殫鑹蹭笅鏄?#292b2b 鏆栫伆锛夛紝
   浼氭妸 body 鐨勬瀬鍏夊畬鍏ㄧ洊浣忥紝杩欓噷缁熶竴娓呯┖锛屼氦缁?body 璐熻矗缁樺埗鑳屾櫙 */
#app,
#app > div,
.modern-app-provider {
  background-image: none !important;
  background-color: transparent !important;
}

/* 甯冨眬瀹瑰櫒閫忔槑锛岃鏋佸厜鑳屾櫙閫忎笂鏉?*/
.n-layout,
.n-layout-scroll-container,
.n-layout-sider-scroll-container,
.n-scrollbar-container,
.n-scrollbar-content {
  background-color: transparent !important;
}
.n-layout-sider {
  background: rgba(255, 255, 255, .46) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
  backdrop-filter: blur(20px) saturate(1.3) !important;
}
html.dark .n-layout-sider {
  background: rgba(13, 19, 33, .52) !important;
}

.header-container {
  position: sticky;
  top: .75rem;
  z-index: 40;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .68) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.6) !important;
  backdrop-filter: blur(22px) saturate(1.6) !important;
  border: 1px solid rgba(255, 255, 255, .7) !important;
  box-shadow: var(--fjj-shadow) !important;
}
html.dark .header-container {
  background: rgba(24, 32, 48, .62) !important;
  border-color: rgba(148, 163, 184, .22) !important;
}
.header-container .header-actions-container { gap: .35rem; }

/* ---------- 3. 渚ц竟鏍?---------- */
.n-layout-sider::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(148, 163, 184, .28), transparent);
  pointer-events: none;
}
.side-menu { padding: .5rem .25rem 1rem; }
.side-menu .n-menu-item-content {
  border-radius: 14px !important;
  margin: .18rem .5rem !important;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
.side-menu .n-menu-item-content:hover {
  background-color: color-mix(in srgb, var(--fjj-accent) 8%, transparent) !important;
  transform: translateX(2px);
}
.side-menu .n-menu-item-content.n-menu-item-content--selected {
  background: linear-gradient(90deg,
      color-mix(in srgb, var(--fjj-accent) 16%, transparent),
      color-mix(in srgb, var(--fjj-accent) 4%, transparent)) !important;
  box-shadow: inset 3px 0 0 0 var(--fjj-accent),
              0 8px 20px -14px color-mix(in srgb, var(--fjj-accent) 70%, transparent) !important;
}
.side-menu .n-menu-item-content.n-menu-item-content--selected .n-menu-item-content-header {
  font-weight: 650;
  color: var(--fjj-accent) !important;
}
.side-menu .n-menu-item-content__icon {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  transition: background-color .18s ease;
}
.side-menu .n-menu-item-content:hover .n-menu-item-content__icon,
.side-menu .n-menu-item-content--selected .n-menu-item-content__icon {
  background: color-mix(in srgb, var(--fjj-accent) 8%, transparent);
}
.side-menu .n-menu-item-content--selected .n-menu-item-content__icon .iconify {
  color: var(--fjj-accent) !important;
}
.side-menu .n-menu-item-group-title {
  font-size: 11px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
  opacity: .62;
  padding-left: 1.35rem !important;
  margin-top: .5rem !important;
}
.title-text {
  background: linear-gradient(92deg, var(--fjj-accent), color-mix(in srgb, var(--fjj-accent) 55%, #6366f1));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.01em;
}

/* ---------- 4. 鍗＄墖 ---------- */
.glass-card {
  position: relative;
  isolation: isolate;
  border-radius: var(--fjj-radius-card) !important;
  border: 1px solid rgba(226, 232, 240, .85) !important;
  background: var(--fjj-card-bg) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
  backdrop-filter: blur(18px) saturate(1.4) !important;
  box-shadow: var(--fjj-shadow) !important;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), box-shadow .28s ease, border-color .28s ease !important;
}
html.dark .glass-card {
  border-color: rgba(71, 85, 105, .55) !important;
}
.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--fjj-hairline);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
.glass-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--fjj-shadow-hover) !important;
  border-color: color-mix(in srgb, var(--fjj-accent) 28%, rgba(226, 232, 240, .85)) !important;
}
.glass-card > .n-card__header,
.glass-card .card-header {
  letter-spacing: -.01em;
}
.glass-panel {
  border-radius: 20px !important;
  box-shadow: var(--fjj-shadow) !important;
}

/* ---------- 5. 鏍囬鎺掔増 ---------- */
.page-title-container .main-title {
  text-shadow: none !important;
  letter-spacing: -.02em !important;
  color: var(--text-color-1) !important;
}
.page-title-container .subtitle { letter-spacing: .01em; }
.modern-app h1 {
  letter-spacing: -.025em;
  color: var(--text-color-1) !important;
}

/* ---------- 6. 琛ㄥ崟鎺т欢 ---------- */
.modern-input .n-input,
.modern-input.n-input { border-radius: var(--fjj-radius-input) !important; }
.modern-input .n-input__border,
.modern-input .n-input__state-border { border-radius: var(--fjj-radius-input) !important; }
.modern-input .n-input__input-el,
.modern-input .n-input__textarea-el { font-size: .95rem; }
.modern-input { transition: box-shadow .22s ease; }
.modern-input:focus-within .n-input__state-border {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--fjj-accent) 14%, transparent) !important;
  border-color: color-mix(in srgb, var(--fjj-accent) 55%, #cbd5e1) !important;
}
.input-label {
  font-weight: 600 !important;
  letter-spacing: .01em;
  font-size: .86rem !important;
}
.modern-input-group .modern-button.n-button { border-radius: 0 var(--fjj-radius-btn) var(--fjj-radius-btn) 0 !important; }

/* ---------- 7. 鎸夐挳 ---------- */
.modern-button,
.modern-button-outline {
  border-radius: var(--fjj-radius-btn) !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background-color .18s ease !important;
}
.modern-button:not(.modern-button-outline):hover,
.modern-button-outline:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--fjj-accent) 70%, transparent) !important;
}
.modern-button:not(.modern-button-outline):active,
.modern-button-outline:active { transform: translateY(0) scale(.985); }
.modern-button-primary,
.modern-button.n-button--primary-type {
  background-image: linear-gradient(135deg, var(--fjj-accent), color-mix(in srgb, var(--fjj-accent) 68%, #6366f1)) !important;
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--fjj-accent) 80%, transparent) !important;
}
.modern-button-outline {
  border: 1px solid color-mix(in srgb, var(--fjj-accent) 30%, rgba(203, 213, 225, .9)) !important;
  background: color-mix(in srgb, var(--fjj-accent) 4%, transparent) !important;
}
.modern-button-outline:hover {
  background: color-mix(in srgb, var(--fjj-accent) 10%, transparent) !important;
  border-color: color-mix(in srgb, var(--fjj-accent) 55%, transparent) !important;
}

/* ---------- 8. 寮€鍏?/ 寰芥爣 ---------- */
.n-switch { --n-rail-color-active: var(--fjj-accent); }
.n-switch.n-switch--active .n-switch__rail {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fjj-accent) 14%, transparent);
}
.n-tag { border-radius: 999px !important; font-weight: 600; }

/* ---------- 9. 缁熻鍗★紙娴侀噺鏄庣粏绛夛級 ---------- */
.stat-card {
  border-radius: 18px !important;
  border: 1px solid rgba(226, 232, 240, .8) !important;
  background: var(--fjj-card-bg) !important;
  box-shadow: var(--fjj-shadow) !important;
  padding: 1.1rem 1.15rem !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
html.dark .stat-card { border-color: rgba(71, 85, 105, .5) !important; }
.stat-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--fjj-accent) 40%, transparent) !important;
  box-shadow: var(--fjj-shadow-hover) !important;
}
.stat-card .stat-icon {
  width: 42px; height: 42px;
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg,
      color-mix(in srgb, var(--fjj-accent) 18%, #ffffff),
      color-mix(in srgb, var(--fjj-accent) 6%, #ffffff));
  color: var(--fjj-accent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fjj-accent) 14%, transparent);
}
html.dark .stat-card .stat-icon {
  background: linear-gradient(145deg,
      color-mix(in srgb, var(--fjj-accent) 34%, #0f172a),
      color-mix(in srgb, var(--fjj-accent) 12%, #0f172a));
}
.stat-card .stat-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  font-weight: 750;
}
.stat-card .stat-label { opacity: .72; letter-spacing: .02em; }

/* ---------- 10. 璁㈤槄璁″垝鍗?---------- */
.plan-features { line-height: 1.7; }
.plan-features li, .plan-features p { margin-block: .15rem; }
.modern-tab-button {
  border-radius: 999px !important;
  font-weight: 600;
  transition: color .2s ease, background-color .2s ease, box-shadow .2s ease !important;
}

/* ---------- 11. 鍒楄〃 / 璁剧疆琛?---------- */
.setting-item {
  padding-block: .15rem;
  transition: background-color .18s ease;
  border-radius: 14px;
}
.setting-item + .setting-item { border-top: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent); }
.setting-item-title { letter-spacing: -.005em; }
.setting-item-desc { opacity: .78; }
.n-list-item, .history-item, .payment-item, .knowledge-item, .list-item {
  border-radius: 14px;
  transition: background-color .16s ease, transform .16s ease;
}
.n-list-item:hover, .history-item:hover, .payment-item:hover,
.knowledge-item:hover, .list-item:hover {
  background-color: color-mix(in srgb, var(--fjj-accent) 5%, transparent);
}
.glass-card .bg-slate-100,
.glass-card .dark\:bg-slate-800\/70 {
  border-radius: 12px !important;
  transition: background-color .18s ease !important;
}

/* ---------- 12. 婊氬姩鏉?---------- */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text-color-3) 28%, transparent);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--text-color-3) 48%, transparent);
  background-clip: content-box;
}

/* ---------- 13. 绉诲姩绔?---------- */
@media (max-width: 767px) {
  :root { --fjj-radius-card: 18px; }
  .header-container {
    margin: .5rem .75rem 0 !important;
    border-radius: 16px !important;
    top: .5rem;
  }
  .glass-card { border-radius: 18px !important; }
  .stat-card { padding: .85rem .9rem !important; }
  .modern-app h1 { font-size: 1.6rem; }
}

/* ---------- 14. 鍔ㄦ晥闄嶇骇 ---------- */
@media (prefers-reduced-motion: reduce) {
  .glass-card, .glass-card:hover, .stat-card, .stat-card:hover,
  .modern-button, .side-menu .n-menu-item-content { transition: none !important; transform: none !important; }
}

/* ---------- 15. 鍐呴〉缁嗚妭锛氳闃?/ 娴侀噺 / 璁㈠崟 / 宸ュ崟 / 鐭ヨ瘑搴?---------- */
/* 娴侀噺杩涘害鏉★細涓昏壊娓愬彉 */
.n-progress .n-progress-graph-line-fill {
  background-image: linear-gradient(90deg, var(--fjj-accent), color-mix(in srgb, var(--fjj-accent) 40%, #22d3ee)) !important;
}
.n-progress .n-progress-graph-line {
  background: color-mix(in srgb, var(--text-color-3) 16%, transparent) !important;
}
.traffic-progress { border-radius: 16px !important; }

/* 琛ㄦ牸锛氳〃澶村姞鑹层€佽 hover銆佹暟瀛楃瓑瀹?*/
.n-data-table .n-data-table-th {
  font-weight: 650 !important;
  letter-spacing: .01em;
  background: color-mix(in srgb, var(--text-color-3) 7%, transparent) !important;
}
.n-data-table .n-data-table-td,
.n-data-table .n-data-table-th {
  border-color: color-mix(in srgb, var(--border-color) 55%, transparent) !important;
}
.n-data-table .n-data-table-tr:hover .n-data-table-td {
  background: color-mix(in srgb, var(--fjj-accent) 5%, transparent) !important;
}
.n-data-table .n-data-table-td { font-variant-numeric: tabular-nums; }

/* 璁㈤槄鍗?/ 鑺傜偣鍗?*/
.modern-subscription-card,
.subscribe-item,
.node-card {
  border-radius: 18px !important;
  border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent) !important;
  box-shadow: var(--fjj-shadow) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
.modern-subscription-card:hover,
.subscribe-item:hover,
.node-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--fjj-accent) 34%, transparent) !important;
  box-shadow: var(--fjj-shadow-hover) !important;
}

/* 鏍囩 / 寰界珷 */
.n-tag {
  border-radius: 999px !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
}

/* 绌虹姸鎬?*/
.n-empty .n-empty__description { opacity: .7; }
.n-empty .n-empty__icon { opacity: .55; }

/* 鎻愮ず鏉?*/
.n-alert { border-radius: 14px !important; }

/* 宸ュ崟姘旀场 */
.chat-message-wrap, .chat-message { border-radius: 16px !important; }

/* Markdown 姝ｆ枃锛堢煡璇嗗簱 / 濂楅鐗规€э級 */
.markdown-body { line-height: 1.75; }
.markdown-body code {
  border-radius: 6px;
  padding: .12em .38em;
  background: color-mix(in srgb, var(--text-color-3) 12%, transparent);
}
.markdown-body pre {
  border-radius: 14px;
  padding: 1rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
}
.markdown-body blockquote {
  border-left: 3px solid var(--fjj-accent);
  border-radius: 0 12px 12px 0;
  padding-left: 1rem;
  opacity: .92;
}

/* 鍒嗛〉 */
.n-pagination .n-pagination-item { border-radius: 10px !important; }

/* 渚ц竟鏍?logo 鍖哄垎闅?*/
.n-layout-sider .h-15.f-c-c {
  border-bottom: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent);
}

/* ---------- 16. 姗欒壊棣栭〉椋庢牸锛欻ero / 瀹㈡湇鍗?/ 娴姩璐拱锛堥厤鍚?fjj-ui.js锛?---------- */
/* 涓昏壊鍒囨锛堝弬鑰冨浘閰嶈壊锛?*/
:root,
.n-config-provider {
  --primary-color: #ff7a18 !important;
  --primary-color-10: rgba(255, 122, 24, .12) !important;
  --fjj-accent: #ff7a18;
  --fjj-aurora-1: rgba(255, 138, 43, .22);
  --fjj-aurora-2: rgba(255, 176, 82, .18);
  --fjj-aurora-3: rgba(255, 106, 0, .14);
  --fjj-aurora-4: rgba(255, 208, 122, .16);
}
html.dark {
  --fjj-aurora-1: rgba(255, 138, 43, .26);
  --fjj-aurora-2: rgba(255, 176, 82, .20);
  --fjj-aurora-3: rgba(255, 106, 0, .22);
  --fjj-aurora-4: rgba(255, 208, 122, .14);
}

/* Hero 妯箙 */
.fjj-hero {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 2.1rem 2.3rem;
  margin: 0 0 1.25rem;
  color: #fff;
  background: linear-gradient(102deg, #ff9a3d 0%, #ff7a18 45%, #ff6100 100%);
  box-shadow: 0 20px 44px -20px rgba(255, 106, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .35);
  isolation: isolate;
}
.fjj-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 90% at 88% 20%, rgba(255, 255, 255, .38), transparent 62%),
    radial-gradient(40% 70% at 100% 100%, rgba(255, 214, 170, .5), transparent 60%);
  z-index: -1;
}
.fjj-hero__eyebrow {
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .82;
  margin-bottom: .55rem;
}
.fjj-hero__title {
  font-size: clamp(1.3rem, 2.3vw, 1.95rem);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -.01em;
  max-width: 26ch;
  text-shadow: 0 2px 12px rgba(160, 60, 0, .28);
}
.fjj-hero__actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.15rem; }
.fjj-hero__btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .52rem 1.15rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .16);
  color: #fff !important;
  font-weight: 600;
  font-size: .88rem;
  text-decoration: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color .2s ease, transform .2s ease;
}
.fjj-hero__btn:hover { background: rgba(255, 255, 255, .3); transform: translateY(-1px); }
.fjj-hero__btn--solid { background: #fff; color: #d4500a !important; border-color: #fff; }
.fjj-hero__btn--solid:hover { background: #fff6ee; }
.fjj-hero__rocket {
  position: absolute;
  right: 2rem; bottom: 1.1rem;
  font-size: 4.4rem;
  line-height: 1;
  transform: rotate(-10deg);
  filter: drop-shadow(0 14px 22px rgba(120, 40, 0, .35));
  pointer-events: none;
}
@media (max-width: 767px) {
  .fjj-hero { padding: 1.4rem 1.3rem; border-radius: 18px; }
  .fjj-hero__rocket { font-size: 3rem; right: .8rem; bottom: .6rem; opacity: .85; }
  .fjj-hero__title { max-width: 18ch; }
}

/* 渚ф爮搴曢儴瀹㈡湇鍗?*/
.fjj-support {
  position: fixed;
  left: 14px; bottom: 92px;
  width: 186px;
  padding: 1rem 1rem .95rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(226, 232, 240, .9);
  box-shadow: 0 16px 34px -16px rgba(16, 24, 40, .3);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  z-index: 55;
}
html.dark .fjj-support {
  background: rgba(23, 33, 48, .92);
  border-color: rgba(71, 85, 105, .6);
}
.fjj-support__ico {
  width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  background: linear-gradient(145deg, #ffe4cc, #ffd0a8);
  margin-bottom: .55rem;
}
html.dark .fjj-support__ico { background: linear-gradient(145deg, #4a2a12, #3a2210); }
.fjj-support__t { font-size: .86rem; font-weight: 700; letter-spacing: -.01em; }
.fjj-support__d { font-size: .72rem; opacity: .66; margin-top: .18rem; }
.fjj-support__b {
  display: block; text-align: center; margin-top: .7rem;
  padding: .5rem; border-radius: 999px;
  color: #fff !important; font-weight: 650; font-size: .8rem; text-decoration: none;
  background: linear-gradient(135deg, #ff9a3d, #ff6100);
  box-shadow: 0 10px 20px -10px rgba(255, 106, 0, .9);
  transition: transform .18s ease, filter .18s ease;
}
.fjj-support__b:hover { transform: translateY(-1px); filter: brightness(1.05); }

/* 鍙充笅瑙掓诞鍔ㄨ喘涔版寜閽?*/
.fjj-buy {
  position: fixed;
  right: 24px; bottom: 28px;
  z-index: 56;
  display: inline-flex; align-items: center; gap: .42rem;
  padding: .72rem 1.2rem;
  border-radius: 999px;
  color: #fff !important;
  font-weight: 700; font-size: .88rem; text-decoration: none;
  background: linear-gradient(135deg, #ff9a3d, #ff6100);
  box-shadow: 0 16px 32px -14px rgba(255, 106, 0, .9);
  transition: transform .18s ease, box-shadow .18s ease;
}
.fjj-buy:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -16px rgba(255, 106, 0, .95); }

@media (max-width: 1023px) {
  .fjj-support { display: none; }
  .fjj-buy { right: 14px; bottom: 16px; padding: .62rem 1rem; font-size: .82rem; }
}

/* 挂进侧边栏时改为静态流式布局，跟随菜单滚动，不遮挡 */
.fjj-support--sider {
  position: static;
  width: auto;
  margin: .5rem .6rem .8rem;
  padding: .85rem .85rem .8rem;
  box-shadow: 0 10px 24px -14px rgba(16, 24, 40, .28);
}
.fjj-support--sider .fjj-support__ico { width: 32px; height: 32px; font-size: .95rem; margin-bottom: .4rem; }
.fjj-support--sider .fjj-support__b { margin-top: .55rem; padding: .42rem; font-size: .76rem; }
@media (max-width: 1023px) {
  .fjj-support--sider { display: none !important; }
}

/* ---------- 17. 侧栏品牌卡（替代立绘位） ---------- */
.fjj-brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: .45rem .6rem .3rem;
  padding: .8rem .85rem;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 154, 61, .18), rgba(255, 97, 0, .05));
  border: 1px solid rgba(255, 154, 61, .3);
  transition: transform .2s ease, box-shadow .2s ease;
}
.fjj-brand:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -14px rgba(255, 106, 0, .55);
}
.fjj-brand__art {
  width: 46px; height: 46px;
  flex: 0 0 46px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.45rem;
  background: linear-gradient(145deg, #ffb877, #ff7a18);
  box-shadow: 0 10px 20px -10px rgba(255, 106, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.fjj-brand__name { font-weight: 800; font-size: .95rem; letter-spacing: -.01em; }
.fjj-brand__slogan { font-size: .68rem; opacity: .6; margin-top: .12rem; letter-spacing: .05em; }
html.dark .fjj-brand {
  background: linear-gradient(135deg, rgba(255, 154, 61, .2), rgba(255, 97, 0, .06));
  border-color: rgba(255, 154, 61, .26);
}
@media (max-width: 1023px) { .fjj-brand { display: none; } }

/* ---------- 18. 首页订阅卡：浅色玻璃 + 橙色点缀（仅仪表盘，有 hero 时生效） ---------- */
section.max-w-7xl:has(> .fjj-hero) .grid > div:first-child > .glass-card {
  background: linear-gradient(180deg, #ffffff 0%, #fffaf6 100%) !important;
  border-color: rgba(255, 154, 61, .32) !important;
  box-shadow: 0 22px 46px -26px rgba(255, 122, 24, .45) !important;
}
section.max-w-7xl:has(> .fjj-hero) .grid > div:first-child > .glass-card::before {
  background: linear-gradient(140deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, 0) 46%, rgba(255, 154, 61, .34));
}
/* 套餐名用深色字，续费按钮保持橙色 */
section.max-w-7xl:has(> .fjj-hero) .grid > div:first-child > .glass-card .n-button {
  background: linear-gradient(135deg, #ff9a3d, #ff6100) !important;
  border: none !important;
  border-width: 0 !important;
  --n-border: 1px solid transparent;
  outline: none !important;
  color: #fff !important;
  box-shadow: 0 10px 22px -10px rgba(255, 106, 0, .9) !important;
}
section.max-w-7xl:has(> .fjj-hero) .grid > div:first-child > .glass-card .n-button:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
/* 流量进度条加粗圆润，4% 也能看清 */
section.max-w-7xl:has(> .fjj-hero) .grid > div:first-child > .glass-card .n-progress-graph-line,
section.max-w-7xl:has(> .fjj-hero) .grid > div:first-child > .glass-card .n-progress-graph-line-fill {
  height: 10px !important;
  border-radius: 999px !important;
}
section.max-w-7xl:has(> .fjj-hero) .grid > div:first-child > .glass-card .n-progress-graph-line {
  background: rgba(255, 122, 24, .16) !important;
}
/* 暗色模式下仍用深色玻璃，避免刺眼 */
html.dark section.max-w-7xl:has(> .fjj-hero) .grid > div:first-child > .glass-card {
  background: linear-gradient(180deg, rgba(30, 41, 59, .92), rgba(23, 33, 48, .86)) !important;
  border-color: rgba(255, 154, 61, .24) !important;
  box-shadow: 0 24px 48px -26px rgba(0, 0, 0, .8) !important;
}
html.dark section.max-w-7xl:has(> .fjj-hero) .grid > div:first-child > .glass-card::before {
  background: linear-gradient(140deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 46%, rgba(255, 154, 61, .22));
}