/**
 * 首涂46 深色主题增强样式
 * 提供更现代、更舒适的深色UI体验
 * 
 * 应用方式：在 head.html 或 include.html 中引入此文件
 * <link rel="stylesheet" href="/template/shoutu46/assets/css/dark-theme-enhanced.css">
 */

/* ============================================
   深色主题配色系统
   ============================================ */

:root {
  /* 深色模式 - 主调色板 */
  --dark-bg-primary: #0f1419;      /* 主背景 */
  --dark-bg-secondary: #1a1f2e;    /* 次级背景 */
  --dark-bg-tertiary: #252d3a;     /* 三级背景 */
  --dark-bg-hover: #2d3544;        /* 悬停背景 */
  
  /* 文字颜色 */
  --dark-text-primary: #e8eaed;    /* 主文字 */
  --dark-text-secondary: #b8bcc4;  /* 次级文字 */
  --dark-text-tertiary: #8a8f97;   /* 三级文字 */
  
  /* 边框颜色 */
  --dark-border-light: #2d3544;    /* 浅边框 */
  --dark-border-default: #404854;  /* 默认边框 */
  --dark-border-dark: #4a5562;     /* 深边框 */
  
  /* 功能色 */
  --dark-accent: #ff4d5e;          /* 强调色 */
  --dark-success: #26d07c;         /* 成功 */
  --dark-warning: #ffa722;         /* 警告 */
  --dark-error: #ff4d5e;           /* 错误 */
  --dark-info: #2196f3;            /* 信息 */
  
  /* 渐变色 */
  --dark-gradient-primary: linear-gradient(135deg, #1a1f2e, #252d3a);
  --dark-gradient-accent: linear-gradient(135deg, #ff4d5e, #ff7a82);
}

/* ============================================
   theme2 深色模式增强
   ============================================ */

html.theme2 {
  background-color: var(--dark-bg-primary);
  color: var(--dark-text-primary);
  color-scheme: dark;
}

.theme2 {
  background-color: var(--dark-bg-primary);
  color: var(--dark-text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .theme2,
  .theme2 *,
  .theme2 *::before,
  .theme2 *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* 背景色增强 */
.theme2,
.theme2 .bj {
  background-color: var(--dark-bg-primary);
}

.theme2 .box,
.theme2 .public-box,
.theme2 .arrow,
.theme2 .content-box,
.theme2 .list-box {
  background-color: var(--dark-bg-secondary);
  border-color: var(--dark-border-light);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.theme2 .box:hover,
.theme2 .public-box:hover,
.theme2 .content-box:hover,
.theme2 .list-box:hover {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-border-default);
}

/* 浅色背景色 */
.theme2 .anthology-list-play li a,
.theme2 .top-back a,
.theme2 .msg-content .login-user .input,
.theme2 .website-info .this-right .this-bnt,
.theme2 .website-info .this-left {
  background-color: var(--dark-bg-tertiary);
}

/* 更浅的背景 */
.theme2 .share-url,
.theme2 .window-box .bj3 .gbook-form .textarea,
.theme2 .window-box .bj3 .input,
.theme2 .window-box .bj3 .textarea,
.theme2 .head-search {
  background-color: var(--dark-bg-hover);
}

/* ============================================
   文字颜色增强
   ============================================ */

.theme2 .cor1,
.theme2 .l-bj {
  color: var(--dark-text-primary);
}

.theme2 .cor2 {
  color: var(--dark-text-secondary);
}

.theme2 .cor3 {
  color: var(--dark-text-tertiary);
}

.theme2 .cor4,
.theme2 .gen-history-list a,
.theme2 .slide-time-list a,
.theme2 a {
  color: var(--dark-text-primary);
}

.theme2 .cor5 {
  color: var(--dark-text-tertiary);
}

/* 链接颜色 */
.theme2 a {
  color: var(--dark-text-primary);
  transition: color 0.2s ease;
}

.theme2 a:hover {
  color: var(--dark-accent);
  text-shadow: 0 0 8px rgba(255, 77, 94, 0.3);
}

/* ============================================
   边框颜色增强
   ============================================ */

.theme2 .br {
  border-color: var(--dark-border-light);
}

.theme2 .border {
  border: 1px solid var(--dark-border-default);
}

.theme2 .b-b {
  border-bottom-color: var(--dark-border-light);
}

.theme2 .b-r {
  border-right-color: var(--dark-border-light);
}

/* ============================================
   表单元素增强
   ============================================ */

.theme2 input[type="text"],
.theme2 input[type="password"],
.theme2 input[type="email"],
.theme2 input[type="search"],
.theme2 .input,
.theme2 textarea,
.theme2 select {
  background-color: var(--dark-bg-hover);
  color: var(--dark-text-primary);
  border-color: var(--dark-border-default);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.theme2 input[type="text"]:focus,
.theme2 input[type="password"]:focus,
.theme2 input[type="email"]:focus,
.theme2 input[type="search"]:focus,
.theme2 .input:focus,
.theme2 textarea:focus,
.theme2 select:focus {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-accent);
  box-shadow: 0 0 8px rgba(255, 77, 94, 0.2);
}

.theme2 input::placeholder,
.theme2 textarea::placeholder {
  color: var(--dark-text-tertiary);
  opacity: 0.6;
}

/* ============================================
   按钮增强
   ============================================ */

.theme2 .btn,
.theme2 button,
.theme2 .button {
  background-color: var(--dark-accent);
  color: #fff;
  border-color: var(--dark-accent);
  transition: all 0.3s ease;
}

.theme2 .btn:hover,
.theme2 button:hover,
.theme2 .button:hover {
  background: var(--dark-gradient-accent);
  box-shadow: 0 4px 12px rgba(255, 77, 94, 0.3);
  transform: translateY(-2px);
}

.theme2 .btn:active,
.theme2 button:active,
.theme2 .button:active {
  transform: translateY(0);
}

.theme2 .btn-secondary,
.theme2 .secondary-btn {
  background-color: var(--dark-bg-tertiary);
  color: var(--dark-text-primary);
  border-color: var(--dark-border-default);
}

.theme2 .btn-secondary:hover,
.theme2 .secondary-btn:hover {
  background-color: var(--dark-bg-hover);
  border-color: var(--dark-accent);
  color: var(--dark-accent);
}

/* ============================================
   卡片和容器增强
   ============================================ */

.theme2 .card,
.theme2 .item,
.theme2 .module {
  background-color: var(--dark-bg-secondary);
  border: 1px solid var(--dark-border-light);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.theme2 .card:hover,
.theme2 .item:hover,
.theme2 .module:hover {
  background-color: var(--dark-bg-tertiary);
  border-color: var(--dark-border-default);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}

/* ============================================
   轮播图增强
   ============================================ */

.theme2 .swiper-pagination-bullet {
  background-color: rgba(255, 255, 255, 0.3);
  border-color: var(--dark-border-default);
}

.theme2 .swiper-pagination-bullet-active {
  background-color: var(--dark-accent);
  box-shadow: 0 0 8px rgba(255, 77, 94, 0.5);
}

.theme2 .swiper-button-prev,
.theme2 .swiper-button-next {
  color: rgba(255, 255, 255, 0.6);
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.theme2 .swiper-button-prev:hover,
.theme2 .swiper-button-next:hover {
  color: var(--dark-accent);
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* ============================================
   滚动条增强
   ============================================ */

.theme2::-webkit-scrollbar {
  width: 8px;
  background-color: var(--dark-bg-primary);
}

.theme2::-webkit-scrollbar-track {
  background-color: var(--dark-bg-secondary);
  border-radius: 4px;
}

.theme2::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--dark-accent), rgba(255, 77, 94, 0.6));
  border-radius: 4px;
  transition: background 0.2s ease;
}

.theme2::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--dark-accent), var(--dark-accent));
  box-shadow: 0 0 6px rgba(255, 77, 94, 0.3);
}

/* ============================================
   列表和表格增强
   ============================================ */

.theme2 li,
.theme2 tr {
  border-color: var(--dark-border-light);
}

.theme2 tbody tr:hover {
  background-color: var(--dark-bg-hover);
}

.theme2 .list-item,
.theme2 .table-row {
  border-bottom-color: var(--dark-border-light);
  transition: background-color 0.2s ease;
}

.theme2 .list-item:hover,
.theme2 .table-row:hover {
  background-color: var(--dark-bg-hover);
}

/* ============================================
   头部和导航增强
   ============================================ */

.theme2 .head,
.theme2 .header,
.theme2 nav,
.theme2 .navbar {
  background: var(--dark-gradient-primary);
  border-bottom: 1px solid var(--dark-border-light);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.theme2 .head-nav a,
.theme2 .nav-item,
.theme2 .navbar a {
  color: var(--dark-text-secondary);
  transition: color 0.2s ease;
}

.theme2 .head-nav a:hover,
.theme2 .nav-item:hover,
.theme2 .navbar a:hover,
.theme2 .head-nav a.active,
.theme2 .nav-item.active,
.theme2 .navbar a.active {
  color: var(--dark-accent);
  text-shadow: 0 0 8px rgba(255, 77, 94, 0.3);
}

/* ============================================
   页脚增强
   ============================================ */

.theme2 .foot,
.theme2 footer {
  background: var(--dark-gradient-primary);
  border-top: 1px solid var(--dark-border-light);
  color: var(--dark-text-secondary);
}

.theme2 .foot a,
.theme2 footer a {
  color: var(--dark-text-secondary);
  transition: color 0.2s ease;
}

.theme2 .foot a:hover,
.theme2 footer a:hover {
  color: var(--dark-accent);
}

/* ============================================
   模态框和弹窗增强
   ============================================ */

.theme2 .modal,
.theme2 .dialog,
.theme2 .window-box,
.theme2 .popup {
  background-color: var(--dark-bg-secondary);
  border: 1px solid var(--dark-border-default);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.theme2 .modal-header,
.theme2 .dialog-header,
.theme2 .window-title {
  background-color: var(--dark-bg-tertiary);
  border-bottom: 1px solid var(--dark-border-light);
  color: var(--dark-text-primary);
}

.theme2 .modal-close,
.theme2 .dialog-close,
.theme2 .window-close {
  color: var(--dark-text-secondary);
  transition: color 0.2s ease;
}

.theme2 .modal-close:hover,
.theme2 .dialog-close:hover,
.theme2 .window-close:hover {
  color: var(--dark-accent);
}

/* ============================================
   标签和徽章增强
   ============================================ */

.theme2 .tag,
.theme2 .badge,
.theme2 .label {
  background-color: var(--dark-bg-tertiary);
  color: var(--dark-text-primary);
  border: 1px solid var(--dark-border-default);
  transition: all 0.2s ease;
}

.theme2 .tag:hover,
.theme2 .badge:hover,
.theme2 .label:hover {
  background-color: var(--dark-accent);
  color: #fff;
  border-color: var(--dark-accent);
}

/* ============================================
   代码块增强
   ============================================ */

.theme2 pre,
.theme2 code,
.theme2 .code-block {
  background-color: var(--dark-bg-tertiary);
  color: var(--dark-text-secondary);
  border: 1px solid var(--dark-border-light);
  border-radius: 4px;
}

.theme2 code {
  padding: 2px 6px;
}

/* ============================================
   分页增强
   ============================================ */

.theme2 .pagination,
.theme2 .paging {
  color: var(--dark-text-primary);
}

.theme2 .pagination a,
.theme2 .pagination button,
.theme2 .paging a,
.theme2 .paging button {
  background-color: var(--dark-bg-tertiary);
  color: var(--dark-text-primary);
  border: 1px solid var(--dark-border-light);
  transition: all 0.2s ease;
}

.theme2 .pagination a:hover,
.theme2 .pagination button:hover,
.theme2 .paging a:hover,
.theme2 .paging button:hover {
  background-color: var(--dark-accent);
  border-color: var(--dark-accent);
  color: #fff;
}

.theme2 .pagination .active,
.theme2 .paging .active {
  background-color: var(--dark-accent);
  border-color: var(--dark-accent);
  color: #fff;
}

/* ============================================
   提示和警告增强
   ============================================ */

.theme2 .alert,
.theme2 .message,
.theme2 .notice {
  border-radius: 4px;
  transition: all 0.3s ease;
}

.theme2 .alert-success,
.theme2 .message-success,
.theme2 .notice-success {
  background-color: rgba(38, 208, 124, 0.1);
  border-color: var(--dark-success);
  color: var(--dark-success);
}

.theme2 .alert-warning,
.theme2 .message-warning,
.theme2 .notice-warning {
  background-color: rgba(255, 167, 34, 0.1);
  border-color: var(--dark-warning);
  color: var(--dark-warning);
}

.theme2 .alert-error,
.theme2 .message-error,
.theme2 .notice-error {
  background-color: rgba(255, 77, 94, 0.1);
  border-color: var(--dark-error);
  color: var(--dark-error);
}

.theme2 .alert-info,
.theme2 .message-info,
.theme2 .notice-info {
  background-color: rgba(33, 150, 243, 0.1);
  border-color: var(--dark-info);
  color: var(--dark-info);
}

/* ============================================
   加载和动画增强
   ============================================ */

.theme2 .loading,
.theme2 .spinner,
.theme2 .skeleton {
  background: linear-gradient(
    90deg,
    var(--dark-bg-secondary),
    var(--dark-bg-tertiary),
    var(--dark-bg-secondary)
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* ============================================
   响应式优化
   ============================================ */

@media (max-width: 768px) {
  .theme2 {
    font-size: 14px;
  }
  
  .theme2 .card,
  .theme2 .item,
  .theme2 .module {
    border-radius: 6px;
    padding: 12px;
  }
  
  .theme2 .btn,
  .theme2 button {
    padding: 8px 16px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .theme2 {
    font-size: 13px;
  }
  
  .theme2::-webkit-scrollbar {
    width: 6px;
  }
}

/* ============================================
   打印优化
   ============================================ */

@media print {
  .theme2 {
    background-color: #fff;
    color: #000;
  }
  
  .theme2 .head,
  .theme2 .foot,
  .theme2 .navbar {
    display: none;
  }
}