/**
 * X.com (Twitter) inspired LIGHT theme — visual layer only.
 * Maps onto existing CSS variables and Tailwind utility classes.
 */

:root {
  --x-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --x-bg: #ffffff;
  --x-bg-subtle: #f7f9f9;
  --x-bg-elevated: #ffffff;
  --x-bg-hover: #f7f9f9;
  --x-text: #0f1419;
  --x-text-muted: #536471;
  --x-text-faint: #8b98a5;
  --x-border: #eff3f4;
  --x-border-strong: #cfd9de;
  --x-accent: #1d9bf0;
  --x-accent-hover: #1a8cd8;
  --x-accent-muted: rgba(29, 155, 240, 0.1);
}

html.x-theme,
body.x-theme {
  font-family: var(--x-font);
  background-color: var(--x-bg);
  color: var(--x-text);
  -webkit-font-smoothing: antialiased;
}

/* —— Tailwind utility alignment —— */
body.x-theme .bg-gray-50 { background-color: var(--x-bg-subtle) !important; }
body.x-theme .bg-gray-100 { background-color: var(--x-bg-subtle) !important; }
body.x-theme .bg-white { background-color: var(--x-bg-elevated) !important; }

body.x-theme .text-gray-900,
body.x-theme .text-gray-800,
body.x-theme .text-gray-700 { color: var(--x-text) !important; }
body.x-theme .text-gray-600,
body.x-theme .text-gray-500,
body.x-theme .text-gray-400 { color: var(--x-text-muted) !important; }

body.x-theme .border-gray-100,
body.x-theme .border-gray-200,
body.x-theme .border-gray-300 { border-color: var(--x-border) !important; }

body.x-theme .hover\:bg-gray-50:hover,
body.x-theme .hover\:bg-gray-100:hover { background-color: var(--x-bg-hover) !important; }

body.x-theme .shadow-sm { box-shadow: 0 1px 2px rgba(15, 20, 25, 0.04) !important; }
body.x-theme .shadow-md,
body.x-theme .shadow-lg,
body.x-theme .shadow-xl,
body.x-theme .shadow-2xl { box-shadow: 0 4px 16px rgba(15, 20, 25, 0.08) !important; }
body.x-theme .shadow-inner { box-shadow: inset 0 1px 2px rgba(15, 20, 25, 0.06) !important; }

