/* 亮色模式强制覆盖 */
html.light-theme,
body.light-theme,
.light-theme {
  background-color: #f8fafc !important;
  color: #111827;
}

/* 统一工具页背景 */
.page-section:not(.secondary-page) {
  background: #0f172a;
}

.light-theme .page-section:not(.secondary-page) {
  background: #f8fafc !important;
}

/* 恢复标题颜色为深黑色 */
.light-theme h1,
.light-theme h2,
.light-theme h3,
.light-theme h4,
.light-theme h5,
.light-theme .title,
.light-theme .tool-title,
.light-theme .section-title,
.light-theme .card-title {
  color: #000000;
  font-weight: 700;
}

/* 基础边框颜色 */
.light-theme * {
  border-color: #e2e8f0;
}

.light-theme .sidebar-nav {
  background: #ffffff;
  border-right: 1px solid #e2e8f0;
}

.light-theme .sidebar-footer {
  border-top: 1px solid #f1f5f9;
}

.light-theme .nav-header {
  border-bottom: 1px solid #f1f5f9;
}

.light-theme .nav {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.05), 
    0 2px 4px -1px rgba(0, 0, 0, 0.03),
    inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

.light-theme .nav-center .category-options {
  background: transparent;
  border: none;
}

.light-theme .nav-center .category-option {
  color: #64748b;
}

.light-theme .nav-center .category-option:hover {
  color: #0f172a;
  background: rgba(0, 0, 0, 0.05);
}

.light-theme .nav-center .category-option.active {
  background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.25);
}

.light-theme .nav-brand,
 .light-theme .top-logo .logo-text,
 .light-theme .category-option {
   color: #1e293b;
 }

 .light-theme .nav-section-title {
   color: #94a3b8;
 }

.light-theme .logo-icon-container {
  background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.2);
}

.light-theme .logo-icon-container::after {
  background: radial-gradient(circle, rgba(6, 182, 212, 0.2) 0%, transparent 70%);
}

.light-theme .top-logo .logo-text,
.light-theme .nav-brand .logo-text {
  color: #1e293b; /* 亮色模式下使用参考图中的深色实色 */
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
}

.light-theme .category-option:hover {
  background: #f1f5f9;
}

.light-theme .category-option.active {
  background: linear-gradient(135deg, #10b981, #06b6d4);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.25);
}

/* 亮色模式下的按钮与菜单 */
.light-theme .lang-btn, 
.light-theme .theme-btn {
  background: rgba(255, 255, 255, 0.5);
  color: #1e293b;
  border-color: #e2e8f0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.light-theme .lang-btn:hover, 
.light-theme .theme-btn:hover {
  background: #ffffff;
  border-color: #10b981;
  color: #059669;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.light-theme .lang-menu {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.light-theme .lang-option {
  color: #0f172a;
}

.light-theme .lang-option:hover {
  background: #f1f5f9;
}

.light-theme .lang-option.active {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(6, 182, 212, 0.1));
  color: #059669;
}

.light-theme.sidebar-collapsed .sidebar-nav .category-option:hover::after {
  background: #ffffff;
  color: #0f172a;
  border-color: #e2e8f0;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.light-theme.sidebar-collapsed .sidebar-nav .category-option:hover::before {
  border-color: transparent #e2e8f0 transparent transparent;
}

.light-theme .paging-content {
  background: transparent;
}

.light-theme .title span.logo {
  background: linear-gradient(135deg, #10b981, #06b6d4);
  color: #ffffff;
}

.light-theme .subtitle {
  color: #6b7280;
}

/* 确保面板类容器在亮色模式下为纯白 */
.light-theme .panel,
.light-theme .card,
.light-theme .qr-preview-container,
.light-theme .qr-tabs,
.light-theme .side-main-card,
.light-theme .tool-container,
.light-theme .editor-area .panel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.light-theme .panel-header {
  border-bottom-color: #e2e8f0;
  background: #f8fafc;
  border-radius: 12px 12px 0 0;
}

.light-theme .panel-footer {
  border-top-color: #e2e8f0;
  background: #f8fafc;
  border-radius: 0 0 12px 12px;
}

.light-theme .panel-title {
  color: #1e293b;
  font-weight: 600;
}

.light-theme .panel-body {
  color: #1e293b;
}

.light-theme .form-label {
  color: #334155;
  font-weight: 500;
}

.light-theme .unit,
.light-theme .range-value {
  color: #475569;
}

.light-theme .status-text {
  color: #475569;
}

.light-theme .panel-title-dot {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
}

.light-theme button.primary {
  box-shadow: none;
}

.light-theme button.secondary {
  background: #ffffff;
  color: #111827;
  border-color: #d1d5db;
}

.light-theme .panel-actions button {
  color: #111827;
}

.light-theme button.secondary:hover {
  background: #ffffff;
  border-color: #10b981;
  color: #10b981;
}

.light-theme .pill-input,
.light-theme .qr-select,
.light-theme .qr-color-input {
  background: #ffffff;
  border-color: #d1d5db;
  box-shadow: 0 0 0 1px rgba(209, 213, 219, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.04);
  color: #111827;
}

.light-theme .qr-select option {
  background-color: #ffffff;
  color: #111827;
}

.light-theme .pill-input:hover,
.light-theme .qr-select:hover,
.light-theme .qr-color-input:hover {
  background: #ffffff;
  border-color: #10b981;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.12);
}

.light-theme #clearBtn:hover {
  background: #fff5f5 !important;
  border-color: #ef4444 !important;
  color: #dc2626 !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.12) !important;
}

.light-theme .qr-color-input span {
  color: #64748b;
}

.light-theme .qr-color-input:hover span {
  color: #1e293b;
}

.light-theme .pill-select-trigger {
  background: #ffffff;
  border-color: #d1d5db;
  color: #1e293b;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.light-theme .pill-select-trigger::after {
  border-top-color: #4b5563;
}

.light-theme .pill-select-menu {
  background-color: rgb(255, 255, 255) !important;
  background: rgb(255, 255, 255) !important;
  border-color: #e5e7eb;
  box-shadow: 0 18px 40px rgba(148, 163, 184, 0.65);
  opacity: 1 !important;
  visibility: visible !important;
}

.light-theme .pill-select-option {
  color: #111827;
  background-color: rgb(255, 255, 255) !important;
  background: rgb(255, 255, 255) !important;
}

.light-theme .pill-select-option span.hint {
  color: #64748b;
}

.light-theme .pill-select-option:hover {
  background: rgba(16, 185, 129, 0.08) !important;
  color: #059669;
}

.light-theme .pill-select-option.active {
  background: linear-gradient(135deg, #bbf7d0, #dbeafe);
  color: #065f46;
}

.light-theme .editor-highlight .dup-key {
  background: rgba(217, 119, 6, 0.22);
  border-bottom-color: #d97706;
}

.light-theme textarea,
.light-theme .code-output {
  background: #ffffff;
  border-color: #d1d5db;
  color: #111827;
  overscroll-behavior: contain;
}

.light-theme textarea.warn-duplicate {
  border-color: #d97706;
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.35);
  background-image: repeating-linear-gradient(45deg, rgba(217, 119, 6, 0.15) 0, rgba(217, 119, 6, 0.15) 8px, transparent 8px, transparent 16px);
}

.light-theme textarea:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.7);
}

