/* ===== LinkSight Theme System ===== */
:root, [data-theme=dark] {
  --ls-bg: #0a0a0f;
  --ls-surface: #0f0f14;
  --ls-surface-2: #1a1a2e;
  --ls-card-bg: rgba(255,255,255,0.03);
  --ls-card-border: rgba(255,255,255,0.08);
  --ls-text: #ffffff;
  --ls-text-2: #e5e7eb;
  --ls-text-3: #d1d5db;
  --ls-text-muted: #9ca3af;
  --ls-border: rgba(255,255,255,0.1);
  --ls-hover-bg: rgba(255,255,255,0.05);
  --ls-input-bg: #1a1a2e;
  --ls-nav-bg: rgba(10,10,10,0.85);
}

[data-theme=light] {
  --ls-bg: #f8fafc;
  --ls-surface: #ffffff;
  --ls-surface-2: #f1f5f9;
  --ls-card-bg: #ffffff;
  --ls-card-border: rgba(0,0,0,0.08);
  --ls-text: #0f172a;
  --ls-text-2: #334155;
  --ls-text-3: #64748b;
  --ls-text-muted: #94a3b8;
  --ls-border: rgba(0,0,0,0.1);
  --ls-hover-bg: rgba(0,0,0,0.03);
  --ls-input-bg: #ffffff;
  --ls-nav-bg: rgba(248,250,252,0.9);
}

/* ===== Base ===== */
[data-theme=light] body {
  background-color: var(--ls-bg) !important;
  color: var(--ls-text-2) !important;
}

/* ===== 导航栏强制覆盖 ===== */
[data-theme=light] aside,
[data-theme=light] .nav-drawer {
  background-color: var(--ls-surface) !important;
}
[data-theme=light] aside .border-b,
[data-theme=light] aside .border-r,
[data-theme=light] .nav-drawer .border-b,
[data-theme=light] .nav-drawer .border-r {
  border-color: var(--ls-border) !important;
}

/* ===== 所有输入框兜底覆盖 ===== */
[data-theme=light] input,
[data-theme=light] select,
[data-theme=light] textarea {
  background-color: var(--ls-input-bg) !important;
  color: var(--ls-text) !important;
  border-color: var(--ls-border) !important;
}
[data-theme=light] input::placeholder,
[data-theme=light] textarea::placeholder {
  color: var(--ls-text-muted) !important;
}

/* ===== Tailwind class 覆盖 ===== */
[data-theme=light] .bg-\[#0a0a0f\] { background-color: var(--ls-bg) !important; }
[data-theme=light] .bg-\[#0f0f14\] { background-color: var(--ls-surface) !important; }
[data-theme=light] .bg-\[#1a1a2e\] { background-color: var(--ls-surface-2) !important; }
[data-theme=light] .bg-black\/60 { background-color: rgba(0,0,0,0.2) !important; }

[data-theme=light] .border-white\/5,
[data-theme=light] .border-white\/10 { border-color: var(--ls-border) !important; }

[data-theme=light] .text-gray-100 { color: var(--ls-text-2) !important; }
[data-theme=light] .text-gray-200 { color: var(--ls-text-2) !important; }
[data-theme=light] .text-gray-300 { color: var(--ls-text-3) !important; }
[data-theme=light] .text-gray-400 { color: var(--ls-text-muted) !important; }
[data-theme=light] .text-gray-500 { color: var(--ls-text-muted) !important; }
[data-theme=light] .text-gray-600 { color: var(--ls-text-3) !important; }
[data-theme=light] .text-white { color: var(--ls-text) !important; }

[data-theme=light] .placeholder-gray-500::placeholder { color: var(--ls-text-muted) !important; }

[data-theme=light] .hover\:text-white:hover { color: var(--ls-text) !important; }
[data-theme=light] .hover\:bg-white\/5:hover { background-color: var(--ls-hover-bg) !important; }
[data-theme=light] .hover\:bg-white\/\[0\.03\]:hover { background-color: var(--ls-hover-bg) !important; }
[data-theme=light] .hover\:bg-white\/\[0\.05\]:hover { background-color: var(--ls-hover-bg) !important; }

/* ===== 自定义 class ===== */
[data-theme=light] .card {
  background: var(--ls-card-bg) !important;
  border-color: var(--ls-card-border) !important;
}
[data-theme=light] .btn-secondary {
  background: rgba(0,0,0,0.05) !important;
  color: var(--ls-text) !important;
}
[data-theme=light] .nav-item-active {
  background: rgba(225,29,72,0.08) !important;
}
[data-theme=light] .step-dot.pending {
  background: var(--ls-hover-bg) !important;
  color: var(--ls-text-muted) !important;
  border-color: var(--ls-border) !important;
}
[data-theme=light] .dimension-card {
  background: var(--ls-card-bg) !important;
  border-color: var(--ls-card-border) !important;
}
[data-theme=light] .dimension-card:hover {
  background: rgba(225,29,72,0.03) !important;
}
[data-theme=light] .score-ring-bg {
  stroke: var(--ls-card-border) !important;
}
[data-theme=light] .step-line {
  background: var(--ls-border) !important;
}
[data-theme=light] #mobile-nav-overlay {
  background: rgba(0,0,0,0.2) !important;
}

/* ===== 主题切换按钮 ===== */
[data-theme=light] #theme-toggle-btn {
  border-color: var(--ls-border) !important;
  background-color: var(--ls-hover-bg) !important;
  color: var(--ls-text-muted) !important;
}
[data-theme=light] #theme-toggle-btn:hover {
  background-color: rgba(0,0,0,0.06) !important;
  color: var(--ls-text) !important;
}