body.x-theme .text-\[\#ff8400\] { color: var(--x-accent) !important; }
body.x-theme .hover\:text-\[\#ff8400\]:hover { color: var(--x-accent) !important; }
body.x-theme .group:hover .group-hover\:text-\[\#ff8400\] { color: var(--x-accent) !important; }
body.x-theme .focus\:ring-\[\#ff8400\]\/30:focus { --tw-ring-color: rgba(29, 155, 240, 0.35) !important; }

body.x-theme .bg-\[\#ff8400\] { background-color: var(--x-accent) !important; }
body.x-theme .hover\:bg-\[\#e67700\]:hover { background-color: var(--x-accent-hover) !important; }

body.x-theme .bg-orange-50 { background-color: var(--x-accent-muted) !important; }
body.x-theme .bg-green-50 { background-color: rgba(0, 186, 124, 0.08) !important; }
body.x-theme .bg-green-100 { background-color: rgba(0, 186, 124, 0.12) !important; }
body.x-theme .text-green-600,
body.x-theme .text-green-700 { color: #00ba7c !important; }
body.x-theme .bg-red-50 { background-color: rgba(249, 24, 128, 0.06) !important; }
body.x-theme .text-red-600 { color: #f91880 !important; }
body.x-theme .bg-indigo-50\/50,
body.x-theme .bg-indigo-50 { background-color: var(--x-accent-muted) !important; }
body.x-theme .border-indigo-100 { border-color: rgba(29, 155, 240, 0.2) !important; }
body.x-theme .text-indigo-600,
body.x-theme .text-indigo-400 { color: var(--x-accent) !important; }
body.x-theme .bg-indigo-600,
body.x-theme .hover\:bg-indigo-700:hover { background-color: var(--x-accent) !important; }
body.x-theme .bg-indigo-100 { background-color: var(--x-accent-muted) !important; }
body.x-theme .text-indigo-700 { color: var(--x-accent) !important; }

/* —— 定制套餐 · AI 爆款推荐（暖橙，参考设计稿）—— */
body.x-theme .custom-package-card--featured {
  background: linear-gradient(180deg, #fff8ed 0%, #fffcf4 100%) !important;
  border: 1px solid #ffcc81 !important;
  border-radius: 1rem !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

body.x-theme .custom-package-card--featured:hover,
body.x-theme .custom-package-card--featured.site-card:hover {
  border-color: #ffb84d !important;
  box-shadow: 0 4px 12px rgba(255, 132, 0, 0.12) !important;
}

body.x-theme .custom-package-card--featured .custom-package-card__badge {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  color: #ffffff !important;
  background: #ffa940 !important;
  border-radius: 0 1rem 0 0.75rem;
}

body.x-theme .custom-package-card--featured .custom-package-card__badge-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  display: block;
}

body.x-theme .custom-package-card--featured .custom-package-card__title {
  padding-top: 0.25rem;
  padding-right: 5.5rem;
}

body.x-theme .custom-package-card--featured .custom-package-card__price {
  color: #ff8400 !important;
}

body.x-theme .custom-package-card--featured .custom-package-card__price-unit--featured {
  color: #000000 !important;
}

body.x-theme .custom-package-card--featured .custom-package-card__check {
  color: #ff8400 !important;
}

body.x-theme .custom-package-card--featured .custom-package-card__btn--featured {
  background-color: #ff8400 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.x-theme .custom-package-card--featured .custom-package-card__btn--featured:hover {
  background-color: #e67700 !important;
}

/* —— 定制套餐 · 知识星球（靛紫渐变，参考设计稿）—— */
body.x-theme .custom-package-card--planet {
  background: linear-gradient(153.12deg, #f0f2ff 1.82%, rgba(240, 242, 255, 0) 98.63%) !important;
  border: none !important;
  border-radius: 1rem !important;
  box-shadow: 0 0 2px rgba(79, 70, 229, 0.6) !important;
}

body.x-theme .custom-package-card--planet:hover {
  box-shadow: 0 0 4px rgba(79, 70, 229, 0.75) !important;
}

body.x-theme .custom-package-card--planet .custom-package-card__price {
  color: #4f46e5 !important;
}

body.x-theme .custom-package-card--planet .custom-package-card__price-unit {
  color: #4f46e5 !important;
}

body.x-theme .custom-package-card--planet .custom-package-card__check {
  color: #4f46e5 !important;
}

body.x-theme .custom-package-card--planet .custom-package-card__btn--planet {
  background-color: #4f46e5 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.x-theme .custom-package-card--planet .custom-package-card__btn--planet:hover {
  background-color: #4338ca !important;
}

body.x-theme .custom-package-card--planet.site-card:hover {
  border-color: transparent !important;
}

/* Header / footer — solid white, subtle border */
body.x-theme #site-header {
  background-color: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: var(--x-border) !important;
}

body.x-theme #site-footer {
  background-color: var(--x-bg) !important;
  border-color: var(--x-border) !important;
}

/* Desktop nav */
body.x-theme #global-nav .nav-link {
  color: var(--x-text-muted);
}
body.x-theme #global-nav .nav-link.border-gray-900,
body.x-theme #global-nav .nav-link.text-gray-900 {
  color: var(--x-text) !important;
  border-color: var(--x-text) !important;
  font-weight: 700;
}
body.x-theme #global-nav .nav-link:hover {
  color: var(--x-text) !important;
}

/* List cards */
body.x-theme .site-card-list.bg-white {
  background-color: var(--x-bg-elevated) !important;
  border-color: var(--x-border) !important;
}
body.x-theme .site-card-list:hover {
  background-color: var(--x-bg-hover) !important;
  border-color: var(--x-border-strong) !important;
}
body.x-theme #article-list-container h3,
body.x-theme #tutorial-list-container h3,
body.x-theme .site-card-list h3 {
  color: var(--x-text) !important;
}
body.x-theme #article-list-container .site-card-list:hover h3,
body.x-theme #tutorial-list-container .site-card-list:hover h3 {
  color: var(--x-accent) !important;
}

/* Custom packages — light cards on white page */
body.x-theme #custom-packages-grid .bg-white {
  background-color: var(--x-bg-elevated) !important;
  border-color: var(--x-border) !important;
}
body.x-theme #custom-packages-grid .border-gray-300 {
  border-color: var(--x-border-strong) !important;
  color: var(--x-text) !important;
}
body.x-theme #custom-packages-grid .hover\:bg-gray-50:hover {
  background-color: var(--x-bg-hover) !important;
}

/* Reader */
body.x-theme #article-reader {
  background-color: var(--x-bg-subtle) !important;
}
body.x-theme #article-reader > .sticky {
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px);
  border-color: var(--x-border) !important;
  box-shadow: 0 1px 0 var(--x-border) !important;
}
body.x-theme #reader-source {
  background-color: var(--x-bg-subtle) !important;
  color: var(--x-text-muted) !important;
}

/* Modals */
body.x-theme #custom-modal-panel,
body.x-theme #video-modal-panel,
body.x-theme #about-qr-modal-panel,
body.x-theme #contact-modal-panel,
body.x-theme #avatar-modal > .relative.bg-white {
  background-color: var(--x-bg-elevated) !important;
  border: 1px solid var(--x-border);
  box-shadow: 0 8px 32px rgba(15, 20, 25, 0.12) !important;
}
body.x-theme #avatar-modal button.bg-white {
  background-color: var(--x-bg-elevated) !important;
  border: 1px solid var(--x-border);
}