.light-theme textarea::placeholder,
.light-theme .code-output:empty::before {
  color: #9ca3af;
  opacity: 1;
}

.light-theme .token-key {
  color: #059669; /* 品牌深绿 */
  font-weight: 700;
}

.light-theme .token-string {
  color: #d97706; /* 琥珀黄：作为字符串，明亮且醒目 */
}

.light-theme .token-number {
  color: #7c3aed; /* 睿智紫：亮色模式下使用深紫色 */
  font-weight: 600;
}

.light-theme .token-boolean {
  color: #f472b6; /* 浅粉色：亮色模式下使用柔和的粉色 */
  font-weight: 700;
}

.light-theme .token-null {
  color: #dc2626; /* 醒目红：亮色模式下的深红色 */
  font-weight: 700;
}

.light-theme .token-brace,
.light-theme .token-bracket,
.light-theme .token-comma,
.light-theme .token-colon {
  color: #64748b; /* 蓝灰色符号，拒绝纯黑 */
  font-weight: 500;
}

.light-theme .json-toggle {
  color: #94a3b8;
}

.light-theme .json-toggle:hover {
  color: #059669;
  text-shadow: 0 0 8px rgba(5, 150, 105, 0.3);
}

.light-theme .json-summary {
  background: rgba(217, 119, 6, 0.08);
  color: #d97706;
  border: 1px dashed rgba(217, 119, 6, 0.4);
}

.light-theme .json-summary:hover {
  background: rgba(217, 119, 6, 0.15);
  border-color: #d97706;
  border-style: solid;
  color: #b45309;
}

.light-theme .status-text {
  color: #6b7280;
}

.light-theme .badge {
  background: #f9fafb;
  border-color: #e5e7eb;
  color: #6b7280;
}

.light-theme .app-footer {
  background: transparent;
  border: none;
  color: #64748b;
}

/* 亮色主题下加密页面logo图标居中 */
.light-theme .text-icon {
  display: inline-grid;
  place-items: center;
  left: 6%;
}

/* 默认主题下顶部背景动效保持原有样式 */
/* .hero-bg-glow 样式已经在 home.css 中定义 */

/* 亮色主题下顶部背景动效 */
.light-theme .hero-bg-glow,
.light-theme .bg-decoration,
.light-theme .glow-element {
  display: none !important;
  background: none !important;
  background-image: none !important;
}