/* ===== 统一组件系统 ===== */

/* --- Button --- */
.ls-btn {
  background: linear-gradient(135deg, #E11D48, #991B1B);
  color: white; padding: 10px 20px; border-radius: 8px;
  font-weight: 600; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 0.2s; font-size: 14px; line-height: 1.4;
}
.ls-btn:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); }
.ls-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ls-btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 6px; }
.ls-btn-lg { padding: 12px 28px; font-size: 15px; border-radius: 10px; }

.ls-btn-secondary {
  background: var(--ls-hover-bg); color: var(--ls-text);
  padding: 10px 20px; border-radius: 8px; border: 1px solid var(--ls-border);
  font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: all 0.2s; font-size: 14px;
}
.ls-btn-secondary:hover:not(:disabled) { background: var(--ls-border); }
.ls-btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }

.ls-btn-ghost {
  background: transparent; color: var(--ls-text-muted);
  padding: 8px 14px; border-radius: 8px; border: none;
  font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: all 0.2s; font-size: 14px;
}
.ls-btn-ghost:hover { background: var(--ls-hover-bg); color: var(--ls-text); }

/* --- Input / Select / Textarea --- */
.ls-input {
  background: var(--ls-input-bg); border: 1px solid var(--ls-border);
  border-radius: 8px; padding: 10px 14px; color: var(--ls-text);
  font-size: 14px; width: 100%; outline: none;
  transition: border-color 0.2s;
}
.ls-input:focus { border-color: #E11D48; }
.ls-input::placeholder { color: var(--ls-text-muted); }

.ls-select {
  background: var(--ls-input-bg); border: 1px solid var(--ls-border);
  border-radius: 8px; padding: 10px 14px; color: var(--ls-text);
  font-size: 14px; width: 100%; outline: none;
  transition: border-color 0.2s; appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 10px center; background-repeat: no-repeat; background-size: 16px;
  padding-right: 36px;
}
[data-theme=light] .ls-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}
.ls-select:focus { border-color: #E11D48; }

.ls-textarea {
  background: var(--ls-input-bg); border: 1px solid var(--ls-border);
  border-radius: 8px; padding: 10px 14px; color: var(--ls-text);
  font-size: 14px; width: 100%; outline: none;
  transition: border-color 0.2s; resize: vertical;
}
.ls-textarea:focus { border-color: #E11D48; }
.ls-textarea::placeholder { color: var(--ls-text-muted); }

/* --- Card --- */
.ls-card {
  background: var(--ls-card-bg); border: 1px solid var(--ls-card-border);
  border-radius: 12px; padding: 20px;
  transition: all 0.2s;
}
.ls-card-hover:hover {
  border-color: rgba(225,29,72,0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(225,29,72,0.08);
}

/* --- Table --- */
.ls-table {
  width: 100%; font-size: 14px; border-collapse: collapse;
}
.ls-table thead tr {
  border-bottom: 1px solid var(--ls-border);
  color: var(--ls-text-muted);
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
}
.ls-table thead th {
  text-align: left; padding: 12px 16px; font-weight: 500;
}
.ls-table tbody tr {
  border-bottom: 1px solid var(--ls-border);
  transition: background 0.15s;
}
.ls-table tbody tr:hover {
  background: var(--ls-hover-bg);
}
.ls-table tbody td {
  padding: 14px 16px; vertical-align: middle;
}
.ls-table tbody td:first-child,
.ls-table thead th:first-child { padding-left: 20px; }
.ls-table tbody td:last-child,
.ls-table thead th:last-child { padding-right: 20px; }

/* --- Empty State --- */
.ls-empty {
  text-align: center; padding: 64px 20px; color: var(--ls-text-muted);
}
.ls-empty i {
  font-size: 48px; margin-bottom: 16px; opacity: 0.3; display: block;
}
.ls-empty .title {
  font-size: 15px; font-weight: 500; color: var(--ls-text-3); margin-bottom: 6px;
}
.ls-empty .hint {
  font-size: 13px; color: var(--ls-text-muted);
}

/* --- Page Title --- */
.ls-page-title {
  font-size: 20px; font-weight: 700; color: var(--ls-text);
  margin-bottom: 4px;
}
.ls-page-subtitle {
  font-size: 13px; color: var(--ls-text-muted);
}

/* --- Section Title --- */
.ls-section-title {
  font-size: 14px; font-weight: 600; color: var(--ls-text-2);
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}

/* --- Badge --- */
.ls-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 500;
}
.ls-badge-red { background: rgba(225,29,72,0.1); color: #E11D48; }
.ls-badge-green { background: rgba(34,197,94,0.1); color: #22c55e; }
.ls-badge-blue { background: rgba(59,130,246,0.1); color: #3b82f6; }
.ls-badge-yellow { background: rgba(234,179,8,0.1); color: #eab308; }
.ls-badge-gray { background: var(--ls-hover-bg); color: var(--ls-text-muted); }
.ls-badge-orange { background: rgba(249,115,22,0.1); color: #f97316; }

/* --- Tag Pill --- */
.ls-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all 0.15s;
}
.ls-tag:hover { opacity: 0.85; }
.ls-tag.active { box-shadow: 0 0 0 2px rgba(225,29,72,0.3); }

/* --- Divider --- */
.ls-divider {
  height: 1px; background: var(--ls-border); margin: 16px 0;
}

/* --- Modal / Drawer backdrop --- */
.ls-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  z-index: 50; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
[data-theme=light] .ls-backdrop { background: rgba(0,0,0,0.4); }

.ls-drawer {
  position: fixed; top: 0; right: 0; width: 480px; max-width: 90vw;
  height: 100vh; background: var(--ls-surface);
  border-left: 1px solid var(--ls-border);
  z-index: 60; overflow-y: auto;
  animation: slideInRight 0.3s ease;
}
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

/* --- Tabs --- */
.ls-tabs {
  display: flex; gap: 4px; padding: 4px;
  background: var(--ls-hover-bg); border-radius: 10px;
}
.ls-tab {
  padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500;
  color: var(--ls-text-muted); cursor: pointer; border: none; background: transparent;
  transition: all 0.2s;
}
.ls-tab.active {
  background: var(--ls-card-bg); color: var(--ls-text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.ls-tab:hover:not(.active) { color: var(--ls-text-2); }

/* --- Search bar --- */
.ls-search {
  position: relative; flex: 1;
}
.ls-search i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ls-text-muted); font-size: 14px; pointer-events: none;
}
.ls-search input {
  width: 100%; padding: 10px 14px 10px 38px;
  background: var(--ls-input-bg); border: 1px solid var(--ls-border);
  border-radius: 8px; color: var(--ls-text); font-size: 14px;
  outline: none; transition: border-color 0.2s;
}
.ls-search input:focus { border-color: #E11D48; }
.ls-search input::placeholder { color: var(--ls-text-muted); }

/* --- Pagination --- */
.ls-pagination {
  display: flex; align-items: center; gap: 4px;
}
.ls-page-btn {
  min-width: 32px; height: 32px; padding: 0 8px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; font-size: 13px; font-weight: 500;
  background: transparent; color: var(--ls-text-muted);
  border: 1px solid transparent; cursor: pointer;
  transition: all 0.15s;
}
.ls-page-btn:hover:not(:disabled) { background: var(--ls-hover-bg); color: var(--ls-text); }
.ls-page-btn.active { background: #E11D48; color: white; border-color: #E11D48; }
.ls-page-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* --- Skeleton --- */
.ls-skeleton {
  background: linear-gradient(90deg, var(--ls-hover-bg) 25%, var(--ls-card-bg) 50%, var(--ls-hover-bg) 75%);
  background-size: 200% 100%; animation: skeleton 1.5s infinite;
  border-radius: 6px;
}
@keyframes skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Toast --- */
.ls-toast {
  position: fixed; bottom: 24px; right: 24px;
  padding: 12px 20px; border-radius: 10px; font-size: 14px; font-weight: 500;
  color: white; z-index: 100; animation: toastSlide 0.3s ease;
  display: flex; align-items: center; gap: 10px;
}
.ls-toast-success { background: #22c55e; }
.ls-toast-error { background: #E11D48; }
.ls-toast-info { background: #3b82f6; }
@keyframes toastSlide {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ===== 自定义滚动条 ===== */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

[data-theme=light] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
[data-theme=light] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }

/* Firefox */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; }
[data-theme=light] * { scrollbar-color: rgba(0,0,0,0.15) transparent; }


/* ===== Product Theme Colors ===== */
:root, [data-theme=dark] {
  --ls-wave: #10B981;
  --ls-wave-soft: rgba(16, 185, 129, 0.12);
  --ls-zhi: #7C3AED;
  --ls-zhi-soft: rgba(124, 58, 237, 0.12);
  --ls-sight: #E11D48;
  --ls-sight-soft: rgba(225, 29, 72, 0.12);
}

[data-theme=light] {
  --ls-wave: #059669;
  --ls-wave-soft: rgba(5, 150, 105, 0.10);
  --ls-zhi: #5B21B6;
  --ls-zhi-soft: rgba(91, 33, 182, 0.10);
  --ls-sight: #E11D48;
  --ls-sight-soft: rgba(225, 29, 72, 0.10);
}

.ls-wave-text { color: var(--ls-wave) !important; }
.ls-wave-bg { background-color: var(--ls-wave-soft) !important; }
.ls-wave-border { border-color: var(--ls-wave) !important; }
.ls-zhi-text { color: var(--ls-zhi) !important; }
.ls-zhi-bg { background-color: var(--ls-zhi-soft) !important; }
.ls-zhi-border { border-color: var(--ls-zhi) !important; }
.ls-sight-text { color: var(--ls-sight) !important; }
.ls-sight-bg { background-color: var(--ls-sight-soft) !important; }
.ls-sight-border { border-color: var(--ls-sight) !important; }

/* ===== Polished cards ===== */
.ls-card-polish {
  background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ls-card-polish:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.22);
}

/* Product strip on top of cards */
.ls-product-strip-wave { border-top: 3px solid var(--ls-wave); }
.ls-product-strip-zhi { border-top: 3px solid var(--ls-zhi); }
.ls-product-strip-sight { border-top: 3px solid var(--ls-sight); }

/* Source badges */
.ls-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 500;
}