/* Search panel */
body.x-theme .site-search-panel {
  background-color: var(--x-bg-elevated) !important;
  border-color: var(--x-border) !important;
  box-shadow: 0 8px 32px rgba(15, 20, 25, 0.12) !important;
}

/* Mobile bottom nav */
body.x-theme #mobile-bottom-nav {
  background: rgba(255, 255, 255, 0.96) !important;
  border-top-color: var(--x-border) !important;
}
body.x-theme .mobile-tab-btn--active {
  color: var(--x-accent) !important;
}

/* Mobile sheet */
body.x-theme .mobile-nav-sheet__panel {
  background: var(--x-bg-elevated) !important;
  border-top: 1px solid var(--x-border);
  box-shadow: 0 -8px 32px rgba(15, 20, 25, 0.1) !important;
}
body.x-theme .mobile-sheet-item {
  background: var(--x-bg) !important;
  border-color: var(--x-border) !important;
}
body.x-theme .mobile-sheet-item--active {
  background: var(--x-text) !important;
  border-color: var(--x-text) !important;
}
body.x-theme .mobile-sheet-item--active .mobile-sheet-item__label {
  color: #fff !important;
}
body.x-theme .mobile-sheet-item__icon {
  background: var(--x-accent-muted) !important;
  color: var(--x-accent) !important;
  border-color: rgba(29, 155, 240, 0.2) !important;
}
body.x-theme .mobile-sheet-item--active .mobile-sheet-item__icon {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}
body.x-theme .mobile-nav-sheet__cta {
  background: var(--x-text) !important;
  color: #fff !important;
}
body.x-theme .mobile-nav-sheet__footer {
  background: var(--x-bg-elevated) !important;
}

body.x-theme #mobile-nav-toggle {
  background: var(--x-bg-subtle) !important;
  border-color: var(--x-border) !important;
  color: var(--x-text) !important;
}
body.x-theme #mobile-nav-toggle[aria-expanded="true"] {
  background: var(--x-accent-muted) !important;
  color: var(--x-accent) !important;
  border-color: rgba(29, 155, 240, 0.3) !important;
}

/* Floating contact */
body.x-theme .cs-float-btn {
  background-color: var(--x-accent) !important;
  box-shadow: 0 4px 16px rgba(29, 155, 240, 0.35) !important;
}
body.x-theme .cs-float-btn:hover {
  background-color: var(--x-accent-hover) !important;
}
@keyframes x-cs-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(29, 155, 240, 0.35), 0 0 0 0 rgba(29, 155, 240, 0.35); }
  50% { box-shadow: 0 4px 16px rgba(29, 155, 240, 0.35), 0 0 0 8px rgba(29, 155, 240, 0); }
}
body.x-theme .cs-float-btn-pulse {
  animation: x-cs-pulse 2.5s ease-in-out infinite;
}

body.x-theme .about-stat-col + .about-stat-col::before {
  background-color: var(--x-border);
}

body.x-theme #video-modal .p-4.sm\:p-5.bg-gray-50 {
  background-color: var(--x-bg-subtle) !important;
}

body.x-theme .site-card-grid {
  background-color: var(--x-bg-elevated) !important;
  border-color: var(--x-border) !important;
}
body.x-theme .site-card-grid:hover {
  background-color: var(--x-bg-hover) !important;
}
body.x-theme #video-grid h3,
body.x-theme .site-card-grid h3 {
  color: var(--x-text) !important;
}
body.x-theme #video-grid .site-card-grid:hover h3,
body.x-theme .site-card-grid.group:hover h3 {
  color: var(--x-accent) !important;
}

body.x-theme .border-dashed.border-gray-200 {
  border-color: var(--x-border) !important;
}

body.x-theme #custom-modal-panel .bg-gray-50,
body.x-theme #about-qr-modal-panel .bg-gray-50,
body.x-theme #contact-modal-panel .bg-gray-50,
body.x-theme #custom-modal ul.bg-gray-50 {
  background-color: var(--x-bg-subtle) !important;
  border-color: var(--x-border) !important;
}


/* —— 管理后台（/lirirong）与官网统一 —— */
body.x-theme #login-page {
  background-color: var(--x-bg-subtle) !important;
}
body.x-theme #modal .bg-white,
body.x-theme #modal-panel {
  background-color: var(--x-bg-elevated) !important;
}
body.x-theme #modal .border-gray-100 {
  border-color: var(--x-border) !important;
}
body.x-theme #app-sidebar .border-gray-100,
body.x-theme #app-sidebar .border-t {
  border-color: var(--x-border) !important;
}
body.x-theme .admin-page-header .text-gray-900,
body.x-theme #page-title {
  color: var(--x-text) !important;
}
body.x-theme .admin-card h3,
body.x-theme .admin-list-item .font-medium {
  color: var(--x-text) !important;
}
body.x-theme .admin-list-item .text-gray-400,
body.x-theme .empty-state {
  color: var(--x-text-faint) !important;
}
body.x-theme #btn-menu:hover {
  background-color: var(--x-bg-hover) !important;
}